Earlier the plan was to work on email notifications but.. honestly sending emails is not free and even on the free plan, there is a limit of 100 emails per day... but I want a to build a product to scale and not worry about all these costs and everything so I switched to notifications earlier the plan was to use one signal but it did not work out one signal does not allows you to send notifications to specific users :) So I switched to FCM (Firebase Cloud Messaging) it is quite awesome. So when you will come for the first time to AnonMsg it will ask you whether it can send you notifications or not! if you want to get a notification every time someone messages you. Then click allow :)

And thanks to the service worker running in the background you will always get a notification a detailed article is coming soon on it.

and once you have got the message you always read it on the dashboard... Plus once you clicked on the link icon

you would be able to get a link that you can share on social media

and once the user clicks on the link generated by AnonMsg. the user would be redirected to the msg page. once the user sends you a message you would be sent a notification and if you have disabled the notification then you can later check it on Dashboard.

Here are a few use cases in which this project can be used -

For Social Media Some Social Media platforms are full of toxicity and sometimes people get bullied for saying the right things so If you want to say something to someone and don't want to get trolled then AnonMsg is the right for you.

To Have Fun You can have a lot of fun while using this project just post the URL into your status and people can give feedback, some fun tasks, or even what if someone confesses to you. 😝. In such a situation, you don't want to miss that message just because you didn't check on that website where AnonMsg comes into the picture :) Our instant notifications will keep you on track. (for free)

Challenges I ran into

Push Notifications :-

Implementing push notifications was the hardest part. I was first going with OneSingnal... Later got to know that they do not allow sending notifications to a specific device. so I have to switch it later to firebase cloud messaging. Later I have to implement a service worker to receive notifications in the background. Which was another task. and another challenge in this module was to send notifications. for that, I am using the firebase admin module and triggering notifications for users each time the message is sent. Plus redirecting the user on notification click was another challenge that I have solved :)

Setting Up DNS & Deployment on Vercel :-

Deployment on Vercel is easy until the other 3rd parties are involved. I have to change the website URL for each and every service I am using to ensure things work as they are expected. Plus buying a domain in the last movement and chaining A and CNAME records we completely level things. I haven't thought I could do so much in so less time

Building Anon msg in Next and chakra : -

So charka has a hook called use media query which allows users to use media query I was using this in the project it makes it responsive. I dev env it was working fine but later in deployment, my UI was breaking... after researching a lot I got to know this is due to SSR later I disabled it and everything is fine now. :)

Project Link - http://anonmsg.fun/ Github - https://github.com/tewarig/anonmsg Send me a msg - https://www.anonmsg.fun/message/meow

if you find a bug feel free to report it to me :)

also one thing regarding the stats.... they are quite good for the anonmsg for the past 2 days :) here it goes

Firstly What is Promise.all() ?

So... Promise.all() take an array of promises as input and then return a promise that resolves to an array of the result of input promises. For example, we have the following 3 promises...

let promise1 = Promise.resolve(5);
let promise2 = 30;
let promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, "meow");
});

Now we can pass them as an array into Promise.all()

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values);
});

this will resolve into

 [5, 30, 'meow']

Okay, what if a promise is rejected ?? what will happen then ?? let's check that out...

let promise1 = Promise.resolve(5);
let promise2 = 30;
let promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, "meow");
});

let promise4 = new Promise((relove, reject) => {
  reject("server not responded");
});
Promise.all([promise1, promise2, promise3 ,promise4]).then((values) => {
  console.log(values);
});
//

This will result in...

so now we know that.. any of the promises does not resolve promise.all() will not resolve instead it will throw that error. So now we can fire up our terminal and get started :)

Firstly we need to make a function :) that's obvious... and it will take an array as an argument. then it will iterate through all the promises in that array and will store the result of them somewhere and will return it when all promises have been iterated. And there is one more thing... we need to throw an error when the promise does not resolve....

function promiseAllPolyFill(listOfPromises) {
  return new Promise((resolve, reject) => {
// array result to store the resolved value from the promises...
    let result = [];
// promise completed to count number of completed promises
    let promiseCompleted = 0;

    listOfPromises.forEach((value, index) => {

      Promise.resolve(value)
        .then((val) => {
          result[index] = val;
          promiseCompleted += 1;

          if (promiseCompleted === listOfPromises.length) {
            resolve(result);
          }
        })
// if promise doesn't get resolved we need to throw error
        .catch((error) => {
          reject(error);
        });
    });
  });
}

promiseAllPolyFill([promise1, promise2, promise3]).then((values) => {
  console.log(values);
});

and here is the output... it works 🐱🐱🐱🐱

Firstly create the next app

npx create-next-app qr-code

Once the installation is done create simply start the local server by going to the project folder

ls qr-code

npm run dev

Now you will see the holy welcome next.js screen

Now just go to the vs code screen and start editing the index.js file on the page we will remove the code and make simple it simple and add links to new routes ... Scan and Make codes. make sure you have modified index.js as follows -

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Qr - Code</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to Qr Labs
        </h1>


        <div className={styles.grid}>
          <a href="/scan" className={styles.card}>
            <h2>Scan a qr code&rarr;</h2>
            <p>Scan a qr code with your camera</p>
          </a>

          <a href="/generate" className={styles.card}>
            <h2> Generate a qr code&rarr;</h2>
            <p> Generate a qr code with text or a link</p>
          </a>




        </div>
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <span className={styles.logo}>
            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
          </span>
        </a>
      </footer>
    </div>
  )
}

and then also add scan and generate a page in the next js pages directory.

//scan.js
import React from 'react'

function Scan() {
  return (
    <div>Scan;</div>
  )
}

export default Scan;

//generate.js
import React from 'react'

function Generate() {
  return (
    <div>Generate</div>
  )
}

export default Generate

Now we would be working on the Generate Qr Code first... firstly to generate the QR code we would be using React QR code use

npm i react-qr-code

to install react-qr-code

after installing go to the generate.js file .. firstly we need to make a text input where we can take input from the user and store that string value in our QR code. after that we will pass that value to QRCode from react-qr-code . That's it. to do that we would be using the useState hook from React.

// generate.js
import React, { useState } from "react";
import QRCode from "react-qr-code";
import styles from "../styles/Home.module.css";

function Generate() {
  const [qrCodeValue, setQrCodeValue] = useState("");

  return (
    <div className={styles.main}>
          <div className={styles.card}>Generate QR</div>

      {qrCodeValue != "" && (
        <QRCode value={qrCodeValue} className={styles.containerColumn} />
      )}
      <input
        className={styles.card}
        onChange={(e) => {
          setQrCodeValue(e.target.value);
        }}
      />
    </div>
  );
}

export default Generate;

To read the QR code from the file we would be using React Qr code scan just install it using

npm i react-qr-reader

now we will focus on reading the QR code... we can directly import QRCODE from react-qr-reader form the react package and

//scan.js

import React, { useState, useRef } from "react";
import { QrReader } from "react-qr-reader";
import styles from "../styles/Home.module.css";

function Scan() {
  const [data, setData] = useState("No result");

  return (
    <div className={styles.container}>
      <div className={styles.container}>
        <QrReader
          onResult={(result, error) => {
            if (!!result) {
              setData(result?.text);
            }

            if (!!error) {
              console.info(error);
            }

          } 
        }
//this is facing mode : "environment " it will open backcamera of the smartphone and if not found will 
// open the front camera
        constraints    ={{ facingMode:  "environment"  }}
          style={{ width: "40%", height: "40%" }}
        />
        <p>{data}</p>
      </div>
    </div>
  );
}

export default Scan;

here we are passing facing mode so basically while accessing the camera if we want to access the back camera of the device we can set the facing mode to the environment which will by default open the back camera in the user's phone and will open the web camera in PC. if you want to know more about facing mode check Mozilla's docs

So here are resource materials for the docs Github Live Deployment

Hmm... So what is the flattening of an array?

basically in flattening we reduce the dimension of an array.
basically, let's say if we have a 2d array while doing the flattening we will convert that 2d array into a 1d array.

example: 1
//before flattening
const array = [[1, 2],  [3, 4],[5, 6]];
//after flattening
[1, 2, 3, 4, 5, 6]

also, there is one more thing the depth of flattening that basically means how much the array should be flattened basically ...

let's say you have a 2-d array then you will flatten it into 1-d then depth is 1. here you reduce the array size by 1.

now let's say you have a 4-d array then you flatten it into a 2-d array then the depth is 2.

So how to do flattening of an array?

You can use Array.prototype.flat()

example:-

const array = [[1, 2],  [3, 4],[5, 6]];
console.log(array.flat());

this will flatten the array into [1,2,3,4,5,6]; let 's try another example

const array = [
  [[1], [2]],
  [[3], [4]],
  [[5], [6]]
];
console.log(array.flat());

this will flatten the array into [[1],[2],[3],[4]] ; oohh wait... I didn't want to do that... I want it to be more flattened ... how to do that? so basically by default the depth to be flattened in flat() is 1.. we can increase it by passing the desired value into the flat() function so..

const array = [
  [[1], [2]],
  [[3], [4]],
  [[5], [6]]
];
console.log(array.flat(2));

Okay that works but what if I want to don't know to want to give the depth and want to convert any array of any dimension into a 1d array ??? how can I achieve that? Simple just pass Infinity :) that will flat any depth of array into 1d

const array = [
  [[1], [2]],
  [[3], [4]],
  [[5], [6]]
];
console.log(array.flat(Infinity));

Hmm.. that's cool can we flat array without using Flat () ??

Yess....

the logic:- firstly we are sure we need to iterate the array ... and concat the array inside it...

const array = [
  [1, 2],
  [3, 4],
  [5, 6] 
];
function flat(array){
    let result = [];
    for(let data of array){
      result = result.concat(data);
    }
    return result
}
console.log(flat(array));
//output 
[ 1, 2, 3, 4, 5, 6 ]

that look's fine for now.. but what if .. we change the input ?

const array = [
  [1, 2],
  [3, [4,5,[10]]],
  [5, [6]] 
];
function flat(array){
    let result = [];
    for(let data of array){
      result = result.concat(data);
    }
    return result
}
console.log(flat(array));
//output
[ 1, 2, 3, [ 4, 5, [ 10 ] ], 5, [ 6 ] ]

hm... now how can we implement infinite flattening into this flat function? so before concatenation, we just need to check whether the element is the array or not? if it is then loop through it and repeat the entire process otherwise just merge it.

function flat(array){
    let result = [];
    if(!Array.isArray(array)){
        return array;
    }
    for(let data of array){
      result = result.concat(flat(data));
    }
    return result
}
console.log(flat(array));

Gaurav This side, I hope everything is fine, on your side, and if it is not fine, don't worry it would be : ) This article is regarding MeowForms which allows you to build custom back endless for free. I have made my small side projects in past but this is the first time I have purchased a domain for a project, set up servers for it, and thought of branding it.I had a lot of fun and sleepless nights while building meowform. Meowform is my submission to the Auth0xHashnode hackathon. Can't wait to show you all what I have cooked

MeowForms 🐈 BackStory

Forms have been an important part of a website and always will be but when it comes to building and saving responses from them it's not that easy for beginners. I still have that mailto: in my contract me section of my portfolio website. but for such a small but important form setting up firebase or a backend would be kind of overkill. not only that what if I am a beginner and don't know how to code my own backend. Also, as a lazy developer I wanted a service that can handle all my forms in the future without any hazle. that's where MeowForms kick in.

Introducing MeowForms 🐱 meow!

• Meow form allows you to make your forms functional in a snap. you just have to add as low as one line of code and your form is functional
• Ones you have integrated meowform in your application it will send you an email notification every time someone fills your form
• You also get a cool dashboard to view all your responses and forms in a place
• It supports each and every framework out there, whether it is on the web, mobile, and desktop, so No worries
• All features are complete free without any limit, no subscription. you can support it on buy me a coffe.

⚙️How I build it ?

I have user MERN stack to build it (MongoDb, Express, React, and Nodejs) apart from that auth is powered by auth0 , and emails are handled by mailgun , although first I was of using node mailler with Zoho it had a limit of 50 emails per day which was a bottleneck for meowform then I have decided to switch to mail gun. After that, while building deploying it was a pretty hard task first I thought of used Heroku but it does not support HTTPS with the custom domain so it was a problem. later I ended up deploying the backend on Digital ocean.

🐱 The story of design and cheese

Where the whole design of the website revolves around a cat whose name is Cheese :) well if you have watched that anime you know! (tell me in the comment section ) I have used Chakra UI for building the front end of the site. and between those UI components, you will find cheese chilling, In the meowfrom the whole design of the website revolves around yellow and orange color. I tried to keep the whole design of meow from uniform. :) all the illustrations in meowforms have been taken from icons8.

not only that to connect with the user even when the user would be getting email notifications from cheese. and the subject would look like this UvU don't worry the main body would contain the data. apert from cheese Dasboard of meowform do contains features to check responses and have a look on how many people have responded to your forms .

not only that you can also have look of what people have responded in your forms from dashboard.

I have tried to keep the UI of meowforms clean and cheesy :)

How to use meow forms ❓

if you are using meowform in just plain HTML and CSS the rules are pretty much simple you just need to add meowform's server URL in the action attribute of form and do specify the method="POST" well that's it. rest would be taken care of by cheese :) and do remember to sign up in meowforms beforehand otherwise cheese would be sad and your forms will not work.

<form
  action="https://server.meowform.xyz/page/[yourEmail]&[formName]"
  name="form"
  method="POST"
>

well if want a detailed documentation checkout Moewforms docs currently, I have added examples of using meowforms with HTML, React and ReactNative along with codebase so, I would be adding more examples for frameworks soon. or you can even contribute to it

Live Demo

*my i3 machine was making a lot of noise so sorry for it . plus as a developer it is pretty hard to make videos :( kudos to all awesome YouTubers out there.

How things work under the hood ?

well, whenever you are making a request to the form server, the data of the request is in the body of it. so I can easily get the response of the body but I need to parse it and arrange it in a proper way to mail it and send it to the user and store it in MongoDB to show in the dashboard later. this is how meowFom get's gata from every request

  let incommingData = req.body;

   incommingData =  JSON.stringify(incommingData);  
   incommingData = incommingData.replace(/{/g," ");
   incommingData = incommingData.replace(/}/g," ");
   incommingData= incommingData.split(",");
   let title = [];
   let entry = [];
   for(let i=0;i<temp.length;i++){
       incommingData[i] = incommingData[i].replace(/"/g,"");
       let mainArray = incommingData[i].split(":");
        title.push(mainArray[0]);
        entry.push(mainArray[1]);

   }

not only that if you are using meow from in HTML you can see it see the go back button that was I didn't know for a while you send user back to the site from which user is coming to yours by using

history.back()

And for sending emails earlier I was using nodemailer along with my zoho's mail server but I might need to send emails in bulk here so I switched to mail gun and start using mailgun js. this is how the mail function works in MeowForms . Cheese 🐱

const mg = mailgun({apiKey: api_key, domain: DOMAIN});
   mg.messages().send( {  
    from: 'Cheese 🐱<cheese@meowform.xyz>',
    to: email,
    subject: `You have got a new Response in ${formName} Meow!  UvU `,
    html: `${mailBody}     <br/> <a href="https://www.buymeacoffee.com/tewarig"> buy Cheese some cat food 🐟 </a>`
  } , function (error, body) {

    if(error){
      console.log(error);
    }else{
      console.log(body);
    }
    });

Up Comming in MeowForm

• Well having an option to export responses in excel sheet
• Adding examples for more frameworks and projects.

Support

⭐ Star on Github

☕ Buy Me a coffe

Project Links

MeowForm

MeowForm Docs

Github

👀 FeedBack

Hey, what are your thoughts on meowform ? how I can improve it ? did you like it ? I would love to hear your thoughts on meowform

Gaurav This side, I hope everything is fine, on your side and if it is not fine, don't worry it would be : ) This article is regarding my project which I build during Clerk Hackathon It was a fun ride for me doing a project and getting back to my developer life. Thanks, Hashnode for this awesome opportunity. Here in this article, I am going to give a little brief about my project.

⛩️Torii - Backstory

Last few months all I did was binge-watched anime and regarding development I did nothing, I didn't have any project idea or motivation. So I browsed all popular GitHub repos and started contributing to them. Some of my PR's got merge and I was quite happy, Then I came to know about Red Hat Open Source Program and participated in it, and had an awesome experience. Now I have started attending meetups of various open-source originations. But It is quite hard to find projects I can contribute, Plus is Open Source Events and Programs provide awesome experience, but they are quite a little bit hard to find for beginners like me. Here Torii comes to the Help : )

Torii - Introduction ✨️

well, you can always add new Organizations, Events, Open Source Programs to Torii by clicking the plus button on the right corner but.. you need to sign in to the application, which is powered by Clerk.

Apart this.. torii also have

🌙 Dark Mode/🌞 light Mode

🇷Responsive

📧 Newsletter Adding a newsletter was also important since, The user might not be able to come to the app every month, but a monthly newsletter would help to remind them about all the events.

😌 Problems Faced

Well, I faced a lot of problems but I would like to mention problems which could help others.

While browsing the webpage I was facing a problem the next page was not loading from the top, it was either loading from the end or middle (I know it's a small issue but as a user, it can be a little bit bad experience), so I wrote my own component for that, maybe would be publishing a new npm package for that.

import {useLocation} from 'react-router-dom';

function ScrollToTop(props) {

    const  {pathname} = useLocation();
    React.useEffect(()=>{
        window.scrollTo(0,0);
    },[pathname])

    return null;
}

Also, there was a problem with the clerk Components, they were not supporting Dark mode... I got a really lot of help from the clerk discord server. You can easily get help if you are stuck at a place. I notice the clerk signs and SignUp component were loading after a while so added a class to them. So later I ended up checking whether the user has selected the dark mode or not. and after 2sec I am adding dark mode class.

JS

 const {colorMode , toggleColorMode }= useColorMode();
    const isDark = colorMode === 'dark';

    const addDarkClass= () => {
        if(isDark){
        setTimeout(()=>{
          var x = document.getElementsByClassName('cl-component')[0];
          x.classList.add('dark');
        },2000);
    }else{
        setTimeout(()=>{
            var x = document.getElementsByClassName('cl-component')[0];
            x.classList.remove('dark');
          },2000);

    }
    }

    React.useEffect(addDarkClass,[isDark]);

CSS Instead of targeting every class of clerk component I target the main class and inverted the whole hue and ended up writing one line of CSS.

.dark {
  filter: invert(1) hue-rotate(180deg);
}

;) dark mode in one line If you are using clerk, you can solve the issue by using following snippet in a snap

💻 Built with

• Reactjs
• Nodejs
• Express
• MongoDB
• Clerk
• React-Hot-Toast
• Charka UI

My Learnings

• Tried to make this Web App's UI as good as possible since I want more and more people to use it. I tried that every feature of this app can be accessed by the user in just three clicks (I read it somewhere it's a good practice) also, I did use the Same style illustrations and Components through the web app.Also, I did try to add some micro Interactions.
• Another Learning was Whenever you are stuck trying to find ask your peers, I was stuck with the Clerk components do not support the dark and light themes, I did ask my friends and Clerk's team. everyone helped me and it got fixed.
• Last and not least I implemented my sorting in the project according to the date, filter functions, Search functions.

Future RoadMap

I would be working on this project on weekends, I have to add a lot of information to toriii yet.

• Add to calendar feature (⏰ very soon)
• Share on social media much more....

Project Link

Live Link : - http://toriii.vercel.app/

Github : - https://github.com/tewarig/torii

Project update

In this article, I would be sharing my journey in the Red Hat Open Source Contest. I would be showcasing what I worked on, what I learned throughout the journey, and challenges-faced.

But before I start there might be a question in your mind.

• What is Red Hat Open Source Contest ❓

Red Hat Open Source Contest is organized by World's biggest open source company Red Hat . This year it started in April and ended on the 1st of July. You can select an open-source project of your choice and contribute to it. You get feedback on your code and it even gets included in a real project.

Also, you get to contribute to open source under the supervision of an experienced mentor from Red Hat. if you ever get stuck while contributing your mentors are always there to help you out.
While contributing you will learn a lot about various technologies and you will learn about various factors involved while building a product. it would also improve your communication skills.

💡 Selecting projects is one of the most important parts, while selecting projects make sure you select a project in a domain you are interested in.

I was quite interested in web development. so I was looking for web development projects and I found out Fodger's DHT which is a Decentralized peer to peer cloud storage platform. You can use Fodger's DHT to store your photos 📷 , videos🎥 , and other data 📁.

If I could describe the project in one word it would be pied piper : )

This was an idea and project of Prajith Kesava Prasad Who was also my mentor. Previously, I have done web development in javascript, but the world of python was a little bit new to me. Thanks to my mentor for helping me and introducing a whole new world of python. he helped me a lot while solving issues, I learned a lot from my mentor.

Currently, Fodger's DHT is in the stage of Implementation and was able to handle only one file at a request, so my first task was to make new API endpoints so that it could handle multiple requests. I solved this by introducing new endpoints in the backend. so every time a new file is uploaded it would send shards of the file to new endpoints of other nodes.

ohk now the problem of files was solved but.. suppose even if the user uploaded an image or a file how would the user know it got uploaded? we didn't have a gallery for that.

so we need to redesign and reimplement the upload flow for the user. this was one of the major updates for the project. it Included

• new animated side navigation.
• new entirely redesigned upload flow.
• new image gallery for showing uploaded images. it was easy to loop through the folder and display the files. but we do need a display them properly so users can really enjoy the app. we do need a feature to full screen an image, next image, and previous image. later I implemented this feature using Lightbox

here is a sneak peek of what it looks like now

fun fact those images we click by Prajith Kesava Prasad

not only that I did add a preview dialog so users can preview files before uploading them.

now since the upload part was done!! Now after these updates we do need a UX/UI through the app, but also the homepage should explain the idea of Fodger's DHT . this was my next task. Initially, the idea was to go with Partilce js to make a list of nodes, then insert images in them and display them. but particle js don't have support to multiple images. Then we shifted to Ts particles the community support for ts particles was so good that the maintainer of Ts particles Matteo Bruni helped us out. and later I was able to implement that. later we added animations also. but the home page has too many things on it. so wasn't up to the mark. Later while having our project discussion, I told my mentor about it. and we came with a completely new implementation of the home page.

Since almost every part of the project was updated only the signup and signing part was left so it also got redesigned and reimplemented.

So, Now Fodger's DHT is almost ready for users with its design and awesome features.

Here is a list of the Issues and solutions I have provided.

• Update homepage with new design :: new homepage ui
• Implement a new UI for signup/sign :: Sign in and Sign Up ui implemented
• Upload feature :: Upload page redesigned and re implemented
• Develop API endpoints to send shards of the file to multiple nodes in the network :: API endpoints to send file to multiple nodes in the network

During my whole journey while contributing to the project I got to learn a lot about Python and flask. Plus as a developer, my front-end and backend skills were tested and improved a lot. Redesigning the entire project writing CSS for the project. and the upload feature was one of the challenging parts.

In the end, my grip on Font end improved, I end up learning more advanced git (no more afraid of rebasing and merge conflicts 😅) My code is more readable now.

My whole experience of Red Hat Open Source Contest in one word !! Subarashī (wonderful !!)

Do not forget to visit the project repo and Give it is a star Fodger's DHT
if you wanted to start your open source journey, you can also participate in Red Hat Open Source Contest
If you have any other doubt related to RHOSC please leave a comment. I would be glad to resolve them.

what is exactly dom?

DOM (document object model ) is basically a programming API for HTML and XML documents, with dom you can specify how your document should be structured. with dom, we can easily manipulate the elements of our document.

According to the dom model, every element is an object, and even the nested tags are the objects and chile of the enclosing one. HTML dome basically looks like a tree. it is also called a tree.

try is yourself

open the console of your browser right now. press ctrl + shift + j enter this in the console of your browser.

console.log(document);

what do you get? you will get the entire HTML document returned. here the document object represents the entire web page.

if we want to access any element in the web page we need to start accessing that with the help of the document object.

for example, if you want to get the domain of the page ... just type

console.log(document.domain)

How can I manipulate dom?

well, there are many many ways to do that... you can use query selectors, getElement by class, or id

 document.querySelector(".myclass");
var x = document.querySelectorAll(".myclasses");

// if I want to change the background...
x.style.backgroundColor = "dark" ;

this is how you can easily manipulate dom.

wrap up

This is just a beginner article of my javascript series. where I would be sharing everything I am learning to prepare for interviews. positive or negative please leave your feedback.

you can connect with me on Twitter

you can support me on. buymeacoffe

- What is an AR filter by the way?

well Augmented reality (AR) filters are basically various graphical effects are superimposed on Real Images. After seeing these effects you will argue about things that are not present in the Image.

for example:-

Some Instagram / Snapchat filters make you look so good that you argue in your mind.. is that really me? 🃏

or you ever met someone who looks completely different in their social media profiles as compared in real life and that completely creates an argument in your mind about how is it possible ? that is the magic of AR my friend.💔 😢

Does it really need to learn to code for creating Filters

Well, no most of the time.. in case if you are creating a complex filter you might need to write few lines of code (in case if you are building an ar based game or something like that .) but 99% of the time you don't need to code to make a filter for Snapchat or Facebook.

How to get started ?

Well there are various tools out there if you want to make Ar cool experiences but as a beginner, you need to be careful about what you choose well in my case I found Spark AR 😃

Spark ar is the tool by Facebook it allows you to create awesome filters and effects and then publish them on Facebook and Instagram the best part is you can even use your AR filters in a Reel, in a Video call (while using ig or messenger) Lens Studio 🥰

Lens Studio is by Snapchat it allows you to create filters and effects for Snapchat. The best part is using a Snap camera you can use this effect on a video call while streaming or doing anything.

These two are the best for getting started as an AR creator as you can directly share with your friends what you are building and they can try it very easily. plus you will get all that swag to brag about on social media.

SparkAr vs lens Studio

Spark Ar is quite cool but the updates are too fast as compared to the lens studio. Plus in lens studio, your effects are published in 15-30 min.😃 (yes your effect will go live in just 30 min) but in spark ar, it will take around 14-15 days to publish a filter. 🥺 That's why I prefer Lens studio.. but you can go with whatever you want. (why do I sound like my parents)

but in this blog, we would be going through how to publish filters on lens studio....(i have planned to write a detailed blog on Spark ar .... )

building a Hashnode lens

via GIPHY

so hash node doesn't have a filter so let's make one ... you can use this on pc using lens studio.. or on Snapchat.

Firstly Install and Open install lens studio.

Now just look at the Right side of the screen you will see an inspector panel. you can choose the type of Segmentation you want from here. I am going to choose a portrait background since I am going to make a background segmentation here.

Now look at the left corner of your screen .. click on the segmentation controller

now from here, you can see various options to make changes

I would be changing the image from heart to hash node logo. and voila it is done. Now publishing this lens is quite easy. Just to the publish lens section on the top corner of the lens studio. but before publishing make sure you fill in the project details in the project info section.

• Well scan this to access the lens we just created.

Well by the way I am looking for ideas to create more Snapchat filters and tutorials if you have any ideas or query feel free to leave your comment. In case you like my work:- https://www.buymeacoffee.com/tewarig

Inspiration 🦾

Well, a few days back I shared a trick to easily use google sheet as an API, but there was a lot of hard work involved in that, I just want that trick available to every developer just two clicks away...

But later I got more deeply devoted to this and thought why not make I could make an instant website builder out of this, there are many people who don't know how to code, even editing JSON or HTML files is quite difficult for them(one year back I was the same). so, I thought let's build a tool that allows you to make a website out of google sheet and for developers the possibilities are unlimited.

Demo 🧐

Converting a google sheet into API

Converting a google sheet into a website

just make sure your google sheet is published on the web before converting it into a website or API.

well, I will recommend you to try it ones yourself... https://sitesheet.vercel.app/

How does it work?? 🤔

well ... every google sheet has a unique id/name ( a long random string after sheets.google.com) this app is extracting that from the URL the user is inputting and using that it is generating the API endpoint. once we have the API endpoint everything is done. (you can API as the waiter in a cafe or restaurant it basically helps to get data from the server. just like a waiter helps you to place an order and get your food from the chef )

also here every time the website is rendered on the client site, and if any change is done in the google sheet, it would be reflected immediately.

How I create it 🤓

warning this part might be boring

Well, firstly I am a beginner with web dev so I decided to go with React, I am taking URLs in input from the user and have made few functions to extract the unique id of google sheet. In all the web templates the unique id is passed through the URL Parameters and to handle API's I am using Axios, also Funnies is also included so that users have a great mood while the website is loading. All errors are handled using React - Toasty. There are great packages, maybe you can use these in your own project.

I am using React for this project, and some awesome npm packages such as Axios to handle API requests, funnies to make users laugh when the data is being fetched. React Router to handle routing and react-toasty to handle all errors.

Features 🍨

• It can convert any google sheet into API instantly.
• Make your own portfolio faster than instant noodles.
• Well you can link all your social media from an excel file.. yes you can. -Currently, it has 5 templates you can choose from ... you can make your own personal website, the website for your cafe, Your own page with all your social media profiles, , Share a list of youtube, Facebook, and other social media links in style and also select a random user from excel file.
• Easy to use.
• Have a great UI (I think so.. 😅)
• Saves a lot of time.
• Mobile Friendly
• what else you need? (comment it I will try to add that to the project )

Future Roadmap🔮

So, building this project was fun but it's not the end.

• I will be adding more templates.
• Support for google from (in google from the response can be extracted into a google sheet, so it can work )

• Support for custom domains
• Much Much more...... (please give me more ideas in the comment section )

The whole project is open source, Please contribute to it. (if you find any bug free to report it.)

Github Repo Link:- https://github.com/tewarig/SiteSheet

Project Link:- https://sitesheet.vercel.app/

Also, thanks to Hashnode and Vercel for organizing such an awesome event. 🤞Wish me luck.

But this post is not about that..

via GIPHY

This blog is about a trick which I recently discovered, It makes work a lot easy if you just need to display data from google sheet in your App. Imagine a scenario in which you need to display data from a google sheet list of students, list of all important Contract numbers in case of emergency. or something like that If you only need to display data and you are in a hurry.

Firstly go to a google sheet and publish the web.

once it is done now take a look at the URL of your google sheet.

now just copy this unique URL and

https://spreadsheets.google.com/feeds/worksheets/{Unique URL }/public/basic?alt=json

now just hit this URL in your browser or in postman. now look a the response of the API.. just search for the entry array in the link object.. here you will find the various link to your google sheet .. but they will arrange data in a different format.. one will give you data in a list format and another will just throw data in a cell wise format. just go with format you are comfortable with.

but if you hit that URL directly it will not give you data in the desired format. just remember to add a query argument (alt=json)

you can take this URL as an example

https://spreadsheets.google.com/feeds/list/1cXItNrEtnHRBIAo612LImhjnsFMSbgli-R94T2SPhHE/od6/public/basic?alt=json

just remember to add ?alt=json at the last of the URL. Hope you like my articles if I can improve my writing more please let me know in the comment section. Also do react and share if it helped you.

just fire up your terminal and ```npx react-native init cameraApp

also, remember to install react native camera

```npx i react-native-camera

now since everything is ready .. just set up your Rn app. the basic idea here is that I would be using State to store the image and React-native-camera to click that image.

const[image,setImage] = useState(null) ;

now I will define a function takeimage which will take camera as a input and set state of our image to the image URL also this function will decide the quality of our image .

const takePicture = async (camera) => {
    try{
      const options = {quality: 0.7 , base64:false};
     const data = await camera.takePictureAsync(options);
     setImage(data.uri);
    }
    catch(error)
    {
      console.warn(error);
    }
  }

now in my app function, I would be using Conditional Rendering in the image if the image is present I would be displaying the image and if the image is not present then the camera would open and it would prompt the user to take an image. also, I would be using various props of RNcamera component like

• flashMode which allows us to set the flash option of the camera.
• captureAudio which allow us to capture audio (remember to set it to false otherwise it would give warning or errors)
• androidCameraPermissionOptions helps us to customize the condition message so you can tell user why you need that permission.

the code for this looks like this....

{image ? (
    <>
    <View style={styles.preview}>
  <Text style={styles.camText}>Here is your new profile image.</Text>
  <Image style={styles.clicked} source={{uri:image,width: '90%',height:'50%'}}/>
  </View>
  </>
  ) : 
  (<RNCamera style={styles.preview} 
    type={RNCamera.Constants.Type.front}
     captureAudio={false} 
     flashMode={RNCamera.Constants.FlashMode.on} 
     androidCameraPermissionOptions={{
      title:"Permission to use camera",
      message:"longer text to display msg",
      buttonPositive: "Hola",
      buttonNegative: "Nopa",     }}
  >
    {({camera,status})=>{
      if(status !=="READY") return <PendingView/>
      return(
        <View style={{flex:0,flexDirection:"row",justifyContent:"center"}}>
          <TouchableOpacity style={styles.capture} onPress={()=>(takePicture(camera))}><Text>Capture</Text></TouchableOpacity>
        </View>
      )

    }}
  </RNCamera>)}

also now i want to add a change profile image option so i would can use a button here use call back to call setImage function which would set image to null thus conditional rendering will come into play and it would reopen the camera option.

 <Button title="Click new pic" onPress={()=>{setImage(null)}} ></Button>

In case you want the whole code here

Github Repo link

Also, we would be taking input from the user and using the state to update that input in one go. So we would be using the useState hook here as well.

import React ,{useState} from 'react';
import { StyleSheet, Text, View ,SafeAreaView ,ScrollView ,TextInput, TouchableOpacity ,Alert} from 'react-native';

now since it is a currency converter app we need to get values from somewhere, so I would be making an object and later mapping through each value.

  {Object.keys(currencyPerRuppe).map((currency)=>(
    <TouchableOpacity key={currency} style={styles.currencyButton} onPress={()=>buttonPress(currency)}
    ><Text style={styles.currencyText}>{currency}</Text></TouchableOpacity>
  ))}

now, I would be working on the input part, I have used the use of the state hook and set the initial value to 0. now I would be taking value from the TextInput and finally updating the value to using setState. Also, text input provides us the option to change the keyboard type, and do remember to set the keyboard to dismiss mode as true in the scroll view.

  <TextInput style={styles.inputValue} keyboardType="numeric" 
          placeholderTextColor="#c1c1c1" placeholder="Value"
          value={inputValue} onChangeText={(inputValue)=> setInputValue(inputValue)}          
          ></TextInput>

now finally we just need to calculate the converted value of the currency on the button press, so I would be making a function to do that also we need to handle an expectation what if the user pressed the button without entering any value? well, we can check that and give an alert to the user.

const buttonPress = (currency) => {
    if(!inputValue){

      Alert.alert(
        "Please enter a correct value",
        "Enter a numeric value",
        [

          { text: "OK", onPress: () => console.log("OK Pressed") }
        ],
      );
    }
    let result = parseFloat(inputValue) * currencyPerRuppe[currency] ;
     setResultValue(result.toFixed(2));
   }

here the snack of this app, if you want to check the whole app or code.

wow! so you read the whole article man!! who does that.. get a life man.

I have built this same app in Flutter building it in React Native is quite fun.

Here I would be using StyleSheet, TouchableOpacity, Dimensions, and StatusBar in my app so I would be importing them into my project.

import { StyleSheet, TouchableOpacity , Dimensions ,StatusBar} from 'react-native';

now since this app would be containing sound files I would be making an array and would be accessing those sound files using the index.

const soundList = [
  require('./assets/note1.wav'),
  require('./assets/note2.wav'),
  require('./assets/note3.wav'),
  require('./assets/note4.wav'),
  require('./assets/note5.wav'),
  require('./assets/note6.wav'),
  require('./assets/note7.wav'),



];

now for playing sound I would be using Expo av it is an awesome package in react native also the documentation is very good here I modified the final function to take arguments.

export default function App() {
  const [sound, setSound] = React.useState();
  async function playSound(voice) {

    const { sound } = await Audio.Sound.createAsync(voice);
    setSound(sound);

    await sound.playAsync(); }

  React.useEffect(() => {
    return sound
      ? () => {
          sound.unloadAsync(); }
      : undefined;
  }, [sound]);

and at the last, I only have to do one thing that is to finally style the app and button I have finally taken the height of the full device and then divided it by the number of buttons. so my app works for all screen sizes. this is what the final code looks like.

import React from 'react';
import { StyleSheet, TouchableOpacity , Dimensions ,StatusBar} from 'react-native';
// import Sound from 'react-native-sound';
import { Audio } from 'expo-av';
import { Colors } from 'react-native/Libraries/NewAppScreen';


const soundList = [
  require('./assets/note1.wav'),
  require('./assets/note2.wav'),
  require('./assets/note3.wav'),
  require('./assets/note4.wav'),
  require('./assets/note5.wav'),
  require('./assets/note6.wav'),
  require('./assets/note7.wav'),



];
const buttonHeight = Dimensions.get('window').height ;

export default function App() {
  const [sound, setSound] = React.useState();
  async function playSound(voice) {

    const { sound } = await Audio.Sound.createAsync(voice);
    setSound(sound);

    await sound.playAsync(); }

  React.useEffect(() => {
    return sound
      ? () => {
          sound.unloadAsync(); }
      : undefined;
  }, [sound]);

  return (
    <>
    <StatusBar/>
    <TouchableOpacity style={styles.Button1} onPress={()=>{playSound(soundList[0])}}>
   </TouchableOpacity>
   <TouchableOpacity style={styles.Button2} onPress={()=>{playSound(soundList[1])}}>
   </TouchableOpacity>
   <TouchableOpacity style={styles.Button3} onPress={()=>{playSound(soundList[2])}}>
   </TouchableOpacity>
   <TouchableOpacity style={styles.Button4} onPress={()=>{playSound(soundList[3])}}>
   </TouchableOpacity>
   <TouchableOpacity style={styles.Button5} onPress={()=>{playSound(soundList[4])}}>
   </TouchableOpacity>
   <TouchableOpacity style={styles.Button6} onPress={()=>{playSound(soundList[5])}}>
   </TouchableOpacity>
   <TouchableOpacity style={styles.Button7} onPress={()=>{playSound(soundList[6])}}>
   </TouchableOpacity>
      </>
  );
}
// console.log(soundList[]);
const styles = StyleSheet.create({

 Button1:{
   height: buttonHeight/7,
   backgroundColor: "#EE3F0C",
 },
 Button2:{
  height: buttonHeight/7,
  backgroundColor: "#EE870C",
},
Button3:{
  height: buttonHeight/7,
  backgroundColor: "#FCDC0F",
},
Button4:{
  height: buttonHeight/7,
  backgroundColor: "#69CF0E",
},
Button5:{
  height: buttonHeight/7,
  backgroundColor: "#31B072",
},
Button6:{
  height: buttonHeight/7,
  backgroundColor: "#34A7C8",
},
Button7:{
  height: buttonHeight/7,
  backgroundColor: "#0f4c75",
},
});

Here is the link of Snack for this project Hope this article was useful.

// for loading images from a URL
      <Image source={{ uri: 'https://reactnative.dev/img/tiny_logo.png', }} />
//for loading Images from assets in app
       <Image source={require('./assets/IamgeName.png')}/>
/*aslo you can directly add style  in Image component like any other component*/
     <Image style={styles.ImageStyle} source={require('@expo/snack-static/react-native-logo.png')} />

So now get started with the project we would be building a Dice Roller app.. for assets of dice you can download them from here .

now either you can use Expo or React Native on your pc or use snack in the browser. remember to download assets from here and upload them in the assets folder if you are using expo in the browser or place them in your project if you are coding on pc. so now we would be using StyleSheet, View, Image, TouchableOpacity so remember to import them in your project. also, we would be using useState to change state and update the dice image.

import React ,{useState}from 'react';
import { StyleSheet, View,Image ,TouchableOpacity } from 'react-native';

also import all images from the assets folder..

import Img1 from './assets/1.png';
import Img2 from './assets/2.png';
import Img3 from './assets/3.png';
import Img4 from './assets/4.png';
import Img5 from './assets/5.png';
import Img6 from './assets/6.png';

now inside the function component, we just need to add an image component and wrap it with touchableOpacity.

<View style={styles.container}>
      <TouchableOpacity >
      <StatusBar style="auto" />
      <Image source={Img1}/>

      </TouchableOpacity>
    </View>

now we need to add a state to change the image so I will use the useState hook ..

  const [ImgAddress , setImgAddress]= useState(Img1);

also, time to replace the Img1 in the image source with ImgAddress. now I will use it onPress Prop of touchableOpacity to call a function diceRoll which will generate a random number and set a value of imgAddress between a number 1 to 6.

switch(randomNumber){
      case 1:
        setImgAddress(Img1);
        break;
      case 2:
        setImgAddress(Img2);
        break;
      case 3:
        setImgAddress(Img3);
        break;
      case 4:
        setImgAddress(Img4);
        break;
      case 5:
        setImgAddress(Img5);
        break;
![Black and Yellow Modern Social Media Marketing Trends Presentation.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1608462785964/ZHKSC8zOx.png)
      case 6:
        setImgAddress(Img6);
        break;
    }

If you want to view the full link here is the link to snack on the expo.

In case you don't know what react native is?

Also, If you want to try out React Native, Expo is the best tool, it provides the best react native developer experience. You can install expo on your pc or use it online in the browser.

Now, let's start with the basics... What is Hook in react? Hooks were first introduced by the React community in 2018(I started coding in 2020, what a year to start code), Hooks allow us to use state state and other react features without writing class, with functional components.

What is the 'state'? well, you might get this question in mind what is a state in React. A state is a built-in object in react that is used to contain data or information about the component. The component's state can change with time and if the state of the component changes react re-renders that Component. We can easily set how the state will change according to the user's response or any other event we set. The state component can store multiple properties. you can use this.setState() to change the state, and setState()function merges the new and the previous state.

Well Well, I Know state it a little more complicated and make code a little bit bigger... That's why Hooks we introduced in React.. They make our work easy and makes code more readable.

useState Hook allows us to use state easily.

I think that is enough for the theory part and let's open snack in our Browser,

In This example, we would be building a simple app with a Random Background color, In case You are a beginner Here is the boilerplate code for the expo.

 import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';




export default function App() {
  return (
    <View style={styles.container}>
     <Text>Hello World</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },

});

we would be using StyleSheet, Text, View, TouchableOpacity in this project so let's have an overview of them.

Text => Well you can't write text directly in React Native,In case if you want to render text in react native you need to wrap it inside text tag. have you use p or h1 tags in HTML, we can say Text is a similar component for Text in react native. View=>The most fundamental component for building a UI, View is a container that supports layout with flexbox, style, some touch handling, and accessibility controls. The view is Just like

 import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';

import React , {useState} from 'react';

  const [randomColor, setRandomColor] = useState("rgb(0,0,0)");

return (
    <>
    <View style={[styles.container,{backgroundColor: randomColor} ]}>
      <TouchableOpacity >
  <Text style={styles.text}>{randomColor}</Text>
      </TouchableOpacity>
    </View>
    </>
  );
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text:{
    fontSize:30,
    backgroundColor:"#0078d7",
    paddingVertical:10,
    paddingHorizontal:40,
    color:"#FFFFFF",
    borderRadius:15,

  }
});

const changeBackground = () => {
   let color = "rgb("+
   Math.floor(Math.random() * 256) + 
   " , " +
   Math.floor(Math.random() * 256)+
   ","+ Math.floor(Math.random() * 256) +")";
   setRandomColor(color);
  };

So javascript already has a Math. random() which returns a floating-point number a number between 0 and 1 (eg:-0.9343450435664102 ) .

console.log(Math.random());

for generating a random value between 1 to 10 you can use

Math.floor(Math.random() * (10 - 1)) + 1

things get tricky when I decided to create my own function(s) to generate random numbers.

my idea is not perfect it might generate the same numbers sometimes if you are generating numbers too fast but what decided to do was... I thought to generate a random number I should take as many numbers of variables which keep changing according to the user. so I took the sum of date, time, month, seconds, milliseconds, UTC milliseconds even with color depth and pixel depth of the user's device, the chance of getting some of these things the same two times are very very low, later I named this as dateSum. but I also decided to create another variable called timeSum , which would be the sum of hours, min, seconds, milliseconds. now also the craziness does not end no. so I took another variable megaNumber which would be dateSum % timeSum; finally, I will get my number but I can't guarantee that is it a single-digit number, double, or even more.. since I am taking too many variables here... so rest of the code to extract the number at the unit place and return it. (i wanted to use the inbuild function as little as possible here. but please comment the shortest code possible )

getrandom(number) {
    var today = new Date();
    dateSum +=
      today.getFullYear() +
      today.getMonth() +
      today.getDate() +
      today.getSeconds() +
      today.getMilliseconds() +
      today.getUTCMilliseconds() +
      screen.width +
      screen.colorDepth +
      screen.pixelDepth;

    timeSum +=
      today.getHours() +
      today.getMinutes() +
      today.getSeconds() +
      today.getMilliseconds();
    var megaNumber = dateSum % timeSum;
    var numberoflength = megaNumber.toString().length;
    var divide = 1;
    while (numberoflength - 1 > 0) {
      divide *= 10;
      numberoflength--;
    }

    var num = megaNumber % divide;
    if (num > 9) {
      while (num > 9) {
        num = num % 10;
      }
    }
    if (num == 0) {
      num = 1;
    }

    return num;
  }

so now I am able to generate random functions what I need to do is quite easy, now if want to generate random alphabets, symbols what I will do is create a simple string with all the alphabets and symbols I want and then generate a random number and return the alphabet at that index of string.

function randomBigWord() {
  const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ";

  return alphabet[Math.floor((g1.getrandom() * alphabet.length) / 10)];
}

so finally my building blocks are ready..later I just created different big numbers, small numbers, and symbol functions so my random password generator can at least make a strong password. here is what the final small project looks like. if you want to generate your next password using my project here is the link. here is the repo link if you want to deep dive into code