Reqres – Test your front-end against a real API

Reqres simulates real application scenarios. If you want to test a user authentication system, Reqres will respond to a successful login/register request with a token for you to identify a sample user, or with a 403 forbidden response to an unsuccessful login/registration attempt. Great to see an initiative like this. Nearly three years ago I …

MetricsGraphics.js

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 …

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 …

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" …