Viewing source, site metadata, and intro to the Dev Tools.
Lesson Intro
Oh, Ian. We will look at your site. Let us count the ways that we can learn from your goals, your implementation, your code, your humor, your less-than responsive layout, your lighthouse score, your metadata, your t-shirt – and so much more.
The goals
-
Introduce you to viewing webpage source code
You can look at the code for any website. There’s a lot to learn from other people’s code.
-
Introduce the Chrome "Dev Tools"
Really loose intro. Not only can you view the source, but you can interact with it.
-
Explain webpage metadata and its uses
Having some quality metadata can make all the difference. You want people to like you, right?
-
Loosely cover some history with regard to webpages layout
We didn’t always have these little phones, so all the web pages were the same size. Not anymore!
Time to investigate!
Ian will be our target for the day.
Let’s be really clear here: We are very grateful for this example / and we are in no way disparaging this site. We’ll treat it the EXACT same way as any other site / and even our own!
We thank him in advance, for his service.
Insecure?
Fairly recently, the web pushed toward a more secure version of HTTP.
Now, remember – HTTP, and FTP, POP3, IMAP, SMTP (email) — are all different “Protocols“.
What’s a protocol? It’s a set of rules. It is an agreed-upon system that defines how to transfer data. Sounds serious! It’s just a set of rules.
However, regular HTTP wasn’t as secure as it could be – and now that we’re sending credit card data and so much stuff through the web… it was time for HTTPS. If you add an S to something, it becomes more secure. 😜
So – Ian’s site hasn’t been updated to reflect this new HTTPS / but – he also isn’t accepting credit cards… but Google is going to let you know. It’s not ideal, but in the case of a business-card site – it’s not exactly egregious, is it?
What size should the website be?
In the 90s, you could plan on having roughly the same size screen.
960px wide seemed to be the norm for websites.
BUT… what about now? That’s not how it works…
Key
concept
Web Crawler
A “spider” or “Web crawler” – is a software application. It’s a “bot.” It runs automated tasks to download webpages for the purpose of recording their content and how they are connected. A search engine can then search that evolving set of data.
WikipediaFun fact: More than half of all web traffic is generated by bots.
Pretend you’re a web-crawler
You’ve got 8 legs and you’re looking at some code…
What do you see? What do you take note of – so that you can “index” the web?
- title?
- description?
- ?
Practice viewing some “source” code.
Right-click on ANY website (maybe not the pictures or the links) – and select “view source.”
I'm looking for a website... It's about cats...
Have you ever used one of these? We’re betting some of you haven’t!
Catalog is also a verb!
When you “search the internet” – you’re searching a cataloged set of data. That’s what the “web crawlers” collect for Google & other search engine companies.
They search the whole page, but – the “title,” “description,” and “URL” are pretty notable.
Mysterious "stylesheet"
What is this mysterious file we found by clicking on a link in the <head> ?
body? That sounds familiar…
a? Is that a link?
p? Paragraph, right?
Chrome's "Dev Tools"
To open the Chrome Dev tools ⌘ + ⌥ + i
(or right-click on the page and you’ll see the option)
Lots of places to get lost in there!!! Give her a spin.
Lighthouse scores
Open a site in an incognito window. ⌘ + ⇧ + n
Then, open the Chrome Dev tools ⌘ + ⌥ + i (think i for inspector)
See the ‘lighthouse’ tab + run a report.
You can see the PE score. Our best practices are down to 87, but – that’s because of some stuff in the Vimeo video player. We don’t have control of everything! There are a lot of factors to consider.
Not so hot!
It’s really hard and expensive to fix a HUGE MESS once it’s made. That’s why we’re spending so much time on each step.
By paying attention to proper HTML, content hierarchy, accessibility, and page-speed tools like lighthouse – you won’t ever end up with 10/100 performance. It’s a LOT easier to just do things well.
Key
concept
Metadata
Metadata is “data that provides information about other data”. In other words, it is “data about data”.
WikipediaIn the case of HTML, there are some <meta> elements that help describe some details about the document itself. By providing thoughtfully crafted information about the page, other services like social media and even text messaging applications can display a more “rich” set of information for the viewer.
In conclusion
You can only learn so much from looking at your own code, right?
You just started – about 9 days ago.
You have access to a world of documentation and books. You can watch a million video tutorials, but nothing is going to be more valuable than looking at the code of your peers – as you learn together. Being new has the added bonus of shining a fresh spotlight on all the right questions. (And when you find them, we have the answers)
Here are a few more new tools – and a few more ideas to think about as we keep on moving forward.
Exercises
-
Investigate some website metadata
You can find a few sites, and post them in the Slack channel for this lesson. That’ll show you if it has “rich” metadata. You can ALSO try out the Facebook Debugger if you’d like.
-
Practice "viewing source"
Check out the website on our student server. Are there any neat tricks in there? Are there any mistakes? What is going on!!!?
-
Run a few sites through lighthouse
Google’s instructions – if the video wasn’t clear enough: https://developers.google.com/web/tools/lighthouse#devtools
-
Use the dev tools to change another student's site
Open the “inspector” (the Chrome Dev Tools), and try and change some colors or fonts or words. Just goof around and share what you come up with.
Checklist
-
You’ve got a handle on what website “metadata” is / and more specifically – what “rich sharing” meta is.
-
You know how to view the source of ANY website with a few clicks.
-
You’ve spent a little time snooping around in your fellow student’s code.
-
You know how to run a lighthouse report for a website with Chrome’s dev tools.
-
You fooled around a bit and changed some colors and got a little experience with the dev-tools elements panel.
-
You had some questions, right???
Dying to know about UTF-8 character encoding?
ONLY if you finish all of the challenges… and you just have absolutely nothing to do…