Hacker News Reader

Comment by kaolinite | Hacker News Reader

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.

View on HN

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/

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.

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.

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.

Reply on news.ycombinator.com