flopreynat.com

No Microsoft tracking with VS Codium

Sun, 27 Sep 2020 23:51:11 GMT

About a year ago, I switched from Sublime to VS Code, and never looked back. The code editor does everything I need, and having the terminal and console closed to your code is a mega plus.

But the other day, cyborg rights activist Aral Balkan, whom I was talking to on Twitter, mentioned to me the existence of VS Codium, a clone of Visual Studio Code, providing its users with the same Microsoft application experience, but without Microsoft’s telemetry code and data usage tracking.

The prospect of using a community-driven, freely-licensed, 100% Open Source, tracking-less version of VS Code was too good to be true, and hence I made the switch and obviously can only encourage you to follow suit if you have yet to make the move.

VS Codium : Free/Libre Open Source Software Binaries of VSCode

Using git on your Synology

Thu, 21 May 2020 00:00:00 GMT

I'm pushing the majority of my git projects to github for the simple reason that 1. they are public and hence do not need to remain hidden from the rest of the world, and 2. they usually leverage open source technology which has been tweaked in some way and that could help others.

However, there are specific personal projects and notes I do version using git and that I do not wish to send to the likes of Github, Bitbucket, et al.

As a huge advocate of data privacy, I tend to keep my private stuff private, and that means not using a third party (regardless of whether they offer private repos or not).

Long story short, you'll find below the list of actions I have carried out to setup and use my (very own) Synology Git server.

Todo

Install git on your synology (help: you'll find the Git server application in your Package Center)
Enable SSH (help: by navigating to Control Panel > Terminal & SNMP > Terminal)
Using the terminal (or putty if you're on a windows machine), ssh into your synology by running:
```
ssh you-user@your-synology-ip (+ type your synology password)
eg: ssh johnny@192.85.85.85
```
On your synology , create a folder to host your git project

Navigate to your local project folder and run:

git init
git remote add origin ssh://johnny@192.85.85.85:/volume1/myDirectory/myGitProject

Push your project to your synology by running the usual:

git add --all
git commit -m "initial commit"
git push origin master

Bob's your uncle 😎

Switching to Gatsby

Sat, 02 May 2020 00:00:00 GMT

It had only been a month since I converted my site from Jekyll to Hugo. But with the quarantine and lockdown 😷 fully enforced, I took the time to dig even more the static-site-generator subject, and decided to dedicate some time to learn Gatsby, an open source framework based on React (which I knew very little about), and apply my newly-acquired skills to the redesign of this very site. Job now done ✅

Note: React had always been a weird-looking beast to me, as I was struggling to grasp the concept/interest of injecting html inside javascript, but I am definitely getting it now.

Getting educated

I'm not going to detail here what it took me to redesign my site with Gatsby.

Gatsby has great documentation, and with a big fan/user base, there are tons of resources out there where you can get all the info you want.

However I can only advise you to take Andrew Mead's Great Gatsby Bootcamp, a close-to-5h top-notch tutorial taking you through the creation of a simple site equipped with a blog using Gatsby and either Markdown files or the now-popular headless CMS Contentful.

Getting started

Gatsby has a large 'starters library' available at gatsbyjs.org/starters where you can easily bootstrap your Gastby project.

It was however important for me to build my own Gatsby and Markdown starter (including all features mentioned in the video turorial but excluding the Contentful part), and reinforce what I had been learning.

You'll find my Gatsby Markdown starter on Github, and as detailed in the README file, this starter will have the advantage of coming with:

Pages for:
- home including the latest blog post and event (another post type)
- about
- contact
- 404
a blog section with a (paginated) list of blog posts
a calendar section with a list of events
5 dummy posts (1 event + 4 blog posts including one with an image) and their engine-generated page
Sass turned on
the dotenv environment variable file for GraphQL Playground
the React Helmet component for document head control

You'll also find on the repo's README the list of all the packages to be installed. Please note that for the conversion of my site, I added the following packages:

react-icons to add social network icons to my footer
gh-pages to allow deployment to Github's gh-pages, since my site is hosted there
gatsby-image (+ gatsby-transformer-sharp gatsby-plugin-sharp), the recommended approach to handling images.

Final Words

Gatsby is awesome

The redesign was a fun little adventure. Gatsby is awesome and I intend to use it for other ssg-powered sites.

I did not experience any huge issues. Having given Andrew Mead's tutorial my full attention, things could not have been easier, that's why I recommend you take that course if you're a gatsby newbie.

The only thing I had forgotten to do was to move the CNAME file to the 'static' folder of my project. So, if like me, you use a custom domain, do not forget to do that, or you'll lose the redirection of your github repo to your domain every time you'll run npm run deploy.

So long folks.

Why Hugo?

Sun, 29 Mar 2020 16:52:11 GMT

Quick post to mention I switched my blog from Jekyll to Hugo.

Jekyll has been THE most popular static site generator since its creation back in 2008, and I naturally opted for it back in July 2015, as I was leaving Wordpress.

Back then, getting my hands into Jekyll had not been that easy, but using it past the installation phase had been a joy.

I was however keen to try Hugo, having heard a lot of good things about it, especially since it was branded as the world’s fastest framework for building websites.

Anyway, I tried it on a test project, and I have to admit setting it up is way more straightforward than Jekyll. Configuring and building the site is not very different from the workflow I used with Jekyll.

I was convinced enough to make the leap and migrate my blog to Hugo. I doubt Hugo is as powerful as Jekyll, but it has all the things my minimalistic blog needs, especially the lighting speed it deserves.

How I keep on improving my Data Privacy in 2020

Sun, 23 Feb 2020 09:33:11 GMT

Data privacy has been a hot subject even before GDPR (25 May 2018) and CCPA (1st January 2020) became officially applicable.

I actually discussed this very subject early 2017, discussing the various open source tools I opted for at the time.

Anyway, 2 years on, let's make a quick assessment of what was succesful and kept as well as look into the other tools I am currently using to ensure my data pricacy is in great shape.

My Data Privacy stack

Search engine: Duckduckgo is (still) my preferred and only search engine. It's being used on both my desktop and mobile for a number of years.
Mail: Same applies to Protonmail, my favourite (open-source secured) email provider.
VPN: Since we're talking about the Proton team, let's give them another thumbs up with ProtonVPN offering security, privacy for all, and freedom for journalists and activists.
SMS and calls: Signal. Although I'm experiencing a few issues as I have started using dual-sim phone , Signal has always been my preferred choice as its messages and calls are end-to-end encrypted. Switch to safe communications, people.
Browser: I use a mix of Firefox, Brave, and Tor
File hosting service: none. At the time I had pushed Spideroak as a great alternative to dropbox & co. I am not using this service since I actually have removed most of my problems by acquiring my own Synology NAS. Having your own home server is a game changer.
Note taking: Boostnote, great app and open source project, soon to be coming as a mobile app (allegedely).
File synchronization: I currently use Syncthing as my tool of choice for synching my day-to-day files between my mac and my mobile.
To do app: I ditched asana for todo.txt. It has everything I need from tagging my tasks, give them a due date, and priority in the most simplistic way, and I use it with TodoTxtMac on my macbookpro, and Todo.txt for Android by Aditya Bhaskar. And obviously, I get my tasks synched via syncthing as mentioned above.
Video Streaming: I'd love not to be using Youtube but since there are so much great content in there, I use Newpipe on my Android (NewPipe only parses the YouTube website in order to gain the information it needs) and Freetube, a YouTube client for Windows, Mac, and Linux built around using YouTube more privately.
2FA: I ditched google authenticator to use Freeotp.
Navigation: I ditched google maps and waze to use OsmAnd. It's great for Map Viewing and Navigation for both Online and Offline. I like the vintage look and feel and amount of details in there.
RSS: The good ol' days of leveraging RSS technology should never have disappeared. But it (stangely) is what occurred in my case. I'm back at it, and I use Vienna RSS for this. Great native macOS Open Source project, that gets the info to me, as opposed to go get it and get tracked.
Office softwares: I've moved away from google docs/sheets/slides to Libre Office.
Other softwares: I make the most of the Framalibre software alternatives by the great Framasoft, and use as a few examples: Jitsi instead of Hangouts/Skype, Framadate instead of doodle.

Yet to test (mytodo)

Password manager: Bitwarden which I would like to test self-hosted. I'm on another password manager app at the moment, but switching to an open-source solution would be nice.

Spin up php server locally with Docker

Thu, 26 Dec 2019 00:00:00 GMT

Almost same use case and files than last time. But this time, using Docker, which I had been wanting to test out for so long.

docker run -p 80:80 -v /Users/your-username/path-to-docker-folder/src/:/var/www/html/ hello-world

Everything is brilliantly explained on this Learn Docker in 12 Minutes video.

Like on last post, proof files here.

So long.

Spin up php server locally in no time

Sun, 01 Dec 2019 00:00:00 GMT

Another post on tooling with this time a quick and easy way to locally spin up a php server, for - say - php templating and testing.

php -S localhost:2222

As mentioned here, the CLI SAPI provides a built-in web server (as of PHP 5.4.0).

It is not intended to be a full-featured web server. But designed to aid application development.

Using the above command line is pretty much all is needed. Proof here with a tiny templated php website.

So long.

Crop documents with Mac's Preview

Sun, 06 Oct 2019 00:00:00 GMT

So you want to quickly/cheaply crop a jpg or pdf but have no tools lying around your mac to do so. There's actually an easy way to do it using Mac's native image and PDF viewer Preview.

Command + K

Really handy way if you can't be bothered installing gimp, or alternative.

Open the file in Preview
Select Tools > Rectangular Selection
Draw your selection area on the file
Use Command + K to crop the image
Save your document

So long.

Quick way to run a windows application on a mac

Fri, 02 Aug 2019 00:00:00 GMT

From time to time, as a mac owner, you'll have to run a Windows application for testing (or other) purposes.

Obviously, there are tons of solutions allowing you to run windows on a mac, but not all are light, free and quick wins.

VIRTUALIZATION TIME

The quickest and easisest way (to me) is to use Virtualbox (open source and free), download a free virtual Windows machine from the Microsoft developer website, and spin it.

So, ok, those virtual machines expire after 90 days. In most cases, this will be way enough for you to test your application, and run your stuff.

One thing you may need while you're playing with your windows machine, is to share things with your mac. Sharing folders between your machine and a VM is not native. Here's how you do it:

In Virtualbox, select your VM, and go to Settings > Shared Folders, and add the folder (on your mac) you wish to use on your VM
Then go to Settings > Storage and add an optical drive (+ and cdrom icon) to your IDE controller (choose 'Leave Empty')
Start your VM
In Virtulabox, go to Devices > Insert Guest Additions CD Image, and run the install program
Once the program has been installed, reboot your VM
That's it, ope file explorer, your file sharing folder should be appearing in there.

Hope this helps.

Macbook Pro boot up issue with no startup chime... WTF

Sat, 16 Feb 2019 00:00:00 GMT

Already talked about this issue once... here, except this time I don't have the chance to hear the startup chime, nor to reset any PRAM, nothing.

The only chance I get is to enter my password and see the apple screen get stuck for ever.

SAFE MODE

Once I enter my password, the only thing I can do is press on the SHIFT key and hold it, until I enter the Safe mode.

At this stage, If you reboot, or try any disk utility, it should not fix the issue. If you're lucky (like me), you'll have some software updates to install.

Launch the download/restart and install and hope for the best. It did work in my case.

Github: 2FA and personal token

Fri, 23 Mar 2018 00:00:00 GMT

So you've decided to turn on two-factor authentication (as you do) for your github account and you can't commit (anymore) to your repos using the command line.

TL;DR

Create a personal token.

You won't be asked to provide a 2FA code when authenticating to GitHub on the command line using HTTPS URLs. Instead, you must create a personal access token and use its as a password.

Log into your account
Click on your avatar, then Settings
Click on Developer Settings
Choose Personal access tokens
Generate new token
Give your token a name
Select the scope and permissions of your token
Use your token as your password when prompted in the terminal

Done ;)

Fontawesome Alfred Workflow

Mon, 01 Jan 2018 00:00:00 GMT

You have Alfred and use it on a regular basis?
Your job is to build websites, or simple protoypes?
You're a fan of Font Awesome?

Then you can leverage the power of Alfred's Workflow and use it on the fly when including font awesome parameters into your designs.

Simply donwload Alfred's Font Awesome worklfow, and you're good to go.

Invoke the use of Alfred while designing (usually with 'ALT+ENTER'), type fa and search through the available icons, pick one and click 'ENTER', your class is in your design.

No camera was found

Wed, 31 May 2017 00:00:00 GMT

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

Tue, 16 May 2017 00:00:00 GMT

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

Tue, 18 Apr 2017 00:00:00 GMT

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.

Navigation

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

Validators, converters and beautifiers

"JSON Beautifier & Validator", "HTML beautifier", "Sass to Css Converter", and more...

Colors

"Color picker" with RGB, HSV, CMYK conversion and "Hex code converter"

Q/A

...on coding questions like "how to select img with jquery"

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

Tue, 03 Jan 2017 00:00:00 GMT

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

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

Tue, 20 Dec 2016 00:00:00 GMT

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

Thu, 17 Nov 2016 00:00:00 GMT

(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

Speed up your Salesforce admin search with Sid's Searchbox

Wed, 12 Oct 2016 00:00:00 GMT

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

Wed, 21 Sep 2016 00:00:00 GMT

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

Tue, 30 Aug 2016 00:00:00 GMT

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, I 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

Mon, 04 Jul 2016 00:00:00 GMT

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

Mac Finder freezes... WTF

Sun, 29 May 2016 00:00:00 GMT

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

Wed, 27 Apr 2016 00:00:00 GMT

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

Tue, 19 Apr 2016 00:00:00 GMT

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 "duckduckgo" shortened to "d" (just an example).

In a nutshell, I love this app.

Alfred 2 for Mac

Leverage Sublime Text Macros to automate repeatable actions

Wed, 30 Mar 2016 00:00:00 GMT

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

Wed, 27 Jan 2016 00:00:00 GMT

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 but managed to find it in my search results.

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

So I went from:

grunt.registerTask("imagemin", ["imagemin"]);

grunt.registerTask("imageminifier", ["imagemin"]);

... and it worked like a charm.

Record your screen in animated GIF format with Licecap

Thu, 07 Jan 2016 00:00:00 GMT

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

Wed, 06 Jan 2016 00:00:00 GMT

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!

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

Wed, 23 Dec 2015 00:00:00 GMT

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

Fri, 18 Dec 2015 00:00:00 GMT

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

Tue, 27 Oct 2015 00:00:00 GMT

'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	Usage
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

Wed, 30 Sep 2015 00:00:00 GMT

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

Tue, 15 Sep 2015 00:00:00 GMT

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

Tue, 08 Sep 2015 00:00:00 GMT

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

Tue, 25 Aug 2015 00:00:00 GMT

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

Tue, 18 Aug 2015 00:00:00 GMT

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 this video, 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

Fri, 14 Aug 2015 00:00:00 GMT

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 disqusidentifier=page.disqus_identifier** (between liquid handles) below the end of your blog post.

You're done!

Jekyll contact form with Formspree

Mon, 10 Aug 2015 00:00:00 GMT

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

Thu, 06 Aug 2015 00:00:00 GMT

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

Wed, 29 Jul 2015 00:00:00 GMT

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?

Wed, 22 Jul 2015 00:00:00 GMT

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

Fri, 13 Sep 2013 00:00:00 GMT

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

Wed, 15 May 2013 00:00:00 GMT

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