A List Apart

Menu

Topic: JavaScript

The behavioral layer. Progressive enhancement: creating sites that work on any browser or device, with or without JavaScript. Accessible scripting. Write less, do more with jQuery. Application Cache. Twitter Bootstrap. Adaptive design. Tabbed interfaces, collapsible elements, and accordion widgets. Modern debugging tips and tricks. A/B testing. Rapid prototyping with Sinatra. Popups and lightboxes and carousels, oh, my!

  • Prototypal Object-Oriented Programming using JavaScript

    ·

    Disguised as a mild-mannered scripting language, JavaScript is more dynamic than you might think. Mehdi Maujood has seen beyond the class-based masquerade and found that JavaScript can be used more effectively once you understand its true nature as a prototype-based object-oriented programming language.

  • Interaction Is an Enhancement

    ·

    The web has an endless supply of single-point-of-failure horror stories, where sites serve up blank and blocked pages to dumbstruck users. But the fault is not with JavaScript and other technologies—it’s with how we use them, banking on them alone instead of diversifying how we deliver our experiences. In this excerpt from Chapter 5 of Adaptive Web Design, Second Edition, Aaron Gustafson explains why understanding and working within limitations is the key to building resilient websites.

  • The Nearly-Headless CMS

    ·

    Decoupling your CMS can broaden your options for the presentation layer, let team members narrow their focus to what each does best, or provide data for iOS and Android applications along with a responsive site. Maybe the greatest benefit is that having to consider the relationship between the CMS and rendering layer helps break up assumptions about delivery formats, making you more future-friendly along the way. Mark Llobrera shares a couple of tales where headless was the right solution.

  • The Tedium of Managing Code

    ·

    Making module syntaxes play well together, managing dependencies, keeping up with third-party code—the devil is in the details when it’s time to ship. You can’t let your focus wander too much while performing these important tasks. Still, though—it’s so boring. Lyza D. Gardner feels your pain.

  • Instant Web

    ·

    For some, Facebook’s Instant Articles is a sign that the traditional web stack is incapable of giving users a first-class reading experience. But the sluggish performance of the web isn’t due to an inherent flaw in the technology. That particular problem originates between the seat and the keyboard, where builders make choices that bloat their sites. For Mark Llobrera, Instant Articles is a sign that we need to prioritize performance like we actually mean it.

  • Let Links Be Links

    ·

    The notion of the web as an application platform has never been more popular. Single-page frameworks like Ember and Angular make it easy to create complex applications that offer richer, more robust experiences than traditional websites can. But this benefit comes at a cost. Ross Penman tells us what we can do about it.

  • Pluralization for JavaScript

    ·

    Getting plurals right in localization is a tricky prospect—each language has its own rules, and exceptions within those rules. How can we scale our websites and apps to respond to our global audience? Tingan Ho shows us how MessageFormat lessens some common pain points in the pluralization process.

  • Live Font Interpolation on the Web

    ·

    We all want to design great typographic experiences—while serving users on a huge array of devices. But today’s type is inflexible and doesn’t scale. We can solve this problem by making webfonts more systemized and context-aware, and live web font interpolation—the modification of a font’s design in the browser—can help us get there. Andrew Johnson points the way.

  • Breaking Stuff

    ·

    Designers may do CSS, but not JavaScript. Some may do JavaScript, but draw the line at git. Some may be willing to use git with a graphical interface, but not with Terminal. When we get out of our comfort zone, it’s great to have a safety net so we can learn without breaking stuff too badly.

  • Radio-Controlled Web Design

    ·

    Tabs, modal overlays, hidden navigation: we’ve developed many patterns to help us design for mobile screens. But these patterns tend to show and hide content using JavaScript—which can come with its own challenges. Art Lawry explores techniques for reducing that dependency on JavaScript using an unlikely tool: radio buttons.

  • Why Sass?

    ·

    “I was a reluctant believer in Sass. I write stylesheets by hand! I don’t need help! And I certainly don’t want to add extra complexity to my workflow. Go away!” So says designer, CSS wizard, and Dribbble co-founder Dan Cederholm at the beginning of his new book Sass For Web Designers, released today by A Book Apart. Yet the reluctant convert soon discovers that the popular CSS pre-processor can be a powerful ally to even the hand-craftiest front-end designer/developer. Dan has never learned a thing about CSS he wasn’t willing to share (and great at teaching). And in this exclusive excerpt from Chapter 1 of Sass For Web Designers, you’ll get a taste of how Dan learned to quit worrying and use Sass to take better control of his stylesheets and websites.

  • Performance Matters

    ·

    Web performance depends on much more than JavaScript optimization. Fortunately, the W3C’s Web Performance Working Group has given rise to new APIs that help developers measure performance more accurately and write faster web apps.

  • Writing Testable JavaScript

    ·

    As our JavaScript takes on more and more responsibilities, we need a reliable codebase—one that is thoroughly tested. Integration tests focus on how the pieces of an application work together, but don’t tell us whether individual units of functionality are behaving as expected. That’s where unit testing comes in. And we’ll have a hard time writing unit tests until we start writing testable JavaScript. Rebecca Murphey explains how to save time in the long run by writing cleaner application code and testing, testing, testing.

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