config.json

{
  "vars": {
    "@gray-base": "#000",
    "@gray-darker": "lighten(@gray-base, 13.5%)",
    "@gray-dark": "lighten(@gray-base, 20%)",
    "@gray": "lighten(@gray-base, 33.5%)",
    "@gray-light": "lighten(@gray-base, 46.7%)",
    "@gray-lighter": "lighten(@gray-base, 93.5%)",
    "@brand-primary": "darken(#428bca, 6.5%)",
    "@brand-success": "#5cb85c",

clemlatz

/**
 * Smooth scroll animation
 * @param {int} endX: destination x coordinate
 * @param {int) endY: destination y coordinate
 * @param {int} duration: animation duration in ms
 */
window.smoothScrollTo = function(endX, endY, duration) {
  var startX = window.scrollX || window.pageXOffset,
    startY = window.scrollY || window.pageYOffset,
    distanceX = endX - startX,

jasdeepkhalsa

// Long Polling (Recommened Technique - Creates An Open Connection To Server ∴ Fast)
(function poll(){
    $.ajax({ url: "server", success: function(data){
        //Update your dashboard gauge
        salesGauge.setValue(data.value);
    }, dataType: "json", complete: poll, timeout: 30000 });
})();

codediodeio

import * as firebase from 'firebase/app';
import 'firebase/firestore';

var firebaseConfig = {
  // your firebase credentials
};


  // Initialize Firebase
firebase.initializeApp(firebaseConfig);

juanbrujo

<html>
  <head></head>
  <body>
    <div class="noticia">CARGANDO</div>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <script>
      $(function(){

        var url = 'https://www.domain.co/index.xml';
        var news = $('.noticia');

paulund

$("#selectBox").append('<option value="option6">option6</option>');

davidkpiano

As the number of different possible states and transitions between states in a user interface grows, managing styles and animations can quickly become complicated. Even a simple login form has many different "user flows":

https://codepen.io/davidkpiano/pen/WKvPBP

State machines are an excellent pattern for managing state transitions in user interfaces in an intuitive, declarative way. We've been using them a lot on the Keyframers as a way to simplify otherwise complex animations and user flows, like the one above.

So, what is a state machine? Sounds technical, right? It’s actually more simple and intuitive than you might think. (Don’t look at Wikipedia just yet… trust me.)

Let’s approach this from an animation perspective. Suppose you’re creating a loading animation, which can be in only one of four states at any given time:

jakebellacera

How to get the ID of any YouTube Video

This article walks you through how to get the ID of any YouTube video.

How to get a YouTube video ID from a youtube.com page URL

You may be watching the video or just happened to visit a link to a video. The video ID will be located in the URL of the video page, right after the v= URL parameter.

andyyou

Rails 5.2 with webpacker, bootstrap, stimulus starter

This gist will collects all issues we solved with Rails 5.2 and Webpacker

Create Project

# Last few parameters(--skip-* part) is only my habbit not actully required
$ rails new <project_name> --webpack=stimulus --database=postgresql --skip-coffee --skip-test

paulirish

/* bling.js */
window.$ = document.querySelector.bind(document);
window.$$ = document.querySelectorAll.bind(document);
Node.prototype.on = window.on = function(name, fn) { this.addEventListener(name, fn); };
NodeList.prototype.__proto__ = Array.prototype;
NodeList.prototype.on = function(name, fn) { this.forEach((elem) => elem.on(name, fn)); };