<!DOCTYPE html>
<html lang="en">
<head>

  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-9G0LHMVPVN"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-9G0LHMVPVN');
  </script>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Blog | Monsur Hossain</title>
  <meta name="description" content="">

  <link rel="alternate" type="application/rss+xml" title="Monsur Hossain" href="/feed.xml">

  <style>
    /* Theme variables */
    :root {
      /* Light theme colors */
      --bg-color: #fdfdfd;
      --text-color: #111;
      --text-secondary: #424242;
      --text-muted: #828282;
      --border-color: #e8e8e8;
      --link-color: #2a7ae4;
      --link-hover: #1756a9;
      --header-bg: transparent;
    }

    @media (prefers-color-scheme: dark) {
      :root {
        /* Dark theme colors */
        --bg-color: #1a1a1a;
        --text-color: #e8e8e8;
        --text-secondary: #b8b8b8;
        --text-muted: #888;
        --border-color: #333;
        --link-color: #58a6ff;
        --link-hover: #79c0ff;
        --header-bg: transparent;
      }
    }

    /* Minima-inspired CSS */
    * { box-sizing: border-box; }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      font-size: 16px;
      line-height: 1.5;
      color: var(--text-color);
      background-color: var(--bg-color);
      margin: 0;
      padding: 0;
      transition: background-color 0.3s ease, color 0.3s ease;
    }

    .header-image {
      width: 100%;
      text-align: center;
      margin-bottom: 0;
    }

    .header-image img {
      width: 100%;
      max-width: 800px;
      height: auto;
      display: block;
      margin: 0 auto;
    }

    .wrapper {
      max-width: 800px;
      margin: 0 auto;
      padding: 0 30px;
      position: relative;
    }

    .site-header {
      min-height: 55.95px;
      position: relative;
    }

    .site-title {
      font-size: 26px;
      font-weight: 300;
      line-height: 54px;
      letter-spacing: -1px;
      margin-bottom: 0;
      float: left;
      text-decoration: none;
      color: var(--text-secondary);
    }

    .site-title:hover {
      text-decoration: none;
    }

    .site-nav {
      float: right;
      line-height: 54px;
    }

    .site-nav a {
      color: var(--text-color);
      text-decoration: none;
      margin: 0 10px;
    }

    .site-nav a:hover {
      color: var(--text-secondary);
    }

    .page-content {
      padding: 30px 0;
      flex: 1;
    }

    .site-footer {
      border-top: 1px solid var(--border-color);
      padding: 30px 0;
      color: var(--text-muted);
      font-size: 14px;
    }

    h1, h2, h3, h4, h5, h6 {
      font-weight: 400;
    }

    h1 { font-size: 2em; }
    h2 { font-size: 1.5em; }

    a {
      color: var(--link-color);
      text-decoration: none;
    }

    a:hover {
      color: var(--link-hover);
      text-decoration: underline;
    }

    .post-list {
      margin-left: 0;
      list-style: none;
    }

    .post-preview {
      margin-bottom: 30px;
      padding-bottom: 20px;
      border-bottom: 1px solid var(--border-color);
    }

    .post-preview:last-child {
      border-bottom: none;
    }

    .post-meta {
      font-size: 14px;
      color: var(--text-muted);
      margin-bottom: 10px;
    }

    .post-title {
      font-size: 24px;
      letter-spacing: -1px;
      line-height: 1.2;
      margin-bottom: 10px;
    }

    .post-title a {
      color: var(--text-color);
      text-decoration: none;
    }

    .post-title a:hover {
      color: var(--text-secondary);
    }

    .post-excerpt {
      color: var(--text-secondary);
      margin-bottom: 15px;
    }

    .read-more {
      text-align: right;
      margin-top: 10px;
      margin-bottom: 0;
    }

    .pagination {
      margin-top: 40px;
      padding: 20px 0;
      border-top: 1px solid var(--border-color);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .pagination .prev,
    .pagination .next {
      text-decoration: none;
      color: var(--link-color);
      font-weight: 500;
    }

    .pagination .prev:hover,
    .pagination .next:hover {
      color: var(--link-hover);
      text-decoration: underline;
    }

    .pagination .page-number {
      color: var(--text-muted);
      font-size: 14px;
    }

    .post-navigation {
      margin-top: 40px;
      padding-top: 20px;
      border-top: 1px solid var(--border-color);
    }

    .post-navigation a {
      text-decoration: none;
      color: var(--link-color);
      font-weight: 500;
    }

    .post-navigation a:hover {
      color: var(--link-hover);
      text-decoration: underline;
    }

    .post-meta-nav {
      margin-bottom: 15px;
    }

    .post-meta-nav a {
      text-decoration: none;
      color: var(--link-color);
      font-weight: 500;
      font-size: 14px;
    }

    .post-meta-nav a:hover {
      color: var(--link-hover);
      text-decoration: underline;
    }

    .post-title-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
    }

    .post-title-row .post-title {
      margin-bottom: 0;
      flex-grow: 1;
    }

    .post-title-row time {
      font-size: 14px;
      color: var(--text-muted);
      white-space: nowrap;
      margin-left: 20px;
    }

    .rss-subscribe {
      float: right;
    }

    .social-links {
      display: inline-block;
    }

    .social-links a {
      margin-right: 15px;
      text-decoration: none;
    }

    /* Profile and about page styles */
    .profile {
      height: 144px;
      width: 144px;
      border-radius: 20px;
      margin-bottom: 20px;
    }

    .icons {
      margin: 20px 0;
    }

    .icons img {
      border: 0px;
      width: 30px;
      height: 30px;
      margin: 10px;
    }

    /* Blog specific styles */
    .blog h1 {
      margin-bottom: 30px;
    }

    .blog h1 img {
      vertical-align: middle;
      width: 20px;
      height: 20px;
    }

    /* Projects table styles */
    .projects-table {
      width: 100%;
      border-collapse: collapse;
      margin: 20px 0;
    }

    .projects-table th,
    .projects-table td {
      padding: 12px;
      text-align: left;
      border-bottom: 1px solid var(--border-color);
    }

    .projects-table th {
      font-weight: 600;
      color: var(--text-color);
      border-bottom: 2px solid var(--border-color);
    }

    .projects-table tr:last-child td {
      border-bottom: none;
    }

    .projects-table a {
      color: var(--link-color);
      text-decoration: none;
    }

    .projects-table a:hover {
      color: var(--link-hover);
      text-decoration: underline;
    }

    /* Responsive table for mobile */
    @media screen and (max-width: 600px) {
      .projects-table {
        font-size: 14px;
      }

      .projects-table th,
      .projects-table td {
        padding: 8px 4px;
      }
    }

    /* Stack table as cards on very small screens */
    @media screen and (max-width: 480px) {
      .projects-table thead {
        display: none;
      }

      .projects-table tr {
        display: block;
        margin-bottom: 20px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 10px;
      }

      .projects-table td {
        display: block;
        text-align: left;
        padding: 8px 0;
        border-bottom: none;
      }

      .projects-table td:before {
        content: attr(data-label);
        font-weight: 600;
        display: block;
        margin-bottom: 4px;
        color: var(--text-muted);
      }
    }

    /* Responsive */
    @media screen and (max-width: 600px) {
      .wrapper {
        padding: 0 20px;
      }

      .site-header .wrapper {
        text-align: center;
      }

      .site-nav {
        float: none;
        display: block;
        text-align: center;
        line-height: 1.5;
        margin-top: 10px;
      }

      .site-title {
        float: none;
        display: block;
        text-align: center;
        line-height: 1.5;
        margin-bottom: 10px;
      }

      .rss-subscribe {
        float: none;
        display: block;
        margin-top: 10px;
      }
    }
  </style>
</head>

<body>
  <div class="header-image">
    <img id="header-img" src="/images/headers/header001.jpg" alt="Header">
  </div>

  <header class="site-header">
    <div class="wrapper">
      <a class="site-title" href="/">Monsur Hossain</a>

      <nav class="site-nav">
        <a href="/">Blog</a>
        <a href="/projects/">Projects</a>
        <a href="/about/">About</a>
      </nav>
    </div>
  </header>

  <main class="page-content" aria-label="Content">
    <div class="wrapper">
      <div class="home">

  <div class="post-list">
    
      <div class="post-preview">
        <h2 class="post-title">
          <a href="/blog/2026/05/06/with-the-start-of-baseball-sea/">Revisiting Plai Ball for the new season</a>
        </h2>
        <p class="post-meta">May 6, 2026</p>
        <div class="post-excerpt">
          
          
          <p>With the start of baseball season, I revisited <a href="https://www.plai-ball.com/">https://www.plai-ball.com/</a> for the new year. It was my first AI coding project, and it’s amazing how far things have come in a year.</p>
          <p class="read-more"><a href="/blog/2026/05/06/with-the-start-of-baseball-sea/">read more &rarr;</a></p>
        </div>
      </div>
    
      <div class="post-preview">
        <h2 class="post-title">
          <a href="/blog/2026/01/19/my-newest-vibe-coded-project/">LoopTimer</a>
        </h2>
        <p class="post-meta">Jan 19, 2026</p>
        <div class="post-excerpt">
          
          
          <p>My newest vibe-coded project: <a href="https://github.com/monsur/LoopTimer">LoopTimer</a></p>
          <p class="read-more"><a href="/blog/2026/01/19/my-newest-vibe-coded-project/">read more &rarr;</a></p>
        </div>
      </div>
    
      <div class="post-preview">
        <h2 class="post-title">
          <a href="/blog/2026/01/15/i-recently-updated-httpsena/">enable-cors.org</a>
        </h2>
        <p class="post-meta">Jan 15, 2026</p>
        <div class="post-excerpt">
          
          
          <p>I recently updated <a href="enable-cors.org">https://enable-cors.org</a> with the help of Claude Code. AI is simultaneously perfect for updating a site like enable-cors.org and completely eliminates the need for a site like enable-cors.org.</p>
          <p class="read-more"><a href="/blog/2026/01/15/i-recently-updated-httpsena/">read more &rarr;</a></p>
        </div>
      </div>
    
      <div class="post-preview">
        <h2 class="post-title">
          <a href="/blog/2026/01/05/ai-assistants-are-often-eager/">Do you want me to...?</a>
        </h2>
        <p class="post-meta">Jan 5, 2026</p>
        <div class="post-excerpt">
          
          
          <p>AI assistants are often eager to jump to the finish line. You’ll iterate once on a design, and it immediately offers to “implement the whole thing.”</p>
          <p class="read-more"><a href="/blog/2026/01/05/ai-assistants-are-often-eager/">read more &rarr;</a></p>
        </div>
      </div>
    
      <div class="post-preview">
        <h2 class="post-title">
          <a href="/blog/2025/12/14/a-new-nyt-article-details-why/">Kids Rarely Read Whole Books Anymore. Even in English Class.</a>
        </h2>
        <p class="post-meta">Dec 14, 2025</p>
        <div class="post-excerpt">
          
          
          <p><a href="https://www.nytimes.com/2025/12/12/us/high-school-english-teachers-assigning-books.html?unlocked_article_code=1.8U8.EIWk.aerDMGvb5vms&amp;smid=nytcore-ios-share">A new NYT article</a> details why reading is declining: schools assign fewer full books, test scores are historically low, and students struggle with complex texts.</p>
          <p class="read-more"><a href="/blog/2025/12/14/a-new-nyt-article-details-why/">read more &rarr;</a></p>
        </div>
      </div>
    
      <div class="post-preview">
        <h2 class="post-title">
          <a href="/blog/2025/12/07/when-i-think-of-moving-quickly/">Why Speed Matters</a>
        </h2>
        <p class="post-meta">Dec 7, 2025</p>
        <div class="post-excerpt">
          
          
          <p>When I think of moving quickly <a href="https://www.youtube.com/watch?v=r8miwsWtzRw">this Simpsons scene</a> comes to mind. <a href="https://lemire.me/blog/2025/12/05/why-speed-matters/">Daniel Lemire’s post</a> does a better job of articulating why speed matters. Its not about moving quickly just to get more done, its what that speed unlocks.</p>
          <p class="read-more"><a href="/blog/2025/12/07/when-i-think-of-moving-quickly/">read more &rarr;</a></p>
        </div>
      </div>
    
      <div class="post-preview">
        <h2 class="post-title">
          <a href="/blog/2025/12/07/my-latest-vibe-coding-project/">Replai Review Newsletter</a>
        </h2>
        <p class="post-meta">Dec 7, 2025</p>
        <div class="post-excerpt">
          
          
          <p>My latest vibe-coding project: a weekly automated newsletter that recaps NFL games. More than just a scoreboard, this was an end-to-end exercise in building an automated pipeline from data scraping to delivery: <a href="https://monsur.hossa.in/replai-review/">https://monsur.hossa.in/replai-review/</a></p>
          <p class="read-more"><a href="/blog/2025/12/07/my-latest-vibe-coding-project/">read more &rarr;</a></p>
        </div>
      </div>
    
      <div class="post-preview">
        <h2 class="post-title">
          <a href="/blog/2025/10/22/i-wrote-earlier-about-canva-em/">AI Interview Success at Canva</a>
        </h2>
        <p class="post-meta">Oct 22, 2025</p>
        <div class="post-excerpt">
          
          
          <p>I <a href="https://bsky.app/profile/monsur.hossa.in/post/3lrlwfcdlfs24">wrote earlier</a> about Canva embracing AI in their interview process.</p>
          <p class="read-more"><a href="/blog/2025/10/22/i-wrote-earlier-about-canva-em/">read more &rarr;</a></p>
        </div>
      </div>
    
      <div class="post-preview">
        <h2 class="post-title">
          <a href="/blog/2025/10/05/using-ai-to-uncover-security-b/">Using AI to uncover security bugs</a>
        </h2>
        <p class="post-meta">Oct 5, 2025</p>
        <div class="post-excerpt">
          
          
          <p>Using AI to uncover security bugs is <a href="https://simonwillison.net/2025/Oct/2/curl/">a hot topic right now</a>.</p>
          <p class="read-more"><a href="/blog/2025/10/05/using-ai-to-uncover-security-b/">read more &rarr;</a></p>
        </div>
      </div>
    
      <div class="post-preview">
        <h2 class="post-title">
          <a href="/blog/2025/10/05/claude-code-released-an-update/">Claude Code &amp; Checkpoints</a>
        </h2>
        <p class="post-meta">Oct 5, 2025</p>
        <div class="post-excerpt">
          
          
          <p>Claude Code <a href="https://www.anthropic.com/news/enabling-claude-code-to-work-more-autonomously">released an update</a>, and one of the new features is checkpoints.</p>
          <p class="read-more"><a href="/blog/2025/10/05/claude-code-released-an-update/">read more &rarr;</a></p>
        </div>
      </div>
    
  </div>

  <!-- Pagination links -->
  
  <div class="pagination">
    

    <span class="page-number">Page 1 of 3</span>

    
      <a href="/page2/" class="next">Older Posts &rarr;</a>
    
  </div>
  

  <!-- Mastodon verification -->
  <a rel="me" href="https://mastodon.social/@monsur" style="display: none;">Mastodon</a>
</div>
    </div>
  </main>

  <footer class="site-footer">
    <div class="wrapper">
    </div>
  </footer>

  <script>
    (function() {
      // Number of header images available (update this when you add more images)
      // Image size = 800 x 200
      const totalHeaders = 22;

      // Generate random number between 1 and totalHeaders
      const randomHeader = Math.floor(Math.random() * totalHeaders) + 1;

      // Format number with leading zero if needed (001, 002, etc.)
      const headerNumber = randomHeader.toString().padStart(3, '0');

      // Update the header image source
      const headerImg = document.getElementById('header-img');
      if (headerImg) {
        headerImg.src = '/images/headers/header' + headerNumber + '.jpg';
      }
    })();
  </script>
</body>
</html>