Forem: Satvik

How to show the user it's location in your website

Satvik — Fri, 03 Jun 2022 06:51:14 +0000

No we are not building a location tracker to spy on the users , but why don't we generously show them where they live ?

We can make use of OpenLayers and Geoapify to display a map with the city of the user in focus .

OpenLayers is a JS library makes it easy to put a dynamic map in any web page , is completely free, Open Source JavaScript, released under the 2-clause BSD License (also known as the FreeBSD).

Geoapify API makes it extremely easy for us to find the user's location i.e. approximate latitude and longitude and the user's city , country and other info.

The The IP Geolocation API provided by Geoapify detects the user's location by IP address and then returns a .json file with all the details that could be found out from just the I.P. address of the user like it's country of residence , currency , phone code, postal code , language etc.This has some better use cases like determining which language the visitor speaks, which currency to use in payment forms and more data.
But we shall keep it simple and pretend that we track our users .

To use this API we need to register as a user on the Geoapify website , they have a free tier available which has enough feature to build our application . After registering with whatever method suits you ,

Go to the Dashboard
Create a new project and name it whatever you want
On the left side bar , go to the API keys section
Choose the type of App as IP Geolocation API as this is the API we will be using
Generate a API key

Inside our JavaScript, we will use the fetch function to get a json response which we can use to gather the data we need .

Note : In the url of the fetch function below replace YOUR_API_KEY with out your actual key

The following code has a simple fetch function with the GET request to the REST API i.e. IP Geolocation API


fetch("https://api.geoapify.com/v1/ipinfo?&apiKey=YOUR_API_KEY", requestOptions)
  .then(
    (response) =>
      response.json()
  )
  .then((data) => {
    console.log(data)
  })
  .catch(err => console.log(err))

var requestOptions = {
  method: 'GET',
};

Note that just for now we are just console logging the entire .json data in the console , but later we will actually use the data and put it on a map .
So if you check the console you should see that the API with an object with lot many properties.

console

If you want to view the return JSON data clearly , install any JSON formatter browser extension open this link in the web browser and you would clearly be able to see every data piece nicely formatted in a readable way .
https://api.geoapify.com/v1/ipinfo?&apiKey=YOUR_API_KEY

The API shows my current location with all the other details as you can see some of which I have blurred.

Now after we have got this data , we need to put this on a map and we will use OpenLayers to make our job easier
If you see the quick start guide here. They have shown us a working example with a HTML file . We need to include this JS library using CDN like so :

<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.14.1/build/ol.js"></script>
<link rel="stylesheet"href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.14.1/css/ol.css" type="text/css">

We have include the JS library and it's stylesheet files as well.

Now inside our JavaScript file , we can create a new map like so:
This is exactly what is mentioned in the Quick start guide

var map = new ol.Map({

    target: 'map',
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ],
    view: new ol.View({
      center: ol.proj.fromLonLat([37.41, 8.82]),
      zoom: 4
    })
  });

Note that the latitude and longitude for the location on this map is harcoded as (37.41, 8.82) which is not what we want .

Let's put this piece of code above in a function and call it coordinates()

Now back to our fetch function instead of console logging our entire data , lets pass all this data to the coordinates function so that it can be mapped .


fetch("https://api.geoapify.com/v1/ipinfo?&apiKey=18e9b1ba1eaf4731b0347ede6565a8a9", requestOptions)
  .then(
    (response) =>
      response.json()
  )
  .then((data) => {

    coordinates(data) // passing in the data 

  })
  .catch(err => console.log(err))

var requestOptions = {
  method: 'GET',
};

function coordinates(data) { // data is passed as a parameter 
  var map = new ol.Map({

    target: 'map',
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ],
    view: new ol.View({
      center: ol.proj.fromLonLat([37.41, 8.82]),
      zoom: 12
    })
  });
}

Now to replace the hardcoded lat , long values with the latitude and longitude values returned by the Geoapify API after it detects the user location .

Note the latitude and longitude values

In the above image as you can see the API returned lots of data that we can use , but if you notice carefully it also returns the latitude and longitude values inside the location property of the object.

To access it we can type : data.location.longitude to get the user's longitude .

So now in our coordinates function we can replace the hardcoded values with :

function coordinates(data) {
  var map = new ol.Map({

    target: 'map', // div map is targeted in html
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ],
    view: new ol.View({
      center: ol.proj.fromLonLat([data.location.longitude, data.location.latitude]), // hard coded values replaced 
      zoom: 12 // how zoomed in the map is 
// the user can also change the zoom level of the map with the inbuilt buttons in the map by OpenLayers
    })
  });
}

Now as you can see our map is displayed in a div tag with id or class 'map' so you can create it like so :

<div id="map" class="map"></div>

Now add some basic CSS to the map div using external stylesheets file

.map {
  height: 650px;
  width: 100%;
}

And now whenever any user opens up your website , it will show the user's approximate location through this map .

I went ahead and added the other details like I.P. and country name in the form of text on the page.

final result

Live Demo : here

How to make a rickroll website

Satvik — Sun, 03 Apr 2022 14:04:06 +0000

video autoplayer using vanilla Javascript and CSS

Description :

It might seem easy to make this kinds of a website , just embed a video from YouTube and play it when the user comes to our website but the problem is

Problem :

To autoplay a video on the web on any device , the audio of the video must be muted . This is the autoplay policy followed by almost all browsers

The Autoplay Policy launched in Chrome 66 for audio and video elements and is effectively blocking roughly half of unwanted media autoplays in Chrome. For the Web Audio API, the autoplay policy launched in Chrome 71. This affects web games, some WebRTC applications, and other web pages using audio features.

New behaviors

As you may have noticed, web browsers are moving towards stricter autoplay policies in order to improve the user experience, minimize incentives to install ad blockers, and reduce data consumption on expensive and/or constrained networks. These changes are intended to give greater control of playback to users and to benefit publishers with legitimate use cases.

Chrome's autoplay policies are simple but this generally holds true for all browsers:

Muted autoplay is always allowed.
Autoplay with sound is allowed if:
The user has interacted with the domain (click, tap, etc.).
On desktop, the user's Media Engagement Index threshold has been crossed, meaning the user has previously played video with sound.
The user has added the site to their home screen on mobile or installed the PWA on desktop.
Top frames can delegate autoplay permission to their iframes to allow autoplay with sound. This make it really difficult to catch people offguard and rickrolling them as soon as they open up our website

Solution :

Did you catch the 3rd point ? Why don't we just fake an interaction ?

tl;dr-> just ask for cookies and play the rick roll when they clicks "accept cookies" lol .

A workaround to this also used by many other rick roll generators is asking the user for cookies , when the user clicks on "accept cookies" they are actually clicking on a button that will play the rickroll

This way we have the permission of the user to play the video without having their permission

Firstly I have created a simple sort of a landing page that asks the user for permission with the accept button

My "landing page" asking for cookies is overlayed over the rick roll video so that it's hidden



<div class="cookies" id="permission">
        <p>This website uses cookies to provide necessary website functionality, improve your experience and analyze our traffic.
           <br>By using our website, you agree to our Privacy Policy and our Cookies Policy.
        </p>

We need to include the script for the YouTube API using



<script id="iframe-demo" src="https://www.youtube.com/iframe_api"></script>****

I have added an event listener listening for a click from the user on the button which then unmutes the previously paused video and the video starts playing when the button is clicked



// button     
cookieConsent.addEventListener('click', () => {
        player.seekTo(0); //  player = new YT.Player('video-frame');
        player.unMute();    
    });

The accept cookies button is actually connect to the hide() function in my JavaScript file which hides the overlay on click of the button



<button onclick="hide()" id="accept">Accept</button></center>

I have also disabled any control over the video , you cannot really take off the pause and YouTube logo from the embed but again there is a workaround:

I have taken the iframe embed and in my css and made it so that the pointer cannot do anything over the video



.ytplayer{
 pointer-events: none;
}

final result (satvik.ninja/website)

How to make neumorphic elements in your website

Satvik — Mon, 28 Mar 2022 10:55:06 +0000

Neumorphism was a design trend where elements of the design appear to extrude out of the background while they still seem to be attached to it (They do not appear to float).

uxdesign.cc

Like Glassmorphism neumorphism is easily achievable using CSS.

Create a div in your .html file

<div class="box neumorphic-shadows">Neumorphism is cool</div>

In your CSS Set a background color for your page , neumorphism usually works best with dark backgrounds but it is upto preference

body { 
    background-color: #1b1e27; 
  }

#1b1e27

Now for the element
The only important thing to remember here is that color of your foreground element should be the same as your background otherwise it is just not neumorphism anymore

.box{
    background: #1b1e27;

    // shaping the card 
    height: 5em;
    width: 20em;
    align-items: center;
    border-radius: 50px;
    display: flex;
    height: 200px;
    justify-content: center;
    margin-left: 35%;
    margin-top: 15%;
    padding: 10px 20px;  

    // font
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px;
    color: rgb(255, 255, 255); // color of the font 

  }

Now to achieve the real effect we need to add box shadows

.neumorphic-shadows{
    box-shadow:  5px 5px 31px #111319,
    -5px -5px 21px #373d5081;
  }

the shadow value with positive pixel distance (5px) controls the shadows
the shadow value with negative pixel distance (-5px) controls the highlights

You can change the signs and values to change the direction and distance of the shadows/highlights respectively

final result

Footnotes:
To make your job a lot easier you can use neumorphism.io, it's a great website that generates CSS code for the neumorphic effect . You can tweak the effect according to your liking and get the CSS code generated for it.

Type in the Notepad using Java

Satvik — Fri, 25 Mar 2022 13:57:58 +0000

Let's make a java program that will open up notepad and type some text in it .

You will have to import 3 libraries which we would be using :

import java.awt.*;
import java.awt.event.KeyEvent;
import java.io.IOException;

Create a class and add a main method , in this program we will have to throw 3 exceptions

IOException
InterruptedException
AWTException

We will write this line to open up notepad

Runtime.getRuntime().exec("notepad.exe");

We will use Thread.sleep to create a delay in out typewriter so that notepad opens up and out typewriter doesn't type anywhere else

Thread.sleep(2000);

Then we will use the Robot Class to create the typewriter effect

r.keyPress(KeyEvent.VK_H);

The line above display the letter H on the notepad .Like this we can print any letter to form words and sentences.

We can then use Thread.sleep to have a pause and create a natural typing effect

Thread.sleep(500); // 0.5 seconds

Thread.sleep() takes argument in milliseconds

Using this you can display multiple letters in the notepad

import java.awt.*;
import java.awt.event.KeyEvent;
import java.io.IOException;

public class notepadType{
public static void main (String[]args) throws IOException, InterruptedException, AWTException{
Runtime.getRuntime().exec("notepad.exe");

Thread.sleep(2000); // 2 seconds
Robot r=new Robot();
r.keyPress(KeyEvent.VK_H);
Thread.sleep(500);
r.keyPress(KeyEvent.VK_E);
Thread.sleep(500);
r.keyPress(KeyEvent.VK_L);
Thread.sleep(500);
r.keyPress(KeyEvent.VK_L);
Thread.sleep(500);
r.keyPress(KeyEvent.VK_O);
Thread.sleep(500);
r.keyPress(KeyEvent.VK_SPACE); // displays a whitespace
Thread.sleep(500);
r.keyPress(KeyEvent.VK_W);
Thread.sleep(500);
r.keyPress(KeyEvent.VK_O);
Thread.sleep(500);
r.keyPress(KeyEvent.VK_R);
Thread.sleep(500);
r.keyPress(KeyEvent.VK_L);
Thread.sleep(500);
r.keyPress(KeyEvent.VK_D);
// hello world 
    }
}

Footnotes:

How to achieve simple glassmorphism effect in your website

Satvik — Sat, 19 Mar 2022 09:07:31 +0000

A simple example with cards

To make a very simple blurry glass like effect we can make use of some pretty simple css to add this styling .

Glassmorphism makes use of background blur with bright colors and some transparency and a very subtle border

4 lines of CSS is all it takes :

 backdrop-filter: blur(20px) saturate(200%);
    -webkit-backdrop-filter: blur(20px) saturate(200%);
    background-color: rgba(0, 0, 0, 0.44);
    border: 1px solid rgba(255, 255, 255, 0.125);

We blur the background and set the saturation to 200% to make the colors of the background pop

Here I have also put a border , as I would be using this style on a card to be displayed on my website

So I will use a subtle border to seperate it from the background
This is what it looks like in my website

satvik.ninja

You can change the look of this effect by changing the values of blur and saturation according to your taste

How to fetch images from an API

Satvik — Thu, 17 Mar 2022 16:00:46 +0000

Making a website that displays random cat images

API's are really helpful in performing designed function built around sharing data and executing pre-defined processes

We can quickly fetch images from an API for our website . In our case we will be fetching cat images from a popular public API and will display it on a website

API I'll be using : docs.catapi.com
Get your API Key from - thecatapi.com

Load api.thecatapi.com/v1/images/search
Get the first Array object of the JSON response
Load it’s .url

function fetchPics(){
    let catsImgDiv = document.querySelector(".catsImgDiv")
    catsImgDiv.innerHTML='';
    fetch("https://api.thecatapi.com/v1/images/search") .then(
    (response)=>
     response.json()
    )
}

To use this in a website we add :

A button which fetches a new image when it's clicked
An empty div to show the image
in the .html file

<button class="btn btn-primary my-4 generate_btn">Generate</button>
<div class="catsImgDiv"></div>

Final JavaScript iteration :

function fetchPics(){
    let catsImgDiv = document.querySelector(".catsImgDiv")
    catsImgDiv.innerHTML='';
    fetch("https://api.thecatapi.com/v1/images/search") .then(
    (response)=>
     response.json()
    )
    .then ((data) => {
        let catsImgUrl=data[0].url;
        let catImgEl = document.createElement("img")
        catImgEl.setAttribute('src',`${catsImgUrl}`)
        catImgEl.classList.add("showcase")
        let catsImgDiv = document.querySelector(".catsImgDiv")
        catsImgDiv.appendChild(catImgEl);
    })
    .catch (err=>console.log(err))
}

You can also look up on how to setup a website with github pages here : Github Pages

Website : Live
Github : Github