JSK Weekly - September 21, 2022

JavaScript is a multiparadigm language and functional programming is just one of the many programming paradigms it supports. Check out Isuri Devindi's "JavaScript Higher-Order Functions: A Complete Guide" on Syncfusion for more!

Other popular stories this week include "JavaScript APIs You Don’t Know About" by Juan Diego Rodríguez, "13 Best JavaScript Animation Libraries of 2022" by Coding Beauty and Vytenis's "SOLID: Open Closed Principle for React Apps" on Bits and Pieces.


General

Fixing exhaustive-deps warning in some common use cases

In the previous article, we looked at the right mental model one needs to adopt to use the useEffect hook correctly. In this article, let's look at how we can adapt this mental model to address some of the common use cases. This will also help you avoid the exhaustive-deps warning.

Authored by: Bit

Positives and Negatives of Next.js

Developing a website should be a freeing experience. Freedom to pick whatever framework you want to use, if you utilize high-code. Within Fathym's composable frontend architecture, you can use any JavaScript framework (and even some others) to build one aspect of your website.

Authored by: Rich Kurtzman

How to Code a Scrollable Text Gallery in Three.js

A video coding session where you'll learn how to recreate the text and image gallery seen on Design Embraced. In this new ALL YOUR HTML coding session you'll learn how to code the cool gallery seen on https://designembraced.com/ using Three.js. Original website: https://designembraced.com/ Developer: https://twitter.com/lhbizarro This coding session was streamed live on September 18, 2022.

Authored by: Codrops

Build Your Own JS Code Bundler

If you're a front-end developer, you're using bundlers whether you know it or not. It's a tool that is embedded into every development workflow, there are plenty of options out there, but pretty much they all do the same thing, they scan your files, and try to bundle them up into a single file.

Authored by: Bit

Intro to Deno - Guide for Beginners

What is Deno? Deno is a new JavaScript runtime. It was built by Ryan Dahl, the creator of Node.js. Dahl had a few things that he regretted doing with Node and wanted to build a runtime that could solve those issues. Deno, like Node, is built on the V8

Authored by: Brian Barrow


JavaScript

JavaScript APIs You Don't Know About

In this article, Jaun Diego covers the least known yet extremely useful APIs, such as the Page Visibility API, Web Sharing API, Broadcast Channel API and Internationalization API. Together we will see what they are, where we should use them, and how to use them.

Authored by: Smashing Magazine

What 10x JavaScript Developers Know About 'this'

Understanding these concepts will save you a lot of time debugging tricky issues in JavaScript. JavaScript this object is one of the most commonly used concept of JavaScript. It is quite useful to understand how it works internally. In JavaScript the scope of this inside a function is determined at runtime.

Authored by: Bit

How Microsoft Almost Killed JavaScript

In the early 2000s, Microsoft Internet Explorer was the world's most used browser. Its competitor, Netscape Navigator lagged by many percentage points. The two browsers used similar client-side scripting languages to power interactivity, JavaScript and JScript were battling to shape the web in the coming decades.

Authored by: Luís Tchitue


TypeScript

How to Improve TypeScript App Reload Time

When I started my new job, I experienced one of the worst developer experiences I have ever seen. One of the causes was a slow startup time - It took approximately 93 seconds to reload my app after saving changes (working locally).

Authored by: Bit

Solve - Object is possibly defined error in TypeScript

In this tutorial, we are going to learn about how to solve the Object is possibly defined error in TypeScript. If we don't provide any fallback value to the object property in TypeScript, it will show the following compile time error in the console.

Authored by: Sai gowtham

Announcing the Official TypeScript Types Public Preview

As of [email protected], Ember is shipping a public preview of our official TypeScript support for the framework itself. This is the next step in implementing RFC 0724: Official TypeScript Support and RFC 0800: TypeScript Adoption Plan.

Authored by: EmberJS


Angular

How to Code for Portrait and Landscape Layouts in Angular

Increasingly, users run web applications on mobile devices. They could be iPhones or Android phones, tablet devices like iPads, windows laptops with detachable screens etc. Notice, on a mobile device, it's easy to switch between portrait and landscape modes. For you, as a developer, it includes additional complexity to adapt to a change in the layout.

Authored by: Bit

How to Integrate 3D-Vista with an Angular Component

I decided to write this blog because I couldn't find a good source out there for the best way to integrate 3D-Vista with Angular and get them to interact. I hope it helps you. Say you have an Angular app and 3D-Vista Build assets.

Authored by: JavaScript In Plain English

Using Type Guards To Narrow Down Error Handling Types In Angular 14

Over the weekend, I added an Angular 14 front-end to my Strangler feature flag exploration in Lucee CFML. However, something wasn't sitting right with me: Error handling. In TypeScript, the type of an error variable within a catch block (or Promise callback) is always any.

Authored by: Ben Nadel


React

SOLID: Open Closed Principle for React Apps

To be a successful front-end developer, you must keep improving your code writing skills. No matter if you are a junior, mid, or senior developer. "Any fool can write code that a computer can...

Authored by: Bit

Scaffold React Query in Your ReactJS Application 🚧🏗 - Upmostly

We have learned how to make the most out of Axios and react query but it is about time we work on the structure side of it to improve our code readability. In this article, we are going to inject react query in a much cleaner way so that everybody can get your code at first glance.

Authored by: Upmostly

A look inside the useEvent polyfill from the new React docs

One fine day this summer, React legend, Dan Abramov, published a polyfill for the long awaited useEvent hook. Mind if we take a peek? If you haven't been following the 'news' lately, you might have missed the RFC for useEvent .

Authored by: Bit

The Ultimate Guide to Conditional Rendering in React

To be a successful front-end developer, you must keep improving your code writing skills and knowledge about different ways to do the same task. No matter if you are a junior, mid, or senior developer, you have to be open-minded and willing to learn new techniques because what you knew four years ago, might be a bad practice today.

Authored by: Bit


Vue

How To Use Props in Vue.js - Upmostly

One of the limitations of working with components inside an SPA is that you can't directly pass data from one component to another. The idea behind component - based apps is that each component is encapsulated and has all the data it needs in order to work; but sometimes, we do need an avenue for communication between different components.

Authored by: Upmostly


Node.js

Getting Started with GraphQL API with Node.js Backend Support

GraphQL is an open-source query language for API developed by Facebook and open-sourced in 2015. It focuses on simplifying data querying and making the process more efficient by giving clients exactly what they request, compared to the conventional REST API. How, you ask?

Authored by: JavaScript In Plain English

How to Upload Images in Node.js the Easy Way

⭐ Setting up a Multer for image uploads. ⭐ Uploading Image to Cloud. ⭐ Linking the image with the MongoDB Database. Recently, I decided to build my own REST API in order to improve the functionality of my Fruit Shop Website. With much effort, I was able to build my own REST API for the website.

Authored by: F.K


Libraries and Tools

13 Best JavaScript Animation Libraries of 2022

Animations are a great way to make your website stand out from the crowd and grab the attention of your visitors. With creative object motion and fluid page transitions, you can impress your users with rich, engaging experiences that make a good first impression.

Authored by: Coding Beauty


Testing

An Easy and General Approach to Unit Tests using JavaScript examples

When I studied at university I've never seen anything about testing. When I have my first tech interview the recruiters asked me if I have developed any test or any way to check if my code works properly. I told to them that I've tested it manually using simple queries.

Authored by: Jesús Lagares

Writing Tests That Depend On Other Tests

If you must use a Cypress anti-pattern, at least do it right using cypress-data-session plugin. Cypress Best Practices strongly advocates for keeping the tests independent of each other. I strongly agree with this advice. We should be able to run each test by itself and run the tests in any order.

Authored by: Gleb Bahmutov

Discover Jest in 5 minutes: A Simple and Amazing JavaScript Testing Framework

Do you want to become a better JavaScript developer? Then you have to know about testing, and you have to know about Jest (in 5 minutes) 🖥️

Authored by: Jesús Lagares


Functional Programming

JavaScript Higher-Order Functions: A Complete Guide

A function is a reusable piece of code designed to avoid repetitive code and improve code quality. As a functional programming language, JavaScript uses higher-order functions to implement this abstraction at an even higher level.

Authored by: Syncfusion

How to fix indexOf is not a function in JavaScript

In this tutorial, we are going to learn about how to fix the TypeError indexOf is not a function in JavaScript When we use a indexOf() method on a value which is not an data type string or array we will get the following errors in our console.

Authored by: Sai gowtham

React Functional Components Using Refs

I have always been unclear about ref and forwardRef, after doing some research, I wanted to write an article with two small examples to document this learning process. Now let's get straight to the point! In the typical data flow of React, props are the only way for parent-child components to interact, to modify a child, you re-render it with new props.

Authored by: MINI🇦🇹🇪🇺





0 comments