JSK Weekly - December 11, 2019

Happy #NationalAppDay! Who knew? In celebration, why not share your favourite ones today, especially the ones that make your life easier or that you predict for the future! Or just check out John Au-Yeung's story, "How to Add a Date Picker to Your Vue App" and Tushar Tuteja's "Using ES6 for your Node.js Application running on Express, using Babel" to get you started!

Looking ahead though, Dwayne Charrington advocates for Aurelia in "Reasons To Use Aurelia in 2020" and Quincy Larson summarises some of Brad Traversy's main insights from a published overview of what he recommends you learn to become a web developer in 2020 in "Web Development in 2020: What You Should Learn."


How is bit.dev different from Storybook?

A short comparison of two different tools and when to use them. Bit.dev and Storybook are two quite different tools. At first glance, it might seem that both provide a visual showcase for your UI components, and can be used to visually document and organize UI components.

Authored by: Bit

Web Development in 2020: What You Should Learn

Today one of my favorite teachers, Brad Traversy, published an overview of what he recommends you learn to become a web developer in 2020. Brad cuts through a lot of the hype you hear on social media. His advice is practical and realistic. And I agree with him on pretty much everything he recommends you learn.

Authored by: freeCodeCamp.org

What's new in Firefox 71: CSS subgrid and more Blog

Firefox 71 has just been released, with support for the CSS subgrid. This is huge news for anyone working with web layouts, as it allows us to easily align items to their parent's grid container. Up until now, when we declared a grid container, only its direct descendants could be aligned to the specified columns/rows.

Authored by: LogRocket

Web security 101 Blog

Web security is a huge topic. The things you need to be aware of in order to keep your users (and yourself) safe can be overwhelming. Nevertheless, there are a few concepts and recommendations that solve the most important problems and are easy to learn and understand. Let's take a look.

Authored by: LogRocket

Is it time to move on from Virtual DOM(ReactJS)?

Web Component specification enables capabilities to extend existing HTML elements. This gave rise to HTML extension model (Custom HTML elements )was picking up. However, it was nowhere close to being adopted by the browsers natively, but this inspired a new era of component-based JS frameworks, including AngularJS(by Google) and React(by Facebook).

Authored by: Shashank Sharma

Kubernetes log aggregation Blog

So you're the proud new owner of a Kubernetes cluster and you have some microservices deployed to it. Now, if only you knew what the heck they were all doing. Implementing log aggregation is an imperative in the world of microservices. Things can get out of hand quickly!

Authored by: LogRocket


5 Top Cloud IDEs for JavaScript Developers

Top 5 JavaScript IDEs you should know in 2020 Developers have traditionally been writing software using text editors on local machines but recently, habits have started to change. A rise in the popularity of cloud-based services has led to an increase in cloud-based IDEs too.

Authored by: Bit

Why does JavaScript have -0?

Since the early versions of JavaScript there have always been two ways of performing equality comparison: Abstract Equality Comparison using == aka "double equals" Strict Equality Comparison using === aka "triple equals" ES6 delivered a third option in the form of the method.

Authored by: Thomas Barrasso

Different ways to measure performance in JavaScript

To find how much time a function, loop, or any operation takes to execute in JavaScript, we can use one of the following tools: Using console.time and console.timeEnd Using the performance.now method Using online performance testing tools The console.time and console.timeEnd will print the number of millisecond taken to execute the code between the function calls.

Authored by: jagathish

Three ways to merge arrays in JavaScript

We can loop through the array source array which need to be pushed , then add elements one by one function push(fromArray, toArray) { return toArray; for(let i = 0, len = fromArray.length; i { ),newArray.push(item); return newArray; array1);

Authored by: jagathish

AI in browsers: Comparing TensorFlow, ONNX, and WebDNN for image classification Blog

Libraries that perform image recognition in the browser, such as TensorFlow, ONNX, and WebDNN, allow developers to create dazzling AI-enabled web apps.

Authored by: LogRocket


Stop unexpected data from breaking your app with TypeScript Blog

In this article, we'll explore how to use TypeScript type definitions to get better guarantees for runtime safety. We'll show how runtypes and io-ts libraries are used and explain why they exist in the first place. The TypeScript compiler is a powerful friend.

Authored by: LogRocket

Cool New Features Released in TypeScript 3.7

With the release of TypeScript 3.7, some great new features that are included from ES2020 that are now part of TypeScript. The new features include things like optional chaining, nullish coalescing, check for uncalled functions, and more. In this article, we'll look at some of them in more detail.

Authored by: John Au-Yeung

How to write correctly typed React components with TypeScript Blog

React and TypeScript make a powerful pair, but if you're just starting out, you'll need to understand how to write correctly typed components.

Authored by: LogRocket

Introduction to TypeScript Interfaces

The big advantage of TypeScript over plain JavaScript is that it extends the features of JavaScript by adding type safety to our program's objects. It does this by checking the shape of the values...

Authored by: John Au-Yeung

Utility Types in TypeScript

Flexible Types for Every Occasion I worked on a project recently where I had to write a whole bunch of data in JSON. Let's not get too deeply into why - suffice it to say that I was pursuing the simplest solution to a problem.

Authored by: Jamie Morris


Angular 8|9 Checkbox Tutorial with Multi Checkbox Validation - positronX.io

A step by step tutorial on handling multiple checkboxes in Angular 8|9, we will learn how to create, select and unselect multiple checkboxes and validate checkboxes with Angular Reactive Forms. A checkbox is also known as the tick-box and it is a Graphical User Interface widget that allows a user to choose one or many ...

Authored by: Digamber Singh

Using $any() To Temporarily Disable Type-Checking Within A Component Template In Angular 9.0.0-rc.4

In recent releases of Angular, type-checking has been extended to include our component templates. Which is awesome for catching compile-time bugs. However, the type-checking within our template is not quite as clever as the type-checking within our TypeScript code. For example, type-checking doesn't appear to work well with discriminated unions.

Authored by: Ben Nadel

Create Data Tables with Ionic 4 and ngx-datatable - positronX.io

A complete step by step Ionic 4 Data Table tutorial, create a data table in an Ionic / Angular app and learn how to show relevant information in tabular form using the ngx-datatable plugin. The purpose of this post is to teach you how to create data tables in the Ionic app quickly.

Authored by: Digamber Singh


Building reusable UI components with React Hooks Blog

In React, a reusable component is a piece of UI that can be used in various parts of an application to build more than one UI instance. For instance, we can have a button component display with different colors in several parts of our application.

Authored by: LogRocket

Learn React Native Animation by Building Circular Progress Bar

Today we are going to build a circular progress bar using the Animated library of React Native and three semicircles. Let's understand the concepts first then we will dive into coding. We have a base outer circle that serves as a container for the other three semicircles.

Authored by: Shad Mirza

Building The Same Application With and Without React Hooks, Part 1

With the release of React Hooks, many people may be wondering, what is the benefit of hooks anyway, or even what are hooks? Hooks are functions that allow you to "hook into" React state and lifecycle methods from within function components. An example of a "hook" is useState.

Authored by: Sukrit Walia

Building an e-commerce website with React and 8base Blog

In 2018, the total value of online shopping markets was estimated to be around $2.84 trillion. Companies like Amazon, Walmart, and Alibaba top the charts. Through their massive platforms, these giants have opened a new window for small businesses to also operate and own their e-commerce stores.

Authored by: LogRocket


Reasons To Use Aurelia in 2020 - I Like Kill Nerds

It is almost the year 2020, and you are still not using Aurelia, say it isn't so. No more excuses, it's time to charge up your Bluetooth keyboard and mouse batteries, make yourself a coffee and start using Aurelia. Version 2 is coming and it's going to be FAST While Aurelia 1 is plenty fast, ...

Authored by: Dwayne Charrington


How to Add a Date Picker to Your Vue App

Subscribe to my email list now at Follow me on Twitter at https://twitter.com/AuMayeung http://jauyeung.net/subscribe/ . For many applications, recording dates is an important feature. Having date picker inputs is often a handy feature to have. Fortunately, many developers have made date picker components that other developers can easily add to their apps.

Authored by: John Au-Yeung

Filtering Lists Dynamically With Vue on the Server Side is Easier Than You'd Think

I recently attended the ARTIFACT conference in Austin, TX, and was inspired by a few talks about accessibility through the lens of site performance. It became clear to me that there is this tendency to rely on big JavaScript frameworks to handle the work - like React, Vue, and Angular - but that can be overkill in some cases.

Authored by: CSS-Tricks


Setting Up a Logging Infrastructure in Nodejs

How to set up a logging Infrastructureusing using ElasticSearch, Fluentd, and Kibana. Setting up the right logging infrastructure helps us in finding what happened, debugging and monitoring the application.

Authored by: Bit

Understanding Elasticsearch query body builder in Node.js Blog

Elasticsearch query body builder is a query DSL (domain-specific language) or client that provides an API layer over raw Elasticsearch queries. It makes full-text search data querying and complex data aggregation easier, more convenient, and cleaner in terms of syntax. In this tutorial, we will learn how writing queries using the builder syntax offers more advantages over raw Elasticsearch queries.

Authored by: LogRocket

Using ES6 for your Node.js Application running on Express, using Babel

We all love ES6 syntax, and we have been using it in our front-end applications build on react and other frameworks. It would be nice to be able to use ES6 syntax for our backend nodejs application. It is very easy to set up and pretty straightforward.

Authored by: Tushar Tuteja

Generating video previews with Node.js and FFmpeg Blog

Every website that deals with video streaming in any way has a way of showing a short preview of a video without actually playing it. YouTube, for instance, plays a 3- to 4-second excerpt from a video whenever users hover over its thumbnail.

Authored by: LogRocket

Libraries and Tools

10 Awesome React Native UI Component Libraries You Should Know

Here is a list of 10 useful React-native UI libraries to get you started on cross-platform mobile app development.

Authored by: JavaScript in Plain English

My Top Favorite Tools for Angular Developers

This tool is not much known, but it packs power. Angular playground provides a base where you can test and play with the components in your Angular project in isolation. You can pass different parameters to the component and you will see them rendered in your browser locally.

Authored by: Bit

15 VS Code Extension to Save Your Time and Make You a Better Developer

VS Code has a marketplace, and it contains a collection of plugins that can be installed into the text editor to make it more powerful. We can open market place by selecting Extension option in View...

Authored by: jagathish


Ember.js: Countdown to The New Year- Ember A11Y Testing

This is the tenth in our DecEmber series- "Countdown to The New Year: 31 Days of Ember Addons". We plan to highlight a new addon each day until the new year, and we hope you'll join us for the fun! Let's talk about ember-a11y-testing.

Authored by: EmberJS

How To Easily Mock Moment.js In Jest - I Like Kill Nerds

Recently whilst writing some unit tests in Jest, I had to test some code that took ISO date strings and converted them to formatted date strings, then code that converts them back to ISO strings before it's sent to the server. My first attempt was to use jest.mock and mock each individual method.

Authored by: Dwayne Charrington

Functional Programming

What is Functional Programming?

When I first started learning about functional programming, I had a hard time wrapping my head around it. I understood the concept and the main principles but I lacked the practical knowledge. With this tutorial I want to cover not just the concepts but give you examples and show you how you can apply the functional programming paradigm on your own code.

Authored by: Ferenc Almasi

Functions in TypeScript Part 1 - Parameters

In our last TypeScript article, we looked at loops. In this article, we'll start looking at functions in TypeScript and dive deeper into parameters in TypeScript. Functions are the essential ingredient in writing code that is readable, maintainable, and reusable. So what is a function?

Authored by: DiscoverSDK

How to reverse a tree in JavaScript the Functional way

Trees are the single most important data structure in computer science, after lists. Just about everything you do in your programming career will be related to trees. For example JSON objects, xml, html DOM are tree structures.

Authored by: papadimitriou

React Native || Inheritance || Following DRY Principle

Functional Don't repeat your self(DRY) using composition in React Native

Authored by: Tunvir Rahman Tusher