JSK Weekly - September 11, 2019

Kicking off this week, Michael Poirier-Ginter creates a Vue PWA, not because there is anything inherently special about Vue.js for making PWAs, but rather, to show off their tool: Nuxt in "Vue PWA: A Progressive Web Application Example With Nuxt" on Snipcart's blog.

If you're one of the developers who voted for TypeScript in the Stack Overflow 2019 developer survey, Ovie Okeh looks at some real-world code written in TypeScript that could be improved to make better use of the language’s strengths in "3 rules for writing idiomatic TypeScript" on LogRocket's Blog and Jan Odvarko shows us how to use Firefox to debug your TypeScript applications in "Debugging TypeScript in Firefox DevTools".

The Bits and Pieces blog offers up various good reads this week, from Shubham simplifing Javascript Hoisting in "Javascript Hoisting Simplified" to Mahesh Haldar's tips on how to get the most out of logging in "Logging: Best Practices for Node.JS Applications" and Chidume Nnamdi's online text editor that allows real-time collaboration in "Build a Realtime Editor Using Socket.IO."


Using React + Redux with Firebase & TypeScript

Leveraging the power of React hooks to combine the real-time advantages of Cloud Firestore with the state management power of Redux. In this post, I will dive into how you can connect Firebase, specifically Cloud Firestore, to your React + Redux application.

Authored by: Jake Richards

Why Offshoring Software Does Not Work in the Agile Age

Information Technology has changed a lot in the last decade with unseen technologies and research, keeping professionals to be more creative in their day-to-day activities. A lot of grunt work, which was the main reason for offshoring, in the beginning, has now transformed into automatic processes.

Authored by: Bit

Building without bundling: How to do more with less Blog

@pika/web enables front-end software developers to choose whether or not they use a bundler when building fully-featured web apps.

Authored by: LogRocket

So, What the Heck is GraphQL?

Your ultimate guide on why and how to use GraphQL If you're a REST aficionado like me and you are hearing a lot of buzz around GraphQL, then you're not alone. GraphQL will do the "REST" Before jumping into conclusions with no data, I decided to unravel the mystery of GraphQL by diving deep and tried to understand how different it is from REST.

Authored by: Bit

Stop Installing Packages Globally

These days, most front-end projects are going to involve NPM packages of some kind. Occasionally, when browsing documentation for these packages, I'll see a recommendation to install a package like this. yarn global add Or like this. npm install --global In both of these examples, the package is installed globally.

Authored by: David Walsh


Javascript Hoisting Simplified

So now that we know what happens behind the scene when we try to run a .js file, let's try to predict the output of the below code snippet Test 1 with var keyword: So let's go through the steps: Step 1: Javascript will go through the entire file and scan for all variable and function declarations.

Authored by: Bit

How To Accelerate the JavaScript Spread Operator

The fast-path optimization increases at least twice the performance of JavaScript spread operator.

Authored by: Dmitri Pavlutin

8 habits you should avoid when developing with Javascript

Better leave these bad habits today than tomorrow As you all know Javascript has become fashionable (I think we all agree on this point). This has meant an increase in the demand for job offers and the proliferation of " bootcamps " that promise to train developers in just 6 months.

Authored by: Sunil Sandhu

A Guide to JavaScript Promises

A whistle-stop tour of all things asynchronous in JavaScript: from callback hell to async/await The more I've learned about web development, the more I've begun to appreciate the importance of asynchronous code. Once you move beyond static websites, asynchronous code becomes integral. Every full-stack application depends on sending, receiving and processing data via an API.

Authored by: Bret Cameron

Using Identity Server for Multi-Tenant Web Applications

Building multi-tenant web applications have many benefits over having a separate environment per each tenant. However, developing these applications needs a well-defined strategy for tenant isolation by design. Designing authentication and authorization plays a significant part in the tenant isolation strategy.

Authored by: Bit


Debugging TypeScript in Firefox DevTools

Firefox Debugger has evolved into a fast and reliable tool chain over the past several months and it's now supporting many cool features. Though it's primarily used to debug JavaScript, ...

Authored by: Jan Odvarko

3 rules for writing idiomatic TypeScript Blog

TypeScript: love it or hate it, you can't deny the fact that it's spreading like wildfire. In fact, according to the Stack Overflow 2019 developer survey, it was listed as the third most - loved programming language and the fourth most-wanted.

Authored by: LogRocket


How to manage reactive form controls with form groups in Angular 8 Blog

With reactive forms, you will discover that it is easier to build cleaner forms. Because every JavaScript framework advises that you don't make the template clustered, this has become a priority as the form logic now lies in the component class.

Authored by: LogRocket

Angular 8 File Upload with Progress Bar Tutorial

Angular 8 File Upload with Progress Bar Tutorial - Learn to create progress bar in Angular using HttpEvent and HttpEventType APIs.

Authored by: Digamber Singh

How to use form builders in Angular 8 to validate reactive forms Blog

Previously, we discussed how to manage reactive form controls with form groups in Angular 8. This is a new post on building reactive forms in Angular 8. Here's a brief recap of the concepts we discussed in the last post.

Authored by: LogRocket

Harnessing the power of Mixins in Angular

What is a mixin? As per version 2.2, TypeScript now supports the concept of a mixin - a function that can take a class, extend it with some functionality, and then return the new class, allowing other classes to extend from it - allowing classes to mix and share functionalities!

Authored by: Родион Раскольников


How to create a React Native app with PostgreSQL and GraphQL: Part 1 Blog

React Native is a great option when it comes to developing mobile applications for both iOS and Android smartphones. With React Native you can write an application that works on both platforms with the only difference coming at the view level, with iOS and Android rendering differently.

Authored by: LogRocket

Adding spinners and notifications to your React app Blog

To make your web projects more interactive and user-friendly, you may find you want to add some additional features like notifications, or a spinner that shows a loading state. Today we are going to explore how we can implement those features.

Authored by: LogRocket

Frustrations with React Hooks Blog

Before I detail my current frustrations with Hooks I do want to state for the record that I am, for the most part, a fan of Hooks. I often hear that the main reason for the existence of Hooks is to replace class components.

Authored by: LogRocket

Atomic Design and UI Components: Theory to Practice

Bringing Atomic Design into your UI component development workflow. Atomic design (by Brad Frost)is a mental model to help you think of user interfaces as a cohesive whole and a collection of parts at the same time. Through the comparison to atoms, molecules, and organisms, we can think of the design of our UI as a composition of self-containing modules put together.

Authored by: Bit


How async components can optimize performance in Vue apps Blog

It's important to take component structure into account when using JavaScript frameworks to create large scale applications. By considering component structure, you can avoid loading every single component at runtime and slowing your application. You can also keep from returning unnecessary data to users or creating an overall poor user experience as you build your application.

Authored by: LogRocket

Vue PWA: A Progressive Web Application Example With Nuxt

In a rush? Skip to the Vue PWA guide or the live demo. Has anyone ever asked you: "Hey there, kid, want some free money?" Probably not-if anyone did, you'd probably run away screaming "stranger danger". And you'd be right to be skeptical.

Authored by: Snipcart


Logging: Best Practices for Node.JS Applications

Bit helps you build and distribute components so your team may use and develop them anywhere, to build apps faster together. Pack, version and publish components from any repo with zero overhead. Build, test and render each component in isolation. Easily find and consume components as packages or as source-code.

Authored by: Bit

Writing a working chat server in Node Blog

This is probably a topic that has been beaten to death since Node.js and (especially) Socket.io were released.

Authored by: LogRocket

How to deploy a GitHub Webhook in Node.js

The following implementation is a quick excerpt from one of my daily tasks as a software developer. If I run into a problem and arrive at an example that I find worth sharing, I will put a gist of the code up on this website.

Authored by: Robin Wieruch

Build a Realtime Editor Using Socket.IO

How to build an online text editor that allows real-time collaboration. In this post, we will build an online text editor that allows real-time collaboration. We will use SocketIO to stream the changes in the text in realtime, so users can see them instantly. Read on.

Authored by: Bit


What Is Infrastructure as Code? How It Works, Best Practices, Tutorials

In the past, managing IT infrastructure was a hard job. System administrators had to manually manage and configure all of the hardware and software that was needed for the applications to run. However, in recent years, things have changed dramatically. Trends like cloud computing revolutionized-and improved-the way organizations design, develop, and maintain their IT infrastructure.

Authored by: Stackify