Content tagged “development”

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

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

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

  4. [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.

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

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

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

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

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

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

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

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

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

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

  15. 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).

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

  17. Cutting the Mustard Revisited

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

    Published on .

  18. Inline SVG with PNG Fallback

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

    Published on .

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

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

  21. Open-Sourcing My Webmention Service

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

    Published on .

  22. Abandoning Google Analytics

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

    Published on .

  23. The Web Is Cake

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

    Published on .

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

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

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

  27. 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”.

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

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

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

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

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

  33. 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).

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

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