jareware

⇐ back to the gist-blog at jrw.fi

Advanced SCSS

Or, 16 cool things you may not have known your stylesheets could do. I'd rather have kept it to a nice round number like 10, but they just kept coming. Sorry.

I've been using SCSS/SASS for most of my styling work since 2009, and I'm a huge fan of Compass (by the great @chriseppstein). It really helped many of us through the darkest cross-browser crap. Even though browsers are increasingly playing nice with CSS, another problem has become very topical: managing the complexity in stylesheets as our in-browser apps get larger and larger. SCSS is an indispensable tool for dealing with this.

This isn't an introduction to the language by a long shot; many things probably won't make sense unless you have some SCSS under your belt already. That said, if you're not yet comfy with the basics, check out the aweso

nhusher

var React = require('react'),
    utils = require('../util/react-dom-utils'),
    html  = utils.html,
    make  = utils.make;

var Chevron = make(function (p) {
    var points = [
        "M13.0490629,0.160143149",
        "C13.2439546,-0.0533810496",
        "13.6018161,-0.0533810496",

Dammmien

var nodes = [
    {
        links: [ 1, 3 ], // node 0 is linked to node 1 and 3
        weightLinks: [ 5, 15 ], // the distance between node 0 and 1 is 5, between 0 and 3 is 15
        distance: Infinity
    }, {
        links: [ 0, 2 ], // node 1 is linked to node 0 and 2
        weightLinks: [ 5, 5, ], // the distance between node 1 and 0 is 5, between 1 and 2 is 5
        distance: Infinity
    },

freakingawesome

import Html exposing (..)
import Html.App exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Html.Attributes exposing (..)
import Http
import Task exposing (Task)
import Json.Decode as Json exposing ((:=))

type Msg

yang-wei

Should be work with 0.18

Destructuring(or pattern matching) is a way used to extract data from a data structure(tuple, list, record) that mirros the construction. Compare to other languages, Elm support much less destructuring but let's see what it got !

Tuple

myTuple = ("A", "B", "C")
myNestedTuple = ("A", "B", "C", ("X", "Y", "Z"))

abiodun0

function mapValues(obj, fn) {
  return Object.keys(obj).reduce((result, key) => {
    result[key] = fn(obj[key], key);
    return result;
  }, {});
}

function pick(obj, fn) {
  return Object.keys(obj).reduce((result, key) => {
    if (fn(obj[key])) {

busypeoples

Basic setup for using Enzyme/Mocha/Chai with create-react-app

This is a temporary solution. Might change in the near future, this depends on how create-react-app will implement testing.

create-react-app quick-test-example

cd quick-test-example

npm run eject

cscalfani

Type Safe JSON Decoding in Elm

The power of a Static Typed language can seem magical at first. But the goal here is to take a tiny peak behind that curtain.

Elm's implementation of JSON parsing is type safe and how it achieves that can seem like a mystery. Even though I got the code to work, it took me a while to fully understand how it works.

I'm writing it down here for 2 reasons. To help others gain a greater understanding of Types and so I don't forget what I learned.

Word of Caution

dennisreimann

{-

   This file is a reaction to the article "A small dive into, and rejection of, Elm":
   https://hackernoon.com/a-small-dive-into-and-rejection-of-elm-8217fd5da235#.9w3ml4r6b

   I think constructive criticism is very welcome in the Elm community. Pointing out
   possibilities for documentation improvements, mentioning missing features or ways
   in which the language could evolve etc. are imho a vital part of a good community.

   However, the article above is neither well informed nor constructive. IMHO ranting

DrBoolean

const {Map} = require('immutable-ext')
const Id = require('fantasy-identities')
const Task = require('data.task')

const defs = {
  Band: {
    dino_jr: {
      name: 'Dinosaur Jr',
      members: 3,
    },