DEV Community: Adarsh Goyal

Unlocking the Power of WebAssembly

Adarsh Goyal — Sun, 10 Mar 2024 06:59:36 +0000

WebAssembly, often abbreviated as WASM.

Let's do a brief introduction into major concepts of WebAssembly:

WebAssembly is a compile-targeted language for running bytecode on the web.
Relative to Javascript, WebAssembly offers predictable performance. It is not inherently faster than Javascript, but it can be faster than JavaScript in the correct use case. Such as computationally intensive tasks, like nested loops or handling large amounts of data. Therefore, WebAssembly is a complement to JavaScript, and not a replacement.
WebAssembly is extremely portable. WebAssembly runs on: all major web browsers, V8 runtimes like Node.js, and independent Wasm runtimes like Wasmtime, Lucet, and Wasmer.
WebAssembly has Linear Memory, in other words, one big expandable array. And in the context of Javascript, synchronously accessible by Javascript and Wasm.
WebAssembly can export functions and constants, And in the context of Javascript, synchronously accessible by Javascript and Wasm.
WebAssembly, in its current MVP, only handles integers and floats. However, tools and libraries exist to make passing high-level data types convenient.

Introduction to WebAssembly:

What is WASM?

WebAssembly is a binary instruction format that serves as a compilation target for programming languages, enabling them to run in web browsers at near-native speeds.

Unlike JavaScript, which is traditionally used for web development, WebAssembly provides a low-level, efficient alternative that can unlock new possibilities for web applications.

Understanding the Difference between WASM and JavaScript:

While JavaScript is a high-level scripting language, WebAssembly operates at a lower level, allowing for more efficient execution and improved performance.

This key distinction opens up opportunities for developers to leverage existing codebases written in languages like C++, Rust, and AssemblyScript, among others, and seamlessly integrate them into web applications.

Why WASM?

The answer lies in its efficiency, speed, and safety.

WASM is designed to be a low-level virtual machine that runs at near-native speed. This means we can now run heavy computational tasks directly in our browsers, opening up a world of possibilities for web-based applications.

Examples

Latest Trends in WASM

In the recent years, WASM has gained significant traction. Let's look at some of the latest trends:

WASI: The WebAssembly System Interface (WASI) is a promising trend. It's a modular system interface for WebAssembly aiming to provide a wide range of system call capabilities, increasing the usefulness of WASM.
WASM outside the browser: While initially designed for web browsers, WASM is now being used outside the browser environment too. It's being utilized in edge computing, serverless computing, and more.
Language support: More and more programming languages are adding support for compiling to WASM. This is making it even more accessible and widespread.

WASM + AI

While it was primarily designed for web applications, it has been increasingly used outside of the browser environment, including in machine learning applications.

TensorFlow.js: TensorFlow.js is a library for training and deploying machine learning models in JavaScript environments, including web browsers. It uses WebAssembly to accelerate computations, especially for operations like matrix multiplications, which are fundamental to many machine learning algorithms.
ONNX.js: Open Neural Network Exchange (ONNX) is an open-source format for representing deep learning models. ONNX.js is a JavaScript library that allows developers to run ONNX models in the browser and on Node.js. It leverages WebAssembly to optimize performance, making it suitable for running complex machine learning models in resource-constrained environments.
Hugging Face Transformers: Hugging Face provides a library for natural language processing (NLP) tasks called Transformers. They offer a JavaScript version of the library that runs in the browser using WebAssembly. This allows developers to perform tasks such as text generation, sentiment analysis, and question answering directly in web applications without requiring server-side computation.
WebDNN: WebDNN is a deep neural network library that uses WebAssembly and WebGL to accelerate inference on web browsers. It provides a framework for converting trained deep learning models into a format that can be efficiently executed in the browser. This allows for the deployment of complex machine learning models directly in web applications without relying on server-side processing.
DeepLearn.js: DeepLearn.js is a JavaScript library for deep learning that includes support for training and running neural networks in the browser. It uses WebAssembly to optimize performance, enabling real-time inference for applications such as image recognition, object detection, and more.

Challenges for Adoption

Limited debugging support.
Increased complexity in development.
Lack of direct DOM access.
Security concerns with untrusted code.
Increased bundle size affecting load times.
Potential browser compatibility issues.

Refs
https://wasmbyexample.dev/examples/introduction/introduction.all.en-us.html
https://www.assemblyscript.org/compiler.html#using-the-compiler
https://developer.mozilla.org/en-US/docs/WebAssembly
https://digest.browsertech.com/archive/browsertech-digest-how-modyfi-is-building-with/https://www.modyfi.com/

🚩 The Rise of Feature Toggle Tools and Open Standards 🔒

Adarsh Goyal — Sun, 30 Jul 2023 11:37:27 +0000

Are you keeping up with the latest trends in software development? If not, you might be missing out on a game-changing practice called "Feature Flagging." 🚀

Feature flagging, also known as feature toggling, is a development technique that allows developers to turn certain features on or off without deploying new code. This approach brings numerous benefits to both developers and businesses, making it a hot topic in the tech industry. Let's explore the reasons behind the rise of Feature Toggle Tools and Open Standards!

🔧 Increased Flexibility: Feature flagging allows developers to control feature releases, making it easier to test new functionalities in production. By toggling features, teams can roll out updates incrementally, reducing the risk of bugs affecting all users. This flexibility is a game-changer when it comes to delivering stable and reliable software.

🔄 Continuous Delivery: Embracing feature flags can streamline the continuous delivery process. Gone are the days of long release cycles and disruptive deployments. With feature flagging, you can push code to production more frequently and then gradually enable it for users at your own pace.

🛡️ A/B Testing Made Easy: Feature flags are a powerful tool for conducting A/B tests and gathering valuable user feedback. By segmenting your audience and exposing different groups to various features, you can quickly assess what resonates best with users, leading to data-driven decision-making.

🔒 Security and Risk Mitigation: In today's digital landscape, security is paramount. Feature flags can act as a safety net by allowing quick feature rollbacks if a critical bug or vulnerability is discovered. This added layer of protection can save you from potential disasters.

⚙️ Embracing Open Standards: The growth of feature flagging has led to the development of open standards in this area. Open standards foster collaboration and innovation by enabling different tools to interoperate seamlessly. This creates a vibrant ecosystem where developers can choose the best solutions for their specific needs.

If you're eager to dive deeper into the world of feature flagging, I recommend checking out this informative website: http://ff.adarshgoyal.com/ 🌐 It's an excellent resource to learn more about feature flags, best practices, and how to implement them effectively.

Let's stay ahead of the game by embracing #openstandards, #featureflags, and #opensource solutions. Feature flagging is the way of the future, and those who adopt it early will undoubtedly gain a competitive advantage in the ever-evolving tech landscape. Happy coding! 💻🚀

softwaredevelopment #techinnovation #agiledevelopment

CSS Attribute Selectors Cheat Sheet

Adarsh Goyal — Sun, 23 Oct 2022 11:36:18 +0000

CSS [attribute] Selector

Simplest of all the selectors and requires just the attribute name in the parameters. All the elements in the web page that contains this attribute name will be selected to apply the styling.

The following code performs CSS styling on the “p” elements that have the “lang” attribute:

<style>
  p[lang]{
      color: red;
      font-size: 20px;
  }
</style>
<p lang = “en”>Your Text</p>
<p>Your Text</p>

CSS [Attribute ~= “value”] Selector

CSS [Attribute ~= “value”] can select the element if it includes the word “value” in the attribute specified. For example, the following code looks for the value “shirt” in the attribute “title”.

<style>
    p[title ~= "shirt"]{
      color: red;
      font-size: 20px;
    }
</style>

<p title="blue shirt">Your Text</p>
<p title="red shirt">Your Text</p>
<p title="hoodie">Your Text</p>

The above code selects the first two paragraphs since they have a shirt in their title, which is the target attribute.

CSS [attribute |= “value”] Selector

CSS[attribute |= “value”] selector selects all those attribute values that start with the word “value”.

Note: CSS[attribute |= “value”] selector works only when the value is either a single word in the attribute such as only “shirt” or is hyphenated as “shirt-blue”. White space in between will not be selected by the CSS for styling.

The shortcoming of CSS[attribute |= “value”] is fulfilled by the CSS[attribute ^= “value”] selector.

CSS[attribute ^= “value”] Selector


<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Web Template</title>
      <style>
      p[title ^= "shirt"]{
        color: red;
        font-size: 20px;
      }
      </style>
  </head>
  <body>
    <br><br>
        <br><br>
    <p title="shirt-blue">Your Text.</p>
    <p title = "shirt red">Your Text.</p>
    <p title = "hoodie">Your Text.</p>
  </body>
</html>

CSS [attribute *= “value”] Selector

This selector works like the regular expression checker which selects every element with the target attribute having value composed of “value”. The value need not be a whole word. The selector works even if the “value” is a part of the attribute value.

I hope this CSS selectors cheat sheet helps you ahead in your professional career and if there are any suggestions, feel free to comment them down to help us refine the post for good.

Thank you for reading!💃🏻

https://adarshgoyal.com/
twitter
linkedin

The cover image of this article is generated using DALL-E.

Update your Git version now!

Adarsh Goyal — Sun, 07 Aug 2022 03:54:00 +0000

Git version 2.37 is here!, update yours and get access to all the updated features and fixes listed in the Release note

Update Git on Windows
For versions from 2.14.2 to 2.16.1

git update

For versions > 2.16.1, update Git with:

git update-git-for-windows

Update Git on Linux

sudo apt-get update

sudo apt-get install git

Update Git on Mac

brew upgrade git

Leave a comment if facing any problem.
or reach me at https://adarshgoyal.com/
Thank You!

Sending Client-side Emails using EmailJs in ReactJs App

Adarsh Goyal — Tue, 19 Jul 2022 11:06:41 +0000

Go to EmailJs
Create a free account (you can send only 200 emails per month in this account) want more emails head to pricing
Create a email service
Create a email template
You can choose the template_id and service_id you want or can genrate one if needed.
Setup a react project and install the module using.

npm install @emailjs/browser --save

Import and use it in your project.

import emailjs from "@emailjs/browser"

export const sendEmail = (templateParams) => {
    emailjs
        .send(
            process.env.REACT_APP_EMAILJS_SERVICE_ID,
            process.env.REACT_APP_EMAILJS_TEMPLATE_ID,
            templateParams,
            process.env.REACT_APP_EMAILJS_PUBLIC_KEY
        )
        .then(
            (result) => {
                console.log(result.text)
            },
            (error) => {
                console.log(error.text)
            }
        )
}

Add REACT_APP_EMAILJS_SERVICE_ID, REACT_APP_EMAILJS_TEMPLATE_ID, REACT_APP_EMAILJS_PUBLIC_KEY to your env file. (do not forgot to restart the server after adding the variables)
That's it you are done with sending emails.
You can see your logs at events and email history at history.
Also you can add reCAPTCHA v2 and google analytics while sending the email.

If you have any query you can leave it in the comment.

Don't forgot to visit my webite and follow me. Thank you.

what do you do when you are on bench?

Adarsh Goyal — Thu, 02 Jun 2022 11:32:29 +0000

I really wanted to know what people in MNCS's or startups do when they are not assigned to any projects or learning tasks?

Things I do :-

Read blogs about my favorite programming language
Understanding about different JOB roles
Create music
Exercise more

rm command removes the file, really?

Adarsh Goyal — Mon, 23 May 2022 07:43:31 +0000

Do you really think that just doing rm "your file name" will remove the file completely? if YES you need to read this blog till end.

just do a

rm --help

and see the information, you will see a note there like this

this note suggests to use the shred command so do I did

shred --help

This seems like a good note and I was relaxed that my file will be removed completely now or at least will be harder to recover. and made my mind to use shred instead of rm from now but wait got this CAUTION in the end.

at last I red a few blogs but could not find a command which does the JOB, can anyone suggest a better command than these two or a way to remove the file as I have some important credentials file which I need to remove completely ?

Tell me in your answers here.

Website using Canva in 10 mins

Adarsh Goyal — Sat, 16 Apr 2022 18:57:55 +0000

You can now create websites like Demo 1 Demo 2 within 10 mins so go ahead

Create an account on canva.
Go to

Templates > Business > Websites
Choose a template that suits your requirement.
Click on any template you like and then click on Customize this template button.
You can edit the template as you want add links and images etc.
At last you can click on Publish as Website button to deploy the website.
You can either choose the domain provided by canva or can use yours if you have one.

You have a ready website in just 10 mins! That's great!

Follow me here

How to upgrade to React 18

Adarsh Goyal — Sat, 16 Apr 2022 14:59:31 +0000

With new react version things like concurrent rendering, automatic batching, transitions and suspense on the server are introduced you can use this only after upgrading to react 18. so less go!

Install React 18 and React DOM from npm or yarn, like this:

npm install react react-dom

Then, you'll want to use createRoot instead of render.

In your index.js, update ReactDOM.render to ReactDOM.createRoot to create a root, and render your app using root

Here's what it would look like in React 17:

import { render } from 'react-dom';
import App from 'App';

const container = document.getElementById('app');

render(<App />, container);

And here's what it looks like in React 18:

import { createRoot } from 'react-dom/client';
import App from 'App';
const container = document.getElementById('app');

// create a root
const root = createRoot(container);

//render app to root
root.render(<App />);

And you are now upgraded to React 18! enjoy!
Complete update guide is available here

Sources:

Wireless Tech used in IoT and Home Automation

Adarsh Goyal — Tue, 13 Oct 2020 08:01:07 +0000

Zigbee

Zigbee is a wireless technology developed as an open global standard to address the unique needs of low-cost, low-power wireless IoT networks. The Zigbee standard operates on the IEEE 802.15.4 physical radio specification and operates in unlicensed bands including 2.4 GHz, 900 MHz, and 868 MHz.

Zigbee is primarily used for home automation applications such as smart lighting, smart thermostats, and home energy monitoring. It is also commonly used in industrial automation, smart meters, and security systems

BLE

The Bluetooth Low Energy (LE) radio is designed for very low power operation. To enable reliable operation in the 2.4 GHz frequency band, it leverages a robust frequency-hopping spread spectrum approach that transmits data over 40 channels. The Bluetooth LE radio provides developers a tremendous amount of flexibility, including multiple PHY options that support data rates from 125 Kb/s to 2 Mb/s, multiple power levels, from 1mW to 100 mW, as well as multiple security options up to government grade.

Bluetooth LE also supports multiple network topologies, including point-to-point, broadcast, and mesh networking.

Z-wave

Z-wave is one of the newest kinds of wireless technology that smart devices use to communicate with each other. You can think of it as being in a similar category as Bluetooth or WiFi, but Z-wave possesses a few unique qualities that translate into major advantages for home automation.

Z-wave technology creates a wireless mesh network, which is a collection of devices that link up and communicate with each other without wires. With Z-wave technology, devices “mesh” together by sending signals over low-energy radio waves on a dedicated frequency. (Z-wave operates on the 908.42 MHz radiofrequency in the U.S. and Canada, but the exact frequency varies by country.) Every Z-wave device has a tiny built-in signal repeater that sends and receives network information.

Bluetooth

Bluetooth is another wireless technology standard (not a piece of plastic you stick in your ear for phone calls). Of course, the two are related, but the wireless connection between your phone and the earpiece is called Bluetooth… not the piece itself. As you can imagine, Bluetooth was developed as a way to exchange data over a short-range (like from your pocket to your shoulder) without the need for wires. That’s why Bluetooth is used for wireless headsets, hands-free calling through your car, and wireless file transfers.

Why array indexing in C++ starts from 0, not 1

Adarsh Goyal — Tue, 11 Aug 2020 09:44:38 +0000

Do you know why the C++ array is indexed from zero and not one?

Suppose we have an Array A where the size of data type is W (2 or 4 bytes for int depends on the compiler) then the logical address of element at i^th index is calculated as:-

Logical Address(A[i]) = Base Address(L0) + ( i - 1 ) * W

in this formulae, we have to perform 3 arithmetic operations +, -, and * but when we take the zero as the starting index then the formula becomes:-

Logical Address(A[i]) = Base Address(L0) + ( i ) * W

which have only 2 arithmetic operations + and *
so if the size of an array is n then the formula with starting index one will execute slower due to one extra operation overhead. thus, affecting the time taken by the program for larger values of n.

The above discussion was for the 1-D array but when it comes to 2-D or multidimensional arrays the case is even worse, suppose i and j are respectively the ith row and jth column in a 2-D matrix then the address when considered 0 as the first index is given as:-

Logical Address(A[i][j]) = Base Address(L0) + ( i* n +j ) * W

having 4 arithmetic operations, but when taken ONE as the starting index we have

Logical Address(A[i][j]) = Base Address(L0) + ( (i-1)* n +(j-1)) * W

this is having 6 arithmetic operations so it keeps on increasing as the dimension of the array increases too.

And hence, we use ZERO as the Starting index rather than ONE.

Eyeblink detection using OpenCV, and Python

Adarsh Goyal — Tue, 04 Aug 2020 19:03:29 +0000

Complete code can also be found here

To test the following on the command line

(for live video) ~# python3 detect_blinks.py --shape-predictor shape_predictor_68_face_landmarks.dat

and

(for demo video) ~# python3 detect_blinks.py --shape-predictor shape_predictor_68_face_landmarks.dat --video “replace this with demo video file path”

breaking up the above code below

1. Import required libraries

imutils library -FileVideoStream, VideoStream

dlib —contains an implementation of facial landmark detection

cv2- OpenCV library

2. Function to calculate EAR as per the research paper.

3. Passing Command Line Arguments

— shape-predictor: This is the path to dlib's pre-trained facial landmark detector.

— video: Optional switch controls the path to an input video file residing on disk.

4. Important variables to tune the implementation

EYE_AR_THRESH - If the eye aspect ratio falls below a certain threshold and then rises above the threshold, then we’ll register a “blink”

EYE_AR_CONSEC_FRAME - this value is set to 3 to indicate that three successive frames with an eye aspect ratio less than
EYE_AR_THRESH must happen in order for a blink to be registered.

COUNTER — total number of successive frames that have an eye aspect ratio less than EYE_AR_THRESH

TOTAL — number of blinks that have taken place while the script has been running.

5. Initialize dlib’s face detector and facial landmark detector

6. Start the video streaming thread

FileVideoStream for disk videos and VideoStream for video from the webcam

7. Main loop

We start looping over frames from our video stream. If we are accessing a video file stream and there are no more frames left in the video, we break from the loop.

Line 61 reads the frame by resizing it and converting it to grayscale (Lines 62 and 63), then detect faces in the grayscale frame on Line 65 via dlib’s built-in face detector.

8. Loop over each of the faces in the frame and then apply facial landmark detection to each of them

9. Visualizing the facial landmarks for the eye regions themselves:

10. Counting Blinks

11. Drawing Blinks and EAR on the stream

can someone suggest a better solution using SVM put up in the comment please