John Cox

Blogs · @wyome · Now · Shelf

Interesting

www.html5accessibility.com

nested figures

This is an HTML accessibility guide on captioning a group of related images, using a castle-through-the-ages series as its running example. It recommends an outer figure with role="group" and a group figcaption at the top, containing a nested figure for each image with its own figcaption. This keeps every caption visible by default and lets you mark up details such as a French photographer's name with lang="fr". A second example shows the same structure with CSS to show or hide captions on hover or focus, and the guide warns against the anti-pattern of putting several images in one figure with captions in title attributes, which keyboard and touch users can't reach and which can't carry any semantic markup.

Permalink accessibilitydevelopmenttutorial

www.w3.org

CSS Text Level 3

This is the CSS Text Module Level 3 specification, covering how CSS turns source text into formatted, wrapped lines. It defines the properties for case and width transforms (text-transform), white space collapsing and preservation (white-space, tab-size), line breaking and hyphenation (word-break, line-break, hyphens, overflow-wrap), alignment and justification, letter and word spacing, indentation, and hanging punctuation. It keeps returning to the point that correct behavior depends on declared language and writing system, so it spends much of its length on cases like Thai, Arabic, CJK and Korean, and it tells authors to tag content language accurately. It also pins down the order of text operations and the "typographic character unit," and its change log shows the recent switch of letter-spacing to apply around characters rather than between them.

Permalink designdevelopmentcss3

Web Development Blog

Optimize Table, Speed up your MySQL Database | Web Development Blog

A PHP tutorial for automating MySQL table optimization, aimed at beginners but pitched as useful to anyone running WordPress-style sites on a VPS or dedicated server. It argues that table overhead from heavy database writes slows the server, and that instead of optimizing tables by hand in phpMyAdmin, you should run a daily script using MySQLi that loops through every database, checks each table's Data_free value, and runs OPTIMIZE TABLE on any with overhead. It also covers creating a dedicated MySQL user with the right privileges, scheduling the script with cron at 4 a.m., and emailing an error and success report via the crontab MAILTO setting or PHP's mail(), with advice to keep the script above the public web root to protect credentials.

Permalink programmingperformancedatabasetutorial

loopj.com

jQuery Tokeninput

Tokeninput is a jQuery plugin which allows your users to select multiple items from a predefined list, using autocompletion as they type to find each item. You may have seen a similar type of text entry when filling in the recipients field sending messages on facebook.

Permalink developmentpluginsjquery

Writing Jobs & Resources

Calepin

This isn't an article but a scraped landing page for a writing and web agency in Stow, Ohio, mixing resource links (how to become a blogger, beat writer's block, find topic ideas) with hiring pitches. It advertises a senior copywriter role that prizes turning a ten-minute client interview into persuasive, no-fluff sales copy, plus an experienced WordPress developer role centered on pixel-perfect builds from PSDs. The rest is a keyword-stuffed list of links for writing internships, entry-level and remote writing jobs, and SEO content services, with no real argument or reporting to recover.

Permalink seocareersjobsmarketing

Web Designer Wall

HTML5 Grayscale Image Hover

A tutorial for building a grayscale-to-color hover effect with HTML5 canvas and jQuery, without needing separate grayscale image files. The script clones each target image, redraws the original onto a canvas, averages each pixel's RGB values to produce the gray version, and fades between the two on mouseover and mouseout. The post gives the full code, notes on adjusting the selector and animation speed, and caveats about browser support (older browsers fall back to color, and local testing in Chrome or Firefox requires a web server), with the code credited to Darcy Clarke.

Permalink designprogrammingtutorialjquery

www.paulrhayes.com

Use CSS transitions to link Media Queries and JavaScript – Paul Hayes

Proposes a trick for getting JavaScript to react to CSS media query changes without window resize handlers: apply a near-instant CSS transition (0.001ms on width) only when a media query matches, then listen for the transitionEnd event. Because the event fires both when the rule starts and stops matching, and matchMedia can check the current state each time, this approximates the MediaQueryList listener behaviour that only Firefox 6+ supported at the time. The post includes a proof-of-concept `mql(query, callback)` function that creates a unique hidden element per query, notes it isn't yet a spec-compliant polyfill (no addListener/removeListener), and lists browser support, with IE9 excluded for lacking transitions.

Permalink programmingdevelopmentcss3

Forbes

Clayton Christensen: How Pursuit of Profits Kills Innovation and the U.S. Economy - Forbes

15 years go by, and he's still right...

Steve Denning relays Clayton Christensen's argument that business-school finance is hollowing out American industry. Ratio metrics like IRR and RONA reward shrinking assets and chasing short-term wins, so firms such as Dell and the "fab-less" chipmakers outsource piece after piece until they are little more than brands, while Taiwanese suppliers like ASUSTeK and TSMC gain the sophisticated know-how. Denning adds his own gloss: the tools could work if they counted lost knowledge and future innovation, but they assume a static world, and he proposes replacing profit-as-ratio with customer delight, measured by Net Promoter Score, as the firm's true bottom line.

Permalink businesseconomics

www.sitepoint.com

Seven Mistakes That Make Websites Slow » SitePoint

A pre-holiday-season pitch for web performance optimization, arguing that SEM and SEO spending is wasted if traffic spikes slow the site, since user patience has shrunk to about two seconds and over 90% of load time comes after the HTML arrives. It lists seven common mistakes with fixes: too many HTTP requests (concatenation, CSS sprites, fewer images), too little client-side processing, too few parallel requests (domain sharding, script loaders, Keep-Alive), poor caching, third-party widgets, bloated payloads (gzip, minification), and no global CDN. The piece is early-2010s in its specifics and plugs Yottaa, but it works as a compact checklist of front-end speed techniques.

Permalink performancedevelopmenttipsseo

Responsive News

Responsive News - Responsive CSS that scales

This is an archive page from the BBC News responsive web design blog, not a single article. It lists short teasers for about a dozen posts from roughly 2013 to 2015, covering the team's move to a single responsive codebase. The lead item offers 13 tips for making responsive sites multilingual, and another announces the BBC News migration after four years, 5,000 pull requests and 50 contributors, ending with one codebase serving 30 languages. The rest cover technical and process pieces, including a responsive SVG election map, Imager.js for image loading, responsive iFrames, the Wraith CSS regression-testing tool, and handling tables. There is also an open letter arguing that "design as a service" is incompatible with RWD. Worth keeping as an index to the BBC's responsive-build write-ups and to the linked posts on specific techniques.

Permalink designdevelopmentcss3

dev.mysql.com

MySQL :: NoSQL to MySQL with Memcached

The saved text is only a legal disclaimer from Oracle's site, not an article with an argument or reporting. It says that any statements about product development plans are informational, not a commitment to deliver features or code, shouldn't be relied on for purchasing decisions, and can't be folded into a contract. Timing and release of features remain at Oracle's discretion, and Oracle disclaims liability. The page's real content seems not to have been captured, so you may want to re-save it from the original URL to recover why it was worth keeping.

Permalink developmentdatabasesqlnosql

Alexmaccaw

Asynchronous UIs - the future of web user interfaces

Web apps still follow a "click and wait" request/response habit even though perceived speed measurably affects sales and engagement (Amazon, Google, and Yahoo! figures are cited). The piece argues for "asynchronous user interfaces": update the client instantly, then send the Ajax request in the background, with no blocking spinners or loading messages. Exceptions like credit-card payments are acknowledged, as is the value of unobtrusive, useful feedback. Using the author's Spine MVC framework as the example, it explains how to handle the problems this raises: replicating validation on the client, warning users on unload if requests are pending, catching server errors globally, swapping client-generated pseudo-GUIDs for server IDs, and queuing create/update/delete requests serially. It also stresses that this needs a client-side-state architecture from the start, not a retrofit.

Permalink designperformancedevelopmentajax

cssfontstack.com

code.google.com

www.vanseodesign.com

Unpacked

A vaccine that can kill cancer | Health

This is a notice, not an article: ISRAEL21c, the 20-year-old outlet covering Israeli innovation, culture, and daily life, has become part of Unpacked, a brand of OpenDor Media known for videos, podcasts, and learning resources on Israel, Judaism, and Jewish life. A short FAQ explains that ISRAEL21c-style stories will continue across Unpacked's website, social channels, podcasts, and YouTube, and that former newsletter subscribers will now get the Unpacked Community newsletter. Some answers, such as where to find past stories and what happens to the Digital Ambassadors program, are blank, and the page notes a partnership with the Friedkin Foundation. It's worth keeping only as a record of the merger and where ISRAEL21c content now lives.

Permalink healthsciencenews

Boing Boing

US college grads' salaries in steep decline - Boing Boing

Economist Michael Mandel calculates that real earnings for full-time, bachelor's-only college grads aged 25-34 have fallen sharply: down 19% for young men since their 2000 peak and 16% for young women since their 2003 peak. He pairs this with rising tuition and more aggressive student loan collection, which he sees as a dangerous combination. He says no one has yet explained why young grads were hit so hard, and he floats possible causes such as global competition, declining graduate quality, and information technology reducing demand for them, while promising economic, political, and policy questions. The rest of the saved text is unrelated Boing Boing sidebar items and ads.

Permalink educationeconomicsjobs

baymard.com

Redesigning the Country Selector - Baymard Institute

selectToAutocomplete is a jQuery plugin from the Baymard Institute that swaps ordinary select drop-downs for auto-complete text fields. It works entirely on the front end, pulling its options from the original select tag. It isn't tied to country lists, and in IE6 and IE7 it quietly leaves the plain drop-down in place. The auto-complete engine is deliberately separate: jQuery UI Autocomplete is bundled, and an adapter function lets you plug in any other. The page also covers the MIT license, setup, and options such as relevancy sorting, priority sorting, alternative spellings, and attribute copying.

Permalink designdevelopmentpluginsopensource