JSK Weekly - October 10, 2018

JavaScript libraries and tools are a hot topic this week. One of the most recommended stories for this week covers one of the greatest code editors out there, "10 VS Code Extensions for Frontend Developers in 2018" by Nwose Lotanna. React developers will love reading "9 React Styled-Components UI Libraries for 2018" by Jonathan Saring.

Arrow functions are the new ES6 syntax. They are very cool and useful but one needs to know how to use them properly. Kevin Ball helps you out this week regarding this in his article "JavaScript Arrow Functions: How, Why, When (and WHEN NOT) to Use Them".

Mathematics is always around in software development so it's important to be very familiar with Math libraries. That's why we recommend not to miss out "JavaScript Essentials: Numbers and Math" by Evan (CodeDraken).

Vue users don't want to miss "Plans for the Next Iteration of Vue.js" by Evan You but we believe that others should keep an eye on this one too.

Since unit testing should be an essential part of any quality software development process, we highly recommend you to check out "Rethinking Unit Test Assertions" by Eric Elliott.

Finally, we have two announcements this week. Aurelia announced "The New Aurelia-CLI Auto-tracing Bundler" and Ember announced "Ember 3.4 Released" on their official blogs.


Evolution of JavaScript Programming Language

When you look around the software development world today, one language that seems to be everywhere is JavaScript. JavaScript has gained a lot of popularity over the years, despite facing various stumbling blocks this language has gone on to become the most popular language in the world today.

Authored by: Shaleynikov

setTimeout is a callback-style function. What would happen if we change that?

Today it is common practice to transform node-style-callback functions into promise-style functions. So why haven't we done this for setTimeout? The main reason to prefer a promise-style function over a node-style-callback is to avoid Callback Hell. Nobody wants to see that.

Authored by: joelnet

JavaScript Essentials: Objects

Essentials is a series that covers the most used and important methods for X topic along with some other fundamentals. In this post we cover Objects. Prerequisites It's recommended that you know about types. Other JS topics would be helpful too but are not required.

Authored by: Evan

Fundamentals of storing data in the browser with IndexedDB

IndexedDB is another API meant for client-side storage. It is good for storing a significant amount of data, including files. IndexedDB is more suitable than WebStorage suitable for keeping structured data, and definitely more adequate for that than cookies. In this article, we go through the main concepts of IndexedDB.

Authored by: Marcin Wanago


JavaScript Arrow Functions: How, Why, When (and WHEN NOT) to Use Them

One of the most heralded features in modern JavaScript is the introduction of arrow functions, sometimes called 'fat arrow' functions, utilizing the new token =>. These functions two major benefits - a very clean concise syntax and more intuitive scoping and this binding. Those benefits have sometimes led to arrow functions being strictly preferred over other forms of function declaration.

Authored by: Kevin Ball

JavaScript Essentials: Numbers and Math

Essentials is a series that covers the most used and important methods for X topic along with some other fundamentals. In this post, we cover Numbers and Math. Prerequisites It's recommended that you know about types and just a little bit of math. JavaScript has just one number type.

Authored by: Evan

Scope and Hoisting of variables, functions, and `this` in JavaScript

Blog posts and articles abound for this topic (a reference list follows) so I will attempt to highlight common pitfalls for beginner-intermediate web development students learning JavaScript.

Authored by: Donna


Building A Movie Information App With Ionic 3

This application covers several important concepts in Ionic development that will help you on your way to becoming an awesome hybrid mobile applications developer. For this tutorial, basic knowledge of HTML and CSS is expected. Some familiarity with Angular 2+, Typescript and SCSS would be beneficial but is not absolutely essential.

Authored by: Scotch Development

Policy-Based Client-Side Encryption in Angular

Understand symmetric, asymmetric, and transform encryption. Learn how to implement client-side encryption (part of a data privacy architecture) using HTTP Interceptors and decorators. Add a testable and auditable data privacy policy. Separate the decision of how to classify data from the decision of who can access that data.

Authored by: The Practical Dev

Angular NgModel Directive Example Tutorial

Get real time updates directly on you device, subscribe now. Angular NgModel Directive Example Tutorial is the today's leading topic. The ng-model directive binds the value of HTML controls ( input, select, textarea) to application data. Using the two-way binding, we can display a data property as well as an update that property when the user makes changes.

Authored by: KrunalDLathiya


Build a Custom Toggle Switch with React

Building web applications usually involves making provisions for user interactions. One of the major ways of making provision for user interactions is through forms. Different form components exist for taking different kinds of input from the user. For example, a password component takes sensitive information from a user and masks the information so that it is not visible.

Authored by: Scotch Development

How to eliminate React performance issues now

Have you ever wondered how to make your React applications faster? Yes ? How about having a checklist for eliminating common react performance issues? Well, you are in the right place. In this article, I'll walk you through a pragmatic step-by-step guide to eliminating common react performance issues.

Authored by: LogRocket

How to manage React State with Arrays

Everything you need to know about React state with arrays. Learn how to manipulate arrays in React by using JavaScript array methods such as concat, map, filter and a few other features such as the spread operator ...

Authored by: Robin Wieruch

Hello, Create React App 2.0!

Create React App 2.0 is now available. In this blog post, Eric Bishard will walk you through what's changed and how you can use it in your development environment. Create React App provides an environment for learning React with zero configuration, developed by the React team at Facebook Open Source to help you jump-start your application.

Authored by: Eric Bishard

Increase user interactions by implementing code splitting in React

Hi, I'm Sagar working as a senior software engineer. I love to write articles which will help developers to understand the magic of JavaScript. If you have any questions about the article, leave a comment and I'll get back to you, or find me on twitter @sagar_dev44.

Authored by: Sagar

React Apps with the Google Maps API and google-maps-react

This tutorial aims at integrating the google maps API to your React components and enabling you to display maps on your website. At some point of our lives, we've all gotten a chance to use and interact with the google maps, either through finding directions, viewing our current location, ordering cabs or estimating distance and time from one point to another.

Authored by: Scotch Development


The New Aurelia-CLI Auto-tracing Bundler

Today, we're pleased to announce the Aurelia-CLI v1.0.0-beta.1 release! The official beta of our CLI now features a new built-in "auto-tracing" bundler, which greatly improves the capability, performance, and usability of the built-in bundler.

Authored by: Rob Eisenberg

Open Sourcing BuiltWithAurelia.com

Over two years ago (wow, has it really been that long?) I launched builtwithaurelia a showcase of Aurelia applications and community created offerings for the Aurelia Javascript framework. When I launched I didn't open source it because I didn't want the pressure of having to put out something clean and perfect.

Authored by: Dwayne Charrington


Plans for the Next Iteration of Vue.js

Last week at Vue.js London I gave a brief sneak peek of what's coming in the next major version of Vue. This post provides an in-depth overview of the plan. Vue 2.0 was released exactly two years ago...

Authored by: Evan You

Create a Progressive Web App using Vue, Cosmic JS, and GraphQL

TL;DR Intro Progressive Web Apps (PWA) combine the look and feel of an app with the ease of programming of a website. These cutting edge apps make it easy for your users to access your content, and engaged users increase your revenue. Rapid Loading is one of its features.

Authored by: Codementor

Error tracking in VueJS with Rollbar

So you just deployed your killer application which took a significant amount of effort to build, being forward-thinking you decided to use Vue JS in order to give your users a smooth and seamless experience using your application.

Authored by: The Practical Dev

⭐️ Intro to Vuex and Accessing State

I'm a little scared to admit that I didn't completely understand why to use Vuex until about a week ago when I watched Adam Jahr 's Vuex tutorial in the Real World Vue course 😮. In this article, I want to give you the information that I wish I would have known about Vuex and State.

Authored by: Gregg Pollack

Build fullstack Javascript apps with Adonis and Vue

Today we want to bring together two amazing frameworks that allow us to build clean applications using only Javascript. Adonis is a Laravel inspired web framework for Node, which carries over many of its features like an SQL ORM, authentication, migrations etc.

Authored by: The Practical Dev


Extracting command line arguments from Node.js using destructuring

If you've worked on a Node.js command-line program, you were probably faced with the extraction of command line arguments. Node.js provides all command line arguments in the process.argv array. However, the contents of the array aren't what you might expect.

Authored by: Nicholas C. Zakas

Build a Simple API Service with Express and GraphQL

GraphQL has become an immensely popular alternative to REST APIs. The flexibility you get from using GraphQL makes it easier for developers to get any information they need for an app. That gives you the feel of a very customized API and can help cut down on bandwidth.

Authored by: SitePoint

Playing With RegExp Named Capture Groups In Node 10

Ben Nadel experiments with RegExp named capture groups that are now supported in Node.js 10 (with V8 version 6.7). Named capture groups allow portions of a Regular Expression pattern match to be referenced by a human-consumable name (as opposed to a parenthesis-based numeric offset).

Authored by: Ben Nadel

Libraries and Tools

Top 10 VS Code Extensions for Frontend Developers in 2018

Visual Studio Code extensions for front-end and web developers. Work faster with live-server, live Sass compiler, Javascript code-snippets, NPM, ESLint, Prettier, CSS Peek, Vetur, Angular 6 snippets..

Authored by: Viclotana™

9 React Styled-Components UI Libraries for 2018

Top and best React Ui libraries, UI kits and frameworks built with styled-components implementing CSS in JS. Discover rebass, atlaskit, smooth-ui, css-loaders, reakit, reactackle, styled-bootstrap and

Authored by: JavaScript Kicks

Ember.js: Ember 3.4 Released

Ember.js helps developers be more productive out of the box. Designed with developer ergonomics in mind, its friendly APIs help you get your job done-fast.

Authored by: EmberJS

Configuring Webpack from scratch for Tailwind CSS with React

In this tutorial, we will work through configuring Webpack for use with react and tailwind CSS. Before we dive into the configurations, let us first look at an overview of the technologies involved. Webpack Webpack is a wonderful tool for bundling and optimizing front-end assets (JS, CSS, and Images).

Authored by: LogRocket

Using Winston, a versatile logging library for Node.js

Today, we will explore Winston, a versatile logging library for Node.js. Winston can be used in numerous contexts including in Node web frameworks such as Express, and Node CLI apps. We will also dive into features that make Winston a good fit for IoT applications such as logging timestamped entries to files.

Authored by: Dave Johnson


Rethinking Unit Test Assertions

Well written automated tests always act as a good bug report when they fail, but few developers spend time to think about what information a good bug report needs. There are 5 questions every unit test must answer. I've described them in detail before, so we'll just skim them this time: What is the unit under test (module, function, class, whatever)?

Authored by: Eric Elliott

Simplified Angular unit testing

In this article, we will learn how to write (simple) unit tests for your Angular modeling blocks (service, component, async task, etc). We will be using a simple Quotes application to demonstrate how you can write a unit test for your project. I assume you already have an understanding of how to use Angular 2+.

Authored by: LogRocket

Functional Programming

Functional Programming with Forms in React

Recently I was developing some forms in React. Of course I found myself copying and pasting the same bits of logic to handle input, validation, and so on in each form, so I started to think about how I could reduce the amount of code duplication.

Authored by: The Practical Dev

JavaScript Functional Programming Explained: Fusion & Transduction

Fusion and transduction are probably the most "blow-my-mind" practical tools I've picked up in my time studying Functional Programming. They're not tools I use every day, nor are they strictly ever necessary...But, they completely changed the way I think about programming, modularity, and abstraction in software engineering, permanently, and for the better.

Authored by: Scotch Development


Serverless Backend using AWS Lambda: Hands-on Guide

Before we can start storing data in our DynamoDB, we need to set some permissions for the Lambda function to have write access. But the Lambda function does not have the permissions to interact with our DynamoDB table by default. So we need to give these permissions to our Lambda function.

Authored by: Rajat S ⌨️

Developers that constantly want to learn new things, here's a tip!

What is knowledge? Have you ever noticed that when someone explains something, you feel that you understand it, but when you try to apply it later on, you find that you actually know very little. You are not alone. The reason why is because knowledge consist of two important parts - information and knowledge.

Authored by: codeburst.io