JSK Weekly - May 1, 2019

This week we recommend you to check out "The JavaScript Developer’s Intro to Crypto" by Eric Elliott.

Safety should always be one of the major concerns when building a web app. That's why you should definitely look into this week's article "Malicious NPM Development Kit" by Joel Thoms.

Vue.js developers will enjoy learning more about mixins in "Understanding Mixins in Vue JS" by Nwose Lotanna.

Finally, we have a treat for all Aurelia developers out there. Make sure to check out "Masked Inputs In Aurelia: The Easy (and reliable) Way" by Dwayne.


The JavaScript Developer's Intro to Crypto

Over the next 2-4 years, the world of software development is going to change a lot. App users are expressing frustration about privacy violations and how little control they have over their own...

Authored by: Eric Elliott

Lessons I Wish I Had Learned Much Earlier In My Web Development Career

In the wake of an Incident, Ben Nadel reflects upon his career and attempts to provide a high-level overview of some of the most important lessons that he's learned along the way - lessons that he wishes he had learned much earlier in his web development career.

Authored by: Ben Nadel

Why and how I built my own GitHub

I'm using Git and GitHub in particular a lot. And when I say a lot I really mean all the time. Recently I tracked a week of work and found that 62% of my working time goes into code reviews. Sometimes I'm checking out a branch locally and trying stuff but really most of my time goes into github.com.

Authored by: Krasimir Tsonev

7 adorable web development tricks

By now, all of major web development languages can be considered as matured. With more than 2 decades of development each, HTML, CSS and JavaScript are globally-respected standards of the web. But, that's just a mere fact leading us to the main topic of this post.

Authored by: areknawo


Common JavaScript "gotchas"

JavaScript has been getting a lot of new, sugary features ever since we got over Harmony, while more features can allow us to write readable, high-quality code it's also easy to go overboard with what's new and shiny and run into some of the potential pitfalls.

Authored by: Casper Beyer

Quick and Simple Search Filter Using Vanilla JavaScript

When building Single Page Applications a feature I frequently find myself adding is a simple search filter. Nothing too in depth, I'll just want a text field to be able to quickly filter over items to find specific ones.

Authored by: Scotch Development


FuseBox - TypeScript-centric code bundler introduction

Introduction and tutorial to what may be Webpack and Rollup successor! 🔥#javascript #typescript #webdev #code #bundling #processing #webpack #rollup #parcel #fusebox #programming

Authored by: areknawo

Node.js TypeScript #11. Harnessing the power of many processes using a cluster

After finding out that Node.js is in its nature single-threaded, we might think that all the cores of your processor are meant to go to waste, but this is not necessarily the case. In the previous part of this series, we prove that Node.js creates additional threads under the hood by itself.

Authored by: Marcin Wanago


Rendering A List Of Mixed Components Using NgFor And NgSwitch In Angular 7.2.13

Ben Nadel demonstrates how to render a collection of mixed data types using the NgFor, NgSwitch, and NgSwitchCase directives in Angular 7.2.13. While this may at first seem daunting, separating the concerns of "layout" from the concerns of "content" causes the solution to present itself naturally.

Authored by: Ben Nadel

Quick Reference For NgModel Values And Template-Driven Forms In Angular 7.2.13

NOTE: This post is primarily a note-to-self for future reference. As I've demonstrated recently, template-driven forms in Angular 7.2.13 can be very dynamic. In fact, you can even listen to the reactive events using a template-driven forms model. However, in the vast majority of use-cases, I just need a good-old Text Input with a simple [(ngModel)] binding.

Authored by: Ben Nadel

Angular Tutorials: Angular Ngclass Directive

In this Angular tutorial, we will see how and why we use angular ngclass directive.

Authored by: Neeraj

@Directive().inputs And @Input() Are Not Functionally Equivalent In Angular 7.2.13

Ben Nadel demonstrates that the @Directive().inputs and @Input() meta-data syntax in Angular 7.2.13 are not functionally equivalent. This reaffirms his belief that the collocating of meta-data at the top of a class is both easier to read and, now, clearly easier to consume across a wider variety of contexts (such as class inheritance).

Authored by: Ben Nadel

Sub-Classing NgForOf In Order To Make It A "Pure" Directive In Angular 7.2.13

Ben Nadel demonstrates how to sub-class the native NgForOf directive in Angular 7.2.13, creating a "pure" version of the directive - NgPureForOf - that only applies change-detection when its input bindings have been changed. This adds a micro-optimization on top of the already efficient NgForOf directive.

Authored by: Ben Nadel


How to use SVG Icons as React Components?

A walkthrough on how to use SVG Icons in React applications. SVGR + Webpack are the perfect fit to make it happen...

Authored by: Robin Wieruch

How to Add Push-Notifications on Firebase Cloud Messaging to React Web App

We will create an MVP of an app on React that will receive push notifications by using Firebase Cloud Messaging (even in the background mode or when the app is closed). This is an easy thing to do but there are certain moments to watch for.

Authored by: Shaleynikov

create-react-app v3, What's new?

When you're looking to setup your React developer environment, create-react-app is one of the go to ways to go about it. This package allows you to do so with minimal configuration as it creates most of the boilerplate code needed to get you up and running.

Authored by: Scotch Development

React Select Example Using Material UI

Today, I will discuss about react select example Using material-ui. We will create simple dropdown list of countries data. We will fetch countries data from service file. The material-ui has many in-built useful components. I am using one of them to create dynamic select box using react.

Authored by: js-tutorials

How to useReducer in React?

A tutorial about the React's useReducer hook by example for state management in React function components. It uses a reducer function to map action types to state transitions ...

Authored by: Robin Wieruch

React Suspense with the Fetch API

From the legend Dan Abramov himself, we receive such gems as "There is [no data fetching solution compatible with React Suspense] that exists yet," and "[React Cache] will be the first one," and "Suspense is limited to code splitting."

Authored by: Charles Stover


Masked Inputs In Aurelia: The Easy (and reliable) Way - I Like Kill Nerds

When it comes to adding in masked inputs into a modern Javascript web application, it is easier said than done. The task at hand is simple, yet, under the surface is paved with complexity in a framework with unidirectional data flow. The problem I am going to describe is also a problem you'll encounter in ...

Authored by: Dwayne Charrington


Understanding Mixins in Vue JS

Mixins in Vue JS are basically a chunk of defined logic, stored in a particular prescribed way by Vue, which can be re-used over and over to add functionality to your Vue instances and components. So Vue mixins can be shared between multiple Vue components without the need to repeat code blocks.

Authored by: Bit

Minimal Nav Menu with Vue.js and GSAP 

Welcome to the second season of the Widget of the Week series, where I take gifs or videos of awesome UI/UX components, and bring them to life with code. It's been a long time since my last post. I had been busy with some projects (that includes having a baby girl), but I'm back with more knowledge and widgets.

Authored by: Eder Díaz

Getting started with BootstrapVue

In this post, we'll walk through the basics of BootstrapVue, explain the general concepts, demonstrate the setup process and build out a mini Vue.js project in the process.

Authored by: Peter Ekene

JavaScript Snippet - vueToHTML(...)

Recently I have been writing plugins for Grafana and had a desire to make a panel that would give the user the ability to use the data from the query within HTML with AngularJS syntax. I have not come up with a good solution for using AngularJS to easily parse an HTML string with AngularJS syntax but I was able to do it with VueJS.

Authored by: Chris West


Malicious NPM Development Kit

A brief history of undetected attacks and where to find them Without a doubt, NPM is an amazing thing that happened to JavaScript. NPM has been a godsend to the open source community providing an easy way to share code across the world.

Authored by: Bit

Restify vs. Sails vs. Hapi: Node.js Framework Comparison

In the last decade, Node.js has rapidly risen in popularity as a server-side programming language. With that popularity, we've seen no shortage of frameworks aiming to make developers' lives easier. Although they are lesser-known than other Node.js frameworks, Hapi, Sails, and Restify are a few options that have a lot to offer.

Authored by: Stackify

Understand how to approach designing queues in Node

A new scenario you might not have faced before: you have a long running task (like saving to a bunch of different databases, or processing video) that takes a while to process and it's currently causing your REST API response times to be way too slow for the end user.

Authored by: Corey Cleary

Libraries and Tools

An Introduction To Storybook: Organize How You Build JS Components

Storybook is an open source tool for developing UI components in isolation and it integrates pretty well with most front end frameworks including React, Vue, and Angular and a host of other frameworks. It makes building stunning UIs organized and efficient that means developers don't get distracted with flaky data, unfinished API or business logic.

Authored by: Scotch Development

A Ghost Demo: How to Go Headless with Ghost CMS [Tutorial]

In a rush? Skip to technical tutorial or live demo As a kid, didn't you love listening to ghost stories while sitting around a campfire? Some were lame, like Casper; some were kinda' cool, like Bloody Mary; and some were just downright weird, like Shirime (yeah... I'll let you look that one up yourself).

Authored by: Snipcart


Big O is really Big! (PART 1)

Big O, this is really an important topic to deal with. You can barely see an interview without this topic. And this is a concept that will last for a long time in a developer's world. Whether you are a senior developer who is coding for a long time or a beginner just getting started, this is an indispensable concept to know about.

Authored by: Bit

Popular jQuery JavaScript library impacted by prototype pollution flaw

Three years after its last major security bug, the jQuery JavaScript library --used on 74 percent of all internet sites-- has received another security patch this week. This security update addresses a rare vulnerability --called prototype pollution-- that security researchers are only now starting to understand and discover in more and more JavaScript libraries.

Authored by: Catalin Cimpanu

Fetching, Filtering, and Sorting JSON APIs in Google Sheets: The Missing Functions

Do you need to fetch, filter, and sort JSON Web APIs in Google Sheets? This tutorial describes how you can add some functions I created to supplement the built-in Sheets functions and accomplish the goal with ease. I've written about Consuming JSON Web Data Using Google Sheets previously, but my readers have provided me with some additional use cases I had not considered.

Authored by: Dave Johnson

Use Artificial Intelligence to Suggest 1-5 Star Ratings

A handful of products rely on reviews and star-ratings for product feedback. When customers are impressed or dissatisfied about our product, they come back to where it was purchased looking for a way to leave feedback. Apps and e-commerce products are examples of the scenarios where we would love

Authored by: Scotch Development

How to Build an Underwater-Style Navigation Using PixiJS

A tutorial on how to create a visually distinct and accessible WebGL menu that builds from any given HTML navigation. From our monthly sponsor: monday.com, a new way to manage your work! Meet the new visual project management tool. This demo shows one way to make a navigation that is visually distinct, usable and accessible.

Authored by: Codrops