Svelte

Svelte Adding Meta

Topics:
Rich Harris
Rich Harris
Vercel

This course has been updated! We now recommend you take the Svelte Fundamentals course.

Check out a free preview of the full Svelte course:
The "Adding Meta" Lesson is part of the full, Svelte course featured in this preview video. Here's what you'd learn in this lesson:

Rich uses lighthouse to catch any mistake that were made while live coding the game application, and adds meta to the application after learning through the lighthouse report that meta was missing from the application.

Get Unlimited Access Now

Transcript from the "Adding Meta" Lesson

[00:00:00]
>> Okay, gonna go to the lighthouse tab. So this is a really useful way of catching any obvious mistakes that you've made in your app before you deploy it. Gonna click on Generate Report here, and it's gonna warn that Lighthouse and then do some checks. Okay, so Chrome extensions negatively affected this page's load performance, try auditing in incognito mode.

[00:00:25] Great tip, so, I'm gonna open an incognito tab and just close that. Run Lighthouse again. Okay, we're missing some SEO recommendations, document needs to have a meta description. And tap targets and not sized appropriately. So this is telling us that we need to add a meta name equals description content equals something.

[00:00:57] So the index.html file is where stuff like that belongs. It's gonna add meta name=description, content=CameoParison: the Cameo comparison game. Those tapped targets being too small, so it's telling us that these buttons here are not big enough for a mobile user to be able to use reliably. So, it says that those should be at least 48 by 48 pixels.

[00:01:44] So we're gonna go back to our CSS on the welcome screen and change that padding to 1em instead of 0.8ems. And I think that looks a little bit better as well, just check that still fits onto an iPhone 5 screen, it does, great. So we can use that.