David Warrington

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.