What the heck is going on with WordPress?!


Hello Reader,

I realize that for a lot of people who read this newsletter might not care about it, but WordPress holds a special place in my heart.

I don't spend much time thinking about it much anymore as I haven't touched it in ages but a recent post I read has made me a little sad about it’s current state.

First, it holds a special place in my heart because it's where I cut my teeth as a developer. My first steps of taking web development from hobby to being an actual, paying job was with WordPress development.

I learned enough to hack together my own custom theme, then realized how much of a waste of time that was and found a good starting point (Genesis theme, back in the day… I have no idea where that stands 10+ years later 🤷) and would create a child theme on top of it.

Looking back, I think this is where I started really fell in love with CSS, because 90% of what I was doing was writing CSS for those child themes to make them look like very different websites, even though everything had the same structure.

I’d tweak some PHP or use a plugin here or there to add or change some functionality where needed, but I could do a lot without any major changes, and it kept things nice and lightweight as well.

I’ve always thought WordPress gets a worse rap than it deserves.

Yes, there are bad websites built with it.

Some, in fact, are very bad.

There are plugins that slow things down a lot, and there are themes that want to do it all and are loaded with every plugin under the sun.

So, yeah, a WordPress site can be slow, but you can say that about any website.

It’s probably easier to accidentally make a slow WordPress site if you don’t know any better, but it doesn’t make it inherently a bad tool.

Or, well, that’s at least how I’ve seen it, even though I haven’t done any serious WordPress work in about a decade now, and I haven’t really been keeping up with it in a meaningful way.

I’ve kept my eye on the big picture of where it was going, and it did seem that some interesting decisions were being made, but I’ve never been invested enough to really dig in and make informed opinions on the current state of it.

Then I came across an article by David Bushell called Modern WordPress - Yikes! talking about the current state of WordPress, and—as the title of his article says—yikes!

In his article, he takes dives into the Twenty Twenty-Four theme, which seems to be a hot mess.

Now, as I said, you can have good themes and bad themes, but for those who don’t know, WordPress itself creates a new theme every year, and this is the flagship theme.

It should be what other themes strive for…

The early parts of the article look at the PHP (or, lack of PHP?), but then it gets to what depresses me the most, where he dives into the CSS.

I’ll let you check out the full article to see how bad it is, but here’s his recap:

So to recap, the flagship WordPress theme has:
- CSS in front matter
- CSS in PHP
- CSS in JSON
- CSS in HTML-JSON
- CSS in HTML <style> elements
- CSS in HTML style attributes
- CSS in external stylesheets

And the external stylesheet has a total of 3 declarations in it. At that point, why even bother? 🤷

Now, David does mention that he doesn’t know any WP devs who are doing this type of stuff, but I feel like there are some big red flags here.

This is the flagship theme that people often look to to see how things should be done, and rather than being a case of best practice, it feels like they were trying to force it to be some bad version of a JS framework instead, and who also had no real strategy in place for styling things on top of that.

Again, just because they did it this way doesn’t mean it’s the way it should be done, but by having this as the flagship theme, it sort of signals that this is the correct approach, which is worrisome.

Anyway, more reason to be happy I haven’t touched it in a long time I guess 😅.

🙋‍♂️ What I’ve been up to this week

An interview with Travis Neilson (the person who inspired me to start my channel)

video preview

Speaking of how I got into web development in the first place, I had a conversation with the person who inspired me to start my YouTube channel!

I posted the interview on my second channel, as well as a podcast episode.

If you aren’t familiar with Travis, he created a YouTube channel called DevTips back when I was first starting to teach front-end.

It helped me a ton in figuring out how to teach things and quickly became one of my favorite channels, and was a big inspiration for me starting my own channel.

He left the channel a long time ago, but has recently regained ownership of it, and is running a podcast over there with his friend Max.

JavaScript: var, let, and const explained

video preview

People have been asking me for JavaScript content for a long time, so I figured I’d talk to someone who actually knows the subject really well to help out!

Chris Ferdinandi joined me for a breakdown of the different ways we can declare variables in JavaScript, and he also put together this page with links to the source code from the video, plus some extra articles for those who are looking to dive more into JS content.

A flexbox trick to improve text wrapping

video preview

I was putting together a design and I was using Flexbox to put two buttons next to one another, as one would do.

But, as the space became narrower, the text in the buttons started to wrap on multiple lines and it looked ugly!

I put a flex-wrap on the parent, but while it improved things, it didn’t fix them, as the text would still wrap before the elements would stack.

And then I had an idea of how I could use min-width to solve the problem, but an intrinsic one with fit-content, rather than a hard coded one. I wasn’t sure if it would work, but it turns out it did!

Some people have commented on the video about using text-wrap: nowrap, and while that does work, it introduces the possibility of overflow. The solution I look at will behave very similarly, but will wrap the text only if there is no other choice.

If you’d like to see it, here is my finished version.

Vertically centering WITHOUT Flexbox or Grid

video preview

I feel like this went a little under the radar, but you don’t need to use flexbox or grid to vertically center content anymore!

That’s right, you can verically center content with block layouts now using align-content.

I’ve wanted to mention it for a while now, but wanted to avoid the “but browser support!” crowd, so I waited for all the major to support this, which they have for about a month now.

So, browser support isn’t perfect, but it’s also not terrible! 😅

🔗 Other awesome stuff around from the web

Introducing “Unleash the power of Scroll-Driven Animations”

I’ve fallen in love with scroll-driven animations and have made a few videos on them, but if you want a full course on them, Bramus has created a 10-part video course on them over on YouTube.

Bramus does a fantastic job of breaking down the different concepts, going over all the core parts before moving into fun things like animating in different directions, animating 3d models, and even detecting scroll velocity.

It’s a masterclass on the subject, and I’d encourage you to check it out.

🏁 </newsletter>

Have a fantastic week!
Kevin


Are you looking to step up your CSS? I've got both free and premium courses to help with that! They cover a range of skill levels too 👇

Beginner friendly (and free)

Conquering Responsive Layout

A free course to help you approach responsive layouts with the right mindset.

Enroll →

Intermediate

CSS Demystified

For those who've been writing CSS for a little bit now, but want to step up their game and start writing CSS with confidence!

Enroll →

Advanced

Beyond CSS

An advanced course that dives into project architecture, theming, design systems, and more.

Enroll →

Unsubscribe · Preferences
113 Cherry St #92768, Seattle, WA 98104-2205

Hi! I'm Kevin

Every week I share what I've been up to over on YT (and elsewhere), and also my general musings.

Read more from Hi! I'm Kevin

Hello Reader, I’ve been having an ongoing discussion with someone in my Discord server about Flexbox, diving into the nitty-gritty of how it works. The discussion has reinforced a few things for me: Grid is simpler than Flexbox People should learn Grid before they learn Flexbox Grid seems more complicated than Flexbox, but the complexity of Grid is in the amount of properties and values that come with it, rather than how it actually works. Flexbox seems easier because you declare display:...

Very quickly, before we dive into the regularly scheduled content, Cotton Bureau, which I use to sell my merch, is offering free shipping in the US and 50% off international shipping until July 11th if you use the coupon HBDCB11 at checkout. You can find my store here if you're interested in a shirt or my new hat! Hello Reader, Stubbornness… We all have to deal with it at times, and it sucks. Being a dad of a 9-year-old and 12-year-old, I deal with it quite often 😅. And just like my...

Hello Reader, The new features we got when CSS3 came out, things like border-radius and gradients solved very common problems that developers had to deal with on a regular basis. Rounded corners were a lot of work, and now we can create them with one line of CSS! Flexbox continued that trend. We went from having to create layouts using hacks, to actually having a proper layout tool at our disposal. So, of course, the adoption of those features was pretty fast and widespread. We needed these...