New post

components/sections/Card.vue

@@ -13,11 +13,11 @@ const props = defineProps({
     <div class="bg-white border border-gray-200 rounded-lg">
         <a :href="modifyLink(props.post.slug)">
             <img v-if="props.post.image && props.post.image != ''" class="rounded-t-lg" :src="props.post.image" :alt="props.post.alt ?? 'Images'" />
-            <div class="p-5">
+            <div class="flex flex-col p-5 h-full">
                 <h5 class="mb-2 text-lg font-bold tracking-tight text-gray-900">{{ props.post.headline }}</h5>
                 <p class="mb-3 font-normal text-gray-700">{{ props.post.description }}</p>
                 <hr>
-                <span class="inline-flex mt-3 items-center text-sm font-medium text-center rounded-lg">
+                <span class="inline-flex mt-3 self-end items-center text-sm font-medium text-center rounded-lg">
                     Read more
                     <svg class="w-3.5 h-3.5 ml-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>

datas/posts.ts

@@ -9,6 +9,13 @@ export const posts: Array<PostData> = [
         image: '',
         alt: '',
     },
+    {
+        headline: 'Avoid These Laravel Upgrade Mistakes',
+        description: 'Tips on how to safely and efficiently upgrade an out-of-date Laravel app',
+        slug: 'avoid-these-laravel-upgrade-mistakes',
+        image: '',
+        alt: '',
+    },
 ]
 
 export const modifyLink: string = (slug: string) => {

pages/posts/avoid-these-laravel-upgrade-mistakes.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { getDetails, modifyImageLink } from '~/datas/posts'
+
+const slug = 'avoid-these-laravel-upgrade-mistakes'
+
+const [ post, SEOMeta ] = getDetails(slug)
+
+useSeoMeta(SEOMeta)
+</script>
+
+<template>
+    <article>
+        <FontsHeaderOne>
+            {{ post.headline }}
+        </FontsHeaderOne>
+
+        <FontsIntroduction>
+            New features requirements keep coming in but doesn't have time for optimization and our code becoming a legacy eventually.
+            It is important to follow framework upgrade so that our code will be regularly update too, even though it is time consuming, costly and risky.
+        </FontsIntroduction>
+
+        <FontsParagraph>
+            The secret is not to delay it... Why?
+        </FontsParagraph>
+
+        <FontsList :lists="[
+            'Security - FIX the vulnerabilities and loopholes.',
+            'Reduce Technical Debt - REFACTOR the legacy code as software evolves and adds more features.',
+            'Performance - SPEED UP your application will make your customer happy.'
+        ]" />
+
+        <FontsParagraph>
+            Upgrading Laravel version, similar like upgrading any other software, can be a complicated and complex process, of course depend on the code structure.
+            So how to avoid making any mistake during the upgrade process?
+        </FontsParagraph>
+
+        <FontsHeaderTwo>
+            #1. Ignoring the Documentation
+        </FontsHeaderTwo>
+
+        <FontsParagraph>
+            One of the most common mistakes developers tend to make is overlooking the official Laravel upgrade <FontsLink href="https://laravel.com/docs/10.x/upgrade">documentation</FontsLink>.
+            Thanks to the core team, Laravel's documentation has a comprehensive and developer-friendly guide includes the changes in each version, a possible issues we may encounter with respective solutions.
+        </FontsParagraph>
+
+        <FontsParagraph>            
+            The upgrade guide are provide in three level of impact - high, medium, and low - in which help the upgrade process smoothly and allow you to focus which issues that might have breaking changes.
+            Thus, it is essential to take time to understand the upgrade guide first before start.
+        </FontsParagraph>
+
+        <FontsHeaderTwo>
+            #2. Jump to major version upgrade
+        </FontsHeaderTwo>
+
+        <FontsParagraph>
+            The second mistake is jumping directly to a major version upgrade without considering the incremental upgrades of each version.
+            As the upgrade guide has provided a comprehensive steps, sometime we might missed out some changes that could potentially break the application if not properly managed.
+            It is advisable to gradually upgrade of each version to make sure the application is stable before moving to the next version. 
+        </FontsParagraph>
+
+        <FontsHeaderTwo>
+            #3. Overlooking Unknown Error Messages
+        </FontsHeaderTwo>
+
+        <FontsParagraph>
+            Another common mistake after Laravel upgrade is overlooking or ignoring unknown error messages.
+            These error messages are not merely obstacles to be ignored; they might be an important indicators of upgrade issues that need to be resolve.
+            Simply bypassing these error messages could result in more serious issues down the line, and could potentially lead to unstable or even unusable.
+        </FontsParagraph>
+
+        <FontsClosing>
+            To be a great developer is to read documentation.
+            Even though documentation is not our forte but it's very important as this is the only communication medium that have solid and clear instructions between developer.
+            Or can use Laravel Shift to automate upgrade process.
+        </FontsClosing>
+    </article>
+</template>