flopreynat.com

No camera was found

2017-05-31T00:00:00+00:00

You’re most likely running on Mavericks, or El Capitan, are using your mac or a monitor with integrated camera, and keep on getting something along the lines of ‘no camera was found’ messages from Hangout or other web conferencing apps.

Issue happened to me on dozens of times with an Apple Thunderbolt.

This post isn’t intended to get to the bottom of this issue. So you can put back the screwdrivers where they belong. These few lines are only here to present you with a workaround, and remind myself of this little fix.

So,… Issue seems related to the VDCAssistant process getting invoked every time the camera is being used by an app, but not properly closing, hence blocking its future use.

Kill ‘em all

Open the terminal, and run the following command:


$ sudo killall VDCAssistant

You’ll need to input your master password. Camera should be up again. For now…

As I said, just a workaround.

So long.

Responsive email design framework MJML to the test

2017-05-16T00:00:00+00:00

Email design is a real pain in the arse. We all know that. Therefore I decided to give mjml a go. For those who don’t know of mjml.io, it’s a responsive email design framework built by a team of developers at Mailjet, a competitor of Mailchimp.

The beauty of this framework results in the fact that you create something very much close to html, using an MJML markup language, and as mentioned in its detailed documentation, “its semantic syntax makes it easy and straightforward and its rich standard components library speeds up your development time and lightens your email codebase.”

MJML’s open-source engine, which is - by the way - written in NodeJS (hence easily installed via npm), leverages ReactJS and takes your mjml email designs to process high quality responsive HTML compliant with best practices. That’s the whole idea.

Easy and quick, Responsive, Component based

As I had nothing much to work with for starters, I decided to use somebody else’s work, and picked this beautiful minimalistic newsletter (designed by Dmitri Litvinov) I found on dribbble.

I won’t go into the details of the design process but with the help of the doc, I put all the components together in a matter of minutes, generated the html template using the terminal and the follwowing syntax:


mjml yourfile.mjml

Results

Here’s the final result of my work in both gmail and protonmail. Something not only esthetic but fully functional.

Verdict

If you’re willing to send what looks like a professional responsive email, without having to use a third-party design service, then I defo advise you to give mjml a shot.

So long.

DuckDuckGo hacks for developers

2017-04-18T00:00:00+00:00

DuckDuckGo is by far the best search engine out there. For your own privacy for starters, and also as a great little tool for us dev folks, adept of quick tech & code answers, and geeky little features.

Smarter Search!

A few tips and tricks that you may not know of. I’ve been using some for few for months, and only discovered others in the last few days.

Navigate through search results using Vim Line Navigation k – navigate upwards j – navigate downwards

Cheatsheets

DuckDuckGo offers a wide range of cheatsheets. Try them out. Just type the language, app, or software of your choice + cheatsheet. e.g. “jquery cheatsheet”, “css cheatsheet”, “javascript cheatsheet”, etc

Bangs

If you wish to look for something on a specific site, like Stack Overflow (!stack + query) or CSS-Tricks (!csstricks + query). The list of bangs is “here”. Here’s a cool one you can try yourselves: “!caniuse flexbox”

Personal Data Privacy: start off 2017 on the right foot

2017-01-03T00:00:00+00:00

New year new start. What a great opportunity to start it off on the right foot and greatly improve your behaviour and overall awareness on the personal data privacy subject. You will feel great and you will start breaking the chain!

As discussed last time we talked on the matter, our personal data privacy matters a lot, and yet, it is being violated more and more.

A quick glimpse at the news tell us the UK and Theresa May are trying to pass a law that will make it obligatory for internet providers to store every user’s history for up to a year (although the text has just been declared unlawful by EU’s Highest Court), or the German secret services are allegedly wanting to decrypt messengers like WhatsApp via the ANISKI project. Mass surveillance is a hot topic, and defo on the rise these days.

Big Deal, I have nothing to hide.

Killing the ‘nothing to hide’ argument is probably the easiest thing in the world, so try it yourselves (just for fun) if an idiot tells you he/she has nothing to hide, with this set of decent questions/requests I heard a few folks suggest.

“Why the fuck do you have curtains in your house?”
“Hand me all your passwords if you have fuck all to hide then.”
“Give me your bank receipts of last year, since there’s nothing spectacular in there.”

Bottom line is: I don’t have anything to hide.
But I don’t have anything I feel like showing you, either.

So Why is Mass Surveillance wrong?

it invades our private life space
we have absolutely no control of what is being recorded
nor how long it is being stored
it might not reflect reality
it might reflect the reality and we might not want to let people know things
it inhibits free speech
it inhibits free association
it puts free press in real danger
it kills creativity
it has yet to be proved successful in the fight against terrorism

The thing is, …this is far from new.

As discussed in this series’ first post, people farming, or automated data processing by the likes of facebook, google and the rest is not only something we signed for (by agreeing to the unread and unreadable services’ terms and conditions), but something we have absolutely accepted as THE standard web app model. As in free but far from private.

Examples are countless, but to name only one, feel free to check Über’s latest terms of use update, where you grant Über a worldwide, perpetual, irrevocable, transferable, royalty-free license, with the right to sublicense, to use, copy, modify, create derivative works of, distribute, publicly display, publicly perform, and otherwise exploit in any manner any User Content.

Talking about Big Brothers, you will also enjoy those quotes from a Google executive, stating “Google policy is to get right up to the creepy line and not cross it”, or even “With your permission you give us more information about you, about your friends, and we can improve the quality of our searches […] We don’t need you to type at all.”

In addition, and as stated in a court filing, “all users of email must necessarily expect that their emails will be subject to automated processing. Just as a sender of a letter to a business colleague cannot be surprised that the recipient’s assistant opens the letter, people who use web-based email today cannot be surprised if their emails are processed by the recipient’s [email provider] in the course of delivery.”

OK, so Google is kind of reading your emails, facebook is recording everything you do/post/interact with for ever, and even if you don’t use those services, you are being followed by countless trackers anywhere you go on the web. Not aware of this? Check out the Do not track series, they surely will entertain you.

So…

Any solutions out there?

As clearly stated by Aral Balkan in his talk, regulation, legislation, and ethical design are indeed the answers.

But while waiting for our constitution reps to dump lobbyists and defend our digital rights, let’s do our part.

Let’s do our part and break the chain

Do not use Facebook/Gmail/etc… if you can
If you can’t, Do not put your whole life on Facebook, Twitter, etc…
Use DuckDuckGo as default search engine, as they don’t track you
Block laptop camera + laptop microphone if you are not using them
Turn off location on your mobile phone as much as you can
Turn off your phone at night
Use Tor as much as you can on your desktop
Use Orbot (and hence Orfox) as much as you can on your android if you have one
If you don’t have enough patience, use Mozilla’s Firefox as default browser. Ok they get funded by the other big guns I’m talking about (as they need mozilla’s search traffic). But they’re non profit, big on privacy and encryption, so let’s give them credit.
Block trackers (Better from Indie for Safari, uBlock Origin or Ghostery… although I’m hearing things about Ghostery selling their stats back)
Get a Protonmail account ffs! Paying a small amount for private email is good for you, and a very decent model
Use Spideroak for cloud storage
Use Signal from Open Whisper Systems for encrypted text messaging
Use Framatalk or similar tool for video conference
and probably the most important part of all:


PASS THIS BLOODY MESSAGE ONTO YOUR FRIENDS AND RELATIVES !!

Otherwise, happy new year!

Publicly yours.

Create a PDF Compress Automator App

2016-12-20T00:00:00+00:00

Every time I want to compress pdfs on a new apple machine, I find myself looking for the same (great) posts on the subject, and rarely find the one I’m looking for.

This is why I’m putting up this nice (personal) go-to blog post on how to easily and quickly set up a PDF Compress Automator App, as I use the app almost every day.

small is beautiful

Right so, the steps are as follows:

Download the Apple Quartz filters
Move the filters to your ~/Library/ folder by launching Finder and using CMD + SHIFT + G to pull up the Go to access Library folder, and dropping a “Filters” folder containing the quartz filters in there.
Launch Automator and Create an Application by dragging the Apply Quartz Filter to PDF Documents from left to right, and set the desired options (eg Reduce to 150 dpi average quality - STANDARD COMPRESSION) before giving it a name (save it onto your desktop).

Done deal.

You can now drag your pdf to your newly-created PDF Compress Application, and you’ll get a fresh copy reduced in size (obviously)…

(Our Personal) Data Privacy Matters

2016-11-17T00:00:00+00:00

(Our personal) Data Privacy is a big deal. If you, like me, get annoyed every time you receive an unwanted newsletter, or feel wary about looking up some specific items while logged in on google, you’ll know what I’m talking about.

This subject has always been of great interest to me, both from personal and technoligcal stand points. And as time passes by, and I see new generations of youngsters come into play, with absolutely no experience of what the time without the internet could have looked/felt like, it gets me thinking more and more about this situation, which I know isn’t new, but is not getting any better to say the least.

This is the reason why I am launching today with this quick post a series of articles on the subject. I have made drastic changes in my personal life theses last few weeks, and this blog is a great way to keep the words of advice from all savvy people resonate, and share my actions and overall experience in improving my personal data privacy.

Let’s start with a cool prez from Aral Balkan who’s taken his Beyond The Clouds prez to another level with ‘The Matrix, Inverted’, a great talk on people faming made in Malmö, at the Øredev Conference earlier this month.

If it’s free, YOU are the product

For your info, I have been following Aral’s work for a few years now. Aral is big on Human Rights, Social Justice & Ethical Design, and runs ind.ie, a small social enterprise striving for social justice in the digital age. His eloquence and passion for defending data privacy are second to none.

Enjoy the wise words!

The Matrix, Inverted from Øredev Conference on Vimeo.

Speed up your Salesforce admin search with Sid's Searchbox

2016-10-12T00:00:00+00:00

If you’re a Salesforce user, especially a developer or admin, you may spend most of your day in the Salesforce setup area, adding and editing apex classes, visualforce pages and adjusting other admin settings.

Anything helping you stop wasting time on the setup area is more than welcome. Therefore I can only recommend you to give this chrome extension a go.

In Search of Speed

Made by Salesforce MVP and Dreamforce 16 superstar ;) Sid Nagavarapu, “Salesforce Searchbox” is a great way to gain in productivity by adding to all config pages a simple search box, which will search in all configuration items on the page.

The plugin supports some basic regex searches if you want to go fancy. In any case, you’ll speed up your searches and will defo spend more time providing the most value to the CRM users.

RSI and vertical mouse: a look back at the last 6 months

2016-09-21T00:00:00+00:00

Repetitive strain injury (RSI) is a frequent issue when you spend 10+ hours a day in front of a computer, and it is something I have unfortunately been experiencing these last few years.

Since I own a mac, I have always been using a magic mouse, but as aching in my right hand (and arm) started to occur on a more regular basis, I started wondering whether this beautiful, yet - let’s be honest - way too small device was the root of my problem.

DANGER MOUSE !

Discussing the matter with my osteopath quickly led to the option of using a vertical mouse, helping you keep your hand in a natural position. This is why I moved to ‘verticality’ 6 months ago, with the purchase of a basic “usb vertical mouse ZeleSouris”.

A few reasons why I picked this low-budget mouse:

this was going to be more like a pilot phase (so I thought)
non-wireless mice are less heavy (no batteries), hence easier to move
this specific device was not pricy hence more than worth a shot

6 months on and I have to admit this was the best choice ever. Getting used to it took only a few days as far as I was concerned. I doubt the mouse I picked is the best ever, but my RSI has gone for now.

I can only advise you to ditch the good looks of the magic mouse for an old bulky mouse, a trackpad or a vertical mouse, should you suffer (or wish to prevent) from RSI.

Wordpress staging environments on the cheap

2016-08-30T00:00:00+00:00

Staging environments are one of the keys of a (proper and) controlled deployment process, whatever the technology. Wordpress isn’t any different.

You have a problem if you - like me - run a few things on wordpress, don’t consider it as a priority subject (hence do not have the time, nor the money to commit on the suject), …yet still want to make it a decent process.

Typical “have it both ways” conundrum.

DEV > STAGING ENVIRONMENT > PRODUCTION

Anyway, here are a few options, my views on them, and eventually a decision.

Professional Wordpress hosting (Paid)

Best option is to get people (or an app) meant to do this for you. Defo the best option if this subject is top priority for you. “WPEngine” or “Media Temple” come to mind to name only a few.

WP Migrate DB Pro (Paid)

A popular plugin, often praised on “ShopTalk Show”, “WP Migrate DB Pro” is a great option to get your wordpress sites in sync (all content including media) with one click. Cool option to implement a push to production process. Starting at 89 box.

Note: I ain’t being sponsored for any of those paid options.

As mentioned above, I can’t be investigating any resource in this subject. Yet, I want to be able to set up a few environments and sync content and settings in an easy (and quick process), without having to deal with media url issues (cough wordpress import cough).

Let me emphasize on the repeatable process here since I really want to be able to do more than the usual local wp-cloud wp sync’ing. Testing things as they live on the web has got to be a pre-requisite. Things happen differently when not happening on local machines.

Anyway, went with…

All-in-One WP Migration (Free)

As advertised, “the plugin” allows you to export your database, media files, plugins, and themes. You can apply unlimited find/replace operations on your database and the plugin will also fix any serialization problems that occur during find/replace operations.

Not bad for a free option, and works like a charm to get those wordpress environments in sync.

Create a dribbble API-powered portfolio in no time

2016-07-04T00:00:00+00:00

APIs are a foundational element in today’s tech world. They help you enrich your data, and remain the best, simplest and quickest way to integrate to other engines, apps … you name it.

In this example, we’ll focus on a quick (and dirty) dribble to website integration, helping you generate a dribbble-api-powered portfolio, and kill two birds with one stone.

Leveraging APIs Matters

Quick (code)pen below showing you in details how I did it. Do not be too judgemental on the overall design, this was made in a few minutes, throwing bootstrap on a page before connecting to my dribbble account.

The longest part was to register an application on your dribbble account. Simply log into your account, navigate to Account Settings > Applications, and register your app. You’ll be needing your Client Access Token to make this work…

See the Pen dribbble portfolio with dribbble api v1 by flo preynat (@flopreynat) on CodePen.

Mac Finder freezes... WTF

2016-05-29T00:00:00+00:00

Another blog post on Apple devices playing up (following the “boot to black screen” one) with this time, the way to resolve a frozen finder on OSX (Mavericks in my case).

The thing happened to me a few months back, with Finder freezing over and over after a few seconds or minutes of usage, forcing me to force quit Finder on numerous occasions throughout the day.

Fed up with this bug, and not willing to move away from the native file managing app, I eventually got it sorted out by simply using Mac’s Safe Mode, something that Windows users might be more inclined to be using on a regular basis.

Safe Mode baby

I personnally had never used the safe mode before, despite around 10 years on apple.

So if you have a frozen Finder, go for it…

Follow these steps to start up into safe mode.

Start or restart your Mac.
Immediately after you hear the startup sound, press and hold the Shift key.
Release the Shift key when you see the Apple logo appear on the screen.

After the Apple logo appears, it might take longer than usual to reach the login screen or your desktop. This is because your Mac performs a directory check of your startup disk as part of safe mode.

To leave safe mode, restart your computer without pressing any keys during startup.

(Taken from “Apple Support website”)

Gulp throws Potentially unhandled rejection error

2016-04-27T00:00:00+00:00

So you’re using Gulp and you’re thrown a “Potentially unhandled rejection [2] Error: no writecb” and you have no idea what to do next…

It was my case up to last night when running Gulp for the first time (I usually run Grunt) during the initialization of Wes Bos’ “React for Beginners”, and the run of a gulp-stylus task.

Updates first

Initial reaction should be to make sure you’re up to date with all components at hand. All modules being all on their latest versions, let’s turn to node.

Quick check shows an outdated version, let’s get this updated. Here’s how to do it.


(sudo) npm cache clean -f
(sudo) npm install -g n
(sudo) n stable
node -v
v6.0.0

Try running gulp again. Error should have gone…

Alfred App Review

2016-04-19T00:00:00+00:00

An app all windows users envy us if they have had the chance to take Mac’s already-powerful search feature to the next level, with Alfred - the award winning app and best butler I have ever known…

Like any developer out there, I want to use the keyboard as much as I can. For productivity reasons first, and for others.

Been using Alfred for years, and I can’t get bored of it. Don’t look at this post like an expert article on the subject, I have not even purchased the Powerpack, feature unlocking the likes of workflows, integrations, and even remote control to your IOS devices. To be totally honest, I have never really looked into the Powerpack, but I may be tempted to leverage their integration with Asana, another must-have IMHO.

It serves me right!

Anyway, for now, I use Alfred the most simple way ever, but it just works for me. Here are a few things you can do with Alfred:

Quickly find a file by typing “find” + the name of the file
Launch any app without using the mouse
calculate anything quickly by just typing numbers and operations
Launch a search on any site (eg. google, twitter, youtube etc)
Launch a google image search
Look up a place on Maps
Quit all apps at the end of the working day
Empty the recycle bin
etc…

You can easily configure your shortcuts and have for example “google” shortened to “g” (just an example).

In a nutshell, I love this app.

Alfred 2 for Mac

Leverage Sublime Text Macros to automate repeatable actions

2016-03-30T00:00:00+00:00

Sublime Text Macros are a smart little tool to automate repeatable (and often-repeated) patterns.

For example, I need to build arrays from lists of things on a regular basis. As easy as it can be in sublime to perform such an operation, using the basic automation provided by Macros is the best way forward.

Automation, automation, automation

Simply navigate to Tools/Record Macro to record what you want Sublime to do on your behalf, Save your macro with a ‘.sublime-macro’ extension and replay it as much as you need to.

Grunt throws a Maximum call stack size exceeded error

2016-01-27T00:00:00+00:00

Grunt throws a ‘maximum call stack size exceeded’ error after running a simple task, and you haven’t got the slightest idea what it means. No sweat.

But I can’t blame as this is just what happened to me today while working on a website redesign. The grunt task is a simple ‘imagemin’ task I decided to run separately, and I don’t recall having had the same issue before.

Cut a long story short, you launch something along the lines of: “grunt imagemin” in your terminal, and you’re thrown the following error:

RangeError: Maximum call stack size exceeded

Don’t name your task aliases like your tasks

I did not find the issue in Grunt’s documentation as, ironically, it’s not the first hit on google serach results, but it’s in there.

You can not name your tasks like the task itself, as detailed here.

So I went from grunt.registerTask(“imagemin”, [“imagemin”]); to grunt.registerTask(“imageminifier”, [“imagemin”]);

… and it worked like a charm.

Record your screen in animated GIF format with Licecap

2016-01-07T00:00:00+00:00

I’m often being asked what screen recorder software I use, since I frequently document tutorials, emails, and other user guides with self-explanatory gifs.

And since the app I use is 1. open source (hence free), 2. super light, and 3. very easy to use, I thought I would give Licecap the credit it deserves.

As mentioned on the app’s website, Licecap is a simple animated screen captures software. It probably has the least sexy logo ever, but the app is just great.

Show, don’t tell

You open it, set your width, height, and click on record, and you’re done. Stop it, and you’ll get a nice looped gif file, you’ll be able to paste anywhere.

How neat is that?! I had always thought it was for mac only, but it was originally for windows environments, so all of you can have a go at this little app.

Thanks to Cockos Incorporated for this beauty.

Autocomplete file names in Sublime

2016-01-06T00:00:00+00:00

Another cool add-on to your Sublime with this great little plugin that allows you to autocomple your file names and speed up your coding.

Use your Package Control (CMD + SHIFT + P) to install AutoFileName and start playing with it.

Autocomplete FTW!

Here’s a quick gif to show the plugin’s wonders.

Been using for a long time now, but I reckon it hasn’t got the fame it deserves.

Kudos to @boundincode (Liam Cain), the creator behind AutoFileName.

Macbook Pro boots to black screen... WTF

2015-12-23T00:00:00+00:00

So you boot your macbook pro, and you get… well not much. A black screen staring back at you while you frantically reach for your phone to check possible solutions to this problem.

####PRAM Reset

Look no further. The thing just happened to me and I managed to get through it by resetting the machine’s PRAM, which is - apparently - a common troubleshooting technique when your favorite apple goes to f***.

It allegedly should be the last resort when this kind of things happen. But as none of the other techniques I managed to find on the net did work, I’m only going to cover this one since, as mentioned above, it did the trick.

So here how it’s gotta be done.

CMD + ALT + P + R

You reboot the mac, and as soon as you hear the boot-up sound, you hold down the magic key combination displayed above.

I haven’t got the slightest idea what the problem was, and why I had to do this. But it just does work.

Move and resize windows with Spectacle

2015-12-18T00:00:00+00:00

Repositioning and resizing windows isn’t probably the most entertaining subject out there, but as we do those two all day long, let’s talk about it once and for all.

I remember having blogged about this subject on another blog about 3 years ago, and today, I’m finding myself talking about this very same subject to various mac users (since it’s a native feature on windows), having failed to deal with the issue.

CMD + ALT + LEFT/RIGHT

####Spectacle

Cut a long story short. The app is called Spectacle. It’s very cool, simple, non-obtrusive and free. And I’ve been using it for ever now.

Once installed, you’ll have to enable access for assistive devices.

Review your shortcuts, change them if you wish, and start getting more productive with your open windows…

You can run the app in the background but I suggest you add it in the status menu.

My Sublime Text Shortcuts CheatSheet

2015-10-27T00:00:00+00:00

‘Have you documented your own Sublime Text shortcut cheatsheet?’ is a question I never get asked. But despite all your efforts to avoid the subject, here it is. In your face!

This post is likely to get updated on a regular basis since I tend to learn new stuff every day. See, when you start low, you’re bound to progress more often than never :)

So we’ve already spoken about ST3’s clipboard history capability. Here’s the rest of the stuff I use on a daily basis.

Command + click	Multiple cursors
Command + C/V	(without selecting something) Copy/paste entire line
Command + O/S/W	Open/Save/Close file
Command + Control + P	Get List of Saved Projects
Command + X	Cut Line
Command + D	Grab similar occurences
Command + Control + G	Grab all occurences
Command + Shift + F	Find stuff through files & folders
Command + K B	Toggle sidebar
Command + K L	Go Lower case
Command + K U	Go Upper case
Command + Shift + /	Commenting/Uncommenting
Command + Control + up/down	Swap line order
Alt + drag	Initial a column select
Command + Shift + left/right	Select content from cursor to left/right end
Control + Shift + W	Wrap Line or Selection with Tag (absolute favourite)
Command + Control + Shift +F	Enjoy Distraction-free fullscreen
Select + [/(	Wrap selection between parenthesis/brackets

More to come obviously…

ps: get yourself a licence, it’s only 70 box.

Google Authenticator is producing the wrong codes

2015-09-30T00:00:00+00:00

What do you do when your Google Authenticator produces the wrong codes, and there’s nothing much you can do about it?

I’m a huge fan of the two-factor authentification, the now famous user identification system by means of the combination of two different components. It usually involves a password and some kind of time-based token available via an app on a mobile phone.

2-step verification is officially the best thing since sliced bread

So by now, we all know we’re talking about Google Authenticator. Great app, I use it all the time.

Problem I just encountered: my mobile is in maintenance, and I bought myself a cheap Wiko for the few days/weeks to come, and I can not make the app work. No idea why, the time zone is set as it should, I ran a sync from the app, and it’s telling me that all is fine.

So what do you do in such a bizarre situation. I found my answer on a forum, but as there’s not so much talk on the subject out there, this blog post may help some people stuck like me.

Use this app: FreeOTP

It seems a bit strange to be using a google feature with an app made by Red Hat. But the app is legit and approved, and more importantly it works like a charm, …even on a Wiko.

And get yourself a decent phone though lol.

Responsive video code snippet

2015-09-15T00:00:00+00:00

An ancient blogpost of mine, and this clever responsive video code snippet presented (at the time) by Ethan Marcotte, at btconf 2014 during his Laziness In The Time Of Responsive Design talk.

A quick way to make videos look good at any size, the height/width ratio of the media now respected.

Enough chit chat.


.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.

Make Google Charts Responsive

2015-09-08T00:00:00+00:00

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.

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.

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.

Using Jekyll plugins on Github

2015-08-25T00:00:00+00:00

A bit of reading for all jekyll newbies who, like me, decided to host their Jekyll site on Github pages (or are in the process to do so), and wouldn’t be aware of the limitations around the subject.

I’ve been running this site on Jekyll for a few weeks only, and making discoveries along the way. When I decided to install and use the first of many plugins available, I hit the wall and quickly realised the topic was far from an easy affair.

tl;dr : Avoid using plugins if you can

I’m not going to steal the words of David Lyons as he wrote a nicely-documented post on the subjet on sitepoint.com.

To cut a long story short, Github only allows a few Jekyll plugins to run during build process.

As David mentioned it, you’ll have a couple of work-arounds to get by. I personnaly decided not to go with any of them.

First of all, the current (folder/git) structure setup suits me and I didn’t want to disturb it. Second of all, I don’t have the intention to add a million plugins (as in I intend to use none of them). Lastly, I am the only person operating this site and thought a bit of markup within the post would not be the end of the world, should I need to add a responsive-ready video container (reminder: it’s what I wanted to do in the first place).

Anyway, once again, read David’s post. It’s worth a look (and a thought) if you intend to host your Jekyll site on Github pages.

Sublime Text 3 Clipboard History

2015-08-18T00:00:00+00:00

I’ve recently moved to Sublime Text 3, having enjoyed several years of cruising on version 2. The latest version is now more than mature (hence my move) and has additional features ST2 was short of. The ability to browse through your clipboard history is defo one of them.

⌘ + K then ⌘ + V

It’s as simple as that, just go ⌘ + K before hitting your usual ⌘ + V and you’ll be able to pick from your latest clipboard entries.

Everything is in the video below, made by Wes Bos, a web dev recently featured on the ShopTalk show of July 27th.

Note, if you want to speed up your development, optimize your ST workflows and become a better developer, Wes has released a book on the subject.

Adding Disqus comments to Jekyll

2015-08-14T00:00:00+00:00

Adding comments via Disqus to your Jekyll blog is something you probably want to do if you want a bit of life and interaction. Good news: it couldn’t be easier.

There are installation instructions on the Disqus documentation, and on various places around the web, but I thought I would recap the lot for y’all.

“Great discussions are happening here”… so Disqus says. Unless nothing much will in fact happen, and you’re fine with this.

First of all, sign up to Disqus then go there to add Disqus to your site.

Then generate a custom script for Jekyll, you’ll need to use the Universal Code option here.

Copy your script and paste it into a disqus.html template in /_includes. Make sure you surround the script between the if page.comments and endif liquid code lines.

Then edit your _config.yml file to add the “comments: true” bit…


defaults:
  -
    scope:
      path: "" # an empty string here means all files in the project
      type: "posts" # previously `post` in Jekyll 2.2.
    values:
      author: flo preynat
      layout: "post"
      comments: true

Finally, go to your /_layouts/post.html template and add include disqus.html disqus_identifier=page.disqus_identifier (between liquid handles) below the end of your blog post.

You’re done!

Jekyll contact form with Formspree

2015-08-10T00:00:00+00:00

So you got yourself a nice static site, and you want to give your audience a chance to talk to you (directly) with a simple contact form, something you might be used to having used wordpress, php, and a database.

Except there ain’t no database here. Even less php back end. Hence you’ve got to rely on other ways to get personal messages sent to you.

###Formspree - Functional HTML forms

When I stumbled upon Formspree, it did look like the perfect match.

Side note: Kudos to the crew that put the site together. Minimalistic, straight to the point and no fuss around the subject.

Just send your form to our URL and we’ll forward it to your email. No PHP, Javascript or sign up required — perfect for static sites!

So, formspree is a tool apparently maintained by a community of developers, clearly stating no contents of the form submissions are stored (emails are sent using Mailgun’s API).

You do think about privacy, but not for long. First of all, you ain’t giving much away, api or not. Folks are going to initiate discussions in a few words then you take over the talk, privately. No need to be paranoid… especially if (unlike me), you are giving away most of your life to facebook.

###Easy peasy

Just follow the steps described. Everthing works as expected. Add form elements and don’t forget to give them a name, they’ll be automatically taken into account during form submission.

Free stock photos for your projects

2015-08-06T00:00:00+00:00

Just a go-to blog post (for myself really) when on the lookout for free stock photos (that don’t suck) for your web design projects, print needs et al.

A lot of good and excellent sites for you to pick exceptionnally-pro-looking pics from… Here we go.

The ones I’ve used from the start:

Death to the Stock Photo
Unsplash, especially since Arthur Weill released a little search engine for Unsplash

…and the rest of them, in alphabetical order:

How about that!

Error installing jekyll: Failed to build gem native extension

2015-07-29T00:00:00+00:00

Though I would post this one since I did experience a few issues attempting to install jekyll, including this “Failed to build gem native extension” annoying error.

Right, so you have it all installed. So you think. As advised on the jekyll site, you’ve done your:


sudo gem update --system

Xcode and its command line tools are in there, but you still get an error while running:


sudo gem install jekyll

something like:


Building native extensions.  This could take a while...
ERROR:  Error installing jekyll:
ERROR: Failed to build gem native extension.

It appears that the installation order is vital, and therefore you should try to uninstall ruby, start from a clean situation, and reinstall it.

It did fix it for me, so have a try if you’re stuck and you’re a numpty like me when it comes down to gems, CLI, and the rest.

Start with:


rvm get head
rvm reset

Then check what’s in there with:


rvm list

Note what ruby version is installed, in my case it was ruby-2.0.0-p247.


rvm remove ruby-2.0.0-p247
rvm cleanup
rvm repair

Only then go with:


sudo gem update --system
sudo gem install jekyll

Hope this helps.

Why Jekyll?

2015-07-22T00:00:00+00:00

I’ve got it easy on that one. Site is brand new, hence built from scratch, with absolutely no data to migrate/integrate. Picking a technology like Jekyll to build and run this new personal pad was therefore an easy choice to make.

I’ve been using Wordpress (most times) and Perch (a few times) to create most of my personal/client/others’ websites, and despite having nagged a few times about performance or bloated code, it was most of the time down to me.

Jekyll is however a static site generator, therefore no database, nor server-side languages are needed, which makes the site lightning fast, and bloody appealing for this particular use case…

Transform your plain text into static websites and blogs

Install was a bit of an experience, epecially if you don’t really know what you’re doing (like me). But since I managed to do it eventually, a fucking monkey would do it with one hand tied behind his back.

####Host it on Github

I can host all my stuff on Github and point my repo to a custom domain name in two moves, and I can enjoy what has been my dev workflow for quite a while (Like every modern developer out there, I’ve been versioning all my projects with git and Atlassian’s Bitbucket for years).

It’s early days but so far so good. Jekyll seems to be the perfect fit for any developer wanting to enjoy an easy CMS-like setup, just without all the fuss…

Responsive Images Meetup: Coming together is a beginning

2013-09-13T00:00:00+00:00

Last time I talked about responsive images, I did mention I was due to go to the responsive images meetup in Paris, and as the long-awaited event happened a couple of days ago, I thought it would be nice to write a quick recap for the folks unable to make it.

SIDE NOTE

Before we get to the the nitty gritty, let me start this blog post with a quick line on the venue. The meetup took place in Mozilla’s Paris headquarters, a superb office located boulevard Montmartre, in Paris’ 9th arrondissement. What a place this is! Two snaps for your eyes.

Mozilla really know how to welcome guests. Just saying.

HIGH HOPES

Having received a teasing email from Yoav a couple of days prior to the get-together, and seen a number of known representatives from Apple, Google, Mozilla, Microsoft and Adobe inked on the presence sheet (unfortunately Bruce Lawson from Opera was unable to make it), I was very much looking forward to this event. After all, the web community (especially the developers) had been waiting over two years for some clear stand on the subject of responsive images from the big players, while, in the mean time, and according to the latest stats, 72% of responsive websites were still serving the same amount of data to ANY device.

USE CASES

The day started off with a pre-recorded presentation of the problem at hand from RICG‘s front man Mat Marquis, and we quickly went to real case uses with an overview of the BBC and Akamai’s ways of handling the issue.

Very interesting to see what large scale companies had been implementing, especially since the BBC and its 83 millions monthly views (2.6 millions views per day), as Mark McDonnell explained, had been using none of the so-far-proposed solutions , but ‘a form’ of javascript-dependent responsive image system. Lightweight, fast working on all devices solution, and implemented since 2011.

I can only invite you to take a look at their project. The javascript is open-sourced and available on Github.

Next, Guy Podjarny took the stand to explain Akamai’s sophisticated content delivery acceleration techniques including smart delivery (with Edge Device Characterization) using patterns of characteristics drawn from a database of mobile devices, front-end optimization, the still-in-beta image converter allowing art direction, and adaptive image compression taking into account the network conditions to define the quality of the served content.

Quite a setup. Defo out of my league, and certainly destined to large scale sites. In a nutshell, not exactly what you would use to build the website of your local pub.

A LOOK BACK AT THE PROPOSED SOLUTIONS

DPR switching, Viewport switching and Art direction on our minds, and a few coffees down our throats, we went ahead and reviewed the proposed solutions.

Apple’s Theresa O’Connor presented the srcset attribute, which defines the various image resources to be used, and the clues to help a user agent determine the most appropriate one to display, already implemented (at least a limited version of it) by webkit.

<img alt="The Breakfast Combo"
src="banner.jpeg"
srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x">

The picture element presented by Mozilla’s Marcos Caceres, defining a declarative solution for grouping multiple versions of an image based on different criteria (format, resolution, orientation, and more), allowing the user agent to select the optimum image to be presented while providing the best solution (so far) for art direction.

<picture width="500" height="500">
<source media="(min-width: 45em)" src="large.jpg">
<source media="(min-width: 18em)" src="med.jpg">
<source src="small.jpg">
<img src="small.jpg" alt="" lazyload>
<p>Accessible text</p>
</picture>

‘HTTP Client Hints’ presented by Google’s Ilya Grigorik, which defines a set of HTTP headers allowing browsers to indicate a list of device and agent specific preferences, and drive servers to use these “client hints” to assist in content negotiation. Ideal solution as the content served would match the environmental conditions of the client, ideal in the minimal developer effort sense (I knew you would love that one!), and also ideal as far as semantic is concerned (ie. a simple image tag ).

But… we would need to use a new header where we would define the devicePixelRatio (DPR) of the terminal (e.g. CH: dpr=2) to pass the relevant info to the server, the current UA header being unable to do that. More on client hints here.

The ‘SVG’s Switch element’ presented by W3C’s Robin Berjon, a solution already well supported today, already offering a built-in, working fallback. See his full presentation here.

<switch alt="Accessible text">
<img media="(min-width: 45em)" src="large.jpg">
<img media="(min-width: 18em)" src="med.jpg">
<img src="small.jpg">
</switch>

‘New Image Format’ presented by Yoav Weiss, a responsive image container containing internal layers which uses resizing and crop operations to deal with both resolution switching and art direction. In a nutshell, the encoder takes the original picture, the required output resolutions and if needed art direction pre-requisites, and outputs a layer per resolution. As a picture is worth a thousand words, there you go:

WHAT NOW?

DPR switching definitely seems to have made the top of the vast responsive images todo list. I have to admit I freaking love the concept of client hints presented by Ilya, but Google will certainly need an ally if we are to go this way… and it doesn’t look like it could be Mozilla, David Baron having shown little enthusiasm (to say the least) to go ahead and add more (unremovable) HTTP headers.

The ‘srcset attribute’ and the ‘Picture element’ will make last call, and will definitely keep on getting tested. Both could emerge winners, srcset for its simplicity, and picture for its art direction friendliness, a popular aspect in the developers community.

Expect some simplification in the markup, and a likely removal of possibly w and more likely h from the spec.

Microsoft could have a card to play in this debate, with IE12 in the box, and a strong and obvious interest from Lead Principal Program Manager Israel Hilerio.

FINAL WORDS

A huge bravo to Marcos and Yoav for getting a crowd of proactive folks and professionals going for eight hours straight, on the sole subject of responsive images. And a massive ‘thank you’ for opening the doors to smaller companies and freelancers.

Getting together is already a huge success, working together is the next step forward.

Add a neat little breakpoint snippet to your Sublime

2013-05-15T00:00:00+00:00

Let’s get Sassy today with this little yet very useful Sublime Text 2 breakpoint snippet handmade 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>

<tabTrigger>mq</tabTrigger>


</snippet>