DEV Community: Prakhar Tandon

React: It's Not Rocket Science.

Prakhar Tandon — Thu, 01 Feb 2024 20:41:53 +0000

React is essentially just JSX and Hooks, with hundreds of tiny concepts that you must know. I’ll recommend to check out the previous post as well. In the last one, Batman was learning, now he's helping Stark as well, that's React Community, my friends lol.

So here's Part 2 for you all. Let’s jump back in.

The useState Hook

Just for the sake of it, the useState hook is one of the most commonly used hooks in React. It allows you to add state to your functional components. The useState hook takes one argument, the initial state, and returns an array with two elements: the current state value and a function to update it.
(Why an array? Because we can name the constituents whatever we want using Array destructuring)

Okay, we all know about all this, how this hook works, triggers re-renders, and persists value across renders. But there is something to remember.

If the state value is unchanged or the new value is “same” as the previous one, it’ll not update the state and will not trigger re-render.

Now you might be wondering why “same” is in quotes. Here’s why

Object Comparison in JavaScript

In JavaScript, comparing two objects can sometimes lead to unexpected results. This is because when you compare objects, JavaScript compares their references, not their contents. So even if two objects have the same properties and values, they are still considered different if they reference different memory locations.

The Object.is method is used to compare the previous and new state value.

It compares objects by their reference, not their contents. So even with Object.is, two objects with identical contents are considered different if they are not the exact same object.

let obj1 = { org: "Dualite" };
let obj2 = { org: "Dualite" };

console.log(Object.is(obj1, obj2)); // This will output false

Below is similar example with useState.

import React, { useState } from 'react';

function MyComponent() {
  const [state, setState] = useState({ name: 'Prakhar' });

  const handleClick = () => {
    // This will trigger a re-render even if the new state is
    // structurally the same as the old state, but it's a new object reference.
    setState({ name: 'Prakhar' });
  }
// checkout the sandbox at the end of post

  return (
    <div>
      <p>{state.name}</p>
      <button onClick={handleClick}>Change Name</button>
    </div>
  );
};

export default MyComponent;

But all this is fairly simple. The challenge comes in the design part, where you decide what component should have what states, local states or sending state as a prop, the nesting architecture, other props, etc. Because if not planned well, you’ll end up making dozens of states in your components.

Mostly what happens is we focus on the main business-logic problems and forget such small optimizations that can improve performance, that’s what happened with me.

I’ll share an example from work. At Dualite, we generate code for Figma designs and prototypes (with just a click, I’m so proud of this.) Okay so after the code is generated, we provide a few buttons to copy the code, as in the screenshot below.

When you click a button, the button text will just toggle to “Copied” for a few seconds then back to the original one.

So the problem was design, we had this massive “buttonTexts” state with all texts and we changed this state for any button click. Since this state was in the main “Output” component, the entire component re-renders twice when you just copy the code! (idk who came up with that sh*t design, definitely not me… lol)

// Output.tsx -> itself a large component
const [buttonTexts, setButtonTexts] = useState({
    button1: "Copy HTML",
    button2: "Copy CSS",
    button3: "Copy React",
    button4: "Copy Script"
})

// inside button's onClick
setButtonTexts({
    ...buttonTexts,
    button1: "Copied"
})

//then we revert it back to original one, using a setTimeOut

You guys realize this! it’s something most of you will never notice, thanks to the notion “If it works don’t play with it…” but this was definitely a problem. So I came up with a solution, to transfer the “text” as a state local to each button, hence only that button re-renders on click. Like this→

// Button.tsx
const Button = ({initalText, finalText}) => {
        const [text, setText] = useState( initalText );
        // setTimeout and copy logic
        return <button>{text}</button>
}

// Output.tsx

<Button initialText="Copy React" finalText="Copied!" />

Now, check out your latest React/Next projects and see how many times components are rendering. You can use console logs or "Profiler" from React Dev tools to check that out.

We'll continue the discussion over re-renders in the next part with stuff like memoizaton.

The useEffect hook

The object comparison problem from useState will also persist here since useEffect involves comparing dependency array values to trigger passed callback. Solution? restructure your code so that you have only primitives for JS to compare.

The useEffect hook is mainly used for performing side effects. Any operation that’ll technically make our component “impure”, like accessing browser APIs, DOM, etc.

Hence you might have called APIs using useEffect hook. Although that’s not a good practice anymore, instead use libraries like React Query or RTK Query for handling your APIs. They provide fantastic error handling and caching abilities out of the box.

As a bonus, let’s talk about our very own “console.log”. This cute little function helps us to log anything to the browser console. But this has some problems of its own.

First and foremost, it slows down your app a bit [check here]. And since it calls a browser API, this is a “Side Effect” and having a console.log inside your component makes it “impure” [refer to previous article], hence you shouldn’t have any console logs “directly” inside any React component, especially in production. Hence ideally these should reside inside useEffect blocks.

What we did at Dualite was we made a wrapper class around the browser console object, and when in production, the wrapper functions become empty. Here’s an example →

class Logger {
  static log(...params) {
    if (process.env.CURR_ENV !== 'production') {
      console.log(...params);
    }
  }

  static error(...params) {
    if (process.env.CURR_ENV !== 'production') {
      console.error(...params);
    }
  }

  //Add any other console method you need
}

export default Logger;

Then you can create objects of this class and use them inside your components. This approach allows you to even add some custom functionality with your logs based on your use case.

The useReducer Hook

The useReducer hook is another built-in hook that allows you to manage complex state logic in your React components. It's essentially a built-in Redux at the component level, allowing you to manage the state using actions and reducers. This hook is particularly useful when you have complex state logic that involves multiple sub-values or when the next state depends on the previous one.

Here’s a sandbox where you can play with state, re-renders, and useReducer. Do check it out.

https://stackblitz.com/edit/stackblitz-starters-lx34or?file=src%2FApp.js

Thanks, everyone! Stay in touch on Twitter @PrakharTandon29

React isn’t just JSX and a few hooks.

Prakhar Tandon — Fri, 26 Jan 2024 20:11:55 +0000

React is itself an ecosystem, a field of study right now. You can dive deeper to quench your thirst for knowledge to develop even more compelling and scalable applications. (Even Batman uses it)

In this series of articles, we’ll discuss some crucial, difficult yet ignored parts of React. [This is the first part, will continue this series.]

I used to think “I know React”. But after I started diving into this ocean, I don’t believe that anymore. I have gained much knowledge, but the React ecosystem is forever evolving, so you need to keep learning. Throughout all the articles, I’ll be adding links to some great authors and their writings about certain topics that I read & learned from. I’m not an expert, just trying to do better.

The “Key” Warning.

Let’s start with something super simple and common, the Map method. We all have used it to iterate over an object to render something to the screen in JSX. And we all have faced that little “key” warning but ignored it.

React uses something called the “Diffing Algorithm” to reconcile the DOM. When the state of a component changes, React creates a new virtual DOM and compares it with the current DOM. This comparison process, known as “diffing,” allows React to identify the minimum number of operations needed to update the DOM.

Read More about Diffing in this fantastic article from Peeyush Agarwal. [Recommended]

Understanding the Diffing Algorithm in React.js

So, React uses this “key” prop to differentiate between elements rendered using a “map”. If keys aren’t provided, the algorithm will have to re-render all map elements if anything is updated.

By default, React uses the index as the key, which most new devs do, as in the example below.

import React from 'react';

const ToolsList = () => {
  const [tools, setTools] = React.useState(["Dualite", "Slack", "Zoom", "Locofy"]);

  return (
    <ul>
      {tools.map((tool, index) => (
        <li key={index}>{tool}</li>
      ))}
    </ul>
  );
};

export default ToolsList;

In this example, we are mapping over the tools state, and for each tool, we're returning a list item. We're not using any keys. But there’s a big problem.

So, if any new element is added to the beginning of the tools state, the component will re-render, including all the JSX. Now React makes a new copy of the latest VDOM and compares it to existing DOM and finds out what changes are there. Then it just updates the parts that are changed.

But, since we added to the beginning, all the indices will change and React will consider them all as new/changed elements, hence all will be re-rendered, which isn’t good.

Some people add a random value using Math.random() which is even worse. On every re-render, that value will be recalculated, resulting in a new value every time, hence re-render.

Let’s summarise what we’ve gathered so far.

Key props are important
The key should be some value that is unique to the rendered element.
The key value should be consistent across re-renders.

This leads us to the solution, using a consistent and unique-to-element value as the key. That can mostly be some element ID you have in your data or some content from the rendered element.

import React from 'react';

const ToolsList = () => {
  const [tools, setTools] = React.useState([{id: 1, name: "Dualite"}]);

  return (
    <ul>
      {tools.map((tool) => (
        <li key={tool.id}>{tool.name}</li>
      ))}
    </ul>
  );
};

export default ToolsList;

This works perfectly.

The Purity in React.

React promotes the concept of immutability and purity, meaning your functions should always produce the same output for a given input, and they should not have side effects such as modifying variables outside their scope or some variable that existed before this component’s rendering.

This is crucial for better predictability and maintainability of your React applications. This is a concept from JavaScript functions, but React components are nothing but functions that return some JSX.

Consider the following example:

let outsideVariable = 10;

function Comp() {
  outsideVariable = 20;
  return (<p>The Value is {outsideVariable}</p>)
}

In this case, the Comp is modifying the outsideVariable, which is defined outside of the component’s scope.

The Strict Mode

This is where React's Strict Mode comes into play. Strict Mode is a tool for highlighting potential problems in an application. It does not render any visible UI. It activates additional checks and warnings for its descendants.

It can be added by using <React.StrictMode> tags around the application, but usually, it's wrapped around everything inside the src/index.js file's ReactDOM.render() method.

In Strict Mode, React performs a double-invocation of state updater functions and effect hooks for function components. This is done to ensure that the component's render output remains the same given the same state and props, irrespective of the result from previous renders.

This double-invocation helps detect such issues. It's important to note that this only happens in development mode. The double invocation isn’t performed in production.

Strict Mode also warns about deprecated methods, potential problems with legacy string ref API usage, unexpected side effects, and more. It's a powerful tool in the React ecosystem to ensure code quality and detect potential problems early in the development phase.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

In this way, React's Strict Mode helps maintain the purity of React components and ensures that side effects are minimized or eliminated, promoting predictability and maintainability.

You can read more about Strict mode from the official docs here.

https://react.dev/reference/react/StrictMode

A pure component is preferred as it can be easily cached for optimization purposes. We’ll talk about caching-related stuff later in the coming parts.

Stay tuned.
Connect -> https://twitter.com/PrakharTandon29

Integrating Analytics in a Figma Plugin - Quick Guide

Prakhar Tandon — Tue, 05 Sep 2023 06:15:11 +0000

The current best solution is Mixpanel in my opinion. Integrating Mixpanel into a Figma plugin opens up a world of possibilities for analyzing user behavior and tracking valuable data.

So, welcome everyone, it's a quick guide to setup mixpanel with figma plugins.

The Problem

Figma plugins run inside an iframe, hence have some limitations.

Original Mixpanel client will NOT work in Figma plugins UI because it uses some features like cookies, which aren't accessible to the plugin ui.

The Solution

Using a patched version of mixpanel client file will help.

Install the package npm i mixpanel-figma
In your UI file, import the package. Please note that you have to use mixpanel in the UI file only, using it in the core plugin files will result in some errors. Error example
Preferably, create a new file, analytics.ts and form a class with all useful methods.

import * as mixpanel from 'mixpanel-figma'

class Analytics {
    constructor() {
        try{
            mixpanel.init("<PROJECT_TOKEN>", {
                disable_cookie: true, //IMP
                disable_persistence: true, //IMP
            });
            console.log("Mixpanel initialized");
        } catch(e){
            console.log("Mixpanel failed to initialize");
            console.error(e);
        }
    }

    track(event: string, properties: object) {
        try{
            mixpanel.track(event, properties);
            console.log("Mixpanel event tracked");
        } catch(e){
            console.log("Mixpanel failed to track event");
            console.error(e);
        }
    }

    identify(id: string) {  // Unique user id (since no persistence)
        try{
            mixpanel.identify(id);
            console.log("Mixpanel identified");
        } catch(e){
            console.log("Mixpanel failed to identify");
            console.error(e);
        }
    }
}

export default Analytics;

Create a class instance and call methods where ever you need to add tracking.

Hope you found this useful. I spent some time figuring all this out, so summarized it in a short article, this might help other people out there!

Thanks to okotoki for the plugin compatible file, do checkout their GitHub for more details.

See you guys soon.
My Twitter

New into Linux ? Don't worry.... I got your back.

Prakhar Tandon — Sat, 02 Apr 2022 08:51:54 +0000

Heyy people !

This is an introductory article over Linux, will be coming up with some great stuff I have collected. 😁😁
Save it and get connected with me on Twitter.

Are you curious about what the hell is all this Linux stuff ?
Just tried Linux on some friends machine, or just read about how cool it is ?
You read somewhere, to be a HaCkEr you need “Kali Linux”
You have just started with it are wayy confused and can’t work productively on your Linux machine.
Or you have spent some time with Linux, but want to know more about it (This is kinda me)

Don’t worry, I got you covered !
You are at the right web-page.

The more you get to know about it, the more you love it.

Like obviously, nothing is perfect, but Linux just stole my heart (uhmm metaphoric but kinda felt good).

Okay so first things first.
(I promise I won’t bore you & will keep things simple)

Think of Linux as an Ice-Cream, The core team (Linus Torvalds ++) developed the “Linux Kernel” say the Vanilla Icecream, and various organisations, companies people made their own flavour of it.

Even you can make your own flavour of Linux, as the Kernel is Free and opensource!

So a few very popular flavours (officially called distributions or just “distro” to look cool) you might have heard of.

Ubuntu
Kali Linux
Fedora
Linux Mint etc.

There is always a debate in the Linux community about which is the best distro, but in my opinion, every distro is best in it’s own way !

Why Linux !

Just don’t think of Linux just being bare bones command line stuff only, It now has full-fledged GUI, in some cases even beating Windows!

It’s open source, means you can contribute to your very own OS!
It’s free, like completely free. No company is integrating their stuff forcing you to use them..none.
It gives you complete control ! It’s you who will decide when to update your system, NOT MICROSOFT....(I hate windows for unwanted huge updates, it just suckks up my internet).
Some distros offer quite a lot customisation.
And one of the most important one - Security !

And many more, of-course there are some downsides as well, sometimes a bit intimidating for new users, non-tech people..but organisations are working on this as well.

Setting Up

It’s actually simple, a few important points from a beginner's perspective.

If you are doing it for the first time, you should install in the Dual Boot mode with Windows, make a separate partition for the same, so that you don’t lose your data.
Install it in any secondary drive if you have.
You can also try some distros, directly from a pen-drive (That's called Live USB) without installing the entire OS !

Some Links related to installation here

The Terminal

The shortcut for the same : Ctrl + alt + t

The best thing about Linux is simply it’s Terminal !!
If you are going into Computer Science or any sort of software development, you must know Linux, it’s actually important.

Talkin about some distros that I found to be excellent for beginners

Linux Mint
Zorin OS
Elementary OS
Ubuntu

Another really cool distro I found was Garuda Linux.

You have any low spec machine?

if Yes, Linux is just life saver for you, trust me, some "LITE" distros are just amazing and can bring you slothy device back to life !

Zorin OS LITE : that's what I use as my daily driver, I just love it😍
Lubuntu : stands for Lite Ubuntu.
Elementary OS : If you want a mac-like layout, just go for it.

Here's my Zorin Lite, I customised a-lot, but it's so good.

Comment down what distro you using or are interested about!

Stay tuned with this series, Next I'll be writing about some really good commands you should know and later some really fun and cool commands I found out recently myself !

CSS Battle Target#6

Prakhar Tandon — Mon, 28 Feb 2022 06:29:47 +0000

Hey everyone👋,
CSSBattle Series is back✨!

In this article, we would be covering the Target#6 "Missing Slice" on CSSBattle

Here's the required output.

It would be more beneficial for you, if you first try the challenge on your own, then looking up the solution given below.

The best approach I could come up till now is stated below.

I learned about the conic gradient function, which can be really helpful for generating such patterns.

<p><style> 
*{
margin:25.1 33.2;
background:#E3516E}
p{
width:200px;height:200px; 
background:conic-gradient(
#FADE8B,25%,#FADE8B,25%,
#E3516E,50%,#F7F3D7,50%,
#F7F3D7,75%,#51B5A9 75%);
border-radius:50%;
}

This was my shortest solution condensing to 191 characters.

Comment down your way of doing the same.
Stay Tuned for daily updates regarding all the challenges on CSSBattle.

Want to connect?

You can connect with me here

Randomness and Cryptography

Prakhar Tandon — Sun, 20 Feb 2022 14:04:09 +0000

Hey everyone👋

I am back with The ‘Random’ series! One of my most loved and my personal favourite as well💗.
This series has overall got almost 4K+ views🤩 on various platforms like Dev Community, HashNode and TealFeed.

I will recommend you to read the previous article before reading this one👉 Is random() really random?

So let’s dive in!!!!!!

Before diving into the cryptographic aspect of randomness, we first need to understand what actually cryptography is and how it works.

So Wikipedia says

Cryptography, or cryptology, is the practice and study of techniques for secure communication in the presence of adversarial behaviour.

...And that was a very bookish type of definition.

Okay so cryptography is basically some sort of encryption for the data being transferred, that means only the sender and receiver can view the data or the message... and ideally no one else, not even ZuckerBurg (lol🤭).
And yeah its actually (kind-of) more ideal version of what WhatsApp claims to provide “END TO END ENCRYPTION”.

NOTE

Cryptography is a subject that involves a-lot of high-end mathematics, and hence, I will try to avoid those complex expressions and keep it as simple as it can be.

This is closely related to encryption, which is the act of scrambling ordinary text into what's known as cipher-text and then back again upon arrival.

Some very common examples of encryption can be:

Encryption over the internet like the SSL.
Wireless 4G LTE network uses 128-bit Advanced Encryption Standard (AES) and SNOW3G
Your Internet banking, cards, UPI payments etc.
Encryption in your computer like storing passwords, files etc.

If you have ever heard of the famous Ceaser Cipher, you will probably be able to connect with the idea of cryptography.
If you haven’t read it here.

How Encryption works

In case of encryption, a given algorithm will always transform the same plain-text into the same cipher-text if the same key is used.
Key is basically some number, that is used while encoding and decoding.

So let’s have an example.

Say we take KEY = 2 and we decided to encode our message in such a way that every English alphabet is replaced by the ‘KEY’th alphabet.
That means in our example

‘A’ to be replaced by ‘C’
‘B’ to be replaced by ‘D’ and so on.

And a simple assignment👇 !!

Comment down what is the below message based on the above description(Key=2).

Kpetgfkdng Kpfkc!
Note: Special characters remain the same in Caesar Cipher.

So this can be the simplest form of encryption.

There are two types of cryptography symmetric and asymmetric.

Symmetric Cryptography

With symmetric cryptography, the same key is used for both encryption and decryption. A sender and a recipient must already have a shared key that is known to both.
So just have a thought ... you are also sending the decryption key via the same channel, that can obviously be intervened I mean hackers are damn smart nowadays!

Although any hacker won’t be interested in reading your efforts and super fast replies towards your crush even after getting ignored, so you can relax.......emotional damage😫 (to me as well).

Asymmetric Cryptography

So yes, these security concerns lead to the development of next type that is Asymmetric.

Here, we have two different keys, PUBLIC KEY and a PRIVATE KEY.

Private key as the name suggests, is always private to whom it belongs, and his public key is available to all. Data encrypted with a public key may only be decrypted with the corresponding private key.

Let’s have an example:

Suppose you are Raju want to send a message to your friend Baburao about a great financial scheme.
So you need to have his public key, and encrypt the message using it and send it to him.

Only Baburao can decrypt the message, as only he has his private key.

And similarly any data encrypted with a private key can only be decrypted with the corresponding public key.

Let’s dive even deep with a easier real-world example.

So basically🤔, we want an encryption method, that is easy to do on one side, but difficult from the other side i.e, encrypting is easy but decryption without required information is very difficult.

Here we can use a simple yet great mathematical trick (that actually powers the modern world, not as it is though) is Prime Numbers!

Say you multiply two prime numbers 13 and 67 that would be 871. Very Simple..isn’t it.

Now have a look in the opposite direction.

You have given 871 and you need to find exact those prime numbers we used to encrypt it.

This will take you a while, I mean you will look at different possible prime combinations as so on. But now, what if I say those numbers will be something huge like 10^20 or 10^30 !!!
😯
Multiplication(encryption) would be fairly easy, but decryption will take a-lottt of time!!

Now let’s get back to the ‘Random’ Numbers.

The "key" has to be random! Randomness as it is used to generate session keys.

The more random the numbers, the more secure the cryptographic system.

And here comes the problem that we discussed in our previous article, computers cannot provide pure randomness.

Hence we use "cryptographically secure" pseudo random number generator, that are based on external entropy, the best source of which is Quantum Physics. Quantum Random Number Generators (QRNGs) are able to provide highest possible randomness till date.

In its latest report looking at quantum computing, the IBM Institute for Business Value highlights the potential quantum technologies have to become ‘a double-edged sword’; one that will expand computing power and offer opportunities for improving cyber-security, whilst exposing vulnerabilities in current encryption methods.

Hashing

There exists another similar term "HASHING". Hashing is the process of converting the information into a unique text using a hash function. The original information cannot be retrieved from the hash key by any means.
Most popular algorithm for this is SHA-256. In this, no matter how large your input data is, the resulting Hash will always be of 256 characters.

If you people are interesting in knowing about hashing more, let me know in the comments below.

Here are some resources that you can have a look at to gain more insights about Cryptography.

I found the below ones bit advanced.

Thanks for reading😌!

If you loved the article please share it😉, it takes a-lot of efforts and time making `The Random` series.

Want to connect?

You can connect with me here

Target#5 CSS Battle

Prakhar Tandon — Thu, 17 Feb 2022 17:02:31 +0000

Hey guys👋,
I am back with the CSSBattle Series✨!

This article is for Target#5 "Acid Rain" on CSSBattle

The best approach I could come up till now is stated below.

<p id="a"><p><p id="b">
<style>
body{margin:74 20;background:#0B2429;
display:flex}
p{
width:120;height:120;
background:#998235;
border-radius:50% 0 50% 50%}
#a,#b{
background:#F3AC3C;
transform:translate(60px,60px)}
#b{
transform:translate(-60px,-60px) rotate(180deg);z-index:-1

This was my shortest solution condensing to 267 characters.

Comment down your way of doing the same.
Stay Tuned for daily updates regarding all the challenges on CSSBattle.

Want to connect?

You can connect with me here

CSSBattle Target#4

Prakhar Tandon — Tue, 15 Feb 2022 11:32:56 +0000

Hey everyone👋,
I am back with the CSSBattle Series✨!
This article is for Target#4 "Ups n Downs" on CSSBattle

The best approach I could come up till now is stated below.

<p><p id="b"><p><style>
body{
display:flex;
margin:134 50;
background:#62306D}
p{
width:100;height:100;
background:#F7EC7D;
border-radius:0 0 50% 50%}
#b{
transform:rotate(180deg);
position:relative;top:-100

This was my shortest solution condensing to 196 characters.

Another approach using the CSS grids is as follows

<p><p id="b"><p><style>
body{
margin:-16 50;
background:#62306D;
display:grid;
grid-template-rows:150px 150px;
}
p{
width:100;height:100;
background:#F7EC7D;
border-radius:0 0 50% 50%;
grid-row:2;
}
#b{
transform:rotate(180deg) translateY(100px);

Comment down your way of doing the same.
Stay Tuned for daily updates regarding all the challenges on CSSBattle.

Want to connect?

You can connect with me here

Fully Responsive Documentation Page using Pure CSS.

Prakhar Tandon — Mon, 14 Feb 2022 20:09:08 +0000

Hey everyone⚡

Here's my entry for the Netlify Hackathon !

Category - Dev Tools / Productivity.

Here's the link to the project PT's CSS Documentation

Insipiration and Idea💡

Recently I was learning about responsive web-designing. So I thought of making something from scratch and with pure vanilla CSS only.

The Project👨‍💻

As it is a documentation page, it's in dark mode.
Its made with colour-combinations that are good for reading and pleasant to our eyes as well.
Website is fully responsive and works well on devices of all aspect ratios.
Used some subtle animations, made using pure CSS.

Some features that I implemented for the first time.

Used VantaJS for the Welcome Banner Background Animation.
Used custom curser, applied a svg icon on the cursor using the CSS cursor property.
The script counts the number of elements in the NavBar, and hence animations will be added automatically to a new section in the NavBar.

Do have a look at the project, and comment down your suggestions for the same.

You can connect with me here

CSSBattle Target#3

Prakhar Tandon — Sun, 13 Feb 2022 14:56:15 +0000

Hey everyone,
I am back with the CSSBattle Series!
This one is over the Target#3 "Push Button" on CSSBattle

The best approach I could come up with is stated below

<p></p>
<style>
*{background:#6592CF;margin:37.5 25 37.5 25}
body{background:#243D83}
p{
position:fixed;
border-radius:50%;
background:radial-gradient(
#EEB850 24.5px,
#243D83 25.5px);
width:150;height:150;
left:50;top:-13;
border:50px solid #6592CF;}

This one was by far, my shortest solution condensing to 237 characters.

Explanation

The p element is one with the dark blue color.
In the background colour of p , I provided a radial gradient through which the inner yellow circle was made.
And the p has a light-blue border of 50px thickness.

I was amazed to see that the top solution was just 108 characters, I wonder how they were able to do it in such small amount of code!!

Comment down your way of doing the same.
Stay Tuned for daily updates regarding all the challenges on CSSBattle.

Want to connect?

You can connect with me here

(Part 2)Some Basics of CSS that you should have a look at.

Prakhar Tandon — Fri, 11 Feb 2022 14:11:54 +0000

In this post, I will be summarising some basics of CSS, which, you need to know if you are diving into Front-end development.

This part will be covering:

The CSS Box Model
Media Queries
CSS Animations and Keyframes

The Box Model

For CSS, every HTML element is a box.CSS determines the size, position, and properties (color, background, border size, etc.) of these boxes.

It can be best understood with the following image.

Every box is composed of four parts (or areas), defined by their respective edges: the content edge, padding edge, border edge, and margin edge.

Padding - Clears an area around the content. The padding is transparent.
Margin - Clears an area outside the border. The margin is also transparent.

Positioning

Block Elements - those which usually start from a new line. Example: headings, paragraphs, divs, etc.
Inline Elements - are those which sits with the surrounding element. For example: images, spans etc.

The default layout of elements as per their type as listed above is called the Normal Flow of a document
We have position property of CSS to override the Normal flow.
This pairs with the CSS offset properties (left,right,top,bottom) to set how many pixels(or any other unit) away the element has to be positioned from where it is in the Normal Flow.
It accepts the following values.

position:relative
position:absolute
position:fixed

Border

The following properties is used for providing border to an element.

border-weight - The thickness of border
border-style - solid, dotted, double, grove etc.
border-color - Provide the colour, or the default color black is applied. And you can use border shorthand property to set all above values directly as shown below.

.class{
    width:100px;
    height:100px;
    border:10px solid #FA1298;
}

Tip

Set box-sizing to border-box, this makes styling easier.

Quoting from MDN
border-box tells the browser to account for any border and padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements.

Media Queries

They help you make your site responsive to different screen size.
The @media can be used to apply part of a style sheet based on the result of one or more media queries. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.

(Think it like an if-statement, where the conditions are based on viewport sizes.)

Example:

@media screen and (min-width: 900px) {
  div {
    width:100px;
  }
}

More Details Here.

CSS Animations and Keyframes

In order to animate an element, you need to add the Animation properties in its styling.
The actual appearance of the animation is defined by the @keyframe rule.

animation-name gives the name of the keyframe rule. animation-iteraton-count - use infinite for endless animation.
animation-timing-function This can be linear, ease, cubic-bezier() etc. Read More about all possible values here.

Example:

Want to connect?

Connect with me here.

CSSBattle Target#2

Prakhar Tandon — Fri, 11 Feb 2022 07:02:46 +0000

Hey everyone,
This article is over the Target#2 on CSSBattle

The first approach I could come up with uses linear gradient to produce the required result.

<style>
  *{background:#62374e}
body{margin:50;
background:linear-gradient(
  to right,
  #fdc57b00 50px,#62374e 50px,
  #62374e 250px,#fdc57b00 250px),
linear-gradient(
  to bottom,
  #fdc57b 50px,#62374e 50px,
  #62374e 150px,#fdc57b 150px)

This condenses down to 220 characters after removing white spaces.
If you want to learn more about linear gradients, you can refer to MDN over here.

The next approach is stated below

<p></p>
<p id="a">
</p><p style="right:0">
</p><p style="bottom:0"></p>
<style> 
*{margin:0;background:#62374e}
#a{right:0;bottom:0} 
p{margin:50;
width:50;height:50;
background:#fdc57b;
position:fixed

This one was by far, my shortest solution condensing to 192 characters.
The code is quite self explanatory.

Although the top solution was just 69 characters, I wonder how they were able to do it in such small amount of code!

Comment down your way of doing the same.
Stay Tuned for daily updates regarding all the challenges on CSSBattle.

Want to connect?

You can connect with me here

DEV Community: Prakhar Tandon

React: It's Not Rocket Science.

The useState Hook

Object Comparison in JavaScript

The useEffect hook

The useReducer Hook

React isn’t just JSX and a few hooks.

The “Key” Warning.

The Purity in React.

The Strict Mode

Integrating Analytics in a Figma Plugin - Quick Guide

The Problem

The Solution

New into Linux ? Don't worry.... I got your back.

The more you get to know about it, the more you love it.

Why Linux !

Setting Up

The Terminal

You have any low spec machine?

CSS Battle Target#6

The best approach I could come up till now is stated below.

Want to connect?

Randomness and Cryptography

Hey everyone👋

So let’s dive in!!!!!!

NOTE

How Encryption works

And a simple assignment👇 !!

Symmetric Cryptography

Asymmetric Cryptography

Let’s have an example:

Now let’s get back to the ‘Random’ Numbers.

Hashing

Here are some resources that you can have a look at to gain more insights about Cryptography.

Thanks for reading😌!

If you loved the article please share it😉, it takes a-lot of efforts and time making The Random series.

Want to connect?

Target#5 CSS Battle

The best approach I could come up till now is stated below.

Want to connect?

CSSBattle Target#4

The best approach I could come up till now is stated below.

Another approach using the CSS grids is as follows

Want to connect?

Fully Responsive Documentation Page using Pure CSS.

Hey everyone⚡

Category - Dev Tools / Productivity.

Insipiration and Idea💡

The Project👨‍💻

Some features that I implemented for the first time.

CSSBattle Target#3

The best approach I could come up with is stated below

Explanation

Want to connect?

(Part 2)Some Basics of CSS that you should have a look at.

The Box Model

Positioning

Border

Tip

Media Queries

CSS Animations and Keyframes

Want to connect?

CSSBattle Target#2

The first approach I could come up with uses linear gradient to produce the required result.

The next approach is stated below

Want to connect?

If you loved the article please share it😉, it takes a-lot of efforts and time making `The Random` series.