DEV Community: T(h)om

Opinions on hidden menus. Yay? Nay?

T(h)om — Thu, 30 Apr 2020 15:51:36 +0000

Hiding the main menu within a hamburger or similar is relatively commonplace on the web these days. You generally see it on modern sites or sites that are targeting a younger demographic.

The question is, does hiding the menu degrade the user experience? I get asked this question regularly, and my answer is, it doesn't hurt UX at all. We've had enough exposure to this concept that I believe that most users will grasp this kind of functionality.

When I did a quick search on the internet for opinions, I didn't find much, but I did get a sense that people are split 50/50. What I did discover was this study, which was written in 2016.

The benefits of hiding the menu are purely aesthetic. It's also important to note that if you were to hide the menu in any sort of way you should provide alternatives for navigation, for instance, placing top tier pages as links in the footer and linking to content via the body.

So, Yay? or Nay?

Improving your WordPress development experience

T(h)om — Tue, 22 Oct 2019 19:25:48 +0000

Photo by Fikret tozak on Unsplash

Every once in awhile, I'll stumble on an article/rant about how horrible WordPress is. Developers will complain about all facets of the CMS from security, plugin conflicts, performance, and templating. I noticed a common thread with some of these posts, and that was just how unclear people were on how to develop with WordPress effectively. I want to provide my learnings to course correct some of these attitudes. I have developed dozens of sites in WordPress over the years and learned a great deal. I can give some insight on how to make your development experience more pleasant.

Select the right template

This might be the most crucial tip. If you select a template that is hard to use or inflexible, you're not going to be successful. There are hundreds of templates out there, and some provide fully baked styles for you, while others are bare bones. In my option, a barebone template is the way to go, and Sage, by roots.io, is the way to go. A few key features:

Webpack frontend workflow
The ability to pick either Bootstrap 4, Foundation, Tachyons, Bulma and Tailwind frameworks
Laravels Blade templating engine
Controllers to get a handle your data
Great documentation

Careful with your plugins

While developing a WordPress site, it's easy to go overboard with plugins; after all, they do add functionality and make things easier. One of the biggest pitfalls is to install too many plugins or plugins that are not well supported. When selecting a plugin, check the following.

Has it been tested on your current version of WordPress?
How many downloads has it had? If it has a few thousand downloads, this could indicate a reliable and useful plugin.
Check the version history. This can provide insight into the direction of the plugin and how quickly the developer addressed bugs.

Plugins are certainly a necessary part of the WordPress development, but it's crucial not overdo it. Too many plugins can cause performance issues and incompatibilities. Ask yourself, do I need this plugin?

Security

The fact is that Wordpress powers 30% of all websites on the internet! That is a staggering number of sites. Unfortunately, this makes WordPress a popular platform for hackers to exploit. But there are a few things you can do to protect yourself.

Download and install WordFence. Utilizing its Web Application Firewall it will protect you from Brute Force attacks and complex attacks while blacklisting those offending IP's. It also keeps an eye on your plugins for updates and vulnerabilities. WordFence provides a host of additional features not mentioned here. I suggest checking out there website for the full rundown of its capabilities.

Protect your site
There are so many ways to do this, but I will cover just some basic things to keep in mind.

Do not use the wp_ prefix for your database. It's a default WordPress setting, changing this could stop attackers selecting tables in your database.
During install, WordPress will provide a default username for an administrator as "Admin." Attackers attempting to break into your site will always try to use "Admin" as the username while guessing the password.
Check your server firewall. Make sure only the necessary ports are open.
Check permissions on your WordPress files. Make sure your files are not owned by root and the correct file permissions are set. For more information on this visit: https://wordpress.org/support/article/hardening-wordpress/
Make sure your version of WordPress and plugins are up to date. WordPress makes it easy to update; you can even make these updates automatic.
Strong passwords! It's just common sense these days. Make sure all user passwords are strong.

Effective and trusted plugins

There are thousands of plugins out there to choose from it's hard to know which ones to use. Here's a shortlist of the ones I regularly use and have had great success.

WordFence (As mentioned previously, a must for security)
Advanced Custom Fields (Easy to use with incredible flexibility)
WP Migrate (Migates your database)
Yoast (For all your SEO needs)
Contact Form 7 (5 million activations for this plugin, a must for contact forms)
GDPR Cookie Consent (Easy to configure and use if you are worried about GDPR)
Block Lab (Build custom Gutenberg blocks)

Consider this article just a general guide of best practices and advice for those working with WordPress. There are a multitude of things one could do to increase performance, enhance usability, and bolster security not covered here.

WordPress might not be the sexiest CMS out there, but clients request it because they are familiar with it and find it easy to use. And this is so important. Hopefully, this little post will help others develop more secure and better WordPress sites.

Running Wordpress locally with Docker

T(h)om — Mon, 14 Oct 2019 17:54:57 +0000

I've been doing several Wordpress sites recently, and I've been using Docker to manage this on my local machine. Over time I made some improvements to the process, and I decided to share my Docker build I use that I find useful. It may not fit everyone's needs, but certainly, to get started with a local build, it works well.

How it works

(straight from the repo's readme)
Setup will do the following:

Build Wordpress Docker container
Build MySql Docker container
Downloads the Sage template and install via composer
Install template dependencies via Yarn
Compiles assets via Yarn
Install an SSL Cert
Get the latest database from the remote (if not a new build)
Update database paths
Get uploads from the live site. (if not a new build)

I hope this helps.

Link to the repo

The development graveyard

T(h)om — Wed, 09 Oct 2019 22:10:04 +0000

Most web developers will sympathize with this.

You’re working on an exciting personal project utilizing the latest and greatest framework. The late-night hours you have spent are paying off, and despite your fatigue, you are adamant to complete it and share it with the world. But then life happened. Work becomes pretty intense and the mere idea of opening up your laptop when you get home makes you anxious and break into a cold sweat. Sound familiar?

A month or two pass, your job has settled down and you can now find the time to dive right back into your project, but there is a problem. The code you wrote back then was under thought, you have no idea where to start and the project does not capture your attention anymore. Put simply, you lost momentum and focus.

These kinds of projects eventually end up in what I call the Development Graveyard. A place where a project dies and often never get resurrected. This may seem like a bad thing but in reality, it’s not, allow me to explain.

Your graveyard can be a source of learning, reflecting and aid you in your current web development projects.

Regardless of how bad or incomplete these projects may seem to be, they provide a treasure trove of great code references. This code can likely help you with your current projects. Sometimes just seeing old code can give you an altered perspective to solve current development problems.

The same goes for your job. Your client could be asking for something very specific and you just happened to build something like this a year ago. Since you have a development graveyard in place, your ability to use it as a valuable resource. Imagine the time savings if you were able to leverage some of your old code. Your boss will love you!

Finally, it shows how you have progressed over time which makes you feel accomplished. I often look back at my old work and can’t believe how I have come and how far technology has progressed. Take this a confidence booster and a learning tool.

If you have a graveyard already or would like to bury some old work, I would suggest adding a readme file, so you can get a quick summary of what you are working on. Some of you might be doing this already. But there is nothing worse than looking at a codebase and wondering what the heck it is for what it does. And of course, store it in a repo.

Personally, my graveyard is sprawling. But it serves as a place to visit when I forgot how to do something. Or when I need a little inspiration. But it would be nice to not send projects out to pasture, wouldn’t it? Of course, and that’s for another post I’m writing.

Celebrate your graveyard. Visit it often and learn from it.