Skip to content

Enjoy Kaizen

Category: Web Design

Dads’ Breakfast: Commit c6ac2d562b

From the Making of Dads’ Breakfast

HTTPS://CJWILLCOCK.CA/DADS-BREAKFAST-MAKING-OF/

I added microformats to Dads’ Breakfast, my active WordPress theme and ongoing bit of coding in the open.

Dads’ Breakfast: Commit c6ac2d562b,

It is early days in D. B. but my Psymantic theme is longer in the tooth (practice) and in it I wrote some code to mute WordPress’ microformatting with h-entry and hentry wherever post_class() is used. WordPress applies the h-entry context to all of my owned content, sans-theme. A dirty press is, the working press. I think I may have leveled-up on the distraction-free writing mode with this one.

With that out of the way and on adding the h-entry back I was left with a divot to fix when the post_class('h-entry') no longer worked as the WordPress documentation of this library function describes it to do and thus I discovered the platform is left compromised by my D. B. theme architecture. First, I had this planned and second, they-all started it.

Using the conventional post_class() template tag, to now allow a theme author to use discretion on the location of an h-entry via post_class() is a must-do in order to obviate the shoe-horning I need to accomplish to make this theme. h-entry is therefore written wp-entry in the post_class() library function call using a Psymantic-based theme in WordPress.

This is the simplest I can figure to satisfy the requirements of semantic interoperability given modern definitions of both WordPress & Microformats. There is much more done in the Psymantic theme to mute microformatting. Aside: I should write about that maybe.

Trial balloon now steady on a string, adding the h-entry back via wp-entry is done:

/**
 * Filter the post_class tag to convert wp encoded microformats.
 *
 * @since 0.1.0
 *
 * @param  array $classes The list of classes.
 * @param  array $class   The class provided to the function at call-time.
 * @param  int   $post_id The ID of the post for which the classes are given.
 * @return array The filtered classes.
 */
function dadsbreakfast_post_class_convert_wp_microformats( $classes, $class, $post_id ) {
	return str_replace(
		array(
			'wp-entry'
		),
		array(
			'h-entry'
		),
		$classes
	);
}
add_filter( 'post_class', 'dadsbreakfast_post_class_convert_wp_microformats', 10, 3 );

The rest of the commit is there for those with additional time and interest.

Johannes Me That Duck

I just wanted to embed my self-hosted WP-theme repository for this theme, via iframe on my blog post.

I recently added some microformats in a single commit, that I would reason over, here.

A partial screenshot of the most dense table header I have authored.

Browser Quit: Smell ya later Chrome

I found my mouse pointer disappeared whenever my mouse moved inside the Chrome window. Worked fine outside.

This was yesterday or the day before I guess.

Yea, I could get it going, I’m sure. But I was looking for an excuse ever since they started forcing me to login to Chrome all the time. Among other things. It got creepy. (note: works now after doing … something).

It’s – since the Alphabet spin-up. Or I saw it coming on the day I learned about the motivators to spin up Alphabet. The Google brand disconnected from the originators passion just then.

Now Google is a profit driven, corporate giant. Like a crab molting from a smaller shell. You may still be seeing it mid-molt. You know what’s next though, don’t you?

I was a Vivaldi user before I switched to Chrome – when my work became full-time web-dev.

That’s not my work now though. Well, not full-time.

It’s Firefox time.

Can I change that pink/blue color in the inspector when I look at CSS rules though? Because really, that’s the main thing that stopped me from switching before now.

The annoying thing now is all those saved passwords that are not in Firefox. It will take a little while to sort out.

Worth it.

sup, duck?

From the Making of Dads’ Breakfast

HTTPS://CJWILLCOCK.CA/DADS-BREAKFAST-MAKING-OF/

My tables in the Gutenberg editor have cells that are too full to fit the tableau.

I took the font size down two pixels (2px) from sixteen to fourteen (14).

.wp-block-table{
	font-size: 14px;
}

Duck, We Should Talk

When I copy text to my clipboard, and paste it into a table cell using the Gutenberg editor, a space is automatically added at the front of the text I paste.

What?

I hit paste. I carefully remove that leading space that WordPress seems to think is necessary.

Every. Time.

Nothing To See Here Duck

It would be swell if the page-break block in WordPress allowed me to specify a piece of content that would appear as page-footer & page-header on subsequent page-fulls.

The various page-break blocks should share their content, so that changing the content in one, changes content in all others to match at the same time.

At present, the page-break block has no configurable options at all.

Dads’ Breakfast: Commit 998df0135f

From the Making of Dads’ Breakfast

HTTPS://CJWILLCOCK.CA/DADS-BREAKFAST-MAKING-OF/

You are welcome to view this commit via github, sourcehut, or author’s original.

I use two (2) flatscreen LCD monitors at my writing desk. Both monitors are 1080p and leave me some room around the default block widths in the Gutenberg editor. These have a maximum width of 31.77% of my viewing area. I’m looking for nearer to half as a minimum return on my monitor-dollar.

I preserve some negative space around the tableau but impose a little bit more room for tables and various things, by applying the following CSS to the editor:

@media (min-width: 1280px){
	.wp-block{
		max-width: 800px;
	}
}

@media (min-width: 1600px){
	.wp-block{
		max-width: 960px;
	}
}

With this change, on any screen with two-thirds (2/3) the horizontal resolution of a monitor like one of mine the block widths increase from 47.66% to five-eights (5/8) of the viewport width. At screens five-sixths (5/6) mine the block widths increase from the 41.69% of the viewport width imposed by the previous media query -up from 38.125% at default WP size- to three-fifths (3/5) of the viewport width.

The ratio of viewport width to block width changes as the viewport width increases. I’m keeping the tableau on desktop to a comfortable one-half (1/2) of a 1920 pixels wide viewport. YMMV.

Verse, WordPress 5+

Test of verse type.
What's that about?
Enter key doesn't create a new block now.
This should be closer to the top of the visual queue.
Uh, guys? Guys? Shift+Enter doesn't create a new block. I'm stuck here.
Ah-ha! The down arrow is needed. 
But wait, there's WordPress! -_-
No HTML entities either?
 ,
 ,
`/

Quick Fix for Indentation Inconsistency in CSS, Using Chrome Web Browser DevTools

Does your CSS look like this?

@media only screen and (max-width: 720px) {
.planning .grid-wrapper{
  grid-template-columns: 10px 300px 10px;
    justify-content: center;
}
.planning .tuesday {
grid-column: 2;
grid-row: 1;
background-color: #eee;
    border: 5px solid #555;
padding: 70px;

}

Did you notice the media query is still open here? This can lead directly to the swamp of desperation, is time-consuming and ever more disheartening as the number of lines adds up and the mental effort to unwind it becomes greater and greater. More CSS, more problems.

Not to worry! There is a super-simple way to fix this up quickly.

  1. Pre-requisite: using Chrome web browser
  2. Right click anywhere on your website.
  3. Choose ‘inspect’ from the context menu.
  4. In DevTools, select the Sources tab.
  5. On the navigation pane, browse to your CSS source file and click to select.
  6. In the reading pane in the center, look for an icon: {} in the bottom left, just under the line numbers. Click it.

Boom! Your CSS source code has been auto-formatted with proper indentation.

  1. Select all the text of the shiny CSS here in the reading pane (Windows users: CTRL+A).
  2. Copy and paste this into your CSS source file.

With this little process, you can hopefully reduce the number of occasions that CSS causes you grief and stay on top of it!

Gallery Test

Pancakes!

Time to make a new theme for cjwillcock.ca.

I forked my Psymantic theme and made a new theme, Pancakes. I’ll install it here, then make it less ugly. It’s going to break things, but not for long I expect.

Pancakes is also free software, because software wants to be free! Enjoy.

Lastly, a screenshot of what once was, for posterity. Shout out and kudos to David Shanske, the provider of the twentysixteen-indieweb theme I have used until now.