DEV Community: Georgey

100First - the #100daysofcode tracker!

Georgey — Wed, 12 Jan 2022 17:48:20 +0000

Overview of My Submission

The 100first is a web application to track the progress of your 100 days of code challenge, lets you share it across different handles and lets you generate a profile as proof. All you have to do is visit the website and start the challenge!

Submission Category:

Choose Your Own Adventure

Link to Code

GeoBrodas / 100first

100first is a web application intended to track the #100daysofcode challenge and generate your own unique profile with proof of completion!

100First - the #100daysofcode tracker!

🔗 Links

A web application for tracking the #100daysofcode challenge!

Features

⚡ Fast (Made with Next.js ❤)
🔗 Shareable Profile
⚙ PWA - installable as a mobile app ( coming soon..)
🌏 Cross platform
⌚ Track time spent each day

Tech Stack

Next.js
MongoDb Atlas
TailwindCSS
NextAuth
React-Awesome-Reveal
React-Icons
Next-PWA
React-Hot-Toast

Run Locally

Clone the project

  git clone https://github.com/GeoBrodas/100first

Go to the project directory

  cd my-project

Install dependencies

  npm install

Start the server

  npm run dev

Environment Variables

To run this project, you will need to add the following environment variables to your .env file

GITHUB_CLIENT_ID
GITHUB_CLIENT_SECRET
JWT_SECRET
NEXTAUTH_URL=http://localhost:3000
NEXT_PUBLIC_MONGODB_USERNAME
NEXT_PUBLIC_MONGODB_PASSWORD
NEXT_PUBLIC_MONGODB_CLUSTER
NEXT_PUBLIC_MONGODB_DATABASE
NEXT_PUBLIC_API_ROUTE_KEY

Roadmap

Complete UI makeover
Better User experience
Upgrade back-end services

Feedback

If you have any feedback, please reach out to me at geobro2310@gmail.com

View on GitHub

Live Link to Application

https://100first.vercel.app

👀 Features

Fast ( Made with Next.js ❤ )
Cross Platform support
Responsive
Installable as PWA
Simple and easy

🛠 Tech-Stack

Next.js
TailwindCSS
MongoDB Atlas
MongoDB driver
React-Hot-Toast
React-Awesome-Reveal
NextAuth.js
React-Icons

Launch Video

Screenshots

Resources

Thanks for reading!

Thanks for reading through and checking out my application. The app can be further improved with more and more open source contributors! Finally if you like my concept do give this article a ❤. Thankyou!!

One year of technical writing: Where am I now?

Georgey — Wed, 15 Sep 2021 11:17:11 +0000

Hey there developers! I know, I'm sorry! I have been very inconsistent recently, didn't post for three months straight. But duty calls, college went fast these three months. Anyways you must be wondering how come I came all of a sudden! Thanks to the Hashnode Bootcamp! I was able to relieve those old days, where I used to struggle with writing, and today I'm earning from the very thing! Come hear my story of how it all started.

- 6th July 2020 : The beginning

I bought a Udemy course on Web development after researching for hours on what I should do this Lockdown ( after wasting two months of binge watching series ). At first I wasn't sure of how I would go about but the instructor was really good at explaining stuff and soon I grew in love with coding. It gave me hopes of a career change. I knew there was more to it rather than just coding, and actually showcase my work out in the public. After that I got my ears on Open Source contribution.

- 1st October 2020 : Open Source World!

Hacktober Fest begins! I was really excited on how I would perform. I made some friends on the discord server, and soon enough, got a hang around what actually to do. Initially, I was nervous to send that pull request. Well, what's there to lose! It was a successful merge! The reply back from the maintainer just gave me enough motivation to complete the challenge.

I used to watch a lot of youtubers during this time, when I came across a video titled "Top skills you need to possess as a developer", and yeah you might have guessed it right by now, Blogging was one of them! Guess that video changed my life.

- 12th October 2021 : My first article!

Yeah and finally I did the impossible. I wrote my first article on Dev . I was always bad at writing essays back in my school days. I wouldn't even get half the allotted score. I knew my first article won't go viral, but I was off to a good start.

I started to read articles written by other developers, and later developed a taste in writing articles. Well it didn't just come by reading, I had to write more articles.

- 9th April 2021 : A boost much needed!

I got introduced to Hashnode around January through the hackathons. Soon enough, I even got a offer to work with a startup, thanks to my hackathon submission! What provoked me to write on Hashnode was the constant support I was receiving from the Hashnode staff.

Later one fine day, I learnt how to make a VSCode theme from scratch , and wrote a brief article on it describing some tricks and errors one might face otherwise. Guess what! It got featured! The feeling, I was just proud of myself! That was the confirmation I was waiting for!

- 11th May 2021 : A dream come true

I wanted to take a step forward. I started to see a plenty of articles on freeCodeCamp. In my mind right now, I wanted to build a audience on Twitter. I reached out to the editorial team, and they were happy enough to bring me on their team. What a pleasure, to work with the team that strive to provide free tutorials and content on coding. Truly a honor. In no time I released my first article on freeCodeCamp and the response was just mind-blowing. It was the first time I saw such an immense response. This was the time I realized that people were actually getting benefitted from what I write. The realization that I was helping other people, was truly a pleasure to experience.

- 23rd July 2021 : Leap of faith

I wanted to take one last jump. Something to make my parents feel proud, and make them realize that, what I'm doing is something serious and passionate about. I started to reach out multiple guest author programs. Thanks to Edidiong Asikpo who came in clutch to post an article on ways to earn money from blogging.

A week after I got back a reply! Swish it was game time. I made my mind clear, and wanted to focus on the article I was about to write for the company blog. A week after, I got paid for the work I did. The feeling? Unreal.

The journey was filled with obstacles. I had friends that said it was going to be tough. The reality? Everything's tough, nothing comes for free. You have to work until you sweat. If you love what you're doing, go for it. Listen to your heart.

My advice to upcoming writers

Every writer has their own style of writing. You may have to change it when you're representing a company blog like I did. But you can always write freely on platforms like Hashnode and Dev.
Start writing one today. It's tough to start, I have been there. But what's there to lose. If you feel your content can help even one developer, your in for the job.
Read articles from other developers. Illustration is something I learnt from reading articles written by other developers. I wasn't good at graphic design first, but there are free tools that can help you get started.
Keep your content G-Rated. There are many young developers who are going to read your articles. It might be misleading for them.
Choose unique topics. I personally don't advice to repeat the same articles again and again. Let's say TypeScript. I wouldn't advice to write about how to use it, as there are plenty of resources online, but you can write about how TypeScript helped your development process, or how important is it to add it in your job resume?

Like what I write? Support me here!

How to use Notion API with NextJS

Georgey — Sun, 30 May 2021 14:27:46 +0000

Notion API is finally here, and it's so cool. But you must be wondering what is Notion in the first case? Well, it's a powerful productivity tool for managing your daily day-to-day tasks, or maybe jotting down a lot of ideas you want to put up in your next blog? There are unlimited possibilities.

I myself found it annoying at first because I have a habit of writing down things instead of typing them out on a notepad. But turns out, it did boost my productivity moreover, it's much more noticeable when you are working with a team.

Now imagine if you could display all these data to a front-end, and update them directly on the Notion database instead of pushing some extra line of code. Your favorite tool now has its own API!

This tutorial is beginner-friendly, so don't hesitate. I assure you, the result is satisfying.

Here are the steps we'll be going through,

Create a new database on Notion.
Making a new integration.
Setting up the back-end.
Fetching data from the database.
Modifying the API call.
Displaying the data on a NextJS project.

Source code: GitHub

Create a new database on Notion.

Go ahead and make a new Notion account, if you haven't made one.

Create a new page.

There are lots of templates and different databases available. Here we will be building a project database using the kanban board. Next time whenever you complete an ongoing project, move it to the "Completed" section, and you can see the change instantly on your website.

Go ahead and add some projects, dummy or actual, which you have already completed.

Making a new integration.

Now let's connect our database to a new integration. Go to the official page of Notion API and click on 'My Integrations' in the top-right corner.

Make a new integration.

Copy the Token ID somewhere safe, we'll be using it for authentication ahead.

Now let's connect our database to the newly created integration.

Simply, head over to the new page we created, click on Share, and search for the integration we just created.

Setting up the backend.

Now, we'll make our own API, which will fetch the data through Notion API and then filter through the data, to display what is actually relevant.

Go ahead and run npm init -y.

Make sure you have the latest NodeJS version installed.

We'll need three packages,

npm install express @notionhq/client dotenv

Install nodemon, to keep the server active throughout the process.

npm install nodemon --save-dev

Go over to the package.json file, and add a new script for nodemon.

"dev" : "nodemon index.js"

Make a new .env file, and add the Token ID we created.

NOTION_TOKEN_ID=yourtokenid

Head over to the index.js file, and initialize dotenv and require the Auth Client from the Notion SDK.

const dotenv = require('dotenv').config()
const { Client } = require('@notionhq/client')

Now, we need to acquire the database ID to fetch data from the new page we created.

There are 2 ways to find this out, either you can use Postman (or any other API testers) and make a GET request to https://api.notion.com/v1/databases with the Bearer Token ( the Token ID).

Or head over to the index.js file, create a new Client

const notion = new Client({
  auth: process.env.NOTION_TOKEN,
})

Now, create an async function.

const listDatabases = async () => {
  const res = await notion.databases.list();
  console.log(res);
};

listDatabases();

Now run npm run dev, and if you check the console, you'll be able to view the same result.

Head over to the .env file, and add this database ID

NOTION_DATABASE_ID=yourdatabaseid

Now let's set up the express server,

const express = require('express');

const app = express( )

app.listen(process.env.PORT || 3000, console.log('Server is up and running!') )

Fetching data from the database.

Now let's fetch the raw data we get from the Notion API.

Start with defining a constant payload, which we will pass through the request as follows

const getProjects = async ( ) => {
    const payload = {
        path: `databases/${database_id}/query`,
        method: 'POST'
    }
}

The path is mentioned in the Notion API documentation, although we won't be needing the root URL, since we are using the SDK.

Source: Notion API documentation

From the response, we just need the results object, hence destructure the object and try to log the response onto the console.

const database_id = process.env.NOTION_DATABASE_ID

const getProjects = async ( ) => {
     const payload = {
        path: `databases/${database_id}/query`,
        method: 'POST'
    };

  const { results } = await notion.request(payload);
return results;
}

const data = await getProjects( );
console.log(data);

You should now be getting the list of cards, we made previously in JSON format as follows.

Modifying the API call.

As you have seen, the response has a lot of junk data. In this section, we'll filter through the data, and send a personalized object.

Now the objective is to get only the cards, that have the marked status "Completed".

Inside the getProjects function, let's map through the response, and return a customized object back.

const projects = results.map( page => {
    if ( page.properties.Status.select.name === 'Completed' ) {
        return {
        id: page.id,
        title: page.properties.Name.title[0].text.content,
        status: page.properties.Status.select.name,
      }
    }
} )

Now, projects will be an array of objects each containing an object with the status 'Completed'.

It will also have some null values. We can remove these by using the filter function.

This can be implemented in the return statement as follows,

return projects.filter(project => project);

Now, the final response should only contain an array of objects with the status 'Completed'.

What's left now is to set up a route in our express server.

app.get('/projects', async (req, res) => {
  const projects = await getProjects( )
  res.json(projects)
})

Displaying the data on a NextJS project.

Our API is Ready!

The final task is to display it to a front-end. Go ahead and initialize a new NextJS project. (or if you have an existing project)

npx create-next-app notion-api

Go to pages/index.js.
( or any other route you prefer, depending on the type of project your working on)

Make a new .env.local file to store the API URL. NextJS comes in-built with environment variables support.

NEXT_API=https://localhost:8000/projects

In NextJS, to receive data from the endpoint, NextJS uses an async function called getStaticProps. By using this function, NextJS will pre-render the data on the server-side on build time, rather than fetching the data when the page first loads.

export async function getStaticProps( ) {
  // get posts from our api
  const res = await fetch(process.env.NEXT_API)
  const projects = await res.json()

  return {
    props: { projects },
  }
}

We can now get hold of this array, by passing it to the default function.

export default function Home ({ projects }) {
    return (
        <ul>
            { 
                 projects && projects.map( (project, index) => <li key={project.id}>{project.title}</li>) 
             }
        </ul>
    )
}

Congrats! You're doing a great job!

You can check what I did with Notion API on my portfolio page here.

Resources

I could build this through Traversy Media's video on Youtube, so if you get stuck, check out his tutorial!

Thanks for Reading!🎉

The Notion API can be tweaked in many ways. You can integrate it with Slack, Typeform, etc. It's a really powerful tool. As a personal advice, if you haven't worked with API's before, I think Notion API is just the place. It's really simple and has a great documentation with plenty of video tutorials online. Hit me up on Twitter with your creation!

If you need the source code, do let me know in the comments section below, I'll respond as soon as possible👍

Support me 🙌

My blogs are powered by coffees, if you feel I deserve one, Thanks❤

Build a Weather Application using GraphQL and Chakra UI

Georgey — Mon, 17 May 2021 04:00:55 +0000

I was using RestAPI architecture initially and life was going good but turns out, GraphQL is much more popular than I thought.

I then went on a quest to determine why GraphQL was so much preferred over RestAPI.

My findings proved to be resourceful, and I was surprised to see the results.

Let's say you're on a project, using RestAPI. You want to fetch some data. The data that comes from the endpoint is a JSON object over which we have no control, to choose which data to be received by the front-end. What you finally get is maybe a long JSON response.

Now let's see what happens when you use GraphQL.
You get a JSON response back in the same way, but it looks like I can choose over a range of parameters available, and select the data only which is required to be displayed in the application.

In this way, your application is bound to perform much better and the response you receive is fast and selective.

After this, I was eager to learn GraphQL, and what's better than to make a project on it.

According to Web Dev Simplified a project which includes handling any API and manipulating it on your front-end is a must-have on your resume.

I thought, why not make a Weather application, since I didn't make any yet.

Let's make use of this GraphQL weather API for the project.

We'll be using ChakraUI on the front-end. So if you have not worked with ChakraUI before, this tutorial will be perfect to get started!

Here are the steps we'll be going through in this tutorial

Explore the PlayGround and set the parameters.
Setting up front-end with ChakraUI
Handling requests
Using the response to display on the front-end.
Using ChakraUI to show a loading state and enable Dark Mode

Resources to build the project

GitHub repo - https://github.com/GeoBrodas/graphql-weatherapp

Live Link - https://graphqlweather.netlify.app/

Explore the PlayGround and set the parameters

Head over to the Weather API.

You'll see an interactive playground in action.

What you see is a query that contains a bunch of parameters. Now if you run the query, you'll see a response, with resultant data for each parameter that was entered.

Now what we want is very concise. The parameters that I will be using are name, weather, temperature, and wind.

The query now after modifying should look like this

query {
  getCityByName(name: <Your_City>) {
    name
    weather {
      summary {
        title
        description
      }
      temperature {
        actual
        feelsLike
      }
      wind {
        speed
      }
    }
  }
}

In place of Your_City, enter your city or any of your choice.

Still, we won't be using all the data, but for now, go ahead and run the query.

Setting up front-end with ChakraUI

Let's now set up the front-end with Chakra UI

First Install Chakra UI using npm

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

Now set up the provider in the root file - src/index.js

import React from 'react'
import ReactDOM from 'react-dom'
import { ChakraProvider, ColorModeScript } from '@chakra-ui/react'
import App from './components/App'

ReactDOM.render(
  <ChakraProvider>
    <ColorModeScript initialColorMode="light" />
    <App />
  </ChakraProvider>,
  document.getElementById('root')
)

ColorModeScript is a component for tracking the light and dark mode, which we will be enabling towards the end.

Let's now make a new component called Dashboard.js in the src/components directory.

First, let's make an Icon button for toggling the dark mode.

import React from 'react'
import { VStack, IconButton } from '@chakra-ui/react'

export default function Dashboard ( ) {
return (
  <VSack>
    <IconButton
        aria-label="Toggle Dark Mode"
        m="8"
        size="md"
        alignSelf="flex-end"
      />
  </VStack>
)
}

Now prepare the Heading and Input fields

import React, { useState } from 'react'
import {
  Input,
  VStack,
  HStack,
  IconButton,
  Heading
} from '@chakra-ui/react'
import { FiSearch } from 'react-icons/fi'

export default function Dashboard ( ) {

  const [result, setResult] = useState('')
  const [value, setValue] = useState('')

 return (
<VStack>
      <IconButton
        aria-label="Toggle Dark Mode"
        m="8"
        size="md"
        alignSelf="flex-end"
      />
      <Heading mb="8" size="xl">
        Search your city
      </Heading>
      <HStack>
        <Input
          type="text"
          placeholder="Enter city name"
          value={result}
          onChange={(event) => setResult(event.target.value)}
        />
        <IconButton
          aria-label="Search city button"
          icon={<FiSearch />}
          onClick={() => {
            setValue(result)
            getWeather()
            //Errormessage()
          }}
        >
          Search
        </IconButton>
      </HStack>
</VStack>
)
}

We are now done with the input fields. Go ahead and console log the data from the input fields to check whether the states are behaving the way they should be. If you run into any errors, don't forget to check the GitHub repo I have shared.

Handling requests

To interact with the API, we need to install some packages to set up GraphQL in the app itself.

Install the following packages,

npm install graphql @apollo/client

Like how we wrapped ChakraProvider around our App component, we need to do the same for our App to handle graphQL requests.

Make the following changes in your App.js file inside the src/components directory.

import React from 'react'
import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client'
import Dashboard from './Dashboard'

export default function App() {
  const client = new ApolloClient({
    cache: new InMemoryCache(),
    uri: 'https://graphql-weather-api.herokuapp.com/',
  })

  return (
    <ApolloProvider client={client}>
      <Dashboard />
    </ApolloProvider>
  )
}

Here we are defining a constant, and initializing the Apollo client by feeding in 2 parameters- cache and uri. Parameter uri is the default API end-point we are using here, and cache makes sure that the app doesn't send unnecessary requests for the same data.

Now let's create a new file say Queries.js. I will create this in a separate directory src/components/graphql.

The file will contain the query, which we had earlier created in the playground.

import { gql } from '@apollo/client'

export const GET_WEATHER_QUERY = gql`
  query getCityByName($name: String!) {
    getCityByName(name: $name) {
      name
      country
      weather {
        summary {
          title
          description
        }
        temperature {
          actual
          feelsLike
        }
        wind {
          speed
        }
      }
    }
  }
`

For passing in the name of the city, we'll pass it through $name, passed through the input field.

If you have worked with MongoDB schemas, this notation will be much more familiar.

To know more about GraphQL schema types visit the documentation at
https://graphql.org/learn/schema/

Now let's make a request to the API endpoint and log the response.

Head over to the Dashboard.js file and make the following changes.

import { useLazyQuery } from '@apollo/client'
import { GET_WEATHER_QUERY } from '../graphql/Queries'

export default function Dashboard ( ) {
  const [getWeather, { loading, data, error }] = useLazyQuery(
    GET_WEATHER_QUERY,
    {
      variables: { name: value },
    }
  )

// Search button for input field
<IconButton
    aria-label="Search city button"
    icon={<FiSearch />}
    onClick={() => {
      setValue(result)
      getWeather()
      }}
 >
    Search
</IconButton>
}

When the button is clicked, two events get triggered. One is the setValue() state we defined earlier and getWeather( ) function upon which the request is sent and in turn, the response is fetched and stored in the data variable.

The value state is passed to the name property which we defined earlier in the src/components/graphql/Queries.js file.
Now if you console.log(data), you should be able to view the response sent back from the API endpoint.

Using the response to display on the front-end

The response we get back from the end-point is an object, which we got hold of previously with the data variable.

Now let's display the response to the front-end in form of a sleek table.

We'll make use of Chakra Ui's Table component here.

Refer Chakra UI's documentation if you get lost any time

https://chakra-ui.com/docs/data-display/table

Import the following components

import {
  Stack,
  Table,
  Tbody,
  Tr,
  Td,
  TableCaption,
  StackDivider,
  HStack,
  Divider,
} from '@chakra-ui/react'

// Dashboard component
<Stack>
        <Divider mt="4" mb="4" borderColor="gray.100" />
        {data && (
          <>
            <VStack
              divider={<StackDivider />}
              borderColor="gray.100"
              borderWidth="2px"
              p="4"
              borderRadius="lg"
              w="100%"
              maxW={{ base: '90vw', sm: '80vw', lg: '50vw', xl: '40vw' }}
              alignItems="stretch"
            >
              <Table variant="simple">
                <TableCaption>
                  Weather in {data.getCityByName.name} right now
                </TableCaption>

                <Tbody>
                  <Tr>
                    <Td>Temperature</Td>

                    <Td textAlign="right">
                      {Math.floor(
                        data.getCityByName.weather.temperature.actual - 273
                      ) + ' '}
                      Deg C
                    </Td>
                  </Tr>
                  <Tr>
                    <Td>Feels like</Td>
                    <Td textAlign="right">
                      {data.getCityByName.weather.summary.description}
                    </Td>
                  </Tr>
                  <Tr>
                    <Td>Wind speed (mph)</Td>

                    <Td textAlign="right">
                      {data.getCityByName.weather.wind.speed + ' '}
                    </Td>
                  </Tr>
                </Tbody>
              </Table>
            </VStack>
          </>
        )}
      </Stack>

It's similar to the HTML tables we used to do back in the old days. But most importantly we can get hold of the data coming back from the response.

Here, if you have noticed, I have converted the kelvin unit which was by default coming back from the response, to celsius using the formula - temperature in kelvin - 273 = Temperature in celsius.

I would suggest reading the Chakra UI documentation for more clarity on Chakra Ui Table component.

Your final output should look something like this -

Using ChakraUI to show a loading state and enable Dark Mode

While writing the logic for getting requests from the GraphQL server, we had destructured a variable called loading. This state can be used to determine whether the process of retrieving the request is under process or not.

We can make use of Chakra UI's spinner component here.

The logic for displaying the spinner would be as follows

import { spinner } from "@chakra-ui/react" 
// Dashboard.js component
<Stack>
        {loading && (
          <>
            <Spinner
              thickness="4px"
              speed="0.65s"
              emptyColor="gray.200"
              color="blue.500"
              size="xl"
            />
          </>
        )}
</Stack>

The and operator will ensure that the spinner component will only get displayed if the loading state is true.

Let's now enable dark-mode in our app!

Head over to the Dashboard.js file and make the toggle button for dark mode functional.

import { useColorMode } from "@chakra-ui/react
// for the icon to change on toggle - 
// if light: show Moon Icon else show Sun Icon
import { FiMoon, FiSun } from 'react-icons/fi'

const { colorMode, toggleColorMode } = useColorMode()

// toggle button for dark/light mode
<IconButton
        aria-label="Toggle Dark Mode"
        icon={colorMode === 'light' ? <FiMoon /> : <FiSun />}
        m="8"
        size="md"
        alignSelf="flex-end"
        onClick={toggleColorMode}
/>

So now, when the user clicks on the button, toggleColorMode is triggered. In turn, changes the colorMode state, hence changes the icon based on light / dark, which is implemented using the ternary operator.

Well, congrats on that great hustle! You have a Weather application ready at your disposal.

Make sure you add it to your resume!

Thanks for Reading🎉

It's great to see that you have enjoyed the article. Now let's not do the same thing. Try to add some of your own features to the app, and make it unique from the rest. Make sure you tag me on Twitter if you have built this application.

On to another blog, some other day, till then adios👋.

Support me🙌

My constant source of energy is coffee! If you feel I deserve one,

How to Set up VSCode terminal with WSL

Georgey — Sat, 15 May 2021 07:02:09 +0000

Let's all agree on the fact that, the terminal is the developer's best friend, and that's what we are most proud of. Doing all those git operations on the terminal and finally pushing your code, satisfaction like nothing else! But are you still stuck with the old Microsoft Powershell terminal which takes an eternity to load up and with that boring monochrome theme to it.

It's time to give your terminal a makeover.

Here are the topics we'll be going through this blog,

What is WSL?
Setting up WSL and Ubuntu.
Connecting WSL to the VSCode terminal.
Installing Zsh configuration and OhMyZsh.
Setting up the theme on Zsh.
Installing powerlevel10k theme. (Optional)

What is WSL?

Gone are the days, where you had to first make a partition in your hard drive, in which one part would be occupied by any Linux distro like Ubuntu, and the other occupied by Windows OS.

With Windows Subsystem for Linux (WSL), you can run a Linux environment directly on Windows, bringing in most of the command-line tools and utilities. Of course, you won't get all the features of the GUI.

The latest version is WSL 2 and is faster than the previous version. You have full control over the version, either to downgrade or upgrade, bring all developer-friendly tools as Git and NodeJS installed.

Setting up WSL and Ubuntu

WSL comes inbuilt with the Windows OS, it's just a matter of activation.

Go to your settings and search for Turn Windows Features On or Off

Search for Windows Subsystem for Linux, click the checkbox, click Ok, and restart your PC.

You should now be able to view the various Linux distros on Microsoft Store after this.

We'll download Ubuntu since it's the most popular one and widely used.

After installing you should see the ubuntu terminal on your desktop.

Run it, you may have to wait for a couple of minutes, to get the WSL set up.

Connecting WSL to VSCode terminal

After this open VSCode. You will most probably get a pop-up notification saying that WSL has been detected on your PC.

Now go to extensions and download the following extension,
(you may be redirected to this page automatically also)

After this restart VSCode one last time, and you should be able to open up a new WSL window.

Now open up the Ubuntu terminal.
NodeJS, Git comes with the installation so if you run node --version and git --version you should be able to see the resultant version.

Installing Zsh configuration and OhMyZsh

Before installing zsh, let first update the existing packages. Run the command,

sudo apt-get update
sudo apt upgrade

Now let's install zsh shell. Run the following command,

sudo apt install zsh

Zsh shell is somewhat like the Bash shell, but there are plenty of new features and support for various plugins and themes, which I'll talk about ahead.

Now let's install OhMyZsh.

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

In case, your ubuntu is missing curl, just install it using the following command

sudo apt install curl

Setting up the theme on Zsh.

OhMyZsh comes in with a lot of themes, which you can set by editing the .zshrc file.

Make sure you're in the root directory and run

code ~/.zshrc

This will open up the file in VSCode.

Go over to the line of code ZSH_THEME and set it to "random"

ZSH_THEME="random"

Now every time you open a new terminal session, a new theme will be set. If you stumble upon the one you want, you can set its name to ZSH_THEME in the .zshrc file.

Installing powerlevel10k theme (Optional)

Now, this is completely optional. If you're satisfied with your current OhMyZsh theme, you can stop right here else, if you want to try something much cooler, go ahead.

Alright! Powerlevel10k is a theme for the zsh shell. It's not all about the theme by the way. If you have noticed, I did mention "improving performance". The Microsoft Powershell is very slow, in my machine at least, takes about 15-20 seconds to load (seriously).

The question is - Is it really fast?

According to the readme file on Powerlevel10k's GitHub repository, the benchmark proves to give a prompt latency of 8.7 ms.

To install the powerlevel10k theme, simply clone the repository by running the following command

git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/themes/powerlevel10k

powerlevel10k recommends installing the 'Meslo Nerd' font for a better experience. I do recommend, as many emojis come in with the theme and can't be displayed unless you have the theme.

The fonts required are

Double click on each file and install it. This will make the font available on your system globally.

All you need to do now is, configure the font on VSCode settings.

Search for Terminal font, and set it to MesloLGS NF

You're all set now!

Go ahead and start a new terminal session, configure your settings for powerlevel10k in the terminal itself, and now it's time to flex💪.

That's all for the blog, hope you have successfully customized your terminal. If you did like it, make sure you give it a ❤. Do let me know if you're falling into any errors, follow me on Twitter where I talk about exploring new web technologies and executing them in projects.

Till then adios👋

Icon Credits to Pixel Perfect and Freepik from Flaticon

VSCode theme I'm using -
https://marketplace.visualstudio.com/items?itemName=GeoBrodas.geobrodas-theme-red-doyoubleed

Support Me 🙌

My constant source of energy is coffee, if you feel I deserve one,

Make your very own VSCode Theme and Publish🎉!

Georgey — Fri, 09 Apr 2021 14:45:19 +0000

VSCode has become the most popular Code editor and is the most ideal for Web Developers. In the Stack Overflow 2019 Developer Survey, Visual Studio Code was ranked the most popular developer environment tool, with 50.7% of 87,317 respondents reporting that they use it. The reason why VS Code is preferred is due to its customization.

The IDE is highly customizable. Why is this so? VSCode is built using Github's Electron. What's so special? Electron is a web technology that enables you to build desktop apps using just plain HTML, CSS, and Javascript, with cross-platform compatibility. How cool is that! That means every component/element that you see on the VS Code editor is customizable. VSCode themes are a craze amongst developers. Themes match the person's persona, and who would not like to make one!!

Step 1: Setting up Yo Code-Generator

Yeoman Code-generator will help you get started with your first VSCode theme starting files.

Run npm install -g yo generator-code to install the generator globally on your local device. I would recommend working on the basic Windows Powershell, as I was facing difficulties in installing it in the bash shell.
Finally, run yo code after you move to the directory you want to work on.
You will be prompted with a few options to start with. Since we want to make a new Theme, move the arrow keys down and select New Color theme.
Click Start Fresh.
Choose a Dark or Light theme as per your preference.
Enter in the name of the theme and other fields (optional).
Enable Git repository when prompted to. > Enabling a git repository will help you afterward if you want to publish changes in your theme extension and release different versions.

Step 2: Setting up a local debugging environment

It's time to get to the fun part!

If you go to your themes/theme_name.json file, you will encounter a long file with 2015 lines of code. This is your default theme for VSCode which you must have seen when you first installed VSCode.

Now press F5, which will open up the debugger window, and you should get another VSCode window opened with the default theme.

If not go to: Run -> Add Configuration. You should get a file opened up with the name launch.json, with the suggestion popup on.

Go down to VSCode Extension development -> Save the File -> Rerun the debugger ( F5 ).

It should work perfectly now! Now every change you make in your theme_name.json file will be reflected in the debugger window.

If you're wondering which theme I'm using, it's the one I made the same way. Do check it out👇
Install theme

GitHub Repo in case you get stuck

Step 3: GUI for customizing your theme

Yeah, I know right! GUI for customizing! That will just speed up our development process 10x times. Make a free account at https://themes.vscode.one/ .

Create a new theme -> Select Dark/Light -> Name your file the same you named the extension file in VSCode.

You can see a lot of CSS values here, all you got to do is select your custom color palette. One site I would highly recommend is https://colorhunt.co/ . You can select the color palette of your choice and start customizing the theme.

After customizing everything, save the theme -> Go to Your Themes -> Download. The file that gets downloaded is the theme_name.json you made in the themes/theme_name.json directory. Simply open the file you just downloaded, copy the content and paste it into your VSCode file.

Now this GUI is still under development, so there can be a lot of bugs, some of which I have faced too, most common of them to be properties not getting saved. I have mailed the developer about the bug and he's working on it! Till then you can search for the property you want to edit in the VSCode file by clicking Ctrl + F -> Search the property -> Change the hex code. The changes you make will be reflected in the VSCode debugger window.

Step 4: Creating Personal Acess tokens and setting VSCode MarketPlace.

We are almost there, all that's left is to make few changes in the package.json file in the root directory. But before that, you need to make an account at Microsoft Azure DevOps.

Head over to https://dev.azure.com
Click here👇 and head to Personal Acess tokens.

Name the token as per your choice.
Select All Accessible Organization in Organization.
Select expiration to Custom Defined.
Finally, click Show All Scopes below and look for MarketPlace.
Check the option Manage
Hit Create!

Copy the personal access token you just received as you won't be able to view it hereafter.

Next, go to https://marketplace.visualstudio.com/ and click on Publish Extensions

Head over and fill up your details. Do remember the Publisher ID you make. We will need this in the next step.

Step 5: Publishing your VSCode theme

Before that let's do a final check. Make sure the "publisher" in the package.json file matches your publisher ID

For publishing, we will use a command-line tool by visual studio code itself called vsce abbreviation for Visual Studio Code Extension.

Start a terminal session :

Install with npm install -g vsce
Now let's login to the MarketPlace account we just created with vsce login.
You will be prompted to enter the personal access token we created in Step 4, enter it. > Now you are logged in to your marketplace account. Hereafter, every time you start a new terminal session to publish your changes, don't forget to log in!
It's time to finally publish! Enter vsce package to compile the file into a .vsix file.
Enter vsce publish to launch your theme on to marketplace!🚀
Check your marketplace account you created to get details on the verification process.

Entire documentation for this step is available here.

Step 6: Publishing newer versions

If you search up your theme on the VSCode extensions, you should find your theme!
Now it's likely that the changes you made may not be perfect, and you want to publish those changes to your existing extension.

All you need to do is, make the changes and enter vsce publish <version change>
Before this make sure you're git remote repository is also up to date.
There are three types of the version you can publish :

If you have made very few changes enter vsce publish patch
If relatively more changes then enter vsce publish minor
If huge developments are made then enter vsce publish major

Additional resources:

Check out Gary Simon's video and Jessica Chan's video on YouTube.

That's all for now! It's good to see you have managed to complete all the steps.

If you did like the Blog, do give a ❤, retweet @BrodasGeo

If you are facing any errors do let me know in the comments.

Until next time, Adios🤘

Support 🙌

My blogs are fueled by coffee, buy me a one if you feel I deserve one

Credits: Icon made by FreePik from https://flaticon.com

Must-have Chrome Extensions for Web Development!

Georgey — Sun, 04 Apr 2021 07:52:43 +0000

Extensions add additional functionality to the user experience by aiding the user, without causing any extra overhead. Such extensions are usually built using basic HTML, and Javascript. As a web developer, there are many instances, where you need to know a particular font family or specific color to add to your existing project, which you had seen earlier while browsing. Enough talking, let's just get straight into it: -

ColorZilla

ColorZilla is an Advanced Eyedropper, Color Picker, Gradient Generator. Click on the extension and place it on any pixel of the page, it will be able to tell you the exact hexadecimal code of the color and automatically copying it to your clipboard, to paste it in your CSS file. It was earlier on available on Firefox but came to Chrome soon enough. Another feature of ColorZilla is that it's an Ultimate Gradient generator built in just, to your chrome browser!

Install☁

Pesticide

When people ask about the best debugger for CSS, I see comments saying border: 5px solid red is the best, as it will then show a grid overlay over the element. You don't need to do that when you have Pesticide. Pesticide does the same thing but without having you add any additional CSS property to your main file. Another feature of this extension is that it stays in the overlay mode on updating, so you can vary the CSS values using the trial and error method.

Install☁

Grammarly for Chrome

As a developer, it is very much probable that you will be typing out a lot, maybe for a blog, or even the project your making for your client. Grammarly auto-corrects any incoming mistakes you are probably going to make and provides you with how the text sounds to your readers. It also shows you an overall score of how you have written. The free version pretty much comes with the basic requirements, but I guess there's no harm getting the premium version if you are a working professional blogger.

Install☁

Web Vitals

Your project may take time to load or maybe you want to know how fast is your site. Google SEO ranking takes many of such factors into consideration like First Contentful paint is when your HTML just starts to render elements into the DOM. Web Vitals helps to track such changes on your site, and show results upon which you can remove unnecessary code from your site, to then improve the loading time.

Install☁

Font Finder

There are at times, you come across a site, and see an attractive font that you want to use in your site too. Font Finder helps you to find the exact CSS font property being used in that element and the primary font family being rendered over to the DOM. All you need to do now is search up the font family on Google Fonts or any other site.

Install☁

That's all for this blog! If you did like the blog, do give a ❤

Also if there's any other extension you would like me to add, do let me know!

If you do Retweet this blog tag me @BrodasGeo

Meet you'll in another Blog, till then Adios🙌☘

Support me 🙌

My blogs are fueled by coffee, buy me one if you feel I deserve one

Secure Password Manager: MERN stack app- Using Cryptr Encryption Package

Georgey — Thu, 04 Mar 2021 17:29:19 +0000

Introducing a Secure Password Manager🔐

A secure Password Manager which stores passwords in the encrypted form inside the database to avoid the leak of sensitive information.

Disclaimer: Please don't enter in your original passwords yet and also its an open showcase app, so whatever you enter can be seen to other people with the same link. Use it to experience the different functionalities and dynamic features of the app.

Live Link: https://main.d3qwkjcxzk7m67.amplifyapp.com/

Source Code: https://github.com/GeoBrodas/aws-password-manager/tree/main

Features:👀

Dynamic entry of data
Fluid animations
Fast loading
Cross-platform support and responsiveness.
Password encryption using aes-256-gcm algorithm.

Tech Stack and Resources⚛️

React Library
MongoDB Atlas
NodeJs
Express
Cryptr NPM module for NodeJs.
Axios for Api requests.
Material UI
Heroku for Back-end And Front-end on AWS-Amplify.

Inspiration💡

I usually store my passwords in the browser itself, but one fine day it turned out that my google browser just popped out a warning saying there was a data breach in their database and that there was an urgent need to change certain passwords because they were exposed!

And then I just got tired of changing all the passwords and wondered....what if could make my own password manager which will be encrypted in the database with fewer chances of being exposed and of course, only I will be having access to the app, and that's when I started building a secure Password manager using React and Cryptr for encryption on the server-side. So without further ado let's get started with the development journey!

Stages of the App development Journey🚶🏽‍♂️

So the first thing I divided my build procedure into 5 stages so that I could focus on each stage every day and in 5 days I would be ready with the app:-

Colour Inspiration🎨

This was really cool. I took the color palette used in the Rescue Armour from the "Iron Man: Armoured Adventures" animated series.

1. Front-End side using react for dynamic rendering. 👁️

So for the first day, I focussed on the front-end side, basically, I wanted to create cards, and delete them on button click all to be rendered dynamically. For this, we need firstly a form with two inputs that could take in the account name and password entered by the user. And then the card component which would display the entered credentials of the user. And subsequently, each card should contain a delete button. To add the card as usual I gave onChange attributes to both the inputs and used the useState Hook to store the credentials entered. To submit the information, I then created a prop that would take in one parameter and that is the credit object declared for the useState.

const [credit, setCredit] = useState({
    accName: "",
    pass: "",
  });

function handleChange(event) {
    const { name, value } = event.target;

    setCredit((prevNote) => {
      return {
        ...prevNote,
        [name]: value,
      };
    });
  }

  function submitCred(event) {
    props.onAdd(credit);
    setCredit({
      accName: "",
      pass: "",
    });
    event.preventDefault();
  }

I then passed these props to my main App.jsx file.

const [allCreds, setCred] = useState([]);

function addCred(newCred) {
    setCred((prevCreds) => {
      return [...prevCreds, newCred];
    });
  }

 <InputTextArea onAdd={addCred} />

This would store the data in the allCreds array as objects which then can be used to render all the information into card components using the Map function.

<div className="flexbox">
        {allCreds.map((cred, index) => {
          return (
            <Card
              key={index}
              id={index}
              name={cred.accName}
              pass={cred.pass}
              onDelete={deleteCred}
            />
          );
        })}
      </div>

This Card component would take in another prop called onDelete which will return the index of the card which was returned when the onClick event was triggered.
id is set by the index parameter via the Map function.

function removeCard() {
    props.onDelete(props.id);
  }

In the main App.jsx file the delete function contains a filter function that will return all the card components excluding the card component whose index was passed to the delete function.

function deleteCred(mid, id) {
setCred((prevCreds) => {
      return prevCreds.filter((cred, index) => {
        return index !== id;
      });
    });
 }

With this, we achieve all the full front-end objectives in our React-application!

2. Setting up MongoDB database and Read, Create, and delete them from the Front-End side. 🗂️

Firstly you need to have a MongoDB Atlas for hosting your database on the cloud. MongoDB has a free tier plan of 512 MB, which can be used to test early-stage apps. Then I connected my application with the MongoDB database. First thing I installed express, cors, and mongoose on the back-end, and on the front-end Axios to make API requests to the back-end. Cors will help to make a connection between our back-end and front-end.

The schema model for every request we make to the MongoDb database will be as follows:-

const CredSchema = new mongoose.Schema({
  accName: {
    type: String,
    required: true,
  },
  pass: {
    type: String,
    required: true,
  },
});

So after all the setup let's head towards the first task: - To submit our credentials from the front-end to the back-end. We can do this by making an Axios Post request when the user clicks the submit button.

Axios.post("https://localhost:3001/insert", {
      accName: newCred.accName,
      pass: newCred.pass,
    });

On the server-side, we have to make a post route to receive the API request from Axios and then use Mongoose to create the entry into the database.

app.post("/insert", async (req, res) => {
  const name = req.body.accName;
  const password = req.body.pass;
  const newCred = new CredModel({
    accName: name,
    pass: password,
  });

  try {
    newCred.save();
    res.send("Inserted Data");
  } catch (err) {
    console.log(err);
  }
});

One job is done, 2 to go! Now we have to render all the information from the database to the front-end went the page loads. For this, we can use the useEffect hook to make an Axios Get request when the page first loads. The response that the request returns can be used to then set the state of allCreds state.

useEffect(() => {
    Axios.get("https://localhost:3001/read").then(
      (response) => {
        setCred(response.data);
      }
    );
  }, []);

And finally, the tricky part to delete the card when the user clicks the delete button.
Now when the Get requests return all the data from the database, it returns a unique ID with the property name _id. Let's name the mid as in for MongoDB id. We can get hold of this mid from the map function we created to render all the credentials from the database.

Note: I don't want all the code to clutter and hence I'm removing some props to make you'll understand😊

{allCreds.map((cred, index) => {
          return (
            <Card
              key={index}
              mid={cred._id}
            />
          );
        })}

This prop can be passed to the delete function in our card component as a second parameter.

function removeCard() {
    props.onDelete(props.mid, props.id);
  }

In our App.jsx file we pass this mid prop.
In our Axios delete request, the URL here is enclosed within back-ticks instead of "". This is a really useful feature of Javascript. Note how we are passing the mid prop to the back-end by enclosing it within a ${mid}.

function deleteCred(mid, id) {
    setCred((prevCreds) => {
      return prevCreds.filter((cred, index) => {
        return index !== id;
      });
    });

    Axios.delete(`https://localhost:3001/delete/${mid}`); 
//use back-tickssss--importantttt!!!!
  }

On our server-side, we will then make a delete route and use the mongoose findByIdAndRemove method to look through the database for the entry matching with the mid and remove it instantly.

app.delete("/delete/:id", async (req, res) => {
  const id = req.params.id;
  await CredModel.findByIdAndRemove(id).exec();
  res.send("deleted item: " + id);
});

3. Encryption at server-side and decryption to show password.🔐

For encryption to store our passwords in encrypted form, we can use a simple npm package called cryptr. Now we can set this up by making a secret key, after which we can encrypt and decrypt strings by simply calling the encrypt and decrypt function provided by cryptr.

const Cryptr = require("cryptr");
const cryptr = new Cryptr("yoursecretkey");

We want the passwords to be encrypted as soon as we receive the post request from Axios on the client-side.

const name = req.body.accName;
const password = cryptr.encrypt(req.body.pass);
  const newCred = new CredModel({
    accName: name,
    pass: password,
  });

The passwords will be now encrypted in our database using the aes-256-gcm algorithm.

Now trust me, this was the toughest part in the development, that is to display the original password to the user when the user clicks the 👁 button.
Now what I did, is to make the user trigger the onClick event and pass it a function that takes two parameters and then passes that to the main App.jsx file.

function showP() {
    props.seePassword(props.pass, props.id);
  }

In my main App.jsx file, I passed this prop as a function to the card element which is in the Map function.

{allCreds.map((cred, index) => {
          return (
            <Card
              key={index}
              id={index}
              seePassword={getPassword}
              pass={cred.pass}
             />
          );
        })}

In our getPassword function, we are passing the encrypted password which can be tapped with the Map function and using Axios make a post request to the server-side to send all the decrypted passwords back to the front-end side.

//App.jsx file
function getPassword(password, id) {
    Axios.post("https://localhost:3001/showpassword", {
      password: password,
    }).then((response) => {
      setCred(
        allCreds.map((cred, index) => {
          return index === id
            ? {
                accName: response.data,
                pass: cred.pass,
              }
            : cred;
        })
      );
    });
  }

//index.js file at server-side
app.post("/showpassword", (req, res) => {
  res.send(cryptr.decrypt(req.body.password));
});

The response which we get from the server-side containing all the passwords can be run through a map function. The map function only returns the decrypted password back which gets matched with the id of the card component which the user clicked on. Using the ternary operator, we can use the setCred function from the useState to set the state of allCreds array by making the name of the credential equal to the response.

4. Making our code more leak-safe use environment variables.🛡️

This is best done using an npm package called dotenv.

Remember the secret we stored our key. Well if you're committing your code to GitHub frequently this key will easily get exposed, if anyone refers to your code changes by referring to the commits. So make sure you store your environment variables first, add to the .gitignore file, and then commit to your remote repository.

//index.js file ---Server side
//require the dotenv module at the earliest in your file.
require("dotenv").config();

const cryptr = new Cryptr(process.env.SECRET);

//.env file ----Server side
SECRET=yoursecretkey

Make sure to follow the format dotenv module specifies, that is, the constant has to be entirely capitalized with no quotes surrounding the key.

5. Deploying 🚀

I deployed my server file to Heroku. It had been a while since I had used Heroku, came across a lot of errors, but somehow managed to deploy it by seeing some videos and referring to the documentation.

I know I had to deploy the production build of React and not the development build. I had never deployed a React project ever but I directly went to the AWS Amplify console and it auto-generated the build settings for me, which was surprising for me because hosting platforms like Netlify don't and the developer has to mention the build settings. The process hardly took me 4 mins, and the app was up and running!🚀

Thank you for reading till here!

Hope you liked this blog, if yes hit a ❤

Do let me know if you want the source code for the back-end part. I didn't share it for security reasons, as there are environment variables in it and the password to the MongoDB cluster.

Hit me up or retweet this blog if you liked it.

For me building this app was a big leap because I didn't have the confidence to build a full-stack app like this.

Spline - A design tool for 3d Web Experience

Georgey — Tue, 16 Feb 2021 17:31:22 +0000

What is Spline Tool?? 🤔

Simple as it is, it's a design tool for 3d web development. What is actually unique about it is you can see your designs in real-time and yes, it uses three.js to render the 3d components. But most importantly you can now focus more on your design rather than your code. You can do pretty much everything from creating texts to making bunnies on your canvas.

In this blog, I'll try to explain Spline's UI along with how to make your first 3d web design!

What we'll make? 🔧

Click here to see it live!

Download Spline from their Home page.

Understanding Spline's UI 🤯

Home Page

On the home page, you can see your existing files out of which 4 are there for the showcase. If you want to explore more designs for your inspiration you can go to Library or visit Spline's Official Twitter account.

Click on New File to get started with your first design instantly!

The rectangle on the screen is of not much use, anyways we are going to remove it but note that this object is now positioned at the origin of the viewport with coordinates (0, 0, 0). This is our point of reference furthermore, any object we add to the viewport will be with respect to the origin which is later important if you want to maintain symmetry with your design.

Over here you can see all the objects you have added to the viewport. Feel free to rename them by double-clicking on the object name. Soon after we'll be nesting the objects as sub-components to animate the design effectively.

Then comes the toolbar with an array of options for creating shapes of various kinds ranging from a square to a Teapot. (Trust me you can actually, do check it out!😁)

The right-sidebar shows the property-panel which allows you to change the various properties related to each object on the viewport. Here you can even add different hover transitions and states which we will later come back to to make our atom spin🔁.

Interacting with the Viewport

Move the objects on the viewport using the mouse.
Click on the object once to pop up the axis of the object, assuming we all know the basic coordinate geometry we have three-axis, the x-axis, y-axis, and the z-axis. By holding on to the axis bars you can move it parallel to the respective axis.
To rotate the object on the viewport: Press Alt + left-click and move with the mouse.
To zoom-in & out use the scroll-button.
Use the keyboard keys to reach different parts of the viewport.

Making the basic Structure of Atom

Remove the white rectangle by clicking on the object.

Set the background color by changing the property on the right side-bar.

We'll be needing 4 objects for this:-

One Main-Sphere and 2 spheres of radius 1/10 that of the main sphere.
A circle of radius = radius of main-sphere + 20/30 pixels.

Make sure your main nucleus is positioned at the origin( refer to the property panel on the right side-bar). This step is important to maintain symmetry. Maintain equal dimensions over all the three-axis hereafter for all the objects on the viewport.

Create a circle that has a radius of at least +40 pixels from the main sphere and then change the ring property of the circle to 99 (refer to the right-sidebar if you are lost).

Use the axis-arrows to move the object in a particular axis and make sure the ring passes through the center of the sub-spheres.

Now it's time for defining the states of our design. There is base-state: The state from which you want to transition to that is -> State-1. Now we want the sub-spheres to rotate around the main-sphere. To achieve that, make sure our design is symmetrical, to avoid any irregularities.

Here, in this case, I had to rotate the z-axis about 180 degrees. We can achieve this step either manually or just set the rotate property to 180 for accuracy🤘.

Now we have to create an event to transition from the base-state.
To do this first -

Click the + sign to create a new event.
Select type - Start. (The transition will start as soon as the page loads)
Select the state ie: State-1
Set cycle to -No.
Set Repeat to Yes- This will continuously loop the same animation.
Set the transition to Linear. ( this will make the animation move at a constant speed)
Set the duration to 7. (more the delay slower will be the transition)
Delay to 0. ( We want it to start as soon as the page loads)

Finally, you can view your current project by moving to presentation mode!

All that is left is to add the text using the text tool.

Now you can export your file as a -

Public URL: Export as a public link which spline will host and then share it with your peers.
Web Component: Export as an HTML file for web developers like me to add to our own upcoming project.
Image/ VIdeo.

I tried to cover every single step you can start with your next project using Spline. There is much more stuff you can do with spline but the UI of Spline is so simple that it is very much self-explanatory.
If I have misinterpreted any of the steps, do feel free to comment and let me know.

Hats off to the Spline Team for making such a great application, moreover the UI is lag-free and works like butter even in low-end PCs.

Really good to see that you have read till the end.
If this blog has made you hooked to the screen, do give this Blog a ❤.
Retweet on Twitter by tagging me.
Meet you'll in another Blog some other day, till then...Adios⭐🙌.

Drum-Kit: Entertainment App using DOM and Javascript

Georgey — Sun, 07 Feb 2021 03:50:26 +0000

I created a Drum-Kit with 7 different sounds that play on mouse-click or when the user presses the specified keywords on the keyboard.

Drum-Kit

Read ahead to know the development process of this project else click the link below to see the app running live!

https://drumkit-vercelhack.vercel.app/

The Idea💡!

Well, it was pretty simple and I wanted to experiment with my Javascript and DOM skills and in the process, I understood the power of For-Loops which I will realize in the blog very soon enough.

What Can You Do With It🤔?

Play 7 different sounds based on the basic drum-kit.
Play this sounds either on mouse-click or key-press which is mentioned on each button.
The source code is available on GitHub, feel free to check it out, fork it and maybe bring a few pull requests - I'm active on GitHub.

Development Process🛠

I was in the learning phase of React and I had known nothing other than using HTML~CSS~JS. So I went forward with it but I assure you once I'm done I'll be experimenting with Next js.

Structuring the page using HTML

The first task as usual is to structure the page which included three sections at first- The header, The drum buttons, and the footer.

For the header, I used an H1 tag and then centered it using the text-align: center; property and applied it to the body tag.
Then made 7 buttons and wrapped it all in a div tag.
And then the footer.

Structuring was easy enough what was challenging was to write out the script for the interaction of the buttons.

Implementing Interaction to the buttons.

Interaction or basically hear for a button click....what comes to the mind first is adding event listeners for all the buttons for mouse-click.

Now if you think practically, adding event listeners to each button will take a lot of code. How do we do this in a better way?

For-Loops to the rescue!

Open up a for-loop, initialize i=0. Now if I add the .drum class to all my button elements and select all the elements using the query selector it will return an array containing all the buttons.

> document.querySelectorAll(".drum") 
NodeList(7) [button.w.drum, button.a.drum, button.s.drum, button.d.drum, button.j.drum, button.k.drum, button.l.drum]

Array numbering starts from zero, we can use this advantage to select all the button elements and add event listeners to them.

The next job is to play the sound. For this, I made a function called makeSound() which takes only one value and that is, the name of the button. Each button corresponds to a sound it should play. For this, I searched in for a few drum sounds and put them all in a separate folder. Now to get the name of the button, I stored the value of the innerHTML using a variable and passed it on to the function. For playing the sound I used a Switch case.

var buttonName = this.innerHTML;
makeSound(buttonName);

So that makes 7 cases in total each containing the name of the button respectively.
If the name of the button matches with the case a variable is created which takes the audio's file location.
variableName.play() - Plays the audio file and thus breaks from the loop using the break; statement.

function makeSound(key) {
  switch (key) {
    case "w":
      var tom1 = new Audio('sounds/tom-1.mp3');
      tom1.play();
      break;

    case "a":
      var tom2 = new Audio("sounds/tom-2.mp3");
      tom2.play();
      break;

    case "s":
      var tom3 = new Audio("sounds/tom-3.mp3");
      tom3.play();
      break;

    case "d":
      var tom4 = new Audio("sounds/tom-4.mp3");
      tom4.play();
      break;

    case "j":
      var crash = new Audio("sounds/crash.mp3");
      crash.play();
      break;

    case "k":
      var kickBass = new Audio("sounds/kick-bass.mp3");
      kickBass.play();
      break;

    case "l":
      var snare = new Audio("sounds/snare.mp3");
      snare.play();
      break;

    default:
      console.log(this.innerHTML);
      break;
  }
}

So playing the drum sound on button click is done, now let's move on to playing the drum sound when the user presses the key. For this we again use our friendly Event Listener to hear for a keydown event which returns the above array when the event occurs:

> KeyboardEvent {isTrusted: true, key: "c", code: "KeyC", location: 0, ctrlKey:false, .....}

We just need to grab hold of the key value for our switch case to validate to play the respective sound.

Now another thing I added is to give the user feedback to make assure that he has clicked the button.

For this, I made a class in my CSS file with the name .pressed and made a new function with the name makeAnimation().
This function also takes in one value and that's the name of the button. For each button, it has a corresponding className attached to it. Inside this function, we create a new variable that stores the className of the pressed button and uses concatenation to add the passed button name to the query selector, and then finally add the newly created class .pressed which changes the opacity when clicked using className.classList.add("pressed").
After this we also need to remove this class after a short period of time and luckily we can use the setTimeout() function to set a timeout of 100ms, quick enough to remove the className.

function makeAnimation(currentKey){
  var activeButton = document.querySelector("." + currentKey);
  activeButton.classList.add("pressed");

  setTimeout(function(){
    activeButton.classList.remove("pressed");
  }, 100);
}

With this, I achieved all the main goals of my project and I'm ready to deploy to vercel which was the fun part of all.

Deployment🛰

All I had to do was firstly make a new Vercel account.
Link my GitHub account to it.
Select the repository which contained all my code.
Select the directory which contained my index.html file in my case it was the root directory so I left it as default.
And then finally deploy it!🚀

Thanks for reading till here, if there's any correction to be made let me know in the comments section, and If this article did help you make sure you give it a ❤.

What went wrong in my Hackathon Submission?!

Georgey — Sun, 17 Jan 2021 03:26:36 +0000

First of all Congratulations to all the winners and runners-up of the Digitial Ocean X Dev Hackathon, but participants no need to get demotivated, be proud of your creation just as I am!😊

What did I build?

I built a personal site for the category Personal Site/Portfolio using TailWind CSS and AOS library for scroll animations.

I then started to plan a prototype of my site using Figma on which I included sections for :-

Landing
About Me
What services I can provide
Languages and Frameworks I use
And finally the social handle links.

After giving the basic structure to my site I began customizing the page using TailWind CSS color pallete which was super easy.

At the end what was finally left was making the site responsive. As a matter of fact TailWind CSS provides really easy pseudo classes to add responsive tag just like BootStrap but the difference is that TailWind by default uses Mobile First Breakpoint System.

What I realised while doing this was, I used the CSS property position: absolute; on most of my elements, without even adding the position: relative; to its parent element! Which actually did screw up my layout because each element soon had their own independent position and yeah if you have guessed it right, adding responsiveness was hectic because the positon of each element had to be tweeked. Thats the major error I did! If you look up my code on Github I have it for all my elements in there!

With that, Yes!.. I learnt a lesson and I would pledge to write a cleaner code next time 😁 anddd I just want to share some tips to ease the process of adding responsiveness to your project.

Use relative units more like rem, vh, em, vw. (Do feel free to correct me if I'm wrong😸)
Try giving sensible class names to the div elements so that it will be easier to add media queries at last.
Yeah and dont mess up your code like how I did basically stick to the fundamentals always and understand what your code does; like here as I said, your parent element has to be relative for your child element ot be positioned inside the element with the absolute property.
Set a meta tag for all your pages.
And yeah Try learning to use libraries like BootStrap to fasten the process!

Finally do let me know in the comments if any newbies out there found this useful and...I'll be putting up this same article on CodeNewbies.

Till then Adios🖖!
Follow me on Twitter
and Dev

DO Hackathon Submission: Personal Site/Portfolio

Georgey — Sat, 09 Jan 2021 04:07:21 +0000

What I built

I built a new version of my personal site hence I named it v2.0 in the header. It had been a year since I learnt Web development and there's a lot more for me to get my hands on. This hackathon motivated me to learn a new CSS library, hence giving a upgrade to my old site.

Category Submission:

Personal Site/ Portfolio

App Link

Click here

Screenshots

Description

So before starting the project I had made up my mind to learn a new framework else it had to be my mentor who would teach me. So at first I was little hesitant to start. I was getting certain thoughts like would I be able to implement it properly or would it become a disaster at last but eventually it weared off and I started working on the project v2.0 of my personal site.

Link to Source Code

Source code on GitHub

Permissive License

MIT License

Background

So basically I had almost completed my Web Development Bootcamp Course when I came to know about the hackathon, and so I wanted to test my skills I have learnt hence I thought this would be a good chance not only to apply my skills but to learn a new library too which would speed up my work. I was hooked up in my academics but this hackathon gave me a reason to come back to coding and revive.
I had already created a personal site but there was very less functionality to it, less interaction, and I had hardly used BootStrap in it and therefore voila!

How I built it

First of all Thanks a lot to Digital Ocean for giving this opportunity and a reason for me to skip my academics because I love coding and my friends think I'm weird but I don't care because there's thousands like me and I have interacted with many too.

Well there are 3 new features I learnt and I added to my site and thats :-

I used TailWind CSS library.
I implemented a Light and Dark mode to the website which toggles according to the OS theme of the users device.
I added a AOS library by Michal Sajnóg

Additional Resources/Info

Tailwind CSS Library
AOS Library by Michal Sajnóg.