Fluent 2014: Supercharge Your Mobile Emails

Today I gave a talk at Fluent 2014 entitled Supercharge Your Mobile Emails, in which I talked about how to add animation, dynamic content and interactivity to your email templates to improve the mobile email experience. These HTML & CSS techniques were discovered as part of building LinkedIn Intro, but my talk focuses on how anyone can leverage them when authoring HTML email templates.

SLIDES DOWNLOAD: Supercharge Your Mobile Emails

Download slides for Supercharge Your Mobile Emails

Below is a brief summary of the highlights. Continue reading

Posted in CSS | Leave a comment

Making it easier to generate single retina-pixel (hairline) images

Screen Shot 2014-03-09 at 8.01.19 PMtldr; you can create razor-thin lines for retina displays using CSS, but it takes some hackery. retinahairlinegenerator.com is a site I built for quickly selecting a color and getting the CSS code for a retina hairline.

Last year Thomas Fuchs published a detailed look at how to create a web app that looks like a native iOS7 app. He revealed a great trick for creating single-retina-pixel “hairline” images. These razor-thin lines can be used as section dividers, to underline headings, to draw boxes, and much more. Continue reading

Posted in CSS, Tools | Leave a comment

Combining CSS regions with transforms and animations

In my previous post about CSS regions, I showed off some of the basic capabilities that regions provide, described which browsers you can expect to try them out in, and what the future potentially holds.

Regions have such great support in some cutting-edge browsers, that even though they’re so new, they’re loads of fun to play around with. For this post I wanted to focus on some of the fun things we can do with regions when we combine them with other CSS specs like transforms and animations. Continue reading

Posted in CSS | Leave a comment

CSS Regions, and why you’ll be using them before you know it

[This article is also available in Russian]

CSS Regions is a W3C working draft that allows you to flow text between different areas of a page. The simplest use-case might be column layouts, where each column is an explicit region, but the powerful part is that the regions don’t have any constraints on their position or size. This means that columns barely scratch the surface of the full power of regions, as evidenced by having their very own w3c spec.

The quickest way to see how powerful regions are is with a window-resizing example. This example contains a single div of content that flows across four regions. The re-flow between regions occurs as the window resizes, ensuring that each word of the content seamlessly renders in its correct region. This screen capture shows the finished result:

To try it out yourself on codepen, follow along with the following Continue reading

Posted in CSS | 4 Comments

City maintenance as an analogy for software development

I was on vacation for most of the last two weeks: rather than having some front-end tips or tricks at my fingertips, I’ve been touring around east coast cities! They’re cities with a tremendous amount of activity happening all the time, especially construction work. This got my newly-relaxed mind thinking about how city engineering relates to maintaining large-scale software projects.

New York

There are several parallels: Continue reading

Posted in Miscellaneous | Leave a comment

Banishing “Your Session Has Expired” from the Internet

It’s hard to use the web without coming across “Your Session Has Expired” at least a few times a year. Maybe you’re trying to book a flight, or reserve tickets for a concert. You could be trying to do some online banking, submit an application to a university, or use some enterprise software. When a session expires, you’re typically dumped at an error page (not even a login page!), all the data you’ve entered so far is dropped, and you’re forced to start over. When it occurs, it’s one of those user experiences that makes me, the user, feel incredibly stupid, even though it’s the site that’s at fault. Continue reading

Posted in HOW-TOs, Tools | Leave a comment

On Rescue.js

Last October, myself and Conrad Irwin spent 48 hours (give or take a couple of starbucks runs) in my apartment for Rails Rumble 2012. The result was Rescue.js! In case you missed it, we created a Javascript error catcher: by integrating a snippet of Javascript, a website owner could see and get insights into all the Javascript errors that were affecting the site’s users.

We were very excited about it for a few reasons:

  1. We were able to build something genuinely useful, that we really wanted to exist, in less than 48 hours
  2. A simple but effective product design allowed us to get a great view of the client-side errors of a site’s real-world users
  3. We (just!) managed to pull off support for JS source maps in the backtraces, (albeit in limited form, and only in the nick of time).

After spending 2 evenings and 2 full days hacking, we were done. We promptly submitted our result and went out to celebrate. While we were out, Continue reading

Posted in Announcements, Javascript | Leave a comment