JSK Weekly - October 24, 2018

Software design patterns is a topic that's been out there for quite some time now. If you are serious about software development you should definitely invest time to master as many patterns as possible. This week Sukhjinder Arora will help you "Understanding Design Patterns in JavaScript" so don't miss it.

Serverless deployment is relatively new "buzzword". If you are interested but haven't got a chance to read more about it we recommend Stephen Afam-Osemene's article "How to build a telegram bot using Node.js and Now".

Finally, for React developers we recommend "Understanding React v16.4+ New Component Lifecycle Methods" by Mahesh Haldar. We are sure that you'll enjoy it.


Understanding Design Patterns in JavaScript

A Module is a piece of self-contained code so we can update the Module without affecting the other parts of the code. Modules also allow us to avoid namespace pollution by creating a separate scope for our variables. We can also reuse modules in other projects when they are decoupled from other pieces of code.

Authored by: Sukhjinder Arora

Functional vs Imperative Patterns in JavaScript

The intention of this post is not to say one paradigm is better than the other. It is just to show common patterns you run into and their functional equivalents. If there is a pattern I missed and you would like to see, post it in the comments below.

Authored by: joelnet

Copy javascript Object right way!!!

In this post we will discuss the different methods to copy the javascript object and discuss the outcome of each method. But before that just keep one thing in mind that javascript objects are mutable by nature and stored as a reference.

Authored by: Codementor


Getting Started With Sets In Javascript

Get real time updates directly on you device, subscribe now. Getting Started With Sets In Javascript is today's leading topic. The Set object lets you store the unique values of any type, whether there are primitive values or object references.

Authored by: KrunalDLathiya

Understanding ==, === and typeof in JavaScript

We all know that == and === are comparison operators in JavaScript, But == is the equality operator that converts the operands if they are not of the same type, before making the comparison. While the === is called the Identity/strict equality which return true if the operands are strictly equal.

Authored by: codeburst.io

JavaScript Variables, Scope, and Hoisting

By Alex Mungai Muchiri, Alibaba Cloud Tech Share Author. Tech Share is Alibaba Cloud's incentive program to encourage the sharing of technical knowledge and best practices within the cloud community. It is mandatory to understand the concept of variables if you are seeking to learn any programming language.

Authored by: Codementor

Prototypes and Inheritance in JavaScript

By Alex Mungai Muchiri, Alibaba Cloud Tech Share Author. Tech Share is Alibaba Cloud's incentive program to encourage the sharing of technical knowledge and best practices within the cloud community. JavaScript is a language that uses prototypes very widely to share methods and properties of objects.

Authored by: Codementor


Learn TypeScript: Why Should You Use It?

Being a JavaScript developer is a commitment to always be on the alert. The learning curve never stops at a precise moment. So you're always juggling numerous questions in your head. "Should I learn Vue.js, React... both?" "What about functional programming? Looks interesting!" "Is server-side JavaScript any good?" "Should I learn TypeScript?"

Authored by: Snipcart


Building a Search-Engine Optimized PWA with Angular - Part 2

This is Part 2 of a 2 Part Series. Click here to read Part 1 In Part 1, we created a new Angular App from scratch using the Angular CLI. Then we added Bootstrap to it so that we could use its simple but helpful HTML and CSS templates.

Authored by: Bit

Sanity Check: Shared Style URLs And Emulated Encapsulation Attributes In Angular 6.1.10

Ben Nadel performs a sanity check to see how shared style URLs interact with emulated encapsulation attributes in Angular 6.1.10. The result is not too surprising: Angular has to duplicate the shared CSS property declarations for each Component Type in order to provide each component with its own unique CSS scope.

Authored by: Ben Nadel

All About Angular Bindings

Angular bindings are a super-powerful mechanism built into the framework. Unfortunately, they can be difficult to remember. This blog post by Alyssa Nicoll will help. Angular provides a powerful mechanism for a wide range of bindings. You don't have to be new to forget which binding is which.

Authored by: Telerik

How to Create Shared Components in Angular Template-Driven and Reactive Form

Back to our topic, How can we make a shared component (such as dropdown) for these both approaches? Angular has the answer for this by using ControlValueAccessor . It is an interface that acts as a bridge between the Angular forms API and a native element in the DOM.

Authored by: codeburst.io


Understanding React v16.4+ New Component Lifecycle Methods

A hands-on guide to React's new component lifecycle methods; build a simple music player! ReactJs v16.3 introduced significant changes in component lifecycle. There has been a few deprecations of methods as well as addition of new methods. In this post, we will inspect the new component lifecycle methods of React v16.3+.

Authored by: Mahesh Haldar

Use the React Profiler for Performance

With React, building high performance web applications became very easy because of the framework's re-rendering on the JavaScript virtual DOM, which helps it to quickly determine the changes needed when a user event is occurring.

Authored by: Scotch Development

React Form: Real Time Validation Using State

We have disabled submit button before all field validation are passed. Great! But this will also cause confusion for our users since there is no hint of what is wrong with the form. We have to let our users know which input is not passing validation, so let's go one step further and add input validation feedback as our user type into our input elements.

Authored by: NathanSebhastian

Top 5 Performance Tips for React Developers

Do your React apps need a performance boost? Check out these top five things you can do today to increase the performance of your apps.

Authored by: Blanca Mendizábal

React with RxJS for State Management Tutorial

Recently a client of mine inspired me to learn RxJS for State Management in React. When I did a code audit for their application, they wanted to get my opinion about how to proceed with it after only using React's local state. They reached a point where it wasn't feasible to only rely on React.

Authored by: Robin Wieruch


Advanced Vue Debugging: A Detective Story

Modern frameworks like Vue.js do a ton for you. But when something goes wrong, how do you debug it? This article will walk you through handy debugging techniques for Vue app development.

Authored by: Kevin Ball

Getting Started with Vue Plugins

In the last months, I've learned a lot about Vue. From building SEO-friendly SPAs to crafting killer blogs or playing with transitions and animations, I've experimented with the framework thoroughly. But there's been a missing piece throughout my learning: plugins.

Authored by: CSS-Tricks

Vue.js Authentication System with Node.js Backend

In this tutorial, we'll explore different authentication types for JavaScript applications and build a Vue authentication system with a Node.js backend.

Authored by: Jscrambler


How to build a telegram bot using Node.js and Now

Introduction Serverless deployment, the intriguing topic grabbing a lot of attention from rookies and veterans alike in the tech ecosystem is finally here. In this article we'll be taking a practical approach to serverless deployment, also referred to as FaaS (Function as a Service). Se

Authored by: Scotch Development

Build a Simple Web App with Express, React and GraphQL

Today I'll show you how to use Express to create a GraphQL server, as well as how to create a single-page app in React that uses Apollo's client to query the server.

Authored by: JavaScript Kicks

Build an Uptime Monitor in Minutes with Slack, Standard Library and Node.js

Making sure your website or API is up and running well can be a round-the-clock job. To help in this tireless effort, we can make uptime reports and status alerts visible within the tools we frequently use, like Slack. With a platform like Standard Library, an integration like that is nearly effortless.

Authored by: Steve Meyer

Libraries and Tools

Top Javascript Framework used in 2018

Looking over among even the most mainstream JavaScript systems for another venture can be a testing procedure. There is by all accounts another bunch picking up prevalence consistently, and the past ones don't appear to lose steam either!

Authored by: Codementor

11 Material Design UI Component Libraries for 2018

React, Vue and Angular UI component libraries built with Google's Material Design: a specification for a unified system of visual, motion, and interaction design. React Material UI, Vue MD and more...

Authored by: Bit

Shine a light on JavaScript performance with Lighthouse

Unsure if the cost of JavaScript is too high for your user-experience? 🙃 Lighthouse has a JavaScript Execution audit that measures the total impact of JavaScript on your page's load performance: Try it. It's in the Chrome DevTools Audits panel today. It's also available via WebPageTest.

Authored by: Addy Osmani


Components testing in React: what and how to test with Jest and Enzyme.

Start writing here.Testing React components may be challenging for beginners as well as experienced developers who have already worked with tests. It may be interesting to compare your own approaches with the ones we use in our project.

Authored by: Codementor

Stress Testing React Easy State

The first part is my usual intro the React Easy State. Skip ahead to the next section if you are already familiar with it. React Easy State is a transparent reactive state management library with two functions and two accompanying rules. Always wrap your components with view().

Authored by: Miklós Bertalan

JS unit testing with karma and jasmine

JS-unit-testing , testing, unit-testing, karma, jasmine, code4mk. "JS unit testing with karma and jasmine" is published by Mostafa Kamal in codeburst

Authored by: Mostafa Kamal


Build a Todo App with Electron

Build a Todo App with Electron In this tutorial, we will build a todo app in Electron, covering topics like data storage, multiple windows, and browser to browser communication. Prerequisites I'm assuming you've read the previous tutorial and have a basic idea of the main process and browser processes.

Authored by: codeburst.io

Searching for Points of Interest with the HERE Places API in a Vue.js Application

When I'm looking at a map, I'm typically using it for two reasons. I'm either trying to navigate between two points or I'm trying to find a certain point of interest on the map. HERE provides an API for finding nearby places using REST and JavaScript, but what if you wanted to use a modern framework?

Authored by: HERE Developers at Disrupt 🌉

How to autogenerate forms in React and Material-UI with MSON

Implementing great forms can be a real time-waster. With just a few lines of JSON, you can use MSON to generate forms that perform real-time validation and have a consistent layout. And, MSON comes with a bunch of cool stuff like date pickers, masked fields and field collections.

Authored by: Geoff Cox

Create a Spreadsheet using React and share its components with Bit

This tutorial shows you how to build a simple Google Sheets or Excel clone using React, and how to share its reusable components for your other projects or your team using Bit . Creating a stripped down version of a spreadsheet like Google Sheets is really a good example of showing many of the capabilities of React.

Authored by: Flavio Copes