Photo by Hal Gatewood on Unsplash

Lets say you wanted to add a slide animation to your website. You want to show up some content when a button is clicked or hovered or while we are loading the page.

animation-video

The options we have using pure CSS + Vanilla javascript are to use the keyframes animation or using transition along with transition-duration property in CSS.

In this article , I will describe the things I came across and what I learnt . Almost all examples show how to transition on hover and on click . I needed the animation to run on load. So , I…


Hi there ! I am writing a small post to show how we can create and host multiple projects using Digital Ocean droplet .

What we are trying to achieve

Purchasing domain <<demo>>.com and then be able to host 2 projects on digital ocean droplet and configuring cloudflare and nginx so that we can

  1. access project1 on the main domain , i.e <<demo>>.com
  2. access project2 using subdomain like project2.demo.com

Highlevel view of what I used :

I used porkbun — to purchase domain , cloudflare’s free tier to manage the domains and digital ocean to host the web projects and configure nginx to route the incoming requests to the right websites.

Step 1 : Domain

If you…


I have used Everything to search for files in Windows . It is incredibly quick . It is one tool I would always include for when I do a clean install on a laptop .

More details here — https://www.voidtools.com/

I needed the same on Ubuntu . It is so slow to get to files for which you remember the part of the path or name . Fsearch is the alternative which we can use on Ubuntu . I tried it earlier and somehow could not get it to work.

But things have improved and it is very easy now…


I followed the steps to prep the new droplet created in digital ocean and you hit the username@IP: Permission denied (publickey) !

Photo by Sarah Kilian on Unsplash

I chose the 18.04 Ubuntu to be installed in my droplet, followed the steps in here to configure it . The issue came with not being able to login with the new user created.

Solution: At this point , I am able to login to the droplet using ssh root user.

I logged in and changed the file /etc/ssh/sshd_config . There is already an entry PasswordAuthentication no .


grep -irlZ ‘ProductsGrid’ * — exclude-dir={node_modules,dist} | xargs -0 grep -l “product_ids”

The i is for case-insensitive search.

Excluding certain folders using exclude-dir.

This command searches for files which contain both the words ‘ProductsGrid’ and ‘product_ids’ .


This will call multiple promises at one go .It will not wait for one value and then call another value.

const fruits = [‘peach’,’pineapple’,’strawberry’]const smoothie = fruits.map( async v => {

const f = await getFruit(v);
return f;
})
— — — — — — — — — — — — — —Async await with for loop
This will stop at every item in the iteration.
const fruitLoop = async() =>
{
for (const f of fruits)
{
let l = await getFruit(f);
console.log(l);
}
}
— — — — — — — — — — —…

This is a simple logo making tutorial .At the end you will be able to make a custom logo for your website . You will also be exposed to set of free tools which you can explore to do more richer designs.

Photo by William Iven on Unsplash

This post is good for anyone who wants to make a logo .No prior experience is needed with tools and programming ! We are going to make a logo like below..


This blog post is to give an idea of how I learnt javascript and my opinion as to the best way to learn javascript ecosystem in 2019.

Achieve your targets using FreeCodeCamp

What I want to additionally achieve: To get more people to take advantage of FreecodeCamp curriculum. Get more people to support this wonderful organization by donating monthly. If there is anyone whom I was able to influence to do either of the above, please leave a comment today or at a later date. Thank you.


This article is a quick intro to CSS Grid. We will be making a calculator using it.

This article is good for developers who have a basic understanding of CSS and for those who want to learn the newer tools CSS offers to style pages.

I liked CSS Grid area templates from the very start! The examples all over the web can look complicated, but trust me, one attempt at using them and you will love them and use them in many of your projects.

This thought started after wanting to make something similar to the image below.

Calculator

Note that…


This article will help you create a github style graph to represent purchase data from your application. With simple modification, you can represent user activity etc in this format.

Well what is Github style ?

Image is worth a thousand words!

Increase in shades of green if more contributions done by user.Darkest green being the best.

Now,lets get a similar graph which shows the orders made through year 2017.Show simple details as to purchases when hovered on a cell meant for a specific day.

How is it helpful ?

  1. At one glance get an idea of the orders.Show color based on the total order amount per day.
  2. You would get an…

Deepika Gunda

I am a Software Engineer n Tech Enthusiast . You will see me publishing articles on Javascript ,NodeJS and misc.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store