james-jlo-long

JLo's CSS Resource List

Or "Everything you know about CSS is wrong."

First thing to learn: classitis is bollocks! Giving elements multiple class names makes coding a lot easier!

Websites

OOCSS

Although a better description is on Smashing Magazine and Vanseo Design.

james-jlo-long

JLo's JavaScript Resource List

Or "Everything you know about JavaScript is wrong."

Managing jQuery Validate

jQuery Validate massively simplifies form validation. It's very extensible and will handle almost every situtation in which you can find yourself. But, if you're not careful, it can become an horrific plugin on a large site.

Without thinking, the errorPlacement function can end up looking like this:

james-jlo-long

* {

    &,
    &:after,
    &:before {
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }

james-jlo-long

Your CSS sucks

Contents

• Styles aren't modular
• Confused content and container
• Not re-using styles
• Changing too much
• No naming convention

james-jlo-long

<?php

class Foo {

    public function __construct($name) {

        $this->name = $name;

    }

james-jlo-long

// Generate the extra-extra small columns
// These go from a screen width of 0 to (@screen-xs-min - 1), existing below XS.

.make-xxs-column(@columns; @gutter: @grid-gutter-width) {

    min-height:    1px;
    padding-left:  (@gutter / 2);
    padding-right: (@gutter / 2);
    position:      relative;

james-jlo-long

var dom = (function () {

    'use strict';

    var dom = {};

    function isElement(element) {
        return element instanceof HTMLElement;
    }

james-jlo-long

// Array first and last
// 
//      var array = [1, 'two', 3, 'four', 5];
//      function isString(o) {
//          return typeof o === 'string';
//      }
//      util.Array.first(array); // -> 1
//      util.Array.first(array, isString); // -> 'two'
//      util.Array.last(array); // -> 5
//      util.Array.last(array, isString); // -> 'four'

james-jlo-long

/*
TODO: Allow Query#parseString to correctly parse square brackets.
TODO: Handle nested objects correctly.
 */
var Query = (function () {

    "use strict";

    var hasOwn = Object.prototype.hasOwnProperty;

james-jlo-long

var PW = (function () {

    "use strict";

    var sym = "!£$%^&*()-_=+[{]};:@#~,<.>/?\\|";
    var getRand = (n) => Math.floor(Math.random() * n);

    var basic = ()  => (
        btoa(getRand(Date.now()))
            .replace(/=+$/, "")