A directory of Ruby gemfiles used in your favorite Ruby and Rails projects!
Neat little open source project shared by John Nunemaker who linked to his Flipper Cloud gemfile.
A directory of Ruby gemfiles used in your favorite Ruby and Rails projects!
Neat little open source project shared by John Nunemaker who linked to his Flipper Cloud gemfile.
This helpful little single-serving Web-based thing eases a bit of the pain when you need to format a date or time.
A historical record of foundational web development blog posts.
This is my go-to tutorial for stringing together GitHub Actions and Google Cloud Platform.
A useful collection of Ruby style guides beginning with the officially unofficial RuboCop-driven community guides.
JavaScript modules (also known as ES modules or ECMAScript modules) were created to help make JavaScript code more organized and maintainable.
Understanding how ES modules work will help you become a better JavaScript developer. In this article, we’ll cover:
- What is a module?
- What are ES modules? Why do we use them?
- How to use ES modules
- Other module systems used in JavaScript
Madison Kanna’s excellent introduction to standardized JavaScript module syntax. Of particular note, the syntax for importing from a file that includes both a default and additional named exports:
import add, { multiply, subtract } from './math.js';
If your website must run third-party JavaScript, this is a novel means of relegating those scripts to a Web Workers-managed sandbox.
See also, part 2: How Partytown’s Sync Communication Works
Shawn Wang lays it out. Presented here alphabetized:
html {
font-size: 1.25em;
line-height: 1.75;
margin: auto;
max-width: 70ch;
padding: 3em 1em;
}
A collection of JavaScript methods, helper functions, plugins, boilerplates, polyfills, and learning resources.
I discovered this well-designed, well-organized resource while making my way through Scott Jehl’s Lightning-Fast Web Performance course.
This decision tree describes how to use the
alt
attribute of the<img>
element in various situations. For some types of images, there are alternative approaches, such as using CSS background images for decorative images or web fonts instead of images of text.
Jared shared a link to this very useful resource on Twitter.
The easiest way to configure a performant, secure, and stable NGINX server.
An excellent tool that smooths over some of the rough edges of hand-rolling an nginx server configuration.
Create useful .gitignore files for your project.
I’ve typically used the github/gitignore repository for pulling together .gitignore
files, but this resource looks like a handy layer on top of GitHub’s project.
A modern CSS showcase styled by community contributions.
Stephanie Eckles’ modern spin on the classic CSS Zen Garden. A single HTML page styled in dozens of unique and interesting ways!
The A11Y style guide comes with pre-populated accessible components that include helpful links to related tools, articles, and WCAG guidelines to make your site more inclusive. These components also serve as a guide for both HTML markup and SCSS/CSS code, to inform designers, front-end and back-end developers at every stage of the website’s creation.
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.
A useful, regularly updated post here from Vladimir Dementyev on configuring Docker for use with Ruby on Rails development. Also worth checking out the author’s RailsConf 2019 slides and the associated GitHub repository.
An elegant—though technically complex—solution by Søren Birkemeyer that adds a timeline of changes to the bottom of blog posts.
Submit a URL to generate a node map of all of the requests on the page. Rapidly identify what third-parties are on your site, where your transmitted bytes are coming from and how slow your domains are!
I can’t believe I haven’t saved this useful website before, but it made its way back into my timeline via Jeffrey’s notes from An Event Apart Chicago. Learn more about Request Map Generator by reading Simon Hearne’s introductory blog post.
“When can I start using CSS grid layout?” “Too bad that it’ll take some more years before we can use grid in production.” “Do I need Modernizr in order to make websites with CSS grid layout?” “If I wanted to use grid today, I’d have to build two to three versions of my website.” The CSS grid layout module is one of the most exciting developments since responsive design. We should try to get the best out of it as soon as possible, if it makes sense for us and our projects.
This 2017 article from Manuel Matuzović goes deep on how to creatively use CSS Grid Layout in a progressively-enhanced manner. Naturally, the baseline techniques we use will change over time, but Manuel’s demo illustrates how you might think about design and layout as experience layers.
The latest in Chris Ashton’s series of “I Used the Web for a Day…” articles is a doozy of a read chock-full of facts, figures, tips, and tricks.
The cost (in dollars) of mobile and broadband data plans globally varies wildly and Chris’ post goes deep on how the cost (in page weight and in dollars) of our work building for the Web impacts users around the world. Chris concludes:
We don’t have the power to change the global cost of data inequality. But we do have the power to lessen its impact, improving the experience for everyone in the process.
Jotting down some very specific technical notes to Future Me.
Chaos Engineering is the discipline of experimenting on a system in order to build confidence in the system’s capability to withstand turbulent conditions in production.
Chaos Engineering was developed by the team at Netflix and is most notably implemented in their Chaos Monkey performance testing tool.
Making the internal external.
This falls under the “at first it seems immoral to do this, but the more I do it, the more I feel this is how the world should be” category.
This is heinous.
Today, we’re launching U.S. Web Design System 2.0 (USWDS 2.0), a new foundation for the future of our design system. This new version was designed to make it easier for any project to integrate USWDS and use it to support your mission and the needs of your audience.
USWDS is a library of code, tools, and guidance to help government teams design and build fast, accessible, mobile-friendly government websites backed by user research and modern best practices. USWDS 2.0 is an important update to the design system — it introduces a powerful toolkit of new features to help make creating useful, consistent digital services faster, simpler, and more fun.
Two years in the making, version 2.0 of the U.S. Web Design System is now live. This is a tremendous update and will be a boon to anyone building digital services for the American people. Congratulations to Dan, Maya, and the rest of the Technology Transformation Services team!
One year after the first initial support for PWAs on iOS, Apple released iOS 12.2 for iPhone and iPads with what it seems to be the biggest step forward in the last year, addressing the two most annoying problems we’ve been dealing with PWAs: reload effect and OAuth logins.
Maximiliano Firtman details at great length the updates to Safari available in iOS 12.2. The good, the bad, and the ugly. It’s all covered in this post.
The Australian Government Design System provides a framework and a set of tools to help designers and developers build government products and services more easily.
Australia’s Digital Transformation Agency has made available their design system. Source code is available on GitHub.
Basecamp’s Michael Berger details how they recently improved the accessibility of their product’s Jump Menu. This is a stellar example of how Web-based tools can be visually attractive, useful, and accessible.
We’re not a bootcamp, we’re a finishing school.
Back in October, the thoughtbot team announced they were making their online learning platform Upcase available to all for free.
This looks like a fantastic resource and now it’s available to everyone!
That should be corrected if anyone invents a time machine.
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:
As part of our refined approach to building frontend features on GitHub.com, we focused on getting away with regular HTML foundation as much as we could, and only adding JavaScript behaviors as progressive enhancement. As a result, even those web forms and other UI elements that were enhanced using JS would usually also work with JavaScript disabled in the browser. In some cases, we were able to delete certain legacy behaviors altogether instead of having to rewrite them in vanilla JS.
Stick around through the end of the article for more on how the team is using Custom Elements to enhance the user interface.
Collecting a few of Jen Simmons’ tweets:
Learned on today’s CSSWG call—I had a fundamentally out-of-date mental model of how the display property structures its values.
It’s not
display: <value>;
. It’sdisplay: <outer-value> <inner-value>;
.drafts.csswg.org/css-display/#outer-role
This realization won’t change what I write in my code, but it does change how I think about what I’m writing.
display: grid; = display: block grid; display: flex; = display: block flex;
Also:
display: inline grid;
You can write
display: inline-grid;
, but that’s actually out of date. It makes more sense to writedisplay: inline grid;
The U.S. Web Design System (USWDS) is a library of design and code guidelines to help agencies create trustworthy, accessible, and consistent digital services. The Design System is being used on over one hundred government sites, with an audience of 120 million users. In this 12th post in our series, we sat down with Jason Garber, front-end web developer at the U.S. Digital Service (USDS)‘s Defense Digital Service, to talk about his work creating a Ruby gem for the new Move.mil that integrates the Design System into a Ruby on Rails application.
I was recently interviewed by the team behind the U.S. Web Design System about the uswds-rails Ruby gem I put together. Yay, open source!
A curated collection of useful CSS snippets you can understand in 30 seconds or less.
Una casually dropped this little CSS tip on Twitter:
.full-width {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
jQuery makes writing browser JavaScript so accessible, it’s easy to skip over some of JavaScript’s core concepts. Fizzy School covers these concepts so novice developers can fill in the missing areas in learning JavaScript and jQuery.
This is a great resource from long-time DC-area Web developer David DeSandro. If you’re just dipping your toes in the JavaScript/jQuery worlds or if you’re looking for a refresher, click on through!
A list of everything that could go in the
<head>
of your document.
This is a pretty comprehensive resource of all the stuff that you might put in the <head>
of your HTML pages.
This online book by Google developer Addy Osmani looks to be an excellent resource for Web developers. Topics include JPG compression, SVG optimization, and WebP details among many others.
If you’re an on-the-go reader, the project’s README includes instructions for creating a PDF version of the book.
There’s quite a bit that an engineer can learn by participating in design-related activities.
Most developers think of
<script type="module">
as way to load ES modules (and of course this is true), but<script type="module">
also has a more immediate and practical use-case—loading regular JavaScript files with ES2015+ features and knowing the browser can handle it!To put that another way, every browser that supports
<script type="module">
also supports most of the ES2015+ features you know and love.
This very helpful article outlines how you can take advantage of modern JavaScript features while still serving usable code to older browsers.
“Something’s a little bit off here.” That’s what I predict your first thought to be upon seeing my cubicle for the first time. There’s no screen or mouse in sight. Instead there’s a guy hammering away on a keyboard, staring at seemingly nothing.
It’s only me, and my colleagues can assure you that I’m mostly harmless. I’m a software developer working at Vincit offices in Tampere. I’m also blind. In this blog post I’m going to shed some light on the way I work.
Tuukka Ojala shares his experience and the tools he uses to develop software.
This document provides readers with an understanding of how to use WAI-ARIA 1.1 [WAI-ARIA] to create accessible rich internet applications. It describes considerations that might not be evident to most authors from the WAI-ARIA specification alone and recommends approaches to make widgets, navigation, and behaviors accessible using WAI-ARIA roles, states, and properties. This document is directed primarily to Web application developers, but the guidance is also useful for user agent and assistive technology developers.
In a lengthy response to a hyperbolic, ill-informed opinion piece, Aaron Gustafson describes progressive enhancement:
It’s a philosophy that recognizes the nature of the Web as a medium and asks us to think about how to build products that are robust and capable of reaching as many potential customers as possible. It isn’t concerned with any particular technology, it simply asks that we look at each tool we use with a critical eye and consider both its benefits and drawbacks. And it’s certainly not anti-JavaScript.
I spent a good deal of time in 2015 writing and speaking on the benefits of this approach to designing and building for the Web:
The observant reader would note that Aaron and I address the same tenuous arguments made—coincidentally—by the same people.
As it happens, you can greatly improve your site's accessibility with some relatively minor design and code changes!
Jeremy, on how he thinks about building progressive web apps:
In my opinion, the term “progressive web app” can be read in order of priority:
- Progressive—build in a layered way so that anyone can access your content, regardless of what device or browser they’re using, rewarding the more capable browsers with more features.
- Web—you’re building for the web. Don’t lose sight of that. URLs matter. Accessibility matters. Performance matters.
- App—sure, borrow what works from native apps if it makes sense for your situation.
He also links to Jason Grigsby’s Designing Responsive Progressive Web Apps which is another great read.
Making work accessible creates a better experience across the board. Use this checklist to help build accessibility into your process no matter your role or stage in a project.
The team at Vox open-sourced their accessibility guidelines. Check the announcement blog post for more details on their process.
This book will assist frontend developers in building accessible e-commerce websites and components.
A tremendous living resource documenting eBay’s approach to building accessibly for the Web.
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.
This site aims to provide simplest possible examples of HTML, CSS and JavaScript.
Does what it says on the tin.
Google’s Paul Lewis answers the same questions that Matt Gaunt received (and that I previously linked to). Paul’s focus on the user and their experience of our work resonates strongly with me and is something I harp on quite frequently.
I think performance, accessibility, and security share some traits: they can’t be retro-fitted to a project, they’re often thankless tasks, and they’re only notable by their absence. They’re all, however, the bedrock of a good user experience, onto which you can layer high quality designs and interactions.
Paul also cites one of my favorite documents, the W3C’s HTML Design Principles:
In case of conflict, consider users over authors over implementors over specifiers over theoretical purity.
Truth.
Google Chrome Developer Advocate Matt Gaunt publicly answers some Web performance-related questions he received. Many of the questions have to do with frameworks, a topic of great interest to me.
A slow website, no matter how it’s built, means someone didn’t notice, didn’t care or couldn’t fix the problem. That doesn’t mean the framework or tools used to build it is the problem, it could be the way those tools have been used.
It could also be that the chosen tool isn’t the best solution to the problem at hand.
Nate Berkopec’s article is chock full of useful information, but I was particularly taken by his framing of a developer’s job (emphasis his):
As developers, our job isn’t to tell the designers “Hey, you’re dumb for including over 500KB of WebFonts in your design!”. That’s not their job. As performance-minded web developers, our job is to deliver the designer’s vision in the most performant way possible.
Equally interesting, but more technically-focused, is the rundown of how Google Fonts takes advantage of the unicode-range
property to deliver smaller fonts.
The unicode-range property describes what characters the font supports. […] By telling the browser what characters the font supports, the browser can look at the page, note what characters the page uses, and then only download the fonts it needs to display the characters actually on the page.
Brilliant. I switched to serving fonts from Google and trimmed 45–70 kilobytes from my homepage. Your mileage may vary, but… not bad.
How to configure a Rails project with LiveReload and speed up your front-end workflow.
It’s been a hot minute since I’ve used LiveReload, but Matt Brictson’s tutorial is thorough and well-linked.
Slides from Tammy Everts’ 2013 presentation on the neurological effects of poor performance on our websites’ visitors reveal some startling facts. Right out of the gates, Tammy cites a 2010 EEG study of users navigating a site on a connection throttled from 5MB to 2MB. The study found that participants had to concentrate up to 50% harder and reported a negative brand association afterward.
A cool new front-end performance analysis tool from Gaël Métais that offers code improvements.
This is done by loading the webpage via PhantomJS and collecting various metrics and statistics with the help of Phantomas. These metrics are categorized and transformed into scores. It also gives in-depth details so developpers can correct the detected issues.
Yellow Lab Tools dovetails nicely with more popular performance tools like WebPageTest.
Some practical ARIA examples to enhance your application accessibility (by @heydonworks).
I used Heydon’s progressive collapsibles example as a basis for my own aria-collapsible.
This document is a practical guide for developers on how to add accessibility information to HTML elements using the Accessible Rich Internet Applications specification [WAI-ARIA-1.1], which defines a way to make Web content and Web applications more accessible to people with disabilities. This document demonstrates how to use WAI-ARIA in [HTML51], which especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies.
An invaluable resource compiled by The Paciello Group with example audio files from the JAWS screen reader.
Browserhacks is an extensive list of browser specific CSS and JavaScript hacks from all over the interwebs.
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.
A community-driven effort to make web accessibility easier.
This is a great resource, chock full of helpful links to tutorials and examples. Be sure to check out the patterns page.
Jon Daniel on software maintenance:
I’ve realized that successful applications in an “Enterprise” environment spend far more time in maintenance mode then they do being actively developed. Consumers of your application don’t care that you used some cutting edge framework or state-of-the-art architectural patterns. They just care that it works and continues to work well.
Jon goes deep on operational concerns and posits:
Software is not done until it is decommissioned.
I couldn’t agree more.
GitHub added the ability for project maintainers to add issue and pull request templates to projects.
To add an Issue template to a repository create a file called ISSUE_TEMPLATE in the root directory. A file extension is optional, but Markdown files (.md) are supported. Markdown support makes it easy to add things like headings, links, @-mentions, and task lists to your templates.
Thinking this will prove quite useful on some of my projects.
About a month ago, I quietly launched a new version of this site. It’s been in the works for quite some time.
Using the
Transfer-Encoding: chunked
header, the server will send chunks of the rendered page back to the browser so in the case of Rails, it starts with the layout and sends out the<head>
part including assets like js and css.
Chunked transfer encoding is a great way to improve page performance for the parts of your application that require time-consuming database queries. The Rails-level changes are straightforward, but unfortunately not all Ruby web servers support the feature (looking at you, Puma).
If you build websites for a living or work with people who do, stop what you’re doing and get yourself (or your team) a copy of this book.
Taking a look at a few possible updates to the BBC News team’s classic JavaScript feature detection.
Demonstrating a useful technique for providing fallback content to browsers lacking support for inline SVGs.
How to get clean URLs with nginx and Jekyll.
Take some of the pain out of managing SVG icon sprites with this little Ruby gem.
It may not be in your title, but it’s definitely part of your job.
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.
GitHub's not just for developers. Here are some ideas for getting the entire team involved.
The third, and hopefully final, post in a series about developing websites using progressive enhancement.
Furthering the conversation after receiving some critical feedback on my previous post.
In this post, I show how you can use EditorConfig to declare your project's coding styles and why that's useful on team projects.
I uncovered a curious little bug while using Rails Assets with a Bower package that had a dot in the package name. Here's how I solved it.
It may have taken five months, but I finally published the code behind webmention.sixtwothree.org.
Just over a year ago, I wrote a small JS library for mapping functions to URLs. It's based on Backbone's Router.
Rails Assets is the frictionless proxy between Bundler and Bower. It automatically converts the packaged components into gems that are easily droppable into your asset pipeline and stay up to date.
As of today, I've removed Google Analytics from this site. Here's why.
Every post on this site is now also represented in JSON format.
My first Craft plugin sends webmentions to supported websites.
Or, more specifically, web pages are cake. Here's why.
Wherein I learn about Firefox OS and App manifests.
In this post, I'll outline the approach I used to create a practical and manageable set of device assets for World Wildlife Fund's recently-launched Find Your Inner Animal quiz.
craft-master is a set of tools written in Ruby using Rake tasks for common Craft-related installation tasks.
In this post, I'll cover how I combined browser-sync with a couple of my favorite tools (Compass, Jekyll, and Foreman) to build out a static site and make browser and device testing easier.
Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.
The business, psychology and technology of high-performance web apps.
This past weekend at SassConf, the authors of Sass announced the first version 3.3 release candidate of the popular CSS extension language. There are a ton of new features in 3.3 that I'm excited to try out, but I want to share a personal favorite with you.
HTML_CodeSniffer is a client-side script that checks HTML source code and detects violations of a defined coding standard.
Do today’s web applications really need that much JavaScript?
Did you know that one of the most powerful tools for fluid and responsive layout has been a native feature for every browser since HTML 4?
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).
Hawaii.gov leverages text, SQL, JSON, RSS and ATOM data sources for content and Git for version control. Markdown, a markup language, and Liquid Templates combine the dynamic and static data sources.
Space-saving drop-down menu with subtle effects
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.
HTML_CodeSniffer is a client-side script that checks HTML source code and detects violations of a defined coding standard. HTML_CodeSniffer is written entirely in JavaScript, does not require any server-side processing and can be extended by developers to enforce custom coding standards by creating your own “sniffs”.
Middleman is a static site generator using all the shortcuts and tools in modern web development.
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.
dc.js is a javascript charting library with native crossfilter support and allowing highly efficient exploration on large multi-dimensional dataset (inspired by crossfilter’s demo).
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).
In August 2009, coding superhero _why the lucky stiff deleted all his repos, took down his domains and completely removed his online presence. Nobody outside of _why’s personal circle knows why, but we’re glad for the wonderful code he shared.
Responsive grids for Compass.
Flexible Media in Responsive Web Design with Dave Rupert!
The blog post is the first in a series of posts that attempts to outline what a modern web development toolchain looks like and how to use the best-of-breed tools for efficient, effective development. Part two will outline how to use to set up your Terminal, zsh, and vim.
Making media display consistently on your site can be a problem, especially with multiple content authors. Opera’s Chris Mills shows you how object-fit and object-position can solve it
Ziptastic is a simple API that allows people to ask which Country,State and City are associated with a Zip Code.
One of the most frequent questions I get asked about the mobile web is “Where do I go to learn about all this stuff?” So here’s an extensive list of helpful tools and resources that can help you create great mobile web experiences.
JavaScript Garden is a growing collection of documentation about the most quirky parts of the JavaScript programming language. It gives advice to avoid common mistakes and subtle bugs, as well as performance issues and bad practices, that non-expert JavaScript programmers may encounter on their endeavours into the depths of the language.
The current HTML spec does not allow for multiple image URLs based on screen size, nessesitating the use of complex Javascript hacks to supply smaller images to mobile devices.
A lightweight javascript date library for parsing, manipulating, and formatting dates.
parallel-flickr is a tool for backing up your Flickr photos and generating a database backed website that honours the viewing permissions you’ve chosen on Flickr.
A jQuery plugin for responsive images. Intended to be a proof of concept.
Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers.
Dive Into HTML5 seeks to elaborate on a hand-picked Selection of features from the HTML5 specification and other fine Standards.
Datejs is an open-source JavaScript Date Library.
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.
I'm in the middle of working out a new feature for a project that requires JavaScript to append some markup, stylesheets, and scripts to a page. A piece of JavaScript required styles be applied to certain elements before it should execute.
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've been working on a lot of non-Rails projects lately. At some point during the buildout process, I start spending a fair amount of time uploading my changes to one of our testing servers. I needed a better system. So I wrote one.
“Touch icons” are the favicons of mobile devices and tablets. Adding them to your web page is easy.
audio.js is a drop-in javascript library that allows HTML5’s <audio>
tag to be used anywhere.
CSSDOC is a convention to comment Cascading Style Sheets (CSS) to help individuals and teams to improve writing/coding/styling/managing CSS files. It is an adoption of the well known JavaDoc / DocBlock based way of commenting source-code.
selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest.
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.
Another collection of templates for HTML, CSS, and JavaScript.
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.
Sprockets is a Ruby library that preprocesses and concatenates JavaScript source files. It takes any number of source files and preprocesses them line-by-line in order to build a single concatenation. Specially formatted lines act as directives to the Sprockets preprocessor, telling it to require the contents of another file or library first or to provide a set of asset files (such as images or stylesheets) to the document root. Sprockets attempts to fulfill required dependencies by searching a set of directories called the load path.
This archived reference documents version 3.0 (the release version) of the Maps Javascript API.
Smush.it uses optimization techniques specific to image format to remove unnecessary bytes from image files
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.
These guides are designed to make you immediately productive with Rails, and to help you understand how all of the pieces fit together.
This is the Git reference site. This is meant to be a quick reference for learning and remembering the most important and commonly used Git commands.
In Javascript it often makes sense to attach a stylesheet rather than style a bunch of individual attributes. Appending a stylesheet to the DOM has a number of advantages.
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 document provides reference information for the YouTube JavaScript player API.
The title says it all, really.
CSS 3 introduces a brand new box model in addition of the traditional box model from CSS 1 and 2. The flexible box model determines the way boxes are distributed inside other boxes and the way they share the available space.
A web grid system designed by Joseph Silvashy and New Gold Leaf that allows designers to use the screen real estate on large monitors and retain great design on smaller ones. The Fluid Grid System combines the principals of the typographic grid and a baseline grid into one resolution-independent framework.
This document contains normative guidelines for web applications built by the Interface Development practice of Isobar North America (previously Molecular). It is to be readily available to anyone who wishes to check the iterative progress of our best practices.
:-moz-any() selector grouping allows for providing alternatives between combinators, rather than having to repeat the entire selector for once piece that’s different.
The new Graph API attempts to drastically simplify the way developers read and write data to Facebook. It presents a simple, consistent view of the Facebook social graph, uniformly representing objects in the graph (e.g., people, photos, events, and fan pages) and the connections between them (e.g., friend relationships, shared content, and photo tags).
The Open Graph protocol enables you to integrate your web pages into the social graph. It is currently designed for web pages representing profiles of real-world things — things like movies, sports teams, celebrities, and restaurants.
Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.
For the most part, Mobile Safari on the iPad is the same as that on the iPhone. One difference that I’ve found is that Webkit on the iPad honors CSS media query declarations based on orientation.
Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility.
Jammit is an industrial strength asset packaging library for Rails, providing both the CSS and JavaScript concatenation and compression that you’d expect, as well as YUI Compressor and Closure Compiler compatibility, ahead-of-time gzipping, built-in JavaScript template support, and optional Data-URI / MHTML image embedding.
Browserscope is a community-driven project for profiling web browsers. The goals are to foster innovation by tracking browser functionality and to be a resource for web developers.
Pagetest allows you to provide the URL of a webpage to be tested. The test will be conducted from the location specified and you will be provided a waterfall of your page load performance as well as a comparison against an optimization checklist.
In this second article we’re going to focus on using those CSS techniques (and a little JavaScript) to create some practical elements and layouts.
People are often afraid to use PNG because they think that: a/ it doesn’t work in all browsers, or b/ filesizes are bigger than GIF. While these have some grain of truth to them, they are mostly misconceptions.
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.
Here’s everything you need to know to create a rich, interactive experience around your music and movies. All right in iTunes.
How do you answer the Internet Explorer 6 question?
As more and more sites evolve into “Web 2.0″ apps, the amount of JavaScript increases. This is a performance concern because scripts have a negative impact on page performance.
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!
The Closure tools help developers to build rich web applications with JavaScript that is both powerful and efficient.
Underscore is a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects. It’s the tie to go along with jQuery’s tux.
Dive Into HTML5 seeks to elaborate on a hand-picked Selection of features from the HTML5 specification and other fine Standards.
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.
Along with an army of JavaScript APIs, HTML 5 comes with a Drag and Drop (DnD) API that brings native DnD support to the browser making it much easier to code up.
SlickMap CSS is a simple stylesheet for displaying finished sitemaps directly from HTML unordered list navigation.
In this article, we’ll look at the advantages of CSS3 and some examples of how Web designers are already using it. By the end, we’ll know a bit of what to expect from CSS3 and how we can use its new features in our projects.
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.
Yahoo! Placemaker is a freely available geoparsing Web service. It helps developers make their applications location-aware by identifying places in unstructured and atomic content – feeds, web pages, news, status updates – and returning geographic metadata for geographic indexing and markup.
In this post I’m going to show you how I created the little Flickr stream you can see running down the right hand edge of this site.
Yesterday we released a new people selector widget (which we’ve been calling Bo Selecta internally). This widget downloads a list of all of your contacts, in JavaScript, in under 200ms (this is true even for members with 10,000+ contacts). In order to get this level of performance, we had to completely rethink how we send data from the server to the client.
Carpe diem on any duplicate content worries: we now support a format that allows you to publicly specify your preferred version of a URL.
A jQuery plugin with native animations, auto list navigation, and default application styles for Mobile WebKit browsers like iPhone, G1, and Pre.
Sick of getting no credit for the cool sites you make? whobuilt.it lets you claim the sites you build!
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).
Sprockets is a Ruby library that preprocesses and concatenates JavaScript source files. It takes any number of source files and preprocesses them line-by-line in order to build a single concatenation.
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.
The HTML5 specification has added quite a few interesting and useful tags for structuring your markup. For a majority of everyday uses, these tags will replace many of our typical div entries from our code. So let’s dig in.
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.
In this article I will propose a new method for organizing CSS that better maps to how popular web application frameworks are built; and I’ll also provide some helpful code to make this easy to accomplish. The examples I use are based on Ruby on R… More
IE7 is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.
The New York Times has a series of APIs. Who knew?
CSS Browser Hacks For Firefox, Opera, Safari & Internet Explorer - From NealGrosskopf.com
A demonstration of Superfish – a jQuery plugin that creates Suckerfish-style dropdown menus with added features.
Unit PNG Fix, from Unit Interactive’s Labs, is a comprehensive, yet light-weight png fix built in javascript. It’s free to download and use as you like!
VPC Hard Disk Image for testing websites on IE on Windows XP SP2.
The world’s largest social music platform. Show off your taste, see what your friends are listening to, hear new music, get personal radio, recommendations, and downloads, all for free.
The AJAX Libraries API is a content distribution network and loading architecture for the most popular open source JavaScript libraries.
Many people ask me how I choose to address an situation where all content in a web should be available without JavaScript, but certain parts hidden if JavaScript is enabled.
Should your company offer an API for outside developers to build on? Should you engage in one of the fast growing developer platforms or with another company’s API? …
Use of the Account Location Plugin.
The world of standards-based web design and development has been undergoing something of a shake-up these past few days.
Let’s take a look at 53 CSS-based techniques you should always have ready to hand if you develop web-sites.
Shaun’s slides from recent presentations as well as a load of helpful links he used to put them together.
Derek Featherstone’s @media2005 presentation.