Content tagged “JavaScript”

  1. JavaScript Modules – A Beginner's Guide

    JavaScript modules (also known as ES modules or ECMAScript modules) were created to help make JavaScript code more organized and maintainable.

    Understanding how ES modules work will help you become a better JavaScript developer. In this article, we’ll cover:

    • What is a module?
    • What are ES modules? Why do we use them?
    • How to use ES modules
    • Other module systems used in JavaScript

    Madison Kanna’s excellent introduction to standardized JavaScript module syntax. Of particular note, the syntax for importing from a file that includes both a default and additional named exports:

    import add, { multiply, subtract } from './math.js';
    
  2. BBC GEL Technical Guides

    The BBC Global Experience Language (GEL) Technical Guides are a series of framework-agnostic, code-centric recommendations and examples for building GEL design patterns in websites. They illustrate how to create websites that comply with all BBC guidelines and industry best practice, giving special emphasis to accessibility.

    This technical companion to the BBC’s Global Experience Language serves as a reference for developers implementing GEL’s user experience recommendations.

  3. Removing jQuery from GitHub.com frontend | GitHub Engineering

    The GitHub Engineering team recently completed a gradual transition away from jQuery and wrote in-depth about the experience. There’s a lot of good detail in the post, but I’m particularly fond of this bit:

    As part of our refined approach to building frontend features on GitHub.com, we focused on getting away with regular HTML foundation as much as we could, and only adding JavaScript behaviors as progressive enhancement. As a result, even those web forms and other UI elements that were enhanced using JS would usually also work with JavaScript disabled in the browser. In some cases, we were able to delete certain legacy behaviors altogether instead of having to rewrite them in vanilla JS.

    Stick around through the end of the article for more on how the team is using Custom Elements to enhance the user interface.

  4. Fizzy School

    jQuery makes writing browser JavaScript so accessible, it’s easy to skip over some of JavaScript’s core concepts. Fizzy School covers these concepts so novice developers can fill in the missing areas in learning JavaScript and jQuery.

    This is a great resource from long-time DC-area Web developer David DeSandro. If you’re just dipping your toes in the JavaScript/jQuery worlds or if you’re looking for a refresher, click on through!

  5. Deploying ES2015+ Code in Production Today — Philip Walton

    Most developers think of <script type="module"> as way to load ES modules (and of course this is true), but <script type="module"> also has a more immediate and practical use-case—loading regular JavaScript files with ES2015+ features and knowing the browser can handle it!

    To put that another way, every browser that supports <script type="module"> also supports most of the ES2015+ features you know and love.

    This very helpful article outlines how you can take advantage of modern JavaScript features while still serving usable code to older browsers.

  6. Removing Headaches from Focus Management | Google Developers

    An exciting accessibility change is coming to Chrome 50. Google calls it “focus starting point” and it’s a small—but incredibly helpful—change to how their Web browser manages focused elements and tab order.

    If something has focus, it’s also the focus navigation start point, just like before. Also, just like before, if nothing else has set the focus navigation start point, then it will be the current document or, if available and supported, the currently active dialog. If we navigate to a page fragment like in the example above, that will now set the focus start point. Also, if we click any element on the page, regardless of whether it is focusable, that will now set the focus navigation start point. Finally, if the element which was the focus start point is removed from the DOM, its parent becomes the focus start point. No more focus whack-a-mole!

    As the article explains, prior to this change, focus management can be difficult when tabbing around and moving within a document (or into and out of modal dialog boxes). Take heed of the note in the article’s caveats section:

    Sequential focus navigation starting point is currently only supported in Chrome 50, Firefox, and Opera. Until it is supported in all browsers you’ll still need to add tabindex="-1" (and remove the focus outline) to your named anchor targets.

  7. Adactio: Journal—Bookmarklets

    Jeremy throws cold water on Brian’s bookmarklet article I linked to yesterday.

    Bookmarklets are not dead. They may, however, be pining for the fjords.

    Like Jeremy, I have a simple bookmarklet for saving links to my own site. My bookmarklet opens a new window/tab, passing via URL parameters the URL and title of the current window/tab to a page on my site. If I’ve highlighted some text in the page, the bookmarklet will grab that and insert it into the body field on my link form, prepended with a > (the Markdown syntax for a <blockquote>).

    Easy peasy.

    Not-so-humorously, that last piece doesn’t work on overly-clever sites like Medium that monkey about with browser-native user interface. Neutral face emoji.

  8. Cutting the Mustard Revisited

    Taking a look at a few possible updates to the BBC News team’s classic JavaScript feature detection.

    Published on .

  9. An Update on Updating npm and Bower Packages

    Turns out I got a couple things less-than-correct in my last post on npm and Bower. This post is a more accurate process for updating packages for each registry.

    Published on .

  10. Publishing Packages to npm and Bower

    In this post, I'll run through the process by which you can publish code to the npm and Bower repositories.

    Published on .

  11. The makeup of the Open Web stack - destroy/dstorey

    The Open Web has never had as many capabilities as it has today. We’re seeing an explosion in new or updated specifications, and prototype and stable implementations to go with them. This blog post will look back as the platform we have had available (Called Open Web 0 here) and then looks forward at what we are beginning to get now and into the short and medium term future (which I’ve labelled Open Web 1).

  12. jQuery++

    I am a MIT licensed collection of extremely useful DOM helpers and special events for jQuery 1.7 and later. I’m not a UI project like jQuery UI or jQuery Tools. Instead, I’m all about providing low-level utilities for things that jQuery doesn’t support. If Underscore is jQuery’s functional-programming tie, I am jQuery’s bald-spot covering toupee.

  13. JavaScript Garden

    JavaScript Garden is a growing collection of documentation about the most quirky parts of the JavaScript programming language. It gives advice to avoid common mistakes and subtle bugs, as well as performance issues and bad practices, that non-expert JavaScript programmers may encounter on their endeavours into the depths of the language.

  14. jQuery.fracs · larsjung.de

    jQuery.fracs determines the fraction of an HTML element that is currently in the viewport, as well as the fraction it takes of the complete viewport and the fraction of the area that might possibly be visible. It also provides the coordinates of the visible rectangle in document, element and viewport space.

  15. JS 201: Run a function when a stylesheet finishes loading

    I'm in the middle of working out a new feature for a project that requires JavaScript to append some markup, stylesheets, and scripts to a page. A piece of JavaScript required styles be applied to certain elements before it should execute.

    Published on .

  16. Extending Paul Irish's comprehensive DOM-ready execution

    Way back in March of '09, Paul Irish laid forth a markup-based means of executing JavaScript on page load. I iterated on Paul's method, adding a touch of HTML5 and making use of some built-in Rails magic.

    Published on .

  17. Html5 cross browser polyfills - Modernizr - GitHub

    So here we’re collecting all the shims, fallbacks, and polyfills in order to implant html5 functionality in browsers that don’t natively support them.

    The general idea is that: we, as developers, should be able to develop with the HTML5 apis, and scripts can create the methods and objects that should exist. Developing in this future-proof way means as users upgrade, your code doesn’t have to change but users will move to the better, native experience cleanly.

  18. $.getImageData

    $.getImageData allows anyone to get an image from another domain and have pixel level access to it using the getImageData() method. It works by sending a request with the URL of the image to google’s servers via the Google App Engine1. The server then converts the image into base64 encoded data URL and sends the image back as a JSON object. This means that the image can be locally included on the website and therefore it can be edited by the canvas tag.

  19. Introduction to HTML5 video - Opera Developer Community

    One of the most exciting new features of HTML5 is the inclusion of the <video> element, which allows developers to include video directly in their pages without the need for any plugin-based solution. This article gives you an introduction to <video> and some of its associated APIs. We look at why native video support in browsers is important, give an overview of the element’s markup, and outline the most important ways in which video can be controlled via JavaScript.

  20. Accessible HTML5 Video with JavaScripted captions - Opera Developer Community

    It’s great that HTML5 allows us to embed video into web pages that can then be displayed directly by browsers, without having to rely on third-party plugins. The elephant in the corner regarding all video — whether it be HTML5 or proprietary — is accessibility. What are conscientious developers to do to provide textual alternatives for those who can’t access the contents of the video?

  21. Jammit: Industrial Strength Asset Packaging for Rails

    Jammit is an industrial strength asset packaging library for Rails, providing both the CSS and JavaScript concatenation and compression that you’d expect, as well as YUI Compressor and Closure Compiler compatibility, ahead-of-time gzipping, built-in JavaScript template support, and optional Data-URI / MHTML image embedding.

  22. Rich-Text Editing in Mozilla - MDC

    Mozilla 1.3 introduces an implementation of Microsoft® Internet Explorer’s designMode feature. The rich-text editing support in Mozilla 1.3 supports the designMode feature which turns HTML documents into rich-text editors. Starting in Firefox 3, Mozilla also supports Internet Explorer’s contentEditable attribute which allows any element to become editable or non-editable (the latter for when preventing change to fixed elements in an editable environment).

  23. Code: Flickr Developer Blog » Building Fast Client-side Searches

    Yesterday we released a new people selector widget (which we’ve been calling Bo Selecta internally). This widget downloads a list of all of your contacts, in JavaScript, in under 200ms (this is true even for members with 10,000+ contacts). In order to get this level of performance, we had to completely rethink how we send data from the server to the client.

  24. Reading Mode

    I just added a feature I'm rather fond of.

    Published on .