JSK Weekly - July 24, 2019

Let's ease into this week with a couple of numbers to kickstart your appetite, starting with some help from Jennifer Wadella and the art of avoidance in "7 Mistakes to Avoid When Moving from AngularJS to Angular" on Bitovi's blog, then Liz Parody steps in on NodeSource to get us started with improving application performance in "12 Tips for Improving JavaScript Performance" and dash Bouquet's very own Anton Shaleynikov shows us some of the best React Native blogs in "Top 10 Blogs to get you started in React Native."

Timeline Chart and Network Graph are added to the AnyChart JavaScript charting library in the 8.6.0 update. Check it out here: "AnyChart JS Adds Timeline Chart and Network Graph" and Robin Wieruch introduces Enzyme into a Jest testing environment in "How to test React components with Jest & Enzyme" while Adrian Hajdin covers the explanation, real use case scenarios and reasons to use Map and Set over standard JavaScript Arrays and Objects in "JavaScript Maps and Sets Explained" on freeCodeCamp.

If you're keen on learning React, you're in luck this week with Brian Holt teaching how to build real-world apps from the ground up using the latest tools on Frontend Masters in "Learn React Using Hooks to Build Real-World Applications" and two new courses have launched on Tyler McGinnis with 25% off for a few more days. The discounts are limited and selling fast, so check out "Learn React Hooks - 25% off this week only."


Building and Scaling IoT solutions with Microsoft Azure

In this story, I will walk you through the concepts and steps involved in building and scaling an IoT solution by leveraging the power of the cloud IoT services provided by Microsoft Azure.

Authored by: Bit

How to talk with Web Components in React and Angular

Next, let's create a shopping cart. It should be an icon with a badge that says how many items we have in the cart. The best way to create a fully self-contained component is to embed the images into the component using DATA URIs.

Authored by: Michael Karén

Initialize your project with Material-UI Layout v1.2

Today I want to announce that Material-UI Layout aka mui-layout is available in npm, so you can just npm install mui-layout and you are good to go. A bit, yes. Some API is changed but the components are still the same.

Authored by: Bit


12 Tips for Improving JavaScript Performance

Performance should always be taken into account when building applications. To help get you started, here are 12 ways to effectively improve application performance.

Authored by: NodeSource

ES proposal: private methods and accessors in JavaScript classes

In this blog post, we look at private methods and private accessors (getters and setters) for JavaScript classes. They are a new kind of class member that can't be accessed outside the body of their class. To understand this post, you should be familiar with private class fields.

Authored by: Axel Rauschmayer

Chaining JavaScript Promises While Sharing Parent Data

Typically when I'm working with RESTful APIs, the routes or endpoints return what I need, plus more, which would be too much data. However, recently I ended up working with an API where the responses were rather trim, resulting in the need to use many HTTP requests to various endpoints, rather than getting everything in a single request.

Authored by: Nic Raboy

JavaScript Maps and Sets Explained

Introduction This is a short article about all the use of JavaScript Map and Set objects. Map and Set are the new data structures that were introduced in E6. This article will cover the explanation, real use case scenarios and reasons to use Map and Set over standard JavaScript Arrays and Objects.

Authored by: freeCodeCamp.org

JavaScript Closure by Example

Eventually you will come across the concept of a JavaScript Closure. I want to give you a step by step walkthrough on how to implement a JavaScript Closure. Along the way, you will find out yourself why it makes sense to implement certain things with JavaScript Closures.

Authored by: Robin Wieruch

Algorithm's Efficiency | Big O "In Simple English" - Bits and Pieces

From a programming concept, Big O notation is used as a sort of measurement unit that helps programmers evaluate or estimate the efficiency of a written bloc of code, a script or an algorithm: "What the amount of time it's going to take to run?

Authored by: Bit


How to Write Better Components in Angular - Bits and Pieces

Good practices for building angular components The app actually stems from the root component AppComponent. Now we broke the app into components, and in each component, we decide the view of the app it will handle: the HeaderComponent handles the display of the header, the PageNameComponent deals with the display of the current page position.

Authored by: Bit

7 Mistakes to Avoid When Moving from AngularJS to Angular

Are you moving from writing AngularJS to Angular apps? There's a lot to learn, but check out this quick guide on mistakes to avoid first! Upgrading any project can be a big task, and with the vast changes between AngularJS and Angular it can almost seem like a whole new framework to learn!

Authored by: Bitovi

The ultimate guide to set up your Angular library project

Automated code formatting with Prettier & Husky, test coverage reports, deployed showcase and fully automated releases with Travis CI for your Angular library Angular is such an awesome framework, and we all love it 😍 It's a complete tool kit that helps us build amazing stuff. And it gets even better.

Authored by: Angular In Depth

The Principles for Writing Awesome Angular Components

Some of the best practices and lessons that the community has learned in the last few years, and some of the mistakes that I have seen as a consultant in the front-end world. Angular is a component-based framework, and as such, writing good Angular components is crucial to the overall architecture of an application.

Authored by: Bit


Learn React Hooks - 25% off this week only

TylerMcGinnis.com's first React course launched in 2016 and has now been taken by over 80,000 students with an avg rating of 4.8/5. Today, they're launching two new courses (React and React Hooks) that are built from the ground up to teach you everything you need to know about writing React in 2019.

Authored by: Tyler McGinnis

Top 10 Blogs to get you started in React Native

Ever since its inception in 2015 by Facebook, the React Native framework has seen a gradual increase in its adoption. Getting started with React Native is quite easy as there are a lot of tutorials and articles written on it. Below are some of the best blogs out there to get you started with React Native.

Authored by: Shaleynikov

Learn React Using Hooks to Build Real-World Applications with Brian Holt

Much more than an intro, you'll build with the latest features in React, including hooks, effects, context, and portals. Learn to build real-world apps from the ground up using the latest tools in the React ecosystem, like Parcel, ESLint, Prettier, and Reach Router!

Authored by: Frontend Masters 💻✨

Getting Started with React Native in 2019: Build Your First App

Learn how to build your first React Native app with important basic concepts and where to go from here! We live in the world of a variety of mobile devices majorly dominated by two platforms, iOS, and Android. It is a two-horse race and I am sure we can all agree on that.

Authored by: Aman Mittal 🖖

Implementing React Life Cycles Using Reason React Hooks

A short and quick guide for implementing react life cycles using reason react hooks. After the release of Reason React Hooks, most of the developers have upgraded code base to support the hooks. Reason react community has also provided the script for upgradation but it just wraps the existing component using `ReasonReactCompact.wrapReasonReactForReact` tohooks components.

Authored by: Bit

Making impossible states impossible: data structures in React

One of the things I like to spend a lot of time on is data structures. It's one of the first things I think about when building something: what data do I have to work with, and what's the best format for it to be in?

Authored by: Jack Franklin

Build a React Switch Toggle Component

Learn how to build a React switch component using the native HTML checkbox input! You'll learn plenty about React checkboxes in the process. If there's one UI component that iOS introduced to the world, it's the switch or toggle as some people refer to it as.

Authored by: Upmostly

Sort table data with React

Often when you have a table with information you'd want to be able to sort the information in the table in ascending or descending order, especially when you are dealing with numbers. In this tutorial we're going to see how to do exactly that using ReactJS.

Authored by: Florin Pop 👨🏻‍💻

Creating a toggle animation in React Native

Here is what we're going to create in this article: This is a toggle that I developed while working for Above. Or more precisely, we developed it for one of their clients. Above is a Swedish design and innovation agency located in the beautiful town of Malmö in Sweden.

Authored by: Bit


Which Framework Works Better For You - Ember.js or Vue.js?

JavaScript was initially created to work for web applications. But today they have become the favorite of mobile app developers. Most of the developers prefer to work with frameworks based on...

Authored by: Bit

How to use refs to access your application DOM in Vue.js

Learn how you can easily manipulate DOM elements in your Vue.js application by defining methods with ref attributes.

Authored by: LogRocket


A complete guide to the Node.js event loop Blog

Whenever I hear people talking about Node.js, many questions arise about what it is exactly, what this technology is good for, and whether there is a future for it. Let's try to address the first part.

Authored by: LogRocket

From REST to GraphQL: a different way to create an API (with Apollo & NodeJS) Blog

Ready to make the jump to a GraphQL API? If you already have a MySQL database you have an excellent starting point for creating a scalable API. In this tutorial, we will cover how to create models based on your database, create a NodeJS GraphQL API that reads the data from the database, and learn how to make relations in your GraphQL API between different tables.

Authored by: LogRocket

ES modules in Node.js 12, from experimental to release Blog

Full support for ES modules in Node.js will be a major milestone. Learn the history, current state, and future plans for ESM support in Node.

Authored by: LogRocket

Libraries and Tools

Exploratory Data Analysis with Pivot Table & Charting Library: SpaceX Data

Being an active learner by nature, I'm enthusiastic about trying new data visualization techniques & tools. The dataset that attracted my attention recently is the SpaceX Launch Data from Kaggle. The dataset contains information on a timeline space rockets launches performed by SpaceX.

Authored by: Bit

Understanding RxJS Observables and why you need them

RxJS is a framework for reactive programming that makes use of Observables, making it really easy to write asynchronous code. According to the official documentation, this project is a kind of reactive extension to JavaScript with better performance, better modularity, better debuggable call stacks, while staying mostly backwards compatible, with some breaking changes that reduce the API surface.

Authored by: LogRocket

How to test React components with Jest & Enzyme

Learn how to test your React application with Jest & Enzyme. Jest will be used as a test runner & testing library while Enzyme will be used for your actual React component tests ...

Authored by: Robin Wieruch

How to use Mapbox GL with React Blog

Mapbox is a live location platform that allows developers to create interactive and intuitive map interfaces for a variety of applications. On the web, this is done using a JavaScript library called Mapbox GL JS which uses Web GL to render interactive maps from vector lines and Mapbox Styles.

Authored by: LogRocket

AnyChart JS Adds Timeline Chart and Network Graph

Timeline Chart and Network Graph are added to the AnyChart JavaScript charting library in the 8.6.0 update. Check it out.

Authored by: Andrey Khachaturov


What Is MTTR? A Simple Definition That Will Help Your Team

Mean time to resolution (MTTR) is defined as the sum of the total amount of time that service was interrupted divided by the number of individual incidents. The unit of measurement is some quantity of time. Ideally, you can use minutes as the unit.

Authored by: Stackify