ol {
counter-reset: section;
list-style-type: none;
}
ol li:before {
counter-increment: section;
content: counters(section, ".") " ";
}
var my_num = 123; | |
var my_str = 'abc'; | |
var my_obj = { name: 'mark' }; | |
var my_arr = ['a', 'b', 'c']; | |
var my_bool = true; | |
var new_num = my_num; | |
var new_str = my_str; | |
var new_obj = my_obj; | |
var new_arr = my_arr; |
#!/usr/bin/env ruby | |
=begin | |
install Sinatra: gem install sinatra | |
install Shotgun: gem install shotgun (this auto-reloads sinatra on every http request - which means every time you make a change in your code you don't have to stop then start sinatra) | |
To just run your code using Sinatra: ruby name-of-file.rb | |
To run your code using Shotgun (which is just Sinatra but with ability to auto-reload when changes are made to files): shotgun name-of-file.rb | |
The following examples are run using Shotgun and the URL is: http://127.0.0.1:9393/ |
var doc = document, | |
body = doc.body, | |
inputs = doc.getElementsByTagName("input"), | |
txtarea = doc.getElementsByTagName("textarea"), | |
combined = [], | |
len, | |
placeholder, | |
lastInputSelected; | |
/** |
var parser = document.createElement('a'); | |
parser.href = "http://example.com:3000/pathname/?search=test#hash"; | |
parser.protocol; // => "http:" | |
parser.hostname; // => "example.com" | |
parser.port; // => "3000" | |
parser.pathname; // => "/pathname/" | |
parser.search; // => "?search=test" | |
parser.hash; // => "#hash" | |
parser.host; // => "example.com:3000" |
If you set the <body>
element to have font-size: 100%
then you are effectively setting the pixel size base line to be 16px
.
So now 1em
equals 16px
.
To size either our text or our layouts to match what the designer has specified in pixels we use the following calculation:
target / context = result
This means if your target font size for a <h1>
is 24px and your 'context' (the container) is 16px then you calculate this as:
// Why you don't need arguments.callee: | |
var factorial = function callee(n) { | |
if (n === 0) { | |
return 1; | |
} | |
return n * callee(n - 1); | |
}; | |
// In a standard compliant ES3 or ES5 implementation: |
Below is how I am currently structuring my CSS to be more object-oriented (with a little assistence from Sass):
- Base
- Helpers
- Variables (see my Guide to Sass)
- Mixins (careful and limited usage - see my Guide to Sass)
- Extensions (careful and limited usage - see my Guide to Sass)
- Layout
#Overview - setting up our git workflow
This set-up works for our team as we don't mind pushing directly to a development
branch, but this wouldn't work for other companies as the development branch could potentially get broken fairly quickly and with multiple developers working on this singular branch would be awkward to locate issues and fix - but for a small team this seems to work fine.
##Initial User Set-Up The first developer to work on the new project will go through this process:
-
<github>
Create repository on GitHub company account -
``
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<title>Fixed Toolbars Polyfill</title> | |
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css"> | |
<link rel="stylesheet" href="jquery.mobile.fixedToolbar.polyfill.css"> | |
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> |