diff --git a/blog/2023/2023-09-21-supercharge-your-repository-with-code-owners.md b/blog/2023/2023-09-21-supercharge-your-repository-with-code-owners.md index d9a6c5c2..58157d0e 100644 --- a/blog/2023/2023-09-21-supercharge-your-repository-with-code-owners.md +++ b/blog/2023/2023-09-21-supercharge-your-repository-with-code-owners.md @@ -8,6 +8,9 @@ description: "As a maintainer of a repository, it’s in your best interest to a As a maintainer of a repository, it’s in your best interest to automate processes as much as possible. The [CODEOWNERS file](https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-code-owners) is one of those tools to help with automating processes. + + + I decided to write a post about the CODEOWNERS file after reading this comment from one of our awesome [Octerns](https://education.github.com/students/octernships), Divyansh (@diivi), in a [pull request (PR) where I added the file](https://github.com/open-sauced/ai/pull/268). ![GitHub user diivi commenting that they weren't aware of the CODEOWNERS feature](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hpkmx91y66efqaa62umv.png) diff --git a/blog/2023/2023-10-31-github-actions-a-maintainers-best-friend.md b/blog/2023/2023-10-31-github-actions-a-maintainers-best-friend.md index 5cea5710..25c0354a 100644 --- a/blog/2023/2023-10-31-github-actions-a-maintainers-best-friend.md +++ b/blog/2023/2023-10-31-github-actions-a-maintainers-best-friend.md @@ -8,6 +8,9 @@ description: "As developers, it’s in our best interest to automate things. The As developers, it’s in our best interest to automate things. The less we have to do in a manual way, the better. As soon as manual intervention is required, there is potential for failure or a mishap. Aside from that, it’s your time as a maintainer that could be spent elsewhere. + + + If you host your code on GitHub, besides scripts to automate certain actions, you can also leverage the huge ecosystem of [GitHub Actions](https://github.com/features/actions). diff --git a/blog/2023/2023-11-14-boost-productivity-with-the-github-cli.md b/blog/2023/2023-11-14-boost-productivity-with-the-github-cli.md index 8e13ef23..58276e5d 100644 --- a/blog/2023/2023-11-14-boost-productivity-with-the-github-cli.md +++ b/blog/2023/2023-11-14-boost-productivity-with-the-github-cli.md @@ -14,6 +14,9 @@ The day my brain exploded was when I discovered (spoilers) that you could create Let's get started! + + + ## Install the GitHub CLI Head on over to the [installation docs to get the GitHub CLI set up](https://cli.github.com/). There are installers for Linux, Windows, and macOS. diff --git a/blog/2023/2023-12-14-migrating-from-jest-to-vitest-for-your-react-application.md b/blog/2023/2023-12-14-migrating-from-jest-to-vitest-for-your-react-application.md index ed211a53..5ada786e 100644 --- a/blog/2023/2023-12-14-migrating-from-jest-to-vitest-for-your-react-application.md +++ b/blog/2023/2023-12-14-migrating-from-jest-to-vitest-for-your-react-application.md @@ -10,6 +10,9 @@ Are you looking to migrate from [Jest](https://jestjs.io) to [Vitest](https://vi I recently migrated the OpenSauced app repository to Vitest. Here's the pull request if you're interested. + + + https://github.com/open-sauced/app/pull/2296 ## Why move from Jest to Vitest? diff --git a/blog/2024/2024-01-23-the-native-browser-dialog-element.md b/blog/2024/2024-01-23-the-native-browser-dialog-element.md index 95342ba6..27456c67 100644 --- a/blog/2024/2024-01-23-the-native-browser-dialog-element.md +++ b/blog/2024/2024-01-23-the-native-browser-dialog-element.md @@ -8,6 +8,9 @@ description: "All the major browsers now support the <dialog > element. Wh All the major browsers now support the `<dialog%gt;` element. Why add this HTML element? User land code, code that developers write to fill in gaps of the browser, was doing similar things repeatedly, especially around focus trapping, and browser engines responded by adding this functionality directly in the browser. + + + ## Focus Trapping What is focus trapping? It's a feature where you do not want focus outside a specific element, and that element typically contains focusable elements. diff --git a/blog/2024/2024-02-06-challenging-the-skeptics-unveiling-the-undeniable-goodness-of-tailwind-css.md b/blog/2024/2024-02-06-challenging-the-skeptics-unveiling-the-undeniable-goodness-of-tailwind-css.md index 9605c97c..3f986579 100644 --- a/blog/2024/2024-02-06-challenging-the-skeptics-unveiling-the-undeniable-goodness-of-tailwind-css.md +++ b/blog/2024/2024-02-06-challenging-the-skeptics-unveiling-the-undeniable-goodness-of-tailwind-css.md @@ -10,6 +10,9 @@ People definitely have opinions about Tailwind. There are staunch supporters and If you're pretty well versed with Tailwind, this article might not be for you, but who knows? Read on and maybe you'll learn something. + + + I'm coming in with what, I think, is a fresh perspective. I'm using Tailwind for the first time professionally. Furthermore, I don't consider myself a CSS expert, but I think I have pretty solid CSS skills. I mention all this, to convey a sentiment, I've seen many people exhibit. You're using Tailwind because you don't understand CSS. I do understand CSS. diff --git a/blog/2024/2024-03-14-stuck-in-the-middle-with-you-an-intro-to-middleware.md b/blog/2024/2024-03-14-stuck-in-the-middle-with-you-an-intro-to-middleware.md index 8ece4e46..1651b486 100644 --- a/blog/2024/2024-03-14-stuck-in-the-middle-with-you-an-intro-to-middleware.md +++ b/blog/2024/2024-03-14-stuck-in-the-middle-with-you-an-intro-to-middleware.md @@ -8,6 +8,9 @@ description: "Middleware exists in several frameworks like Next.js, Express, Hon Middleware exists in several frameworks like Next.js, Express, Hono and Fresh, and not just in JavaScript land. You can find it in frameworks like ASP.NET core in the .NET ecosystem, or Laravel in PHP. Since I mainly work in JavaScript and TypeScript these days, examples will be from frameworks in those ecosystems. + + + Middleware is something that happens in the middle of a user or some service interacting with a site or [API](https://en.wikipedia.org/wiki/API) call and happens at the framework level. It runs before a page loads or an API endpoint is called, or more generally a route. There are many reasons why you might want to do that: diff --git a/blog/2024/2024-04-02-form-and-function-how-i-lost-my-submit-button-got-it-back.md b/blog/2024/2024-04-02-form-and-function-how-i-lost-my-submit-button-got-it-back.md index b105aa58..9be6fd02 100644 --- a/blog/2024/2024-04-02-form-and-function-how-i-lost-my-submit-button-got-it-back.md +++ b/blog/2024/2024-04-02-form-and-function-how-i-lost-my-submit-button-got-it-back.md @@ -6,12 +6,15 @@ slug: form-and-function-how-i-lost-my-submit-button-got-it-back description: "As web developers, we know that most of the create, read update, and delete (CRUD) actions we perform..." --- -As web developers, we know that most of the create, read update, and delete (CRUD) actions we perform on the web are typically (hopefully?) done using an [HTML form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form). +As web developers, we know that most of the create, read, update, and delete (CRUD) actions we perform on the web are typically (hopefully?) done using an [HTML form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form). ## HTML Forms HTML Forms are cool because they have plenty of built-in features. + + + For example, they have native form validation and access to all the inputs in a form, and at some point, because you need to submit the form, there is a mechanism to do that as well. You can use a [button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button), `` or an [input of type submit](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/submit), ``, although the latter isn't used as much these days in new sites, from what I've seen. Here is a simple form to exhibit this. diff --git a/blog/2024/2024-04-16-creating-an-og-image-using-react-and-netlify-edge-functions.md b/blog/2024/2024-04-16-creating-an-og-image-using-react-and-netlify-edge-functions.md index e0661b1f..852e3ca5 100644 --- a/blog/2024/2024-04-16-creating-an-og-image-using-react-and-netlify-edge-functions.md +++ b/blog/2024/2024-04-16-creating-an-og-image-using-react-and-netlify-edge-functions.md @@ -8,6 +8,9 @@ description: "Open Graph (OG) images are a must if you're sharing content on the [Open Graph](https://ogp.me/) (OG) images are a must if you're sharing content on the Internet. From sites like X/Twitter, to Slack or Discord, a great OG image makes your link share pop. + + + ## Examples I recently built out a couple of OG images for Open Sauced for a couple of features we've rolled out over the past couple of months, [Workspaces](https://opensauced.pizza/docs/features/workspaces/) and [Repository pages](https://opensauced.pizza/docs/features/repo-pages/). They're great features that I encourage you to check out, and I encourage you to share them on socials so our beautiful OG images pop.