Content tagged “development”

  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. A11Y Style Guide

    The A11Y style guide comes with pre-populated accessible components that include helpful links to related tools, articles, and WCAG guidelines to make your site more inclusive. These components also serve as a guide for both HTML markup and SCSS/CSS code, to inform designers, front-end and back-end developers at every stage of the website’s creation.

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

  4. Request Map Generator

    Submit a URL to generate a node map of all of the requests on the page. Rapidly identify what third-parties are on your site, where your transmitted bytes are coming from and how slow your domains are!

    I can’t believe I haven’t saved this useful website before, but it made its way back into my timeline via Jeffrey’s notes from An Event Apart Chicago. Learn more about Request Map Generator by reading Simon Hearne’s introductory blog post.

  5. Progressively Enhancing CSS Layout: From Floats To Flexbox To Grid — Smashing Magazine

    “When can I start using CSS grid layout?” “Too bad that it’ll take some more years before we can use grid in production.” “Do I need Modernizr in order to make websites with CSS grid layout?” “If I wanted to use grid today, I’d have to build two to three versions of my website.” The CSS grid layout module is one of the most exciting developments since responsive design. We should try to get the best out of it as soon as possible, if it makes sense for us and our projects.

    This 2017 article from Manuel Matuzović goes deep on how to creatively use CSS Grid Layout in a progressively-enhanced manner. Naturally, the baseline techniques we use will change over time, but Manuel’s demo illustrates how you might think about design and layout as experience layers.

  6. I Used The Web For A Day On A 50 MB Budget — Smashing Magazine

    The latest in Chris Ashton’s series of “I Used the Web for a Day…” articles is a doozy of a read chock-full of facts, figures, tips, and tricks.

    The cost (in dollars) of mobile and broadband data plans globally varies wildly and Chris’ post goes deep on how the cost (in page weight and in dollars) of our work building for the Web impacts users around the world. Chris concludes:

    We don’t have the power to change the global cost of data inequality. But we do have the power to lessen its impact, improving the experience for everyone in the process.

  7. Introducing USWDS 2.0 | United States Web Design System

    Today, we’re launching U.S. Web Design System 2.0 (USWDS 2.0), a new foundation for the future of our design system. This new version was designed to make it easier for any project to integrate USWDS and use it to support your mission and the needs of your audience.

    USWDS is a library of code, tools, and guidance to help government teams design and build fast, accessible, mobile-friendly government websites backed by user research and modern best practices. USWDS 2.0 is an important update to the design system — it introduces a powerful toolkit of new features to help make creating useful, consistent digital services faster, simpler, and more fun.

    Two years in the making, version 2.0 of the U.S. Web Design System is now live. This is a tremendous update and will be a boon to anyone building digital services for the American people. Congratulations to Dan, Maya, and the rest of the Technology Transformation Services team!

  8. What’s new on iOS 12.2 for Progressive Web Apps – Maximiliano Firtman – Medium

    One year after the first initial support for PWAs on iOS, Apple released iOS 12.2 for iPhone and iPads with what it seems to be the biggest step forward in the last year, addressing the two most annoying problems we’ve been dealing with PWAs: reload effect and OAuth logins.

    Maximiliano Firtman details at great length the updates to Safari available in iOS 12.2. The good, the bad, and the ugly. It’s all covered in this post.

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

  10. Jen Simmons on CSS’ display property

    Collecting a few of Jen Simmons’ tweets:

    Learned on today’s CSSWG call—I had a fundamentally out-of-date mental model of how the display property structures its values.

    It’s not display: <value>;. It’s display: <outer-value> <inner-value>;.

    drafts.csswg.org/css-display/#outer-role

    This realization won’t change what I write in my code, but it does change how I think about what I’m writing.

    display: grid; = display: block grid;
    display: flex; = display: block flex;
    

    Also: display: inline grid;

    You can write display: inline-grid;, but that’s actually out of date. It makes more sense to write display: inline grid;

  11. How the Defense Digital Service uses the Design System for a Ruby app | U.S. Web Design System

    The U.S. Web Design System (USWDS) is a library of design and code guidelines to help agencies create trustworthy, accessible, and consistent digital services. The Design System is being used on over one hundred government sites, with an audience of 120 million users. In this 12th post in our series, we sat down with Jason Garber, front-end web developer at the U.S. Digital Service (USDS)‘s Defense Digital Service, to talk about his work creating a Ruby gem for the new Move.mil that integrates the Design System into a Ruby on Rails application.

    I was recently interviewed by the team behind the U.S. Web Design System about the uswds-rails Ruby gem I put together. Yay, open source!

  12. 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!

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

  14. Software development 450 words per minute - Vincit

    “Something’s a little bit off here.” That’s what I predict your first thought to be upon seeing my cubicle for the first time. There’s no screen or mouse in sight. Instead there’s a guy hammering away on a keyboard, staring at seemingly nothing.

    It’s only me, and my colleagues can assure you that I’m mostly harmless. I’m a software developer working at Vincit offices in Tampere. I’m also blind. In this blog post I’m going to shed some light on the way I work.

    Tuukka Ojala shares his experience and the tools he uses to develop software.

  15. WAI-ARIA Authoring Practices 1.1

    This document provides readers with an understanding of how to use WAI-ARIA 1.1 [WAI-ARIA] to create accessible rich internet applications. It describes considerations that might not be evident to most authors from the WAI-ARIA specification alone and recommends approaches to make widgets, navigation, and behaviors accessible using WAI-ARIA roles, states, and properties. This document is directed primarily to Web application developers, but the guidance is also useful for user agent and assistive technology developers.

  16. [Insert Clickbait Headline About Progressive Enhancement Here], From the Notebook of Aaron Gustafson

    In a lengthy response to a hyperbolic, ill-informed opinion piece, Aaron Gustafson describes progressive enhancement:

    It’s a philosophy that recognizes the nature of the Web as a medium and asks us to think about how to build products that are robust and capable of reaching as many potential customers as possible. It isn’t concerned with any particular technology, it simply asks that we look at each tool we use with a critical eye and consider both its benefits and drawbacks. And it’s certainly not anti-JavaScript.

    I spent a good deal of time in 2015 writing and speaking on the benefits of this approach to designing and building for the Web:

    The observant reader would note that Aaron and I address the same tenuous arguments made—coincidentally—by the same people.

  17. Adactio: Journal—The imitation game

    Jeremy, on how he thinks about building progressive web apps:

    In my opinion, the term “progressive web app” can be read in order of priority:

    1. Progressive—build in a layered way so that anyone can access your content, regardless of what device or browser they’re using, rewarding the more capable browsers with more features.
    2. Web—you’re building for the web. Don’t lose sight of that. URLs matter. Accessibility matters. Performance matters.
    3. App—sure, borrow what works from native apps if it makes sense for your situation.

    He also links to Jason Grigsby’s Designing Responsive Progressive Web Apps which is another great read.

  18. Answers to Questions About Performance — Google Developers — Medium

    Google’s Paul Lewis answers the same questions that Matt Gaunt received (and that I previously linked to). Paul’s focus on the user and their experience of our work resonates strongly with me and is something I harp on quite frequently.

    I think performance, accessibility, and security share some traits: they can’t be retro-fitted to a project, they’re often thankless tasks, and they’re only notable by their absence. They’re all, however, the bedrock of a good user experience, onto which you can layer high quality designs and interactions.

    Paul also cites one of my favorite documents, the W3C’s HTML Design Principles:

    In case of conflict, consider users over authors over implementors over specifiers over theoretical purity.

    Truth.

  19. Web Development is a Balancing Act — Medium

    Google Chrome Developer Advocate Matt Gaunt publicly answers some Web performance-related questions he received. Many of the questions have to do with frameworks, a topic of great interest to me.

    A slow website, no matter how it’s built, means someone didn’t notice, didn’t care or couldn’t fix the problem. That doesn’t mean the framework or tools used to build it is the problem, it could be the way those tools have been used.

    It could also be that the chosen tool isn’t the best solution to the problem at hand.

  20. How Changing WebFonts Made Rubygems.org 10x Faster

    Nate Berkopec’s article is chock full of useful information, but I was particularly taken by his framing of a developer’s job (emphasis his):

    As developers, our job isn’t to tell the designers “Hey, you’re dumb for including over 500KB of WebFonts in your design!”. That’s not their job. As performance-minded web developers, our job is to deliver the designer’s vision in the most performant way possible.

    Equally interesting, but more technically-focused, is the rundown of how Google Fonts takes advantage of the unicode-range property to deliver smaller fonts.

    The unicode-range property describes what characters the font supports. […] By telling the browser what characters the font supports, the browser can look at the page, note what characters the page uses, and then only download the fonts it needs to display the characters actually on the page.

    Brilliant. I switched to serving fonts from Google and trimmed 45–70 kilobytes from my homepage. Your mileage may vary, but… not bad.

  21. Mobile Web Stress: Understanding the neurological impact of poor performance

    Slides from Tammy Everts’ 2013 presentation on the neurological effects of poor performance on our websites’ visitors reveal some startling facts. Right out of the gates, Tammy cites a 2010 EEG study of users navigating a site on a connection throttled from 5MB to 2MB. The study found that participants had to concentrate up to 50% harder and reported a negative brand association afterward.

  22. Yellow Lab Tools

    A cool new front-end performance analysis tool from Gaël Métais that offers code improvements.

    This is done by loading the webpage via PhantomJS and collecting various metrics and statistics with the help of Phantomas. These metrics are categorized and transformed into scores. It also gives in-depth details so developpers can correct the detected issues.

    Yellow Lab Tools dovetails nicely with more popular performance tools like WebPageTest.

  23. Notes on Using ARIA in HTML

    This document is a practical guide for developers on how to add accessibility information to HTML elements using the Accessible Rich Internet Applications specification [WAI-ARIA-1.1], which defines a way to make Web content and Web applications more accessible to people with disabilities. This document demonstrates how to use WAI-ARIA in [HTML51], which especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies.

  24. Maintenance, Operational Concerns, and Cost — Chronic Build Failure — Medium

    Jon Daniel on software maintenance:

    I’ve realized that successful applications in an “Enterprise” environment spend far more time in maintenance mode then they do being actively developed. Consumers of your application don’t care that you used some cutting edge framework or state-of-the-art architectural patterns. They just care that it works and continues to work well.

    Jon goes deep on operational concerns and posits:

    Software is not done until it is decommissioned.

    I couldn’t agree more.

  25. Issue and Pull Request templates

    GitHub added the ability for project maintainers to add issue and pull request templates to projects.

    To add an Issue template to a repository create a file called ISSUE_TEMPLATE in the root directory. A file extension is optional, but Markdown files (.md) are supported. Markdown support makes it easy to add things like headings, links, @-mentions, and task lists to your templates.

    Thinking this will prove quite useful on some of my projects.

  26. Launching FrancisCMS onto the IndieWeb

    About a month ago, I quietly launched a new version of this site. It’s been in the works for quite some time.

    Published on .

  27. Chunked transfer encoding in Rails (streaming)

    Using the Transfer-Encoding: chunked header, the server will send chunks of the rendered page back to the browser so in the case of Rails, it starts with the layout and sends out the <head> part including assets like js and css.

    Chunked transfer encoding is a great way to improve page performance for the parts of your application that require time-consuming database queries. The Rails-level changes are straightforward, but unfortunately not all Ruby web servers support the feature (looking at you, Puma).

  28. Notes from “Designing for Performance”

    If you build websites for a living or work with people who do, stop what you’re doing and get yourself (or your team) a copy of this book.

    Published on .

  29. Cutting the Mustard Revisited

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

    Published on .

  30. Inline SVG with PNG Fallback

    Demonstrating a useful technique for providing fallback content to browsers lacking support for inline SVGs.

    Published on .

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

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

  33. Open-Sourcing My Webmention Service

    It may have taken five months, but I finally published the code behind webmention.sixtwothree.org.

    Published on .

  34. Abandoning Google Analytics

    As of today, I've removed Google Analytics from this site. Here's why.

    Published on .

  35. The Web Is Cake

    Or, more specifically, web pages are cake. Here's why.

    Published on .

  36. Tips For Implementing Device Assets

    In this post, I'll outline the approach I used to create a practical and manageable set of device assets for World Wildlife Fund's recently-launched Find Your Inner Animal quiz.

    Published on .

  37. Using browser-sync with Compass, Jekyll, and Foreman

    In this post, I'll cover how I combined browser-sync with a couple of my favorite tools (Compass, Jekyll, and Foreman) to build out a static site and make browser and device testing easier.

    Published on .

  38. Sass Maps Are Awesome!

    This past weekend at SassConf, the authors of Sass announced the first version 3.3 release candidate of the popular CSS extension language. There are a ton of new features in 3.3 that I'm excited to try out, but I want to share a personal favorite with you.

    Published on .

  39. HTML_CodeSniffer

    HTML_CodeSniffer is a client-side script that checks HTML source code and detects violations of a defined coding standard. HTML_CodeSniffer is written entirely in JavaScript, does not require any server-side processing and can be extended by developers to enforce custom coding standards by creating your own “sniffs”.

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

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

  42. Simple Command Line Deploy Scripts for Non-Rails Projects

    I've been working on a lot of non-Rails projects lately. At some point during the buildout process, I start spending a fair amount of time uploading my changes to one of our testing servers. I needed a better system. So I wrote one.

    Published on .

  43. JavaScript dependency management and concatenation: Sprockets

    Sprockets is a Ruby library that preprocesses and concatenates JavaScript source files. It takes any number of source files and preprocesses them line-by-line in order to build a single concatenation. Specially formatted lines act as directives to the Sprockets preprocessor, telling it to require the contents of another file or library first or to provide a set of asset files (such as images or stylesheets) to the document root. Sprockets attempts to fulfill required dependencies by searching a set of directories called the load path.

  44. Fluid Grid System

    A web grid system designed by Joseph Silvashy and New Gold Leaf that allows designers to use the screen real estate on large monitors and retain great design on smaller ones. The Fluid Grid System combines the principals of the typographic grid and a baseline grid into one resolution-independent framework.

  45. Graph API - Facebook Developers

    The new Graph API attempts to drastically simplify the way developers read and write data to Facebook. It presents a simple, consistent view of the Facebook social graph, uniformly representing objects in the graph (e.g., people, photos, events, and fan pages) and the connections between them (e.g., friend relationships, shared content, and photo tags).

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

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