Feeds

Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough
Jul 10 2017
Jul 10

Drupal 8 has garnered significant community support over the last year. Many of our favorite Drupal 7 contributed modules now have stable Drupal 8 releases, making the transition to Drupal 8 a smoother and beneficial decision for many organizations. As the spring of 2017 ended, Google search traffic for Drupal 8 also surpassed that of Drupal 7. Certainly not definitive, but another telling clue for those considering transitioning to the latest release.

Google Trends: Drupal 7 vs Drupal 8 in 2017

Let's get started with Drupal 8 basics by performing the core install. Then, we'll setup a single community contributed module.

Setting up a Drupal 8 Environment

I'm going to assume that folks reading this tutorial are familiar with a previous iteration of Drupal (ideally 7). If not, there's many ways to setup the pieces and parts on your workstation necessary to start local development. The details aren't in the scope of this tutorial. In short, you could:

  1. Individually setup a Linux, Apache, MySQL, and PHP (LAMP) environment on your local Windows, Linux, or Mac OS system
  2. Use a cloud-based server that is LAMP ready
  3. Leverage the Acquia Dev Desktop software to automate the environment setup process

As a team, Daymuse uses Acquia Dev Desktop to manage our local development environments. That's what I'd recommend you do as well. The software is simple to install. It automates several installation and management processes. It'll keep up with repository updates so you can quickly create Drupal sites with the latest distributions available. It also provides integration with Acquia enterprise services. This tutorial will proceed from the point of having Acquia Dev Desktop installed, working from Mac OS.

Drupal 8 Install

Let's create our first Drupal 8 install on our local workstation with Acquia Dev Desktop.

  1. Open the Acquia Dev Desktop app
  2. Select the plus ('+') symbol on the bottom left
    Acquia Dev Desktop, Create a Site
  3. Click "New Drupal Site..."
    New Drupal Site Acquia Dev Desktop
  4. Select the latest Drupal 8 version (8.3.5 at the time of writing)
    Drupal 8.3.5 install

This will begin the file download and installation process of Drupal 8. This will send you over to your web browser to complete the configuration. Follow the prompts: select language, your install profile (Standard generally), confirm your system meets requirements, let Drupal configure a new database, and finally configure the site.

Drupal 8 configure your site after install

This information can be changed later. Don't worry about having a great site name or ideal email address just yet.

Once this process completes, you should wind up logged into your new Drupal 8 site.

Drupal 8 post install landing page

If you've had any trouble working through these initial Drupal 8 core steps, feel free to reach out to me on Twitter @chrisrcooper. Once you've poked around your install, which should look surprisingly like our generally recommended admin design for Drupal 7, let's begin the process of installing a contributed module.

Setup a Contributed Module to Extend Drupal 8

Our most popular blog regarding a single contributed module is our installation and setup of Simple FB Connect in Drupal 7. Let's work through installing Simple FB Connect in Drupal 8. The configuration process of the contributed module is quite similar as it is in Drupal 7. The download and installation process is quite different since we cannot rely on Drush to do as much of the heavy lifting. In order to install Simple FB Connect, Composer -- a PHP dependency manager -- is required. This article isn't focused on the details of setting up Composer which may be different depending on your environment. However, if you're on Mac OS and are comfortable with the command line, here's the TL;DR version of other Composer tutorials:

Install and Configure Composer PHP Dependency Manager for Drupal 8

Download via Terminal and cURL:

curl -sS https://getcomposer.org/installer | php

Results should read:
Install Composer on Mac OS Results

We don't want to only use Composer for this single project. Let's make the composer command global:

  1. Copy:
    sudo mv composer.phar /usr/local/bin/
  2. Edit your local Bash config:
    vim ~/.bash_profile
  3. Add Composer alias:
    composer="php /usr/local/bin/composer.phar"
  4. Relaunch Terminal
  5. composer command should operate now (outputs command list)
  6. Tell Composer where Drupal repositories are (be sure you're working from your Drupal install directory):
    composer config repositories.drupal composer https://packages.drupal.org/8

Composer is now installed on your workstation, available throughout Bash, and configured to work with Drupal 8 repositories. Let's use Composer to quickly install Simple FB Connect and all of its various dependencies.

Use Composer to Install Simple FB Connect Drupal 8 Module and Dependencies

Use composer command in Terminal to install the version 3 Simple FB Connect module:

composer require "drupal/simple_fb_connect:~3.0"

This may take some time as Composer initializes the Drupal repositories, results should read:

Drupal 8 composer install repository

As you can see from the results, Composer did a lot of heavy lifting in installing various external dependencies that Simple FB Connect has. Phew! Take a break.

Configure a Drupal 8 Module

Now, let's enable and configure the Simple FB Connect module in our Drupal 8 installation.

Use Drush to enable the new module (or do so from your Extend page /admin/modules):

drush en simple_fb_connect -y

Confirm the module is enabled. Go to your Extend page: /admin/modules. You should see:

Simple FB Connect installed on Extend page

Clear the site's cache so that configuration options will be visible: 

  1. Via Drush cache rebuild (note: "drush cc all" no longer works as in Drupal 7):
    drush cr
  2. Or via the Performance page (/admin/config/development/performance) and "Clear all caches" button

Confirm that the Simple FB Connect module permissions are configured correctly on the Permissions page (/admin/people/permissions).

Permissions for Simple FB Connect

Now you will need to configure Simple FB Connect's module configuration options. Our Drupal 7 tutorial for Simple FB Connect walked through the process of creating a Facebook App which is required for this module to connect to. The process hasn't changed. You can follow the Create Facebook App portion of the old tutorial if you don't already have a Facebook App to use. Once you've setup a Facebook App, you can use the credentials to fill out the module configuration.

Module configuration page (/admin/config/people/simple-fb-connect):

Simple FB Connect configuration page

Allow Anonymous Visitors to Login with Facebook in Drupal 8

You'll want to allow Visitors (anonymous users) to login with their Facebook accounts in order to test the module and your Facebook app. Enable Visitors for Registration and Cancelation on the Account Settings page (/admin/config/people/accounts).

Allow Anonymous users to login to Drupal 8 with Facebook

Visit the login page from a fresh browser. Attempt to login with your own Facebook account.

Drupal 8 facebook login on user page

Once you've entered your Facebook login info, if you're successful, you should see your account logged into the Drupal site with your Facebook account name.

logged-in-fb-user-account-d8.png

Congratulations! You've setup a development environment compatible with Drupal 8, Drupal 8 itself, and a contributed module to extend the capabilities of the CMS. You've also setup Composer which will be a useful tool as you work with other complicated PHP projects or Drupal contributed modules.

User Experience and Social Media Logins in Drupal 8

The primary reason you're integrating Facebook's login system is to improve the user experience. You may need to manually prune your user accounts for spam, but it may be worth it to continue to allow users to login (and register) with their Facebook accounts without approval. If a user has to wait for manual administrator approval, they may never bother to return once you've approved them.

We're working to develop tutorials to integrating Facebook throughout your Drupal 8 site. In the meantime, have a look at our Drupal 7 tutorials regarding Facebook:

  1. Drupal Facebook Comments
  2. Drupal Facebook Login

If you're interested in thoroughly integrating Facebook with your Drupal website strategy through professional services, reach out. Think this tutorial is useful? Don't forget to share!

Oct 30 2015
Oct 30

Like many Drupal developers out there, I spend a lot of time traveling. It's one of the benefits of doing knowledge work: you can make your location independent from your work. Handling your email and most communication with a mobile device is straightforward and well supported. It's still rare for developers to do technical work while on the road with anything other than a traditional laptop. The reason is simple: it's hard to run a web server stack and write code without a full blown operating system.

Toting a modern lightweight laptop around the world is doable, but it's not easy. They're somewhat fragile, have a large power brick, and limited battery life. A travel laptop is yet-another-device to maintain to go along with your home workstation, tablet, and smartphone. They're also rather expensive.

What if it was possible to do your standard Drupal development work from the tablet you already own? I wanted to see if this was possible with the current scheme of apps and services available. I ran across a story by Mark O'Connor, a programmer, who had the same thought. He worked out a solution that would offload the heavy lifting to a remote server and had success with it. I wonder: Why can't we do this with Drupal, too? So, I decided to skip the laptop on my next trip and cut down on my baggage.

Despite only having a 28 liter Deuter backpack, I brought along an entire development workstation with me on a recent three weeks in Europe. Mind you, that small backpack also contained the rest of my clothes and needs for the trip. "How?" you might ask.

Tools and Tricks for Drupal Web Development from Anywhere

1) Apple iPad

iPad for mobile Drupal development traveling

Before the Android and Windows folks string me up by my toes, I'm sure this is all possible with other platforms. That said, I had a Retina iPad handy and I appreciate a challenge. With that in mind, a lot of the details in this post will revolve around iOS. I'm sure you'll manage to apply the key concepts and solutions to your own platform solution. I haven't attempted any of this on other platforms, so I can't compare or speak to them.

The primary advantage I see in the iPad is the variety of accessories, and application choice. You may do fine with a generic Bluetooth keyboard that's compatible with any tablet, but having a Smart Cover style keyboard can really help with ease of use while traveling. Similarly, you're going to be chasing down edge case uses of the platform which means having a huge library of Apps to leverage is beneficial. Still, it's worth looking at other tablet options that may suit your specific needs better. A mixed tablet/desktop device like Surface can have access to the entire Windows x86 application library, though those generally aren't mobile optimized.

For me, reliability was also a key need. Apple's walled garden can be an advantage if you have a supported use case and are doing real work. You want your system to reliably function and the last issue you want to deal with is a finicky OS, update, or application. Following this train of thought, I wanted hardware that was easy to simply replace. I don't mean working on the internals. I mean throwing the whole tablet away and starting fresh. Apple's cloud backup and app data storage systems mean that the underlying hardware becomes irrelevant. If the iPad should be stolen, lost, or broken, I could simply walk into the ubiquitous Apple stores or resellers and replace it with a clone. From there, it's just a matter of restoring a cloud backup and a bit of time. This removes the concern of lost luggage, thieves, or a horrendous downpour eliminating my ability to work for the remainder of the trip.

The platform itself also has a bright future with the iPad Pro expected to debut this November. The larger screen and more powerful multi-tasking system is specifically targeted at creative professionals. Putting aside the unknown that is an unreleased device, it's good to see that Apple has plans and a future for the iPad line as a professional's work device.

2) Logitech Ultrathin Keyboard Cover

Traveling Mobile Web Development Keyboard for iPad

For any web developer trying to make due on a tablet, the first accessory they should purchase is a compatible physical keyboard. Onscreen touch keyboards are quite usable for short stints, but try typing out a few thousand words or hundreds of lines of code on one. You'll add a solid 12 ounces (~350g) to your pack, but it's worth the weight.

I had three requirements for a physical keyboard alongside the iPad:

  1. Use the iPad's magnet attachment as a cover
  2. Support iPad specific shortcuts
  3. Double as a stand for the iPad

The Logitech Ultrathin Keyboard Cover meets these three key requirements. It connects wirelessly via Bluetooth which means you could also connect it to a smartphone if needed. It charges via micro-USB with a built-in battery. I purchased a used one off Amazon in near new condition for under $20. It was cheap enough that if it didn't work out, I wasn't losing much.

I've been using this slim keyboard now for months and can say that I type nearly as quickly as I can on my favorite full size keyboard. I can't do so for as long of periods, but my speed isn't handicapped. While it's quite a bit smaller, the key travel and placement is thoughtful. The keyboard's support for iOS shortcuts really helps boost productivity: a double-press of the dedicated home button brings up the app switcher, cut/copy/paste shortcuts work, there's a dedicated function key for Spotlight search, etc.

3) Smartphone with tethering capability

Have an iPad with cellular built-in? Skip this section.

You're going to need to connect to the Internet in order to do any development work. For now, there's no way I know of that'll let you run a local development environment on a tablet (perhaps a rooted Android device or a jailbroken iPad?). You'll need Internet access to utilize a remote environment. You can subsist on WiFi if you're confident you'll always have access.

You can also leverage the cellular in your smartphone. To do this, you'll need to connect your iPad to your smartphone by way of tethering. Your carrier and device will dictate how you can do this, but most carriers and smartphones offer a built-in way of doing so. If not, it's possible to do so with a jailbroken iPhone and a dedicated tethering app on the Cydia store. If you want to avoid jailbreaking, you might have luck with one of those apps with a hidden tethering capability that sneak onto the App Store once in a while.

If you're jailbreaking or otherwise bypassing your carrier's separate tethering plan, be wary: users have been caught and back-billed for a tethering plan.

One way or another, your iPad is going to need a connection to the Internet.

4) Mobile-friendly Drupal Administration

Some of your routine Drupal work will still be within the actual Drupal admin. You'll still be creating Views, editing Content Types, and exporting your changes to Features. It's important that the administration theme is compatible with your iPad's screen size. You'll also want to consider how using your finger rather than a mouse pointer will change the interaction with the administration elements.

We wrote up a dedicated post to creating a mobile-friendly Drupal administration environment, recently. That tutorial applies perfectly here. Drupal's mobile-friendly admin themes still have room to improve, but following our tutorial will put your Drupal administration into a state that will work well with an iPad.

5) Development Web Server Environment

Without the ability to natively run a Drupal development environment (web server and database), we need a remote one. The idea being, we can remotely run a development Drupal environment and feed our changes to it. You can do this by running an environment on your desktop workstation that you setup to connect remotely to, or you can create one in the "cloud" as I do.

I mentioned in the web services recommendations post that I generally prefer AWS for on-demand servers. Setup an instance that'll support a Drupal install. Configure the instance to have access to your Git version control system. Now it's a simple matter of accessing this remote development environment from your iPad, making your changes in-place, then following your normal commit and deployment process to your dev/stage/production environments for your project.

The development instance can also act as an application provider for your mobile device. You'll be able to access all the command line utilities through your mobile deice that are on your development server. You can perform basic text editing with Vim, commit code with Git, and fire off Drupal commands with Drush.

One of the great parts about having this instance always on and independent from the device you're accessing it from is that it'll always be in the same state as where you left off. Even if your iPad is destroyed in your travels, you can replace it, restore your device, and pickup your development work right where you left off. This also means it's possible, though difficult, to get some work done via a smartphone in a pinch as all you'll need is a shell connection to your development environment.

6) iOS Web Development and Project Apps

Of course, you're going to need lots of apps to handle various tasks. These app suggestions bring together earlier parts of this series on web services and desktop applications, as they're intended to all work together. Your mobile workstation becomes similar and synced with your desktop workstation.

Drupal Development Apps for iPad and iOS

Image Editing: Pixelmator

​If you need to do a bit of design work here or there, Pixelmator is an inexpensive, PSD compatible iOS app. The key here is Photoshop compatibility with a simple interface and a solid track record of updates. You want an app that'll keep pace with changes to the primary file format design work is saved to. Photoshop is the standard and Pixelmator offers a similar experience along with compatibility. 

SSH: Serverauditor

​Serverauditor is an SSH app for mobile devices. The app offers one key feature over similar apps: it'll maintain a background connection to a server. If you app switch to Mail to review change requests, Serverauditor will maintain its server connection in the background. A lot of the other SSH options do not do this. Serverauditor is also free. Panic makes a very well reviewed SSH app, Prompt, but I've not jumped on the bandwagon just yet since Serverauditor fulfills my needs while Prompt is fairly expensive.

Whatever your SSH app choice, it'll likely be the most important app choice you make for your mobile workstation. Much of your work will be within the shell on your remote development server: making quick text changes with Vim, committing changes with Git, executing deployment scripts, etc.

Code Editor: Coda for iOS

Again, this choice works with my recommended desktop code editor. If you need to write some serious code, Vim may not be enough for you. Coda for iOS is a full-featured code editor: syntax highlighting, local/remote file management, previewing and of course much more. It also provides an integrated terminal for SSH. If you're comfortable with Vim, you may be able to get away with ignoring a local code editor altogether.

Communications, Project Management, Billing

Keeping pace with the web services I recommended previously, mobile apps are available to support your billing, PM, and communication needs. Slack has a solid team chat app. Skype offers a mobile app with full video and audio calling as well as instant messaging. Basecamp's iPad offering cuts down on the noise so much it's almost a better solution than the desktop web app. Freshbooks' iPad app enables mobile time tracking and invoicing. These apps themselves are all free.

The idea here is that your "normal" workflow can be followed while you're traveling. Keeping consistent services and apps means that the jump between your home workstation and your tablet will be less jarring and generally in sync.

Miscellaneous

​I mentioned Evernote and Things as recommended applications for your desktop. Those work here, too. That'll help you keep your notes and task lists in sync across devices. If you're going to be doing some word processing, Pages, which is now free with iOS devices, is a fine solution. Your general productivity apps are covered between Microsoft, Google, and Apple's offerings.

I should also mention that you may want to consider tunneling your traffic over a VPN while you're traveling. Depending on the sensitivity of your development work and the security of the connections you use while you're away from home, securing your connection with a known VPN provider can help keep prying eyes away from your packets.

Lastly, you'll want something that'll keep your mobile workstation reasonably safe without adding too much heft to your baggage. There's loads of iPad cases, sleeves, and battery extending enclosures available. I opted for a more DIY approach. My iPad and keyboard fit together in a very snazzy recycled blue jean iPad sleeve that my more creative half made.

DIY iPad Sleeve with Recycled Blue Jeans

The Pro's and Con's of Working from an iPad

At the end of the day, while it's possible to do most of a typical Drupal developer's work from an iPad, it's not as efficient as on a desktop workstation or powerful laptop. If you do a lot of frontend development, we're still a long ways off of having a competent DOM inspector and effective process to produce graphical elements from images on an iPad. However, there's nothing stopping you here from writing CSS and JS. The trouble is in the details: debugging and inspecting. The same generally applies to the PHP side of things. You won't have much trouble making edits to theme files, writing simple scripts and hooks, or installing modules thanks to Drush. What you will have trouble with is debugging and other more complex tasks. You'll be able to handle the MySQL side of things with some combination of the MySQL command line and phpMyAdmin. The iPad workflow will also be dependent on the quality of your Internet connection. A slow or inconsistent connection means your work is going to be frustrating when you're trying to tackle things through a remote server.

On the positive side, and what I found to be most important is: I can do almost all my routine work from an iPad. What this means is that I can rely on an iPad to do most of my work from anywhere in the world. It doesn't have to be a grand tour of Europe, either. It can be as simple as deciding to take an extended lunch break at a park and finishing up a View change under leafy shade away from the stale feel of an office. An iPad is much easier to just grab and go with compared to a laptop. That's the biggest benefit: I can take my work with me, at any time, on a whim. The iPad extends my "office" to all the parks and coffee shops within a short walk around my office. That makes for a lovely change of scenery and a happier life.

Looking for more in our series on building a web developer toolkit, perfect for freelance Drupal developers, consultants, and agencies?

Did you like this post and want to see more on building your toolkit? Share it!

Oct 28 2015
Oct 28

This week, we're continuing our Drupal Developer Toolkit series with ten desktop and mobile applications to support your Drupal workflow. These tools can make your day-to-day Drupal development routine more effective. If you've got your own hidden gem to add to this list, let us know!

10 Applications Every Drupal Web Developer Needs

This is my list of local, native applications I use and recommend during my day-to-day Drupal development work. Some of them are certainly applicable to general web developers, but I find them to be especially relevant to a Drupal developer whether a consultant or part of a company. When reviewing the list, consider that I do most of my Drupal development work from a Mac workstation though most of these applications are cross-platform. 

1. Code Editor: Coda

Let's just start this list off with one of the more controversial topics: code editors or integrated development environment (IDE). This is certainly subjective. I've been using Coda now for years and enjoy it quite a bit. It integrates a shell to quickly hop to the command line. For your file transfer needs (FTP, SFTP, etc), a version of the excellent Transmit is integrated. Coda also connects with loads of plugins and version control systems like Git. The interface is generally sparse, not terribly distracting.

I feel like Coda has just what's needed for the average web developer along with some lovely integrations to handle server-side work. It's not as light as what Vim enthusiasts desire. It doesn't have as strong of a code autocomplete as something like Visual Studio. It's not as customizable as Sublime. However, it does hit the basics of all these things, fitting most needs. Most Drupal devs work with Git for version control, here's an excellent write-up on integrating Coda with Git.

IDE Alternative: PhpStorm

​If you do serious PHP development work—creating custom modules from scratch, for example—you may want a dedicated PHP IDE. PhpStorm brings the focus of your editor to PHP with stronger code completion, rich debugging tools, and deep framework integration. PhpStorm also works well the other code you'll run into doing Drupal development, too. There's full support for CSS, JavaScript, and HTML.

2. Local Development Environment for Drupal: Acquia Dev Desktop

Our primary work is in Drupal development and support. For sometime, if you want to run a local development environment to test or work locally on Drupal, you would use a stack of Apache, MySQL, and PHP installs. Eventually, these were combined in a single local application specific to your operating system (see: LAMP, WAMP, MAMP). Eventually, a Drupal-specific environment came about, created by the behemoth Drupal company: Acquia. Their version of a local *AMP stack includes tools specific to Drupal such as Drush. It provides a GUI to help quickly setup local Drupal installs and even integrates with Acquia's version control system to make environment migrations a bit easier if you're in their environment.

Dev Desktop makes spinning up a local Drupal install quick and painless. It's how we get started with all of our new projects, testing ideas and beginning implementation locally.

3. Notes: Evernote

​Web Developers constantly take notes. Meeting? Write down requirements details being addressed. Reviewing a technical issue? Map out the processes firing as they relate to the issue. Notes, notes, and more notes.

You'll want to have those notes at hand whenever you may need to review or edit them. Evernote provides a cross-platform note taking system. It's like an amped up version of Notepad. The WYSIWYG provides enough design ability to handle any sort of note taking needs you can throw at it. It syncs across all your devices: you'll have the note you just started writing on your smartphone in a meeting available on your workstation or their web app ready to be reviewed. If you're still stuck paper and pencil note taking, Evernote offers an excellent camera/scanning system that will OCR the text from your notes. It's possible to add media, categorization, and share notes with colleagues.

I've been using Evernote for years to house a variety of life information that I can offload from my brain. Evernote is also a note taking tool for Drupal developers.

4. Chat: Skype

While you should keep the bulk of business communication to project management tools like Basecamp or Slack, now and again you'll want to send a quick message. Maybe you want to have a short conversation about a feature or quick review. Email isn't always light enough to handle something minor and can be frustratingly slow. Instant messaging is a great communication method to fire a quick question off to a colleague. There's a lot of platforms out there for this. However, Skype does a good job of encompassing the needs of a quick one-on-one communication. It offers a fine platform for instant messaging, offering a cross-platform application. It provides a way to initiate file transfers, screen sharing, audio calls, and video calls within that instant messaging interface. All these base features are free.

Often, I'll want to show a multi-step interaction to a colleague that's too much for a screenshot or screen recording, and Skype's quick screen sharing system is an excellent solution. It's a great way for Drupal developers to walk through an interaction or system with other developers.

More than anything, I'd suggest keeping your business communications within a specific instant messenger, no matter which app that is.

5. To-do Task List: Things

Basecamp is an excellent tool for creating project-level, shared task lists. However, you probably have a bunch of tasks you need to complete that aren't things you need to share with the team. Maybe you need to update your local Drupal development stack, perform an OS update, or order a new keyboard. Keeping all of this in your head is a terrible use of your memory and attention. Get it out of your head and into a task list.

I'm a big fan of the minimal Things to-do list app. There's a desktop and mobile app that syncs your tasks. Unfortunately, it is Apple-centric. If you need something similar that's cross platform, take a look at Todoist.

6. SEO Deep Dive: Screaming Frog SEO Spider

Let's say you have a Drupal site with thousands of pages. You're leveraging the Metatag module to handle SEO-related data. How do you know all those thousands of pages properly have the right data snippets in place?

SEO Spider allows you to run a local app that'll crawl and index data search engines are interested in across your pages and site. This will help you identify weak points and missing data across the site without having to manually view the source on a bunch of pages to perform a manual analysis.

7. MySQL Database Management: Sequel Pro

While phpMyAdmin was probably your first introduction to GUI-style management of MySQL databases, Sequel Pro is the first step into professional MySQL use. This powerful, native client for Mac OS X is totally free. The app has the features you may expect: a powerful query editor, full CRUD support within the UI, and strong backwards compatibility. It also has a few you may not: multi-window and multi-tab options to manage your remote connections, favorite host saving, several connection methods (including SSH tunneling), and a lovely interface to browse contents and structure.

If you're not happy in living in the mysql cli, Sequel Pro offers a fast and flexible native app to handle your database management.

8. DOM Inspector: Firebug

Firebug is the original Document Object Model (DOM) inspector. It's a free plugin for the Firefox web browser. DOM inspectors allow developers to view the frontend source code that a web server delivers to a browser. It also allows developers to review some other data provided by the web server like HTTP Headers.

Other Drupal developers might use similar tools integrated with Chrome or Safari. However, Firebug is a dedicated tool for this purpose and continues to get updates to help make the life of web developers easier.

9. Animated Screen Grab (GIF): RecordIt

​If you have a short, visual interaction you want to show a client or colleague, sometimes an animated GIF is the perfect solution. Screenshots are static, so they're no good for animations or multi-step interactions. Setting up a screenshare can be too much for a simple question or process review. RecordIt is a free, cross-platform app to quickly select a portion of your screen and record several seconds of it to an animated GIF file. RecordIt provides a public link to share that file so others can review it. Quick, simple, and free.

10. "​Wireframes": Balsamiq Mockups

If you need to produce a quick mockup for a design or user interaction and you're not a designer, I'm a big fan of Balsamiq Mockups. It's a very simple tool for laying out user interface elements and exporting them to shareable visuals (JPG, PNG, etc). It's miles from the complexity of a proper wireframe tool like Adobe's InDesign. It's a great tool for Drupal developers that want to produce a quick user interface for a client or colleague to review that doesn't take a degree in design to use.

Mockups provides interface elements that are for both desktop scaled designs or mobile scaled elements.

BONUSES 

​Save Your Eyes with f.lux

f.lux is not a Drupal developer specific tool, but it's the one application on this list that I think literally every computer user should have installed. Its purpose is fairly simple but its effect can genuinely improve your life. f.lux manages the display color on your monitor, adjusting the color to match the sun's trajectory over the course of the day. f.lux adjusts its color based on time of day and your location. As the sun goes down, f.lux will lower the intensity of colors, making those whites much less bright. These adjustments can really help save your eyes, reducing eye strain as your stare endlessly into that backlit monitor. It's free and cross-platform.

If you're wondering if f.lux really makes a difference, install it, use it for an hour or two after the sun as gone down, then quit the application. This will revert the color output to default on your monitor as you shield your eyes from sudden glare of your monitor. If you use a computer, install f.lux.

File Sharing with Dropbox

​There's lots of competing file sharing apps and services out there. Cloud file storage in itself is a pretty simple thing: it's just a place to store files that aren't on your local disk. The key reason I recommend Dropbox versus other options is simply that, in my experience, other businesses tend to use Dropbox. When working with clients, the way they'll often share larger files is via Dropbox.

If you as a Drupal developer also use Dropbox, you'll be ready to utilize shared folders and file systems from clients and colleagues without having to install yet another app when they do. This choice is primarily about reducing friction in your day-to-day. Dropbox itself is a fine file sharing service, offering cross-platform apps and a usable free account level.

Building a Drupal Developer Toolkit Series

Native, local applications serve as another key tool for Drupal development teams. These are your bread and butter tools: they provide the primary way for you to do your work as a Drupal developer. What applications mentioned could help you be more productive?

Looking for more in our series on building a web developer toolkit, perfect for freelance Drupal developers, consultants, and agencies?

Did you like this post and want to see more on building your toolkit? Share it!

Oct 22 2015
Oct 22

This week, we're continuing our Drupal Developer Toolkit series with eight lightweight web apps. These tools will make your day-to-day Drupal development routine more effective. If you've got your own hidden gem to add to this list, let us know!

8 Best Web Tools for your Drupal Workflow List

These are some of the key web apps we use for singular tasks throughout our web development work. These are the quick, single-use quality of life improvement tools. They aren't intended to be deep, high-end professional tools. There's bound to be other professional, purpose-built, comprehensive tools for the uses cases supporting these web apps. We're not pursuing deep, complex systems in this list. Instead, these are the lightweight tools that follow the Pareto principal. All of these web apps are free or freemium.

1. Code Cleanup and Formatting: Tabifier

​Once you've worked with a team of other web developers, one of the things you'll notice about their code is differing methods of to create indents. Some developers like to add two spaces, a tab, or several spaces to form an indent level. There's practically a holy war on web forums about which one of these methods are correct. Often, different methods cause different effects in different code editors. Some of your fellow developers might be in Windows using Visual Studio while another is rocking Vim from the command line on a Linux server.

Code formatting web app tool spacing tabbing indents

The best way to handle this is to set a standard for your team to work against. Discuss and agree to use a single format. While indenting is one of the most discussed code formatting issues, there's others: when to break curly bracket code to a new line, spacing within comma delimited lists, comment formatting, etc. This may seem like a fairly minor thing, but consistently formatted code helps make it more scannable. This can reduce effort neeeded to accomplish tasks for everyone on the team, paying dividends over time. It doesn't matter what format is chosen so much as everyone follows the same format.

If you've got a mess of code and want to quickly clean it up without having to do so manually (and your Integrated Development Environment (IDE) doesn't have its own method), there's a great, free, simple, web app to handle this: Tabifier. Copy your code into the WYSIWYG, select the code syntax to follow, hit format, and copy your newly formatted code back to your editor.

2. Code Comparisons and Difference Identifying: Diff Checker

Web tool for code comparison difference diff checking

I've got two blocks of code and I want to quickly compare them, finding the differences. For whatever reason, the code isn't in an IDE that'll make it easy for me to quick compare two files. Maybe I want to check if a file was changed from an original, and more specifically, what was changed. Perhaps I just want to compare a Drupal core update to settings.php (hint hint) to see what the differences are from the last version. Maybe a client emailed me a revised Word doc that has no revision history but they've changed an unknown amount of the document.

This is where a quick A-B difference checker can be a great tool to have handy. A 'diff' will compare two sets of text and identify the differences or changes between the two. Diff Checker is an excellent, simple tool to do this with as few options as possible. All I've got to do is copy and paste into version A and B into two text boxes and hit compare. The differences are highlighted for you so you can see exactly what has been changed.

3. Writing Blogs, Documentation, Proposals: Hemingway Editor

Writing Analysis Web App Tool Free Grading

Writing deep technical documentation sometimes means I let my English composition fall by the wayside. Explaining technical concepts requires forming a complex mental model that can push out the basics of writing. Suddenly, my document is chock-full of run-on sentences, complicated phrase structures, and inconsistent voice. For my readers, it's difficult enough to follow new technical concepts. There's no need to complicate that with grammatical complexity, too.

Hemingway Editor scans your text for reading difficulty, adverb use, simplicity, and consistent voice. The app will also provide a "readability" score which represents reading difficulty. Hemingway Editor does this with a simple WYSIWYG interface and highlights issues inline. The clean interface helps me stay focused with simple visual cues to identify problems. Give it a shot to improve the readability of your own articles, proposals, or documentation. There's a lot of Drupal.org docs that would benefit from a quick cleanup!

4. Monitoring Search Engine Page Ranks (SEO): Pro Rank Tracker

​I like to keep track of search engine result rankings for particular URLs. In the case of this site, I want to keep an eye on how we rank on Google for local search results plus our various services. A good search phrase example would be: "Richmond Drupal developer". If our ranking drops, I want to see if a new, local competitor is outshining us in some way. Or worse, something has happened to our domain and Google is penalizing our result ranking (for example, comment spam could cause this).

Heading off to Google every morning at 9AM for a quick scanning of results isn't viable, though. Google's guess at your location and other meta data can affect the results, too. Instead, consider a web app that'll track this result ranking for you over time. Typically, you need only feed it a URL and search terms. I've been using Pro Rank Tracker for this for a while but they've recently drastically cut back the usefulness of their free service level. Dear Reader, if you have a better app suggestion for tracking page ranks over time, shoot us a tweet.

5. Search Engine-friendly Page Testing (SEO): ​Varvy (previously Feed the Bot)

Back in April of this year, Google rolled out the Mobilegeddon update that added weight to mobile-friendly display for websites in search results. Basically, page rankings could be lowered a bit if they weren't considered "mobile-friendly" by Google. This was another kick in the pants for web developers, webmasters, and site owners to configure websites for optimized display on smartphones and mobile devices.

There's several web apps that'll test a particular URL for mobile-friendly display, but none are as simple yet comprehensive as Varvy's in my experience. It tests the full gamut of good website practices, beyond simply testing for a "mobile-friendly" display (which Google can do quite well). Varvy will check for robots.txt issues, a sitemap, solid HTML practices, HTTP headers, and much more. The test results also provide suggestions and jumping off points for fixing issues. It's an excellent way to do a high level check of website best practices that search engines care about.

6. Domain Health Monitoring (SEO): Majestic

Search Engine Result Ranking Tracker Web App Tool Free

Search Engine Optimization (SEO) is a deep rabbit hole of educated guessing into the black box that is search engine algorithms. One of the more basic concepts is that a domain (daymuse.com, for example) has a strength score as a whole. In addition, every individual web page (URL) has a strength score. Think of them as multipliers: a solid domain can help a weak page rank well in the same way that a really great page can standout from a weak domain. The actual strength of a domain or page comes down to some combination of content (quality and quantity), other URLs which link to it (backlinks), age, and other smaller factors.

The general goal of any website owner should be to strengthen the score, or authority, of their overall domain if organic search traffic is important for the organization. It's a bit of a chicken and egg problem as strong domain authority usually raises search results which raise traffic which tend to generate more backlinks and greater authority. The only way to get this positive feedback loop started is to do so manually. Reach out for relevant backlinks, write quality, link-friendly content, and make sure search crawlers can index your content easily. The details aren't within the scope of this post, but if you're not already using Google Webmaster Tools (WMT) to their fullest extent—that's the best place to start. With all that effort, however, you'll want to keep track of overall domain authority over time. There's a handful of web apps that do this, but I've found Majestic keeps the freshest index of pages and backlinks with lots of features at the free account level.

7. Social Media Tracking: SumAll

​Drupal freelancers, small firms, and agencies probably have half a dozen social media accounts. While a great tool like Buffer can help you manage and post content across social media platforms, it doesn't keep track of "stats". Which of your social media campaigns are most effective, generating the most user interaction or advocacy? You could dedicate a block on your calendar to manually login to each platform and record these stats. But, you wouldn't do that, right? You're a systems thinker. You listen to Cortex. You devise solutions that automate routine tasks for you.

SumAll is your social media statistical roundup tool. Connect it to all your platforms and get an email update that rounds out all the stats for you and tracks them over time. SumAll's UI, while still evolving, does a great job of trying to deliver loads of statistical data across lots of metrics and platforms. Their free account level is plenty sufficient for small shops.

8. Testing Drupal Modules: simplytest.me

​Did you just read about a new Drupal module that might solve an issue for you on /r/Drupal's contrib Wednesday thread? Did you spot an interesting use case for a module from this week's TheWeeklyDrop? Perhaps you were browsing around Drupal.org's module listing and wanted to try something new out.

Rather than going to the length of firing up a clean local development environment and installing the module, you can leverage simplytest.me. It's a free resource for testing Drupal modules. The web app lets you select a module name and fire up a copy of Drupal core with the module. You've got 30 minutes to do what you need to and then it's gone, into the ether. It's the ideal quick test platform.

Building a Drupal Developer Toolkit Series

Web apps serve as another key tool for Drupal development teams. These simple, always-available, free web apps can cut surprising amounts of tedium from your schedule. They can make you more effective at your work. What web apps mentioned could help you be more productive?

Looking for more in our series on building a web developer toolkit, perfect for freelance Drupal developers, consultants, and agencies?

Did you like this post and want to see more on building your toolkit? Share it!

Oct 05 2015
Oct 05

Last week I started a series with you all: Upgrading Your Drupal Developer Toolkit. In today's tutorial post, we'll work through web services that any freelance Drupal developer, small consultancy, or agency will find useful within their tool set of outsourcing methods.

Web services that focus on software-as-a-service (SaaS) are often excellent returns on investment for small business. They help eliminate the need for internal expertise that otherwise might have to be provided for by an employee, contractor, or partnership often underutilized. Daymuse is a successful web development consultancy, but we couldn't reasonably hire a full time accountant with our current workload. This struggle, where small business may have workers who "wear many hats", is apparent in industries outside of Drupal and web development. However, there's several industry-specific services that I think may help you reduce costs and frustration. Let an external web service reduce the weight of some of those hats. I'd like to shed some light on our experiences with web services and what we've been using happily over our last seven years of experimentation.

10 Web Services to support your Drupal Business

My service recommendations come from the point of view of a relatively small web development company. They won't be for everyone, but I find they work well for us. Of course, they can be useful outside the realm of the Drupal content management system (CMS), too! Tweet us your own recommendations and feedback!

1. Team Communication: Slack

Slack sits somewhere between email and instant messaging. It's a sort of expanded IRC with a slick interface. You can easily attach files and share links (with teasers embedded). You can group conversations by channels: a channel for each project or client so that a conversation will retain context as you switch between them. Slack is abundantly cross platform with a quality desktop, mobile, and web app. The free pricing level has suited our needs so far just fine.

Slack is the newest addition to our team's arsenal of tools, but it's already become part of our routine.

2. Project Planning: Basecamp

​If you're too small to have a dedicated project manager sporting a slick PMP, Basecamp is about as close as you're going to get to having your team internally manage projects efficiently. The simplistic, web-based tool allows teams to create projects, task lists, assign priorities, and comment on topics. Think of combining forum software with a checklist and then adding some project management specific niceties.

I've been using Basecamp for years. Competitors have come and gone and there's plenty of competition in the service offering. There's no useful free option for Basecamp, but the $20 per month level does provide for several ongoing projects and a small team to collaborate. Most importantly, external parties (think clients) can handle using Basecamp without much training. Basecamp also offers an excellent, free, mobile app. If you're still managing projects via email and spreadsheets, Basecamp offers an excellent boost to your team's productivity.

Basecamp is simple project management because that's all it needs to be. Watch out for complicating this process more than need be.

3. Accounting and Payments: Freshbooks

When Daymuse first started, I'd track time on projects with a stopwatch and a spreadsheet. When I wanted to send an invoice to a client, the process would look something like this:

  1. Call up an invoice template in Word
  2. Frustration begins modifying content as I break the layout
  3. Contemplate why we're still using Tables for layout in Word docs, frustration rises
  4. Send email, forget to attach invoice
  5. Cry and repeat

I'd forget who I sent an invoice to and when. I tried keeping track via a calendar app, one more thing to deal with. I couldn't easily accept credit cards without creating a PayPal invoice. The layout of the invoices was somewhat haphazard and the emails themselves were similarly inconsistent. It was unprofessional.

If I ever wanted to gather statistics for how the business was doing: profit, expenses, time-to-pay per client, and so on—I'd have to fire up a spreadsheet and lose a bunch of time doing that instead of real work.

Freshbooks changed all of that. Time tracking is now a simple process of clicking start/stop and selecting an appropriate project/task. Invoices are cloned and modified in minutes. Payment reminders are automatically sent and customizable. Clients can pay with credit cards directly from the invoice. I can bring up reports on just about any financial aspect for the business and monitor trends. All of this can be easily shared with external tax professionals. Freshbooks also offers a lovely mobile app and can sync with Basecamp.

Freshbooks made everything to do with money, easier. Their plans start as low as $108/year. Ignoring all the headache and time saving, making the process of time tracking easier will make up for the cost by helping you properly bill for your Drupal expertise.

4. Payroll: Gusto (previously ZenPayroll)

If you've taken on Payroll as a small business, you already know what a difficult process it can be. Good luck setting up all the necessary tax payment processes, following all the dates to make sure money goes to all the right places at the right time. There's also serious implications to making mistakes here: fines and interest add up. Keep being a Drupal expert and avoid becoming a Payroll expert. We switched from a local provider of Payroll services (who did a fine job) to an online provider to better fit our processes.

After reviewing several options, Gusto seemed to be the best choice. Their custom service is excellent. Every time I've had a question or issue, they're easily available via phone or email. We also saved money as Gusto's pricing is very competitive. Gusto offers an excellent mobile app and syncs with Freshbooks.

5. Cloud Hardware, Website Hosting: ​Amazon Web Services (AWS)

We reviewed all the major "cloud" hardware providers before choosing AWS to build out our infrastructure. All of our services exist within the systems provided by AWS. Our data backups are stored in AWS snapshots. We use RDS for our databases, which provides MySQL as a service with automatic regional failover. Virtualized, easily scalable hardware means it's easy to spin up an additional Varnish instance as anonymous traffic grows or Memcache instances to protect your MySQL backends from unnecessary repeated selects. We route client emails over SMTP (well supported Drupal module) through Amazon's Simple Email Service (SES). This lets us avoid worry about spam and yet another support need. If you do technical work on the web, Amazon likely offers software-as-a-service solutions to make your life easier, outsourcing one of the technical balls you're trying to juggle internally.

We've also been experimenting with Digital Ocean for certain, smaller, one-off projects. Their pricing starts at $5/month for a service we've found to handle a basic Drupal or Wordpress instance largely because all of Digital Ocean's offerings are SSD based. The least expensive plan only has 512MB of memory which is admittedly too little for all but the most basic Drupal sites, but the $10/month plan kicks it up to 1GB which will certainly support most small or local business informational Drupal websites. Like AWS, Digital Ocean generally targets technically savvy users: this isn't a service that I would recommend non-technical small business owners to try to DIY your own Drupal with. Digital Ocean does offer one-click Drupal installs (as well as Wordpress and other popular CMS), though.

Drupal Cloud Website Hosting

I would be remiss not to mention the two big players that provide Drupal-specific web hosting: Pantheon and Acquia. Pantheon provides a more developer-centric platform with an excellent GUI for managing development environments and migrations. Their backend is Rackpace. Acquia targets larger organizations, with its bread-and-butter being larger corporations looking to offload all Drupal-related web management. Acquia's backend is Amazon and is corporate arm of Drupal's founder.

While Daymuse competes with both Pantheon and Acquia for managed hosting customers generally, they both operate at higher volume levels and are more hands off. We've worked with both Acquia and Pantheon at every level of their service offerings with various clients, often acting as experts supporting the clients' interests when evaluating options. I think Pantheon is an excellent solution for a savvy freelance Drupal developer or small firm that wants to offer hosting as part of their package without building out an infrastructure. Acquia's managed hosting can be a good (though expensive) solution to outsource a large chunk of an internal IT offering, avoiding an in-house team of SysAdmins, DevOps, etc for large organizations.

If you're a small-medium business, non-profit, higher ed., or regional government: consider looking into small-medium agencies that specialize in your software and offer managed hosting. Often, they'll be able to offer you the one-on-one attention you need while providing managed hosting services at reasonable costs. That's exactly what we do.

6. Domain Services and Registration: Dreamhost

Domain registration has become one of the more mundane tasks in a web developer's life. Years ago, it was incredibly expensive to purchase your own dot com. Now, there are dozens of registrars available that provide low-cost registration. There's also a lot more choice in domain extensions: more than just .com, .net, .org and the restricted .gov, .edu, or country-specific extensions. The newest top-level domains (TLDs) are more descriptive and niche. Down the street from my office is the Virginia Museum of Fine Arts which with their latest redesign moved to http://vmfa.museum. These newer TLDs should reveal an immediate expectation for users when browsing, but it is a significant change on the web and hasn't really caught on just yet. The envy of the web world is still short dot coms.

All of Daymuse's domain registrations have been through Dreamhost for the last several years. They aren't the least expensive registrar, but they do provide quality, direct customer service and include private registration for the domain. Private registration allows domain registrars to obfuscate the WHOIS information for the domain owner, keeping contact information, name, and mailing addresses hidden from public view. We've been pretty happy with Dreamhost. Their domain registration rates haven't seen an increase in quite some time and annual renewals don't tend to be anymore expensive than the initial registration which is sometimes a "gotcha" with other registrars.

In recent months, I've also heard great things about Hover, though I nor Daymuse have ever used them. The general consensus seems to be that they target the slightly less tech savvy folks who'd like to register a domain and not have to understand all the intricacies of DNS and the like. The impression I get is that they help guide you through that process and assist in transfers or associations. Have you had experience with Hover? Tweet me what you've thought about the experience!

7. Email and Calendar Hosting: Google Apps

Our email and calendar system has been provided for by Google Apps since it was first released as a public service and associable with domains. Since then, Google Apps has come out of beta and the baseline account costs about $50 per year per user. Google Apps offers more than just email and calendar, but for those two services, I think business should generally err on the side of caution. Google is a big name and will likely be around for a while yet to come. That's something you want with your email and calendar services. Google Apps is also strongly cross-platform: whether mobile or desktop, Apple or Windows Phone, you'll be to access your email.

We work with a number of healthcare industry clients where HIPAA compliance is an issue. Google Apps does offer HIPAA compliance when dealing with PHI data, but only through their paid accounts. If you're under one of the grandfathered free accounts, you're out of luck.

8. Virtual Conference Calls: Uberconference

*/ /*-->*/

[embedded content]

​Love it or hate it, conference calls are still a thing. Even if you're a disciple of the Rework mentality of avoiding them, if you want to do business, you'll run into a need for conference calls. For quite some time, I tried to make sure Daymuse would outright avoid them or relegate them to a more leisurely Skype call. Too often, it became more trouble than it was worth: no Skype accounts on the other end of the conversation or the need to call in via a landline. We went hunting for a virtualized conference call solution and found just what we needed about a year ago: Uberconference.

They offer a free pricing tier that I suspect will work for most small business. The service offers digital connection (mic and headphones over the web), call in via a provided number, and screensharing. They also have lots of other nice features such as: SMS reminders, call recording, and mobile apps. Of the several conference call services I've tried, Uberconference is easily the winner for small business like us. They also have hilarious hold music.

9. Web and Application Uptime Monitoring: ​Pingdom

​Do you need to monitor a client's web project uptime to meet an SLA? Want to be notified if a website you support or work with becomes unavailable? Perhaps you just want to know what average uptime on a particular domain is. Pingdom offers this type of domain monitoring service.

Pingdom can go much further than simple up/down monitoring:

  • Are certain pages performing poorly?
  • Do certain interactions (login, then select a nav item, then create a report) running slowly?
  • Is site performance trending towards slower performance?

The service has a lot to offer. At its heart, the easy to configure and free domain uptime monitoring with notifications is hard to beat. It's incredibly useful for just about any freelance web developer or Drupal consultant.

10. Newsletter and Mailing Lists: ​Mailchimp

​Email marketing and the classic newsletter concept has seen a resurgence in recent years. While social media and mobile web initially seemed like a death knell for traditional email, its actually been propping up one of the Internet's original use cases. Email is now available for us on our smartphones, complete with instant notifications, 24/7. All your apps, services, and contacts have a central, default location to reach you: your email.

For that reason, most web properties will want to have some sort of email outreach for users or customers. We've been recommending Mailchimp now for years to clients to solve the problem of handling automated email generation, sending, and subscription handling for large subscriber sets. Mailchimp's free account level is plenty functional for most small business and is the service we use internally for newsletters. While there is a place for custom-designed email templates, Mailchimp offers cross-platform compatible designs which help avoid the incredibly painful process of designing cross-platform emails. Mailchimp is also well-supported in Drupal or Wordpress.

Building a Web Developer Toolkit Series

Web Services serve as another key tool on a Drupal web developer's toolkit. They can help cut out some of those extra hats you've been wearing and balls you've been trying to juggle. Not only can they reduce this effort on non-core competency work (i.e. your web development work), but they can even create a boost in productivity and revenue. Making it easier for your team to track billable time, manage projects, and get work done means a boost in efficiency: more work, more money. What web service mentioned could help you be more productive?

Looking for more in our series on building a web developer toolkit, perfect for freelance Drupal developers, consultants, and agencies?

Did you like this post and want to see more on building your toolkit? Share it!

Oct 01 2015
Oct 01

Somehow we're nearly at the end of September. School is back in session and the summer "break" has ended. Daymuse's hometown of Richmond hosted more than a half million bike race spectators. Drupal's major event, Drupalcon, was a smashing success in Barcelona. Now we're looking forward to New Orleans next year. 

You may have noticed a long stretch since our last post on the Daymuse blog. Summer sent me gallivanting across Europe, turning the tables on my grandparents whom were my guides when I was younger. The rest of Daymuse had to pickup the slack and so we haven't written anything new around here recently. Traveling with limited hardware also let me put a lot of these tools to the test. If you're just getting back into the swing of things too, what better way to stretch your Drupal muscles with the latest and greatest tools for your work?

It doesn't matter if you're still in Drupal training or you're a Drupal expert: there's always new tools that can make your Drupal work faster, better, or cheaper. There's a lot of ground to cover here as this article originally surpassed 5,000 words rather quickly. Instead of a single monster post on Drupal tools, I'm going to break this up into a tutorial series of five posts over the coming days covering different subtopics:

  1. Drupal-specific Modules and Tools for Developers (that's this one!)
  2. Web Services for Drupal Developers and Consultants
  3. Workflow Web Apps for Drupal Developer Quality of Life
  4. Go-to Applications every Drupal Developer Needs
  5. The Cutting Mobile Edge: Do Drupal Development from Anywhere

Each new post in this Drupal Developer Toolkit tutorial series will highlight different day-to-day tasks a Drupal developer may run into and tools to help solve problems. Let's get right into Drupal-specific Modules and Tools for Developers today. Have your own idea to add? Take to Twitter!

Drupal Development Tools: Expand your Developer Toolkit

With the standout exception of Drush, the "tools" mentioned below are really Drupal modules. The reason I'm defining them as useful day-to-day tools is that they don't actually do anything on their own. They add no particular functionality to a Drupal implementation themselves. Instead they give you, the developer, a bit more of an overview and more reporting options. They're better thought of as extensions of the "Status Report" page. These are excellent tools to add to your Drupal developer toolkit.

Security Review Module

​Before we launch any new Drupal site, we run through this module's checklist. It will verify each condition is met and provide suggestions on how to solve unmet conditions. The module runs a gamut of tests, from file permission checks to .htaccess verifications.

It's important to consider that merely passing "all green" on this checklist doesn't mean the site is 100% safe. Instead, think of it as an excellent starting point. Once you've gone through the process on a few sites, you'll get into the habit of taking care of unmet conditions before you even run the test. That's a great habit to build.

SEO Checklist Module

Just like Security Review above, this module serves as a task list for making sure our work meets the basic needs of search engines and their understanding. Incidentally, strong search engine understanding correlates with accessibility on the web. Even if you don't care too much about search engine optimization (SEO) or page rankings, you should care about your user's ability to read and understand your website. This module doesn't have anything to do with page-level ranking improvement: it will not help you build backlinks, test keyword strength, or write well. That's still up to you and your content contributors.

Within the realm of Drupal, there's nothing that really compares to Wordpress' infamous Yoast SEO plugin which does focus on content-level optimization. Drupal does have a cobbling of modules (that are severely outdated and bloated) which attempt to replicate Yoast's functionality but fail. I see room for a module developer to carve out quite the user base for a new module! Update: A reader wrote in to let us know they just posted a comparison article of the SEO compliance suite of modules mentioned here with the new—drumroll—Drupal Yoast SEO module just released to beta! That's very exciting for the content side of Drupal; we'll be doing our own testing with this SEO toolkit soon! 

Hacked! Module

You didn't modify Core, right? That's the cardinal rule. I'm going to assume you didn't modify Core.

Drupal Meme: Never Hack Core or Cat Dies

But, if you did, or you're afraid someone else with code access did, Hacked! can tell you. What you're more likely to run into is a modification to a module or theme. Often this is a module patch you applied in the past and then forgot about. That can be a real pain in the butt for a Drupal developer: which module was patched by whom to do what? Hopefully, you're tracking your patch files in your version control system. Running a test with this tool will identify which contributed modules have been modified and even diff the changes for you.

Hacked! helps you avoid upgrading a module and overwriting module changes via patches or modifications to cure a problem or solve an edge case issue. It's also an incredibly useful tool if you're new to a project or a client and want to verify the integrity of the Drupal codebase.

Drush command-line Utility for Drupal

This is the do-everything swiss-army knife command-line utility of Drupal. I hesitated even including it here because it should be a given, but just in case: Drush, you need it. At the simplest level, Drush just gives you the ability to do nearly everything you can do in the Drupal GUI via the command-line. That may not sound like a big deal, and though it's a huge time saver simply by being command-line driven once it's in your workflow, the real power of Drush comes from bulk processing tasks. Want to run a database update across several sites at once? You can do that in one command and Drush will keep plodding along while you do something else. Want to sync the /files directory across multiple environments (dev, stage, prod)? One line.

Drush is the power user shell for Drupal workers. If you're not using Drush already, and you do something that even resembles Drupal development work, this tool carries the single biggest impact on this list for your life.

Honorable Mentions: A Better Drupal Administration Experience and Broken Link Checker

Drupal 7's administration experience out of the box has grown long in the tooth. That's alright because Drupal's community has created an incredibly powerful set of modules that combine to create a responsive, intuitive, and user friendly administration experience. I wanted to give an "honorable mention" to our post detailing how to put together such an experience.

You should keep an eye out for broken links within your Drupal site. Rather than make this a manual process (or having to watch logs for 404 errors), the community offers an excellent module, Link checker, which will create a report of broken links in your content. This makes the process more proactive and automated. We wrote up a tutorial detailing a complete strategy of how to avoid broken links, too.

In the next post for this series, we'll be tackling web services. These are especially important for small Drupal firms, consultants, or freelancers as they help makeup for low headcount and lack of business expertise. Summer has set and we're off to another exciting season of Drupal and web development on the Daymuse blog. Stay tuned.

Did you like this post and want to see more on Drupal tools? Share it!

Jul 09 2015
Jul 09

Drupal 7's administration interface and theme leaves much to be desired. The Seven administration theme, part of Drupal Core, has shown its age since Drupal 7's introduction years ago. Mobile devices have taken a large chunk of web traffic: webmasters want to be able to administer their Drupal sites from smaller screened devices like Tablets and Smartphones. You need a modern Drupal admin theme.

I have something to tell you.

I'm writing this very post from an iPad. Not only do our clients often want to have the ability for users to browse the anonymous, public portion of the website from mobile devices, but often they need to be able to add or edit content from one as well. The Daymuse website itself is in fact one such needy customer.

Drupal administration from any device

One of the greatest features of modern CMS is the ability to administer the system over the web from any location (which also happens to be its greatest security concern). Whether you're a traveling online entrepreneur, or just a hands-on executive who needs to be able to make minor content edits from a meeting on your phone, it's possible to setup Drupal 7 to work with your mobile device administration needs.

The combination of Drupal admin theme tools we use to provide mobile administration also happens to make the user interface far more approachable. It modernizes the design style, simplifies several common workflow processes, and generally stays out of the way of the real work: adding and editing content. This package of modules, theme, and libraries we use is nearly consistent across the sites we manage (Drupal 6 is still clinging on in some places).

Forward thinking administration for Drupal 8

We've curated this combination of systems with an eye for the Drupal 8 administration experience. That means, where possible, we attempt to utilize tools which are backports or offer similar experiences to the administration system within Drupal 8. In this way, the teams we work with, will be more prepared and familiar with Drupal 8 once the inevitable migrations occur from Drupal 7.

Let's get down to the meat of it and start with the core part of this elegant administration solution: the Drupal admin theme.

Ember: mobile friendly Drupal admin theme

Drupal admin theme - Ember

Ember is part of the Spark distribution, a Drupal distro specifically built in attempt to bring Drupal 8 features to the Drupal admin theme in 7. Unfortunately, the distribution as a whole, hasn't been updated much since its initial creation years ago. A few of the modules and tools within it, however, have blossomed on their own. Ember is one such piece.

The Ember Drupal admin theme replaces the Seven Drupal admin theme as the style and design presented to site administrators. It's been built from the ground up with responsive design. Ember has maintained its focus on being an excellent, mobile administration theme with similarities to the Drupal 8 administration theme. With each update, Ember continues to blaze the trail for a mobile friendly, quality user experience and Drupal admin theme.

Mobile Drupal Administration with Ember Theme

Ember Support: contributed module interface tweaks

If you've spent time using Drupal contributed modules, you'll have undoubtedly noticed that several modules diverge drastically from the style of the core admin theme, Seven, for their administration. Most module developers will test their module-specific administration experience against Seven. However, with Ember's incorporation of responsive design and a vast array of style changes, this can break edge case module administration experiences.

Rather than constantly add one-off module-specific tweaks and fixes to the Ember theme, a separate module has been created. Ember Support solves a variety of module-specific style issues. We recommend adding it to any Drupal site utilizing the Ember administration theme to ward off the more common module-specific issues, especially sites using the Panels module.

Mobile-friendly admin navigation with Navbar for Drupal 7

As much as we're fans of Ember for its mobile-friendly approach to Drupal administration, this doesn't solve a primary mobile device issue in the admin: navigation.

Here's one of the first sets of commands I would run on nearly every fresh Drupal 7 sites only a few years ago:

drush dis toolbar && drush en admin_menu -y

The very basic Drupal core Toolbar module had to go. It lacked any power features. At the time, Administration Menu (admin_menu) was nearly a given on any Drupal site we'd run across and any we developed.

Administration Menu module began to show its age, though. 

Server hardware has become less and less expensive, meaning we have a little less concern for just how many modules are integrated with a particular implementation. We use all sorts of technically unnecessary contributed modules, but which make life easier for developers, editors, or administrators. Menu items within the administration navigation proliferated. Administration Menu's tiling dropdown menus became less and less useful, sometimes extending beyond the height of the screen, making it impossible to reach the absolute positioned bottom items.

As mobile devices continued to gain a larger share of web browsing, they also become more than just consumptive devices. More and more, folks on iPads and other Tablets wanted to manage their sites. Smartphone users wanted to be able to make quick edits. They wanted to be productive. Administration Menu face planted when used on a small screen device. It was mobile-unfriendly.

Drupal's Module page is hard to use

The use case where Administration Menu shined before, also began to become a problem spot. Desktop screen sizes, more specifically, resolutions have continued to increase. Where a 1024x768 resolution monitor was common even only a few years ago, 1080p ("HD") is commonplace now. Pricing for even higher resolution monitors has come down drastically. All this means that the small fonts and spacing used in Administration Menu to help alleviate the screen real estate restrictions of an era of 1024x768 yield tiny fonts and difficult click targets on our Retina-era screens. 

Enabling the optional Administration Menu Toolbar Style module brought the menu back to the design style of the Drupal core Toolbar module. This brought back quick access to Shortcuts. It did help with larger fonts and click targets, but then didn’t mesh well with the tiling dropdowns. Even with this style, fonts and click targets which are static pixel sizes, continue to become a problem as screen resolutions increase.

Advantages of Drupal's mobile-friendly Navbar menu module

It was time to replace the aging Administration Menu module with a modern, mobile-friendly navigation system. The Navbar module, sprung to life from the Spark distribution initiative, brings a highly responsive, customizable navigation system to Drupal 7. 

The look and feel of Navbar is a direct backport of the Drupal 8 navigation system. Moving from Drupal 7 to Drupal 8 will be easier if site users are already familiar with Drupal 8’s navigation via Navbar in Drupal 7.

Navbar Requirements

The Navbar module has multiple JavaScript library dependencies. The Libraries module makes it easier to manage JavaScript libraries within Drupal for contributed modules. Libraries is also a dependency.

  • Libraries module (version >= 2.0)
  • Backbone JavaScript library (version >= 1.0)
  • Underscore JavaScript library (version >= 1.5)
  • Modernizr custom build (version >= 2.6.2)

Simplified workflow and process recognition with Navbar’s design

One of the first things you’ll notice about Navbar is its visual design. The iconography used is an attempt to create quick visual recognition of what each link represents for your site users. While you, as a frequent Drupal site builder, may have the Structure navigation system and location memorized, having a massive list of links with odd textual names is one of the turn-offs that new Drupal users experience. Users have two options for displaying Navbar’s sub-navigation elements.

1. Horizontal Navigation: They can be to display as a horizontal, left-right link list.

Drupal Navbar admin menu: horizontal menu

2. Vertical Navigation: They can also be displayed as a more traditional, left-aligned, top-bottom, list of links. In this configuration, further navigational children can be expanded with a click.

Drupal Navbar admin menu: vertical menu

This conscious choice of viewing navigational items is a consistent theme throughout Navbar. Administration Menu could produce scary looking, tiling, massive, dropdown navigational items as you scan the nav and children populate with hovers. Navbar requires a conscious decision to expand the menu tree.

This is where visual design can make a system more approachable. Larger fonts make each navigation item more readable. Spacing around the navigation items help make them more clickable (or tappable).

An aside for diehard Administration Menu users

If Administration Menu will be pried from your cold, dead hands but you want to have some sort of mobile-friendly experience, it's possible to combine the two. The Admin Menu Navbar project exists to provide the Administration Menu module for large screens and Navbar for small screens. Check it out to combine the best of both worlds.

Administration Menu's search plugin can help make exploring the menu system a bit easier. Be sure to enable it in the module's configuration to give yourself access to a quick menu search tool.

Workflow with Drupal Shortcuts

One of the features of the core Toolbar module I missed when converting to Administration Menu, is the visual focus on Shortcuts. While it’s certainly possible to use Shortcuts with Administration Menu, they’re second-class citizens within the navigation hierarchy. Toolbar gave Shortcuts a space to live in on the right side of the navigation. It’s not the most intuitive location for something that, by their very purpose, should be used frequently, but at least it highlights them. Administration Menu doesn’t even make them available by default. Shortcuts don’t get much love, and I think that’s because their accessibility and focus made them slower or difficult to use with incredibly popular Administration Menu.

Enter Navbar.

Drupal Navbar focus on Shortcuts menu

Navbar takes the treatment of Shortcuts and moves them up to first-class citizens within the navigation hierarchy. They’re front and [left aligned]. Shortcut’s iconography in Navbar instantly draws attention for non-technical content contributors; typical Internet users. That star icon calls to them:

What’s in this drawer? Is it an aptly named set of useful tools for me?

Ember works in concert with Navbar and Shortcuts. Administration pages and edit pages provide for a quick one-click button to add the page to the shortcuts listing. Just click the Star icon on the right to add the page to your shortcuts.

Drupal Ember theme quick add Shortcuts

Customize the Drupal administration experience for your clients and users. Put those bookmark-style frequently used links into the Shortcuts system. Will your editors need to constantly access the menu system, block system, or a specific node for their workflow? Perhaps they’ll frequently need to review a draft content queue. Add a Shortcut! This is where you can add value to the folks using the system you build: make their life easier. It’s a simple, yet often overlooked step.

Extras: manage modules, fields, and menus simply

While Ember and Navbar make up the backbone of a modern, mobile-friendly, Drupal 7 administration experience, there are a few extras we always include.

Disable the Drupal core Overlay module

You either love or hate Overlay.

drush dis overlay

This is one of the first commands I run on a new Drupal install, so I think you know where I stand. Sure, the idea that I can edit the site configuration from my current content page, may sound nice. I make my edits, I return to the content page I was on.

In practice, this doesn’t really work as planned. As I’m navigating through the configuration pages, making changes, clearing caches, submitting forms, the DOM ends having to be fully reloaded. That means that the configuration page reloads but also the content page under the overlay. You end up causing two page reloads, slowing down your work and adding some extra work to the server.

I don’t know about you, but I end up working in multiple browser tabs, anyway. This eliminates the use case for Overlay anyway. I end up refreshing the content page I started from (where I probably ran across an issue) in a separate tab, this way I can control when the refresh occurs and I can make a proper comparison.

In addition, Overlay, which is an AJAX-dependent (JavaScript) process, is known to cause issues with a variety of contributed modules that are JavaScript-heavy.

Disable Overlay.

Make browsing Drupal Modules easier with Module Filter

More serious Drupal developers rarely find themselves on the Modules page as they’re doing any module-related work with Drush in the command line. However, not everyone is a serious Drupal developer.

System Administrators and general Web Developers are often the folks who maintain Drupal systems. As much as we, as Drupal Developers, will push for the use of Drush, that Module list page will be used often.

The Modules page has a terrible user experience.

Drupal's Module page is hard to use

It’s information overload. There’s summary data (version, description, requirements) for every Drupal module available to the implementation. Larger implementations will have hundreds of these. Have you found yourself hitting CTRL+F (or, ⌘+F) to text search the page for the module name you’re looking for? Make your life easier. Help your colleagues.

Install Module Filter, a Drupal module.

What are the benefits of Module Filter?

  • JavaScript-powered instant text search
  • Filtering: show/hide Modules that are enabled, disabled, required, and more
  • Show recently added Modules
  • A more approachable, scan friendly list of basic Module information

Drupal's Module Filter module user experience

Improve the Drupal Field UI

This tweak is really for site builders as I suspect your site editors aren’t often going to be mucking with the Field UI.

I always found it irritating that Fields had an edit page and also a field settings page. Why not merge these two things? That’s exactly what Backports module does, a change backported from Drupal 8. It removes an extra step for you as you’re creating and editing your Content Type’s Fields.

Goodbye, Field Settings.

Simplify Drupal's Field UI with Backports Module from Drupal 8

Simplify Drupal Menu Administration

The Menu UI, just like the Field UI, seems to have a totally unnecessary extra step. When selecting edit menu why in the world can’t you edit the menu links? Really, how often are you changing the Menu name (which is what edit menu provides by default)?

The Simplified Menu Administration module merges the edit menu and list links options together. The merged edit menu page provides for naming as well as link resorting and modification.

Drupal 7 Edit Menu, Links with Simplified Menu Admin

The space that used to contain list links now provides a direct add link option for the specific menu.

Drupal 7 Quick Add Link with Simplified Menu Admin

If the site you’re building or editing has a large menu system, simplifying the Menu UI workflow can cut significant effort and frustration off your workflow. Combine this with a solid internal link strategy and you'll be in a good place managing your link strategy.

Modernize Drupal 7’s Administration System

Combining all these tools together, we create a modern Drupal admin theme experience. This system of theme, modules, and libraries will improve site user workflow, expand device support, and generally make the system more approachable to site users.

Let’s bring it all together with a series of Drush commands:

drush dis overlay toolbar -y; drush vset admin_theme ember; drush en ember_support navbar backports module_filter simplified_menu_admin -y

With a quick copy+paste and enter, you’re on the way to creating value for the folks that pay the bills in the projects you build: the managers, contributors, and editors. As the man behind the Macintosh interface said:

As far as the customer is concerned, the interface is the product.
-Jef Raskin

Save them time, give them a better experience. Bring them a step closer to their inevitable Drupal 8 migrations, reduce that future heartache. Give them the ability to use the systems you build from more devices, simply.

Did you like this article or know a team in need of help with their Drupal administration workflow? Share it! Want to take Drupal administration and workflow to the next level? Hire our Drupal team for a completely customized experience!

Jun 09 2015
Jun 09

Last week's tutorial on Drupal Facebook comments integration lead our blog to traffic records and a mention on TheWeeklyDrop among other places. There's a lot of demand from Drupal website owners and managers to integrate Facebook with their website platform. Today, we're going to work through another of the most requested Facebook integration needs: login and connect.

One of the experiences that most irritate users of your website is having to create yet another account just to access your website or key functionality of it. The user now has to keep track of another username or email and password combination. If you require a unique login to your website, you're going to discourage some users from using your website.

Make it easy for your Drupal users: login with Facebook

A common solution to this poor experience in recent years is to suggest the user logs in via an account on a third-party website. Commonly, this is a social media account: Twitter, Google+, Facebook, etc. Most internet users have one of these accounts, and, among them, Facebook has the largest user base. Allowing users to login with their Facebook account is often the first third-party login system website owners or managers wish to integrate with their Drupal websites.

The negative side of allowing users to login with a third-party account, such as Facebook, is that their login has now become dependent on a third-party. As unlikely as it is for Facebook to go belly up anytime soon, it is possible. Massive social networks have collapsed quickly in the past (see: MySpace). 

The Drupal Content Management System (CMS) provides multiple methods to authenticate Drupal users with Facebook accounts through contributed modules. Let's work through what I think is the best candidate for setting up a simple Drupal Facebook login: Simple FB Connect module.

Drupal user authentication with Facebook using Simple FB Connect module

To integrate a simple Facebook login and authentication system for Drupal, my choice for this tutorial is the appropriately named Simple FB Connect module. The module operates under the premise that all you want to do with it is allow users to login with their Facebook accounts: nothing more, nothing less. This module has very few configuration options and certainly doesn't integrate as deeply with Facebook and Drupal as some other login-related modules do. There's no way to pull additional account details from Facebook and add their data to custom user fields in Drupal here. 

The Simple FB Connect module simply allows users to click a login link which syncs their Facebook data (after authentication) with a new Drupal user account. Their Facebook email address and profile photo will be added to their Drupal user account. The module works with the Drupal core account settings options of allowing users to create accounts with or without a secondary verification email or acceptance from an administrator account. Disabling a second verification level means that users can login with their Facebook account instantly and have access to your site.

Support for Simple FB Connect and Drupal 8

Updated July 7, 2017

One of the key reasons I'm using the Simple FB Connect module in this tutorial is that it is well supported with recent updates and rising usage statistics. In addition, the module supports Drupal 8 and has a full release available. I'll discuss alternative modules for Facebook authentication later in this tutorial.

The process outlined below is for Drupal 7 but is quite similar regarding the Drupal 8 release of Simple FB Connect. The key difference is in the installation process which is dependent on Composer. Our first Drupal 8 based tutorial revolves around the installation of Simple FB Connect and helps outline the specific details.

Setup Simple FB Connect module for Drupal Facebook login

Let's work through the steps of integrating the Simple FB Connect module with your Drupal website to allow Facebook user account authentication. First, we need to download our module and related dependencies.

  1. Download the Simple FB Connect module from its Drupal project page
    Note: I would suggest using the 7.x-2.x version which is in Beta at the time of writing; the 2.x branch integrates the latest Facebook Connect API
  2. Download and enable the dependencies (required for the 7.x-2.x+ versions of Simple FB Connect): 
    1. X Autoload module from its Drupal project page
    2. Libraries API module from its Drupal project page
    3. Facebook PHP SDK version 4.0.x PHP library from its Github project page
      Note: put the library in a "sites/all/libraries/facebook-php-sdk-v4" folder; I'm using version 4.0.23 in this tutorial

After enabling the module and dependencies, head to the config page (/admin/config/people/simple-fb-connect​) for Simple FB Connect.

Simple FB Connect Module Configuration

Phew, for a module with "Simple" in the title, it sure has a lot of dependencies! Integrating with third-party services is rarely straightforward. It might be time for a drink, there's more to do.

On the configuration page, you'll notice a few blank fields which are required (and I've filled in the above screenshot). You'll need a Facebook App ID and App Secret. You'll want to setup a Facebook Connect URL as well for security purposes. The field should be pre-filled on the configuration page with your site URL. We'll use this later. As the help text suggests, you'll need to create a Facebook App in order to get these pieces of data.

I have to create an entire Facebook App just to setup Drupal login for Facebook users?!

I know, it sounds like a lot of work. Fortunately, it's just a couple of steps. You can create the App with a personal Facebook account or a public Facebook page. Follow the link on the configuration page above to the Facebook app starter.

Create a Facebook App to support your Drupal Facebook login module

Let's run through creating the necessary basic app to allow Drupal website logins with Facebook. It's only a few steps. From the starter page, hit "Create a New App". You'll be prompted to fill out some basic App information. Here's how I filled out the App fields for this tutorial:

Create a Facebook App for a Drupal website

Hit "Create App ID" and you'll be prompted with a security question and/or Facebook verification process. You may need to add a credit card or walk through a mobile phone verification process to prove to Facebook you're a real person. As an additional step, I had the pleasure of proving my humanity by clicking on fireworks photos. I suppose Independence Day is less than a month away in the U.S., but I digress.

The subsequent landing page will show a dashboard which contains your App ID and App Secret (hidden). It will also reveal the API Version of your app which may be useful to be sure your module is compatible with the Facebook App.

Facebook App ID and App Secret for Drupal

Show the App Secret and paste these two data points into your Simple FB Connect configuration page's appropriate fields.

Next, hit "Settings" in the left menu panel of the Facebook App. On the Settings page, add a new Website platform.

Facebook App Connect URL Settings for Drupal Simple FB Connect module tutorial 

After adding the new Website platform, two fields will appear:

  1. Site URL
  2. Mobile Site URL

Fill both of these fields with the URL from the Simple FB Connect module's configuration page's "Connect url" field data as I did in the screenshot. Save your changes.

Configure your Drupal website to accept Facebook logins

Now we have our Facebook login module installed and setup alongside our Facebook app. The last major step to having a working Facebook login system on your Drupal website is to configure your account settings appropriate to your goals. For this tutorial, I just want users to be able to instantly sign in with their Facebook account, creating a Drupal account automatically with their Facebook credentials in the background.

  1. Go to Drupal's Account settings page (/admin/config/people/accounts).
  2. Under Registration and cancelation → "Who can register accounts?", tic the "Visitors" option
  3. Hit "Save configuration" at the bottom of the page

Facebook User Account Settings config for Drupal login

This will allow any anonymous visitor to create an account on your Drupal website without approval from an administrator. The "Require e-mail verification" option will not force Facebook users to also authorize an email, so you can leave this checked to help keep out the auto registration spam bots (hopefully you're doing a few other things to keep the spammers out, too).

You can keep the "administrator approval is required" option active if you wish, but you will have to manually unblock every Facebook user account before they can use your site. This will generally discourage new users from making using of your member section, take this into consideration for your website strategy.

Login to your Drupal website with your Facebook account

Now that all the pieces are in place, test your Facebook login process with your own account credentials. Logout of your administrator account and visit your Drupal login page (/user). You should see a new tab or link to "Register/Login with FB".

 Register or Login with Facebook

Hit the link to begin the Drupal login with Facebook process. If you don't see this link, try clearing your Drupal website's cache. If you still don't, double check you've completed all the above steps correctly. If there's a warning or error message shown, it will offer up some clues as to what you might have missed. If you still can't get it working, feel free to ping us on Twitter or consider hiring the experts to integrate Facebook with your Drupal website.

Be sure you're logged into your own Facebook account in the browser session you're testing with. If all goes well, you should see a pop-up on Facebook requesting authorization to associate your account with the Facebook App you created earlier.

Facebook App authorize Drupal login

Hit "Okay" and you should be redirected back to your Drupal website user page, logged in. The username should be populated with your Facebook name, your email appropriately synced, and your picture shown as your Drupal profile photo.

Facebook data fields on Drupal user profile

While the module is called "Simple FB Connect", there are a lot of steps to setting up the Facebook authentication and login system as a whole. You'll need to not only configure the module and related dependencies, but also a Facebook App and your website's user account settings.

Once done, you'll be able to offer your users a seamless login and account creation service for those that wish to use their Facebook account details to login. This can dramatically improve the user experience as opposed to requiring them to create yet another user profile on yet another website.

Alternative Drupal Facebook login modules

The Simple FB Connect Drupal module is one of the easier, modernized, Drupal and Facebook login integration modules available. There are of course several other choices:

  1. Facebook OAuth (FBOAuth)
  2. Facebook Connect
  3. OAuth Connector
  4. Hybrid Auth Social Login

I wanted to talk about a few of these as they each have interesting differences. Depending on your use case, one may be a much better choices for your implementation—especially if you intend to integrate other social network login systems.

Drupal's Facebook OAuth (FBOAuth) module

This module deserves special attention. In many ways, FBOAuth actually offers a simpler setup process than Simple FB Connect. It has less dependencies (well, none). It'll even work with a few profile related modules so that you can integrate Facebook user data fields further with your own custom user data fields in Drupal.

FBOAuth's setup process is very similar to Simple FB Connect: install the module, setup a Facebook app, copy the Facebook app credentials into the module configuration, and you're nearly off and running. All you really need to do beyond that is setup a location for the actual login button which can be a block or some PHP to print the button in a template file. Here's a screenshot of how I setup FBOAuth on the same website after disabling the Simple FB Connect module and adding the FBOAuth's login block to the content area:

FBOAuth module for Drupal Facebook login authentication

Note the "F Connect" blue button under the "Log in" button. The FBOAuth module is quite easy to setup, especially after already going through the process of creating a Facebook App. It may fit your use case better if you need to integrate a few custom user fields with Facebook data (perhaps importing the Facebook user's "About" details to a custom "Bio" field for Drupal users).

The primary reason I didn't base this tutorial around FBOAuth is that Simple FB Connect, for the purpose of merely offering a Facebook login process in Drupal, seems to be aiming towards future compatibility. FBOAuth doesn't yet have a roadmap for Drupal 8 support. In addition, while it makes the setup process slightly harder, the Simple FB Connect relies upon Facebook's PHP library. Hopefully this means the module team will be able to keep pace with Facebook API changes. This has been evident with their release history and presumably the team will continue to keep up.

Still, the FBOAuth module is backed by a very well known Drupal-focused company and the module has been around for some time. It has additional features and is quick to setup. Don't be afraid to give it a whirl if it fits your use case better. The move to Drupal 8 production sites is still probably years away for the majority of the Drupal web.

Multiple social media accounts with Hybrid Auth Social Login or OAuth Connector modules

If you just want to add a single additional login system (perhaps Twitter), you still might be best off with sticking to Simple FB Connect or FBOAuth plus a related Twitter login module. Beyond that, consider a more multi-purpose tool. If your intention is to integrate other social media platforms as addition login options, it's probably best to utilize a non-Facebook focused module.

I've setup OAuth Connector a few times in recent projects and I can tell you it's a difficult process. It works, and it's flexible to allow logins with several social networks that support OAuth, but it really can be a pain to configure the credentials and integration points for each platform. OAuth Connector is the best choice for a more flexible login integration system or for platforms that aren't supported by other modules.

Use Hybrid Auth Social Login module for multi-login Drupal

Hybrid Auth Social Login module for Drupal - Facebook

For multiple social network login Drupal setups, I tend to implement Hybrid Auth Social Login module. The team behind it have done an amazing job of keeping all the related social network login integration up to date as APIs have changed over the years. We have sites that have been using Hybrid Auth for years without trouble, even as platforms update and deprecate API versions.

If there's interest, I may do a tutorial on Hybrid Auth Social Login module in the future. I think it's a great tool. Ping us on Twitter if you'd like that.

Improving User Experience with Third Party Drupal Logins like Facebook

Remember, the primary reason you're integrating any social media login system is to improve the user experience for your users. Keep this in mind as you're considering how to configure the related user permissions and workflow. If you're attempting to build a community around your Drupal website or app, keep that at the forefront of your decisions. A little more effort maintaining systems and avoiding spam on your end can go a long way to giving users the quick login experience they expect.

Your Drupal Facebook login process should be part of your larger strategy to integrating the social network. Read our tutorial on setting up Facebook commenting integration from last week and keep an eye out for more Drupal Facebook integration tutorials coming.

  1. Drupal Facebook Comments
  2. Drupal Facebook Login
  3. Drupal Facebook Feed
  4. Drupal Facebook Like

If you're interested in thoroughly integrating Facebook with your Drupal website strategy through professional services, reach out. Think this tutorial is useful? Don't forget to share!

Jun 02 2015
Jun 02

There's a confusing array of comment or discussion modules available for Drupal. While the core Comment module is functional for a basic website, it does require further work to prevent spam, apply your design style, and adapt for mobile use. This can be avoided by using one of the many social media based comment modules. These modules allow integration of Drupal comments with an existing social media platform. One of the most popular is, of course, Facebook. It's fairly straightforward to setup Facebook Comments on a Drupal website.

Why use Facebook Comments on a Drupal website?

We like the Disqus module integration for comments on Drupal websites at Daymuse. However, it lacks a key value proposition that Facebook Comments offer and that's sharing. Facebook Comments allow (and set by default) users to share their website comments with their friends.

Unless the commenter alters the default setting, any comment on a website will be shared with the commenter's friends along with a link to the relevant page. Their comment and your website may appear in their friend's News Feed. That's a big boon for increasing your website's reach if you have an active audience.

Drupal Facebook Website Comments Share to News Feed

The downside is of course that if you solely use Facebook Comments as your discussion platform on your website (and it may be awkward to use multiple commenting systems), you'll limit your commenting audience to Facebook members. While most internet users do have Facebook accounts—limiting the downside to this requirement—only a subset will willingly comment using their personal identities on public websites. This is the cost of using Facebook as your Drupal website commenting system.

Drupal Facebook Comments Social Plugin Module

Facebook allows developers to integrate a comment discussion thread on webpages by way of the Comments Plugin. The plugin allows Facebook users to comment on webpages using their Facebook account. In addition, the plugin allows the comment (and webpage which was commented on) to be shared to their friends' News Feed.

Facebook's Comments Plugin also contains moderation tools that can be utilized through the Facebook site. There's some customization of how the Comments Plugin will appear on your webpages, too.

This Comments Plugin can be integrated with Drupal by way of a few different Drupal modules. I've tested these modules over the years and have settled on the Facebook Comments Social Plugin module as my go-to solution for Facebook comments in Drupal. The Facebook Comments Plugin and Facebook's APIs change frequently which means ideally Drupal would have a module available that kept pace with the updates. Unfortunately, the Drupal Facebook-related modules tend to be rarely updated. Still, the Facebook Comments Social Plugin module tics the necessary boxes to get Facebook comments running on your site. It will integrate comments with certain Content Types, allow configuration changes, and adjust the appearance of the comments. It provides a basic Facebook commenting solution.

Facebook Comments Social Plugin module configuration

Let's look at the install and setup process for the Facebook Comments Social Plugin Drupal module.

Download and install the module from the Drupal project page for Facebook Comments Social Plugin. There are no dependency modules. In order to create mobile friendly, responsive design comment threads, I'm using the dev version of the module. If you need responsive comment threads, be sure to use the dev version. The stable/suggested version, as of the time of writing, doesn't yet correctly support responsive design or mobile friendly comment threads.

Here's a one-liner for Drush to grab the stable/suggested version:

drush en facebook_comments -y

The dev version I am using in this tutorial is 7.x-1.0-beta2+6-dev. After installing, head to the config page (/admin/config/content/facebook-comments). 

Reconfigure the settings options to match your use case. Let's review some of the options and what they mean along with some advice for each.

Color Scheme

The color scheme option allows you to align the display of the comments with the general colors of your Drupal theme.

Light Color Scheme

Most folks are going to stick with the Light color scheme. It looks like the comment threads you've most likely seen. It's primarily white based with a light gray box and a dash of Facebook's blue.

Drupal Facebook Comments Light Color Scheme

Dark Color Scheme

The dark color scheme is more rarely used—I've yet to run across it on a production Drupal site. A bit of a tangent, but it's a shame that so many websites focus on white color schemes as it's so harsh on the eyes at night. The module's Dark color scheme is great if you offer an inverse or nighttime mode on your site. You could activate the color scheme through some JavaScript alongside your normal nighttime mode activation process.

Drupal Facebook Comments Dark Color Scheme

View mode

The View mode option allows you to set where or when the Facebook comments will display. Most likely you'll want this set to "Full node". This means that the Facebook comments will only display on a full node page (e.g. /node/23). You can also display the comments on Teaser view modes or both Teasers and Full nodes. Rarely do you want to display comments on something like a listing page that has a several node teasers, but it's an option.

Facebook comment plugin width (nodes)

If you've opted for the dev version of the module, now is the time to setup a fluid width to support your responsive design. Despite the help text suggesting a pixel-based width, enter "100%". You'll also want to tic the checkbox just below the width entry: "Fluid Facebook comment plugin width (nodes)".

If you need the comments box to be a static width, set the total pixel width desired for the comment thread area.

Facebook comment plugin width (block)

Follow the same process as you did for the nodes width above for the blocks. This is only relevant if you intend to show Facebook comments within blocks. Leave the default setting if you're not.

Be sure to set the total comment count to display in the block with the "Amount of comments to display (block)" option directly below, too.

If you intend to have mobile friendly Facebook comments through responsive design, you will have trouble displaying them on individual node pages by way of a block. Instead, use the nodes option above.

Facebook App ID

This step is unnecessary if you just want to get started with integrating Facebook comments in Drupal. Later, you can create a Facebook App and then set the App ID here in order to group moderate comments through Facebook itself. Without doing so, comment moderation within Facebook will be more manual and slower, but it's one less thing to get bogged down with while you're just trying to get started.

Facebook Comment App Moderation

If you really want to create a Facebook App, you can get started with a Facebook website app (www App). You'll just need the App ID after creation.

Facebook comment default Content Types

Presumably you're adding comments to an existing Drupal website with existing Content Types. Tic each Content Type you wish to have Facebook Comments appear with.

Important: in order for Facebook Comments to appear on existing content, be sure to tic the "Enable Facebook comments on existing content for the selected content types" option. This will process some database updates on save to apply the comments on existing content. The box itself will not remain checked when you revisit the config page.

Enable Facebook Comments Display on Nodes or Blocks

Once you've sorted out your config options, hit save.

Navigate to each content type you've enabled Facebook comments on and their Manage Display option. Be sure the Facebook comments field appears visible for the Content Type.

Drupal Facebook Comments Hidden or Visible on Nodes via Content Type

If you're using Facebook comments in blocks, be sure to navigate to the block configuration page. Set the now accessible block display into a region of your theme.

Similarly, if you're using the Context module to administer block display, be sure to add the newly available Facebook Comments block to the applicable Context display.

Facebook Comments Testing

If you've added comments to existing nodes, navigate to a node of a Content Type you've enabled and verify the comment thread is appearing. If they're not, double check your settings.

Sometimes clearing your Drupal site's cache is needed. If you're still having trouble, we do offer Drupal consulting services.

Facebook Comments in Templates (TPL Files) and Theme

You can control Facebook comments on nodes within a node.tpl.php file. Depending on your theme, the process will vary a bit but generally you control the output of the comments so as to manually display them within a particular section of your node.tpl.php template. Facebook comment styling can also be controlled, somewhat, through your CSS.

If you want to control the output of the Facebook Comments section with your node.tpl.php you can use this code:

<?php if (isset($content['facebook_comments'])): ?>
<div class="clearfix facebook-comment-wrapper">
<?php print render($content['facebook_comments']); ?>
</div>
<?php endif; ?>

This PHP code will give you a good baseline to get started with more advanced control of the Facebook Comments integration on nodes through your template. I've added two unnecessary CSS classes to the wrapping element: clearfix and facebook-comment-wrapper. If your theme has a clearfix class (and most modern ones do, we love Omega for responsive design), this will help set your comments in the right position relative to your content and prevent overlapping sections. Feel free to experiment with removing it. You can use the facebook-comment-wrapper class to apply relevant CSS to the container. Both of these classes are technically unnecessary.

This code will first check to see if the Facebook Comments array value is set and then render them if they are. This should be added to your node.tpl.php if you're manually outputting your fields on your nodes with a template file. Otherwise, the Manage Display field option mentioned earlier should handle the output of Facebook Comments on nodes.

Facebook Comments alternative Drupal Modules

There's more than just the Facebook Comments Social Plugin module to integrate Drupal with Facebook Comments. The Facebook Comments Box module provides similar functionality. However, I ran into some integration issues. Unfortunately, both of the two major Facebook Comments modules for Drupal haven't been update in a long while.

Drupal Facebook Integration Tutorial Series

Integrating Facebook comments on your site can offer great value to your users: if they're already logged in to Facebook, they can quickly comment on your articles and pages. If they wish, they can share the comment (and your page) to their friends, which can help share your content and generate traffic. The downside is of course that it requires your readers to have a Facebook account in order to comment.

Remember, commenting is primarily to help build a community and a running discussion on your website. Think about your users and the type of platforms they're likely on before opting to integrate comments. Facebook comments are best integrated on website that cater to a casual, friendly audience where individual personalities can shine through.

This post is the first in a series on integrating Facebook with your Drupal website. We'll also be working through:

  1. Drupal Facebook Comments
  2. Drupal Facebook Login
  3. Drupal Facebook Feed
  4. Drupal Facebook Like

Stay tuned for more!

If you're interested in thoroughly integrating Facebook with your Drupal website strategy through professional services, reach out. Think this tutorial is useful? Don't forget to share!

May 21 2015
May 21

Broken links suck. It's incredibly frustrating to read a great article that links to an external resource that covers a subtopic in detail only to find the link is broken. In that moment I curse whatever developer or webmaster of the external site didn't think that creating a 301 redirect was worth the effort. I end up going to the root domain to hunt for the article by topic, hopefully the link text or URL slug gives enough topic or keyword clues to find it. Sometimes the external resource is gone completely and then I'm off to Archive.org to try to find a cached copy.

You know what's worse than a broken external link for your Drupal site? A broken internal link.

A broken internal link is a slap in the face for user experience. You didn't create a 301 redirect from the old URL to a relevant new URL. You didn't update the link you have control over. Do you care about your reader's experience at all? I want to help you prevent broken internal links in your Drupal sites and show you a process to automate link updates. Don't slap your users, follow this process!

What are internal links

Internal links are simply links which are to URLs on the same domain or website. For example, this is an internal link to our Drupal CMS guides. The link is to a page on the Daymuse.com domain from a page on the Daymuse.com domain. We have full control over both the link href (an anchor attribute which creates a hyperlink, the link destination URL) and linking page. The opposite, external links, are simply links to a different domain. You don't have any control over the link destination.

Why internal links are important in Drupal

Inbound links (external links on other sites to your site) are important to build domain authority for SEO, improving search rankings. Similarly, internal links help create content relationships within your site and give context to content through their link text.

Sidenote: Search engines account for internal link anchor text. Ideally, you don't want anchor text to simply say "click here", "more", or some other non-contextual, non-descriptive anchor text.

How to create internal links in Drupal body text

The primary way you'll create Drupal internal links is through body text on pages. More than likely, your WYSIWYG offers a link button that'll pop-up a dialog to input a link URL. This gives you a few methods to create internal links.

Absolute internal links

If you create a link with a fully qualified URL (the complete http(s)://subdomain.domain.extension/page-name), that's an absolute link. No part of the link is "variable", its destination will forever be the exact URL you've input. If any part of the destination URL were to change in the future, your absolute links will become broken. You'll need to manually update them.

Relative internal links

You can create links that are relative to the linking page. There's a few methods of creating these relative internal links.

If you were to simply add the href of "page-name-2" to a link from a page at this URL:

http(s)://subdomain.domain.extension/topic/page-name

The href would be relative to the current location and so the link will actually go to:

http(s)://subdomain.domain.extension/topic/page-name​-2 

The link destination will retain the depth, and target a sibling page ("page-name-2" within /topic/).

You could also link to a page on the current domain from the top level by using a leading forward slash. If your link href was set to "/page-name-2" in the above example, with a leading forward slash, your destination would become: 

http(s)://subdomain.domain.extension/page-name​-2

The forward slash causes the hierarchy to collapse, leading from the top level domain: "/topic" is dropped.

There's some additional advanced methods of creating internal links in HTML documents, but this should give you an idea of how they work. In essence, they create variables so that your links will work when certain conditions change. If your domain name were to change but your content hierarchy remained the same, your relative links would still have destinations that match your hierarchy and become relative to the new domain name. This gives you more flexibility than absolute internal links, but it's still not the best method.

Canonical internal links

Drupal's internal URL scheme creates canonical locations for content. These are the "non-pretty" URLs. Drupal's node system is reflected in these internal URLs:

http://www.domain.com/node/<nid>

In this scheme, the represents the internal node ID (a unique identifying integer) for a particular piece of content. This works similarly for Drupal's taxonomy and term system:

http://www.domain.com/taxonomy/term/<tid>

The is the term ID, identifying a taxonomy term. Using our example above, this is the canonical URL to our Drupal CMS guides:

http://www.daymuse.com/taxonomy/term/23

The "Drupal CMS guides" term ID is 23. If you inspect or hover the actual link above, you'll see that the URL is pretty, human readable:

http://www.daymuse.com/guide/drupal

We've setup Drupal to have an alias for "/guide/drupal" to display our "Drupal CMS guides" term. Drupal creates these pretty aliases by default ("clean URLs"). 

However, this is the literal HTML code that Drupal stores for that body text internal link:

<a href="https://www.daymuse.com/taxonomy/term/23">Drupal CMS guides</a>

This is a relative internal link to a canonical URL. Our WYSIWYG is configured to translate these internal canonical URLs to their pretty aliases on the fly. This takes care of multiple issues:

  1. If we were to decide to change our domain or store this blog post on a subdomain, the relative link would automatically reflect the domain change
  2. If we were to alter the alias from "/guide/drupal" for this particular term to "/guides/cms/drupal", the canonical URL would point to the appropriate pretty URL

This works the same way for nodes: if we link to their canonical URL and their alias is updated, Drupal will automatically translate the canonical URL to the new pretty URL on the fly. Tracking down the canonical URL manually for each internal link can be a pain, though. We're getting to automating the internal link creation process, but first let's make sure we understand why it's important.

Why creating Drupal canonical internal links is important

As your Drupal website develops, you'll undoubtedly create more content: more nodes, more terms. You'll also come up with new URL strategies and ways to classify your content through the pieces of your URLs. Perhaps you'll decide to add a portion of the date within the URL, maybe a category the content resides in, or you just want to manually alter a piece of content's URL to make it shorter or better reflect the contents. This will happen over time. When it does, you don't want to either have to go back and update all your internal links to reflect the change, or even worse, cause broken links and leave them broken. Broken internal links will degrade your search engine performance two ways:

  1. You'll lose the internal link anchor text context and relationship between pages
  2. Search engines will devalue your content due to having broken links

Don't cause broken internal links. You have full control over fixing them and implementing a strategy to avoid them in Drupal. Let's automate the process.

Drupal Internal Link modules

What we want to do to automate internal link updates is simply make sure that all of our internal link destinations (hrefs) are to canonical URLs wherever possible. You can do this by tracking down the internal path and ID of every term or node you want to link to. That requires a lot of extra effort. There's a better way. Thankfully, Drupal's community of contributed modules comes to the rescue.

Drupal WYSIWYG Module and editor plugin (TinyMCE, etc)

If you're using the WYSIWYG module plus one of the editor plugins it supports, your best bet is the LinkIt module. LinkIt provides a button in the WYSIWYG and a dialog to search for content on your site to link to. Once you click the LinkIt button in your WYSIWYG, it's just a matter of following the prompts to create internal links:

Creating Internal Links in Drupal with LinkIt

LinkIt will automatically create your link with the relative canonical URL. You don't have to hunt down the content ID or fuss with the HTML of the anchor.

Drupal CKEditor Module and CKEditor Link Module

All of our Drupal projects now utilize the CKEditor module for a WYSIWYG. This is the direction Drupal 8 has gone and so we try to make sure the eventual progression will be seamless for our Drupal services clients.

The CKEditor module has an extension or submodule that performs similar work to LinkIt, the CKEditor Link module. This allows you to use the lovely CKEditor WYSIWYG to create internal paths quickly. We love it.

After following the module instructions to setup and configure CKEditor Link to work with CKEditor, you'll have a simple process to creating internal, canonical links. This is our internal link workflow using CKEditor and CKEditor Link modules:

CKEditor Link Workflow Internal Path Process How To

  1. Select the anchor text you wish to use in the WYSIWYG
  2. Click the CKEditor Link button
  3. Make sure the "Link type" in the dialog is "Internal path"
  4. Start typing the title of our content in the autocomplete text input, select the right suggestion

This process creates a link to the internal canonical Drupal path to the content.

CKEditor Link creates internal Drupal paths

If you ever change your domain or alter the destination page's alias pattern, this internal link will still work. Combining CKEditor and CKEditor Link modules is our favorite way to handle internal path and link creation within Drupal.

Checking for broken internal links

Now that you have a process to create proper internal links (if you haven't, make changes now), you may need to check for any broken internal links. Drupal offers an excellent module for broken link checking, but first let's look at Google's Webmaster Tools. The free tool offers excellent insight for broken links.

Using Google Webmaster Tools to check for broken internal links

You do have a Google Webmaster Tools account, right? If you don't, sign-up. If you're a manager or webmaster, ask your developer to follow these steps to check for broken links. It's quick, easy, and free. This is a great way to fix search issues, raise your ranking, and properly distribute your internal traffic. Don't slap your users with broken internal links.

After logging into the Google Webmaster Tools (GWT) and selecting your domain, find your broken internal links this way:

Use Google Webmaster Tools to find broken links

  1. Expand the "Crawl" menu
  2. Select "Crawl Errors"
  3. Select the "Not found" tab

This will provide you with a list of URLs with problems. You're interested in those that aren't found (404 errors). The URLs listed tell you which URLs Google has stumbled across and received a 404 error. These are great candidates for creating 301 redirects to the right, or at least relevant, content on your site. What you really want to check for though is where these broken URLs are linked from. Are they your own internal pages? GWT to the rescue again! Click any of the URLs listed:

Find the source of broken internal links with Google Webmaster Tools

The pop-up dialog will indicate the broken URL and where it is linked from. Go to those pages and fix your broken internal links.

Automate broken link checking in Drupal with Link Checker module

If you've got a large Drupal site, manually checking GWT for broken links may not be the most effective way to find them. Drupal's Link Checker module will automate this process for you. Setup the module and it will scan your new and existing content for links, follow them, and identify any problems with them through their HTTP status code. Fix any 403s or 404s! The Drupal Link Checker module works with both internal and external links.

Why are internal broken links bad for your Drupal site?

Search engine spiders or crawlers are very busy workers. There's an entire web worth of pages to crawl and re-crawl. When they run into a broken link, they may stop where they are and move onto the next page. Broken links are a negative signal to search crawlers. Don't give them a reason to devalue your page.

I'm sure you've run into a broken link or two in your life while reading a page on some website. I bet it may have tempted you to stop where you are on the page and try to find a more authoritative, updated page about what you were reading. If the page owner hasn't checked their content over time to verify the links work, what's to say the content is still accurate? Not only do broken links discourage search engines, but they discourage users. It's especially embarrassing where the links are internal because the webmaster has control over both the destination page and the linking page.

Broken internal links can easily be avoided. Create a workflow to utilize canonical, relative internal links. Automate your internal linking process as much as possible by following the steps above. Identify any existing broken links with GWT or Drupal's Link Checker module and setup a process to routinely check for broken internal links. Make sure to create 301 redirects if you update existing content paths to prevent external sites from linking to now nonexistent paths. Don't slap your users with broken links, they're quick to fix!

This post was inspired by reading Mike Gifford's spring cleaning tips for Drupal sites, be sure to show your Drupal site some love with routine maintenance! Did you like this article or know someone that needs some link workflow help? Share it! If you're still having trouble getting your links in order, you can hire our Drupal team!

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web