Under the pressure of deadlines and endless change requests, under the weight of years of legacy, code becomes unmaintainable. With the right tools, techniques, and mindset, any codebase can be brought under test, and be refactored towards a better architecture. Let’s skip the theory and dive straight into the spaghetti code. In a live coding …
Category Archives: Elsewhere
Trending at Instagram
We identified three main elements of a good trend: Popularity – the trend should be of interest to many people in our community. Novelty – the trend should be about something new. People were not posting about it before, or at least not with the same intensity. Timeliness – the trend should surface on Instagram …
Targetting the OS X System Font in CSS
body { font-family: system-font, -webkit-system-font, -apple-system-font, “.SFNSDisplay-Regular”, HelveticaNeue, LucidaGrande; } On a fresh install of OS X 10.11 (El Capitan) there’s no San Francisco font installed. But it’s the system font, so how is this possible? Hence the sort of magic above to actually get it working. I Left My System Fonts in San Francisco …
Layers of Technical Debt and Complexity
On July 8, 2015 the New York Stock Exchange went down due to a software glitch. Over at Medium, Zeynep Tufekci went into detail on how it comes that software sucks. Software sucks for many reasons, all of which go deep, are entangled, and expensive to fix. […] LAYERS AND LEGACIES: A lot of software …
Material Design Lite
Material Design Lite lets you add a Material Design look and feel to your websites. It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience that is immediately accessible. By the folks at Google Material Design Lite → Related: Paper Elements, a …
Getting Ready for PHP 7
When PHP 5.6 was snooping around the corner I prepared this “Getting Ready for PHP 5.6” post to get one started with the new things that made it into the language. Now that PHP 7 is in beta, it’s time to do the same for that version. However, turns out a few bright minds on …
The anatomy of a credit card form
At Wave, our Invoice product enables business owners to create and send invoices to their customers, and to have those invoices paid via credit card. My job was to design the credit card form, given a set of business requirements and constraints. This post is about the design considerations our team explored to arrive at …
CSS-Grid-Polyfill
CSS Grid Layout Polyfill: The polyfill’s css parser was built by following the CSS Syntax 3 specification, the polyfill should be able to process any css stylesheet. It can react to dynamic pseudo-classes like ‘:hover’, to media queries changes or window resize events. It also detects changes to the DOM that may affect the layout …
Zenfonts – A tiny and flexible JavaScript tool to help loading web fonts
// JavaScript Zenfonts(“Dolly”, {fallbackClass: “fallback-dolly”}) /* CSS */ body { font-family: “Dolly”, Georgia, serif; } .fallback-dolly body { font-family: Georgia, serif; } A tiny JavaScript helper to load and pre-load web fonts that are specified via @font-face. It uses best practices from other solutions, but it’s still a unique combination: It’s tiny (793 bytes minimized …
Continue reading “Zenfonts – A tiny and flexible JavaScript tool to help loading web fonts”