I’ve just discovered Sip, a color picker app for Mac users. “Just discovered” since it’s been around for a while. I’ve seen reviews of the app older than a year, but eh, you can’t be on top of everything, can you.

Those reviews were mentioning the fact was coming at the price of $0.99, but today, it is free.
I’ve only started playing with it, but I love its simplicity.

You can set it up to use you preferred color formats, there are loads of shortcuts, and there’s also a Adobe Photoshop CC extension sending the picked color to Photoshops background color as shown here.

To have it running from startup (as it will disappear after reboot), go to System Preferences > Users & Groups > Login Items, press the + button and then choose Sip.

So long.

The post Sip: a color picker refreshingly simple indeed appeared first on shoogle designs' blog.

I have recently finished a project based on Perch, the clever ‘little’ CMS created by edgeofmyseat.com, a web development company located in Bristol run by Rachel Andrew and Drew McLellan.

As the experience was a total pleasure, I thought a blog post was not only on the cards, but also a compulsory duty.

“Everything you need while remaining the closest to a modern web designer’s workflow” is what I tweeted at Perch a couple of months ago. Still valid today, and for a good reason: the amount of markup needed to convert a static site to a CMS-supported format is minimal. Needless to say the time spent on that particular task becomes a breeze, so you can focus on what you’re (supposed to be) best at.

Perch is all custom fields

That’s right folks, Perch is entirely based around structured content and therefore every template is a collection of “custom fields”. To read more on the subject, check this oldish yet still valid blog post from Rachel.

Ramp up

I can only encourage you to take a look at the videos Rachel and Drew put up on their site. You will see by yourselves that adding the Perch layer on top of your newly-created site is THAT easy and simple.

The only advice I would give you is to really take the time to read the documentation. I made a bunch of mistakes in the early days of the project because of too much enthusiasm. I was too eager to get going with it I forgot to carefully plan my regions and ended up taking a good part of what I had done down, and replace it with what I was supposed to do in the first place.

A few things too valuable to miss:

• How do I create List/Detail pages?
• Building a gallery portfolio in Perch
• Repeaters

Why not use WordPress

Don’t get me wrong, I love WordPress, it’s a fabulous tool. And getting a WP site up and running can be done quickly. This post is not intended to make you go off the open-source tool.

But let’s admit it. Custom theming a WP site from a static site is time consuming. And making the site perform as good as you’d like to see it is also resource consuming. Therefore having a simpler alternative to WordPress is a pleasure. And a massive option. That’s all.

Apps, plugins and more

Especially since Perch comes up with a ton of features. Apps, plugins, integration tools, the lot. Backup, Blog, Comments, Events, Forms, Gallery, Members, ecommerce (with Paypal or Foxycart), and translation into 9 languages are all being handled with/via Perch.

Think about it, how many of your latest projects would be needing more than that? Probably only a few would be necessitating the compulsory use of WordPress. More than likely for very specific reasons.

But it ain’t free, is it?

Perch isn’t free alright. The single license for one website (one license with staging and development instances) comes at the reasonable price of 50 quid (or €59). For your info, you’ll get 5 and 10-pack discounts. All pricing details here.

I can assure you: it is definitely worth the price. Include it in your quote, and give yourself (and your clients a favour). “Is that it?” is probably what your clients will tell you after having been shown around the perch admin interface.

Verdict

Inexpensive, flexible and wickedly Simple.
A small CMS bound to get bigger, especially since announcing the future release of Perch Runway, the new edition of Perch allegedly designed for those bigger and more complex sites. Watch out for this.

So long folks.

The post Perch – the CMS that does not pollute your web design workflow appeared first on shoogle designs' blog.

More of a reminder than a pure detailed blogpost, this code snippet will be my go-to resource when I embed videos in a project, and obviously want them to be responsive and well behaved whatever the size of the terminal.

You all know that setting the video object to width:100% won’t be enough to make it look good since the height/width ratio won’t be respected.

Seen this at btconf, during Ethan Marcotte‘s talk, and thought I would use this pure (+ simple + clever) css technique. As I looked for it again on the web, I found it hard to locate it so the reason of this blogpost.

.video-container {
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
}

.video-container > * {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

There’s a codepen for it.

So long.

The post Responsive video code snippet appeared first on shoogle designs' blog.

We’ve all been there. You want to select a good chunk of text on a website, only to realise you can’t since the text has been embedded.

Cry no more, here’s naphta to the rescue.

“Project Naptha automatically applies state-of-the-art computer vision algorithms on every image you see while browsing the web. The result is a seamless and intuitive experience, where you can highlight as well as copy and paste and even edit and translate the text formerly trapped within an image.”

… So its extension description says. Once you have it installed, you forget about it, until you do need it. To be honest, it’s not 100% accurate, I got a “Bilch Dlease” when I tried a popular meme.

Still, it’s cool enough. You can look up stuff in google, or play with the multi-language feature.

Cool attempt above, full demo over at http://projectnaptha.com/

Nifty I told you.

The post Project Naphta: a nifty extension to play with text embedded in images appeared first on shoogle designs' blog.

Nothing beats using a real professional photographer when working on a cool project.
You can be the best designer/dev in the world, if the pictures you have available look crap, there’s little chance your website will look at its best.

For clients and projects with lower budgets, and little room to maneuver, there are quite a few resources I tend to check out. I had been meant to put them all together on a blog post for you and for myself. And this day has finally come.

My favourites are the small shops releasing regular batches with a dedicated theme.
Death to the Stock Photo is defo one of them.
Same idea with Little Visuals who release 7 hi-res images zipped up in your inbox every week.

A sample from Little Visuals

Other place I like to check: Unsplash, especially since Arthur Weill released a little search engine for Unsplash.

Other services worth checking:

• Morguefile
• New Old Stock
• Picjumbo
• Gratisography
• Getrefe
• Search Creative Commons
• Flickr Creative Commons
• or Compfight
• Photopin
• Raumrot
• Jay mantri
• Startup stock photos
• Pexels
• Travel Coffee Book
• Magdeleine
• Stocksnap.io

New kid on the block, Stock up offers a search functionality looking through most of those quoted above.

Finally, do not forget you can look up Google images with advanced search and license labels selected.
Note that you have the same thing with Yahoo images (check the bottom of the filters and Label for reuse).

UPDATE: Check out Canva’s blog post on the subject. They’ve put together a 74 free stock photo resource for their users. No doubt you’ll find what you’re looking for in there.

The post Free photos for your web design projects appeared first on shoogle designs' blog.

I’m just back from Düsseldorf, having attended for the first time Beyond Tellerand, the now-famous web design conference organised by the now-equally-famous Marc Thiele.

I fully enjoyed it. For starters, the venue was a cracking one (Düsseldorf’s Capitol is a cool and beautiful venue for musicals, theater and other events), the hosts had it all planned out for a large audience (500 of us), the line-up was awesome (see my highlights below), and more importantly there were tons of booze (only half kidding).

It all started with a pre-conf warm-up party in the Altstadt, at the Coworking Space GarageBilk. I had the chance to make that one, since I was traveling from Brussels on Sunday. Quite a few beers and a night later, we were all set to make it into the Capitol for the first conf talks.

The conf being single tracked, there were no chances of missing out on cool stuff, and although I found the pace of the conference far from intense, it gave us all the chance to network and share our little geeky stories outside, under — most likely — the brightest sun seen at #btconf since its start.

Right, my highlights of the two-day Conference were (in no particular order):

• Ethan Marcotte‘s “Laziness In The Time Of Responsive Design” prez. As a designer/front end dev spending most of its time thinking about responsive stuff, it obviously meant a lot seeing Ethan in the flesh.
• Chris Coyier‘s “SVG Is For Everybody” talk which has got to convince you to jump on the svg bandwagon if you — like me — have yet to make that move.
• Robin Christopherson‘s overwhelming talk on accessibility. “Technology – The Power And The Promise” is the name of the talk, and I can only encourage you to look it up as you’ll learn a thing or two, and will defo be willing to put more thoughts on accessibility when starting a new design. By far the most touching talk from Robin. The kind of ending that make you want to rush back home and hug your kids.
• Daniel Mall putting your good ol’ waterfall methodology to sleep and leveraging collaboration between ux, design and development, and showing us the many tools/processes he uses during his small and large responsive projects. Very thorough and detailed.
• Jonathan Snook‘s review of the smacss methodology. You had to love the “don’t code css for the page, code css for the system” quote. CSS isn’t such of a mess when you modularize, isolate and refactor after all. Side note: I was kind of glad to hear Jonathan’s code bloat remark when inappropriately using extends, which I tend not to use all over the place for that very same reason.
• Karen McGrane‘s “Content in a Zombie Apocalypse” was very entertaining and since I spent quite some time to move some very important content from a pdf file to a presentation-independent digital format this afternoon, I was wondering throughout the day when our content would indeed be ready to be burned on delicious toasts, …classic quote from Karen yesterday.
• Typography is far from the most exciting subject to me. I was however mega chuffed to have been there for Erik Spiekermann‘s “Type Is Visible Language” talk. Very enlightening and entertaining.
• finally Jon Burgerman‘s crazy and hilarious creative talk on his art, life and jacket.

What a community

I had the chance to make small talk with Ethan and Chris, those guys are real rock stars to us, ain’t they. As I mentionned it to Chris late on Monday night: we are so lucky to be living (as in growing, working and round we go) in such a fucking cool community.

Guys like all those great speakers, and the many more other amateurs out there, all ready to share their work, is what makes us grow. I personnally know what I’m talking about (I graduated in mechanical engineering) and today, I live off playing all day with html, css and more…

VERDICT

Beyond Tellerand was awesome. Good talks, great time, and way affordable.
In five words: See you next year btconf.

Kudos to Marc and the rest of his squad!

The post Beyond Tellerand 2014 : a look back appeared first on shoogle designs' blog.

A quick blog post on how to make Google Charts play nicely in responsive mode. Nothing close to rocket science but still useful.

For those who don’t know, Google Charts is a visualization tool, a gallery of interactive charts and data tools that you can integrate into your website. You provide data through php, json and Google Charts display it nicely for you.

As I’m using those in a project involving responsive web design and encountered a minor issue, I thought I would post a wee something for you’s.

Issue

By default, the charts come in the form of fixed width element which you can easily tweak to adapt to the now-famous ‘width:100%’ format. However the charts will only appear in that format when the page is loaded. They won’t dynamically resize when the browser window width is changed.

This is what the charts look like when initially loaded:

This what they look when resizing the browser:

This is what they look when reloading the page:

Solution

You will need to add a little jquery to get that to work as expected.

$(window).resize(function(){
  drawChart1();
  drawChart2();
});

There’s obviously a codepen for this.

So Long.

The post Make Google Charts responsive appeared first on shoogle designs' blog.

I was on holiday when Bryan released the new version of Codekit and never had the chance to to check out the full features of the newly released application. But I have to admit I really liked the looks of the new website (designed by – I believe – agenericguy) and I could not wait to come back and have a go at it.

I have always been a fan of the big man’s application, despite having moved to grunt for projects necessitating more than myself on them.

Compiling, Image optimization, minification, browser refreshing are obviously still on with this new version, so what’s new in Codekit 2, beside the brand new UI?

Built-in server

Codekit 2 introduces a buil-in web server that hosts your currently-seleted project.

Very cool as you can preview your work (there’s a button for it) and use that url to preview your work on various devices. Live refresh will work the way mixture does it and your connected devices will be reloaded upon changes.

Codekit can be hooked up with MAMP if your project needs it, by turning the external server required switch on.
Note that Bryan has got your Android needs cover, with the non-Bonjour URL.

Bower

Bryan has added the package manager for web dev within the new version of Codekit.

This means that installing normalize, jQuery, bootstrap or foundation can be done in no time within the application. And that your components can be easily updated right from Codekit.

Autoprefixer

Great news, Autoprefixer has made it into Codekit. You can now enable the feature on a file-by-file basis. Codekit will run Autoprefixer on the CSS file created.

What about Codekit 1?

So what’s happening to Codekit 1? Well, it’s been deprecated and it won’t receive any additional features. I’m sure a few people having purchased version 1 will feel disappointed, but don’t be. Really.

We all have had a great run with version 1, wich was a gift to us really. And now, we end up with a better verion for (again) nothing since you get it for between 29 and 38 bucks (you actually get a discount on that if you’re coming from version 1). It’s a no brainer.

Verdict

There are more features and fonctionalities added to the new version of Codekit but I wanted to make this post a quick one. I can only encourage you to check it out yourself but I can assure you Brian has really upped is game on this one.

I’m defo gonna upgrade and move to Codekit 2. The new version makes you want to push grunt aside and go back to where it all started.

Good work Bryan!

So long.

The post Codekit 2 : even more steroids for us web developers appeared first on shoogle designs' blog.

A quick one nudged my way by Adrien Joly this morning.

You can now open a terminal window from a selected folder using Finder on Mavericks.

Go to your System Preferences.
Choose Keyboard > Shortcuts.
Choose Services on the left panel.
Then under Files and Folders on the right panel, tick New Terminal at Folder (New Terminal Tab at Folder is also available).

Once this done, you’ll be able to right-click on a specific folder from Finder, then choose Services > New Terminal at Folder.

The post Open terminal from folder in finder appeared first on shoogle designs' blog.

I went to Wordcamp Paris last week. The event was held On Friday 17th January at MAS Paris and Saturday 18th at Sup’Internet, and organised by WordPress Francophone.

Having joined a so-called Paris WordPress Developer Meetup group a while ago, and failed to see even one drinking session within the community, I was slightly dubitative over the success of such an event. But with a two-day conference all booked out, I can only have praise for the organising team as they made of those two days a real opportunity to bond and discuss wordpress-related matters.

Don’t get me wrong. I didn’t like everything I’ve seen nor heard. In fact, I happened to disagree with a number of things I’ve heard both on stage and while discussing with some fellow participants, especially on the theming front, but it was – again – a wordpress event full of quality and all round worth attending.

And the winners are

My kudos go to:
(personal kudos, might not reflect the reality)

• Amaury Balmer‘s prez on wordpress project industrialization
• Sara Rosso‘s focus on what challenges WordPress Agencies face for the Next 10 Years
• Whodunit’s business case with Bus Open Tour. Good prez (despite what she thought of it) from Emilie Lebrun
• A fun presentation from Kim Gjerstad from Mail Poet on the company’s emailing service (within WordPress)
• Caspar Hübinger’s Multilingual Press presentation
• WP Rocket co-founder Julio Potier‘s technical yet funny act on WordPress hooks
• A special mention to Aurélien Denis for his sane view of the WordPress theming principles.

Did I mention that we got the two-day conf, and on top of that coffee/croissants/a bit of a lunch on Thursday for the mere cost of 30 euros? Bargain, you’ll tell me, and bargain, I shall agree. It doesn’t seem like much compared to the big web confs out there, but it was well worth it and such a refreshing event.

To sum it up: See you next year.

Note: take a peek at the event’s official pictures.

The post A look back at Wordcamp Paris 2014 appeared first on shoogle designs' blog.