Link Roundup

I’m in the middle of a web accessibility audit right now. It feels like I’m in a slow-motion montage of some scholarly action movie.

Exporting spreadsheets of automated test results, combing through rows and combining issues in to human-readable documentation.

Referencing dry, pedantic web standards and rediscovering the quirks of various screen readers.

Asking myself…

Is this a screen reader bug or an actual barrier to accessibility?

Where does one draw the line?

Will the WCAG documentation ever meet Level AAA of Guideline 3.1?

Tech

Web Performance Optimization Stats

Working in the Shopify e-commerce space, I see a ton of apps in the marketplace that promise to increase revenue. Do they? I don’t know, but they most definitely increase the page load time.

Same thing goes for themes in the marketplace. In trying to make flexible themes that will work for most every business, these themes are bogged down with a ton of extra fluff and Liquid that slows things down for customers.

Visiting performant sites is just better for customers. Let’s just agree on that.

6 Most Important Things Every Junior Developer Should Know

“A software developer is part artist, part scientist, part life-long learner. Embrace these traits, go forth, and create something to make someone’s life better.”

Why AI will never replace human picture descriptions

“Yes, AI can by now tell you about the birds and the trees, and the flowers and the bees, in a picture or photograph, but the actual message is something only a human can get from it.”

Work

Learning About Work Ethic From My High School Driving Instructor
https://www.theatlantic.com/business/archive/2011/11/learning-about-work-ethic-from-my-high-school-driving-instructor/248339/
An article on doing your work with the mindset of a craftsperson. This one gave me chills.

Dystopia

‘Smile with your eyes’: How to beat South Korea’s AI hiring bots and land a job
“According to Korea Economic Research Institute (KERI), nearly a quarter of the top 131 corporations in the country currently use or plan to use AI in hiring.”

The Navy installed touch-screen steering systems to save money. Ten sailors paid with their lives.

“The Integrated Bridge and Navigation System, or IBNS, as it was known, was no technical marvel. It was a welter of buttons, gauges and software that, poorly understood and not surprisingly misused, helped guide 10 sailors to their deaths.”

Education

Here are 450 Ivy League courses you can take online right now for free
Free classes you can take from Brown, Harvard, Cornell, Princeton, Dartmouth, Yale, Columbia University, and the University of Pennsylvania.

selectCallback in Shopify’s Slate Starter Theme

If you’ve landed on this article, you probably found a Shopify tutorial asking you to add some code to the selectCallback function in your theme.

Like me, you may be scratching your head wondering what and where the selectCallback function is.

Here’s where you can find it.

A Tiny Rant 🔥

Shopify has stated in multiple issues on GitHub that there are no plans to update the existing theme customization tutorials for Slate.

This is a major pain in the butt because it seems like all the official Shopify tutorials reference functions that are out-of-date and irrelevant for developers using Shopify’s own recommended workflows.

But I digress. 🤷🏽 Here’s the info you need.

What is the selectCallback

The selectCallback is a function that’s called whenever the product variant is are changed via the <select> element on the product detail page.

For example, say I’m on a product detail page for a t-shirt. You may see the following <select> element.


Every time you choose a new option from the dropdown, a new variant is selected. As a result, the selectCallback is called.

Where to Find It in the Slate Starter Theme

So now we just need to find an equivalent function in the Shopify Slate Starter Theme.

All the JavaScript for handling changes on the PDP can be found in src/sections/product.js.

The most appropriate place here seems to be the onFormOptionChange function. You can see that it’s called in response to a select change event, and it gives you access to the variant object.

onFormOptionChange(event) {
    const variant = event.dataset.variant;

    this.renderImages(variant);
    this.renderPrice(variant);
    this.renderComparePrice(variant);
    this.renderSubmitButton(variant);

    this.updateBrowserHistory(variant);
}

That makes it perfect for placing the code that you may have been instructed to put in the selectCallback. Things like showing variant SKUs, selecting option swatches based on the currently selected variant, etc.

Have an older version?

If you’re working with an older version of the Starter Theme (pre-October 2018), you’ll need to find the updateAddToCartState function instead.

Conclusion

Because Slate is no longer in active development, I doubt we’ll see a change in the Starter Theme product scripts anytime soon.

But if this does change down the line and onFormOptionChange is no longer a thing, shoot me a line and I’ll update this article to match!

Happy coding! ⌨️🤓

Weekly Link Roundup #6

It’s been 6 days since my IAAP Web Accessibility Specialist exam and I’m still recovering from the marathon study session the led up to it.

I feel OK/good about my performance, but I’m still unsure about what the results will be. A couple things are for sure though: after studying for the exam, I’ve felt far more confident in my understanding of expected widget interactions, and my fear of the official WCAG and WAI-ARIA documentation has subsided a bit. 🧛

One of my new favorite haunts is the Web a11y Slack. If you’re at all interested in delving into web accessibility, there are some great teachers in there who are always available for questions. 👩‍🏫 Join us!

Continue reading “Weekly Link Roundup #6”

Weekly Link Roundup #5

Oh Wednesday, glorious Wednesday. This week has been a perfect emotional storm of work deadlines, impostor syndrome/panic attacks, wet weather, and npm issues (I’m talking to you, v3). But I’m making it through (read: barely hanging on) with the support of many a vitamin D tablet and green smoothie.

On a more positive note, tomorrow will be my one-year anniversary at my current company, and I’m feeling so grateful that I magically ended up here after a long and windy road following my dropping out of grad school. It’s amazing to be part of such a tight-knit, supportive group doing work I love.

Next week I’ll be taking the IAAP WAS certification exam so that we can highlight our expertise in web accessibility and serve our clients and their customers better. ✌️I’ve got those pre-exam jitters — wish me luck!

Continue reading “Weekly Link Roundup #5”

Weekly Link Roundup #4

Accessibility

CSS

Continue reading “Weekly Link Roundup #4”

The Best Free React Course for Beginners

React has on my to-learn list for what seems like ages. I’ve tried diving in numerous times over the last few years, but either the time wasn’t right or I couldn’t find the right course or project to work through. Some courses were too hands-on, while others were too hands-off and quickly led to frustration.

So I just sat with my skill set and waited to find the motivation to jump back in.

However, with work projects on the horizon that will most likely be built using React, I decided it was high time to jump on the framework bandwagon.

Continue reading “The Best Free React Course for Beginners”