Forem: Shanu Kumawat

Creating Custom, Reusable Animations in Flutter That Don't Kill Performance

Shanu Kumawat — Tue, 04 Mar 2025 12:06:04 +0000

If you've ever tried to add animations to your Flutter app, you know there's a fine line between delightful user experience and watching your app's performance graph take a nosedive. After spending countless hours debugging janky animations and memory leaks, I've compiled my hard-earned lessons into this guide.

The Animation Problem

Flutter offers incredible animation capabilities out of the box, but there's a catch: poorly implemented animations can destroy your app's performance. The biggest culprits I've encountered are:

Rebuilding entire widget trees during animation
Running too many simultaneous animations
Using complex animations on low-end devices
Failing to dispose of animation controllers

These issues become especially problematic when you're trying to create reusable animation components. Let's fix that.

Starting With the Basics: Animation Controllers

Every good Flutter animation starts with proper controller management. Here's my go-to pattern for creating a reusable, performance-friendly animated widget:

class OptimizedAnimatedWidget extends StatefulWidget {
  final Widget child;
  final Duration duration;

  const OptimizedAnimatedWidget({
    Key? key,
    required this.child,
    this.duration = const Duration(milliseconds: 300),
  }) : super(key: key);

  @override
  _OptimizedAnimatedWidgetState createState() => _OptimizedAnimatedWidgetState();
}

class _OptimizedAnimatedWidgetState extends State<OptimizedAnimatedWidget> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: widget.duration,
    );
    _animation = CurvedAnimation(
      parent: _controller,
      curve: Curves.easeInOut,
    );
    _controller.forward();
  }

  @override
  void dispose() {
    _controller.dispose(); // This is crucial!
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      builder: (context, child) {
        return Transform.scale(
          scale: _animation.value,
          child: child,
        );
      },
      child: widget.child, // This is our performance trick!
    );
  }
}

The secret sauce here is passing the child to AnimatedBuilder. This prevents Flutter from rebuilding the child on every animation frame, which is a common performance killer.

Technique #1: RepaintBoundary for Complex Animations

When your animations involve complex widgets, wrap them in a RepaintBoundary:

@override
Widget build(BuildContext context) {
  return AnimatedBuilder(
    animation: _animation,
    builder: (context, child) {
      return Transform.scale(
        scale: _animation.value,
        child: RepaintBoundary(child: child),
      );
    },
    child: widget.child,
  );
}

This creates a new "layer" for Flutter's rendering engine, preventing the entire widget tree from repainting on each animation frame.

Technique #2: Custom Tween Classes for Reusability

To make animations truly reusable, I create custom Tween classes:

class ShakeTween extends Tween<double> {
  ShakeTween({double begin = 0.0, double end = 10.0})
      : super(begin: begin, end: end);

  @override
  double lerp(double t) {
    // Custom shake animation
    if (t < 0.25) {
      return -sin(t * 4 * pi) * end! * (t * 4);
    } else if (t < 0.75) {
      return sin((t - 0.25) * 4 * pi) * end! * (0.75 - t) * 1.33;
    } else {
      return -sin((t - 0.75) * 4 * pi) * end! * (1 - t) * 4;
    }
  }
}

Now I can reuse this shake animation anywhere:

final Animation<double> _shakeAnimation = ShakeTween().animate(_controller);

Technique #3: Composable Animation Widgets

For truly reusable animations, I build composable widgets that can be stacked:

class FadeScale extends StatelessWidget {
  final Widget child;
  final Duration duration;
  final bool isActive;

  const FadeScale({
    Key? key,
    required this.child,
    this.duration = const Duration(milliseconds: 200),
    this.isActive = true,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TweenAnimationBuilder<double>(
      tween: Tween<double>(begin: 0.0, end: isActive ? 1.0 : 0.0),
      duration: duration,
      curve: Curves.easeOut,
      builder: (context, value, child) {
        return Opacity(
          opacity: value,
          child: Transform.scale(
            scale: 0.8 + (value * 0.2),
            child: child,
          ),
        );
      },
      child: child, // This prevents unnecessary rebuilds
    );
  }
}

I can now use this anywhere in my app:

FadeScale(
  isActive: _isVisible,
  child: MyExpensiveWidget(),
)

Performance Testing Tips

After implementing these patterns, I always test animations on real devices (especially low-end Android phones) using the following:

Timeline View: Enable "Track widget builds" in Flutter DevTools to see if widgets are rebuilding unnecessarily.
Performance Overlay: Add MaterialApp(showPerformanceOverlay: true) to check for dropped frames.
Memory Profiling: Watch memory usage during animations to catch leaks from undisposed controllers.

Real-World Example: A Reusable "Heart Beat" Animation

Here's a complete example of a performance-optimized, reusable heart beat animation I use in production:

class HeartBeat extends StatefulWidget {
  final Widget child;
  final Duration duration;
  final bool isAnimating;

  const HeartBeat({
    Key? key,
    required this.child,
    this.duration = const Duration(milliseconds: 1500),
    this.isAnimating = true,
  }) : super(key: key);

  @override
  _HeartBeatState createState() => _HeartBeatState();
}

class _HeartBeatState extends State<HeartBeat> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _scaleAnimation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: widget.duration,
    );

    _scaleAnimation = TweenSequence<double>([
      TweenSequenceItem(tween: Tween<double>(begin: 1.0, end: 1.2), weight: 10),
      TweenSequenceItem(tween: Tween<double>(begin: 1.2, end: 1.0), weight: 10),
      TweenSequenceItem(tween: Tween<double>(begin: 1.0, end: 1.15), weight: 10),
      TweenSequenceItem(tween: Tween<double>(begin: 1.15, end: 1.0), weight: 10),
      TweenSequenceItem(tween: Tween<double>(begin: 1.0, end: 1.0), weight: 60),
    ]).animate(CurvedAnimation(
      parent: _controller,
      curve: Curves.easeInOut,
    ));

    if (widget.isAnimating) {
      _controller.repeat();
    }
  }

  @override
  void didUpdateWidget(HeartBeat oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (widget.isAnimating != oldWidget.isAnimating) {
      if (widget.isAnimating) {
        _controller.repeat();
      } else {
        _controller.stop();
      }
    }
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _scaleAnimation,
      builder: (context, child) {
        return Transform.scale(
          scale: _scaleAnimation.value,
          child: child,
        );
      },
      child: widget.child,
    );
  }
}

Conclusion

After implementing these techniques in multiple apps, I've seen dramatic performance improvements, especially on older devices. The key takeaways are:

Prevent unnecessary rebuilds by using the child parameter in AnimatedBuilder
Create custom Tweens for complex motion
Use RepaintBoundary for complex widgets
Always dispose your controllers
Test on real, low-end devices

What animation challenges have you faced in your Flutter projects? I'd love to hear about them in the comments below!

How Do You Build Scalable Apps in Flutter? 🚀

Shanu Kumawat — Thu, 16 Jan 2025 17:25:21 +0000

As Flutter apps scale, maintaining a clean, manageable codebase is essential. One of my best practices is embracing immutability—keeping data structures immutable to avoid unexpected side effects and simplify debugging. 🔒

What are your best practices for large-scale Flutter app development?

How do you structure your code as the app grows?
What tools or patterns do you use to maintain code quality?

Looking forward to hearing your thoughts and tips! 💬

How to Work with State in Flutter 🛠️📱

Shanu Kumawat — Thu, 16 Jan 2025 17:08:16 +0000

Introduction

Let’s talk about state in Flutter. If you’ve ever been puzzled by terms like "stateless" and "stateful," don’t worry—you’re not alone. When I started with Flutter, understanding state management felt like deciphering a secret code. But here’s the thing: mastering state is crucial if you want your app to behave the way users expect.

In this blog, I’ll walk you through the basics of state in Flutter, share a few "aha" moments from my own journey, and show you how to manage it like a pro. Let’s dive in!

What is State, and Why Does It Matter?

In simple terms, state is just data that changes over time. For example:

The text inside a search bar is state—it changes as the user types.
A button’s color when toggled is state.

Flutter apps are reactive, meaning they rebuild parts of the UI when state changes. This is super powerful because you don’t have to manually update the UI—it just works.

Stateless vs. Stateful Widgets

When I first saw these terms, I thought, Great, more jargon. But it’s actually pretty straightforward:

Stateless Widgets

These don’t hold any state. They’re immutable.
Use them when the UI doesn’t need to change after it’s built.
Example: A static Text widget or an icon.

Stateful Widgets

These can change! They have a lifecycle and can rebuild when the state updates.
Use them when you need interactivity or dynamic content.
Example: A counter app where a button increments a value.

Pro Tip: Start with a StatelessWidget if you’re unsure and switch to StatefulWidget only if needed. This keeps things clean and simple.

Managing State with `setState`

The simplest way to manage state is with setState. Here’s an example from the classic counter app:

class CounterApp extends StatefulWidget {
  @override
  _CounterAppState createState() => _CounterAppState();
}

class _CounterAppState extends State<CounterApp> {
  int counter = 0;

  void incrementCounter() {
    setState(() {
      counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: "Text('Counter App')),"
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('You have pressed the button this many times:'),
            Text('$counter', style: TextStyle(fontSize: 32)),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: incrementCounter,
        child: Icon(Icons.add),
      ),
    );
  }
}

When the button is pressed, the UI updates because setState tells Flutter to rebuild.

When `setState` Isn’t Enough

In small apps, setState is fine. But as your app grows, managing state with setState can get messy. Imagine a to-do list app with hundreds of widgets. Keeping track of all those states can become a nightmare.

That’s where state management solutions like Provider, Riverpod, or BLoC come into play.

State Management Insights

Here’s what I learned from experience:

Start simple. Use setState to understand the basics.
Gradually introduce a state management package as your app grows.
Learn one tool deeply. I started with Provider—it’s beginner-friendly yet powerful.
Debugging state changes is easier if you structure your app well. Avoid putting too much logic in widgets.

Wrapping Up

State is the heart of your Flutter app. Start small, experiment, and don’t be afraid to refactor as you learn. Once you’ve mastered the basics, tools like Provider or BLoC will make more sense, and you’ll wonder how you ever lived without them!

Have questions or tips of your own? Drop a comment below—I’d love to hear from you.

About the Author

Hi, I'm Shanu Kumawat, a Flutter developer passionate about crafting seamless and beautiful mobile applications. Currently, I'm diving deeper into expanding my tech stack by learning Rust.

When I'm not coding, I enjoy exploring innovative technologies and sharing knowledge with the community. Connect with me on GitHub, Twitter, or LinkedIn to collaborate and grow together!

Unlocking the Power of Elixir Phoenix and Rust: A Match Made for High-Performance Web Applications ⚡🔧

Shanu Kumawat — Tue, 24 Dec 2024 13:16:38 +0000

As developers, we’re always on the lookout for tools and technologies that enable us to build faster, more efficient, and scalable applications. Enter the dynamic duo of Elixir Phoenix and Rust, two technologies that, when combined, can take web application development to the next level.

In this article, we’ll explore why pairing Elixir Phoenix and Rust is a game-changer and how you can leverage their strengths to build robust, high-performance applications.

Why Elixir Phoenix?

Elixir Phoenix is known for its real-time capabilities, fault-tolerance, and concurrency. Built on top of the Erlang VM (BEAM), it’s perfect for creating highly concurrent and low-latency web applications. Some standout features of Phoenix include:

Channels: Seamless real-time communication.
Scalability: Easily handle millions of connections simultaneously.
Fault-Tolerance: The BEAM’s process model ensures system reliability.

Phoenix is a powerhouse for web applications, but it’s not optimized for computationally intensive tasks. That’s where Rust comes in.

Why Rust?

Rust is a systems programming language that combines memory safety with blazing-fast performance. Unlike traditional systems languages, Rust ensures safety without compromising on speed, making it perfect for:

Computationally heavy tasks.
Building high-performance APIs.
Memory-critical operations.

Rust’s ecosystem, including libraries like Actix and Tokio, is tailored for high-performance tasks, making it the ideal companion to Elixir Phoenix.

The Perfect Combo: Elixir Phoenix + Rust

Combining Phoenix and Rust enables developers to use the best of both worlds:

Web Framework + High Performance: Use Phoenix for handling web requests and real-time updates, while offloading heavy computations or performance-critical logic to Rust.
Microservices Architecture: Integrate Rust services with your Phoenix application for computationally intensive operations.
Scalability and Speed: Handle millions of connections in Phoenix while leveraging Rust for low-latency computations.

This combination is particularly beneficial in applications requiring both scalability and high performance, such as real-time analytics dashboards, game backends, or IoT platforms.

How to Integrate Phoenix and Rust

Integrating Phoenix and Rust involves creating a seamless communication pipeline between the two technologies. Here’s a basic approach:

1. Rust NIFs (Native Implemented Functions)

Rust NIFs allow you to write computationally heavy functions in Rust and call them directly from Elixir code using libraries like Rustler.

Example:

defmodule MyApp do
  use Rustler, otp_app: :my_app, crate: :my_rust_crate

  # Function defined in Rust
  def heavy_computation(args), do: :erlang.nif_error(:not_implemented)
end

JSON APIs

You can create a Rust-based microservice (e.g., using Actix Web) and have Phoenix communicate with it via HTTP or gRPC.

Example Rust API:

use actix_web::{get, App, HttpServer, Responder};

#[get("/compute")]
async fn compute() -> impl Responder {
    "Rust-powered computation result"
}

#[actix_web::main]
async fn main() -> std::io::Result<()> {
    HttpServer::new(|| App::new().service(compute))
        .bind("127.0.0.1:8080")?
        .run()
        .await
}

Phoenix can then fetch results using an HTTP client like Tesla or HTTPoison.

Message Queues

For more decoupled communication, you can use a
message queue like RabbitMQ or Kafka to send tasks to Rust workers.

Real-World Use Cases

Real-Time Dashboards: Use Phoenix for real-time updates and Rust for processing data streams.
Video/Audio Processing: Handle user interactions in Phoenix while using Rust for encoding or transcoding.
IoT Platforms: Phoenix can manage devices and connections, while Rust processes sensor data.

Getting Started

Set up Phoenix: Follow the Phoenix installation guide.
Learn Rust Basics: Start with the official Rust book.
Choose Your Integration Method: Decide between NIFs, APIs, or queues based on your project requirements.

Conclusion

Elixir Phoenix and Rust are a match made in heaven for developers building scalable, high-performance applications. By combining Phoenix’s concurrency and real-time capabilities with Rust’s raw power, you can create systems that are both efficient and resilient.

Start experimenting with this powerful combo and unlock new possibilities in your web development journey!

What do you think of this combination? Have you tried integrating Phoenix with Rust? Share your experiences in the comments below!

How to Set Up Kanata on NixOS: A Step-by-Step Guide 🖥️

Shanu Kumawat — Wed, 18 Dec 2024 09:50:07 +0000

This guide is a follow-up to my previous blog on setting up Kanata on Linux. If you're using NixOS, here's how you can configure Kanata seamlessly.

Prerequisites

NixOS Installed: Make sure you have NixOS up and running on your system.
Kanata Knowledge: Familiarity with Kanata and its use cases will be helpful. If you’re new to Kanata, check out my previous blog on setting it up on Linux.

Configuration

Add the following configuration to your NixOS configuration file:

{
  config,
  lib,
  pkgs,
  ...
}:

{
  # Enable the uinput module
  boot.kernelModules = [ "uinput" ];

  # Enable uinput
  hardware.uinput.enable = true;

  # Set up udev rules for uinput
  services.udev.extraRules = ''
    KERNEL=="uinput", MODE="0660", GROUP="uinput", OPTIONS+="static_node=uinput"
  '';

  # Ensure the uinput group exists
  users.groups.uinput = { };

  # Add the Kanata service user to necessary groups
  systemd.services.kanata-internalKeyboard.serviceConfig = {
    SupplementaryGroups = [
      "input"
      "uinput"
    ];
  };

  services.kanata = {
    enable = true;
    keyboards = {
      internalKeyboard = {
        devices = [
          # Replace the paths below with the appropriate device paths for your setup.
          # Use `ls /dev/input/by-path/` to find your keyboard devices.
          "/dev/input/by-path/platform-i8042-serio-0-event-kbd"
          "/dev/input/by-path/pci-0000:00:14.0-usb-0:3:1.0-event-kbd"
        ];
        extraDefCfg = "process-unmapped-keys yes";
        config = ''
          (defsrc
           caps tab d h j k l
          )
          (defvar
           tap-time 200
           hold-time 200
          )
          (defalias
           caps (tap-hold 200 200 esc lctl)
           tab (tap-hold $tap-time $hold-time tab (layer-toggle arrow))
           del del  ;; Alias for the true delete key action
          )
          (deflayer base
           @caps @tab d h j k l
          )
          (deflayer arrow
           _ _ @del left down up right
          )
        '';
      };
    };
  };
}

Explanation

uinput Module: Ensures the kernel module is loaded for user input devices.
Udev Rules: Configures permissions for the uinput device.
Kanata Service: Defines Kanata keyboard mappings and layers with specific devices.

Testing the Configuration

Rebuild your system configuration:

   sudo nixos-rebuild switch

Identify your keyboard devices:

   ls /dev/input/by-path/

Replace the devices paths in the configuration with the relevant paths for your setup.

Verify that the uinput group exists:

   getent group uinput

Ensure Kanata is running and working as expected with your keyboard mappings.

Conclusion

That's it! You now have Kanata set up and running on NixOS. If you encounter any issues or have suggestions for improvement, feel free to leave a comment or reach out.

Happy typing!

Easy Way to Set Up Flutter Development Environment on NixOS without Flakes or Dev-Shell 🔧

Shanu Kumawat — Wed, 11 Dec 2024 09:23:33 +0000

Why I Wrote This Article

As a developer, I've often found the lack of beginner-friendly documentation and updated guides for setting up Flutter on Nix to be a significant hurdle. This article addresses that gap by providing a detailed guide on how to configure Flutter for development on Nix. I use this setup personally, and I'll keep this article updated as I refine my configuration.

You can find the repository for my Nix configuration here:

My Nix Config Repository

Overview

This guide demonstrates how to configure Flutter as a Nix module. If you'd prefer, you can also adapt it into a devshell setup. We'll begin by creating a flutter.nix file and importing it into your configuration.nix.

Creating the `flutter.nix` File

Start by creating a flutter.nix file. Here's the configuration I use:

{ config, lib, pkgs, ... }:
with lib;
let
  cfg = config.programs.flutter;
  androidComposition = pkgs.androidenv.composeAndroidPackages {
    toolsVersion = "26.1.1";
    platformToolsVersion = "35.0.1";
    buildToolsVersions = [
      "30.0.3"
      "33.0.1"
      "34.0.0"
    ];
    platformVersions = [
      "31"
      "33"
      "34"
    ];
    abiVersions = [ "x86_64" ];
    includeEmulator = true;
    emulatorVersion = "35.1.4";
    includeSystemImages = true;
    systemImageTypes = [ "google_apis_playstore" ];
    includeSources = false;
    extraLicenses = [
      "android-googletv-license"
      "android-sdk-arm-dbt-license"
      "android-sdk-license"
      "android-sdk-preview-license"
      "google-gdk-license"
      "intel-android-extra-license"
      "intel-android-sysimage-license"
      "mips-android-sysimage-license"
    ];
  };
  androidSdk = androidComposition.androidsdk;
  buildToolsVersion = "33.0.1";
in {
  options.programs.flutter = {
    enable = mkEnableOption "Flutter development environment";
    addToKvmGroup = mkEnableOption "Add user to KVM group for hardware acceleration";
    enableAdb = mkEnableOption "Enable ADB and add user to adbusers group";
    user = mkOption {
      type = types.str;
      description = "Username for Flutter development";
    };
  };

  config = mkIf cfg.enable {
    environment.systemPackages = with pkgs; [
      flutter
      androidSdk
      # android-studio
      jdk17
      firebase-tools
    ];

    environment.variables = {
      ANDROID_SDK_ROOT = "${androidSdk}/libexec/android-sdk";
      ANDROID_HOME = "${androidSdk}/libexec/android-sdk";
      JAVA_HOME = "${pkgs.jdk17}";
      GRADLE_OPTS = "-Dorg.gradle.project.android.aapt2FromMavenOverride=${androidSdk}/libexec/android-sdk/build-tools/34.0.0/aapt2";
    };

    nixpkgs.config = {
      android_sdk.accept_license = true;
      allowUnfree = true;
    };

    environment.shellInit = ''
      export PATH=$PATH:${androidSdk}/libexec/android-sdk/platform-tools
      export PATH=$PATH:${androidSdk}/libexec/android-sdk/cmdline-tools/latest/bin
      export PATH=$PATH:${androidSdk}/libexec/android-sdk/emulator
      export PATH="$PATH":"$HOME/.pub-cache/bin"
    '';

    programs.adb.enable = cfg.enableAdb;

    users.users.${cfg.user}.extraGroups =
      (optional cfg.addToKvmGroup "kvm") ++ (optional cfg.enableAdb "adbusers");
  };
}

Feel free to modify it according to your needs.

Importing into `configuration.nix`

Once you have the flutter.nix file, import it into your configuration.nix like so:

imports = [
  ./path/to/flutter.nix
];

Replace ./path/to/flutter.nix with the actual path to your flutter.nix file.

Additional Configuration

# Enable the Flutter module in your `configuration.nix`:
programs.flutter = {
  enable = true;
  user = "your-username"; # Replace with your actual username
  enableAdb = true;       # Enable ADB for Android debugging
  addToKvmGroup = true;   # Add to KVM group for hardware acceleration
};

Things to Note

This configuration assumes you're using flakes and the unstable branch of Nixpkgs. If you're facing issues, ensure that flakes are enabled in your setup.
If you're unsure about any step or encounter errors, feel free to reach out or ask in the comments.

Need More Tutorials?

If you'd like more tutorials on Nix, Flutter, or anything else, let me know! I’m happy to explore and write on topics that help the community.

About the Author

Hi, I'm Shanu Kumawat, a Flutter developer passionate about crafting seamless and beautiful mobile applications. Currently, I'm diving deeper into expanding my tech stack by learning Elixir and Phoenix, embracing the world of functional programming and scalable web development.

When I'm not coding, I enjoy exploring innovative technologies and sharing knowledge with the community. Connect with me on GitHub, Twitter, or LinkedIn to collaborate and grow together!

Cloudflare’s Latest Update: A Builder’s Paradise

Shanu Kumawat — Thu, 03 Oct 2024 18:14:58 +0000

Cloudflare's Builder Day 2024 was packed with excitement as they announced 18 big updates to their Workers platform, all inspired by direct feedback from developers. If you're a developer or tech enthusiast, this update makes Cloudflare the go-to place for building scalable, fast, and secure applications. Let’s dive into some of the juiciest new features, changes, and improvements!

Overview: What’s New?

Cloudflare continues to push the envelope with updates that touch every aspect of the developer experience. From improved Node.js compatibility to persistent logging and free image optimization, Cloudflare is reshaping what’s possible on its platform. Here are the highlights:

Persistent Logs: Keep your Worker logs, and search, filter, or query them directly from the Cloudflare dashboard.

Hyperdrive: Securely connect Workers to private databases using Cloudflare Tunnels.

Static Asset Hosting: Serve static HTML, CSS, and JavaScript right from your Workers, and deploy popular frameworks like Next.js.

Improved Node.js Compatibility: Use more NPM packages with improved support for Node.js APIs.

Cloudflare Queues: Now in GA with higher throughput and more concurrency limits.

Cloudflare Images: Image optimization now free for all, with up to 5,000 transformations a month.

Gradual Deployments: Slowly roll out your updates, minimizing downtime risk.

Let’s break down some of these game-changing updates!

Persistent Logs: Track Everything with Ease

Logging is a crucial part of troubleshooting and performance tuning, and Cloudflare is making it easier than ever. Persistent Logs allow you to retain logs from your Workers and view them directly on your dashboard.

Now, with just two lines in your wrangler.toml, you can have full visibility into your Worker’s behavior, errors, and more:

[observability]
enabled = true

This is a huge leap forward for building smarter, data-driven applications on the platform. You can even filter logs based on specific events or errors, helping you spot problems faster!

Hyperdrive: Connecting to Private Databases

Ever wanted to connect your Worker to a private, VPC-isolated database? Hyperdrive is here to save the day! Cloudflare Tunnels and Access now let you securely connect Workers to databases hidden in private networks.

Whether you're using Amazon RDS, Google Cloud SQL, or Azure Database, you can accelerate queries using Cloudflare’s network—without sacrificing security. This is perfect for developers building full-stack applications, bringing regional databases closer to end users and optimizing connections.

Next.js on Workers: Unleashing OpenNext

Cloudflare’s collaboration with OpenNext means you can now deploy Next.js apps directly on Workers. Powered by the new Node.js compatibility layer, this update is a game-changer for web developers. It supports Incremental Static Regeneration (ISR), custom error pages, and more!

No longer tied to specific platforms, you now have the freedom to deploy across any cloud provider using this open-source framework. Talk about flexibility!

Cloudflare Queues: Event-Driven Just Got Faster

Queues have officially gone GA (General Availability), and they're better than ever! With new higher throughput (5,000 messages per second!) and up to 250 concurrent consumers, Queues allow you to create event-driven applications that scale seamlessly. You can decouple microservices, improving performance and making your systems more fault-tolerant.

Want to schedule delayed messages or optimize API rate limits? Cloudflare Queues make this possible, all while reducing invocation costs. Now you can create efficient workflows that handle massive volumes of data in real-time.

Free Image Optimization for Everyone!

Here’s some news for all you performance junkies: Cloudflare Images is now available for free! With up to 5,000 transformations per month, you can ensure your images are perfectly optimized for any browser or device without breaking a sweat.

By transforming images dynamically based on request, you get blazing-fast page load speeds and lower data usage. Whether it’s resizing, format conversion, or cropping, Cloudflare Images ensures that your images are a breeze to work with—no subscription required.

What’s Next for Builders?

Cloudflare’s commitment to making the web faster and more developer-friendly is clear with these updates. Whether you're working on personal projects or enterprise-grade applications, Cloudflare is making it easier to scale, secure, and optimize your services.

To top it all off, they’re offering $250,000 in credits for qualified startups building on their platform. This is your chance to build the next big thing without the headache of infrastructure management.

Ready to Dive In?

All these updates are live right now! Whether you’re deploying a Next.js app, connecting to a private database, or optimizing your site’s images, Cloudflare’s platform is designed to help you move faster and more efficiently than ever before.

For a deeper dive, watch the Builder Day 2024 stream, or check out their developer documentation to start building!

And that’s a wrap on Cloudflare’s latest and greatest. What will you build next?

Getting Started with pyenv: A Must-Have Tool for Python Development

Shanu Kumawat — Sat, 24 Aug 2024 20:36:15 +0000

What is pyenv, and Why Do You Need It?

pyenv is a simple yet powerful tool that allows you to manage multiple Python versions on your system. As a Python developer, you often need to work on different projects that require different Python versions. Manually managing these versions can be cumbersome and prone to errors. This is where pyenv comes in, making it easy to switch between Python versions, ensuring that your projects are always running on the correct version.

Why Use pyenv?

Version Management: Install and switch between different Python versions effortlessly.
Project Isolation: Ensure that each project uses the correct Python version, avoiding compatibility issues.
Flexibility: Easily test your code on multiple Python versions.

If you've ever faced issues with version conflicts or had to work with both Python 2.x and 3.x on the same machine, you'll appreciate how pyenv simplifies your development workflow.

Integrating pyenv with Poetry

pyenv works exceptionally well with Poetry, a tool that manages dependencies and Python environments. If you're already familiar with Poetry (and if you aren't, check out my article on getting started with Poetry), you'll find that combining it with pyenv gives you even more control over your projects.

When you create a new project with Poetry, it automatically uses the Python version that pyenv has set for the directory. This ensures that your project dependencies are managed in an environment that matches your project's requirements.

Installing pyenv

Let's start by installing pyenv. The installation process varies depending on your operating system.

On macOS

Using Homebrew:

brew update
brew install pyenv

To avoid them accidentally linking against a Pyenv-provided Python, add the following line into your interactive shell's configuration:

Bash/Zsh:

alias brew='env PATH="${PATH//$(pyenv root)\/shims:/}" brew'

Fish:

alias brew="env PATH=(string replace (pyenv root)/shims '' \"\$PATH\") brew"

On Linux

Using curl:

curl https://pyenv.run | bash

After installation, add the following to your shell configuration file (e.g., .bashrc, .zshrc):

export PATH="$HOME/.pyenv/bin:$PATH"
eval "$(pyenv init -)"
eval "$(pyenv virtualenv-init -)"

Using Package Manager On Arch Linux it can be installed with the help of pacman

sudo pacman -S pyenv

add the commands to ~/.bashrc by running the following in your terminal:

echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.bashrc
echo 'command -v pyenv >/dev/null || export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.bashrc
echo 'eval "$(pyenv init -)"' >> ~/.bashrc

For Zsh:

echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.zshrc
echo '[[ -d $PYENV_ROOT/bin ]] && export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.zshrc
echo 'eval "$(pyenv init -)"' >> ~/.zshrc

For Fish:
If you have Fish 3.2.0 or newer, execute this interactively:

set -Ux PYENV_ROOT $HOME/.pyenv
fish_add_path $PYENV_ROOT/bin

Otherwise, execute the snippet below:

set -Ux PYENV_ROOT $HOME/.pyenv
set -U fish_user_paths $PYENV_ROOT/bin $fish_user_paths

Now, add this to ~/.config/fish/config.fish:

pyenv init - | source

For more detail, check out their GitHub.

Using Pyenv

1) Checking the Python Version

To check the Python version currently in use:

❯ pyenv versions
* system (set by /home/shanu/.pyenv/version)

2) Installing Python Versions

With pyenv, you can install any version of Python easily:

❯ pyenv install 3.11.9

After installing a python version, it can be set globally or locally for a project

3) Setting the Global Python Version

Not Recommended, may cause problems with your system
You can set a global Python version that will be used by default across your system:

pyenv global 3.10.6

4) Setting the Local Python Version

You can also set a local Python version for a specific project directory. This version will override the global version when you are in that directory:

❯ pyenv local 3.8.10

❯ pyenv versions
  system
* 3.11.9 (set by /home/shanu/test_folder/.python-version)

❯ python -V
Python 3.11.9 (my global version is 3.12.5)

To unset it, just run:

❯ pyenv local --unset

❯ pyenv versions
* system (set by /home/shanu/.pyenv/version)
  3.11.9

❯ python -V
Python 3.12.5

5) Uninstalling Python Versions

To uninstall a Python version that is no longer needed:

pyenv uninstall 3.11.9

Conclusion

Pyenv is an invaluable tool for Python developers, especially when used in conjunction with Poetry. By managing Python versions effortlessly, it allows you to focus on writing code rather than worrying about version conflicts. Give it a try in your next Python project!

Poetry Beginner's Guide: Simplifying Python Dependency Management on Linux 🐍📜

Shanu Kumawat — Thu, 01 Aug 2024 16:58:54 +0000

The Need for Virtual Environments and Reproducibility

Python projects often rely on numerous external libraries and packages. As projects grow and evolve, managing these dependencies can become complex. Two critical aspects of Python development are:

Virtual Environments: Isolated spaces that keep project dependencies separate from system-wide Python installations, allowing you to create a virtual environment for your project.
Reproducibility: Ensuring that a project can be easily set up and run consistently across different machines or environments is crucial for successful development and deployment of Python packages.

Traditional tools like venv and pip have long been used for these purposes, but they often require multiple steps and manual intervention. This is where Poetry comes in, offering a more streamlined and robust solution.

Why Choose Poetry?

Poetry offers several advantages over traditional tools:

Simplified Workflow: Combines dependency management, packaging, and publishing in one tool, making it easier to install dependencies for your poetry project.
Dependency Resolution: Automatically resolves dependencies and potential conflicts.
Reproducible Builds: Ensures consistent environments across different machines by using the same Python version and dependencies.
Lock File: Generates a lock file for exact version control of all dependencies.
Project Isolation: Creates and manages virtual environments automatically.
Intuitive Commands: Offers a user-friendly CLI for common tasks.

Installing and Setting Up Poetry

curl -sSL https://install.python-poetry.org | python3 -

After installation, add Poetry to your PATH by adding the following line to your shell configuration file (e.g., ~/.bashrc or ~/.zshrc):

export PATH="$HOME/.local/bin:$PATH"

Restart your terminal or run source ~/.bashrc You can use the appropriate file to apply the changes to your project setup.

Verify the installation by running:

poetry --version

Enable tab completion for Bash, Fish, or Zsh

poetry supports generating completion scripts for Bash, Fish, and Zsh, making it easier to use poetry commands in different environments.

Bash

poetry completions bash >> ~/.bash_completion

Fish

poetry completions fish > ~/.config/fish/completions/poetry.fish

Zsh

poetry completions zsh > ~/.zfunc/_poetry

Using Poetry

Creating a New Project

To create a new Python project with Poetry:

poetry new my-project
cd my-project

This creates a new directory with a basic project structure, including a pyproject.toml file.

Adding Dependencies

To add a new dependency, use the command poetry add \ to install the package directly.

poetry add requests

This adds the package to your pyproject.toml file and installs it in the virtual environment managed by poetry for your current project.

Managing Dependencies

View installed packages:

poetry show

Update all packages:

poetry update

Remove a package:

poetry remove requests

Running Scripts

Execute Python scripts within the project's virtual environment:

poetry run python your_script.py

Managing the Virtual Environment

Activate the virtual environment:

poetry shell

Deactivate it:

exit

Building and Publishing

Build your project using poetry to ensure compatibility with different Python versions.

poetry build

Publish to PyPI:

poetry publish

Exporting Requirements

Generate a requirements.txt file:

    poetry export -f requirements.txt --output requirements.txt

Conclusion

Poetry simplifies Python project management by providing a unified tool for dependency management, virtual environments, and packaging. Its intuitive interface and powerful features make it an excellent choice for Python developers looking to streamline their workflow and ensure project reproducibility.

We're a place where coders share, stay up-to-date and grow their careers.

Boost Your Linux Productivity: Remapping Useless Keys with Kanata ⚡

Shanu Kumawat — Sun, 28 Jul 2024 05:07:01 +0000

The Problem: The Useless Caps Lock Key

We've all been there - accidentally hitting the Caps Lock key and suddenly shouting at our screens in ALL CAPS. This relic from the typewriter era takes up prime keyboard real estate but offers little value in return. What if we could transform this useless key into a productivity powerhouse?

Enter Kanata: Your Key Remapping Solution

Kanata is a powerful, cross-platform key remapper written in Rust. It allows you to redefine your keyboard layout at a low level, opening up a world of possibilities for customization and efficiency. With Kanata, we can:

Remap the Caps Lock key to serve dual purposes:
- Tap for Escape (perfect for Neovim users)
- Hold for Control (easier access to common shortcuts)
Transform the Tab key into a symbol layer accessor:
- Tap for normal Tab functionality
- Hold to access a custom layer of symbols and navigation keys

Let's dive into how we can achieve this setup.

Step-by-Step Guide

1. Install Kanata

First, you'll need to install Kanata. The installation process varies depending on your Linux distribution. Check the official Kanata repository for detailed installation instructions.

2. Create Your Kanata Configuration File

Create a new file named kanata.kbd in your home directory. This is where we'll define our custom keyboard layout.

3. Define Your Source Layer

Start by defining your source layer. This represents your physical keyboard layout:

(defsrc
esc  f1   f2   f3   f4   f5   f6   f7   f8   f9   f10  f11  f12
grv  1    2    3    4    5    6    7    8    9    0    -    =    bspc
tab  q    w    e    r    t    y    u    i    o    p    [    ]    
caps a    s    d    f    g    h    j    k    l    ;    '    ret
lsft z    x    c    v    b    n    m    ,    .    /    rsft
lctl lmet lalt           spc            ralt rmet rctl
)

This layout represents a standard QWERTY keyboard. Adjust it if your physical layout differs.

4. Create Custom Aliases

Next, we'll define aliases for our custom key behaviors:

(defalias
cec (tap-hold 200 200 esc lctl)
sym (tap-hold 200 200 tab (layer-toggle symbols))
)

Here's what these aliases do:

cec: Caps as Escape (tap) and Control (hold)
sym: Tab as normal Tab (tap) and Symbol layer toggle (hold)

The numbers (200 200) represent the tap and hold timeouts in milliseconds.

5. Define Your Default Layer

Now, let's create our default layer, incorporating our new aliases:

(deflayer default
esc  f1   f2   f3   f4   f5   f6   f7   f8   f9   f10  f11  f12
grv  1    2    3    4    5    6    7    8    9    0    -    =    bspc
@sym q    w    e    r    t    y    u    i    o    p    [    ]    
@cec a    s    d    f    g    h    j    k    l    ;    '    ret
lsft z    x    c    v    b    n    m    ,    .    /    rsft
lctl lmet lalt           spc            ralt rmet rctl
)

Note how we've replaced tab with @sym and caps with @cec.

6. Create Your Symbol Layer

Finally, let's define our symbol layer:

(deflayer symbols
  _    _    _    _    _    _    _    _    _    _    _    _    _
  _    S-1  S-2  S-3  S-4  S-5  S-6  S-7  S-8  S-9  S-0  _    _    _
  _    S-5  S-6  S-7  S-8  _    _    _    _    S-9  S-0  _    _    _
  _    _    _    del  _    _    left down up   rght _    _    _
  _    _    _    _    _    _    _    _    _    _    _    _
  _    _    _              _              _    _    _
)

In this layer:

S- represents Shift, so S-1 outputs !, S-2 outputs @, etc.
We've added arrow key functionality to h, j, k, l for vim-style navigation
del is now easily accessible on the home row

So at the end you config should look like this:

(defsrc
  esc  f1   f2   f3   f4   f5   f6   f7   f8   f9   f10  f11  f12
  grv  1    2    3    4    5    6    7    8    9    0    -    =    bspc
  tab  q    w    e    r    t    y    u    i    o    p    [    ]    \
  caps a    s    d    f    g    h    j    k    l    ;    '    ret
  lsft z    x    c    v    b    n    m    ,    .    /    rsft
  lctl lmet lalt           spc            ralt rmet rctl
)

(defalias
  cec (tap-hold 200 200 esc lctl)
  sym (tap-hold 200 200 tab (layer-toggle symbols))
)

(deflayer default
  esc  f1   f2   f3   f4   f5   f6   f7   f8   f9   f10  f11  f12
  grv  1    2    3    4    5    6    7    8    9    0    -    =    bspc
  @sym q    w    e    r    t    y    u    i    o    p    [    ]    \
  @cec a    s    d    f    g    h    j    k    l    ;    '    ret
  lsft z    x    c    v    b    n    m    ,    .    /    rsft
  lctl lmet lalt           spc            ralt rmet rctl
)

(deflayer symbols
  _    _    _    _    _    _    _    _    _    _    _    _    _
  _    S-1  S-2  S-3  S-4  S-5  S-6  S-7  S-8  S-9  S-0  _    _    _
  _    S-5  S-6  S-7  S-8  _    _    _    _    S-9  S-0  _    _    _
  _    _    _    del  _    _    left down up   rght _    _    _
  _    _    _    _    _    _    _    _    _    _    _    _
  _    _    _              _              _    _    _
)

7. Run Kanata

Save your kanata.kbd file and run Kanata:

kanata -c /path/to/your/kanata.kbd

Instructions

In Linux, kanata needs to be able to access the input and uinput subsystem to inject events. To do this, your user needs to have permissions. Follow the steps in this page to obtain user permissions.

1. If the uinput group does not exist, create a new group

sudo groupadd uinput

2. Add your user to the input and the uinput group

sudo usermod -aG input $USER
sudo usermod -aG uinput $USER

Make sure that it's effective by running groups. You might have to logout and login.

3. Make sure the uinput device file has the right permissions.

Create a new file:

/etc/udev/rules.d/99-input.rules

Insert the following in the code

KERNEL=="uinput", MODE="0660", GROUP="uinput", OPTIONS+="static_node=uinput"

Machine reboot or run this to reload

sudo udevadm control --reload-rules && sudo udevadm trigger

Verify settings by following command:

ls -l /dev/uinput

Output:

crw-rw---- 1 root date uinput /dev/uinput

4. Make sure the uinput drivers are loaded

You may need to run this command whenever you start kanata for the first time:

sudo modprobe uinput

5a. To create and enable a systemd daemon service

Run this command first:

mkdir -p ~/.config/systemd/user

Then add this to: ~/.config/systemd/user/kanata.service:

[Unit]
Description=Kanata keyboard remapper
Documentation=https://github.com/jtroo/kanata

[Service]
Environment=PATH=/usr/local/bin:/usr/local/sbin:/usr/bin:/bin
Environment=DISPLAY=:0
Type=simple
ExecStart=/usr/bin/sh -c 'exec $$(which kanata) --cfg $${HOME}/.config/kanata/config.kbd'
Restart=no

[Install]
WantedBy=default.target

Make sure to update the executable location for sh in the snippet above.
This would be the line starting with ExecStart=/usr/bin/sh -c.
You can check the executable path with:

which sh

Then run:

systemctl --user daemon-reload
systemctl --user enable kanata.service
systemctl --user start kanata.service
systemctl --user status kanata.service   # check whether the service is running

Conclusion

With this setup, you've transformed your Caps Lock and Tab keys into productivity powerhouses:

Tap Caps Lock for Escape, hold for Control
Tap Tab for normal Tab, hold to access your symbol layer

This configuration is especially powerful for Neovim users, providing quick access to Escape, and for developers who frequently use symbols and navigation keys.

Remember, this is just the beginning. Kanata offers a wealth of customization options. Experiment, refine, and create a keyboard layout that perfectly suits your workflow.

Happy typing!

About the Author

When I'm not coding, I enjoy exploring innovative technologies and sharing knowledge with the community. Connect with me on GitHub, Twitter, or LinkedIn to collaborate and grow together!

Getting Started with llama.cpp on Linux! (Updated+) 🦙💻

Shanu Kumawat — Tue, 19 Mar 2024 17:58:06 +0000

Introduction

llama.cpp is a wonderful project for running llms locally on your system. It is lightweight and provide state-of-the-art performance. It comes with GPU offloading support, allowing you to use your GPU capabilities to run llms.

I am personally using it for running llms on my arch system and I found it better than ollama in terms of performance, while trying to set this it up, I found their documentation confusing and there were no guides specifically for arch linux, that's why I decided to write an article after figuring things out.
So, lets gets started with it.

So, there are 4 ways to use it :-

Method 1: Clone this repository and build locally, see how to Build
Method 2: If you are using macOS or Linux, you can install llama.cpp via brew, flox or nix
Method 3: Use a Docker image, see documentation for Docker
Method 4: Download pre-built binary from releases

Guide

Method 1

let's start by cloning the repo and cd into that

git clone https://github.com/ggerganov/llama.cpp.git
cd llama.cpp

After that we need to build this, it can be done by using make, but like me if you have Nvidia GPU then for using it to for offloading you will need to build it with cuBLAS and for that we need cuda toolkit, You can download it from your Linux distro's package manager. (e.g. apt install nvidia-cuda-toolkit) here I am using AUR helper, you can also install it manually.

paru -S cuda

Now to build project with cuda run

make GGML_CUDA=1

Using CMake:

cmake -B build -DGGML_CUDA=ON
cmake --build build --config Release

It might take a while, after build is finished we can now finally run llms.

The environment variable GGML_CUDA_ENABLE_UNIFIED_MEMORY=1 can be used to enable unified memory on Linux. This allows swapping to system RAM instead of crashing when the GPU VRAM is exhausted

Method 2

Homebrew

On Mac and Linux, the homebrew package manager can be used via

brew install llama.cpp

The formula is automatically updated with new llama.cpp releases. More info: https://github.com/ggerganov/llama.cpp/discussions/7668

Nix

On Mac and Linux, the Nix package manager can be used via

nix profile install nixpkgs#llama-cpp

For flake enabled installations.

nix-env --file '<nixpkgs>' --install --attr llama-cpp

For non-flake enabled installations.

This expression is automatically updated within the nixpkgs repo.

Flox

On Mac and Linux, Flox can be used to install llama.cpp within a Flox environment via

flox install llama-cpp

Flox follows the nixpkgs build of llama.cpp.

Method 3

Follow the documentation here
It's well documented, you will not have problem following it.

How to use

In llama.cpp folder you will find a executable named llama-server and llama-cli
which can be used to run the model
for cli mode just run

./llama-cli -m path-to-model -n no-of-tokens -ngl no-of-layers-to-offload-to-gpu

And for server run this

./llama-server -m path-to-model -n no-of-tokens -ngl no-of-layers-to-offload-to-gpu

You can now open your browser and in the URL section type http://localhost:8080/ and a web UI will appear.

Now you can have fun with your local llm.
Hope you will find this article helpful.

About the Author

When I'm not coding, I enjoy exploring innovative technologies and sharing knowledge with the community. Connect with me on GitHub, Twitter, or LinkedIn to collaborate and grow together!

Ten Must Repos For A Dev !! 🔑📂

Shanu Kumawat — Wed, 07 Feb 2024 15:45:38 +0000

In the vast ocean of code that is GitHub, finding the right repositories to propel your development journey can feel like searching for treasure on a deserted island. Worry not, fellow coders, for I have unearthed 10 hidden gems that will equip you with knowledge, challenge your skills, and spark your creativity.
1) The Algorithms: Hone your problem-solving prowess with this comprehensive collection of algorithms and data structures implemented in various programming languages. From classic sorting algorithms to graph theory marvels, this repository is your one-stop shop for algorithmic enlightenment. (https://github.com/TheAlgorithms)

2) 100 Days of ML Code: Embark on a 100-day journey into the fascinating world of machine learning with this structured curriculum. Packed with bite-sized coding challenges and real-world projects, this repository will transform you from a coding novice to a confident ML enthusiast. (https://github.com/Avik-Jain/100-Days-Of-ML-Code)

3) Project-Based Learning: Break free from the shackles of theoretical frameworks and dive headfirst into practical projects. This repository curates a diverse range of project ideas, from building basic web applications to creating intricate 3D games, all designed to solidify your understanding through hands-on experience. (https://github.com/practical-tutorials/project-based-learning)

4) Coding Interview University: Conquer the dreaded coding interview with this battle-tested arsenal of algorithms, data structures, and interview prep strategies. Sharpen your problem-solving skills, optimize your coding efficiency, and ace those technical assessments with this invaluable resource. (https://github.com/jwasham/coding-interview-university)

5) Open Source University (OSSU): Dive deep into the world of open-source software with curated roadmaps for mastering in-demand programming languages, frameworks, and tools. This repository provides a structured learning path for contributing to open-source projects and becoming a valuable member of the developer community. (https://github.com/ossu)

6) Awesome Python: Embrace the power of Python with this extensive collection of awesome libraries, frameworks, resources, and software. Whether you're a seasoned Pythonista or just starting your journey, this repository is your ultimate guide to maximizing the potential of this versatile language. (https://github.com/vinta/awesome-python)

7) Sindresorhus's Awesome List: Get lost in a rabbit hole of curated awesomeness with this treasure trove of awesome lists for everything tech-related. From libraries and frameworks to blogs and podcasts, this repository is a gateway to discovering hidden gems and expanding your technological horizons. (https://github.com/topics/awesome)

8) Build Your Own X: Unleash your inner inventor and embark on a journey of self-creation with this collection of project ideas for building your own software, tools, and even operating systems. Fuel your entrepreneurial spirit and learn valuable engineering principles by bringing your innovative ideas to life. (https://github.com/codecrafters-io/build-your-own-x)

9) 100 Days, 100 Projects: Challenge yourself to a marathon of creativity with this ambitious collection of 100 project ideas to be completed in 100 days. From web development to mobile apps, data visualization to game development, this repository will push your boundaries and keep you coding through the night. (https://github.com/topics/100-days-of-code)

10) You Don't Need: Break free from the shackles of third-party dependencies and rediscover the joy of building things from scratch. This repository is a collection of resources and tutorials on how to build your own essential tools and libraries, fostering self-reliance and a deeper understanding of how things work. (https://github.com/you-dont-need)

Remember, these repositories are just the tip of the iceberg. Dive deep, explore, experiment, and most importantly, have fun! The GitHub universe is waiting to be conquered, and these gems are your map to coding treasure. So, what are you waiting for? Start exploring and unleash your inner coding superhero!

Forem: Shanu Kumawat

Creating Custom, Reusable Animations in Flutter That Don't Kill Performance

The Animation Problem

Starting With the Basics: Animation Controllers

Technique #1: RepaintBoundary for Complex Animations

Technique #2: Custom Tween Classes for Reusability

Technique #3: Composable Animation Widgets

Performance Testing Tips

Real-World Example: A Reusable "Heart Beat" Animation

Conclusion

How Do You Build Scalable Apps in Flutter? 🚀

How to Work with State in Flutter 🛠️📱

Introduction

What is State, and Why Does It Matter?

Stateless vs. Stateful Widgets

Managing State with setState

When setState Isn’t Enough

State Management Insights

Wrapping Up

About the Author

Unlocking the Power of Elixir Phoenix and Rust: A Match Made for High-Performance Web Applications ⚡🔧

Why Elixir Phoenix?

Why Rust?

The Perfect Combo: Elixir Phoenix + Rust

How to Integrate Phoenix and Rust

1. Rust NIFs (Native Implemented Functions)

Real-World Use Cases

Getting Started

Conclusion

How to Set Up Kanata on NixOS: A Step-by-Step Guide 🖥️

Prerequisites

Configuration

Explanation

Testing the Configuration

Conclusion

Easy Way to Set Up Flutter Development Environment on NixOS without Flakes or Dev-Shell 🔧

Why I Wrote This Article

Overview

Creating the flutter.nix File

Importing into configuration.nix

Additional Configuration

Things to Note

Need More Tutorials?

About the Author

Cloudflare’s Latest Update: A Builder’s Paradise

Overview: What’s New?

Persistent Logs: Track Everything with Ease

Hyperdrive: Connecting to Private Databases

Next.js on Workers: Unleashing OpenNext

Cloudflare Queues: Event-Driven Just Got Faster

Free Image Optimization for Everyone!

What’s Next for Builders?

Ready to Dive In?

Getting Started with pyenv: A Must-Have Tool for Python Development

What is pyenv, and Why Do You Need It?

Why Use pyenv?

Integrating pyenv with Poetry

Installing pyenv

On macOS

On Linux

Using Pyenv

Conclusion

Poetry Beginner's Guide: Simplifying Python Dependency Management on Linux 🐍📜

The Need for Virtual Environments and Reproducibility

Why Choose Poetry?

Installing and Setting Up Poetry

Enable tab completion for Bash, Fish, or Zsh

Bash

Fish

Zsh

Using Poetry

Creating a New Project

Adding Dependencies

Managing Dependencies

Running Scripts

Managing the Virtual Environment

Building and Publishing

Exporting Requirements

Conclusion

Boost Your Linux Productivity: Remapping Useless Keys with Kanata ⚡

Managing State with `setState`

When `setState` Isn’t Enough

Creating the `flutter.nix` File

Importing into `configuration.nix`