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!

  • From URL to Interactive

    ·

    When we think about it, our whole industry depends on our faith in a handful of “black boxes” few of us fully understand: browsers. We hand over our HTML, CSS, JavaScript, cross our fingers, and hope they render the experience we have in our heads. But knowing how they work can really get you out of a jam when things go wrong. That’s why we’ve assembled a handful of incredibly knowledgeable authors to take us under the hood in this four-part series. Join us on this trip across the web, into the often foggy valley between code and experience.

  • Coding with Clarity: Part II

    ·

    Coding with clarity sets great developers apart from the rest. Brandon Gregory shares some principles for organizing objects and functions in JavaScript that will improve clarity, making your code easier to read, understand, and extend.

  • Fixing Variable Scope Issues with ECMAScript 6

    ·

    Variable scope in JavaScript has always had its problems. ECMAScript 6 has some features to help developers deal with this and give them more control over their variables. Brandon Gregory gives the low-down on these features and when to use them.

  • The Cult of the Complex

    ·

    ’Tis a gift to be simple. ALA’s Zeldman bemoans our industry’s current fetish for the needlessly complicated over the straightforward. Escape the cult of the complex! Get back to improving lives, one interaction at a time.

  • Why Mutation Can Be Scary

    ·

    Unexpected changes in your JavaScript code can be a real headache. When working with objects, it can be even harder to prevent unintended mutation. Zell Liew shows us some tricks (and libraries) to prevent these unintended changes and ensure stability when working with objects.

  • My Grandfather’s Travel Logs and Other Repetitive Tasks

    ·

    When your design project involves unconventional data, how do you structure that data to make manipulating it less tedious? Daniel Warren faced this question when he decided to create an infographic showcasing the decades of extensive travel his grandfather had documented in handwritten journals. Learn about the JavaScript techniques Warren used to minimize repetitive tasks and give his grandfather’s travel logs a new life.

  • Coding with Clarity

    ·

    Always writing the clearest possible code is what helps separate the great developers from the merely good. It cuts confusion, reduces headaches for current and future developers, and saves everybody time in the long run. And though not always as easy as it sounds, with good forward planning, a logical approach to code structure, and adherence to a few guiding principles, coding with greater clarity is something all developers can achieve.

  • What I Talk About When I Talk About Sorting: Untangling Array#sort

    ·

    Javascript’s Array#sort can be a powerful tool in your belt, but it can also trip you up if you wield it without proper planning and a deeper understanding of its strengths and weaknesses. Claudia Hernández takes a deeper look at how sorting works across different engines, how to create custom sorting functions, and helps you sharpen your sorting skills.

  • JavaScript for Web Designers: DOM Scripting

    ·

    JavaScript’s ability to access and modify elements on the page is undeniable, and the Document Object Model is an essential component of that. In this excerpt from Mat Marquis’ new book, JavaScript for Web Designers, Mat shows us how to manhandle the DOM to get better results from our scripts.

  • Making your JavaScript Pure

    ·

    JavaScript code can easily grow into a thicket of dependencies that harbors wily and persistent bugs. Keeping the rows neat with functions that don’t reach outside their scope makes your codebase more reliable and easier to document. Jack Franklin suggests looking for opportunities to use pure functions—it could make maintaining the code a stroll in the park for your future self.

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