I discovered this well-designed, well-organized resource while making my way through Scott Jehl’s Lightning-Fast Web Performance course.
I discovered this well-designed, well-organized resource while making my way through Scott Jehl’s Lightning-Fast Web Performance course.
Frend components are modest and dependency-free. They are built with web standards as a priority and aim to avoid assumptions about tooling or environment. Care has been taken to make sure each component is compliant, keyboard navigable and properly interpreted by assistive technologies.
The BBC Global Experience Language (GEL) Technical Guides are a series of framework-agnostic, code-centric recommendations and examples for building GEL design patterns in websites. They illustrate how to create websites that comply with all BBC guidelines and industry best practice, giving special emphasis to accessibility.
This technical companion to the BBC’s Global Experience Language serves as a reference for developers implementing GEL’s user experience recommendations.
The GitHub Engineering team recently completed a gradual transition away from jQuery and wrote in-depth about the experience. There’s a lot of good detail in the post, but I’m particularly fond of this bit:
Stick around through the end of the article for more on how the team is using Custom Elements to enhance the user interface.
Most developers think of
<script type="module">as way to load ES modules (and of course this is true), but
To put that another way, every browser that supports
<script type="module">also supports most of the ES2015+ features you know and love.
Libraries extend the functionality of the Google Maps APIs by adding new features, implementing common design patterns, or making some tasks a little easier.
I’m spending a fair amount of time with Google Maps this week and this collection of libraries from Google is proving useful.
Does what it says on the tin.
An exciting accessibility change is coming to Chrome 50. Google calls it “focus starting point” and it’s a small—but incredibly helpful—change to how their Web browser manages focused elements and tab order.
If something has focus, it’s also the focus navigation start point, just like before. Also, just like before, if nothing else has set the focus navigation start point, then it will be the current
documentor, if available and supported, the currently active
dialog. If we navigate to a page fragment like in the example above, that will now set the focus start point. Also, if we click any element on the page, regardless of whether it is focusable, that will now set the focus navigation start point. Finally, if the element which was the focus start point is removed from the DOM, its parent becomes the focus start point. No more focus whack-a-mole!
As the article explains, prior to this change, focus management can be difficult when tabbing around and moving within a document (or into and out of modal dialog boxes). Take heed of the note in the article’s caveats section:
Sequential focus navigation starting point is currently only supported in Chrome 50, Firefox, and Opera. Until it is supported in all browsers you’ll still need to add
tabindex="-1"(and remove the focus outline) to your named anchor targets.
Bookmarklets are not dead. They may, however, be pining for the fjords.
Like Jeremy, I have a simple bookmarklet for saving links to my own site. My bookmarklet opens a new window/tab, passing via URL parameters the URL and title of the current window/tab to a page on my site. If I’ve highlighted some text in the page, the bookmarklet will grab that and insert it into the body field on my link form, prepended with a
> (the Markdown syntax for a
Not-so-humorously, that last piece doesn’t work on overly-clever sites like Medium that monkey about with browser-native user interface. Neutral face emoji.
I tend not to rely on browser-specific hacks these days, but this is a useful resource should you be in the market for such things.
Turns out I got a couple things less-than-correct in my last post on npm and Bower. This post is a more accurate process for updating packages for each registry.
In this post, I'll run through the process by which you can publish code to the npm and Bower repositories.
Just over a year ago, I wrote a small JS library for mapping functions to URLs. It's based on Backbone's Router.
Transition effects for off-canvas views.
Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.
Jump-starting jQuery plugins development
Some inspiration for different modal window appearances.
Magnific Popup is a free responsive jQuery lightbox plugin that is focused on performance and providing best experience for user with any device (Zepto.js compatible).
Responsive navigation plugin without library dependencies and with fast touch screen support.
Fresco is a beautiful responsive lightbox. It can be used to create stunning overlays that work great at any screen size, in all browsers on every device.
Aware.js is a simple jQuery plugin that allows a site to customize and personalize the display of content based on a reader’s behavior without requiring login, authentication, or any server-side processing.
A D3-based library for building custom charts and graphs.
jPanelMenu is a jQuery plugin that creates a paneled-style menu (like the type seen in the mobile versions of Facebook and Google, as well as in many native iPhone applications).
Create word-processed text on the web using a reliable, fast and unbelievably beautiful editor.
The Open Web has never had as many capabilities as it has today. We’re seeing an explosion in new or updated specifications, and prototype and stable implementations to go with them. This blog post will look back as the platform we have had available (Called Open Web 0 here) and then looks forward at what we are beginning to get now and into the short and medium term future (which I’ve labelled Open Web 1).
I am a MIT licensed collection of extremely useful DOM helpers and special events for jQuery 1.7 and later. I’m not a UI project like jQuery UI or jQuery Tools. Instead, I’m all about providing low-level utilities for things that jQuery doesn’t support. If Underscore is jQuery’s functional-programming tie, I am jQuery’s bald-spot covering toupee.
Super-smooth CSS3 transformations and transitions for jQuery.
Using CSS 3d to make every website into 3d (kind of).
Swipe is a lightweight mobile slider with 1:1 touch movement, resistant bounds, scroll prevention, and completely library agnostic.
A jQuery plugin for responsive images. Intended to be a proof of concept.
An awesome, fully responsive jQuery slider plugin.
Comprehensive, yet simple, stealthy and fast. Datejs has passed all trials and is ready to strike. Datejs doesn’t just parse strings, it slices them cleanly in two.
These documentation topics concern the jQuery Templates plugin (jquery-tmpl), which can be downloaded from: http://github.com/jquery/jquery-tmpl.
In his Responsible & Responsive presentation at Breaking Development in Nashville TN, Scott Jehl provided a lot of detailed information about what it takes to deploy a responsive Web design at scale by walking through what he learned on the Boston Globe redesign project.
Automatically adapts your existing HTML images for mobile devices. No mark-up changes needed. Just drop it in and forget about it.
jQuery.fracs determines the fraction of an HTML element that is currently in the viewport, as well as the fraction it takes of the complete viewport and the fraction of the area that might possibly be visible. It also provides the coordinates of the visible rectangle in document, element and viewport space.
HTML5 video was meant to be this easy. html5media enables
<audio> tags in all major browsers.
You should take time to design your URL structure. If there’s one thing I hope you remember after reading this article it’s to take time to design your URL structure. Don’t leave it up to your framework. Don’t leave it up to chance. Think about it and craft an experience.
I wrote the BetterGrow jQuery plugin and open-sourced it under both GPL and MIT License so that I, and everyone else, could benefit from a textarea that didn’t just grow, but grew better when it had BetterGrow.
<audio> tag to be used anywhere.
So here we’re collecting all the shims, fallbacks, and polyfills in order to implant html5 functionality in browsers that don’t natively support them.
The general idea is that: we, as developers, should be able to develop with the HTML5 apis, and scripts can create the methods and objects that should exist. Developing in this future-proof way means as users upgrade, your code doesn’t have to change but users will move to the better, native experience cleanly.
$.getImageData allows anyone to get an image from another domain and have pixel level access to it using the getImageData() method. It works by sending a request with the URL of the image to google’s servers via the Google App Engine1. The server then converts the image into base64 encoded data URL and sends the image back as a JSON object. This means that the image can be locally included on the website and therefore it can be edited by the canvas tag.
This isn’t jQuery specific (despite the author’s use of the library) and is pretty good advice.
In this post, I’m going show you specific instances where postponing startup code until the document’s ready event slows perceived page load time, could leave your UI needlessly unresponsive, and even causes initialization code to run slower than necessary.
A unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.
Boilerplate might be the wrong word for this, but it’s incredibly thorough and is great as a reference.
Juicer is a new command line tool that helps by resolving dependencies, merging and minifying files. It can even check your syntax, add cache busters to and cycle asset hosts on URLs in CSS files and more.
gMap is a lightweight jQuery plugin that helps you embed Google Maps into your website. With only 2 KB in size it is very flexible and highly customizable.
PIE makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features.
I present to you a short jQuery plugin that utilizes the placeholder attribute and enables it (in a manner of speaking) in non-supporting user agents.
This is a jQuery Plugin that extends the core to allow easy element rotating. Plugin fully supports current version of Firefox, Safari, and Internet Explorer.
The title says it all, really.
One of the most exciting new features of HTML5 is the inclusion of the
<video> element, which allows developers to include video directly in their pages without the need for any plugin-based solution. This article gives you an introduction to
It’s great that HTML5 allows us to embed video into web pages that can then be displayed directly by browsers, without having to rely on third-party plugins. The elephant in the corner regarding all video — whether it be HTML5 or proprietary — is accessibility. What are conscientious developers to do to provide textual alternatives for those who can’t access the contents of the video?
This jQuery plugin enables very basic bookmarkable #hash history via a cross-browser HTML5 window.onhashchange event.
IE-CSS3 is a script to provide Internet Explorer support for several of the popular new styles available in the upcoming CSS3 standard.
Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility.
Analytics offers an event tracking feature. It can be used to track downloads, outbound links, mailto links, AJAX events—any click event. But the event tracking function still has to be implemented for each event you want to track. Here’s some jQuery that handles the implementation for you.
Checks the current selection against an expression and returns true, if at least one element of the selection fits the given expression.
Mozilla 1.3 introduces an implementation of Microsoft® Internet Explorer’s designMode feature. The rich-text editing support in Mozilla 1.3 supports the designMode feature which turns HTML documents into rich-text editors. Starting in Firefox 3, Mozilla also supports Internet Explorer’s contentEditable attribute which allows any element to become editable or non-editable (the latter for when preventing change to fixed elements in an editable environment).
Masonry is a layout plugin for jQuery. Think of it as the flip side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically then horizontally according to a grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.
jQuery doTimeout takes the work out of delayed code execution, including interval and timeout management, polling loops and debouncing. In addition, it’s fully jQuery chainable!
Jeremy Keith draws inspiration from Super Mario Bros. when adding visual feedback to Huffduffer’s add/remove device on profiles.
There are many ways to make websites run faster. In this section, you can discover performance best practices that real web professionals employ in their everyday work. These practices have improved the user experience for millions of users and we hope they are useful for other web developers.
Jetpack is a newly formed initiative and experiment in using open Web technologies to enhance the browser, with the goal of allowing anyone who can build a Web site to participate in making the Web a better place to work, communicate and play.
jQuery pageSlide was inspired by the UI work of Aza Raskin. In his recent posts regarding concepts for Firefox Mobile and a mouse-based Ubiquity, Aza introduced the idea of sliding (or “throwing”) content aside to reveal a secondary content pane.
While the standard jQuery Content Filters allow you to do some basic comparisons, they are not powerful enough in more advanced scenarios.
A jQuery plugin with native animations, auto list navigation, and default application styles for Mobile WebKit browsers like iPhone, G1, and Pre.
jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation).
Cufón aims to become a worthy alternative to sIFR.
Since HTML5 is getting more attention by way of marking up our new pages, and the only way to get IE to acknowledge the new elements, such as
<article>, is to use the HTML5 shiv.
Say goodbye to boring ‘Read More…’ links by turning your entire content block into a clickable target using this simple jQuery plugin.
Recently, I’ve begun an expedition with jQuery. My first major experiment has been in improving the commenting system on this blog. Sparked by an email discussion with Tomas Carrillo I’ve implemented a handful of small interactions which make it m… More
Live Query utilizes the power of jQuery selectors by binding events or firing callbacks for matched elements auto-magically, even after the page has been loaded and the DOM updated.
I’d call myself an “intermediate” jQuery user and I thought some others out there could benefit from all the little tips, tricks and techniques I’ve learned over the past year. The article also ended up being a lot longer than I thought it was going to be so I’ll start with a table of contents so you can skip to the bits you’re interested in.
FancyForm is a powerful checkbox replacement script used to provide the ultimate flexibility in changing the appearance and function of HTML form elements.
Many of us have been using a good deal of jQuery plugins lately. Below I have provided a list of the 50 favorite plugins many developers use. Some of these you may have already seen, others might be new to you. This is just the first series , the second version will be coming soon, stay tuned and Enjoy!
I just added a feature I'm rather fond of.
A good overview of 37signal’s Yellow Fade Technique.