The latest articles on DEV Community by danpacho (@danpacho). https://dev.to/danpacho 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%2F574694%2F46225720-2328-48c5-90f4-7671946a208e.png https://dev.to/danpacho en danpacho Fri, 30 Dec 2022 16:23:43 +0000 https://dev.to/danpacho/do-you-want-fully-typed-tailwind-976 https://dev.to/danpacho/do-you-want-fully-typed-tailwind-976 <p><strong>Halo <code>tailwind</code> &amp; <code>Typescript</code> lovers!</strong> </p> <p>Do you want to combine tailwind with typescript? Shortly, Fully typed classname for tailwindcss!</p> <p><strong>Introducing the <a href="https://github.com/danpacho/tailwindest" rel="noopener noreferrer">tailwindest library</a> that combines <code>tailwind</code> with <code>Typescript</code>!</strong> </p> <p>With this package, you can enjoy both the <strong>benefits of CSS in JS</strong> and <code>tailwindcss</code>!</p> <p>I'm really happy to think that developers will enjoy using it! </p> <p>Thank you for reading! Comments are always welcome👍<br> <strong>Have a happy end of the year! And Happy coding!</strong></p> emptystring danpacho Thu, 04 Aug 2022 03:25:00 +0000 https://dev.to/danpacho/all-in-one-nextjs-blog-template-3o0h https://dev.to/danpacho/all-in-one-nextjs-blog-template-3o0h <h1> Introducing Projects 😃 </h1> <blockquote> <p>Visit <a href="https://next-your-home-guide.vercel.app">Next Your Home Guide</a>, built with this template!</p> </blockquote> <h2> Inspiration 🧐 </h2> <p>I always think that writing is the best practice to fully absorb knowledge. But it was always difficult to make writing a habit. In order to make good writing habits, I thought making the best environment for writing is first. </p> <p>After a long time of effort, I was able to create the blog environment that I wanted.</p> <blockquote> <p>Easy to start, Reliable, Rich Feature and Fast Blog!</p> </blockquote> <h2> Demo of project 🎉 </h2> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--OlLJSoCu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/38n9hp9qnhvj5x2c3kbk.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--OlLJSoCu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/38n9hp9qnhvj5x2c3kbk.png" alt="dark-theme main page" width="880" height="510"></a></p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--eWvvwOjz--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8j2taw8kosfp5792516z.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--eWvvwOjz--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8j2taw8kosfp5792516z.png" alt="dark-theme mobile page" width="766" height="1520"></a></p> <p>I'm very happy about result of blog 🙂</p> <h2> Goal of project ✅ </h2> <h3> Tech 🛠 </h3> <ol> <li>Create a blog that anyone who's experienced development can start regardless of their skills.</li> <li>Performance and Maintenance.</li> <li>Add the features that are not supported on existing writing platforms.</li> </ol> <h3> Design 🏛 </h3> <ol> <li>Taking off the consistent design that pursues simplicity and create different feelings.</li> <li>Content-Focused design</li> <li>Separates profiles into their own pages.</li> <li>Reduce fatigue by improving text access through pagination and reducing vertical scrolls.</li> <li>Categories, Series, and Tag based navigation.</li> <li>Easy to navigate posts</li> <li>Selectable Colors</li> <li>Familiar blogging UX</li> </ol> <h2> How it was built ⚙️ </h2> <ol> <li>language 📜: <code>typescript</code> </li> <li>framework 📦: <code>NextJs</code> </li> <li>styling 💅: <code>styled-components</code> </li> <li>markup 📒: <code>mdx</code> </li> </ol> <h2> Rich Feature List 🏖 </h2> <ol> <li> <code>Light</code>/<code>Dark</code> mode full support</li> <li>Integrate Profile with full feature of <code>mdx</code> </li> <li>Table of content on <code>desktop</code>/<code>mobile</code> </li> <li>Image optimization with <code>next/image</code> </li> <li>Automatic image size support for <code>static</code>/<code>external</code> </li> <li>Automatic pagination</li> <li>Recover scroll position when navigating to previous page</li> <li>Analyze visitors with <code>Google Analytics</code>! Run it on the <code>partytown🎉</code> thread and get the performance <a href="https://partytown.builder.io">(partytown 🔎)</a> </li> <li>Support <code>sitemap</code>, <code>rss</code> generation on build</li> <li>Math <code>katex</code> support (optional)</li> <li>Automatic post refreshing in <code>dev</code> mode</li> <li>Specific <code>error</code> informations about blog posts</li> <li>Decent <code>code</code> block with code copy <code>button</code> </li> </ol> <p>etc...</p> <h1> How to Start? 🙌 </h1> <p>Visit <a href="https://github.com/danpacho/next-your-home">GitHub repo</a> or Click the <a href="https://next-your-home-guide.vercel.app">Next your home guide</a> to start your writing journey!</p> <p>I wrote down the kind explanation from start to finish!</p> <h1> Thank you for reading! </h1> <p>I hope it is useful for the blog starter😃</p> beginners nextjs opensource showdev