John Cox

Blogs · @wyome · Now · Shelf

Tagged tutorial · everything

Interesting

9 Command Line Tricks for Mac OS X You Should Know

This article offers practical command-line tricks for Mac users of varying skill levels, covering utilities like `caffeinate` to prevent sleep, `pkgutil` to extract package contents without installing, and `purge` to free up memory. It also explains how to launch multiple app instances, update OS X from the terminal, search your download history through Quarantine Services, hide files from Finder, and create password-protected zip files, along with the handy tip that dragging files into Terminal automatically inserts their full paths.

Permalink

It’s time to start using JavaScript strict mode | NCZOnline

Strict mode is an opt-in JavaScript feature that makes the language safer by throwing errors instead of silently failing when problematic code patterns occur. Key improvements include preventing accidental global variables, eliminating the `with` statement, preventing `this` coercion to the global object, disallowing duplicate function parameters or object properties, confining `eval()` scope, and throwing errors when attempting to modify immutable properties. To use it safely, apply the `"use strict"` pragma inside individual functions or IIFEs rather than globally, since global strict mode can affect concatenated scripts unexpectedly.

Permalink

Git: Twelve Curated Tips And Workflows From The Trenches - be present now

This collection of practical Git workflows addresses repetitive problems developers face, from display issues like line wrapping in diffs to complex operations like cherry-picking between repositories and rewriting commit history. The twelve tips range from simple configuration tweaks (wrapping long lines, setting proxies) to advanced techniques (selectively stashing files, modifying specific commits via interactive rebase, and promoting a branch to master while preserving merge history). The post emphasizes that many of these solutions come from repeated lookups and eventual alias creation, making it a curated distillation of real-world Git usage patterns.

Permalink

HTML5 Datalist

The HTML5 DATALIST element provides native browser autocomplete functionality by pairing a list of OPTION values with an INPUT field via a list attribute, eliminating the need for JavaScript-based autocomplete widgets that had dominated the previous decade. While the DATALIST approach is basic—offering no styling options for suggestions and no support for dynamic data from service endpoints—it represents a useful step forward in moving common web functionality from script libraries into standardized HTML.

Permalink

14 Handy jQuery Code Snippets for Developers - Treehouse Blog

This article provides 14 practical jQuery code snippets covering common frontend tasks like hover effects, preventing default link behavior, animating elements, toggling visibility, handling form data with Ajax, manipulating CSS classes and attributes, and traversing the DOM. The snippets are presented as blank templates that developers can customize for their own projects, ranging from beginner-friendly functions like scrolling to top to more advanced techniques like loading external content and keystroke event handling.

Permalink

CSS Grid Layout

CSS Grid Layout is a proposed W3C specification that provides a two-dimensional layout system for web applications, allowing developers to divide space into rows and columns and position elements by referencing grid lines or named areas. Unlike tables or floats, Grid has no inherent content structure, enabling responsive designs that adapt to different screen sizes through media queries without altering the semantic HTML. The specification details comprehensive sizing algorithms, automatic item placement, and alignment properties to support everything from basic application layouts to complex overlapping components like custom controls.

Permalink

5 More HTML5 APIs You Didn’t Know Existed

This article showcases five lesser-known HTML5 APIs with practical code examples: the Fullscreen API for launching fullscreen mode on any element, the Page Visibility API for detecting when users switch browser tabs to optimize resource usage, the getUserMedia API for accessing device cameras and microphones, the Battery API for mobile devices to monitor charging status and power levels, and link prefetching to preload resources for faster page transitions. The author emphasizes that familiarity with these APIs will become increasingly important as they become standard practice in web development over the coming years.

Permalink

Numeral.js

Numeral.js is a JavaScript library for formatting and manipulating numbers in various ways—as currency, percentages, bytes, or with custom delimiters and abbreviations. It allows you to create numeral objects from numbers or strings, format them according to preset or custom patterns, and perform basic mathematical operations like add, subtract, and difference. The library supports multiple locales and custom format definitions, making it useful for displaying numbers appropriately across different regions and use cases.

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