Architecting the Progressive Web

Building a great web is something the Sparkbox takes very personally. We built what we believe is one of the first RWD e-commerce sites. We constantly battle to improve performance while delivering a great experience, even for those with a terrible connection. We know we will always be swimming up stream, but today, we believe we have a reasonable architecture for building a progressive web experience that is blazing fast and works for even the most lame devices and connections.

The crazy thing about this architecture is that it’s not terribly interesting. Essentially, we let the web do it’s thing. Javascript not happing, because you stepped into an elevator or happen to run a super old version of IE (we made that choice)? No worries. We server render all the things, accept form POSTs for all mutating interactions, and serve up PNGs instead of SVGs. Time to First Interaction a little slow? No problem – we’ll disable certain elements to save up for the important stuff.

We’ve been exploring parts of this architecture for a few years now, but this past year we’ve been able to put it all together. Throughout the next year, we’re going to be sharing how we’ve done so in the hopes that we can spur on great experiences across the web.

We forgot a Pull Request when Splitting a Repo

We’re working on a little skunk works project at the office and it involved splitting a Github repository in two. After a successful split, I noticed we’d missed a PR that now impacts both repositories.

My head went to git format-patch <sha>, but I didn’t recall an option to target a file spec and at first glance it generates a patch for every commit after that SHA.

git show on the other hand definitely advertises an option to filtergit show <sha> -- path/that/moved

Format that as --pretty=email and you can direct the output to a patch for

git show --pretty=email <sha> -- path/that/moved> pr-for-other-repo.patch

Now we can pull that into our other repo with git am -3 pr-for-other-repo.patch.

Turns out that -- path/that/moved semantic does work with git format-patch. So in the end, we could have just used

git format-patch -1 -- path/that/moved
git am -3 partial-pr.patch

#startYourShift How to Make the Web Better

My contribution to theShift: a writing project designed to help us produce and consume unique perspectives on topics relevant to the web industry.

a writing project designed to help us produce and consume unique perspectives on topics relevant to the web industry.

A little over 2 years ago I joined Sparkbox. The focus on community, learning, and teaching were all contributors to that decision. Today we have 4 apprentices (Cat, Bennett, Brittany, and Nate) sitting among our team, double the 2014 cohort and 1 more than 2015. Build Right: Maker Series is looking to broaden our horizons by looking beyond HTML, CSS, and even tech to talk about wearables, physical health, and getting things done.

At home, we ask of our 4 awesome kids to learn an instrument, play a sport, write books or comics, and learn the skills of Scouts. They fight us all the time, but we know that breadth and awareness is as much an ingredient to success as depth.

Personally, I’ve found myself this last year “without the time” to explore things beyond my comfort zone. I’ve not shipped a personal project in over a year. This is my first personal blog post since 2014! I’ve found a rut.

The Web is a reflection of those building it – after all The Web is a collection rather than a singular item. As a matter of building a better web, I’d like to once again make the time to expand my normal by looking outside the web.

Installing Erlang 17 for Elixir 0.13 the easy way (Mac)

As of Elixir 0.13, you’ll need to have Erlang 17 installed.  If you use brew to install erlang then elixir you’ll find this message awaiting you:

ERROR: OTP release R16B03-1 does not match required regex (17).*

The current Erlang brew formula is still at R16B03-1.  BUT! the development version IS 17.  So here you go:

brew install --devel erlang

I’m sure this will change soon, but until then this’ll get you going again.

Find Contact Shortcut in Skype for Mac

It’s well understood that Skype does not advocate usability, but I won’t take it anymore.  They have some shortcuts, but they’re pretty pitiful.

I’m a left hand dominant shortcut-er.  Say what you will about me, but I can’t make my fingers use CMD+OPTION+F for finding a contact to start a new conversation.  So I created the following shortcut.