Skip to end of metadata
Go to start of metadata

April 12, 2021

Views Cookbook - Advanced Recipes for Every Web Occasion

Covered:

  • Views build and render cycle
  • views hooks + real world scenarios
  • views plugins

Views Build + Render Cycle

4 stages: 

  • Pre-View Stage
    • the view object is just about the be processed
    • good time to add new arguments to the arguments array
    • modify contextual filters
    • switch the active display
  • Build Stage
    • View object is being processed
    • view is being constructed
    • query isn't built
    • displays are attached
    • by the end of this phase query is built and ready to be executed
  • Execution Stage
    • Query is executed
    • Array of results is constructed
  • Render Stage
    • Pre-render cycle - results are processed by handlers but have not been rendered yet
    • Post-render cycle - the output is rendered and the results are converted into markup

Hooks + Real World Scenarios

Pre-view Hooks

  • hook_views_pre_view()
    • Conditionally switch active display - if you have different filters based on the personalization settings you may flip displays vs alter filters because for performance considerations.
    • Update contextual filters - load values from user temporary storage or state, evaluate additional permissions based on the current user account object or pass a custom value based on the database query or any custom calculations.

Build Hooks

  • hook_views_pre_build()
    • Alter list of attached displays
  • hook_views_query_alter()
    • Add conditions, sort, grouping

Execute Hooks

  • hook_view_pre_execute()
    • Last opportunity to alter views object before query is called
  • hook_views_post_execute()
    • Has information about the results

Render Hooks

  • hook_views_pre_render()
    • Alter results prior to rendering
    • can be called from the theme
  • hook_view_post_render()
    • results are converted into markup objects
    • markup string can be manipulated with regexp
    • cache tags can be altered

Views Plugins

Views Plugins Types

  • Plugins - participate in views construction/creation process. They are responsible for wizard build process, rows, displays, pagers, chache and more.
  • Handlers - plugins that participate in the build process of the query object. They are responsible for filtering, contextual filtering, sorting, and relationships.

Field handler plugin

  • needs "@ViewsField" annotation that has plugin id
  • "[my_module]/Plugin/views/field" namespace
  • buildOptionsForm()- field options
  • render() - returns rendered markup

Field on a flat table that is not an entity, psuedo / computed field

Filter Plugin

  • "[my_module]/Plugin/views/filter" namespace
  • Needs "@ViewsFilter" annotation that has plugin id
  • valueForm() - filter form
  • query() - modifies query object
  • adminSummary() - summary for editors in Views UI

Custom date range filter, filter by computed properties

Sort Plugin

  • "[my_module]/Plugin/views/sort" namespace
  • Needs @ViewsSort annotation that has plugin id
  • query() - modifies query object

Natural sort, sort by computed values

Area Handler

  • "[my_module]/Plugin/vies/area" namespace
  • Needs @ViewsArea annotation that has plugin id
  • defineOptions() - default values for options
  • buildOptionsForm() - options form for editors
  • render() - Returns valid Drupal Render Array

Custom functionality in views header/footer.

Access handler

  • "[my_module]/Plugin/views/access" namespace
  • Nees @ViewsAccess annotation that has plugin id, title, help
  • summaryTitle() - text in the editorial UI
  • access() - custom access callback + logic
  • alterRouteDefinition() - additional permissions or role restrictions

Custom access logic for view displays.

Style plugin

  • "[my_module]/Plugin/views/style" namespace
  • Needs @ViewsStyle annotation that has plugin id, title, help, theme, display_types
  • defineOptions()- defulats for the options
  • buildOptionsForm() - plugin options form for editors

Custom style: tabs, accordions, masonry grid.


How to use GitLab to Enable Diverse & Cross-Functional Teams

Why it matters?

  • One platform for the whole team
    • Mange, plan, create, verify, package, secure, release, configure, defend

Using on platform allows for

  • Transparency into other team's work 
  • easier communication

Creating the Right Environment

  • Think about the non-engineers' experience
    • This can influence how you do a lot of things
  • Bring awareness to cross-cultural collaboration
    • High context vs low context speech
    • negative feedback tendencies
    • inclusive practices around remote work
  • Documentation is key
    • Establish a handbook-first approach
      • Handbooks document: values, history, teams, tools, etc. 
    • At Gitlab, "code owners" maintain each page
    • Enables a remote culture comfortable with asynchronous communication.
  • Onboarding and training
    • There are many types of onboarding
    • An onboarding issue template can be created with information like:
      • values and history
      • video recording of how to use tools
      • tasks that everyone should do
      • instructions for schedule coffee chats/meetings
      • tasks for specific teams

Tips and Tricks for Non-engineers

  • Lists with tasks
    • *[] - creates a fancy checkbox
  • Suggestions in code feature 
  • Design Management
    • these features allow you to upload designs and suggest ideas, thoughts and changes directly to the asset.
  • Project Management
    • Parent Epics
    • Child Epics
    • Issues
      • Issue Health and Expanding Sections

Dissecting Tailwind: A Design Tokens Tale

What are utility classes?

  • They do one very small thing that does one thing very well
  • Example : pt-4 is padding top: 1 rem

What is utility first?

  • utility first means no components, just utility classes
  • no "button" instead you use a button element with utility classes to style it

What utility classes are available?

  • tailwindcss.com/docs
  • Plus you can write your own

How are utility classes made?

  • taildiwind.config.js
  • specify a limited set of colors, breakpoints, spacing, fonts, font sizes

Run PurgeCSS tool on your tailwindcss

  • this tool scans your entire codebase and removes unused css classes

Tailwind claims your css grows slower

  • As you write newer CSS, fewer new property values enter the codebase. 
  • As you write more components your css will plateau and not grow exponentially

Bundling CSS vs Global CSS

  • Tailwind's global css is on every page.
  • Bundled css is only pages where it is used.

gotchas

  • Because there is on css file, source order is very important
  • purgecss cannot see dynamic class names
  • purgecss has to scan your twig files
  • you cannot enter whatever tailwind class inside Drupal content editing forms
  • Every drupal WYSIWYG class has to be in code (not css) somewhere

What are design tokens?

  • A limited set of colors, breakpoints, spacing, fonts, sizes, etc.

Search 50,000+ records in literally the blink of an eye

demo site: carsireland.ie

Typesense | Fast, typo-tolerant open source search engine

Chris Torgalson on Twitter: "1/9 Join us today at 2021-04-12 15:00 -0400 for our session "Search 50,000+ records in literally the blink of an eye" #DrupalCon https://t.co/ZOaJI5qi8f" / Twitter

https://t.co/FhxeWvSm29?amp=1


April 13, 2021

How Much Does a Content Workflow Cost?

Slides: 2021-04-SpatialPath-DrupalConNA-Cost-of-content-workflow - Google Slides

Workflow is more than a Drupal Module - Think outside the CMS.

A workflow process is the series of activities and tasks that need to be completed sequentially or in parallel to achieve a business outcome.

A process consumes input, performs transformation, and creates output.

Possible Workflows

Before the CMS

  • Content creation & approval - all types

Inside the CMS

  • Web media content publishing workflow - images, videos
  • Web document content publishing workflow - PDFs
  • Shared content publishing workflow - shared entities (blocks, taxonomy)
  • Content translation workflow - using all activities in CMS

Integrated with the CMS

  • Web accessibility testing workflow(s) - 508 / WCAG compliance
  • Translation via an external Translation Management System - input/output
  • DevOps workflow(s) - custom code and content
  • Content staging workflow - bundles of assets packaged from one Drupal site to another. 
  • Web content archival workflow - if additional requirements for compliance

Workflow and Process Basics

  • Keep it simple, include only essential items.
  • Use unique, clear, and plain-language naming.
  • Identify roles. Keep role names consistent across workflows.
  • Don’t overlap workflows. Prevent two conflicting tasks on a single item. 
  • Create “big picture” diagrams of workflow interactions.
  • Changing an existing workflow? Document the as-is for analysis.
  • Leverage process mapping practices for diagrams, to a point.
  • Keep user satisfaction in mind with process design. All roles.

The 5s Framework

  1. Sort - keep only essential items.
  2. Set in order - organize items in a logical way for workers to complete.
  3. Shine - proactive efforts to keep workplace orderly & clean with routine tasks. 
  4. Standardize - create standards for organization of items and and processes. Rules for how and when Sort, Set in order and Shine tasks to be performed. Schedules, charts, lists.
  5. Sustain - apply new practices and conduct audits to maintain discipline. Continue Sort, Set in order, Shine, and Standardize over time. 

Big Picture Diagram

Costs occur 100% of the time, Benefits do not.

Return on Investment

Concept: How much value the business gains, if any, from the investment made.

Challenges: Hard to enumerate workflow gains without data. Hard to enumerate costs.


Costs are everywhere

Initial costs

define, build, deploy, and train on initial process.

Ongoing costs

time and resources it takes to use and maintain the process.

Labor costs

fully burdened costs of a human’s time.

Transactional costs

translation, machine time (builds), automated tests

Specialty testing costs 

accessibility specialists, special systems or tools.

Legal costs 

legal review, litigation prevention, burden of proof 

Opportunity costs

benefits lost when working on one task vs. another.


Many Technologies that can be integrated into the workflow

  • Website and supporting database
  • Content Management Systems (CMS)
  • Translation Management Systems (TMS)
  • Digital Asset Management (DAM) system
  • Accessibility Management platform
  • Automatic Alt Text service
  • Integrated forms (Eloqua, Salesforce)
  • Real-time streaming
  • A/B testing tools
  • Personalization platforms
  • Continuous Integration systems
  • Design tools
  • Developer tools
  • Editing tools
  • Testing tools
  • People (legal, publishing)
  • And more!

Process Key Questions: 

  • When do you add specialty tasks (a11y, multilingual) to workflow? 
  • Who do you train? Internal roles? Integrated roles? Editors? Everyone?
  • Who is testing?
  • When do you test?
  • What are you testing? With what tools?
  • What is success?
  • How is the process tracked?
  • Are multiple stages of legal reviews required?

Content creation process key questions: 

  • Who updates content? Who reviews content?
  • What control does an editor have? Copy? Layout? 
  • What responsibilities do each role have?
  • Are some people combination of roles?
  • What is required for content approval?
  • How and when does content change?
  • Are editors trained in specialized services (a11y)?
  • Do content editors know heading best practices? Do they have the tools?

Prepare the team with education and goal alignment

  • Teach the full team about your specializations, and process definition.
  • Define expected content types, uses, and differences.
  • Define what compliance requirements to the project.
  • Prepare for workflow and process definition.
  • Prepare for technology selection. 
  • Prepare for full-process coverage deliverables. 
  • Document everything! 

Take aways

  1. Process is a good thing. Proactively managing issues before they become exponential in nature will save money, time, and team health.
  2. Costs are everywhere. Be informed and mindful to prevent unnecessary spend.
  3. Complexity is real. Mitigate complexity’s to manage costs and end-user satisfaction.
  4. Just start. You don’t have to be an expert in finance or process engineering, but you may need help from those folks along the way.


Continuous Integration and Delivery with Drupal

Bitbucket pipeline for dev ops? Look into this

Get started with Bitbucket Pipelines | Bitbucket Cloud | Atlassian Support

Platform.sh

Not free. At all.

GitLab

Can start for free - Set up Automated CI Systems with GitLab | GitLab

GitHub actions - Features • GitHub Actions

Tugboat - petems/tugboat: A command line tool for interacting with your DigitalOcean droplets. (github.com)

CircleCi can start for Free - Continuous Integration and Delivery - CircleCI

This is something we should look at, right now we do all of our CI by hand, but there are plenty of options to automate the process.


JS Web Components (Demo)

Component Module: Component | Drupal.org

Allows you to add web components (vanilla js, react, vue, etc) to Drupal so that they can be placed as blocks.

For instance, say we want to create a "block" for the library's hours.  We could use this to make a black that sends out the requests and has its own javascript and markup that is needed to render out the data.



What is Kubernetes

https://kubernetes.io/

Kubernetes is a portable, extensible, open-source platform for managing containerized workloads and services.

Over 1 million pull requests in the official repo. So very popular and very well maintained.

Kubernetes vs Docker?

  • Kubernetes is meant to run across a cluster while Docker runs on a single node.

You can install Drupal with Helm - a package manager for Kubernetes.


Approaching Developer Relations in an Open Source Community

Developer relations is a group of people and systems that exist to empower developers to do their best work.

This can included management, documentation, etc.

Developers are the core of every OS community.

Proper developer relations enables collaboration internally and between other communities.


Decoupling Drupal for Data

Decoupled Drupal is the future of Drupal.

sfusd.com/school-finder

Originally was built as a view but there was too much and too complex data that Drupal was limiting the interface.

They used Knockout js framework.

The view outputs static school data as JSON and knockout ingests and displays the data in a meaningful way.

This means no more page requests are made for filtering or calculations. Making everything very fast and lightweight.

Blog Post https://www.kalamuna.com/news/progressively-decoupled-drupal


Commerce Without Compromise

Development is not slowing down on Drupal Commerce.

There are a lot of new things on the horizon that are going to expand the capabilities of the platform.

Huge emphasis on privacy.

Expected to include support for decoupling in 2.x release.


Decoupling Drupal is Easier Than You Think

Drupal modules for gatsby/gatsby cloud.

Wonder if their will be support for other frameworks?

Decoupling does not require you tear down your entire site, you can do it piece by piece and as much and as little as you need.


Using Drupal's Layout Builder with Gatsby

Gatsby Cloud + EZContent Drupal Layout Builder

Easy UI for building web pages outside of just "adding content".

You can add in block, change the colors and other appearances.

Live Preview mode so you can double check your work before publishing to the live site.


Less Human Interaction, More Security?

We want auto discovery, patching and deployment.

Auto discovery

  • subscribing to security advisors is not automatic discovery
  • getting a slack notification on Security releases is not auto discovery
  • as long as there is a human aspect it is not automated

Auto Patching

  • if a human has to run a command it is not automatic
  • if you have to click merge on a PR it is not automatic
  • replace the part you would do by hand
  • keep your existing workflow (merge request and CI)

Auto Deployments

  • Github Actions
  • CircleCI
  • GitLab CI/CD
  • Bitbucket Pipeline

The Case for Web Components in Drupal Front-ends

You can use web components to create your own HTML elements

You can create your own components that can be used in any framework or vanilla markup.

A good example is https://www.ea.com/

Use web components to create a design system and then push the design system to an npm package and use it in all your projects.


Building a Google Like Site Search

Keyword search is the traditional method of searching but not what Google uses.

Leading search engines use multiple algorithms in one UI.

Three Key Data structures

  • structured knowledge graph (locations, events, products, etc)
  • semi-structured FAQs
  • Unstructured documents (blogs, news, product manuals, help articles, etc)