JSK Weekly - November 14, 2018

Functional programming is increasingly popular in JavaScript development. Everybody serious about JavaScript should be interested and keep up to date with this trend. If not already, you can start this week with a great article by Eric Elliott "Curry and Function Composition".

React developers has a lot of reading this week. Our top pick is "5 Steps: Create a Size & Position Observer in React" by siriwatknp.

Performance, speed, responsiveness is something we all should be aiming to when building websites and web services. Stacey Tay shared this week his real-life story "How we made Carousell’s mobile web experience 3x faster". Make sure not to miss this excellent article and get some tips that will help you build performant web apps.

Finally, for all people out there that are in the open-source domain, we recommend checking out "How to Secure Your Open Source JavaScript Components: 5 Best Practices" by Manjunath M.


How we made Carousell's mobile web experience 3x faster

Carousell is a mobile classifieds marketplace made in Singapore and growing in a number of South-East Asian countries, including Indonesia, Malaysia, and Philippines. We released a Progressive Web...

Authored by: Stacey Tay

Project structure for an Express REST API when there is no "standard way"

Do any GitHub or Google search for REST API structures using Node + Express and you'll find very few of them follow the same organization. What's even worse is, while there are lots of ...

Authored by: Corey Cleary

Webhooks Explained: What They Are & How to Use Them

What are webhooks? They're central to web development-but do you really know how to use them? Let's go through a simple explanation with easy examples to get started.

Authored by: Snipcart

Sorting algorithms beginners guide

In this tutorial series, we are going to learn different types of sorting algorithms and it's implementation in javascript. Contents Insertion sort Bubble sort Selection sort Merge sort Quicksort Radix sort Insertion sort maintains a sorted list and unsorted list in the same array.it finds the correct position to insert the item in the sorted list that's why it's called insertion sort.

Authored by: Sai gowtham

Build your own interactive JavaScript playground

Recently I spent some time working on my own JavaScript playground called Demoit. Something like CodeSandbox, JSBin or Codepen. I already blogged about why I did it but decided to write down some implementation details. Everything happens at runtime in the browser so it is pretty interesting project.

Authored by: Krasimir Tsonev


Destructuring Assignment in JavaScript

JavaScript is an... interesting... language. I personally love it, but can see ...

Authored by: The Practical Dev

Will (a===1 && a===2 && a===3) (strict comparison) ever be true (in JavaScript)

Extension to traditional JavaScript problem (a==1 && a==2 && a==3) (loose equality) and its solution

Authored by: Anubhav Srivastava

What is "This"?

The "this" keyword always refers to an object, but the value of "this" changes depending on where it is called. When a function is called, an execution context is created that contains a reference to "this". Because the value of "this" changes depending on execution context, we can determine the value of "this" by examining the function's call-site, or where it is called.

Authored by: The Practical Dev


TypeScript Cheat Sheet

This cheat sheet is an adjunct to our Definitive TypeScript Guide and our ES6 and TypeScript for the enterprise developer workshops. Last updated for: TypeScript 2.

Authored by: SitePen

DEF-ensive Development with Typescript

Lets cut to the chase, Javascript as a language is beautiful hot garbage... I just googled "hot garbage" and it just happenned to be javascript related... Ok ok, put down your pitchforks! Es6 is a fantastic set of iterations over the langauge for building solutions for the web, server and mobile platforms. However its still got plenty of issues that crop up here and there.

Authored by: Codementor


Angular Material Table Tutorial With Example

Angular Material Table Tutorial With Example. Angular 7 is released and also Angular Material 7 is released. So let us use Angular 7 Material Table Tutorial

Authored by: KrunalDLathiya

Experimenting With The Runtime Abstraction For State Management In Angular 7.0.3

Ben Nadel starts to experiment with the "Runtime" abstraction that completely encapsulates the notion of state management. This allows for choices like Redux and NgRx to be hidden-away from the View. And, as demonstrated by this experiment, can make room for a much simpler state management methodology.

Authored by: Ben Nadel

Async Pipe "as" Syntax Is Just The $implicit View Context Property In Angular 7.0.3

Ben Nadel digs into the Async Pipe "as" syntax and realizes that it is neither magical; nor does it have anything to do with asynchronous stream-based code. It is simply an aspect of structural directive behavior in Angular 7.0.3.

Authored by: Ben Nadel

Angular polyfill strategies

Cross browser compatibility is a big part of modern web development. While the majority of browsers are now aligning to the new web standards, cross browser issues still occur for different reasons. Sometimes browsers have bugs, different level of support for a new technology.

Authored by: Fabrizio Fortunato

Getting Started with Angular & Kendo UI

A quick overview to help you get started developing your apps with Angular and Kendo UI. Check out the full video series for more.

Authored by: Telerik


5 Steps: Create a Size & Position Observer in React

Have you ever thought about why we have to inspect every time we want to know the width or height of the component? For me, it is really painful and time wasting. If there are a number of width and...

Authored by: siriwatknp

Implementing Smooth Scrolling in React

Implement Smooth Scrolling in React using the NPM package, react-scroll

Authored by: Scotch Development

Understanding React Serverside Rendering - Part 1

Serverside Rendering, SSR for short, is where a frontend framework can render while running on a backend system. The main difference between CSR and SSR is that for SSR, the server responds with an...

Authored by: Rajat S ⌨️

The rules of reusable components

I spend a lot of my time developing new reusable UI components. This means during development I tend to extract UI components that are placed in a shared library or styleguide. These components are reused throughout the entire project. Often having different styles or layouts when integrated into features.

Authored by: Kameron Tanseli

React Anti-Pattern: JSX Spread Attributes

Sometimes it takes learning what not to do to learn what to do. This article is also available in a video format. The examples from this article are available for download. The Anti-Pattern One of lesser known React features is JSX Spread Attributes (I actually have never used them myself).

Authored by: codeburst.io

Build a React To-Do App with React Hooks (No Class Components)

Yes, a to-do app, seems like something we've all done in the past. The great thing about a to-do app is that it covers all 4 aspects of CRUD; Create, Read, Update, Delete. As a developer, we need to know CRUD and a to-do app is the best way to start that learning or refresh some of the things we may be a little rusty on.

Authored by: Scotch Development


Building a Donut Chart with Vue and SVG

I recently needed to make a donut chart for a reporting dashboard at work. I wanted it to dynamically calculate its segments based on an arbitrary set of values, have labels, scale well across all screen sizes and devices be accessible, and cross-browser compatible, among other things.

Authored by: CSS-Tricks


Build a Slack App to Assign GitHub issues in 4 Steps with Node.js and Standard Library

GitHub issues are a fantastic tool to help manage software projects. Whether your repository is public or private, issues provide a great way to track tasks, enhancements, and of course, bugs. But...

Authored by: Steve Meyer

Creating Nodemon in Node.js

Manually restarting an application's process after each change to the codebase can be both exhausting and frustrating. Fortunately, one brilliant developer eventually said "enough!" and decided toput an end to the madness with a very simple package  -  .

Authored by: Maciej Cieślar

How to use NodeJS without frameworks and external libraries

NodeJS is most commonly used with Express framework. Also a bunch of other external libraries are used with NodeJS. The Reason these frameworks and libraries are used along with NodeJS is to make development much more easier and quicker.

Authored by: Aditya Sridhar

Libraries and Tools

Programming a social robot using Cycle.js

Originally published on Medium In this post, I'll show you how to program a so...

Authored by: The Practical Dev

SLF4J: 10 Reasons Why You Should Be Using It

One of the most important aspects of developing an efficient system is to have clean, helpful logs that will help you understand what errors are being triggered, and what information is being processed.

Authored by: Stackify

Top 10 Node.js Developer Tools

Today we will introduce you to some of the popular and commonly used developer tools for Node.js.

Authored by: Stackify

Bringing ES7/ES8 Features to Your Working Environment

Since the release of ECMAScript 2015(aka es6)Language Specification on June 2015(exactly 3 years ago), JavaScript has been on steroids with the introduction of ES modules, arrow function, destructuring, the spread operator, classes, and many other awesome features. Writing JavaScript is now a fun filled experience.

Authored by: Codementor


Testing React with Jest and Enzyme II

Previously we looked at how to setup Jest and Enzyme with some and took a slight detour to look at mocking ES and CommonJS modules with Jest. In this post we are going to look at some additional examples of how to simulate user interaction with a component via Enzyme to create specific test scenarios.

Authored by: codeburst.io

Functional Programming

Curry and Function Composition

Note: This is part of the "Composing Software" series on learning functional programming and compositional software techniques in JavaScript ES6+ from the ground up. Stay tuned. There's a lot more of this to come! b => Numberconst add = a => b => a + b; To use it, we must apply both functions, using the function application syntax.

Authored by: Eric Elliott

Functional JavaScript - Functors, Monads, and Promises

Some people have said a Promise is a Monad. Others have said a Promise is not a Monad. They are both wrong... and they are both right. By the time you finish reading this article, you will understand...

Authored by: joelnet


How to Secure Your Open Source JavaScript Components: 5 Best Practices

How to keep your open source components and packages secure: learn about inventory keeping, swift updates to prevent breaches, security advisors, not copy-pasting snippets and prevent vulnerabilities.

Authored by: Manjunath

Refactoring Journeys - Typescript, Angular, Javascript

I have recently joined a new team at work. Sometimes this is fun but other times it can be hard to navigate! Different teams have different standards and techniques. Its made me a stronger developer...

Authored by: Sam

JavaScript Playing Cards Part 2: Graphics

In the first post I showed how to create playing cards in the command line. Now it's time to bring some visuals in. We will be using functions from the previous post, so make sure to read that first...

Authored by: Juha Lindstedt

Implementing an IoT Network Using Only JavaScript

This article provides briefly explains how embedded software developers can build an Internet of Things (IoT) network using JavaScript on Alibaba Cloud's IoT platform. This tutorial is ideal for...

Authored by: Codementor

A Brief History of Flickering Spinners

A phenomenon we are seeing more of lately is flickering spinners. A brief splash of something spinning flashing before your eyes. Somehow you know it's a spinner but you cannot make out the details...

Authored by: Mikael Ainalem