DEV Community: sespinoza

React Router Dom Essentials

sespinoza — Wed, 24 Feb 2021 16:26:03 +0000

Hey there! In this article, we'll cover how to add routes to a React app.

It will be useful if you are familiar with these concepts:

ES6 syntax
JSX.
React: functional components.

Index

The repository
A little context first
Starting a project
The initial routes.
- The HashRouter component
- The Route component
- The Switch component
- The Redirect component
More juice using Link

The repository

Show, don't tell, right? Here is the repository with a quick example for you to clone it.

git clone git@gitlab.com:sespinoz/react-router-dom-essentials-book-example.git

Quick note: At the moment of writing this article we are using react-router-dom 5.2.0.

As a good React Developer, you should always have the official documentation opened and also try things for yourself :)

A little context first

When the web was younger, routing meant to ask for a new HTML page to the server each time a user clicked on a link inside a page. This meant more traffic, more delay in loading that page and a poor user experience.

With React, you're able to create Single Page Applications (SPA), which means that you only have to request for the page once, and then you can manipulate the DOM to change the content of the current page on each event triggered by the user. This indeed can be achieved with vanilla javascript, but there are libraries like react-router-dom that will help you to do just that.

React is a lightweight library, not a complete framework like Angular, for this reason, it doesn't provide a routing by default, it let you decide which routing method to use: a library or to do it yourself. Here is where the Facebook team, that created React, would recommend you to use it's react-router-dom library, the one we'll use now.

Starting a project

For the propose of this, we'll make a SPA for a bookstore that will have three routes and a header:

/home
/books
/books/:slug

The Home page will have a welcome message. The Header will have a link to Home and to the Book's page. In the Books page we'll display a list of books with links that will redirect you to the Book description page (/books/:slug) with mode details.

React allows you to create Single Page Applications (SPA) very easily using create-react-app. I highly recommend using it as it has a lot of the configurations such as Babel and Webpack already set for you so that you won't have to do it from scratch. Let's do that:

npx create-react-app react-router-dom-essentials-book-example

Now, just cd react-router-dom-essentials-book-example and we'll add react-router-dom to our dependencies.

npm install react-router-dom --save
# or
yarn add react-router-dom

We'll focus on the functionality and we'll leave the folder structure and moving the components to each file to another article for better understanding.

The initial routes.

To give the routing functionality to our application we need to wrap our main component inside a special component that react-router provides for us: <HashRouter/>. Let's open the src/App.js file and set an initial setting to try things.

import { HashRouter, Switch, Route, Redirect, Link } from 'react-router-dom';

const Header = () => <h2>Header</h2>;
const Home = () => <h2>Home</h2>;
const Books = () => <h2>Books</h2>;
const BookItem = () => <h2>Book Item</h2>;

function App() {
  return (
    <div>
      <HashRouter>
        <Header/>
        <Switch>
          <Route exact path="/" render={Home} />
          <Route exact path="/books/" component={Books} />
          <Route path={"/books/:slug"} component={BookItem} />
          <Redirect to="/" />
        </Switch>
      </HashRouter>
    </div>
  );
}

At this point, start the react application with yarn start and check the following routes:

You should see that a basic routing it's already working showing you the three components. The last URL should redirect you to the home page as we set it like that for any URL that doesn't match the ones we defined here.

HashRouter component

The first thing to notice is that we have everything wrapped inside HashRouter to enable routing in those components.

The second thing to notice is the Switch and the Route components.

The Route component

The route component has three main properties:

exact: define that the URL should match exactly the path.
path: the path in the URL to match.
component: the component to render if the path matches.

Why do we need exact exactly? simply put: Because if you don't, it will render all the components in the routes that will partly match the URL.

For example, here are some URLs that match "...but not exactly" (exact) are:

/books/categories/fiction
/books/categories/terror
/books/categories/historical

This means that they are sharing part of the path /books/categories/.

Back to our example.

<Route exact path="/" component={Home} />

This will match "exactly" / and render the Home component only and will not render the rest.

The Switch component

The Switch component provides more control over the list of routes so that we don't need to write the exact property in all our routes, what it does is to render the first Route that matches the URL and it stops rendering the other components no matter if they have the exact word or not. Is equivalent to place the exact property in all the routes. It just gives you more control if you forget to use the exact property.

The Redirect component

The redirect component allows us to redirect to a specific URL if there's no match in the list of routes.

Until this point, you can check the progress in the initial-routes branch in the example project.

About me

I’m a Software Engineer, writer, tech enthusiast, pianist, origami lover, amateur photographer. In my spare time, I go trekking, play the piano and learn history.

My tech: JavaScript, Node.js, React, Ruby, Crystal, Bash, Docker.

You can follow me on Twitter, LinkedIn or visit my page to contact me.

Put colour to your terminal prompt

sespinoza — Wed, 25 Nov 2020 13:16:32 +0000

If you live in the terminal, you may as well be comfortable in it.

In this article you will learn:

How to set colours to your prompt terminal.
How to show the current git branch.

What you'll get:

One of the things that I really wanted was to have a customized terminal, there are a handful of shells out there, one of the most popular begin zhs popularized by oh my zsh. For some, these are great tools, but for me, that I only want to have some colour and display the git branch... It felt like hitting a tiny nail with Thor's hammer. I knew this could be achieved just by using bash, so I did some digging, here is how to achieve it.

Where is the prompt?

Like many things in bash, everything is inside a configuration variable, in this case, the prompt is stored in the PS1 variable, check it out:

$ echo $PS1
${debian_chroot:+($debian_chroot)}\u@\h:\w\$

The most simplistic structure of the above is the following:

\u@\h:\w\$

\u : username
@ : at symbol
\h : hostname
W : working directory
$ : # sign if is root or $ sign if normal user.

We can change this variable however we want. Let's say that we only want to have the working directory in the prompt, we could do that like this:

export PS1="\w\$ "
~/

As it happens, this change won't be permanent, if you open a new terminal you'll see that it's just like when you started.

Now that we have the bones, lets put some colour, shall we?

Colours and styles

The way a terminal access colour and style is by using sequences like \e[92m for light_green, for example. We could print something with echo -e "\e[92m This text is green".

The -e option in echo it just "enable interpretation of backslash escapes" (man page).

Let's look a bit closer to this sequence: \e[92m. This is composed of the Escape character which can be accessed with \e, \033 or \x1B, then a [ the format code (92) and m.

Here are just a few colours you can choose from:

\e[0m: Reset, removes styles and colours.
\e[30m: Black
\e[31m: Red.
\e[32m: Green.
\e[33m: Yellow.
\e[34m: Blue.
\e[35m: Magenta.
\e[36m: Cyan.

So now we could use these in combination with the previous section to have styled our prompt. Let's make the user and host blue.

export PS1="\e[34m\u@\h\e[0m:\w\$"

The .bashrc configuration file

Alright, now that you know how things work, we can make this our permanent configuration. To do this, we have to write to the ~/.bashrc configuration file.

Open the file with your favourite editor (vim of course...) and paste the following:

bold="\e[1m"
light_green="\e[92m"
blue="\e[34m"
yellow="\e[33m"
reset_formating="\e[0m"
get_branch() {
   git symbolic-ref --short HEAD 2>/dev/null
}
export PS1="\[${bold}${light_green}\]\u@\h \[${blue}\]\W\[${yellow}\] [\$(get_branch)]\[${reset_formating}\]\$ "

At this point is pretty clear what we are doing here, so let's go through it: In the first lines, we are just declaring string variables. Then we defined get_branch which is a function that will execute every time you change from one directory to another and extract the current git branch of that project.

Note: \[ and \] don't affect here, just keep the blocks organized.

Note: "In bash, this is how we access the value of the variable: ${variable_name}"

And that's it! if you run source .bashrc or you open a new terminal, you will see your changes. Try to test it by cd to a directory that has a git repository.

I hope this was helpful to you. If you find it useful or if you find an issue, just send me a quick email and I'll respond to you as soon as possible.

All the best!

References

Originally published in my personal web page:

https://sespinoza.me/#/articles/5fbc6e4d9a9e50c1b04d09ab

About me

I’m a Software Engineer, writer, tech enthusiast, pianist, origami lover, amateur photographer. In my spare time, I go trekking, play the piano and learn history.

My tech: JavaScript, Node.js, React, Ruby, Crystal, Bash, Docker.

You can follow me on Twitter, LinkedIn or visit my page to contact me.

Functional Programming: Filter, Map and Reduce in JS (Advance).

sespinoza — Thu, 17 Sep 2020 22:49:11 +0000

Functional Programming: Filter, Map and Reduce in JS (Advance).

How to use The pillars of functional programming with examples.

These three functions are part of the main operations on arrays in almost every programming language.

What you need to know before reading this article:

What is a callback.
Some familiarity with ES6 syntax.
Know how to run javascript code using a REPL in Nodejs or the browser.

In this article you will learn:

A better understanding of these functions.
Check on complex cases to see their potential.

As a side note, this is not a reference manual to use all the arguments these functions have and it's not an introduction on simple use cases.

To understand how useful they are when working together we'll introduce some data and ask questions. Let us suppose that we are consuming an API from a bookstore that gives us a list of books with attributes such as id, author, title, price, number of pages and a category.

const books = [
  {
    id: 1,
    author: "J.R.R Tolkien",
    title: "The lord of the rings, The Fellowship of the Ring",
    price: 8.54,
    pages: 555,
    category: "fiction"
  },
  {
    id: 2,
    author: "J.R.R Tolkien",
    title: "The lord of the rings, The Two Towers",
    price: 8.34,
    pages: 467,
    category: "fiction"
  },
  {
    id: 3,
    author: "J.K. Rowling",
    title: "Harry Potter and the Philosopher's Stone",
    price: 8.16,
    pages: 345,
    category: "fiction"
  },
  {
    id: 4,
    author: "Lewis Carroll",
    title: "Alice in Wonderland",
    price: 2.70,
    pages: 86,
    category: "fiction"
  },
  {
    id: 5,
    author: "C.S. Lewis",
    title: "The Chronicles of Narnia",
    price: 2.99,
    pages: 118,
    category: "fiction"
  },
  {
    id: 6,
    author: "Stephen Hawking",
    title: "The universe in a nutshell",
    price: 22.93,
    pages: 224,
    category: "science"
  }
]

Filter

Filter is a function that operates over an array of elements and creates a new array with the elements that pass the callback test, that is, when the callback returns true the element is retrieved in the new array.

This is the syntax:

const callback = (element, index, array) => { /* condition */}
const newArray = arr.filter(callback)

Usually, we only use the element. Optional arguments are index and array.

Let's ask questions and see how filter can answer them:

Give me all books from J.R.R Tolkien.
Give me all books that worth less than 5 dollars.
Give me all books with less than 100 pages.

Give me all books from J.R.R Tolkien.

const tolkiens = books.filter(book => book.author === "J.R.R Tolkien" );
/*
[
  {
    author: "J.R.R Tolkien",
    title: "The lord of the rings, The Fellowship of the Ring",
    price: 8.54,
    pages: 555,
    category: "fiction"
  },
  {
    author: "J.R.R Tolkien",
    title: "The lord of the rings, The Two Towers",
    price: 8.34,
    pages: 467,
    category: "fiction"
  }
]
*/

Give me all books that worth less than 5 dollars.

const lessThanFive = books.filter(book => book.price <= 5 );
/*
[
  {
    author: "Lewis Carroll",
    title: "Alice in Wonderland",
    price: 2.70,
    pages: 86,
    category: "fiction"
  },
  {
    author: "C.S. Lewis",
    title: "The Chronicles of Narnia",
    price: 2.99,
    pages: 118,
    category: "fiction"
  }
]
*/

Give me all books with less than 100 pages.

const lessThanAHundred = books.filter(book => book.pages <= 100 );
/*
[
  {
    author: "Lewis Carroll",
    title: "Alice in Wonderland",
    price: 2.70,
    pages: 86,
    category: "fiction"
  },
]
*/

Map

Map takes an array of elements and returns a new array of elements transformed by the callback.

This is the syntax:

const callback = (currentValue, index, array) => { /* mapping */}
const newArray = array.map(callback)

index and array are optional.

We'll have three examples.

Give me all the titles, that worth less than 5 dollars.
Export the data to a CSV file.
Render an array of object in Reactjs.

To answer the first question we'll use the filter method to satisfy the condition of less than 5 dollars, then we'll sort them by author using the sort function that will sort them according to the author's name and finally we'll map the books using the title and the author attribute.

const lessThanFive = books
  .filter(book => book.price <= 5 )
  .sort((first, second) => {
    const nameA = first.title.toUpperCase();
    const nameB = second.title.toUpperCase();
    return (nameA < nameB) ? -1 : 1;
  })
  .map(book => `${book.author} - ${book.title}`);

/*
[
  'Lewis Carroll - Alice in Wonderland',
  'C.S. Lewis - The Chronicles of Narnia'
]
*/

How about if we want to export our data to a .csv file? we could do that like this using fast-csv. Place the following in an index.js file.

const fs = require('fs');
const csv = require('fast-csv');
const ws = fs.createWriteStream('books.csv');
csv.write([
  [['id'], ['author'], ['title'], ['price'], ['pages'], ['category']],
  ...books.map(b => [b.author, b.title, b.price, b.pages, b.category])
]).pipe(ws)

After running this script with node index.js we'll find our book.csv file created.

$ cat books.csv 
# id,author,title,price,pages,category
# J.R.R Tolkien,"The lord of the rings, The Fellowship of the Ring",8.54,555,fiction,
# J.R.R Tolkien,"The lord of the rings, The Two Towers",8.34,467,fiction,
# J.K. Rowling,"Harry Potter and the Philosopher's Stone",8.16,345,fiction,
# Lewis Carroll,Alice in Wonderland,2.7,86,fiction,
# C.S. Lewis,The Chronicles of Narnia,2.99,118,fiction,

Finally, Map can be especially useful when rendering react components, for example, this is how we could render these books in the front end using JSX.

<div className="books-wrapper">
  {
    books.map(book => <div key={book.id}>
        <div className="book">
          <h2>{book.title}</h2>
          <p>by {book.author}</p>
          <p>{book.pages} pages</p>
          <p><strong>$ {book.price}</strong></p>
        </div>
      </div>
    )
  }
</div>

Reduce

Reduce is regarded as the most complicated of the three, but we'll get to understand how it works step by step. First, the definition:

Reduce operates over an array and returns a single value. It performs operations over each element and saves the result using an accumulated value. Then it returns that accumulated value.

const callBack = (accumulator, currentValue) => { /* return the next accumulator value */ }
const array.reduce(callback));

Note: Reduce's callback can also receive an index and the array as optional parameters.

Let us ask some questions:

Tell me how much will it cost me to buy all J.R.R Tolkien books in the store.

This is the most basic use of reduce, to add elements in an array.

const tolkiensBooks = books.filter(book => book.author === "J.R.R Tolkien" )
  .reduce((first, second) => first.price + second.price);
// => 16.88

A story:

I have three days off and I want to spend my time reading.

I like fiction.
I prefer to buy as many books as I can.
I have 20 dollars to spend on books.
I read from 11:00 to 18:00.
My speed read is 250 wpm (words per minute).

Which books should I buy?

Alright, that's a lot, to eat the elephant you have to start piece by piece, right?

First, this person wants to buy fiction literature, so a simple filter will do books.filter(book => book.category === "fiction" ). Then we have two restrictions: the budget and the time he has to read. And finally, as he wants to buy as many books as he can that gives us the idea that we have to choose the shipper books first until we get out of money or until we think we won't have the time to finish them in three days.

To tackle this problem we'll use reduce with a state that holds how much we are spending and how much time we are requiring as we buy book by book. This is the structure:

{
  readingTimeLeft: 200,
  titles: ["Harry Potter and the Philosopher's Stone", "The Lord of the rings, The Two Towers"],
  bill: 19.0
}

As we iterate over the books, we'll be subtracting our reading time left readingTimeLeft and adding to the bill that we'll have to pay. In the end, we'll have our list of titles that we'll buy.

First, we need to perform some calculation, we want to define the variable PAGES_PER_HOUR. He can read 250 words per minute (the average), that is 15000 [word/hour]. A book, let's say, have 400 [word/page] words per page, it can vary, but that will be our estimation. So, he can read a total of 37.5 [page/hour] pages per hour. (15000 [word/hour]/ 400 [word/page] = 37.5 [page/hour]). Excellent we have our speeding rate.

If he can read three days from 11hrs to 18hrs, he has a total of 21 [hour], so we have our readingTimeLeft.

Now, we can code.

const PAGES_PER_HOUR = 37.5;
const BUDGET = 20.00;
const initialStructure = {
  readingTimeLeft: 21, // hours, 7 hrs, per 3 days.
  titles: [],
  bill: 0
}
const summary = books.filter(book => book.category === "fiction" )
  .sort((first, second) => first.price - second.price)  
  .reduce((acc, current) => {
    const readingTimeLeftAfterCal = acc.readingTimeLeft - (current.pages * (1 / PAGES_PER_HOUR));
    const billAfterCal = acc.bill + current.price;
    if (readingTimeLeftAfterCal <= 0) return acc; // we run out of time
    if (billAfterCal >= BUDGET) return acc; // we run out of budget
    return ({
      readingTimeLeft: readingTimeLeftAfterCal,
      titles: [...acc.titles, current.title], // we add the title
      bill: Math.round(billAfterCal * 100) / 100 // we round to two decimals
    })
  }, initialStructure);

A quick explanation on readingTimeLeftAfterCal may be needed. We need to subtract the time that will take us reading that current book, to do that we need to subtract hours, that is (current.pages [page] * (1 / PAGES_PER_HOUR [page/hour])) as our rate is [page/hour] we need to invert it to have [hour/page] to cancel the pages and have the hours.

In each iteration we would have this:

{ readingTimeLeft: 21, titles: [], bill: 0 }
{
  readingTimeLeft: 18.706666666666667,
  titles: [ 'Alice in Wonderland' ],
  bill: 2.7
}
{
  readingTimeLeft: 15.56,
  titles: [ 'Alice in Wonderland', 'The Chronicles of Narnia' ],
  bill: 5.69
}
{
  readingTimeLeft: 6.359999999999999,
  titles: [
    'Alice in Wonderland',
    'The Chronicles of Narnia',
    "Harry Potter and the Philosopher's Stone"
  ],
  bill: 13.85
}

As you can see the last object which is saved in summary give us all that we need: The titles that we want to buy and how much we need to pay. Of course if you wan you can reverse the readingTimeLeft left so that you can have how much time you need to finish all those books. I leave that to you ;)

I hope this article was useful to you, If you liked it, if you have a suggestion or if you found a mistake, please leave a comment or send me an email, I'll be grateful.

References

Filter
Map
Reduce
Sort
Originally posted in my page

About me

I’m a Software Engineer, writer, tech enthusiast, pianist, origami lover, amateur photographer. In my spare time, I go trekking, play the piano and learn history.

My tech: JavaScript, Node.js, React, Ruby, Crystal, Bash, Docker.

You can follow me on Twitter, LinkedIn or visit my page to contact me.

RESTful APIs - Introduction to Express

sespinoza — Mon, 31 Aug 2020 15:25:36 +0000

In this article, you will learn to write a simple RESTful API using Node.js and Express.

This article will be useful if you are familiar with these concepts:

ES6 syntax: arrow function, object notation, string templates.
callbacks.
JSON format.

What we'll cover:

Setting up the project.

Adding express.

Running the server.

Introducing middlewares.

jq

This article does not cover the design of RESTful APIs. We'll cover that in another article. The aim of this article is to introduce you to the Express web framework and show you how great is for creating RESTful APIs. I use it often when I have to provide testing APIs for client's integrations or when I'm developing full stack project and the front client needs to consume an API.

All sorts of microservices can be made with Node.js and Express, within a few minutes you can have a nice and small server listening for requests. In this article, I’ll go through the whole process of setting up the project and running the server for the first time.

Setting up the project

Let’s start by creating the project.

$ mkdir micro-server
$ cd micro-server
$ npm init -y

As you can see npm init creates a package.json, this is the configuration file for our project. It contains scripts and dependencies. The -y option tells npm to autocomplete the questions that otherwise would ask you. Let's add some elements to our package.json file, open your favourite editor and add the author, the description and a start script.

{
  "name": "temp",
  "version": "1.0.0",
  "description": "A hello world example",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node ."
  },
  "keywords": [],
  "author": "S.Espinoza",
  "license": "ISC"
}

Adding Express.

To add express to the dependencies is straight forward by running npm install express --save. This will create and install express inside a node_modules folder and the --save option will save the stable version of Express to our dependencies in the package.json. With express added, we now proceed to create an index.js file and start using express.

$ touch index.js

Open your editor and put this in your file.

const express = require('express')
const app = express()

app.get('/user/:name', (req, res) => {
  return res.status(200).json({
    msg: `Hi ${req.params.name}`
  })
})

app.all('*', (req, res) => {
  return res.status(404).json({
    msg: 'These are not the droids you are looking for'
  })
})

app.listen(4000, () => console.log('listening in on 4000'))

In general, every method in express receives as arguments a path and a callback, except listen which receives the port to listen as the first argument. Once the request matches one of the methods, it executes its callback.

An instance of express (app) has may methods, with different arguments. Here are some of the most important.

method	arguments	Description
`get`	(path, callback)	match `GET` request
`post`	(path, callback)	match `POST` request
`put`	(path, callback)	match `PUT` request
`delete`	(path, callback)	match `DELETE` request
`all`	(path, callback)	match all request
`listen`	(port, callback)	start the server in `port` and then executes a callback

In our example

app.listen start the server to listen to requests on port 4000.
app.get match requests to localhost:4000/user/:name.
app.all match everything that doesn't match all the previews methods.

Yes, the order in which you write you matches matter, they should be structured top to bottom according to it's relevance.

The callback

In our callback for the main methods, excluding listen, the first parameter is the path which in our case is /user/:name and the second parameter is the callback that receives two arguments:

the request object req holds all the data that the user sends in this case, the params.
the response object res formats the response to be sent to the user.

Running the server.

Let's run the server now. For that we could type node index.js or node . but as we added a start script in our package.json we can run our server with npm start. The message listening in on 4000 should appear if everything went well.

$ npm start

> micro-server@1.0.0 start /home/sam/micro-server
> node .

listening in on 4000

And now we can test it using curl.

$ curl localhost:4000/user/Alexander
{"msg":"Hi Alexander"}

Great! we are up and running. If we forgot to the add the param or if we try to place any other path we would get Owi One's words:

$ curl localhost:4000/this/path/does/not/exist
{"msg":"These are not the droids you are looking for"}

Introducing middlewares.

Understanding middlewares

A middleware is a piece of code that executes sequentially before hitting the last callback to respond to the user, this is useful, for example, to parse the content in the request object or for authentication proposes. Here we'll make a little example in our code and then we'll add some useful Third-party libraries to use as middlewares.

A middleware is a function with the following structure:

(req, res, next) => { 
  /* do something*/
  next()
}

Once a middleware finish whatever it does, it should always call the next() function so that the next middleware is called. You can have multiple middlewares that performs different tasks.

app.get('/', (req, res, next) => { /* do something*/ next() },
             (req, res, next) => { /* do something*/ next() },
             (req, res)      => res.status(200).json({}))

For our example we'll use something very simple: put the greeting message in the request object.

const formatGreetings = (req, res, next) => {
  req.greetings = `Hi ${req.params.name}, coffee?`
  next()
}

app.get('/user/:name', formatGreetings, (req, res) => {
  return res.status(200).json({ msg: req.greetings })
})

app.all('*', (req, res) => {
  return res.status(404).json({
    msg: 'These are not the droids you are looking for' 
  })
})

app.listen(4000, () => console.log('listening in on 4000'))

If we test it again

$ curl localhost:4000/user/Alexander
{"msg":"Hi Alexander, coffee?"}

Excellent!

Third-party libraries

Our example as it is wont handle Cross-Origin Resource Sharing (CORS) nor will format well the body of POST requests. So we need to add two more libraries to our dependencies: cors and body-parser.

$ npm install cors body-parser --save

Let's add a new POST match just before our GET.

const express = require('express')
const app = express()
const bparser = require('body-parser')
const cors = require('cors')
app.use(cors())
app.use(bparser.json({ type: 'application/json' })) // parse JSON
app.use(bparser.urlencoded({ extended: true })) // parse URL-encoded

const formatGreetings = (req, res, next) => {
  req.greetings = `Hi ${req.params.name}, coffee?`
  next()
}

app.post('/', (req, res) => {
  return res.status(200).json({
    msg: `creating user ${req.body.name}`
  })
})

app.get('/user/:name', formatGreetings, (req, res) => {
  return res.status(200).json({
    msg: `Hi ${req.params.name}`
  })
})

app.all('*', (req, res) => {
  return res.status(404).json({
    msg: 'These are not the droids you are looking for'
  })
})

app.listen(4000, () => console.log('listening in on 4000'))

Now if we test it.

$ curl -s -XPOST -H 'Content-type: application/json' \
  -d '{ "name": "sam" }' \
  localhost:4000/
{"msg":"creating user sam"}

Perfect. The app.use() call tells express to use a top-level middleware before every request. In this case to parse JSON and URL-encoded.

The urlencoded option in the body-parser just tells the middleware how to parse the body. Here I quote from the docs.

A new body object containing the parsed data is populated on the request object after the middleware (i.e. req.body). This object will contain key-value pairs, where the value can be a string or array (when extended is false), or any type (when extended is true).

jq

If you are like me and you always consume APIs in the terminal, one of the best tools I've found is jq. It's an excellent parser and if you have a huge JSON object it's very useful. Here is an example.

$ curl -s localhost:4000/Alexander | jq .
{
  "msg": "Hi Alexander"
}
$ curl -s localhost:4000/Alexander | jq .msg
"Hi Alexander"

That's it for this article, I really hope this was useful for you, if you think there's a mistake in this article or if there's room to improve it let me know in the comments.

If you want me to talk about a specific topic just leave a comment or contact me through my page.

References

Originally posted in:

https://sespinoza.me/#/articles/5f4362f6634b827bac0f43c9

About me

I’m a Software Engineer, writer, tech enthusiast, pianist, origami lover, amateur photographer. In my spare time, I go trekking, play the piano and learn history.

My tech: JavaScript, Node.js, React, Ruby, Crystal, Bash, Docker.

You can follow me on Twitter, LinkedIn or visit my page to contact me.

Git. Write quality commits.

sespinoza — Mon, 17 Aug 2020 14:49:41 +0000

To write good quality commit messages will save you from the wrath of the next maintainer of your project. Your future self will also be grateful when there is a bug and you'll have to sail through all that history.

In this article you will learn:

How Git messages are structured
How to write quality commit messages.
How to use a template to help you with that.
How to use Git Aliases.

Git message structure

Git messages are compound of two parts.

Header or summary
Body

When you are commiting using git commit the default editor opens and waits for you to write a commit message, if you are using Git for the first time it's probably vi, check at the end of the article for a quick intro. The first line is the Header and after an empty line comes the Body of a commit. This separation is intentional so that you can use options like git log --oneline to list only the Headers of the commit messages.

Here an example.

Everything with # is interpreted as a comment and it's not added to the actual message.

Quality commit messages

To write good quality messages you first need to understand that commits are meant to hold small changes. So it's a good practice to edit fewer files and commiting changes often.

When writing commits you have to have two things in mind:

What changed
Why the change is needed

You answer the first question in the Header using imperative language. Here are some examples of Headers.

[Add] formatTime function to display dates in 'HH:mm' format.
[Fix] formatBlocks function. missing slug attribute.
[Deprecate] REST API. now interactions use socket.io only.
[Document] Add Swagger documentation for Articles API.
[Remove] phoenix-channels lib. The new protocol uses amqplib.
[Update] Articles main font to Roboto.
[Secure] Author's REST routes /author/articles/:id

Then you can answer the second question using descriptive language and listing the reasons why the change was necessary. Let us see a full example using the first Header.

[Add] formatTime function to display dates in 'HH:mm' format.

- this is a helper function utility for the scheduler module.
- it uses moment.js to parse date formats using a particular timezone.

Now that looks quite good. Some companies enforce commit structures and ask you to refer to the id of the issue. You can append it to the action or at the end of the Header.

Git Template message

As you continue to write new features it's good to have a template to use it every time you want to make a commit. Let us create that template.

We'll create the files with the touch command and open the file with the nano editor.

$ cd ~/
$ touch .git-commit-template
$ nano .git-commit-template

# paste the following within the file:
#[Add/Fix/Remove/Update/Refactor/Document/Secure/Deprecate]
#[]

# Why is it necessary? (Bug fix, feature, improvements?)
#-

# [issue #id]

Now that we have our template ready, we tell Git to use it. For that, we need to know the absolute path to that file. you can use pwd to display it, in my case is /home/sam

$ pwd
# /home/sam
$ git config commit.template /home/sam/.git-commit-template

All your git configurations are saved in the ~/.gitconfig file. Mine looks like this:

[user]
    name = sespinoza
    email = espinoza.jimenez@gmail.com

[core]
    editor = vim

[commit]
    template = /home/sam/.git-commit-template

If you want to get rid of the template just delete the last two lines related to [commit].

Git alias

Now that we know how to write quality commits we can list them in a compact comfortable manner using git log --oneline. But we can do better, we can show more information like the date of the commit and the author.

For example, you can get to a project and use

$ git log --pretty=format:'%h - %ad - %aN - %s' --date=short
fa64fad - 2020-08-15 - sespinoza - [Fix] Header's css. On mobile screen resolutions expand menu actions width to a 100%.
4240b85 - 2020-08-15 - sespinoza - [Add] login and logout action in dropdown menu when is in mobile screen resolution.
f3abfac - 2020-08-15 - sespinoza - [Update] Header. Colors, grouped user actions and compatibility with different screen size resolutions.

We can use an alias so that we don't have to type that command every time. You can add an alias in your .gitconfig file, my complete configuration looks like this:

[user]
    name = sespinoza
    email = espinoza.jimenez@gmail.com

[core]
    editor = vim

[alias]
   lg = log --color --pretty=format:'%Cred%h%Creset - %Cblue%ad%Creset - %aN - %s' --date=short

[alias]
    changelog = log --decorate --date=format:'%B %d, %Y' --pretty=format:'%ad: %s (%h)' --abbrev-commit

[commit]
    template = /home/sam/.git-commit-template.txt

Instead of writing git log --pretty=format:'%h - %ad - %aN - %s' --date=short you can now just type git lg. I add some colors here, you can customize this however you wish using this resource.

That's it for today. I wish you a happy and productive life.

Extra: vi

If you are using Git for the first time it's probably that your default command editor is vi of vim. So here is the basic to use it:

Vi uses modes: One mode to read, another to write, and so on.

To use the edit mode press i and start writing you commit.
To save and exit press ESC then type :wq and hit Enter. This will write and quit.

References

About me

I’m a Software Engineer, writer, tech enthusiast, pianist, origami lover, amateur photographer. In my spare time, I go trekking, play the piano and learn history.

My tech: JavaScript, Node.js, React, Ruby, Crystal, Bash, Docker.

You can follow me on Twitter, LinkedIn or visit my page to contact me.

Aknowlegments

Photo by Hello I'm Nik 🎞 on Unsplash

Git. A simple introduction

sespinoza — Mon, 10 Aug 2020 14:35:56 +0000

Git has a lot to offer, sometimes is overwhelming, for that reason it's good to have a practical approach and explanations along the way to grasp the essentials of this magnificent tool.

This is the first part of a series of articles to introduce you to Git and then to level up your working development workflow using git.

Content.

Git history (brief).
Git workflow.
Hands-on Git.

Git history (brief)

git - the stupid content tracker —man page

The problem

A software is a piece of code that grows, in every new feature added a tag is placed in it and you get new versions. Eventually, the owner needs to share that code and allow contributions from other people to make that software better (or worst...). How to achieve this? for the first part, the answer is: Version Control System (VCS) to track the changes. For the second part we have two possible answers:

having a centralized system that keeps track of all the changes in your code.
having a distributed system where all the code is shared among contributors that work merging changes.

So, what Git is? is a Distributed Version Control System

Brief History

In April 2005, Linus Torvalds was working on the 2.6.12 version of his Linux operating system, not pleased with the current VCS available in the market to help him manage his code (BitKeeper as the main one), he decided that he needed to create it's own to keep track of changes of the Linux core. This system had to be:

Distributed
Fast
Reliable

And... he did it. Git was created. Since then it has been growing almost universally to manage version control and team contributions.

For the sake of brevity, these are the main things to know.

Git, workflow

So, how does git works? There are key concepts surrounding Git.

Our files live in three areas or states, those are:

Untracked or modified.
Staging area.
Committed.

Whenever we want to commit our changes on certain files we add those files to the staging area and then commit them. Once committed all your changes are saved in the Git history, so whatever you do you can come back to that point later if you need it.

Scenario:

You are starting working in a project and you want to keep track of changes in your code, so what you do is creating a local repository and add your code to that repository. (git init).
The second thing you want is to select the files that you want to keep track of and add them to the staging area for committing them later. (git add [file, ])
Finally, after adding all the file that you changed you need to commit your work to create a commit in your Git history. (git commit -m "Initial commit").

Up to this point, there is only one commit in Git history. This history is saved in the form of a tree, in this case, there is only one node. This node is the starting point of a mainline of development (branch) that is being tracked by default, that is called the "master branch".

Hands-on Git

Initial configuration

Open a terminal.

Install git first.

$ sudo apt install git-all

Let us tell git who we are so our signature is in all our commits.

$ git config --global user.name "Your Name"
$ git config --global user.email "youremail@yourdomain.com"

Great! now the basics.

Basics

Create a local repository

In a project create a Git repository using git init.

$ mkdir awesome-project && cd awesome-project
$ git init
Initialized empty Git repository in /home/user/awesome-project/.git/

Congratulations! you have created your first repository. You can actually see it... in the .git folder. If by any reason you want to get rid of it you just have to delete that folder (rm -rf .git).

$ ls -a
.  ..  .git

At this point there is nothing in your history, you can check it out with git status.

$ git status
On branch master

No commits yet

nothing to commit (create/copy files and use "git add" to track)

As you can see you are in the master branch. Let us create two files, put something on them and then make our first commit:

$ echo "console.log('hello')" > hello.js
$ echo "console.log('hello')" > world.js
$ cat hello.js 
console.log('hello')

If we check the status again we will see that our files are not being tracked yet.

$ git status
On branch master

No commits yet

Untracked files:
 (use "git add <file>..." to include in what will be committed)

    hello.js
    world.js

nothing added to commit but untracked files present (use "git add" to track)

Staging your files

Git is telling us is not tracking those files. Let us add only one of them to the staging area and check the status once more.

$ git add hello.js 
$ git status
On branch master

No commits yet

Changes to be committed:
(use "git rm --cached <file>..." to unstage)

        new file:   hello.js

Untracked files:
 (use "git add <file>..." to include in what will be committed)

    world.js

Perfect, not we are ready for committing index.js to the Git history.

Commiting

As you can see now hello.js is in the staging area about to be committed and world.js is being untracked. Now, let us commit the hello.js file and add it to the git history.

$ git commit -m "Initial commit, add hello.js"
[master (root-commit) 15008ea] Initial commit, add hello.js
1 file changed, 1 insertion(+)
create mode 100644 hello.js

$ git status
On branch master
Untracked files:
(use "git add <file>..." to include in what will be committed)

    world.js

nothing added to commit but untracked files present (use "git add" to track)

Congratulations, your first commit! The -m option is short for --message= to add a message while committing.

As you can see the file hello.js is not seen anymore when running git status, this is because has already been committed. We can check the Git history using git log.

$ git log
commit 15008ea3f281f95a4b3649e7383eb0334565b415 (HEAD -> master)
Author: sespinoza <espinoza.jimenez@gmail.com>
Date:   Tue Aug 4 21:22:07 2020 -0400

    Initial commit, add hello.js

And there it is, our commit. Here you see plenty of information related to that commit: Hash, Author, Date of commit and the Git message. The hash is an identifier of a commit and with it, you can come back to that state of your code whenever you need to, using the HEAD pointer.

HEAD pointer

To explain what (HEAD -> master) means you have to understand how git saves history. It uses a tree structure, where every commit is a node. Let us add another commit and check how our history would look like.

$ echo "console.log('la la la')" >> hello.js
$ cat hello.js 
console.log('hello')
console.log('la la la')

$ git status
On branch master
Changes not staged for commit:
 (use "git add <file>..." to update what will be committed)
 (use "git checkout -- <file>..." to discard changes in working directory)

    modified:   hello.js

Untracked files:
 (use "git add <file>..." to include in what will be committed)

    world.js

no changes added to commit (use "git add" and/or "git commit -a")

$ git add hello.js 
$ git commit -m "[Update] index.js add another console log"
 [master f99f2fe] [Update] index.js add another console log
 1 file changed, 1 insertion(+)

$ git log
 commit f99f2fe2a3a4c783c6658a591cf69903666bca17 (HEAD -> master)
 Author: sespinoza <espinoza.jimenez@gmail.com>
 Date:   Tue Aug 4 22:02:37 2020 -0400

    [Update] index.js add another console log

 commit 15008ea3f281f95a4b3649e7383eb0334565b415
 Author: sespinoza <espinoza.jimenez@gmail.com>
 Date:   Tue Aug 4 21:22:07 2020 -0400

    Initial commit, add hello.js

Here we have two commits already, and our tree looks like the following diagram.

Here

HEAD is an alias for the tip of the current branch

And you can see where is pointing using git branch.

$ git branch
* master

Here HEAD is pointing to the master branch. Also, you can see what HEAD actually looks like:

$ cat .git/HEAD 
ref: refs/heads/master

To show you a little how it works, we can go back in time in the Git history and see our first commit by passing the hash of the commit to the checkout option.

(master)$ git checkout 15008ea3f281f95a4b3649e7383eb0334565b415
 Note: checking out '15008ea3f281f95a4b3649e7383eb0334565b415'.

 You are in 'detached HEAD' state. You can look around, make experimental
 changes and commit them, and you can discard any commits you make in this
 state without impacting any branches by performing another checkout.

 If you want to create a new branch to retain commits you to create, you may
 do so (now or later) by using -b with the checkout command again. Example:

  git checkout -b <new-branch-name>

 HEAD is now at 15008ea Initial commit, add hello.js

((HEAD detached at 15008ea))$ cat hello.js 
 console.log('hello')

The checkout command helps us to navigate through commits. We now see that HEAD is pointing to the first commit, so now our file only has the first change that we did, that is console.log('hello').

We can come back to the latest state by referring to the branch.

$ git checkout master
 Previous HEAD position was 15008ea Initial commit, add hello.js
 Switched to branch 'master'

To end this article we'll see how to undo the last commit keeping the changes in our working directory and also the option of removing the commit and the changes from our working directory.

Undo the last commit --soft

If you want to remove the last commit but keep those changes in your working directory use:

$ git reset --soft HEAD^1

$ git status
 On branch master
 Changes to be committed:
  (use "git reset HEAD <file>..." to unstage)

    modified:   hello.js

 Untracked files:
  (use "git add <file>..." to include in what will be committed)

    world.js

As you can see your files of the last commit are now in your staging area, you can edit your file now and commit again later. Here HEAD^1 makes a reference to the immediate "parent" of the current commit. The current commit is the last commit, so here we are telling git "go and reset everything until the previous commit".

Undo the last commit --hard

If you want to get rid of the last commit and all the changes introduced in the last commit.

$ git reset --hard HEAD^1
 HEAD is now at 15008ea Initial commit, add hello.js

$ git status
 On branch master
 Untracked files:
  (use "git add <file>..." to include in what will be committed)

    world.js

 nothing added to commit but untracked files present (use "git add" to track)

$ cat hello.js 
 console.log('hello')

Using --hard removes the las commit and it's changes and place HEAD pointing to the first commit.

That's it for this Article, in the next one I'll talk about how to make better Git commit messages, the workflow for a single developer and more. I hope this helped you understanding and using git better.

References

About me

I’m a Software Engineer, writer, tech enthusiast, pianist, origami lover, amateur photographer. In my spare time, I go trekking, play the piano and learn history.

My tech: JavaScript, Node.js, React, Ruby, Crystal, Bash, Docker.

You can follow me on Twitter, LinkedIn or visit my page to contact me.

Originally posted in: sespinoza.me

DEV Community: sespinoza

React Router Dom Essentials

The repository

A little context first

Starting a project

The initial routes.

HashRouter component

The Route component

The Switch component

The Redirect component

More juice using Link

About me

Put colour to your terminal prompt

Where is the prompt?

Colours and styles

The .bashrc configuration file

References

About me

Functional Programming: Filter, Map and Reduce in JS (Advance).

Functional Programming: Filter, Map and Reduce in JS (Advance).

How to use The pillars of functional programming with examples.

Filter

Map

Reduce

References

About me

RESTful APIs - Introduction to Express

Setting up the project

Adding Express.

The callback

Running the server.

Introducing middlewares.

Understanding middlewares

Third-party libraries

jq

References

About me

Git. Write quality commits.

Git message structure

Quality commit messages

Git Template message

Git alias

Extra: vi

References

About me

Aknowlegments

Git. A simple introduction

Git history (brief)

Git, workflow

Hands-on Git

Initial configuration

Basics

Create a local repository

Staging your files

Commiting

HEAD pointer

Undo the last commit --soft

Undo the last commit --hard

References

About me