Local Drupal 8 development with PHP OPCache & without MAMP or XAMPP

Recently I’ve been contracted to develop a client site with Drupal 8. One thing I have found is the recommended ways to install Drupal are to use “one-click installers” from your web host or use tools like MAMP or XAMPP for local development.

But, what if you’re a minimalist like me and want to use the LAMP stack natively in OSX without those tools? Well, you can do it but there is an issue that I found while attempting to install Drupal 8 without these tools.

That roadblock was Zend OPCache.

I won’t go into all of the specifics of what OPcache is or does but suffice it to say, Drupal 8 Highly Recommends that you have it running in your PHP configuration.

After reading a bunch online, the solution seemed simple. Just edit your php.ini file and change the value from 0 to 1.

[opcache]
;Determines if Zend OPCache is enabled
opcache.enable=1

This seems easy enough. I opened a terminal, edited and saved the file. I restart Apache and refresh my info.php file in the browser. Nothing. No matter what I did, it wouldn’t work.

After trying a bunch of things, I noticed the date and timezone were different and I remembered I changed that info in a file called:
99-liip-developer.ini.

After some research, I found this version of PHP contains additional files that override parts of php.ini

If you look at the top of your info.php file and you see php-osx.liip.ch, you will be affected by this issue as well. After more digging I determined in order to enable Zend Opcache on a native PHP install that is using this version, you need to edit this file:

20-extension-opcache.ini. This is the file that loads Opcache extension for your local PHP installation and will allow you to install Drupal 8 without issues or warnings.

I am posting because it took me many hours to figure this out and I am hoping this will save someone else a great deal of time. Thanks for reading

Parallels: Show OSX Dock in Fullscreen Mode

Recently I’ve been spending a lot of time in Windows 7 via Parallels because Adobe’s Creative Cloud Apps run better on Windows than they do on OSX.  I know, blasphemy.  Anyway, I need to be in full-screen mode to utilize my dual monitors while in Windows but I also need to access  OSX’s Dock & Programs without exiting Parallels Full-Screen mode. So after playing around I figured out how to accomplish this and want to share it. The keyboard shortcuts are as follows:

  • Parallels Enter Full-screen Mode: CTL + COMMAND + F
  • Show OSX Doc while in Full-screen Mode: CTL + D + Alt/Option

The trick with this shortcut is you don’t press all three keys at once. You press and hold each key one after the other. So that’s it! I hope this was quick, to the point and helpful for you.

Tags: , , , ,

LESS in 4 Steps. (A designer’s guide)

Whether you’ve used CSS for years or just got a handle on CSS, you’re probably hearing talk about LESS, SASS, CSS pre-processors, mix-ins and wondering where and how to get started. If you’re like me, you learn by seeing it demonstrated versus reading a technical explanation of how it works.

Because of this, we’re going to skip all of the technical mumbo jumbo and dive in to creating CSS from LESS files. My belief is once you learn this critical piece, you will be able to learn all of the technical stuff as you go along. So let’s get to it!

  1. Download & install Koala.
    This is easy to use app creates CSS from your LESS files.
  2. Download example files and unzip them.
  3. Step 3. Launch Koala.
    easy-less-screen1
    You can either Drag & Drop the unzipped example files you downloaded onto the app which will add all of the files to the app or you can click the plus button in the upper left corner, browse to the downloaded files, select the less folder and CLICK UPLOAD(mac) or Ok(windows).
    easy-less-screen2
    You should now have 3 files listed in Koala: base.less, colors.less and style.less. If you’re on Windows you’ll see the path to the file and it will not show you the name of the actual file because the file path is soo long. Just know they are in the order listed above.
    easy-less-screen3
  4. CLICK on the last file listed. It will be style.less. When you click the file, a panel will slide out from the right.
    easy-less-screen
    Click COMPILE. You will see a SUCCESS message. You will also notice you now have a folder called css with a file in it called style.css. That’s it!

Final Thoughts. This is a whirlwind example to get you started. Take some time to explore with the above .less files. I placed comments in each one so you get a better sense of how.less works. If you enjoyed this post, please drop me a line.