Web Design Sketchbook

[kolakube]

I thought it'd be fun to start a thread of the many different UI (User Interface) experiments and design work I create. You are welcome to comment along and let me know if you love or hate them, or just browse along and enjoy random screenshots and GIFs from the madhouse known as the Kolakube Labs!

 

[kolakube]

Tonight I am going all over the place but figured I'd share one of the recent areas of my WordPress theme I am redesigning, a nested comments area.

Here's the before pic, a pretty basic comments section designed back in 2015:



...and a strong candidate for release in the next theme update:



At first glance you will see a more minimal design but the functionality has gotten a big improvement as shown below:



Comment toggles!

Key differences:

1. The new design moves away from being boxed and goes more minimal, now following a timeline like design
2. You can click on on the timeline to jump to the unique comment link
3. More obvious action buttons (Edit for admin, Reply for everyone else)
4. My favorite: upon hovering over the comment you can hide any level of the thread to get rid of part(s) of the conversation you don't want to follow
5. Collapsing a comment level still shows parts of the comment with a subtle fade effect. Thinking of moving this up so only the username/avatar area shows instead of any comment text, but may be too simplistic

Todo: still need to style author comments (old design adds a pencil icon to avatar).

 

[Cedric]

That’s pretty cool and a major improvement for sure!!

 

[kolakube]

Here is a bit of a less sexy update, but an important workflow update in my WP theme, Marketers Delight (MD), that I have been meticulously working on throughout the week.

Within the theme is my own API that makes registering custom admin settings easy as there is no standardized way for developers to add settings to the various admin screens in WordPress. I have maintained this API since 2015 and expanded it to cover all screens in WordPress including taxonomies (categories), generic admin screens, and many other quality of life improvements throughout the software.

Prior to this week, MD added many different settings panels to the post editor which resulted in an explosion of settings boxes like so:



As part of a huge update I am working on for the theme, I think it is important to clean this area up and give an option to group some of these settings together to make the post editor less overwhelming. This is a screenshot from a different website, but I am very pleased to have adapted the API to make a "grouped settings interface" easily achievable. Notice that settings boxes from the first screenshot like Layout, Share, Featured Video, Featured Image, and some others have been grouped under the "Page Settings" tab.



Now that a lot of this backend stuff has been figured out, I am hoping my next update here will have some prettier stuff to show.

 

[kolakube]

Log entry: A Recent Update to XFtoWP...

Over the weekend I released a beta version of XFtoWP 1.5.2 which adds "major" new feature to the Latest Forum Posts Widget that now allows users to show the latest posts from a specified forum only. On the surface this seems like a tiny feature to add, but for a plugin that shows data from a completely different software through an API (WordPress receiving data from XenForo), there are some difficulties with getting data in such a nuanced way and even more so: keeping it accurate!

After choosing where to add the widget, the user can also differentiate between showing the latest posts from all forums or select just a single forum to show the posts from:



...and by saving the widget, a request will be made to XenForo that saves the latest posts data from the specified forum to the WP database for easy access. Now on the frontend, a simple widget showing the latest posts from Forum X will appear on the website like so:



This is a cool feat, but the nature of a latest posts widget is to show posts that are new. The next time somebody replies to a thread in that forum, this widget will need a way to know there are new posts to show, otherwise it will be outdated. So far the only time the widget goes to get new data is when the save button is pressed, and expecting site owners to do this every time they want the widget to update makes the feature completely unusable.

I won't explain the entire process of how XFtoWP pulls data, but to boil it down the plugin has a "main" refresh routine that runs on a set amount of time and then "sub" processes when dealing with individual pages. For example, the "main" refresh process grabs general data about a forum like posts/threads total, a list of latest posts, newest registered members, and a couple of other global metrics. For performance reasons it is important to keep this process lightweight and the amount of data saved to WordPress minimal so these requests can run fast and reliably.

By the very nature of Widgets, an infinite amount of instances can be created. It is technically possible to create 100 latest forum posts widgets all pulling data from separate nodes, but how you refresh the data of those Widgets later is what will make or break the reliability of the integration.

Playing through this scenario of 100 possible widgets, it makes sense that you don't want to tie a data refresh process to a "main" routine as that is a lot of data to crunch during a process that gets run a lot, where most of that data is most likely unneeded at that point in time. Furthermore, you also don't want to update all 100 widgets at a time for the same reason that most of that data may not be needed at the same time, and such a large request could time out or have other unintended effects.

The solution: Save API data to each widget instance away from the "main" data and trigger the "sub" refresh process only when needed (after a specified time limit) and only when any given Widget is active on a page. This will ensure only Widgets that are being seen and used get refreshed regularly, and widgets that are used less get updated less.

I hope someone out there enjoyed this episode of "Simple Things That Aren't So Simple" and I look forward to unveiling the next episode soon™.

 

[Arantor]

Guessing you use transients on the WP side to avoid hitting XF too often?

 

[kolakube]

Guessing you use transients on the WP side to avoid hitting XF too often?

No, I chose not to use transients because I don't like how they clog up the wp_options table. The plugin enqueues AJAX requests based on a pretty simple time check.

 

[Arantor]

They only clog wp_options if you're not backed by a proper object cache - get Redis or Memcached in and this goes away. Though there are other things that clog that pretty hard (looking at you, status dashboard and your caching of all the files in the uploads folder, unnecessarily)

 

[kolakube]

They only clog wp_options if you're not backed by a proper object cache - get Redis or Memcached in and this goes away. Though there are other things that clog that pretty hard (looking at you, status dashboard and your caching of all the files in the uploads folder, unnecessarily)

Sadly I can't rely on everyone who installs the plugin to do this so I keep those kinds of requirements out of the plugin. One of my philosophies when building on WordPress is "I know everyone else is going to abuse the database... but why should I?"

 

[Arantor]

Good policy to have! Wish more developers did that. I also wish more developers would make their initial page load file as small as possible and only load the things that need loading on demand.

 

[kolakube]

That is pretty much my biggest issue with JS frameworks where the page feels fast but under the hood is a dependency nightmare. WordPress gets a lot of crap but I love how "dumb" the code reads as it makes understanding what Core is trying to do a little easier (I say this somewhat facetiously) and it makes customizing your site on that level more approachable to clients.

I also wish more developers would make their initial page load file as small as possible and only load the things that need loading on demand.

Nowadays it is so easy to for developers to hide their sins behind more server power that it makes a lot of performance issues from major plugins (looking at WooCommerce) a non-issue. I do think these get paid for in ways like higher developments costs and more time and stress spent on updates, but sadly the financial incentive to make performant software doesn't seem to catch on like the "first-mover" and "ship it and fix it" paths most companies take.

 

[Arantor]

As someone who has to deal with that side, I absolutely despair of the way the WP ecosystem has gone in that regard.

 

[kolakube]

New screenshot: in my WP theme there is a custom fields API/toolkit that makes it easy to add custom fields to admin screens.

After. getting tired of the clunky interface of the image upload field I took a stab at redesigning it and am quite pleased with the results.

Before:



After:



What's different:

- Smaller square layout makes it easier to blend image controls in with other controls:


- Hides the image URL, which is often useful to access, behind a nice click to copy icon

 

[kolakube]

Another exciting development for the upcoming Marketers Delight 6.0 update: The Byline Builder! Exclusive sneak peak for Admin Junkies only...

The details you share about your published posts are important and should be easy for you, the author, to tailor to your content.

Some authors don't want to show the published date. For articles that are updated often, it may be more valuable to show the Last updated date.

Maybe you want to show the author on the article page itself, but leave it out of the byline on your blog homepage. Speaking of space, it is valuable to list the category you published your post to, but may not be the best at the top of your article and instead placed at the end of your post.

These scenarios and more are covered with this new tool soon to be available in the MD WordPress theme!

A W.I.P. of the main drag and drop interface, customizable on a post type basis:



Dragging a new item into the byline area:



A sample of the settings available per byline item:



An example of a customized byline with data above and below the post title: