Cloudflare has become my go-to platform for hosting Remix and Next.js apps. It's affordable, offers a generous free tier, and has a strong brand. I use Remix to build a Shopify app, so hosting it on Cloudflare pages seemed like a natural fit. However, there aren't many examples of how to deploy Shopify apps on Cloudflare, and relevant documentation is scarce, so it took me two days to integrate everything and get the local dev environment working smoothly. These examples have been invaluable in helping me understand what needed to be done: https://github.com/cloudy9101/shopify-remix-cfpages ..read more

Copy to Clipboard in JavaScript To copy text into the clipboard using JavaScript, you can use the Clipboard API: async function copyToClipboard(text) { try { await navigator.clipboard.writeText(text); /* ✅ Copied successfully */ } catch (e) { /* ❌ Failed to copy (insufficient permissions) */ } } Copy to clipboard example in JavaScript. The navigator.clipboard.writeText function accepts the text to copy, and returns a Promise: resolved - if the text was copied successfully, rejected - if the user hasn't given the "clipboard-write" permission. Using Clipboard API in React ..read more

Recently I decided I wanted to build a plugin or an app for an existing platform. I'd been using Shopify for over a year already, so it was a no-brainer which platform it should be. I'd never built a Shopify app before, but now that I've left my job and have more time, I spent a week building a small Shopify app and released it on the App Store. Mainly, I just wanted to see what it would take. I'm going to share my whole experience, but here's what you can expect: Everything that I've learned building the app; What it took to get it reviewed and published on the App Store; Pros and cons as I ..read more

Many developers, even experienced ones, don't know the first thing about search engine optimization (SEO). And for a long time, I didn't know either. SEO is mostly invisible, so it's easy to ignore, even though you shouldn't. Google is often the most important source of traffic for businesses and as a developer, it's your job to take care of the technical side of SEO. Every respectable web developer must know at least the basics of SEO. Throughout my years of building web apps, I've learned a thing or two about making them rank well on Google, and I'm here to break it all down for you. Here's ..read more

Usually the first thing a real-world app needs is a way to get user's input. This is commonly done using the HTML <input> element. But a beginner React developer may struggle to get the value of an input field. Here's how to do it: import { ChangeEvent, useState } from "react"; function Example() { const [inputText, setInputText] = useState(""); const handleChange = (e: ChangeEvent<HTMLInputElement>) => { // ? Store the input value to local state setInputText(e.target.value); }; return ( <div> <input type="text" onChange={handleChange} val ..read more

React has its own event system that's similar to the DOM event system, but that works in parallel to it. That means that React event handlers are assigned differently than DOM event listeners. React Event Handlers You can handle events in React by passing an event handler function as a prop JSX element: import { MouseEvent } from "react"; function MyComponent() { const handleButtonClick = (e: MouseEvent<HTMLButtonElement>) => { // Called when the button is clicked } return ( <button onClick={handleButtonClick}> Click me! </button> ) } Addin ..read more

Local Storage in JavaScript In the browser, you can access local storage through the window.localStorage property. The window is assumed though, so you can omit it and simply write localStorage. Local storage gives access to 4 important functions: setItem(key, value) - assign a string value to a key in local storage. getItem(key) - get the value assigned to a key. removeItem(key) - removes the value by key. clear() - removes all values in local storage. Here's the usage example: const value = { name: 'Vincas', surname: 'Stonys' }; // 1️⃣ Stores the value. Must convert value to string firs ..read more

Being a junior developer is hard. At the start of my career, I used to feel overwhelmed, like I didn't know what I was doing. And that it was only a matter of time until I got exposed as the imposter that I was. While I was at school and university, I seemed to have it all figured out - as long as you go to classes and maybe study a little, you're good. But when you're on your first day at work - what the hell do you do? There were all these people I'd never met before (everyone was so serious), following some processes I didn't know (scrum-what?) And the codebase - larger and scarier than I ..read more

If you're like me and prefer to learn by starting to build first and googling when you get stuck, this CSS guide is for you. It will give you a crash course in only the CSS you absolutely need in practice, wasting no time on stuff you can google once you need it. Give me 5 minutes of your time and you will be on your way to building your app. What is CSS? CSS stands for Cascading Style Sheets - it's a language used to add styles to web pages by describing how elements should be displayed. Elements are styled using CSS by selecting them with selectors and setting values for their properties ..read more

Scroll snapping can be achieved using CSS: Enable scrolling on the parent element with overflow: auto. Set the scroll-snap-type property on the parent element. Set the scroll-snap-align property on the child element to snap to it. Scroll Snapping Example Here's an example of how to enable scroll-snapping on the x-axis using CSS: .parent { /* 1️⃣ enable scrolling */ overflow: auto; /* 2️⃣ enable scroll-snapping on horizontal axis */ scroll-snap-type: x mandatory; } .child { /* 3️⃣ snap to the start of the element*/ scroll-snap-align: start; } Here's what it looks like: C ..read more