DEV Community: Akshaya Venkatesh

Web Engineer Intern at Adobe - Interview

Akshaya Venkatesh — Wed, 10 May 2023 01:18:47 +0000

In this post I have covered the application timeline and the interview experience for the position of Web Engineer Intern at Adobe.
It is important to know that Adobe does not have a common interview format for all SDE/Dev intern roles - it is completely team dependent. During my internship, I met interns who had faced 5 rounds and also some who had faced just 2. The process that I have described below may not be the same for everyone.

Application Timeline and some stats:

I started applying for internships even before the start of my masters program, i.e, from July for the following year's summer intake. During the initial months of the academic year I gave just 1 or 2 applications per week and then applied more rigorously starting from September. In total, I applied to 160+ companies for summer internships - of which I was invited to take online assessments/telephonic rounds by 14 companies (including Meta). Of these, I made it to the final rounds of 4 (FormLabs, TikTok, Microsoft and of course, Adobe)

With Adobe, I applied for the Web Engineer Intern role around the last week of October. The application was supported by a referral.

Interview:

November 5th: I took an Online Assessment on HackerRank. I was asked to solve 1 LeetCode medium question in a span of 45 minutes.
On November 10th I received an invite to attend the First Round. The following week, the interview was scheduled and I met with the Engineering Manager. The round involved a thorough discussion of my resume and questions around my skillset and interests.
On November 19th I was moved to the next step with an invite to attend 3 back-to-back technical rounds.
On Dec 3 I gave 3 technical rounds:
- Round 1: DSA (LeetCode easy/medium) questions to be solved in JavaScript. I solved it quickly so the interviewer followed up with another DSA question that involved logic with event listeners and DOM manipulation. There were also follow-up questions on JS fundamentals.
- Round 2: React Deep-dive - I was asked questions around fundamentals of React, how React works under the hood, why React and React architecture.
- Round 3: Testing frameworks and behavioral questions.
On Dec 3: The same day, the recruiter working through the process held an impromptu follow up round over the phone. It was much like a behavioral round. At the end of the call, I was given verbal confirmation of the offer.
On Dec 6: I received the offer letter.

What I loved about the process:

For both First round and the Technical rounds - I emailed the recruiter asking them what to expect from the interview. Both times, they promptly got back to me and gave me a gist of what to expect. It really helped me align my preparation in the right direction.
Before the technical round - I received an email that highlighted who the interviewers were along with a link to their respective LinkedIn profiles. I was initially intimidated when I saw all three of them had at least 8 years of experience in the industry with one of them having an experience of 15 years in Adobe alone. However, I was also equally thrilled knowing I'll be able to interact 1:1 with these distinguished individuals. It was clear that I will get to learn a lot irrespective of how the interview went.
The questions in each of the technical rounds were extremely relevant to the role itself. There were no random LeetCode graph/tree problems asked. The questions were around things I now use in the job day to day.
Overall, the process was very seamless and I had a positive experience. The people I interacted with were amazing. Communication was clear and prompt. At the end of each round they all answered my questions with great clarity. These were some of the highlights.

If you made it this far, find me on twitter where I post a lot about my journey as a Software Engineer. Please stay tuned for my upcoming posts. I will be sharing some of the questions I asked my interviewers, about interview prep, explaining how my internship went and how I landed SDE 2 at Adobe.

Creating Patterns with CSS simplified.

Akshaya Venkatesh — Sun, 18 Jul 2021 17:58:28 +0000

Did you know you can create really cool patterns using just the CSS background properties? This blog will get you started on how to approach patterns with CSS and you'll be able to create this 👇 simple bookmark pattern at the end of this article.

Before we begin, let's understand why its worth knowing how to create patterns with CSS:

Your webpage will load considerably faster when you use a pattern instead of an image
Patterns unlike images never have sizing issues as the sizes are completely under your control
You can create more than just basic shapes with a good understanding of backgrounds.

Here are a few places, a CSS background can be preferred over an image:

Use a pattern as a background instead of an image when the foreground is going to have a lot of content and little unused space
Banner on your Portfolio site: once again, saves load time and shows off your css skills.
When your site supports themes(light/dark modes etc): Using a background pattern over background image will make it more theme-friendly because you simply change the colours in the pattern to match your theme.

Let's dive in!

To create our pattern (or any pattern) we need to understand the following 4 background properties:

background-image: This property, although commonly used for assigning images, is where we will use gradient functions to create our patterns.

background-image: linear-gradient(180deg, black, pink);

linear-gradient() - this commonly used gradient method will let us specify a direction(in degrees, radians, or simply words) and a bunch of colours which it will arrange in the form of a gradient. For instance,

background-image: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);

gives us the following gradient,

For patterns we often use multiple gradients in combinations. While using more than one gradient(simply separated by commas) we use the shorthand background property instead of background-image. For instance, the code below -

background: linear-gradient(0deg, blanchedalmond 33.3%, transparent 33.3%), 
            linear-gradient(0deg, pink 66.6%, transparent 66.6%), 
            lightblue

creates the following background:

Few important things to note here

We must understand that the background property stacks the gradients in a bottom up fashion. In the above example - first the entire box is filled with light blue(bottom most value) above which we have a pink box(2/3rd of the total height) and above all a blanchedalmond box(1/3rd of the total height).
To achieve sharp or absolute color transitions (unlike the blended colors in the above Rainbow) we specify the exact percentage of space a color occupies.
We use the color value transparent if we do not wish to include a specific color. We create the effect that the pink box only occupies 2/3rd the height we simply say pink 66.6%, transparent 66.6% i.e., pink upto 66.6% and transparent from
The direction in which the degrees are evaluated is always clockwise.

background-position: This property lets us move around the gradients within the containing element. It takes values in CSS units for the x and y axes as follows

background-position: 10px 20px;

background-size: This property lets us define the size within which the pattern is to be created. This is a complex CSS property as it can take multiple types of values. However, with respect to this blog we will need only to understand the following type.

background-size: 60px 60px;

Here we have simply defined the width and height of the background i.e. the background is now contained to a 60*60 box in the element.

background-repeat: This property controls how the background gets repeated in the container. Since we are attempting to create a symmetrical pattern we will ensure the value reads:

background-repeat: repeat;

To understand them all better look at the following snippet:

background-image: linear-gradient(180deg, black, pink );
background-size: 60px 60px;
background-position: 60px 60px;
background-repeat: no-repeat;

Since we have given a no-repeat we will see a single box of dimension 60*60px with a gradient at a position of 60px from the top-left of the container as follows.

To construct the bookmark pattern let's break it down to simple shapes first

We first set the background to be white. Assign a background-size, for example lets take 40px*40px. To create each triangle we will be using the linear-gradient() function
Triangle 1:

background: linear-gradient(120deg, black 50%, transparent 50%), 
            white;

Triangle 2:

background: linear-gradient(60deg, black 50%, transparent 50%), 
            white;

Put together we have

background:  linear-gradient(120deg, black 50%, transparent 50%), 
             linear-gradient(60deg, transparent 49%, black 50%), 
             white
background-size: 40px 40px;

The above code creates 40*40 boxes with 2 triangles placed one above the other but the background looks like this 👇 due to background repeat.

To create the bookmark effect we add horizontal and vertical white stripes as separators i.e.,

The white stripes can be created with the following code:

background: linear-gradient(0deg, white 15%, transparent 15%) 0 6px,
            linear-gradient(90deg, white 50%, transparent 50%) -10px 0

Note that here, we have specified a background position for each of the gradient right after the function. Now we put it all together as follows,

background: linear-gradient(0deg, white 15%, transparent 15%) 0 6px, 
            linear-gradient(90deg, white 50%, transparent 50%) -10px 0, 
            linear-gradient(120deg, black 50%, transparent 50%), 
            linear-gradient(60deg, transparent 49%, black 50%), 
            white;
background-size: 40px 40px;

This gives us the complete pattern. Codepen demo below 👇

I was inspired to learn CSS patterns after visiting Lea Verou's Pattern Gallery. Check it out for some amazing patterns 🤩.
I was further inspired to create my own pattern gallery which is live here and the code can be found on github. Thanks for reading. I'd love to see the patterns that you create. Please feel free to share them with me on twitter or in the comments below!

6 practical ways to keep procrastination at bay

Akshaya Venkatesh — Sun, 11 Jul 2021 18:15:58 +0000

This blog talks about 6 simple yet effective way to minimise procrastination.

Procrastinating simply put, means that you're putting off something important in order to do something fun. It does not apply just to work such as academics. You could be "procrastinating" anything - from simple things like catching up with friends or cleaning your room - to much more serious things like applying for a new job or doing a project that will really help your career.

I found myself doing this a lot and sought to understand the decisions that revolve around procrastination. This led me to find the video that changed my life -
Inside the mind of a master procrastinator by Tim Urban.

I strongly recommend this video to anyone who is reading this. It will help you understand why you do things or take decisions a certain way. After understanding what I was doing wrong I decided to make some changes to my approach to getting work done. I've listed them below hoping it will be of help.

1. Don't have a "Plan B"

Having a plan B is built-in when you're a procrastinator. Whenever you make plans you keep in mind, there is an easier and less effective alternative in case you fail or not do it at all. So lose your plan B. You will not procrastinate if there is no backup plan.

2. Don't wait for the perfect moment

Have you done this? 👉 "Its 9:45 now, hmm... let me start at 10:00" (Why? simply because 10:00 is a round figure - THIS IS AN EXCUSE!!) This dangerous thought process has been my biggest enemy and every procrastinator is guilty of doing it on a daily basis. Waiting for the right moment is basically giving an excuse for not starting something. Avoid this thought(not easy but surely possible). Start then and there.

3. Pixellate the big picture and reward yourself

Split the big picture into tiny pieces. When you are trying to get a big task done - you don't know where to start, you have a lot of questions or you simply feel nervous about the outcomes, then re-watching a Netflix show may seem like a better option. However, breaking it down and finishing of one piece at a time will get rid of the feeling of overwhelm.
Put down a checklist( - use an app or pen and paper to actually jot it down) the multiple small piece. Every time you complete a tiny task, scored it off of the list. This will give you a sense of accomplishment that'll drive you to the finish.

It can get tedious and boring when you need to finish work that's gonna take multiple hours straight. In such cases, use the split-up technique and reward yourself each time you finish a couple of subtasks or a target you've set for yourself.

4. Tell some one about your plans

This technique may sound unconventional but it is my personal favourite because it works especially when there's something new you want to try but just can't find the motivation to do or tend to forget about it.

Tell someone about what you're gonna do, every time they follow up you will be reminded and you will actually end up doing it.
Talk to or read about someone who has already done what you are about to try - their journey will inspire you to do it.

5. Imagine the right outcome

Sometimes, the outcome of your work or task may make you nervous enough to stop you from trying it. This technique comes in handy for such cases. Take the time to imagine that you have done it, you have accomplished your goal. Tell the right outcome to yourself - "I wrote a blog on my new app and it was very well received." instead of "What if no one reads my blog?" because one mediocre blog is better than no blog at all.

6. Change your environment

Sometimes simply moving to a different environment can make you more productive and help you get work done. As someone who is used to sitting at a work desk, I find that sitting outside my house with fresh air helps me finish work faster.

This concludes my take on keeping procrastination at bay. Please do share your thoughts and any ideas that have helped you minimise procrastination (I would love to try them out) or leave feedback in the comments section. You can also find me on Twitter. Thanks for reading!

The Ultimate Guide to Center Align - CSS

Akshaya Venkatesh — Sun, 04 Jul 2021 06:28:23 +0000

This blog will discuss 6 techniques (in order of adherence to best practices)that can be used to center align an element and when to use each one. Here, center align refers to placing the element at the horizontal and vertical center of its parent.

.center class represents the element to be center aligned
.parent represents its parent element.

1. Using Transform

When to use:

When the width and height of the element are not known
Card like modals where there are multiple child elements with one focussed element at the center.

The idea is to use absolute positioning with top and left - 50% and then applying negative transform. The value used in top and left are resolved based on dimensions of the parent while the value in the translate method is resolved based on the dimensions of the element itself.

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

2. Using Flex

When to use:

When there is one or more elements to be centered.
When the child elements are dynamic and their sizes are not known.
When there are a row of items that need to be centered like in a footer

The idea is to make the parent container a flexbox and center the element along the horizontal and vertical directions using flex properties as follows.

.parent {
    display: flex;
    justify-content: center; 
    align-items: center;
}

When there are multiple elements that need to be stacked one above the other such that the stack is at the center, we simply add the following line:

flex-direction: column;

3. Using Negative Margin

When to use:

When the height and width of the element are known.

The idea is to again use absolute positioning similar to the transform technique but we apply a negative margin of half the element's width and height instead of translate.

$w: 200px; // SCSS Variable
$h: 100px; // SCSS Variable
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -50px -100px; // Negative margin of half the 
                        //  width and height

}

To make this code more generic, we use the calc() property as follows:

(#{$h} / 2) - Half the height
(#{$h} / 2) * -1) - Negated value of half the height
Which gives us:

margin: calc((#{$h} / 2) * -1) calc((#{$w} / 2) * -1);

4. Using Grid

I recently discovered this cool technique from css-tricks.com

When to use:

When there is only one child element that needs to be centered.

The idea is to create a grid container and set the margin to auto. In a non-grid container, when margin is set to auto, margin-top and bottom take the value 0.

However, in a grid container, margin-top and bottom is assigned the available space evenly, thus centering the element.

.parent {
  display: grid;
}
.center {
  margin: auto;
}

Another way to center using grid, pointed out by Jacob:

.parent {
  display: grid;
  place-items: center;
}

5. Using Padding

This technique is not recommended for center-align but it works.

When to use:

When the height of the parent element is known/fixed.
When the height of the center element is flexible.

The idea is to set a fixed vertical padding for the container with fixed height is known and allow the child element to occupy max height and margin auto.

.parent {
  height: 600px; //Fixed height
  padding: 200px 0; //Fixed vertical padding
}
.center{
  margin: 0 auto;
  height: 100%; // Child takes max height
}

6. Using Table-cell

This technique is very rarely used today and may raise eyebrows. However, it does work.

The idea is to force the parent to behave like a table cell using display. We then use vertical align property for vertical centering and margin auto for horizontal centering.

.parent {
  display: table-cell;
  vertical-align: middle;
}
.center{
  margin: auto;
}

This concludes the 6 ways to center align elements.

Bonus - Horizontal Centering

Horizontal centering is often used in title styles and footers in combination with an even padding or margin.

Using text-align

When to use:

When the center element is text content / inline-* type element
Inline-* includes inline, inline-block, inline-flex, inline-table etc.

.parent {
   text-align: center;
}

It can also center block type child elements but it is not a recommended practice.

Using margin

When to use:

When the center element is a block element

.center {
    margin: 0 auto;
}

Here is a working Codepen demo of all the above techniques.

TL; DR: Here is a concise cheatsheet for your reference. Please feel free to download and share.

Let me know in the comments if there are any more techniques that you have used/explored. Also, follow me on Twitter for more dev content!

Chrome Extensions 101

Akshaya Venkatesh — Sun, 27 Jun 2021 16:47:16 +0000

This blog will discuss how to setup, build and run your own Chrome extension. At the end, you will be able to create a simple Day Count Down extension that will display the number of days left to a particular date.

Lets go!

Chrome Extension Terminologies

manifest.json

JSON file that tells Chrome what the extension does, what permissions it needs and the files it will use.

Background script

A script that runs independent of and parallel to the web page the user is on. It is used for state management and always has only one active instance.

Content script

A script that runs in the context of the web page that the user is on. It can access, read and/or modify the DOM of the page that the user visits.

Setup

Create a folder for your extension, say Count-Down, and in it a file called manifest.json. In the file, add the manifest version, name of the extension, a description and the version of the extension to begin with. The file should now look similar to this.



{
  "manifest_version": 3,
  "name": "Count Down Days",
  "version": "1.0",
  "description": "Takes a date input and displays the number of days left until the given date"
}

Files and Folder structure

Now we go about creating the rest of the elements.

A file called background.js in the root folder. This will be our background script.
A folder called content in the root folder which will hold:
1. a HTML file called popup.html. This file will contain the markup for the extension's dropdown menu
2. a JS file called popup.js.This is our content script
3. a CSS file called popup.css to style the elements in our dropdown
A folder for images (extension icon and others - optional)

Link the files to the manifest.json

We will be referencing the background script and the HTML file in the manifest.json as follows.



"background": {
    "service_worker": "background.js"
  },
"action": {
    "default_popup": "content/popup.html",
    "default_icon": {
        "16": "images/icon16.png",   // optional
        "24": "images/icon24.png",   // optional
        "32": "images/icon32.png"    // optional
     }
  }

The icon is initially set by the default_icon key in the action entry in the manifest.json file. This key takes a dictionary that contains size to image paths. If the icon is not given Chrome automatically assigns an icon.

The manifest.json should now look like this:



{
  "manifest_version": 3,
  "name": "Count Down Days",
  "version": "0.1",
  "description": "Takes a date input and displays the day count left to the given date ",
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "content/popup.html",
    "default_icon": {
      "16": "/images/timer.png",
      "128": "/images/timer.png",
      "48": "/images/timer.png",
      "256": "/images/timer.png"
  }
  }
}

Running the Extension

Open the Chrome browser and hit the following URL:


 chrome://extensions

In the top right corner you should see a toggle button titled Developer mode.
Check the toggle.
Now you should see a set of options to load, pack and update extension.
Select the Load unpacked option.
From the file system, now select the root folder of the extension.
The extension will have loaded in the browser.

Giving permissions to the Extension

For this extension, we will be using the following permissions:

activeTab - gives access to the currently active Chrome tab. In our case we need this permission as we are adding to the current active tab.
scripting - allows running scripts in the context of the current web page. We use this permission to inject listener events that perform the date operations.
storage - allows the storage of objects in Chrome. We will use this permission to store a date string in Chrome storage.

Add the following line in the manifest.json

"permissions": ["activeTab" ,"storage", "scripting"]

Adding the logic

Open the background.js and add the following code:



let date = "08 15 2021";

chrome.runtime.onInstalled.addListener(() => {

    chrome.storage.sync.set({ date });

    console.log("Default Date set to Aug 15, 2021");

});

chrome.runtime is an API that lets the extension retrieve the background page, listen and respond to events.
What we are essentially doing here is using the API to save a default date String in the Chrome storage. This value can be accessed by our content script later. We have also added a log statement which we will use for testing.

In the popup.html we add two buttons (one for displaying number of days left and the other to accept a new Date). We refer our styles - popup.css and content script popup.js in this file as follows.



<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="popup.css" />
  </head>

  <body>
    <div class="buttons">
      <button id="showDays">
        <img class="img-icon" src="../images/timer.png" alt="Sand Clock" />
      </button>
      <button id="changeDate">
        <img class="img-icon" src="../images/change-date.png" alt="Change Date Icon" />
      </button>
    </div>
    <script src="popup.js"></script>
  </body>
</html>

I have used image icons for the buttons. Assets are available in the Github link below. Let's add some basic styles in the popup.css as follows.



button {
  height: 30px;
  width: 30px;
  outline: none;
  margin: 10px;
  border: none;
  border-radius: 2px;
}
button img {
  width: 100%;
  height: auto;
}

These styles cannot be accessed by the current page. Once this is saved, we go back to the browser, in the chrome://extensions tab we find our extension. Each extension tile will have a refresh icon at the bottom-right corner.
Refresh the extension and hit the service worker hyperlink to view the logs of our service-worker, i.e., background.js. In this console we will now be able to see our Default date log.

Next step is to view the extension's dropdown. Open out a different tab, in the top-right corner of Chrome the new extension will now be a clickable option. On click of the same, we will be able to see the dropdown menu as follows.

Note: The Chrome extension CANNOT be opened on chrome:// URL.

The buttons will not do anything yet so let's add the listeners that will perform the magic.

In the popup.js add the following two functions



// Content script follows
function showDaysLeft() {
    // get the date string from Chrome storage
    chrome.storage.sync.get("date", ({ date }) => {

        // create a new div that will be appended to the body
        let daysElement = document.createElement("div");
        // adding styles to the new div
        daysElement.style.cssText = "position: absolute; color: black; top: 30px; left: 50%;  transform: translateX(-50%); background-color: pink; z-index: 99999; padding: 1rem; border-radius: 10px; box-shadow: 3px 3px 6px #00000060";
        //  Date.parse converts Date string to milliseconds
        // To get the number of days left we get the difference in milliseconds and divide by 86400000 (milliseconds in a day)
        noOfDaysLeft = parseInt((Date.parse(new Date(date)) - Date.parse(new Date())) / (86400000));
        let content = '';
        if (noOfDaysLeft < 0) {
            content = document.createTextNode("Deadline has already passed.Please set a new one. :D");


            alert(daysElement);
        } else {
            content = document.createTextNode(noOfDaysLeft + " days until go time! B)");

        }
        // Append the text node to the div
        daysElement.appendChild(content);
        // Append the div to the body tag
        document.body.appendChild(daysElement);
        setTimeout(() => {
            document.body.removeChild(daysElement)
        }, 3000);
    });

}

function resetDate() {
    let newDate = " ";
    let daysElement = document.createElement("div");
    daysElement.style.cssText = "position: absolute; color: black; top: 30px; left: 50%; transform: translateX(-50%); background-color: pink; z-index: 99999; padding: 1rem; border-radius: 10px; box-shadow: 3px 3px 6px #00000060";

    // Get the date string input through window.prompt
    newDate = window.prompt("Enter date in the dd/mm/yyyy format");
    dateArray = newDate.split("/");

    dateString = dateArray[1] + " " + dateArray[0] + " " + dateArray[2];

    newDate = Date.parse(new Date(dateString));
    let content = '';
    // Check if the format is right 
    if (newDate) {
        noOfDaysLeft = parseInt((Date.parse(new Date(newDate)) - Date.parse(new Date())) / (86400000));
        if (noOfDaysLeft < 0) {
            content = document.createTextNode("Are you time travelling to the past? I am not ready for you yet :D");


        } else {
            content = document.createTextNode("New date saved! \n" + noOfDaysLeft + " days until go time! B)");

            // save the new date
            chrome.storage.sync.set({ "date": newDate });
        }

    } else {
        content = document.createTextNode("Enter a valid date - date/month/full-year");

    }
    daysElement.appendChild(content);
    document.body.appendChild(daysElement);
    setTimeout(() => {
        document.body.removeChild(daysElement)
    }, 3000);


}

The function logic is explained in the comments. Now we cannot directly attach the listeners to the buttons. We make use of the chrome.scripting API to inject the listeners into the current page as follows:



// Initialize buttons

let showDays = document.getElementById("showDays");
let changeDate = document.getElementById("changeDate");


// When the button is clicked, inject showDaysLeft and resetDate into current page

showDays.addEventListener("click", async () => {

    let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });

    chrome.scripting.executeScript({

        target: { tabId: tab.id },

        function: showDaysLeft,

    });

});
changeDate.addEventListener("click", async () => {

    let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });

    chrome.scripting.executeScript({

        target: { tabId: tab.id },

        function: resetDate,

    });

});

Note: Apart from the injected listeners other functions/variables cannot be directly run.

And we are done!😎 Now the extension is ready to be tested. Go back to the browser, refresh the extension and test the extension on a fresh tab. The output should be similar to the gif below.

Hope this was helpful. The complete project is available on Github Please reach me on Twitter in case of questions or let me know in the comments below.✌️

5 Image transitions using just Filters!

Akshaya Venkatesh — Wed, 12 May 2021 07:42:52 +0000

In this blog, I will be demonstrating 5 different filter functions that you can use with image transitions to make your site super cool. Let's dive right in!

The filter property is used to create graphic effects like color variations, inversions, etc on elements. They're primarily used to enhance backgrounds, images, and borders. Here is the general syntax.

filter: <filter-function> [<filter-function>]* | none

For all images, we simply apply a filter style as follows to create the magic.

img {
    filter: opacity(0.5); // change the function here.
    transition: filter 0.5s ease-in;
} 

img:hover {
    filter: none;
}

Let's look at 5 simple yet really cool functions that can make image transitions interesting.

1. OPACITY

filter: opacity(50%) | opacity (1)

The opacity function controls the transparency of the element. Values range from 0% (making the element completely transparent) to 100% (leaves the image unaltered). Its only advantage over the "opacity" property is that it offers better performance through hardware acceleration on some browsers.

2. SEPIA

filter: sepia(80%) | sepia(1)

The sepia function applies a sepia (reddish-brown) tone to the image. Fun fact, sepia toning was originally done to protect images from fading and pollutants.
A sepia tone of 0% leaves the image unaltered and 100% turns the image to completely sepia.

3. BLUR

filter: blur(2px) | blur(<length>)

The blur function applies a blur effect to the image. It takes an input length which is basically the number of screen pixels that blend into each other. The higher the length, the greater the blur. A value of 0px leaves the image unaltered.

4. GRAYSCALE

filter: grayscale(0%) | grayscale(100%)

The grayscale function takes in a % value and applies a black and white effect to the image with 0% leaving the image unaltered and 100% creating a complete grayscale.

5. BRIGHTNESS

filter: brightness(60%) | brightness(200%)

The brightness function controls the brightness of the image with a value of 100% leaving the image unaltered. Values below 100 reduce the brightness and those above 100 raise the brightness.

There are several other filter functions that can enhance images. They can be found here. A complete working example can be found in the following Codepen.

The Single Div trend & Making the React Logo.

Akshaya Venkatesh — Mon, 08 Feb 2021 14:13:21 +0000

What to expect?
This blog explains why creating single div art is a popular trend and how to build the React JS logo with just one div and pure CSS.

What is the "Single Div" hubbub all about?
Let us consider a basic example - creating a series of different colored dots. I could just create an array of elements and assign different colors to them but if I am given a condition that I may use only one div element - I will choose to use the background property (among other ways) to achieve the same. This is the main reason for the popularity of this trend. It challenges the developer to harness or exploit many CSS properties that would not be used otherwise.

Breaking down the React logo

The logo is pretty straightforward - there are three elliptical orbits with a nucleus at their center in what I like to call "React Blue" (hex code - #61dafb).

HTML
As promised, HTML will have nothing but a <div /> tag.

CSS
Orbit shape
For the orbit's elliptical shape, we first create a class that can style all three orbits. It simply uses the border properties to define the shape.

.logo-orbit { height: 100px; width: 300px; border-radius: 50%; border: 10px solid $react-blue; }
This can style any div to look something like this 👇

The 3 orbits
For the central orbit, select the div tag and apply the .logo-orbit class. I have used Scss and extended the class name in the styles.
div{ @extend .logo-orbit; }
For those not familiar with Scss, please replace @extend .logo-orbit with styles in the .logo-orbit class.

Next, we use the :before and :after pseudo-selectors. These are conventionally used for inserting content but here we use them for the other two orbits as follows.
:before, :after { @extend .logo-orbit; content: ""; position: absolute; top: -10px; left: -10px; box-sizing: inherit; }.

It is worth noting that although box-sizing is an inherited property, the pseudo-elements do not inherit them and require an explicit inheritance.

Next, we position the logo with rotation as follows.

&:before { transform: rotate(60deg); } &:after { transform: rotate(-60deg); }
Now we are only left with the nucleus.

Nucleus
We use radial-gradient with the background property applied to the div for creating the nucleus as follows.

background: radial-gradient(circle, $react-blue 24px, transparent 25px);
With that the logo is done. The complete code along with the turn animation can be found in the following Codepen.

There is so much that can be done with just a single div. Be sure to checkout a.singlediv.com by Lynn Fisher who started this trend. Let me know about your single-div creations in the comments or reach me on Twitter. Thank you for reading!

Scroll snapping simplified

Akshaya Venkatesh — Sun, 10 Jan 2021 06:19:03 +0000

Have you ever wondered how carousels work in a browser? By default, when you stop scrolling, the elements on the screen remain stationary, but in a slider or carousel, the screen always snaps to a frame and freezes until you slide once again. This is primarily achieved with a simple CSS concept called Scroll Snapping. This blog will simplify and explain 2 properties that achieve scroll snapping. Keep scrolling to find out (pun intended). :p

Scroll snapping can be defined as a way of enabling the browser to control scrolling and force a particular element completely into or out of a viewport/container (sort of like a magnet).

It can be done with the help of 2 CSS properties that go hand-in-hand.

scroll-snap-type : x/y mandatory/proximity none(default);
scroll-snap-align: start end/center none;

Scroll snap type is used to control the physics or animation used to snap an item by specifying the axis or direction and behaviour. It is usually applied to the parent element or the element which contains a group of elements that need to scroll. The direction value is straightforward i.e. the value x or y snaps the element in the axis mentioned. however, behaviour is slightly different.

The default behavior is none and is the same as default scrolling.
Upon using the mandatory behaviour - on scroll - the browser always forces the bigger element, i.e., the element with more than 50% of its width or height scrolled into view, to move completely into the container as demonstrated in the gif above.
When used, proximity behavior snaps the scrolling element into the container only if the element is close to the edge of the snap container(known as the snap position). If the user scrolls manually to a position that is not in a range close to the snap position, the default scroll behaviour is observed.

In addition to axes, x and y scroll-snapping can also be done in "block" and "inline" axes which snap in the block or inline axes respectively.

Next, the scroll-snap-align property controls the placement of the element in the parent container. It is usually used when the parent element or the container has an explicit scroll-snap-type. It takes the values "start", "end" or "center". The effect of this property is significant especially when the child elements do not occupy the entire snap container or snap port. Consider the following scenario: the child elements inside a scroll port take up 80% of the height of a scroll snapping parent with scroll-snap-type: y mandatory. In this case, using scroll-snap-align with the value -

start will position the child elements at the start of snap port like the following example.

center will position the scrolling child elements in the vertical center of the snap port as the parent snap direction is y as Demonstrated in the following gif.

end will likewise, position scrolling elements at the end of the snap container as seen in the upcoming gif.

Thus, scroll-snap-type in combination with scroll-snap-align used in the above way can achieve simple scroll snapping. In addition to these properties, scroll padding and margin properties are also supported, which set the padding or margin of the scrolling elements. These properties are commonly used in carousels that either show parts of the next/previous slide in the viewport or create wider space between the slides.

A complete working example of scroll-snap-type and scroll-snap-align can be found in the CodePen below:

The pen uses y mandatory snap-type with center snap align. However, the usage of other snap types can be experimented by uncommenting lines 21 or 22, and usage of snap align by uncommenting lines 59 or 60.

Thank you for reading. Hope this helped!
Also, you can find a smaller version of this on my Twitter
// Detect dark theme var iframe = document.getElementById('tweet-1317881876472762368-112'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1317881876472762368&theme=dark" }

For a complete explanation on scroll snapping and CSS scroll snap module - here are my references. 👇
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type
https://css-tricks.com/almanac/properties/s/scroll-snap-type/
https://css-tricks.com/almanac/properties/s/scroll-snap-align/