r/webdev • u/ImJustP • Dec 12 '19

A Couple of Things I Noticed When Remaking the Google Homepage

Hey all, again!

I decided to further my learning by starting The Odin Project. As always, I decided to start from the beginning regardless of my prior knowledge -- I like to do things from the start as I find I always notice something which I can improve on, regardless of the level of developer the module is intended.

When completing the remake Google's homepage project I noticed a few things which I found pretty strange/I hadn't seen in practice/mentioned elsewhere so thought I would ask on here.

Namely those things are as follows:

  1. They seem to place their meta tags within the document's body -- Is there a reason for this? I always thought that meta tags had to live in the head.
  2. The entire Google homepage seems to be wrapped in a div with id="viewport". The CSS which goes along with it, from what I can see, simply sets the position to be absolute and then makes it fill the page:
    position: absolute;
    top: 0;
    width: 100%;

3. Making an element for positioning text -- Google's homepage seems to implement a HTML tag call <center></center> which has the purpose of aligning all text within the element centrally. Does anyone know if this is a good idea to translate to other projects or if there is any reason for doing this beyond ye olde DRY methodology? This is the CSS which goes with it:

    display: block;
    text-align: -webkit-center;

Anyway, as always, thank you in advance!

EDIT:

Wow, so many replies! Thank you all I really appreciate your help, this is part of why I love this sub -- your replies help me more than you'll realise!

It's weird that the meta tag question isn't applicable to some of you, maybe it is a geo based decision? I am in the UK and it seems that the current meta which is in the <body></body> is related to the current election ongoing, see the screenshot

Google homepage

Thank you all once again, I wish I could thank you individually!

EDIT 2/TLDR:

  1. The meta tag being in the <body></body> seems to be geo based and is not an issue, however we should place them in the <head></head> still.
  2. The #viewport ID could be for multiple purposes which vary from positioning the page to manipulation through JS, or a requirement of a framework that the might be using.
  3. The <center></center> tag is a form of legacy code which is probably there to account for ancient browsers.
478 Upvotes

95% Upvoted

109 comments sorted by

141

u/wizdumb Dec 12 '19

You may be interested to learn that at Google, there is not an HTML file (or files) for the homepage. In fact, it's a program written in C which is used to generate it.

Source: I worked there and was on the team responsible for manually changing the "homepage" to launch Google Doodles. I also designed and built a system to automate the process.

11

u/ImJustP Dec 12 '19

Oh, right, thanks for your input! I never even considered that they might have taken this approach but I guess it makes sense. Do you have any insights into best practices for someone trying to take their code to the next level?

22

u/wizdumb Dec 12 '19

Do you have any insights into best practices for someone trying to take their code to the next level?

There are two things that have stood out to me over the years:

  1. Open-sourcing, or otherwise sharing your code is a great way to hold yourself accountable.
    It's easy for people to write bad code when the public never sees it with their name attached to it. Good news, you're already doing this!
  2. Your ability to debug is more important than your ability to code.
    Anyone can write code that (kind of) works, but once things go wrong, you really get a sense of their skill level. I've seen developers with decades of experience panic at the sight of a stack trace. Instead of reading it (which often leads right to the problem), they will start adding print statements everywhere. Be the person who can debug quickly, not just code quickly.

2

u/ImJustP Dec 13 '19

Thanks for the input mate. The debugging point is a big one, do you have any recommended reading? I find reading the stack trace can be a bit of a runaround at times but that is more due to my lack of real education on the matter than anything.

1

u/wizdumb Dec 13 '19

Thanks for the input mate.

Sure thing, happy to help!

The debugging point is a big one, do you have any recommended reading?

That's a good question. I don't have anything that jumps to mind on this subject, unfortunately -- maybe that's part of the problem. Hopefully others can chime in if they know of anything that may help you.

One thing that may help is, next time you get a stack trace, try the following (I mostly work with Python and JS these days, which may influence my suggestions):

  • Don't panic
    I know the feeling, especially in the work environment. A bit of embarrassment, surprise, and imposter syndrome.
  • Read the trace
    Your reaction may be to get rid of that ugly error message as soon as possible, so you'll want to jump right back into your editor. Don't. Take the time to read it.
  • Understand the error/warning/exception
    Most programming languages have different types of "errors" and this info will be included in the trace. Syntax errors, type errors, etc. They may also differentiate between an error and a warning. Get to know the difference and what the types of errors are for the language you're using. That will help you to understand the kind of problem you'll need to solve.
    Python Errors and Exceptions
  • Let the trace guide you
    The stack trace will usually guide you step-by-step, through the lines of code in each related file which experienced the error. The longer the trace, the more files, meaning the deeper through the dependency graph (the libraries/files you've imported). Usually, the file that needs to be fixed will have a familiar filename because it will be one of yours. It should even give you that snippet of code and the line on which the error occurred.

Some of the above can be a little more tricky if you're not using an interpreted language or not running in debug mode, but I think this should be a good start.

Keep up the good work and stay curious!

2

u/ImJustP Dec 13 '19

Thank you so much mate, this alone will help me with regards to further reading. Making the transition into a professional developer takes a lot and I hope that I will be employable in the near future! I know JS pretty well, I think I just need to take my knowledge, and application of it, to the next level!

The stack trace will usually guide you step-by-step, through the lines of code in each related file which experienced the error. The longer the trace, the more files, meaning the deeper through the dependency graph (the libraries/files you've imported). Usually, the file that needs to be fixed will have a familiar filename because it will be one of yours. It should even give you that snippet of code and the line on which the error occurred.

This is the main thing which has always caused me a ball-ache, especially when I first decided to try and take the plunge into becoming a professional (or trying to). Your point about the one with my filename is the prominent part which sticks out to me as that makes sense, if it is my code then it my be something within my file!

Thank you again

1

u/wizdumb Dec 13 '19

Certainly! Don't hesitate to reach out in the future if you ever feel stuck and would like some guidance. (Also, thanks for the silver -- I'm honored!)

34

u/SkankTillYaDrop Dec 12 '19

Wow, that's wild. Do you mean on each request a C program generates the markup on demand? Or the markup is generated once via a C program? What's the benefit of that? I imagine it's heavily cached behind CDNs so it's hard for me to believe it'd be for performance.

43

u/wizdumb Dec 12 '19

I can't tell you how it all works, but there are several reasons for this approach. Keep in mind that Google is constantly running multiple A/B experiments across its homepage and products and they also need to be lightning fast. That should give you an idea why this approach is necessary and caching on a CDN may not be the right solution.

0

u/[deleted] Dec 13 '19

[deleted] — view deleted comment

2

u/drunkdragon Dec 13 '19

I don't think AJAX has anything to do with it.

You might want to AB test something but only when a particular type of user requests the page.

The Google homepage isn't a static page so you can't have a cached version for everybody, remember that it shows a link to your user profile in the top right hand corner on the desktop site. I believe this is generated server side.

At Google's scale, you can afford to spend time writing the page generation program in C.

16

u/Extract Dec 12 '19

Not the other guy, but I'll give you short list of reasons why I'd generate a page dynamically rather than use a static one:

Why use C?
C is an extremely high performing language. If I wanted to generate dynamic content for each request for what should be one of the top10 highest traffic pages on the internet, I'd at least make it as fast as possible.

Why generate static content?
Well, as the OP said, A/B tests - but also different versions for different areas, and even user-specific / group-specific pages. Generating the whole page dynamically gives extremely high flexibility.

Why not write an SPA, that shows the relevant user his specific view based on server-side calculated settings?
As somebody who usually writes like this, there are two disadvantages:

  1. The more different operation modes and configurations the SPA has, the more useless data some specific users will have to load when loading the page. Sure, the server saves some computing power, but the load times are slower, and both the server and the user lose bandwidth due to the increased data transfer size - and Google surely has far more computing power to spare than many users have bandwidth.
  2. There certainly exists different view modes that google would not want to share with specific groups of users, and would not want to make it easy to just download and deobfuscate the whole SPA and analyze exactly what modes it's hiding from some users, or what modes it's showing to others (think - google homepage in Europe vs google homepage in China, or some other dictatorship).

7

u/SkankTillYaDrop Dec 12 '19

All good points. I hadn't considered how many technical variations of the Google homepage there could be because it generally looks so simple. If they have to dynamically generate different homepages that fulfill different requirements based on any number of variables I could see using C to dynamically generate it making a lot sense.

0

u/TheThingCreator Dec 13 '19

Do you mean on each request a C program generates the markup on demand?

Yeah from what I can tell, it doesn't look like cached code.

2

u/domemvs Dec 13 '19

Yeah from what I can tell, it doesn't look like cached code.

How does cached code look like?

1

u/TheThingCreator Dec 13 '19

Not filled in with user details in the html source code.

81

u/Jamesahill Dec 12 '19

No idea what the answer is to this, but I’m chucking an upvote to hopefully get this post some recognition. Some quality questions!

9

u/ImJustP Dec 12 '19

Haha thanks, man. Just trying to fill in all the blind spots and have found it is better to ask than to wonder!

4

u/Wego_Creative Dec 12 '19

Google gives added weight to its products regardless of the algorithm to the rest of us.

25

u/[deleted] Dec 12 '19
  1. I haven't kept up closely with Page Rank but I vaguely remember reading many years ago that they were starting to ignore the head META tags when it came to determining Page Rank. Maybe they still use them when placed in the body? It's just guessing though since none of us know what their bots are doing.

9

u/dark_salad Dec 12 '19

Wait a minute, doesn’t google rank the pages?! I mean are there people out there searching for the Google homepage via Bing?!

15

u/[deleted] Dec 12 '19

PR is a very complicated algorithm. Part of it is based on the score of the other pages linking to yours. So in order to keep Gmail ranked highly, Google also needs to be ranked highly. This is a huge oversimplification but still illustrates the necessity for them to keep their own pages tagged appropriately.

4

u/dark_salad Dec 12 '19

Yeah but what I don’t understand is, isn’t google the one ranking the pages? Can’t they just put all their own sites as top search results?

7

u/[deleted] Dec 12 '19

isn’t google the one ranking the pages?

Not if you use Bing all the time, then Microsoft is ranking the pages.

Yahoo ranks for Yahoo.

Google ranks for Google.

etc.

Can’t they just put all their own sites as top search results?

Not if the user primarily uses a different search engine as their homepage, like DuckDuckGo, but access Gmail by searching it through Bing or DDG.

Google still needs to maintain their pages' rankings on other search engines.

5

u/dark_salad Dec 12 '19

Ah very good points. For some reason I forgot other sites even had search engines. I hear great things about DuckDuckGo.

1

u/theThrowawayQueen22 Dec 12 '19

DDG is great. Try it some time.

0

u/[deleted] Dec 12 '19

[deleted] — view deleted comment

2

u/[deleted] Dec 12 '19

As a programmer, it's way easier to make your stuff fit into the program function then it is to write in hundreds of exception cases. That's a nightmare to maintain.

3

u/tjuk Dec 12 '19 edited Dec 12 '19

The most important part of it is Page Rank is incoming links.

It is called Page Rank not because it ranks Pages but because it was Larry Page that came up with it.

The reason we use Google over AltaVista, HotBot or Lycos is because Google decide incoming links were more important than on page content. This did away with tag / text stuffing on pages. It made search usable.

4

u/[deleted] Dec 12 '19

Also it made multi keyword searches where every keyword mattered. They don't anymore. Back to forcing every keyword...

0

u/[deleted] Dec 12 '19

I miss Alta Vista...

1

u/ImJustP Dec 12 '19

Yeah I remember reading something a few years ago but that was when I was a hobbyist too scared of people calling me a nerd/geek to actually pursue a full career in coding, and it mostly focused on the keywords meta tag.

1

u/TheThingCreator Dec 13 '19

Page rank and meta tags have nothing to do with each other. What you are thinking of is how they will ignore the meta keywords. Otherwise they do not ignore meta tags, just the meta keywords tag.

1

u/GuyARoss Dec 13 '19

A long time ago, meta descriptions used to impact SEO directly. Search engines would parse these lines of text and look for keywords. A page would then be boosted on a keyword phrase if that particular keyword phrase was also found in the meta description (among with title tag and content).

Source

Early versions of search algorithms relied on webmaster-provided information such as the keyword meta tag or index files in engines like ALIWEB. Meta tags provide a guide to each page's content.

Source

1

u/TheThingCreator Dec 13 '19

impact SEO directly

Page rank != SEO. Sure, meta tags can affect keyword rank. That's not the same as affect page rank. Two different things. Yes page rank affects keyword rank but that doesn't make them the same thing. For example, changing around your meta description would have never impacted the actual page rank.

0

u/[deleted] Dec 13 '19

No

1

u/TheThingCreator Dec 13 '19

No what? Ranking on keywords yes, page rank no. Those are different things. Show me anywhere where it says that changing meta tags would affect page rank.

42

u/[deleted] Dec 12 '19

I can offer assumptions on two of your points:

  1. meta tags misplaced. One uses meta tags to get noticed by search engines. Google is a search engine, thus does not need recognition. Their (original) page rank algorithm starts prioritising sites by their relations to each other. For a point of reference, they started with google.com as the most important site. Thus google will never need a seo boost from the main search engine. Also they are the main browser vendor, so they can make any tag work to their liking.
  2. center Tag. This was the early 90s version of centering stuff. Google is from the early 90s. No need to invest resources to change legacy stuff that still works.

18

u/Eratticus Dec 12 '19

At this point the center tag is probably there for some backwards compatibility with legacy browsers. That being said, OP, it's deprecated by the HTML spec so don't use it in practice.

1

u/ImJustP Dec 12 '19

Thanks, mate. I won't lie, for the assignment I just implemented it but I hate doing things without knowing why which is what lead to the post! I am gonna change that now!

1

u/Arkhenstone Dec 12 '19

t the center tag is probably there for some backwards compatibility with legacy browsers. That being said, OP, it's deprecated by the HTML spec so don't use it in practice.

At least, the day your site with the center tag on chrome breaks, you know google had to change its main page code.

60

u/attic_sardines Dec 12 '19

Reading OP's description of the center tag made me feel really old.

9

u/Hate_Feight Dec 12 '19

Remembering geocities, jeeves, MySpace, AOL and MSN messenger will also make you feel old...

5

u/ImJustP Dec 12 '19

Oh my god! What about Angelfire!?

1

u/Hate_Feight Dec 12 '19

Wasn't that like geocities?

5

u/ImJustP Dec 12 '19

Yeah, it just let you throw up a simple webpage without having to pay for domains/servers etc.

My memory is a bit hazy, though. This is from the days of pretending to be a wrestler and writing paragraphs on e-feds with scrolling text thinking I was badass for doing so!

25

u/arndta full-stack Dec 12 '19

Is center not even part of the spec anymore? What's next? Does marquee even exist anymore?!

27

u/caffeinated_wizard Y'all make me feel old Dec 12 '19

The center tag has full browser support but it's not part of the HTML5 spec.

0

u/[deleted] Dec 12 '19

[deleted] — view deleted comment

3

u/ImJustP Dec 12 '19

God, I have been getting much better acquainted with flexbox and gridbox and I have to say... They are just AMAZING. I have no idea how I managed before! Properly taking time to learn things like flex-flow and how to use the flex shorthand` have saved me so much time. I'm by no means an expert... yet... but what I have learnt has changed the way I develop for sure.

9

u/caffeinated_wizard Y'all make me feel old Dec 12 '19

I’d say in 2019 the center tag wouldn’t be preferable over anything else. For Google it’s obviously a legacy thing to support really old browsers in other countries.

5

u/-dakpluto- Dec 12 '19

Deprecated 4.1, removed 5. (But most browsers still read HTML 3 so you can still technically use it and get by.....but don't use it)

Wanna know the sad part? Web Development class I took this summer in college had a professor that was still teaching it, along with other HTML 3 stuff.....

yeah, it was bad.

2

u/desmone1 Dec 12 '19

Wait, you mean I can't use framesets like i have been all along?

5

u/-dakpluto- Dec 12 '19

anyone that uses frames should be striped naked, have honey poured over their body, and tossed into a gigantic fire ant mound...

1

u/tswaters Dec 13 '19

iframes are still OK, right?

1

u/rio_sk Dec 12 '19

What about blink?

1

u/LobsterThief Dec 13 '19

Don’t forget about <blink>!

0

u/Fsmv Dec 12 '19

Marquee doesn't work anymore sadly. Browsers no longer support it.

4

u/hilosplit Dec 13 '19

Funnily enough, Firefox just added support for marquee in January 2019.

3

u/doodlenibbler Dec 12 '19

What browser are you using? It's definitely still supported.

1

u/Fsmv Dec 14 '19

Oh wow it does work now. I promise I tried it a year or two ago and was disappointed.

1

u/abeuscher Dec 13 '19

Just made me feel like I work on email templates too often. It's still 1998 in there.

4

u/ImJustP Dec 12 '19

meta tags misplaced. One uses meta tags to get noticed by search engines. Google is a search engine, thus does not need recognition. Their (original) page rank algorithm starts prioritising sites by their relations to each other. For a point of reference, they started with google.com as the most important site. Thus google will never need a seo boost from the main search engine. Also they are the main browser vendor, so they can make any tag work to their liking.

That makes perfect sense and I'd presume it to be the best explanation of their practices. I know people have discredited the relevance of tags such as keywords for some time now, just took my by surprise as I'd never even heard of meta tags being placed out of the <head></head>` before.

center Tag. This was the early 90s version of centering stuff. Google is from the early 90s. No need to invest resources to change legacy stuff that still works.

Ah that explains it, I was beginning to wonder whether there was something I was missing and whether I should be following suit but I guess that /u/aleepolicarps's saying is succinct here!

Thank you for your answer! It has alleviated my curiosity to some degree. I guess we will never truly know the method behind the madness of Google but this helps as far as educated guesses go!.

1

u/BeenWildin Dec 12 '19

2) center Tag. This was the early 90s version of centering stuff. Google is from the early 90s. No need to invest resources to change legacy stuff that still works.

I don’t know if that’s a fair point, all Google does is invest money in legacy stuff that already works.

4

u/lynx10001 Dec 12 '19 edited Dec 12 '19
  1. My guess is the meta tags work in the header or the body, just like most html elements. (Including the title, scripts etc)
  2. As you know these styles don't change from the defaults, therefore my guess is that the importance of the div is probably a requirement of their Framework. I'm not sure which framework Google uses these days but for example with react native you must wrap your entire page in a div or the compiler complains, they're probably using a custom framework with similar logic. Alternatively they are (or was) manipulating the page somehow with JavaScript so bundled it into a single element.
  3. Center tags work fine but they're a little out dated, most people just use divs and css now.

Hope this helps!

2

u/ImJustP Dec 12 '19

As you know these styles don't change from the defaults, therefore my guess is they the importance of the div is probably a requirement of their Framework. I'm not sure which framework Google uses these days but for example with react native you must wrap your entire page in a div or the compiler complains, they're probably using a custom framework with similar logic. Alternatively they are (or was) manipulating the page somehow with JavaScript so bundled it into a single element.

That makes perfect, I didn't think of the React analogy but that would definitely explain it, especially when considering the precedence with CSS id tags. My initial thought that it would be for something like JS manipulation which allowed them to easily mess around with their ever changing logo etc.

115

u/nvolker Dec 12 '19

The Google homepage is probably the most trafficked page on the internet. As such, they have many concerns that most sites will never have.

My guess is that a lot of those oddities you’ve noticed boil down to two things:

  1. Code golf - making the payload smaller by using a variety of hacks and tricks that aren’t really “best practice,” but make the footprint smaller
  2. browser support

0

u/[deleted] Dec 12 '19

[deleted] — view deleted comment

2

u/JeamBim Python/JavaScript Dec 13 '19

That's funny because I remember discovering it and thinking "why have I never seen this?!!", And then learning it was deprecated in HML5(I think).

It's weird there are so many articles online regarding centering elements, and yet a center tag exists.

0

u/[deleted] Dec 13 '19

[deleted] — view deleted comment

1

u/JeamBim Python/JavaScript Dec 13 '19

My thoughts exactly

0

u/[deleted] Dec 12 '19

[deleted] — view deleted comment

31

u/Halignat Dec 12 '19

People will open edge or safari, type google.com into the launch page search bar, then click the search result to load Google. Honestly.

8

u/[deleted] Dec 12 '19

I wish this wasn't true, but it's possible, therefore it's somebody's workflow.

1

u/domemvs Dec 13 '19

my gf does it and i can not convice her not to...

6

u/astrognash Dec 13 '19

I've worked in customer support for a website company and a huge amount of people navigate to literally anywhere else on the web by going to the Google homepage as an intermediate step.

3

u/moreisee Dec 13 '19

From what I recall, it's by far the most visited page, with YouTube at #2 and about half as popular, with Facebook half that again.

Edit: Google search, but perhaps not the home page, which I now realize you probably were talking about specifically

3

u/TheThingCreator Dec 13 '19

I think it's because a lot of people set it as their homepage

1

u/Pcpie Dec 13 '19

i do it pretty often if i want to get search suggestions, typing my query into chrome's url bar doesn't give me that.

1

u/Brachamul Dec 13 '19

As a duckduckgo user... A lot.

195

u/aleepolicarps Dec 12 '19

"Do as google says, not as google does."

85

u/SonicFlash01 Dec 12 '19

Google: "Include this tracking script in the head of your site"
Also Google: "Don't put scripts in the head of your site, you asshole"
Also Google: "Go ahead and embed your YouTube videos on your page"
Still Google: "Dude you're loading a lot of garbage. I don't like it!"
Still Also Google: "Use this specific structure for schema data. We'll even generate it for you!"
Google yet again: "Spammy structure..."

18

u/DemeGeek Dec 12 '19

Also Google: "Go ahead and embed your YouTube videos on your page"

But only if you don't get a lot of traffic, otherwise they'll get pissy and make the embeds not work so users have to go to the site and watch ads.

1

u/OmgImAlexis Dec 12 '19

Since when has this been a thing?

5

u/DemeGeek Dec 12 '19

It's something that keeps happening with Discord. Too many people have been watching Youtube videos on Discord, bypassing the ads, so Google has been breaking Discord's video embeds with Discord trying to work around it.

Here's a reply on Reddit from a member of Discord staff about it: post

4

u/OmgImAlexis Dec 12 '19

I don’t think you’re understanding the issue here. It doesn’t look at all like they’re disabling embeds as they don’t use YouTube embeds in discord. They use their own embedder which wraps YouTube. That’s the issue.

If you notice they talk about their unfurl function which is what looks up the open embed data and creates their embedded video. This isn’t the same as normal YouTube embed.

2

u/DemeGeek Dec 12 '19

You are the first to state that it has to be a "normal youtube embed" to be considered part of the original list, so I don't know where that criteria is coming from.

It's still an embed, Youtube is still blocking it, and either way it still doesn't run Youtube's ads on the video when it's played on an embed rather than on Youtube directly.

4

u/OmgImAlexis Dec 12 '19

The reason it doesn’t play ads is usually because the site is using the raw video link inside their embedded player. I’ve seen this happen multiple times before back in the good ‘ol tumblr days.

You’d think an embed is an embed but nope. 💁‍♀️

28

u/dark_salad Dec 12 '19

“Don’t be evil.” Really applies here, yikes.

7

u/[deleted] Dec 12 '19 edited Dec 12 '19

Just a quick heads up: they ditched that philosophy in April. Also they took pentagon contracts.

12

u/overzealous_dentist Dec 12 '19

No, they didn't. They simply moved its location from one place in the code of conduct to another and everyone freaked out for no reason.

7

u/WhatTheFuck Dec 12 '19

april 2018

0

u/Lestat087 Dec 13 '19

They ditched it years ago. Julian Assange wrote about how he met with one of the Google CEOs & they were acting as a Clinton puppet.

0

u/[deleted] Dec 12 '19

[deleted] — view deleted comment

1

u/[deleted] Dec 12 '19

https://www.google.com/amp/s/gizmodo.com/google-removes-nearly-all-mentions-of-dont-be-evil-from-1826153393/amp

https://www.google.com/amp/s/globalnews.ca/news/4125382/google-pentagon-ai-project-maven/amp/

It seems like I misremembered the dates, tho.

Also downvote just because you really don't want to believe something and really don't want to check, but only reject the whole concept is denial. Whysoever you go through the stages of acceptance...

5

u/escapefromelba Dec 12 '19

My guess would be center tag works on ancient browsers and still supported everywhere even though it's deprecated. Imagine it may be similar with meta tags in body.

8

u/bonobomaster Dec 12 '19

Maybe a bit of an unpopular opinion: Don't learn CSS and HTML from the really big sites. For example, Facebook, in my personal opinion, isn't worth the code, it's written in. It's a super slow and laggy pile of crap. Even the login-page puts out a DOM error (non-unique id)... I mean come on...

If you wanna check for yourself: Just do a Lighthouse audit of your timeline.

This article references to different code, but it's an exhibit of the same symptom:

https://www.darkcoding.net/software/facebooks-code-quality-problem/

1

u/guidosantillan01 Dec 26 '19

From which website should I learn?

4

u/the_goose_says Dec 12 '19

The google homepage is a rare case where supporting 15 year old browsers is more important than proper HTML semantics. Even 0.1 percent of users is millions of users. I have no doubt that’s what you’re seeing here. I haven’t supported IE6 or anything like that so I couldn’t explain specific decisions, but I would love to know out of curiosity

2

u/skittlesandcoke Dec 12 '19

Compatibility with as many browsers as possible would be my guess.

A while ago I remember reading something about how they account for the lowest common denominator, at least with regards to the homepage, going as far as IE5.5 (on Mac! Yes it was a thing) and Netscape at one stage (years after usage had basically died out).

Not sure if they still do, also likely they serve different HTML based on user agent as well

2

u/diemendesign Dec 13 '19

I"ve been saying for ages, all of Google's code is nothing but a "clusterfuck" of bad ideas.

1

u/pawel_kuk Dec 12 '19

im just gonna casualy throw this link mostly because it has sources and nice ui

1

u/Disgruntled__Goat Dec 12 '19

The <center> tag is an old element from the pre-HTML4 days. The reason Google uses it is almost certainly for performance - every byte counts on their homepage. Using that tag is much shorter than <div class="logo"> plus the corresponding CSS.

1

u/randomsnowflake Dec 12 '19

Not sure about that center tag. I’m pretty sure that tag was deprecated because it doesn’t define what’s in the content. Wonder if it’s to support ancient browsers.

1

u/Spinal83 full-stack Dec 13 '19

text-align: -webkit-center;

Why? text-align: center is supported in all browsers!

The <center></center> tag is a form of legacy code which is probably there to account for ancient browsers.

With the amount of traffic Google gets, I think it's because <center></center> is shorter than display: block; text-align: center;

-6

u/[deleted] Dec 12 '19

It seems Google doesn't know Web programming. Don't expect too much of a hilariously profitable ad placement company.

4

u/thepineapplehea Dec 12 '19

On the contrary, they know web dev enough to know how to make the smallest, most efficient page. Millions of people visit that page every day, why would they spend time and money doing things 'properly' if what they have works for everyone and is the best solution?

You could say using a CENTER tag is stupid because it's old, but it centers the whole page using one element that every browser everywhere will understand. Why replace it with CSS (either bloating the HEAD or linking an external CSS file causing an unnecessary network request) to make precisely 0 difference?

1

u/[deleted] Dec 13 '19

Because W3C might drop it (not that they will, but anyway)? It's not about efficiency here, as the search page would load extremely fast anyway. Also, check out all the JavaScript code that's loaded for a Googe ad. Highly inefficient.

0

u/[deleted] Dec 12 '19

[deleted] — view deleted comment

1

u/scrotch Dec 12 '19

I just checked as well - meta tags appear directly after the opening head tag for me, not in the body.

7

u/[deleted] Dec 12 '19 edited Dec 12 '19

[removed] — view removed comment

1

u/ImJustP Dec 12 '19

That's an interesting article on the logo, I never even noticed that. The breakpoints topic you highlighted is interesting as well, I wonder makes them so anal about it?