Accessing a Random Element from an Array Using JavaScript
Pick a random array element in JavaScript with Math.random(), safe index calculation, reusable helpers, and notes on real interface randomisation.
Articles
Front‑end Development, page 19 of 19
Front‑end web development is my personal niche, it is the art of creating visual and interactive elements for a website, including layout, design, and interactivity, using HTML, CSS, and JavaScript.
Below you will find a subset of articles from my blog specifically about Front‑End Development. This is an area that I have worked with for many years, and have managed to write about quite a few times. There are three hundred thirty‑seven collected together for you below.
Accessing a Random Element from an Array Using JavaScript. 
Why Hiring a Local Web Developer Near You Matters. Why Hiring a Local Web Developer Near You Matters
Hiring a web developer in Brighton or London ensures better communication, tailored solutions for your market, prompt support, and boosts the local economy.
Get the Number of Years Between Two Dates with PHP and JavaScript. Get the Number of Years Between Two Dates with PHP and JavaScript
A common web development task: get the number of years between two dates. I discuss how to do this with PHP in the back‑end, or front‑end with JavaScript.
Using data‑* Attributes and dataset in JavaScript. Using
data‑*Attributes anddatasetin JavaScriptUse data attributes and dataset in JavaScript to connect HTML and behaviour cleanly, handle camelCase mapping, event delegation, and string values.
DOM Traversal: closest() in Vanilla JavaScript and jQuery. DOM Traversal:
closest()in Vanilla JavaScript and jQueryUse closest() for DOM traversal in jQuery and vanilla JavaScript, replacing manual parent walking in menus, click handlers, and interactive UI cleanly.
Using classList in JavaScript: add(), remove(), toggle(), and contains(). Using
classListin JavaScript:add(),remove(),toggle(), andcontains()Use classList in JavaScript for add(), remove(), toggle(), and contains(), with cleaner DOM state updates, validation examples, and className cautions.
!important in CSS. !importantin CSSUnderstand why !important in CSS creates cascade, specificity, consistency, and maintenance problems, plus when an override may still be defensible.
Handling Click Events in JavaScript. Handling Click Events in JavaScript
Handle click events in JavaScript with onclick and addEventListener, including vanilla alternatives to jQuery, event targets, and common interaction patterns.
DOMContentLoaded vs. load in JavaScript. DOMContentLoadedvs.loadin JavaScriptCompare DOMContentLoaded and load in JavaScript, including parsing, asset loading, script timing, selector failures, and when each event is useful.
Why querySelector Returns null in JavaScript. Why
querySelectorReturnsnullin JavaScriptDebug querySelector returning null in JavaScript by checking selector syntax, DOM timing, missing elements, search scope, and querySelectorAll differences.
How to Check an Element Exists with and Without jQuery. How to Check an Element Exists with and Without jQuery
Check whether an element exists with jQuery or vanilla JavaScript before running DOM code, avoiding null errors and fragile client‑side behaviour.
A Simple Popup Window Using jQuery. A Simple Popup Window Using jQuery
Opening a new browser window programmatically on‑click is very simple to achieve with jQuery, and no more complex to achieve with vanilla JavaScript too!
Setting CSS Blur Filter to Zero on a Retina Screen. Setting CSS Blur Filter to Zero on a Retina Screen
A bug in the WebKit engine that only affects website Retina screen devices means that setting a zero‑blur filter in CSS isn't as easy as it should be.
