Saving time doesn’t always require 1.21 gigawatts

Posted on April 22, 2013

 

Finding an IDE (integrated development environment) that you are happy with is always a challenge for any developer, regardless of your choice. From Netbeans to Visual studio, the primary goal is for it to be useful and improve your workflow. Here at Engage web, we have a preference for Komodo; it’s lightweight and intuitive enough to cover all of our needs.

Recently, our Komodo experience has been vastly improved with the introduction of a plugin called ‘Emmet’. As the name implies, this plugin is a great a time saver as a flux capacitor, and has some features we can no longer do without. I will name a few of my favourites, but this is by no means a comprehensive list of the fantastic features available in the plugin.

Lorem? Not a problem

Sick of having to go to the lorem ipsum generator or other sites to get your specific length filler text? Well, emmet deals with that brilliantly. Just type ‘lorem100’ and hit the emmet button shortcut to get 100 words of lorem ipsum. The number is completely changeable, so you will always have the perfect length filler text at your fingertips.

Markup in an instant

Ul>li.nav-link*5

Once I hit the emmet shortcut it will turn that into the desired markup and set tab points within each item. This means I don’t even have to click within each element to add my content. Just tab and type. The same goes for creating Divs, headings and other page elements. It even goes as far as to include a basic HTML 5 template. This is called by typing ! and hitting your emmet shortcut key. It results in some nicely formatted HTML ready for use:

<!doctype html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Document</title>
</head>
<body>
</body>
</html>

Size does matter…

The width and height of an image can be important attributes to have in your markup, as it gives the image the required space before it is loaded and prevents your content from going awol or shifting suddenly as the image loads. This has always been a pain if you hadn’t recently created the image yourself and grabbed the dimensions from the properties menu, remembering them exactly so you don’t encounter image distortion. Emmet has the solution: click within the image tag, choose ‘update image size’ and it will instantly grab the correct size and add the relevant attributes.

Give Emmet a try. I think you will find it extremely useful and it’s available for a wide range of IDEs, not just our trusty Komodo.

Steven

Steven is Engage Web’s go-to man for all things web-related, bringing his knowledge of current trends in web design and development to the team.

Latest posts by Steven (see all)

Like us on Facebook to see more posts like this

You might also be interested in:

No Comments »

There are no comments on this yet, be the first to write a comment.

RSS feed for comments on this post. TrackBack URL

Have your say!

Call Now Button

We have worked with:

minute-man-press-image
TEL: 0345 621 4321