Am I the only one who feels totally left behind with client side programming?

[chatmasta]

I feel like ever since I stopped being such a development nerd and started using server side programming to make $$, I've lost touch with the client side world. All this jQuery, AJAX, HTML5, CSS3 business is way over my head.

Anyone else feel the same way? I'd like to learn all of it (also, node.js looks pretty sweet), but it seems a bit daunting. Anybody care to point me in the right direction?

 

[marketer23]

I know some basics of jQuery, but it's probably best to start with live examples...
Tutorials:Live Examples of jQuery - jQuery JavaScript Library

hope this helps

 

[dchuk]

html5 and css3 is basically just fluffy buzzwordery, shit hasn't really changed that much.

As for Ajax and JQuery, if you can code well (which it appears you can) then you can learn it. As with anything, just pick a project to learn with. Given your skills, you could build a crawler that fades in updates with ajax on the screen. Would be a neat effect and will be a good thing to learn a few different techniques with.

 

[Sonny Forelli]

JQuery simulated user interaction = #WINNING

 

[shawnhag]

live examples then all i do is check the HTML source to see how difficult it is to "code in" the code to the page...very frusterating

 

[coffeebean]

Client side JS is easier now than ever thanks to libraries like jQuery. The learning curve isn't bad at all, especially if you've already done some basic CSS and JS stuff.

 

[justo_tx]

I feel like ever since I stopped being such a development nerd and started using server side programming to make $$, I've lost touch with the client side world. All this jQuery, AJAX, HTML5, CSS3 business is way over my head.

Anyone else feel the same way? I'd like to learn all of it (also, node.js looks pretty sweet), but it seems a bit daunting. Anybody care to point me in the right direction?

Fuck yes, I've lived in databases and server side code so long even simple client side stuff is pain in the ass. I'm always looking shit up and even when I get it working I just know that the code isn't anywhere near as elegant (not really important) or efficient (very important) as what I should be aiming for.

I've been trying to convince myself to do my next project in javascript+node.js only, but then I realize that the code I use to build the site has zero to do with ROI and profitability and I think I should stick with what I know and just take care of business.

 

[SeriousDevver]

CSS3 and JQuery actually make a lot of things simpler. JQuery is full of shorcuts - you no longer have to create exceptions for specific browsers or do stuff like write your own XMPHttpRequest handlers, just use .ajax and you're done. Among other things, CSS3 lets you create design stuff that used to require painful hacks or inline images like rounded corners, shadows, gradients easily.

This guide sums up everything HTML5 - Dive Into HTML5. One of my clients couldn't believe it when I built a form with (simple) validation with inline dynamic error notifications in a few minutes.

Used to be cross browser compatibility was huge, but now that everyone of them is following standards it's less of an issue, especially now that IE6 is almost dead and IE7 is shrinking by the day.

The most complicated new development in front end work is performance optimization - used to be all you had to do was make sure all your jpgs and gifs were tidy. Since Google prioritizes page speed and users are demanding faster response times from the web, devs now have to make pages stupid fast, tough to do with all the web app rich internet experience crap every site is moving to.
For example one of the top bottlenecks in site performance is browser requests, now you have to do front-end voodoo like packaging and minifying CSS and JS files and deploying images to separate servers. More at Yahoo: Best Practices for Speeding Up Your Web Site

If you want to do a test project, do it in layers so you learn individual pieces.

Start with an HTML5 layout. Use regular CSS.
Then add a few CSS3 bits to it.
Add a couple of JQuery effects to make it prettier. Like .effect('highlight') when you click on something.
Then add some JQuery that pulls content from a separate page and modifies the current one using Ajax.
Minify your CSS and JS.
Put a bunch of images on the page. Optimize performance on them.

While you're doing this, a couple of tools that will help:
Firefox Firebug Add-On
After you've built your html5 layout and css, right click on anything and click 'inspect element', it will show you everything about it. Edit the CSS of the element in Firebug and you'll see how it effects the layout.

Firefox YSlow for Firebug
Performance stats on your page

CSS3 Gradient Generator
If you're lazy like me this makes gradients for you. Ultimate CSS Gradient Generator - ColorZilla.com

 

[Jake232]

CSS3 and JQuery actually make a lot of things simpler. JQuery is full of shorcuts - you no longer have to create exceptions for specific browsers or do stuff like write your own XMPHttpRequest handlers, just use .ajax and you're done. Among other things, CSS3 lets you create design stuff that used to require painful hacks or inline images like rounded corners, shadows, gradients easily.

This guide sums up everything HTML5 - Dive Into HTML5. One of my clients couldn't believe it when I built a form with (simple) validation with inline dynamic error notifications in a few minutes.

Used to be cross browser compatibility was huge, but now that everyone of them is following standards it's less of an issue, especially now that IE6 is almost dead and IE7 is shrinking by the day.

The most complicated new development in front end work is performance optimization - used to be all you had to do was make sure all your jpgs and gifs were tidy. Since Google prioritizes page speed and users are demanding faster response times from the web, devs now have to make pages stupid fast, tough to do with all the web app rich internet experience crap every site is moving to.
For example one of the top bottlenecks in site performance is browser requests, now you have to do front-end voodoo like packaging and minifying CSS and JS files and deploying images to separate servers. More at Yahoo: Best Practices for Speeding Up Your Web Site

If you want to do a test project, do it in layers so you learn individual pieces.

Start with an HTML5 layout. Use regular CSS.
Then add a few CSS3 bits to it.
Add a couple of JQuery effects to make it prettier. Like .effect('highlight') when you click on something.
Then add some JQuery that pulls content from a separate page and modifies the current one using Ajax.
Minify your CSS and JS.
Put a bunch of images on the page. Optimize performance on them.

While you're doing this, a couple of tools that will help:
Firefox Firebug Add-On
After you've built your html5 layout and css, right click on anything and click 'inspect element', it will show you everything about it. Edit the CSS of the element in Firebug and you'll see how it effects the layout.

Firefox YSlow for Firebug
Performance stats on your page

CSS3 Gradient Generator
If you're lazy like me this makes gradients for you. Ultimate CSS Gradient Generator - ColorZilla.com

+Rep.

I also use that gradient editor