JSK Weekly - May 15, 2019

If you are interested in Web Components and thinking or you are already neck deep in creating them, you should read about "10 Things You Are Doing Wrong in your Web Components" by "arei".

We can recommend one more great article regarding Web Components "Prototyping with Web Components: Build an RSS Reader" by Doron Tsur.

Since expanding knowledge about JavaScript is always a must in our line of work, we can also recommend to check out "12 tips for writing clean and scalable JavaScript" by Lukas Gisder-Dubé and "How to run async JavaScript functions in sequence or parallel" by James Sinclair.

Finally, we have something for TypeScript fans and everyone that wants to learn or expand knowledge about TypeScript. "Understanding Generics in TypeScript" by Nwose Lotanna.


10 Things You Are Doing Wrong in your Web Components

There are lots of articles detailing how to build a basic Web Component, but almost no article details how to solve some of the gotchas once you start down that road. That's what this article serves to do; point out some of the things every Web Component developer is overlooking and to which they should probably be giving more consideration.

Authored by: arei

Prototyping with Web Components: Build an RSS Reader

Prototyping with Web Components: RSS Reader How to prototype an application using web components, ES6 modules and friends. Build RSS feed with lit-html, lit-element, Bit etc. Standardize and learn...

Authored by: Bit

How Popular is JavaScript in 2019?

When people ask me what language they should learn, I tell them to start with JavaScript. Why? JavaScript is the standard programming language of the web, and the software you write with JavaScript will be usable by everybody. Software ate the world, the web ate software, and JavaScript ate the web.

Authored by: Eric Elliott


12 tips for writing clean and scalable JavaScript

Of course, you can group multiple functions into one module (and/or class, if you wish) if these functions are used in a similar way or do similar things. For example, if you have many different calculations to do, split them up into isolated steps (functions) that you can chain.

Authored by: Lukas Gisder-Dubé

How to run async JavaScript functions in sequence or parallel

The async and await keywords are a great addition to Javascript. They make it easier to read (and write) code that runs asynchronously. But they can still be confusing. Asynchronous programming is hard. Anyone who tells you differently is either lying or selling something.

Authored by: James Sinclair

Using Array reduce

Every developer who specializes in any programming language will tell you there's a powerful tool the language provides that they rarely use and wish they knew more about. For me, it's Array.prototype.reduce. I quite enjoy the other Array methods like map, filter, and find, but reduce is one that I knew was powerful but never ...

Authored by: David Walsh


Modeling Schema.org Schema with TypeScript: The Power and Limitations of the TypeScript Type System

Recently, I published schema-dts ( npm, GitHub), an open source library that models JSON-LD Schema.org in TypeScript. A big reason I wanted to do this project is because I knew some of TypeScript's features, such as discriminated type unions, powerful type inference, nullability checking, and type intersections, present an opportunity to both model what Schema.org-conformant JSON-LD looks like, while also providing ergonomic completions to the developer.

Authored by: Eyas

Introduction to TypeScript

Introduction to TypeScript - DiscoverSDK Blog

Authored by: DiscoverSDK

Node.js TypeScript #13. Sending data between Worker Threads

The Worker Threads give us quite exciting features when compared to, for example, child processes. In this article, we create our instances of the MessageChannel to communicate with the Worker Threads. Aside from that, we also share the data between them: it's something that is not possible with child processes.

Authored by: Marcin Wanago

Understanding Generics in TypeScript

TL;DR: in this article you will be introduced to the concept of generics in TypeScript with simple and clear terms for developers who are new to the concept to follow and get motivated enough to adopt it in their workflow.

Authored by: Bit


About those Side-effects in Observables, an Angular Use Case

When testing a codebase in Angular Ivy, I ran into a bunch of test failures I wasn't seeing before. ExpressionChangedAfterItHasBeenCheckedErrors were being thrown around. In debugging these failures, I found that many of them are the results of side-effects in Observables and Observable pipe operations.

Authored by: Eyas

Getting Started with App Shell using Angular 7

A good user experience is one of the essential aspects to consider in web or mobile application design. One of the things that impact user experience is application startup performance. To improve startup experience, we have the App Shell to the rescue.

Authored by: Swathi Prasad

Performing A SublimeText-Inspired Fuzzy Search For String Matching In Angular 7.2.15

At InVision, my team is considering working on a new search feature. And, when it comes to "search", one of the most delightful user experiences that I've come across is the "fuzzy search" performed by SublimeText's "Goto Anywhere" command. The "Goto Anywhere" anywhere command takes your search query and gracefully matches it across non-sibling substrings in your file system.

Authored by: Ben Nadel


Recursive React Components

Often times, particularly when dealing with complex nested data, React developers need to re-think the way they're structuring their component trees. In certain cases, when the data requires it, component trees can't be rendered in an iterative fashion, instead React developers must rely on recursion to display their data.

Authored by: Bitovi

Starting with React 16 and Three.js in 5 minutes

Probably we want to use it together with React. The common pattern of starting anything with React is to type "react + anything" into a Google to find some wrappers. But that's not the case with Three.js. Let's find out why.

Authored by: Bit

Increase your App's performance with React hooks and the React Dev Tools

All graphs above clearly indicate what component is causing the problem: Histogram. Especially rendering the second histogram (the right one) is taking up a lot of time (402.8ms!) and I'm not even dragging that one. We have detected the problem! Now it is time to fix it and optimise the components performance.

Authored by: Koen Poelhekke

React: Components & Props

Components in React are independent, reusable pieces of UI. A typical web page may consist of a navbar, content area & footer. In React, we create these areas as components (which in turn may consist of other components!). It saves on code duplication & as we'll see, allows for an immense amount of flexibility.

Authored by: Tim Robards

Discovering patterns with React hooks

Discovering new patterns is relatively rare when working with established technologies, but every now and then a new idea comes up that stirs things up within some ecosystem. Enter React hooks. Hooks enable a drastically different way to build stateful components in React, which means that they also invalidate a lot of the established patterns.

Authored by: Pony Foo


Introducing Create-Nuxt-App 🍀

Now we have seen create-nuxt-app, let us also take a look at the other shiny features that also shipped with 2.0 The new Nuxt version 2 shipped with the latest Webpack version 4. Webpack 4 has been seriously adopted by industry giants because of the stunning speed of boot-up and re-compilation.

Authored by: Bit

Vuex showdown: Mutations vs. actions

During the recent Vue.js Amsterdam conference, Evan You gave a talk that mentioned the possible roadmap for Vuex: At the 25-minute mark, we see, " Simplify concepts by merging mutations & actions. " So now is a good time to discuss what actions and mutations are really for and what this change could mean.

Authored by: LogRocket


New ECMAScript Modules in Node v12

If you're familiar with popular JavaScript frontend frameworks like React, Angular, etc, then the concept of ECMAScript won't be entirely new to you. ES Modules have the import and export syntax we see often in frontend frameworks. Node uses CommonJS which re

Authored by: Scotch Development

How to publish a npm package?

A tutorial on how to publish a npm package to the npm registry with Node, Babel and Webpack for getting started as an open source contributor ...

Authored by: Robin Wieruch

Libraries and Tools

Tl;Dr GraphQL

GraphQL is a query language for Your API, and a server-side runtime for executing your queries. It is not tied to any specific database engine it is up to you to resolve the query. To create a GraphQL service you define types and their fields, then provide functions for each field on each type.

Authored by: Khaled Garbaya

Is Gatsby really that great?

In their own words, "Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps. " Why would we need a framework on top of a framework (or a library)? Isn't React a tool that "helps developers build websites and apps"?

Authored by: Luke Joliat


Using TypeScript aliases in Cypress tests

How to configure TypeScript and Webpack path aliases to load application code from Cypress tests In this post I will show how you can write end-to-end tests in TypeScript and how to import from test code your application source files using path aliases like this: instead of brittle relative paths

Authored by: Gleb Bahmutov


How To Build Android Apps With Node JS Using Android JS

This is post about new Node JS framework for building android app, which provide Node JS runtime environment along with native environment in your app and lots of Native API's.

Authored by: Harendra Chhekur

Selection Sort Algorithm in JavaScript

Let's come up with it together now. Based on what we described for how the algorithm works, we know that the smallest remaining element will always be found and sorted first. So after one iteration, the smallest element will be at the 0 index, after two iterations, the two smallest elements will be sorted, and so on and so forth.

Authored by: Jim Rottinger