Tag Archive: web development
A look at my favorite features of Svelte, comparisons to React and other frameworks, and what makes it a joy to use.
How to determine point intersection or collision detection with Canvas paths, with or without tolerances / buffers / padding.
An introductory guide to the different parts of Google Lighthouse, how to use it via CLI and NodeJS, and strategies for customizing its configuration.
How to use WebViewClient with Android WebView to hook into network requests, intercept them, and block or modify them if they match certain rules.
Approaches for using CSURF for CSRF protection, but only on certain routes, and some with the ability to extract the generated token from the request.
How to use the Arc Canvas Web API method to draw partial filled circle segments, including quarter circles, and even with added rotation.
A fun browser-based ring light / fill light app, that lets you control a virtual light on your screen.
Project write-up for Brain Breaks Browser - a simple Preact-based web app to manage fun break exercises and activities, with a few added bells and whistles.
A guide on using SVG files with Svelte, and how to embed, inline-directly, or reference them, with or without rollup plugins.
A step-by-step guide on how to deploy a Preact app from a nested subdirectory, with instructions on updating Webpack, preact-router, and more.
A small web app with a shared login system to track the status of timed medication doses, as well as scheduled medications and therapy durations.
An experimental project that delves into the idea of rendering non-video content in Picture-in-Picture windows, use-cases, and a discussion of the future.
Various ways to investigate stalled content attached to a MediaSource instance, and different causes that can be evaluated and tested.
Exploring different ways to append videos to a MediaSource instance with SourceBuffers and appendBuffer calls. Includes fully functional examples and tips.
The easy way to migrate from one subdomain to another, for the same site and primary domain, using Netlify Redirect settings and Custom Domain Aliases.
A comprehensive write-up on different ways to convert and use binary data in front-end JavaScript code, web browser APIs, and even your local filesystem.
A reusable method for adding arbitrary extra HTML attributes to enqueued styles and scripts in WordPress, using add_data and filters.
Online educational addition game, where you try to create sets of playing cards that add up to 10. Built with Svelte and TypeScript, published as open-source.
Researching and summarizing offline database options for modern web applications, including low-level APIs, helpful wrapper libraries, SDKs, and more.
How to fix JSX TypeScript errors due to incompatible types between Preact and imported React component libraries, especially for JSX.Element.
CLI and module tool - static-build-cache package - built to help avoid redundant builds for static website projects.
Bookmarklet to enable Picture-in-Picture (PiP) support on sites that try to disable it, such as Hulu, and especially in browsers that honor it, such as Chrome.
Details on how default create-react-app projects will stall and fail to start on Glitch, and how to fix this issue with just a simple edit.
How to use Google Forms for quick user feedback collection, bug reporting, and the pros and cons of this approach.
Project and tool for generating IFrame embeds for any tweet from just the URL, no coding required or third-party scripts.
How to easily enable VSCode Intellisense and autocomplete within Webpack config JS or JSON files.
How to generate the perfectly sized cover images, with any input image, using Cloudinary's URL based transformations, overlays, and effects.
Overriding the default behavior of keyboard key presses in browsers with JavaScript, to get ALT and arrow key combinations working with a SPA.
An experimental ReactJS project to turn text input into a point based graphical output, shown as a Github Contributions Graph mockup.
A reminder of the emphasis on opinions in Prettier's guiding principles, and how this can conflict with ESLint.
Details on using a Google Cloud Platform Function and NodeJS to maintain a fixed URL that forwards to a dynamic Ngrok host and can be easily redeployed.
Information about public Reddit APIs, building post preview embeds, parsing Reddit JSON data, and an example of a custom Reddit embed generator.
Simple music meta info scraper bookmarklet, for a few sites. Grabs song title, artist, album title, and more, and then lets you copy to clipboard as TSV or JSON.
A Markdown-sourced, Gatsby-powered mini-site that displays a bunch of my cheatsheets, code snippets, and miscellaneous programming notes as I collect them.
A beginner attempt at creating automatic folder directory listing index pages within Gatsby, using createPages, GraphQL, MarkdownRemark and allDirectory.
<!-- WP HTML export, not converted to MD --> <p>I recently wanted to force WordPress to make all my <script> and stylesheet (<link>) tags load relative URLs instead of absolute URLs, and ended up learning a bit about the internals of WordPress (pr...
So many options for building a theme switcher or customization - CSS, React, Vue, Sass, etc. Let's break these down into examples and simple descriptions!
An exercise in modifying the script and style tag HTML output by WordPress from enqueue, in order to add async, defer, and lazy loading attributes to resources.
A guide on mixing Sass-syntax and SCSS-syntax within a single Vue project, and how it can conflict with vendor Sass files, such as Vuetify.
The custom WordPress theme that powers both the styling behind this site, as well as a lot of back-end logic that controls indexing, redirects, and more.
How to embed your Google Apps Script in an iframe when a user needs to authenticate it first before it can work. Solutions uses JSONP to inform parent page.
A breakdown of different ways to embed static and dynamic content into iframes, and dynamically generate iframe embeds on both the client-side and server-side.
Some random notes on using the Power BI Embedded Javascript APIs, such as resetting slicer visuals.
Quick demo to show a stream of Javascript DOM events emitted when users interact with a page.
Some code examples on how to force wow.js (aka WOW) to trigger on content that suddenly becomes visible, and/or force it to reanimate on ANY element.
My first ReactJS project: a visual editor ("what-you-see-is-what-you-get" or "WYSIWYG") to arrange, preview, and generate dynamic Cloudinary transformation combinations and URL templates.
I developed a chrome extension for a popular online time clock so that you could clock in, clock out, and check hours all from an easy to use popup that can be interacted with no matter what page you are on.
A nifty little bookmarklet to test any webpage for Google Analytics, verify that event tracking is working properly, and return a list of all linked Google Analytics IDs!
