JSK Weekly - October 24, 2019

Did you know that today, in 1861, the first transcontinental telegraph system was completed, making it possible to transmit messages rapidly (by mid-19th-century standards) from coast to coast? We've certainly come a long way, haven't we? Speaking of which, Vitaly Shalak tells us why optimisation of site performance is a big deal and it’s either 3 seconds or users leave, in "How to Speed up your Web App and Improve Website Performance" on dashBOUQUET.

Struggling with Reduce? Yazeed Bzadough's got you covered in two great pieces on freeCodeCamp, so check out "Learn Reduce in 10 Minutes", followed by "10 JavaScript Utility Functions Made with Reduce."

In the mood to build? Chidume Nnamdi helps with practicing Node.js-terminal skills by building CLI spinners in "Build Command-Line Spinners in Node.js" and/or teaches how to build your own HTML playground in "Build an HTML/CSS/JS Playground" while Fernando Doglio gets busy with how to build a JS game using MelonJS and Tiled in "Building a Typing Game with MelonJS", all on the Bits and Pieces blog.


How to Speed up your Web App and Improve Website Performance

Optimization of site performance is a big deal. It involves multiple aspects to take care of and many of them depend on the site itself, its complexity and elements. However, there is also a set of common optimization methods that work for any site.

Authored by: Shaleynikov

Building a Typing Game with MelonJS

Game development is not something that needs to be restricted to people using Unity or Unreal Engine4. JavaScript game development has been a thing for quite some time. In fact, the latest versions...

Authored by: Bit

RxJS Subjects in Depth

In this article, I want to explore the topic of RxJS's implementation of Subjects, a utility that is increasingly getting awareness and love from the community. In the past, I have used Subjects in a variety of ways, but sometimes not fully understanding what they are internally and what are the main differences with Observables.

Authored by: Bit

Build a Traffic Alert App with TensorFlow.js, Ably and HTML

In this blog post, we will showcase the power of Ably and Tensorflow.js. Everything will be just on the frontend, in just one html. It's a demo, in production you may not do things this way but you can have a feeling how powerful Ably is and how you can use deep learning model with just a few lines of code.

Authored by: Cheuk Ting Ho


A Quick Guide To Linked Lists In JavaScript

What are Linked Lists? They are a way to organize data. It is a list that is made of nodes where every node only has access to its data and knows where the next element in the list is.

Authored by: Kenneth Young Castro

Build an HTML/CSS/JS Playground

Bit, Codepen, Stackblitz, and Storybook has some of the most popular code playgrounds right now. Codepen is used for vanilla HTML/CSS/JS, Bit's Playground is used for Angular, React and Vue, Stackblitz covers a whole lot while Storybook is mainly for React.

Authored by: Bit

7 Simple but Tricky JavaScript Interview Questions

My top stressing things in software development are: The coding interview A toxic manager or teammate Not JavaScript, this, CSS, Internet Explorer, but the 2 above. If you're qualifying as Senior Developer that involves JavaScript, there's a good chance that you will be asked for tricky questions during the coding interview.

Authored by: Dmitri Pavlutin


My List of Uncommon But Useful Typescript Types

Typescript is awesome! It allows developers to use primitive and user-defined types in javascript. Lately, more and more javascript frameworks are providing firsthand Typescript support; Angular...

Authored by: Bit

Loops in TypeScript

In the previous article of our TypeScript series, we explored the topic of operators in TypeScript. Today, we'll examine the issue of loops in TypeScript. It will be no surprise to you that TypeScript is equipped with different types of loops. In TypeScript, we can divide loops into two categories: definite and indefinite.

Authored by: DiscoverSDK

Your basic guide to finally understand TypeScript

As the power of TypeScript has been rising during the last few years, thousands of developers decided to start using this Javascript superset to empower their code even more. This guide aims to be a quick primer for all the developers out there who would like to learn how to use TypeScript and use it in their next project.

Authored by: Piero Borrelli


Google Maps in Angular

Google maps meet Angular. Having such a strong developer community and being used by thousands of developers around the world made Angular ideal for bringing most tools to the framework. bringing Google maps to Angular is one of them, it solved many problems for the Angular users.

Authored by: Bit

Angular 8 Chart.js Tutorial with ng2-charts Examples - positronX.io

Angular 8 Chart.js Tutorial with ng2-charts Examples - Display data using various charts such as pie chart, bar chart, radar, doughnut or bubble chart.

Authored by: Digamber Singh


How to use CSS Modules in React?

CSS Modules are one of the most popular ways for styling React components. Whether you are using only CSS or a more advanced pre-processor like SASS, it doesn't matter for CSS Modules: You can write all these styles in your style sheet files next to your React components.

Authored by: Robin Wieruch

How I Learned React

Have you heard that old saying... "How do you eat an elephant?" ... One bite at a time! ... This article is off to a great start, I can tell. But really, though: breaking up big problems into tiny bite-sized ones is the only way to really get anything done in this world.

Authored by: Dave Ceddia

Svelte vs React: First impressions

3 years ago, Rich Harris created a framework which is called Svelte. The biggest impact on that new framework was that it's not working on Virtual DOM like ReactJS, VueJS or AngularJS. I created exactly same todo list application both in Svelte and React.

Authored by: JavaScript in Plain English

How to use async function in React hooks useEffect (Typescript/JS)?

👾At first glance you could have the idea to do something similar to get your content from a remote API as example. const MyFunctionnalComponent: React.FC = (props) => { useEffect(async () => { await loadContent(); }, []); If you're using Typescript, the compiler should be yielding something like this : Argument of type '() => Promise ' is not assignable to parameter of type 'EffectCallback'.

Authored by: Andréas HANSS


Aurelia Goes Full-time

Last week we hit a major milestone in Aurelia's history: one of our core team members, Fred Kleuver, was funded to work full-time on Aurelia. Thanks to the generous financial contributions of many companies , we've raised enough money and have enough ongoing contributions to fund Fred Kleuver to work full-time on Aurelia for at least the next 6 months.

Authored by: Aurelia


How to make an image uploading app with Vue, Quasar, Firebase Storage and Cordova - Part 2

We'll build a cross-platform mobile app for taking photos and uploading to firebase. In Part 1, we saw how to take a picture and save it to Firebase Cloud Storage. In this post we'll move the uploading to a separate thread via web worker, and use the blueimp library to generate a thumbnail locally and show it while uploading.

Authored by: JavaScript in Plain English

Vue.js Composition API Guide - With Example

I've been learning and playing around with the Composition API that is going to be released with Vue 3. It's awesome, check out this tutorial on it.

Authored by: Erik Hanchett


Impress your colleagues with these NPM tricks

Just like anyone else, developers enjoy knowing some little tricks to show to their colleagues or friends. Today, I have decided to write about some of these keyboard magic that you can use when working with the Node Package Manager ( NPM).

Authored by: Piero Borrelli

Build Command-Line Spinners in Node.js

Practice your Node.js-terminal skills by building your own CLI spinners In my last post, we saw how to implement a progress bar in the terminal using Nodejs. Here, we will continue with the CLI streak and implement spinners in the terminal using Nodejs.

Authored by: Bit

High-performance Node.js concurrency with native "events" package

Naturally, JavaScript considered as a single-threaded programming language with Event Loop implementation as the main driving engine. However, it's not fully like that for Node.js, because they actually implemented Thread Pooling API based on libuv the library, which is a core library for Node.js to access other OS API like networking, file system, etc...

Authored by: Tigran Bayburtsyan

Libraries and Tools

How to Implement Redux in 24 Lines of JavaScript

90% convention, 10% library. Redux is among the most important JavaScript libraries ever created. Inspired by prior art like Flux and Elm, Redux put JavaScript functional programming on the map by introducing a scalable architecture of three simple points. If you're new to Redux, consider reading the official docs first.

Authored by: Yazeed Bzadough

Wrapping CommonJS library in Angular 8 directive on the example of mark.js

And enhancing its functionality with custom logic. Time to time on my daily tasks I have to implement some functionality that was already implemented by someone previously in a neat vanillaJS library, but... no Angular version or even ES6 module of it is available to be able to easily grab it into your Angular 8 application.

Authored by: Angular In Depth

Functional Programming

10 JavaScript Utility Functions Made with Reduce

The multi-tool strikes again.

Authored by: Yazeed Bzadough

Learn Reduce in 10 Minutes

Hopefully this reduces the confusion. In my experience learning and teaching JavaScript, reduce is one of the toughest concepts to crack. In this article I'll try to address one core question... What is reduce and why is it called that? Some of them, according to Wikipedia, are They all hint at the core idea.

Authored by: Yazeed Bzadough

Functional Programming in JavaScript: Introduction and Practical Examples

From pure functions and combinators to compose and containers Functional programming (FP) is a style of coding that's been growing in popularity. There's a lot of content out there which explains what functional programming is, but there's much less about how to apply it.

Authored by: Bret Cameron


Firefox's New WebSocket Inspector - Mozilla Hacks - the Web developer blog

The Firefox DevTools team and our contributors were hard at work over the summer, getting Firefox 70 jam-packed with improvements. We are especially excited about our new WebSocket inspection feature, because you told us in feedback how important it would be for your daily work.

Authored by: Mozilla Hacks

Using Windows 10 and WSL for frontend web development

I've been an exclusively Mac developer ever since I bought a second hand MacBook (remember the all white, plastic ones?). I absolutely loved it and as I got more into software development and discovered the terminal it became hard for me to see how I could go back to Windows.

Authored by: Jack Franklin