All posts by Max

About Max

I recently graduated from Albertson College of Idaho and have moved back home to the great NorthWest. I currently working for Northwest Technology in Ferndale Washington as their web developer.

DrupalCon Nashville – A summary that is late, but better than never

Drupal

DrupalCon is hands down the best Drupal summit/camp/conference that exists. The other formats may be more intimate, it is much easier to have quiet time for those of us who identify as introverts, but the energy and enthusiasm at DrupalCon is always infectious.

My last DrupalCon was 2015 in LosAngeles, and while Nashville lacked Palm Trees the weather was great and the music was everywhere. It was wonderful to connect in real life with those I generally only talk to via the Drupal issue queue, IRC, or Slack. I certainly walked away with more than I gave and have been spending the time since DrupalCon putting a lot of the ideas into practice.

I was honored to be a speaker on the accessibility panel at the higher education summit that happens the day before the full conference. We tended to talk about accessibility in general terms and the feedback received was that at a Drupal conference they want specifics on Drupal. Luckily, there were many great sessions on just that topic throughout the week so I hope everyone was able to attend or watch the videos afterwards.

Unfortunately, I was unable to attend the sprints at the end of the week, it is one of my favorite parts. I will be sure to stay while in Seattle next year. I was able to make significant progress on https://www.drupal.org/project/drupal/issues/2770835 though it is still not in core. As core gets bigger, these types of fixes are going to take longer to get approved as lots of modules now can be affected by small changes.

The following are my raw notes from the conference.

Pre-Summit:

Style Guide stuff:

 

Migrating 10,000 great books to Drupal 8 – Princeton University Press

@dergachev – Alex Dergachev

  • 10,000 books and 18,000 static pages to migrate.
  • They chose Drupal 8 for the community, empowerment of content editors, integrated & extensible platform for search, e-commerce, SEO, APIs, and the ability to customize the information architecture.
  • To handle the migration from SQL, they had a PowerShell script that ran nightly to run sql queries that generated CSV files. Those CSV files then were imported into D8. That is a pretty slick way to decouple from SQL.
  • Used context, context_active_trail, entity_reference_revisions modules
  • Checkout blackfire.io as an xhprof alternative and it is focused on performance
  • Also, this github project, https://github.com/dergachev/sitediff
  • evolvingweb.ca/training for D8 – 5 day in person

Pre-Note & DriesNote

  • The total eclipse website is built with Drupal
  • 40% of speakers at DrupalCon are from under-represented populations
  • Drupal 8 migrate, api-first, media, and site management is in 8.5.
  • New Balance website mobile app is powered by Drupal
  • React VR headless drupal application for tours – freaking cool, nothing custom done to Drupal, just uses core
  • It takes 41 clicks and many many minutes (30+) to get Drupal installed compared to other PHP frameworks. Drupal is working on getting this fixed.
  • The UI for content creators will be refreshed and over time improved patterns will emerge
  • We should not compare ourselves to Drupal 6 or 7 but competitors like squarespace
  • Drag and drop media management is on the way. Really need more contributors to the media initiative to make this happen faster.
  • Contextual configuration management is something that is going to be built into core soon
  • https://drupal.org/promotedrupal
  • Use the “simplify drupal” tag in the issue queue for efforts related to all of the above
  • Drupal Values
    • Prioritize Impact
    • Better together
    • Strive for excellence
    • Enjoy what you do
    • Treat others with dignity & respect
  • Find more in-depth discussion at https://drupal.org/principles

Building Banging Websites with Bricks, Paragraphs, & Modifiers

https://events.drupal.org/nashville2018/sessions/build-banging-sites-bpm-bricks-paragraphs-and-modifiers

  • https://www.drupal.org/project/bricks
    • Combines layouts and entities into one page
    • Works in tandem with paragraphs, you can expose your paragraphs by putting them in a layout bundle
    • Bricks have different view modes
    • Easy drag and drop
    • Now supports dynamic entity references module
  • https://www.drupal.org/project/modifiers
    • Inspired by the M in BEM
    • Looks really cool.
    • Extends bricks.
    • No more making classy paragraph derivatives
    • Can even hook into it or plugin
    • They have the drupal module modifiers_pack as a great starting point
    • Really saves time as all is reusable. Spend more time with customer. Less time building same thing over and over.
  • Paragraphs are scoped to content while blocks are global
  • Also, checkout the “look” module, https://www.drupal.org/project/look which allows sets of modifiers to be applied
  • The bricks and modifiers are all pretty new but it seems like a super recipe

Nurturing a Productive Lifestyle

https://events.drupal.org/nashville2018/sessions/nurturing-productive-lifestyle Check this session out… I caught the tail end and it seemed good

Charts

https://www.drupal.org/project/charts

  • Use Google Charts or High Charts

Journey to the Drupal Heart – Symfony 3  basics and a bit beyond

https://events.drupal.org/nashville2018/schedule/2018-04-10

  • Symfony is a set of reusable PHP components and Drupal uses a set of these. It is really a MVC framework.
  • Symfony has its own server, we don’t use that in Drupal but handy for other stuff
  • It has a built in debugger that appears at the bottom of the web page that loads
  • Every page needs a route, controller, content, and
  • Each class is namespaced to be unique to avoid conflicts. It follows the folder structure\name
  • You can use @annotations or yml files for route specification
  • You do dynamic routes with parameters
  • Parameters and variables should match
  • $php bin/console debug router spits out all routes for you to see and you can add more specifics to router to narrow down the results
  • Services are useful objects – provide reusable functionality
    • To access services you need to get them through Container
    • Container object is provided by Symfony Controller
    • $php bin/console debug::container to see a list of them all that you can use before adding your own
  • Templates are the V in MVC
    • They use TWIG
    • {{ }} means say something
    • {% %} means do something

Maintain and improve team health and productivity

https://events.drupal.org/nashville2018/sessions/maintain-improve-team-health-productivity

  • Kind of a neat thinking paradigm, be like water, respond to a request with the appropriate response of ripples to the level of the request
  • Everything is a lesson learned
  • A problem when managing multiple projects is that you are not able to give each team your undivided attention
  • Not everything is priority 1, you have to set boundaries. Pause and reflect and help the client figure out what is most important for your end-user.
  • Another reminder to time box effectively and to stick to your calendar
  • Get a 3rd person to weigh in on an issue if the issue continues to recur
  • Create a capacity calendar for ourselves

Maintaining Design Consistency Across Every Channel

https://events.drupal.org/nashville2018/sessions/maintaining-design-consistency-across-every-channel

  • Lightning, MailChimp, and Carbon style guides were dissected and highlighted
  • Sketch and Zeppelin are two products that can help with developing the guides

Integration of Drupal Coding standards with Git hooks

https://events.drupal.org/nashville2018/sessions/integration-drupal-coding-standards-github-hooks

Think Your Website is GDPR Compliant? Think Again!

https://events.drupal.org/nashville2018/sessions/think-your-website-gdpr-compliant-think-again

  • The spirit of the law is to put the data power back in the hands of the people
  • WWU is certainly at risk for non-compliance
  • The GDPR is not just an IT discussion.
  • There are several roles that need to be doled out
    • Supervisory authority (This seems to be only an EU requirement)
    • Controller
    • Processor
      • All 3rd party services that touch the data need to be GDPR compliant ~ that will take work with purchasing to confirm
    • Data Protection Officer
      • Should not someone with conflicts of interest
  • Rights
  • One a breach occurs you have 72 hours to notify
    • There are some ways to avoid that but you have to be transparent
  • Users have a right to have access to all their data, how it was obtained, and how it is used
  • Right to erasure (to be forgotten)
  • Data portability – they have the right to move their data to other systems
  • Privacy by design
    • We need to reach out to everyone on campus that collects data, EE, advancement/alumni, admissions, departments, etc…
    • Only collect exactly what you need
  • Privacy Experience (PX)
    • Always be transparent
    • Use easy to understand language / no “lawyer speak”
    • Users opt-in to how the data is used, not opt-out
  • No longer should developers and engineers have access to production data. We should anonymize it.
  • Privacy by design
    • Limit attack surface (remove modules from prod when not in use)
    • Keep solutions simple
    • Encrypt PII
    • Know your regulatory requirements FERPA, HIPAA, GDPR, PCI, CAN SPAM
    • Write policies and procedures and then follow them
    • Automate auditing and compliance processes
    • Log events and transactions
      • Keep the logs clean, get rid of PHP notice and warnings in WatchDog by fixing the issue
  • One encryption key per user – a concept to look at  https://info.townsendsecurity.com/gdpr-right-erasure-encryption-key-management
  • Marketing Advantages of Privacy
    • Make trust your competitive advantage
    • 94% of customers are more likely to be loyal to transparent brands
    • Trust enablers
      • Deliver value
      • Embrace education marketing
      • High Quality
      • Empower the individual
  • Consent for one campaign doesn’t mean consent for all anymore
  • Be able to prove you have consent – even on past opt-ins
  • Talk with marketing automation and CRM platforms to see if they offer tools
  • Creating an action plan
    • PX takes a team, we all need to come together on creating the positive PX experience
  • Data collection
    • What are we collecting and why
    • Active vs. Passive
    • Storage and Encryption
    • Integration Points
  • Messaging and Consent
    • Opt-in language
    • Privacy policy and legal documents
      • In plain language, not legal language
    • Internal messaging around value of a great PX GDPR experience and marketing impact
  • User Control
    • Data portability
    • Revoking consent
    • Data erasure
  • Next steps
    • Legal should assess risk
    • Create/Update security and privacy policies
    • Technology teams prioritize remediations
    • Implement remediations
    • Document remediations and next steps
    • Rinse and repeat

A New Help System for Drupal

https://events.drupal.org/nashville2018/sessions/new-help-system-drupal

D.O issues to take a look at:

  • 102254
  • 2516902
  • 2701289
  • 2587469

The goal is to provide inline help for the entire system, not just modules. You want to keep the structure that exists, but make it more flexible and easier to update and find for the end-user.

Customizable workflow help should be able to be created.

HigherEd BOF

Hard to take notes, standing room only

  • Automated site-owner emails that if not responded too, then they are shut down. Would be a great way to handle all of the dead WP sites.
    • Can CampusPress help with that?
  • Reiteration that compliance is a good tool for shepherding
    • Policies at the top are helpful to reference
  • This could be a good tool for us, https://www.drupal.org/project/profile_module_manager. It looks like it would replace “profiles,” not really sure about D8 support.

A smarter Way to Test Accessibility – a comparison of top tools (Lighthouse, Tenon.io and WAVE API)

https://events.drupal.org/nashville2018/sessions/smarter-way-test-accessibility-comparison-top-tools-lighthouse-tenonio-and

Gaps in automated testing really do exist. Manual testing is needed, examples:

  • Image has alt text, but does it make sense in the context
  • Identify form field labels, but is the label clear and easy to understand
  • Has headings, but is the hierarchy correct
  • A menu is proper HTML, but does it work with keyboards opening a dropdown?

LightHouse is an open source tool developed by Google and is built upon the open source rule set AXE.

Tenon.io and WAVE have costs associated with them.

All of these have command line tools.

LightHouse – https://github.com/GoogleChrome/lighthouse

  • You can output this as json and then parse as a gulp task to have a nice report
  • Then have the gulp task run on save or git-commit (very neat)
  • You can use this service offline! That means you can run these tests against a local dev URL

Checkout git guppy that lets you run gulp commands on pre-commit hooks.

https://www.npmjs.com/package/git-guppy

You can extend that concept to Jenkins to find ways to automate some of this checking on prod or prior to merges. Maybe some of these could be done as a suite against a set of archetypal pages.

More predictions on machine learning improving automatic captions and alt text on images.

From Feedback to Finish: How to Leverage User Focus Groups for Website Design

https://events.drupal.org/nashville2018/sessions/feedback-finish-how-leverage-user-focus-groups-website-design

Chicago Park District – Serving all of Chicago

  • Migrated from a heavily customized older website/system
  • Had lots of data to work from with analytics, user surveys, and benchmark/comparison analysis

A focus group series was created to identify why people were accessing or ignoring the data, the need for external validation. The end goal is to find out how people really use the website.

One specific approach – http://cutgroupbook.org/

Where to start

  • Develop questions
  • Scheduling
    • You need to be available, have an appropriate physical space, and some equipment.
    • Do it in a timely fashion so that the results matter to the project
  • Get volunteers to proctor
    • People that manage the content
    • People that develop the systems
  • Review how the test will run
    • Outline how it will all work
    • Run through the test with each other (the proctors)
    • Procedure for people coming in through the post-test proctor questionnaire
      • Get feedback from testers and proctors
  • It ends up being really hard to not “help” testers, but you need to let it play out
  • Test on a variety of devices, not every tester needs to use all devices, have some use a phone, some use a desktop, others use a tablet, etc…

Outcomes

  • Cleaner homepage
  • A clear focus on mobile usage
  • Streamlined searching
  • Highlight mapping options

Take a look at the linked slides as there is a good slide at the end titled Practical Magic

 

One click upgrade to Drupal 8 – why, when and how

https://events.drupal.org/nashville2018/sessions/one-click-upgrade-drupal-8-how-why-and-when

  • Quick overview of default out of the box migrate using the upgrade button
    • Field Collections are not yet support
  • Custom updates with Drush
    • Drupal upgrade, migrate tools, migrate plus, and migrate manifest
    • Supports roll back migrations and exposes it to the front-end
    • Also allows you to stop and reset messed up migrations

Feeds, https://www.drupal.org/project/feeds, may have a stable D8 release this week

Provision 4 – Aegir BOF

https://docs.provision4.org/

Try converting drush commands into pro commands

It is ready for testing

It is based on Robo, https://robo.li and Symfony Console

Follow this issue to see when it will drop, https://www.drupal.org/project/provision/issues/2912579. Supposedly soon.

Lots of talk of moving Aegir to host the websites in a docker container, but one container for all sites, unless you want a stack per site.

Drupal Console has a set of docker commands as well

Drush.inc files may not yet be supported. We want to test that for sure if this actually goes forward.

Webcomponents, Polymer and HAX: decoupling authoring for Drupal and beyond

https://events.drupal.org/nashville2018/sessions/webcomponents-polymer-and-hax-decoupling-authoring-drupal-and-beyond

Headless Authoring Experience (HAX)

  • Perils of ignoring content authors
    • Panic Mode calls coming in from authors
    • Content gets stale as no one wants to make updates because it is hard/confusing
  • Lots of attempts at making it easier over the years
    • Tokens
    • Short codes
    • Snippet templates
    • And more, paragraphs, bricks, Divi in WP
  • Try it at https://haxtheweb.org
    • Full on de-coupled authoring for not only Drupal but for everything
    • Everything is a new web component
    • It looks really awesome
    • One edit tool to rule across all platforms
    • That is really cool.
  • WebComponents power it all
  • Already can do tables via CSV import, tables via CSV import
  • An a11y compatible video player
  • Playing on working element queries
  • 147 components available now at https://www.webcomponents.org/author/LRNWebComponents
  • HAX is pluggable so any of the 15,000+ web components that exist can be brought into HAX
  • HAX objects follow JSON Schema – http://json-schema.org/
  • Allows us to turn off tons of wysiwyg and media modules 🙂
  • Polymer which is kind of like jQuery for web components and it can generate help documentation per component
  • A question was raised about the migration to Polymer 3?

Once Upon A Time: Telling Stories For Better Engagement

https://events.drupal.org/nashville2018/sessions/once-upon-time-telling-stories-better-engagement

  • We can spot stories
  • Story structure – the Hero’s Journey – the protagonist
  • Contrasted Star Wars versus Mean Girls and pointed out they are pretty much the same story
  • Story elements
    • Ordinary world
    • Call to adventure or inciting incident
    • Refusal of the call
    • Meeting the mentor
    • Cross the threshold – start the journey into the special world
    • Tests, allies, enemies
    • Ordeal
    • Reward
    • The road back – beginning to move back to the ordinary world
    • The resurrection
    • Return with the elixir – the knowledge, the object, …
  • We remember story!
  • Effective advertisements that stick in your mind generally leverage story
  • Boring > Cheesy but other options do exist
  • The long game is important, build trust, don’t push
  • Add value with each touch, don’t just push reminders with no extra value added
    • What would that look like in higher-ed
  • You are not the hero in the story, the customer is the hero and you play the mentor role
  • No one is average, don’t design for the average. Specificity is what draws us to characters and engage with stories. UX persona’s can help. He shared a picture of the coke advertising “share a coke with NAME”
  • Celebrate the win – their success is your success.
  • Purchase is not the finish line. Once students are accepted and attending, keep mentoring, keep celebrating their successes
  • http://johnrhea.com/once

Entities 301 – Entities Elsewhere

  • Watch this

HighEdWeb 2017

Web Development

Recap

HighEdWeb is an interesting conference. It focuses on a niche, web development and management in higher education. I had not attended this conference in the past but had heard good things. Overall it is a worthwhile conference, there is a very strong sense of community and shared struggles. The technical presentations were a mix of solid development practice reminders and a smidge of pushing the boundaries. I tend to like the future focused presentations more but it was hard for me to take issue with anything in the sessions.

The keynotes were fantastic. Tatjana Dzambazova’s presentation was like sitting through a year of the Economist’s technology quarterly issues in one hour. Very exciting stuff. Felicia Day closed out the conference and her story was great to hear. She certainly had a very strong fan base in the crowd.

The most fun technology takeaway from the conference was a newer development tool based on Docker named Lando and a 3D printed map tile, Touch Mapper.

Presenting at the conference was really great. A super supportive audience, great questions, and engaging discussions throughout the rest of the conference. What follows are the highlights of my notes.

Talk: Outnumbered by Temporary (Student) Staff – A Win for Your Institution

Slides: http://slides.com/maxbronsema/outnumbered#/

Deborah Frost, a colleague in University Residences, and I really enjoyed presenting at HighEdWeb 2017. I’ll let the slides highlight our main points. If you have questions about employing students in a higher education setting where they deliver incredible value to the institution and learn a lot of valuable skills, please do not be afraid to reach out.

Aggregation of Twitter posts about session

Talk: Usability Testing is Super Important and Easier Than You Think

Victoria Merriman presented a nice overview of usability testing procedures. This was all centered around a loose format. The benefits of usability testing as outlined by Victoria:

1) Drives conversions
2) Fixes issues
3) Resolves internal debates
4) Create a positive impression and strengthen your brand

The process:

  1. Write 8-12 tasks
    “You are an X in situation Y. You want to do Z.”
    Make users dig a little
    Keep tasks short
    Don’t use the exact words
  2. Get testers
    Offer an incentive
    8-10 testers is a good goal or < 0
  3. Watch testers perform the tasks and gather the following metrics
    1. Completion – 0 to 1
    2. Time on task
    3. User rating 0-10
  4. Learn from their struggles and successes

Nevertheless, She Persisted

This was the best hour of HighEdWeb 2017. A panel of women shared their experiences in the industry of web development. It was inspirational and a reminder of all that gets in the way of success. There is a lot more that males in the field can do to move towards equality.

Highlights:

  • Moving towards leadership parity. 52% of professional jobs are held by women, however only 8.1% are top earners
  • Not talking about it enough but more than in the past so let’s keep the momentum
  • Mentoring involves being present, accessible, and available to support others
    • Introduce women/everyone to others that may be able to mentor/sponsor and help them make those connections
  • The tiny encouragements help a lot. Let them know.
  • Work/Life Harmony, not balance

Calls To Action

  • Do your research. Know the facts. Respond. Share.
  • Advocate & openly support underrepresented groups
  • Get involved in a campaign for someone you believe in. Use your tech/creative skills.
  • Do not go to a conference that does not have a code of conduct (Withhold participation and tell them why you are not going)
  • Read and buy books from humans in underrepresented groups

Men

  • Listen and then amplify
  • Speak up. If you see something, same something. To your peers… to your brothers.
  • Taking notes often falls to women. Step up to take notes, bring treats to meetings, etc…

 

Mobile First: Writing and Designing Page Content in the Age of Mobile

  • Let national research make your case 4/10 users use mobile all of the time
  • Show heat maps of mobile – not desktop
  • Is anything hidden in the regions that render lower on the page?
  • Don’t overlook phone numbers, include area codes for mobile dialing
  • Remove references to “Look in the left or right column”
  • Remove walls of text – if it is really important make it readable
  • Bite, Snack, Meal approach – coined by online writing expert Leslie O’Flahavan
    • Make the snack scroll worthy
  • Use plain language
    – hemingwayapp.com
    – plainlanguage.gov
  • How People Read the Web: e-book by Nielson Norman Group
    https://www.nngroup.com/reports/how-people-read-web-eyetracking-evidence/
  • https://www.nngroup.com/articles/how-users-read-on-the-web/

Accessible Wayfinding

This was also a great session. Wayfinding is most always a hot topic because doing it well is difficult, time-consuming, and generally expensive. The presenters did a great job highlighting a select series of best practices and actionable steps to take on campus.

Consider use cases when writing map descriptions

    • How do I get to….
    • How far is …
    • What are near …

Use an ordered list to give directions
Use an unordered list to describe what’s nearby

A favorite alternative map, http://www.dyc.edu/admissions/visit/campus-map-and-tour.aspx, alternative maps are offered if there is nothing to be done with the primary map.

If you are using color coding, always pair it with…

  • Textures
  • Shapes
  • Text

Keyboard Navigation

  • Make focus obvious
  • Make it easy to find the keyboard shortcut list showing good key combos
  • Does zooming and panning work?
    maps.duke.edu/map does a good job with keyboard nav
    bit.ly/heweb17dpa5 is a prototype with keyboard shortcuts done right

Accessible Technology for those that are blind

  • Trekker Breeze is a tool one can buy for blind users
  • BlindSquare App
  • Touch Mapper

Less is more

Penn State has a huge library system!

Project One pagers

Occam’s Cleaver, more brutal than the razor

Penn State uses Zurb foundation on top of Drupal

Eliminate content ROT was a goal

Determine content owner of every single page (still a work in progress)

Google Analytics Myths Debunked

  • Tie goals to revenue
    $1 goal value is not equal to $1 revenue
  • Behavioral segments are key
    per user goal value is more relevant than per session user value
  • Use google data studio to create custom metrics

 

Drupal logo that looks like a rain drop

2017 Pacific Northwest Drupal Summit

Drupal, Web Development

After a one year hiatus the Pacific Northwest Drupal Summit returned this year over the weekend of February 25-26. The summit rotates between Vancouver, British Columbia, Seattle, WA and Portland, OR. The reboot occurred in Vancouver and it was a great event. Held once again at the beautiful Simon Fraser Harbour Center the view from the main foyer was beautiful showcasing the snow capped mountains behind the busy harbour.

The two days had some great sessions, all of which are available for review on the session page, the mix of sessions was interesting. Certainly, there was a heavy focus on Drupal 8 but other sessions gave any developer decent breadth, such as Do you really need a CDN? and The Web of Tomorrow. Non-developer topics were also plentiful such as Creating a Culture of Learning and Community, Why it is good for business. Anyone involved in web/software development had ample opportunity to take home a few nuggets of wisdom or at a minimum, a new idea to mull.

It was interesting to see topics continue to appear as they are discussed at nearly every summit; automated testing, performance optimization, and decoupling Drupal. It just goes to show how much things change in the web development profession that these topics always carry weight.

Thanks to sponsors The Jibe and Affinity Bridge for hosting a great party at Commodore Lanes which was a relaxed environment to debrief the day and to make new friends. The six pin bowling was new to me and the establishment had pre-canned bowler names from the Star Wars universe which was  a lot of fun. Luke Skywalker, if he bowled, put up a decent score.

If you were on the fence about attending this year, mark it on your calendar for next year in Portland, OR. For the low registration cost I think it is hard to find a better value for a two-day conference. As the Drupal 8 adoption rate begins to climb the return on your time this conference delivers will be very hard to beat.

See you next year in Oregon!

Warning: LF would be replaced by CRLF fixed by dos2unix

git, Web Development

If you work with the version control system git, and you work with people that use a multitude of development environments and operating systems, you are bound to run across the warning, “LF would be replaced by CRLF.”

There are many ways to fix this, but my favorite is a utility called dos2unix. You feed the command line utility the file to convert and dos2unix does the rest. If you are using homebrew on the mac you can run

brew install dos2unix

Other operating systems support the utility as well, the Windows app store even has a dos2unix utility.

Once you have it setup you simply pass the offending file to the utility and then proceed on with your day.

dos2unix config.rb

You can pass it multiple files if you wish to do batch conversion. Once you receive no more warnings you can continue on with a git commit.

Adding a Javascript library to Drupal 8

Drupal, Web Development

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