Graphic Design Web Design SEO Web Development HTML & CSS JavaScript WordPress Eleventy Innovation My YouTube Channel Speedlify Presenting Multi Grid Navigation Sounds Affordable & Reliable Golden Ratio Optimizations X-height

Tips: Highlighting common thing that come up

Mar 26, 2023

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%.

Feb 13, 2023

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"/>

Feb 12, 2023

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">

Feb 9, 2023

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.

Top WCAG errors
Jan 29, 2023

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

Jan 25, 2023

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.

These blogs are especially revealing to see what I would call the craftsman/craftswoman/craftsthem era of web design taking shape.

Jan 23, 2023

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.

Jan 21, 2023

Visualize JSON data

To help visualize JSON data use the JSON Crack tool to generates graph diagrams from JSON objects.

Jan 14, 2023

: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.