The latest articles on DEV Community by Lindsey Howard (@codelikeagirl29). https://dev.to/codelikeagirl29 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%2F483938%2F35ae3dc1-c56d-4d3d-870a-adcbe4af7a17.jpg https://dev.to/codelikeagirl29 en Lindsey Howard Sun, 17 Nov 2024 17:07:53 +0000 https://dev.to/codelikeagirl29/10-tips-to-level-up-your-programming-journey-1jf3 https://dev.to/codelikeagirl29/10-tips-to-level-up-your-programming-journey-1jf3 <p>Whether you're a seasoned developer or just starting your programming journey, there’s always something new to learn. Here are 10 practical tips to help you become a better programmer, stay motivated, and have fun along the way!</p> <h2> 1. <strong>Master the Fundamentals</strong> </h2> <p>Before diving into advanced topics, ensure you have a strong grasp of the basics:</p> <ul> <li>Understand data structures like arrays, lists, and hash maps.</li> <li>Learn how algorithms like sorting and searching work.</li> <li>Master the syntax and core concepts of your programming language of choice.</li> </ul> <p>✨ <strong>Tip</strong>: Practice implementing algorithms from scratch—it’s a great way to solidify your understanding.</p> <h2> 2. <strong>Work on Real-World Projects</strong> </h2> <p>Books and tutorials are helpful, but nothing beats hands-on experience. Build projects that solve real problems or align with your passions. Examples:</p> <ul> <li>Create a to-do app to learn CRUD operations.</li> <li>Build a weather dashboard using a public API.</li> <li>Automate a task you frequently perform.</li> </ul> <p>✨ <strong>Tip</strong>: Start small and iterate. A simple project can evolve into something amazing!</p> <h2> 3. <strong>Understand the "Why" Behind the Code</strong> </h2> <p>It's easy to copy and paste solutions, but take the time to understand why something works. Dig into:</p> <ul> <li>Why a certain algorithm is faster.</li> <li>Why your code behaves unexpectedly (debugging is key!).</li> <li>Why a particular framework or library is used over another.</li> </ul> <p>✨ <strong>Tip</strong>: Write comments explaining your logic—it forces you to think deeply about your code.</p> <h2> 4. <strong>Learn Git and Version Control</strong> </h2> <p>Version control systems like Git are essential for collaboration and tracking changes. At a minimum, learn:</p> <ul> <li>How to create repositories.</li> <li>Basic commands like <code>commit</code>, <code>push</code>, and <code>pull</code>.</li> <li>Branching and merging workflows.</li> </ul> <p>✨ <strong>Tip</strong>: Platforms like GitHub also allow you to showcase your projects—build that portfolio!</p> <h2> 5. <strong>Read Other People's Code</strong> </h2> <p>You can learn a lot by reviewing well-written code. Explore open-source projects, or review code from peers. Look for:</p> <ul> <li>Patterns in how functions and files are organized.</li> <li>How they handle edge cases and errors.</li> <li>What makes the code readable and maintainable.</li> </ul> <p>✨ <strong>Tip</strong>: Contributing to open-source projects is a win-win: you learn while helping others.</p> <h2> 6. <strong>Don't Just Code—Refactor</strong> </h2> <p>Writing code is only half the battle. Revisiting and improving your code makes it more efficient and maintainable. Focus on:</p> <ul> <li>Reducing repetition (DRY principle).</li> <li>Breaking down large functions into smaller ones.</li> <li>Improving readability with meaningful variable and function names.</li> </ul> <p>✨ <strong>Tip</strong>: Set aside time to refactor old projects—it’s a rewarding exercise!</p> <h2> 7. <strong>Get Comfortable With Debugging</strong> </h2> <p>Debugging is an art and an essential skill for every programmer. Use tools and techniques to make your debugging sessions more effective:</p> <ul> <li>Learn to use a debugger (like Chrome DevTools or IDE debuggers).</li> <li>Add meaningful logs to your application.</li> <li>Break down the problem into smaller, testable pieces.</li> </ul> <p>✨ <strong>Tip</strong>: Embrace bugs—they’re opportunities to learn!</p> <h2> 8. <strong>Learn About Software Architecture</strong> </h2> <p>Understanding how software components interact can elevate your skills:</p> <ul> <li>Explore concepts like MVC, REST APIs, and microservices.</li> <li>Learn about database design and how to structure data.</li> <li>Understand the lifecycle of a request in a web application.</li> </ul> <p>✨ <strong>Tip</strong>: Build a project using a full stack—frontend, backend, and database.</p> <h2> 9. <strong>Stay Curious and Keep Learning</strong> </h2> <p>The tech world evolves quickly. Stay on top of new trends, frameworks, and tools by:</p> <ul> <li>Reading blogs and articles (like this one!).</li> <li>Following developers on platforms like Twitter, GitHub, or LinkedIn.</li> <li>Experimenting with new languages or frameworks.</li> </ul> <p>✨ <strong>Tip</strong>: Dedicate a small portion of your time each week to learning something new.</p> <h2> 10. <strong>Join the Programming Community</strong> </h2> <p>Programming is better when shared. Engage with the community to grow and gain inspiration:</p> <ul> <li>Join forums like Dev.to, Stack Overflow, or Reddit.</li> <li>Attend meetups, hackathons, or webinars.</li> <li>Pair program with others to learn collaboratively.</li> </ul> <p>✨ <strong>Tip</strong>: Share your own journey through blogs, videos, or tutorials—it’s an incredible way to reinforce what you know.</p> <h2> Final Thoughts 💻 </h2> <p>Programming is a journey, not a destination. Celebrate your small wins, be patient with yourself, and remember: every great programmer started as a beginner.</p> <p>What’s your favorite tip for leveling up your skills? Share it in the comments below! 🌟</p> <p><em>Want more programming tips and tutorials? Follow me for updates on cool projects, coding challenges, and more! Happy coding! 🎉</em></p> programming development Lindsey Howard Mon, 25 Dec 2023 21:06:24 +0000 https://dev.to/codelikeagirl29/badges-for-markdown-1d5n https://dev.to/codelikeagirl29/badges-for-markdown-1d5n <p>Here are a few of my favorite Markdown badges to use for my Github <strong>README</strong></p> <p>There's also a couple of README generators that I use:</p> <p><a href="https://readme.so/" rel="noopener noreferrer">readme.so</a></p> <p><a href="https://makeareadme.com" rel="noopener noreferrer">Make a README</a></p> <p><a href="https://readme-gen.vercel.app/app" rel="noopener noreferrer">README gen</a></p> <h2> 👨 Social </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Badge</th> <th>URL</th> </tr> </thead> <tbody> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FAcademia-fff%3Fstyle%3Dfor-the-badge%26logo%3Dacademia%26logoColor%3Dblack" width="114" height="28"></td> <td><code>https://img.shields.io/badge/Academia-fff?style=for-the-badge&amp;logo=academia&amp;logoColor=black</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2F-Behance-blue%3Fstyle%3Dfor-the-badge%26logo%3Dbehance%26logoColor%3Dwhite" width="105" height="28"></td> <td><code>https://img.shields.io/badge/-Behance-blue?style=for-the-badge&amp;logo=behance&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fbio.link-000000%257D%3Fstyle%3Dfor-the-badge%26logo%3Dbiolink%26logoColor%3Dwhite" width="107" height="28"></td> <td><code>https://img.shields.io/badge/bio.link-000000%7D?style=for-the-badge&amp;logo=biolink&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FBitbucket-0747a6%3Fstyle%3Dfor-the-badge%26logo%3Dbitbucket%26logoColor%3Dwhite" width="119" height="28"></td> <td><code>https://img.shields.io/badge/Bitbucket-0747a6?style=for-the-badge&amp;logo=bitbucket&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2F%25D0%25B2%25D0%25BA%25D0%25BE%25D0%25BD%25D1%2582%25D0%25B0%25D0%25BA%25D1%2582%25D0%25B5-%25232E87FB.svg%3F%26style%3Dfor-the-badge%26logo%3Dvk%26logoColor%3Dwhite" width="123" height="28"></td> <td><code>https://img.shields.io/badge/вконтакте-%232E87FB.svg?&amp;style=for-the-badge&amp;logo=vk&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FCodechef-%2523B92B27.svg%3F%26style%3Dfor-the-badge%26logo%3DCodechef%26logoColor%3Dwhite" width="113" height="28"></td> <td><code>https://img.shields.io/badge/Codechef-%23B92B27.svg?&amp;style=for-the-badge&amp;logo=Codechef&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FCodeforces-445f9d%3Fstyle%3Dfor-the-badge%26logo%3DCodeforces%26logoColor%3Dwhite" width="130" height="28"></td> <td><code>https://img.shields.io/badge/Codeforces-445f9d?style=for-the-badge&amp;logo=Codeforces&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FCodepen-000000%3Fstyle%3Dfor-the-badge%26logo%3Dcodepen%26logoColor%3Dwhite" width="105" height="28"></td> <td><code>https://img.shields.io/badge/Codepen-000000?style=for-the-badge&amp;logo=codepen&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FCodewars-B1361E%3Fstyle%3Dfor-the-badge%26logo%3DCodewars%26logoColor%3Dwhite" width="118" height="28"></td> <td><code>https://img.shields.io/badge/Codewars-B1361E?style=for-the-badge&amp;logo=Codewars&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FDeviantArt-05CC47%3Fstyle%3Dfor-the-badge%26logo%3Ddeviantart%26logoColor%3Dwhite" width="129" height="28"></td> <td><code>https://img.shields.io/badge/DeviantArt-05CC47?style=for-the-badge&amp;logo=deviantart&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FDribbble-EA4C89%3Fstyle%3Dfor-the-badge%26logo%3Ddribbble%26logoColor%3Dwhite" width="111" height="28"></td> <td><code>https://img.shields.io/badge/Dribbble-EA4C89?style=for-the-badge&amp;logo=dribbble&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FElement-0DBD8B%3Fstyle%3Dfor-the-badge%26logo%3Delement%26logoColor%3Dwhite" width="103" height="28"></td> <td><code>https://img.shields.io/badge/Element-0DBD8B?style=for-the-badge&amp;logo=element&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FFacebook-1877F2%3Fstyle%3Dfor-the-badge%26logo%3Dfacebook%26logoColor%3Dwhite" width="114" height="28"></td> <td><code>https://img.shields.io/badge/Facebook-1877F2?style=for-the-badge&amp;logo=facebook&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FGitHub-100000%3Fstyle%3Dfor-the-badge%26logo%3Dgithub%26logoColor%3Dwhite" width="95" height="28"></td> <td><code>https://img.shields.io/badge/GitHub-100000?style=for-the-badge&amp;logo=github&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FGitLab-330F63%3Fstyle%3Dfor-the-badge%26logo%3Dgitlab%26logoColor%3Dwhite" width="93" height="28"></td> <td><code>https://img.shields.io/badge/GitLab-330F63?style=for-the-badge&amp;logo=gitlab&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FGoodreads-372213%3Fstyle%3Dfor-the-badge%26logo%3Dgoodreads%26logoColor%3Dwhite" width="126" height="28"></td> <td><code>https://img.shields.io/badge/Goodreads-372213?style=for-the-badge&amp;logo=goodreads&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FHackerEarth-%25232C3454.svg%3F%26style%3Dfor-the-badge%26logo%3DHackerEarth%26logoColor%3DBlue" width="140" height="28"></td> <td><code>https://img.shields.io/badge/HackerEarth-%232C3454.svg?&amp;style=for-the-badge&amp;logo=HackerEarth&amp;logoColor=Blue</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2F-Hackerrank-2EC866%3Fstyle%3Dfor-the-badge%26logo%3DHackerRank%26logoColor%3Dwhite" width="133" height="28"></td> <td><code>https://img.shields.io/badge/-Hackerrank-2EC866?style=for-the-badge&amp;logo=HackerRank&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FIconfinder-1A1B1F%3Fstyle%3Dfor-the-badge%26logo%3DIconfinder%26logoColor%3Dwhite" width="129" height="28"></td> <td><code>https://img.shields.io/badge/Iconfinder-1A1B1F?style=for-the-badge&amp;logo=Iconfinder&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FInstagram-E4405F%3Fstyle%3Dfor-the-badge%26logo%3Dinstagram%26logoColor%3Dwhite" width="123" height="28"></td> <td><code>https://img.shields.io/badge/Instagram-E4405F?style=for-the-badge&amp;logo=instagram&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FKaggle-20BEFF%3Fstyle%3Dfor-the-badge%26logo%3DKaggle%26logoColor%3Dwhite" width="95" height="28"></td> <td><code>https://img.shields.io/badge/Kaggle-20BEFF?style=for-the-badge&amp;logo=Kaggle&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2F-LeetCode-FFA116%3Fstyle%3Dfor-the-badge%26logo%3DLeetCode%26logoColor%3Dblack" width="111" height="28"></td> <td><code>https://img.shields.io/badge/-LeetCode-FFA116?style=for-the-badge&amp;logo=LeetCode&amp;logoColor=black</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FLinkedIn-0077B5%3Fstyle%3Dfor-the-badge%26logo%3Dlinkedin%26logoColor%3Dwhite" width="111" height="28"></td> <td><code>https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&amp;logo=linkedin&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Flinktree-39E09B%3Fstyle%3Dfor-the-badge%26logo%3Dlinktree%26logoColor%3Dwhite" width="110" height="28"></td> <td><code>https://img.shields.io/badge/linktree-39E09B?style=for-the-badge&amp;logo=linktree&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FMyanimelist-2E51A2%3Fstyle%3Dfor-the-badge%26logo%3Dmyanimelist%26logoColor%3Dwhite" width="137" height="28"></td> <td><code>https://img.shields.io/badge/Myanimelist-2E51A2?style=for-the-badge&amp;logo=myanimelist&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FPinterest-%2523E60023.svg%3F%26style%3Dfor-the-badge%26logo%3DPinterest%26logoColor%3Dwhite" width="118" height="28"></td> <td><code>https://img.shields.io/badge/Pinterest-%23E60023.svg?&amp;style=for-the-badge&amp;logo=Pinterest&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fpolywork-543DE0%3Fstyle%3Dfor-the-badge%26logo%3Dpolywork%26logoColor%3Dwhite" width="118" height="28"></td> <td><code>https://img.shields.io/badge/polywork-543DE0?style=for-the-badge&amp;logo=polywork&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FProfile%2520Visitors-172B4D%3Fstyle%3Dfor-the-badge%26logo%3DOpsgenie%26logoColor%3Dwhite" width="172" height="28"></td> <td><code>https://img.shields.io/badge/Profile%20Visitors-172B4D?style=for-the-badge&amp;logo=Opsgenie&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FQuora-%2523B92B27.svg%3F%26style%3Dfor-the-badge%26logo%3DQuora%26logoColor%3Dwhite" width="90" height="28"></td> <td><code>https://img.shields.io/badge/Quora-%23B92B27.svg?&amp;style=for-the-badge&amp;logo=Quora&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FReddit-FF4500%3Fstyle%3Dfor-the-badge%26logo%3Dreddit%26logoColor%3Dwhite" width="94" height="28"></td> <td><code>https://img.shields.io/badge/Reddit-FF4500?style=for-the-badge&amp;logo=reddit&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FResearch_Gate-00CCBB.svg%3F%26style%3Dfor-the-badge%26logo%3DResearchGate%26logoColor%3Dwhite" width="152" height="28"></td> <td><code>https://img.shields.io/badge/Research_Gate-00CCBB.svg?&amp;style=for-the-badge&amp;logo=ResearchGate&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FSignal-3A76F0%3Fstyle%3Dfor-the-badge%26logo%3Dsignal%26logoColor%3Dwhite" width="94" height="28"></td> <td><code>https://img.shields.io/badge/Signal-3A76F0?style=for-the-badge&amp;logo=signal&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FSnapchat-FFFC00%3Fstyle%3Dfor-the-badge%26logo%3Dsnapchat%26logoColor%3Dwhite" width="114" height="28"></td> <td><code>https://img.shields.io/badge/Snapchat-FFFC00?style=for-the-badge&amp;logo=snapchat&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2F-Sololearn-3a464b%3Fstyle%3Dfor-the-badge%26logo%3DSololearn%26logoColor%3Dwhite" width="122" height="28"></td> <td><code>https://img.shields.io/badge/-Sololearn-3a464b?style=for-the-badge&amp;logo=Sololearn&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FSourcetree-0052CC%3Fstyle%3Dfor-the-badge%26logo%3DSourcetree%26logoColor%3Dwhite" width="129" height="28"></td> <td><code>https://img.shields.io/badge/Sourcetree-0052CC?style=for-the-badge&amp;logo=Sourcetree&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FStackExchange-%2523ffffff.svg%3F%26style%3Dfor-the-badge%26logo%3DStackExchange%26logoColor%3Dwhite" width="157" height="28"></td> <td><code>https://img.shields.io/badge/StackExchange-%23ffffff.svg?&amp;style=for-the-badge&amp;logo=StackExchange&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FStack_Overflow-FE7A16%3Fstyle%3Dfor-the-badge%26logo%3Dstack-overflow%26logoColor%3Dwhite" width="164" height="28"></td> <td><code>https://img.shields.io/badge/Stack_Overflow-FE7A16?style=for-the-badge&amp;logo=stack-overflow&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fconnect-%252300843e.svg%3Fstyle%3Dfor-the-badge%26logo%3Dsymfony%26logoColor%3Dwhite" width="105" height="28"></td> <td><code>https://img.shields.io/badge/connect-%2300843e.svg?style=for-the-badge&amp;logo=symfony&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FTikTok-000000%3Fstyle%3Dfor-the-badge%26logo%3Dtiktok%26logoColor%3Dwhite" width="94" height="28"></td> <td><code>https://img.shields.io/badge/TikTok-000000?style=for-the-badge&amp;logo=tiktok&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FTumblr-%252336465D.svg%3F%26style%3Dfor-the-badge%26logo%3DTumblr%26logoColor%3Dwhite" width="97" height="28"></td> <td><code>https://img.shields.io/badge/Tumblr-%2336465D.svg?&amp;style=for-the-badge&amp;logo=Tumblr&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FTwitter-1DA1F2%3Fstyle%3Dfor-the-badge%26logo%3Dtwitter%26logoColor%3Dwhite" width="83" height="28"></td> <td><code>https://img.shields.io/badge/Twitter-1DA1F2?style=for-the-badge&amp;logo=twitter&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fxda%2520developers-2DAAE9%3Fstyle%3Dfor-the-badge%26logo%3Dxda-developers%26logoColor%3Dwhite" width="161" height="28"></td> <td><code>https://img.shields.io/badge/xda%20developers-2DAAE9?style=for-the-badge&amp;logo=xda-developers&amp;logoColor=white</code></td> </tr> </tbody> </table></div> <p>🔝 Back to Top</p> <h2> 🛒 Store </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Badge</th> <th>URL</th> </tr> </thead> <tbody> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FApp_Store-0D96F6%3Fstyle%3Dfor-the-badge%26logo%3Dapp-store%26logoColor%3Dwhite" width="117" height="28"></td> <td><code>https://img.shields.io/badge/App_Store-0D96F6?style=for-the-badge&amp;logo=app-store&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FF%2520Droid-1976D2%3Fstyle%3Dfor-the-badge%26logo%3Df-droid%26logoColor%3Dwhite" width="100" height="28"></td> <td><code>https://img.shields.io/badge/F%20Droid-1976D2?style=for-the-badge&amp;logo=f-droid&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FGoogle_Play-414141%3Fstyle%3Dfor-the-badge%26logo%3Dgoogle-play%26logoColor%3Dwhite" width="135" height="28"></td> <td><code>https://img.shields.io/badge/Google_Play-414141?style=for-the-badge&amp;logo=google-play&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FGUMROAD-36a9ae%3Fstyle%3Dfor-the-badge%26logo%3Dgumroad%26logoColor%3Dwhite" width="110" height="28"></td> <td><code>https://img.shields.io/badge/GUMROAD-36a9ae?style=for-the-badge&amp;logo=gumroad&amp;logoColor=white</code></td> </tr> </tbody> </table></div> <p>🔝 Back to Top</p> <h2> 💻 OS </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Badge</th> <th>URL</th> </tr> </thead> <tbody> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FAlpine_Linux-0D597F%3Fstyle%3Dfor-the-badge%26logo%3Dalpine-linux%26logoColor%3Dwhite" width="140" height="28"></td> <td><code>https://img.shields.io/badge/Alpine_Linux-0D597F?style=for-the-badge&amp;logo=alpine-linux&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FAndroid-3DDC84%3Fstyle%3Dfor-the-badge%26logo%3Dandroid%26logoColor%3Dwhite" width="106" height="28"></td> <td><code>https://img.shields.io/badge/Android-3DDC84?style=for-the-badge&amp;logo=android&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FArch_Linux-1793D1%3Fstyle%3Dfor-the-badge%26logo%3Darch-linux%26logoColor%3Dwhite" width="126" height="28"></td> <td><code>https://img.shields.io/badge/Arch_Linux-1793D1?style=for-the-badge&amp;logo=arch-linux&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FArtix_Linux-10A0CC%3Fstyle%3Dfor-the-badge%26logo%3Dartix-linux%26logoColor%3Dwhite" width="131" height="28"></td> <td><code>https://img.shields.io/badge/Artix_Linux-10A0CC?style=for-the-badge&amp;logo=artix-linux&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FCent%2520OS-262577%3Fstyle%3Dfor-the-badge%26logo%3DCentOS%26logoColor%3Dwhite" width="100" height="28"></td> <td><code>https://img.shields.io/badge/Cent%20OS-262577?style=for-the-badge&amp;logo=CentOS&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FDebian-A81D33%3Fstyle%3Dfor-the-badge%26logo%3Ddebian%26logoColor%3Dwhite" width="95" height="28"></td> <td><code>https://img.shields.io/badge/Debian-A81D33?style=for-the-badge&amp;logo=debian&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FDeepin-007CFF%3Fstyle%3Dfor-the-badge%26logo%3Ddeepin%26logoColor%3Dwhite" width="94" height="28"></td> <td><code>https://img.shields.io/badge/Deepin-007CFF?style=for-the-badge&amp;logo=deepin&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FElementary%2520OS-64BAFF%3Fstyle%3Dfor-the-badge%26logo%3Delementary%26logoColor%3Dwhite" width="153" height="28"></td> <td><code>https://img.shields.io/badge/Elementary%20OS-64BAFF?style=for-the-badge&amp;logo=elementary&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FFedora-294172%3Fstyle%3Dfor-the-badge%26logo%3Dfedora%26logoColor%3Dwhite" width="96" height="28"></td> <td><code>https://img.shields.io/badge/Fedora-294172?style=for-the-badge&amp;logo=fedora&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Ffreebsd-AB2B28%3Fstyle%3Dfor-the-badge%26logo%3Dfreebsd%26logoColor%3Dwhite" width="103" height="28"></td> <td><code>https://img.shields.io/badge/freebsd-AB2B28?style=for-the-badge&amp;logo=freebsd&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FGentoo-54487A%3Fstyle%3Dfor-the-badge%26logo%3Dgentoo%26logoColor%3Dwhite" width="98" height="28"></td> <td><code>https://img.shields.io/badge/Gentoo-54487A?style=for-the-badge&amp;logo=gentoo&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FiOS-000000%3Fstyle%3Dfor-the-badge%26logo%3Dios%26logoColor%3Dwhite" width="68" height="28"></td> <td><code>https://img.shields.io/badge/iOS-000000?style=for-the-badge&amp;logo=ios&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FKali_Linux-557C94%3Fstyle%3Dfor-the-badge%26logo%3Dkali-linux%26logoColor%3Dwhite" width="122" height="28"></td> <td><code>https://img.shields.io/badge/Kali_Linux-557C94?style=for-the-badge&amp;logo=kali-linux&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Flineageos-167C80%3Fstyle%3Dfor-the-badge%26logo%3Dlineageos%26logoColor%3Dwhite" width="120" height="28"></td> <td><code>https://img.shields.io/badge/lineageos-167C80?style=for-the-badge&amp;logo=lineageos&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FLinux-FCC624%3Fstyle%3Dfor-the-badge%26logo%3Dlinux%26logoColor%3Dblack" width="86" height="28"></td> <td><code>https://img.shields.io/badge/Linux-FCC624?style=for-the-badge&amp;logo=linux&amp;logoColor=black</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FLinux_Mint-87CF3E%3Fstyle%3Dfor-the-badge%26logo%3Dlinux-mint%26logoColor%3Dwhite" width="125" height="28"></td> <td><code>https://img.shields.io/badge/Linux_Mint-87CF3E?style=for-the-badge&amp;logo=linux-mint&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fmac%2520os-000000%3Fstyle%3Dfor-the-badge%26logo%3Dapple%26logoColor%3Dwhite" width="94" height="28"></td> <td><code>https://img.shields.io/badge/mac%20os-000000?style=for-the-badge&amp;logo=apple&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fmanjaro-35BF5C%3Fstyle%3Dfor-the-badge%26logo%3Dmanjaro%26logoColor%3Dwhite" width="107" height="28"></td> <td><code>https://img.shields.io/badge/manjaro-35BF5C?style=for-the-badge&amp;logo=manjaro&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FNixOS-5277C3%3Fstyle%3Dfor-the-badge%26logo%3Dnixos%26logoColor%3Dwhite" width="87" height="28"></td> <td><code>https://img.shields.io/badge/NixOS-5277C3?style=for-the-badge&amp;logo=nixos&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FOpenWrt-00B5E2%3Fstyle%3Dfor-the-badge%26logo%3DOpenWrt%26logoColor%3Dwhite" width="109" height="28"></td> <td><code>https://img.shields.io/badge/OpenWrt-00B5E2?style=for-the-badge&amp;logo=OpenWrt&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FPop%21_OS-48B9C7%3Fstyle%3Dfor-the-badge%26logo%3DPop%21_OS%26logoColor%3Dwhite" width="98" height="28"></td> <td><code>https://img.shields.io/badge/Pop!_OS-48B9C7?style=for-the-badge&amp;logo=Pop!_OS&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Freact%2520os-0088CC%3Fstyle%3Dfor-the-badge%26logo%3Dreactos%26logoColor%3Dwhite" width="109" height="28"></td> <td><code>https://img.shields.io/badge/react%20os-0088CC?style=for-the-badge&amp;logo=reactos&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FRed%2520Hat-EE0000%3Fstyle%3Dfor-the-badge%26logo%3Dredhat%26logoColor%3Dwhite" width="101" height="28"></td> <td><code>https://img.shields.io/badge/Red%20Hat-EE0000?style=for-the-badge&amp;logo=redhat&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FSailfish%2520OS-053766%3Fstyle%3Dfor-the-badge%26logo%3DSailfish%2520OS%26logoColor%3Dwhite" width="130" height="28"></td> <td><code>https://img.shields.io/badge/Sailfish%20OS-053766?style=for-the-badge&amp;logo=Sailfish%20OS&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FSUSE-0C322C%3Fstyle%3Dfor-the-badge%26logo%3DSUSE%26logoColor%3Dwhite" width="78" height="28"></td> <td><code>https://img.shields.io/badge/SUSE-0C322C?style=for-the-badge&amp;logo=SUSE&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FTails-56347C%3Fstyle%3Dfor-the-badge%26logo%3Dtails%26logoColor%3Dwhite" width="83" height="28"></td> <td><code>https://img.shields.io/badge/Tails%20-56347C?&amp;style=for-the-badge&amp;logo=tails&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FUbuntu-E95420%3Fstyle%3Dfor-the-badge%26logo%3Dubuntu%26logoColor%3Dwhite" width="98" height="28"></td> <td><code>https://img.shields.io/badge/Ubuntu-E95420?style=for-the-badge&amp;logo=ubuntu&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2F-Wear%2520OS-4285F4%3Fstyle%3Dfor-the-badge%26logo%3Dwear-os%26logoColor%3Dwhite" width="104" height="28"></td> <td><code>https://img.shields.io/badge/-Wear%20OS-4285F4?style=for-the-badge&amp;logo=wear-os&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FWindows-0078D6%3Fstyle%3Dfor-the-badge%26logo%3Dwindows%26logoColor%3Dwhite" width="92" height="28"></td> <td><code>https://img.shields.io/badge/Windows-0078D6?style=for-the-badge&amp;logo=windows&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FWindows_95-008080%3Fstyle%3Dfor-the-badge%26logo%3Dwindows-95%26logoColor%3Dwhite" width="114" height="28"></td> <td><code>https://img.shields.io/badge/Windows_95-008080?style=for-the-badge&amp;logo=windows-95&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FWindows_XP-003399%3Fstyle%3Dfor-the-badge%26logo%3Dwindows-xp%26logoColor%3Dwhite" width="114" height="28"></td> <td><code>https://img.shields.io/badge/Windows_XP-003399?style=for-the-badge&amp;logo=windows-xp&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FZorin%2520OS-0CC1F3%3Fstyle%3Dfor-the-badge%26logo%3Dzorin%26logoColor%3Dwhite" width="110" height="28"></td> <td><code>https://img.shields.io/badge/Zorin%20OS-0CC1F3?style=for-the-badge&amp;logo=zorin&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FopenSUSE-%252364B345%3Fstyle%3Dfor-the-badge%26logo%3DopenSUSE%26logoColor%3Dwhite" width="114" height="28"></td> <td><code>https://img.shields.io/badge/openSUSE-%2364B345?style=for-the-badge&amp;logo=openSUSE&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FWSL-0a97f5%3Fstyle%3Dfor-the-badge%26logo%3Dlinux%26logoColor%3Dwhite" width="71" height="28"></td> <td><code>https://img.shields.io/badge/WSL-0a97f5?style=for-the-badge&amp;logo=linux&amp;logoColor=white</code></td> </tr> </tbody> </table></div> <p>🔝 Back to Top</p> <h2> 📝 Blog </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Badge</th> <th>URL</th> </tr> </thead> <tbody> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FBlogger-FF5722%3Fstyle%3Dfor-the-badge%26logo%3Dblogger%26logoColor%3Dwhite" width="105" height="28"></td> <td><code>https://img.shields.io/badge/Blogger-FF5722?style=for-the-badge&amp;logo=blogger&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fdev.to-0A0A0A%3Fstyle%3Dfor-the-badge%26logo%3Ddevdotto%26logoColor%3Dwhite" width="92" height="28"></td> <td><code>https://img.shields.io/badge/dev.to-0A0A0A?style=for-the-badge&amp;logo=devdotto&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FGeeksforGeeks-298D46%3Fstyle%3Dfor-the-badge%26logo%3Dgeeksforgeeks%26logoColor%3Dwhite" width="155" height="28"></td> <td><code>https://img.shields.io/badge/GeeksforGeeks-298D46?style=for-the-badge&amp;logo=geeksforgeeks&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FGhost-000%3Fstyle%3Dfor-the-badge%26logo%3Dghost%26logoColor%3Dyellow" width="88" height="28"></td> <td><code>https://img.shields.io/badge/Ghost-000?style=for-the-badge&amp;logo=ghost&amp;logoColor=yellow</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FHashnode-2962FF%3Fstyle%3Dfor-the-badge%26logo%3Dhashnode%26logoColor%3Dwhite" width="117" height="28"></td> <td><code>https://img.shields.io/badge/Hashnode-2962FF?style=for-the-badge&amp;logo=hashnode&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FJoomla-5091CD%3Fstyle%3Dfor-the-badge%26logo%3Djoomla%26logoColor%3Dwhite" width="97" height="28"></td> <td><code>https://img.shields.io/badge/Joomla-5091CD?style=for-the-badge&amp;logo=joomla&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FMedium-12100E%3Fstyle%3Dfor-the-badge%26logo%3Dmedium%26logoColor%3Dwhite" width="98" height="28"></td> <td><code>https://img.shields.io/badge/Medium-12100E?style=for-the-badge&amp;logo=medium&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FMicro%2520blog-FF8800%3Fstyle%3Dfor-the-badge%26logo%3DMicrodotblog%26logoColor%3Dwhite" width="128" height="28"></td> <td><code>https://img.shields.io/badge/Micro%20blog-FF8800?style=for-the-badge&amp;logo=Microdotblog&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FRSS-FFA500%3Fstyle%3Dfor-the-badge%26logo%3Drss%26logoColor%3Dwhite" width="69" height="28"></td> <td><code>https://img.shields.io/badge/RSS-FFA500?style=for-the-badge&amp;logo=rss&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FWix-000%3Fstyle%3Dfor-the-badge%26logo%3Dwix%26logoColor%3Dwhite" width="71" height="28"></td> <td><code>https://img.shields.io/badge/Wix-000?style=for-the-badge&amp;logo=wix&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FWordpress-21759B%3Fstyle%3Dfor-the-badge%26logo%3Dwordpress%26logoColor%3Dwhite" width="127" height="28"></td> <td><code>https://img.shields.io/badge/Wordpress-21759B?style=for-the-badge&amp;logo=wordpress&amp;logoColor=white</code></td> </tr> </tbody> </table></div> <p>🔝 Back to Top</p> <h2> 🎞 Streaming </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Badge</th> <th>URL</th> </tr> </thead> <tbody> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FAmazon%2520Prime-00A8E1%3Fstyle%3Dfor-the-badge%26logo%3DAmazon%2520Prime%26logoColor%3Dwhite" width="148" height="28"></td> <td><code>https://img.shields.io/badge/Amazon%20Prime-00A8E1?style=for-the-badge&amp;logo=netflix&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FCrunchyroll-F47521%3Fstyle%3Dfor-the-badge%26logo%3Dcrunchyroll%26logoColor%3Dwhite" width="140" height="28"></td> <td><code>https://img.shields.io/badge/Crunchyroll-F47521?style=for-the-badge&amp;logo=crunchyroll&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FFacebook_Gaming-005FED%3Fstyle%3Dfor-the-badge%26logo%3Dfacebook-gaming%26logoColor%3Dwhite" width="173" height="28"></td> <td><code>https://img.shields.io/badge/Facebook_Gaming-005FED?style=for-the-badge&amp;logo=facebook-gaming&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FHulu-1CE783%3Fstyle%3Dfor-the-badge%26logo%3Dhulu%26logoColor%3Dwhite" width="59" height="28"></td> <td><code>https://img.shields.io/badge/Hulu-1CE783?style=for-the-badge&amp;logo=hulu&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FNetflix-E50914%3Fstyle%3Dfor-the-badge%26logo%3Dnetflix%26logoColor%3Dwhite" width="100" height="28"></td> <td><code>https://img.shields.io/badge/Netflix-E50914?style=for-the-badge&amp;logo=netflix&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FTwitch-9146FF%3Fstyle%3Dfor-the-badge%26logo%3Dtwitch%26logoColor%3Dwhite" width="96" height="28"></td> <td><code>https://img.shields.io/badge/Twitch-9146FF?style=for-the-badge&amp;logo=twitch&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FYouTube-FF0000%3Fstyle%3Dfor-the-badge%26logo%3Dyoutube%26logoColor%3Dwhite" width="105" height="28"></td> <td><code>https://img.shields.io/badge/YouTube-FF0000?style=for-the-badge&amp;logo=youtube&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FYouTube_Gaming-FF0000%3Fstyle%3Dfor-the-badge%26logo%3Dyoutube-gaming%26logoColor%3Dwhite" width="165" height="28"></td> <td><code>https://img.shields.io/badge/YouTube_Gaming-FF0000?style=for-the-badge&amp;logo=youtube-gaming&amp;logoColor=white</code></td> </tr> </tbody> </table></div> <p>🔝 Back to Top</p> <h2> 🚀 Skills </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Badge</th> <th>URL</th> </tr> </thead> <tbody> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FC%2523-239120%3Fstyle%3Dfor-the-badge%26logo%3Dc-sharp%26logoColor%3Dwhite" width="41" height="28"></td> <td><code>https://img.shields.io/badge/C%23-239120?style=for-the-badge&amp;logo=c-sharp&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FXamarin-3498DB%3Fstyle%3Dfor-the-badge%26logo%3Dxamarin%26logoColor%3Dwhite" width="86" height="28"></td> <td><code>https://img.shields.io/badge/Xamarin-3498DB?style=for-the-badge&amp;logo=xamarin&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FPython-3776AB%3Fstyle%3Dfor-the-badge%26logo%3Dpython%26logoColor%3Dwhite" width="97" height="28"></td> <td><code>https://img.shields.io/badge/Python-3776AB?style=for-the-badge&amp;logo=python&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FHTML-239120%3Fstyle%3Dfor-the-badge%26logo%3Dhtml5%26logoColor%3Dwhite" width="80" height="28"></td> <td><code>https://img.shields.io/badge/HTML-239120?style=for-the-badge&amp;logo=html5&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FCSS-239120%3Fstyle%3Dfor-the-badge%26logo%3Dcss3%26logoColor%3Dwhite" width="68" height="28"></td> <td><code>https://img.shields.io/badge/CSS-239120?&amp;style=for-the-badge&amp;logo=css3&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2F.NET-5C2D91%3Fstyle%3Dfor-the-badge%26logo%3D.net%26logoColor%3Dwhite" width="74" height="28"></td> <td><code>https://img.shields.io/badge/.NET-5C2D91?style=for-the-badge&amp;logo=.net&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FJavaScript-F7DF1E%3Fstyle%3Dfor-the-badge%26logo%3DJavaScript%26logoColor%3Dwhite" width="126" height="28"></td> <td><code>https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&amp;logo=JavaScript&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fp5%2520js-ED225D%3Fstyle%3Dfor-the-badge%26logo%3Dp5dotjs%26logoColor%3Dwhite" width="80" height="28"></td> <td><code>https://img.shields.io/badge/p5%20js-ED225D?style=for-the-badge&amp;logo=p5dotjs&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FReactiveX-B7178C%3Fstyle%3Dfor-the-badge%26logo%3DReactiveX%26logoColor%3Dwhite" width="119" height="28"></td> <td><code>https://img.shields.io/badge/ReactiveX-B7178C?style=for-the-badge&amp;logo=ReactiveX&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FScrollReveal-FFCB36%3Fstyle%3Dfor-the-badge%26logo%3DScrollReveal%26logoColor%3Dwhite" width="145" height="28"></td> <td><code>https://img.shields.io/badge/ScrollReveal-FFCB36?style=for-the-badge&amp;logo=ScrollReveal&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FNode.js-43853D%3Fstyle%3Dfor-the-badge%26logo%3Dnode.js%26logoColor%3Dwhite" width="100" height="28"></td> <td><code>https://img.shields.io/badge/Node.js-43853D?style=for-the-badge&amp;logo=node.js&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FHugo-FF4088%3Fstyle%3Dfor-the-badge%26logo%3Dhugo%26logoColor%3Dwhite" width="82" height="28"></td> <td><code>https://img.shields.io/badge/Hugo-FF4088?style=for-the-badge&amp;logo=hugo&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FCodinGame-F2BB13%3Fstyle%3Dfor-the-badge%26logo%3Dcodingame%26logoColor%3Dwhite" width="125" height="28"></td> <td><code>https://img.shields.io/badge/CodinGame-F2BB13?style=for-the-badge&amp;logo=codingame&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FCrowdsource-4285F4%3Fstyle%3Dfor-the-badge%26logo%3DCrowdsource%26logoColor%3Dwhite" width="145" height="28"></td> <td><code>https://img.shields.io/badge/Crowdsource-4285F4?style=for-the-badge&amp;logo=Crowdsource&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FHoppscotch-31C48D%3Fstyle%3Dfor-the-badge%26logo%3DHoppscotch%26logoColor%3Dwhite" width="132" height="28"></td> <td><code>https://img.shields.io/badge/Hoppscotch-31C48D?style=for-the-badge&amp;logo=Hoppscotch&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FLit-324FFF%3Fstyle%3Dfor-the-badge%26logo%3DLit%26logoColor%3Dwhite" width="65" height="28"></td> <td><code>https://img.shields.io/badge/Lit-324FFF?style=for-the-badge&amp;logo=Lit&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FTypeScript-007ACC%3Fstyle%3Dfor-the-badge%26logo%3Dtypescript%26logoColor%3Dwhite" width="126" height="28"></td> <td><code>https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&amp;logo=typescript&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FHTML5-E34F26%3Fstyle%3Dfor-the-badge%26logo%3Dhtml5%26logoColor%3Dwhite" width="88" height="28"></td> <td><code>https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&amp;logo=html5&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fts--node-3178C6%3Fstyle%3Dfor-the-badge%26logo%3Dts-node%26logoColor%3Dwhite" width="102" height="28"></td> <td><code>https://img.shields.io/badge/ts--node-3178C6?style=for-the-badge&amp;logo=ts-node&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FJSS-F7DF1E%3Fstyle%3Dfor-the-badge%26logo%3DJSS%26logoColor%3Dwhite" width="66" height="28"></td> <td><code>https://img.shields.io/badge/JSS-F7DF1E?style=for-the-badge&amp;logo=JSS&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FCSS3-1572B6%3Fstyle%3Dfor-the-badge%26logo%3Dcss3%26logoColor%3Dwhite" width="77" height="28"></td> <td><code>https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&amp;logo=css3&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FNode--Red-8F0000%3Fstyle%3Dfor-the-badge%26logo%3Dnodered%26logoColor%3Dwhite" width="113" height="28"></td> <td><code>https://img.shields.io/badge/Node--Red-8F0000?style=for-the-badge&amp;logo=nodered&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FSaas-CC6699%3Fstyle%3Dfor-the-badge%26logo%3Dsass%26logoColor%3Dwhite" width="78" height="28"></td> <td><code>https://img.shields.io/badge/Sass-CC6699?style=for-the-badge&amp;logo=sass&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FPython-14354C%3Fstyle%3Dfor-the-badge%26logo%3Dpython%26logoColor%3Dwhite" width="97" height="28"></td> <td><code>https://img.shields.io/badge/Python-14354C?style=for-the-badge&amp;logo=python&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FC-00599C%3Fstyle%3Dfor-the-badge%26logo%3Dc%26logoColor%3Dwhite" width="52" height="28"></td> <td><code>https://img.shields.io/badge/C-00599C?style=for-the-badge&amp;logo=c&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FC%252B%252B-00599C%3Fstyle%3Dfor-the-badge%26logo%3Dc%252B%252B%26logoColor%3Dwhite" width="71" height="28"></td> <td><code>https://img.shields.io/badge/C%2B%2B-00599C?style=for-the-badge&amp;logo=c%2B%2B&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FC%2523-239120%3Fstyle%3Dfor-the-badge%26logo%3Dc-sharp%26logoColor%3Dwhite" width="41" height="28"></td> <td><code>https://img.shields.io/badge/C%23-239120?style=for-the-badge&amp;logo=c-sharp&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FJava-ED8B00%3Fstyle%3Dfor-the-badge%26logo%3Dopenjdk%26logoColor%3Dwhite" width="77" height="28"></td> <td><code>https://img.shields.io/badge/Java-ED8B00?style=for-the-badge&amp;logo=openjdk&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FPHP-777BB4%3Fstyle%3Dfor-the-badge%26logo%3Dphp%26logoColor%3Dwhite" width="70" height="28"></td> <td><code>https://img.shields.io/badge/PHP-777BB4?style=for-the-badge&amp;logo=php&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FR-276DC3%3Fstyle%3Dfor-the-badge%26logo%3Dr%26logoColor%3Dwhite" width="52" height="28"></td> <td><code>https://img.shields.io/badge/R-276DC3?style=for-the-badge&amp;logo=r&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FSwift-FA7343%3Fstyle%3Dfor-the-badge%26logo%3Dswift%26logoColor%3Dwhite" width="87" height="28"></td> <td><code>https://img.shields.io/badge/Swift-FA7343?style=for-the-badge&amp;logo=swift&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FKotlin-0095D5%3Fstyle%3Dfor-the-badge%26logo%3Dkotlin%26logoColor%3Dwhite" width="94" height="28"></td> <td><code>https://img.shields.io/badge/Kotlin-0095D5?&amp;style=for-the-badge&amp;logo=kotlin&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FGo-00ADD8%3Fstyle%3Dfor-the-badge%26logo%3Dgo%26logoColor%3Dwhite" width="62" height="28"></td> <td><code>https://img.shields.io/badge/Go-00ADD8?style=for-the-badge&amp;logo=go&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FRuby-CC342D%3Fstyle%3Dfor-the-badge%26logo%3Druby%26logoColor%3Dwhite" width="79" height="28"></td> <td><code>https://img.shields.io/badge/Ruby-CC342D?style=for-the-badge&amp;logo=ruby&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FScala-DC322F%3Fstyle%3Dfor-the-badge%26logo%3Dscala%26logoColor%3Dwhite" width="86" height="28"></td> <td><code>https://img.shields.io/badge/Scala-DC322F?style=for-the-badge&amp;logo=scala&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FRust-000000%3Fstyle%3Dfor-the-badge%26logo%3Drust%26logoColor%3Dwhite" width="78" height="28"></td> <td><code>https://img.shields.io/badge/Rust-000000?style=for-the-badge&amp;logo=rust&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FMatter.js-4B5562%3Fstyle%3Dfor-the-badge%26logo%3DMatter.js%26logoColor%3Dwhite" width="116" height="28"></td> <td><code>https://img.shields.io/badge/Matter.js-4B5562?style=for-the-badge&amp;logo=Matter.js&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FDart-0175C2%3Fstyle%3Dfor-the-badge%26logo%3Ddart%26logoColor%3Dwhite" width="79" height="28"></td> <td><code>https://img.shields.io/badge/Dart-0175C2?style=for-the-badge&amp;logo=dart&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FLua-2C2D72%3Fstyle%3Dfor-the-badge%26logo%3Dlua%26logoColor%3Dwhite" width="69" height="28"></td> <td><code>https://img.shields.io/badge/Lua-2C2D72?style=for-the-badge&amp;logo=lua&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FPerl-39457E%3Fstyle%3Dfor-the-badge%26logo%3Dperl%26logoColor%3Dwhite" width="77" height="28"></td> <td><code>https://img.shields.io/badge/Perl-39457E?style=for-the-badge&amp;logo=perl&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FElixir-4B275F%3Fstyle%3Dfor-the-badge%26logo%3Delixir%26logoColor%3Dwhite" width="90" height="28"></td> <td><code>https://img.shields.io/badge/Elixir-4B275F?style=for-the-badge&amp;logo=elixir&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FMarkdown-000000%3Fstyle%3Dfor-the-badge%26logo%3Dmarkdown%26logoColor%3Dwhite" width="123" height="28"></td> <td><code>https://img.shields.io/badge/Markdown-000000?style=for-the-badge&amp;logo=markdown&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FShell_Script-121011%3Fstyle%3Dfor-the-badge%26logo%3Dgnu-bash%26logoColor%3Dwhite" width="139" height="28"></td> <td><code>https://img.shields.io/badge/Shell_Script-121011?style=for-the-badge&amp;logo=gnu-bash&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FExpress.js-404D59%3Fstyle%3Dfor-the-badge" width="102" height="28"></td> <td><code>https://img.shields.io/badge/Express.js-404D59?style=for-the-badge</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FGatsby-663399%3Fstyle%3Dfor-the-badge%26logo%3Dgatsby%26logoColor%3Dwhite" width="95" height="28"></td> <td><code>https://img.shields.io/badge/Gatsby-663399?style=for-the-badge&amp;logo=gatsby&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FReact-20232A%3Fstyle%3Dfor-the-badge%26logo%3Dreact%26logoColor%3D61DAFB" width="86" height="28"></td> <td><code>https://img.shields.io/badge/React-20232A?style=for-the-badge&amp;logo=react&amp;logoColor=61DAFB</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FReact_Native-20232A%3Fstyle%3Dfor-the-badge%26logo%3Dreact%26logoColor%3D61DAFB" width="141" height="28"></td> <td><code>https://img.shields.io/badge/React_Native-20232A?style=for-the-badge&amp;logo=react&amp;logoColor=61DAFB</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FSvelte-4A4A55%3Fstyle%3Dfor-the-badge%26logo%3Dsvelte%26logoColor%3DFF3E00" width="92" height="28"></td> <td><code>https://img.shields.io/badge/Svelte-4A4A55?style=for-the-badge&amp;logo=svelte&amp;logoColor=FF3E00</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FVue.js-35495E%3Fstyle%3Dfor-the-badge%26logo%3Dvue.js%26logoColor%3D4FC08D" width="89" height="28"></td> <td><code>https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge&amp;logo=vue.js&amp;logoColor=4FC08D</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FAngular-DD0031%3Fstyle%3Dfor-the-badge%26logo%3Dangular%26logoColor%3Dwhite" width="106" height="28"></td> <td><code>https://img.shields.io/badge/Angular-DD0031?style=for-the-badge&amp;logo=angular&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FAngularJS-E23237%3Fstyle%3Dfor-the-badge%26logo%3Dangularjs%26logoColor%3Dwhite" width="102" height="28"></td> <td><code>https://img.shields.io/badge/AngularJS-E23237?style=for-the-badge&amp;logo=angularjs&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FTailwind_CSS-38B2AC%3Fstyle%3Dfor-the-badge%26logo%3Dtailwind-css%26logoColor%3Dwhite" width="143" height="28"></td> <td><code>https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&amp;logo=tailwind-css&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FBootstrap-563D7C%3Fstyle%3Dfor-the-badge%26logo%3Dbootstrap%26logoColor%3Dwhite" width="123" height="28"></td> <td><code>https://img.shields.io/badge/Bootstrap-563D7C?style=for-the-badge&amp;logo=bootstrap&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fstyled--components-DB7093%3Fstyle%3Dfor-the-badge%26logo%3Dstyled-components%26logoColor%3Dwhite" width="191" height="28"></td> <td><code>https://img.shields.io/badge/styled--components-DB7093?style=for-the-badge&amp;logo=styled-components&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FMaterial--UI-0081CB%3Fstyle%3Dfor-the-badge%26logo%3Dmaterial-ui%26logoColor%3Dwhite" width="113" height="28"></td> <td><code>https://img.shields.io/badge/Material--UI-0081CB?style=for-the-badge&amp;logo=material-ui&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FRedux-593D88%3Fstyle%3Dfor-the-badge%26logo%3Dredux%26logoColor%3Dwhite" width="88" height="28"></td> <td><code>https://img.shields.io/badge/Redux-593D88?style=for-the-badge&amp;logo=redux&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FReact_Router-CA4245%3Fstyle%3Dfor-the-badge%26logo%3Dreact-router%26logoColor%3Dwhite" width="144" height="28"></td> <td><code>https://img.shields.io/badge/React_Router-CA4245?style=for-the-badge&amp;logo=react-router&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FjQuery-0769AD%3Fstyle%3Dfor-the-badge%26logo%3Djquery%26logoColor%3Dwhite" width="95" height="28"></td> <td><code>https://img.shields.io/badge/jQuery-0769AD?style=for-the-badge&amp;logo=jquery&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FDjango-092E20%3Fstyle%3Dfor-the-badge%26logo%3Ddjango%26logoColor%3Dwhite" width="97" height="28"></td> <td><code>https://img.shields.io/badge/Django-092E20?style=for-the-badge&amp;logo=django&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FRuby_on_Rails-CC0000%3Fstyle%3Dfor-the-badge%26logo%3Druby-on-rails%26logoColor%3Dwhite" width="149" height="28"></td> <td><code>https://img.shields.io/badge/Ruby_on_Rails-CC0000?style=for-the-badge&amp;logo=ruby-on-rails&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FLaravel-FF2D20%3Fstyle%3Dfor-the-badge%26logo%3Dlaravel%26logoColor%3Dwhite" width="102" height="28"></td> <td><code>https://img.shields.io/badge/Laravel-FF2D20?style=for-the-badge&amp;logo=laravel&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FSpring-6DB33F%3Fstyle%3Dfor-the-badge%26logo%3Dspring%26logoColor%3Dwhite" width="95" height="28"></td> <td><code>https://img.shields.io/badge/Spring-6DB33F?style=for-the-badge&amp;logo=spring&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FFlask-000000%3Fstyle%3Dfor-the-badge%26logo%3Dflask%26logoColor%3Dwhite" width="85" height="28"></td> <td><code>https://img.shields.io/badge/Flask-000000?style=for-the-badge&amp;logo=flask&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FFlutter-02569B%3Fstyle%3Dfor-the-badge%26logo%3Dflutter%26logoColor%3Dwhite" width="101" height="28"></td> <td><code>https://img.shields.io/badge/Flutter-02569B?style=for-the-badge&amp;logo=flutter&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FMySQL-00000F%3Fstyle%3Dfor-the-badge%26logo%3Dmysql%26logoColor%3Dwhite" width="88" height="28"></td> <td><code>https://img.shields.io/badge/MySQL-00000F?style=for-the-badge&amp;logo=mysql&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FPostgreSQL-316192%3Fstyle%3Dfor-the-badge%26logo%3Dpostgresql%26logoColor%3Dwhite" width="130" height="28"></td> <td><code>https://img.shields.io/badge/PostgreSQL-316192?style=for-the-badge&amp;logo=postgresql&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FMongoDB-4EA94B%3Fstyle%3Dfor-the-badge%26logo%3Dmongodb%26logoColor%3Dwhite" width="110" height="28"></td> <td><code>https://img.shields.io/badge/MongoDB-4EA94B?style=for-the-badge&amp;logo=mongodb&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FSQLite-07405E%3Fstyle%3Dfor-the-badge%26logo%3Dsqlite%26logoColor%3Dwhite" width="92" height="28"></td> <td><code>https://img.shields.io/badge/SQLite-07405E?style=for-the-badge&amp;logo=sqlite&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FUnity-100000%3Fstyle%3Dfor-the-badge%26logo%3Dunity%26logoColor%3Dwhite" width="86" height="28"></td> <td><code>https://img.shields.io/badge/Unity-100000?style=for-the-badge&amp;logo=unity&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Funrealengine-%2523313131.svg%3Fstyle%3Dfor-the-badge%26logo%3Dunrealengine%26logoColor%3Dwhite" width="148" height="28"></td> <td><code>https://img.shields.io/badge/unrealengine-%23313131.svg?style=for-the-badge&amp;logo=unrealengine&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FNetlify-00C7B7%3Fstyle%3Dfor-the-badge%26logo%3Dnetlify%26logoColor%3Dwhite" width="99" height="28"></td> <td><code>https://img.shields.io/badge/Netlify-00C7B7?style=for-the-badge&amp;logo=netlify&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FHeroku-430098%3Fstyle%3Dfor-the-badge%26logo%3Dheroku%26logoColor%3Dwhite" width="98" height="28"></td> <td><code>https://img.shields.io/badge/Heroku-430098?style=for-the-badge&amp;logo=heroku&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FAmazon_AWS-232F3E%3Fstyle%3Dfor-the-badge%26logo%3Damazon-aws%26logoColor%3Dwhite" width="114" height="28"></td> <td><code>https://img.shields.io/badge/Amazon_AWS-232F3E?style=for-the-badge&amp;logo=amazon-aws&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FGoogle_Cloud-4285F4%3Fstyle%3Dfor-the-badge%26logo%3Dgoogle-cloud%26logoColor%3Dwhite" width="147" height="28"></td> <td><code>https://img.shields.io/badge/Google_Cloud-4285F4?style=for-the-badge&amp;logo=google-cloud&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FMicrosoft_Azure-0089D6%3Fstyle%3Dfor-the-badge%26logo%3Dmicrosoft-azure%26logoColor%3Dwhite" width="150" height="28"></td> <td><code>https://img.shields.io/badge/Microsoft_Azure-0089D6?style=for-the-badge&amp;logo=microsoft-azure&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FMicrosoft_Excel-217346%3Fstyle%3Dfor-the-badge%26logo%3Dmicrosoft-excel%26logoColor%3Dwhite" width="147" height="28"></td> <td><code>https://img.shields.io/badge/Microsoft_Excel-217346?style=for-the-badge&amp;logo=microsoft-excel&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FMicrosoft_PowerPoint-B7472A%3Fstyle%3Dfor-the-badge%26logo%3Dmicrosoft-powerpoint%26logoColor%3Dwhite" width="198" height="28"></td> <td><code>https://img.shields.io/badge/Microsoft_PowerPoint-B7472A?style=for-the-badge&amp;logo=microsoft-powerpoint&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FMicrosoft_Access-A4373A%3Fstyle%3Dfor-the-badge%26logo%3Dmicrosoft-access%26logoColor%3Dwhite" width="158" height="28"></td> <td><code>https://img.shields.io/badge/Microsoft_Access-A4373A?style=for-the-badge&amp;logo=microsoft-access&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FMicrosoft_SQL_Server-CC2927%3Fstyle%3Dfor-the-badge%26logo%3Dmicrosoft-sql-server%26logoColor%3Dwhite" width="189" height="28"></td> <td><code>https://img.shields.io/badge/Microsoft_SQL_Server-CC2927?style=for-the-badge&amp;logo=microsoft-sql-server&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FMicrosoft_Office-D83B01%3Fstyle%3Dfor-the-badge%26logo%3Dmicrosoft-office%26logoColor%3Dwhite" width="155" height="28"></td> <td><code>https://img.shields.io/badge/Microsoft_Office-D83B01?style=for-the-badge&amp;logo=microsoft-office&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FMicrosoft_SharePoint-0078D4%3Fstyle%3Dfor-the-badge%26logo%3Dmicrosoft-sharepoint%26logoColor%3Dwhite" width="194" height="28"></td> <td><code>https://img.shields.io/badge/Microsoft_SharePoint-0078D4?style=for-the-badge&amp;logo=microsoft-sharepoint&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FMicrosoft_Word-2B579A%3Fstyle%3Dfor-the-badge%26logo%3Dmicrosoft-word%26logoColor%3Dwhite" width="147" height="28"></td> <td><code>https://img.shields.io/badge/Microsoft_Word-2B579A?style=for-the-badge&amp;logo=microsoft-word&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FMicrosoft_Visio-3955A3%3Fstyle%3Dfor-the-badge%26logo%3Dmicrosoft-visio%26logoColor%3Dwhite" width="146" height="28"></td> <td><code>https://img.shields.io/badge/Microsoft_Visio-3955A3?style=for-the-badgee&amp;logo=microsoft-visio&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FMicrosoft-666666%3Fstyle%3Dfor-the-badge%26logo%3Dmicrosoft%26logoColor%3Dwhite" width="102" height="28"></td> <td><code>https://img.shields.io/badge/Microsoft-666666?style=for-the-badge&amp;logo=microsoft&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FSAP-0FAAFF%3Fstyle%3Dfor-the-badge%26logo%3Dsap%26logoColor%3Dwhite" width="69" height="28"></td> <td><code>https://img.shields.io/badge/SAP-0FAAFF?style=for-the-badge&amp;logo=sap&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FPowershell-2CA5E0%3Fstyle%3Dfor-the-badge%26logo%3Dpowershell%26logoColor%3Dwhite" width="112" height="28"></td> <td><code>https://img.shields.io/badge/Powershell-2CA5E0?style=for-the-badge&amp;logo=powershell&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fworkspace-143157%3Fstyle%3Dfor-the-badge%26logo%3DNX%26logoColor%3Dwhite" width="126" height="28"></td> <td><code>https://img.shields.io/badge/workspace-143157?style=for-the-badge&amp;logo=NX&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fsequelize.js-323330%3Fstyle%3Dfor-the-badge%26logo%3Dsequelize%26logoColor%3Dblue" width="138" height="28"></td> <td><code>https://img.shields.io/badge/sequelize-323330?style=for-the-badge&amp;logo=sequelize&amp;logoColor=blue</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fjson%2520web%2520tokens-323330%3Fstyle%3Dfor-the-badge%26logo%3Djson-web-tokens%26logoColor%3Dpink" width="169" height="28"></td> <td><code>https://img.shields.io/badge/json%20web%20tokens-323330?style=for-the-badge&amp;logo=json-web-tokens&amp;logoColor=pink</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fnpm-CB3837%3Fstyle%3Dfor-the-badge%26logo%3Dnpm%26logoColor%3Dwhite" width="72" height="28"></td> <td><code>https://img.shields.io/badge/npm-CB3837?style=for-the-badge&amp;logo=npm&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FNext.js-000%3Flogo%3Dnextdotjs%26logoColor%3Dfff%26style%3Dfor-the-badge" width="98" height="28"></td> <td><code>https://img.shields.io/badge/Next.js-000?logo=nextdotjs&amp;logoColor=fff&amp;style=for-the-badge</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FSymfony-000%3Flogo%3Dsymfony%26logoColor%3Dfff%26style%3Dfor-the-badge" alt="Symfony Badge" width="106" height="28"></td> <td><code>https://img.shields.io/badge/Symfony-000?logo=symfony&amp;logoColor=fff&amp;style=for-the-badge</code></td> </tr> </tbody> </table></div> <p>🔝 Back to Top</p> <h1> 🔔 Tests </h1> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Badge</th> <th>URL</th> </tr> </thead> <tbody> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FJest-323330%3Fstyle%3Dfor-the-badge%26logo%3DJest%26logoColor%3Dwhite" width="75" height="28"></td> <td><code>https://img.shields.io/badge/Jest-323330?style=for-the-badge&amp;logo=Jest&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Ftesting%2520library-323330%3Fstyle%3Dfor-the-badge%26logo%3Dtesting-library%26logoColor%3Dred" width="165" height="28"></td> <td><code>https://img.shields.io/badge/testing%20library-323330?style=for-the-badge&amp;logo=testing-library&amp;logoColor=red</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fmocha.js-323330%3Fstyle%3Dfor-the-badge%26logo%3Dmocha%26logoColor%3DBrown" width="111" height="28"></td> <td><code>https://img.shields.io/badge/mocha.js-323330?style=for-the-badge&amp;logo=mocha&amp;logoColor=Brown</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fchai.js-323330%3Fstyle%3Dfor-the-badge%26logo%3Dchai%26logoColor%3Dred" width="97" height="28"></td> <td><code>https://img.shields.io/badge/chai.js-323330?style=for-the-badge&amp;logo=chai&amp;logoColor=red</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fsinon.js-323330%3Fstyle%3Dfor-the-badge%26logo%3Dsinon" width="88" height="28"></td> <td><code>https://img.shields.io/badge/sinon.js-323330?style=for-the-badge&amp;logo=sinon</code></td> </tr> </tbody> </table></div> <p>🔝 Back to Top</p> <h2> 💻 Workspace Specs </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Badge</th> <th>URL</th> </tr> </thead> <tbody> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FNVIDIA-GTX1650-76B900%3Fstyle%3Dfor-the-badge%26logo%3Dnvidia%26logoColor%3Dwhite" width="169" height="28"></td> <td><code>https://img.shields.io/badge/NVIDIA-GTX1650-76B900?style=for-the-badge&amp;logo=nvidia&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FAMD-Radeon_RX_5500-ED1C24%3Fstyle%3Dfor-the-badge%26logo%3Damd%26logoColor%3Dwhite" width="206" height="28"></td> <td><code>https://img.shields.io/badge/AMD-Radeon_RX_5500-ED1C24?style=for-the-badge&amp;logo=amd&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FIntel-Core_i5--10th-0071C5%3Fstyle%3Dfor-the-badge%26logo%3Dintel%26logoColor%3Dwhite" width="195" height="28"></td> <td><code>https://img.shields.io/badge/Intel-Core_i5_10th-0071C5?style=for-the-badge&amp;logo=intel&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FAMD-Ryzen_7_3800X-ED1C24%3Fstyle%3Dfor-the-badge%26logo%3Damd%26logoColor%3Dwhite" width="194" height="28"></td> <td><code>https://img.shields.io/badge/AMD-Ryzen_7_3800X-ED1C24?style=for-the-badge&amp;logo=amd&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FWindows-ASUS_Zenbook_3-0078D6%3Fstyle%3Dfor-the-badge%26logo%3Dwindows%26logoColor%3Dwhite" width="225" height="28"></td> <td><code>https://img.shields.io/badge/Windows-ASUS_Zenbook_3-0078D6?style=for-the-badge&amp;logo=windows&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FApple-MacBook_Pro_2012-999999%3Fstyle%3Dfor-the-badge%26logo%3Dapple%26logoColor%3Dwhite" width="236" height="28"></td> <td><code>https://img.shields.io/badge/Apple-MacBook_Pro_2012-999999?style=for-the-badge&amp;logo=apple&amp;logoColor=white</code></td> </tr> </tbody> </table></div> <p>🔝 Back to Top</p> <h2> 🎮 Games </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Badge</th> <th>URL</th> </tr> </thead> <tbody> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FActivision-000000%3Fstyle%3Dfor-the-badge%26logo%3DActivision%26logoColor%3Dwhite" width="125" height="28"></td> <td><code>https://img.shields.io/badge/Activision-000000?style=for-the-badge&amp;logo=Activision&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FBattle.net-000%3Fstyle%3Dfor-the-badge%26logo%3Dbattle.net%26logoColor%3D148EFF" width="123" height="28"></td> <td><code>https://img.shields.io/badge/Battle.net-000?style=for-the-badge&amp;logo=battle.net&amp;logoColor=148EFF</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FCounter_Strike-000000%3Fstyle%3Dfor-the-badge%26logo%3Dcounter-strike%26logoColor%3Dwhite" width="159" height="28"></td> <td><code>https://img.shields.io/badge/Counter_Strike-000000?style=for-the-badge&amp;logo=counter-strike&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FEpic%2520Games-313131%3Fstyle%3Dfor-the-badge%26logo%3DEpic%2520Games%26logoColor%3Dwhite" width="125" height="28"></td> <td><code>https://img.shields.io/badge/Epic%20Games-313131?style=for-the-badge&amp;logo=Epic%20Games&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FFIFA-B7312F%3Fstyle%3Dfor-the-badge%26logo%3Dfifa%26logoColor%3Dwhite" width="75" height="28"></td> <td><code>https://img.shields.io/badge/FIFA-B7312F?style=for-the-badge&amp;logo=fifa&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FItch.io-FA5C5C%3Fstyle%3Dfor-the-badge%26logo%3Ditchdotio%26logoColor%3Dwhite" width="97" height="28"></td> <td><code>https://img.shields.io/badge/Itch.io-FA5C5C?style=for-the-badge&amp;logo=itchdotio&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FOrigin-F56C2D%3Fstyle%3Dfor-the-badge%26logo%3Dorigin%26logoColor%3Dwhite" width="94" height="28"></td> <td><code>https://img.shields.io/badge/Origin-148EFF?style=for-the-badge&amp;logo=origin&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FGame%2520Jolt-CCFF00%3Fstyle%3Dfor-the-badge%26logo%3DGame%2520Jolt%26logoColor%3Dwhite" width="117" height="28"></td> <td><code>https://img.shields.io/badge/Game%20Jolt-CCFF00?style=for-the-badge&amp;logo=Game%20Jolt&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FGame%2520%26%2520Watch-CCFF00%3Fstyle%3Dfor-the-badge%26logo%3DGame%2520%26%2520Watch%26logoColor%3Dwhite" width="128" height="28"></td> <td><code>https://img.shields.io/badge/Game%20&amp;%20Watch-CCFF00?style=for-the-badge&amp;logo=Game%20&amp;%20Watch&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FNintendo_3DS-D12228%3Fstyle%3Dfor-the-badge%26logo%3Dnintendo-3ds%26logoColor%3Dwhite" width="146" height="28"></td> <td><code>https://img.shields.io/badge/Nintendo_3DS-D12228?style=for-the-badge&amp;logo=nintendo-3ds&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FWeGame-FAAB00%3Fstyle%3Dfor-the-badge%26logo%3DWeGame%26logoColor%3Dwhite" width="101" height="28"></td> <td><code>https://img.shields.io/badge/WeGame-FAAB00?style=for-the-badge&amp;logo=WeGame&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FRepublic%2520of%2520Gamers-FF0029%3Fstyle%3Dfor-the-badge%26logo%3DRepublic%2520of%2520Gamers%26logoColor%3Dwhite" width="191" height="28"></td> <td><code>https://img.shields.io/badge/Republic%20of%20Gamers-FF0029?style=for-the-badge&amp;logo=Republic%20of%20Gamers&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FNintendo_Switch-E60012%3Fstyle%3Dfor-the-badge%26logo%3Dnintendo-switch%26logoColor%3Dwhite" width="173" height="28"></td> <td><code>https://img.shields.io/badge/Nintendo_Switch-E60012?style=for-the-badge&amp;logo=nintendo-switch&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FPlayStation-003791%3Fstyle%3Dfor-the-badge%26logo%3Dplaystation%26logoColor%3Dwhite" width="136" height="28"></td> <td><code>https://img.shields.io/badge/PlayStation-003791?style=for-the-badge&amp;logo=playstation&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FRiot_Games-D32936%3Fstyle%3Dfor-the-badge%26logo%3Driot-games%26logoColor%3Dwhite" width="127" height="28"></td> <td><code>https://img.shields.io/badge/Riot_Games-D32936?style=for-the-badge&amp;logo=riot-games&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FStadia-CD2640%3Fstyle%3Dfor-the-badge%26logo%3Dstadia%26logoColor%3Dwhite" width="94" height="28"></td> <td><code>https://img.shields.io/badge/Stadia-CD2640?style=for-the-badge&amp;logo=stadia&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FSteam-000000%3Fstyle%3Dfor-the-badge%26logo%3Dsteam%26logoColor%3Dwhite" width="87" height="28"></td> <td><code>https://img.shields.io/badge/Steam-000000?style=for-the-badge&amp;logo=steam&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FXbox-107C10%3Fstyle%3Dfor-the-badge%26logo%3Dxbox%26logoColor%3Dwhite" width="60" height="28"></td> <td><code>https://img.shields.io/badge/Xbox-107C10?style=for-the-badge&amp;logo=xbox&amp;logoColor=white</code></td> </tr> </tbody> </table></div> <p>🔝 Back to Top</p> <h2> ❤ Funding </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Badge</th> <th>URL</th> </tr> </thead> <tbody> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Falipay-00A1E9%3Fstyle%3Dfor-the-badge%26logo%3Dalipay%26logoColor%3Dwhite" width="93" height="28"></td> <td><code>https://img.shields.io/badge/alipay-00A1E9?style=for-the-badge&amp;logo=alipay&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Famazon%2520pay-F79114%3Fstyle%3Dfor-the-badge%26logo%3Damazon%2520pay%26logoColor%3Dwhite" width="130" height="28"></td> <td><code>https://img.shields.io/badge/amazon%20pay-F79114?style=for-the-badge&amp;logo=amazon%20pay&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fapple%2520pay-007AFF%3Fstyle%3Dfor-the-badge%26logo%3Dapple%2520pay%26logoColor%3Dwhite" width="116" height="28"></td> <td><code>https://img.shields.io/badge/apple%20pay-007AFF?style=for-the-badge&amp;logo=apple%20pay&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FBuy_Me_A_Coffee-FFDD00%3Fstyle%3Dfor-the-badge%26logo%3Dbuy-me-a-coffee%26logoColor%3Dblack" width="161" height="28"></td> <td><code>https://img.shields.io/badge/Buy_Me_A_Coffee-FFDD00?style=for-the-badge&amp;logo=buy-me-a-coffee&amp;logoColor=black</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Ffampay-FFAD00%3Fstyle%3Dfor-the-badge%26logo%3Dfampay%26logoColor%3Dwhite" width="97" height="28"></td> <td><code>https://img.shields.io/badge/fampay-FFAD00?style=for-the-badge&amp;logo=fampay&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FG%2520pay-2875E3%3Fstyle%3Dfor-the-badge%26logo%3Dgooglepay%26logoColor%3Dwhite" width="83" height="28"></td> <td><code>https://img.shields.io/badge/G%20pay-2875E3?style=for-the-badge&amp;logo=googlepay&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FKo--fi-F16061%3Fstyle%3Dfor-the-badge%26logo%3Dko-fi%26logoColor%3Dwhite" width="82" height="28"></td> <td><code>https://img.shields.io/badge/Ko--fi-F16061?style=for-the-badge&amp;logo=ko-fi&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FLiberapay-F6C915%3Fstyle%3Dfor-the-badge%26logo%3Dliberapay%26logoColor%3Dblack" width="119" height="28"></td> <td><code>https://img.shields.io/badge/Liberapay-F6C915?style=for-the-badge&amp;logo=liberapay&amp;logoColor=black</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FOpenCollective-1F87FF%3Fstyle%3Dfor-the-badge%26logo%3DOpenCollective%26logoColor%3Dwhite" width="161" height="28"></td> <td><code>https://img.shields.io/badge/OpenCollective-1F87FF?style=for-the-badge&amp;logo=OpenCollective&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FPatreon-F96854%3Fstyle%3Dfor-the-badge%26logo%3Dpatreon%26logoColor%3Dwhite" width="105" height="28"></td> <td><code>https://img.shields.io/badge/Patreon-F96854?style=for-the-badge&amp;logo=patreon&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FPayoneer-D73F03%3Fstyle%3Dfor-the-badge%26logo%3Dpayoneer%26logoColor%3Dwhite" width="114" height="28"></td> <td><code>https://img.shields.io/badge/Payoneer-D73F03?style=for-the-badge&amp;logo=payoneer&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FPayPal-00457C%3Fstyle%3Dfor-the-badge%26logo%3Dpaypal%26logoColor%3Dwhite" width="94" height="28"></td> <td><code>https://img.shields.io/badge/PayPal-00457C?style=for-the-badge&amp;logo=paypal&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FPaytm-002970%3Fstyle%3Dfor-the-badge%26logo%3Dpaytm%26logoColor%3D00BAF2" width="88" height="28"></td> <td><code>https://img.shields.io/badge/Paytm-002970?style=for-the-badge&amp;logo=paytm&amp;logoColor=00BAF2</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fphonepe-3DDC84%3Fstyle%3Dfor-the-badge%26logo%3Dphonepe%26logoColor%3Dwhite%26color%3Dpurple" width="105" height="28"></td> <td><code>https://img.shields.io/badge/phonepe-3DDC84?style=for-the-badge&amp;logo=phonepe&amp;logoColor=white&amp;color=purple</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fpicpay-21C25E%3Fstyle%3Dfor-the-badge%26logo%3Dpicpay%26logoColor%3Dwhite" width="93" height="28"></td> <td><code>https://img.shields.io/badge/picpay-21C25E?style=for-the-badge&amp;logo=picpay&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FRazorpay-02042B%3Fstyle%3Dfor-the-badge%26logo%3Drazorpay%26logoColor%3D3395FF" width="115" height="28"></td> <td><code>https://img.shields.io/badge/Razorpay-02042B?style=for-the-badge&amp;logo=razorpay&amp;logoColor=3395FF</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fsamsung%2520pay-1D49C0%3Fstyle%3Dfor-the-badge%26logo%3Dsamsung%2520pay%26logoColor%3Dwhite" width="139" height="28"></td> <td><code>https://img.shields.io/badge/samsung%20pay-1D49C0?style=for-the-badge&amp;logo=samsung%20pay&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fsponsor-30363D%3Fstyle%3Dfor-the-badge%26logo%3DGitHub-Sponsors%26logoColor%3D%23white" width="106" height="28"></td> <td><code>https://img.shields.io/badge/sponsor-30363D?style=for-the-badge&amp;logo=GitHub-Sponsors&amp;logoColor=#white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FStripe-626CD9%3Fstyle%3Dfor-the-badge%26logo%3DStripe%26logoColor%3Dwhite" width="92" height="28"></td> <td><code>https://img.shields.io/badge/Stripe-626CD9?style=for-the-badge&amp;logo=Stripe&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fwise-394e79%3Fstyle%3Dfor-the-badge%26logo%3Dtransferwise%26logoColor%3D00B9FF" width="59" height="28"></td> <td><code>https://img.shields.io/badge/wise-394e79?style=for-the-badge&amp;logo=transferwise&amp;logoColor=00B9FF</code></td> </tr> </tbody> </table></div> <p>🔝 Back to Top</p> <h2> 🎶 Sound </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Badge</th> <th>URL</th> </tr> </thead> <tbody> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2F100tracklists-40AEF0%3Fstyle%3Dfor-the-badge%26logo%3D1001tracklists%26logoColor%3Dwhite" width="151" height="28"></td> <td><code>https://img.shields.io/badge/1001tracklists-40AEF0?style=for-the-badge&amp;logo=1001tracklists&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fapple%2520music-F34E68%3Fstyle%3Dfor-the-badge%26logo%3Dapple%2520music%26logoColor%3Dwhite" width="133" height="28"></td> <td><code>https://img.shields.io/badge/apple%20music-F34E68?style=for-the-badge&amp;logo=apple%20music&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FApple_Podcasts-9933CC%3Fstyle%3Dfor-the-badge%26logo%3Dapple-podcasts%26logoColor%3Dwhite" width="160" height="28"></td> <td><code>https://img.shields.io/badge/Apple_Podcasts-9933CC?style=for-the-badge&amp;logo=apple-podcasts&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FAudacity-0000CC%3Fstyle%3Dfor-the-badge%26logo%3Daudacity%26logoColor%3Dwhite" width="112" height="28"></td> <td><code>https://img.shields.io/badge/Audacity-0000CC?style=for-the-badge&amp;logo=audacity&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FDeezer-FEAA2D%3Fstyle%3Dfor-the-badge%26logo%3Ddeezer%26logoColor%3Dwhite" width="74" height="28"></td> <td><code>https://img.shields.io/badge/Deezer-FEAA2D?style=for-the-badge&amp;logo=deezer&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FGoogle_Podcasts-4285F4%3Fstyle%3Dfor-the-badge%26logo%3Dgoogle-podcasts%26logoColor%3Dwhite" width="151" height="28"></td> <td><code>https://img.shields.io/badge/Google_Podcasts-4285F4?style=for-the-badge&amp;logo=google-podcasts&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fiheart-A80025%3Fstyle%3Dfor-the-badge%26logo%3Diheartradio%26logoColor%3Dwhite" width="94" height="28"></td> <td><code>https://img.shields.io/badge/iheart-A80025?style=for-the-badge&amp;logo=iheartradio&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Flast.fm-D51007%3Fstyle%3Dfor-the-badge%26logo%3Dlast.fm%26logoColor%3Dwhite" width="99" height="28"></td> <td><code>https://img.shields.io/badge/last.fm-D51007?style=for-the-badge&amp;logo=last.fm&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FPandora-3668FF%3Fstyle%3Dfor-the-badge%26logo%3Dpandora%26logoColor%3DA15BB4" width="107" height="28"></td> <td><code>https://img.shields.io/badge/Pandora-3668FF?style=for-the-badge&amp;logo=pandora&amp;logoColor=A15BB4</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FShazam-0088FF%3Fstyle%3Dfor-the-badge%26logo%3DShazam%26logoColor%3Dwhite" width="98" height="28"></td> <td><code>https://img.shields.io/badge/Shazam-0088FF?style=for-the-badge&amp;logo=Shazam&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FSoundCloud-FF3300%3Fstyle%3Dfor-the-badge%26logo%3Dsoundcloud%26logoColor%3Dwhite" width="135" height="28"></td> <td><code>https://img.shields.io/badge/SoundCloud-FF3300?style=for-the-badge&amp;logo=soundcloud&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FSpotify-1ED760%3Fstyle%3Dfor-the-badge%26logo%3Dspotify%26logoColor%3Dwhite" width="101" height="28"></td> <td><code>https://img.shields.io/badge/Spotify-1ED760?&amp;style=for-the-badge&amp;logo=spotify&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FTidal-000000%3Fstyle%3Dfor-the-badge%26logo%3DTidal%26logoColor%3Dwhite" width="84" height="28"></td> <td><code>https://img.shields.io/badge/Tidal-000000?style=for-the-badge&amp;logo=Tidal&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FTuneIn-14D8CC%3Fstyle%3Dfor-the-badge%26logo%3DTuneIn%26logoColor%3Dwhite" width="95" height="28"></td> <td><code>https://img.shields.io/badge/TuneIn-14D8CC?style=for-the-badge&amp;logo=TuneIn&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FYouTube_Music-FF0000%3Fstyle%3Dfor-the-badge%26logo%3Dyoutube-music%26logoColor%3Dwhite" width="154" height="28"></td> <td><code>https://img.shields.io/badge/YouTube_Music-FF0000?style=for-the-badge&amp;logo=youtube-music&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FCastbox-F55B23%3Flogo%3Dcastbox%26logoColor%3Dfff%26style%3Dfor-the-badge" width="104" height="28"></td> <td><code>https://img.shields.io/badge/Castbox-F55B23?logo=castbox&amp;logoColor=fff&amp;style=for-the-badge</code></td> </tr> </tbody> </table></div> <p>🔝 Back to Top</p> <h2> 🍔 Food </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Badge</th> <th>URL</th> </tr> </thead> <tbody> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FAiqfome-7A1FA2%3Fstyle%3Dfor-the-badge%26logo%3Daiqfome%26logoColor%3Dwhite" width="105" height="28"></td> <td><code>https://img.shields.io/badge/Aiqfome-7A1FA2?style=for-the-badge&amp;logo=aiqfome&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FBurger%2520King-D62300%3Fstyle%3Dfor-the-badge%26logo%3DBurger%2520King%26logoColor%3Dwhite" width="136" height="28"></td> <td><code>https://img.shields.io/badge/Burger King-D62300?style=for-the-badge&amp;logo=Burger King&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FDeliveroo-00CCBC%3Fstyle%3Dfor-the-badge%26logo%3DDeliveroo%26logoColor%3Dwhite" width="121" height="28"></td> <td><code>https://img.shields.io/badge/Deliveroo-00CCBC?style=for-the-badge&amp;logo=Deliveroo&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FDoorDash-FF3008%3Fstyle%3Dfor-the-badge%26logo%3DDoorDash%26logoColor%3Dwhite" width="118" height="28"></td> <td><code>https://img.shields.io/badge/DoorDash-FF3008?style=for-the-badge&amp;logo=DoorDash&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Ffoodpanda-D70F64%3Fstyle%3Dfor-the-badge%26logo%3Dfoodpanda%26logoColor%3Dwhite" width="126" height="28"></td> <td><code>https://img.shields.io/badge/foodpanda-E23744?style=for-the-badge&amp;logo=zomato&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FGrab-00B14F%3Fstyle%3Dfor-the-badge%26logo%3Dgrab%26logoColor%3Dwhite" width="80" height="28"></td> <td><code>https://img.shields.io/badge/Grab-00B14F?style=for-the-badge&amp;logo=grab&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FGrubhub-F63440%3Fstyle%3Dfor-the-badge%26logo%3DGrubhub%26logoColor%3Dwhite" width="107" height="28"></td> <td><code>https://img.shields.io/badge/Grubhub-F63440?style=for-the-badge&amp;logo=Grubhub&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FiFood-EA1D2C%3Fstyle%3Dfor-the-badge%26logo%3Difood%26logoColor%3Dwhite" width="87" height="28"></td> <td><code>https://img.shields.io/badge/iFood-EA1D2C?style=for-the-badge&amp;logo=ifood&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FKFC-F40027%3Fstyle%3Dfor-the-badge%26logo%3Dkfc%26logoColor%3Dwhite" width="68" height="28"></td> <td><code>https://img.shields.io/badge/KFC-F40027?style=for-the-badge&amp;logo=kfc&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FMcDonald%27s-FBC817%3Fstyle%3Dfor-the-badge%26logo%3DMcDonald%27s%26logoColor%3Dwhite" width="130" height="28"></td> <td><code>https://img.shields.io/badge/McDonald's-FBC817?style=for-the-badge&amp;logo=McDonald's&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FPostmates-000000%3Fstyle%3Dfor-the-badge%26logo%3DPostmates%26logoColor%3Dwhite" width="122" height="28"></td> <td><code>https://img.shields.io/badge/Postmates-000000?style=for-the-badge&amp;logo=Postmates&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FSwiggy-FC8019%3Fstyle%3Dfor-the-badge%26logo%3DSwiggy%26logoColor%3Dwhite" width="98" height="28"></td> <td><code>https://img.shields.io/badge/Swiggy-FC8019?style=for-the-badge&amp;logo=Swiggy&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FUber_Eats-5FB709%3Fstyle%3Dfor-the-badge%26logo%3Duber-eats%26logoColor%3Dwhite" width="117" height="28"></td> <td><code>https://img.shields.io/badge/Uber_Eats-5FB709?style=for-the-badge&amp;logo=uber-eats&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FZomato-E23744%3Fstyle%3Dfor-the-badge%26logo%3Dzomato%26logoColor%3Dwhite" width="98" height="28"></td> <td><code>https://img.shields.io/badge/Zomato-E23744?style=for-the-badge&amp;logo=zomato&amp;logoColor=white</code></td> </tr> </tbody> </table></div> <p>🔝 Back to Top</p> <h2> 📊 Analytics </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Badge</th> <th>URL</th> </tr> </thead> <tbody> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FAmazon%2520CloudWatch-FF4F8B%3Fstyle%3Dfor-the-badge%26logo%3DAmazon%2520CloudWatch%26logoColor%3Dwhite" width="197" height="28"></td> <td><code>https://img.shields.io/badge/Amazon%20CloudWatch-FF4F8B?style=for-the-badge&amp;logo=Amazon%20CloudWatch&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FGoogle%2520Analytics-E37400%3Fstyle%3Dfor-the-badge%26logo%3Dgoogle%2520analytics%26logoColor%3Dwhite" width="178" height="28"></td> <td><code>https://img.shields.io/badge/Google%20Analytics-E37400?style=for-the-badge&amp;logo=google%20analytics&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fhotjar-FD3A5C%3Fstyle%3Dfor-the-badge%26logo%3Dhotjar%26logoColor%3Dwhite" width="95" height="28"></td> <td><code>https://img.shields.io/badge/hotjar-FD3A5C?style=for-the-badge&amp;logo=hotjar&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FKibana-005571%3Fstyle%3Dfor-the-badge%26logo%3DKibana%26logoColor%3Dwhite" width="95" height="28"></td> <td><code>https://img.shields.io/badge/Kibana-005571?style=for-the-badge&amp;logo=Kibana&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FMatomo-3152A0%3Fstyle%3Dfor-the-badge%26logo%3DMatomo%26logoColor%3Dwhite" width="101" height="28"></td> <td><code>https://img.shields.io/badge/Matomo-3152A0?style=for-the-badge&amp;logo=Matomo&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FTableau-E97627%3Fstyle%3Dfor-the-badge%26logo%3DTableau%26logoColor%3Dwhite" width="103" height="28"></td> <td><code>https://img.shields.io/badge/Tableau-E97627?style=for-the-badge&amp;logo=Tableau&amp;logoColor=white</code></td> </tr> </tbody> </table></div> <p>🔝 Back to Top</p> <h2> 🤖 Artificial Intelligence </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Badge</th> <th>URL</th> </tr> </thead> <tbody> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fdialogflow-FF9800%3Fstyle%3Dfor-the-badge%26logo%3Ddialogflow%26logoColor%3Dwhite" width="133" height="28"></td> <td><code>https://img.shields.io/badge/dialogflow-FF9800?style=for-the-badge&amp;logo=dialogflow&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FchatGPT-74aa9c%3Fstyle%3Dfor-the-badge%26logo%3Dopenai%26logoColor%3Dwhite" width="104" height="28"></td> <td><code>https://img.shields.io/badge/chatGPT-74aa9c?style=for-the-badge&amp;logo=openai&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FTensorFlow-FF6F00%3Fstyle%3Dfor-the-badge%26logo%3Dtensorflow%26logoColor%3Dwhite" width="134" height="28"></td> <td><code>https://img.shields.io/badge/TensorFlow-FF6F00?style=for-the-badge&amp;logo=tensorflow&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FWeights_%26_Biases-FFBE00%3Fstyle%3Dfor-the-badge%26logo%3DWeightsAndBiases%26logoColor%3Dwhite" width="175" height="28"></td> <td><code>https://img.shields.io/badge/Weights_&amp;_Biases-FFBE00?style=for-the-badge&amp;logo=WeightsAndBiases&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Famazon%2520alexa-52b5f7%3Fstyle%3Dfor-the-badge%26logo%3Damazon%2520alexa%26logoColor%3Dwhite" width="147" height="28"></td> <td><code>https://img.shields.io/badge/amazon%20alexa-52b5f7?style=for-the-badge&amp;logo=amazon%20alexa&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fdependabot-025E8C%3Fstyle%3Dfor-the-badge%26logo%3Ddependabot%26logoColor%3Dwhite" width="132" height="28"></td> <td><code>https://img.shields.io/badge/dependabot-025E8C?style=for-the-badge&amp;logo=dependabot&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fgoogle%2520assistant-4285F4%3Fstyle%3Dfor-the-badge%26logo%3Dgoogle%2520assistant%26logoColor%3Dwhite" width="178" height="28"></td> <td><code>https://img.shields.io/badge/google%20assistant-4285F4?style=for-the-badge&amp;logo=google%20assistant&amp;logoColor=white</code></td> </tr> </tbody> </table></div> <p>🔝 Back to Top</p> <h2> 🔗 Blockchain </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Badge</th> <th>URL</th> </tr> </thead> <tbody> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fhyperledger-2F3134%3Fstyle%3Dfor-the-badge%26logo%3Dhyperledger%26logoColor%3Dwhite" width="118" height="28"></td> <td><code>https://img.shields.io/badge/hyperledger-2F3134?style=for-the-badge&amp;logo=hyperledger&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FOpenZeppelin-4E5EE4%3Flogo%3Dopenzeppelin%26logoColor%3Dfff%26style%3Dfor-the-badge" width="145" height="28"></td> <td><code>https://img.shields.io/badge/OpenZeppelin-4E5EE4?logo=openzeppelin&amp;logoColor=fff&amp;style=for-the-badge</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FEthereum-3C3C3D%3Flogo%3Dethereum%26logoColor%3Dfff%26style%3Dfor-the-badge" width="115" height="28"></td> <td><code>https://img.shields.io/badge/Ethereum-3C3C3D?logo=ethereum&amp;logoColor=fff&amp;style=for-the-badge</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FTether-50AF95%3Flogo%3Dtether%26logoColor%3Dfff%26style%3Dfor-the-badge" width="94" height="28"></td> <td><code>https://img.shields.io/badge/Tether-50AF95?logo=tether&amp;logoColor=fff&amp;style=for-the-badge</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FBitcoin-F7931A%3Flogo%3Dbitcoin%26logoColor%3Dfff%26style%3Dfor-the-badge" width="101" height="28"></td> <td><code>https://img.shields.io/badge/Bitcoin-F7931A?logo=bitcoin&amp;logoColor=fff&amp;style=for-the-badge</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FCoinbase-0052FF%3Fstyle%3Dfor-the-badge%26logo%3DCoinbase%26logoColor%3Dwhite" width="112" height="28"></td> <td><code>https://img.shields.io/badge/Coinbase-0052FF?style=for-the-badge&amp;logo=Coinbase&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FBlockchain.com-121D33%3Flogo%3Dblockchaindotcom%26logoColor%3Dfff%26style%3Dfor-the-badge" width="164" height="28"></td> <td><code>https://img.shields.io/badge/Blockchain.com-121D33?logo=blockchaindotcom&amp;logoColor=fff&amp;style=for-the-badge</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FWeb3.js-F16822%3Flogo%3Dweb3dotjs%26logoColor%3Dfff%26style%3Dfor-the-badge" width="101" height="28"></td> <td><code>https://img.shields.io/badge/Web3.js-F16822?logo=web3dotjs&amp;logoColor=fff&amp;style=for-the-badge</code></td> </tr> </tbody> </table></div> <p>🔝 Back to Top</p> <h2> ☁ Cloud </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Badge</th> <th>URL</th> </tr> </thead> <tbody> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FAlibaba_Cloud-FF6A00%3Fstyle%3Dfor-the-badge%26logo%3Dalibabacloud%26logoColor%3Dwhite" width="152" height="28"></td> <td><code>https://img.shields.io/badge/Alibaba_Cloud-FF6A00?style=for-the-badge&amp;logo=alibabacloud&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FAmazon%2520AWS-FF9900%3Fstyle%3Dfor-the-badge%26logo%3Damazonaws%26logoColor%3Dwhite" width="114" height="28"></td> <td><code>https://img.shields.io/badge/Amazon_AWS-FF9900?style=for-the-badge&amp;logo=amazonaws&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FAzure_DevOps-0078D7%3Fstyle%3Dfor-the-badge%26logo%3Dazure-devops%26logoColor%3Dwhite" width="125" height="28"></td> <td><code>https://img.shields.io/badge/Azure_DevOps-0078D7?style=for-the-badge&amp;logo=azure-devops&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FAzure_Functions-0062AD%3Fstyle%3Dfor-the-badge%26logo%3Dazure-functions%26logoColor%3Dwhite" width="149" height="28"></td> <td><code>https://img.shields.io/badge/Azure_Functions-0062AD?style=for-the-badge&amp;logo=azure-functions&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fcircleci-343434%3Fstyle%3Dfor-the-badge%26logo%3Dcircleci%26logoColor%3Dwhite" width="107" height="28"></td> <td><code>https://img.shields.io/badge/circleci-343434?style=for-the-badge&amp;logo=circleci&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FCirrus_CI-4051B5%3Fstyle%3Dfor-the-badge%26logo%3Dcirrusci%26logoColor%3Dwhite" width="114" height="28"></td> <td><code>https://img.shields.io/badge/Cirrus_CI-4051B5?style=for-the-badge&amp;logo=cirrusci&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FCloudflare-F38020%3Fstyle%3Dfor-the-badge%26logo%3DCloudflare%26logoColor%3Dwhite" width="129" height="28"></td> <td><code>https://img.shields.io/badge/Cloudflare-F38020?style=for-the-badge&amp;logo=Cloudflare&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FCloudflare%2520Pages-F38020%3Fstyle%3Dfor-the-badge%26logo%3DCloudflare%2520Pages%26logoColor%3Dwhite" width="178" height="28"></td> <td><code>https://img.shields.io/badge/Cloudflare%20Pages-F38020?style=for-the-badge&amp;logo=Cloudflare%20Pages&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FCloud%2520Foundry-0C9ED5%3Fstyle%3Dfor-the-badge%26logo%3DCloud%2520Foundry%26logoColor%3Dwhite" width="157" height="28"></td> <td><code>https://img.shields.io/badge/Cloud%20Foundry-0C9ED5?style=for-the-badge&amp;logo=Cloud%20Foundry&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FCloudsmith-187EB6%3Fstyle%3Dfor-the-badge%26logo%3DCloudsmith%26logoColor%3Dwhite" width="131" height="28"></td> <td><code>https://img.shields.io/badge/Cloudsmith-187EB6?style=for-the-badge&amp;logo=Cloudsmith&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FCodeship-004466%3Fstyle%3Dfor-the-badge%26logo%3DCodeship%26logoColor%3Dwhite" width="113" height="28"></td> <td><code>https://img.shields.io/badge/Codeship-004466?style=for-the-badge&amp;logo=Codeship&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FCodemagic-F45E3F%3Fstyle%3Dfor-the-badge%26logo%3DCodemagic%26logoColor%3Dwhite" width="123" height="28"></td> <td><code>https://img.shields.io/badge/Codemagic-F45E3F?style=for-the-badge&amp;logo=Codemagic&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FDigital_Ocean-0080FF%3Fstyle%3Dfor-the-badge%26logo%3DDigitalOcean%26logoColor%3Dwhite" width="150" height="28"></td> <td><code>https://img.shields.io/badge/Digital_Ocean-0080FF?style=for-the-badge&amp;logo=DigitalOcean&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FDrone_CI-212121%3Fstyle%3Dfor-the-badge%26logo%3Ddrone%26logoColor%3Dwhite" width="110" height="28"></td> <td><code>https://img.shields.io/badge/Drone_CI-212121?style=for-the-badge&amp;logo=drone&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Felastic%2520cloud-005571%3Fstyle%3Dfor-the-badge%26logo%3Delasticcloud%26logoColor%3Dwhite" width="149" height="28"></td> <td><code>https://img.shields.io/badge/elastic%20cloud-005571?style=for-the-badge&amp;logo=elasticcloud&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FGitHub_Actions-2088FF%3Fstyle%3Dfor-the-badge%26logo%3Dgithub-actions%26logoColor%3Dwhite" width="160" height="28"></td> <td><code>https://img.shields.io/badge/GitHub_Actions-2088FF?style=for-the-badge&amp;logo=github-actions&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FGlitch-2800ff%3Fstyle%3Dfor-the-badge%26logo%3Dglitch%26logoColor%3Dwhite" width="93" height="28"></td> <td><code>https://img.shields.io/badge/Glitch-2800ff?style=for-the-badge&amp;logo=glitch&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FGoogle_Cloud-4285F4%3Fstyle%3Dfor-the-badge%26logo%3Dgoogle-cloud%26logoColor%3Dwhite" width="147" height="28"></td> <td><code>https://img.shields.io/badge/Google_Cloud-4285F4?style=for-the-badge&amp;logo=google-cloud&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FHeroku-430098%3Fstyle%3Dfor-the-badge%26logo%3Dheroku%26logoColor%3Dwhite" width="98" height="28"></td> <td><code>https://img.shields.io/badge/Heroku-430098?style=for-the-badge&amp;logo=heroku&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FIBM%2520Cloud-1261FE%3Fstyle%3Dfor-the-badge%26logo%3DIBM%2520Cloud%26logoColor%3Dwhite" width="99" height="28"></td> <td><code>https://img.shields.io/badge/IBM%20Cloud-1261FE?style=for-the-badge&amp;logo=IBM%20Cloud&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FiCloud-3693F3%3Fstyle%3Dfor-the-badge%26logo%3DiCloud%26logoColor%3Dwhite" width="94" height="28"></td> <td><code>https://img.shields.io/badge/iCloud-3693F3?style=for-the-badge&amp;logo=iCloud&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FjsDelivr-E84D3D%3Fstyle%3Dfor-the-badge%26logo%3DjsDelivr%26logoColor%3Dwhite" width="109" height="28"></td> <td><code>https://img.shields.io/badge/jsDelivr-E84D3D?style=for-the-badge&amp;logo=jsDelivr&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FLinode-00A95C%3Fstyle%3Dfor-the-badge%26logo%3DLinode%26logoColor%3Dwhite" width="74" height="28"></td> <td><code>https://img.shields.io/badge/Linode-00A95C?style=for-the-badge&amp;logo=Linode&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fmicrosoft%2520azure-0089D6%3Fstyle%3Dfor-the-badge%26logo%3Dmicrosoft-azure%26logoColor%3Dwhite" width="150" height="28"></td> <td><code>https://img.shields.io/badge/microsoft%20azure-0089D6?style=for-the-badge&amp;logo=microsoft-azure&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fmix%2520cloud-5000ff%3Fstyle%3Dfor-the-badge%26logo%3Dmixcloud%26logoColor%3Dwhite" width="119" height="28"></td> <td><code>https://img.shields.io/badge/mix%20cloud-5000ff?style=for-the-badge&amp;logo=mixcloud&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FNetlify-00C7B7%3Fstyle%3Dfor-the-badge%26logo%3Dnetlify%26logoColor%3Dwhite" width="99" height="28"></td> <td><code>https://img.shields.io/badge/Netlify-00C7B7?style=for-the-badge&amp;logo=netlify&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FNextcloud-0082C9%3Fstyle%3Dfor-the-badge%26logo%3DNextcloud%26logoColor%3Dwhite" width="123" height="28"></td> <td><code>https://img.shields.io/badge/Nextcloud-0082C9?style=for-the-badge&amp;logo=Nextcloud&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FOctopus%2520Deploy-2F93E0%3Fstyle%3Dfor-the-badge%26logo%3DOctopus%2520Deploy%26logoColor%3Dwhite" width="162" height="28"></td> <td><code>https://img.shields.io/badge/Octopus%20Deploy-2F93E0?style=for-the-badge&amp;logo=Octopus%20Deploy&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FOracle-F80000%3Fstyle%3Dfor-the-badge%26logo%3Doracle%26logoColor%3Dblack" width="95" height="28"></td> <td><code>https://img.shields.io/badge/Oracle-F80000?style=for-the-badge&amp;logo=oracle&amp;logoColor=black</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FSalesforce-00A1E0%3Fstyle%3Dfor-the-badge%26logo%3DSalesforce%26logoColor%3Dwhite" width="128" height="28"></td> <td><code>https://img.shields.io/badge/Salesforce-00A1E0?style=for-the-badge&amp;logo=Salesforce&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FSonar%2520cloud-F3702A%3Fstyle%3Dfor-the-badge%26logo%3Dsonarcloud%26logoColor%3Dwhite" width="138" height="28"></td> <td><code>https://img.shields.io/badge/Sonar%20cloud-F3702A?style=for-the-badge&amp;logo=sonarcloud&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Ftravis_CI-3EAAAF%3Fstyle%3Dfor-the-badge%26logo%3Dtravisci%26logoColor%3Dwhite" width="113" height="28"></td> <td><code>https://img.shields.io/badge/travis_CI-3EAAAF?style=for-the-badge&amp;logo=travisci&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FTwilio-F22F46%3Fstyle%3Dfor-the-badge%26logo%3DTwilio%26logoColor%3Dwhite" width="94" height="28"></td> <td><code>https://img.shields.io/badge/Twilio-F22F46?style=for-the-badge&amp;logo=Twilio&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fupcloud-7B00FF%3Fstyle%3Dfor-the-badge%26logo%3Dupcloud%26logoColor%3Dwhite" width="105" height="28"></td> <td><code>https://img.shields.io/badge/upcloud-7B00FF?style=for-the-badge&amp;logo=upcloud&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FVercel-000000%3Fstyle%3Dfor-the-badge%26logo%3Dvercel%26logoColor%3Dwhite" width="93" height="28"></td> <td><code>https://img.shields.io/badge/Vercel-000000?style=for-the-badge&amp;logo=vercel&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FwasmCloud-00BC8E%3Fstyle%3Dfor-the-badge%26logo%3DwasmCloud%26logoColor%3Dwhite" width="129" height="28"></td> <td><code>https://img.shields.io/badge/wasmCloud-00BC8E?style=for-the-badge&amp;logo=wasmCloud&amp;logoColor=white</code></td> </tr> </tbody> </table></div> <p>🔝 Back to Top</p> <h2> 💲 Cryptocurrency </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Badge</th> <th>URL</th> </tr> </thead> <tbody> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FAmp-000%3Fstyle%3Dfor-the-badge%26logo%3Damp%26logoColor%3D005AF0" width="71" height="28"></td> <td><code>https://img.shields.io/badge/Amp-000?style=for-the-badge&amp;logo=amp&amp;logoColor=005AF0</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FBitcoin-000000%3Fstyle%3Dfor-the-badge%26logo%3Dbitcoin%26logoColor%3Dwhite" width="101" height="28"></td> <td><code>https://img.shields.io/badge/Bitcoin-000000?style=for-the-badge&amp;logo=bitcoin&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FBitcoin%2520Cash-0AC18E%3Fstyle%3Dfor-the-badge%26logo%3DBitcoin%2520Cash%26logoColor%3Dwhite" width="142" height="28"></td> <td><code>https://img.shields.io/badge/Bitcoin%20Cash-0AC18E?style=for-the-badge&amp;logo=Bitcoin%20Cash&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FBitcoin%2520SV-EAB300%3Fstyle%3Dfor-the-badge%26logo%3DBitcoin%2520SV%26logoColor%3Dwhite" width="123" height="28"></td> <td><code>https://img.shields.io/badge/Bitcoin%20SV-EAB300?style=for-the-badge&amp;logo=Bitcoin%20SV&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FBinance-FCD535%3Fstyle%3Dfor-the-badge%26logo%3Dbinance%26logoColor%3Dwhite" width="103" height="28"></td> <td><code>https://img.shields.io/badge/Binance-FCD535?style=for-the-badge&amp;logo=binance&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fchainlink-375BD2%3Fstyle%3Dfor-the-badge%26logo%3Dchainlink%26logoColor%3Dwhite" width="120" height="28"></td> <td><code>https://img.shields.io/badge/chainlink-375BD2?style=for-the-badge&amp;logo=chainlink&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fdash-008DE4%3Fstyle%3Dfor-the-badge%26logo%3Ddash%26logoColor%3Dwhite" width="80" height="28"></td> <td><code>https://img.shields.io/badge/dash-008DE4?style=for-the-badge&amp;logo=dash&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fdogecoin-C2A633%3Fstyle%3Dfor-the-badge%26logo%3Ddogecoin%26logoColor%3Dwhite" width="115" height="28"></td> <td><code>https://img.shields.io/badge/dogecoin-C2A633?style=for-the-badge&amp;logo=dogecoin&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FEthereum-3C3C3D%3Fstyle%3Dfor-the-badge%26logo%3DEthereum%26logoColor%3Dwhite" width="115" height="28"></td> <td><code>https://img.shields.io/badge/Ethereum-3C3C3D?style=for-the-badge&amp;logo=Ethereum&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fiota-131F37%3Fstyle%3Dfor-the-badge%26logo%3Diota%26logoColor%3Dwhite" width="77" height="28"></td> <td><code>https://img.shields.io/badge/iota-131F37?style=for-the-badge&amp;logo=iota&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FLitecoin-A6A9AA%3Fstyle%3Dfor-the-badge%26logo%3DLitecoin%26logoColor%3Dwhite" width="109" height="28"></td> <td><code>https://img.shields.io/badge/Litecoin-A6A9AA?style=for-the-badge&amp;logo=Litecoin&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fmonero-FF6600%3Fstyle%3Dfor-the-badge%26logo%3Dmonero%26logoColor%3Dwhite" width="100" height="28"></td> <td><code>https://img.shields.io/badge/monero-FF6600?style=for-the-badge&amp;logo=monero&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fnano-4A90E2%3Fstyle%3Dfor-the-badge%26logo%3Dnano%26logoColor%3Dwhite" width="82" height="28"></td> <td><code>https://img.shields.io/badge/nano-4A90E2?style=for-the-badge&amp;logo=nano&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fpolkadot-E6007A%3Fstyle%3Dfor-the-badge%26logo%3Dpolkadot%26logoColor%3D000" width="115" height="28"></td> <td><code>https://img.shields.io/badge/polkadot-E6007A?style=for-the-badge&amp;logo=polkadot&amp;logoColor=000</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FStellar-090020%3Fstyle%3Dfor-the-badge%26logo%3Dstellar%26logoColor%3Dwhite" width="101" height="28"></td> <td><code>https://img.shields.io/badge/Stellar-090020?style=for-the-badge&amp;logo=stellar&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Ftether-168363%3Fstyle%3Dfor-the-badge%26logo%3Dtether%26logoColor%3Dwhite" width="94" height="28"></td> <td><code>https://img.shields.io/badge/tether-168363?style=for-the-badge&amp;logo=tether&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FXrp-black%3Fstyle%3Dfor-the-badge%26logo%3Dxrp%26logoColor%3Dwhite" width="69" height="28"></td> <td><code>https://img.shields.io/badge/Xrp-black?style=for-the-badge&amp;logo=xrp&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FZcash-F4B728%3Fstyle%3Dfor-the-badge%26logo%3Dzcash%26logoColor%3D000" width="87" height="28"></td> <td><code>https://img.shields.io/badge/Zcash-F4B728?style=for-the-badge&amp;logo=zcash&amp;logoColor=000</code></td> </tr> </tbody> </table></div> <p>🔝 Back to Top</p> <h2> ⚡ Database </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Badge</th> <th>URL</th> </tr> </thead> <tbody> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FAmazon%2520DynamoDB-4053D6%3Fstyle%3Dfor-the-badge%26logo%3DAmazon%2520DynamoDB%26logoColor%3Dwhite" width="180" height="28"></td> <td><code>https://img.shields.io/badge/Amazon%20DynamoDB-4053D6?style=for-the-badge&amp;logo=Amazon%20DynamoDB&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FArangoDB-DDE072%3Fstyle%3Dfor-the-badge%26logo%3DArangoDB%26logoColor%3Dwhite" width="118" height="28"></td> <td><code>https://img.shields.io/badge/ArangoDB-DDE072?style=for-the-badge&amp;logo=ArangoDB&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FCassandra-1287B1%3Fstyle%3Dfor-the-badge%26logo%3Dapache%2520cassandra%26logoColor%3Dwhite" width="124" height="28"></td> <td><code>https://img.shields.io/badge/Cassandra-1287B1?style=for-the-badge&amp;logo=apache%20cassandra&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FCockroach%2520Labs-6933FF%3Fstyle%3Dfor-the-badge%26logo%3DCockroach%2520Labs%26logoColor%3Dwhite" width="163" height="28"></td> <td><code>https://img.shields.io/badge/Cockroach%20Labs-6933FF?style=for-the-badge&amp;logo=Cockroach%20Labs&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FCouchbase-EA2328%3Fstyle%3Dfor-the-badge%26logo%3Dcouchbase%26logoColor%3Dwhite" width="123" height="28"></td> <td><code>https://img.shields.io/badge/Couchbase-EA2328?style=for-the-badge&amp;logo=couchbase&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FElastic_Search-005571%3Fstyle%3Dfor-the-badge%26logo%3Delasticsearch%26logoColor%3Dwhite" width="157" height="28"></td> <td><code>https://img.shields.io/badge/Elastic_Search-005571?style=for-the-badge&amp;logo=elasticsearch&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FInfluxDB-22ADF6%3Fstyle%3Dfor-the-badge%26logo%3DInfluxDB%26logoColor%3Dwhite" width="112" height="28"></td> <td><code>https://img.shields.io/badge/InfluxDB-22ADF6?style=for-the-badge&amp;logo=InfluxDB&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FMariaDB-003545%3Fstyle%3Dfor-the-badge%26logo%3Dmariadb%26logoColor%3Dwhite" width="106" height="28"></td> <td><code>https://img.shields.io/badge/MariaDB-003545?style=for-the-badge&amp;logo=mariadb&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FMicrosoft%2520SQL%2520Server-CC2927%3Fstyle%3Dfor-the-badge%26logo%3Dmicrosoft%2520sql%2520server%26logoColor%3Dwhite" width="189" height="28"></td> <td><code>https://img.shields.io/badge/Microsoft%20SQL%20Server-CC2927?style=for-the-badge&amp;logo=microsoft%20sql%20server&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FMongoDB-4EA94B%3Fstyle%3Dfor-the-badge%26logo%3Dmongodb%26logoColor%3Dwhite" width="110" height="28"></td> <td><code>https://img.shields.io/badge/MongoDB-4EA94B?style=for-the-badge&amp;logo=mongodb&amp;logoColor=white</code></td> </tr> <tr> <td><img alt="mysql" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FMySQL-005C84%3Fstyle%3Dfor-the-badge%26logo%3Dmysql%26logoColor%3Dwhite" width="88" height="28"></td> <td><code>https://img.shields.io/badge/MySQL-005C84?style=for-the-badge&amp;logo=mysql&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FNeo4j-018bff%3Fstyle%3Dfor-the-badge%26logo%3Dneo4j%26logoColor%3Dwhite" width="86" height="28"></td> <td><code>https://img.shields.io/badge/Neo4j-018bff?style=for-the-badge&amp;logo=neo4j&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FOracle-F80000%3Fstyle%3Dfor-the-badge%26logo%3DOracle%26logoColor%3Dwhite" width="95" height="28"></td> <td><code>https://img.shields.io/badge/Oracle-F80000?style=for-the-badge&amp;logo=Oracle&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FPostgreSQL-316192%3Fstyle%3Dfor-the-badge%26logo%3Dpostgresql%26logoColor%3Dwhite" width="130" height="28"></td> <td><code>https://img.shields.io/badge/PostgreSQL-316192?style=for-the-badge&amp;logo=postgresql&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Frabbitmq-%2523FF6600.svg%3F%26style%3Dfor-the-badge%26logo%3Drabbitmq%26logoColor%3Dwhite" width="115" height="28"></td> <td><code>https://img.shields.io/badge/rabbitmq-%23FF6600.svg?&amp;style=for-the-badge&amp;logo=rabbitmq&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fredis-%2523DD0031.svg%3F%26style%3Dfor-the-badge%26logo%3Dredis%26logoColor%3Dwhite" width="85" height="28"></td> <td><code>https://img.shields.io/badge/redis-%23DD0031.svg?&amp;style=for-the-badge&amp;logo=redis&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FRealm-39477F%3Fstyle%3Dfor-the-badge%26logo%3Drealm%26logoColor%3Dwhite" width="88" height="28"></td> <td><code>https://img.shields.io/badge/Realm-39477F?style=for-the-badge&amp;logo=realm&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FSQLite-07405E%3Fstyle%3Dfor-the-badge%26logo%3Dsqlite%26logoColor%3Dwhite" width="92" height="28"></td> <td><code>https://img.shields.io/badge/SQLite-07405E?style=for-the-badge&amp;logo=sqlite&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FSupabase-181818%3Fstyle%3Dfor-the-badge%26logo%3Dsupabase%26logoColor%3Dwhite" width="113" height="28"></td> <td><code>https://img.shields.io/badge/Supabase-181818?style=for-the-badge&amp;logo=supabase&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FFirebase-039BE5%3Fstyle%3Dfor-the-badge%26logo%3DFirebase%26logoColor%3Dwhite" width="109" height="28"></td> <td><code>https://img.shields.io/badge/Firebase-039BE5?style=for-the-badge&amp;logo=Firebase&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FInfluxDB-22ADF6%3Fstyle%3Dfor-the-badge%26logo%3DInfluxDB%26logoColor%3Dwhite" width="112" height="28"></td> <td><code>https://img.shields.io/badge/InfluxDB-22ADF6?style=for-the-badge&amp;logo=InfluxDB&amp;logoColor=white</code></td> </tr> </tbody> </table></div> <p>🔝 Back to Top</p> <h2> 🖍 Design </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Badge</th> <th>URL</th> </tr> </thead> <tbody> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FAdobe%2520after%2520affects-CF96FD%3Fstyle%3Dfor-the-badge%26logo%3DAdobe%2520after%2520effects%26logoColor%3D393665" width="197" height="28"></td> <td><code>https://img.shields.io/badge/Adobe%20after%20affects-CF96FD?style=for-the-badge&amp;logo=Adobe%20after%20effects&amp;logoColor=393665</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FAdobe%2520Creative%2520Cloud-DA1F26%3Fstyle%3Dfor-the-badge%26logo%3DAdobe%2520Creative%2520Cloud%26logoColor%3Dwhite" width="209" height="28"></td> <td><code>https://img.shields.io/badge/Adobe%20Creative%20Cloud-DA1F26?style=for-the-badge&amp;logo=Adobe%20Creative%20Cloud&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FAdobe%2520Illustrator-FF9A00%3Fstyle%3Dfor-the-badge%26logo%3Dadobe%2520illustrator%26logoColor%3Dwhite" width="186" height="28"></td> <td><code>https://img.shields.io/badge/Adobe%20Illustrator-FF9A00?style=for-the-badge&amp;logo=adobe%20illustrator&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FAdobe%2520InDesign-FF3366%3Fstyle%3Dfor-the-badge%26logo%3DAdobe%2520InDesign%26logoColor%3Dwhite" width="161" height="28"></td> <td><code>https://img.shields.io/badge/Adobe%20InDesign-FF3366?style=for-the-badge&amp;logo=Adobe%20InDesign&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FAdobe%2520Lightroom-31A8FF%3Fstyle%3Dfor-the-badge%26logo%3DAdobe%2520Lightroom%26logoColor%3Dwhite" width="173" height="28"></td> <td><code>https://img.shields.io/badge/Adobe%20Lightroom-31A8FF?style=for-the-badge&amp;logo=Adobe%20Lightroom&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FAdobe%2520Photoshop-31A8FF%3Fstyle%3Dfor-the-badge%26logo%3DAdobe%2520Photoshop%26logoColor%3Dblack" width="175" height="28"></td> <td><code>https://img.shields.io/badge/Adobe%20Photoshop-31A8FF?style=for-the-badge&amp;logo=Adobe%20Photoshop&amp;logoColor=black</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FAdobe%2520Premiere%2520Pro-9999FF%3Fstyle%3Dfor-the-badge%26logo%3DAdobe%2520Premiere%2520Pro%26logoColor%3Dwhite" width="193" height="28"></td> <td><code>https://img.shields.io/badge/Adobe%20Premiere%20Pro-9999FF?style=for-the-badge&amp;logo=Adobe%20Premiere%20Pro&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FAdobe%2520XD-470137%3Fstyle%3Dfor-the-badge%26logo%3DAdobe%2520XD%26logoColor%3D%23FF61F6" width="112" height="28"></td> <td><code>https://img.shields.io/badge/Adobe%20XD-470137?style=for-the-badge&amp;logo=Adobe%20XD&amp;logoColor=#FF61F6</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Faffinityphoto-%25237E4DD2.svg%3Fstyle%3Dfor-the-badge%26logo%3Daffinity-photo%26logoColor%3Dwhite" width="153" height="28"></td> <td><code>https://img.shields.io/badge/affinityphoto-%237E4DD2.svg?style=for-the-badge&amp;logo=affinity-photo&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Faffinitydesginer-%25231B72BE.svg%3Fstyle%3Dfor-the-badge%26logo%3Daffinity-designer%26logoColor%3Dwhite" width="177" height="28"></td> <td><code>https://img.shields.io/badge/affinitydesginer-%231B72BE.svg?style=for-the-badge&amp;logo=affinity-designer&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Faltium%2520designer-A5915F%3Fstyle%3Dfor-the-badge%26logo%3Daltium%2520designer%26logoColor%3Dwhite" width="168" height="28"></td> <td><code>https://img.shields.io/badge/altium%20designer-A5915F?style=for-the-badge&amp;logo=altium%20designer&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FBehance-0054F7%3Fstyle%3Dfor-the-badge%26logo%3Dbehance%26logoColor%3Dwhite" width="105" height="28"></td> <td><code>https://img.shields.io/badge/Behance-0054F7?style=for-the-badge&amp;logo=behance&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fblender-%2523F5792A.svg%3Fstyle%3Dfor-the-badge%26logo%3Dblender%26logoColor%3Dwhite" width="104" height="28"></td> <td><code>https://img.shields.io/badge/blender-%23F5792A.svg?style=for-the-badge&amp;logo=blender&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FCanva-%252300C4CC.svg%3F%26style%3Dfor-the-badge%26logo%3DCanva%26logoColor%3Dwhite" width="88" height="28"></td> <td><code>https://img.shields.io/badge/Canva-%2300C4CC.svg?&amp;style=for-the-badge&amp;logo=Canva&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FDribbble-EA4C89%3Fstyle%3Dfor-the-badge%26logo%3Ddribbble%26logoColor%3Dwhite" width="111" height="28"></td> <td><code>https://img.shields.io/badge/Dribbble-EA4C89?style=for-the-badge&amp;logo=dribbble&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FFigma-F24E1E%3Fstyle%3Dfor-the-badge%26logo%3Dfigma%26logoColor%3Dwhite" width="87" height="28"></td> <td><code>https://img.shields.io/badge/Figma-F24E1E?style=for-the-badge&amp;logo=figma&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FFramer-black%3Fstyle%3Dfor-the-badge%26logo%3Dframer%26logoColor%3Dblue" width="97" height="28"></td> <td><code>https://img.shields.io/badge/Framer-black?style=for-the-badge&amp;logo=framer&amp;logoColor=blue</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fgimp-5C5543%3Fstyle%3Dfor-the-badge%26logo%3Dgimp%26logoColor%3Dwhite" width="79" height="28"></td> <td><code>https://img.shields.io/badge/gimp-5C5543?style=for-the-badge&amp;logo=gimp&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FInVision-FF3366%3Fstyle%3Dfor-the-badge%26logo%3DInVision%26logoColor%3Dwhite" width="110" height="28"></td> <td><code>https://img.shields.io/badge/InVision-FF3366?style=for-the-badge&amp;logo=InVision&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FInkscape-000000%3Fstyle%3Dfor-the-badge%26logo%3DInkscape%26logoColor%3Dwhite" width="111" height="28"></td> <td><code>https://img.shields.io/badge/Inkscape-000000?style=for-the-badge&amp;logo=Inkscape&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FKrita-203759%3Fstyle%3Dfor-the-badge%26logo%3Dkrita%26logoColor%3DEEF37B" width="85" height="28"></td> <td><code>https://img.shields.io/badge/Krita-203759?style=for-the-badge&amp;logo=krita&amp;logoColor=EEF37B</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FProto.io-161637%3Fstyle%3Dfor-the-badge%26logo%3Dproto.io%26logoColor%3D00e5ff" width="110" height="28"></td> <td><code>https://img.shields.io/badge/Proto.io-161637?style=for-the-badge&amp;logo=proto.io&amp;logoColor=00e5ff</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fsemantic%2520ui%2520react-35BDB2%3Fstyle%3Dfor-the-badge%26logo%3Dsemanticuireact%26logoColor%3Dwhite" width="181" height="28"></td> <td><code>https://img.shields.io/badge/semantic%20ui%20react-35BDB2?style=for-the-badge&amp;logo=semanticuireact&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FSketch-FFB387%3Fstyle%3Dfor-the-badge%26logo%3Dsketch%26logoColor%3Dblack" width="95" height="28"></td> <td><code>https://img.shields.io/badge/Sketch-FFB387?style=for-the-badge&amp;logo=sketch&amp;logoColor=black</code></td> </tr> </tbody> </table></div> <p>🔝 Back to Top</p> <h2> 📚 Education </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Badge</th> <th>URL</th> </tr> </thead> <tbody> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FCodecademy-FFF0E5%3Fstyle%3Dfor-the-badge%26logo%3Dcodecademy%26logoColor%3D303347" width="133" height="28"></td> <td><code>https://img.shields.io/badge/Codecademy-FFF0E5?style=for-the-badge&amp;logo=codecademy&amp;logoColor=303347</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fcoding%2520ninjas-DD6620%3Fstyle%3Dfor-the-badge%26logo%3Dcodingninjas%26logoColor%3Dwhite" width="152" height="28"></td> <td><code>https://img.shields.io/badge/coding%20ninjas-DD6620?style=for-the-badge&amp;logo=codingninjas&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FCoursera-0056D2%3Fstyle%3Dfor-the-badge%26logo%3DCoursera%26logoColor%3Dwhite" width="115" height="28"></td> <td><code>https://img.shields.io/badge/Coursera-0056D2?style=for-the-badge&amp;logo=Coursera&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FDatacamp-05192D%3Fstyle%3Dfor-the-badge%26logo%3Ddatacamp%26logoColor%3D65FF8F" width="116" height="28"></td> <td><code>https://img.shields.io/badge/Datacamp-05192D?style=for-the-badge&amp;logo=datacamp&amp;logoColor=65FF8F</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FDuolingo-58CC02%3Fstyle%3Dfor-the-badge%26logo%3DDuolingo%26logoColor%3Dwhite" width="115" height="28"></td> <td><code>https://img.shields.io/badge/Duolingo-58CC02?style=for-the-badge&amp;logo=Duolingo&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FEdx-193A3E%3Fstyle%3Dfor-the-badge%26logo%3Dedx%26logoColor%3Dwhite" width="69" height="28"></td> <td><code>https://img.shields.io/badge/Edx-193A3E?style=for-the-badge&amp;logo=edx&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FExercism-009CAB%3Fstyle%3Dfor-the-badge%26logo%3Dexercism%26logoColor%3Dwhite" width="112" height="28"></td> <td><code>https://img.shields.io/badge/Exercism-009CAB?style=for-the-badge&amp;logo=exercism&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Ffreecodecamp-27273D%3Fstyle%3Dfor-the-badge%26logo%3Dfreecodecamp%26logoColor%3Dwhite" width="149" height="28"></td> <td><code>https://img.shields.io/badge/freecodecamp-27273D?style=for-the-badge&amp;logo=freecodecamp&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FFuture%2520Learn-000000%3Fstyle%3Dfor-the-badge%26logo%3Dfuturelearn%26logoColor%3Dwhite" width="143" height="28"></td> <td><code>https://img.shields.io/badge/Future%20Learn-000000?style=for-the-badge&amp;logo=futurelearn&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FGoogle%2520Scholar-4285F4%3Fstyle%3Dfor-the-badge%26logo%3Dgoogle-scholar%26logoColor%3Dwhite" width="164" height="28"></td> <td><code>https://img.shields.io/badge/Google%20Scholar-4285F4?style=for-the-badge&amp;logo=google-scholar&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FHTML%2520Academy-302683%3Fstyle%3Dfor-the-badge%26logo%3DHTML%2520Academy%26logoColor%3Dwhite" width="148" height="28"></td> <td><code>https://img.shields.io/badge/HTML%20Academy-302683?style=for-the-badge&amp;logo=HTML%20Academy&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FKatacoda-F48220%3Fstyle%3Dfor-the-badge%26logo%3DKatacoda%26logoColor%3Dwhite" width="115" height="28"></td> <td><code>https://img.shields.io/badge/Katacoda-F48220?style=for-the-badge&amp;logo=Katacoda&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FKhan%2520Academy-14BF96%3Fstyle%3Dfor-the-badge%26logo%3DKhan%2520Academy%26logoColor%3Dwhite" width="149" height="28"></td> <td><code>https://img.shields.io/badge/Khan%20Academy-14BF96?style=for-the-badge&amp;logo=Khan%20Academy&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FMDN_Web_Docs-black%3Fstyle%3Dfor-the-badge%26logo%3Dmdnwebdocs%26logoColor%3Dwhite" width="148" height="28"></td> <td><code>https://img.shields.io/badge/MDN_Web_Docs-black?style=for-the-badge&amp;logo=mdnwebdocs&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FMicrosoft%2520Academic-2D9FD9%3Fstyle%3Dfor-the-badge%26logo%3DMicrosoft%2520Academic%26logoColor%3Dwhite" width="176" height="28"></td> <td><code>https://img.shields.io/badge/Microsoft%20Academic-2D9FD9?style=for-the-badge&amp;logo=Microsoft%20Academic&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FPluralsight-F15B2A%3Fstyle%3Dfor-the-badge%26logo%3DPluralsight%26logoColor%3Dwhite" width="136" height="28"></td> <td><code>https://img.shields.io/badge/Pluralsight-F15B2A?style=for-the-badge&amp;logo=Pluralsight&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FProgate-380953%3Fstyle%3Dfor-the-badge%26logo%3Dprogate%26logoColor%3Dwhite" width="105" height="28"></td> <td><code>https://img.shields.io/badge/Progate-380953?style=for-the-badge&amp;logo=progate&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fscrimba-2B283A%3Fstyle%3Dfor-the-badge%26logo%3Dscrimba%26logoColor%3Dwhite" width="104" height="28"></td> <td><code>https://img.shields.io/badge/scrimba-2B283A?style=for-the-badge&amp;logo=scrimba&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FSimplenote-3361CC%3Fstyle%3Dfor-the-badge%26logo%3DSimplenote%26logoColor%3Dwhite" width="129" height="28"></td> <td><code>https://img.shields.io/badge/Simplenote-3361CC?style=for-the-badge&amp;logo=Simplenote&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fgitignore.io-204ECF%3Fstyle%3Dfor-the-badge%26logo%3Dgitignore.io%26logoColor%3Dwhite" width="142" height="28"></td> <td><code>https://img.shields.io/badge/gitignore.io-204ECF?style=for-the-badge&amp;logo=gitignore.io&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fskill%2520share-002333%3Fstyle%3Dfor-the-badge%26logo%3Dskillshare%26logoColor%3Dwhite" width="131" height="28"></td> <td><code>https://img.shields.io/badge/skill%20share-002333?style=for-the-badge&amp;logo=skillshare&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FUdacity-grey%3Fstyle%3Dfor-the-badge%26logo%3Dudacity%26logoColor%3D%235FCFEE" width="103" height="28"></td> <td><code>https://img.shields.io/badge/Udacity-grey?style=for-the-badge&amp;logo=udacity&amp;logoColor=#5FCFEE</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FUdemy-A100FF%3Fstyle%3Dfor-the-badge%26logo%3DUdemy%26logoColor%3Dwhite" width="90" height="28"></td> <td><code>https://img.shields.io/badge/Udemy-EC5252?style=for-the-badge&amp;logo=Udemy&amp;logoColor=white</code></td> </tr> </tbody> </table></div> <p>🔝 Back to Top</p> <h2> 🌐 ETL </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Badge</th> <th>URL</th> </tr> </thead> <tbody> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FDatabricks-FF3621%3Fstyle%3Dfor-the-badge%26logo%3DDatabricks%26logoColor%3Dwhite" width="129" height="28"></td> <td><code>https://img.shields.io/badge/Databricks-FF3621?style=for-the-badge&amp;logo=Databricks&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FDataiku-2AB1AC%3Fstyle%3Dfor-the-badge%26logo%3Ddataiku%26logoColor%3Dwhite" width="103" height="28"></td> <td><code>https://img.shields.io/badge/Dataiku-2AB1AC?style=for-the-badge&amp;logo=dataiku&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FTalend-FF6D70%3Fstyle%3Dfor-the-badge%26logo%3DTalend%26logoColor%3Dwhite" width="95" height="28"></td> <td><code>https://img.shields.io/badge/Talend-FF6D70?style=for-the-badge&amp;logo=Talend&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FSpark%2520AR-FF5C83%3Fstyle%3Dfor-the-badge%26logo%3DSpark%2520AR%26logoColor%3Dwhite" width="110" height="28"></td> <td><code>https://img.shields.io/badge/Spark%20AR-FF5C83?style=for-the-badge&amp;logo=Spark AR&amp;logoColor=white</code></td> </tr> </tbody> </table></div> <p>🔝 Back to Top</p> <h2> 👩‍💻 IDE </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Badge</th> <th>URL</th> </tr> </thead> <tbody> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FAdobe%2520Dreamweaver-072401%3Fstyle%3Dfor-the-badge%26logo%3DAdobe%2520Dreamweaver%26logoColor%3D34F400" width="195" height="28"></td> <td><code>https://img.shields.io/badge/Adobe%20Dreamweaver-072401?style=for-the-badge&amp;logo=Adobe%20Dreamweaver&amp;logoColor=34F400</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FAndroid_Studio-3DDC84%3Fstyle%3Dfor-the-badge%26logo%3Dandroid-studio%26logoColor%3Dwhite" width="163" height="28"></td> <td><code>https://img.shields.io/badge/Android_Studio-3DDC84?style=for-the-badge&amp;logo=android-studio&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fapache%2520netbeans-1B6AC6%3Fstyle%3Dfor-the-badge%26logo%3Dapache%2520netbeans%2520IDE%26logoColor%3Dwhite" width="170" height="28"></td> <td><code>https://img.shields.io/badge/apache%20netbeans-1B6AC6?style=for-the-badge&amp;logo=apache%20netbeans%20IDE&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FArduino_IDE-00979D%3Fstyle%3Dfor-the-badge%26logo%3Darduino%26logoColor%3Dwhite" width="135" height="28"></td> <td><code>https://img.shields.io/badge/Arduino_IDE-00979D?style=for-the-badge&amp;logo=arduino&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FAtom-66595C%3Fstyle%3Dfor-the-badge%26logo%3DAtom%26logoColor%3Dwhite" width="61" height="28"></td> <td><code>https://img.shields.io/badge/Atom-66595C?style=for-the-badge&amp;logo=Atom&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FCLion-000000%3Fstyle%3Dfor-the-badge%26logo%3Dclion%26logoColor%3Dwhite" width="86" height="28"></td> <td><code>https://img.shields.io/badge/CLion-000000?style=for-the-badge&amp;logo=clion&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2F-CodeChef-5B4638%3Fstyle%3Dfor-the-badge%26logo%3DCodeChef%26logoColor%3Dwhite" width="113" height="28"></td> <td><code>https://img.shields.io/badge/-CodeChef-5B4638?style=for-the-badge&amp;logo=CodeChef&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FCodesandbox-000000%3Fstyle%3Dfor-the-badge%26logo%3DCodeSandbox%26logoColor%3Dwhite" width="143" height="28"></td> <td><code>https://img.shields.io/badge/Codesandbox-000000?style=for-the-badge&amp;logo=CodeSandbox&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FColab-F9AB00%3Fstyle%3Dfor-the-badge%26logo%3Dgooglecolab%26color%3D525252" width="87" height="28"></td> <td><code>https://img.shields.io/badge/Colab-F9AB00?style=for-the-badge&amp;logo=googlecolab&amp;color=525252</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FDelphi_RAD_Studio-B22222%3Fstyle%3Dfor-the-badge%26logo%3Ddelphi%26logoColor%3Dwhite" width="182" height="28"></td> <td><code>https://img.shields.io/badge/Delphi_RAD_Studio-B22222?style=for-the-badge&amp;logo=delphi&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FEclipse-2C2255%3Fstyle%3Dfor-the-badge%26logo%3Declipse%26logoColor%3Dwhite" width="99" height="28"></td> <td><code>https://img.shields.io/badge/Eclipse-2C2255?style=for-the-badge&amp;logo=eclipse&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FEmacs-%25237F5AB6.svg%3F%26style%3Dfor-the-badge%26logo%3Dgnu-emacs%26logoColor%3Dwhite" width="88" height="28"></td> <td><code>https://img.shields.io/badge/Emacs-%237F5AB6.svg?&amp;style=for-the-badge&amp;logo=gnu-emacs&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FGitpod-000000%3Fstyle%3Dfor-the-badge%26logo%3Dgitpod%26logoColor%3D%23FFAE33" width="95" height="28"></td> <td><code>https://img.shields.io/badge/Gitpod-000000?style=for-the-badge&amp;logo=gitpod&amp;logoColor=#FFAE33</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FIntelliJ_IDEA-000000.svg%3Fstyle%3Dfor-the-badge%26logo%3Dintellij-idea%26logoColor%3Dwhite" width="143" height="28"></td> <td><code>https://img.shields.io/badge/IntelliJ_IDEA-000000.svg?style=for-the-badge&amp;logo=intellij-idea&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FJSFiddle-0084FF%3Fstyle%3Dfor-the-badge%26logo%3DJSFiddle%26logoColor%3Dwhite" width="108" height="28"></td> <td><code>https://img.shields.io/badge/JSFiddle-0084FF?style=for-the-badge&amp;logo=JSFiddle&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FNeoVim-%252357A143.svg%3F%26style%3Dfor-the-badge%26logo%3Dneovim%26logoColor%3Dwhite" width="97" height="28"></td> <td><code>https://img.shields.io/badge/NeoVim-%2357A143.svg?&amp;style=for-the-badge&amp;logo=neovim&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FNotepad%2B%2B-90E59A.svg%3Fstyle%3Dfor-the-badge%26logo%3Dnotepad%252B%252B%26logoColor%3Dblack" width="126" height="28"></td> <td><code>https://img.shields.io/badge/Notepad++-90E59A.svg?style=for-the-badge&amp;logo=notepad%2B%2B&amp;logoColor=black</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/http%3A%2F%2Fimg.shields.io%2Fbadge%2F-PHPStorm-181717%3Fstyle%3Dfor-the-badge%26logo%3Dphpstorm%26logoColor%3Dwhite" width="116" height="28"></td> <td><code>http://img.shields.io/badge/-PHPStorm-181717?style=for-the-badge&amp;logo=phpstorm&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FPyCharm-000000.svg%3F%26style%3Dfor-the-badge%26logo%3DPyCharm%26logoColor%3Dwhite" width="107" height="28"></td> <td><code>https://img.shields.io/badge/PyCharm-000000.svg?&amp;style=for-the-badge&amp;logo=PyCharm&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Freplit-667881%3Fstyle%3Dfor-the-badge%26logo%3Dreplit%26logoColor%3Dwhite" width="91" height="28"></td> <td><code>https://img.shields.io/badge/replit-667881?style=for-the-badge&amp;logo=replit&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FRider-000000%3Fstyle%3Dfor-the-badge%26logo%3DRider%26logoColor%3Dwhite" width="86" height="28"></td> <td><code>https://img.shields.io/badge/Rider-000000?style=for-the-badge&amp;logo=Rider&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FRStudio-75AADB%3Fstyle%3Dfor-the-badge%26logo%3DRStudio%26logoColor%3Dwhite" width="84" height="28"></td> <td><code>https://img.shields.io/badge/RStudio-75AADB?style=for-the-badge&amp;logo=RStudio&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FRunKit-491757%3Fstyle%3Dfor-the-badge%26logo%3DRunKit%26logoColor%3Dwhite" width="95" height="28"></td> <td><code>https://img.shields.io/badge/RunKit-491757?style=for-the-badge&amp;logo=RunKit&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FSpyder%2520Ide-FF0000%3Fstyle%3Dfor-the-badge%26logo%3Dspyder%2520ide%26logoColor%3Dwhite" width="124" height="28"></td> <td><code>https://img.shields.io/badge/Spyder%20Ide-FF0000?style=for-the-badge&amp;logo=spyder%20ide&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fsublime_text-%2523575757.svg%3F%26style%3Dfor-the-badge%26logo%3Dsublime-text%26logoColor%3Dimportant" width="141" height="28"></td> <td><code>https://img.shields.io/badge/sublime_text-%23575757.svg?&amp;style=for-the-badge&amp;logo=sublime-text&amp;logoColor=important</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FVIM-%252311AB00.svg%3F%26style%3Dfor-the-badge%26logo%3Dvim%26logoColor%3Dwhite" width="69" height="28"></td> <td><code>https://img.shields.io/badge/VIM-%2311AB00.svg?&amp;style=for-the-badge&amp;logo=vim&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FVisual_Studio-5C2D91%3Fstyle%3Dfor-the-badge%26logo%3Dvisual%2520studio%26logoColor%3Dwhite" width="130" height="28"></td> <td><code>https://img.shields.io/badge/Visual_Studio-5C2D91?style=for-the-badge&amp;logo=visual%20studio&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FVisual_Studio_Code-0078D4%3Fstyle%3Dfor-the-badge%26logo%3Dvisual%2520studio%2520code%26logoColor%3Dwhite" width="170" height="28"></td> <td><code>https://img.shields.io/badge/Visual_Studio_Code-0078D4?style=for-the-badge&amp;logo=visual%20studio%20code&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FWebStorm-000000%3Fstyle%3Dfor-the-badge%26logo%3DWebStorm%26logoColor%3Dwhite" width="119" height="28"></td> <td><code>https://img.shields.io/badge/WebStorm-000000?style=for-the-badge&amp;logo=WebStorm&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FXcode-007ACC%3Fstyle%3Dfor-the-badge%26logo%3DXcode%26logoColor%3Dwhite" width="88" height="28"></td> <td><code>https://img.shields.io/badge/Xcode-007ACC?style=for-the-badge&amp;logo=Xcode&amp;logoColor=white</code></td> </tr> </tbody> </table></div> <p>🔝 Back to Top</p> <h2> 🔌 IDE Plugin </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Badge</th> <th>URL</th> </tr> </thead> <tbody> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FEditor%2520Config-E0EFEF%3Fstyle%3Dfor-the-badge%26logo%3Deditorconfig%26logoColor%3D000" width="151" height="28"></td> <td><code>https://img.shields.io/badge/Editor%20Config-E0EFEF?style=for-the-badge&amp;logo=editorconfig&amp;logoColor=000</code></td> </tr> </tbody> </table></div> <p>🔝 Back to Top</p> <h2> 🧐 Linters </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Badge</th> <th>URL</th> </tr> </thead> <tbody> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Feslint-3A33D1%3Fstyle%3Dfor-the-badge%26logo%3Deslint%26logoColor%3Dwhite" width="92" height="28"></td> <td><code>https://img.shields.io/badge/eslint-3A33D1?style=for-the-badge&amp;logo=eslint&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fprettier-1A2C34%3Fstyle%3Dfor-the-badge%26logo%3Dprettier%26logoColor%3DF7BA3E" width="109" height="28"></td> <td><code>https://img.shields.io/badge/prettier-1A2C34?style=for-the-badge&amp;logo=prettier&amp;logoColor=F7BA3E</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fstylelint-000%3Fstyle%3Dfor-the-badge%26logo%3Dstylelint%26logoColor%3Dwhite" width="116" height="28"></td> <td><code>https://img.shields.io/badge/stylelint-000?style=for-the-badge&amp;logo=stylelint&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FSonarLint-CB2029%3Fstyle%3Dfor-the-badge%26logo%3Dsonarlint%26logoColor%3Dwhite" width="121" height="28"></td> <td><code>https://img.shields.io/badge/SonarLint-CB2029?style=for-the-badge&amp;logo=sonarlint&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FRome-27272A%3Flogo%3Drome%26logoColor%3Dfff%26style%3Dfor-the-badge" width="61" height="28"></td> <td><code>https://img.shields.io/badge/Rome-27272A?logo=rome&amp;logoColor=fff&amp;style=for-the-badge</code></td> </tr> </tbody> </table></div> <p>🔝 Back to Top</p> <h2> 📱 Mobile Frameworks </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Badge</th> <th>URL</th> </tr> </thead> <tbody> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FCapacitor-119EFF%3Fstyle%3Dfor-the-badge%26logo%3DCapacitor%26logoColor%3Dwhite" width="120" height="28"></td> <td><code>https://img.shields.io/badge/Capacitor-119EFF?style=for-the-badge&amp;logo=Capacitor&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FCordova-35434F%3Fstyle%3Dfor-the-badge%26logo%3Dapache-cordova%26logoColor%3DE8E8E8" width="107" height="28"></td> <td><code>https://img.shields.io/badge/Cordova-35434F?style=for-the-badge&amp;logo=apache-cordova&amp;logoColor=E8E8E8</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FFlutter-02569B%3Fstyle%3Dfor-the-badge%26logo%3Dflutter%26logoColor%3Dwhite" width="101" height="28"></td> <td><code>https://img.shields.io/badge/Flutter-02569B?style=for-the-badge&amp;logo=flutter&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FIonic-3880FF%3Fstyle%3Dfor-the-badge%26logo%3Dionic%26logoColor%3Dwhite" width="85" height="28"></td> <td><code>https://img.shields.io/badge/Ionic-3880FF?style=for-the-badge&amp;logo=ionic&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FNativeScript-3655FF%3Fstyle%3Dfor-the-badge%26logo%3DNativeScript%26logoColor%3Dblack" width="143" height="28"></td> <td><code>https://img.shields.io/badge/NativeScript-3655FF?style=for-the-badge&amp;logo=NativeScript&amp;logoColor=black</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FReact_Native-20232A%3Fstyle%3Dfor-the-badge%26logo%3Dreact%26logoColor%3D61DAFB" width="141" height="28"></td> <td><code>https://img.shields.io/badge/React_Native-20232A?style=for-the-badge&amp;logo=react&amp;logoColor=61DAFB</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FSencha-044059%3Fstyle%3Dfor-the-badge%26logo%3Dsencha%26logoColor%3D%2395C93D" width="96" height="28"></td> <td><code>https://img.shields.io/badge/Sencha-044059?style=for-the-badge&amp;logo=sencha&amp;logoColor=#95C93D</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FXamarin-3498DB%3Fstyle%3Dfor-the-badge%26logo%3Dxamarin%26logoColor%3Dwhite" width="86" height="28"></td> <td><code>https://img.shields.io/badge/Xamarin-3498DB?style=for-the-badge&amp;logo=xamarin&amp;logoColor=white</code></td> </tr> </tbody> </table></div> <p>🔝 Back to Top</p> <h2> 👨‍💻 Office </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Badge</th> <th>URL</th> </tr> </thead> <tbody> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FAirtable-18BFFF%3Fstyle%3Dfor-the-badge%26logo%3DAirtable%26logoColor%3Dwhite" width="110" height="28"></td> <td><code>https://img.shields.io/badge/Airtable-18BFFF?style=for-the-badge&amp;logo=Airtable&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FApache_OpenOffice-0E85CD%3Fstyle%3Dfor-the-badge%26logo%3DApacheOpenOffice%26logoColor%3Dwhite" width="185" height="28"></td> <td><code>https://img.shields.io/badge/Apache_OpenOffice-0E85CD?style=for-the-badge&amp;logo=ApacheOpenOffice&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FGoogle%2520Sheets-34A853%3Fstyle%3Dfor-the-badge%26logo%3Dgoogle-sheets%26logoColor%3Dwhite" width="152" height="28"></td> <td><code>https://img.shields.io/badge/Google%20Sheets-34A853?style=for-the-badge&amp;logo=google-sheets&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FJoplin-1071D3%3Fstyle%3Dfor-the-badge%26logo%3Djoplin%26logoColor%3Dwhite" width="92" height="28"></td> <td><code>https://img.shields.io/badge/Joplin-1071D3?style=for-the-badge&amp;logo=joplin&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FLibreOffice-18A303%3Fstyle%3Dfor-the-badge%26logo%3DLibreOffice%26logoColor%3Dwhite" width="132" height="28"></td> <td><code>https://img.shields.io/badge/LibreOffice-18A303?style=for-the-badge&amp;logo=LibreOffice&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FMicrosoft_Access-A4373A%3Fstyle%3Dfor-the-badge%26logo%3Dmicrosoft-access%26logoColor%3Dwhite" width="158" height="28"></td> <td><code>https://img.shields.io/badge/Microsoft_Access-A4373A?style=for-the-badge&amp;logo=microsoft-access&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FMicrosoft_Excel-217346%3Fstyle%3Dfor-the-badge%26logo%3Dmicrosoft-excel%26logoColor%3Dwhite" width="147" height="28"></td> <td><code>https://img.shields.io/badge/Microsoft_Excel-217346?style=for-the-badge&amp;logo=microsoft-excel&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FMicrosoft_Office-D83B01%3Fstyle%3Dfor-the-badge%26logo%3Dmicrosoft-office%26logoColor%3Dwhite" width="155" height="28"></td> <td><code>https://img.shields.io/badge/Microsoft_Office-D83B01?style=for-the-badge&amp;logo=microsoft-office&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FMicrosoft_PowerPoint-B7472A%3Fstyle%3Dfor-the-badge%26logo%3Dmicrosoft-powerpoint%26logoColor%3Dwhite" width="198" height="28"></td> <td><code>https://img.shields.io/badge/Microsoft_PowerPoint-B7472A?style=for-the-badge&amp;logo=microsoft-powerpoint&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FMicrosoft_SharePoint-0078D4%3Fstyle%3Dfor-the-badge%26logo%3Dmicrosoft-sharepoint%26logoColor%3Dwhite" width="194" height="28"></td> <td><code>https://img.shields.io/badge/Microsoft_SharePoint-0078D4?style=for-the-badge&amp;logo=microsoft-sharepoint&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FMicrosoft_SQL_Server-CC2927%3Fstyle%3Dfor-the-badge%26logo%3Dmicrosoft-sql-server%26logoColor%3Dwhite" width="189" height="28"></td> <td><code>https://img.shields.io/badge/Microsoft_SQL_Server-CC2927?style=for-the-badge&amp;logo=microsoft-sql-server&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FMicrosoft_Visio-3955A3%3Fstyle%3Dfor-the-badge%26logo%3Dmicrosoft-visio%26logoColor%3Dwhite" width="146" height="28"></td> <td><code>https://img.shields.io/badge/Microsoft_Visio-3955A3?style=for-the-badge&amp;logo=microsoft-visio&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FMicrosoft_Word-2B579A%3Fstyle%3Dfor-the-badge%26logo%3Dmicrosoft-word%26logoColor%3Dwhite" width="147" height="28"></td> <td><code>https://img.shields.io/badge/Microsoft_Word-2B579A?style=for-the-badge&amp;logo=microsoft-word&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FMiro-050038%3Fstyle%3Dfor-the-badge%26logo%3DMiro%26logoColor%3Dwhite" width="80" height="28"></td> <td><code>https://img.shields.io/badge/Miro-050038?style=for-the-badge&amp;logo=Miro&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FNotion-000000%3Fstyle%3Dfor-the-badge%26logo%3Dnotion%26logoColor%3Dwhite" width="97" height="28"></td> <td><code>https://img.shields.io/badge/Notion-000000?style=for-the-badge&amp;logo=notion&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FOverleaf-47A141%3Fstyle%3Dfor-the-badge%26logo%3DOverleaf%26logoColor%3Dwhite" width="112" height="28"></td> <td><code>https://img.shields.io/badge/Overleaf-47A141?style=for-the-badge&amp;logo=Overleaf&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FPrezi-3181FF%3Fstyle%3Dfor-the-badge%26logo%3Dprezi%26logoColor%3Dwhite" width="84" height="28"></td> <td><code>https://img.shields.io/badge/Prezi-3181FF?style=for-the-badge&amp;logo=prezi&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FTodoist-E44332%3Fstyle%3Dfor-the-badge%26logo%3Dtodoist%26logoColor%3Dwhite" width="103" height="28"></td> <td><code>https://img.shields.io/badge/Todoist-E44332?style=for-the-badge&amp;logo=todoist&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FTrello-0052CC%3Fstyle%3Dfor-the-badge%26logo%3Dtrello%26logoColor%3Dwhite" width="93" height="28"></td> <td><code>https://img.shields.io/badge/Trello-0052CC?style=for-the-badge&amp;logo=trello&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FLibreOffice-%252318A303%3Fstyle%3Dfor-the-badge%26logo%3DLibreOffice%26logoColor%3Dwhite" width="132" height="28"></td> <td><code>https://img.shields.io/badge/LibreOffice-%2318A303?style=for-the-badge&amp;logo=LibreOffice&amp;logoColor=white</code></td> </tr> </tbody> </table></div> <p>🔝 Back to Top</p> <h2> ⚙️ ORM </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Badge</th> <th>URL</th> </tr> </thead> <tbody> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FHibernate-59666C%3Fstyle%3Dfor-the-badge%26logo%3DHibernate%26logoColor%3Dwhite" width="120" height="28"></td> <td><code>https://img.shields.io/badge/Hibernate-59666C?style=for-the-badge&amp;logo=Hibernate&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FPrisma-3982CE%3Fstyle%3Dfor-the-badge%26logo%3DPrisma%26logoColor%3Dwhite" width="95" height="28"></td> <td><code>https://img.shields.io/badge/Prisma-3982CE?style=for-the-badge&amp;logo=Prisma&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FSequelize-52B0E7%3Fstyle%3Dfor-the-badge%26logo%3DSequelize%26logoColor%3Dwhite" width="117" height="28"></td> <td><code>https://img.shields.io/badge/Sequelize-52B0E7?style=for-the-badge&amp;logo=Sequelize&amp;logoColor=white</code></td> </tr> </tbody> </table></div> <p>🔝 Back to Top</p> <h2> 💡 Prototyping Platforms </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Badge</th> <th>URL</th> </tr> </thead> <tbody> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fadafruit-000000%3Fstyle%3Dfor-the-badge%26logo%3Dadafruit%26logoColor%3Dwhite" width="112" height="28"></td> <td><code>https://img.shields.io/badge/adafruit-000000?style=for-the-badge&amp;logo=adafruit&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FArduino-00979D%3Fstyle%3Dfor-the-badge%26logo%3DArduino%26logoColor%3Dwhite" width="106" height="28"></td> <td><code>https://img.shields.io/badge/Arduino-00979D?style=for-the-badge&amp;logo=Arduino&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fespressif-E7352C%3Fstyle%3Dfor-the-badge%26logo%3Despressif%26logoColor%3Dwhite" width="117" height="28"></td> <td><code>https://img.shields.io/badge/espressif-E7352C?style=for-the-badge&amp;logo=espressif&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fmicro%3Abit-00ED00%3Fstyle%3Dfor-the-badge%26logo%3Dmicro%3Abit%26logoColor%3Dwhite" width="117" height="28"></td> <td><code>https://img.shields.io/badge/micro:bit-00ED00?style=for-the-badge&amp;logo=micro:bit&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FRaspberry%2520Pi-A22846%3Fstyle%3Dfor-the-badge%26logo%3DRaspberry%2520Pi%26logoColor%3Dwhite" width="142" height="28"></td> <td><code>https://img.shields.io/badge/Raspberry%20Pi-A22846?style=for-the-badge&amp;logo=Raspberry%20Pi&amp;logoColor=white</code></td> </tr> </tbody> </table></div> <p>🔝 Back to Top</p> <h2> 🔒 Security Platforms </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Badge</th> <th>URL</th> </tr> </thead> <tbody> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FSnyk-4C4A73%3Fstyle%3Dfor-the-badge%26logo%3Dsnyk%26logoColor%3Dwhite" width="79" height="28"></td> <td><code>https://img.shields.io/badge/Snyk-4C4A73?style=for-the-badge&amp;logo=snyk&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FSpring_Security-6DB33F%3Fstyle%3Dfor-the-badge%26logo%3DSpring-Security%26logoColor%3Dwhite" width="166" height="28"></td> <td><code>https://img.shields.io/badge/Spring_Security-6DB33F?style=for-the-badge&amp;logo=Spring-Security&amp;logoColor=white</code></td> </tr> </tbody> </table></div> <p>🔝 Back to Top</p> <h2> 💻 Terminal </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Badge</th> <th>URL</th> </tr> </thead> <tbody> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Falacritty-F46D01%3Fstyle%3Dfor-the-badge%26logo%3Dalacritty%26logoColor%3Dwhite" width="118" height="28"></td> <td><code>https://img.shields.io/badge/alacritty-F46D01?style=for-the-badge&amp;logo=alacritty&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FGIT-E44C30%3Fstyle%3Dfor-the-badge%26logo%3Dgit%26logoColor%3Dwhite" width="67" height="28"></td> <td><code>https://img.shields.io/badge/GIT-E44C30?style=for-the-badge&amp;logo=git&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FGNU%2520Bash-4EAA25%3Fstyle%3Dfor-the-badge%26logo%3DGNU%2520Bash%26logoColor%3Dwhite" width="112" height="28"></td> <td><code>https://img.shields.io/badge/GNU%20Bash-4EAA25?style=for-the-badge&amp;logo=GNU%20Bash&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FHyper-000000%3Fstyle%3Dfor-the-badge%26logo%3Dhyper%26logoColor%3Dwhite" width="87" height="28"></td> <td><code>https://img.shields.io/badge/Hyper-000000?style=for-the-badge&amp;logo=hyper&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FiTerm-000000%3Fstyle%3Dfor-the-badge%26logo%3Diterm2%26logoColor%3Dwhite" width="86" height="28"></td> <td><code>https://img.shields.io/badge/iTerm2-000000?style=for-the-badge&amp;logo=iterm2&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fpowershell-5391FE%3Fstyle%3Dfor-the-badge%26logo%3Dpowershell%26logoColor%3Dwhite" width="112" height="28"></td> <td><code>https://img.shields.io/badge/powershell-5391FE?style=for-the-badge&amp;logo=powershell&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fstarship-DD0B78%3Fstyle%3Dfor-the-badge%26logo%3Dstarship%26logoColor%3Dwhite" width="111" height="28"></td> <td><code>https://img.shields.io/badge/starship-DD0B78?style=for-the-badge&amp;logo=starship&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Ftmux-1BB91F%3Fstyle%3Dfor-the-badge%26logo%3Dtmux%26logoColor%3Dwhite" width="81" height="28"></td> <td><code>https://img.shields.io/badge/tmux-1BB91F?style=for-the-badge&amp;logo=tmux&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fwindows%2520terminal-4D4D4D%3Fstyle%3Dfor-the-badge%26logo%3Dwindows%2520terminal%26logoColor%3Dwhite" width="166" height="28"></td> <td><code>https://img.shields.io/badge/windows%20terminal-4D4D4D?style=for-the-badge&amp;logo=windows%20terminal&amp;logoColor=white</code></td> </tr> </tbody> </table></div> <p>🔝 Back to Top</p> <h2> 🌐 Web Browsers </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Badge</th> <th>URL</th> </tr> </thead> <tbody> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FBrave-FB542B%3Fstyle%3Dfor-the-badge%26logo%3DBrave%26logoColor%3Dwhite" width="87" height="28"></td> <td><code>https://img.shields.io/badge/Brave-FF1B2D?style=for-the-badge&amp;logo=Brave&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FFirefox_Browser-FF7139%3Fstyle%3Dfor-the-badge%26logo%3DFirefox-Browser%26logoColor%3Dwhite" width="171" height="28"></td> <td><code>https://img.shields.io/badge/Firefox_Browser-FF7139?style=for-the-badge&amp;logo=Firefox-Browser&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FGoogle_chrome-4285F4%3Fstyle%3Dfor-the-badge%26logo%3DGoogle-chrome%26logoColor%3Dwhite" width="158" height="28"></td> <td><code>https://img.shields.io/badge/Google_chrome-4285F4?style=for-the-badge&amp;logo=Google-chrome&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FMicrosoft_Edge-0078D7%3Fstyle%3Dfor-the-badge%26logo%3DMicrosoft-edge%26logoColor%3Dwhite" width="141" height="28"></td> <td><code>https://img.shields.io/badge/Microsoft_Edge-0078D7?style=for-the-badge&amp;logo=Microsoft-edge&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FOpera-FF1B2D%3Fstyle%3Dfor-the-badge%26logo%3DOpera%26logoColor%3Dwhite" width="88" height="28"></td> <td><code>https://img.shields.io/badge/Opera-FF1B2D?style=for-the-badge&amp;logo=Opera&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FSafari-000000%3Fstyle%3Dfor-the-badge%26logo%3Dsafari%26logoColor%3Dwhite" width="93" height="28"></td> <td><code>https://img.shields.io/badge/Safari-FF1B2D?style=for-the-badge&amp;logo=Safari&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FTor_Browser-7D4698%3Fstyle%3Dfor-the-badge%26logo%3DTor-Browser%26logoColor%3Dwhite" width="140" height="28"></td> <td><code>https://img.shields.io/badge/Tor_Browser-7D4698?style=for-the-badge&amp;logo=Tor-Browser&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FVivaldi-EF3939%3Fstyle%3Dfor-the-badge%26logo%3DVivaldi%26logoColor%3Dwhite" width="100" height="28"></td> <td><code>https://img.shields.io/badge/Vivaldi-EF3939?style=for-the-badge&amp;logo=Vivaldi&amp;logoColor=white</code></td> </tr> </tbody> </table></div> <p>🔝 Back to Top</p> <h2> 🥅 Other </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Badge</th> <th>URL</th> </tr> </thead> <tbody> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FFiverr-1DBF73%3Fstyle%3Dfor-the-badge%26logo%3Dfiverr%26logoColor%3Dwhite" width="93" height="28"></td> <td><code>https://img.shields.io/badge/fiverr-1DBF73?style=for-the-badge&amp;logo=fiverr&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FUpWork-6FDA44%3Fstyle%3Dfor-the-badge%26logo%3DUpwork%26logoColor%3Dwhite" width="101" height="28"></td> <td><code>https://img.shields.io/badge/UpWork-6FDA44?style=for-the-badge&amp;logo=Upwork&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FFreelancer-29B2FE%3Fstyle%3Dfor-the-badge%26logo%3DFreelancer%26logoColor%3Dwhite" width="128" height="28"></td> <td><code>https://img.shields.io/badge/Freelancer-29B2FE?style=for-the-badge&amp;logo=Freelancer&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FToptal-3863A0%3Fstyle%3Dfor-the-badge%26logo%3DToptal%26logoColor%3Dwhite" width="94" height="28"></td> <td><code>https://img.shields.io/badge/Toptal-3863A0?style=for-the-badge&amp;logo=Toptal&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FIndeed-003A9B%3Fstyle%3Dfor-the-badge%26logo%3DIndeed%26logoColor%3Dwhite" width="95" height="28"></td> <td><code>https://img.shields.io/badge/Indeed-003A9B?style=for-the-badge&amp;logo=Indeed&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Falfred-%25235C1F87.svg%3Fstyle%3Dfor-the-badge%26logo%3Dalfred" width="94" height="28"></td> <td><code>https://img.shields.io/badge/alfred-%235C1F87.svg?style=for-the-badge&amp;logo=alfred</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fansible-%25231A1918.svg%3Fstyle%3Dfor-the-badge%26logo%3Dansible%26logoColor%3Dwhite" width="101" height="28"></td> <td><code>https://img.shields.io/badge/ansible-%231A1918.svg?style=for-the-badge&amp;logo=ansible&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FAngelList-000000%3Fstyle%3Dfor-the-badge%26logo%3DAngelList%26logoColor%3Dwhite" width="98" height="28"></td> <td><code>https://img.shields.io/badge/AngelList-000000?style=for-the-badge&amp;logo=AngelList&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Faqua-%25231904DA.svg%3Fstyle%3Dfor-the-badge%26logo%3Daqua%26logoColor%3D%230018A8" width="81" height="28"></td> <td><code>https://img.shields.io/badge/aqua-%231904DA.svg?style=for-the-badge&amp;logo=aqua&amp;logoColor=#0018A8</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2F-Arduino-00979D%3Fstyle%3Dfor-the-badge%26logo%3DArduino%26logoColor%3Dwhite" width="106" height="28"></td> <td><code>https://img.shields.io/badge/-Arduino-00979D?style=for-the-badge&amp;logo=Arduino&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FBabel-F9DC3e%3Fstyle%3Dfor-the-badge%26logo%3Dbabel%26logoColor%3Dblack" width="86" height="28"></td> <td><code>https://img.shields.io/badge/Babel-F9DC3e?style=for-the-badge&amp;logo=babel&amp;logoColor=black</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fbitwarden-%2523175DDC.svg%3Fstyle%3Dfor-the-badge%26logo%3Dbitwarden%26logoColor%3Dwhite" width="125" height="28"></td> <td><code>https://img.shields.io/badge/bitwarden-%23175DDC.svg?style=for-the-badge&amp;logo=bitwarden&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FCMake-%2523008FBA.svg%3Fstyle%3Dfor-the-badge%26logo%3Dcmake%26logoColor%3Dwhite" width="89" height="28"></td> <td><code>https://img.shields.io/badge/CMake-%23008FBA.svg?style=for-the-badge&amp;logo=cmake&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fcodecov-%2523ff0077.svg%3Fstyle%3Dfor-the-badge%26logo%3Dcodecov%26logoColor%3Dwhite" width="106" height="28"></td> <td><code>https://img.shields.io/badge/codecov-%23ff0077.svg?style=for-the-badge&amp;logo=codecov&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fconfluence-%2523172BF4.svg%3Fstyle%3Dfor-the-badge%26logo%3Dconfluence%26logoColor%3Dwhite" width="130" height="28"></td> <td><code>https://img.shields.io/badge/confluence-%23172BF4.svg?style=for-the-badge&amp;logo=confluence&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fdocker-%25230db7ed.svg%3Fstyle%3Dfor-the-badge%26logo%3Ddocker%26logoColor%3Dwhite" width="97" height="28"></td> <td><code>https://img.shields.io/badge/docker-%230db7ed.svg?style=for-the-badge&amp;logo=docker&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FESLint-4B3263%3Fstyle%3Dfor-the-badge%26logo%3Deslint%26logoColor%3Dwhite" width="92" height="28"></td> <td><code>https://img.shields.io/badge/ESLint-4B3263?style=for-the-badge&amp;logo=eslint&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2F-ElasticSearch-005571%3Fstyle%3Dfor-the-badge%26logo%3Delasticsearch" width="152" height="28"></td> <td><code>https://img.shields.io/badge/-ElasticSearch-005571?style=for-the-badge&amp;logo=elasticsearch</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FGradle-02303A.svg%3Fstyle%3Dfor-the-badge%26logo%3DGradle%26logoColor%3Dwhite" width="96" height="28"></td> <td><code>https://img.shields.io/badge/Gradle-02303A.svg?style=for-the-badge&amp;logo=Gradle&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fgrafana-%2523F46800.svg%3Fstyle%3Dfor-the-badge%26logo%3Dgrafana%26logoColor%3Dwhite" width="106" height="28"></td> <td><code>https://img.shields.io/badge/grafana-%23F46800.svg?style=for-the-badge&amp;logo=grafana&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fhome%2520assistant-%252341BDF5.svg%3Fstyle%3Dfor-the-badge%26logo%3Dhome-assistant%26logoColor%3Dwhite" width="161" height="28"></td> <td><code>https://img.shields.io/badge/home%20assistant-%2341BDF5.svg?style=for-the-badge&amp;logo=home-assistant&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fkubernetes-%2523326ce5.svg%3Fstyle%3Dfor-the-badge%26logo%3Dkubernetes%26logoColor%3Dwhite" width="130" height="28"></td> <td><code>https://img.shields.io/badge/kubernetes-%23326ce5.svg?style=for-the-badge&amp;logo=kubernetes&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FNotion-%2523000000.svg%3Fstyle%3Dfor-the-badge%26logo%3Dnotion%26logoColor%3Dwhite" width="97" height="28"></td> <td><code>https://img.shields.io/badge/Notion-%23000000.svg?style=for-the-badge&amp;logo=notion&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fpacker-%2523E7EEF0.svg%3Fstyle%3Dfor-the-badge%26logo%3Dpacker%26logoColor%3D%252302A8EF" width="95" height="28"></td> <td><code>https://img.shields.io/badge/packer-%23E7EEF0.svg?style=for-the-badge&amp;logo=packer&amp;logoColor=%2302A8EF</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fpihole-%252396060C.svg%3Fstyle%3Dfor-the-badge%26logo%3Dpi-hole%26logoColor%3Dwhite" width="93" height="28"></td> <td><code>https://img.shields.io/badge/pihole-%2396060C.svg?style=for-the-badge&amp;logo=pi-hole&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fplex-%2523E5A00D.svg%3Fstyle%3Dfor-the-badge%26logo%3Dplex%26logoColor%3Dwhite" width="77" height="28"></td> <td><code>https://img.shields.io/badge/plex-%23E5A00D.svg?style=for-the-badge&amp;logo=plex&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FPortfolio-%2523000000.svg%3Fstyle%3Dfor-the-badge%26logo%3Dfirefox%26logoColor%3D%23FF7139" width="120" height="28"></td> <td><code>https://img.shields.io/badge/Portfolio-%23000000.svg?style=for-the-badge&amp;logo=firefox&amp;logoColor=#FF7139</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FPostman-FF6C37%3Fstyle%3Dfor-the-badge%26logo%3Dpostman%26logoColor%3Dwhite" width="107" height="28"></td> <td><code>https://img.shields.io/badge/Postman-FF6C37?style=for-the-badge&amp;logo=postman&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FPrezi-%2523000000.svg%3Fstyle%3Dfor-the-badge%26logo%3DPrezi%26logoColor%3Dwhite" width="84" height="28"></td> <td><code>https://img.shields.io/badge/Prezi-%23000000.svg?style=for-the-badge&amp;logo=Prezi&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FPrometheus-E6522C%3Fstyle%3Dfor-the-badge%26logo%3DPrometheus%26logoColor%3Dwhite" width="133" height="28"></td> <td><code>https://img.shields.io/badge/Prometheus-E6522C?style=for-the-badge&amp;logo=Prometheus&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Francher-%25230075A8.svg%3Fstyle%3Dfor-the-badge%26logo%3Drancher%26logoColor%3Dwhite" width="106" height="28"></td> <td><code>https://img.shields.io/badge/rancher-%230075A8.svg?style=for-the-badge&amp;logo=rancher&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2F-RaspberryPi-C51A4A%3Fstyle%3Dfor-the-badge%26logo%3DRaspberry-Pi" width="137" height="28"></td> <td><code>https://img.shields.io/badge/-RaspberryPi-C51A4A?style=for-the-badge&amp;logo=Raspberry-Pi</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fsplunk-%2523000000.svg%3Fstyle%3Dfor-the-badge%26logo%3Dsplunk%26logoColor%3Dwhite" width="96" height="28"></td> <td><code>https://img.shields.io/badge/splunk-%23000000.svg?style=for-the-badge&amp;logo=splunk&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2F-Swagger-%2523Clojure%3Fstyle%3Dfor-the-badge%26logo%3Dswagger%26logoColor%3Dwhite" width="109" height="28"></td> <td><code>https://img.shields.io/badge/-Swagger-%23Clojure?style=for-the-badge&amp;logo=swagger&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fterraform-%25235835CC.svg%3Fstyle%3Dfor-the-badge%26logo%3Dterraform%26logoColor%3Dwhite" width="124" height="28"></td> <td><code>https://img.shields.io/badge/terraform-%235835CC.svg?style=for-the-badge&amp;logo=terraform&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FTrello-%2523026AA7.svg%3Fstyle%3Dfor-the-badge%26logo%3DTrello%26logoColor%3Dwhite" width="93" height="28"></td> <td><code>https://img.shields.io/badge/Trello-%23026AA7.svg?style=for-the-badge&amp;logo=Trello&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FUber-%2523000000.svg%3Fstyle%3Dfor-the-badge%26logo%3DUber%26logoColor%3Dwhite" width="79" height="28"></td> <td><code>https://img.shields.io/badge/Uber-%23000000.svg?style=for-the-badge&amp;logo=Uber&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fubiquiti-%25230559C9.svg%3Fstyle%3Dfor-the-badge%26logo%3Dubiquiti%26logoColor%3Dwhite" width="109" height="28"></td> <td><code>https://img.shields.io/badge/ubiquiti-%230559C9.svg?style=for-the-badge&amp;logo=ubiquiti&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fvagrant-%25231563FF.svg%3Fstyle%3Dfor-the-badge%26logo%3Dvagrant%26logoColor%3Dwhite" width="106" height="28"></td> <td><code>https://img.shields.io/badge/vagrant-%231563FF.svg?style=for-the-badge&amp;logo=vagrant&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fwireguard-%252388171A.svg%3Fstyle%3Dfor-the-badge%26logo%3Dwireguard%26logoColor%3Dwhite" width="126" height="28"></td> <td><code>https://img.shields.io/badge/wireguard-%2388171A.svg?style=for-the-badge&amp;logo=wireguard&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FXFCE-%25232284F2.svg%3Fstyle%3Dfor-the-badge%26logo%3Dxfce%26logoColor%3Dwhite" width="77" height="28"></td> <td><code>https://img.shields.io/badge/XFCE-%232284F2.svg?style=for-the-badge&amp;logo=xfce&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fzigbee-%2523EB0443.svg%3Fstyle%3Dfor-the-badge%26logo%3Dzigbee%26logoColor%3Dwhite" width="92" height="28"></td> <td><code>https://img.shields.io/badge/zigbee-%23EB0443.svg?style=for-the-badge&amp;logo=zigbee&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FQiskit-%25236929C4.svg%3Fstyle%3Dfor-the-badge%26logo%3DQiskit%26logoColor%3Dwhite" width="92" height="28"></td> <td><code>https://img.shields.io/badge/Qiskit-%236929C4.svg?style=for-the-badge&amp;logo=Qiskit&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FAstro-FF5D01%3Flogo%3Dastro%26logoColor%3Dfff%26style%3Dfor-the-badge" width="88" height="28"></td> <td><code>https://img.shields.io/badge/Astro-FF5D01?logo=astro&amp;logoColor=fff&amp;style=for-the-badge</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FInsomnia-4000BF%3Flogo%3Dinsomnia%26logoColor%3Dwhite%26style%3Dfor-the-badge" width="114" height="28"></td> <td><code>https://img.shields.io/badge/Insomnia-4000BF?logo=insomnia&amp;logoColor=white&amp;style=for-the-badge</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FVMware-607078%3Flogo%3Dvmware%26logoColor%3Dwhite%26style%3Dfor-the-badge" width="101" height="28"></td> <td><code>https://img.shields.io/badge/VMware-607078?logo=vmware&amp;logoColor=white&amp;style=for-the-badge</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FVirtualBox-183A61%3Flogo%3Dvirtualbox%26logoColor%3Dwhite%26style%3Dfor-the-badge" width="129" height="28"></td> <td><code>https://img.shields.io/badge/VirtualBox-183A61?logo=virtualbox&amp;logoColor=white&amp;style=for-the-badge</code></td> </tr> </tbody> </table></div> <p>🔝 Back to Top</p> <h2> ⏱️ Workflow Platforms </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Badge</th> <th>URL</th> </tr> </thead> <tbody> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FAirflow-017CEE%3Fstyle%3Dfor-the-badge%26logo%3DApache%2520Airflow%26logoColor%3Dwhite" width="105" height="28"></td> <td><code>https://img.shields.io/badge/Airflow-017CEE?style=for-the-badge&amp;logo=Apache%20Airflow&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FJenkins-D24939%3Fstyle%3Dfor-the-badge%26logo%3DJenkins%26logoColor%3Dwhite" width="101" height="28"></td> <td><code>https://img.shields.io/badge/Jenkins-D24939?style=for-the-badge&amp;logo=Jenkins&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FJira-0052CC%3Fstyle%3Dfor-the-badge%26logo%3DJira%26logoColor%3Dwhite" width="75" height="28"></td> <td><code>https://img.shields.io/badge/Jira-0052CC?style=for-the-badge&amp;logo=Jira&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FTeamCity-000000%3Fstyle%3Dfor-the-badge%26logo%3DTeamCity%26logoColor%3Dwhite" width="111" height="28"></td> <td><code>https://img.shields.io/badge/TeamCity-000000?style=for-the-badge&amp;logo=TeamCity&amp;logoColor=white</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FCrowdin-2E3340.svg%3Fstyle%3Dfor-the-badge%26logo%3DCrowdin%26logoColor%3Dwhite" width="109" height="28"></td> <td><code>https://img.shields.io/badge/Crowdin-2E3340.svg?style=for-the-badge&amp;logo=Crowdin&amp;logoColor=white</code></td> </tr> </tbody> </table></div> <p>🔝 Back to Top</p> <h2> 🚗🚗Car </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Badge</th> <th>URL</th> </tr> </thead> <tbody> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FLamborghini-DDB320%3Flogo%3Dlamborghini%26logoColor%3Dfff%26style%3Dfor-the-badge" width="140" height="28"></td> <td><code>https://img.shields.io/badge/Lamborghini-DDB320?logo=lamborghini&amp;logoColor=fff&amp;style=for-the-badge</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FBugatti-BE0030%3Flogo%3Dbugatti%26logoColor%3Dfff%26style%3Dfor-the-badge" width="102" height="28"></td> <td><code>https://img.shields.io/badge/Bugatti-BE0030?logo=bugatti&amp;logoColor=fff&amp;style=for-the-badge</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FPorsche-B12B28%3Flogo%3Dporsche%26logoColor%3Dfff%26style%3Dfor-the-badge" width="105" height="28"></td> <td><code>https://img.shields.io/badge/Porsche-B12B28?logo=porsche&amp;logoColor=fff&amp;style=for-the-badge</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FTesla-C00%3Flogo%3Dtesla%26logoColor%3Dfff%26style%3Dfor-the-badge" width="84" height="28"></td> <td><code>https://img.shields.io/badge/Tesla-C00?logo=tesla&amp;logoColor=fff&amp;style=for-the-badge</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FFerrari-D40000%3Flogo%3Dferrari%26logoColor%3Dfff%26style%3Dfor-the-badge" width="102" height="28"></td> <td><code>https://img.shields.io/badge/Ferrari-D40000?logo=ferrari&amp;logoColor=fff&amp;style=for-the-badge</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FToyota-EB0A1E%3Flogo%3Dtoyota%26logoColor%3Dfff%26style%3Dfor-the-badge" width="96" height="28"></td> <td><code>https://img.shields.io/badge/Toyota-EB0A1E?logo=toyota&amp;logoColor=fff&amp;style=for-the-badge</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FMitsubishi-E60012%3Flogo%3Dmitsubishi%26logoColor%3Dfff%26style%3Dfor-the-badge" width="126" height="28"></td> <td><code>https://img.shields.io/badge/Mitsubishi-E60012?logo=mitsubishi&amp;logoColor=fff&amp;style=for-the-badge</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FMaserati-0C2340%3Flogo%3Dmaserati%26logoColor%3Dfff%26style%3Dfor-the-badge" width="113" height="28"></td> <td><code>https://img.shields.io/badge/Maserati-0C2340?logo=maserati&amp;logoColor=fff&amp;style=for-the-badge</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FBMW-0066B1%3Flogo%3Dbmw%26logoColor%3Dfff%26style%3Dfor-the-badge" width="75" height="28"></td> <td><code>https://img.shields.io/badge/BMW-0066B1?logo=bmw&amp;logoColor=fff&amp;style=for-the-badge</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FLand%2520Rover-005A2B%3Flogo%3Dlandrover%26logoColor%3Dfff%26style%3Dfor-the-badge" width="128" height="28"></td> <td><code>https://img.shields.io/badge/Land%20Rover-005A2B?logo=landrover&amp;logoColor=fff&amp;style=for-the-badge</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FMercedes-242424%3Flogo%3Dmercedes%26logoColor%3Dfff%26style%3Dfor-the-badge" width="114" height="28"></td> <td><code>https://img.shields.io/badge/Mercedes-242424?logo=mercedes&amp;logoColor=fff&amp;style=for-the-badge</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FAudi-BB0A30%3Flogo%3Daudi%26logoColor%3Dfff%26style%3Dfor-the-badge" width="78" height="28"></td> <td><code>https://img.shields.io/badge/Audi-BB0A30?logo=audi&amp;logoColor=fff&amp;style=for-the-badge</code></td> </tr> </tbody> </table></div> <p>🔝 Back to Top</p> <h1> 🎨🎨Designer </h1> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Badge</th> <th>URL</th> </tr> </thead> <tbody> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FBehance-1769FF%3Flogo%3Dbehance%26logoColor%3Dfff%26style%3Dfor-the-badge" width="105" height="28"></td> <td><code>https://img.shields.io/badge/Behance-1769FF?logo=behance&amp;logoColor=fff&amp;style=for-the-badge</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FAdobe%2520Photoshop-31A8FF%3Flogo%3Dadobephotoshop%26logoColor%3Dfff%26style%3Dfor-the-badge" width="175" height="28"></td> <td><code>https://img.shields.io/badge/Adobe%20Photoshop-31A8FF?logo=adobephotoshop&amp;logoColor=fff&amp;style=for-the-badge</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FAdobe%2520Illustrator-FF9A00%3Flogo%3Dadobeillustrator%26logoColor%3Dfff%26style%3Dfor-the-badge" width="186" height="28"></td> <td><code>https://img.shields.io/badge/Adobe%20Illustrator-FF9A00?logo=adobeillustrator&amp;logoColor=fff&amp;style=for-the-badge</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FAdobe%2520Dreamweaver-FF61F6%3Flogo%3Dadobedreamweaver%26logoColor%3Dfff%26style%3Dfor-the-badge" width="195" height="28"></td> <td><code>hhttps://img.shields.io/badge/Adobe%20Dreamweaver-FF61F6?logo=adobedreamweaver&amp;logoColor=fff&amp;style=for-the-badge</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FAdobe%2520After%2520Effects-99F%3Flogo%3Dadobeaftereffects%26logoColor%3Dfff%26style%3Dfor-the-badge" width="196" height="28"></td> <td><code>https://img.shields.io/badge/Adobe%20After%20Effects-99F?logo=adobeaftereffects&amp;logoColor=fff&amp;style=for-the-badge</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FAdobe%2520Premiere%2520Pro-99F%3Flogo%3Dadobepremierepro%26logoColor%3Dfff%26style%3Dfor-the-badge" width="193" height="28"></td> <td><code>https://img.shields.io/badge/Adobe%20Premiere%20Pro-99F?logo=adobepremierepro&amp;logoColor=fff&amp;style=for-the-badge</code></td> </tr> </tbody> </table></div> <p>🔝 Back to Top</p> <h1> Maintained </h1> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Badge</th> <th>URL</th> </tr> </thead> <tbody> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FMaintained%253F-yes-green.svg" width="106" height="20"></td> <td><code>https://img.shields.io/badge/Maintained%3F-yes-green.svg</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FMaintained%253F-no-red.svg" width="100" height="20"></td> <td><code>https://img.shields.io/badge/Maintained%3F-no-red.svg</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/http%3A%2F%2Funmaintained.tech%2Fbadge.svg" width="176" height="20"></td> <td><code>http://unmaintained.tech/badge.svg</code></td> </tr> </tbody> </table></div> <p>🔝 Back to Top</p> <h1> 📈📈Website Stats </h1> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Badge</th> <th>URL</th> </tr> </thead> <tbody> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fwebsite-up-down-green-red%2Fhttp%2Fmonip.org.svg" width="76" height="20"></td> <td> <code>https://img.shields.io/website-up-down-green-red/http/monip.org.svg</code> website:<a href="http://monip.org" rel="noopener noreferrer">http://monip.org</a> </td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fwebsite-up-down-green-red%2Fhttp%2Fcv.lbesson.qc.to.svg" width="76" height="20"></td> <td> <code>https://img.shields.io/website-up-down-green-red/http/cv.lbesson.qc.to.svg</code> Website: <a href="http://cv.lbesson.qc.to/" rel="noopener noreferrer">http://cv.lbesson.qc.to/</a> </td> </tr> </tbody> </table></div> <p>🔝 Back to Top</p> <h1> Feedback </h1> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Badge</th> <th>URL</th> </tr> </thead> <tbody> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FAsk%2520me-anything-1abc9c.svg" width="110" height="20"></td> <td><code>https://img.shields.io/badge/Ask%20me-anything-1abc9c.svg</code></td> </tr> </tbody> </table></div> <p>🔝 Back to Top</p> <h1> Made with </h1> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Badge</th> <th>URL</th> </tr> </thead> <tbody> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/http%3A%2F%2FForTheBadge.com%2Fimages%2Fbadges%2Fmade-with-python.svg" width="195" height="35"></td> <td><code>http://ForTheBadge.com/images/badges/made-with-python.svg</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FMade%2520with-Sphinx-1f425f.svg" width="114" height="20"></td> <td><code>https://img.shields.io/badge/Made%20with-Sphinx-1f425f.svg</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FMade%2520with-Jupyter-orange%3Fstyle%3Dfor-the-badge%26logo%3DJupyter" width="194" height="28"></td> <td><code>https://img.shields.io/badge/Made%20with-Jupyter-orange?style=for-the-badge&amp;logo=Jupyter</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FMade%2520with-Go-1f425f.svg" width="92" height="20"></td> <td><code>https://img.shields.io/badge/Made%20with-Go-1f425f.svg</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FMade%2520with-Markdown-1f425f.svg" width="134" height="20"></td> <td><code>https://img.shields.io/badge/Made%20with-Markdown-1f425f.svg</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FMade%2520with-LaTeX-1f425f.svg" width="110" height="20"></td> <td><code>https://img.shields.io/badge/Made%20with-LaTeX-1f425f.svg</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FMade%2520with-MathJax-1f425f.svg" width="122" height="20"></td> <td><code>https://img.shields.io/badge/Made%20with-MathJax-1f425f.svg</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FMade%2520with-Bash-1f425f.svg" width="104" height="20"></td> <td><code>https://img.shields.io/badge/Made%20with-Bash-1f425f.svg</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FMade%2520for-VSCode-1f425f.svg" width="112" height="20"></td> <td><code>https://img.shields.io/badge/Made%20for-VSCode-1f425f.svg</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/http%3A%2F%2FForTheBadge.com%2Fimages%2Fbadges%2Fbuilt-by-developers.svg" width="256" height="35"></td> <td><code>http://ForTheBadge.com/images/badges/built-by-developers.svg</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/http%3A%2F%2FForTheBadge.com%2Fimages%2Fbadges%2Fbuilt-with-love.svg" width="152" height="35"></td> <td><code>http://ForTheBadge.com/images/badges/built-with-love.svg</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/http%3A%2F%2FForTheBadge.com%2Fimages%2Fbadges%2Fbuilt-with-science.svg" width="208" height="35"></td> <td><code>http://ForTheBadge.com/images/badges/built-with-science.svg</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/http%3A%2F%2FForTheBadge.com%2Fimages%2Fbadges%2Fbuilt-with-swag.svg" width="185" height="35"></td> <td><code>http://ForTheBadge.com/images/badges/built-with-swag.svg</code></td> </tr> </tbody> </table></div> <p>🔝 Back to Top</p> <h1> GitHub Stats </h1> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Badge</th> <th>URL</th> </tr> </thead> <tbody> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fgithub%2Flicense%2FEnvoy-VC%2FPython-Scripts.svg" width="138" height="20"></td> <td><code>https://img.shields.io/github/license/{username}/{repo-name}.svg</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fgithub%2Frelease%2FEnvoy-VC%2FPython-Scripts.svg" width="222" height="20"></td> <td><code>https://img.shields.io/github/release/{username}/{repo-name}.svg</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fgithub%2Fcommits-since%2FNaereen%2FStrapDown.js%2Fv1.0.0.svg" width="152" height="20"></td> <td><code>https://img.shields.io/github/commits-since/{username}/{repo-name}/{version}.svg</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fgithub%2Fdownloads%2FNaereen%2FStrapDown.js%2Ftotal.svg" width="86" height="20"></td> <td><code>https://img.shields.io/github/downloads/{username}/{repo-name}/total.svg</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fgithub%2Fforks%2FEnvoy-VC%2FEnvoy-VC.svg" width="84" height="20"></td> <td><code>https://img.shields.io/github/forks/{username}/{repo-name}.svg</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fgithub%2Fstars%2FEnvoy-VC%2FEnvoy-VC.svg" width="82" height="20"></td> <td><code>https://img.shields.io/github/stars/{username}/{repo-name}.svg</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fgithub%2Fwatchers%2FEnvoy-VC%2FEnvoy-VC.svg" width="98" height="20"></td> <td><code>https://img.shields.io/github/watchers/{username}/{repo-name}.svg</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fgithub%2Ffollowers%2FNaereen.svg%3Fstyle%3Dsocial%26label%3DFollow%26maxAge%3D2592000" width="96" height="20"></td> <td><code>https://img.shields.io/github/followers/{username}.svg?style=social&amp;label=Follow&amp;maxAge=2592000</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fgithub%2Fissues%2FEnvoy-VC%2FEnvoy-VC.svg" width="90" height="20"></td> <td><code>https://img.shields.io/github/issues/{username}/{repo-name}.svg</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fgithub%2Fissues-closed%2FEnvoy-VC%2FEnvoy-VC.svg" width="98" height="20"></td> <td><code>https://img.shields.io/github/issues-closed/{username}/{repo-name}.svg</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fgithub%2Fissues-pr%2FEnvoy-VC%2FEnvoy-VC.svg" width="128" height="20"></td> <td><code>https://img.shields.io/github/issues-pr/{username}/{repo-name}.svg</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fgithub%2Fissues-pr-closed%2FEnvoy-VC%2FEnvoy-VC.svg" width="136" height="20"></td> <td><code>https://img.shields.io/github/issues-pr-closed/{username}/{repo-name}.svg</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fbadge-size.herokuapp.com%2FEnvoy-VC%2FEnvoy-VC%2Fmain%2FREADME.md" width="800" height="400"></td> <td><code>https://badge-size.herokuapp.com/{username}/{repo}/{branch}/{filename}</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub-readme-stats.vercel.app%2Fapi%3Fusername%3DEnvoy-VC%26theme%3Dblue-green" width="450" height="195"></td> <td><code>https://github-readme-stats.vercel.app/api?username={username}&amp;theme=blue-green</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub-readme-stats.vercel.app%2Fapi%3Fusername%3DEnvoy-VC%26theme%3Dblue-green" width="450" height="195"></td> <td><code>https://github-readme-stats.vercel.app/api?username={username}&amp;theme=blue-green</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub-readme-stats.vercel.app%2Fapi%2Ftop-langs%2F%3Fusername%3DEnvoy-VC%26theme%3Dblue-green" width="300" height="285"></td> <td><code>https://github-readme-stats.vercel.app/api/top-langs/?username={username}&amp;theme=blue-green</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fstarchart.cc%2Fcaarlos0%2Fstarcharts.svg" width="1024" height="400"></td> <td><code>https://starchart.cc/{username}/{repo}.svg</code></td> </tr> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fgithub%2Flast-commit%2FEnvoy-VC%2FEnvoy-VC.svg" width="116" height="20"></td> <td><code>https://img.shields.io/github/last-commit/{username}/{repo-name}.svg</code></td> </tr> </tbody> </table></div> <p>🔝 Back to Top</p> webdev github markdown Lindsey Howard Tue, 05 Dec 2023 11:41:53 +0000 https://dev.to/codelikeagirl29/optimizing-performance-frontend-techniques-for-faster-loading-times-2iol https://dev.to/codelikeagirl29/optimizing-performance-frontend-techniques-for-faster-loading-times-2iol <h2> "Load Faster, Shine Brighter: Frontend Techniques for Optimal Performance" </h2> <p>Introduction:<br> In today's digital landscape, a website's speed and performance play a pivotal role in user satisfaction and retention. Studies show that users expect websites to load within seconds, and any delay can lead to increased bounce rates. Therefore, optimizing frontend performance is crucial for delivering a seamless user experience. Let's explore some powerful techniques to enhance your website's loading times and overall performance.<br> 🚀 🚀 🚀 </p> <ol> <li><p><strong>Image Optimization</strong>: Images often contribute significantly to a website's load time. Compressing images, choosing the right format (such as WebP for modern browsers), and using responsive images based on device resolution can drastically reduce load times without compromising visual quality.</p></li> <li><p><strong>Minification and Compression</strong>: Minifying CSS, JavaScript, and HTML files by removing unnecessary spaces, comments, and line breaks reduces file sizes. Additionally, enabling compression (Gzip or Brotli) further decreases file sizes, enabling faster data transmission between the server and browser.</p></li> <li><p><strong>Caching Strategies</strong>: Implementing browser caching allows frequently accessed resources like images, CSS, and JavaScript files to be stored locally, reducing the need for repeated downloads and enhancing load times for returning visitors.</p></li> <li><p><strong>Lazy Loading</strong>: Load only the necessary content above the fold initially and defer the loading of non-essential resources, such as images or videos, until the user scrolls to them. This technique significantly improves initial page load times.</p></li> <li><p><strong>Optimized Code and Frameworks</strong>: Writing efficient, clean code and using lightweight frontend frameworks or libraries can streamline website performance. Evaluate the necessity of external libraries to avoid unnecessary overhead.</p></li> <li><p><strong>Content Delivery Networks (CDNs)</strong>: Utilize CDNs to distribute your website's static resources across multiple servers globally. This ensures faster delivery of content by serving it from the nearest server to the user's location.</p></li> <li><p><strong>Async and Defer Attributes for Scripts</strong>: Use the 'async' attribute for non-blocking script loading or 'defer' attribute to load scripts after the page content. This prevents scripts from delaying the rendering of the page.</p></li> <li><p><strong>Reducing HTTP Requests</strong>: Minimize the number of HTTP requests by combining CSS and JavaScript files or using CSS sprites for images. Fewer requests lead to faster load times.</p></li> <li><p><strong>Optimizing Fonts</strong>: Limit the number of custom fonts and opt for web-safe fonts whenever possible. Use font-display property to control how fonts are displayed during loading.</p></li> <li><p><strong>Performance Monitoring and Testing</strong>: Regularly monitor your website's performance using tools like Google PageSpeed Insights, Lighthouse, or GTmetrix. Conduct performance tests to identify bottlenecks and areas for improvement.</p></li> </ol> <p>Conclusion:<br> In the competitive online landscape, optimizing frontend performance isn't just about speed—it's about providing users with an exceptional experience. By implementing these frontend techniques, you can significantly enhance your website's loading times, improve user engagement, boost search engine rankings, and ultimately set a solid foundation for success in the digital realm. Remember, the pursuit of optimal performance is an ongoing journey, so keep iterating and refining to stay ahead in the race for a faster, better web experience.</p> webdev frontend performance tips Lindsey Howard Sat, 18 Mar 2023 07:21:20 +0000 https://dev.to/codelikeagirl29/just-bought-an-asus-zephyrus-g14-what-you-need-to-know-is-1o8l https://dev.to/codelikeagirl29/just-bought-an-asus-zephyrus-g14-what-you-need-to-know-is-1o8l <p>So, I am a new Software Developer and my journey began with an Asus Zenbook Duo. I had it for almost a year and it just couldn't handle my workload. :( It only had an <strong>Intel® Core™ i5-1155G7 Processor</strong> 2.5 GHz (8M Cache, up to 4.5 GHz, 4 cores) So next up, I got the Lenovo Legion 5 (17) - which was great but a little too big for me and my needs with 17" screen.</p> <h3> Specs </h3> <p>Processor Model - AMD Ryzen 7 5000 Series<br> Processor Model Number - 5800HS<br> Storage Type - SSD<br> Total Storage Capacity - 512 gigabytes<br> Solid State Drive Capacity - 512 gigabytes<br> System Memory (RAM) - 16 gigabytes<br> Graphics - NVIDIA GeForce GTX 1650<br> Operating System - Windows 11 Home<br> Battery Type - Lithium-ion polymer<br> Backlit Keyboard - Yes</p> <h3> General - Product Name </h3> <p>ROG Zephyrus G14 14" Laptop - AMD Ryzen 7 - 16GB Memory - NVIDIA GeForce GTX 1650 - 512GB SSD<br> Brand - ASUS<br> Model Number - GA401QH-211.ZG14BL</p> <h3> Display </h3> <p>Screen Size - 14 inches<br> Screen Resolution - 1920 x 1080 (Full HD)<br> Touch Screen - No</p> <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%2Fkf2jmfla1lxv5qlo1agk.jpg" 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%2Fkf2jmfla1lxv5qlo1agk.jpg" alt="pic-of-my-desk" width="800" height="600"></a><br> My current desk setup</p> <p>Back to the basics, the Zephyrus G14 gets an Ergolift hinge design which pushes up the main-chassis on rubber feet at the bottom of the screen, in order to improve airflow underneath and help cool the components. Ergolift designs have one major flaw, though, and that’s the fact that hot air is blown into the screen. It’s an issue here as well, but not as bad as on ZenBooks.</p> <p>For starters, there’s a bigger gap between the exhausts and the screen than on most ZenBooks. Then, the lid design also allows some of the hot air to go out to the back, through that carving in the bottom side. Finally, the ROG engineers smartly designed the radiators and plastic fins that split the hot air coming out from the exhausts, sending some of it downwards and some of it upwards and to the sides, so not straight into the screen. I haven’t got to test this implementation in games and measure the panel-temperatures around the exhausts, so I can’t vouch for the practical worth of this solution, but it shows they were aware of the problem and did something to at least partially address it. We’ll further touch on the thermal design in the next section.</p> <p>In the meantime, I’ll also mention a couple of other aspects you should be aware of. First off, this notebook gets quad-speakers, with a set on main speakers (woofers, kind of) still firing on the bottom, but also a set of tweeters firing through those grills in the palm-rest. Not sure if that’s the best placement, as I fear they might be fairly easily cover by your palms with daily use, but again, they tried to address an issue of most modern gaming notebooks, within the space constraints of a 14-inch frame.</p> <p>Then, you’ll notice there’s no webcam on the Zephyrus G14, just like on the 15-inch model and many of the other recent ROG gaming laptops. I don’t mind it, but some of you might feel otherwise. I was told an external camera will not be included with the standard bundle, unlike on some of the Zephyrus S models; makes sense to help keep prices down.</p> <p>There’s also a fingerprint sensor integrated into the power button of the G14, a first for an ROG laptop. It’s been touted for months and I’m glad to finally see it implemented. The redesigned button also ditches that pesky always-on light implemented with other ROG notebooks, but the status LEDs are still placed beneath the screen, annoying when trying to watch a movie at night. Please send them to the side or the front somewhere.</p> <p>Finally, as far as the IO goes, the Zephyrus G14 offers a fair selection of ports, with USB-A and C ports, HDMI and an audio jack. There’s no LAN, but you get a USB to LAN adapter included for the rare occasions you’ll need wired Internet. There’s also no card-reader and no Thunderbolt 3, no surprise given this is an AMD-based notebook, but the left USB-C port allows charging. More on that further down.</p> reviews laptop gaming Lindsey Howard Mon, 27 Feb 2023 15:55:53 +0000 https://dev.to/codelikeagirl29/must-read-blogs-for-web-development-newbies-43ol https://dev.to/codelikeagirl29/must-read-blogs-for-web-development-newbies-43ol <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%2Fjw91njcrb70lg2i7sg8m.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%2Fjw91njcrb70lg2i7sg8m.jpeg" alt=" " width="800" height="533"></a><br> <a href="https://www.thinkful.com/blog/tag/software-engineering/" rel="noopener noreferrer">Thinkful’s Blog - Software Engineering</a>: If you’re just starting out in the web development world, our blog is a great place to start looking for more information. You’ll get a chance to <a href="https://www.thinkful.com/blog/why-learning-to-code-is-so-damn-hard/" rel="noopener noreferrer">learn why coding is so damn hard</a> and you’ll be able to meet Thinkful grads who overcame tough coding challenges and became software engineers. Meet skilled mentors and get some advice on how you can launch your coding career in the world’s next workforce.</p> <p><a href="https://thenextweb.com/" rel="noopener noreferrer">The Next Web</a>: The Next Web is an online publisher that shares all types of tech news that web devs love. Do you know the latest product rollouts on Instagram or about Google’s new braille keyboard for Android? You can learn about the latest updates at various tech companies and get insights into all things web development and technology. Read about tech trends and the impact software engineering has on our society today.</p> <p><a href="https://alistapart.com/articles/" rel="noopener noreferrer">A List Apart</a>: A List Apart lets you read insightful web design and development articles from industry leaders. You’ll get the best practices and standards for the web world and get informed on how to create your best work in the industry. Learn about ethical impacts to web development, digital accessibility in the technical workforce, and dig into specific programming languages like JavaScript. A List Apart is an informative publication if you’re curious about how different aspects of web development are used practically.</p> <p><a href="https://superdevresources.com/" rel="noopener noreferrer">Super Dev Resources</a>: If you’re new to the web development field, Super Dev Resources is an easy to read blog that includes resources for developers, designers, and digital marketers. You can find top discussions on web development along with templates and tools to utilize for creating websites. Get tips and tricks on how to improve website usability and learn more about data privacy and how to keep your website safe. Also, get an intersectional view of how a web developer’s work impacts design and marketing.</p> <p><a href="https://www.smashingmagazine.com/articles/" rel="noopener noreferrer">Smashing Magazine</a>: Smashing Magazine is an online publication catering to all things web development. Get lost in articles covering coding, graphics, UX, and more all with the focus to share valuable industry know-how. Find articles on online privacy policies, building web applications with React, and more by browsing their content by category. If you’re into mobile applications, design patterns, CSS and more, this is a great intro to web development and design.</p> <p><a href="https://scotch.io/bar-talk" rel="noopener noreferrer">Scotch.io</a>: Scotch is a blog that hosts web development video tutorials and articles. Get an interactive experience while you learn more about topics such as CSS, JavaScript, Node, and other practical skills that you’ll need on the web development job. You’ll also stumble upon posts to help you overcome deployment anxiety, and teach you about non-relational databases and how to support mixed workloads. Scotch covers tons of web developer topics to get you started.</p> <h2> Must-read blogs for current web developer students: </h2> <p><a href="https://davidwalsh.name/" rel="noopener noreferrer">David Walsh Blog</a>: David shares his expertise as a Senior Software Engineer and Evangelist for Mozilla, and founder of <a href="https://scriptandstyle.simplecast.com/" rel="noopener noreferrer">Script &amp;Style</a> web development podcast and Wyn Weng Labs. You’ll get technical tips and research on what’s going on in the web developer field. Learn about the most essential Git commands and utilities, see what it takes to create a RetroPie on Raspberry Pi, all while learning the steps that will help you to eliminate that well-known, web developer feeling of imposter syndrome.</p> <p><a href="https://css-tricks.com/archives/" rel="noopener noreferrer">CSS Tricks</a>: Don’t let the name fool you, this blog has the inside scoop on more than just CSS. Get important information on multiple aspects of web design and development, ranging from beginner to advanced topics. Get pointers on how to write animation code more efficiently, figure out why some HTML elements become depreciated, and check out how to work with APIs and authentication. If you want to learn basics, along with ways to improve your web developer skills, the CSS tricks blog is a good go-to.</p> <p><a href="https://www.creativebloq.com/web-designer-magazine" rel="noopener noreferrer">Creative Bloq</a>: This one is for the creative developer. If your coding process needs creative inspiration or you want to see how things like grid systems and animations look in practical web-design, Creative Bloq is for you. Read articles on how to choose the best JavaScript frameworks, and how to create success CTAs on a website. You’ll get a mix between front end and back end engineering info with this blog.</p> <p><a href="https://www.webdesignerdepot.com/" rel="noopener noreferrer">Webdesigner Depot</a>: Webdesigner Depot has articles and software freebies to help your website creation process. Even if you’re completely new to the industry, you’ll be able to learn more about what it takes to create websites. Get tools and tutorials on how to use PHP, how to choose between Grid vs. Flexbox, and learn how to code a ‘click to tweet’ button on your site. You’ll also be able to uncover slightly advanced coding topics like how to incorporate machine learning.</p> <p><a href="https://webdesignledger.com/web-development/" rel="noopener noreferrer">Web Design Ledger</a>: For the web developers and web designers, Web Design Ledger brings unique insights on how to create stunning web products. Readers can get informed about current tech trends and see insights from top web developers in the field through Q&amp;A interviews. See what the best development tools are, learn about the best cloud computing programming languages, and see how you can make JavaScript testing and deployments more efficient.</p> <h2> Must-read blogs for web developers in the workforce: </h2> <p><a href="https://www.webfx.com/blog/web-design/" rel="noopener noreferrer">SixRevisions</a>: Six Revisions is a blog that digs deep into the web design and web development industry, giving you tips and tools to make the best web products. This blog is specifically for developers who are interested in creating marketing web products. Created by WebFX, a full-service digital marketing agency, you’ll get to read articles that discuss topics like how to make the best decisions when redesigning a website and best practices for website speed.</p> <p><a href="https://blog.codinghorror.com/" rel="noopener noreferrer">Coding Horror</a>: Jeff Atwood, the co-founder of <a href="https://stackoverflow.com" rel="noopener noreferrer">Stackoverflow</a>, reveals his research and interesting web development findings in Coding Horror. In regard to the name, there’s nothing to be afraid of, it has to do with avoiding dangerous code samples. It doesn’t matter what your level of expertise is, you’ll find something new to learn here. Read about the intricacies of cloud computing, understand more about the code in the transportation industry, and take a deep dive into Stack Overflow, and a beneficial resource for any developer.</p> <p><a href="http://superherojs.com/" rel="noopener noreferrer">Superhero.js</a>: Learn what makes JavaScript web development work. Since the language is so popular for the industry, Superheor.js is a helpful blog to learn how to create, test, and maintain web applications with JavaScript. You’ll find articles, presentations, books, and videos focused on how to secure your JavaScript web application with the best data privacy measures, how to write clean code, and overall how to build functional and user-friendly applications with the language.</p> <p><a href="https://hackernoon.com/tagged/programming/" rel="noopener noreferrer">Hacker Noon</a>: Programmers from around the world contribute to Hacker Noon’s blog. You’ll get current updates on what’s happening in tech and on what you should know as a successful web developer. Learn more about subjects like how to automate with Python, React library components, and tips on how to auto-correct your own code. If you’re looking to brush up on those web development skills, this blog is good for that.</p> <p><a href="https://dzone.com/web-development-programming-tutorials-tools-news" rel="noopener noreferrer">DZone</a>: While DZone covers pretty much everything involved with technology, the Web Dev Spotlight gives great coverage of specific web development topics. Learn more about how to set and manage locales in Rails, get tips on JavaScript localization, and dig deep into server-side pagination. DZone is a great place for professionals who want to read about current developer topics that could help them improve their knowledge of the industry.</p> motivation productivity career Lindsey Howard Wed, 23 Nov 2022 11:43:43 +0000 https://dev.to/codelikeagirl29/front-end-guide-2h7k https://dev.to/codelikeagirl29/front-end-guide-2h7k <h1> Front-end Guide </h1> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fres.cloudinary.com%2Fcodelikeagirl29%2Fimage%2Fupload%2Fv1675500036%2Flautaro-andreani-UYsBCu9RP3Y-unsplash_naaqdn.jpg" 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%2Fres.cloudinary.com%2Fcodelikeagirl29%2Fimage%2Fupload%2Fv1675500036%2Flautaro-andreani-UYsBCu9RP3Y-unsplash_naaqdn.jpg" width="800" height="533"></a></p> <p><em>Credits: Illustration by <a href="https://lindseyk.dev" rel="noopener noreferrer">@dev_lindseyk</a></em></p> <p><em>This guide has been cross-posted on <a href="https://medium.freecodecamp.com/grabs-front-end-guide-for-large-teams-484d4033cc41" rel="noopener noreferrer">Free Code Camp</a>.</em></p> <p>This study guide is inspired by <a href="https://medium.freecodecamp.com/a-study-plan-to-cure-javascript-fatigue-8ad3a54f2eb1#.g9egaapps" rel="noopener noreferrer">"A Study Plan to Cure JavaScript Fatigue"</a> and is mildly opinionated in the sense that we recommend certain libraries/frameworks to learn for each aspect of front end development, based on what is currently deemed most suitable. We explain why a certain library/framework/tool is chosen and provide links to learning resources to enable the reader to pick it up on their own. Alternative choices that may be better for other use cases are provided as well for reference and further self-exploration.</p> <p>If you are familiar with front end development and have been consistently keeping up with the latest developments, this guide will probably not be that useful to you. It is targeted at newcomers to front end.</p> <p>If your company is exploring a modern JavaScript stack as well, you may find this study plan useful to your company! Feel free to adapt it to your needs. We will update this study plan periodically, according to our latest work and choices.<br> <em>- Web Team</em></p> <p><strong>Pre-requisites</strong></p> <ul> <li>Good understanding of core programming concepts.</li> <li>Comfortable with basic command line actions and familiarity with source code version control systems such as Git.</li> <li>Experience in web development. Have built server-side rendered web apps using frameworks like Ruby on Rails, Django, Express, etc.</li> <li>Understanding of how the web works. Familiarity with web protocols and conventions like HTTP and RESTful APIs.</li> </ul> <h2> Table of Contents </h2> <ul> <li>Single-page Apps (SPAs)</li> <li>New-age JavaScript</li> <li>User Interface</li> <li>State Management</li> <li>Coding with Style</li> <li> Maintainability <ul> <li>Testing</li> <li>Linting JavaScript</li> <li>Linting CSS</li> <li>Formatting Code</li> <li>Types</li> </ul> </li> <li>Build System</li> <li>Package Management</li> <li>Continuous Integration</li> <li>Hosting and CDN</li> <li>Deployment</li> <li>Monitoring</li> </ul> <p>Certain topics can be skipped if you have prior experience in them.</p> <h2> Single-page Apps (SPAs) </h2> <p>A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of a web browser loading entire new pages. The goal is faster transitions that make the website feel more like a native app.</p> <p>In a SPA, a page refresh never occurs; instead, all necessary HTML, JavaScript, and CSS code is either retrieved by the browser with a single page load,[1] or the appropriate resources are dynamically loaded and added to the page as necessary, usually in response to user actions.</p> <p>Web developers these days refer to the products they build as web apps, rather than websites. While there is no strict difference between the two terms, web apps tend to be highly interactive and dynamic, allowing the user to perform actions and receive a response for their action. Traditionally, the browser receives HTML from the server and renders it. When the user navigates to another URL, a full-page refresh is required and the server sends fresh new HTML for the new page. This is called server-side rendering.</p> <p>However in modern SPAs, client-side rendering is used instead. The browser loads the initial page from the server, along with the scripts (frameworks, libraries, app code) and stylesheets required for the whole app. When the user navigates to other pages, a page refresh is not triggered. The URL of the page is updated via the <a href="https://developer.mozilla.org/en-US/docs/Web/API/History_API" rel="noopener noreferrer">HTML5 History API</a>. New data required for the new page, usually in JSON format, is retrieved by the browser via <a href="https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started" rel="noopener noreferrer">AJAX</a> requests to the server. The SPA then dynamically updates the page with the data via JavaScript, which it has already downloaded in the initial page load. This model is similar to how native mobile apps work.</p> <p>The benefits:</p> <ul> <li>The app feels more responsive and users do not see the flash between page navigations due to full-page refreshes.</li> <li>Fewer HTTP requests are made to the server, as the same assets do not have to be downloaded again for each page load.</li> <li>Clear separation of the concerns between the client and the server; you can easily build new clients for different platforms (e.g. mobile, chatbots, smart watches) without having to modify the server code. You can also modify the technology stack on the client and server independently, as long as the API contract is not broken.</li> </ul> <p>The downsides:</p> <ul> <li><p>Heavier initial page load due to loading of framework, app code, and assets required for multiple pages.<br> <br> <code>&lt;sup&gt;&lt;a href="#fn1" id="ref1"&gt;1&lt;/a&gt;&lt;/sup&gt;</code><br> </p></li> <li><p>There's an additional step to be done on your server which is to configure it to route all requests to a single entry point and allow client-side routing to take over from there.</p></li> <li><p>SPAs are reliant on JavaScript to render content, but not all search engines execute JavaScript during crawling, and they may see empty content on your page. This inadvertently hurts the Search Engine Optimization (SEO) of your app.<br> <br> <code>&lt;sup&gt;&lt;a href="#fn2" id="ref2"&gt;2&lt;/a&gt;&lt;/sup&gt;</code><br> <br> . However, most of the time, when you are building apps, SEO is not the most important factor, as not all the content needs to be indexable by search engines. To overcome this, you can either server-side render your app or use services such as <a href="https://prerender.io/" rel="noopener noreferrer">Prerender</a> to "render your javascript in a browser, save the static HTML, and return that to the crawlers".</p></li> </ul> <p>While traditional server-side rendered apps are still a viable option, a clear client-server separation scales better for larger engineering teams, as the client and server code can be developed and released independently. This is especially so when having multiple client apps hitting the same API server.</p> <p>As web developers are now building apps rather than pages, organization of client-side JavaScript has become increasingly important. In server-side rendered pages, it is common to use snippets of jQuery to add user interactivity to each page. However, when building large apps, just jQuery is insufficient. After all, jQuery is primarily a library for DOM manipulation and it's not a framework; it does not define a clear structure and organization for your app.</p> <p><strong>JavaScript frameworks</strong> have been created to provide higher-level abstractions over the DOM, allowing you to keep state in memory, out of the DOM. Using frameworks also brings the benefits of reusing recommended concepts and best practices for building apps. A new engineer on the team who is unfamiliar with the code base, but has experience with a framework, will find it easier to understand the code because it is organized in a structure that they are familiar with. Popular frameworks have a lot of tutorials and guides, and tapping on the knowledge and experience from colleagues and the community will help new engineers get up to speed.</p> <h4> Study Links </h4> <ul> <li><a href="http://stackoverflow.com/questions/21862054/single-page-app-advantages-and-disadvantages" rel="noopener noreferrer">Single Page App: advantages and disadvantages</a></li> <li><a href="http://blog.isquaredsoftware.com/presentations/2016-10-revolution-of-web-dev/" rel="noopener noreferrer">The (R)Evolution of Web Development</a></li> <li><a href="https://medium.freecodecamp.com/heres-why-client-side-rendering-won-46a349fadb52" rel="noopener noreferrer">Here's Why Client Side Rendering Won</a></li> </ul> <h2> New-age JavaScript </h2> <p>Before you dive into the various aspects of building a JavaScript web app, it is important to get familiar with the language of the web - JavaScript, or ECMAScript. JavaScript is an incredibly versatile language which you can also use to build <a href="https://nodejs.org/en/" rel="noopener noreferrer">web servers</a>, <a href="https://facebook.github.io/react-native/" rel="noopener noreferrer">native mobile apps</a> and <a href="https://electron.atom.io/" rel="noopener noreferrer">desktop apps</a>.</p> <p>Prior to 2015, the last major update was ECMAScript 5.1, in 2011. However, in the recent years, JavaScript has suddenly seen a huge burst of improvements within a short span of time. In 2015, ECMAScript 2015 (previously called ECMAScript 6) was released and a ton of syntactic constructs were introduced to make writing code less unwieldy. If you are curious about it, Auth0 has written a nice article on the <a href="https://auth0.com/blog/a-brief-history-of-javascript/" rel="noopener noreferrer">history of JavaScript</a>. Til this day, not all browsers have fully implemented the ES2015 specification. Tools such as <a href="https://babeljs.io/" rel="noopener noreferrer">Babel</a> enable developers to write ES2015 in their apps and Babel transpiles them down to ES5 to be compatible for browsers.</p> <p>Being familiar with both ES5 and ES2015 is crucial. ES2015 is still relatively new and a lot of open source code and Node.js apps are still written in ES5. If you are doing debugging in your browser console, you might not be able to use ES2015 syntax. On the other hand, documentation and example code for many modern libraries that we will introduce later below are still written in ES2015. Some developers use <a href="https://github.com/babel/babel-preset-env" rel="noopener noreferrer">babel-preset-env</a> to enjoy the productivity boost from the syntactic improvements the future of JavaScript provides and we have been loving it so far. <code>babel-preset-env</code> intelligently determines which Babel plugins are necessary (which new language features are not supported and have to be transpiled) as browsers increase native support for more ES language features. If you prefer using language features that are already stable, you may find that <a href="https://babeljs.io/docs/plugins/preset-stage-3/" rel="noopener noreferrer">babel-preset-stage-3</a>, which is a complete specification that will most likely be implemented in browsers, will be more suitable.</p> <p>Spend a day or two revising ES5 and exploring ES2015. The more heavily used features in ES2015 include </p> <ul> <li>"Arrows and Lexical This", </li> <li>"Classes", </li> <li>"Template Strings", </li> <li>"Destructuring", </li> <li>"Default/Rest/Spread operators",</li> <li>"Importing and Exporting modules".</li> </ul> <p><strong>Estimated Duration: 3-4 days.</strong> You can learn/lookup the syntax as you learn the other libraries and try building your own app.</p> <h4> Study Links </h4> <ul> <li><a href="https://www.codecademy.com/learn/learn-javascript" rel="noopener noreferrer">Learn JavaScript on Codecademy</a></li> <li><a href="https://www.codecademy.com/learn/introduction-to-javascript" rel="noopener noreferrer">Intro to ES6 on Codecademy</a></li> <li><a href="https://babeljs.io/learn-es2015/" rel="noopener noreferrer">Learn ES2015 on Babel</a></li> <li><a href="http://es6katas.org/" rel="noopener noreferrer">ES6 Katas</a></li> <li> <a href="https://github.com/getify/You-Dont-Know-JS" rel="noopener noreferrer">You Don't Know JS</a> (Advanced content, optional for beginners)</li> <li><a href="https://github.com/yangshun/front-end-interview-handbook/blob/master/questions/javascript-questions.md" rel="noopener noreferrer">Answers to Front End Job Interview Questions — JavaScript</a></li> </ul> <h2> User Interface - React </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%2Fumgqziulznfpqsor9rib.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%2Fumgqziulznfpqsor9rib.png" alt="react-icon" width="100" height="100"></a></p> <p>If any JavaScript project has taken the front end ecosystem by storm in recent years, that would be <a href="https://facebook.github.io/react/" rel="noopener noreferrer">React</a>. React is a library built and open-sourced by the smart people at Facebook. In React, developers write components for their web interface and compose them together.</p> <p>React brings about many radical ideas and encourages developers to <a href="https://www.youtube.com/watch?v=DgVS-zXgMTk" rel="noopener noreferrer">rethink best practices</a>. For many years, web developers were taught that it was a good practice to write HTML, JavaScript and CSS separately. React does the exact opposite, and encourages that you write your HTML and <a href="https://speakerdeck.com/vjeux/react-css-in-js" rel="noopener noreferrer">CSS in your JavaScript</a> instead. This sounds like a crazy idea at first, but after trying it out, it actually isn't as weird as it sounds initially. Reason being the front end development scene is shifting towards a paradigm of component-based development. The features of React:</p> <ul> <li><p><strong>Declarative</strong> - You describe what you want to see in your view and not how to achieve it. In the jQuery days, developers would have to come up with a series of steps to manipulate the DOM to get from one app state to the next. In React, you simply change the state within the component and the view will update itself according to the state. It is also easy to determine how the component will look like just by looking at the markup in the <code>render()</code> method.</p></li> <li><p><strong>Functional</strong> - The view is a pure function of <code>props</code> and <code>state</code>. In most cases, a React component is defined by <code>props</code> (external parameters) and <code>state</code> (internal data). For the same <code>props</code> and <code>state</code>, the same view is produced. Pure functions are easy to test, and the same goes for functional components. Testing in React is made easy because a component's interfaces are well-defined and you can test the component by supplying different <code>props</code> and <code>state</code> to it and comparing the rendered output.</p></li> <li><p><strong>Maintainable</strong> - Writing your view in a component-based fashion encourages reusability. We find that defining a component's <code>propTypes</code> make React code self-documenting as the reader can know clearly what is needed to use that component. Lastly, your view and logic is self-contained within the component, and should not be affected nor affect other components. That makes it easy to shift components around during large-scale refactoring, as long as the same <code>props</code> are supplied to the component.</p></li> <li><p><strong>High Performance</strong> - You might have heard that React uses a virtual DOM (not to be confused with <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM" rel="noopener noreferrer">shadow DOM</a>) and it re-renders everything when there is a change in state. Why is there a need for a virtual DOM? While modern JavaScript engines are fast, reading from and writing to the DOM is slow. React keeps a lightweight virtual representation of the DOM in memory. Re-rendering everything is a misleading term. In React it actually refers to re-rendering the in-memory representation of the DOM, not the actual DOM itself. When there's a change in the underlying data of the component, a new virtual representation is created, and compared against the previous representation. The difference (minimal set of changes required) is then patched to the real browser DOM.</p></li> <li><p><strong>Ease of Learning</strong> - Learning React is pretty simple. The React API surface is relatively small compared to <a href="https://angular.io/docs/ts/latest/api/" rel="noopener noreferrer">this</a>; there are only a few APIs to learn and they do not change often. The React community is one of the largest, and along with that comes a vibrant ecosystem of tools, open-sourced UI components, and a ton of great resources online to get you started on learning React.</p></li> <li><p><strong>Developer Experience</strong> - There are a number of tools that improves the development experience with React. <a href="https://github.com/facebook/react-devtools" rel="noopener noreferrer">React Developer Tools</a> is a browser extension that allows you to inspect your component, view and manipulate its <code>props</code> and <code>state</code>. <a href="https://github.com/gaearon/react-hot-loader" rel="noopener noreferrer">Hot reloading</a> with webpack allows you to view changes to your code in your browser, without you having to refresh the browser. Front end development involves a lot of tweaking code, saving and then refreshing the browser. Hot reloading helps you by eliminating the last step. When there are library updates, Facebook provides <a href="https://github.com/reactjs/react-codemod" rel="noopener noreferrer">codemod scripts</a> to help you migrate your code to the new APIs. This makes the upgrading process relatively pain-free. Kudos to the Facebook team for their dedication in making the development experience with React great. <br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/images%2Freact-devtools-demo.gif" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/images%2Freact-devtools-demo.gif" alt="React Devtools Demo" width="" height=""></a></p></li> </ul> <p>Over the years, new view libraries that are even more performant than React have emerged. React may not be the fastest library out there, but in terms of the ecosystem, overall usage experience and benefits, it is still one of the greatest. Facebook is also channeling efforts into making React even faster with a <a href="https://github.com/acdlite/react-fiber-architecture" rel="noopener noreferrer">rewrite of the underlying reconciliation algorithm</a>. The concepts that React introduced has taught us how to write better code, more maintainable web apps and made us better engineers. We like that.</p> <p>We recommend going through the <a href="https://facebook.github.io/react/tutorial/tutorial.html" rel="noopener noreferrer">tutorial</a> on building a tic-tac-toe game on the React homepage to get a feel of what React is and what it does. For more in-depth learning, check out the Egghead course, <a href="https://egghead.io/courses/build-your-first-production-quality-react-app" rel="noopener noreferrer">Build Your First Production Quality React App</a>. It covers some advanced concepts and real-world usages that are not covered by the React documentation. <a href="https://github.com/facebookincubator/create-react-app" rel="noopener noreferrer">Create React App</a> by Facebook is a tool to scaffold a React project with minimal configuration and is highly recommended to use for starting new React projects.</p> <p>React is a library, not a framework, and does not deal with the layers below the view - the app state. More on that later.</p> <p><strong>Estimated Duration: 3-4 days.</strong> Try building simple projects like a to-do list, Hacker News clone with pure React. You will slowly gain an appreciation for it and perhaps face some problems along the way that isn't solved by React, which brings us to the next topic...</p> <h4> Study Links </h4> <ul> <li><a href="https://facebook.github.io/react/tutorial/tutorial.html" rel="noopener noreferrer">React Official Tutorial</a></li> <li><a href="https://egghead.io/courses/build-your-first-production-quality-react-app" rel="noopener noreferrer">Egghead Course - Build Your First Production Quality React App</a></li> <li><a href="https://hackernoon.com/simple-react-development-in-2017-113bd563691f" rel="noopener noreferrer">Simple React Development in 2017</a></li> <li><a href="https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.5iexphyg5" rel="noopener noreferrer">Presentational and Container Components</a></li> </ul> <h4> Alternatives </h4> <ul> <li><a href="https://angular.io/" rel="noopener noreferrer">Angular</a></li> <li><a href="https://www.emberjs.com/" rel="noopener noreferrer">Ember</a></li> <li><a href="https://vuejs.org/" rel="noopener noreferrer">Vue</a></li> <li><a href="https://cycle.js.org/" rel="noopener noreferrer">Cycle</a></li> </ul> <h2> State Management - Flux/Redux </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%2Fgg5z1w3htmttkukyrrpa.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%2Fgg5z1w3htmttkukyrrpa.png" alt="redux" width="256" height="100"></a></p> <p>As your app grows bigger, you may find that the app structure becomes a little messy. Components throughout the app may have to share and display common data but there is no elegant way to handle that in React. After all, React is just the view layer, it does not dictate how you structure the other layers of your app, such as the model and the controller, in traditional MVC paradigms. In an effort to solve this, Facebook invented Flux, an app architecture that complements React's composable view components by utilizing a unidirectional data flow. Read more about how Flux works <a href="https://facebook.github.io/flux/docs/in-depth-overview.html" rel="noopener noreferrer">here</a>. In summary, the Flux pattern has the following characteristics:</p> <ul> <li> <strong>Unidirectional data flow</strong> - Makes the app more predictable as updates can be tracked easily.</li> <li> <strong>Separation of concerns</strong> - Each part in the Flux architecture has clear responsibilities and are highly decoupled.</li> <li> <strong>Works well with declarative programming</strong> - The store can send updates to the view without specifying how to transition views between states.</li> </ul> <p>As Flux is not a framework per se, developers have tried to come up with many implementations of the Flux pattern. Eventually, a clear winner emerged, which was <a href="http://redux.js.org/" rel="noopener noreferrer">Redux</a>. Redux combines the ideas from Flux, <a href="https://www.wikiwand.com/en/Command_pattern" rel="noopener noreferrer">Command pattern</a> and <a href="https://guide.elm-lang.org/architecture/" rel="noopener noreferrer">Elm architecture</a> and is the de facto state management library developers use with React these days. Its core concepts are:</p> <ul> <li>App <strong>state</strong> is described by a single plain old JavaScript object (POJO).</li> <li>Dispatch an <strong>action</strong> (also a POJO) to modify the state.</li> <li> <strong>Reducer</strong> is a pure function that takes in current state and action to produce a new state.</li> </ul> <p>The concepts sound simple, but they are really powerful as they enable apps to:</p> <ul> <li>Have their state rendered on the server, booted up on the client.</li> <li>Trace, log and backtrack changes in the whole app.</li> <li>Implement undo/redo functionality easily.</li> </ul> <p>The creator of Redux, <a href="https://github.com/gaearon" rel="noopener noreferrer">Dan Abramov</a>, has taken great care in writing up detailed documentation for Redux, along with creating comprehensive video tutorials for learning <a href="https://egghead.io/courses/getting-started-with-redux" rel="noopener noreferrer">basic</a> and <a href="https://egghead.io/courses/building-react-applications-with-idiomatic-redux" rel="noopener noreferrer">advanced</a> Redux. They are extremely helpful resources for learning Redux.</p> <p><strong>Combining View and State</strong></p> <p>While Redux does not necessarily have to be used with React, it is highly recommended as they play very well with each other. React and Redux have a lot of ideas and traits in common:</p> <ul> <li> <strong>Functional composition paradigm</strong> - React composes views (pure functions) while Redux composes pure reducers (also pure functions). Output is predictable given the same set of input.</li> <li> <strong>Easy To Reason About</strong> - You may have heard this term many times but what does it actually mean? We interpret it as having control and understanding over our code - Our code behaves in ways we expect it to, and when there are problems, we can find them easily. Through our experience, React and Redux makes debugging simpler. As the data flow is unidirectional, tracing the flow of data (server responses, user input events) is easier and it is straightforward to determine which layer the problem occurs in.</li> <li> <strong>Layered Structure</strong> - Each layer in the app / Flux architecture is a pure function, and has clear responsibilities. It is relatively easy to write tests for pure functions. You have to centralize changes to your app within the reducer, and the only way to trigger a change is to dispatch an action.</li> <li> <strong>Development Experience</strong> - A lot of effort has gone into creating tools to help in debugging and inspecting the app while development, such as <a href="https://github.com/gaearon/redux-devtools" rel="noopener noreferrer">Redux DevTools</a>. <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/images%2Fredux-devtools-demo.gif" alt="Redux Devtools Demo" width="" height=""> </li> </ul> <p>Your app will likely have to deal with async calls like making remote API requests. <a href="https://github.com/gaearon/redux-thunk" rel="noopener noreferrer">redux-thunk</a> and <a href="https://github.com/redux-saga/redux-saga" rel="noopener noreferrer">redux-saga</a> were created to solve those problems. They may take some time to understand as they require understanding of functional programming and generators. Our advice is to deal with it only when you need it.</p> <p><a href="https://github.com/reactjs/react-redux" rel="noopener noreferrer">react-redux</a> is an official React binding for Redux and is very simple to learn.</p> <p><strong>Estimated Duration: 4 days.</strong> The egghead courses can be a little time-consuming but they are worth spending time on. After learning Redux, you can try incorporating it into the React projects you have built. Does Redux solve some of the state management issues you were struggling with in pure React?</p> <h4> Study Links </h4> <ul> <li><a href="http://facebook.github.io/flux" rel="noopener noreferrer">Flux Homepage</a></li> <li><a href="http://redux.js.org/" rel="noopener noreferrer">Redux Homepage</a></li> <li><a href="https://egghead.io/courses/getting-started-with-redux" rel="noopener noreferrer">Egghead Course - Getting Started with Redux</a></li> <li><a href="https://egghead.io/courses/building-react-applications-with-idiomatic-redux" rel="noopener noreferrer">Egghead Course - Build React Apps with Idiomatic Redux</a></li> <li><a href="https://github.com/markerikson/react-redux-links" rel="noopener noreferrer">React Redux Links</a></li> <li><a href="https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367" rel="noopener noreferrer">You Might Not Need Redux</a></li> </ul> <h4> Alternatives </h4> <ul> <li><a href="https://github.com/mobxjs/mobx" rel="noopener noreferrer">MobX</a></li> </ul> <h2> Coding with Style - CSS Modules </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%2Fbyxhljtrpxwoun5pkqi0.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%2Fbyxhljtrpxwoun5pkqi0.png" alt="css-logo" width="256" height="100"></a></p> <p>CSS (Cascading Style Sheets) are rules to describe how your HTML elements look. Writing good CSS is hard. It usually takes many years of experience and frustration of shooting yourself in the foot before one is able to write maintainable and scalable CSS. CSS, having a global namespace, is fundamentally designed for web documents, and not really for web apps that favor a components architecture. Hence, experienced front end developers have designed methodologies to guide people on how to write organized CSS for complex projects, such as using <a href="https://smacss.com/" rel="noopener noreferrer">SMACSS</a>, <a href="http://getbem.com/" rel="noopener noreferrer">BEM</a>, <a href="http://suitcss.github.io/" rel="noopener noreferrer">SUIT CSS</a>, etc.</p> <p>However, the encapsulation of styles that these methodologies bring about are artificially enforced by conventions and guidelines. They break the moment developers do not follow them.</p> <p>As you might have realized by now, the front end ecosystem is saturated with tools, and unsurprisingly, tools have been invented to <a href="https://speakerdeck.com/vjeux/react-css-in-js" rel="noopener noreferrer">partially solve some of the problems</a> with writing CSS at scale. "At scale" means that many developers are working on the same large project and touching the same stylesheets. There is no community-agreed approach on writing <a href="https://github.com/MicheleBertoli/css-in-js" rel="noopener noreferrer">CSS in JS</a> at the moment, and we are hoping that one day a winner would emerge, just like Redux did, among all the Flux implementations. For now, we are banking on <a href="https://github.com/css-modules/css-modules" rel="noopener noreferrer">CSS Modules</a>. CSS modules is an improvement over existing CSS that aims to fix the problem of global namespace in CSS; it enables you to write styles that are local by default and encapsulated to your component. This feature is achieved via tooling. With CSS modules, large teams can write modular and reusable CSS without fear of conflict or overriding other parts of the app. However, at the end of the day, CSS modules are still being compiled into normal globally-namespaced CSS that browsers recognize, and it is still important to learn and understand how raw CSS works.</p> <p>If you are a total beginner to CSS, Codecademy's <a href="https://www.codecademy.com/learn/learn-html-css" rel="noopener noreferrer">HTML &amp; CSS course</a> will be a good introduction to you. Next, read up on the <a href="http://sass-lang.com/" rel="noopener noreferrer">Sass preprocessor</a>, an extension of the CSS language which adds syntactic improvements and encourages style reusability. Study the CSS methodologies mentioned above, and lastly, CSS modules.</p> <p><strong>Estimated Duration: 3-4 days.</strong> Try styling up your app using the SMACSS/BEM approach and/or CSS modules.</p> <h4> Study Links </h4> <ul> <li><a href="https://www.codecademy.com/learn/learn-html-css" rel="noopener noreferrer">Learn HTML &amp; CSS course on Codecademy</a></li> <li><a href="https://www.khanacademy.org/computing/computer-programming/html-css" rel="noopener noreferrer">Intro to HTML/CSS on Khan Academy</a></li> <li><a href="https://smacss.com/" rel="noopener noreferrer">SMACSS</a></li> <li><a href="http://getbem.com/introduction/" rel="noopener noreferrer">BEM</a></li> <li><a href="http://suitcss.github.io/" rel="noopener noreferrer">SUIT CSS</a></li> <li><a href="https://github.com/css-modules/css-modules" rel="noopener noreferrer">CSS Modules Specification</a></li> <li><a href="http://sass-lang.com/" rel="noopener noreferrer">Sass Homepage</a></li> <li><a href="https://github.com/yangshun/tech-interview-handbook/blob/master/front-end/interview-questions.md#html-questions" rel="noopener noreferrer">Answers to Front End Job Interview Questions — HTML</a></li> <li><a href="https://github.com/yangshun/tech-interview-handbook/blob/master/front-end/interview-questions.md#css-questions" rel="noopener noreferrer">Answers to Front End Job Interview Questions — CSS</a></li> </ul> <h4> Alternatives </h4> <ul> <li><a href="https://github.com/cssinjs/jss" rel="noopener noreferrer">JSS</a></li> <li><a href="https://github.com/styled-components/styled-components" rel="noopener noreferrer">Styled Components</a></li> </ul> <h2> Maintainability </h2> <p>Code is read more frequently than it is written. Developers highly value readability, maintainability and stability of the code and there are a few ways to achieve that: "Extensive testing", "Consistent coding style" and "Typechecking". Also when you are on a team, sharing same practices becomes really important. Check out these <a href="https://github.com/wearehive/project-guidelines" rel="noopener noreferrer">JavaScript Project Guidelines</a> for instance.</p> <h2> Testing - Jest + Enzyme </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%2Fphmq3lmmh2skndbphrrh.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%2Fphmq3lmmh2skndbphrrh.png" alt="jest" width="256" height="100"></a></p> <p><a href="http://facebook.github.io/jest/" rel="noopener noreferrer">Jest</a> is a testing library by Facebook that aims to make the process of testing pain-free. As with Facebook projects, it provides a great development experience out of the box. Tests can be run in parallel resulting in shorter duration. During watch mode, by default, only the tests for the changed files are run. One particular feature we like is "Snapshot Testing". Jest can save the generated output of your React component and Redux state and save it as serialized files, so you wouldn't have to manually come up with the expected output yourself. Jest also comes with built-in mocking, assertion and test coverage. One library to rule them all!</p> <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%2F7tucaeolz1m6hmg88ead.gif" 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%2F7tucaeolz1m6hmg88ead.gif" alt="Jest Demo" width="400" height="300"></a></p> <p>React comes with some testing utilities, but <a href="http://airbnb.io/enzyme/" rel="noopener noreferrer">Enzyme</a> by Airbnb makes it easier to generate, assert, manipulate and traverse your React components' output with a jQuery-like API. It is recommended that Enzyme be used to test React components.</p> <p>Jest and Enzyme makes writing front end tests fun and easy. When writing tests becomes enjoyable, developers write more tests. It also helps that React components and Redux actions/reducers are relatively easy to test because of clearly defined responsibilities and interfaces. For React components, we can test that given some <code>props</code>, the desired DOM is rendered, and that callbacks are fired upon certain simulated user interactions. For Redux reducers, we can test that given a prior state and an action, a resulting state is produced.</p> <p>The documentation for Jest and Enzyme are pretty concise, and it should be sufficient to learn them by reading it.</p> <p><strong>Estimated Duration: 2-3 days.</strong> Try writing Jest + Enzyme tests for your React + Redux app!</p> <h4> Study Links </h4> <ul> <li><a href="http://facebook.github.io/jest/" rel="noopener noreferrer">Jest Homepage</a></li> <li><a href="https://auth0.com/blog/testing-react-applications-with-jest/" rel="noopener noreferrer">Testing React Applications with Jest</a></li> <li><a href="http://airbnb.io/enzyme/" rel="noopener noreferrer">Enzyme Homepage</a></li> <li><a href="https://medium.com/airbnb-engineering/enzyme-javascript-testing-utilities-for-react-a417e5e5090f" rel="noopener noreferrer">Enzyme: JavaScript Testing utilities for React</a></li> </ul> <h4> Alternatives </h4> <ul> <li><a href="https://github.com/avajs/ava" rel="noopener noreferrer">AVA</a></li> <li><a href="https://karma-runner.github.io/" rel="noopener noreferrer">Karma</a></li> </ul> <h2> Linting JavaScript - ESLint </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%2Fhtvpnmp9nybbd8df7fdu.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%2Fhtvpnmp9nybbd8df7fdu.png" alt="eslint" width="256" height="100"></a></p> <p>A linter is a tool to statically analyze code and finds problems with them, potentially preventing bugs/runtime errors and at the same time, enforcing a coding style. Time is saved during pull request reviews when reviewers do not have to leave nitpicky comments on coding style. <a href="http://eslint.org/" rel="noopener noreferrer">ESLint</a> is a tool for linting JavaScript code that is highly extensible and customizable. Teams can write their own lint rules to enforce their custom styles. Most developers use Airbnb's <a href="https://www.npmjs.com/package/eslint-config-airbnb" rel="noopener noreferrer"><code>eslint-config-airbnb</code></a> preset, that has already been configured with the common good coding style in the <a href="https://github.com/airbnb/javascript" rel="noopener noreferrer">Airbnb JavaScript style guide</a>.</p> <p>For the most part, using ESLint is as simple as tweaking a configuration file in your project folder. There's nothing much to learn about ESLint if you're not writing new rules for it. Just be aware of the errors when they surface and Google it to find out the recommended style.</p> <p><strong>Estimated Duration: 1/2 day.</strong> Nothing much to learn here. Add ESLint to your project and fix the linting errors!</p> <h4> Study Links </h4> <ul> <li><a href="http://eslint.org/" rel="noopener noreferrer">ESLint Homepage</a></li> <li><a href="https://github.com/airbnb/javascript" rel="noopener noreferrer">Airbnb JavaScript Style Guide</a></li> </ul> <h4> Alternatives </h4> <ul> <li><a href="https://github.com/standard/standard" rel="noopener noreferrer">Standard</a></li> <li><a href="http://jshint.com/" rel="noopener noreferrer">JSHint</a></li> <li><a href="https://github.com/xojs/xo" rel="noopener noreferrer">XO</a></li> </ul> <h2> Linting CSS - stylelint </h2> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.rawgit.com%2Fgrab%2Ffront-end-guide%2Fmaster%2Fimages%2Fstylelint-logo.svg" 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%2Fcdn.rawgit.com%2Fgrab%2Ffront-end-guide%2Fmaster%2Fimages%2Fstylelint-logo.svg" alt="stylelint" width="114" height="29"></a></p> <p>As mentioned earlier, good CSS is notoriously hard to write. Usage of static analysis tools on CSS can help to maintain our CSS code quality and coding style. For linting CSS, we use stylelint. Like ESLint, stylelint is designed in a very modular fashion, allowing developers to turn rules on/off and write custom plugins for it. Besides CSS, stylelint is able to parse SCSS and has experimental support for Less, which lowers the barrier for most existing code bases to adopt it.</p> <p>Once you have learnt ESLint, learning stylelint would be effortless considering their similarities. stylelint is currently being used by big companies like <a href="https://code.facebook.com/posts/879890885467584/improving-css-quality-at-facebook-and-beyond/" rel="noopener noreferrer">Facebook</a>, <a href="https://github.com/primer/stylelint-config-primer" rel="noopener noreferrer">Github</a> and <a href="https://github.com/WordPress-Coding-Standards/stylelint-config-wordpress" rel="noopener noreferrer">Wordpress</a>.</p> <p>One downside of stylelint is that the autofix feature is not fully mature yet, and is only able to fix for a limited number of rules. However, this issue should improve with time.</p> <p><strong>Estimated Duration: 1/2 day.</strong> Nothing much to learn here. Add stylelint to your project and fix the linting errors!</p> <h4> Study Links </h4> <ul> <li><a href="https://stylelint.io/" rel="noopener noreferrer">stylelint Homepage</a></li> <li><a href="https://css-tricks.com/stylelint/" rel="noopener noreferrer">Lint your CSS with stylelint</a></li> </ul> <h4> Alternatives </h4> <ul> <li><a href="https://github.com/sasstools/sass-lint" rel="noopener noreferrer">Sass Lint</a></li> <li><a href="http://csslint.net/" rel="noopener noreferrer">CSS Lint</a></li> </ul> <h2> Formatting Code - Prettier </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%2Fw9tmm1b9xl0vn0m3jefu.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%2Fw9tmm1b9xl0vn0m3jefu.png" width="100" height="100"></a></p> <p>Another tool for enforcing consistent coding style for JavaScript and CSS is <a href="https://github.com/prettier/prettier" rel="noopener noreferrer">Prettier</a>.</p> <p>In most cases, it is recommended to setup Prettier on top of ESLint and stylelint and integrate it into the workflow. This allows the code to be formatted into consistent style automatically via commit hooks, so that developers do not need to spend time formatting the coding style manually.</p> <p>Note that Prettier only enforces coding style, but does not check for logic errors in the code. Hence it is not a replacement for linters.</p> <p><strong>Estimated Duration: 1/2 day.</strong> Nothing much to learn here. Add Prettier to your project and add hooks to enforce the coding style!</p> <h4> Study Links </h4> <ul> <li><a href="https://prettier.io/" rel="noopener noreferrer">Prettier Homepage</a></li> <li><a href="https://github.com/prettier/prettier" rel="noopener noreferrer">Prettier GitHub repo</a></li> <li><a href="https://gist.github.com/yangshun/318102f525ec68033bf37ac4a010eb0c" rel="noopener noreferrer">Comparison between tools that allow you to use ESLint and Prettier together</a></li> </ul> <h2> Types - Flow </h2> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.rawgit.com%2Fgrab%2Ffront-end-guide%2Fmaster%2Fimages%2Fflow-logo.png" class="article-body-image-wrapper"><img alt="Flow Logo" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.rawgit.com%2Fgrab%2Ffront-end-guide%2Fmaster%2Fimages%2Fflow-logo.png" width="200" height="200"></a></p> <p>Static typing brings about many benefits when writing apps. They can catch common bugs and errors in your code early. Types also serve as a form of documentation for your code and improves the readability of your code. As a code base grows larger, we see the importance of types as they gives us greater confidence when we do refactoring. It is also easier to onboard new members of the team to the project when it is clear what kind of values each object holds and what each function expects.</p> <p>Adding types to your code comes with the trade-off of increased verbosity and a learning curve of the syntax. But this learning cost is paid upfront and amortized over time. In complex projects where the maintainability of the code matters and the people working on it change over time, adding types to the code brings about more benefits than disadvantages.</p> <p>Recently, I had to fix a bug in a code base that I haven’t touched in months. It was thanks to types that I could easily refresh myself on what the code was doing, and gave me confidence in the fix I made.</p> <p>The two biggest contenders in adding static types to JavaScript are <a href="https://flow.org/" rel="noopener noreferrer">Flow</a> (by Facebook) and <a href="https://www.typescriptlang.org/" rel="noopener noreferrer">TypeScript</a> (by Microsoft). As of date, there is no clear winner in the battle. For now, we have made the choice of using Flow. We find that Flow has a lower learning curve as compared to TypeScript and it requires relatively less effort to migrate an existing code base to Flow. Being built by Facebook, Flow has better integration with the React ecosystem out of the box. <a href="https://twitter.com/thejameskyle" rel="noopener noreferrer">James Kyle</a>, one of the authors of Flow, has <a href="http://thejameskyle.com/adopting-flow-and-typescript.html" rel="noopener noreferrer">written</a> on a comparison between adopting Flow and TypeScript.</p> <p>Anyway, it is not extremely difficult to move from Flow to TypeScript as the syntax and semantics are quite similar, and we will re-evaluate the situation in time to come. After all, using one is better than not using any at all.</p> <p>Flow recently revamped their homepage and it's pretty neat now!</p> <p><strong>Estimated Duration: 1 day.</strong> Flow is pretty simple to learn as the type annotations feel like a natural extension of the JavaScript language. Add Flow annotations to your project and embrace the power of type systems.</p> <h4> Study Links </h4> <ul> <li><a href="https://flow.org/" rel="noopener noreferrer">Flow Homepage</a></li> <li><a href="https://github.com/niieani/typescript-vs-flowtype" rel="noopener noreferrer">TypeScript vs Flow</a></li> </ul> <h4> Alternatives </h4> <ul> <li><a href="https://www.typescriptlang.org/" rel="noopener noreferrer">TypeScript</a></li> </ul> <h2> Build System - webpack </h2> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.rawgit.com%2Fgrab%2Ffront-end-guide%2Fmaster%2Fimages%2Fwebpack-logo.svg" class="article-body-image-wrapper"><img alt="webpack Logo" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.rawgit.com%2Fgrab%2Ffront-end-guide%2Fmaster%2Fimages%2Fwebpack-logo.svg" width="600" height="600"></a></p> <p>This part will be kept short as setting up webpack can be a tedious process and might be a turn-off to developers who are already overwhelmed by the barrage of new things they have to learn for front end development. In a nutshell, <a href="https://webpack.js.org/" rel="noopener noreferrer">webpack</a> is a module bundler that compiles a front end project and its dependencies into a final bundle to be served to users. Usually, projects will already have the webpack configuration set up and developers rarely have to change it. Having an understanding of webpack is still a good to have in the long run. It is due to webpack that features like hot reloading and CSS modules are made possible.</p> <p>We have found the <a href="https://survivejs.com/webpack/foreword/" rel="noopener noreferrer">webpack walkthrough</a> by SurviveJS to be the best resource on learning webpack. It is a good complement to the official documentation and we recommend following the walkthrough first and referring to the documentation later when the need for further customization arises.</p> <p><strong>Estimated Duration: 2 days (Optional).</strong></p> <h4> Study Links </h4> <ul> <li><a href="https://webpack.js.org/" rel="noopener noreferrer">webpack Homepage</a></li> <li><a href="https://survivejs.com/webpack/foreword/" rel="noopener noreferrer">SurviveJS - Webpack: From apprentice to master</a></li> </ul> <h4> Alternatives </h4> <ul> <li><a href="https://rollupjs.org/" rel="noopener noreferrer">Rollup</a></li> <li><a href="http://browserify.org/" rel="noopener noreferrer">Browserify</a></li> <li><a href="https://parceljs.org/" rel="noopener noreferrer">Parcel</a></li> </ul> <h2> Package Management - Yarn </h2> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.rawgit.com%2Fgrab%2Ffront-end-guide%2Fmaster%2Fimages%2Fyarn-logo.png" class="article-body-image-wrapper"><img alt="Yarn Logo" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.rawgit.com%2Fgrab%2Ffront-end-guide%2Fmaster%2Fimages%2Fyarn-logo.png" width="800" height="418"></a></p> <p>If you take a peek into your <code>node_modules</code> directory, you will be appalled by the number of directories that are contained in it. Each babel plugin, lodash function, is a package on its own. When you have multiple projects, these packages are duplicated across each project and they are largely similar. Each time you run <code>npm install</code> in a new project, these packages are downloaded over and over again even though they already exist in some other project in your computer.</p> <p>There was also the problem of non-determinism in the installed packages via <code>npm install</code>. Some of our CI builds fail because at the point of time when the CI server installs the dependencies, it pulled in minor updates to some packages that contained breaking changes. This would not have happened if library authors respected <a href="http://semver.org/" rel="noopener noreferrer">semver</a> and engineers did not assume that API contracts would be respected all the time.</p> <p><a href="https://yarnpkg.com/" rel="noopener noreferrer">Yarn</a> solves these problems. The issue of non-determinism of installed packages is handled via a <code>yarn.lock</code> file, which ensures that every install results in the exact same file structure in <code>node_modules</code> across all machines. Yarn utilizes a global cache directory within your machine, and packages that have been downloaded before do not have to be downloaded again. This also enables offline installation of dependencies!</p> <p>The most common Yarn commands can be found <a href="https://yarnpkg.com/en/docs/usage" rel="noopener noreferrer">here</a>. Most other yarn commands are similar to the <code>npm</code> equivalents and it is fine to use the <code>npm</code> versions instead. One of our favorite commands is <code>yarn upgrade-interactive</code> which makes updating dependencies a breeze especially when the modern JavaScript project requires so many dependencies these days. Do check it out!</p> <p><a href="mailto:npm@5.0.0">npm@5.0.0</a> was <a href="https://github.com/npm/npm/releases/tag/v5.0.0" rel="noopener noreferrer">released in May 2017</a> and it seems to address many of the issues that Yarn aims to solve. Do keep an eye on it!</p> <p><strong>Estimated Duration: 2 hours.</strong></p> <h4> Study Links </h4> <ul> <li><a href="https://yarnpkg.com/" rel="noopener noreferrer">Yarn Homepage</a></li> <li><a href="https://code.facebook.com/posts/1840075619545360" rel="noopener noreferrer">Yarn: A new package manager for JavaScript</a></li> </ul> <h4> Alternatives </h4> <ul> <li><a href="https://github.com/npm/npm/releases/tag/v5.0.0" rel="noopener noreferrer">Good old npm</a></li> </ul> <h2> Continuous Integration </h2> <p>We used <a href="https://travis-ci.com/" rel="noopener noreferrer">Travis CI</a> for our continuous integration (CI) pipeline. Travis is a highly popular CI on Github and its <a href="https://docs.travis-ci.com/user/customizing-the-build#Build-Matrix" rel="noopener noreferrer">build matrix</a> feature is useful for repositories which contain multiple projects. We configured Travis to do the following:</p> <ul> <li>Run linting for the project.</li> <li>Run unit tests for the project.</li> <li>If the tests pass: <ul> <li>Test coverage generated by Jest is uploaded to <a href="https://codecov.io/" rel="noopener noreferrer">Codecov</a>.</li> <li>Generate a production bundle with webpack into a <code>build</code> directory.</li> <li> <code>tar</code> the <code>build</code> directory as <code>&lt;hash&gt;.tar</code> and upload it to an S3 bucket which stores all our tar builds.</li> </ul> </li> <li>Post a notification to Slack to inform about the Travis build result.</li> </ul> <h4> Study Links </h4> <ul> <li><a href="https://travis-ci.com/" rel="noopener noreferrer">Travis Homepage</a></li> <li><a href="https://codecov.io/" rel="noopener noreferrer">Codecov Homepage</a></li> </ul> <h4> Alternatives </h4> <ul> <li><a href="https://jenkins.io/" rel="noopener noreferrer">Jenkins</a></li> <li><a href="https://circleci.com/" rel="noopener noreferrer">CircleCI</a></li> <li><a href="https://about.gitlab.com/product/continuous-integration/" rel="noopener noreferrer">GitLab CI/CD</a></li> </ul> <h2> Hosting and CDN </h2> <p>Traditionally, web servers that receive a request for a webpage will render the contents on the server, and return a HTML page with dynamic content meant for the requester. This is known as server-side rendering. As mentioned earlier in the section on Single-page Apps, modern web applications do not involve server-side rendering, and it is sufficient to use a web server that serves static asset files. Nginx and Apache are possible options and not much configuration is required to get things up and runnning. The caveat is that the web server will have to be configured to route all requests to a single entry point and allow client-side routing to take over. The flow for front end routing goes like this:</p> <ol> <li>Web server receives a HTTP request for a particular route, for example <code>/user/john</code>.</li> <li>Regardless of which route the server receives, serve up <code>index.html</code> from the static assets directory.</li> <li>The <code>index.html</code> should contain scripts that load up a JavaScript framework/library that handles client-side routing.</li> <li>The client-side routing library reads the current route, and communicates to the MVC (or equivalent where relevant) framework about the current route.</li> <li>The MVC JavaScript framework renders the desired view based on the route, possibly after fetching data from an API if required. Example, load up <code>UsersController</code>, fetch user data for the username <code>john</code> as JSON, combine the data with the view, and render it on the page.</li> </ol> <p>A good practice for serving static content is to use caching and putting them on a CDN. We use <a href="https://aws.amazon.com/s3/" rel="noopener noreferrer">Amazon Simple Storage Service (S3)</a> for hosting our static website content and <a href="https://aws.amazon.com/cloudfront/" rel="noopener noreferrer">Amazon CloudFront</a> as the CDN. We find that it is an affordable and reliable solution that meets our needs.</p> <p>S3 provides the option to "Use this bucket to host a website", which essentially directs the requests for all routes to the root of the bucket, which means we do not need our own web servers with special routing configurations.</p> <p>Other than hosting the website, we also use S3 to host the build <code>.tar</code> files generated from each successful CI build.</p> <h4> Study Links </h4> <ul> <li><a href="https://aws.amazon.com/s3/" rel="noopener noreferrer">Amazon S3 Homepage</a></li> <li><a href="https://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteHosting.html" rel="noopener noreferrer">Hosting a Static Website on Amazon S3</a></li> </ul> <h4> Alternatives </h4> <ul> <li><a href="https://cloud.google.com/storage/docs/hosting-static-website" rel="noopener noreferrer">Google Cloud Platform</a></li> <li><a href="https://zeit.co/now" rel="noopener noreferrer">Now</a></li> </ul> <h2> Deployment </h2> <p>The last step in shipping the product to our users is deployment. We used <a href="https://www.ansible.com/tower" rel="noopener noreferrer">Ansible Tower</a> which is a powerful automation software that enables us to deploy our builds easily.</p> <p>As mentioned earlier, all our commits, upon successful build, are being uploaded to a central S3 bucket for builds. We follow semver for our releases and have commands to automatically generate release notes for the latest release. When it is time to release, we run a command to tag the latest commit and push to our code hosting environment. Travis will run the CI steps on that tagged commit and upload a tar file (such as <code>1.0.1.tar</code>) with the version to our S3 bucket for builds.</p> <p>On Tower, we simply have to specify the name of the <code>.tar</code> we want to deploy to our hosting bucket, and Tower does the following:</p> <ol> <li>Download the desired <code>.tar</code> file from our builds S3 bucket.</li> <li>Extracts the contents and swap in the configuration file for specified environment.</li> <li>Upload the contents to the hosting bucket.</li> <li>Post a notification to Slack to inform about the successful deployment.</li> </ol> <p>This whole process is done under 30 seconds and using Tower has made deployments and rollbacks easy. If we realize that a faulty deployment has occurred, we can simply find the previous stable tag and deploy it.</p> <h4> Study Links </h4> <ul> <li><a href="https://www.ansible.com/tower" rel="noopener noreferrer">Ansible Tower Homepage</a></li> </ul> <h4> Alternatives </h4> <ul> <li><a href="https://jenkins.io/" rel="noopener noreferrer">Jenkins</a></li> </ul> <h2> Monitoring </h2> <p>After shipping the product, you would also want to monitor it for any errors.</p> <p>Apart from network level monitoring from our CDN service provider and hosting provider, we use <a href="https://sentry.io/" rel="noopener noreferrer">Sentry</a> to monitor errors that originates from the app logic.</p> <h4> Study Links </h4> <ul> <li><a href="https://sentry.io/" rel="noopener noreferrer">Sentry Homepage</a></li> </ul> <h3> The Journey has Just Begun </h3> <p>Congratulations on making it this far! Front end development today is <a href="https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f" rel="noopener noreferrer">hard</a>, but it is also more interesting than before &amp; more possibilites are within our reach. What was covered here so far will help any new engineer to their web team to get up to speed with our technologies pretty quickly. There are many more things to be learnt, but building up a solid foundation in the essentials will aid in learning the rest of the technologies. This helpful <a href="https://github.com/kamranahmedse/developer-roadmap#-front-end-roadmap" rel="noopener noreferrer">front end web developer roadmap</a> shows the alternative technologies available for each aspect.</p> <p>To made our technical decisions based on what was important to a rapidly growing IT world - maintainability and stability of the code base. These decisions may or may not apply to smaller teams and projects. Do evaluate what works best for you and your company.</p> <p>As the front end ecosystem grows, we are actively exploring, experimenting and evaluating how new technologies can make us a more efficient team and improve our productivity. I hope that this post has given you insights into some of the front end technologies developers use frequently.</p> <h3> More Reading </h3> <p><strong>General</strong></p> <ul> <li><a href="http://www.infoq.com/articles/state-of-javascript-2016" rel="noopener noreferrer">State of the JavaScript Landscape: A Map for Newcomers</a></li> <li><a href="http://marcobotto.com/the-hitchhikers-guide-to-the-modern-front-end-development-workflow/" rel="noopener noreferrer">The Hitchhiker's guide to the modern front end development workflow</a></li> <li><a href="https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f#.tmy8gzgvp" rel="noopener noreferrer">How it feels to learn JavaScript in 2016</a></li> <li><a href="https://github.com/kamranahmedse/developer-roadmap#-frontend-roadmap" rel="noopener noreferrer">Roadmap to becoming a web developer in 2017</a></li> <li><a href="https://trackchanges.postlight.com/modern-javascript-for-ancient-web-developers-58e7cae050f9" rel="noopener noreferrer">Modern JavaScript for Ancient Web Developers</a></li> </ul> <p><strong>Other Study Plans</strong></p> <ul> <li><a href="https://medium.freecodecamp.com/a-study-plan-to-cure-javascript-fatigue-8ad3a54f2eb1#.c0wnrrcwd" rel="noopener noreferrer">A Study Plan To Cure JavaScript Fatigue</a></li> <li><a href="https://github.com/verekia/js-stack-from-scratch" rel="noopener noreferrer">JS Stack from Scratch</a></li> <li><a href="https://medium.freecodecamp.com/a-beginners-javascript-study-plan-27f1d698ea5e#.bgf49xno2" rel="noopener noreferrer">A Beginner’s JavaScript Study Plan</a></li> </ul> <h3> Footnotes </h3> <blockquote> <p><a href="https://webpack.js.org/guides/code-splitting/" rel="noopener noreferrer">Jump back to footnote 1 in the text ↩</a><br> <a href="https://medium.com/@mjackson/universal-javascript-4761051b7ae9" rel="noopener noreferrer">Universal JS</a></p> </blockquote> Lindsey Howard Sat, 12 Nov 2022 19:55:50 +0000 https://dev.to/codelikeagirl29/gatsbyjs-101-4b3o https://dev.to/codelikeagirl29/gatsbyjs-101-4b3o <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%2Foerjok14iha0gre2x8x8.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%2Foerjok14iha0gre2x8x8.png" alt="Image description" width="800" height="528"></a></p> <h2> A Tour Inside Your <strong>Gatsby</strong> Files </h2> <h3> <code>pages</code> Directory </h3> <p>The <code>/src/pages/</code> directory contains your site’s pages. Each page is a React component. For instance, your site’s home-page code is located in <code>/pages/index.js</code> and looks like this:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>import React from "react" import { Link } from "gatsby" import Layout from "../components/layout" import Image from "../components/image" import SEO from "../components/seo" const IndexPage = () =&gt; ( &lt;Layout&gt; &lt;SEO title="Home" /&gt; &lt;h1&gt;Hi people&lt;/h1&gt; &lt;p&gt;Welcome to your new Gatsby site.&lt;/p&gt; &lt;p&gt;Now go build something great.&lt;/p&gt; &lt;div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}&gt; &lt;Image /&gt; &lt;/div&gt; &lt;Link to="/page-2/"&gt;Go to page 2&lt;/Link&gt; &lt;Link to="/using-typescript/"&gt;Go to "Using TypeScript"&lt;/Link&gt; &lt;/Layout&gt; ) export default IndexPage </code></pre> </div> <blockquote> <p>Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. … Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen. — <a href="https://reactjs.org/docs/components-and-props.html" rel="noopener noreferrer">React docs</a>.</p> </blockquote> <p><code>components</code> Directory<br> The <code>/src/components/</code> directory is where you find general components for your website. The default starter comes with the following components: Header (<code>header.js</code>), Image (<code>image.js</code>), Layout (<code>layout.js</code>), and SEO (<code>seo.js</code>). You’re free to customize these components and add your own to the same directory.</p> <p><em>Now you’re ready to start making changes to your new site and customize it to your taste.</em></p> <h2> ...But How Do I Customize It? </h2> <p>Let’s have a go at modifying the message displayed on the home page. Open <code>pages/index.js</code> in your code editor and replace the two paragraphs below the <code>&lt;h1&gt;</code> tag with one of the paragraphs. &amp; just hit <em>Save</em>, &amp; you should see it in the browser immediately. Pretty cool right?? </p> <p>Gatsby makes it easy to add new pages. For instance, let’s add an About page by creating a new file, <code>about.js</code>, inside the <code>/pages/</code> directory and enter this content:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>import React from "react" const AboutPage = () =&gt; &lt;h1&gt;About Me&lt;/h1&gt; export default AboutPage </code></pre> </div> <p>You can quickly link to your new About page from the home page using the <strong>Gatsby Link component</strong>. To see how it works, open <code>index.js</code> in your code editor and locate this bit of code just before the <code>&lt;/Layout&gt;</code> closing tag:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="o">&lt;</span><span class="nx">Link</span> <span class="nx">to</span><span class="o">=</span><span class="dl">"</span><span class="s2">/page-2/</span><span class="dl">"</span><span class="o">&gt;</span><span class="nx">Go</span> <span class="nx">to</span> <span class="nx">page</span> <span class="mi">2</span><span class="o">&lt;</span><span class="sr">/Link</span><span class="err">&gt; </span></code></pre> </div> <p>Gatsby uses the <strong>Link component for internal links</strong>. But keep in mind, for external links, you should use the <code>&lt;a&gt;</code> tag, like you would on a regular vanilla HTML website.</p> <h2> Styling!? </h2> <h3> Global Stylesheet </h3> <p>A familiar choice is to use a global <code>.css</code> file which contains rules that apply to the entire website. To get started, add a <code>/styles/</code> directory inside the <code>/src/</code> directory and add a <code>global.css</code> file to it: <code>/src/styles/global.css</code>. You’re free to choose any name you like both for the directory and the style-sheet file. Inside <code>global.css</code>, add the following CSS declaration, which is going to be applied to the entire website:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>body { background-color: slategray; } </code></pre> </div> <p>Then to make it work you need to take an extra step. Open <code>gatsby-browser.js</code> in your code editor and import the stylesheet you’ve just created:<br> <code>import "./src/styles/global.css"<br> </code></p> <h4> Global Styles with a Shared Layout Component </h4> <p>Although adding a global stylesheet and importing it into <code>gatsby-browser.js</code> works just fine, the recommended way of adding global styles to your Gatsby website is by using a <strong>shared layout component</strong>. The Gatsby Default Starter comes with this component and its related style sheet out of the box.</p> <p>To see how it works, let’s delete the above import statement from <code>gatsby-browser.js</code> and save the file. You should see your website’s background revert to white. Then, open <code>layout.js</code> and <code>layout.css</code> in your code editor (you’ll find both files inside the <code>components/</code> directory).</p> <p>At the top of <code>layout.js</code>, notice the <em>import</em> statement, which makes the CSS rules contained in layout.css available to the shared Layout component and therefore to the entire website:</p> <p><code>import "./layout.css"</code></p> <p>In <code>layout.css</code>, locate the CSS declaration for the body element. It should be around line 8. This is what it looks like:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>body { margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: hsla(0, 0%, 0%, 0.8); font-family: georgia, serif; font-weight: normal; word-wrap: break-word; font-kerning: normal; -moz-font-feature-settings: "kern", "liga", "clig", "calt"; -ms-font-feature-settings: "kern", "liga", "clig", "calt"; -webkit-font-feature-settings: "kern", "liga", "clig", "calt"; font-feature-settings: "kern", "liga", "clig", "calt"; } </code></pre> </div> <p>Now add a rule for the background color, something like this:<br> <code>background-color: slategray;</code><br> Save your work, and you should see your website’s background color turn <em>grey</em> once again.</p> <h4> Component-scoped Styles: CSS Modules </h4> <blockquote> <p>A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.</p> </blockquote> <p>With CSS modules, your styles get applied only to a specific component, which helps to keep components self-contained and therefore easy to maintain and reuse.</p> <p>CSS Modules comes bundled with Gatsby out of the box and the docs recommend this way of adding styles to Gatsby components and React components in general.</p> <p>Follow these steps to add a fancy paragraph component to your About page.</p> <h4> Create the Fancy Paragraph Component </h4> <p>Inside the <code>/components/</code> directory of your Gatsby Default Starter-based project, create a file and call it <code>paragraph.js.</code></p> <p>Open <code>paragraph.js</code> in your code editor and enter the following code:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>import React from "react" import paragraphStyles from "./paragraph.module.css" const Paragraph = (props) =&gt; &lt;p className={paragraphStyles.fancy}&gt;{props.paragraphText}&lt;/p&gt; export default Paragraph </code></pre> </div> <p>This is a simple React functional component — nothing new except for the statement that imports the paragraph CSS module, which we haven’t created yet.</p> <p>The component uses the styles contained in the paragraph module as a value inside the <code>className</code> property. As you can see, that value looks very much like a regular JavaScript object that uses <code>.paragraph</code>, which is the name of the class, as the <code>paragraphStyles</code> object’s property. You’ll write the styles for this class in your CSS module.</p> <h4> Create the Paragraph CSS Module </h4> <p>Inside <code>/components/</code>, create another file and call it <code>paragraph.module.css</code>. Open this file and style the <code>.paragraph</code> class any way your fancy takes you. It’s just regular CSS. This is what mine looks like:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>.paragraph { font-size: 1.5rem; text-align: center; line-height: 1.2; padding: 0.5rem; color: #fff; background-color: rebeccapurple; font-weight: 800; font-style: italic; text-transform: uppercase; } </code></pre> </div> <p>Now, you’re ready to use your <code>Paragraph</code> component with your personalized styles anywhere on your Gatsby site.</p> <p>Let’s add this paragraph to your About page.</p> <h4> Add the Fancy Paragraph Component to the About Page </h4> <p>Start by adding these two import statements to your About page, just below the already existing React import:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>import Layout from "../components/layout" import Paragraph from "../components/paragraph" </code></pre> </div> <p>The snippet above makes the Gatsby Layout component, which you’re going to use in your About page, and the Fancy Paragraph component you’ve just created available to your About page.</p> <p>Next, modify your <code>AboutPage</code> functional component to look like this:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>const AboutPage = () =&gt; ( &lt;Layout&gt; &lt;h1&gt;About Me&lt;/h1&gt; &lt;Paragraph paragraphText="Styled with CSS Modules." /&gt; &lt;/Layout&gt; ) </code></pre> </div> <p>Your new component works just like any other React component. Simply slap it on the page, in the exact location you want it to appear, and you’re done. This particular component leverages React props to make the paragraph text more dynamic.</p> <p>Save your work and navigate to the About page, where you should see your fancy paragraph in all its glory.</p> <h4> Component-scoped Styles: Inline Styles </h4> <p>Inline CSS styles in the form of a JS object are an additional styling option that you can use.</p> <p>Your Gatsby Default Starter-based project shows this technique in action. For instance, open <code>index.js</code> in your editor and locate this code inside the <code>IndexPage</code> component:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>&lt;div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}&gt; &lt;Image /&gt; &lt;/div&gt; </code></pre> </div> <p>Notice how CSS styles are applied to the <code>&lt;div&gt;</code> that contains the <code>Image</code> component: styles take the form of a JS object where CSS property names are the keys and CSS values are their corresponding values.</p> <p>Also, notice how compound CSS property names remove the dash (-) symbol and use the camelCase convention instead — for example, <code>marginBottom</code>, not the CSS <code>margin-bottom</code>.</p> <h3> Adding Content to Your Gatsby Site </h3> <p>Building with Gatsby comes with the added benefit of being able to grab data from virtually anywhere. As a consequence, you’re not limited to building static sites, which usually rely on Markdown, and your team can easily manage content using the back end of their choice.</p> <p>A plethora of dedicated plugins enable Gatsby to pull data from multiple sources — for example, the file system, APIs, WordPress, etc. — and combine the data in one data layer that can be fed to your website.</p> <p>For simple websites, it’s also possible to bypass Gatsby’s data layer and populate your site <a href="https://www.gatsbyjs.com/docs/using-gatsby-without-graphql/" rel="noopener noreferrer">without using GraphQL or any of the source plugins</a>. This approach, also known as the <strong><em>unstructured data</em></strong> approach, allows you fetch the data and use it in the <code>createPage</code> action inside the <code>createPages</code> API. Although fetching data from an API is familiar enough to JavaScript developers and therefore could be more attractive than using GraphQL, the downside is that doing away with the Gatsby data layer also means doing away with a lot of the benefits that it provides — such as performance, hot reloading during development, fast image optimization, and much more.</p> <p>Check out <a href="https://github.com/jlengstorf/gatsby-with-unstructured-data" rel="noopener noreferrer">this GitHub repo</a> if you want to know more about the unstructured data approach.</p> <h4> Manually Entering GraphQL Queries into a Gatsby Page </h4> <p>If you have one or two pages with very little content that hardly changes, you can even hard-code the text straight into a Gatsby page, the way we did in the demo above.</p> <p>If you need to pull simple data like the site title and description, you can enter a GraphQL query straight into a page. To do this, it helps to become familiar with <a href="https://www.gatsbyjs.com/docs/running-queries-with-graphiql/" rel="noopener noreferrer">GraphiQL</a>, a GraphQL IDE (integrated development environment) for creating GraphQL queries that you can access on <a href="http://localhost:8000/___graphql" rel="noopener noreferrer">http://localhost:8000/___graphql</a>.</p> <p>Let’s say you want to display your site title on a page. First, make sure the title is already inside <code>gatsby-config.js</code>. Mine looks something like this; you can enter any title you prefer or leave the default one:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>module.exports = { siteMetadata: { title: `SitePoint Demo Gatsby Site`, ... }, ... </code></pre> </div> <p>Next, build the GraphQL query with the help of GraphiQL. Finally, make the following changes to the starter’s page 2 page (<code>src/pages/page-2.js</code>), which should now look like this:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>const SecondPage = ({data}) =&gt; ( &lt;Layout&gt; &lt;SEO title="Page two" /&gt; &lt;h1&gt;Welcome to {data.site.siteMetadata.title}&lt;/h1&gt; &lt;p&gt;I have used a GraphQL query&lt;/p&gt; &lt;Link to="/"&gt;Go back to the homepage&lt;/Link&gt; &lt;/Layout&gt; ) export const query = graphql` query testQuery { site { siteMetadata { title } } } ` export default SecondPage </code></pre> </div> <blockquote> <p>Note that we are passing a data prop to the component, which contains the results of the GraphQL query.</p> </blockquote> <p>Restart your server, and you’ll then be able to see the site title displayed on page 2 (<a href="http://localhost:8000/page-2/" rel="noopener noreferrer">http://localhost:8000/page-2/</a>).</p> <h2> Pulling Data from the File system </h2> <p>You can use the <strong>gatsby-source-filesystem</strong> plugin to source data into your Gatsby application from your local filesystem. This approach might be familiar to people who have worked with such static site generators as Jekyll, or Hugo.</p> <p>Gatsby default starter has this plugin already installed, as you can easily verify by opening <code>gatsby-config.js</code> in your code editor:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>plugins: [ `gatsby-plugin-react-helmet`, { resolve: `gatsby-source-filesystem`, options: { name: `images`, path: `${__dirname}/src/images`, }, }, ... </code></pre> </div> <p>After sourcing the data, you’ll need a transformer plugin to help you turn the file nodes into various data types that you can consume in your site — for example, <code>gatsby-transformer-json</code> for JSON data, <code>gatsby-transformer-remark</code> for Markdown files, and so on.</p> <p>Find all the details in this <a href="https://www.gatsbyjs.com/docs/sourcing-from-the-filesystem/" rel="noopener noreferrer">section of the Gatsby docs</a>.</p> <p>If you opt for <a href="https://www.gatsbyjs.com/docs/adding-markdown-pages/" rel="noopener noreferrer">Markdown files</a> as your data source for your Gatsby site, you’ll have the option of embedding JSX reusable components into the text using <code>gatsby-plugin-mdx</code>, a Gatsby plugin that adds <a href="https://mdxjs.com/" rel="noopener noreferrer">MDX</a> support to your site. Here are the benefits:</p> <blockquote> <p>This is useful in content-driven sites where you want the ability to introduce components like charts or alerts without having to configure a plugin. It emphasizes composition over configuration and really shines with interactive blog posts, documenting design systems, or long form articles with immersive or dynamic interactions. — Gatsby docs.</p> </blockquote> <h4> Headless CMS </h4> <p>CMS stands for content management system. A traditional CMS offers both back-end and front-end functionality. A headless or decoupled CMS confines itself to the back end only, thereby leaving all front-end concerns to the developers’ preferences. This arrangement is ideal for a site generator like Gatsby, since it allows the content team members to still use their favorite admin interface while the developers take full advantage of the benefits of using Gatsby, React, and GraphQL.</p> <p>Popular CMS platforms like WordPress, Drupal, Contentful, Sanity, and many more, offer headless support and the Gatsby ecosystem makes available the appropriate plugins and guides to help you with the integration.</p> <p>Check out this article from the <a href="https://www.gatsbyjs.com/docs/headless-cms/" rel="noopener noreferrer">Gatsby docs</a> to learn more about pulling data from your CMS of choice.</p> <h2> Deploying Your Gatsby Site </h2> <p>There are companies that make it super quick and convenient to host static websites. Among the most popular are:</p> <ul> <li>Netlify</li> <li>Amazon S3</li> <li>GitHub Pages</li> <li>Firebase Hosting</li> </ul> <h4> Deploying Your Gatsby Website to Netlify </h4> <p>Let’s use Netlify to launch your brand new Gatsby website. Netlify provides “an all-in-one workflow that combines global deployment, continuous integration, and automatic HTTPS.”</p> <p>It works great for hosting static websites.</p> <p>First, you need to create a production build of your Gatsby project. To do so, enter the following command in your terminal:<br> <code>gatsby build</code><br> Now you have a folder named <code>public</code> containing all the static files your website needs to run in the browser.</p> <p>The next step consists of getting your Gatsby project into a repository like GitHub. Netlify supports GitHub, GitLab, or Bitbucket: each time you push changes to your code, Netlify runs a build with your chosen tool and deploys the results to its fast-loading CDN.</p> <p>To get started, just log in to Netlify, select New site from Git, choose your repository, enter your build command and the name of your public folder, then click Deploy site.</p> <p>You can review the deployment process in detail in this article on the <a href="https://www.gatsbyjs.com/docs/deploying-to-netlify/" rel="noopener noreferrer">Gatsby docs</a> website.</p> <h5> Congratulations, your Gatsby website is live! 🥳 </h5> <h3> A Bit More on the Build Process </h3> <p>Running the build command before deployment creates a production version of your Gatsby-powered website with all the required optimizations needed for high performance and a great user experience. The static HTML pages that Gatsby creates during this process, in turn, get <a href="https://www.gatsbyjs.com/docs/glossary#hydration" rel="noopener noreferrer">rehydrated</a> into a React application. This means that, as Gatsby pages run into a web browser, JavaScript code is downloaded, thereby enabling DOM manipulation etc. In other words, your site becomes a full-blown React app.</p> <p>You can read the details on the <a href="https://www.gatsbyjs.com/docs/overview-of-the-gatsby-build-process/" rel="noopener noreferrer">Gatsby docs</a>.</p> gatsby beginners webdev javascript Lindsey Howard Wed, 12 Jan 2022 00:22:49 +0000 https://dev.to/codelikeagirl29/coding-resources-76a https://dev.to/codelikeagirl29/coding-resources-76a <p>I am going to list some of my favorite resources and bookmarks. You know, I don't see enough of these out there!</p> <p>•⚬𓈒🎮🛸🫲👾🫱🛸🎮𓈒⚬•</p> <p><a href="https://www.freecodecamp.org/news/learn-react-js-in-this-free-7-hour-course/" rel="noopener noreferrer">Learn Reactjs</a><br> <a href="https://github.com/shovanch/fullstack-web-developer-path" rel="noopener noreferrer">Fullstack Dev Path</a></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Freplit.com%2F%40Misslindsey91%2Fcoding-resources-unfinished%23devlindsey.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%2Freplit.com%2F%40Misslindsey91%2Fcoding-resources-unfinished%23devlindsey.png" width="800" height="400"></a></p> <h2> <a href="https://lindseyk.dev" rel="noopener noreferrer">My portfolio</a> </h2> <p>============================================================</p> <h2> Course Platforms </h2> <p><a href="https://www.udacity.com/" rel="noopener noreferrer"><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%2F454rr3s3ktrzt2po9xfm.png" alt="Udacity" width="800" height="132"></a><br> <a href="https://www.codecademy.com" rel="noopener noreferrer"><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%2Fky6l6zrtgi634vpybg47.png" alt="codecademy" width="800" height="145"></a><br> <a href="http://referrals.trhou.se/lindseykdeveloper" rel="noopener noreferrer"><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%2F4l4tn8owrbkp35ei2eit.png" alt="TeamTreehouse" width="565" height="176"></a><br> <a href="https://www.freecodecamp.org/" rel="noopener noreferrer"><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%2F23euaiobg6i1el206ehm.jpg" alt="freeCodeCamp" width="800" height="200"></a></p> <h2> Specific Tutorials </h2> <p><a href="https://www.enterprisedb.com/postgres-tutorials/how-quickly-build-api-using-nodejs-postgresql" rel="noopener noreferrer">Build an API with PostgreSQL &amp; Node</a><br> <a href="https://frontendmasters.com/books/front-end-handbook/2019/" rel="noopener noreferrer">Frontend Masters</a><br> <a href="https://free-for.dev/#/?id=apis-data-and-ml" rel="noopener noreferrer">Free for Developers</a><br> <a href="https://bezkoder.com/category/full-stack/" rel="noopener noreferrer">Bezkoder</a><br> <a href="https://codingthesmartway.com/courses/" rel="noopener noreferrer">Coding the Smart Way</a></p> <p>============================================================</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fres.cloudinary.com%2Fcodelikeagirl29%2Fimage%2Fupload%2Fv1679856298%2Fdan-cristian-padure-noOXRT9gfQ8-unsplash_f5ukdz.jpg" 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%2Fres.cloudinary.com%2Fcodelikeagirl29%2Fimage%2Fupload%2Fv1679856298%2Fdan-cristian-padure-noOXRT9gfQ8-unsplash_f5ukdz.jpg" alt="toolbox image" width="800" height="596"></a></p> <h2> Favorite Bookmarks </h2> <p><a href="https://exercism.org/" rel="noopener noreferrer">Exercism</a><br> <a href="https://readme.so/" rel="noopener noreferrer">Readme Generator</a><br> <a href="https://fullstackopen.com/" rel="noopener noreferrer">Fullstack open</a><br> <a href="https://dev.to/envoy_/150-badges-for-github-pnk?signin=true">150 Markdown Badges</a><br> <a href="https://www.codesnail.com/18-github-repos-to-learn-javascript/" rel="noopener noreferrer">GH for JS Tutorials</a><br> <a href="https://paperform.co/blog/web-development-tools" rel="noopener noreferrer">Web Dev Tools</a><br> <a href="https://www.codementor.io/@npostolovski/40-side-project-ideas-for-software-engineers-g8xckyxef" rel="noopener noreferrer">Side Project Ideas</a><br> <a href="https://www.freecodecamp.org/news/an-intro-to-webpack-what-it-is-and-how-to-use-it-8304ecdc3c60/" rel="noopener noreferrer">Webpack Intro</a><br> <a href="https://beginnerjavascript.com/" rel="noopener noreferrer">Beginner JS</a><br> <a href="https://www.makeuseof.com/tag/6-websites-to-track-a-websites-traffic/" rel="noopener noreferrer">Tracking Your Traffic</a><br> <a href="https://webcode.tools/generators/css" rel="noopener noreferrer">CSS Generators</a><br> <a href="https://flaviocopes.com/css-media-queries/" rel="noopener noreferrer">CSS Media Queries</a></p> <blockquote> <p>This guys site is definitely one of my favorites!</p> </blockquote> <p>I will be periodically editing this list and adding to it!</p> resources programming webdev beginners Lindsey Howard Thu, 07 Oct 2021 00:28:41 +0000 https://dev.to/codelikeagirl29/learning-react-122h https://dev.to/codelikeagirl29/learning-react-122h <blockquote> <p>This is my collection of articles, courses &amp; bookmarks that has helped me learn React.</p> </blockquote> <center><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.jsdelivr.net%2Fgh%2Fdevicons%2Fdevicon%2Ficons%2Freact%2Freact-original.svg" width="128" height="128"></center> <h2> Tutorials </h2> <ul> <li> <a href="https://devhints.io/react" rel="noopener noreferrer">React cheatsheet</a> | Devhints</li> <li> <a href="https://framer.com/projects/ueO1z37e9HDREv3PjSDT-irm1E?node=K9imBRZ5a-page" rel="noopener noreferrer">Framer - for react</a> | Framer</li> <li> <a href="https://teamtreehouse.com/tracks/learn-react" rel="noopener noreferrer">Learn React Track</a> | Team Treehouse</li> <li> <a href="https://www.freecodecamp.org/news/learn-react-js-in-this-free-7-hour-course/" rel="noopener noreferrer">Learn React JS in This Free 7-Hour Course</a> | freeCodeCamp</li> <li> <a href="https://codingthesmartway.com/courses/" rel="noopener noreferrer">Online Courses - Angular, React, Vue.js, Ionic, Node.js, JavaScript</a> | Udemy</li> <li> <a href="https://ibaslogic.com/react-tutorial-for-beginners/" rel="noopener noreferrer">React Tutorial From Scratch</a> | ibaslogic</li> <li> <a href="https://reactresources.com/topics/rest-apis" rel="noopener noreferrer">Using REST APIs With React</a> | React Resources</li> <li> <a href="https://www.udemy.com/course/the-complete-react-developer-course-whooks-context-api/" rel="noopener noreferrer">The Complete React Developer Course</a> | Udemy</li> <li> <a href="https://app.pluralsight.com/course-player?clipId=ffdbad48-3929-40e5-b373-8709559e6568" rel="noopener noreferrer">React 18 Fundamentals</a> | Pluralsight</li> <li> <a href="https://codewithmosh.com/p/mastering-react" rel="noopener noreferrer">Mastering React</a> | Code with Mosh</li> <li><a href="https://handsonreact.com/" rel="noopener noreferrer">Hands on React</a></li> <li> <a href="https://www.cdata.com/kb/tech/mongodb-connect-react.rst" rel="noopener noreferrer">Building Dynamic React Apps with MongoDB Data</a> | cdata</li> </ul> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1633356122102-3fe601e05bd2%3Fixlib%3Drb-4.0.3%26ixid%3DMnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8%26auto%3Dformat%26fit%3Dcrop%26w%3D1470%26q%3D80" 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%2Fimages.unsplash.com%2Fphoto-1633356122102-3fe601e05bd2%3Fixlib%3Drb-4.0.3%26ixid%3DMnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8%26auto%3Dformat%26fit%3Dcrop%26w%3D1470%26q%3D80" alt="pc-screen" width="800" height="533"></a></p> <h2> Projects &amp; Examples </h2> <ul> <li> <a href="https://freefrontend.com/react-code-examples/" rel="noopener noreferrer">React Code Examples</a> | Free Frontend</li> <li> <a href="https://reactjsexample.com/" rel="noopener noreferrer">React Examples</a> | Reactjs Example</li> <li> <a href="https://www.techiediaries.com/react/react-router-5-4-tutorial-examples/" rel="noopener noreferrer">React Router 6 tutorial with examples</a> | Techiediaries</li> <li> <a href="https://javascript.plainenglish.io/how-to-convert-any-web-page-to-reactjs-9740f1ba15db" rel="noopener noreferrer">How to convert any web page into a React web page</a> | Javascript in Plain English</li> <li> <a href="https://medium.com/how-to-react/setup-mern-mongodb-express-js-react-js-and-node-js-environment-and-create-your-first-mern-7774df0fff19" rel="noopener noreferrer">Setup MERN (MongoDB, Express JS, React JS, and Node JS)</a> | by React Developer | How To React | Medium</li> <li> <a href="https://dev.to/saviomartin/set-up-tailwind-in-react-the-fastest-way-2a4d">Set Up Tailwind In React 🚀</a> | DEV Community</li> </ul> <p>Thats all for now. I'll keep adding as I go. </p> react beginners codenewbie