<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Mitch</title>
    <description>The latest articles on Forem by Mitch (@mitchleung).</description>
    <link>https://forem.com/mitchleung</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F98167%2F815fbd3f-fa02-415f-9262-54d6a7b04831.jpeg</url>
      <title>Forem: Mitch</title>
      <link>https://forem.com/mitchleung</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/mitchleung"/>
    <language>en</language>
    <item>
      <title>Lovely technology logos</title>
      <dc:creator>Mitch</dc:creator>
      <pubDate>Wed, 24 Apr 2024 00:04:30 +0000</pubDate>
      <link>https://forem.com/mitchleung/lovely-technology-logos-f7p</link>
      <guid>https://forem.com/mitchleung/lovely-technology-logos-f7p</guid>
      <description>&lt;p&gt;Here's some &lt;a href="https://github.com/SAWARATSUKI/ServiceLogos"&gt;lovely technology logos&lt;/a&gt; reimagined by &lt;a href="https://twitter.com/sawaratsuki1004"&gt;@sawaratsuki1004&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F305sac1nmyuit3l138ro.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F305sac1nmyuit3l138ro.jpeg" alt="Image description" width="800" height="413"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;These are free for personal and non-commerical use. So you can print these stickers yourself to stick on your computers.&lt;/p&gt;

&lt;p&gt;My personal favorite:&lt;br&gt;
&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fej3mktnt2orn1rh1l3yl.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fej3mktnt2orn1rh1l3yl.png" alt="Image description" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>services</category>
      <category>github</category>
      <category>stickers</category>
      <category>logo</category>
    </item>
    <item>
      <title>Headless development vs traditional CMS development</title>
      <dc:creator>Mitch</dc:creator>
      <pubDate>Thu, 07 Mar 2024 02:31:49 +0000</pubDate>
      <link>https://forem.com/mitchleung/headless-development-vs-traditional-cms-development-1909</link>
      <guid>https://forem.com/mitchleung/headless-development-vs-traditional-cms-development-1909</guid>
      <description>&lt;p&gt;With traditional development with CMS, the presentation is mostly CMS template driven. Meaning the layout of content can be at ANY level of the site, depending only on the CMS template.&lt;/p&gt;

&lt;p&gt;For example, I define templates for home, section landing 1, section landing 2, press release details, media library, generic content page. I can create ANY of these element in CMS at ANY level, and I can see the corresponding layout. Purely base on the CMS template used.&lt;/p&gt;

&lt;p&gt;However, in this headless era with frameworks, we need a well defined structure before we event starts the work.&lt;/p&gt;

&lt;p&gt;For example, to have press release details page, it must be at path /press/[id] with Next.JS. Give and take, the route must be predefined. As the developer, I must anticipate what content will be at specific path pattern.&lt;/p&gt;

&lt;p&gt;There is a huge gap with the understand from the typical CMS development mindset and the headless development mindset.&lt;/p&gt;

&lt;p&gt;Client today will still want to create a page with any CMS template at random level today. And headless development does not seem to allow me to do so.&lt;/p&gt;

&lt;p&gt;If the site is composed of all reusable components, then I can potentially have 1 page to catch all routes. Sadly it will be the case as layout will be so different. Listing pages needs to show its subsequent contents base on the CMS template type.&lt;/p&gt;

&lt;p&gt;And I have not talked about multilingual support. In typical CMS development, the languages are maintained in CMS. Meaning client can add a language at some point without code changes. It's not the case with NextJS at least.&lt;/p&gt;

&lt;p&gt;I have yet come across a real working solution to allow headless development presenting layout base on CMS template driven instead of route, may it be react, angular, vue.&lt;/p&gt;

&lt;p&gt;Thoughts?&lt;/p&gt;

</description>
      <category>headless</category>
      <category>cms</category>
    </item>
    <item>
      <title>Next.JS 14.0.3 build error</title>
      <dc:creator>Mitch</dc:creator>
      <pubDate>Thu, 07 Dec 2023 00:11:06 +0000</pubDate>
      <link>https://forem.com/mitchleung/nextjs-1403-build-error-a0d</link>
      <guid>https://forem.com/mitchleung/nextjs-1403-build-error-a0d</guid>
      <description>&lt;p&gt;Have anyone encounter build error with Next.JS 14.0.2 or 14.0.3??&lt;/p&gt;

&lt;p&gt;I've been using 13.4 and then 14.0.1 for testing a CMS with dynamic routes.&lt;/p&gt;

&lt;p&gt;Build &amp;amp; deploy is all ok.&lt;/p&gt;

&lt;p&gt;However upgrading to 14.0.2 or 14.0.3 will throw error during build. It'll throw error about &lt;a href="https://nextjs.org/docs/messages/prerender-error"&gt;pre-rendering error&lt;/a&gt; on every dynamic route pages.&lt;/p&gt;

&lt;p&gt;Been searching for answer for so long, turns out it's related to &lt;a href="https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config"&gt;route segment config&lt;/a&gt;. The workaround is adding this to layout / page / route&lt;/p&gt;

&lt;p&gt;&lt;code&gt;export const dynamic = 'force-dynamic'&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;However, doing this will force the page to be re-rendered at every request.&lt;/p&gt;

&lt;p&gt;Leave a comment if you encounter this and what's your workaround?&lt;/p&gt;

</description>
    </item>
  </channel>
</rss>
