Category Archives: Web Development

Adding a Javascript library to Drupal 8

This evening at our local Drupal meetup, in Bellingham, WA,  Trebor and I dug into Javascript in Drupal 8. In Drupal 7 we use drupal_add_js() hooks. Drupal 8 changed this and several other aspects of how one adds JS to a site.

The move away from drupal_add_js() is well documented in the change record, back on December 4th, 2014. Though adding JS now takes a little more work, the pay-off is worth it. As I understand the rendering system, helpfully drawn out in this image, every entity is now cacheable, per entity. This means if one entity changes on a page, the whole page does not need to have the cache flushed, just that one entity will reload.

I messed around with the core Bartik theme to get this working. The end result is having the search box become sticky on very long posts, so as you scroll down, the search box sticks with you in the upper left.

We modify two files and create one brand new one.

Step 1:

Modify bartik.libraries.yml found in /core/themes/bartik/bartik.libraries.yml. Within that file add the following code at the bottom.

stickyjs:
  version: 1.0.0
  js:
    sticky/bartik.js: {}
    sticky/jquery.sticky.js: {}
  dependencies:
    - core/jquery

The first line declares to Drupal how we can access the components using the new attach_library function. You can call it whatever you want, I chose to name it the same as the library I want to add.

I don’t know what the version is for, but it seems to need it. You can put whatever you want where 1.0.0 is. Then you tell Drupal that stickyjs has a few javascript files and a dependency on jquery. What you are adding here to the .yml file is what used to live in the .info file for a module or theme. You can see where this is roughly outlined within the following Defining a Library section on drupal.org.

Step 2:

Modify this file: /core/themes/bartik/templates/block–search-form-block.html.twig

Here we need to actually tell Drupal to load this library, when this block is present on the page being requested.

{% block content %}
    {{attach_library('bartik/stickyjs')}}
  <div{{ content_attributes.addClass('content', 'container-inline') }}>
    {{ parent() }}
  </div>
{% endblock %}

The file in unmodified form does not include the second line {{attach_library()}}. What attach_library() does is load the file when this search block is present. The argument in the function is the theme or module name, in this case, bartik. Then the / name you used in the yml file to tell Drupal about your javascript. We end up with bartik/stickyjs.

Step 3:

Download the JS library and add in a .js file that we can invoke with Drupal behavior. For this example we used the awesome stickyjs jquery plugin.

We extracted the download to /core/themes/bartik/sticky. We then created a new file in there named bartik.js, which we defined earlier in the .yml file. I dropped in this snippet of code to invoke the sticky js plugin.

(function ($) {
  Drupal.behaviors.bartik = {
    attach: function (context, settings) {
     $("#block-bartik-search").sticky({topSpacing:60});
    }
  };
})(jQuery);

This is a fairly standard Drupal 7 looking behavior, so not much to see here. This will fire when the page with the search block loads.

Step 4:

Clear the cache by going to your website then to admin/config/development/performance and click the big Clear all Caches button. Go to a page that has the search box on it, add some gibberish to the post, so it is lengthy, and then when you save and the page reloads you will see the search box sticking to the top of the page as you scroll down. On my test site it looks like this:

A nearly blank webpage with a search box in the upper left corner.

Conclusion:

At first it seems like a lot more work but I can see how this opens up a lot of flexibility for developers. Once you get the hang of .yml files replacing .info files it begins to make a bit more sense. I think this is well worth it for the improved cache capabilities. I look forward to using D8 in production.

Caveat: I know you don’t modify core. I did it this way as I was exploring the D8 core codebase. If you want to do the above in production, do it in your own theme, not core.

Sample code: Replace your core bartik with this to see this completed example in action.

bartik-with-stickyjs

Homepage – What does it mean?

Homepage. Home page. Home Page. In every variant of the spelling it is a singular noun. If one must go to the homepage of a corporation or institution you visit the homepage. However, for those of us that work day to day with websites, we often say something along the lines of, “that content is on the homepage.” The thing is, we don’t mean that it is literally on the homepage. We mean it is within the site that has a front door at ***.com.

There must be a better phrase, but those I’ve tried don’t seem to have traction. Home site, the collection of pages and posts, the company site. I believe that homepage is an anachronism of the early web and a better term is needed.

Now, I realize this position is rather thin, especially for small websites. However, as sites grow more complex or there are sites within sites within sites, this becomes important. I work at a university and if a department has a website, they refer to their homepage. That gets confusing as the department site is usually within a college site and homepage which is within the university homepage.

This has certainly been kicking around in my head for several months. Surprisingly, even Wikipedia has a lightweight discussion around the term. I don’t know what the answer is, maybe I just need to accept that homepage can mean many things but I am grasping for a concrete word or phrase that captures the idea of a main web property that exists for a brand.

Grace Hopper portrait photo

Grace Hopper and the invention of the information age.

Grace Hopper and the invention of the information age. Kurt Beyer. The MIT Press. Cambridge Massachusetts. 2009.

Growing up around computers in the early 1990s I never heard of Grace Hopper. Bill Gates, Steve Wozniak, Steve Jobs, Bjorn Strossoup. I heard of those guys but the story of Grace Hopper is incredible and at least at the time was not talked about.

This book should be part of every computer science 101 course in colleges or high schools. At the same time the Eniac, arguably one of the most famous computers ever, was calculating ballistic firing tables Grace Hopper and her commander Howard Aiken with his machine the Mark I, during the war helped calculate solutions for the first atomic bomb. Beyond that they did many other tasks, all the Eniac could do was calculate firing tables. Not only is the story of Grace Hopper important for the history of computing, other females who kicked serious computing butt are highlighted throughout the book. Jean Bartik , Betty Snyder, and Kay McNulty. These women revolutionized programming.

  • If/then blocks
  • Debugger
  • Problem oriented languages
  • Compiler
  • COBOL

Reading the book leaves one in awe of what was done in the early years of computers from the Eniac and Mark I being enormous in size and almost being entirely mechanical. The early technical feats of using magnetic tape storage, mercury delay lines as a type of memory, magnetic disk arrays, and the first RAM. The mental hurdle to go from paper punch cards to a system written on tape is hard to wrap your head around.

Beyer I believe does a really good job of looking not only at the technical accomplishments but the social innovations too. Grace Hopper he points out was not just brilliant as a mathematician but pushed new ways of distributed collaboration in the business world. She worked across industry and between companies bringing in new ideas from others, distributing that new version to others and iterating until a great product arrived. Her first compiler the A-0 was written by herself and then the A-1 by her team at Remmington-Rand. The A-1 then was built by the collective, it was open source before free software was a thing.

For one not familiar with the early programming and hardware evolution Kurt Beyer writes illustratively allowing the reader to place her/himself in the 40’s and 50’s while this all occurred.

Thank you Kurt for writing an awesome introduction to not only the career of Grace Hopper but the beginnings of a new dawn for computing.

Sessions I find most intriguing

DrupalCon Los Angeles kicks off in a few days. I am lucky to have an opportunity to partake. I’ll be sprinting Sunday and Friday. The higher-ed summit should be great and I am humbly leading a few table discussions at that.

Here are sessions I find intriguing, the ones with an asterix are where I’ll most likely be.

Sunday

  • Sprints

Monday

Tuesday

Wednesday

Thursday

Friday