# es6 ES6, formally ECMAScript 2015, is a standardized programming language specification with features including modules, classes, iterators, generators, promises, and destructuring. 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 ## Interning at Khan Academy: from student to intern DevFeed: [Interning at Khan Academy: from student to intern]() Original publisher: [Read original article]() Author: Khan Academy Published: 2016-12-12T23:00:00Z Content type: article Language: en Sources: [Khan Academy]() Topics: [Mobile](), [Front end](), [React](), [JavaScript](), [es6](), [User Experience](), [Scala]() Tags: [bugs](), [engineering](), [es6](), [features](), [frontend](), [intern](), [javascript](), [mobile](), [news](), [open-source](), [react](), [student](), [user-experience](), [web-frontend]() ### AI overview A student intern describes two months working on Khan Academy's X-on-Mobile initiative. The article covers improving a mobile math keypad, fixing gesture-related bugs, adding interface features, learning idiomatic ES6 with React in production, and working with open-source libraries. ### Source excerpt By Shadaj Laddad This past summer I had the amazing opportunity to work on a product I use ... Read more ## A critical history of JavaScript's prototype-based design and later TypeScript and ES6 changes DevFeed: [A critical history of JavaScript's prototype-based design and later TypeScript and ES6 changes]() Original publisher: [Read original article]() Author: Yegor Bugayenko (yegor256@gmail.com) Published: 2025-12-27T21:00:00Z Content type: opinion Language: en Sources: [Yegor Bugayenko]() Topics: [JavaScript](), [TypeScript](), [es6](), [Functional programming]() Tags: [es6](), [javascript](), [object-oriented](), [oop](), [prototype](), [prototypes](), [typescript](), [typescript-is-clumsy](), [typescript-is-ugly](), [typescript-types](), [typescript-vs-javascript]() ### AI overview This opinion article recounts JavaScript's origins and argues that its prototype-based, class-free design was later undermined by TypeScript and ES6 classes. It also compares JavaScript's object model with Scheme, Self, C++, and Java. ### Source excerpt JavaScript was an elegant prototype-based class-free language until TypeScript and ES6 classes ruined it. ## Fixing typedoc's generated TOC if your code is using ES6 modules DevFeed: [Fixing typedoc's generated TOC if your code is using ES6 modules]() Original publisher: [Read original article]() Author: Monica Dinculescu Published: 2020-02-21T00:00:00Z Content type: tutorial Language: en Sources: [Monica Dinculescu]() Topics: [Documentation](), [TypeScript](), [JavaScript](), [es6](), [modules]() Tags: [es6](), [javascript](), [modules](), [typescript]() ### AI overview A tutorial describing a workaround for TypeDoc navigation when a TypeScript JavaScript library exports only selected files from its top-level index.ts. The author reports that several TypeDoc flags did not prevent private files from appearing in the main table of contents, and uses injected JavaScript to hide files that are not top-level exports. ### Source excerpt My one policy about blogging is "write the blog post you wanted to find in the search results". I spent an inordinate amount of time yesterday trying to get typedoc to only show the docs for the files I'm actually exporting in my library, and didn't find anything on the internet to help me, so here is the blog post I wanted to read. The problem You are working on a JS library. You author your source in TypeScript. You have an index.ts file that exports only some of your source files. You would like your generated docs from typedoc to only have docs for those files (Why? So that people don't open issues along the lines of "I see the docs for function foo, but I can't see how to call it, pls export it". Sweet child, if that function was meant to be public it probably would've been. That function is actually 3 spiders in a trench coat). That is, you would like your Table of Contents to show this: and not this: Things that aren't solutions In the order that I've tried them: the --mode modules flag: the word "modules" is a lie here and really just means "under a namespace" not like... ES6 modules (tracking issue) the --excludeNotExported flag: it helps to generate docs for only the exported functions, but not files the -excludePrivate flag: same as above the --exclude flag: this is nice in theory, but I have like 30+ private files that shouldn't be documented and only like 5 top level exports, so that regex will suck. Also, my experience is that next time someone adds a file they want or don't want documented they won't know to add it to this list and we're back to having a problem the --toc flag. I honestly don't know what it does, but for me, it did nothing 100% of the time thinking this should presently work in typedoc. Here is the tracking issue and the open PR that might fix it. My "solution" I'm less bothered that the docs for the private files get generated at all, and more bothered that they're linked in the main page TOC and thus discoverable. So my "solution" tha ## Why Do We Write super(props)? DevFeed: [Why Do We Write super(props)?]() Original publisher: [Read original article]() Published: 2018-11-30T00:00:00Z Content type: article Language: en Sources: [Dan Abramov]() Topics: [JavaScript](), [React](), [es6](), [Code]() Tags: [gotchas](), [javascript](), [react](), [syntax]() ### AI overview This article explains why React class components call super(props), covering JavaScript constructor rules, parent-class initialization, and how React assigns props even when they are not passed to super. ### Source excerpt There's a twist at the end. ## 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 ## Highlight variables in Atom, Babel template strings DevFeed: [Highlight variables in Atom, Babel template strings]() Original publisher: [Read original article]() Author: Stanko Published: 2016-05-07T00:00:00Z Content type: tutorial Language: en Sources: [Stanko Tadić]() Topics: [Atom](), [Babel](), [es6](), [Snippet](), [Less]() Tags: [atom](), [babel](), [css](), [es2015](), [es6](), [less](), [snippet](), [template-strings](), [variable]() ### AI overview A guide to fixing an Atom Babel plugin issue where variables in ES6 template strings are not highlighted. It provides an Atom style.less snippet that styles JavaScript variables and explains how to inspect Atom's element classes for additional CSS or LESS customizations. ### Source excerpt Atom Babel plugin doesn't highlight variables in ES6 (ES2015) template strings. You'll need to add this snippet to your Atom's style.less atom-text-editor::shadow .variable.js { color: #F8F8F2; } In general, you can just inspect stuff in Atom, find out what classes element are using, and then style it via CSS (LESS). Just don't forget to add atom-text-editor::shadow before your rules. If anyone is interested, I'm using Monokai Seti theme. ## Jekyll and Gulp workflow DevFeed: [Jekyll and Gulp workflow]() Original publisher: [Read original article]() Author: Stanko Published: 2016-02-27T00:00:00Z Content type: tutorial Language: en Sources: [Stanko Tadić]() Topics: [Gulp](), [Jekyll](), [Sass](), [JavaScript](), [Development](), [es6]() Tags: [development](), [es6](), [gulp](), [javascript](), [jekyll](), [sass](), [workflow]() ### AI overview This tutorial describes a Jekyll development workflow that uses Gulp to compile and watch SASS and JavaScript, run a local Jekyll server, proxy it through BrowserSync, and reload the browser on changes. The author notes that the setup may be outdated because they no longer use Jekyll. ### Source excerpt Please note that I'm not using Jekyll anymore, so this post might be outdated. Update, November 2017 # I don't use this setup anymore, it might be outdated, proceed with caution. Original post # As you probably know this blog is powered by Jekyll. It is a really nice platform, but it lacks a few things I'm used to during development. First one is live reload on file changes (and injecting CSS), using SASS, autoprefixer, ES6... I tried to find a boilerplate, but everything I found didn't match my needs. Usually people would run gulp tasks for SASS and JavaScript files, and on change run jekyll build, which is insanely slow. They would use BrowserSync to serve _site folder. So I did what programmers do - written my own. I quickly made usual gulp tasks: styles - to compile SASS and autoprefix it scripts - to transpile ES6 goodness, and concatenate JavaScript files serve - to start local server, watch for changes and auto reload First thing I did is that I was running jekyll serve in one terminal, and gulp serve with BrowserSync in the other. This was working decently, but I wanted to run only one command, and let the tasks do everything for me. That is where node child process comes in. import childProcess from 'child_process'; const spawn = childProcess.spawn; gulp.task('jekyll', function (){ const jekyll = spawn('jekyll', ['serve'], { stdio: 'inherit' }); }); This task spawns a child process from gulp. Nice thing is that we can start it, and gulp will kill it on exit. Now we have up and running Jekyll server, and proxy it to BrowserSync. But darn, injecting CSS files didn't really work. Server was expeting CSS file to come from /css/style.css, but browserSync.stream in gulp pipe would inject it from the _sass folder. I solved this by copying css file to the .tmp/css and adding .tmp to the serveStatic option of the BrowserSync. One thing I should mention, that I keep my SASS files in the _sass folder, and JavaScript in the _js one. Gulp watches changes on SASS/JS, and ## How to export a JavaScript module to multiple formats DevFeed: [How to export a JavaScript module to multiple formats]() Original publisher: [Read original article]() Author: Tom Bartel Published: 2015-12-17T00:00:00Z Content type: tutorial Language: en Sources: [Trivago]() Topics: [JavaScript](), [Webpack](), [Library](), [CommonJS](), [modules](), [es6](), [Compiler]() Tags: [article](), [build](), [code](), [commonjs](), [es6](), [frontend](), [how-to](), [javascript](), [webpack]() ### AI overview This tutorial explains how to use webpack to publish a JavaScript library in multiple module formats, including CommonJS, AMD, ES6, global-variable, and UMD formats. It covers the libraryTarget configuration and using multiple compiler runs for different build targets. ### Source excerpt When publishing a JavaScript library, we usually want to make it available to as many people as possible to maximize the library's usefulness and adoption. In that respect, it can be helpful to users to have the library available in their preferred module format - CommonJS, AMD, ES6, etc. ## Multiline strings in ES6 JavaScript DevFeed: [Multiline strings in ES6 JavaScript]() Original publisher: [Read original article]() Author: Jack Tarantino Published: 2015-11-29T23:59:53Z Content type: tutorial Language: en Sources: [Jacopo Tarantino]() Topics: [JavaScript](), [es6](), [Template]() Tags: [best-practices](), [es6](), [javascript](), [string](), [template](), [template-strings](), [templates]() ### AI overview A tutorial on ES6 Template Strings in JavaScript, covering multiline strings, interpolation, tagged template strings, and older ES5 techniques for writing multiline strings. ### Source excerpt The new kid in town is called Template Strings. Template Strings are demarked by a backtick(`) on either end and can contain other backticks if they are escaped by a backslash(ie. let my_string = `some cool \`escaped\` thing`). This new kind of primitive in JavaScript is different from ## ES6 IIFE with fat arrow functions DevFeed: [ES6 IIFE with fat arrow functions]() Original publisher: [Read original article]() Author: Jack Tarantino Published: 2015-11-29T17:45:39Z Content type: tutorial Language: en Sources: [Jacopo Tarantino]() Topics: [es6](), [es2015](), [function](), [syntax]() Tags: [best-practices](), [closure](), [context](), [es2015](), [es6](), [function](), [javascript](), [syntax]() ### AI overview This tutorial explains how to write Immediately Invoked Function Expressions (IIFEs) in ES6 using fat arrow functions. It compares shorter syntax options, notes differences in function context, and describes a compact form for creating closures that cannot accept arguments. ### Source excerpt Writing Immediately Invoked Function Expressions or IIFEs in ES6(Also known as ES2015 now) just got a lot easier with the introduction of fat arrow functions. (global => { const MY_CONSTANT = 'api key or something' let counter = 0 let some_array = [1,2,34,5,6,7] counter = some_array.