Design4Drupal 2018: Views from the top floor and walking further than we needed to while a good time was still had

I always consider The Olde Towne one of the iconic American cities. By this I mean that if I go to Serbia or Iceland and talk about cities in the US, people always know San Francisco, New York, LA and Boston. They have a picture in their heads, and with good reason, of some of the oldest buildings, some of the oldest bars and some of the more famous landmarks in this country. It was quite an honor to go be part of the magic of old bean town as I accepted the invitation to speak at Design4Drupal 2018.

Food and Fun

Wednesday

Coffee and snacks and tea were still being set up when I first arrived. But when I finally was able to get some coffee it was actually pretty good for college catering. I think that because there was an open Starbucks in the building they knew they should step up their game. Lunch time rolled around and us special meals folks were treated extremely well. I had a pretty amazing ‘Cobb’ salad with beets and avocado. Even the afternoon snacks had a vegan section what was more than just fruit.

There was no official party or goings on on the first night. This let me catch up with some of my favorite Drupal community members who also didn’t have official other plans. We found a BBQ joint with a reasonable set of veg options and a great mixologist on staff, The Smoke Shop.

Thursday

Very much a repeat of the previous day. Again huge props to the organizing team who really looked out for us with dietary restrictions. Very notable fact, the catering thought that small whole cakes would be a good decision for some reason as snack. I got a good chuckle out of that.

After Party

We gathered at Meadhall in Cambridge for a very fun evening of snacks and beverages and fellowship as a community. No tweets that actually showed the party and the venue in full swing can be found, so here is a sample tweet about the venue.

Yes, we also found some time to do DrupalKaraoke. THanks to the good people of Courtside for letting us celebrate area man’s birthday with y’all.

Friday

Friday was Sprints and Training Day. We had coffee and snacks abounding and lunch even offered up vegan pizza and a pretty healthy salad option.

Sessions

Opening Remarks

10 Vital Lessons For Running A Successful Digital Agency
MaryAnn Pfeiffer

MaryAnn is the kind of shop owner I hope other shop owners are paying attention and learning from. This talk is a no-nonsense look at very practical aspects of running a business. I really loved her approach of laying out the advice, then explaining how she came be believe this and the data behind it. I highly recommend this one if you are running a business of any kind.

Raw Notes:
Her 4th year here
goal is to help save you some time and effort and void mistakes she has learned the hard way
not a coder, pre-internet marketing
marketing communications
personal intro and polling audience
1. Begin with the end in mind
lawyers are better on the way in than on the way out
making sure you get paid for your work and work is not stolen
keep things professional
she learned from a client she had been working with for years
her work was stolen by an advisory board, went to court
2 years
another client who had signed a contract
only took 2 months to get paid
another client wanted to change the contract too much
had to say no
all had to say Attorney and they backed off
even her mom needs to sign a contract if she wanted work
2. Friends can be clients but they are customers first in that case
Specific lens of friendship is bad for business
Clients can make really good friends though
as long as professional lens is there
3. Think long term
don’t just take any project that comes along
you will regret taking bad fits into your portfolio
strapped for cash, will take about anything
Client relationship is a 2 way street
4. Brainpower should cost money
don’t give free consulting advice
your knowledge and time are real assets
been doing this 17 years
for first 10 years did a lot of unpaid consulting time
now has a ‘pick your brain’ paid consulting
written report or other deliverable around advice
5. Realize there is strength in numbers
invest in financial tools and advisors to grow your business
She hired a person to handle finances and accountant much smoother
6. Be a work in progress.
Sooner you start documenting and process management the better
project manager came in and had no idea how to start
all process was in people’s heads, not written down
took weeks to document
had to define the processes
7. business is business
No one is a one person shop
we all have to use outside vendors
choose those vendors wisely
seemed easy to just get friends and ‘down the street’ convenient
but not always a fit
now she has stable of vendors who are trusted and provide real value
referrals must be because of business fit
8. No I in Team
working with partners who can keep your relationship secure
had a server fail, hosting company
known them for year, bad luck run on his part
multi day outage
80% of her sites were down
headache and really should have been end of business event
she was prioritized as a client but still the end clients wanted to migrate hosts
but they all still trusted her
chose Pantheon cause we care
Fiery hoops and made sure the clients were satisfied
(Great job Roxanne!)
9. Transparency leads to trust
clients depend on you but you depend on them
must help each other get better
took her a while to be really transparent
tough position to be in if you agree to do work you don’t know how to do
instead figuring out if can do, otherwise refer them
want them to be a happy client so they trust long term for things they are competent
10. Every little thing, going to be alright
can’t force them to jump though
can be frustrating, you have to just let it go
business is not personal and you need to let go of ego

Wednesday Keynote

The Building Blocks Of The Indie Web
Jeremy Keith

I didn’t go into this talk expecting it to be as technical as it was, but wow I am very glad I went in with an open mind. I left with a much better understanding of what is even possible around owning your own content and how it all fits to make a better overall internet. It is not the responsibility of large corporations to protect your content and privacy, it is yours. Things like OAtuh and ‘rel me’ might seem like technical novelties, but what they represent, if embraced, mean a much freer internet where a content creator decides on when and how their content is used in a more meaningful way than using FB, Twitter, etc, could ever allow. This is also a very entertaining talk in my opinion with some of the better thought through slides I have seen in a while. They don’t work stand alone but amplify his talk when he is going through them.

Raw Notes:
indieweb.org
Owning your content going forward
Ideally Capitalism good
bell curve distribution
in theory it could be economically good
if a level playing field
Rich get richer and poor get poorer due to feedback loops
Internet explorer
wants to see many browsers competing on features
dodged a bullet
routed around it, like networks
hub and spoke
airports still use this, old telephone
single point of failure
ARPANET
well connected nodes distributed network
still possible for network to work even if one goes away
military background survive nuclear attack
but really people working on it thought
nuclear weapons with hub and spoke
reduced the possibility
shared with the Russians
no top down and nodes can add in as needed
no permissions on the WWW to create a new URL or link
no planned structure
wild crawling mess
walled gardens – Compuserve and AOL
the web Won!
wanted free open
but returned to walled gardens like Facebook, Twitter, etc
FB is media company in the world but we make all the content for them
the better the network
the first person who had a fax machine had a completely useless device
before FB it was a singular social
basically pushed us back to the hub and spoke model
hypothetical, an election
single point of failure
like WP and Drupal are popular and get attacked more
temping target, large attack vector
Why?
Convenience is driving it
trade control for this convenience
they now control your content
the movement tries to balance that
indieweb, you should have your own website
longevity
MySpace
link rot is a fact of life
comes back to the architecture of the web
proposal to hypertext conference in 1991
rejected
2 directional links
one directional links
but 2 direction isn’t that hard
link rel=
href
rel stands for relationship
works on a as well
a rel=
a rel=me
but that does not make 2 direction though right?
spec element on profile links
kind of 2 directional
relme auth
piggyback OAuth
can sign in to a service using your own website
why would you even do this?
authentication is the hardest point of an API
micropub – incoming post requests
you can use anyone else’s interface that conforms to this standard
quill
ownyourgram
ownyourswarm
PESOS
publishing elsewhere send to own site
but POSSE is better
Post own send somewhere else
using ITTT for ths
Webmention another W3C standard
brid.gy is a service on these things
monitoring responses and can ping you and push to you by authenticating
can do comment but also do interesting things with the data
facepile
plugins available
works for Drupal as well
but why? why this?
Dri.es/tag/open-web
should all be different whys
but it is about control of our media
but this is all about tech
but that is not what indieweb is about
it is about design principals
indieweb.org/principles
have to have fun!
emoji included
your site is your playground
the original motto of the World Wide Web was: “let’s share what we know.”

How Technical Should A Drupal PM Be?
Matthew O’Bryant

I do a fair amount of thinking about Project Management since I talk to so many people who work on projects. I also see that as an appealing career path to be honest, as it is something that gets things done and in an ideal world, unites folks for the better. Matthew does a pretty good job of reality checking anyone that might be approaching this field lightly. He systematically walked through terms and concepts that PMs of any skill level should be mastering and at least familiar with. The final answer of “how technical” is ultimately “it depends”, as with so many other things in life. However, knowing more and continually learning is certainly a good approach no matter what.

Raw Notes:
Long history of CS sales and technical background around sales and marketing
bought a home loan automation, learned coding and architecture
Dreamweaver, ASP
20 years of this stuff
Digital Project Manager
success
I think in 1’s and 0’s but I speak English
Does it even matter
Main role is
hit deadlines
manage a budget
resource coordination
quality control
client satisfaction
Answer is yes, it matters
carpenter using a hammer vs making a blueprint
actual answers, it depends, on quality of the project
small sites maybe less important
even some medium, depends on what you need to integrate, maybe great contrib modules
maybe less to explain
maybe more technical
support SLA
Endurance vs Stress test
eCommerce
more complex you need to have a better technical understanding and be able to translate it
knowing terminology
adding content
basic HTML and CSS editing
Basic understanding of Views
intermediate skills
paragraphs, pathauto
admin toolbar
many more
know your basic contrib modules
Drupal permissions
views config
commerce features attributes
so you can have the conversation with the clients
version control for Configuration Management
Module configurations
more advanced things
know git
ACESSABILITY IS KEY
W3C WCAG 2.0
Perceivable Information and UI
Operable User Interface and Navigation
Understandable Information & UI
Robust content and reliable interpretation
Peer code review
Cross Browser Testing
Performance Testing
Security and Penetrative Testing
Google Analytics
Google Tag Manager
Heat Mapping Tools
LOT OF STUFF
improve your skills
Build your own website

Storybook: An Interactive Pattern Library for Your Decoupled Applications
Brian Perry

Brian is an excellent presenter and this talk is a continuation of an idea I first heard him discuss at Midcamp. Now, I will always caveat that front end stuff always seems a little out of my wheelhouse, as I don’t really touch that side of things in my day to day. However, this adds a bit of magic show element to any of these talks where I just get to be impressed a thing is possible without fully grasping how it does it’s thing. ‘Knobs’, for instance, seems like a completely logical tool anyone would want to use for making fast changes when prototyping or developing but I can’t point to a single thing on my agenda to have a reason to dive into it at the moment. Still, I am very grateful to get to attend these talks and expand my knowledge base around this area. You never know what tomorrow will bring or when I am going to need to need this stuff. It was a very good demo.

Raw Notes:
Atomic design approach
Atoms -> molecules ->Organisms -> Templates -> Pages
build components and prototype them
integrate with Drupal in interesting ways
test things before you integrate fully
can be Twig
Examples:
Artsy.net
on github as well
website in github
bulk is in React
slide shows, galleries, ect
reaction is the folder you want
Another example
Uber React-Vis
visual storybook focused on components for visualization
JSX add on
knobs
Adding Storybook to a project
npx create-react-app my-app
cd my-app
npx -P @storybook/cli getstorybook
npm run storybook
starts a localhost instance site
going to be pretty bare bones but that is scaffolding
Individual story files
config.js file
iterates through options and pull in what you want
example story: Album
Music discovery app
Row with an album cover, name, render method to render JSX
select album function
src/componets/Album.stories.js
import React
import {storiesOf}
import { Album }
import { AlbumList }
CODE EXAMPLES
Album story
Addon: Actions
Can see a lot of things
log the actions and functions
with Knobs you can fiddle with things in real time to experiment before committing
Lot of demo!
List View story
Combine all this with Puppeteer to test all the things
deploying is straightforward as well
build to a .out directory
or NPM script
and can post that anywhere with static JS bundles
Drupal and Pattern Lab?
style guide guide, gatsby edition
the storefront in the workshop
really is a dev tool

5 Essential Lessons You Can Learn From Art History
Jennifer Smith

I’ll admit it, I didn’t fully read the session description before I got there and thought we were going to be looking at classical architecture, painting and sculpture from all throughout history. Instead we started in 1900 and I quickly got acquainted with the importance of The Bauhaus and Swiss Design and how we can all benefit in our daily choices from embracing simplicity over needless ornate embellishments. I also learned how to quickly apply the Golden Ratio to a layout without a lot of hassle, which I am going to start leveraging as design choices pop up. TL;DR – centering is the lazy way to show you don’t know about design, so stop centering everything and flat is better than drop shadows.

Raw Notes:
There is design in everything
If you follow best practices
looks more professional
takes stress away
impresses others
don’t make your company look bad
10 minute art history
Early 1900’s
could go back further but this is modern era
Emphasis on tech
manufacturing process and function
style subordinated to purpose
Electricity comes around
have to design things to use it
like fans and such Peter Behars
tea kettle
unified appearances
glass walls was a super big innovation
reason behind every component and decision
Van de Velde
trained as a painter
served as an architect, designer, teacher
jewelry and other common things
furniture
first real silverware sets
art to industry as well
German Association of Craftsmen
form determined by function
elimination of all ornament
elevated functional aesthetic
1918 war ends and design things ramp up in post war
1919 Bauhaus school
to this day still think German Engineering is good because of this
free to people who qualified, school just for designers
building for a soft machine, humans
Bauhaus became a philosophy
eliminate elements that do not matter
form follows function
everything is designed
make design accessible, avoid overloading and over stylizing
Craigslist is EVERYTHING at once, Google is one thing, done well
1933 Nazis killed the Bauhaus
1940’s Swiss Design
after exit from Germany, kind of makes sense
not specific to Swiss, but international style
flair for design forever there though
international typographic style
this is used by all large corporations now
Used Asymmetric layout
and GRIDS FOR EVERYTHING!
sans-serif
Flush left, ragged right
preference for photos over illustration
Dieter Rams, less is more
record player
Braun juicer
inspired by that juicer, Apples products in the 90s
10 principals list
Less is more!
don’t give the user more than they ask for
focus on needs not distractions
fierce reduction of elements
United vs American Airlines apps
United has a lot of unneeded parts when you first look
new flat design is actually just the swiss style
shiny is not needed
Windows 10 no rounded corners, grid
LingsCars.com best site about what not to do with design
how to eliminate unneeded objects?
Do you really need this in a box (boarders are a sign of weakness)
Does this need a drop shadow (most likely no)
Does it help to have this in 3D
does the gradient convey more information?
BWI is actually on the right path
but there is a video on their desktop site that takes a lot of space
mobile apps are cleaner
Using mind maps, helps figure out what is important before design work begins
don’t give people sloppy stuff
Eye pattern testing showed no real difference between serif and sans-serif
on-screen considerations
Xheiht 65% of the Cap height
strong counters
do not use Script or Cursive
use a typographic grid
Always adhere to type ramp
visually 2X the size so people can see the import stuff
Rule of thirds
Golden ratio
Fibonacci sequence based on rabbit research
very replicated in nature
multiple by 1.62 for a perfect pleasing size rectangle
helps to not center everything
PhiMatrix
can overlay Golden Ratio on your screen over anything
and break down proportions as needed, repeatedly
Google Materials
https://design.google/

Thursday Keynote

Exploring the New Drupal Front-end with JavaScript
Dries

I always love a good Driesnote and was a bit curious how this would stack up. A visibly more relaxed Dries, in front of a smaller crowd than DrupalCon brings, really had a conversation with us and introduced several members of the audience to the history of Drupal for the first time. More importantly than our past, it was great to hear an impassioned view of the future and what that can look like. Not too dissimilar from WordPress, the take away for me is embracing JavaScript on the presentation layer is not optional anymore, so it is up to us to make sure our testing frameworks and APIs are up for it. Especially in a world where every new dev is at least learning JS basics, it is going to make adopting Drupal even easier int he future and will let us draw from a much larger pool of devs to grow the community.

Raw Notes:
History of JS, Drupal, API-First, JavaScript-driven Drupal admin interface
Brief history of JS across the stack
JS was invented in 10 days
Brendan Eich wrote the first JS version
in the beginning everyone thought it was amateurs
JS was not cool at first
XML
asynchronous JS
lead to AJAX
then frameworks like JQuery, dojo, mootools prototype
adopted by Drupal, first CMS to use JQuery
put it on the map
2008, Chrome build JS engine V8
10 years ago, they were very future looking
10x performance improvement over internet explorer with V8
2010, twitter made unprecedented move,
implemented new API server for everything/everyone
Moved the rendering to the user’s browser
model is common now, but this was a first
over capacity whale showed that this initially did not do well
time to first interaction was pretty poor
had to download a lot of things
in 2012 partial rollback of rendering back to the server
AIRBNB made the code very reusable
JS word right now, Babel, nightwatch
tooling has really evolved
History of Drupal
message board for his friends
registered dorp, means village
typo to drop.org, happy accident
thought up public name for code, 30 seconds. Thought of Drupal
Google and Mobile had no real existence
1 our of 40 sites on the internet use Drupal
14 million visits to drupal.org per year
reinvented ourselves many times
each morning we are born again, what we do today matters most
slow start on D8 after release
but getting better
51% increase in D8 adoption last year
REST API first initiative
Drupal’s REST support is pretty good, rich and mature
user logging/reg, media,
JSON API and GraphQL
pretty robust, moving them into core
pretty close
maybe in 8.6
more and more companies designing API first
Chupachups UK, Warner Music, teach.org many, many others
people at sea using Drupal locally and syncing once back at shore
integrate with anything including other Drupal sites
NewBalance is ideal use of both traditional and decoupled
Working on JS-driven Drupal admin interface
Drupal’s own UI is still not JS first/forward
could be more interactive and better if we do embrace it
Drupal needs cutting edge experience
Trying to replace a single page, they identified 6 steps
1. stabilize the JSON API module, pretty close
2. Improve our JS testing infrastructure
3. Create designs for the administration UI
4. Allow contrib modules to use React or Twig
no big bang swap of whole UI, introduce more dynamic incrementally
not everything needs React, but want it when you do
5. Implementing missing web services APIs
like permissions, found gaps in coverage
Admin areas have some things that are only in that use case
6. Make the React UI extensible and configurable
Good news, this benefits EVERY decoupled builds
why should we care?
used to be you made a site and just left it alone
now people live in the frameworks like Drupal, always changing
Drupal is no longer the Drupal you used to know
it continues to evolve all the time
slides at https://dri.es

Iterative UX: Find It Cambridge Case Study
Benjamin Melançon

I was very curious on this talk what a Find It Cambridge even was. Turns out it is a resource that can greatly help any community better organize it’s events and resources. Benjamin is just the nicest guy as well, which never hurts a presentation. For instance he deferred to team members in the room who had worked on this this project with him for various sections, making it seem like their whole team was up there presenting and he was just a player in the larger picture. I have heard too many talks where this would not have happened, even though the team is literally in the room. It encourages me to think about these sort of opportunities to involve others in my sessions. I don’t actually think my notes on this one are that good, as I had a few distractions in this one, so this is a case study I would encourage you to just watch for yourself on youtube thanks to the hard work of Kevin Thull

Raw Notes:
must have a budget
an ongoing budget if not a large one
Research
iterate on what someone else has built
what another website does
issue is they want Google/FB/other expensive commercial site
find something similar to what you want to build and use the elements that work well
Sommerville pub was there to help them figure out what worked well
research showed more info was expected from a .org vs a .gov
that is changing in Mass thanks to mass.gov!
Resource Portal Interviews
Students from the school of public health reached out as part of a project to research with them and provide analysis
Testing other sites
You need content, you can not design without content
Google sheets originally,
then another content store was used
compare to other sites
see how buttons work well there
a wireframe allows us to experience design while implementing quickly in dev
Best 7 letters when talking to a designer or Developer
HTML
CSS
discontinuous Improvement
have to break and improve things
Go where your users are
use IE if they still use it at your user’s facilities
visualize everything
visual maps
Lessons learned from user testing
there were many
not including 141 programs that forgot to check themselves as All Ages
water play parks
seasonality or weather dependent results
more use cases
curated lists of things

Building a better page builder with Bootstrap Paragraphs
Jim Birch

Going to be very honest here. I originally went to see this because I wanted to support Jim giving the last session of the camp. I always love his talks but going in I had a fear my mind would wander and my notes would be pretty spotty. However, this is actually a really interesting area, even though front end. Jim’s presentation skills are second to none and his raw passion about this subject matter is infectious. At it’s core this is a talk about DRY and how to make everything reusable. This is a great lesson for anyone, not just front end folks.

Raw Notes:
Why?
Different widths for different content elements
better typography
wanting images
structured content
ability to add semantic markup
easy to administer
slide things around
Bootstrap framework – HTML and JS pre-configured
powers about 25% of the web as a front end
mobile first and responsive
Create grid markup and readable
documentation
standardization helps
on-boarding is easier
Customizable
completely
mixins for adding existing styles to semantic html
best practices for small/lo budget projects
get 80% there when you start
Open Source – MIT license
If already using Paragraphs
how many times have you repeated yourself
but a litttttle bit differently
install this modules and start exploring right ow
Strategy – create a module to give you want you need
create base templates and CSS that could be included with any Bootstrap include
harness the power of Entity Reference Revisions fields to neat Paragraphs
Have global width and color options
Inspiration – Les and David Needham’s great presentation using Paragraphs
they came out with idea of paragraphs as content paragraphs and layout paragraphs
and ponies
Global settings
Every paragraph should gave widths and backgrounds
list/text
widths
tiny/narrow/medium/wide/full
background colors
empty classes follow the standards for bootstrap conventions
Content bundles
layout bundles
image includes a link field
blank
embed JS or connect to mailchimp, Pardot, Eloqua, etc.
Drupal Blocks – render them in line with the other paragraphs
not everything works though
copy and extend for custom blocks
Views paragraph bundles, reference field, lets yo put a view into a paragraph, even with an argument
Columns
up to 6 pieces of content
distributes equally
two uneven columns 1/4s and 1/3s
3 uneven columns, it gets messy but possibilities are wide
column wrapper
another layer
carousel for those that like them
images and text, just no other carousel inside a carousel
slide interval speed settings
Accordion
collapsible
Modal – 4 fields – title, body, footer
Tabs like the accordion
tabs and accordions in a tab
2 Submodules
contact and webform
Contact form let’s you reference the content form entity
add new or use existing contact form
Webform, same thing but for Webform module
using Block element modifier markup
BEM
Markup – div.paragraph
modifiers
Twig – width example
Drupal asset libraries to apply styles
theme has hierarchy to the modules
module libraries folder
custom blocks
add fields
dropping in setting default
make your own content fields
manage display
Working globally
mostly config and a couple templates
packaged up in a module
thought was ‘how can this be reusable?’
does not want to rebuild again and again
create a module structure
Drupal console has a command that magically does this
add templates and CSS and JS
configure in the .libraries file
export the config
Just delete the UUIDs
Rename field_ to your own machine to avoid future collisions
if needed, add function to override template in .module
Bootstrap Pages module
article content type and an author and a landing page
meta tags and schema.org, optimized images, responsive, precofigured URLS
taxonomy
views
use frameworks to save time and be more productive
this is his attempt to do this
also can use this approach for any other framework
make it reusable

My Sessions

Nobody Wants a Website. They Want Results!

Discovery, discovery, discovery, discovery!

I got to talk at MIT! This is pretty exciting to me. I not only got to deliver 2 talks at this camp, which is cool into itself, but I also got to give two related talks that are part of a larger set of topics, which is the sales/project process. With ‘Nobody Wants a Website’ I focus on the qualification process and uncovering KPIs or at least what is measurable early. I got to follow that up a day later with ‘Discovery, discovery, discovery, discovery!’ and dig into what I think of as the most important part of the whole process. It was a really great feeling to give this ‘cycle’ of talks and I am guessing this is how Matthew Barney feels whenever they show all of Cremaster Cycle at once.

Sprints Day:

I always love a contribution day. The community coming together to make the project happen and evolve the state of things. I was very happy to get a chance to wrap my head around the Tour module, specifically the notion of leveraging routes and attributes. This is one of the more overlooked aspects of Core in my opinion and I look forward to being able to better get a grip on how to contribute back to the project moving ahead

Wrapping Up

I always will like Boston for the history, for the warm people if it is warm outside and for the pretty awesome Drupal community based out there. I am actually going to be headed back that way in the near future for another event. I am already looking forward to next year when I might again get a chance to speak at MIT in the shadow of the offices for the W3C, Stallman and Tim Berners-Lee at Design4Drupal 2019!

NEDCamp 2017: Driving in the New England rain and my last talk of 2017

The direct flight from SFO to BOS is about 5 hours and 30 minutes long. I arrived at dusk in the light rain and got to experience the horror show that is Boston traffic at rush hour. I rarely drive, but I felt very safe in these treacherous conditions because we are never going that fast, 15-20 MPS the whole way. I was very glad to make it to my destination, which was the quaint and confusingly laid out Worcester, MA (local pronunciation: WUUSS-t…ô), specifically to the campus of College of the Holy Cross for New England Drupal Camp 2017, better known as NEDCamp

I had gotten there a day early so I would not miss the speaker/community dinner and glad I had the chance to cruise around and see the town. I got a very pleasant surprise, finding a vegan Jamaican spot for lunch, Belmont Vegetarian. I got to work from a funky coffee shop right across from city hall and even got to go inside Salisbury Mansion which is nicer than the pics make it seem. They were just putting up decorations for the holiday season and if I lived in the area I would surely go back to see it in all its glory. I rarely take side trips or spend any time outside of my normal conference duties on these trips, so this was very nice. New England is great and all, but it was getting a little too cold for me.

Food and Fun

Friday night dinner

Instead of a speaker/sponsor dinner that was invite only, the Drupal community kicked things off with am open to camp goer who registered at Lock 50. This was a very lovely thing to do, with the trade off being everyone paid for their own meals. It was a joy to eat a pretty amazing gourmet meal with the Drupal community. Getting to connect over some nice drinks and fine food is one of the absolute best parts of any camp.

Breakfast

Almost all camps supply coffee and all should. But not every camp provides a full continental breakfast spread. Thinking back on it, MidCamp was the last time I saw a breakfast banquet quite this good. You can’t learn on an empty stomach, and given I had a set up time before my hotel started serving, this was one of my favorite aspects to this camp. It was all great, but raisin cinnamon bagels are amazing.

Lunch

The staff of Holy Cross is pretty great about dietary restrictions. The lead catering person helped each of us figure out what was what. It was pretty great. There were build it yourself sandwiches, with many bread options for the gluten free, salad, chips and a huge veggie and pickle platter. For those looking for alternatives to that there was humus, tabouli and pita triangles. A true feast but I didn’t really have a lot of room for it since I overdid it at breakfast a bit. Definitely a good problem to have. Stuffed, we were all thankful that there was copious amounts of coffee to keep us going all afternoon.

After Party

The after party kicked off after the last session and we all got a drink ticket to start and a lovely cheese and bread platter. Servers came around with all sorts of goodies including these mushroom stuffed mushrooms that I think I am going to try and make myself. Just breadcrumbs, mushrooms and a lot of garlic mashed up and spooned into mushroom caps and baked. It was great to talk to so many folks about the day and how things had gone with the camp.
We only had the place for about an hour, so we scattered but some of us made plans for dinner. We found this pretty great BBQ joint with OK veg options that was pretty close to a Karaoke bar. They have some of the friendliest staff in the whole North East at Smokestack Urban BBQ. It was a real treat to hang out with the community and get to know each other a little better as people. We are all in this together trying our best, breaking bread is an important thing we all do and reminded us how we are more similar than different.

DrupalKaraoke

Then we sang. It was so much fun, as our party was literally the only patrons for the first hour we were there. Then the crowd came in and we got to show Worcester locals how FOSS does it! I only wish I had video of the 8 minute 25 second version of “Paradise by the Dashboard Lights” by a couple of our community which remain nameless in this post.

Sessions

I was very excited to be at this camp because with my life and focus in other areas, Drupal is still pretty amazing and something I want to learn more about. Some amazing speakers on this year’s lineup, I had a hard time picking which ones I wanted to hit. By the end of the day my brain was mush from info overload so these notes get a little sloppier along the way. So much great info though, and you can see any of these sessions yourself thanks to the tireless efforts of Kevin Thull who records all the sessions, and the New England Drupal community’s youtube channel

Opening Remarks:

My Session

I got to admit, I went into this with a touch of sadness, this is my last speaking engagement of 2017 and as of the time of this writing I hae nothing lined up for 2018, which is the norm for speaker since most camps are just opening up for submissions for the spring around now.
I was very grateful to have a good number of people in my room, it made me feel pretty great. The Q&A was fun as well and I am so glad that this got to be the way I will remember my last talk of the year!

Can’t we all just git along?
Erik Peterson

Having written a talk and workshop on git, I am very curious to see how other people approach it. Erik approaches it from the terminal up. Literally a step by step of what the heck git is doing under the covers. I lost track of taking notes a few times because I moved over to my terminal to try some of this out, like git hash-object which I have not run across before. This is a must watch video for anyone that ever wondered how that black box of magic that we call git works!

Raw Notes:
Not a ‘how to’
not things you will have to do
help understand what git is doing and what it is trying to do
how to fix things when they break
logic behind it
Tim Berglund’s “git from the bits up” is where he got the idea
setting up git
git config –global
file that manages config
initialize a repo
init
that is all you need to do
what did that actually do?
that is meat of talk
What git tries to track
Objects and Refs
Blob – data of the files
Trees – pathing for a blob and other trees
Commits – tree, parent, comments
REFS
Tags – named commit
Heads/Branches – line of commits you can add to
Working directory – the actual files on your disk
Repository – history of all the changes
.git directory in the Working Directory
Commits
Each commit has an identifier hash
commits play one after the other
commit messages should be robust
People expect a master branch
Starting with Raw Build
Creating directory structure
hash-objects command
moving object into index
git update-add
DEMO TIME
mkdir .git
mkdir .gitobjects
mkdir -p .git/refs/heads
refs/heads/master > .git/HEAD
git hash-object
most OS hate large folders
objects in file 10K OK, 10M not ok
git generates huge number of files
everything is stored as objects in git
hashes breaks off first characters and makes new folders out of them
Directory + file is the hash
Still no commit, but no file
exists as a file somewhere, but not checked out
does not know what it is or anything about it
add it to the index
git updateindex -add –cacheinfo 100644 hasidentifier spiral.txt
git write-tree
git cat-file -c hash
git cat-file -p hash
git commit-tree hash
git cat-file -p
adding spiral file
Point of all this
a commit is just a pointer to trees
trees just paths to objects
objects just files in git folder
Git cleanup looks for objects that are not in trees, kill those
head branch detached when not pointed at branch, pointed at specific commit
don’t want to be on a commit, be on a branch with that commit
checkout rewrites your working directory
Rebase and Reset
branching – you can just commit your whole life through
moving to new branch lets other people work on your repo and keep working on your idea
like you didn’t do the work if you want to toss it
objects are still there, branch is gone though
rep log to see changes and bring branch back
merging is getting branches back together
real trees rarely do this
remembers the paths and both branches
then can get rid of branch
rebase is different
a git mere is also a rebase
that is a fast forward merge
rebase moves the base of your branch to a different parent
changing what it is based off of
makes it look like one branch
whole history you are testing against
fetching
vs git pull
pull does a lot
fetch just gets all work done from the remote branch
but nothing else, lets you control what to rebase against
git push me, pull you
git reset soft
moves head pointer wherever, leaves working directory alone
tree (brew install tree)
git branch –contains hash
little history commit

The command-line doesn’t have to be a black box
Jim Fisk

As you might have guessed, even if this is the only post of mine you have read, that I love eating and I love the command line. I was super excited to be able to see Jim lay out some of the tools he is using and how we can leverage them. I walked away with tig installed and man, it is such a nice little tool to more cleanly read git. Honestly think I am going to show this off in future git talks. Lot of great information and Jim is a heck of a nice guy, if you don’t already have a local Docker solution up and running, check out his project Vesl as it seems pretty good, though it is early days. Make sure to check out his slides, as they used some old school telehack figlet 3-d font made with Jim’s CLIdeshow tool.

Raw Notes:
he found himself doing a lot of things with tools
found himself going more and more to command line
wrote this talk to help show others how he found success with it
We will over Docker
Vesl, tmux, vim, and others
basics
how to navigate find where you are, move things, and edit files
basically anything you can do through gui you can do through command line
quicker
Navigational thing
pwd – print working directory
ls – list files
see . and ..
. is folder you are in
.. one level up
cd – nav around the file system
Docker, container service isolated environments that can souse your dependencies and run different version of software in a consistent way. based on your project requirements
just type ‘docker’ see list of commands
all based on a common image you can download and connect containers
‘docker ps’ to see what is running
he created a project that made config easier
called Vesl (on dockerhub)
bas script, complex docker commands and make them easier to run
bloated container that out of the box, ready to go faster though
Vesl loads things behind the scenes from blueprints
DEMO
vesl start container
Fish is shell on top of your commands
fish shell goes ghosting, efficiently run things, autocomplete
predictive text autocomplete, even if not same start of word, related terms
tmux
terminal multiplexer
have multiple shells within shells
why need terminal shells in shells?
ssh 2x and edit in one
tmux bar gets added to bottom
vim – can configure
shortcuts
demo
at the start of what we can do with vim
vim config that helps you do things like debug easier
:w
:q
Fugitive – vim plugin
seatags
tig – better git history git backwards
history of changes and commit messages
see diffs on file by clicking on commit
tree view
look through actual files at that point
edit the old fie without pulling in memory
mysql cli

Keynote

Inclusion and Diversity in the Ever-growing Global Digital Marketplace.
Aimee Degnan

Aimee is a pretty amazing person and speaker. She is one of the first people I remember meeting in the Drupal world and and was super glad to hear her keynote. This was not a lighthearted soft skills talk nor was it a technical session nor was it a business discussion. It was a heartfelt and honest discussion about recognizing our own experiences and recognizing the experiences and situations of others. It reminded me of the talk Andrew Norcross gave at LoopConf earlier in the year, where it was a real gut punch, at least to me. I do my best to be inclusive and use my privilege for the greater good, but there is so much to be done. I intend to improve and hope I can inspire someone else to have that same intent as I go forward. I could not capture a lot of the info from the slides, so make sure you watch the video.

Raw Notes:
How do we identify yourself
project manager
dev, site builder
her into slide and her tech history
do tech
Women owned business 20+ years experience
but who are you really?
race, class, education, sexuality, ability, age, gender, ethnicity, culture, language
lot of the audience looks male
but not sure how we identify inside
get more data
then this is where ask questions and listen what we say
that is diversity
being composed of different elements
this is for people, the true range of differences
the meaning of diversity os not the stat of being different, it is noticing and listing and respecting the differences in others
inner/outer wheel
inner are some things can’t control, like ago, national origin
outside are things you can change, appearance, work experience, Education, Family, Political
fluidity
Different is scary
sometimes hard to find connection points
we like to be around people like us as humans
people find comparisons
you can tell if someone is safe if they are familiar
perceived confidence
but different can be empowering
different brings new ideas, new needs, brings change
society comes with lot of societal baggage
Privilege exists, we must acknowledge it
dominant, most influential
Oppressed, subservience and hardship, especially by the unjust exercise of authoritysomeone ho feels depressed
if don’t speak the language you could have a temporary oppression
intersectionality
trait 1 + trait 2 = total identity
most people have many more than 2
instead of Rosie the riveter being a white woman
3 woman of color, one in hijab
inclusion example of intersectionality
she had hesitations on putting this together
admitting how she is oppressed and privileged
being a tech business leader is how she is afraid of being judged
will she say too many feminist or radical things
awareness
hole built for a circle, other shapes are told by circle “just be yourself and get out”
need to be aware not just of ourself but other people and the situation
cycles of oppression and privileged
in order for a disadvantaged group to get better situation have to take on traits of dominant oppressive class
inflammation – pain cycle – tht you can fix with Advil, not privilege
have to have systemic change to fix
Inclusion – being part of a group or structure
integration says stay in your circle, but no effort to include
inclusion must be cultivated
but be careful not to have assimilation
inclusion is including people as they are, changing the system around the people’s neds
assimilation says change to fit in
homogeneity vs heterogeneity
made of same parts vs different parts
equality vs equity
fence in the way, looking at the problem different
addressing systematic issues
Digital divide
digital privilege
gap has improved over time
worse things happening content censorship and denial of access
across the board, internet is helping with inclusion
content
Drupal is 4.8% of the internet
Digital innovations, like Google translate
translation programs only getting better
why does this matter
where did Drupal start? and by who?
so many languages covered in the Drupal project
Your behavior and actions matter
be an ally
sometimes you don’t know the right thing to do
you can ask what the other person needs and help them, it is OK
be aware communication is beyond language
talk about change vs living change
Empathetic actions
be nice to each other
sounds easy, but not really
change is a process, takes time
is ongoing
must have an intent to improve
Yes we can!

Opening the Black Box: Becoming a Better Developer Through Debugging
Dustin Younse

I recently saw a shirt that said ” ‘;’ hide and seek champion since 1958″ Debugging and I have a long history that goes back to my college days. I remember printing out hundreds of pages of C and C++ code, which I wrote using the Pico editor, on green and white lined paper with the little perforated sides you tore off and then sitting down with a red marker and working through, by hand, where the issues might be. It still gives me nightmares. Thank goodness a LOT has changed since then.
I don’t debug a lot of code these days but it is coming up more and more as I evolve and learn more. The live demo part showed exactly how to use Chrome’s built in dev tools to debug JS. It was fortuitous timing that I could see this talk just as I entered the precarious world of JS and performance tuning. Great job and I learned some things.

Raw Notes:
Examples of errors taking down things
funny tweets
Nothing but text
CSS, Aggregated byt not cached
JS blocked in the browser
File permissions
differences between debugging and troubleshooting
5 minutes vs 5 hours
fixed vs understand why it happened and corrected that
What is the black box?
no CS degree or background, self taught web skills
everyone wanted a website, he would do it for beer money
above average google abilities
late nights staring at error codes
Mental model of Drupal a black cube
thing that did stuff
changed mental model to “Maniac Magee”
kids book
can untangle knots
largest knot in the world, he studies it, unties it with simple pushing and pulling
bootstrap process is complex
got harder in D8
let’s look at some new tools
When all you have is a hammer…
need better tools
“text editors” – notepad, nano
vs text editors – notepad++, Sublime
vs IDEs – more specialized – phpstorm, eclipse, komodo
how we set up Dev environment
FTP development – cowboy coding and ftp
no version control, this is bad
Local Dev – MAMP/Native LAMP
can work offline
print_r()
xdebug possible
Local Dev Next Gen
Kalabox/Lando – Pantheon and Acquia prehooked
behave like the server you will be hosted on
more performance profiling
blackfire – newrelic but local
XHProf
Tidewater
XDebug: step through debugging
hitting pause on code execution
inspect the state of the stack
modify values live
hairy problematic issue story
something is broken!
the ever dangerous live demo
example with chrome debugging tool for JS
modifying as goes walking through step by step, break points
looking at things as they are running
found off by one error
what is broken?
is something not showing up?
new content -is it published?
Log files
learn how to find your log files before you need your log files
multitail
linux/mac utility to easily view logs with more options than tail
tail multiple files at once
where is it broken?
custom module
template.php/.theme file
theme template?
since we don’t hack core or contrib modules
Change one thing at a time
git is your friend
save progress
recreate
make rabbit holes manageable
git bisect id your friend
lets you isolate changes between commits
must have multiple commits on branches and master
start in the middle
imagine a 45 step teddy bear factory
Git diff is our friend
remove your debug statements
ensure you only changes as much as you needed to change
git blame
git annotate
find out who wrote the offending code
not a witch hunt
a chance to find context
you can go ask ‘person’ and might be more info you needed to know
or time specific
debugging techniques
walk away, seriously
talk to a coworker (pair program)
talk to a rubber duck
write ti down by hand, show your work
make the future easier
watchdog
drupal::logger
etc

Did you say taxonomy or content type?
Benji Fisher

I debated leaving this one in here. Due to some other duties I was late to this talk and my brain was starting to go numb on me, so these notes are not the clearest. Benji delivered a great session with all sorts of poetry and dead poet references. After the keynote he even called himself out for only using 3 dead white guys as his poet examples. The crowd was happy to help him out as Emily Dickinson and Maya Angelou (who does have a few public domain poems actually). It was a great community moment. It was also a reminder that Drupal is not always intuitive as the demo went a little weird at one point, but we got to the end with a much better understanding of content type vs taxonomy and how you can leverage both with Drupal!

Raw Notes:
developing vocabulary
builds a Drupal site
manage fields manage forms
name=author
ends up with
All english
all dead
all white guys
copyright
Emily Dickinson is a solid choice
page for William Blake
taxonomy for Blake
how you are going to edit the content type
same here
content type
poet info the same in both
What difference does it make
Drupal for free
revisions, created, timestamps, bulk operations
Drupal also gives taxonomy
hierarchy
drag and drop ordering
list of associated content (nodes)
Demo of admin, (reminded me of what Drupal dev looks like)
Revisions to taxonomy terms, module for that
created and changed timestamps
author info
bulk operations
drag and drop ordering
list of associated content
Admin experience
will you provide custom navigation

Wrapping Up

I will admit, I have not spent as much time in the Drupal community as I have in the WordPress community this year. I felt a little guilty about this when I first showed up. But pretty quickly I remembered that these are really my people, FOSS loving and community driven individuals and just the nicest folks in the world. I hope there are more events for me to go to next year. The community needs to expand, not contract. We should all embrace Drupal for what it can do and make the worked a better place. It took going to this show to remind me of that. Until next year for NEDCamp 2018, thanks NEDCamp and the whole wonderful Drupal family.

WordCamp Boston: Learning so much in Boston in the summertime

Last time I was in Boston, I was really in Cambridge for the most part. I returned for the second time this year for WordCamp Boston 2017 and got to see the nightlife in bean town proper. Once again this camp took place at the Boston University’s George Sherman Union, which features an amazing gigantic pipe organ! It was amazing to see my #WPLife family out there and meet so many new folks. I didn’t get to go to as many sessions this time around, but I stayed super busy at the camp and have so many thoughts. Let’s dig in.

Food and Fun

Friday night

If there is one thing you get used to at any WordCamp or DrupalCamp it is the tradition of the Speaker (and sometimes Sponsor) dinner. Typically the organizers invite the speakers to meet and greet one another. I always love this part because speakers, in general, are super busy during the event itself and this is the best chance to catch up or get to know them in the entire weekend.
Well, WCBos is a little different insofar as they still believe in this idea as you will read a little further down, but there were no pre set plans on Friday. This fact did not go unnoticed by some of the road dogs and we quickly made plans to check out Citizen Public House. Very glad we did, as they had a huge selection of fine spirits, a terrific menu and outstanding service as they gracefully handled an uncertain party size with people trickling in throughout our time there. If you find yourself anywhere near BU, check them out! It was fantastic to get together and catch up with those I knew and had the pleasure of meeting several new friends as well. Well fed and refreshed, we were officially ready for day 1 to begin.

Day one

The morning was met with the normal pastry, fruit, coffee catering you know and love. Well love is a strong term. I was thrilled when the GoDaddyPro crew pulled up with growlers full of iced coffee, which was tremendous. I didn’t get the name of the place they ordered from, but it was fine!
I was delightfully surprised by my vegan option at lunch. We had brown bags prepared for us and I, unsurprisingly, had a wrap of some kind. Surprisingly it was ‘meaty’ with thick eggplant slices and a generous amount of hummus and came with an oatmeal raisin cookie that satiated my sweet tooth, which had been triggered by all the donuts being offered that morning. Afternoon snack was ice cream and lemon sorbet.
Picture of a vegan wrap, a red aple and a half eaten cookie

After Party

Immediately after the final session, ending at 5:20, we migrated down the street a ways to the Brighton district and the White Horse Tavern for a very well attended after party. This local sports pub had a lovely patio and really friendly staff. There are some advantages and disadvantages to starting an after party immediately after a camp day. On the one hand it means your attendance is going to be much higher, as the stride of being together isn’t broken and the rest of your life hasn’t had the chance to seep in and distract you away. but I find it makes for a higher early attrition rate as folks need to go get a ‘real meal’ since hungry crowds tear through appetizers which only whet the appetites after burning so many calories swimming though so many bits of new information and conversations. It also means you don’t have any recovery period from the day. I, for one, get exhausted interacting with people and need little pockets of quiet and reflection to recharge. It does not mean I don’t enjoy people but it does mean that without a break I am noticeably more exhausted when my head hits the pillow and I find my mind less at peace as it churns through examination of the day. All in all this was a great, very well run party and I 100% applaud the organizers for making a very inclusive and well attended after party! I had a great time.

WCKaraoke!

“After the party, there’s the after party” – Remix to Ignition. I got to hear a spectacular version of this sung by one of the local regulars to our spot of choice for WCBos WCKaraoke party, Limelight Stage and Studios. While only beer/wine, this place had a full izakaya menu. There are many private studios you can rent out but we were there to use their main stage that night. This place was happening on a weekend night, but fortunately for us most of the people there to sing were in the private rooms which let 20some of us campers sort of take over the main stage area. I was delighted to read on twitter at one point that WordCamp Ottawa was not only having their own WCKaraoke party but actually where challenging us in Boston to ‘show them what we got”. Which of course we did!

Sunday Brunch

As I said above, the organizers believe in the speaker/sponsor get together fully, but they are unique in the WC world (as far as I know) with having a speaker brunch, with is logistically possible thanks to an 11:30 start time for the camp itself. We got together at Tavern in the Square for a delightful brunch buffet. I ate way too many waffle fries and not nearly enough fruit. There is no lunch on day 2 so I figured that was a good idea at the time. The iced coffee they served up was tremendous. Next time I am near there, I am going just for that. Full and caffeinated we headed to the venue to. . . .

Sessions

Keynote:

Design and inclusion John Maeda

This talk immediately took an unexpected format, as it was not your typical “here are slides about a thing” setup. Instead he asked folks to find the red slips of paper that were distributed and write down their fears. Then he collected them and directly addressed them. His logic: “To talk about the future you must address the fears.” While I don’t think he, or any one person, has the full answer to many of these concerns, he gave everyone in that room a jumping off point to articulate our fears and begin a communal dialogue about our future overcoming them. I was very glad to be a part of that room. I will put my raw notes below this paragraph, which you will see are a tad disjointed as the topics changed rather rapidly. Highly recommend watching this when it gets on WordPress.tv.

PHP based, not the new kid on the block, but still solid and massive use First exposure to the community? Fears of not knowing what up, inclusion If someone tells you Open SOurce like WP is not secure, remind them that all systems have vulnerabilities we just DON’T KNOW! Facebook does not disclose their flaws for example Many older people use all upper case since it is more legible, not all old people are yelling at you. Lose new users with changes like Gutenberg Resistance means somebody cares it means people care when you meet it, get excited things are moving fast, don’t be afraid of that, be afraid it it moving too slow the way we age is not the way the world really works things speed up, not slow down

Plugins panel:

Adam W. Warner, Christian Nolen, Lisa B Snyder, Lauren Jeffcoat

Of of the things I really appreciate about this camp is the panel discussions. Rather than have speakers with prepared statements and slides, we have thought leaders and a moderator answering questions around a specific topic. In this case we got to hear very good questions, both pre prepared and sourced from the audience, about plugins. Some questions of note: What is the safest way to update plugins? How to get the last % of way there for projects? How do I go from stage to live? How to determine what is a ‘good’ plugin, how do you evaluate? What are your favorite plugins.
It turns out the answer to almost all of these begins with the phrase “it depends” since the topic of plugins covers such a wide swath. This is a great one to watch at home when it gets uploaded.

My session

Open source panel Dwayne McDaniel, Jared Novack, Mel Choyce, Steven Word

I was very fortunate to be invited to moderate the open source panel at the event. When I was told I would be moderating, something I had volunteered to do if needed, I was not given too specific instructions on how to structure the panel or what topics around Open Source would be suggested. Given this opportunity I steered the conversation to 3 main areas. 1) What is Free and Open Source Software and why does that matter 2) How each person has contributed and how anyone can contribute and 3) what does the future of Open Source mean for WordPress. I feel pretty strongly about FOSS and I was thrilled to hear this passion from my fellow panelist as well. The biggest thing I wanted people to understand is that the community is that makes open source technology possible and it is up to each and everyone who is in the community to keep that community growing and vibrant. Without that, open source is just a pile of text files you can go look at.
Unfortunately I can find no pictures of this panel at this time.

Day 2
Keynote:

Democratizing Software

K.Adam White

I was excited to see this man’s name as the day 2 keynote presenter. Even though I have gotten to hear a number of his talks over the years every time I learn something new or find a new perspective. This was no exception and I left feeling inspired.
He talked about the reality that while anyone theoretically can code, not everyone gets the opportunity to code. Starting from there, he took us down a road of how those that have the opportunity to go this route learn as they go. I found it really interesting to hear his explanation that PHP, which stands for Pretty HTML according to him, is mostly learned through HTML and sort of in a backwards way in WordPress. This stumbling into it does not work for any other language like JavaScript, which is why that seems as hard as it does to most people starting out.
He also touched on the importance of a highly skilled and specialized community acting as a backbone to allow every person to develop their own niche, further strengthening the whole body when collaborating.
The best line from the whole talk I think though is “WordPress is for learners”. WP become a learning community. That is what we are even doing going to camps, either learning new skills or sharing the knowledge that we have with others. I am very grateful to be part of such a vibrant, supporting culture.

Contributor Day

I am working on a separate blog post about this. Will link here when it is posted.

Freelancing Panel

Amanda Giles, Jennifer Nickerson, Kyle Maurer, Adam Silver

I always enjoy these panels. Not a lot to say as the questions varied wildly as the answers. Go check it out when up on wordpress.tv. Here are some tweets about it though.

CSS Grids are here

Juan Pablo Gomez

I am always quick to admit that design is not my strong suit and something I know very little about. I still hold the first part of that to be true (as evidenced by this site’s layout [twentysixteen FTW!], but the second half of that becomes less true every single time I go to a camp thanks to amazing presentations like this one. He started us off with a quick history of design tooling, starting with raw HTML, going through Flash and Responsive design and added a few critiques of the resulting world. He holds a premise that as we have simplified for accommodating ‘all‘ devices, we got too simple and all sites started to once again look too much alike. But now, here in the present and looking into the future, we have grids.
Firefox was the first to embrace this standard and all the others, even Microsoft’s Edge, have since followed.
At it’s core it sets to achieve the goals that Responsive introduced. Which I am going to oversimplify as ‘have the browser do the math’. This is seen in things like the use of ‘fr’ or fractions to set column and rows dimensions, template elements, implicit and explicit mixed use of elements and repeat built in. He also took care to thank the thought leaders that pushed this standard and made his work possible, like Jenn Simmons. The Q&A was delightful. If you are even the slightest bit curious about CSS Grid, this is the intro talk for you.

Automating WordPress Updates With Visual Regression

Andrew Taylor

You know what robots are really, really good at? Repetitive tasks. You know what repetitive task is really boring and tedious but the entire security of the internet depends on? Updates. Let’s make the robots do the work.
The short version, which Andrew has spelled out in detail in his blog and github example repo is this:
wp-cli update plugin/theme –all is awesome but dangerous. Doing it in a staging environment is really good path, but manually testing gets monotonous, neglected and frankly impossible at scale. Continuous Integration services can be set up with testing tools to test every page, every time when doing updates. Further, it can report and automate emails to you and clients who you are charging update maintenance fees. It is a win-win, since they get frequent updates, you get far less manual effort required and there is a ton of safety built into the process to never take down a live site with a update ever again!

Happiness Bar

I looked back through my notes (Thank you to github for making that so simple btw) for any mention of happiness bar and I realized that I have never written about what goes on at these things.
For those who have never been to a WordCamp, there is a designated table or space for volunteers to basically hold open office hours for any and all WordPress related questions. And when I say any and all, I mean it quite literally.
At one point two of us were diving into a javascript issue with a single asset load malfunctioning on the most recent Chrome update. For a good 20 minutes we dug and dug. Finally we made some suggestions of solving this but they left with the issue still affecting live traffic. I was overjoyed the next day to have the person find me to report that one of the solutions we suggested had been implemented and the issue was solved! There is nothing quite like that feeling of “we fixed this together”!
Other questions ranged from HTTPS issues, design suggestions and plugin related discussions. As quite often happens with any technical discussions I was introduced to several bits of software for the first time and got to spread my love of the WP-CLI and LastPass (well password managers in general but that is my go to). You meet folks from all walks of life and stages of their WordPress learning curve. While it is awesome to know the answers to certain questions from memory I absolutely love having to look up information and show people how I got to the solution. No one knows everything, but Google knows where to find any bit of technical knowledge if you learn how to ask.
If you are going to WordCamps and want to get in on this action, definitely reach out to the organizers and let them know. This is such a vital part of what makes WordCamps special.

Contributor Day

I am working on a separate blog post about this. Will link here when it is posted.

Wrapping Up

While I am awaiting the Gutenberg to harden a bit more I decided to start using the markdown language editor, if you see something weird (other than my spelling and grammar) please let me know.

This was my 16th conference in 2017. Not a significant number in and of itself. I have 10 more trips booked at the moment and likely will have 3 to 5 more added on to make me hit or get really close to my arbitrary goal fo 30 for the year. So this trip was the 53.3% mark on that path.
So much has changed since the last time I was in Boston for this event, not just in the world and state of the Word, but in me as well. I often think of the words of Sean Tierney from back at Pressnomics Paraphrasing – “People come and go like seasons and you don‚Äôt always know wYou can never be mad at summer for passing though.”
I have gotten to bask in the glow of so many bright and warm individuals in the course of my adventures and I hold each memory dear. I do get a longing feeling sometimes when I think about the fact that I only see certain people so few times a year and some people I might never see again. I can’t say thank you enough for being part of my journey. It has made every step of it worth it.

I seriously am looking forward to my next chance to visit the old city and find myself in the silicon valley of the east again. Hopefully sooner than later. At worst, it will be for WordCamp Boston 2018!

Design4Drupal: Seeing Richard Stallman’s office and the Freedom Trail in Boston

There was a certain magic in the air at Design4Drupal. I am not sure if it was because it was set in¬†MIT Stata Center, which was designed by¬†Frank Gehry, or if it was that you could see the inside window of Richard Stallman’s office¬†(though I didn’t get to see Sir Tim Berners-Lee’s office), or if it was because the father of Responsive Design,¬†Ethan Marcotte¬†was the featured keynote speaker on the second day. ¬†Maybe it was a combination of that and being in summer in Boston on the Freedom Trail with awesome folks from the Drupal community. ¬†Anyway you look at it, this was a great event.

Food and Fun

I was fortunate enough to get into town the Thursday evening before the event and meet up with some awesome Drupal folks for drinks at the oldest tavern in the USA and some awesome dinner right beside the statue of Paul Revere on the Freedom Trail.

Lunch Day 1

We had wraps.  I had the black bean and salad.  There were cookies and muffins from breakfast left.  Unfortunately I can find no pics of this.

Dinner Day 1

There was no formal plan for dinner on Friday night, with the official after party scheduled for Saturday.  We were left to our own devices and a group of us wandered to one of the fine breweries in the area, Cambridge Brewing Company.  This happening spot just off the MIT campus had great service and a really good selection.  I had the lentil burger and shared some Shishito peppers.  I was delighted that for some people at the table eating these Japanese delights was a first.

Drupal Karaoke

If you find yourself in Cambridge, do yourself a favor and go to Courtside for Karaoke on the weekend.  The fun loving DJ made this a night to remember.  He danced along to and sang back-up for a lot of songs in between his DJ duties.  I was very impressed with the quality of performance from my Drupal community members!

Lunch Day 2

The wraps were replaced with Jerked chicken and awesome spicy vegan patties with greens and sweet potato mash.  Again, photographic evidence does not exist as far as I can find.  It was delicious.

After party

I unfortunately missed the after party.  I got on a plane to come back to my beloved San Francisco instead.  From all accounts it was a pretty good time, though this is only pic I can find.

The Sessions

Opening Remarks

Using Data to Build the New Mass.gov

Kyle Magida and Connor McKay

This was a really great insight into how the Commonwealth is using Drupal 8 and machine learning to better serve the people.  At the heart of their success there is a story about the management of metadata from the User Journey.  This project serves 42 major agencies, 150 other agencies, plus all the other commissions and offices.  This adds up to 100s of authors, 15 content types and only 4 design team members to keep a handle on it all.  Drupal is at the heart of this approach.  Being open source, it helps them avoid procurement, which allows them to move faster and freer.  This is a really great case study on the consumable API for metadata and relationships.  Check out the recording (to be added to the session page on the design4drupal.org site)

Making mass.gov data-driven and constituent centric

Brian Hirsch

This was almost a continuation of the first session, but went into a lot more detail on the nature of the project and how it came about. ¬†Basically, they had come to a point of too¬†many pages to go manually refresh, over a million individual pages on mass.gov! ¬†They needed a strategy to go after the high value targets first. ¬†They decided to start at the top, applying the 80/20 rule. ¬†The research shocked everyone once they started down that path, 10% of content serves 89% of page requests. ¬†The user journeys¬†aligned with 20 different ‘clusters’ of government services. ¬†This helped steer them into a clear path where they have now updated the most used pages to be compliant for serving people with disabilities. ¬†It really comes down to unstructured data vs structured data. ¬†He said “The page metaphor is evaporating. The idea of title and body is useless and outmoded, We needed to think in terms of ‘chunks of data.'”

Keynote Day 1 – Agile Design

Kelly Albrecht
Kelly started off his talk with a very surprising (to me) fact: Over half of CIOs consider Agile strategy discredited. His central point is that we are mostly misunderstanding what Agile is really all about.

Agility is adaptability to a change in the situation. Think Spiderman. ¬†“Your agility is measured by the speed and effectiveness of your response.” This is completely reliant on a central set of values.
Values: Commitment, Focus, Openness, Respect, Courage.  Issues arise when there is a violation of one of these values. Very few of us are not doing the best we can. Very few of us are intentionally doing poorly.
Iterations provide an optimized awareness into a larger effort
getting into a shippable implement- make the best version of this you can
breaking larger things into workable pieces. Planning reduces stress
Agility is bringing good thinking to action quickly. Agile does not tell us not to have a plan, but to always be planning.

My sessions

I was very honored to be able to give 2 talks at this camp.  First up was a new talk I developed around the discovery process for sales and project planning with references to Motorhead. Everything Louder Than Everything Else!: Navigating stakeholder needs through better discovery

I also got the chance to share my love of storytelling with Every project is a story: Applying storytelling to your client interactions

How to Make Friends & Influence Strategy

Breann Kopcza

5 things to know:
Know your audience
Share a purpose
Get involved
Own a communication role
Keep your POV simple

 

DAY 2
Debugging, Profiling, & Rocking Out with Browser-Based Developer Tools!

Mike Herchel

It was wholly appropriate that we were at MIT, the birthplace of the term ‘drinking from a firehose‘ to see this talk. ¬†I did my best to keep up with him but after he showed me you can turn on from the document.designMode flag, I was distracted. ¬†Here are the parts that I did write down.
Cmd + Shift + C = devtools open (no more right mouseclicks needed)
H key toggles visibility via the hidden property when you have highlighted an element in Chrome dev tools.
in the console insert: document.designMode = ‘on’; (mind blown).
chrome://chrome-urls/ (works in airplane mode), flags-> experimental canvas dev tools
requires restart and then turn on under settings in dev tools

This does not to this talk justice.  This is a weeks worth of tools and tips in this talk. Seriously go check it out once posted on the session page.

Keynote – Responsive Design: Beyond Our Devices

Ethan Marcotte

It was a real pleasure to see one of the thought leaders of design, the man who coined the phrase Responsive Design. ¬†He started off by asking “Where is this all going? ¬†Where do we go past Desktop design?”
As we are moving from page to patterns, it matters a little less what the answer is. ¬†He said “I thought I would redesign patters, instead they redesigned me.” Since going down this path has lead him to a single driving question that keeps him up at night, “What if someone doesn’t browse the web like I do?” This is the most import question in his process.
A well crafted responsive design is device agnostic Рa good guiding design principal.  He feels we are in a golden age of automation tooling for style guides creation.  He talked about tools like Pattern Platform Labs and Fractal.  He ended by telling us all to go and read a work that has really inspired him:
The Language of Modular Design by  Alla Kholmatova

We are not preparing for more desktop browsers, though their numbers are not shrinking.  Instead we must learn to expand our understanding of the smart phone and realize that there are a billion new users coming online soon. They are in developing countries, young and on a 2G connections.

 

Wrapping up

Boston is an interesting city with a lot of history.  I dig the vibe as it reminds me of the bay area in a lot of ways.  I am looking forward to going back next month for WordCamp although that will not be in the same building where the Web standards that we leverage are written.  I am still a bit in awe that I got to participate in this camp and deliver 2 talks in those sacred halls of learning.