DEV Community: Ernesto Herrera

Laravel Best Naming Conventions for APIs

Ernesto Herrera — Tue, 28 Feb 2023 03:30:32 +0000

In Laravel 8, there are some conventions that are widely accepted for naming APIs. Following these conventions can make your code more maintainable and easier to understand for other developers. Here are some of the best naming conventions for APIs in Laravel 8:

Route Names

For route names, it is recommended to use a verb followed by a noun. This approach is simple, yet effective, because it accurately describes what each route does. It also makes it easy to generate URLs for each route. For example, GET /users would have a route name of users.index. Here are some examples:

GET /users => users.index
GET /users/create => users.create it is used to show a form that allows to create a new user.
POST /users => users.store
GET /users/{id} => users.show
GET /users/{id}/edit => users.edit
PUT/PATCH /users/{id} => users.update
DELETE /users/{id} => users.destroy

It is also a good practice to group related routes using route prefixes. This technique can help you organize your routes and make them easier to read. For example, you might group all of your user-related routes under a /users prefix:

Route::prefix('users')->group(function () {
    Route::get('/', 'UsersController@index')->name('users.index');
    Route::get('/create', 'UsersController@create')->name('users.create');
    Route::post('/', 'UsersController@store')->name('users.store');
    Route::get('/{id}', 'UsersController@show')->name('users.show');
    Route::get('/{id}/edit', 'UsersController@edit')->name('users.edit');
    Route::put('/{id}', 'UsersController@update')->name('users.update');
    Route::delete('/{id}', 'UsersController@destroy')->name('users.destroy');
});

Controller Names

For controller names, it is recommended to use a plural noun followed by the Controller suffix. This approach is consistent with the idea of using plural nouns for resources, and it accurately describes what each controller does. For example, a controller for managing users would be named UsersController. Here are some examples:

UsersController
PostsController
CommentsController
TagsController
CategoriesController

Model Names

For model names, it is recommended to use a singular noun. This approach accurately reflects the fact that each model represents a single entity in your application. It also makes it easy to generate model instances. For example, a model for managing users would be named User. Here are some examples:

User
Post
Comment
Tag
Category

Resource Names

For resource names, it is recommended to use a plural noun. This approach makes it easy to understand that each resource represents a collection of entities, rather than a single entity. It also makes it easy to generate URLs for each resource. For example, a resource for managing users would be named Users. Here are some examples:

Users
Posts
Comments
Tags
Categories

Database Table Names

For database table names, it is recommended to use a plural noun. This approach is consistent with the idea of using plural nouns for resources. It also makes it easy to understand that each table represents a collection of entities, rather than a single entity. For example, a table for managing users would be named users. Here are some examples:

users
posts
comments
tags
categories

API Versioning

Versioning your API is important to ensure that changes do not break existing clients. There are various ways to version your API, but one popular method is to use version numbers in your URLs. For example, /v1/users would be the URL for version 1 of the users API. Here are some examples:

/v1/users
/v2/users
/v1/posts
/v2/posts

Another approach to API versioning is to use custom HTTP headers. This approach can be useful when you do not want to modify your URLs. For example, you might use a custom X-Api-Version header to specify the API version:

GET /users HTTP/1.1
Host: example.com
X-Api-Version: 1

HTTP Response Codes

HTTP response codes are an important part of any API. They provide information about the result of the request and help clients understand what happened. Here are some common HTTP response codes and what they mean:

200 OK - The request succeeded.
201 Created - The request succeeded and a new resource was created.
204 No Content - The request succeeded, but there is no response body to return.
400 Bad Request - The request was malformed or invalid.
401 Unauthorized - The request requires authentication.
403 Forbidden - The authenticated user does not have access to the requested resource.
404 Not Found - The requested resource does not exist.
422 Unprocessable Entity - The request was well-formed, but was unable to be followed due to semantic errors.
500 Internal Server Error - A generic error occurred on the server.

Pagination

If you are returning a large number of resources, it is important to paginate your results. Pagination allows clients to retrieve resources in smaller, more manageable chunks. Laravel provides built-in support for pagination, making it easy to implement in your APIs. Here are some examples of how to paginate your results:

GET /users?page=1&per_page=10
GET /posts?page=2&per_page=5

Authentication

Authentication is an important part of any API. It allows you to restrict access to certain resources and ensure that only authorized clients can access your API. Laravel provides built-in support for various authentication mechanisms, such as API tokens and OAuth2. Here are some examples of how to use these mechanisms:

API Tokens

API tokens are a simple way to authenticate clients. Each client is issued a unique token that they use to authenticate their requests. Laravel provides built-in support for API tokens, making it easy to implement in your APIs. Here are some examples of how to use API tokens:

// Generate a new token for the user
$token = $user->createToken('token-name')->plainTextToken;

// Authenticate a request using the token
$response = $client->get('/api/user', [
    'headers' => [
        'Authorization' => 'Bearer ' . $token,
        'Accept' => 'application/json',
    ],
]);

OAuth2

OAuth2 is a more complex mechanism for authenticating clients. It involves a series of redirects and exchanges of tokens between the client and the server. Laravel provides built-in support for OAuth2, making it easy to implement in your APIs. Here are some examples of how to use OAuth2:

// Generate an authorization URL for the client
$url = $provider->getAuthorizationUrl();

// Redirect the client to the authorization URL
return redirect($url);

// Handle the callback from the provider
$token = $provider->getAccessToken('authorization_code', [
    'code' => $request->code,
]);

// Authenticate a request using the access token
$response = $client->get('/api/user', [
    'headers' => [
        'Authorization' => 'Bearer ' . $token->getToken(),
        'Accept' => 'application/json',
    ],
]);

Error Handling

Error handling is an important part of any API. It allows you to provide meaningful error messages to clients when something goes wrong. Laravel provides built-in support for error handling, making it easy to implement in your APIs. Here are some examples of how to handle errors in your APIs:

// Throw an exception when a resource is not found
if (!$user) {
    throw new NotFoundHttpException('User not found.');
}

// Return a JSON response when a validation error occurs
if ($validator->fails()) {
    return response()->json([
        'message' => 'The given data was invalid.',
        'errors' => $validator->errors(),
    ], 422);
}

// Return a JSON response when an unexpected error occurs
if ($exception instanceof Exception) {
    return response()->json([
        'message' => 'An unexpected error occurred.',
    ], 500);
}

Ten Modern Layouts 🚀 [Part 3]

Ernesto Herrera — Sat, 18 Feb 2023 02:38:02 +0000

This is the third part and final of the "Ten Modern Layouts"
If you aren't read the part 1, here you can read it.
If you aren't read the part 2, here you can read it.

#7 RAM (Repeat, Auto, MinMax): grid-template-columns(auto-fit, minmax(, 1fr))

In this seventh example, we'll take what we've learned about creating flexible layouts and add automatic placement of child elements. The result will be a responsive layout that adapts to different screen sizes and device orientations.

To achieve this, we'll use a combination of CSS grid properties such as "repeat", "auto-fit" or "auto-fill", and "minmax()". These properties will allow us to define a flexible grid that automatically adjusts to the available space and distributes the child elements evenly. We can remember these properties using the acronym RAM, which stands for Repeat, Auto-fit/fill, and Minmax.

The key advantage of this approach is that it saves us from having to manually calculate and set the size and position of each child element. Instead, we let the grid handle the layout, which makes it easier to maintain and update in the future.

HTML

<div class="parent">
      <div class="child-1">My div 1</div>
      <div class="child-2">My div 2</div>
      <div class="child-3">My div 3</div>
      <div class="child-4">My div 4</div>
</div>

CSS

 .parent {
  display: grid;
  height: 100vh;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.child-1 {
  display: grid;
  place-items: center;
  background: papayawhip;
}

.child-2 {
  display: grid;
  place-items: center;
  background: blueviolet;
}

.child-3 {
  display: grid;
  place-items: center;
  background: greenyellow;
}

.child-4 {
  display: grid;
  place-items: center;
  background: whitesmoke;
}

#8 Line Up: justify-content: space-between

In the next layout example, we'll use the CSS property justify-content: space-between to position child elements in a Flexbox container. This property distributes the remaining space between the first and last elements of the container, while keeping them anchored to the edges of the box. The middle elements are then spaced evenly between the endpoints.

We'll apply this technique to a set of cards that contain a title, a description, and an image block, arranged in a vertical column using the flex-direction: column property. This will create a visually pleasing layout where the title and image block are aligned with the top and bottom of the card, and the description is centered in between.

By mastering this technique, you can create elegant and dynamic layouts that adapt to different screen sizes and orientations. Try experimenting with different values and settings to see how they affect the positioning and spacing of your child elements.

HTML

<div class="parent">
      <div class="card">
        <h1>Card 1</h1>
        <p>This is a medium description.Share it.</p>
        <div class="visual"></div>
      </div>
      <div class="card">
        <h1>Card 2</h1>
        <p>
          This is a long description, thanks for read this post.
        </p>
        <div class="visual"></div>
      </div>
      <div class="card">
        <h1>Card 3</h1>
        <p>This is a short description</p>
        <div class="visual"></div>
      </div>
    </div>

CSS

 .parent {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
}
.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: papayawhip;
  padding: 1rem;
}

.visual {
  height: 100px;
  width: 100%;
  background: paleturquoise;
  margin: 0.5rem 0;
}

#9 Clamping My Style: clamp(< min >, < actual >, < max >)

In this example, we'll use the CSS function clamp() to set a range of sizes for an element, including a minimum and maximum value, as well as an actual size. This technique allows us to create more flexible and readable layouts that adapt to different screen sizes and device resolutions.

For instance, we can use the clamp() function to set the width of an element to 50% of its parent, with a minimum of 23 character units and a maximum of 46 character units. This means that the element will stay centered in its parent and won't become too narrow or too wide, regardless of the viewport size.

We can also use clamp() to set the font-size of text elements, such as headlines, to a range of values that scale with the viewport width. This way, the text will be readable on all devices, whether it's a small phone screen or a large desktop monitor.

It's worth noting that the clamp() function is not supported in all modern browsers, so it's important to have fallback options and test your layout on different devices and browsers. Nonetheless, it's a powerful and versatile tool that can help you create more responsive and legible designs.

HTML

 <div class="parent">
      <div class="card">
        <h1>Card</h1>
        <div class="visual"></div>
        <p>
          This is a description.
        </p>
        <br />
        <p>
          This is the content of the card. Here you can write a lot of text as
          you want.
        </p>
      </div>
    </div>

CSS

 .parent {
  display: grid;
  place-items: center;
  height: 100vh;
}
.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: papayawhip;
  padding: 1rem;
  width: clamp(23ch, 50%, 46ch);
}

.visual {
  height: 100px;
  width: 100%;
  background: paleturquoise;
  margin: 0.5rem 0;
}

#10 Respect for Aspect: aspect-ratio: < width > / < height >

Maintaining the aspect ratio of images and videos can be a challenge in web development, especially when dealing with responsive layouts. But there's a new CSS property called aspect-ratio that simplifies this task by letting you specify the desired aspect ratio of an element, such as 16:9 or 1:1, and allowing the browser to automatically adjust its size and shape accordingly.

This property is particularly useful for videos and iframes, where preserving the original aspect ratio is critical. Previously, developers had to resort to padding hacks and complex calculations to achieve the same effect. But with aspect-ratio, you can achieve a similar result with much less code and hassle.

HTML

 <div class="parent">
      <div class="card">
        <h1>Card</h1>
        <div class="visual"></div>
        <p>
          This is the description
        </p>
      </div>
    </div>

CSS

.parent {
  display: grid;
  place-items: center;
  height: 100vh;
}
.card {
  width: 80%;
  display: flex;
  flex-direction: column;
  background: lightblue;
  padding: 1rem;
}

.visual {
  aspect-ratio: 16/9;
  background: lightcoral;
  margin: 0.5rem 0;
}

Ten Modern Layouts 🚀 [Part 2]

Ernesto Herrera — Sat, 11 Feb 2023 23:51:50 +0000

This is the second part of the "Ten Modern Layouts"
If you aren't read the part 1, here you can read it.

#4 Pancake Stack: grid-template-rows: auto 1fr auto

This layout is often used for websites and apps.

HTML

<div class="parent">
      <header class="blue section" contenteditable>Header</header>
      <main class="coral section" contenteditable>Main</main>
      <footer class="purple section" contenteditable>Footer</footer>
</div>

CSS

 .parent {
  display: grid;
  height: 100vh;
  grid-template-rows: auto 1fr auto;
}
header {
  background: rgb(235, 108, 127);
  padding: 2rem;
  text-align: center;
}

main {
  background: lightgreen;
  padding: 2rem;
  text-align: center;
}

footer {
  background: rgb(14, 202, 202);
  padding: 2rem;
  text-align: center;
}

#5 Classic Holy Grail Layout: grid-template: auto 1fr auto / auto 1fr auto

It is similar to the previous layout, but now with sidebars
HTML

 <header class="pink section">Header</header>
      <div class="left-side blue section" contenteditable>Left Sidebar</div>
      <main class="section coral" contenteditable>Main</main>
      <div class="right-side yellow section" contenteditable>Right Sidebar</div>
      <footer class="green section">Footer</footer>

CSS

.parent {
  display: grid;
  height: 100vh;
  grid-template: auto 1fr auto / auto 1fr auto;
}

header {
  padding: 2rem;
  background: plum;
  grid-column: 1 / 4;
}

.left-side {
  padding: 2rem;
  background: purple;
  grid-column: 1 / 2;
}

main {
  padding: 2rem;
  background: paleturquoise;
  grid-column: 2 / 3;
}

.right-side {
  padding: 2rem;
  background: papayawhip;
  grid-column: 3 / 4;
}

footer {
  padding: 2rem;
  background: palegreen;
  grid-column: 1 / 4;
}

#6 12-Span Grid: grid-template-columns: repeat(12, 1fr)

The next item on our list is a timeless favourite: the 12-column grid. You can easily create grids in CSS using the repeat() function. By specifying repeat(12, 1fr) as the grid template columns, you'll get 12 equal-width columns each taking up 1 fraction unit of the available space.
HTML

 <div class="parent">
      <div class="span-12">Span 12</div>
      <div class="span-6">Span 6</div>
      <div class="span-4">Span 4</div>
      <div class="span-2">Span 2</div>
    </div>

CSS

.parent {
  display: grid;
  height: 100vh;
  grid-template-columns: repeat(12, 1fr);
}
.span-12 {
  background: lightpink;
  grid-column: 1 / 13;
}

.span-6 {
  background: lightblue;
  grid-column: 1 / 7;
}

.span-4 {
  background: coral;
  grid-column: 4 / 9;
}

.span-2 {
  background: yellow;
  grid-column: 3 / 5;
}

Ten Modern Layouts 🚀 [Part 1]

Ernesto Herrera — Wed, 21 Dec 2022 03:03:49 +0000

This is the first part of the "Ten Modern Layouts"

#1 Super Centered: place-items: center

One of the main day-to-day challenges in front end development is to center elements, the best way to do it is using flex or grid as shown in the following example.

HTML

<body>
    <div class="parent">
      <div class="box" contenteditable>
        Hello, 👋😎
      </div>
    </div>
  </body>

CSS -> Using Grid

.parent {
  display: grid;
  place-items: center;
}

CSS -> Using Flex

.parent-flex {
  display: flex;
  place-items: center;
  justify-content: center;
}

#2 The Deconstructed Pancake: flex:

This is a common layout for marketing sites, which may have a row of 3 items, like image, title and description. On mobile, we'll want those three sections to stack nicely, and expand as the screen size increases.

HTML

 <div class="parent">
      <div class="child-streching">one</div>
      <div class="child-streching">two</div>
      <div class="child-streching">three</div>
    </div>
    <div class="space"></div>
    <div class="parent">
      <div class="child-no-streching">one</div>
      <div class="child-no-streching">two</div>
      <div class="child-no-streching">three</div>
    </div>

CSS

 .parent {
  background-color: bisque;
  display: flex;
  flex-wrap: wrap;
}
.space {
  background-color: white;
  height: 100px;
}
.child-streching {
  flex: 1 1 300px;
  border: 1px solid red;
  background: lightpink;
  font-size: 2rem;
  text-align: center;
}
.child-no-streching {
  flex: 0 1 300px;
  border: 1px solid blueviolet;
  background: papayawhip;
  font-size: 2rem;
  text-align: center;
}

#3 Sidebar Says:grid-template-columns: minmax(,)...)

This demo uses the minmax function to create a grid layout. We're setting the minimum sidebar size to 200px, but on larger screens, it can stretch out to 30%. The sidebar will always take up 30% of its parent's horizontal space, unless that 30% becomes smaller than 200px.

HTML

<div class="parent">
      <div class="section-blue" contenteditable>
        Min: 200px / Max: 30%
      </div>
      <div class="section-green" contenteditable>
        This element takes the second grid position (1fr), meaning it takes up
        the rest of the remaining space.
      </div>
    </div>

CSS

.parent {
  display: grid;
  grid-template-columns: minmax(200px, 30%) 1fr;
}
.section-blue {
  background-color: skyblue;
}
.section-green {
  background-color: darkgreen;
  color: white;
}

here you can read part 2.

Asynchronism in JavaScript

Ernesto Herrera — Sat, 10 Dec 2022 03:29:42 +0000

JavaScript is a popular programming language used in most modern websites and applications. One of its most important features is its ability to handle asynchronous tasks, which allows applications to multitask without blocking UI performance.

Asynchronisms in JavaScript rely on a feature called "running in the background." This means that while one task is running on the main JavaScript thread, other tasks can run in the background, allowing the application to continue running smoothly without interruption.

Callbacks

JavaScript's callbacks are functions that are passed as an argument to other functions and are executed when a certain event occurs or when an asynchronous operation is completed.

example of asynchronism
//callback
function printResult(result) {
  console.log(result)
}

function sumNumbers(myCallback,...nums) {
 let result = 0;
  for( let num of nums){
    result += num
 }
  myCallback(result);
}

sumNumbers(printResult,5,8,9);

Promises

Promises allow us to handle asynchronous more easily in JavaScript by giving us a way to specify what actions to take when an asynchronous operation completes or fails. This allows us to write code that is easier to read and maintain, since we don't need to nest our code in a series of if and else blocks like in synchronous languages.

A promise can be in one of three states: pending, fulfilled, or rejected. When an asynchronous operation starts, a promise is created that is in the pending state. When the operation completes, the promise becomes fulfilled and the result of the operation is provided. If the operation fails, the promise is converted to rejected and a reason for failure is provided.

const requestPermission = new Promise((resolve, reject) => {
// We wait a second before resolving the promise
setTimeout(() => {
// We resolve the promise with the value "approve"
resolve("approve");
}, 1000);
});

console.log("Begin");

// Once the promise has been resolved, we print the resolve value to the console
requestPermission.then((resolve) => {
console.log(resolve);
});

console.log("finish");

Async / Await

Another way to handle asynchronous tasks in JavaScript is by using the "async/await" method. This method allows you to write asynchronous code synchronously, making it more readable and easy to understand. To use the "async/await" method, you must mark a function as "async" and use the "await" keyword to wait for a promise to be fulfilled before continuing with code execution.

/// without  asycn await

const getNameAsync = () => {
// Wait 4 seconds before printing the value to the console
setTimeout(() => {
console.log("jose");
}, 4000);
};

// Declare the printNameAsync function as asynchronous
async function printNameAsync() {
console.log("calling");

// We execute the getNameAsync function and store the result in a variable
const message = getNameAsync();

// Print the value of the variable
console. log(message);
console.log("end");
}

// We execute the function
printNameAsync();
//calling
//undefined
//end
//jose

// with asycn await

const getNameSync = () => {
return new Promise((resolve) => {
// We wait 4 seconds before resolving the promise
setTimeout(() => {
// We resolve the promise with the value "jose"
resolve("jose");
}, 4000);
});
};

// We declare the printNameSync function as asynchronous
async function printNameSync() {
console.log("calling");

// We wait for the promise returned by getNameSync to resolve
const message = await getNameSync();

// We print the resolution value of the promise
console.log(message);
console.log("end");
}

// We execute the function
printNameSync();
//calling
//jose
//end

Asynchronisms in JavaScript are an indispensable feature that allows applications to handle multiple tasks at the same time without affecting the performance of the user interface. Knowing the different ways to handle asynchronous tasks in JavaScript is an essential skill for any modern web application developer.

Thank you very much for reading my article. I hope it has been of interest to you and that you have learned something new on the subject. I love writing about technology and programming, and I'm glad to share my knowledge and experiences.

If you have any questions or comments about the article, feel free to leave your comments, I would love to read your opinion.

Reference

Platzi Asincronismo
MDN

Learn ECMAScript 6 from Beginner to advanced 🚀

Ernesto Herrera — Wed, 07 Dec 2022 04:20:13 +0000

What is it ECMAScript?
Is a scripting language specification on which JavaScript is based. Ecma International is in charge of standardizing ECMAScript.

There is a lot of new function added to JavaScript, in this post we are going to see the most value feature.

Default parameters and concatenation using template literals

Function parameter with default values are initialized with default values if they not contain value or are undefined.

Template literals provide an easy way to interpolate variables and expressions into strings.

function printMessage(message = 'default'){
  if (message !== 'default'){
    return `Custom message with this value: ${message}`
  }

  return `Hello, this is ${message} message`
}

Let and const

ES6 Conventions:

Use const by default.
Use let if you have to rebind a variable.
var can be redeclared and reassigned.
let can be reassigned, but not redeclared.
const can not be redeclared and reassigned.

var a = 10;
console.log(a); //10
{
  let a = 2;
  console.log(a); //2
}
console.log(a); //10

var b = 10;
console.log(b)// Here b is 10
{
  const b = 2;
  console.log(b)// Here b is 2
}
console.log(b)// Here b is 10

Arrow Functions

Arrow functions are not hoisted. They must be defined before they are used.
It is recommended to use const for arrow functions, because a function expression is always a constant value.

const sumData = (a,b) => a + b;

console.log(sumData(23,4)); // 27

The Spread (...) Operator

It allows us to quickly copy all or part of an existing array or object into another array or object.

const pokemonKanto = ['pikachu','zubat'];
const pokemonHoenn = ['torchid','latios'];

const listPokemonAllRegion = [...pokemonKanto,...pokemonHoenn]

console.log(listPokemonAllRegion); // ["pikachu", "zubat", "torchid", "latios"]

Destructuring

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

const [a, b] = ["hello", "Jose"];
console.log(a); // "hello"
console.log(b); // "jose"

const obj = { nombre: "Jose", apellido: "Silva" };
const { nombre, apellido } = obj;
console.log(nombre,apellido); // "Jose Silva"

const getYearAndMonth = function () {
  return ["2022", "December"];
};
const [year, month] = getYearAndMonth();
console.log(year); //2022
console.log(month); //December

const getPokemon = function () {
  return {
    name:'pikachu',
    trainner:'Ash',
  };
};
const {name,trainner} = getPokemon();
console.log(name); //pikachu
console.log(trainner); //Ash

The For/Of Loop

This is a new way for iterable array

function printAllNames(...names) {
  let listOfName = 'list of name: ';
  for (let name of names){
   listOfName += name + " ";
  } 
  return listOfName;

}

let result = printAllNames('pablo','jose','ernesto','');

console.log(result); //list of name: pablo jose ernesto

Rest Parameter

The rest parameter syntax allows a function to accept an indefinite number of arguments as an array.

function multiply(...values) {
  let operation = 1;
  for (let value of values){
    operation *= value;
  } 
  return operation;

}

let result = multiply(1,2,3,4,5,6);

console.log(result); //720

Classes

JavaScript Classes are templates for JavaScript Objects.
Use the keyword class to create a class.
Always add a method named constructor():

class PlayerSoccer {
  constructor(name, selection) {
    this.name = name;
    this.selection = selection;
  }
}

const playerOne = new PlayerSoccer('messi','argentina');
const playerTwo = new PlayerSoccer('ronaldo', 'portugal');

console.log(playerOne); //PlayerSoccer {name: "messi", selection: "argentina", constructor: Object}
console.log(playerTwo); //PlayerSoccer {name: "ronaldo", selection: "portugal", constructor: Object}
export { PlayerSoccer };

Modules

Modules are imported in two different ways:

Import a default export from the file pokemon.js:

export default class Pokemon {
  constructor(name, type) {
    this.name = name;
    this.type = type;
  }
}

Import named exports from the file vehicle.js

class Car {
  constructor(brand, model, year) {
    this.brand = brand;
    this.model = model;
    this.year = year;
  }
}

class Bike {
  constructor(brand, model, year) {
    this.brand = brand;
    this.model = model;
    this.year = year;
  }
}
export { Car, Bike };

import Pokemon from "./pokemon";
import { Car, Bike } from "./vehicle";

const firstPokemon = new Pokemon("pikachu", "electric");
console.log(firstPokemon);

const firstCar = new Car("Toyota", "yaris", 2020);
console.log(firstCar);

const firstBike = new Bike("Suzuki", "gixxer", 2021);
console.log(firstBike);

Sets

A JavaScript Set is a collection of unique values.
Each value can only occur once in a Set.
A Set can hold any value of any data type.

const words = new Set();

words.add('a');
words.add('b');
words.add('a');
console.log(words); //a,b

Promises

Promise is the easiest way to work with asynchronous programming in JavaScript.

const myPromise = () => {
  return new Promise((resolve, reject) => {
      if(true) {
          resolve( "success" )
      }
      else{
          reject( "error" )
      }
    });
}

myPromise()
.then( response => console.log(response) ) // case success
.catch( error => console.log(error) ) //case error

Time to practice 💪🏻

This is the end of the post and the most exciting part, now it's your turn to put top practice es6 into practice, here I leave you a codesandbox ready for you to write your code. Remember to fork the codesandbox to save your practice.

Any questions you have, do so in the comments and I will gladly answer all of them. I also share some links where we can delve deeper into the ECMAScript 6.

References

w3schools
Platzi Curso de ECMAScript: Historia y Versiones de JavaScript