---
title: "JavaScript"
description: "36 posts about JavaScript, summarised, each linking to the original."
---

# JavaScript
> 36 posts about JavaScript, summarised, each linking to the original.

## Articles

### [FYI: Phoenix drops webpack and npm for esbuild](https://yomu.fyi/post/fyi-phoenix-drops-webpack-and-npm-for-esbuild.md)
- Company: [Fly.io](https://yomu.fyi/company/fly-io.md)
- Published: Jul 27, 2021
- Type: Announcement

Phoenix is replacing its use of Node, npm, and webpack with esbuild, a Go-written JavaScript bundler, in the upcoming Phoenix 1.6 release. The change responds to support burden and reliability problems: the post says npm, webpack, or brunch were involved in roughly 30% of Phoenix’s reported issues, while node-sass and npm v7 had recently broken phx.new. esbuild compiles to native code, handles common asset-pipeline tasks, and is intended to provide newcomers with a seamless setup and long-term users with more reproducible JavaScript and CSS builds. Teams doing substantial frontend JavaScript can still use customized webpack or other tooling, while esbuild remains an opt-in path for complex client-side work. Existing projects can use Phoenix 1.6, although the post notes possible zombie processes and says migration snags remain to be assessed.


### [Building a Monorepo with Yarn 2](https://yomu.fyi/post/building-a-monorepo-with-yarn-2.md)
- Company: [Heroku](https://yomu.fyi/company/heroku.md)
- Author: Danielle Adams
- Published: Dec 23, 2020
- Type: Tutorial

The post presents Yarn 2 workspaces as a way to manage dependencies for a JavaScript or Node.js monorepo containing separate server and UI applications. It configures the root package.json with workspace directories, imports the workspace-tools plugin, pins the project to a checked-in Yarn binary with yarn set version berry, and enables the dependency cache through .yarn/cache and Plug’n’Play. The walkthrough adds Express, TypeScript, and @types/express to a server workspace, creates a Next.js UI workspace, and uses workspace scripts to build both applications, while yarn dlx initializes TypeScript without a global install. It also shows the Git files to retain, generated JavaScript to ignore, and a Heroku start script that launches the server workspace; the stated benefit is faster installs through a committed cache and zero-install deployment.


### [Images as Code: Representing Localized and Evolving Products on Marketing Pages](https://yomu.fyi/post/images-as-code-representing-localized-and-evolving-products-on-marketi.md)
- Company: [Shopify](https://yomu.fyi/company/shopify.md)
- Author: 2023-10-18
- Published: Oct 7, 2020
- Type: Problem & solution

Shopify needed product visuals on more than 35 localized domains to stay accurate as features, currencies, languages, and product UI changed. An SVG experiment made translated text difficult to manage because SVG lacks word wrapping, while export settings, effects such as Gaussian blur, and repeated translation hooks created maintenance and performance problems. The replacement represented interfaces in HTML and JavaScript through ScaleContentAsImage, which wraps fixed-width content, computes available space, applies a CSS transform scale, preserves layout with a spacer, absolutely positions the transformed element, and updates calculations on resize. The team concluded HTML/JavaScript was more maintainable and flexible for design, documentation, animations, and localization, while noting remaining work around lazy-loaded images, reusable-visual documentation, and future CSS Houdini possibilities.


### [Maps, Apps, and Tracks](https://yomu.fyi/post/maps-apps-and-tracks.md)
- Company: [Fly.io](https://yomu.fyi/company/fly-io.md)
- Published: Oct 6, 2020
- Type: Tutorial

Maps, Apps, and Tracks describes how to build an online map that tracks a marathon runner from a mobile device and deploys it with Fly. The route is drawn and exported as GPX, imported into Google My Maps, enriched with mile markers, and exported as KML for display through Leaflet.js and the leaflet-kml plugin. An Express server accepts OwnTracks HTTP POSTs at /log/, filters location messages by a hard-coded topic, stores latitude and longitude in memory, and exposes them through /where/. Browser code places or moves a marker by polling that endpoint every 30 seconds, while static files are served from the mappages directory. Local testing uses a shell script with mock OwnTracks JSON, and Fly deployment uses flyctl, fly init, and fly deploy; the post notes authentication, Redis persistence, and multiple runners as possible additions.


### [Migrating Heroku Database Apps To Fly](https://yomu.fyi/post/migrating-heroku-database-apps-to-fly.md)
- Company: [Fly.io](https://yomu.fyi/company/fly-io.md)
- Published: Sep 25, 2020
- Type: Tutorial

Migrating a Heroku application to Fly requires attention to database connectivity because Heroku Postgres must be accessed over SSL from outside Heroku. The post uses the DATABASE\_URL environment variable, parses it with pg-connection-string, and passes a configured connector to Massive.js, setting sslmode to require and rejectUnauthorized to false to accommodate self-signed certificates in Heroku Postgres’s certificate chain. It also shows a local-development fallback that uses a non-SSL localhost Postgres connection when DATABASE\_URL is undefined. With these changes, Turboku can migrate the app and convert DATABASE\_URL into a Fly secret, while the application retains its database connection and can use Fly’s region and scaling controls. Database latency still depends on proximity to Heroku’s US or European database regions, so caching within Fly regions may matter for mission-critical performance.


### [Always Be Connecting (with HTTPS)](https://yomu.fyi/post/always-be-connecting-with-https.md)
- Company: [Fly.io](https://yomu.fyi/company/fly-io.md)
- Published: Sep 11, 2020
- Type: Tutorial

The post explains how to ensure users reach an HTTPS version of an application running behind Fly’s edge proxies, particularly when a custom domain and certificate are attached. Fly’s default fly.dev behavior redirects HTTP automatically, but custom certificates do not activate that upgrade because connection behavior remains under the application owner’s control. The recommended method checks the X-Forwarded-Proto header, which records whether the original client connection used http or https, and returns a 301 redirect to the same URL with an https scheme when needed. Examples implement the check in Go middleware, Express middleware for Node, and Nginx configuration; the post also notes that non-Fly deployments can inspect the request and URL scheme instead, while Fly was considering future automation.


### [A First Look at Reanimated 2](https://yomu.fyi/post/a-first-look-at-reanimated-2.md)
- Company: [Shopify](https://yomu.fyi/company/shopify.md)
- Author: 2023-10-18
- Published: Jul 2, 2020
- Type: Explainer

Reanimated 2 is presented as a new approach to building gestures and animations in React Native, replacing the declarative domain-specific language of Reanimated 1 with animation worklets. Worklets are JavaScript functions declared with the “worklet” directive that execute independently on the UI thread, can receive parameters, access JavaScript-thread constants, call other worklets synchronously, and invoke JavaScript-thread functions asynchronously. The API introduces five hooks for creating shared and derived values, handling gesture events, and assigning animated styles or properties; a drag example combines shared values, gesture context, and velocity-based decay. The article also describes a liquid-swipe example using bezier interpolation, gesture handling, and physics-based animation, and reports that the new design lowers the entry barrier, supports cases previously requiring the bridge, and improves initialization performance.


### [Building a GraphQL API in JavaScript](https://yomu.fyi/post/building-a-graphql-api-in-javascript.md)
- Company: [Heroku](https://yomu.fyi/company/heroku.md)
- Author: Owen Ou
- Published: Jun 24, 2020
- Type: Tutorial

GraphQL lets API clients specify the fields they need instead of accepting a server-defined response, reducing unnecessary payload and potentially combining data from multiple stores behind one endpoint. The tutorial builds a JavaScript/Node.js implementation by loading Schema Definition Language (SDL) with graphql-tools, defining Query, User, and Address types, and connecting fields to resolver functions. Resolvers receive field arguments and can use context for authorization, illustrated by restricting address access to the current user. It also recommends keeping business logic separate from resolvers and notes that GraphQL does not eliminate database performance, caching, logging, monitoring, or versioning concerns. The discussion presents GraphQL as useful for evolving, front-end-heavy applications, while warning that its single HTTP status code and schema versioning limitations can complicate error handling and breaking changes.


### [Building Arrive's Confetti in React Native with Reanimated](https://yomu.fyi/post/building-arrive-s-confetti-in-react-native-with-reanimated.md)
- Company: [Shopify](https://yomu.fyi/company/shopify.md)
- Author: 2023-10-18
- Published: Apr 7, 2020
- Type: Tutorial

Shopify rewrote its Arrive package-tracking app in React Native and launched it on Android, where the earlier iOS-only app’s delivery confetti needed a cross-platform implementation. Rather than duplicate the iOS CAEmitterLayer code in Java or Kotlin, the team implemented the effect in JavaScript with Reanimated, whose declarative instructions run animation computations on the native UI thread after setup. The walkthrough initializes 100 randomized confetti, animates position and three-dimensional rotation from randomized velocities, and uses delta time, a clock, staggered delays, and edge-bounce elasticity to shape their motion. It also adds two confetti cannons and 2-dimensional confetti, while leaving cleanup of images and animation stopping beyond the post’s scope. The resulting version is described as resembling the original while spreading confetti more uniformly and making it behave more like paper.


### [Building with Web Components and Their Advantages Over Third-party Libraries](https://yomu.fyi/post/building-with-web-components-and-their-advantages-over-third-party-lib.md)
- Company: [Heroku](https://yomu.fyi/company/heroku.md)
- Author: Jamie White
- Published: Mar 4, 2020
- Type: Explainer

Web development moved from HTML, CSS, and JavaScript toward proprietary libraries such as React, Angular, and Vue, creating interoperability concerns that Web Components aim to address through browser standards. The post traces this shift from early W3C work and Google’s Polymer Project to a toolkit of custom elements, HTML templates, and Shadow DOM, with examples showing how custom tags and reusable markup are defined. Custom elements encapsulate JavaScript behavior, templates defer markup rendering until requested, and Shadow DOM isolates internal styles and elements from surrounding page content. The resulting components can be packaged as dependencies and consumed across most browsers without loading a front-end framework, while libraries including Polymer, Stencil, and Lightning Web Components can abstract the underlying APIs.


### [Chrome’s Changes Could Break Your App: Prepare for SameSite Cookie Updates](https://yomu.fyi/post/chrome-s-changes-could-break-your-app-prepare-for-samesite-cookie-upda.md)
- Company: [Heroku](https://yomu.fyi/company/heroku.md)
- Author: Lenora Porter
- Published: Feb 4, 2020
- Type: Tutorial

Chrome's SameSite changes alter when third-party cookies are sent in cross-site requests, affecting sites that rely on embedded services, analytics, advertising, or other cross-domain functionality. Starting February 4, 2020, Chrome was to reject such cookies unless they were secured and assigned an appropriate SameSite value, as part of a secure-by-default model intended to reduce CSRF attacks, other vulnerabilities, and privacy leaks. The post explains first- versus third-party cookies, contrasts Strict, Lax, and None, and gives scenarios for selecting each setting; SameSite=None must be paired with Secure and HTTPS. It also recommends enabling Chrome 80 flags to test for errors, then updating application cookies or coordinating with third-party providers. Server-side support is noted for PHP, NodeJS, Python, Flask, and Ruby on Rails, with direct JavaScript cookie handling also mentioned.


### [React Native is the Future of Mobile at Shopify](https://yomu.fyi/post/react-native-is-the-future-of-mobile-at-shopify.md)
- Company: [Shopify](https://yomu.fyi/company/shopify.md)
- Author: 2023-10-18
- Published: Jan 29, 2020
- Type: Announcement

Shopify is moving forward with React Native for new mobile apps after years of native development, driven by mobile purchasing volumes and a desire to consolidate iOS and Android work. It describes React Native as a framework that uses JavaScript and React’s declarative model to translate virtual DOM structures into native platform views through native bindings. Experiments with Arrive, Point of Sale, and Compass reported twice the productivity on Arrive, an estimated 80% code sharing target, and observed sharing of 95% for Arrive and 99% for Compass, while testing lowered the considered Android CPU threshold from 2GHz to 1.5GHz. The policy does not require rewriting existing native apps, leaves low-level libraries native and native hiring in place, and calls for dedicated React Native tooling, foundations, and open-source partnerships.


### [Want to Improve UI Performance? Start by Understanding Your User](https://yomu.fyi/post/want-to-improve-ui-performance-start-by-understanding-your-user.md)
- Company: [Shopify](https://yomu.fyi/company/shopify.md)
- Author: 2023-10-18
- Published: Sep 20, 2019
- Type: Tutorial

Shopify’s team examined UI performance in the Marketing section of the Shopify admin, aiming to improve load time, perceived load time, and interactions after navigation. They tested the experience on a low-end Moto G3, profiled browser activity with Chrome Developer Tools and React DevTools, and used merchant workflows to reorder priorities. The work reduced unnecessary initial work by memoizing repeated date-formatting tasks, deferring the nonessential ImagePicker bundle, and prefetching that component and its data when a merchant hovered over its activator; memoization cut one component’s render time from about 64.7 ms to 0.5 ms. For loading states, the team recommends stable skeletons with static headings and immediately useful controls, such as the Create campaign button, so merchants can act before unrelated data arrives.


### [PWA Tutorial: Turn Your Website Into a Progressive Web App](https://yomu.fyi/post/pwa-tutorial-turn-your-website-into-a-progressive-web-app.md)
- Company: [Heroku](https://yomu.fyi/company/heroku.md)
- Author: Christine Dodrill
- Published: Mar 6, 2019
- Type: Tutorial

Progressive web apps let websites provide app-like experiences, including home-screen installation, offline access, push notifications, and some device hardware APIs, without separate platform-specific code or app-store approval. This tutorial converts an existing site by adding a JSON manifest, linking it from the base HTML, creating an offline page, implementing a service worker, registering that worker, and deploying over HTTPS. The service worker precaches important routes during installation and handles fetches by serving network responses, caching them, or falling back to cached content and offline.html; the example uses the "offline" cache and includes routes such as /blog/, /contact, and /resume. It also covers installation through Safari and Chrome and notes that iOS does not support background sync.


### [Creating Locale](https://yomu.fyi/post/creating-locale.md)
- Company: [Shopify](https://yomu.fyi/company/shopify.md)
- Author: Carys Mills
- Published: Oct 24, 2018
- Type: Explainer

Shopify’s move to support six additional languages exposed a challenge in its admin graphs: condensing numbers without distorting locale-specific conventions. The team needed locale-aware abbreviations for sales, visits, and customer data, because unshortened values could consume axis space. Existing JavaScript libraries either exceeded the requirement or conflicted with Shopify’s stack, while the Intl API lacked implemented number-condensing support. During Hack Days, the developers used abbreviation data from Unicode’s Common Locale Data Repository (CLDR) and currency information from Intl.js to build functions for locale-specific numbers and currencies. Their package handles examples such as Portuguese “3 mil” and non-Western systems including India’s lakhs and crores, and was released as condense-number on npm in July 2018.


### [Introducing Heroku’s React Refetch Operations Console](https://yomu.fyi/post/introducing-heroku-s-react-refetch-operations-console.md)
- Company: [Heroku](https://yomu.fyi/company/heroku.md)
- Author: Ryan Brainard
- Published: Dec 16, 2015
- Type: Announcement

Heroku built an operations console for Private Spaces to provide a bird’s-eye view of the platform and detailed investigation of individual spaces. It is a single-page React application backed by a reverse proxy, but its constituent applications originally used jQuery state, mixins, or classic Flux. The team considered Redux, then rejected a global store for server-rendered data because application state was already represented in the URL. React Refetch instead maps component props to remote requests, injects immutable PromiseState props, and recalculates requests when URL parameters change. Its declarative model removes stores, callbacks, actions, reducers, and switch statements while supporting composed and chained requests, periodic refresh, custom headers and methods, lazy loading, and server writes; the team presents it as a simpler alternative when client-side state need not persist.


[Newer posts](https://yomu.fyi/topic/javascript.md)