Blog

The Web Ahead Triple Play

The last three episodes of The Web Ahead have been very interesting for me. I feel like I, and these three guests, collectively got some big rants off our chests. We were all advocating for standards-based, progressive-enhancement-techniqued, semantic HTML markup at the root of all things web — sometimes with a lot of passion.

Not too long ago, it seems such advocacy was unnecessary. For a moment there, it felt like front-end developers all agreed. But lately it seems that agreement has eroded (if it ever real existed). I see more and more people advocating techniques that ignore good markup.

Somehow these three episodes go together. I have a feeling that we are seeing the beginning of a big new debate — one where the future of coding the web is at stake. Will web developers push the web into being an engineering platform, ignoring progressive enhancement and pushing HTML off to the side as a technical hassle not worth our efforts? Or will the last 15 years of the web standard movement's efforts to value semantic markup prevail?

I won't repeat the whole debate here, at least not yet. Listen to these three shows, and you'll see what I'm talking about.

I also touched on some of this in my keynote at Fluent Conf. You can watch the video or read the transcript.

I'm curious to hear what other people think about this — especially those folks who I've learned from, who have been advocating for semantic markup for decades.

Sometimes it feels like the pro-semantic-HTML world and the newly-focused-exclusively-on-JavaScript world are two entirely different worlds. One group prefers iOS, the other Android. One works in Coda and CodeKit, the other in TextMate and Terminal. One spends time choosing HTML elements for the content at hand, the other would rather outsource all thinking about HTML to a framework. One loves design, the other either hates it or ignores it as much as possible. These are sweeping and wrong generalizations, of course, but there does seem to be an emerging rift the kind of which I haven't seen since the last time I argued with a developer that they should stop using tables for layout. It feels like the tables-for-layout advocates just replaced HTML Tables with Bootstrap, Flash Action Script with JavaScript, and still don't want to waste time messing with anything that's “not real code”. The principles of progressive enhancement, universality, accessibility, and robustness seem more at risk, and more misunderstood, now than ever.

Do we have a problem here?

Help Needed with Transcripts!

I've decided recently to seriously step-it-up with The Web Ahead. I started the show back in 2011 (insanity, I can't believe it's been that long). Yet somehow in 2013, I only did 13 shows (ugh, sorry). And then I didn't do any shows for four months (ugh, even worse, more sorry). I never planned to slow things down to a crawl and then a stop, it just happened.

But here in 2014, it's time to decide — am I doing this or not? I've decided, yes, this is a project I love. It's important to me, so I'm going to start acting like it. I'm back on schedule with a show every week, and have now done five shows in the last five weeks. And I've got the next seven guests booked, taking us well into May.

I also plan to expand, and start doing more than having a simple podcast delivered through the 5by5 website, iTunes store and RSS. I'd like to offer listeners more, a place to comment, to get even more information, to easily find past shows, to discuss and request topics. Before anything else, I want to start with offering transcripts of each episode.

Transcripts will allow people who can't listen to the show (maybe, say, because they can't hear), to read the show instead. It'll let people more easily find information from a show they did listen to. And it'll make it easier to quote from the show, to discuss it.

Rev.com has generously donated two transcripts so far, and have committed to donate several more this year. It seems like a silly thing to help make this happen, but their support is what got this ball rolling off my wish list into reality.

Since then, several volunteers have stepped forward to make this even more real. Jenn Schlick has been especially awesome, hand-transcribing many of the shows herself.

The transcripts have a temporary home at http://transcripts.webahead.info, where you can read shows and see more about what's been happening. All of the transcripts live in a GitHub repo where you can help with the effort. Information on how to join in is on both sites.

Book Redefined

a screenshot of the book

I've been working for almost a year on a design project for Apress — creating a new book product for their line of technology books. Like many projects I work on, I wasn't able to talk about it until recently. But this week, we launched a prototype!

You can go to the page for Pro HTML5 Programming on the Apress website, click the "Interactive content" button, and check out Pro HTML5 Programming for free. (It will prompt you to sign in using an Apress account, if you aren't signed in already. If you don't have an account, you can sign up for one for free.)

The interesting thing about this project, is that this isn't really a website, but yet it is a website. You don't download the book in the same way you download an EPUB version. Why? Because none of the available electronic book formats will do what we wanted to do — at least not yet.

Instead, travel through the Apress store to get to the book where it lives at a URL. As soon as you get there, the entire book will be downloaded into your browser. (This downloading should work on any browser except for IE9 & earlier and Opera mini). Bookmark the URL, perhaps saving it to your tablet or phone's home screen, and return again and again. Even if you are offline, the book will load.

Inside this book, you can not only read the code examples, but edit some of them inline and instantly see the results. This book is an HTML5 application. It uses Application Cache to save itself on your device the moment you open it. It uses Local Storage to save any changes you make to the code examples. It's using the video and audio elements to play screencasts and other media. And in order to teach you about Geolocation, Canvas, SVG, and other APIs, it uses those APIs in the demos.

The book itself is a work in progress, so there are likely glitches and bugs. If you find some, I'd love to hear from you so we can fix them! I'll be continuing to work with Apress to design the world in which these books live, as well as improve some of the details and polish inside the book. I'd love to hear what you think.

Before I go, let me say thanks to our team: Peter Lubbers, who co-wrote Pro HTML5 Programming in the first place, and who brought me in to design this project. Dylan Wooters, at Apress, who's product-owned us through the journey. And Chris O'Connor, who did much of the later development, including all of the javascript for the code editor, navigation interface, and font switching tool (coming soon). And thanks to the many folks who write code and release it out into the wild with an open source license, upon who's shoulders our work stands.

Responsive Web Design: One-day Workshop

On Monday June 10, I'll be teaching a Responsive Web Design One Day Workshop at the Brooklyn Bridge Marriott in NYC, as part of the QCon Conference.

I'll be talking about when and why using responsive techniques is a good idea. And then walk through practical how-tos, step-by-step. I've found the argument for using Responsive Web Design fairly compelling and easy to understand. But actually figuring out how to do it on a real project — that's harder! By the end of this workshop, you'll have a clear idea of how to approach a project, how to work in teams, and how to build a site using responsive technology.

The workshop is for stakeholders, designers, and developers — everyone involved in the process of creating a professional website. The day includes:

  • content strategy
  • designing for the web, not for another medium
  • responsive layouts
  • team workflow and the design process
  • writing responsive CSS
  • performance and speed considerations
  • responsive images and media
  • tools, tips and tricks
  • what to avoid

You can learn more about the QCon conference and sign up on their website: http://qconnewyork.com/tutorials.html.
Use the code SIMM10 for $100 off registration.

Animation Two

Did you see that I posted a second animation on the second day? animation.jensimmons.com/02.

It's a retooling of some code I wrote for a client website in 2012. The original project never shipped, so I thought I’d redo this design with some new content, and push it out into the world as a little demo. The photos are from the U.S. Library of Congress collection, which they are sharing on Flickr.

Animation One

Well, time is up. The rule isn't that each day has be to perfect, no bugs. The rule is it has to be done. And this one is done. animation.jensimmons.com/01.

It's the first day in a series of animation experiments. It's funny that already I'm seeing a very weird bug — in Mac Safari 6. The text is not supposed to be small and blue, growing to be big and light grey. It's just supposed to be big and light grey. What's up bug?!? Let me know if you have any ideas. The code is at codepen.io and on github.

CERN launches!

For most of 2012, I worked on websites for CERN, the international physics laboratory in Geneva. The folks at CERN hired Mark Boulton Design, and Mark brought me in to help wrangle Drupal. Compared to the immensity of the whole project, I had just a small part, but still, it was amazing. I did the front-end development for a theme (seen here) that anyone at CERN can use to launch their own website. I flew to Wales to work onsite with the whole team, planning Drupal architecture and teaching Drupal development best practices. And I did much of the front-end development on main theme for the new CERN website, which quietly launched last week. So. Exciting.

Why exciting? Well, in part because the web was invented at CERN, arguably for CERN, for the scientists who do research there. But also because my father built a particle beam accelerator in the 70s, when I was a kid. I'm not sure which one, but I remember his stories about how the concrete base had to be perfectly level and smooth. How the atoms would travel around super fast and smash into each other. And how it was his job to make sure everyone who was building the actual structure underground be doing their jobs correctly, on time and on budget. I sometimes think if life had been slightly different, I would have become a theoretical physicist.

The real heart of this project was in figuring out what the website for CERN should be going forward. That's real design —not just deciding on a color palette and layout. I got just a peak at that process, watching from the sidelines in the months I wrote code to implement the designs. Congratulations to everyone who make that happen so beautifully.

As for me, I'm still amazed about how easy it was to work with this team. How kind everyone was. And how now I can go to freaking cern.ch, and see something built on my code and recommendations. Amazing. Thank you, Mark, for inviting me.

Gone Boy

Charlotte Bacon was the daughter of someone I went to college with. Today, Friday Feb 22, would have been her seventh birthday had she not been machine gunned to death last December in her elementary school classroom.

Friday night, on Charlotte's birthday, PBS will run a TV show about my friend Galen Gibson. He was shot and killed in the library of his school, 20 years to the day before Charlotte was murdered.

Let’s watch, and remember Galen, and Charlotte, and all the others.

http://www.pbs.org/wnet/need-to-know/uncategorized/coming-up-february-22...

Minimum Shippable

I'm determined to launch a new website at jensimmons.com. It's been far too long. I'll tell you a story about why it's been so long another time. But for now, tonight, Feb 8, I am going to ship — a minimum viable product, shipped. I started building a new site many, many months ago. Well, honestly it's been a couple years now. I have a 2011 version, a 2012 version… but tonight, about four hours ago, I said that's it. I'm deleting every half-built thing I have. I'm starting from scratch, and I'm shipping TONIGHT.

So here's my first blog post. I am launching this, very quietly, right now.

This is a Drupal site. Running the Bartik theme, at the moment. I'll create my own design and theme next. The site is hosted on Pantheon, so it should be nice and snappy. Come back soon to see things change. I plan to iterate quickly and often.

If you think this is a stupid site that looks stupid and has stupid HTML, well, I do, too. In fact, I probably hate it more than you do. We both need to just shut-up about that and focus on making stuff instead.