JSK Weekly - October 3, 2018

Goodbye JavaScript, Hello WebAssembly

Web development has always been synonymous with JavaScript development. That is, until now. A new form of web development is starting to emerge that promises to provide an alternative to JavaScript. As a software developer with 15 years of experience in web development, this new direction has captured my interest.

Authored by: Ed Charbeneau

An introduction to Custom Elements

Custom Elements, a subset of Web Components, are one of the coolest things to hit the web in my opinion. Effectively, they allow us to build out components that are native to the web platform, instead of using intermediary libraries or frameworks like React, Angular, Vue, or otherwise.

Authored by: James Robb

A crash course on Serverless with AWS - Image resize on-the-fly with Lambda and S3

Handling large images has always been a pain in my side since I started writing code. Lately, it has started to have a huge impact on page speed and SEO ranking. If your website has poorly optimized images it won't score well on Google Lighthouse.

Authored by: Adnan Rahić

Impress interviewers with recursion in JavaScript with ES6 features

There's nothing as flashy and useful for JavaScript interviews than recursion. If you just want to be impressive with recursion in JavaScript, here are some semi real-world (technical test type) examples. The short definition of a recursive solution to a problem (in computer science) is: don't use iteration.

Authored by: Hugo Di Francesco

A comparison of Server Side Rendering in React and Angular applications

Handling API calls with SSR Since no application is complete without API calls, we will also implement a sample api call to fetch data from https://jsonplaceholder.typicode.com/posts and show it on the UI. This would also help us understand how to make API calls on the server side and render them to the template before returning the response back to the client.

Authored by: gitconnected

JavaScript Essentials: Types & Data Structures

Essentials is a series that covers the most used and important methods for X topic. It's a series for developers who know another language or someone who wants a quick start. In this post, we cover types and data structures.

Authored by: Evan

JavaScript typeof

JavaScript has a pretty basic typeof operator for the purpose of type-checking. However, you will notice that using this operator could be misleading, as we will discuss in this article.

Authored by: Glad Chinda

Using Strings in JavaScript

In software development, working with strings is a common problem. We often read, process, and write text files, perform logging on the activities of a system, or analyze user input. Learning how to perform string operations is essential in any programming language. Let's first recap what you already know about strings from the JavaScript fundamentals article.

Authored by: Zsolt Nagy

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.

Authored by: Kevin Ball

Flatten Arrays in Vanilla JavaScript with flat() and flatMap()

An overview of two new methods available on the Array prototype in JavaScript: flat and flatMap.

Authored by: Alligator

Object property descriptors. Getters and setters

With the properties of objects, you can set more than just their values. In this article, you can learn what is the property descriptor and what you can achieve with it. Among other things, you can use getters and setters and the article also explains their concepts.

Authored by: Marcin Wanago

Setting up a monorepo with Lerna for a TypeScript project

It is often quite useful to use a single repository for maintaining an entire project with all of the packages in it. There is a rumor that Google and Facebook use a single repository for all of their projects. This solution can be quite handy when a company uses a similar technology and when projects share common dependencies and files.

Authored by: LogRocket

Preloading Lazy-Loaded Feature Modules In Angular 6.1.9

Ben Nadel explores the preloading of lazy-loaded feature modules in an Angular 6.1.9 application. The Angular router makes this incredibly easy through the PreloadAllModules strategy. And, what's more, it dovetails perfectly with the "loading indicator" concept in his previous post.

Authored by: Ben Nadel

Digit Only Directive in Angular

Natural numbers are frequently used as Account Numbers, Transaction IDs, Job Codes, etc. All these numbers are critical to identify domain models and ensure data integrity. We often get requirements that the input boxes for entering these numbers should only allow digits (0,1,2,3,4,5,6,7,8,9) in order to avoid human errors.

Authored by: codeburst.io

Smart Tables with Angular

In this tutorial, we are going to learn how to integrate and use ng2-smart-tables with Angular 6. The ng2-smart-table is a library that is available to us as an npm package and pre-defined components and directives for sorting, searching, filtering and displaying data in the form of a table.

Authored by: Aman Mittal 🖖

Reusable Components in React - A Practical Guide

Normally in vanilla JavaScript, when you want to re-use some code, you write it as a function. In React, however, you write your code as a component. We can simply create a class and then place multiple instances of that class wherever we want.

Authored by: Rajat S ⌨️

How To Save Multiple Checkboxes Values in React js

In this tutorial, we will see How To Save Multiple Checkboxes Values in React js. If you are building a web application, then there are lots of form controls we need to create an interactive user form. The checkbox is one of the most used form control in a web application.

Authored by: KrunalDLathiya

The What, Why and How of React (Styles)

Hello, this is my third post about the React ecosystem, and today is the turn of one of the most important parts in the development of any FE, the styles.

Authored by: The Practical Dev

Add React.js to your existing asp.net application

Life is really simple, but we insist on making it complicated. Confucius There was a time, if you wanted to make your web application a little more "responsive" and less chatty with the backend, you could just add a reference to jQuery and you'd be off and running.

Authored by: Jon Hilton

Dynamic imports, React and Redux

When it comes to large web apps, code organisation is important. It helps to create performant and easier to understand code. One of the simplest strategies that can be used to aid with this is code splitting. With tools like Webpack the ways that you can split your code into smaller parts are simple.

Authored by: codeburst.io

Aurelia Release Notes - Early October 2018

This round of releases to aurelia-templating and aurelia-templating-binding add support for a new let element in your templates. This is an Aurelia vNext feature, which after working out the syntax and semantics of vNext, we were able to port back to the current version of Aurelia with the same behavior.

Authored by: Aurelia

Writing multiple Vue components in a single file

Writing multiple components in one file is a pattern from React where some files contain multiple components. Some of those components are "pri

Authored by: Hugo Di Francesco

Managing multiple central stores with Vuex

Introduction While building applications, one of the best practices is to make your application architecture component driven by using the "separation of concerns" concept. This also applies when building applications with Vue. As you follow a component driven architecture, at some point in time, you'll need to share data among these components.

Authored by: meshileya

Create a Discord bot using Node

Discord provides a great documentation for developers at https://discordapp.com/developers/docs/intro . Make sure you check it out! First login to https://discordapp.com and create an account if you haven't one already. Then head to https://discordapp.com/developers/applications/ to create the bot application: Click the "Create an application" button.

Authored by: Flavio Copes

The State of NoSQL with MongoDB and Node.js 2018

Types of NoSQL Key-value stores: Every item in the database is stored as a pair of key(attribute) and its value. Popular examples are Riak, Voldemort, and Redis. Use cases are to store user preferences or session data. Column-based stores: Each storage block contains data from only one column, and are optimized for queries over large datasets.

Authored by: Priyesh Patel

Simple Restful Api's with NodeJs and ES6.

demystifying the API creation in node and why you should use node.

Authored by: Codementor

Using Parcel In A Vue.js App

In this tutorial, I will be showing you how to use Parcel in a Vue.js application completely from scratch.

Authored by: Scotch Development

Introduction to Koa.js

Originally posted on my blog Koa.js is a minimal Node.js web framework developed by the team behind Express.js. Koa uses async functions, this gives you advantage over callback functions. By default Koa does not come with any middlewares. That makes Koa very minimal and elegant.

Authored by: ᴍᴜʙᴀʀɪꜱ ɴᴋ 🚀

Learn how to build Functional Front-ends with ClojureScript and React.

You probably heard about React, and did you hear about Reagent? Reagent is a minimalistic interface between ClojureScript and React. ClojureScript, just as Elm, ReasonML and EcmaScript compile/transpile to JavaScript. With Reagent you can define components using nothing else but plain ClojureScript functions and data structures.

Authored by: The Practical Dev

How to Create a PWA Game using Preact in 5 steps (Tutorial)

In this article, we will create a Progressive Web Application!Don't worry, we won't make another todo list. Instead, we will build a fun game that satisfies Google's checklist for building a PWA. You can play it here and check the final source code on Github. Let's first understand what we want to achieve.

Authored by: Seif Ghezala 🇩🇿

How to Test React Components using Jest and Enzyme

Click here to go to the repo and branch. If you'd like to go straight into testing, please go to section 2 of this blog post. As you can see the app is simple. It has a header, an input field which takes the query and based on that calls to the Guardian API and returns the results of related articles in a list format.

Authored by: Linh 🥔

Separating logic from Express routes for easier testing

Have you ever been confused on how to structure your Express applications in a way that makes them testable? As with most things in the Node.js world, there are many ways of writing and structuring Express apps.

Authored by: Corey Cleary

FP Unit Testing in Node - Part 1 of 6

Writing Functional Programming in Node is one challenge, but unit testing it is another. Mainly because many middlewares in Node use the connect middleware approach, and libraries in Node are not written in a pure function way.

This six part series will go over how to make the unit testing part of easier, some strategies to tackle common impurity problems, and hopefully enable to make 100% test coverage a common part of your job vs. the "not worth the client investment" people commonly associate with it.

Authored by: JavaScript Works

Tests Coverage is Dead - Long Live Mutation Testing

In today's industry, having a great product might not be enough. Competition lurks around the corner, and a key advantage for market leaders is their ability to move fast without breaking things. Companies are becoming more and more quality obsessed. As we all know, we are very spoiled as end users.

Authored by: Yotam Kadishay

A gentle introduction to testing vue applications.

In this tutorial, we'll cover an introduction to testing vue-js applications and components. We'll be testing this simple todo application. The source code for this application lives here. To keep things simple, this application is built with one component, App.vue. Here's how it looks: // src/App.vue editing ?

Authored by: Codementor

Intro to Generative Art

Generative art can be an intimidating topic -- it seems like there is a lot of math involved, and art is tricky in itself! But, it doesn't have to be difficult -- you can build some really cool things without a math or art degree.

Authored by: Ali Spittel 💁

Good logging

Logging is hard. Here is my advice: Use debug module.Module debug is extremely useful because it allows to dynamically turn on messages from various modules. All my NPM modules use it with convention

Authored by: Gleb Bahmutov

Converting XML to JSON using Recursion

The other day, I was working on an app which needed to fetch data from a third party rest api, and what happened next is the thing of the one of the worst nightmares of a JavaScript developer. The server sent back response in.. gasp..

Authored by: Codementor

Bitmask: There Is Space at the Bottom

Tip: reduce bundle-size and app weight using Bit . Organize your component collection, choose and use the best ones, and share with your team. It's OSS. Bits in a number can be set either on or off in a single bitwise operation. What is a bitwise operation?

Authored by: Chidume Nnamdi

Terrible use cases for JavaScript proxies

Proxies enable us to do runtime meta-programming by allowing us to intercept and redefine the behaviour for intrinsic operations such as property getters, setters, value assignments & call operations.

Authored by: Casper Beyer