A free library of HTML, CSS, JS nuggets Looks like a solid resource. The Content Filter, 3D Curtain Template, and Expandable Project Presentation remind me of the freshness and quality Codrops brings us. CodyHouse →
Tag Archives: web
CSS Grid Layout 2014 Recap
Two posts on CSS Grid Layout: one covering the changes in the spec during 2014, and another one talking about the implementation details in Blink and Webkit. CSS Grid Layout 2014 Recap: Implementation Status → CSS Grid Layout 2014 Recap: Specification Evolution → Related: CSS3 Grid Layout Module, an Introduction → Automatic Placement when using …
Chrome DevTools Animation Controls
Turf.js – Advanced geospatial analysis for browsers and node
var line = turf.linestring([ [-76.09130859375, 18.427501971948608], [-76.695556640625, 18.729501999072138], [-76.552734375, 19.40443049681278], [-74.619140625, 19.134789188332523], [-73.65234375, 20.076570104545173], [-73.157958984375, 20.210656234489853]], { stroke: ‘#f00’ }); var curved = turf.bezier(line); curved.properties = { stroke: ‘#0f0’ }; var result = turf.featurecollection([line, curved]); Uses GeoJSON for all geographic data and expects the data to be standard WGS84 datums. Constructing Points – for example …
Continue reading “Turf.js – Advanced geospatial analysis for browsers and node”
(ab)using CSS3’s :nth-child() selector to invent new ones
When combining :nth-child() with some other pseudo selectors, one can actually create new types of selectors. “:nth-of-m-child” selector /** * This selector will select the third element in a row, * if it is also the third to last element … thus selecting * the 3rd child in a row of 5 elements */ span:nth-child(3):nth-last-child(3) …
Continue reading “(ab)using CSS3’s :nth-child() selector to invent new ones”
You Don’t Need jQuery!
A series of posts in line with the aforementioned You might not need jQuery, From jQuery to Javascript, a reference, and I know jQuery, now what?. Essentially nothing new, yet linking to because it has all handy snippets collected in one place. One thing I do find missing from it is Element#classList. You Don’t Need …
Using SVG Patterns as Fills
Define a <pattern>, give it an id, and then use it as a fill on an other SVG element using said id: <svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <pattern id="circles-1" patternUnits="userSpaceOnUse" width="10" height="10"> <image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmJyAvPgogIDxjaXJjbGUgY3g9IjEiIGN5PSIxIiByPSIxIiBmaWxsPSIjMDAwIi8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10"> </image> </pattern> </defs> </svg> <svg height="100" width="100" style="float:left" class="pattern-swatch"> <rect style="fill: url(#circles-1) #fff;" x="0" y="0" height="100" …
Intro to @viewport & other new Responsive Web Design CSS features
Everybody Scrolls.
We wanted to know how page design impacts user behaviors and to what extent visual cues help users scroll below the fold. To find out, we conducted user testing with 48 participants over 3 days. Everybody Scrolls. → Sidenote: Reminds me of this good old “Life below 600px” Related: Luke Wroblewski also tweeted a few …