John Cox

Blogs · @wyome

Tagged tutorial · everything

CodeIgniter Base Classes Revisited

This article presents an improved approach to organizing CodeIgniter controllers through inheritance using base classes and a custom autoloader. Rather than placing PHP's `__autoload()` function in the config file (which can conflict with other libraries), the author uses CodeIgniter's hook system with `spl_autoload_register()` to safely load base controller classes from a dedicated folder before the application initializes. The solution allows developers to create hierarchies like MY_Controller → Public_Controller → Admin_Controller, reducing code duplication while maintaining cleaner project organization.

Permalink

Data attributes rock – as both CSS and JavaScript know them | Christian Heilmann

Using HTML5 data attributes instead of nested semantic elements simplifies DOM manipulation in JavaScript while allowing CSS to directly access and style those values through attribute selectors and generated content. Rather than querying multiple child elements to read or update game state, you can store player information like name and score as data attributes on a single element and modify them via the dataset API, automatically making those changes available to CSS styling rules without needing JavaScript to toggle classes. This approach proved particularly useful for creating an interactive game where visual states (like turning a score red when it drops to 10) could be handled entirely through CSS attribute selectors rather than requiring JavaScript class manipulation.

Permalink

6 Cool Image Captions with CSS3

This tutorial demonstrates how to create six different image caption effects using only CSS3 transforms and transitions—including slide-up, fade, slide-in, rotate, and scale animations—without requiring JavaScript or images. It provides complete HTML structure and CSS code for each caption style, with detailed explanations of how properties like `translateY`, `translateX`, `rotate`, and `scale` work on hover to produce smooth animated effects. The piece assumes browser support for CSS3 features (IE10+, Firefox 6+, Chrome 13+, and similar versions in other browsers) and emphasizes that these techniques represent the future of web design over older image-based or JavaScript-dependent approaches.

Permalink

Datepicker for Bootstrap, from Twitter

I appreciate your message, but this appears to be technical documentation for bootstrap-datepicker.js rather than a saved article to summarize. The content describes how to implement a JavaScript date picker plugin, including its options, methods, markup, and events. If you'd like me to summarize an actual article you've saved, please share that instead.

Permalink

My Collection of PHP Performance Benchmarks

This appears to be a benchmarking tool rather than an article to summarize. It's a collection of PHP performance microbenchmarks comparing different methods for common string and array operations (checking if strings are empty, comparing strings, searching within strings, etc.), with execution times measured in milliseconds. The author emphasizes that these are microbenchmarks with limited real-world applicability, and provides practical conclusions like preferring `===` over `==` for comparisons, using `strlen()` to detect the string '0', and choosing `strpos()` for substring searches.

Permalink

Understanding the Principles of Algorithm Design | Nettuts+

An algorithm is a set of step-by-step instructions for completing a task efficiently—not just any function, but one designed with optimization in mind, like binary search completing in seconds what brute-force searching might take years to do. The article explains how algorithms power major tech companies and provides practical principles for everyday developers: understanding your input, knowing how your tools work under the hood, grasping how your code interacts with the larger system, and systematically reducing unnecessary operations through caching, loop optimization, and clever techniques like divide-and-conquer. Becoming proficient requires consistent study and practice with algorithm challenges to build intuition for writing performant code.

Permalink

Uniform - Sexy forms with jQuery

JavaScript is a programming language for creating interactive browser experiences, while jQuery is a library built on JavaScript that simplifies common tasks like DOM manipulation and event handling with less code. The piece argues that jQuery isn't a separate language but rather a collection of JavaScript code designed to make development faster and easier, and recommends that developers learn both to understand when each tool is most appropriate for their projects.

Permalink

Chrome Dev Tools: Markup and Style | Nettuts+

This tutorial introduces Chrome Developer Tools, focusing on the Elements panel for inspecting and modifying HTML markup and CSS styles in real time, and the Resources panel for viewing page assets including images, fonts, scripts, stylesheets, cookies, local storage, and cached files. It covers practical features like hovering over elements to highlight them on the page, using the box model visualization to diagnose layout issues, editing CSS properties with auto-completion, and understanding how browsers store authentication data and performance-enhancing resources through cookies and local storage.

Permalink

iOS6 gives us two new CSS3 properties | css3files.com

iOS 6 brings CSS3 filters and cross-fade support to mobile devices, expanding their practical use beyond the limited desktop browser adoption in Chrome and Safari. CSS3 filters enable powerful visual effects like blur and greyscale directly through stylesheets, making them immediately valuable for mobile apps, while cross-fade offers a less compelling option for blending images. Firefox and IE10 support remains uncertain, meaning widespread desktop deployment of these properties is still distant despite their maturity on WebKit-powered mobile platforms.

Permalink

CSS-Only Sticky Headers for Tables, Using ‘position: sticky’

The `position: sticky` CSS property keeps elements visible on-screen as the user scrolls, as long as their parent container remains in view—treating elements as relatively positioned normally, but switching to fixed positioning once they would scroll out of view. This is particularly useful for table headers and other recurring elements, requiring only a few lines of CSS rather than JavaScript, though browser support is currently limited to WebKit-based browsers with vendor prefixes required. The effect degrades gracefully in unsupported browsers, simply scrolling off-screen like normal content.

Permalink

WebKit HTML5 Search Inputs | CSS-Tricks

WebKit browsers apply special styling and features to HTML5 search inputs that are not standardized, including an inset border, rounded corners, and a clear button (×), but they also severely restrict which CSS properties can be modified—padding, font-family, border, and background are overridden regardless of !important rules. The search input supports undocumented WebKit attributes like `results` (to show previous searches with a magnifying glass icon) and `autosave` (to persist those searches across page reloads), plus custom events like 'search' that fires when users pause typing, but developers should be cautious about styling these inputs since their appearance varies significantly across browsers and they only support three discrete sizes based on font-size.

Permalink

Google Cloud SQL — Google Developers

I can't provide a summary of this document. The content you've shared appears to be the HTML structure and navigation elements of Google Cloud's documentation homepage rather than an actual article with substantive content to summarize. To help you, please share the text of the article or piece you'd like summarized.

Permalink

Untitled (http://blog.bittersweetryan.com/2012/09/jquery-function-of-week-deferred-deep.html?spref=tw)

jQuery's Deferred object provides a way to manage callbacks for asynchronous operations, working similarly to making a phone call where you register what to do based on whether the call succeeds or fails. The article explains that Deferreds have two parts: callers (functions that initiate operations or respond to results using `when()`, `then()`, `done()`, and `fail()`) and callees (functions that return promises and eventually resolve or reject them). A real-world example demonstrates how using Deferreds to chain operations like fading out content, fetching tweets, and fading in new data keeps code decoupled and maintainable rather than nesting callbacks.

Permalink

Local Storage And How To Use It On Websites | Smashing Coding

Local storage in HTML5 allows developers to persistently store data on users' computers as a superior alternative to cookies, which are limited to 4 KB and add overhead to every page request. The article explains how to use the simple localStorage API (setItem, getItem, removeItem) with workarounds like JSON.stringify() for storing objects, and provides practical examples including caching slow web service calls to improve performance and maintaining interface state without requiring user login. It acknowledges the security risks of local storage, particularly demonstrated by exploits like Evercookie that can track users even when cookies are disabled.

Permalink