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 interwebs have already done so, and have created a massive PHP7 Reference.

PHP 7 has been slated for release in November of this year (2015). It comes with a number of new features, changes, and backwards compatibility breakages that are outlined below.

A few of the new features – such as Scalar Type Hints and IIFEs – might seem familiar as they were already covered here.

PHP 7 Reference →


Elsewhere , Leave a comment

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 the finished product.

In the screenshot above you can see a few takes for ensuring the user that the form is safe and secure.

The anatomy of a credit card form →

Elsewhere , , , Leave a comment


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 of your grid.

There are a few quirks though:

Because the layout is done asynchronously, the polyfill may play badly with other libraries that expect layout to be performed synchronously. This is particularly true if you plan to animate your grid.

The whole polyfill is very sensitive to changes to the “box-sizing” property (and many frameworks like Bootstrap do make use of it); again, this will be ironed out soon but you have to be aware.

The polyfill doesn’t like fixed/absolutely positioned grid items. If you want to use them, just put them in a dummy wrapper, it will work fine.

CSS-Grid-Polyfill – A working implementation of css grids for current browsers →

Elsewhere , , , , Leave a comment

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 and gzipped), so it can be easily included in every page.
  • It can preload a font before it’s used.
  • It can solve the “invisible text” issue (WebKit-based browsers on slow network) by applying a class during font loading.
  • It can also solve the Flash Of Unformatted Text, aka FOUT (still happens in Internet Explorer).
  • Supports practically all browsers. Tested under the latest browser on Android, iOS, OS X, Windows, as well as under IE6+, Firefox 3.6+.

Zenfonts – A tiny & flexible JavaScript tool to help loading web fonts →

Elsewhere , , Leave a comment

Star Wars: The Force Awakens – Comic-Con 2015 Reel

Ow. Yeah.

Elsewhere , Leave a comment

The JavaScript Abyss



Elsewhere , , Leave a comment

June 2015 Leap Second

Today a positive leap second will be introduced, as per IERS announcement:

To authorities responsible for the measurement and distribution of time: UTC TIME STEP on the 1st of July 2015. A positive leap second will be introduced at the end of June 2015.

The sequence of dates of the UTC second markers will be:

2015 June 30, 23h 59m 59s
2015 June 30, 23h 59m 60s
2015 July 1, 0h 0m 0s

National Geographic has a good video on this leap second phenomenon:

The International Earth Rotation and Reference Systems Service adds a leap second every few years to keep the clocks we use to measure official time and the speed of Earth’s rotation in sync. But why do we need to do this? And what kind of problems could result?

Watch your digital clocks, they should seem to be stuck for a second at midnight (UTC) :-)

Elsewhere , , Leave a comment

The Emerging Global Web

Fascinating presentation by Stephanie Rieger which I saw at the excellent (and unfortunately last) Mobilism:

This presentation will introduce you to fascinating and innovative services that are re-shaping the web to serve the consumers of tomorrow. Driven by mobile, the power of personal relationships, and the breakneck pace of globalisation, these services provide a glimpse into the business models, opportunities and challenges we will face, when growing a truly global web.

Lets face it: We “The West” are lagging behind. Asia is in the pole position.

A video recording of the talk is also available:

Elsewhere , Leave a comment

Scale Yosemite’s El Capitan with Google Maps


Welcome to The Nose of El Capitan, in Yosemite National Park — the most iconic rock climb on earth. Tighten your harness and double-check your knot, to join Lynn Hill, Alex Honnold, and Tommy Caldwell on a 3,000 foot interactive journey up El Capitan.

Here’s a behind the scenes video:

Scale Yosemite’s El Capitan with Google Maps →

Want to skip the site around the whole thing and directly go to Google Maps on El Capitan? Here’s the way.

Elsewhere , , Leave a comment

Tiny two way data binding

Awaiting Object.observe() to land, Remy Sharp has written his own simple implementation:

Data binding to the DOM is just one of those things that’s damn handy when you’ve got it and super laborious when you don’t. The problem is that it usually comes at a price of a hefty framework.

So, as any good re-inventer of wheels, I wrote my own two-way data binding library, partly to experiment, partly to solve existing needs in my own projects – weighing in at < 2K compressed.

The concept behind the API is fairly simple: take an object bind it to functions and/selectors given a particular mapping.

var user = Bind({
  name: '[new user]',
  game: { score: 0 }
}, {
  'game.score': 'span.score',
  name: 'input[name="username"]'

// usage += 25;

Tiny two way data binding →
bind.js source (GitHub) →

Elsewhere , , Leave a comment