Tags: browsers

330

sparkline

Web development as a hack of hacks - QuirksBlog

PPK reads a Hacker News thread so you don’t have to.

The Typekit Blog | Variable fonts, a new kind of font for flexible design

This is what Nick Sherman has been banging on about for years, and now the time has come for variable fonts …as long as typographers, browser makers, and standards bodies get behind it.

More details on Ev’s blog.

What, Exactly, Makes Something A Progressive Web App? | Infrequently Noted

Alex runs through the features that a progressive web app must have, should have, and would be nice to have.

In general, installability criteria are tightening. Today’s Good-To-Haves may become part of tomorrow’s baseline. The opposite is unlikely because at least one major browser has made a strong commitment to tightening up the rules for installability.

Right now, this is in the nice-to-have category:

Mobile-friendly, not mobile-only.

Personally, I’d put that in the must-have category, and not just for progressive web apps.

Anyway, read on for some advice on testing and tooling when it comes to evaluating progressive web apps.

How Google And Others Are Plotting The Revenge Of The Web App | Fast Company | Business + Innovation

It’s always, um …”interesting” when a mainstream publication covers a topic from the web’s bikeshed. In this case, it’s progressive web apps, and—apart from the sensationalist headline—it’s actually not that bad at all.

Using Feature Queries in CSS ★ Mozilla Hacks – the Web developer blog

A thorough explanation of @supports from Jen, with plenty of smart strategies for using it in your CSS today.

Download Blisk - a browser for web developers

A browser aimed specifically at web developers. It’s got some nice features around mobile device emulation.

The History of the URL: Path, Fragment, Query, and Auth - Eager Blog

Another dive into the archives of the www-talk mailing list. This time there are some gems about the origins of the input element, triggered by the old isindex element.

The Future of Browser History — Free Code Camp

I’ve been thinking about this a lot lately. It feels like a user’s browser history is an incredibly rich seam of valuable information just waiting to be presented in a more interesting way.

The Lumpy Web - Tales of a Developer Advocate

Paul argues that the biggest problems for interoperability on the web don’t come from support (or lack of support) for entire features, but from the frustrating inconsistencies when features land in different browsers at different times with different implementations:

  • Platform inconsistencies hurt us more than big feature differences, we should start to try and prioritize aligning the platform
  • We need better tools to help us understand what the inconsistencies are and guidance on how to manage them
  • Developers should raise more issues to keep browser vendors accountable when there are differences

Adapting to Input · An A List Apart Article

Jason breaks down the myths of inputs being tied to device form factors. Instead, given the inherent uncertainty around input, the only sensible approach is progressive enhancement.

Now is the time to experiment with new forms of web input. The key is to build a baseline input experience that works everywhere and then progressively enhance to take advantage of new capabilities of devices if they are available.

CSS Containment Module Level 3

A way of declaring the scope of an element’s layout and paint styles, which browsers can then use as a hint to optimise performance. It’s already shipping in Chrome and Opera.

The Languages Which Almost Were CSS - Eager Blog

A wonderful deep dive into the history of styling languages before CSS. I love spelunking down these internet history potholes—fascinating stuff!

Persistent Storage | Web Updates - Google Developers

Here’s an interesting proposal from Google for a user-initiated way of declaring a site’s offline assets should be prioritised (and not wiped out in a clean-up). Also interesting: the way that this idea is being tried out is through a token that you can request …sure beats prefixes!

Making bad ads sad. Rad! - O’Reilly Media

A great talk from Bruce on the digital self-defence that ad-blockers provide. I think it’s great that Opera are building ad-blocking straight into the browser.

Progressive Web Apps Dev Summit | hiddedevries.nl

Hidde’s write-up of the Progressive Web App Dev Summit:

It was exciting to hear about the technologies, and to see that a lot of them already work on a great deal of platforms. Most of the major browser vendors expressed how much they liked the idea, so it is realistic to say support will increase in the short term. This, and the fact that all PWA techniques can be regarded as a ‘progressive enhancement’ (with some leniency as to what that term means), entails that we can build Progressive Web Apps today.

Hopefully, we will do so responsibly. Native apps really only work on their particular platforms. PWAs, in theory, can be built to work universally. For everyone with a web enabled device. This is awesome! Major browser vendors are behind the idea, and I think as developers we should be, too.

Apps are dying by Cameron Moll

Cameron looks back on his 2007 Mobile Web Design book:

I don’t anticipate native apps will die off anytime soon. But I’m warming to the idea that they may be less relevant to the future of the web, and I reaffirm that “a browser will be — or should be — sufficient for interacting with web content.”

Progressive web apps are poised to be remarkably relevant to the future of the web. Let’s not screw it up.

Dev.Opera — Making progressive web apps even better: ambient badging and “pop into browser”

Andreas demoed these ideas yesterday. Proper ambient badging and a way of getting at URLs even if a progressive web app is running in fullscreen or standalone mode. Great stuff!

PWA Discovery: You Ain’t Seen Nothin Yet | Infrequently Noted

Smart thinking from Alex on how browsers could better indicate that a website is a progressive web app (and would therefore benefit from being added to the home screen). Ambient badging, he calls it.

Wouldn’t it be great if there were a button in the URL bar that appeared whenever you landed on a PWA that you could always tap to save it to your homescreen? A button that showed up in the top-level UI only when on a PWA? Something that didn’t require digging through menus and guessing about “is this thing going to work well when launched from the homescreen?”

Progressively less progressive | Andrew Betts

I agree with everything Andrew says here. Progressive web apps are great, but as long as Google heap praise on mobile-only solutions (like the Washington Post doorslam) and also encourage separate AMP sites, they’re doing a great disservice to the web.

More features arrive regularly to make this “one web” even better and easier to maintain. Service worker, streams, app manifests, payment request, to name a few. But adding these features one at a time to large, mature applications like WaPo or FT or Nikkei is a slow and painstaking process. That’s why it’s taking us a long time for us to tick off all these new features, and why it seems like madness to try and build the entire app several times over.

However, by creating the concept of PWAs and marketing them as they do, Google is encouraging publishers to ‘start again’. And they’re doing exactly the same thing with AMP.

Yet another blog about the state and future of Progressive Web App - The blog of Ada Rose Edwards

Bravo!

In the web developer community’s collective drive to be more App Like and compete with native apps we may lose or weaken some of the web’s strongest features and we need to consider carefully before we throw away urls or the entire browser chrome in an effort to look like and behave like the cool kids of native.

You can hear more of Ada’s thoughts on progressive web apps on a recent episode of JavaScript Air.

Introducing Multirange: A tiny polyfill for HTML5.1 two-handle sliders | Lea Verou

You’re supposed to be able to create two-handled sliders with input type="range" but the browser support isn’t there yet. In the meantime, Lea has created a nice lightweight polyfill.

Not The Post I Wanted To Be Writing… – Infrequently Noted

Phew! Alex seems to have calmed down. He’s responding to my concerns about exposing URLs in progressive web apps, but thankfully without the absolutist rhetoric or insults. Progress!

Beyond Progressive Web Apps • cssence.com

Matthias Beitl takes a stab at trying to tackle the tricky UI problem of exposing the URLs of Progressive Web Apps. This stuff is hard.

Revision 263: Im Gespräch mit PPK, Chris Heilmann und Jeremy Keith | Working Draft

The Working Draft podcast is usually in German, but this episode is in English. It was recorded in a casual way by a bunch of people soaking up the sun sitting outside the venue at Beyond Tellerrand. Initially that was PPK and Chris, but then I barged in half way through. Good fun …if you’re into nerdy discussions about browsers, standards, and the web. And the sound quality isn’t too bad, considering the circumstances under which this was recorded.

State of the gap

Remy looks at the closing gap between native and web. Things are looking pretty damn good for the web, with certain caveats:

The web is the long game. It will always make progress. Free access to both consumers and producers is a core principle. Security is also a core principle, and sometimes at the costs of ease to the developer (but if it were easy it wouldn’t be fun, right?).

That’s why there’ll always be some other technology that’s ahead of the web in terms of features, but those features give the web something to aim for:

Flash was the plugin that was ahead of the web for a long time, it was the only way to play video for heavens sake!

Whereas before we needed polyfills like PhoneGap (whose very reason for existing is to make itself obsolete), now with progressive web apps, we’re proving the philosophy behind PhoneGap:

If the web doesn’t do something today it’s not because it can’t, or won’t, but rather it is because we haven’t gotten around to implementing that capability yet.

» Autofill: What web devs should know, but don’t

Jason takes good look at the browser support for autocomplete values and then makes a valiant attempt to make up for the complete lack of documentation for Safari’s credit card scanning.

Issue 596729 - chromium - Do not show the app banner unless the Manifest has a display set to standalone or fullscreen - Monorail

I am shocked and disgusted by this arbitrary decision by the Chrome team. If your Progressive Web App doesn’t set its manifest to obscure its URL, you get punished by missing out on the add to home screen prompt.

Google is declaring war on URLs again.

HTML5 accessibility

A glanceable one-stop-shop for how today’s browsers are dealing with today’s accessibility features. Then you can dive deeper into each one.

Updating Our Prefixing Policy | WebKit

Ted has snuck a blog post out from behind Apple’s wall of silence, and it’s good news: WebKit is not going to use vendor prefixes for new features.

A Complete Guide to CSS Grid Layout | Chris House

This guide to CSS grid layout is the perfect companion piece to Rachel’s Grid by Example.

Layout Demos by Jen Simmons

If you want to keep up to date with all the coolest stuff landing in CSS, I recommend bookmarking this ever-changing page.

Interview with Håkon Wium Lie — net magazine — Medium

A trip down memory lane with Håkon.

It’s not like the web has been done. This is history in the making. The web is only 25 years old. It’s going to be around for a long time, so there are lots of things to develop.

A debugging thought process

Remy walks us through his performance debugging routine …and now Una must write him a song.

Progressive Web Apps have leapfrogged the native install model … but challenges remain

While many challenges remain, the good news is … it’s progressive. Developers can already see the benefits by sprinkling in these technologies to their existing websites and proceed to build on them as browsers and operating systems increase support.

RAFP: a proposal for performance measurements through requestAnimationFrame - QuirksBlog

Here’s an interesting proposal from ppk: use requestAnimationFrame to gauge how performant a browser in behaving and then enhance accordingly.

Bruce Lawson’s personal site  : One weird trick to get online — designers hate it!

I don’t care about Opera Mini (I’m not its Product Manager). In the same way, I don’t care about walking sticks, wheelchairs, mobility scooters or guide dogs. But I care deeply about people who use enabling technologies — and Opera Mini is an enabling technology. It allows people on feature phones, low-powered smartphones, people in low-bandwidth areas, people with very small data plans, people who are roaming (you?) connect to the web.

Web Progressions

This looks a good (free!) event in London all about the latest browser goodies, all wrapped in the “progressive apps” buzzword.

Alas, I’ll be making my way back from Indie Web Camp Düsseldorf the day this is on.

Instagram-style filters in HTML5 Canvas | Viget

Una’s [Instagram filters in CSS}(https://github.com/una/CSSgram) are great, but the browser support for CSS filters isn’t as good as, say, the browser support for canvas. Here’s a clever bit of scripting to polyfill filters using canvas.

EnhanceConf - Stefan Tilkov - How to embrace the browser - YouTube

The videos from EnhanceConf are started to go up already. Stefan’s talk really struck me—all the talks were great but this one had the most unexpected insight for me. It really clarifies a lot of ideas that I’ve been trying to articulate, but which Stefan crystalises by taking the long-zoom view.

Surma.link – New ways to make your web app jank with Houdini – An introduction

This is a really good primer on all the pieces that make up the Houdini approach to CSS—giving authors access to low-level APIs for rendering.

As is often repeated here, it’s still early days and caution is advised, but it’s still a good idea to wrap your head around what’s coming down the standards pipe.

There’s even more specs in Houdini’s list of drafts, but the future of those is rather uncertain and they are not much more than a placeholder for an idea at this point. Examples include custom overflow behaviors, CSS syntax extension API, extension of native scroll behavior and similar ambitious things that allow you to screw up your web app even worse than ever before. Rejoice!

Developer Resources : Microsoft Edge Dev

Microsoft are officially on board with implementing Service Workers in Edge:

Roadmap Priority: High — We intend to begin development soon.

The Art of Debugging

I was just helping out with some debugging at work and it reminded me of this great talk/post by Remy:

  1. Replicate: see the bug
  2. Isolate: understand the bug
  3. Eliminate: fix the bug

Don’t tell me what my browser can’t do! by Christian Heilmann

A great piece by Christian on taking a responsible, customer-focused approach to building on the web.

You don’t have to support old browsers and terrible setups. But you are not allowed to block them out. It is a simple matter of giving a usable interface to end users. A button that does nothing when you click it is not a good experience. Test if the functionality is available, then create or show the button.

Yes, this is an argument for progressive enhancement. No, that does not mean you can’t use JavaScript.

You can absolutely expect JavaScript to be available on your end users computers in 2016. At the same time it is painfully naive to expect it to work under all circumstances.

Using System Fonts in the Browser

We have some new font keywords that are basically shortcuts to using the system fonts on a device. This article explains the details.

The App-ocalypse: Can Web standards make mobile apps obsolete? | Ars Technica

I really, really want to like this article—it’s chock full of confirmation bias for me. But it’s so badly-written …I mean like, just the worst.

Here’s an actual sentence:

So with a capable, HTML-based platform and a well-designed program that makes good use of CSS, one site could support phones, tablets, PCs, and just about anything else with one site.

So, yeah, I’m still linking to it, but instead of it being for the content, it’s because I want to lament the dreadful state of technology writing.

More Responsive Tapping on iOS | WebKit

This solution to the mobile tap delay by the WebKit team sounds like what I was hoping for:

Putting touch-action: manipulation; on a clickable element makes WebKit consider touches that begin on the element only for the purposes of panning and pinching to zoom. This means WebKit does not consider double-tap gestures on the element, so single taps are dispatched immediately.

It would be nice to know whether this has been discussed with other browser makers or if it’s another proprietary addition.

CSS Font Rendering Controls Module Level 1

This is already starting to land in browsers, which makes me very happy—the ability to specify how you want fonts to load/swap without needing a clever bit of JavaScript.

The web will always be a moving target : Eclectic Dreams

Caution:

It would be convenient to think that because we live in a world where people’s browsers are regularly updating, that we live in a world where the web is in a reliable state.

Reminder:

The web is a continually moving target. It probably changed in the time it took me to write this. If you work with web stuff you need to embrace this fact. It will be the only constant in your career.

Do not panic:

On the web progressive enhancement is and will always be, the methodology of choice. It makes your site robust to the shifting sands of the web front end.

Cutting the Mustard Revisited — sixtwothree.org

Jason revisits some cutting-the-mustard techniques, as started by the BBC and refined by Jake. This kind of feature-testing is indispensable for progressive enhancement.

Personally though, I’m still uncomfortable with the assumptions baked into equating particular features with particular browsers …maybe I’ve known PPK too long.

I much prefer to cut the mustard on a case-by-case basis by feature testing the actual APIs I’m about to use in a script. I realise that might be harder to scale, and it’s more verbose, but it’s the only way to be absolutely sure.

philipwalton/flexbugs

A list of known bugs (and workarounds) in flexbox implementations. This is going to be handy to refer back to.

oldweb.today

Such a vividly nostalgic project. Choose an obsolete browser. Enter a URL. Select which slice of the past you want to see.

Digital archives in action. Access drives preservation.

Native or Not? The Untapped Power of Web Apps | Viget

Following on from that last link, here’s an in-depth run-down of what you can do in mobile browsers today. I think a lot of people internalised “what you can’t do on the web” a while back—it’s well worth periodically revisiting the feature landscape to revise that ever-shrinking list.

Perhaps the biggest advantage the web has over native apps is how quickly users are able to engage. All that’s between the user and your content is one click.

What Web Can Do Today

Visit this site using different browsers on different devices to get a feel for what you can do with web technologies.

Native will always be ahead, but the feature gap is closing impressively fast.

Bruce Lawson’s personal site  : Progressive Web Apps: ready for primetime

Bruce gives a great run-down of what’s involved in creating one of those new-fangled progressive apps that everyone at Google and Opera (and soon, Mozilla) are talking about: a secure connection, a service worker, and a manifest file.

Crucially, in browsers that don’t support it, you have a normal website. It’s perfect progressive enhancement.

Funnily enough, this here website—adactio.com—is technically a progressive app now.

At their simplest, Progressive Web Apps are application-like things hosted on your web server. If you’re as old as me, you might call them “web sites”

Troubleshooting rendering performance issues - YouTube

Harry packs a lot of great tips and tricks into one short video about performance troubleshooting. It’s also a great lesson in unlocking some handy features in Chrome’s developer tools.

Great stuff!

A look at detecting, pinpointing, measuring, and fixing rendering performance issues.

Best viewed with - Velocity Amsterdam 2015 // Speaker Deck

Are we doomed to see history repeat itself? With the amount of client-side MVC frameworks and the upcoming implementation of the ES6 syntax, will we soon be seeing a repeat of the “browser wars.” Will more websites only work in a select number of browsers with the capabilities to run their code?

Three years with CSS Grid Layout

Rachel outlines the history of the CSS Grid Layout spec so far:

The process works, as slow as it may seem to us who wait anxiously to be able to take advantage of these techniques. I am happy that we are waiting for something that I really believe has the ability to completely change how we do layout on the web.

<input> I ♡ you, but you’re bringing me down – Monica Dinculescu

The sad history of input elements.

I wish I could share in the closing optimism:

Now imagine the future where Web Components are supported natively, and someone else is allowed to write a <better-input>, an element that is a real, encapsulated DOM element, and not just a div soup. Imagine using this <better-input> that isn’t implemented differently in each browser, that looks the same everywhere, and that probably also knows how to bake you a cherry pie.

But I all I can think is:

Now imagine the future where Web Components are supported natively, and everyone is allowed to write a million variations of <my-idea-of-a-better-input>, an element that is an inaccessible div soup under the hood.

Doing Science On The Web – Infrequently Noted

Alex recounts the sordid history of vendor prefixes and looks to new ways of allowing browsers to ship experimental features without causing long-term harm.

CSS element() function - Vincent De Oliveira

Fire up Firefox and try out these demos: the CSS element value is pretty impressive (although there are currently some serious performance issues).

To put it simply, this function renders any part of a website as a live image. A. Live. Image!

Dave Shea – – beyond tellerrand DÜSSELDORF 2015 on Vimeo

A wonderful, wonderful history of the web from Dave at this year’s Beyond Tellerrand conference. I didn’t get to see this at the time—I was already on the way back home—so I got Dave to give me the gist of it over lunch. He undersold it. This is a fascinating story, wonderfully told.

So gather round the computer, kids, and listen to Uncle Dave tell you about times gone by.

The web is awesome - blog.lmorchard.com

The death of the web has been greatly exaggerated.

There’s nothing else like it. It’s constantly improving. It’s up to you what you do with it.

Edge Conference 2015 - 5 Progressive Enhancement - YouTube

Here’s the video of the panel I participated in at Edge conference, expertly moderated by Lyza.

Thanks to the video editing, you can’t see the face I’m making when the guy from Facebook talks about user-agent sniffing as a totally cool and reliable way of working.

Why availability matters

A superb illustration of why playing the numbers game and dismissing even a small percentage of your potential audience could be disastrous.

It’s not 1% of people who always can’t see your site and 99% of people who always can. It’s 1% of visits. Almost all the people who don’t get your site correctly actually should have been able to. They don’t have JavaScript turned off. They’re not browsing on a WAP phone over a 2g connection from a shanty town. They’re you, in a cellar bar or a hotel room or waiting for the phone network to wake back up.

Thriving in Unpredictability - TimKadlec.com

This is the way to approach building for the web:

I want to make as few of those assumptions as possible. Because every assumption I make introduces fragility. Every assumption introduces another way that my site can break.

It’s progressive enhancement, but like Stuart, Tim is no longer planning to use that term.

Progressive Apps: Escaping Tabs Without Losing Our Soul – Infrequently Noted

I really like Alex’s framing of best-of-breed progressively enhanced websites as “progressive apps” (although Bruce has some other ideas about the naming).

It’s a shame that the add-to-homescreen part isn’t standardised yet though.

Dev.Opera — Making websites that work well on Opera Mini

Using Progressive Enhancement makes your site better for all users and enables the 275 million users of Opera Mini worldwide.

Monica at Mozilla: Tracking Protection for Firefox at Web 2.0 Security and Privacy 2015

I believe that Mozilla can make progress in privacy, but leadership needs to recognize that current advertising practices that enable “free” content are in direct conflict with security, privacy, stability, and performance concerns — and that Firefox is first and foremost a user-agent, not an industry-agent.

The JavaScript-Dependency Backlash: Myth-Busting Progressive Enhancement

Progressive Enhancement remains the best option for solving web development issues such as wide-ranging browser support, maintenance and future-proofing your application.

It’s a Website | treevis

Apps:

Apps must run on specific platforms for specific devices. The app space, while large, isn’t universal.

Websites:

Websites can be viewed by anyone with a web browser.

And that doesn’t mean foregoing modern features:

A web browser must only understand HTML. Further, newer HTML (like HTML 5) is still supported because the browser is built to ignore HTML it doesn’t understand. As a result, my site can run on the oldest browsers all the way to the newest ones. Got Lynx? No problem. You’ll still be able to find matches nearby. Got the latest smartphone and plentiful data? It’ll work there, too, and take advantage of its features.

This is why progressive enhancement is so powerful.

My site will take advantage of newer technologies like geolocation and local storage. However, the service will not be dependent on them.

The Future of the Open Web - Broken Links

I completely understand Peter’s fears here, and to a certain extent, I share them. But I think there’s a danger in only looking to what native platforms can do that the web doesn’t (yet). Perhaps instead we should be looking to strengthen what only the web can offer: ubiquity, access, and oh yeah, URLs.

The Web (Browser) We Forgot - Kimberly Blessing (Think Brownstone) keynote - YouTube

This is a wonderful presentation by Kimberley at O’Reilly’s Fluent Conference, running through the history of the Line Mode Browser and the hack project we worked on at CERN to emulate it.

Accessibility and Low-Powered Devices | Brad Frost

Brad points out the importance of supporting—which is not the same as optimising for—the non-shiny devices out there.

I really like using the Kindle’s browser as a good baseline for checking that information is available and readable.

With a spoonful of flexbox by Charlotte Jackson, Front-end developer

Charlotte has experimenting with a nice discrete bit of flexbox on her personal site. Here she documents what she did, and what the fallback is.

Future Friendly Fruition | Brad Frost

The launch of the Apple watch prompts Brad to remind us of the benefits of being future-friendly.

Once again, responsive design is not about “mobile”, “tablet”, and “desktop”. It’s about creating experiences meant to look and function beautifully on anything that can access the Web. We don’t know what gizmos will be sitting underneath Christmas trees two years from now, but there’s a damn good chance those gadgets will be able to access the Web.

Dev.Opera — The State of Web Type

If you don’t have time to poke around StateOfWebType.com here’s the short version.

Adrian Roselli: All of This Has Happened Before and Will Happen Again

Everyone who calls for WebKit in Internet Explorer is exactly the same kind of developer who would have coded to Internet Explorer 15 years ago (and probably happily displayed the best viewed in badge).

Truth.

It’s happening again, and every petulant, lazy developer who calls for a WebKit-only world is responsible.

Vivaldi - A new browser for our friends

From the ashes of Opera, a new browser is born. Download the tech preview and take it for a spin—it’s quite nice.

Android Wear and the Moto 360 Browser

Anna documents the most interesting bit (for me) of her new wearable/watch/wrist-device/whatever — the web browser.

Windows 10 Technical Preview IE UA String

I love Lyza’s comment on the par-for-the-course user-agent string of Microsoft’s brand new Spartan browser:

There must be an entire field emerging: UA archaeologist and lore historian. It’s starting to read like the “begats” in the bible. All browsers much connect their lineage to Konqueror or face a lack-of-legitimacy crisis!

The Emularity « ASCII by Jason Scott

Jason documents some pretty amazing levels of emulation in JavaScript:

That’s Netscape 1.0n, released in December of 1994, running inside Windows 3.11, released in August of 1993, running inside of Google Chrome 39.0.2171.99 m, released about a week ago, on a Windows 7 PC, released in 2009.

But when it comes to trying to navigate the web with that set-up, things get a bit depressing.

Competing on “Chrome”, From the Notebook of Aaron Gustafson

First, the browsers competed on having proprietary crap. Then, the browsers competed on standards support. Now, finally, the browsers are competing on what they can offer their users.

Over It by Brad Frost

So keep things simple. Build to standards. Use progressive enhancement. Don’t try to send wheelbarrows full of JavaScript down the pipes unless you have to. Don’t make assumptions.

The Shifting Definition of Front-End Developer

I don’t agree with the conclusion of this post:

Let’s define “front-end” to mean the parts of the app relating to user interface, rather than those that happen to be running in the browser’s JavaScript VM.

But I think the author definitely taps into a real issue:

The real problem is the perception that any code running in the browser is front-end code.

Let’s face it: programming something in Angular and Ember has much more in common with programming something in Rails or Django than it has with writing HTML, CSS, and JavaScript.

This is something we’re running into at Clearleft: we’ve never done backend programming (by choice), but it gets confusing if a client wants us to create something in Angular or Ember, “because that’s front end code, right?”

Front end and back end - QuirksBlog

This!

The difference between back-enders and front-enders is that the first work in only one environment, while the second have to work with myriad of environments that may hold unpleasant surprises.

Yes!

I feel that the subconscious assumption that a complex JavaScript-driven web site or web app will run in only one monolithic environment is the root cause of many problems front-enders see in back-end-driven web-based projects.

The challenge for web designers in 2015 (or how to cheat at the future)

Designing primarily in a laptop web browser and testing with a mouse rather than fingers may come to look very out of date soon.

Some thoughts on “designing in the browser” | The Haystack

An important clarification from Stephen:

You don’t actually design in the browser

When I speak of designing in the browser, I mean creating browser-based design mockups/comps (I use the terms interchangeably), as opposed to static comps (like the PSDs we’re all used to). So it’s not the design. It’s the visualization of the design—the one you present to stakeholders.

Exactly!

Personally, I think it’s as crazy to start in the browser as it is to start with Photoshop—both have worldviews and constraints that will affect your thinking. Start with paper.

Taking Chrome DevTools outside of the browser. — Kenneth Auchenberg

Kenneth has isolated Chrome’s dev tools into its own app. This is a big step towards this goal:

Why are DevTools still bundled with the browsers? What if clicking “inspect element” simply started an external DevTools app?

With DevTools separated from one specific browser, a natural next step would be making the DevTools app work with other browsers.

State of Web Type

Like caniuse.com, but for typography features. Find out what’s supported in browsers today.

WebP via picture

This strikes me as an eminently sensible idea by Emil: using the picture element to begin providing WebP alternatives to JPG.

Of course, picture-supporting browsers will have to adjust their decision-making algorithm to support this pattern.

Oh, Jeremy, you silly billy. It turns out that this works right out of the box. Nice!

On HTML5 and the Group That Rules the Web

Paul Ford’s potted history of web standards, delivered in his own inimitable style.

Reading through the standards, which are dry as can be, you might imagine that standardization is a polite, almost academic process, where wonks calmly debate topics like semicolon placement. This is not the case.

HTML5’s “Dirty Little Secret”: It’s Already Everywhere, Even In Mobile - ReadWrite

I’m an advocate for progressive enhancement. Tom Dale is not. But even though we may disagree on that, there’s a lot to like in his sensible, balanced answers to some sensationalist linkbaity questions.

It’s not that the pace of innovation on the Web is slower, it’s just solving a problem that is an order of magnitude more challenging than how to build and distribute trusted apps for a single platform. As we saw on the desktop, it may take a few years to catch up to all of the capabilities of a native, proprietary platform, but in terms of the impact it will have on humanity, forgive me for not losing sleep if we have to wait a few years for it to arrive.

Thanks to Microsoft, Opera just got 100M potential new mobile browser users

I mentioned this a little while back, but it’s worth remembering just how many people are using Opera Mini …and how many more are about to join them.

Bring it on!

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.

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.

Keep ’em Separated — ericportis.com

I share the concerns expressed here about the “sizes” attribute that’s part of the new turbo-powered img element (or “the picture element and its associates”, if you prefer). Putting style or layout information into HTML smells bad.

This is a concern that Matt Wilcox has raised:

Change the design and those breakpoints are likely to be wrong. So you’ll need to change all of the client-side mark-up that references images.

I can give you a current use-case: right here on adactio.com, you can change the stylesheet …so I can’t embed breakpoints or sizes into my img elements because—quite rightly—there’s a separation between the structural HTML layer and the presentational CSS layer.

Responsive Images: If you’re just changing resolutions, use srcset. | CSS-Tricks

Following on from that post of Jason’s I linked to, Chris also emphasises that, for most use cases, you probably only need to use srcset (and maybe sizes), but not the picture element with explicit sources.

It’s really, really great that people are writing about this, because it can be quite a confusing topic to wrap your head around at first.

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.

» Don’t use <picture> (most of the time) Cloud Four Blog

Jason points out that the picture element might not be needed for most responsive image use cases; the srcset and sizes attributes will probably be enough—that’s what I’m doing for the photos on my site.

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).

Bruce Lawson’s personal site  : Reflections on Extensible Web Summit, Berlin

Bruce went to the Extensible Web Summit in Berlin and wrote up his notes.

Sounds like he shares my excitement, but also my nervousness.

I’m not yet entirely convinced that we’re not heralding a new era of JavaScript-only web development. I don’t want to see the fossilisation of the declarative web and a new Programmer Priesthood (re-)emerge.

There’s also this important point, that Alex would do well to remember before crying “Piffle and tosh!”:

We need to ensure that all devs who want to can participate by allowing ease of collaboration, courteous discourse.

Opera signs licensing agreement with Microsoft - Opera Software

Opera Mini is about to be installed as the default browser on a few more million phones.

You might want to think about how your Angular-powered JavaScript-required web thang works in one of the world’s most popular web browsers.

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.

The Mobile Web should just work for everyone - IEBlog

One more reason why you should never sniff user-agent strings: Internet Explorer is going to lie some more. Can’t really blame them though—if developers didn’t insist on making spurious conclusions based on information in the user-agent string, then browsers wouldn’t have to lie.

Oh, and Internet Explorer is going to parse -webkit prefixed styles. Again, if developers hadn’t abused vendor prefixes, we wouldn’t be in this mess.

Meet the Online Tracking Device That is Virtually Impossible to Block - ProPublica

Well, thanks to the ass-hattery of AddThis, the use case of your site’s visitors switching off JavaScript for (legitimate) security reasons just became a lot more plausible.

But you’re using JavaScript as an enhancement, right? You’re not relying on it for core tasks, right?

Breach - A browser for the HTML5 era

A new browser on the block (though not a new rendering engine), this one is written is written entirely in JavaScript. It’s worth taking it for a spin to see some of the interesting interface ideas around tabs and loading indicators.

Personally, I’m all for more browsers. The more, the merrier.

What If Browsers And The Web Didn’t Exist? What If There Were Only Native Apps?

I, for one, don’t welcome our applinks overlords.

So, you’re checking out your news feed on your Facebook app and you see a CNN post that you want to read. After reading the post on CNN, you decide you want to to read the source article on TMZ…

For the Love of the URL — Aaron Grando

Some URLs are ugly. Some URLs aren’t. Let’s not sacrifice them.

Ingredients by Mark Boulton

A lovely post by Mark on the value of URLs.

Burying the URL - Allen Pike

Right now, this move to remove URLs from the interface of Chrome is just an experiment …but the fact that Google are even experimenting with it is very disturbing.

“Who? Me? No, I was never going to actually blow the web’s brains out—I just wanted to feel the heft of the weapon as I stroked it against the face of the web.”

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

webcompat.com

I like this idea. It would be nice to see it catch on…

  1. Report a bug for any website or browser.
  2. Our team of volunteers diagnoses the bug.
  3. We send a fix to the site owner or browser.

Using Photoshop in Responsive Workflows - Web Standards Sherpa

A nice summation by Dan of when it makes sense to use a graphic design tool like Photoshop and when it makes sense to use a web browser.

Daring Fireball: Rethinking What We Mean by ‘Mobile Web’

John echoes some of my recent thinking about what qualifies as a web browser and, by extension, what qualifies as the web:

We shouldn’t think of “the web” as only what renders in web browsers. We should think of the web as anything transmitted using HTTP and HTTPS. Apps and websites are peers, not competitors. They’re all just clients to the same services.

That said, I think he is perhaps underestimating the power of URLs. Addressability—particularly over an extended time period—remains the powerful feature of the web.

Mobile-first and IE8 Solution – Introducing grunt-legacssy (Updated) | Robin Plus

A handy way of automating the creation of old-IE stylesheets using Grunt. This follows on from Jake’s work in using preprocessors and conditional comments to send a different stylesheet to IE8 and below—one that doesn’t contain media queries. It’s a clever way of creating mobile-first responsive sites that still provide large-screen styles to older versions of IE.

Platformed. — Unstoppable Robot Ninja

The importance of long-term thinking in web design. I love this description of the web:

a truly fluid, chaotic design medium serving millions of imperfect clients

Jonathan T. Neal | Thoughts on Media Queries for Elements

Some good ideas on the idea of element-level media queries, a feature that developers are crying out for and browser makers are saying is too hard. This post has some thoughts on how to deal with the potential issues.

Happy 17th Birthday CSS | Web Directions

A lovely history lesson on CSS from John.

300ms tap delay, gone away - HTML5Rocks Updates

I think Chrome is doing the right thing by removing the 300 millisecond tap delay on sites that set width=device-width — it’s certainly better than only doing it on sites that set user-scalable=no, which felt like rewarding bad behaviour.

The (other) Web we lost

John shares his concerns about the increasing complexity involved in developing for the web.

Unify – Unicode support on browsers and devices

Some excellent research for web developers: find out which unicode characters have the widest support—release useful for choosing icons.

Grade components, not browsers—Filament Group, Inc., Boston, MA

I really like Scott’s approach to defining what “support” means in terms of browsers—it makes a lot sense to break things down to the component level.

Laying The Groundwork For Extensibility—Smashing Coding

The authors of the Extensible Web Manifesto explain the thinking behind their …uh… thinking.

There’s a lot to like here, with some practical examples of where we’ve seen a disconnect between JavaScript APIs and declarative HTML (looking at you, Geolocation).

Long Term Web Semantics on Infrequently Noted

Alex starts with a bit of a rant about the phrase “semantic HTML”, which should really just be “well-written HTML, but there then follows some excellent thoughts on the emergence of meaning and the process of standardising on vocabularies.

isMobileDevice and the death of innocence

A nice bit of sleuthing to trace the provenance of one piece of ill-advised user-agent sniffing JavaScript code.

Good luck getting that script updated for the thousands of sites and applications, you say to yourself, where it’s laying dormant just waiting to send devices the wrong content based on a UA substring.

What is EME?

Henri gives an overview of the DRM-style encryption proposed for HTML. It’s a very balanced unbiased description, but if you have the slightest concern about security, sentences like this should give you the heebie-jeebies:

Neither the browser nor the JavaScript program understand the bytes.

Web App Source Code Protection Community Group

This is the worst idea for a W3C community group ever. Come to think of it, it’s the worst idea for an idea ever.

CERN: Line Mode Browser « optional.is/required

Brian writes up his experience working on the line-mode browser hack event at CERN.

Internet and Web Pioneers: Robert Cailliau - YouTube

Once you get past the cheesy intro music, there are some gems from Robert Cailliau in here.

LMB hack days: Jeremy Keith

I took a little time out of the hacking here at CERN to answer a few questions about the line-mode browser project.

Dream team of web developers to recreate line-mode browser at CERN

This is what I’m working on today (where by “working on”, I mean “watching other far more talented people work on”).

SVG Fallbacks | CSS-Tricks

Alas, that clever SVG fallback trick I linked to a couple of days ago has some unexpected performance side-effects.

Surfin’ Safari - Blog Archive » Improved support for high-resolution displays with the srcset image attribute

WebKit nightlies now have support for srcset. I’m pleased to see that it’s currently constrained to just handling the case of high-density displays; it doesn’t duplicate the media query functionality of picture.

I’ve always maintained that the best solution to responsive images will be some combination of srcset and picture: they each have their strengths and weaknesses. The “art direction” use case is better handled by picture, but the “retina” use case is better handled by srcset.

Crippling the web - TimKadlec.com

A great call-to-arms from Tim, simply asking that we create websites that take advantage of the amazing universality of the web:

The web has the power to go anywhere—any network, any device, any browser. Why not take advantage of that?

Inevitably there is pushback in the comments from developers still in the “denial” stage of coming to terms with what the web is.

Responsive design: we are not there yet

A call for developers to let standards bodies know what we want:

It is important that we as developers focus on the right things again. If you encounter a bug, you should not only fix it for your site; you should reach out to browser vendors and web standards people to fix this in a long-term solution. It might cost you a few minutes, but brings a lot of improvement to the whole developer community.

Issue 18850005: Disable double tap zoom on mobile sites, to remove 300ms click delay - Code Review

Well, this is interesting: it looks like Chrome might stop waiting 300ms for potential double-tap-to-zoom events if the site is using a meta viewport declaration that sets the width to device-width.

Hot Topics Panel with Jeremy Keith - Mobilism 2013, Day 2, Afternoon, Final session on Vimeo

The closing hot topics panel I moderated at this year’s Mobilism conference in Amsterdam, featuring Remy, Wilto, Jake, and Dan.

Why the Web Doesn’t Need Another CSS Zen Garden - YouTube

A great history lesson from Dave.

Ah, I remember when the CSS Zen Garden was all fields. Now get off my CSS lawn.

Web Fonts and the Critical Path - Ian Feather

The battle between web fonts and performance. Ian Feather outlines some possible solutions, but of course, as always, the answer is “it depends”.

The Extensible Web Manifesto

An intriguing initiative to tighten up the loop between standards development and implementation.

Request Quest

A terrific quiz about browser performance from Jake. I had the pleasure of watching him present this in a bar in Amsterdam—he was like a circus carny hoodwinking the assembled geeks.

I guarantee you won’t get all of this right, and that’s a good thing: you’ll learn something. If you do get them all right, either you are Jake or you are very, very sad.

Line-mode browser dev days at CERN

Squee! I’m going to CERN on the 19th and 20th of September to take part in this hackday-like project to recreate the first line-browser.

If you want to help out, fill in the application form.

Deep dive into the murky waters of script loading

Jake casts a scrutinising eye over the way that browsers load and parse scripts …and looks at what we can do about it.

The irregular musings of Lou Montulli: The reasoning behind Web Cookies

A fascinating look at the history of cookies …from the inventor of cookies.

Is Android good yet?

Joking aside, this is a useful resource for keeping track of the current spread of Android versions.

mezzoblue § 10 Years

Wow! The CSS Zen Garden is a decade old. Crazy! It’s a true piece of web history …and it’s back!

Responsive Inspector

A handy plugin for Chrome that always you to inspect media query breakpoints and take screenshots at any of them.

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.

List of pseudo-elements to style form controls by TJ VanToll

Want to style those new HTML5 input types? I hope you like vendor prefixes.

Thoughts on Blink

A good history lesson in rendering engines: KHTML, WebKit, and now, Blink.

datalist experiment

This is wonderful stuff! I’m a big fan of the datalist element but I hadn’t realised how it could be combined with input types like range and date.

So nifty!

How to lose weight (in the browser)

A handy one-stop-shop for tips on improving front-end performance.

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.

For discussion: viewport and font-size data in client hints

The “client hints” proposal looks really interesting: a way for user-agents to send data to the server without requiring the server to have a library of user-agent strings. But Scott has a few concerns about some of the details.

Playing with game console browsers

The slides from Anna’s terrific talk at the Responsive Day Out.

gaia/build/ua-override-prefs.js at master · mozilla-b2g/gaia · GitHub

And this is why user-agent sniffing not a future-friendly technique. A new mobile browser comes along, and it has to spoof a fake UA string to all of these sites.

It’s a Red Queen arms race.

Protip: All browsers that support SVG background images also supports multiple background images.

A very hand tip from Ben on using SVG background images with a PNG fallback for IE8 and below.

The impending crisis that is Windows XP and IE 8 by Troy Hunt

A good explanation of the litany of woes that comes from Internet Explorer 8 being the highest that users of Windows XP can upgrade to. It’s a particularly woeful situation if you are a web developer attempting to provide parity. But there is hope on the horizon:

2013 will see the culmination of all these issues; support for IE 8 will drop of rapidly, users of XP will find an increasingly broken web, the cost of building software in XP organisations will increase.

Form Follows Function

A gorgeous collection of experiments that showcase just how much is possible in browsers today.

Interview with Ian Hickson, HTML editor on HTML5 Doctor

Bruce sits down for a chat with Hixie. This is a good insight into the past and present process behind HTML.

Deploying New Image Formats on the Web - igvita.com

A well-reasoned argument for tackling image optimisation on the server, using content-type negotiation.

Mobile first: the revolution is well under way - Generated Content by David Storey

David takes a look at worldwide trends in web browsing, pointing out where mobile traffic exceeds desktop …and we’re not necessarily talking about smartphones here either.

It would be possible to travel from the Niger Delta on the west coast of Africa, to the horn of Africa on the east coast, without passing through a country where people surf more on desktop than a mobile phone.

Going Full Frontal — Acko.net

Steven Wittens, who gave a terrific talk all about maths at last week’s Full Frontal conference, describes his experience at that most excellent event.

HTML5 forms (and IE10 (Mobile)) | Andrea Trasatti’s tech notes and more

Andrea looks at support for HTML5 input types in IE10 Mobile.

IE10 Snap Mode and Responsive Design - TimKadlec.com

Useful advice from Tim on preparing your responsive site for IE10’s new “snap mode”. Don’t worry: it doesn’t involve adding any proprietary crap …quite the opposite, in fact.

Game Console Browsers

This is an excellent resource from Anna. She’s documenting the browser capabilities of games consoles.

WebPlatform.org — Your Web, documented

A one-stop-shop for browser-compatibility information. This is MDN, HTML5 Rocks, and Quirksmode all rolled into one.

CSSquirrel : Game Break | opinions and news on web design by Kyle Weems

Hey look; Anna’s in a CSSquirrel comic! And for good reason: Kyle is as impressed as I am with Anna’s research into browsers on gaming devices.

There’s also a call for more community device labs. I approve.

A List Apart: Articles: Testing Websites in Game Console Browsers

An excellent in-depth article from Anna on the many gaming devices out there that have both an internet connection and a web browser.

LukeW | Data Monday: Mobile Browser Use

Luke collates some useful mobile browsing statistics once again. Most of it is quite US-centric, but this closing point is a whopper:

36 countries more than doubled their Opera Mini user bases in one year.

» 4 August 2012, baked by Bruce Lawson @ The Pastry Box Project

Bruce writes about a worrying trend in standards work:

Tossing a specification that you’ve written in-house, in secret and already implemented onto a table at W3C, saying “here, standardise this” as you saunter past isn’t a Get Out of Jail Free card for proprietary misdemeanours. And it isn’t standardisation.

Things that compile to JavaScript

Stuart on the importance of View Source.

Twitter Blog: Overhauling mobile.twitter.com from the ground up

A great behind-the-scenes look at the redesign (and redevelopment) of Twitter’s mobile subdomain silo. Man, I would love to see this progressively enhanced up to the current widescreen view for “desktop” browsers without the need for separate URLs for any class of device.

But I digress …this is good stuff.

It’s time to stop blaming Internet Explorer | NCZOnline

Nicholas is inside my head! Get out of my head, Nicholas!

What makes the web beautiful is precisely that there are multiple browsers and, if you build things correctly, your sites and applications work in them all. They might not necessarily work exactly the same in them all, but they should still be able to work. There is absolutely nothing preventing you from using new features in your web applications, that’s what progressive enhancement is all about.

Squirrel!

Here’s a brainbuster for ya: a single file that renders both as HTML and as a JPEG. As an HTML page, it even contains an img element with a src of …itself!

Compare the “view source” output with the generated source output to see it’s being interpreted.

Anna Debenham: Using the Nintendo DSi browser

Anna reports on her experience testing on a device we don’t often think about: the Nintendo DS …very popular with the young ‘uns.

The Evolution of the Web

A nice timeline visualisation of recent history.

Florian’s Compromise | Responsive Images Community Group

Wilto does an excellent job of summarising the current state of responsive images, highlighting Florian Rivoal’s compromise proposal that combines the best of the picture element with the best of srcset.

New Internet Explorer 7 Tax :) -

Well, I guess this is one way of encouraging people to upgrade their browser.

Responsive images: what’s the problem, and how do we fix it? - Dev.Opera

A nice round-up of the issues around responsive images and their potential solutions.

Issue #408: Generate a separate css with flattened media queries

This is an excellent idea from Jake: use a preprocessor to automatically spit out a stylesheet for older versions of IE that includes desktop styles (garnered from the declarations within media queries).

If you’re a dab hand with Ruby and you’d like to see this in SASS, you can help.

» The real conflict behind picture and @srcset (Cloud Four Blog)

Jason outlines the real challenge to every proposed solution for responsive images: they just don’t jibe with the way that browsers (quite rightly) pre-fetch images.

Shallow Thoughts » srcset vs. picture

A well thought-out evaluation on responsive images from Bridget.

The origin of the blink tag

Have you thought “There must be a good reason for the blink element.” Well, read on.

Mobile Browser Panel 2012, Mobile Browser Panel at Mobilism 2012 Moderated by Jeremy Keith, this panel features Andrea Trasatti (Nokia), Andreas Bovens (O…

Here’s the video of the mobile browser panel I moderated at Mobilism in Amsterdam. These guys were really good sports to put up with my wisecracking shots for cheap laughs at their expense.

Proposition to change the prefixing policy from Florian Rivoal on 2012-05-04 (www-style@w3.org from May 2012)

This seems like a sensible way for browsers to approach implementing vendor-prefixed CSS properties.

We don’t support Internet Explorer, and we’re calling that a feature | Tips for Freelancers on Time Tracking and Invoicing | Paydirt Blog

This is the absolutely worst way to think about browser support: because the design doesn’t render “pixel perfect” (whatever that means) in a browser, that browser is blocked from accessing content. This is completely unnecessary and shows a fundamental lack of understanding of the web’s greatest feature: progressive enhancement.

The state of responsive images | Feature | .net magazine

Wilto gives a thorough explanation of the state of things with responsive images, particularly the work being done at the Responsive Images Community Group at the W3C.

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.

10 questions about web performance – Jeremy Keith at Clearleft

I had a chat with the guys from Pingdom about performance’n’stuff. If I sound incoherent, that’s because this is a direct transcription of a Skype call, where, like, apparently I don’t, y’know, talk in complete sentences and yeah.

Media Query & Asset Downloading Results | TimKadlec.com

Tim has published the results of a whole bunch of testing he did on how different browsers deal with hidden or replaced images.

Responsive News - Cutting the mustard

This seems like a sensible way of separating capable browsers from legacy browsers: if the browser supports querySelector, localStorage and addEventListener, you’re good to go.

Testing For Dummies | Testing

An in-depth look at the BBC News mobile testing process. I think it’s great that people are sharing this kind of information.

BrowserQuest

A fun little multiplayer game, all possible in the browser thanks to web sockets.

Shirky: View Source… Lessons from the Web’s massively parallel development.

An oldie but a goodie: Clay Shirky looks at the design principles underlying HTML in order to figure out what made it so successful. Even though this is fourteen years old, there are plenty of still-relevant insights here.

Nicholas Zakas: Progressive Enhancement 2.0 - YouTube

A great talk by Nicholas on what progressive enhancement means today. There’s some good ammunition in here.

scottjehl/Device-Bugs

Scott has created a one-stop-shop for documenting browser bugs in mobile devices. Feel free to add to it.

Stop solving problems you don’t yet have | this is rachelandrew.co.uk

I completely agree with everything Rachel says here. I see far too many projects that start out with pre-emptive conditional comments, JavaScript libraries and polyfills, without knowing whether or not they’re actually going to be needed.

Video, Mobile, and the Open Web | Brendan Eich

Mozilla will be supporting H.264 …but they’re not happy about it.

I won’t sugar-coat this pill. But we must swallow it if we are to succeed in our mobile initiatives. Failure on mobile is too likely to consign Mozilla to decline and irrelevance.

Content Protection, fonts, and trolling « in progress

Chris defends himself from some inaccuracies I flung his way, regarding fonts and DRM.

LukeW | Vector Images for Mobile

Luke rounds up some of the alternatives to bitmap-based images—an increasingly important topic for “resolutionary” “retina’ displays (bleurgh!).

Browser Support? Forget It! – David Bushell – Web Design

A great post that discusses exactly what we mean when we talk about “supporting” different browsers.

Ringmark

An acid test for mobile browsers. Point your device at rng.io and it will report on how much or little mobile shininess is available.

Responsive Summit: The One Tool | Mark Boulton

Mark talks about the tools web designers use and the tools web designers want. The upshot: use whatever you’re most comfortable with.

The CSS3 Test

A really handy test site from Lea that reports your browser’s recognition of CSS properties.

A List Apart: Articles: Responsive Images: How they Almost Worked and What We Need

A terrific article from Wilto detailing the thinking that went into the Boston Globe’s responsive image techniques and how browser pre-caching is now throwing a spanner in the works.

An introduction to Web Intents – an interview with Glenn Jones

Harry interviews Glenn about web intents (web actions). Glenn gives a good clear explanation of what they are.

Browser Support

A very useful site for checking browser support for CSS features. The test cases are really handy and the site gets extra bonus points for not calling itself “HTML5” anything.

HTML5 Please

This looks like a handy resource with a shitty, shitty name. Count the number of items that are in HTML (or JavaScript or APIs). Now count the number of items that are in CSS.

» 21 January 2012, baked by Ben Ward @ The Pastry Box Project

Some valuable musings from Ben on how browsers could be better — and I don’t mean the usual moaning about performance or device APIs.

On designing content-out (a response to Zeldman and others) | Stephanie Rieger

Stephanie details all the things we have to know about when designing for today’s broad range of devices: performance, capabilities, form factor, pixel density, and network latency.

These are all good points but I worry that if we just concentrate on the current device landscape, our processes won’t adapt to the future.

Leaving Old Internet Explorer Behind — Joni Korpi

Joni points out a great advantage to the mobile-first approach if you choose not to polyfill for legacy versions of IE: you can go crazy with all sorts of CSS3 goodies in the stylesheet you pull in with media queries.

Confusion over HTML5 & WAI-ARIA | Karl Groves

This helps to clarify the difference between native semantics and ARIA additions.

Is the web dead?

View source.

Heaven Devoid of Stars – a tale of cross-browser kerning | Clagnut § Browsers · Typography · CSS techniques

Richard dives into the differences in how browsers handle kerning. Be sure to click through to the beautiful finished result.

Support Vs Optimization | Brad Frost Web

Brad is on a roll. He knocks it out of the park again, this time talking about the difference between supporting the huge range of mobile browsers out there compared to trying to optimise for them.

Position: fixed revisited - QuirksBlog

PPK tests the various ways that mobile browsers handle position:fixed, complete with videos.

Polyfilling The HTML5 Gaps With JavaScript

An in-depth look at browser polyfills: what they are, how they work, and how you can make your own.

The Mobile Case for Progressive Enhancement | Brad Frost Web

A great, great reminder from Brad on the importance of progressive enhancement especially on mobile. There seems to be a real mindset amongst developers working on mobile sites that JavaScript is a requirement for building anything (and there’s a corresponding frustration with the wildly-varying levels of JavaScript support). It ain’t necessarily so!

Vendor Prefixes Are A Rousing Success | Infrequently Noted

Alex weighs in on the newly-reopened debate on vendor prefixes, roundly squashing Henri’s concerns.

Fixed Positioning in Mobile Browsers | Brad Frost Web

Brad takes a detailed look at mobile browser support for fixed positioning and how it intersects with page zooming.

LukeW | The Web OS is Already Here…

Luke points out that the web is everywhere: it’s accessible through the browser but also through many native applications. This is the real Web Operating System.

The Web (browser) is inside of every application instead of every application being inside the Web (browser).

CSS vendor prefixes, an answer to Henri Sivonen -

Daniel responds to Henri’s call-to-arms on vendor prefixes. While he stridently disagrees with most of what Henri suggests, there is also overlapping agreement: they both want vendor prefixes to ship only in experimental builds, not stable browser releases.

Vendor Prefixes Are Hurting the Web

This is a very thoughtful piece by Henri on vendor prefixes and it’s well worth a read …however the thought of one browser implementing support for vendor-prefixed properties intended for a different browser does make me quite quesy.

zomigi.com » Essential considerations for crafting quality media queries

A wonderfully in-depth article from Zoe on all the practical aspects of using media queries for layout.

Responsive IMGs Part 2 — In-depth Look at Techniques « Cloud Four

Jason continues his look at responsive images techniques by diving into the nitty-gritty of the various options out there.

Responsive IMGs — Part 1 « Cloud Four

Jason takes a high-level look at tackling mobile-first responsive images (his next post will dig into the details). This is a really good summation of current thinking. Be sure to read the comments too: Andy chimes in with his experiences.

Browser Market Pollution: IE[x] is the new IE6 « Paul Irish

Paul paints a grim picture of our future support nightmares with multiple Internet Explorers, each one with multiple buggy “compatibility” modes.

Bruce Lawson’s personal site  : Future friendly, or Forward to Yesterday?

Bruce nails his colours to the mast of future-friendliness (and nicely summarises recent heated debates between John Allsopp, Alex Russell and Joe Hewitt).

The web is a different problem | Web Directions

John pushes back against the idea that browser innovation is moving too slow.

Test page for -webkit-font-smoothing | Christoph Zillgens

This handy matrix shows the effect of different -webkit-font-smoothing setting on various text combinations (serif/san-serif light/dark, etc.).

Things the W3C Should Stop Doing | Infrequently Noted

I was all set to bristle against an attack on the W3C from Alex …but when I actually read the post, I found it hard to disagree with. If anything, this shows just how much Alex cares about the W3C (probably more than most people).

The conversation in the comments is worth reading too.

Mobile HTML5 - compatibility tables for iPhone, Android, BlackBerry, Symbian, iPad and other mobile devices

This just launched at the Breaking Development conference: another site that uses the term HTML5 to include CSS and Ajax. Still, despite its inaccurate nomenclature, it’s a useful compatibility table of device support in mobile browsers.

Mobile Web: Taiwan, Opera and WebOS

An eye-opening insight into web usage on mobile devices in Asia from Paul Rouget.

Line-height in input fields | 456 Berea Street

This abuse of the !important declaration in Firefox’s user-agent stylesheet was driving me crazy recently. Roger proposes a CSS patch, but this is really something that needs to be fixed in the browser.

Jake Archibald - Font-Face - Good vs Legal on Vimeo

Jake’s talk at DIBI earlier this year was absolutely fantastic. It features a rape reference, a story about pissing, and a Human Centipede metaphor.

It’s also very, very informative. Watch this.

davidnewton.ca | The Current State of Hyphenation on the Web

A valiant attempt to polyfill support for hyphenation in browsers other than the latest Safari and Firefox.

marstall/shim - GitHub

A very clever and tricksy way to sync up multiple devices so that when you refresh a URL or follow a link on one, it happens on all of them. It uses OS X’s Internet Sharing feature combined with locally-hosted Node.js. It’s positively McGyverian!

Hyphenation arrives in Firefox and Safari | Fontdeck Blog

Finally. Hyphenation on the web.

Pretty much the only forms of Western literature that don’t use hyphenation are children’s books and websites. Until now.

HTML5 Rocks - How Browsers Work: Behind the Scenes of Modern Web Browsers

Insanely in-depth look at how browsers work, right down to the nitty gritty. You’d think there’d be a lot of engineering talk, but actually a lot of it is more about linguistics and language parsing.

Techniques For Gracefully Degrading Media Queries - Smashing Magazine

There are some inaccuracies and misrepresentations in here, but on the whole this is a pretty good round-up of your options when dealing with responsive design in older browsers.

Bruce Lawson’s personal site  : HTML5, hollow demos and forgetting the basics

A great reminder from Bruce that we need to remember to use cutting-edge web technology responsibly.

Chromium Blog: Connecting Web Apps with Web Intents

A quick overview and explanation of web intents.

LocalStorage in use on the Fontdeck Website | Fontdeck Blog

Listen to Josh explain a genuinely useful example of HTML5’s local storage that he’s added to Fontdeck.

CreativeJS | The very best of creative JavaScript and HTML5

This is your one-stop shop for envelope-pushing in the browser:

The very best of creative JavaScript and HTML5.

Getting Sourcey – native HTML5 Audio and video | Web Directions

Everything you ever needed to know about adding HTML5 audio and video to your site, courtesy of the mighty John Allsopp.

To hell with bad devices: Responsive web design and web standards | Marc Drummond

An excellent summation of one web developer’s journey with responsive web design.

The Story of the HTML5 Shiv « Paul Irish

This dovetails nicely with my recent post about the spirit of distributed collaboration. Here’s a great little bit of near-history spelunking from Paul, all about styling new HTML5 elements in pesky older versions of Internet Explorer.

LukeW | Mobilism: Mobile Browser Panel

Luke’s notes from the browser panel I moderated at the Mobilism conference.

Mobile Browser panel, fzijlstra on USTREAM. Conference

Here’s a video of the mobile browser panel I moderated at Mobilism in Amsterdam today. It gets fairly technical for a while but it was mostly a lot of fun.

Font sizing with rem - Snook.ca

Well, ya learn something new every day …or at least I did. I had no idea about the rem unit—relative em—for font-sizing in CSS.

the html5 switch | the 200ok weblog

Ben Buchanan has a nice round-up of some of the options available when you’re switching over to HTML5.

Translation From MS-Speak to English of Selected Portions of Dean Hachamovitch’s “Native HTML5″ announcement [dive into mark]

Mark Pilgrim translates Dean Hachamovitch’s utterly bizarre and nonsensical announcement of IE10 that kept talking about “native HTML5.”

Jeremy Keith Interview: Web Standards and Design Principles at An Event Apart

A quick chat with me in the hallway after my talk in Seattle.

Read ePub ebooks online : Bookworm ePub reader

A browser-based ePub reader. ‘Cause it’s (X)HTML all the way down, baby.

The State of HTML5 Audio - PhobosLab

A rather vicious evaluation of browser support for the audio element and the audio API. It is divided up into:

  • Browsers From Companies That Actually Care About HTML5 Audio
  • Browsers From Companies That Hate the Web Enough to Not Support Ogg/Vorbis, but do Have an Audio Tag So They Can Say They Have an Audio Tag (Seriously, Fuck You)
  • Browsers That Say They Support HTML5 Audio But Actually Don’t Support HTML5 Audio

yepnope.js | A Conditional Loader For Your Polyfills!

A nice’n’small lazy loader that should make life easier when it comes to pollyfilling browser support for nifty HTML5 or CSS3 features.

Thinking about the HTML and XML

Some musings from Norman Walsh. I have to say, I’m still not entirely sure why the HTML/XML Task Force exists. The “use cases” described here are vague and handwavey.

The browser is always behind - QuirksBlog

PPK on the circle of life when it comes to online technology advances; innovation happens fast in proprietary platforms, but the good stuff ends up being natively supported in browsers. It’s a pretty good ecosystem, all in all.

Selectivizr - CSS3 pseudo-class and attribute selectors for IE 6-8

Adding CSS3 support to legacy versions of Internet Explorer using JavaScript. I like the fact that, although it requires a JavaScript library, it works with multiple libraries.

CssUserAgent (cssua.js)

This script adds user-agent information in class names to the document’s root element so that those user agents can be targeted with CSS. It could be useful, but only in direst need.

..about validating

An oldie but a goodie. This is why we have standards.

audio.js

A handy shim for audio: it uses the native implementation where possible and Flash as a fallback.

Stubbornella » Blog Archive » The hacktastic zoom fix

Nicole proposes an interesting way of clearing floats with a combination of display:table-cell and generated content.

Bobbie Johnson dot org : Ian Hickson on HTML5: “The W3C lost sight of the fact that they have no power”

Bobbie is publishing the interviews he conducted with various HTML5 bods when he was researching his Technology Review article. First up: Hixie.

Microformat Shiv

Handy! A JavaScript API for accessing microformats in a document, based on Mozilla's implementation for extensions.

20 Things I Learned About Browsers and the Web

A delightful online book that makes excellent use of HTML5's history API.

HTML5 Forms Validation in Firefox 4 - Mounir Lamouri's Blog

A quick run-through of some of the new HTML5 form features coming in Firefox 4.

HTML5 Conformance Test Results

All the tests and all the results, all in one place.

Yiibu - About this site...

A great explanation of the responsive enhancement of this site.

HTML5 accessibility

A handy table of new HTML5 elements and whether or not they are exposed to assistive technology.

rem @ > 140 characters - Hold off on deploying HTML5 in websites?

I couldn't agree more with this rant from Remy. He took the words right out of my mouth.

HTML5 inputs and attribute support

A very handy page for showing HTML5 form element support in your browser.

HTML Resource Packages

An interesting performance proposal from mozilla that will degrade nicely in legacy browsers.

A List Apart: Articles: Prefix or Posthack

An excellent argument in favour of vendor prefixes in CSS, from Eric.

The Paciello Group Blog » When will Google Chrome be accessible?

Steve Faulkner has created a petition to let Google know what screenreader users think of Chrome's appalling lack of basic accessibility hooks.

Mozilla hires open-standards guru Celik | The Social - CNET News

Tantek is working with Mozilla now. I expect great things will come of this.

The All-In-One Almost-Alphabetical No-Bullshit Guide to Detecting Everything - Dive Into HTML5

A really handy list of really short JavaScript code for HTML5 feature detection.

Firefox 4: the HTML5 parser – inline SVG, speed and more ✩ Mozilla Hacks – the Web developer blog

Henri Sivonen gives the lowdown on the HTML5 parser that will ship with the next version of Firefox. This is a huge development ...and yet users won't even notice it (by design).

theoriginofthe<blink>tag (www)

The origins of the blink element are fascinating. To nobody's surprise, alcohol was involved.

Bulletproof HTML5 <details> fallback using jQuery · Mathias Bynens

A good example of the correct way to approach new interactive elements in HTML5 (the details element in this case): test for native support and then emulate with JavaScript if required.

Plugging the CSS History Leak at Mozilla Security Blog

Mozilla aims to plug the :visited/getComputedStyle bug/feature.

Daring Fireball: GIF, H.264, and Patents

A thoughtful piece by John Gruber on HTML5 video: yes, software patents are toxic to the web but perhaps H.264 isn't the worst offender.

code · Video for Everybody!

Encode your video twice (mp4 and ogg) and you can then serve it up in 4 different ways: 2 HTML5 video sources, 1 quicktime player, and 1 Flash player.

Code: Flickr Developer Blog » Language Detection: A Witch’s Brew?

This. This right here is how you manage sites in multiple languages. Are you listening, Google?

Why do we have an IMG element? [dive into mark]

A fascinating trip down memory lane to the birth of the IMG element.

Web fonts test

Test cases for font-linking.

The Paciello Group Blog » Google Chrome frame - accessibility black hole

Using Google Chrome Frame in IE will give users of assistive technology the same shitty to non-existent experience they would get in the actual Google Chrome browser.

Bulletproof @font-face syntax « Paul Irish

Getting font-linking to work in all browsers.

Why is HTML Suddenly Interesting? - O'Reilly Radar

Simon St. Laurent explains why mobile support for HTML5 mitigates Microsoft's dominance of desktop web browsing.

HEY-IT - We want to get rid of IE6!

A poster campaign aimed at encouraging IT departments to upgrade company browser policy.

Hallvord R. M. Steen - Most expensive javascript ever?

How one line of JavaScript cost a hardware vendor millions. Browser sniffing is bad, m'kay?

IS HTML5 READY?

Remy's riposte to http://ishtml5readyyet.com/

How to create EOT files without Microsoft WEFT — Edward O’Connor

@font-face for all — Ted shows how to convert TTF files to EOT using the command line.

Digg the Blog » Blog Archive » Much Ado About IE6

Trammell outlines the thoughtful, research-based approach that Digg will be taking in phasing out IE6 support.

camen design · Video for Everybody!

The smart way to put video on the web: don't choose one single delivery method.

Bruce Lawson’s personal site : Impasse on HTML 5 video

The spectre of patents is hurting progress on the web.

HTML5 Demos

Courtesy of Remy. Doesn't he ever sleep?

beautiful fonts with @font-face at hacks.mozilla.org

A good description of how font linking works.

Walls Come Tumbling Down presentation slides and transcript | For A Beautiful Web

Andy's excellent presentation from An Event Apart in Boston and @media in London. Required reading/viewing.

Persuading Microsoft to Implement Canvas « Processing.js Blog

The 26 step process required to add +1 to a feature request in IE. Franz Kafka is alive and well and living in Redmond.

Fluid Images — Unstoppable Robot Ninja

Ethan follows up his Fluid Grids article with an equally excellent piece on resizing images.

Asa Dotzler: Firefox and more: what's the web look like?

Here's a different kind of browser stats graph. It shows numbers instead of percentage. Percentage-based graphs don't show just how much the pie has grown over time.

IE6 Update

This is kinda sneaky but quite clever. Subtly encourage IE6 users to upgrade.

html5 and Firefox2

Remy explains how to get Firefox 2 and Camino to recognise HTML5 structural elements.

ChiGarden » Blog Archive » Tutorial - Making the IE Voodoo Doll

Step by step instructions for making your own Internet Explorer voodoo doll to stick pins into.

Forget the mobile web: One site should work for all - at ZDNet.co.uk

Great article by Bruce defending the principle of One Web.

How to run Safari 4 beta and Safari 3 on the same mac: BeatnikPad Journal

Neil explains how you can have your Safari cake and eat it.

DearIE6 - So Long

Bid farewell to IE6.

Font-weight is still broken in all but one browser | Clagnut § Browsers · Typography · CSS techniques

A superb bit of browser research by Richard. "There’s more to the lives of many typefaces than just Bold and Regular, but almost no browsers follow the proper CSS 1 way of specifying Light, Semibold, Black and other weights. There is a workaround,…

BBC - Future Media Standards & Guidelines - Browser Support Standards v3.3

A document outlining browser support standards for bbc.co.uk

Main - browsersec - Google Code - Browser Security Handbook landing page

This looks like being an excellent—and free—resource "...meant to provide web application developers, browser engineers, and information security researchers with a one-stop reference to key security properties of contemporary web browsers."

Ubiquitous web font embedding just got a step closer | Web Directions

John has come to the same conclusion as Richard with regards to font embedding. In short, the font foundries are missing a huge revenue stream. They could be offering fonts on a per-domain basis (a la Google Maps or any other third-party API). Rem…

paulhammond.org: Conditional classnames

Here's a handy little trick from Paul: use conditional comments to add a class to your BODY element, allowing you to target IE without a separate stylesheet.

Five CSS design browser differences I can live with | For A Beautiful Web

A great article by Malarkey wherein he lists five examples of progressive enrichment (as Dan is wont to call it) complete with side-by-side comparisons. Useful ammo, this.

Update on WebKit accessibility support (Re: WebKit release cycle and dep

The last piece is falling into place. IE8 has ARIA support, Mozilla has ARIA support ...and now WebKit is getting there. Excellent!

A reasoned response to X-UA-Compatible • Gated Logic • nevali.net

A nice analysis and skewering of Microsoft's proposed default behaviour for version targeting.

this is rachelandrew.co.uk » IE8 and the future of the web

Rachel adds her thoughts on Microsoft's broken implementation of version switching—and very good thoughts they are too.

Dean Edwards: IE7.js version 2.0 (beta)

A new version of Dean's IE7 script is available. Given my daily frustrations with IE6, I hope its marketshare declines enough that I can use this as a magic bullet in front-end development.

Do websites need to look exactly the same in every browser?

Like "is it Christmas?" or "is Twitter down?" but less Boolean.

W3C DOM Compatibility - HTML

PPK has once again been doing sterling work. He's updated the DOM compatibility chart and things are actually looking pretty good.

Jeffrey Zeldman: King of Web Standards

Hail to the King... so says Business Week.

Thirteen Simple Rules for Speeding Up Your Web Site

The justification behind YSlow. If you've heard Nate Koechley speak, some of this will be familiar to you. It's all solid advice as far as I can tell.

A Proposal for a Safari Microformats plugin : journal : hicksdesign Ο°

Jon's mock-ups of how microformat detection and display might work in Safari are spot on. It would be so cool if this idea was picked up by browser developers.

Dave Shea London Geek Dinner - 23rd January 2006

A transcript of the Q&A session with Dave.