I wanted to get some more experience working with GraphQL mutations, so I worked on a new feature for my site that enabled a user to “like” a blog article. I ran into a little gotcha that is kind of obvious now that I know the solution but wasn’t obvious at the time.
I didn’t think I needed to be fancy and store the “like” in the database and associate with the user, so I decided that tracking whether the user had liked the article in localStorage was enough and then keep track of the total article like count in the database. Seems easy enough right?
This was my first approach in retrieving whether or not the user had liked the article from localStorage:
And this is the error that I was getting:
ReferenceError: window is not defined
At first I was 🤔, but the fix is super simple and totally makes sense. Remix renders on the server, but I wanted to run this in the browser, so I simply needed to wrap it in a useEffect:
This is actually captured in the Remix docs, but it was kind of buried.
";s:10:"bodyBlocks";a:7:{i:0;a:3:{s:2:"id";s:4:"2640";s:10:"typeHandle";s:4:"text";s:4:"text";s:884:"I wanted to get some more experience working with GraphQL mutations, so I worked on a new feature for my site that enabled a user to “like” a blog article. I ran into a little gotcha that is kind of obvious now that I know the solution but wasn’t obvious at the time.
I didn’t think I needed to be fancy and store the “like” in the database and associate with the user, so I decided that tracking whether the user had liked the article in localStorage was enough and then keep track of the total article like count in the database. Seems easy enough right?
This was my first approach in retrieving whether or not the user had liked the article from localStorage:
And this is the error that I was getting:
";}i:3;O:8:"stdClass":0:{}i:4;a:3:{s:2:"id";s:4:"2644";s:10:"typeHandle";s:4:"text";s:4:"text";s:232:"At first I was 🤔, but the fix is super simple and totally makes sense. Remix renders on the server, but I wanted to run this in the browser, so I simply needed to wrap it in a useEffect:
This is actually captured in the Remix docs, but it was kind of buried.
";}}}i:1;a:6:{s:5:"title";s:55:"Setting Up Live Preview with Craft CMS in Headless Mode";s:4:"slug";s:55:"setting-up-live-preview-with-craft-cms-in-headless-mode";s:2:"id";s:4:"2266";s:10:"typeHandle";s:4:"blog";s:4:"body";s:2823:"In my previous post, I talked about transitioning my site from being powered by Craft to being powered by Remix and a GraphQL endpoint coming from Craft. One of the best features of Craft is Live Preview, and it took a little configuration to get this working on my new Remix powered site.
These were specific changes that I needed to make on the Remix side, but really it would be the same for any GraphQL request. As Andrew Welch breaks down in his article, the key is passing the token parameter back that Craft included in the URL.
In the loader function of my blog post route, I call a helper function to setup the GraphQL client, and I pass the request to it:
And then in my helper function, I take that request, grab the URL params that I want to include, and add those to my GraphQL request endpoint URL:
It wasn’t totally necessary to include the x-craft-preview and x-craft-live-preview parameters, but I figured it couldn’t hurt.
Now with the Remix configuration in place, I just needed to make two small changes to Craft to get it working correctly. First, I had to update the preview target for my Blog section to point to my Remix site:
Then, I had to update the config/general.php to allow iframe requests from my Remix domain:
And just like that, I had live preview working.
";s:10:"bodyBlocks";a:7:{i:0;a:3:{s:2:"id";s:4:"2772";s:10:"typeHandle";s:4:"text";s:4:"text";s:999:"In my previous post, I talked about transitioning my site from being powered by Craft to being powered by Remix and a GraphQL endpoint coming from Craft. One of the best features of Craft is Live Preview, and it took a little configuration to get this working on my new Remix powered site.
These were specific changes that I needed to make on the Remix side, but really it would be the same for any GraphQL request. As Andrew Welch breaks down in his article, the key is passing the token parameter back that Craft included in the URL.
In the loader function of my blog post route, I call a helper function to setup the GraphQL client, and I pass the request to it:
";}i:1;O:8:"stdClass":0:{}i:2;a:3:{s:2:"id";s:4:"2774";s:10:"typeHandle";s:4:"text";s:4:"text";s:153:"And then in my helper function, I take that request, grab the URL params that I want to include, and add those to my GraphQL request endpoint URL:
";}i:3;O:8:"stdClass":0:{}i:4;a:3:{s:2:"id";s:4:"2776";s:10:"typeHandle";s:4:"text";s:4:"text";s:706:"It wasn’t totally necessary to include the x-craft-preview and x-craft-live-preview parameters, but I figured it couldn’t hurt.
Now with the Remix configuration in place, I just needed to make two small changes to Craft to get it working correctly. First, I had to update the preview target for my Blog section to point to my Remix site:
Then, I had to update the config/general.php to allow iframe requests from my Remix domain:
And just like that, I had live preview working.
";}}}i:2;a:6:{s:5:"title";s:32:"Why I’m So Excited About Remix";s:4:"slug";s:29:"why-im-so-excited-about-remix";s:2:"id";s:4:"2140";s:10:"typeHandle";s:4:"blog";s:4:"body";s:6064:"I’ve been building on the web for a long time. There’s a part of me that still has a bit of an old school mentality, and it’s hard for me to get really excited about new technology. Sure React was cool when it came out for its state management, but I didn’t see it as the be-all and end-all for building on the web. I really like Craft CMS for building CMS powered sites since I have full control over the HTML being sent to the browser, and it’s really easy to extend for complex functionality, but it can be a bit complex to setup for beginners and with additional complexity can come performance issues. So it’s been a while since I’ve seen something to be really excited about.
Enter Remix.
Remix is an interesting mix of old school techniques along with modern technology. Ryan Florence actually sums it up perfectly as to where Remix fits in.
Forget “full stack”. Remix is center stack.
— Ryan Florence (@ryanflorence) January 15, 2022
It’s an HTTP tunnel between interactivity and business logic. It’s the part of the stack that no tool before it has solved, not completely.
I think I finally know how to talk about Remix.
I was able to easily switch my site that was fully powered by Craft to utilize Craft only as a GraphQL endpoint and Remix powering the rest. The two big things I needed to figure out were: how to get data from the GraphQL endpoint, and then how to process input from a user (for my contact form). I would definitely recommend reading through the Remix docs and the two tutorials, but if you can understand these two big pictures things, you’ll have enough to get started with Remix and go deeper once you get into it.
Remix provides a loader hook that runs on the server to hydrate your component. In this simple example, I run a GraphQL request and return JSON with the results of that request in the loader function.
Then in my Index component, I access the data from the loader hook with useLoaderData(), and my component is now hydrated with that data. In MVC style of thinking, think of the loader hook as the controller processing the page load request, populating with data from the model, and then passing to the view.
The great part about Remix is that this doesn’t have to be specifically a GraphQL request. This data can come from anywhere. The Jokes tutorial in the Remix docs even thoroughly walks through how you can manage all this data in Prisma.
Ok great, so we’ve got data onto the page, but now we need to be able to handle user input. Remix also provides an action hook to process an action request (ex: a form submission). In my case, I have a contact form that sends me an email via SendGrid after submission.
If you don’t include an action attribute on your form, it will automatically submit to the same page. Again, in MVC thinking, the action would again be equivalent to the controller taking the request input and processing it. But honestly, this takes me back 15 years when form actions would point directly to PHP files.
Since Remix is running on the server, you can turn off JavaScript and everything still works great. Data still loads, form actions still process; it’s beautiful. This is not running loaders and actions on the client side; it’s running them on the server. This isn’t an accident, the Remix team is carefully considering the UX.
User experience (UX) and developer experience (DX) are both important. UX is more important than DX.@remix_run has taught me: It's easier to start with a great UX and work toward a good DX than it is to start with a great DX and work toward a good UX.
— Kent C. Dodds 💿 (@kentcdodds) January 15, 2022
Did I mention how fast everything renders? I don’t tend to put too much stock into Lighthouse scores since they seem so random, but Remix crushes Lighthouse without me having to invest any additional effort into improving performance.
Remix is built on the native Fetch API, so it can run anywhere. While Remix is relatively new, it’s certainly production ready, and there is a dedicated team behind it. If you aren’t ready to dive into Remix yet, at least keep your eye on it because this is a game changer.
";s:10:"bodyBlocks";a:5:{i:0;a:3:{s:2:"id";s:4:"2942";s:10:"typeHandle";s:4:"text";s:4:"text";s:2413:"I’ve been building on the web for a long time. There’s a part of me that still has a bit of an old school mentality, and it’s hard for me to get really excited about new technology. Sure React was cool when it came out for its state management, but I didn’t see it as the be-all and end-all for building on the web. I really like Craft CMS for building CMS powered sites since I have full control over the HTML being sent to the browser, and it’s really easy to extend for complex functionality, but it can be a bit complex to setup for beginners and with additional complexity can come performance issues. So it’s been a while since I’ve seen something to be really excited about.
Enter Remix.
Remix is an interesting mix of old school techniques along with modern technology. Ryan Florence actually sums it up perfectly as to where Remix fits in.
Forget “full stack”. Remix is center stack.
— Ryan Florence (@ryanflorence) January 15, 2022
It’s an HTTP tunnel between interactivity and business logic. It’s the part of the stack that no tool before it has solved, not completely.
I think I finally know how to talk about Remix.
I was able to easily switch my site that was fully powered by Craft to utilize Craft only as a GraphQL endpoint and Remix powering the rest. The two big things I needed to figure out were: how to get data from the GraphQL endpoint, and then how to process input from a user (for my contact form). I would definitely recommend reading through the Remix docs and the two tutorials, but if you can understand these two big pictures things, you’ll have enough to get started with Remix and go deeper once you get into it.
Remix provides a loader hook that runs on the server to hydrate your component. In this simple example, I run a GraphQL request and return JSON with the results of that request in the loader function.
";}i:1;O:8:"stdClass":0:{}i:2;a:3:{s:2:"id";s:4:"2944";s:10:"typeHandle";s:4:"text";s:4:"text";s:1127:"Then in my Index component, I access the data from the loader hook with useLoaderData(), and my component is now hydrated with that data. In MVC style of thinking, think of the loader hook as the controller processing the page load request, populating with data from the model, and then passing to the view.
The great part about Remix is that this doesn’t have to be specifically a GraphQL request. This data can come from anywhere. The Jokes tutorial in the Remix docs even thoroughly walks through how you can manage all this data in Prisma.
Ok great, so we’ve got data onto the page, but now we need to be able to handle user input. Remix also provides an action hook to process an action request (ex: a form submission). In my case, I have a contact form that sends me an email via SendGrid after submission.
";}i:3;O:8:"stdClass":0:{}i:4;a:3:{s:2:"id";s:4:"2946";s:10:"typeHandle";s:4:"text";s:4:"text";s:2044:"If you don’t include an action attribute on your form, it will automatically submit to the same page. Again, in MVC thinking, the action would again be equivalent to the controller taking the request input and processing it. But honestly, this takes me back 15 years when form actions would point directly to PHP files.
Since Remix is running on the server, you can turn off JavaScript and everything still works great. Data still loads, form actions still process; it’s beautiful. This is not running loaders and actions on the client side; it’s running them on the server. This isn’t an accident, the Remix team is carefully considering the UX.
User experience (UX) and developer experience (DX) are both important. UX is more important than DX.@remix_run has taught me: It's easier to start with a great UX and work toward a good DX than it is to start with a great DX and work toward a good UX.
— Kent C. Dodds 💿 (@kentcdodds) January 15, 2022
Did I mention how fast everything renders? I don’t tend to put too much stock into Lighthouse scores since they seem so random, but Remix crushes Lighthouse without me having to invest any additional effort into improving performance.
Remix is built on the native Fetch API, so it can run anywhere. While Remix is relatively new, it’s certainly production ready, and there is a dedicated team behind it. If you aren’t ready to dive into Remix yet, at least keep your eye on it because this is a game changer.
";}}}i:3;a:6:{s:5:"title";s:37:"What I Love & Hate About Tailwind CSS";s:4:"slug";s:35:"what-i-love-hate-about-tailwind-css";s:2:"id";s:4:"2091";s:10:"typeHandle";s:15:"externalArticle";s:4:"body";s:120:"As a long time skeptic of Tailwind CSS, I’ve finally given it a try and discovered some things I love and hate.
";s:7:"website";s:67:"https://www.viget.com/articles/what-i-love-hate-about-tailwind-css/";}i:4;a:6:{s:5:"title";s:43:"How We Prevent Leaky Templates in Craft CMS";s:4:"slug";s:43:"how-we-prevent-leaky-templates-in-craft-cms";s:2:"id";s:4:"2089";s:10:"typeHandle";s:15:"externalArticle";s:4:"body";s:87:"Prevent the flood of leaky templates in Craft CMS with just a little bit of PHP.
";s:7:"website";s:75:"https://www.viget.com/articles/how-we-prevent-leaky-templates-in-craft-cms/";}i:5;a:6:{s:5:"title";s:48:"Level Up with Craft CMS: Know When to Ditch Twig";s:4:"slug";s:47:"level-up-with-craft-cms-know-when-to-ditch-twig";s:2:"id";s:3:"858";s:10:"typeHandle";s:15:"externalArticle";s:4:"body";s:121:"If you notice your Twig templates are getting overly complex, it may be time to extend Craft with a custom Module.
";s:7:"website";s:79:"https://www.viget.com/articles/level-up-with-craft-cms-know-when-to-ditch-twig/";}i:6;a:6:{s:5:"title";s:37:"Why You Should Update to Craft 3 ASAP";s:4:"slug";s:37:"why-you-should-update-to-craft-3-asap";s:2:"id";s:3:"854";s:10:"typeHandle";s:15:"externalArticle";s:4:"body";s:194:"Updating to Craft 3 means new features for your site with improved performance and security. This latest version was released earlier this year, and you should update as soon as possible!
";s:7:"website";s:69:"https://www.viget.com/articles/why-you-should-update-to-craft-3-asap/";}i:7;a:6:{s:5:"title";s:36:"Managing CSS & JS in an HTTP/2 World";s:4:"slug";s:34:"managing-css-js-in-an-http-2-world";s:2:"id";s:3:"813";s:10:"typeHandle";s:15:"externalArticle";s:4:"body";s:669:"We have been hearing about HTTP/2 for years now. We've even blogged a little bit about it. But we hadn't really done much with it. Until now. On a few recent projects, I made it a goal to use HTTP/2 and figure out how to best utilize multiplexing. This post isn't necessarily going to cover why you should use HTTP/2, but it's going to discuss how I've been managing CSS & JS to account for this paradigm shift.
";s:7:"website";s:53:"https://www.viget.com/articles/managing-css-js-http-2";}i:8;a:6:{s:5:"title";s:27:"Craft Color Swatches Plugin";s:4:"slug";s:27:"craft-color-swatches-plugin";s:2:"id";s:3:"811";s:10:"typeHandle";s:15:"externalArticle";s:4:"body";s:607:"The control that Craft can provide a user is what makes it stand out as a content management system. But sometimes we want to limit what a user can choose from. Craft has a built-in Color field which allows a user to select any color from a color picker. There are times when we only want a user to choose from a select number of colors though. Previously we have done this by using a dropdown with a list of colors, but I decided to build a plugin to allow a user to select from an admin-defined set of colors.
";s:7:"website";s:58:"https://www.viget.com/articles/craft-color-swatches-plugin";}i:9;a:6:{s:5:"title";s:37:"Responsive Images with srcset & Craft";s:4:"slug";s:35:"responsive-images-with-srcset-craft";s:2:"id";s:3:"810";s:10:"typeHandle";s:15:"externalArticle";s:4:"body";s:438:"Tommy recently wrote about responsive background images in Craft, but I wanted to follow up about how we used the <img> element and srcset to build responsive images on this very site (powered by Craft).