DEV Community: Tammy Shipps

Webpack 5 in Craft CMS 3? Coming right up!

Tammy Shipps — Sun, 06 Dec 2020 20:17:57 +0000

Webpack 5 has been out for several weeks now and has several new features and changes that I very much wanted to work with and make use of in a Craft CMS 3 project I maintain.

However, when an update with breaking changes comes out, it can be an absolute bear getting all of your dependencies to play together nicely.

(Sometimes it can even be impossible until other dependency package maintainers can get to updating their own code.)

Generally, I like to use boilerplates to kickstart my projects, but some of these updates are so new that I wasn't able to find one that both worked correctly and suited my needs.

Since I couldn't find one, I created a new boilerplate with Webpack 5, PostCSS 8, Tailwind 2, and HMR for your development environment. (It also contains goodies like Sass and Babel, of course.)

It tries to make little-to-no assumptions about your project; only what it needs to in order to function.

https://github.com/mizziness/craft3-webpack5-tailwind2-boilerplate

PRs and constructive feedback are always welcome!

Returning to the office after Covid19 ... Should we?

Tammy Shipps — Thu, 02 Jul 2020 16:49:13 +0000

The magical phrase work/life balance. It seems so easy to achieve when you only think about it, but in practice, it's pretty difficult to nail down, and it's often a moving target.

Working for a company in corporate America has its ups and downs. One down that I have particular experience with is that work/life balance can feel out of reach, even in the best of times.

Let's be honest: capitalism and empathy don't really mesh well. And empathy is needed to truly understand how important it is to have a healthy balance between professional and personal life.

Covid19 may just have a silver lining in that it has forced companies to put their employees - all of their employees - ahead of the company by allowing those who can to work from home. (Granted, not all companies have responded in what I would personally consider "the right way", but a great many have allowed remote work for the foreseeable future, including the company I work for now.)

Why is that important? Remote work...

Eliminates commuting time and distance

My commute time went from 45 minutes one-way to 10 seconds. That's a significant drop!

Increases the time employees have with their families

I get to see more of my kids, which is a huge bonus for me, personally.

Reduces office politics and stress

I have found there to be less gossip, fewer disagreements, and better communication between coworkers with the use of asynchronous tools like Slack.

Allows employees to control their own working environment

I can set up my laptop wherever I want - even outside on nice days. I can't tell you how refreshing it is to sit on the patio on a sunny day while coding.

However, until it became necessary, most companies didn't allow employees to work from home. There were concerns ranging from "But will they actually work, or will they slack off?" to "We don't have the resources to support it."

Then came Covid19.

Companies and stubborn managers are now getting to see and experience first-hand how much better work/life balance can be when working from home...and how it benefits the bottom line, too!

Low overhead costs - not as much office space is needed, and bills such as electricity will be much lower due to reduced usage.
Better security - with fewer people moving in and about the office, it's easier to make sure they're all supposed to be there.
Hiring becomes easier - Location is no longer an obstacle so you can hire who fits the requirement best, not just who is available.
Increased productivity - Less distractions, fewer useless meetings, communication improves.
Increased loyalty, lower turnover - Employees will be much less likely to seek work elsewhere.

Now, not every person is suited for remote work - there are people who will, indeed, slack off. However, those folks are the exception to the rule.

The vast majority of employees, especially in software engineering, will enjoy working more from home, and so will likely work more, not less. And that work will be much less stressful and may take less time and resources, overall.

So, when Covid19 finally gives it a rest and the world becomes safe once again...

Should we go back to the office?

While every situation is different, I feel that we should consider how much better our lives are when we work from home, and stay that way. Personally, I plan to request that I be allowed to stay remote instead of going back.

What do you think?

Is remote work better for your life, or worse?

Snippet: Making your buttons fully accessible

Tammy Shipps — Tue, 30 Jun 2020 01:41:13 +0000

I'd always been under the (mistaken) impression that buttons, in order to be accessible, needed to listen to click events and the enter key - but my bubble was unexpectedly burst by reading the specs.

In order to be truly accessible, buttons should activate on both the enter key, and the space bar. So, if you're like me and you're a) lazy and b) lazy, you can accomplish this pretty easily with a snippet like this one:

// Enable space and enter activation on buttons
$("button, a.button, a.btn").on("click tap keydown", function(event) {
  if (event.type === 'click'){
    return true;
  } else if (event.type === 'keydown') {
    let code = event.charCode || event.keyCode;
    if ((code === 32)|| (code === 13)){
      $(event.target).get(0).click();
    }
  } else {
    return false;
  };
});

Let's break down what this does.

$("button, a.button, a.btn")

Select elements that are buttons, or that act like buttons:

.on("click tap keydown", function(event) {

Here we put the events we wish to capture, and then grab the event object. It's important to include 'click' here, even though we really want key presses, because:

if (event.type === 'click'){
  return true;
} ...

We want to allow interaction events to work as normal if they are clicks, so let's catch them.

} else if (event.type === 'keydown') {
  let code = event.charCode || event.keyCode;
  if ((code === 32)|| (code === 13)){
    $(event.target).get(0).click();
  }
} else {
  return false;
};

Okay, now we get to the key presses, and the magic! First, let's make sure we're dealing with a keypress. If we are, then we need to see which key was pressed, since we only care about 2 keys. Depending on the event, we might get a code different ways, so we'll check event.charCode and event.keyCode.

If the code returned is 32 then the user pressed the space bar, and code 13 corresponds to the enter key.

$(event.target).get(0).click();

This is the magic right here - this will find exact the button that was interacted with and fire off a good old-fashioned click event, making the button activate.

Remember when I said that we need to include click as a captured event? That's because we might be dealing with a fake button (such as an anchor tag with role="button"), and by being explicit, we're making sure not to introduce bugs unintentionally, and clicks remain working as normal.

That's my method! Do you have your own? Let me know!

Edit: Thanks to Andrew Nevins for reminding me that keypress is depreciated!

A Handy Snippet for Accessible Images in Craft CMS

Tammy Shipps — Mon, 04 May 2020 22:27:53 +0000

Friends don't let friends code unaccessible images.

The backstory

We have a fairly sizable marketing website where I work, and recently we've been pushing toward making it accessibility-compliant (yay!) While cleaning up some of the older template structure of our Craft CMS-run website, I quickly realized I had a scaling problem (boo!)

There were tons of <img> in the templates, possibly hundreds, and only a few prominent image placements included things like an alt tag or aria label on the element - things that should be on every image on the site.

The trap: "It looks right so it must be right"

For a lot of developers who work on the front-end, a large portion of our job is "making it look right." That sounds easy, but in practice, it's anything but - especially with deadlines, last-minute design tweaks, copy changes, and global pandemics getting in the way.

Some developers (myself included) can get so bogged down with making it look pixel-perfect that they forget to make sure it works properly for edge and special cases, too.

I've been guilty of this plenty of times... Honestly, it's pretty easy to forget about the mess under the hood if the paint job looks perfect. But the writing is on the wall: Accessibility is important and can't be overlooked any longer. So how do we get better at these small tasks that have such a huge impact?

The solution

That's where DRY comes in! Yes, even for things like <img> tags.

In this case, since have a lot of images, and we want to make sure that every single one has the required element properties, it makes sense to use a template partial or macro.

First, I made a new file under templates named templates/_includes/utilities/image.twig to hold the new code:

{#
  Displays an image from a Craft image object in an accessible fashion.

  @param {object} image - the image data object
  @param {string} transformation - image transformation or transformation handle
  @param {string} classes - additional css classes to add
#}

{% set transform = transformation|default('') %}
{% set src = image.getUrl(transform)|default('') %}
{% set alt = image.altText|default('') %}
{% set title = image.title|default('') %}
{% set classes = classes|default('') %}
{% set height = image.getHeight(transform)|default('') %}
{% set width = image.getWidth(transform)|default('') %}

<img
  src="{{ src }}"
  alt="{{- alt -}}"
  title="{{- title -}}"
  class="{{ classes }} transformed-image {{ transform }}"
  id="{{ image.id }}"
  height="{{ height }}"
  width="{{ width }}"
/>

Note that we are using the Typed Link Field plugin for Craft CMS, so our link data object structure might look different than yours, but the concept is the same!

And then, to use the above to embed an image, I used the following within the templates:

{% set featuredImage = entry.featuredImage.one() %}

{% if featuredImage is defined %}
  {% include '_includes/utilities/image' with { image: featuredImage } %}
{% endif %}

And that will spit out a nicely formed <img> tag with all of the properties required, every time. Whew!

It's very versatile due to being able to optionally pass in one-off customizations like CSS classes and named transforms and the code will generate the correct end result for you.

...

And the next time I need to fix an image tag on the site, I can do it in one place and not have to hunt and peck through who-knows-how-many templates.

Edit: June 29, 2020

If you want to automate other a11y traits, such as aria-hidden on your images, you can extend the snippet slightly, like so:

<img
  src="{{ src }}"
  alt="{{- alt -}}"
  title="{{- title -}}"
  class="{{ classes }} transformed-image {{ transform }}"
  id="{{ image.id }}"
  height="{{ height }}"
  width="{{ width }}"
  aria-hidden="{{ alt|length > 0 ? 'false' : 'true' }}"
/>

This way, your image will automatically include `aria-hidden="true" when there is no alt text - essentially making it a display-only image. And of course, once you add the alt to the back-end in the Craft admin, it will change itself accordingly.

\o/