career
tutorials
productivity
resources
inspiration
Article image

Creating a React search bar and Content filtering

πŸ“… a year ago πŸ•’ 17 min read

Filtering systems are common for most modern web applications. They are especially useful if there are large amounts of data. They allow users to save time and easily access the information they are looking for. You wil...

Article image

How to Implement Redirects in Next.js

πŸ“… 2 years ago πŸ•’ 15 min read

Search engines and users alike do not want to find a page that does not exist or is incomplete. As a developer, you should avoid it as well because it could reduce the number of repeat visits to your site and affect how ...

Article image

Build a Google Docs clone with React and Automerge

πŸ“… 2 years ago πŸ•’ 19 min read

Collaborative online documents are common in various industries, allowing people with different expertise to create high-quality articles. It improves engagement, increases productivity, encourages problem-solving, and a...

Article image

How to Create a Search Bar in VueJS

πŸ“… 2 years ago πŸ•’ 8 min read

The internet is a vast ocean of information. Search bars help us to filter the information and save time during the process. Search bars are used in virtually every app or website from Google and Twitter to e-commerce s...

Article image

How I Built an Audio Player to Showcase my own Tracks

πŸ“… 2 years ago πŸ•’ 41 min read

A while ago I built my portfolio and I wrote a custom audio player to showcase my tracks. Since then quite a few people have been interested in its technical implementation. I've always replied I might write a full-lengt...

Article image

Understanding State Management in NextJS

πŸ“… 2 years ago πŸ•’ 14 min read

State management is the core of any modern web application since it determines what data is displayed on the screen during the app usage session while the user interacts with it. Think of ticking checkboxes on online su...

Article image

Using CSS Media Queries in React with Fresnel

πŸ“… 2 years ago πŸ•’ 11 min read

According to StatCounter data the device market of today is dominated by mobile, desktop, and tablets. In order to provide the best UX for the end-users, responsive design is a must-have in modern web development. In th...

Article image

Building Analytic Dashboards in Svelte

πŸ“… 2 years ago πŸ•’ 10 min read

Data has always been easier to perceive in a visual way. Visualization of the data allows us to see the tendencies over periods of time, allows us to compare different data as well makes it easier to see the totals, high...

Article image

Build a Single Page Svelte Application with Svelte Router

πŸ“… 2 years ago πŸ•’ 13 min read

The two main design patterns for web apps today are multi-page applications (MPA) and single-page applications (SPA). Each comes with significant differences in handling user requests. MPA reloads the whole page every t...

Article image

Improve Modal Management in React with nice-modal-react

πŸ“… 2 years ago πŸ•’ 17 min read

In the age of information, the use of modals can significantly improve the UX of websites and web applications. We see them everywhere from sites like Twitter to create a new tweet to complex management systems that run ...

Article image

Using Fetch Event Source for server-sent events in React

πŸ“… 2 years ago πŸ•’ 13 min read

The critical piece of any full-stack application is the connection between the frontend and backend. Generally, the communication is implemented by the client making the request to the server and the server sending back ...

Article image

Implementing localization in Svelte

πŸ“… 2 years ago πŸ•’ 12 min read

In this tutorial, we will implement the localization in Svelte application. The app will include routing, so you can divide the content across multiple pages of the app. We will first set up a new project, then create t...

Article image

Building a React code editor and syntax highlighter from scratch

πŸ“… 2 years ago πŸ•’ 12 min read

Long gone are the days when developers coded in Notepad and blogs displayed the code blocks using just HTML. Highlighted code is so much more pleasing to the eye and way easier to read. In this tutorial, we will create ...

Article image

Build a WYSIWYG text editor using Quill

πŸ“… 2 years ago πŸ•’ 7 min read

Whether writing comments, composing blog posts, or writing advanced articles, a well-configured and performant text editor has always been one of the cornerstones for productive work and a great user experience. What is...

Article image

How to Build a React Calculator from Scratch

πŸ“… 3 years ago πŸ•’ 19 min read

In this tutorial, we will be building a React Calculator app. You will learn how to make a wireframe, design a layout, create components, update states, and format the output. To get you inspired, here is the link to th...

Article image

8 Projects to Build to Master Your Front-End Skills

πŸ“… 3 years ago πŸ•’ 5 min read

I've always believed that the best way to learn is by doing. Recruiters prefer practical projects over theoretical knowledge, as well. Over the span of a year, I created 8 web app and game clones. I decided to share the...

Article image

6 Useful Tips from Visitors To Improve your Portfolio

πŸ“… 3 years ago πŸ•’ 5 min read

Some months ago I posted an article about how I built my first personal portfolio. The feedback was pretty awesome and I got some great ideas on how I could improve it. Thanks to users dyllandry, cdthomp1, sufyaan323, a...

Article image

Hooray! I Created my First Portfolio!

πŸ“… 3 years ago πŸ•’ 9 min read

For the last few months, I've been working on a personal portfolio. I've always believed that a separate portfolio is important for any dev since it connects you to future opportunities and it helps you to grow your netw...

Article image

65 Things I wish I knew when I started to Code

πŸ“… 3 years ago πŸ•’ 13 min read

No success story is the same, we all have had our ups and downs in the learning process and things we wish we knew when we started out. If you are a new, aspiring developer, these 65 things will prepare you for the long...

Article image

Create a Landing page in less than 100 lines (incl. CSS)

πŸ“… 3 years ago πŸ•’ 4 min read

Recently I bought a domain and decided to build a quick landing page to not leave it empty while I work on my portfolio. I thought some of you might find it useful, so I decided to make a tutorial on it. HTML Start by ...

Article image

73 Awesome NPM Packages for Productivity

πŸ“… 3 years ago πŸ•’ 11 min read

Nowadays in our busy schedules and tight deadlines, it's critical to choose tools that increase productivity. Here I have compiled a list of some of my favorite NPM packages. I've also sorted them into categories, so th...

Article image

How does it feel like to style things in 2020?

πŸ“… 4 years ago πŸ•’ 11 min read

This article is inspired by Jose Aguinaga. I am using the same format - a dialogue between two developers, one of which is giving different options to less experienced dev. While Jose's article is targeted more on JS to...

Article image

24 modern ES6 code snippets to solve practical JS problems

πŸ“… 4 years ago πŸ•’ 7 min read

Here I have hand-picked some of the most useful code snippets from 30 seconds of code. It's an awesome resource, go ahead and show it some love. In this article I tried to sort them based on their practical use, answeri...