Front End Review: Digg.comAugust 5, 2013 -
Digg.com has gone through a few massive changes in this latest iteration. If I remember correctly Digg was bought-out and completely revamped in a number of weeks! Let’s have a peek under the hood to see what there is to learn from the front end code on this site.
At its peak (Digg v3 I believe) this site was pulling in over 35 million unique views per month. I wonder if there are some massive learnings on the backend to make for the fastest site possible. It’s a super clean one-pager. I’m not logged in, just looking at the HTML, CSS, and JS.
Thoughts in point form: First the Head:
- I see from comparing the source to the inspected html that they use modernizr
- I’ve never seen the Apple iTunes meta tag before! Kinda cool. It seems like it’s for triggering prompts on iOS to encourage app downloads (more info: http://davidwalsh.name/apple-itunes-app)
- The Meta viewport has a set width: <meta name=”viewport” content=”width=1280″> which seems to be based on something like the screen size (rather than browser size)? There’s some server side fun going on here. The experience on my mobile is much different. I didn’t play with this too much, but switching the User Agent didn’t have much effect on this.
- I’ve seen people deal with the Apple status bar in different ways before; but this meta tag (<meta name=”apple-mobile-web-app-capable” content=”yes”>) has to be the best. More info
- Social sharing is massive for this site, so naturally it uses Twitter and Facebook Open Graph meta tags.
- The meta application-name and msapplication tags are for Windows 8 tiles and context menus I believe.
- This site has Meta keywords, which surprised me. Last time I checked no search engines used or planned to use this tag for indexing.
All in all that’s a lot of neat attention to the head of the page.
Now some HTML thoughts:
- A bunch of the tags on this site have the XHTML /> self closing slash instead of the HTML5 close without the slash. I wonder if this has to do with the speed of creation, the CMS, or if it’s old habits. It’s not wrong so far as I know, but not needed.
- I’m really only inspecting the home page, but the Digg Reader page has this very nice animated gif.
- The logo is the H1. Makes sense on this page since it’s basically a content aggregator!
- There’s very little indenting on the code. I wonder if this is the CMS, or the way builds happen. Some tags are actually broken up on multiple lines in a weird way as well.
- This site uses HTML5 elements like header, element, section etc.
- Itemscope, itemprop, and Itemdata are used for highlighting semantic data to search engines (info) – I’ve never heard of this before! Cool.
- This site makes lots of use of HTML5 data- attributes for tracking diggs, social shares, and positioning (which changes non-chronologically as time passes. Some stories stay sticky, then will pop down several positions; a smart way to give control using semantics)
- Heh, even though I’ve been using this site for over a year I didn’t realize there was a link to other stories from this source. On that page there’s a really nice bit where you need to scroll up to see a list of categories: http://digg.com/source/psmag.com. There are similar links for tags: http://digg.com/tag/technology
- I now see when looking for those links on the front end that hovering over an <article> makes the source and tags look like links, as well as showing the CTAs. Huh!
- There is a fun humans.txt http://digg.com/humans.txt which links to the about page
- A nice use of the <a> rel=”tag”! I’ve never seen this actually being used. More info.
- This site uses lazy load for images. With high traffic this safes a ton of traffic. I remember hearing some discussion on an early version of digg: They removed the small 16px avatars of the submitter of stories. The resulting savings in bandwidth were insane. I wish I could remember the stat!
- There are hooks and hints in the CSS that suggest this site supports very old browsers!
- There are hgroup tags on the site. Very recently this tag was deprecated. This doesn’t really mean anything; there’s just no semantic meaning. Essentially this is the same as wrapping titles in a div. The fact it’s here still means one of two things: no one has removed it yet, or that it has meaning to developers.
- This site uses 5 levels of title tag (no <h6>)
This site uses <strong> and <b> – I dug up a fresh reminder of the semantic difference:
bis a style – we know what “bold” is supposed to look like.
stronghowever is an indication of how something should be understood. “Strong” could (and often does) mean “bold” in a browser, but it could also mean a lower tone for a speaking program like Jaws (for blind people).
I’m not going to look too closely at the JS, just a couple noticements:
- Bootstrap modals module is called
- Cloudflare CDN copy of Lodash (http://lodash.com/)
- Google APIs jQuery with fallback. I really like this technique. I wonder how often that fallback is used!
- The Mousewheel JS thanks a guy for some “pointers” – groan! Haha
To look at the minified CSS I first used Dreamweaver to apply source formatting (I couldn’t see a quick way to do this in Sublime, and wasn’t in the mood for Package hunting). I’m not going to take the time to track down items I see styles for to see how they work. This would be profitable, but I don’t really want to spend much more than an hour on these reviews (heck, it’s my favourite language, but I’m mostly spot-checking here);
- Around the article images is a CSS property called User Select. It prevents something from being copyable! More info.
- Most of the styles are hyphen-delimited, but every so often there’s a camelCase (maybe it’s called Hungarian, I forget) class like copyrightHolder. This isn’t really an issue, just interesting.
- There are some styles on ID, but most are on classes
- I like the class name “font-stack-etica”
- Digg CSS doesn’t have the final ; on rules. This may happen on build / minification.
- The CSS reset is pretty exhaustive, I wonder how many of these things will never be used; like <legend> or <dfn>. Better safe than sorry maybe?
- Box-sizing:border-box is only used on text inputs!
- I kinda want to investigate the responsive / mobile methodology more; but I’m seeing media queries for high pixel density screens like “@media(-webkit-min-device-pixel-ratio:2), (min-resolution:2dppx), (min-resolution:192dpi)”.
- Media queries are done by module right after the module is declared; not bunched up.
- There doesn’t seem to be any order to the classes, or if there is it isn’t 100% enforced. This makes me as an often-messy right brained coder feel validated, phew! 😉
- This isn’t a truly responsive site; so it’s no surprise that there are lots of px values.
- Like every other developer I know the z-indexes are almost always less than 5 or more than 9000!
- The khtml vendor prefix is supported in some places but not others. This makes me think code gets recycled, or the requirements were a bit loose? Speed and team size may play a role here.
- There’s a bit of repeated CSS like for .modal-footer::before, .modal-footer::after – it’s actually declaring a clearfix. The way it’s showing up makes it obvious it didn’t use Sass @extend. I wonder if this style sheet is built from modules.
- I think the CSS is a bit old (much probably hasn’t been touched since launch in Aug 2012) – border radius for example needs no vendor prefix anymore. This may be another hint that Compass isn’t used (so maybe not Sass either)
It was fun to dissect this site. The site works great; super fast and is very clean. All in all it’s very nice code, and I gleaned quite a few gems here. I love the final comment in the HTML:
|<!– built with love by amateurs! –>
Great job! My favourite version of Digg by far.
Categorized in: Front End Review
This post was written by ArleyM