Highly personalized list of interesting links, articles, tutorials etc.
Google Fonts Async Snippet
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.
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.
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.
Animated icons in Lottie Framework for immediate implementation to your apps or websites.
We searched the web for the most useful web development checklists. They cover everything from front-end and performance to SEO and marketing.
A collection of $0 Design Tools to Help You Create Your Next Project.
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.
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.
After several years of using Redux for most of our projects we decided to try useReducer/useContext approach instead. Here is what we learned.
Ultimate and super simple Redux alternative for your App.
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.
Application usability is enhanced when the UI guides and supports users through the workflow.
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.
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.
A regular expression, or 'regex', is used to match parts of a string. Below is my cheat sheet for creating regular expressions.
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?
Welcome to the future of the web — where push messages can help you achieve better engagement for your site or web app.
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.
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.
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.
This collection is a way of bookmarking some techniques that will be useful in practice in everyday dev.
Looking for tools and resources to make your life as a designer easier? We got you covered.
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.
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.
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.
A handy guide with additional resources for publishing your NPM module.
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.
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.
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.
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
These patterns improve readability, code clarity, and push your code towards composition and reusability.
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.
Here are examples of everything new in ECMAScript 2016, 2017, and 2018
Dealing With Side-Effects In React
There are basically a few ways to implement a custom scrollbar. In this tutorial we will be using CSS3, which is the most straightforward way.