Drupal 8 as many people have already pointed out provides a great base for front end developers regardless of your chosen stack. Providing REST as core functionality has created a standardised approach which when left up to contrib can often become enigmatic.

This article aims to explain the benefits of building a JavaScript application via Drupal's theme layer. Mithril JS will be used as the client side framework, however the core concepts could be applied to others as well. 


Requests to Drupal can also be queued, allowing access to an array of results. This generally makes for more performant and organised code.

var nodes = md.queue([
    method: 'GET',
    url: '/node/1',
    background: true
    method: 'GET',
    url: '/node/2',
    background: true
    method: 'GET',
    url: '/node/4',
    background: true


Bringing all of the above together I have made a very rough version of the classic Bartik theme. The example theme/site is located here.

While these are some nice examples they are very simple and lack (any) finesse, a problem only love can solve (more time). Hopefully over the coming months I'll have the opportunity to utilize these tools in more projects.


When developing with caching in mind it's important to consider functionality scope. For example, writing code which is per visitor specific in PHP with caching support ahhh =O. While rewriting that same functionality in JavaScript offers us a quick and cache friendly solution. Consider the following examples.


The following example extends the Drupal 7 Media module (7.x-1.4 / 7.x-1.x). The goal is to provide separation between the Drupal backend and the Media module functionality. Providing a custom theme just for the Media module components. This allows users with access to the Media module to circumvent the Drupal backend. Why? We can eliminate user error by providing a cleaner UX, the user's journey is much shorter & the solution feels much more customized.



Providing a responsive checkout is an important feature of any eCommerce site. Drupal Commerce if themed correctly handles this fairly sweet; except for one element, tables.

Here is a quick solution which leverages stacktable.js. Automatically applying it to each views table instance during the checkout process. Simply add more form_id's to extend this functionality to other pages.


The following example will illustrate how to override a views default ajax pagination callback. There are a number of reasons this could be useful. Views ajax pagination will replace the entire view element; which is of course required it's still doing more than we might need. We might also want to keep the already loaded content and simply append new rows. Please note this is still a work in progress and is intended for the Owl Carousel module.


This article will contain a super brief summary of some of the gotchas when adding custom validation to checkout panes. Commerce checkout panes handle validation on an element level, validation handlers should be attached to the button. However this is not always possible.

For example, say you have embeded a custom form into one of your checkout panes. Validation for this form must be declared in hook_commerce_checkout_pane_info or hook_commerce_checkout_pane_info_alter


Before I dive into the method behind this module let me explain the use case. Our client had very little time and required at first a simple way to attribute a score (numeric value) per entity type field instance. The total score for the submitted entity is then calculated from each field score where a value has been entered. Finally these are displayed in an administrative view with a comparison to the total amount of points possible for that entity.


Below is a very simple bit of code which extends Drupal Commerce reorder module. The code places an AJAX form on all commerce order entities allowing users to reorder from the order details page. This form functions exactly like the module button but with no redirect after the reorder has been triggered. One could easily add this in with a $form_state['redirect'].


Editr is an online code playground editor built with ace.js by Idered (Kasper Mikiewicz). Editr is a fantastic way to demonstrate code providing syntax highlighting, code tips & previews. Further Editr can be hosted locally allowing easy extension. Integrating Editr into Drupal was tedious at first with the jQuery requirements set fairly high; thank you maintainers of the jQuery update module, your awesome. As it stands this is only a proof of concept and should not be used on a live production site etc.


Recently we required a simple method for allowing users to register to the site and an event through a single form. We are using the Entity Registration (1.x) module in conjunction with Commerce Entity Registration. The form was available for each event on the corresponding node pages. Essentially the user required an account to attend an event as follow up & post event information was needed.