# 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. ## 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: tutorial Language: en Sources: [Khan Academy]() Topics: [Babel](), [Internationalization (i18n)](), [toolchain](), [es6](), [JavaScript](), [Parser](), [Universal Syntax Tree.](), [Open Source]() Tags: [api](), [architecture](), [babel](), [build](), [build-system](), [code](), [engineering](), [es6](), [eslint](), [frontend](), [javascript](), [news](), [plugin](), [source](), [structure](), [syntax](), [tests](), [toolchain](), [types](), [web-frontend](), [workflow]() ### AI overview Khan Academy describes switching its ES6 and JSX frontend compilation from jstransform to Babel. The article explains a custom Babel plugin for preserving the project's internationalization behavior and discusses matching generated output, line numbers, whitespace, and the existing build chain. ### 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: release Language: en Sources: [Khan Academy]() Topics: [Internationalization (i18n)](), [Localization (l10n)](), [Open Source](), [Python](), [Handlebars](), [HTML](), [Library](), [Code](), [JavaScript](), [Babel]() Tags: [babel](), [code](), [engineering](), [html](), [infrastructure](), [javascript](), [language](), [languages](), [library](), [news](), [open-source](), [programming](), [python]() ### AI overview Khan Academy describes retrofitting its English-only codebase for internationalization and localization across several HTML-rendering technologies. It introduces i18nize-templates, an open-source Python module that finds natural-language text in HTML and templates and marks it as i18n-aware. The tool supports raw HTML, jinja2, and Handlebars templates and reportedly reduces template annotation time by over 90%. ### Source excerpt By Craig Silverstein Khan Academy started as a collection of videos, but now has over 100,000 pieces of ... Read more ## Nativewind: Speeding up Styling in React Native DevFeed: [Nativewind: Speeding up Styling in React Native]() Original publisher: [Read original article]() Author: Jack Rosa Published: 2025-11-13T14:00:00Z Content type: tutorial Language: en Sources: [Hashrocket]() Topics: [React Native](), [Tailwind CSS](), [Mobile](), [Expo](), [Babel](), [Prettier]() Tags: [babel](), [css](), [init](), [install](), [mobile](), [react](), [react-native](), [tailwind](), [tailwind-css](), [tailwindcss]() ### AI overview A tutorial on using NativeWind to style React Native applications with Tailwind CSS classes. It explains NativeWind's runtime or Babel-plugin compile-time translation into React Native styles, and covers setup with Expo, Tailwind configuration, a global CSS file, and Babel. ### Source excerpt How Nativewind can speed up your React Native Development If you're anything like me, after working on a few web projects with Tailwind, it can feel like a drag to return to stacks that use other styling libraries. Tailwind has become, for myself, and many other developers, a standard styling paradigm. When starting my most recent React Native project, I was relieved to find out that NativeWind exists. NativeWind is exactly what is sounds like: Tailwind Classes in React Native. I can attest to the breeziness of writing an entire native app without a single call to StyleSheet.create. It's Familiar Nativewind takes the familiar classes of Tailwind CSS directly to your React Native components. Virtually every* class from Tailwind CSS can be used the exact same way on your mobile app (and the web), and the development results end up being faster iteration, less translating, and components that feel more readable and maintainable. Let's look at how to set it up NativeWind translates Tailwind class names into React Native styles at runtime or compile-time, if you use the Babel plugin. You end up with the the same composable mindset of Tailwind, but the output is just React Native styles. The setup is simple enough, for my latest project we used expo: npx expo install nativewind react-native-reanimated@~3.17.4 react-native-safe-area-context@5.4.0 npx expo install --dev tailwindcss@^3.4.17 prettier-plugin-tailwindcss@^0.5.11 Now to generate a tailwind config, run: npx tailwindcss init Be sure to include the path to your components in the generated tailwind.config.js file /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./App.tsx", "./components/**/*.{js,jsx,ts,tsx}"], presets: [require("nativewind/preset")], theme: { extend: {}, }, plugins: [], } Next create your global.css file with tailwind's directives @tailwind base; @tailwind components; @tailwind utilities; Then, enable the Babel plugin in babel.config.js: module.exports = function (api) { api ## 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.net blog]() 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 Blog]() Topics: [Next.js](), [React](), [Caching](), [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. ## 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 -- Medium]() 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 Blog]() 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! ## Introducing the New JSX Transform DevFeed: [Introducing the New JSX Transform]() Original publisher: [Read original article]() Published: 2020-09-22T00:00:00Z Content type: article Language: en Sources: [React]() Topics: [React](), [Babel](), [JavaScript](), [TypeScript]() Tags: [babel](), [compiler](), [javascript](), [react](), [typescript](), [upgrade]() ### AI overview This React 17 article introduces a rewritten JSX transform supported by Babel and TypeScript. The optional upgrade allows JSX without importing React, may slightly reduce compiled bundle size depending on the setup, and preserves the existing JSX syntax and older 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 ## Building a GraphQL Server Without Apollo DevFeed: [Building a GraphQL Server Without 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 packages]() Tags: [apis](), [apollo](), [babel](), [graphql](), [javascript](), [npm-packages]() ### AI overview This opinion article argues that developers should avoid starting a new GraphQL API with Apollo because its ecosystem introduces substantial package and infrastructure complexity. It discusses Apollo's dependencies, transport layers, code generation, reporting, tracing, caching, and cloud integrations. ### 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 ## trivago renews investment in Webpack and Babel and announces an Open Source conference DevFeed: [trivago renews investment in Webpack and Babel and announces an Open Source conference]() Original publisher: [Read original article]() Author: Patrick Gotthardt Follow Published: 2019-11-20T00:00:00Z Content type: article Language: en Sources: [Trivago]() Topics: [Open Source](), [Babel](), [Webpack](), [modern web development]() Tags: [babel](), [conference](), [engineering-culture](), [modern-web-development](), [open-source](), [talks](), [web-development](), [webpack]() ### AI overview trivago announces that it will continue investing in Babel and Webpack for another year and will host the "Open Source? Trivago." conference in Düsseldorf on December 2, 2019. ### 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 | Articles on modern web development.]() 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. ## 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: release Language: en Sources: [Trivago]() Topics: [Babel](), [Open Source](), [Image processing](), [JavaScript](), [Front end](), [web applications]() Tags: [babel](), [cloudinary](), [frontend](), [image-processing](), [javascript](), [open-source](), [plugin](), [sdk](), [web-applications]() ### AI overview trivago presents trivago/babel-plugin-cloudinary, an open-source Babel plugin that compiles Cloudinary URL transformations at build time. The article explains its motivation, development history, and approach for avoiding the need to ship the Cloudinary SDK in the client bundle. ### Source excerpt I'm happy to let you know that we are releasing trivago/babel-plugin-cloudinary to the open source community! Throughout this... ## JavaScript Workshop with Kyle Simpson DevFeed: [JavaScript Workshop with Kyle Simpson]() Original publisher: [Read original article]() Author: Daw Chih Liou Published: 2018-10-15T00:00:00Z Content type: article Language: en Sources: [Trivago]() Topics: [JavaScript](), [Functional programming](), [frontend development](), [Programming]() Tags: [article](), [babel](), [engineering-culture](), [frontend](), [frontend-development](), [functional-programming](), [javascript](), [reactive-programming](), [webpack](), [workshop]() ### AI overview A recap of a five-day JavaScript workshop led by Kyle Simpson at trivago. The workshop covered JavaScript foundations, recent language features, asynchronous programming, functional programming, scope, hoisting, closures, compilation, and execution. The article also discusses applying functional programming and empathetic communication in frontend development. ### Source excerpt It has been a couple of months since Kyle, author of the "You Don't Know JS" series, visited our trivago headquarters a... ## 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: [benchmarking](), [modern 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. ## trivago Offers Three Community Spots in Kyle Simpson's Five-Day JavaScript Workshop DevFeed: [trivago Offers Three Community Spots in Kyle Simpson's Five-Day JavaScript Workshop]() Original publisher: [Read original article]() Author: Tom Bartel Published: 2018-07-23T00:00:00Z Content type: news Language: en Sources: [Trivago]() Topics: [JavaScript](), [Babel](), [Webpack](), [Pull Request](), [Open Source](), [GitHub]() Tags: [babel](), [competition](), [contributors](), [engineering-culture](), [github](), [javascript](), [open-source](), [pull-request](), [webpack](), [workshop]() ### AI overview trivago announced three community spots in Kyle Simpson's five-day JavaScript workshop. JavaScript enthusiasts can enter by submitting a useful pull request to either Babel or webpack and then registering through the sign-up form. ### Source excerpt trivago is giving away 3 free spots in a workshop given by renowned author, instructor, and speaker Kyle Simpson (a.k.a. @getify). To be eligible, you only have to do two things... ## trivago Expands Sponsorships for webpack and Babel DevFeed: [trivago Expands Sponsorships for webpack and Babel]() Original publisher: [Read original article]() Author: Patrick Gotthardt Follow Published: 2018-07-17T00:00:00Z Content type: article Language: en Sources: [Trivago]() Topics: [Babel](), [Open Source](), [Webpack](), [JavaScript](), [Development]() Tags: [babel](), [collaboration](), [community](), [developers](), [development](), [ecosystem](), [frontend](), [javascript](), [open-source](), [webpack]() ### AI overview trivago announces expanded sponsorship of open source projects, continuing its webpack sponsorship and beginning sponsorship of the Babel community through Open Collective. ### Source excerpt trivago believes that a sustainable Open Source ecosystem benefits developers, companies, and users alike. ## Setting up Webpack, Babel and React from scratch, revisited DevFeed: [Setting up Webpack, Babel and React from scratch, revisited]() Original publisher: [Read original article]() Author: Stanko Published: 2017-10-07T00:00:00Z Content type: tutorial Language: en Sources: [Stanko Tadić]() Topics: [Webpack](), [Babel](), [React](), [JavaScript](), [Development]() Tags: [babel](), [javascript](), [react](), [tutorial](), [webpack]() ### AI overview A step-by-step tutorial for setting up React projects from scratch with Webpack and Babel. It explains the tools, creates a minimal development setup, and begins configuring the project using npm and JavaScript. ### Source excerpt Last summer I wrote this post which quickly became my most popular one to day. With webpack 2 and 3 it got outdated, so I decided to write a new one. Before we start # I'll assume you have a basic knowledge of unix terminal, npm and JavaScript. You did some React, but now you want to level up and learn how setup React projects from scratch. This is detailed step-by-step guide, as I'll try to explain the whole process. If you just want code to play with, check this repository I created for this tutorial. Every time I talk about changing a source file, I'll paste complete file's content beneath it. You can look for ADDED IN THIS STEP comments which point out specific things that changed. Please note that this tutorial is written on macOS using node 8.5.0, but it should work on Linux and Windows without any major issues. If you find something that is not working, please provide a correction in the comments below. What are we trying to build? # Simple development setup for React applications using Webpack and Babel. But my main goal is for people to better understand these tools and how to use them. Setup that we are going to create is minimal, but it follows the best practices and gives you a solid ground to start from. Who am I and why should you listen to me? # Well, I'm a principal developer at Work&Co. I have a lot of experience on production level React projects, for clients like Twitter, Mastercard, Aeromexico, Hampton Creek... Marvin boilerplateWe have big plans for Marvin in the near future. is my creation as well, and what I'm trying to teach you is directly based on my experience on these projects. Init # Create a new folder, and package.json file in it, with the following content: { "name": "webpack-babel-react-revisited" } Of course you can replace "webpack-babel-react-revisited" with your project name. - package.json Show file structure after this stepHide file structure after this step Webpack # We'll start with installing webpack for module bundling. It ## Deploying ES2015+ Code in Production Today DevFeed: [Deploying ES2015+ Code in Production Today]() Original publisher: [Read original article]() Published: 2017-09-13T19:23:12Z Content type: tutorial Language: en Sources: [Philip Walton]() Topics: [JavaScript](), [es2015](), [browsers](), [Babel](), [Web Development]() Tags: [apis](), [async](), [await](), [babel](), [browsers](), [classes](), [es2015](), [javascript](), [webpack]() ### AI overview The article explains how to deploy ES2015+ JavaScript to production by serving a modern bundle to browsers that support the relevant syntax and retaining an ES5 fallback for older browsers. It discusses feature detection, polyfills, module bundlers, and Babel configuration. ### Source excerpt Most web developers I talk to these days love writing JavaScript with all the newest language features--async/await, classes, arrow functions, etc. However, despite the fact that all modern browsers can run ES2015+ code and natively support the features I just mentioned, most developers still transpile their code to ES5 and bundle it with polyfills to accommodate the small percentage of users still on older browsers. ## How to test Vue.js plugins and extensions DevFeed: [How to test Vue.js plugins and extensions]() Original publisher: [Read original article]() Author: Chris Hager Published: 2017-05-31T00:00:00Z Content type: tutorial Language: en Sources: [Chris Hager]() Topics: [Vue.js](), [Testing](), [Extension](), [Jest](), [JavaScript](), [Babel]() Tags: [babel](), [boilerplate](), [extensions](), [how-to](), [javascript](), [jest](), [plugins](), [python](), [syntax-highlighting](), [test](), [testing](), [tests]() ### AI overview A tutorial on testing Vue.js plugins and extensions with real Vue.js instances, state changes, transformation checks, and expected-error validation. It uses Jest examples and discusses linting and transpiling ES6 code to ES5 for compatibility. ### Source excerpt This post shows how to write tests for Vue.js plugins and extensions by creating Vue.js instances, changing state and validating transformation and expected errors, to continuously verify that everything still works after updates, refactorings and merging contributions. While building python-boilerplate.com, I recently created a Vue.js plugin for syntax highlighting (vue-highlightjs), and wanted to add tests. For this I spent some time researching and testing how to properly test Vue.js plugins and extensions, and I wanted to summarize and share what I've learnt. ## Setting up Webpack, Babel and React from scratch - Part 3 DevFeed: [Setting up Webpack, Babel and React from scratch - Part 3]() Original publisher: [Read original article]() Author: Stanko Published: 2016-11-24T00:00:00Z Content type: tutorial Language: en Sources: [Stanko Tadić]() Topics: [React](), [Webpack](), [Babel](), [Command-line interface](), [Tooling](), [JavaScript]() Tags: [babel](), [cli](), [react](), [tooling](), [tutorials](), [webpack]() ### AI overview The final part of a Webpack, Babel, and React tutorial series explains why the series is ending, points readers to Create React App and a Webpack 2 boilerplate on GitHub, and encourages understanding the underlying tooling before using boilerplates. ### Source excerpt Part three - also the last part # Other parts: Part 1 - Webpack, Babel, React, Router, ESLint Part 2 - SASS, more ES6 goodness (Static props, decorators, deconstruction...) Part 3 - Where to go from here Where to go from here # I really wanted to continue this series, but unfortunately whole JavaScript / Node community is moving so fast, that I found really hard to keep these tutorials up to date. Webpack 2 and React Hot Loader 3 are on the horizon. Some package versions break the other ones. Usual JavaScript business :) So I'll leave you with a link or two below. Create React App # Facebook released Create React App. That is a CLI tool for creating React apps with zero configuration. It is still missing some features, like universal rendering, decorators, SASS (or LESS), hot reload... But it is a really solid start, and backed up by the React team. My Webpack 2 boilerplate # Also, I just published Webpack 2 boilerplate on GitHub. It has a lot of nice features, check post about it on this blog. Thanks # Hope you found this series useful. Don't worry, blog will still be updated, but this series is over for now. And before using boilerplates, try making it yourself, so you understand the flow and the tooling behind it. ## React and Redux, Webpack 2 boilerplate DevFeed: [React and Redux, Webpack 2 boilerplate]() Original publisher: [Read original article]() Author: Stanko Published: 2016-11-24T00:00:00Z Content type: article Language: en Sources: [Stanko Tadić]() Topics: [Boilerplate](), [React](), [Webpack](), [Redux](), [Babel](), [React Router](), [Sass](), [file](), [npm]() Tags: [babel](), [boilerplate](), [dev-tools](), [development](), [npm](), [react](), [react-router](), [redux](), [sass](), [webpack]() ### AI overview The article introduces a minimal React application boilerplate built with Redux and Webpack 2. It explains that the author extracted the boilerplate from a pet project after finding Webpack 1.x difficult to configure, and lists implemented, planned, and possible future features. ### Source excerpt Currently, I'm working on a relatively small pet project. While setting it up, I decided to extract a webpack boilerplate from it. As whole JS community is moving really fast, I found very hard to set everything up using Webpack 1.x. One package would ask to update the other, that would break the third one, then that one... and so on. Luckily, I was able to set everything up using Webpack 2. It is still in beta, but I had no problems so far. You can find the boilerplate on GitHub. Implemented Features # React React router Redux Redux Thunk Immutable reducer data Webpack 2 (development and production config) Hot Module Replacement Babel - static props, decorators SASS with autoprefixing Webpack dashboard Linting Included es6-promise and isomorphic-fetch File imports relative to the app root Planned features # Redux Dev Tools Generating icon font from SVGs Preview production build Git hooks - lint before commit (or push) Future features # Universal may be added at some point. Universal rendering Server async data About # This boilerplate is a complete, but minimal React application. It includes reducers (redux), actions (sync and async), routing, SASS... My goal was to be ready immediately after cloning the repo (and running npm i). My plan is to reuse this as much as possible. It will updated so make sure you follow the documentation on GitHub. ## Setting up Webpack, Babel and React from scratch - Part 2 DevFeed: [Setting up Webpack, Babel and React from scratch - Part 2]() Original publisher: [Read original article]() Author: Stanko Published: 2016-08-29T00:00:00Z Content type: tutorial Language: en Sources: [Stanko Tadić]() Topics: [Webpack](), [Babel](), [Sass](), [React](), [es6](), [JavaScript](), [Web Development]() Tags: [babel](), [compiler](), [css](), [es6](), [javascript](), [react](), [sass](), [webpack]() ### AI overview Part two of a tutorial on setting up Webpack, Babel, and React covers adding SASS support, source maps, Autoprefixer, hot reloading, and additional ES6 features such as static class properties and decorators. ### Source excerpt Part two # Update: Part two is pretty much done. Part three will cover redux and production builds. Other parts: Part 1 - Webpack, Babel, React, Router, ESLint Part 2 - SASS, More ES6 goodness (Static props, decorators, deconstruction...) Part 3 - Where to go from here Adding SASS # We will use SASS loader for webpack, so let's install it together with node-sass compiler, css and style loaders npm install --save-dev style-loader css-loader sass-loader node-sass Create scss folder in the app folder, and main app.scss file in it. This file will include all of the other scss files. Now we need to add a loader to webpack config file. ... { test: /\.scss$/, loader: 'style!css!sass' } ... This will handle importing SCSS files in our JavaScript code. So we need to import app.scss manually in the JavaScript code. You'll need to add only one line to your app.js. import '../scss/app.scss'; This includes your styles by calling loaders we defined in the webpack config. Restart your webpack, and voala, now we have styles and hot reloading for them. Try changing your styles to check it. Source maps # To enable source maps, we'll pass the sourceMap option to the sass and the css loaders. Enable devtool, and update the loader ... devtool: 'inline-source-map', // or 'source-map' module: { loaders: [ ... { test: /\.scss$/, loader: 'style!css?sourceMap!sass?sourceMap', } ] } ... If you want to read more, here's link to the official documentation Autoprefixer # Always use autoprefixer - I can't stress this enough. We'll need postcss loader, precss and autoprefixer npm install --save-dev postcss-loader precss autoprefixer At the top of our webpack config, require precss and autoprefixer const precss = require('precss'); const autoprefixer = require('autoprefixer'); Update our sass loader config and and postcss config ... module: { loaders: [ ... { test: /\.scss$/, loader: 'style!css?sourceMap!postcss!sass?sourceMap', } ] }, postcss() { return [autoprefixer, precss]; }, ... Restart webpa ## Setting up Webpack, Babel and React from scratch DevFeed: [Setting up Webpack, Babel and React from scratch]() Original publisher: [Read original article]() Author: Stanko Published: 2016-08-23T00:00:00Z Content type: tutorial Language: en Sources: [Stanko Tadić]() Topics: [Webpack](), [Babel](), [React](), [Development]() Tags: [babel](), [git](), [npm](), [react](), [terminal](), [tutorial](), [webpack]() ### AI overview A step-by-step guide to setting up a React application with Webpack and Babel, including npm initialization, webpack configuration, and ES6/React transpilation. The article notes that its instructions are outdated for Webpack 2 and points readers to newer material. ### Source excerpt Update, October 2017 # I just released updated tutorial right here. So feel free to skip this one, and read a new one. It uses updated tools, and hopefully it will grow into a new series of webpack/react posts. Update, March 2017 # Webpack 2 is out, so this post is slowly becoming outdated. For webpack 2 - react boilerplate please check this post. This is a living guide # This is the first part of the guide that will be changed over time. For now it covers Webpack, Babel (for ES6) and React with React Router. Next parts will contain more stuff - static properties, decorators, SASS, development and production configs, immutables... Also redux part should be updated really soon. So stay tuned! Other parts: Part 1 - Webpack, Babel, React, Router, ESLint Part 2 - SASS, more ES6 goodness (Static props, decorators, deconstruction...) Part 3 - Where to go from here Before we start # I'll assume that you have a basic knowledge of the unix terminal, and that you have read what Webpack, Babel and React are. Webpack # For a start, install node and npm from https://nodejs.org/en/. Make a git repo (this is optional, but recommended), or create an empty folder. Navigate to it in the terminal. Initialize npm (package.json) by running npm init Now we can start adding npm packages. Install babel core and it's loader for webpack. npm install --save-dev webpack webpack-dev-server Tip: you can use npm i instead of npm install. Create app/js/app.js with a simple console.log('hello world');. This will be the entry point for webpack. Now we need to create a webpack config file webpack.config.js. Tip: you can create files by using touch command - touch FILENAME module.exports = { context: __dirname + "/app", entry: "./js/app.js", output: { filename: "app.js", path: __dirname + "/dist", } }; It is important to understand what is going on so far. This tells webpack that our main application file (app.js) is the entry point, and bundled application should be outputted to the dist folder. __di ## Dropping IE8 Support: Consequences for JavaScript DevFeed: [Dropping IE8 Support: Consequences for JavaScript]() Original publisher: [Read original article]() Author: Patrick Gotthardt Follow Published: 2016-06-01T00:00:00Z Content type: article Language: en Sources: [Trivago]() Topics: [JavaScript](), [Internet Explorer](), [Web Development]() Tags: [babel](), [browser](), [debugging](), [frontend](), [internet-explorer](), [javascript](), [libraries](), [performance]() ### AI overview The article describes trivago's experience after dropping Internet Explorer 8 support. It reports that the change allowed developers to update dependencies such as jQuery, core-js, and Babel, adopt newer JavaScript standards, reduce testing and debugging overhead, remove compatibility workarounds, and improve performance in other browsers. ### Source excerpt When people hear about dropping support for a certain Internet Explorer version, they mostly think of all the CSS hacks and workarounds that could be removed as a consequence. However, dropping support for IE8 can have subtle, but profound effects on your JavaScript. [Next page]()