News for hackers. Stuff that matters.
Re:An Advanced Guide to HTML and CSS by kaolinite on Monday January 14, 2013 @12:24PM (#5055529)
I think the best way to describe the difference between a 'regular' website and the advanced layouts I talk about is that an 'advanced layout' often looks similar to a desktop application.

Remember the first BaseCamp? Given designs, I reckon I could build the front-end for that. However given designs for GrooveShark, icloud.com or the new spotify web-app - I wouldn't know where to begin.

I've tinkered with responsive designs, Backbone, LESS, grid layouts and such (by the way, I will check out Compass, it looks interesting) - yet still I feel like I lack the knowledge to build more advanced apps.

Re:An Advanced Guide to HTML and CSS by at-fates-hands on Monday January 14, 2013 @12:59PM (#5055705)
Because front-end development is changing so fast, what I've had to do is simply start looking at website galleries and find sites where I like how they've implemented certain features.

Then I try and replicate it, switch it up and work with it. For me, this is a lot better than waiting for someone to show these techniques in a basic tutorial.

You might interested in learning about parallax scrolling as well. It's getting more popular, but its Achilles heel is its not mobile friendly at all.

I'll keep the list short: http://html5gallery.com/ - this is one of my favorites since it gives a review of each site and what the developer could've done better. http://webcreme.com/ http://cssremix.com/ http://www.webdesign-inspiration.com/ http://www.designfridge.co.uk/

Re:An Advanced Guide to HTML and CSS by adamauckland on Wednesday January 16, 2013 @04:34AM (#5066088)
It's actually not that hard. iCloud and GrooveShark are quite graphic-heavy which gives them that extra edge. Frontend technologies are pushing forward at an incredible rate.

Have you played with Sencha Touch or Google's Angular JS or Ember or Backbone?

These are all great starting points and will teach you a lot about how to structure your code, but for anything large like iCloud, you're going to probably need to write your own libraries because nobody else is doing exactly what you want.

Get good at using jQuery to animate stuff, then re-work your UI using CSS3 transitions (because jQuery suffers performance issues on mobile).

Design for mobile first and scale upwards; by design I don't mean PSDs I mean open an HTML document and just start chopping it up.

Re:An Advanced Guide to HTML and CSS by mnicole on Monday January 14, 2013 @12:48PM (#5055646)
I posed what I think is a similar question to a friend of mine that I'm designing a node.js app with. I thought that being in JavaScript, it would handle everything a lot more fluidly, like web apps such as koding.com. In reality, it's just another MVC framework entirely based in JS (let me know if I'm phrasing this wrong).

I'm unsure if for the type of apps we're talking about it's just the way they handle the loading of their site or if it's the framework it is based upon, but he forwarded me to Meteor (http://meteor.com/) and told me that that was probably what I was looking for.

If someone could chime in on this - and sorry for being so obtuse - I'd be super grateful.

Re:An Advanced Guide to HTML and CSS by nbashaw on Monday January 14, 2013 @12:51PM (#5055661)
It's actually simpler than you think - just use a lot of absolute positioning. Inspect the source code of grooveshark and gmail to see how they do it.