JSK Weekly - January 11, 2023

Starting off the new year with the right mindset is a game changer. And speaking of game changers, this week Shamim Ahmed dives into "Why Next.js 13 is a Game-Changer", so check it out on Bits and Pieces.

Other popular stories include "11 Console Methods in JavaScript for Effective Debugging" on Syncfusion, "How to Create Custom Back Button with React Router DOM v6" by Digamber and "6 Free Modern Tools for Developers of 2023" by Abdulazeez Sherif.


General

Rethinking Code Reuse

Every now and then, we see debates on how to structure the codebase to make it more maintainable, and I would say having agreement upon what would be the right direction of "code reuse" or "what is reusable code" is a significant milestone to conquer during these discussions.

Authored by: Bit

As a Front-end Engineer: 9 Secrets About JSON.stringify You Should Know About

As a front-end development engineer, you must have used JSON.stringify, but do you know all its secrets? A long time ago, I made an irreparable mistake at work because of it. If I had known about it earlier, this tragedy would not have happened. Basically, JSON.stringify converts an object into a JSON string.

Authored by: fatfish

Secure Methods for Transmitting Sensitive Data

The transmission of sensitive data over the internet is an essential part of modern business and communication, but it also carries significant risks. Sensitive data, such as financial information, personal data, or confidential business information, can be at risk of being accessed or compromised if it is transmitted insecurely.

Authored by: Bit

4 of the greatest programmers in the world

As the world becomes increasingly reliant on technology, programmers have become some of the most influential and respected professionals in the world. From developing the software that powers our devices and systems to shaping the way we communicate and access information, programmers are at the forefront of the digital revolution.

Authored by: JavaScript In Plain English

Why Next.js 13 is a game-changer

Next.js is a JavaScript framework that is built on top of React, a popular library for building user interfaces. This means that you can use React to build your app, and Next.js provides additional...

Authored by: Bit

Simulating Frontends in Multi-Core Devices using Chrome DevTools

Do you know that you can simulate frontends in Chrome DevTools with any number of CPU cores you wish to have? Google Chrome DevTools is one of the most common utilities among web developers. Due to...

Authored by: Bit

6 Free Modern Tools for Developers of 2023

Do you want 2023 to go smoothly for your web development endeavors? Check out these free resources used by the 2023 Modern Web Developers! The preferred tool for creating a color scheme for your website is Coolers 2. Roadmap.sh A roadmap collection may include roadmaps for frontend, backend, blockchain, cyber security, and other areas.

Authored by: Abdulazeez Sherif

How to Implement a Multiple Search Filter in Next.js

The project is from Frontend Mentor's Advanced API project. npx create-next-app restcountriescd restcountriesnpm run dev I'll recommend you to see the official documentation for a thorough explanation on its intallation. Now that our project is set, let's use the getStaticProps() function by NextJS to pre render our content from the API.

Authored by: Ryan


JavaScript

Day.js: Future of JavaScript Day and Time Handling

Date and time handling in JavaScript is a nightmarish experience for most software developers. This challenge has given rise to several third-party libraries capable of manipulating, formatting, and validating dates. So, this article discusses one of the best solutions for JavaScript date and time handling and how to utilize it in your projects.

Authored by: Bit

11 Console Methods in JavaScript for Effective Debugging

JavaScript console methods allow developers to access the debugging console in web browsers. Developers can improve the application debugging process by using methods to print various messages on the browser console.

Authored by: Syncfusion

JavaScript Execution Context - How JS Works Behind the Scenes

Have you ever wondered how JavaScript works behind the scenes? It's actually quite fascinating! And that's what you'll learn about here. JavaScript is a single-threaded interpreted language. Every browser has its own JavaScript engine. Google Chrome has the V8 engine, Mozilla Firefox has SpiderMonkey, and so on. They all are

Authored by: Rwitesh Bera

15 Things I Learned About JavaScript

JavaScript is a programming language that is widely used on the internet and is an essential tool for web developers. It allows developers to create interactive and dynamic websites and has become an integral part of the modern web.

Authored by: JavaScript In Plain English

JavaScript Fundamentals: Math Object

Today is the 4th day of my #100DaysOfCode journey with JavaScript. I write about my learnings in an explained way through my blogs and socials. If you want to join me on the learning journey, make sure to follow my blogs and social and share yours too.

Authored by: Mr. Ånand 🧬

Detect Browser Bars Visibility with JavaScript

It's one thing to know about what's in the browser document, it's another to have insight as to the user's browser itself. We've gotten past detecting which browser the user is using, and we're now into knowing what pieces of the browser UI users are seeing.

Authored by: David Walsh

A Complete Guide to "this" in JavaScript

Javascript newbies often don't understand the meaning of the this keyword in javascript. This topic will be of interest not only to beginners, but also to those who just want to refresh this aspect in their memory. If you find it difficult to answer the question "what is this in Javascipt", welcome to this article!

Authored by: JavaScript In Plain English

JavaScript print Events

Media queries provide a great way to programmatically change behavior depending on viewing state. We can target styles to device, pixel ratio, screen size, and even print. That said, it's also nice to have JavaScript events that also allow us to change behavior. Did you know you're provided events both before and after printing?

Authored by: David Walsh

How to Filter Duplicate Objects From an Array in JavaScript

To filter duplicate objects from an array by a property in JavaScript, use the filter() method to filter out elements that are not the first in the array having the property value. For example: JavaScript The tests each element in an array against a condition specified by a callback function, and creates a new array filled with elements that pass the test.

Authored by: Coding Beauty

Five reasons not to adopt any JavaScript framework

Angular, Ext JS, React, Vue, Svelte, Alpine, Remix, Blitz, Qwik and so on. A growing list of fantastic platforms for front-end development. I started using them around 2011 and have continued to this...

Authored by: Giorgio Di Falco


TypeScript

Fun with Types

I've had a lot of fun over the years writing TypeScript, and I've delved deep into the cursed amazing land of generics. This post is going to be a mix of interesting tidbits, semi-useful things, and some absolutely absurd things that you can do with TypeScript.

Authored by: Unicorn Utterances


Angular

How to Build a Route Reuse Strategy with Angular

Before jumping into Route Reuse Strategy, Let's understand what will happen if we navigate from one component to another component by changing the route.

Authored by: Bit


React

Unleash the Power of Server-Side Rendering with React Server Components and Next.js 13

Server components is a feature of React that has been coming for a while now. We've all seen preliminary impressions about them and how they promise to change the way we design our apps. With the release of Next 13, we also got access to this feature.

Authored by: Bit

How to Handle React Query Error Response in React JS

React Query error handling example. Error handling is a crucial task in dealing with data fetching. React Query helps us to handle asynchronous data with utmost flexibility. It offers various hooks for creating, reading, updating, and deleting data from the database. React Query is a wonderful module that makes error handling extremely simple by returning an error property.

Authored by: Digamber Singh

Modular React applications

Structuring applications is a big discussion topic at the start of every project. There are many common practices on how to arrange directories in a React application. The most common approach I see is to structure files on the top level by their framework unit type.

Authored by: JavaScript In Plain English

How to hide your API keys and tokens in React to protect your application

Have you ever noticed that some applications have API keys, tokens, or other sensitive credentials visible in their source code? or maybe your own applications? Well, this can be dangerous and put the security of your services at risk. API keys, tokens, and other sensitive credentials are used to authenticate and authorize access to services and APIs.

Authored by: L Javier Tovar

Mastering the useState Hook in React

Hooks were introduced in React 16.8 version. This magical React update made classes nearly obsolete and thus many developers have been using hooks since and are not looking back.

Authored by: Bit

How to Create Custom Back Button with React Router DOM v6

A back button takes the back user to the previous page he visited earlier. An applicaiton is a conjugation of various pages; a user can navigate from one page to another page using routes. But, many times, we may need a back button that allows users to go one step back.

Authored by: Digamber Singh


Node.js

Why NestJS is the Perfect Framework for ASP.NET Teams Migrating to Node.js (Or Vice-Versa)

There are a plethora of ways you can start your web development journey. The modern web has a lot of frameworks, and it's becoming more of a hurdle for newbies to pick which one is the best for them...

Authored by: theo

Tip for writing nodejs scripts using only built-in modules and async

For the last few years, I've spent a huge majority of my time writing scripts in nodejs as my default scripting language. I've dabbled with bash a bit too, but it's still so weird, and hard to test, and I'm such a Typescript fan that I generally prefer to go the typescript route as often as possible.

Authored by: Jonathan Creamer


Functional Programming

Higher Order Functions in JavaScript - Explained with Practical Examples

As a web developer, you should always strive to learn new techniques and discover ways to work smarter with JavaScript. One such technique is using higher order functions. Higher order functions are functions that take one or more functions as arguments, or return a function as their result. In

Authored by: Sobit Prasad

How to fix querySelectorAll is not a function error in JavaScript

In this tutorial, we are going to learn about how to solve the TypeError:querySelectorAll is not a function error in JavaScript. The TypeError: "TypeError:querySelectorAll is not a function" error occurs one of the following reasons: Using the querySelectorAll on a invalid dom object or HTML element. Calling JS file before the HTML declaration.

Authored by: Sai gowtham





0 comments