This is a terrific approach to tackling cross-site surveillance. I’d love it to be implemented in all browsers. I can imagine Safari implementing this. Chrome …we’ll see.
Reef is an anti-framework.
It does a lot less than the big guys like React and Vue. It doesn’t have a Virtual DOM. It doesn’t require you to learn a custom templating syntax. It doesn’t provide a bunch of custom methods.
Reef does just one thing: render UI.
Mike sees the church of JS-first ignoring the lessons to be learned from the years of experience accumulated by CSS practitioners.
As the responsibilities of front-end developers have become more broad, some might consider the conventions outlined here to be not worth following. I’ve seen teams spend weeks planning the right combination of framework, build tools, workflows and patterns only to give zero consideration to the way they architect UI components. It’s often considered the last step in the process and not worthy of the same level of consideration.
It’s important! I’ve seen well-planned project fail or go well over budget because the UI architecture was poorly planned and became un-maintainable as the project grew.
Nolan writes up what he learned making accessibiity improvements to a single page app. The two big takeways involve letting the browser do the work for you:
Here’s the best piece of accessibility advice for newbies: if something is a button, make it a
<button>. If something is an input, make it an
<input>. Don’t try to reinvent everything from scratch using
And then there are all the issues that crop up when you take over the task of handling navigations:
- You need to manage focus yourself.
- You need to manage scroll position yourself.
For classic server-rendered pages, most browser engines give you this functionality for free. You don’t have to code anything. But in an SPA, since you’re overriding the normal navigation behavior, you have to handle the focus yourself.
Dave enumerates the things about Vue that click for him. The component structure matches his mental model, and crucially, it’s relative straightforward to add Vue to an existing project instead of ripping everything out and doing things a certain way:
In my experience Angular, React, and a lot of other frameworks ultimately require you to go all in early and establish a large toolchain around these frameworks.
A very useful explanation of the ARIA attributes relating to state:
This starts as a good bit of computer science nerdery, that kind of answers the question in the title:
Alone, CSS is not Turing complete. CSS plus HTML plus user input is Turing complete!
And so the takeaway here is bigger than just speculation about Turing completeness:
Given that CSS is a domain-specific language for styling user interface, this makes a lot of sense! CSS + HTML + Human = Turing complete.
At the end of that day, as CSS developers that is the language we really write. CSS is incomplete without HTML, and a styled interface is incomplete without a human to use it.
Chris Ferdinandi has a good rule of thumb:
Makes sense, given their differing error-handling models:
‘Sfunny; I remember when we got pseudo-classes, I wrote a somewhat tongue-in-cheek post called
:hover Considered Harmful:
Presentation and behaviour… the twain have met, the waters are muddied, the issues are confused.
(Caveat: because everything’s happening in
script elements in the browser, what’s outlined here will only do client-side rendering.)
A useful design strategy exercise from Marty Neumeier.
The canonical example in just about every pattern library is documenting button variations. Here, Tyler shows how even this seemingly simple pattern takes a lot of thought.
I still haven’t used React (I know, I know) but this looks like a nice explanation of React and Redux.
A gallery of empty UIs. It reminds me of those galleries of clever 404 pages. Next step: a gallery of witty offline pages.
Following on from Ire’s post about linting HTML with CSS, here’s an older post from Ebay about how being specific with your CSS selectors can help avoid inaccessible markup getting into production.
An excellent location-based resource for US citizens looking to make a difference in the 2018 midterm elections.
A lesson on the importance of handling each state of an interface:
- the blank state,
- the loading state,
- the partial state,
- the error state,
- and the ideal state
…instead of just focusing on that last one.
A fascinating look at the history of cookies …from the inventor of cookies.
Don’t let James Bridle get a hold of this.
A really nice explanation by Todd Kloots of Twitter’s use of progressive enhancement with Ajax and the HTML5 History API. There’s even a shout for Hijax in there.