JSK Weekly - January 22, 2020

Kicking off our third newsletter for 2020, let's highlight some topics to get us all off to a good start. Performance and optimisation are always key areas to pay attention to and this week Codementor details 21 ways on how not to let costly code be the downfall of your app in "21 Performance Optimization Techniques for React Apps" and Chidume Nnamdi shows how to optimise performance to deliver an awesome user experience in "10 Ways to Optimize Your React App’s Performance" on the Bits and Pieces blog.

New to JAMstack? Snipcart gives you everything you need to know to get started, as well as new stuff for 2020 in "Introduction to JAMstack (and What's in Store for 2020)." Last but not least, Syncfusion gives a detailed comparison between observables and promises in "Angular Promises Versus Observables."


Introduction to JAMstack (and What's in Store for 2020)

When we first wrote this post, the JAMstack ecosystem was still in its infancy. That was +/- 5 years ago. Back then, the Netlify founders came to us with a proposition. They had just come up with the term "JAMstack" to work around the negative connotation of "static web" and were asking if we would help to promote it.

Authored by: Snipcart

A guide to fully understanding Redis Blog

According to its G it H ub repository, Redis (which stands for Remote Directory Server) is an in-memory data structure store. It is a disk-persistent key-value database with support for multiple data structures or data types.

Authored by: LogRocket

What I Learned by Transitioning from Backend to Frontend Development

Transitioning from Back-End to Front-End development is not that easy. I got used to the structure of back-end stuff where you usually build the data structures, writing tests like Test-Driven Development, using persistence layers and repository, database tables, and creating API endpoints for Front-End consumption.

Authored by: Bit

6 Handy Regular Expressions Every Front-End Developer Should Know

Using RegEx to solve text processing and manipulation tasks that front-end developers often encounter. Almost all popular programming languages support regular expressions, and there's a good reason for that: regular expressions provide developers with remarkably powerful tools that enable them to quickly perform tasks that would otherwise require dozens of lines of code.

Authored by: Bit

Colors in CSS: The present and future Blog

In a previous blog post with LogRocket, I covered the RGB and HSL color models and how to manipulate their various color properties. One aspect that I did not have the chance to cover was some of the upcoming models coming to CSS.

Authored by: LogRocket


Authenticate and Secure Next.js App Users with Auth0 and TypeScript

This article is the first of several in a series of posts aimed at helping frontend devs build applications with the set of tools I use daily with fairly good success. As a frontend engineer building a web application, your application will likely need to provide security with authenticated access to some user resources.

Authored by: Ernesto Freyre

Create your own JSON Parser with JavaScript

The interview question of the week for this week on Cassidoo's weekly newsletter is, Write a function that takes in a string of valid JSON and converts it to an object (or whatever your chosen language uses, dicts, maps, etc).

Authored by: Tan Li Hau

JavaScript: Understanding Generators

In 2015, a rich set of new features was introduced to the JavaScript community. Things like arrow functions, classes and modules quickly became popular and are heavily used in modern JavaScript programming. Some other features are less known and used by developers nowadays. Do you know what generators are?

Authored by: Moshfegh Hamedani

Out with async/await and in with Promise Lifting

Tip: Use Bit ( Github) to "harvest" React/Angular/Vue components from any codebase and share them on bit.dev. Let your team reuse and collaborate on components to write scalable code, speed up development and maintain a consistent UI. The point is simple. If you saw me write code like this, you would (rightfully) slap me in the face.

Authored by: Bit


Is TypeScript worth it? Blog

Before I start, I would like the jury to know that I am, for the most part, a TypeScript fan. It is my primary programming language for frontend React projects and for any backend Node work that I do. I am on board, but I do have some nagging doubts that I would like to discuss in this post.

Authored by: LogRocket

TypeScript Tip of The Week: Using Classes & Interfaces

Hey guys, sorry I haven't posted in a while I have been EXTRA busy the last few months! I am excited to be back with another TypeScript Tip. This week I want to talk about classes and interfaces. If you're unfamiliar with interfaces they create a sort of structure for what an object or class is supposed to look like.

Authored by: programming_dog

Get rid of relative import path hell by adding absolute imports to your Typescript project

Typing long and error-prone paths to your Typescript modules can be a frustrating task If you don't know how to set up a TypeScript project, check out this article. Have you ever seen an import statement like this? import { formatName } from '../../helpers/format-name' These inconsistent relative paths look ugly and make code maintenance a nightmare!

Authored by: gitconnected

TypeScript Advanced Types - Conditional Types

TypeScript has many advanced type capabilities and which makes writing dynamically typed code easy. It also facilitates the adoption of existing JavaScript code since it lets us keep the dynamic capabilities of JavaScript while using the type-checking capability of TypeScript.

Authored by: John Au-Yeung


Angular Promises Versus Observables

In this blog, we are going to see what observables are and how they are superior to promises with the help of the Syncfusion Charts control. Both observables and promises help us work with asynchronous functionality in JavaScript. Promises deal with one asynchronous event at a time, while observable

Authored by: Syncfusion

Angular 9 Calendar Tutorial with ngx-bootstrap datepicker Examples - positronX.io

Hello programming buddies! In this Angular 9 Calendar tutorial, we are going to learn how to implement and use various calendar modules using Bootstrap and ngx-bootstrap datepicker plugin. We are going to use datepicker to implement Calendar. Date pickers is a generic, predictable, consistent and often viewed as a reliable UI component for date selection.

Authored by: Digamber Singh

PWA "Add Button to Home Screen" and Remote Debugging in Android Devices with Angular 8

Implement a PWA with remote debugging in Android devices If you want to learn more and start from the beginning on how to build PWA in Angular 8, check out this link first. It is a step by step-by-step tutorial for creating a progressive web app with Angular 8 and it explains what a PWA is.

Authored by: gitconnected

6 Ways to Unsubscribe from Observables in Angular

A review of the different ways you can unsubscribe from Observables in Angular In this post, I'll review the different ways you can unsubscribe from Observables in Angular apps. Observables have the subscribe method we call with a callback function to get the values emitted into the Observable.

Authored by: Bit


21 Performance Optimization Techniques for React Apps

Don't let costly code be the downfall of your app. We share 21 techniques you can use to optimize the code and performance of your React app.

Authored by: Codementor

React Event Handlers: onClick, onChange ...

In this React tutorial, we will get to know event handlers in React for HTML elements such as button and input elements. You will learn how to use a button with its onClick event and how to define and use different kinds of event handlers.

Authored by: Robin Wieruch

10 Ways to Optimize Your React App's Performance

How to optimize performance to deliver an awesome user experience. Optimization is the number one thing that is on the mind of every dev when building any software, especially web apps. JS frameworks like Angular, React and others, have included some awesome configurations and features.

Authored by: Bit

How To Create a Website with Next.js and React Blog

Next.js is a widely-used framework for building React applications that offer server-side rendering, automatic code-splitting, static exporting options, and easy production builds. It also relieves a lot of the general headaches involved with creating production-ready React applications. In this tutorial, we'll show you how to bootstrap a Next.js web application and add some basic components and features of a typical website.

Authored by: LogRocket

Cross-Repo Collaboration with Reusable React Components

Designing reusable React components to share and develop across repositories, with Bit. Using ReactJS to build your projects brings many benefits, but one very obvious one is the implementation of the component pattern. Thanks to the modularization that it brings to your code, you're able to import and use external components into your project with very little effort.

Authored by: Bit

How to Integrate AppCenter SDK with React Native

Using AppCenter's services in a React Native application. AppCenter is a cloud service from Microsoft that provides services like monitoring, diagnostic, analytics, CI and many others. In this post, we will be integrating AppCenter SDK into a React native app.

Authored by: Bit

A guide to React refs: useRef and createRef Blog

In this article, we're going to investigate why React, a framework meant to abstract your code away from DOM manipulation, leaves the door open for developers to access it. As is the case with many other UI libraries, React offers a way to rethink a view as the result of a state of a component.

Authored by: LogRocket

The complete guide to building headless interface components in React Blog

React components are the building blocks for creating UI in React. There are different patterns that emerged over the years. Today, we're going to take a look at one of the most exciting UI component-building patterns: headless components. Headless components aren't necessarily specific to React - they're just patterns that help to build reusable UI components.

Authored by: LogRocket


A First Look at Vue3 Alpha Release - Example App in 15 Minutes

Vue3 Alpha is officially out! It has tons of highly anticipated features like proxy based reactivity, new component types, and the most talked about, Composition API. Even though the alpha version is meant for preview reasons only, we can still start using it right now.

Authored by: matt maribojoc 🇵🇭

How to auto deploy a Vue application using GitLab CI/CD on Ubuntu 18.04 Blog

Basic knowledge of the command line Basic knowledge of Docker Basic knowledge of version control Latest release of node installed on your local machine First, you will be installing vue-cli. It is a command-line tool that enables you to quickly scaffold a new Vue application.

Authored by: LogRocket

Build an app from scratch with Vue.js

It's hard to keep up with all the new JavaScript libraries and frameworks out there. React, Angular, Ember, Aurelia, Glimmer...where do you start? Ideally, JavaScript developers would want to learn...

Authored by: Fahim ul Haq

How to create a portfolio and blog using VuePress and Markdown Blog

VuePress is a static site generator powered by Vue and developed and maintained by the Vue.js team. Although it was built with technical documentation in mind, it can be used to create so much more than that, including landing pages, portfolios, blogs, and more.

Authored by: LogRocket

How to write a Vue.js app completely in TypeScript Blog

Want to build a Vue.js app in TypeScript but don't know where to start? This tutorial demonstrates how to build a new TypeScript app using Vue CLI.

Authored by: LogRocket


NodeJS - Nuance of Requiring a File VS Reading a File

We're going to walk through one of the small nuances of requiring vs reading a file directly during a running NodeJS process. NOTE: This is not an in depth comparison of require and fs.readFile If want to reference the latest version of a file throughout your running NodeJS process use the fs package, otherwise if you want your data to remain constant or don't anticipate the file changing use require.

Authored by: Nicholas Porter

Path aliases with TypeScript in Node.js

In this article, I will walk you through setting up path aliases in your TypeScript project and show you how to clean up your code. In Node.js (or TS/JS in general) you can import modules into your code.

Authored by: Lars Wächter

The Simplest Way to Add Swagger to a Node.js Project

In this section, I will show you why I use the TypeScript format for Swagger files - it allows you to decompose large files into smaller ones based on business logic. To add more information for servers, we have DEV, SIT, UAT, and maybe Pre-Production environment for our API service.

Authored by: gitconnected

Libraries and Tools

React map library comparison Blog

Implementing an effective, efficient, and sustainable map solution can be a daunting task. Rather than reinventing the wheel, it's better to make use of existing solutions if your specific use case allows for it. In this post we will investigate several existing React map libraries and compare them based on functionality, technology, and ease of use.

Authored by: LogRocket

How to build a GraphQL API with TypeGraphQL and TypeORM Blog

GraphQL's popularity is constantly growing, and it's no mystery as to why: it's a great tool that solves many common problems developers encounter with RESTful APIs. GraphQL allows us to easily fetch data relations, but it also prevents us from overfetching that data. Put simply, GraphQL improves the development experience and makes frontend apps faster.

Authored by: LogRocket

Pagination in GraphQL with Prisma the right way Blog

When working with a database that has millions of records, it's very useful to adopt pagination since it helps us retrieve a subset of the data that we otherwise wouldn't be able to access without querying every record on the table.

Authored by: LogRocket


Advanced JavaScript Debugging in VSCode Just In 3 Steps.

Debug Your JavaScript Front End Application Like a Pro. First Create a React Application and run it. npx create-react-app my-appcd my-appnpm start Install Required two package and create a launch.json file as described in below Now open launch.json file and replace

Authored by: Tunvir Rahman Tusher

Functional Programming

You Must Understand These 14 JavaSript Functions

You should be able to understand and write by hand these functions before you go to any JavaScript interview. As we all know, there are five primitive data types and an object data type in JavaScript. But do...

Authored by: JavaScript in Plain English