DEV Community: Pavel Susicky

How to make scrollbar with changing gradient on scroll using 10 lines of CSS 🚀

Pavel Susicky — Sat, 04 Jan 2020 11:05:35 +0000

Introduction

You may know we can use a set of CSS pseudo-elements to customize scrollbar on our website, but did you know we can use a special trick to make a gradient scrollbar that changes on scroll only with CSS?

Our final result should look like codepen below. The CSS behind it isn't complicated and it consists only of 10 (+ 2 empty) lines of code. If you want to discover the magic on your own, see the codepen. Otherwise, keep reading to see what trick did we do to make this work. 😎

Note: if you see the default scrollbar make sure, you are using a browser which supports scrollbar pseudo-elements (any Webkit based browser is fine)

We will make use of these pseudo-elements:

::-webkit-scrollbar
::-webkit-scrollbar-track
::-webkit-scrollbar-thumb

However, there are a few more available if you want to see a full list of scrollbar's pseudo-elements visit MDN.

The code

Let's start with the first pseudo-element ::-webkit-scrollbar to set a width of our scroll. So in CSS, it looks like this:



::-webkit-scrollbar {
  width: 20px;
}

Next, we're gonna add our desired gradient (you can create one with this handy tool https://cssgradient.io/.

Do you have your gradient ready? So add it to ::-webkit-scrollbar-track pseudo-element as background property. This will make our scrollbar to be covered by the gradient.



::-webkit-scrollbar-track {
  background:  linear-gradient(0deg, rgba(255, 0, 0, 1) 0%, rgba(7, 0, 211, 1) 100%);
}

The trick

Now the most important step, we're gonna customize the scroll handle (called thumb pseudo-element). Firstly, try to add a solid background colour to the thumb.



::-webkit-scrollbar-thumb {
  background: lime;
}

You will see the typical scrollbar handle with green colour. Perfect. Now let's make it transparent. So use background: transparent; or opacity: 0;.

We are not able to see it now, but we know that it is there and we can see the gradient through it, nice! So all we need to do is to render all external space with solid colour. How do we do that?

With the use of a box-shadow property! Let's refresh what does box-shadow property consists of:



.box {
  box-shadow: 0px 0px 4px ??? black;
}

0px: horitontal (x-axis) offset
0px: vertical (y-axis) offset
4px: blur
???: the secret property we will make use of
black: color of the box-shadow

The fourth hidden property is called spread and it increases/decreases the size of the box-shadow and that's perfect! If we set it to an enormous value with zero blur, it will cover all space around the scrollbar handle. That's exactly what we want! Let's try it in the code!

Make sure you gave it a big value, so it covers the whole scrollbar.



::-webkit-scrollbar-thumb {
  background: transparent;
  box-shadow: 0px 0px 0px 100000vh black;
}

And we are finished, and we can see how our scrollbar gradient is changing on scroll. The whole principle works on the idea of seeing through the handle the gradient background of the scrollbar. And cover all outside space with a solid colour, so cool 😎

Composed together the code looks like this:



::-webkit-scrollbar {
  width: 20px;
}

::-webkit-scrollbar-track {
  background:  linear-gradient(0deg, rgba(255, 0, 0, 1) 0%, rgba(7, 0, 211, 1) 100%);
}

::-webkit-scrollbar-thumb {
  background: transparent;
  box-shadow: 0px 0px 0px 100000vh black;
}

BIG Credits 👏

I didn't come up with this neat trick using box-shadow, all the credits should go to James Warner, who is an amazing web developer streaming on Twitch.

JAMES WARNERFollow

Surely go check him out! He is currently developing an astonishing personal website using WebGL, React, Next.js and Sanity.io! Just see a snippet of his progress below:

The screenshot itself looks cool, but see it in action here

Technology stack for your blog in 2019

Pavel Susicky — Sat, 07 Dec 2019 15:33:05 +0000

Personal blog is one of the most popular projects for every developer. It can be done in various ways from plain HTML, CSS and Javascript files to a big codebase with all the best practises you can imagine.

I want to share with you the stack I've used to create my blog, so let's get right into it! 🚀

Quick note: this blog is created as JAMStack solution, so we don't need any kind of server to handle our blog posts creation and so on. So it is possible to host it on any static website hosting such as Netlify, Github pages and more!

React

I guess many of you already know React. It is a Javascript library for creating user interfaces. Application is build using components, which can be composed together and reuse across the project, which makes it very powerful.

It's a core of our application because other libraries listed below depend on React itself.

Available on npm registry
Official docs: https://reactjs.org/docs/getting-started

Gatsby

Gatsby is a Javascript framework (for React.js apps) which helps you to set up your application. It handles most of the boilerplate code you would otherwise handle by yourself (webpack config, "server-side" rendering, GraphQL, and so on..). Apps built with gatsby are really (really) fast.

You can use Gatsby plugins in your application, which enhance your app by features, or you can create a custom plugin for others.

By the way, Gatsby has one of the most "bulletproof" documentation you will find on the internet. If you stumble across some error, try to search the gatsby docs, there is a big chance that it is already covered there.

Available on npm registry
Official docs: https://www.gatsbyjs.org/docs/

Typescript

Known as superset of Javascript. It adds static type-checking on top of Javascript and provides clever IntelliSense in your favourite Text editor/IDE.

Typescript is still evolving, and every new version brings new features, which saves hours and hours of developer's valuable time.

Available on npm registry
Official docs: https://www.typescriptlang.org/docs/home

Emotion

Emotion is a CSS-in-JS library. It has been gaining popularity lately and there are many aspects why! It has built-in scoping for your styles. Working server-side rendering out of the box, or with a little and easy configuration. State-based styling and many more features!

Available on npm registry:

Official docs: https://emotion.sh/docs/introduction

Eslint

ESLint is a tool for identifying and reporting on patterns found in JavaScript (also Typescript) code. It should be a must-have tool in your tech stack because it will force you to use best-practises across the project and if your blog is open-sourced you should definitely be thinking about adding it!

Available on npm registry
Official docs: https://eslint.org/docs/user-guide/getting-started

Prettier

Prettier is an opinionated code formatter, which supports most popular languages. It keeps consistency in your code formatting, which can be very valuable and also time-saving because you don't need to format code manually.

Available on npm registry
Official docs: https://prettier.io/docs

Jest

Is a very popular testing library. It integrates very well with react.

Available on npm registry
Official docs: https://jestjs.io/docs/en/getting-started

React Testing Library

For testing react components you usually go for enzyme, but you should be thinking about going for testing library because it makes your tests to be less dependent on the component's internal state.

Note: if you switch from enzyme to testing library you will need to change (a little) your thinking about writing tests because it is different from enzyme.

You should definitely take a look at blog by Kent C. Dodds (author of testing library) if you want some in-depth knowledge about testing library!

Available on npm registry
Official docs: https://testing-library.com/docs/react-testing-library/intro

Cypress

Is an end to end testing framework, which enables you to write all kinds of tests:

Unit tests
Integration tests
e2e tests

It's a very nicely done framework with amazing documentation (with text and video versions!) and it's very easy to set up.

Available on npm registry
Official docs: https://docs.cypress.io/

Share your tech stack

What is your tech stack for this year? What technologies do you use in combination with Vue or Angular? Tell us in comments! 🧐

This post is published on my blog, see it here!

Top 5 amazing tools for every web developer

Pavel Susicky — Sat, 23 Nov 2019 15:03:37 +0000

Introduction

We all want to be as effective as possible that's why we are developing things which boost our (and others) productivity, but we are also using tools from other developers, who made these tools with the same reason.

So I want to introduce you to my top 5 tools (for web developers) I'm using on an everyday basis. The list is not sorted in any way, all of these tools are very amazing and make our life easier.

You can leave a comment down below with your curated list of favourite tools for web developers!

So let's get started 🚀

Lighthouse

Lighthouse is an amazing (open source) tool made by Google. It reports important aspects of our web pages, such as Seo, Performance, Accessibility, Best practises and more!

Amazing feature of Lighthouse is that it can be used in many ways, the most popular one is using official Google Chrome Extension, but you aren't bound to using only Chrome extension, other ways are:

Note that with Web UI you don't have to install anything, however, you are limited by the available options. When using the extension you can "emulate" CPU throttling and internet speed, so you can see how is your website doing on low-end hardware devices, isn't that awesome?

Chrome and Firefox devtools

Personally, I don't use Firefox devtools that much, but I would say using both of them in parallel is great because each of them has amazing features the other one doesn't have. For example, Firefox has an amazing accessibility tool!

My Chrome devtools tip

If you hit Ctrl+Shift+P (while devtools are opened), you will be prompted with a search bar, where you can type command you want to execute. So for example, if you want to quickly disable Javascript without going to Chrome settings or searching the checkbox in devtools, you can type it!

Can I use

caniuse

Can I Use is probably the most known website for all developers. It lets you quickly find how well is Javascript API or CSS property supported in most popular web browsers.

Below we can see the default view of searched Javascript API. It shows us in which versions of browsers is the API available, but there two more very interesting views, let's try them!

Another view is Usage relative, very handy view if you have gathered data about which browsers your audience uses and if you need to polyfill (or change) certain features in your app to work correctly for your audience.

Last view is Date relative, where you can clearly see in which version of the browser was a certain feature added.

Web Accessibility Evaluation Tool (WAVE)

WAVE

WAVE is an extension for Chrome and Firefox. When you click it in your extension list bar, it will wrap your current visited site with its UI interface, where you can see accessibility summary of the page. It shows things like Contrast errors, accessibility errors, but also it shows features your site provides to improve accessibility.

Figma

Figma is one of the most amazing tools I have seen lately. It is a UI design and prototyping tool. Similar to tools like Adobe XD and Sketch, but Figma is web-based (but you can, of course, download desktop app), which is very powerful. It has many pros such as very good performance, real-time collaboration with your team members and FREE pricing plan, which offers all features of Figma (with unlimited export and much more) and if you are a student you can get Professional plan for free!

If I haven't convinced you to try Figma, try to read more information on official Figma site here. I believe you'll fall in love with it!

This post was published on my blog, you can check it out here.

How to set up Eslint with Typescript in VSCode

Pavel Susicky — Sat, 16 Nov 2019 17:35:36 +0000

Introduction

If you have ever been part of a development team, you probably know that every single one of us has a different code formatting, semantics standards (and that's totally fine 😅). However, when you are all developing on one thing, it's very handy to follow one strict pattern so the codebase isn't a mixture of everything.

However, it would be pretty hard and inefficient for all developers to get used to one pattern (because we have side-projects where we use different style-guide and so on).

Eslint to the rescue!

Eslint is a tool, which forces the developer to format their code according to selected rules.

E.g. rule: don't use semicolons in your code.

// The semicolon below would be underlined and showing error on hover
console.log("I shouldn't be using semicolons there");

So this way, all developers would have errors in their IDE/Text editor if they had semicolons in their code, but for some reason, they might ignore that errors/warnings and still commit changes. Fortunately, eslint can handle even that and automatically fix the errors on file save!

Unfortunately, developers might not have prepared their IDE/Text editor to work with eslint and wouldn't see those errors, but we can still create an eslint script which will run on our CI. That way we can ensure only correctly formatted code will be merged. 🙌

Why typescript?

You probably heard of typescript, it's basically javascript with types (but there is much more in it!). It adds another layer of certainty to your code. However, it is a little bit tricky to make it work with eslint so let's dive into it!

Visual Studio Code setup

First of all, we need to "teach" our editor to understand eslint 😄
So we'll install this extension.

After installation, we need to explicitly tell eslint extension to watch typescript files for linting errors (by default it lints only javascript and JSX files). Follow these instructions:

Inside VS Code use: Ctrl+Shift+P or Shift+Cmd+P
Type: Preferences: Open Settings (JSON)
Select the option
Paste this code inside the opened JSON file

{
    "eslint.validate": [
        "typescript",
        "typescriptreact"
    ]
}

Note that if you hit Ctrl+Shift+P or Shift+Cmd+P in VS Code and type eslint it will show you all commands available for this extensions! However, the commands won't work because we haven't installed eslint dependency, let's do it now!

Install eslint to your project or globally on your machine

We have two options now:

1) We will install eslint dependency globally (means it will be available for all projects on your machine, cool!)

# using npm
npm install -g eslint
# using yarn
yarn global add eslint

2) We will install dependencies per-project, which can be useful to explicitly tell a developer to use these.

# Go to the root of the project (where package.json lives)
cd my-project
# using npm
npm install -D eslint
# using yarn
yarn add -D eslint

It's your choice which one of these you want to use

Teach Eslint to work with Typescript

Eslint by default doesn't understand Typescript syntax. That's why you might hear of tslint, which is (was) used instead of eslint for Typescript project, but the backers of this package announced earlier this year deprecation of tslint in favour of typescript-eslint project (which is monorepo, so we are gonna install few packages from it).

# using npm
npm i -D typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin
# using yarn
yarn add -D typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin

We'll make configuration file for eslint. It can be of three different types:

Javascript file
JSON file - we'll take this one
YAML file
eslintConfig field in package.json

Create .eslintrc file in the root of your project and paste this code inside:

{
    "parser": "@typescript-eslint/parser",
    "plugins": ["@typescript-eslint"],
    "rules": {
        "semi": ["error", "never"],
        "quotes": [2, "single"]
    }
}

We are adding the @typescript-eslint/parser (which will parse typescript files, so eslint understands them correctly). Then under plugins, we add @typescript-eslint plugin which gives us the possibility to add rules specific to typescript code. Under rules we added some sample rules (no semicolons allowed, and use single quotes instead of double)

With this, if you create anywhere file with .ts or .tsx extension and write code like this:

console.log("This shows errors");

You should see the string being underlined and the semicolon too. Showing you what rules this code violates.

Adding automatic lint errors fixing!

Cool, now editor shows error when we type something that violates our eslint rules and we can manually fix them, but that's time-consuming, we can do better with automatic fixing!

All we need to do is to tell our VS Code eslint extension to run eslint --fix command on file save.

Inside VS Code use: Ctrl+Shift+P or Shift+Cmd+P
Type: Preferences: Open Settings (JSON)
Select the option
Update eslint-related code inside the opened JSON file

{
    "eslint.validate": [
        {
            "language": "typescript",
            "autoFix": true
        },
        {
            "language": "typescriptreact",
            "autoFix": true
        }
    ],
    "eslint.autoFixOnSave": true,
}

Now whenever you save typescript file with eslint errors, it will be automatically fixed. Awesome!

Executing eslint on command line!

We are almost finished, the last piece of work we need to do is to set up a script that will run eslint check.

The script might be executed on your CI to ensure that pushed code is correctly formatted.

To check code on your command line is very easy with eslint, look at this:

# Scans from the root of the project
eslint .
# Scans only src directory of the project
eslint src/*

However, there is a little gotcha in these commands. Do you know why? 🤔

It scans only javascript files by default, so typescript files will be ignored. So if you didn't have any javascript file in your project and only typescript files, you would see something like this:

Oops! Something went wrong! :(

ESLint: 6.6.0.

No files matching the pattern "." were found.
Please check for typing mistakes in the pattern.

So to lint typescript file we need to add an argument --ext <comma-seperated-list-of-file-extensions-to-watch. So with this in mind, the command would look like this:

# Scans from the root of the project
eslint --ext ts,tsx .
# Scans only src directory of the project
eslint --ext ts,tsx src/*

That's all, you have now configured eslint with typescript! 😎

This post was published on my blog, so you can check it out here!

Do you use GUI for git on Linux? Which one?

Pavel Susicky — Sun, 14 Jul 2019 20:01:40 +0000

Hello everyone!

I want to ask you which GUI you are using on your machine with Linux or do you use CLI?

I'm asking because i'm not sure which one to choose. I have been using Git Extensions on Windows and i fell in love with it, because it's completely free and has awesome features and decent UI.

However support for Linux is quite poor and it's not working properly (or i just can't configure it properly)

So what are your favorites?

[UPDATE]:
If anyone is running on Linux and has hard times finding a fitting git GUI, i can recommend gitahead, which is open sourced and has all things i needed:

Graphical git history
Simple straightforward UI
Playing nice with custom OS themes

React reconciliation

Pavel Susicky — Tue, 13 Nov 2018 21:28:52 +0000

Introduction

React is an amazing library, which is used for creating user interfaces. When it comes to performance of react apps first thing that occur in my mind is Virtual DOM or maybe better a reconciliation process. This concept'll tell us how react updates the DOM.

Reconciliation

Reconciliation is the process through which React updates the DOM.

As a developer we are creating tree of components, react then takes this tree, process it and we get a Virtual DOM that it's kept in memory. When there is an update in our application (e.g. change in state or props) react will take the updated Virtual DOM and compares it with the old one Virtual DOM, then decides what and how should be changed. This procedure is repeated all over again.

Also synced versions between Virtual DOM and "real" DOM are served by libraries such as ReactDOM.

React needs to be very fast at comparing those trees, so it uses heuristic algorithm with complexity of O(n), so this says for 1000 nodes we need 1000 comparasions.

This approach is used instead of state of the art algorithms, which have complexity of O(n^3) => for 1000 nodes we need 1 bilion comparasions.

However there are two important assumptions for this method:

Two elements of different types will produce different trees. (known as pair-wise diff)

So with this rule, diffing from:

render() {
    return(
        <div>
            <h1>Hello World!</h1>
            <p>Welcome.</p>
        </div>
    );
}

To:

render() {
    return(
        <span>
            <h1>Hello World!</h1>
            <p>Welcome.</p>
        </span>
    );
}

Would destroy div element with all its children inside and made a new span with h1 and paragraph.

The developer can hint at which child elements may be stable across different renders with a key prop. (known as list-wise diff)

We have all come to this part when using react. This can be seen very often while iterating over an array and we return some kind of JSX as a respond.

renderFlags() {
    return ["Private", "Property"].map((flag) => {
        return <p key={flag}>{flag}</p>;
    });
}

The key attribute is very important for react to indicate which of the children in a tree were changed and which stayed unchanged. However there is an important point.

key attribute shouldn't be filled with index argument (or any inconsistent source), because it causes performance issues.

renderFlags() {
    // First render.
    ["Private", "Property"].map((flag, index) => {
        return <p key={index}>{flag}</p>;
    });

    // Second Render
    ["Public", "Private", "Property"].map((flag, index) => {
        return <p key={index}>{flag}</p>;
    });

    /*
        First render returns:
        <p key={0}>Private</p>
        <p key={1}>Property</p>

        Second render returns:
        <p key={0}>Public</p>
        <p key={1}>Private</p> ! Key changed from 0 to 1
        <p key={2}>Property</p> ! Key changed from 1 to 2
    */
}

So if we add an element in the beginning of an array it shifts the index for rest of the elements. So react will mutate all of these children.

I can't really explain this easily, but there is a nice explanation in official docs.

React fiber

With react 16 new reconciliation engine appeared. It improves performance of react apps and has many of wonderful features, but the concept is a little bit more complex, so if you want to learn about it on your own there is a nice post by Andrew Clark.

Sources

Another good sources to read:

Thinking out of the box

Pavel Susicky — Tue, 06 Nov 2018 21:51:36 +0000

We have all heard this sentence (or cliché?), but what does it mean?

According to old good friend wikipedia, it means to start thinking differently or unconventionally about some sort of problem, puzzle or whatever else. Simplified we should see it from other perspective.

Example!

I'll take a most common problem and i'm pretty sure you've already seen it.

The problem: "connect the dots by drawing four straight, continuous lines that pass through each of the nine dots, and never lifting the pencil from the paper."

Okay, i see no problem in this, let's do it!

Oh, that's wrong? Yeah, they are connected, but with FIVE straight lines and i need four.

Ok, so i'll try another way! However, i don't want you to scroll five years, so we know that there is no way how to solve it with this method or might be?

Solution!

So if we think about it out of box. We should end up with solution below.

And that's the solution. The interesting thing is that our brain automatically created an "imaginary square" that we cannot escape, but in the reality we CAN, because there is no rule telling us to stay in some kind of square.

Btw can you find a solution(s) for this puzzle with same rules, but you can use only 3 straight lines?

Other interesting puzzles

Towers of Hanoi
Very well known Rubik's Cube
Drawing

Conclusion

In my opinion this thing is connected with learning of anything, where you have plenty of ways how to solve the specific problem. It's very important to see other's work for our best improvements, everyone has a different style of thinking so we can collaborate why someone used this method and the other one used this one.

Thanks for reading

This is my first post and i hope you liked it just a little bit! If you can please leave a comment down below. I very appreciate any kind of critism especially for my writing skills and i know about my poor vocabulary.