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 tpope/vim-fugitive 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

Seven reasons why you should switch to Vim By : Javed Khan So you want a better IDE for developing django, huh? Why not give good old vim a try? Use pathogen to maintain your vim plugins (and sanity). Also, consider adding your .vimrc and .vim to a repository. My vim files can be found here. 1. Starting from vim 7.1, syntax highlight for django templates works out of the box. If you are on an older version, use this plugin 2. SnipMate provides commonly used "snippets". Django specific snippets can be found at robhudson's repository Its very easy to write custom snippets in case you need them. 3. This one is not django specific, but it can save a lot of time spent debugging typos or silly mistakes. PyFlakes detects errors in your python code and highlights the offending lines so you can easily rectify them. 4. Fugitive is a git plugin for vim. This one integrates seamlessly with my workflow. 5. Pysmell is great for autocompleting your django project code. 6. 7. Sparkup allows you write zen code Other tips: Related Posts

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. Setting Up and Using Vim for Python / Django Development | Bixly's Blog There are a lot of text editors and IDEs for a popular language such as Python, and we’ve already featured Eclipse/PyDev before. Today, we’ll focus on Vim, a highly configurable text editor built to enable efficient text editing. From the Vim website: Vim is often called a “programmer’s editor,” and so useful for programming that many consider it an entire IDE. It’s not just for programmers, though. We’ll go through the installation and Python/Django-specific configuration through different levels, and depending on where you stop, you’ll get either a simple text editor, a full-blown IDE, or something in between. Assuming you are using Ubuntu: sudo apt-get install vim For other operating systems: Once you’re done, running vim with a file will show something like this: Most of our configuration will happen on your vimrc file. The basics would be: The result of that config will look like this:

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.

Vim Splits - Move Faster and More Naturally Most of us are Vim users and have tweaked our favorite editor for speed and convenience. See thoughtbot’s dotfiles. One of my favorite tools is the window split. Photo credit: Andrew Ressa on Flickr The basics Create a vertical split using :vsp and horizontal with :sp. By default, they duplicate the current buffer. :vsp ~/.vimrc You can specify the new split height by prefixing with a number: :10sp ~/.zshrc Close the split like you would close vim: :q Easier split navigations We can use different key mappings for easy navigation between splits to save a keystroke. nnoremap <C-J><C-W><C-J> nnoremap <C-K><C-W><C-K> nnoremap <C-L><C-W><C-L> nnoremap <C-H><C-W><C-H> More natural split opening Open new split panes to right and bottom, which feels more natural than Vim’s default: set splitbelow set splitright Resizing splits Vim’s defaults are useful for changing split shapes: More split manipulation :help! As with everything in Vim, for more information, check the well-written helpfiles. What’s next?

Deployd vim, switching between files rapidly