CuriousCoder

2b||!2b

State of React 2024 The 2024 edition of the annual survey about the latest trends in the React ecosystem.

State of React 2024 Survey Results are out!

2024.stateofreact.com/en-US

#javascript #react #stateofreact #webdev

The sentence: 'The word "font" comes from the Old French word "fonte", which means "[something that has been] melted; a casting."' Above an ilustration that shows different metal castings for printing single characters.

Typeface or Font?

The #typeface is the overall design style.

The #font is a complete set of characters that share the same typeface with specific variations like weight, size, and style.

Typeface: Times New Roman, Arial

Font: bold 12pt, italic 20pt

#typography #webdev

you to create specialized functions by partially applying arguments.

#programming #javascript #webdev

accomplished using closures. When you call f(a), it returns a new function that "remembers" the value of a. When you then call that returned function with b, it returns another function that remembers both a and b, and so on. This approach increases modularity and code reusability by allowing ...

Code example of Currying in JavaScript.

What is Currying?

#currying, named after Haskell Curry (1900-1982), is a technique of transforming a function that takes multiple arguments into a sequence of functions, each taking a single argument. For example, a function f(a, b, c) becomes f(a)(b)(c).

This is ...

Closure code example in javascript

Closure Explained!

It simply means a function can access variables from its outer function, even after the outer one finishes running. This "closed-off" space with remembered variables is the #closure.

#programming #javascript #webdev

...React framework called 'TanStack Start', which is currently in beta. It will include SSR, Streaming, Server functions, bundling (Vite) and more.

https://tanstack.com/

#tanstack #javascript #framework #webapp

Logo of TanStack

What is TanStack?

#TanStack is a collection of #JavaScript libraries that provide convenient tools for common problems when building a web application, such as data fetching and caching, client-side routing, state management and more.

They're also working on a full-stack...

An illustration of Santa on his sleigh programming on his laptop while being pulled by his reindeer.

Merry Christmas everyone! 🎄 🎅

#santa #programming #christmas

Generator - JavaScript | MDN The Generator object is returned by a generator function and it conforms to both the iterable protocol and the iterator protocol.

...there.

To do that, we must use the 'yield' keyword. If we use 'return', we will stop our Generator and can return a final value.

So a Generator can 'generate' something on demand, which can be useful for complex calculations.

#webdev #programming

Illustration of a office desk with a monitor displaying "Generators in JavaScript", in comic-style

Code example for creating a basic Generator in JavaScript

What is a Generator in #JavaScript?

A #generator is like a regular function, but with stepwise execution control. Instead of executing from start to finish in one go (like normal functions), a generator can pause and resume its execution, remembering its state and continue evaluating from...

code example showing functions used as variables in javascript

What is a First-Class-Citizen in Programming?

When an entity (like a function) is considered a first-class citizen, it means that it can be used just like other fundamental data types (e.g., numbers,
strings):

#programming #javascript #python #webdev

...methods, or for more reusable library functions.

But there is more (as always):
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions

#programming #javascript #webdev

...anization.

Their this binding is dynamic - so "this" depends on where we call the function, not where we wrote them - which is perfect for using them as object methods and referring to specific class instances.

So, as a guideline, use them for more complex logic, as object..

A simple, comic-style illustration depicting a person thinking about JavaScript functions. The person is cartoonish, with a lightbulb above their head

When to use Normal Functions in #JavaScript?

In general, normal functions are a bit more verbose and readable compared to Arrow Functions.

Function declarations are fully hoisted, meaning you can call them before they are defined in your code. This is useful for #code org...

State of JavaScript 2024 The 2024 edition of the annual survey about the latest trends in the JavaScript ecosystem.

State of JS 2024 Survey Results are out!

Take a look here:
https://2024.stateofjs.com/en-US

#javascript #stateofjs #webdev

An illustration of two cogwheels with the labels: 'Main thread' and 'Web Worker'.

What is a Web Worker?

Web workers are a powerful feature in #JavaScript that allow you to run scripts
in the background, separate from the main thread of your web application.

https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API

#webworker #webdev #performance

Naming things and...

#programming #webdev #javascript #gamer

Progressive Web Apps  |  web.dev In this collection, you'll learn what makes a Progressive Web App special, how they can affect your business, and how to build them.

...sive Design
4. Push Notifications

They combine the best features of web and mobile apps, providing a fast,
reliable, and engaging user experience.

https://web.dev/explore/progressive-web-apps

#javascript #webdev #webapp

What is a Progressive Web App?

A #PWA is a type of web application that uses modern web features to deliver
an app-like experience. It is basically a website installed as an app and
integrated in your OS with features like your other applications.

1. Offline Access
2. Fast Performance
3. Respon...

Code example for the Set-object in javascript

The Set object in JavaScript!💡

The Set object is a collection of unique values. Unlike arrays, sets do not
allow duplicate values, making them useful for storing unique items.

#javascript #webdev #programming

React v19 – React The library for web and native user interfaces

🚨 ---NEWS ALERT--- 🚨

React 19 is now stable!

Read the blogpost:
https://react.dev/blog/2024/12/05/react-19

#react #programming #web #webdevelopment

Arrow function expressions - JavaScript | MDN An arrow function expression is a compact alternative to a traditional function expression, with some semantic differences and deliberate limitations in usage:

variable.

Use them for short, simple logic or as 'inner' functions when you need to preserve this in nested functions or methods.

But there is more (as always):
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

#programming

An illustration of a comic arrow with the label: javascript on it.

When to Use Arrow Functions in #JavaScript

Arrow functions are concise and great for simple logic, like callbacks (() => 0).

They feature lexical #this scoping, inheriting this from where they are declared.

This removes the need to manually bind (call, apply, or bind) or store this in a ...

built-in HTML-Elements. You can roughly think of it like React Components, but with plain VanillaJS.

https://developer.chrome.com/docs/css-ui/declarative-shadow-dom

#webdevelopment #webstandard

What is the Shadow DOM?

The #shadowDOM is a web standard that enables encapsulation of #HTML and #CSS,
allowing developers to create components with isolated styling and structure.

Those so called web components are like custom HTML-Elements, but with all the utilities and properties of...

This method merges the quick loading of the initial page with the interactivity of an application, which loads while the initial page is being loaded and then takes over.

For more see:
https://jamstack.org/
https://snipcart.com/blog/jamstack (The illustration I used)

An illustration showing the different technologies (like React or Gatsby) for the corresponding abbreviation: J - JavaScript, A - APIs, M - Markup

What is the JAMstack?

The #JAMstack is basically a pattern in webdevelopment that consists of:

J - #JavaScript
A - #APIs
M - #Markup

One popular approach is to fetch the dynamic data on the frontend (in a SPA like React) and serve your static content on the initial page load.