background preloader

Goodbye, Zen Coding. Hello, Emmet!

Goodbye, Zen Coding. Hello, Emmet!
Advertisement Back in 2009, Sergey Chikuyonok wrote an article1 to present a new way of writing HTML and CSS code. This revolutionary plugin, called Zen Coding, has helped many developers through the years and has now reached a new level. Emmet2, previously known as Zen Coding, is the most productive and time-saving text-editor plugin you will ever see. For those who prefer to watch instead of read, here is a summary of my favorite tricks. How Does It Work? Let’s face it: writing HTML code takes time, with all of those tags, attributes, quotes, braces, etc. HTML Abbreviations Initializers Getting started with a new HTML document takes less than a second now. html:5 or ! Easily Add Classes, IDs, Text and Attributes Because Emmet’s syntax for describing elements is similar to CSS selectors, getting used to it is very easy. Also, you can combine classes and IDs. Now let’s see how to define content and attributes for your HTML elements. <h1>foo</h1> And square brackets are used for attributes.

Top 10 Programming Fonts Sunday, 17 May 2009 • Permalink Update: This post was written back in 2009, and much has changed since then. I’ve also written a few subsequent posts about alternative programming fonts, like this one about Anonymous Pro. I’m a typeface geek, and when it comes to selecting a font I’ll stare at all day, I tend to be pretty picky. What follows is a round-up of the top 10 readily-available monospace fonts. A note about anti-aliasing In the past, we’ve had to decide between tiny monospace fonts or jagged edges. If you have any doubt that anti-aliased fonts are apropos for code, note that even the venerable BBEdit — which for years has shipped with un-aliased Monaco 9 set as the default — has made the jump. Unless otherwise noted, I’ve used a larger size font, 15-point in fact, for the examples here to illustrate their legibility at larger sizes and with anti-aliasing turned on. 10. Figure 1 Courier New 9. Figure 2 Andale Mono 8. Figure 3 Monaco Figure 4 Monaco 9-point, without anti-aliasing 7. 6.

20 Awesome jQuery Sliders Image and content sliders are an extremely common element in modern web design. Coding your own slider from scratch is always an option, but if you’re looking to save some time or if you’re not sure how to code your own slider there are plenty of options. In some cases, working with an existing jQuery plugin will give you the chance to observe the code that is being used, and learn things that can be used in situations where you do want to code from scratch. Need Premium jQuery Sliders? CodeCanyon offers the best in premium sliders with great support. In this post we’ll look at 20 different options for sliders. Slider Revolution Slider Revolution is a premium WordPress plugin ($15) that allows you to easily create and customize responsive sliders. Wow Slider Wow Slider is an “awesome slider for non-coders”. Nivo Slider Nivo is possibly the most popular jQuery slider plugin. Slider Gallery with jQuery This slider displays thumbnails in a horizontal slider.

Best Open Source Resources for Web Developers | WebAppers Editors for RubyistsRubySource For any growing language, there’s always a ton of tools you can use, as well as very strong opinions about them. Ruby is no exception. There’s several editors, IDEs, etc. that all have excellent Ruby support aimed at keeping you operating at maximum “output” (I’m not one of those crazy managers that measures this output with lines of code, so, you get to choose how to define it). In this article, I’ll go over the advantages, disadvantages and odd points about each of them, from my perspective (read: the article is biased, but, my opinions are correct so it doesn’t matter :P). Let’s open with a classic. Vi(m) Vi came to be in the days when bandwidth was small and people were patient with their computers. Vi’s development gradually fell apart, as various people moved around in the project. So, what has vim got do with Ruby? But, vim is not all fun and games. Then, there’s the command syntax. All in all, vi(m) is awesome if you can adjust yourself to it. Emacs Sublime Text 2 RubyMine

17 Best Web Design Tools for Designers and Developers | Resources Web designing and development is a fast growing industry, becoming two of the highest on-demand occupations of recent era. Whether you’re a Web Developer or a Web Designer, you are most likely to be hunted every other day by newer clients with challenging projects. You are faced by a merciless, an ever changing and not to mention, at a very fast pace, World Wide Web with newer trends and newer technologies, very quickly making the last latest entry the present obsolete version. Developers need to keep up with all sorts of tricks of this trade along with following the recent design and development trends. Does this all sound too scary? Mueller Grid System Mueller is a modular grid system for responsive/adaptive and non–responsive layouts, based on Compass. CSS Modal CSS Modal is built out of pure CSS. Popline Popline is a HTML5 Rich-Text-Editor toolbar that will float around the selected text. Pure A set of small, responsive CSS modules that you can use in every web project. On/Off FlipSwitch

Consolas Menlo is a monospaced sans-serif typeface designed by Jim Lyles. The face first shipped with OS X Snow Leopard. Menlo is based upon the Open Source font Bitstream Vera and the public domain font Deja Vu. More details and download. TextMate productivity tips If you saw my post about the DOMAssistant bundle for TextMate, you will already know that my favourite coding tool at the moment is TextMate. If you missed that post, well, now you know. For anyone who is new to TextMate or considering trying it out, I thought I’d share a few tips. 1. When editing an HTML document, press Opt + Cmd + . to make TextMate automatically insert a closing tag for the element the cursor is inside. 2. To move text that you have selected, hold down Ctrl + Cmd and use the arrow keys to move the text up and down (or left and right). 3. Type a few characters and hit the tab key. 4. Instead of typing every letter of every tag, attribute, method or variable, just type the first few letters and hit the Esc key. 5. While working on a project I often have many files open in TextMate. 6. When you want to wrap some text in an HTML element, select the text and hit Ctrl + Shift + W. Want to wrap multiple lines in separate elements, for instance to create list items? 7. 8. 9.

Deployd Revisiting Programming Fonts I've experimented with programming fonts and IDE color schemes plenty in the past. But now that I've given in to the inevitability of ClearType on large LCDs, I've basically settled on Consolas. It's hard to beat Consolas. It's darn close to the ultimate monospace programming font in my estimation. That's why I was so intrigued when I read about Inconsolata, a non-denominational OpenType relative of Consolas, which unlike Consolas, works equally well with ClearType enabled or disabled. Once I tried out Inconsolata, I figured I might as well revisit all the common, popular programming fonts under the same conditions. Consolas, 11 point. Inconsolata, 11 point. Monaco, 11 point. Envy R, 11 point. Vera Sans Mono, 11 point. Pragmata, 11 point. Lucida Typewriter, 11 point. The Font of the Gods, 11 point. Andale Mono, 11 point. Choice of programming font is as much a personal preference as anything else. Please don't use the default Courier New typeface.

Related: