// IE Detection (for alternative since icon font is being blocked) if((navigator.appVersion.indexOf(‘MSIE’)!== -1)||(navigator.appVersion.indexOf(‘Windows’)!== -1)){ rm.isIE = true; $(‘html’).addClass(‘ie’); }

The best way I found to size inline SVG graphics: Trim artboard to artwork bounds in Illustrator (Object > Artboards > Fit to Artwork Bounds) Save as SVG and then open it in a text editor Leave the viewBox dimensions exactly as they are Calculate the % difference between width and height in the viewBox values […]

Chrome extension is just some HTML, CSS and JavaScript that allows you to add some functionality to Chrome through some of the JavaScript APIs Chrome exposes. An extension is basically just a web page that is hosted within Chrome and can access some additional APIs Browser Action extension is a basic Chrome extension manifest.json … […]

<style> .myColumns { column-count: 2; -webkit-column-count: 2; -moz-column-count: 2; column-width: 250px; /* MINIMUM WIDTH */ -webkit-column-width: 250px; -moz-column-width: 250px; /* …or use COLUMNS shorthand… */ columns: 4 250px; -webkit-columns: 4 250px; -moz-columns: 4 250px; column-gap: 4em; /* Default is 1em */ -webkit-column-gap: 4em; -moz-column-gap: 4em; column-rule: 1px dotted #ddd; -webkit-column-rule: 1px dotted #ddd; -moz-column-rule: 1px […]

See the Pen Super Simple requestAnimationFrame Thing by Taylor Johnson (@webninjataylor) on CodePen.

Fiddle Resources API

<div id=”bigvid”> <video id=”big-video-vid_html5_api” class=”vjs-tech” preload=”auto” data-setup=”{}” webkit-playsinline=”” autoplay=”autoplay” src=”http://barrelny.com/recap/2012/wp-content/themes/barrel-portfolio/im/office_small.mp4″ loop></video> </div> #bigvid { position: absolute; background-color: #000; height: 100%; width: 100%; }

<iframe src=”http://jsfiddle.net/USERNAME/FIDDLE/embedded/result,resources,html,css,js” width=”100%” height=”300″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe>

Tips You can add scripts to page layouts after a snippet’s <div></div>, but not within the snippet in the layout file Bootstrap JS files conflict with SP core; edits won’t save in browser HTML for SharePoint Ingestion No <form> tags No <style> tags Use ms-design-css-conversion=”no” in the CSS <link> tag if using web fonts SP […]

Web developers have their panties all up in a twist over this issue.  Here is the boiled-down comparison… Responsive: The distilled definition of a responsive web design is that it will fluidly change and respond to fit any screen or device size. Coined several years ago by Ethan Marcotte and first introduced in his A List Apart article, […]

The standard is to use this CSS… .hidden { height: 1px; left: -10000px; overflow: hidden; position: absolute; top: auto; width: 1px; }

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 […]

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 […]