The latest articles on DEV Community by Magombe Kenneth David (@kennethdavid760). https://dev.to/kennethdavid760 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%2F1329406%2Fe8588c04-f5f5-497b-b0f2-5b9965f870d8.png https://dev.to/kennethdavid760 en Magombe Kenneth David Tue, 28 Oct 2025 19:33:02 +0000 https://dev.to/kennethdavid760/ecomerce-fullstack-platform-48f https://dev.to/kennethdavid760/ecomerce-fullstack-platform-48f <h1> UG Mart: My Next.js E-commerce Project </h1> <p>Hey Dev.to community! 👋</p> <p>I just finished building <strong>UG Mart</strong>, an e-commerce platform to practice modern web development.</p> <h2> 🔗 Live Site </h2> <p>Check it out: <a href="https://ecomerce-2-p66h.vercel.app" rel="noopener noreferrer">https://ecomerce-2-p66h.vercel.app</a></p> <h2> 🛠️ What I Built </h2> <p>A full-featured online store with:</p> <ul> <li>Product browsing with filters (price, category, brand, size)</li> <li>Shopping cart with local storage persistence</li> <li>User authentication &amp; accounts</li> <li>Admin dashboard for product management</li> <li>Responsive design that works on all devices</li> </ul> <h2> 💻 Tech Stack </h2> <ul> <li> <strong>Next.js 14</strong> - Using the new App Router</li> <li> <strong>TypeScript</strong> - For type safety</li> <li> <strong>Zustand</strong> - Lightweight state management</li> <li> <strong>Tailwind CSS</strong> - For styling</li> <li> <strong>shadcn/ui</strong> - For UI components</li> </ul> <h2> 🎯 What I Learned </h2> <p>This project helped me understand:</p> <ul> <li>Next.js 14 App Router and Server Components</li> <li>Complex filtering and pagination logic</li> <li>State persistence with Zustand</li> <li>SEO optimization with metadata API</li> <li>Image optimization</li> </ul> <h2> 💭 Feedback Welcome! </h2> <p>This is a portfolio project, so I'd love your feedback:</p> <ul> <li>What features would you add?</li> <li>Any bugs you spot?</li> <li>Performance issues?</li> </ul> <p>Drop a comment below! 👇</p> <p><em>Tags: #nextjs #typescript #webdev #showdev #react</em></p> webdev programming nextjs prisma Magombe Kenneth David Sun, 19 Jan 2025 19:52:23 +0000 https://dev.to/kennethdavid760/-ultimate-guide-to-font-categories-mastering-typography-for-a-successful-design-career-3mn0 https://dev.to/kennethdavid760/-ultimate-guide-to-font-categories-mastering-typography-for-a-successful-design-career-3mn0 <h2> Introduction </h2> <p>Typography is the backbone of visual communication, with fonts serving as powerful tools that can make or break a design. While thousands of fonts exist, understanding how they shape our visual world and influence reader perception provides the basis for making informed typographic choices. Research shows that font choices affect everything from reading comprehension to brand perception and purchasing decisions.</p> <h2> Serif Fonts: </h2> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F662qt0snplyirzypwrbl.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F662qt0snplyirzypwrbl.png" alt="Image description" width="800" height="450"></a></p> <p>Serif fonts are distinguished by their small decorative strokes (called serifs) that extend from the main lines of letters. These tiny details aren't just for beautification, but they create a subtle horizontal line that guides the reader's eye across text, enhancing readability in printed materials.</p> <h3> The Science of Serifs </h3> <ul> <li>Reduces eye strain during extended reading</li> <li>Improves reading speed in printed materials</li> <li>Creates natural spacing between letters and words</li> <li>Helps maintain focus across long lines of text</li> </ul> <h3> Best Industry Applications </h3> <ul> <li>Publishing: Books, newspapers, and magazines benefit from serifs' superior readability in long-form text</li> <li>Legal and Financial Documents: The traditional appearance conveys authority and trustworthiness</li> <li>Academic Writing: Research papers and educational materials often require the formality serifs provide</li> <li>Luxury Brands: High-end products leverage serifs' classical associations</li> </ul> <h3> Notable Serif Families </h3> <ul> <li>Times New Roman: The industry standard for professional documents</li> <li>Garamond: Elegant and highly readable, perfect for books</li> <li>Baskerville: Known for its sharp contrast and refined appearance</li> <li>Georgia: Designed specifically for digital readability while maintaining serif characteristics</li> </ul> <h3> Real-World Examples </h3> <ol> <li><strong>The New York Times</strong></li> <li>Primary font: Georgia</li> <li>Usage: Both print and digital body text</li> <li>Why it works: Maintains authority while offering excellent readability across platforms</li> <li><p>Supporting fonts: Franklin Gothic (sans-serif) for headlines creates perfect contrast</p></li> <li><p><strong>Financial Documents: Goldman Sachs Reports</strong></p></li> <li><p>Primary font: Minion Pro</p></li> <li><p>Usage: Annual reports and investor communications</p></li> <li><p>Why it works: Conveys trust while remaining highly readable in dense financial tables</p></li> </ol> <h2> Sans-Serif Fonts: </h2> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5wrc6f8dqmcahk7i17p6.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5wrc6f8dqmcahk7i17p6.png" alt="Image description" width="600" height="375"></a></p> <p>"Sans-serif" literally means "without serifs." These fonts strip away decorative elements in favour of clean, straightforward lines. This simplicity makes them highly adaptable and exceptionally readable on digital screens.</p> <h3> Digital Optimization Benefits </h3> <ul> <li>Clear legibility at small sizes</li> <li>Excellent screen rendering across resolutions</li> <li>Ideal for responsive designs</li> <li>Reduced visual noise in complex interfaces</li> </ul> <h3> Best Industry Applications </h3> <ul> <li>Digital Interfaces: Websites, apps, and software benefit from their clarity at various screen sizes</li> <li>Corporate Communications: Modern businesses choose sans-serifs for their contemporary feel</li> <li>Information Design: Charts, graphs, and data visualization work well with their clean lines</li> <li>Responsive Design: Their simplicity makes them ideal for designs that must work across multiple devices</li> </ul> <h3> Notable Sans-Serif Families </h3> <ul> <li>Helvetica: The quintessential modern font, beloved by designers worldwide</li> <li>Arial: Microsoft's workhorse font, designed for universal compatibility</li> <li>Futura: Geometric perfection meets timeless style</li> <li>Inter: Optimized for modern screen displays and user interfaces</li> </ul> <h3> Real-World Examples </h3> <ol> <li><strong>Apple's Interface Design</strong></li> <li>Primary font: SF Pro (custom San Francisco)</li> <li>Usage: Operating system and digital interfaces</li> <li><p>Why it works: Maintains clarity at all sizes across devices</p></li> <li><p><strong>Google's Material Design</strong></p></li> <li><p>Primary font: Roboto</p></li> <li><p>Usage: Android system and Google apps</p></li> <li><p>Why it works: Optimized for multiple screen densities</p></li> <li><p>Implementation: Different weights create hierarchy without changing fonts</p></li> </ol> <h2> Script Fonts: </h2> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8dpif2ivz2qy7shaangr.jpeg" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8dpif2ivz2qy7shaangr.jpeg" alt="Image description" width="275" height="183"></a></p> <p>Script fonts capture the organic flow of handwriting, ranging from casual hand-lettering to formal calligraphy. While beautiful, they require careful consideration as their decorative nature can impact readability.</p> <h3> Understanding Script Dynamics </h3> <ul> <li>Letter connections must flow naturally</li> <li>Size affects readability significantly</li> <li>Spacing and kerning are crucial</li> <li>Best used in limited quantities</li> </ul> <h3> Best Industry Applications </h3> <ul> <li>Event Design: Wedding invitations, greeting cards, and formal announcements</li> <li>Brand Signatures: Logos and wordmarks for brands wanting to convey personality</li> <li>Food &amp; Beverage: Restaurants, cafes, and artisanal products often use scripts to convey craftsmanship</li> <li>Fashion: Luxury and personal care brands leverage scripts' elegant associations</li> </ul> <h3> Notable Script Families </h3> <ul> <li>Copperplate: The standard for formal invitations</li> <li>Buttermilk: A versatile modern script suitable for diverse applications</li> <li>Great Vibes: Elegant without being overly ornate</li> <li>Brush Script MT: A classic casual script that maintains readability</li> </ul> <h3> Real-World Examples </h3> <ol> <li><strong>Coca-Cola</strong></li> </ol> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2g8rcwnefuvytnf2ll5h.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2g8rcwnefuvytnf2ll5h.png" alt="Image description" width="275" height="183"></a></p> <ul> <li>Custom script font: Spencerian Script</li> <li>Usage: Primary logo and brand identity</li> <li>Why it works: Instantly recognizable, conveys heritage and authenticity</li> </ul> <ol> <li><strong>Wedding Industry Applications</strong></li> </ol> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkad96nvhudkhftfvqb3r.jpeg" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkad96nvhudkhftfvqb3r.jpeg" alt="Image description" width="275" height="183"></a></p> <ul> <li>Font: Bellissima Script Pro</li> <li>Usage: Invitation suites and event materials</li> <li>Why it works: Formal yet romantic, maintains readability at various sizes</li> </ul> <h2> Practical Application Tips </h2> <h3> 1. Font Pairing Examples That Work </h3> <ul> <li>Corporate Website: Playfair Display (serif) headers with Open Sans (sans-serif) body</li> <li>E-commerce: Montserrat Bold (sans-serif) product names with Lora (serif) descriptions</li> <li>Restaurant Menu: Bickham Script Pro (script) name with Garamond Premier Pro (serif) headers</li> </ul> <h3> 2. Typography Size Relationships </h3> <p>Website Hierarchy Example:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>H1: 36px / 44px line height H2: 28px / 36px line height H3: 24px / 32px line height Body: 16px / 24px line height Caption: 14px / 20px line height </code></pre> </div> <h3> 3. Accessibility Considerations </h3> <ul> <li>Maintain sufficient contrast ratios</li> <li>Ensure adequate letter spacing</li> <li>Consider dyslexia-friendly options</li> <li>Test readability for vision-impaired users</li> </ul> <h2> Conclusion </h2> <p>Understanding these three fundamental font categories provides a solid foundation for making informed typographic choices. Success in typography isn't just about choosing the right category; it's about understanding how different fonts work together to create clear visual hierarchies and enhance communication.</p> Magombe Kenneth David Thu, 26 Sep 2024 16:32:39 +0000 https://dev.to/kennethdavid760/image21-39c7 https://dev.to/kennethdavid760/image21-39c7 <p><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%2Fq5z14fk3bkf03p1e67nf.png" class="article-body-image-wrapper"><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%2Fq5z14fk3bkf03p1e67nf.png" alt="Image description" width="558" height="128"></a></p> Magombe Kenneth David Thu, 26 Sep 2024 16:31:27 +0000 https://dev.to/kennethdavid760/image19-23ii https://dev.to/kennethdavid760/image19-23ii <p><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%2Fmn7tr2uo0vk7quc8ot58.png" class="article-body-image-wrapper"><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%2Fmn7tr2uo0vk7quc8ot58.png" alt="Image description" width="800" height="366"></a></p> Magombe Kenneth David Thu, 26 Sep 2024 16:28:52 +0000 https://dev.to/kennethdavid760/image18-1l59 https://dev.to/kennethdavid760/image18-1l59 <p><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%2Fswn89i7vze46ov993ve8.png" class="article-body-image-wrapper"><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%2Fswn89i7vze46ov993ve8.png" alt="Image description" width="594" height="426"></a></p> Magombe Kenneth David Thu, 26 Sep 2024 16:27:49 +0000 https://dev.to/kennethdavid760/image17-24b4 https://dev.to/kennethdavid760/image17-24b4 <p><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%2Fy9yfeolmuqa4v3o8d2ce.png" class="article-body-image-wrapper"><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%2Fy9yfeolmuqa4v3o8d2ce.png" alt="Image description" width="800" height="418"></a></p> Magombe Kenneth David Thu, 26 Sep 2024 16:25:55 +0000 https://dev.to/kennethdavid760/image16-5la https://dev.to/kennethdavid760/image16-5la <p><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%2Fxi9unlh1mc5khdnqsno3.png" class="article-body-image-wrapper"><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%2Fxi9unlh1mc5khdnqsno3.png" alt="Image description" width="662" height="254"></a></p> Magombe Kenneth David Thu, 26 Sep 2024 16:24:17 +0000 https://dev.to/kennethdavid760/image15-12h5 https://dev.to/kennethdavid760/image15-12h5 <p><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%2Fal0kjkevcrhjsr3n9f98.png" class="article-body-image-wrapper"><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%2Fal0kjkevcrhjsr3n9f98.png" alt="Image description" width="800" height="331"></a></p> Magombe Kenneth David Thu, 26 Sep 2024 16:23:18 +0000 https://dev.to/kennethdavid760/image14-19hb https://dev.to/kennethdavid760/image14-19hb <p><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%2F70czevzr4ql2n0qjedbq.png" class="article-body-image-wrapper"><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%2F70czevzr4ql2n0qjedbq.png" alt="Image description" width="800" height="186"></a></p> Magombe Kenneth David Thu, 26 Sep 2024 16:02:19 +0000 https://dev.to/kennethdavid760/image13-3emo https://dev.to/kennethdavid760/image13-3emo <p><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%2Fxwm2ypi0qmo44clh991g.png" class="article-body-image-wrapper"><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%2Fxwm2ypi0qmo44clh991g.png" alt="Image description" width="800" height="418"></a></p> Magombe Kenneth David Thu, 26 Sep 2024 15:49:01 +0000 https://dev.to/kennethdavid760/image20-3g7c https://dev.to/kennethdavid760/image20-3g7c <p><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%2Fr4hacs3tmlw13whh3rry.png" class="article-body-image-wrapper"><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%2Fr4hacs3tmlw13whh3rry.png" alt="Image description" width="800" height="363"></a></p> Magombe Kenneth David Thu, 26 Sep 2024 15:45:53 +0000 https://dev.to/kennethdavid760/image12-4ph4 https://dev.to/kennethdavid760/image12-4ph4 <p><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%2Fa0ccmerom82r8qufs7fk.png" class="article-body-image-wrapper"><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%2Fa0ccmerom82r8qufs7fk.png" alt="Image description" width="800" height="349"></a></p>