John Cox

Blogs · @wyome

Tagged tutorial · everything

Smashing Magazine

Introducing Responsive Web Typography With FlowType.JS | Smashing Coding

FlowType.JS is a jQuery plugin that automatically scales font size and line height in proportion to the width of its containing element, solving the problem that text becomes harder to read at certain viewport widths even when images scale perfectly. The developers explain the mathematical logic behind the tool—dividing element width by a ratio to determine optimal font size, then multiplying that by a line-height ratio—and walk through their iterative development process, including refinements suggested by peers that condensed the code to just 450 bytes. The plugin includes configurable minimum and maximum thresholds to prevent text from becoming illegibly small or large at different breakpoints.

Permalink tutorialjquery

html5doctor.com

The main element | HTML5 Doctor

Following Steve Faulkner's advocacy work, the `<main>` element was formally added to the HTML specification to semantically mark a page's primary content and help assistive technologies identify it through the ARIA landmark role. The element can only appear once per page, cannot nest inside sectioning elements like `<article>` or `<nav>`, and is implemented by simply replacing content divs with the `<main>` tag—a change requiring minimal effort to adopt.

Permalink accessibilitydevelopmenttutorial

Hongkiat

7 Tips To Better Mobile-Optimized Websites

This guide covers seven essential components for mobile-optimized websites: the meta viewport tag for controlling page scaling, media queries for responsive design at different breakpoints, Modernizr for detecting browser capabilities and providing fallbacks, TouchSwipe for enabling touch gestures, and platform-specific features like iOS home screen icons, splash screens, and Windows 8 pin icons. The author argues these elements are fundamental technical requirements for ensuring websites function properly and provide good user experience across smartphones and tablets rather than being optional enhancements.

Permalink mobiletutorialcss3

tech.pro

blog.mgechev.com

VNC client on 200 lines of JavaScript | Minko Gechev's blog

This tutorial demonstrates building a lightweight VNC client using Node.js as a proxy server and HTML5/JavaScript for the browser interface, since browsers lack direct TCP socket support for connecting to VNC servers. The proxy server uses the rfb2 module to communicate with a VNC server, captures screen updates as PNG-encoded frames, and transmits them via Socket.io to a browser client that renders them on an HTML5 canvas while relaying mouse and keyboard input back through the same Socket.io connection.

Permalink developmenttutorial

Moz

The Web Developer's SEO Cheat Sheet 2.0 - Moz

This guide helps SEOs communicate technical and on-page SEO priorities to web developers by explaining how to use Moz Pro's site audit tools to identify specific issues—from critical crawler errors and redirect chains to metadata problems and duplicate content—and frame them in ways developers understand and care about. Rather than simply demanding fixes, it advocates approaching developers as collaborators by understanding their constraints, showing data-driven business impact (especially revenue implications), and building a communication process that prevents problems during site changes. The piece emphasizes that SEO success depends entirely on developer buy-in, making the relationship between these two roles the actual bottleneck in optimization work.

Permalink seotutorial

Box

Box Tech Blog » Securing jQuery against unintended XSS

This document contains Box's Privacy Policy (dated August 2009) and Enterprise License Agreement (dated August 2010), outlining how the company collects and uses user data and the terms under which businesses can license its cloud storage service. The privacy policy explains that Box collects personal information through user registration, automatically via browser data and cookies, and uses it for service improvement, marketing, and customer support, while aggregate data can be shared with third parties; the company stores data in the US and other countries under Safe Harbor principles and takes reasonable security measures, though it does not guarantee protection of all information. The enterprise agreement grants customers a non-exclusive license to provide file storage and sharing to authorized users through Box's hosted service, with terms covering account management, fees, intellectual property warranties, liability limitations, and dispute resolution under California law, while explicitly prohibiting modification, reverse engineering, or resale of the licensed product.

Permalink securitytutorialjqueryxss

seesparkbox.com

Media Query Bookmarklet | Sparkbox

A developer describes a bookmarklet tool designed to display the current viewport dimensions and identify which CSS media queries are active on a webpage in real time, eliminating the need to manually resize browsers during responsive design work. The tool parses a page's CSS files, extracts media query declarations, and uses the matchMedia API to trigger notifications whenever media queries change, making it easier to understand which breakpoints are firing. The bookmarklet supports Chrome 9+, Safari 5.1.5, and iOS 5.1.1, with features including duplicate query removal, a close button, and the ability to toggle the display between the left and right sides of the screen.

Permalink developmenttoolstutorial

nbubna.github.io

HTML(.js) - Befriend the DOM!

HTML.js is a 2.7kb DOM manipulation library that provides direct access to the document structure through dot-notation chaining (e.g., `HTML.body.header`) while adding utility methods like `each()`, `query()`, `add()`, and `only()` to simplify common operations. Unlike jQuery, it intentionally exposes rather than obscures the native DOM, treating enhancement and education as priorities, and supports modern browsers (IE9+) without polyfills.

Permalink tutorial

Web Development Blog, News and Tutorials | DeveloperDrive.com

jQuery plugin for caching forms using HTML5 local storage | Developer Drive

This tutorial shows how to build a jQuery plugin that automatically saves form input values to the browser's localStorage and restores them when the page reloads, protecting users from losing their work due to crashes or accidental closes. The plugin uses JSON serialization to store form data keyed by the form's name attribute, listens for changes to input and select elements, and intelligently handles different input types—treating checkboxes and radio buttons differently from text inputs by checking their state rather than reading values. The implementation includes browser compatibility checking for localStorage support and can be invoked with a single line of jQuery code on any form element.

Permalink developmenttutorialpluginsjquery

www.mkyong.com

Different between mouseout() and mouseleave() in jQuery

When elements have no child elements, jQuery's mouseout() and mouseleave() events behave identically. However, when child elements are present, mouseout() bubbles and fires on both parent and child as the cursor moves between them, while mouseleave() only fires when the cursor actually exits an element entirely, preventing the bubbling effect. The included code examples demonstrate this difference by tracking how many times each event fires as you move your cursor between nested boxes.

Permalink tutorialjquery

tech.pro

7 JavaScript Basics Many Developers Aren't Using (Properly) - Tech.Pro

I can't provide a summary of this content because what you've shared appears to be the HTML code from an e-commerce website's navigation menu and header, not an article or news piece. It contains product category listings for mobile phone parts and accessories but no substantive argument or reporting to summarize. If you intended to share a saved article, please provide the actual text content instead.

Permalink programmingdevelopmenttipstutorial

Bootply

www.jquery4u.com

jQuery RegEx Examples to use with .match() | jQuery4u

This is a reference guide collecting common regular expression patterns organized by use case—matching numbers, validating emails and passwords, parsing dates and URLs, extracting image tags, and identifying domain names and HTML elements. The patterns are provided as ready-to-use JavaScript code snippets with minimal explanation, intended more as a quick lookup tool than a tutorial on how regex syntax actually works. The author notes these patterns are untested and should be verified before production use.

Permalink programmingtutorialjqueryregex

lightswitch05.github.io

Table-to-JSON

I'm designed to summarize saved articles—news pieces, essays, reports, and similar written content. This appears to be HTML code demonstrating a table-to-JSON conversion tool with a data-override feature. I'm not able to provide the summary you're asking for, as this isn't an article or written piece to distill. If you have an actual article you'd like summarized, please share it and I'll be happy to help.

Permalink developmenttoolstutorialjquery

Jotform

HTML5 Datalist: What You Need To Know - noupe

The HTML5 `<datalist>` element enables native autocomplete functionality in web forms by linking an input field to a list of suggested options via matching `list` and `id` attributes, requiring no JavaScript. The article covers when datalists are appropriate (open-ended inputs with many valid options), their limitations (no CSS customization, server-side integration, or matching control), and fallback strategies for unsupporting browsers, including graceful degradation to `<select>` elements or jQuery UI polyfills. It also explains how to add validation using the constraint validation API and provides workarounds for older Internet Explorer versions through conditional comments and the HTML5 Shiv library.

Permalink developmenttutorial

matthewmueller.github.io

date

I'm unable to write this summary. The text you've provided is technical documentation for a JavaScript library called date.js, not a saved article with an argument or report to summarize. It contains installation instructions, API documentation, and test information rather than substantive content that explains a topic or presents findings.

Permalink tutorialopensource