Weeknotes 19:19

December 1, 2019

Week of November 24-30

My Work

One of the things I like about holiday weeks (besides the time off ) is that the days that I do work feel a bit more relaxed than normal. I found that to be true this past week. Part of the reason is that there are fewer meetings so there is more focused time for doing work. The other nice thing about the workweek was that I was able to focus on one project. In the past few weeks, I have been juggling about five projects at various stages of development. I also have had a lot of one-off projects mixed in. So I was really glad to get some focused time to work on just one project.

This project has several complex layouts on the homepage. I came into the week after having a major breakthrough the previous Friday. I was finally able to come up with a solution for the hero section for a larger screen. I had been using an SVG shape to create a diagonal mask between two image carousels. But I was not sure how that was going to work on larger screens or at different aspect ratios. I ended up refactoring my text and navigational elements to use vh units so that they would resize proportionally at different screen heights.

And then I was able to use clip-path on the image carousels to create the diagonal with negative space on larger screens. This allowed the diagonal to grow as the screen got wider.

After solving that problem at the end of the previous week, I was able to turn my attention to creating animations for content to fade in and come in from the left or right as the user scrolls down the page. I really enjoyed getting to work all of that out and see the designer’s vision come together.

This is the project I mentioned in an earlier post that I was concerned about the timeline. The homepage seemed to take a lot of time to develop. But part of that time was working out the layout of some components that would appear on other pages. As I moved on to secondary pages, I was able to build out two of those pages pretty quickly because of the work I had already done on the homepage.

This has been a challenging project but one that I have really enjoyed solving different problems on and using some tools such as clip-path and shape-outside that I have not used before. At one point, I was using CSS Custom Properties along with Javascript for a hover effect. But I ended up coming up with another solution that was a better fit to my original vision.

SVG Artista

Over the previous weekend, I had spent some time going through my Evernotes from this past year. I save bookmarks in Evernote so it was good to go back and review things that I had bookmarked. One of my bookmarks had been some SVG tools. One of those tools is SVG Artista. It helps you to animate fill or stroke properties. I needed this tool for one of the animations in the project I mentioned above. I simply pasted my paths and the tool gave me the CSS I needed to animate.  I found the tool to be a great time saver.

Transcending CSS

Last week, Andy Clarke put out a call for testimonials for those that his book, Transcending CSS helped in their career and work. Here is my response:

I would be hard-pressed to think of another book that has been as influential on my career as Transcending CSS. The semantically structured code I write every day contains the fingerprints that came from the inspiring examples in this work. I am still quick to embrace the “transcending spirit” to expand the creative possibilities of the sites I build.

Andy is putting together a Transcending CSS Revisited that I am really excited about. The PDF version will include some commentary on how some of his examples could be done today. I would like to take the time to write up an entire post on the book and the impact it has had on my craft.

Update: My quote showed up in Andy’s post this morning announcing the launch of Transcending CSS Revisiting later this week.

Blue Beanie Day

November 30 was Blue Beanie Day. I still support Web standards. I wrote a post about it ten years ago.

Bought

  • Inclusive Components – I am really excited about this book because building accessible Javascript components is one area I want to strengthen.
  • Beginner Javascript – There is still one day left to get this course for a launch special of half-price. I have bought and worked through some of Wes’ other courses. Really looking forward to this one as I would like to become more confident in using Vanilla Javascript and understanding ES6 and modern scripting. Hoping this course fills in some of the holes in current knowledge and better equips me as I build more interactive interfaces in the future.

Reading

  • Everything and Nothing – part of a series that CSS Tricks is doing where different developers answer the question, “What about building websites has you interested this year?” I liked Melanie’s answer because I have been thinking about a lot of the same things. I would like to try to write a post with my answer to the question.
  • The Aesthetic-Accessibility Paradox – Very interesting article about balancing the different needs of your users. My team has had a lot of discussions about accessibility lately.
  • The New Features of GSAP 3 – I am excited about how the GSAP API has been made simpler.
  • Commit Message Driven Development – Interested idea. I need to get better at commit messages and committing chunks of code throughout the day instead of one end of the day commit.
  • Common Pitfalls and Misunderstandings in Accessibility Auditing – some great things to keep in mind as you evaluate the accessibility in your project.
  • Department of Useless Images – I have worked on some sites where I have wondered this.
  • Creativity, Inc. – I am reading this book along with my LGND teammates for a book club. One of my friends had recommended to me years ago. I have really enjoyed what I have read so far.

Watching

  • Edit Your Shapes with CSS Shape Path Editor – Very helpful and relevant as I have been diving into CSS Shapes recently. I also was reminded of shape-margin, which I had been trying to remember the day before to put some space between the image with the CSS Shape and the text.
  • Thor Dark World – Enjoyed another Marvel movie on Disney+. I had only seen it once before. I know a lot of people do not like this movie much but I really enjoyed it.
  • Empire of Dreams – Enjoyed this documentary on Disney+ about the making of the original Star Wars trilogy.

Listening

I was really excited to discover that Spotify now has The Fellowship of the Ring: The Complete Recordings and The Two Towers: The Complete Recordings. I enjoy listening to soundtracks while I work. I have enjoyed The Return of the King: The Complete Recordings for several years and was disappointed that the complete recordings for the other two movies were not available. Another album I have enjoyed listening to recently is Music from The Avengers Performed by London Music Works.

Comments are closed.