April 12, 2021
Views Cookbook - Advanced Recipes for Every Web Occasion
- Views build and render cycle
- views hooks + real world scenarios
- views plugins
Views Build + Render Cycle
- 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
- 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.
- Alter list of attached displays
- Add conditions, sort, grouping
- Last opportunity to alter views object before query is called
- Has information about the results
- Alter results prior to rendering
- can be called from the theme
- results are converted into markup objects
- markup string can be manipulated with regexp
- cache tags can be altered
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
- "[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
- "[my_module]/Plugin/views/sort" namespace
- Needs @ViewsSort annotation that has plugin id
- query() - modifies query object
Natural sort, sort by computed values
- "[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.
- "[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.
- "[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.
- Establish a handbook-first approach
- 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
- 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?
- Plus you can write your own
How are utility classes made?
- 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.
- 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
April 13, 2021
How Much Does a Content Workflow Cost?
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.
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
- Sort - keep only essential items.
- Set in order - organize items in a logical way for workers to complete.
- Shine - proactive efforts to keep workplace orderly & clean with routine tasks.
- 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.
- 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
define, build, deploy, and train on initial process.
time and resources it takes to use and maintain the process.
fully burdened costs of a human’s time.
translation, machine time (builds), automated tests
Specialty testing costs
accessibility specialists, special systems or tools.
legal review, litigation prevention, burden of proof
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!
- Process is a good thing. Proactively managing issues before they become exponential in nature will save money, time, and team health.
- Costs are everywhere. Be informed and mindful to prevent unnecessary spend.
- Complexity is real. Mitigate complexity’s to manage costs and end-user satisfaction.
- 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
Not free. At all.
Can start for free - Set up Automated CI Systems with GitLab | GitLab
GitHub actions - Features • GitHub Actions
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.
What is Kubernetes
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.
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.
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.
- 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
- 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)
- Github Actions
- 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)