Forem: ABailey92

Recoil: a modern state management library.

ABailey92 — Mon, 11 Jan 2021 13:47:33 +0000

When it comes to state management libraries, React has its fair share of them. With new ones popping up from time to time, how is a programmer to know what's best? Last year Facebook introduced a state management library called, you guessed it, Recoil. In this article you are going to discover what Recoil is and why you should use it in your next project.

Disclaimer: As of now Recoil is still considered experimental so use at your own risk

I think it's important to start with how Recoil stacks up against the current most popular state management libraries Redux and Context API.

Why I prefer Recoil over Redux

For one, Recoil is made specifically for React, Redux is not a React library and the store is something that is handled externally. This means that it doesn't have access to React's inner scheduler. Recoil uses react state under the hood, so when React releases concurrent mode Recoil will not be far behind. Also complexity comes into play. To set up even a basic store comes with alot of boilerplate and code. If you want to include async data or caching computed values those are not apart of the base library and will require even more libraries. The creator of Redux recently apologized on Twitter for making Redux so complicated. If that isn't a caution notice. I don't know what it is.

Okay so what's wrong with Context API?

Though not complex, and it is native to React it still has its limitations. When used for recurring or complex updates it isn't very efficient. Sebastian Markbage, an engineer for Facebook, says

Context is ready to be used for low frequency unlikely updates. It's also good to use for static values and then propagate updates through subscriptions. It's not ready to be used as a replacement for all flux-like-state propagation.
In layman's terms: Context API doesn't let you subscribe to a subset of the data it contains.

Alright enough about the competition, what makes Recoil so great?

To start, Recoil is very easy to learn. Its very simple and feels natural to people who are already accustomed to using React hooks. Getting started is a matter of wrapping your app with RecoilRoot, declaring your data with a unit called atom and replacing useState with Recoils useRecoilState. Recoil also allows you to subscribe to the exact piece of data your component consumes, and has built in methods to handle async data flow.

Recoil- The Basics

Atom - atom is a piece of state in Recoil that any component can subscribe to. Changing the value of an atom will result in a re-render from all components subscribed to it. To create an atom we need to provide a key, which should be unique across the application and default value. The default value can be static or a function. This is how it will look.

export const nameState = atom({
key: 'nameState',
default: 'Aiesha Brown'
)}

useRecoilState - a hook that lets you subscribe to an atoms value and update it

useRecoilValue - returns just the value of the atom
useSetRecoilState - returns just the setter function

import {nameState} from './myFile'
const NameInput = () =>{
const [name, setName] = useRecoilState(nameState)
const name = useRecoilValue(nameState)
const setName = useSetRecoilState(nameState)
}

selector - a selector represents a piece of derived state. It lets you build dynamic data that depends on other atoms.

In conclusion

Having a state management library that is easy to learn and is intuitive is important. If you have liked what you've read so far I encourage you to use it in your next project. Stay tuned just to see how well Recoil scales in the future.

Taking your project to the Next level with Next.js

ABailey92 — Sun, 03 Jan 2021 01:37:57 +0000

In this article I am going to explain what Next.js is and why you should use. It is important to note that you should have some familiarity with React before diving into any of its frameworks, including Next.js. If you're already equipped with React knowledge then get ready for an amazing ride

First things first, what is Next.js

Simply put, Next.js is a React framework for developing Single page applications, or SPAs. Next.js is inspired by PHP and benefits from a great system of javascript modules that allow us to perform individual tests for each component as well as download thousands of components or modules from npm. The benefits are plentiful, but the main two are speed and performance. We'll dive into the specifics now.

1. Server side rendering

Components that make up the UI are initially rendered on the server side. This makes page loading times appear much faster to the user.

2. Automatic code splitting

Next.js does code splitting automatically, so each page only loads what’s necessary for that page. That means when the homepage is rendered, the code for other pages is not served initially.

This ensures that the homepage loads quickly even if you have hundreds of pages.

Only loading the code for the page you request also means that pages become isolated. If a certain page throws an error, the rest of the application would still work.

Furthermore, in a production build of Next.js, whenever Link components appear in the browser’s viewport, Next.js automatically prefetches the code for the linked page in the background. By the time you click the link, the code for the destination page will already be loaded in the background, and the page transition will be near-instant!

Okay sounds good, how do I include this in my next project

create a next.js app This step in pretty straight forward. Next.js only requires that you have node installed, after that it is as simple as typing npx create create-next-app yourappnamehere. If you'd like to use a template behind it simply put --use-npm --example "link here". all that's left do after that is to change your scripts inside of your packagae.json file to look something like this

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

Run your development server
From there you will cd into your app instances and run the npm run dev command. This will start your Next.js app's development server.
After that you should see this
Next you will need to create new page using the integrated file system routing. You will use the Link components to enable client-side navigation between pages. You will also be using that built in support for code splitting and prefetching that I mentioned earlier. If you are familiar with react router it looks similiar to that

import Link from 'next/link'

export default function FirstPost() {
  return (
    <>
      <h1>First Post</h1>
      <h2>
        <Link href="/">
          <a>Back to home</a>
        </Link>
      </h2>
    </>
  )
}

If you'd like the full documentation on Next.js routing you can find that here.

In conclusion

Next.js automatically optimizes your application for the best performance by code splitting, client-side navigation, and prefetching in production.
You can create routes as files under pages and use the built in Link components. No outside routing libraries required.

your turn to try it!

The Great Gatsby.js

ABailey92 — Sun, 20 Dec 2020 18:47:45 +0000

When you first arrive to Gatby.js's website you'll be greeted with the image above. You may be thinking: "Awfully bold statement for a react framework that is only 5 years old." In this article we'll discover how Gatsby.js does, indeed, live up to the hype.

First thing first

What is Gatsby.js?

According to their website Gatsby.js is

a blazingly fast modern site generator for React.

Put more simply, Gatsby is a static website generator.

Well wait, what does that mean?

All that means is that Gatsby will produce static HTML files that we load up on to a server. Gatsby take information and preconfigures it ahead of time and serves that up.

So why should you use Gatsby?

Three reasons: speed, security, and improved developer experience.

Let's dive a little bit deeper into each of these reasons shall we?

1. Speed

Gatby.js is amazingly fast, because it it generating a static site, and creating Html files for each page your website has, the speed will be much faster than any other framework you can use. Unlike other other technologies that produce static websites react will not require a load of HTML files. According to their website

“Gatsby generates your site’s HTML pages, but also creates a JavaScript runtime that takes over in the browser once the initial HTML has loaded” — gatsbyjs.org

That means every page is a React app. Nice!

2. Security

Since there isn't a live database to access, there isn't any user data that is going to be stored on the server with a Gatsby site. All this means is that even if anyone were able to have the server they would still only get access to HTML files and will be able to do far less damage than they could if they were getting access to a framework that supplied user data or sensitive information. In short you'll have pretty substantial security gains if you decide to use Gatsby for your project.

3. Improved developer experience

Gatsby has a couple of things that help improve developer experience.

so here is, you guessed it, another list!

The Plugins.

Gatsby has some amazingly useful plugins that are available at the official website. According to their website there are over 2000 plugins available. Some of the most used are:
1. gatsby-plugin-manifest: this makes your site an installable and also a PWA (progressive web app).
2. gatsby-plugin-offline: this will allow your site to run offline
3. gatsby-plugin-google-analytics: allows you to use google analytics in your website
4. gatsby-remark-embed-youtube: allows you to to embed YouTube videos in your website.

For a complete list visit Gatsby Plugins.

Starters and templates

There are plenty of Gatsby starter repos and templates that are simple as cloning and changing the content to your specifications. This makes developing websites super quick and efficient. Gatsby also has excellent documentation and even tutorials based on your skill level. If you're interested in checking that out you can visit Gatsby Tutorial to get started.

Have I convinced you to try GatsbyJs yet?

If I have, here's how to include it in your next project.

(optional) Use the Gatsby CLI tool to clone a starter repo

gatsby new [site_directory] [url_of_starter_git_repo]

Open gatsby-config.js and configure it to your liking

module.exports = {
      siteMetadata: {
        title: [your title here]
      },
      plugins: [
        ...
        {
          resolve: 'gatsby-source-dev',
          options: {
            username: [your username here]
          },
        },
        ...
      ],
    }

npm install and npm start and that's it!

It's your turn to try it!

If you like what you've read try it out in your next project.

All about Vue.js

ABailey92 — Mon, 14 Dec 2020 14:13:38 +0000

If you've been studying JavaScript, chances are you've come across a few frameworks. Most people are familiar with Angular and React, in this blog I will tell you about the pros and cons of Vue.js

Okay, first thing first: What is Vue.js?

According to vuejs.org

Vue.js is a progressive framework for JavaScript used to build web interfaces and single page applications

Vue was created by Evan You and uses "high decoupling", which allows developers to progressively create user interfaces. Vue is often called the "combination of React and Angular" because it uses concepts such as directives and components to control and show UIs. Once small advantage that Vue has over React is that Vue has the ability to control HTML that has already been rendered by the server. Anyway, I promised pros and cons so here are pros and cons.

The Pros

In 2019 Vue became the second most loved framework. The main reasons for this are:

Size, because it is so small Vue is very fast to download and also positively impact your SEO and UX.
Flexibility, Vue is flexible and scalable. This means that it can be used for a huge SPA as well as used for a smaller component that will be integrated using a different technology such as React or Angular. Since the backend is build with JavaScript it can be added to existing applications with no problem.
Useful conventions, Vue helps developers avoid writing a lot of boilerplate code by enforcing effort-saving conventions. These include native support for things like animations, state management, and composing components. It's important to note that even things like classnames are essentially built into Vue.
Easy to learn, most developers say that the learning curve for Vue is not very steep, and for most developers it will be the easiest framework to learn. Vue has excellent documentation to fit every developer's needs.

The Cons

Like all good things in life, there are some cons to consider, especially some to consider if, like myself, you learned React first.

Templates, The biggest feature of Vue.js is by the template syntax to write interfaces. A lot of developers state that the template syntax adds a layer of abstraction between what is written and what is displayed in the browser. Having to keep in mind that Vue.js templates are not simply JavaScript does add a layer of complexity. This is an example of templating

<div v-if="a && b">
<div :class="{a: true, b:false}"></div>
<button @click="trigger('hello')">hello</button>

Custom Events, In Vue children must use events as a way to communicate to parent components. If you are used to react it's a lot different then just passing props down from the parent component to children.

Events in Vue look a little this

<template>
  <div id="app">
    <button v-on:click="greet('hi')">Greet hi</button>
    <button v-on:click="greet('what')">Ask what</button>
  </div>
</template>

<script>

export default {
  name: 'app',

  methods: {
    greet(value) {
      alert(value)
    }
  }
}
</script>

Smaller community, Because Vue is still relatively new and still evolving it's not as popular as React or angular. Since it is evolving so fast many tutorials you find online may be outdated and if you find yourself stuck on a problem it may take quite some time to find a solution. For smaller projects this isn't as much of an issue, but this problem rears its ugly head when working on larger projects.

So should I try it?

Vue is pretty popular when it comes to creating beautiful SPA's. There are plenty of other frameworks that can accomplish this as well. I would definitely suggest using Vue for smaller scale projects and since you can probably learn it in a weekend I would suggest that you look into it after reading this blog.

Check it out here Vue.js.

More ES6 magic: Async/Await

ABailey92 — Mon, 09 Nov 2020 12:22:24 +0000

If you thought promises were the best thing since sliced bread after dealing with callback hell, wait until you discover the JS magic of async and await. It's important to note that you must have a general understanding of how promises work in order to truly understand how to use async and await, since they are just syntactical sugar. So I'll start with giving a brief overview
of promises to get you up to speed if you've never heard of them, or give you a refresher if you already know what they are.

Promises Explained

In the words of MDN

A promise is an object which can be returned synchronously from an asynchronous function.

A Promise constructor takes in a function that takes in two parameters: Reject and Resolve. It will be in one of 3 possible states:

Resolved: A Promise was successful in retrieving data or getting a value
Rejected: A Promise could not retrieve data due to an error or issue
Pending: not yet Resolved or rejected

A .then is then chained to run a function upon success and a .catch is added to provide error handling.

fetch(url)
  .then(process)
  .then(save)
  .catch(handleErrors)

A promise is settled if it’s not pending (it has been resolved or rejected).

How does it get any better than that?

Two words: Async & Await. Well, that's actually three, but I digress.
Let's start with async. The async keyword can be placed before a function like async function test() or const test = async() =>{}. Using the word async before a function means that that function will return a promise. The values returned from that function are automatically wrapped in a resolved promise.
Now onto await! Await can only be used inside of an async function. You can use async without await but you cannot use await without async. Got it? Good. Await tells javascript to wait, to stop what its doing until the promise returned from the async function is rejected or resolved. Let's take a look at difference.

const noAwait = async() =>{
   const {data} = axios.get(url)
console.log(data) // undefined
}

This results in undefined being logged to the console. But why? This is because getting requests take time. As you know javascript is synchronus, so it will continue to move along before that promise is resolved and data is provided a value.

const withAwait = async()=>{
  const {data} = await axios.get(url)
console.log(data) // json object
}

This results in json being logged to the console. This is because the await keyword has been added and tells javascript to wait for the promise to be resolved before it moves on.

You may be thinking: how does error handling work with this syntax? It's very common to use a try and catch block for error handling with async and await.

async function f() {

  try {
    let {data} = await axios('http://no-such-url');
  } catch(err) {
    alert(err); // TypeError: failed to fetch
  }
}

f();

Since async function do return promises you can also just chain a .catch and that will handle a rejected promise as well.

So rather than using promise chaining or the dreaded callback hell nesting, try using async & and await. Together they provide a great framework to write asynchronus code that is easy to read and write.

All about REST

ABailey92 — Sun, 25 Oct 2020 14:04:29 +0000

When you are browsing a web page, have you ever wondered: where does this page get all of this information from? The short answer is: a server. In this article we are going to explore what an API is, more specifically a RESTful API, and dive a bit deeper to see how exactly a client communicates with a server to get information.

Okay, first thing first: the lingo

Knowing the following terms will help you understand
exactly what REST is and what it means to make an API RESTful.

Client
Server
API

So what's a client? A server?

A client is the browser that makes the request for data.
This is typically done through a HTTP request:
If you've never seen a HTTP request here is an example

app.get((req, res){})

The server is, as Wikipedia puts it:

a piece of computer hardware or software (computer program) that provides functionality for other programs or devices, called "clients"

In short: servers provide the information that the client requests so as long as the information is something the server can provide.

A real world example of how the client - server relationship works is a night out at a restaurant. You, as a paying customer, are the client. You read the menu, and request the food you may like. Your waiter or waitress is the server. They listen to your request and check to see if it is something they can fulfill. If you ask for pizza at a burger place, you've made a bad request, and it won't get fulfilled.

On to APIs!

The acronym API stands for Application Programming Interfaces. Now what exactly does that mean? And why are APIs useful?
According to MDN an API is

a set of commands, functions, protocols, and objects that programmers can use to create software or interact with an external system.

Have you ever used a weather app? More than likely they are using a weather API to update the weather conditions on their app dynamically.

Have you used tinder? This is another great example of API usage as they use a Facebook API to show shared friends and shared interests among potential matches.

If you've ever used JQuery, you guessed it, you've used an API. JQuery gives us access to a lot of functions and objects that helps us create software. If you look back at MDN's definition of what an API is, this fits perfectly!

Finally! Lets talk about REST

REST stands for REpresentational State Transfer
REST is essentially just an architectural style for designing APIs. Roy fielding began REST as apart of his PHD dissertation where he developed a set of rules that web developers could follow when building their APIs. He brought about the idea that all websites should use the same structure for building their APIs. This made it much easier for clients and servers to work together and use different APIs to work quickly, efficiently, and easily.

so what exactly makes an API RESTful?

There are a few rules that an API has to follow in order to be considered RESTful. The two main rules are:

Must use HTTP request verbs. Those verbs include:

GET - gets the request from the server

POST - posts the request to the server

PUT & PATCH - updates information on the database

DELETE - deletes a specific piece of information in the database

Must use a specific pattern of routes/endpoint URLS

An API must follow the following routing patterns to be considered RESTful

Looking for a challenge?

After reading this article see if you can build your own RESTful API.

Good Luck!

Intro to ES6 Classes

ABailey92 — Sun, 18 Oct 2020 12:39:26 +0000

One of my favorite new features from ES6 is the new way of implementing classes. To understand the new way to instantiate classes you must first understand how constructors and prototypes work. This is because ES6 classes are syntactical sugar. You may be thinking: what exactly is syntactical sugar?

Well, Techopedia defines syntactical sugar as:

"a term for syntax changes in computer programming which make it easier for humans to code."

In other words, it makes our code easier to read and easier to understand.

Sounds good to me, sign me up for some candygrammar!

Prototypes and constructors explained

So what's a prototype? Simply put, a prototype is an object that allows other objects to use shared properties. Most objects are instances of Object. That may sound confusing, so here is an example:

const student = {
name: 'A name',
lastName: 'A last name',
coder: true
}

console.log(student.valueOf()) // {name: 'A name', lastName: 'A last name', coder: true}

Wait, how did we call a method of .valueOf if it doesn't exist on the student object? This is where prototype chains come into play. The browser will initially check to see if the student object has a method called valueOf available. If it doesn't it looks to the parent prototype and in this case it is the Object class. If Object did not have a valueOf method the console would print undefined

Well what about constructors?

A constructor is a function that creates an instance of a class

function User(name, email){
this.name = name
this.email = email
}

const UserA = new User('Sally' 'SallyJ@gmail.com')
console.log(UserA) // User {name: 'Sally', email: 'SallyJ@gmail.com'}

When a constructor is invoked:

an empty object is created
the created object is returned as the constructor's value implicitly, notice no return keyword being used.
The this keyword will refer to the newly created object.

If you are new to the concepts of inheritance, prototypes, and constructors and still find yourself confused after my examples above; I suggest using Udemy or coderwall to get better acquainted, since these two are crucial to understanding how ES6 classes work.

Okay enough about what's happening under the hood.

Here's why I think ES6 Classes are so great:

The class keyword
- The class keyword creates a new class with our name of choice. It's best practice to use a capital letter when declaring a class e.g.: class Student{}. I like this feature because it explicitly states that we are creating a new class. No guesswork, or second thought required.
Static methods
- MDN defines a static method as a method that is "called without instantiating their class and are also not callable when the class is instantiated. Static methods are often used to create utility functions for an application." In layman's terms static methods have no access to data stored in specific objects. With ES6 we now have the ability to declare a static method on a parent class and have it available to their subclasses as well.
Super & Extends keywords
- The super keyword can be used in 2 ways:
  1. As a function: super can be used as a function that calls upon the parent class with the parameters passed to the sub or child class. This ensures that the sub class is in fact an instanceof the parent class.
  2. As an object: The super keyword can also be used as an object so that the child class can call the methods of the parent class explicitly.

How it started

This is how a class would be declared and modified prior to ES6

function Person(name, age){
this.name = name
this.grade = grade
}

Person.prototype.greeting = function(){
return 'Hi, my name is' + this.name + 'nice to meet you.'
}

Person.prototype.extraInfo = function(){
return 'I am' + this.age + 'and my favorite thing to do is...'
}

If we wanted to extend these properties to a subclass, it would look like

function Child(name, age){
   Person.call(this, name, age)
}

Child.prototype = Object.create(Person.protoype)
Child.prototype.constructor = Child;

Child.prototype.chores = function(){
return 'My name is' + this.name 'I am' + this.age +
'and I have to mop the floor, wash the dishes, and do the laundry'  
}

How it's going

This is how class instantion and inheritance looks now

class Person {
 constructor(name, age){
   this.name = name
   this.age = age
}

greeting() {
  return `Hi my name is ${this.name}, nice to meet you!
}

extraInfo() {
  return `I am ${this.age} and my favorite thing to do is...`
}
}

class Child extends Person {
 constructor(name, age){
    super(name, age)
}

chores() {
  return `My name is ${this.name}, I am ${this.age} 
and I have to mop the floor, wash the dishes, and do the laundry`
}
}

const Mary = new Child('Mary', '7')
console.log(Amelia.greeting()) // Hi my name is Mary, nice to meet you

see how much easier the ES6 version is to read and understand?

It's important to note that the underlying functionality hasn't changed, but the new syntax provides a nice style to classes that make it much more readable and developer friendly.

Now it's your turn

Try out the ES6 class instantiation pattern and features.
I promise you'll never turn back.

Intro to Bootstrap

ABailey92 — Tue, 22 Sep 2020 16:42:38 +0000

In order to become a bootstrap expert you will need to first grasp the fundamentals of HTML and CSS. Without this, you will not understand how to implement bootstrap and will find yourself becoming frustrated with a program designed to make your life easier.

Brushed up on your HTML & CSS?

Great now you're ready to dive into bootstrap! First, I bet you're wondering, "what exactly is bootstrap?". Well, bootstrap is a library that, in short, makes web development shorter and easier. It also makes pages more responsive. Getting started is as easy as copying and pasting the CDN located at get boostrap here. From there the documentation is very user friendly and most elements can be styled by simply adding bootstrap specified classes to them.

In the example above changing your alert button is as simple as adding the class of "alert alert-primary", "alert alert-dark" and so on. The first class of "alert" tells bootstrap to make the div rounded and thin, essentially making it into an alert bar. The second class will tell bootstrap the color you would like your alert bar. Primary is blue, secondary is gray, and danger is red. There are many other colors too, and all it takes is a few minutes to read the documentation on how to specify which color you want.

The only thing left to do is try it out!

I suggest looking at examples here and playing around with it until you feel more comfortable implementing this into your own personal project.

Forem: ABailey92

Recoil: a modern state management library.

Disclaimer: As of now Recoil is still considered experimental so use at your own risk

Why I prefer Recoil over Redux

Okay so what's wrong with Context API?

Alright enough about the competition, what makes Recoil so great?

Recoil- The Basics

In conclusion

Taking your project to the Next level with Next.js

First things first, what is Next.js

1. Server side rendering

2. Automatic code splitting

Okay sounds good, how do I include this in my next project

In conclusion

your turn to try it!

The Great Gatsby.js

First thing first

What is Gatsby.js?

Well wait, what does that mean?

So why should you use Gatsby?

Three reasons: speed, security, and improved developer experience.

1. Speed

That means every page is a React app. Nice!

2. Security

3. Improved developer experience

Gatsby has a couple of things that help improve developer experience.

so here is, you guessed it, another list!

For a complete list visit Gatsby Plugins.

Have I convinced you to try GatsbyJs yet?

It's your turn to try it!

All about Vue.js

Okay, first thing first: What is Vue.js?

The Pros

The Cons

So should I try it?

More ES6 magic: Async/Await

Promises Explained

How does it get any better than that?

All about REST

Okay, first thing first: the lingo

So what's a client? A server?

On to APIs!

Finally! Lets talk about REST

so what exactly makes an API RESTful?

Looking for a challenge?

Good Luck!

Intro to ES6 Classes

Prototypes and constructors explained

Well what about constructors?

When a constructor is invoked:

Okay enough about what's happening under the hood.

How it started

How it's going

see how much easier the ES6 version is to read and understand?

Now it's your turn

Intro to Bootstrap

Brushed up on your HTML & CSS?

The only thing left to do is try it out!

Here is to consistent, responsive, and beautiful websites in a fraction of the time.