John Cox

Blogs · @wyome · Now · Shelf

Interesting

jQuery BlockUI Plugin

Documentation and demo page for the jQuery BlockUI plugin, which fakes synchronous behavior during AJAX calls by overlaying the whole page or a single element and blocking user interaction without freezing the browser. It walks through page blocking (`$.blockUI()` / `$.unblockUI()`, wired to `ajaxStart`/`ajaxStop`), element blocking, a simple modal confirm dialog, and about fifteen styling demos (growl notifications, jQuery UI themes, onBlock/onUnblock callbacks, click-overlay-to-unblock, auto-timeout). It also lists every default option, which can be overridden globally or per call, plus FAQ notes on the v2 changes, jQuery version compatibility, and the lack of dependencies.

Permalink

Deep dive into the murky waters of script loading - HTML5 Rocks

Surveys every way a browser can load and run external JavaScript (plain script tags, defer, async, dynamically inserted scripts with async=false, and IE's readystatechange trick), explaining the quirks and bugs of each and why none of them gives declarative, non-blocking download with ordered execution. The author's practical advice is to put plain script tags at the end of the body, or, for aggressive performance, to combine a subresource link, async=false loading, an IE fallback, and defer in a 362-byte inline snippet. It ends with a quick-reference table of what the spec and each browser do, and pins hopes on JavaScript modules and HTTP2 to fix the situation.

Permalink

5 CSS3 features explained — Adnane Belmadiaf's Blog

A short tutorial on five CSS3 features that replace work once done with JavaScript: Flexbox (with examples for vertically centering a div and a fixed-fluid-fixed three-column layout), :nth-child for zebra-striped tables without extra classes, the hyphens property for automatic word-splitting, filter effects like grayscale, sepia and blur that run on the GPU, and media queries for responsive design. Each section gives a brief explanation and sample code, plus a browser-support listing, which is dated (Chrome 20, Firefox 26 for Flexbox, for instance) and useful mainly as a snapshot of that era's compatibility.

Permalink

Ladda

Ladda is a UI concept and small library that folds a loading indicator into the button that triggered the action, so a user who submits a form sees immediate feedback on the button itself rather than wondering whether anything happened. The page is mostly a demo gallery showing the button in many animation styles (expand, contract, zoom, slide in each direction), plus a built-in progress bar variant and a range of button sizes. It cites the forms on slides.com as a real-world example of the pattern in use.

Permalink

Screensiz.es

This is a scraped device-specification table, not a written article. It lists dozens of screens (Chromebooks, MacBooks, iMacs, Dell and Panasonic monitors, Windows laptops, and a few Android phones) with each one's OS, diagonal size, resolution, pixel density, density class (MDPI, XHDPI, HDPI) and aspect ratio. It looks like a reference for comparing display sizes and pixel densities across devices, for example in responsive design or screen testing. The page is partly broken: unrendered template placeholders appear throughout, and the final HTC Desire entry is cut off.

Permalink

5 HTML5 Javascript APIs to keep an eye on — Adnane Belmadiaf's Blog

A blog post surveying lesser-known browser JavaScript APIs that give pages access to device hardware and state, framed as a follow-up to the author's earlier HTML5 API roundup. It walks through five, each with a short code sample and a browser-support row: Battery Status (with the battery.js wrapper to smooth over vendor prefixes), Gamepad (with gamepadjs), Device Orientation (alpha/beta/gamma gyroscope data), Geolocation, and Page Visibility (useful for pausing games when a tab is hidden). It's an early-era, prefix-heavy snapshot, so it's more a catalogue of what was newly possible than a deep tutorial.

Permalink

Direction-Aware Hover with CSS3 and jQuery | Codrops

A Codrops tutorial on building a direction-aware hover effect for a thumbnail grid, where a description overlay slides in from whichever side the mouse enters and slides back out toward the side it exits. It uses an unordered list of linked images with absolutely positioned overlay divs, and a small jQuery plugin binds mouseenter/mouseleave and works out direction by treating each thumbnail as a rectangle split into four triangles. The plugin sets a "from" position, applies a CSS transition, then sets the final state. A second demo adds a hover delay to cut down on animation clutter, and jQuery animate serves as a fallback where CSS transitions aren't supported.

Permalink

QUnit

This is the landing page for QUnit, a JavaScript unit testing framework, pitching it as easy (zero config for Node, minimal setup in browsers), universal (runs in browsers, Node, SpiderMonkey, even Web Workers), and extensible through APIs for custom assertions, runners, and reporters. It includes a short example testing an `add` function with `QUnit.module` and `QUnit.test`, shown with both browser and TAP-format CLI output. It also lists the current release as v2.26.0 with download, npm, and Yarn install options, plus links to Mastodon, Bluesky, support chat, and the repository.

Permalink

So You Want to Accept Credit Cards Online? - Tuts+

A 2012 tutorial (republished) arguing that Stripe replaces the fee-heavy merchant-account-plus-gateway setup of Authorize.net with a single 2.9% + $0.30 per-charge rate and a five-minute signup, then walking through a full PHP/jQuery integration. The core technique is client-side tokenization: Stripe.js sends card details straight to Stripe, and only the single-use token reaches your own server, which keeps raw card data off your machine and out of your logs. It covers the practical details too, including SSL setup, test versus live keys, test card numbers, why a charge can still fail after a token is issued, and charging the card only after everything else is ready.

Permalink

jQuery Mask Plugin - A jQuery Plugin to make masks on form fields and html elements.

The saved text isn't an article. It's only the list of field labels from a demo page for a jQuery-style input masking plugin, with examples such as Date, ZIP Code, Money, US Telephone, Brazilian CPF and CNPJ, IP Address, and options like placeholder, clear-if-not-match, fallback digit, and selectOnFocus. There's no argument or reporting to summarize, so the only way to tell it apart from similar pages is that it shows a Brazilian-flavored mask library's range of formats, including São Paulo cellphone numbers and masks applied to div elements. If you meant to keep a particular write-up or tutorial, the actual body text didn't come through and may need to be re-saved.

Permalink

Montage - HTML5 framework

This is the landing page of "MontageJS Weekly," a site that presents itself as a source of tutorials and analysis on the MontageJS framework, a tool for building single-page apps with reusable components, reactive bindings and visual authoring. Much of it is lorem ipsum filler, generic "love of technology" boilerplate, and a short pros-and-cons list (extensible UI components versus a steep learning curve and public code), plus a brief piece on top developer frameworks in 2017. Most of the page is actually a directory of adult streaming sites that claim to run on MontageJS, so it looks like a spam or promotional front rather than a genuine technical resource, and it's of little use for learning the framework.

Permalink

jQuery Unveil - A very lightweight plugin to lazy load images

Unveil is a stripped-down version of Mika Tuupola's Lazy Load plugin for jQuery or Zepto.js, coming in under 1KB by dropping custom effects, containers, and other extras, while adding support for serving high-resolution images to retina displays. You put a placeholder in `src`, the real image in `data-src` (optionally `data-src-retina`), and call `$("img").unveil()`, which loads images only as they near the viewport. It also covers a pixel threshold for early loading, a post-load callback for fade-in animations, manual triggering, a "lookup" event for cases like tabbed layouts, and a way to cancel handlers, with IE7+ support and an MIT license.

Permalink

5 HTML5 Features you need to know – Adnane Belmadiaf's Blog

A roundup of lesser-used HTML5 features that replace work people usually do with JavaScript or server-side code. It covers dns-prefetch hints to pre-resolve domains, link prefetch and prerender to preload the next page or assets, the download attribute to force file downloads, the pattern attribute for regex validation on inputs, and the datalist element for built-in autocomplete. Each gets a short code snippet, making it a quick reference for markup-only shortcuts rather than a deep dive.

Permalink

WideArea - Better Textarea

WideArea is a tiny JavaScript and CSS library (about 2KB of JS and 4KB of CSS) that adds a full-width writing mode to ordinary textareas, with a toggle icon in the top-right corner once you start typing. To use it, include both files, add `data-widearea="enable"` to the textarea, and call `wideArea()` on the page. It's free for any use, including commercial, under the MIT license, so it's a handy drop-in for making long-form text input less cramped.

Permalink

Cargo-Culting in JavaScript - Tuts+

Argues that much popular JavaScript "best practice" is cargo-culted form: rules copied without understanding why they exist, such as typeof checks for undefined, always using ===, wrapping every for-in body in hasOwnProperty, over-parenthesising, quoting object keys, and the comma-first debate. For each, it explains what the rule actually protects against and when it's redundant or even breaks (e.g. hasOwnProperty on Object.create(null) objects, `value == null` as a legitimate null/undefined check). It concludes by rejecting the "code for a violent psychopath maintainer" maxim, urging developers to learn the language deeply and write for knowledgeable readers instead of defensively catering to the least informed.

Permalink