Weekend JavaScript



ISSUE #93

ES6 one-liners, Webpack tree-shaking, Progressive WebApps, and a React controversy


MODERN JAVASCRIPT

ES6 One Liners to Show Off | Hemanth H.M

Here is a collection of ES6 one liners to show off!


Functions as seen in Smalltalk | Artem Tyurin

Warning: this is an exploration of a language and not something suitable for the production code.


Async/await in 7 seconds

understanding async/await in 7 seconds


How to do proper tree-shaking in Webpack 2 | Emarsys Craftlab

Tree-shaking means that Javascript bundling will only include code that is necessary to run your application. It has been made available by the static nature of ES2015 modules (exports and imports can’t be modified at runtime), which lets us detect unused code at bundle time.


VIDEO

Progressive Web Apps course

\* A whole course on progressive web apps by Google guys.


Webinar: Step into the world of microservices using Node.js | YLD & Cloud 66

In this online webinar, YLD and Cloud 66 joined forces, to explore about Node.js and microservice deployment. We are going to look how to start with microser...


OVERVIEW

CSS in JavaScript: The future of component-based styling | Jonathan Z. White

By adopting inline styles, we can get all of the programmatic affordances of JavaScript. This gives us the benefits of something like a CSS pre-processor (variables, mixins, and functions). It also solves a lot of the problems that CSS has, such as global namespacing and styling conflicts.


REACT

Things nobody will tell you about React.js | Gianluca Guarini

Please do a mental experiment with me, imagine yourself back to 10 years ago, stop reading for 5 seconds and take a breath.


Hey, thanks for feedback! | Dan Abramov

\* Dan Abramov goes into details replying to Gianluca Guarini's (see above) frustration post.


20 Exciting React Projects To Watch In 2017

The React ecosystem is exploding with innovation right now. Currently projected to overtake AngularJS in user adoption, React has already won where it matters: in the battle for developer mindshare.


When Does a Project Need React? | CHRIS COYIER

As the need for these libraries fades, and we see a massive rise in new frameworks, I'd argue it's not as clear when to reach for them. At what point do we need React?


How to Organize a Large React Application and Make It Scale

In this article, I’ll discuss the approach I take when building and structuring large React applications. One of the best features of React is how it gets out of your way and is anything but descriptive when it comes to file structure. Therefore you’ll find a lot of questions on StackOverflow and similar asking how to structure applications.


Best UI Frameworks for your new React.js App | Vladimir Metnew

Build your apps only with best UI frameworks.


GETTING STARTED

Intro to the Web Animations API | Pawel Grzybek

We have plenty of ways to animate things on the web. The answer of which one to use isn’t always easy. Each method comes with pros and cons.


Intro to the Web Animations API (Yes, another one with the same title) | THOM, Gather

Recently I came across the Web Animations API, a modern browser feature for creating animations that you'd traditionally use CSS or a JavaScript library for. While you will likely want to use a more powerful tool for complex animations, creating simple fades and motions can be done with the base web API.


Having our cake and eating it too: "Using iterators to write highly composeable code" | Reg “raganwald” Braithwaite

Consider this problem: We have a hypothetical startup that, like so many other unimaginative clones of each other, provides some marginal benefit in exchange for tracking user locations. We want to mine that location data.


An Overview of JavaScript Testing in 2017 | Vitalik Zaidman

This short guide is intended to catch you up with the most important reasoning, terms, tools, and approaches to JavaScript testing. It combines many great recently written articles about some aspects discussed here and adds a little more from our experience.


TUTORIALS

Accept payments on your site with NextJS, Stripe, and Micro | Cole Townsend

I often create small side projects where I’d like to charge for a single product. Rather than pay fees to use Plasso or Gumroad, you can make your own stripe server! In this tutorial, I walk you through how to add a payment form to your app or website. You will end up with a Stripe charge server built with Zeit’s micro and a functioning payment form.


A progressive Web application with Vue JS, Webpack & Material Design | Charles BOCHET

Imagine a Web Application that you can browse in the subway, that keeps engaging its user through notifications, up-to-date data and that offers app-like navigation, and you get an overview of PWAs capabilities.


LEARN HOW IT WORKS

HR.js | Tiny JavaScript plugin for highlighting and replacing text in the DOM

Tiny JavaScript plugin for highlighting and replacing text in the DOM