This article is a look back at a pivotal chapter of my life: how I landed the opportunity to work at Hashnode as a Customer Success Engineer (CSE), the wins I celebrated, the challenges I faced, and the lessons I’m carrying forward into the new year.

Working at Hashnode has been nothing short of transformative, opening doors I never imagined and pushing me to grow in ways I didn’t expect. Join me as I share my journey, the highs and lows, and how this incredible experience has shaped my year.

Getting the Call - (Before Hashnode)

On a faithful day, I was at a church program when I got the call from (Ayodele Samuel Adebayo , aka Unclebigbay) asking if I would like to work at Hashnode as a Customer Success Engineer.

Although I did not know much about the role at the time, I quickly jumped at the opportunity once he explained some of the responsibilities. I said yes, and that was it.

On November 30th, 2023, I received a follow-up email from Samuel officially introducing me to Sandeep (Officially because I had interacted with Sandeep casually before). That’s how the journey began!

Sandeep and I arranged a meeting, during which I learned what was expected of me, what I needed to know, and that I would be on trial for a week to determine whether I would be a valuable member of the team.

During the interview, I remember Sandeep mentioning that one of the core values the team was looking for is someone with a CEO mindset, someone who is proactive, takes action without being prompted, and has a sense of urgency. So, have I been able to meet these expectations? Well, you'll have to read further to find out 😉

After the interview, I started working on Dec 1st, 2023, but on trial to see if I was fit for the role and the team; oh boy, did I put in my best efforts doing the trial. I was given access to Discord, and other tools needed to work.

Before the first week ended, I received a message from Sandeep saying my “work trial“ was a success, and that’s how I started 🙏.

Early Days at Hashnode

The early days at Hashnode were full of learning. I needed to understand our team's vision, the products (Docs by Hashnode was being developed when I joined), and all the features. I also had to learn the best ways to communicate with our users about the various issues they encountered.

To give you an idea of what the role of a Customer Success Engineer (CSE) at Hashnode entails, here’s my scope of work:

• Customer Interaction: Handle customer queries, provide technical assistance, and ensure customer satisfaction.

• Product Knowledge: Maintain in-depth knowledge of Hashnode's features, capabilities, and updates.

• Feedback Loop: Collect and relay customer feedback to the product and development teams for continuous improvement.

• Training and Education: Educate customers on product features, usage, and best practices.

• Problem Solving: Address and resolve technical issues faced by customers.

• Community Engagement: Actively participate in community discussions, providing insights and technical support.

In short, my responsibilities as a CSE are to ensure our customers are satisfied with our products. This involves addressing customer queries, providing technical assistance, creating product documentation, and educating users. I also serve as a bridge between customers and the engineering team by relaying valuable feedback to help improve the product.

On the job, I got help from the team, helping the transition to the role, and looking back, I really disturbed my manager - Sandeep, with a lot of questions 😅

Over time, I became familiar with our customers' frequently asked questions, which helped me communicate and address their needs more effectively. For issues that required our engineers, I learned to ask the right questions to better convey them to the engineering team. I also became more mindful of how I respond to customers and handle the interesting issues they bring.

Highlights & Events & Outside Work

I promised myself that this year, I would make it a duty to try new things, go to more events than I had in previous years, network with like-minded people, and be exposed to other possibilities. I’d say I accomplished that.

Sailconf Africa

Sailconf Africa was the first event I attended this year, on May 17th, 2024. It was organized by Kelvin Omereshone, (the number 1 indie hacker I know) and targeted at mid-level and senior web developers in Africa.

Though my role is in CSE, I saw it as a means to see some big guys we have in tech Nigeria and a means to travel to a new location for the first time - Abuja, the capital of Nigeria. Thanks once again to my boss for allowing me to go to this event, and of course, I talked about Hashnode while I was there 😉.

During the conference, I emerged as the winner of the squiddy game challenge, with the prize of 1 Million naira, by God’s grace. This was my first time winning that kind of money, so it was a big deal to me; you could see the excitement in my smile 😊.

I got to meet the one and only David Herbert for the first time, Kelvin Omereshone, Olabode Lawal, Tobiloba, and other senior tech bro in the industry. It was really a memorable conference.

Speaking Engagements

This year, I was privileged to have three speaking engagements, during which I shared the little I think I know with a global audience. The very first engagement was with the Faraday Africa community, where I was invited to speak to new developers in their community on Web accessibility and SEO.

Build 2.0: Web Accessibility and SEO

Feel free to watch the session below

My next speaking engagement was at TIL Conf 2024, where I discussed The Benefits of using Hashnode Headless CMS for Your Blog. It was a big conference with many great speakers, so I felt really nervous about giving my talk 😅.

Also, this was my first time giving a talk about Hashnode, and I knew there would be a lot of people watching. To make matters worse, my time allocated for the talk clashed with the day I went to Sailconf Africa, so I had to reschedule the talk for the next day because my flight was delayed.

From the nervous feeling I had and not being able to get my laptop webcam working and then lending David Herbert a MacBook for the talk, I’d say I wasn’t as expressive with the talk as I previously planned. Well, I think it was okayish 😅

You can find the session here.

GraphQL 101: Learn to Build with GraphQL APIs

My last speaking engagement was the Hashnode Webinar hosted by. I was brought on board to share the most basic approach to using GraphQL APIs based on the Hashnode GraphQL API.

I believe I did well in this talk, and I’m proud of the session. What do you think? Do watch it and let me know.

The day I turned 22

Hashnode, Fazle, Sandeep, and the team made the day I turned 22 a very memorable day for myself and my family, and for that, I’m really grateful ❤️.

I was sent a huge cake, which made the day extra special. We just had to celebrate in our little way by getting drinks and taking pictures 😊

My mom told me to change my outfit twice for pictures 😅

Books Read

Oh, I'm glad to say I read books this year. I joined a book club started by my friend Jesugbogo Enis. It began as a "Read Two Books in April Challenge" but has now turned into a book club. My goal was to read 10 books before the year goes, but I ended up reading 6. Here are the books I’ve read with the help of the club.

The Psychology of Money by Morgan Housel

This was the first book we read, starting with the April challenge. In summary, I learned to think differently about money, how your environment can influence how you handle money, how saving and investing play a huge role in compounding wealth, the difference between getting wealthy and staying wealthy, and the importance of patience, humility, and long-term thinking.

It was really a good book, I recommend.

The Subtle Art of Not Giving a F*ck by Mark Mansion

This book highlights how much better we’d feel, improve, and succeed in areas of our life if we don’t pay attention to things we shouldn’t pay attention to, things that aren’t important. There were other insightful and interesting points highlighted by Mark, and I’d say it was a good read.

If you’re not comfortable with the F word, then I wouldn’t recommend, cause it was used a lot 😑

Unleash: The Blueprint for a Life that Attracts Uncommon Opportunities by Topsy Kola-Oyeneyin

The book Unleash was centered around youths (young ones) like myself, saying we aren’t too young to unleash our potential inert in us. There were a total of 12 dimensions mentioned in the book, around “How we are to operate”, “how to relate,” and “how to work, “ laying the blueprints we are following, unleashing uncommon opportunities.

This is my favourite book of the year, highly recommend for everyone, young and old.

Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones by James Clear

Atomic Habits, a book I’ve had since last year but never read completely until the book challenge in July, 2024 😅. The book focuses on laws, principles, and guidelines one can take to either break old habits or form a new habit. How tiny changes daily or frequently can compound to an unimaginable difference.

I do feel I need to re-read this book to digest the principles in the book, it’s really a good book for everyone to read, highly recommend.

Finish What You Start by Peter Hollins

Favourite, finish what you start….👀

That’s what I got out of the book. It spoke to me, saying I should finish what I had started and describing different techniques I can apply, like temptation bundling — a process of combining an undesirable task with a required task for instantaneous reward.

Honestly, I still struggle finishing what I start, for example the article took forever to be completed - if I wrote everyday I should have been done with it, but then…

If you see this article, and get to this point of the article, make sure to comment, congrats on finishing the article 😂

Well this is a good book to read, similar in some ways like Atomic Habits

How to Win Friends and Influence People by Dale Carnegie

Oh, what a great book this was. The book went on into the psychology of human interactions, where Part 1 mentioned the “Fundamental techniques in handling people”, Part 2: “Six ways to make people like you”, Part 3: “How to win people to your way of thinking” and Part 4: “Be a leader: How to change people without giving offense or arousing resentment.” Some of the principles from the book I keyed into are: Part 1 - Principle 2: Give honest and sincere appreciation; Part 3 - Principle 6: Let the other person do a great deal of the talking, Part 4 - Principle 7: Give the other person a fine reputation to live up to, e.t.c

The book is fill with gems for winning friends and dealing with people generally, a great book I must add and I highly recommend.

In the spirit of reading, I bought myself a new collection of books, and I’m looking forward to reading them next year.

If you have books you recommend, do let me know 😉

The books to the left and the new one’s I got.

Other Events and Highlights

Here are some of the other events I was privileged to attend over the course of the year:

• The Roundtable 3.0 - A Village Assembly for Young People Seeking More convener Kenny Ekezie 🤩

• DevFestLagos 👍

• Africa Startup Festival 🤩

• Impossible Submit 🤩🙏

• Weddings 😍

• Entrepreneurship Program with Olubori Paul 🤩

• Visited Samuel's home and worked with him 🤩

Dev work done at Hashnode

At some point, I missed coding, and I was looking for an opportunity to work on the codebase at Hashnode. Thankfully, Sandeep gave me an opportunity, and my first coding task was to develop the AI for Tomorrow hackathon page.

The hackathon page was fun to build, and there were a lot of “what I designed isn’t correctly implemented“ from Pritam Paul 😅

My major task was migrating the account settings page to the new layout you see today. Well working on this, I really went through the amazing code written by the other engineers, learning from the works and implementing. Ayodele Samuel Adebayo was my code reviewer along this journey, and it was great working with him 🤩

A work I’m proud of is building an app that allows users to migrate their blog from Ghost to Hashnode. At some point, I was getting a lot of requests regarding this same request, and unfortunately, we don’t support migrating from Ghost to Hashnode yet. While looking into the issue, I ended up building a solution, and I’m glad I got good feedback for the effort 😊.

Here’s the app, if you’d like to try it out.

A minor development work I worked on is the personalized feed widget you see on the community feed. Allowing users to personalize their feeds by following different tags.

Trip to India - Hashnode Workcation

The trip to India was my first international journey, and I must say, it was an incredible experience going abroad for the first time. Traveling on three planes from Nigeria to Bengaluru, India, was surreal; after thinking how it was going to be for too long, I’m glad everything worked out. Also, shout out to Kaijego for helping me with the Visa process and for tips I needed to know before traveling.

The Hashnode Workcation at Bengaluru (or Bangalore) was for a week, planned to bring the entire team together, to work together as a team in a physical location and to discuss our future plans for the company growth and, most importantly unwind which we did all.

I got to try out different Indian foods, like dosa and tea. Some foods were PRETTY GOOD, and others spicy, but I ended up liking Dosa.

While working, Haimantika Mitra and I, worked towards launching docs.hashnode.com - Hashnode new documentation. It was launched the following week after the workcation.

Do check the docs and let us know your feedback, it was great working on it and I’d love feedbacks from you all - docs.hashnode.com

We celebrated Lakshya Thakur for his 3rd year anniversary at Hashnode and also Jannik Wempe’s birthday 🥳

On our last day in Bangalore, I knew I had a lot of fun 😅. We explored a park, went jogging, had our last dinner together as a team, and played different games—go-karting, Laser tag, and Bowling.

Overall, the trip to India was a beautiful experience. I got to interact with everyone on the team present, and we had personal discussions—not just work-related ones. I also got to know everyone a little better.

Reflection

From joining Hashnode in 2020, trying new things, like technical writing and building connections, to now working for a global company. It’s been a journey, and I’m grateful to God for the privilege and opportunities.

Also, to the Hashnode team, my managers, Sandeep and Fazle, and my colleagues thank you for making the year extra special. I’m grateful. Especially to Samuel, thank you for the call and recommendation, I’m grateful 🙏

On December 1st, I also celebrated my 1st anniversary at Hashnode 🤩

As much as I feel I unlocked some boxes this year, I know there are areas where I felt too relaxed and need to step up in the coming year. These include

• writing about what I’m learning and sharing it here,

• reading and actually executing the knowledge I've gained,

• building more connections with people,

• advocating Hashnode and our products better and louder,

• broaden my horizons by exploring new things - stepping outside my comforts

• getting back to creating videos on my YouTube channel,

• learning more technical things so I don’t get lost and

• working towards growing my faith

Conclusion

2024 was a year beyond my expectations. I achieved some personal milestones I didn’t think were possible in a few years to come, as well as in my growth and life. I can’t wait to see what 2025 brings.

Thank you for reading and being part of my 2024 journey, and I wish you a Merry Christmas and a Happy New Year in advance 🎊.

Cheers to 2025 🥳

In the intricate world of web design today, typography serves as a powerful means of expression, improving site usability and it goes beyond the realms of font choice and sizes. In this article we’ll explore a sub-section of Web Typography, that is, dealing with CSS text outline, also known as typography stroke, along with the various methods we can follow to achieve stroke effect in CSS.

Web typography, often referred to as web text, constitutes a form of vector-based graphics within the digital landscape. This characteristic enables web typography to scale seamlessly, mirroring the behaviour of standard Scalable Vector Graphics (SVGs). The scalability of web typography is a key feature that ensures optimal visual experiences across a diverse range of devices and screen sizes.

In essence, the vector-based nature of web typography means that the characters are defined by mathematical equations rather than fixed pixels. This inherent flexibility allows text elements to adapt gracefully, maintaining clarity and legibility whether viewed on a small smartphone screen or a large desktop monitor.

Since we’ve established that Web typography is essentially vector-based graphics, then Web typography should also be able to do things just like design software that deals with vector-based graphics would, e.g. Adobe Illustrator.

What is Text Outline or Typography Stroke?

In the context of design, a “stroke” typically refers to the outline of a shape or text element. It is a visual attribute that adds a defined boundary to a shape or text, helping it stand out and providing emphasis. Meanwhile, a “fill“ refers to the interior area of a shape or object that is enclosed by its outline or border. It is the part of the element that is solid or filled with colour, pattern, or texture.

In the realm of typography, a “text stroke” or “typography stroke” or “text outline” specifically refers to the outlined border around the characters of a text.

Here’s an image that illustrate where the stroke and fill are located:

With CSS (Cascading Style Sheets), strokes can be applied to text using properties such as text-stroke, enhancing the visual appeal of typography on the web. These strokes can be customised to achieve different effects, contributing to the overall aesthetic and readability of the text. Whether it’s a subtle accent or a bold statement, understanding and utilising strokes play a crucial role in graphic design and digital communication.

Stroked Typography in CSS

In CSS, stroked typography can be created in three methods:

• Using the non-standard webkit-text-stroke property

• Using text-shadow property

• Using pseudo-element hack

Using the non-standard webkit-text-stroke property

The webkit-text-stroke property is a non-standard CSS property that is used to apply width and color of strokes or outlines to text characters. It’s a shorthand property for the longhand properties -webkit-text-stroke-width and -webkit-text-stroke-color.

The example below is equivalent:

-webkit-text-stroke: 4px navy;

OR

-webkit-text-stroke-width: 4px;
-webkit-text-stroke-color: navy;

Here’s an example of how you can use -webkit-text-stroke property:

/* CSS file */

h1 {
  /* Apply a black stroke with a width of 2 pixels */
  -webkit-text-stroke: 2px black;

  /* Set the text fill color to white */
  color: white;

  /* Optional: Adjust other styling properties */
  font-size: 180px;
  font-family: 'Arial', sans-serif;
  text-align: center;
}

<!-- HTML file -->

<h1>Hello World</h1>

Preview

In this example, the -webkit-text-stroke property is applied to an h1 element, creating a black stroke around the text. The color property is set to white to ensure that the text inside the stroke is filled with a contrasting color.

From the example above, everything seems to work fine, but let’s say we increase the -webkit-text-stroke-width property value to 20px and change the color to red to see the effect properly.

/* CSS file */

h1 {
  -webkit-text-stroke-width: 20px;
  -webkit-text-stroke-color: black;

  color: red;

  font-size: 180px;
  font-family: 'Arial', sans-serif;
  text-align: center;
}

Preview

Wow, now the text starts looking really ugly and misshapen. This is because the stroke is positioned above the fill and resides within the confines of the text. In simpler terms, the stroke is above the fill or color of the text, placed in the center of the text. So how do we fix this?

The sad reality is that there’s no proper fix for this issue yet, as of 2023, and even design software like Adobe Illustrator has this same problem, where with texts, you can’t change the alignment of the stroke from being centered.

Here’s a GIF to illustrate the same issue with Adobe Illustrator 2022.

However, there’s a property that kinda fixes this issue, but as of 2023, it only works on Firefox browser. The CSS property is called paint-order, which helps to control the order in which the fill and stroke text content are drawn. With the paint-order CSS property, the stroke will be placed outside the text color or fill.

Here’s how it looks on Firefox browser (Windows)

Here’s what changed in the CSS file, and all we introduced was paint-order: stroke which does the magic.

/* CSS file */

h1 {
  -webkit-text-stroke: 20px black;
  color: red;

  /* Set Paint-Order property */
  paint-order: stroke;

  font-size: 180px;
  font-family: 'Aria', sans-serif;
  text-align: center;
}

Notice on Firefox browser, the stroke corners are curved by default.

On Google Chrome browser, the result remains the same, the paint-order property has no effect at all, sadly 😑.

Here’s the CodePen link if you’d like to preview it for yourself.

The -webkit-text-stoke, -webkit-text-stroke-width, and -webkit-text-stroke-color CSS properties all have good support in major browsers, and according to caniuse.com it has 96.89% support across all major browsers as of November 2023.

Pros

1. Easy to use, as it requires a single property

2. Very well supported in modern browsers

Cons

1. Achieving a satisfactory result can be challenging when combining a colour and a stroke.Though the paint-order property helps, but it’s only supported in one browser.

2. Being a non-standard property, there’s a possibility that it might be removed and substituted in future updates. Additionally, there could be variations or inconsistencies across different browsers.

Using text-shadow property

The text-shadow method is more of a hacky solution, where multiple shadows with different offsets can be used to simulate the text stoke. With the approach, we are guaranteed that the simulated stroke with shadows would also be beneath the text content at every point.

If you think about it, we’ll need the shadows to cover every direction of each character in the text, i.e. top, right, bottom, and left. Let’s see an example:

/* CSS File */

h1 {
  /* Simulate text-stroke with multiple shadows */
  text-shadow: 
     1px 1px 0px #000,   /* Bottom right */
     -1px -1px 0px #000,  /* Top left */
     1px -1px 0px #000,  /* Top right */
     -1px 1px 0px #000;   /* Bottom left */     

  /* Optional: Additional styling */
  color: #fff;  /* Text color */
  font-size: 180px;
  font-family: 'Arial', sans-serif;
  text-align: center;
}

Preview

See the preview on CodePen

In this example, the text-shadow property is used to create a simulated text-stroke effect by applying shadows in each direction. Additionally, the shadows have a 0px blur radius (0px), ensuring a crisp outline.

Also, looking at the preview, it looks pretty close to what we had first with the -webkit-text-stroke property, but there’s a challenge, how do we tell what the offset X and Y length values should be? Let’s say we increased the offset X and Y length values to 3px. So, let’s see what happens:

/* CSS File */

h1 {
  /* Simulate text-stroke with multiple shadows */
  text-shadow: 
     3px 3px 0px #000,    /* Bottom right */
     -3px -3px 0px #000,  /* Top left */
     3px -3px 0px #000,   /* Top right */
     -3px 3px 0px #000;   /* Bottom left */     

  /* Optional: Additional styling */
  color: #fff;  /* Text color */
  font-size: 180px;
  font-family: 'Arial', sans-serif;
  text-align: center;
}

Here’s the CodePen link to preview

With keen eyes, you’d notice that there are gaps in some characters of the text, like the “e” and “r”. To help show the gap, here is the same image but zoomed in.

To fix the gaps, we’ll need to add more shadows, but then this method isn’t sufficient cause you’d likely be guessing the shadow offset would be tedious, except you’re a maths wizard 😅. Here’s an article that shows how using 8 multiple shadows solved the gap problem.

Pros

1. It works properly when the offset X and Y length values are just 1px.

2. It is widely supported across all major browsers

Cons

1. Introduces gaps in the simulated stroke effect if the shadow X and Y offset is greater than 1px

2. It’s too hacky cause you’d have to guess the shadow offsets.

3. Strokes aren’t shape as it should, they may appear blurry.

Using pseudo-element hack

With the help of pseudo-elements, we can simulate the text stroke effect by creating a copy of the text content and then apply the -webket-text-stroke property to the pseudo-element. With the attr() CSS function and data-* attribute, we can achieve the text stroke effect.

Enough explanation; let’s see an example to understand how to utilise the pseudo-element hack.

<h1 data-text="Hello World">Hello World</h1>

The data-* attribute is used on the HTML element in order for the attribute value “Hello World” to be gotten from CSS with the help of the attr(). Here’s how we get the data-text attribute value in CSS.

h1 {
   color: red;
   font-size: 180px;
   font-family: 'Aria', sans-serif;
   position: relative;
}

h1::after {
   /* data-text atrribute value gotten as the content value in CSS */
   content: attr(data-text);

   position: absolute;
   top: 0;
   left: 0;

   /* Place the pseudo-element below the actual text */
   z-index: -1;
   /* Relative to h1 */
   font-size: 1em;

   -webkit-text-stroke: 20px black;
}

Preview

Here’s the CodePen link

In the example above, we had a lot of properties flying around, like the position relative and absolute values. On the h1 CSS type selector, notice the position: relative CSS declarion, it’s very important, cause the h1 pseudo element selector would be positioned absolute to the h1 element. Also, the top, and left property has the value 0.

The issue with the pseudo-element hack, is that if the h1 selector changes its position, let’s say the text is aligned to the center, the text stroke effect breaks. Here’s an example to see how it breaks:

h1 {
   color: red;
   font-size: 180px;
   font-family: 'Aria', sans-serif;
   position: relative;

   /* New CSS declaration added */
   text-align: center;
}

h1::after {
   /* data-text atrribute value gotten as the content value in CSS */
   content: attr(data-text);

   position: absolute;
   top: 0;
   left: 0;

   /* Place the pseudo-element below the actual text */
   z-index: -1;
   /* Relative to h1 */
   font-size: 1em;

   -webkit-text-stroke: 20px black;
}

Preview

Pros:

• Effectively generates a stroke around the text.

• The stroke adjusts proportionally when the font-size of the element (e.g., an h1 tag) changes.

Cons:

• Requires duplicating text content in a custom attribute.

• Shares similar drawbacks with -webkit-text-stroke-width when used for stroke creation, potentially requiring mathematical adjustments to avoid using this property.

• Issues may arise when the element alignment is changed.

Combining text-stroke and text-shadow Properties

Combining the text-stroke and text-shadow properties in CSS opens up a realm of possibilities for creating visually compelling and dynamic text effects. These properties, when used in conjunction, allow for intricate and layered styling, enhancing the overall aesthetic impact of your typography.

Here are some examples showcasing how you can combine text-stroke and text-shadow.

Example 1

h4 {
  /* Apply a text-stroke with a white color and a width of 2 pixels */
  -webkit-text-stroke: 2px white;
  color: black; /* Set the text color */

  /* Add a subtle text-shadow for depth and dimension */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

  /* Optional: Additional styling */
  font-size: 180px;
  font-family: 'Arial', sans-serif;
  text-align: center;
}

In this example, the -webkit-text-stroke property is used for the text-stroke effect, creating a white outline around the text characters. The text-shadow property is then applied to add a subtle shadow, providing depth and dimension to the text.

Example 2

To peek at the code used to achieve this example, here’s the CodePen link:

Example 3

Here’s the CodePen link, for the Neon effect:

Creative Typography Stroke Examples

Let’s look at more examples that are creative:

Example 1

<h1>Stroke</h1>

body {
  background: black;
}

h1 {
  background-image: linear-gradient(90deg, #ff00d2, #fed90f, #00a2ff);
  background-clip: text;
  -webkit-text-stroke-color: transparent;
  -webkit-text-stroke-width: calc(1em / 16) ;
  -webkit-background-clip: text;
  color: #000119;
  font-size: 22vmin;
  font-weight: 700;
  text-align: center;
}

This stroke effect is referenced from the video by SoftCode

Codepen link to view the preview.

Example 2

<h1>Lemon</h1>

@import url('https://fonts.cdnfonts.com/css/spicy-rice');

body {
  background-image: url(https://st3.depositphotos.com/5489530/13659/i/600/depositphotos_136593476-stock-photo-lime-and-mint-detox-water.jpg);
  background-color: #5DB318;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom bottom;
}

h1 {  
color: rgba(154, 41, 162, 0);
    font-family: "Spicy Rice", Sans-serif;
    font-size: 165px;
    font-weight: normal;
    text-shadow: -6px 10px 0px #5DB318;
    mix-blend-mode: darken;
    -webkit-text-stroke: 2px #FFFFFF;
    text-stroke: 2px #FFFFFF;
    text-align: right;
}

The stroke effect was reference in happyaddons website

Codepen link to view the preview

Browser Support For text-stroke Property

According to caniuse.com, 96.89% of all browsers support the -webkit-text-stroke property except for all versions of Internet Explorer browser and Opera mini browser. However, the other browsers support the text-stroke property by making use of the webkit prefix to ensure compatibility.

Wrapping Up

In wrapping up our look at text-stroke in CSS, we’ve covered a few cool ways to make your text stand out. Whether you’re using the -webkit-text-stroke property for a basic outline, getting creative with pseudo-elements, or adding depth with text-shadow, these methods give you options to make your typography pop. In addition, each approach has its strengths, offering flexibility for different design needs. So, play around, try them out, and let your text be a canvas for your creativity!

Here are also some helpful resources about the text-stroke:

• Adding Stroke to Web Text

• CSS Text Stroke/Outline

• 3 Simple Techniques to Create a Text Stroke in HTML and CSS

In this comprehensive guide, we will unravel the mystery behind different image centering methods, from the basic and widely used to the more advanced and responsive techniques. Whether you're a seasoned web developer looking to refine your skills or a newcomer eager to understand the nuances of CSS, this article aims to demystify the process of image centering. From margin-based approaches to the flexbox and grid systems, we will navigate through a spectrum of techniques, ensuring that you not only comprehend the concepts but also gain practical insights through illustrative examples.

Let's demystify image centering and empower you to create visually stunning and well-balanced web pages with the precision that CSS provides. We’ll go over 5 methods that can be used to center images.

Methods of Centering Images in CSS

We'll go over these 5 different methods of centering images be it vertically and horizontally, and also the limitations that come with each method.

• Using text-align Property.

• Using Margin Property.

• Using Flexbox Property.

• Using Grid Property.

• Using the Position Property.

Method 1: Using text-align property to Center an Image

The text-align property, although primarily designed for text alignment, can also be a quick and straightforward method to center images horizontally within their container. By applying text-align: center to the container, you leverage its alignment capabilities to achieve a centered image without complex CSS rules.

However, this method will only work when the image is wrapped in a block-level container such as a div element, and then on the parent component, the text-align property is used.

Here is a code snippet that shows how to use the text-align property:

<!-- HTML file -->
<body>
    <h1>Centering an Image with CSS</h1>
    <div class="container">
        <img src="https://buffer.com/library/content/images/size/w1200/2023/10/free-images.jpg" width="300">
    </div>
</body>

/* CSS file */
.container{
   text-align: center;
}

.container img {
   /* Additional styles for the image, if needed */
}

Preview:

Limitation using the text-align property

However, there are some limitations when using the text-align property for centering images:

• Issue of container width: If the container has a specified width and the image is wider than the container, it won't be centered. In such cases, you might need to ensure that the container is wide enough to accommodate the image.

• Issue of Vertical Alignment: The text-align property only handles horizontal alignment. If you need to vertically center the image, you might need additional techniques, such as using Flexbox or CSS Grid properties which will be discussed later on in this guide.

Method 2: Using Margin property to Center an Image

The margin property can be used to center an image horizontally within it’s container (parent element). By setting the left and right margins to auto and using text-align: center as a complementary measure for older versions of Internet Explorer, this method provides a reliable way to achieve image centering.

Here is a code snippet that shows how to use the margin property:

<!-- HTML file -->
<div class="container">
  <img src="https://images.unsplash.com/photo-1660866838821-0c12213703df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDEyfHx8ZW58MHx8fHx8&w=1000&q=80" width="500" alt="Centered Image">
</div>

/* CSS file */
.container {
  text-align: center; /* For older versions of IE */
}

.container img {
  display: block; /* Ensures block-level behavior for margins */
  margin-left: auto;
  margin-right: auto;
  /* Additional styles for the image, if needed */
}

Preview:

Explanation of the above code:

• text-align: center is used on the container to ensure compatibility with older versions of Internet Explorer. It’s a good practice to add this property in the parent container, but the margin property is well-supported across major browsers now.

• display: block is applied to the image to make it a block-level element, allowing the use of auto margins.

• margin-left: auto and margin-right: auto set the left and right margins to auto, effectively centering the image horizontally.

• image width specified as 500px

Limitation of using the margin property

• Horizontal Centering Only: The primary limitation of using margin for centering is that it only handles horizontal centering. If vertical centering is required, additional techniques or properties need to be employed.

• Requires a Defined Width: The margin: auto; trick relies on the image having a specific width set. Without a defined width, the browser won't have a clear reference for distributing the margins evenly. This can sometimes limit layout flexibility if you need the image to adjust its width dynamically.

• Not Ideal for Responsive Design: While margin can be effective for fixed-width layouts, it may not be the best choice for responsive designs. For responsive centering, techniques like Flexbox or CSS Grid are often preferred.

Method 3: Using Flexbox property to Center Images

Flexbox provides a powerful and flexible layout model, making it an excellent choice for centering elements, including images, both horizontally and vertically. By applying the display: flex; property to the container and using alignment properties, you can achieve precise control over the positioning of your images.

Now, let’s see how to position images to the center using Flexbox both Horizontally and Vertically.

Horizontal Centering with Flexbox

Here's how you can achieve horizontal centering using Flexbox:

<!-- HTML file -->
<div class="container">
  <img src="https://buffer.com/library/content/images/size/w1200/2023/10/free-images.jpg" width="500">
</div>

/* CSS file */
.container {
  display: flex;
  justify-content: center;
  /* Additional styles for the container, if needed */
}

.container img {
  /* Additional styles for the image, if needed */
}

Preview:

The border line around the image signifies the container width.

Explanation:

• display: flex; is applied to the container, turning it into a flex container.

• justify-content: center; horizontally centers the image within the container.

• Additional styles for the container and image can be adjusted based on design requirements.

Since the flexbox property stacks the flex items horizontally by default, we could have multiple images in the container positioned horizontally and aligned in the center of the container. Below is an image illustrating this; notice the green border line, which signifies the container width.

To achieve the preview above, here's the code snippet

<!-- HTML file -->
<div class="container">
    <img src="https://buffer.com/library/content/images/size/w1200/2023/10/free-images.jpg" width="300">
    <img src="https://images.unsplash.com/photo-1660866838821-0c12213703df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDEyfHx8ZW58MHx8fHx8&w=1000&q=80" width="300">
</div>

/* CSS file */
.container {
      display: flex;
      justify-content: center;
}

Vertical Centering with Flexbox

To illustrate the vertical centering of images, the flexbox container needs to have a height greater than the image height. Here's how you can achieve vertical centering of an image using Flexbox:

<!-- HTML file -->
<div class="container">
  <img src="https://buffer.com/library/content/images/size/w1200/2023/10/free-images.jpg" width="500">
</div>

/* CSS file */
.container {
  display: flex;
  align-items: center;
  height: 80vh;
  /* Additional styles for the container, if needed */
}

.container img {
  /* Additional styles for the image, if needed */
}

Preview:

Explanation:

The align-items: center property is used here to position the image vertically to the center of the flex container.

• align-items: center; vertically centers the image within the container.

• height; this property is needed so that the image would be positioned vertically, in the example above 80vh was used but it could be any length value as far as it's greater than the height of the image.

Add more images to the flex container while still using the align-items center property, would look like this.

Centering Images both Horizontally and Vertically

In the case where there are multiple images and you'd like to center the images vertically and horizontally, here's how to do so:

<!-- HTML file -->
<div class="container">
    <img src="https://buffer.com/library/content/images/size/w1200/2023/10/free-images.jpg" width="300">
    <img src="https://images.unsplash.com/photo-1660866838821-0c12213703df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDEyfHx8ZW58MHx8fHx8&w=1000&q=80" width="300">
</div>

/* CSS file */ 
.container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 80vh;
  }

Explanation

• The justify content property with the value center positions the images (or flex items) on the main axis, that is horizontally, while

• The align-items property with center as its value positions the images vertically on the cross-axis

Advantages of using Flexbox to center images:

1. Simple and Intuitive Syntax: Flexbox offers a relatively straightforward way to align and distribute elements within a container, making it easier to achieve image centering compared to traditional methods like floats and positioning.

2. Horizontal and Vertical Centering: With Flexbox, you can center images both horizontally and vertically within their container using just a few properties. This eliminates the need for workarounds or extra markup.

3. Responsiveness: Flexbox layouts are inherently responsive, adapting seamlessly to different screen sizes and device orientations. Your centered images will maintain their alignment across various viewports.

4. Flexibility for Additional Elements: Flexbox can handle multiple elements within a container, allowing you to center images alongside text or other content while maintaining a consistent layout.

5. Control over Distribution and Alignment: Flexbox provides granular control over the distribution and alignment of items within a flex container. You can fine-tune the spacing and arrangement of images as needed.

Limitations of using Flexbox to center images:

1. Potential Nesting Complexity: When working with complex layouts, nesting Flexbox containers can sometimes lead to unexpected results or make the code harder to maintain. Careful planning is crucial.

2. Not Ideal for All Scenarios: Flexbox is not a silver bullet for all layout challenges. For complex image galleries or intricate arrangements, other layout techniques like grid or CSS tables may be more suitable.

To learn more about using the flexbox properties, please visit the Flexbox MDN documentation

Since we're covering centering images in CSS, why don't you check out PureCode.ai; we’ve got over 1000+ AI-generated UI components, which will enable you to skip the tedious work of creating components yourself. Check PureCode out today.

Method 4: Using Grid property to Center Images

CSS Grid provides a powerful two-dimensional layout system, making it a versatile choice for centering elements within a container.

Horizontal Centering with Grid

Using the Grid property there are various ways to horizontally center an image or images because of the two-dimensional layout system CSS grid provides, but we'll be going over one method since the other process are similar.

Using justify-items: center

This approach centers all items, in this case, the image element within the grid container horizontally on their designated lines. Below is an example illustrating how to achieving this:

<!-- HTML file -->
<div class="container">
  <img src="https://images.unsplash.com/photo-1660866838821-0c12213703df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDEyfHx8ZW58MHx8fHx8&w=1000&q=80" width="100%">
</div>

/* CSS file */
.container {
  display: grid;
  justify-items: center;
  /* Additional styles for the container, if needed */
}

.container img {
  /* Additional styles for the image, if needed */
}

Preview:

Explanation

• The display property as grid makes the container selector become a grid container.

• The justify-items property with the value center positions the images (or grid items) on the inline axis, that is horizontally.

Horizontal Centering of Multiple Images with Grid

To horizontally align multiple images with the grid property, we'll need to specify the grid tracks using the grid-template-colomns property.

Example code:

<!-- HTML file -->
 <div class="container">
    <img src="https://buffer.com/library/content/images/size/w1200/2023/10/free-images.jpg" width="300">

    <img src="https://images.unsplash.com/photo-1660866838821-0c12213703df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDEyfHx8ZW58MHx8fHx8&w=1000&q=80" width="300">
  </div>

/* CSS file */
.container {
      display: grid;
      grid-template-columns: repeat(2, 1fr); 
      justify-items: center;
}

.container img {
      /* Additional styles for the image, if needed */
 }

Explanation:

• The display: grid property and value make the container selector a grid container

• grid-template-columns: repeat(2, 1fr); defines the size of the column tracks. In this case, we'll have 1fr unit for two columns, where the two images would reside.

• justify-items: center; positions the images horizontally center within the columns.

Vertical Centering with Grid

Here is an approach to achieve vertical centering with Grid:

Using align-items: center;

<!-- HTML file -->
 <div class="container">
    <img src="https://buffer.com/library/content/images/size/w1200/2023/10/free-images.jpg" width="300">
  </div>

/* CSS file */
.container {
      display: grid;
      align-items: center;
      height: 80vh;
}

.container img {
      /* Additional styles for the image, if needed */
 }

Preview:

Explanation:

• The display: grid property and value make the container selector a grid container

• The align-items property center as its value positions the images vertically on the block axis

• height: 80vh; is used to show how the image is center vertically.

For multiple images, specifying the grid-template-columns property would do the trick.

Centering Images both Horizontally and Vertically

Using the place-items: center; properties, which is a shorthand property for the align-items and justify-items properties, would centre images both horizontally and vertically.

<!-- HTML file -->
<div class="container">
  <img src="https://buffer.com/library/content/images/size/w1200/2023/10/free-images.jpg" alt="Centered Image">

<img src="https://images.unsplash.com/photo-1660866838821-0c12213703df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDEyfHx8ZW58MHx8fHx8&w=1000&q=80" width="300">
</div>

/* CSS file */
.container {
  display: grid;
  place-items: center;
  /* Additional styles for the container, if needed */
}

.container img {
  /* Additional styles for the image, if needed */
}

Preview:

Explanation:

• display: grid; is applied to the container, establishing it as a grid container.

• place-items: center; is a shorthand property for both align-items: center; and justify-items: center; effectively centering the content within the grid.

• Additional styles for the container and image can be adjusted based on design requirements.

Advantages of Using Grid:

• Powerful Layout Control: Grid provides flexible and precise control over the placement of elements within a container.

• Multidimensional Layouts: Grid can handle complex layouts with multiple rows and columns, making it suitable for image galleries or other intricate arrangements.

Limitations of Using Grid:

• Browser Compatibility: While modern browsers have excellent support for Grid, older browsers may require fallbacks or polyfills.

• Learning Curve: Grid syntax can be more complex to learn compared to Flexbox, especially for those new to CSS layout techniques.

Method 5: Using the Position property to Center Images

The position property, along with top, right, bottom, and left, can be employed to center an image within its container. While not as flexible as some layout models like Flexbox or Grid, this method provides an alternative for centering when other techniques may not be suitable.

Here's how to achieve centering an image with the position property:

<div class="container">
  <img src="https://images.unsplash.com/photo-1660866838821-0c12213703df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDEyfHx8ZW58MHx8fHx8&w=1000&q=80" alt="Centered Image" width="300">
</div>

/* CSS file */ 
.container img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      /* Additional styles for the image, if needed */
  }

Preview:

Explanation:

• position: relative; is applied to the container to establish a positioning context for the absolute positioning of the image.

• position: absolute; removes the image from the normal document flow, allowing precise positioning within its nearest positioned ancestor.

• top: 50%; and left: 50%; position the image's top-left corner at the center of the container.

• transform: translate(-50%, -50%); centers the image perfectly by adjusting it based on its own dimensions.

Advantages:

• Absolute Precision: This method allows for precise control over the positioning of the image, making it suitable for unique layout requirements.

• Cross-Browser Compatibility: The approach is widely supported across browsers, including older versions.

Limitation using the Position property

• Static Container Size: The container's size needs to be known in advance for accurate centering.

• Not as Flexible: Compared to Flexbox or Grid, this method may require adjustments for responsive designs or dynamic content.

• Potential Overlapping: Be cautious when using absolute positioning to avoid overlapping with other elements.

Difference between all 5 methods

Frequently Asked Questions

How do I center images in CSS?

You can center images using any of these methods

• Flexbox is often preferred for its simplicity and responsiveness.

• Grid is powerful for complex layouts and multiple images.

• Text-align is quick for basic horizontal centering.

• Auto margins are useful for images with known widths.

• Position property offers precise control but requires more understanding.

How do I center an absolute image in a div?

• Using the Position and Transform if you need precise control over the image's absolute positioning within the div.

• Consider Flexbox or Grid when you want simplicity and responsiveness, especially if centering other elements alongside the image.

Final thoughts on Centering Images with CSS

Congratulations on completing this journey through various CSS techniques for image centering! By now, you've gained insights into different methods, each offering its unique advantages. Demystifying image centering with CSS opens up a world of possibilities for creating visually appealing and well-structured web designs. Whether you're a beginner or an experienced developer, mastering these techniques empowers you to tackle diverse design challenges with confidence.

Check out Purecode.ai today, for streamlining front-end code creation.

It's so easy to be carried away by using the already-known features a tool provides without bothering to know the newly added features, in this case, Tailwind CSS. As a Tailwind CSS fanboy myself, I barely try out the new updates happening in CSS since I mainly use Tailwind; however, when those new updates get to TailwindCSS, it's a game-changer since I can now easily make use of them.

Dynamic viewport units

Making a full-height viewport on mobile devices with the vh unit wasn't the best because the mobile browser's toolbar usually gets in the way of the viewport, allowing the layout to bleed out. Illustrated below:

Source: https://web.dev/blog/viewport-units#the-need-for-new-viewport-units

However, when the viewport is scrolled down, the vh unit works as expected cause now the browser's toolbar is retracted.

Source: https://web.dev/blog/viewport-units#the-need-for-new-viewport-units

To combat this issue, new viewport units were added to CSS, namely Large viewport, Small viewport and Dynamic viewport, having the prefix lv, sv, dv respectively. Dynamic viewport units are essentially the combination of both small and large viewport units.

Source: https://web.dev/blog/viewport-units

Here are some dynamic viewport units added to Tailwind CSS by default w-svw, w-lvw, w-dvw, h-svh, h-lvh, h-dvh and arbitrary values like this min-h-[75dvh] works as well 🤩.

:has() pseudo-class

The :has() pseudo-class is one of those cool features recently added to CSS that I haven't got to play a lot with; since it's now supported in Tailwind CSS, it just opens a new world of possibilities 🤯.

The:has()pseudo-classallows you to style an element based on its children, not just based on its parents. It even makes it possible to style based on subsequent siblings - From theTailwind CSS blog

Essentially, think of the :has() pseudo-class as a shortcut and a better way to do some crazy things you might have done with SASS or JavaScript but now can be done with plain CSS or, in this case, Tailwind CSS 🤩

Here's a silly example to illustrate how the :has() pseudo-class work, in this case, if the child element (img) is next to a paragraph then the background of the parent element changes to red.

<div class="has-[img+p]:bg-red-400">
   <div class="p-4">
     <img src="..." alt="">
   </div>
   <div class="p-4">
     <img src="..." alt="">
     <p>This is a paragraph</p>
   </div>
</div>

Preview code example here: https://play.tailwindcss.com/FDBP3zqjoS

Here's a guide showing ten practical examples that utilizes the CSS :has selector: https://bejamas.io/blog/learn-css-has-selector-by-examples-top-use-cases/

The * variant

The * variant is a blessing from Tailwind CSS, allowing us to now style children's elements from the parent using utility classes. Here's a code example and preview of how it works:

<div>
  <h2>Categories:<h2>
  <ul class="*:rounded-full *:border *:border-sky-100 *:bg-sky-50 *:px-2 *:py-0.5 dark:text-sky-300 dark:*:border-sky-500/15 dark:*:bg-sky-500/10 ...">
    <li>Sales</li>
    <li>Marketing</li>
    <li>SEO</li>
    <!-- ... -->
  </ul>
</div>

Preview code example here: https://play.tailwindcss.com/yuQyHjiuSx

The size-* utilities

The size-* utilities allow you to set the width and height at the same time, which is very useful when working with icons or avatars.

<div class="flex gap-6 items-end">
  <img class="size-14 rounded-full" src="https://avatars">
  <img class="size-20 rounded-full" src="https://avatars">
  <img class="size-24 rounded-full" src="https://avatars">
</div>

Preview code example here: https://play.tailwindcss.com/NawRNldMH4

Well, that rounds it up for the newly added exciting features in Tailwind CSS, there are a bunch of other cool updates that came with v3.4, do check out the blog announcement.

To get started with these new features, upgrade your projects by installing the latest version of tailwindcss from npm:

$ npm install tailwindcss@latest

References

• Web.dev - The large, small, and dynamic viewport units

• New CSS Viewport Units Do Not Solve The Classic Scrollbar Problem

• TailwindCSS

Well, there could be so many reasons, and In this article, we'll go over 3 reasons why learning Next.js is the next best thing to do after getting the fundamentals of React.js down.

Prerequisites and Expectation

• Good foundation with React.js

• An Introduction to what Next.js offers but not the full gist 😅

• Beginner-friendly and assumes the reader doesn't know much about Next.js

• Assumes questions a newbie to Next.js might ask.

Introduction to Next.js

Next.js is a React framework for building full-stack web applications (referenced from the Next.js documentation).

Now, you might have questions like:

What does React framework mean? also,
I'm still new to React, I don't want to build full-stack web applications yet 😕

Next.js, being a React framework, simply means there are additional features, optimizations and guidelines to follow that make development easy compared to plain React.js, which is unopinionated about how routing should be done, for example.

As for building full-stack web applications, as a newbie you don't need to bother about that; with time and lots of practice, you'll join the train in building full-stack applications.

Why learn Next.js?

From the introduction of Next.js, I assume you can tell that Next.js is for building large applications, usually applications with multiple pages, with complex functionalities and not just a todo app, which is usually everyone's big project learning React.

Even I built a todo app, some years ago, oh fun memories 😄.

If you'd like to read about my journey building a todo app which felt like a big project then, here's the article - (2 months of Learning React.js and The project I worked on)

Routing Between Pages

Coming from React.js, when you have to build a web application that has multiple pages, e.g. an e-commerce website, we make use of React Router or other routers for React.

All the routes would be listed in the entry point of the React app in order to emulate a Multi-Page Application (MPA) behaviour while React uses a Single Page Application (SPA) architecture.

In Next.js, routing between pages is really easy, and you don't have to define the structure of the router, you just follow the guidelines Next.js provides about folder structures. So essentially Next.js uses a file-system router.

However, at the point of writing this article, Next.js has two means of handling routing, the first means being the Pages Router and the second the App Router.

Both the Pages Router and the App Router work excellently though very differently and the in-depth differences between the routers are beyond the scope of this article 😅

Here's an example of how routes would be defined in a React app, using React Router v6.15.0

For Next.js, here's how the routes are defined in both the App and Pages Router using the file-system.

Though it might look like lots of folders, but trust me, it's so much better 🤩.

Optimizations

Hmm, optimizations, should I care about optimizations if I'm a newbie to Next.js and React?

Well, yes and no 😅

No, because you're still learning, and Yes because at some point you'd have to care about optimizations to make your app faster.

Optimations in Next.js come in various forms, but the essence of optimation is to improve the application speed and Core Web Vitals.

Since this article to geared towards newbies with Next.js, we'll not be going into all the optimization patterns Next.js provides but just two, that is Metadata and Image optimization.

Metadata - Search Engine Optimization (SEO)

Metadata is used to add helpful content about a web application, helping Search Engines like Google crawl and index the web application. Metadata isn't just for Search engines, social media also reflects metadata information of the site.

For example, the image below shows the metadata information for https://aichatbot.so/

Coming from React, managing metadata information isn't good at all, Well, there is this library react-helmet-async which helps in some ways but it's no way compared to Next.js benefits.

If you'd like to know why React is bad for SEO, please go through these guides:

• SEO For React Developers by Codedamn (recommended guide)

• Is React Good for SEO? The Complete Guide in 2023

In Next.js, Metadata can be handled in two ways due to the Routers, i.e., the Pages and App Router.

Below is an example of how metadata is defined in Next.js:

To learn more about Metadata in Next.js please visit the documentation:

• App Router docs - Metadata

• Pages Router docs - Metadata

Image Optimization

In Next.js, if you make use of the built-in image component, you get all the benefits of image optimizations.

Why do I need image optimization, you might ask?

Well, from the Next.js documentation about images here are the benefits you get using the Image component.

• Size Optimization: Automatically serve correctly sized images for each device, using modern image formats like WebP and AVIF.

• Visual Stability: Prevent layout shift automatically when images are loading.

• Faster Page Loads: Images are only loaded when they enter the viewport using native browser lazy loading, with optional blur-up placeholders.

• Asset Flexibility: On-demand image resizing, even for images stored on remote servers

Hmm, what does visual stability mean, and the other benefits listed above 😕

To answer that question, I suggest watching this video which explains and shows you the benefits - Using Images in Next.js (next/image examples) by Lee Robinson

Data Fetching

Hmm, Data Fetching, but I can fetch data using the fetch API in React and also use a library like Axios, and they all work fine.

Yes, using the fetch API and Axios works just fine, but with Next.js you get data-fetching features on steroids 🤩. Let's go over an example to get a feeling on how Data fetching in Next.js is really cool.

Let's say you're working on an E-commerce website with plain React, and on the product details page you have a single component responsible for the UI on that page cause it's basically going to be the same across all products.

Pictures speak better than words or text in this case, so below is an image showing two different products (shoes) with similar contents.

Let's also assume the product details are coming from some API, and to get this to work in React, you'll have to fetch the data on the client (known as Client-side fetching), whereby the user will get to the page first, and you probably show a loading state and then when the fetch resolves and the data is then displayed on the page.

The downside to this approach with React (Client-side fetching), is that:

• The page wouldn't have the HTML structure for the product page, which is bad for SEO

• Also, when a particular product page is visited multiple times, there will always have to be a request to the API, getting the same data again and again.

Now, let's see how Next.js solves this problem.

In Next.js there are a lot of Data Fetching patterns depending on the different use cases, but in this article, we wouldn't go over all the Data fetching patterns or techniques, we'll just go over the broad scope of how Next.js make data fetching better.

To solve the problem of the HTML structure not being in the shape of the E-commerce product page, Next.js does something called pre-rendering. From Next.js docs, Pre-rending is the process of generating HTML for each page in advance.

To solve the issue of always fetching the data when a page is visited, Next.js provides some data fetching patterns that can tackle this problem.

In the App router, we have React Server Components and Server Action while with the Pages router, we have getStaticProps, getServerSideProps, getStaticPaths and more, which are grouped into two forms Static Generation and Server-side Rendering 🤯🤯🤯🤯

OMG, what's all this for data fetching 😭

Data Fetching is kind of scary in Next.js from all the Data fetching patterns it has.

Well, the good thing is that as a newbie in Next.js, you don't need to understand all just yet.

The best Next.js data fetching pattern for the product details would be Static Generation, using the getStaticProps function on the Pages Router, which basically generates several HTML files for the product details page depending on the data from the backend API and then those HTML files are reused on the client, and cached in some Content Delivery Network (CDN), so there's no additional call to the server after build time.

As for the App router, the same thing happens, but we'll make use of server components which is the only option and they are amazing 🤩.

Conclusion

I'd like to believe I've been able to convince you and not confuse you 😏, that learning Next.js is the next thing you need to do in other to advance your React skills. Another motivation could be the Job market, most companies make use of some framework, be it Next.js, Remix and so many others out there. So learn a React framework, cause even the React docs says so.

Finally, I'd like to say a big thank you to my friend Enis Jesugbogo for making me write this article speedily😅, by encouraging me to write before August 2023 is over, some hours left before the new month, so I hope Enis you're proud 😂.

Also, to all my readers, I promise to write from time to time now, Thanks for sticking around, much appreciation 💖

Helpful Resources Learning Next.js

Disclaimer: Please learn about the Pages Router before the App Router if you're just getting started with Next.js. Then as you improve on yourself, look into the App router.

1. Next.js Learning Documentation - The Next.js team were kind enough to put up this guide, that I followed to learn Next.js, though some things might have changed as to when I went through it, but it's a good place to start from. Highly recommended. 🤩

2. Next.js Tutorial for Beginners (2020) - by the Net Ninja. This is a video guide which is quite old but it really teaches Next.js Pages Router principles really well. BTW, I just love learning new technologies from Net Ninja, cause I love his teachings 😍

3. Next 13 Crash Course 2023 - by the Net Ninja. I haven't gone through it myself, but I'm sure it's great 💖

4. Next.js Documentation - by the Next.js team. Though I don't recommend this documentation for learning, cause it doesn't work you through building an actual application. The documentation is useful when you want to know everything about some features with all the APIs and so on. 😊

With all of that, all the best learning Next.js, cheers 🍻 and see you in the next article 🎉

In this article, I'll go over the 5 challenges I encountered while migrating from CRA to Vite and updating dependencies, how I found solutions to the challenges and some Vite-specific things that just had to be done.

Please note that this article is centred on the libraries which my work codebase uses, so it might not cover all possible errors, you might encounter will migrating from CRA to Vite. Some of the libraries mentioned in the article and used in the codebase are:

• MUI

• React

• React-phone-input-2

• e.t.c

Context before Successfully Migrating to Vite

Before I successfully migrated from CRA to Vite, I had failed in the past and given up because of the pill of errors I encountered. The way started the process of migrating was by finding articles about the migration process and following them, step by step, yet I ended up with errors the articles didn't account for.

So I decided to go with the divide-and-conquer approach (without recursion 😏), by initializing a Vite project from scratch and setting up the project gradually, while adding new necessary files from the CRA codebase to the Vite codebase.

Essentially, I had two branches managed by git, one for the codebase with CRA and another with Vite. The Vite branch was pulled from the CRA branch but then all the files were deleted to initialize the Vite application.

There might have been a better way for this process, but that's what I did, and it's tedious but it works 🤧

Challenges and Errors I encountered

1. The JSX syntax extension is not currently enabled

The very first error I encountered was: The JSX syntax extension is not currently enabled which means that if you have a file that has a React component that returns JSX, then the file extension should be .jsx and not .js.

Here's how the error shows on the terminal:

All the files in the codebase were using .js as the file extension and now Vite was saying I have to move 50+ files to .jsx 🤯.

Evan You, the creator of Vite, gave a good reason why .jsx extension should be used with files that return JSX. The response from Evan You was mentioned in the issue: Add an option to transpile .js file with build · Issue #769.

Solution

The way I overcame this challenge was by using a tool called PowerToys created by Microsoft. It comes with a feature named PowerRename, which allowed me to rename multiple file extensions at the same time quickly. So I renamed all the file extensions from .js to .jsx provided the file contains some form of JSX being returned.

Visit here to learn about the feature PowerRename offers: PowerToys PowerRename utility for Windows | Microsoft Learn

2. Upgrading dependencies in the codebase

Since I was already making a large change to the codebase, by migrating from CRA to Vite, I thought to myself, why not update all the dependencies to the latest and greatest version?

Honestly, I don't know who sent me to do this, cause it ended up being a terrible experience 🤣

One of the dependencies that had lots of breaking changes was Material UI now called MUI. Before upgrading, Material UI v4.11.2 was used in the codebase along with some of its peer dependencies like Material Icons around similar versions.

Upgrading to MUI v5 introduced a lot of changes, to where components were imported from, all the packages' import names were changed from @material-ui/* to @mui/*, and many more changes.

I mean, just look at this mess MUI put me through 😅

Other dependencies had some changes too, which I had to implement due to the upgrade, but none was as stressful as MUI, hence, I'm only mentioning MUI in this section.

Another problem that came with upgrading Material UI was changes to where components are imported from. For example, the Button component in Material UI v4 is imported from @material-ui/core/ while MUI v5 is from @mui/material/. So I had to be aware, that not only the prefix @material-ui/ was changed but also

Material UI v4 example for the Button component:

import Button from '@material-ui/core/Button';
// ----------------- OR -------------------- //
import { Button } from '@material-ui/core';

MUI v5 example for the Button component:

import Button from '@mui/material/Button';
// ----------------- OR -------------------- //
import { Button } from '@mui/material';

So how did I overcome the changes that MUI brought?

I failed to upgrade from React 17 to 18 in my work codebase because I wasn't ready for the stress, especially now that components are rendered twice and I might need to change the architecture of how useEffect is used 😏.

Maybe I'll do this later in the future... 😤

Solution

There was no way I could go over 500+ files that depended on Material UI and change them to the new MUI structure manually. To overcome this challenge, I relied on VS Code Search and Replace feature.

From the image below, you'll see that 601 files had the word @material-ui/, which needed to be replaced with @mui/. Luckily for me VS Code did the replacement in a bliss.

Using the Search and Replace feature in VS Code, I was able to quickly make global fixes on the codebase.

Reading the documentation for the dependencies I upgrade was a huge help, like documentation of MUI has a migration step, so I was aware of the breaking changes, which can be found here: Migrating to v5: getting started - Material UI (mui.com).

3. Error: Minified React error

The error Minified React error was caused by the library react-phone-input-2 used in the codebase. This error was also one that gave me a tough time, to figure out, cause it worked fine on the development server but shows the error on production.

The root of the error, explained by data is that many packages follow a bad practice that breaks Rollup ESM-CJS interop.

Truthfully, I don't know enough about how Vite works with Rollup, and how libraries are made, so I'll direct you to the root of this error, explained data here https://github.com/vitejs/vite/issues/2139#issuecomment-1024852072

Fortunately, the discussion about the problem on the Vite repository led me to discover a solution.

Solution

Before I mention the solution, here's the issue raised for the error on the Vite repository: Encountered “Minified React error” in the production environment

It has 71 participants contributing to the discussion and still the issue isn't closed, so it seems there are still some libraries that may cause the error.

The solution to this problem was to check if the imported component has the property default if it has the property default, then the default component should be used otherwise the component should be used.

Here's a snippet to check for default components in the react-phone-input-2 library and the solution to my problem.

import RPI from "react-phone-input-2"; 

const ReactPhoneInput = RPI.default ? RPI.default : RPI;

Thanks to Kylar13 for his comment, I was able to detect that it was the react-phone-input-2 library that was giving me the error, but then from the issue discussions, I could have other libraries installed that could have the same problem.

So I needed a permanent fix, luckily after going through the 80+ comments on the issue I found a permanent fix posted by Boni0.

Here's the full discussion by Boni0: https://github.com/vitejs/vite/issues/2139#issuecomment-1399098579

But here's the solution I ended up using in my codebase, which works fine now.

4. Uncaught ReferenceError: makeStyles_default is not defined

This is one of that errors that can make one cry and regret migrating to Vite 😅. Why do I say this? (assume you heard me ask the question 😄) Because the error is unpredictable and comes and goes while blocking you from doing anything in development. Also, the error comes in different forms, it could be Uncaught ReferenceError: Box_default is not defined.

I guess the issue is with MUI, not working properly with ESM or something like that, though I found a solution that works, I can't say the root of the problem.

Solution

Remember I mentioned the error is unpredictable, so take this solution with a grain of salt, cause I don't know why the issue comes up.

From the issue - Exported variable in chunk is not defined · Issue #1853, I found out it's better to use named import while importing components from MUI.

So use this:

import { Box } from '@mui/material';

Instead of:

import Box from '@mui/material/Box';

Also, from the issue, it was mentioned to add esm as the suffix to the package MUI.

So I did this on my end, in the vite.config.js file:

5. Uncaught TypeError: styled_default is not a function

This error is also one that's unpredictable and is caused by MUI. I've encountered this error more than once, and I haven't found a permanent fix for it, I just hope I wouldn't see it again.

The error doesn't allow me to make changes on development, so all I saw on the browser is a blank white screen, hence I had to fix it.

At the point of writing this article, I still got this error and here's a comment I made on the issue -  Popper.js:9 Uncaught TypeError: styled_default is not a function

Proposed Solution

From the issue mentioned above, the solution which works most time is to delete the node_modules folder and reinstall all your dependencies.

Another solution that worked for someone is to use @vitejs/plugin-react-swc instead of @vitejs/plugin-react.

I have tried all the proposed solutions on the issue - Popper.js:9 Uncaught TypeError: styled_default is not a function, must times it works, while sometimes it doesn't. I'll leave it at that, though currently, I don't get the error.

Conclusion

Do I regret migrating from Create-React-App to Vite? No, maybe a little, Yes, cause I have to go through lots of issues to figure things out.

Was there an improvement in server startup time, installing dependencies, and production build? Yessss, Vite is so fast. Blazingly fast ❤️‍🔥.

So I cloned the legacy codebase, the one using Create-React-App, installed the dependencies and started the server. It took 5 min, and 34 sec for the server to startup and reflect on the browser 😫.

The above test was done when I was starting the server for the first time, the second time I started the server, it took 1 min and 33 secs which is fairly okay I guess. But Vite took 35 secs for the browser to show the webpage fully loaded though it wasn't the first time I had started the server.

Would I ever use MUI for any reason in the future? Definitely, NO. If not that it would be a tug of war to remove MUI from my work codebase, I would have removed it.

With all of this, I leave with this, if you're migrating from CRA to Vite, and you're using MUI in your codebase, just know you're in for soup 🤣.

If you found this article helpful in a way, do like, sh, are, and follow me for more articles. Also, if you have a simpler approach or solution to solve the issues I mentioned in the article, please drop them in the comment, I'll love to see them.

I'll make sure to keep this article updated if I encounter more errors or bugs due to the migration.

Thanks for reading!

1. Searching Capabilities

The search feature is just amazing in VS Code and there are several modes of searching too, we could search for files, symbols (which means variable names, function names and so on), references, etc. but let's go over the 3 search features I mostly make use of.

1a) Command Palette (Ctrl+Shift+P)

The Command Palette allows you to have all the functionalities of VS Code in one place. Functionalities such as all GIT commands (like push, pull, etc.), reloading the window, and so on can be accessed from the command palette, but that's not all.

The command palette gives room for many commands, but let's go over just one, which allows us to navigate the various files in the codebase, by their file names or symbols. To work with the navigating feature, the command is Ctrl + P.

And when the command Ctrl + P is typed, the interface appears like the image below, and of course, shows your files in your codebase, allowing you to jump through files quickly.

Bonus trick, you could press the command Ctrl + P multiple times, to navigate down through the files showing on the command palette. In the case of the image above, if Ctrl + P is typed again, the file ChartTiles.jsx will be selected. Then to up the files, you can make use of Ctrl + Shift + P provided, you were on the navigating palette.

To view all other amazing commands you have access to using the command palette, please visit Visual Studio Code User Interface

1b) Search on Activity Bar (Ctrl + Shift + F)

The Search on the Activity Bar is pretty powerful, as well, it allows you to search and replace words across the codebase. So if you're looking for every occurrence of some symbol or string for example "@mui/material" in the codebase, you could just search for it.

This search feature is even more powerful especially when you want to find something really specific, like every occurrence of the symbol or variable name for example getNames.

From the image below, you can see the word GETNAME is searched and it's capitalised, yet the result isn't case-sensitive.

To make it case-sensitive or in any other case, search accurately to what is actually being searched for, that's where the three options provided come into play, which are Match Case (Alt + C), Match Whole Word (Alt + W), Use Regular Expression (Alt + R).

From the example above, we care about the case, so we can select Match Case (Alt + C) to be precise.

If by chance, you don't what's the Activity Bar, please visit here: Activity Bar | Visual Studio Code Extension API

1c) Search by Reference (Shift + F12)

The search by reference or as named in VS Code, Go to Reference comes in handy when you want to quickly just see all occurrences of symbols or words across your codebase or the current file opened.

For example, let's say you've made use of the useState hook from React, in multiple places in a file and you, want to jump over to every reference of the hook in your file. While the hook, useState is selected, you could either right-click on the word and select Go to Reference or use the shortcut Shift + F12. Doing so you get something similar to the image below:

The file currently opened is named IncomeModal.jsx so that is why it shows on the left-hand side of the pop-up, but take note of the other file there, the index.d.ts file which is in the node_modules directory. The index.d.ts file shows because the useState hook is coming from the definition in the index.d.ts file.

Quick note, in my use case, I don't care about the index.d.ts file and I don't know how it really works😅 but I think there's a reference to the index.d.ts file. All I care about is jumping around where I have the useState hook in my current file.

Now, there's another cool feature with the Search by Reference worth mentioning that brings the power of reference. Let's go over another use case.

For example, let's say you've made a custom hook in React or you're using some library that has its custom hook and you want to search for every reference to the custom hook. Then again, using the shortcut Shift + F12 you can see every reference of the hook and in most cases, if used in multiple files you'll see that too.

From the image, below, I made a search by reference for the useTranslation hook, and it's being referenced in 213 files.

The Search by Reference feature is kinda similar to the Search on the Activity bar, but then they are very different, so you can choose which to use.

2. Rename Symbols (F2)

Rename Symbols is just mind-blowing 🤯 (I might be overemphasising but it's a cool feature). This feature allows you to rename a symbol (again which could be a file name, function name, variable name, etc) across multiple files. So you can rename a variable name and be certain that all references to that variable name will be changed as well.

For example, on a file, let's rename the state name of the useState hook to something else. In the image below, I'm renaming the state revenueDate to revenueDatee, now everywhere where revenueDate was used will be changed to revenueDatee.

Quick note, to see all the occurrences of the state changing, type Shift + Enter, which opens the Refactor Preview and shows what would be removed and replaced. If you're happy with it, click Apply else Discard.

3. Source Control with Git (Ctrl + Shift + G)

The Souce Control in VS Code allows the ease of just clicking on some buttons and all your GIT operations will be done for you without writing a single command. The Souce Control view can be accessed on the Activity bar, or with the shortcut Ctrl + Shift + G.

I wrote an article about source control in VS Code: VS Code Version Control: Understanding the basics of Git operations # 1, you can read it to know how it works.

Also, please the VS Code docs are extremely helpful, here's all the Source Control with Git in Visual Studio Code.

4. Multiple selections (multi-cursor)

Multiple selection is a feature that allows you to place your cursor in multiple locations on a file, and then give room for editing where the cursor has been placed. The most common way of using this feature is when you have similar text all around a file, and you'll like to change the text to something else.

Looking at the image below, you'll see the text 200 is changed to 120 at the same time.

The above image is from VS Code docs

There are different commands in VS Code that'll aid you to make sure of the Multiple selection feature, but the most common command, at least the one I use often is Ctrl + D, which selects the next occurrence of some text or symbol selected, and adds multiple cursors.

There are other commands that could multi-select in a different scenario, mostly when the texts aren't similar, but please go through the docs to find out more.

Conclusion

There are several other features in VS Code not covered in this article and it will be an endless article if we were to go over all of them. So, I'll advise you to go through VS Code documentation more frequently or at least subscribe to their YouTube Channel, their shorts are very helpful.

Hopefully, you've learnt a new feature in VS Code, and if you already make use of all these features, you're a PRO 😅. By the way, if you know of any feature that helps you a lot while coding, please drop it in the comments.

Thanks for reading and see you in the next article!

In this article, we'll build a Calculator application similar to Samsung's calculator app, and use Expo, a framework that allows us to get started with React Native applications quickly.

There are a bunch of requirements we'll need before building in the Calculator application, but if you'll like to skip the requirements section cause you're familiar with React Native and Expo, click here to do so.

Prerequisite

• Basic knowledge of React

• Basic knowledge of React Native

Requirements

Install Node

Node is pretty much essential, so visit Nodejs.org and download the Long Term Support (LTS) version of Nodejs.

Once you're done downloading and installing Node.js, run the command below to know if it's up and running on your machine.

node -v

Install Expo

There are two tools we'll need to set up Expo, first is the Expo CLI which serves the project, and second is the client app called Expo GO which allows us to view the project on either an Andriod or IOS device.

Install Expo CLI

npm install -g expo-cli

Install Expo Go

• Android Play Store

• iOS App Store

Further guides for the Expo installation can be found here.

Getting Started

Firstly we'll need to install the necessary dependencies to get building, and the first would be Expo.

npx create-expo-app calculator-app && cd calculator-app

Once the installation process is completed and we've changed our directory to calculator-app, let's start our app, making sure it works.

Run the Project

npm start

yarn start would also work if you have yarn installed.

On the terminal, you'll see a QR code, which we'll need to scan with the Expo Go app, which I guess you've downloaded from Play Store already.

But if you've not got the Expo app yet, download it here for Android and here for iOS to follow along with the article.

To work with the Expo Go app and our project on our computers, we would need to be connected to the same network; this is very important.

The terminal interface should look like this when the start command is run:

Now, we need to open the Expo Go app on our mobile devices, scan the QR code, and we should see this interface on our phones.

Folder Structure

Let's go over what the folder structure entails:

Note: As of the Expo version 47.0.12, this is how the folder structure is

• /.expo - this folder got created when we started the application and contains devices.json and README.md files. Please go through the README file to know what this folder is about, but really we can ignore it.

• /assets - this is where we store any assets we may want to use in our application, like images, videos, fonts and icons

• /node_modules - these are all the packages we have installed that allow Expo and React Native to run. Further packages installed with npm install get added here.

• .gitignore - this is a file to tell .git which files and directories we want to omit from source control (Git). node_modules and .expo directories are omitted by default.

• App.js - the main entry point to our application. This is where you'll start adding code!

• app.json - another config file that contains expo metadata

• babel.config.js - babel config, used to add the expo preset

• package.json - this is where you list dependencies and add scripts

• package-lock.json - this file shows the map of all the dependencies installed

Breakdown of the Calculator Layout

The calculator app UI can be broken down into four main components we'll need to build; first, an input box where the calculations would be done, referred to as the Calculation Input from the image below.

Then we have the Preview Calculation component, which shows a preview of the answer when a valid operation occurs; next, we have Rows of Buttons.

I'm sorry for the poor image quality, I'll look for better ways to edit images next time 😅

Coding Time

Let's open the App.js file, we should have the snippet of code below or similar in the file:

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

We'll need to create the Calculation Input first, so remove the <Text> component and replace it with an <TextInput /> component.

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <TextInput value="Here's were we type our calculation!" />
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Here's what we should have on the Expo Go app on our devices.

Notice the input is at the centre of the screen; let's fix that and add some colours.

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, TextInput, View } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        value="Here's were we type our calculation!"
      />
      <StatusBar style='auto' />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#010101",
    paddingVertical: 30,
    paddingHorizontal: 20,
  },
  input: {
    marginTop: 40,
    borderWidth: 1,
    padding: 10,
    color: "#fff",
    fontSize: 36,
  },
});

Now the UI should look like this, which is much better.

Let's add state to the <TextInput /> to keep track of the calculating number and operators entered.

...
export default function App() {
  const [calValue, setCalValue] = useState("");
  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        value={calValue}
        onChangeText={setCalValue}
        cursorColor='#8ad8d1'
        autoFocus={true}
        textAlign='right'
        showSoftInputOnFocus={false}
      />
      <StatusBar style='auto' />
    </View>
  );
}
...

The Calculation Input is all set, but notice the showSoftInputOnFocus={false} prop on the <TextInput /> component. The prop is added to make sure the phone keyboard doesn't show when the input is on focus cause we don't need the phone's keyboard; we'll create ours.

Let's move to the Preview Calculation Input, which follows the same pattern we did for the calculation input.

import { StatusBar } from "expo-status-bar";
import { useState } from "react";
import { StyleSheet, Text, TextInput, View } from "react-native";

export default function App() {
  const [calValue, setCalValue] = useState("");
  const [previewValue, setPreviewValue] = useState("");

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        value={calValue}
        onChangeText={setCalValue}
        cursorColor='#8ad8d1'
        autoFocus={true}
        textAlign='right'
        showSoftInputOnFocus={false}
      />
      <TextInput
        value={previewValue}
        onChangeText={setPreviewValue}
        cursorColor='#8ad8d1'
        textAlign='right'
        caretHidden={true}
        style={[styles.input, styles.prevInput]}
        showSoftInputOnFocus={false}
      />
      <StatusBar style='auto' />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#010101",
    paddingVertical: 30,
    paddingHorizontal: 20,
  },
  input: {
    marginTop: 40,
    borderWidth: 1,
    padding: 10,
    color: "#fff",
    fontSize: 36,
  },
  prevInput: {
    fontSize: 24,
    marginTop: 40,
    marginBottom: 30,
    color: "#616161",
  },
});

Next, let's move the backspace button; for this, we'll need to install a package @expo/vector-icons which comes with the icon we need. Run the command below:

npm install @expo/vector-icons

Once it's installed, we'll need to add the backspace icon to the code and its functionality.

...
import { Pressable, StyleSheet, Text, TextInput, View } from "react-native";

export default function App() {
  const [calValue, setCalValue] = useState("");
  const [previewValue, setPreviewValue] = useState("");

  const handleBackSpace = () => {
    const remainValue = calValue.slice(0, calValue.length - 1);
    setCalValue(() => remainValue);
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input} ...
      />
      <TextInput
        value={previewValue} ...
      />

      <View style={styles.backButton}>
        <Pressable
          onPress={() => handleBackSpace()}
          disabled={calValue ? false : true}
        >
          <Ionicons
            name='md-backspace-outline'
            size={24}
            color={calValue ? "green" : "#035903"}
          />
        </Pressable>
      </View>

      <View
        style={{
          height: 1,
          backgroundColor: "#575757",
          marginVertical: 20,
        }}
      />
      <StatusBar style='auto' />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {...},
  input: {...},
  prevInput: {...},
  backButton: {
    flexDirection: "row",
    justifyContent: "flex-end",
  },
});

Notice from the snippet above the Pressable component is used to indicate the icon would be clicked and has two props, onPress which listens to the pressing of the icon, which then calls the handleBackSpace function, and the second prop is disabled , which makes the icons not pressable when there's no value in the Calculation input.

The handleBackSpace() function removes the last value in the calValue state and then update the calValue state.

The self-closing View component is to indicate a line in the UI. Now the UI should look like this:

From the UI, we know we need a row of buttons, so let's create a component named Row but still, in this App.js file cause, it isn't a complicated component.

...
export default function App() {
...
}

function Row({ children }) {
  return <View style={styles.row}>{children}</View>;
}

const styles = StyleSheet.create({
  ...
  row: {
    flex: 1,
    flexDirection: "row",
    justifyContent: "space-between",
  },
});

That's all for the Row component; it basically composes several button components, which we'll be working on next.

Let's create a new component named Button.js in a components directory from the root directory, that is:

|-components
| -- Button.js
App.js

// Button.js

import { TouchableHighlight, Text, StyleSheet } from "react-native";
import React from "react";

export default function Button({ label, type, handlePress, icon }) {
  const getTextColor =
    type === "operator" ? "green" : type === "clear" ? "red" : "#fff";

  const getButtonColor =
    type === "equal"
      ? { backgroundColor: "green" }
      : { backgroundColor: "#171717" };

  return (
    <TouchableHighlight
      underlayColor={type === "equal" ? "#04ac04" : "#444444"}
      style={[styles.button, getButtonColor]}
      onPress={() => handlePress(label)}
    >
      {icon ? (
        icon
      ) : (
        <Text style={{ fontSize: 26, color: getTextColor, fontWeight: "bold" }}>
          {label}
        </Text>
      )}
    </TouchableHighlight>
  );
}

const styles = StyleSheet.create({
  button: {
    borderRadius: 50,
    backgroundColor: "#171717",
    width: 80,
    height: 80,
    alignItems: "center",
    justifyContent: "center",
  },
});

From the code above, we can see there's a lot going on. The Button component accepts four pros { label, type, handlePress, icon } where

• Label is the text or number that the button should display

• type prop is to identify what the button does; is it going to be for an operator or clear (which removes the numbers and operator for the Calculation Input) or number.

• handlePress prop is a function that takes in the label as an argument and does the necessary operation with it, which we'll get into later on.

• icon prop is an icon component that will be displayed in the button instead of the label if available.

Now, let's add the button components to the `App.js` file and their various functionalities.

import { StatusBar } from "expo-status-bar";
import { useState } from "react";
import { Pressable, StyleSheet, Text, TextInput, View } from "react-native";
import { Ionicons, FontAwesome5, FontAwesome } from "@expo/vector-icons";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import Button from "./components/Button";

export default function App() {
  const [calValue, setCalValue] = useState("");
  const [previewValue, setPreviewValue] = useState("");
  const [isAnswer, setIsAnswer] = useState(false);

  const ansColor = {
    color: isAnswer ? "green" : "white",
  };

  const handleBackSpace = () => {
    const remainValue = calValue.slice(0, calValue.length - 1);
    setCalValue(() => remainValue);
  };

  const handlePress = (text) => {
    setIsAnswer(false);
    const corrText = text === "X" ? "*" : text === "+/-" ? "-" : text;
    setCalValue((prev) => prev + `${corrText}`);
  };

  const handleClear = () => {
    setCalValue("");
  };

  const handleEqual = () => {
    if (!previewValue) return;
    setCalValue(previewValue);
    setPreviewValue("");
    setIsAnswer(true);
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={[styles.input, ansColor]}
        value={calValue}
        onChangeText={setCalValue}
        cursorColor='#8ad8d1'
        autoFocus={true}
        textAlign='right'
        showSoftInputOnFocus={false}
      />
      <TextInput
        value={previewValue}
        onChangeText={setPreviewValue}
        cursorColor='#8ad8d1'
        textAlign='right'
        caretHidden={true}
        showSoftInputOnFocus={false}
        style={[styles.input, styles.prevInput]}
      />

      <View style={styles.backButton}>
        <Pressable
          onPress={() => handleBackSpace()}
          disabled={calValue ? false : true}
        >
          <Ionicons
            name='md-backspace-outline'
            size={24}
            color={calValue ? "green" : "#035903"}
          />
        </Pressable>
      </View>

      <View
        style={{
          height: 2,
          backgroundColor: "#575757",
          marginVertical: 20,
        }}
      />

      <View style={styles.buttonContainer}>
        <Row>
          <Button handlePress={handleClear} label={"C"} type='clear' />
          <Button
            handlePress={handlePress}
            label={"()"}
            type='operator'
            icon={
              <MaterialCommunityIcons
                name='code-parentheses'
                size={30}
                color='green'
                style={{ fontWeight: "bold" }}
              />
            }
          />
          <Button handlePress={handlePress} label={"%"} type='operator' />
          <Button
            handlePress={handlePress}
            label={"/"}
            type='operator'
            icon={<FontAwesome5 name='divide' size={24} color='green' />}
          />
        </Row>
        <Row>
          <Button handlePress={handlePress} label={"7"} />
          <Button handlePress={handlePress} label={"8"} />
          <Button handlePress={handlePress} label={"9"} />
          <Button
            handlePress={handlePress}
            label={"X"}
            type='operator'
            icon={<FontAwesome5 name='times' size={24} color='green' />}
          />
        </Row>
        <Row>
          <Button handlePress={handlePress} label={"4"} />
          <Button handlePress={handlePress} label={"5"} />
          <Button handlePress={handlePress} label={"6"} />
          <Button
            handlePress={handlePress}
            label={"-"}
            type='operator'
            icon={<FontAwesome name='minus' size={24} color='green' />}
          />
        </Row>
        <Row>
          <Button handlePress={handlePress} label={"1"} />
          <Button handlePress={handlePress} label={"2"} />
          <Button handlePress={handlePress} label={"3"} />
          <Button
            handlePress={handlePress}
            label={"+"}
            type='operator'
            icon={<FontAwesome5 name='plus' size={24} color='green' />}
          />
        </Row>
        <Row>
          <Button handlePress={handlePress} label={"+/-"} />
          <Button handlePress={handlePress} label={"0"} />
          <Button handlePress={handlePress} label={"."} />
          <Button
            handlePress={handleEqual}
            label={"="}
            type='equal'
            icon={<FontAwesome5 name='equals' size={24} color='white' />}
          />
        </Row>
      </View>

      <StatusBar style='auto' />
    </View>
  );
}

function Row({ children }) {
  return <View style={styles.row}>{children}</View>;
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#010101",
    paddingVertical: 30,
    paddingHorizontal: 20,
  },
  input: {
    marginTop: 40,
    borderWidth: 1,
    padding: 10,
    color: "#fff",
    fontSize: 36,
  },
  prevInput: {
    fontSize: 24,
    marginTop: 40,
    marginBottom: 30,
    color: "#616161",
  },
  backButton: {
    flexDirection: "row",
    justifyContent: "flex-end",
  },
  row: {
    flex: 1,
    flexDirection: "row",
    justifyContent: "space-between",
  },
  buttonContainer: {
    flex: 4,
  },
});

From the snippet above, we can tell a lot is going on, so I've created an Expo snack for this point of the application so that we can see and play around with the application at this point, just in case you haven't been coding along 😊.

To get the best experience please switch to the Andriod / iOS tab below (depending on your device), and scan the QR code to test on your mobile device with the Expo Go app.

The Row component composes of four Button components and each Button has a different or similar prop value. For example, the button for the equal operation, the prop handlePress uses the handleEqual() function, which sets the preview Calculation to the Calculation Input.

The handlePress() function takes a text, and if the text is X it returns * and if +\- it returns - to the corrText variable, which then added to the previous value of the calValue state, also, the setIsAnswer(false) function is made false.

Notice also a new state is added const [isAnswer, setIsAnswer] = useState(false) , and it's to keep track of when the arithmetic calculation is correct and determine what colour the Calculation Input should be, either green or white, in the ansColor variable, which is added to the Calculation Input styles.

Just to be clear , Calculation Input is referred to the very first <TextInput /> component, while Preview Input is the second <TextInput />.

Let's move to the preview input and make it work:

...
import { useEffect, useState } from "react";
...

function valueHasOp(text) {
  if (text.length === 0) return false;
  if (
    text[text.length - 1] === "+" ||
    text[text.length - 1] === "-" ||
    text[text.length - 1] === "*" ||
    text[text.length - 1] === "/" ||
    text[text.length - 1] === "%" ||
    text[text.length - 1] === "(" ||
    text[text.length - 1] === ")"
  )
    return false;

  for (let i = 0; i <= text.length; i++) {
    if (
      text[i] === "+" ||
      text[i] === "-" ||
      text[i] === "*" ||
      text[i] === "/" ||
      text[i] === "%"
    ) {
      return true;
    }
  }
  return false;
}

export default function App() {
  const [calValue, setCalValue] = useState("");
  const [previewValue, setPreviewValue] = useState("");
  const [isAnswer, setIsAnswer] = useState(false);

  useEffect(() => {
    if (valueHasOp(calValue)) {
      let prevAns = eval(calValue);
      setPreviewValue(`${prevAns}`);
    } else {
      setPreviewValue(``);
    }
  }, [calValue]);

 ...

 return (
    ...
 )
}

From the snippet above, there's a useEffect hook, which checks for changes in the calValue state, and in its callback, there's a check with the valueHasOp() function, which checks if the string calValue has an operator, for example, if calValue is 2*2 the function returns true, if calValue is 2* it returns false cause that isn't a valid operation, also if calValue is an empty string, it returns false.

If the valueHasOp(calValue) function returns true then this expression is executed Function(`return ${calValue}`)() which evaluate JavaScript expressions as strings. If you've seen the eval() method before, it is similar to the Funtion() method.

If you'll like to learn more about the Function method, do read this guide: Function - JavaScript | MDN (mozilla.org) and also this article to know the difference between eval() and Function() : eval() vs. Function() in JavaScript (educative.io)

The returned value from the Function(`return ${calValue}`)() method is set in the setPreviewValue(`${prevAns)`) but if the valueHasOp(calValue) function returns false then setPreviewValue(``) method is made an empty string for nothing should be previewed.

At this point, the calculator application's main functionality works, but then there is a bug with selecting a portion of the Calculation Input to add a new number. To demonstrate the bug, see the video below:

For us to fix this bug, we'll need to know where the selection cursor is at every time on the Calculation Input (first TextInput); therefore, we need to listen to every change on the selection. Luckily, the React Native <TextInput /> component allows us to keep track of this with some props.

...

export default function App() {
    const [calValue, setCalValue] = useState("");
    const [previewValue, setPreviewValue] = useState("");
    const [isAnswer, setIsAnswer] = useState(false);
    const [cursorSel, setCursorSel] = useState({ end: 0, start: 0 });
    const [isCursorSel, setIsCursorSel] = useState(false);

    ...

    return (
        <View style={styles.container}>
          <TextInput
            style={[styles.input, ansColor]}
            value={calValue}
            onChangeText={setCalValue}
            selection={cursorSel}
            cursorColor='#8ad8d1'
            autoFocus={true}
            textAlign='right'
            onSelectionChange={(e) => {
              setIsCursorSel(true);
              setCursorSel(e.nativeEvent.selection);
            }}
            showSoftInputOnFocus={false}
          />
           <TextInput
             value={previewValue}...
           />

            ...
        </View>
    )
}

The above snippet shows only the changes; we'll need two new states. The first state const [cursorSel, setCursorSel] = useState({ end: 0, start: 0 }) keeps track of the selection cursor end and start property, while the second state const [isCursorSel, setIsCursorSel] = useState(false) track if the selection cursor has been changed.

On the Calculation Input, two new props were added, selection which take in the cursorSel state and onSelectionChange an event handler. The e.nativeEvent.selection expression gets the current location of the selection cursor, which is an object like this {start: 0, end: 0}.

onSelectionChange={(e) => {
   setIsCursorSel(true);
   setCursorSel(e.nativeEvent.selection);
}}

Even though we now keep track of when the selection cursor is moved with the onSelectionChange event handler, we haven't solved the bug. To solve the bug, every time a number is added to the Calculation Input, we need to know where the selection cursor is located and add the number to that spot. Therefore we'll need to change the functionality of the handlePress function.

const handlePress = (text) => {
    setIsAnswer(false);
    const corrText = text === "X" ? "*" : text === "+/-" ? "-" : text;

    setCursorSel({ end: cursorSel.end + 1, start: cursorSel.start + 1 });
    setCalValue((prev) => {
      if (prev.length !== cursorSel.end && isCursorSel) {
        let leftOver = prev.slice(0, cursorSel.end);
        let rightOver = prev.slice(cursorSel.end, prev.length);

        return `${leftOver}` + `${corrText}` + `${rightOver}`;
      }
      return prev + `${corrText}`;
    });
  };

Looking at the above snippet, it might look scary, but really what going on is that we first set the current selection cursor position with the setCursorSel function and then in the setCalValue function, there is a check if the previous value length prev is not equal to the cursorSel.end and isCursorSel is true.

Let's say the prev value is 5*4 and the cursorSel.end is at 0 , which means the selection cursor is next to 5 .

The leftOver variable would be "5*4".slice(0, 0) which returns an empty string ""

The rightOver variable would be "5*4".slice(0,3) which returns 5*4

Now, if the text parameter is "4", then corrText would be "4"

Put all together would be "" + "4" + "5*4" which evaluate to "45*4" .

This is a hacky solutions I know, but it works 😅

Okay, so that is it; we've successfully solved the bug; if you'll like to play around with it on your device, use the Expo snack below along with the Expo Go app; it's not suitable for the web.

GitHub repo: jomefavourite/calculator-native at blog branch (github.com)

Conclusion

If you've followed along with the article to this point, thank you very much, and if you can't tell, I'm still new to React Native 😊, and this is a project I built by myself without a guide just to get my hands dirty, and I can say React Native is really cool.

If you have suggestions on how the app could be improved, please leave a comment; also, I know there are other bugs. If you can fix them, do message on Twitter Favourite Jome (@FavouriteJome1).

Thanks for reading once again, and see you in the next Let's build Something Cool series 🤩

The GitHub CLI is a tool I've been using recently, and I doubt many of us developers are aware of it, so we'll be looking at some of its use cases which would help boost your productivity when it comes to using Github.

The GitHub CLI is a tool that takes Github to the command line, allowing us to perform GitHub operations such as making a pull request (PR), creating repositories (repo) etc., that would have been done on the GitHub website directly.

Prerequisite

• Basic knowledge of Git and GitHub
• Basic knowledge of the terminal or the Command Line Interface (CLI)

How to get GitHub CLI up on your machine

There are various means of installing the GitHub CLI on our devices depending on the Operating System (OS) you make use of.

Windows

You can use these package managers or command line installers such as WinGet, and scoop, which of course, must be installed first on your machine. But if you're on Windows 10 upwards, you should have WinGet by default.

winget install --id GitHub.cli

MacOS

brew install gh

For further instructions on how to install the GitHub CLI, please visit their documentation

Configuring GitHub CLI

Now that we got the CLI on our various machines, we need to be authenticated with our GitHub accounts to utilise the CLI.

Firstly, run the command on the terminal

gh auth login

When you run the command above, you'll get more prompt; the images below work you through the steps

Syntax of the GitHub CLI

The GitHub CLI commands follow a certain basic syntax or usage, which is:

gh: is the initial command, saying I want to use GitHub CLI

command: specifies the action you'll like to take, like login, pr (pull request), browse e.t.c

subcommand: specifies further commands that complete the command essentially. E.g.gh auth login, which we've used.

[flags]: specifies additional options or arguments to the command.

GitHub CLI Basic Commands

There are a lot of commands that serve different GitHub operations, so we aren't going to cover all; we'll look at two commands, which I offend make use of.

gh repo

The gh repo command is used for handling repositories, and it comes with lots of subcommands, such as:

• gh repo create
• gh repo clone
• gh repo delete
• gh repo edit
• gh repo fork
• e.t.c

To view the complete lists of the gh repo commands, do visit the docs here

Let's go over just one of the subcommands under the gh repo command:

gh repo create [<name>] [flags]

The command above is to create a repository, making it private and public, with flags and lots of other cool stuff concerning a repository beyond this article's scope.

[name]: specifies the name of the repository while

[flags]: specifies particular arguments for the repository being created, for example, making the repo public or private

Running the commands

Before we run the commands, you should know that there are two modes of using this command: the interactive mode and the non-interactive mode.

The interactive mode means you'd go through a list of questions like whether you want to clone the repo after it's been created, whether it should be a private or public repo, and other questions. Note the interactive mode doesn't take arguments, so only the command gh repo create is used.

Let's look at a step-by-step guide using the interactive mode command:

The non-interactive mode is a declarative way of specifying how the repo should be created, where the name and various flags would be specified.

Now, let's create a new repository just like we've done before, but this time in a non-interactive mode whereby there is no step-by-step procedure and no questions.

gh repo create new_repo --add-readme --private -d "Hello this is a new repo" -c

Notice I have 4 flags along with the repository name

--add-readme: specifies you want a Readme file added to the repo, obviously 😅

--private: specifies, hey repo, be a private repo 🔏

-d [string]: specifies description for the repo ✍️

-c: specifies you'll like to clone the repo once it's created ⬇️

Here's the output of the command:

If you'll like to know more about how the other subcommand are to be used, please read up on their docs here

gh pr

The gh pr command is used to work with GitHub pull requests, and it comes with lots of subcommands, such as:

• gh pr create
• gh pr close
• gh pr diff
• gh pr comment
• gh pr reopen
• e.t.c

To view the complete lists of the gh pr commands, do visit the docs here

Let's go over just one of the subcommands under the gh pr command:

gh pr create [flags]

The command above would be used to create a pull request, and there are two modes of running this command, just like the gh repo create command; we have the interactive mode and the non-interactive mode.

Running the command

Let's create a pull request on the new_repo repository we created earlier. Though in other for us to make the pull request to the repo, we must have created a new branch first because the sole purpose of a pull request is to say hey, I've made some changes would you like to merge my changes to some other branch (target branch).

So once you've identified that you have multiple branches, another thing to look out for is ensuring the working directory on the terminal is the directory you want to make the pull request to. That is, if the command pwd (print working directory) is run, it should output something like this /c/Users/..../new_repo. Basically, the last path should be a git repository, which in this case is new_repo.

Now, let's practicalize all this:

Interactive mode

Recap, so we need to create a new branch first, then make some changes, push those changes and make the pull request to the main branch from the new branch

Non-interactive mode

Now for this example, we write the entire command with flags such as --title or --body, which is used in the image below:

Note: if you're going to run the command above, you should have made some changes to your codebase and pushed it before creating the pull request. Also, note there are more flags when using the gh pr create command, to view all, visit the docs here

Conclusion

Now I believe you've got the hang of the GitHub CLI and will be willing to explore the various commands provided if you've got to this point in the article. One helpful flag to always make use of is the --help flag. I believe you could use it along with all the commands, which would guide you on utilising the commands instead of running to the documentation all the time.

Thanks for reading!

After a certain amount of years in college, most faculties make it compulsory for students to embark on the Industrial Training Programme, where students undergo supervised practical training (real-world training) in a selected industry to learn and get acquainted with some industrial skills. I had gotten to the year where I had to undergo this training which lead to questions like where would I like to work?

Since I was already into the Web ecosystem, I wanted to work for a company that was utilizing Web technologies, so as for me not to do something I wasn't interested in.

How I got the internship

In the desperate search for a place to have my Industrial Training (IT), I went online and searched for internship roles that were web-related and Front-end Development roles. I found a lot of remote roles, physical roles through platforms like Indeed, Google Jobs, MyJobMag etc then I applied to all I found meaningful, though I didn't apply to remote roles since I didn't want to work remotely.

Application process

I applied by sending in my resume and a brief write up, for example saying "I'll love to be an intern at your company". Upon doing this, I made some research about the companies that interest me, like what are they doing, their goals and their mission. Here's a preview of the message I sent to the company I worked with.

Funny enough Vasiti.com wasn't looking for an intern when I applied, they needed a Frontend Developer. But I took a leap of faith and still sent my resume by saying I'll love to be an intern at their organization knowing fully well that the role wasn't an internship role.

If you'll like to view the job description, responsibilities about the job when I applied, click the link here

So if you're looking for an internship role and you have a company in mind, even if they aren't looking for an intern just apply and pitch yourself, who knows, you might just get your desired outcome.

Though I didn't have a cover letter to support my resume, I made sure to include my best projects on the resume also I had the resume reviewed, all thanks to Victoria Lo and her wonderful article The Ultimate Resume Guide for Developers which set me to a right path.

If you're like to view the resume, click here

Just like that, I got replies from two organizations I applied to among several organizations. Here's the feedback I got:

I ended up going for the company Vasiti.com since I first got a reply from them and I liked they were geared towards helping students grow as an entrepreneur as of that time, then I took their assessment which spanned 24 hrs, honestly, that day was a rush 🥴. The assessment was to build a testimonial page from the design provided and also to allow users to add testimonials.

That day I didn't rest until I got the web page ready and looking much like the design and also implemented adding more testimonials. I made use of React and Styled Components to accomplish the project, here's the live demo and codebase

Platforms that impacted my skills building web pages from a design template are frontendmentor.io and devchallenges.io. I higher recommend these two platforms, just get a challenge and build.

Interview process

On July 1st, a mail was sent to me, congratulating me on the successful assessment submission, including the interview date which was the next day 😊.

So I consulted YouTube on how an interview would be structured, what questions would be asked and how to answer them. Even though I did watch some videos and practised what I'd say, the interview didn't go as planned 🤣. You see, in those videos I watched, the questions asked weren't technical they were questions like "Tell me about yourself?", "What experience do you have?", "How do you handle stress and pressure?"

Here's one of the videos I watched: Interview Questions and Answers! (How to PASS a JOB INTERVIEW!)

I eventually didn't practice any technical questions for the role as a Frontend Developer, which showed effect when I got to the interview seat. Also, I didn't make more research about the company, what could be improved on their website, well I guessed I believed the questions in the youtube videos I watched were what I'll be asked.

The next day, getting to the hot seat, faced with the CEO, CTO and HR of the company was really intimidating for me, even though they hadn't asked questions 😂. Eventually, after introductions, the questions started, firstly by the HR manager. She asked questions like how I got to know about the company, a brief introduction about myself and other questions alike.

Next off, technical questions by the CTO were thrown at me, mainly about React. Questions like what's the difference between a Functional Component and Class-based components, what's OOP, can hooks be used in a Class Component. But I think the very first question was how I would rate my skills with React from 1 to 10 and silly me at that time said 5.

Well, I guess I felt confident rating myself 5 in React as of that time and I didn't want to rate myself too low as for me to get employed, but really that lead to more follow-up questions that I couldn't give correct answers to because I was unprepared.

I felt bad for not practising enough, that when it came to the CEO questions I was down and while answering his questions I tried thinking deeply for an appropriate answer. I remember being asked by the CEO from the website what can I improve. Seriously, when I heard the question I couldn't think of any reasonable answer because I didn't take note of what could be improved.

I ended up talking about SEO (Search Engine Optimization) and saying whatever came to my mind 😂. Other questions like if I'll like to get paid as an intern at the company was asked and I eagerly said YES! 😁. Then I was asked how much I'll like to be paid, hmm, this was a tough question.

Initially, upon getting to the interview I had concluded I would like to be paid at least N30k per month, but weighing how the interview had gone I changed my mind and said N20k to the CEO. After responding to the question, I could see on the CEO's face a sign of relievement that I didn't go too far with the money.

I know! probably if I had went with a price higher or stuck to N30k as I planned I might have still gotten the role, but right now it doesn't matter

Landing the Job

After a week from the interview, almost losing hope of getting feedback, I got a mail on July 11th, welcoming me to the company. I wouldn't lie, I was really happy getting the mail that day and grateful I was accepted.

Then, I had to relocate from my family home to a new home closer to my workplace. The family I stayed with accepted and accommodated me very well and for that, I'm sincerely grateful to them.

While starting the job my salary was concluded to be N25k per month and I learnt a lot during the space of 5 months, so here are some of what I've learnt.

What I've Learnt

I'm going to share both technical and non-technical things I have learnt doing the 5 month internship

1. Asking Questions when stuck is one of the best ways to learn

There were so many tasks I was given, that I literally had no idea how to tackle and solve them. Even after my supervisor has taken his time, explaining how and what I needed to do, I might still not just get it right on the first trial.

There was this night, I got really frustrated and left the office angry just because I couldn't complete my task, this was around the second to fourth week working at the company.

The next day, when I got to work with a fresh mind, I asked questions to the other Frontend Developer who is a Guru BTW, and he helped me out fixing my issue.

The main reason I got to the point of being frustrated was that I was stubborn and didn't want to follow my colleague's method, well being strong-headed didn't work out well 😂.

2. Own up to Your Mistakes

I've made some mistakes and pushed them to production 🤦‍♂️. Mistakes such as not changing an API endpoint, so when users search for a product they get the wrong product, not checking properly if the webpage is fully responsive on all devices, using a test authorization key and pushed to production.

Lots of mistakes, I've made but when it came to answering those mistakes, I learnt to admit that I was the cause of those issues and quickly I was able to fix them as well with some help from my colleagues.

3. Acquired knowledge on business terms

Every morning by 9 am, Start of Business (SOB), we attend a stand-up meeting, where everyone has to talk about what they did the previous day and what they plan to do that current day. Questions during this period were also allowed.

I got exposed to what each department of the company does, be it the sales department, customer care, marketing department etc. Through questions and just listening I learnt a lot.

I got to know about setting OKR's (Objective Key Results), KPI (Key Performance Indicator) and many more organisational terms.

4. New Technologies

I got to learn about new technologies I hadn't used before on the job, such as Next.js, Material UI, react-hook-form, SWR and lots more. Working with these tools daily got me acquitted with many concepts.

5. Reading an already written codebase saves you time

Reading my colleagues code, what they've done in the past saved me a ton of time. Whenever I was tasked to do something similar to what have been done in the past, all I had to do was go read and understand what my colleagues had done.

From there, I could manipulate their code and achieve what I want, a win-win situation right? But honestly most times I don't understand what some code does, once I know that the solution to my problem, all I do is copy and paste, a typical trait of a developer 😏

6. Stress and Fatigue comes with the Job

Sitting down all day, leaving the office late mostly around 6 pm - 7 pm, facing challenging tasks, all bring about stress and tiredness. Most days I felt like not doing anything cause the previous day I was stressed out.

So this is something you might experience

7. How to be a team player

Learnt how to listen to others opinions, instead of just jumping right into coding, how to comport what I say, how does it affect my colleagues, accepting when it is totally my fault when something is wrong.

I got to collaborate with the backend developer, getting API endpoint from him, what parameter/data should be sent back to the backend, how's the API structured and stuff like that.

Collaborated with the designer, the other Frontend developer and the Full-stack developer in other to achieve our tasks.

8. Working to get paid isn't easy

Yeah, this is something I learnt while working since this was my very first job and a means to make money from my web skills.

Waking up early, preparing for work by 6 am and being on the road just to get to work before 9 am and still getting home late mostly around 8 pm-ish or much more later every working day isn't easy. I applaud my parents for working and providing for me and my siblings, money is really hard to get.

I could go on and on about what I've learnt during does 5 months but I'll stop here, I hope you've learnt something from my experience if you've gotten to this point of the article.

Conclusion

In the end, I think I've acquired a good amount of knowledge from the company. I might have been lucky to get accepted but I went for what I wanted.

So I'll say, go for what you want, make sure it's a place you can learn something new every day, tackle challenging problems and eventually solve them.

I had a wonderful team to work with, people I could learn from, a wonderful supervisor that wanted me to grow and learn, a CEO that leads by example, overall it was a wonderful experience working at the company. Grateful for the push and complicated task I was assigned 😏. Thank you Vasiti.com

I'm also truly grateful to everyone that helped me in the process of looking for an IT placement, my parents, friends and family, grateful to people on Twitter that sent me applications to apply. Thank you all.

Thanks for reading ✌

**Note:**The code sandbox is best viewed on a large screen

Prerequisite

• Basic knowledge of React.js

• Basic knowledge of the command line

Back story for the project

While watching the Next.js Conference, Pedro Duarte spoke on the topic: "So You Think You Can Build A Dropdown?" where he built an accessible dropdown making use of a library called Radix

What's Radix

Radix is an open-source UI component library for building high-quality, accessible design systems and web apps that are un-styled. Styles can be applied using any styling solution be it plain CSS, SCSS, Tailwind CSS and so on.

Some of the UI components they provide are: Accordion, Dialog, Dropdown Menu and lots more. Do check out their website to see more components: Radix

Setup

First thing first, we'll need a react project and do this, we need to install react with the command below:

npx create-react-app windows-dropdown

Now that we've got our react app setup, we'll need to install the primitive next, which in this case is the dropdown-menu. Run the command below to get it installed:

npm install @radix-ui/react-dropdown-menu

We'll need the icons Radix also provides, so let's install the icon library.

npm install @radix-ui/react-icons

**Note: ** Using the Radix icon library isn't mandatory, you could use SVG or images of your choice.

Building the dropdown component

Now, let's move to the src directory to create a components directory and then a file named WindowsDropdown.js (feel free to name the file name as you please).

In the WindowsDropdown.js file, let's get a functional component setup like this:

import React from "react";

function WindowsDropdown() {
   return (
      <div>
          Here's the windows dropdown component
      </div>
   )
}

export default WindowsDropdown;

Now, let's import the WindowsDropdown component in the App.js file, in order to view the WindowsDropdown component on the browser.

import WindowsDropdown from "./components/WindowsDropdown";

export default function App() {
  return (
    <div>
      <WindowsDropdown />
    </div>
  );
}

Run the command below to get the application running on the browser

npm start

How to get the Dropdown setup

Before getting started with the windows dropdown component, let's demo how the Radix dropdown will be set up.

Note: You don't have to type in these code in your editor since it's just to explain how the library is used

import React from "react";
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";

function WindowsDropdown() {
   return (
      <DropdownMenu.Root>
         <DropdownMenu.Trigger>Click me</DropdownMenu.Trigger>

         <DropdownMenu.Content>
             <DropdownMenu.Item>
                 New Tab
            </DropdownMenu.Item>
            <DropdownMenu.Item>
                 New Tab
            </DropdownMenu.Item>
         </DropdownMenu.Content>
     </DropdownMenu.Root>
   )
}

export default WindowsDropdown;

From the demo above, you'll notice the dropdown doesn't have styles applied. Try navigating through the items with the keyboard arrows (up key and down key) when the button is clicked; you'll notice the first item is focused, then when moved to the next item, it's also focused well; this will only work on a desktop, not mobile. This shows how accessible the library is.

• Firstly, we import all the various component parts that come with the dropdown primitive with the asterisk sign given an alias/label DropdownMenu

import * as DropdownMenu from "@radix-ui/react-dropdown-menu";

Note: Each component could be gotten individually like this: import {Root} from "@radix-ui/..."

• DropdownMenu.Root
  Contains all the parts of the dropdown menu, basically housing all parts.

• DropdownMenu.Trigger
  This is basically a button that toggles the dropdown menu when clicked.

• DropdownMenu.Content
  This is the component that pops out when the dropdown menu is open.

• DropdownMenu.Item
  This component contains the dropdown menu items.

Now let's go over a demo with a nested dropdown.

import React from "react";
import React from "react";
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";

function WindowsDropdown() {
  return (
    <DropdownMenu.Root>
      <DropdownMenu.Trigger>Click me</DropdownMenu.Trigger>

      <DropdownMenu.Content>
        <DropdownMenu.Item>New Tab</DropdownMenu.Item>
        <DropdownMenu.Item>New Tab</DropdownMenu.Item>
        <DropdownMenu.Root>
          <DropdownMenu.TriggerItem>
            View more dropdown
          </DropdownMenu.TriggerItem>
          <DropdownMenu.Content>
            <DropdownMenu.Item>Auto arrange icons</DropdownMenu.Item>
            <DropdownMenu.Separator />
            <DropdownMenu.Item>Align icons to grid</DropdownMenu.Item>
          </DropdownMenu.Content>
        </DropdownMenu.Root>
      </DropdownMenu.Content>
    </DropdownMenu.Root>
  );
}

export default WindowsDropdown;

From the codesandbox above, you'll notice when the view more dropdown text is hovered on / navigated to through the arrow keys, another dropdown is shown. That's a nested dropdown, now, let's walk through how the code snipper is constructed.

• DropdownMenu.TriggerItem
  An item that opens a submenu. Used in combination with a nested DropdownMenu. Must be rendered inside DropdownMenu.Root.

 (
    <DropdownMenu.Root>
      <DropdownMenu.Trigger>Click me</DropdownMenu.Trigger>

      <DropdownMenu.Content>
        <DropdownMenu.Item>...</DropdownMenu.Item>

        <DropdownMenu.Root>
          <DropdownMenu.TriggerItem>
            View more dropdown
          </DropdownMenu.TriggerItem>

          <DropdownMenu.Content>
            <DropdownMenu.Item>...</DropdownMenu.Item>

            <DropdownMenu.Item>...</DropdownMenu.Item>
          </DropdownMenu.Content>
        </DropdownMenu.Root>

      </DropdownMenu.Content>
    </DropdownMenu.Root>
  );

Styling the Dropdown

Styling the component is very easy, all we need is to apply classes className to each component we will like to style. Let's see this in action:

import React from "react";
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
import { ChevronRightIcon } from "@radix-ui/react-icons";

function WindowsDropdown() {
  return (
    <DropdownMenu.Root className="root">
      <DropdownMenu.Trigger className="trigger">Click me</DropdownMenu.Trigger>

      <DropdownMenu.Content className="content">
        <DropdownMenu.Item className="item">Tab One</DropdownMenu.Item>
        <DropdownMenu.Item className="item">Tab Two</DropdownMenu.Item>

        <DropdownMenu.Root>
          <DropdownMenu.TriggerItem className="item">
            View
            <div style={{ marginLeft: "auto" }}>
              <ChevronRightIcon />
            </div>
          </DropdownMenu.TriggerItem>
          <DropdownMenu.Content className="content content--drop">
            <DropdownMenu.Item className="item">
              Auto arrange icons
            </DropdownMenu.Item>
            <DropdownMenu.Separator />
            <DropdownMenu.Item className="item">
              Align icons to grid
            </DropdownMenu.Item>
          </DropdownMenu.Content>
        </DropdownMenu.Root>
      </DropdownMenu.Content>
    </DropdownMenu.Root>
  );
}

export default WindowsDropdown;

body {
  ...
}

.trigger {
  padding: 1rem 2rem;
  font-size: 20px;
  background: rgba(0, 0, 0, 0.61);
  color: #fff;
  border: 2px solid black;
  border-radius: 20px;
}

.content {
  background: #000000a2;
  padding-block: 10px;
  border-radius: 8px;
  box-shadow: 0 5px 6px 5px rgba(0, 0, 0, 0.199);
  color: rgb(224, 224, 224);
  min-width: 300px;
}

.content--drop {
  background: #000000ab;
  border: 1px solid black;
}

.content--drop .item {
  padding-left: 25px;
  justify-content: space-between;
}

.content > * + * {
  margin-top: 0.8rem;
}

.item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 5px 10px;
  margin-inline: 10px;
  cursor: default;
  border-radius: 5px;
}

div [role="menuitem"],
div [role="menuitemradio"] {
  outline: none;
}

div [role="menuitem"]:focus,
div [role="menuitemradio"]:focus {
  background: #46464681;
}

@media (prefers-reduced-motion: no-preference) {
  .content {
    animation-duration: 400ms;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
  }

  [data-state="open"][data-side="top"] {
    animation-name: slideDownAndFade;
  }

  [data-state="open"][data-side="right"] {
    animation-name: slideLeftAndFade;
  }
  [data-state="open"][data-side="bottom"] {
    animation-name: slideUpAndFade;
  }
  [data-state="open"][data-side="left"] {
    animation-name: slideRightAndFade;
  }
}

@keyframes slideUpAndFade {
  0% {
    opacity: 0;
    transform: translateY(9px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideRightAndFade {
  0% {
    opacity: 0;
    transform: translateX(-2px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideDownAndFade {
  0% {
    opacity: 0;
    transform: translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideLeftAndFade {
  0% {
    opacity: 0;
    transform: translateX(2px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

Notice the use of the @keyframe rule from the snippet above. So it's possible to add animations also using Radix, which is super cool.

Also, from the CSS snippet, you'll notice the use of attribute selectors such as:

  [data-state="open"][data-side="top"] {
    animation-name: slideDownAndFade;
  }

  [data-state="open"][data-side="right"] {
    animation-name: slideLeftAndFade;
  }
  [data-state="open"][data-side="bottom"] {
    animation-name: slideUpAndFade;
  }
  [data-state="open"][data-side="left"] {
    animation-name: slideRightAndFade;
  }

The reason why there are various alternatives to the data-side attribute, which is added to the DropdownMenu.Component element is because depending on the space available for the dropdown, it'll adjust to the viewport to either show at the top, right, left, or bottom view, pretty much as you'll have it on Windows 11.

Eg:

WindowsDropdown Conclusion

Here's the complete version for the windows dropdown below. Feel free to go through the code sandbox and if you have any questions concerning the project, feel free to ask. Thanks for reading, and see you in the next Let's Build something cool series

Resources

• Radix Docs

• Next.js Conference - So You Think You Can Build A Dropdown?

So in this article, we'll look into a feature we developers would probably use frequently in VS Code: the Version Control feature called Source Control in VS Code. Understanding some of the various operations, how they translate to the Git commands and how the operations are useful for managing source control in VS Code.

Note: Please feel free to jump around the Table of Content cause you might not need all the information if you already know about them, but you could read all and probably learn something new

Prerequisite

• Basic knowledge of Git
• Basic knowledge of VS Code interface

What's the Source Control or the Version Control

The Source Control or Version Control is a system used to manage all activities carried out on a computer program which is also referred to as a human-readable program known as the source code.

If you'll like to read more about what Source Control or Version Control is, please do here.

Source Control Panel on VS code

VS Code uses Git right out of the box as its primary Version Control system, which means you'll need Git installed on your PC before using Git through the Source Control sidebar on VS Code.

To get Git on your machines, follow the links below:

For Windows OS

Download Git for Windows

For Linux OS

Download Git for Linux or run the command on the terminal

sudo apt install git

For Mac OS

Download Git for Mac

Now that we've got Git installed on our various machines, we need to config Git to our machine. Don't worry; this step is a one-time process.

Setting up Git for VS code

Firstly, we need to set up our identity through the terminal, which can be opened/closed on VS code by using (Ctrl + J). Our username and email address are needed to set up our identity for Git.

git config --global user.name "John Doe"
git config --global user.email johndoe@example.com

Note: Please do change " John Doe" to your username as it is on Github and also the email address johndoe@example.com to your email address

The next step is configuring the code editor, which is being used to access Git; since we're using VS code, we input the command below into the terminal.

git config --global core.editor "code --wait"

If for any reason you're making use of a different editor, do visit here listing out the commands for other editors

Lastly, we need to set up the default branch name. Recently, the default Git branch name was changed to main from master, so to configure the branch name, we make use of the command:

git config --global init.defaultBranch main

That's it! Git is fully configured on our machines; we can now go back to explore the Source Control Panel.

Note: Read more about Getting Started First Time Git Setup

Working with the Source Control Panel

Now that we know what Source Control is let's dive into VS Code and explore the various options that it provides.

The source control panel can be accessed using the keys (Ctrl+Shift+G) or by clicking the icon below on VS code.

While working on a directory/folder in VS code and having the source control sidebar opened, two options will be shown, which are:

• Initialize Repository
• Publish to Github

Initialize Repository when clicked create a .git folder, which is hidden by default in the working directory (or current folder being used) except you turn on the option of showing all hidden files on your PC file explorer, that's when it's visible.

The .git folder contains all the necessary information for a project to be recognized as a version control project, information about commits, branches, remote repository addresses etc are all managed in the .git folder.

The equivalent of clicking on the Initialize Repository button is the command below, which can be run on the terminal.

git init

The Publish to Github button when clicked, pops out a dialog for entering a repository name. By default, the name of the folder housing the project files would be selected as the name of the repository but it's changeable.

Note: you can't publish to Github if you've not connected VS code to Github.

Connect Github with VS code

There are various means to connect VS Code to GitHub, well we'll go through just one means, which is clicking on the Accounts icon, at the bottom of the sidebar.

Then we click on the Sign in to Sync Settings option which present us with a pop-up, signifying if we'll like to sign up with Microsoft or Github.

Let's signup with Github, upon clicking on the option we will be redirected to the browser window, where we are to click on the continue green button, which then signs VS code with Github. To confirm it worked correctly, go to the "Accounts Icon" on the sidebar once more, this time you should find your GitHub username displayed.

Great! We've been able to completely get VS code up and running with Git and Github. Now let's look into the various features that VS code offers through the Source Control panel.

Recording Changes to Git

When a project is initialized with Git either by clicking on the Initialize Repository or running the command git init, all the files or folders in the current directory move to an Untracked State (U) shown underneath the Changes Dropdown at the Source Control Panel.

Note: the U at the right side of each file from the image above means Untracked, and this shows on files that Git doesn't recognize.

Remember: the .git folder is created once git is initialized in a folder, which keeps track of all the files

Let's go over some features, which are accessed by icons on the files.

Discard Changes

Discarding changes on a file or files simply means removing the file/files from the changes dropdown, deleting all changes made to the files that haven't been committed. In this case, we've not committed our files and there still in the Untracked State so if the files were to be discarded all the files will be deleted, so be really sure you want to discard a file or the entire files to be committed.

Note: To discard changes, you make use of the hook-like icon shown below:

Note: Each file underneath the Changes Dropdown also have the Discard icon

Stage Changes

Stage changes mean that the file or the files are to be tracked by git. At this point, the file(s) are in the Tracking State, which means git recognizes that these files would be committed.

Note: The files in the Staged Changes dropdown only shows those changes/files to be committed or rather that are being tracked by git

You must have used the command shown below if you've ever used git before. All you're doing with the command is to tell git, hey, I'll like you to keep track of these files or a file, which means you're staging the file/files.

git add <name of file>

To add file(s) to the Stage Changes on VS code, you click on the + icon on each file or on the Changes dropdown.

From the image above, I'm going to stage both account.png and changes.png files. By doing this, a new dropdown would be created named the Staged Changes

Notice the A letter added to the files at the Staged Changes dropdown, it means Added, which denotes that git is keeping track of the files

Committing Files

While following Git command instructions, here's how we'll commit a file/files to Git:

git commit -m "First Commit"

Now using VS code, in order to commit out staged files which are account.png and changes.png, we go to the message input at the top of the Source Control Panel.

Then we type in a message like "First Commit", then click in the checkmark icon to commit the files.

Once the Staged changes files have been committed, the files wouldn't be seen anymore on the Source Control panel, because Git now recognizes those files as its own.

Publishing to Github

To publish the committed files to Github, we'll need to move to VS code Status Bar, right at bottom of the IDE.

Notice: from the image above, it says "blog (Git) - Publish to Github". This is because my working directory/folder is named blog that's why you can see the blog there. Also, whatever the working directory name is, that will be taken as the default repository name but still changeable.

The next step would be to click on the icon next to the branch name which is main. When the icon is clicked there would be a pop up prompting you to sign up using Github.

Click on Allow, which then redirect you to the browser, click on the continue button and that's it, next off would be to input the repository name.

From the image above, the repository name is "vscode-test", then you can decide if you'll like the repository to be private or public, once you either pick private or public it should show an indication at the right bottom view of VS code that the repository is publishing.

Once it shows "successfully published...", you can open Github to view the newly created repository.

Conclusion

We've covered how to set up Git in VS Code, how to initialize a repository and then publish the repository. In the next part of the article, we'll look into more advanced operations like Stashing, Switching between branches, Synchronization and many more.

Thanks for reading! I hope you find the article useful and don't forget to like and share the article.

See you in the next article! 👋

Resources

• Using Version Control in VS Code
• Getting Started - First-Time Git Setup
• Git Basics - Recording Changes to the Repository

What's PlanDone

PlanDone is a platform made for Students who would like to learn smart, be productive and access everything they need while studying in one place.

By giving students the ability to save their notes, tasks and forecast their Cumulative Grade Point Average (CGPA) score, which can all be accessed at any time. So now you can make sure you Plan and then complete (Done) 😏.

Github Repo / Live Demo

Inspiration for the PlanDone

The year 2020 at December, Hashnode hosted a Christmas Hackathon, where an amazing project was built by Rutik Wankhade - How I built my own productivity app which is a Productive app extension for browsers I used for quite a while.

It's a great extension to quickly take notes, fill in tasks and so on. I really loved the idea behind the project so that's how I came about building PlanDone.

Back story TL;DR

So at school, I took a Web Design class which is compulsory for all CS majors and at the end of that semester, we were tasked to come up with an idea for a project, using HTML, CSS, and JS which we were taught in class.

After submitting about 3 project ideas to my lecturer, all were rejected for reasons I would never know :), then I thought of building an application that ties towards productivity because I could be really unproductive. Meanwhile, I was using Rutik Wankhade project as my browsers extension at that time and that's how I got the idea. I submitted the project idea to my lecturer and it got accepted 🎊.

Then, I built the frontend aspect (more context below), making use of the browser's local storage feature to store users notes, tasks and links so that I could submit the assignment.

At this time, I was exploring backend technologies, so I said to myself, why don't I put my learnings into a project. So that's how the challenge started, making my first Full Stack Application.

Features of PlanDone

1. Creating Notes

The notes created comes in different colours with the help of Syntactically Awesome Style Sheets features and a Masonry Layout which I think is pretty cool.

All notes created can be edited and deleted, also notes are written in markdown format if signed up to the platform, that's a special feature 😃

2. Creating Tasks

Tasks could be anything you'll like to do, just add it with a deadline date. Once done, you click on the checkbox to mark it has done.

3. CGPA Forecaster

With this feature, students can easily see the score they need to work towards from their previous grades.

This was a project done for Hashnode Christmas Hackathon 2020, view the article for the project here: CGPA Result Forecaster - Hackathon Project

4. Creating Links

The idea here is to add links to projects/articles/anything really, you might easily forget, this way you never lose a link you wanted to check out.

Quick Note
All the features above work both when a user signs in to the application and when they aren't signed in, the only caveat will be without signing in all information will be lost.

Also don't forget to give the project a star ⭐, if you think it's a fun project like I do 😎 - https://github.com/jomefavourite/PlanDone

Built With

• Node.js for authentication, routing.
• Express for ease while working with Node.js
• EJS: A template engine language that generates HTML markup with plain JavaScript.
• SASS: Sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets.
• MongoDD/Mongoose for managing, storing or retrieving information.
• Heroku for hosting the application.

Planning, Building and Deploying

Here's where all the fun started, my first commit was on Jun 21, 2021, which was the time I had started making the project a Full Stack Application.

There was a lot of back and forth movement while planning and building the project, lots of tools were added and removed. I tried different tools, exploring as I build, which I'll say is good but it would have been better if I had my plans all laid out.

Leave a comment below, which you feel is better - Exploring different tools while you build or Having predefined tools to be used.

• Planning:
  

  Since I already had an idea of what I wanted to build from Rutik Wankhade Project: How I built my own productivity app, it was easy to pick some fundamental tools I did use like EJS, Node.js, Express, SASS etc.
  
  Also, I created designs for the project with the help of Figma, first I did the wireframe for each page of the project.
  

  The wireframe was a requirement for school. If you'll like to know more about wireframe, click here - How to wireframe a website

  After completion of the wireframe, I moved then to the mockup of the website, which is a high-fidelity simulation of how I want the website to look.
  
  View the Wireframe/Mockup Designs

• Building:
  

  My building process started by setting up a Node application and figuring out how to set up Google authentication for the application, getting users Google data and tying their data into a database, so a user sees his/her information saved to PlanDone.

  Quick Note: Before figuring out the authentication processes, I had already done the Frontend aspect of the project where I made use of HTML, CSS, JS and also the browser Local Storage for store users information.

  With the help of some videos on YouTube, I was able to configure Google's authentication using passport-google-oauth2 which is Google's strategy for signing up into web applications, more on that on their documentation.
  
  After I had figured out the authentication process, I moved into setting up my database, where I made use of MongoDB which is a NoSQL database making use of JSON-like documents with optional schemas. More on MongoDB here -Building A CRUD Application Using Node JS And MongoDB Atlas by Altaf Shaikh.
  
  Thereafter I moved to implement other features I thought were cool, broke a lot of things, figured them out and generally learnt new things in the process. By the way, I made use of EJS which is a template engine language that generates HTML markup with plain JavaScript but in this case, I made use Node.js.
  
  Lastly, I had a lot of fun playing with SASS special features, creating custom Mixins, functions and the likes. If you'll like to read more about SASS, I've got an article here - Write CSS with Superpowers Using Sass.

• Deploying
  

  This was the most stressful part, at some point, I gave up for a while and continued trying once again.

  So the project is deployed to both Vercel and Heroku. It seems Vercel doesn't support EJS, so I couldn't get it running with Vercel, then I moved to Heroku. Heroku gave me a tough time, I just couldn't figure out why I wasn't able to view the project live. Even now I don't know what I did to make it work 😅, but it works finally after a series of errors.

Resources used to Learn

• https://www.youtube.com/playlist?list=PL4cUxeGkcC9jsz4LDYc6kv3ymONOKxwBU
• NodeJS & Express - Google OAuth2 using PassportJS
• Node.js App From Scratch | Express, MongoDB & Google OAuth

Conclusion

It was a fun experience working with both Frontend Technologies and Backend Technologies, I look forward to building more Full Stack applications. So that's it, I wanted to share my experience building the application, hope it was a good read.

Also, If you'll like to contribute to the project, please do. I know there are a lot of bugs yet to be fixed, I might improve the project later on by making use of React or Next.js.

Lastly, don't forget to give the project a star ⭐, if you like the idea behind the project 😎 - https://github.com/jomefavourite/PlanDone

Thanks for Reading, do have a great day 👋

So in this article, we'll create a simple rich text editor, which allows you to type in text with different headings, supporting some markdown features, unfortunately not all but it's really cool what it can do.

Here's what we'll be building together, pretty basic but it's a rich text editor. Feel free to play around with it.

How I came about CKEditor?

If you don't care about the back story, click here to go to where we'll build the Rich Text Editor.

While playing around with textarea element on the browser I found out that it accepts HTML elements, and they can be added to the DOM using JavaScript as HTML elements.

To try this out, type in any valid HTML element in the codepen textarea below, then click on the submit button.

Hopefully, you've tried out the codepen above, If you notice whatever valid HTML element you input the textarea gets output just as an HTML element on the browser. That's really cool if you ask me.

So that's how the thought came, why do I have to type a statement like this <h1>Hello</h1> every time into the textarea box. Isn't there an easier way to just click on a button which is meant for the heading <h1></h1> then type in some contents which will be represented like this <h1>Contents are here</h1>?

Then I gave it a shot, tried my best to implement the functionality but failed, so I had to look for an alternative and that's how I found the CKEditor, which does exactly what I thought of.

CKEditor

The CKEditor is a smart rich text editor with collaborative editing. Well, we'll be building a really simple text editor, nothing too complicated but with lots of awesome features.

Visit CKEditor website to find out more about its features

For this tutorial, we will be using CKEditor 5, which is the latest version and also making use of the Classic editor which is one of the builds provided by CKEditor.

CKEditor provides 5 different builds which are essentially different ways to set up the rich text editor.

• Classic editor
• Inline editor
• Balloon editor
• Balloon block editor
• Document editor

Please I advise you to click on the different builds link above to explore.

Getting Started

We'll be needing three files to work on this project, which are index.html, style.css, main.js. Firstly open up the index.html file.

HTML

The first thing we'll need load the classic editor build with the CDN shown below in the index.html file at the head element.

   <head>
      ....
      <script src="https://cdn.ckeditor.com/ckeditor5/28.0.0/classic/ckeditor.js">
   </head>

Next off, we'll need a textarea and a button element mainly, followed by a div element where all the data from the editor will be added to as a card component. View the HTML file below:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Rich Text Editor</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://cdn.ckeditor.com/ckeditor5/28.0.0/classic/ckeditor.js"></script>
  </head>
  <body>
    <h1>Rich Text Editor</h1>

    <textarea name="textarea" id="textarea" cols="30" rows="10"></textarea>

    <button id="submit">Submit</button>

    <div class="output">
       <!-- What you type will appear here -->
    </div>

    <script src="main.js"></script>
  </body>
</html>

Also, notice that there's an external script file named main.js. That's pretty much all there is for the HTML file.

If you're wondering, why are we using a textarea element, well it will get replaced to the Classical Editor once we load in the JavaScript file.

CSS

The stylesheet is really basic, I'll leave you to go through it, but nothing much is going on.

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  width: 90%;
  max-width: 1000px;
  margin: auto;
}

h1 {
  text-align: center;
}

p {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.card {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.274);
  padding: 0.1rem 1rem;
  border-radius: 10px;
  min-height: 200px;
  height: 200px;
  background: #fff;
  overflow: hidden;
  word-break: break-word;
  white-space: normal;
}

.card:hover {
  overflow: auto;
}

button[id='submit'] {
  width: 100%;
  padding: 0.5rem 1rem;
  margin-top: 1rem;
  font-size: 18px;
}

.ck-content {
  min-height: 300px;
}

.output {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  margin-top: 2rem;
}

@media (max-width: 480px) {
  .output {
    grid-template-columns: 1fr;
  }
}

JavaScript

First, we select the appropriate elements we will need, such as the div element with the class name of output where all the cards containing whatever we type into the editor will be, the submit button, and the text area.

const output = document.querySelector('.output');
const submitBtn = document.querySelector('#submit');
const textArea = document.querySelector('#textarea')

Next off, we need to call the method ClassicEditor.create() which takes in an argument which is the textarea element, which is referenced with the variable textArea.

 ClassicEditor
        .create( textArea )
        .catch( error => {
            console.error( error );
        } );

The snippet below, is to catch any unforeseen errors that might occur, which means a promise is being returned by the method ClassicEditor.create()

.catch( error => {
     console.error( error );
 } );

Here's what should be shown on the browser if you've followed along so far, so it there's any issue please do traceback.

Looking at the image above you'll notice there is an icon for adding images though it wouldn't work without some configuration and that adds more complexity to the simple Rich Text Editor, we are building.

If you love to be able to add images to the CKEditor, please do read the docs here: Custom image upload adapter

So, what's best is to remove the feature completely and any other feature that isn't needed (this is my preference, please feel free to play around the documentation to learn more) and make the Classic Editor as clean as possible. In other to do so, we'll need to change the default configurations that the CKEditor provides by added curly braces {} next to the textArea variable.

ClassicEditor.create(textArea, {
  toolbar: [
    'heading',
    '|',
    'bold',
    'italic',
    'link',
    'bulletedList',
    'numberedList',
    'blockQuote',
    'undo',
    'redo',
  ],
})
  .catch(error => {
    console.error(error);
  });

So essential the toolbar property holds an array of all that should be shown by the editor and now you should have this:

I'll advise you to get your hands dirty with the code, try breaking things and not just only follow along, if you lose track just Ctrl + Z 😉

Now we need to add the final functionality, which is to generate cards that contain what we type into the editor. To do this, we'll need to create a variable that would hold what is typed into the editor.

const textArea = document.querySelector('#textarea')

let editor;

ClassicEditor.create(textArea, {...}

Then the ClassicEditor.create() method is to return a response data which will be captured by the .then() method.

.
.
.

let editor;

ClassicEditor.create(textArea, {
  toolbar: [
    'heading',
    '|',
    'bold',
    'italic',
    'link',
    'bulletedList',
    'numberedList',
    'blockQuote',
    'undo',
    'redo',
  ],
})
  .then(newEditor => {
    // notice the editor variable here is 
    // holding the response daa from the editor
    editor = newEditor;
  })
  .catch(error => {
    console.error(error);
  });

By following the above snippet the variable editor will be holding an object with the contents that are typed into the editor.

Now, we need to work on the submit button, so when there's a click on the submit button a card will be generated with the contents from the editor.

submitBtn.addEventListener('click', () => {
  const editorData = editor.getData();

  if (editorData) {
    output.innerHTML += `
      <div class="card">
        ${editorData}
      </div>
    `;

    editor.setData('');
  }
});

From the above snippet, the submitBtn has a listener for a click event, which then evokes the callback function.

Notice, editor.getData(). So getData() method is used to get the actual translated HTML elements from the editor, which is then held in the editorData variable.

Then, an if condition is next if editorData is true - meaning if it contains a string with contents, then the output innerHTML should be editorData. After this is done then we clear the contents in the editor setting the contents to an empty string with editor.setData('').

Here's the complete codebase:

const output = document.querySelector('.output');
const submitBtn = document.querySelector('#submit');
const textArea = document.querySelector('#textarea')

let editor;

ClassicEditor.create(textArea, {
  toolbar: [
    'heading',
    '|',
    'bold',
    'italic',
    'link',
    'bulletedList',
    'numberedList',
    'blockQuote',
    'undo',
    'redo',
  ],
})
  .then(newEditor => {
    editor = newEditor;
  })
  .catch(error => {
    console.error(error);
  });

submitBtn.addEventListener('click', () => {
  const editorData = editor.getData();

  if (editorData) {
    output.innerHTML += `
      <div class="card">
        ${editorData}
      </div>
    `;

    editor.setData('');
  }
});

Note: If you've ever wondered why a string like an HTML element "<p>Helllo</p>" can be added to another HTML element, just like we did above well its because output is a valid HTML element. So anything aside from an HTML element wouldn't be able to add a string HTML to the DOM.

Get the code here:

Do checkout CKEditor documentation to know more about what they over: CKEditor Docs

Well, that is it, I hope you've learnt one or two things. I felt like sharing, hope you have a good day. Thanks for Reading

But before I share how my experiences have been so far at Internship, I'll like to tell you what Side Hustle is all about.

Side Hustle is a talent management platform that is aimed at reducing the rate of youth unemployment and poverty in Nigeria, by empowering youths (undergraduates, graduates and youth corp members) to learn from the best minds, execute their ideas and earn a living by offering their services to businesses.

Note: Side Hustle Internship is done fully online.

Founder of Sidehustle: Damilola Oyediran

My Experiences at the Internship

Honestly, it's been a refreshing experience for me. I've been able to go through things I already knew, things I had forgotten and learnt new things also.

The Internship has made me realise that just learning new technologies/tools is not enough, I should also be thinking about the monetary aspect of things too.

Because the end goal is to turn my learnings and passion into a way for me to meet my daily needs at the end by making money.

Also, I've been able to network with some fellow minded people, helping others with the little way I could and also reviewing others work.

Week 1

Here are the topics covered in Week 1.

1. HTML
2. Git and Github
   and lots more...

Week 1 Task

The task was to create a tribute page, about anyone using up to 20 HTML tags.

Here's my solution to the task: task 1 solution

Week 2

The mentors went over CSS, how a website should be hosted, what and how things should be implemented, etc.

Here are the topics covered in Week 2.

1. Introduction to CSS
2. How CSS works behind the scene (Cascade & Specificity)
3. Responsive Design Strategies
4. Selecting breakpoints for media-queries
5. What is hosting/deployment
6. The different ways of hosting a website
7. Blogging
8. The importance of blogging and content writing

Week 2 Task

Week 2 task is a challenge from Frontendmentor. Here's the challenge - Fylo dark theme landing page.

Actually, I had done this challenge already before but using Tailwindcss, but the task instruction was that no framework should be used but just plain CSS, so I had no other choice than to do it again.

Also, the main object for the task is to make use of CSS flex and CSS grid which was taught during Week 2.

CSS Grid

For practising CSS grid, these are the sections I implemented Grid.

CSS Flexbox

As for CSS flexbox, here are the sections I implemented the Flex functionality.

Challenge faced

While working on the task, I came across a challenge, a section of the design took me a while to wrap my head around it, but eventually, I was able to make it work.

Looking at the images below, you'll notice a curved background beneath the hero content, the wave like curved background is an SVG file, one for a desktop view and the other for a mobile view. So the problem was to display the appropriate curved background to the appropriate screen view without the background being off at a point.

Desktop view

Mobile view

Remember I said earlier I had already done the challenge from Frontendmentor using Tailwindcss. While doing it then, I didn't have a hard switching between the two backgrounds at different screen views due to Tailwindcss utility classes.

So how did I overcome this challenge without Tailwindcss?

In other, for me to overcome the challenge, I made use of the picture element.

<picture>
  <source media="(min-width: 376px)" srcset="./images/bg-curvy-desktop.svg" />
  <img src="./images/bg-curvy-mobile.svg" alt="a navy blue background image" />
</picture>

From the snippet above, inside of the picture element, you'll notice the use of the source element and also the img element.

So the picture element holds source element and the img element, though you could have multiple source elements for different screen views.

The source element has the following attributes:

• srcset (required) - defines the URL of the image to show
• media - accepts any valid media query that would normally be defined in a CSS
• sizes - defines a single width descriptor, a single media query with width descriptor, or a comma-delimited list of media queries with a width descriptor
• type - defines the MIME-type

The above information about the source was gotten from w3schools, if you'll like to know more about the element do click on the link above.

The img element is required as the last child tag of the picture declaration block.

The img element is used to provide backward compatibility for browsers that do not support the picture element, or if none of the source tags matched.

So that's how I overcame that challenge also with the use of some CSS tricks, which is available in the project submission on Github. Click here to view the project code.

Live Demo to the Task: jome-sidehustle-task2.netlify.app/

Github Link: Sidehustle-task_fylo-dark-theme-landing-page

Conclusion

It's been a fun and exciting program, meeting new people and also networking with others. I'm looking forward to the rest of the week and other tasks.

Thanks for reading, see you next time 😉

So, in this article, I'll be sharing what are programming paradigms and mentioning a few of the paradigms we have out there in the world of programming and also reasons to use a particle paradigm.

"The world of programming paradigms" - From the statement, the words can be broken down into three, which are "World", "Programming" and "Paradigms".

Let's know what these words mean:

• World: can be thought of as a pictural view of the region/domain.

• Programming: From the word programming, there's another word - program, so what's a program.
  
  A program is a set of instructions used to solve/perform a specific task/problem.
  
  With the word program being defined, now what's programming?
  
  Programming is simply the act of writing programs.

• Paradigms: are a set of concepts, thought patterns used in a domain/field.

Programming Paradigms

So, Programming Paradigm can be thought of like a way/style of writing programs. Also, it can be viewed as ways programs are classified based on their features.

There are so many programming paradigms out there, developed to solve problems and implemented in all programming languages like Java, C, JavaScript, etc. Due to the numerous paradigms, we are looking at just the two most common paradigms in this article.

Note: Programming Paradigms doesn't refer to a particular programming language but rather the way of writing programs in that programming language.

Click here to view most of the Programming paradigm that exist.

Before proceeding further, you should know that mostly all recently used programming languages are multi-paradigm, meaning they can be written using not just one but as many paradigms supported in the language.

There are two common programming paradigms, which are:

• Imperative programming paradigm
• Declarative programming paradigm

Both programming paradigms can further be divided as shown in the image below:

Note: There're more subdivisions to the Imperative programming paradigm and the Declarative programming paradigm, but we'll be concerned about the subdivisions shown in the image for this article.

Imperative Programming Paradigm

Firstly, what's the meaning of the word, Imperative?

Imperative could mean something vitally important, crucial or an act of giving an authoritative command.

So, therefore, In an Imperative Programming Paradigm, the order of steps is crucial, because the next step is mostly dependent on the previous step.

Here's an example in JavaScript to demonstrate my point:

let sum = 0

sum+= 1 // sum = sum + 1
sum+= 2 // sum = sum + 2
sum+= 3 // sum = sum + 3

console.log(sum) // 6

From the snippet above, we notice that the variable sum is initialised with the value 0.

Then the next couple of line is dependent on the current value of the variable sum which sums up to 6.

From Imperative Programming Paradigm, other styles of writing programs were also derived and for this article, we'll be looking at two sub-modules which are Procedural programming and Object-Oriented programming

Procedural Programming

Procedural programming is derived from the Imperative Programming Paradigm, which allows splitting of instructions into procedures also is concerned about the series of instructions to concur whereby each step relies on the previous step.

Procedural programming is much more like an iterative approach to solving a task/problem using loops (for, while) and if statements for control flow.

Here's an example to find the sum of numbers from 0 to 10, written in JavaScript:

let sum = 0

for (let i = 0; i <= 10; i++) {
  sum+= i 
}

console.log(sum) // 55

From the snippet of code above, a for loop that iterates from 0 to 10 adding the previous sum variable with i and then the final output of the variable sum will be 55.

Some major procedural programming language includes Fortran, ALGOL, BASIC and Pascal but more examples are found here List of programming languages by type - Procedural languages

Click here to know more about Procedural Programming

Why learn Procedural Programming?

• It's simple.
• An easier way to keep track of program flow.
• It has the ability to be strongly modular or structured.
• Needs less memory: It's efficient and effective.

Object-Oriented Programming (OOP)

In Object-Oriented Programming, the concept of classes and objects are used. The paradigms specialise in modularity, breaking real-world entities into objects that can be reused.

Also, Object-Oriented Programming is based on the concept of objects where an object contains data/fields (attributes) and methods (behaviours).

Some key characteristics of the OOP are:

• Class: A class is a blueprint or template of an object.
• Object: An object is an instantiation of a class.
• Abstraction: This is the process of hiding away complexity and showing only what is need.
• Inheritance: enables hierarchical relationships between classes.
• Encapsulation: is the concept that binds together the data and methods that manipulate the data, and that keeps both safe from outside interference and misuse.
• Polymorphism: this is the process by which variables, methods or objects can take multiple forms.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

class Student extends Person {
  constructor(name, age, matricNo, level) {
    super(name, age)

    this.matricNo = matricNo;
    this.level = level;
  }

  getStudenDetails() {
    return `${this.name} is of age ${this.age}, 
his Matric Number is ${this.matricNo} and his in ${this.level}L`
  }
}

const student1 = new Student('Favourite', 18, 'RUN/CMP/18/7796', 300)
console.log(student1.getStudenDetails())

// outputs
// 'Favourite is of age 18, his Matric Number is RUN/CMP/18/7796 and his in 300L'

From the snippet of code above, a class Person was first declared with its data/attributes as name and age. Also, the Person class is known as the Superclass because another class extends its properties.

Next off, another class was declared as Student, this class extends all the properties of the Person class because all students are also a person and this brings about inheritance.

Why use/learn Database programming

• Reuse of code through Inheritance.
• Flexibility through Polymorphism.
• High security with the use of data hiding (Encapsulation) and Abstraction mechanisms.
• An object-oriented programmer can stitch new software objects to make completely new programs.
• For faster development of programs.

Declarative Programming Paradigm

Declarative programming is a style of building programs that express the logic of a computation without talking about its control flow.

From the word, Declarative; it means an announcement / a statement, so in this paradigm, the instructions that are to be carried out are declared meaning it doesn't need to be explicitly defined with how the instruction is to be meant done but just what is meant to be done.

Imagine being asked to draw a rectangle on a book, an imperative approach would state the various procedures like drawing two parallel lines on both axes while a declarative approach would just state the end goal and doesn't care about the process takes.

So the main differences are that imperative tells you how to do something and declarative tells you what to do.

Declarative Programming also has some programming languages beneath it, we'll be looking at Functional Programming and Database Programming.

Functional Programming

The functional programming paradigm is rooted in using mathematical operation, it's a way of writing programs elegantly like you'll think of when thinking about a problem.

Also, Functional programming is the process of solving problems by composing pure functions, avoiding shared state, mutable data, and side effects. Functional programming is declarative rather than imperative, and application state flows through pure functions

Terms like: Recursion, Memoization, Pure Function, Composition are used along with Functional Programming.

Let's say, a Fibonacci problem is to be solved, using a Functional approach makes the problem easier to solve and think about.

Each Fibonacci number is defined as the sum of the previous two Fibonacci numbers, so fibonacci(n) = fibonacci(n-1) + fibonacci(n-2). By convention, the first two numbers are fixed: fibonacci(0) = 0 and fibonacci(1) = 1.

Here's the Functional approach of solving a Fibonacci problem using JavaScript.

function recursiveFibonacci(n) {
  if ( n <== 0) return 0
  if ( n === 1) return 1

  return recursiveFibonacci(n-1) + recursiveFibonacci(n-2)
}

recursiveFibonacci(6) // 8

Note, there some caveat to Functional Programmings, like the Memory Stackoverflow, but there are also solutions to this caveat like Tail Call Optimation

Read this wonder article to know more about Functional Programming: Master the JavaScript Interview: What is Functional Programming?

Why use/learning Functional programming?

• Functions can be coded quickly and easily.
• Unit testing is easier.
• Debugging is easier.
• Overall application is less complex since functions are pretty straightforward.

Database Programming

A database is an organized collection of structured information, or data, typically stored electronically in a computer system. A database is usually controlled by a database management system (DBMS).

To process the data and querying them, databases use tables. Data can then be easily accessed, managed, modified, updated, controlled and organized.

Most databases use Structured Query Language (SQL) for writing and querying data.

There're three major parts to Database Programming:

• Relational Database
• NoSQL Database
• Cloud Database

Read this article to know more about Databases: What is a Database? - edureka

Below, are simple declaration and schema declaration on what should be in a data show be in a database.

CREATE DATABASE Students;

CREATE TABLE ComputerScienceStudent (
      MatricID int,
      LastName varchar(25),
      FirstName varchar(25)
);

Why learn/use Database Programming

• When you need to handle massive amount of data.
• With the help of built-in functionalities in a database, we can easily validate data coming into the database.
• Easy to update data: Data Manipulation Languages (DML) such as SQL are used to update data in a database easily.
• Data integrity: With the help of built-in validity checks, we can ensure the consistency of data.

Conclusion

I'm pretty sure in some ways, directly or indirectly you've written programs using the combinations of all the Programming paradigms mentioned above, probably without your knowledge. Well, know you know some of the most used programming paradigms and reasons to use them.

I hope you found the article useful, thanks for reading!

References

• What exactly is a programming paradigm? - Freecodecamp
• List of programming languages by type - Wikipedia
• Programming Paradigms: A must know for all Programmers - hackr.io
• Programming paradigms - java-programming.mooc.fi
• What is a Database? Definition, Types and Components

Prerequisite

• Basic knowledge of HTML
• Basic Knowledge of Sass/SCSS
• Basic knowledge of Terminal

Getting Started

To get started, we'll need a folder created and opened on your favourite IDE (Integrated Development Environment), mine is VSCode with a file index.html also created.

Next off, run the command below into the terminal of your choice to install Sass globally on the PC.

npm install -g sass

If you've installed Sass globally once before now there's no need to run the command again.

Moving on, we'll need Sass installed on the current directory/folder we're working on as a dependencies. Please make sure you run the command below on the project directory/folder.

npm install sass

By running the command above, we should have a folder created node-modules and a package-lock.json file.

Now, we need to run a script, which watches for changes while using Sass. In other to do so, we'll need to run another command on the terminal.

npm init --y

By running the command above, a package.json file will be created. Let's open the file and then navigate to the "scripts" key pair, where the default values there will be changed to the command below:

"script": {
  "start": "sass scss:css --watch"
}

The command above watches all the Sass stylesheet file in the scss folder, (which we haven't created yet) then compiles the Sass stylesheet file into a CSS stylesheet in an auto-generated css folder. That's basically what the command does.

That's all for the setup, so now let's dive right into coding.

HTML

Let's open the index.html file created and then copy-paste the code below into the file.

Don't worry we'll go over the index.html file 😏

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Multi-Coloured Card Components</title>
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body>
    <main>
      <h1>Multi-coloured Cards with SCSS</h1>

      <div class="container">
        <div class="card">
          <h2>Hello World!</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit
            facere illo iusto debitis aperiam labore obcaecati harum dicta
            nesciunt quae.
          </p>
        </div>
        <div class="card">
          <h2>Hello World!</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit
            facere illo iusto debitis aperiam labore obcaecati harum dicta
            nesciunt quae.
          </p>
        </div>
        <div class="card">
          <h2>Hello World!</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit
            facere illo iusto debitis aperiam labore obcaecati harum dicta
            nesciunt quae.
          </p>
        </div>
        <div class="card">
          <h2>Hello World!</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit
            facere illo iusto debitis aperiam labore obcaecati harum dicta
            nesciunt quae.
          </p>
        </div>
        <div class="card">
          <h2>Hello World!</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit
            facere illo iusto debitis aperiam labore obcaecati harum dicta
            nesciunt quae.
          </p>
        </div>
        <div class="card">
          <h2>Hello World!</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit
            facere illo iusto debitis aperiam labore obcaecati harum dicta
            nesciunt quae.
          </p>
        </div>
      </div>
    </main>
  </body>
</html>

From the HTML snippet above, we can see nothing much is going on. But notice there's a repeated element with the class attribute .card having nested h2 and p elements. That's the component that will be multi-coloured with the help of Sass.

Also, notice there's a link to CSS stylesheet from the css folder, which will be created soon.

<link rel="stylesheet" href="./css/style.css" />

That's all for the HTML file, let's move on to the next section.

Sass/SCSS (Syntactically Awesome Style Sheets)

Here's where the main functionalities will be added but take note this article isn't a beginner fundamental of Sass, so I'll suggest you read this article Write CSS with Superpowers Using Sass. which explains the fundamentals of Sass.

If you're wondering what's with Sass and SCSS (which are two different extensions), I'll suggest you read the article above.

So now, let's create a folder named scss and in it, three files as shown below.

scss
|-- _utilities.scss
|-- _card.scss
|-- style.scss

Notice that both _utilities.scss and _card.scss files have a prefix _ attached to the file names. This signifies that's it a partial file in Sass which wouldn't be compiled until used in the main style.scss file.

If you don't understand anything mentioned above, once again I'll suggest you read this article

Since the scss folder has been created, its time to watch for changes in the scss folder. To do that run the command below:

npm start

Now, we should have an additional folder created - css folder with two files, style.css and style.css.map and the setup should look the image below:

Let's open the style.scss file and then include the code below in the file.

/* style.scss */

@use './card';

From the code above, we making use of the @use rule, which loads the contents from _card.scss file. Notice there's no need to specify the path with the extension, Sass is smart enough to know the extension. All that's needed is the path name to the stylesheet to be loaded.

For now, the _card.scss file is empty, but don't worry we'll be fixing that soon,

Read more on the @use rule here

The _utilities.scss file is where we'll be including some Sass features we'll need to implement a multi-coloured card component.

Firstly, we'll need to create a Map, which is a Sass feature and not available in CSS.

Maps in Sass hold pairs of keys and values and make it easy to look up a value by its corresponding key.

You can think of a Map in Sass like an object in JavaScript but it's symbolized with the parentheses symbol ().

Below is an example of a Map in Sass named $cardBackground:

$cardBackground: (
  '1': rgb(168, 4, 4),
  '2': rgb(30, 30, 155),
  '3': black,
  '4': gold,
  '5': indigo,
  '6': rgb(192, 4, 104)
);

To declare a variable in Sass, the symbol $ must be included, whereas with plain CSS we use --.

From the snippet above, the incremented numbering are the keys (1, 2, 3, 4, 5, 6) then the values are the colours on the left. In this case, we are using the Map to storing colours that will be used in the card components.

Read more about Sass Maps from Sass Documentation

Now, that a Map has been created where the colours will be stored, we also need a way to detect the lightness of colours listed in the Map, to determine what colour should the text be based on the background colour.

From the image above, it's noticeable that the card component with a background Yellow has its text colour as Black whereas the other card components text colour is white.

I know right, that seems unreal. Well, that's where another Sass feature comes into play, which is a colour function - lightness(colour-name).

To access the colour function lightness(colour-name), we'll need a built-in module in Sass, which is the color module. Then, to import the module, we'll make use of the @use rule:

@use "sass:color";

Note, the @use "sass:color" rule must be called before it's being used. Preferably, placed at the top of the _utitlities.scss file.

The colour function - lightness() ranges from 0% to 100%.

Read more on the @use rule here

Since, we'll have to use a condition to determine the lightness of the background colour, it's essential we have a function. Yes! Sass also actual functions like other programming languages 😉.

Now, lets go over the function below:

/* _utilities.scss */

/* Set text color based on bg */
@function set-text-color($color) {
  @if (color.lightness($color) > 40%) {
    @return #000;
  } @else {
    @return #fff;
  }
}

Looking at the code above, firstly, we notice the use of the @ rule - (At's rule), which is used to declare a function is Sass. The name of the function is set-text-color and the function has a parameter ($color) - Notice the $ prefix, indicating that it's a variable.

On the next line, an if statement is declared, also with the @ rule, checking if the color.lightness($color) > 40%. If the condition is true, then colour black will be returned - @return #000; else colour white will be returned - @return #fff;.

Read more about @function rule here

Okay, so that's all for the text colour functionality, so now we need to set the background colour and also call the Sass function we've declared with the same background colour. To implement this, we'll need another Sass feature named Mixins.

Mixins allow us to define styles that can be re-used throughout your stylesheet, basically and it's similar to Sass functions but doesn't use the @return rule.

Let's go over the code:

/* Set background & text color */
@mixin set-background($color) {
  background-color: $color;
  color: set-text-color($color);
}

Firstly, the mixin is declared using the @mixin rule with its name as set-background and expecting a parameter - $color when used.

Inside the mixin declaration, the background-colorproperty is assigned the value $color which is the parameter variable. Then the color property has its value as the invocation of the Sass function which was initialised earlier - set-text-color($color) with the $color variable passed as the function argument.

If this section isn't clear, please feel free to ask in the comment

Read more about the @mixin rule here

By now, our _utilities.scss stylesheet should look like this:

/* _utilities.scss */

@use "sass:color";

$cardBackground: (
  '1': rgb(168, 4, 4),
  '2': rgb(30, 30, 155),
  '3': black,
  '4': gold,
  '5': indigo,
  '6': rgb(192, 4, 104)
);

/* Set text color based on bg */
@function set-text-color($color) {
  @if (color.lightness($color) > 40%) {
    @return #000;
  } @else {
    @return #fff;
  }
}

/* Set background & text color */
@mixin set-background($color) {
  background-color: $color;
  color: set-text-color($color);
}

So that's all for the _utilities.scss stylesheet file, now it's time we use the utilities created in the _card.scss file. So open up the _card.scss file.

Firstly, we'll need to import the _utilities.scss file with a namespace into the _card.scss file.

Namespace is a name given to a module to access variables, functions, and mixins that has been declared in the module.

util is the namespace name from the code below:

/*  _card.scss */

@use './utilities' as util;

Read more about @use rule here

Next off, we need a way to loop through the several div elements with the class name card, applying the several colours listed in the Sass Map. To implement this, we'll need yet again, another Sass feature which is the @each rule.

The @each rule makes it easy to emit styles or evaluate code for each element of a list or each pair in a map. It’s great for repetitive styles that only have a few variations between them.

- From Sass Documentation

The syntax goes like this for looping through a Map:

@each <key variable>, <value variable> in <map varible>

Let's go the code below:

/*  _card.scss */

@each $key, $value in util.$cardBackground {
  .card:nth-of-type(#{$key}) {
    @include util.set-background($value);
  }

  ...
}

Firstly, the @each rule is declared with two Sass variable $key, $value followed by in, then util.$cardBackground. Notice that the variable $cardBackground which is the Map isn't declared in the _card.scss file but is being imported using the namespace name util.

Then, for each .card selector, we loop through it by the pseudo-class :nth-of-type(n) which takes in an argument. The argument of the card pseudo-class should be each key in the map, whereby it like this:

 .card:nth-of-type(#{$key})  {...}

You might wonder, why not .card:nth-of-type($key) and what's with the #{} symbols. Well, we can't use Sass variables on CSS selectors directly except we interpolate it.

Interpolation in Sass is a way of embedding results of Sass expressions, using the symbols #{}. So, that's why the selector has to be written this way: .card:nth-of-type(#{$key}) {...}

Read more on Interpolation here

Next off, we need to include the Mixin we once created in the _utilities.scss file, which set background colours. To do this, we need to make use of the @include rule which only works with Mixins. Also, the mixin - set-background($value) is accessed from the namespace util.

 .card:nth-of-type(#{$key}) {
    @include util.set-background($value);
  }

Notice, the mixin - set-background($value) has the $value variable as its argument which are the values in the Map - $cardBackground.

By now, the card components should look like this:

But it looks too plain, isn't it? To make card components have a not so plain background 😂, we're going to add the code below to the @each rule.

@each $key, $value in util.$cardBackground {
  ...

  .card:nth-of-type(#{$key})::before {
    background: color.adjust($value, $blackness: 10%);
  }
}

Firstly, we have .card:nth-of-type(#{$key})::before as the selector with the pseudo element ::before, then the background property has it value as color.adjust($value, $blackness: 10%).

Looking at the value of the background property, it shows that color is used, so it needs to be imported @use "sass:color", which then gives access to the colour function - adust().

The adjust() function takes in lots of argument, but for this use case, it takes only two arguments. The first argument is the colour that should be adjusted which is $value variable from the Map and then the second argument is $blackness: 10% which means darken the colour in the $value variable by 10%.

Read more on the @each rule here

Here's the preview of how it should look like now:

Okay then, let's see the translation for the @each rule in plain CSS:

.card:nth-of-type(1) {
  background-color: #a80404;
  color: #fff;
}

.card:nth-of-type(1)::before {
  background: #8f0404;
}

.card:nth-of-type(2) {
  background-color: #1e1e9b;
  color: #fff;
}

.card:nth-of-type(2)::before {
  background: #1e1e82;
}

.card:nth-of-type(3) {
  background-color: black;
  color: #fff;
}

.card:nth-of-type(3)::before {
  background: black;
}

.card:nth-of-type(4) {
  background-color: gold;
  color: #000;
}

.card:nth-of-type(4)::before {
  background: #e6c200;
}

.card:nth-of-type(5) {
  background-color: indigo;
  color: #fff;
}

.card:nth-of-type(5)::before {
  background: #3c0069;
}

.card:nth-of-type(6) {
  background-color: #c00468;
  color: #fff;
}

.card:nth-of-type(6)::before {
  background: #a7045a;
}

We can see, that each .card selector has a unique background colour and text colour. So, if you'll ever need more than 6 card component, just add more colour to the Map in the _utilities.scss file and Sass does its magic.

Here's the complete _card.scss stylesheet

/*  _card.scss */

@use './utilities' as util;
@use 'sass:color';

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto';
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
  text-align: center;
}

.container {
  width: 90%;
  max-width: 700px;
  margin: auto;
}

.container > * + * {
  margin-top: 1rem;
}

.card {
  position: relative;
  border-radius: 10px;
  padding: 1rem;
  overflow: hidden;
  max-width: 500px;
}

.card::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 10px;
}

@each $key, $value in util.$cardBackground {
  .card:nth-of-type(#{$key}) {
    @include util.set-background($value);
  }

  .card:nth-of-type(#{$key})::before {
    background: color.adjust($value, $blackness: 10%);
  }
}

@media (min-width: 500px) {
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;

    > * + * {
      margin-top: 0;
    }
  }
}

Resources

• Sass Documentation
• Sass Playground

Conclusion

To make this project even more interesting, you could use JavaScript to add input fields, to generate more card components which will then have their individual background colours, but then you'll have to add more colours to the Sass Map.

I hope the article was helpful in a way, Thanks for reading!

Demo

Code here

Getting Started

For us to get started we'll need to create a folder, named as anything we like but for the project seek we could name the folder filter_functionality. In this folder, we'll need three files which will be index.html, style.css, main.js.

HTML

The HTML file is going to be basic, nothing complicated. We'll just need an input element to enter our search then an unordered list of todos.

Also, the HTML file should be linked to both the CSS file and the JS file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Filter Functionality</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <main>
      <form>
        <input
          type="search"
          name="search"
          id="search"
          placeholder="Search for todos"
          autocomplete="off"
        />
      </form>

      <section>
        <ul>
          <li>Finish my assignment</li>
          <li>Complete the project on Time</li>
          <li>Contribute to the several Open Source Communities I'm in</li>
          <li>Playing my favourite songs</li>
          <li>Watching my favourite series</li>
        </ul>

        <div id="notFound">
          <p>No Todo Found</p>
        </div>
      </section>
    </main>

    <script src="main.js"></script>
  </body>
</html>

CSS FIle

Also, the CSS style sheet isn't complicated, just some little styling to make things fancy 😎.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: 'Open Sans';
  background: rgba(0, 0, 0, 0.082);
}

main {
  width: 80%;
  max-width: 500px;
  margin: auto;
  border-radius: 5px;
  overflow: hidden;
  padding: 1rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.274);
  background: #fff;
}

input[type='search'] {
  width: 100%;
  padding: 1rem;
  margin-bottom: 2rem;
}

ul li {
  list-style: none;
  border-left: 2px solid black;
  padding: 0.5rem;
}

li + li {
  margin-top: 1rem;
}

#notFound {
  display: none;
}

Notice, #notFound selector has display: none as its declaration because we only want it visible when no todo is found. More on that in the JavaScript section.

JavaScript

The JavaScript file is where all our main functionality will be applied, as expected 😉.

Let's go over the code snippet below and we'll work through the code step by step.

const search = document.querySelector('#search');
const todos = document.querySelectorAll('ul li');
const notFound = document.querySelector('#notFound');

search.addEventListener('keyup', filterFunctionality);

• First thing first, we select all the elements we'll be needing from the DOM (Document Object Model). What will be selected are the input element, all the list elements and the element with the id of notFound as seen from line 1 - 3.
  

  const todos = document.querySelectorAll('ul li')
  
  Notice from the code above, we are selecting all the list elements which return a Nodelist object.
  
  A NodeList object is a list (collection) of nodes extracted from a document.
  
  Read more about the Nodelist Object here: w3schools - Nodelist Object

• The input element search has an event listener attached to it with the type of event as keyup and a callback function\listener named filterFunctionality

function filterFunctionality(e) {
  let searching = e.target.value.toLowerCase();

  // Filters the todo
  [...todos].forEach(todo => {
    let todoContent = todo.textContent;
    if (todoContent.toLowerCase().includes(searching)) {
      todo.style.display = 'block';
    } else {
      todo.style.display = 'none';
    }
  });

  // Displays No Todo Found
  let result = [...todos].every(todo => {
    return todo.style.display === 'none';
  });

  result === true
    ? (notFound.style.display = 'block')
    : (notFound.style.display = 'none');

}

• The function filterFunctionality takes in a parameter e which is the event object and implicitly passed to the function.

The Event Object is created once there's an event for example when a button is clicked.

Read more about the [Event Object here]

• w3schools - The Event Object
• MDN - Event

• A variable is declared searching with the value as e.target.value.toLowerCase()

target is a property in the event object e, which tells what element the event is applied to.

value is also a property but on the target property, which tells the value typed in the input.

toLowerCase() is a method on the value property. This makes the inputted values if uppercase become lowercase.

Here's where the main functionality is applied.

  // Filters the todo
  [...todos].forEach(todo => {
    let todoContent = todo.textContent;
    if (todoContent.toLowerCase().includes(searching)) {
      todo.style.display = 'block';
    } else {
      todo.style.display = 'none';
    }
  });

• Using [...todos] converts the Nodelist Object to an array, given us access to the forEach() method.
  

  Well, the forEach() method is available to the Nodelist object, but not all the array methods all available on the Nodelist Object. Then why convert it to an array you might ask, well for consistency sake.

• In the forEach() function, which loops over each todo item a variable todoContent is declared with it's value as the todo.textContent.
  

  todo are each item in the array which are the list -<li> elements. textContent is a property that's available to each list elements which returns the value of the lists.

• Next line is an if statement condition which checks if todoContent.toLowerCase() includes/has seaching which is what is being inputted.
  

  Simply the above statement can be represented like this "Hello there!".includes("!") From the representation, it evaluates to true.

• If the condition in the if statement is true at any point in time, then the list elements will be visible display: block - todo.style.display = 'block' other wise the list elements will be invisible display: none - todo.style.display = 'none'.

That's the functionality, I know right pretty easy, but I had a hard time making it work and also had to watch a video that gave me insight into how to implement it.

Now, what if we'll like to tell a user if what's searched in the input element isn't found. Hmm, this is going to be tricky but let's play things out.

Within the same function filterFunction() type in the snippet of code below.

// Displays No Todo Found
  let result = [...todos].every(todo => {
    return todo.style.display === 'none';
  });

  result === true
    ? (notFound.style.display = 'block')
    : (notFound.style.display = 'none');

• First line, a variable is declared result with its value which is to be a Boolean value (true or false).
  

  [...todos].every(todo => { return todo.style.display === 'none'; });
  
  The Nodelist object is converted to an array, giving it access to the every method which checks if every item (list element) in the array has a style.display === 'none'. If this condition is true the every method return true and if not returns false.

• Next off, there's a ternary operation which checks if result is true. If true the element notFound (<div id="notFound"> <p>...</p></div>) will be displayed - notFound.style.display = 'block' else it wouldn't be displayed - notFound.style.display = 'none'.
  

  The above explanation displays the text "No Todo Found" when the search input isn't found.

Demo

Code here

Conclusion

Well, I that's all if you have any question you could comment below or leave message me on Twitter.

Hope the article was useful or will be useful later on. Thanks for reading.

If you've ever played the game called Rock, Paper, Scissors you'll already be familiar with the rules of the game. But if you've never played the game, here are the rules:

Prerequisite

• Basic knowledge of HTML
• Basic knowledge of CSS
• Basic knowledge of the Command Line Interface
• Basic knowledge of JavaScript

Why I took this challenge?

Storytime 😁, if you're not interested click here to move to the next section.

Before why, this challenge was provided by frontendmentor.io, which is an amazing platform to test and improve your Frontend skills. I'll advise you to check out some of the challenges on the platform yourself.

Click here to download this project file from frontendmentor.io so that you can follow along. It's totally fine if you don't want to get the project file, just reading how I made it is fine.

Before agreeing to attempt this challenge I've always run away from the challenge saying it looks too complex not until I saw that Victor Ikechukwu had completed the challenge. I was amazed that he had already done the challenge I considered hard, so I made up my mind to take up the challenge, how hard could it be? I said.

Here's the live demo if you'll like to play the game:

• Live Demo
• Github code

Set goals I implemented

Another storytime 😁, if you would like to skip the section click here.

Upon every challenge I take, I'll always want to try something new, so I planned out what I'll like to practice and learn while on the challenge.

• Making use of Dart SCSS/SASS (Syntactically Awesome Style Sheets) which I had never used.
• Making use of just vanilla JavaScript.
• Making use of Functional Programming Paradigm to the best of my abilities and lastly
• Using BEM (Block Element Modifier) methodology for naming class names.

Actually, I got the idea of implementing the functional programming paradigm, after reading this article Functional Programming with JavaScript by Saurabh Kamboj.

I've never been a big fan of the Object-Oriented Paradigm, so why not learn the Functional Programming Paradigm instead, I concluded.

Setup for the project

Whenever a challenge is downloaded from frontendmentor.io all files needed like the HTML file with all the text used for the challenge, the colours used and also the designs for both mobile and the desktop view will be provided.

For the next couple of steps, we'll need Node.js installed first, which comes with NPM (Node Package Manager) for us to get started.

Click here to download Node.js

First thing first, we'll need to run this command npm init -y on the terminal to keep track of all the dependencies for the project.

Dependencies are the packages that are being used in the code of the project. For example, if my application is working with SASS then there may be a dependency of SASS node package in the application.

Click here to read more about what's dependencies.

Running the above command will generate a package.json file which shows the dependencies used in the project and also information about the project, for now, there are no dependencies.

Then to install SASS, from NPM (Node Package Manager) through Node, type in the command below on the terminal which installs sass globally on your system.

npm install -g sass

-g is a flag that represents global

I've written an introductory article about SASS, you could read that by clicking here.

Now that sass has been installed globally on our system, we'll need to install it on our project directory, to make it work in the directory through this command.

npm install sass

Notice, two files will be added to the project directory

./node_modules which contains libraries downloaded from npm for sass to work.

package_lock.json which contains the several dependencies sass needs to work.

Yes! finally, we've got SASS installed and ready to be used. Now, the next step is to open the package.json file. We'll need to add a command that compiles our SASS files into a plain CSS file which the browser understands.

Navigate to the "script" key, replacing it with the command below

"scripts": {
    "start" : "sass --watch scss:css"
},

Once the command is set up, we can watch the changes made in the scss folder which will be containing all our SCSS modules and then generates a css folder with the plain CSS, to which the HTML file will be linked to.

From the command above, sass watches every file in the directory/folder named scss and compiles all the SCSS files into a single CSS file in the directory/folder named css. The CSS file compiled is what the browser can read and interpret.

To initialise the watch, type the command below into the terminal.

npm start

By doing this every change in the scss folder containing the scss files will be compiled into one css file.

Don't run the command yet, because we don't have our scss folder created yet

The next step is to create a folder named scss, which will contain all the scss files needed for the project. When the folder is created, create a new file named _base.scss.

_base.scss is a partial file that's not compiled until it's imported to the main stylesheet style.scss. This file contains resets, variables, mixins, and any utility classes used throughout the project.

Since we are making use of colours that have been provided in the style-guide.md file by Frontend mentor, open the style-guide.md file copy all the colours including their names, into the _bass.scss file.

After copying the colours, make it have the structure as shown below.

/* _base.scss */

:root {
  --scissorsGradient: linear-gradient(hsl(39, 89%, 49%), hsl(40, 84%, 53%));
  --paperGradient: linear-gradient(hsl(230, 89%, 62%), hsl(230, 89%, 65%));
  --rockGradient: linear-gradient(hsl(349, 71%, 52%), hsl(349, 70%, 56%));
  --lizardGradient: linear-gradient(hsl(261, 73%, 60%), hsl(261, 72%, 63%));
  --cyan: linear-gradient(hsl(189, 59%, 53%), hsl(189, 58%, 57%));

  --darkText: hsl(229, 25%, 31%);
  --scoreText: hsl(229, 64%, 46%);
  --headerOutline: hsl(217, 16%, 45%);

  /* Background */
  --radialGradient: linear-gradient(hsl(214, 47%, 23%), hsl(237, 49%, 15%));
}

I decided to make use of the css custom variable for the project instead of scss variable, why? I don't know 😂.

The next step is to click on the link to the font at the style-guide.md file to grab it from google fonts. Adding the @import rule with the font name to the body selector.

/* _base.scss */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@400;600;700&display=swap');

:root {...}

body {
   font-family: 'Barlow Semi Condensed', sans-serif;
}

Now that we got all our set up ready, it's time to actually start coding, by inputting the command we failed to run since we didn't have scss folder before.

npm start

By running the command above, a css folder is auto-created containing the style.css and style.css.map files.

Let's start coding

Before proceeding any further, let's take a look at the project folder structure, to make sure we are at the same pace.

css
|__ style.css
|__ style.css.map
design
|__ ....
images
|__ ....
node_modules
|__ ....
scss
|__ ....
.gitignore
index.html
main.js
package-lock.json
package.json
README-template.md
README.md
style-guide.md

Okay then, the HTML file is shown below, notice the class names are all named following the BEM (Block Element Modifier) methodology (at least most of them 😃).

Read this article to know more about BEM

If you're wondering why BEM, it just makes it easier when nesting in SASS, plus a whole lot of advantages. Please find them out using the link above.

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <main class="container">
      <div class="heading">
        <img src="./images/logo.svg" alt="logo" />
        <div class="score__display">
          <p>Score</p>
          <p id="score" aria-live="polite">0</p>
        </div>
      </div>

      <div class="game">
        <div class="game__paper__scissors">
          <div
            class="game__button game__button--paper"
            role="button"
            aria-label="paper button"
            id="paper"
          >
            <div>
              <img src="./images/icon-paper.svg" alt="icon-paper" />
            </div>
          </div>
          <div
            class="game__button game__button--scissors"
            role="button"
            aria-label="Scissors button"
            id="scissors"
          >
            <div>
              <img src="./images/icon-scissors.svg" alt="icon-scissors" />
            </div>
          </div>
        </div>

        <div
          class="game__button game__button--rock rock-button"
          role="button"
          aria-label="rock button"
          id="rock"
        >
          <div>
            <img src="./images/icon-rock.svg" alt="icon-rock" />
          </div>
        </div>
      </div>

      <div class="play__again">
        <h3 id="winLoseDraw" aria-live="polite">.</h3>
        <button id="playAgain" class="btn-sec" aria-label="play again">
          Play Again
        </button>
      </div>

      <button class="btn-pry" id="rules">Rules</button>
    </main>

   <div class="attribution">
      Challenge by
      <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
        >Frontend Mentor</a
      >. Coded by
      <a href="https://jomefavourite.github.io/linktree/">Favourite Jome</a>.
    </div>

    <!-- Modal for the game rules -->
    <div class="modal" id="modal">
      <div class="modal__container">
        <div>
          <div>
            <h2>Rules</h2>
            <img
              class="closeBtn desktopCloseBtn"
              src="./images/icon-close.svg"
              alt="icon-close"
            />
          </div>
          <img
            class="modal-rules"
            src="./images/image-rules.svg"
            alt="image-rules"
          />
          <img
            class="closeBtn mobileCloseBtn"
            src="./images/icon-close.svg"
            alt="icon-close"
          />
        </div>
      </div>
    </div>

    <!-- Template for the game -->
    <template id="gameTemplate">
      <div class="game__grade">
        <div>
          <div
            class="game__button user__button"
            role="button"
            aria-label="paper button"
            id="paper"
          >
            <div>
              <img src="./images/icon-paper.svg" alt="icon-paper" />
            </div>
          </div>
          <div
            class="game__button computer__button"
            role="button"
            aria-label="Scissors button"
            id="scissors"
          >
            <div></div>
          </div>
        </div>
      </div>
    </template>

    <script src="main.js"></script>
  </body>
</html>

From the HTML file above, there's a strange element named template.

   <!-- Template for the game -->
    <template id="gameTemplate">
      <div class="game__grade">
        <div>
          <div
            class="game__button user__button"
            role="button"
            aria-label="paper button"
            id="paper"
          >
            <div>
              <img src="./images/icon-paper.svg" alt="icon-paper" />
            </div>
          </div>
          <div
            class="game__button computer__button"
            role="button"
            aria-label="Scissors button"
            id="scissors"
          >
            <div></div>
          </div>
        </div>
      </div>
    </template>

If you've seen this element before, very good, if not all it does is hide the child elements from the browser and can only be shown using Javascript by adding it to the DOM (Document Object Model).

I got the idea of using the template element from an article I read, sadly I can't find it.

From MDN, the template element is a mechanism for holding HTML that is not to be rendered immediately when a page is loaded but may be instantiated subsequently during runtime using JavaScript.

Read more about the template element here

Also, if you've ever seen a Vue.js source code, you'll notice the template element is used.

Why I used the template element

I used the template element to hide its child elements from the DOM (Document Object Model) until a certain action/event is done using JavaScript which then appends the child elements of the template element into the DOM. The implementation is done in the Javascript section.

SASS

As for the styling of our project, we'll be making use of the scss extension which is more like writing CSS but still with all the SASS features.

If the statement above seems confusing, then please read this article - Write CSS with Superpowers Using Sass. where I've covered the differences between SCSS and SASS.

Here the folder structure of all the scss file used in the project.

scss
|  _base.scss
|  _components.scss
|  _desktop.scss
|  _medium.scss
|  _mixins.scss
|  style.scss

The _ before the scss file, symbolises it's a partial file, which means it should not be compiled until when used in the main style.scss file.

• _base.scss contains styles such as resets and typographic rules, which are commonly used throughout your project.
• _components.scss contains all the CSS that handles the layout.
• _desktop.scss contains all the CSS rules for the desktop view.
• _medium.scss contains all the CSS rules for the tablet view.
• _mixins.scss contains all the mixins created for the project.

Click here to know more about mixins

• style.scss contains all the imports for the above files.

The two main features of Dart SASS I got to try out was @use rule and @forward rule.

• The @use rule loads mixins, functions, and variables from other Sass stylesheets, and combines CSS from multiple stylesheets together while
• The @forwardrule loads a Sass stylesheet and makes its mixins, functions, and variables available when your stylesheet is loaded with the @use rule.

The two rules mentioned above are part of the newer features of Sass, which is to replace the use of the @import rule.

JavaScript

Javascript, the brain of the project! Before diving into the functionality of the game, here's a breaking down of how the game should be implemented.

From the image above, you'll notice there are steps needed to be taken, before declaring the winner. The user will have to click on either the Rock, Paper or Scissors button. Then after a few seconds, the computer makes its choice and then finally a winner is declared.

As for the score for the game, I decided to implement it this way, if a user wins the score should be incremented by 1 (+1) while if the computer wins the score should be decremented by 1 (-1).

Now let's dive into the program.

// selecting the DOM
function select(name) {
  return document.querySelector(name);
}
function selectAll(name) {
  return document.querySelectorAll(name);
}

const rulesBtn = select('#rules');
const closeBtns = selectAll('.closeBtn');
const rock = select('#rock');
const paper = select('#paper');
const scissors = select('#scissors');
const scoreResult = select('#score');
const modal = select('#modal');

From the above code, two functions were declared select() and selectAll(), which returns document.querySelector(name) and document.querySelectorAll(name) respectively. Using this functions, enables me to select my DOM elements quickly and by typing less.

Also this way I'm following the Functional Programming paradigm rules, which are

• Using Pure Functions: Pure Functions are the functions that depend only on their input and nothing else i.e they'll have some input values and based on those input values they'll always return an output. From Functional Programming with JavaScript by Saurabh Kamboj

• Avoid Side Effects: Side effects are a modification to the outside world, avoid interacting with the global scope.

There are many more rules, to learn more read these articles Functional Programming with JavaScript and Master the JavaScript Interview: What is Functional Programming?

Next off, a variable score is declared having a function lS() which is invoked. The function ls() checks if the key score is added to the localStorage. If the key exists then the value is returned as a Number else 0 is returned.

On the next line, the scoreResult.innerHTMl has its value also to the function ls() which return the score from the localStorage.

Then several event listeners are declared.

var score = lS(0);
scoreResult.innerHTML = lS(0);

// LocalStorage functionality
function lS(initialValue) {
  const localData = localStorage.key('score');
  return localData ? Number(localStorage.getItem('score')) : initialValue;
}

// Event Listeners
rock.addEventListener('click', playGame);
paper.addEventListener('click', playGame);
scissors.addEventListener('click', playGame);
rulesBtn.addEventListener('click', () => openCloseModal(modal));
closeBtns.forEach(closeBtn => {
  return closeBtn.addEventListener('click', () => openCloseModal(modal));
});

Notice that rock, paper and scissors variables which are the buttons (actually I used the div element with the role of a button in the HTML file but I'm just going to call it buttons because it's clicked on) clicked on by the user to initiate the game has a function to its event listener named `play games.

function playGame() {
  const userChoice = this.id;
  const computerChoice = computerRandom(['rock', 'paper', 'scissors']);
  const game = select('.game');

  const {userButton, computerButton} = gameTemplate(userChoice, computerChoice);
  const result = rules(userChoice, computerChoice);

  game.classList.add('max__width');

  setTimeout(() => {
    if (result === 'win') {
      scoreResult.innerHTML = add();
      userButton.classList.add('winner__boxShadow');
    }
    if (result === 'lose') {
      scoreResult.innerHTML = subtract();
      computerButton.classList.add('winner__boxShadow');
    }
  }, 400);

  return winLose(result);
}

Now let's go over the function to figure out how it works.

• Line 1 in the function playGame() : const userChoice = this.id;
  This is to get the users choice, since multiple buttons have the same function, we'll need to know what button was clicked.
  
  That's why the this keyword is used to get the attribute on the element id.
  So if the rock button is clicked <div class="game__button ..." role="button" aria-label="rock button" id="rock">...</div> the id attribute will be returned.

• Line 2 in the function: const computerChoice = computerRandom(['rock', 'paper', 'scissors']);
  Here a function computerRandom() is invoked with its argument as an array that randomly gets an item from the parameter array.
  

  function computerRandom(games) {
    return games[Math.floor(Math.random() * games.length)];
  }
  

• At line 5: const {userButton, computerButton} = gameTemplate(userChoice, computerChoice);
  
  The function gameTemplate() which will be returning an object is where all the magic happens. Here's the function that takes the contents of the template element and adds it to the DOM
  

  function gameTemplate(userChoice, computerChoice) {
  if ('content' in document.createElement('template')) {
    const game = select('.game');
    const template = select('#gameTemplate');
  
    game.style.backgroundImage = 'none';
    game.children[0].style.display = 'none';
    game.children[1].style.display = 'none';
  
    const clone = template.content.cloneNode(true);
    const gameButton = clone.querySelectorAll('.game__button');
    gameButton[0].classList.add(`game__button--${userChoice}`);
    gameButton[0].children[0].children[0].src = `./images/icon-${userChoice}.svg`;
  
    gameButton[1].style.backgroundColor = 'rgba(0, 0, 0, 0.15)';
    gameButton[1].children[0].style.display = 'none';
  
    setTimeout(() => {
      gameButton[1].children[0].style.display = 'flex';
      const img = document.createElement('img');
      img.setAttribute('src', `./images/icon-${computerChoice}.svg`);
      img.setAttribute('alt', `icon-${computerChoice}`);
      gameButton[1].classList.add(`game__button--${computerChoice}`);
      gameButton[1].children[0].appendChild(img);
    }, 400);
  
    game.appendChild(clone.firstElementChild);
  
    return {userButton: gameButton[0], computerButton: gameButton[1]};
  }
  }
  

  
  I'm sorry I wouldn't go over everything in this function line by line, but I'll go over the main functionalities.
  
  Okay then let's exact the main statements from the above function
  
  

  function gameTemplate(userChoice, computerChoice) {
   if ('content' in document.createElement('template')) {
      const game = select('.game');
      const template = select('#gameTemplate');
      const clone = template.content.cloneNode(true);
      const gameButton = clone.querySelectorAll('.game__button');
  
      gameButton[0] // userChoice Button
      gameButton[1] // computerChoice Button
  
      setTimeout(() => {
           gameButton[1]
           ....
      }, 400)
  
     game.appendChild(clone.firstElementChild);
  
     return {userButton: gameButton[0], computerButton: gameButton[1]};
   }
   return;
  }
  

  
  From the function above there's a check if 'content' exist document.createElement('template')) which checks if the browser supports the template element.
  
  Next off, the element with the class of .game is selected, then id of #gameTemplate. On the next line const clone = template.content.cloneNode(true);, this is to ensure we can clone the contents in the template element.
  
  Then the gameButton is selected from the clone. Where gameButton[0] is the users button and gameButton[1] is the computer button. Also notice, there's a delay of 400ms on gameButton[1] so that it appears as if that it takes some time to compute.
  
  Next off, the clone element gets appended to the game element via the DOM and both gameButton[0] and gameButton[1] are returned in an object.
  {userButton: gameButton[0], computerButton: gameButton[1]}

• At line 6 in the playGame() function: const result = rules(userChoice, computerChoice);
  
  We'd notice another function rules() which is being invoked with the argumentsuserChoice, computerChoice.
  
  

  function rules(userChoice, computerChoice) {
  if (userChoice === computerChoice) {
    return `draw`;
  }
  
  switch (userChoice) {
    case 'paper': {
      return computerChoice === 'rock' ? 'win' : 'lose';
      break;
    }
    case 'rock': {
      return computerChoice === 'scissors' ? 'win' : 'lose';
      break;
    }
    case 'scissors': {
      return computerChoice === 'paper' ? 'win' : 'lose';
      break;
    }
  }
  
  return null;
  }
  

  
  All the function does is to determine who wins, loses and if it's a draw.

• At line 20, the returned function is invoked winLose(result) with the result as its argument.
  
  This function is to determine the message that will be prompted out if the user wins, loses or if its a draw.
  
  Also the function returns a variable playAgain with the event listener which when clicked on the game is played again.
  

  function winLose(result) {
  const playAgainBtn = select('#playAgain');
  const playAgain = select('.play__again');
  const game = select('.game');
  const winLoseDraw = select('#winLoseDraw');
  
  setTimeout(() => {
   playAgain.style.display = 'block';
   if (result === 'win') {
     winLoseDraw.innerHTML = 'You Win';
   }
   if (result === 'lose') {
     winLoseDraw.innerHTML = 'You Lose';
   }
   if (result === 'draw') {
     winLoseDraw.innerHTML = "It's a Draw";
   }
  }, 400);
  
  return playAgainBtn.addEventListener('click', () => {
   playAgainFn(game, playAgain);
  });
  

OMG, that's a lot of information to process, I know. From the above steps, we've covered all the main functions that make the game work.

Once again here's the:

• Live Demo
• Github code

Resources

• Different types of dependencies in a Node.js application explained
• Structuring your Sass Projects
• Write CSS with Superpowers Using Sass.
• Functional Programming with JavaScript
• Master the JavaScript Interview: What is Functional Programming?

Conclusion

Was I able to accomplish my set goals for this project, I'd say yes. I did approach the program functionalities in a Functional Programming way, at least to my best abilities even though I know not all functions I used were pure. But hey! I did my best 😁. I also made use of BEM, SASS and plain JS.

If you've read so far, thank you very much, I hope you've learnt something.

So if you have any feedback, question, advice or any at all you could comment down below or reach me on Twitter

See you next time✌.

What's Pass by Value?

Pass by Value is majorly used with primitive types (data types) such as:

• String

• Number

• Boolean

• Undefined

• Null

Simply, Pass by Value is when a value from a variable with a primitive data type is copied with the = sign into another variable. Hence, the value of a primitive type is also known as a primitive value.

Here are instances of the five primitive types following the concept Pass by Value

// String
let name = "Favourite";
let newName = name;

// newName = "Favourite"

//Number
let count = 50;
let age = count;

// age = 50

// Boolean
let isNew = true
let isFeatured = isNew

// isFeatured = true

// Undefinded
let isUndefined;
let empty = isUndefined

// empty = undefined

// Null
let isNull = null
let isAlsoNull = isNull

// isAlsoNull = null

I know, I know, these are basic stuff in JS but did you know that the concept was called Pass by Value? Well if you did, Kudos to you if not, now you know 😀.

With Pass by Value, the variable copied is clearly the same as the initial variable copied from, so what if the copied variable is changed?

Example:

// String
let name = "Favourite";
let newName = name;

newName = "Success";

// name = "Favourite"
// newName = "Success"

Let's go through the example line by line,

• A variable is declared as name which has a value "Favourite" stored in memory and can only be addressed by the variable name name.

• Another variable is declared as newName with the value name which is a variable and equivalent to the value "Favourite". So newName = "Favourite" stored in memory and now addressable by the variable name newName.

• At this point, both variable name and newName has the same value but they are addressed differently with there unique variable names.

• Variable newName changes it's value to "Success". Therefore, the memory space for newName contains the new value "Success".

If you're unclear about what the term memory means, you can read this article Principles of Javascript where I discussed the term memory.

At this point, we have different values initialised in both variables name and newName, notice that name still has the value "Favourite" even though it was copied and then changed by the variable newName.

So, therefore, Pass by Value is when a variable value is copied into another variable as a value, without both variables referencing the same value even though the value might be the same. So if one of the variables change it value, there's no connection or link to the other variable.

That's pretty much all on the concept Pass by Value.

What's Pass by Reference

Pass by Reference is majorly used with non-primitives types, such as

• Object

• Array

Note: Arrays are a special type of Object

Object

When a value from a variable which is a non-primitive data type is copied with the = sign into another variable, the address of that value is what’s actually copied over as if it were a primitive type.
Objects are copied by reference instead of by value.

Example:

let obj1 = {
  item1 : "Books",
  item2: "Pens"
};
let obj2 = obj1;

obj2.item1 = "Pencil"

console.log(obj1)
// {item1: "Pencil", item2: "Pens"};
console.log(obj2)
// {item1: "Pencil", item2: "Pens"};

From the example above, both obj1 and obj2 have the same output when logged to the console, so the big question is why right?

Why

This is because when an object is assigned to a variable, the variable holds the address location of the object in memory and not the object itself. Thereby, the variable references the object through the address location in memory.

Hmm, the reason might seem daunting, so here is an illustration to help.

Let's go over the above example line by line:

• A variable named obj1 is declared initialized with an object as its value.

  • At this point the object {item1: "Books", item2: "Pens"} is stored somewhere in memory having an address to where it's stored. Let's denote the address with this symbol <x>.

  • Then the variable obj1 holds the address <x> to the object instead of the object value itself even though you can clearly see the object.

All these processes happen at the JS engine.

• Another variable is declared obj2 initialized with obj1 as a reference.

  • Since variable obj1 equals <x> (which is the address location to the object {item1: "Books", item2: "Pens"}), then variable obj2 equals to the same address location <x> which is linked to the object {item1: "Books", item2: "Pens"}.

• This expression obj2.item1 = "Pencil" simply means change the item1 property value to "Pencil" instead of "Books".

  • At this point, the variable obj2 has changed the value to {item1: "Pencil", item2: "Pens"} but the address which is actually stored in the variable hasn't changed <x>. Since the address hasn't changed and the variable obj1 also has the address <x> that means both variables obj1 and obj2 references the same object which is now {item1: "Pencil", item2: "Pens"}.

Cloning Objects

Now, that we know objects are Passed by Reference when copied as a value to another variable, so how do we stop this behaviour could be another question you might have.
Well, there're several ways to clone an object.

• Object.assign() method

Object.assign() is an object method that accepts arguments, where the first argument is the target object and the other arguments/argument is the source object.

Syntax: Object.assign(target, ...sources)

Here's an article to read up on Object.assign() method in this article:
ES6 object.assign() method with Example by Sachin Jaiswal

Example:

let obj = {
  item1: "Books", 
  item2: "Pens"
}
let cloneObj = Object.assign({}, obj)

obj.item2 = "Pencil"

console.log(obj)
// { item1: 'Books', item2: 'Pencil' }
console.log(cloneObj)
// { item1: 'Books', item2: 'Pens' }

• Spread Operator

The spread operator also referred to as the three dots ... is majorly used to spread out the content of an iterable i.e string, array, or objects, and thus returns a new variable.

Here are articles to read up for further understanding:
JAVASCRIPT SPREAD OPERATOR SIMPLIFIED by Balqees Ibrahim
10 ways to use the spread operator in JavaScript by Chris Bongers

Example:

let obj = {
  item1: "Books", 
  item2: "Pens"
}
let cloneObj = {...obj}

obj.item2 = "Pencil"

console.log(obj)
// { item1: 'Books', item2: 'Pencil' }
console.log(cloneObj)
// { item1: 'Books', item2: 'Pens' }

Using both Object.assign() method and the spread operator ... are both Shallow Cloning.
Read about Shallow Cloning here:
What is Shallow Copy in JavaScript? by Rahul

Shallow Cloning happens at only the first layer of the object which is cloned.

• JSON.parse() and JSON.stringify() methods

Making use of JSON.parse() and JSON.stringify() methods is know as Deep Cloning. This is where an object has another object as its property value and you'll like the objects to be cloned.

Here's an article that covers the topic Deep Cloning:
Deep Copy vs. Shallow Copy in JavaScript by Devalla Sai Charan