All About Tech

Posts

Showing posts from May, 2021

Simple Css Loaders

CSS Loaders Webpack by itself only knows javascript, so when we want it to pack any other type of resources like .css or .scss or .ts, webpack needs help in order to compile and bundle those non-javascript types of resources. Loaders are the node-based utilities built for webpack to help webpack to compile and/or transform a given type of resource that can be bundled as a javascript module. css-loader is the npm module that would help webpack to collect CSS from all the css files referenced in your application and put it into a string. And then style-loader would take the output string generated by the above css-loader and put it inside the <style> tags in the index.html file. OUTPUT: Lets have a Code: HTML: <div class="page"> <header class="header"> <h1 class="header-title">Loaders</h1> <p class="header-subtitle">single html element css animation</p> </header> <main class="...

Random Colour Generator Using JavaScript

Randomized color Using JavaScript Did you ever feel tired of writing long random colors for different <div> or <span> just to test something simple? So here is a simple solution. The following snippet generates a random color in hexadecimal format. var randomColor = '#'+Math.floor(Math.random()*16777215).toString(16); //generates a random color -> #56eec7 That's it!🥳 You can place this in a function and call the function everytime you need a random color. function generateRandomColor() { var randomColor = '#'+Math.floor(Math.random()*16777215).toString(16); return randomColor; //random color will be freshly served } document.body.style.backgroundColor = generateRandomColor() // -> #e1ac94 someDiv.style.color = generateRandomColor() // -> #34c7aa 1.Why the number 16777215? Well this needs a little bit of Math. We all know that the colors range from #000000 (pitch black) to #ffffff (pure w...

How we can do Fun with Python!!

SMS Automation Using Python: So Now we Need to have Any Python Compiler like Pycharm, Annaconnda, Atom, Jupyter, sypder or and specially I like the most VS code. After that we need to install the required Libraries to perform such task 1. selenium 2. Time 3. Install the extension of chrome, type in web browser Chromedriver. Here, we are going to learn a simple SMS bomber trick (for fun and educational purpose). Selenium is a free tool for automated testing across different browsers. In this tutorial, we will learn to send automatically number of spam SMS for given number of frequency and interval. Let's have a code of that: from selenium import webdriver import time # create instance of Chrome webdriver browser = webdriver.Chrome() # set the frequency of sms frequency = 10 # target mobile number, change it to victim's number and # also ensure that it's registered on flipkart mobile_number ="1234567890" for i in range(frequency): browser.get('https://w...

Create ur own Dynamic Progress Bar using JS

Frist of all let understand. what is progress bar? T he progress bar uses basic markup. There is: a container with computed classes based on the current step: progressClasses. a static background track: progress_ bg. a loop that iterates through each step and applies stepClasses based on the current step. You will get Preview something like this: Lets Have a look on code: HTML: <!DOCTYPE html> <html> <head> <title></title> <link href="https://fonts.googleapis.com/css?family=Maven+Pro&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <style> *{ font-family: 'Maven Pro', sans-serif; } #myprogress{ width: 80%; background: grey; margin: auto; } #mybar{ ...