The :not() CSS pseudo-class selector matches elements that are not specified in the argument.
e.g. h1:not(.page-title) {...}
Styles all h1 elements except for the elements with the class .page-title
Specificity note: The :not() pseudo-class does not add to the specificity of the element in its argument, the specificity of the :not() pseudo-class is that of the element in its argument.
The cohort have been trying to implement the BEM naming convention in our HTML and CSS. So far using BEM has been low on my list of learning priorities, but after reviewing our second group projects this week, I can see the merits of BEM for consistency across teams, readability and the reduction of specificity conflicts.
Briefly, the names are written as below:
Block
A parent element that is meaningful on its own
e.g. .accordion {}
Element
Children of the block element that is semantically tied to its parent
e.g. .accordion__copy {}
Modifier
A flag on a block or element that changes its appearance or behaviour
e.g. .accordion__copy--open {}
During my group project today my pair programming partner showed me the CSS Grid Inspector on Firefox. I’ve never used it before but it’s just changed my life!
On the CSS pane, any elements with display: grid; have a grid icon next to them which toggles the display of a grid overlay on the webpage.
I randomly came across a Lawyer 2 Lawyer podcast episode called “Website Accessibility and the ADA” and decided to give it a listen on my commute this morning.
In the USA, companies with inaccessible websites can be found to be in breach of the Americans with Disabilities Act (ADA). Title III of this act entitles disabled people to equally partake in and benefit from goods and services, which can be applied to online sales platforms.
The Robles v. Dominos Pizza LLC case arose in 2016 when blind user Guillermo Robles sued that chain after he found he was unable to order a custom pizza from Domino’s website or mobile app.
Screen readers handle buttons and links differently. Here are the best practices for using both:
| Buttons | Links |
<button> is a HTML element used to trigger JavaScript behaviour when clicked. | <a> is for link purposes, like navigating to other sections of your website, or an external link. |
| Use to signal clickable important actions, e.g. “submit”, “sign up”, “download”. | Can be used for less important actions. |
| Can be accessed with tab for keyboard navigation users, triggered by pressing the Space key or Enter key. | Can be accessed with tab for keyboard navigation users, only triggered by pressing the Enter key. |
console.log(fetch('url'));
Prints a promise on the console.
fetch('url')
.then(response => console.log(response));
Prints the response on the console with inaccessible data.
fetch('url')
.then(response => response.json());
Converts the response to JSON.
fetch('url')
.then(response => response.json())
.then(data => console.log(data));
Prints the JSON data on the console.
