jQuery prepend, append, before, after

jQuery

One of the most used methods (at least for me) are prepend, append, after, before

They allow to add html to specific areas.

prepend()

Imagine that we have something like this list:

If we need to add a new list item ‘Item 0′ at the beginning, we can do it by using “prepend()”

append()

Append works the same way, but adds to the end of the list

before()

Image that you want to add a item to the list, before the the last item:

after()

Image that you want to add a item to the list, before the the last item:

Demo

Vagrant, no more MAMP?

Vagrant

Vagrant

Vagrant, what is it?

Vagrant is a command line manager for VM (Virtual Machines). Vagrant allows developers to create and manage virtual machines using the command line, and most important of all, allows developers to specific say what they what to be included in that VM.

Vagrant was created by Mitchell Hashimoto (@mitchellh).

You can think of Vagrant as a “Virtual Machine Configurator and Manager”. Image that you go to a website and you can customise the car that you want to buy. You can choose the interior/exterior colours, type of engine, etc. This is what Vagrant does for you. You specify what you want to be included in the VM and Vagrant handles the rest.

That previous example was a little bit weird for a developer. Let me try to explain in another way. How many times, you had to setup one host so that you can work on a project? How much of that environment resembles the final production server where that project is going to be deployed? Probably you know that it uses LAMP, and you just fire up MAMP, and start coding.

How cool it would be that you could have an environment equal to the production server? With Vagrant you can. Just tell what you need and Vagrant creates that environment (VM) for you.

How to get started?

First of all you need to have install VirtualBox.

Then you need to download and install Vagrant. Just click the latest version, and choose the correct file for your OS.

After downloading and installing Vagrant you just need to create an empty directory for your project. And inside of it run the command:

and you get something like this:

A Vagrantfile has been placed in this directory. You are now

ready to vagrant up your first virtual environment! Please read

the comments in the Vagrantfile as well as documentation on vagrantup.com for more information on using Vagrant.

if you try listing the directory you get something like this:

This creates a simple .vagrant directory, and a Vagrantfile. This Vagrantfile is where we specify all of our configurations and specifications.

The Vagrantfile looks something like this:

NOTE: I’ve removed most of the comments in the file.

Now if we run the command:

you get something like this:

This make take a while, but only for the first time. You can change and update all the configuration and run the command:

and Vagrant will update the VM to the specified changes.

Soo now we have a VM at our disposal. Just run the command:

and we get something like this:

IT’SSSS ALIVE :D

now we are inside a Linux VM.

 

Vagrant works with something called a “box”. What is a “box”?

Well a box, is a pre-made VM (bootstrap) for the VM that you want to build and customise. So every VM that you want create/modify to your needs, starts with another “clean” VM.

In this default example, since we did not specified any box, Vagrant uses a Linux Ubuntu box called lucid32. There are a lot of box’s that we can specify that we want to be our base box. Please check this link (http://www.vagrantbox.es/)for more information about it.

If we take a look at our Vagrantfile we have this line where we can specify the url of the bootstrap box that we want:

just change it to something like:

By making this simple change, instead of using the Linux Ubuntu Lucid32, we are using, CentOS 6.2 32bit (with puppet).

The Vagrantfile is very simple and easy to understand. For more information, please take a look at the documentation.

Conclusion

Vagrant has a lot of more configurations and providers (Puppet, Chef, etc) that help to configure everything that you want to be installed in the VM. And has the main ability, that you can share the Vagrantfile with team developer and he will get the same VM to work.

I’ll be posting some more information soon explaining how can you achieve your perfect VM.

My fav Sublime Text 2 shortcuts

Sublime Text
Sublime Text

Sublime Text

Hi. These are the most common keyboard shortcuts that i use in Sublime Text 2 (WIN):

Ctrl + Shift + P – Commands list

Ctrl+P – Go to anything. I just hit Ctrl+P and type parts of files I want to open – huge time saver.

Ctrl + Space – Auto completion.

Alt + 1, 2, 3, 4, … – Switch between open files’ tabs. Not to waste your time grabbing a mouse, and clicking on a tab.

Ctrl + PgUp/PgDn – Cicles throught the open files

Ctrl + click somewhere in your code – multiplies your caret, so you can simultaneously enter, delete, overwrite your code. Hitting Esc will exit this function.

Alt + Shift + W – Wrap selection with a tag. Select text, hit shortcut, enter tag’s name, done.

Ctrl + Shift + T – Open last closed file

Alt + Shift + 1,2,3,4,5… – Splits the screen into multiple views for multiple files

Ctrl K ,  Ctrl B – Opens/Closes the file explorer

Ctrl + G – Goto line

Ctrl + H – Replace

Ctrl + F – Find

Shift + Ctrl + D – Duplicates the current line, or the selection, if something is selected.

Ctrl + D – If no thing is selected, (can be previous selected)  the current word closest to the caret is selected. Keep hitting this shortcut will select near by strings that are a match, and can be used for multiple editing.

Hope helps someone ~:o)

Alexander Calder doodle

google_banner

google_banner

Today Google decided to make a tribute to Alexander Calder (an American artist best known for inventing the mobile), by creating a interactive doodle entirely using HTML5 canvas, so you need to use a modern browser to interact with it. It runs a physics simulation on the mobile’s geometry, and then does realtime 3D rendering with vector graphics. Only recently have browsers advanced to the point where this is possible. (you can see it here).

Pretty cool :)

PhpStorm 2.1 is now available!

phpstorm_banner

phpstorm_bannerYEAH!

Acording to the jetbrains blog, PhpStorm 2.1 is now available with new features available:

  • Phing support added
  • Initial Twig support
  • New Diff tools for comparing directories, images and DB’s
  • ‘Extract Function/Method’ refactoring for PHP
  • “Change Signature” refactoring for JavaScript
  • JavaScript debugger in Google Chrome
  • htaccess support
  • New code inspections: “Inconsistent return points”, “Silly assignment” and more
  • PHPDoc @var annotations now support Netbeans/Zend style
  • Auto-completion improved for classes from other namespaces and Shiftless Completion enabled
  • HTML tag tree highlighting
  • Reworked UI for Search/Replace
  • Misc. improvements for all supported VCS and noticeable improvements in performance