<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Sreedeep</title>
    <description>The latest articles on Forem by Sreedeep (@rogueloop).</description>
    <link>https://forem.com/rogueloop</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F801786%2F9a88b02f-8b19-4c6a-9fba-021e02200d72.png</url>
      <title>Forem: Sreedeep</title>
      <link>https://forem.com/rogueloop</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/rogueloop"/>
    <language>en</language>
    <item>
      <title>I Surveyed the Top 10 Backend Frameworks Here's What I Found</title>
      <dc:creator>Sreedeep</dc:creator>
      <pubDate>Sun, 12 Jan 2025 20:27:10 +0000</pubDate>
      <link>https://forem.com/rogueloop/i-surveyed-the-top-10-backend-frameworks-heres-what-i-found-3mcj</link>
      <guid>https://forem.com/rogueloop/i-surveyed-the-top-10-backend-frameworks-heres-what-i-found-3mcj</guid>
      <description>&lt;p&gt;While creating a new project one of the main things that clouds your mind is what framework you are going to use. Every framework has its own drawbacks and advantages we will be measuring these in this article. &lt;/p&gt;

&lt;p&gt;The project I'm working on is called &lt;a href="https://hexmos.com/liveapi/" rel="noopener noreferrer"&gt;LiveAPI&lt;/a&gt;, which is a super convenient way to generate API documentation on a large scale. We are working to enable all web backend frameworks in LiveAPI for the creation of API documentation. We need to understand how  frameworks are implemented, how routes are managed, what files are involved, dependencies, etc., in order to build this feature. &lt;/p&gt;

&lt;p&gt;I will try to explain all the things I learned on the way into this small comparison article. This article will help you choose a framework for your SaaS projects or learn a few new things from unknown frameworks you have never used.&lt;/p&gt;

&lt;p&gt;Let's break down the frameworks based on their use cases. First, let's look into the popular ones. These frameworks have strong community support and scalability.&lt;/p&gt;

&lt;h2&gt;
  
  
  Most Popular General Frameworks for Novices and Experts
&lt;/h2&gt;

&lt;p&gt;The framework should handle many backend tasks like routing, authentication, database integrations, templating, etc. There are only a few such frameworks: &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Django: Python framework &lt;/li&gt;
&lt;li&gt;Spring Boot: Java framework&lt;/li&gt;
&lt;li&gt;Ruby on Rails: Ruby programming&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;These frameworks are best for CRUD apps, SaaS Projects, and Restful APIs. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Django&lt;/strong&gt; backend mainly comprises URLs, Views, and models. You need to have a good understanding of each of these to build good Django systems. URLs are used to design API routes. Views are used for API logic. And Models are for database integrations and creating migrations.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Instagram&lt;/strong&gt;: Handles billions of user requests daily, showcasing Django's scalability. More on this &lt;a href="https://news.ycombinator.com/item?id=37510560" rel="noopener noreferrer"&gt;HN thread&lt;/a&gt;.&lt;br&gt;
&lt;strong&gt;Pinterest&lt;/strong&gt;: Django is used for its rapid development and easy database integration.&lt;/p&gt;

&lt;p&gt;Django is actively maintained and has great &lt;a href="https://www.djangoproject.com/start/" rel="noopener noreferrer"&gt;documentation&lt;/a&gt; along with a tutorial on how to get started.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Spring Boot&lt;/strong&gt; simplifies Java backend development by providing a pre-configured setup. It's based on Controllers, Services, and Repositories. Controllers handle HTTP requests and routes. Services control the business logic flows. Repositories handle database operations. Check out the official spring documentation at &lt;a href="https://spring.io/" rel="noopener noreferrer"&gt;spring.io&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Netflix&lt;/strong&gt;: Manages its microservices architecture using Spring Boot's scalability and reliability. More on this &lt;a href="https://news.ycombinator.com/item?id=33788580" rel="noopener noreferrer"&gt;Hackernews Discussion&lt;/a&gt;&lt;br&gt;
&lt;strong&gt;Amazon Web Services (AWS)&lt;/strong&gt;: Uses Spring Boot for several internal services due to its flexibility and performance.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Ruby on Rails&lt;/strong&gt; is called a convention-over-configuration framework . It emphasizes simplicity and readability mainly. It structures the backend around Models, Views, and Controllers (MVC), promoting DRY (Don't Repeat Yourself) principles. With features like scaffolding and built-in ORM (ActiveRecord), Rails makes it easy to develop database-driven applications quickly.  Scaffolding means generating the code for a model, controller, views, routes, and even database migrations based on a single command. &lt;/p&gt;

&lt;p&gt;Yes, Rails is awesomely fast to prototype in, and also excellent to build a long-term sustainable business.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;GitHub&lt;/strong&gt;: The world's largest code repository was initially built with Rails for its fast prototyping capabilities.&lt;br&gt;
&lt;strong&gt;Shopify&lt;/strong&gt;: Handles millions of online stores using Rails' robust database handling and templating features.&lt;/p&gt;

&lt;p&gt;There are small frameworks ideal for APIs with flexibility and performance in mind. Let's look into some of them.&lt;/p&gt;

&lt;h2&gt;
  
  
  Microservice-Oriented Frameworks
&lt;/h2&gt;

&lt;p&gt;These are lightweight frameworks designed to create salable microservices. Microservices are software composed of small independent services that communicate over well-defined APIs. These services are owned by small, self-contained teams.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Flask (Python)&lt;/li&gt;
&lt;li&gt;Express.js (Node.js)&lt;/li&gt;
&lt;li&gt;FastAPI (Python)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Flask&lt;/strong&gt; uses a lightweight design, and offers the flexibility to add extensions, making it a popular choice for small-scale microservices or APIs. Airbnb uses Flask for lightweight services that support its larger infrastructure.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Express.js&lt;/strong&gt; is a minimal and fast Node.js framework for backend development. It’s highly extensible and often used in combination with other Node.js tools to build robust microservices. Its asynchronous architecture and middleware system are ideal for handling concurrent requests in a microservice.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Uber, PayPal&lt;/strong&gt; uses Express.js for parts of its real-time dispatch systems.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;FastAPI&lt;/strong&gt; is a modern Python framework known for its performance and simplicity. It is based on standard Python-type hints. Using them, you get automatic data validation, serialization, and documentation. Including deeply nested JSON documents. And you get editor completion and checks everywhere. Designed around the OpenAPI (Swagger) and JSON Schema standards.&lt;/p&gt;

&lt;p&gt;It includes 2 alternative interactive API documentation systems that are generated automatically. It's OAuth2 capable from the start (including JWT). Has a Dependency Injection system, compatible with all databases (relational and NoSQL), Websockets, GraphQL, CORS, etc.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Microsoft&lt;/strong&gt; uses FastAPI for some internal machine learning services due to its speed and support for async requests.&lt;/p&gt;

&lt;p&gt;Next, there are frameworks tailored for large-scale production with a focus on security, performance, and enterprise-level integrations.&lt;/p&gt;

&lt;h2&gt;
  
  
  Enterprise-Grade Frameworks
&lt;/h2&gt;

&lt;p&gt;Here are some dependable enterprise ranges, designed for large-scale production frameworks. If you joined an MNC company then you are likely to work on some of these frameworks. Security is a major player in these scenarios. Data breaches can cost millions to the company. &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Spring Boot (Java)&lt;/li&gt;
&lt;li&gt;ASP.NET Core (C#)&lt;/li&gt;
&lt;li&gt;NestJS (Node.js)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;ASP.NET&lt;/strong&gt; Core is a modern, cross-platform framework from Microsoft designed for building web applications, APIs, and cloud-based systems. &lt;/p&gt;

&lt;p&gt;Its performance and reliability make it a great choice for enterprise-grade systems. The framework supports dependency injection and has excellent integration with Azure for cloud solutions. It excels in performance and integration with Microsoft tools. &lt;/p&gt;

&lt;p&gt;Dependency Injection in ASP.NET provides required objects (dependencies) to a class automatically, making the code simpler, modular, and easier to test.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Stack Overflow and Microsoft Teams&lt;/strong&gt; Uses ASP.NET Core for its high-performance backend to serve millions of users.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;NestJS&lt;/strong&gt; is a progressive framework for Node.js that incorporates TypeScript for building efficient, reliable, and scalable server-side applications. Inspired by Angular’s architecture, NestJS uses decorators and modules to simplify development. Its support for microservices and GraphQL makes it a go-to choice for enterprise solutions in the JavaScript ecosystem.NestJS is ideal for teams familiar with JavaScript/TypeScript and building modern APIs.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Adidas and Capgemini&lt;/strong&gt;: Uses NestJS for creating scalable and efficient backend services and for developing robust APIs in enterprise projects&lt;/p&gt;

&lt;p&gt;Now, let's do a comparison of frameworks based on performance, usability, community support, flexibility, and security to guide you to take informed decisions.&lt;/p&gt;

&lt;h2&gt;
  
  
  Evaluation Criteria And Benchmarks
&lt;/h2&gt;

&lt;p&gt;Here is a tabular representation of the different criteria used to differentiate these frameworks. We did not look into the popularity of the frameworks, since it is relative to the type of people using these.&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Framework&lt;/th&gt;
&lt;th&gt;Performance&lt;/th&gt;
&lt;th&gt;Ease of Use&lt;/th&gt;
&lt;th&gt;Community Support&lt;/th&gt;
&lt;th&gt;Flexibility&lt;/th&gt;
&lt;th&gt;Security Features&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Django&lt;/td&gt;
&lt;td&gt;High scalability but slightly slower for real-time apps&lt;/td&gt;
&lt;td&gt;Moderate learning curve with strong documentation&lt;/td&gt;
&lt;td&gt;Large and active community with many libraries&lt;/td&gt;
&lt;td&gt;Highly flexible; supports plugins and third-party libraries&lt;/td&gt;
&lt;td&gt;Comprehensive security features out-of-the-box&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Spring Boot&lt;/td&gt;
&lt;td&gt;Excellent for high-performance enterprise apps&lt;/td&gt;
&lt;td&gt;Challenging for beginners; excellent for experienced Java developers&lt;/td&gt;
&lt;td&gt;Extensive support in the enterprise Java ecosystem&lt;/td&gt;
&lt;td&gt;Very flexible; integrates well with various tools and databases&lt;/td&gt;
&lt;td&gt;Robust security with enterprise-grade solutions&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Ruby on Rails&lt;/td&gt;
&lt;td&gt;Good for CRUD apps; less suited for high concurrency&lt;/td&gt;
&lt;td&gt;Beginner-friendly with conventions over configuration&lt;/td&gt;
&lt;td&gt;Strong community with many open-source gems&lt;/td&gt;
&lt;td&gt;Moderately flexible; relies on conventions for simplicity&lt;/td&gt;
&lt;td&gt;Good security features but requires developer awareness&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Flask&lt;/td&gt;
&lt;td&gt;Lightweight, great for small services but not ideal for large-scale apps&lt;/td&gt;
&lt;td&gt;Very easy for small projects; limited features&lt;/td&gt;
&lt;td&gt;Active but smaller community compared to Django&lt;/td&gt;
&lt;td&gt;Highly flexible; requires manual integration for features&lt;/td&gt;
&lt;td&gt;Basic security features; requires extensions for advanced needs&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Express.js&lt;/td&gt;
&lt;td&gt;Handles high concurrency well; ideal for real-time apps&lt;/td&gt;
&lt;td&gt;Easy to learn and widely used; minimal configuration needed&lt;/td&gt;
&lt;td&gt;Very large community with extensive Node.js ecosystem&lt;/td&gt;
&lt;td&gt;Extremely flexible; middleware system allows customization&lt;/td&gt;
&lt;td&gt;Basic security features; relies on middleware for customization&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;FastAPI&lt;/td&gt;
&lt;td&gt;Fast due to async support; great for APIs and microservices&lt;/td&gt;
&lt;td&gt;Beginner-friendly with type hints and strong documentation&lt;/td&gt;
&lt;td&gt;Growing community; very active in the Python space&lt;/td&gt;
&lt;td&gt;Flexible with async support and integrations&lt;/td&gt;
&lt;td&gt;Strong security features with type-safety advantages&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;ASP.NET Core&lt;/td&gt;
&lt;td&gt;High-performance framework with native multithreading&lt;/td&gt;
&lt;td&gt;Moderate learning curve; great tooling for .NET developers&lt;/td&gt;
&lt;td&gt;Strong support from Microsoft and .NET developers&lt;/td&gt;
&lt;td&gt;Highly flexible; strong integration with Azure and third-party tools&lt;/td&gt;
&lt;td&gt;Built-in security for authentication and authorization&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;NestJS&lt;/td&gt;
&lt;td&gt;Good performance with support for modern async workflows&lt;/td&gt;
&lt;td&gt;Moderate learning curve; easier for those familiar with Angular&lt;/td&gt;
&lt;td&gt;Fast-growing community with active contributions&lt;/td&gt;
&lt;td&gt;Moderately flexible; modular design supports modern workflows&lt;/td&gt;
&lt;td&gt;Good security with decorators and modules for sensitive data&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;I hope this article helped you to learn about frameworks and their advantages. Thanks for the read. If you need API documentation for any of these frameworks feel free to try out &lt;a href="https://hexmos.com/liveapi/" rel="noopener noreferrer"&gt;LiveAPI&lt;/a&gt;, we would like to hear your experiences.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>java</category>
      <category>python</category>
    </item>
    <item>
      <title>How to make money contributing to Open-Source</title>
      <dc:creator>Sreedeep</dc:creator>
      <pubDate>Tue, 31 Dec 2024 19:16:26 +0000</pubDate>
      <link>https://forem.com/rogueloop/how-to-make-money-contributing-to-open-source-380p</link>
      <guid>https://forem.com/rogueloop/how-to-make-money-contributing-to-open-source-380p</guid>
      <description>&lt;p&gt;A great new year to all the readers 🎉. In this article I will explain on how to make money contributing to opensource repos. Many companies have funds to maintain opensource repos. If you are need of some extra exposure to the field, learn more programming by making impact on big project you are at the right place. &lt;/p&gt;

&lt;p&gt;There is a community called &lt;a href="https://console.algora.io/" rel="noopener noreferrer"&gt;Algora.io&lt;/a&gt;. Here you can see a list of projects with their bounty listings. &lt;/p&gt;

&lt;p&gt;&lt;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%2Fti6qrmejw7sgt88gftv0.png" class="article-body-image-wrapper"&gt;&lt;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%2Fti6qrmejw7sgt88gftv0.png" alt="Image description" width="800" height="457"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Filter by programming language or your interested niche. There are 100+ projects and a lot of issues. They also have an active Discord channel. You can select the issues you want to work for from github. First, add a comment on the issue informing them that you are working on it. &lt;/p&gt;

&lt;p&gt;If you are new to contributions to opensource project I got you covered. First create a fork. Make your changes that will fix the issue or implement a new feature based on the issue you took. Next create an PR (Pull request) with appropriate information on the changes, a video describing the change is better. Some projects have some contribution guidelines For example: signing every commit etc. Then you are good to go. &lt;/p&gt;

&lt;p&gt;The payment is through Stripe, you just need to connect your account with Stripe and get payouts.&lt;/p&gt;

&lt;p&gt;You can do a global search for bounties in the GitHub search to find similar opportunities but be vigilant, I didn't try any of those, many pay in crypto.&lt;/p&gt;

&lt;p&gt;Happy hacking everyone ~ 🥳&lt;/p&gt;

</description>
      <category>freelance</category>
      <category>developer</category>
      <category>income</category>
      <category>webdev</category>
    </item>
    <item>
      <title>How to Start Solving Problems, Build Solutions, and Validate Your Idea Without Spending a Dollar</title>
      <dc:creator>Sreedeep</dc:creator>
      <pubDate>Sun, 29 Dec 2024 18:53:26 +0000</pubDate>
      <link>https://forem.com/rogueloop/how-to-start-solving-problems-build-solutions-and-validate-your-idea-without-spending-a-dollar-37hm</link>
      <guid>https://forem.com/rogueloop/how-to-start-solving-problems-build-solutions-and-validate-your-idea-without-spending-a-dollar-37hm</guid>
      <description>&lt;p&gt;Starting something new can be both exciting and daunting. Whether it's launching a business, building a product, or offering a service, the key lies in solving real world problems people face. Let’s break this down into actionable steps and address two common fears that hold people back.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 1: Find a Problem You Can Solve
&lt;/h2&gt;

&lt;p&gt;Every great idea starts with a problem. Look around—what are people complaining about? What’s something you or your friends struggle with? These are golden opportunities.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Do parents often stress about meal prep for their kids?&lt;/li&gt;
&lt;li&gt;Are freelancers overwhelmed by managing their invoices?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Make a list of problems people frequently mention. The simpler the problem, the better! Don’t overthink this step; the goal is to identify something solvable.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 2: Craft an Irresistible Solution And Do Your Research!
&lt;/h2&gt;

&lt;p&gt;Once you’ve identified the problem, it’s time to dream up a solution. Your solution doesn’t have to be perfect; it just has to make the problem less painful.&lt;/p&gt;

&lt;p&gt;Now, do some research. Check out forums, social media groups, or Reddit threads where people discuss this issue. How are they solving it now? What are their frustrations with existing solutions?&lt;/p&gt;

&lt;p&gt;Armed with this knowledge, refine your idea to offer something unique. &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A meal-prep guide tailored to picky eaters.&lt;/li&gt;
&lt;li&gt;A simple invoicing tool with reminders for freelancers.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Step 3: Validate Without Spending Money
&lt;/h2&gt;

&lt;p&gt;Before you invest time or money, test your idea. The easiest way? Talk to people! Share your solution with potential customers and see how they respond. Social media polls, free prototypes, or casual conversations work wonders.&lt;/p&gt;

&lt;p&gt;Example:&lt;br&gt;
Create a free PDF or simple tool and share it with your network.&lt;br&gt;
Ask, “Would you pay for this?” and see their reactions.&lt;/p&gt;

&lt;p&gt;You’re not aiming for perfection—just proof that people care enough to take action.&lt;/p&gt;

&lt;h2&gt;
  
  
  Overcoming the Two Big Fears
&lt;/h2&gt;

&lt;p&gt;Fear 1: The Fear of Starting&lt;/p&gt;

&lt;p&gt;Starting anything new is scary. What if it fails? What if people laugh? These thoughts can paralyze you. The solution is to start small.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Spend an hour researching the problem.&lt;/li&gt;
&lt;li&gt;Talk to three people about your idea.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Small wins build momentum. Repeat these experiments consistently, and you’ll gain confidence over time.&lt;/p&gt;

&lt;p&gt;Fear 2: The Fear of Asking&lt;/p&gt;

&lt;p&gt;Many of us dread asking for feedback or pitching our ideas because we fear rejection. “What if they say no?” But here’s a reframe: rejection is a gift. It’s free feedback that sharpens your idea.&lt;/p&gt;

&lt;p&gt;Treat rejection as desirable. If someone says, “This isn’t for me,” ask why. Their answer could help you improve or pivot.&lt;/p&gt;

&lt;h3&gt;
  
  
  Conclusion
&lt;/h3&gt;

&lt;p&gt;Starting something new doesn’t have to be overwhelming or expensive. Focus on finding a problem, crafting a solution, and testing it quickly. Don’t let fear of starting or fear of asking hold you back. Remember, small steps lead to big results, and every rejection gets you closer to success.&lt;/p&gt;

&lt;p&gt;Hi , my name is Sreedeep CV , these insights are from the book Million Dollar Weekend, I am also working on my small but impactful product called &lt;a href="https://hexmos.com/liveapi/" rel="noopener noreferrer"&gt;LiveAPI&lt;/a&gt; which is for automatic API docs generation in scale, do check this out.&lt;/p&gt;

</description>
      <category>startup</category>
      <category>career</category>
      <category>webdev</category>
      <category>developer</category>
    </item>
    <item>
      <title>5 CSS Tricks That Will Save You a Lot of Time</title>
      <dc:creator>Sreedeep</dc:creator>
      <pubDate>Sat, 28 Dec 2024 19:32:23 +0000</pubDate>
      <link>https://forem.com/rogueloop/5-css-tricks-that-will-save-you-a-lot-of-time-2523</link>
      <guid>https://forem.com/rogueloop/5-css-tricks-that-will-save-you-a-lot-of-time-2523</guid>
      <description>&lt;p&gt;Working with CSS is always a nightmare for back-end developers. Here lets conspire against those front end dev's and lean some CSS tricks that even frontend developers miss.&lt;/p&gt;

&lt;h4&gt;
  
  
  1. Centering Trick in Flexbox
&lt;/h4&gt;

&lt;p&gt;Let's start with the famous centering divs problem. Here we will make use of a flexbox. No need to set absolute positioning or work with margins, do this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;  .flex-center-demo {
    display: flex;
    justify-content: center;
    align-items: center;
  }

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;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%2Ft9miry196y441eaq953r.png" class="article-body-image-wrapper"&gt;&lt;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%2Ft9miry196y441eaq953r.png" alt="Image description" width="679" height="344"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  2. Quick Grid Auto-Placement
&lt;/h4&gt;

&lt;p&gt;You will need this if you are designing navbars or dashboard. If you have some collection of items and you need to place them together then use this.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;
.auto-grid-demo {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 1rem;
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;It Automatically fills rows with boxes at a minimum width of 120px.&lt;/p&gt;

&lt;p&gt;&lt;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%2Fydcop926z7tp6bsbn0tm.png" class="article-body-image-wrapper"&gt;&lt;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%2Fydcop926z7tp6bsbn0tm.png" alt="Image description" width="800" height="221"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  3. Adjacent Sibling Selector
&lt;/h4&gt;

&lt;p&gt;This is useful when you have adjacent elements, elements that come after a heading for example author's name below the heading.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;h2 + p {
    font-style: italic;
    color: blue;
  }
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here is an image:&lt;/p&gt;

&lt;p&gt;&lt;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%2F9uereatbzxz1rt8twud7.png" class="article-body-image-wrapper"&gt;&lt;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%2F9uereatbzxz1rt8twud7.png" alt="Image description" width="680" height="405"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  4. Make Use of Pseudo-Class not()
&lt;/h4&gt;

&lt;p&gt;When you are designing some element and once element you need to design differently for instance then use this. Here is an example of collection of boxes , apply the CSS except for the third one which belong to &lt;code&gt;special&lt;/code&gt; class.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.box:not(.special) {
    background-color: #3498db;
    color: #fff;
    margin: 0.5rem;
    padding: 1rem;
    border-radius: 4px;
  }
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;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%2F5xg7vjo78b2gat53hglf.png" class="article-body-image-wrapper"&gt;&lt;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%2F5xg7vjo78b2gat53hglf.png" alt="Image description" width="800" height="334"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  5. Nail CSS animation like a pro
&lt;/h4&gt;

&lt;p&gt;Getting CSS animations right around first time is a bit problamaic use these key-frame  to simplify complex animations into a single rule that’s easy to adjust or reuse.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fade-in-demo {
  animation: fadeIn 3s forwards;
  background-color: #e67e22;
  color: #fff;
  padding: 1rem;
  text-align: center;
  border-radius: 4px;
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;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%2Fg8h4s86te4e4r2mcm8a0.gif" class="article-body-image-wrapper"&gt;&lt;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%2Fg8h4s86te4e4r2mcm8a0.gif" alt="Image description" width="800" height="300"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Bonus tip!
&lt;/h4&gt;

&lt;p&gt;Here is some extra CSS debugging trick that I always use. If you think you messed up the CSS and have no idea whats wrong, try to get this boxes around every element you have. This was very useful in debugging CSS for me.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;/* Debug: Outline every element with a red border */
* {
  outline: 1px solid red !important;
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;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%2Fmnwdbhgfrli51ycwz1mj.png" class="article-body-image-wrapper"&gt;&lt;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%2Fmnwdbhgfrli51ycwz1mj.png" alt="Image description" width="800" height="355"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I hope you find this article useful. My name is Sreedeep and I am working on a tool called &lt;a href="https://hexmos.com/liveapi" rel="noopener noreferrer"&gt;LiveAPI&lt;/a&gt; - Helping people generate API docs efficiently with AI.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>css</category>
      <category>development</category>
      <category>html</category>
    </item>
    <item>
      <title>GoLang beyond basics : Escape analysis</title>
      <dc:creator>Sreedeep</dc:creator>
      <pubDate>Thu, 26 Dec 2024 10:28:44 +0000</pubDate>
      <link>https://forem.com/rogueloop/golang-beyond-basics-escape-analysis-hc1</link>
      <guid>https://forem.com/rogueloop/golang-beyond-basics-escape-analysis-hc1</guid>
      <description>&lt;p&gt;Lets understand how Golang handles variables and what this Escape Analysis is. Golang have 2 types of memory allocation datatypes used in go runtime environment called stack and heap. &lt;/p&gt;

&lt;p&gt;The stack is faster for doing operations on(in and out). Variables inside a function that are accessed within it go to this stack.  Eg:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;package main

import "fmt"

func stackExample() int {
    a := 10        // Variable `a` is allocated on the stack
    b := 20        // Variable `b` is allocated on the stack
    result := a + b // `result` is also allocated on the stack
    return result   // All stack variables are popped off when the function exits
}

func main() {
    result := stackExample() // Function call happens, variables are pushed to the stack
    fmt.Println(result)      // Print the result
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This is how the stack works in GoLang. Next is a heap. It's a dynamic memory ie, its size can be adjusted based on the requirements. Here is a simple example of heap allocation.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;package main

import "fmt"

func heapExample() *int {
    num := 42           // Variable `num` is created inside the function
    return &amp;amp;num         // Returning the address of `num`, which escapes the function
}

func main() {
    ptr := heapExample() // The value pointed to by `ptr` is allocated on the heap
    fmt.Println(*ptr)    // Accessing the heap-allocated variable through the pointer
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here since the function returns a pointer to &lt;code&gt;num&lt;/code&gt;, the Go runtime detects that &lt;code&gt;num&lt;/code&gt; will be accessed outside of the function's scope. As a result, it allocates &lt;code&gt;num&lt;/code&gt; on the heap instead of the stack.&lt;/p&gt;

&lt;p&gt;A Heap is used to store variables that are beyond the scope of a function or a goroutine. Sometimes when there value of a variable is very huge it's stored in a heap.&lt;/p&gt;

&lt;p&gt;After understanding these two it's time to jump into escape analysis. There’s no way of knowing which variables will be allocated to the heap simply by reading the Go code. We can understand this with an 'Escape Analysis'. By escape, we mean whether the variable escapes the scope of a function determining whether it will be stored on a heap or stack.&lt;/p&gt;

&lt;p&gt;Run the build command of the go code like this&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;go build -gcflags '-m -l'
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;-m - Flag to show escape analysis.&lt;br&gt;
-l - Disable inlining to keep stack traces accurate.&lt;/p&gt;

&lt;p&gt;Take this code:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;package main

func escapeExample() *int {
    x := 42
    return &amp;amp;x // x escapes because its address is returned
}

func noEscapeExample() int {
    y := 100
    return y // y does not escape
}

func main() {
    _ = escapeExample()
    _ = noEscapeExample()
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The results are something like these:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;./main.go:4:10: &amp;amp;x escapes to heap
./main.go:12:13: main escapes to heap
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;So, why do we do all these? This analysis can prove to be useful when you are debugging for performance issues. Variables are better stored in a stack rather than in a heap. You can find where variables escape to the heap and refactor the code for better efficiency. &lt;/p&gt;

&lt;p&gt;Hope you learned something new today. &lt;br&gt;
I am currently building &lt;a href="https://hexmos.com/liveapi/" rel="noopener noreferrer"&gt;LiveAPI&lt;/a&gt; which is a tool for API document generation do try that out.&lt;/p&gt;

&lt;p&gt;Thanks for reading.&lt;/p&gt;

</description>
      <category>go</category>
      <category>programming</category>
      <category>productivity</category>
      <category>backend</category>
    </item>
    <item>
      <title>🔍 3 Hidden Linux Logs You’ve Never Heard About! 🐧 (Uncover the Secrets!)</title>
      <dc:creator>Sreedeep</dc:creator>
      <pubDate>Mon, 23 Dec 2024 19:42:22 +0000</pubDate>
      <link>https://forem.com/rogueloop/3-hidden-linux-logs-youve-never-heard-about-uncover-the-secrets-1a51</link>
      <guid>https://forem.com/rogueloop/3-hidden-linux-logs-youve-never-heard-about-uncover-the-secrets-1a51</guid>
      <description>&lt;p&gt;Log files can provide great insights into operations, user activity, and potential threats. Understanding these log files, &lt;code&gt;wtmp&lt;/code&gt;, &lt;code&gt;utmp&lt;/code&gt;, &lt;code&gt;btmp&lt;/code&gt;, and &lt;code&gt;auth.log&lt;/code&gt;, was a game-changer for me.&lt;/p&gt;

&lt;p&gt;In this article, we’ll explore these logs, their practical applications, and how you can use them to diagnose issues.&lt;/p&gt;




&lt;h3&gt;
  
  
  1. &lt;code&gt;wtmp&lt;/code&gt;: Login and Logout Records
&lt;/h3&gt;

&lt;p&gt;The &lt;code&gt;wtmp&lt;/code&gt; log tracks historical login and logout events on a Linux system. This binary log, stored in &lt;code&gt;/var/log/wtmp&lt;/code&gt;, helps administrators review access patterns and pinpoint login anomalies. To analyse its contents, you can use the &lt;code&gt;last&lt;/code&gt; command.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nv"&gt;$ &lt;/span&gt;last
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This command reveals the history of user sessions, including start and end times, terminal IDs, and host information.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. &lt;code&gt;utmp&lt;/code&gt;: Active Users
&lt;/h3&gt;

&lt;p&gt;Its stored in &lt;code&gt;/var/run/utmp&lt;/code&gt;, this log tracks currently logged-in users and their active sessions. Use the &lt;code&gt;who&lt;/code&gt; command to display this information in real-time&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nv"&gt;$ &lt;/span&gt;&lt;span class="nb"&gt;who&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Its essential for administrators to monitor active sessions and ensure system integrity.&lt;/p&gt;

&lt;h3&gt;
  
  
  3. &lt;code&gt;btmp&lt;/code&gt;: Invalid Login Attempts
&lt;/h3&gt;

&lt;p&gt;The &lt;code&gt;btmp&lt;/code&gt; log records failed login attempts, providing critical insights into potential brute force attacks or unauthorized access attempts. Analyze it with the &lt;code&gt;lastb&lt;/code&gt; command:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nv"&gt;$ &lt;/span&gt;&lt;span class="nb"&gt;sudo &lt;/span&gt;lastb
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This helps identify the source and frequency of failed login attempts, enabling quick response to possible threats.&lt;/p&gt;

&lt;h3&gt;
  
  
  Bonus 1: &lt;code&gt;boot.log&lt;/code&gt;
&lt;/h3&gt;

&lt;p&gt;The &lt;code&gt;boot.log&lt;/code&gt; file contains messages from the boot process. It’s a valuable resource for diagnosing slow boot times or identifying failing services.&lt;/p&gt;

&lt;p&gt;Here is what I found in my system which helped me debug slow boot time. &lt;/p&gt;

&lt;p&gt;&lt;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%2F33efb1wfisw8q15rwtc9.png" class="article-body-image-wrapper"&gt;&lt;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%2F33efb1wfisw8q15rwtc9.png" alt="Image description" width="800" height="482"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h3&gt;
  
  
  Bonus 2: &lt;code&gt;utmpdump&lt;/code&gt;
&lt;/h3&gt;

&lt;p&gt;For binary logs like &lt;code&gt;wtmp&lt;/code&gt; or &lt;code&gt;btmp&lt;/code&gt;, tools such as &lt;code&gt;utmpdump&lt;/code&gt; convert the contents into readable text. Example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nv"&gt;$ &lt;/span&gt;utmpdump /var/log/wtmp
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This output reveals detailed session information, including event types, user IDs, and timestamps.&lt;/p&gt;

&lt;p&gt;Hello, I forgot to introduce myself. I am Sreedeep, I am building &lt;a href="https://hexmos.com/liveapi/" rel="noopener noreferrer"&gt;LiveAPI&lt;/a&gt;. Its a Super Convenient API Documentation solution for startups.&lt;/p&gt;

&lt;p&gt;In LiveAPI we added a new feature in which you can see high level back-end logs which will help you debug the issues while generating API documentation. Tryout our &lt;a href="https://hexmos.com/liveapi/" rel="noopener noreferrer"&gt;free trial&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>devops</category>
      <category>productivity</category>
      <category>learning</category>
    </item>
    <item>
      <title>Breaking the Myth: Object Detection Isn't Hard as Thought</title>
      <dc:creator>Sreedeep</dc:creator>
      <pubDate>Sun, 03 Dec 2023 14:48:00 +0000</pubDate>
      <link>https://forem.com/rogueloop/breaking-the-myth-object-detection-isnt-hard-as-thought-36m</link>
      <guid>https://forem.com/rogueloop/breaking-the-myth-object-detection-isnt-hard-as-thought-36m</guid>
      <description>&lt;p&gt;Hearing about AI and object detection can create an illusion among developers that doing such things is far beyond the reach of traditionally trained programmers.&lt;/p&gt;

&lt;p&gt;But that's not the case. Object detection is easy to set up and only requires a few minutes of your time.&lt;/p&gt;

&lt;p&gt;It's a computer vision technique that works to identify and locate objects within an image or video. For example, traffic surveillance systems, self-driving cars, and facial recognition systems all employ this technology to track down vehicles, faces, and other objects of interest.&lt;/p&gt;

&lt;p&gt;&lt;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%2F1w46wuuj8hwfnkijc2l3.png" class="article-body-image-wrapper"&gt;&lt;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%2F1w46wuuj8hwfnkijc2l3.png" alt="YOLO example" width="500" height="281"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This article will use YOLO (You Only Look Once) for performing the object detection tasks.&lt;/p&gt;

&lt;h3&gt;
  
  
  Object Detection with YOLO
&lt;/h3&gt;

&lt;h4&gt;
  
  
  Introduction to YOLOV8
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://github.com/ultralytics/ultralytics" rel="noopener noreferrer"&gt;YOLOv8&lt;/a&gt; (You Only Look Once) is an open-source Computer Vision AI model released on January 10th, 2023. It’s called YOLO because it detects everything inside an image in a single pass. The new version can perform image detection, classification, instance segmentation, tracking, and pose estimation tasks.  &lt;/p&gt;

&lt;p&gt;The new v8 has better performance and flexibility.  This is pre-trained on COCO (Common Objects in Context) and ImageNet datasets. &lt;/p&gt;

&lt;h4&gt;
  
  
  Using YOLO: An Example
&lt;/h4&gt;

&lt;p&gt;YOLO can be used for a wide variety of applications and use cases. Here is an example of borderless table detection. A detailed section on implementation is presented at the end of the article. &lt;/p&gt;

&lt;p&gt;&lt;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%2Fz4cu66hl2m2b2zyp8612.png" class="article-body-image-wrapper"&gt;&lt;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%2Fz4cu66hl2m2b2zyp8612.png" alt="Results" width="800" height="636"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;For the full article and the practical part visit our blogpost &lt;a href="https://journal.hexmos.com/yolo-object-detection/" rel="noopener noreferrer"&gt;https://journal.hexmos.com/yolo-object-detection/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://twitter.com/HexmosTech" rel="noopener noreferrer"&gt;&lt;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%2F3xn18b9owalrcrapdqce.png" alt="Twitter" width="49" height="20"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://hexmos.com" rel="noopener noreferrer"&gt;&lt;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%2Fnto6ri98xj301o8ftvb5.png" alt="Hexmos" width="192" height="192"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>ai</category>
      <category>machinelearning</category>
      <category>python</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>Point, Shoot, and Detect: Object Detection with PyTorch Mobile</title>
      <dc:creator>Sreedeep</dc:creator>
      <pubDate>Sun, 19 Nov 2023 20:39:10 +0000</pubDate>
      <link>https://forem.com/rogueloop/point-shoot-and-detect-object-detection-with-pytorch-mobile-432o</link>
      <guid>https://forem.com/rogueloop/point-shoot-and-detect-object-detection-with-pytorch-mobile-432o</guid>
      <description>&lt;p&gt;In this article we will set up a Mobile Application for Object Detection. We will use PyTorch Mobile to optimize and run the YOLOv5 on an Android app.&lt;/p&gt;

&lt;h2&gt;
  
  
  AI mobile app development Challenges
&lt;/h2&gt;

&lt;p&gt;Developing AI applications in mobile is difficult due to slow loading speeds and scalability problems. They heavily rely on cloud infrastructure, In addition, certain AI frameworks or designs can't be used on mobile devices, limiting their access and usefulness.&lt;/p&gt;

&lt;p&gt;Larger AI systems need cloud connections, making them costly. Developers need to make algorithms compatible with mobile devices. We should be able to execute our AI locally on the phone instead of using the cloud as a Service. This will contribute to making AI more accessible and efficient in mobile applications. In this article, we will introduce you to PyTorch Mobile and setup a basic app for testing out this framework.&lt;/p&gt;

&lt;h3&gt;
  
  
  PyTorch
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://pytorch.org/" rel="noopener noreferrer"&gt;PyTorch&lt;/a&gt; is a machine learning framework based on the Torch library. People use PyTorch's tools to make neural networks and machine learning algorithms. PyTorch defines a class called Tensor (torch.Tensor) to store and operate on homogeneous multidimensional rectangular arrays of numbers. PyTorch Tensors are similar to NumPy Arrays, but can also be operated on a CUDA-capable NVIDIA GPUs.&lt;/p&gt;

&lt;h3&gt;
  
  
  About PyTorch mobile
&lt;/h3&gt;

&lt;p&gt;Running machine learning algorithms on mobile devices for prediction is crucial in today's tech landscape. The move to edge computing is not about speed. It's also about protecting user privacy and enabling new interactive experiences.&lt;br&gt;
&lt;a href="https://pytorch.org/mobile/home/" rel="noopener noreferrer"&gt;PyTorch Mobile&lt;/a&gt; helps connect training and deployment in the PyTorch environment. This platform streamlines the journey from model inference in mobile applications. PyTorch Mobile is in beta and gaining popularity for widespread production use. This software has APIs that will make mobile based machine learning better in the future.&lt;/p&gt;

&lt;p&gt;&lt;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%2Fkiog6u6xisda6ivqja6r.png" class="article-body-image-wrapper"&gt;&lt;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%2Fkiog6u6xisda6ivqja6r.png" alt="Image description" width="535" height="628"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Next, we will focus on trying out an Android app to test PyTorch Mobile capabilities.&lt;/p&gt;
&lt;h2&gt;
  
  
  Setting up the Demo App
&lt;/h2&gt;
&lt;h3&gt;
  
  
  YOLOv5 Vision AI
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://github.com/ultralytics/yolov5" rel="noopener noreferrer"&gt;YOLO&lt;/a&gt; is one of the popular open-source vision AI. YOLOv5 is a great object detection algorithm that uses Deep Convolution Neural Networks(DCNN). This helps to predict object classes instantaneously.YOLOv5 can detect people, vehicles, and animals in various environments. Its full form is "You only look once". This indicates that it takes the input photo and spits it into grids. Then it assigns bounding boxes and probabilities to each grid. The current v5 works on a complex architecture called the EfficientDet network, which improves its capability to detect objects smoothly.&lt;/p&gt;

&lt;p&gt;These are the steps we take to setup YOLO for mobile:&lt;/p&gt;
&lt;h3&gt;
  
  
  Optimizing the YOLO for the Android App
&lt;/h3&gt;

&lt;p&gt;Clone repo and install requirements.txt in a &lt;code&gt;Python&amp;gt;=3.8.0&lt;/code&gt; environment&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git clone https://github.com/ultralytics/yolov5
&lt;span class="nb"&gt;cd &lt;/span&gt;yolov5
pip &lt;span class="nb"&gt;install&lt;/span&gt; &lt;span class="nt"&gt;-r&lt;/span&gt; requirements.txt
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Create an optimized model for mobile&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;python export.py &lt;span class="nt"&gt;--weights&lt;/span&gt; yolov5s.pt &lt;span class="nt"&gt;--include&lt;/span&gt; torchscript &lt;span class="nt"&gt;--optimize&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You will get a &lt;code&gt;yolov5s.torchscript&lt;/code&gt; which is a mobile-optimized version of the model. Then we move it to the app directory and import it at &lt;code&gt;ObjectDetection/app/src/main/assets/yolov5s.torchscript&lt;/code&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  Setting up the Android App
&lt;/h3&gt;

&lt;p&gt;We will use an app from the PyTorch example repository to demonstrate PyTorch Mobile.&lt;/p&gt;

&lt;p&gt;This is the repository &lt;a href="https://github.com/pytorch/android-demo-app/tree/master/ObjectDetection" rel="noopener noreferrer"&gt;here&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;For setup download the latest Android Studio from &lt;a href="https://developer.android.com/studio" rel="noopener noreferrer"&gt;here&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Setup the Android Studio SDK from the SDK tools menu:&lt;/p&gt;

&lt;p&gt;&lt;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%2Fb0w6qq6y7irp36f6zy18.png" class="article-body-image-wrapper"&gt;&lt;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%2Fb0w6qq6y7irp36f6zy18.png" alt="Image description" width="800" height="578"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Connect to a phone using wireless debugging.&lt;/p&gt;

&lt;p&gt;&lt;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%2Fz4825ox7jf3vboxc2fjd.png" class="article-body-image-wrapper"&gt;&lt;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%2Fz4825ox7jf3vboxc2fjd.png" alt="Image description" width="664" height="433"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Run the gradle script with the &lt;code&gt;--stacktrace&lt;/code&gt; option to show more debug information.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;./gradlew installDebug &lt;span class="nt"&gt;--stacktrace&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This will create a prompt on your phone to install the app.&lt;/p&gt;

&lt;h2&gt;
  
  
  Results
&lt;/h2&gt;

&lt;p&gt;&lt;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%2Fwbhhtrzbld8trseb3da3.png" class="article-body-image-wrapper"&gt;&lt;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%2Fwbhhtrzbld8trseb3da3.png" alt="Image description" width="686" height="746"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;This concludes our exploration of PyTorch Mobile. We got to know how to run algorithms in a mobile Android app and set up basic object detection. Hope this article was useful for you.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://hexmos.com" rel="noopener noreferrer"&gt;&lt;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%2Fnto6ri98xj301o8ftvb5.png" alt="Hexmos" width="192" height="192"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://twitter.com/HexmosTech" rel="noopener noreferrer"&gt;&lt;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%2F3xn18b9owalrcrapdqce.png" alt="Twitter" width="49" height="20"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>ai</category>
      <category>python</category>
      <category>android</category>
      <category>opensource</category>
    </item>
    <item>
      <title>React native expo tenor search Component</title>
      <dc:creator>Sreedeep</dc:creator>
      <pubDate>Sun, 14 May 2023 11:27:43 +0000</pubDate>
      <link>https://forem.com/rogueloop/react-native-expo-tenor-search-component-1c6g</link>
      <guid>https://forem.com/rogueloop/react-native-expo-tenor-search-component-1c6g</guid>
      <description>&lt;p&gt;Recently we needed to integrate tenor gifs into our product, due to tenor apis up-scaling to v2 we couldn't find any opensource package , hence we created this &lt;code&gt;expo-tenor-search&lt;/code&gt; package for react native .&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/HexmosTech/expo-tenor-search" rel="noopener noreferrer"&gt;expo-tenor-search&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;the main features are simple &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;you can search gifs&lt;/li&gt;
&lt;li&gt;display gif categories &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;For easy integration into your apps there is this function &lt;code&gt;handleGifSelect&lt;/code&gt; which you can define your logic on what to do with the selected gif.&lt;/p&gt;

&lt;p&gt;This is how it looks in code&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import { GifSearch } from 'expo-tenor-search'

export default function GifScreen() {
  const handleGifSelect = (data) =&amp;gt; {
    console.log(`Selected GIF: ${data}`)
  }

  const styles = {
    searchbox: {
      searchContainer: {
        height: 45
      }
    },
    gifbox: {
      img: {
        borderRadius: '10px'
      }
    }
  }
  return (
    &amp;lt;GifSearch
      tenorkey={'xxx-xxx-xxx-xxx'}
      MediaFilter={'minimal'}
      onGifSelect={handleGifSelect}
      styles={styles}
    /&amp;gt;
  )
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;you can pass custom css into this with which you can control the UI .&lt;/li&gt;
&lt;li&gt;there are selectors like  &lt;code&gt;searchContainer&lt;/code&gt; , &lt;code&gt;closeButton&lt;/code&gt;,&lt;code&gt;button&lt;/code&gt; , &lt;code&gt;img&lt;/code&gt; etc using which you can manipulate the styles .&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The results produced are :- &lt;/p&gt;

&lt;p&gt;&lt;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%2Fjj815o1i1zh2g7dn9ypz.png" class="article-body-image-wrapper"&gt;&lt;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%2Fjj815o1i1zh2g7dn9ypz.png" alt="Image description" width="800" height="1555"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you find this useful and want to know more about its implementation give this an up vote.&lt;br&gt;&lt;br&gt;
Will be posting more stuff here soon. &lt;/p&gt;

&lt;p&gt;Follow me here &lt;a href="https://twitter.com/d4rkcyph3r" rel="noopener noreferrer"&gt;twitter&lt;/a&gt; for updates.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>reactnative</category>
      <category>ui</category>
      <category>javascript</category>
    </item>
  </channel>
</rss>
