dmfrancisco

-# views/layouts/application.html.haml

!!!
%html
  %head
    %title Web App
    = render '/layouts/common_stylesheets' # Stylesheets common to all pages
    = render '/layouts/common_javascripts' # Javascript files common to all pages
    = csrf_meta_tag
  %body

dmfrancisco

/*
 *  Custom styles for Trello.com
 *  ----------------------------
 *
 *  Before: http://drop.dmfranc.com/8ed1
 *  After (high contrast): http://drop.dmfranc.com/kzdp
 *  After (low contrast): http://drop.dmfranc.com/dEqy
 *
 *  To use this stylesheet, setup github.com/stewart/dotcss or a similar software.
 *  These styles target only webkit-based browsers (for now).

dmfrancisco

BEM – meaning block, element, modifier – is a front-end naming methodology. CSSWizardry uses a naming scheme based on BEM, but honed by Nicolas Gallagher. The naming convention follows this pattern:

.block {}
.block__element {}
.block--modifier {}

• .block represents the higher level of an abstraction or component
• .block__element represents a descendent of .block that helps form .block as a whole
• .block--modifier represents a different state or version of .block

dmfrancisco

New work, new branch

All work happens in a topic branch. Nothing gets done in master — master should always be stable, clean, and ready for a release. Let’s imagine that I am adding some responsive features in a branch called feature/responsive.

Firstly, I make sure my local copy of master is fully up to date with remote. After pushing and pulling, I create my topic branch off of master:

git checkout -b feature/responsive && git push -u

There are two things happening here, firstly I check out a branch called feature/responsive (that didn’t yet exist). Next, I want to set feature/responsive to track a remote branch of the same name, this is the git push -u. This second command just means that I can run git push and git pull as just that. Without setting up remote tracking, I would have to run git push origin feature/responsive and git pull origin feature/responsive every time.

dmfrancisco

Super quick installation (for the lazy ones)

$ curl https://gist.githubusercontent.com/dmfrancisco/8dc4057a8585af2de0c9/raw/install.sh | sh

If you're running Linux replace curl with wget -qO-.
Restart your bash shell to put the changes in effect.

---

Installing this manually

dmfrancisco

Another Git Workflow *

This workflow is heavily based on the branching model presented by Vincent Driessen on his blog and applies its tool, git-flow, to make it extremely easy to follow.

git-flow is a collection of Git extensions to provide high-level opinionated operations that fit seamlessly into the usual development cycle of agile projects for the web. Its structure includes a development branch and topic branches for features, release branches for your staging environment and a master branch for production. It also offers a neat way to fix bugs already under production. Finally, each operation explains what was done after its execution, which helps you understand commands while you are not used to them yet.

So you should start by installing git-flow. Next, initialize a new repository or choose an existing one:

git flow init

dmfrancisco

body {
    background: #fff !important;
} 

#header {
    background: #1B98F8 !important;
    box-shadow: none !important;
} 

.board-canvas {

dmfrancisco

import React from "react";
import ReactDOM from "react-dom";
import Gideo, { Audio, Video, animatable } from "@robo54/gideo";
import "typeface-montserrat";
import locationIcon from "./location.svg";

const colors = {
  primary: "#7c4dff",
  black: "#1a1f21",
  white: "#fff"

dmfrancisco

import React from "react";
import ReactDOM from "react-dom";

import Gideo, { Audio, Video, animatable } from "@robo54/gideo";

import "typeface-roboto";
import "typeface-lato";
import "typeface-oswald";
import "typeface-raleway";
import "typeface-merriweather";

dmfrancisco

Verifying my Blockstack ID is secured with the address 1NRyGeUqKZredmEV6LFnq1h6yzkf65YPMr https://explorer.blockstack.org/address/1NRyGeUqKZredmEV6LFnq1h6yzkf65YPMr