Category Archives: Web Development

HighEdWeb 2017

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

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

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

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