JoshuaFrontEnd

git log
git config --global alias.lg "log --oneline --decorate --all --graph"
git lg

git status
git config --global alias.s "status -s -b"
git s

JoshuaFrontEnd

.centrado-porcentual {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

JoshuaFrontEnd

.centerFlex {
  display: flex;
  justify-content: center;
  align-items: center;
}

JoshuaFrontEnd

(function (window, document, undefined) {
  'use strict';
  
  // Initialize the media query
  var mediaQuery = window.matchMedia('(min-width: 560px)');
  
  // Add a listen event
  mediaQuery.addListener(doSomething);
  
  // Function to do something with the media query

JoshuaFrontEnd

.child {
  /* width: 257px; */
  /* flex: 0 0 257px */
  flex-grow: 0;     /* do not grow   - initial value: 0 */
  flex-shrink: 0;   /* do not shrink - initial value: 1 */
  flex-basis: 257px; /* width/height  - initial value: auto */
}

JoshuaFrontEnd

<style>
    .map-responsive{
        overflow:hidden;
        padding-bottom:56.25%;
        position:relative;
        height:0;
    }
    .map-responsive iframe{
        left:0;
        top:0;

JoshuaFrontEnd

// Suma de multiples inputs al hacer keyup usando solo una clase, convirtiendo enteros a decimales
$('.inputAsumar').on('keyup', function(){
  var total = 0;
  $('.inputAsumar').each( function(){
    //Convirtiendo valor a numero
    total += Number($(this).val());
  });
  //Convirtiendo numero a entero
  console.log(parseInt(total));
  //Alternativamente mostrar resultado en otro input

JoshuaFrontEnd

Create a new temp project

1. $ mkdir sass_gulp_workshop
2. cd into the new directory
3. Initialize NPM: $ npm init --yes
4. Install gulp and gulp-sass packages: $ npm install -D gulp gulp-sass browser-sync
5. Update package.json's scripts section with this key-value pair: "scripts": { "dev": "gulp" }
6. Recreate this file structure in this directory:

• public (directory)
  • css (directory)
  • index.html (file)

JoshuaFrontEnd

//Funciona con gulp 3.9.1 y solo hasta node@10	
//npm init -y	
//npm i -D gulp@3.9.1 gulp-sourcemaps gulp-sass gulp-postcss autoprefixer css-mqpacker sort-css-media-queries browser-sync

const gulp = require('gulp');
const sass = require('gulp-sass');
const postcss = require('gulp-postcss');
const sortCSSmq = require('sort-css-media-queries');
const browserSync = require('browser-sync').create();
const sourcemaps = require('gulp-sourcemaps');

JoshuaFrontEnd

  // slider
  $slick_slider = $('.slider');
  settings_slider = {}
  slick_on_mobile( $slick_slider, settings_slider);

  // slick on mobile
  function slick_on_mobile(slider, settings){
    var mediaQuery = window.matchMedia('(min-width: 769px)');
    mediaQuery.addListener(doSomething);
    function doSomething(mediaQuery) {