MetricsGraphics.js is a library built on top of D3 that is optimized for visualizing and laying out time-series data. It provides a simple way to produce common types of graphics in a principled, consistent and responsive way. The library currently supports line charts, scatterplots and histograms as well as features like rug plots and basic …
Marking HTTP As Non-Secure
My name is Bramus and I approve this message: We, the Chrome Security Team, propose that user agents (UAs) gradually change their UX to display non-secure origins as affirmatively non-secure. We intend to devise and begin deploying a transition plan for Chrome in 2015. The goal of this proposal is to more clearly display to …
Ionic Ions
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 …
Flexbox adventures
Up until reading Flexbox Adventures I hadn’t really given much thought to how flexbox grow exactly works. If you do want to know: Available space = (Container size – Flex-basis siblings total). Flex Item size = Basis + ((Available space / Total Grow nums) * Individual grow num). A recommended read. Flexbox adventures → When …
Il Capo
Italian artist and filmmaker Yuri Ancarani captures the otherworldly landscape of a marble quarry in the Apuan Alps, Northwest Italy, as Il Capo (The Chief) guides his men through the extraction process. That shot starting at 2:00 is fascinating. It’s like watching a puppeteer manipulate his puppets.
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
On PHP Version Requirements
Anthony Ferrara (ircmaxell): I learned something rather disturbing yesterday. CodeIgniter 3.0 will support PHP 5.2. To put that in context, there hasn’t been a supported or secure version of PHP 5.2 since January, 2011. That’s nearly 4 years. To me, that’s beyond irresponsible… It’s negligent… That’s worrying indeed. WordPress for example still runs on PHP …
SlowmoJS – JavaScript in Slow Motion
SlomoJS is an attempt to make learning JavaScript and computational thinking easier by making the execution of JS code more transparent. Reminds me of the aforementioned CHOC and Bret Victor’s Learnable Programming. SlowmoJS → (via @vasilis) Related: Using CHOC I once made this Bouncing Ball Visualisation to show my students