ichim-david

# The following recipe works with upstream rails proxy for custom 404s and 500s.
# Errors are usually handled via rails except if proxy is really down, in which case
# nginx needs a bit more configration.

server {
  # ...
  
  location / {
    error_page 404 = @rails; # let rails show a page with suggestions
    try_files maintenance.html @rails;

ichim-david

CSS Layout Debbuger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

ichim-david

var values = [{one : 'value'}, {two: 'value'};
var field = "field";
        var ct_setting = { ctype: ctype,
            settings: [
            ]
        };

        ct_setting.settings[field] = {};

        jQuery.each(values, function(idx, option) {

ichim-david

Harry,

I wanted to first thank you for creating inuitcss which I point my students to in my Object-Oriented CSS class I teach. I do have a philosophical question. From experience, I noticed that my websites have become abstraction heavy, and more often than not code was being duplicated. It is really because abstractions are owned by an object.

For example, I created a simple object called .box with abstractions to change the padding. Later I created an object for alert messages, inline labels, and inputs and noticed that the sizing abstractions were the same. Since then, I moved away from creating abstractions unless they need to target a child element or are SPECIFIC to that object, and began working with atoms.

So:

.box          { }
.box--xs      { padding: 6px; }

ichim-david

Essential JavaScript Links

A curated list by Eric Elliott and friends. Suggest links in the gist comments.

Help us turn this into a proper website!

This is a very exclusive collection of only must-have JavaScript links. I'm only listing my favorite links. Nothing else makes the cut. Feel free to suggest links if you think they're good enough to make this list. The really curious should feel free to browse the comments to find other links. I can't guarantee the quality of links in the comments.

Full Disclosure

ichim-david

/** @jsx React.DOM */
var api = 'http://addressbook-api.herokuapp.com/contacts';

var App = React.createClass({
  mixins: [Routed],

  render: function() {
    return (
      <Root>
        <Index path="/"/>

ichim-david

<?xml version="1.0" encoding="UTF-8"?>
<rules
    xmlns="http://namespaces.plone.org/diazo"
    xmlns:css="http://namespaces.plone.org/diazo/css"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">



<!-- All rules for your theme diazo -->

ichim-david

In reply to Jeremy's tweet, that underscore is 3x smaller (simpler?) than Lodash! https://twitter.com/jashkenas/status/568564455937839106

Apparently, it's only true if you use <script> tag, but if you use lodash's module feature and build your project with browserify(or webpack) you get different numbers. In simple cases underscore can be 4-6 times bigger.

15020 bundle-lodash-without.js
 4820 bundle-lodash-without.min.js
 1647 bundle-lodash-without.min.js.gz

ichim-david

#!/bin/bash
files=$(git diff --cached --name-only | grep '\.js$')

# Prevent ESLint help message if no files matched
if [[ $files = "" ]] ; then
  exit 0
fi

echo $files | xargs eslint

ichim-david

$("<a class='sdfdaf' />", { href: 'ddd', text:'Explore chart interactively'});
// "<a class='sdfdaf' />"

// correct way 
$("<a />", { href: 'ddd', text:'Explore chart interactively', class:'sdfdaf'});
// <a href="ddd" class="sdfdaf">Explore chart interactively</a>