rafaelcamargo/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS :has</title>
  <link rel="preconnect" href="https://rsms.me/">
  <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
  <style>
    :root {
      font-family: Inter, sans-serif;
      font-feature-settings: 'liga' 1, 'calt' 1;
      font-weight: 500;
    }
    @supports (font-variation-settings: normal) {
      :root { font-family: InterVariable, sans-serif; }
    }
    html,
    body {
      margin: 0;
      padding: 0;
      background-color: #000000;
      color: #777B84;
    }
    main {
      margin: 0 auto;
      padding: 40px;
      width: 100%;
      max-width: 1200px;
      box-sizing: border-box;
    }
    ul {
      display: grid;
      gap: 30px;
      margin: 0;
      padding: 0;
      list-style-type: none;
    }
    li {
      padding: 20px;
      box-shadow: 0 0 0 0 #29303D;
      border-radius: 12px;
      box-sizing: border-box;
      transition: all 300ms ease-out;
    }
    li:has(h2 > a:focus) {
      box-shadow: 0 0 0 6px #29303D;
    }
    li h2 {
      margin: 0;
    }
    li a {
      color: #DDE0E6;
      text-decoration: none;
      outline: 0;
    }
    li p, li time {
      display: flex;
      margin: 10px 0 0 0;
    }
    li time {
      font-size: 0.75rem;
      font-weight: bold;
      text-transform: uppercase;
    }

    @media screen and (min-width: 768px) {
      ul {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media screen and (min-width: 1024px) {
      ul {
        grid-template-columns: 1fr 1fr 1fr;
      }
    }
  </style>
</head>
<body>
  <main>
    <ul>
      <li>
        <h2><a href="https://rafaelcamargo.com/blog/converting-mov-files-to-mp4-on-mac-os/" target="_blank">Converting mov files to mp4 on macOS</a></h2>
        <p>When you use a video instead of a GIF animation, you can keep the same visual quality with a way smaller file size. But if you’ve ever recorded a screen capture on your Mac to demonstrate a step-by-step, you’ve probably noticed it generates a mov file. Here’s how to convert mov to mp4 using a free command-line tool.</p>
        <time datetime="2024-10-26">October 26, 2024</time>
      </li>
      <li>
        <h2><a href="https://rafaelcamargo.com/blog/font-size-clamp-calculation-easily-explained/" target="_blank">Font size clamping calculation easily explained</a></h2>
        <p>Compared to the media query strategy, the clamp function has the advantage of making text size responsive with just one line of code. However, while two of the parameters received by the function are pretty intuitive, the third one can easily confuse many programmers. This post easily explains what that third parameter means and how it works.</p>
        <time datetime="2024-09-29">September 29, 2024</time>
      </li>
      <li>
        <h2><a href="https://rafaelcamargo.com/blog/testing-redirections-set-via-window-location-href-with-Jest/" target="_blank">Testing redirections set via window location href with Jest</a></h2>
        <p>Redirects are pretty common in any web app. But when the destination is an external page, you might run into some challenges when testing that behavior. Learn how to set a boundary between your app's behavior and the browser's, making your tests easier to develop.</p>
        <time datetime="2024-08-26">August 26, 2024</time>
      </li>
      <li>
        <h2><a href="https://rafaelcamargo.com/blog/lessons-learned-from-building-a-serverless-nodejs-api-with-vercel-neon-and-prisma-orm/" target="_blank">Lessons learned from building a Serverless NodeJS API with Vercel, Neon, and Prisma ORM</a></h2>
        <p>By offering generous free plans, Vercel and Neon have become great options for experimental projects. But if you're used to dealing with traditional infrastructure, the Serverless world can bring some challenges. In this post, I share the lessons I learned about continuous delivery, databases, and automated testing after releasing a Serverless NodeJS API.</p>
        <time datetime="2024-07-22">July 22, 2024</time>
      </li>
      <li>
        <h2><a href="https://rafaelcamargo.com/blog/using-git-rebase-to-keep-your-commit-history-clean-and-meaningful/" target="_blank">Using Git Rebase to keep your commit history clean and meaningful</a></h2>
        <p>Transforming the commit history into a biography that, chapter by chapter, describes everything that has happened throughout the life of a software is a huge benefit for everyone involved in its development. Therefore, mastering the use of some possibilities offered by Git Rebase is essential for this story to be well told.</p>
        <time datetime="2024-06-30">June 30, 2024</time>
      </li>
      <li>
        <h2><a href="https://rafaelcamargo.com/blog/mastering-date-formatting-using-intl-date-time-format-in-javascript/" target="_blank">Mastering date formatting using Intl.DateTimeFormat in JavaScript</a></h2>
        <p>For a long time, libraries like MomentJS and DateFNS reigned supreme when it came to date manipulation. Although they still satisfy very specific use cases, if all you need is to simply format a date, you might already be able to meet your needs with just native JavaScript.</p>
        <time datetime="2024-05-29">May 29, 2024</time>
      </li>
    </ul>
  </main>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>CSS :has</title>
	<link rel="preconnect" href="https://rsms.me/">
	<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
	<style>
	:root {
	font-family: Inter, sans-serif;
	font-feature-settings: 'liga' 1, 'calt' 1;
	font-weight: 500;
	}
	@supports (font-variation-settings: normal) {
	:root { font-family: InterVariable, sans-serif; }
	}
	html,
	body {
	margin: 0;
	padding: 0;
	background-color: #000000;
	color: #777B84;
	}
	main {
	margin: 0 auto;
	padding: 40px;
	width: 100%;
	max-width: 1200px;
	box-sizing: border-box;
	}
	ul {
	display: grid;
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style-type: none;
	}
	li {
	padding: 20px;
	box-shadow: 0 0 0 0 #29303D;
	border-radius: 12px;
	box-sizing: border-box;
	transition: all 300ms ease-out;
	}
	li:has(h2 > a:focus) {
	box-shadow: 0 0 0 6px #29303D;
	}
	li h2 {
	margin: 0;
	}
	li a {
	color: #DDE0E6;
	text-decoration: none;
	outline: 0;
	}
	li p, li time {
	display: flex;
	margin: 10px 0 0 0;
	}
	li time {
	font-size: 0.75rem;
	font-weight: bold;
	text-transform: uppercase;
	}

	@media screen and (min-width: 768px) {
	ul {
	grid-template-columns: 1fr 1fr;
	}
	}

	@media screen and (min-width: 1024px) {
	ul {
	grid-template-columns: 1fr 1fr 1fr;
	}
	}
	</style>
	</head>
	<body>
	<main>
	<ul>
	<li>
	<h2><a href="https://rafaelcamargo.com/blog/converting-mov-files-to-mp4-on-mac-os/" target="_blank">Converting mov files to mp4 on macOS</a></h2>
	<p>When you use a video instead of a GIF animation, you can keep the same visual quality with a way smaller file size. But if you’ve ever recorded a screen capture on your Mac to demonstrate a step-by-step, you’ve probably noticed it generates a mov file. Here’s how to convert mov to mp4 using a free command-line tool.</p>
	<time datetime="2024-10-26">October 26, 2024</time>
	</li>
	<li>
	<h2><a href="https://rafaelcamargo.com/blog/font-size-clamp-calculation-easily-explained/" target="_blank">Font size clamping calculation easily explained</a></h2>
	<p>Compared to the media query strategy, the clamp function has the advantage of making text size responsive with just one line of code. However, while two of the parameters received by the function are pretty intuitive, the third one can easily confuse many programmers. This post easily explains what that third parameter means and how it works.</p>
	<time datetime="2024-09-29">September 29, 2024</time>
	</li>
	<li>
	<h2><a href="https://rafaelcamargo.com/blog/testing-redirections-set-via-window-location-href-with-Jest/" target="_blank">Testing redirections set via window location href with Jest</a></h2>
	<p>Redirects are pretty common in any web app. But when the destination is an external page, you might run into some challenges when testing that behavior. Learn how to set a boundary between your app's behavior and the browser's, making your tests easier to develop.</p>
	<time datetime="2024-08-26">August 26, 2024</time>
	</li>
	<li>
	<h2><a href="https://rafaelcamargo.com/blog/lessons-learned-from-building-a-serverless-nodejs-api-with-vercel-neon-and-prisma-orm/" target="_blank">Lessons learned from building a Serverless NodeJS API with Vercel, Neon, and Prisma ORM</a></h2>
	<p>By offering generous free plans, Vercel and Neon have become great options for experimental projects. But if you're used to dealing with traditional infrastructure, the Serverless world can bring some challenges. In this post, I share the lessons I learned about continuous delivery, databases, and automated testing after releasing a Serverless NodeJS API.</p>
	<time datetime="2024-07-22">July 22, 2024</time>
	</li>
	<li>
	<h2><a href="https://rafaelcamargo.com/blog/using-git-rebase-to-keep-your-commit-history-clean-and-meaningful/" target="_blank">Using Git Rebase to keep your commit history clean and meaningful</a></h2>
	<p>Transforming the commit history into a biography that, chapter by chapter, describes everything that has happened throughout the life of a software is a huge benefit for everyone involved in its development. Therefore, mastering the use of some possibilities offered by Git Rebase is essential for this story to be well told.</p>
	<time datetime="2024-06-30">June 30, 2024</time>
	</li>
	<li>
	<h2><a href="https://rafaelcamargo.com/blog/mastering-date-formatting-using-intl-date-time-format-in-javascript/" target="_blank">Mastering date formatting using Intl.DateTimeFormat in JavaScript</a></h2>
	<p>For a long time, libraries like MomentJS and DateFNS reigned supreme when it came to date manipulation. Although they still satisfy very specific use cases, if all you need is to simply format a date, you might already be able to meet your needs with just native JavaScript.</p>
	<time datetime="2024-05-29">May 29, 2024</time>
	</li>
	</ul>
	</main>
	</body>
	</html>