background preloader

11 Tools to Instantly Code Faster

11 Tools to Instantly Code Faster
Twice a month, we revisit or update some of our readers’ favorite posts and sessions from throughout the history of Nettuts+. This tutorial was first published last September. Doesn't the title say it all? There are a wide variety of tools and techniques which can drastically improve the speed at which we code. Particularly during time-sensitive settings, even a savings of a few seconds per iteration can add up substantially over the course of the month. I'll show you eleven of my favorite tools in this article. 1. Combine the power and specificity of CSS selectors with HTML mark-up, and you get Zen Coding. ...convert to: In this last year, the Zen Coding project has gained considerable attention, and has been expanded to support a wide variety of code editors, including Espresso, Vim, Netbeans, TextMate, and Komodo Edit. "Zen Coding is an editor plugin for high-speed HTML, XML, XSL (or any other structured code format) coding and editing. Alternatives Sparkup 2. Alternatives 3. 4. Pro Tip 5. Related:  web starters

CSS Layout Generator About the CSS Layout Generator The CSS Layout Generator was first released by Tony Aslett in October 2003, since then over 871,000 layouts have been generated. Updated in November 2010, HTML5 doctype can now be selected and a simple HTML5 template with appropriate tags will be created. Other HTML and XHTML doctypes are still available. The generator helps you create the structure of your website template using valid HTML and CSS. You can create a fluid or fixed width floated column layout, with up to 3 columns and with header and footer. The generator requires a modern DOM capable browser with JavaScript enabled. Instructions To create your layout select the structural elements your site requires (header, footer, columns). Info popups are available where you see InfoMore info example :) icon, just hover over it for more information. Join the CSS Forum to suggest changes or ask for help where needed. Author: Tony Aslett

High speed Coding with Zen & SASS - Web Design & Frontend Developement The Power of Awesome Frontend Development is experiencing golden times these days. With the hype on HTML5, CSS3, a brighter focus on JavaScript and sophisticated workflows, the process of creating great stuff on the web has never been more rewarding. In this series I'd like to give you a little taste of what it's like to save time and get even more efficient at coding HTML and CSS. We're gonna use two amazing quick-to-learn and easy-to-use tools that will help us to ease the development of great Websites and WebApps. In this first part we will learn about these two plugins, how they work and what they're capable of. Ladie's and Gents: Introducing Zen-Coding and Sass. Let me tell you up first: What you're about to learn will most likely become a part of your daily base equipment. Zen-Coding Zen is a way of creating whole blocks of HTML Markup Structure with just one simple line of code. So for example, lets say you want to create a <div> with the ID of "container". Fairly easy right? Sass ul {

Building an Online Web Design Portfolio May 25 2012 There many benefits to having an online web design portfolio, but there is something more than beneficial to displaying web design work online, in the arena in which it was intended; it just feels at home. Optimized and ready to show off its full potential. A successful online portfolio will use the same rich media functionality that a great website would, too — and with these hosting services, templates, and themes, you don’t have to be an experienced developer to do set yours up. We’ll start off by taking a look at portfolio hosting services that allow for a wide range of customization. Portfolio Hosting Services Behance Behance is perhaps the best-known and highest-visibility portfolio hosting service on the Web. Behance offers fully customizable portfolios for creative professionals of various disciplines, and its graphics-heavy layouts and multimedia options are well suited for web designers. Behance ProSite Viewbook Cargo Collective Wix Carbonmade The Creative Finder

Sass vs. LESS "Which CSS preprocessor language should I choose?" is a hot topic lately. I've been asked in person several times and an online debate has been popping up every few days it seems. It's nice that the conversation has largely turned from whether or not preprocessing is a good idea to which one language is best. Let's do this thing. Really short answer: Sass Slightly longer answer: Sass is better on a whole bunch of different fronts, but if you are already happy in LESS, that's cool, at least you are doing yourself a favor by preprocessing. Much longer answer: Read on. The Much Longer Answer The Learning Curve with Ruby and Command Line and Whatever The only learning curve is the syntax. Winner: Nobody Helping with CSS3 With either language, you can write your own mixins to help with vendor prefixes. In Sass, you can use Compass, and Compass will keep itself updated, and thus the prefix situation is handled for you. In LESS, there are also some mixin libraries battling to be the best. See that?

Don't Overthink It Grids The vast majority of websites out there use a grid. They may not explicitly have a grid system in place, but if they have a "main content area" floated to the left a "sidebar" floated to the right, it's a simple grid. If a more complex layout presents itself, people often reach for a grid framework. They assume grids are these super difficult things best left to super CSS nerds. That idea is perpetuated by the fact that a lot of the grid systems they reach for are very complicated. Here's how I build grids. Context A block level element is as wide as the parent it's inside (width: auto;). Columns Let's start with a practical and common need: a main content area being 2/3 the width and a sidebar being 1/3 the width. <div class="grid"><div class="col-2-3"> Main Content </div><div class="col-1-3"> Sidebar </div></div> To make them next to each other, we just need to float them and apply widths. and individual width like this: That's the whole premise of not overthinking grids. Clearing Context

5 Mac Apps That Make CSS Preprocessors Easier to Use This post is part of a series that revisits some of our readers’ favorite articles from the past that still contain awesome and relevant information that you might find useful. This post was originally published on December 20th, 2011. If you’re a fan of CSS preprocessors, then you know that despite their usefulness, they can be a bit of a pain to work with at times. Most of them require some sort of Terminal voodoo to compile, which immediately scares off a good portion of potential users. As always, the Mac development community has come to the rescue with some amazing tools that completely take the effort out of the process. What Is a CSS Preprocessor? A CSS preprocessor is a tool that makes writing CSS easier, more flexible and arguably even more fun. Typically, a CSS preprocessor adds some interesting functionality to CSS such as variables, mixins, functions, nesting, etc. Five Apps to Process Your Files Price: Free Supported Languages: LESS Crunch! Crunch! LiveReload

UXPin: UX Design & Wireframing Tools As Beautiful As Your Work Can’t Get Into Preprocessors? Try Zen Coding A ton of discussion lately has been given to preprocessors. These incredibly useful tools make coding easier, faster and more maintainable, but they’re certainly not for everyone. Whether or not you’ve jumped on the preprocessor bandwagon, you should give a fresh look to an old favorite that helps you dramatically cut your coding time without reinventing your workflow with compilers and other complications: Zen Coding. With Zen Coding, you can type a little and output a lot, just like with a preprocessor like Jade or Haml, only it expands instantly into the vanilla HTML that you love. Zen Coding vs. Zen Coding has been around for a number of years, so several of you reading this are bound to think that this is too old school to merit a discussion in 2012, but I’m willing to bet that lots of new coders have never given it a shot. I’ll start by saying what Zen Coding isn’t: it isn’t a preprocessor in the same vein as LESS, Sass, Stylus, Jade, Haml and the like. How Does It Work? Zen CSS

Intuitive Web Design: How to Make Your Website Intuitive to Use 29inShareinShare The easier your website it is to use, the more people use it. An essential part of “easy to use” is intuitive. Intuitive design means that when a user sees it, they know exactly what to do. The main thing about intuitive design is that it’s invisible. Design is intuitive when users can focus on a task at hand without stopping even for a second. Imagine that you’re at a car rental place and you’re pointed out the car you’re getting. Image credit This is an example of non-intuitive design. The same goes for web design. The problem with designing intuitive interfaces: intuitive for who? Why are there so many websites that make people cringe? I believe most websites are designed with good intentions. People see the world as they are, and when they design something, they unconsciously design it for themselves – for people that have the same level of computer skills, experience using this type of interfaces and what not. Image credit Current knowledge vs Target knowledge Conclusion

Sass vs. Stylus: Who Wins the Minimal Syntax Battle? Today we’re going to pit two CSS preprocessors head to head. You’ve no doubt seen lots of discussion about how SCSS compares to LESS, but where does Stylus, the new kid on the block, factor in? Can it possibly match the power and versatility of SASS? We’ll jump head first into both syntaxes and compare them side by side to see which is more logical and versatile. We’ll also talk about features and give you a clear argument for why one preprocessor is more powerful. Sass, Not SCSS One little detail needs to be addressed before we dive into this any further. However, for the sake of comparison, Sass is actually much closer to Stylus than its sibling SCSS. Alas, this is not an article on the merits of Sass vs. Basic Syntax Let’s start with a direct comparison of both syntaxes at their most basic level. As you can see, they’re almost identical. Flexibility One thing that I’ve always appreciated about LESS and SCSS is that I can still write plain old vanilla CSS within my stylesheet. Nesting

commadelimited/jQuery-Mobile-Bootstrap-Theme 45+ CSS Grid Layout Generators Using a CSS Grid System is really worth considering if you’re planning to create a complex web design like e.g a magazine layout. For quite some time CSS Grid frameworks have been very popular and helped designers and web developers to create well structured and easy to maintain solutions. However there many options available and it is not an easy tasks to make the right pick when starting up a new project. This article will give you the overview and tools you need to get started by presenting more than 45 CSS Grid systems and tutorials on how to use them. If you are looking for examples and inspiration on grid based web design you need to check this article. Update: While the grid generators below still work I think you should now that it more or less have become the de-facto standard to use responsive layouts. Advertisement Introduction Cascading Style Sheets (CSS) is used to describe the presentation of a document written in a markup language. CSS Grid Layout Generators BlueTrip SenCSS