colinmeinke

// Load the assertion library
var chai = require('chai'),
    should = chai.should();

describe('Hello world example', function() {

  // This should pass
  it('should be a string', function() {
    var hello_world = 'hello world';
    hello_world.should.be.a('string');

colinmeinke

{
  "draw_white_space": "all",
  "ensure_newline_at_eof_on_save": true,
  "font_size": 20,
  "rulers": [
    62,
    80
  ]
}

colinmeinke

#Front-end structure

A set of rules to organise big front-end code. This experiment in extreme abstraction would allow for encapsulation of your front-end modules. It could be the base for development of a set of common front-end patterns.

##Block structure

All HTML, CSS and JS should be contained within the blocks directory.

/public/blocks/block_name/...

colinmeinke

// Defaults
$base_font_size: 16px;
$rem_fallback: true;

// Usage: rem(16px);
@function rem(
  $size,
  $base_font_size: $base_font_size
) {
  @return #{$size / $base_font_size}rem;

colinmeinke

##GET:

• /users
• /users/1

{
    "id": 1,
    "name": "Colin",
 "drinks_requested": 10,

colinmeinke

#Learn a skill from a real life person

---

[X] Hi, I’m Luke

Learn Ruby in 4 hours
Sat 15th Nov 2014, 1pm - 5pm
London, UK

colinmeinke

<div class="text-box">
  <h1 class="text-box__title">
    Hello world
  </h1>
  <p class="text-box__description">
    Description
  </p>
</div>

colinmeinke

Harry Roberts has written an epic article where he suggests breaking down classes into objects (o-), components (c-), utilities (u-), themes (t-), states (is-, has-) and a couple of others (_, js-, qa-). He uses this namespacing method to make the code he writes more readable and maintainable at scale.

I've got a slightly different take on it. I would argue that Harry's method of adding class types adds complexity to our CSS. With BEM naming conventions and Sass I believe

colinmeinke

const getArticles = async () => {
  try {
    const response = await fetch( 'articles.json' );
    const data = await response.json();

    data.articles.forEach( article => {
      let { author, title } = article;
      console.log( `${title} written by ${author}` );
    });
  } catch ( e ) {

colinmeinke

import React, { Component } from 'react';
import { baseStyle, loadingStyle } from './buttonStyle';

class Button extends Component {
  render () {
    return (
      <button
        style={{
          ...baseStyle,
          ...( this.props.isLoading ? loadingStyle : {}),