Responsive Images: How they Almost Worked and What We Need. It’s our job, as designers and developers, to pick apart even the seemingly most simple tasks to find ways to improve them. When Ethan Marcotte coined “responsive web design,” he said that a responsive website is made up of three things: a flexible grid, flexible images and media, and media queries. In doing so, he opened up a world of new and exciting things to obsess over. I chose flexible images. Issue № 343 Unfortunately, we can’t test bandwidth in any reliable way—not yet, at least. Testing would likely mean introducing a significant download to measure against, which is a lot like setting something on fire to see exactly how flammable it is. While we were working on the new Boston Globe website, we devised a technique to mitigate the size of requests for users that may have limited bandwidth.
How responsive images worked#section1 Scott Jehl brilliantly masterminded Filament Group’s “responsive images” technique. We started with, perhaps unsurprisingly, an image tag: So, now what? A plugin for sharing buttons. Cuepoint.js. A plugin for HTML5 video cuepoints and subtitles. How Often Do You Try New Things? Web design in complicated and requires a lot of time and knowledge — and patience. It's no longer just embedded text background images and slices; it's interactivity and dynamic content, it's HTML5 and mobile development, it's JSON objects and Local Storage.
No, I’m not talking about trying base jumping, I’m talking about how often you try new things in web design. Recently, Louis Lazaris of Impressive Webs wrote an article titled “Skills for Front-End Developers” where he compiled a long list of “things” that a front-end developer (or web designer in my eyes) should know. There were forty-three items on this list, ranging from jQuery to the Canvas API. Web design in complicated and requires a lot of time and knowledge — and patience. But beyond the many technologies to know and love, web design is also moving target. I’ve compiled a little list of my own, a list of ways you can begin to try new things — not really a list of things to try, but a list of resources and ways to try them.
FEDe - A Search engine for Front-End (HTML,CSS,Javascript & jQuery) Web developers.
Validate.js. Lightweight JavaScript form validation library inspired by CodeIgniter. No dependencies, just over 2kb gzipped, and customizable! Validate.js (development - 16kb) validate.min.js (minified - 2.1kb) Example All of the fields were successfully validated! Features Validate form fields from over a dozen rules No dependencies Customizable messages Supply your own validation callbacks for custom rules Chainable customization methods for ease of declaration Conditionally validate certain form fields Works in all major browsers (even IE6!)
Modeled off the CodeIgniter form validation API Installation and Usage Include the JavaScript file in your source Create the validation object with your desired rules. FormValidator new FormValidator(formName, fields, callback) The FormValidator object is attached to the window upon loading validate.js. The formName passed in to validate must be the exact value of the name attribute of the form name (required) - The name attribute of the element. Custom Validation Rules. Top 10 “Must Follow” JavaScript Best Practices | Web development blog, news and reviews - Developer Drive. JavaScript went on to become cult right after its launch due to its extensive list of features. It also gave programmers the chance to give their webpages a more eye-popping look and website visitors were happier than ever.
Despite the large number of developers that sing the praises of JavaScript, there are those Internet users who see its dark side. Webpages using multiple JavaScript codes are slow to load and overuse of JavaScript contributes to making webpages look cluttered and ugly. In no time the smart use of JavaScript became a hot topic amongst programmers. Without further ado, let us dive into our list of JavaScript best practices that will save you from this unwanted criticism. Keep it short, stupid! You have read this a zillion times already. Use comments and white spaces while in development mode to keep your code readable.Remove white spaces and comments before publishing your scripts in live environment. Think before you touch object prototypes Debug JavaScript Code Avoid Eval. KeyboardJS Demo. Press some keys... A JavaScript library for binding keyboard combos without the pain of key codes and key combo conflicts.
It can be used as both a standalone library or an AMD module (see RequireJS for details). KeyboardJS can support any locale, however out of the box it just comes with the US locale (for now). Adding a new locale is easy. If you create a new locale please consider sending me a pull request or submit it to the issue tracker so I can add it to the library. KeyboardJS.on Usage KeyboardJS.on(keyCombo, onDownCallback, onUpCallback); Binds any key or key combo.
Both the onUpCallback and the onUpCallback are passed three arguments. Returned clear() - Removes the key or key combo binding. on() - Allows you to bind to the keyup and keydown event of the given combo. KeyboardJS.activeKeys KeyboardJS.activeKeys(); Returns an array of active keys by name. Returns an array of key names that are currently being pressed. KeyboardJS.clear KeyboardJS.clear(keyCombo); KeyboardJS.clear.key keyCombo. Moment.js - A lightweight javascript date library. How To Change A Page’s Background As The User Scrolls | Web development blog, news and reviews - Developer Drive. jQuery is great for adding enhancing effects that would otherwise be impossible with just HTML and CSS. In this tutorial we’re going to use jQuery and two plugins to gradually change a website’s background as the user scrolls the page. We’ll be using the Color Animation and Waypoints plugins.
The Color Animation plugin adds animations to the color properties of elements. jQuery already includes an animate function, this plugin simply extends it. The Waypoints plugin allows us to execute a function when a user scrolls past a certain element. I’m sure it’s obvious how these two plugins will help us achieve our goal. First things first, let’s set up our project folder. We can grab the newest version of jQuery here and put it in the js folder. We’ll use script.js to add the Color Animation and Waypoints plugins.
The Markup The HTML markup in this tutorial is going to be very simple. Start by adding this code to index.html: Inside the div with the class container add the following code: <! Leaflet - a modern, lightweight JavaScript library for interactive maps by CloudMade.