When you develop websites for a living, it’s inevitable that you write the same lines of code over and over. While the goal for some of these repititions might be to create a generic stylesheet (a reset) or create a plugin for javascript code, sometimes it’s just not enough code to need to create a whole system for. It is, however, enough code that not having to write it each time would save you hours of time over the long run.
To help yourself even more, you should consider learning about the event driven platform.
Enter TextExpander. (Or any other text expansion software. This just happens to be my favorite.)
What Is TextExpander (and text expansion)?
TextExpander is one of many text expansion softwares available for developers and everyday computer users alike. Text expansion is basically the ability to set up shortened snippets of text that automatically convert to long lines of text. For example, I could set up a snippet that would tell the computer to type out my full name – Marcus Dustin Burnette – whenever I type my initials – “MDB”.
My Favorite 10 Text Expansion Snippets as a Web Designer
#1 – Email addresses:
As a designer, I frequently sign up for product announcements and service trials. Over the years, I’ve changed my email address a few times, but I still need to type these in whenever I need to login to a service’s website. Furthermore, I constantly give out my current email address to mailing lists, etc. so it just makes sense to keep these on hand. Each of them have a pattern that makes it easy to remember:
emf
my FliteHaus (work) email address
emg
my Gmail (personal) email address
emy
my Yahoo! email address
#2 – CSS3 Vendor Prefixes
If you’re like me or any other modern web designer looking to move the web forward, you are likely moving toward the worlds of HTML5 and CSS3. Unfortunately, getting these CSS effects to look great on each browser still requires a few vendor prefixes. To make life a bit simpler, I’ve set up a couple of my most used ones for text expansion:
b-rad
-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
b-shad
-moz-box-shadow: 0px 2px 3px #ccc; -webkit-box-shadow: 0px 2px 3px #ccc; box-shadow: 0px 2px 3px #ccc;
b-trans
-moz-transition: 0.4s; -webkit-transition: 0.4s; transition: 0.4s;
#3 – Code Comments
I love commenting within code. I work on so many projects and come back to them months later, that it’s near mandatory that my code has gratuitous amounts of comments.
But they’re not all created equally. HTML comments have brackets <!– –>, CSS and javascript comments have slashes with asterisks /* */, and I also like to keep a comment heiarchy in my CSS (Section -> Page -> Sidebar -> etc). Here are just a few I’ve set up to keep my comments consistent: (Note on all of them, I’ve included a %| that tells TextExpander to place the cursor in that position after expansion)
<!–
<!– %| –>
/**/
/* ——————————————— %| — */
/*-*/
/* —– %| —– */
#4 – Lorem Ipsum and Other Placeholders
When starting at the very beginning with clients, it’s likely that we don’t have much real content. While it is important to maintain where dummy content has been placed throughout a project (don’t forget to remove it later!), sometimes it is necessary to fill some empty space with faux content. For this, I have set up a couple lorem snippets:
loremshort
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
loremlist
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
- Vestibulum auctor dapibus neque.
- Nunc dignissim risus id metus.
- Cras ornare tristique elit.
- Vivamus vestibulum nulla nec ante.
- Praesent placerat risus quis eros.
- Fusce pellentesque suscipit nibh.
#5 – Drupal Helpers
I deal almost exclusively with Drupal sites. With that in mind, there are some quick snippets that I’ve decided to create to aid in faster Drupal development:
user?d
user?destination= [helps me login and get back to the page I was on]
sallt
sites/all/themes/%/ [helps type out theme paths much faster]
#6 – Symbols
These are the things hidden away in the character palette that just shouldn’t be that hard to get to:
->> and -<<
→ and ←
>> and <<
» and «
(c)
©
#7 – jQuery Helpers
Admittedly, I’m a javascript and jQuery novice. It’s already hard enough for me to remember what code to write for these, so I’ve added a couple helpers to get me started. For the sake of this article and your sanity, I’ve just added a description of each and not the code:
initjq
This snippet adds the document.ready code necessary to get started with my functions and whatnot
e.prev
I just hate typing e.preventDefault(); over and over again.
siaf
Adds a self invoking anonymous function to the code.
#8 – Typos
Yep, I make mistakes. I consider myself to be a pretty good speller, but there are just some words that don’t come out right when I try to type them. While it’s not technically expansion, it’s still a great way to correct mistakes before they get emailed to a client. Here are just a few of the words I spell incorrectly that need some text expansion help.
physican
physician
definately
definitely
Traid
Triad
gmial
gmail
#9 – Things I Can’t Remember
There are just some things that I can never remember. And for that, I’ve got text expansion:
YouTube RSS Feeds (ytrss)
http://www.youtube.com/rss/user/%fill:username%/videos.rss
iOS Touch Icon Code (iosicon)
<link rel=”apple-touch-icon” href=”/custom-icon.png”/>
Responsive meta tag (rmeta)
<meta name=”viewport” content=”width=device-width”>
#10 – Personal Snippets
Inevitably, there are many times I need to type out my address, phone number, or other repetitive text. I have set up a couple snippets to aid in speeding up the process:
209lc
This outputs my street address, which I won’t include here for obvious reasons
wints
Winter Springs (the city I live in here in Florida)
ph#
My cell phone number which, again, I am not going to share for obvious reasons
Share Your Favorites!
So that’s my list, but there are limitless possibilities to what you can create a snippet for. If you have any really great ones, I’d love to hear about them. Leave your greatest snippet(s) in the comments area below!
