Liquid Weekly

Karl Says

Welcome back! Glad to see we all made it through the holiday. Regex, Rails, Liquid and more - This week's issue includes a bunch of great learning resources to help you kick off 2022 with style!

News & Articles

Design-Pattern Guidelines: Study Guide

Unsure how to design and implement user-interface patterns? Use this collection of links to NN Group's content about specific patterns. Checkboxes, Toggles, Dates, they've got it all covered!

Alita Joyce

Shopify OS: 2.0: How To Create A Sub Collection Within A Collection

Watch Mitch from Clean Canvas walk through setting up a collection that includes linking into a sub collection.

Mitch

Liquid Comparison operators

Another great beginning Liquid tutorial from Joe all about comparison operators.

Joe Pichardo

Performance best practices for Shopify themes

Optimizing your theme for performance is key to the success of the merchants that you support and to the experiences of their customers. When a new theme is submitted to Shopify, the theme's tested on a benchmark shop to determine its performance score. Improve the performance of your theme through these best practices.

Shopify

Ideal monitor rotation for programmers

We've all tried landscape and portrait orientations, but what about diagonal? Whether you love it or hate it, it certainly is interesting!

xssfox

A list of resources for developing on or learning about the Shopify platform.

Make your new year's resolution to learn something new about the Shopify platform. Our friend Greg has made this easy for us by putting together an exhaustive list on Github. Check it out and learn something new! Do you have a favorite resource that's not on the list? I'm sure he'd love a PR to include it.

Greg Arroyo

Learn RegEx step by step, from zero to advanced

Regex is extremely useful and also one of those things that I've routinely learned enough about to stop learning more about. And then I forget it all. Check out this great resource for getting over the knowlege hump.

RegexLearn.com

Code & Tools

What's the standard method in @tailwindcss for not repeating a whole crap-ton of classes over and over?

If you use Tailwind, an expressive and verbose CSS framework, you've likely been here as well. Learn from Josh Pigford's question as folks chime in with the best practices for reducing duplication.

Josh Pigford

Using GroupBy on an array of objects in JavaScript

Array grouping is an extremely common operation, best exemplified by SQL's GROUP BY clause and MapReduce programming. Currently we have to resort to either writing our own implementation or using third-party libraries. That will soon no longer be needed since a native implementation has been introduced in the form of Array.prototype.groupBy. Read how to to start using it today using the polyfill provided by core-js.

Saransh Kataria

Camp Liquid

Camp Liquid is a step-by-step program designed to help you become a Shopify Expert and grow a financially secure future. With this online course, you’ll learn all the skills you need to get started with the Shopify platform and modifying themes.

Erin Vaage and Alyssa Williams

Sample Shopify App using Rails + Hotwire

Rails is a great choice for developing Shopify apps. Here Kirill pulls together some of the latest and greatest Rails tech including using JWT integration for Hotwire Turbo, JWT integration for Rails Request.JS, App Bridge 2.0, Polaris ViewComponents and Hotwire::Livereload.

Kirill Platonov

Changelog

Theme

ALL THE CHANGEZ

Listen, I thought things would be quiet during the holiday break but nooooo, those busy bees in Shopify engineering have been hard at work and released a bunch of updates. Too many for me to enumerate separately here. Click the link to check them out

12/14/2021 - 1/1/2022

Jobs

Front-End, Freelance

Aaron is looking for 2 contractor/freelance front-end developers for projects starting in 2022. He's looking to create a small tight knit team to focus on theme development. React experience is a huge plus.

[email protected]

Tip of the Week

How to restrict sections to certain page templates

Sections can be limited based on the template type. You can do this with the "templates" attribute in the schema - eg. "templates": ["page", "collection"].

Another handy trick is to define the section in your json file without including the presets attribute. This will limit the section to appearing only on that specific template.

The upside is that your merchant can still hide/show, drag and drop the section. The downside is that they can’t delete it or add another one from the “Add section” menu.

Thanks to Anne Thomas for inspiring this week's tip.