DEV Community: Silvestar Bistrović

Clamp it! VS Code extension

Silvestar Bistrović — Wed, 09 Oct 2024 12:14:00 +0000

Today I published my first VS Code extension - Clamp it! This extension makes it easy to generate the clamped sizes for your CSS code.

I made it because wanted to be more productive. My current process included going to an online clamp generator website, entering desired sizes, and then copy-paste it into my code.

I made it with help from ChatGPT. 90% of the code is produced by ChatGPT. I had to tweak some things, and I came up with the idea, so I guess I deserve some credit.

To start using it, first configure it by setting the following options in the global settings.json file (Command palette: Preferences: Open User Settings (JSON)) or your project settings.json file (Command palette: Preferences: Open Workspace Settings (JSON)):

{
  "clampExtension.globalMinViewport": 600,
  "clampExtension.globalMaxViewport": 1440,
  "clampExtension.baseFontSize": 16
}

Next, type minimum and maximum sizes (in pixels), highlight the typed sizes, and then choose Clamp it! command from command palette:

If you want, you can use the full definition, like so:

16, 20, 16, 600, 1200

where

the first parameter is the minimum size,
the second parameter is the maximum size,
the third parameter is the base font size,
the fourth parameter is the minimum viewport size, and
the fifth parameter is the maximum viewport size.

Note that the output is always in REM units:

clamp(1rem, calc(0.821rem + 0.476vw), 1.25rem)

That's it! I hope this little extension will make you more productive as it made me.

Fetch, process, output, style, listen

Silvestar Bistrović — Tue, 08 Oct 2024 10:12:00 +0000

In a sea of various possibilities for how to build a website, here’s my preferred way.

Fetch

Since forever, there have been systems for managing content where users manage their content. It doesn’t matter if it is a cloud, a database, or a file. The data is stored somewhere, and we need to fetch it somehow. In most cases of static sites, it makes sense to fetch the data and let the website framework consume it.

Process

Sometimes, the fetched data isn’t in the most desirable format. It makes sense to apply some transformations to the data to display it most efficiently.

Output

The prepared data then needs to be displayed. Choosing a templating language is often a way to go.

Style

Once the data is on the screen, it is time to style it. Choose what you’re most comfortable with, but consider maintainability and scalability.

Listen

Finally, adding scripts that respond to users’ actions enables users to interact with the site.

My favorites in 2024

Contentful for storing the data
Eleventy to fetch and process the data
LiquidJS for templating
Vanilla CSS for styling
Vanilla JS for interactivity

Conclusion

You can go far with simple solutions. Don’t overcomplicate, use proven solutions, and think long-term.

Reset with CSS unset

Silvestar Bistrović — Mon, 07 Oct 2024 08:10:00 +0000

Over the past couple of years, I have frequently utilized the unset keyword to reset the CSS properties. I noticed I'm using it intuitively to reset a property. But what is intuitive for me might not be intuitive for you. Let me clarify.

Unsetting

For example, I've used border: none for ages to remove the border from elements. These days, I'm using border: unset, and the borders are gone.

Borders are easy because they are non-inherited properties meaning the child element doesn't inherit the value from its parent elements.

The same goes for margins and paddings, which I regularly need to reset.

But what about inherited properties? In the example below, the last button will have a blue color. It is because the unset property essentially means inherit for the inherited property color, which the button did and set the color to blue.

Inheritance vs. cascade

These things make sense to me, an experienced CSS developer who knows about inheritance. But for a beginner, these concepts are not trivial. I would dare say most beginners didn't even hear about inherited and non-inherited properties or might forget about them. They might learn about the cascade, which is not the same.

The final styling is based on cascade, specificity, inheritance, and more. MDN has a pretty solid article about understanding cascade, specificity, and inheritance.

Also significant here is the concept of inheritance, which means that some CSS properties by default inherit values set on the current element's parent element and some don't. This can also cause some behavior that you might not expect.

— MDN

The last sentence seems scary, not knowing what to expect with inheritance. It might help if you remember which property will inherit value from its parents, but that comes with time. Finding that information could be tedious - going to the docs or searching for it in your notes. The important thing is knowing the inheritance exists and that it might cause issues, especially when using the unset keyword.

Unset these properties safely

I figured it might be useful to list the properties I often unset that are uninherited and, therefore, safe to unset:

background (and all its properties like background-color, background-image, etc.)
border (and all its properties like border-width, border-style, etc.)
border-radius (and all its properties like border-top-left-radius, border-start-start-radius, etc.)
margin (and all its properties like margin-top, margin-block-start, etc.)
padding (and all its properties like padding-top, padding-block-start, etc.)
min-height
min-block-size
min-width
min-inline-size
max-height
max-block-size
max-width
max-inline-size
position
top
bottom
left
right
inset (and all its properties like inset-block, inset-inline, etc.)
grid (and all its properties like grid-template-columns, grid-column, align-items, row-gap, etc.)
flex (and all its properties like flex-basis, flex-direction, align-items, row-gap, etc.)

Conclusion

When it comes to resetting a CSS property, the unset keyword can come in handy. However, it's important to consider the inheritance of the property you're working with.

If you want to ensure maximum safety, unsetting the properties that are not inherited may be your best option. By doing this, you can eliminate any potential risks and have peace of mind knowing that your stylesheets are secure.

2023 Lookback

Silvestar Bistrović — Fri, 26 Jan 2024 12:13:00 +0000

Let me tell you about the most challenging year in my career, the year 2023.

The bad half

I started the year unemployed. In the first half of 2023, I could barely find any job. It was a real challenge with the global economic crisis and everything.

During this period, I somehow managed to find a few shorter gigs. Two came from Toptal: one small HubSpot job (which reminded me to publish an article about its horrible developer experience) and one WordPress job. The other was a Shopify job, which I randomly found in one Slack community.

I cannot say I enjoyed any of these jobs, but I wasn’t in a situation to complain.

I spent the majority of my free time on finding a job. I discovered so many sites, so many platforms, and so many bullshit job ads that I started to feel that finding a job is impossible.

Always have money in a piggy bank for at least 3 to 6 months if you are a freelancer. You never know when the next crisis will arrive.

I knew I needed to keep myself busy, so I worked on my side projects. I polished my website and tried many new techniques and technologies. I wrote more than 20 articles in the first half of the year. I restarted and rebuilt my newsletter, which now has more than 600 subscribers (I even got a sponsor for a short time). I even tried a new approach where you rent my UI development services called A Dedicated Dev, but it has yet to catch up.

The first part of the year was just horrible.

The good half

Then, in July, everything changed. I landed a few jobs simultaneously, and I couldn’t be happier. First, I worked on an interesting Shopify project. I had to build some new templates and update the existing navigation. The client was stunned when he discovered how optimized the new templates were compared to those from his generic theme.

Then, I worked on a Shiny project where I had to learn R Markdown. I was very excited about it because being paid to learn a new technology is something I have always preferred. I also worked with Highcharts graphs, which I didn’t do for years. It was also the first time I was being paid to design something. I didn’t enjoy that part as much as development, but I cannot say it was a bother either.

Parallel to that, a manager I worked with before offered me a job as a frontend developer in the marketing team. They needed help with their site, which was built with Next.js, Strapi, and Tailwind. The site was overengineered and unoptimized, so I proposed to rewrite the website with Contentful, Eleventy, and vanilla CSS and JavaScript. Everyone agreed, and we managed to migrate the whole site within a few months.

Last quarter, I helped an ongoing client build a new Careers page for a Hugo-based site. I also helped develop a Shopify theme for a food industry-related client. And for the first time ever, I developed a website for a client without writing a single line of JavaScript.

So overall, the second part of the year was a great success.

Conclusion

As the year advanced, I feared I couldn’t pay my bills. But, fortunately, my luck has changed, and it didn’t happen.

Once again, my advice that you always need money in a piggy bank for at least 3 to 6 months when going freelance came true. You never know when the next crisis will arrive.

I hope this year will be the best one, not just for me but for everyone.

Nightmare DX (Developer Experience): HubSpot

Silvestar Bistrović — Wed, 24 Jan 2024 13:14:00 +0000

I meant to write about HubSpot’s terrible developer experience (DX) right after my first article about Shopify’s nightmare DX two years ago, but it wasn’t until recently that I had to work with HubSpot again. Although the project was short and sweet, it reminded me to write this article.

Local development

HubSpot, just like Shopify, has limited abilities for local development, and you cannot replicate the HubSpot environment on your computer. The only thing you could do is sync your theme using HubSpot CLI. And you know what that means? It means no browser sync or hot reloading. It means refreshing your page every few seconds manually.

Working with HubSpot CLI has been a nightmare experience for me in several scenarios. For example, when developing a new HubSpot module, it is considered the best practice to use Design Tools inside the HubSpot dashboard. With Design Tools, you could configure input fields for your module and copy snippets and/or values. Then, to sync these changes locally, you should fetch your module from the server. No problem there, but on more than a few occasions, the fetch action didn’t override my local files, making me delete the local module and then repeat the fetch action. Talking about the waste of time.

Then, when you are developing locally and want to add more input fields, you often go back to Design Tools and add these fields. The problem occurs when you forget to refresh the page, have an older version of your module, and then hit the “Publish changes” button, which overrides your local changes. Once you try to fetch the changes, it doesn’t work, so you delete your local module files and try to fetch files from the server again, and guess what? You lose your work because undo doesn’t work on deleted files.

Dashboard

For an enterprise CMS like HubSpot, you would expect to have an organized dashboard, but HubSpot’s dashboard is everything but organized. For example, if you want to edit your blog listing page, you could navigate to Marketing > Website > Blog and switch from Blog posts to Blog listing pages.

Once you find your Blog listing page, if you want to rename it, you cannot do it here. You need to go to Settings > Tools > Website > Blog. If this makes sense to anyone, please explain how.

Documentation

Although HubSpot documentation is very comprehensive, it should’ve been more organized. The most important pages that help me with HubSpot development, like Hubl filters and functions, are so big and slow that it takes over a minute to load them completely. And I need it to load completely because I want to use search to find something on the page.

Conclusion

There are many other things to complain about, but there are the main pain points for me. I had some additional notes in my draft, but I no longer know what they mean. I also have the screenshot with the vague message about access issues, but I don’t know what it means.

If you are building a webshop or website platform, try to make your tools more enjoyable. Invest more time to listen to what developers say and try to improve the overall developer experience. It would make this developer happier.

Save MBs by converting from GIFs to videos with Cloudinary

Silvestar Bistrović — Tue, 23 Jan 2024 10:11:00 +0000

I switched from GIFs to videos recently. I’ve been using Cloudinary to host my images for years, but I didn’t realize I could use it to convert GIFs to videos automatically. In this post, learn how Cloudinary helped me save megabytes of data by automatically converting GIFs to videos.

Converting animated GIFs into videos

Like other transformations on Cloudinary, converting GIF to video could be done as easily as changing the extension of the file from .gif to .mp4, like this:

https://res.cloudinary.com/.../my-gfx.gif

https://res.cloudinary.com/.../my-gfx.mp4

Eleventy shortcodes

Since my site is powered by the awesome Eleventy, changing all GIFs to videos wasn’t too much of a task for me. I was using my custom Liquid shortcode for loading GIFs:

eleventyConfig.addLiquidShortcode(
  'gif',
  (src, alt, width, height, instant) => {
    return `<img
      src="${src || ''}"
      alt="${ alt || '' }"
      width="${ width || '' }"
      height="${ height || '' }"
      ${ instant ? '' : ' loading="lazy"'}>`
  }
)

To load the GIF to my blog post, all I had to do was to call the shortcode like this:

{% gif "https://res.cloudinary.com/starbist/image/upload/v1687771538/Large_GIF_1458x916_qd6iqv" "Demonstration how CSS View Transition works on my site." 759 477 true %}

This code will produce the following HTML:

<img class= "brad true" src=" https://res.cloudinary.com/starbist/image/upload/v1687771538/Large_GIF_1458x916_qd6iqv" alt=" Demonstration how CSS View Transition works on my site." width= "759" height= "477" loading= "lazy">

To load videos instead GIFs, I introduced a new shortcode:

eleventyConfig.addLiquidShortcode(
  'video',
  (src, width, height, autoplay, loop, muted, gif) => {
  return `<video
      width="${ width || '' }"
      height="${ height || '' }"
      controls
      playsinline
      ${autoplay ? ' autoplay' : ''}
      ${loop ? ' loop' : ''}
      ${muted ? ' muted' : ''}
      poster="${src}.jpg">
      <source type="video/mp4" src="${src}.mp4">
      <source type="video/webm" src="${src}.webm">
      ${gif ? 'Your browser does not support the HTML5 video tag. <a href="' + src + '.gif">Click here to view original GIF</a>' : ''}
    </video>`
  }
)

To simulate GIF behavior, we must autoplay the video, mute it, and play it in a loop. Here’s how to do it:

{% video "https://res.cloudinary.com/.../my-gfx 759 477 'autoplay' 'loop' 'mute' 'gif' %}

The first parameter is the link to the original GIF but without an extension. It is important to avoid adding extensions because the code will add the JPG extension for the video poster attribute and mp4 and webm extensions for different video formats. Finally, for browsers that don’t support video tags, it will add the text “Your browser does not support the HTML5 video tag. Click here to view original GIF.” with the link to the original GIF.

Here’s the final HTML:

<video width="759" height="477" controls playsinline autoplay loop muted poster="https://res.cloudinary.com/.../my-gfx.jpg">
  <source type="video/mp4" src="https://res.cloudinary.com/.../my-gfx.mp4">
  <source type="video/webm" src="https://res.cloudinary.com/.../my-gfx.webm">
  Your browser does not support HTML5 video tag. <a href="https://res.cloudinary.com/.../my-gfx.gif">Click here to view original GIF</a>.
</video>

Conclusion

The savings from switching from GIF to video are tremendous. For this particular video, it goes from 3 MB to less than 0.3 MB, with an additional .08MB for the poster image. That’s pretty awesome, if you ask me. From now on, I am using only videos on my site.

Developer’s research process

Silvestar Bistrović — Mon, 22 Jan 2024 08:21:11 +0000

When given a project or task you don’t know how to solve, you must research and find possible solutions to estimate the required effort. In this post, I will explain how I research before I start developing.

Hypothetical problem

Let’s say you have to estimate a project where a few things are out of your comfort zone. You are still confident that you can execute the project. You just need to explore possible solutions so you can estimate them. Here’s how I do it (not necessarily in this order).

Phase 1: Searching

Search engines

When searching on search engines, I usually try a few different terms, depending on what I want to find. At first, I tried to find articles and tutorials related to the topic. Search results don’t have to be the perfect answer to my problem. I’m just looking for something that might fit my problem. What I’m after is inspiration, something good enough to start with.

As an advanced search engine user, I am usually good at finding what I need, but that is only sometimes the case. Sometimes the solution is outdated. Sometimes the solution doesn’t have good browser support. Sometimes the solution has accessibility issues. In this case, I turn to some of my favorite websites.

Websites

My favorite websites for researching are:

MDN, and
StackOverflow.

I use MDN when I know what technology or feature, in particular, I’m going to use. I am pretty familiar with its navigation and structure, and I generally enjoy using it. Its content is up-to-date, with clear language that I can easily comprehend.

StackOverflow is still on my research list. There are plenty of answers that are still relevant. I use it mostly to overcome some JavaScript challenges.

When dealing with specific platforms or frameworks like Netlify, Shopify, Hugo, or Eleventy, I find most answers on their community or official support pages. I always try to find out if someone already asked a specific question before posting my own. These communities are very friendly, answers usually come quickly, and their support teams respond promptly.

There are some other websites that I occasionally use. Here are honorable mentions:

GitHub
CodePen
The Practical Dev
Codrops
CanIUse

Social platforms

Sometimes I do my research on social platforms like Twitter and Mastodon. The search feature on both platforms could be more usable, but it helps if you know which person posted the solution. With a bit of scrolling and browsing, I usually find what I searched for.

Newsletters

Occasionally, I search my email to find something related to the topic. Sometimes it is my newsletter, UI Dev Newsletter, and sometimes it is other newsletters that give me what I want. That is why I am still subscribed to several newsletters, although I consume most of the web dev content via Twitter or Mastodon.

Phase 2: testing

Once I have all the material to solve my problem, I need to try it out to see how it works. Usually, I recreate the solution in the static environment using fundamental technologies - HTML, CSS, and JavaScript. I avoid spending too much time on demos. Instead, I try to figure out the core of the problem or solution.

At this point, I usually finish my research. I communicate to the client (or the team) which solution or solutions we could use, the advantages or disadvantages, and how much time (or money) it will take.

Conclusion

Nobody knows everything, and some things need time to plan and explore. I learned that saying “I don’t know” is perfectly fine as long as it is followed by “but I’ll take a look at what’s possible.” Search engines, developer communities, social platforms, and newsletters are valuable sources of information that could save you time and help estimate project requirements more accurately.

Transition between pages smoothly with a single line of code

Silvestar Bistrović — Wed, 12 Jul 2023 11:49:48 +0000

CSS View Transitions is one of the latest additions to Chromium-based browsers, and I decided to try it.

I was following Dave's instructions, and I immediately noticed something that I liked a lot. As soon as I enabled the View Transitions in my browser (since it is still an experimental technology) and added <meta name="view-transition" content="same-origin"> to every page of my site, I noticed the transition was already working.

It works in the most basic mode, fading out the current page and fading in the visited page, which is a thousand times better than the default behavior (in my humble opinion). And there you have it—fully functional transitions between your website pages with a single line of code.

Announcing A Dedicated Dev

Silvestar Bistrović — Tue, 13 Jun 2023 11:43:14 +0000

Today I launched A Dedicated Dev - a subscription-based web development service. If you need a trustworthy and reliable web developer, you can subscribe and get web development services when you need them.

How it works

Instead of going through a hiring process for a web developer, all you need to do is subscribe to web development services. Once subscribed, you get a dedicated web developer to make your website the best possible.

Subscriptions are based on 1, 3, and 6 months - a more extended subscription means a lower cost. With a 1-month subscription, you get the option to pause your subscription. The billing cycle lasts 31 days, and if you pause your subscription on day 14, you can use the remaining days in the later billing cycle.

Once subscribed, you can access your Trello board, where you place your requests. No limit exists to how many people you invite to the Trello board or how many requests you submit. Every new request is converted into smaller tasks that are resolved one at a time. It takes a day or two to resolve a task. Remember that A Dedicated Dev is not about speed but about code quality.

Bugs or breaking functionality takes precedence over regular tasks. A Dedicated Dev will eliminate these situations whenever possible.

A Dedicated Dev supports web development on the following platforms: WordPress, HubSpot, Shopify, Jekyll, Hugo, Hexo, and Eleventy. If you have a project that uses another platform, contact me, and we can discuss what is possible.

Most meetings, calls, and syncs are eliminated when working with A Dedicated Dev. Asynchronous communication is the key to successful collaboration - no time wasted on unimportant things. So, when making requests, provide as much information as possible, leaving A Dedicated Dev with as few questions as possible.

If you would have told me…

Silvestar Bistrović — Thu, 01 Jun 2023 08:12:38 +0000

If you had told me 12 years ago that I would be doing web development for a living, I would laugh at you.

If you had told me 11 years ago that I would be doing frontend development for a living, I would laugh at you.

If you had told me 10 years ago that I would be working mainly with HTML, CSS, and JavaScript for a living, I would laugh at you.

If you had told me 9 years ago that I would be owning a company, I would laugh at you.

If you had told me 8 years ago that I would be writing articles for prominent publications, I would laugh at you.

If you had told me 7 years ago that I would be working internationally on high-profile projects, I would laugh at you.

If you had told me 6 years ago that I would be working from my office downtown, I would laugh at you.

If you had told me 5 years ago that I would live in my dream house, I would laugh at you.

If you had told me 4 years ago that I would not use CSS or JavaScript frameworks in my everyday tasks, I would laugh at you.

If you had told me 3 years ago that I would write my 102nd article, I would laugh at you.

If you had told me 2 years ago that I would be working from my home office again, I would laugh at you.

If you had told me 1 year ago that I would be without a job for 5 months, I wouldn’t laugh at you, but I wouldn’t believe you either.

Believe in yourself, have dreams and goals, and be yourself. And be sure to have some savings.

Dealing with constant rejection

Silvestar Bistrović — Thu, 01 Jun 2023 08:08:26 +0000

Being rejected for any reason in any aspect of life is complicated. Being rejected constantly becomes a real pain. As I struggle to find projects and clients this year, I often have to deal with rejection.

Types of rejection

The first type of rejection is when I see myself taking a job or project, but then it appears I lack the skill for it. Let’s take the last rejection as an example. I was rejected because my “React and Gutenberg skillset doesn’t align with our project needs right now.” Was it my fault for being honest and admitting that I have never worked with these technologies in the production environment? While I did take some courses, do they count? My conscience prevents me from lying, so I go out there and admit I lack these skills. What bothers me is that I feel I would thrive working with these technologies if given a fair chance. But, unfortunately, it seems the world doesn’t work that way.

Sometimes I don’t even go that far because I was rejected by an online testing platform. I openly admit I am pretty bad at solving algorithm tasks, so I often fail online tests. But am I required to know algorithms if I am in charge of building your website? I don’t see it and cannot remember the last time some algorithm saved the day. The hiring process has been broken for so long that nobody even tries to fix it. I could only guess how many quality people weren’t hired just because they failed some ridiculous online test.

Often times I am the one that rejects a client. The most common reason is compensation. I worked so hard to be able to reach my current rate. Nobody knows how many nights I’ve been learning or working on a side project to master a skill, framework, or technique. I’m constantly learning and trying to apply my newly acquired knowledge whenever applicable. Clients often don’t even realize all aspects of the delivered project. I am never happy with my average job, so I always try to provide top solutions. I am aware that the global economic situation is far from ideal, so I adjusted my rate, which, by the way, I think is more than fair anyway. Still, there are principles I cannot walk over.

Sometimes I reject job offers because they require me to solve an exercise. With more than ten years in the industry, I reject solving some foolish task that will take more than a few days. It is because even when I don’t work on paying projects, I work every day. Be it that I am looking for a job and applying, which I think is even more demanding than doing your job, be it that I am preparing my newsletter, optimizing and updating my site, or writing articles. So I reject proving myself all over again when I could do something that makes me feel like I am doing something worthwhile.

Another reason for rejection is because of the timezone difference. I’m a family man who appreciates my time too much, so I cannot accept being around my computer all day. For example, I had to reject a high-profile client last month because they expected me to be available for a possible meeting the entire day. I usually work in the morning and offer time slots when I am available in the afternoon for meetings. Still, I cannot be available the whole day waiting for a meeting to happen or not. I’ve worked for more than six years with clients worldwide, and everyone appreciated my time by arranging a meeting at least a day in advance so I could plan my time efficiently. That is all I ask, and it is a dealbreaker for me.

Still positive

It is hard to stay positive when dealing with constant rejection, but I am somehow still positive. It still excites me when I speak with potential clients. I still look forward to hearing about every new project. I guess I just had to wait patiently for the perfect opportunity to arrive.

Stay positive and happy coding, everyone!

How to measure page loading time with Performance API

Silvestar Bistrović — Wed, 10 May 2023 07:23:58 +0000

A while ago, I stumbled across a blog post by Tim Kadlec. Although the blog post was intriguing, something else caught my attention. In Tim’s footer, there’s a text saying how much time did it take to load the page. Naturally, I wanted to incorporate this feature into my website, so I “borrowed” Tim’s code (Mr. Kadlec is aware of this, by the way). However, while adjusting the code for my site, I noticed numerous deprecation warnings popping up. Needless to say, it bothered me so much that I had to find a way to eliminate these warnings.

The new way

MDN recommends using the Performance API to gauge the performance of websites and web applications. Unfortunately, while the documentation is comprehensive, it doesn’t provide many examples. So I had to experiment with several approaches, but the results didn’t match the results from the “original” script. Not until I noticed that you could save the performance.mark() as a variable and read its properties.

Check out the GIF below, demonstrating how the “old” and “new” versions produce almost identical outcomes.

Here’s the final code for getting the page load time:

const perf = () => {
  const $perf = document.querySelector('.js-perf')

  if ($perf) {
    // Wait for the page to finish loading
    window.addEventListener('load', () => {
      const pageEnd = performance.mark('pageEnd')
      const loadTime = pageEnd.startTime / 1000

      $perf.innerHTML += `Page loaded in ${loadTime}s.`
    })
  }
}

perf()

Once the load event is complete, I store the performance.mark(‘pageEnd’) into a variable. The variable contains several properties, but we only need startTime. To get the final result in seconds, I divided startTime by 1000 and displayed it in my placeholder.

NPM package

To save you some time, I’ve created an NPM package named page-loaded-in.

Place the following code into your <head> and include the .js-page-loaded-in element to see how fast your page loads.

<head>
  <script src="https://unpkg.com/page-loaded-in@0.0.3/dist/index.js"></script>
</head>
<body>
  <p class="js-page-loaded-in"></p>
</body>

Conclusion

Prioritizing performance when developing web-based projects is crucial to provide users with a seamless and efficient experience. Measuring page loading time using the Performance API is one way to demonstrate that a page is performing well.