DEV Community: Giulia Chiola

How to speed up development with GitHub CLI

Giulia Chiola — Fri, 02 Sep 2022 06:27:48 +0000

Wait, what?!

I was today years old when I found out that GitHub has a command line interface 🤯.

In the official docs the instructions to install and use it are quite clear to follow.

Installation

I use brew to install GitHub CLI, so

brew install gh

did the magic in less then a minute.

Authorization

You have to authorize this application in order to use your GitHub account from the CLI:

gh auth login

Answer few questions about CLI configuration, here's mines:

? What account do you want to log into? GitHub.com
? What is your preferred protocol for Git operations? SSH
? Upload your SSH public key to your GitHub account? /Users/giulia/.ssh/id_ed25519.pub
? Title for your SSH key: GitHub CLI
? How would you like to authenticate GitHub CLI? Login with a web browser

! First copy your one-time code: XXXX-XXXX
Press Enter to open github.com in your browser...

In your browser will appear this screen to confirm the authorization

and you have to add your one-time code: XXXX-XXXX the prompt just gived to you

Just few confirmation from the shell and we are almost done:

Press Enter to open github.com in your browser...
✓ Authentication complete.
- gh config set -h github.com git_protocol ssh
✓ Configured git protocol

Ok, awesome! ✨

Let's run some commands!

To see all CLI configurations and options, just type

gh

that returns a list of useful commands divided into subgroups

CORE COMMANDS
  auth:        Authenticate gh and git with GitHub
  browse:      Open the repository in the browser
  codespace:   Connect to and manage codespaces
  gist:        Manage gists
  issue:       Manage issues
  pr:          Manage pull requests
  release:     Manage releases
  repo:        Manage repositories

As you can see above, you can manage lot of things from command line 😈 Below I listed my favourite ones.

Create a new repo

To create a new GitHub repository, run

gh repo create test-repository --private

✓ Created repository giuliachiola/test-repository on GitHub

Note: you have to specify if you want the repo private or public.

GitHub repo list

gh repo list

This is useful when you need to check on the fly a repo slug, url, or if it is private or not

Showing 30 of 47 repositories in @giuliachiola

giuliachiola/super-blog-11ty                       Blog built using 11ty static site generator, based on super-styleguide               public   2d
giuliachiola/super-blog-content                    Blog markdown content where documentation rules 📚                                    public   2d
giuliachiola/giuliachiola                                                                                                                public   9d
giuliachiola/eleventy-styleguide                   Custom pattern library tool using 11ty static site generator.                         public   9d
giuliachiola/super-notes                           Personal tech notes, not always well organized 😇                                     public   9d
giuliachiola/super-styleguide                      Personal blog styleguide built using UIengine as presentation layer                   public   Mar  5, 2022
giuliachiola/react-ts-ecommerce                    📒 Step by step from tutorial "React shopping cart with TypeScript | React Ecomme...  public   Mar  5, 2022
giuliachiola/dotfiles                              🛠.files - for fast MacBook setup                                                     public   Mar  5, 2022
giuliachiola/react-movies                          📒 Step by step from tutorial "React JS Course for Beginners 2021 Tutorial - free...  public   Oct  7, 2021
giuliachiola/react-ts-quiz-app                     📒 Step by step from tutorial "React / Typescript Tutorial - Build a Quiz App - W...  public   Oct  1, 2021
giuliachiola/react-typescript-herrington           📒 Step by step from tutorial "Typescript for React Components From Beginners to ...  public   Oct  1, 2021
...

Change repo visibility

Change repo visibility is quite annoying from the browser, as you have to sift through lots of tabs and panels on the UI. Change visibility from the CLI instead, is nearly instantaneous:

gh repo edit <repo-name> --visibility <visibility-string>

For instance:

gh repo edit giuliachiola/super-blog-11ty --visibility private

✓ Edited repository giuliachiola/super-blog-11ty

Sync repo

To pull everything in one go, you can also sync all your repo branches and config:

gh repo sync

✓ Synced the "main" branch from giuliachiola/super-blog-11ty to local repository

Create new gist

Gist are a sort of "snippet" you can store on your GitHub account. They are quite useful to save one-shot configurations, and you can also save others gists in your favourites!

gh create gist

via GIPHY

📚 More info

GitHub CLI Manual

Find element in array and move it to the 1st position

Giulia Chiola — Fri, 05 Feb 2021 07:50:50 +0000

Surely there are several way to do it, this is just one of them. Let me know if you know a better way to do it 💪🏻

To find an element into an array and move to be the first, you have to:

get the index of the founded item using findIndex()

📚 The findIndex() method returns the index of the first element in the array that satisfies the provided testing function.

const arr = [1, 2, 3, '🐱', 4, 5, 6, 7, 8, 9 , 10]
const itemToFind = '🐱'

const foundIdx = arr.findIndex(el => el == itemToFind) // -> foundIdx = 3

remove the item in that specific position using splice()

📚 The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.

arr.splice(foundIdx, 1)

// splice(start[, deleteCount[, item1[, item2[, ...]]]])
// start = foundIdx
// deleteCount = 1 = number of elements in the array to remove from start

add the item to the 1st position using unshift()

📚 The unshift() method adds one or more elements to the beginning of an array and returns the new length of the array.

arr.unshift(itemToFind)

Output

console.log(arr)

// (11) ["🐱", 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

To sum up:

const arr = [1, 2, 3, '🐱', 4, 5, 6, 7, 8, 9 , 10]
const itemToFind = '🐱'

const foundIdx = arr.findIndex(el => el == itemToFind)
arr.splice(foundIdx, 1)
arr.unshift(itemToFind)

📚 More info

Moving Element In An Array From Index To Another

How to add generic styles in Vue Styleguidist

Giulia Chiola — Fri, 05 Feb 2021 07:47:28 +0000

At work, recently we worked on a styleguide project using vue Styleguidist, the Vue little brother of react-styleguidist, and we would like to organize components styles in this way:

component specific styles would be inside the [ComponentName].vue file
while all generic styles (colors, typography, and so on) would be inside a generic styles.scss file.

The first (bad) idea

If we hadn't been in a Styleguidist app, but in a "normal" Vue app instead, we could have add a sass @import with all our generic styles at the highiest component, the App.vue:

// App.vue

<template>
  <div id="app">
    ...
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style lang="scss">
// generic styles
@import 'styles/styles.scss'
</style>

In this way, all components will have inherited our generic styles.

But in a Styleguidist project we have not such an high-level Vue component 😩

If we would want to import a generic file in that way, we would have to add it into all our components, like this:

// components/MyComponent.vue

<template>
  ...
</template>

<script>
export default {
  name: 'MyComponent',
}
</script>

<style lang="scss">
// generic styles
@import 'styles/styles.scss'

// my components custom styles
.c-my-component {
  background: red;
}

...
</style>

Not such a great idea! 🧐

The second (I think good?) idea

Probably there is a better way to do it, but for the moment we'll go with this! 😅

Adding a vue.conifg.js file to the Styleguidist project, we can tell to Styleguidist sass-loader which style content it has to prepend before the actual component <style> content. This can be achieved using sass-loader additionalData option

// vue.config.js

module.exports = {
  css: {
    sourceMap: true,
    loaderOptions: {
      scss: {
        additionalData: `
        @import "assets/styles/styles.scss";
        `,
      },
    },
  },
}

🧨 !important

In these examples I have assumed that we are using SASS (.scss) files and not simple CSS files.
The sass-loader node package I mentioned before is already installed in our project because we wrote styles in SASS using the <style lang="scss"> syntax.

⚡️ Bonus tip

Since we have just added the vue.config.js file, we also added my postcss configuration there:

const postcssNormalize = require('postcss-normalize')
const postcssPresetEnv = require('postcss-preset-env')

module.exports = {
  css: {
    sourceMap: true,
    loaderOptions: {
      scss: {
        additionalData: `
        @import "assets/styles/styles.scss";
        `,
      },
      postcss: {
        plugins: () => [
          postcssPresetEnv({
            features: {
              'logical-properties-and-values': {
                dir: 'ltr',
              },
            },
          }),
          postcssNormalize(),
        ],
      },
    },
  },
}

Et voilà! 🇫🇷

With this configuration:

component specific styles are inside the [ComponentName].vue file
while all generic styles are inside a generic styles.scss file

Please let me know if you found a better way to import general styles in Vue Styleguidist components! 😇

How to add Google Fonts in Vue Styleguidist

Giulia Chiola — Tue, 02 Feb 2021 12:22:41 +0000

Few days ago I worked on a vue-styleguidist project and I had to use a Google Font.

Side note: vue-styleguidist is the "Vue version" of the more famous react-styleguidist, a component development environment with hot reloaded dev server and a living style guide.

In a static page, I would add the font in a classic way using a <link> tag:

<html>
  <head>
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Raleway:100,400,800">
    <style>
      h1 {
        font-family: 'Raleway', sans-serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <h1>Whoa! I'm in Raleway 📝</h1>
  </body>
</html>

But hey, in Styleguidist we are writing components into the "Styleguidist box" 📦!

Styleguidist takes care of creating the fancy and functional box around our components, while we only have to write what is strictly necessary for the component (its structure, its styles, and its logic)

To add a <head> property to the "Styleguidist box" we have to use the react-styleguidist template property which lets us change the HTML of the Styleguidist application.

To find out template supported properties, I deep dive into mini-html-webpack-template-plugin extended options. There I found that it is possible to add an head property with an array of links... awesome! 😼

Name	Type	Default	Description
`head.links`	`{Array}`	`undefined`	Array of objects with key + value pairs

So, to add Raleway Google Font in our project we have to add to the styleguide.config.js file a template object:

// styleguide.config.js

module.exports = {
  title: 'My awesome styleguide',
  components: 'components/**/[A-Z]*.vue',
  ...
  template: {
    head: {
      links: [{
        key: 'stylesheet',
        value: 'https://fonts.googleapis.com/css?family=Raleway:100,400,800',
      }, ],
    },
  },
}

that turns out in

<head>
  <link rel="stylesheet"
        href="https://fonts.googleapis.com/css?family=Raleway:100,400,800">
</head>

Now, in our components files we can use the Google Font 😏

// My component.vue

<template>
  <h1>My awesome title</h1>
</template>

<script>
  export default {
    name: 'MyComponent',
  }
</script>

<style>
  h1 {
    font-family: 'Raleway', sans-serif;
    font-size: 48px;
  }
</style>

Add a class in Nunjucks using a conditional statement

Giulia Chiola — Tue, 02 Feb 2021 07:58:14 +0000

In Nunjucks we can use a conditional statement in two ways:

explicit using the {% if %} keyword,
or implicit using the {{ }} expression.

Note: I did not find any reference about these names – implicit/explicit – in the Nunjucks official documentation 📚, I just named to easily distinguish the two syntax in this tutorial 😇.

Syntax n.1: explicit

Using an explicit {% if %} keyword, Nunjucks checks if the condition is met

{% set arr = ['🐱', '🐶', '🐺'] %}

<p>{% if '🐶' in arr %}{% endif %}</p>

HTML output

<p>true</p>

Using this method, we can add an HTML class when a specific condition is met

  {% set arr = ['🐱', '🐶', '🐺'] %}

  <div class="c-animals {% if '🐶' in arr %}has-dog{% endif %}">...</div>

HTML output

<div class="c-animals has-dog">...</div>

Syntax n.2: implicit

Using double curly braces, Nunjucks evalued its content:

{% set arr = ['🐱', '🐶', '🐺'] %}

<p>{{ if '🐶' in arr }}</p>

HTML output

<p>true</p>

Using this method, we can add an HTML class when a specific condition is met

  {% set arr = ['🐱', '🐶', '🐺'] %}

  <div class="c-animals {{ 'has-dog' if '🐶' in arr }}">...</div>

HTML output

<div class="c-animals has-dog">...</div>

Note that the HTML output is exactly the same! 🚀

To sum up

{% set arr = ['🐱', '🐶', '🐺'] %}

{# 1. explicit #}
<div class="c-animals {% if '🐶' in arr %}has-dog{% endif %}">...</div>

{# 2. implicit #}
<div class="c-animals {{ 'has-dog' if '🐶' in arr }}">...</div>

Personally, I use both syntaxes in my Nunjucks files, and to choose which one to use I go with this logic:

if there is just one condition to met and it is quite simple, I use the implicit syntax
else I use the explicit one 🤓

Npm cheatsheet

Giulia Chiola — Mon, 01 Feb 2021 07:55:01 +0000

Few npm commands I found very useful during development.

Command	Description
`npm -v`	show current `npm` version installed
`npm init`	inizialize npm project into the current folder, creates `package.json`
`npm --help`	show npm help manual page
`npm list`	show a tree of every package found in the current folder
`npm list -g`	same as above ^^, but search also in global packages
`npm list -g --depth=0`	same as above ^^, but do not show every package’s dependencies
`npm list [package name]`	show a tree of every instance found in the current folder of that specific package
`npm install`	install all packages in `package.json`
`npm install [package name]`	install a package as dependency*
`npm install [package name] --save`	install a package as dependency (same as above)
`npm install [package name] --save-dev`	install a package as dev dependency
`npm install --save username/repo#branch-name-or-commit-or-tag`	install package from GitHub repository
`npm uninstall [package name]`	uninstall a package
`npm update`	update top level packages
`npm update --depth [number of levels]`	update dependencies of dependencies packages
`npm update [package name] -g`	update global package installation
`npm docs [package name]`	show README, official website, of the given package
`npm outdated`	show packages that should be updated

🧨 !important
By default, in node@5 the --save flag is implicit.

Therefore running these two commands you will have the same result:

npm i lodash

# is the same as
npm i lodash --save

they add a new line in your package.json into the dependecies object:

{
  "name": "test-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Giulia Chiola",
  "license": "ISC",
  "dependencies": {
    "lodash": "^4.17.21"
  }
}

Aliases

Alias	Command
`npm i`	`npm install`
`npm i [package name] -D`	`npm install [package name] --save-dev`
`npm ls`	`npm list`
`npm up [package name]`	`npm update [package name]`
`npm un [package name]`	`npm uninstall [package name]`

Config

Set initial values for npm projects:

npm config set init-author-name "Your name"
npm config set init-author-email "your@email.com"
npm config set init-license MIT

⚡️ Bonus tip

npm-check is a useful tool to check for outdated, incorrect, and unused dependencies

📚 More info

How to list npm user-installed packages - StackOverflow

npm cheatsheet - DevHints

Use Github branch as dependency in package.json

Show console outputs based on environment

Giulia Chiola — Tue, 26 Jan 2021 18:02:36 +0000

A project can be beautiful from the outside, but if the browser console is full of messy outputs it will immediately seem confusing and carelessly 😅

Using the local storange + custom script

In this script we:

assign the window.console to a custom variable named consoleWrap
create a "state" variable devMode and save it in the browser local storage. We will use it to determinate if we are in development or production mode!
instead of use the default console.log() function, use the new consoleWrap.debug.log() instead, as it will be shown in browser console only when devMode local storage var is 'true'.

// main.js

let consoleWrap = {};

if (localStorage.devMode && localStorage.devMode === 'true') {
  consoleWrap.debug = window.console
} else {
  consoleWrap.debug = () => {}
}

// other-file.js

consoleWrap.debug.log('Hello!')

To set the devMode in browser local storage, please add this line in browser console:

// browser console

localStorage.devMode = 'true'

> Hello!

🧨 !important

local storage values are strings 🤭, so we have to assign the variable as string localStorage.devMode = 'true' and check its value as string localStorage.devMode === 'true'.

Using vue env + webpack + loglevel

In a Vue project we already have webpack installed, and do not output noisy console.log() in production JS bundle is an efficient way to save kilobytes! 😏

Loglevel to the rescue!

loglevel

Minimal lightweight simple logging for JavaScript. loglevel replaces console.log() and friends with level-based logging and filtering, with none of console's downsides.

Install it in development packages:

npm install loglevel --save-dev

In every JS file we would need to output something, we have to:

import loglevel
use its syntax, where log.debug == console.log

import log from 'loglevel';

log.debug('This output will be in both development and production mode')

Why did we talk about webpack above? 😅

Well, webpack will not add into the JS bundle the code that will never be executed, as for example a condition that will never match:

if ((2 + 2) === 5) {
  // This code will never see the sunlight! 😢
}

so if we use node ENV variables settings:

# .env

VUE_APP_DEBUG=true

# .env.production

VUE_APP_DEBUG=false

we can add all console outputs we want to our project

import log from 'loglevel';

if (process.env.VUE_APP_DEBUG) {
  log.debug('This output will be in development mode, but not in production mode')
}

and none of them will output in the final JS bundle! 🎉

How I set up my environment before I start every project

Giulia Chiola — Tue, 26 Jan 2021 17:53:48 +0000

Config

Editor

.editorconfig

EditorConfig helps maintain consistent coding styles for multiple developers working on the same project across various editors and IDEs. The EditorConfig project consists of a file format for defining coding styles and a collection of text editor plugins that enable editors to read the file format and adhere to defined styles.

🐙 GitHub snippet

Visual Studio Code workspace

Adding Visual Studio Code specific colors for every project, helps to recognize them more easlily during the development.

To set up workspace colors

open VSC settings cmd + ,
search for workbench.colorCustomizations
edit the .json file using vsc-workspace-colors.json content below

🐙 GitHub snippet

Git

Gitignore

.gitignore

A gitignore file specifies intentionally untracked files that Git should ignore. Files already tracked by Git are not affected; Each line in a gitignore file specifies a pattern.

🐙 GitHub snippet

Issue template

The issue is more clear if we set up an issue template. Compile it every time you open an issue, and remove the unnecessary parts.

🐙 GitHub snippet

PR template

🐙 GitHub snippet

Shell cheatsheet

Giulia Chiola — Mon, 25 Jan 2021 17:57:40 +0000

Few commands I found very useful during development.

Command	Description
`man ls`	show manual for command 'ls'
`wc <file>`	words count
`rm <file>`	remove/delete file
`rm -i <file>`	remove/delete file (interactive, ask confirm)
`rmdir <directory>`	remove/delete directory
`rm -R <directory>`	remove/delete directory and subdirectory
`rm -iR <directory>`	remove/delete directory (interactive)
`cp <current location> <destination>`	copy files
`chmod -R 755 <folder>`	add writing permission to folder
`pwd`	present working directory / print working directory
`cd`	change directory
`mkdir`	make directory
`ls`	list files
`ls -l`	list files (long form)
`ls -lah`	list files (long form, all also hidden, human readable)
`touch [filename]`	create file
`chown`	change owner
`cat <file>`	show file
`<cmd> > <file>`	direct the output of "cmd" into "file"
`grep -rl "<text>" <dir>`	search for all files containing `<text>` inside `<dir>`
`ln`	symbolic link
`alias`	show available alias on shell
`cd -`	go to the previous current directory
`ctrl` + `r`	advanced search (search any word in bash history)

Nunjucks scoped variable declarations

Giulia Chiola — Mon, 25 Jan 2021 17:45:07 +0000

We have to pay attention where we set Nunjucks variables because they are scoped

{% set animals = ['🐱', '🐶', '🐺'] %}

{% for item in animals %}
  {% set animal = item %}
{% endfor %}

{{ animal }}
{# animal -> ERROR #}
{# animal declared INSIDE the loop is NOT available #}

{% set animals = ['🐱', '🐶', '🐺'] %}

{# note this declaration #}
{% set animal = '' %}

{% for item in animals %}
  {% set animal = item %}
{% endfor %}

{{ animal }}
{# animal declared OUTSIDE the loop is available #}
{# animal -> 🐺 (last array item) #}

📚 More info

Twig docs - set variables

Nunjucks advanced loops

Giulia Chiola — Mon, 25 Jan 2021 17:38:40 +0000

Nunjucks is a powerful template engine that allows to loop through arrays and also objects 😏

Loop though an array

{% set animals = ['🐱', '🐶', '🐺'] %}

{% for item in animals %}
    Value: {{ item }}
{% endfor %}

Value: 🐱
Value: 🐶
Value: 🐺

Loop though an object

{% set animal = {
    name: 'cat',
    emoji: '🐱'
} %}

{% for key, value in animal %}
    {{ key }}: {{ value }}
{% endfor %}

Note that we have to declare the two parameters of the loop key, value.

name: cat
emoji: 🐱

The `iterable` property

In Twig exists an intresting property, iterable that checks if a variable can be iterable in a for loop:

Loop through an array:

{% set animals = ['🐱', '🐶', '🐺'] %}

{% if animals is iterable %}
  {% for item in animals %}
    Value: {{ item }}
  {% endfor %}
{% else %}
  Not iterable: {{ animal }}
{% endif %}

Value: 🐱
Value: 🐶
Value: 🐺

Loop through an object:

{% set animals = {
  name: 'cat',
  emoji: '🐱'
} %}

{% if animals is iterable %}
  {% for item in animals %}
    Value: {{ item }}
  {% endfor %}
{% else %}
  Not iterable: {{ animal }}
{% endif %}

Value: cat
Value: 🐱

🧨 !important

Please note that iterable is a Twig property and can have unexpected results in Nunjucks template engine.

In Twig a string is not iterable:

{% set animal = 'cat' %}

{% if animal is iterable %}
  Iterable!
  {% for item in animal %}
    Value: {{ item }}
  {% endfor %}
{% else %}
  Not iterable!
  {{ animal }}
{% endif %}

Twig output

Not iterable!
cat

but if we run the same code in Nunjucks, we discover that a string is iterable 🤯

Nunjucks output

Iterable!
Value: c
Value: a
Value: t

Accessing the parent loop

Nunjucks provides in its loops the loop property.

From the docs the loop.index is

the current iteration of the loop (1 indexed)

But what if we have two nested loops and we want to access to the parent loop?

Workaround: save the loop index as row number! 😏

In this example we have a matrix content: two rows and each row has one ore more cells. If we want to print all cells content and position, we have to:

loop (parent loop) through the rows
loop (child loop) through the columns
get the content inside each cell

{% set animals = [
    ['🐱', '🐶', '🐺'],
    ['🐍']
] %}

<table>
  {% for row in animals %}
    {# new row #}
    <tr>
    {% set rowloop = loop %}
    {% for cell in row %}
      <td>
          row (rowloop.index):{{ rowloop.index }}
          column (loop.index): {{ loop.index }}
          cell: {{ cell }}
      </td>
    {% endfor %}
    </tr>
  {% endfor %}
</table>

HTML output

<table>
  {# new row #}
  <tr>
    <td>
        row (rowloop.index):1
        column (loop.index): 1
        cell: 🐱
    </td>
    <td>
        row (rowloop.index):1
        column (loop.index): 2
        cell: 🐶
    </td>
    <td>
        row (rowloop.index):1
        column (loop.index): 3
        cell: 🐺
    </td>
  </tr>
  {# new row #}
  <tr>
    <td>
        row (rowloop.index):2
        column (loop.index): 1
        cell: 🐍
    </td>
  </tr>
</table>

📚 More info

Twig playground

Sass placeholder and its limits

Giulia Chiola — Mon, 25 Jan 2021 17:34:08 +0000

From the official 📚 Sass documentation

Sass has a special kind of selector known as a “placeholder”. It looks and acts a lot like a class selector, but it starts with a % and it's not included in the CSS output. In fact, any complex selector (the ones between the commas) that even contains a placeholder selector isn't included in the CSS, nor is any style rule whose selectors all contain placeholders.

We can write a placeholder for reusable pieces of code prefixed by the % keyword:

// colors.scss

%colors-per-viewport {
  background: red;

  @media (min-width: 768px) {
    background: blue;
  }
}

and call the placeholder using the syntax @extend %[placeholder-name]

// component.scss

.colors {
  @extend %colors-per-viewport;
}

CSS output:

.colors {
  background: red;
}
@media (min-width: 768px) {
  .colors {
    background: blue;
  }
}

As seen above, we could also declare a code snippet with mediaquery inside.

The small matter

Unfortunately, we cannot call a placeholder declaration inside a mediaquery 😩

For instance, if we try to declare two placeholders and call them inside a media query

%colors-mobile {
  background: yellow;
}

%colors-tablet {
  background: green;
}

.colors-viewport {
  @extend %colors-mobile; // ok!

  @media (min-width: 768px) {
    @extend %colors-tablet; // nope!
  }
}

The code above will throw an error 😭

You may not @extend an outer selector from within @media.
You may only @extend selectors within the same directive.

So, if we really need to reuse a code snipped inside a mediaquery, we can use a mixin declaration.

I know, it is not the correct use of the mixin function... but it's a desperate measure! 😅

@mixin colors-mobile {
  background: yellow;
}

@mixin colors-tablet {
  background: green;
}

.colors-viewport {
  @include colors-mobile; // ok!

  @media (min-width: 768px) {
    @include colors-tablet; // yasss!
  }
}

📚 More info

Sass lang - placeholder selectors

Sass - mixin or placeholder

DEV Community: Giulia Chiola

How to speed up development with GitHub CLI

Wait, what?!

Installation

Authorization

Let's run some commands!

Create a new repo

GitHub repo list

Change repo visibility

Sync repo

Create new gist

Find element in array and move it to the 1st position

How to add generic styles in Vue Styleguidist

The first (bad) idea

The second (I think good?) idea

⚡️ Bonus tip

How to add Google Fonts in Vue Styleguidist

Add a class in Nunjucks using a conditional statement

Syntax n.1: explicit

Syntax n.2: implicit

To sum up

Npm cheatsheet

Aliases

Config

⚡️ Bonus tip

Show console outputs based on environment

Using the local storange + custom script

Using vue env + webpack + loglevel

How I set up my environment before I start every project

Config

Editor

Visual Studio Code workspace

Git

Gitignore

Issue template

PR template

Shell cheatsheet

Nunjucks scoped variable declarations

Nunjucks advanced loops

Loop though an array

Loop though an object

The iterable property

Accessing the parent loop

Sass placeholder and its limits

The small matter

The `iterable` property