Forem: Thiago Silva Lopes

How to use Pug & Sass in Webpack 5 - 2022 🐶

Thiago Silva Lopes — Thu, 04 Aug 2022 21:30:00 +0000

Check on this post the step-by-step you need to configure Sass & Pug.js (previously know as JADE) in Webpack 5 with HMR fully working.

👨🏻‍💻 Initialize your project with Webpack 5:

1- Create the package.json for your project:
yarn init -y

2- Install webpack together with his CLI and dev-server:
yarn add webpack webpack-cli webpack-dev-server -D

/* ☝🏽 The -D flag install these as a devDependency. 
Since webpack already compiles & bundle our app for build. */

🎨 Configuring Sass & Pug.js on Webpack:

1- Install the needed Sass dependencies:
yarn add sass sass-loader css-loader -D

2- Install the needed Pug dependencies:
yarn add pug-plugin -D

3- With 'pug-plugin' you can insert your Images, Styles, Fonts & Scripts inside any pug file. With no need to use "require()" in front of href or src path anymore:

4- To make it all work, create a "webpack.config.js" file on the root of your project, & add the following settings on it:

//webpack.config.js
const path = require('path');
const PugPlugin = require('pug-plugin');

module.exports = {
  output: {
    path: path.join(__dirname, 'dist/'),
    publicPath: '/',
  },
  plugins: [
    new PugPlugin({
      pretty: 'auto',
      //☝🏽 Format HTML (only in dev mode)
      entry: {
        // Insert your PUG templates here
        index: './src/views/index.pug',
        about: './src/views/about.pug'
      },
      js: {
        // JS output filename with hash for unique id
        filename: 'assets/js/[name].[contenthash:8].js'
      },
      css: {
        // CSS output filename with hash for unique id
        filename: 'assets/css/[name].[contenthash:8].css'
      }
    })
  ],
  module: {
    rules: [
      {
        test: /\.(css|sass|scss)$/,
        use: ['css-loader', 'sass-loader']
        //☝🏽 Load Sass files
      },
      {
        // To use images on pug files:
        test: /\.(png|jpg|jpeg|ico)/,
        type: 'asset/resource',
        generator: {
          filename: 'assets/img/[name].[hash:8][ext]'
        }
      },
      {
        // To use fonts on pug files:
        test: /\.(woff|woff2|eot|ttf|otf|svg)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'assets/fonts/[name][ext][query]'
        }
      }
    ]
  },
  devServer: {
    static: path.join(__dirname, 'dist'),
    watchFiles: {
      paths: ['src/**/*.*', 'assets/scss/**/*.*'],
      //☝🏽 Enables live reload in these folders
      options: {
        usePolling: true
      }
    }
  },
  stats: 'errors-only'
  //☝🏽 For a cleaner dev-server run
};

5- Add your Pug files on entry (inside module.exports) & you're ready to go! (you can add more files there later). 🎆 The HMR will work for any Pug that imports at least 1 Js file, & all Sass files inside 'src' or 'assets' folder❗ 🙌🏼

📚 Last but not less important:

You can customize your webpack.config.js and delete or insert anything you like. The code up here it's based on the pug-plugin instructions.

8 real useful Chrome Dev & Design extensions 👨🏻‍💻

Thiago Silva Lopes — Wed, 11 May 2022 02:47:44 +0000

1- Blackbox - Select. Copy. Paste & Search

If the extension title itself wasn't enough to convice you: imagine copy and paste the text on any image, article or video you want.

To spare yourself lots of lost time, you just have to install, create an free account, and copy and paste any text you want.

2- Dark Reader

If like me, you are also tired of tiring your eyes with the light theme as default on almost every website, or just don't have the option to change to dark mode.

This open source MIT-licensed extension, turns literally any website you want in dark mode, applying dynamic CSS classes to change their styles.

The most amazing part is that you can export these styles to apply on your website yourself! Or simply study why those colors work with each other.

If all of that wasn't enough, you can change brightness, contrast, and even font styles to your personal favorite. IN ANY WEBSITE.

3- ColorZilla

Copy the HEX, RGB, HSL and HSV values from any color you see around the web. In addition, you can also analyze all colors applied in CSS of any site.

4- Grepper

I think we can all relate to spending more time than we'd like to look for a solution to that annoying bug.

This extension is here to help us decrease this time. Where all users of this extension can publish code snippets, to any google search, and any framework/language. 🤯😳

5- JSON Viewer

Format any JSON data you see on web. With this extension your JSON response is so much more legible. Analyze raw data no more.

You can even customize the color scheme, highlight, wrap and many others things on your response.

6- CSS Viewer

See many CSS properties for an div/HTML element just by hovering it.

7- Material Icons for GitHub

Alright, this one might not be real uuseful, but adding file & folder icons to GitHub repos really helps find visually what you want. Or just make things more prettier, i guess. 🤓

8- VisBug

And I saved the best for last.
This one is just like CSS Viewer, but with sooo much more.

This awesome extension give you power to preview any change you want in a website, just with the right clicks. Color, padding, margin, position, shadows, and it keeps going! 🚀🙌🏼

Although may be a little complex to use at first, once you get the hang of it, you'll never need to test a code change a thousand times to get it the way you wanted.

That's it❗ 🥳

Thank you so much for reading my article this far. Any extension interested you? Or have you not heard of it yet? Tell me in the comments! 🤩😉

Crie uma API simples (CRUD) com JSON Server

Thiago Silva Lopes — Mon, 11 Apr 2022 00:16:52 +0000

Nesse post veremos como criar uma API para requisições Post, Get, Put & Delete, utilizando JSON Server.

Abra o seu terminal, navegue para dentro da pasta do seu projeto, e siga o passo a passo:

👨🏻‍💻 Iniciando API e dependências:

Criamos um package.json para administrar esse projeto, usando o comando:
npm init -y
Instalando as dependências mínimas pro NPM funcionar, digite no terminal:
npm i
Instalamos o JSON Server globalmente com o comando:
npm i -g json-server
E instalamos o JSON Server também como uma dependência de projeto! (No package.json 😉):
npm i json-server

📚 Conectando a DataBase:

Criamos/adicionamos o arquivo com extensão 'json' com nossa dB. Mas, para que as requisições funcionem corretamente, sua dB precisa conter:

Todos os dados dentro de uma única array, definida com um nome "Dados": []
Array (com nome) envolvida em colchetes, ficando da seguinte forma:

{
  "Dados": [
    {
      "text": "dado1",
      "id": 1
    },
    {
      "text": "dado2",
      "id": 2
    }
  ],
 "OutrosDados": []
}

Executamos o JsonServer na nossa dB com o comando:
json-server --watch NomeDaSuaDb.json
E pronto! O JSON-Server já vai criar automaticamente uma rota pra cada array que você criou na sua db.json! 😍😎
No package.json, no objeto de "scripts" trocamos o script "test" para "dev", com o seguinte conteúdo:
"dev": "json-server --watch NomeDaSuaDb.json --port 3000"

🥳 Iniciando API

1- Criamos na pasta raiz do projeto um novo arquivo de nome "server.js" com o seguinte código dentro dele:

const jsonServer = require("json-server");
const server = jsonServer.create();
const router = jsonServer.router("NomeDaSuaDb.json"); //👈🏽
const middlewares = jsonServer.defaults();
const port = process.env.PORT || 3000;

server.use(middlewares);
server.use(router);

server.listen(port);

2- Adicione na linha 3 o nome da sua database e pronto❗ Sua API com JSON Server está finalizada, e pronta para fazer o deploy 🙌🎆

🏠 Deploy no Heroku

Você pode fazer o deploy da sua API em qualquer serviço de hospedagem da sua preferência. Recomendo pessoalmente o Heroku pois sempre utilizo a plataforma para hospedar minhas próprias API's.

No Heroku, há os "dynos", que sãos unidades que representam o quanto sua aplicação pode ficar disponível/online.

Tanto na versão gratuita quanto paga, nossa API hiberna em horários convenientes para utilizar menos dynos. Caso você necessite de acesso EXTREMO e não se preocupe com todos os seus dynos serem gastos rapidamente, você pode impedir esse processo de hibernação.

Para fazer isso gratuitamente, entre no site da Kaffeine, e insira o nome da sua aplicação no Heroku (O mesmo nome que aparece lá na sua dashboard 👈🏽

Clique no botão "Give my app a caffeine shot every 30 minutes" e PRONTO!!
Sua API ou aplicação não entrará mais em hibernação 😉

Format C/Cpp files automatically on VS Code

Thiago Silva Lopes — Sun, 10 Apr 2022 20:01:51 +0000

The year is 2022, you're already know some things about programming and your college is teaching you logics with Cpp.

The recommended IDE that they show you is something too to even bother to look, so okay, let's code this on VS Code.

⚠ The problem

You got everything set up and looking great with the compiler and VS extensions, but as you begin to code you notice that your code isn't formatting itself.

You already got Prettier + ESLint working fine, but they don't offer support C/Cpp. So, how do i format only C/Cpp code with another formatter?

✔ The solution

Searching around the web i found out that the VS Code C/Cpp support extension already comes with clang-format.

That being said, we doesn't need to install any other thing than the spoken extension, to make our code indent automatically and customize how that formatting is gonna be.

Open your VS Code and press Ctrl + Shift + P to open the Command Pallete;
Type 'JSON' and click on the 'Open Settings (JSON):
With the VS Code settings.json open, we can make clang-format as our default formatter (for C/Cpp language only), adding the following code:

"[c]": {
    "editor.defaultFormatter": "ms-vscode.cpptools"
    //☝🏼 Select the MS extension as defaultFormatter
  },
  "[cpp]": {
    "editor.defaultFormatter": "ms-vscode.cpptools"
  },

🥳That's it! Your code will now auto format! 🎆🙌
But... How i customize this? 🤔

🎨 Custom your formatting

Clang-format has a lot of options for your format your code the way your prefer more. You can check their documentation in this 👉🏽 link to see all the options you have.

How to set this options on your VS Code:

Follow the same steps as above to open your settings.json, and put your options inside this code:

"C_Cpp.clang_format_fallbackStyle": "{optionOne: true, optionTwo: 2 }"

All the options needs to be inside this quotes, so you can't format this object in more lines than 1. Even if it is an object.

This are the configs that I find the best for my use:

"C_Cpp.clang_format_fallbackStyle": "{ BasedOnStyle: Google, IndentWidth: 3, IncludeBlocks: Merge, IndentGotoLabels: true, KeepEmptyLinesAtTheStartOfBlocks: true}"

If you wanna check the settings i use on my VS Code & Terminal, you can check my 👉🏽 repos on GitHub! 😊

👨🏻‍💻 Special thanks & credits to:

Other devs on Stack Overflow who faced the same problem &/or helped to find solutions. ✌🏼

How '@use' like '@import' (Sass new syntax) 🤔

Thiago Silva Lopes — Sun, 10 Apr 2022 17:36:00 +0000

So, Sass has a new set of rules that come to replace the old '@import' syntax. But, the new '@use' and '@forward' rules isn't just replacing and working exactly has their old ones.

⚠ The problem

If you are trying to import a 'variables.scss' to other Sass file and just replace your '@import' with a '@use', you will find that your variables still aren't reachable.

❓ Why this happens?

The new rules are here to fix a lot of bugs from conflict between files that may happen sometimes with the variables import.

The new syntax makes that you only import the variables of a file using some modular stylesheet way. And this is:

Adding the name of the file you are importing in front of each variable you use:

For me and a lot of people who been using Sass, one of the biggest advantages of this CSS preprocessor, is that syntax is almost the same as plain CSS, but with super powers.

The old way of styling your files was that (beside the $ instead @), we could use the same way of import vars between files on CSS. This new way makes that one of the biggest advantages of Sass syntax, as deprecated.

✔ How to fix this?

Instead of adding the name of your Sass variables file in front of every single vars in your file, you just need to add 👉🏽 'as *' in the end of your import:

@use "../SassFolder/SassFile" as *;

And yeah, just with 3 characters, you can use the new '@use' syntax without any more pain.

👨🏻‍💻📚 Special thanks & credits to:

Pixel Rocket and his awesome Sass Crash Course, that helped a lot of solving this headache;

Other devs on Stack Overflow who faced the same problem &/or helped to find solutions. ✌🏼