JSFiddle

  • Using forEach on document.querySelectorAll #4 is the latest revision

    Using forEach on document.querySelectorAll 

    let selector = document.querySelectorAll("a")
let links    = Array.from(selector)

links.forEach(function(link){
	link.addEventListener("click", function(event){
  	event ...

  • Basic Column Chart - CanvasJS JavaScript Charts #13 is the latest revision

    Basic Column Chart - CanvasJS JavaScript Charts 

    var chart = new CanvasJS.Chart("chartContainer",
	{
        
      data: [
      {
        type: "column",
        dataPoints: [
        { x: 10, y: 71 },
        { x: 20, y: 55},
        { x: 30 ...

  • Vertical align image with flex #4 is the latest revision

    Vertical align image with flex 

    <div>
  <img src="http://i.giphy.com/xYHscQ1Np55i8.gif" width="300">
</div>

  • Vertical align with flexbox #6 is the latest revision

    Vertical align with flexbox 

    <div>
  <img src="http://i.giphy.com/xYHscQ1Np55i8.gif" width="300">
</div>

  • Event delegation pure JS #6 is the latest revision

    Very simple implementation of event delegation in pure JS 

    var relayEvent = function(element, target, eventName, fn){

	var targetEl  = document.querySelector(target);
  var elementEl = document.querySelector(element);
  
	elementEl.addEventListener(eventName ...

  • Extract colors from an image #363 is the latest revision

    Get color swatches from image with Vibrant.js. Extract colors from an image. 

    dropZone = document.getElementById "drop"

handleFileSelect = (event) ->
    event.stopPropagation()
    event.preventDefault()
    
    files = event.dataTransfer.files
    f = files[0]
    reader = new FileReader ...

  • Custom checkboxes CSS Animation #23 is the latest revision

    Custom checkboxes CSS Animation 

    <!-- inspired by https://dribbble.com/shots/1927803-Toggle -->

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    
<form action="">
    <label>
        <input type="checkbox" />
        <div><i class="fa fa-dribbble"></i></div>
    </label>
        
    <label>
        <input type="checkbox" checked />
        <div><i class="fa fa-jsfiddle"></i></div>
    </label>
    
    <label>
        <input type="checkbox" />
        <div><i class="fa fa-github"></i></div>
    </label>
    
    <label>
        <input type="checkbox" />
        <div><i class="fa fa-twitter"></i></div>
    </label>
</form>

  • 123

    No-Library (pure JS), HTML, CSS, JavaScript 

    No code. How about adding some?

  • Responsive text columns #11 is the latest revision

    Responsive text columns 

    <div class="cols num_2">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat veritatis pariatur tempora suscipit. Provident eveniet laborum necessitatibus odio quis dolor ...</div>

  • SCSS flexible/fluid column mixin #10 is the latest revision

    SCSS flexible/fluid column mixin 

    <div class="cols num_2">
    <div class="col"></div>
    <div class="col"></div>
</div>

<div class="cols num_3">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>

<div class="cols num_4">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>

<div class="cols num_5">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>