DEV Community: Vinicius Cerqueira Bonifácio

Webpack FUNdamentals

Vinicius Cerqueira Bonifácio — Thu, 19 Aug 2021 12:10:52 +0000

Hello super devs, 👋

How is everybody doing there? Good?

Are you watching lot of sports on Olympic Games? Has your country conquered many medals?
Remember to leave your chair sometimes and go outside to make some exercises also. There is no git revert HEAD for life.

As you can see above it took me a little bit to publish this article. 😅 Never mind about OG anymore. 😉

Today I am going to talk a little bit about Webpack and we are going to try to recreate a very simple React application, step by step.

OK, but what the heck is Webpack?

Webpack 🕸️ 📦

Webpack is an open-source JavaScript module bundler. I know, blah blah blah ...

Let's break into pieces so it becomes easy (or not) to understand:

module: a component or part of a program that contains one or more routines.
bundler: A group of objects held together, wrapped in a package.

Until yesterday, browsers couldn't handle code divided into multiple modules. The Webpack's mission is to wrap all the source code into a single file containing all the application code.

Do you really need to know about it? Sincerely you do not. I particularly like to understand how things work under the hood. Believe me, it can surprise you.

If you are still here, it is time to get hands dirty!

Project Bare-bones 💀 🦴

Let's start by creating a project structure similar to the image below:

package.json file:

{
  "name": "webpack-fun",
  "version": "0.0.1",
  "description": "webpack fundamentals",
  "license": "MIT"
}

Installing the Webpack package

npm install --save-dev webpack webpack-cli

Here we are installing the Webpack package as a development dependency as well as its cli (Command Line Interface).

Once done that, we should define the initial Webpack settings (webpack.config.js file):

Webpack Configuration File

const path = require("path");

const config = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "main.js"
  }
};

module.exports = config;

Don't you worry I will explain it: 🙌

path: NodeJS path module used for handling file paths.
config: Object that holds the Webpack configuration.
- entry: Where Webpack looks to start building the bundle. The context is an absolute string to the directory that contains the entry files.
- output: contains set of options instructing Webpack on how and where it should output your bundles, assets the bundle or load with Webpack.
module.exports: NodeJS special object that represents the current module, and exports is an object that will be exposed as a module.

Defining the build script (`package.json`) 🏗️

Now, we need to define the build script responsible for triggering the Webpack bundling.

{
  // ...
  "scripts": {
    "build": "webpack --mode=development"
  },
  // ...
}

I guess we are ready to test the application. Let's add some dummy code in a brand new src/index.js file, just to verify if it works:

const consoleLogTricks = name => {
  console.log("Look at this:")
  console.group("Question:")
    console.log(`Did you now about it, ${name}?`)
    console.log("Probably yes!")
  console.groupEnd()
};

Now, if we run the build script created previously (npm run build), a new bundled file should be created at /build/main.js. It is the bundled content of our index.js file.

Isn't it amazing? Well, nothing special I guess. 🥱 🥱

Let's try to mimic a React-like application. Under the src directory create a file called App.jsx.

💡 People often use the .js extension which is fine.
As my personal preference, when I am creating components I use the .jsx one. Their icons also change on VSCode and I know what that's about. 😉 ⚛️

src/App.jsx.

const App = () => {
  return null;
}
// Remember to export :)
export default App;

Import the App component in the index.js file we created previously:

import App from "./App"

const welcome = user => {
  console.log(`Welcome ${user}`)
}

App();

We are almost there. At the moment your application is not doing too much. It is missing some packages that will help us to transform it in a minimal React application.

Go ahead and install them: 💪

npm install --save react react-dom

Done that, it is time to rewrite your index.js and App.jsx files and use the packages we have just installed.

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

App.jsx

import React from "react";

const App = () => {
  return (
    <div>
      <h1>Hello from Webpack!</h1>
    </div>
  );
}
export default App;

Now we need to create an index.html file that will be the entry point of our application and load our bundled JavaScript code.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Minimal React App</title>
  </head>

  <body>
    <div id="root"></div>
    <script type="text/javascript" src="./main.js"></script>
  </body>
</html>

Loaders 🔄

We have an issue here. Do you remember that Webpack is a JavaScript bundler? Our components are using JSX that is a syntax extension to JavaScript.

🗒️ If it confuses you, please refer to Introducing JSX.

The loaders come to our rescue.

Installing the necessary Babel packages:

npm install @babel/core babel-loader @babel/preset-react --save-dev

Setting up a loader in the webpack.config.js file, under the module property.

This loader is responsible to transform JSX code into regular JavaScript.

// ...
module: {
  rules: [
    {
      test: /\.js$/,
      loader: "babel-loader",
      query: { presets: ["@babel/preset-react"] }
    }
  ]
}
// ...

We should be able to bundle our application "properly" now. 🎉 🎊 🥳

🥤 `<Hydration Time>` 🥤

I know, it is quite overwhelming all this "setup" process. Luckily, you won't be configuring Webpack from scratch that often or maybe you never will.
Understanding at least the basics of how it works may be useful to you someday. Who knows? ¯_(ツ)_/¯

Take your time to wrap up things in your head, eat a snack, drink a glass of Tang / Kool-aid and come back here when you feel ready.

No pressure at all! See you in 5 minutes. 😂

🥤 `</Hydration Time>` 🥤

There is just one important detail. If we try to make any async operation (e.g. REST API operations), it may happen that some browsers won't understand what is going on.

Babel has the polyfill package for solving this issue, so let's go for it. 💪

Installing polyfill:

npm install --save @babel/polyfill

Add it into the entry property in our webpack.config.js file.

const config = {
+  entry: ['@babel/polyfill', './src/index.js'],
-  entry: "./src/index.js",
  output: {
    // ...
  }
  // ...
}

Transpilers 🤔 ⁉️

This word looks weird. Actually it sounds like a pile of Transformers. 🥁 😭

Bad jokes aside, it is the term used to mean that a source code is transformed from a language to another. (Maybe Transformed + Compiled ?)

Anyway, the question is why do we need a transpiler?
It is known that most browsers don't really support the newest JavaScript features such as ES6, ES7, ES11 and so on.
The function of a transpiler is (guess what? 🫂) to transpile those new features into standard ES5.

Installing the preset:

npm install @babel/preset-env --save-dev

Adding the @babel/preset-env plugin in the webpack.config.js file.

// ...
{
  test: /\.js$/,
  loader: 'babel-loader',
  query: {
               // 👇 H e r e ! 👇 
    presets: ['@babel/preset-env', '@babel/preset-react']
  }
}

Finally we are able to write JavaScript code using all the latest features. 👨‍💻

Adding CSS 💅

A web application without CSS is like a cheese burger without the hamburger. 🍔 🧀
I mean, it is totally possible but it is not the same thing. There is a flavor missing somewhere. 🤣

Let's create a CSS file on src/index.css:

⚠️ The commercial usage of this file is prohibited by law ⚠️

.wrapper {
  empty-cells: show;
  background-color: mediumaquamarine;;
  color: blanchedalmond;
}

Import it on index.js file:

import './index.css'

Apply it in the App.jsx component:

const App = () => {
  return (
    <div className="wrapper">
      <h1>Hello from Webpack</h1>
    </div>
  )
}

🤺 Touché moment: Yes, we need to install more loaders in order to make our CSS styles work as well. How did you know that? 🤓

npm install style-loader css-loader --save-dev

In short:

style-loader: Generates and injects a <style> element which contains all of the application styles.
css-loader: Transforms CSS into a JavaScript module and allows minification. E.g.(Input: CSS ➡ Output: JavaScript)

Please, don't forget to also add the loaders in your webpack.config.js file, otherwise all our effort and the RSI (Repetitive Strain Injury) acquired by typing npm install hundred times will be in vain: 😂 👌

{
  rules: [
    {
      // ... previous config
    },
    // ⬇️  👇  👇  ⬇️
    {      
      test: /\.css$/,
      loaders: ['style-loader', 'css-loader'],
     },
     // ⬆️  ☝️  ☝️  ⬆️
  ];
}

Webpack Development Server 🖥️ ⬆️

One thing that drive me nuts is having to manually refresh the page every time I make changes in the application. 🥴

Don't stress yourself, at this point of the article you have already mastered using npm to install packages. 🎓 😂

Install the server package:

npm install --save-dev webpack-dev-server

Define the start script in your package.json file.

{
  // ...
  "scripts": {
    "build": "webpack --mode=development",
    //  👇  👇  👇  👇
    "start": "webpack-dev-server --mode=development"  
    },
  // ...
}

Add the devServer property into webpack.config.js file:

const config = {
  entry: './src/index.js',
  output: {
    // ...
  },
+  devServer: {    
+    contentBase: path.resolve(__dirname, 'build'),
+    compress: true,    
+    port: 3000  
+   },
  // ...
};

Running the npm start script in your terminal should start the server at http://localhost:3000.

Error Handling 🚫

The way Webpack shows error differs a little if compared to an application created using create-react-app.
Very often a error is shown but not its real location.

Source maps provide us with the source code that is actually causing the error.

This time, as an rare exception, you won't need to install anything. 🎉 🥳 👯‍♀️

Just add the devtool property in our webpack.config.js file and a source map will be generated (build/main.js.map).

const config = {
  entry: './src/index.js',
  output: {
    // ...
  },
  devServer: {
    // ...
  },
+  devtool: 'source-map', 👈
  // ..
};

Minifying the source code in production

Since we are using Webpack in its latest version, no further configuration is need in order to minify the source code.

Ah, ok. I almost forget to explain what minifiyng code means.

Minifying means that your code that was previously classified as illegible by your workmates becomes officially gibberish. 😂 🤣 😆 😭

Minifying is the process that removes both comments, whitespaces, newline characters, replaces variable names with a single character and so on, in order to minimize code and reduce file size (TLDR; to optimize performance).

As result of minifying we would have something like this:

!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;

We need to add a npm script (package.json) to do so.
⚠️ Note: --mode=production. ⚠️

"scripts": {
+  "build": "webpack --mode=production",
  // ...
},

Conclusion, Frenzies and Farewell 💭💡👋

Indeed, there a lot more concepts to cover regarding Webpack but hopefully this introduction is enough for you to go and start exploring it by your own. 🗺️ 📍

Albert Einstein once said: 🧠

If you can't explain it to a six year old, you don't understand it yourself.

After finish reading this whole article to my 2 years old sibling, he starts to uncontrollably crying.
I guess it is happy crying because it looks like he got it even being younger than the expected! 👶

Sorry, I must go now. He is becoming really loud. 🏃‍♂️💨
Maybe I should read him my other article about Regex. 😬 🤭

Congratulations for reaching the end 🎉 and I wish you all a great weekend. 🙏

See ya!

Ruby Basics

Vinicius Cerqueira Bonifácio — Sat, 17 Jul 2021 13:23:17 +0000

Hello, dear devs. 👋

I am back, bringing to you (again) the weirdest articles on the internet. I am sure you were waiting for that, right? (Please don't answer!)

Today, as the title points out, I will be briefly ~~talking~~ writing about the Ruby language and some of its features. 😉

If you have read my previous posts (something I don't recommend) I usually write about JavaScript related stuff and I love doing so.

But today I have decided to vary a little bit and talk about Ruby that is an extremely powerful language and, long story short, thanks to it I am a developer today. (Am I? 🤔)

Before start and given my ability to read minds I know it is time to Q & A:

Is Ruby A Dying Language?

Short answer: no. Indeed, it has been losing "popularity" along the years I cannot deny that but it is way far from death.

The Clash is my favorite band ever, it also has been losing its popularity but can you tell they are dying? 🎸 Yeah, you just cannot! (In musical terms, I meant.)
I am losing focus here, sorry. 😅

Ruby just got a recent minor update to 3.0.2 on July 7th but it is beyond the current scope of this article.

Is it worth learning Ruby in 2021? 💎

Paraphrasing someone I have no idea:

"... Knowledge does not occupy space!"

There are many discussions about this specific subject out there but honestly, I am here to bring you the basics of Ruby so let's get started because life is short.

⚠️ Disclaimer ⚠️

Given the language vastness it is impossible to include here, in a mere 10 minutes reading post, either all its features, different ways of doing the same thing or even best practices. I hope you understand that.

The examples are based in both my mental disorders, personal delirium and confused state of mind caused by unknown reasons, according to my psychologist.

If you are OK with that, welcome aboard !, otherwise you are free to go. There are tons of normal people waiting for you somewhere else. 😂 🤣

Ruby in a nutshell 💎 👉 🌰 🐚

🚨 The next three paragraphs I didn't write myself. They are, in my vision, plausible to explain what I have in mind. I am not a huge fan of "reinvent the wheel". 🚨

Ruby is a dynamic, interpreted, high-level and general-purpose programming language. Wikipedia:

It was was created by Yukihiro Matsumoto (Matz), in Japan in the mid 1990's and was designed for programmer productivity with the idea that programming should be fun for programmers.

It emphasizes the necessity for software to be understood by humans first and computers second. Launch School:

Please pay special attention for those three sentences:

"... necessity for software to be understood by humans first (🙋🥇) and computers second (🗣️ losers!)."

" ... It was was created by Yukihiro Matsumoto (Matz), in Japan."

" ... with the idea that programming should be fun for programmers."

Quote 1: Most of the time, Ruby statements are very similar to plain English and it turns out a language very easy to read and understand by us, mere mortals.

Quote 2: Try to convince me about something bad that is originally from Japan and fail miserably.

👉 [ ~~Suggest a gif (about Japan) in the comments section and I will upload the best here.~~ ]. 👈

Thanks for participating, Juan. The gif below is in your honor! 🤜🤛

Quote 3: The 'having fun' part you are going to discover very soon. If you stick with me until the end, of course. 😊

If you would like to follow along and don't have Ruby installed in your machine, don't worry. Install it! 🤣 😆 😂

Installing Ruby

Just kidding, you can use the Ruby Online Compiler & Interpreter - Replit. It is a mixing of the irb console and an IDE in the same page.

IRB stands for "interactive Ruby" and is a tool to interactively execute Ruby expressions ...
Module: IRB

Commenting ✍️

You can comment a block of code, for example, using both the =begin and =end keywords and placing the block to be comment between them.

=begin
   Dale a tu cuerpo alegria Macarena
   Eeeh Macarena .... 
   Aaahe!
=end

You can also have an one-line comment using the #.

# Never gonna give you up, never gonna let you down ...

`print` / `puts` methods 🖥️

Both functions are used to display output on the screen. The major difference between them is that puts inserts a newline at the end.

print "Hello, "
print "darkness my old friend."

# Result: 
# Hello, darkness my old friend

puts "Hark, hark! I hear"
puts "The strain of strutting chanticleer"
puts "Cry, Cock-a-diddle-dow!"

# Result:
=begin
   Hark, hark! I hear
   The strain of strutting chanticleer
   Cry, Cock-a-diddle-dow! 
=end

Variables 📦

Ruby has four different kinds of variables where which one is declared in its specific way:

    local = "Hey, I am a local variable."
    _other_local_var = "Never mess up with a local!"

    @instance = "For instance, I am an instance variable."
    @@class = "I am 'classy'."
    $global = "Globalization rules!"

Data Types 😎 😍 😈 👻 💩

Ruby has several data types: String, Integer, Float, Boolean (TrueClass, FalseClass), Symbol and Nil (NilClass).

I wouldn't classify them as primitive data types because everything is Ruby is an object. (or almost everything. Keep reading! 😜)

$my_name = "Clancy Gilroy"
puts $my_name.class        # String

name = "X Æ A-12"
puts name.class            # String

age = 35
puts age.class             # Integer

gpa = 3.22                 
puts gpa.class             # Float 

had_fun = true
puts had_fun.class         # TrueClass

is_hot = false
puts is_hot.class          # FalseClass

week_points = nil
puts week_points.class     # NilClass (absence of value)

symbol = :hello
puts symbol.class          # Symbol

Did you notice the .class method ? Since Ruby is a Fully Object Oriented language everything is an object, a property of or a method call on an object.

By the way and being shallow, an object is the instance of a given class.

Think of a class like a blueprint for creating objects, which determines initial values, attributes, behavior etc.

You can confirm the "almost everything is an object" theory using the .superclass method.

puts TrueClass.superclass        # Object
puts Integer.superclass          # Object
puts String.superclass           # Object
puts Object.superclass           # BasicObject
# so on and so forth

Some (Useful) String Methods 💪

Ruby has many built-in methods to manipulate strings.

Do you remember when I had mentioned that in Ruby things are similar to plain English? I bet you can guess what most of these methods below do, am I right? 😃

phrase = "   Sometimes I’m confused by what I think is really obvious. But what I think is really obvious obviously isn’t obvious.   "

puts phrase.upcase
puts phrase.downcase

# hint: .strip removes the empty spaces from both beginning and ending.
puts phrase.strip    

puts phrase.length
puts phrase.include? "Some"
puts phrase.include? "Sure"
puts phrase.index("confused")

puts "auckland".capitalize

It is also possible to create both interpolation and concatenation of strings.

character_age = "17"
character_name = "Link"

# Interpolation
puts "There once was a young man named #{character_name}"

# Concatenation ➕
# '.to_s' is the short method name for 'to string'
# There is more like '.to_i', '.to_f', '.to_a' etc
puts "he was " + character_age.to_s + " years old"

Some Math Methods 🔢🔣


puts 5 + 9     # addition
puts 2 - 9     # subtraction
puts 6 * 9     # multiplication
puts 10 / 7.0  # division
puts 2 ** 3    # exponentiation
puts 3 % 2     # modulo or remainder

num = -163.23
num2 = 45.47

# returns the absolute number
puts num.abs                 # 163.23   

# return a value rounded to the nearest value with "n" digits decimal digits precision.
puts num2.round              # 45

# returns the ceil value
puts num2.ceil               # 46

# returns the floor value 
puts num2.floor              # 45

# returns the square root of a given number (5.0)
puts Math.sqrt(25)           # 5.0

# returns the natural logarithm (base e) or logarithm to the specified base of a given number, e.g. Math.log(x, base).
puts Math.log(100)           # 4.605170185988092

Arrays 📚

Ruby arrays are collections of ordered, integer-indexed objects which can store numbers, strings, hashes, symbols, objects or even any other arrays.

# different ways to declare an array
friends = Array["Rapha", "Alexandre", "Andre", "Bogus"]

# I prefer this one 👇
fruits_array = ["cherimoya", "durian", "lamut", "langsat" ]

# What the heck? 🤢
hello = Array.new(5, "awful").to_s 
# output: ["awful", "awful", "awful", "awful", "awful"]
puts hello 

# Remind: Ruby Arrays indexing starts at 0.
puts friends[0]      # Rapha
puts friends[-1]     # Bogus
puts friends[0,2]    # Rapha Alexandre

# Replacing items
friends[0] = "Fael"

# output: ["Fael", "Alexandre", "Andre", "Bogus"]
puts friends.to_s    

puts friends.length  # 4

# Down here the methods syntax are pretty much understandable
puts friends.include?("Fael")
puts friends.reverse
puts friends.sort
puts friends.empty?
puts fruits_array.push("rambutan")

## the example above (`push`) could also be done as shown below
fruits_array << "akebi"

The Ruby arrays built-in methods are not limited to just those ones I have mentioned above.
If you are eager to learn more (I am sure you are 🤓), Ruby docs is a really good resource to do so.

Hashes #️⃣

Ruby hashes are collections of key-value pairs, for example:

random_hash = {
    :sao_paulo => "SP",
    "rio_de_janeiro" => "RJ",
    1 => "NY",
}

Remember that the way you declare the key is the same you will use in order to successfully access its value in a hash.

For example, trying to access random_hash["sao_paulo"] would return nothing because :sao_paulo is not the same as "sao_paulo". (Symbolx String)

This is São Paulo, by the way! 🏙️

puts random_hash
puts random_hash[:sao_paulo]       # SP
puts random_hash["rio_de_janeiro"] # RJ
puts random_hash[1]                # NY
puts random_hash.nil?              # false
puts random_hash.length            # 3

Methods 📐📏

Ruby methods are used to tie or wrap together one or more repeatable statements into a single unit.

Along the article we have already used many methods, for example, length, sqrt, to_s etc.

The difference here is that we have only invoked them.

Someone, probably Matz, have already written them for us and for this reason they are the so called built-in.

Even Ruby being an amazing language it is practically impossible to include every single method that we would use in our daily life. We are free to implement them by our own.

Hint: Method names should begin with a lowercase letter.

"... If you begin a method name with an uppercase letter, Ruby might think that it is a constant and hence can parse the call incorrectly. "
Source: Tutorials Point

# Method without parameter(s)

# This is how you declare a method
def say_konnichiwa
    puts "こんにちは"
end

# This is how you invoke it
say_konnichiwa

# Method with parameter(s)
def say_tadaima(title, name="Unknown")
    puts "ただいま, #{title} #{name}!"
end

say_tadaima("Mr.", "Toguro") # prints "ただいま, Mr. Toguro!"

Note that the second parameter name holds the default value Unknown. In other words, if we call the same method without providing the second argument, the default value will be put in place. Example below:

say_tadaima("Mr.")           # prints "ただいま, Mr. Unknown!"

We can also return values from inside of our methods both explicitly or implicitly.

- Explicit return:

def cube(num)
   return num * num * num, 70, "return", true, "?????"

   # Never reached
   puts "No value after the return statement is reached"
end

# IT will console the result of "num * num * num"
puts cube(3)

# Prints the number "70"
puts cube(3)[1]

# Prints the string "return" and so on
puts cube(3)[2]

- Implicit return:

def always_return
    "I am always returned"
end

# Variable created for the sake of demonstration
result = always_return

puts result   # "I am always returned"

In other words, methods are most likely those relatives we don't like. They always return. (🥁 Tu dum tsss)

Conditionals (`if`, `else` and `elsif`)

is_dev = true
language = "Cobol"

if(is_dev && language == "Cobol")
    puts "DISPLAY 'Hello, Cobol'."
elsif (is_dev && language == "Pascal")
    puts "writeln('Hello, Pascal!');"
elsif (is_dev && language == "Delphi")
    puts "ShowMessage('Hello Delphi');"
else 
    puts "👋"
end

We can also use comparisons inside of if / else statements.

def max_number(num1, num2, num3)
    if (num1 >= num2 and num1 >= num3)
        return num1
    elsif (num2 >= num1 and num2 >= num3)
        return num2
    else
        return num3
    end    
end

puts max_number(9, 53, 77)

Case Expressions 💼

There is no mystery here. I am sure you can read this ~~master~~piece of code and guess what it does.

def get_day_name(day_abbreviaton)
    day_name = ""

     case day_abbreviaton.downcase
    when "ma"
        day_name = "Maanantai"
    when "ti"
        day_name = "Tiistai"
    when "ke"
        day_name = "Keskiviikko"
    when "to"
        day_name = "Torstai"
    when "pe"
        day_name = "Perjantai"
    when "la"
        day_name = "Lauantai"
    when "sun"
        day_name = "Sunnuntai"
    else
        day_name = "En tiedä!"
    end

    # Implicit returns the value
    day_name

end

puts get_day_name("ma")      # Maanantai
puts get_day_name("koira")   # En tiedä!

While Loops ↪️

lucky_num = 70

# Note that the 'not' keyword is similar to '!=' (negation)
while not lucky_num == 77
    puts "No Lucky #{lucky_num}"

    lucky_num +=1
end

Loops ↩️

# You already know what is an array :)
people = ["C. Falcon", "Fox", "DK", "Ness", "Samus"]

# It will display all names in a different line
for person in people
    puts person
end

# Same same but ... same
people.each do |person|
    puts person
end

# Display numbers from range 0 to 5 (inclusive ..)
for inclusive in 0..5
    puts inclusive
end

# Display number from range 0 to 4 (exclusive ...)
for exclusive in 0...5
    puts exclusive
end   

# Let's agree: This is plain English
# PS.: counting starts from 0
6.times do |phrase|
    puts "Counting: #{phrase}"   
end

Classes And Objects 📝 🛋️

This is my favorite part. Why? Because I remember when I have had my first contact with OOP (back in 2000's [btw, old are your ancestors 😠]) in Java.
I was like: "What the heck is going on here?".
I got to understand it better because of the Ruby way of doing things.

## This is a very simple class
class Character
    attr_accessor :name, :role, :home
end

## This is a very simple way to create a new object
character = Character.new()
character.name = "Rygar"
character.role = "Searcher"
character.home = "Black Mountains"

puts character.name

Good that you asked (🔮), under the hood the attr_... creates the so famous getters and setters for you, for instance:

-attr_accessor: creates the getter and setter methods.
-attr_reader: creates only the getter method.
-attr_writer: creates only the setter method.

TLDR;

# In other words this
attr_acessor :name

# Is the equivalent of
def name
    @name
end

def name=(value)
    @name = value
end

# Note: The equals sign is a Ruby convention when creating setters. 
# Omitting it is considering a bad practice but still works.
# (if it is working don't touch! 👍)

Cool, right? We have achieved so much just writing very few lines of code. I have to confess, when writing code using Ruby sometimes I feel like cheating.
But, in my opinion, Ruby saves our time so we can worry about stuff that really matters.

Let's check an other manner to create a class in Ruby.

class Shoes
    attr_accessor :brand, :size, :color

    # Allows you to set the initial values for a given object
    # Does 'constructor' sound familiar to you?
    def initialize(brand, size, color)
        @brand = brand
        @size = size
        @color = color        
    end

end

trainers = Shoes.new("Kichute", 47, "Heliotrope")
puts trainers.brand  # Kichute

Object / Class Methods

class Hero
    attr_accessor :name, :animal, :hp

    def initialize(name, animal, hp)
        @name = name
        @animal = animal
        @hp = hp
    end

    # It is a instance method (Good catch, Juan! 🏆)
    def has_enough_hp
        @hp > 5.5 ? "Able to play" : "Consider resting, #{@name}"
    end
end

hero1 = Hero.new("Nakoruru", "eagle", 80)
hero2 = Hero.new("Galford", "husky", 2.9)

# Here we have invoked the object(s) method
puts hero1.has_enough_hp      # Able to play
puts hero2.has_enough_hp      # Consider resting, Galford

Class Inheritance (Shallow Explanation)

Allows classes to inherit characteristics of other classes.

class Fighter
    def make_special_attack
        puts "Hadouken"
    end

    def make_uppercut_punch
        puts "Makes the uppercut move"
    end
end

ryu = Fighter.new()
ryu.make_special_attack          # Hadouken
ryu.make_uppercut_punch          # Makes the uppercut move

# Subclass - "<" means inherits from
class SpecialFighter < Fighter 

    # Overwrites 'make_special_attack' method
    def make_special_attack
        puts "Shun Goku Satsu"
    end

    # Creates a new method for this class
    def celebrate
        puts "Is that all? You must be joking!"
    end
end

gouki = SpecialFighter.new()
gouki.make_special_attack  # Shun Goku Satsu
gouki.make_uppercut_punch  # Makes the uppercut move
gouki.celebrate            # Is that all? You must be joking!

Note: as the make_uppercut_punch move is used by both characters there is no need to re-declare it in our subclass.

Modules 🛒

Modules are nothing more nothing less than a container where you can store methods.

module Greeting
    def say_hello(name="there")
        puts "Hi #{name}."
    end

    def say_bye_bye(name="dear")
        puts "Bye bye #{name}."
    end
end

In order to access modules you must include its relative path as the example shows:

require_relative "./folder/the_name_of_your_file.rb"
include Greeting

Greeting.say_hello("Bowser")   # Hi Bowser.

Error Handling ⛔

Error handlers are methods defined in the Exception class to deal with errors.

begin
    # we have never defined the 'fav_character' variable
    # so it will fire the second 'rescue' block
    # and will display the customized message even
    # knowing that we also tried to make a division by 0
    # => Reference to control flow for more <=

    fav_character["Makoto Mizuhara"]
    num = 45 / 0
rescue ZeroDivisionError => e
    puts e
    puts "Division By Zero Error"
rescue NameError
    puts "undefined local variable or method 'fav_character'."
end

If you would like to see the other error handling in action, replace the statement fav_character["Makoto Mizuhara"] for that one fav_character = ["Makoto Mizuhara"]. 😉

And that's it, folks! I mean, Ruby cannot be resumed by any means to the features I have shown so far but it is a pretty good start.

Happy Hour Moment 🍹🍻🥤🍷

The good news here are that if you have followed along until the end (and thank you a ton for doing that! 🙏), you can already use the acquired knowledge to start exploring other 'seas'. For example, why don't you try to play around with Rails (one of Ruby frameworks) a little bit?

Skip this part 📚 📖

I can see you did not skip it so don't you dare to complain later. 😂👌

" The curiosity killed the cat."

Well, if you allow me to recommend an excellent source to learn about Ruby on Rails, I would advice the Zayne's Youtube channel.
He doesn't publish videos very often but it really worth checking it out!

You can also check Web Crunch, Codemy, FreeCodeCamp and of course the Ruby Docs and Rails Guides.

Conclusion and Final Thoughts 🔚 💡

Ruby is without any doubts a very powerful, beginner friendly and lovely language. As any language, it has your flaws but don't be influenced by the "which one is the best language?" war.

Ruby has been evolving a lot in the last years and counts with a very strong and respectful community that will help you whenever you need it.

I have tried to highlight some examples I personally consider important when 'meeting' Ruby for the very first time.

As you could see, the language speaks for itself. I venture to say that it is a self.describing language. (Pun intended 🤦)

Thanks so much for your companion. I hope you have learned something new today. (It doesn't necessarily mean from this article! 🤣)

Cheerio! 👋

Gatsby - Trash Course [1/3]

Vinicius Cerqueira Bonifácio — Sun, 28 Mar 2021 15:07:01 +0000

Hey, my friend devs.

How have you all been? Doing good? If you are so do I. 🙏

I am back with an other Trash Course series. 🍾 🎉

Trash Course, for who doesn't know yet, is something like a crash course but worst. 😂

What will be covered in this part?

Initial blah blah blah
Minimal Requirements
What is Gatsby?
What will we build?
Initial Setup (installing, starter sites etc.)
Pages and Routing
Components
Layouts
Styling (CSS - Global and Modules)
Farewell (and what will come next?)

TLDR: You can skip all the introduction and go straight to Finally Let's Get Started section. Be aware you will lose all my first class jokes. 😂

Thankful Section

Before start, I would like to thank each one of you about the repercussion that the Next.js Trash Course has had so far.😃

I didn't expected that because I am not writing anything very technical here, it is more like "having fun while doing it" than "how to get hired into a FAANG company with this series."
(BTW, if you are expecting for the last one I have very bad news for you: wrong place, comrade. 🤣 🤣 🤣)

At this time I will be covering some of the Gatsby fundamentals and at the end of this series you will be able to build a very simple website using Gatsby. (I hope I will be clear enough to guide you to do so 🤲.)

Before we start our journey, there are some requirements that will make the development process smoother: 🤏

Node / NPM installed in your machine,
Basics of HTML, CSS and JavaScript,
Basics of React and GraphQL,
Your favorite code editor (e.g. VSCode, Papyrus, MS Word, 💁 etc),
Git / GitHub (optional).

That's said, let's get s t a r t e d !

What is Gatsby?

Gatsby is an acronym for "Get All Time Sunbath By Yourself". 😭 It is totally true, believe me, as 2 plus 2 is 354. 😅

Now, seriously, Gatsby is known as a SSG or Static Site Generator, in other words, it builds your site as "static" files which can be deployed easily on different kind of services. 🤯(Ahh, now my joke doesn't look like that bad, right?! 😋 Too late, mate.)

Indeed, for me the phrase above doesn't "say" anything either. I will try to explain it concisely in the following lines. (I wrote "try", doesn't expect too much. 😜)

A SSG usually generates static HTML pages using a combination of data, components, templates etc.

You may be thinking: 💭 ".. But I could do it using the classic frontend stack (HTML, CSS and JS), maybe build a Simple Page Application (SPA) or even reach the same result with a Server Side Rendered website (SSR)".

Answer: It reminds once when I traveled to Colombia and people there used to answer my questions with Sí pero no. that is the equivalent to Yes but not. 🇨🇴 💓

💡 If all these acronyms are somehow confusing you (e.g SSR, SSG, FBI, F4F, TBT etc) I have explained some of them less in depth (yeah, you read it right, It is written "less".) here.

In short, some of the advantages of using Gatsby over the another approaches I have mentioned previously are: 👇

It creates the static pages at build time, not during the deployment,
Those pages are created using React components,
After the first request, the application behaves pretty much as a SPA,
Combines all data sources into a GraphQL layer,
Good for SEO, speed, easy to maintain and update etc.

Next.js (SSR and SSG), for example, has almost all the benefits that Gatsby has but with some exceptions. Its speed is not very optimized when it regards fetching data / rendering (when dealing with large amounts of data, for example.).

I have mentioned Next.js just because, but it applies for all the other examples we have just (shallow) discussed.

Some of them advantages have and some of them don't. (Yoda)

Am I telling that Gatsby is better than the others? By any means!

Just think of frameworks, libraries, programming languages and similars as just tools. You always need to wisely choose between them given the "problem" you intend to solve.

Imagine one scenario where you need a knife to cut your bread and maybe put some butter on it. Would you buy a Katana to do so? It gets the job done but is it really necessary?

If you got my point here we are good to go. If you didn't ... 👇👇

I know I have written a lot before starting the real coding (that I am sure is the reason you are here 👨‍💻 👩‍💻) but I don't like to just copy-paste theories.

By the way, it is just my point of view and it is a Trash Course. So please chill and have some fun while learning something new (If it is the case 😆).

What will we build?

A very simple website with my favorite Super Smash Bros characters. 💪

It is totally fine if you are not a Nintendo fan. Deep inside we know which one is the best games factory on earth, right? 🏆
(PS.: I am not earning a dime from Nintendo, I am just a stupid person doing free marketing for them. 🤦)

As I was saying (~~I am losing the track here~~), our website will look like very much as the screenshots below:

Home Page:
Heroes Page:
Individual Hero:

Finally Let's Get Started

Initial Setup

First of all, we need to have the gatsby-cli package installed globally in our machine.

npm install gatsby-cli

After done that, you can check if it was installed correctly typing:

gatsby --version

If you, for some reason, have a a message like gatsby: command not found after finished the installation process, close your terminal and re open it or open a new tab. (It worked for me. 💌)

We will use a Starter Site" as the bare-bone of our project. It is similar to create-react-app as it holds all the basic settings we need initially.

See more: Gatsby - Hello World

On the terminal, type:
gatsby new gatsby-sample https://github.com/gatsbyjs/gatsby-starter-hello-world

Where:

gatsby new: creates a new gatsby application
gatsby-sample: is the name you want to give to your project. Obviously you can change it to whatever name you wish to.
https://github.com/gatsbyjs/gatsby-starter-hello-world is the url of the starter site we will use, in our case, the hello-world one.

cd gastby-sample && code .. I assume you are using VSCode because of that command code ..

Let's run our local development server and see what is waiting for us there in the browser.

gatsby develop (Note: This script is created by default in the package.json file.)

In your console you should see a message similar to:

You can now view gatsby-starter-hello-world in the browser.
⠀
  http://localhost:8000/

What are you waiting for? Type that address in your browser. ⌨️ 🏃‍♀️💨

If everything went fine during the initial settings process, you should be able to see the so famous Hello world! in your browser.
That is nothing more nothing less than the content of src/pages/index.js rendered in your browser. Perfect, let's keep going.

🗒️ If you have followed my Next.js series you know I have made a "quick walking through the files and folders" but here I won't do that!

Why? No, I am not angry or anything. When we created a new application in the steps before, Gatsby has generated a very well written docs for us. You can find it in the README.md file. 📚 🔥

Pages and Routing

Creating pages and routes it pretty easy with Gatsby. If you have any basic experience using Next.js so you already have mastered it. If you haven't you are going to. 😎

Look at the src/pages directory. There is where we will place all our page components. Every folder inside of the src/pages is equivalent a route and every whatever.js file you create there corresponds to a page.

Examples:

If you have src/pages/devs/index.js directory, the url in our browser will be /devs/,
src/pages/devs/about.js creates a devs/about page.
src/pages/hello/index.js creates the /hello/ route and its home page (index).

Note:

If you name a file as index.js it will be the homepage of whatever route (folder) you have created.
The src/pages/ folder is the root path, for example, the localhost:8080/ in development mode.

I hope it makes sense. Anyway, learning by doing is the motto here. 💪

Let's improve our home page. For now, we will make some changes in the src/pages/index.js file.

import { Link } from "gatsby"
import React from "react"

const Home = () => {
  return (
    <section>
      <div>
        <h1>Smash Bros</h1>
        <h3>The Best Heroes</h3>
        <Link to="/heroes">Check Heroes</Link>
      </div>
    </section>
  )
}

export default Home

Before you even ask about these two lines. 😉

👉 import { Link } from "gatsby" 👈
👉 <Link to="/heroes">Check Heroes</Link> 👈

👇                                                      👇
/** The Link component is intended only for links to pages handled by Gatsby.
 * For links to pages on other domains or pages on the same domain not handled by the current Gatsby site, use the normal <a> element. */

Except for the <Link/> component, the rest is pretty much just React stuff. Now we have a brand new and ugly home page. Nice!

Components

Same as in React, we can create reusable components and, guess what, reuse them through the application. ♽ ♽

Personally I like to place all components inside of a components folder so it is easy to track them.

But as Kurt Cobain used to sing: 🎵"... The choice is yours, don't be late ..." 🎵

As an example, let's create a Navbar component: src/components/Navbar.js. (Navbar)

import { Link } from "gatsby"
import React from "react"

const Navbar = () => {
  return (
    <nav>
      <h1>
        <span>Smash Bros.</span>
      </h1>
      <div>
        <Link to="/">Home</Link>
        <Link to="/heroes">Heroes</Link>
        <Link to="/about">About</Link>
      </div>
    </nav>
  )
}

export default Navbar

Layouts

Creating and using layouts is a nice way to DRY (Oh no, other acronym detected 🥱).

Imagine that we have both a Navbar and Footer components and our intention is to place them in every page of our site. Instead importing them individually in every single page we could make use of a Layout component in order to place them there.

There we go: src/components/Layout.js

import React from "react"
import Navbar from "./Navbar"

export const Layout = ({ children }) => {
  return (
    <div>
      <Navbar />
      <main>{children}</main>
      {/** You could add a footer component here, for instance*/}
    </div>
  )
}

And it is time to import and use the Layout in our Home page component.

src/pages/index.js

import { Link } from "gatsby"
import React from "react"
+ import { Layout } from "../components/Layout"


const Home = () => {
  return (
+    <Layout>
      <section>
        <div>
          <h1>Smash Bros</h1>
          <h3>The Best Heroes</h3>
          <Link to="/heroes">Check Heroes</Link>
        </div>
      </section>
+   </Layout>
  )
}

export default Home

Amazing! We have had some progress here but our Home page is a little bit clunky, isn't it?
What about adding some styling? 💅 Hell, yeah! (Sorry! 🤭)

Styling

There are two simple ways to add styles on Gatsby:

Using the classic and old school (but still loved ❤️) global stylesheets file,
Using CSS modules.

The difference between them you can find in my Next.js Trash Course as well as their usage (Please refer to: Part 6 - Adding Styles 💅).

Global Stylesheets

Let's create the CSS file (src/styles/global-styles.css) that will hold the global styling and also the style of both <Navbar> and <Layout /> components.

* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: rgb(192, 189, 189);
}

:root {
  --pink-text: #b1283f;
}

body,
html {
  min-height: 100%;
}

body {
  background: linear-gradient(
    326deg,
    rgba(96, 110, 106, 1) 0%,
    rgba(17, 149, 163, 1) 51%,
    rgba(7, 8, 89, 1) 100%
  );
  background-repeat: no-repeat;
}

p {
  margin: 20px auto;
  line-height: 1.3rem;
}

nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 50px auto;
}

nav h1 {
  text-shadow: 2px 2px black;
}

nav h1 span {
  color: var(--pink-text);
  letter-spacing: 2px;
  background-color: rgba(0, 0, 0, 0.1);
  padding: 2px 5px;
  border-radius: 7px;
}

nav.links {
  display: inline-block;
  text-align: right;
}

nav a {
  display: inline-block;
  margin-left: 20px;
  font-size: 20px;
  font-weight: bold;
  text-shadow: 2px 2px black;
  padding-bottom: 10px;
  border-bottom: 2px solid transparent;
}

nav a:hover {
  border-color: var(--pink-text);
}

.layout {
  max-width: 1200px;
  margin: 0 auto;
}

🚨 The styles applied in this project were created merely for demonstration. Use it in other projects at your own risk. 🚨

After saving this file, could you see our Navbar shinning? ✨ 🥺

No? Of course not, we have neither added any classes nor imported the CSS file in our components, my friend. 😂

src/components/Layout.js

import React from "react"
import Navbar from "./Navbar"
+ import "../styles/global-styles.css"

export const Layout = ({ children }) => {
  return (
+    <div className="layout">
      <Navbar />
      <main>{children}</main>
    </div>
  )
}

src/components/Navbar.js

import { Link } from "gatsby"
import React from "react"

const Navbar = () => {
  return (
    <nav>
      <h1>
        <span>Smash Bros.</span>
      </h1>
+     <div className="links">
        <Link to="/">Home</Link>
        <Link to="/heroes">Heroes</Link>
        <Link to="/">About</Link>
      </div>
    </nav>
  )
}

export default Navbar

Nice! Now the styles should have applied. Now let's style our Home component but this time using CSS modules.

Create a new css file ➡️ ´src/styles/home.modules.css´ and place the content below:

.header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 40px;
  align-items: center;
  background-color: rgb(0, 0, 0, 0.2);
  padding: 20px;
  margin-top: 100px;
  border-radius: 12px;
}

.header h1 {
  font-size: 4em;
  text-shadow: 2px 2px #0a0303;
  color: var(--pink-text);
}

.header h3 {
  font-size: 2.7em;
  font-weight: 400;
  margin-bottom: 20px;
}

.btn {
  display: inline-block;
  background-color: var(--pink-text);
  border: 1px solid rgb(231, 229, 229);
  padding: 10px 19px;
  border-radius: 10px;
  margin-top: 20px;
  font-size: 1.2rem;
  font-weight: bold;
  text-shadow: 2px 2px #0a0303;
}

.btn:hover {
  background-color: rgb(170, 155, 155);
  border: 1px solid var(--pink-text);
  color: var(--pink-text);
  transform: scale(1.03);
}

The way we apply the styles using CSS modules in our components is slightly different from the conventional one.

src/pages/index.js:

import { Link } from "gatsby"
import React from "react"
import { Layout } from "../components/Layout"
+ import * as styles from "../styles/home.module.css"

const Home = () => {

  return (
    <div>
      <Layout>
+        <section className={styles.header}>
          <div>
            <h1>Smash Bros</h1>
            <h3>The Best Heroes</h3>
+            <Link className={styles.btn} to="/heroes">
              Check Heroes
            </Link>
          </div>
        </section>
      </Layout>
    </div>
  )
}

export default Home

It is pretty straightforward and now way prettier than before I guess. 😃 😃

I have sad news, guys. 😭 😭 It is just that for today.

As in the next parts (probably two more) we will be dealing with GraphQL queries, Gatsby plugins, source files etc I don't want you to get overwhelmed by them right now.

I didn't have time yet to plan in each order I will introduce you those concepts (and I am sorry for that) but I promise I am going to try hard to follow a "development logic" order.

Well, that's it. Thanks a lot for staying with me so far and I hope to see you in the next part! 🙏 🤗

Have a great week everybody!

Stay safe, drink some water and be kind with each other. 💞 💞

Please let me know if something is not very clear so I can try to explain it in an other way.

Regex - underrated or overHATED? Part 3/3

Vinicius Cerqueira Bonifácio — Fri, 19 Mar 2021 16:40:15 +0000

Hi again, dearest devs on earth. 🌎 🌍 🌏

I am back in business, bringing the last part of our Regex series.

Thanks a lot for been following and interacting with the article so far. :) It is really a great pleasure having you all here. 🙇‍♂️

If you are puzzled, please check out the parts 1/3 and 2/3 so this last one may make more sense. (or not 🤷‍♂️)

I am going to cover few more topics and after that I am sure you are good to go and apply your knowledge by yourself. At least it has been my aim since the beginning. 🎯

Take you mug filled with coffee and let's cut to the chase. ☕

Lookahead (Positive and Negative)

The name kind of describe what it does. Now, we only need to know how to "write" it and where to use it. Don't panic! I am here.

Positive Lookahead (?= ) 👍

The positive lookahead operator returns an array if the pattern was found or null instead.

Just to be more concise, when using along with the .match() method, the result will be either [ '', index: 0, input: '<the pattern here>', groups: undefined ] or null.

When working with lookaheads I particularly prefer using .test() than match() because, in the end, we are expecting an answer either "yes" or "not". (true or false)

I know, more gibberish so let's use an example here.

Imagine you have built a login form in your website and you want all the passwords to fulfill a given criteria before accept storing them. Let's say, it must:

have a minimum of 10 characters,
have up to 15 characters, (🙏 always use more if possible 💡)
should include one or more numbers on it.

Of course we could do that validation using plain JavaScript but, trust me, it would be as painful as stubbing your little toe on a corner. 😹 💦

This is why using lookahead comes to our rescue.

// Not good at all tbh 
let goodPassword = "neverput1234"

Our lookahead Regex:

 let ourRegex = /(?=\w{10,15})(?=\D*\d)/

Express explanation: ⏩

(?=\w{10,15}): it will search for alphanumeric characters in a range between 10 and 15.
(?=\D*\d): it will search for zero or more non-numeric characters (\D*) followed by a number (/d).

In order to return a pattern of characters, it must fulfill both requirements above. Think it as the && (and) logical operator.

Boilerplate same from previous parts:

let hasPattern = ourRegex.test(goodPassword);
let patternMatched = goodPassword.match(ourRegex);

console.group('The Result of our comparison');
console.log('Has Pattern?:', hasPattern);
console.log('The Pattern: ', patternMatched);
console.groupEnd();

Should log on console:

The Result of our comparison
  Has Pattern?: true
  The Pattern:  [ '', index: 12, input: 'neverput1234', groups: undefined ]

Negative Lookahead (?! ) 👎

I am sure you already figured out how it works. It is like making the same question but in "negative" way. (⚠️ lack of grammatical jargon detected! 😬)

We have this sample string:

let status = 'people happy people happy people happy';

Your question would be like:
" - Do we have at least one person not happy there?"
💡 I didn't write unhappy because it would be any thing other than happy, for instance, bored. 😅

let ourRegex = /people(?!\shappy)/;

let hasPattern = ourRegex.test(status);
let patternMatched = status.match(ourRegex);

console.group('The Result of our comparison');
console.log('Has Pattern?:', hasPattern);
console.log('The Pattern: ', patternMatched);
console.groupEnd();

The Regex's answer (🤖) would be: "- There is no people other than happy there. (false)"

The Result of our comparison
  Has Pattern?: false
  The Pattern:  null

I hope you have got the point. It is a little tricky indeed. 🧠 💥

Capturing Groups `()`

We can also use parenthesis to capture patterns found in a given group, for example:

In a mixed grouping of chars:

let alleatorySentence = 'Publishment is not a punishment.';
let ourRegex = /P(ublis|unis)hment/gi;

let hasPattern = ourRegex.test(alleatorySentence);
let patternMatched = alleatorySentence.match(ourRegex);

Brings us the following:

The Result of our comparison
  Has Pattern?: true
  The Pattern:  [ 'Publishment', 'punishment' ]

Reusing patterns:

let isnow = 'Snow Snow Snow';
let ourRegex = /((\w+)\s)/g;

In the console:
(Remember to use the provided console.log() boilerplate above)

The Result of our comparison
  Has Pattern?: true
  The Pattern:  [ 'Snow ', 'Snow ' ]

☝️ The last Snow in the original string is not followed by a empty space \s so it was not included in the results.

Search and Replace

This is very interesting. Everybody knows what the replace() method does ...

let activity = "I like sleeping a lot"
let beHealthy = activity.replace(/sleeping/, "surfing and coding")

The beHealthy variable now holds the I like surfing and coding a lot value. 🥰

But how about switching places?

let poorPhrase = 'I and you went to a bootcamp last year.';
let switchRegex = /(\w+)\s(\w+)\s(\w+)/
let slightlyBetter = poorPhrase.replace(switchRegex, '$3 $2 $1')

What have just happened?

In short, our regex have matched those values inside of the parenthesis:

I as $1,
and as $2,
you as $3.

And in that sentence $3 $2 $1 we have switched their places in the string. Cool, isn't it? 😝

🤫 Just pretend you didn't see the lowercase you in the beginning of the phrase. 🤫

And that is it, guys. We have reached the end of the regex series.

I don't remember anything else to add here. Maybe the trim() method but to be honest, it doesn't need any deep explanation.

I would like to thank you all for sticking with me until here and I hope I can bring you more interesting stuff very soon.

Take care everybody and Toodle Pip! 🖖

Regex - underrated or overHATED? Part 2/3

Vinicius Cerqueira Bonifácio — Sun, 14 Mar 2021 14:15:42 +0000

Hi, dear devs.

As I have promised previously I am back with the part 2 of our Regex fundamentals series.

" ... - I never go back on my words, that's my ninja way. " (Naruto Uzumaki)

If you are coming straight from the part 1, thanks for following along. 😉

If it is your first time here, please check out the part 1 because we will use most of the concepts from there along with the new ones. 🏃‍♀️ 🏃‍♂️

So let's not beat about the bush and start our part 2. 😁

💡 I expect you to have the "boilerplate" from part 1 opened and running there. 💡

This is the new value of ourText for now. 👇

// This game really happened in a parallel universe
// I swear I was there :)
let ourText =
  'Gooooooal, Griezmann got the ball over the goalkeeper Gatuso and scored for Granada FC!';

The Plus Operator `+` ➕

It stands for ONE or more characters. In short, a given character which appears one or more times. In this particular example, the o letter.

let ourRegex = /go+/gi;

The result in our console:

The Result of our comparison
  Has Pattern?: true
  The Pattern:  [
    'Goooooo', // Gooooooal
    'go',  // got
    'go',  // goalkeeper
    ]

The Asterisk Operator `*` ✳️

It stands for ZERO or more characters. In short, a given character which appears zero or more times.

let ourRegex = /go*/gi;

The Result of our comparison
  Has Pattern?: true
  The Pattern:  [
    'Goooooo', // Gooooooal
    'G',       // Griezmann
    'go',      // got
    'go',      // goalkeeper
    'G',       // Gatuso
    'G',       // Granada
    ]

The Lazy Matching Operator `?` ❓

As well as the ^ operator, the ? also has more than just one usage but again, once you have understood one of them the other(s) will be Chuck Berry pie of cherry. 😂

let ourRegex = /gr[a-z]*?a/gi;

The Result of our comparison
  Has Pattern?: true
  The Pattern:  [ 'Griezma', 'Gra' ]

⚠️ Without the lazy matching operator ? the result would be slightly different, for instance:

let ourRegex = /gr[a-z]*a/gi;

Would have returned:

The Result of our comparison
  Has Pattern?: true
  The Pattern:  [
    'Griezma', // Griezmann
    'Granada',   // Granada
    ]

Does it make sense? 😃 In the first example it returned the pattern as soon as it had found the first a letter in Granada (Gra) meanwhile in the second one, it checked until the last occurrence of a and then returned.

The `^` Operator (again? 🤯)

And no, it is not a déjà vu.

In this example, it searches for patterns in the beginning of the string,

let ourRegex = /^Griezmann/i;

Let's also have some falsy results because not everything in life is positive. (That is not exactly a bad thing! 🤔)

The Result of our comparison
  Has Pattern?: false
  The Pattern:  null

Because Griezmann is there but not in the beginning of ourText. Right time but wrong place I could say.

The Money Sign Operator `$` 💲

It is used for searching patterns in the ending of the string.

let ourRegex = /FC!$/i;

The Result of our comparison
  Has Pattern?: true
  The Pattern:  [
    'FC!',
    index: 84,
    ...
  ]

Shorthand Char Classes

It sounds more complicated then it actually is. Shorthand is just a different manner to the same thing but, guess what, in a shorter way.

I have created this table just for illustrative purposes.

Normal usage	Shorthand	Representing
[A-Za-z0-9_]	\w	the alphanumerical chars and the underscore
[^a-za-z0-9_]	\W	the non-alphanumerical chars and the underscore
[0-9]	\d	the numerical chars
[^0-9]	\D	the non-numerical chars
[\r\t\f\n\v]	\s	the return, tab, form feed, new line and vertical whitespaces.
[^\r\t\f\n\v]	\S	the non-return, non-tab, so on and so far.

The Curly Braces `{}`

We use the curly braces in order to specify the number of matches of a given character.

Upper and Lower Number of Matches

  let ourRegex = /go{1,6}al/gi;

We are basically telling: please bring me the word goal where the o letter appears at least 1 and up to 6 times. The result is ...

  The Result of our comparison
    Has Pattern?: true
    The Pattern:  [ 'Gooooooal', 'goal' ]

The Specific Lower Number Matches

  let ourRegex = /go{3,}al/gi;

Now we have just specified we want the word goal but only if the o letter appears at least 3 times on it.

An this is what we have got:

  The Result of our comparison
    Has Pattern?: true
    The Pattern:  [ 'Gooooooal' ]

The Exact Number Matches

  let ourRegex = /go{1}al/gi;

And finally we have stipulated that all we want to have is a match where the word goal without any kind of emphasis, in its more pure form. 🥺

And bingo!

  The Result of our comparison
    Has Pattern?: true
    The Pattern:  [ 'goal' ] // goalkeeper

Checking For All or None `?`

Yeah, the ? strikes back. And I don't want to spoil your fun but in the part 3 it will show up again 😨 (twice 🤫).

Anyway, let's say we want to know which one is the correct form of the word color?

✋ No regionalism allowed, guys. It is just an example. ✋

let ourText = 'Is it colour or color the correct one?';

let ourRegex = /colou?r/g;

Answer: both! 🇬🇧 🤝 🇺🇸

The Result of our comparison
  Has Pattern?: true
  The Pattern:  [ 'colour', 'color' ]

And that is the end of the part 2. I really hope you guys have learned (or learnt? 🤔 😹) something so far.

Edited:
The last part of this series probably will be released next Thursday because I can see here, in my crystal ball, my week being very busy. (🔮)

Thanks and enjoy your Sunday wherever you are now! 🙏

I am gonna do the dishes now because there is someone very angry here. 😅

Cheerio! 👋

Regex - underrated or overHATED? Part 1/ 3

Vinicius Cerqueira Bonifácio — Fri, 12 Mar 2021 13:26:13 +0000

Regular Expressions (Regex, RegExp) in JavaScript

Hello, devs.

It's me (~~mario~~) again. Is everything OK with you all? I really hope so.

Today I will bring something very "special"! Interpretation free. 🤣

Who is ready to learn a little bit about Regular Expressions please raise both hands!

🎶 ... Cricket Sounds ... 🎶

The truth is: I didn't pass to the next phase in a job interview so I have decided to punish you, guys. 🤣 😂

No, I am just kidding. All joking aside and being very honest, I am not also a huge fan of Regular Expression because they are quite hard to understand but once you get the fundamentals, they become be very handy. My personal opinion, of course.

Please, paying close attention to this note from Wikipedia

"... Gibberish, also called _jibber-jabber_ or _gobbledygook_, is speech that is (or appears to be) nonsense. ... Example of gibberish: _ojknfauierhngiapfghniauerfhnasdfuiop_ ..."

and now compare with a random example of a regular expression:

^(?=._[!@#$%^&_"\\[\\]\\{\\}<>/\$\$=\\\\\\-\_+~\\:;,\\.€\\|])

What is your conclusion? For me, it seems like my cat had walked on my keyboard. ⌨️ 🐈

No, even better, looks like those old cartoons when they are cursing: 🤬

And this is exactly what you going to do after you fail trying to match a pattern in a string: 🗣️ C-U-R-S-E! 🙊

Luckily, I am here to make you cursing less, at least when it regards to regular expressions. So, let's get started (if you are still here after seeing all this weird symbols. 😉)

Requirements

Node.js (any version is fine I guess),
Your will power 💪,
Optional: if you will following along, I would really recommend you using the nodemon dependency.

(nodemon is a tool that automatically restarts the node application when file changes in the directory are detected.) so you are able to see the changes on the go.

What?

A regular expression is a string of text that allows you to create patterns that help match, locate, and manage text. source: computer hope

I know, more blah blah blah but I guarantee the phrase above will make sense very soon. Stick with me!

Settings

Create a new .js file. (e.g. regexBasics.js)
Did you have installed nodemon as I suggested?
1. (Yes) ✔️: run the following command in your terminal: nodemon + your-file.js. (e.g. nodemon regexBasics.js)
2. (No) ❌: run the following command in your terminal: node + your-file.js. (e.g. node regexBasics.js) ⚠️ You will need to run this command every time you make a change. Are you sure you don't want to install nodemon? You are still on time to do so. 😋

⚠️ I'll focus more in practical examples than the technical explanation, actually. I hope you are OK with that.⚠️

Initial Boilerplate (Explained)

/** This will be the example string where we will find the 'patterns'
I agree: It is indeed a very weird text.*/
let ourText = 'Regex in 2021 is still useful. Would your soul still be able to learn how to use regex yet in 2021? Anyway, the big dog in the bug bag is named bog.';

// This is the place where we will write your regular expressions (Please it is wrapped by "/")
let ourRegex = //**our regex will live here*//;

// In short: the hasPattern variable will store a boolean representing either a match or not.
let hasPattern = ourRegex.test(ourText);

// In short: the hasPattern variable will store the match(es)
let patternMatched = ourText.match(ourRegex);

/** ====================================
    We love console.log() right? XD
========================================*/

// They are here so we are able to see the results in our console.

console.group('The Result of our comparison');
console.log('Has Pattern?:', hasPattern);
console.log('The Pattern: ', patternMatched);
console.groupEnd();

Are you ready ?

After have written the boilerplate, let's (finally) started our journey. The only thing we will change is the value of the ourRegex variable.

Matching Literal Strings

Please type the following, save the file and look at your console.

let ourRegex = /Regex/;

It should print something like this:

The Result of our comparison
  Has Pattern?: true
  The Pattern:  [
    'Regex',
    index: 0,
    input: 'Regex in 2021 is still useful. Would your soul still be able to learn how to use regex yet in 2021? Anyway, the big dog in the bug bag is named bog.',
    groups: undefined
  ]

Shallow Explaining:

Has Pattern?: true because ourText contains the pattern from ourRegex.
The Pattern: [
- Regex is the value of ourRegex
- index: 0 indicates where in the string it was found. (ourText starts with the word Regex so its index is 0)
- input: is the ourText content.
- groups: undefined I am going to explain it later on. 😋

The pipe operator `|`

Think the pipe as the famous OR conditional operator. In JavaScript it is known as ||. (double pipe)

What would you expect if we change ourRegex with this new content? 🤔

  let ourRegex = /bubble|Regex/;

Did you guess it right?
It is exactly the same result from our Matching Literal Strings session.

Here is why: It returns the first value matched.

For example:

let ourRegex = /bubble|Regex/;

returns "Regex" because the pattern "Regex" is there in ourText.

let ourRegex = /Regex|bubble/;

also returns "Regex" for the same reason above.

let ourRegex = /naruto|bubble/;

returns the values false to "Has Pattern?" and null for "The Pattern".

Flags 🏁

It is very important noticing the flags are placed outside of the slashes \

The i flag stands for "ignore case".

let ourRegex = /STILL/i;

It returns Has Pattern?: true because after ignoring case the pattern still is still there. 🥁

The g flag stands for "globally". In other words, it is going to search and return all the matches of ourRegex pattern.

let ourRegex = /still/g;

The result in our console will be:

The Result of our comparison
  Has Pattern?: true
  The Pattern:  [ 'still', 'still' ]

Cool, isn't it? 😎 Now try to combine both flags and let me know your results. :)

📌 Feel free to use this example.

let ourRegex = /regex/gi;

The dot operator `.`

Also called as "wildcard" stands for one UNSPECIFIED character. I have highlighted the "unspecified" word because I know when we reach the + operator you will come back here. I admit I have done it several times before and I still do it. 😅

🚨 Worth noticing we combined it with the g flag, otherwise the value returned would be either null or the first occurency of the pattern.

let ourRegex = /.l/g;

So, in human language (Are we humans?) we are pretty much saying something like:

" - Hey regex, you pretty little thing I don't care what comes before the letter l but bring me it along with the letter."

The result has been explained below.

The Pattern:
[
    'il', // Pattern found on the first "still" word
    'ul', // Pattern found on the "Would" word
    'ul', // Pattern found on the "useful" word
    'ul', // Pattern found on the "soul" word
    'il', // Pattern found on the second "still" word
    'bl', // Pattern found on the "able" word
    ' l'  // Pattern found on the "learn" word (Note there is one " " before " learn")
  ]

The brackets operator `[]`

It is useful for matching multiple possibilities. The only thing we need to do is wrap them (the possibilities) using [ ].
Let's say we want to get all the words which, between the consonants "b" and "g", have the "a", "i" or "u" vowels.

Tldr We want to match the bag, big and bug words but not bog.

🚨 Please, remember to use the g flag, otherwise the result will always be the first match found, in our case, the word big. 🚨

let ourRegex = /b[aiu]g/g;

The result in the console should be something like:

The Result of our comparison
  Has Pattern?: true
  The Pattern:  [ 'big', 'bug', 'bag' ]

[OFF-TOPIC] - Hydration Break 💡🚰

We are doing good, right? Yes we are!

You can skip this part if you want to but only after you hydrate yourself, deal?. (☕ 🥛 🥤)

I just would like to share with you guys what motivates me to write this article. I promise to be concise and don't take too much of your time. 🤞

This crazy moment we are now living globally brought me, along with all the harm which is not worth mentioning here, some free time I didn't have before that is, at least, something good.
I have got time to read my favorite books, became more active writing articles, been learning how to play ice hockey (my home country has ice only inside of our fridges 😹) and last but not least, I could conclude some courses I have started some time ago, for example the CS50, FCC JavaScript Intermediate Algorithms to mention some.

What is my point here?

Regular expressions had an important role in the last two items of my list above. If it was not for knowing the basics of regex, I would probably complete some tasks there using a combination of hundreds .split(), .splice(), .slice(), indexOf(), toLowerCase(), toUpperCase(), for loops, if-else and so on. 🤯

That is to say, in addition to making the code more difficult to read and maintain, it would include unnecessary lines of code to perform "simple" tasks.

Maybe learning regex will help you somewhere somehow. And if it is the case my mission here is accomplished!

Still don´t believe me? You are so obstinately unmoving (a.k.a. stubborn 😅 🤣 😂)

OK, I guess we have had enough hydration time. A few more examples and we are done for the part 1.

The Range Operator `-`

We can also search for patterns given a determined range, for example, if we want to find any of these following words below:

bag, bbg, bcg, bdg, beg, bfg, bgg, bhg and big.

Sorry, I couldn't think in a better example without changing the ourText value.

(~~I have already changed it several times before in order to fit it in our needs.~~ 🤦)

let ourRegex = /b[a-i]g/g;

The result on console:

The Result of our comparison
  Has Pattern?: true
  The Pattern:  [ 'big', 'bag' ]

Basically, when we use the - operator between the a and i letters is the same as doing /b[abcdefghi]g/g but in a more attractive way. 💋

This approach works with numbers as well. I am sure you can guess what /200[3-7]/g would bring back to us if we have a string such as 2000 2001 2003 2004 2005 2006 2007 2008 2009;

Exactly!! 🤓

The Result of our comparison
  Has Pattern?: true
  The Pattern:  [ '2003', '2004', '2005', '2006', '2007' ]

Quick Notes: 🗒️✏️

You can combine them: /[a-zA-Z0-9]/
Case matters: a-z stands for lowercase characters and A-Z for the uppercase ones.
You can combine even more:
- (~~Imagine the case you don't care about the case~~) 🤨 💫
- If the letter case doesn't matter and you want to match patterns globally you could write something like: /c[a-z]t/gi or /c[A-Z]t/gi since the i flag ignores the letter's case.

The Negation Operator `^` (Disambiguation)

The ^ operator has two totally different usages. For now, just focus on this example. Once you have grasped the first, the other one will be easy peasy lemon squeezy. 🍋

I have decided to don't include bog in your list. Why? Because this post will spread around the world and I don't feel comfortable with my imaginary dog 🐶 being noticed by other people. I am really jealous about it.

No idea of what I am talking about? Read the ourText content again. 🔖

Simple, the only thing we needed to do is negate the o letter. How?

let ourRegex = /b[^o]g/g;

Voilà, we have got a brand new result logged in our console: ✔️ 👍

The Result of our comparison
  Has Pattern?: true
  The Pattern:  [ 'big', 'bug', 'bag' ]

And that is pretty much it for the part 1, guys. 🎉 🥳

I will probably release the part 2 either on Saturday evening or on Sunday afternoon but before doing that I would like to ask for something.

And no, I won't ask for money or similar. 😂 💸 So here I go. (Wario´s voice from Mario Kart 64)

Is everything understandable so far?
Should I change the content of ourText string for a new one?
Would you like to have a quick challenge at the end of this series? I was thinking about to provide you a phrase and ask you guys to try to find a pattern on it so we could solve it together and share our different solutions. Also if for any reason you don't want to post your approach in the comments, you could send me it privately and I would be glad to review it and/or help you. 🤝

Don't be shy! Let's make mistakes together. 💪

"Anyone who has never made a mistake has never tried anything new." (Albert Einstein)

Have a nice weekend, everyone!

[EDITED]: The part 2 is already on fire! 🔥 🕶️

The part 3 is also out there.😋

🎶 "... Cheerio, cheerio, toodle pip, toodle pip ..." 🎶

Next.js Trash Course - Part 3/3

Vinicius Cerqueira Bonifácio — Sun, 28 Feb 2021 17:20:59 +0000

Hi again, devs.

Are you having a nice weekend there? I really hope so. 🙏

I should have released this final part yesterday, and my apologies for being late, but finally and after almost 3 months of coldness and darkness we have had few hours of sun shinning here so I decided to enjoy it. ☀️

If you are new here and have no idea what Trash Course means, please check 👇:
HINT: I am not ditching Next.js or anything.

But if you have been following along until here, please receive all my thankfulness. 🏆 So glad in having you aboard.

What will be covered in this part 3/3? 🤩

Static Assets, Custom Page Title and Metadata
Fetching Data
Dynamic Routes

Part 9 - Static assets, custom page title and metadata 📕

We are likely use to static assets (e.g. favicons, images etc.) in web applications. In Next.js we can achieve it by placing them in the public folder.

I grab from the internet an Ash Ketchum image just to use as an example and placed it on the public folder (public/ash.png). We will use it as our logo in the Navbar component.

import Link from 'next/link';
import Image from 'next/image'; // we import it and use below as following

export const Navbar = () => {
  return (
    <nav>
      <div className="brand">
        {/** Here 👇 */}
        <Image src="/ash.png" width={60} height={60} /> 
      </div>
      <Link href="/">Home</Link>
      <Link href="/about">About</Link>
      <Link href="/dev/">Dev</Link>
    </nav>
  );
};

We could also have used the classic img tag if we want to: <img src="/ash.png" alt="ash ket" />.

Some points to consider when using the Next.js Image component are described below:

We need to specify its width and height properties explicitly otherwise an error will be thrown.
It automatically makes the image responsive based on the properties provided.
It utilizes the lazy loading design pattern. it is only loaded when it needs to be rendered, for example, if the image is placed in our footer, Next.js would only load it when scrolling down the page reaches the footer.

Talking about adding metadata and customized title to different pages it can be as simple as the following example in our Home:

import Link from 'next/link';
import Head from 'next/head'; // We import the Next.js' Head component

export default function Home() {
  return (
    <>
      {/** 👇👇👇 */}
      <Head>
        {/** Add the title and metadata for the page as shown below*/}
        <title>Creep Home Page</title>
        <meta name="keywords" content="next,random design,trash course" />
      </Head>
      {/** 👆👆👆 */}
      <div className="container">
        <h1>Hello Next.js</h1>
        <div>
          <Link href="/about">About</Link>
        </div>
      </div>
    </>
  );
}

Remember to wrap all the components using only one parent element otherwise an error about having multiple parent elements will be thrown. I have used empty tags <></> but it could be a React Fragment, a <div> etc.

Part 10 - Fetching Data ⬇️ 💽

Normally in an application the data we fetch comes from the server-side, for example, a database, a web server and so on.

In order to make it simple, let's fetch some mock data from JSON API Placeholder

In a React application we would fetch data using the useEffect hook and the request would be made in the browser.

In Next.js it differs a little bit because all the components are first pre-rendered by the time they reach the browser. In other words we need to fetch the data in advance so the rendered components will have already the data in their templates.

Here is where the Next.js' getStaticProps function comes to the stage. I will use our dev's homepage (pages/dev/index.js) to fetch data from https://jsonplaceholder.typicode.com/users.

In our dev's index page (pages/dev/index.js) we must create the getStaticProps function and export it.

export const getStaticProps = async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/users');
  const data = await response.json();

  return { props: { users: data } };
};

⚠️ DON'T write any code inside of the getStaticProps function that you expect to run in the browser. ⚠️

getStaticProps is a special async function because it runs at build time. Inside of this function we add our fetch requests in order to, guess what?, fetch any data we want to render in our component. 😉

The data we have fetched from the API endpoint is now attached to the props ({ users }) of our component:

export default function Home({ users }) {
  return (
    <div>
      <h1>Hello Devs</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            <p>{user.username}</p>
            <p>{user.email}</p>
          </li>
        ))}
      </ul>
      <Button>Dev Button</Button>
    </div>
  );
}

And that's it. Of course it is just a basic implementation but as a starting point it works pretty well.

I also know I should add some styles to it but this article is becoming longer than I thought so see it as a homework for you. 🤜 🤛

Part 11 - Dynamic Routes 🛣️ 🛣️

It would be nice if from the users list we fetched data we could see more information about a specific user when clicking on it. There are some steps to be followed in order to achieve that but nothing complicated at all.

We need to: ✏️

Generate dynamic routes for each user,
Create a component to hold the user details.

Inside of pages/dev folder we will create a file called [id].js so we can have routes at /dev/id where the id is whatever user's id we pass to the component.

The [id] syntax you saw before is a way to tell: " - Hey Next.js, I will be passing some route parameters to this component so be aware of that.".

Our pages/dev/[id].js component initially will look like the following:

import React from 'react';

const UserInfo = () => {
  return <div>Boom!</div>;
};

export default UserInfo;

If now you go to the route http://localhost:3000/dev/2 or whatever value you pass as a route parameter you should see Boom! rendered there. It is not dynamic yet so let´s make some changes to make it happen.

Let's create a link in every user in the list so when we click on it we use its id as a parameter to fetch his / her individual data. (dev/index.js).

import { Button } from '../../components/Button';
import Link from 'next/link';

export const getStaticProps = async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/users');
  const data = await response.json();

  return { props: { users: data } };
};

export default function Home({ users }) {
  return (
    <div>
      <h1>Hello Devs</h1>
      <ul>
        {users.map((user) => (
          {/** 👇👇👇 */}
          <Link href={`/dev/${user.id}`} key={user.id}>
            {/** LAZY styling 😅 🙈 */}
            <li style={{ cursor: 'pointer' }}>
              <p>{user.username}</p>
              <p>{user.email}</p>
            </li>
          </Link>
        ))}
      </ul>
      <Button>Dev Button</Button>
    </div>
  );
}

And finally we need to make a call to the endpoint using the user's id in order to fetch a user's individual info. (pages/dev/[id].js).

export const getStaticPaths = async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/users');
  const data = await response.json();

  const userPaths = data.map((user) => {
    return { params: { id: user.id.toString() } };
  });

  return {
    paths: userPaths,
    fallback: false,
  };
};

export const getStaticProps = async (context) => {
  const userID = context.params.id;
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/users/${userID}`
  );
  const data = await response.json();

  return { props: { user: data } };
};

const UserInfo = ({ user }) => {
  return (
    <div>
      <h2>User Info</h2>
      <p>username: {user.username}</p>
      <p>email: {user.email}</p>
      <p>
        address: {user.address.street} - {user.address.city}
      </p>
      <p>phone: {user.phone}</p>
      <p>website: {user.website}</p>
    </div>
  );
};

export default UserInfo;

Don't be scary! Most of the content there we are already familiar with. The new concepts I am going to try to explain now.

The getStaticPaths function: ✔️

export const getStaticPaths = async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/users');
  const data = await response.json();

  const userPaths = data.map((user) => {
    return { params: { id: user.id.toString() } };
  });

  return {
    paths: userPaths,
    fallback: false,
  };
};

It is also a special function. It fetches the data and returns an array containing all the static paths of every single user as shown below.

//...
const userPaths = data.map((user) => {
  return { params: { id: user.id.toString() } };
});

return {
  paths: userPaths,
  fallback: false,
};
//...

Remember that all the pages are build at run time. Think that it returns an array like this: [{ /dev/1 }, { /dev/2}, ... , { /dev/10 }].
The fallback: false option, is out of scope for now, but if you remove it will throw an error.

The getStaticProps function (same as before but slightly different): ✔️

export const getStaticProps = async (context) => {
  const userID = context.params.id;
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/users/${userID}`
  );
  const data = await response.json();

  return { props: { user: data } };
};

It has now access to the props returned from the getStaticPaths function through the context object.

From this object it can access the id of each user, fetch their individual information and send it to the UserInfo component (/pages/dev/[1].js).

And that's all, devs! I think we made it, guys! 🏅 🥇 🎉 🍾

Indeed, there is a lot of stuff to be explored but my aim was just to make a quick introduction to Next.js.

I am planning to release an extra post introducing the api folder (pages/api) and also how to deploy our application on Vercel but it depends a lot of how my week goes so I cannot promise anything, unfortunately. 😓

I hope you guys have enjoyed our time together and also have learned something from it. 😃 If you have created your own version using the content of this series, please share with us.

We would be glad to see the results of your hard work. 💪 💎

Thanks a ton and be safe everybody! 🙇‍♂️

Next.js Trash Course - Part 2/3

Vinicius Cerqueira Bonifácio — Fri, 26 Feb 2021 21:46:46 +0000

Hi, dear devs.

Thanks a ton for all the positive comments in the part 1/3 of our Trash Course. 😊

It motivates me to keep writing and researching even more in order to delivery high-quality content (or something close to it 😂) for you guys.

⭐⭐⭐⭐⭐ You all deserve the stars! ⭐⭐⭐⭐⭐

I know it is Friday 📅 so I promise don't waste your time here, ok? 😛

What will be covered in this part 2/3?

Layouts,
Adding styles (global stylesheets and CSS modules),
Creating a customized Not Found page,
Redirecting.

Part 5 - Layouts 🖼️

Let's imagine a scenario where there is a big application and we want to use both the Footer and Navbar components we created previously on it. It is possible to just drop them in every page component we need but besides than just repeating code, that is not something good (DRY), we will also make harder to track these components.

In order to avoid these kind of issues we can create layouts, wrap all the different pages with it and reuse the Layout component through our application.

1- First step is to create the Layout component in the components folder (/components/Layout.js) and import the components that we will use to wrap all the children.

import { Navbar } from './Navbar';
import { Footer } from './Footer';

const Layout = ({ children }) => {
  return (
   {/** We will style it later on :) */}
    <div className="layout-content">      
      <Navbar />
      {children}
      <Footer />
    </div>
  );
};

export default Layout;

2- Second step is to wrap the page component(s) with the Layout we want to apply. In your case, the root component of the application /pages/_app.js.

import '../styles/globals.css'; // SPOILER OF STYLING 👉👈
import Layout from '../components/Layout'; // We import the Layout

function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      {/** We wrap the root component with the layout.*/}
      {/** and pass it as a children of the Layout component*/}
      <Component {...pageProps} />
    </Layout>
  );
}

export default MyApp;

3- Third and the last step is to remove the already imported Footer and Layout Components in our home component pages/index.js. (Otherwise they will be appearing twice. 👯‍♀️)

import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <h1>Hello Next.js</h1>
      <Link href="/about">About</Link>
    </div>
  );
}

And that is it! Now the Layout (contaning Footer and Navbar) is rendering in every single page through our application. I know it is just React stuff but "knowledge does not occupy space". ⚛️ 😃

Part 6 - Adding Styles 💅

The application is running fine but let's be honest here: It is horrible! 👹

As any web application, in Next.js we can also add styles to it. There are n ways to do so as using global stylesheets, styled JSX, inline-style, CSS modules etc. We will learn about two of these methods now.

⚆ Global Stylesheets (`styles/globals.css`)

This file holds the styles we can apply anywhere in your application. It seems logic I know, but I will point out the differences when between it and CSS modules.

Important Note: We are here to learn about Next.js and not how to master CSS styling so please don't judge. 😂

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400&display=swap');

:root {
  --psy-blue: rgb(188, 152, 255);
  --psy-teal: rgb(3, 129, 129);
}

* {
  box-sizing: border-box;
}

html {
  padding: 0;
  margin: 0;
}

body {
  font-family: 'Quicksand', sans-serif;
  background-color: var(--psy-blue);
  color: var(--psy-teal);
}

.container {
  min-height: 65vh;
}

a {
  color: var(--psy-teal);
  text-decoration: none;
}

.layout-content {
  max-width: 900px;
  margin: 0 auto;
}

nav {
  margin: 10px auto 80px;
  padding: 10px 1px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  border-bottom: 1px solid var(--psy-teal);
}

nav a {
  margin-left: 10px;
}

nav .brand {
  margin-right: auto;
}

footer {
  display: block;
  text-align: center;
  padding: 30px 0;
  margin-top: 60px;
  color: var(--psy-teal);
  border-top: 1px solid rgb(3, 78, 78);
}

If you are wondering: "Where the heck I have imported this file into the application?". It was not you, it was already there in the pages/_app.js file. This line, this single line of code ... 👇

import '../styles/globals.css';

⚇ CSS modules

Allows us to write individual styles for each component. After created the stylesheets file we import it in whatever component needs it. Next.js adds some random characters to the end of the classes / selectors names.

Example: in your browser (mouse left-click > "Inspect Element") you should see something like:

 <div className="Home_container__2DbTr">...</div>

The ending __2DbTr indicates the styles will apply only for this component so it avoids CSS conflicts. You can think it as an unique id.

We could have seem an example on the Home component (/pages/index.js) which had its own styles imported from the styles/Home.module.css file, before we had cleaned up it. 😅

import styles from '../styles/Home.module.css';

Quick rules when add styling: ✏️🗒️

CSS Modules must follow this class name convention: ComponentName.modules.css. (e.g Home.modules.css)
How to use style: If you have, for example, in your module.css file something like:

.title a {
  color: #0070f3;
  text-decoration: none;
}

You apply this style by:

import styles from '../styles/Home.module.css'; // 👈 Importing like mentioned previously
import Link from 'next/link';

export default function Home() {
  return (
    <div className="container">
      <h1>Hello Next.js</h1>
      <div className={styles.title}>
        {/** 👆 applying the styles as shown*/}
        {/** Remember the Link component creates an anchor tag in the DOM* 👇/}
        <Link href="/about">About</Link>
      </div>
    </div>
  );
}

Remember again that <Link> in the DOM is just an <a> tag.

🧧 Very Important Note: The selectors must be pure selectors, in other words, you must use class selectors instead element selectors so using the following inside of your CSS module won't work so be aware of that.

a {
  color: #0070f3;
  text-decoration: none;
}

Part 7 - Custom 404 Page ❌😵‍💫

If you try to access a route that doesn't exist (e.g. http://localhost:3000/you-are-amazing), Next.js has a default 404 page. Very often we want to customize our own.
Luckily, doing that is simpler than you may think.
Inside of the pages folder, we only need to create a 404.js file and stylize that component using the techniques we have just learned.

import Link from 'next/link';

const NotFoundPage = () => {
  return (
    <div className="not-found-page">
      <h1>Page Not Found</h1>
      <p>Looks like this page went on vacation.</p>
      <Link href="/">Home</Link>
    </div>
  );
};

export default NotFoundPage;

Now this customized Not Found page replaces the Next.js default one. I have also added some styling just because. 🙈

.not-found-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: rgb(221, 80, 15);
}

.not-found-page h1 {
  font-size: 40px;
  letter-spacing: 1.2rem;
}

.not-found-page p {
  font-size: 26px;
}

.not-found-page a {
  color: rgb(221, 80, 15);
  box-sizing: border-box;
  border: 1px solid rgb(221, 80, 15);
  padding: 2px 20px;
  background-color: rgb(183, 182, 255);
}

.not-found-page a:hover {
  text-decoration: underline;
}

Part 8 - Redirecting ♺

Sometimes for some reason we need to automatically redirect an user to a determined page in the web site.

We can think in a situation where a lost user hit our Not Found Page and we would like to redirect his/her to our Home page, for example. Let's implement redirecting using both the React's useEffect, Next's useRouter hooks and the SetTimeout() javascript function. (You need to admit, it has been a long time since you last used it, right? 🕰️)

So the new version of our 404 page will look like this:

import { useEffect } from 'react';
import { useRouter } from 'next/router'; // we import the router
import Link from 'next/link';

const NotFoundPage = () => {
  const router = useRouter(); // initialize it

  useEffect(() => {
    setTimeout(() => {
      router.push('/'); // and define where to redirect
    }, 3000);
  }, []);

  return (
    <div className="not-found-page">
      <h1>Page Not Found</h1>
      <p>Looks like this page went on vacation.</p>
      <Link href="/">Home</Link>
    </div>
  );
};

export default NotFoundPage;

In short, the useEffect hook will run only in the first rendering ([]) of the component, trigger the setTimeout to redirect to the Home page (router.push('/')) after 3 seconds (3000).

Alright! That's it for the part 2/3. As I have promised in the beginning I wouldn't disturb to much so I tried to make it smooth.

What will be covered in this part 3/3? 🤔

Static Assets, Custom Page Title and Metadata
Fetching Data
Dynamic Routes

Looks like there is just few topics remaining to be covered but believe me, they will consume a lot of your time. My aim here is that at the end of this series you will be able to build your own Next.js applications.

For now, thanks a lot for following along until here. 🙏

If you could learn something new from these posts I am going to be really glad. Also if you have any doubt about what was covered until now, feel free to message me and I am going to try to explain the topic in a more understandable way. 😃

By the way, I answer all the comments. Not as fast as I wish but if you comment in any of my posts I guarantee you will be answered, soon or later. 🦄

You are free to go now! See you in the last part.

Have an amazing weekend and be safe! ❤️‍

Next.js Trash Course - Part 1/3

Vinicius Cerqueira Bonifácio — Thu, 25 Feb 2021 09:30:48 +0000

Hi, devs.

Whatup? I hope everybody is fine and healthy.

I have been very busy lately, also making some (non-sense 🤐) assignments and for those reasons I haven't post anything for a while.

Fortunately (or not), I've found some spare time these last days so I decided to create a Trash Course that is something like a crash course but worst. 😂 This article tries to cover all the basics of Next.js and at the same time to go straight to the point. (with few exceptions 🤦‍♀️🤦‍♂️)!

I hope you guys enjoy it and also can learn something new from here.

🚨 Requirements 🚨

A good understanding of React (and JavaScript of course)
Node.js (10.13 or later version installed)
Your favorite code editor (e.g. VSCode, Notepad 💁 etc)
Git / GitHub (optional)

What will be covered in this part 1/3?

What and Why Next.js,
A Quick Walk-through Folders and Files,
Routes and Pages,
Creating and Reusing Components,
Linking Between Pages.

Next.js

What is Next.js?

It is a React framework that allows creating pre-rendered React applications either as Server Side Rendering (SSR) or Static Site Generation (SSG).

SSR: React components are rendered into HTML pages on the server after a page request comes from the browser.
SSG: Components are rendered into HTML pages at build time. In other words, after deploying the web pages, Javascript bundles it to web.

Why use it?

React without Next.js renders components in the browser (client-side rendering.)

With Next.js, our React components are already rendered into HTML pages by the time they reach the browser, so the application behaves as a SPA (Simple Page Application) and all routes can be handled on the client-side. The benefits of SSR and SSG are improvement of performance because components are pre-rendered, meaning less work in the browser. Also results in better SEO (Search Engine Optimization) than the traditional SPA because the response from the server is a fully rendered HTML page rather than the blank one returned from a regular React application without Next.js.

Initial Settings

In our terminal type:

npx create-next-app nextSample
cd nextSample
code . // if you are using VSCode

Part 1 - A Quick Walk-through Folders and Files

📁 node_modules/: where all the project dependencies are stored.
📁 pages/: where all the different components will be created. The idea is that every page represents its own React component.
- 📝 index.js: The Home page component.
- 📝 _app.js: The Root Component. All the different components are rendered there.
- 📁 api/: for API endpoints.
📁 public/: where all the public assets are stored (e.g. images etc)
📁 styles/: where different CSS files and modules are placed.
📝 .gitignore: a file for version control that ignores, for example, the node_modules folder when pushing your code to GitHub / BitBucket and so on.
📝 package.json and package-lock.json: to keep track of the different project dependencies, creating scripts, the project version etc. e.g. "dev: "next dev" is the script to start a local development server.
📝 README.md: Is the file where you (should) keep important info about the project. It was there where I first wrote this article you are reading now before I publish it.

Starting the development server

npm run dev

If everything went well you should see something like this in your browser (http://localhost:3000/):

That, in short, is the pages/index.js file you saw before during the Walk-Through's section.

import Head from 'next/head';
import styles from '../styles/Home.module.css';

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <a href="https://nextjs.org">Next.js!</a>
        </h1>

        <p className={styles.description}>
          Get started by editing{' '}
          <code className={styles.code}>pages/index.js</code>
        </p>

        <div className={styles.grid}>
          <a href="https://nextjs.org/docs" className={styles.card}>
            <h3>Documentation &rarr;</h3>
            <p>Find in-depth information about Next.js features and API.</p>
          </a>

          <a href="https://nextjs.org/learn" className={styles.card}>
            <h3>Learn &rarr;</h3>
            <p>Learn about Next.js in an interactive course with quizzes!</p>
          </a>

          <a
            href="https://github.com/vercel/next.js/tree/master/examples"
            className={styles.card}
          >
            <h3>Examples &rarr;</h3>
            <p>Discover and deploy boilerplate example Next.js projects.</p>
          </a>

          <a
            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
            className={styles.card}
          >
            <h3>Deploy &rarr;</h3>
            <p>
              Instantly deploy your Next.js site to a public URL with Vercel.
            </p>
          </a>
        </div>
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
        </a>
      </footer>
    </div>
  );
}

Don't be overwhelmed. We are going to clean up this file before starting because your aim is to start from scratch. The new version of the index.js file should look like this:

export default function Home() {
  return (
    <div>
      <h1>Hello Next.js</h1>
    </div>
  );
}

Remember, in Next.js components are pre-rendered before they reach the browser. During the development it is done via server-side rendering (SSR) meaning that the server first renders the components and then sends the HTML to the browser. This happens in each page request from the browser, for example, if we type a different URL it will look for the page component corresponding to that URL, pre-render it and send it to the the browser. We will check about it more in deep later.

Part 2 - Routes and Pages 🛣️

The pages folder is where we create our page components. Each page in Next.js is driven by a React component, for example, for an "About Page" we have an "About Component", for a "Contact Page" a "Contact Component" and so on.

When we create a file inside of the pages folder, for example /pages/contact.js, the component placed there is bond to the route of the same name. The only exception is the index.js file there which corresponds to the root of the domain /.

Let's do it together so it becomes easier to understand. Inside of the pages folder create a new file called about.js and paste the content below inside of it.

const About = () => {
  return (
    <div>
      <h1>About</h1>
      <p>This is our About Page</p>
    </div>
  );
};

export default About;

Now if we visit http://localhost:3000/about we can see there the page component we have just created. Particularly, I see it as an amazing feature since I don't need to care about installing the React Router as I would do in an usual React application.

By the way, It works the same way if you create a sub-folder inside of the pages folder. Next.js will create a sub-route for the application. Nice, isn't it?

Talking about "same way", if you create a sub-folder and inside of it you place an index.js file, it will become the root path of this route. (e.g /pages/dev/index.js when you access http://localhost:3000/dev/ the content of index.js will be rendered). I replicated this exact example so if you are somehow confused you can check it here. 👈 SPOILER ALERT!

Part 3 - Creating and Reusing Components ♻️

Like in regular React applications we can have components that are not only page components such as buttons, navbars, footers and the like, which can be reused through the application if needed.

We don't create those components inside of the pages folder. Of course you can do it but as soon as your application grows one can easily lose track of it.
I usually place reusable components inside of a folder called components at the project root directory. Again, you can do it as you wish.

I've created a very ugly Button component, inside of the components folder, just to serve as an example.

export const Button = ({ children }) => {
  return <button onClick={() => console.log('Clicked!')}>{children}</button>;
};

and imported it on the /pages/dev/index.js as following.

import { Button } from '../../components/Button';

export default function Home() {
  return (
    <div>
      <h1>Hello Devs</h1>
      <Button>Dev Button</Button>
    </div>
  );
}

My apologies for all the examples used in this article. My creativity didn't show up today. 🎭

I also created a Navbar component there because we are going to used it later on when learning more about "linking" and "styling" so stay tuned.

export const Navbar = () => {
  return (
    <nav>
      <div className="brand">
        <h3>Dev Brand</h3>
      </div>
      <a>Home</a> {/** We will change the anchor tags later on*/}
      <a>About</a>
      <a>Dev</a>
    </nav>
  );
};

and don't forget to import is at pages/index.js:

import { Navbar } from '../components/Navbar'; /** Here */

export default function Home() {
  return (
    <div>
      <Navbar /> {/** Also Here */}
      <h1>Hello Next.js</h1>
    </div>
  );
}

Now at http://localhost:3000/ we can see the Navbar component there. If you have a minimal React background there is nothing new here.

As the Navbar I have also created an additional Footer component (/components/Footer.js) because combining them we will get to know how to create "layouts" on Part 2 / 3. Did I mention yet about my lack of creativity today? So don't judge.

export const Footer = () => {
  return <footer>Copyright 2021 | Next.js</footer>;
};

The final version (for now) of our Home page component will be similar to the following:

import { Navbar } from '../components/Navbar';
import { Footer } from '../components/Footer'; 

export default function Home() {
  return (
    <div>
      <Navbar />
      <h1>Hello Next.js</h1>
      <Footer /> 
    </div>
  );
}

It is simple as that to create components and reuse them through the application.

Part 4 - Linking Between Pages

The way we link pages in Next.js is by using a special component called Link component. It adds the ability to do client-side navigation in the browser, it is saying, the different pages are loaded using Javascript and NOT by making new HTML page requests to the server.

After import the Link component from next/link we can use in the application as the Navbar component example shows:

import Link from 'next/link'; // This line

export const Navbar = () => {
  return (
    <nav>
      <div className="brand">
        <h3>Dev Brand</h3>
      </div>
      <Link href="/">Home</Link> {/** usage :)*/}
      <Link href="/about">About</Link>
      <Link href="/dev/">Dev</Link>
    </nav>
  );
};

This is an another example just because we do love examples, don't we? So, in your Home page component (/pages/index.js):

import { Navbar } from '../components/Navbar';
import { Footer } from '../components/Footer';
import Link from 'next/link'; // Again we import the Link Component

export default function Home() {
  return (
    <div>
      <Navbar />
      <h1>Hello Next.js</h1>
      <Link href="/about">About Page</Link>{' '}
      {/** And use it here as following */}
      <Footer />
    </div>
  );
}

We are done for the part 1/3 of this article. In the Next part (pun intended 🃏) I will bring to the table some stuff like:

Layouts,
Adding styles (global stylesheets and CSS modules),
Creating a customized Not Found page,
Redirecting.

Thanks for reading and see you (~~in the Next part~~) later. 😉

Part 2/3 and
Part 3/3 are already on. 🖥️ 🔥

React + Typescript === "headache"

Vinicius Cerqueira Bonifácio — Wed, 09 Dec 2020 19:58:29 +0000

Hi, dear devs.

Long time I haven't written anything here. I hope everybody is doing well.

Before you think I am here making criticism about the Typescript language, you are right! Naah, I am just kidding. My intention is just to describe my experience with the React + Typescript alliance. (it sounds like Star Wars :))

I won't explain in depth what Typescript is because there are tons of articles out there doing it, but for this article is enough knowing that it adds static typing to Javascript. static typing x dynamic typing

Since long ago I have been playing around with TS but actually I have never used it in any of my projects for a reason: TS suppose to be used in big applications, people said.

But why should you also try it?

Like I mentioned, it is widely used in big applications so if you know Typescript you are already one step ahead of other candidates when applying for jobs. 😅

This time I have adventured myself into building a very small application using React + TS and below I related how it was.

PS.: I expect you have at least the basics of React, hooks, CLI, axios and VSCode because I will focus in explaining just the TS features.

The adventure starts here. Enjoy the ride! 🎒

Installation takes several steps:

npm install --global typescript

npx create-react-app ts-react-app --template typescript

npm install --save axios

cd ts-react-app && code .

Our React application has a tsconfig.json file and the components have the .tsx extension.

If you see any difference between your application and mine it is because I have cleaned up and deleted a bunch of unnecessary files for the purpose of this article.

This is the so familiar React App file. Nothing new at the moment.

import React from "react";
import PokemonContainer from "./components/PokemonContainer";

function App() {
  return (
    <div>
      <PokemonContainer />
    </div>
  );
}

export default App;

Inside of the components folder, we have the PokemonContainer.tsx file and its content:

import React, { useState, useEffect } from "react";
import Pokemon from "../interfaces/Pokemon.interface";
import axios from "axios";

const PokemonContainer: React.FC = () => {
  const [pokemon, setPokemon]: [Pokemon, (pokemon: Pokemon) => void] = useState<Pokemon | null>(null);
  const [loading, setLoading]: [boolean, (loading: boolean) => void] = useState<
    boolean
  >(false);
  const [error, setError]: [string, (error: string) => void] = useState(
    "",
  );
  const [inputName, setInputName]: [string, (inputName: string) => void] = React
    .useState("bulbasaur");

  const pokemonRef: React.RefObject<HTMLInputElement> = React.createRef();

  const onSearchHandler = (): void => {
    setInputName(pokemonRef.current.value.toLowerCase());
  };

  useEffect(() => {
    setLoading(true);
    setError("");
    axios.get(`https://pokeapi.co/api/v2/pokemon/${inputName}`, {
      headers: {
        "Content-Type": "application/json",
      },
    })
      .then((response) => {
        setLoading(false);

        setPokemon(
          {
            name: response.data.name,
            base_experience: response.data.base_experience,
            imageURL: response.data.sprites.front_default,
            numberOfAbilities: response.data.abilities.length,
          },
        );
      })
      .catch((error) => {
        setLoading(false);
        setError(error.message);
      });
  }, [inputName]);

  return (
    <div>
      {loading && <div>Loading ...</div>}
      {error && <div>{error}</div>}
      {pokemon &&
        <div>
          <img src={pokemon.imageURL} alt="pokemon-pic" />
          <h3>{pokemon.name}</h3>
          <p>Base EXP: {pokemon.base_experience}</p>
          <p>Abilities: {pokemon.numberOfAbilities}</p>
        </div>}

      <div>Please, type the pokemon name below</div>
      <input type="text" ref={pokemonRef} />

      <button
        onClick={() => onSearchHandler()}
      >
        Search
      </button>
    </div>
  );
};

export default PokemonContainer;

Super Overwhelming, right?!

Indeed but don't be intimidated for that. I am going to give my best to make you understand it. I promise it will worth your time.

Import Section

You don't really need me to explain it, do you? :)

// It imports stuff haha
import React, { useState, useEffect } from "react";
import Pokemon from "../interfaces/Pokemon.interface";
import axios from "axios";

Creating Our Functional Component

const PokemonContainer: React.FC = () => { ... }

The line : React.FC indicates that our component PokemonContainer has the React Functional type (FC).

In Typescript you could define the types like:

let myName :string = "Vinicius"
let myAge :number = 99

but the correct way, in this case would be:

let myName = "Vinicius"
let myAge = 99

because Typescript has the called type inference on it.

(Thanks people in the comments from pointing it out. 😃)

Even tough, you are not only limited to those types you know. You can create your own types and interfaces. types x interfaces

Interface

Coming from the ./src/interface/Pokemon.interface.ts file:

interface Pokemon {
  name: string;
  base_experience: number;
  numberOfAbilities: number;
  imageURL: string;
}

export default Pokemon;

We will fetch data from the Pokemon API using axios. The Pokemon interface we created explicitly defines the types of its fields. It avoids mistakes, for example, if for some reason someone tries to assign a number as the value for the pokemon name.

Typing the useState hooks values

const [pokemon, setPokemon]: [Pokemon, (pokemon: Pokemon) => void] = useState<Pokemon | null>(null);
  const [loading, setLoading]: [boolean, (loading: boolean) => void] = useState<boolean>(false);
  const [error, setError]: [string, (error: string) => void] = useState("");
  const [inputName, setInputName]: [string, (inputName: string) => void] = React.useState("bulbasaur");

It looks more complicated than it really is. It is known that the useState hook returns the state and a function to change this state.
As an example I will explain the const [pokemon, setPokemon]: [Pokemon, (pokemon: Pokemon) => void] = useState(null); statement. The explanation though applies to all the useState cases in this file.

[pokemon, ...] is the state from the hook so its type is pokemon: Pokemon.
[..., setPokemon] is the function responsible to change the state so it is type is (pokemon: Pokemon) => void. The void type indicates that the function doesn't return any value, it only sets the new state of the pokemon.
useState(null); indicates that the state the pokemon hook will receive is either of Pokemon or null types. The | (pipe) is equivalent an OR (||) condition. Conditional Types

Create Ref

const pokemonRef: React.RefObject<HTMLInputElement> = React.createRef();

I had no idea about how to typing a ref before (and believe you won't like to memorize all the existent types) but one cool feature is the Typescript Intellisense that suggests how you should type "stuff". It is not 100% accurate (yet) but it helps a lot.

Last line of explanation 🏆 🎈 🎉 🍾

setPokemon({
            name: response.data.name,
            base_experience: response.data.base_experience,
            imageURL: response.data.sprites.front_default,
            numberOfAbilities: response.data.abilities.length,
          },
        );

It is not directly related to Typescript. I just want you to try something: assign the value of base_experience to name and vice-versa to see what happens. 😃

Correction [EDITED x 2]

Thanks a lot for you guys that interacted with my article.
Our colleague stereobooster created one amazing version of the same example that you can check below and also in the comments. 😊

import React, { useState, useEffect } from "react";
import axios from "axios";

type Pokemon = {
  name: string,
  base_experience: number,
  numberOfAbilities: number,
  imageURL: string
}

type UseGet<Data> = {
    data: Data | undefined,
    loading: boolean,
    error: string  | undefined
}

const useGetPokemon = (name: string) => {
  const [state, setState] = useState<UseGet<Pokemon>>({
    loading: false,
    error: undefined
    data: undefined,
  });

  useEffect(() => {
    const source = axios.CancelToken.source();
    const cancelToken = source.token;
    setState({
      loading: true,
      error: undefined,
      data: undefined,
    });
    axios.get(`https://pokeapi.co/api/v2/pokemon/${name}`, {
        cancelToken,
        headers: { "Content-Type": "application/json" },
      }).then(({ data }) => {
        setState({
          loading: false,
          error: undefined,
          data: {
            name: data.name,
            base_experience: data.base_experience,
            imageURL: data.sprites.front_default,
            numberOfAbilities: data.abilities.length,
          },
        });
      }).catch((error) => {
        if (axios.isCancel(error)) {
          setState({
            loading: false,
            error: error.message,
            data: undefined,
          });
        }
    });
    return () => source.cancel();
  }, [name, setState]);

  return state;
}

const PokemonSearch: React.FC = () => {
  const [inputName, setInputName] = React.useState("bulbasaur");
  const { data: pokemon, error, loading } = useGetPokemon(inputName);
  // ...
}

My Conclusion

Typescript is for sure a great language and it can avoid typing problems when developing applications already in the development phase. Now I see clearly why big companies have been adopting it in their projects. Spotting problems as soon as they come to existence can save lots of money and resources.

On the other hand, it makes the development process slower if compared with the conventional Javascript mode. It also confuses a lot the newcomers (like me) that already have a background developing with Javascript.

I will definitely not choose TS in my personal projects given their size but as I mentioned previously, it worth having this knowledge.

PS.: This article just reflects my personal opinion about using Typescript and barely scratches the surface of it.

If you really want to learn it, the TS Official Documentation is the right place for you to go. 🗒️

Also here, as suggested in the comments React TypeScript Cheatsheet. 🙌

Thanks for reach the end and Happy Hacking! 🙏

Source code only for one's sake. here. 💻

Javascript Pocket Notes

Vinicius Cerqueira Bonifácio — Tue, 13 Oct 2020 12:32:42 +0000

Hi, Devs.

I hope my post finds you all well and health. 🙏

I have been working in some side-projects using the MERN stack plus GraphQL and often my mind forgets the most basic stuff so I decided to write it down somewhere so I have some reference when I have those blackout moments.

In short, my application has books, authors and users collections stored on MongoDB, my backend fetches data from there using GraphQL queries and mutations and finally React renders the data fetched from there in its appropriated components.

I find myself where I wanted to render all books genres (without the duplicated ones) as buttons and filter the books listening those buttons events.

Simple task indeed but I always overthink stuff because actually there are reasons for it when you are developing middle/large applications.

In the end, the solution took me one line of code. 🤦 Of course when implementing it in my React component I will code a little bit more but still.

Let's pretend that I have already fetched the data from MongoDB and it looks like this:

let books = [{
  title: "Eloquent Javascript",
  author: "Marijin Haverbeke",
  genres: ["programming", "web"]
},
{
  title: "Python For Data Analysis",
  author: "Wes McKinney",
  genres: ["coding", "finances" , "programming"]
}]

So, in order to give the "label" for the button, I should first have all genres and eliminate somehow the repeated entries:

/** It joins all genres first and after that splits the entries so we have only one array as a result of the map*/ 
let allGenres = books.map(book => book.genres).join(",").split(",")

/** It converts an array of duplicates to a Set. 

Remember that creating a new Set will implicitly remove all the duplicated elements.

And the spread operator converts the set back to an array. */
let noRepeatedGenres = [...new Set(allGenres)]

Cool, right?
But once we understood the concepts why not go for a "Hot Shot"?
There'll go!

/** Superb*/
let allGenres = [...new Set(books.map(book => book.genres).join(",").split(","))]

Having the array properly filtered allows me to finally implement it on my React component.👨‍💻 🙌

I know this post won't change your life at all but as I said before, it can be useful as a future reference if you are struggle with this kind of tasks which at least, in my case, I don't do that often.

Thanks for reading! 🎉

PS:(If you want me to publish more posts like this please let me know in the comments below.)

Building a restful API using Deno (Part2)

Vinicius Cerqueira Bonifácio — Sun, 07 Jun 2020 14:51:32 +0000

Hi again, dear devs.

Hoping that is everything fine with each one of you. :)

Welcome to the Part 2 of our series. It supposed to be the last one but I didn't expected I would take that much explaining the controllers. My sincere apologies about that 🙏 but I do prefer posting content in a way easy to understand.

Just to recap, we already created both server and app files, separated in their own modules but our project doesn't do anything yet because there are neither routes nor controllers.

I will use my approach creating and implementing them because that it is the logic order that I understand better (it is neither the only one nor the best).

So, take your coffee mug, open your favorite lo-fi hip-hop Spotify's playlist and letys getty ztarted !

app.js

Let's import the routes in our app.js file so our app can make use of them.

1 import { Application } from "https://deno.land/x/oak/mod.ts";
2 import router from "./routes/routes.js";
3
4 const app = new Application();
5
6 app.use(router.routes());
7
8 /** You can set the allowed methods here*/
9 app.use(router.allowedMethods());
10 
11 export default app;

Basically, we import our routes from ./routes/routes.js on line 2 (the file doesn´t exist yet) and explicitly set the app to use the routes (on line 6). Also we set the router to allow all methods allowMethods() (on line 9).
As commented in the code, we can choose which methods we allow our application to run, for instance, we could have restricted your app to use the delete method.

routes.js

Some developers declare the routes and controllers together in the same file (generally inside of the controllers file) but personally I prefer to divide them in their own modules.
Let's take a look in the code below:

NB: As you have been noticed, routes.js file will be under the "./routes/" directory. Obviously you can put it anywhere you wish but please remember to correct the importing path.

1  import { Router } from "https://deno.land/x/oak/mod.ts";
2  import {
3   getBooks,
4   getBook,
5   addBook,
6   removeBook,
7   updateBook,
8  } from "../controllers/books.js";
9
10 const baseURL = "/javascript/books";
11 
12 const router = new Router();
13 
14 router
15   .get(`${baseURL}`, getBooks)
16   .get(`${baseURL}/:id`, getBook)
17   .post(`${baseURL}`, addBook)
18   .delete(`${baseURL}/:id`, removeBook)
19   .put(`${baseURL}/:id`, updateBook);
20
21 export default router;

Line 1: We imported the oak router middleware for Deno.

Line 2: We imported the controllers from book.js file. (They don't exist yet)

Line 10: We created a base url to avoid typing it every time we create an endpoint. (Programmers are lazy, do you remember it? :) )

Line 12: We created a new router and assigned it to the router variable. (Sorry for commenting the obvious)

Line 14: We defined a set of request methods with their respective endpoints which will interact with the incoming HTTP requests. (Wow, it sounded fancy I guess.)

Line 21: Remember that previously in the app.js file we imported the routes without even had created the route.js file yet? (This time I swear I won't comment the obvious again 😛.)

Well done! We have just finished creating our routes. Next step, the so-called controllers.

books.js

The file will be placed on "/controllers/" directory.

SPOILER ALERT: such an overwhelming file at first glance but don't let it intimidate you. Those functions there follow basically the same concept.

import books from "../data.js";
import { v4 } from "https://deno.land/std/uuid/mod.ts";

// METHOD: GET
// ROUTE: /javascript/books
// DESCRIPTION: Brings all books
const getBooks = ({ response }) => {
  response.status = 200;
  response.body = books;
};

// METHOD: GET
// ROUTE: /javascript/books/:id
// DESCRIPTION: Brings book by id
const getBook = ({ params, response }) => {
  const book = books.filter((book) => book.id.toString() === params.id);

  if (!book.length) {
    response.status = 404;
    response.body = { message: `Book with "id: ${params.id}" not found.` };
    return;
  }

  response.status = 200;
  response.body = book;
  return;
};

// METHOD: POST
// ROUTE: /javascript/books/
// DESCRIPTION: Adds a new book
const addBook = async ({ request, response }) => {
  const body = await request.body();

  if (!request.hasBody) {
    response.status = 400;
    response.body = {
      message: "Something went wrong. Try add a new book later.",
    };
    return;
  }

  const book = body.value;
  book.id = v4.generate();
  books.push(book);

  response.status = 201;
  response.body = book;
};

// METHOD: DELETE
// ROUTE: /javascript/books/:name
// DESCRIPTION: Removes a book from the list
const removeBook = async ({ params, response }) => {
  /** Returns a new array filtered without the book with id equals to params.id */
  const booksFiltered = books.filter((book) =>
    book.id.toString() !== params.id.toString()
  );

  /** If length of both arrays are equals we assume that no deletion happened so
   * we return as response that the book was note found in the list */
  if (booksFiltered.length === books.length) {
    response.status = 400;
    response.body = {
      message: `Book with ID ${params.id} Not Found On Books List`,
    };
    return;
  }

  response.body = {
    message: "Successfully Deleted",
    booksFiltered,
  };

  response.status = 200;
};

// METHOD: PUT
// ROUTE: /javascript/books/:name
// DESCRIPTION: Updates a book from the list
const updateBook = async ({ params, request, response }) => {
  /** Filters the books list using the params.id  */
  const bookToBeUpdated = books.filter((book) =>
    book.id.toString() === params.id.toString()
  );

  const body = await request.body();
  /*  Destructures the request body to update only the sent book fields*/
  const { title, author, url } = body.value;

  /** If after filter the books' array a book was found, updates it */
  if (bookToBeUpdated.length) {
    title ? bookToBeUpdated[0].title = title : bookToBeUpdated[0].title;
    author ? bookToBeUpdated[0].author = author : bookToBeUpdated[0].author;
    url ? bookToBeUpdated[0].url = url : bookToBeUpdated[0].url;

    response.status = 200;
    response.body = {
      message: `Book ${title} Sucessfully Updated`,
      bookToBeUpdated,
    };

    return;
  }

  /** If No Book Was Found Returns proper status code and message*/
  response.status = 400;
  response.body = {
    message: `Book With ID ${params.id} Was Not Found On Book List`,
  };
};

export { getBooks, getBook, addBook, removeBook, updateBook };

Thinking about closing the tab already? Don't do it now. I'll teach you something that I learned from my past experiences and it may help you in your future projects. I call it:

Lego Driven Development

You didn't expected for that, right? 😂

But, what the heck does it mean, man? Please, allow me to explain it. Look to the image below:

It is amazing, isn't it? Well, it was built using pieces like these, one at time.

The bottom line is that when something looks like too complex, try to break it into small pieces.

books.js but this time broken in pieces

Brick one (The GET all books method)

1 import books from "../data.js";
2 import { v4 } from "https://deno.land/std/uuid/mod.ts";
3
4 // METHOD: GET
5 // ROUTE: /javascript/books
6 // DESCRIPTION: Brings all books
7 const getBooks = ({ response }) => {
8   response.status = 200;
9   response.body = books;
10 };
11 ...

Line 1: We imported the file where our hard-coded data is stored. (Guess what? We didn't created it yet 😂 but we will very soon)

Line 2: We imported a middleware to generate random ids (We'll use it later on next episode)

Lines 4, 5 , 6: I have been following the good practice of always describe functions. In this case, which HTTP method it uses, which endpoint it has and what it does. Believe me, it can save you even hours when reading someone's else code.

Lines 7, 8, 9, 10: It doesn't differ too much from a simple controller function if you are used to develop REST APIs. Just for one tiny detail that is worth pointing out: ({response})

In short, controller functions receive a context object as standard parameter, for example:

const getBooks = (context) => { 
  // ...
 })

We just destructured it using the destructuring assignment syntax.

Lines 7, 8, 9, 10: When the application reaches this endpoint "/javascript/books" the response body will be the status code 200 (The request has succeeded) and the books from our hard-coded data. Talking about that, let's create it now so we can finally see something in the browser.

data.js

In the root of your project, you can copy & paste the content below. (By the way, this is the only moment you are allowed to copy & paste. 😎)

let books = [
  {
    id: 1,
    title: "Secrets of the JavaScript Ninja",
    author: "John Resig",
    url: "https://johnresig.com/",
  },

  {
    id: 2,
    title: "JavaScript: The Good Parts",
    author: "Douglas Crockford",
    url: "https://www.crockford.com/blog.html",
  },
  {
    id: 3,
    title: "You Don't Know JS Yet",
    author: "Kyle Simpson",
    url: "https://youdontknowjs.com",
  },
  {
    id: 4,
    title: "Eloquent JavaScript",
    author: "Marijn Haverbeke",
    url: "https://eloquentjavascript.net/author",
  },
  {
    id: 5,
    title: "Javascript For Kids",
    author: "Chris Minnick",
    url: "http://www.chrisminnick.com/blog/",
  },
];

export default books;

Alright! Now you can import the data.js in your controllers file, start the Deno server using the appropriated flags (Do you still remember it?) ...

deno run --allow-read --allow-net

... and check your browser at. It should render all the books from the data.js file.

As I said in the beginning, I will break this part in one more piece so I can explain calmly the remaining controllers methods (GET by id, PUT, DELETE and POST).

Thanks for reading and I hope to have you again on next episode. :)

NB: You can find the previous posts from those series in the links below: 👇🏽

Deno is not here to replace Node

Building a restful API using Deno (Intro)

Building a restful API using Deno (Part1)

DEV Community: Vinicius Cerqueira Bonifácio

Webpack FUNdamentals

Webpack 🕸️ 📦

Project Bare-bones 💀 🦴

Installing the Webpack package

Webpack Configuration File

Defining the build script (package.json) 🏗️

Loaders 🔄

🥤 <Hydration Time> 🥤

🥤 </Hydration Time> 🥤

Transpilers 🤔 ⁉️

Adding CSS 💅

Webpack Development Server 🖥️ ⬆️

Error Handling 🚫

Minifying the source code in production

Conclusion, Frenzies and Farewell 💭💡👋

Ruby Basics

Is Ruby A Dying Language?

Is it worth learning Ruby in 2021? 💎

⚠️ Disclaimer ⚠️

Ruby in a nutshell 💎 👉 🌰 🐚

Commenting ✍️

print / puts methods 🖥️

Variables 📦

Data Types 😎 😍 😈 👻 💩

Some (Useful) String Methods 💪

Some Math Methods 🔢🔣

Arrays 📚

Hashes #️⃣

Methods 📐📏

Conditionals (if, else and elsif)

Case Expressions 💼

While Loops ↪️

Loops ↩️

Classes And Objects 📝 🛋️

Object / Class Methods

Class Inheritance (Shallow Explanation)

Modules 🛒

Error Handling ⛔

Happy Hour Moment 🍹🍻🥤🍷

Skip this part 📚 📖

Conclusion and Final Thoughts 🔚 💡

Gatsby - Trash Course [1/3]

What will be covered in this part?

Thankful Section

What is Gatsby?

What will we build?

Finally Let's Get Started

Initial Setup

Pages and Routing

Components

Layouts

Styling

Please let me know if something is not very clear so I can try to explain it in an other way.

Regex - underrated or overHATED? Part 3/3

Lookahead (Positive and Negative)

Capturing Groups ()

Reusing patterns:

Search and Replace

Regex - underrated or overHATED? Part 2/3

The Plus Operator + ➕

The Asterisk Operator * ✳️

The Lazy Matching Operator ? ❓

The ^ Operator (again? 🤯)

The Money Sign Operator $ 💲

Shorthand Char Classes

The Curly Braces {}

Checking For All or None ?

Regex - underrated or overHATED? Part 1/ 3

Regular Expressions (Regex, RegExp) in JavaScript

Requirements

What?

Settings

Initial Boilerplate (Explained)

Are you ready ?

Matching Literal Strings

Shallow Explaining:

The pipe operator |

Flags 🏁

The dot operator .

Defining the build script (`package.json`) 🏗️

🥤 `<Hydration Time>` 🥤

🥤 `</Hydration Time>` 🥤

`print` / `puts` methods 🖥️

Conditionals (`if`, `else` and `elsif`)

Capturing Groups `()`

The Plus Operator `+` ➕

The Asterisk Operator `*` ✳️

The Lazy Matching Operator `?` ❓

The `^` Operator (again? 🤯)

The Money Sign Operator `$` 💲

The Curly Braces `{}`

Checking For All or None `?`

The pipe operator `|`

The dot operator `.`

The brackets operator `[]`

The Range Operator `-`

The Negation Operator `^` (Disambiguation)

⚆ Global Stylesheets (`styles/globals.css`)