movii

Libraries

• 960 Grid System - An effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.
• Compass - Open source CSS Authoring Framework.
• Bootstrap - Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
• Font Awesome - The iconic font designed for Bootstrap.
• Zurb Foundation - Framework for writing responsive web sites.
• SASS - CSS extension language which allows variables, mixins and rules nesting.
• Skeleton - Boilerplate for responsive, mobile-friendly development.

Guides

movii

Libraries

• jQuery - The de-facto library for the modern age. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
• Backbone - Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
• AngularJS - Conventions based MVC framework for HTML5 apps.
• Underscore - Underscore is a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects.
• lawnchair - Key/value store adapter for indexdb, localStorage

movii

# you have ctags but it does not work...
$ ctags -R --exclude=.git --exclude=log *
ctags: illegal option -- R
usage: ctags [-BFadtuwvx] [-f tagsfile] file ...

#you need to get new ctags, i recommend homebrew but anything will work
$ brew install ctags

#alias ctags if you used homebrew
$ alias ctags="`brew --prefix`/bin/ctags"

movii

How to setup Let's Encrypt for Nginx on Ubuntu 16.04 (including IPv6, HTTP/2 and A+ SLL rating)

There are two main modes to run the Let's Encrypt client (called Certbot):

• Standalone: replaces the webserver to respond to ACME challenges
• Webroot: needs your webserver to serve challenges from a known folder.

Webroot is better because it doesn't need to replace Nginx (to bind to port 80).

In the following, we're setting up mydomain.com. HTML is served from /var/www/mydomain, and challenges are served from /var/www/letsencrypt.

movii

Local virtualhost SSL websites on Mac OS Sierra

These instructions will guide you through the process of setting up a wildcard SSL for your local virtualhosts for offline development. Most importantly, this configuration will give you the happy, green lock in Chrome.

These instructions have only been tested on Mac OS Sierra using the pre-installed Apache and PHP versions. These instructions also assume you have virtualhosts set up locally already.

---

Configuring SSL

movii

Copied from http://code.lancepollard.com/complete-list-of-html-meta-tags/

Basic HTML Meta Tags

<meta charset='UTF-8'>
<meta name='keywords' content='your, tags'>
<meta name='description' content='150 words'>
<meta name='subject' content='your website's subject'>
<meta name='copyright' content='company name'>

movii

Git Submodules basic explanation

Why submodules?

In Git you can add a submodule to a repository. This is basically a repository embedded in your main repository. This can be very useful. A couple of advantages of using submodules:

• You can separate the code into different repositories.

movii

# ~/.ssh/config

Host jump
  User ubuntu
  HostName 12.345.67.89
  IdentityFile /path_to/jump/pem_file

Host remote-server
  User ubuntu
  Hostname remote.server.domain

movii

#
# see also: 
# https://en.wikibooks.org/wiki/OpenSSH/Cookbook/Multiplexing
# http://blog.scottlowe.org/2015/12/11/using-ssh-multiplexing/
#
# you may want to use connection multiplexing on the jumphost
Host jump-host
Hostname jump-host.example.com
ForwardAgent yes
ControlPath ~/.ssh/cm-%r@%h:%p

movii

Just like any good element inspector helps you debug styles, accessibility inspection in the browser can help you debug HTML and ARIA exposed for assistive technologies such as screen readers. There's a similar tool in Safari (and reportedly one in Edge) but I like the Chrome one best.

As an internal Chrome experiment, this tool differs from the Accessibility Developer Tools extension in that it has privileged Accessibility API access and reports more information as a result. You can still use the audit feature in the Chrome Accessibility Developer Tools, or you could use the aXe Chrome extension. :)

To enable the accessibility inspector in Chrome stable:

1. Go to chrome://flags/#enable-devtools-experiments to enable Devtools experiments
2. Open developer tools, go to Setting