Learn how to build a form using Polaris and much more! 
Shopify Development news and articles
 
Liquid Weekly

Karl Says


Summer Survey 2022!☀️⛱🍉


Nothing says summer like a quick survey!
Let your voice be heard!
I'd love to learn a bit more about who you are, what you do and how Liquid Weekly can best help you.

It's short, it's fun and most of all it's something to do while you watch crypto implode

Thank you!

News & Articles

Kick-Off Your First Shopify App With React, NodeJS and Common Ninja
In this article, I'll walk you through the process of building your first Shopify app with Common Ninja, NodeJS, and React. And the best part? Once your app is ready, you can use the same code to monetize it on other e-commerce platforms that we support!
Building a Form with Polaris
Shopify puts a great deal of effort into Polaris and it’s used quite extensively within the Shopify ecosystem, by both internal and external developers, to build UIs with a consistent look and feel. Polaris includes 16 separate components that not only encompass the form element itself, but also the standard set of form inputs such as checkbox, color or date picker, radio button, and text field to name just a few.
Deploy your Hydrogen App to Cloud Providers in 10 Minutes
You can deploy a Hydrogen app to most Node.js and Worker runtimes. This guide describes how to deploy a Hydrogen app to Node.js, Google Cloud, and Cloudflare Workers. This guide describes how to deploy a Hydrogen app to Heroku, Google Cloud, and Cloudflare Workers!
HTML with Superpowers
The web has matured in the last 5 years and it might be time to start looking at how the Web’s native component system can give our HTML super powers. We’ll talk about how to create, style, and use Web Components in your project today as well as look at how the components you build today may offer a pathway to web standardization and help inform and influence the Web for future generations.

Code & Tools

Functional-Light JavaScript
"Functional-Light JavaScript" explores the core principles of functional programming (FP) as they are applied to JavaScript. But what makes this book different is that we approach these principles without drowning in all the heavy terminology. We look at a subset of FP foundational concepts that I call "Functional-Light Programming" (FLP) and apply it to JavaScript.
Cloud, Load, and Modular Code: What 2022 Looks Like for Shopify
On our cloud in 2021, our peak BFCM traffic surpassed 32 million app server requests per minute (RPM). In the same time period our load balancers peaked at more than 34 million RPM. To put that in perspective, this means that the equivalent of Texas’s total population hit our load balancers in a given minute. One flash sale—a short-lived sale that exceeds our checkout per minute threshold—even generated enough load to use over 20% of our total computing capacity at its peak.
Amazon's new role-playing game can help you build your AWS skills
As part of its efforts to provide free cloud computing skills (opens in new tab) training to 29m people by 2025, AWS (opens in new tab) has released a new game-based 3D role-playing experience called AWS Cloud Quest: Cloud Practitioner (opens in new tab). Designed by AWS Training and Certification, AWS Cloud Quest aims to help adult learners gain practical AWS experience. To beat the game, learners will need to complete quests that build cloud skills while helping the 3D world's citizens build a better city. Gameplay includes videos, quizzes and hands-on exercises based on real-world business scenarios.

Changelog


API

New options for app subscription upgrades and downgrades
As of GraphQL Admin API version 2022-07, app developers can now choose their preferred update behavior when upgrading or downgrading merchant application subscriptions. By specifying the desired AppSubscriptionReplacementBehavior type, app developers can control whether the new subscription goes into effect immediately or is deferred to the end of the current subscription's billing cycle. By default, all app subscription changes will continue with the existing behavior.

Jobs

Front-End and Full Stack, FT, Canada
Heather Tovey at iamota is hiring two new Canada-based team members for the iamota dev team: Front-End and Junior Full-Stack. Come work with me!
Enavi - Full Stack Shopify App Developer, US Remote
Become part of a small growing Shopify development and CRO agency. If you are looking for an opportunity to learn, collaborate, and create solutions you've found the right job. We are looking for a Full Stack Shopify App Developer who will be responsible for working with custom apps. The first project you will be working on is a custom subscription app
Maestrooo - Support specialist (junior position, remote)
Maestrooo is the leading Theme company on Shopify. Our themes are used by tens of thousands of merchants every year, ranging from bootstrappers to large companies, who take advantage of our beautiful design, stable code, and outstanding support. In order to cope with the constantly increasing support load, we are looking for a new support staff member who will help us to grow in a sane way.

Tip of the Week

Construct a JS Value Object of Variant Data

To simplify access to Liquid Objects it can be helpful to construct JS object to hold values

Doing this inside your product templates creates an object that you can fill with whatever information you want that pertains to the variants of your product:

  <script>
 var customVariantObject = {};
 ﹛% for var in product.variants %﹜
  customVariantObject[﹛﹛- var.id -﹜﹜] = {
    inventoryQuantity : ﹛﹛ var.inventory_quantity | default: 0 ﹜﹜,
    available : ﹛﹛ var.available ﹜﹜,
    inventoryManagement : “﹛﹛ var.inventory_management ﹜﹜”,
    inventoryPolicy : “﹛﹛ var.inventory_policy | default: “deny”﹜﹜”
  };
 ﹛% endfor %﹜
</script>﹛

Watch Seán's video for more details about this approach