What is code-splitting, and why should we use it?

Image for post
Image for post
Photo by amoon ra on Unsplash

Code-splitting is a process that takes bundling to the next level. Bundling is great when you have a small project, but as your project grows, so will your bundle. Eventually, your bundle will be so large that even your bundle loads slowly, thus defeating the whole purpose of bundling. With code-splitting, multiple bundles are created and loaded only when the user needs them, which means we can drastically reduce load times by not loading resources we don’t need.

In Action

Without code-splitting

Image for post
Image for post

In the example above, we load one resource that is 2.88MB, and in the example below, we load two resources, an initial parent bundle that is 2.83MB. Then when the user accesses another page, they request a sub-bundle that is 63KB. While this doesn’t seem like much; these numbers are from a very small app, consisting of a few images, that I created to demonstrate bundling for this article. You can imagine how much you could actually reduce your initial bundle size of a larger project by using code-splitting, thus reducing initial load times. …


An Introduction to json-server

Introduction

Oftentimes when developing a front-end project you need to retrieve data from a REST API and serve it on the front-end and when starting out, the idea of creating a full fledged API seems a bit much. Either you don’t know how to go about creating this API or your circumstances dictate that build the front-end out first. If this sounds like your situation, enter json-server.

What is json-server?

json-server is a package that allows a front-end dev to quickly spin up a REST API without manually setting up routes and schemas. It just works.

How To Integrate json-server.

As usual, we need to actually add the package to our project. …


Things that were changed or added in ES10

Image for post
Image for post
Photo by Adrià Tormo on Unsplash.

If the past release schedule of ECMAScript offers any clues about future releases, ES.Next is set to be released around June 2020. And with this upcoming release, I think it would be nice to brush up on some of the things that were changed or added in ES10.

Array.flat()

Array.flat() is an array method that, when applied, returns a new array with nested arrays flattened. The method accepts an option to specify the depth of arrays to be flattened. If an amount is not specified, it defaults to 1. If the amount specified is larger than the depth of the array, the array is flattened all the way. Array.flat() can be called consecutively as well. Here, we can see array.flat()


What Is a Ternary Operator?

The conditional (ternary) operator is the only JavaScript operator that takes three operands: a condition followed by a question mark (?), then an expression to execute if the condition is truthy followed by a colon (:), and finally the expression to execute if the condition is falsy. — MDN

Following the description, a ternary operator would be written like this:

condition ? ifTrue : ifFalse

What Is The Difference Between the Ternary Operator And An If Statement?

The difference between the two is If is a statement whereas a ternary operator is an expression; the latter returns a value while the former does not.

Where To Use a Ternary Operator?

A ternary operator should be used in a situation where an if statement would create unneeded clutter (single-line variable assignments and single-line conditionals are great examples) or where an if statement can’t be used, but if statement functionality is still needed. …


Standard vs. Google vs. Airbnb

Image for post
Image for post
Photo by Raphael Schaller on Unsplash

There are many articles on the internet that will teach you how to set up a specific ESLint style guide; this article will explain how to set up ESLint when working with React, as well as compare the Airbnb, Standard, and Google style guides.

Setting Up ESLint

Note: This guide is assuming you want to install ESLint locally (the recommended setup). If you want to set ESLint up globally, make sure to use yarn global.

As per the ESLint Setup Docs, a prerequisite dependency of ESLint is Node.js (8.10.0, ^10.13.0, or >=11.10.1) built with SSL support.

To install ESLint you can run:

yarn add eslint…


Better stylesheets

Image for post
Image for post
Photo by Eric Prouzet on Unsplash

What Are Sass Mixins?

Sass mixins are blocks of code we can reuse throughout our CSS without rewriting the blocks.

Write Your First Mixin

Writing a mixin is effortless. All you need to do is use the @mixin keyword followed by our desired mixin name, a set of curly brackets, and then whatever declarations we want to make. It is essentially like writing a CSS declaration block, just with the @mixin command before the declaration.

@mixin blue-list {
li {
color:blue;
}
}

Note: Hyphens and underscores are considered identical in naming a mixin. So blue-list and blue_list would be specifying the same mixin.

To use our mixin, we need to use the @include keyword. …


It’s not too late to build your first Hook

Image for post
Image for post
Photo by Joshua Sortino on Unsplash

What are Hooks?

Hooks are JavaScript functions that allow you to add a state to a functional component. They were added in React v16.8.

Why Should You Use Hooks?

In previous versions of React, state and functional components were mutually exclusive features. Either you had state or you had a functional component. Well, Hooks solves this issue. Hooks allow us to add state to a functional component.

Now that we understand the purpose of Hooks, let’s see how we actually use them.

Below is an example of a function that uses Hooks to render a piece of text giving the user the light status, along with a button that allows a user to turn the lights on and off. …


Preface:

These are the basic HTTP methods. Technically the Internet Engineering Task Force (IETF) standard RFC 7231, section 4: Request methods defines eight methods (GET, HEAD, POST, PUT, DELETE, CONNECT, OPTIONS, TRACE) and RFC 5789, section 2: Patch method defines a ninth (PATCH), but this article is just going to cover the bare basic six methods, no special stuff like configuring request headers. Righty-o.

Before we get into the details of each method, here is a table comparing them:

Image for post
Image for post

Important Concepts:

Body — The data we want sent to server.

Safe — A method is safe if it leads to a read-only operation. After a safe method is called data in question is not altered. …

About

Zachary Orona-Calvert

Technology has been my passion since I was young, it started when I first edited a configuration file to get more in game credits. zachcodes.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store