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.
Do
<link rel="icon" type="image/png" href="/assets/favicon.png">
Don't
<link rel="icon" type="image/png" href="/assets/favicon.png"/>
The “type” attribute is unnecessary for JavaScript resources.
The default type for the JavaScript <script> tag is text/javascipt so it's unnecessary and can be omitted.
<script type="text/javascript">
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 netlify dev.
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
Full-stack developer
- 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 document.querySelector* it doesn't reference elements that were dynamically added to the DOM by JavaScript. 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.
h2:target {
color: blue;
}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.