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

91–100 of 105 posts

Re: An Advanced Guide to HTML and CSS

#91

Post by juddlyon »

why-el wrote: post #81
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.

I found this book to be very helpful as well. The chapter on testing was outstanding too.

Re: An Advanced Guide to HTML and CSS

#92

Post by skeletonjelly »

chewxy wrote: post #88
bzalasky wrote: post #22

Earlier quoted context omitted.

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.

Really? I find my usage is faster using keyboard shortcuts. I can clean out new mail in a matter of seconds.

Re: An Advanced Guide to HTML and CSS

#93

Post by fernly »

sergiotapia wrote: post #6

Lovely website! I always kick myself when I'm two weeks into a project and my CSS is starting to get unwieldy. Keeping CSS rules clean and well thought-out pays for itself in the long run, I know this; yet - for some reason I don't follow my own advice. Hehe. Edit: Another great website with no fluff and pure awesome content is www.htmldog.com. I learned about HTML and CSS there when I was a wee lad, helped me grok f…

I disagree on "Lovely" -- I find it hard to read. Dark-gray text on light-gray background throws away several levels of contrast. I had to ctl-+ twice to get a comfortable type size. And the wide blue nav-band on the left is just a waste of space once you get past the second paragraph or so.

Re: An Advanced Guide to HTML and CSS

#94

Post by rattray »

kaolinite wrote: post #27
bzalasky wrote: post #22

Earlier quoted context omitted.

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/ ).

Sure, I've worked with Backbone and advanced JS - this isn't the problem. What I'm talking about is the rich, fluid layouts that these sites have and which distinguishes them from a 'regular' website. Edit: changed Bootstrap to Backbone - always get those two mixed up.

Surprised nobody here has mentioned Google Web Toolkit yet. It's the tool Google uses to build interfaces like Gmail and (I believe) Docs. Freely available: https://developers.google.com/web-toolkit/ That said, it's not something I would want to use myself (not a Java fan).

It's also worth noting that Gmail especially appears to rely very heavily on Javascript for positioning and styling, rather than pure CSS. Many elements have, eg; `style="width: 123px"`. This is a practice I strive to avoid, so it's interesting to me that Google makes such use of it.

Re: An Advanced Guide to HTML and CSS

#95

Post by bryanwong »

braveheart1723 wrote: post #65
kaolinite wrote: post #27

Earlier quoted context omitted.

Sure, I've worked with Backbone and advanced JS - this isn't the problem. What I'm talking about is the rich, fluid layouts that these sites have and which distinguishes them from a 'regular' website. Edit: changed Bootstrap to Backbone - always get those two mixed up.

Try http://bradfrost.github.com/this-is-responsive/

Great!

Re: An Advanced Guide to HTML and CSS

#96

Post by kapowaz »

nilliams wrote: post #85
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 e…

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

Harry Roberts is one of the most vociferous proponents of OOCSS, and he has written about it a few times, notably here: http://csswizardry.com/2011/09/writing-efficient-css-selecto...

> That's a pretty broad sweeping statement that I think you'd be very hard pressed to back up.

I'll admit it's an opinionated statement, but I don't think that in itself makes it invalid. Opinions are certainly divided when it comes to how to structure CSS selectors, and I am firmly in the camp that OOCSS is bad stuff.

I've had a half-baked article on the whys of an alternative structure to OOCSS drafted for about 18 months now, so I guess it might be time to dust it down and fully write it up.

Re: An Advanced Guide to HTML and CSS

#98

Post by guynamedloren »

I can appreciate the layout, organization, and design of the site (as a frontend developer myself, this is very well executed), but personally, I have an immensely difficult time learning from a structure like this:

Stuff the whole thing with formal copy coupled with lorem ipsum placeholder text, and I can't force myself to endure the boredom through the first lesson. I have a similarly difficult time learning by reading textbooks (of which this guide feels reminiscent). It just doesn't click for me, but it does seem to work for many, many people.

Re: An Advanced Guide to HTML and CSS

#99

Post by Already__Taken »

joshmlewis wrote: post #55
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 think I get what you're asking here. I work for a startup as the sole front-end guy and we have a mess of SASS/JS. It was never really rebased since the beginnings and definitely wasn't structured for performance, reusability, or neatness. I'm going to be reorganizing it soon and I'm reading up on things like this, object oriented CSS, and SASS best practices. There's a big difference from creating a simple/moderat…

You should have a look at this 'Big CSS' talk.

www.youtube.com/watch?v=R-BX4N8egEc

Post reply on HN