Optimization and organization can mean many things, but what does it mean to you? Doing things faster, better, or more efficient? Does it mean doing things more programmatically, simplistically, or using tools that are more suited to the job?
Well, in all likelihood it means a little bit of all of these. You probably are a person who works as a developer or designer, and are constantly trying to optimize your workflow — and well, these things could certainly be what you are looking for (at least, a bit).
But do keep in mind that however many tips and techniques you embrace, it actually means very little unless you actually do your work. So, with that in mind, I would like to offer some of my favorite workflows and methods for organization and optimization.
Most people assume that they only need to stay organized and efficient if they are working in a team, because after all if you are just one person why not use your own organizational method? Well, there isn’t anything wrong with that per se, but you do need to be using some standardized techniques to make the most of your time. For instance, version control systems.
Also things like language supersets and simplistic language syntax tools can be very helpful. Let’s dive into some of these in a more specific fashion, and be aware near the end of the article I will go over some code supersets and tools that focus on specific languages that I feel like most of us work with. The rest though, will be rather broadly scoped.
Tools
Tools are a great way to increase the speed at which you write and implement code. Sometimes they can be a distraction, but most often they can be very helpful. I will be talking about mainly about the ones that I have grown to love over the years, but there are many more out there that I won’t cover — so don’t feel that this is an exhaustive list but rather a list of possible ideas. Think of this, preferably, as a jumping off pointText Editors
Text editors are a topic of much controversy. I mean, let’s face it, we spend most of our day inside them, and because of that we often have incredibly biased preferences. I am not outside of this circle of bias, either, so don’t expect a journalistic understanding of all text editors in the world here. But rather, a few of my favorites and why I like them. As you read this though, keep in mind that I do use more than one text editor and for very specific purposes. I often will keep a few text editors closed with a clients files inside of them. What I mean by that is, in Sublime Text 2 I may be working on a rails project and have like 14 tabs pulled up in there that, whenever I start Sublime, it opens them all up. And then, to not interrupt that, I actually keep a client’s site I may be doing an HTML or CSS design for in TextMate. And with writing I usually keep that in either a separate TextMate directory in Dropbox, or in Scrivener. So I keep everything separate that way. So, naturally, I will be talking about Sublime Text 2 (available for Windows and Mac) and TextMate (available for Mac only). TextMate TextMate is one of the best editors out there, for Mac. It has a simplistic design, a beautiful interface, and a powerful feature set. But one of the true identifiers of the quality of the product is the community behind it. It is rampant. They are creating bundles, scripts, and pretty much anything you could imagine. Though, do keep in mind that MacroMates (the creators) have been really missing in its development. Now, that may be a bit of an exaggeration but it had been years upon years before they created the second version which addressed a lot of people’s concerns and issues. With that being said though, it still remains a beautiful editor and a place I love to go to write Markdown or code of almost any type. I use it for anything I can, when I am not using Sublime Text 2. It also has a beautiful font, and a lot of people have written books, articles, entire web apps all using this beautiful editor — and for good reason. Why don’t you go check out why, and see for yourself. Sublime Text 2 Sublime Text 2 is a great text editor, but I am not sure what sort of shorthand to refer to it by — so I will just say Sublime. Sublime, as it were, is a great editor. I’ve never used it before version 2, but I will say that it is just lovely. I am not all that sure of the differences — other than the font and default background color — between it and TextMate. I will say though, that I love the font that it uses (I know, seemingly unimportant — but important to me), and I also love the way it does the tabbed browsing execution. Instead of talking about features, I will instead talk about a few other things. One thing about it that is a bit of a pain, before jumping into the other things, is that you can’t call it from the command line as easily as TextMate. With TextMate, you just type “mate .” and it opens that directory in its little project drawer, it just works perfectly. Though, still find Sublime useful without that feature. I just feel that working in Sublime is a delight. I am not sure why, perhaps that it is working on a dark background is nice, but I just really enjoy working in Sublime. I use it when I need to get a massive amount of work done. That is, a massive rails project — or the like. I think you will find it useful as well, so check it out.Code organization and methodologies
Organization is a topic around which there is much debate. A lot of people really don’t prefer complicated systems to help them stay organized, but in reality a bit of complication in the short term may help you stay organized in the long term. I know that sounds non-intuitive, but it is very accurate. Especially when it comes to version control systems. Take it from me, someone who relied on FTP, and I still do sometimes, and I’ve never been happier using a version control system. Using source control is a great way to stay organized. Making sure that you keep backups of your development process is really important, and leaving it up to various folder hierarchies is not really gonna’ cut it in the long run. I mean, it may seem fine when your computer is running but if you have a crash or hard-drive failure you are petty much completed lost. What can you do to solve this though? Well, you could use a version control system that takes a snapshot of your development directory over the course of the times you are working. Using this is a really great way to have a constant new version and a constant access to backups should there be bugs or some sort of loss. It's also just good to have period. I mean, think of how many times you were like “I wonder how I did that, or implemented that feature.” Well, now you literally know. And speaking of version control systems, git is a great way to do this. You don’t even really need any knowledge of systems like Mercurial or Subversion in order to get in touch with the VC system that is Git. In fact, I had no experience with these systems at all, and got up and running with Git pretty fast actually. You can follow the commands directly from GitHub when you open a Repository, and then just input those into your terminal, and you then literally know almost all you need. Afterwards all you have to do is do the commit command, anytime you want to make a change. Though, do keep in mind if you already have dev files in the folder you can use “git add .”, instead of the example “touch README” to add all of your files in. Very similar concept to opening a TextMate or window in the terminal, where the period denotes such an action. Now, before I finish up on this section I would like to say that I have never used Mercurial or Subversion but indeed they are possible options and are quite popular among certain crowds. There are even websites that allow you to host your files from such systems like SourceForge, much like GitHub does. Before I finish also I want to mention one last thing. A Git GUI that will help your process quite a bit. And that is, GitBox. It is a really great program, and basically all you need to do to use it is set up a Repository in the same way you would any other time (from the command line). Then you just open GitBox and add in the directory in question from your computer, and you are literally all set. Anytime you make a change it will be automatically noticed and displayed in GitBox, and then you can go about leaving a comment to your commit and then Push it. Do keep in mind though, that the method goes: “change -> comments (if needed/any) -> commit -> push”. Make sure you push only after making your commit, otherwise nothing will happen. And if you are working with a team, make sure you do a pull before doing comments, commits, or anything, to make sure you stay away from any errors you may be having.Supersets, and code tools
A superset, is often defined by a code syntax or extrapolation that sits on top of the language below it. Examples of this could be CoffeeScript sitting on top of JavaScript - or Node.js sitting on top of Node (although, that could be considered a Library as well). It could also be described as something like SASS or LESS sitting on top of CSS that actually adds functionality and new methods for handling things. SASS, also, adds a new available syntax to use similar to how CoffeeScript offers to JavaScript. A good example of a Library would be jQuery on JavaScript, of course. It is something we all probably know and love by now, but it is a good reminder that we are using a Library and/or Superset. Now, I won’t talk about every Library in the world - because simply I haven’t used them all. Nor do I want this article to focus on specific libraries. By way of that, I have chosen to speak about supersets instead, and code tools for certain languages that most of us use. For instance HTML, CSS, and Ruby on Rails specifically. Instead of jumping right in, let’s take a look at some examples to help understand why you’d use these tools and/or supersets. For instance, let’s say you are working in CSS and HTML in Rail (with your developer perhaps, or while being the developer) and you feel like you are wasting time writing so much ERB (which is the way you add Ruby code into rails you will be writing in rails - more on that here). Well, a great thing to do would be to use HAML to speed up writing your HTML, and also to speed up implementing your Ruby code into it. HAML is a superset, of sorts, of HTML that allows you to write HTML code without having to worry about closing your tags and it also allows you to use white-space to your advantage — much like Python. Let’s take a look at an example.And that creates:#wrapper %ul %li This created an unordered list, that is properly semantic.
You can can certainly see how that would save you a lot of time. It is also really fun, and clean to write. It is a joy, in all honesty. Now what about that CSS? You could save a lot of time writing that as well! SASS offers a very similar functionality, but without having to learn a new form of Syntax. So with one subset of SASS (one subset of a superset) you can actually use white-space to your advantage. So let’s take a look at what that’s like.<div id="wrapper"> <li>Test Li</li> </div>
Well, in SASS this would look like:.wrapper { font-size: 12em; }
As you can see, in SASS we don’t need the { } or the closing semi-colons. We also are using the white space to denote that font-size is a child element of the “wrapper” class. withLet’s say you You also assume that only people doing backend dev use versioning control systems, but in fact, we all should know by now that isn’t the case. You can use git and Github to keep a track of each time you do a code commit, and with tools like Gitbox it has never been easier. Now, of course, not all of you are going to be using Ruby on Rails when writing code - but I imagine a good bit of you work with people using it. Anyway, regardless let’s cover some solutions for a solo person who doesn’t work or use Rails in any way. For CSS LESS is a great solution to that. Zen Coding is also a solution for anyone who isn’t working on Rails, but just wants to speed up the rate at which they type standard HTML tags. It is really very useful for anyone. Zen coding is really easy to start working with. o use things like Zen Coding to ease your HTML tags. For instance typing:.wrapper font-size: 12em
you get:ul > li*6
You can also still use LESS to get the mixins and variables and such. That is pretty easy to work with. You also may want to grab a nice tool for working in the terminal called Go2Shell. It is available on the mac app store for free. You can just use that when you need to open the terminal in specific directory which is pretty common. So to use it you want to just navigate to that directory in your finder and simply click the program go2shell and boom your terminal opens to that file. It is amazing. And that will about wrap it up for now, stay tuned till after the summery though for a brief list of places to visit from the article. Those are some of the most useful supersets and tools that I know of to get some of the best outcomes. I would also though like to mention that this wasn't an exhaustive or complete list by any means, so please go about finding out more about it. And, as promised, here are some of the links to what we touched on in the article. GitBox, GitHub, Compass, SASS, HAML, LESS, Ruby on Rails. Happy hunting!<ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
Dain Miller
Dain Miller is a former Presidential Innovation Fellow at The White House, and mentor for developers at starthere.fm. He now works to lead engineering teams at a distributed media company. You can find him on Twitter @dainmiller or at his website
Read Next
3 Essential Design Trends, November 2024
Touchable texture, distinct grids, and two-column designs are some of the most trending website design elements of…
20 Best New Websites, October 2024
Something we’re seeing more and more of is the ‘customizable’ site. Most often, this means a button to swap between…
Exciting New Tools for Designers, October 2024
We’ve got goodies for designers, developers, SEO-ers, content managers, and those of you who wear multiple hats. And,…
15 Best New Fonts, September 2024
Welcome to our roundup of the best new fonts we’ve found on the web in the previous four weeks. In this month’s edition…
By Simon Sterne
3 Essential Design Trends, October 2024
This article is brought to you by Constantino, a renowned company offering premium and affordable website design
You…
A Beginner’s Guide to Using BlueSky for Business Success
In today’s fast-paced digital world, businesses are always on the lookout for new ways to connect with their audience.…
By Louise North
The Importance of Title Tags: Tips and Tricks to Optimize for SEO
When it comes to on-page SEO, there’s one element that plays a pivotal role in both search engine rankings and user…
By Simon Sterne
20 Best New Websites, September 2024
We have a mixed bag for you with both minimalist and maximalist designs, and single pagers alongside much bigger, but…
Exciting New Tools for Designers, September 2024
This time around we are aiming to simplify life, with some light and fast analytics, an all-in-one productivity…
3 Essential Design Trends, September 2024
September's web design trends have a fun, fall feeling ... and we love it. See what's trending in website design this…
Crafting Personalized Experiences with AI
Picture this: You open Netflix, and it’s like the platform just knows what you’re in the mood for. Or maybe you’re…
By Simon Sterne
15 Best New Fonts, August 2024
Welcome to August’s roundup of the best fonts we’ve found over the last few weeks. 2024’s trend for flowing curves and…
By Ben Moss