DEV Community: xanderlambert

Everything I Know About Analog Computing in the Modern Era.

xanderlambert — Sun, 02 Jul 2023 18:28:08 +0000

Introduction:

I recently read something about analog computing... specifically, that most of the big tech companies (and some startups) are "secretly" working on analog chips. So I wanted to know why it was a big deal and what the potential was. In this blog post, we will explore the fascinating world of analog computing and its resurgence in the modern era. While analog computing may seem like a relic from the past, recent advancements have brought it back into the spotlight with the promise of enhanced efficiency and speed.

Ancient Analog Computing Examples:

Let's start by taking a brief look at ancient analog computing examples. The Antikythera mechanism, a hand-powered device discovered off the Greek island of Antikythera, is described as the oldest known analog computer. Dating back to c. 150 BC, during the Hellenistic period, this device was capable of predicting astronomical positions and eclipses decades in advance.

Similarly, the Incas used a method called Quipu, which involved using strings and knots to keep records, perform mathematical calculations, communicate, and store information. These early analog computing examples showcased the ingenuity of ancient civilizations in harnessing analog principles to solve complex problems.

Analog Computing in the Modern Era:

Fast forward to the modern era, where analog computing is making a comeback. In 2005 and 2015, a research group at Columbia University developed new analog chips, showcasing significant advantages in terms of solution time, energy efficiency, and accuracy. These advancements opened up possibilities for energy-efficient approximate computing.

One of the recent breakthroughs in analog computing involves the use of resistive memory-based computing, referred to as RRAM-PIM (Resistive Random Access Memory Processing-In-Memory). Unlike traditional digital computing that relies on transistors and binary code, RRAM-PIM computers store information in resistors themselves, eliminating the need for data translation. This innovation greatly reduces the transfer and translation of data, making analog computers more efficient.

The Promise of Programmable Resistors:

Programmable resistors serve as the key building blocks in analog deep learning, allowing researchers to create networks of analog artificial "neurons" and "synapses" for complex AI tasks such as image recognition and natural language processing. By using arrays of programmable resistors in complex layers, these networks can be trained more efficiently and with reduced energy consumption compared to traditional digital neural networks.

The Advantages of Analog Computing:

Analog computing offers several advantages over its digital counterpart. First, computation is performed in memory, eliminating the need for constant data transfer between memory and processors. This not only enhances speed but also reduces the energy required for computing tasks. Furthermore, analog processors conduct operations in parallel, allowing for simultaneous computations. As the size of the matrix expands, an analog processor does not require additional time to complete new operations, making it highly efficient for scaling complex computations.

The Future of Analog Computing:

The potential and value of analog computing are becoming increasingly evident as services and computing become less centralized. With the demand for training deep learning systems and simulating complex systems growing, the efficiency and low energy requirements of analog computing become significant advantages. Imagine having specialized analog computers for specific computations and training tasks, or tapping into a powerful analog model through an API, harnessing its full potential while benefiting from low-energy, high-speed calculations.

Speculation:

Now, let's dive into another exciting speculation that highlights the specific use cases of analog computing in our future. Imagine a scenario where we aim to combat climate change by developing highly accurate weather prediction models. Analog computing could play a pivotal role in this endeavor. Traditional digital models often struggle to process the massive amount of data required to simulate complex weather patterns, leading to delays and reduced accuracy. However, with analog computers, we could achieve real-time simulations, allowing meteorologists to make more precise forecasts, predict severe weather events with greater accuracy, and consequently, save lives and mitigate the impact of natural disasters. The parallel processing capabilities and energy efficiency of analog computing could revolutionize our ability to understand and respond to the complex dynamics of our ever-changing climate.

Conclusion:

Through exploring the captivating world of analog computing, we have witnessed its historical significance and its resurgence in the modern era. Recent advancements in analog chips and resistive memory-based computing have unlocked new possibilities, offering enhanced efficiency, speed, and parallel processing. From autonomous vehicles revolutionizing transportation to highly accurate weather prediction models combating climate change, analog computing has the potential to transform various industries and tackle pressing global challenges. As we move towards a decentralized computing landscape and continue to push the boundaries of technology, analog computing stands as a promising avenue for unlocking unprecedented capabilities and ushering in a future where efficiency, speed, and accuracy converge.

Bonus Representation of an Analog Function in JavaScript.

// Analog Computing Example: Multiplication using Resistive Memory

// Define the resistance values for the resistors
const resistor1 = 2; // Represents the value of 2 Ohms
const resistor2 = 3; // Represents the value of 3 Ohms

// Analog multiplication operation
function analogMultiplication(a, b) {
  // Connect the currents through the resistors
  const current_a = a;
  const current_b = b;

  // Calculate the voltage drop across each resistor
  const voltage_drop_a = current_a * resistor1;
  const voltage_drop_b = current_b * resistor2;

  // Measure the combined voltage drop
  const combined_voltage_drop = voltage_drop_a + voltage_drop_b;

  // Calculate the resulting current
  const resulting_current = combined_voltage_drop / resistor2;

  return resulting_current;
}

// Test the analog multiplication function
const input_a = 4; // Represents the value of 4 Amperes
const input_b = 2; // Represents the value of 2 Amperes

const result = analogMultiplication(input_a, input_b);
console.log(`The result of analog multiplication is: ${result} Amperes`)

RESOURCES:

https://en.wikipedia.org/wiki/Analog_computer
https://www.sciencedaily.com/releases/2021/12/211209082557.htm
https://news.mit.edu/2022/analog-deep-learning-ai-computing-0728

JavaScript Vanilla Extract with Sprinkles: The Sweetness of Simplicity

xanderlambert — Sun, 18 Jun 2023 16:16:15 +0000

Gather round, my dear readers, as I regale you with a tale of a delectable concoction known as "JavaScript Vanilla Extract with Sprinkles." In this digital age, where complexity often reigns supreme, this humble essence stands tall as a testament to the timeless power of simplicity.

Now, you might ask, what exactly is this delightful elixir? Well, my friends, it is the purest form of JavaScript, unadulterated by frameworks, libraries, and other modern trappings. It is the essence of the language itself, distilled to its sweetest and most elegant core. Just like vanilla extract adds depth and flavor to culinary creations, JavaScript Vanilla Extract enriches web development with its straightforward nature.

In a world filled with countless JavaScript frameworks and libraries, one might wonder why anyone would choose to embrace such simplicity. Ah, but therein lies the beauty! Like a freshly baked sugar cookie, JavaScript Vanilla Extract with Sprinkles offers a taste that is both familiar and comforting.

First and foremost, this unadorned approach allows developers to truly understand the language. It enables them to grasp the fundamental concepts, learn the intricacies, and wield the full power of JavaScript. With a deep understanding of the language, developers can craft code that is more efficient, maintainable, and robust.

Furthermore, JavaScript Vanilla Extract with Sprinkles liberates developers from the shackles of heavy dependencies. It grants them the freedom to build lightweight applications without the need for bulky frameworks. Imagine, if you will, a luscious ice cream sundae. While it may be tempting to add countless toppings and sauces, sometimes the pure pleasure lies in savoring the ice cream itself. Similarly, by embracing the simplicity of vanilla JavaScript, developers can create nimble and performant applications that shine without unnecessary complexities.

To truly grasp the potential of JavaScript Vanilla Extract with Sprinkles, let me enthrall you with a few examples. Picture a small online store, meticulously handcrafted using vanilla JavaScript. The codebase is concise, yet elegant, allowing for effortless navigation and seamless transactions. The absence of excessive dependencies ensures quick loading times, providing users with a delightful shopping experience.

Now, envision a dynamic blog platform, its foundation built upon the simplicity of JavaScript Vanilla Extract with Sprinkles. It boasts an intuitive user interface, smooth content rendering, and effortless interactivity. Without the overhead of complex frameworks, the blog runs like a well-oiled machine, pleasing both writers and readers alike.

Additionally, Vanilla Extract provides a powerful toolset for optimizing web performance and development workflow. By using the file extension .ts, developers signal to the compiler that the code is safe to evaluate at file time. This allows for compilation before the code is sent to the browser, ensuring efficient and consistent execution. Vanilla Extract seamlessly integrates with webpack configuration through plugins, enabling compile-time evaluation and providing visibility into changes made with every webpack compilation. To incorporate Vanilla Extract into your project, simply install it via npm and add the plugin to your webpack config, setting rules to target only Vanilla Extract generated CSS files.

Now, let's not forget about Sprinkles. Sprinkles is an API that allows developers to quickly create sets of themed utility classes, returning a typed API for accessing them. Think of Sprinkles as a way to create a custom-typed version of Tailwind or another styled system. By utilizing Sprinkles, developers can easily and efficiently style their websites and enjoy the fruits of their labor with beautifully styled and responsive sites.

In conclusion, JavaScript Vanilla Extract with Sprinkles is a beloved choice for developers due to its speed, lightweight nature, consistency, and the ability to use familiar JavaScript syntax. It enables the creation and organization of styles quickly and easily, making it a valuable tool for long-term projects or companies with the need for their own larger set of unique styles. While it may have a slight learning curve compared to more out-of-the-box component styling libraries, it is still approachable for developers. As for importing premade styles, it may require some effort, but it excels when it comes to creating your own unique styles. With Sprinkles as an additional flavor, developers can leverage the API to swiftly generate themed utility classes, enhancing the customization and efficiency of their projects.

So, my dear readers, as you journey through the ever-evolving landscape of web development, remember the essence of JavaScript Vanilla Extract with Sprinkles. Embrace its simplicity, savor its flavor, and let it guide you on a path of mastery. For in the realm of web development, sometimes the sweetest and most enduring creations are born from the purest ingredients.

In the words of the renowned writer Mark Twain himself, "Simplicity is the keynote of all true elegance." And with JavaScript Vanilla Extract with Sprinkles, elegance reigns supreme, bringing forth a world of possibilities.

Resources: https://vanilla-extract.style/

https://www.youtube.com/watch?v=SeVF1OFy5_I

https://www.npmjs.com/package/@vanilla-extract/webpack-plugin

ReactThreeFiber & ThreeJS

xanderlambert — Sun, 04 Jun 2023 23:37:09 +0000

What are ReactThreeFiber & ThreeJs?

In the wild landscape of web development, two names loom large, their presence looking to envelope the digital realm. ReactThreeFiber and Three.js. These technologies have united to push the boundaries of what's possible in the world of 3D websites. ThreeJS is responsible for the 3d rendering within web browsers and React-three-fiber is an open source solution that allows developers to do that with React.

What makes ReactThreeFiber especially useful?

ReactThreeFiber is a powerful framework that brings the capabilities of Three.js into the realm of React. It acts as a bridge, connecting the declarative and component-based nature of React with the low-level, performance-oriented world of Three.js. This dynamic duo enables developers to create stunning, interactive 3D experiences within the familiar ecosystem of React.

But ReactThreeFiber's true genius lies in its audacious simplicity, cutting through the noise and confusion of traditional Three.js development. With an intuitive API, ReactThreeFiber frees the imagination to roam untethered, allowing developers to craft awe-inspiring 3D scenes while wielding the power of React's component model to tame chaos, manage states, and orchestrate complex animations.

How do the above technologies figure into the general trend of 3D sites?

As the world becomes increasingly visual and immersive, the demand for 3D websites is on the rise. With ReactThreeFiber and Three.js, developers can seamlessly integrate 3D elements into their web applications, bringing a new level of interactivity and engagement to the user experience. From product showcases and virtual tours to interactive data visualizations and games, the possibilities are virtually limitless. The age of 3D websites has dawned.

What is the potential?

What do we do with this? What's to come from it? ReactThreeFiber and Three.js transport you to a realm where imagination reigns supreme, where digital landscapes morph and pulsate with a life of their own. Architectural wonders materialize before your eyes, educational experiences take on an otherworldly allure, and artistic masterpieces dance in sublime harmony with your soul. The potential is an unfathomable chasm, ready to consume the uninitiated and propel the audacious to the outer reaches of reality.

Code Examples.

Now, let us venture into the heart of the storm with some code examples to illustrate the magic that ReactThreeFiber and Three.js can conjure.

import React from 'react';
import { Canvas } from 'react-three-fiber';
import * as THREE from 'three';

const Scene = () => {
  return (
    <Canvas>
      <ambientLight />
      <pointLight position={[10, 10, 10]} />
      <mesh>
        <boxGeometry args={[1, 1, 1]} />
        <meshStandardMaterial color="hotpink" />
      </mesh>
    </Canvas>
  );
};

const App = () => {
  return <Scene />;
};

export default App;

In this simple example, we create a React component that renders a 3D scene with a pink box. ReactThreeFiber's component sets up the necessary WebGL context, while the declarative nature of JSX allows us to define the 3D scene using familiar HTML-like syntax. With just a few lines of code, we have a basic 3D rendering up and running. From here it is fairly simple (and fun) to edit the colors, rotation angles, dimensions of the cube. Event handlers can also be added to the components, allowing them to react to user input.

To conclude, ReactThreeFiber and Three.js represent a powerful combination that opens up a whole new dimension of possibilities for web developers. With their intuitive APIs, extensive feature sets, and vibrant communities, these technologies empower us to build immersive 3D experiences that captivate and engage users like never before. So buckle up, strap on your virtual reality goggles, and get ready to embark on an exhilarating journey into the surreal realm of ReactThreeFiber and Three.js. The road ahead is wild, but the rewards are truly extraordinary.

Resources:
https://threejs.org/
https://docs.pmnd.rs/react-three-fiber/getting-started/introduction
smashingmagazine.com/2020/11/threejs-react-three-fiber/
https://codesandbox.io/s/runtime-frost-p3glo4

Isn't it Ionic?

xanderlambert — Mon, 01 May 2023 01:46:48 +0000

At a glance:

After hearing from a friend that he uses Ionic regularly, I decided to look into it. Ionic is an open source mobile Software Development Kit for the web. You can use Ionic to create and build an app, or add to an existing app. Here is a quote from the site about what makes Ionic unique. "Ionic is the only mobile app stack that enables web developers to build apps for all major app stores and the mobile web from a single codebase. And with Adaptive Styling, Ionic apps look and feel at home on every device." I totally buy this. I've checked the goods and thought to myself "well, isn't this nice." They have a great selection of components, styles, animations and are compatible with multiple frameworks. Enticing.

Features:

Ionic is a versatile mobile app development framework that supports a range of popular JavaScript frameworks, including React, Angular, Vue, and vanillaJS. That being said, it seems to be most popular with Angular users. It also provides native device plugin integration, enabling apps to interact with Bluetooth and sensors seamlessly. With Ionic, developers can build and preview mobile apps directly in their web browser and choose to deploy them as native apps, PWAs, or both. Ionic's "plug & play" cross-platform mobile UI is similar to popular styling libraries like MUI or styled components. Plus, because Ionic Apps are built with web technologies, they perform equally well as both a Progressive Web App and a native app. Whether you're building a small prototype or a complex enterprise app, Ionic provides all the tools you need to create powerful, high-performance mobile apps that work seamlessly across platforms. See the below example of a Ionic component. Notice the ease at which you can toggle the device and OS.

Reviews:

Ionic Framework has a lot of happy users out there. Many have praised it for its ease of use and compatibility with various frameworks. One comment mentioned that they were able to create their app in a fraction of the time it would have taken with other frameworks. Others have applauded its flexibility, stating that they were able to integrate native device features with ease. Overall, it seems that Ionic has a solid reputation in the development community. Who would've thought? It figures that if they like it, it's worth exploring.

Take that flight:

You oughta know how to get started if you want to look into using Ionic. First make sure you have the latest version of Node.js and npm installed on your computer. Then, install the Ionic CLI by running the command "npm install -g ionic" in your terminal.
Once installed, create a new project by running "ionic start [project-name] [template]" where the template can be one of the many available options such as "blank", "tabs", or "sidemenu".

With your project set up, you can now start adding pages, components, and other features using the built-in Ionic UI library and JavaScript. Test your app (frequently) by running "ionic serve" in your terminal and previewing it in your browser or on a mobile device with the Ionic DevApp.

As far as publishing goes, use the "ionic build" command to create a production-ready version. And that's it! With Ionic Framework, you'll have all the tools you need to create a mobile app that's both functional and pretty. Something to note is that Ionic says that they make it especially easy to deploy both a web app version and native version of your app if you so choose. See the below examples from one of their YouTube videos. This is without and then with ionic, respectively.

Conclusion:

Ionic Framework is definitely worth considering for your next mobile app project. Its compatibility with multiple frameworks, support for native device plugins, and ability to deploy as a native app or PWA make it a versatile option. Plus, its "plug & play" cross-platform mobile UI makes it easy to get started. Positive reviews from the development community and the ability to get your app to everyone relatively easily, regardless of device, makes Ionic is a solid choice, don't you think?

Links:

https://ionicframework.com/

https://www.youtube.com/watch?v=mJsxhUnP0Qc

https://stackshare.io/stackups/angularjs-vs-ionic#:~:text=AngularJS%20belongs%20to%20%22Javascript%20MVC,Cross%2DPlatform%20Mobile%20Development%22.

Why Web Apps?

xanderlambert — Mon, 24 Apr 2023 02:38:07 +0000

Many companies are shifting to Progressive Web Apps. Spotify is maybe my favorite example. Uber, Tinder and Pinterest are three more. A web app is accessed through a web browser like Chrome, Firefox, or Safari, which communicates with the web server that hosts the application. Web apps seem to present a range of benefits for developers and users alike. Here, I will focus on the UI benefits, maintenance benefits and briefly discuss implementation. Web apps can be easier to maintain (developers) and provide greater accessibility (users).

UI/Accessibility: One of the key advantages of web apps tout over local versions is their accessibility. Web apps can be accessed from any device with an internet connection and a web browser, making them highly convenient for users. Additionally, web apps are not tied to a specific platform or operating system, which means they can be accessed from any device regardless of whether it's an iOS, Android, Windows, or Mac device. This is a game changer, as it opens up the large portion of the population to potentially using your app. Another point that makes web apps more accessible is the fact that users never need to download an app. No need to take up that precious storage space for an app you might use a handful of times, or cant even find. While some very commonly used apps may still have some benefits to being stored locally, many are moving to the web. Lets think of an example. You want an app that displays a calendar with Mardi Gras parade times for the year. In this case, you will only need the app for a a week or two at the most. Why keep it somewhere deep in your iPhone until you try to redownload it next year? Wouldn't it be so much easier to paste the link into your browser (or save it to your home screen) and return to that page as needed?

Maintenance and updates: Web apps are typically easier to maintain and update than other types of applications. One reason for this claim is because the application is hosted on a web server, updates can be made to the application without requiring users to download or install anything on their devices. This makes it easier for developers to fix bugs, add new features, and make other improvements to the application as needed. The next time a user visits, the changes will have been made. Another key benefit to developers is since the app is accessed through the browser, the browser is all that needs to be accounted for, rather than the operating system or device type. This of course allows developers to focus their skills on other parts of the app.

WebAssembly: How does it fit in?
WebAssembly is a binary instruction format for a stack-based virtual machine that is designed to run in web browsers. What does this even mean? It means that WebAssembly can be used to compile code that can run directly in a web browser, without the need for plugins or other third-party software. The aim of WebAssembly was to bring resource intensive desktop apps into the browser while maintaining performance. WebAssembly is a way to use other(faster) coding languages instead of JavaScript within the browser. Languages such as C or Rust, which can be compiled into highly optimized code that run faster than equivalent JavaScript. WebAssembly does not have the ability to manipulate the DOM, though, so JavaScript is used to "fill in the gaps". This makes WebAssembly likely to become an increasingly important part of the web development landscape in the coming years.

Web apps provide a convenient way for users to access and interact with software applications without needing to download and install additional software on their devices. So next time you're looking for a good Mardi Gras calendar, check so see if there's a web app! Hint: There is. https://www.mardigrascalendar.com/

resources:
https://dev.to/badams92/webassembly-9me
https://developer.mozilla.org/en-US/docs/WebAssembly/Concepts
https://en.wikipedia.org/wiki/WebAssembly
https://webassembly.org/
https://www.techtarget.com/searchsoftwarequality/definition/Web-application-Web-app
https://www.tutorialspoint.com/webassembly/webassembly_examples.htm
https://www.codica.com/blog/best-examples-of-pwa/

JSX: The Fusion of Markup and Logic in React Development

xanderlambert — Mon, 17 Apr 2023 01:14:57 +0000

Ever find yourself wondering how web developers create components that seamlessly integrate rendering logic and markup? Wonder no more! Enter JSX, a tool that has become an integral part of React development. JSX allows developers to write components with both rendering logic and markup together in one file, offering a more organized and efficient way of managing code than traditional methods of separating JavaScript, HTML, and CSS into separate files. While JSX looks similar to HTML, there are some key differences to keep in mind when working with it. Let's dive in and explore its origin, usefulness, and differences from HTML.

What is JSX?
JSX is a JavaScript syntax extension that allows developers to use "HTML-like" markup within their JavaScript files. JSX is short for JavaScript XML(Extensible Markup Language). MDN defines XML as "a markup language similar to HTML, but without predefined tags to use." This seems to make sense if we are to use JSX in place of HTML.

Where did it come from?
Jordan Walke is credited with the creation of JSX (and React) while at Facebook and launched them together in 2013. Apparently much of the push to construct React & JSX was tied to the need to better manage ads around the time Facebook bought Instagram, so yeah, a ton of ads.

What makes JSX useful?
When asking about JSX, you must consider React as well. Web developers traditionally used separate files for JavaScript, HTML & CSS. Logic, content and design/styling concerns were split into these files respectively. This means that to find ALL code relating to a specific 'component' one would need to look in all three files. Jordan's idea was to separate concerns into components. By keeping rendering logic and markup together you can ensure that they stay in sync even after edits. JSX comes into play here. It can be seen as the 'HTML-like' representation that is placed inside of your JavaScript. Here's an example.

This example shows how JSX can be embedded within JavaScript to create components organized by logical and markup concerns.

Differences in JSX and HTML?
While JSX looks like HTML, it is not HTML. One core difference is that in JSX, you must return a single parent element in order for it to compile. It is common practice to wrap everything in a div or a fragment "<></>". Another key difference is that in JSX, you can embed JavaScript expressions directly using curly braces. HTML would require a script tag & external JavaScript file. You use className instead of class for defining CSS classes, and you use camelCase instead of kebab-case for defining attributes. Another aspect unique to JSX is in-line styling. Styling can be achieved by setting style={styleObject} within an element. The style object can be defined above and passed in as a variable, or it can be defined directly inside the curly braces. Remember, you will need an initial set of curly braces to embed your JavaScript. Here is an example of how these can be done.

How do I use JavaScript within JSX?
To use JavaScript within JSX, you can embed JavaScript expressions directly using curly braces {}. This allows you to insert dynamic content or execute JavaScript logic within your markup. For example, variables can be passed as props to components and then used within the JSX. Additionally, you can use JavaScript functions to conditionally render elements or to map over arrays and create multiple elements. Remember, Any valid JavaScript code can be used within JSX. This means that you can use loops, conditional statements, and any other JavaScript functionality within your JSX code. Overall, the ability to use JavaScript inside of JSX makes it a valuable asset when creating dynamic and reusable components in React.
This is a simple example in which the name variable is passed to and displayed within our JSX h1.

JSX is allows developers to write components with both rendering logic and markup together in one file. It offers a more organized and efficient way of managing code than traditional methods of separating JavaScript, HTML, and CSS into separate files. Although JSX looks similar to HTML, there are some key differences to keep in mind when working with it. Overall, JSX has become an integral part of React development and is widely used in modern web development.

https://react.dev/learn/writing-markup-with-jsx

https://react.gg/

https://www.w3schools.com/react/react_jsx.asp#:~:text=JSX%20stands%20for%20JavaScript%20XML,and%20add%20HTML%20in%20React.

https://developer.mozilla.org/en-US/docs/Web/XML/XML_introduction

https://en.wikipedia.org/wiki/JSX_(JavaScript)

https://blog.risingstack.com/the-history-of-react-js-on-a-timeline/

https://www.freecodecamp.org/news/html-vs-jsx-whats-the-difference/#:~:text=HTML%20is%20a%20very%20important,a%20syntactic%20sugar%20for%20React.

jQuery Obsolescence?

xanderlambert — Thu, 09 Mar 2023 22:24:37 +0000

Full disclosure:

My jQuery experience is minimal at best. I have used it for a couple of projects this week, but that's about the extent of it so far. That being said, it did get me wondering just how useful it may be for aspiring JS devs to learn. God forbid we learn something we will never use, right?
The topic of jQuery obsolescence was a seed planted earlier this week, when I was searching online for project advice and jQuery methods. The seed was watered every time I saw an answer from 2009. Seriously though, the vast majority were dated 2015 or earlier. This kicks off a series of searches in which I tried to determine(with my limited understanding) just how important this stuff was for me to know. Here's what I've gathered so far.
jQuery is a popular JavaScript library that was first released in 2006. It has been (very) widely used by developers to streamline the process of writing JavaScript, particularly for DOM manipulation and event handling. However, due to modern web development techniques, the improvement of native JavaScript features, and improvements in cross-browser compatibility and web APIs, some may be wondering whether jQuery is becoming obsolete. Below is a google trends screenshot that does a great job at encapsulating my concerns.

Arguments against jQuery:

One of the main arguments against jQuery is that generally, it is no longer necessary for many modern web development tasks. This means that the majority of newly built sites/apps are not using it. With the introduction of features (such as querySelector and querySelectorAll) in modern browsers, it is now possible to select and manipulate DOM elements without the need for jQuery. This means that developers who are familiar with native JavaScript can accomplish the same tasks without the added overhead of loading a jQuery library. Below is a link that gives the JavaScript equivalents of jQuery functions.
https://css-tricks.com/now-ever-might-not-need-jquery/

And here is an example of the same code written with both.

JavaScript:

document.getElemementById(“mybutton”).addEventListener(‘click’, function(){
alert(“Hey, You clicked me ?”);
});

jQuery:

$(‘#mybutton’).click(function(){
alert(“Hey, You clicked me ?”);
});

Another argument against jQuery is that it can lead to 'bloated' code and slow page loading times. The library is relatively large and requires additional HTTP requests to load, which can slow down page load times, particularly on mobile devices with slower network connections. This is part of the reason for the rise of "micro-libraries" such as Axios or umbrella JS. Many of these plugins exist and are lightweight compared to jQuery, but contain the most commonly used methods. Here's a list of them.
https://www.technotification.com/2019/06/5-lightweight-jquery-alternatives-2019.html

Arguments in favor of jQuery:

Despite these arguments, there are still developers who prefer to use jQuery, or at least tolerate it. One of the main reasons for this is its historical ease of use and cross-browser compatibility. jQuery was specifically designed to work across different browsers and platforms seamlessly, which can save developers time and effort, especially when it comes to testing and debugging.

Most notably, jQuery dominates other JS libraries in terms of sheer website numbers. Since such a large number of sites are still relying on Jquery, your chances of running into it are at some point are pretty steep. In that case, it may be best to have at least some past exposure to jQuery in order to best understand what youre looking at. I found more than a handful of reddit comments from devs who spend +50% of their time with jQuery, even when they'd prefer not to. The reason for this is what was just mentioned. The volume of sites using Jquery means that the many devs working on or upgarding legacy systems interact with it daily. See the below link for a great site used to compare technologies!

https://https://www.similartech.com/compare/jquery-vs-react-js

Conclusion:

While there are certainly arguments for and against using jQuery, the decision ultimately comes down to the individual developer and the specific needs of their project. For developers who are already familiar with native JavaScript and are working on modern web development projects, jQuery may not be necessary. However, for those who are just starting out with web development or for those who are working on legacy projects that require cross-browser compatibility, jQuery can still be a valuable tool. In my opinion, it looks like some experience with jQuery is an obvious asset, but may not be worth going out of your way to master right out of the gate.
https://youmightnotneedjquery.com/