background preloader

GitHub - lukehoban/es6features: Overview of ECMAScript 6 features

GitHub - lukehoban/es6features: Overview of ECMAScript 6 features

https://github.com/lukehoban/es6features

Related:  2Javascriptthe glorious web (mostly JavaScript)

appendTo Web Development Training Courses for Teams Easily one of the weirder new constructs within the new ES6 spec, the es6 generator answers a perplexing question: What would happen if you stopped a loop in the middle of its execution, went off and did something else for a while, then came back? It turns out that you can actually do quite a bit. A generator, at first blush, looks very much like a function with a loop in it: function * iter() { var i = 0; while (i != 3){ yield i; i++ } } There are two differences. Node.js real time logging with Winston, Redis and Socket.io, p2 Following up on my last blog post Node.js real time logging with Winston, Redis and Socket.io, p1 I want to get into the integration of winston with Socekt.io to stream logs real time to a browser. So just a quick recap, the idea here is to have a mechanism that logs messages categorized by different levels in the server and displays them at the same time in the browser, keeping the user informed at all times of the action in the back end, or helping a developer spot some bugs without the need to keep an eye on the terminal console or searching for log files buried in the server. Socket.io So first we need to initialize the socket.io lib. This part could be done several different ways, I haven’t found a baseline to follow when initializing and sharing a socket.io handler on express, so if anybody knows please hit me up in the comments. Anyway, the approach I decided to take was:

ECMAScript 6 collections, Part 1: Sets Posted at September 25, 2012 07:00 am by Nicholas C. Zakas Tags: Arrays, ECMAScript 6, JavaScript, Set Use destructuring in ES2015 and write more concise code — Beautiful JavaScript Use destructuring in ES2015 and write more concise code ECMAScript 2015 introduced a lot of syntactic sugar which can help you write more concise and prettier code. Destructuring is a big one here — a simple, but powerful feature that makes writing code in a more concise way. When transitioning to ES5 codebase now, this is the feature I miss the most. Why is it that useful?

christianalfoni WebApp Enthusiast So this little library Baobab continues to surprise me. The previous article I wrote on this used a strategy where you would lock up all your components, but have a dependency to the state tree of the application in each component that needed it. The individual components could point cursors into the state tree, allowing the component to extract state from the state tree and render itself whenever the cursor notified about a change. This optimized the rendering of React JS and gave a very good FLUX structure to your application. When going isomorphic though... wait, let me explain what an isomorphic app is before we move on. Typically with a single page application you pass only som basic HTML and script tags on the initial page request.

Dan Wahlin - Getting Started with ES6 – The Next Version of JavaScript JavaScript has come a long ways in its 20 years of existence. It’s grown from a language used to define a few variables and functions to one that can be used to build robust applications on the client-side and server-side. Although it’s popularity continues to grow in large part due to its dynamic nature and ability to run anywhere, JavaScript as a language is still missing many key features that could help increase developer productivity and provide a more maintainable code base.

How to debug ES6 mocha tests in Visual Studio Code Previously, when I tried to debug the failed test in mocha, I start mocha in bash with --debug-brk, and attached the Visual Studio Code to that mocha process. My code is written in ES6, and I run mocha via babel-register. When I tried to enjoy the built-in debug function in VSC. Somehow, the stack seems completely irrelative to the actual code. ES5 Objects vs. ES6 Maps – The differences and similarities There’s a new data structure in ES6 called a map. It has this concept wherein you can store data in the map by using a key, then can retrieve the data from the map by passing in the key. It should revolutionize the way that Javascript is … wait a second…

Backend Apps with Webpack (Part I) Webpack is an amazing tool. It calls itself a "module bundler" but it is much more than that: it provides an infrastructure for building, transforming, and live updating modules. While its wall of configuration options may not be your style, this approach works really well for the problem it's solving. WeakMap This is an experimental technology, part of the ECMAScript 6 (Harmony) proposal.Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future version of browsers as the spec changes. The WeakMap object is a collection of key/value pairs in which the keys are objects and the values can be arbitrary values. Syntax new WeakMap([iterable]) Parameters

Integration and Comparison for ES6 - Web Design Weekly If you’re still writing JavaScript using ES5 (also known as ECMAScript 5) and desire to author in ES6 (ES2015) fear not. We’ll look over some logical ways to start using this new syntactical sugar in your own work starting immediately. We’ll discuss and examine approaches to integrate features such as let and const plus compare var versus let and finally understand when to use the spread operator. So without further ado let’s get started. A Brief Review

Radium - A React Component Styling Library Radium is a toolset for easily writing React component styles. It resolves browser states and media queries to apply the correct styles to your components, all without selectors, specificity, or source order dependence. How do I do it, then? First, require or import Radium at the top of component file: var Radium = require('radium'); // orimport Radium from 'radium' // If you want to use the <Style /> component you can doimport Radium, { Style } from 'radium' Let's create a fictional <Button> component.

Dust Tutorial · linkedin/dustjs Wiki Dust Tutorial Richard Ragan - PayPal ( Author )Veena Basavaraj - LinkedIn ( Edits ) Why JavaScript Templating? Writing Better JavaScript with ES6 ES6, or formally ECMAScript2015, is the latest version of JavaScript and has new major enhancements for a more expressive syntax and fixes to old bad parts of the language. In this post, I'll explore some of the new features that can help improve and simplify building complex applications in JavaScript. But first, let's look at a brief history of the language. A Brief History of JavaScript 1995 - Brendan Eich created first version of JavaScript (originally named Mocha) 1997 - ECMAScript standard established

Related: