Notes from AWS Summit

I attended the AWS Summit in Chicago this week. Like many other tech companies, we at Gesture use various AWS products so it was a nice opportunity to get exposed to what is becoming possible with their platform.

Additionally, looking into what AWS is up to is a great way to see where technology is headed in the near future (and the near future is looking increasingly like things you may have thought only possible in sci-fi movies)

Though many of their services are focused on backend and devops, as a front end developer, there were still many things that appealed to me.

Lightsail
Lightweight VPN for hosting simple sites. This is the AWS alternative to the various shared hosting providers out there. Want to spin up a quick WordPress server or marketing site? this is the AWS service for you.

Athena
Serverless, interactive query service that makes it easy to analyze big data in S3 using standard SQL. In other words, chuck a JSON file onto S3, define your data structure, then you can run queries on it. Would be cooler if they had a service that could look at a file on S3 and figure out the data structure on its own. Wouldn’t be surprised if they don’t have that coming out soon.

Rekognition, Polly and Lex
This is the next level stuff. APIs hooking into AI services. Rekognition does image analysis to make it easy to integrate things like facial recognition and object detection into your applications. Polly and Lex offer a killer combination of text into humanlike speech (Polly) and speech recognition and understanding (Lex) which allow you to add powerful conversational interfaces to applications (the same tech that powers Alexa).

Serverless (Lambda + API Gateway)
I’ve been following serverless architectures for awhile. It is a rapidly evolving area that is opening up so many different possibilities when it gets plugged into other services like those above.

Mobile Hub
Really cool configurator for building mobile apps, including mobile web which is more where my interests lie. Makes it really easy to get up and running with services like user authentication and management (Cognito), a NoSQL DB (DynamoDB), Storage (S3), etc. These baseline core services are low cost and scale. Lots of popular apps and companies have gotten their start with these and have continued to rely on them after scaling.

As I write this I am having fun doing the AWS Game Day challenge with my team at Gesture (currently we’re in first place!)

The Writing Bug

Got bit by the writing bug.

First, after over a year of working with Functional CSS and loving it, when I read this article, I felt compelled to respond:

Kiss My Classname: A Counterpoint

Next, I have been experimenting with going ‘Serverless’ and decided to share what I have been learning via a tutorial and proof-of-concept prototype. The nice folks at CSS Tricks were kind enough to publish it:

Build a Custom CMS for a Serverless Static Site Generator

Article on CSS Tricks

The Atomic/Functional CSS Movement

When I published Expressive CSS a few months ago, I knew it would be controversial, and it was (as evidenced in the comments on my Content & Display Patterns with Expressive CSS post). In the time since, there have been many articles and projects published by others that also advocate lightweight, scalable CSS using utility classes that are easy to write and understand.

From what I can tell, Thierry Koblentz was the first to really challenge CSS conventional wisdom with what in 2013 he dubbed the atomic approach. Whether you call it atomic, functional, expressive or something else, people are realizing that for too long we have been stuck in this dogmatic pursuit of semantics which has held us back from crafting CSS in a way that is actually maintainable and scalable.

There are still people who strongly reject this approach (for example, the so-called Maintainable CSS project). A few years ago, I would have been one of those people. Read CSS and Scalability and Rationalizing Functional CSS to understand why companies with large CSS architectures are switching to the Atomic/Functional/Expressive approach.

Here are some recent real world implementations:

Marvel Style Guide Screenshot
Marvel Style Guide

Solid by Buzzfeed Screenshot
Solid by Buzzfeed

When companies publish their frameworks, people often ask why not use an existing framework. Just take bootstrap and fork it. Better yet, use BassCSS or Tachyons.

Well, when you write CSS this way, creating a custom CSS architecture designed exactly for your project’s needs is not that hard and is actually fun. And if you do it right, changing things down the road is no big deal if you are using a CSS preprocessor and HTML templates. That is the benefit of the atomic approach!

Simple Responsive Grid

Simple Grid Demo Page on GithubSimple Grid is the responsive grid system I am using on all of my websites these days. View it on Github.

3 years ago I published Extra Strength Responsive Grids, a grid similar to the one in Bootstrap (although we did release ESRG first). My use of the grid has evolved to the point where I wanted to open source this newer, better version.

Simple Grid is similar in function Bootstrap’s grid. The main difference is the inclusion of padding helper classes. Rather than filling up stylesheets with lots of padding declarations, I use these combined with grid classes to handle almost all the spatial arrangements of web pages.

The padding classes also eliminate the need to have .row as a class. With simple grid, you use a .grid-12 with an appropriate padding class applied to it instead of .row.

When I built the ESRG project, the demo page was themed in a humorous way to feel like a sales site for a pain reliever drug. For the Simple Grid demo page, I ditched the silliness and kept it simple and utilitarian. It is probably the smallest stylesheet for a project page that I’ve ever made, just the grid and some CSS to expose the underlying grid scaffolding. No webfonts, colors, images, or styling flourishes, just the business.

Additionally, I have a separate project for the Simple Grid Generator, a SASS mixin that I used to output the Simple Grid CSS. It comes with some different options to customize your own grids, and can also be useful to anyone who wants to see how to make their own SASS grid generator.

How to Get Open Source Project Ideas and Execute Them

A common question people ask me is how I come up with open source project ideas. It is a pretty simple process:

1. Have A Problem
If you are a developer, when you are building stuff you will have to solve problems. On top of those, as a human being you will have problems every day. How can I share responsive web design examples to educate my clients? How can I make a more flexible grid system for responsive web design? How can I help my kid learn his ABC’s? Are my passwords manly enough?

The first thing most of us do is see if that problem has been solved before, and how. It may be that the problem has been solved effectively, and there is no need for you to solve it again. Many times, there are different approaches to solving the problem, but none that work quite the way you’d like. On rare occasions, you have encountered a problem that doesn’t have any good solutions yet, which can be quite exciting.

1a. Come Up With a Cool Name
This is probably the most fun part of the process, haha. Cool names are cool!

2. Solve The Problem
Get on it. Solve that problem. It could be that solving a particular problem is too large and ambitious to pull off. Either find some friends to collaborate with, or break the problem into smaller components then go after them one at a time.

3. Abstractize Your Solution
When possible, craft your solution in such a way that it can be applied more generally, for people who encounter the same problem.

4. Publish
Throw it on Github, of course, but if you want your project to stand out, go the extra mile. Make a great demo page to showcase your project with some clear, easy-to-follow documentation.

5. Don’t Be Shy
If you release a Github project in the woods, does anyone notice it? To get your project noticed, you need to publicize it. Tweet it out and share it up. Send it off to newsletter publications (e.g. JavaScript Weekly, HTML5 Weekly, etc.) Even better, create a tutorial and try to get it published online somewhere like Codrops, Tuts+ or Smashing Magazine.

6. Repeat
The more you projects you publish, the more ideas you will have. I recommend maintaining a list of your project ideas on Google Drive or Trello.

Open Source For The Wins

awwwards-articleI was browsing around some web design award sites today. So much inspiring stuff out there to be found. What do all these beautiful and often amazing award-winning websites have in common? They all use open source projects from Github and elsewhere. As someone who releases open source, it is thrilling when you view the source of one of these sites and see your own code mixed in there.

So I want to thank all the people out their using my code to help them power their creations. Knowing that my projects are being used by talented people all over the world is both tremendously motivating and also a bit mind-blowing.

Here’s a list of some of the latest award-winning sites that use my open source stuff:

Sites using SuperScrollorama (and also Greensock Animation):

Ikea, Life Of One Kitchen
www.zivotjednekuchyne.cz
Won a Smashing Award and was a CSS Awards Site of the Day.

Alpina, Life is Vertical
lifeisvertical.alpina-since1883.com
Won a CSS Design Award and a Smashing Award. Also a Design Inspiration Selection.

New Škoda Octavia
www.nouvelleoctavia.fr
A CSS Awards Site of the Day and Design Licks Site of the Day
FWA Shortlist

Sites using BigVideo.js:

WhiteShoe by Ferragamo
whiteshoe.ferragamo.com
A Smashing Awards winner.

KOJO
kojo.com.au
Awwwards Honorable Mention and featured on Smashing Awards
FWA Shortlist

herrlich media
www.herrlich-media.de
An Awwwards Site of the Day and CSS Design Award Winner and Make Better Websites selection.

Whiteboard Agency
whiteboard.is
An Awwwards Site of the Day and CSS Awards Site of the Day

rocking.tv
rocking.tv
No awards yet, but I think it is pretty slick!

And thanks also to all the other award winning sites using my open source projects that I’ve mentioned in the past.

Lastly, a special shoutout to Alexander Prinzhorn and his magnificent skrollr project. Many a time I have viewed source of a really cool scrolling website in hopes that it was using my code, only to discover that it is a Skrollr site. At which time, I clench my fist and shout “Skrollr! You got me again, haha.”

Update: Here’s a new BigVideo.js winner
L’Attrape Rêve
lattrapereve.fr
Awwwards Site of the Day

Update: BigVideo.js has just got its first FWA Site of the Day via Nectar Estudio!
Lois Jeans
www.loisjeans.com/aw2013
FWA Site of the Day

AuctionsByCellular

I’m thrilled to announce that I’ve been hired by AuctionsByCellular (ABC) as Lead Web Developer. ABC is an exciting new company that uses people-powered technology to help charities improve their fundraising efforts. Not only will I get to do what I love (write lots of code), my efforts will actually help improve the world, so how awesome is that!

ABC BV BC New FrontAuctionsByCellular specializes in mobile bidding for silent auctions at charity events. Not only have they built a great tech platform (which I will be helping build out), ABC has great event staff that help run the event. The way it works is that attendees of the charity event get a text when the auction starts, then bid on items from their phones (or can go to one of the ABC staff who have iPads). Charities love it!

If you are curious to hear more about my new place, there have been lots of articles about ABC in the press lately, including this article featuring my friend (and ABC CEO) Jim Alvarez.

If you or someone you know is with a charity that can benefit from using ABC, please get in touch:

By Phone: 888.748.2323
By Email: partners@auctionsbycellular.com

Techweek Day 2: When Humor is a Serious Business

This was an interview session with Dick Glover, President & CEO, Funny or Die, which launched 6 years ago. User generated content was the future. It started with a question. Why is there not a ‘Hot or Not?’ for YouTube?

Instead of following a Hollywood model, they did a Silicon Valley model. They made Will Farrell and Adam McKay an equity partner in the business. They didn’t get money unless the company was successful.

There was no budget. Go find friends and cameras, and do stuff. This led to the creation of “The Landlord”.

After that viral success, there were other videos, shortly followed by the 2008 market crash and then the emergence of social. They focused on combining A-list talent with social media. Though anyone can contribute videos, most of their popular content features professional talent.