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

Tips: Highlighting common thing that come up

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.