JSK Weekly - November 09, 2022

Terms you're likely to hear are "bun in the oven" or "bun fight", but do you know about bun.js? Well, for those who don't; Node.js and Deno were popular runtimes and Bun.js is the newborn runtime in 2022. Read more in "Getting Started with Bun.js and Create a React app" on Bits and Pieces.

Other popular stories this week include Rafeh Waqar's "5 Things We Can Do to Decrease Load Time of the React Application", Daniel Asta's "TypeScript for React Developers" and "What’s New in 2022 Volume 2: Essential JS 2" on Syncfusion.


General

Create Web Components with Lit Element, Vite, and Tailwind

First of all, if you don't mind about the details, here is the repo of the starter kit: For the first release of Browserbot, our open source project to delegate tests for web apps, we want to give devs a frontend API to easily create new systems without having to reinvent the frontend parts each time.

Authored by: Bit

What’s New in 2022 Volume 2: Essential JS 2

Syncfusion Angular packages are now compatible with Ivy. The Ivy packages support Angular versions 12 and above. Syncfusion Angular packages tagged with ngcc are also published to provide the latest features and fixes for Angular versions 11 and older.

Authored by: Syncfusion

How to HandleVariables in Cypress

In this tutorial, we will learn how to handle variables in Cypress. Dealing with variables in Cypress is not as straightforward as it seems due to the way Cypress work with promises. Let's take a look at it - it("gets the text of the heading and assert the value", () => { // get the text cy.get("h1.elementor-heading-title").then(($heading) => { expect($heading.text()).to.eq("Think different.

Authored by: JavaScript In Plain English

Next.js 13: What Do The New Bleeding-Edge Features Actually Do?

Next.js 13 is the first across-the-board attempt to bring together React's dual identities - The UI Library, and The Architecture. Overnight, all How To Build X With Next.js tutorials have become outdated. Or have they...? Actual breaking changes are surprisingly few. You'd only have to change a few lines of JSX and a couple imports for backwards compatibility.

Authored by: Bit

Building Your First Island-based Project with Astro

The "Islands of Interactivity" pattern is being talked (or written) about quite a lot lately, and that's because more frameworks are starting to embrace it. Recently Fresh 1.0 was released, and they base their entire architecture around this pattern. I even wrote a piece about this in case you'd like to know more details about how islands work.

Authored by: Bit

Getting Started with Bun.js and Create a React app

Have you used Node.js ( Node.js (nodejs.org)) or Deno ( Deno - A modern runtime for JavaScript and TypeScript)? Do you know what Bun.js ( Bun is a fast all-in-one JavaScript runtime) is? Well, for those who do not know them, all three of them are JavaScript runtimes.

Authored by: Bit


JavaScript

The Complete JavaScript Guide

To start using JavaScript, you only need this blog. JavaScript is a multi-paradigm, dynamic, high-level, loosely typed language. We use JavaScript to create: Websites Mobile applications Web applications Server-side applications using Node.js Smartwatch applications Let now cover all the important JavaScript concepts, one-by-one A variable is a value assigned to an identifier, so you can reference and use it later in the program.

Authored by: Bit

JavaScript Algorithms: ATM (Cash Machine)

In this article, we will consider the popular task ATM, which is quite often used in interview questions. The task statement looks something like this: There are banknotes of different denominations in circulation: 1, a 2, ..., and so on.

Authored by: JavaScript In Plain English

Top JavaScript Frameworks for 2023

JavaScript is by far the most popular programming language in the world, and it's used to create interactive and dynamic web experiences...

Authored by: JavaScript Kicks

How to Check if a String Contains Uppercase Letters in JavaScript

To check if a string contains uppercase letters in JavaScript, call the test() method on this regular expression /[A-Z]/, i.e., /A-Z/.test(str). test() will return true if the string contains any uppercase letters. Otherwise, it will return false.

Authored by: Coding Beauty


TypeScript

Conditional Types in TypeScript - Upmostly

Conditional types in TypeScript help you to create types depending on another type, by checking if that type satisfies some condition. In their simplest form, they take the format of: MyType extends SomeType ? IfTrueType : IfFalseType; Here's a simple example, checking if a type can be converted to a string.

Authored by: Upmostly

TypeScript for React Developers - Why TypeScript is Useful and How it Works

If you've been using React for a while, you may have noticed times when the freedom and wild nature of JavaScript works against you (and not because of JS 😄). This can be especially true if you're working in a team. You may not know it, but you need TypeScript

Authored by: dastasoft

Clean Up Code Smells with Clean Code: TypeScript Edition

According to Wikipedia, in computer programming, a code smell is any characteristic in the source code of a program that possibly indicates a deeper problem. To simplify the definition, code smells are a result of unclean or misguided programming.

Authored by: Bit

TypeScript with Node.js

TypeScript is getting more popular these days for frontend and backend applications. Here you will learn how to set up TypeScript in Node.js for a backend project. The previous tutorial already demonstrated how to set up a JavaScript project with Node.js. With this as foundation, we will start migrating the project to TypeScript here.

Authored by: Robin Wieruch


React

Simple React-like Button With Stylify CSS

Write CSS-like selectors directly into the template and style your React app quickly with Stylify CSS. Learn how to use Stylify CSS. to style a button quickly using only utilities and then clean the template using components. Learn why the output in production can be 50% and smaller🔥.

Authored by: JavaScript In Plain English


Vue

Scroll to Top in Vue with Reusable Components

In improving the user experience on any website with a lot of content on its web pages, it is common for frontend developers to implement a scroll-to-top functionality through a button, to make things more enjoyable and convenient for users.

Authored by: StackAbuse


Node.js

Node.js vs. Express: Side-by-Side Comparison of Backend Technologies

It's important to choose the right backend technology, as it can seriously affect your application's performance and scalability in the future. Node.js vs. Express are two popular choices today, so it's important to understand the key differences between them before deciding on one.

Authored by: JavaScript In Plain English


Functional Programming

Nesting JSON Functions Inside JSON_ARRAYAGG() And JSON_OBJECTAGG() In

The other day, Joel Hill and I were pair-programming on some complex SQL queries, attempting to figure out how to group rows while simultaneously limiting the aggregation and extracting portions of it. I don't believe that what we were trying to do was possible within a single query (at least not in MySQL 5.7); but, it got me noodling on JSON aggregation.

Authored by: Ben Nadel

Why would anyone need JavaScript generator functions?

You can go a long time as a JavaScript developer without ever feeling the need for generators. Hence, it's natural to wonder: What are they good for? Why would you ever need one? What's the point? But there generators can do some neat tricks.

Authored by: James Sinclair





0 comments