John Cox

Blogs · @wyome · Now · Shelf

Interesting

bearcss.com

Bear CSS - Helping you build a solid stylesheet foundation based on your markup

Bear CSS is a small web tool that reads your HTML markup and generates a CSS template stubbed out with every element, class, and ID you've used, saving the manual work of setting up a stylesheet skeleton. This is the project's about page rather than a tutorial: it credits two MA Multidisciplinary Design students in Belfast, Kyle Gawley (development) and Jordan Henderson (illustration and branding). It also notes the build was done in HTML5/CSS, jQuery, and PHP, with the PHP Simple HTML DOM Parser and Uploadify plugins, plus CSS3 animation and original artwork.

Permalink designdevelopmenttoolscss3

formalize.me

Formalize CSS - Teach your forms some manners!

Formalize is Nathan Smith's CSS framework for making HTML form elements look consistent across browsers and operating systems, pushing back on the view that styling forms is a bad idea. It's used by adding formalize.css plus a small JS file, available for jQuery, MooTools, Prototype, YUI, Dojo, and ExtJS, which fills in HTML5 form support for older browsers (down to IE6). The page also has a before/after comparison, endorsements from Zeldman, Mike Davidson, Chris Coyier, and Aaron Gustafson, and a demo contact form.

Permalink designdevelopmentcss3framework

the Guardian

Eyewitness: spotted trick | Art and design | guardian.co.uk

The saved text is only a photo caption and page scraps from a Guardian Eyewitness feature, with no actual article. It shows a child at a piano in Yayoi Kusama's The Obliteration Room (2011), an interactive children's installation within her Look Now See Forever exhibition at the Gallery of Modern Art in Brisbane, photographed by Stuart Addelsee. Beyond that single image and its credit, nothing argues or reports anything, so the reason you kept it is likely the photograph itself or the Kusama installation, not any written piece.

Permalink designartphotography

pagescroller.com

www.frequency-decoder.com

Vanseo Design

How To Make Forms More Usable With HTML5 | Van SEO Design

A survey of what HTML5 adds to web forms: new elements (datalist, output, meter, progress, keygen), new input types (search, email/tel/url, range, number, color, and the date/time family), and new attributes (placeholder, autofocus, autocomplete, required, pattern, readonly, min/max/step). The argument is that these are safe to use now despite patchy support, since most degrade to an ordinary text box, with Opera furthest ahead and IE lagging. It also notes that styling won't improve, and includes Jeremy Keith's JavaScript feature-detection functions for falling back to scripted solutions where a feature is critical.

Permalink designdevelopmenttutorial

Creative Bloq

MDN Web Docs

A re-introduction to JavaScript - MDN

This is a JavaScript overview written for programmers who already know another C-family language, walking through the language by comparison with Python, Java, C and others. It covers the seven primitive types and their quirks (IEEE 754 floats, NaN, truthy/falsy coercion, `==` vs `===`), let/const/var and the temporal dead zone, and objects, arrays, functions, closures and classes with private `#` fields. It also covers the event-loop model of async code (callbacks, promises, async/await) and modules. A running theme is separating what the core language defines from what the host runtime supplies, such as I/O, the DOM and module resolution, and it deliberately skips prototypes, closures and regexes as topics for deeper pages.

Permalink programmingdevelopmenttutorial

syddev.com

jQuery Shadow Plugin

The saved text isn't an article but a code snippet from the documentation or demo page for a jQuery plugin that adds CSS box shadows to elements. It lists calls to `.shadow()` for the default style and for the variants "lifted", "perspective" and "raised". It also shows side-specific shadows (`type:'sides'` with `vt-1`, `vt-2`, `hz-1` and `hz-2` options) and a rotated shadow set with `rotate:'-5deg'`, followed by class names for combining rotation with the lifted, perspective and raised styles. No prose explains how it works or where to get it, so it's mainly a quick reference for the plugin's options and syntax.

Permalink designpluginsjquerycss3

ha.ckers.org

Untitled (http://ha.ckers.org/xss.html)

This is a comprehensive technical reference guide for XSS filter evasion techniques, cataloging dozens of methods attackers can use to bypass security filters and inject malicious scripts into vulnerable web applications. The guide covers obfuscation strategies like HTML entity encoding, Unicode variations, character insertion techniques, and exploitation of browser parsing differences across Internet Explorer, Firefox, Opera, and Netscape. Rather than teaching attack execution or defense, it documents the underlying methodologies of how various encoding tricks, whitespace manipulation, and browser-specific quirks can defeat content filters—serving primarily as educational material for security researchers understanding XSS attack vectors.

Permalink securitydevelopmentxss

listjs.com

List.js - Add search, sort and flexibility to plain HTML lists with cross-browser native JavaScript by @javve

This is the homepage for List.js v2.3.1, a small, dependency-free vanilla JavaScript library that adds search, sort, and filter behavior to plain HTML lists, tables, or any repeated markup. It walks through three ways to use it: attach it to existing HTML by tagging elements with classes like `search`, `sort`, and `list`; start with existing markup and add items from JavaScript, using the first list item as a template; or build the whole list from scratch by passing an item template string and an array of values. Each setup is shown with short code snippets built around a `valueNames` option, and the page closes with endorsement tweets from Smashing Magazine, The Changelog, and JavaScript Daily.

Permalink programmingdevelopmenttoolsplugins

webdesignledger.com

21 Examples of Light Color Usage in Web Design | Inspiration

A gallery post of 21 websites that lean on light, pale palettes, written as a counterpart to the previous week's roundup of dark-colored designs. It argues only that color is a central design choice and that showing opposite approaches keeps designers inspired. There is no analysis, just a list of sites (La Piuma, Kipling, Stora Enso, Blind Barber, Salt Surf and others) drawn from CSS Design Awards, The Best Designs and Awwwards, so it's worth keeping as a visual reference for light-themed web design.

Permalink designcreativitycolor

caniuse.com

When can I use... Support tables for HTML5, CSS3, etc

This looks like the front page of Can I Use, the browser-compatibility lookup site, captured mid-load with only its navigation and promotional text. It covers the BrowserStack partnership for testing across 2,000+ real browsers and devices, tips on voting for or submitting missing features, importing your own Google Analytics usage data, and adjusting the 0.5% usage cutoff for older browser versions. It also shows a "Browser scores" section listing Chrome 153 at 443, Firefox 156 at 422, and Safari 27 at 417, but there is no article or argument beyond that, so it's worth keeping only as a pointer to the tool.

Permalink developmenttoolscss3