JSK Weekly - August 8, 2018

What's the first thing that comes to your mind when you are asked about "The cost of JavaScript"? If you are confused and still want to be a good front-end developer you better start reading Addy Osmani's must-read article and learn all about it.

PWA has been around for quite some time now. If you are in the web development world you probably heard about it but you may not yet fully utilize it. This week Mahesh Haldar walk us through the basics of PWA answering fundamental question "What is a PWA and why should you care?".

Vue has been getting a lot of attention this week. We have a number of excellent articles that we recommend. Among the top of them are "5 Tools for Faster Vue.js App Development" by Jonathan Saring and "Getting Started with Vue.js in .NET Core using Visual Studio" by Esau Silva.

Finally, we would like to welcome a new potential "big player" in the JavaScript frameworks world released by UBER. Meet Fusion.js presented by Leo Horie in the article "Introducing Fusion.js: A Plugin-based Universal Web Framework".


The Cost of JavaScript In 2018

Building interactive sites can involve sending JavaScript to your users. Often, too much of it. Have you been on a mobile page that looked like it had loaded only to tap on a link or tried to scroll and nothing happens?

Authored by: Addy Osmani

What is a PWA and why should you care?

In the last few years there has been exponential growth in the number of mobile phone users. Today, more than 60% of total internet usage is happening via mobile phone. Obviously, the reasons include portability, cheap hardware, easy access to the internet and the increased number of services on the internet.

Authored by: Mahesh Haldar

A Practical Guide to Regular Expressions (RegEx) In JavaScript

A quick guide to effectively leveraging with regular expressions, with hands-on examples. When you first encounter Regular Expressions, they may seem like a random string of gibberish. While they might look awkward (with a somewhat confusing syntax), they are also extremely useful. The truth is properly understanding regular expressions will make you a much more effective programmer.

Authored by: Bit

Polling vs SSE vs WebSocket- How to choose the right one

Building a real-time web application is a bit challenging one, where we need to consider how we are going to send our data from the server to the client. Technologies that enable this "proactively" have been around for quite some time and are limited to two general approaches: client pull or server push.

Authored by: Bharathvaj Ganesan


JavaScript ES6: 5 new abstractions to improve your code

Functions in JavaScript are very important objects. It is very possible that you have come across the statement: "Functions are first-class citizens". This is true about JavaScript functions because you can pass them around in your program like you would with any other regular value.

Authored by: Glad Chinda

JavaScript's Reduce Method Explained By Going On a Diet

The reduce method in JavaScript gives you a simple way to take an array of values and combine them into one value, or sum the array based on multiple category. Wow, that is a lot in one sentence, so let's take a step back here.

Authored by: Codementor

ES2018 - Asynchronous Iteration

One of the most interesting features in ES2018, which is still pretty new, is Asynchronous Iterations. In order to understand Asynchronous Iterations, we need to dive a little into the world of iterators. And I promise you, it's going to be of fun. How do we perform iterations?

Authored by: DiscoverSDK

Fixing Variable Scope Issues with ECMAScript 6

JavaScript has always had some tricky issues with variable scope. ECMAScript 6 gives developers more control over this.

Authored by: A List Apart

Private and Public Scope in Javascript

In many programming languages, you'll hear about public and private scope, in JavaScript there is no such thing. We can, however, emulate public and private scope through things like Closures. You can create public and private scope using JavaScript design pattern called Module.

Authored by: Codementor


20 TypeScript Interview Questions and Answers in 2018

20 TypeScript Interview Questions and Answers in 2018

Authored by: Codementor


Using Angular Route Guard For securing routes

If you are trying to block some routes from loading based on some permissions or blocking a route based if not authenticated, then you can read along. We are going to do an example where you need to login to view your dashboard and permission-based routing where if no permission to view a route you see 404 page.

Authored by: Dimitri Nicolas

Let's build a Reactive HTTP library for Angular

Originally published at https://www.zeolearn.com/magazine/lets-build-a-reactive-http-library-for-angular Link to article project: https://github.com/philipszdavido/ng.http In this article, we will go over the concept of Reactive Programming, and in the process build a reactive Angular HTTP module like Angular's built-in Http module. If you have tried your hands on Angular and used its HTTP module, you must have come across a plethora of stuff like Observable, subscribe.

Authored by: Chidume Nnamdi


How to pass props to components in React

This month, all articles are sponsored by TRUMPF Laser GmbH. The german company I worked with is using a sophisticated React with GraphQL and .NET tech stack. They are hiring eager developers for their sites in Berlin and Schramberg.

Authored by: Robin Wieruch

React - Composing Higher-Order Components (HOCs)

To put it simply, a higher-order component is a function, that takes a component and returns a new component. I like to think of them as parameterized components. Many times I find myself creating several components with very similar logic, with only 1 or 2 changes.

Authored by: Codementor

Redux Lifecycle

Disclaimer : This article is not an introduction to redux. There are plenty of good resources to get started with redux (see ) and I suggest you begin with them. This article isn't about react either. The term "lifecycle" is used in context of redux data flow and operations.

Authored by: Shirsh Zibbu

ReactVR/react-360 is great, but maybe not quite there yet

My goal was to build a 3D scatterplot that you can explore. Stand inside your data and look around. Wouldn't that be cool? Instead, I got a squished Baymax healthcare companion. 🤔 ReactVR, recently renamed to react-360, doesn't have 3D modeling primitives like spheres and boxes.

Authored by: Swizec

How to Display a List in React

You've got a list of items. Now you just need to get them on the screen. What's the "React way" to render a list? The good news is it's pretty simple. All you need is Array.map.

Authored by: Dave Ceddia


Aurelia 2018 Q2 Report

We've made some major improvements in our core platform capabilities during Q2, including features that greatly improve Webpack scenarios, treeshaking, and modern bundler integrations. Our core plugins for state, i18n and UX continue with strong forward movement as well. Early in the quarter we announced major performance improvements in our binding engine's expression parser.

Authored by: Aurelia


5 Tools for Faster Vue.js App Development

Not long ago Vue.js passed React in GitHub stars. Although a somewhat shallow metric to measure, no doubt that this is only an indicator of the great success and popularity Vue.js is gathering in the community in 2018. As we use more great frameworks like Vue to build new applications, Dev Velocity becomes one of the most important aspects of our work.

Authored by: Bit

Tutorial - Shuffle a Deck of Cards in Vue.js

In this article, we're going to build a UI that'll give us the ability to randomly shuffle a deck of cards! For reference - here's a complete version of the application: Note 📝 : Be sure to edit/view the application directly on Codepen to view the app in a larger frame!

Authored by: Hassan Djirdeh

Getting Started with Vue.js in .NET Core using Visual Studio

In this tutorial I will show you how to use Vue.js on the frontend and .NET Core on the backend. We will be building a simple feedback form.

Authored by: JavaScript Kicks

Handling Authentication In Vue Using Vuex

Traditionally, many people use local storage to manage tokens generated through client-side authentication. A big concern is always a better way to manage authorization tokens to allow us to store even more information on users. This is where Vuex comes

Authored by: Scotch Development

Modern component reusability: Render props in React & scoped slots in Vue

One of the issues all front-end developers face is how to make UI components reusable. How do we craft components in such a way that satisfies the narrow use case that is clear to us now, while also making them reusable enough to work in a variety of circumstances?

Authored by: LogRocket

Using schemas to generate your forms with Vue, and more!

One really important task for every web developer is to handle user input via forms and it can prove to be pretty hard to develop and maintain. Hopefully there are some libraries here to improve the way you handle them. Schemas are basically nothing more than a way to model data.

Authored by: sourcerer.io


Simple Data Processing With JavaScript And The HERE API

Have you ever needed to work with comma separated value (CSV) data that wasn't formatted in a great way or figure out complete address information based on very little provided address information? While unrelated, these two topics come up quite a bit, more frequently when I'm dealing with person information or lead data that I retrieve from conferences and other events.

Authored by: Nic Raboy

Node JS : Getting Started

Node.js is more powerful than you might think. Node.js is a run time environment to execute JavaScript code outside a browser. Before Node.js, JavaScript's scope was only limited to browsers. JavaScript engine inside the browsers provide run time environment to execute JavaScript code inside browsers only.

Authored by: codeburst.io

Understanding module.exports and exports in Node.js

Since importing and exporting modules is a regular task in Node.js, Cho S. Kim explains how the module system works in Node.js, providing a better understanding of the difference between module.exports and exports in Node.js, and showing how to understand errors when accessing publicly available methods.

Authored by: SitePoint

Libraries and Tools

Introducing Fusion.js: A Plugin-based Universal Web Framework

Fusion.js, Uber's new open source web framework, supports modern features and integrations that make it easy to build lightweight, high-performing apps for the web.

Authored by: JavaScript Kicks

Custom polymorphic code snippets in VS Code

The process for creating code snippets in VS Code is the same for all programming languages. All custom snippets are stored in JSON files (one for each programming language). You can access them in VS Code via: File > Preferences > User Snippets (Windows)Code > Preferences > User Snippets (macOS) This displays a drop down list of available languages you can define snippets for.

Authored by: LogRocket


Tried TDD and didn't realize the benefits? Try it the next time you get writer's block

Have you ever tried Test-Driven Development (TDD) thinking it would be the "holy grail" it's often made out to be, only to end up feeling like it was pointless? Maybe it didn't add any benefit to your code.

Authored by: Corey Cleary

Functional Programming

How to deal with dirty side effects in your pure functional JavaScript

If you start learning about functional programming, it won't be long before you come across the idea of pure functions. And as you go on, you will discover functional programmers appear to be obsessed with them. "Pure functions let you reason about your code," they say.

Authored by: James Sinclair

Higher Order Functions in JavaScript

In this article, you will learn about higher order functions. An important cornerstone of functional programming is higher order functions. If you want to write programs in mostly functional style, it is inevitable that you master the basics of higher order functions. First, you will learn the simple definition of higher order functions.

Authored by: Zsolt Nagy

Functional JS with ES6 - Recursive Patterns

Functional programming has been on the rise and is a topic that is very exciting to me. It allows me to write terse, declarative code that is easy to test and reason about.

Authored by: Codementor


Creating the perfect rounded edge with D3 curves

A coaching client showed me this design of a tree with rounded edges and asked: *Ok, how do I build this?* Well hmm... it's a tree of some sort. Each icon is a node, and each line is an edge. Nodes can have multiple children. I think 🤔

Authored by: Swizec

JavaScript String Manipulation (Solution to Code Challenge #12)

Last time on the code challenge #12 we looked at problems involving the use of String Manipulation techniques. Yet to try your hands at the challenge? You can check it out here. You can also see other fantastic submissions in the Spectrum Chat.

Authored by: Scotch Development

The Clipboard API crashcourse

Copy and paste has a strange history on the web. There's no real standard. Most browsers have settled on document.execCommand('copy') and document.execCommand('paste'). While that seems easy enough, there's some (justified) weirdness. const result = document.executeCommand('copy'); If this is your first brush with document.execCommand('copy'), you might be wondering "Where is the text parameter?".

Authored by: David East

ReasonML: React as first intended

ReasonML is the new tech that Facebook is using to develop React applications and promoting as a futuristic version of JavaScript (ES2030 they say). In this article I'll take a brief look at this tech.

Authored by: Imaginary Cloud

Let's make a form that puts current location to use in a map!

I love shopping online. I can find what I need and get most things for a decent price. I am Nigerian currently working and studying in India, and two things I dread when shopping online are: Filling out a credit card form Filling out shipping and billing address forms Maybe I'm just lazy, but these things are not without challenges!

Authored by: CSS-Tricks