Bob Liu Thoughts on UX Design & Strategy 2024-04-23T22:50:46Z https://liu.design/ Bob Liu bob@liu.design What the Board Said 2024-04-23T00:00:00Z https://liu.design/blog/talk-back-board/ <figure class=""> <source type="image/webp" srcset="https://liu.design/blog/talk-back-board/tin-can-whiteboards-1440w.webp 1440w, https://liu.design/blog/talk-back-board/tin-can-whiteboards-2400w.webp 2400w" sizes="100vw" /> <source type="image/jpeg" srcset="https://liu.design/blog/talk-back-board/tin-can-whiteboards-1440w.jpeg 1440w, https://liu.design/blog/talk-back-board/tin-can-whiteboards-2400w.jpeg 2400w" sizes="100vw" /><img src="https://liu.design/blog/talk-back-board/tin-can-whiteboards-1440w.jpeg" width="1440" height="960" alt="Illustration of two whiteboards connected by a tin can telephone" loading="lazy" decoding="async" /> </figure> <p>My team at the University of Arizona Libraries uses whiteboards to capture feedback from library users. We leave questions or prompts on the whiteboard and invite library visitors to respond with sticky notes. We call them “talk-back boards.”</p> <p>Talk-back boards are often displayed in museums or libraries to capture free-form feedback as a part of visitor study projects. Museums also use them for interactive programs where visitors can participate.</p> <p>We set up the first talk-back board at our library in 2018. Over the years, more than 40 boards were displayed with topics including website feedback, book recommendations, space evaluation, and creative projects. We captured responses for 37 boards in the library’s <a href="https://lib.arizona.edu/research-repo" target="_blank" rel="noopener noreferrer">UX Research Repo</a>.</p> <p>Here’s a recap of four of my favorite talk-back boards.</p> <h2>February 2024: “What Brings You to the Library Today?”</h2> <div> <div class="gallery undefined" id="gallery-board-visit"> <figure class=""> <source type="image/webp" srcset="https://liu.design/blog/talk-back-board/board-visit-1440w.webp 1440w, https://liu.design/blog/talk-back-board/board-visit-2400w.webp 2400w" sizes="100vw" /> <source type="image/jpeg" srcset="https://liu.design/blog/talk-back-board/board-visit-1440w.jpeg 1440w, https://liu.design/blog/talk-back-board/board-visit-2400w.jpeg 2400w" sizes="100vw" /> <a href="https://liu.design/blog/talk-back-board/board-visit-2400w.jpeg" data-pswp-width="2400" data-pswp-height="3200" data-cropped="true" target="_blank"> <img src="https://liu.design/blog/talk-back-board/board-visit-1440w.jpeg" width="1440" height="1920" alt="A whiteboard in an open space covered by pink and red sticky notes" loading="lazy" decoding="async" /> </a> </figure> </div> <script type="module"> import PhotoSwipeLightbox from '/assets/js/photoswipe-lightbox.esm.min.js'; import PhotoSwipe from '/assets/js/photoswipe.esm.min.js'; const lightbox = new PhotoSwipeLightbox({ gallery: '#gallery-board-visit', children: 'a', imageClickAction: 'close', tapAction: 'close', showHideAnimationType: 'fade', arrowPrev: false, arrowNext: false, zoom: false, close: false, counter: false, pswpModule: PhotoSwipe, preload: [1, 1] }); lightbox.init(); </script> </div> <p>Our team want to know what motivates people to visit the library in person, so we often post the same question in different library locations. This board was set up during the week of Valentine’s Day in 2024, and we prepared pink, orange, and red sticky notes to celebrate.</p> <p>In the instructions on the board, we asked the participants to add new answer with a sticky note and vote on existing answers with a smaller sticker. The same instructions were included for most talk-back boards we set up.</p> <blockquote class="pull-right"> <p>Answers that received more than 3 votes:</p> <ol> <li>“gaslight myself to think that I’m studious” (+6)</li> <li>“bc then I can get a silly little coffee :)” (+5)</li> <li>“To cry” (+5)</li> <li>“TO LOCK TF IN!” (+4)</li> <li>“To be Studious” (+3)</li> <li>“To take a piss” (+3)</li> <li>“coding HW :( #WOMENINSTEM” (+3)</li> </ol> </blockquote> <p>327 sticky notes were captured in 8 days. We analyzed each answer and extracted the following themes:</p> <ol> <li>Studying/working (100 responses)</li> <li>Relationship (37 responses)</li> <li>Restroom (11 responses)</li> <li>Library technology (8 responses)</li> <li>Borrowing/returning books (7 responses)</li> <li>Buying coffee (7 responses)</li> <li>View/scenery (6 responses)</li> <li>Bad weather (4 responses)</li> <li>Reminiscence (4 responses)</li> </ol> <p>In addition to the common reasons of visiting the library such as studying or using the restroom, we were glad to see answers mentioning library technology as a result of the Libraries’ revamped and expanded <a href="https://lib.arizona.edu/borrow/tech" target="_blank" rel="noopener noreferrer">tech lending program</a>. Interestingly, the Valentine’s color scheme may have led the answers in a certain way, which is why “relationship” became the second most popular theme.</p> <p>Our student assistant, Linda Lopez, also asked ChatGPT to analyze the answers. When doing so, she found that it could not recognize terms like “lock in” and “grind” as Gen Z slang for studying. She then manually edited some of the data before running the analysis in ChatGPT again, and here are the themes she got:</p> <ol> <li>Study purposes</li> <li>Specific academic work</li> <li>Personal activities</li> <li>Specific tasks</li> <li>Humor</li> <li>Interpersonal connections</li> <li>Emotional state</li> <li>Physical needs</li> <li>Miscellaneous</li> </ol> <h2>August 2023: “Write a Monsoon Haiku!”</h2> <div> <div class="gallery undefined" id="gallery-board-haiku"> <figure class=""> <source type="image/webp" srcset="https://liu.design/blog/talk-back-board/board-haiku-1440w.webp 1440w, https://liu.design/blog/talk-back-board/board-haiku-2400w.webp 2400w" sizes="100vw" /> <source type="image/jpeg" srcset="https://liu.design/blog/talk-back-board/board-haiku-1440w.jpeg 1440w, https://liu.design/blog/talk-back-board/board-haiku-2400w.jpeg 2400w" sizes="100vw" /> <a href="https://liu.design/blog/talk-back-board/board-haiku-2400w.jpeg" data-pswp-width="2400" data-pswp-height="3199" data-cropped="true" target="_blank"> <img src="https://liu.design/blog/talk-back-board/board-haiku-1440w.jpeg" width="1440" height="1919" alt="A whiteboard in an open space covered by white and yellow sticky notes" loading="lazy" decoding="async" /> </a> </figure> </div> <script type="module"> import PhotoSwipeLightbox from '/assets/js/photoswipe-lightbox.esm.min.js'; import PhotoSwipe from '/assets/js/photoswipe.esm.min.js'; const lightbox = new PhotoSwipeLightbox({ gallery: '#gallery-board-haiku', children: 'a', imageClickAction: 'close', tapAction: 'close', showHideAnimationType: 'fade', arrowPrev: false, arrowNext: false, zoom: false, close: false, counter: false, pswpModule: PhotoSwipe, preload: [1, 1] }); lightbox.init(); </script> </div> <p>In June and July, people in Tucson anxiously wait for the monsoon rains to bring the cure for the unbearable Arizona heat. That’s also the time of the year when we set up this recurring creative project where library visitors are invited to write a haiku, which are 3-line poems in the following format:</p> <ul> <li>First line: 5 syllables</li> <li>Second line: 7 syllables</li> <li>Third line: 5 syllables</li> </ul> <p>Here are four most popular haikus of the 2023 monsoon season:</p> <blockquote class="pull-right"> <p><em>10 votes:</em><br /> Why so late Monsoon?<br /> Are you angry at humans<br /> Since we broke the earth?</p> </blockquote> <blockquote> <p><em>11 votes:</em><br /> I like to eat hail<br /> oh it is very yomy<br /> Thank you so much</p> </blockquote> <blockquote class="pull-right"> <p><em>7 votes:</em><br /> Welcome monsoon, hi!<br /> We are so happy you’re here.<br /> Thanks for bringing life.</p> </blockquote> <blockquote> <p><em>7 votes:</em><br /> metamorphic rocks<br /> foliated and shiny<br /> with or without rain</p> </blockquote> <p>When capturing answers on this board, our friend Kevin O’Dea, Platforms Engineer at the Libraries, helped us develop a workflow to quickly transcribe text from photos. He created a Photoshop script that detects sticky notes, crops them out, and exports them to individual images. He then used OCR tools to extract text from the images.</p> <h2>December 2021: “What Stories About Social Justice and Anti-Racism Matter to You?”</h2> <div> <div class="gallery undefined" id="gallery-board-social-justice"> <figure class=""> <source type="image/webp" srcset="https://liu.design/blog/talk-back-board/board-social-justice-1440w.webp 1440w, https://liu.design/blog/talk-back-board/board-social-justice-2400w.webp 2400w" sizes="100vw" /> <source type="image/jpeg" srcset="https://liu.design/blog/talk-back-board/board-social-justice-1440w.jpeg 1440w, https://liu.design/blog/talk-back-board/board-social-justice-2400w.jpeg 2400w" sizes="100vw" /> <a href="https://liu.design/blog/talk-back-board/board-social-justice-2400w.jpeg" data-pswp-width="2400" data-pswp-height="3200" data-cropped="true" target="_blank"> <img src="https://liu.design/blog/talk-back-board/board-social-justice-1440w.jpeg" width="1440" height="1920" alt="A whiteboard with a question: What stories about social justice and anti-racism matter to you? and answers on sticky notes" loading="lazy" decoding="async" /> </a> </figure> </div> <script type="module"> import PhotoSwipeLightbox from '/assets/js/photoswipe-lightbox.esm.min.js'; import PhotoSwipe from '/assets/js/photoswipe.esm.min.js'; const lightbox = new PhotoSwipeLightbox({ gallery: '#gallery-board-social-justice', children: 'a', imageClickAction: 'close', tapAction: 'close', showHideAnimationType: 'fade', arrowPrev: false, arrowNext: false, zoom: false, close: false, counter: false, pswpModule: PhotoSwipe, preload: [1, 1] }); lightbox.init(); </script> </div> <p>In 2021, the Main Library unveiled the new <em>Books that Matter</em> collection that focuses on social justice and anti-racism. We set up this board to learn what books students think should be added to this collection.</p> <p>Here are seven answers with the most votes:</p> <ol> <li>“JUSTICE 4 PALESTINE” (+7)</li> <li>“gender pay gap” (+5)</li> <li>“criminal justice system” (+4)</li> <li>“how to identify &amp; disrupt white supremacy” (+3)</li> <li>“non-stereotypical immigrant stories” (+3)</li> <li>“Maternal health” (+3)</li> <li>“Anti-capitalist stories” (+3)</li> </ol> <h2>September 2021: “How Much Did You Spend on Textbooks &amp; Homework Access Codes This Semester?”</h2> <div> <div class="gallery full-width" id="gallery-interaction-textbook"> <figure class=""> <source type="image/webp" srcset="https://liu.design/blog/talk-back-board/interaction-textbook-1-1440w.webp 1440w, https://liu.design/blog/talk-back-board/interaction-textbook-1-2400w.webp 2400w" sizes="100vw" /> <source type="image/jpeg" srcset="https://liu.design/blog/talk-back-board/interaction-textbook-1-1440w.jpeg 1440w, https://liu.design/blog/talk-back-board/interaction-textbook-1-2400w.jpeg 2400w" sizes="100vw" /> <a href="https://liu.design/blog/talk-back-board/interaction-textbook-1-2400w.jpeg" data-pswp-width="2400" data-pswp-height="1800" data-cropped="true" target="_blank"> <img src="https://liu.design/blog/talk-back-board/interaction-textbook-1-1440w.jpeg" width="1440" height="1080" alt="A student handing a marker to another student to answer questions on a whiteboard" loading="lazy" decoding="async" /> </a> </figure><figure class=""> <source type="image/webp" srcset="https://liu.design/blog/talk-back-board/interaction-textbook-2-1440w.webp 1440w, https://liu.design/blog/talk-back-board/interaction-textbook-2-2400w.webp 2400w" sizes="100vw" /> <source type="image/jpeg" srcset="https://liu.design/blog/talk-back-board/interaction-textbook-2-1440w.jpeg 1440w, https://liu.design/blog/talk-back-board/interaction-textbook-2-2400w.jpeg 2400w" sizes="100vw" /> <a href="https://liu.design/blog/talk-back-board/interaction-textbook-2-2400w.jpeg" data-pswp-width="2400" data-pswp-height="1799" data-cropped="true" target="_blank"> <img src="https://liu.design/blog/talk-back-board/interaction-textbook-2-1440w.jpeg" width="1440" height="1079" alt="A student using writing on a whiteboard with a question: How much did you spend on textbooks this semester" loading="lazy" decoding="async" /> </a> </figure> </div> <script type="module"> import PhotoSwipeLightbox from '/assets/js/photoswipe-lightbox.esm.min.js'; import PhotoSwipe from '/assets/js/photoswipe.esm.min.js'; const lightbox = new PhotoSwipeLightbox({ gallery: '#gallery-interaction-textbook', children: 'a', imageClickAction: 'close', tapAction: 'close', showHideAnimationType: 'fade', arrowPrev: false, arrowNext: false, zoom: false, close: false, counter: false, pswpModule: PhotoSwipe, preload: [1, 1] }); lightbox.init(); </script> </div> <p>In 2021, our library was ready to implement a flat-fee textbook program introduced by the university’s book store. Two librarians who led the project wanted to learn how much students spent on textbooks and homework access codes prior to this program.</p> <p>Our student assistant Riley Zuckert, who has a background in data science, designed a talk-back board that visualizes data. She set up the board with two questions:</p> <ul> <li>How much did you spend on textbooks this semester?</li> <li>How much did you spend on homework access codes this semester?</li> </ul> <p>Under each question, she included a vertical axis to represent cost ranges from $0 to $800+. She then invited students to mark their numbers on the axis.</p> <p>The board collected 308 answers over two weeks. We then calculated the percentages based on the answers:</p> <p><em>How much did you spend on textbooks this semester?</em> (Based on 170 answers)</p> <ul> <li>$0: 22.35%</li> <li>$1-$99: 21.18%</li> <li><strong>$100-$199: 27.06%</strong></li> <li>$200-$299: 15.29%</li> <li>$300-$399: 7.06%</li> <li>$400-$499: 2.35%</li> <li>$500-$599: 0.59%</li> <li>$600-$699: 0.59%</li> <li>$700-$799: 0%</li> <li>$800+: 3.53%</li> </ul> <p><em>How much did you spend on homework access codes this semester?</em> (Based on 138 answers)</p> <ul> <li><strong>$0: 36.23%</strong></li> <li>$1-$99: 30.43%</li> <li>$100-$199: 20.09%</li> <li>$200-$299: 4.35%</li> <li>$300-$399: 0.72%</li> <li>$400-$499: 2.17%</li> <li>$500-$599: 0%</li> <li>$600-$699: 0%</li> <li>$700-$799: 0%</li> <li>$800+: 0.72%</li> </ul> <p>In the meantime, Lauren Dunn, intern on our team, ran a survey with the same questions on Instagram and collected 20 more answers. Riley then combined the data from the talk-back board and Instagram to created the following histograms to visualize the answers:</p> <div> <div class="gallery full-width" id="gallery-cost-visualized"> <figure class=""> <source type="image/webp" srcset="https://liu.design/blog/talk-back-board/textbook-cost-visualized-1440w.webp 1440w, https://liu.design/blog/talk-back-board/textbook-cost-visualized-2400w.webp 2400w" sizes="100vw" /> <source type="image/jpeg" srcset="https://liu.design/blog/talk-back-board/textbook-cost-visualized-1440w.jpeg 1440w, https://liu.design/blog/talk-back-board/textbook-cost-visualized-2400w.jpeg 2400w" sizes="100vw" /> <a href="https://liu.design/blog/talk-back-board/textbook-cost-visualized-2400w.jpeg" data-pswp-width="2400" data-pswp-height="1282" data-cropped="true" target="_blank"> <img src="https://liu.design/blog/talk-back-board/textbook-cost-visualized-1440w.jpeg" width="1440" height="769" alt="Three histograms that visualize data for the question: How much did UArizona students spend on textbooks in Fall 2021?" loading="lazy" decoding="async" /> </a> <figcaption>Image Credit: Riley Zuckert</figcaption> </figure><figure class=""> <source type="image/webp" srcset="https://liu.design/blog/talk-back-board/access-code-cost-visualized-1440w.webp 1440w, https://liu.design/blog/talk-back-board/access-code-cost-visualized-2400w.webp 2400w" sizes="100vw" /> <source type="image/jpeg" srcset="https://liu.design/blog/talk-back-board/access-code-cost-visualized-1440w.jpeg 1440w, https://liu.design/blog/talk-back-board/access-code-cost-visualized-2400w.jpeg 2400w" sizes="100vw" /> <a href="https://liu.design/blog/talk-back-board/access-code-cost-visualized-2400w.jpeg" data-pswp-width="2400" data-pswp-height="1283" data-cropped="true" target="_blank"> <img src="https://liu.design/blog/talk-back-board/access-code-cost-visualized-1440w.jpeg" width="1440" height="769" alt="Three histograms that visualize data for the question: How much did UArizona students spend on homework access codes in Fall 2021?" loading="lazy" decoding="async" /> </a> <figcaption>Image Credit: Riley Zuckert</figcaption> </figure> </div> <script type="module"> import PhotoSwipeLightbox from '/assets/js/photoswipe-lightbox.esm.min.js'; import PhotoSwipe from '/assets/js/photoswipe.esm.min.js'; const lightbox = new PhotoSwipeLightbox({ gallery: '#gallery-cost-visualized', children: 'a', imageClickAction: 'close', tapAction: 'close', showHideAnimationType: 'fade', arrowPrev: false, arrowNext: false, zoom: false, close: false, counter: false, pswpModule: PhotoSwipe, preload: [1, 1] }); lightbox.init(); </script> </div> <h2>Takeaways</h2> <div> <div class="gallery undefined" id="gallery-respond-to-board"> <figure class=""> <source type="image/webp" srcset="https://liu.design/blog/talk-back-board/respond-to-board-1440w.webp 1440w, https://liu.design/blog/talk-back-board/respond-to-board-2400w.webp 2400w" sizes="100vw" /> <source type="image/jpeg" srcset="https://liu.design/blog/talk-back-board/respond-to-board-1440w.jpeg 1440w, https://liu.design/blog/talk-back-board/respond-to-board-2400w.jpeg 2400w" sizes="100vw" /> <a href="https://liu.design/blog/talk-back-board/respond-to-board-2400w.jpeg" data-pswp-width="2400" data-pswp-height="1800" data-cropped="true" target="_blank"> <img src="https://liu.design/blog/talk-back-board/respond-to-board-1440w.jpeg" width="1440" height="1080" alt="Three students pointing at sticky notes on a whiteboard at the entrance to a public space" loading="lazy" decoding="async" /> </a> <figcaption>Talk-back board at the University of Arizona Main Library, March 2020</figcaption> </figure> </div> <script type="module"> import PhotoSwipeLightbox from '/assets/js/photoswipe-lightbox.esm.min.js'; import PhotoSwipe from '/assets/js/photoswipe.esm.min.js'; const lightbox = new PhotoSwipeLightbox({ gallery: '#gallery-respond-to-board', children: 'a', imageClickAction: 'close', tapAction: 'close', showHideAnimationType: 'fade', arrowPrev: false, arrowNext: false, zoom: false, close: false, counter: false, pswpModule: PhotoSwipe, preload: [1, 1] }); lightbox.init(); </script> </div> <p>The talk-back board has become an essential piece in our UX research toolkit for collecting unmoderated user feedback for websites, services, and spaces. It’s also perfect for engaging library visitors through creative projects that help them de-stress with fun distraction.</p> <p>As we experimented with a wide spectrum of topics, we developed handy workflows to transcribe written answers to text for analysis. We also learned how to use AI tools for the initial analysis such as identifying common themes.</p> <p>Since the boards were mostly left unattended in a public space, we inevitably saw inappropriate responses. Our team members as well as the Libraries’ desk staff regularly checked the board to remove those responses. We also refilled the supplies as needed.</p> <h2>Want to Read More?</h2> <p>You can browse more of our talk-back boards in the Libraries’ <a href="https://ualibraries.notion.site/Research-Repo-186fb1c12a4b4481a7aee963ecf18437?pvs=4" target="_blank" rel="noopener noreferrer">UX Research Repo</a>.</p> Welcome to liu.design 2024-02-26T00:00:00Z https://liu.design/blog/welcome/ <figure class=""> <source type="image/webp" srcset="https://liu.design/blog/welcome/new-site-1440w.webp 1440w, https://liu.design/blog/welcome/new-site-2400w.webp 2400w" sizes="100vw" /> <source type="image/jpeg" srcset="https://liu.design/blog/welcome/new-site-1440w.jpeg 1440w, https://liu.design/blog/welcome/new-site-2400w.jpeg 2400w" sizes="100vw" /><img src="https://liu.design/blog/welcome/new-site-1440w.jpeg" width="1440" height="960" alt="Illustration of an index card with text: “new site hello again world”" loading="lazy" decoding="async" /> </figure> <p>Hi there, and welcome to liu.design! Building a new website was one of my New Year’s resolutions. I’m glad to have completed it by March when 2024 can still be called the “new year.”</p> <p>This post marks the end of my previous portfolio website: bobliu.<nolink>io, which went live exactly four years ago on March 1, 2020. Here are some changes I made on the new website and things I learned while building it.</nolink></p> <h2>New Domain</h2> <p>I launched this website on <a href="https://liu.design/">liu.design</a>. I wanted to stop using bobliu.<nolink>io mainly because the .io domains became a part of the UK government’s modern-day colonialism<sup class="footnote-ref"><a href="https://liu.design/blog/welcome/#fn1" id="fnref1">[1]</a></sup>. I had been eyeing this domain for a while and was lucky no one grabbed it before I did.</nolink></p> <p>bobliu<nolink>.io now redirects to this site. I plan to keep the previous domain for a little longer and wait for the search engines to catch up.</nolink></p> <h2>Design More, Write More</h2> <p>I rewrote about my past projects when moving them to this site. It’s always fun to look back at my almost-binary mindset and think about how differently I approach things now. I hope you’ll have fun reading them too.</p> <p>My previous design portfolio didn’t have a structure to capture my random thoughts that are yet to be full-blown projects. So, as you read this post, I have also committed myself to write a blog. I hope to write about design strategies I experimented with, whether they worked or didn’t, and occasionally share life updates.</p> <h2>Eleventy</h2> <p>If you’re a designer, you probably are no stranger to portfolios sites forever under construction. To me, this wasn’t the first time I went from writing about a new project to rebuilding the entire website.</p> <p>I like static site generators and have used several of them to build my portfolio since 2017. bobliu.<nolink>io was built with a Vue-based static site generator called Gridsome. I liked the framework a lot but had to move away from it because the project’s development quietly ended in 2020.</nolink></p> <div> <div class="gallery undefined" id="gallery-previous-site"> <figure class=""> <source type="image/webp" srcset="https://liu.design/blog/welcome/previous-site-1440w.webp 1440w, https://liu.design/blog/welcome/previous-site-2400w.webp 2400w" sizes="100vw" /> <source type="image/jpeg" srcset="https://liu.design/blog/welcome/previous-site-1440w.jpeg 1440w, https://liu.design/blog/welcome/previous-site-2400w.jpeg 2400w" sizes="100vw" /> <a href="https://liu.design/blog/welcome/previous-site-2400w.jpeg" data-pswp-width="2400" data-pswp-height="2706" data-cropped="true" target="_blank"> <img src="https://liu.design/blog/welcome/previous-site-1440w.jpeg" width="1440" height="1623" alt="Screenshot of my previous site" loading="lazy" decoding="async" /> </a> <figcaption>Last screenshot of bobliu.io before it went offline</figcaption> </figure> </div> <script type="module"> import PhotoSwipeLightbox from '/assets/js/photoswipe-lightbox.esm.min.js'; import PhotoSwipe from '/assets/js/photoswipe.esm.min.js'; const lightbox = new PhotoSwipeLightbox({ gallery: '#gallery-previous-site', children: 'a', imageClickAction: 'close', tapAction: 'close', showHideAnimationType: 'fade', arrowPrev: false, arrowNext: false, zoom: false, close: false, counter: false, pswpModule: PhotoSwipe, preload: [1, 1] }); lightbox.init(); </script> </div> <p>This site was built from scratch with <a href="https://www.11ty.dev/" target="_blank" rel="noopener noreferrer">Eleventy</a>. I like that Eleventy:</p> <ul> <li>has an intuitive file structure</li> <li>supports any template language</li> <li>builds in no time for a site of this size</li> </ul> <p>My biggest pet peeve with static site generators is having to fiddle with file paths, and Eleventy was no exception to that. To customize the images displayed on this website, I had to create <em>shortcodes</em> and define where images live in the project folder. Figuring out the following line alone took my whole Saturday morning:</p> <pre class="language-js"><code class="language-js"><span class="token keyword">let</span> imageSrc <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>path<span class="token punctuation">.</span><span class="token function">dirname</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>page<span class="token punctuation">.</span>inputPath<span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>src<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span></code></pre> <p>(Looks like Eleventy is working on an “almost-zero-configuration” image plugin<sup class="footnote-ref"><a href="https://liu.design/blog/welcome/#fn2" id="fnref2">[2]</a></sup> with the upcoming 3.0 release.)</p> <p>Other than that, Eleventy mostly felt flexible and forgiving, and it didn’t get in the way too much. I do wish Eleventy’s documentation was more detailed and included examples, though I found answers to most of my questions from the amazing blog articles others wrote.</p> <h2>Get in Touch</h2> <p>Together with the new domain, I also made myself a new email: <a href="mailto:bob@liu.design">bob@liu.design</a>. Drop me a line! You can also find me on social media linked from the bottom of this page. Thanks again for stopping by.</p> <hr class="footnotes-sep" /> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p><a href="https://www.wired.com/story/the-digital-colonialism-behind-tv-and-ly/" target="_blank" rel="noopener noreferrer">The Digital Colonialism Behind .tv and .ly</a> <a href="https://liu.design/blog/welcome/#fnref1" class="footnote-backref">↩︎</a></p> </li> <li id="fn2" class="footnote-item"><p><a href="https://fosstodon.org/@eleventy/111904085623744762" target="_blank" rel="noopener noreferrer">Eleventy on Mastodon</a> <a href="https://liu.design/blog/welcome/#fnref2" class="footnote-backref">↩︎</a></p> </li> </ol> </section>