Did you know that you can modify your gmail address with and it will still reach you? Gmail ignores dots ‘.’ and everything after a plus ‘+’ sign.

This comes in extremely handy. Need to create several test accounts on your new web app? No problem! Just move around a dot in your address! Need to give an email address, but don’t want to ever receive email from them? Tack a ‘+spam’ on the end of your address and filter it to automatically be marked read and go to the trash.

Let’s take a look at how to do this.

The Dot

Gmail handily ignores all dots in the name part of your email address. andre.bluehs@gmail.com is exactly the same as andrebluehs@gmail.com is exactly the same as a.n.d.r.e.b.l.u.e.h.s@gmail.com. This is useful for signing up for accounts that require a unique email address, but you already have an account for (for testing, purposes, of course). All emails will go to your account, regardless of where and how many dots are in the name.

This also works for signing in to google. you can use your username without the @gmail part when logging into gmail. (This is not true for third party apps using your gmail identity for log in, such as stackoverflow, you need to provide your full email address)

The Plus

This hack is extremely useful for ‘tagging’ email from certain places. If a site requires that you give an email address, simply put a +spam at the end of your username, and filter it. Note: you can put whatever you want after the +, i just use ‘spam’ here as an example. Gmail does not automatically filter things with ‘+spam’ on the end, you must do this manually with the next step.

To create the appropriate filter, click on ‘create new filter’ next to the search button:

Then put in the To: field, whatever your email address is, with a ‘+spam’ for the username.

and finally, check ‘mark as read’ and ‘delete it’ in the last step.

and you’re done! never to be pestered by ‘affiliate email’ again.

This can be repeated for any kinds of filters you want, as well as using the dot hack with this filtering hack to accomplish the same thing.

My gtacm techtopics started last week. It’s all about javascript, jQuery, and AJAX. This week consisted of the introduction to the browser: DOM, DOM Inspectors, javascript: syntax, variables, jquery: syntax, selectors, basic animations.

You can download this week’s zip over at the techtopic page. It includes the html and javascript from our in class demonstration as well as another example, and the powerpoint i meant to show.

Here is some auxiliary stuff that I did not get to talk about in class but I wanted to cover.

$(document).ready(function(){})

All I said in class was that “this is necessary. Put everything inside here. jQuery won’t function without this. Don’t question”. I’m sorry, this was mean. What I really meant to explain was that this IS necessary, but it is NOT the only way to accomplish this task.

What this line is saying is that jQuery has some things that need to be run AFTER the browser has populated the DOM with all the HTML elements. It has to wait for this so that the elements EXIST when it tries to assign all the appropriate listeners to what you have told it to do. However, you can do this exact same thing with a much simpler call:

$(function(){})

That’s right, you can replace $(document).ready(fuction(){}) with $(function(){}).

Wow, that was easy.

Dropdown menu

I had originally planned on doing a full-blown example at the end of class. This example would be a dropdown menu that would work on hover over (similar to the one found at http://www.cc.gatech.edu). I have included it in the zip (found on the techtopic page) along with a spiffed up code that we did in class.

The dropdown menu included in the zip is a bare-bones implementation that you can put into any navigation. I used a function we didn’t cover in class .children(). Briefly, this function finds all the HTML elements that are contained in that element (div, span, etc), and you can refine it by putting a selector as a parameter to the function (like in my dropdown example).

Please study this and modify it (try using .fadeIn()/.fadeOut() instead of .slideDown()/.slideUp()) and try some experimentation with this. Also, this is a great reference to have in the future if you are building something that needs a dropdown menu: this will work great for you.

More Stuff

Two things I didn’t get to talk about this week are $(this) and .animate().

$(this) is a reference inside a callback function to whatever was selected. In the dropdown example, $(this) refers to the div with class=’hover-container’ that was hovered over. It only exists inside the callback function.

.animate() is the big kahuna when it comes to anything animated with jQuery. Actually, in the actual source code for jQuery most specifically named animation functions (slideDown, slideUp, etc) just call .animate() with the proper parameters for that specific function.

.animate() is ridiculously powerful and can do a lot of things. We will be covering it more in-depth in the final week.

GTACM is sponsoring a few series of things called Tech Topics that aim to teach things that aren’t offered at Georgia Tech. They are free of charge and available to everyone. One topic is “Zero Pageloads – The Web With AJAX” taught by me.

What you need to know:

Zero Pageloads – The Web With AJAX. Fridays 4:00pm. Bunger-Henry 311

You can register for it by going to the gtacm blog: http://gtacm.org

signup is here: http://gtacm.com/blog/about/special-interest-groups/techtopics/tt-2102/