11 ms·
Apple Is Using Sass, And They’re Doing It Wrong
Today Apple redesigned the homepage of the online Apple Store. I was having a look at their code and I found out some interesting code smells that apparently even the most skilled developers will commit.
- kaelig 13y agoToday Apple redesigned the homepage of the online Apple Store. I was having a look at their code and I found out some interesting code smells that apparently even the most skilled developers will commit. If one of their developers is reading this I am happy to help with Sass architecture and best practices.
- coldtea 13y ago>I was having a look at their code and I found out some interesting code smells that apparently even the most skilled developers will commit. Your use case is not Apple's use case. They're not designing Flickr, some blogging service or some news site. The smells are there for a reason. The pages and styles are not to be reusable -- they are meant to be easily replaceable on a per page / section basis.
- jonknee 13y ago> The smells are there for a reason. What reason is there for CSS that is commented out? Or for redundant prefixes? Or for debug to be left on and to have a bunch of comments and paths from the build structure?
- richardwhiuk 13y ago>>> Or for debug to be left on and to have a bunch of comments and paths from the build structure? So you can debug problems being seen only in the production version?
- jonknee 13y agoLet's hope Apple's not that lazy.
- kaelig 13y agoThen they may want to use Sourcemaps in Sass 3.3 alpha. But production assets should be minified for better performance.
- coldtea 13y ago>But production assets should be minified for better performance. Only if you have measured both, and found that minifying makes a difference on the scale you care about. Which might very well NOT be the case with Apple's site. They have tons of images, a lot of them very high quality and size (even retina). So a difference of a few K in the CSS would not even register in the assets transfer time. E.g you should now sweat 10K vs 20K CSS, when you have 2MB of images to serve in the same page. Oh, and it would only matter if they are not transferring assets as gzip in the first place -- in which case minifying is mostly redundant.
- eridius 13y agoWhat redundant prefixes? The article asks if they're really targeting users on iOS 3.2. And I would have to assume the answer is yes, of course they are. For a tiny amount of extra CSS they allow people using old devices and browsers to still give them money. It's a no brainer that they would leave the prefixes in!
- seivan 13y agoNext time some person says that CSS is good enough and SASS/SCSS is unnecessary. Yeah this.
- kamjam 13y agoEach have their place, and if you can't write good good CSS then your SASS is going to be just as rubbish.
- msy 13y agoI think a lot of this is more that apple doesn't give a damn about reuseability, they care about perfection. If the promo after father's day has an image that goes over the border by 3px, they'll write it from scratch.
- kaelig 13y agoThey care about perfection on the surface as well as below the surface. This release doesn't meet both these criteria.
- tptacek 13y agoI don't think it's actually true that Apple cares about "perfection below the surface".
- outside1234 13y agoespecially where the surface is invisible. its all about the shiny.
- Hontano 13y agoIt might not be perfect, because what ever is? But the interior of the Macbook Pro, Mac Pro, and other hardware suggests otherwise: http://www.ifixit.com/Teardown/MacBook+Pro+15-Inch+Retina+Display+Mid+2012+Teardown/9462/1 http://www.ifixit.com/Teardown/MacBook+Pro+15-Inch+Retina+Di... Similarly, the filesystem on OS X. As far at the Mac parts go, while the BSD folders have visibility toggled off.
- rednukleus 13y agoOh give me a break, Apple products are nowhere near perfection. They do plenty right, but plenty of their stuff is awful (just like every other company out there). Finder is awful. The calendar and notes app are awful. One of the ugliest things about Apple is the constant insistence by users that everything Apple does is perfection.
- coldtea 13y ago>That’s 7 levels deep (sic.). On top of being quite inefficient and generating a large amount of code, these styles are completely un-reuseable. That's kind of the whole idea. It's supposed to help to not mess other parts of the page when they change something. Their page design is not supposed to be overall consistent and re-usable. They are supposed to be able to do long or surgical changes to any individual section at whim, without affecting anything else -- having sections with a unique new look weeks before updating anything else, or creating special purpose looks for different sections. For this purposes, reusability and less nesting would be a nightmare.
- kaelig 13y agoI know Apple has to deal with a lot of legacy code and wants to avoid conflicts. Their architecture is very good but I believe it could still be better (at least they stopped using IDs in their CSS). Nesting (especially this deep) is usually a bad idea. Have you heard of BEM? This methodology helps building reusable modules without polluting the global scope.
- arrrg 13y agoIt’s not only about legacy code. Apple’s website layout (especially on all the important product pages, certainly also some overview pages in the store) is all highly custom, much more like a magazine than a website. That’s on purpose. That stuff is supposed to look different. Making the stuff reusable wouldn’t even make sense. (Though I do not want to claim that what Apple is doing here is a good way to go about things.)
- russelluresti 13y agoEven if you don't care about reuse, wouldn't it make more sense to just do a selector like ".my-completely-and-totally-unique-class-name" instead of nesting so many levels deep?
- dkuntz2 13y agoNot always. That could just add clutter to the html. Or they might not have permission to edit the html (because it's mostly generated by other tools, and they might be in a weird setup where design doesn't touch the html, look, I don't know, it's Apple...)
- swalling 13y agoWe've started experimenting with Sass for Wikipedia as well, and it's now in MediaWiki core. Check out mediawiki.ui in the core resources (git.wikimedia.org). Right now we're only using it for our upcoming signup/login redesign, but it's available for use elsewhere and will probably start popping up on other interaces. We debated whether to even include the Sass files and associated errata at all though, to be honest.
- rquantz 13y agoEveryone is doing something wrong. I'm starting to wonder about using checklists for deployment (yes, your deployment should be automated. You still have to go through the checklist at least once). There are lots of them out there, but they seem pretty pretty general, mostly. There are also a lot that are internal to a given company, used for a specific application. It seems like there should be an intermediate level, though. Just like any OSS project is expected to have a readme and a changelog, it should also have a CHECKLIST.txt. Drop it into your checklists directory (or have a script that collects them for you) when you add a library to your project, and go through them all before releasing.
- mddw 13y agoWhat is wrong is that I can't zoom on your website. Typos won't scale. It's really a big accessibility problem. I can't read this article without using the Chrome inspector to change styles. And I'm far from being visually Impaired. Sorry, but it must be said.
- onemorepassword 13y agoZooms just fine in Firefox. Seems like a Chrome issue to me, afaik no site should be able to override zoom.
- kaelig 13y agoThanks very much for this feedback. I removed this limitation and you can now zoom in. I am very sorry, as this is something I've been willing to fix for a long time.
- saraid216 13y ago> this is something I've been willing to fix for a long time I'm guessing English isn't your native language, so this is a diction note: You should say "I've been wanting to fix". "willing" is strictly correct, but it conveys that you've been waiting for someone to ask you to fix it. "wanting" conveys that you knew about the problem but hadn't found the time to deal with it. Hope that helps.
- asveikau 13y agoNitpick: your explanation works for the far more common term "willing", an adjective. But, through it may sound awkward and very few people would use it this way, could it not also be the participle of "to will"? In this interpretation the use of "willing" is totally correct. (Also, before saying that I've written this out of some foreign notion of English and that I just wouldn't understand, my own native language is English.)
- qu4z-2 13y agoIt's technically correct, but it sounds weird and non-native to me. It requires me to jump through mental hoops to explain how it makes sense. For easy communication, I'd recommend sticking with "wanting" in this situation. (though I'm not averse to using awkward phrasings or the like in casual situations where clear communication isn't the number one priority. At the moment I'm on a crusade to bring back "thrice" and {h,th,wh}{ence,ither}. )
- nwh 13y agoI don't think Apple is doing anything right on their website. I've recently come across parts of it built in 2006 on perl scripts, running hand in hand with the AppleID code running today. The backend must be horrifying.
- deleted 13y ago[deleted]
- danielweber 13y agoThis article would be improved tremendously if you told me what Sass was.
- kaelig 13y agoYou're right, since the audience reading the blog is usually a crowd of developers I did not think I should mention it. Sass is a CSS preprocessor, used for better stylesheet authoring. You may find more information here: http://sass-lang.com/ http://sass-lang.com/ I also added a link to the Sass website in the first part of the post.
- ambiate 13y agoThis is off topic, but in the recent months there has been an influx of these informative blog posts with animated gifs that are not really relevant to the information. Is this just a side effect of being a Tumblr user/community member? The more snarky pictures, the higher your view count/loyalty? I ask, because they are distracting and shred any seriousness laid out in the article. Some of these articles are rich in content, but reading them at work with flashing/animated nonsense feels like I am viewing Reddit to people passing by.
- fusiongyro 13y agoI hate to say it, but I agree completely. Forgive me for wanting engineering articles to look like... engineering. I wonder if this is just a generational thing. I don't have a bucket full of GIFs to drop on an article. It seems to be tapering off lately, but it used to irk me greatly when a technical blog article would have a bunch of random photos stitched in that had absolutely nothing to do with the content.
- acdha 13y agohttps://insouciant.org/tech/network-congestion-and-web-browsing/ https://insouciant.org/tech/network-congestion-and-web-brows... had me thinking the same thing: useful post, better with a text-only view.
- outside1234 13y agoIs this any surprise from the team that takes the store offline to add products?
- freehunter 13y agoThat's more marketing and hype than technical limitation.
- kaelig 13y agoThere actually used to be a technical reason for it. Updating the servers all over the World required a propagation delay. Nowadays I don't know.
- currysausage 13y ago> Your code is so much better than most Fortune 500 companies, which is why hundreds of developers (perhaps more) are viewing the source of Apple.com ... Let's hope these hundreds of devs don't look too closely. Referencing 11+ seperate JS files in <head>, among them unminified libraries, isn't exactly best practice. They violated all the rules: 1) Combine! 1 CSS + 1 JS are usually enough. 2) Move JS to the bottom if possible! 3) Minify! (I'm talking about www.apple.com, not the store.)
- mechanical_fish 13y agoThings that Apple's customers care about include: Whether the website reliably displays on their device. Whether or not they can successfully browse and buy Apple's latest products. How fast the site loads. Things that Apple's customers don't care about at all include: The code. Or whether or not that code "smells". This would be an interesting story if it spoke in terms of something important. "Here is how Apple could probably boost sales by 0.1% by optimizing their SaSS" would be a good story. "Here is how to make the Apple Store load 25% faster by optimizing its SaSS" would be a good story. But "here is how Apple could make their SaSS more aesthetically satisfying to the 0% of visitors who will pay more to read higher-quality code in the Web Inspector" is, at best, an academic exercise. Production code exists to solve problems, and its quality is not merely a function of the code itself, but of the time constraints, the budgetary constraints, and the magnitude and urgency of the business opportunities. How many millions of dollars of product did Apple's "bad" SaSS sell in the time it took to critique it?
- kaelig 13y agoI agree that code should not be a goal in itself, but you miss the point. Apple is preaching engineering excellence through their campaigns and products. In the Apple World, the quality of a product is not something you assess only depending on the money it makes.
- racl101 13y agoSeems like everyone wants to make a name for themselves by knocking on others on HN instead of showing their own awesome work.