John Cox

Blogs · @wyome · Now · Shelf

Tagged tutorial · everything

Interesting

Impressive Webs

The CSS white-space Property Explained | Impressive Webs

The CSS white-space property controls how browsers handle multiple spaces and line breaks within an element, offering cleaner alternatives to HTML methods like the `<pre>` tag or `&nbsp;`. The property has five values—normal (default), nowrap (prevents line breaks), pre (preserves all spacing like `<pre>` tags), pre-line (honors explicit line breaks only), and pre-wrap (preserves spacing while allowing natural wrapping)—with nowrap being the most practical for keeping inline content like links together without splitting across lines. A common misconception is that white-space applies to block-level elements or floated boxes themselves; it only affects inline content within the targeted element.

Permalink designdevelopmenttutorialcss3

www.artzstudio.com

mathiasbynens.be

Bulletproof HTML5 <details> fallback using jQuery · Mathias Bynens

The HTML5 `<details>` and `<summary>` elements create collapsible disclosure widgets that hide content by default, but browser support was incomplete at the time of writing. The author provides a robust feature detection method to identify native support and explains how to implement a cross-browser polyfill using CSS and jQuery that adds click and keyboard accessibility while gracefully degrading in older browsers and when JavaScript is disabled.

Permalink accessibilitydevelopmenttutorialjquery

www.justbenicestudio.com

Web Symbols typeface

The piece offers practical advice on choosing a domain name by recommending against deciding in isolation; instead, it suggests either testing multiple domains through market research if budget allows, or seeking feedback from colleagues and potential customers. The article emphasizes that rebranding is costly, making the initial selection process worth getting right the first time.

Permalink designtutorialfont

net.tutsplus.com

.htaccess Files for the Rest of Us | Nettuts+

.htaccess files are plain text configuration files used to customize Apache web server behavior at the directory level, and this guide covers their practical applications including URL rewriting and redirects for SEO purposes, custom error pages, password protection, IP blocking, browser rendering control, caching optimization, and content compression. The article explains that .htaccess files are read on every server request so changes take immediate effect without server restart, making them useful when direct access to the main configuration file isn't available, though they do incur a minor performance cost. Each use case is illustrated with code examples showing how to implement common tasks like converting query strings into friendly URLs, serving custom 404 pages, and setting far-future expiration headers to improve site load times.

Permalink developmentseotutorialhtaccess

wojodesign.com

snook.ca

Handling CSS Transitions with prepareTransition - Snook.ca

The author presents a jQuery plugin called prepareTransition that solves the problem of transitioning elements that need to use display:none or visibility:hidden—properties that aren't animatable in CSS. The plugin applies a temporary is-transitioning class with display:block !important to keep the element visible during the opacity fade, then removes the class via the transitionEnd event, allowing display:none to take effect after the animation completes. This approach maintains backward compatibility with browsers that don't support CSS transitions while enabling smooth animations in those that do.

Permalink animationtutorialjquerycss3

Perfection Kills

Perfection kills » Profiling CSS for fun and profit. Optimization notes.

This article documents CSS performance profiling experiments on a feature-rich single-page application, identifying which styles and selectors most impact rendering speed. The author discovers that border-radius, transforms, and universal selectors like "button > *" are surprisingly expensive; unused CSS rules account for 200-300ms of wasted selector matching; and removing IE-targeted selectors from the main stylesheet yields significant gains. The piece includes specific measurements (e.g., adding decorative styles increased repaint time 30x on 400 buttons) and provides practical techniques like using browser profilers and parsing timeline data to identify optimization opportunities.

Permalink performancetutorialcss3

ricostacruz.com

Backbone patterns

This guide documents best practices for building Backbone.js applications, covering patterns for models, views, and general architecture alongside conventions for naming, namespacing, and module organization. It identifies common anti-patterns to avoid, such as overusing document.ready and placing event handlers outside of views, while recommending approaches like using JST templates, sub-views, and mixins for cleaner code structure.

Permalink developmenttutorialpatterns

www.awcore.com

25 "Time-saving" Generators for Designers - HTML

This is a curated list of 25 web-based design generator tools covering loading icons, color schemes, backgrounds, buttons, CSS effects, and other UI elements. Each tool is presented with a brief description of its primary function, ranging from practical utilities like favicon and CSS button generators to creative applications like avatar customization and text-based image creation. The collection is designed to help web designers and developers quickly prototype visual elements without needing advanced software like Photoshop.

Permalink designtoolstutorialgenerator

snipplr.com

Stack Overflow

Web Geekly

lea.verou.me

CSS3 Patterns Gallery

I cannot summarize this document as requested. The text provided appears to be a webpage about CSS gradient patterns—specifically the interface and guidelines for a pattern gallery—rather than a saved article with a substantive argument or report. It contains only technical specifications, browser compatibility notes, and submission criteria, with no central thesis or informational content to summarize.

Permalink designtoolstutorialcss3

blogs.msdn.com

How to Create an Awesome Scrolling Navigation using jQuery - thebeebs - Site Home - MSDN Blogs

This tutorial explains how to recreate Flipboard's distinctive parallax scrolling navigation effect, where the logo and background elements move at different speeds than the main content to create depth and visual interest. The implementation uses jQuery to dynamically size content items to fill the browser window, position them horizontally off-screen, and animate them into view while separately animating the logo and background triangle at different rates to produce the parallax effect. The guide walks through each JavaScript function needed to handle responsive resizing, content scrolling via navigation links, and boundary checking to prevent scrolling past the available items.

Permalink designtutorialjqueryscroll