Forem: Ramya Chinnadurai

CSS Pseudo-elements and CSS Pseudo-classes Demystified

Ramya Chinnadurai — Mon, 08 Nov 2021 11:56:22 +0000

Hey there, today I picked the topic CSS Pseudo-elements and Pseudo-classes, You may ask why? it's because I was little bit confused with the pseudo-elements and pseudo-class. So I just want to make clear about this today and thought to share my learnings here.

Pseudo-elements and Pseudo-classes are some of the cool concepts of CSS. So learning it will surely help you when you want to design with CSS.

So what is Pseudo-element?

A CSS pseudo-element is used to style specified parts of an element.

For example, it can be used to:

Style the first letter, or line, of an element
Insert content before, or after, the content of an element

Syntax

The syntax of pseudo-elements:

selector::pseudo-element {
  property: value;
}

And what are Pseudo-classes?

A pseudo-class is used to define a special state of an element.

For example, it can be used to:

Style an element when a user mouses over it
Style visited and unvisited links differently
Style an element when it gets focus

Syntax

The syntax of pseudo-classes:

selector:pseudo-class {
  property: value;
}

Can you find the difference in syntax?

Notice the double colon notation - ::first-line versus :first-line

The single-colon notation for pseudo-classes and double-colon notation used for pseudo-elements in CSS3.

This was an attempt from W3C to distinguish between pseudo-classes and pseudo-elements.

Examples of CSS Pseudo Elements

Selector	Example	Description
::after	p::after	Insert something after the content of each ``` ``` element
::before	p::before	Insert something before the content of each ``` ``` element
::first-letter	p::first-letter	Selects the first letter of each ``` ``` element
::first-line	p::first-line	Selects the first line of each ``` ``` element
::marker	::marker	Selects the markers of list items
::selection	p::selection	Selects the portion of an element that is selected by a user

Examples of CSS Pseudo Classes

Selector	Example	Example description
:active	a:active	Selects the active link
:checked	input:checked	Selects every checked `````` element
:disabled	input:disabled	Selects every disabled `````` element
:empty	p:empty	Selects every ``` ``` element that has no children
:enabled	input:enabled	Selects every enabled `````` element
:first-child	p:first-child	Selects every ``` ``` elements that is the first child of its parent
:first-of-type	p:first-of-type	Selects every ``` ``` element that is the first ``` ``` element of its parent
:focus	input:focus	Selects the `````` element that has focus
:hover	a:hover	Selects links on mouse over
:in-range	input:in-range	Selects `````` elements with a value within a specified range
:invalid	input:invalid	Selects all `````` elements with an invalid value
:lang(language)	p:lang(it)	Selects every ``` ``` element with a lang attribute value starting with "it"
:last-child	p:last-child	Selects every ``` ``` elements that is the last child of its parent
:last-of-type	p:last-of-type	Selects every ``` ``` element that is the last ``` ``` element of its parent
:link	a:link	Selects all unvisited links
:not(selector)	:not(p)	Selects every element that is not a ``` ``` element
:nth-child(n)	p:nth-child(2)	Selects every ``` ``` element that is the second child of its parent
:nth-last-child(n)	p:nth-last-child(2)	Selects every ``` ``` element that is the second child of its parent, counting from the last child
:nth-last-of-type(n)	p:nth-last-of-type(2)	Selects every ``` ``` element that is the second ``` ``` element of its parent, counting from the last child
:nth-of-type(n)	p:nth-of-type(2)	Selects every ``` ``` element that is the second ``` ``` element of its parent
:only-of-type	p:only-of-type	Selects every ``` ``` element that is the only ``` ``` element of its parent
:only-child	p:only-child	Selects every ``` ``` element that is the only child of its parent
:optional	input:optional	Selects `````` elements with no "required" attribute
:out-of-range	input:out-of-range	Selects `````` elements with a value outside a specified range
:read-only	input:read-only	Selects `````` elements with a "readonly" attribute specified
:read-write	input:read-write	Selects `````` elements with no "readonly" attribute
:required	input:required	Selects `````` elements with a "required" attribute specified
:root	root	Selects the document's root element
:target	#news:target	Selects the current active #news element (clicked on a URL containing that anchor name)
:valid	input:valid	Selects all `````` elements with a valid value
:visited	a:visited	Selects all visited links

References

Hope you get an idea about pseudo-elements and pseudo-classes. Thanks for taking your time and reading this article. This article was originally published in my blog.

If you found this article useful do follow me on Twitter. Feel free to contact me anytime to discuss or share your ideas.

A guide to HTML5 semantic Elements

Ramya Chinnadurai — Sun, 24 Oct 2021 18:01:35 +0000

Whenever I start any new website, I just simply starts with the <div> to structure the HTML. But recently I came to know about these semantic tags to structure the website. I was like, oh wait, what all these tags? why should I use it 🤯 ?

Then started my research about these semantic elements, and was like oh god! why I missed this these many days. So thought to share my learnings about these helpful tags.

What is semantic and non-semantic elements?

Semantic elements = elements with a meaning.

A semantic element clearly describes its meaning to both the browser and the developer.

Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.

Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.

All good, So why should I use semantic elements?

1. It's easier to read

This is probably the first thing you will notice when looking at the first block of code using semantic elements.
This is a small example, but as a programmer, you can be reading through hundreds or thousands of lines of code.
The easier it is to read and understand that code, the easier it makes your job.

2. It has greater accessibility

We are not the only one that finds semantic elements easier to understand.
Search engines and assistive technologies (like screen readers for users with a sight impairment) are also able to better understand the context and content of your website, meaning a better experience for your users.

3. It leads to more consistent code

When creating a header using non-semantic elements, different programmers might write this as <div class="header">, <div id="header">, <div class="head">, or simply <div>.
There are so many ways that you can create a header element, and they all depend on the personal preference of the programmer.
By creating a standard semantic element, it makes it easier for everyone.

Let's discuss some confusing similar tags!

1. `<section>` and `<article>`

“What’s the difference?”, you may ask.
Both these elements are used for sectioning content, and yes, they can definitely be used interchangeably. It’s a matter of in which situation.

HTML4 offered only one type of container element, which is <div>.

While this is still used in HTML5, HTML5 provided us with <section> and <article> in a way to replace <div>.

The <section> and <article> elements are conceptually similar and interchangeable. To decide which of these you should choose, take note of the following:

An article is intended to be independently reusable.
A section is a thematic grouping of content.

<section>
  <p>Top Stories</p>
  <section>
    <p>News</p>
    <article>Story 1</article>
    <article>Story 2</article>
    <article>Story 3</article>
  </section>
  <section>
    <p>Sport</p>
    <article>Story 1</article>
    <article>Story 2</article>
    <article>Story 3</article>
  </section>
</section>

2. `<header>` and `<hgroup>`

The <header> element is generally found at the top of a document, a section, or an article and usually contains the main heading and some navigation and search tools.

<header>
  <h1>Company A</h1>
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact us</a></li>
  </ul>
  <form target="/search">
    <input name="q" type="search" />
    <input type="submit" />
  </form>
</header>

The <hgroup> element should be used where you want the main heading with one or more subheadings.

<hgroup>
  <h1>Heading 1</h1>
  <h2>Subheading 1</h2>
  <h2>Subheading 2</h2>
</hgroup>

REMEMBER, that the <header> element can contain any content, but the <hgroup> element can only contain other headers, that is <h1> to <h6> and including <hgroup>.

3. `<figure>` and `<figcaption>`

<figure> is for wrapping your image content around it, and <figcaption> is to caption your image.

<figure>
  <img src="https://en.wikipedia.org/wiki/File:Shadow_of_Mordor_cover_art.jpg" alt="Shadow of Mordor" />
  <figcaption>Cover art for Middle-earth: Shadow of Mordor</figcaption>
</figure>

4. `<cite>` and `<mark>`

The <cite> element is used to describe a reference to a cited creative work and must include the title of that work. The reference may be in an abbreviated form according to context-appropriate conventions related to citation metadata.

<figure>
    <blockquote>
        <p>It was a bright cold day in April, and the clocks were striking thirteen.</p>
    </blockquote>
    <figcaption>First sentence in <cite><a href="http://www.george-orwell.org/1984/0.html">Nineteen Eighty-Four</a></cite> by George Orwell (Part 1, Chapter 1).</figcaption>
</figure>

The <mark> element represents text which is marked or highlighted for reference or notation purposes, due to the marked passage's relevance or importance in the enclosing context.

<p>Search results for "salamander":</p>
<hr>
<p>Several species of <mark>salamander</mark> inhabit the temperate rainforest of the Pacific Northwest.</p>
<p>Most <mark>salamander</mark>s are nocturnal, and hunt for insects, worms, and other small creatures.</p>

5. `<meter>` and `<progress>`

The <meter> element represents either a scalar value within a known range or a fractional value.

<label for="fuel">Fuel level:</label>

<meter id="fuel"
       min="0" max="100"
       low="33" high="66" optimum="80"
       value="50">
    at 50/100
</meter>

The <progress> element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

<label for="file">File progress:</label>

<progress id="file" max="100" value="70"> 70% </progress>

Unlike the <meter> element, the minimum value is always 0 for <progress>, and the min attribute is not allowed for the <progress> element.

References

1.https://www.w3schools.com/html/html5_semantic_elements.asp
2.https://developer.mozilla.org/en-US/docs/Web/HTML/Element
3.https://www.freecodecamp.org/news/semantic-html5-elements/

Thanks for taking your time and read this article. It was originally published in my blog.

If you found this article useful, just give a like and follow me on Twitter. Feel free to contact me anytime to discuss or share your ideas.

5 Tips for CSS responsive design

Ramya Chinnadurai — Sat, 23 Oct 2021 14:56:43 +0000

Choose Mobile-First Approach For responsive design

The best approach for responsive design is to design a mobile version of your website first.

This allows you to see how the images, text, logos, and other elements will look on smaller screens.

If they display without problems, then you shouldn’t have any problems adapting your design to larger screens.

Responsive starts with this meta tag

The first line of code to get started with responsive design is to be placed in the head section of the page. You must start with Responsive Header, placing this code inside the head of the HTML page.

<meta name="viewport" content="width=device-width, initial-scale=1">

Concepts covered

min()
max()
clamp()
box-sizing: border-box
overflow: hidden

1. Minimum ( min )

min selects the smallest (most negative) value from a list of comma-separated expressions.

For example, in the case of: min(1rem, 50%, 10vw), the browser calculates which of these relative units is the smallest, and uses that value as the actual value.

Reference - web.dev Try out this in codepen

2. Maximum ( Max )

The max() function selects the largest value from a list of comma-separated expressions.

Example: max(50vw, 400px), the browser determines which one is either the largest value respectively.

Reference - web.dev Try out this in codepen

3. Clamping values ( Clamp )

clamp() is the combination of the min() and max() functions, accepting three parameters:

the minimum value,
the preferred value, and
the maximum value

For example: clamp(45ch, 50%, 75ch)This allows for the browser to determine the width of the paragraph. It will set the width to 50% unless 50% is smaller than 45ch, at which point 45ch will be selected, and visa versa for if 50% is wider than 75ch.

Reference - web.dev Try out this in codepen

4. Box Sizing

One of the God properties of CSS, to overcome your responsive frustrations is box-sizing. It is an essential property for responsive website development.

1. Content box

The size of the box gets elaborate based on the content. When the site is viewed on mobile, the content box grows based on the content which makes the site scroll.

2. Border-box

If you use border-box on an element with a width set in per cent, it will take padding into account, so you’ll no longer need to adjust the width.

Needless to say, this trick works best for mobile websites and browsers with CSS3 support.

Reference - Pocket Gopher Try out this in codepen

5. Overflow Properties

Overflow: hidden is a handy CSS property that is helpful in many cases in addition to responsive design.

Instead of clearing divs, you can clear containers by simply setting the overflow value to hidden.

Overflow: hidden makes value hidden instead of scrolling the content.

Try out this in codepen .

Additional tip

Responsive Images

HTML offers the element that allows us to specify the exact image resource that will be rendered based on the media query we add.

Instead of having one image (usually a large, high-resolution version) sent to all screen sizes and scaling it to the viewport width, we specify a set of images to serve in specific situations.

<picture>
  <source media="(max-width:1000px)" srcset="picture-lg.png">
  <source media="(max-width:600px)" srcset="picture-mid.png">
  <source media="(max-width:400px)" srcset="picture-sm.png">
  <img src="picture.png" alt="picture">
</picture>

In this example, picture.png is the full-size image.

From there, we define the next-largest version of the image, picture-lg.png, and the size reduces in descending order until the smallest version, picture-sm.png.

Note that we’re still using media queries in this approach, but it’s the element itself that is driving the responsive behaviour rather than defining breakpoints in the CSS.

References

Thanks for taking your time and reading this article. This article was originally published in my blog.

If you find this useful kindly like this article and follow me Ramya Chinnadurai on Twitter. Feel free to connect me for sharing your ideas and suggestions.

Handful Github Repos for Full stack web developer

Ramya Chinnadurai — Fri, 22 Oct 2021 05:02:13 +0000

This article contains a list of useful GitHub repositories to help full-stack web developers to improve their skills.

It is structured in the following order,

Roadmap
Front end developer resources
Backend developer resources
Full-stack developer resources
Web development tools
Projects based learning
Free books and additional tools

1. Web Developer Roadmap

The roadmap is a guided way to start your journey to become a full stack developer. This repo contains the roadmap for a complete front-end, back-end and dev-ops learning pathway.

2. Design resources for Developers

It contains the curated list of design and UI resources from stock photos, web templates, CSS frameworks, UI libraries, tools and much more.

3. Frontend Web Development Resources

A practical journey of tools and resources to become front-end Web Developers.

4. Frontend Dev Bookmarks

The curated collection of resources for frontend web developers for appearance, architecture, compatibility, user interface and a lot more.

5. Frontend Interview Handbook

Contains Front End interview preparation materials for developers includes - pop quizzes, coding, front end system design and more!

6. Awesome Backend Engineer

A curated and opinionated list of resources for backend developers includes resources for networking, databases, security, architecture and more.

7. Ultimate Node js resources

This repo contains resources for Nodejs includes Github repos, books, blogs, youtube videos to refer and more.

8. JavaScript Algorithms and Data Structures

It contains Js based examples of many popular algorithms and data structures.

Each algorithm and data structure has its own related explanations and links for further reading (including YouTube videos).

9. 30 seconds of code

It contains a wide variety of ES6 helper functions includes helpers for dealing with primitives, arrays and objects, as well as algorithms, DOM manipulation functions and Node.js utilities.

10. Become a Full Stack Web Developer

It contains free resources for learning Full Stack Web Development which includes a complete learning journey to become a full-stack web developer.

11. Web Development Resources

Tools for web development includes illustrations, icons, fonts, templates, libraries and a lot more.

12. Free for Dev

It contains a complete list of software (SaaS, PaaS, IaaS, etc.) and other offerings that have free tiers for developers.

13. Tech Interview Handbook

Curated technical interview preparation materials to clear technical interviews.

14. Project-Based Learning

"Learn by doing" is the best approach to learn to code.

Here are programming tutorials in which you can learn to build an application from scratch.

These tutorials are divided into different primary programming languages.

15. Free Programming Books

Contains the list of books and resources for all programming languages in many languages.

16. Awesome

It contains Awesome lists about all kinds of interesting topics.

Thanks for taking your time and reading this article, it was originally written as Twitter thread, and posted in my personal blog ramyachinnadurai.in. If you have any suggestions or ideas to share feel free to contact me on Twitter.

How SMART todo lists will help you to reach goals faster

Ramya Chinnadurai — Wed, 30 Dec 2020 14:03:16 +0000

If you have the habit of avoiding planning for upcoming days and choose to do just as you go, the most common reason is you don't want to overload yourself with uncertainties. But the truth is more you try to avoid it, the more it creates the problem in the future. The power to make it certain is within us to see past the threats you must solve earlier and minimize them as much as possible.

Unless you experience, never knew the importance

Three months back, when I started to learn and build for my product, the hard part each day I had is, What should I do today? I used to think hours what should I do next. Think tons of ideas to implement for the next few days, feeling pumped up, would do nothing. I stuck in the same terrain for a few days. Only then, I started to plan for the week's tasks.

The second thing I got stuck with is postponing important tasks. I would have a list of items on my to-do list. Every time I would start with the easiest one first. I had the feeling those days, at least I would have completed one task if I choose the easiest one. Only then it creates more issues, the most important task I have to finish, keeps jumping to the next day.

Supercharge your tomorrow with SMART todo-list

Charles Duhigg shares a similar experience in his past and how this let to write his book - "Smarter, Faster, Better". For a to-do list to be really effective it has to do two things. Push us to do the most important task first and should exactly tell how it should get done.

He breaks this into elements that make the to-do list effective.

Stretch goals - A big ambition, at end of the day, our most important objective.
SMART goals - Taking that big ambition goal and breaking it into tasks that are smart, measurable, achievable, realistic, and timeline specific.

Best to-do lists are ones that remind us what to do next.

Action items

Let's categorize the goals we break down earlier and check whether it passes the SMART tasks.
To start with simple, let's list down the tasks that we are going to do in the next 3 days. Having a objective based on the week might push you to work ambitious every day and measure at end of the week.
Add the most important tasks to your personal to-do list and make sure to answer the question, what one thing will push you one step further each day.

Thought for the day

This article is written by Karthikeyan and co-authored by Rams.

This article was written as part of day 06 of the #14daysbreakloop challenge. Plan your weekly tasks - one thing that pushes you towards your big goal and keep an eye on not running out of your task list charge.
Install the extension now from Chrome Web Store and start working on your #100daysofcode. This article was originally published in blog.100daysof.codes

Celebrating small wins

Ramya Chinnadurai — Mon, 28 Dec 2020 14:43:22 +0000

Everybody wants big wins, thinking about being lauded by the family, friends, and society. But how often we had those big wins? While we are running towards the big wins, we missed the small wins that happen during the process.

Every big win is compounded by small wins. If we haven't thought of a way to celebrate, we should rethink our process. Because falling in love with the process is all we need. Big wins are rare. End we are chasing towards, may be successful or not. Take a look back and amplify the wins you had earlier and enjoy the journey. Celebrating little wins also rethinks the way we define our process.

Fall in love with the process

I still remember the time, I can't focus on much spending time for my #100daysofcode challenge in the initial days. I would do a project one day, then the next day, I would take a break. At first, I used to feel the moment when I completed the 100 days. But I realized this alone won't be enough to push me further each day. Between, it is so long.

A moment that changes me is the time I posted a daily challenge on Twitter. I got more support from the Twitter community for the work. It made me start working on this challenge again. Every day, in the end, I make sure to post the progress on Twitter. For myself, the reward I set for myself is this. This reward feedback loop pushes me each day to love the process of learning and building cool things. It might be a small win to feel satisfied with, but it's what drives us to be consistent.

You can better make use of celebrating these little wins by defining your reward prior, how you will celebrate at the end of the day, and plan your daily task to that moment. Don't worry. Reward you use to celebrate those little wins might be smaller for others. It is your journey. Learn to fall in love with each moment.

Action Points

Create your reward for your big win right now.
Every time you win, take some time to enjoy the moment 🎉. Just feel it.

Best moment

Between those small wins, I felt I have to secure the best wins from what I do. These drove me to an idea to record the best moment for a day's goal. The more I keep closing the difference between the most recent best moment, I feel better I am on the right track.

Thought for the day

This article is written by Rams and co-authored by Karthikeyan.

This article was written as part of day 05 of the #14daysbreakloop challenge. This article was originally published in blog.100daysof.codes. Install the extension from Chrome Web Store

Divide and conquer your dream goals

Ramya Chinnadurai — Sat, 26 Dec 2020 08:02:37 +0000

Achieving great things is not always working long hours and pushing yourself hard. It's about choosing the high ROI tasks that will impact our dream goals. It arrives us to a question, how do we break down bigger goals and make sure what we work on every day will take us one step closer.

To my surprise, the #100daysofcode challenge build a foundational system that I need to work on every day towards my goal. On top of this system, I decided to build my first product - 100daysof.codes. Next, I started to list down, list of skills that I need to improve on to reach the end goal.

Divide goals into batches

The first thing we might all tempt to do is start right away. I can realize the need to work on skills that I need to improve - Learning React in-depth, optimizing development time, learning firebase. But mostly, the realization happens when I hit the situation. I decided to split my #100daysofcode challenge routine for learning and separate time for product development. Slowly, I can outline my learning & development tasks, and easy to work.

Working in small batches

In the book Lean startup, there was an interesting part I could recall. A father and two daughters got into an argument when they need to stuff newsletters into envelopes. There are 100 enveloped, needs to be addressed, stamped, filled with a letter, and sealed. Father's point is, it needs to processed one envelope at a time. Both the daughters argued at first all 100 envelopes need to be filled and then sealed separately. When they challenged and started to work on it, the father won the challenge.

Our intuition doesn't take into account the time needed for intermediate switching and the cost of failure scenarios. We convince ourselves that we can complete it in a single take. But when we work in small batches, the learning is instant and we act on it our mistakes faster.

The answer I told myself for the right task

After I launched the product, how do I know what part of the task I worked on impacted, and what part not? I realized the importance of thinking backward while planning. Some of the daily tasks have not much impact and some contributed. The efficiency is not working in terms of hours and it is about minimizing the not so impactful task. It's not always about right, it's about learning faster from our mistakes.

Action Items

We have provided you a spreadsheet template here. Make a copy and list down every task you think of to work on that goal and try to answer each question below.
How impactful this will be to your end goal?
Skills need to acquire?
Consider you have failed to complete this task and think of listing down the reasons. It might be helpful to forecast and analyze possible failure scenarios.
How much time you estimate for completion?

Maintain this sheet every time you work on a task. It might be helpful when you need to analyze for an opportunity to improve yourself in the future.

Thought for the day

This article is written by Rams and co-authored by Karthikeyan.

This article was written as part of day 04 of the #14daysbreakloop challenge. This article was originally published in blog.100daysof.codes

If you want to follow your goals, learn to say no to alternatives

Ramya Chinnadurai — Fri, 25 Dec 2020 06:19:22 +0000

We are all raised by the feeling we can do everything. Our brain convinces us this every time. We want to go for a walk, hear a podcast, try to learn new things, and every time we feel proud of being multi-tasking. We try to push this to our goals too. We make plans for a month or a year, trying to bring every desire to reality. Our desires are countless, have their own will, working to nudge us in their selfish direction. But, our willpower is limited. Once it got exhausted, our brains start to lose focus.

It's not we are not competent to achieve a goal. Too many goals with their own willpower cancel out each other. The more direction you get pulled in, the less distance you'll travel.

I can relate to this when I was building an app and planning to launch it at the end of the month. First, I immediately start to plan with a bunch of features and push myself to develop them. As the deadline approaches, I had a bunch of fixes and undeveloped features. Sometimes I want to postpone the deadline a little further, hoping I can finish if there's a little more time. By the time I launch, I already exhausted a lot in the process.

We blame ourselves there isn't enough time in a day. We feel endlessly conflicted. And what happens to us is stronger than our ability to combat it. The clocks will never adjust for us to go beyond 24 hours. We should learn to say no to things that are not so important.

Perseverance to success comes with immense will power and self-control to say no to our temptations. We must train ourselves to say no to what doesn't matters to reach the goal without quitting. We can do this together.

Action items

Set your goal higher - More powerful and impactful it is, lesser the chance you think about other things.
Pick the tasks that only directly impacts your goal.
Never work on more than one objective at a time.
Always have your decisions noted. Remember why you are doing this. This will neutralize your idle wants.

Willpower - Super strength within to say no

When I was taking the #100daysofcode challenge, I got stuck in the initial days. Only when I said to myself, at the end of 100 days, I should have launched my product, I bring up my willpower to stay consistent. But this will be the hardest thing I think I had in the journey, always boosting my will to stay on track and postpone alternative desires for instant gratification. There were days I had my inner voice saying it's just one day to skip. To my experience, this is far more reason I said to myself for procrastinating.

Saying no to alternatives, preventing distractions all require powerful
inner strength. It sure cannot be built in a day, but it's the thing that
we should be working to improve every day. Powerful it is, the lesser the
chance we quit.

100daysof.codes developed primarily on this, focusing on working in smaller batches and picking one task enough to push one step ahead to the goal.

Thought for the day

This article is written by Rams and co-authored by Karthikeyan.

This article was written as part of day 03 of the #14daysbreakloop challenge. This article was originally published in blog.100daysof.codes.

If you want to follow your goals, learn to say no to alternatives

Ramya Chinnadurai — Wed, 23 Dec 2020 05:24:36 +0000

It's not we are not competent to achieve a goal. Too many goals with their own willpower cancel out each other. The more direction you get pulled in, the less distance you'll travel.

Action items

Set your goal higher - More powerful and impactful it is, lesser the chance you think about other things.
Pick the tasks that only directly impacts your goal.
Never work on more than one objective at a time.
Always have your decisions noted. Remember why you are doing this. This will neutralize your idle wants.

Willpower - Super strength within to say no

100daysof.codes developed primarily on this, focusing on working in smaller batches and picking one task enough to push one step ahead to the goal.

Thought for the day

This article is written by Rams and co-authored by Karthikeyan.

This article was written as part of day 03 of the #14daysbreakloop challenge and published in blog.100daysof.codes

How one ambitious goal will change you forever

Ramya Chinnadurai — Tue, 22 Dec 2020 13:56:13 +0000

On day 02, let's start focusing on the goals that matters. We have attached the sheets template with this article to help prioritizing your goals from the wishlist.

Passion + Measurable outcome at a point in time = End goal.

Have you ever felt stuck at some point questioning why are we doing this? And this where most of the time, we take wrong turns or stop what doing. Most of the tasks we intended to choose what we do every day are motivated by this - I can do this? But without passion and measuring how it will impact your life in both positive and negative ways, the likelihood of succeeding is less.

End goals are what remind us why we do what we do every day. And without why, we would lose the motivation to do in the long run.

Mihaly Csikszentmihalyi states it in the book Flow as,
"It is necessary to invest in goals that are so persuasive that they justify an effort even when our resources are exhausted and when fate is merciless in refusing us a chance at having a comfortable life."

It's easy to convince ourselves that the dot will connect in the future. Trust us, most of the time, it won't. Sometimes we have to place the dot with the end in mind.

Action points

We have provided you a spreadsheet template here. Make a copy and list down the goals.
Answer these questions for each goals - How passion are you?, How impactful this will be after X months?, Time expected?
It's good to have the list the next time you choose to work on a goal. Just make sure to question yourself, does it offer value more than others in the list. Your reason to why you have to choose to work this now.

Our end goal - At end of the #100daysofcode challenge, launch 100daysof.codes

I started #100daysofcode to improve my coding skills . I couldn't measure what is the right way or the wrong way at first. Choosing the goal to improve code doesn't help me measure. I had to take a break 2 - 3 times in between.

I decided to take some time and choose my end goal to build the product. I felt it was a better one for me, because.

Passion to build my own product.
Measurable - I can measure the impact it would have on my future.
Time bounded - I mark the calendar November 24 to launch it.

I was surprised at the end, how it made me push beyond the limit of what I thought earlier was a limit to me. I can able to measure I was coding better by the speed I could solve a problem. Learned the importance of having the system at first to reach the goal - settling myself every day at 7 pm to code, review the past actions, validating mistakes for positive outcomes.

It might be a harder one, but it is essential to drive you each day when
you chose your daily goal. That's why we chose to ask for the end
goal on the first screen when you installed the extension.

Thought for the day

This article is written by Rams and co-authored by Karthikeyan.

This article was originally published in blog.100daysof.codes

If you are waiting for 2021 to start your dream goal you should start working right now

Ramya Chinnadurai — Mon, 21 Dec 2020 07:13:00 +0000

Just do it.

It might be the easiest thing you said to yourself. And in the end, you always end up doing something else. The most common reason you said to yourself is that you will work on this from this month or year. Waiting for the perfect circumstances to start is the most common way of procrastinating.

I am the person who gets much excited from the arrival of the new year to the weekend to start work on dream goals. I always had a list of goals in the wishlist. And most of them are what I wished some years back. Yes, it indeed became a dream goal for me. Dreams that never became real.

Something interesting starts to happen when I started taking the #100daysofcode challenge. After a few struggles at first, I focused on the systems to reach my goal.

Push yourself to an environment that will help you reach your goals. You will see yourself you are working on it, one by one. For those still waiting for the moment to arrive, we created the #14daysbreakloop challenge.

We started this challenge to clear your top pending wishes before 2020 ends. This is the day 01 guide for the #14daybreakloop challenge and we will be posting a daily guide that we have learned in the #100daysofcode challenge that we wish could have learned sooner. If you are already taking the #100daysofcode challenge, we hope you get most of it or if you are a developer who wishes to get out of your comfort zone, we hope our tops will improve yourself to learn consistently.

If I didn't make the first step to start #100daysofcode, I wouldn't get this far - Learning what I once thought was a limit and support of the Twitter community. Everything begins with the first step.

At the first step, I felt to break your inner loop of procrastinating would be to start doing it right now.

Just pick the goal that you feel will improve yourself & start working on it right from now. Think of yourself at the end of 2021 without the skill in your goal list. How hard would it impact you? Just pick the one that will be most impactful.

Action Items

Feature backstory - Why 100daysof.codes was chose to be a new tab extension?

Being an enthusiastic person, I became to start adding the list of tasks to my task manager. My procrastinating brain never changes much. The tasks never get checked at all. I realize I should learn to be consistent in what I do. I started trying to write one task at a time and place it as post-it notes right before my eyes. Focusing my energy on one task at a time improves my productivity since I didn't have to think about rest.

The nearest design we could think of is when we open tabs in our browser. Hoping it might borrow our attention, we placed the question to what to do now, and once added, the task will be in the focus of each new tab.

Thought for the day

This article is written by Rams and co-authored by Karthikeyan.

This was originally published in the blog.100daysof.codes

My #100daysofcode Journey Into Founding Start-up

Ramya Chinnadurai — Sun, 29 Nov 2020 16:36:46 +0000

This article is written as a journey note of my #100daysofcode challenge. I have jotted down the experiences and how it all ends with founding a startup and building our first product 100daysof.codes.

Big thanks to the Twitter dev community for encouraging and supporting me continuously.

It's all starts with a tweet!

Two years back, when I was new to Twitter, I just explored with hashtags. Suddenly a hashtag with #100daysofcode reached maximum impressions, random bots retweeted my post and I hit maximum likes.

Suddenly I got much excited and explored about #100daysofcode. What is it? Why all are taking this challenge? What are the benefits? How to take this challenge? I was curious and explored even more and learned it as a challenge of coding a minimum of one hour a day and posting about what we did with the hashtag #100daysofcode for 100days. I was excited about the challenge and much interested in start taking it.

Trust me, it was my fourth attempt to be consistent!

Attempt 1 - Typical short time momentum

It was on June 5, 2020. With much curiosity and eagerness, I created a dedicated Twitter account to start and post my challenge. I started the challenge with a simple calculator. Everything starts out well, but the momentum fades out slowly, and on the 3rd day, I lost the motivation to continue the challenge.

Attempt 2 - External motivation is an ignition, but still need to learn to steer forward

Nearly a month after, I began the challenge again. This time inspired by cool ideas of the Twitter dev community. The challenge was to change the Twitter handle name dynamically with the follower’s count. My interest peaked again, let’s try doing this! Check out this tweet for that challenge. I had written a blog post about that experience. Twitter dev community is much awesome and supportive. Whenever you ask for any help, they are ready to help you any time. I reached maximum support and appreciation from the community after completing the challenge. Hoohoo! That was really a moment that boosts my motivation rocket. I started trying out a few project ideas as part of my challenges, but it wasn’t just enough to push me towards something newer every day.

I began to continue the challenge, but I used to skip the days, I don't have any end goal to do the challenge. I told myself that, it's okay to skip days in between. But days passed I got self-doubted, why I need to take this challenge? If my goal was to relearn things then why I need this challenge? I had completed around 6 days of challenge, only motivation was my community. There all are consistent in their challenge, but I felt really bad about my consistency. I self-doubted a lot with consistency. Later I decided I need to learn consistency than skills.

Attempt 3 - Searching for my internal trigger

I had completed around 6 days of challenge, only motivation was my community. I began to raise myself a few questions as self-doubted, why I need to take this challenge? Am I actually doing the right things to improve myself by taking this challenge or just an illusion?

I decided to re-learn & improve my development skills as a goal at the end of 100 days and start taking challenges again. But in only two days, I felt it wasn’t strong enough to push me around to commit dedicated apart from work hours.

Attempt 4 - Solid end goal matters when out for a long journey

I shared my experience with my friend Karthi. He shared his views on this - while the challenge to build consistency is hard in #100daysofcode, the problems are almost the same if we want to improve ourselves or a product. I realized the same of getting trapped into our muscle memory of never getting out of our comfort zone, while we are out for bigger goals.

We discussed if one thing we want to focus on most is being consistent in improving ourselves more than the development skill, and thought out like maybe we should focus on process and build it as a product at end of #100daysofcode from learning.

We planned to build an extension for 100daysofcode. Keeping this as my end goal, at the end of 100days, I should have built this as a product and launch it on November 24, I got much excited about the challenge ahead. All I need to focus on now is what I do each day that will push me closer to analyze if I make mistakes and learn the process first while staying consistent. To my surprise, it turns out a 91-day streak, I spent slowly get out of my comfort zone and finish #100daysofcode.

And, my learning journey starts...

Trust me, I did not know much about building any extension, lots of concepts we discuss redux-saga, which seems kind of buzz terms for me at the time.

My path to building the product unfolds before me. Learning how to build react app, using redux & building the extension. Several youtube videos were my primary learning source, helps me to get clear about building out an extension from scratch. There were few days, it was kind of blank to do what next as a challenge, there came freecodecamp as a rescuer.

Freecodecamp helps me to revisit and learn missed concepts as a daily challenge. I first completed the redux course in freecodecamp, still that I haven’t earned any certification. I decided to earn all certifications from the freecodecamp. In my 25th day challenge, I earned my first certification from fcc, and in the day 80 completed 6 certifications from the freedcodecamp.

Focus on building the system, day by day

I began the day with reading and ends the day by posting the challenge.
When I woke up, after finishing the daily routine, my first thing was to read a chapter and post the best points on Twitter and I used to do the challenge in the evening, after 6. It may sometimes take 2 hours or sometimes go up to 6 hours.

I made a rule to myself, I shouldn’t miss a streak and should learn something new on the day. In the mid of the challenge, I began to share the best lines from the book Atomic habits.

There is a quote in Atomic habits,

What’s the difference between goals and systems?

Goals are about the results you want to achieve.

Systems are about the processes that lead to those results.

All days are not the same

As I begin to slowly learn the concept, there were a few days, I feel not much satisfied though I spend 1-hour learning. We felt this is a natural condition for a long-term journey, we shouldn’t get much use to it. I often need to look back at the challenges done earlier, to analyze and ensure I am not getting too comfortable with it. There were 1 or 2 challenges I felt best in maybe a week or day, which I try to beat much often. Yes, self-competition is much powerful to know we are really improving daily.

It’s true that dots will connect backward

After around 60 days, we started discussing what works well & didn’t. And starts designing & developing the project during our non-office hours. Since it was part of my routine, I never logged it as part of my #100daysofcode :P

To improve my learning still, I got an udemy course as a gift as a giveaway. It’s a complete React course, which covers the entire react, redux, redux-saga, and best way to learn as a structured hands-on way to test out concepts I have learned earlier. TBH, it was my first Udemy course and I haven’t learned a structured course and think it would become as an end of #100daysofcode as a summarized version of my learning.

The Beginning of our next journey

We build 100daysof.codes, on 4 main things.

The strong end goal and that will drive why-power of daily goals is essential. The more we connected to our daily goals, the more chances we never break it down.
Beating out our personal self is essential to never get trapped into the comfort zone and focusing on daily goals that are of little value.
We need a single place to revisit our journey, self analyze to ask ourselves the question are we really doing what we should do to improve ourselves. And plan the upcoming tasks earlier for the week to not doing the mistake of planning on the go and doing random tasks as self-gratification.
Finally, as we have to see it frequently between our routines we decided it to be a new tab extension.

Here’s a sneak into my profile section, that I use to measure the progress.

While #100daysofcode laid the foundation to do coding every day, we build 100daysof.codes on the idea to focus on the system to achieve better results. But the necessity to focus on the process of bigger goals is everywhere. Though we focused on #100daysofcode and built it out from our experience, there is far more to focus on evaluating it to be effective for all and improve our product.

While starting the #100daysofcode, all I see as my challenge is to build the product to help others and get the most out of it to be a better developer. Now as I have built my product, I need a far stronger goal to push me even more forward and never back to the comfort zone.

A few days back, I and Karthik decided to take this as the next big journey to focus more on this product and bring more value to the community. We incorporated our startup and we are working now full time on this. Though we are only two, we are already focusing on our challenges to build a process in managing the product, development, and financial roadmap of us and the company.

Though everything feels the same while I was starting out #100daysofcode, it’s all changed when I push myself to a challenging environment around. We have the same confidence, we will learn much out of it in our journey ahead.

*Don't wait for motivation.
Just get started. *

Join with us now at 100daysof.codes and achieve your goal!

Thanks for taking the time to read my journey. Feel free to, contact me in Twitter or comment below.

Forem: Ramya Chinnadurai

CSS Pseudo-elements and CSS Pseudo-classes Demystified

So what is Pseudo-element?

Syntax

And what are Pseudo-classes?

Syntax

Can you find the difference in syntax?

Examples of CSS Pseudo Elements

Examples of CSS Pseudo Classes

References

A guide to HTML5 semantic Elements

What is semantic and non-semantic elements?

All good, So why should I use semantic elements?

1. It's easier to read

2. It has greater accessibility

3. It leads to more consistent code

Let's discuss some confusing similar tags!

1. <section> and <article>

2. <header> and <hgroup>

3. <figure> and <figcaption>

4. <cite> and <mark>

5. <meter> and <progress>

References

5 Tips for CSS responsive design

Choose Mobile-First Approach For responsive design

Responsive starts with this meta tag

Concepts covered

1. Minimum ( min )

2. Maximum ( Max )

3. Clamping values ( Clamp )

4. Box Sizing

1. Content box

2. Border-box

5. Overflow Properties

Additional tip

Responsive Images

References

Handful Github Repos for Full stack web developer

1. Web Developer Roadmap

2. Design resources for Developers

3. Frontend Web Development Resources

4. Frontend Dev Bookmarks

5. Frontend Interview Handbook

6. Awesome Backend Engineer

7. Ultimate Node js resources

8. JavaScript Algorithms and Data Structures

9. 30 seconds of code

10. Become a Full Stack Web Developer

11. Web Development Resources

12. Free for Dev

13. Tech Interview Handbook

14. Project-Based Learning

15. Free Programming Books

16. Awesome

How SMART todo lists will help you to reach goals faster

Unless you experience, never knew the importance

Supercharge your tomorrow with SMART todo-list

Action items

Thought for the day

Celebrating small wins

Fall in love with the process

Action Points

Best moment

Thought for the day

Divide and conquer your dream goals

Divide goals into batches

Working in small batches

The answer I told myself for the right task

Action Items

Thought for the day

If you want to follow your goals, learn to say no to alternatives

Action items

Willpower - Super strength within to say no

Thought for the day

If you want to follow your goals, learn to say no to alternatives

Action items

Willpower - Super strength within to say no

Thought for the day

How one ambitious goal will change you forever

Action points

1. `<section>` and `<article>`

2. `<header>` and `<hgroup>`

3. `<figure>` and `<figcaption>`

4. `<cite>` and `<mark>`

5. `<meter>` and `<progress>`