Listen Yeah

Articles

• Inline Critical CSS in Liquid

  A new feature has arrived in Liquid, and with it some new possibilities.

  Let's take a look at how you can use the new `inline_asset_content` filter to inline critical CSS in your Shopify theme.

• Accessing Shopify product lists by index

  Accessing product lists by index isn't straightforward in Liquid - here's a simple trick to make it work.

• Using SVGs as Astro components and inline CSS

  Learn how you can use SVG files as Astro components and inline SVGs in your CSS too.

• Creating a Twitter Feed in Astro

  I've been playing around with Astro lately and decided to compare adding a static Twitter feed in Astro vs Nuxt. As such I've written this tutorial to teach you how to generate a Twitter feed and automatically redeploy your site to Netlify using IFTTT every time you tweet.

• Building Shopify Section Schemas with JavaScript

  Using JS to build the schemas for your Shopify Sections can save you time and effort. The Liquid Schema Plugin enables a number of solutions to help build and maintain all of your section schemas, and I've outlined a number of methods you can apply to generating your section schemas.

• Lessons from the Express Theme in Shopify

  I love digging into Shopify themes to see what solutions and optimisations I can find under the hood. The new Express theme by Shopify is moving things in a new direction due to the “one-page” approach it takes, so I knew there’d be some gems I could find.

• Typing .js files with JSDoc

  You should consider typing your JS variables

  Typescript is ever popular these days, but sometimes it’s still too controversial a reach to put it in a project. It might be that you don’t have time to migrate everything, or it might simply be that you don’t have enough knowledge to comfortably move everything over just yet. Regardless of your situation, you can still get some benefits from Typescript, without adding it as a project dependency.

• Building Better Liquid Arrays

  Working with variables in Liquid is a bit of a challenge. It doesn’t seem to have been designed with complex data-manipulation in mind. Who’d have thought? Don't drop it all and feed your data into JavaScript just yet though. By learning more about how arrays can be created in Liquid, you should find that it's a bit easier to work with.

• The Curious Case of the Undocumented Where Functionality

  I was reading some chatter on the Shopify Partner Slack recently about the recently added liquid `where` filter. Anybody who’s used Jekyll before might be used to it already, but it was only added to the Shopify flavour of liquid a few months ago. It turns out that this filter has an undocumented use that’s quite handy.

• Shopify Functional Snippet Composition

  So you’ve been asked to do some development work on a Shopify store. Fortunately, most of the elements in the designs you’ve been given look familiar and there are a bunch of snippets available for you to use. Great! This should speed up development. All you need to do is include the snippets in the relevant areas, right? Not so fast. There’s a good chance your snippets won’t work as is, because they were originally written to be used in one or two specific contexts.

• Shopify Variable Scopes

  The good, the quirky and the downright hacky

  Variables in liquid are for the most part, quite simple to grasp. I’ve recently discovered some interesting things that I thought I’d best share, including a method of utilising the flexibility of repeatable section blocks outside of sections themselves.

• Using Environment variables in Shopify themes

  During the Shopify theme development process it may be appropriate to have features change slightly depending on whether they’re being used by a customer, a developer or a test suite. For example, if we have an integration in our store, we might want to send API requests to a testing endpoint whilst developing, or running tests on a staging theme, before connecting to a live endpoint when we publish the changes. We can’t trust that we’ll always remember to change this endpoint back to live before deploying to a live theme, so we can avoid the risk by using an environment dependent setting to control this.

• Contextual CSS and the problems therein

  It's often tempting to keep our HTML components clean by keeping class names simple. In my experience nesting CSS selectors to accomodate simpler class names can be quite problematic though. I've written this post to outline some of the issues I've found that seem to be ignored elsewhere.

• Investigating Shopify’s new Slate Schema Plugin

  I’ve been keeping a close eye on the development of Slate over the past few months, and a recently approved pull request caught my attention. The new Slate Sections Plugin improves section management by separating schema and translations from the liquid templates.

• Creating a Twitter module for your Nuxt app

  Ever wanted to integrate a Twitter feed into your static website? In this tutorial we'll integrate one into a Nuxt site deployed on Netlify and we'll learn how to make Twitter trigger redeployments for our website.

• Un-Inverting the Triangle

  A proposal for HTML class declarations

  A lot of discussion is made regarding how we structure our CSS in order to maintain readability and ease of use. In some cases this causes our HTML elements to start piling on extra classes. I'm proposing that we pay more attention to keeping our HTML readable.