DEV Community: Ruphaa

2022: Year in Review

Ruphaa — Fri, 06 Jan 2023 07:30:00 +0000

Well, it’s been a great year. It's been 3 years since I wrote my last year-in-review. This year I took some time to reflect on what happened in 2022. It's been a fantastic year for me, both in my career and personal life.

Credits: Created using Canva

✨ I joined Canva's design system team

I feel incredibly honored and grateful to be a part of Canva ♥️ especially the Design System team.
Ever since I joined, it's been a beautiful journey of constant learning and admiration.

It has given me some of the best learning I’ve done in my life. Looking forward to learning more and contributing more to this journey.

✨ I joined The 5 AM Club

Yes, it's utterly surprising but at the same time, miraculous.
It's a great way to make the most of the day and achieve my goals ☀️.

✨ I redid my website using Blogster

With the magic of Blogster, I redid my entire website in just a single afternoon. I now call it my "Digital garden 🪴".

I feel liberated to write more about any content or notes I want to share or keep it as a reference without overthinking or over-preparing.

✨ I read 35 books this year

Initially, I planned to complete 50 books and but I failed, which in a way worked out well for me. I took time to cherish every single book I read and it's been fantastic. This year I'm looking forward to diving deep into more non-fiction books.

✨ I journaled every single day

After watching a thousand youtube videos, I got inspired to start journaling. In the past year alone, I incorporated different techniques and prompts for journaling. Finally, at the end of 2022, I figured out a method that works well for me.

I'd highly recommend getting a 5-year journal notebook for anyone who wants to start journaling. It only allows 3 - 4 lines to write but that's enough to capture the highlight of the day without much effort. Happy Journaling!

✨ I started my fitness journey

The highlight of the year. I've been trying to stay fit by trying different activities on and off like yoga, dancing, boxing, weights, etc. This year, I've finally established a workout routine that works well for me which includes predominantly lifting weights and running, every single day.

PS: I now have a newfound love for running and bouldering 🧗‍♀️

✨ Bummers

Bought a 2022 planner but hardly used it 🙅‍♀️📓
Not being active in webdev community 😿
Didn't read 50 books as I planned and marked in GoodReads.
Underestimated the effort required and was being over-optimistic about time.
Didn't realize time is limited and worked on tasks that didn't contribute to my goals (Busy, but not productive ⌛️).
Wanted to write more blog posts.

✨ Lessons learned

Setbacks are inevitable. Mistakes don't define us but what we learn from them does.

Work on Essentialism
- Setting realistic goals.
- Work on planning and prioritization.
- Be thorough and produce quality work and content.
Focus on one thing at a time.
Being busy is different from being productive.
Discipline is the key to freedom.

✨ What's in store for 2023

I'm not doing any resolutions this year, instead, I've set some goals for which I've mapped out some systems to follow through.

Be more active in webdev community(Twitter and LinkedIn).
Build more projects and codepens in public.
Create more content.
Read 30 books this year.
Travel local. Do more adventurous stuff(hiking, canyoning 😉).

End credits

If I had to describe 2022 in one word, I'd say "Learning". I'm grateful for having had tons of learning opportunities this year.
I'm thrilled and excited for 2023, we have the whole year ahead of us full of potential and possibilities.

If anything the past couple of years has taught us, it is uncertainty. Cherish every single day and be grateful for every single thing we have.

That's all folks. Thanks for staying till the end. I wish you all a stunning year ahead! See you soon 👋

Cheers 🥂

14 tips to Google like a pro

Ruphaa — Sat, 23 Oct 2021 09:00:10 +0000

Google is one of the most powerful tools, and believe it or not, Googling is one of the most important skills out there. Here are some handy tips to master it.

Tip #1: Search for an exact word or phrase

Use quotes to search for an exact word or phrase.

"what is kubernetes"

Tip #2: Excluding a word

The minus sign allows you to specify words that shouldn’t appear in your results. Use - to exclude words.

hover over an element -css

Tip #3: Site search

The site: operator allows you to perform a search within the specified site.

site:geeksforgeeks.org merge sort

Keep a Domain Out of Search:

Tired of seeing Wikipedia articles on your search results?
Use -site:wikipedia.org before your search term to remove results from that site.

Tip #4: Asterisk(*)

The asterisk is a wildcard that can match any word. Use * for missing words or phrases.

build a todo app with *

Tip #5: File type

The filetype: operator allows you to search for files specific to a type.
Some available types: pdf, ppt, doc, xls

filetype:pdf how to learn react

Tip #6: Word definitions

Use the following search trick to find an inline definition:

define:machine learning

Tip #7: Use `~` to search for a word and all its synonyms

How to increase font-size of paragraph ~tag

Tip #8: Use `OR` to perform multiple searches

how to code in C# OR how to program in C#

Tip #9: Related

Use related to finding sites that are similar to the specified site.

related: udemy.com

Search for a cached website:

cache:epictutorials.com

Tip #10: Number range

Use ... to search within a range of numbers

Updated css course 2020...2021

Tip #11: Time range

javascript after:2021

javascript before:2019

Tip #12: `+`

Using + will return pages that contain both words

JavaScript Oops+React

Tip #13: AND

Use to get results that must contain some given words.

React AND CSS

Tip #14: All words In text

If you want to find a web page that includes every word of your search query, you can put allintext: followed by the words and/or phrases you want to search.

allintext: CSS fundamentals like the box model, cascade and specificity

Bonus tips

Translations

You can use Google search to translate words and phrases from one language to another.

translate perfect to Italian

Timer

You can pull up a timer within Google by typing an amount of time followed by the word timer.

5 min timer

Stopwatch

You can also pull up a stopwatch within Google simply by typing stopwatch.

Further reference:

Google Search Operators: The Complete List (42 Advanced Operators)

Use Google like a pro

Google's Advanced search

Thanks for reading, hope you all enjoyed this post. Stay tuned for more tips and tricks 🥳

Stay safe and stay happy!

An Evergreen Guide to Hacktoberfest

Ruphaa — Sun, 17 Oct 2021 23:55:41 +0000

Hacktoberfest is a month-long worldwide open-source festival, run by DigitalOcean and open to everyone in our global community. Anybody can participate in Hacktoberfest, not necessarily to have any experience or knowledge in coding. Let's dive more into it.

What is Hacktoberfest?

An open source community event in October.
People gather to learn and share new skills by contributing to and supporting open source projects.
Participants get to win cool swags like t-shirts and stickers.
An open source project is where anybody can contribute to it through any means regardless of their connection to the project owners or the project itself.

The main aim of Hacktoberfest is to encourage people to contribute to open source projects.

Prerequisites:

Basic knowledge of Git and GitHub since the contributions for Hacktoberfest takes place through it.

Learn Git and GitHub in no time with these resources:

How to get started?

Step 1: Register for Hacktoberfest

Go to the official Hacktoberfest website and register yourself with Github or Gitlab.

Step 2: Find repositories for contributions

Repositories with Hacktoberfest label will only be taken into consideration/or counted in as contributions.

You can find good projects worth contributing on the GitHub page by typing label:hacktoberfest is:issue is:open

Some good places to find projects:

Step 3: Make 4 Hacktoberfest Pull Requests

Make at least 4 PRs by October 31 in any of the Github-hosted repos.
Find the list of hacktoberfest opt-in projects here
Your PR will be counted if they are in the repo with hacktoberfest label and once merged, approved by a maintainer or labeled with hacktoberfest-accepted

Step 4: Check and see whether you’ve qualified

Once you’ve signed up for Hacktoberfest, you can check your progress on the Hacktoberfest website.

Step 5: Earn cool prizes

By participating in Hacktoberfest, you'll gain more open source experience and get the chance to earn some Hacktoberfest swags like t-shirts and yes, they'll be internationally delivered for free.

In Hacktoberfest 2021, DigitalOcean is offering an alternative to their traditional t-shirt prize: a plant-a-tree alternative! While those Hacktoberfest t-shirts are amazing, it always feels good to save the planet.

FAQs

1) What if my pull requests aren't accepted?

Even if your pull requests aren’t accepted, as long as you open at least 4 pull requests, you’ll earn the shirt.
The only exception would be if the project maintainer chooses to mark your pull request as “invalid”. They may do this if they perceive your pull request to be low effort, or if it contains plagiarism.

2) What kinds of pull requests count toward earning the Hacktoberfest shirt?

Any pull request made to a public repo on GitHub will count. The pull request must contain commits you personally made yourself — not automated commits from bots.

4) What if I don’t make at least 4 pull requests by midnight October 31?

As long as you're registered for Hacktoberfest, you’ll still get free stickers in the mail. It’s still worth registering, even if you’re too busy to participate.

8 open source projects to contribute to Hacktoberfest:

API Platform

Chart.js

FreeCodeCamp

Free programming books

App Ideas

Docusaurus

Awesome for non-programmers

Awesome First PR Opportunities

Further Reference:

@kentcdodds - First Timers Only

Ayushi Rawat's Beginner's guide to Hacktoberfest 2021

Catalin Pit's Find Open Source Projects To Contribute As A Beginner

@atapas 8 resources to get you started with open source

A Hacktoberfest Project For All Web Developers: Style Stage

Hacktoberfest 2021 is Here

Hacktoberfest: 69 Beginner-Friendly Projects You Can Contribute To

8 Non-technical ways to contribute to open-source

GitHub’s guide to Hacktoberfest 2021

That's it for today, folks!

Hopefully, I was able to provide useful information about Hacktoberfest. Happy hacking 👩‍💻👨‍💻

Thank you all for reading 🥳 Stay safe and happy!

5 ways to center a div vertically and horizontally using CSS

Ruphaa — Sun, 31 May 2020 15:35:34 +0000

Every developer should have come across this task of centering a div in their lifetime at least once or every single day. We all have our handy technique but for beginners, it might be frustrating at times.

In this article, I have compiled a list of different CSS tricks to center a div horizontally and vertically center on a page, choose a trick or two, and make it your favorite.

Method 1: Using Flex

I wanted this technique to be on top since it's my favorite of all. In this trick, all the CSS properties are defined under the parent container.

We define the parent with display: flex property along with justify-content(horizontal placement by default) and align-items(vertical placement by default) center. These properties come with Flex specifications. One glitch to make this work is by providing a fixed width and height to the parent.

Method 2: Using Grid

Using CSS Grid, we can achieve our goal in two ways. First, using 'place-items' properties and second is by using 'align and justify self'. Yet again, these properties are exclusive to CSS Grid.

a) Using place-items, we provide the rules to the parent, and it alone does the magic. We give the parent 'display: grid' and 'place-items: center' and there you go, things get super centered.

b) Using 'justify and align-self', we provide the parent container with 'display: grid' property, and the main properties are given to the child container - 'align-self'(vertically placement) and 'justify-self'(horizontal placement) props are given center as value.

Method 3: Using CSS Positioning and CSS transform

This is one of the old school methods we follow to center elements on a page. We make the child container's position absolute to the parent container and move the child container to 50% from the top and left of the parent.

Method 4: Using CSS Margin

Yet another old school method works like a charm in all the browsers. All we have to do is define 'margin: 0 auto' style to the child container. I've personally faced some inconsistencies while trying this method, so I always add extra properties to center the elements.

Method 5: Using CSS Positioning

This is one of the common methods followed since the birth of 'CSS Positioning'. We make the child container 'absolute' to the parent and define top, left, right, and bottom properties '0' along with 'margin: auto'.

Note: CSS Inset - It's a shorthand for top, left, right and bottom property(currently this property is supported in Firefox only)

inset: 2px 3px 4px 5px /* top right bottom left */

Bonus Method: Using CSS Table

I know we all use the 'CSS table' widely across our application, which comes with plenty of table properties. I was surprised to find that we can use table property to center the content and elements in a container and it gets better we can do that in two ways.

We have to provide 'display: table' to the wrapper(which is a level above the parent), then we use 'display: table-cell' property in the parent.

The difference in two ways comes with child properties - one, is by using 'margin' property and the other using 'display: inline-block'.

We have reached the end of this article. I have attached a Codepen below, where you can find all of the above-mentioned tricks in one place, play around with it and share over here if you follow any cool tricks to center things.

I hope you find this article helpful and informative. If you like this article, give me a thumbs up 👍 Don't forget to bookmark it for future reference 🔖

Thanks for reading 🤓

Stop Waiting and Start Writing ✍🏻

Ruphaa — Sun, 24 May 2020 15:26:31 +0000

My blogging has been quite infrequent. I used to publish a post once a year. That's it. That's not the whole, I list down around 100 ideas every year, which never come out in any form. This year, I took a resolution to break this jinx. I will be turning all my tech notes, tips, and tricks I learn every day into blog posts.

This place will be the curation of my learnings and I can get back to it anytime when I want to have a glance at the topics.

Recently, I found this interesting article 'Learning in Public' written by Shawn. This one post was enough to shun away my fears in writing down my thoughts. I also found Flavio's blog post motivating to start my blogging journey.

I have still got the rest of the year in front of me to enrich my writing experience. I will be consistently blogging and will be sharing my upcoming posts every week.

I'm figuring out the ways to start my blogging journey actively, there are 50–50 chances of me either getting successful or dropping off the blogging midway. Either way, let's face it, three things are not gonna change - Consistent writing, planning the ideas up front, and building up a writing routine.

I'm gonna list down the upcoming posts that I've been writing and will be coming out soon. Some posts might be teeny tiny ones and some might be bigger than dumbledore's beard, but I will try my best to not bore the audience.

Upcoming Blog Posts:

5 ways to center a div element in a container
5 Productivity Apps every Software Engineers should use
5 chrome extensions useful for every developer
7 tips I follow to write a blog post
How to create a Google Search Page in Neuomorphic design
CSS Function() - Everything to know about linear-gradient
5 tips to become a pro in searching on Google
How to create a responsive image using min() and max() function
HTML tips and tricks - Part 1
Advanced Javascript Concepts - Part 1 (Notes on Andrei Neagoie's Udemy Course)

Hopefully, I stay consistent in my writing journey. Thanks for reading! 😀

Follow me for more interesting articles. If you like this post, give me a thumbs up 🙌

CSS Subgrid — Level 2 of CSS Grid

Ruphaa — Sun, 21 Apr 2019 07:45:22 +0000

Something amazing is about to happen to grid layouts. The level 2 specification of CSS grid, called CSS Subgrid, is coming to browsers soon and it's gonna take the already awesome CSS Grid to a whole new level.

What's all the fuss about?

Recently, I came across Rachel Andrew's article where she introduced CSS Subgrid and I got super excited and thrilled about the possibilities that come along with CSS Subgrid.

In short — CSS Subgrid makes is possible to construct nested grids within CSS Grid.

Right now (without subgrid) the tracks of the nested grids have no relationship to the tracks on the parent grid. To put it in simple terms — we have a parent container with display: grid property, therefore its children become grid items. These grid items can also be made the grid containers. But the grid tracks defined for the parent grid container won't be aligned with the grid tracks of the child grid containers since they both are independent of the layout of its content. In some cases, it is necessary for the content and layout of multiple grid items to align with each other.

With CSS Subgrid, a grid container can inherit the definition of its rows and columns from its parent grid container, by making the grid item a subgrid. Subgrid provides the ability to pass the properties of the grid to its nested elements and content-based sizing information back to the parent grid.

These are the two main wins of CSS Subgrid —

A subgrid can use the grid tracks defined on the parent - for rows, columns or both.
A subgrid will also inherit the gaps from the parent. The sizing of the items in the subgrid can change the size of the parent tracks.

Here's an example of how nested grid works without subgrid —

But what if we wanted the tracks of nested grid items to be aligned with the tracks of the parent grid?

This is where subgrid comes to the rescue. When we add the property grid-template-rows: subgrid to the nested grid items, they inherit the row property of the parent grid and align with each other automatically.

This is how it should look if the property is applied.

Note: Currently, there is no browser support for subgrid so I have created an illustration to explain the behavior.

Subgrid for the columns and rows

In this case, subgrid will be on both columns and rows. This means that both the dimensions are aligned to the tracks of the parent grid.

Subgrid for columns only

In this case, subgrid is used on columns, meaning there will be an implicit track for rows alone in the grid item but its column tracks are aligned with the parent grid.

Subgrid for rows only

In this case, subgrid is applied on rows, which aligns with the row tracks of the parent grid, but its column sizing is independent of the parent grid.

Resources

CSS Grid Level 2: Here Comes Subgrid
Grids All The Way Down
CSS Grid Layout Module Level 2
Why we need CSS subgrid

I am eagerly waiting for browsers to support subgrid (hopefully soon) so I can play around with it and figure out interesting use cases.

Feedbacks? Leave a comment :)

Everything about Event Handlers and Event Propagation

Ruphaa — Fri, 01 Feb 2019 13:03:37 +0000

This has been written over a hundred times before and probably holds more than a hundred answers on StackOverflow. But over time, going through different articles and answers, I curated the important parts and writing it down as this post.

Event Handling

There are 3 ways to attach a handler to an event in JavaScript.

HTML Attribute
DOM Property
addEventListener()

HTML attribute

This is the old school way of attaching a handler to an event by adding an attribute to the DOM element.

Remember, a node can only have one onclick attribute. So with this approach, only one handler can be registered to an event.

<div id="el" onclick="kaboom()"></div>

DOM property

This is the JavaScripty way of creating a DOM node on the fly, adding an attribute to it and attaching a handler to the attribute. Since this is almost the same as the previous approach, only one handler can be registered to an event.

<script>
  el = document.querySelector("#el")
  el.onclick = clickMe();
</script>

addEventListener() 🔥

This is the modern way of binding handlers to the event. We can bind any number of handlers with the event and all these handlers will be invoked when that event happens.

<script>
  el.addEventListener("click", (e) => {
    // Some code here that goes KABOOM!
  });
</script>

Event Behaviours

preventDefault()
Event Bubbling
Event Capturing

preventDefault()

There are a handful or pre-defined events that have default actions associated with them. For example,

a link by default takes you to the link’s target.
if you press down arrow, page scrolls down.

In these cases, the custom handlers associated with these elements will get invoked before the default actions followed by the default actions. If you want to completely unbind this default behaviour from the element, you can call the event.preventDefault() in your handler.

Note: This has got nothing to stop the event from bubbling up the DOM.

Event Bubbling & Event Capturing

Events in DOM usually get propagated as a stack of events nested in the web browser.

Event Bubbling

Event bubbling can be better explained with an example.

Let's take a nested DOM structure like this

<div id="parent">
  <div id="child"></div>
</div>

If there are handlers attached to both #parent and #child divs,

when the child is clicked, due to the bubbling nature of events, first the handler for the #child div is invoked and then the event propagates to #parent div and its handler will be invoked.

In short, child first and parent next as events bubble from bottom to top.

Event Capturing

Event capturing is more of capturing the event in the DOM and handing it over to event handlers for execution. Events are captured from top-down, meaning outermost element is captured first and propagated to the inner elements. Once the events are captured, bubbling of events start from the inner-most elements.

stopPropagation()

You can stop the bubbling of events from child to parent by calling event.stopPropagation() in the child event handler.

function childHandler(event) {
  event.stopPropagation();
}

Removing an event listener

You can remove an event listener from an element by invoking removeEventListener() on the event, which accepts the event name and handler name as arguments.

function handleClick(e) {
  // go KABOOM!
}

element.addEventListener("click", handleClick);
element.removeEventListener("click", handleClick);

Note: Do not use anonymous handler method. You should define the function outside the callback and then reference it in back in the removeEventListener callback.

// this is wrong as you cannot remove this event listener
element.addEventListener("click", () => { /* go KABOOM! */ });

That's it folks. Pl drop a comment if you think this post could be improved in any way.

2018: Year in Review

Ruphaa — Sat, 05 Jan 2019 05:16:34 +0000

Another exciting year has started. I’d like to take a moment to reflect on everything that happened in 2018 as it was an exciting year for me, both career-wise and personally.

This is my first blog post, like my first ever blog post. So take it easy on me.

Career

I started developing a keen interest in front-end nuances and decided to look for opportunities where I could nourish and improve my front-end skills. I quit my old job and landed a Frontend focussed role in an amazing company. Everyday I see myself becoming a better dev than the previous day.

Talks and Meetups

I attended a meetup on Frontend Frameworks war - by Facebook Developer Circle, Chennai.
Along with 5 other folks I gave a talk on “Virtual and Augmented Reality” and “Pillars of Web - HTML, CSS and JS” to undergrad students.

Achievements Unlocked

Bagged first place in a hackathon
Completed hacktoberfest and kick started my open source contributions. (Can’t wait to receive my hacktoberfest goodies)
Took part in Codevember (first timer here). I got to see a lot of codepen inspirations and I’m totally into it now.
Created a few CSS illustrations, mostly inspired from dribbble shots. Here’s my handle for the curious - https://codepen.io/ruphaa/

Health and Fitness

Started working out and I hit the gym 5 times a week now.
Took up 30 days yoga challenge and completed successfully. Yoga magically gives you a sense of inner peace, boosts up your confidence and improves your focus.

Bummers

I took up the #100DaysOfCode challenge but somewhere down the line I got side-tracked.
I started Codevember challenge with all fury but ended up not completing it.
Planned to build a portfolio but didn’t make much progress in that.

Lessons Learnt

Setbacks are inevitable. But what we learn from it is what’s important. I set a lot of luxurious goals but didn’t plan and manage my time accordingly. So I’m gonna try and focus on

Setting realistic goals
Focussing on one thing at a time

What’s in store for 2019

Write more blog posts.
Build a portfolio
Listen to 3 podcasts every week
Read 1 blog post every day
Create 1 codepen every week
Complete at least 1 round of #100DaysOfCode and log it
Read 10 books

2018 was really an amazing year for me. Started the year low but looking back, I am grateful for everything. Not yet over, I am so grateful to have a wonderful mentor @flexdinesh , for all the career guidance and motivation that set me on the right track.

Have an amazing year ahead!