Krzysztof Żuraw blog's RSS Feed

TIL - Chrome has emulate focused page

Fri, 11 Dec 2020 18:46:50 GMT

Today I learned that chrome has Emulate Focused Page settings.

What such toggle is doing?

It emulates that the page is focused and allows to debug select or dropdown that is triggered when user focus input.

You can see screenshot below:

You can find this setting under Rendering/Emulate Focused Page inside chrome devtools. Rendering tab can be accessed by CMD+SHIFT+P and typing Rendering.

TIL - how height:auto works

Wed, 02 Dec 2020 18:58:50 GMT

Today I learned a bit more on how height:auto works. Let’s say you have a box that has implicit height & width set to 250px. Inside this box you place 1px by 1px image. You give image height: auto. What is happening? This image is taking whole 250px height!

But you do the same with image 250px by 1px (250px width by 1px height) - image is taking only 1px height.

So if you want your image to take only 1px with height:auto make sure that such image has full width of parent.

You can see example in this codepen.

Tooling overload in JS

Thu, 26 Nov 2020 18:40:50 GMT

Before I start let me clarify what I mean by tooling in the context of programming language: all ecosystem of tools/libraries/frameworks that are needed to use with a given programming language.

When I’m thinking about tooling and how cumbersome it can be the first thing that comes to my mind is JavaScript. You probably heard of the black hole of node modules or days since the last JavaScript framework website. It means that either ecosystem is a black mess with a huge dependency list and new dependencies come every day.

Why is that?

I read somewhere that JavaScript as an ecosystem is a baby. It means that we have many responsibilities and so little knowledge about how to handle such a range of responsibilities. Where can we learn? Maybe we can look into other languages - how & what they are doing?

I think you expect me to write about how beautifully other languages are doing the things that JavaScript cannot or not yet done. Sorry to disappoint you - but I don’t. I think I don’t know enough yet to do this. But I can give an example of my journey with one piece of the tooling ecosystem - bundlers.

Example from my work

I wanted to develop React & Typescript application. In a typical situation,you expect me to use something like create-react-app. I personally like to set up my own tooling and choose parts of the toolchain instead of being surprised when I eject.

I choose a parcel as a main piece of the toolchain.‌ Why? It is the easiest to start and I don’t need to write any config. I added ant design too.

Two weeks of development passed and I need to render the Table. I import it via import {Table} from 'antd' and tried to run the project in development mode. I got an error telling me that parcel can’t create a JavaScript bundle. I started searching around the web for this problem.

After a while, I found a corresponding issue inside ant design GitHub repository. The main conclusion was that table won’t work with parcel. I checked issue tracker inside parcel repository to see that issue was stale. I had two options there - either fix the issue or change the bundler to one that works with antd.

I choose webpack as it is a recommend bundler to use with antd. I have to migrate the application from parcel to webpack. I started by adding TypeScript and Babel plugins & configs. After that, I need to add emotion.js babel plugins in proper versions in order for css prop to work. I the meantime I forgot about less loader for antd - I had to add it as well.

It took about 3 hours of running webpack server, fixing building errors, fixing TypeScript errors but in the end I made it!. No errors from tsc, no errors from eslint (which setup requires additional 5 packages in order it to work with TS), no errors from npm run dev. I’m done here 🎉.

Until the next update of webpack or babel or any part of the toolchain.

Summary

This was a mind dump about the tooling ecosystem in JavaScript world. I wrote about my problems with ant design in conjunction with parcel. Takeaway? It is hard but we are moving in a good direction.

Stack & Column in CSS-in-JS

Fri, 06 Nov 2020 18:07:50 GMT

Today I want to write more about new emotion components that we try at Ingrid. Those components help us with spacing.

The problem

I want to implement this footer:

It has a logo, text in two rows and horizontal space between them. It sounds not bad. I added a logo, then left margin and in the end two rows of text. Or I can use css grid to have the same effect.

Yet after two weeks requirements change and I don’t need to display the telephone number to the user if there is no enough data. In this case, I won’t render this component. Yet I have a problem - margin-top between contact our support & at 555-555-555. I can either refactor that to grid/flexbox with a gap instead of margin-top (the best way) or I can add conditional inside my css prop telling emotion to reset margin-top to 0 (the worst way). In the worst case, my code started to look like spaghetti, in the best case in mix flexbox or grid definitions with margins, colours & fonts making my code less readable.

Solution

What is solution for this problem? Use specialised components. Specialised component has one task - to give spacing and make sure that elements lay in the place where they should be. Below you will find example of those specialised components in action:

<Columns space="0.5rem" alignY="flex-start">
  <img src="logo.svg" />
  <Stack space="0">
    <p>Contact our support</p>
    <p>at 555-555-555</p>
  </Stack>
</Columns>

I now have Columns component to create columns from its children - in my case img and Stack. Stack is making sure that p children have spacing between them.

What are the pros? I have a nice abstraction that can be shared across a team of people. I can point my teammates into those components when they need to create other combinations of layouts. Because this is abstraction I can think about layouts as a combination of different boxes (which is HTML sense they are). I found it much easier to combine them, reason about them, or change them. I can move my focus to other pieces of frontend instead of fighting layout & spacing.

Below you can find an example implementation of Columns & Stack components in emotion + react:

import * as React from 'react';

type Props = {
  space: 'string'; // it can be typeof keyof Theme['spacing']
};

export const Stack: React.FunctionComponent<Props> = ({ children, space }) => {
  return (
    <div
      css={{
        '> * + *': {
          marginTop: space,
        },
      }}
    >
      {children}
    </div>
  );
};

import * as React from 'react';

type Props = {
  space: 'string'; // it can be typeof keyof Theme['spacing']
};

export const Columns: React.FunctionComponent<Props> = ({ children, space }) => {
  return (
    <div
      css={{
        display: 'flex',
        alignItems: 'center',
        '> * + *': {
          marginLeft: space,
        },
      }}
    >
      {children}
    </div>
  );
};

HTML examples can be found on codepen.

Summary

In this blog post, I wrote on how one can use Stack & Columns components for creating layouts.

Intl Collator in JavaScript

Wed, 21 Oct 2020 18:23:50 GMT

Recently I needed to sort an array of objects from A to Z. Usually for such task I’m using the following piece of code:

const cities = [{ name: 'Wrocław' }, { name: 'Kraków' }, { name: 'Łódź' }];

cities.sort((city1, city2) => (city1.name > city2.name ? 1 : -1));

Yet I had a problem with this code - the last city Łódź was not in the right place. The proper order should be:

[{ name: 'Kraków' }, { name: 'Łódź' }, { name: 'Wrocław' }];

But code from previous example returned:

[{ name: 'Kraków' }, { name: 'Wrocław' }, { name: 'Łódź' }];

Why is that? Because Łódź is not starting from Unicode character - it is a utf-8 one.

How then can I sort an array with utf-8 characters? In turns out that all major browsers have support for localeCompare.

What it is? I like to think about this method as a way of sorting with utf-8 support. localeCompare allows me to compare two strings with internationalization support. My sorting example now can be changed to:

const cities = [{ name: 'Wrocław' }, { name: 'Kraków' }, { name: 'Łódź' }];

cities.sort((city1, city2) => city1.name.localeCompare(city2.name));
// [{name: 'Kraków'},{name: 'Łódź'},{name: 'Wrocław'}];

There is a lot of configuration options to localeCompate - if you want to know more I recommend visiting mdn.

Summary

In this blog post, I wrote on how to use localeCompare to sort strings that are utf-8.

How to split antd theme into smaller components

Wed, 14 Oct 2020 11:18:50 GMT

Recently I stumbled upon an interesting problem at work. I was using ant-design and I wanted to customize default theme variables. To do that I’ve created a theme.less:

@import '~antd/dist/antd.less';

@primary-color: #003dff;
@dark-color: #38b6ab;
@font-family: Inter;

Everything was fine until I looked into webpack-bundle-analyzer I saw that theme.less was taking a huge portion of the overall bundle size:

What is the problem here?

It turns out that by @import '~antd/dist/antd.less' I accidentally imported whole antd styles. Because of that theme.less is so big. How to fix it? After googling around I found out about 2 steps that I could that to lower size of my bundle:

customize antd theme via webpack
tell transpiler (babel) to inject css when you are using antd components

Customizing antd theme

How you can customize antd theme? According to antd docs you can add options to webpack less-loader:

// the rest of webpack config
module.exports = {
  module: {
    rules: [
      // the rest of loaders setup
      {
        test: /\.less$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
          {
            loader: 'less-loader',
            options: {
              lessOptions: {
                modifyVars: {
                  // override antd default styles
                  'primary-color': '#003dff',
                  'dark-color': '#38b6ab',
                  'font-family': 'Inter',
                },
                javascriptEnabled: true,
              },
            },
          },
        ],
      },
    ],
  },
};

Setup babel to inject CSS

The second optimization I added was to extract only those styles that are used by antd components inside my application via babel-plugin-import. You can see the recommended configuration of this plugin below:

{
  // rest of .babelrc
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": true
      }
    ]
  ]
}

Summary & TL;DR

In this blog post, I wrote on how to override antd theme without importing whole library styles and how to use only those styles that are actually used in your application.

Setting up webpack for chrome extension development

Fri, 18 Sep 2020 11:18:50 GMT

Today I learned how to setup webpack for chrome extension development. In this post I will show you how I did it. To start, you need to install webpack and packages from webpack ecosystem:

npm install --save-dev webpack webpack-cli html-webpack-plugin clean-webpack-plugin copy-webpack-plugin

First step done - now it is getting tricky. How to lay out development & production config to avoid nested ternary operators as you don’t want to spend 3 days setting up everything?

Create webpack.common.js. Here you gonna put common settings that will be used by both development & production config:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: { popup: './src/popup/index.tsx', background: './src/background/index.ts' },
  module: {
    rules: [{ test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/ }], // do not forget to change/install your own TS loader
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  plugins: [
    new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),
    new HtmlWebpackPlugin({ template: 'src/popup/index.html' }),
    new CopyWebpackPlugin({
      patterns: [
        { from: './src/manifest.json' },
        { from: './src/icons/icon16.png' },
        { from: './src/icons/icon48.png' },
        { from: './src/icons/icon128.png' },
      ],
    }),
  ],
  output: { filename: '[name].js', path: path.resolve(__dirname, 'dist') }, // chrome will look for files under dist/* folder
};

Config above have 2 entry points - because I am using both popup and background scripts.

Webpack’s development config is a merge between common & dev configs:

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
});

Prod configuration is following the same pattern:

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'production',
});

Lastly I have two commands for webpack

{
  "scripts": {
    "start": "webpack --watch --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js"
  }
}

Below you have diagram presenting how npm start is working under the hood

All you need to do after running npm start is to tell chrome that there is unpacked extension in the dist/* folder. To do that you need to go to chrome://extensions/ and select options which are visible in the picture below (numbers indicate ordered selection of buttons/switches):

Summary

In today’s blog post I described setting up webpack for browser’s extension development. You can check a working example in my latest side project - rabat.

RxJS and auth token expiration timers

Fri, 21 Aug 2020 14:50:01 GMT

Recently in my work, I stumbled upon an interesting problem to solve. I needed to inform users that they have a valid token only for the next 10 minutes and after that 10 minutes logout them. You can see the user flow with more details on the illustration below.

For this use case, I decided to use a redux-observable - in this blog post, I will write how I did it. I assume that you are familiar with the RxJS.

Why the RxJS and not other redux middleware was used for async actions? To be honest it was my personal preference and this library includes helper functions that are perfect for this use case.

Going back to the topic - let’s start with the first event - user logs in.

User logs in

I used Auth0 lock as an entry point to my application. When the user enters login & password then is redirected back with JWT token.

Read expiration time from token

JWT token has handy information about its expiration time. I have used jwt-decode to decode a token and to extract expiration time. If you are using TypeScript you need to type what is inside the token:

import jwtDecode from 'jwt-decode';

const decodedToken = jwtDecode(authToken);

When it comes to date manipulation I have used date-fns. Firstly, I converted exp which is a UNIX timestamp to date and then sub function help me to get date 10 minutes before expirationDate.

import { fromUnixTime, sub } from 'date-fns';

const expirationDate = fromUnixTime(decodedToken.exp);
const firstNotificationDate = sub(expirationDate, { minutes: 10 });

Epics

Now it is time to set up two redux-observable epics.

The first epic has one job: to dispatch notification action 10 minutes before expirationDate.

import { isActionOf } from 'typesafe-actions';
import { filter, delay, mergeMap, takeUntil } from 'rxjs/operators';
import { of } from 'rxjs';

const setLogoutNotificationEpic = (action$, state$) =>
  action$.pipe(
    filter(isActionOf(setupAuthorization)),
    mergeMap(
      () =>
        of(showLogoutNotification())
          .pipe(delay(firstNotificationDate))
          .pipe(takeUntil(action$.pipe(filter(isActionOf(logoutUser))))) // unsubscribe when user logs out
    )
  );

RxJS has a handy helper for delaying action emission (in my case showLogoutNotification) called delay. What is neat about it? It can take both the number of milliseconds and the date to delay stream of actions. It has one bug though but more about it later.

I had the first epic in place so I can create the second one. This epic main task is to logout user (dispatch action to logout user to be precise) on the expiration date.

const setLogoutEpic = (action$, state$) =>
  action$.pipe(
    filter(isActionOf(setupAuthorization)),
    mergeMap(() =>
      of(logoutUser())
        .pipe(delay(tokenExpirationDate))
        .pipe(
          takeUntil(action$.pipe(filter(isActionOf(authActions.logoutUser)))) // unsubscribe when user logs out
        )
    )
  );

As you can see only actions and data passed to delay is different from the previous example.

You may ask why do I need to have those delays inside two different epics. It is because of the bug in RxJS. Long story short - when you have two delays inside the same epic they will not work. I took this opportunity and I made my code more readable (at least I think I did).

Summary

I wrote a blog post on how to use the RxJS delay operator to dispatch two actions:

10 minutes before JWT token expires,
when JWT token expires.

How to setup emotion css prop to work with Parcel & TypeScript

Sat, 08 Aug 2020 11:05:06 GMT

In this blog post I will look into how to setup Emotion css prop with Parcel & TypeScript. There are two ways those tools work with each other. You can either use /** @jsx jsx */ pragma on every file you want to use css prop or you can tell babel to do it for you. I’m a bit lazy so I prefer the second option. Below you will find a quick guide on how to do it.

Create the .babelrc file inside the root of your repository. Put the following contents inside:

{
  "plugins": [
    ["transform-inline-environment-variables"],
    [
      "babel-plugin-jsx-pragmatic",
      { "export": "jsx", "module": "@emotion/core", "import": "___EmotionJSX" }
    ],
    [
      "@babel/plugin-transform-react-jsx",
      { "pragma": "___EmotionJSX", "pragmaFrag": "React.Fragment" }
    ],
    ["emotion"]
  ]
}

In essence you are telling babel to add jsx-pragma when you are using css prop. If you want to know more I recommend this issue on github.

Edit tsconfig with jsx & types

{
  "compilerOptions": {
    // the rest of configuration
    "jsx": "preserve", // for babel to work
    "types": ["@emotion/core"] // you can now use css prop on e.g div and TypeScript won't shout at you
  }
}

Let parcel install needed deps. Run command for building your parcel project. Parcel is smart enough to install needed dependencies by yourself. If you happen to get an error: Conflicting babel versions found in .babelrc. Make sure all of your plugins and presets depend on the same major version of babel. I recommend to add "@babel/core": "7.10.5" as dev dependency inside package.json and run npm install again.

Summary

In this blog post, I’ve looked into how to setup Emotion css prop with Parcel & TypeScript. You can find an example repo on my github.

Cron under MacOS

Wed, 22 Jul 2020 18:15:48 GMT

I’m using plain text to store my information. This plain text is inside a git repo. To back it up I need to commit changes & push them to the remote. I was doing that manually. Yet this is not effective. I decided to use cron for that. Every 30min I want to execute a script that backs up my wiki. How to do that under mac?

Cron under MacOS

You cannot use cron. Instead Apple encourage to use launchctl. How to set up launchctl? At first you need to create plist file:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
  <key>Label</key>
  <string>com.krzysztofzuraw.wikibackup</string>

  <key>ProgramArguments</key>
  <array>
    <string>/Users/kzuraw/wiki/backup.sh</string>  <!-- script location -->
  </array>

  <key>Nice</key>
  <integer>1</integer>

  <key>StartInterval</key>
  <integer>1800</integer> <!-- 30min -->

  <key>RunAtLoad</key>
  <true/>

  <key>StandardErrorPath</key>
  <string>/tmp/wikibackup.err</string>

  <key>StandardOutPath</key>
  <string>/tmp/wikibackup.out</string>
</dict>
</plist>

Maybe you wonder what is nice key? After a bit of searching, I found out that it is used for scheduling priority. You can read more about it on man page of nice.

Going back to configuration. For launchctl to pick up your configuration plist file has to be placed under ~/Library/LaunchAgents. I prefer to use already existing plist naming convention: com.YOURNAME.CONFIGURATION_NAME.plist I named my plist as com.krzysztofzuraw.wikibackup.plist. If you have this setup execute launchctl load com.krzysztofzuraw.wikibackup.plist. Similarly if you need to unload it you can use launchctl unload com.krzysztofzuraw.wikibackup.plist. To see which launchctl scripts are running try launchctl list.

My lanuchctl script is running but how does backup.sh looks like?

#!/bin/zsh
cd ~/wiki # script still needs to enter folder even if backup script is inside the wiki
git add .
git commit -a -m "updated on `date +'%Y%m%d%H%M'`"
git push origin master

Summary

If you see to set up cron jobs under MacOS - use launchctl. You can read more at Mac crontab: Creating MacOS startup jobs with crontab, er, launchd. Original idea from Using VimWiki.