Weeknotes 20:13

June 23, 2020

Week of June 14 - 20

Last week, I had two pieces of functionality that I needed to create for Credential Engine that adds a toolkit of resources for state leaders to learn about, plan for, and implement policies and practices to create a transparent credential marketplace.

Search and Filter for Toolkit resources

The first piece of functionality was to add search and filter functionality for the toolkit resource page. The site already has similar functionality for its other resources. The functionality was built by a contractor that pitched in to help us to deliver the initial site.

I have never built search and filter functionality like this one for a WordPress site. I was able to use my knowledge of custom search to customize the search for a new content type I created in WordPress. I was then able to look over the contractor’s code and was able to understand what the code was doing and implement my own solution. I am excited because I have wanted to do something like this before but did not know how to do it. It was much easier to accomplish than I thought. And I have a project in the hopper to build similar functionality for the case study section of our LGND site.

Resource Map

Two weeks ago, I had built a map that links users to view state-specific resources from Credential Engine’s fifteen state partnerships. The user can click on a state to trigger a popup with links to the state-specific resources. It also needed a select input to make it a more inclusive experience.

I created a similar map solution for the Sharing Solutions site last year. I was able to use the script from that solution as the foundation for the Credential Engine solution. This past week, I needed to add new functionality so the Credential Engine team could define and highlight regional partnerships.

I created a custom post type for the locations, both state and regional. When the user creates a new location, they can define if the location needs to be added to the state map. I created a second custom post type to define the regions. Then I created a relationship field in Advanced Custom Fields that allows the users to assign a state to a region. This will allow the Credential Engine team to create new regions as new region partnerships are established in the future.

There are also fields in the location content type for case study content for each of the locations.

As I was thinking through the template that I needed build for the map section, I identified that I needed to loop through my custom query multiple times to create:

• an array to identify states to highlight on the map
• an array to identify if a state belonged to a region
• a select input for each of the states highlighted on the map so the user could use this input as an alternative to the map
• another select input for mobile that included both states and regions
• the modal cards with the resource links for both the states and the regions

As I refactored my solution last week for the regions, I realized I needed to create two different queries, one that just contained the states highlighted on the map (creates both of the arrays and the first select input) and then a second query that included the regions (creates the second input and the modal cards). I added a checkbox under the select input that allows the user to toggle the functionality to view regional partnership resources.

I was very happy with the solution I came up with. I have not utilized arrays much in my work so it was a personal accomplishment to figure how to create the arrays I needed and then to utilize them to add information to the SVG map that triggered the modal card functionality.

This is an example of the code I came up with. My next step is the revisit this code and identifies if I can simplify it more. I am wondering if there is a way I don’t have to loop through the queries multiple times and come up with the same result.

My Javascript looks for paths or polygons in the SVG with the active class and uses the id to show the correct modal card. For the regional resources, the script looks for the data-attribute of region to trigger that functionality.

Articles and Videos of Interest

• Cero’s Juneteenth Guide – Beautiful illustrations in this guide to Juneteenth from Cero.
• The one CSS combinator I use in every project (YouTube) -I use this same combinator in almost every project. I wrote a post about it several years ago and later developed a talk about the subject. I found the adjacent sibling combinator to be a powerful tool when writing CSS for a CMS that I could not control the HTML source.
• Design Cut’s Free Photoshop Event – All of the talks are archived on their site. I am really interested in several of the texture talks.
• Smashing Magazine Monthly Update – Smashing Magazine did several free online meetups and you can find links to the different talks in this roundup article.
• CSS :is() and :where() are coming to browsers – Find out more about these selectors that will be coming to browsers soon.
• Is there still room for debate? – Interesting article that shares concerns I have about dialogue in this country.
• A Smashing Guide to Accessibility – Guide to many recent articles about accessibility on Smashing Magazine. I have mentioned several of these articles recently.
• Uncomfortable Conversations with a Black Man – Episode 3 with Chip & Joanna Gaines + kids (YouTube) – Continue to enjoy and be informed by these conversations from Emmanual Acho
• What Vitruvius Can Teach Us About Web Design – As one who has a degree in architecture, I think there are a lot of parallels with building digital spaces.

Offline Reading

• Between Me and the World – I continue to work through this one for the LGND book club.
• All That’s Good – I am continuing to enjoy this book I started the previous week.

Watching

• Someone Feed Phil (Netflix) – one of the best shows I have discovered recently.
• The West Wing (Netflix)
• Disney Gallery – The Mandalorian (Disney+)

Playing

• Madden20 – I finished the regular season with the Chiefs last week. I ended up 11-5 (not quite as good as the real team that finished 12-4) but I matched having the #2 seed in the AFC playoff bracket. I threw way too many interceptions with Patrick Mahomes but was able to battle through several games with a really great defense.
• FIFA20 – I finished my first season with Borussia Dortmund on Saturday. Just as IRL, I finished second behind Bayern Munich and just before RB Leipzig.