Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

An Advanced Guide to HTML and CSS

learn.shayhowe.com

Post reply on HN
Print view View original

81–90 of 105 posts

Re: An Advanced Guide to HTML and CSS

#81

Post by why-el »

kaolinite wrote: post #19

Does anyone know of any guides or books for really advanced HTML/CSS? I find a lot of these guides target regular websites, which I have experience with, whereas I'd love to know how to create much more advanced layouts (e.g. Gmail, Grooveshark). Does anyone know where I can find information on that kind of stuff?

I would recommend Alex Maccaw's javascript Web Applications. Sure it's about Javascript, but how really big can your HTML/CSS get before you modularize? :) What I like about the book is that it explains the fundamentals of MVC in a framework agnostic way, which I think is helpful if you are trying to refactor and MVC-ize your code base without throwing in a heavy dependency like Backbone or Spine.

Re: An Advanced Guide to HTML and CSS

#82

Post by mixmastamyk »

codegeek wrote: post #46
shay-howe wrote: post #42

Earlier quoted context omitted.

You're correct, thanks for the answer here. Feedback has been hot and cool on them, still trying to decide if they are worth it or not.

Btw, Does not fade away in IE8 with hover.

IE8 can't do anything fancy.

Re: An Advanced Guide to HTML and CSS

#83

Post by krsunny »

pault wrote: post #35
kaolinite wrote: post #19

Does anyone know of any guides or books for really advanced HTML/CSS? I find a lot of these guides target regular websites, which I have experience with, whereas I'd love to know how to create much more advanced layouts (e.g. Gmail, Grooveshark). Does anyone know where I can find information on that kind of stuff?

Last time I checked, gmail was still using tables for layout.

And grooveshark uses bootstrap

Re: An Advanced Guide to HTML and CSS

#85

Post by nilliams »

kapowaz wrote: post #76

> One functionality of CSS often abused without awareness are selectors [...] How elements are selected within CSS affects performance, including how fast a page renders This assertion used to be thrown around as one of the supporting arguments for using OOCSS, but I'm sure I later read that it was largely debunked; the performance implications were negligible and so it was just making CSS less legible/maintainable f…

>> This assertion used to be thrown around as one of the supporting arguments for using OOCSS.

I've never seen selector performance used as an argument for OOCSS.

>> ...and so it was just making CSS less legible/maintainable for no real reward.

That's a pretty broad sweeping statement that I think you'd be very hard pressed to back up. OOCSS is all about maintainability. Legibility is debatable, but I've seen OOCSS examples that are just as legible, if not more so, than old-school CSS (leaning more on tagname selectors/DOM structure - if that is the opposing stand-point, sometimes it's hard to tell what OOCSS dissenters are really arguing against).

Re: An Advanced Guide to HTML and CSS

#86

Post by pippy »

kapowaz wrote: post #76

> One functionality of CSS often abused without awareness are selectors [...] How elements are selected within CSS affects performance, including how fast a page renders This assertion used to be thrown around as one of the supporting arguments for using OOCSS, but I'm sure I later read that it was largely debunked; the performance implications were negligible and so it was just making CSS less legible/maintainable f…

The only CSS performance issues I've seen are images causing scrolling not to be smooth.

Re: An Advanced Guide to HTML and CSS

#87

Post by stillalowbie »

The first thing that the chapter regarding Performance and Organization takes up is establishing a structure for your CSS. Whilst I'm well aware that the approach made towards separation of similar classes into multiple files is a good one, I've seen it argued that the usage of @import or linking multiple stylesheets has a significant impact on performance. The guide even mentions the important practice of combining all styles into one stylesheet in order to avoid multiple http requests, but only later on, in a different section. I don't think the first section does a good job at stressing this. It ought to at least mention that some form of preprocessing should be present here, if only to minify and combine the files. To me, it seems a bit counter-intuitive that this first section of the guide could be interpreted incorrectly by a newcommer (''I should separate everything and include it all in a nice, fancy list of link tags!'')

Just some feedback. I must say that I feel like the guide so far is representative of most of the gems I came across whilst trying to improve my webdev, doing small-company websites on the side whilst studying, starting with some basic HTML3/4 and CSS2 knowledge and working on 3-4 projects over the course of 2 years. It's what I now wish I had known before diving into my first project.

Re: An Advanced Guide to HTML and CSS

#88

Post by chewxy »

bzalasky wrote: post #22
kaolinite wrote: post #19

Does anyone know of any guides or books for really advanced HTML/CSS? I find a lot of these guides target regular websites, which I have experience with, whereas I'd love to know how to create much more advanced layouts (e.g. Gmail, Grooveshark). Does anyone know where I can find information on that kind of stuff?

Learn a front-end MVC framework. JavaScript plays a huge roll in creating applications like Gmail or Grooveshark. Addy Osmani's blog is probably as good a jumping off point as any ( http://addyosmani.com/blog/ ).

Funny. Due to a CDN error yesterday I was forced to use GMail on HTML mode.

Guess what? Even after the problem has been fixed I'm still on HTML mode. It is so much faster, and more responsive than the javascript version.

Why people make complex javascript frontends, I will never understand.

Re: An Advanced Guide to HTML and CSS

#89

Post by mdarens »

jaredmcateer wrote: post #64
anonymouz wrote: post #21

What is the deal with those orange buttons that hover on the right hand side of the code snippets? They look like they should be interacted with, but when I hover my mouse over them they fade away. That's terribly irritating.

Yup I definitely tried to click them a couple times... they don't fad away for me in Chrome, they just disappear, left me wondering if I needed to play some sort of game to get to them properly.

They don't fade away in Chrome because he's using a pseudo-element in the form of content: attr(title). Gecko supports transitions on generated content and WebKit does not.

Also, looking at the ::selection example, it should mentioned that it's not safe to group vendor prefixes in the selector portion of a declaration block, as, unlike with properties, the whole block will be skipped if an unrecognized selector is encountered by a UA's CSS parser.

Post reply on HN