Snippets
Using the aria-current attribute
It is common on the web for the current thing in a collection to be highlighted visually, but providing an alternative for screen reader users has often involved something of a hack. The
aria-currentattribute is intended to solve this problem.[…]
Here’s the official attribute definition:
Indicates the element that represents the current item within a container or set of related elements. The
aria-currentattribute is an enumerated type. Any value not included in the list of allowed values should be treated by assistive technologies as if the value true had been provided. If the attribute is not present or its value is an empty string, the default value of false applies and thearia-currentstate must not be exposed by user agents or assistive technologies.According to the ARIA 1.1 specification, the
aria-currentattribute can be given one of a predefined set of values (enumerated tokens):
- page
- represents the current page within a set of pages;
- step
- represents the current step within a process;
- location
- represents the current location within an environment or context;
- date
- represents the current date within a collection of dates;
- time
- represents the current time within a set of times;
- true
- represents the current item within a set;
- false
- does not represent item within a set.
So the
aria-currentattribute can be used to solve the first use case in this post like this:
Code language: CSS
[aria-current] {
font-weight: bold;
background-color: #cc33ff;
}
When a screen reader encounters the link identified with
aria-current, it will announce something like “Home, current page link”.Whenever
aria-currentis used with a value other than true, that information is incorporated into the screen reader announcement. For example in this set of steps, a screen reader will announce “Do this, current step link”.
It's more than just the words, or owning your data and experimenting on your own site
As we move our code to CodePen, our writing to Medium, our photographs to Instagram we don’t just run the risk of losing that content and the associated metadata if those services vanish. We also lose our own place to experiment and add personality to that content, in the context of our own home on the web.
Clean Code: JavaScript
This is excellent and you should read it all.
Software engineering principles, from Robert C. Martin’s book Clean Code, adapted for JavaScript. This is not a style guide. It’s a guide to producing readable, reusable, and refactorable software in JavaScript.
Not every principle herein has to be strictly followed, and even fewer will be universally agreed upon. These are guidelines and nothing more, but they are ones codified over many years of collective experience by the authors of Clean Code.
Our craft of software engineering is just a bit over 50 years old, and we are still learning a lot. When software architecture is as old as architecture itself, maybe then we will have harder rules to follow. For now, let these guidelines serve as a touchstone by which to assess the quality of the JavaScript code that you and your team produce.
One more thing: knowing these won’t immediately make you a better software developer, and working with them for many years doesn’t mean you won’t make mistakes. Every piece of code starts as a first draft, like wet clay getting shaped into its final form. Finally, we chisel away the imperfections when we review it with our peers. Don’t beat yourself up for first drafts that need improvement. Beat up the code instead!
Async events in ServiceWorkers with "event.waitUntil"
It’s asynchronous, see? So even though all that network code appears before the
returnstatement, it’s pretty much guaranteed to complete after the cache response has been returned. You can verify this by putting in someconsole.logstatements:
Code language: JavaScript
caches.match(request)
.then( responseFromCache => {
if (responseFromCache) {
event.waitUntil(
fetch(request)
.then( responseFromFetch => {
console.log('Got a response from the network.');
caches.open(staticCacheName)
.then( cache => {
cache.put(request, responseFromFetch);
});
})
);
console.log('Got a response from the cache.');
return responseFromCache;
}
Those log statements will appear in this order:
Got a response from the cache. Got a response from the network.That’s the opposite order in which they appear in the code. Everything inside the
event.waitUntilpart is asynchronous.Here’s the catch: this kind of asynchronous
waitUntilhasn’t landed in all the browsers yet. The code I’ve written will fail.But never fear! Jake has written a polyfill. All I need to do is include that at the start of my
serviceworker.jsfile and I’m good to go:
Code language: JavaScript
// Import Jake's polyfill for async waitUntil
importScripts('/js/async-waituntil.js');
