VSCode - Remove Line Breaks


Sometimes you want to write a shell command on VSCode first, and then copy and past it on the terminal, unfortunately that doesn't always go well. A lot of the time, line breaks are the problem, VSCode has a very helpful shortcut to help solve this issue.

Just select the portion of the code you want to remove the break lines and type:

ctrl + j


var pipeline = [
    $match: {
      "imdb.rating": { $gte: 7 },
      genres: { $nin: ["Crime", "Horror"] },
      rated: { $in: ["PG", "G"] },
      languages: { $all: ["English", "Japanese"] },


var pipeline = [ { $match: { "imdb.rating": { $gte: 7 }, genres: { $nin: ["Crime", "Horror"] }, rated: { $in: ["PG", "G"] }, languages: { $all: ["English", "Japanese"] }, }, }, ];

Mongoose - Force Collection Name


const dataSchema = new Schema({..}, { collection: 'data' });


const Document = mongoose.model("Document", documentSchema, "<collection>");



Git - Solving "fatal: refusing to merge unrelated histories"


git pull origin <branch> --allow-unrelated-histories


git pull origin master --allow-unrelated-histories
git merge origin origin/master
git push origin master

Git - Working with branches


// check local branches and what branch you are on
git branch 

// check remote branches
git branch -r

Obs: Go to the branch you want branch out, and then run the create branch command. This will give a copy of the branch you are in.

// create branch
git branch <branch name>

//Change branche
git checkout <branch name>

// delete branch locally
git branch -d <localBranchName>

// delete branch remotely
git push origin --delete <remoteBranchName>

Git Flow Basics


Git-flow is a tool that works with Git and gives a standardize workflow to help working in projects with a team.

List Commands

git flow

Initialize Git Flow

git flow init

Start new feature

git flow feature start <feature name>

Finish up a feature

git flow feature finish <feature name>

Publish a feature

git flow feature publish <feature name>

Pull a existing feature

git flow feature pull origin <feature name>

If you are just starting with Git-Flow, I highly recommend reading Daniel Kummer's tutorial:







Image: https://unsplash.com/photos/FWhTeWRCeis

Docker Basics


Create a Container

docker create <image name> 

Obs: Returns the container id.

Start a Container

docker start - a <container id> 

Obs: The "-a" shows the output of the container in the terminal.

Creating And Running a Container from an Image

docker run <image name> <command>

Obs: Once you created a container with a command, you can not override it.

List Running Containers

docker ps

List All Containers Ever Created

docker ps --all

Restarting Stopped Containers

docker start -a <container id> 

Removing Stopped Containers

docker system prune

Retrieving Log Outputs

docker logs <container id>

This will not re-running or re-starting the container, but will retrieve all the information that has been emitted from it.

Stopping Container

docker stop <container id>

docker Kill <container id>

When using stop, docker gives enough time for the container to shut down properly. (After 10 seconds, it will emit the kill command if the container doesn't stop). The kill command, stop it immediately.

Execute an additional command in a container

docker exec -it <container id> <command>

Run this command while the container is running.

Open a shell in the context of a running container

docker exec -it <container id> sh

Tip: To exit try ctr+c, if it doesn't work, try ctr+d or type "exit"

Its also possible to use:

 docker run it <image name> sh

This will run the shell before the default container's commands

Tagging a image

 docker build -t <your docker id> / <project name> : version (or latest) <project directory>

Docker Compose


docker-compose up -d --build

Launch Containers in the background

docker-compose up -d

Stop Containers

docker-compose down

Check Container Status

docker-compose ps

Sass Media Query Mixin


  Media queries mixins

$sm-mobile: 320px;
$mobile: 480px;
$lg-mobile-width: 640px;
$tablet-width: 768px;
$desktop-width: 1024px;
$wide-with: 1440px;

@mixin mobile {
  @media ( max-width: #{$tablet-width - 1px} ) {

@mixin tablet {
  @media (min-width: #{$tablet-width}) and (max-width: #{$desktop-width - 1px}) {

@mixin desktop {
  @media (min-width: #{$desktop-width}) {

Git - How to Delete a Git Branch (Local and Remote)


// delete branch locally
git branch -d <localBranchName>

// delete branch remotely
git push origin --delete <remoteBranchName>

More at: https://www.freecodecamp.org/news/how-to-delete-a-git-branch-both-locally-and-remotely/

Gulp v4 Sass + Browser-sync


Quick gulpfile.js script to compile Sass and sync with browser for future reference.

More at: https://gulpjs.com/

const gulp = require("gulp");
const sass = require("gulp-sass");
const browserSync = require("browser-sync").create();
const concat = require("gulp-concat");

function style() {
  return gulp
    .pipe(sass().on("error", sass.logError))

function watch() {
    // server: {},
    proxy: "http://localhost:8888/gitema/",
    notify: true,
  gulp.watch("./assets/scss/**/*.scss", style);
  gulp.watch("./*.php").on("change", browserSync.reload);
  gulp.watch("./assets/js/**/*.js").on("change", browserSync.reload);

exports.style = style;
exports.watch = watch;

Magento Useful Commands


bin/magento admin:user:create

bin/magento cache:flush

bin/magento module:status

bin/magento module:disable [plugin_name]

bin/magento dev:template-hints:enable  /  disable

bin/magento c:f or c:f (clean or flush)

bin/magento setup:static-content:deploy

bin/magento deploy:mode:show

bin/magento setup:di:compile

php bin/magento setup:upgrade

rm -rf /pub/static/*

rm -rf  /var/view_preprocessed/*

rm -rf var/cache/* var/page_cache/* var/generation/*

CSS Architecture


Why Define a system?

Having a system helps with communication and maintainability, specially If you are working in a team. The system it self doesn't really matter a lot, as long you have a system and everybody is onboard with it, you're good to go.

Before starting a "design table" or "asset panel", I like to think and organize my thoughts on what technologies I'm going to use.

I created a system for my self that consists in some rules I like to follow, lets dive in to it::

Use Grid and Flexbox

Grid and Flexbox are meant to be used together. Think of Grid as a tool to position elements in 2D and Flex to position things in one dimension, row or column.


  • Less media queries
  • More organize and easy to visualize. (I highly recommend Firefox devtools for that)
  • Named grid areas avoids complexity

Color Palette

Define a color palette, 2 to 5 colors is more than enough to start, organize them as primary color, secondary color, darker/lighter primary, darker/lighter secondary and so on.

We are going to assign those color to variables, in that way our website can be easily tweaked in the future.

Also, define your blacks, whites and greys. (You're going to need them)

This will look like this:


--primary: #059ECC;
--primary-dark: #177B99;
--secondary: #FFD7CC;
--secondary-dark: #D6C5C8 ;
--white: #E1E7F7;

Or if you you're using Sass

$primary: #059ECC;
$primary-dark: #177B99
$secondary: #FFD7CC;
$secondary-dark: #D6C5C8 ;
$white: #E1E7F7;

Tip: Color Theory, Color Harmony

I recommend looking for a color pallet in websites like and from there you can tweak them to taste:


Obs: As an extra, we could also choose colors for a dark theme.

Use rems instead of px

Define a base font size in pixels for the HTML, and from there, use everything in rems. I tend to use 10px as a base, just because is easier to do the math when needed, and after using it for a while, I started to know before hand how the components are going to relate to each other and show up on the page, this keeps the "guess work" to a minimum.

I don't like to use em because those are calculated in relation with the parent element, with time, things gets crazy and hard to maintain.

Why you should avoid using em:

Media Queries

Define media queries screen sizes, I like to follow the Bootstrap's values than adjust accordantly to the project if needed.

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Ref: https://getbootstrap.com/docs/4.0/layout/overview/

If you are using SASS, you can have mixins ready to use wherever you need. This will look like this:

@mixin bp($point) {
    @if $point == wide {
        @media ('min-width': 1200px) { @content ; }
    } @else if $point == desktop {
        @media ('min-width': 992px) { @content ; }
    } @else if $point == tablet {
        @media ('min-width': 768px)  { @content ; }
    } @else if $point == lg-mobile {
        @media ('min-width': 576px)  { @content ; }

Because we are in a "Mobile-First" world, is always better to think in min-size first. As I said in the beginning, the system is more important than the rule it self, the important thing is consistency and knowing how the pieces fit together, so you don't have to keep coming back to check how thing's were done. (Did I use max-screen or min-screen?)

Semantic HTML

Always write html semantically, in the beginning It might feel like it doesn't matter, but its important for 2 main reasons:

  • Semantic html is important for accessibility, screen readers have a hard time reading badly composed html.
  • When your website starts to get bigger with tones of components flying around, it gets very hard to find and fix bugs. If you organize and use your tags properly, it will be a lot easer to find what you are looking for.

If you compose your html in a semantic and organized way from the begging, you will save a lot of time in the future, and also, you have a more pleasant development experience.

Have a system for organizing your CSS classes

I recommend using BEM just because is a stablished system, you will encounter it more likely than not.

Here's some links to get you going with it:

Coming up next

I'm plan of doing a series on building a "asset panel" or "UI Kit" and put all this concepts into practice.

Remember, consistency is one of the most important things.

Links that might help:

SASS, Beginner to Pro Tutorial

CSS Variables In Our Design System - Codeblog

Use BEM (link to BEM instructions)

Design Systems with Brad Frost - The State of the Web



Atomic Design by Brad Frost

Layout and Composition

Composition over inheritance


Sass vs Scss

A few reasons I love Sass

Sass website:

CSS naming conventions