JSK Weekly - February 01, 2023

Welcome to the month of love! Our shared love of Javascript is always cause to celebrate and what better way is there to celebrate than by laughing? Check out Ariana Milasincic's "10 JavaScript Memes" to get the month started right.

Other popular stories this week include Nethmi Wijesinghe's "Building Custom Structural and Attribute Directives in Angular" on Syncfusion, Dmitri Pavlutin's "JavaScript Closure: A Simple Explanation" and Simon Ugorji's "Node.js App Step-by-Step Guide for Frontend Developers" on Bits and Pieces.


Best Practices in Handling Errors in Web Components

Almost all modern-day web applications are bound to run into errors at some point during their lifetime. Unfortunately, it is never "fail-safe," as your users can run into an error depending on how they use your application. For instance, two users may execute the same feature differently, causing one user's action to fail while the other to succeed.

Authored by: Bit

Fetching Data From an API in Next.js - Upmostly

Fetching data in a Next.js app is an essential part of building any web application. Axios is a popular library for making HTTP requests in JavaScript. It can

Authored by: Upmostly

Context API vs Redux

Every React developer has surely come across the question: "What's the difference between Redux and Context API, and can the Context API replace Redux ? ".This is one of the most discussed and maybe conflicting questions within the React community.

Authored by: JavaScript In Plain English

Turn Your Figma Designs into Code with a Single click

We've all been there, working on a brand new site, we hear that the designer is ready with the mockups, and the next thing we know, they're sending us the actual mockup, that Photoshop image. Sure, we can use it to start getting the different graphic assets out, and slowly but surely begin to build our components and our website.

Authored by: Bit

Why doesn't JSON support comments?

Did you ever curse the JSON data format for not allowing comments and wondered what the heck? Yeah, same here. Surprisingly, JSON, in its initial spec, did allow comments, but comment support was removed for three reasons: People put parsing instructions into comments breaking portability across platforms and languages.

Authored by: stefan judis

10 Web Development Trends in 2023

While, in my personal opinion, the web development landscape slowed down for a few years (2016 - 2021), it started to gain lots of traction just last year (also see State of JS where the images for this article are taken from).

Authored by: Robin Wieruch

Adding Multi-Version Support to Your Astro-based Documentation

Building a docs site is like building a static site with lots of pages. What happens if those pages change when the version of your product changes?

Authored by: Bit

How To Build an Animated Dashboard with Framer Motion in Next.js - Upmostly

Framer Motion is a powerful animation library that makes it easy to create smooth, complex animations in your Next.js projects. In this article, we will explore the benefits of using Framer Motion in a Next.js project. By combining the two, you can create highly interactive and visually appealing Next.js applications with minimal effort.

Authored by: Upmostly


JavaScript 101: All About Timers

JavaScript timers are great tools for achieving recurrent behavior or even triggering delayed actions. Whatever time-based logic you have, timers are the answer to your questions. But if you don't fully understand how they work, then you'll be hitting your head against a JavaScript-made wall.

Authored by: Bit

Speed Up Your JavaScript: Proven Techniques for Optimizing Performance

JavaScript performance optimization is critical for creating fast and responsive web applications. Optimizing JavaScript code can reduce load times, improve the overall user experience, and increase the scalability of a web application. JavaScript is a client-side scripting language, which runs on the user's device rather than the server.

Authored by: Liudas Drejeris

How to Switch Blockchains on MetaMask with JavaScript

With over 10,000 blockchains currently operating, there are endless possibilities for deploying your smart contracts. For anybody to be able to use your Decentralized Application (DApp), they need to be connected to the blockchain where you've deployed your smart contract. This article will show you how to prompt your

Authored by: freeCodeCamp.org

Understand the Lexical Scoping in JavaScript

Are you ready to learn about one of the quirks of JavaScript? Today, I'm going to talk about lexical scoping. It might sound intimidating, but by the end of this post, I'll make sure you know everything you need to know about how it works and how it can make your code better.

Authored by: Olivia Brown

10 JavaScript Memes

Haven't done one of these for quite some time, enjoy!. "10 JavaScript Memes" is published by Ariana Milasincic in JavaScript in Plain English.

Authored by: JavaScript In Plain English

Advanced Data Structures: Implementing the A* Algorithm in JavaScript

Without getting into code just yet, the basic algorithm behind A* is the following: You first need to define a grid-based map, where each cell in the grid represents a location that the search can visit.

Authored by: Bit

JavaScript Closure: A Simple Explanation

The callbacks, event handlers, higher-order functions can access outer scope variables thanks to the closure. The closure concept is important in functional programming and is often asked during the JavaScript coding interview. While being used everywhere, closures are difficult to grasp. If you haven't had your "Aha!"

Authored by: Dmitri Pavlutin

5 Rare Native APIs for JavaScript

This article brings 5 rare JavaScriot native APIs that bring unexpected convenience to our front-end development. The Element.getBoundingClientRect() method returns a DOMRect object that provides information about the size of the element and its position relative to the viewport.

Authored by: Maxwell

10 Must-Know JavaScript Tricks & Tips to Make You a Better Programmer

In the past, I wrote a lot of junk code, and now that looks terrible. When I saw those code fragments again, I even doubted whether I was suitable to be a programmer... Promises provide an elegant way to handle asynchronous operations in JavaScript.

Authored by: fatfish

Building a Temperature Converter App using HTML, CSS, and JavaScript

A temperature converter is a tool used to convert temperatures, to and from Celsius, Fahrenheit, and Kelvin. In this article, we will learn how to build a temperature converter application using HTML, CSS, and JavaScript. Here's a screenshot of what the finished application looks like: Basic understanding of HTML, CSS, and JavaScript.

Authored by: Frankie | frankiefab.eth/.lens (🧱, 🚀)


Exploring Advanced Ways in TypeScript

TypeScript is a powerful tool for building large and complex JavaScript applications. It offers a number of advanced features that can help developers write more maintainable and scalable code. In this article, we'll cover some of the best practices for mastering TypeScript, including working with interfaces, classes, and decorators, as well as debugging and testing.

Authored by: Suman Giri


Building Custom Structural and Attribute Directives in Angular

Angular directives assist us in manipulating the DOM. We may customize a DOM element’s look, behavior, or layout using directives. In addition, they help us extend the power of HTML via actions, reactions, and interactions. For example, directives will accept arguments, perform some action with them, and then produce a reactive action on your HTML.

Authored by: Syncfusion

Advanced Lazy Loading Techniques in Angular

Welcome to our blog on advanced lazy loading techniques in Angular! If you're not familiar with lazy loading, it's a technique that allows you to optimize the performance of your Angular app by only loading the parts of the app that are actually needed at any given time.

Authored by: Frontend Weekly

Ace your Angular Interview: Top Questions and Pro Tips

Are you ready to take your Angular skills to the next level and impress your interviewer? Look no further! In this article, we will be diving into the top questions and answers with code samples to help you ace your Angular interview and land your dream job.

Authored by: JavaScript In Plain English


How does React's Reconciliation Algorithm work? - Upmostly

Fiber is a reconciliation algorithm used in the popular JavaScript library React to efficiently update a web application's user interface (UI). It was introduced in version 16.0 of React in 2017 and has significantly improved the performance of React applications.

Authored by: Upmostly

Master the Art of Referencing with React's useRef Hook: A Beginner's Guide

The useRef hook in React allows you to create a reference to a DOM element or a component instance. This can be useful for various tasks such as creating animations, managing focus or text selection or triggering imperative methods on a component. In this blog post, we will explore the use cases and examples of the useRef hook.

Authored by: JavaScript In Plain English


Introduction to Vue Components

When developing a large application, it is always a good idea to break it down into smaller components to make the code easier to read, structure, and maintain. Most Vue beginners understand what components are at least conceptually, but they might not understand what they can and cannot do fully.

Authored by: StackAbuse

5 Must-Know Differences Between ref() and reactive() in Vue

If you landed on this post most likely you have a basic understanding of Vue reactivity. However, like me, you might be asking yourself the eternal question: what are the main differences between ref() and reactive()? And when would you use one or another? Let's find the answer together.

Authored by: Dmitri Pavlutin


Node.js App Step-by-Step Guide for Frontend Developers

App development is the process of creating software applications that run on mobile devices, such as smartphones and tablets. These apps can be native, which means they are built specifically for a particular platform or device, or they can be cross-platform, which means they can run on multiple platforms or devices.

Authored by: Bit

How to read excel file in Node.js

IDEA - Create a get api in Node.js to read below excel file using xlsx and convert data in json format which can be used by client side for further manipulation. If you are not sure as to how to create an api in Node.js, do refer my blog for clarity.

Authored by: JavaScript In Plain English

Let's build APIs with Node, Express, and PostgreSQL

This article is part two of the "Develop APIs with Express Framework and PostgreSQL" series. In part one, you learned how to create a NodeJS app with a simple get API responding with data from a connected PostgreSQL database. In part two, we will focus on creating a complete modern backend app with create, read, update & delete APIs.

Authored by: Yogesh Datir

How to solve Cannot find module 'bcrypt' error in Node.js

In this tutorial, we are going to learn about how to solve the cannot find module 'bcrypt' error in Node.js. This error occurs due to the bcrypt module is not installed in the node.js build or the package is corrupted while updating the node version.

Authored by: Sai gowtham

Functional Programming

JavaScript Require - How to Use the require() Function in JS

In JavaScript, modules refer to a file that holds JavaScript code which performs a specific purpose. Modules are self-contained, making it easy to add, remove, and update functionalities without affecting your entire code because they are decoupled from other pieces of code. When you have these modules in separate JavaScript

Authored by: Joel 🦸‍♀️