Sync local and remote WordPress database

This is just a big heads-up to every WordPress developer out there, just to let them know that syncing a development/staging database doesn’t have to be a nightmare.

There’s this plugin called WP Sync DB which works like magic.

As a reader also suggests, WP Sync DB also has plugins that build upon the main funcionality. For example, wp-sync-media-files, to sync also, well, media files. But there are more.

  • GitHub Repo: https://github.com/wp-sync-db/wp-sync-db
  • Website: http://wp-sync-db.github.io/
  • WP Sync DB GH Page (repo and more plugins): https://github.com/wp-sync-db

Daily UI #001 – Login screen

Daily UI launched with the purpose to help you “Become a better designer in 100 days.”

Each day, you receive a small brief to design something. You do it. You publish it on Dribbble/Twitter using the #dailyUI hash. You get some feedback. You (hopefully) improve your skills. Easy, right?

Lately I’ve been trying to improve my design skills, so this sounded something worth trying out.

Here’s Day #001’s brief:

Hint: Design a sign up page, modal, form, app screen, etc. (It’s up to you!)

And this is the result:

It took me around 45’~1h to iterate through these mockups. I probably would have been able to improve on these if I kept working on them. In fact, I think there’s some evolution from v1 to v3.

However, I think it’s much more valuable to get feedback earlier. If you have some, please leave a comment. Thanks!

Instadownload: Download photos from Instagram web

[Update 02/08/2016: Updated the code to work with the latest version of Instagram. Remember, only works on photo detail page, like this.]

https://instagram.com/p/iuDwZDtDF2/
https://instagram.com/p/iuDwZDtDF2/

Does this look familiar?

If you right-click on any Instagram photo from their web app you get this context menu, and you can’t “Save Image As…”. Frustrating, right?

Instadownload solves that problem by creating a dynamic download button on the photo detail pages of the Instagram web app.

It is useful for downloading some hand picked photos while you browse. If you want to download all your photos, there’s Instaport, and if you want to download all photos from some random user I think there’s an app for that® too.

How to use it

  1. Create a bookmark and paste the code below.
  2. Go to a photo detail page or click on a photo from the Instagram web app.
  3. Click Instadownload.
  4. Click Download.
  5. Enjoy!

The code below

javascript:(function()%7B%24('body').append('%3Ca%20download%20class%3D%22instadownload%22%3E%26%2311015%3B%20Download%3C%2Fa%3E%3Cstyle%3E.instadownload%7B%20position%3Aabsolute%3B%20border-radius%3A%203px%3B%20font-size%3A%2020px%3B%20z-index%3A%2010000%3B%20top%3A%2090px%3B%20cursor%3Apointer%3B%20right%3A%2020px%3B%20padding%3A%2010px%3B%20background-color%3A%23FBFDFF%3B%20border%3A%201px%20solid%20%23125688%3B%7D%3C%2Fstyle%3E')%3B%24('.instadownload').attr('href'%2C%20%24('meta%5Bproperty%3D%22og%3Aimage%22%5D').attr('content'))%7D)()

I know, I could’ve made a draggable link. WordPress automatically filters it so this will do for now.

What you get

Screen Shot 2015-08-07 at 10.45.45

Links & stuff

 

 

Build a simple website with Silex

I love static* websites. They’re usually faster to develop, smaller, require no database or backend and are faster to load. Of course they require more work to maintain and tweak at first, but if you’re a developer, these things should be pretty entertaining or at the very least, straightforward.

There are many options out there for building static websites; both free, like Anchor, Sculpin and Stacey; and paid, like Kirby and Statamic, among many others, like Silex.

This is a good moment to tell you that I’m aware of the difference of static websites vs flat-file CMSs vs micro-frameworks.

While I love the infinite possibilities of full-fledged CMSs and the blazing speed and simplicity of full-static websites, I feel that on most cases a good middle point is useful. That’s why I frequently choose micro-frameworks (or flat-file CMSs) over full CMSs or static site generators. One gives too many options, the other is too restrictive.

Silex is “a PHP micro-framework built on the shoulders of Symfony2 and Pimple and also inspired by Sinatra.”

It’s really simple to put together a simple website running Silex.

First, run composer init to start your project.

Then add silex/silex and twig-bridge, to use the Twig templating engine:

{
    "require": {
        "silex/silex": "^1.2",
        "symfony/twig-bridge": "^2.6"
    }
}

Then just run composer install on a Terminal.

After that, all your dependencies should be sitting in your /vendor’s app directory.

Create an index.php file with this contents:

require_once __DIR__ . '/vendor/autoload.php';
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;

$app = new Silex\Application();

// $app['debug'] = true;

$app->register(new Silex\Provider\UrlGeneratorServiceProvider());

// Register Twig provider and define a path for twig templates
$app->register(new Silex\Provider\TwigServiceProvider(), array(
    'twig.path' => __DIR__.'/views',
));

// Home page
$app->get('/', function() use($app) {
    return $app['twig']->render('index.html');
})->bind('index');

// Other page
$app->get('/other', function() use($app) {
    return $app['twig']->render('other.html');
})->bind('other');

// 404 - Page not found
$app->error(function (\Exception $e, $code) use ($app) {
    switch ($code) {
        case 404:
          return $app['twig']->render('404.html');
            $message = 'The requested page could not be found.';
            break;
        default:
            $message = 'We are sorry, but something went terribly wrong.';
    }

    return new Response($message);
});

$app->run();

This bootstraps Silex. Here I declared two routes: / (home) and /other, which load the views index.html and other.html respectivly, on the /views folder.

That’s it! Following the same pattern, you can define as many pages as you wish.

If you need to do more complicated stuff like sending e-mails, do some logging or build forms, you can check the Silex documentation.

Links

Portada: RSS reading app with Laravel 5

A few weeks ago, along with Pablo Massa, we launched Portada, a web app to read news from multiple sources.

The Problem

The problem we were trying to solve is that local news sites are mostly hard to read, hard to skim through and cluttered with ads. Also, it would be cool to have all news sources in a timeline fashion. Although you could certainly achieve this last feature using a regular feed reader.

Our Solution

So after a few iterations and proof of concepts, we put together a few components that make the whole app: a Laravel 5 backend for administering news and news sources, a spider that crawls news sources every 5 minutes and dumps them into our database, and a beautifully readable front-end.

Some specs

Apart from Laravel 5, we’re using:

  • Bower for managing dependencies in the front-end.
  • Laravel Envoy for deploying.
  • Bootstrap 3 for the backend.
  • Fastfeed for parsing RSSs.
  • Mustache.js for templating on the front-end.
  • Less/Lesshat for our styles.

From here

The app is mainly done, although we keep a Trello board full of features to evaluate and implement. Some of them include some e-mailing, basic search, real-time refresh, automated testing and of course some refactoring.

You can check out the posts in our blog (in spanish) to follow up the development and design of the app, or read the source code in GitHub.

Mac space running out? Whatsapp backup to iCloud may be the cause

A few weeks ago I noticed my Mac was running a bit low on disk space. It didn’t surprise me, since I have loads of RAW photos that take up massive amounts of space, and it’s a 256GB box.

However, since it hit around 15GB I’ve been keeping an eye on it. Since then, I’ve seen how almost on a daily basis the free space drops and drops…

If this situation sounds familiar to you, maybe you can find the solution here.

When it hit 10GB I started looking for an explanation. After examining with Disk Inventory X, I noticed that ~/Library/Caches folder was really fat. Fat as in ~40GB. You can browse directly to that folder by pressing CMD+Shift+G on Finder and entering ~/Library/Caches.

After further investigation, I found that folder com.apple.bird was the culprit, weighing around ~35GB.

Apparently that folder stores iCloud related stuff and you can delete it safely. I deleted it, but in a matter of weeks it got fat again. I had eradicated the symptom, but not the problem.

After searching the web again, I found an article¹ that shared the same concern. The theory is that the root problem is Whatsapp backup to iCloud. It’s not 100% proven, but after I disabled Whatsapp backups, the folder hasn’t grown again. Alternatively, I think you can enable weekly or monthly backups in Whatsapp.

Let me know in the comments if this has helped you or you have any clues on this topic.

[1] – Large com.apple.bird directory – Apple Support Communities

 

Laravel Homestead: multiple projects, one VM

Vagrant is great to isolate a development environment inside a VM. However, after a while you can find you have a bunch of heavy VMs that share the same characteristics, each one for a simple PHP project.

Enter Laravel Homestead

In these cases, you can safely use Laravel Homestead. Homestead is a Vagrant box pre-configured with an Nginx web server, PHP 5.6, MySQL, Postgres, Redis, Memcached, and other stuff to make development easier and faster.

The documentation is pretty clear and in a few steps you can have a working development environment, where you can add multiple projects.

Chek it out: Laravel Homestead

Update: Also, I recently found a simple guide on how to install MailCatcher on Homestead, which is really useful: Installing MailCatcher in Laravel Homestead