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

41–50 of 105 posts

Re: An Advanced Guide to HTML and CSS

#41

Post by shay-howe »

eranation wrote: post #18

Looks great, and reading the first lessons shows it's also written well and very useful. One small question, why did you chose a non responsive layout? It is pretty unreadable on mobile (at least for me). I'm sure it's work in progress, but this is the first thing I've noticed. Again, thank you for posting (and creating) I find it useful and looking forward for the next chapters.

Making the guide responsive is an absolute must, and something I am looking to do right away. For now I just wanted to get it out there and start collecting feedback.

Thank you for the kind words!

Re: An Advanced Guide to HTML and CSS

#42

Post by shay-howe »

dominicrodger wrote: post #24
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.

I'm pretty sure they're just markers telling you what the code is an example of, so they get out of your way when you hover over the code.

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.

Re: An Advanced Guide to HTML and CSS

#44

Post by pbhjpbhj »

wheaties wrote: post #23

I thought image files were already in a compressed format and the gains would only be seen for extremely large files (think MB in size.) Is this really needed for mobile first design? Honest question.

The main thing being discussed on the page is optimisation of compression (http://learn.shayhowe.com/advanced-html-css/performance-orga...). They mention gzip, and yes it's not going to gain you much (and can lose) for small files or particularly gifs (that already use similar compression AFAIR).

Optimised compression is re-compression of the images, e.g. applications like pngcrush or optipng take a brute force approach and try several different compressions of PNG (all lossless) and give you the best one. Same approach can be taken for JPEG, see eg smush.it, re-compressions here as I understand it provide the same final image data and so this approach differs (and is complementary) with using a Save-for-Web tool in your graphics program.

Best thing IMO is to try something like Google's Pagespeed / Yslow / showslow / webpagespeed / gtmetrix / ... and see if it will give a worthwhile gain on paper - then test with some actual web clients.

I'd say mobile-first is going to be more focussed on bytes than those sites targeting primarily desktop users. I've never seen any metrics on rendering speed of different compression regimes though - small files that are doubly compressed seem like they might take longer decompressing than any saving you'd make in downloading.

Re: An Advanced Guide to HTML and CSS

#46

Post by codegeek »

shay-howe wrote: post #42
dominicrodger wrote: post #24

Earlier quoted context omitted.

I'm pretty sure they're just markers telling you what the code is an example of, so they get out of your way when you hover over the code.

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.

Re: An Advanced Guide to HTML and CSS

#47

Post by stan_rogers »

wheaties wrote: post #23

I thought image files were already in a compressed format and the gains would only be seen for extremely large files (think MB in size.) Is this really needed for mobile first design? Honest question.

There's compressed and there's compressed. Two PNG-8 images may be perceptually identical (or at least close enough that youd need to overlay and switch between them to see the differences) but one has a 16-color palette and occupies less than 1K (and may be neatly tucked into a stylesheet as a data URI, saving a request) while the other is over 20K. Some JPEGs can barely take 4:1 compression, while others can stand 20:1 without artifacting. It depends on the amount of detail and local contrast. (Oh, and killing any extraneous EXIF data can save huge amounts of space without affecting compression.)

Is this really needed for mobile first design? I'd be inclined to say that it's more important for mobile-first since data transfer tends to be slower and more expensive. Remember data caps, whether hard or soft, and overage fees. Every byte you can save is worthwhile to a mobile user. Think of them as the modern equivalent to a dial-up user whose host connection is a long-distance number.

Re: An Advanced Guide to HTML and CSS

#48

Post by wmeredith »

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.

I would say that ignoring implementation dogma and going for the best solution to a problem definitely falls under advanced development. It's certainly not something you see coming from developers with a few flavor of the month tutorials and maybe a site build or two under their belt.

Re: An Advanced Guide to HTML and CSS

#50

Post by asciimo »

SCAQTony wrote: post #37

It use to be the old teaching the young, now it's the young teaching the old. As an old guy I like it.

Hear, hear. That's exactly the nature of my intended comment. There's a disadvantage to being an old Web veteran, in that you tend toward the grooves you have created over the years.
Post reply on HN