All posts by Max

About Max

I recently graduated from Albertson College of Idaho and have moved back home to the great NorthWest. I currently working for Northwest Technology in Ferndale Washington as their web developer.

Creating a WARC archive for a WordPress Blog

I have been working on a few new concepts for maxbronsema.com but wanted to create a copy of what the site, mostly the blog, before implementing these new ideas. My blog has been around for a long time and I don’t like the idea of deleting a lot of my writing. One day my family may want to read it. In my daily work I have some experience creating site copies but I had not tried it with a blog. For the longest time as a web developer I have been ok with my work being ethereal, a site or project is built and then it is a living entity changing each and every day, occasionally being rebuilt entirely with no semblance of the prior work existing. I am not sure I am comfortable with that concept any longer as more and more of the web I grew up with and the parts I created are lost.

The primary goal was to create a copy in the WARC format. WARC is the Web Archive File format. For a long time it has been straightforward to create a WARC file but cumbersome to view. Using the command line utility wget creating a copy of a site is straightforward.

$wget --mirror --convert-links --adjust-extension --page-requisites --no-parent https://yoururl.com --warc-file="name-of-file-you-wish-to-create"

The awesome Archive Team has a nice write-up on using wget for just this purpose and importantly the why behind using the WARC format.

Once you have your site generated as a WARC you can store it in your favorite backup destination as well as someplace else just in case that copy gets destroyed. You can view it at anytime by using the amazing ReplayWeb.page service. It is part of the great Web Recorder project.

Go forth and create personal archives of your writing and work.

Home Projects

I recently moved into a new home after living for nearly six years in another. In those six years I got everything fixed and had a plan for what to do next. I hope to document the fixes in this new house and share the progress as I learn some new skills. This house is much older though has been lovingly maintained and updated over the decades.

I like small maintenance fixes like these. I haven’t glazed a window in a long time, probably with my Dad when I last did it. Time to start my own collection of glazier points.

The co-ax cable jumble will be solved using this nifty tool. The tone tester is going to be useful so that I can label which cord goes to which room. For an old house, it seems to have a co-ax cable in nearly every room.

The outlet box hopefully just needs a little caulking and the screws securing it to the wall moved a little bit.

Since starting this draft, some small fixes/upgrades have been made. A little sink stopper was dropped in place in the middle floor bathroom and a dud light bulb was replaced. Just small stuff but it is moving forward. I also mowed the front yard and raked the flower beds for the first time.

A banjo player standing in front of an orange tinged sunset

For Folks’ Sake

My family and I have been attending the Juan De Fuca Festival of the Arts (JFFA) in Port Angeles, WA for many years. Due to COVID-19 it was suspended for this year. We decided to fill our home with folk/Americana/Celtic music purchased at JFFA from artists over the years and share our favorites here.

While one of the best parts of JFFA is finding new favorites, we hope this list lets you find a new favorite yourself. Share your favorites in the comments.

Rosie & the Riveters

https://www.rosieandtheriveters.com/

We saw them live at JFFA last year and loved the mix of music and political commentary in the lyrics. Buy their album and they will invest 20% of the profits into women’s projects and businesses. Just remember to Ms Behave

Laura Love

https://www.facebook.com/octoroonbiography/

Laura has been touring for what seems like a long time. We have seen her perform a few times and each time is special. The folk songs she weaves are worth the listen.

Scott Cook

https://scottcook.net/tunes

Personally my favorite act I have ever discovered at JFFA. He has been back one more and we were thrilled when he stopped on tour through Bellingham. In each setting his music has been authentic and easy to connect to. It also makes you think. His new album is coming out soon, pre-order it now. Order One More Time Around as well to listen to my favorite song of his, https://scottcook.net/track/1813645/pass-it-along.

Derina Harvey Band

https://www.derinaharvey.com/

What a wonderful show and powerful music. Derina Harvey Band was a blast to listen to. The recordings are much like the live performance. They have a new single out, Northern Lights of Labrador. The song in the video is one we enjoyed live.

Jim Page

https://jimpage.net/music-store/

Technically, we saw Jim at the Oregon Country Fair several years ago, but it fits right into the JFFA vibe so I am going to pretend he would have been there this year. We listened to Seattle Songs this weekend. He has what seems to be an unrivaled catalog, check out the songs/albums and support Jim.

Brook Adams

https://brookadams.com/

Another, non-JFFA music favorite, that should be at JFFA. I met Brook through my boss at the time and his original music is entertaining, makes one think, and is darn fun. Go buy some music.

Moira Smiley

A lyrical voice and the coolest rhythms. We have only seen Moira once but it was memorable. She has a lot of albums, but this is the one that got us hooked. https://moirasmiley.com/?download=circle-square-diamond-flag-cd

Polecat

https://www.polecatmusic.com/home

So. Much. Fun. Polecat is always a blast with cool instrumentals and being on the front of the beat. They have a deal right now, four albums for $25. This is something great to do while social distancing, have a personal dance party with Polecat!

PaperBoys

https://paperboys.com/

Fiddle. Celtic. Rock. If you have not heard of the PaperBoys, well, that is ok. Do yourself a favor and buy their album Calithump. We have seen them at JFFA, Bellingham, and even at a local arts place in Lynden, WA. A joy to listen too.

Dustbowl Revival

http://www.dustbowlrevival.com/home

This was a great surprise. We were at a stage just getting some food and Dustbowl Revival started their set. We danced away the whole set. They also appear to be doing virtual music festivals over the summer. Tune in for great music.

The Sam Chase and the Untraditional

http://www.thesamchase.com/

Really fun music. Lots of instruments. I believe they have made it to JFFA more than once. I believe they are from the San Francisco area, they certainly have a more relaxed approach to folk music. They have a new album out that they describe as a Faustian spaghetti western rock opera. I can’t wait to hear it.

Lindsay Lou

https://www.lindsayloumusic.com/

While I have not had a chance to listen to Lindsay’s new music, we were hooked when she showed up and played as Lindsay Lou and the Flatbellies. The album Ionia is fantastic. The song “The River Jordan,” is my second favorite from all of the music listed here only to Scott Cook’s “Pass it along.” I am excited to purchase and listen to her newer works.

Driver Seat Rebuild + Heated Seat

KK-Louise’s front seats have been in need of some help for quite some time. I had some nice seat covers I purchased probably when I first came into possession of KK, some fifteen years ago helping me ignore the need. However, as my daily driver the seat I sat in really needed some attention as I could no longer get comfortable. I ordered a set of horsehair pads from Wolfsburg West and some new oatmeal seat covering as the originals lasted nearly fifty years. I have heard the injected mold pads might be a bit more comfortable but were hard to get the covers over. As I was at this project I figured I would try to add some heated seat elements to the back and bottom as well. I found a set on ebay that sound good and installed those as well.

A '71 VW Van seat with a torn corner and pretty much no more padding on the seat.
This is my original driver seat with the back laying on a pair of sawhorses.

Since so much of the seat was gone it was easy to deconstruct. The hog rings that held the cover to the frame were few and far between and came apart with some pliers. The pads went into the garbage but I hung onto the original covers. I am thinking of making some sort of center console and covering it with these remnants. Something will need to hold the heated seat switches.

The frame was in good order. I thought something would be broken as it had been so uncomfortable the past several months but it was just that the pads were mostly gone. I put some seat felt over the bottom (also ordered from Wolfsburg West), the new pad, and then some more felt which I sprayed with adhesive to stick to the pad. I wrapped it with a few bungees to secure it and let it dry. While that was happening I cut the bottom seat heater to size and placed it making sure the wire would run under the seat and out towards the passenger seat as I plan to run the wires up the center of the floor.

The bottom pad in place with felt over it. Bungee cords strung around the outside to hold it all in place.
The bottom pad with felt over it ready for the seat heater element.
The seat heater in place within the middle of the seat. It is white ceramic.
Seat heater pad in place.

The new seat cover itself went on pretty easily. There was a little tugging and pulling but I was able to secure it with some new hog rings and make it feel tight. I had set the seat out on the roof of the bus in the sun to soften up a bit while I was working on the pad. I was worried that the felt would get rolled up while putting the cover on but the glue did what it was supposed to do and kept it all in place.

The back of the seat was much the same as the bottom. The driver side seat has a back covering the frame, the passenger side does not. Getting the cover to go over the frame squarely was the most challenging task. Once I get to the passenger side, it doesn’t have a a cover on the back so I expect it to be easier.

Back pad installed with felt over it and heater pad positioned.
The back pad, felt, and heater pad in place.
Newly reupholstered seat installed back in the van, looking at it from the side.
Installed back in KK-Louise.
The seat in the bus looking at it through the front windshield. Mostly square.

The seat reupholster project went really well. The seat in once again comfortable and warm. I will write-up the heated seat wiring soon. I look forward to completing the passenger seat as currently it pitches passengers forward making longer rides a bit uncomfortable.

HighEdWeb 2018

HighEdWeb 2018 was fantastic. I had a markedly different experience than my first HighEdWebin 2017. The lineup of discussions this year were more forward thinking and highly relevant. The conference team did a great job putting together an exciting lineup and great activities.

This year the conference was on the west coast in the beautiful city of Sacramento in California. The pace of sessions, breaks, and time outside of the conference center was well balanced. I was fortunate enough to again be selected to speak to attendees. I presented this year on protecting and promoting your brand by leveraging design systems. I am grateful for the positive response and feedback shared by attendees.

Following are my personal notes from the sessions I attended.

Putting Atom Design to work

  • Lean on your pattern library, it will get stronger the more you do.
  • An actual plug for Adobe XD from a user. Another plug for Sketch too.
  • https://fractal.build/ is a newer player in the atomic design world

Give Content Contributors the AX

  • AX = the relationship your content authors have with their authoring tools
  • We take personnel problems, systems problems, and make them a training issue.
  • You can innovate by making unicorns.
  • Kurzweil – test websites with this too – https://www.kurzweiledu.com/default.html
  • The AX should prevent authors from making inaccessible content or at least guide them into making it accessible.
  • Resource:
    • https://github.com/LRNWebComponents/hax-body
    • oerschema.org
    • bit.ly/haxplaylist
    • haxtheweb.org
    • elmsln.org

Diversity on websites

  • Information architecture as a tool of oppression
  • Put Diversity at a high level on the global nav
  • Often there is a microsite with its own URL (it needs to be found and in other high level navs, say admissions)
  • Landing page is another strategy (link to from top level)
  • Look at pages and be critical of objectification. Make sure silencing does not occur.
  • Stats page should not show male/female. Instead talk about pronouns, make sure imagery does not bucket females with skirts for example.
  • Diversity as interest convergence.
  • You have to be all about balance.
  • Research shows limited content addressing black interests of concern, no messaging around Ferguson, Charlottesville
  • The best of the research
    • University of San Francisco
    • Loyola Chicago
  • Top Tips
    • Build a diversity landing page
    • Link to the page across your sites and make it near the top level
    • Balance authentic and aspirational diversity content, acknowledge shortcomings, be careful of the word “Strive”, a bit spineless
    • Create a small number of high quality pages, then expand
    • Tell real stories and real Information
  •   Short term
    • Images, candids and profile photos with captions and names
    • unify, elevate, promote content
    • do a focus group with non-majority groups and have web team participate

A hat of many hats – becoming the web product owner

  • Product Stewardship – not just product management.
  • “Focus on continuous delivery of valuable … user experience …”
  • Sometimes the product owner is termed Business Analyst
  • The Questions
    • What problem are we solving?
    • Who are we solving it for?
    • How are we going to measure success?
  • I like the idea of a website roadmap.
  • Ithaca.edu is a new Drupal higher ed site.
  • Change our homepage meeting to web product team meeting.
  • Trying to be a project manager and a product owner means being terrible at both.

Beautifully Accessible

  • figma is a design tool for the web
  • Change thinking from user experience to human experience
  • In 2016 census 12.5% of all americans reported living with a permanent disability, 40 million people
  • Mentioned :focus-visible, a handy newer pseudo property
  • https://modalzmodalzmodalz.com/ shows issues with modals

 

 

Gettin’ Griddy With It – CSS Grids

  • flex is a straight line, row or column, if it looks like a grid, then flexwrap has been enabled
  • There is a flex cross axis which determines where content is lined up
  • flex: 0 0 auto makes things stay the size they are, no growing or shrinking
  • grid-gap: #px; This is cool, it lets the grid determine the spacing between each grid box automatically
  • To position items within the grid you can use grid-column and grid-row shorthand properties.
  • grid-column and -row also support span (e.g. grid-column 2 /span 2);
  • grid-row(1/-1); will make content span the entire height of the grid.
  • grid just continues to be awesome
  • grid template areas allow you to build out named grids to plop elements into which is great for easily seeing what is going on later. It also allows very rapid prototyping.
  • minmax value is versatile way to ensure responsive grids. You can do something like repeat:(auto-fill, minmax(200px, 1fr);

We developed an online CMS training and look what happened

  • Staff don’t have to travel to train.
  • Drupal Training is then how we can tie in accessibility training too
  • Training videos, request access to sandbox, reviewed by staff, then access to live website. Takes about 1.5 hours of time.
  • Average about ~100 new users a year
  • Quality of help ticket requests are vastly improved since starting training
  • Know your primary audience
  • Break your training into small series, 5 minutes or less.
  • Make it like a conversation in the video.
  • We should use some improved equipment as well, not just built-in system stuff.
  • Another plug for hemingwayapp.com
  • In the documentation to go with your video use screenshots as needed, provide the steps needed assuming the user did not watch the video
  • Could we have students build this out?
  • Beta test the videos a lot and listen to the feedback, look for patterns of things consistently missed
  • We could include a page about how to request help and what a good support request looks like
  • Maybe add an optional module on “writing for the web”

Don’t call it an intranet

  • Internal communications was not a focus at the school, hence email overuse, paper flyers, and external websites. Tons of paper is not a sustainable practice.
  • Refocus external sites for external audiences, reduce email overload to students
  • Helps build an intentional community culture
  • Evaluated packaged intranet solutions, met with campus stakeholders
  • Make the case: articulate the benefits of building on top of a system you already understand, develop a design, build a prototype
  • Plan the project: scope out needs vs. wants, do a content audit, IA development.
  • Big effort to collect all of the external content that really should have been in the intranet
  • Overcoming the perceptions of the existing intranet
  •  ** Name it something that does not include intranet
  • The login greets by their name, shows date and time, and shows the weather in their location
  • The landing page sort of personalizes for the role you have
  • Identify power users (those that send lots of emails or make lots of posters), and train them on how to use the system. Also tried to align with new internal communication strategy.
  • Measured success in increased traffic and pageviews. It has reduced email use and refocused external sites to be for prospective students.
  • Search behavior has changed on external sites, they were able to retire and consolidate legacy sites, got rid of internal use forms from external sites
  • Have created a place where institutional knowledge can reside rather than only in people
  • Search has been a pitfall, users still search for external resources inside of the intranet and the other way around. Need an elegant way to show separate resources.
  • They have 3 people doing this, definitely a product owner exists whose main goal is to increase internal communication practices and nurture the intranet
  • Continue to review the data and use it to support adoption of moving content into the intranet

How do we know how we are doing? – Analytics strategy

  • Understand your user goals and needs – set up interviews with as many stakeholders as possible.
  • Keep conversations high level, you don’t have to focus on Analytics
  • Are there key events throughout the year that they work toward every year
  • Ask students how they use the site
  • Talk to your own team
  • Content plan and strategy also drives analytics
  • Questions they wanted to answer
    • Demographics
    • Audience breakdown
    • popular content, most shared content, normal top pages, sessions, etc…
    • Downloads
    • nav patterns
    • top screen sizes and devices
    • sources

Google behavior report gives a lot of great starting data

  • Behavior flow is a good starting point to see other entry pages into your site
  • She sets up individual segments based on what pages people view – gives more personal data
  • Coordinated campaign UTM tags between alumni and marcomm so we can see what campaigns are driving content to websites
  • Hojar is used by Stanford Law as well
  • They craft custom analytics measurements based on the campaigns they choose to run
  • Match your content calendar with analytics visits to see if people click on the content when it is distributed
  • https://law.stanford.edu/analytics-recipe-book

Can you do it in the dark? Making your social media more accessible.

  • The unemployment and underemployment for disability is something like 70%, I want to look into that
  • Twitter and FB have pretty good support. For instagram, put in alt description in the caption unless the caption clarifies it. Example: [Image Description: …]
  • Facebook supports SRT file uploads
  • Instagram/Twitter – you need to burn the captions into the video
  • Add audio description for videos and broadcasts – social media currently does not support audio description
  • Avoid jargon and technical talk where possible
  • Be clear, concise, make it stick
  • Champion accessibility through the entire content creation process
  • Social media is now embedded into the website content, we need to be clear to make that link and keep our content accessible
  • There is a facebook accessibility team to follow on facebook and twitter accessibility twitter account
  • Involve people with disabilities.
  • Look for a guide on accessible snaps (SnapChat)
  • Use camel case in your hashtags
  • Buffer is a great accessible platform, it is part of their culture
  • Hootsuite has it on their roadmap and they believe are close to tieing in accessible posts
  • Build in accessible content creation time into the editorial calendar