Weeknotes 21:11

August 11, 2021

Week of August 1 - 7

Design Systems for Developers

I discovered a free course on design systems for developers on the Gymnasium platform by Ethan Marcotte. Ethan is a great teacher so I was excited to check it out. I have seen many things about design systems but have never spent time investigating what they are and their benefits.

I have been thinking more about components recently with the talk around container queries and after building my first site using Gutenberg components. I believe this course will serve as a great introduction. They also have other courses for designers, product managers, and organizations.

SVG Text around Path

I have come across several sites recently using SVG text around a circular path. On both sites (A Human Future and UX London), the text is animated around the path both as a continuous animation and a scroll animation.

I had a little bit of time to play around last Tuesday, so I decided to try to learn how this was done. I found an article on CSS Tricks. I also found some helpful links on the GreenSock forum (Animate Text on a SVG Path and Make A Circle out of text).

The trickiest part of it was figuring out how to do a circle as a path. I ended up using the circle path from the A Human Future site. I still would like to go back and understand the code better so I could write one myself.

See the Pen
SVG Text on circle by Jeff Bridgforth (@webcraftsman)
on CodePen.

End of the Week Victories

I was able to end the week on a high note as I came up with several one-off solutions on 3 different projects.

A Better UI Solution

I am very close to launching a project that I have been working on since May for GenesisHR. LGND designed a new digital experience for this PEO out of New England. I have spent the past couple of weeks doing personal QA and we had the client do QA on the site last week. There is one component on the homepage that has challenged me for most of the project. I was going to try to have another member of the LGND team take a crack at it but the rest of my dev team have been busy trying to wrap up another big project.

The component highlighted case studies (testimonials) from GenesisHR’s clients. The component was a carousel that showed three “slides” on the desktop view. The first slide, which I have dubbed the “featured” slide included a quote from the testimonial so it had more content than the other two slides. It had more width. The problem I was having was the transition when the second slide slotted into the featured spot. It was really awkward. I tried applying some transitions to make it a smooth experience. I even explored using FLIP. But none of the solutions I tried were solving the problem of the transition in width. I am using Slick as the carousel solution.

The original solution with an awkward transition.

After consulting with a designer on my team to try to find another solution, I had an epiphany. One of the failed courses I had tried was fading the content on the “featured” slide. But it still did not look good. It dawned on me that I could come up with a hybrid solution that used 2 carousels instead of trying to use just one. The first carousel would only show 1 slide and would be the featured slide. The transition on it would be a fade. The second carousel would serve as a navigation. It would repeat the first slide but I positioned the second carousel underneath the first carousel and used some generated content to mask the second carousel which had an overflow of visible (to have the offscreen look).

I had a frustrating experience implementing this idea but in the end, it came together and I was really happy with the end result. One thing I learned is that Slick does not play well with the Grid layout that uses fractional units (fr). I had to adjust my layout to use percentages. I had to put width on the secondary carousel slides so that I could position it correctly underneath the first carousel. On smaller screens, the second carousel is hidden with CSS.

The final solution.

FAQ page

On Wednesday, I was on a client call with CalmHR. The client wanted to add a FAQ page to the site. We talked through the specifics of the kind of solution that they envisioned. Through that discussion, I was able to come up with an idea that would meet their needs. They wanted to be able to organize the FAQs under different headings.

I knew I wanted to create a framework that would allow them to add new FAQs to the site and give them control to define the buckets that they would organize them under. They have not yet written the content for this section so it was important to build something flexible that was not dependent on the specific content they will eventually create.

I created a custom content type for the question and answers, created a custom taxonomy for the “buckets”, and added a plugin that would allow them to sort the questions underneath each of those buckets. I also added search functionality to the FAQ page.

I took several cues from the pages that already exist on the site and “designed” the page once I had the functionality in place. I have it set up to display the first bucket (category) to filter the results on the page and then the user can use the search or tab through the different categories to see the FAQs assigned to those categories. I really enjoyed getting to take something from concept to reality in just a couple of days. The client was very happy with the solution.

Read (Online)

  • Does WordPress Have a Gutenberg Problem – Question posed by David Bushell. He brings up a lot of good points and concerns about WordPress’ Gutenberg editor.
  • Writing great alt text: Emotion Matters – Jake Archibald challenges us to consider the emotional impact of images and how to capture that in alt text
  • Text descriptions and emotion-rich images – Article that Jake references in his article above.
  • What Does it Take To Stand Out – What does it take to stand out as a remote worker where you do not have the same physical interactions with your manager. Kevin discusses “ethical visibility,” which is a concept from his book The Long-Distance Teammate, which I read earlier this year and highly recommend.
  • Dealing with the “Webiness” of the Web (video) – Kevin Powell discusses how CSS is hard because we do not have total control over the output. We are declaring our intended output but there are different variables that affect the final output. Other programming languages deal more with absolutes and this is probably why a lot of developers get frustrated with CSS because it does not work the same way.

Watched

  • The Olympic Games
  • Alias (Prime)
  • Fantastic Four: The Rise of the Silver Surfer (Disney+)
  • The Bad Batch (Disney+)
  • The Mandalorian: Season 2 (Disney+) – I decided I wanted to rewatch the series. Enjoying it just as much the second time around.

Reading

Playing

  • MLB The Show 20 (Padres)
  • FIFA20 (Rangers)

Comments are closed.