Stanford WebCamp 2019: A little kombucha and a whole lot of community doing good

the words Stanford Web Camp on a white background

There are exactly 3 events I try to make it to every year where I don’t have to get on an airplane. The first is me home camp, BADCamp. The second is the closet WordCamp to my house, in Sacramento. And the third is the one that let’s me list having lectured at arguably the most prestigious major university in California that is not part of the UC system. Visiting “The Farm” also is one of the rare chances I have to ride down the 280, amongst some of the prettiest backdrops of scenic foggy mountaintops I know about. As beautiful as the landscape is, the real joy for me was seeing so many amazing people and having so many great conversations at, what this time turned out to be the 10th anniversary edition of what was formerly known as Stanford DrupalCamp but is now: Stanford WebCamp 2019.

Food and Fun

Friday morning brought the coffee. It is also worth noting that on that morning the COHO Stanford Coffee House had pretty awesome vegan donuts. There was no provided lunch but plenty of options abounded in the student union, including a BBQ tofu from BBQ 101.

After the first full day of sessions we made our way across the Student Union to The Treehouse for en evening of fine craft beers, wines and a beautiful alcoholic version of kombucha, which was surprisingly refreshing. We also had some light snacks while there while we were catching up about life and such. It was honestly the best after party networking I have every been to at this event and it worth noting for this particular event that it went on until after 9:00pm!

Saturday was a repeat of Friday with coffee and buying my own lunch. For the record I at ate at The Treehouse again for this meal since they have a house made veggie burger. Quite good.

Sessions

Opening Remarks

Dos and Don’ts of Data Visualization for the Web
Deirdre Moore

Visuals and visual design are historically areas where I struggle the most. I like long lists of data and being able to sift the information myself in fun ways to find patterns. I often forget other people are not as thrilled with having to dance with such scenarios as I am. Having said that I walked away from this session inspired to try to look into visualization more when I am presenting information. Many of the charts I say, especially the animated charting ideas gave me a new perspective on others think of data sets and gave me some awesome ideas for being better at reporting some of my findings moving ahead.

Raw Notes:
Dos and don’ts
Why?
present Complex information
if they are not visually presented
Anscombe’s Quartet
as raw data no real patterns
statistical analysis shows similarities
but when chart/map it, becomes obvious
patterns emerge in new ways
import, tidy, (transform, visualize, model) -> communicate
import ->TIDY (where you spend the most time)
Data Dos
Clean
Complete
Current
Do make a title
put the point in the title
example of figurative map
pie charts
you don’t have a pie except for dessert
can’t tell what is what most of the time
do you use binary data? – good pie graph
Don’t distort the data with visualization
3d rarely helps
Bar Chart is the workhorse of charts
Avoid abbreviations when you can
Do you start your axis at zero
must for bar charts
Do/Don’t
Cut the Y-Axis
truncate on small movements and important
Small Multiples is good for outliers
stacked bar in small multiples good
pictograms
good for whole numbers but don;t overuse this one
Chart Resource Demo
Visual Vocabulary from financial times website
Data-to-viz.com
story data visualization
caveats
On Fonts
legibility is the goal
avoid fancy fonts
horizontal text when possible
testers with low vision
Data viz on the web
how?
an image with your viz
potential for user engagements
Accessibility
content must be
perceivable
operable
understandable
Robust
Do use Alt-Text!
be conside
don’t say it’s an image
link to machine readable file of the data
end with a full stop
Do Research color
color blindness colors
do use whitespace
interaction acceleration techniques
maps demo
mousing on to small dots
do tests for a11y
Test with screen reader
person with low-vision tester
viz interactivity responds to voice commands
run high contrast
use emulators
Make viz responsive
no control
Do/Don’t
Mobile First?
use analytics
what are people using
statcounter
mobile then desktop and tablet smaller
Flexbox
the it puts it in a grid
Do you use interactivity?
massive benefits
Animations to draw eyes to data
different visuals draw eye
awesome examples of animation
Do you need it?
in some situations are mandatory
it’s like chili sauce
if too much it is all people remember, but a little goes a long way
do use it sparingly
use CSS for transitions instead of JS or API
Audit a DV Class
there are 43 results in the Stanford course catalog for ‘data visualization’
Library has pragmatic workshops if you are on campus
Community!
you have a lot of knowledgeable colleagues, connect and learn together
Visualizing out of the box
Necklace from england, air quality over time
bracelet temp in Australia and rain
kitting to show commute
knitting in city council
physical bar charts
buttons
spark conversations
playdoh – #DayDohViz
How to cook a turkey
UN says data viz is needed for a sustainable future

Modernizing the Editorial Experience of a Flagship Campus Site
Eric Guerin
Jayson Jaynes

There was so much data in the talk I could not do it justice with my notes. Case studies reveal more than the technical implementation details, they reveal the amazing journey that every project actually represents. From stakeholder motives to end user worries, the tale of how we got from there to here, Drupal 7 to Drupal 8 in this case, is just fascinating to me. I love the fact that they acknowledged that one of the pieces, twig templating, was actually a struggle to learn, but one worth undertaking since the end result served everyone so much better. I love to hear tales of teams doing the hard thing to do the better thing and would love for others to also love this too.

Raw Notes:
Looking in the mirror
what works, what does not?
rising to the top
hidden in plain view
look at ME!
UCSF has awesome photos, but were not leveraging enough
Dude, where’s my site
servicenow as defacto point of origin
APO feed to update a-z list
Drush to make thum.io api integration – full screenshots of your site
moved to websites.ucfs.edu
search and filter easily
being classy on a budget
design to the rescue
hired HUGE inc to help
content creators know best
editors wanted flexible layouts and easier media handling
Tear down the wall
24 content types to 9
increased taxonomy a bit for better data management
using the round in that square peg
use what you want, when you want it, and making it up when you can’t
Liberal media, not fake news
26,000 media files, needed better search
title search
classification taxonomies
more demo
adding in columns to give editor more control
Media important because many editors and so many high density images caused page weight to go crazy
inserting full size images
extensible now
the editors fought it at first and then a lot of education later, they got it
Reduce and Reuse
out of box vs custom code
Wanted D8 since d7 retirement coming
upgrade to newest version of Drupal
wanted to simplify
7 root had 31 custom UCSF modules
306 contrib and custom modules on top
15 preprocessors
but easier than you think to move to 8
config management was way easier!
building at a lightning pace
made use of Media in Core
by relying on Twig templates, cut the need for custom hooks
but still difficult to learn, weird syntaxes, dealing with render arrays was a challenge
Responsive image sets to reduce bandwidth and lazy loading
Old site
275 contrib modules
31 custom modules
15 theme hooks
D8
144 contrib
10 Custom modules
10 theme hooks (much simpler too)
2 shakes and a sensible meal
out of box to the rescue with a little custom help
reducing complexity and relying on core
made the site earlier to maintain
reduced the barrier to entry
less code, less load!
old site, used Nodequeues a lot
wanted remove as much from DB as possible into display layer
panels, views, Nodequeues
much faster
themes are more semantic
alt-text is easier to access and enter
webforms can provide inline error messages
errors
d7 – 44
d8 – 6
warnings
42
26
Contrast issues
13
4
lazy loading really helped with speed
responsive
caching really helped
can reduce JS dependencies
refactor and reduce font sets
CDN images
Optimize views queries

How Drupal Enabled UC Davis to Help Syrian Refugees Regain Their Freedom
Carson Black

Sometimes I am reminded just how much actual impact web development can have and I get overwhelmed a bit. I had no idea going into this talk the effect it would have on me though, as I have found myself talking about it every day since as an example of what good we can actually do with all out ones and zeros and machines talking to each other over fiberglass and copper. The lives of hundreds of people have been impacted for the better thanks to the work of Carson and his team. I never do this, but if there was every a non-profit to think about donating to it would be the Article 26 Backpack Excellence Fund. Knowing the souls that made this a reality makes me feel very strongly this is the good fight.

Raw Notes:
Refugees have bad experiences
many die
Rights
human rights
in a backpack, wherever you go
in practice, people are discriminated against
backpack project
people lose docs
education is key, transportable skill
many people are education but have no way to find job
safe place to store information
What is backpack
Webapp with compartments, way to store important docs online
allows curation and sharing
mobile friendly
The Drupal hammer
multilingual
roles
jquery
easy theming
file handling
highly extensible
Contrib modules:
Me redirect module
Profile
Role Assign
User Protect
Video Embed Field – user videos uploaded to site
Entity API
User protect
UCDavis project
GDPR Article 26 – privacy
Article 26 Backpack sharing
Article 26 Redirect
Article 26 Compliance
Article 26 Profile
GDPR includes right to be forgotten
Drupal can be hard to forget all the files and info all the time
custom module removes ALL the files in the system
Backpack Sharing Module
creates 2 entities
Share – represents shared backpack
Share Item – selected items related to a specific Share
Form Controllers
Authentication for anon users
Custom access control handler: anon can view private files
Mailer
Demo shared backpack
Language?
Out of the box D8 Core made it possible
English first, then into Arabic and now Spanish
right to left switching of stylesheets
Process
Phases/Iterations
Sprints
Consultancy Scrum – learned that at a Stanford DrupalCamp
clear SoW
User stories from empowered product owners
dedicated Ps
Sprints
Automated testing
Docksal local dev
Pantheon hosting!
People
ID where client flexibility exists
Empowered Product Owner
Open communication between developers
Realistic evaluation of team member velocity
Opportunity to help others motivates
Outcomes:
Hundreds of backpackers
international attention – NPR all the way to Dreis’ blog
on time!
On budget!
Dr. Watenpaugh awarded Centennial Medal from the Institute of International Education
The Future:
French and Persian translations coming
Phase 3 – compass
API first initiative
Third Party credential eval by AACRAO
Academic counseling
Job placement assistance

Google Analytics 201
Andrew_Mallis

I almost didn’t include this one in the final blog draft as I was distracted by something completely unrelated and my notes are spotty at best. I really do enjoy listening to Andrew speak and love his ideas around visualization. While I see a lot of talks about Google Analytics at WordCamps, it is not all the time I see them at Drupal events, which even with the name change, Stanford camp still was this year. One of these days I am going to have to implement GA for real and when that day rolls around I am going to find this in my notes and rewatch this presentation.

Raw Notes:
Remembering how he got here
to Stanford
and how we got here as a community
is important to seeing the future
I am not your Guru
he learned it all from Vadim
–distracted–
Driving change through data
Why do people want a website
to do a thing, download a thing, get info, buy a thing
Users, Sessions and Pageviews
Person
trip to a mall
store
user
session
pageview
Session
GA has no idea how long they are on your website from the last page
session duration is strange
user intent is hard
Goals help measure campaign success
Solutions gallery
Bounce rate
excluded from other time based metrics
Master view and filter view of same page
–distracted – notes missing —

Plan for Drupal 7/8 End of Life Now Before it’s too Late
Dan Harris

Dan’s time slot moved and the presentation got off to a later than planned start and there were technical issues along the way. Though my notes are brief, there was a lot of information shared and performing a web search with any sentence from my notes along with the word Drupal will provide much reading into some fascinating areas. Especially around JSON:API and Layout Builder. The opening quote though is something I will be quoting for a long while to come, at least until Drupal 9 actually comes out.

Raw Notes:
Drupal 9 in coming, it is like the winter but it is not going to suck
D9 timeframe
just D8 without deprecated code
Your D8 experience might be messy depending when built
CKEditor in 8.7 is so much better than it used to be
layout builder is amazing
Layout builder is the single biggest leap he has seen
Dreis demo from DrupalCon of Umami
JSON:API for decoupled/Headless
in core
Drupal Workspaces
editing workflow, staging built in
workflows module multilingual is awesome!

Six of One, Half-Dozen of the Other: Metrics for Your Devs and Ops
John Bickar

When someone talks about doing things at scale, I sometimes hear them talk about dozens or hundreds of sites. But when you hear 2000 sites, there is just more gravity to the situation. Especially when the person speaking is responsible for the health of those sites. Ultimately this talk about about understanding metrics beyond uptime to measure the health of sites and services. Pure gold here in terms of talking about scalable systems that could make the basis of a whole book.

Raw Notes:
Pictures of dogs!
he manages Stanford site platform 2000 sites
responsible for the health of the service
that echoed louder
Service metrics, fitbit example
maps the why and how of how to measure things
map to business objectives
how we know we are being successful
what he cares about
* Security
* stable
* performant
* scalability
* reach
* a11y
* Business Continuity
Service metrics
tracking week over week to see better or worse
metric month over month
target vs goal
uptime example
Security
* Drupal security updates (quantity) (out of their control, but important)
* Drupal security updates (time to mitigate or patch)
last patch was 3.5 hours total for system
* SSL Labs Reports (quality, but cost benefit to improve? Is it worth it?)
Stability
* statuscake checks every 5 minutes for uptime
99.90% is good enough, not critical services
cost/benefits?
costs go up for every 9
Speed
* StatusCake again
Scalability and business continuity
no direct way
one example, moving from on prem to the cloud
99% there now
Reach
tracks how many personal sites
and number of group/dept sites on ACSF
growth per month
3.3%
2.6%
Ally
AMP
still an area to improve
a team of 17 people, what they all do?
5 devs
2 site builders
5 or 4 UX people
a Customer experience
Director
number of PMs

Communication 1: Understanding How we Succeed or Fail
James Smith

If I wrote non-stop about how just genuinely nice James is as a human being for the next few weeks, it still would fail to explain how much admiration I have for the man. Early in my life as a public speaker, his encouragement meant the world and it still does. Part of why I think I like him as a human so much is how well he communicates and how much attention he pays to the process. We are indeed fortunate to have him share his process and thoughts on the communication cycle. If we can listen and acknowledge the noise that necessarily happens, we can overcome so many hurdles in our lives. While about communication I would argue this session was really about life skills and how to be better members of a civil society. If you are eager to hear what I am talking about, no need to wait, hear him on Drupal.tv right now.

Raw Notes:
Communication skills
a conversation we need to have
1. Communication can be intentional or unintentional
2. it’s impossible not to communicate
communication is irreversible
is unrepeatable
minor differences, body language, etc are not reproducible exactly
reductionist view of communication
reduce to the simplest parts
Tool 1
What does a communication transaction look like
transactional model of communication from the 60’s
Sender/source -> receiver ->
encode -> channel of communication
decode -> receiver
<-feedback <- response
(Feedback loop)
fields of experience
things outside out knowledge or the receiver
don’t know how much they don’t know it
the real danger is the edge where they think they understand but they don’t
and then you don’t and miscommunication
7 edges of noise
Noise is unwanted signal
Internal = our thoughts
External = environment
Semantic = our reactions
can speak at 200 words per minute (max)
you can think at 2000 words per minute
every sense absorb data at 400Billion per second
can not be stopped
every second brain processes that to 2000 bits of information
brain models the wold around you all the time
noise can not be avoided because you create it yourself in your brain
words have usages not meanings
dictionary are histories not definitions
“That’s bad” or “That’s wicked”
Napkin at dinner – diaper in England
think about it, we live in a practicable lab all the time
testing things in low pressure often
We are meaning machines
your brain’s job is not to tell you what is, it’s job is to make rational model where you can be comfortable with the inputs
reference to experiences you have had
more meaning for yourself, something is ambiguous
client vs dev, hard to get them across that gap
back to the model, new picture
when you say you didn’t understand
they will raise voice, get louder
if you ask for the last 3 or 4 words, you get a different reaction
paraphrase and mirror
builds rapport, improve the communication loop
Communication rules
Responsibility is on the SPEAKER
when you can’t communicate, STOP!!!
This only guarantees that you will be ‘clear’, Not that will get what you “want”
2 – Best communication tool
7% of language is verbal
38% is tone
53% body language
Mehrabian is misquoted
that was research for English and how emotion is measured
this is not true for other languages
and varies a lot
can’t put hands over your ears and understand a lecture on physics for instance
but still super valuable
need engagement in communication process
the 7% reminds us to pay attention to other things
that’s right vs you’re right
we want to hear “that’s right”
that shows engagement
Take aways
active feedback loop
active listening
email phone in person 55/38/7
be aware of noise
be self-aware of ambiguous communication
know the communication rules

My Talks

Making A Tour: Leveraging The Tour Module For A Better User Experience

Sometimes you feel the whole room with you and know that what you are saying is a good thing to have said. That small room with the 25ish people there made me feel very welcome and very appreciated as I laid out a case for Tour as a better way to interact with any user that can use the navigation bar, which is any user it turns out. Imagine having a built in tutorial for every page on your Drupal 8 site. This is the reality that Tour module gives us. I feel so overwhelmingly happy to get to share this good news and to hear the potential use cases people come up with once they know the tool even exists. Special shout out to Kelly Albrecht who inspired me to do my own talk on the subject after his inspiring talk at Texas DrupalCamp 2018

Learning Markdown: 20 minutes that will change your life

As you might know, I write my blog in Markdown and I honestly don’t know why more people do not. I have the strange belief that it is pretty easy to learn a new thing like Markdown, which is just a shorthand for something I think we should all know, which is basic HTML. I say strange belief because while I am in fact confronted often with people who don’t like to learn anything new, I still cling to my belief that a better tomorrow is just around the bend if we just adopt some already existing but slightly tricky to learn technology. This talk is pretty close to my dissertation on this belief and I am proud to have good feedback from the few times I have been fortunate enough to give it. I also learned about in the process, a possible better route to editing github files which I am exploring deeper after having just learned about it.

Wrapping up

While not the biggest of the events I attend, it might be the one with the biggest heart. The organizers of every camp care deeply and it is not any form of a competition, but to see the Stanford crew pull together so tightly and force-of-will this event to happen for the last 10 years, it’s the stuff the OSS community is made of. Every time I visit the amazing campus and get to lecture in those hallowed halls, I count myself lucky. I can’t wait to go next year for the 11th installment of Stanford WebCamp 2020!

Leave a Reply

Your email address will not be published. Required fields are marked *