Journal

Focus WordPress
Theme Client Projects

Hey everyone! It’s been a loooong time since the last post, and that’s because it’s been a bit of a gauntlet these past few weeks! Spoilers, but the site is live! 🎉🥳🎊 I definitely haven’t captured everything here, but most of the work that didn’t make it in has been related to adjusting content, addressing CSS issues, tweaking and studying SEO, and reconfiguring plugins - nothing incredibly groundbreaking.

In addition, this post marks us breaking the 100k words milestone!! 🤯 And right before the one year anniversary of the blog, no less. I feel like calling it an exciting year is an understatement - definitely not what I expected by any means, but I’m incredibly grateful for the journey and friends I’ve made along the way so far!

Related, as we go on one year since the first post was made on this blog, I’ve been thinking a lot about where I am and where I want to go. If you follow me on Twitter, you may have seen a thread on the topic, but I’d like to write about it formally on here, too.

My current steps are to continue with the site launch and hopefully get things to a stable point where I can maybe take a week or two to turn my brain off, aside from maybe a little maintenance here and there. After that, we’re makin’ PLANS!

All good things! 😊 And many many thanks to you, dear reader, for popping in to see what I’m up to. I appreciate you! Anytime you want to chat with me directly, please don’t hesitate to tap that chat widget down in the lower-right corner. I’d be happy to say hello!

Now, on to the entry:


We’re inching closer to having all of the team information in our About page over on Silver is Gold. For the team profile pictures, we’re going with black and white photos, and it’s been a fun creative exercise trying to match the “feel” of the images as I adjust them into greyscale and mess with the levels.

With most of site content at a good place, I reached out to a friend for help with the general site UX and specifically the palette I’ve been using, as I’ve been going back-and-forth on if I need to shift around the greys I’m using. Fortunately, they gave the whole site an audit!

Many of the changes were to make things more consistent and predictable, and to add better empty space around elements. Very quickly, the site is looking much more polished! ✨ Not only that, but it feels like I have a slightly better “sense” for some of the things they called attention to, almost like they were invisible before, so that’s neat.

With some direction behind me, I set out to spend a LOT of time adjusting padding, margins, offsets, and colors. I also went digging around deeper inside the customization controls for the theme. It’s not always intuitive how you select things in WordPress, I’m finding. Getting the hang of things, though, I modified the navigation bar behavior and appearance, added padding to the footer, adjusted the footer elements, configured a CSS animation, and made some other minor tweaks.

While trying to fix some CSS errors, I ran into a situation where I needed to use higher specificity to hit the right elements. W3schools has an interactive tool that was helpful to understand how targeted selectors should work, which helped my new CSS rules win. I also read about how competing !important tags will win out depending on specificity, so using everything I had learned, I was also finally able to target and hide the now-triplicate big red bar “flash errors” that were appearing on certain pages, and fix some dropdown field issues we were seeing between Firefox and Chrome.

Next up were some form validation highlight errors, and some testing revealed a breadcrumb trail of many other small CSS issues all around the site, so I started going page-by-page. The buttons on the landing page call-to-action were now FINALLY bottom-aligned by using grid in the parent element and align-self: flex-end; on the buttons. That detail alone make a big difference to how the homepage feels.

IE is broken in a bad way. If I recall, I believe it doesn’t support CSS variables, which explains how the coloring breaks down, however all of the general components seem to be in about the right place. It looks like it doesn’t like the SVG tags, and it’s imploded based on something that Autoptimize has done while minimizing the HTML. Otherwise, things seem okay, it’s just a bit difficult to use.

I was able to get the HTML to stop breaking after a few adjustments to my Autoptimize settings, and implement a plugin to alert users that their experience on IE may be diminished, and to switch browsers if possible. I suspect that, with older individuals being the target demographic for this site, there may be more people looking to access the site through Internet Explorer than the larger population sampling in general, so this does have me a bit concerned. I definitely would prefer the site to at least be legible and usable on all browsers, even if performance is slightly diminished in IE. This may be a challenge for after launch, or after I get through that CSS course, although, we’re rapidly approaching the official end of life for IE, so this may be a moot issue before much longer. (Edit: I mentioned this to the client and they agreed to leave it be.)

The “Additional CSS” section has gotten quite long, so it was a good opportunity to document, sort, and group my rules into more logical sections. There were some rules I could safely (or at least I sure hope so) remove, and all component-level CSS was stripped out of the page builder elements in favor of handling everything inside the singular CSS document, as flipping back and forth was causing more trouble than it was worth.

I also wanted to standardize my media query breaks, and set out to do so using Material UI’s breakpoints values as a reference:

value         |0px     600px    960px    1280px   1920px
key           |xs      sm       md       lg       xl
screen width  |--------|--------|--------|--------|-------->
range         |   xs   |   sm   |   md   |   lg   |   xl

This not only gave me the option for cleaner and more understandable classes, but also helped to simplify some of my rules even further.

After all of that testing and tweaking, I decided to treat myself by creating a membership purchase card replacement for fun, using a tool I had recently discovered called Neumorphism.io. The effect is subtle, but I think they turned out nice!

We’ve needed to expand on phrase replacement, as there are still references to words like “job” and “resume” in the dashboard, which is undesirable for launch. It looks like I can only do full string replacement with the free “Say What?” plugin, so anything that references a name, or number, or changes as the user interacts ends up being untouchable to me. All things considered, the year license for the pro version is very reasonable, so I’ll consider proposing that pathway to the client. Ultimately, it’s a fairly minor detail, UNLESS the inconsistent wording would cheapen the brand, and that’s the position I suspect they’ll take.

And I was exactly correct! Moving forward with the pro account, string discovery saved my rear, and I was able to make quick work of getting all instances replaced appropriately.

When it comes to the SEO settings, I’m feeling pretty clueless about keywords. Someone recommended Moz’s SEO Training Course as a good free option over on Udemy. I have an on-site product launch for a customer in my day job coming up soon, so a few hours in the car sounds like a great time to work through this. It looks like it’s a collection of YouTube videos, though, so I’d be curious to see just how helpful it is.

EDIT: Hello from the future! I think that, if you already know how to perform SEO and understand some of the vocabulary, Moz’s course seems to do a great job explaining the “why” and approach to some SEO patterns. Some of the videos are over five years old, though, so some of the information might be outdated ancient history now. For me personally, it helped me get into a better headspace about how I view and try to…utilize? Perform? Implement? SEO for sites in general, and absolutely has me plotting on how to rework my portfolio and Learning Log.

I mentioned in the last blog, but I had picked up RankMath SEO as our SEO plugin, as they make the process seem more approachable while supplying a ton of learning materials. One of the earlier pages I referenced was about how to score 100 in the plugin, and shortly after learned about pillar pages, and structuring content, and how to expose links for crawlers. The plugin generates sitemaps, which I’ll tuck into the footer and submit to search engines for verification and crawling when we go live.

RankMath also helps configure how social media posts will look, so referencing a list of social media image sizes, I created some assets for the media library to use. We’re anticipating having a new team member join us with experience in marketing, social media, and SEO, so it will be exciting to hopefully learn a lot from them.

Out of curiosity, I conducted an accessibility audit using Wave’s online tool. Things aren’t great right now, and definitely need to improve. Some things that I thought should be alright are reporting as problems, so I’ll need to do some digging. Part of the issue appears to be coming from my theme, as manually checking color contrast between the background and text passes fine, yet the tool reports an error.

Nearly ready to go to production, I had a sync meeting with the client. As we were talking through things, it sounds like there were discussions among the team, and not only did some of the branding need to be overhauled, but there were also new impactful changes to key areas of the site, like how the search pages are structured and what people search for.

Truthfully, I was winded after that meeting. After pushing myself for the past few days and burning the candle at both ends, I suddenly found myself with all kinds of new fires to put out - and fast.

The most visible immediate change was the homepage, which was getting a complete facelift above the fold. The fancy responsive tagline, owl animation, and logo block were gone. In that void was to be a large hero graphic with the tagline underneath.

Our illustrator had some rough sketches, so cropping and cleaning up those images, I was able to use them as placeholders. I wrestled with the WordPress Image and Cover blocks for longer than I care to admit, along with setting backgrounds, but nothing would perform quite like how I wanted.

Talking with a friend, they recommended that I reference my time assisting with AGWSU. On AGWSU, the hero image is responsive and resizes into pre-defined breaks using media queries, similar to what I had configured while working on my “Additional CSS” section. Using these configured ranges (like xs-sm, sm-md, etc), we can force the hero image to a specific height at that screen size. Fast forward, and here’s how that works out:

Please forgive the !importants - the theme I’m using as the base doesn’t take too kindly to my meddling. 🤠

/* ---- Homepage Hero ---- */

/* Homepage hero image */
.homepage-hero-wrapper picture img {
  object-position: left center !important;
  object-fit: cover;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

@media (max-width: 600px){
  /* Homepage hero image */
  .homepage-hero-wrapper picture img {
    height: 250px !important;
  }
}

@media (min-width: 601px) and (max-width: 960px) {
  /* Homepage hero image */
  .homepage-hero-wrapper picture img {
    height: 375px !important;
  }
}

@media (min-width: 961px) and (max-width: 1280px) {
  /* Homepage hero image */
  .homepage-hero-wrapper picture img {
    height: 475px !important;
  }
}

@media (min-width: 1281px) and (max-width: 1920px) {
  /* Homepage hero image */
  .homepage-hero-wrapper picture img {
    height: 675px !important;
  }
}

@media (min-width: 1921px) {
  /* Homepage hero image */
  .homepage-hero-wrapper picture img {
    height: 1349px !important;
  }
}

/* Homepage hero tagline */
.homepage-hero-wrapper h1 {
  position: relative;
  z-index: 1;
  background-color: var(--nv-primary-accent) !important;
  margin-right: 15px;
  margin-left: 15px;
  white-space: pre-line !important;
}

/* Cleanly break hero tagline between sentences */
.homepage-hero-wrapper span {
  white-space: nowrap;
}

Next up was also reworking the “Who We Are” section below the homepage call to action. I tried a few different approaches using flex and adjusting grow and shrink properties, then rebuilding the section from scratch and using a grid container and media queries to keep the image square and also a good size. Try as I might, I couldn’t get the image to behave properly at both wide screen resolution and on small devices just before the 600px media query kicked in and restacked things into a mobile configuration. I suspect some of this may be the size of the image itself, which is fairly low resolution with the placeholders, and probably part of WordPress and the theme trying to do too many things.

Eventually, I switched to using a Gutenburg cover block instead of an image block, setting a focal point in the vertical center and about 85% from left. This does break juuuust before we pop down to mobile configuration, but performs the best overall. Not too many users will be sliding and resizing the window and picking apart the site too closely, either - although if you’re reading this, maybe you are now! 😬😅

One of the things discussed with the client along with our user flow changes was how locations impacted search and were used to group opportunities. Out of the box, the plugin has a verbatim search on locations with no relations between them. To add this, I’d need to get access to some Google maps APIs and add further configuration to the plugin.

Looking through the maps integration documentation, the plugin developers had detailed which APIs I would need to have access to and specified how to add our keys. While some of the services were free, many of them had a cost associated with them, so I set out to compile the pricing data and give the client a full report of approximately what we could expected to have to pay.

Some API calls specified a dollar range depending on which kinds of calls were made, and that data was not detailed in the plugin documentation, so best I could ultimately figure was that we’d be paying somewhere between $7 and $12 per every 1,000 calls. This being said, I’m unsure how frequently the plugin would be making these calls, and if it was initiated by users creating accounts and opportunities, or called up every time someone would want to look at a map - this would drastically impact how many calls we’d be looking for! With this information, I wanted to ping the client to get their impressions and see if this feature was a high enough value to them to justify the expense.

And I’m glad I did! Explaining that there would be a cost associated with using map for location, and with us offering essentially everything for free through the end of the year, they determined that there wasn’t enough benefit to justify paying for map services, especially since that was more of a minor detail.

The client explained that their longer-term objective will be to have locally-focused sites, although there are technically no restrictions based on location in the site. Best case scenario, local teams would act as community representatives and manage a local clone of the site, where they would reach out to local businesses and talent. These sites would be accessible from a parent site and then go out to places like silverisgold.org/dayton-oh, or similar.

We discussed possibly using subdomains, but in some of the SEO research I’ve done so far, it sounds like real-life testing strongly supports using subpages over subdomains. This is a change I’m looking to implement myself by moving Learning Log inside my portfolio site with the next edition. From a technical standpoint, I’m not sure what all would be involved in combining multiple separate sites and databases under the same domain, but I’ll figure it out sometime in the near future.

Up until now, I had been using WPForm for newsletter sign-ups, but this requires one or multiple paid plans with a short list of newsletter services. Looking into the competition, I switched to MailPoet! Right away, it seems very polished, and has lots of great features up to 1,000 subscribers. It comes with a bunch of form types and templates, including automated emails, forms, pop-up windows, and banners. I created a new sign-up form to replace our footer sign-up, which was simple to drop into place, and then began working on email templates.

I ended up making targeted employer and talent onboarding emails, welcoming people to the platform and explaining where they can find what services, along with some links. These emails won’t get sent until after we finish the migration to Production, as the MailPoet team manually audits each site before enabling the freemium key to use their mailing service.

With those emails ready to go, I made some small adjustments to the default email templates from the job board plugin. These are very rough at the moment, but we have a Del Mar Encore Fellow joining our team with experience in SEO and marketing campaigns that will supposedly be taking on sculpting our voice as a team. I’m hopeful to learn as much as I can while working alongside them!

I had a full site review with the client after all of the changes were implemented, and they greenlit me to move forward with finalizing the move to Production. 🎉 Things are looking pretty gosh darn good!! Other members of the team sent off emails expressing their excitement and approval of the site, and we already have a few users asking us when they’ll be able to sign up.

The actual migration went of much smoother than anticipated. 95% of all the links, even ones manually set into plugins or as button URLs, somehow updated themselves from the Staging site URL to the Production URL, which is what I was anticipating would be a large component of the migration work. After cleaning things up and testing across multiple browsers, I flipped our “coming soon” mode back on at the Staging site, exposing a login for admin and editors to test changes privately.

Final illustrations are scheduled to come in Friday as vector files. I’m hoping we’ll have lots of flexibility both with the images themselves and making them work at different resolutions. If there’s a point where things have settled down, I’d love to add some very subtle animation in the images, such as having one of the paper airplanes arch through the sky slightly, or have the owl hallway slightly shift perspective as you scroll.

While trying to improve site performance, it was recommended to me to use jpg images instead of png to take advantage of the smaller file size. Doing some research, I came across this great breakdown comparing jpg with png images. With that, I switched most graphics to jpg for now, and would wait to see what format the hero images would be, as the illustrator said they should be some kind of vector format, but not svg. Today is Friday now and we were supposed to have the final art, but nothing yet, so I’ll just use a jpg placeholder from the drafts for now and update later.

Later that weekend, the final images did come in, however it sounds like the raw files are vector and they get exported to jpg, so not what I was expecting at all. All of the graphics were presented in multiple aspect ratios with 150dpi, so I was able to work with that. Making some minor adjustments and dropping them into place, the CSS rules implemented earlier worked amazingly, and things just worked. I made a few small tweaks out of personal preference, and that looks great!

For the animations, the illustrator was looking at doing gifs, which should work but I’m concerned about file size, as the site is already slower than I’d like it to be with no users and an empty database. I can’t seem to squeeze any more juice out of it with Autoptimize or WP-Optimize, unfortunately, so I expressed my interest in giving it a shot to the client and illustrator while voicing the metrics I would be watching to see if it would be practical in execution. I’m also unsure if the animation would be a further expense, and since the client is a non-profit, I want to be both practical and economically-conscious.

After talking with our new Del Mar Encore Fellow, I made some updates to the email campaigns, modified the wording and configuration of some messages, and tweaked the SEO. I’ve also been taking that SEO course on Udemy (mentioned above). It has been mildly helpful getting me into the mindset and learning the terms, although it has not specifically educated me on how execute on building an SEO strategy.

Focus

When I talk with a few people, I have gotten feedback about me focusing on doing one thing. Things like, “you’re not a designer, don’t put effort into making it pretty,” and “You’re not a marketer, you don’t need to write all this stuff up about your project.” I see what they mean and what they’re getting at, and I’m trying to maintain that with my core focus.

From my experience and background, though, I feel like I deliver the largest value when pulling awareness and experience in from a wide breadth of exposure. I am successful in my current career because I pull in experience from mechanical design, development and scripting, electronics, user experience, project management, technical documentation, sales, and training. My job is to take projects all the way from a bare-bones sales inquiry to the perfect fit for our customers unique issue, while ensuring that their operators and customers are comfortable using and are able to maintain the equipment efficiently. It’s how my cement mixer platform is being used across the entire United States on more than 1,200 trucks and counting, generating a multiple millions in sales annually.

As an example, I’m not going into marketing, but marketing mentality and language is key to a successful product, and something I’ve needed draw on with creating this site. Often times the client and team will suggest adjustments or provide paragraphs, but a substantial portion of the wording and tone on the site is my own. Same with design - I’m not at all a UX designer, but the site has to be usable and have some visual appeal to lend it credibility. I don’t plan on specializing in marketing or UX, but I feel it’s a missed opportunity to not utilize and show skills I may build in those areas when trying to convey my value.

That being said, I’m still not in tech, so maybe I’m totally wrong about this. If you have any thoughts on this, I’d love to hear them in the comments below!

Personal Brands and Social Media

On Discord, I was notified about a job hunt and hiring seminar, and popped in to attend. There were many excellent tips and resources given, which I put together as a note in rough bullet-point form.

Between some of the topics covered in the seminar, and from the funnel of tech twitter input that I’ve been trying to manage in a healthy way, it all has me feeling self-conscious about how little attention or success growing my personal brand has gotten over the past months.

I’ve been trying to be more active on Twitter, sharing stories about my experiences, retweeting resources and helpful tips, and trying to sprinkle positivity and support where I can. Trying to figure out the line between being genuine, being on-brand, and creating content that will intentionall drive engagement has been tricky. I don’t want to ask low-effort questions like “what do you like about JavaScript???” as that feels disingenuous, yet I see posts just like that every few hours that get thousands of likes.

Some people really have their brand and engagement strategy figured out, and I’ve seen brand new accounts for newbies pop up and soar over 1k subscribers in a few days. This is something I’ll need to study more and find a way to fit the brand that I want to craft - genuine and down-to-earth, enthusiastic to help and share, solid and dedicated, and maybe a little jokey/snarky. Posting threads with basic syntax or already widely-shared resources seems to get good engagement but not provide much true value, yet that’s the stuff that’s more accessible and identifiable to me as a newbie dev, too - being able to share the obscure or poorly explained stuff will come with time and experience.

If you somehow stumbled across this blog and have managed to read alllll the way down here, thank you! Maybe this means I’m doing something right?? I try to make an effort to engage with everyone who follows me on Twitter, so please don’t hesitate to add me! 😄

Twitter Dreams and Silver is Gold Reflections

I also had an exciting conversation about a long-running dream I’ve had:

If my schedule frees up a bit, I’d like to pull on this thread a little and see where it goes. It feels like it shouldn’t be able to go anywhere, almost like I’m not allowed. Like I couldn’t possibly go from being where I am with my current career to helping to steer a business, and actively and directly trying to help make a difference in people’s lives. But… that would be amazing if there is a chance after all.

The ND tech community and ADHD folks in particular have been great to interact with on Twitter, and seem to be a very supportive group. Truthfully, it has made me realize that maaaybe there’s a reason I get weird looks and silence when I get excited about my elaborate task management and data processing pipelines, but that’s an exploration for another time. It sounds like there’s a lot of potential to do good in these communities to give people tools and help support each other, and I’d like to look into things more.

While I’m pasting a bunch of tweets, might as well include this little write-up I made about my experience with Silver is Gold so far too, huh?

Pseudo API

Thinking about how I want to redesign my portfolio, I was curious if I could expose a .json object to create something like an API that I could access, but from a static site, and it looks like other people have had this same idea. I implemented some basic stats outputs for skills that go live with this blog, and found a page with further ideas for the Learning Log “API” output.

Time Breakdown

This was a big one - 71 hours, and over 5k words! Holy smokes 😲 To date, this brings us to somewhere around 210 hours invested into creating Silver is Gold. Considering that I knew effectively nothing about WordPress coming into things, and how part of my role in the process ended up being to help to take the idea and make it defined and tangible… maybe that seems alright? I feel confident that I could shave away a lot of that time on a new project, just knowing what plugins to grab and which ones to avoid, and where to look for problems. Figuring out a loose framework for version control is also massively helpful.

I had fully intended to push up a blog after two weeks as scheduled, but the large reworks threw me off balance, for sure. I know, consistency is key for a personal brand and whatnot, but I’m glad to have prioritized the client site and delivered something that the team seems excited about. My “brand” needs some definition wrapped around it and reworking in general, so we’ll get there!

Here’s a breakdown of my time over the past few weeks:

  • 6/30
    • 3h
  • 7/1
    • 4.5h
  • 7/2
    • 0h
  • 7/3
    • 0h
  • 7/4
    • 0h
  • 7/5
    • 2h
  • 7/6
    • 6.5h
  • 7/7
    • 2h
  • 7/8
    • 5.5h
  • 7/9
    • 0h
  • 7/10
    • 4h
  • 7/11
    • 6h
  • 7/12
    • 5.5h
  • 7/13
    • 3.5h
  • 7/14
    • 4h
  • 7/15
    • 0h
  • 7/16
    • 1h
  • 7/17
    • 5.5h
  • 7/18
    • 0h
  • 7/19
    • 4h
  • 7/20
    • 2h
  • 7/21
    • 5.5h
  • 7/22
    • 3h
  • 7/23
    • 0h
  • 7/24
    • 1h
  • 7/25
    • 2.5h

Gratitude

What is going well?

The site feels like it’s in a good place right now, and I am exceedingly hopeful that it will be successful and a good fit for the client and team. We’ve identified a few shortcomings along the way, but for the most part, it seems to check all the major boxes. The people I’ve had the pleasure of connecting with and working alongside have also been encouraging and inspiring individuals, and I’m hopeful that I can both learn from everyone, and that I present myself as someone that they can trust to bring their ideas to life successfully and provide valuable input.

What could be better?

I was burning the candle at both ends for too long leading up to launch and I’ve been very sick these past three days. Apart from working on the blog today to try and hurry up and get it out, I have been unable to do anything. Fortunately, my spouse has been super supportive and caring and taken care of everything else while I float in and out of consciousness, trying to get well enough to go back to work on Monday.

Tasklist

  • Compile a list of all known CSS issues
  • Launch the site!
  • Add an “API” endpoint to Learning Log for future testing