DEV Community: Rishi

Be an Energy Radiator: Ignite Your Influence

Rishi — Sat, 13 Jul 2024 18:37:16 +0000

In a world teeming with noise, the ability to shine is a superpower. To be an energy radiator is to not just exist, but to illuminate. It's about captivating hearts, inspiring minds, and leaving an indelible mark.

Why Be an Energy Radiator?

Being an energy radiator is more than a title; it's a strategic choice. It's about maximizing your potential, building authentic connections, and driving positive change. When you radiate energy, you:

Attract opportunities: People gravitate towards enthusiasm and optimism.
Build a loyal following: Your passion becomes contagious.
Drive innovation: Your energy fosters a creative environment.
Overcome challenges: A positive outlook builds resilience.
Inspire others: Your light can ignite the spark in others.

How to Be an Energy Radiator

1. Be Visible:

Step into the spotlight: Don't shy away from opportunities to share your thoughts, ideas, or expertise.
Leverage technology: Use social media, blogs, and podcasts to amplify your voice.
Network strategically: Build relationships with people from diverse backgrounds.

Story: Alex, a budding entrepreneur, was hesitant to share her business idea. But after overcoming her fear and pitching at a startup event, she attracted investors and mentors.

2. Connect Deeply:

Build authentic relationships: Focus on quality over quantity.
Practice empathy: Understand and share the feelings of others.
Active listening: Pay attention to what others are saying and feeling.

Story: Sarah, a customer service representative, turned a frustrated customer into a loyal advocate by genuinely listening to their concerns and finding a solution.

3. Explain Your Decisions:

Transparency builds trust: Share your thought process behind decisions.
Seek feedback: Value input from others.
Communicate clearly: Use simple, understandable language.

Story: Mark, a team leader, increased employee morale by openly discussing the reasons behind a new project and involving the team in decision-making.

4. Encourage Your People:

Believe in their potential: Offer support and encouragement.
Celebrate successes: Recognize and reward achievements.
Provide constructive feedback: Help them grow and improve.

Story: Olivia, a mentor, helped a young employee overcome self-doubt by highlighting their strengths and setting achievable goals.

5. Project Positivity:

Cultivate optimism: Focus on the bright side.
Practice gratitude: Appreciate what you have.
Spread positivity: Be a source of light for others.

Story: Ethan, a sales representative, turned a challenging sales call into a positive experience by focusing on solutions and finding common ground.

6. Watch Your Language:

Choose words wisely: Use language that inspires and motivates.
Avoid negativity: Eliminate pessimistic language.
Practice effective communication: Be clear and concise.

Story: Maya, a public speaker, transformed a nervous audience into an engaged crowd by using powerful, uplifting language.

7. Celebrate Effort as Well as Success:

Recognize hard work: Acknowledge dedication and perseverance.
Learn from failures: View setbacks as opportunities for growth.
Build a culture of encouragement: Foster a supportive environment.

Story: Riley, a coach, helped a struggling athlete regain confidence by emphasizing their improvement and progress.

8. Be Approachable:

Openness invites connection: Be receptive to others.
Active engagement: Participate in conversations and activities.
Show genuine interest: Care about people and their experiences.

Story: Ben, a new employee, quickly integrated into the team by being friendly, inclusive, and willing to help.

9. Keep Perspective:

Maintain balance: Prioritize well-being and relationships.
Learn from challenges: Grow through adversity.
Stay grounded: Remember your roots and values.

Story: Anya, a high-achieving executive, prevented burnout by taking time for relaxation, hobbies, and spending quality time with loved ones.

Remember, being an energy radiator is a journey, not a destination. Consistent effort and a genuine desire to uplift others are key. By embodying these principles, you can create a ripple effect of positivity that transforms lives and communities.

Leaders Who Inspire

Nelson Mandela: His unwavering belief in equality and forgiveness, coupled with his ability to unite a nation, made him a beacon of hope.
Martin Luther King Jr.: A powerful orator and civil rights leader, his dream of a world without racial discrimination continues to inspire.
Oprah Winfrey: Her journey from hardship to media mogul is a testament to resilience and the power of empathy.

Artists and Entertainers Who Captivate

Beyoncé: Known for her powerful performances and empowering lyrics, Beyoncé is a role model for many.
Steve Jobs: His visionary leadership and ability to transform technology into art made him an iconic figure.
Lady Gaga: Her fearless expression of individuality and advocacy for mental health have resonated with millions.

Everyday Heroes

The local volunteer firefighter: Risking their lives to protect their community, they embody courage and selflessness.
The dedicated teacher: Inspiring young minds and shaping the future, they are the architects of tomorrow.
The community organizer: Bringing people together to address shared challenges, they create a sense of belonging.

Common Traits of Energy Radiators

These individuals, from world leaders to everyday heroes, share several key characteristics:

Passion: They are deeply committed to their cause or craft.
Vision: They have a clear sense of purpose and direction.
Empathy: They connect with others on a human level.
Resilience: They overcome obstacles with determination.
Authenticity: They are true to themselves.

Embarking on the journey of becoming an energy radiator is exciting!

Finding Your True North: A Concise Guide to Authenticity

Rishi — Fri, 05 Jul 2024 17:31:02 +0000

Authenticity. It's a word thrown around a lot these days, but what does it truly mean? At its core, authenticity is about being genuine, acting with integrity, and living according to your inner compass. It's the unwavering sense of "you" that shines through in your actions, decisions, and even your style.

"The only person you are destined to become is the person you decide to be." - Ralph Waldo Emerson (This quote emphasizes the power of self-discovery and living according to your own choices.)

"The greatest danger for most of us is not that our aim is too high and we miss it, but that it is too low and we reach it." - Michelangelo (This quote reminds us that true fulfillment comes from striving to be our authentic selves, even if it's challenging.)

So, how can you cultivate your own authentic self? Here's your roadmap:

Craft a Personal Manifesto:
Take time to reflect on your values, your passions, and your non-negotiables. Write them down! This personal manifesto will serve as your guiding light.
Embrace Vulnerability:
Let people see the real you, flaws and all. Authenticity thrives on connection, and connection requires vulnerability. Share your passions, your struggles, and your true opinions.
Consistency is Key:
While your style or hobbies may evolve, your core values should remain constant. This consistency builds trust and allows others to understand who you are at your core.
Set Boundaries:
Respecting your limitations and saying "no" is crucial for authenticity. Don't spread yourself thin trying to please everyone. Prioritize what aligns with your values and protects your well-being.
Know When to Stop:
Don't force a certain image or behavior. Authenticity isn't about maintaining a facade. It's about allowing your true self to shine through, even when it's messy or inconvenient.
Transparency Matters:
Be honest and upfront in your communication. Authenticity doesn't mean blurting out every thought, but it does mean striving for genuineness.
Embrace Your Range:
You can be both a nature enthusiast and a techie, a lover of classical music and a dab hand at baking. Embrace the multifaceted nature of your personality!

Remember, authenticity is a journey, not a destination. There will be stumbles and moments of doubt. But by staying true to your core values and letting your genuine self shine through, you'll find the path to your own unique and powerful form of authenticity.

"To thine own self be true." - William Shakespeare (A timeless quote reminding us to stay faithful to our authentic selves.)

The Stories Within

Consider Sarah, a graphic designer with a whimsical, artistic streak. Her colleagues know her for her vibrant clothing choices and her infectious laugh. But when it comes to client work, Sarah is a meticulous professional, delivering polished designs that prioritize functionality. This is authenticity in action. Sarah embraces her full self, both the playful and the serious, without compromising her core values of creativity and excellence.

Now, there's Michael, a history teacher known for his dry wit and passion for obscure historical events. At home, however, Michael is a devoted family man, indulging in silly movie nights with his kids. This apparent contradiction isn't inauthenticity; it's simply the multifaceted nature of a person. Michael's dedication to his students and his family stems from the same core value: a love for learning and connection.

"Authenticity is a collection of choices that reflect your inner values." - Frederic Buechner (This quote highlights that authenticity is an active process based on your core beliefs.)

Be You, Unapologetically: Bullet points to Authenticity

Know Your Values: Craft a personal manifesto that reflects your core principles and what matters most to you.
Embrace Vulnerability: Let people see the real you, strengths and weaknesses. Build connections through open communication.
Live with Consistency: While your style may change, your core values should remain constant. This builds trust and allows others to understand who you are.
Set Boundaries: Respect your limits and say "no" when needed. Focus your energy on what aligns with your values and protects your well-being.
Be Transparent: Strive for honesty and genuineness in your communication.
Embrace Your Multifaceted Self: You can have a range of interests and passions. Authenticity celebrates the unique blend that makes you, you.
The Journey Matters: Authenticity is a continuous process. There will be challenges, but staying true to yourself is the path to a fulfilling life.

"Authenticity is the new rebellion." - Margaret Mead (This quote suggests that living authentically can be a form of nonconformity in a world that often pressures us to fit in.)

Learn Python: Sets

Rishi — Fri, 22 May 2020 21:29:53 +0000

A set is another type of collection like list and tuple.

So what are sets?

Sets are unordered – Items stored in a set aren’t kept in any particular order.
Set items are unique – Duplicate items are not allowed.
Sets are unindexed – You cannot access set items by referring to an index.
Sets are changeable (mutable) – They can be changed in place, can grow and shrink on demand.

The values of a set are defined within curly braces { }.
A quick reminder:

For list, we use square brackets [ ].
For tuple, we use brackets ( ).

fruits = {'apple','orange'}
print(fruits);

Sets don't maintain order. Every time we execute the code, the order of the values in the set changes.

Do note, in the example below we are adding pineapple multi times, but when we print the set, we only see pineapple once. This is because set does not allow duplicate.

fruits = {'apple','orange'}
fruits.add('pineapple');
fruits.add('pineapple');
fruits.add('pineapple');
print(fruits);

Benefits of sets

The key benefit of sets is that they make comparing values between two sets easier.

Set Operations

Sets are commonly used for computing mathematical operations such as intersection, union, difference, and symmetric difference.

Difference

basket_1 = {"Strawberry", "Cherry", "Apple", "Grapes"}
basket_2 = {"Pear", "Avocado", "Lime", "Apple", "Grapes"}

# Difference  
basket_1_difference = basket_1.difference(basket_2);
basket_2_difference = basket_2.difference(basket_1);

print(basket_1_difference);
print(basket_2_difference);

Symmetric Difference

basket_1 = {"Strawberry", "Cherry", "Apple", "Grapes"}
basket_2 = {"Pear", "Avocado", "Lime", "Apple", "Grapes"}

# Symmetric Difference 
basket_1_symmetric_difference = basket_1.symmetric_difference(basket_2);
basket_2_symmetric_difference = basket_2.symmetric_difference(basket_1);
print(basket_1_symmetric_difference);
print(basket_2_symmetric_difference);

Intersection

basket_1 = {"Strawberry", "Cherry", "Apple", "Grapes"}
basket_2 = {"Pear", "Avocado", "Lime", "Apple", "Grapes"}

# Intersection
basket_1_intersection = basket_1.intersection(basket_2);
print(basket_1_intersection);

Union

basket_1 = {"Strawberry", "Cherry", "Apple", "Grapes"}
basket_2 = {"Pear", "Avocado", "Lime", "Apple", "Grapes"}

# Union
basket_1_union = basket_1.union(basket_2);
print(basket_1_union);

Learn Python: Tuples

Rishi — Fri, 15 May 2020 12:06:51 +0000

Tuple shares some similarities to list.
Just like a list, a tuple variable can hold multiple values.

However:

There are no square brackets [ ].
The values are separated by a , .
It is good practice to use brackets ( ) around the values, but it is not required. However, where python can't understand whether to evaluate the values as a tuple or a list, brackets will be required.

Creating new tuple.

a_tuple = "Rishi", "Abee"
another_tuple = (1, 2)

⚠️ NOTE: Leaving a trailing , at the end of a value will cause python to evaluate the variable as a tuple instead.

a_string = "Rishi"
a_short_string_tuple = "Rishi",
a_short_number_tuple = 2,

Tuples can be added to a list.
💡 To help python better understand whether to evaluate the values as a tuple, brackets ( ) are required.

a_list = ["Orange", "Yellow"]
a_tuple_inside_a_list= [('🍏', '🍎'), another_tuple, 'Hello']

A Tuple is Immutable

Unlike a list, a tuple cannot be modified by appending values to it.
If we need to add values to a tuple, we will have to re-assign the same tuple a new value.

# Adding to a tuple.
a_tuple = "Rishi", "Abee"
a_tuple = a_tuple + ("Python",)
print(a_tuple )

npm ERR! Unexpected end of JSON input while parsing near

Rishi — Fri, 15 May 2020 11:40:21 +0000

You are trying to create a new angular, react, vue app, and you end up with an error message saying:

npm ERR! Unexpected end of JSON input while parsing near

There's a high chance that your npm cache been damaged.

Try:



npm cache clean --force

If you are a windows user, try deleting all files in this folder:



C:\Users{{your-username}}\AppData\Roaming\npm-cache

Then...



npm cache verify

If that doesn't work, try updating to the lastest (understand the risks)



npm i npm@latest -g

I hope this helps!

CSS - Let's dive deeper in the basics.

Rishi — Tue, 12 May 2020 05:41:10 +0000

Let's think inside the box!
Default margin
Margin Collapsing
Shorthand properties
Width & Height
Box Sizing
display: none v/s visibility:hidden
Pseudo Classes
Pseudo Elements
Pseudo what???
Grouping CSS Rules

Let's think inside the box!

Every HTML element is interpreted as a box by CSS.

Every element has:

A content; the blue area.
A surrounding padding, the green area.
A surrounding border, the orange area.
A surrounding margin, the brown area.

Content
It can be some text, an image, a video...

Border
A border surrounds the content.

Padding
The internal space, from the content to the border.

Margin
The distance between an element and its next sibling.

Content, Border, Padding and Margin form part of the Box Model in CSS.

<div id="boxModel">
  Hello Box Model!
</div>

#boxModel {
  background-color: violet;
  font-size:50px;
  padding: 20px;
  border: 10px solid red;
  margin: 30px;
}

By applying this CSS Rule, below we can see how the broswer interpreted each CSS declaration.

Content| the blue area
We have a CSS declaration of font-size:50px, hence we have height of 57px

Border | the orange area
We have a CSS declaration of border: 10px solid red, therefore 10px has been allocated to the surrounding border, with a solid red colour.

Padding | the green area
We have a CSS declaration of padding: 20px;, therefore 20px has been allocated to the surrounding padding.

Margin | the brown area
And, we have a CSS declaration of margin: 30px;, therefore 30px has been allocated to the surrounding margin.

Default margin

By the browser

The browser by default assigns a margin: 8px; to the body element.

To remove this default margin, we can use this CSS rule:

body {
  margin: 0px;
}

Margin Collapsing

When we have two or more HTML elements (block element).
The margin between them collapse. This is done automatically by the browser to minimise excessive white spacing.

Below we can see that the margin-bottom for the first element and the margin-top for the second element has automatically been merged together.

By default, the block element with the bigger margin wins.
Below, the margin-top for the second element has a bigger value than the margin-bottom of the first element.

Mastering margin collapsing

Shorthand properties

Shorthand properties combine values of multiple properties in a single CSS declaration.

For example:

margin: 8px

is a shorthand for

margin-top: 8px;
margin-right: 8px;
margin-left: 8px;
margin-bottom: 8px;

Shorthand makes it easier to pass in multiple values to one CSS property.

border: 10px dashed purple;

Shorthand properties in action

padding: 10px 20px; is a short hand for:

padding-top:    10px;
padding-right:  20px;
padding-bottom: 10px;
padding-left:   20px;

padding: 10px 20px 30px; is a short hand for:

padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 20px;

padding: 10px 20px 30px 40px; is a short hand for:

padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

Width & Height

Width

A block-level element always attempts to take the full available width of the browser or that of its enclosing element if it has one.

div {
  background: greenyellow;
}

  <div>What is my width?</div>

If we set the width by giving it a percentage value, it'll take the percentage of the surrounding element.
In this case, the div element has no surrounding element, so it is taking the full available space of the browser's width.

div {
  background: greenyellow;
  width: 33%
}

If we wrap the div in an enclosing section element, and we give that section element a specific width.

<section>
  <div>What is my width?</div>
</section>

section {
   width: 500px; 
   background: yellow;
}
div {
  background: greenyellow;
  width: 33%
}

The width of the div element will now be a % of its enclosing element.
Below, we can see that it has shrunk smaller.

Height

Height on the otherhand, sets the maximum vertical space an element needs to fit its content. It doesn't take the full height available for the broswer by default.

div {
  background: greenyellow;
  width: 100%;
  height: 100%;
}

If the html element is enclosed inside another element, its height will be relative to that element.

<section>
  <div>What is my height?</div>
</section>

section {
   width: 500px; 
   background: yellow;
   width: 200px;
   height: 200px;
}

div {
  background: greenyellow;
  width: 80%;
  height: 100%;
}

To make use the full height of the browser, one trick is to apply this CSS rule:

html, body {
    height: 100%
    }

Box Sizing

box-sizing property allows us to include the padding and border in an element's total width and height.
But before that, let's understand how the browser allocates the space for each element.

Actual visible/rendered width of an element’s box
= width + padding + border

Actual visible/rendered height of an element’s box
= height + padding + border

By default, margin, border & padding are given their respective spacing.

<div>How much space do I use?</div>

div {
  background: pink;
  width: 100px;
  height: 100px;
  padding: 10px;
  margin: 10px;
  border: 10px solid greenyellow;
}

We can change the box model by assigning the box-sizing property one of the three possible values

content-box
padding-box
border-box (the most popular value)

Example with box-sizing: border-box;

div {
  background: pink;
  width: 100px;
  height: 100px;
  padding: 10px;
  margin: 10px;
  border: 10px solid greenyellow;
  box-sizing: border-box;
}

`box-sizing` Reset Method

If we want to use border-box throughout our project, the following styling will do the quick fix.

html  {  
    box-sizing: border-box;  
}  
*, *:before, *:after  {  
    box-sizing: inherit;  
}

Display Property

Block element
A block element is any element that starts a new line, like a paragraph, and uses the full width (all the available horizontal space) of the page or container. A block element can take up one line or multiple lines and has a line break before and after the element. We can set its margin-top and margin-bottom.

Examples of block-level elements :

HTML Tag	Description
`<address>`	Shows contact information
`<applet>`	Embed a Java applet
`<article>`	Contains the article's content
`<aside>`	Describe a section of content
`<blockquote>`	Denote a section that is quoted
`<canvas>`	Draw graphics using JavaScript
`<caption>`	Add caption to table
`<center>`	Center text
`<details>`	Create an interactive widget to hide text
`<dir>`	Designate a collection of file names
`<div>`	Creates a document division
`<dl>`	Contain a list of definitions and their descriptions
`<dt>`	Designate a term within a description list
`<embed>`	Designate an area for interactive content
`<figure>`	Designate an area of self-contained content
`<form>`	Creates an input form to capture data
`<frame>`	Create a frame window of another page
`<h1>` to `<h6>`	Creates a heading
`<header>`	Create a header section
`<hr>`	Create a horizontal line
`<iframe>`	Create a window frame of a page
`<li>`	Used to denote a list item
`<main>`	Contains the content specific to a certain page
`<marquee>`	Create scrolling text
`<nav>`	Contains a page's navigations links
`<noscript>`	Contains the content to use in browsers that don't support scripting
`<object>`	Designate an object embedded into a web page
`<ol>`	Contains an ordered list
`<p>`	Used to denote a paragraph
`<pre>`	Contains preformatted text
`<section>`	Group thematically similar content together
`<table>`	Contains a table
`<ul>`	Contains an unordered list

The display property allows us to change the behaviour of an element to block, inline, or inline-block.

Inline Element
Inline as the name says “included as a part of the main text and not as a separate section”. Inline elements occupy the space as needed within the space defined by the main element, that is, they take up space they require to fit their content in. Unlike block-level elements, they do not begin on new lines. Therefore, two inline-elements can fit into the same line (as long as the combined content doesn't take up the entire space in which case a line break would be added). Setting a width or height on an inline element also has no effect.

Examples of inline elements:

HTML Tag	Description
`<a>`	Create an anchor
`<abbr>`	Create an acronym or abbreviation
`<acronym>`	Create an acronym
`<audio>`	Embed sound files
`<b>`	Bold text
`<bdi>`	Confine text that may be formatted differently
`<bdo>`	Force text to go one way or another
`<big>`	Make text bigger
`<blink>`	Make text blink
`<br>`	Create a line break
`<button>`	Create a form button
`<cite>`	Mention any creative work
`<code>`	Designate text as code
`<del>`	Delete or strikethrough text
`<dfn>`	Represent the defining instance of a term
`<em>`	Give emphasis to text
`<font>`	Change the font
`<i>`	Italicizes text
`<img>`	Show an image file
`<input>`	Create an input box on a form
`<ins>`	Insert text
`<kbd>`	Indicate text was inserted using a keyboard
`<mark>`	Highlight text
`<meter>`	Create a meter
`<output>`	Show result of a user's action or a calculation
`<progress>`	Display the progress of a task
`<q>`	Designate text as a short quotation
`<rp>`	Designate parenthesis for browsers without Ruby annotations
`<rt>`	Designate the pronunciation of an East Asian word
`<ruby>`	Designate a ruby annotation on a web page
`<s>`	Strikethrough text
`<samp>`	Designate sample output from a computer
`<select>`	Drop
`<small>`	Make text smaller
`<span>`	Container for grouping or phrasing content
`<strike>`	Strikethrough text
`<strong>`	Mark text with a strong importance
`<sub>`	Create subscript text
`<sup>`	Make text superscript
`<strong>`	Give strong importance to text
`<textarea>`	Create text area for form
`<time>`	Designate a date and time that are readable by humans
`<tt>`	Make text teletype text
`<u>`	Underline text
`<var>`	Define text as a variable
`<video>`	Show a video file
`<wbr>`	Break a line of text

Inline-block
An inline-block remains inline with all text around the element and appears the same as an inline element.
The advantage: we get the ability to have the vertical height for that element, so we can set margin-top, margin-bottom, padding-top, padding-bottom and vertical-align.

`display: none` v/s `visibility:hidden`

The CSS declaration display: none; removes the element from the document flow. This means that the element is no more visible and it also doesn't "block its position". Other elements can (and will) take its place instead.

The CSS declaration visibility: hidden; hides an element but keeps its place in the document. This means other elements won't fill its spot.

For example, if we have two div elements, one with display none and next one with visibilty hidden:

<section>
<div class="dnone">Display None</div>
</section>
<br>
<section>
<div class="vhidden">Visibility Hidden</div>
</section>

section {
  border: 1px solid red;
}
.dnone {
    display: none;
    height: 50px;
}

.vhidden{
    visibility: hidden;
    height: 50px;
}

The first div with CSS declaration display: none; has been removed entirely from the document flow.

Pseudo Classes

Pseudo Classes select elements under certain conditions:

when their position is relative to their siblings.
or when they’re under a particular state.

Example of common pseudo-classes:

Dynamic pseudo-classes

:link
:visited
:hover
:active
:focus

UI element states pseudo-classes

:enabled
:disabled
:checked

Structural pseudo-classes

:first-child
:nth-child(n)
:nth-last-child(n)
:nth-of-type(n)
:nth-last-of-type(n)
:last-child
:first-of-type
:last-of-type
:only-child
:only-of-type
:root
:empty

Other pseudo-classes

:not(x)
:target
:lang(language)

Pseudo Elements

Pseudo-elements effectively create new elements that are not specified in the markup of the document and can be manipulated much like a regular element.

::before
::after
::first-letter
::first-line

p::first-letter {
  color: Red;
  font-size: 25px;
  font-weight: bolder;
}

p::after {
  content: "<-- Remember this";
  background-color: yellow;
  color: red;
  font-weight: bold;
}

Pseudo what???

The difference between pseudo-classes and pseudo-elements can be a little confusing at first.
A pseudo-class is a selector that assists in the selection of something that cannot be expressed by a simple selector, for example :hover. Since :hover is an action.
A pseudo-element, on the other hand, allows us to create items that do not normally exist in the document tree, for example ::after.

So a pseudo-class selects, while a pseudo-element creates.

Grouping CSS Rules

If we have two CSS rules which share the same CSS declarations, we can group the rules separated by a ,.
Here, the , does not act as a combinator.

div:first-letter,
p::first-letter {
  font-family: sans-serif;
  font-weight: bold;
  color: orange;
  font-size: 30px;
}

How can I improve?

Thank you for reading this article. 🙏 🙏 🙏
Can you kindly tell me what I might have missed out, and how I can improve this article?
Thank you.

Motivate me to write more

Comment, Tweet, ❤️ , 🦄 & 🔖

🙏

CSS - Diving inside the basics.

Rishi — Sun, 10 May 2020 10:05:33 +0000

How to make use of CSS?
Selectors, Properties & Values
Combinators

What is CSS?
It makes the wepage look good.
HTML is the structure the of a webpage.
CSS allows you to style the HTML page.

For any webpage, HTML is required. CSS is optional.

What does CSS mean?
Cascading Style Sheets.

How to make use of CSS?

There are 3 ways of using CSS in an HTML file.

Inline Styling
Style Tag
Using an external Style Sheet

1. Inline Styling

An HTML element consists of an HTML tag eg: <div></div>.

Most tags have one or more attributes.

Inline Styling adds a style attribute to an html element.

To style an html element h1 with a background property with a value of red :
we add the attribute style="background: red" , which is also known as a CSS declaration.

      <h1 style="background: red">Hello Inline Styling</h1>

Therefore, a CSS declaration consists of a property and a value.

The values are tightly coupled to a specific property.
These values can be categories as:

Predefined Options

Colors

Length, Sizes & Numbers

Fucntions

Inline styling is very easy to write but not recomended in the long run.
As the html code gets bigger, it becomes harder to maintain.

2. Style Tag

It is a normal html tag <style></style .
Style Tag is added in the <head></head> section of the html file.

Within the style tag, we add CSS rules.
A CSS rule consists of at least one selector and one or more css declarations.
The selector indicates which html element(s) we are targeting and what style(s) to apply.
Within that selector, we add in the CSS declaration(s) we want.

<style>
    p {
      background: yellow;
    }
</style>

The above CSS rule will tell the browser to look within the html file for all p elements and apply the defined css rule, which in this example, the rule is: to apply a ==yellow== background to all p elements.

A "rule" in CSS is a combination of at least one selector (WHAT TO STYLE) and at least one css declaration (HOW TO STYLE IT).

3. Using an External Style Sheet.

For Inline Styling and Style Tag, the css delcarations & css rules exist within the same html file.

External Style Sheet, as the name implies, the css file resides externally from the html file.

We start by creating a new file with the extension of .cssexample myStyle.css.
Then, within the html we specify that we want to use that external style sheet.
To do so, in the <head></head> section of the html , we add a <link> element.

<link rel="" href="">

We assign the attribute rel with the value of stylesheet.
And for the href attribute we indicate where our myStyle.css is located.

 <link rel="stylesheet" href="myStyle.css">

Inside the myStyle.css we use CSS rule(s) to style our html elements.

span {
  background: pink;
}

This css rule applies a pink background to all p elements.

Advantages of using an external Style Sheet:

Can use multiple external style sheets to better organise the way we style our HTML document.
Browsers normally cache the external style sheets, so subsequent page loading are faster.

Selectors, Properties & Values

A CSS rule consists of at least one selector and one or more css declarations.
There are different types of selectors to make it easier to target differnt HTML elements.
Namely:

Element selectors
Class selectors
Universal selector
Id selector
Attribute selector

Element selectors

A HTML document consists of multiple HTML elements.
Inside an HTML file we have

Head element <head></head>.
Body element <body></body>.
Div element <div></div>.
Paragraph element <p></p>.
and many more...

Element selectors apply the same style to all the same elements.

    p {
      background: yellow;
    }

This will apply a yellow brackground to all the p elements.

Class selectors

With the introduction of CSS, all HTML elements were given the class attribute. This was to help with css styling.

Class selectors applies the same style to all the elements having a class with the same value aka class name.

A class is added to the html tag by using the class attribute.

      <div class="iAmAClassSelector">
        Sesame snaps dragée gummies fruitcake carrot cake cookie cake macaroon. Jujubes chupa chups marshmallow pudding. Wafer gingerbread chocolate cake cupcake. Muffin tiramisu muffin muffin icing chocolate bar chocolate cake soufflé carrot cake.
      </div>

A class selector starts with a . followed by the class name.

.iAmAClassSelector {
  background: aquamarine;
}

We can define multiple class selectors and use them simultaneously.

.iAmAClassSelector {
  background: aquamarine;
}

.iAmAnotherClassSelector {
  color: orange;
  font-size:14px
}

      <div class="iAmAClassSelector iAmAnotherClassSelector">
        Sweet roll apple pie lollipop lemon drops. Pastry fruitcake halvah oat cake wafer dragée.
      </div>

Universal selector

A Universal selector applies a set of styles to all the elements in the page. ==rarely used==
It starts with an * followed by the css rule(s).

* {
  color: brown;
}

The above sets all the text color to brown, within the html page.

Id selectors

An id selector, applies a set of CSS rules to one html element having that particular id.
NOTE: Anid should be unique in an html file.

<div id="idSelector">
Cupcake lemon drops bonbon. Cake dessert sesame snaps candy gingerbread jelly donut pudding biscuit. Biscuit brownie donut marshmallow chocolate bar jelly beans macaroon. Carrot cake dragée lemon drops pudding candy canes. Danish soufflé jujubes bear claw ice cream gingerbread jelly beans topping.
</div>

In the CSS stylesheet, an id selector starts with a # followed by the the identifier.

#idSelector {
  font-size: 20px;
}

Attribute selectors

All HTML elements can have attributes which provide additional features to the element.
Attributes are defined as name/value pairs like: name="value" but some can only have a name.

  <button disabled>Click me</button>

In the CSS stylesheet, an attribute selector is enclosed withing square backets [ ].

[disabled] {
  color: grey;
  font-size: 20px;
}

Styles Orders & Priorities

As we have seen so far, we can define multiple CSS rules using multiple type of selectors.
It is good to note, as we keep defining more and more CSS rules to enhance our HTML look and feel, each rules will have different priorities based on:

how they are applied
their order

If we apply two CSS classes to the same element and both preform the same type of styling, the styling declared in the class at the last (at the bottom most) will be the one taking effect.

.redText {
  color:red;
}

.greenText {
  color:green;
}

<div class="redText greenText">What color am I ?</div>

In the screenshot below we can see that the broswer has crossed out the CSS rule of the .redText class and prioritised the one of the .greenText class.

If we have an id selector and a class selector targeting the same html element. The CSS rules defined in by the id selector takes predecence over the class selector.

#aquamarine {
  background: aquamarine;
}

.red {
  background:red;
}

<div  id="aquamarine" class="red">What color is my background ?</div>

In the screenshot below we can see that the broswer has crossed out the CSS rules of the.red class selector prioritised the one of the #aquamarine attribute selector.

Now, if we have an inline styling, a CSS rule with id selector and a CSS rule withclass selectors.
The order of precedence is:

first: inline styling
second: id selector
third: class selector

#aquamarine {
  background: aquamarine;
}

.red {
  background:red;
}

.green {
  background:green;
}

<div style="background: pink" id="aquamarine" class="red green">What color is my background ?</div>

In the screenshot below we can see that the broswer has crossed out all CSS rule, except for the element.style which is the inline styling.

CSS means
: Cascading Style Sheet.

Cascading means
: The styles (css rules) can fall (or cascade) from one style sheet to another.

Therefore, to avoid conflicts from multiple rules overlapping, the browser assign each stype of selector a specificity .

Order of Specificity

Specificity	Selector Type
Highest	Inline Styles
Higher	`#`ID selectors
High	`.`class , `:`pseudo-class and `[`attribute`]` selectors
Low	`<tag>` and `::`pseudo-element selectors

If two or more rules target the same element and set different styles for the same property, this conflict needs to be resolved.

Specificity is all about resolving conflicts that arise from multiple CSS rules, which target the same element.

Inheritance

In an html document, html elements are often nested one inside another.

For example below, the div div elements are nested withing thebody element.
And each of the three div elements have different child elements.

<body>
    <div>
        <p>Hello 1</p>
    </div>
    <div>
        <span>Hello 2</span>
    </div>
    <div>
        <div>Hello 3</div>
    </div>
</body>

The child element (the one nested inside the parent element), inherits the styles applied to the parent element. However, the order of specificity/priority still applies and any styling applied to the child element will take precedence over the parent's styling.

In this example below, the div elements are nested inside of a body .
All child elements will inherit the font-size: 20px and background: gold styling.
However, some child div elements have the value of the property background reassigned.

body {
  font-size: 20px;
  background: gold;
}
#aquamarine {
  background: aquamarine;
}
.red {
  background:red;
}

<div  id="aquamarine" class="red">What color is my background ?</div>

Combinators

Combinators make it easy to target specific html elements by combining two or more selectors.

Selecting only elements having .red class.

.red {
  color: red;
}

Selecting only div elements having a nested p element.

div p{
  background: yellow;
}

Selecting onlydiv elements having a nested p element specfically with a .red class.

div p.red{
  font-size: 30px;
}

<div class="red">Cupcake lemon drops bonbon.</div>
<div>Lungo percolator, single origin so milk rich, breve rich body mocha a extra.</div>
<div><p> Biscuit brownie donut marshmallow chocolate bar jelly beans macaroon.</p></div>
<div>
  <p class="red">Cup, irish arabica, flavour body redeye doppio extra single shot espresso. </p>
</div>

Types of Combinators

There are 4 types of combinators:

Adjacent Sibling Selector. Combined by a + sign. div + p { }
General Sibiling Selector. Combined by a ~ sign. div ~ p { }
Child Selector. Combined by a > sign. div > p { }
Descendant Selector. Combined by a *a white space *. div p { }

A combinator is a CSS feature which allows you to combine two selectors in a dependent way.

Combinators (~, +, >) tie two selectors together.

Adjacent Sibling Combinator Selector

Combined by a + sign.

The Adjacent Sibling Combinator Selector assigns a style only to the second element directly after the first element.

❕ Note:
: The sibblings must share the same parent.
: The second element must come immediately after the first element.

h1 + div {
  color: red;
}

h2 + h3 {
  color: blue;
}

<div>
  <h1>1. No CSS applied</h1>
  <div>2. Adjacent Sibling</div>
  <h2>3. No CSS applied</h2>
  <h3>4. Adjacent Sibling</h3>
  <div>5. No CSS applied</div>
  <div>6. No CSS applied</div>
  <h1>7. No CSS applied</h1>
  <div>8. Adjacent Sibling</div>
</div>

General Sibiling Combinator Selector

Combined by a ~ sign.

The General Sibiling Combinator Selector assigns a style to any sibiling element placed after the first element.

❕ Note:
: The sibblings must share the same parent.
: The second element must come after the first element, not necessarily immediately after.

h1 ~ div {
  color: red;
}

h3 ~ div{
  color: blue;
}

<div>
  <h1>1. No CSS applied</h1>
  <div>2. General Sibling</div>
  <h2>3. No CSS applied</h2>
  <div>4. General Sibling</div>
  <h3>5. No CSS applied</h3>
  <div>6. General Sibling</div>
  <div>7. General Sibling</div>
  <h1>8. No CSS applied</h1>
  <div>9. General Sibling</div>
</div>

Child Combinator Selector

Combined by a > sign.

The Child Combinator Selector assigns a style to any child element placed directly under the parent element.

❕ Note:
: Second element must be a direct child of the first element.

section > div {
  color: red;
}

span > div {
  color: blue;
}

<section>
  <h1>1. No CSS applied</h1>
  <div>2. Child Selector</div>
  <h2>3. No CSS applied</h2>
  <div>4. Child Selector</div>
  <h3>5. No CSS applied</h3>
  <div>6. Child Selector</div>
  <article>
      <div>7.1 No CSS applied</div>
  </article>
  <span>
      <div>7.2 Child Selector</div>
  </span>
  <h1>8. No CSS applied</h1>
  <div>9. Child Selector</div>
</section>

Descendant Combinator Selector

The Descendant Combinator Selector assigns a style to any child element placed anyware under the parent element.

❕ Note:
: The second element must be a descendant of the first element, not necessarily direct descendant.

section div {
  color: red;
}

<section>
  <h1>1. No CSS applied</h1>
  <div>2. Descendant Selector</div>
  <h2>3. No CSS applied</h2>
  <div>4. Descendant Selector</div>
  <h3>5. No CSS applied</h3>
  <div>6. Descendant Selector</div>
  <article>
      <div>7.1 Descendant Selector</div>
  </article>
  <span>
      <div>7.2 Descendant Selector</div>
  </span>
  <h1>8. No CSS applied</h1>
  <div>9. Descendant Selector</div>
</section>

git rebase, 😎 --> 😱

Rishi — Wed, 06 May 2020 23:55:17 +0000

You keyed in git rebase , and pressed Enter like a 😎.

Then everything looks ...🔥... not exactly the same as you expected it.
🍒 you realised that you didn't push ⛅ any of your recent work and you're at a point of no return! 💨

😮

😨

😱

😰

😩

🙈

PANIC

💡

Here's a solution

Use git reflog - Manage reflog information.

In the terminal, type in git reflog.
You'll see a list of all recent commits.
Pick the one which you worked last.
In my case, commit 29b5617 was the one I needed to go back to.
git reset --hard 29b5617

Alternatively, git reset --hard HEAD@{17} would have worked exactly the same.

Let the rest know how you've survived an unwanted `git rebase` by leaving a comment.

Awesome SCSS: The basics

Rishi — Sun, 03 May 2020 20:45:30 +0000

The great thing about SCSS is that it makes CSS becomes more lively by adding variables, functions, logic and looping to it.
This opens a whole new level of flexibility to CSSS.

This article will give an overview of the variables & functions in SCSS. As for the logic and looping part, that will be in another article.

SCSS Variables

A variable is a 'container' which stores value.

In SCSS, variables start with a $ sign and end with a ;.
To make it easier to read, the variable name can be separated by a - or a _.
example:

$color-one: red;
$color_two: blue;
$color-three: orange;

h1 { color: $color-one; }
.blue { color: $color_two; }
#orange { color: $color-three; }

Variable Scopes

A variable can have global scope or local scope.

Global scope

Globally scoped variables are generally 'declared' at the beginning/top of the SCSS file outside any curly braces { }.
In the example below: $color-one is globally scoped.

$color-one: red; 

h1 { color: $color-one; }

Local scope

Locally scoped variables are created within the curly braces { }.
In the example, $color-five, which is globally scoped, has been initially assigned a value of black.
Later on, it has been assigned a new value of purple.
Since this assignment is within { }, we say that it is locally scoped.
The new value will persist only within the { } and not elsewhere.

$color-one: red; 
$color-five: black;

h1 {
  color: $color-one;
}
.newColor {
  $color-five: purple;
  color: $color-five;
  border: 1px solid $color-five;
}

We can use !global to enforce the value of a local variable globally, but it is not recommended. Hence, I'm not showing any example.

Nesting in SCSS

Nesting makes the code easier to read.

Avoid nesting many levels, it'll make the code harder to read & understand.

To nest pseudo-classes, we need to prepend the pseudo-class with a &.
Example &:hover.

$size: 3em;
$color: blueviolet;
$color-hover: red;

/* Nesting with SCSS */
nav {
  ul li {
    background-color: lime;
    text-decoration: none;
  }
  a {
    font-weight: bold;
    &:hover {
      color: $color-hover;
      font-size: $size;
    }
  }
}

/* Normal CSS */
a {
   font-size: $size;
   color: $color;
   text-decoration: none;
}
a:hover{
   color: green;
   font-size: 2em;
}

Mixins

Mixin is a block of reusable CSS styles grouped together.
Did I mention "reusable"?

We declare a mixin by using @mixin followed by a name.

To call/use a mixin, we use @inlcude followed by the mixin name.

@mixin headingStyles {
  background-color: $color;
  text-align: center;
}

.header {
  @include headingStyles;
}

Mixin parameter

Mixin parameter: single + default value

Mixin can accept a parameter.
That parameter can be given a default value if required.

$font-lg: 2em;

@mixin headingFont($size: 3em) {
  color: $color-second;
  font-size: $size * 2;
}

.header {
  @include headingFont($font-lg);
}

Mixin parameters: multiple

To pass in more than one parameter, we need to use a parameter name followed by ... 3-dots.

@mixin myTransition($params...) {
  transition: $params;
}

.text {
    @include headingFont();
    @include myTransition(color .5s, background-color 1s);

     &:hover {
      color: $color;
      background-color: $color-second;  
  }
}

Extend

Extends allows one selector to inherit styles of another selector.
Like @mixin, @extend allows us to write cleaner and better code.

.heading {
  color: red;
  background-color: gold;
}

h1 {
  @extend .heading;
}

h2 {
  @extend .heading;
  text-align: center;
}

Placeholder Selectors

If we have classes which are not used anywhere, we can make them become placeholders by replacing the . with a %.
For example an unused .heading becomes %heading.

Then we call it similarly as @extend.

%heading {
  color: red;
  background-color: gold;
}

%toolbelt {
  box-sizing: border-box;
  border-top: 1px rgba(#000, .12) solid;
  padding: 16px 0;
  width: 100%;

  &:hover { border: 2px rgba(#000, .5) solid; }
}

h1 {
  @extend %heading;
}

h2 {
  @extend %heading;
  text-align: center;
}

p {
  @extend %toolbelt;
}

Functions

Functions, like in all programming languages, allows us to execute the block of logic multiple times.

A function is declared with @function followed by a name, similar to a mixin.
However, a function has to return a value. To do so we use the @return keyword.

The function can also accept a parameter.

$size: 4em;

@function setFontSize($newSize: 1em) {
  @return $newSize;
}

@function doubleFontSize($newSize: 1em) {
  @return $newSize * 2;
}

.normal {
  font-size: setFontSize();
  color: red;
}

.biggest {
    font-size: setFontSize($size);
    color: green;
}

.doubled {
  font-size: doubleFontSize();
  color: blue;
}

Built-in Functions

SCSS comes with many useful functions.

$orange-color: orange;

.orange {
  background-color: $orange-color
}

.orange-lighten {
  background-color: lighten($orange-color, 25%);
}

.orange-darken {
  background-color: darken($orange-color, 10%);
}

.mixed-color {
  background-color: mix($orange-color, blue);
  color:white;
}

A whole list of functions can be found here ➡️ https://www.rubydoc.info/github/sass/sass/Sass/Script/Functions

Learn Python: Lists

Rishi — Sat, 02 May 2020 20:09:37 +0000

A list is a variable which can hold multiple values.

list_of_alpahbet = ['a','b','c','d'];
list_of_numbers= [1,2,3,4,5]
list_of_fruits = ['🍎','🍊','🍐','🥑','🥝','🍓','🍋','🍍']
mixed_list = ['a','b', 1,2, '🍓','🍋']

print(list_of_alpahbet)
print(list_of_numbers)
print(list_of_fruits)
print(mixed_list)

Generally, you want to keep your list homogeneous. That is, you want to keep elements of similar type within a list.
In the example, the first 3 lists (list_of_alpahbet, list_of_numbers, list_of_fruits) are recommended. The 4th list (mixed_list) isn't as it is not homogeneous.

Accessing elements in a list

Elements stored within a list can be accessed via their index.
The first element always has an index value of 0.

list_of_alpahbet = ['a','b','c','d'];
list_of_numbers= [1,2,3,4,5]
list_of_fruits = ['🍎','🍊','🍐','🥑','🥝','🍓','🍋','🍍']
mixed_list = ['a','b', 1,2, '🍓','🍋']

print(list_of_alpahbet[0])
print(list_of_numbers[1])
print(list_of_fruits[2])
print(mixed_list[3])

Nested lists

A list can be nested within another list.

# Nested lists
fruits_names = [
  ['Strawberry', '🍓'],
  ['Lemon', '🍋'],
  ['Pineapple', '🍍']
]

### Accessing the first list within a list.
print(fruits_names[0])

### Accessing the first value of the first nested list.
print(fruits_names[0][0])

Number of elements in a list.

To evaluate the number of elements in a list, we use the len() function.

list_of_fruits = ['🍎','🍊','🍐','🥑','🥝','🍓','🍋','🍍']

print(len(list_of_fruits));

Adding new elements to a list

Use .append() to add new elements to a list.

fruits_names = [
  ['Strawberry', '🍓'],
  ['Lemon', '🍋'],
  ['Pineapple', '🍍']
]

## Adding a new element to the list
fruits_names.append(['Avocado', '🥑'])

print(fruits_names)

Removing from list

Use .remove() to remove an element from a list.

fruits_names = [
  ['Strawberry', '🍓'],
  ['Lemon', '🍋'],
  ['Pineapple', '🍍']
]

## Removing an element from the list
fruits_names.remove(['Lemon', '🍋'])

print(fruits_names)

Learn Python: Booleans & Comparisons

Rishi — Sat, 02 May 2020 14:32:02 +0000

Simply Booleans

Checking for truthy or falsy.

Description	Operator
Truthy	`True`
Falsy	`False`
Greater than	`>`
Less than	`<`
Greater or equal to	`>=`
Less or equal to	`<=`
Equals to	`==`
Assignment	`=`

truthy = True
falsy = False
print(truthy);
print(falsy);

LEGAL_AGE = 18
age = int(input("Enter your age:"));
is_over_legal_age = age >= LEGAL_AGE;
print(f"User is OVER legal age: {is_over_legal_age}")

is_under_legal_age = age < LEGAL_AGE;
print(f"User is UNDER legal age: {is_under_legal_age}")

is_twenty = age == 20;
print(f"User is 20 years old: {is_twenty}")

is_eighteen = age == 18;
print(f"User is 18 years old: {is_eighteen}")

`bool()`

bool() is a function which takes in a parameter and evaluates it to either True or False.

print(f"Integer 0 is evaluated to: {bool(0)}")
print(f"An empty character '' is evaluated to: {bool('')}")
print(f"Positve number 1 is evaluated to : {bool(1)}")
print(f"Negative -1 is evaluated to: {bool(-1)}")
print(f"A string 'abc' is evaluated to : {bool('abc')}")

`and`

and gives you the first value if it is False, otherwise, it gives you the second value.

print(f"True and True: { True and True}");
print(f"False and False: { False and False}");
print(f"True and False: { True and False}");
print(f"False and True: { False and True}");

Let's compare some numbers and some strings.

print(f"True and True: { bool(10) and bool(10)}");
print(f"False and False: { bool(0) and bool(10)}");
print(f"True and False: { bool(10) and bool(0)}");
print(f"False and True: { bool(0) and bool(10)}");
print()
print(f"10  and  10: { 10 and 10}");
print(f"0  and   0:  { 0 and 0}");
print(f"10  and   0:  { 10 and 0}");
print(f"0  and  10:  { 0 and 10}");
print()
print(f"'abc'  and  'xyz': { 'abc' and 'xyz'}");
print(f"''  and  '': { '' and 'xyz'}");
print(f"'abc'  and  '': { 'abc' and ''}");
print(f"''  and  'xyz': { '' and 'xyz'}");

`or`

or gives you the first value if it is True, otherwise it gives you the second value.

print(f"True or True: { True or True}");
print(f"False or False: { False or False}");
print(f"True or False: { True or False}");
print(f"False or True: { False or True}");

Let's compare some numbers and some strings.

print(f"True or True: { bool(10) or bool(10)}");
print(f"False or False: { bool(0) or bool(10)}");
print(f"True or False: { bool(10) or bool(0)}");
print(f"False or True: { bool(0) or bool(10)}");
print()
print(f"10  or  10: { 10 or 10}");
print(f"0  or   0:  { 0 or 0}");
print(f"10  or   0:  { 10 or 0}");
print(f"0  or  10:  { 0 or 10}");
print()
print(f"'abc'  or  'xyz': { 'abc' or 'xyz'}");
print(f"''  or  '': { '' or 'xyz'}");
print(f"'abc'  or  '': { 'abc' or ''}");
print(f"''  or  'xyz': { '' or 'xyz'}");

`not`

not negates any boolean value.
not True is evaluated to False.
not False is evaluated to True.

print(f"True: { True}" );
print(f"not True: {not True}" );
print()
print(f"False: { False}" );
print(f"not False: {not False}" );
print()
print(f"35: { 35}" );
print(f"not 35: {not 35}" );
print()
print(f"'': { ''}" );
print(f"not '': {not ''}" );
print()
print(f"'abc': { 'abc'}" );
print(f"not 'abc': {not 'abc'}" );

Learn Python: Getting user input

Rishi — Sat, 02 May 2020 12:26:51 +0000

`input()`

input() prompts the user for an input then passes the captured value(s) to a variable as a string.


question = "Hello, what is your name?"
print(question)

username = input("Enter your name: ")

welcome_message = f"Hello {username}, Welcome!"
print(welcome_message);

Formatting input

By default, the input is of type string.
If we attempt an arithmetic calculation on this input (string multiplied by an integer), we'll end up having an 'interesting' result 😂

age = input("Enter your age: ")
message = f"You have lived for {age * 12} months."
print(message)

To avoid this we'll need to convert the string into an integer.

age = input("Enter your age: ")
age_number = int(age)
message = f"You have lived for {age_number * 12} months."
print(message)

Simplifying... but not good practice.

age = int(input("Enter your age: "))
message = f"You have lived for approximately {age * 365} days."
print(message)

It is good practice to keep the calculations separate from the message template.
It makes the code easier to understand, debug & maintain.

age = int(input("Enter your age: "))

# constants
DAYS_IN_YEAR = 365
HOURS_IN_A_DAY = 24
MINUTES_IN_AN_HOUR = 60
SECONDS_IN_A_MINUTE = 60

#calculation
age_in_seconds = age * DAYS_IN_YEAR * HOURS_IN_A_DAY * MINUTES_IN_AN_HOUR *  SECONDS_IN_A_MINUTE

message = f"You have lived for approximately {age_in_seconds} seconds."
print(message)

DEV Community: Rishi

Be an Energy Radiator: Ignite Your Influence

Why Be an Energy Radiator?

How to Be an Energy Radiator

1. Be Visible:

2. Connect Deeply:

3. Explain Your Decisions:

4. Encourage Your People:

5. Project Positivity:

6. Watch Your Language:

7. Celebrate Effort as Well as Success:

8. Be Approachable:

9. Keep Perspective:

Leaders Who Inspire

Artists and Entertainers Who Captivate

Everyday Heroes

Common Traits of Energy Radiators

Embarking on the journey of becoming an energy radiator is exciting!

Finding Your True North: A Concise Guide to Authenticity

The Stories Within

Be You, Unapologetically: Bullet points to Authenticity

Learn Python: Sets

Benefits of sets

Set Operations

Difference

Symmetric Difference

Intersection

Union

Learn Python: Tuples

Creating new tuple.

A Tuple is Immutable

npm ERR! Unexpected end of JSON input while parsing near

CSS - Let's dive deeper in the basics.

Let's think inside the box!

Default margin

By the browser

Margin Collapsing

Shorthand properties

Shorthand properties in action

Width & Height

Width

Height

Box Sizing

box-sizing Reset Method

Display Property

display: none v/s visibility:hidden

Pseudo Classes

Dynamic pseudo-classes

UI element states pseudo-classes

Structural pseudo-classes

Other pseudo-classes

Pseudo Elements

Pseudo what???

Grouping CSS Rules

How can I improve?

Motivate me to write more

🙏

CSS - Diving inside the basics.

How to make use of CSS?

1. Inline Styling

2. Style Tag

A "rule" in CSS is a combination of at least one selector (WHAT TO STYLE) and at least one css declaration (HOW TO STYLE IT).

3. Using an External Style Sheet.

Advantages of using an external Style Sheet:

Selectors, Properties & Values

Element selectors

Class selectors

Universal selector

Id selectors

Attribute selectors

Styles Orders & Priorities

Order of Specificity

If two or more rules target the same element and set different styles for the same property, this conflict needs to be resolved.

Specificity is all about resolving conflicts that arise from multiple CSS rules, which target the same element.

Inheritance

Combinators

Types of Combinators

A combinator is a CSS feature which allows you to combine two selectors in a dependent way.

Combinators (~, +, >) tie two selectors together.

Adjacent Sibling Combinator Selector

`box-sizing` Reset Method

`display: none` v/s `visibility:hidden`

Let the rest know how you've survived an unwanted `git rebase` by leaving a comment.

`bool()`

`and`

`or`

`not`

`input()`