Sergey Dubovik

1,737 Flips | 29 Magazines | 64 Likes | 21 Following | 6,199 Followers | @kotpes | Web developer. Helsinki, Finland

mdx-deck

Switch font color for different backgrounds with CSS

Ever get one of those, "I can do that with CSS!" moments while watching someone flex their JavaScript muscles? That’s exactly the feeling I got while …

Tutorials

Guide

# What is Splitting?<p>Splitting is a JavaScript microlibrary with a collection of small plugins designed to split (section off) an element in a variety …

Python Programming

Control your Text Selection with CSS User Select

It’s been awhile since my last CSS tidbit, so here it is 😄 You can use user-select to disable text selection (user-select: none). Or you can make it …

CSS

LinkPreview - Free URL Link Preview Service (RESTful API)

I guess we all know what happens on Facebook when you paste an URL into a post?<p>Facebook's server automatically grabs the title, description, and …

APIs

Let’s make a form that puts current location to use in a map!

I love shopping online. I can find what I need and get most things for a decent price. I am Nigerian currently working and studying in India, and two …

JavaScript

The definitive guide to JavaScript Dates

IntroductionWorking with dates can be <i>complicated</i>. No matter the technology, developers do feel the pain.JavaScript offers us a date handling …

JavaScript

Pass Multiple Children to a React Component with Slots

You need to create a reusable component. But the children prop won’t cut it. This component needs to be able to accept <i>multiple</i> children and place …

JavaScript

The package.json guide

If you work with JavaScript, or you’ve ever interacted with a JavaScript project, Node.js or a frontend project, you surely met the package.json …

JavaScript

Stunning hover effects with CSS variables

I recently got inspired by the playful hover animation on the Grover website. Moving your mouse over the subscribe-button reveals a colorful gradient …

CSS

How to Build a Video Call & Voice Chat App in WebRTC Using Javascript/node.js

Taking up a vital conversation is made simple by the persistent development of WebRTC that wholly magnifies the video/audio communication for …

JavaScript

Why Git Alias

I've been using git aliases for a while now. People have seen me using them, asked me, I explained, encouraged them to use it too and failed. …

Software Development

Understanding JavaScript Function Invocation and "this"

Over the years, I've seen a lot of confusion about JavaScript function invocation. In particular, a lot of people have complained that the semantics …

How Human Smarts Evolved

<i> [no-caption] Sara López Gilabert/SAPIENS</i> Suzana Herculano-Houzel spent most of 2003 perfecting a macabre recipe—a formula for brain soup. Sometimes …

Central Nervous System

JavaScript Algorithms and Data Structures

README.md<p>This repository contains JavaScript based examples of many popular algorithms and data structures.<p>Each algorithm and data structure has its …

Programming

The trick to viewport units on mobile

Viewport units have always been controversial and some of that is because of how mobile browsers have made things more complicated by having their …

Web Development

Dynamic resources using the Network Information API and service workers

My journey to and from work involves a small journey on a train. Without fail, there is this spot along the line where my network connection drops …

Web Development

Microsoft introduces project references in TypeScript 3.0

Microsoft released version 3.0 of its JavaScript plugin TypeScript today, which brings static types, type declarations and type annotations to …

JavaScript

🚀Introduction

README.md<p>🎉Ultra-simplified explanation to design patterns!🎉<p>A topic that can easily make anyone's mind wobble. Here I try to make them stick in to …

JavaScript

The Vanilla Javascript Component Pattern

I started delving into web components about a year ago. I really liked the idea of getting a reference to a custom element and then calling methods …

JavaScript

Beautiful and Accessible Drag and Drop with react-beautiful-dnd

Many Drag and Drop experiences are built for sorting lists of content vertically and horizontally. react-beautiful-dnd focuses on these use-cases to …

High Level

Testing JavaScript with Jest

• Introduction to Jest<br>• Installation<br>• Create the first Jest test<br>• Run Jest with VS Code<br>• Matchers<br>• Setup<br>• Teardown<br>• Group tests using describe()<br>• Testing asynchronous …

JavaScript Strict Mode

Strict Mode is an ES5 feature, and it’s a way to make JavaScript behave in a <b>better way</b>.And in a <b>different way</b>, as enabling Strict Mode changes the …

JavaScript

JavaScript Immediately-invoked Function Expressions (IIFE)

An <b>Immediately-invoked Function Expression</b> (IIFE for friends) is a way to execute functions immediately, as soon as they are created.IIFEs are very …

JavaScript

Tips for balancing web fonts & page load

Use WebPageTest for profiling<p>WebPageTest is the best free tool for profiling page load. It allows you to throttle connections and use real mobile …

Web Development

Does it mutate?

Does it mutate 😱<p>Array.prototype.concat<p>No mutation<p>Description<p>The concat() method is used to merge two or more arrays. This method does not change the …

5 hot new CSS features and how to use them

In this article we'll explore five new properties coming to CSS, take a look at what they do and how to put them to practical use in your projects. …

Web Development

invert-color

README.md<p>© 2018, Onur Yıldırım (@onury). MIT License.<p>Generates inverted (opposite) version of the given color.<p><i>This passes a long test suite of Adobe</i> …

JavaScript

ES6 — Set vs Array — What and when?

What is Set and what is Array?<p>Everyone who works with JS until now is familiar with <b>Array</b> (<i>don’t tell me you don’t</i>). But what exactly is <b>Array</b>?<p>Well, in …

JavaScript

How to make your JavaScript functions sleep

Sometimes you want your function to pause execution for a fixed amount of seconds or milliseconds.In a programming language like C or PHP, you’d call …

JavaScript