Tags: frontend

Implement Server-Side Rendering for SEO · Issue #9938 · emberjs/ember.js

The motivation seems entirely misplaced to me (SEO? Really?) but never mind: the end result could be the holy grail of JavaScript MVC frameworks — code that runs on the server and the client. That would get you the reach and initial rendering speed of progressive enhancement, combined with the power of client-side application logic once the page has loaded.

Watch this space.

Responsive Enhancement ◆ 24 ways

My contribution to this year’s edition of the web’s best advent calendar.

Websites of Christmas Past, Present and Future ◆ 24 ways

A superb article by Josh on planning for progressive enhancement—clearly laid out and carefully explained.

Bruce Lawson’s personal site  : On the accessibility of web components. Again.

I completely share Bruce’s concern about the year-zero thinking that’s accompanying a lot of the web components marketing:

Snarking aside, why do so few people talk about extending existing HTML elements with web components? Why’s all the talk about brand new custom elements? I don’t know.

Hear, hear!

I’m a fan of web components. But I’m increasingly worried about the messaging surrounding them.

Performance Budget Metrics - TimKadlec.com

Some good practical advice from Tim on setting a performance budget.

Use rule-based metrics to make sure you haven’t overlooked simple optimizations.

Use quantity-based metrics as guides to help designers and developers make better decisions about what goes onto a page.

Mobile Last?

This isn’t a scientific data sample, but Jonathan’s anecdotal evidence seems to suggest that most web designers and developers are still thinking with a desktop-first mentality. Which is crazy.

Style Guide Resources

A very handy collection from Anna: articles, books, talks, podcasts, and examples of front-end style guides. If something’s missing, feel free to add it.

You’re So Smart You Turned JavaScript into XHTML

Web developers overwhelmingly rejected the draconian error-handing of XML …and yet today, web developers are embracing that very same error-handling model by rendering everything with JavaScript.

I don’t think it’s the way of the web to have your site fail and show a blank screen because some third-party dependency doesn’t load, JavaScript is turned off or because your developer left a trailing comma in a JavaScript object and didn’t test in Internet Explorer.

Overwhelmed by Code · An A List Apart Blog Post

Focus on what you want to learn; not what you think you should learn.

There is a lot of pressure out there: to learn new things, to spend all your time coding, to be the super developer. I now believe that to be impossible and unhealthy. It means you aren’t living a balanced life and it also means that you’re living under constant stress and pressure.

Responsive Images in Practice · An A List Apart Article

A great primer on using srcset and picture. I think I’ll be referring back to this a lot.

7 Principles of Rich Web Applications

High-level design principles for JavaScript on the web.

ARIA Quicktip: Labelledby vs. Describedby, From the Notebook of Aaron Gustafson

Yesterday, Aaron gave a great talk at BD Conf about forms. In one example, he was using aria-describedby. I was a bit confused by the differences between aria-describedby and aria-labelledby, so Aaron has very helpfully clarified the distinction.

Stop Breaking the Web

Angry, but true.

Don’t lock yourself into a comprehensive technology that may just die within the next few months and leave you stranded. With progressive enhancement you’ll never go wrong. Progressive enhancement means your code will always work, because you’ll always focus on providing a minimal experience first, and then adding features, functionality, and behavior on top of the content.

JS Bin: Vertical centering is impossible in CSS lol!

Four different techniques for vertical centring in CSS, courtesy of Jake.

Replacing Radio Buttons Without Replacing Radio Buttons

A great technique from Heydon for styling radio buttons however you want.

Solved By Flexbox — Cleaner, hack-free CSS

Documenting common layout issues that can be solved with Flexbox. I like the fact that some of these can be used as enhancements e.g. sticky footer, input add-ons …the fallback in older browsers is perfectly acceptable.

The boring front-end developer - Adam Silver, Front end developer, based in London

My name is Jeremy and I am a boring front-end developer.

Progressive Enhancement Basics

Some thoughts on progressive enhancement, although I disagree with the characterisation of progressive enhancement as being the opposite choice to making “something flashy that pushes the web to it’s limits”—it’s entirely possible to make the flashiest, limit-pushing sites using progressive enhancement. After all…

it’s much more a mindset than a particular development technique.

56 Experts reveal 3 beloved front-end development tools

Turns out that Brian LeRoux and I gave the same answer to this question:

  1. HTML
  2. CSS
  3. JavaScript

I think I just saved you a click.

Using ServiceWorker in Chrome today - JakeArchibald.com

It’s very early days for ServiceWorker, but Jake is on hand with documentation and instructions on its use. To be honest, most of this is over my head and I suspect it won’t really “click” until I try using it for myself.

Where it gets really interesting is in the comments. Stuart asks “What about progressive enhancement?” And Jake points out that because a ServiceWorker won’t be installed on a first visit, you pretty much have to treat it as an enhancement. In fact, you’d have to go out of your way to make it a requirement:

You could, of course, throw up a splash screen and wait for the ServiceWorker to install, creating a ServiceWorker-dependant experience. I will hunt those people down.

A Fundamental Disconnect, From the Notebook of Aaron Gustafson

I think Aaron is spot-on here. There’s a tendency to treat web development these days as just the same as any other kind of software development—which is, on the one hand, great because it shows just how far JavaScript and browsers have come …but on the other hand, that attitude is missing a crucial understanding of the fundamental nature of the web’s technology stack (that we should be treating HTML, CSS, and JavaScript as layers; not as one big ball of webby, timey-wimey stuff).

Extensible Web Summit Berlin 2014: my lightning talk on Web Components | soledad penadés

Soledad Penadés also went to the Extensible Web Summit in Berlin, where she gave a lightning talk. Sounds like it was really good.

This also includes some good advice that, again, Alex might want to consider before denouncing any disagreement on Web Components as “piffle and tosh”:

If the W3C, or any other standardisation organisation wants to attract “normal” developers to get more diverse inputs, they/we should start by being respectful to everyone. Don’t try to show everyone how superclever you are. Don’t be a jerk. Don’t scare people away, because then only the loud ones stay, and the quieter shy people, or people who have more urgent matters to attend (such as, you know, having a working business website even if it’s not using the latest and greatest API) will just leave.

Notes on notes (of smart people) about web components

Steve Faulkner responds to Alex’s response to my post about Web Components.

Steve shares my concerns …but he still refers to my post as “piffle”.

I can’t win.

Uncomfortably Excited – Infrequently Noted

Alex’s response to my post about Web Components, in which he ignores my excitement and dismisses my concerns as “piffle and tosh.”

I gotta say: I think cautious optimism and nervous excitement are healthy attitudes to have about any technology. For Alex to dismiss them so summarily makes me even more worried. Apparently you’re either with Web Components or you’re against them. Heaven forbid that you might voice any doubts or suggest any grey areas.

The beatings will continue until morale improves.

A device agnostic approach to inlining CSS | Blog | Decade City

I very much agree with Orde’s framing here: I don’t think it makes much sense to talk about “above the fold” CSS …but it makes a lot of sense to talk about critical CSS.

And, yeah, it’s another example of progressive enhancement.

Improving accessibility on GOV.UK search | Technology at GDS

Alice Bartlett shares her experience of getting aria-live regions to work in a meaningful way.

CSS Guidelines – High-level advice and guidelines for writing sane, manageable, scalable CSS

Harry has written down his ideas and recommendations for writing CSS.

Tablesaw - A Flexible Tool for Responsive Tables

Those lovely people at Filament Group share some of their techniques for making data tables work across a range of screen sizes.

We Work in a World of Assumptions – The Pastry Box Project

Dan Donald gets to the heart of progressive enhancement:

Assumptions in themselves don’t have to be inherently bad but let’s recognise them for what they are. We know very little but that can hopefully enable us to be far more flexible and understanding in what we create.

How we make RWD sites load fast as heck

Scott shares the code that Filament Group are using to determine which style declarations are critical (and can be inlined) and which are non-critical (and can be loaded asynchronously). It makes quite a difference in perceived performance.

By the way, I really, really like the terminology of “critical” and “non-critical” CSS, rather than “above the fold” and “below the fold” CSS.

RWD Bloat - daverupert.com

Dave wanted to figure out if having a responsive site necessarily meant taking a performance hit, so he ran the numbers on his own site. It turns out all of performance-related issues are not related to responsive design.

Code Responsibly

Ten facets of web development that you can choose to focus on. One of them is from me …but other nine are worth paying attention to.

Full-width pinned layouts with flexbox

Zoe uses one little case study to contrast two different CSS techniques: display-table and flexbox. Flexbox definitely comes out on top when it comes to true source-order independence.

Simplicity

I can relate to every single word that Bastian has written here.

The longer I look at boilerplates, build tools, frameworks and ways to make my life as a developer easier, the more I long for the basics.

Let’s Talk About RTL

Some very handy techniques for working with right-to-left text.

A Maintainable Style Guide - Ian Feather

The challenges of maintaining a living breathing front-end style guide for an always-evolving product (the Lonely Planet website in this case).

The Developer’s Dystopian Future – The Pastry Box Project

My interest in rich client-side apps has almost entirely reversed, and now I’m more interested in doing good ol’ server rendering with the occasional side of progressive enhancement, just like we did it in 2004.

This post resonates with me 100%.

Where will I be in 10 years? I don’t know. I hope I still will have some in-demand skills to pay the bills. But it feels like all I see are DevOps and JavaScript, and I know less and less every day about those things.

What it means to be a Front-end Developer in 2014 – The Pastry Box Project

I can very much relate to what Dan is talking about here. I have no idea what I do any more.

No doubt we’ll always feel we’re behind the curve as there always seems like more to learn. That’s OK. No-one knows it all, but it is hard knowing what people expect of you.

Data attributes and progressive enhancement - Simply Accessible

Derek’s excellent advice on avoiding over-reliance on data attributes has this brilliant nugget of insight:

In the web front-end stack — HTML, CSS, JS, and ARIA — if you can solve a problem with a simpler solution lower in the stack, you should. It’s less fragile, more foolproof, and just works

Aerotwist - Web Components and the Three Unsexy Pillars

A healthy dose of scepticism about Web Components, looking at them through the lenses of accessibility, security, and performance.

I share some of this concern: Web Components might look like handy ready-made out-of-the-box solutions, but the truth is that web developers have to do much more of the hard graft that was traditionally left to the browser.

Robin Rendle › A Visual Lexicon

Some great thoughts in here about web development workflow and communication between designers and developers.

I believe that the solution is made up of a variety of tools that encourage conversation and improve our shared lexicon. Tools such as styleguides, pattern libraries, elemental and modular systems that encourage access not only by developers, but by designers, shareholders and editors as well.

Getting Started With Pattern Libraries ∙ An A List Apart Blog Post

A great post from Anna on the front-end styleguides she’s worked on for A List Apart and Code for America. ‘Twas a pleasure working with her on the Code for America project.

A-mer-ica! Fuck yeah!

A List Apart Pattern Library

Another front-end style guide for the collection. This time it’s from A List Apart. Lovely stuff!

Why is Progressive Enhancement so unpopular? — All in the head

Like Drew, I’ve noticed some real hostility to the idea of progressive enhancement recently. Like Drew, I don’t really understand where this attitude comes from. It’s not like progressive enhancement prevents you from doing anything you would do otherwise: it’s just another way of approaching the way you build for the web.

I hope I’m wrong, but I suspect that some developers are letting their tools dictate their principles—the tail wagging the dog (where the tail is Angular, Ember, etc.).

Pattern Library | MailChimp

The markup for the patterns that Mailchimp use on their products. I love getting a glimpse of how companies handle this kind of stuff internally.

Is HTML Relevant in the Age of Web Apps? by John Allsopp

John addresses the price of increasing complexity in front-end development.

Yes, tooling can make our life easier. We type fewer keystrokes, and commit more code. But as software engineers learned a long time ago, most of the life of an applications is not in its initial development. It’s in maintaining it. This is something we on the web have had the luxury of being able to largely ignore up to now. After all, how many of the things you build will last years, decades?

I know jQuery. Now what?

A terrific piece by Remy—based on a talk he gave—on when he uses jQuery and, more importantly, when he doesn’t. His experiences and conclusions pretty much mirror my own, but of course Remy is far more thoughtful and smart than I.

Really good stuff.

A List Apart Issue № 371

This issue of A List Apart is a great double-whammy. Lara Swanson has a ton of practical tips for front-end performance enhancements, and Brian dives deep into making your own icon fonts.

The Vanilla Web Diet by Christian Heilman

I like the sound of the book that Chris is writing for Smashing Magazine. It sounds like a very future-friendly approach to front-end development.

A primer to front-end SVG hacking by David Bushell – Web Design & Front-end Development

Everything you ever wanted to know about using SVG today.

Front-end performance for web designers and front-end developers by Harry Roberts

A really good introduction to front-end performance techniques. Most of this was already on my radar, but I still picked up a handy tip or two (particularly about DNS prefetching).

At this stage it should go without saying that you should be keeping up with this kind of thing: performance is really, really, really important.

Front-end London - A New London Based Meetup for Front-end Developers, hosted by Made by Many

This looks like being an excellent (free) event in London featuring three talks related to front-end web development.

The inaugural event this month features a talk on responsive design, a talk on data visualisation, and a talk on accessibility.

Andy Hume: CSS for Grownups, SXSW 2012 - YouTube

The slides and audio from Andy’s exceptional talk earlier this year at Southby, combined into one video.

It really is excellent, although he does make the mistake of pulling the “dogma” card on those who woud disagree with him, and he really doesn’t need to: his argument is strong enough to stand on its own.

The Vanilla Web Diet | Smashing Coding

I wholeheartedly agree with Christian’s diagnosis of the average web page: it’s overweight to the point of obesity. Fortunately Dr. Heilmann has some remedies.

Fear and Coding in Brighton : Full Frontal 2012

A terrific write-up of this year’s Full Frontal conference, with a descriptive rundown of each talk.

isolani - Web Standards: Web App Mistakes: Condemned to repeat

Some great thoughts from Mike Davies about the strengths of the web, prompted by some of the more extreme comments made by James Pearce at Full Frontal last week.

I should point out that James was being deliberately provocative in order to foment thought and discussion and, judging from this blog post, he succeeded.

The Web’s independence from the hardware and software platform people use is a feature. It’s better than cross-platform frameworks which are constantly criticised for not producing exact native-feeling apps on the multitude of platforms they run on. The Web is above that pettiness.

Trimming the Fat — Paul Robert Lloyd

A great in-depth description by Paul of how he optimised his site. More of this please!

Base CSS | Pasteup | Guardian News

The Guardian’s front-end patterns library. The modules section contains their equivalent of a pattern primer. Very nice!

Accessibility – what is it good for? | Marco’s accessibility blog

A worrying look at how modern web developers approach accessibility. In short, they don’t.

Easy Fixes to Common Accessibility Problems | Yahoo! Accessibility Library

The low-hanging fruit of accessibility fixes; it’s worth bearing these in mind.

Q&A with Jeremy Keith - Charlotte Front-End Developers (Charlotte, NC) - Meetup

Do you live in Charlotte, North Carolina? If so, you might be interested in this event that I’ll be Skyping into.

A Front End Engineer’s Manifesto

Y’know, I’m on board with pretty much every item in this manifesto.

Creating a Mobile-First Responsive Web Design - HTML5 Rocks

A great step-by-step tutorial from Brad on developing a responsive site with a Content First mindset.

Modern Web Development Part 1 – The Webkit Inspector

This is a very in-depth look at how to become a power user of the Web Inspector in Webkit browsers. I’m sitting down with a nice cup of tea to go through all of this.

Cream of tag soup - Ramblings about frontend stuff

Jake Archibald has a blog now. Subscribed.

Registration | Frontend 2011

A nice Huffduffer-style mad libs form gives this registration form a friendly quality.