Tonight is the first meeting of Homebrew Website Club Baltimore for 2019! My goal for this evening is to write this post updating on how I did for my year-end commitments and some thoughts on what’s to come.
Reviewing My Commitments
The start of a new year is a good time to review all commitments and to think reflectively about accomplishments. For some context, here’s a link to my year-end commitments: 2018 Year-End Commitments and Looking Forward.
I’m happy to report that I actually accomplished nearly all of my technical goals. I split them into technical and non-technical goals, so let’s review them in that manner.
As far as the technical goals, I’ve been doing a lot of work with GatsbyJS v2.0, including working on an IndieWeb starter. Gatsby has several starters available and I’ve been creating a stripped down Gatsby starter. I plan to write a more detailed post about this as I finish it. Originally, I began working on a site remake using Gatsby for the front-end to either a headless WordPress solution or a markdown site using MDX. I then realized I wasn’t sure what I wanted my layout to look like, so I decided to strip back everything and make a simple IndieWeb starter for Gatsby while I decided on the layout.
Additionally, I switched over all of my image handling to Cloudinary. This was a pretty seamless process. I figure that this is a service I’m going to use regardless of platform, so I wanted to make the move before the year’s end.
I also created some blog and post layouts. Creating layouts and UI design is something that I greatly enjoy. I find it to be relaxing and creative. As I build my confidence and design more layouts, I want to share these layout mockups through my site. The beginner-friendly nature of Figma has enabled me to just focus on the creative expression of ideas, but I think that I could benefit from a reflective process after they’re created.
Unfortunately, I didn’t do a good job meeting my non-technical goals. As I was excited to work on creating layouts and do some behind-the-scenes development on a Gatsby starter, I neglected to document and write about this process.
I think that a simple solution to this is to start sharing layouts and some of the UI work that I do. Additionally, I could share a write-up of my processes. Currently, my workflow tends to be the following:
- Create a mockup in Figma
- Write the HTML/CSS for that mockup
- If the project moves forward and necessitates it, convert into React or WordPress
I have two projects I just finished that I can begin with. I wanted to at least write this post first to get back into the habit of writing before tackling those! One project ended up being a React app, whereas the others are landing page reworks for an existing WordPress site. The final format of these two projects are different, but the core technologies are the same: HTML and CSS.
In my commitments post, I also forecast some goals for 2019. I split these into two categories as well. I’m happy to report that I’ve started 2019 off in a productive headspace. I created an interactive project gallery for Digital Harbor Foundation
Check out the project at this link: DHF Interactive Project Gallery. I built this with React, Styled Components, and React Spring. I had a lot of fun making this and learned quite a bit in the process. I intend to do a write-up walking through the process from prototyping to production.
I’ve already worked on several projects this year and I’m refining my workflow. I’m looking forward to refining my process and documenting it. So far, my main interests and pursuits this year have been UI work and layouts. As I mentioned earlier, I find this extremely creative and fulfilling, and I love creating something in Figma and then working through the layout in HTML and CSS.
Skill Building in 2019: So Far
I intend to do a longer post about my workflow and skill building, but I’ll say that one way I’ve found I learn best is through just doing something. If I don’t have a clear goal in mind I like to look at existing sites or print layouts for inspiration and then try to recreate them in Figma and HTML/CSS. I recently purchased Refactoring UI by Adam Wathan and Steve Schoger and it has helped me to really build solid habits. I intend to do a post about this as well.
Learning Grid and Flexbox last year has greatly increased my productivity. I’m able to work in Figma without much constraint (other than a basic grid guide) and have a sense of how to lay things out with Grid and Flexbox. I’m looking forward to continuing to refine and practice this skillset and I’m highly motivated to do so since I’ve now hit a point where it’s less stressful and more enjoyable.
I’m looking forward to a productive 2019!