DEV Community: Asaolu Elijah 🧙‍♂️

Understanding JavaScript Deobfuscation in Web Scraping

Asaolu Elijah 🧙‍♂️ — Sat, 19 Apr 2025 15:34:05 +0000

Obfuscation is the process of deliberately making information more complex and harder to understand. Deobfuscation, on the other hand, is the method of reversing obfuscation to reveal the original information.

Since web browsers have to expose webpages' source code, developers usually use different obfuscation techniques to make their code harder to read. This, in turn, makes life harder for web scrapers trying to pull useful content from such web pages.

In this article, you’ll learn about obfuscating and deobfuscating web pages and practical tips for scraping data from obfuscated content.

How Web Pages are Obfuscated

Common methods for obfuscating web pages include:

CSS Obfuscation

Modern front-end build tools like Webpack and CSS modules provide features to obfuscate class names and IDs in HTML. They achieve this by generating unique or hashed class names that are difficult to predict. For example, a simple CSS class-based styling might look like this before obfuscation:

.button {
    color: blue;
}

After obfuscation with Webpack, the class might look like this:

._3iJ7sK {
    color: blue;
}

Now, in the HTML, a button that previously used class="button" might use class="_3iJ7sK", which limits scrapers that rely on known class names to locate elements.

JavaScript Obfuscation with btoa

JavaScript also has a native btoa() function that converts a string into a base64-encoded string. While it’s a simple form of obfuscation, it does make raw text less readable. For example:

const originalString = "Hello, World!";
const encodedString = btoa(originalString);

console.log(encodedString); // Outputs: "SGVsbG8sIFdvcmxkIQ=="

This technique is mostly used in HTML attributes, where encoded data is stored directly. For example, instead of seeing plain text in a data-* attribute, you might find something like data-value="U29tZSBzZWNyZXQgdGV4dA==". Here, btoa has been used to encode "Some secret text," which makes it less obvious to identify at a glance.

Deobfuscation Techniques in Web Scraping

There are multiple strategies for scraping obfuscated web pages. Some common methods I've found useful include:

CSS Selectors with Substring Matching

When CSS classes are obfuscated, matching the exact class name can be tricky, as they may look like random strings that change frequently. To handle this, you can use substring matching in your CSS selectors. This way, you can match any class name containing a specific pattern, even if the entire name isn’t consistent.

For example, let’s say you’re scraping a site where the "buy" button has a class name that always includes the substring _buyBtn_, but the full class name might look something like _buyBtn_3iJ7sK or _buyBtn_x9L2kT. Instead of trying to match the whole class name exactly, you can use:

[class*="_buyBtn_"]

This selector matches any class containing _buyBtn_. You can implement it in your scraper, as shown in the Node.js and Cheerio example below.

const axios = require("axios");
const cheerio = require("cheerio");

// Sample URL
const url = "http://example.com";

axios.get(url).then((response) => {
    const $ = cheerio.load(response.data);

    // Find the button using substring matching
    const buyButton = $('[class*="_buyBtn_"]');

    // Output the text inside the matched button element
    console.log(buyButton.text());
}).catch(error => {
    console.error("Error fetching the page:", error);
});

This way, you can focus on a stable part of the class name (buyBtn) and reliably locate the necessary elements, even with obfuscation.

XPath with Wildcards

XPath is another way to locate elements in HTML, similar to CSS substring matching; however, XPath allows for more complex logic. You can search for elements based on attributes, match elements by text content, navigate the document structure, and much more.

For example, if you’re targeting an element with an obfuscated class attribute, you can use a wildcard like this:

//div[contains(@class, '_3iJ7sK')]

This XPath expression matches any <div> element where the class attribute includes _3iJ7sK. You can then implement the expression in a puppeteer and Node.js scraper, as shown below.

const puppeteer = require("puppeteer");

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    // Sample URL
    const url = "http://example.com";
    await page.goto(url);

    // Find a div element with a class containing "_3iJ7sK"
    const [targetElement] = await page.$x("//div[contains(@class, '_3iJ7sK')]");

    if (targetElement) {
        // Extract and print the text content
        const text = await page.evaluate(element => element.textContent, targetElement);
        console.log(text);
    } else {
        console.log("Element not found");
    }

    await browser.close();
})();

As mentioned earlier, XPath can also select elements based on any attribute, not just class:

// Searches for a button element with type='submit'
page.$x("//button[@type='submit']")

Select elements based on their text content.

// Selects an <a> tag with the exact text 'Click here'
page.$x("a[text()='Click here']")

XPath’s advanced logic makes it useful for scraping complex HTML structures with a level of precision that CSS selectors don't provide.

Decoding Base64 with atob

If you come across content encoded with btoa(), you can easily decode it using the atob() function, as shown below:

const encodedString = "SGVsbG8sIFdvcmxkIQ==";
const decodedString = atob(encodedString);

console.log(decodedString); // Outputs: "Hello, World!"

While this might not be useful for scraping selectors, it can help you better understand the targeted content’s markup structure, especially in data attributes.

Conclusion

Obfuscation is becoming increasingly common in web development, creating challenges for web scrapers that rely on structured data. This tutorial explored how these obfuscation techniques are implemented and provided methods to help overcome them.

Cover photo by Chris Stein on Unsplash

How to Integrate Ollama in Next.js

Asaolu Elijah 🧙‍♂️ — Thu, 06 Feb 2025 12:03:38 +0000

There’s no ignoring how AI and and large language models (LLMs) have dominated conversations lately. Nearly every week, new models are released, and new integrations (e.g AI agents and operators) are developed. It’s crazy not to want to jump on this exciting train.

In this article, we’ll explore how to integrate Ollama with Next.js to build LLM-powered applications. We’ll cover how to download and interact with open-source LLMs (such as Llama, DeepSeek, and Mistral), as well as how to send messages and process LLM responses in Next.js using ollama.js. Our final application will look like the image shown below.

Prerequisite

To follow along, you should have a basic understanding of Next.js and how LLMs work behind the scenes.

What is Ollama?

Ollama is an open-source framework founded by Michael Chiang and Jeffrey Morgan to simplify LLM integration with other applications. Ollama itself is not an LLM; instead, it allows you to download LLMs, interact with them, and create custom models. It also provides pre-configured API endpoints with which you can integrate downloaded or customized LLMs into other applications.

It’s also worth mentioning that Ollama should not be confused with Llama (without the "O"). Llama is an open-source LLM developed by Meta AI. In contrast, Ollama is an independent open-source tool that enables integration with various LLMs. With that clarified, let’s explore these integrations in practice.

Setting up ollama

To get started, download Ollama from its official website. If you’re using other Unix/Linux distro, you can also download it by running the following command.

curl -fsSL https://ollama.com/install.sh | sh

Once you’ve successfully downloaded and installed Ollama, run the following command to verify that it is now executable on your terminal/command line.

ollama -v

If everything went well, you should see the version number printed in your console. Next, let’s install and interact with our first model.

Pull and run a model

As mentioned previously, Ollama provides access to multiple open-source models, including DeepSeek, Llama, Mistral, Qwen, and Phi. You can also view the list of supported models here.

From the model list, Llama 3.2 (by Meta AI) presently stands out as a small-sized model with impressive benchmark stats. It is available in two variants: 1B parameters (1.3GB) and 3B parameters (2GB). For this tutorial, we’ll use the Llama 3.2 1B model, as its smaller size makes it more manageable. To proceed, download the model by running:

ollama run llama3.2:1b

This command will pull the Llama 3.2 (1B parameters) model from Meta’s registry. Once the download is complete, the model will launch, and you can start chatting with it right away, as shown in the screenshot below.

Feel free to spend some time interacting with the LLM directly from your terminal. Once you're ready, let’s dive into bringing it into a Next.js application.

Interact with LLMs in Next.js with Ollama.js

Ollama provides REST API endpoints that allow you to interact with downloaded models. Once the desktop app is running, it exposes an endpoint at http://localhost:11434/api, where you can send custom HTTP requests to perform interactions.

For example, to generate an answer to the question "What is Exorcism?", we can send a POST request to the /api/generate endpoint, specifying our preferred model and question, as shown below:

curl http://localhost:11434/api/generate -d '{
"model": "llama3.2",
"prompt": "What is Exorcism?"
}'

You should then see the response objects streamed to your command line or terminal in real-time:

To simplify the process, the Ollama team created a JavaScript library (ollama-js) that comes pre-configured with various methods for referencing these endpoints and performing different tasks. We’ll leverage this library in our application.

To proceed, create a new Next.js app by running the following command:

npx create-next-app next-ollama

During the installation process, select Tailwind CSS and the pages/ router to ensure consistency with this tutorial. All other configuration options can be customized to your preference.

Once your new Next.js app is successfully created, navigate to the project directory and install ollama-js by running the following commands:

cd next-ollama
npm install ollama

Next, let’s create a simple chat interface to interact with the LLM we installed earlier. Open the default pages/index.js file and replace its contents with the following code:

import { useState } from "react";

const Index = () => {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState("");
  const [isLoading, setIsLoading] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();

    const userMessage = { role: "user", content: input };
    setMessages((prevMessages) => [...prevMessages, userMessage]);
    setInput("");

    /* ====
    ⚠️ Main logic to be added later
    ==== */
  };

  return (
    <div className="max-w-2xl mx-auto p-4">
      <div className="bg-white min-h-[400px] p-4 mb-4 rounded-xl border-2 border-gray-500 overflow-y-auto">
        {messages.map((message, index) => (
          <div
            key={index}
            className={`mb-4 ${
              message.role === "user" ? "text-right" : "text-left"
            }`}
          >
            <div
              className={`inline-block p-3 rounded-2xl max-w-[80%] ${
                message.role === "user"
                  ? "bg-blue-600 text-white"
                  : "bg-gray-100 text-gray-800"
              }`}
            >
              {message.content}
            </div>
          </div>
        ))}
        {isLoading && (
          <div className="text-left">
            <div className="inline-block p-3 rounded-2xl bg-gray-100 text-gray-400">
              Thinking...
            </div>
          </div>
        )}
      </div>
      <form onSubmit={handleSubmit} className="flex gap-3">
        <input
          type="text"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          className="flex-1 p-3 rounded-xl border-2 border-gray-500"
          placeholder="Type your message..."
        />
        <button
          type="submit"
          className="bg-blue-600 text-white px-6 py-3 rounded-xl hover:bg-blue-700 transition-colors font-medium"
        >
          Send
        </button>
      </form>
    </div>
  );
};

export default Index;

The code above creates a basic chat interface that allows us to send messages and receive responses. It also includes a handleSubmit() function, which doesn’t do much at this point, but this is where we’ll add the logic to process our messages with Ollama.

Start your application by running:

npm run dev

You should then see a chat interface similar to the image below.

Now, let’s create an API endpoint to send our message to Llama 3.2 via Ollama and process the response. To do this, create a new chat.js file inside the default pages/api/ directory and paste the following code into it.

import ollama from "ollama";

export default async function handler(req, res) {
  if (req.method !== "POST") {
    return res.status(405).json({ error: "Method not allowed" });
  }

  try {
    const { message } = req.body;

    const response = await ollama.chat({
      model: "llama3.2",
      messages: [{ role: "user", content: message }],
    });

    return res.status(200).json({ message: response.message.content });
  } catch (error) {
    console.error("Ollama API error:", error);
    return res.status(500).json({ error: "Failed to get response from LLM" });
  }
}

Here, we imported Ollama and created a Next.js API endpoint that accepts POST requests with a message in the request body. Next, we called Ollama’s .chat() method, specifying the LLM model we installed earlier (llama3.2) and passing the received message as part of the request object.

To complete our integration, let’s update the main chat interface to communicate with the newly created endpoint. Open the pages/index.js file and replace the existing handleSubmit() function with the code below.

 const handleSubmit = async (e) => {
    e.preventDefault();
    if (!input.trim()) return;

    const userMessage = { role: "user", content: input };
    setMessages((prevMessages) => [...prevMessages, userMessage]);
    setInput("");
    setIsLoading(true);

    try {
      const response = await fetch("/api/chat", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ message: input }),
      });

      if (!response.ok) {
        throw new Error("Failed to get response");
      }

      const data = await response.json();
      const aiMessage = {
        role: "assistant",
        content: data.message,
      };
      setMessages((prevMessages) => [...prevMessages, aiMessage]);
    } catch (error) {
      console.error("Error:", error);
      const errorMessage = {
        role: "assistant",
        content: "Sorry, I encountered an error while processing your request.",
      };
      setMessages((prevMessages) => [...prevMessages, errorMessage]);
    } finally {
      setIsLoading(false);
    }
  };

At this stage, your pages/index.js file should match the one provided here. Finally, start your app by running:

npm run dev

Go to the URL displayed in your console (typically http://localhost:3000/), and you should now be able to chat with the Llama 3.2 LLM directly from your Next.js app, as shown in the image below.

And we’re done! You can now start interacting with a locally downloaded version of Llama 3.2 directly from your Next.js application. You can also pull other open-source models and interact with them.

Conclusion

In this tutorial, we covered how to install and download open-source large language models (LLMs) with Ollama, as well as how to use the ollama-js library to integrate these LLMs into a Next.js application. You can find the complete code used in this tutorial in this GitHub repository.

In an upcoming follow-up article, we’ll explore how to stream responses and display them in real-time instead of waiting for the final computed response. We’ll also cover how to make the LLM remember our previous conversations, along with other ollama-js methods and community integrations. In the meantime, enjoy chatting with your custom-built LLM friend!

Thanks for reading!

Captio: Video Subtitles in Different Languages

Asaolu Elijah 🧙‍♂️ — Mon, 11 Apr 2022 23:41:00 +0000

Overview of My Submission

Language has always been a barrier, but now, with recent technologies, we can translate live text in real time.

However, this does not apply to video; it is still quite difficult to do so. And I'm sure we've all been in a position where we've seen a video clip on the internet (usually with a lot of interaction) and couldn't get the gist of it because it wasn't in our native language. Captio solves this barrier.

Captio is a powerful bot that will generate subtitle for video files in any preferred language. Available via the following medium:

Twitter Bot - Twitter is inarguably one of the most used social media platform in the world, and it does make sense that a technology like this one is available on there.
Check out caption on Twitter.
CLI Application - Captio is also available as a CLI application, so that you are able to generate translated subtitles offline.

Submission Category:

Accessibility

Link to Code on GitHub

AsaoluElijah / generate-sub

Captio: Video Subtitles in Different Languages

Twitter bot x Cli program to generate subtitles in different languages.

Read article on Dev.to

Installation

git clone https://github.com/AsaoluElijah/generate-sub captio
cd captio
npm install

API Keys

Once the installation is completed, make sure to rename .env.example to .env and replace all the Twitter API keys and the Deepgram API key with yours.

Learn how to retrieve your Twitter API keys here, and Deepgram's here too.

Usage

Cli

npm run start:cli video="path/to/video" language='spanish'
# Replace spanish with preferred language.

Twitter Bot

npm start:bot

License

MIT

View on GitHub

How it works

Behind the seen, Captio uses a lot of open source API to perform it's operation, the diagram below sums it up pretty much.

Nevertheless, you can checkout the full information on how it works here

Usage

On twitter, to let captio generate translated subtitle for a video tweet, you'll only need to reply the tweet mentioning captio (@generate_sub) like below:

Getting Started With Nuxt.js - The How & Why

Asaolu Elijah 🧙‍♂️ — Tue, 24 Nov 2020 22:03:12 +0000

What is Nuxt.js

Nuxt.js is an intuitive vue.js framework (yeah, a framework’s framework) for building faster and scalable - static, server-side rendered (SSR) & single page applications (SPA’s).
Nuxt.js is lovable because its included with vue core plugins by default (vue-router, vuex, vue-head,...), so no extra effort in installing them.

Features (why 🤷🏽):

Auto import component: You do not have to...

import componentName from ‘componentFolder’
export default {
  components: {
     componentName
   }

...for each of your components. Nuxt.js does that for you already, all you need do is keep all of your components in a folder and you could start referencing them anywhere in your application without doing the extra import.

P.S: there’s an option to disable this feature, in a case where you’re not interested in using it.

Auto generate router: Yeah, routers are also generated automagically. For every new page or page/:slug you create, the routers are immediately generated/updated (awesome right?).
Middleware support: Nuxt.js makes authentication in a vue.js based application seamlessly easy. You get to easily create and specify which middleware belongs to what page.
More awesome features: The why list is literally endless. There are more features that nuxt.js provide for each pages, for example asyncData - that lets you render data before your page is mounted into view. But these features won’t be covered in this article, another one maybe.

Installation (How 🚀):

Nuxt.js can be installed by downloading the nuxt package from npm via:

npm install nuxt —- save

But, with this installation process, you’ll need to go through an extra step of creating the nuxt configuration file plus the folders required for your application (which is quite exhausting, IMO).

Another option is using - create-nuxt-app : an npx package created by the nuxt community.
With this installation option, you will be prompted to select your type of application (SPA, SSA or static), select a front-end framework (bootstrap, vuetify or tailwind css) plus your preferred test and linting tool. And the nuxt configuration file will be generated automatically for you along with a sample nuxt.js application.

Getting Started

Lets go ahead and create a basic Nuxt.js application. Open your terminal/command line CD to your project folder and...

npx create-nuxt-app sample-project

Select rendering mode: Here you select the type of application you are building. Universal - support for server side rendered applications. And Single page application - For static/JAMStack based application.
Deployment target - Here you specify how your application will be deployed. Static for Jamstack based hosting (like Netlify, github pages) and Server for Node.js based hosting (like Heroku and AWS). The other required information are quite descriptive, like selecting programming language of choice (JavaScript/typescript), front-end framework and other related stuffs.

After completing the above installation process, lets go ahead and open the project in your text-editor. I use vscode, so -

cd sample-project
code .

Directory structure

.nuxt/ - This folder is automatically generated and regenerated any time you start/build your projects - this is where routers, middleware and other related configs are created. we shouldn’t worry so much about this.
assets/ - This is where you keep your un-compiled assets including images, CSS, sass and fonts files.
components/ - This is where you keep your components files, of course.
pages/ - This folder contains your application views and routes, Nuxt.js reads all the .vue files inside this directory and automagically creates the router configuration for you.
static/ - Here you keep static files that likely won't be changed. Unlike the assets dir, these files will be accessible through your project root URL. For example: /static/robots.txt will be available at http://localhost:3000/robots.txt
nuxt.config.js - This file contains nuxt based configuration settings, here we can easily configure the default head (title, meta-tags) for each pages, add a global css file, configure build option, and many more.

Running/Building

To run our app locally, all we need do is:

npm run dev

And our app should be served at http://localhost:3030 (or some other port, if :3030 is unavailable).

If you’re building a static site, the distribution files can be generated by running..

npm run generate

After the build is completed, a new dist/ folder will be created in your root directory. The content of this folder is what you host on your preferred platform - Netlify, GitHub pages, e.t.c.

And if you are building a server side rendered application (SSR), here is an extensive article that should be helpful.

Conclusion

I guess I’ve been able to introduce you to what Nuxt.js is, why you should use it, plus how to get started.

Where to go from here?

The Nuxt.js documentation is quite extensive and pretty straightforward. It’s included with everything you need to know about Nuxt.js.

Fell free to also reach out to me on Twitter. 🕺 I’m open to discussing literally anything tech related.

Thanks for reading. 👏

How I Made My Personal Website 10x Faster ⚡

Asaolu Elijah 🧙‍♂️ — Fri, 28 Aug 2020 15:12:15 +0000

I'd recently recreated my personal website, and the page load time reduced to < 1.6s 😮.
You don't believe it? Check it out here to clear your doubts.

Note: While my personal website is built with Nuxtjs (Vue.js), all of the tips I'll be sharing could be easily implemented in whatsoever technology/framework you use.

Light house Report 🚀

Without much Ado, let's dive into the tips.

1. Lazy load image:

Lazy loading image in it's simplest term means waiting for your website contents to appear before displaying images asynchronously. Although you should show a placeholder - like a gray box - notifying the user that an image will be loaded here.

Why lazy load images?

Images could weigh alot most time, and this can have a negative impact on the time visitors have to wait before they can access your website content.

How to lazy load image

Most front-end frameworks (bootstrap, materialize, chakra ui) these days provide a component to easily lazy load images on your website, kindly consult their documentation for more info; And if you're using just traditional HTML, CSS and JavaScript - this article might be helpful

Below is an example of lazy loading with BootstrapVue

<template>
  <div> 
     <b-img-lazy v-bind="mainProps" :src="getImageUrl(80)" alt="Image 1">
     </b-img-lazy>
  </div>
</template>
  <script>
  export default {
   data() {
    return { 
    mainProps: { 
    center: true, fluidGrow: true, blank: true, blankColor: '#bbb', width: 600, height: 400, class: 'my-5' 
   } 
  }
 },
 methods: {
 getImageUrl(imageId) {
   const { width, height } = this.mainProps
   return `https://picsum.photos/${width}/${height}/?image=${imageId}`
    }
  }
}
 </script>

2. Avoid unused component

In the first version of my website, I was using vue-ionicons and I'd imported a whole icon set globally 🤦‍♂️.
You could image how long a user will have to wait before hundreds of icon components (that I'm not really using in the website) are loaded. That wasn't funny really 😬

If using an icon component for example, avoid declaring the whole icon set as a global component.

Import only the icons you'll be using - unless your website will be using 90% of the icons, which is very unlikely.

✔️

import IconName from 'vue-ionicons/dist/js/icon-name'
Vue.component('my-icon', IconName)

✖️

import AllIosIcon from 'vue-ionicons/dist/ionicons-ios.js'
Vue.use(AllIosIcon)

3. Delete useless code block

90% Developers are guilty of this - We all have that useless code block (although its commented), but we wouldn't want to delete them thinking they might be an answer to our questions later on 😅
One thing I do is create a temp file where I keep such code. So as not to make my main files bulky

Extra: Minify your CSS and JS files

If your website is built the traditional way, with no front-end library. Minifying your assets could also help in making your web pages load really faster.
There's this awesome VSCode extension I use - minifyAll - it helps you minify your files in one click. It's blazing fast and.... it's the best out there.

Conclusion

This tips are in my own opinion (IMO), if you have a conflicting view, a better approach or tips like this generally. Kindly drop them in the comment box, I really enjoy learning.

And..., my portfolio source code is hosted publicly here on GitHub. I'll appreciate your ⭐.

You can always reach out to me on twitter, if there is anything I can help you with.

Thanks for reading 🤝

Vue.js For Absolute Begineers

Asaolu Elijah 🧙‍♂️ — Thu, 30 Jul 2020 15:51:35 +0000

I've got my hands on vue.js lately and most tutorials I'd seen out there are not so beginners friendly, so i'd decided to start this series to help #codeNewbies go from beginners to intermediate in Vue.js.

Please Note ⚠️: You should have a basic understanding of HTML, CSS and JavaScript before learning Vue.js. If you do not, here are great resources to help you get started.

Introduction

Vue.js is a pogressive JavaScript framework for building interactive user interface. Vue.js is considered as a goto framework by many developers because it is:

Easier to learn compared to other frameworks/libraries like react, angular,...
Have an easily understandable structure.
Better runtime performance ...

What can i build with Vue.js ?

Below are some stuffs you can build with vue.js

Single Page Applications (SPA)
Multi Page Applications
Native Android and iOS application - With Vue native

Getting started

Open your favourite text editor, create a new index.html file and copy the basic html code below.

<html>
  <head>
    <title>Vue.js Tutorial</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <div id="wrapper">
    </div>
  </body>
</html>

And, lets include the vue.js library source file in our code.

[+...]
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>

Now, lets go ahead and create a new vue instance using the new keyword.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
[+...]
<script>
  var app = new Vue({
  el: "#wrapper",
  data: {
     myMessage: "Welcome to my vue app."
  }
});
</script>

So what have we done?

The new Vue(.. keyword is to create a new instance from the Vue class. And this requires one important parameter which is the el.

The el is to specify where we want to wrap our vue application, and in this case it's our <div> with the attribute id = wrapper

Recall: In DOM manipulation that # (hash) is to id, while . (fullstop) is to class. So that's why our el value is #wrapper.

Data

During our new vue initialization, we'd added a second parameter data - This is basically where we are going to house all the local properties we will be using while rendering our application, which is 100% reactivate (more on this later).

To access our property myMessage for example, our index.html file should look like this.

<html>
  <head>
    <title>Vue.js Tutorial</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <div id="wrapper">
        <p>{{myMessage}}</p>
    </div>
  </body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var app = new Vue({
  el: "#wrapper",
  data: {
     myMessage: "Welcome to my vue app."
  }
});
</script>

You'll notice we wrapped our myMessage in a mustache {{}} structure. Other ways we can display our local properties is using the v-text and v-html attribute.
The difference between the v-text and v-html is that.

v-text will display the data as plain text, while
v-html will output the real html. > Run the pen below to see the difference in action.

Conclusion

This article is just an introduction to what vue.js is, and how to get started. In coming articles, I'll be covering crucial topics under Vue.js including:

Binding data
Methods
Components
Looping in Vue
Conditional rendering (if & else)
Vue CLI
Nuxt.js maybe?

And... we will be learning all this by building real world applications 🎊

Okay, why not follow me on twitter so you'll be notified first when I write a new article.

Thanks for reading 👏

Text To Speech In 3 Lines Of JavaScript

Asaolu Elijah 🧙‍♂️ — Tue, 19 May 2020 17:14:42 +0000

If you're curious about trying this out, that's the 3 lines of code below 👇

var msg = new SpeechSynthesisUtterance();
msg.text = "Hello World";
window.speechSynthesis.speak(msg);

But if you're not in a hurry, this article explains everything you need to know about converting text to speech (spoken words) on the web with JavaScript.

Introduction

In a previous article, we'd explored the Web Speech API and also how to convert Speech To Text
Another amazing feature of the Web Speech API is to convert Text to Speech.

Note: Text To Speech != Speech To Text 🧐

Text To Speech is when we give the computer some words and the computer will say this words out loud in some robotic/human voice. While
Speech To Text is when we say some words to the computer, and what we'd just said will be converted to text (I guess this is explanatory enough)

Getting Started

The first thing we'll need to do is check if our browser supports the speech synthesis API. And the code below does that:

if ('speechSynthesis' in window) {
 // Speech Synthesis supported 🎉
}else{
  // Speech Synthesis Not Supported 😣
  alert("Sorry, your browser doesn't support text to speech!");
}

Next step is to create a new speechSynthesis object, add required property and make our app talk 👇

var msg = new SpeechSynthesisUtterance();
msg.text = "Good Morning";
window.speechSynthesis.speak(msg);

Code Explanation

Line 1: We created a variable msg, and the value assigned to it is a new instance of the speechSynthesis class.
Line 2: The .text property is used to specify the text we want to convert to speech
And finally, the code on the 3rd(last) line is what actually make our browser talks.

Altering Default Output

The speechSynthesis API gives room to also change alter the default output like changing the voice, volume, speech rate, language, pitch and more:

var msg = new SpeechSynthesisUtterance();
var voices = window.speechSynthesis.getVoices();
msg.voice = voices[10]; 
msg.volume = 1; // From 0 to 1
msg.rate = 1; // From 0.1 to 10
msg.pitch = 2; // From 0 to 2
msg.text = "Como estas Joel";
msg.lang = 'es';
speechSynthesis.speak(msg);

Getting Supported Voices

The code below helps you retrieve the list of all supported voices:

speechSynthesis.getVoices().forEach(function(voice) {
  console.log(voice.name, voice.default ? voice.default :'');
});

Conclusion

Well, there's nothing to conclude here I guess 🙃
But you could follow me on Twitter, I tweet and retweet interesting technical stuffs; you sure want to see em.

Thanks for reading 👏

Covid-19 Reports - Get Updates Even When Offline

Asaolu Elijah 🧙‍♂️ — Thu, 30 Apr 2020 15:30:44 +0000

In most African/Asian countries, most citizens tends not to get updates about the global covid-19 pandemic. One of the reasons being the lack of steady internet connection.

The reports in Nigeria for example are updated every night around 8:00pm GMT and when this happens, it's only published on the Nigeria Center For Disease Control (NCDC) social handles. So if you have no access to the internet during this time, you'll be in the dark 🧟.

This was why we'd brainstormed to create a solution for solving this, and then we came up with Covid-19 Reports 💡

What We built

Covid-19 Reports helps you channel your super power of getting the latest information about the covid-19 pandemic even when you're offline.

You'll only need to access the web app once and prompted to add your mobile number in order to get the updates. After this you'll get all the updates you need everyday (automatically) 🎉

Also:

Visiting the app automatically detect your location (country precisely) and you'll only get reports based on this side, this was implemented so as not to bore 😴 you with large statistical data.

Another awesome feature is performing self test right on your mobile phone. Since the covid-19 symptoms are known, we'd decided to automate self test without even having to visit the hospital.

Other amazing features including dark mode support🤹

Category Submission:

Covid-19 Solutions
SMS API Integration

Demo Link

https://inventorsdev.github.io/covid-hack/

Link to Code

https://github.com/inventorsdev/covid-hack/

How We built it

Covid-19 Reports is a progressive web app built with

HTML, CSS, JavaScript, Framework 7 [Front End]
PHP and SQL [Back End]

And SMS solution was made possible with Twilio SMS Api

Also, automation was done with cron job on a Linux web server

How To Access Dev Tool On Mobile Browsers

Asaolu Elijah 🧙‍♂️ — Fri, 24 Apr 2020 18:01:43 +0000

Recently, I was working on a side project with some friends. Unfortunately my PC had been damaged during the covid-19 pandemic and I couldn't get to fix it because of the lock-down, so I had to resort to coding on my mobile phone 🤦🏾‍♂️.

Somehow, my code works perfectly offline, but for some reasons, it did not go well online 🤒
And of course I'll be needing dev tool to access the console and check for errors.

Some minutes of googling later, I discovered it's very much possible to access the dev tool on mobile browsers with Eruda 🎉

Below is how you can do open the dev tool on chrome mobile browser

Step 0

Bookmark your current page by clicking the star ⭐ symbol from the chrome menu.

After doing this, you should see a toast message Bookmarked with an edit button:

Click the edit option and change the bookmark details to the following:

Name:

Mobile Dev Tool

URL (copy and paste code below):



javascript:(function () {var script=document.createElement('script');script.src="//cdn.jsdelivr.net/npm/eruda";document.body.appendChild(script); script.onload = function () { eruda.init() } })();

Step 1

Visit the web page you want to inspect
Enter the keyword Mobile Dev Tool into the search bar(you should see the page we bookmarked before with the url starting with javascript:...) click on the URL

Wait for 3 Seconds for the Eruda icon to appear like below

Click on the icon to open your dev tool

Enjoy! 🎉

Here's what you can do with the Eruda dev tool

View javascript console
Inspect element
Track Ajax requests
View website source files
Change CSS directly from web page
And other awesome features

Conclusion

Eruda is an open sourced javascript package publicly hosted on github here and contributions are welcomed.
If you'd found this article useful, c'mon show some love and share with your friends 🤗

Finally, I share and retweet tech stuffs on Twitter too follow me @asaolu_elijah

Thanks for reading ❤️

Understanding fetch() 2 - Building A Random Quote Generator App

Asaolu Elijah 🧙‍♂️ — Sun, 05 Apr 2020 16:28:19 +0000

In my previous article, I'd explained the concepts of fetch API, how it differs from xmlhttprequest plus some important stuffs you need to know. And i had promised to write an article that deals with the practical use of the fetch API.

In this tutorial, we'll learn how to build an app that display random quotes to the user every 10 seconds, we will be using the data available at https://api.quotable.io/random . This means we won't be the one responsible for typing the random quotes that will appear on our app. The website does that for us already, and it's publicly available for everyone to make use of.

Here is a link to the final output of what we will be building, and also the full source code is publicly available on GitHub.

Let's get started

The first thing we need to do is to create 3 different files index.html style.css and app.js 📑
Copy and paste the code below inside the index.html file

<html>
    <head>
        <title> My Awesome Quote App</title>
        <link rel="stylesheet" href="style.css">
    </head> 
    <body>
        <div class="container">
            <div id="quote">
                Don't forget: life is a race, if you don't run fast, you'll get trampled
            </div>
            <div id="author">
               - Anonymous 🎭
            </div>
        </div>
    </body>
  <script src="app.js" ></script>
<html />

We had just created an html page with some dummy quote inside a <div> since we'll be getting our quote from another server and this will require internet access.

Also, copy and paste the code below inside the style.css file. If you're not so sure of what HTML and CSS is, here is a great resource for that.

/* style.css */
body { 
 background: linear-gradient(to right, #ff7300, #ff4800); 
 color: #fff;
}
.quote-body { 
 margin: auto; 
 width: 400px; 
 height: 200px; 
 margin-top: 150px;
}
#quote { 
 font-size: 40px; 
 font-weight: bold;
}
.author {
 font-weight: normal;
 font-size: 20px
}

And finally, for where the magic will happen 🧙. Copy and paste the code below inside app.js file.

//app.js
const url = "https://api.quotable.io/random";
function generateQuote(){
   fetch(url)
  .then(function(data) {
         return data.json();
    })
    .then(function(data){    
    document.getElementById("quote").innerHTML = data.content; document.querySelector(".author").innerHTML = "- " + data.author;
   })
 .catch(function(err) {
    console.log(err); 
    });
 }
 // Repeat generateQuote() every 10 seconds
setInterval(generateQuote() ,10000);
//Note - 10000 milliseconds = 10

Code Explanation 👩‍💻

generateQuote: Inside the generateQuote() function, we had written the code to get a random quote from https://api.quotable.io/random using fetch and we've also changed the innerHTML (content) of our dummy quote and dummy author to the fresh one we got from https://api.quotable.io/random.
setInterval: setInterval is a function used for repeating an action every n milliseconds and it takes two parameters, the first one is the action you want to repeat while the second one is the time you want to wait before it repeats the same action again. And above, we wrote the code to repeat our action of generating a random quote every 10 seconds (10000 milliseconds = 10seconds).

Conclusion:

In this tutorial, we had learned how to create a random quote generator app with HTML, CSS and JavaScript. If you've successfully re-built this app with little or no modifications, I'll be glad if you can share it on Twitter tagging me (@asaolu_elijah).

📌 Also if you are facing any issue with building this or have any question, you can drop a comment below or reach out to me on Twitter 📩.
Finally, don't forget to star ⭐ this project on GitHub

Thanks for reading, you're awesome! 🤗

Understanding fetch() API In JavaScript

Asaolu Elijah 🧙‍♂️ — Mon, 23 Mar 2020 14:51:19 +0000

Some decades ago, JavaScript developers were stuck with using XMLHttpRequest which is slightly confusing and more complex 😴, then some years later, jQuery (a JavaScript library) built an helper function to make writing ajax code more easier. And again, some years after this, the fetch() api was introduced 💥.

Introduction

The fetch api makes it easier to create asynchronous request and handle the response even more better than the good old XMLHttpRequest.

The main difference between XMLHttpRequest and fetch() is that fetch() uses Promises, which makes it cleaner and simpler to implement.

Getting started

The first thing you need to do when using the fetch API is to invoke the function with the url we want to query as the function parameter:

fetch('http://my_url.com/api/user')

Well, that's not the end of it, since fetch uses promise, we'll need to add a .then() function to grab our data;

But somehow, the first promise will also return another promise.

The reason for the second promise is because, the first one return the data along with some information we don't really need at the moment, so we use the second promise to get our raw data.
Now the code look like this:

fetch('http://my_url.com/api/user')
.then(function (response){
     return response.json();
 })
.then(function (data){
    // Do something with data
    console.log(data);
 });

You'll notice the first promise has a .json() method, this is to specify that we are expecting a json data.

By default, fetch api uses GET method to access the url. We could add a second parameter (in form of an object) to the function to specify the method we want to use, such as POST, DELETE, PUT, e.t.c and also send some data along with our asynchronous request.

Here's how:

// Post Method With Data Example
fetch('http://my-url.com/user/details', {
    method: 'post',
    body: 'email=foo& password=bar'
  })
  .then(function (res) {
        return res.json();
    })
  .then(function (data) {
      // Do something with data
    console.log(data);
  });

For debugging sake we can add .catch() method to handle any error that might occur while sending our request:

// Adding .catch() to our previous code
fetch('http://my-url.com/user/details', {
    method: 'post',
    body: 'email=foo& password=bar'
  })
  .then(function (res) {
        return res.json();
    })
  .then(function (data) {
      // Do something with data
    console.log(data);
  })
  .catch(function (error) {
    console.log('Request failed, Error ' + error);
  });

Final Notes

This article is just to explain the basics stuffs you need to know about fetch().

"Quote Generator" - 👦🚀

In my next article, we'll get a bit more practical by learning how to build a random quote generator site using the fetch api.

P.s: Don't you think it'll be awesome if you share this with your friends on social media, how about you do that now 🙃

And finally below are some great references I'd gather if you want to further your reading on fetch().
Thanks for reading 👏

Resources

https://developers.google.com/web/updates/2015/03/introduction-to-fetch

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

Speech Recognition With Javascript

Asaolu Elijah 🧙‍♂️ — Tue, 21 Jan 2020 02:10:58 +0000

Introduction

Speech recognition refers to the the process of enabling a computer to identify and respond to the sounds produced in human speech.
It was first introduced at Bell Laboratories in 1952 and this version could only recognize numbers but not words. Few years later, speech recognition had grown from just recognizing numbers to recognizing text, grammers and even detecting noise.
This technology was developed as an alternative to typing on keyboard, you will only have to talk to your computer and your words appear on your computer screen

Web Speech Api

In year 2012, the Web Speech Api was introduced with the aim of enabling speech recognition and also converting text to speech on modern web browsers.

Note: Speech recognition is not currently supported on all browsers click here for list of compatible browsers.

Getting Started

The first thing we need to do is to check if our browser is compatible with speech recognition, we can easily achieve that with the code below 👇

The next step is to create a new speech recognition object and check for when recording start.

Finally to start our speech recognition and do something with the output.

Code Explanation:

recognition.onstart : This is an event handler that will run when the speech recognition service has begun listening to incoming audio.
recognition.onresult : Another event handler that will run when the speech recognition service returns a result.
recognition.start() : This method will start the speech recognition service and start listening to incoming audio, running this code for the first time will show a dialog asking for access to your device microphone like below.
transcript : This is the text output generated after the speech recognition service had stopped, and that's all we need from all the code we've written so far. For now, we are just logging the output to the console, you can choose to do something else with it.

There are more properties, methods and event handlers that can be used when accessing the speech recognition objects, some of which include:

recognition.grammars : Used to set the grammars that will be understood by the speech recognition service.
recognition.continuous : Boolean to set whether continuous results are returned for each recognition, or only a single result.

Click here for full list of supported methods, properties and event handlers.

Sayit 🗣

I'd recently built a progressive web app (utilizing speech recognition)
that convert spoken word to text and provide a button to instantly share this text across various social media platform.
This project could be handy when you want to send a lengthy email or post on social media.
View the project live here and if you think its cool, kindly give a star on github (contributions are also welcome 🤗).

Conclusion

+1 for Accessibility

Speech recognition had played a great role in accessibility over the past few years, most especially for the visually impaired, people with injured arm and many more. Since they cannot use the keyboard for typing, they'd to default to using their voice for controlling and navigating through applications and web pages.

Project Idea

If you are so into speech recognition (like i am), how about building a web pages that is fully automated and controlled with voice rather than clicking or swiping. For example from the index page, i could just say go to about page, and i will be redirected to about page, sounds cool? yeah!. I will love to see what you've built, you can send me a message on twitter, i will gladly answer your questions.

P.s: i'm looking to make new dev friends 🤗, lets connect on twitter.

Thanks for reading 👏