Forem: Paul

KendoReact Challenge: Epicure's Lost Recipes

Paul — Sat, 22 Mar 2025 23:26:37 +0000

This is a submission for the KendoReact Free Components Challenge.

What I Built

Earlier this year, a company called Epicure closed down their business and website. They were primarily focused on cooking products, but they also had over 3,000 recipes on their site which were no longer accessible. I built a NextJS static site using data scraped from the Internet Archive to resurrect Epicure's lost recipes. When I built this website, I originally created it using MUI components. For this challenge, I have created a branch of that project using KendoReact components instead.

Demo

Take a look at the KendoReact Challenge branch of epicure-recipes here:
https://deploy-preview-23--epicure-recipes.netlify.app/

And if you'd like, browse the source code here:
https://github.com/peiche/epicure-recipes/tree/kendo-challenge/

Here are a few screenshots of the website's different browsing capabilities. It is possible to view recipes in a list; recipes tagged under a category; and recipes tagged as using a particular Epicure product. This can vary widely, since Epicure made seasoning packets and jars, as well as kitchen utensils and tools like burger presses and microwave steamers.

When I was scraping data from Epicure's recipes, I found that each page contained data in JSON format that contained not only the recipe itself, but also category and product information. This made it quite easy for me to build out tag and product pages as well. I don't have any interest in upselling their products, of course. I'm not affiliated with Epicure, and they aren't manufacturing any new ones, anyway. But it is useful to know what products are used in a recipe, and if you have one of those products, the ability to find more recipes that use it.

Because this is a static site built from JSON data, there is no way to reorder recipes on any given page (although the metadata for dates published and the like does exist in the original JSON). These pages are good for browsing, but if you're looking for a specific recipe, you're better off using the search page.

The search is built using Algolia's InstantSearch for React. I mentioned that the site is built on static JSON data; that very same data was also used to generate the Algolia search index.

The site's search is separated into two parts. The first is the search page, which uses the aforementioned index. Since I already have data for tags and products, it required no extra effort on my part to include that data as facets.

The second part of the search is the suggest, which Algolia offers as a "learning" index. It uses the primary search index and updates it based on usage, adding and modifying records as people use the site.

KendoReact Experience

Below is a list of KendoReact components I used in the project, followed by some custom work when they couldn't offer enough functionality or customization for my liking.

Typography

This is a pretty obvious one, and almost shouldn't even count in the list of components. But it is one, since with this single component one can render a variety of typography-related tags.

Button

Buttons are used throughout the site, primarily for functionality that doesn't directly result in navigation to a different page. This includes things like the Search button in the navbar and pagination on the search page.

The difficulty I encountered with converting from MUI to KendoReact was that Kendo's Button component can't be a link. It can only render a <button> element, never a <a>. Sure, you can set the onClick event to trigger navigation, but for SEO purposes I prefer to render a link. To that end, there are instances on the site where I manually created anchor elements that merely look like buttons using the same CSS classes as the Button component. You can see an example of this in the "button" on the homepage.

AppBar

The site's top navigation uses this, along with subsequent components. Rather than use display: flex in custom CSS to create spacing, I was able to leverage the AppBarSection and AppBarSpacer components with zero utility class usage.

GridLayout and GridLayoutItem

In places where I needed to create a grid, such as the list pages and search results, I used these components. Unlike MUI's Grid counterpart, these use display: grid rather than display: flex. I am less familiar with CSS Grid than I am with Flex, but making a symmetrical layout is simple enough.

What I did have issues with is making the layout responsive. I found tutorials on how to do so with KendoReact (like this one) that require extensive configuration or creating a listener to window resizing. None of that appealed to me, so I created a couple utility classes in my stylesheet, one for a two-column layout (used on the search results page) and one for a thee-column layout (used on all the list grid pages).

Card

Inside every GridLayoutItem component was a shared recipe card component, which used Card and subsequent components, like CardImage, CardHeader, and CardBody. Some style specificity I had to override with the utility classes provided by the themes' stylesheets (more on that later).

TextBox

I don't have much by way of forms on the site, but there are two: the search suggest and the search results page itself.

Chip

You might think that I'm using the Chip component on the recipe detail page, but you'd be wrong. Those are actually a custom component with all the classes to recreate the appearance of a Chip. The reason I didn't use the KendoReact component is simple: you can't make it a link, only a button. For SEO purposes, I prefer to use a link when navigation is required.

On the search results page, however, I am using the Chip as provided by KendoReact. There's no navigation there: clicking on one of those will rearrange the search filters. The hit count next to each facet is also a Chip, but used solely for its display design.

Checkbox

On the search results page, each facet is represented by a checkbox. Checking it will filter according to that selection; unchecking it will undo the selection.

Dialog

To pop up the search suggest modal, I'm using the Dialog component. Super simple, and no customization required.

Drawer

Like every page, the search results page is responsive. I designed the entire site to be usable on a phone as well as a computer, and the search is no exception. When your screen is too small to display the search filters alongside the results, I hide the filters in a sidebar. Inside the drawer, the selected facets are also displayed.

I did find the Drawer somewhat counterintuitive to use, as the default behavior expects to be given a list of items as navigation. However, there is a component called DrawerNavigation that can be used to manually insert any kind of content inside the drawer.

Switch

I put a Switch in the header to swap between light and dark modes (more on that in a minute). There isn't a whole lot of customization; it only allows for custom text in the different toggle states, and I really wanted to use sun and moon icons. I found a site that lets you search for symbols, so I copied those characters and put them in the text props.

The selection defaults to light mode, but switching it saves the change to local storage, allowing a user to keep using that theme without having to click it again the next time they visit.

Custom Components

As I mentioned, some of KendoReact's components did not offer enough versatility to use out-of-the-box. I want to talk about those for a minute here.

Button

I already mentioned this one, but I think it bears repeating. Sometimes you want to style a link like a button, and KendoReact does not provide an easy way to do that. Every time I wanted a link that looked like a button, I would create the button, copy its CSS classes, and then manually create the link. (In my case, I used NextJS's Link component.)

{/* Button component */}
<Button
  themeColor='primary'
  fillMode='solid'
>Print</Button>

{/* Recreated link  */}
<Link
  className='k-button k-button-md k-button-solid k-button-solid-primary k-rounded-md'
  href={`/recipe/${slug}/print`}
  target='_blank'
>
  <span className='k-button-text'>Print</span>
</Link>

Chip

The "chips" on the recipe detail page, as I've mentioned, are custom anchor elements. Much like I did with the links that look like buttons, I created a Chip, copied its CSS classes, and created an anchor element with those classes. You can see the custom shared component here:

https://github.com/peiche/epicure-recipes/blob/kendo-challenge/src/components/chipLink.tsx

Pager

As far as I could tell from the documentation, the Pager component was to be used within the context of a data table. I had two use-cases: pagination for the browse pages and the search results page. The former had to result in navigation, so they had to be links. The latter are buttons since they update the page but don't result in navigation away from a page. (The URL does get updated, though, so a specific search result can be linked to.)

I ended up writing my own pagination components, one for each use-case. I briefly considered writing a single component that could handle both, but there is such a thing as over-engineering! 😆 As a result, there are two components, each with identical logic to skip over displaying every single page.

https://github.com/peiche/epicure-recipes/blob/kendo-challenge/src/components/pagination.tsx
https://github.com/peiche/epicure-recipes/blob/kendo-challenge/src/components/searchPagination.tsx

Breadcrumb

The breadcrumb component was another case where the elements could not be given a destination outside of an onClick event. It made even less sense here because each leaf in the breadcrumb's path is an anchor element, but is hard-coded to have "#" as the href value. In order to have a breadcrumb component that rendered functional anchor elements, I wrote my own, using the existing CSS classes used by the Kendo component.

https://github.com/peiche/epicure-recipes/blob/kendo-challenge/src/components/breadcrumbs.tsx

Delightfully Designed

I created an account on Telerik and signed up for the seven-day trial of the Theme Builder pro, just so I could have more than one design. (The free tier has a limit of one.) I created two color themes: one light and one dark.

I exported the two themes, but my use of the downloads changed over the course of development. I originally used the Sass exports, but I found that the variables used there were Sass variables, not custom properties (i.e., native CSS variables), so I switched to the CSS exports instead. (My separate global stylesheet still uses Sass.)

I initially put the stylesheets inside /src/themes, but moved it into /public because the CSS theme switcher dependency I was using required a static, public URL.

Final Notes

I did mention using some utility classes to override some default styles. Before I did a deep dive into the styles included with the theme -- both the base stylesheet and the exported files from Theme Builder -- I considered using Tailwind to supplement what I needed. After some digging, however, I found that Kendo already provided most of what I needed. (I did, as I mentioned, have to create a couple grid-related utility classes.)

I also want to note that while I am using a few icons, none of them are Kendo's. I did start out using them, but there are some they don't have, like the fork and knife icon I'm using on the recipe detail page. I used Font Awesome for that. Rather than have visual inconsistency (heaven forbid!) I decided to make all the icons come from Font Awesome.

The best hobby web apps are the ones you build for yourself. That's no less true in this case, since I use it quite a bit. ("I'm not just the president, I'm also a client!") It's invaluable to me to be able to pull up a recipe on my phone; to that end, the entire site is responsive: from the home page and browse to the search and recipe detail pages. Maybe you can have a use for it too!

Thanks for reading!

I've had a lot of fun (and some frustration) in refactoring my existing site to use a new set of components. And if you're a foodie, feel free to poke around my recipe site. It's a labor of love.

I may still write about the process I used to generate the JSON files which form the base of the static site, but that is a story for another time.

I built a recipe website

Paul — Fri, 07 Feb 2025 04:44:52 +0000

I want to share the recipe website I made:
https://epicure-recipes.netlify.app/recipes

Recently, the company Epicure went bankrupt. They primarily sold seasonings and meal kit packets and supplies, but their website was also host to 3,300+ recipes. When the company shut down their website, those recipes were lost... sort of. Using the Wayback Machine, I scraped all those recipes and built a static site from the data. The source code for that site can be found here:
https://github.com/peiche/epicure-recipes

I initially built the site using a static site technology called Gatsby, not realizing that it was actually a dead project. After a little research, I found that Next.js is a pretty popular alternative for building a static site, so I set myself to the task of porting it.

Not only is the port complete, but I've added a lot to the site since then. I've added images to recipe pages, tags (think like blog post tags), and lists of products used in each recipe. I also added dark mode because I love it and prefer it.

The most recent addition is a faceted search powered by Algolia. I already use it on the family website, but since that's running WordPress, I really haven't ever had to build a search index from the ground up, using all-new data. Well, now I have.

I built the UI with MUI. I'm a big fan of Google's Material Design, and this port of it is top notch. It's my go-to whenever I build a React app.

Usually Next.js sites are hosted on Vercel, but I am well experienced with hosting static sites on Netlify, so that's where this one is hosted. I have a local script that rebuilds the site if/when I make some improvements to the extracted data, which gets checked into the GitHub repo. From there, Netlify automatically deploys the updated site.

Ankur 1.0.4

Paul — Thu, 15 Feb 2024 17:36:03 +0000

I’ve made a few updates since launching Ankur on the WordPress theme directory.

I have been remiss in updating the blog as much as I’ve updated what the blog runs on. The recent updates have really just been maintenance and behind the scenes fixes, for the most part. There are a few things worth mentioning, though.

1.0.1

The first update really was just housekeeping stuff. I added PHPCS to the build scripts, to ensure the use of code standards and best practices. A side effect of doing that, then, was it discovering some errors and warnings in the PHP files. This update also included those fixes.

1.0.2

This was even more of a minor update. I moved several anonymous functions to named functions. (This was at the recommendation of a reviewer.)

1.0.3

I do have some custom styles and overrides in Ankur. One such example is maintaining the same spacing between blocks, like paragraphs and images. The quote block, however, was missing this spacing in the top margin. This update fixed that.

1.0.4

This update fixed a number of things that had been piling up; some housekeep and maintenance, and some user-facing issues. First, the housekeeping:

Updated caniuse to the latest version. This is a library that handles compatibility validation across browsers.
Merged in some package updates handled by the dependency checker bot (axios, @wordpress/scripts, and follow-redirects, if you must know 😜).

And now, the visible fixes:

Removed the class attributes from custom block style registration. These were unnecessary because I’m already using the default CSS class generation.
Fixed responsive font sizes to improve readability. Now fonts won’t shrink indefinitely if you resize your browser window to be smaller.
Removed old quote block large style selector. There were two, .large and .is-style-large. Only the latter is used in the block editor.
Removed unneeded quote block plain style from stylesheet. The block style is supported in WordPress core, so only its definition in theme.json is needed.

Ankur, a WordPress block theme for everyone

Paul — Thu, 02 Nov 2023 02:22:32 +0000

Introducing a new WordPress block theme with support for color variations and custom patterns.

Ankur is a block theme for WordPress. It’s named after a Sanskrit word which means “flower” or “blossom,” imagery often used to depict a new beginning. At the same time, an anchor (because I love wordplay) symbolizes stability and confidence. With Ankur as the fully customizable starting point, whether as a brand new site or revamping an existing one, you can tell your story with clean typography and bold colors.

Theme style variants

Ankur comes bundled with multiple style variants: light, dark, and three nature-themed alternates.

To apply one of these styles, open the new Site Editor and select the Styles menu item. In the Styles sidebar, you’ll be able to pick your theme’s style.

Choose the one that speaks to you, and click Save to apply it to your site.

Default patterns and customization

Ankur also comes bundled with several patterns to give you a head start in making your site your own. A little bit of everything is included: headers and footers, featured content areas, post previews, and even a custom large blockquote.

Remember that you don’t just have to use what Ankur provides, either. Click the three-dot menu on any pattern and select “Copy to My patterns” to customize it to your liking.

Goodbye child themes, probably

The WordPress site editor removes, in large part, the necessity to create a child theme. For style or design changes, it’s no longer a requirement; simply make your changes and save right in the editor.

My own website is, however, running a child theme of Ankur. The reason for this is — beyond simply because “Paul is a programmer” — I have custom functionality not needed for a general-purpose theme. For example, I have a color theme switcher in the site footer. The custom JavaScript for this functionality is not included in the base theme. (In fact, no custom JavaScript is included with Ankur.) Therefore, child theme.

I also use a custom plugin and service to handle the search functionality. The service is a cloud search called Algolia (and I highly recommend them, I don’t get paid to say it but they’re awesome). The templates I use for displaying the search results are custom. So again, a child theme is necessary for that.

But if you don’t need to do anything super custom, then you probably don’t need a child theme.

Writing a contract when the work is already done?

Paul — Wed, 12 Jul 2023 02:06:16 +0000

I suppose this is a bit of a weird question, but I couldn't find anything pertaining to my situation.

My wife works for a preschool and childcare, and she was put in charge of scheduling for the staff. In order to do that, she had to calculate the teacher-student ratio (it differs depending on a child's age) for each classroom. I was horrified to learn that this was all done with pencil and paper, so I wrote a web app to assist with this.

When the web app was complete -- and my wife had been using it for several weeks -- she presented it to the director of the facility. The director was impressed with it, and (some weeks later) had me attend a staff meeting to present it in proper form to the entire staff.

Now that the app is done, and has not been in need of any debugging or any kind of maintenance, really, the director informed my wife that she wants to pay me for the work. I certainly didn't keep track of the number of hours I put into it; it was a labor of love, literally: I love my wife and saw a way in which I could make her job a little less stressful. I can guess, but a guess is all it would be.

So as to my question. I have found plenty of templates for web development service agreements, but how do I write one when the work has already been done?

Teacher-Student Ratio Calculator

Paul — Wed, 17 May 2023 13:24:02 +0000

Appwrite is doing a hackathon with Hashnode. Is it a no-no to post about one developer community site on another? I dunno. But since I do cross-post the majority of my code-related stuff here, I figured I'd post it anyway. :)

Team Details

Paul: It’s me. I built this by myself*.

About This Project

My wife is a teacher and scheduler in a childcare facility. They have a wide age range of children, from infants to toddlers to preschoolers. It is admirable work, but unfortunately for her, the scheduling system that tracked children was all done on paper. As she told me more about the details that went into the scheduling, I became convinced that together, we could create a reliable digital replacement.

This, the version I’m submitting for the Appwrite hackathon, is not quite the final version. A few pieces are missing for the sake of a public demo: authentication, for example. Another is the student list: none of the children in this public demo are real people. The primary functionality, however, is intact with generating a list of times of day, with classrooms of students and their calculated decimal ratio values.

Tech Stack

Netlify for automatic deployment from GitHub repo.
Appwrite Cloud
- Database
React
- React Router for pages.
- Redux and Redux Persist to save settings locally.
- MUI for easy layouts.
- Day.js because dates can be hard in JavaScript.

Challenges We Faced

The first and largest challenge was entering all the children at the daycare into the database. The first table was created for this purpose, which stores the first and last name, the times the child arrives and leaves the daycare, and their birthday.

Each child is assigned a decimal value to calculate the teacher-student ratio. As they age, the decimal value changes. (The older the child, the smaller the value.) In the previous (pencil-and-paper) system, each child’s value was recalculated by hand every day, because the time intervals which required a ratio change were not necessarily only on their birthday. Since the digital system tracks the child’s age, calculating the decimal value happens automatically.

Since the daycare is a smaller one — with a smaller staff — children do not necessarily stay in the classroom in which they start the day. For that reason, we chose not to create static classroom groups, but rather allow the user to create and (re)name them as they see fit. The ability to remove and add children to different groups was likewise important. Drag and drop would perhaps offer a nicer UX, but checkboxes for addition and removal were deemed sufficient.

In adding children to classroom groups and moving them around, my wife found that sometimes she needed to edit their starting or ending times. The daycare allowed parents to text, email, or call with last-minute schedule changes, so the ability to quickly edit a student proved important. Clicking on a student’s name within the selection screen, or even the final ratio calculation screen, opens a new tab with all navigation removed. Clicking the “Cancel” button simply closes the tab, bringing the user back to the previous tab. Clicking “Save” — as you would expect — updates the student’s record and also closes the tab. It’s important to note that after updating a student, the previous tab does not refresh; that must still be done manually.

Originally, the time slots for which the report was needed were hard-coded. It was not too difficult, however, to create another table — just a simple one with a single column — which stores each slot. These slots will rarely, if ever, need to change; that said, the ability to do so can now be handled by the user and does not require a redeploy.

A final generated ratio report is not saved to the database, but it is possible to export it to a saved JSON file. This file can then be imported for quick editing or printing.

It’s quite possible — probable, even — that adding dark mode was not necessary for anyone other than myself. In all likelihood, it was simply bikeshedding. That said, I am a dark mode enjoyer and use it whenever possible.

Public Code Repo

https://github.com/peiche/teacher-student-ratio-calculator

Feel free to poke around! I know enough React to be dangerous, but by no means do I claim to be an expert. Much of this project was a learning experience, especially with Redux Persist. And by all means, submit a PR if you see something you think can be improved upon. I am never too proud to learn. :)

Demo Link

https://tsrc.netlify.app/

The database holds a list of students and time slots, but a generated list of ratios per time of day is not saved to the database. Rather, it is saved to local storage via Redux Persist. It is easy enough to create, name, and organize groups of students, however. After at least one group is created, the “Generate” button appears to calculate the decimal ratio values for each student, totaled in each group for each time of day in the database.

For the sake of this open-source demo, I am not requiring authentication. I have prepopulated the database with times of day and students (all fictitious), so generating ratio calculations is a snap.

*Although I configured the Appwrite database tables and wrote all the code, my wife — the inspiration behind this project — provided tireless feedback to improve the experience, plenty of love, and many cups of coffee. (Electric Unicorn by Bones Coffee might just as well be a sponsor here, too.)

Setting up Steam Link

Paul — Mon, 29 Aug 2022 16:36:41 +0000

The other day, I got it into my head to look for an HDMI switch I had laying around. I moved into a house from an apartment a little over a year ago, so a lot of my stuff is still boxed up. I did find it, though. The whole point of this exercise was to connect another HDMI input to my TV, which only has three ports, all of which were already in use.

I disconnected my PS3 from the third port, and instead connected the switch. (This is not to be confused with the Nintendo Switch, which is connected via the first port.) I then connected the PS3 to one port on the switch (not the Switch ).

Now the real point of this exercise: I connected a Raspberry Pi to the other port on the switch. Some RPi computers are only the actual computer; this one, a 400 model, has a built-in keyboard. It does have a mouse, but I wouldn’t need it.

I plugged the USB dongle to my Steam game controller into the RPi. This allowed me to use it as a mouse before I got the streaming gaming set up. (The right analog input moves the mouse cursor, and the right trigger acts as the mouse click.)

The next step was to pair my two game devices: the RPi to display the games and my computer to broadcast the signal. I opened the console and ran the following commands on the RPi to install the Steam Link app:

sudo apt update
sudo apt install steamlink

The installation put a shortcut on my desktop, which I can just double-click when I want to connect to a computer running Steam. I couldn’t do that, however, until I set up the connection between them. So on the source computer, I opened the Remote Play settings in Steam to pair it with the RPi.

It did involve a little bit of running back and forth down the hallway, since I had to see the verification number displayed on one machine and enter it on the other. Once that was done, I could run Steam Link on the RPi and connect to the computer to play (pretty much) any game from my Steam library.

I will mention a couple caveats to my “pretty much any game” statement. Steam (along with any other website that has directions on how to do this) recommends a wired connection, not wireless, because there can be some lag when connecting via the latter. Point-and-click type adventure games seem fine, like Telltale’s The Walking Dead. Turn-based games, too, pose no problem. I did test out Dark Souls 2 and Tomb Raider with mixed results. The former was a little slow for my liking; the latter was playable.

The other issue I ran into was controller support. Not every game on Steam has full controller support, but most do. (Namine’s favorite game of mine on Steam, Turbo Pug, unfortunately does not.) All games on Steam do indicate in their library thumbnail whether or not they have full support, so determining that involves no uncertainty.

This was originally published on eichefam.net.

Custom icons in the WordPress block editor

Paul — Sat, 27 Mar 2021 01:43:54 +0000

It's been a while since I've done some WordPress work, so this was a nice change of pace. I read on the WP Tavern about a new plugin called JVM Gutenberg Rich Text Icons, which allows icons to be used in rich text fields (e.g. paragraph and headings, etc).

I'm a big fan of Nucleo icons, some of which I already use in my WordPress theme Garrick, but I've thought for a while now that it would be nice to have access to more icons as inline elements -- not just outside the editor or as block-level elements. This plugin fills that gap nicely, but it comes with Font Awesome 4 out of the box. Fortunately, it also provides some filters that allow for overriding this default functionality.

Creating a Nucleo icon font

I'm getting ahead of myself, a little bit. Before I can override Font Awesome, I need a replacement icon font and stylesheet. Because Nucleo is a paid icon library and contains over 30,000 icons, it doesn't have a ready-made icon font the way Font Awesome 4 does. As a result, I followed Nucleo's directions to create my own. As of this writing, the font I exported contains about 2,700 line icons. (The two main styles to choose from are solid and line, since full-color and duotone icons aren't possible with an icon font.)

Using the icon font

The resulting exported fonts and stylesheet can be used directly in my WordPress child theme. Since I have a webpack (Laravel Mix, actually) build process, I put the files in these locations:

/resources/fonts/
/resources/scss/nucleo.scss

My build process copies the fonts and compiles the styles here, respectively:

/dist/fonts/
/dist/css/nucleo.css

Since the stylesheet already references the font files, I just need to override the WordPress plugin's stylesheet with its provided filter:

add_filter( 'jvm_richtext_icons_css_file', function( $cssfile ) {
  $cssfile = get_stylesheet_directory_uri() . '/dist/css/nucleo.css';
  return $cssfile;
} );

This stylesheet will get loaded in two places: the block editor and the rendered website.

Selectable icons in the block editor

The stylesheet, however, is only half the puzzle. There still needs to be a way for the user to know what icons are available to select in the block editor. To solve this, a separate file is needed, which lists the class names. The plugin's default file is in json format, which looks like this (albeit truncated here for readability):

[
  "fa fa-address-book",
  "fa fa-address-card",
  "fa fa-adjust"
]

To be perfectly blunt, there is no easy or direct way to recreate this list for my Nucleo icons. The app does have a JSON export option, but it exports the SVG content of each icon, not just the names:

{
  "icons": [
    {
      "name": "piano",
      "content": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\">...</svg>",
      "set_id": 1
    }
  ]
}

The icon font export contains an unformatted unicode list of all the icons, which is actually pretty close to what I want (again, edited for brevity):

{ "nucleo-icon-digital-key": 59906, "nucleo-icon-line-chart": 59907 }

Instead of an object with key-value paired properties, I just need a list of class named. To get this, I had to restructure the file a bit. I don't know of a way to completely automate this, but the process isn't so complicated that it can't be duplicated if I decide to add more icons.

First, I opened the file in Visual Studio Code and formatted the file (right-click > Format Document, or Shift+Alt+F):

{
  "nucleo-icon-digital-key": 59906,
  "nucleo-icon-line-chart": 59907
}

I added a comma to the last item, then selected all the lines inside the curly brackets. From the Selection menu, I clicked Add Cursors to Line Ends (Shift+Alt+I) and deleted the comma, unicode value, and colon:

{
  "nucleo-icon-digital-key"
  "nucleo-icon-line-chart"
}

While the multiple cursor mode was still active, I added a comma which added it to all the lines. Then I removed the comma from the last line and changed the curly brackets to square. I saved this file alongside my other pre-build files:

/resources/json/nucleo.json

When I run my build process, it's placed in the directory I want to reference from the filter.

/dist/json/nucleo.json

Just JSON file things

Now here's where things got hairy. According to the documentation, I should have been able to use the following filter to override the plugin's json file:


add_filter( 'jvm_richtext_icons_iconset_file', function ( $file ) {
    $file = get_stylesheet_directory() . '/dist/json/nucleo.json';
    return $file;
} );

But this never worked. After some digging, I found this logic in the plugin:

$iconFile = apply_filters('jvm_richtext_icons_iconset_file', $iconFile);

$icons = [];
if (file_exists($iconFile)) {
  $iconData = file_get_contents($iconFile);
  $icons = json_decode($iconData);

  $icons = apply_filters('jvm_richtext_icons_iconset', $icons);            
}

For whatever reason, the file_exists() function call was returning false, even though I confirmed that my new json file was being loaded successfully. I did notice, however, that there was another filter where I could override things. So I updated my filter logic to use the jvm_richtext_icons_iconset filter instead:

add_filter( 'jvm_richtext_icons_iconset', function( $icons ) {
  $file = get_stylesheet_directory_uri() . '/dist/json/nucleo.json';
  $icons = [];
  $iconData = file_get_contents( $file );
  $icons = json_decode( $iconData );
  return $icons;
} );

I already knew my file existed, so instead of overriding the file, I overrode the collection being built using the file. And with that, I have successfully replaced Font Awesome with a custom Nucleo icon library for use within the WordPress block editor.

I do want to mention that in my WordPress theme, I have implemented icons by using individual SVGs instead of by icon font. By doing this, I avoid a couple problems which this plugin cannot in its current implementation address. Firstly, the entire icon library is loaded (via its fonts and stylesheet) with every page view. Secondly, there is a flash of the unsupported character in place of each icon until the fonts and stylesheet are loaded and parsed.

It is my hope that the plugin author will eventually address this and add support for loading SVGs in place of icon fonts. As it is, this plugin is the only one of its kind which allows for inline icons within the WordPress block editor.

Building a local running tracker

Paul — Wed, 27 Jan 2021 17:46:02 +0000

My local runners' club has a four-month-long challenge to run 100 miles. They provided a PDF of a 10x10 checkbox grid, instructing runners to print it and check off each mile completed. My reaction was something akin to the brat in Back to the Future 2:

I thought to myself, Self, we should build an interactive version of this form. So I did. The final version is available here. It's written in React, the source is available on GitHub, and deployed automatically by Netlify.

Building the app

I used create-react-app to build the scaffolding for this webapp. It's the first time I've done so, but since I've built a couple sites with Gatsby (which is itself a React project), I felt comfortable enough.

CSS framework

It's pretty typical for modern projects to either use Bootstrap or Tailwind. The former is pretty drop-in ready, while the latter requires a little more tooling. I myself have preferred the CodyFrame library for some time. Its grid system is as easy to use as Bootstrap's, so I customized it to be 10 columns wide (instead of the default 12).

100 checkboxes

Sure, I could have copy-and-pasted 100 grid columns and checkboxes. But one of the advantages of rendering the whole app inside JavaScript is the ability to iterate and render dynamically (without the need for a backend server, anyway). So that's what I did:

{Array.from(Array(100), (e, i) => {return (
  // simplified HTML 😉
  <input type="checkbox" id={`day-${i + 1}`} />
)})}

Saving data

It was important to me that this app wouldn't save any data, while at the same time allowing the user to keep track of their progress. To accomplish that, data would only be saved locally -- no data would be stored outside of local storage. In JavaScript, that's as simple as:

localStorage.setItem(key, value);

In order to minimize the number of calls to directly modify local storage, the name and checkboxes' change events modify the state. This is also done to make sure that all properties are stored in local storage as JSON. The componentDidMount and componentDidUpdate functions are then responsible both for getting from and setting to local storage, as well as parsing and stringifying (it is too a word) JSON formatting. For example, here's all the functionality for the name textbox (for simplicity's sake):

componentDidMount() {
  const nameJson = localStorage.getItem('name');
  if (nameJson) {
    const name = JSON.parse(nameJson);
    this.setState(() => ({ name }));
  }
}

componentDidUpdate(prevProps, prevState) {
  if (prevState.name !== this.state.name) {
    const name = this.state.name;
    localStorage.setItem('name', JSON.stringify(name));
  }
}

<input onChange={event => this.setState({ name: event.target.value })} />

Exporting a DOM node to an image

Something I thought would be pretty cool is the ability to generate (and download) an image of one's progress. I've dabbled a bit with generating images with Java on the server side, but never in a client-side app. My searching led me to find dom-to-image, which has options for exporting to a JPEG, a PNG, or even a blob (not the killer kind; a "blob" is raw file data, which can be read or processed as you wish). Combined with another library to make saving files easier, exporting the image is done easily:

domtoimage.toBlob(document.getElementById('main'), {
  bgcolor: '#ffffff',
}).then(function (blob) {
  saveAs(blob, '100-miles.png');
});

Trial and error taught me that I had to manually set the background color of the image. I also found, per dom-to-image's documentation, that Safari is not supported. (This also means iPhones.) This particular issue might prevent a one-click image download, but it doesn't prevent the app's primary intent from being used. Being responsive, it's usable on any device -- and any user can take a screenshot, anyway.

Deploying the app

I wrote this with the intent of it being a solely static, client-side app, so deploying to Netlify made the most sense to me. They have a wonderful, easy process for deploying any git site. Since I put the source on GitHub, the entire process couldn't have been easier.

The final product!

New Gatsby Starter

Paul — Tue, 12 Jan 2021 14:33:53 +0000

I've built a couple different sites now with Gatsby: my own and my sister's portfolio sites. I built them both using CodyHouse's CSS framework CodyFrame, but the process to build each has been a little bit of a learning experience. I wanted to take that experience and generalize it for future use, both for myself and for anyone else who wanted it. To that end, I'm happy to announce:

Gatsby + CodyHouse Starter

What is CodyFrame?

CodyFrame is a front-end framework, complete with CSS classes (both BEM and utility) and utility JavaScript, which has no dependencies (like jQuery). CodyFrame's benefit is enhanced with its optional components.

What are CodyHouse Components?

Components is a library of components built with CodyFrame in mind. The CSS and JS is easily dropped into any project using CodyFrame, making it easy to build a fully interactive web app. The JS in each component is plain JavaScript, ensuring that it will work with any framework -- including React and Gatsby.

Using a component with Gatsby

I recommend following CodyHouse's directions for including Components within React. With regard to this starter, a new component file can be created within the src/components directory. The SCSS code would be placed inside a new include created inside the src/styles/components directory, and don't forget to update the _index.scss file in there! Place the JS code in its own file in static/js, and follow the CodyHouse directions for creating/removing the script element in the component's componentDidMount and componentWillUnmount functions, respectively.

Optionally use with PurgeCSS

The starter also includes a commented-out section in the gatsby-config.json file, which can be uncommented to enable using PurgeCSS. Keep in mind that this is not a zero-config option; each use-case will differ, so be sure to follow the plugin directions for fine-tuning the configuration.

Under normal circumstances, I would also submit this starter to Gatsby's official starters page. They're currently not accepting any new submissions, so I'll have to wait to do that. 🤷‍♂️

Migrating from Travis CI to GitHub Actions

Paul — Thu, 10 Dec 2020 00:47:53 +0000

I maintain an open source WordPress theme called Garrick which I also use to power my family blog. (This is known as "dogfooding," in case you're wondering.) It's my third WordPress theme which I've developed from scratch, more or less, not counting the starter theme used as the base. (The first two used Underscores, while Garrick is built on Justin Tadlock's Mythic.) Since the very start of my WordPress theme development journey, however, the one thing that hasn't changed is my use of Travis CI to validate file changes. In that regard, to my mind, this is the end of an era.

Travis CI recently announced a change in their pricing plans which make things a little more difficult for open source maintainers. Garrick is a small enough project where it isn't really affected, but I've seen this happen enough times to know that it's better, wherever possible, to not depend on third parties for functionality that may suddenly be removed or crippled in some way.

Since Garrick is actively maintained and hosted on GitHub, it makes sense to migrate the CI functionality to GitHub Actions, GitHub's relatively new workflow automation system. It can do more than just CI/CD; in fact, I built an action to automate bundling a release zip file whenever a new release is created.

The Travis config I use is relatively simple. Since the WordPress theme uses Composer and npm to manage dependencies, the config must install them first. The theme already has scripts set up to validate the PHP files using phpcs, Sass using Stylelint, and JavaScript using ESLint. I simply reuse those within the Travis config. Here is an example (edited for brevity):

language:
  - php
jobs:
  fast_finish: true
  include:
    - php: 7.4
      env: SNIFF=1
before_install:
  - if [[ "$SNIFF" == 1 ]]; then nvm install --lts; fi
  - composer install
  - if [[ "$SNIFF" == 1 ]]; then npm install; fi
script:
  - composer validate --no-check-all --strict
  - if [[ "$SNIFF" == 1 ]]; then npm run lint:php; fi
  - if [[ "$SNIFF" == 1 ]]; then npm run lint:scripts; fi
  - if [[ "$SNIFF" == 1 ]]; then npm run lint:styles; fi

Setting up an equivalent GitHub Action was pretty simple. I clicked on the Actions tab, then clicked on "New Workflow." Choosing "set up a workflow yourself" allows you to start with a sample .yml file, which is what I did. It took a little bit of trial and error to get it right, but the resulting config runs validation on every update, including on all branches, not just on the master.

While Travis makes things a little easier to use PHP and Composer, doing the same on GitHub Actions requires manual setup. There exists an action for running npm install; there is also one for composer, but I found that installing the composer dependencies can be done just by calling the command directly. So in the interest of limiting my action dependencies, I opted for that.

on:
  push:
  pull_request:
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - uses: bahmutov/npm-install@v1
    - run: |
        composer install --optimize-autoloader
    - run: |
        composer validate --no-check-all --strict
    - run: |
        npm run lint:php
    - run: |
        npm run lint:scripts
    - run: |
        npm run lint:styles

I do want to talk for a moment about when the action runs. GitHub's sample action has this:

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

I didn't want the action to run only on the main branch, since I do want validation on all branches. So I tried this:

on: [push, pull_request]

That resulted in the action actually being run twice. After rereading the documentation, I ended up with this:

on:
  push:
  pull_request:

That results in only running the action once, for any branch. It's not exactly intuitive, since it looks (to me, at least) like some configuration is missing. But it works, so I'm not going to argue with that.

So all that was left to be done at this point was to delete the old Travis config. Good bye Travis CI, hello GitHub Action.

Automatically creating the release for a WordPress theme

Paul — Fri, 28 Aug 2020 05:44:05 +0000

The new GitHub Action I’ve set up will build a new downloadable copy of a WordPress theme when I create a new release or tag in its GitHub repository. In this regard, it’s still fired off by a manual action, but the uploaded file is automatically attached to the new release. This way I can create a new release and just concern myself with writing the description, without having to manually build the theme and upload its zip file.

My Workflow

My WordPress theme uses Justin Tadlock's Mythic starter theme as its base. As such, it has both Composer and npm dependencies, both of which must be included for the theme to work. To that end, I've created a new GitHub Action called "Generate Installable Theme and Upload as Release Asset" to automate this process.

The action is fired off when I create a new release (through either the Releases or Tags tab), which will download the production build's Composer and npm dependencies. (These are slightly different than a development build, which has linting utilities not used in production.) The theme's internal build process uses webpack to compile CSS and JavaScript assets, so this same process is invoked by the action once all dependencies are downloaded.

The final result is a zip file suitable for upload and installation in WordPress, which is then attached to the aforementioned release (or tag).

Submission Category:

DIY Deployments

Yaml File or Link to Code

main.yml

peiche / garrick

Garrick is a modern, multi-purpose WordPress theme built to be compatible with the core block editor and page builder.

Additional Resources / Info

I took inspiration from Leonardo Losoviz's post on how he accomplished a similar process for a WordPress plugin. I probably would have had a more difficult time figuring this out without his code to learn from.

This post was originally published on Bold Oak Design.