1,503 words
https://teooliver.me/

Git Flow Basics

test

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:
https://danielkummer.github.io/git-flow-cheatsheet/

Refs:

https://danielkummer.github.io/git-flow-cheatsheet/

https://github.com/nvie/gitflow

https://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow

https://github.com/arslanbilal/git-cheat-sheet

https://www.youtube.com/watch?v=BYrt6luynCI

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

Docker Basics

computer

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>

Sass Media Query Mixin

grid

/*========================
  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} ) {
    @content;
  }
}

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

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

How to Delete a Git Branch (Local and Remote)

test

// 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

test

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
    .src("./assets/scss/**/*.scss")
    .pipe(sass().on("error", sass.logError))
    .pipe(gulp.dest("./assets/css"))
    .pipe(browserSync.stream());
}

function watch() {
  browserSync.init({
    // 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

test

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

computer

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.

Why?

  • 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:

Css

--primary: #059ECC;
--primary-dark: #177B99;
--secondary: #FFD7CC;
--secondary-dark: #D6C5C8 ;
--black:#252629;
--grey:#2E3033;
--white: #E1E7F7;

Or if you you're using Sass

$primary: #059ECC;
$primary-dark: #177B99
$secondary: #FFD7CC;
$secondary-dark: #D6C5C8 ;
$black:#252629;
$grey:#2E3033;
$white: #E1E7F7;

Tip: Color Theory, Color Harmony
https://www.youtube.com/watch?v=_2LLXnUdUIc

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

https://www.color-hex.com/color-palettes/
https://coolors.co/
https://colorpalettes.net/
https://color.adobe.com/create

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:
https://www.youtube.com/watch?v=pautqDqa54I)

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:
https://www.youtube.com/watch?v=ht0W2CsXKS8

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
https://www.youtube.com/watch?v=ht0W2CsXKS8

CSS Variables In Our Design System - Codeblog
https://www.youtube.com/watch?v=tmR9bBXbTTY

Use BEM (link to BEM instructions)
http://getbem.com/

Design Systems with Brad Frost - The State of the Web
https://www.youtube.com/watch?v=2M6dJ2Uynhg

styleguides.io
http://styleguides.io/

design.systems
http://design.systems/

Atomic Design by Brad Frost
https://atomicdesign.bradfrost.com/

Layout and Composition
https://www.youtube.com/watch?v=a5KYlHNKQB8

Composition over inheritance
https://www.youtube.com/watch?v=ZWPMzJfJHnc

Neumorphism.io
https://neumorphism.io/#55b9f3

Sass vs Scss
https://www.youtube.com/watch?v=TymGwiNMlh0

A few reasons I love Sass
https://www.youtube.com/watch?v=1rzjMyOkyoQ

Sass website:
https://sass-lang.com/guide

CSS naming conventions
https://medium.com/free-code-camp/css-naming-conventions-that-will-save-you-hours-of-debugging-35cea737d849