If you’re a designer like I am, even more if web design is your full-time activity, you probably do things over and over on a daily basis, whether looking for files or looking up things on the web. If you are in that case, and haven’t jumped on the Alfred bandwagon YET, then this post is for you.

Alfred is a mac-only productivity application to help people save time when searching for files online on locally. I downloaded it recently, and let it sit in the top right corner of my mac for a few days withouth touching it.

Then, I dedided to look under the hood and see what the fuss was all about, since I had failed to find an automatic use for it. Needless to say I wasn’t disappointed, and as thousands and thousands of very intelligent people already use it, it would have been surprising otherwise.

I am not going to drill down in detail every feature present in Alfred, mainly because I am far from a power user and don’t know them all, and also because as of today, I have yet to buy the Powerpack (supposedly packed with even cooler features).

Search through local files

Standard install seems to come with the file search disabled. It was the case for me anyway. So make sure you tick the folders, documents, images …etc tickboxes in the default results section of Alfred’s preferences.

Modify web search shortcuts

Shorten those pre-entered web search shortcuts, by altering the command keyword to a minimum (and to your liking). Example, I set the standard google search to a bare “g”, and google images from images to img.

[Alt + Space bar] to open Alfred command line, then “g css framework” (for example) to trigger the corresponding search. Same principle applies to google images (or maps… and more).

Add Custom web search

As mentioned above, we look for stuff every day on the web. But we tend to come back to preferred locations. As far as I’m concerned, I will always tend to click on a css-tricks blog post or forum entry if they come up in the results page.

Why not shortcutting the action by adding a custom search on css-tricks.com, let’s be honest, if you are looking for something specific on web design, chances are it’s been covered by Chris at some point.

It takes two ticks to get those custom searches trigger working. Find out what the website’s results page look like, and replace the search term(s) by {query} in the Alfred’s search URL. Set an icon if you want and give it the trigger of your choice (here I chose css). Booya.

Customize as many shortcuts as you want, you’ll quickly find a variety of websites you will want to add to your little app.
Github, Nettuts, and your own blog if you keep coming back to it, to name only a few.

Have a go at Alfred. Really.
http://www.alfredapp.com/

The post Alfred app custom searches: every minute counts appeared first on shoogle designs' blog.

Let’s get Sassy today with this little yet very useful Sublime Text 2 breakpoint snippet hand made by James Nowland and obviously editable as you wish.

If, like me, you code a lot of responsive sites, chances are that you work with Sass and end up putting half a million @include breakpoint lines, working your site’s scss the modular way… as you do.

Well, this little snippet will surely reduce your work, by allowing you to tabTrigger mq (or whatever you wanna call it) into the full @include breakpoint desired code lines.

Open Sublime, go to Tools, then New Snippet. Copy and paste James’s code in there, and save. Your’re done. You can type mq and tab in your scss and enjoy the ride.

The Snippet:

<snippet>
  <content><![CDATA[
@include breakpoint(${1:papa-bear / mama-bear / baby-bear}) {
    ${2:}
}
 
]]></content>
  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
	<tabTrigger>mq</tabTrigger> 
	<!-- Optional: Set a scope to limit where the snippet will trigger -->
	<!-- <scope>source.python</scope> -->
</snippet>

The result in Sublime:

The post Add a neat little breakpoint snippet to your Sublime appeared first on shoogle designs' blog.

Today, I’d like to talk about a package which I reckon will help a lot of folks keen to keep a hand on their project task management, without having to deal with getting-things-done apps way too complex for their own good.

Don’t get me wrong, I am a big fan of Wunderkit, Producteev, et al, but most times, a list of tasks and checkboxes are way better than the whole nine yeards app that lists your tasks, interacts with twitter, and makes coffee.

Let’s talk plain tasks then, and as a matter of facts lets talk PlainTasks, as the package I wanna introduce is named like so.

PlainTasks is a Sublime Text 2 plugin allowing you to create simple yet powerful todo lists in a few clicks and/or shorthands. I personally recommend to use Plaintasks at project level and create a single todo list at the root of each of your project’s directory structures.

I absolutely love it. It’s simple to install (look it up in your Package Control), and mega simple to use. No need for fancy stuff, all you need to do is create section, tasks, archive, and keep track (once again) at project level of all the nitty gritty things you (and your team) need to do.

If you put your project files in a shared dropbox folder like most folks do, then, do not change anything and make sure your .todo file is there at the root, and up to date for your team.

For full details go to aziz’ github page.

For more posts on SublimeText 2, click da link.

The post Task management within Sublime Text 2 with PlainTasks appeared first on shoogle designs' blog.

Geeky Boys and Girls, this blogpost is for you. I don’t usually talk about gadgets, but this morning, I saw one of my mates use the Sky Wifi SmartPen during one of our entrepreneurs’ get-together meetings, and thought this was one of the most geeky shit I had seen, and hence decided it deserved enough attention to write something about it.

So the concept is simple: “What starts on paper, doesn’t have to stay there.”

Enough words, let’s take a look at the video, it’ll be worth a thousand of my words.

On the spot, I just went wow, then thought how much would I be using this if I got one? Drop your comments to let me know what you think of this product, especially if you already use one…

The post Geek Alert: Sky Wifi SmartPen appeared first on shoogle designs' blog.

Back for a new blog post on the text editor of the moment, with a couple of new tips to increase your productivity while working with Sublime Text 2.

Sidebar enchancements

Working on Sublime Text 2 with the sidebar visible is a must when juggling with a large number of files and folders. Right-clicking on the folders and files gives you the opportunity to create files on the fly, delete unwanted files and folders quickly, and rename your elements while working on them.

However, you may not be aware of the sidebar enhancements plugin which gives you a wider array of options from the very same location. Use your Package control to install Sidebar enchancements and take your sidebar right-click options to a higher level.

Once the plugin intalled, you will be able to see new editing features such as ‘Find and replace’, ‘Copy as text’ (and more), access to project management capabilities, and also a very much wanted ‘Open in browser’ feature which will take your page to your default browser. Neat.

Save your Work environments as a Projects!

When I started using Sublime Text 2, I got used to drag my folders into the sidebar and start working from there. For a wee while now, I have been saving all my work as independent projects, and it does make much more sense to do so.

For starters, you only have to go to Recent Projects to reopen what you had been working on lately. On top of that, it is so much cleaner when switching projects. Instead of having all your folders visible in the sidebar, simply use Ctrl+Cmd+P to bring each and every project independently on screen.

To view the rest of my Sublime text 2 tips: click here.

The post Sublime Text 2 Tips: Sidebar enhancements and Projects appeared first on shoogle designs' blog.

The cool thing about Submine Text 2 is you can literally sit all day talk about its many features and plugins.

We’ve already talked LiveReload, Edit History, Distraction-free mode, ColorPicker, and Placeholders, and today we’re going to bring out the Karma of Sublime Text 2 by installing (and taking a look at) the Zen Coding plugin.

For those of you who wouldn’t be familiar with Zen Coding, it is a set of plugins for text editors that allow for high-speed coding and editing in HTML, XML, XSL, and other structured code formats via content assist. Created by Sergey Chikuyonok in 2009 and actively developed by the Zen Coding community, the plugin has been integrated in all text editors, TextMate, Coda, Espresso and sublime Text to name only a few.

Right, so let’s get down to business, use your Package Control to install Zen Coding.

Once this done, you can start using the full power of the plugin by entering code ‘shorthands’, tab away and start saving you some valuable coding time.

Examples

Simply type your elements such as html, body, or div and use the tab key to get the corresponding HTML elements.

<html></html>
<body></body>
<div></div>

Here are more advanced examples:

Type link:css and use the Tab Key to get the link to your style.css.

Same thing with a table 2 rows 3 columns: table>tr*2>td*3 + TAB

The ‘ * ‘ sign will be your multiplier, while the ‘ $ ‘ sign will increment automatically.

Hence, ul>li*3 + TAB will get you a nice unordered list with 3 items.

ul>li#id-$*6>a[href=# title=title-$] + TAB will display an unordered list of 6 items, each of them having a specific ID and containing a blank link with a specific title… How about that.

… while html>head+body>nav>ul>li.first+li*4+li.last + TAB will give you this:

On top of that, you can even use wrap tags to play with plain data.
For example, you are building the navigation menu of your next site, and have started entering the titles of the sections like so:

About
Portfolio
Blog
Contact

Simply select the four sections.

Use Ctrl+alt+enter and start typing your Zen Coding wrap tag (haiku), in this case nav>ul>li* will get the job done. Note, you don’t even need to specify the number of list elements. The * multiplier will be enough, clever little bugger.

You get the point I guess, so here’s the full list: Zen Coding Cheat Sheet.

I don’t reckon you should go overboard with long combinations of shorthands but having been playing with this plugin for quite some time now, i can guarantee Zen Coding is a great way to improve your productivity in coding.

The post Boost your Sublime Text 2 with Zen Coding appeared first on shoogle designs' blog.

Today, we’re gonna talk productivity, …and common sense really, while touching the very popular subject of social media strategy and the way you decide to display your social network entries.

Right, so you’ve got yourself a beautiful social media icons set forked somewhere on the internet. Somebody has gone through the trouble of a large number of sweating hours, days or months fine-tuning the set for you to adopt/slice/install it on your website in 12 minutes flat.

For this example, I’m going to use Umar’s Social Icons PSD set I stumbled upon on Dribbble.

So this is probably what I would have done a while ago: Open the social media icon psd file, save the icons I’m interested in as png files, ftp them into my remote image folder and start using them on my website’s Contact page.

No brainer really. Unless…

Unless I wanna be a tad more clever with this, keep my options open and save myself some valuable time in the future. Indeed, today, you might only be using Twitter, Facebook (or not!) and Dribbble, but in the future, chances are you’ll be using much more services already available, and chances are the icons of those services and platforms are already on your psd. Therefore, why not keeping them all on one file (and hence keep them on the back burner for potential future use) and take full advantage of the CSS sprite functionality.

There are obvious and good reasons to use sprites in this case:

• you’re keeping your options open as your social media strategy is likely to change
• you keep all your icons on ONE file and won’t think you’re a fucking idiot for only keeping a copy of the icons you were interested in at the time now you need some more icons
• you make sure you use image sprites to group multiple images into a single encoded file and limit the number of HTTP requests into a single one to speed up the page (and in this era of responsive web design and mobile first design(*), this could be of great added value)

(*) Side note, I strongly encourage you to read the very enlightening ‘MOBILE FIRST’ of Luke Wroblewski (@lukew)

Back to our sprite business. Let’s open our beautiful psd file, remove whatever background color the designer might have added behind the icons and guarantee you’ll be able to use your own backgrounds…

…give it a trim to drop the useless white space, and save the lot as a png file.

Now, you could do the maths or measure the icons’ dimensions and positions on Photoshop, but some smart people having invented online services doing it for you, you may as well use them. Go to Spritecow, open your image and click on the first icon you need to use on your websites.

Spritecow will give you a few lines of CSS you’ll be able to add to your own stylesheet.

Repeat the following steps for all desired icons. Be smart and use a separate class (like .social) for the css lines shared by all icons. Finally, set a class for each social media with the SAME background image and the correct background positions:

CSS

.social {
	display: inline-block;
	width: 46px; 
	height: 45px;
}
.twitter {
	background: url('Simple-Social-Icons.png') no-repeat -180px 0;
}
.dribbble {
	background: url('Simple-Social-Icons.png') no-repeat 0 0;
}
.rss {
	background: url('Simple-Social-Icons.png') no-repeat -240px 0;
}

HTML

<ul>
	<a href="https://twitter.com/shoogledesigns" target="_blank" title="follow me"><li class=" social twitter"></li></a>
	<a href="http://dribbble.com/shoogledesigns" target="_blank" title="check my shots"><li class="social dribbble"></li></a>
	<a href="http://dribbble.com/shoogledesigns" target="_blank" title="fancy RSS?"><li class="social rss"></li></a>
</ul>

Result on screen

LETS CONNECT

We’re now one year down the line and you have decided to share your work on Forrst? Easy peasy lemon sqeezy. Reopen the sprite with SpriteCow, define the forrst icon location on the png and add two simple lines of codes in your HTML/CSS.

.forrst {
	background: url('Simple-Social-Icons.png') no-repeat -60px 0;
}

<a href="#" title="forrst"><li class="social forrst"></li></a>

Result on screen

LETS CONNECT

Simple, wicked and time saving.

Download files here.

The post Use sprites to keep your social media strategy’s options open appeared first on shoogle designs' blog.