Forem: Dmytro Lobanov

I thought my static site was “fine” until Lighthouse gave me a First Contentful Paint error. It turns out that opacity: 0 on the body breaks things. Here's what I fixed, learned, and how my FCP went from null to 0.2s. #webperf #frontend #css

Dmytro Lobanov — Sat, 21 Jun 2025 16:33:10 +0000

Dmytro Lobanov

Jun 17 '25

I Ran Lighthouse on My Personal Site - Here's What I Learned

#webperf #css #frontend #performance

Comments 1

3 min read

I Ran Lighthouse on My Personal Site - Here's What I Learned

Dmytro Lobanov — Tue, 17 Jun 2025 12:44:23 +0000

I finally decided to test my personal website with Lighthouse. It's a simple, static, one-page site, so I always thought, “It’s fine as it is.”
Well… I was wrong.

When I ran the audit, I didn’t get a shiny report. Instead, I got an error.

First Contentful Paint Error (aka NO_FCP)

The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)

Let’s break that down.

FCP stands for First Contentful Paint and it's the moment something (text, image, etc.) first appears on the screen. It's one of the key metrics Lighthouse uses to measure performance.

At first, I thought this error was just a fluke, but then I found this helpful explanation on StackOverflow. The issue came from how I was handling page load animations.

Setting opacity: 0 on the entire body is a bad idea if you care about performance and accessibility.

Here’s what I had before:

// Bad idea to set opacity to 0
body {
  opacity: 0;
  animation: fadeIn 1s forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

This makes Lighthouse think nothing is ever painted, which triggers the NO_FCP warning.

Fixing It the Right Way

Here’s how I fixed it while keeping the animation and improving accessibility:

@keyframes fadeIn {
  0% {
    /* Start slightly visible to trigger FCP */
    opacity: 0.01;
  }
  100% {
    opacity: 1;
  }
}

/* Only animate if the user hasn't asked for reduced motion */
@media (prefers-reduced-motion: no-preference) {
  body {
    opacity: 1;
    animation-name: fadeIn;
    animation-duration: 0.6s;
    animation-timing-function: ease-in;
    animation-iteration-count: 1;
  }
}

Now the page paints something almost immediately, and animations still work as expected! Here’s the Lighthouse report after the fix. We’re back in business.

Eliminate Render-Blocking Resources

Next up, Lighthouse complained about render-blocking resources.

My FCP and LCP (Largest Contentful Paint) were both around 0.6s and it's not bad, but I knew I could do better.

So, I followed this awesome tip from Scott Jehl and changed how I load fonts:

In my case, that's not a big deal, but my perfectionism asks me to fix it. So, I found a really elegant solution in the article.

<link href="https://fonts.googleapis.com/css2family=Manrope:wght@200..800&family=Sora:wght@100..800&display=swap"
      rel="stylesheet" 
      media="print" 
      onload="this.media='all'">

Fonts now load without blocking rendering, and look at these numbers, much better:

And just one more tip:
If you're using custom fonts, consider adding a fallback font in your CSS. Google Fonts no longer blocks rendering, so users might briefly see a different font while the main one loads, especially on slow connections.

Final Thoughts

Running Lighthouse wasn’t just about fixing issues - it helped me spot things I never considered. I learned how to make my site faster, more accessible, and more user-friendly.

Even if your site is 'just a static page,' don’t skip the analysis. There’s always room for improvement and sometimes, it’s surprisingly fun.

The Odin Project experience

Dmytro Lobanov — Sat, 07 Jun 2025 16:24:16 +0000

My Experience Learning with The Odin Project

When I first discovered The Odin Project, I was immediately drawn to the idea behind it: a full, open-source curriculum for learning web development. All the materials are free, open to everyone, and community-driven, and that community has done a tremendous job. It’s rare to find such a solid structure, packed with real projects, completely open and maintained by volunteers.

What Makes It Great

Two core ideas make The Odin Project (TOP) stand out to me:

Learning how to learn and staying motivated over the long journey;
Focusing on principles over tools;

The curriculum is packed with real projects that help solidify your learning. These aren’t toy examples — you build things that resemble real-world applications. That’s a huge motivator and makes the learning process much more satisfying.

Things That Could Be Improved (Just My Opinion!)

Now, these are my thoughts, and I might be wrong. But I want to share them in case they spark a discussion.

The environment setup can be intimidating for total beginners.
https://www.theodinproject.com/lessons/foundations-installations
While I understand why it’s important to learn these skills early, the process can feel overwhelming and scare away those who are just starting out.
No public profile to show off your progress or completed projects. A profile with links to your portfolio or GitHub could help new developers present themselves better when job-hunting.
Only React is taught as a front-end library. I think it would be great to offer an alternative path for Vue.js — not necessarily as a replacement, but as an optional track.
No CI/CD topics. These are essential in modern development workflows, even at the junior level. It would be valuable to add at least basic content about automated testing, deployment pipelines, and GitHub Actions.

My Advice for Using TOP Projects Effectively

Revisit previous projects.

As you learn more, go back and improve older work. It’s a great way to reflect on how far you’ve come.

Don’t try to implement everything.

Scope creep is real. Set time limits for projects and focus on what you're currently learning. You’ll have plenty of time to polish things later.

Avoid falling into the “build your own framework” trap.

It’s easy to get distracted with side ideas like making your own CSS reset or reinventing the wheel. Keep those ideas on a list for later, and stick to finishing projects.

Recommended Prep Before Starting The Odin Project

I recommend going through a few courses first, especially if you're brand new to programming:

Khan Academy – Computer Science

Udacity CS215 – Intro to Programming

Coursera – Algorithms Specialization

These will help you build a mindset for solving problems and understanding how things work under the hood, which is essential for succeeding in TOP.

Final Thoughts

Be ready - this is a long journey, and it’s okay if you stop and return a few times. That’s part of the process. I’m a strong believer in continuous learning, and The Odin Project was a fun and enriching experience for me.

If you’re serious about becoming a web developer and you're willing to put in the time, The Odin Project is one of the best places to start.

Support it and you will never get so many pieces of advice for only 5$

Workplace Communication

Dmytro Lobanov — Wed, 11 Dec 2024 23:57:09 +0000

Why Workplace Communication Matters
Tips to Improve Communication
Few Go-To Conversation Starters
Ending a Conversation Positively

Effective communication is one of the most critical skills in any workplace. It is central to collaboration, relationship building, and achieving goals. For example, if you’re applying for a new job, strong communication skills can set you apart as a valuable team member.

I will explore the importance of workplace communication and practical ways to enhance your skills.

Why Workplace Communication Matters

Workplace communication encompasses listening, writing, and interpreting nonverbal cues. Mastering these skills enables you to send and receive messages effectively, leading to several workplace benefits:

Enhanced Collaboration: When you speak clearly, listen attentively, and use the appropriate nonverbal cues, conversations become easier, improving your team’s ability to brainstorm, develop new ideas, and collaborate with one another.
Stronger Team Cohesion: A team that communicates well is more likely to be on the same page about overall goals and individual responsibilities. Plus, they can reference excellent written documentation to avoid misunderstandings.
Higher Customer Trust: Building strong client relationships hinges on clear and respectful communication.
Effective Management: Managers who communicate effectively provide clear directions and better understand their team’s needs and ideas.
Conflict Resolution: Conflicts happen, but they don’t need to end negatively. Show empathy and remove misunderstandings by sharing carefully constructed messages paired with appropriate verbal and nonverbal signals.

Tips to Improve Communication

Whether you’re having a conversation, participating in a staff meeting, running a presentation, or writing an instant message or email, effective communication skills play a central role in bringing both people and ideas together.

Plan Before Action

Organize your thoughts. When you consider your words ahead of time, you’re less likely to say the wrong thing or deliver a confusing message. Before you send a message, give yourself a minute to reread your message.
Use the broad-narrow-broad approach to present your ideas and arguments in a logical structure.

Keep Your Message Clear and Concise

Speak slowly and confidently. Speaking clearly is about volume, pace, and pronunciation.
The first question you should ask yourself before starting is, “Why am I writing this?” Effective communication has a defined purpose.
Also, make a clear call to action; if you need your audience to take action, such as to review or make an update, then be direct.

Choose Your Medium

Common workplace mediums include one-to-one conversations, meetings, emails, instant messages, and so on. The medium you choose will set the stage for your communication: it can immediately express how formal, urgent, or complex your message is.

When you’re skilled at sending and receiving verbal, nonverbal, and written messages, you’re likely to improve your workplace performance.

Few Go-To Conversation Starters

Compliment listeners; Everyone enjoys a compliment, especially when it’s about their accomplishments or talents. If you know nothing about the person, compliment them on something you see, such as their taste in clothing or accessories.
Find common interests; If the person is a stranger, find common ground with a few generic questions. You could ask: “What are your hobbies outside of work?” or “I just hate leaving my dog alone! Do you have any pets?”
Ask for help; A request for advice can make someone feel important and valued. For instance, you might say: “I have no idea what to do for lunch today. Do you have a favorite restaurant in the area?”
Talk about where you are; Take a look around you. Is there anything you can comment on? For example, you might say: “This is such a beautiful building. Have you been here before?”

Ending a Conversation Positively

Summarize What You’ve Talked About; If a coworker is sharing a story about their weekend, you might say: “That’s a great story! It sounds like you had a pretty exciting weekend.” These types of statements signal that the topic has run its course. They bring your discussion to a natural close.
Express Appreciation; Show a person that you enjoyed the talk and that you valued their time. Your goal is to help them feel positive about you, the discussion, and themselves. For example, you might say: “I’m so glad we had a chance to catch up!” or “It’s been great chatting with you!”
Suggest a Future Meeting; This last step is optional, but if you enjoyed talking to the person, suggest a future meeting. It’s much easier to say goodbye to someone you plan to see again.

If you have any additions or practical advice, I would be grateful if you could share them in the comments. My conclusions are based on the course I completed and are more suitable for people working in unfamiliar or international teams.

Sources:

https://ecollege.ie/all-courses/communication-skills-101

CS50's Introduction to Computer Science - Week 1 / Notes

Dmytro Lobanov — Wed, 06 Nov 2024 13:05:48 +0000

https://manual.cs50.io/
Full notes: https://cs50.harvard.edu/x/2024/notes/1/
Practice: https://cs50.harvard.edu/x/2024/psets/1/

To start we should know 3 main keys:

how to write commands
how to compile commands
how to run commands

code filename.c // create a file

// compiles the file from our instructions in C and creates an executable file called
make filename

./filename // run

Building blocks:

Functions
Variables
Conditionals
Loops
Operators
Comments

Types and format codes

Types refer to the possible data that can be stored within a variable. Types are very important because each type has specific limits.
The number of bits limits how high and low we can count.

bool, a Boolean expression of either true or false
char, a single character like a or 2 and takes 8 bits(1 byte);
double, a floating-point value with more digits than a float
float, a floating-point value, or real number with a decimal value (32 bits = 4 bytes);
int, integers up to a certain size (always 32 bits = 4 bytes), or number of bits
long, integers with more bits so that they can count higher than an int
string, a string of characters

printf allows for many format codes, full list https://manual.cs50.io/3/fprintf

int     %i
float   %f
char    %c
string  %s

CS50's Introduction to Computer Science - Week 0 / Notes

Dmytro Lobanov — Thu, 31 Oct 2024 15:43:53 +0000

All courses: https://cs50.harvard.edu/

Week 0

Full notes: https://cs50.harvard.edu/x/2024/notes/0/

How do computers think?

Computers today count using a binary system. From the binary digit, we get a familiar term called bit (binary digit). A bit is a zero or one: on or off.

2^3  2^2  2^1  2^0
 8    4    2    1

Computers generally use eight bits byte to represent a number. For example, 00000101 is the number 5 in binary. 11111111 represents the number 255.

For example, the letter A was decided to map to the number 65. 01000001 represents the number 65 in binary.

How do computers understand letters, colors, and music?

Just as numbers are binary patterns of ones and zeros, letters are represented using ones and zeros too!

For example, the letter A was decided to map to the number 65. 01000001 represents the number 65 in binary.

H   I   !
72  73  33

Unicode standard expanded the number of bits that can be transmitted and understood by computers. Unicode includes not only special characters but emoji as well.

What is an algorithm and pseudocode?

An algorithm is a procedure used for solving a problem or performing a computation.
Pseudocode is a human-readable version of your code

Example of the pseudocode

1 Pick up a phone book
2 Open to the middle of the book
3 If the person on the page
4    Call person
5 Else if the person is earlier in the book
6    Open to the middle of left half of book
7    Go back to line 3
8 Else if the person is later in the book
9    Open to the middle of right half of book
10   Go back to line 3
11 Else 
12   Quit

Pick up, Open, Call, and Quit are functions.
If, Else if are conditions.
the person is earlier in the book, if the person is later in the book are boolean expressions.
Go back to line 3 is a loop.

Useful links:
https://cs50.ai/chat - your AI duck tutor
https://cs50.dev/ - Visual Studio Code for CS50

Guide to Free Coding Resources: Courses, Practice, and Community

Dmytro Lobanov — Tue, 29 Oct 2024 16:32:05 +0000

Whether starting or leveling up your skills, you don’t need a big budget to learn coding—just the right resources and a commitment to learning. In this guide, I’ve gathered some of the best free platforms and communities that helped me.

This article is a WORK IN PROGRESS as I continue discovering new resources and insights. If you have your favorite free platforms, tips, or learning experiences, please share them in the comments! Let’s build a resourceful community together.
??? - means didn't test fully

Freecodecamp - #Certifications, #CoreSkills, #CompletelyFree, #web, #javascript, #react #python, #databases, #c, #english
theodinproject - #CoreSkills, #CompletelyFree, #web, #javascript, #ruby, #databases, #react
CodeSignal - #CoreSkills, #Freemium, #web, #javascript, #interviewprep
Khan Academy - #CoreSkills, #javascript, #sql, #python
LeetCode - #Practice, #javascript, #sql, #python, #prep
??? frontendmasters - #freemium
??? CISCO Network Academy