# babel Published articles for babel. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Band-Separated Redundant Communication for a Mars-Analog Rover DevFeed: [Band-Separated Redundant Communication for a Mars-Analog Rover]() Original publisher: [Read original article]() Author: Zamiul Rashid, Akid Anis, Tanzim Ahmed, Md. Golam Rabiul Alam, Md. Khalilur Rhaman Published: 2026-11-03T05:00:00Z Content type: article Language: en Sources: [arXiv: Networking]() Topics: [Data transmission](), [mesh networking]() Tags: [babel](), [backhaul](), [backup](), [bandwidth](), [bench](), [bridge](), [camera](), [capacity](), [challenge](), [command](), [communication](), [control](), [cs-ni](), [drive](), [edge](), [failed](), [failure](), [field](), [limit](), [link](), [mars]() ### AI overview The BRACU Mongol-Tori rover separates video and RTK corrections from command traffic to maintain bandwidth and control redundancy. Video and corrections use a 5.2 GHz bridge with a 2.4 GHz backup selected by Babel; commands are sent simultaneously over two sub-gigahertz radios, with the backup copy used when the primary falls silent. Bench tests switched traffic to backup within seconds, while a metric offset kept Babel on a primary losing 10% of packets. In a drive exceeding 1 km, the primary failed at 771 m and the backup carried video and corrections just beyond 1 km, despite line of sight ending about halfway. The field test also revealed that Babel's lost-Hello-based link judgment can retain a primary with a faulty receiver despite the backup reporting twice its capacity, and can flap near range limits. The abstract identifies antenna aiming, link metrics, and logging as lessons from the tests. ### Source excerpt arXiv:2611.02131v1 Announce Type: new Abstract: Teams in the University Rover Challenge (URC) drive their rovers remotely and often out of sight. The organizers name communication failure as the most common reason a team falls short. A rover therefore needs bandwidth for several camera views and a command path that survives the loss of one radio. We describe and field test the communication stack of the BRACU Mongol-Tori rover, which keeps vision and control on separate radios and bands. Video and RTK corrections travel over a 5.2 GHz bridge with a 2.4 GHz backup, and the Babel routing protocol chooses between them. Every command goes out on two sub-gigahertz radios at once, and the rover uses the backup copy only when the primary falls silent. We tested the backhaul on the bench with a power cut and injected packet loss. We also drove the rover more than a kilometer from the base, and line of sight ended about halfway. On the bench, traffic reached the backup within a few seconds. A metric offset kept it on a primary that lost one packet in ten. In the field, the primary failed at 771 m and the backup carried video and corrections to just over a kilometer. The drive also exposed a limit of Babel, which judges a link only by lost Hello messages. It kept traffic on a primary with a faulty receiver, although the backup reported twice the capacity, and it flapped at the edge of range. We close with lessons on antenna aiming, link metrics and logging. ## Babel in Khan Academy's i18n Toolchain DevFeed: [Babel in Khan Academy's i18n Toolchain]() Original publisher: [Read original article]() Author: Khan Academy Published: 2015-06-22T22:00:00Z Content type: article Language: en Sources: [Khan Academy]() Topics: [Babel](), [Internationalization (i18n)](), [ECMAScript](), [React](), [Test-driven development]() Tags: [api](), [architecture](), [argument](), [arguments](), [ast](), [babel](), [build-system](), [callback](), [class](), [classes](), [destructuring](), [engineering](), [es6](), [eslint](), [exports](), [foreach](), [frontend](), [function](), [functions](), [i18n](), [jsx](), [news](), [web-frontend]() ### AI overview Khan Academy's Babel migration preserved its custom i18n workflow by adding a Babel plugin that turns `<$_>` and `<$i18nDoNotTranslate>` JSX tags into function calls. Matching jstransform required retaining generated line numbers and exact whitespace in translation strings; the team compared Gettext `.pot` files from both build paths and used fixtures to isolate whitespace differences. Migration testing also caught two transformer issues: class output still contained `let` until `es6.blockScoping` was added to the whitelist, and Babel's function-name transformation could make a `setInterval` method call itself by shadowing the global. The article reports that Babel maintainers fixed the issues and describes the plugin as a relatively straightforward way to preserve the existing build workflow. ### Source excerpt By Kevin Barabash We've been using ES6 (along with JSX) for sometime at Khan Academy. Right now, we're ... Read more ## i18nize-templates: Internationalization After the Fact DevFeed: [i18nize-templates: Internationalization After the Fact]() Original publisher: [Read original article]() Author: Khan Academy Published: 2015-09-28T22:00:00Z Content type: article Language: en Sources: [Khan Academy]() Topics: [Internationalization (i18n)](), [Localization (l10n)](), [Handlebars]() Tags: [2](), [3](), [about](), [algorithm](), [all](), [all-in](), [allowed](), [also](), [announce](), [argument](), [arguments](), [articles](), [ast](), [automatically](), [babel](), [but](), [collection](), [engineering](), [infrastructure](), [news](), [over](), [templates](), [videos]() ### AI overview Khan Academy built i18nize-templates to retrofit internationalization into a codebase spanning several HTML and template technologies. Its custom lexers identify natural-language runs across raw HTML, Jinja2, and Handlebars, and a rewriter wraps those runs in translation markup while handling template variables and selected embedded strings. It can also extract text or JavaScript from templated HTML. The tool reduced annotation time by over 90% in the authors' experience, but cannot reliably infer whether ambiguous strings are translatable or generate pluralization calls; those cases need manual review. Custom rules can exclude known non-language values. ### Source excerpt By Craig Silverstein Khan Academy started as a collection of videos, but now has over 100,000 pieces of ... Read more ## Rust React Compiler Speeds Up Builds for a 1,036-File React Router Codebase DevFeed: [Rust React Compiler Speeds Up Builds for a 1,036-File React Router Codebase]() Original publisher: [Read original article]() Author: Andrew Patton Published: 2026-09-04T15:29:39Z Content type: article Language: en Sources: [Master.dev Blog RSS Feed]() Topics: [React](), [Compiler](), [Rust](), [build times](), [React Router](), [Babel](), [Vite](), [Continuous integration]() Tags: [babel](), [blog-post](), [build-times](), [ci](), [compiler](), [github-actions](), [just](), [performance](), [react](), [react-router](), [rust](), [toolchain]() ### AI overview A transition to the Rust version of the React Compiler reduced compiler time for a 1,036-file React Router codebase from 14.3 seconds to 0.81 seconds. Overall build time improved from 22.1 seconds to 9.3 seconds, while the newer compiler also addressed prior JavaScript compatibility limitations. ### Source excerpt The transition to the Rust version of the React Compiler for the 1,036-file React Router codebase resulted in a significant speed increase, improving build times from 14.3 seconds to 0.81 seconds. The new compiler addresses previous limitations and ensures consistency across the toolchain, making it easier to manage builds with enhanced performance and capabilities. ## React Native 0.78 - React 19 and more DevFeed: [React Native 0.78 - React 19 and more]() Original publisher: [Read original article]() Author: Vojtech Novak; Shubham Gupta; Fabrizio Cucci; Riccardo Cipolleschi Published: 2025-02-19T00:00:00Z Content type: release Language: en Sources: [React Native Blog]() Topics: [React Native](), [React](), [migration](), [Compiler](), [Android](), [Babel](), [Promise](), [hooks](), [iOS]() Tags: [android](), [async](), [babel](), [compiler](), [engineering](), [hooks](), [ios](), [javascript](), [migration](), [react](), [react-native](), [release]() ### AI overview React Native 0.78 releases with React 19, native Android Vector drawable support, and improved brownfield integration for iOS. The release also describes React 19 features and a simplified process for enabling React Compiler in React Native apps. ### Source excerpt Today we are excited to release React Native 0.78! ## netlab 1.8.3: RIPv2, BGP Route Servers DevFeed: [netlab 1.8.3: RIPv2, BGP Route Servers]() Original publisher: [Read original article]() Published: 2024-06-17T06:01:00Z Content type: release Language: en Sources: [ipSpace]() Topics: [BGP](), [releases](), [Release notes](), [Debian](), [Ubuntu]() Tags: [babel](), [bgp](), [debian](), [installation](), [netlab](), [new-features](), [ospf](), [release-notes](), [route](), [servers](), [ubuntu](), [upgrade]() ### AI overview netlab 1.8.3 adds RIPv2, BGP route server and Link Bandwidth support, and OSPF/BGP validation plugins for several network operating systems. It also updates installation scripts for Ubuntu 24.04 and Debian Bookworm. ### Source excerpt During the ITNOG8 netlab presentation, I jokingly said something along the lines "all that's missing is RIPv2 and Babel." That's no longer true; someone asked me how hard it would be to add RIPv2 to netlab, and I said, "give me a few days 😎" Other new features in netlab release 1.8.3 include support for BGP route servers (and route server clients), BGP Link Bandwidth community, and OSPF/BGP validation plugins for Arista EOS, Cumulus Linux and FRR. We also fixed the installation scripts to work with Ubuntu 24.04 and Debian Bookworm. For more details, read the release notes. Read more ... ## Next.js 15 RC DevFeed: [Next.js 15 RC]() Original publisher: [Read original article]() Author: Zack Tanner Published: 2024-05-23T17:00:00Z Content type: release Language: en Sources: [Next.js]() Topics: [Next.js](), [React](), [Cache](), [Compiler](), [Babel](), [build times]() Tags: [babel](), [build-times](), [caching](), [compiler](), [errors](), [experimental](), [next-js](), [react](), [release]() ### AI overview The Next.js 15 Release Candidate is available for testing ahead of the stable release. It adds React 19 RC support, experimental React Compiler support, improved hydration error displays, changes caching defaults, experimental Partial Prerendering, post-response code execution, Turbopack configuration updates, and stable external package bundling options. ### Source excerpt The Next.js 15 Release Candidate (RC) is now available. This early version allows you to test the latest features before the upcoming stable release. ## All I want for Christmas... DevFeed: [All I want for Christmas...]() Original publisher: [Read original article]() Author: Brent Published: 2023-01-03T00:00:00Z Content type: opinion Language: en Sources: [Stitcher]() Topics: [PHP](), [Programming language](), [JavaScript](), [Babel](), [browser](), [C]() Tags: [babel](), [browser](), [javascript](), [php](), [programming-language]() ### AI overview An opinion piece framed as a Christmas wish list for PHP discusses desired language improvements before turning to JavaScript's history and the development of tools and alternative languages that compile or transpile code for browser use. The supplied text ends mid-sentence, so the full conclusion is unavailable. ### Source excerpt Read the full post on https://stitcher.io/blog/all-i-want-for-christmas ## How PostHog built an app server (from MVP to billions of events) DevFeed: [How PostHog built an app server (from MVP to billions of events)]() Original publisher: [Read original article]() Author: Marius Andra Published: 2022-11-21T00:00:00Z Content type: article Language: en Sources: [PostHog]() Topics: [Tool](), [logstash](), [scheduling](), [cache-invalidation]() Tags: [app](), [apps](), [attacks](), [babel](), [bigquery](), [building](), [clickhouse](), [cloud](), [code](), [community](), [compute](), [config](), [configuration](), [connect](), [dev-tools](), [events](), [mvp](), [products](), [server](), [tools]() ### AI overview PostHog's app platform grew from a three-day Python prototype into a Node and TypeScript service integrated with its event pipeline. Python apps were abandoned because dependency conflicts were hard to manage; Node with Celery let app code process queued events, and the pipeline later moved to Kafka, Redis, and worker threads managed by Piscina. Apps expose functions for event processing, scheduled jobs, and exports, with configuration in `plugin.json`. For sandboxing, PostHog chose `vm2` for its proxy support after `isolated-vm` proved impractical for enabling fetch; because `vm2` lacked CPU and memory limits, PostHog manually reviews Cloud apps while self-hosted users can run arbitrary apps. Other safeguards include an allowlist of libraries, loop timeouts, retries and dead-letter handling, and app testing and documentation. The article describes these systems and tradeoffs in the supplied excerpt; it does not establish that VM isolation eliminates risk. ### Source excerpt PostHog's mission is to increase the number of successful products in the world. To achieve it, we're building a comprehensive suite of dev tools... ## Exporting Node Modules in 2022 DevFeed: [Exporting Node Modules in 2022]() Original publisher: [Read original article]() Author: David Bushong Published: 2022-09-01T20:01:47Z Content type: tutorial Language: en Sources: [Groupon Engineering]() Topics: [CommonJS](), [npm](), [ECMAScript](), [TypeScript](), [Webpack](), [import]() Tags: [babel](), [commonjs](), [compatibility](), [import](), [javascript](), [node](), [npm](), [typescript](), [webpack]() ### AI overview This tutorial explains CommonJS and native ES Module exports in Node.js, including how modules can be imported across module systems. It also compares the output of Babel, Webpack, and TypeScript with native Node.js module behavior, highlighting compatibility concerns and TypeScript's non-standard export syntax. ### Source excerpt Groupon maintains literally hundreds of NPM modules, both open source and internal. Many of these are consumed by our custom NodeJS-based middleware web layer we call "The Interaction Tier" (itself a topic for another post someday). As folks write new modules, a common question is "what's the best way to export things from our published modules to maximize compatibility?" -- and that is the topic of this post. First, some background and history: Flavors of exported modulesCommonJS in Node In the beginning, there was CommonJS: Here are 3 sample files with exports: // export1.js - exporting individual properties w/ CommonJS 'use strict';function foo() { } exports.foo = foo; exports.bar = 42;// export2.js - exporting a single object w/ CommonJS 'use strict';function baz() { } const garply = 88; module.exports = { baz }; // dynamically (conditionally!) exported! if (Math.random() > 0.5) module.exports.garply = garply;// export3.js - exporting a bare function w/ CommonJS 'use strict';function quux() { } module.exports = quux;// sometimes there are extra properties added to the bare function quux.yadda = 42; Those CommonJS exports can be imported either into other CommonJS files or into ES Module (more on that below) files: // import.js - importing CommonJS modules into a CJS file 'use strict';const { foo, bar } = require('./export1'); const { baz, garply } = require('./export2'); if (Math.random > 0.9) { // can also dynamically decide when to import const quux = require('./export3'); // can poke into properties tacked onto functions const { yadda } = require('./export3'); }// import.mjs - importing CommonJS modules into an ESM file // node is willing to turn exported objects into named exports import { foo, bar } from './export1.js'; import { baz, garply } from './export2.js'; import quux from './export3.js'; // cannot access added property "yadda" directly; hence: const { yadda } = quux; You can read more elsewhere, but the key features are: The module files are synchron ## Next.js 11.1 DevFeed: [Next.js 11.1]() Original publisher: [Read original article]() Author: Tobias Koppers Published: 2021-08-11T16:00:00Z Content type: release Language: en Sources: [Next.js]() Topics: [Next.js](), [Security](), [build performance](), [Rust](), [Babel](), [Code](), [JavaScript](), [TypeScript](), [ESLint](), [HTTP]() Tags: [babel](), [build-performance](), [eslint](), [http](), [javascript](), [next-js](), [performance](), [phishing](), [rust](), [security](), [typescript](), [vulnerabilities]() ### AI overview Next.js 11.1 improves build performance and introduces an important security patch for an open redirect. The release adds experimental ES Modules support, Rust-based SWC tooling, faster data fetching during pre-rendering, faster source maps, and ESLint integration. ### Source excerpt Next.js 11.1 introduces an important security patch, ES Modules support, performance improvements, Rust-based tooling, 2x faster data fetching when pre-rendering, and more! ## Define function overload types with TypeScript DevFeed: [Define function overload types with TypeScript]() Original publisher: [Read original article]() Published: 2021-01-12T00:00:00Z Content type: tutorial Language: en Sources: [Kent C. Dodds Blog]() Topics: [TypeScript](), [function](), [Babel](), [Code generation](), [JavaScript]() Tags: [babel](), [code](), [compilation](), [functions](), [javascript](), [typescript]() ### AI overview A tutorial on typing overloaded functions in TypeScript, including an API that accepts a callback or returns a promise when no callback is provided. It also explains how to type a Babel macro whose compile-time implementation differs from the function interface presented to developers. ### Source excerpt Have your JS expressiveness and type it too. ## Introducing the New JSX Transform DevFeed: [Introducing the New JSX Transform]() Original publisher: [Read original article]() Published: 2020-09-22T00:00:00Z Content type: release Language: en Sources: [React]() Topics: [React](), [Babel]() Tags: [babel](), [compiler](), [javascript](), [jsx](), [next-js](), [react](), [typescript]() ### AI overview The new JSX transform compiles JSX into calls imported automatically from `react/jsx-runtime`, so JSX no longer requires `React` in scope; Hooks and other React exports still need importing. It preserves existing JSX and leaves `React.createElement` and the classic transform supported. Adoption is optional and may slightly reduce bundle size depending on setup. It requires a compatible React version and compiler: React 17 RC or the backported 16.14.0, 15.7.0, or 0.14.10; Babel 7.9+, TypeScript 4.1+, or Flow 0.126+. Babel's automatic runtime must be enabled explicitly in the described versions; Babel 8 makes it the default. Create React App 4+, Next.js 9.5.3+, and Gatsby 2.24.5+ use it with compatible React versions. For other libraries, Babel's `importSource` can target a library that supplies the needed runtime entry points, or users can retain the classic transform. ### Source excerpt This blog site has been archived. Go to react.dev/blog to see the recent posts. Although React 17 doesn't contain new features, it will provide support for a new version of the JSX transform. In this post, we will describe what it is and how to try it. What's a JSX Transform? Browsers don't understand JSX out of the box, so most React users rely on a compiler like Babel or TypeScript to transform JSX code into regular JavaScript. Many preconfigured toolkits like Create React App or Next.js also include a JSX transform under the hood. Together with the React 17 release, we've wanted to make a few improvements to the JSX transform, but we didn't want to break existing setups. This is why we worked with Babel to offer a new, rewritten version of the JSX transform for people who would like to upgrade. Upgrading to the new transform is completely optional, but it has a few benefits: With the new transform, you can use JSX without importing React. Depending on your setup, its compiled output may slightly improve the bundle size. It will enable future improvements that reduce the number of concepts you need to learn React. This upgrade will not change the JSX syntax and is not required. The old JSX transform will keep working as usual, and there are no plans to remove the support for it. React 17 RC already includes support for the new transform, so go give it a try! To make it easier to adopt, we've also backported its support to React 16.14.0, React 15.7.0, and React 0.14.10. You can find the upgrade instructions for different tools below. Now let's take a closer look at the differences between the old and the new transform. What's Different in the New Transform? When you use JSX, the compiler transforms it into React function calls that the browser can understand. The old JSX transform turned JSX into React.createElement(...) calls. For example, let's say your source code looks like this: import React from 'react'; function App() { return

Hello World

; } Under t ## GraphQL the Simple Way, or: Don't Use Apollo DevFeed: [GraphQL the Simple Way, or: Don't Use Apollo]() Original publisher: [Read original article]() Author: HTTP Toolkit; Tim Perry Published: 2020-09-02T12:00:00Z Content type: opinion Language: en Sources: [HTTP Toolkit]() Topics: [GraphQL](), [apollo-server](), [npm](), [npm packages](), [apollo-client]() Tags: [abstraction](), [api](), [apis](), [apollo](), [babel](), [caching](), [cloud](), [code-generation](), [graphql](), [javascript](), [npm](), [protobuf](), [relay](), [server]() ### AI overview The author argues that a new GraphQL API should start without Apollo because its ecosystem adds substantial complexity before it provides useful query handling. The excerpt cites 169 Apollo npm packages and says the Getting Started server package brings in reporting and tracing tied to Apollo's cloud service, custom caching, transport-link and data-source abstractions, and many dependencies: 33 direct and 179 total packages, about 35 MB of JavaScript. The passage ends before describing the non-Apollo package or the author's recommended approach, so those practical steps are not available here. ### Source excerpt The fundamentals of GraphQL are remarkably simple. Nonetheless, a busy hype train & rocket-speed ecosystem means that building a GraphQL API in the real world can be a tricky balancing act of piling complex interacting components a mile high, none of which anybody fully understands. About 90% of this pile is built & heavily promoted by a VC-funded company called Apollo. Apollo describe themselves as a "data graph platform" who've built the self-described "industry-standard GraphQL implementation". Unfortunately, while I'm sure their platform is great, if you're setting up a fresh GraphQL API you should not start with Apollo. It certainly might be useful later, but on day 1 it's a trap, and you'll make your life simpler and easier if you avoid it entirely. Let's talk about why that is, what can go wrong, and what you should do instead. The Problem with Apollo In practice, "industry-standard GraphQL implementation" means 169 separate npm packages, including: 44 different server packages and apollo-server-* subpackages. 7 different GraphQL 'transport layers', plus a long list of link layer extensions that build on top of this. 8 code generation packages 5 different create-* project setup packages 3 different GraphQL Babel plugins (plus a Relay un-Babel plugin, so you can avoid using Babel for some specific cases). Much much more... The Apollo packages required to install the base apollo-server package suggested in their Getting Started guide include the "Apollo Studio" (née Apollo Graph Manager, néeée Apollo Engine) reporting engine, which integrates your server with their cloud service, plus extra protobuf definitions on top of that to reporting to the cloud service with Protobuf. It includes request tracing for their own custom tracing format, multiple different custom caching packages, an abstraction layer that powers the many available transport link layers, an abstraction layer for connecting external data sources... In total, installing apollo-server installs actuall ## How I structure Express apps DevFeed: [How I structure Express apps]() Original publisher: [Read original article]() Published: 2020-07-13T00:00:00Z Content type: tutorial Language: en Sources: [Kent C. Dodds Blog]() Topics: [Express](), [Back end](), [software-development](), [Babel](), [JavaScript](), [middleware](), [builds](), [Developer Tools]() Tags: [babel](), [backends](), [builds](), [dev](), [dev-tools](), [express](), [javascript](), [middleware]() ### AI overview A practical guide to structuring medium-sized Express applications running on Node.js. It covers backend layout, middleware, logging, Babel compilation, development scripts, watch mode, and production build behavior. ### Source excerpt The build/dev tools and scripts I use for Node backends. ## Letting tools make choices DevFeed: [Letting tools make choices]() Original publisher: [Read original article]() Published: 2020-01-15T00:00:00Z Content type: opinion Language: en Sources: [Jack Franklin]() Topics: [Developer experience](), [Tool](), [tech radar](), [Learning](), [Test-driven development]() Tags: [2020](), [acceptance-tests](), [application](), [approach](), [automatic](), [babel](), [beginners](), [bug](), [configure](), [control](), [engineering](), [environment](), [set](), [side-project](), [software](), [sprint](), [technical](), [technologies](), [time](), [tools]() ### AI overview The author argues that tools with sensible defaults can reduce setup work and leave more time for building the application. Earlier efforts to perfect configurations, coordinate tools, and tune ESLint consumed hours and sometimes stalled side projects. They now use fewer ESLint rules and favor opinionated tools such as Prettier, Parcel, and Jest, while acknowledging that edge cases may require more control. For beginners learning React, the author recommends starting with create-react-app so they can focus on React before taking on its underlying tooling. They retain strong technical opinions but advocate holding them lightly and staying open to discussion. ### Source excerpt In my first post of the year about technical choices I'm making in 2020 I finished with a point about letting tools make choices for you: I've become a fan of putting more of that burden onto the technologies I'm choosing such that I can focus in on the actual application. I would be surprised if the tools that catch my eye in 2020 aren't ones that follow this pattern. This has been a trend for me and my work over the last year or so and I wanted to use this post to expand on it. Holding onto control I would never have written a post like this a few years ago. One of my main decisions when deciding what tools to use was how much control I had over the entire surface area of the tool and how much I could customise it to my every need. My logic at the time was that if I could configure my environment and tools to precisely what I wanted, I would create this zen-like application that was set up to enable me to be the most productive I could be. Time spent configuring My approach wasn't correct because of two things that are true of all software: Software is never finished. Software is never perfect. I could never get to this perfect setup of tools because there would always be something left to do! Anyone who has worked on an engineering team knows this; teams create sprint boards and backlogs and those backlogs inevitably end up with far more items in than your team could ever achieve. I remember sitting down one evening after work to focus on a side project and losing the best part of the evening trying to get two different tools that I'd chosen to use playing nicely alongside each other. I finished for the night and realised that I'd made no progress. I didn't even need those tools to work together to allow me to make progress, but I was so concerned about having the perfect setup that I forgot about building the actual application. Once I had everything playing nicely, one of the tools would have an update which broke something and I'd repeat the process all over a ## Open Source? trivago. DevFeed: [Open Source? trivago.]() Original publisher: [Read original article]() Author: Patrick Gotthardt Follow Published: 2019-11-20T00:00:00Z Content type: release Language: en Sources: [Trivago]() Topics: [Open Source](), [Learning](), [open source maintenance](), [Web Development]() Tags: [2019](), [babel](), [community](), [conference](), [diversity-and-inclusion](), [engineering-culture](), [investment](), [learning](), [open-source](), [webpack]() ### AI overview trivago says it will continue sponsoring Webpack and Babel and announced its first "Open Source? Trivago." conference for December 2, 2019, at its Düsseldorf campus. The event is framed as both a celebration of that investment and a learning opportunity. Its preliminary agenda includes Webpack's history and future, code maintenance, Melody, live coding a Webpack 5 localization plugin, Q&A, and audience lightning talks. Twenty tickets are reserved for external guests, with free lunch, coffee, and drinks. There is no entry fee; attendees are asked to donate EUR 10-EUR 100 to osdiversity, WomenWhoCode, and BIPOCIT through Eventbrite checkout, and trivago says it will match donations. The schedule was still being finalized. ### Source excerpt When we announced our renewal of our investment in Webpack and Babel last year, I found a tweet from Guillermo Rauch, CEO of zeit.co, one of the most int... ## Using Tailwind CSS with Gatsby, React & Emotion Styled Components DevFeed: [Using Tailwind CSS with Gatsby, React & Emotion Styled Components]() Original publisher: [Read original article]() Author: andrew@nystudio107.com (Andrew Welch) Published: 2019-10-20T14:08:00Z Content type: tutorial Language: en Sources: [nystudio107]() Topics: [Tailwind CSS](), [gatsby](), [React](), [styled-components](), [CSS](), [PostCSS](), [Babel](), [Web Development]() Tags: [babel](), [components](), [css](), [css-in-js](), [emotion](), [gatsby](), [insights](), [learn](), [postcss](), [project](), [react](), [styled](), [styled-components](), [tailwind](), [tailwind-css](), [utility-first]() ### AI overview A tutorial on combining Tailwind CSS with Gatsby and React through Emotion Styled Components. It explains a hybrid setup using twin.macro for component-level Tailwind styles and PostCSS for Tailwind's base and global styles. ### Source excerpt Learn how to use the utility-first Tailwind CSS with Emotion "CSS-in-JS" Styled Components in a Gatsby JS + React project. ## Saving manual work with babel-plugin-macros DevFeed: [Saving manual work with babel-plugin-macros]() Original publisher: [Read original article]() Published: 2019-07-09T00:00:00Z Content type: tutorial Language: en Sources: [Jack Franklin]() Topics: [Babel](), [import](), [Image]() Tags: [2](), [all](), [allows](), [babel](), [browser](), [browsers](), [but](), [can](), [categories](), [code](), [compilation](), [compile](), [computer](), [easier](), [easily](), [macros](), [plugin](), [saving](), [with](), [work]() ### AI overview Babel macros run during bundling, so they can calculate values or generate imports before code reaches the browser. The author uses `import-all.macro` to import product subcategory images with Webpack, which resolves each image to its built URL. Because images are nested by category, the generated file paths are transformed into a map keyed by filename slug; a React component can then look up an image by subcategory slug and log missing images. This avoids hard-coding image paths or maintaining more than 50 individual imports while keeping Webpack's asset handling. The workflow depends on image names matching the slugs and requires installing `babel-plugin-macros` and adding `macros` to Babel's plugin list. The excerpt describes one project's experience and does not cover potential edge cases. ### Source excerpt babel-plugin-macros is a project that I've followed with interest even though I'd never had a chance to use it. Today that changed and I wanted to share my use case and my very positive experience using it. What is babel-plugin-macros? The key feature of a Babel Macro is that they run at compile time. Rather than writing JavaScript that gets bundled and executed in the browser, writing JavaScript via babel-plugin-macros lets you run code at compile time. This means that the code is executed on your computer when you bundle, not by your users when they visit your website. Most commonly these macros will either calculate some value (one that you can and need at compilation time, not at runtime in the browser), or generate some other code that runs in the browser. As an example, once configured (we'll get to that in a moment), you can use preval.macro to easily evaluate some code at compile time: import preval from 'preval.macro' const twoPlusTwo = preval`module.exports = 2 + 2` This will be executed at compilation time, and the code that ships in your bundle looks like this: const twoPlusTwo = 4 But, why is this useful? The example above is ultimately not that useful - I think we all trust browsers to be able to add two and two at runtime. Today I came across a problem at work that I solved with a macro which made my job much easier. At Thread we sell clothes. Part of the site allows users to explore our entire product listing by filtering it down to what they are after. One of the things they can filter by is "sub category": this is specific types of clothes within a broader category. For example, for the category "Shirts", we have sub categories of "Plain shirts", "Formal shirts", "Denim shirts", and so on. The feature I'm working on adds an image to each of these sub categories in the UI so that people who might not have heard of the terminology can still recognise the category (before working in fashion I had no idea what a "chambray" shirt was!). One of the desig ## Maintainer spotlight: Henry Zhu DevFeed: [Maintainer spotlight: Henry Zhu]() Original publisher: [Read original article]() Author: Devon Zuegel Published: 2019-06-14T16:16:12Z Content type: article Language: en Sources: [GitHub Blog]() Topics: [open source maintenance](), [open source communities](), [Transpilers]() Tags: [babel](), [burnout](), [insights](), [interviews](), [news-insights](), [sponsorship](), [the-library]() ### AI overview Babel maintainer Henry Zhu discusses how community funding enabled him to work on open source full time. He describes maintenance as work that extends beyond code to prioritization, governance, communication, and preventing burnout. Zhu explains how GitHub Sponsors complements his existing funding platforms and argues that sponsorship should support a maintainer's broader stewardship of a project. ### Source excerpt We're sharing interviews from several open source contributors about their projects, challenges, and what a GitHub sponsorship means to them. This week, read about Henry Zhu. ## Presenting babel-plugin-cloudinary DevFeed: [Presenting babel-plugin-cloudinary]() Original publisher: [Read original article]() Author: Daniel Caldas Software Engineer; Goodguydaniel Com Published: 2019-04-02T00:00:00Z Content type: article Language: en Sources: [Trivago]() Topics: [Babel](), [Image](), [Open Source](), [Web app]() Tags: [babel](), [cloudinary](), [frontend](), [open-source](), [open-source-community](), [plugin](), [source]() ### AI overview trivago's babel-plugin-cloudinary generates Cloudinary image URLs at build time using cloudinary-core, avoiding the need to ship the Cloudinary SDK for URL construction while retaining runtime-dynamic values. When it finds __buildCloudinaryUrl, the plugin substitutes placeholders for dynamic expressions, asks cloudinary-core to build the partial URL, then restores those expressions in a JavaScript template literal. A runtime .cloudinaryrc.json configures Cloudinary parameters such as the cloud name and HTTPS URLs. The article contrasts this with cloudinary-microurl, which does not support all Cloudinary features, and runtime SDK use, which it estimates adds about 20 KB minified and gzipped; trivago measured cloudinary-core at 14.19 KB in its vendor bundle. The authors say build-time compilation reduces JavaScript footprint and provides URLs compliant with the Cloudinary API. ### Source excerpt I'm happy to let you know that we are releasing trivago/babel-plugin-cloudinary to the open source community! Throughout this... ## React Hooks: Array Destructuring Fundamentals DevFeed: [React Hooks: Array Destructuring Fundamentals]() Original publisher: [Read original article]() Published: 2018-12-31T00:00:00Z Content type: tutorial Language: en Sources: [Kent C. Dodds Blog]() Topics: [React](), [destructuring](), [JavaScript](), [Babel](), [ECMAScript](), [TypeScript](), [browser]() Tags: [babel](), [destructuring](), [es6](), [fundamentals](), [javascript](), [react](), [react-hooks](), [syntax]() ### AI overview A tutorial explains how React's useState hook relies on JavaScript array destructuring. It introduces destructuring as ES6 syntax, discusses syntactic sugar, and uses AST Explorer, Babel, and TypeScript to examine how the syntax works and is compiled for older browsers. ### Source excerpt React's upcoming useState hook relies on array destructuring, let's dive in and see how that feature works. ## React/JSX as a server-side templating language DevFeed: [React/JSX as a server-side templating language]() Original publisher: [Read original article]() Published: 2018-10-01T00:00:00Z Content type: tutorial Language: en Sources: [Kent C. Dodds Blog]() Topics: [React](), [Web Development](), [HTML](), [Back end](), [Front end](), [Babel]() Tags: [babel](), [backend](), [components](), [frontend](), [gotchas](), [html](), [maintenance](), [middleware](), [modules](), [react](), [rendering](), [templating]() ### AI overview This tutorial describes migrating PayPal's marketing pages from a custom template system to React function components and JSX for both server-side and client-side rendering. It explains the motivation to reduce maintenance overhead and discusses integration challenges involving generated HTML, middleware, Babel configuration, and a polyfill service. ### Source excerpt Using React function components to render your website's skeleton index.html ## The Idle Until Urgent Strategy for Improving First Input Delay DevFeed: [The Idle Until Urgent Strategy for Improving First Input Delay]() Original publisher: [Read original article]() Published: 2018-09-20T07:25:36Z Content type: tutorial Language: en Sources: [Philip Walton]() Topics: [Benchmark](), [Web Development](), [JavaScript](), [Webpack](), [Babel]() Tags: [analytics](), [babel](), [blog](), [browser](), [cpu](), [javascript](), [main-thread](), [network](), [performance](), [performance-metrics](), [trace](), [webpack]() ### AI overview This tutorial examines a blog's unexpectedly high first input delay and explains how to diagnose the cause with performance traces. It introduces the idle until urgent strategy as a way to improve responsiveness without removing site functionality. ### Source excerpt A few weeks ago I was looking at some of the performance metrics for my site. Specifically, I wanted to see how I was doing on our newest metric, first input delay (FID). My site is just a blog (and doesn't run much JavaScript), so I expected to see pretty good results. [Next page]()