Day 38 of 100 Days of Code & Scrum: Styling Next.js <Image> With a Wrapper

Greetings, everyone!

Today, I started to gain some momentum for working on my company website. I finished setting up AWS SES, Lambda, and API Gateway for my email contact form. Now, all there is left to do is to actually code the frontend contact form with proper styling.

What really grinds my gears is Next.js' <Image /> which has a really weird inline styling effect. the workaround is really annoying, which is to wrap a <div className> around it to add custom CSS styling. I don't like this, because it adds up an extra node/element for every <Image /> I need to style in my application.

Yikes...

Oh, and I still don't have my Internet back. However, I will make do with whatever bandwidth I have.

Anyway, let's move on to my daily report!

Yesterday

I planned out what I will be doing for this week, and I noticed that I am being overwhelmed by various interesting things that I want to learn and work on. I decided to prioritize my main objective first, which is the website MVP.

Today

Here are the things I learned and worked on today:

Next.js

• coded my services section for the homepage.
• finished the mobile styling for the skeleton layout.
• the desktop version is also okay, but could use some size changes.
• had to fix a lot of my <Image /> and wrap them around with <div> so I could add styling.

AWS

• finished setting up AWS SES, Lambda, and API Gateway for my email contact form.

Scrum

• I did some practice flashcards for Scrum.
• reviewed some of the things I've learned before.

Have a great start to your week, everyone!

Resources/Recommended Readings

• Enable styling of next/image outer wrapper | GitHub Discussions
• Official Next.js tutorial
• The Typescript Handbook
• The 2020 Scrum Guide
• Mikhail Lapshin's Scrum Quizzes

Cover Image

• laura adai on Unsplash

DISCLAIMER

This is not a guide, it is just me sharing my experiences and learnings. This post only expresses my thoughts and opinions (based on my limited knowledge) and is in no way a substitute for actual references. If I ever make a mistake or if you disagree, I would appreciate corrections in the comments!

Other Media

Feel free to reach out to me in other media!