Tag Archives: jquery

How to begin on Front End Development

A friend of mine asked me today how could he begin on front-end development without knowing anything at all of programming and bellow is what I have pointed out to him. These links should get anyone started with basic concepts of front-end development and learning should be easier after that.

Some links to get you started on HTML, CSS and JQuery (Javascript)

Med-advanced

Get used to concepts like Responsive CSS (it’s great) and for those you can use test tools like: http://screenqueri.es/ to check if everything is ok.

Get into Twitter and Google+ and  follow me on those (you can get the links at www.mcloide.com) and you will see that there is a bunch of people that I follow that are in regards of CSS, HTML and Javascript. There is always a bunch of new things that you can learn from developers that work with front-end in a daily basis.

You can also check hubs like Coderwall and Geekli.st where you can find info, tutorials and tips on HTML, CSS and Javascript.

As tips remember this:

  •  IE sucks -> it will break your design / css / html / etc so if it works on IE it works on everything else
  • Google is your best bud -> there is always someone with the same problem or a similar problem as the one you are having
  • in backend programming we use the concept of DRY (don’t repeat yourself). In HTML you might not be able to use it, but for both CSS and Javascript you can use it.
  • You can use JS Lints (http://www.jslint.com/) to check if your code is pristine
  • You can use Fiddles to test some stuff on the fly (http://jsfiddle.net/)
  • Use either Chrome or Firefox while developing, the Firebug and Chrome Inspector are excellent tools to check on javascript errors, small inline css changes, etc
  • The best way to practice and start, build a site, publish it and ask for a review on it from other dev’s / people – it will give you ideas of UX and if you need to improve your code.

I’m not a front-end developer, but these are the steps that I usually take when I need to code something for front-end. Either way is a good start for anyone that haven’t coded anything in front-end or is simply considering on starting on web-development altogether.


Backbone.js

When working on a web application that involves a lot of JavaScript, one of the first things you learn is to stop tying your data to the DOM. It’s all too easy to create JavaScript applications that end up as tangled piles of jQuery selectors and callbacks, all trying frantically to keep data in sync between the HTML UI, your JavaScript logic, and the database on your server. For rich client-side applications, a more structured approach is often helpful.

With Backbone, you represent your data as Models, which can be created, validated, destroyed, and saved to the server.

This is pretty cool. It is something in between JQuery and NodeJs but it require some migration from JQuery: https://github.com/kjbekkelund/writings/blob/master/published/understanding-backbone.md/

If UX wasn’t an issue and performance or a more objected oriented approach was needed, I would definitely consider it.


Good old site restored

I was a bit bored today and decided to clean up and change my good old site – mcloide.com. No PHP only some Twitter Bootstrap and Jquery. Very simple, very direct and totally clean. Give it a check. http://www.mcloide.com


CDN Performance – JQuery donwload

It’s a great article that shows how dowloading the JQuery from a CDN Server can relief your servers from a major load:

http://royal.pingdom.com/2010/05/11/cdn-performance-downloading-jquery-from-google-microsoft-and-edgecast-cdns/


Dynamic Design

I was searching for a Jquery plugin today when I bumped into this Blog. What did call my attention on this blog was the mouse over event that is on the header (the guy cartoon) of the blog.

With  very little, it brings a very cool dynamics to the site, making it much more interactive.

Besides being a great place to search Jquery stuff, this has a top A interactive design. Check it out: http://marcgrabanski.com


Context menu disable with JQuery

I have found a ton of tutorials teaching how to disable the context menu on browsers and in all of them I have found one flaw:

Does not work with Opera

It’s an anoying situation that got me thinking and searching for a solution through most part of the day and with no luck.

The function is simple:

$(document).ready(function()
{
$(document).bind(“contextmenu”, function(e)
{
return false;
});
});

and it works with (tested):

and it does not work with (tested)

After a lot of research I have found why it does not work with Opera:

Opera (9.5) has an option to allow scripts to detect right-clicks, but it is disabled by default. Furthermore, Opera still doesn’t allow JavaScript to disable the browser’s default context menu which causes a usability conflict.

You can try to disable by disabling the mousedown event filtering only for Opera, but I do suggest a lot testing on this.

To complete just an extra note: this function does not bind the documents inside an iframe, so in this case you should complete the function by disabling the context menu in the iframe document as well.


Smooka Blog

Finally one good friend of mine took some time and created his own blog. He is kind addicted into new tech so this is at least what you going to find on his blog. Check it out: http://www.smooka.com/blog/


JQuery

I have been working with JQuery for a while and it is by far one of the easiest and strongest Javascript Frameworks that I have worked with.

The process is simple:

  • include the JQuery js files (all that you might need)
  • Work with Javascript as it was never so easy

Let’s take an example (a very simple one, but pratical – almost everyone that I know have to work with AJAX).

Consider that we need a function to request (AJAX) an information from a helper file (a PHP script that will perform whatever you need it to do) and print it’s results on a div box.

The function would be something like this:

<script>

function getHelloWorld(input1,input2){

/* Changing the current content with something new */
$(“#theDiv”).html(“Wait while loading the requested information”);
/* How about changing the css a bit */
$(“#theDiv”).css(“height”,”300px”);

/* Performing the AJAX request that will get the helper result and place it inside the “theDiv”  innerHTML */
$.post(“helpers/loadNewInfo.php”,{action:’new’,input1:input1,input2:input2},function(result){$(“#theDiv”).html(result); alert(‘cool it worked’); $(“#theDiv”).css(“height”,”500px”); } );

}

</script>

Now let me give a little bit of a “zoom” at the AJAX request.

$.post(
“helpers/loadNewInfo.php”,
{action:’new’,input1:input1,input2:input2}, /* the post variables and it’s values that will be sent to the loadNewInfo.php file */
function(result){
$(“#theDiv”).html(result); /* callback function body */
alert(‘cool it worked’);
$(“#theDiv”).css(“height”,”500px”); /* playing a bit with the css, maybe we could place it yellow background */
}
); /* Here the $.post is ending */

As you can see working with JQuery is very simple. You will access the elements by $(“#elementID”) (or name I really don’t remember right now) and every property from it as an object modifier preceeded by a dot.

With inputs you can work the attributes from it using the attr clause.

Anyway, I’m far from being an expert from this, but It’s a simple example for those who are starting with JQuery. Right now I’m using JQuery to work with a Shopping Cart. It’s a nice way to paginate and display products without having the user post back every time and the best of all I can control CSS elements with it.

For more reference, go to: JQuery Code

P.S. If you are used to perform hard core Javascript DOM manipulation, JQuery will be a piece of cake for you.


%d bloggers like this: