A List Apart

Menu

Topic: JavaScript

  • Building Twitter Bootstrap

    ·

    Bootstrap is an open-source front-end toolkit created to help designers and developers quickly and efficiently build great stuff online. Its goal is to provide a refined, well-documented, and extensive library of flexible design components created with HTML, CSS, and JavaScript for others to build and innovate on. Today, it has grown to include dozens of components and has become the most popular project on GitHub, with more than 13,000 watchers and 2,000 forks. Mark Otto, the co-creator of Bootstrap, sheds light on how and why Bootstrap was made, the processes used to create it, and how it has grown as a design system.

  • Getting Started with Sass

    ·

    CSS' simplicity has always been one of its most welcome features. But as our sites and apps get bigger and become more complex, and target a wider range of devices and screen sizes, this simplicity, so welcome as we first started to move away from font tags and table-based layouts, has become a liability. Fortunately, a few years ago developers Hampton Catlin and Nathan Weizenbaum created a new style sheet syntax with features to help make our increasingly complex CSS easier to write and manage, and then used a preprocessor to translate the new smart syntax into the old, dumb CSS that browsers understand. Learn how Sass ("syntactically awesome style sheets") can help simplify the creation, updating, and maintenance of powerful sites and apps.

  • Expanding Text Areas Made Elegant

    ·

    An expanding text area is a multi-line text input field that expands in height to fit its contents. Commonly found in both desktop and mobile applications, such as the SMS composition field on the iPhone, it’s a good choice when you don’t know how much text the user will write and you want to keep the layout compact; as such, it’s especially useful on interfaces targeted at smartphones. Yet despite the ubiquity of this control, there’s no way to create it using only HTML and CSS, and most JavaScript solutions have suffered from guesswork, inaccuracy, or a lack of elegance "¦ until now.

  • A Primer on A/B Testing

    ·

    Data is an invaluable tool for web designers who are making decisions about the user experience. A/B tests, or split tests, are one of the easiest ways to measure the effect of different design, content, or functionality, helping you create high-performing user experience elements that you can implement across your site. But it’s important to make sure you reach statistically significant results and avoid red herrings. Lara Swanson shows us how to do that.

  • Modern Debugging Tips and Tricks

    ·

    Making sure that your site works as expected in different browsers and devices can challenge even the most savvy web worker. Join Tiffany B. Brown as she explains error thowing and handling, code injection, and mobile debugging using JavaScript.

  • Now You See Me

    ·

    Showing and hiding content using JavaScript-based page manipulations for tabbed interfaces, collapsible elements, and accordion widgets is a common development pattern. Learn how your choice of hiding mechanism can influence content accessibility in assistive technologies like screen readers in an excerpt from Adaptive Web Design.

  • Web Cryptography: Salted Hash and Other Tasty Dishes

    ·

    One of the most powerful security tools available to web developers is cryptography, essentially a process by which meaningful information is turned into random noise, unreadable except where specifically intended. A web developer working on an underpowered netbook in his basement now has access to cryptosystems that major governments could only have dreamed of a few decades ago. And ignorance of cryptography is not bliss. You may think your web app’s profile is too low to worry about hackers, but attacks are frequently automated, not targeted, and a compromise of the weakest system can often give access to better-protected systems when people re-use passwords across multiple sites. Learn the three broad categories of cryptosystems that commonly relate to web applications and begin strategizing how to make your site secure.

  • Rapid Prototyping with Sinatra

    ·

    If you’re a web designer or developer, you're well acquainted with prototyping. From raw wireframing to creating interfaces in Photoshop, designers map out how sites will work before they create them. Over the past few years, the protoyping process has changed significantly. With browser makers generally agreeing on web standards and the rise of tools such as Firebug and WebKit’s web inspector, we can sometimes skip Photoshop and go straight to the browser. Plus, JavaScript frameworks like jQuery let us play with browser events with only a few lines of code. But what if we need to do even more? As websites increasingly become web apps, we now need to prototype backend functionality, too. Learn how Sinatra, a so-called “micro” web framework, helps you create real (albeit simple) web apps extremely fast, letting you prototype flows and behavior you may want to integrate into a final product.

  • Forward Thinking Form Validation

    ·

    When users complete a form to buy your product or sign up for your service, you want to reduce mistakes and guide them to success. Now, with HTML5 form input types and attributes, you can set validation constraints to check user input. With CSS3’s new UI pseudo-classes, you can style validation states to make form completion quick and effortless.

  • Apps vs. the Web

    ·

    There's an app for that, and you're the folks who are creating it. But should you design a web-based application, or an iPhone app? Each approach has pluses and minuses—not to mention legions of religiously rabid supporters. Apple promotes both approaches (they even gave the web a year-long head start before beginning to sell apps in the store), and the iPhone's Safari browser supports HTML5 and CSS3 and brags a fast JavaScript engine. Yet many companies and individuals with deep web expertise choose to create iPhone apps instead of web apps that can do the same thing. Explore both approaches and learn just about everything you'll need to know if you choose to create an iPhone app, from the lingo, to the development process, to the tricks that can smooth the path of doing business with Apple.

  • SVG with a little help from Raphaël

    ·

    Want to make fancy, interactive, scalable vector graphics (SVGs) that look beautiful at any resolution and degrade with grace? Brian Suda urges you to consider Raphaël for your SVG heavy lifting.

  • JavaScript Minification Part II

    ·

    Variable naming can be a source of coding angst for humans trying to understand code. Once you're sure that a human doesn't need to interpret your JavaScript code, variables simply become generic placeholders for values. Nicholas C. Zakas shows us how to further minify JavaScript by replacing local variable names with the YUI Compressor.

  • Taking Advantage of HTML5 and CSS3 with Modernizr

    ·

    Years ago, CSS browser support was patchy and buggy, and only daring web designers used CSS for layouts. Today, CSS layouts are commonplace and every browser supports them. But the same can't be said for CSS3 and HTML5. That's where Faruk Ateş’s Modernizr comes in. This open-source JavaScript library makes it easy to support different levels of experiences, based on the capabilities of each visitor’s browser. Learn how to take advantage of everything in HTML5 and CSS3 that is implemented in some browsers, without sacrificing control over the user experience in other browsers.

  • Stop Forking with CSS3

    ·

    You may remember when JavaScript was a dark art. It earned that reputation because, in order to do anything with even the teensiest bit of cross-browser consistency, you had to fork your code for various versions of Netscape and IE. Today, thanks to web standards advocacy and diligent JavaScript library authors, our code is relatively fork-free. Alas, in our rush to use some of the features available in CSS3, we've fallen off the wagon. Enter Aaron Gustafson’s eCSStender, a JavaScript library that lets you use CSS3 properties and selectors while keeping your code fork- and hack-free.

  • Better JavaScript Minification

    ·

    Like CSS, JavaScript works best and hardest when stored in an external file that can be downloaded and cached separately from our site's individual HTML pages. To increase performance, we limit the number of external requests and make our JavaScript as small as possible. JavaScript minification schemes began with JSMin in 2004 and progressed to the YUI Compressor in 2007. Now the inventor of Extreme JavaScript Compression with YUI Compressor reveals coding patterns that interfere with compression, and techniques to modify or avoid these coding patterns so as to improve the YUI Compressor's performance. Think small and live large.

  • Accent Folding for Auto-Complete

    ·

    Another generation of technology has passed and Unicode support is almost everywhere. The next step is to write software that is not just "internationalized" but truly multilingual. In this article we will skip through a bit of history and theory, then illustrate a neat hack called accent-folding. Accent-folding has its limitations but it can help make some important yet overlooked user interactions work better.

  • The Problem with Passwords

    ·

    Abandoning password masking as Jakob Nielsen suggests could present serious problems, including undermining a user’s trust by failing to meet a basic expectation. But with design patterns gleaned from offline applications, plus a dash of JavaScript, we can provide feedback and reduce password errors without compromising the basic user experience or losing our visitors’ trust.

  • Discovering Magic

    ·

    Wouldn’t it be a little magical if, when you signed up for a new site, it said something like, “We notice you have a profile photo on Flickr and Twitter, would you like to use one of those or upload a new one?” Glenn Jones created a JavaScript library called Ident Engine that can help you do just that.

  • Inline Validation in Web Forms

    ·

    Web forms don’t have to be irritating, and your inline validation choices don't have to be based on wild guesses. In his examination of inline form validation options, Luke Wroblewski offers that rarest of beasts: actual data about which things make people smile and which make them want to stab your website with a fork.

  • JavaScript MVC

    ·

    As JavaScript takes center stage in our web applications, we need to produce ever more modular code. MVC (Model-View-Controller) may hold the key. MVC is a design pattern that breaks an application into three parts: the data (Model), the presentation of that data to the user (View), and the actions taken on any user interaction (Controller). Discover how MVC can make the JavaScript that powers your web applications more reusable and easier to maintain.