An overview of how I use CodePen as a scratchpad for small front-end experiments, finding it quicker than setting up scratch files in a separate VS Code instance. I cover the free and paid tiers, and mention that pens can be embedded in WordPress blog posts...
Beginners often can’t successfully Google coding problems because they don’t yet know the terminology, and I describe how the Discord community attached to ZTM courses helps fill that gap, with tasks that push students to introduce themselves, pair up, and answer others’ questions. Getting community help still requires doing your homework and providing enough context for someone to answer. A CodePen example demonstrating how to center an image in a div is included...
Applying Randy Pausch’s brick wall metaphor to software development, I describe building a web page that shows the ISS’s position on a live OpenLayers map, and the obstacles I hit along the way: the library’s complexity, unfamiliar Vite build tooling, GitHub Pages conflicts, and broken asset paths. Each wall prompts a cost/benefit judgment, and I leave the remaining polish undone in favour of progressing with the course...
A short write-up of a mixed content error that appeared when I called the Open Notify ISS location API from a page hosted on GitHub Pages over HTTPS. I explain why browsers block insecure requests from secure pages, note that the API doesn’t support HTTPS and GitHub Pages can’t serve over HTTP, and describe switching to the wheretheiss.at API, which supports HTTPS, as the fix...
A failed attempt to replace my React component’s inline-styled div with plain HTML and CSS leads to the realization that JSX is JavaScript code that mutates the virtual DOM, not HTML. I question why React uses the faux-HTML syntax instead of a pure JavaScript DOM API. An update notes that a video revealed the HTML-like syntax was an intentional selling point of React, and that similar ideas have already been tried and abandoned...
My notes from a first React tutorial, with a focus on JavaScript object destructuring. Examples show extracting object properties as local variables, either in a function’s parameter list or inside the function body, along with my thoughts on the readability trade-offs between the two approaches...
My quick guide to two small MacOS tips: the built-in Digital Color Meter app shows the RGB values of whatever is under the cursor (useful when matching colours, as with the iOS calculator buttons), and screenshots can include the cursor by enabling it in the Shift-Command-5 options...
After a podcast episode on JavaScript features to avoid piqued my interest in eval(), I built a browser-based calculator that passes button presses as a string directly to eval(). The app mimics the iPhone calculator’s design, with most of the effort going into CSS that displays correctly across different devices. I also cover browser responsive-mode tooling and a touch-action fix for iOS Safari’s double-tap zoom, with links to the source and live version...
I give a line-by-line walkthrough of my JavaScript solution to the “clean the room” coding challenge, which groups equal values in an array into subarrays and returns them sorted. My explanation covers spread syntax for array copying, sort() comparison behavior, the difference between for…of and for…in loops, and building an object keyed by value, with occasional comparisons to Swift equivalents...
I reflect on my frustration with JavaScript’s dynamic typing, which I see as a source of avoidable errors, and consider defensive type checking and TypeScript as responses. I also weigh Kyle Simpson’s argument from a JavaScript Jabber interview that, since JavaScript was designed to be dynamically typed, it’s better to embrace that than overlay a type system...
JavaScript is much more consistent across browsers now that Internet Explorer is largely unsupported, but tools for dealing with older browsers still exist. In the post, I cover approaches like libraries, polyfills, and transpilation with Babel, showing examples of arrow functions and backtick templates converted into IE 6-compatible code using Babel’s interactive web tool...
I give a tutorial-style explanation of functions in JavaScript, covering scope and pass-by-value arguments, nested functions, and my preference for passing values in explicitly rather than reaching for outer-scope variables. I then cover functions as first-class citizens, including anonymous and arrow function syntax, passing and returning functions, and using map to apply a function to array elements...
After seeing examples from a web development course, I try CodePen.io, an online editor for HTML, CSS and JavaScript with a live preview. I note its support for preprocessors, some quirks around document-level HTML, and its limits compared to a full IDE, and share a link to my first example pen...
A follow-up on a todo app I built alongside the Complete Web Developer course, in which I replaced right-click deletion and click-to-cross-out behavior with explicit check and delete buttons on each list item, motivated by discoverability and accessibility concerns. My implementation notes cover attaching handlers via onclick versus addEventListener, the fragility of indexing into childNodes, and innerText versus createTextNode for inserting content. I’ve included links to the source code and a live demo...
A rundown of the reference sites I rely on when developing web apps, prompted by how often tutorials I find via search turn out to be outdated. I cover W3Schools’ How To section, MDN Web Docs for detailed API references, CSS Tricks for CSS property details, and Can I Use for checking browser compatibility...
A learning exercise in DOM manipulation: I build a classic todo list web app where users add items via a text input and cross them off by clicking. I move from directly setting textDecoration to toggling a completed CSS class, separating behaviour from presentation, and also discuss element id naming conventions and the risks of hardcoded strings...
A short musing from a developer more used to type-safe languages: I find a JavaScript example uncomfortable and speculate that JavaScript objects may turn out to be just arrays. If so, accessing properties from inside functions would require something like self[2] notation...
My reflections on a JavaScript Jabber podcast discussion about how HTML, CSS, and JavaScript must preserve backward compatibility in ways compiled languages like Swift do not, illustrated by my 1996 website still rendering fine in modern browsers. I argue this legacy burden weighs down web technologies and makes them harder to learn, noting CSS features like flex-box can never be deprecated in favor of newer approaches. A later episode on semantic HTML revisited the theme, with hosts wishing breaking changes would force site owners to update...
I share a quick tip on running JavaScript in VS Code: install Node.js, and the editor will offer it as the runtime the first time you execute a JS file. I also note that the Live Server dev server is accessible to other devices on my network via my machine’s IP address, which is handy for previewing layouts on phones...
I write up the first practical challenge in the Zero To Mastery Complete Web Developer course: building a responsive page layout with CSS. Instead of mixing flexbox and grid as the challenge suggested, I used only CSS grid, then walk through the code for each section — nav bar, cover image, project grid, and footer — noting the nav link alignment was the trickiest part...
