How to fix: MySQL not starting on MAMP (Pro)

I recently had to install MAMP Pro, in order to do some separate work from my Laravel Homestead VM.

After a weird Mac crash, MAMP would no longer start the MySQL server. This was the data from the logs:

To fix this, go to MAMP, File > Edit Template > MySQL > [version] and add the line highlighted below.

# The MySQL server
[mysqld]
innodb_force_recovery = 1

The restart the server. After this you can comment out that line. Hopefully you will now be able to run the server again.

A Front-end design workflow (Jul 2016)

It’s been quite a while since I started coding HTML+CSS designs from PSD/Ai/Sketch files. I started using plain CSS files, then Less, started using the awesome CodeKit, then Bash scripts, then Sass, tried Bourbon, tried Neat, learnt Gulp, npm, etc.

I wanted to share what works for me today. I mean, CodeKit still works great and I love it, just like Less or plain old CSS. But this config is what really helps me be more productive.

Sass

The first thing that works great for me is Sass. I certainly don’t use -know even- know half of its features, but just being able to import, use variables, nesting, mixins, etc. makes me more productive than plain CSS.

On a sidenote, I moved from Less to Sass basically because of the command line utility to watch changes and compile automatically, using sass --watch. That also changed a bit afterwards.

HTML5 Boilerplate

This is pretty standard nowadays. I almost always steal the basic HTML  from the HTML5 Boilerplate.

npm

I started using Bower, I love it and it works great. However, now I use some tools to compile Sass, prefix or concat that are stored in npm. So, I don’t want to be using two package managers if I can use just one.

Autoprefixer

This one is pretty straightforward. As per their docs: “just forget about vendor prefixes and write normal CSS according to the latest W3C specs”.

Browsersync

This has been the latest tech I’ve incorporated into the workflow and now I love it. It lets you reload multiple browsers when it detects a file change, remote debug, among many things.

Gulp – Putting it all together

At this time you may wonder how to put this all together. The answer is Gulp. In this setup, Gulp compiles Sass files, autoprefixes them, outputs them in a separate folder. On the fly, as you change Sass files. Also, it provides a small server, watches for changes in other files, and reloads the browser on all connected devices.

Here’s how a Gulpfile looks like:

To start the server, you have to run $ gulp and a browser window pops up pointing to localhost:3000 or similar.

Extras

SVG Injector

This little tool lets you inline SVG automatically on the HTML when an image tag src attribute points to an SVG file.

Links

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

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