Tips: Highlighting common thing that come up
How slow is to slow
According to a research done by Google, if a web page loads in more than 5 seconds, the probability that a mobile user will leave that page increases by 90%.
Link tag trailing slash
Trailing slash on void elements has no effect and interacts badly with unquoted attribute values.
<link rel="icon" type="image/png" href="/assets/favicon.png">
<link rel="icon" type="image/png" href="/assets/favicon.png"/>
<script> tag is text/javascipt so it's unnecessary and can be omitted.
Top WCAG Errors from WebAIM
According to Web AIM the most common errors have been the same for the last 4 years. Fixing these few types of issues would significantly improve accessibility across your site.
Running 11ty with Netlify functions
To run Netlify functions with eleventy install
npm install netlify-cli then run
Server now ready on http://localhost:8888
Recent blogs I have been enjoying
The Independent Web or Indie Web movement has made reading blogs much more enjoyable. So I though I would put a quick list of some less know web site that I have been visiting to read up on things.
- Rob Owen
Developer, designer and linguist
- Evan Sheehan
Designer and builder
- Mészáros Róbert
- Sean C Davis
Writer, teacher, speaker, and consulter
These blogs are especially revealing to see what I would call the craftsman/craftswoman/craftsthem era of web design taking shape.
querySelector vs getElementByClassName
When you reference DOM elements using
getElements* calls live collections, and
querySelectorAll returns a static collection.
Visualize JSON data
To help visualize JSON data use the JSON Crack tool to generates graph diagrams from JSON objects.
:target CSS pseudo-class
This is a interesting one.
:target will select and element or div that has the same ID as the URL's hash. So if you have a div with the ID of
haber-dasher and you have an anchor with the
href="#haber-dasher then when you click the link and add #haber-dasher to the end of the URl like
someurl.com/#haber-dasher the class
:target will add blue to the h2 like this.
We can use this to let the user know they are in a specific part of the document for this like drop anchors or tabs.