7 CRM Options Compatible with Drupal

I love Drupal and end up undertaking most of my programming projects with it. I have been using it for so long that I find it far easier to push out projects with Drupal than with anything else, despite it’s infamous learning curve.

Whether you want to call Drupal a CMS (Content Management System), a CMF (Content Management Framework) or a CMSomething, the ‘C’ always stands for Content. Content is where Drupal shines and is what it’s designed for.

When an organisation is at a stage and mindset that they also want to manage their contacts and interactions effectively they will often need tools designed specifically for that function. These are generally referred to as a CRM, which stands for Client Relationship Manager or Constituent Relationship Manager, depending on the sector (For-Profit or Not-for-Profit respectively). CRMs are big business, with many free and paid options available, all with their own advantages and disadvantages.

Often these interactions that people have with your organisation will include things such as registering for an event, making a donation, becoming a member, expressing interest in a product or receiving a newsletter. This all sounds quite simple, but often representing a business rule in the digital realm is very difficult as everyone thinks ‘their way’ is ‘the only way’ and that surely every off-the-shelf system should represent them out of the box.

What has a CRM got to do with Drupal? Nothing directly, but indirectly if you’re looking to streamline your business operations and automate the ways people can interact with you, your CRM will need to work well with your website.

If you are reading this, I will assume your website is likely built in Drupal and, unsurprisingly, Drupal continues its talents of playing well with others into the domain of CRMs.

In this article, we will look at several of the big players in the CRM space that work well with Drupal, how they integrate or how developers can get them to integrate.

Roll it yourself

Whilst I mentioned above that Drupal is aimed at Content, Drupal has always excelled at relationships between content, or in newer parlance, ‘Entity References’. Theoretically you could create content types for contacts (or the User entity) and content types for the interactions they may have with you alongside other modules such as Event and Commerce. Then create a bunch of Views and you effectively have a ‘CRM’. In some simpler cases this may be enough and you have complete control of the processes you want to represent. This could end up consuming a lot of Developer time and using a tool designed specifically for the job may be a better solution.

RedHen

The team at ThinkShout effectively followed the advice above and created a collection of modules that will provide you with a lot of Drupal-Native CRM functionality. It takes the Drupal Commerce approach and instead of providing you functionality our of the box, rather provides you with a toolkit for creating that functionality. This does mean you may still need to undertake a lot of extra work yourself but you are adding no new systems into your technology stack and the problems that can entail. The other downside of RedHen is that it isn’t updated that regularly (in comparison with other options on this list), its release cycle is based more upon when ThinkShout have client requirements or run a code sprint.

If you want to customize RedHen then you can create your own sets of modules and theme overrides, it’s Drupal!

CiviCRM

Often when searching for CRM options for Drupal, people come across CiviCRM and it initially appears as a Drupal module. I have undertaken a lot of work with CiviCRM (and contribute to the project) and the fact that it masquerades as a Drupal module is often a massive point of confusion. It’s best thought of what it actually is, an external service that happens to integrate quite well with Drupal and almost look like it’s a part of it. CiviCRM is a custom PHP application that also integrates with Joomla! and WordPress and is primarily aimed at not-for-profits but can be customized to work with commercial organisations. Out of the box CiviCRM comes with a LOT of features and is thus quite a weighty program, as an open-source project it can sometimes be a bit rough around the edges and inconsistent, but development has increased and matured a lot in the past year.

CiviCRM integrates directly with Drupal in many places, some better than others, and these include:

• A direct (optional) relationship between a Drupal user and a contact record as well as synchronization between Drupal roles and CiviCRM groups and memberships.
• Views for constructing listings of CiviCRM entities.
• Rules and triggers
• Webform for replacing CiviCRM’s inbuilt forms.
• Commerce and Ubercart
• Organic Groups
• Theming (sort of). You can use the Drupal theme to override CiviCRM CSS but CiviCRM does use its own templating engine (currently smarty but likely switching to twig).
• Another option is to set aside the Drupal/CiviCRM modules and utilise CiviCRM in a ‘headless’ approach, utilizing it’s API and REST interfaces.

CiviCRM offers a plethora of its own inbuilt customization options that I won’t go into, which, being PHP, will be reasonably familiar to many of you. You can also utilize direct CiviCRM to Drupal customization through creating your own Drupal module. In the module you can access CiviCRM hooks and API functions which offers an endless level of options to suit a plethora of client needs.

Salesforce

Salesforce is the main player for commercial sales focused companies and is reasonably entrenched in many business workflows. It is a large application with its own long established ecosystem and extension marketplace. It is expensive, proprietary and written in its own programming language, ‘Apex’. Development moves fast and it is a reasonably stable system.

Salesforce is a cloud based CRM, so integration happens via a REST interface. Fortunately as Salesforce is so popular in the types of environments that Drupal is also popular, there are a few prebuilt options. Bear in mind that your license may limit the options available to you:

• The SalesForce Suite is a module with a long history and it starts you on your integration journey. It will handle authentication, mapping Drupal entities to SalesForce fields, pushing and pulling data between Drupal and SalesForce and a legacy module to connect with SalesForce’s older SOAP API.
• There is some basic Webform integration via a module with seemingly stalled development.
• Springboard is a commercial Drupal distribution from Jackson River that bundles Drupal and SalesForce together into an offering specifically for not-for-profits. It’s a little unclear what it offers above just doing integration yourself, but it includes support. There are also a couple of other agencies that offer Drupal / SalesForce integration services.

Theoretically, once you have SalesForce entries represented as Drupal entities you can utilize the plethora of customization options that Drupal offers such as views, rules and module hooks. If you want to enhance SalesForce functionality then it could potentially be accomplished through Drupal and pushed to SalesForce, but chances are you will need to learn SalesForce itself at some point.

Sugar CRM

Sugar is another long established player and comes in community (open source PHP) and commercial editions. It is aimed at commercial sales focused organisations and much like SalesForce, development moves quickly and Sugar CRM also has its own marketplace for extensions.

OSSCube created a Drupal module and accompanying SugarCRM project to allow for some direct integration. I haven’t personally used them and find the documentation somewhat hard to understand. However, it claims to offer:

• Field mapping between Drupal and Sugar entities
• Data syncing between the two systems
• Webform integration to create Sugar entities

Again, you also have the option of utilizing Sugar’s SOAP and REST APIs to create Drupal entities and continue from there. Sugar also offers LDAP, so there is the potential to create a single sign on between the two systems.

Other Options

I have grouped together several other options here. All the CRMs vary wildly, but their integration options are mostly the same so I didn’t want to just repeat those options over and over again. I have attempted to undertake Drupal integration work with some of them in the past and often struggled to accomplish anything. A lot of this is due to the proprietary nature of these systems, finding information on their API and developer options is a challenging endeavor unless you pay some money.

Microsoft Dynamics and BlackBaud

It is worth including Dynamics and Blackbaud as they are big players in the CRM space. Both offer their own options for a CMS (and other systems), so are often reluctant to offer integration options outside of their ecosystem.

Nation Builder and Salsa

These are both CRMs of a sort that are aimed more at the newer wave of engagement focused organisations. They are not just about tracking contributions and interactions, but also encouraging interactions.

Salsa has some integration modules for Drupal 6, so if you’re feeling generous you may want to update them. Otherwise it’s a process of communicating via the Salsa API and fortunately there is a Drupal module under development to get you started.

NationBuilder have gone out of their way to not create any direct CMS integrations, citing that their inbuilt CMS is a far better option instead. However, they do have an API that can be used with the options noted below.

How to integrate with Drupal?

Here are some potential options, but your mileage may vary:

• Utilize the CRM’s API (if it exists in your version / license) to pull entities into Drupal and then proceed in a similar vein to the SalesForce options via Services or a custom module.
• Using the Migrate module and optionally the MSSQL Server PHP extension for any .NET based systems to directly query the CRM database and import into Drupal entities. Again, your license and setup may or may not allow this.
• There is a Sandbox module for Dynamics integration, last time I tried, it didn’t work anymore, but you may feel like updating it.

Conclusion

This is by no means a comprehensive list of CRMs or the possible options to integrate them with Drupal. I have mainly focused on the ones I have experience with and can’t possibly keep up with all the new options that are constantly emerging. I also have far more experience working with not-for-profits, so my solutions are somewhat skewed to that sector. What are some of the systems you have tried to connect with Drupal? Did you succeed? Have you had to overcome any hurdles? Let us know!

Read More

The 5 Most Popular Frontend Frameworks of 2014 Compared

Nowadays there is a deluge of CSS front-end frameworks. But the number of really good ones can be narrowed down to just a few.

In this article we’ll compare what I think are the five best frameworks available today. Each framework has its own strengths and weaknesses, and specific areas of application, allowing you to choose based on the needs of a specific project. For example, if your project is simple, there is no need to use a complex framework. Also, many of the options are modular, allowing you to use only the components you need, or even mix components from different frameworks.

The frameworks that I’m going to explore are presented based on their GitHub popularity, beginning with the most popular, which is, of course, Bootstrap.

(Note: Some of the information below will go out of date in the coming weeks and months – e.g. GitHub stars, version numbers – so be aware of this if you’re reading this article long after the publication date. Also note that the framework sizes are the minified sizes of the necessary CSS and JavaScript files.)

1. Bootstrap

Bootstrap is the undisputed leader among the available frameworks today. Given its huge popularity, which is still growing every day, you can be sure that this wonderful toolkit won’t fail you, or leave you alone on your way to building successful websites.

• Creators: Mark Otto and Jacob Thornton.
• Released: 2011
• Current version: 3.3.1
• Popularity: 75,000+ stars on GitHub
• Description: “Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.”
• Core concepts/principles: RWD and mobile first.
• Framework size: 145 KB
• Preprocessors: Less and Sass
• Responsive: Yes
• Modular: Yes
• Starting templates/layouts: Yes
• Icon set: Glyphicons Halflings set
• Extras/Add-ons: None bundled, but many third-party plug-ins are available.
• Unique components: Jumbotron
• Documentation: Good
• Customization: Basic GUI Customizer. Unfortunately you need to input the color values manually, because there is no color picker available.
• Browser support: Firefox, Chrome, Safari, IE8+ (you need Respond.js for IE8)
• License: MIT

Notes on Bootstrap

The main strength of Bootstrap is its huge popularity. Technically, it’s not necessarily better than the others in the list, but it offers many more resources (articles and tutorials, third-party plug-ins and extensions, theme builders, and so on) than the other four frameworks combined. In short, Bootstrap is everywhere. And this is the main reason people continue to choose it.

(Note: By saying “unique components” I mean that they are unique compared only to the frameworks mentioned in this list.)

2. Foundation by ZURB

Foundation is the second big player in this comparison. With a solid company like ZURB backing it, this framework has a truly strong … well… foundation. After all, Foundation is used on many big websites including Facebook, Mozilla, Ebay, Yahoo!, and National Geographic, to name a few.

• Creators: ZURB
• Released: 2011
• Current version: 5.4.7
• Popularity: 18,000+ stars on GitHub
• Description: “The most advanced responsive front-end framework in the world”
• Core concepts/principles: RWD, mobile first, semantic.
• Framework size: 326 KB
• Preprocessors: Sass
• Responsive: Yes
• Modular: Yes
• Starting templates/layouts: Yes
• Icon set: Foundation Icon Fonts
• Extras/Add-ons: Yes
• Unique components: Icon Bar, Clearing Lightbox, Flex Video, Keystrokes, Joyride, Pricing Tables
• Documentation: Good. Many additional resources are available.
• Customization: No GUI customizer, only manual customization.
• Browser support: Chrome, Firefox, Safari, IE9+; iOS, Android, Windows Phone 7+
• License: MIT

Notes on Foundation

Foundation is a truly professional framework with business support, training, and consulting offered. It also provides many resources to help you learn and use the framework faster and easier.

3. Semantic UI

Semantic UI is an ongoing effort to make building websites much more semantic. It utilizes natural language principles, thus making the code much more readable and understandable.

• Creator: Jack Lukic
• Released: 2013
• Current version: 1.2.0
• Popularity: 12,900+ stars on GitHub
• Description: “A UI component framework based around useful principles from natural language.”
• Core concepts/principles: Semantic, tag ambivalence, responsive.
• Framework size: 552 KB
• Preprocessors: Less
• Responsive: Yes
• Modular: Yes
• Starting templates/layouts: No
• Icon set: Font Awesome
• Extras/Add-ons: No
• Unique components: Divider, Flag, Rail, Reveal, Step, Advertisement, Card, Feed, Item, Statistic, Dimmer, Rating, Shape.
• Documentation: Very good. Semantic offers a very well organized documentation, plus a separate website that offers guides for getting started, customizing and creating themes.
• Customization: No GUI customizer, only manual customization.
• Browser support: Firefox, Chrome, Safari, IE10+ (IE9 with browser prefix only), Android 4, Blackberry 10
• License: MIT

Notes on Semantic UI

Semantic is the most innovative and full-featured framework among those discussed here. The overall structure of the framework and the naming conventions, in terms of clear logic and semantics of its classes also surpasses the others.

4. Pure by Yahoo!

Pure is a lightweight, modular framework – written in pure CSS – that includes components that can be used together or separately depending on your needs.

• Creator: Yahoo
• Released: 2013
• Current version: 0.5.0
• Popularity: 9,900+ stars on GitHub
• Description: “A set of small, responsive CSS modules that you can use in every web project.”
• Core concepts/principles: SMACSS, minimalism.
• Framework size: 18 KB
• Preprocessors: None
• Responsive: Yes
• Modular: Yes
• Starting templates/layouts: Yes
• Icon set: None. You can use Font Awesome instead.
• Extras/Add-ons: None
• Unique components: None
• Documentation: Good
• Customization: Basic GUI Skin Builder
• Browser support: Latest versions of Firefox, Chrome, Safari; IE7+; iOS 6.x, 7.x; Android 4.x
• License: Yahoo! Inc. BSD

Notes on Pure

Pure offers only bare-bones styles for a clean start to your project. It’s ideal for people who don’t need a full-featured framework but only specific components to include in their work.

5. UIkit by YOOtheme

UIkit is a concise collection of easy to use and easy to customize components. Although it’s not as popular as its competitors, it offers the same functionality and quality.

• Creator: YOOtheme
• Released: 2013
• Current version: 2.13.1
• Popularity: 3,800+ stars on GitHub
• Description: “A lightweight and modular front-end framework for developing fast and powerful web interfaces.”
• Core concepts/principles: RWD, mobile first
• Framework size: 118 KB
• Preprocessors: Less, Sass
• Responsive: Yes
• Modular: Yes
• Starting templates/layouts: Yes
• Icon set: Font Awesome
• Extras/Add-ons: Yes
• Unique components: Article, Flex, Cover, HTML Editor
• Documentation: Good
• Customization: Advanced GUI Customizer
• Browser support: Chrome, Firefox, Safari, IE9+
• License: MIT

Notes on UIkit

UIkit is successfully used in many WordPress themes. It offers a flexible and powerful customization mechanism, either manually or via its GUI customizer.

What’s the Right Framework for You?

In the end, let me give you some guidelines for choosing the right framework. Here are some of the more important things to watch out for:

• Does the framework have enough popularity? Bigger popularity means more people involved in the project, and thus, more tutorials and articles from the community, more real-world examples/websites, more third-party extensions, and better integration with relative web development products. Great popularity also means that the framework is more future-proof – a framework with a bigger community around it is much less likely to be abandoned.
• Is the framework under active development? A good framework needs to level up constantly with the latest web technologies, especially with regards to mobile.
• Has the framework reached maturity? If a particular framework is not yet used and tested in real-world projects, then you can freely play with it, but to rely on it for your professional projects would likely be unwise.
• Does the framework offer good documentation? Good documentation is always desirable in order to facilitate the learning process.
• What is the framework’s level of specificity? The main point here is that a more generic framework is far easier to work with, in comparison to a framework with high-level specificity. In most cases it’s better to choose a framework with minimal styles applied because it’s much easier to customize. Adding new CSS rules is a far more convenient and efficient process compared to overwriting or overriding existing ones. Plus, if you add new rules on top of the existing ones, you’ll end up with unused rules, which will increase unnecessarily the size of the CSS.

Finally, in case you’re still unsure, you can adopt a mix-and-match approach. If a particular framework doesn’t satisfy your needs, you can mix components from two or more projects. For example, you can get smaller CSS base styling from one framework, a preferred grid system from another, and more complex components from a third. Viva modularity! :)

What are your thoughts? Do any of these frameworks have any strengths and weaknesses that weren’t mentioned here? Do you think there are others that should have been listed? Let us know in the discussion below.

Read More

What’s New in Chrome 39

Despite being six years old, Chrome is rapidly approaching middle age in version numbers. Chrome 39 has been released and you probably have it installed. There are several good new features … plus one or two slightly suspect additions.

ECMAScript 6 Generators

Generators are special functions declared with function* which create iterators. An iterator is an object with a next() method which is called to return a value. The generator function uses a yield statement to provide the next value in the sequence.

function* HelloGen() {
    yield 100;
    yield 400;
}

var gen = HelloGen();

console.log(gen.next()); // {value: 100, done: false}
console.log(gen.next()); // {value: 400, done: false}
console.log(gen.next()); // {value: undefined, done: true}

ECMAScript 6 Generators are supported in Chrome, Opera and Firefox 31+.

The Beacon API

The new Beacon API lets you send data to a server without having to wait for a response. Requests are queued and sent by the browser as soon as possible but — importantly — it doesn’t delay unloading of the current page or loading of the next.

navigator.sendBeacon() is passed a URL and data — perhaps a string or FormData value. Typically, it could be used when transmitting statistical information, e.g.

navigator.sendBeacon('/log', 'page-unloaded');

The method returns true if the browser successfully queues the beacon request. I’m not sure what you could do if false was returned but beacons should not be used for essential functionality or messaging.

The Beacon API is supported in Chrome, Opera and Firefox 31+.

Web Animation Controls

Web Animations were introduced in Chrome 36. The idea is to permit simple CSS3-like keyframe and animation declarations from JavaScript, e.g.

var myanimation = myelement.animate([
    { color: "#f00" },
    { left: "20em" },
    { transform: "rotate(180deg)" }
], {
    duration: 1000,
    iterations: 1,
    delay: 0
});

The advantage is you can then control and synchronize playback according to user input or other conditions. Chrome 39 adds playback methods such as play(), pause(), reverse(), finish() (puts the animation into its final state) and cancel() (clears all effects).

Think of Web Animation as a compromise between simple CSS3 animations and complex JavaScript full-frame control using requestAnimationFrame and your own timing functions. It’s possibly overkill for general web page effects but not powerful enough for games. Apps and presentations may be good use cases?

Chrome and Opera are currently the only browsers to support Web Animation. There’s support in Firefox nightlies and a polyfill is available but the technology won’t be stable for some time yet.

Web Application Manifest

Not to be confused with the Application Cache Manifest, the Web Application Manifest is a JSON file where you can place meta data such as the name, start address, icons, display mode, orientation etc.

You’ll require a link in your HTML head:

<link rel="manifest" href="manifest.json">

and the manifest file itself, e.g.

{
    "name": "My Application",
    "icons": [{
        "src": "icon/lowres",
        "sizes": "64x64"
      }, {
        "src": "icon/small",
        "sizes": "64x64"
      }, {
        "src": "icon/hd_hi",
        "sizes": "128x128",
        "density": 2
      }],
    "start_url": "/index.html",
    "display": "fullscreen",
    "orientation": "landscape"
}

This eventually means we can remove the 57 iOS icon size alternatives from the top of every page …presuming Apple decide to implement the technology in Safari!

Cross-browser support is patchy. Firefox uses the manifest for its Marketplace, but there appear to be some differences in property names.

Windows 7 Immersive Mode

Switching to Immersive Mode on Windows 7 makes Chrome act a little like a Windows 8 full-screen Metro application. Bizarrely, it then places a Chrome OS-like semi-transparent taskbar above the Windows taskbar — with it’s own start button and clock.

Why? If Windows 7 users want a Windows 8 experience they can upgrade. However, there’s a reason many Windows 7 choose to stick with that OS: they don’t want Windows 8!

I’m also confused by Google’s insistence on sneaking Chrome OS widgets into other operating systems. A Chrome App icon here and there is fine — but replicating native features is pointless. Perhaps they’re hoping to entice people to Chrome OS but annoying them won’t help.

Miscellaneous Updates

A few more minor features…

• You can now install free Chrome Apps from the Play Store without being signed in.
• scrollTop and scrollLeft now return fractions of a pixel on high-DPI/Retina screens. If you thought pixel-perfection was bad, wait until clients start demanding sub-pixel perfection!
• Saved passwords can now be edited.
• The 64-bit edition of Chrome is now the only version available on Mac OS.
• SHA-1 encryption is being phased out in favor of SHA-2.
• Experimental support for extension buttons icons inside the menu has been added (set Enable extension toolbar redesign in about:flags).

Despite a few dodgy additions and some Firefox catch-ups, version 39 is another great update. Chrome remains fast, stable and the browser of choice for almost half the web. Recommended.

Read More

Write Better Markup with HTML Inspector

We often see quite a bit of discussion of optimization techniques for various areas of front-end development. One area that probably gets more overlooked than it should is HTML.

I’m certainly not a member of the ‘clean, non-presentational markup’ camp. But I do think consistency in markup is needed, especially when working on code that many developers are going to touch.

In this post, I’ll introduce a neat little tool that I’ve revisited recently that I think many development teams would do well to consider using: HTML Inspector by Philip Walton.

What is HTML Inspector?

As Philip explains on the repo’s README, it’s:

a highly-customizable, code quality tool to help you (and your team) write better markup. It aims to find a balance between the uncompromisingly strict W3C validator and having absolutely no rules at all (the unfortunate reality for most of us).

Although I somewhat disagree with Philip’s statement that the W3C validator is “uncompromisingly strict” (doesn’t he remember XHTML?), I certainly agree that many teams of developers likely lack a set of logical in-house standards to keep their markup maintainable and up to date.

After running HTML inspector, you’ll get a series of messages in your browser’s developer tools console, letting you know what issues in your HTML you should consider addressing.

You can see an example of HTML Inspector’s output in the image above, which is taken from a test I ran onone of my older projects, which I knew would likely have some questionable markup.

Install and Run HTML Inspector

If you’re doing testing on your own non-production code, you can simply include the HTML Inspector script in any of your pages, at the bottom, then run it by calling the primary method. Below is a brief description of the install methods, and then I’ll explain an even better method to get it to run on any website, remote or local.

To install and use via the command-line, you can use NPM, which requires PhantomJS:

1	npm install -g html-inspector

Or you can install with Bower for use in the browser:

1	bower install html-inspector

If you choose to download the tool manually, all you need to do is grab a copy of html-inspector.js from the project’s root directory, including it at the bottom of your document after all other scripts have loaded. Then you need to execute it, as shown below:

1 2 3 4

<script src="js/html-inspector.js"></script> <script>   HTMLInspector.inspect(); </script>

But unless you’re customizing the script, you don’t need to do any of the above. You can run it on any remote or local website in a few seconds, in any browser that has developer tools installed.

Open your browser’s developer tools console and run the following commands:

1 2 3

var htmlInsp = document.createElement('script'); htmlInsp.src = '//cdnjs.cloudflare.com/ajax/libs/html-inspector/0.8.1/html-inspector.js'; document.body.appendChild(htmlInsp);

After those are executed, you can then run the following in the console:

1	HTMLInspector.inspect();

Note: As pointed out in the comments, you have to run the final line as a separate command, after executing the first three lines, for this to work.

This script uses the HTML Inspector code as hosted on cdnjs.

In fact, I’ll make it even easier for you; you can create a bookmarklet with the code in this Gist. Once you have the bookmarklet added to your bookmarks bar, execute it on any website, open the console, then runHTMLInspector.inspect().

Try it on a really old project or pretty much any WordPress site if you want to see the kinds of warnings it spits out by default.

Of course, if you decide to customize HTML Inspector, you’ll need to download it and run your own configured version. So once you have your version ready, you can do the same as I’ve described above, but with a modified source URL.

HTML Inspector: The Great Parts

Here are some of the great things about this tool:

• It’s one of a kind; I haven’t seen another tool that’s still active that’s comparable in terms of HTML linting. (If you know of one, let me know in the comments!)
• Like other similar tools for CSS and JavaScript, you can customize it to only warn you for the rules you like.
• You can write your own rules, which is probably the best feature of all.
• No dependencies (note that the original blog post says it requires jQuery, but that was fixed about a week later).
• It runs on the live DOM in the browser, not merely on the initial static HTML. This is great because it allows you to test on markup that gets added and modified dynamically by other scripts on the page.

A Great Tool for Dev Teams

As Philip explains on the aforementioned launch post, a great benefit to using HTML Inspector comes on teams where you might have a number of developers join for a short period of time (e.g. interns and new hires).

So imagine a new, less experienced developer working on your projects for three months, as a summer intern or something. It might normally take such an employee the full three months to get used to your way of writing code. But with HTML Inspector, all you need to do is have your customized rules in place. The new developer then just needs to run HTML Inspector with your custom rules, then read the warnings in the console and make any necessary adjustments to his code.

Changing the Defaults

There are two ways to customize HTML Inspector: Changing the default values in the config settings or (as mentioned) writing your own rules. Let’s look first at the default settings.

Running HTMLInspector.inspect() with the default setup executes the tool with the default values. Theinspect() method takes an optional config object to change these. You can override the values by doing something like this:

1 2 3 4 5 6 7 8 9 10

HTMLInspector.inspect({   domRoot: "main",   excludeRules: ["validate-elements", "validate-attributes"],   excludeElements: ["svg", "span", "input"],   onComplete: function(errors) {     errors.forEach(function(error) {       console.warn(error.message, error.context)     }   } });

Here I’ve decided not to validate elements or attributes and I’ve told the tool to exclude certain elements from being inspected.

For full details on modifying these defaults, check out the pertinent sections in the README file on the GitHub repo:

• Configuring HTML Inspector
• Built-in Rules

Writing Custom Rules

As mentioned, you might not agree with HTML Inspector’s default inspection warnings. If that’s the case, or if you want to add to those, the most powerful part of the tool is the ability to write your own rules.

You can do this using the following structure:

1	HTMLInspector.rules.add(name, [config], func)

The README gives the example of a dev team that previously used two specific data-* attribute namespaces that are now internally deprecated in favor of another method. Here’s how the code would look:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

HTMLInspector.rules.add(   "deprecated-data-prefixes",   {     deprecated: ["foo", "bar"]   },   function(listener, reporter, config) {       // register a handler for the `attribute` event     listener.on('attribute', function(name, value, element) {         var prefix = /data-([a-z]+)/.test(name) && RegExp.$1         // return if there's no data prefix       if (!prefix) return         // loop through each of the deprecated names from the       // config array and compare them to the prefix.       // Warn if they're the same       config.deprecated.forEach(function(item) {         if (item === prefix) {           reporter.warn(             "deprecated-data-prefixes",             "The 'data-" + item + "' prefix is deprecated.",             element           )         }       })     }   ) });

(Take note that Philip is a madman and thus doesn’t use semi-colons at the end of lines!)

I’ve only scratched the surface of what’s possible with custom rules. I’m hoping to find some time to delve deeper into custom rules later on, and maybe I’ll write about it. In the meantime you can check out the relevant parts of the README for more info:

• Writing Your Own Rules
• Overriding Rule Configurations

Conclusion

As is true of many developer tools, you’ll need a modern browser for HTML Inspector to work (for example, the browser needs to support ES5 methods, the CSSOM, and console.warn()).

As mentioned, I haven’t seen too many tools like this one (besides a regular validator). There was a general HTML Lint tool that seems to have disappeared. But other than that, I can’t remember another tool like this one – and certainly not one that’s as customizable and that runs on a live DOM.

If you’ve tried out HTML Inspector or know of another similar tool, feel free to let us know in the discussion.

Read More