Lifting State up in React
Lifting state up in React explained clearly, including shared state, single sources of truth, child callbacks, and when moving state higher helps.
Articles
Front‑end Development, page 22 of 23
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 I have worked with for many years, and it has been a regular subject in my writing. There are four hundred articles collected together for you below.
Lifting State up in React. 
Check If Your Site is Running on localhost. Check If Your Site is Running on
localhostThere are many reasons that you might want to detect whether your code is running on localhost. Aside from using environment variables, there's also JavaScript!
When to Use a jQuery Plugin and When to Write Your Own. When to Use a jQuery Plugin and When to Write Your Own
Decide when a jQuery plugin is worth using, and when a small custom script is safer, clearer, easier to maintain, and less likely to leak assumptions.
Five Tips on How to Be a Good Web Developer. Five Tips on How to Be a Good Web Developer
Five habits of a good web developer, covering clean code, performance, testing, collaboration, curiosity, standards, and communication beyond code.
Dynamically Create a Script Element with JavaScript. Dynamically Create a Script Element with JavaScript
Create script elements dynamically with JavaScript, setting src, choosing head or body placement, loading external scripts, and understanding execution timing.
How to Read JavaScript Errors and Stack Traces. How to Read JavaScript Errors and Stack Traces
How to read JavaScript errors and stack traces in the browser, including common error types, line numbers, call stacks, and a practical debugging workflow.
Pass by Value vs. Reference in JavaScript. Pass by Value vs. Reference in JavaScript
Pass by value vs. reference in JavaScript explained clearly, including why objects seem shared, how reassignment differs from mutation and common beginner bugs.
Accessing a Random Element from an Array Using JavaScript. 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.
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.
Writing JavaScript That Still Works Without jQuery. Writing JavaScript That Still Works Without jQuery
Write small JavaScript behaviours that work without jQuery, covering selectors, classes, events, feature checks, fallbacks, and easier migration paths.
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.
Progressive Enhancement with jQuery. Progressive Enhancement with jQuery
Use jQuery as an enhancement layer while keeping links, forms, navigation, and core page content usable without JavaScript, late scripts, or plugin failure.
!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.
