In your console, type… var sheets = document.styleSheets; var rules = 0; for(i=0; i < sheets.length; i++){ if(sheets[i].cssRules !== null){ rules = rules + sheets[i].cssRules.length; } } console.log(‘Rules = ‘+rules); IE limits rules to 4,095.

var elem = document.getElementById(‘myForm’); var event = new Event(‘submit’); elem.dispatchEvent(event);

You don’t have to link to an external image file when using an <img> element in HTML, or declaring a background-image in CSS.  You can embed the image data directly into the document with data URIs. data:[<mime type>][;charset=<charset>][;base64],<encoded data> Resources Conversion Tool CSS Tricks: Data URIs Data URIs Explained

text-align: justify; works on any inline element. Fiddle Resources Text-align: Justify and RWD

Add this to your PHP file to allow the page to reload when the user clicks their browser’s back button; it’s very handy when navigating back-and-forth from a search results page… header(“Cache-Control: private, must-revalidate, max-age=0”); header(“Pragma: no-cache”); header(“Expires: Sat, 26 Jul 1997 05:00:00 GMT”); // A date in the past

git diff develop:sports/views.py feature/sports_team_fronts_links:sports/views.py

DNS Prefetching to speed page loads <link rel=”dns-prefetch” href=”//fonts.googleapis.com”> Link Prefetching to speed subsequent page loads on your site <link rel=”prefetch” href=”http://daker.me/2013/05/hello-world.html” /> or for even faster loads use <link rel=”prerender” href=”http://daker.me/2013/05/hello-world.html” /> Download Attribute to force a file to download rather than going to that page …<a href=”download_pdf.php?id=15″ download=”myfile.pdf”>Download PDF</a> Regular Expressions to validate form fields with […]

top: 17px; /* For Non-IE */ top: 8px\9; /* For IE */

@font-face { font-family: ‘MyWebFont’; src: url(‘webfont.eot’); /* IE9 Compat Modes */ src: url(‘webfont.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */ url(‘webfont.woff’) format(‘woff’), /* Modern Browsers */ url(‘webfont.ttf’) format(‘truetype’), /* Safari, Android, iOS */ url(‘webfont.svg#svgFontName’) format(‘svg’); /* Legacy iOS */ }

The principal options for 3D objects are Canvas and WebGL WebGL provides a method to talk to the graphics card of the host computer directly so you can take advantage of its hardware acceleration WebGL is normally in JavaScript and can be quite challenging to pick up, but there are libraries like three.js to make […]

The functions.php file cannot have any spaces at the end.

Create .htaccess and .htpasswd files in the folder One username and password per line, separated by a colon Make sure to set the right privileges to the files so Apache can use them chmod 0644 .htaccess chmod 0644 .htpasswd .htaccess File AuthType Basic AuthName “restricted area” AuthUserFile /home6/path/to/the/directory/you/are/protecting/.htpasswd require valid-user .htpasswd File username:encryptedPassword Resources Password Generator

Integration tests are for how users interact with an app, and unit tests are for small modules of code QUnit is a framework for writing JavaScript unit tests Simple Implementation Page (tests.php) … <link rel=”stylesheet” href=”css/qunit-1.11.0.css”> … <div id=”qunit”></div> <div id=”qunit-fixture”></div> … <script type=”text/javascript” src=”js/qunit-1.11.0.js”></script> <script type=”text/javascript” src=”js/tests.js”></script> tests.js test(“hello test”, function(){ ok( 1 == “1”, […]

Create images that are 2x the size they need to be at 72dpi and resize to 1x in the CSS via width and height (Easy High DPI Images). In the early days, computer displays had a pixel density of 72 or 96dpi (dots per inch). Displays gradually improved in pixel density, largely driven by the mobile […]

function processUserInput(command) { switch (command) { case “north”: movePlayer(“north”); break; case “east”: movePlayer(“east”); break; case “south”: movePlayer(“south”); break; case “west”: movePlayer(“west”); break; case “look”: describeLocation(); break; case “backpack”: showBackpack(); break; } } Can be turned into… var commandTable = { north: function() { movePlayer(“north”); }, east: function() { movePlayer(“east”); }, south: function() { movePlayer(“south”); }, […]

Examples of using .fail() method to handle errors via chaining… onSubmitEmailForm: function(e) { e.preventDefault(); if (this.isValid(this.$emailForm)) { $.ajax({ type: ‘POST’, url: this.$emailForm.attr(‘action’), data: this.$emailForm.serialize() }).done(_.bind(function(response) { this.$container.hide(); this.$(‘.email-success’).show(); PubSub.trigger(‘uotrack’, ‘UtilityBarShareEmail’); }, this)).fail(_.bind(function(response){ alert(“Your text did not match the image.”); }, this)); } }, $.get(“test.php”) .done(function(){ alert(“$.get succeeded”); }) .fail(function(){ alert(“$.get failed!”); }); Resources jQuery API

box-sizing: border-box; will take padding into account so 100% width doesn’t spill off the page and 100px item with 10px padding stays at 100px instead of 120px…  The padding is counted inside the width… [NOTE: May need vendor prefixes and IE hack] % values for widths… target(px)/context(px) = result%) Media queries Resources http://www.youtube.com/watch?feature=player_embedded&v=wDdrI7N-mWM

<figure> <img alt=”” src=”path/to/your/image.jpg” /> <figcaption>Here is the legend for your image</figcaption> </figure> counter-reset which is used to initialize and reset one or several counters counter-increment which is used to increment one or several counters counter() is a valid value for ::before and ::after pseudo-elements, accepting a counter name as parameter in order to display […]

 Functions are objects A Function object contains a string which contains the Javascript code of the function For Javascript, the distinction between code and data is sometimes blurred One benefit of this function-as-object concept is that you can pass code to another function in the same way you would pass a regular variable or object […]

Define CSS breakpoints with media queries (ie. button for small width vs. full menu for wider) Hide button for wider, thus… The JS can react when the button is visible or not for appropriate device behaviors Resources Behavioral Breakpoints

Things to consider when developing in today’s web landscape: Screen size Input types (keyboard, mouse, touch) Common postures/modes of use (ie. phone users mostly use just their thumb which warrants larger touch areas and single-column layout) Consider having content on sides of screen for tablets instead of the traditional middle of the screen for laptops and […]

Underscore.js is a tiny JavaScript utility library that makes working with some of the common data structures used in JavaScript much easier Common Methods _.union(myArray2, myArray3) to concatenate two arrays _.uniq(myArray3) to strip duplicates from array _.zip(myArray, myArray2) to return arrays where the nth value of each array is paired [0, 0], [1, 1], [2, […]

Styling rules for empty cells in a table… td:empty { background: #777; } Resources Vanishing Acts: The CSS :empty Selector

Be very careful when using transition-property: all. You will get TransitionEnd events for properties that you didn’t expect to ever transition Be careful when using shorthand properties, because the number of triggered events varies between browsers Opera and IE don’t trigger events when a negative delay cancels out the duration WebKit has real issues with the priority of properties such […]

Save to local storage via .setItem() with a key/value pair localStorage.setItem(‘my_key’, ‘array,string,whatever’); Pull from local storage via .getItem() using the key localStorage.getItem(‘my_key’);