JoshuaFrontEnd

const gulp = require('gulp');
const sass = require('gulp-sass');
const postcss = require("gulp-postcss");
const sortmediaqueries = require('postcss-sort-media-queries');
const autoprefixer = require("autoprefixer");
const cssnano = require("cssnano");
const browserSync = require('browser-sync').create();
const sourcemaps = require('gulp-sourcemaps');

//compile scss into css

JoshuaFrontEnd

.hide-text {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

JoshuaFrontEnd

html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1 0 auto;
}

JoshuaFrontEnd

/**
* Get YouTube ID from various YouTube URL
* @author: takien
* @url: http://takien.com
* For PHP YouTube parser, go here http://takien.com/864
*/

function YouTubeGetID(url){
  var ID = '';
  url = url.replace(/(>|<)/gi,'').split(/(vi\/|v=|\/v\/|youtu\.be\/|\/embed\/)/);

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) {

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

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

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

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

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