Jump to Navigation Menu

Weeknotes 19:05

May 11, 2019

This week I was handed a new project to work on. I had to develop two pages that an in-house team will integrate into their CMS. One of the requirements was to use Bootstrap 4 for layout since that is integrated into their CMS templating. I have only used Bootstrap a handful of times in the past. So the challenge this week was to learn the system and integrate it into my workflow.

It took me a bit of time to getting into a flow using Bootstrap. My project workflow starts with writing out the HTML (and PHP) that I need for the page or template. Then I move onto writing CSS from a mobile-first perspective. To utilize the Bootstrap CSS, you add classes to your HTML page. So the workflow was a bit backwards to me because I had to think about the layout while writing HTML code.

I ended up working on the desktop layout first and then resized my browser down to determine how I wanted change the number of columns content would span in the Bootstrap 12 column grid. I ended up doing a lot more experimentation than normal and a lot of refactoring my HTML as I changed my mind about earlier decisions. I also decided to handle vertical margins and paddings with my own CSS to better conform to the design mockups. The designers did not design with the Bootstrap grid in mind but it was pretty easy to make some adjustments because they also used a 12 column grid.

Local by Flywheel

One of my pain points in the past was finding a solution to local development. In the past, I have just set up my Mac to run Apache, MySQL, and PHP for my local development environment. The pain point there is that every time their is a major system update, I have to go back in and fix settings for these environments to work properly. It is also a pain when upgrading to a new machine.

The other issue is being able to have the same environment as the server that the project will eventually run on. A couple of summers ago, I worked on a project with ExpressionEngine. I had the hardest time setting up the dev environment and finally realized that I had a newer version of PHP than the project server. I ended up doing a lot of cut and paste work into the templates and CSS files in the EE environment.

A lot of the solutions that I had looked at required working on the command line and spending a good amount of time configuring the setup. This is one of those tasks where I would like a GUI that simplifies this process so that I can spend more time on site development than on dev ops just to get to the point where I can do the work I am best at.

About a year ago, I started using Local by Flywheel for local WordPress development. I really liked the solution because it has a GUI and I did not have to do a lot of setup to get the solution to work. I could just choose from some different options and quickly spin up a new WordPress install on my local machine to do my development work. About that same time, one of the companies I was contracting with started using Flywheel as a server option. Local made it easy to checkout and check in files so that I could collaborate with another developer.

One pain point that I had with Local is that I had run into some problems when I needed to spin up an new local development environment for an existing site. Originally, I had spun up a new Local site and then replaced the theme files and imported a copy of the project database. But that did not always work.

Not too long ago, I learned that there was an easier way. I found out that you can easily move an existing WordPress site into Local by creating a zip file that contains a copy of the site’s database and a copy of the wp-content folder. All you have to do is drag the zip file into Local and it creates the new site. Nice quick easy solution that I know I can count on.

I am mentioning it in this post because this week I was handed a project to add some more content sections to an existing site. When I had originally created the site, I was working on my personal laptop. When I stared working for LGND, they bought me a new laptop so I did not have a local environment setup for the site I need to work on. So I went to my go-to solution and 10 minutes later, I had a new development site on my laptop and was ready to update the site.

Watched

  • Over a period of three days, I watched Knock Down The House on Netflix. Though I do not agree with the politics of the women featured in the documentary, I admired their courage to take on political power machines and want to make a difference. It was interesting to understand motivations and how they took action. And how having a grassroots organization gave them support and encouragement.
  • Late Life (Netflix) – a documentary about a Taiwanese pitcher trying to make it back to the major leagues after injuries and being passed around to different organizations.
  • Perfect Bid: The Contestant That Knew Too Much (Netflix) – my wife and I watched this one together. We both grew up watching The Price is Right and found this story very interesting

Articles I Read That I Recommend

  • A Design Pattern Solved by Grid – this one got me really excited about CSS Subgrid. It is always more motivating when you see how it can solve real world problems. I have a design pattern with cards that I think subgrid will help me to solve. Always grateful for Rachel Andrew’s insights into CSS Grid
  • Understanding Implicit Grid Tracks – really good primer on using CSS Grid. First part in a series of articles on debugging CSS Grid by CSS {In Real Life}
  • New CSS Logical Properties – good read about properties that moves us away from top, right, bottom and left.
  • Jen Simmons on Thinking with Grids – really enjoyed seeing Jen live code a design that she was given before going on stage at the Smashing Conference. Really good to hear and see someone think through how to solve a layout pattern. Well worth your time to check this one out.
  • Introducing ACF Blocks for Gutenberg – ACF has been my go-to solution for building content fields for client WordPress projects. Excited to see that they have come up with a solution to create new Gutenberg blocks. Although I am not a big fan of Gutenberg, I am excited about this solution and could open the door for me to consider using Gutenberg in future projects.

Comment on this post