Sharp Words, (Hopefully) Pictures

There’re quite a few things on this site, designed or technical, that I’m itching to fix; but none is more literally painful than the WordPress blur that’s happening with these .jpg/.jpeg images.

I mean, just look at the post below this one: the new shirt. I don’t know about you, but the thumbnail picture is physically, overpoweringly awful on my eyes.

Never mind, I’ll just put it here:

Sorry, shirt… and everyone’s eyes.

What you’re looking at is a 1:1 (or thereabouts) .png-screenshot of the problem.

Even when this is all done and fixed… still awful. Forever. It’ll make a good before/after-thing.

So, here’s the promise:

In the not-so-distant future, I’m going to fix this and then present the solution right after this statement.

The Answer

Hello, Sunshine, my old friend.

It may not be super noticeable at first glance, but you should be able to spot the difference between this version and the one above. No worries if you can’t though, it’s relatively minor and this shirt in particular doesn’t make it as obvious as the changes I’ve seen in the other shirts.

So, the problem was simple but the answer tricked me a bit. In WordPress, you choose the dimensions for various sizes of pictures. For example, one size for thumbnails, another for medium image, and one for large images, as can be seen here:

When changing themes or making changes to them, it’s common to adjust these dimensions so that they better fit the current theme. And after adjusting them, it’s necessary to regenerate all the images so that those new dimensions are used. Well, I’ve been working on this theme quite a bit, but not just here. Not only on Most of the actual development happens offline in a staging site (i.e., a site used for testing and development).

While making changes to both this (the live site) and the staging site, I’ve had to change the thumbnail settings multiple times. However, it turns out that I forgot to regenerate the images on this side of the pond (the live site) after the last time I adjusted the media dimensions. Just a simple oversight that leads to a literal headache. It happens.

Since then, I’ve gone back and fixed all the old post images; everything should be fine from here on out. Huzzah.

JQuery Loves DOM

A.k.a. …okay, I fixed it.

I don’t think I’ll become a poet any time soon, but I needed to release some stress stemming from a few CSS/jQuery bugs I’ve been dealing with; thus, the strange and beautiful(?) post from yesterday. (FYI: I’ve got nothing against ice cream, it just doesn’t do much for me.)

But before I get into the bad, a few things have gone well. You may notice a fancy new menu on the left (or above, for those on smaller screens). Nothing really significant, just the standard tree menu you would find on many sites, but I wanted to make it from scratch for a few reasons:

  1. To brush up on my jQuery.
  2. Ditto for CSS flexboxes.
  3. So I can make changes later.

The third point being somewhat important since a lot of premade menus will work quite well, but there’s often little to no customization possible. And, while it looks pretty good now, I want to play around with it some more and make it look really slick.

Flexbox is honestly a godsend and, once you get your head around it, you’ll save so much time with any kind of layout imaginable. Using floats to align items can be a little quicker sometimes (e.g., I use it for right aligning thumbnail images in posts — as seen in the T-Shirts! article). But for anything even slightly more serious, flexbox is the much better long-term choice. (If your interested in learning, I can’t recommend CSS-Tricks’ guide highly enough.)

And I just really like jQuery/Javascript. However, there are a few quirks I ran across (i.e., now for the bad), which mostly contributed to yesterday’s madness. For example, jQuery is a stickler for proper DOM, specifically meaning that you can’t add open HTML tags (i.e., no closing tag) — that would be invalid DOM. So you can’t do this:

some-html.before('<div class="newDiv">')

This would result in <div class="newDiv"></div> coming before some-html with no closing tag (i.e., </div>) ever appearing later. JQuery really, really wants to close all tags ASAP. It’s not a big deal though, it’s easy enough to work around by using .wrap() instead of .before() and .after(), but it’s still kind of a pain for larger blocks of code.

There are still a few other bugs and additions to take care of before I can consider the theme complete (for now), but I’ll be putting those off for a bit in favor of adding more content and working on some shirts/wallpapers/etc.

[Edit: Just now noticing I need to update the CSS style for <pre><code> blocks (like for the bit above). Maybe tomorrow.]

So, in the meantime, just please don’t set your window size to exactly 927 pixels wide. Or, at least, don’t keep it there. The site doesn’t like that.

There’s a problem with the site…

…and I’m not going to fix it.

A.k.a. A Problem with Perfectionists

First thing’s first: If you know Javascript, you might as well know jQuery. It’s just such an obvious HTML/CSS/* step.

Second thing’s second: You can solve any problem. I bet you so much money you can. Generally, to me at least, it’s about willingness and strength of idea.

“Is it truly a wonderful thing?” –Yes
“How long can you hold on to that before it breaks you?” –Um.

Combining the two (satisfactorily) is hard.

Some things are easy:

Ice Cream
A lovely combination of cold (good for hot days) and sweet (good for always).

Now eat a 100 gallons of ice cream in 100 days.

Can you do it? Would you do it? Why would you do it?

To know why you love what you love is important.

I don’t like ice cream.

I do hate hot days though.

Can’t fix that.

Bug Hunting

I’ve been updating the site for about the last week now. It’s mostly been lots of little things:

  • Fixed a few broken HTML/CSS elements.
  • Added some pages (with many more on the way).
  • Integrated responsive design by way of a dropdown menu for small devices (change the window size or screen orientation to see it in action).
  • And other, dumb, technical odds and ends.

There’s also a pet project I’ve been working on that I’m super stoked to reveal, but I have a few more things to take care of for now, so look forward to that announcement tomorrow or the next day.

In the meantime, I’d recommend checking out my new desktop wallpapers. I think they’re cool, and, while they are made for desktops, they translate to mobile devices pretty well (just takes a bit more effort).

Please keep in mind, the site will be a bit disorderly while all these updates are happening. Things may look strange for a bit, but whatever the problem is will be ironed out soon enough.

Thanks for stopping by; see you soon.