DEV Community: Paul Golubkov

Improving Horizontal Scroll with CSS Scroll Snap

Paul Golubkov — Wed, 07 Jul 2021 13:46:00 +0000

The pattern with horizontal scroll is frequently found in mobile versions of sites.

For example, on Airbnb's home page:

It looks smooth and the scroll always stops at the beginning of a card, but there are many bad examples on the Internet when the scroll stops in random positions. I'll not provide links to these sites, but I've created a demo for you, please see it on your phone:

codepen

Try to enable and disable CSS Scroll Snap behaviour by toggling the checkbox on top of the page and see a difference when scrolling. The difference is enormous. When CSS scroll snap is enabled, the scroll behaviour is more smooth and looks like a native app.

This behaviour is achieved by 2 simple CSS rules:

.scroll-container {
  scroll-snap-type: x mandatory;
}

.scroll-container-child {
  scroll-snap-align: start;
}

Cool, right? You can read more about CSS Scroll Snap on mdn.

Browser's support

It has nice browser's support and can be used in production. Can I Use.

That's it

Thank you for reading! Add your reactions and comments.

Follow me on Twitter.

Web Performance Case Study: webpack splitChunks

Paul Golubkov — Thu, 03 Jun 2021 17:43:04 +0000

Hello there! I've just finished optimizing my last commercial project, and now, I want to share what I've learned. So, I've decided to start a series of articles.

In this article, I want to share with you knowledge about webpack's optimization.splitChunks functionality. That functionality is a part of the webpack since version 4 before It was an external plugin called SplitChunksPlugin. It provides a way to split your bundle into several parts.

When can it be useful?

It can help you at least in two kinds of cases:

When you have a single entry, you can separate vendors for a better cache strategy
When you have many entries, you can separate common parts

Let's take a look at examples of both cases.

Single entry

Let's imagine that we have a bundle that contains react app. It includes JavaScript code from an app directory and several npm packages from the node_modules directory:

Our bundle's name contains a contenthash for cache validation in the browser. When we change some code in our app, we create a new bundle that includes a different contenthash, and users will download it again. Frequently we'll change code inside our app directory and not change our npm dependencies, but our users will anew download the whole bundle. Here is where splitChunks can help us.

We can separate our bundle into two parts:

code inside app directory
code inside node_modules

In this way, when we'll change a code inside the app directory, our users will download only that part.

Let's do it!

To do that we need to add that code to our webpack config:



{
  entry: {
    ... // here is your entry
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendors: {
          test: /node_modules/,
          chunks: 'initial',
          filename: 'vendors.[contenthash].js',
          priority: 1,
          maxInitialRequests: 2, // create only one vendor file
          minChunks: 1,
        }
      }
    }
  }
}

Now our bundles will looks like that:

How you can see we don't reduce bundle size, but we save some kb of traffic for our users in case when we change only one part of code.

You can get more control of what will be added to bundle by passing function instead of regexp as test:



{
  entry: {
    ... // here is your entry
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        react: {
          test(module) {
            // `module.resource` contains the absolute path of the file on disk.
            return (
              module.resource &&
              module.resource.includes('node_modules/react')
            );
          },
          chunks: 'initial',
          filename: 'react.[contenthash].js',
          priority: 1,
          maxInitialRequests: 2,
          minChunks: 1,
        }
      }
    }
  }
}

In this case will be created bundle that will contain only code of react package.

Many entries

Assume we have three entries like that:

We can move common code to separate bundle:



{
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendors: {
          test: /node_modules/,
          chunks: 'initial',
          filename: 'vendors.[contenthash].js',
          priority: 1,
          maxInitialRequests: 2,
          minChunks: 3, // count of entries
        }
      }
    }
  }
}

Now our bundles may looks like that:

We didn't reduced size of javascript needed for page, but we reduced total size of bundles and now we can cache common bundle across pages, and it's cool!

That's it

Now you know how you can use the splitChunks to improve UX in your app, read documentation for more detais and try it out!

Thank you for reading! This is the first article of the series about web performance, click on the Follow button to see future articles and motivate me to write them.

Follow me on Twitter: https://twitter.com/paulcodes_tech, there I'll share with you some tips and tools for Frontend developers.

Answer me in comments:

Did this article was helpful?
Do you like the pictures I provide?
Will you try it out?
Do you want me to provide a repository for this and future articles?
Any other feedback :)

Most useful aliases for git

Paul Golubkov — Fri, 28 May 2021 07:44:34 +0000

Hello everyone! In this article, I'll share with you some useful aliases for git that I use every day.

Working with branches

For each feature I work on, I create a new branch, this alias saves me a lot of time:

gco

This is an alias for

git checkout

Usage

gco branch-name // switch to branch an existing branch
gco -b branch-name // create a new branch and switch to it
gco . // discard all changes in the working directory

Commits

Every day I create a lot of commits, each time type git commit is boring, so I use these aliases:

gcmsg

This is an alias for

git commit -m

Usage

gcmsg 'feat: commit text' // create new commit

gca

This is an alias for

git commit --amend

gcfix

This is an alias for

git commit --fixup

Usage

gcfix commit_hash // create a fixup commit for commit with provided hash

Rebasing

When you work on a large project, rebasing is part of your everyday routine, so this alias will save you some time of typing

gpr

This is an alias for

git pull --rebase origin dev // remote and branch may be different in your case

Also often I need to rename, remove some commits or squash fixups in my local branch, for this I use this alias:

gria

git rebase -i --autosquash

Usage

gria HEAD~4 // interactively change last 4 commits

Pushing

After I've created some commits I need to push them, for that I use next:

ggp

git push origin $(current_branch) // instead of origin you can use your own remote

What is $(current_branch) ? It's an function that returns name of current branch, It looks like that:

function current_branch() {
    ref=$(git symbolic-ref HEAD 2> /dev/null) || return
    echo ${ref#refs/heads/}
}

How to keep aliases

If you just type in terminal command

alias gs="git status"

it will work, but when you restart the terminal it will not.

For fix that I keep all my aliases in file ~/.bash_aliases and import them in my ~/.bash_profile like that:

if [ -f ~/.bash_aliases ]; then
  . ~/.bash_aliases
fi

My ~/.bash_aliases looks like that:

function current_branch() {
  ref=$(git symbolic-ref HEAD 2> /dev/null) || return
  echo ${ref#refs/heads/}
}

alias ~="cd ~";
alias ..="cd .."
alias g="git"
alias gs="git status"
alias gc="git commit"
alias gcmsg="git commit -m"
alias gcfix="git commit --fixup"
alias gria="git rebase -i --autosquash"
alias gca="git commit --amend"
alias gco="git checkout"
alias gb="git branch"
alias gpr="git pull --rebase origin dev"
alias gp="git pull"
alias ggp="git push origin $(current_branch)"

Thank you for reading

I hope you've enjoyed this article! Please click on the "Follow" button to see my future articles.

I'll glad to see any feedback!

All about Abstract Syntax Tree

Paul Golubkov — Thu, 27 May 2021 11:30:43 +0000

Hello there! In this article, I'll tell you what AST is and how it can help you in the context of JavaScript.

What AST is

In computer science, an abstract syntax tree (AST), or just syntax tree, is a tree representation of the abstract syntactic structure of source code written in a programming language. Each node of the tree denotes a construct occurring in the source code.

by Wikipedia

In short, AST is just an object representation of source code.

Example

Let's take a look at the example of source code:

const me = { name: 'Paul' }

For this, AST may look like that:

{
  "type": "Program",
  "start": 0,
  "end": 27,
  "body": [
    {
      "type": "VariableDeclaration",
      "start": 0,
      "end": 27,
      "declarations": [
        {
          "type": "VariableDeclarator",
          "start": 6,
          "end": 27,
          "id": {
            "type": "Identifier",
            "start": 6,
            "end": 8,
            "name": "me"
          },
          "init": {
            "type": "ObjectExpression",
            "start": 11,
            "end": 27,
            "properties": [
              {
                "type": "Property",
                "start": 13,
                "end": 25,
                "method": false,
                "shorthand": false,
                "computed": false,
                "key": {
                  "type": "Identifier",
                  "start": 13,
                  "end": 17,
                  "name": "name"
                },
                "value": {
                  "type": "Literal",
                  "start": 19,
                  "end": 25,
                  "value": "Paul",
                  "raw": "'Paul'"
                },
                "kind": "init"
              }
            ]
          }
        }
      ],
      "kind": "const"
    }
  ],
  "sourceType": "module"
}

Looks pretty simple, right? You can watch this example or write your own in the online playground: astexplorer

Tools

There are many tools for creating AST from javascript source code, for example:

In the rest of the article, I'll use jscodeshift because it has a simple API for transforming AST into another state.

When to use

Code analisys

On top of AST have been written many tools that every front-end developer uses every day, such as eslint and prettier.

Migration scripts

Sometimes you need to migrate from one version of a library to another, for example, when React has updated to version 15.5 the PropTypes has moved to different package and the react-developers provides codemod for migration.

Codemod is just a code that takes source code, converts it to AST, does some manipulation, and returns new source code.

You can write your own codemod in easy way, we’ll see it little bit later in this article.

Code generation

For example, you can write script that will generate documentation from you source code using JSDoc or Typescript.

Real-world example

Some time ago, I had a task in which I needed to transform API for a method that checks client metrics (like clicks on elements) in integration tests:

From:

browser.checkMetrics({
    path: '$page.$main.some-block.some-element',
    attrs: {
        action: 'click',
        someData: {
             type: 'kind'
        }
    }
});

To:

browser.checkMetrics({
    path: '/$page/$main/some-block/some-element[@action="click" and @someData@id=1]',
});

In some cases, it can be performed manually, but we have hundreds of this method calls. So, I've decided to write a codemod.

Solution

async function transformMethod(filePath) {
  const source = await asyncReadFile(filePath);

  const root = j(source.toString('utf-8'))
    .find(j.CallExpression)
    .filter(({ value: callExpression }) => {
      const { property } = callExpression.callee;

      return property && property.name === 'checkMetrics';
    })
    .forEach(({ value: callExpression }) => {
      const checkObjectPath = callExpression.arguments[0];
      const checkObject = parseObject(checkObjectPath);
      const attrsString = checkObject.attrs ? `[${attrsIntoString(checkObject.attrs)}]` : '';
      const path = `/${checkObject.path.replace(dotRegexp, '/')}${attrsString}`;

      // Remove `attrs` property from original object
      checkObjectPath.properties = checkObjectPath.properties.filter(({ key }) => key.name !== 'attrs');

      // Find AST representation of `path` property
      const counterPath = checkObjectPath.properties.find(({ key }) => key.name === 'path');

      // Change value of `path` property
      counterPath.value.value = path;
    });

  // For code formatting, try to remove it for see result without it
  const linter = new CLIEngine({ fix: true });
  let newSource = root.toSource({ quote: 'single' });
  let eslintResult;

  try {
    [eslintResult] = linter.executeOnText(newSource, filePath).results;
  } catch (e) {
    console.log(e);
  }

  if (eslintResult.output) {
    newSource = eslintResult.output;
  }

  await asyncWriteFile(filePath, newSource, 'utf-8');
}

Full code you can see in my example repository .

Сonclusion

Thank you for reading! I hope it's been usefull for you and you'll use that information in your tasks.

I'll glad to see any feedback!