JSK Weekly - February 13, 2020

Welcome to our next edition! Kicking this week off, we'll count things down starting with Eden Ella's different react components for different occasions in "10 Useful React Components for 2020", followed by Chidume Nnamdi's Useful implementations of Angular’s HttpInterceptor in "7 Ways to Leverage HttpInterceptors in Angular" and lastly Sonny Recio's explanation on why he recommends using SASS for your styling in "4 Reasons to Use SASS in Your Frontend Project", all on Bits and Pieces.

If you're an avid Vue user, check out Matt Maribojoc's Event Handling cheatsheet in "A Vue Event Handling Cheatsheet — The Essentials".

Lastly, Uma Maheswari Chandrabose takes us through an in-depth look in "How to Integrate Third-Party Libraries into Angular Rich Text Editor" on Syncfusion's blog.


4 Reasons to Use SASS in Your Frontend Project

Why I recommend using SASS for your styling SASS is a preprocessor or stylesheet language that is compiled into CSS by their own tooling or by module bundlers such as Webpack. It has a couple of functionalities that you can use to make your CSS neat and reusable such as variables, nested rulings, mixins, functions, and much more.

Authored by: Bit

What does a Full-Stack Developer do?

When does someone say he is a Full Stack developer or you see a job opening for the same, What it really means? What is Full Stack development? Who can be a Full Stack developer? I am going to explain all these questions and tell you some easy ways to become a Full Stack developer.

Authored by: Prateek Kumar Singh


JavaScript Best Practices - Performance

Like any other programming language, JavaScript has its own list of best practices to make programs easier to read and maintain. There are a lot of tricky parts to JavaScript, so there are things we should avoid that reduce the quality of our code.

Authored by: John Au-Yeung

3 Ways To Access Object Properties in JavaScript

You can access the properties of an object in JavaScript using 3 ways: Dot property accessor: object.property Square brackets property access: object['property'] Object destructuring: const { property } = object Let's check in detail how each way to access the properties work. And understand when it's reasonable to use one way or another depending on the situation.

Authored by: Dmitri Pavlutin

The most surprising behavior of JavaScript regular expression you have ever seen

I'm sure, You might have never noticed this surprising behavior JavaScript regular expression objects are stateful when they have /g or /y flag in the pattern to match. When you create a regular expression which has /g flag, it maintains the lastIndex property...

Authored by: JavaScript in Plain English


7 really good reasons not to use TypeScript

Everyone loves TypeScript. It "solves" many problems JS has, it is a "superset" of JS, it will make your code error-prone and pleasant to read. There are a lot of good reasons to use TypeScript, but I am going to give you 7 really good reasons not to. Wow.

Authored by: JavaScript in Plain English

Create a API on the edge using TypeScript and Cloudflare Workers.

In my previous post, we described how to use Cloudflare Workers to deploy a static generated website directly to the edge. We also described a way to do faster deploys and rollbacks using a commit hash to decide what version of our Application we will be serving to users.

Authored by: Ernesto Freyre

The Beauty of TypeScript for Scalable Serverless Applications

Serverless is the new kid in the block. It seems to be a magical solution for all scalability problems while keeping costs low. As we venture into this realm we quickly realize that developing and maintaining large applications might be not as simple as it seems. Actually, it's quite hard to get it right.

Authored by: Arian Acosta

Gradually using TypeScript in Your React Project

How to safely build and introduce React TypeScript components into your React JS project Why would you want to migrate from JS to TS? There can be an infinite amount of reasons but that's not the point. The (hypothetical) fact is: you need to start using TypeScript and you need an easy way to introduce it into your project.

Authored by: Bit


7+ Ways to Leverage HttpInterceptors in Angular

Useful implementations of Angular's HttpInterceptor According to angular.io: HTTP Interception is a major feature of @angular/common/http. With interception, you declare interceptors that inspect and transform HTTP requests from your application to the server. The same interceptors may also inspect and transform the server's responses on their way back to the application.

Authored by: Bit

From Mockup to Angular Material

In this article we'll take a user interface sketch and convert it into the visual structure of a new Angular application using Angular Material to quickly style and skin our new application...

Authored by: Matt Eland

Selective Angular Component Rendering with ngSwitch

Sometimes in Angular you have a collection of items and need to display a different component for different items in the same collection. Thankfully, Angular offers a directive called ngSwitch that gives us flexibility in how components render themselves.

Authored by: Matt Eland

How to create a social media component in Angular for all of your users

Using Angular means you never have to repeat code again! For example, I created a social media component that is account neutral so that it can be reused over and over again, even if the user has completely different accounts.

Authored by: gitconnected

Connect Angular Components with Events, Bindings, and Services

In this article we'll explore how to use Angular two-way binding, events, and services to wire up a user interface and allow different components to interact with each other without being strongly tied to one another.

Authored by: Matt Eland


How to Set Up Protected Routes in Your React Application

Require authentication for users to access your page Often times, when you're building a web application, there's some kind of routing involved with authentication. You want to restrict user access to certain pages or you have your whole application behind a login screen.

Authored by: Ferenc Almasi

10 Useful React Components for 2020

Recommended React components in different categories For me, small and specific solutions in the form of single components, make more sense than the all-in-one solutions offered by component libraries. I like to pick and choose my own components, I don't like long documentations and I'd like to avoid meaningless updates that often break things.

Authored by: Bit

React JS for Beginners - Props & State Explained

React JS is today's one of the most used JavaScript libraries which every Front-end developer should know. Understanding what Props and State are and the differences between them is a big step for learning React JS. In this blog post, I will shortly explain what Props and State are, and also clarify some of the most asked questions about them: * What are Props?

Authored by: freeCodeCamp.org


A Vue Event Handling Cheatsheet - The Essentials

Vue event handling is a necessary aspect of every Vue project. In this article, I'll be going over the basics and providing some code examples for working with events. It will just include the tips/methods that I find the most useful, for an in-depth look at all the things Vue can do, check out the Vue docs.

Authored by: matt maribojoc 🇵🇭

Libraries and Tools

How to Integrate Third-Party Libraries into Angular Rich Text Editor

People always like to draft or edit emails, blogs, webpages, or proposals using impressive formatting options and layouts. Say you want to draft a well-formatted email to your boss, or comment on blogs or forums with funny smiley faces.

Authored by: Syncfusion


Test Angular Components in Storybook

A Central Way to Test and Customize your Angular Components Have you ever wanted a quick way of inspecting the appearance and behavior of Angular components in your project? Storybook is a free library that integrates into your Angular projects to let you look at any component in your application, tweak with configuration values, and ensure the component is behaving properly.

Authored by: Matt Eland

Functional Programming

React Refs for Function Components

React components represent DOM tags that make up a particular part of a UI returned by the render method. For cases where you want to interact with the DOM node outside the regular React lifecycle, we can use refs.

Authored by: Jon Lau

Functional Programming for JavaScript Developers - Immutability and Pure Functions

In Functional Programming (FP), we try really hard to mutate our data as little as possible. In case you are unsure of what this means, another way to say it is that we try to change the value of our variables as little as possible.

Authored by: Jan-Vidar Bakke

Functional Programming for JavaScript Developers - Compose

This post is part of an article series where I teach you, step by step, how to go from a Functional Programmer beginner to an expert. If you are a complete beginner and this is the first time you come across my articles, I recommend that you read the two previous posts where I cover some fundamental concepts like pure functions, immutability, and currying.

Authored by: Jan-Vidar Bakke

JavaScript: Arrow Functions vs Functions

Let's look at the following anonymous function example called by setTimeout after 1000 milliseconds. Inside of it, we log the hello variable value and the hello property assigned to this. It would be to expect that the output would be helloand hello from this.

Authored by: JavaScript in Plain English