I am a huge fan of Codekit. I don’t have enough words to praise Bryan (who is such a cool guy) and his dev tool, and since I work 95% of my time on Apple, Codekit is AND does all I need as far as my Sass is concerned.

But I happen to use windows machines every now and then, and although using the command lines “compass create” and “compass watch” is far from rocket science, I do miss Codekit’s features so much when I’m on Windows environments.

Huge news this week for Windows folks (sorry if I’m late to the party). A clever guy (Subash Pathak, you can give him some love here) released a free windows version of a Codekit-like app, named Prepros, and I thought I would give it a go.

Be aware that I’m only testing Sass here. Prepros looks like it compiles a number of other languages including the likes of coffee script, jade (whatever this is lol), and more, but I’m not touching those.

Install

Let’s get cracking then. There’s not a huge amount of documentation on the site, but install and use are easy enough. Grab the app by downloading it (green button), and run the .exe.
Save the Live Browser refresh chrome extension in your files, open your chrome extension page (chrome://extensions), grab the saved extension file and drop it on the extension page.

Then it’s dev time. Go ahead and create a test folder. And add it to Prepros by dragging it onto the app (or use the + icon to locate the folder). The moment you add an scss folder and a file in it, Prepros will automatically recognize it and create a config.rb file and a .sass-cache folder.

Edit the config.rb file as you wish, and create a css folder. You can then adjust the name of your css, img and js folders right on Prepros. For the rest, use your preferred text editor.

Live Refresh

1. Make sure you tick the “Allow Access to file URLs” checkbox in your chrome extensions settings

and 2. do not open your html straight from the browser or by choosing open file with following a right click. Use Prepros’ ‘Open project live url’ as Subash stated it in the FAQ. Change your files and watch your html getting refreshed automatically.

Verdict

Very much impressed with Prepros. We were promised a free version of Codekit for Windows, and the least we can say is we did get that. Well done Subash!

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:

We can all agree keeping our development WordPress database in sync with the production is pretty important and neat when it comes to WordPress theme development.

And you might already know WP Migrate DB, the cool little plugin that exports your database as a MySQL data dump, does a find and replace on URLs and file paths, then allows you to save it to your computer.

Well, you will be delighted to hear that the guys at Delicious Brains are releasing Wp Migrate DB Pro, taking this wp database sync business to another level, and offering (in exchange of a one-time fee) features such as:

• Pull production/staging db down and replace local db
• Push local db up and replace production/staging db
• Select tables to export
• Unlimited find & replaces (currently you can only do 2)
• Compatibility with multi-site
• Priority email support

Developer edition at $99 for use on unlimited sites looks right up my street if I’m honest with you.

A visit of La Cantine in Galerie Montmartre, Paris II had been on my cards for ever. And last week on Friday, I had a meeting in Paris in the middle of the afternoon, and decided to go into town early, and have a chance to sit in La Cantine for most of the day.

And ‘I wasn’t disappointed’ might sound like an understatement. Very chilled out atmosphere, with no payment, nor question/form to fill upfront. Somebody working there will be gentle enough to show you around, make you a coffee, and guide you to the co-working area.

Paris area-based freelancing folks, I can only encourage you to test this place. It is literally buzzing with energy. You can work on your own, meet people, and network. On top of that, prices are mega affordable. Needless to say I will be back in there.

http://lacantine.org/
151 rue Montmartre, Passage des Panoramas
12 Galerie Montmartre, 75002 Paris
@lacantine

Claude Monet used to say: “Color is my day-long obsession, joy and torment”.

Not that I would want to fool you in a very unfortunate comparison between one of the most known French painters in history and myself, but yes indeed, colors matter to all of us.

Especially in the process of building a brand’s identity, or designing a website. I have to say I’m absolutely rubbish at picking colors and associating them, and although the challenge of taking a company’s digital identity from the ground up is always a very exciting project, being handed a set of colors to work with from the start is often more comfy to me.

This was before Color by HailPixel appeared. A very handy browser app helping you make color selection and color association on the fly, by simply hovering across the screen before clicking to pick the hex code of your choice.

Hover back and forth for hue, up and down for lightness, and scroll to fine tune the saturation, and you’re done.
On top of that, you can share your selections with your friends/customers/mentors with a simple url.
An example: …#699858,77EEBC,E7E741,0F1B03,…

Been playing with this tool for a few days, and i have to say I can ALMOST feel like I can pick colors now. Have a go at it…

There are tons of good reasons to use version control systems.

Number one is obviously being able to keep total control over the changes made to your code. Whether you work on your own, or collaborate on a project, making changes and committing them through a version control system ensures you and your team are in total sync with your code, and allow you to quickly roll back if needed.

This week, I spotted a free ‘Try Git’ course while taking a look at Code School‘s available courses. I can only advise you to create yourself an account and follow this one.

However, folks like me, ie autodidacts who have not learned web design, computer science in uni — let alone version control! — will have difficulty grasping the concept and universe of Git without a bit of help.

This does remind me of the day I did understand Git. I had been reading quite a few things on it, without passion to be honest, and the projects at hand had kept me away from really digging into it…

… until a few months ago when I watched Scott Chacon‘s video and it all became clear, and I stayed motivated to learn some more.

So, if you are, as i was, allergic to terminal, interested in version control system, knowing you’ll have to get cracking one day, but yet too lazy to dive into it, now may be the time you commit to it, and watch this video.

ps. you’ve got to love Scott’s energy.

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.

Responsive web design and mobile testing, whether live on the devices available at hand, or via the use of emulators, have definitely become an important part of designers’ lives and workflows.

Testing a newly designed website in real life, i.e. on specific devices is obviously the best way to go. But owning 20 odd devices just for the sake of mobile environment testing can be a costly affair, and unless you’re a mobile guru like Luke Wroblewski (pictured below), you may want to use emulators in order to test your designs on a wide set of devices.

Today, I’d like to introduce you to MITE, an app I’ve had the chance to try lately. MITE is short for Mobile Internet Testing Environment, and has been developed by Keynote Systems. The app is free to download and use, but a paid version will allow you to simultaneously test your design from 7 locations and on 7 devices.

If you can survive the urge to cancel your download of the 700mb install file, which is longer than a week in jail, you will surely appreciate the many features of MITE.

The app allegedly allows you to see your design on more than 2100 mobile devices, but also provides great information of potential issues with your code. The MITE score will give you an idea of how well your site has been designed, and the app will give you direct access to source code, and the chance to automate your testing.

Huge downside: It’s a windows-ONLY app.

More details: http://mite.keynote.com/

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…

This week, we are going to talk responsive design with — what’s already an ancient pitch from — Ethan Marcotte, adaptive maps with Mr Frost, prototyping iPhone apps with Ratchet, and a screencast library provided by Peepcode.

Responsively yours

So what’s been happening this week? Well, the top news for me is obviously the launch of my new website, in responsive fashion. As we speak today, I’ve released the latest part of my work, i.e the blog side of my site which has now the look and feel of the static homepage I have had the pleasure to develop on the side.

We may as well stick to RWD while we’re at it. Funnily enough, and despite the fact I’ve read pretty much everything on responsive web design these last few years (including the now-famous Responsive Web Design of Ethan Marcotte), I had never watched Ethan’s initial speech on the subject, which took place at An Event Apart San Diego 2010. No breaking news you will admit. But watching it in retrospect, I wonder if the man had any idea of the impact his work and book would have on us and the web in general…

Here’s a link to it for those who would like to watch or re-watch the pitch.

Still on the subject of RWD, a little essay from Brad Frost, which touches yet another aspect of the responsive/adaptive area, and how we could (or should) approach the integration of maps in our design. Very enlightening as usual.

Adaptive Maps

Ratchet

Since I’m just out of Appdays Paris (event which too place last Friday), this link did catch my attention. If you are a newbie like me when it comes down to mobile app design and development, you may want to take a look at Ratchet, a framework helping you prototype iPhone apps with simple HTML, CSS and JS components.

http://maker.github.com/ratchet/

Peepcode

Finally, a link to Peepcode, specialists in screencast tutorials for web developers and designers. Some neat Play by Play series on all kind of technologies, and a deign bundle likely to get bigger in the coming months and years.