Personal Bookmarks

Highly personalized list of interesting links, articles, tutorials etc.

Google Fonts Async Snippet

Best design 🎨 resources websites every developer 💻 should bookmark

Here you'll find the best websites and resources with modern UI components in different formats such as PSD, Sketch, Figma, Icons, and Illustrations, etc.

10 lesser-known Web APIs you may want to use

In this article, I am going to talk about 10 more web APIs that are not so popular. Lesser popular doesn't mean, they are not useful. You can use them in various use-cases of your project.

8 ways to deploy a React app for free

In this tutorial, we’ll demonstrate how to deploy a React application in eight different ways. All the services described in this post are completely free with no hidden credit card requirements.

A micro-animations library

Animated icons in Lottie Framework for immediate implementation to your apps or websites.

30 Web Development Checklists Every Team Should Keep Handy

We searched the web for the most useful web development checklists. They cover everything from front-end and performance to SEO and marketing.

$0 Design Tools

A collection of $0 Design Tools to Help You Create Your Next Project.

A Practical Guide to Symbols in JavaScript

JavaScript introduced symbols in ES6 as a way to prevent property name collisions. As an added bonus, symbols also provide a way to simulate private properties in 2015-2019 JavaScript.

My Opinionated git Cheat Sheet

So, in an effort to help me grow my git mental model, I wanted to put together an opinionated git cheat sheet - a place in which I can codify my understanding of git commands so that I could refer to them when my brain inevitably fails me.

6 tips for better React performance

In this article I will try and list out a few easy ways to achieve better performance in your React app through simple development hacks.

From Redux to Hooks: A Case Study

After several years of using Redux for most of our projects we decided to try useReducer/useContext approach instead. Here is what we learned.

State Management with React Hooks and Context API in 10 lines of code!

Ultimate and super simple Redux alternative for your App.

A complete guide to threads in Node.js

Many people wonder how a single-threaded Node.js can compete with multithreaded back ends. As such, it may seem counterintuitive that so many huge companies pick Node as their back end, given its supposed single-threaded nature.

Top 10 Application-Design Mistakes

Application usability is enhanced when the UI guides and supports users through the workflow.

JavaScript Loading Priorities in Chrome

How browsers schedule and execute scripts can impact the performance of web pages. While techniques like <script defer>, (and others) influence script loading, knowing how browsers interpret them can also be helpful.

HTML slides without frameworks, just CSS

I came across an implementation by Ondřej Žára for pure CSS slides and dug into his codebase to see what I could use for my own watered-down HTML slides.

Regex Cheat Sheet

A regular expression, or 'regex', is used to match parts of a string. Below is my cheat sheet for creating regular expressions.

The (new) React lifecycle methods in plain, approachable language

What are lifecycle methods? How do the new React16+ lifecycle methods fit in? How can you intuitively understand what they are and why they are useful?

Web Push Notifications

Welcome to the future of the web — where push messages can help you achieve better engagement for your site or web app.

The ultimate guide to proper use of animation in UX

Well, in this article I won’t write anything new, I just want to collect all the main principles & rules in one place, so that other designers who want to start animating interfaces don’t have to search for additional information.

A Comprehensive Guide to Font Loading Strategies

This guide is not intended for use with font icons, which have different loading priorities and use cases. Also, SVG is probably a better long term choice.

JavaScript Start-up Performance

Once the browser has downloaded our page’s scripts it then has to parse, interpret & run them. In this post, we’ll dive into this phase for JavaScript, why it might be slowing down your app’s start-up & how you can fix it.

What algorithms should I know to become a good programmer?

A friendly reminder on what algorithms should I know to one day be part of the #GoodProgrammer group. Come back to the list every once and a while to continue the learning process.

Useful Pens for Everyday Front End Development

This collection is a way of bookmarking some techniques that will be useful in practice in everyday dev.

101 of the Best Resources for Web Designers

Looking for tools and resources to make your life as a designer easier? We got you covered.

Fluid Responsive Typography With CSS Poly Fluid Sizing

Fluid layouts have been a normal part of front-end development for years. The idea of fluid typography, however, is relatively new and has yet to be fully explored. Up until now, most developers’ idea of fluid typography is simply using Viewport units maybe with some minimum and maximum sizes.

67 useful tools, libraries and resources for saving your time as a web developer

In this article I won’t be talking about big front end frameworks such as React, Angular, Vue etc… nor already popular code editors like Atom, VS Code, Sublime… I simply want to share a list of tools I find useful for speeding up a developer’s workflow.

Deploying ES2015+ Code in Production Today

However, despite the fact that all modern browsers can run ES2015+ code and natively support the features I just mentioned, most developers still transpile their code to ES5 and bundle it with polyfills to accommodate the small percentage of users still on older browsers.

How to Create and Publish Your First Node.js Module

A handy guide with additional resources for publishing your NPM module.

Little Things I Like to Do with Git

I was chatting with Tim just the other day about how much I love Git—it’s such a powerful, elegant tool and it’s one I use the most often. I thought I would note down some useful little Git snippets that I use the most frequently.

CSS Custom Properties and Theming

There are a few esoteric things preprocessor variables can do that native variables cannot, but for the most part, native variables can do the same things. But, they are more powerful because of how they are live-interpolated.

How To Secure Your Web App With HTTP Headers

HTTP response headers can be leveraged to tighten up the security of web apps, typically just by adding a few lines of code. In this article, we’ll show how web developers can use HTTP headers to build secure apps.

How we made our product more personalized with CSS Variables and React

The idea was simple: a form where you tweak your dashboard with new background colors, widget colors, font-sizes etc. and we would display a live preview of what your dashboard will look like. #CSSvariables

Keeping aspect-ratio with HTML and no padding tricks

For a long time we’ve been told the only way to have a DOM element keep a fixed aspect ratio without Javascript is with the % padding trick.

Evolving Patterns in React

These patterns improve readability, code clarity, and push your code towards composition and reusability.

Optimizing Web Fonts for Performance: the State of the Art

In this article, I’ll go through what’s not so good about the way web fonts are commonly used and loaded, as well as point you to well-tested workarounds and future standards-based solutions.

ECMAScript 2016, 2017, and 2018