A List Apart

Menu

Topic: JavaScript

  • The Design of Code: Organizing JavaScript

    ·

    Well-designed code is much easier to maintain, optimize, and extend, making for more efficient developers. Three high-level, language-agnostic aspects of code design are key to achieving this nirvana: system architecture, maintainability, and reusability. All three may be attained via the module pattern, whose extensible structure lends itself to a solid system architecture and a maintainable codebase. Anthony Colangelo shows how to craft our code into well-organized components that can be reused in projects to come.

  • Even Better In-Browser Mockups with Node.js

    ·

    Designing in the browser has all sorts of benefits, like producing more accurate, comprehensive results and removing the extra step of converting from image file to markup and CSS. But even sites designed in a browser still require pasting in content, faking interactions with the server, and creating placeholder JavaScript that isn’t usable on the live site. Wouldn’t it be nice if we could go from just designing layouts and interactions to designing the whole client side of the application during the same process? We can, says Garann Means in the first of two articles explaining how Node.js can streamline your design process.

  • Node at Work: A Walkthrough

    ·

    In “Even Better In-Browser Mockups with Node.js,” Garann Means explained why Node.js makes designing applications easier and more efficient, and how to get started. Now it’s time to see your new design process in action. In this walkthrough, we’ll build a feature for a mock art store, complete with live demo and GitHub repository. Follow along at home (or in your cubicle) and you’ll have a mockup that mimics the interactions it will have with its production server precisely on the client—without the need for hard-coded data or temporary workarounds.

  • Hack Your Maps

    ·

    Web maps have come a long way. A ubiquitous and critical component of many apps, they’ve also become one of the mobile space’s most successful transplants. The core web map UI paradigm itself—a continuous, pannable, zoomable surface—has even spread beyond mapping to interfaces everywhere. Yet nearly five years since Paul Smith’s landmark article, “Take Control of Your Maps,” web maps are still a blind spot for most web designers. It’s time to integrate maps into our designs in powerful, creative, progressively enhanced new ways. Young Hahn starts us on the journey to map mastery.

  • Improving UX Through Front-End Performance

    ·

    Adding half a second to a search results page can decrease traffic and ad revenues by 20 percent, says a Google study. For every additional 100 milliseconds of load time, sales decrease by 1 percent, Amazon finds. Users expect pages to load in two seconds—and after three seconds, up to 40 percent will simply leave. The message is clear: we must make performance optimization a fundamental part of how we design, build, and test every site we create—for every device. Design for performance; measure the results.

  • Environmental Design with the Device API

    ·

    Real-world factors like low batteries and weak signal strength can turn even the most expertly crafted digital experience into a frustrating clustercuss. These factors are beyond your control, and, until recently, there was nothing you could do about them. Now there just may be. Tim Wright explains how to begin improving your users’ experiences under constantly shifting (and sometimes quite dreadful) conditions, via environmental design thinking and the Device API.

  • Application Cache is a Douchebag

    ·

    We’re better connected than we’ve ever been, but we’re not always connected. ApplicationCache lets users interact with their data even when they’re offline, but with great power come great gotchas. For instance, files always come from the ApplicationCache, even when the user is online. Oh, and in certain circumstances, a browser won’t know that that the online content has changed,  causing the user to keep getting old content. And, oh yes, depending on how you cache your resources, non-cached resources may not load even when the user is online. Lanyrd’s Jake Archibald illuminates the hazards of ApplicationCache and shares strategies, techniques, and code workarounds to maximize the pleasure and minimize the pain for user and developer alike. All this, plus a demo. Dig in.

  • 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.