{
    "version": "https://jsonfeed.org/version/1",
    "title": "Everton Fernandes's Blog",
    "home_page_url": "https://vertocode.com/blog",
    "description": "Articles on software engineering, React, Vue, TypeScript, testing, headless commerce and AI-assisted development by Everton Fernandes.",
    "author": {
        "name": "Everton Vanoni Fernandes",
        "url": "https://vertocode.com"
    },
    "items": [
        {
            "url": "https://vertocode.com/blog/how-to-setup-chezmoi",
            "title": "How to Setup Chezmoi - Dotfiles Manager",
            "summary": "A practical guide on how to setup chezmoi to manage your dotfiles across multiple machines, from installation to syncing your configuration everywhere.",
            "image": "https://vertocode.com/assets/images/posts/how-to-setup-chezmoi.jpg",
            "date_modified": "2026-04-06T00:00:00.000Z",
            "author": {
                "name": "Everton Vanoni Fernandes",
                "url": "https://vertocode.com"
            }
        },
        {
            "url": "https://vertocode.com/blog/running-claude-ai-on-vps-with-openclaw",
            "title": "Running Claude AI on a VPS with OpenClaw",
            "summary": "How I set up a personal AI assistant running 24/7 on a Hostinger VPS using OpenClaw, with security controls and access from any machine.",
            "image": "https://vertocode.com/assets/images/posts/running-claude-ai-on-vps-with-openclaw.jpg",
            "date_modified": "2026-02-27T00:00:00.000Z",
            "author": {
                "name": "Everton Vanoni Fernandes",
                "url": "https://vertocode.com"
            }
        },
        {
            "url": "https://vertocode.com/blog/shopify-cli-graphql-401-error-fix",
            "title": "Fix Shopify CLI GraphQL 401 Error",
            "summary": "Learn how to resolve the GraphQL 401 error when running npm run dev in a Hydrogen project with Shopify CLI. This guide provides multiple solutions including logout/login and alternative troubleshooting steps.",
            "image": "https://vertocode.com/assets/images/posts/shopify-cli-graphql-401-error-fix.jpg",
            "date_modified": "2025-09-18T00:00:00.000Z",
            "author": {
                "name": "Everton Vanoni Fernandes",
                "url": "https://vertocode.com"
            }
        },
        {
            "url": "https://vertocode.com/blog/deploy-hydrogen-for-free",
            "title": "Deploy Hydrogen to Netlify for Free",
            "summary": "Learn how to deploy a Shopify Hydrogen storefront for free using Netlify. This guide walks you through the setup process, from connecting your Git repo to enabling SSR.",
            "image": "https://vertocode.com/assets/images/posts/deploy-hydrogen-for-free.jpg",
            "date_modified": "2025-04-11T00:00:00.000Z",
            "author": {
                "name": "Everton Vanoni Fernandes",
                "url": "https://vertocode.com"
            }
        },
        {
            "url": "https://vertocode.com/blog/senior-frontend-developer",
            "title": "From Mid-Level to Senior in Front-End Development",
            "summary": "This guide is designed for mid-level front-end developers ready to advance their careers to a senior level.",
            "image": "https://vertocode.com/assets/images/posts/senior-frontend-developer.jpg",
            "date_modified": "2024-10-31T00:00:00.000Z",
            "author": {
                "name": "Everton Vanoni Fernandes",
                "url": "https://vertocode.com"
            }
        },
        {
            "url": "https://vertocode.com/blog/dealing-with-remote-images-in-nextjs",
            "title": "Dealing with Remote Images in Next",
            "summary": "The next image component in Next.js is a powerful tool for optimizing images, but maybe we can have performance problems when dealing with remote images.",
            "image": "https://vertocode.com/assets/images/posts/dealing-with-remote-images-in-nextjs.jpg",
            "date_modified": "2024-06-25T00:00:00.000Z",
            "author": {
                "name": "Everton Vanoni Fernandes",
                "url": "https://vertocode.com"
            }
        },
        {
            "url": "https://vertocode.com/blog/booting-windows-macos",
            "title": "Creating Windows-bootable USB on macOS",
            "summary": "Simple tutorial to create windows bootable usb on macOS.",
            "image": "https://vertocode.com/assets/images/posts/booting-windows-macos.jpg",
            "date_modified": "2024-04-06T00:00:00.000Z",
            "author": {
                "name": "Everton Vanoni Fernandes",
                "url": "https://vertocode.com"
            }
        },
        {
            "url": "https://vertocode.com/blog/working-with-multiple-sshs",
            "title": "Working with multiple SSHs",
            "summary": "I needed to learn how to work with multiple SSHs at the same laptop to work in different GitHub accounts, here I'm documenting and sharing my experience if me or anyone needs to review how do this.",
            "image": "https://vertocode.com/assets/images/posts/working-with-multiple-sshs.jpg",
            "date_modified": "2024-03-09T00:00:00.000Z",
            "author": {
                "name": "Everton Vanoni Fernandes",
                "url": "https://vertocode.com"
            }
        },
        {
            "url": "https://vertocode.com/blog/server-components-nextjs",
            "title": "Next.js Server Side Components",
            "summary": "Why should we use server side components in next.js?",
            "image": "https://vertocode.com/assets/images/posts/server-components-nextjs.jpg",
            "date_modified": "2024-02-20T00:00:00.000Z",
            "author": {
                "name": "Everton Vanoni Fernandes",
                "url": "https://vertocode.com"
            }
        },
        {
            "url": "https://vertocode.com/blog/react-redux",
            "title": "React Redux Fundamentals",
            "summary": "Redux is a state management library, similar to Vuex/Pinia in Vue. It uses reducers to manage application state.",
            "image": "https://vertocode.com/assets/images/posts/react-redux.jpg",
            "date_modified": "2024-01-30T00:00:00.000Z",
            "author": {
                "name": "Everton Vanoni Fernandes",
                "url": "https://vertocode.com"
            }
        },
        {
            "url": "https://vertocode.com/blog/react-redux-toolkit",
            "title": "Redux Toolkit",
            "summary": "A tool that becomes the setup of redux easily.",
            "image": "https://vertocode.com/assets/images/posts/react-redux-toolkit.jpg",
            "date_modified": "2024-01-30T00:00:00.000Z",
            "author": {
                "name": "Everton Vanoni Fernandes",
                "url": "https://vertocode.com"
            }
        },
        {
            "url": "https://vertocode.com/blog/react-redux-logger",
            "title": "React Redux Logger",
            "summary": "We can have good logs when we are using Redux in dev tools console. This is very good to debugging.",
            "image": "https://vertocode.com/assets/images/posts/react-redux-logger.jpg",
            "date_modified": "2024-01-30T00:00:00.000Z",
            "author": {
                "name": "Everton Vanoni Fernandes",
                "url": "https://vertocode.com"
            }
        },
        {
            "url": "https://vertocode.com/blog/provide-inject",
            "title": "Provide / Inject from Vue.js",
            "summary": "When we want share data with child components, usually we uses the props. But imagine the case where we have a large component three. and a deeply nested component needs something from a distant ancestor component.",
            "image": "https://vertocode.com/assets/images/posts/provide-inject.jpg",
            "date_modified": "2023-06-14T00:00:00.000Z",
            "author": {
                "name": "Everton Vanoni Fernandes",
                "url": "https://vertocode.com"
            }
        },
        {
            "url": "https://vertocode.com/blog/prev-subject",
            "title": "Creating Custom Commands in Cypress using the PrevSubject option",
            "summary": "How can we create functions in cypress like `.type`, `.click`, etc...? Yes, on this page we will learn how we can do that.",
            "image": "https://vertocode.com/assets/images/posts/prev-subject.jpg",
            "date_modified": "2023-05-17T00:00:00.000Z",
            "author": {
                "name": "Everton Vanoni Fernandes",
                "url": "https://vertocode.com"
            }
        },
        {
            "url": "https://vertocode.com/blog/routes-with-nuxt",
            "title": "How routes works with Nuxt.js",
            "summary": "When we program with pure Vue.js, we need to define all routes in one file, eg (router.js). Using Nuxt, everything is done automatically, we just need to understand how it works so we don't get lost and manage to create the routes in the desired way.",
            "image": "https://vertocode.com/assets/images/posts/routes-with-nuxt.jpg",
            "date_modified": "2023-04-25T00:00:00.000Z",
            "author": {
                "name": "Everton Vanoni Fernandes",
                "url": "https://vertocode.com"
            }
        },
        {
            "url": "https://vertocode.com/blog/why-use-nuxt",
            "title": "Why use Nuxt.js?",
            "summary": "Nuxt.js is a free and open-source framework based on Vue.js for creating server-side rendered (SSR) and statically generated applications. It provides developers with a set of powerful features and conventions, including automatic code splitting, server-side rendering, and static site generation. These features make it easier to build fast and scalable web applications with Vue.js, without needing to spend time on configuring and setting up the infrastructure. Nuxt.js also includes a powerful CLI tool and a large ecosystem of plugins and modules, making it easy to extend and customize the framework to suit your needs.",
            "image": "https://vertocode.com/assets/images/posts/why-use-nuxt.jpg",
            "date_modified": "2023-04-23T00:00:00.000Z",
            "author": {
                "name": "Everton Vanoni Fernandes",
                "url": "https://vertocode.com"
            }
        },
        {
            "url": "https://vertocode.com/blog/grids",
            "title": "Grids using CSS",
            "summary": "Grid creates complex responsive web design grid layouts more easily and consistently across browsers.",
            "image": "https://vertocode.com/assets/images/posts/grids.jpg",
            "date_modified": "2023-01-23T00:00:00.000Z",
            "author": {
                "name": "Everton Vanoni Fernandes",
                "url": "https://vertocode.com"
            }
        },
        {
            "url": "https://vertocode.com/blog/flexbox",
            "title": "Flexbox using CSS",
            "summary": "CSS Flexible Box Layout, commonly known as Flexbox, is a CSS 3 web layout model. It is in the W3C's candidate recommendation stage. The flex layout allows responsive elements within a container to be automatically arranged depending on viewport size.",
            "image": "https://vertocode.com/assets/images/posts/flexbox.jpg",
            "date_modified": "2022-12-26T00:00:00.000Z",
            "author": {
                "name": "Everton Vanoni Fernandes",
                "url": "https://vertocode.com"
            }
        },
        {
            "url": "https://vertocode.com/blog/match-elements-with-specials",
            "title": "Match elements with `^`, `$`, `*` and `~` using CSS or Testing framework",
            "summary": "We were able to use these characters in selectors to filter which ones we want to be modifying in CSS or testing in some testing framework like Cypress or Playwright.",
            "image": "https://vertocode.com/assets/images/posts/match-elements-with-specials.jpg",
            "date_modified": "2022-12-04T00:00:00.000Z",
            "author": {
                "name": "Everton Vanoni Fernandes",
                "url": "https://vertocode.com"
            }
        },
        {
            "url": "https://vertocode.com/blog/creational-patterns",
            "title": "Creational Patterns from Design Patterns",
            "summary": "The purpose of `Creational Patterns` is to provide creation tools that increase flexibility and avoid code repetition.",
            "image": "https://vertocode.com/assets/images/posts/creational-patterns.jpg",
            "date_modified": "2022-11-08T00:00:00.000Z",
            "author": {
                "name": "Everton Vanoni Fernandes",
                "url": "https://vertocode.com"
            }
        },
        {
            "url": "https://vertocode.com/blog/cypress-vs-playwright",
            "title": "Cypress VS Playwright",
            "image": "https://vertocode.com/assets/images/posts/cypress-vs-playwright.jpg",
            "date_modified": "2022-10-25T00:00:00.000Z",
            "author": {
                "name": "Everton Vanoni Fernandes",
                "url": "https://vertocode.com"
            }
        },
        {
            "url": "https://vertocode.com/blog/testing-events-vue-test-utils",
            "title": "Testing Key, Mouse and other DOM events using Vue Test Utils",
            "image": "https://vertocode.com/assets/images/posts/testing-events-vue-test-utils.jpg",
            "date_modified": "2022-10-21T00:00:00.000Z",
            "author": {
                "name": "Everton Vanoni Fernandes",
                "url": "https://vertocode.com"
            }
        },
        {
            "url": "https://vertocode.com/blog/get-started-with-vue-test-utils",
            "title": "Get Started with Vue Test Utils",
            "summary": "Vue Test Utils (VTU) is a set of utility functions aimed to simplify testing Vue.js components. It provides some methods to mount and interact with Vue components in an isolated manner.",
            "image": "https://vertocode.com/assets/images/posts/get-started-with-vue-test-utils.jpg",
            "date_modified": "2022-10-19T00:00:00.000Z",
            "author": {
                "name": "Everton Vanoni Fernandes",
                "url": "https://vertocode.com"
            }
        },
        {
            "url": "https://vertocode.com/blog/common-tips-vue-test-utils",
            "title": "Common Tips for Vue Test Utils",
            "summary": "For UI components, we don't recommend aiming for complete line-based coverage, because it leads to too much focus on the internal implementation details of the components and could result in brittle tests.",
            "image": "https://vertocode.com/assets/images/posts/common-tips-vue-test-utils.jpg",
            "date_modified": "2022-10-19T00:00:00.000Z",
            "author": {
                "name": "Everton Vanoni Fernandes",
                "url": "https://vertocode.com"
            }
        },
        {
            "url": "https://vertocode.com/blog/configuration-wireguard",
            "title": "Using Ubuntu as a Client with WireGuard",
            "summary": "WireGuard is a communication protocol and free and open-source software that implements encrypted virtual private networks, and was designed with the goals of ease of use, high speed performance, and low attack surface.",
            "image": "https://vertocode.com/assets/images/posts/configuration-wireguard.jpg",
            "date_modified": "2022-10-18T00:00:00.000Z",
            "author": {
                "name": "Everton Vanoni Fernandes",
                "url": "https://vertocode.com"
            }
        },
        {
            "url": "https://vertocode.com/blog/mock-functions-with-jest",
            "title": "Mock Functions with JEST",
            "summary": "Mock functions allow you to test the links between code by erasing the actual implementation of a function, capturing calls to the function (and the parameters passed in those calls), capturing instances of constructor functions when instantiated with new, and allowing test-time configuration of return values.",
            "image": "https://vertocode.com/assets/images/posts/mock-functions-with-jest.jpg",
            "date_modified": "2022-10-17T00:00:00.000Z",
            "author": {
                "name": "Everton Vanoni Fernandes",
                "url": "https://vertocode.com"
            }
        },
        {
            "url": "https://vertocode.com/blog/setup-and-teardown-with-jest",
            "title": "Setup and Teardown with JEST",
            "summary": "Often while writing tests you have some setup work that needs to happen before tests run, and you have some finishing work that needs to happen after tests run. Jest provides helper functions to handle this.",
            "image": "https://vertocode.com/assets/images/posts/setup-and-teardown-with-jest.jpg",
            "date_modified": "2022-10-16T00:00:00.000Z",
            "author": {
                "name": "Everton Vanoni Fernandes",
                "url": "https://vertocode.com"
            }
        },
        {
            "url": "https://vertocode.com/blog/testing-asynchronous-code-with-jest",
            "title": "Testing Asynchronous Code with JEST",
            "summary": "It's common in JavaScript for code to run asynchronously. When you have code that runs asynchronously, Jest needs to know when the code it is testing has completed, before it can move on to another test. Jest has several ways to handle this.",
            "image": "https://vertocode.com/assets/images/posts/testing-asynchronous-code-with-jest.jpg",
            "date_modified": "2022-10-15T00:00:00.000Z",
            "author": {
                "name": "Everton Vanoni Fernandes",
                "url": "https://vertocode.com"
            }
        },
        {
            "url": "https://vertocode.com/blog/using-matchers-with-jest",
            "title": "Using Matchers with JEST",
            "image": "https://vertocode.com/assets/images/posts/using-matchers-with-jest.jpg",
            "date_modified": "2022-10-11T00:00:00.000Z",
            "author": {
                "name": "Everton Vanoni Fernandes",
                "url": "https://vertocode.com"
            }
        },
        {
            "url": "https://vertocode.com/blog/html-semantics",
            "title": "HTML Semantic Elements",
            "summary": "HTML semantic elements are elements that make some sense in the code to be clearer.",
            "image": "https://vertocode.com/assets/images/posts/html-semantics.jpg",
            "date_modified": "2022-10-10T00:00:00.000Z",
            "author": {
                "name": "Everton Vanoni Fernandes",
                "url": "https://vertocode.com"
            }
        },
        {
            "url": "https://vertocode.com/blog/get-started-with-jest",
            "title": "Get Started with JEST",
            "image": "https://vertocode.com/assets/images/posts/get-started-with-jest.jpg",
            "date_modified": "2022-10-08T00:00:00.000Z",
            "author": {
                "name": "Everton Vanoni Fernandes",
                "url": "https://vertocode.com"
            }
        },
        {
            "url": "https://vertocode.com/blog/get-started-with-html",
            "title": "Get Started with HTML",
            "summary": "HTML means **HyperText Markup Language** and is a markup language that tells web browsers how to structure the web pages you visit.",
            "image": "https://vertocode.com/assets/images/posts/get-started-with-html.jpg",
            "date_modified": "2022-09-05T00:00:00.000Z",
            "author": {
                "name": "Everton Vanoni Fernandes",
                "url": "https://vertocode.com"
            }
        }
    ]
}