Setup Prettier For Typescript

One thing making developers life easier is automatic code formatters. Prettier is one of the most famous code formatter, for most part it does what you would expect it to do and most of the time it formats code in a better way you would yourself do.

Full article

Read More

Batching Client GraphQL Queries

Modern apps are chatty—they require a lot of data, and thus make a lot of requests to underlying services to fulfill those needs. Layering GraphQL over your services solves this issue, since it encapsulates multiple requests into a single operation, avoiding the cost of multiple round trips.

Full article

Read More

Finally Understand the JavaScript Reduce Method

Reduce is a method that can be difficult to understand especially with all the vague explanations that can be found on the web. There are a lot of benefits to understanding reduce as it is often used in state management (think Redux).

Full article

Read More

A Complete Pre-Commit Workflow

I really like making perfect commits, and I particularly hate appending or creating a new commit because of a guideline mistake. So I needed a tool that would bark at me when I was about to make a bad commit.

Full article

Read More

Zsh Plugins

Last week we looked into how we could install iTerm2 combined with Oh My Zsh to create the best possible terminal experience. Today we’ll have a look at the plugins that we can install to make our terminal even more powerful! Oh My Zsh comes with a set of plugins.

Full article

Read More

WebRTC chat with React.js

In this blog post I’m going to share how could be build WebRTC chat with React.js. Before we continue lets describe briefly what React.js and WebRTC are. The application from this tutorial is available at GitHub.

Full article

Read More

Replacing Component Lifecycles with the useEffect Hook, in React

React Hooks are revolutionizing the way we develop in React and solving some of our biggest concerns. The useEffect Hook allows us to replace repetitive component lifecycle code. Essentially, a Hook is a special function that allows you to “hook into” React features.

Full article

Read More

Using the useEffect hook

useEffect is meant to handle any sort of "side effect" (making a change in some external system, logging to the console, making an HTTP request, etc...) that is triggered by a change in your component's data or in reaction to the component rendering.

Full article

Read More

Getting Started with GraphQL

GraphQL was developed by Facebook in 2012 to power up its mobile apps. Since open-sourcing GraphQL specification in 2015, it gained a lot of popularity and is now used by many development teams, including giants like GitHub, Twitter or Airbnb.

Full article

Read More

How to set up JavaScript Test Coverage

Coveralls is used to show you the test coverage of your JavaScript application. Let’s see how it can be used for your JavaScript project which is already on GitHub and connected to your Travis CI due to the previous CI setup tutorial. First, sign up at Coveralls.io with your GitHub account.

Full article

Read More

Iterm2 With Oh My Zsh

Few years ago I wrote a post about ConEmu, a better shell experience for Windows. I have been using it over the past four years while working on Windows. Recently I completely moved to Mac and on unix system we have better shell experience in general.

Full article

Read More

How TypeScript Makes You a Better JavaScript Developer

What do Airbnb, Google, Lyft and Asana have in common? They’ve all migrated several codebases to TypeScript. Whether it is eating healthier, exercising, or sleeping more, our humans love self-improvement. The same applies to our careers.

Full article

Read More

A Complete Guide to useEffect

You wrote a few components with Hooks. Maybe even a small app. You’re mostly satisfied. You’re comfortable with the API and picked up a few tricks along the way. You even made some custom Hooks to extract repetitive logic (300 lines gone!) and showed it off to your colleagues.

Full article

Read More

Build your own React

We are going to rewrite React from scratch. Step by step. Following the architecture from the real React code but without all the optimizations and non-essential features. If you’ve read any of my previous “build your own React” posts, the difference is that this post is based on React 16.

Full article

Read More

The Front-End Tooling Survey 2019 - Results

It's been a little while coming, but the results from the 2019 Front-End Tooling Survey are now here! This year, 3,005 developers answered 27 questions covering a wide range of front-end tools and methodologies.

Full article

Read More

Why You Can't Return Parallel JSX Elements. The Hack!

JavaScript as a language doesn’t support multiple return values. In writing React code, your JSX (JavaScript XML) eventually gets transpiled into vanilla JavaScript.

Full article

Read More

Test React apps with React Testing Library

Building web applications is not an easy task as of today. To do so, you’re probably using something like React, Vue or Angular. Your app is faster, the code is both more maintainable and readable. But that’s not enough. The more your codebase grows, the more complex and buggy it is.

Full article

Read More

Mastering Angular 8: five things that are good to know to save your time.

Angular has some edge cases that can sometimes waste your time if you're not familiar with the details. I've been working with Angular for the last 3 years and here are some interesting things that I've learned that will save your time. We're going to talk about: Let's dig in.

Full article

Read More

Writing Your Own Changelog Generator with Git

Changelogs are great. They give us a record of what changes in our project were made at a particular time. If you’re writing a library, it also gives your users awareness of what changed and gives the impression that your library is well-maintained and can be relied on.

Full article

Read More

Top 5 React Chart Libraries for 2020

Charts are like wheelchairs for our feeble minds. If you want to make a data-informed decision, you better get the right help ? “There is magic in graphs. The profile of a curve reveals in a flash a whole situation — the life history of an epidemic, a panic, or an era of prosperity.

Full article

Read More

What’s New in JavaScript

Ever since ES2015 released, which was a great leap forward in itself, JavaScript has been improving at a fast pace. Every year since, there have been new features added to the JavaScript specification. Features have been consistently added, like new syntax and new methods for built in JavaScript.

Full article

Read More

Functional CSS: Meet Tailwind CSS

Functional CSS (sometimes referred to as atomic CSS) is the practice of using small, immutable, and explicitly named utility classes to construct components.

Full article

Read More

8 Useful Tricks for React Apps You Should Know

React has gone through many shifts in stages that never fail to amaze its fans. At first, we had mixins to create and manage our interface, then came the concept of class components, and now React Hooks which has changed the way we build our apps in React.

Full article

Read More

Global Cached State in React using Hooks, Context, and Local Storage

Hooks have been around for a while now, and I’m sure everyone has started taking advantage of them. I, myself, have definitely been doing so (maybe too much because I refuse to write any class components anymore). As my application grew, I ran into the need for a global context.

Full article

Read More

10 Interesting JavaScript and CSS Libraries for November 2019

Our mission at Tutorialzine is to keep you up to date with the latest and coolest trends in web development. That’s why every month we release a handpicked collection of some of the best resources that we’ve stumbled upon and deemed worthy of your attention.

Full article

Read More

Optimizing images for the web - an in-depth guide

Unoptimized (non-minified) images are one of the main causes of poor website performance, mainly on the initial (first) load. Depending on the resolution and image quality, you might end up with images that take up more than 70% of your total website size.

Full article

Read More

Reasons to learn Redux as a JavaScript Developer

Redux has been with us for a while now. What has gone public 2015 -- demonstrated by Dan Abramov in his infamous talk about time travel -- suddenly turned into many JavaScript developer's day to day business.

Full article

Read More

A Quick Start Guide to Query Strings with React Router

I’ve been working on a project where we wanted to implement a set of filters for a list of records on one page of our React web app and store the selected filters as state in the URL. We chose this approach so we could link directly to the page with specific filters selected.

Full article

Read More

Good Testing Practices with ?Angular Testing Library

The Angular Testing Library provides utility functions to interact with Angular components, in the same way as a user would.

Full article

Read More

Picking Your Tech Field as a Newbie

Experience is the best teacher, but no one said it has to be your experience As a newbie just starting in tech, one of the most challenging decisions you have to make is choosing a tech stack to learn, you'll probably be thinking of choosing web, and you still have to decide if you'll be a Frontend

Full article

Read More

3 Ways to Build Your Own React Component Library

Component libraries are great resources when it comes to developing React-based applications. They allow you to logically group your components in a way that lets others in your team explore them and pick & choose the ones they need.

Full article

Read More

Experimenting with the new React Concurrent mode

I’ve been playing around with React’s new Concurrent Mode and it is amazing. A little mind-bendy, a dash mad, and a whole lot of wonderful. Your app might get faster even if you don’t change anything. ?

Full article

Read More

Upcoming new JavaScript features You should know if you use JavaScript everyday

Since ECMAScript2015 (also called ES6) was released, JavaScript has changed and improved widely. This is excellent news for all of the JavaScript developers. Furthermore, a new ECMAScript version has released every year.

Full article

Read More

3 Steps to Beat Imposter Syndrome

Eventually, I recognized that worry for what it was: impostor syndrome. There are lots of ways our feelings of inadequacy can surface. We might say to ourselves, “I’m not the right person for this” or “I just know I’m going to get called out.

Full article

Read More

20 VS Code Shortcuts for Faster Coding

This article hopes to help people using VS Code to code even faster. Not everyone has time to go through every tip and trick to find the ones that help them code faster — there’s just too many.

Full article

Read More

React Hook Form vs. Formik: A technical and performance comparison

As JavaScript developers, we are all aware of the complexities and intricacies that we may encounter when working with React and forms.

Full article

Read More

A List of Fun Things You Can Build as a Developer

One becomes a beginner after 1,000 days of training. One becomes a master after 10,000 days of practice. This is a quote from Mas Oyama that sums things up pretty well. The secret to being a great developer is by putting in the effort.

Full article

Read More

9 Projects You Can Do to Become a Front-End Master in 2020

Whether you’re new to programming or already an experienced developer, in this industry, learning new concepts and languages/frameworks ismandatory to keep up with the rapid changes.

Full article

Read More

When to useLayoutEffect Instead of useEffect

There are two React hooks, useEffect and useLayoutEffect, that appear to work pretty much the same. The way you call them even looks the same.

Full article

Read More

See Light Commands in Action

By shining the laser through the window at microphones inside smart speakers, tablets, or phones, a far away attacker can remotely send inaudible and potentially invisible commands which are then acted upon by Alexa, Portal, Google assistant or Siri.

Full article

Read More

How to get started with Cypress

If you’ve been developing frontend applications recently, you’ve undoubtedly heard of Cypress.io. Cypress is a powerful testing framework that makes writing tests easy and really fun. I’ve used Cypress on a number of projects, and had a great experience.

Full article

Read More

How to Reuse Logic with React Hooks

This article was originally posted in the ButterCMS blog. React has always been great for reusing and composing components. That means you can write a piece of UI and simply reuse it later on. Moreover, your component can have some embedded logic that you can reuse too.

Full article

Read More

Micro Frontends

We'll start with the container, as it's the entry point for our customers. Let's see what we can learn about it from its package.json: To see how we select and display a micro frontend, let's look at App.js.

Full article

Read More

Use Your Money to Buy Back Time

Money, to me, always meant having more pleasure and being able to buy stuff. Having money meant less stress and the gift of options. Money could buy me a relaxing holiday, or a better car, or a fancier house. These money fantasies were nice until I actually got money.

Full article

Read More

Why Is React Concurrent Mode Exciting?

Last week the React team released an experimental version of Concurrent Mode to the public. It's been in development for over a year and the React community has been very excited about its release. What is Concurrent Mode? The documentation pages has a nice and concise description:

Full article

Read More

You don’t need CSS to style your webpage!

Are you that someone who gets frustrated whenever you apply those styles you always wanted on your webpage but when you check out on the browser, it just doesn’t work! Ah, I had those moments (and still I see others struggling with this), I’ve been that “someone” for quite long and the only

Full article

Read More

How do I deploy my code to Heroku using GitLab CI/CD?

In this article, I'd like to share how I deploy my code to Heroku using GitLab CI/CD. For this, I'll create a simple NodeJS application. Here we'll learn the environments initial concepts: Development, Stage, and Production.

Full article

Read More

Create a Chrome Extension Using React and TypeScript

In this article, we are going to create a Chrome extension with TypeScript. We will be using React for the popup. If you are used to creating Chrome extensions, you don’t have to read this, you can simply get the code.

Full article

Read More

TypeScript and Babel, a match made in heaven

TypeScript is awesome. I ? it! It brings powerful type checking to your codebase that helps you find bugs more quickly and form and adhere to contracts more easily. Not to mention the amazing editor…

Full article

Read More

Implementing private routes with React Router and Hooks

Recently I had to configure as private some routes of a React app (only accesible for authenticated users). This post describes the basic implementation of the app that covers:

Full article

Read More