BADCamp 2018: Learning while having fun

BADCamp 2018 just wrapped up last Saturday. As usual it was a great volunteer organized event that brought together all sorts of folks from the Drupal Community.

Every year Kanopi provides organizational assistance, and this year was no exception. We had Kanopian volunteers working on; writing code for website, organizing fundraising, general operations planning, assisting as room monitors, and working the registration booth.

An event like this doesn’t happen without a lot of work across a lot of different areas and we’re very proud of Kanopi’s contributions.

Personally, Kanopi was able to send me down from Vancouver, Canada to spend time doing a day long training course, as well as doing the regular conference summits and sessions.

The course I chose was “Component-based Theming with Twig” which was really informative. We covered the basics Pattern Lab and then worked on best practice methods to integrate those Pattern Lab tools in to a Drupal theme.

Some of the takeaways:

  • The Gesso (https://www.drupal.org/project/gesso) theme is a great starting place for getting Pattern Lab in to your project.
  • Make sure you are reusing all your basic html components and make the templates flexible. Resist the urge to simply copy and paste markup into a new template.
  • The best way to map Pattern Lab components in Drupal is to use Paragraph types and their display modes.
  • To get the most out of Twig template, make sure you are using the module Twig Tweak (https://www.drupal.org/project/twig_tweak)

For the regular conference sessions, the most interest seemed to lie in the possibilities of GatsbyJS (https://www.gatsbyjs.org/). All the developers with whom I spoke are focused on the performance and security perspective, as it can be completely decoupled from Drupal, allowing for fewer security issues. One interesting talk on Gatsby was this one by Kyle Mathews.

Kanopi was also fortunate enough get four sessions selected:

All in all BADCamp 2018 was a great experience. It’s terrific to meet our distributed co-workers as well as see friends from other parts of the Drupal community.

Meet Us in St Louis for WPCampus

For years, Kanopi Studios has been helping the higher education community create better online experiences for students, alumni, faculty and other audiences. It’s one of the reasons we’re excited to be attending the WPCampus Conference this weekend in St Louis! We’re thrilled to be able to share our love and expertise for WordPress, as well as hear how schools are combining best practices with creativity to create interesting and effective digital work.

Kanopi’s own Katherine White will be giving a talk on Saturday, July 14th about  Documentation For Developers. Whether a developer likes to document their work or not, Kat will explain why documentation is critically necessary throughout a website’s growth — from initial development through to ongoing support and enhancements — and demonstrate how you can produce meaningful documentation that both supports the code and sets it up for success once it sails out into the world.

Can’t make it to WPCampus in person? No problem. Click here to watch the live stream.

Date: Saturday, July 14, 2018
Time: 3:30 – 4:15 p.m. CDT
Location: Simon Hall 122

Kanopi at Design 4 Drupal’s 10 Year Anniversary in Boston

Nestled right off Main Street in Cambridge, Massachusetts lies the Ray and Maria Stata Center on the campus of the Massachusetts Institute of Technology (MIT).  This abstract building designed by Pritzker Prize-winning architect Frank Gehry was the perfect venue to house the longest running, front-end focused Drupal conference in the US, Design 4 Drupal.  It demonstrates that the modern and abstract design Cambridge and MIT has seen can work perfectly with the structure needed within.

Image of sculpture at MIT that spells out "MIT" in metal, from the at Design 4 Drupal conference.

The Design 4 Drupal conference highlights training sessions and seminars focusing on designing for, and building the “front-end” of websites, or what gets seen and used by end users.  This area of focus encompasses graphic design, user experience, accessibility, performance, tooling, and much more.

Like a lot of our Higher-Ed clients, MIT is a user of Drupal, and is proud to offer this space to the Drupal community to learn and share knowledge.  I was pleased to be asked to present two sessions at the conference, and even more pleased with the knowledge I was able to take away from attending the event.

Meta and Schema: Defining the Content about your Content

The first session I presented focuses on designing and implementing a metadata strategy for your website.  Metadata is the content that describes your content. It is very important in how web pages are found in search engines, and how they are displayed on social network sites.

Image of Jim Birch's presentation in a large classroom with a projector screen at Design 4 Drupal

The presentation is a deep dive into the different specifications for meta tags and Schema.org schemas, how to decide what to markup, and then how to text and validate that you’ve done it correctly.

This session was not recorded due to technical difficulties, but the slides are available at jimbir.ch/meta-schema-drupal

Building a Better Page Builder with Bootstrap Paragraphs

The second session presented reviews the Bootstrap Paragraphs module for Drupal 8 that I developed and how it combines the power of the world’s most popular front end framework, Bootstrap, with Drupal Paragraphs, the powerful module that allows content creators to build layouts and structured pages using content components.

I have been working on this module since I first presented it at the BADCamp 2016 Front-end Summit.  The module installs a suite of components that allow content creators to quickly build out pages.

I love giving this presentation because I always get great feedback from people who use the module; who are going to use the module; or who are going to use my methodology to create their own version that fits their specific needs.  The module currently has over 25,000 downloads, and has had users from all around the world.

You can watch a recording of the session here.

Need help designing your website? Contact us and we can help

The Keynotes

The Building Blocks Of The Indie Web – Jeremy Keith

The conference featured not one, but two great keynotes.  On the first day author and developer Jeremy Keith, who was also in town for An Event Apart Boston, presented a session in which he encouraged a return from social media publishing to independent publishing.  It was a great reminder that the web was ham radio before it was cable, and can still be so.

Exploring the New Drupal Front-end with JavaScript – Dries Buytaert

The second keynote was given by founder and project lead of Drupal, Dries Buytaert.  Dries was the keynote at the very first Design 4 Drupal, so it was a special treat have have him back for the tenth anniversary.  His presentation reviewed the history of JavaScript on the web, API-first vs. API-only approaches and gave behind-the-scenes insights into Drupal’s JavaScript modernization initiative.

Design 4 Drupal Sessions

Thanks to Kevin Thull, and the organizers of Design 4 Drupal,  most of the presentations were recorded and are available to anyone at Design 4 Drupal’s YouTube channel.  There was a broad mix of different types of sessions that covered developers, designers, User Experience (UX), Accessibility (A11Y), and Tools.  Below are some highlights of the sessions I went to.

Web Accessibility Tips and Tools – Abby Kingman

Abby gave a session that was near and dear to my heart.  We are always learning about how to make our websites more accessible, and Abby’s presentation covered where to find current guidelines and specifications, and then when onto to review tools for testing.  There are lots of great links to follow from this one.

This session validated the approach we take at Kanopi to accessibility in design and development.  A lot of the tools and testing techniques were all part of our processes, and I look forward to exploring the ones I didn’t know about!

Webform Accessibility – Jacob Rockowitz

Jacob is the current maintainer and a prolific blogger and thought leader in the Drupal-sphere.  We penned an article in advance of this presentation where he reviewed his thought process, and recorded his presentation.  My favorite takeaway from this presentation was:

“Learning about accessibility can be overwhelming. We don’t have to be accessibility experts. We just need to care about accessibility.”

Kanopi has a long history of both building new and retrofitting existing sites to be WCAG compliant.  This presentation showed me that our approach, ongoing learning and iteration have us on the right track.

Variable Fonts and Our New Typography – Jason Pamental

I’m a big fan of Jason’s body of work, from his book, Responsive Typography: Using Type Well on the Web, to his blog, and frequent appearances on the Talking Drupal Podcast.

Jason’s deep knowledge of typography truly shows in this presentation that gives a brief history of type, how it moved from paper to the screen, and how the future of digital typography will be with variable fonts.

I look forward to exploring more about variable fonts with the designers at Kanopi.  The design possibilities, and the performance gains make these new tools very attractive.

Building a Living Style Guide with Herman – in Your Sass! – Chris Wells

In this technical presentation, Chris Wells, CTO of Redfin Solutions gave a nice overview of Herman, which uses SassDoc to reads comments in your stylesheets to build a static website  that is your style guide. It is not as extensive as a full blown style guide like Pattern Lab, but can be very useful for smaller teams.

This presentation has me researching simple style guide solutions.  Not every project has the budget or need for a solution like Pattern Lab, but since I already try to comment style sheets and templates, it makes sense to do it in a way that something like Herman or KSS Node can parse.

Thanks Design 4 Drupal!

Thanks to all of the volunteer organizers, especially Leslie Glynn, who was my point of contact before, during, and after the event, and in true New England fashion, made sure I took home some famous Boston cannolis for my mother.  Kanopians help organize a few different conferences across the states including BADcamp and MIDcamp, and we know putting on these conferences is a labor of love, so thank you!

Join us for NTC WordPress Day in New Orleans

Painting of New Orleans at night

At Kanopi Studios, we love WordPress! And we love working with nonprofit organizations. That’s why we jumped at the chance to be the lead sponsor and organizer of WordPress Day, a pre-conference event at NTC 2018 on Tuesday, April 10th in New Orleans..

We’re excited to share an interactive networking and learning event with the WordPress nonprofit community. WordPress Day will feature expert-led, small group sessions where attendees can come with a challenge and leave with a solution. We’ll also hold workshops throughout the day on three tracks: strategy, content and technology.

Sessions will be geared toward all levels of experience and technical expertise and will cover everything from project planning and stakeholder management, to storytelling and content strategy, to UX, design and development best practices and even the latest and greatest developments in the WordPress community.

If you lead or manage WordPress websites at a nonprofit organization, we hope to see you there!

Learn more

Take action

Structured Data: Architecting SEO Magic

I am fond of saying that I love to “put things in things.” I am a serial organizer, who can’t go anywhere near a Container Store. By trade I’m an architect, which means organizing and structuring information into logical constructs. In this regard, my brain is a lot like a search engine; seeking comprehension through pattern identification. There are patterns you’re probably familiar with if you think much about SEO. The order of your heading tags, for example. But one you may not be as familiar with is structured data.

“Structured Data” is best defined as schemas that are used to describe the contents of a web page. You can think of a schema like a highly structured form you fill out. On a form, you have a series of labeled fields and you fill in a snippet of information next to each one. Your first name, your last name, your address. Structured data does this with blocks of information on your web pages.

This concept was developed by the major search engines — Google, Microsoft, Yahoo, and Yandex. The schema are all available on Schema.org, the de-facto standard for using structured data. By using these patterns, search engines are more easily able to parse, rank, and understand your content. And because they have so much more information about what your page contains, they’re better able to serve it in rich placements right within the context of their results pages.

Schema are implemented in a variety of different technologies. There are three major ones in play.

Microdata – this is the format originally used on Schema.org. Microdata feels a lot like regular attributes in your HTML. You apply it in the context of the markup already in your page. If you can’t read HTML, you’ll have a hard time understanding and debugging Microdata.

RDFa – RDFa feels very similar to Microdata, but it is XML flavored. Again, it’s inserted in the markup that already exists around your content. And it’s equally difficult to make sense of it if markup isn’t your thing.

JSON-LD – This is the new kid on the block, and it has a lot going for it. As a JSON-based format, it’s an object that lives outside the context of the content it’s defining. It can easily be injected into your document. While it creates a little redundancy and is dissociated from your content, it’s much easier to insert into an existing project, and it’s easier for a human to read.

Not all the schema are created equal when it comes to SEO. Search engines care more about some of them than they do about others. And not every search engine has adopted JSON-LD as of this writing – for example, Bing doesn’t technically recognize JSON-LD (although they actually do seem to be parsing it in some limited contexts, like recipes). And while Schema.org has detailed notes on what information is “required,” search engines may be looking for different things. Google provides a great introduction to structured data coupled with a Structured Data Testing Tool that are hugely helpful if you want to get started with how to best leverage schema on your site.

All that said, if you’re just getting started with structured data, I’d recommend implementing with JSON-LD first. It’s the emergent standard and ultimately the easiest option to maintain.

Want to talk with one of our experts? Contact us

Working with structured markup and JSON-LD in Drupal or WordPress

For Drupal, check out the Schema.org Metatag module. It’s still pretty new, but the contributors have done great work here. I’m excited to see where it goes. Drupal Core ships with RDFa support, which is fantastic! But it isn’t mapped to Google’s expectations, and extending it ends up getting you into custom code pretty quickly.

For WordPress, check out the Schema or Markup plugins. They support slightly different schema out of the gate, so one or the other may be optimal depending on your needs.

A deeper look

I gave an overview of Structured Data at BADCamp 2017, introducing these concepts and talking about what’s available for use when you’re building sites in Drupal. Feel free to take a look. I’d love to hear your thoughts and feedback, and to find out how structured data is working for you and your organization. And if you need our help with your data, contact us.

We’re gearing up for WordCamp US 2017

Audience learning from a speaker at a conference

The Kanopi team is headed to Nashville in December to attend and sponsor WordCamp US 2017! We are busy packing our bags and researching the sessions we’d like to attend.

Here’s what has us most excited, and why.

1. Some of the very people who made WordPress possible will be speaking at this year’s event. We are beyond excited to hear from Matt Mullenweg, WordPress co-founder, and Andrew Nacin, lead WordPress developer.

2. Our very own Director of Engineering, Katherine White, will lead a session on Documentation for Developers. She’ll share advice on how to write just the right amount of documentation to set your code up for success without going crazy.

3. We’ll learn about the inner workings of the Customizer JS API from Weston Ruter, including how to use React to build custom controls and how to preview changes to sites that use React-based themes.

4. We’ll be ready to conquer continuous integration and deployment after hearing from Tessa Kriesel who will teach us the ways of yml and script files.

5. We’re looking forward to Nathaniel Schweinberg’s overview of how to move a WordPress site from a single-server setup to a scalable, highly-available infrastructure on AWS.

We can’t wait to apply the insights and learnings from WordCamp US 2017 to our day to day work and to share more details here on the blog. Stay tuned!

What I learned at BADCamp 2017

Each year, BADCamp spotlights amazing talent in our industry, featuring dozens of high-quality sessions by talented individuals, including greg.1.anderson, webchick, robbayliss, jmolivas, and our own annabella, to name a few. The event helps all attendees connect with new ideas to up our development game. I had many favorites over the four-day event that included both sessions and trainings.

Automate Your Automation presented by greg.1.anderson was a huge favorite of mine. As a developer in a DevOps role, I loved learning about the time I could save by completing tasks in an automated fashion or allowing a robot to handle them for me. Greg shared some basic automation examples using familiar tools like github, circleci, and composer.

The session spoke to me personally and hit on a number of key points I have encountered in my own work, for example:

  • Manual work is prone to error
  • Repetitive work can become boring and tedious.
  • Automating tasks makes them more reliable and repeatable

Working at Kanopi, we are always trying to find ways to maximize efficiency and results for our clients. For example, it would be great to be able to automate common tasks like Drupal and WordPress updates to make them quick, efficient and accurate. Greg helped me think about ways that we could start to make this happen.

Another favorite at BADCamp 2017 was hearing volkswagenchick’s talk: Dred(itor) the Issue Queue? Don’t – It’s Simple(lytest) to Git in! Their session touched on getting involved in Drupal.org’s Issue Queue, including helpful tools to use and all the different roles that are needed. You don’t have to be a developer to help test bugs! In fact, even the least technical person can still help out.

Lastly, I enjoyed seeing webchick’s presentation about Drupal 9 and Backward Compatibility. She provided a much deeper dive into Dries’ DrupalCon Baltimore Keynote, sharing how much easier it will be to go from Drupal 8 to Drupal 9 then it has been in the past, which is great news for all of us! Previously, going from one major version of Drupal to another has been significantly harder, but that will no longer be the case. I was also excited to hear about some of the new initiatives that are planned, such as Migrate UI, Media, Layout, API First, and Automated Updates.

I was proud to be a part of the organizing team for BADCamp 2017. It was my first year, and the event blew all of my expectations out of the water. I hope to see even more Drupal Community members in Berkeley for BADCamp 2018.

Best of BADCamp 2017

BADCamp is more than just a conference. It’s an amazing, supportive community where connections are made with ease, everyone brings an enthusiastic desire to help each other grow, high-quality training is offered for free and the after party rocks all night. BADCamp 2017 was no different.

Each year, Kanopi Studios sponsors and organizes BADCamp as a way to give back to the Drupal community. We had so much fun getting together as a team and sharing knowledge to help attendees make their website projects successful. 

A few highlights from BADCamp 2017 included:

We’ll be putting together a series of blog posts to share some of our favorite BADCamp 2017 sessions with you over the next few weeks.

In the meantime, videos are posted on the BADCamp website. Just use the event schedule to find the session you are interested in, and click in to see the slides, along with recorded audio from the speakers.

We hope to see you at BADCamp 2018!

TexasCamp 2017 Retrospective

The Texas flag with a Drupal drop instead of a star, and the Texas Camp 2017 sign hanging from a ceiling


“You may all go to hell and I will go to Texas.” ~ Davy Crockett

The slogan for TexasCamp 2017 didn’t pull any punches, and the event didn’t either! Growing to 200 participants in only its second year, the three-day TexasCamp in Austin went off without a hitch. (Get it? Texas? Horses? Hitch? Okay… never mind.) Kanopi Studios was privileged to not only be a sponsor of the camp, but be active contributors to its success several ways. Our own Caryn Eaton was one of the core planning team members involved in the organization and execution of TexasCamp, handling the program selection, scheduling and on-site coordination. Will Jackson and Katherine White both presented talks at the event.

Despite manning the sponsor table along with Jessica Skewes, talking Drupal with a ton of amazing folks, partying on Rainey Street, and eating lots (and lots and lots) of tacos, the Kanopi team managed to attend a number of the excellent sessions on offer.  For those of you who couldn’t make it, here were our favorite talks (including our own 😉 ) and our biggest takeaways from the event!

————————

Kanopi Session: Docker in a Flash: Introduction to Drupal Development with Docker

This was the third iteration of the of this session that Will Jackson, Kanopi’s Senior Support Developer, has presented at camps across the country.  New additions this time around included an introduction to Docksal, a command line utility for creating and managing Docker-based development environment solutions.

Session attendees were engaged, asked great follow-up questions, and were genuinely interested in learning about various solutions available for managing Docker environments

Will always loves nerding out over Docker, so if you see him at an event, don’t be afraid to strike up a conversation!

Kanopi Session: Documentation for Developers: How to Plan for posterity and not go insane

As an agency that works extensively with both medium- to large-scale website development projects and support clients, Kanopi sees both sides of the developer documentation equation: the “we don’t have the time/budget to write it” and the “it will cost more to support the site because there’s no documentation to work with.”

This talk by Kat White, Director of Engineering, focused on a simple path to better developer documentation — keeping your documentation with the code in text-based markdown files that cover everything from high-level purpose and usage to installation and local setup instructions to deployment notes and technical architecture. Documentation makes you a better developer, a better writer, and a better member of the open source community.

This was the first time Kat has presented this talk (and it required Will’s help to get through it since she lost her voice), and the Q&A afterward was enthusiastic and engaged. Kat is looking forward to extending and refining based on the questions and feedback, so look for the next version of this talk soon at a camp near you!

Other Awesome Sessions We Loved:

Automatic Drupal Updates using Visual Regression

This session detailed an approach for maintaining automatic updates for Drupal based websites.  The approach described using Visual Regression testing, as a means to consistently review visual changes to ensure that updates were applied successfully and without error.  For more advanced websites, additional tests are also recommended as not updates can be tested visually.  Such tests could include Behat or PHPUnit tests, to ensure that site-critical functionality remains in-tact once updates have been applied.

This session reinforced our belief that providing automatic updates is definitely an attainable goal. The level of effort to provide such a service will vary between each site, and site-specific tests will need to be developed for every site where you intend to provide true “worry-free” automatic updates. But it’s well worth the upfront investment to get this right to ensure that supporting your website and ensuring its security is a smooth and efficient process.

Applying Design Thinking Methodology (Parts 1 & 2)

This was Caryn’s favorite session — not only because of the fantastic user experience tools and tips that were discussed, but because these tools were then applied to a real-world scenario — a guerrilla UX working session focused on TexasCamp attendees which yielded fantastic insights for the camp organizers.

The working session included real UX brainstorming around the motivations of camp attendees overall, mapping the user journey of the thought processes and decisions that lead attendees to come to camp, and worked through the experience mapping of 3 major personas distilled from camp attendees.

From Kanopi’s perspective, we were excited to see such a strong synthesis with our own internal user experience process and deliverables. It’s always great validation that others are seeing positive results using similar approaches; it helps us know that we’re on the right track and in good company, producing the best results for our clients!

————————

A happy woman and man using laptops at a table, surrounded by happy, chatting camp attendees.
Kanopi’s UX Designer, Caryn Eaton, helped plan and execute Texas Camp.

As a fully distributed organization, it is always special when members of the Kanopi family meet for the first time.  Put that on top of a great event like TexasCamp 2017 and you can’t beat the remote work lifestyle!

Thanks, Austin, for the hospitality. We’ll see y’all real soon!

YEE-HAW!