Forem: Kingkor Roy Tirtho

Flutter Desktop Mastery 3: Windows Inno Installer, Packaging, and Publishing to Chocolatey

Kingkor Roy Tirtho — Fri, 15 May 2026 16:05:17 +0000

Shipping a Windows desktop app is not just about producing an .exe. Users expect a proper installer, clean uninstall, and an easy way to update. For Spotube, we solved that by pairing fastforge with an Inno Setup template and Chocolatey package manager for distribution to power users.

The Big Picture

We want a pipeline that:

Produces a Windows installer (.exe) with a modern wizard UI
Injects version metadata and app branding automatically
Installs required runtime dependencies (VC++ runtime)
Generates a Chocolatey .nupkg for distribution

Spotube achieves this with four main building blocks:

fastforge for orchestrating Flutter desktop packaging
Inno Setup as the installer engine
InnoDependencyInstaller for bundling prerequisites
Chocolatey for package distribution

We also distribute our app through WinGet, but we will cover that in a future article. The Inno installer is the common denominator for both channels.

WinGet part is more involved with CI/CD then build steps as Microsoft requires a public repository and a manifest PR for each release, so we will cover that separately.

Packaging Configuration (fastforge)

Spotube uses fastforge as the packaging driver and stores its Windows packaging config under:

./windows/packaging/exe/make_config.yaml

The config is intentionally small because the heavy lifting happens in the Inno script template:

app_id: <RANDOM GUID>
publisher: <YOUR NAME OR COMPANY>
publisher_url: https://yourwebsite.com
display_name: <YOUR APP NAME>
create_desktop_icon: true
install_dir_name: YourAppNameWithoutSpaces
script_template: inno_setup.iss
locales:
  - en

This config injects identity details, publisher URLs, and icon behavior into the installer template. You can expand locales to ship translated installer UIs later.

The Inno Setup Template

The real power is in the installer template:

spotube/windows/packaging/exe/inno_setup.iss contributed by the community (Thanks to @olivier2)

Fastforge takes a templated Inno script (using Jinja-like tags) so it can fill in build-time values.

Core Setup Metadata

To learn in-depth about InnoScript and how it works, check out the Inno Setup documentation.

Use the InnoSetup VSCode Extension for syntax highlighting and IntelliSense in VSCode or similar IDEs/code-editor.

[Setup]
AppId={{APP_ID}}
AppVersion={{APP_VERSION}}
AppName={{DISPLAY_NAME}}
AppPublisher={{PUBLISHER_NAME}}
AppPublisherURL={{PUBLISHER_URL}}
DefaultDirName={autopf}\{{DISPLAY_NAME}}
OutputBaseFilename={{OUTPUT_BASE_FILENAME}}
SetupIconFile={{SETUP_ICON_FILE}}
WizardStyle=modern
WizardSmallImageFile="..\\..\\assets\\branding\\logo.bmp"

The script keeps branding consistent and ensures Windows “Programs & Features” metadata is correct.

Installer Tasks

[Tasks]
Name: "desktopicon"; Description: "{cm:CreateDesktopIcon}"; Flags: checkedonce
Name: "launchAtStartup"; Description: "{cm:AutoStartProgram,{{DISPLAY_NAME}}}"; Flags: unchecked

Users get a desktop icon option and an optional “launch on startup” task. The defaults are driven by fastforge variables.

Files & Shortcuts

[Files]
Source: "{{SOURCE_DIR}}\\*"; DestDir: "{app}"; Flags: ignoreversion recursesubdirs createallsubdirs

[Icons]
Name: "{autoprograms}\\{{DISPLAY_NAME}}"; Filename: "{app}\\{{EXECUTABLE_NAME}}"
Name: "{autodesktop}\\{{DISPLAY_NAME}}"; Filename: "{app}\\{{EXECUTABLE_NAME}}"; Tasks: desktopicon
Name: "{userstartup}\\{{DISPLAY_NAME}}"; Filename: "{app}\\{{EXECUTABLE_NAME}}"; Tasks: launchAtStartup

All app files are copied into {app}, with shortcuts created for Start Menu, Desktop, and Startup.

Runtime Dependencies

We include the InnoDependencyInstaller helper so prerequisites install automatically:
It supports a wide range of dependencies, but for Flutter Windows, the most common one is the VC++ 2015-2022 runtime.

#define public Dependency_Path_NetCoreCheck "..\\..\\build\\inno-depend\\dependencies\\"
#include "..\\..\\build\\inno-depend\\CodeDependencies.iss"

[Code]
function InitializeSetup: Boolean;
begin
  Dependency_AddVC2015To2022;
  Result := True;
end;

This pulls in the VC++ 2015-2022 runtime at install time, which is required for most Flutter Windows builds.

The entire inno_setup.iss is quite huge. We suggest you give it a look at or even copy it from our repository as it'll work for 90% of Flutter desktop apps without modification.

Building the app and packaging the installer

Pre-requisites:

Install Inno Setup on your Windows machine
Ensure iscc (Inno Setup Compiler) is in your PATH
Run git clone https://github.com/DomGries/InnoDependencyInstaller build/inno-depend to clone the InnoDependencyInstaller into the expected location
Install fastforge globally via dart pub global activate fastforge

Then, from the root of the Spotube repo, run:

$ fastforge package --platform=windows --targets=exe --skip-clean

This will build the Flutter Windows app, generate the Inno installer, and place it in dist/<version from pubspec.yaml>/<your-app-name>-windows-setup.exe. You can distribute this .exe directly, and users can actually run it to install the app. Most developers stop here and share the installer as-is, which is perfectly fine for small projects or internal distribution.

But for a more polished distribution, we wrap it in a Chocolatey package.

Chocolatey Packaging Structure

Once the installer exists, Spotube wraps it as a Chocolatey package from:

./choco-struct/

The structure looks like this:

choco-struct/
  spotube.nuspec
  tools/
    chocolateyinstall.ps1
    chocolateyuninstall.ps1
    VERIFICATION.txt
    LICENSE.txt

The Nuspec Manifest

<your app>.nuspec defines package metadata that will be displayed on Chocolatey and used for versioning. Spotube’s spotube.nuspec looks like this:

<?xml version="1.0" encoding="utf-8"?>
<!-- Do not remove this test for UTF-8: if “Ω” doesn’t appear as greek uppercase omega letter
enclosed in quotation marks, you should use an editor that supports UTF-8, not this one. -->
<package xmlns="http://schemas.microsoft.com/packaging/2015/06/nuspec.xsd">
  <metadata>
    <!-- == PACKAGE SPECIFIC SECTION == -->
    <id>spotube</id>
    <version>1.0.0</version>
    <packageSourceUrl>https://github.com/KRTirtho/spotube/tree/master/choco-struct</packageSourceUrl>
    <owners>Kingkor Roy Tirtho</owners>
    <!-- ============================== -->

    <!-- == SOFTWARE SPECIFIC SECTION == -->
    <title>spotube (Install)</title>
    <authors>Kingkor Roy Tirtho</authors>
    <projectUrl>https://spotube.krtirtho.dev</projectUrl>
    <iconUrl>
      https://rawcdn.githack.com/KRTirtho/spotube/7edb0bb834eb18c05551e30a891720a6abf53dbe/assets/branding/spotube-logo.png</iconUrl>
    <copyright>2022 Spotube</copyright>
    <!-- If there is a license Url available, it is required for the community feed -->
    <licenseUrl>https://github.com/KRTirtho/spotube/blob/master/LICENSE</licenseUrl>
    <requireLicenseAcceptance>true</requireLicenseAcceptance>
    <projectSourceUrl>https://github.com/KRTirtho/spotube</projectSourceUrl>
    <docsUrl>https://spotube.krtirtho.dev</docsUrl>
    <bugTrackerUrl>https://github.com/KRTirtho/spotube/issues/new</bugTrackerUrl>
    <tags>spotube music audio youtube flutter</tags>
    <summary>🎧 Open source music client that doesn't require Premium nor uses Electron! Available
      for both desktop &amp; mobile! </summary>
    <description>
      Spotube is a Flutter based lightweight music client. It utilizes the power
      of music metadata providers &amp; Youtube's public API &amp; creates a hazardless, performant
      &amp; resource
      friendly User Experience

      # Features
      - Open source/libre software
      - Anonymous/guest login
      - Cross platform support
      - No telemetry, diagnostics or user data collection
      - Lightweight &amp; resource-friendly
      - Native performance (Thanks to Flutter+Skia)
      - Playback control is done locally instead of on the server
      - Small size &amp; less data usage
      - No ads since it uses all public &amp; free APIs (It is still recommended
      to support the creators by watching/liking/subscribing to the artists' YouTube channels or
      liking their tracks on different music platforms.)
      - Time synced lyrics
      - Downloadable tracks
    </description>
    <releaseNotes>https://github.com/KRTirtho/spotube/releases/tag/v1.0.0</releaseNotes>
  </metadata>
  <files>
    <file src="tools\**" target="tools" />
  </files>
</package>

The version placeholder is replaced during the Windows build process (see the automation section below).

Install Script (Inno Setup Silent)

Chocolatey runs tools/chocolateyinstall.ps1, which uses the Inno Setup silent install flags:

$fileLocation = Join-Path $toolsDir '<your-app-name>-windows-setup.exe'
# Inno Setup silent install arguments
$packageArgs = @{
  fileType      = 'exe'
  file          = $fileLocation
  silentArgs    = '/VERYSILENT /SUPPRESSMSGBOXES /NORESTART /SP-'
  validExitCodes= @(0)
}

# This is a Chocolatey helper function that runs the installer with the specified arguments
Install-ChocolateyInstallPackage @packageArgs

To learn more about Chocolatey packaging and the available helper functions, check out the Chocolatey Packaging Tutorial.

Uninstall Script

The uninstall uses the registry to discover the Inno uninstall entry and runs it silently:

[array]$key = Get-UninstallRegistryKey -SoftwareName '<your-app-name>*'

if ($key.Count -eq 1) {
  $packageArgs['file'] = "$($_.UninstallString)"
  Uninstall-ChocolateyPackage @packageArgs
}

Here you can see we're quite literally embedding the app binary (installer) inside the Chocolatey package. Because our application size is quite small < 30MB, so we embed it. But it is highly recommended that you host the installer on a CDN or your own server and use the url parameter instead of file in Install-ChocolateyInstallPackage to avoid hitting Chocolatey’s package size limits and to allow for faster updates without needing to republish the entire package.

Following is the example of using url instead of file:

$packageName = 'windirstat'
$fileType = 'exe'
# Using url instead of embedding the installer in the package
$url = 'http://prdownloads.sourceforge.net/windirstat/windirstat1_1_2_setup.exe'
$silentArgs = '/S'

Install-ChocolateyPackage $packageName $fileType $silentArgs $url

Verification File

Chocolatey moderators require a hash check for embedded binaries. Spotube injects SHA256 into:

tools/VERIFICATION.txt

SHA256     0a05b56727f5c72a6d608dbd320c8fd119eb5030f20253127889c7306d797cf4  tools\Spotube-windows-x86_64-setup.exe

That hash is generated after the .exe is built. You can generate it manually with:

Get-FileHash -Path "dist\<version>\<your-app-name>-windows-setup.exe" -Algorithm SHA256

The Automated Build Flow

At Spotube, we created a CLI that has a dedicated Windows build command:

spotube/cli/commands/build/windows.dart

This command:

Replaces %{{SPOTUBE_VERSION}}% placeholders in nuspec and verification files
Builds the installer via fastforge
Renames the output installer to Spotube-windows-x86_64-setup.exe
Calculates SHA256 and injects it into VERIFICATION.txt
Packs the Chocolatey .nupkg

The core fastforge invocation:

fastforge package --platform=windows --targets=exe --skip-clean

And the Chocolatey packaging step:

choco pack choco-struct/spotube.nuspec --outputdirectory dist

Publishing to Chocolatey

Once you have the .nupkg, publishing is just the standard Chocolatey flow:

choco push dist/<your-app-name>-windows.nupkg --source https://push.chocolatey.org/

Make sure the package version matches your app’s version. Spotube derives that from pubspec.yaml (version: 5.1.1+44) and strips the build number for Chocolatey compatibility.

Practical Checklist

Ensure pubspec.yaml has the correct semantic version
Confirm inno_setup.iss has your branding, icons, and app ID
Build with fastforge package --platform=windows --targets=exe
Verify Spotube-windows-x86_64-setup.exe exists in dist/
Check tools/VERIFICATION.txt for updated SHA256
Run choco pack and test install locally
Push the .nupkg to Chocolatey

Flutter desktop apps feel native only when distribution is native too. A clean Inno installer paired with Chocolatey gives your users a Windows-first experience: a proper installer, silent updates, and easy uninstalls.

Keep an eye out for the next article where we’ll cover WinGet packaging and distribution, which is another major channel for Windows apps.

Follow the full 'Flutter Desktop Mastery' series on the official blog: https://spotube.krtirtho.dev/blog/flutter-desktop-mastery/part-3-windows-inno-installer-packaging-and-publishing-to-chocolatey/

Flutter Desktop Mastery 2: System Tray & Local Notifications

Kingkor Roy Tirtho — Fri, 15 May 2026 16:01:42 +0000

The system tray is essential for a lot of desktop apps that needs to run in the background. But due to Flutter’s limited desktop support, again the Flutter Desktop Community has saved us with another much needed plugin.

At Spotube, users expect to control playback from the tray, minimize the app while keeping it running, and have quick access to essential features without opening the main window.

So, we implement a reactive system tray that stays in sync with the app's state. We use the tray_manager package to accomplish that.

Introducing the Dependencies

In Spotube's pubspec.yaml, we include:

dependencies:
  tray_manager: <latest>
  local_notifier: <latest>
  # we use it for state management
  hooks_riverpod: <latest>
  window_manager: <latest>

The tray_manager package provides cross-platform system tray integration, while local_notifier handles desktop notifications.

Building the Tray Menu

Our tray menu is built reactively using Riverpod providers.

In lib/provider/tray_manager/tray_menu.dart:

import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:tray_manager/tray_manager.dart';
import 'package:window_manager/window_manager.dart';

final trayMenuProvider = Provider((ref) {
//..... internal logic
// ref.watch() to other providers that update this
// provider on change

// This is the part that you need to understand.
  return Menu(
    items: [
      MenuItem(
        label: "Show/Hide Window",
        onClick: (menuItem) async {
          // We use window_manager plugin to show or hide the window
          if (await windowManager.isVisible()) {
            await windowManager.hide();
          } else {
            await windowManager.focus();
            await windowManager.show();
          }
        },
      ),
      MenuItem.separator(), // A special type of menu item that creates a divider between other menu items
      // Play/Pause button that adapts to current state
      MenuItem(
        label: isPlaying ? "Pause" : "Play",
        // You can disable (gray out) an option in the menu
        disabled: !isPlaybackPlaying,
        onClick: (menuItem) async {
          // .. we are handling play/pause logic here
        },
      ),
      MenuItem(
        label: "Next",
        disabled: !isPlaybackPlaying,
        onClick: (menuItem) {
          // ... next handle logic
        },
      ),
      MenuItem(
        label: "Previous",
        disabled: !isPlaybackPlaying,
        onClick: (menuItem) {
          // ... previous handle logic
        },
      ),
      // Submenu for advanced playback controls
      MenuItem.submenu(
        label: "Playback",
        submenu: Menu(
          items: [
            // Repeat mode toggle
            MenuItem(
              label: "Repeat",
              // Checked is a special boolean that can be used
              // to show a check next to an item in the menu
              checked: isLoopOne,
              onClick: (menuItem) {
                // Logic for repeat
              },
            ),
            // Shuffle toggle
            MenuItem(
              label: "Shuffle",
              checked: isShuffled,
              onClick: (menuItem) {
                // Logic for shuffle
              },
            ),
            MenuItem.separator(),
            MenuItem(
              label: "Stop",
              onClick: (menuItem) {
                // Logic for stop
              },
            ),
          ],
        ),
      ),
      MenuItem.separator(),
      MenuItem(
        label: "Quit",
        onClick: (menuItem) {
          exit(0); // Closes the program
        },
      ),
    ],
  );
});

Key features of our tray menu:

Reactive state: Menu items update when playback state changes
Context-aware labels: "Play" vs "Pause" adapts to current state
Disabled items: Playback controls are disabled when no track is loaded
Checked items: Repeat and Shuffle show their current state with checkmarks
Organized submenu: Advanced controls grouped under "Playback"

Platform-Aware Tray Manager

The system tray behaves differently on Windows vs macOS/Linux.

In lib/provider/tray_manager/tray_manager.dart:

class SystemTrayManager with TrayListener {
  final Ref ref;
  final bool enabled;

  SystemTrayManager(
    this.ref, {
    required this.enabled,
  }) {
    initialize();
  }

  Future<void> initialize() async {
    if (!kIsDesktop) return;

    if (enabled) {
      // Set platform-specific tray icon
      await trayManager.setIcon(
        kIsWindows
            ? 'assets/branding/spotube-logo.ico'  // .ico for Windows
            : kIsFlatpak
                ? 'com.github.KRTirtho.Spotube'  // App ID for Flatpak
                : 'assets/branding/spotube-logo.png',  // PNG for others
      );
      // Register this object as a listener for tray events
      trayManager.addListener(this);
    } else {
      // Clean up when tray is disabled
      await trayManager.destroy();
    }
  }

  void dispose() {
    trayManager.removeListener(this);
  }

  // Handle left-click on tray icon
  @override
  onTrayIconMouseDown() {
    if (kIsWindows) {
      // Windows convention: left-click shows the window
      windowManager.show();
    } else {
      // macOS/Linux convention: left-click shows context menu
      trayManager.popUpContextMenu();
    }
  }

  // Handle right-click on tray icon
  @override
  onTrayIconRightMouseDown() {
    if (!kIsWindows) {
      // macOS/Linux: right-click shows the window
      windowManager.show();
    } else {
      // Windows: right-click shows context menu
      trayManager.popUpContextMenu();
    }
  }
}

Platform differences we handle:

Icon format: Windows requires .ico, Linux/Flatpak use PNG or app ID strings
Click behavior: Windows expects left-click to open, macOS/Linux expects right-click
Listener pattern: We implement the TrayListener interface to receive tray events

The Tray Manager Provider

Our Riverpod provider ties everything together:

final trayManagerProvider = Provider(
  (ref) {
    // Watch user preference for showing tray icon
    final enabled = ref.watch(
      userPreferencesProvider.select((s) => s.showSystemTrayIcon),
    );

    // Update tray menu reactively whenever app state changes
    ref.listen(trayMenuProvider, (_, menu) {
      if (!enabled || !kIsDesktop) return;
      trayManager.setContextMenu(menu);
    });

    // Create and manage the tray manager instance
    final manager = SystemTrayManager(
      ref,
      enabled: enabled,
    );

    // Clean up when provider is disposed
    ref.onDispose(manager.dispose);

    return manager;
  },
);

Why this pattern is powerful:

Reactive updates: When some state (for Spotube, audio) changes (e.g. play/pause), the menu updates automatically
User control: Users can toggle tray icon from settings
Lifecycle management: Proper cleanup with ref.onDispose
Single source of truth: Audio player state is the source, tray menu is computed from it

Initializing the Tray in Your App

In your root app widget, initialize the tray manager early:

class Spotube extends HookConsumerWidget {
  @override
  Widget build(BuildContext context, ref) {
    // Initialize tray manager
    ref.listen(trayManagerProvider, (_, __) {});

    // ... rest of your app
  }
}

Desktop Notifications 🔔

Desktop notifications inform users about important events even when the app window is hidden or minimized. At Spotube, we use the local_notifier package to show native desktop notifications.

Initializing Local Notifications

In your lib/main.dart, initialize the notification system for desktop:

Future<void> main(List<String> rawArgs) async {
  final widgetsBinding = WidgetsFlutterBinding.ensureInitialized();

  if (kIsDesktop) {
    // Initialize local notifier with app name
    // This name appears in system notification settings
    await localNotifier.setup(appName: "Spotube");

    // Initialize other desktop services
    await WindowManagerTools.initialize();
  }

  // ... rest of initialization
}

The Minimize to Tray Notification

When users minimize Spotube to the system tray, we show a notification to confirm the app is still running. This is handled in lib/hooks/configurators/use_close_behavior.dart:

import 'package:local_notifier/local_notifier.dart';

// This notification is created once and reused multiple times
final closeNotification = !kIsDesktop
    ? null
    : (LocalNotification(
        title: "'Spotube',"
        body: 'Running in background. Minimized to System Tray',
        actions: [
          LocalNotificationAction(text: 'Close The App'),
        ],
      )..onClickAction = (value) {
        // User clicked "Close The App" action
        exit(0);
      });

Breaking this down:

Desktop-only: The notification is only created on desktop platforms
Nullable: On mobile, it's null, preventing crashes
Callback: onClickAction is invoked when the user clicks the notification action
Reusable: We create it once and call show() multiple times

Showing the Notification

When the user closes the window and has "minimize to tray" enabled:

void useCloseBehavior(WidgetRef ref) {
  useWindowListener(
    onWindowClose: () async {
      final preferences = ref.read(userPreferencesProvider);

      if (preferences.closeBehavior == CloseBehavior.minimizeToTray) {
        // Hide the window
        await windowManager.hide();

        // Show notification that app is still running
        closeNotification?.show();
      } else {
        // Close completely
        exit(0);
      }
    },
  );
}

This notification gives users confidence that their music will keep playing and shows them how to close the app if needed.

Are you curious about this weird way of writing logical function? These look similar to react-hook, aren’t they? Actually, at Spotube, to reduce boilerplate and easier life-cycle handling of widgets, we use flutter_hooks package that is basically react-hooks but for Flutter. You can learn about the custom useWindowListener hook on part 1 of this series.

Building Custom Notifications

You can create notifications for other scenarios. Here's a pattern for doing it safely:

void showTrackChangeNotification(Track track) {
  if (!kIsDesktop) return;  // Only on desktop

  final notification = LocalNotification(
    title: "'Now Playing',"
    body: '${track.name} • ${track.artist}',
    silent: false,  // Play system sound
  );

  notification.show();
}

void showDownloadCompleteNotification(String fileName) {
  if (!kIsDesktop) return;

  final notification = LocalNotification(
    title: "'Download Complete',"
    body: fileName,
    actions: [
      LocalNotificationAction(text: 'Open Folder'),
    ],
  );

  notification.onClickAction = (value) {
    // Open the downloads folder
    openFileExplorer(downloadPath);
  };

  notification.show();
}

Best practices:

Always check kIsDesktop: Prevents crashes on mobile
Provide meaningful titles and bodies: Users should understand what happened
Use actions sparingly: Notification actions are powerful but can be confusing
Avoid notification spam: Don't show notifications for every minor event

Putting It All Together: The Complete Desktop Experience

Here's how window management, system tray, and notifications work together in Spotube's initialization:

class MainApp extends HookConsumerWidget {
  @override
  Widget build(BuildContext context, ref) {
    // Make sure run this in the root app to Setup system tray with reactive menu
    // Riverpod providers are lazy, so we need to listen to it here to make sure it's initialized
    ref.listen(trayManagerProvider, (_, __) {});

    return ShadcnApp.router(
      // ... app configuration
    );
  }
}

The user flow:

User clicks close button → useCloseBehavior intercepts
Close preference checked → If "minimize to tray" is enabled...
Window hides → windowManager.hide()
Notification shows → User sees "Running in background"
User interacts with tray → Platform-specific behavior triggers
- Windows: Left-click shows window
- macOS/Linux: Right-click shows window
Tray menu displays → Reactive menu with current playback state
User controls playback → Menu items trigger audio player actions
Menu updates → State changes reflect in next menu open

This seamless integration is what makes Spotube feel like a native desktop application.

Happy building! 🚀

Follow the full 'Flutter Desktop Mastery' series on the official blog: https://spotube.krtirtho.dev/blog/flutter-desktop-mastery/part-2-system-tray-local-notifications/

Flutter Desktop Mastery 1: Window Management

Kingkor Roy Tirtho — Fri, 15 May 2026 15:56:18 +0000

There’s no debate that Flutter’s desktop support is very limited. And the Flutter community actually did an amazing job creating an ecosystem of packages to make Flutter Desktop production ready.

Building a professional-grade desktop application with Flutter requires more than just writing Dart code. Here at Spotube, we've spent years perfecting the craft of cross-platform desktop development, tackling everything from window management to system integration to multi-platform packaging. This series of article breaks down the technical decisions and implementation patterns that make Spotube a production-ready desktop application. We’ll focus on desktop specific features like Window Management, System Tray support and Desktop Notifications

1. Window Management & Lifecycle 🪟

At Spotube, window management is one of the most critical aspects of the desktop experience. We use the window_manager package to give us fine-grained control over window behavior across platforms.

Initialization & Configuration

At Spotube, we always create a wrapper for external libraries for easier refactoring and very easy mocking for unit testing.

In lib/services/wm_tools/wm_tools.dart, we initialize the window manager with platform-aware settings. Because windowManager cannot be called in Android, iOS or Web. This will cause exceptions that might crash the app.

We use Singletons Design Pattern for the services and freezed for immutable data classes

import 'dart:convert';
import 'package:flutter/foundation.dart';
import 'package:freezed_annotation/freezed_annotation.dart';
import 'package:shared_preferences/shared_preferences.dart';

part 'wm_tools.freezed.dart';
part 'wm_tools.g.dart';

// Some helper constants. Give emphasis on the kIsWeb constant, it
// must be checked before doing anything with [Platform] object.
// Platform (or more specifically dart:io) is not available on flutter web
final kIsAndroid = kIsWeb ? false : Platform.isAndroid;
final kIsIOS = kIsWeb ? false : Platform.isIOS;
final kIsMobile = kIsAndroid || kIsIOS;

@freezed
class WindowSize with _$WindowSize {
  const factory WindowSize({
    required double height,
    required double width,
    required bool maximized,
  }) = _WindowSize;

  factory WindowSize.fromJson(Map<String, dynamic> json) =>
      _$WindowSizeFromJson(json);
}

Above is our Freezed data class WindowSize which we use to store our Window Size Information. And we must do that to ensure when user resizes the window our app remembers to restore the screen to that size on next startup.

Below is the KVStoreService which we use to save stuff to shared_preferences aka local key-value storage. This is also a Singleton and we use a separate class so we have single source of truth for all our key-value data entry and we don’t make mess using only key strings.

abstract class KVStoreService {
  static SharedPreferences? _sharedPreferences;
  static SharedPreferences get sharedPreferences => _sharedPreferences!;

  static Future<void> initialize() async {
    _sharedPreferences = await SharedPreferences.getInstance();
  }

  static WindowSize? get windowSize {
    final raw = sharedPreferences.getString('windowSize');

    if (raw == null) {
      return null;
    }
    return WindowSize.fromJson(jsonDecode(raw));
  }

  static Future<void> setWindowSize(WindowSize value) async =>
      await sharedPreferences.setString(
        'windowSize',
        jsonEncode(
          value.toJson(),
        ),
      );
}

Now finally, this is our actual WindowManagerTools singleton service. windowManager is also a singleton from the window_manager package because currently Flutter only has a single window support.

class WindowManagerTools with WidgetsBindingObserver {
    // Classic/idiomatic Dart way of implementing singletons
  static WindowManagerTools? _instance;
  static WindowManagerTools get instance => _instance!;
  // We make the constructor private
  WindowManagerTools._();

    // This function must be called in the main.dart's main() function.
  static Future<void> initialize() async {
    await windowManager.ensureInitialized();
    _instance = WindowManagerTools._();

    // Adding this WindowManagerTools singleton as a WidgetsBinding observer
    // to recieve life-cycle updates when window is resized or moved
    WidgetsBinding.instance.addObserver(instance);

    await windowManager.waitUntilReadyToShow(
      const WindowOptions(
        title: "\"Spotube\","
        backgroundColor: Colors.transparent,
        // minimum size must be set otherwise users can shrink the windows into a
        // single pixel. I don't think anyone wants add responsiveness down to
        // 1 pixel lmao.
        minimumSize: Size(300, 700),
        titleBarStyle: TitleBarStyle.hidden, // This hides the titlebar
        // Opens the app in Center of the Monitor/screen
        center: true,
      ),
      () async {
        // Restoring window size
        final savedSize = KVStoreService.windowSize;
        await windowManager.setResizable(true);

        if (savedSize?.maximized == true &&
            !(await windowManager.isMaximized())) {
          await windowManager.maximize();
        } else if (savedSize != null) {
          await windowManager.setSize(Size(savedSize.width, savedSize.height));
        }

        await windowManager.focus();
        await windowManager.show();
      },
    );
  }

  // To ignore same size events and avoid unnecessary resizing operations
  Size? _prevSize;

    // This is why we extended from WidgetsBindingObserver which gives us 
    // these life-cycle methods that we can listen to
  @override
  void didChangeMetrics() async {
    super.didChangeMetrics();
    // We are ignoring mobile and web platforms
    if (kIsMobile || kIsWeb) return;

    // windowManager.getSize gets the current size of the Window
    final size = await windowManager.getSize();
    final windowSameDimension =
        _prevSize?.width == size.width && _prevSize?.height == size.height;

    if (windowSameDimension || _prevSize == null) {
      _prevSize = size;
      return;
    }
    final isMaximized = await windowManager.isMaximized();
    await KVStoreService.setWindowSize(
      WindowSize(
        height: size.height,
        width: size.width,
        maximized: isMaximized,
      ),
    );
    _prevSize = size;
  }
}

Key takeaways:

TitleBarStyle.hidden: We hide the native title bar because we implement a custom one in Dart (more on this later)
Window size persistence: We save and restore window dimensions, including maximized state
Minimum size constraint: Prevents UI breakdown on very small windows
Observer pattern: By extending WidgetsBindingObserver, we listen to window resize events

Multi-window can be implemented through desktop_multi_window package but that is not the focus of this article.

Handling Close Behavior

Here's where Spotube excels, we give users control over what happens when they click the close button. In lib/hooks/configurators/use_close_behavior.dart:

void useCloseBehavior(WidgetRef ref) {
  useWindowListener(
    onWindowClose: () async {
      final preferences = ref.read(userPreferencesProvider);
      if (preferences.closeBehavior == CloseBehavior.minimizeToTray) {
        await windowManager.hide();
        closeNotification?.show();
      } else {
        exit(0);
      }
    },
  );
}

This allows users to either:

Close completely - Exit the app immediately
Minimize to system tray - Keep audio playing in the background

This is set in lib/main.dart:

if (kIsDesktop) {
  await windowManager.setPreventClose(true);
  // ... other initialization
}

By setting setPreventClose(true), we intercept the close event before it propagates to the OS, giving us control over the behavior.

Now if you know, you might be thinking the above code looks like React as it is clearly react-hooks, right?? You got exactly right. Spotube uses flutter_hooks package in combination with riverpod’s hooks_riverpod package. This reduces insane Flutter boilerplate code and helps focus on things that matter more. The useWindowListener is also a custom hook that implement window_manager’s WindowListener interface and converts it into a simple callback based hook that can be used anywhere.
Take a look at: lib\hooks\configurators\use_window_listener.dart for understanding what we’re doing.

Platform-Specific Window Fixes

In lib/hooks/configurators/use_fix_window_stretching.dart handles a quirky Windows issue where the Window content of the initial page stretches and causes weird layout that is not something a user should see.

The bug is still not fixed to this day and is actually caused by the Flutter Window embedder in Windows that does not provide proper size information on the first frame

The GitHub issue: leanflutter/window_manager#464

To fix this, a simple fix was to resize the window by 1 pixel and that fixed the issue, a workaround.

void useFixWindowStretching() {
  useEffect(() {
    if (!kIsWindows) return;
    WidgetsBinding.instance.addPostFrameCallback((_) async {
      await Future.delayed(const Duration(milliseconds: 100), () {
        windowManager.getSize().then((Size value) {
          windowManager.setSize(
            Size(value.width + 1, value.height + 1),
          );
        });
      });
    });
    return null;
  }, []);
}

This must be called in all the route pages that can be an initial page. We call it in our root App instance.

2. Custom Title Bar Implementation 🎨

Since we hide the native title bar, we implement a fully custom one. This gives us complete control over appearance while maintaining platform-specific behaviors.

The TitleBar Widget

TitleBar is an AppBar replacement from Flutter Material. This widget integrates window_manager and necessary paddings, gesutres and window buttons when the platform is desktop.

final kTitlebarVisible = kIsWindows || kIsLinux;

/// We're using [HookConsumerWidget] which is a widget from hooks_riverpod package
/// that allows us to use hooks and also consume providers.
///
/// The [PreferredSizeWidget] interface as it is required by the Scaffold's appBar property,
/// which allows us to specify the preferred size of the title bar.
class TitleBar extends HookConsumerWidget implements PreferredSizeWidget {
  final bool automaticallyImplyLeading;
  final List<Widget> trailing;
  final List<Widget> leading;
  final Widget? child;
  final Widget? title;
  final Widget? header; // small widget placed on top of title
  final Widget? subtitle; // small widget placed below title
  final bool
      trailingExpanded; // expand the trailing instead of the main content
  final AlignmentGeometry alignment;
  final Color? backgroundColor;
  final Color? foregroundColor;
  final double? leadingGap;
  final double? trailingGap;
  final EdgeInsetsGeometry? padding;
  final double? height;
  final bool useSafeArea;
  final double? surfaceBlur;
  final double? surfaceOpacity;

  const TitleBar({
    super.key,
    this.automaticallyImplyLeading = true,
    this.trailing = const [],
    this.leading = const [],
    this.title,
    this.header,
    this.subtitle,
    this.child,
    this.trailingExpanded = false,
    this.alignment = Alignment.center,
    this.padding,
    this.backgroundColor,
    this.foregroundColor,
    this.leadingGap,
    this.trailingGap,
    this.height,
    this.surfaceBlur,
    this.surfaceOpacity,
    this.useSafeArea = false,
  });

  // Enabling dragging the window by dragging the titlebar support
  void onDrag(WidgetRef ref) {
    // At Spotube, we even allow users to use a customer titlebar or native titlebar
    // Not every app needs to do this, but our philosophy is to give users the freedom
    // to customize their experience as much as possible
    final systemTitleBar =
        ref.read(userPreferencesProvider.select((s) => s.systemTitleBar));

    if (kIsDesktop && !systemTitleBar) {
      windowManager.startDragging(); // a simple API to start dragging the window when the user drags the titlebar
    }
  }

  @override
  Widget build(BuildContext context, ref) {
    final hasLeadingOrCanPop = leading.isNotEmpty || Navigator.canPop(context);
    // We need to use useRef here to store the last clicked 
    // time for double click detection. Because drag gesture
    // disables double click.
    final lastClicked = useRef<int>(DateTime.now().millisecondsSinceEpoch);

    return SizedBox(
      height: height ?? (48 * context.theme.scaling),
      child: LayoutBuilder(
        builder: (context, constraints) {
          final hasFullscreen =
              MediaQuery.sizeOf(context).width == constraints.maxWidth;

          final canPop = leading.isEmpty &&
              automaticallyImplyLeading &&
              (Navigator.canPop(context) || context.watchRouter.canPop());

          return GestureDetector(
            onHorizontalDragStart: (_) => onDrag(ref),
            onVerticalDragStart: (_) => onDrag(ref),
            onTapDown: (details) async {
              // If the user has enabled system title bar, we don't need to handle double click to maximize the window
              final systemTitlebar = ref.read(
                  userPreferencesProvider.select((s) => s.systemTitleBar));
              if (!kIsDesktop || systemTitlebar) return;

              // Detect double click to maximize/unmaximize the window
              int currMills = DateTime.now().millisecondsSinceEpoch;

              if ((currMills - lastClicked.value) < 500) {
                if (await windowManager.isMaximized()) {
                  await windowManager.unmaximize();
                } else {
                  await windowManager.maximize();
                }
              } else {
                lastClicked.value = currMills;
              }
            },
            child: AppBar(
              leading: Row(
                mainAxisSize: MainAxisSize.min,
                children: canPop ? [const BackButton()] : leading
              ),
              actions: [
                ...trailing,
                // These are the custom titlebar buttons
                Align(
                  alignment: Alignment.topRight,
                  child:
                      WindowTitleBarButtons(foregroundColor: foregroundColor),
                ),
              ],
              title: "title,"
              header: header,
              subtitle: "subtitle,"
              trailingExpanded: trailingExpanded,
              alignment: alignment,
              padding: padding ?? EdgeInsets.zero,
              backgroundColor: backgroundColor,
              leadingGap: leadingGap,
              trailingGap: trailingGap,
              height: height ?? (48 * context.theme.scaling),
              surfaceBlur: surfaceBlur,
              surfaceOpacity: surfaceOpacity,
              useSafeArea: useSafeArea,
              child: child,
            ).withPadding(
                // This is where we handle macOS's titlebar buttons
                // On macOS, we can't have custom titlebar buttons, so we need to make
                // sure there is space for the platform buttons
                left: kIsMacOS && hasFullscreen && hasLeadingOrCanPop ? 65 : 0),
          );
        },
      ),
    );
  }

  // The preferred size of the title bar is 48 by default, but it can be customized by passing a height parameter.  
  @override
  Size get preferredSize => Size.fromHeight(height ?? 48);
}

Key features:

Drag to move: windowManager.startDragging() lets users drag the title bar to move the window
Double-click to maximize: Just like native title bars, double-clicking toggles maximize state
Platform-aware macOS padding: On macOS with fullscreen, we add extra padding for the traffic light buttons:
```
.withPadding(left: kIsMacOS && hasFullscreen && hasLeadingOrCanPop ? 65 : 0)
```

TitleBar Buttons

You can see the WindowTitleBarButtons buttons in our repository at: **lib\components\titlebar.** It uses windowManager ’s different methods to show/hide, maximize/restore or minimize the application.

import 'package:shadcn_flutter/shadcn_flutter.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:shadcn_flutter/shadcn_flutter_extension.dart';
import 'package:spotube/components/hover_builder.dart';
import 'package:spotube/components/titlebar/titlebar.dart';
import 'package:spotube/components/titlebar/titlebar_icon_buttons.dart';

import 'package:spotube/hooks/configurators/use_window_listener.dart';
import 'package:spotube/provider/user_preferences/user_preferences_provider.dart';
import 'package:spotube/utils/platform.dart';
import 'package:titlebar_buttons/titlebar_buttons.dart';
import 'package:window_manager/window_manager.dart';

class WindowTitleBarButtons extends HookConsumerWidget {
  final Color? foregroundColor;
  const WindowTitleBarButtons({
    super.key,
    this.foregroundColor,
  });

  @override
  Widget build(BuildContext context, ref) {
    final preferences = ref.watch(userPreferencesProvider);
    final isMaximized = useState<bool?>(null);
    const type = ThemeType.auto;

    Future<void> onClose() async {
      await windowManager.close();
    }

        // The useWindowListener we talked about earlier came in handy
    useWindowListener(
      onWindowMaximize: () {
        isMaximized.value = true;
      },
      onWindowUnmaximize: () {
        isMaximized.value = false;
      },
    );

    useEffect(() {
      if (kIsDesktop) {
        windowManager.isMaximized().then((value) {
          isMaximized.value = value;
        });
      }
      return null;
    }, []);

    if (!kTitlebarVisible || preferences.systemTitleBar) {
      return const SizedBox.shrink();
    }

    // Windows specific buttons
    if (kIsWindows) {
      return Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          ShadcnWindowButton(
            icon: MinimizeIcon(color: context.theme.colorScheme.foreground),
            onPressed: windowManager.minimize,
          ),
          if (isMaximized.value != true)
            ShadcnWindowButton(
              icon: MaximizeIcon(color: context.theme.colorScheme.foreground),
              onPressed: () {
                windowManager.maximize();
                isMaximized.value = true;
              },
            )
          else
            ShadcnWindowButton(
              icon: RestoreIcon(color: context.theme.colorScheme.foreground),
              onPressed: () {
                windowManager.unmaximize();
                isMaximized.value = false;
              },
            ),
          HoverBuilder(builder: (context, isHovered) {
            return ShadcnWindowButton(
              icon: CloseIcon(
                color: isHovered
                    ? Colors.white
                    : context.theme.colorScheme.foreground,
              ),
              onPressed: onClose,
              hoverBackgroundColor: const Color(0xFFD32F2F),
            );
          }),
        ],
      );
    }

// These are linux specific buttons
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        DecoratedMinimizeButton(
          type: type,
          onPressed: windowManager.minimize,
        ),
        DecoratedMaximizeButton(
          type: type,
          onPressed: () async {
            if (await windowManager.isMaximized()) {
              await windowManager.unmaximize();
              isMaximized.value = false;
            } else {
              await windowManager.maximize();
              isMaximized.value = true;
            }
          },
        ),
        DecoratedCloseButton(
          type: type,
          onPressed: onClose,
        ),
      ],
    );
  }
}

Windows uses custom in house components that we had to create. And Linux actually uses a package titlebar_buttons which gives accurate titlebar buttons based on dbus config in Linux for different desktop environment, like GTK, Gnome, Cinnamon, KDE etc flavors.

Wondering about shadcn? (Smirk) we don’t use material anymore. Spotube uses shadcn_flutter which is a shadncn implementation in Flutter based on material.

Conclusion: Bringing It All Together

Building professional desktop experiences in Flutter isn't about individual features in isolation, it's about how they work together seamlessly. At Spotube, window management, custom title bars, and platform-specific implementations form the foundation of a polished desktop application.

The key insight we've learned over years of development is this: respect the platform conventions while maintaining a unified codebase. Windows users expect native window buttons and specific click behaviors. macOS users expect traffic light buttons in the right positions. Linux users expect their desktop environment's native styling. By handling these details thoughtfully, we create an application that feels native on each platform, not just a "web app in a window."

What We've Covered

Window Management: Persisting state, handling lifecycle events, and working around platform-specific quirks
Custom Title Bars: Implementing native interactions (drag to move, double-click to maximize) with platform-aware positioning
Platform Integration: Using the right tools and patterns for Windows, macOS, and Linux

Moving Forward

The Flutter community has done remarkable work filling the gaps in Flutter's desktop support. Packages like window_manager, titlebar_buttons, and shadcn_flutter make it possible to build truly professional desktop applications. The patterns we've shared at Spotube, singletons for services, custom hooks for state management, platform-aware configuration, are battle-tested and ready for your own projects.

If you're building a desktop app with Flutter, remember: the small details matter. Users notice when windows restore their previous size, when title bars respond naturally to interactions, and when your app feels like it belongs on their platform.

Happy building! 🚀

Follow the full 'Flutter Desktop Mastery' series on the official blog: https://spotube.krtirtho.dev/blog/flutter-desktop-mastery/part-1-window-management/

It's okay to not to code in your free time in your personal projects

Kingkor Roy Tirtho — Tue, 26 Dec 2023 15:25:21 +0000

Hello! Merry Christmas!

If you’re reading this, you’re probably a developer. There’s a chance you love to code. You love coding so much that even in holidays, you work on your personal projects that you’ll definitely not going to abandon in the next month.

For most of the developers, programming is passion. It’s often a hobby for one that the person can also turn into a profession. 70.42% of developers say they code as a hobby, according to stackoverflow survey

But this hobby + passion + carrier, just like any other profession/leisure work, has its own toll on you. You may think you’re enjoying your personal projects, but it is possible you’re overworking, especially if you’re also a professional programmer. We’ll all like working on new projects that we envision to succeed. But unsurprisingly, many of them are mirages. But at least we can from our mistakes.

Often times, developers create personal projects that solve a problem that the individual and many people are facing in the community. It’s like making a missing piece of a puzzle. These projects most of the time turns into a big open source project. And now all of a sudden you’re a maintainer of an open source project. But this is good. This is something we (excluding you) all want. But do you want it?

Maintaining an Open Source project, doing a job, studying (if you’re a student), facing + implementing + closing feature requests and bug requests, these are tedious work. Also, at this point we become so obsessed with our project that we often neglect health, close ones and even the carrier/studies. So the best way to avoid this is not doing it alone. Ask for help from others. Create a community and a moderation group and share your project with them. It’ll make everything better for everyone.

Take weekly breaks

Personal health is above anything. No passion, profession is not worth more than your life. It’s normal, when we’re passionate about something, we want to do that all the time. But this is when we burned out. Stress and over excitement steers us to worse health. So take a break from this. Separate yourself from your personal projects and if possible your job. Go on vacation or hiking or cycling. Chat with friends in a BBQ party or just enjoy your life.

Take daily breaks

A job, personal projects, studying/parenting altogether makes anyone’s life a hell. So no matter what, make sure to have personal time every day. After a long period of work, don’t just straight go and work on your personal projects. Take some rest, eat and enjoy for a while and then in the remaining 1–2 hours work on those projects. Or if you’re too passionate about your projects, do a part-time job and work on your personal projects in the remaining hours. But make sure your projects are profitable so you won’t be broke.

Conclusion

I know it’s a pretty shitty article. Although I wrote it myself, It's still worse than an AI. But I recently faced burn-outs, stress, exam stress, result stress and a total breakdown basically. The only thing helped me recover was touching the grass and forgetting about this side of my life for a while. Cycling, playing football (soccer) helped me a lot too. And, obviously, a group of good friends.

So go out, forget about programming. And enjoy the remaining days of this terrible year of 2023. Hopefully, 2024 will be better (it usually gets worse when you hope for better next year, so this time I’m hopeless for 2024 tbh)

Support Me

You don’t have to support me, but in case you’re Santa Claus,

Find Me

JavaScript Intl API: The hidden gem of web internationalization

Kingkor Roy Tirtho — Sun, 13 Aug 2023 06:22:53 +0000

Lots of time us web devs try to explore multiple libraries/frameworks for solution to the biggest reason of debt "Internationalization". But we often overlook the default browser APIs and how capable these are. JavaScript's Intl API is one of those hidden gems. If you use Intl half of the time you can avoid those date, currency etc. formatting & parsing libraries which are huge impact on the bundle size sometimes. The advantage is that the API is designed to be locale agnostic so with internationalization we're also getting localization features

Learn the difference between internationalization & localization

Formatting Dates

Who doesn't remember the days of moment.js. Thank God date-fns and dayjs like libs helped us getting of that bundle of latency, Phew! But dates can be tricky to format consistently across different locales and require heavy libraries to do so
So the Intl.DateTimeFormat object saves the day. By specifying locale-specific options, you can even present dates in a format that's both readable and familiar to users:

const date = new Date();
const options = { year: 'numeric', month: 'long', day: 'numeric' };
const formattedDate = new Intl.DateTimeFormat('en-US', options).format(date);
console.log(formattedDate); // Output: August 13, 2023

// or if you give bengali locale
const formattedBnDate = new Intl.DateTimeFormat('bn-BD', options).format(date);
console.log(formattedBnDate); // Output: ১৩ আগস্ট, ২০২৩

Relative Time formatting

Relative times are a better UX. It lets the user know the time in an instant. But formatting relative time is a trouble & datetime libraries provides us with an easy way to do so. But did you know Intl already has an API that does the exact same job & also respects locale. Crazy, right! See this official example from MDN

const rtf1 = new Intl.RelativeTimeFormat('en', { style: 'short', numeric: 'always' });
console.log(rtf1.format(3, 'quarter')); // Expected output: "in 3 qtrs."
console.log(rtf1.format(-1, 'day')); // Expected output: "1 day ago"

const rtf2 = new Intl.RelativeTimeFormat('es', { numeric: 'auto' });
console.log(rtf2.format(2, 'day')); // Expected output: "pasado mañana"

Number Formatting across Locales

Displaying numbers in a way that matches each user's language and cultural norms is crucial. The Intl.NumberFormat object allows you to achieve this effortlessly:

const number = 12345.6789;
const formattedNumber = new Intl.NumberFormat('bn-BD').format(number);
console.log(formattedNumber); // Output: ১২,৩৪৫.৬৭৯

const formattedNumber = new Intl.NumberFormat('ar-SA').format(number);
console.log(formattedNumber); // Output: ١٢٬٣٤٥٫٦٧٩

Currency Formatting

There's libraries that can handle currency formatting. But the Intl.NumberFormat API steps up by providing built-in currency formatting eliminating the need for third party libs:

const amount = 1234.56;
const currency = 'USD';
const formattedCurrency = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: currency
}).format(amount);
console.log(formattedCurrency); // Output: $1,234.56

Pluralization

The rules for pluralization vary across languages, and the Intl.PluralRules object helps you manage this intricacy:

const enOrdinalRules = new Intl.PluralRules("en-US", { type: "ordinal" });

const suffixes = new Map([
  ["one", "st"],
  ["two", "nd"],
  ["few", "rd"],
  ["other", "th"],
]);
const formatOrdinals = (n) => {
  const rule = enOrdinalRules.select(n);
  const suffix = suffixes.get(rule);
  return `${n}${suffix}`;
};

formatOrdinals(0); // '0th'
formatOrdinals(1); // '1st'
formatOrdinals(2); // '2nd'
formatOrdinals(3); // '3rd'
formatOrdinals(4); // '4th'
formatOrdinals(11); // '11th'
formatOrdinals(21); // '21st'
formatOrdinals(42); // '42nd'
formatOrdinals(103); // '103rd'

Believe me before Intl.PluralRules, we needed to utilize a algorithm to stuff like this

Sorting Strings Globally

JavaScript alphanumeric sorting is a jock which everyone knows. The Array.sort works for mostly numbers. For alphanumeric strings (strings that include both numbers & letters) we need to do some manual works before so it acts correctly

For example with sort:

const strings = ['200', '50', 'hundred', 'good'];
strings.sort((a, b) => a.localeCompare(b))

console.log(strings) // 200, 50, good, hundred

To fix this we need Intl.Collator with numeric: true

var  collator  =  new  Intl.Collator('en-US', {numeric:  true});
var  strings  = ['200', '50', 'hundred', 'good'];
strings.sort((a, b) =>  collator.compare(a, b))

console.log(strings) // 50, 200, good, hundred

But i doesn't stop there. Sorting strings can be surprisingly tricky due to varying language rules also. The Intl.Collator object comes to the rescue by ensuring your sorting stays true to the user's locale:

const strings = ['apple', 'banana', 'cherry'];
const collator = new Intl.Collator('es-ES');
const sortedStrings = strings.sort(collator.compare);
console.log(sortedStrings); // Output: [ 'banana', 'cherry', 'apple' ]

Easy Time Zones

Dealing with time zones can be complex, but the Intl.DateTimeFormat API simplifies it:

const date = new Date();
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  timeZoneName: 'short'
};
const formattedDate = new Intl.DateTimeFormat('en-US', options).format(date);
console.log(formattedDate); // Output: August 13, 2023, GMT+2

Embracing User Locale

Understanding your users' preferred language and formatting preferences is key. The Intl.Locale object streamlines this process:

const userLocale = new Intl.Locale(navigator.language);
console.log(userLocale.language); // Output: en
console.log(userLocale.region);   // Output: US

By mastering the Intl API, you can create applications that bridge cultural gaps and resonate with a diverse global audience & fundamentally increases your revenue. I hope this guide provides you with insights that can transform your internationalization efforts into a seamless and user-centric experience.
But for full understanding of the API and mastering it visit the official MDN docs

My socials:

X (Formerly Twitter)
Github
DEVCommunity

Support me & my work

Rust based alternatives for Unix & GNU Terminal Tools (Quick Table)

Kingkor Roy Tirtho — Thu, 20 Oct 2022 16:13:23 +0000

This is the short (Quick Table) article version of https://dev.to/krtirtho/rust-ify-linuxgnumacos-terminal-tools-40c6

Since we’re developers, and we barely have time, so I’m starting this new kind of Article format where instead of traditionally showing tricks and tips or anything in a List order with stupid unneeded description, everything will be inside a Table or be carefully structured

I figured this way, most readers will spend way less time compared to my previous Articles. So I’m starting a never ending series of “Quick Table” articles

Behold the 2-minutes table:

Unix/GNU tools	Rust tools	Short description (Biggest features)
cd	zoxide	remembers which directories you use most frequently, so you can "jump" to them in just a few keystrokes.
ls	exa	uses colors to distinguish file types and metadata. It knows about symlinks, extended attributes, and Git
grep	ripgrep (Dude got humor XD)	line-oriented search tool that recursively searches the current directory for a regex pattern
cat	bat	with syntax highlighting and Git integration and line numbers
top	bottom🙃	customizable cross-platform graphical process/system monitor
sed	sd	uses regex syntax that you already know from JavaScript and Python. Forget about dealing with quirks of sed or awk - get productive immediately. Find & replace expressions are split up, so easy to read and write
cloc	tokei	shows the number of files, total lines within those files and code, comments, and blanks grouped by language
find	fd	has an intuitive syntax and supports Regular expressions (default) and glob-based patterns
du	dust	shows the disk usage more efficiently, fast and in a more organized way
ps	procs	colored and human-readable outputs. Supports Multi-column keyword search. Additionally, it shows TCP/UDP port, read/write throughput, docker container name, more memory information too
bash/zsh/powershell	nushell	thinks files and data as raw streams of text and looks at each input as something with structure and many more

Conclusion

If you like this new format, let me know, so I’ll keep on making more in this way

You can always support me for more 😊

Social

Follow me on:

Rust-ify Linux/GNU/macOS terminal tools

Kingkor Roy Tirtho — Mon, 17 Oct 2022 17:00:31 +0000

Unix tools, generally written in C, are an exceptionally well-designed and maintained tool set for regular day-to-day terminal usage. Although these traditional GNU and Unix amazing, they are nowadays not enough and over 40-50 years old. So those were not designed keeping the modern computers & software in their mind. We need more cool fancier and feature rich tools that save time and also make us look savage

Rust to the saving

Rust, slowly taking place into the realm of modern computing and crazy terminal space, actually has some cool and brilliant solutions for the old GNU and Unix based CLI problems. Although it might sound weird and out of the world, but surprisingly there’s a Rust based equivalent (mostly upgrade) for every single basic CLI (Command Line Interface) tools in Linux/macOS. This kind of thing unseen in the days of computing

Enough goof and trash talk (I hate myself for this), let’s see all gems now

We’ll replace all the native terminal commands with their Rust equivalent using the alias property of the shell

`cd` replacement - Zoxide

A smarter cd command. Supports all major shells.

It remembers which directories you use most frequently, so you can "jump" to them in just a few keystrokes.

So if you go to a directory e.g /home/batman/03842034sakdsuperrmanbadasd21/secret-identity once, the second you can just type z secret-identity it’ll directly navigate to that same directory

So let’s bury cd with zoxide. Just do:

open ~/.bashrc/~/.zshrc/~/. config/fish/config.fish
add alias cd=z at the end of the file and save the file
close and open the terminal or run source <config-file-path>
type cd ./<any-directory> and live happily every after

`ls` replacement - Exa

exa is a modern replacement for the venerable file-listing command-line program ls that ships with Unix and Linux operating systems, giving it more features and better defaults. It uses colors to distinguish file types and metadata. It knows about symlinks, extended attributes, and Git

Now, let’s unlist ls with exa. Just do following:

open ~/.bashrc/~/.zshrc/~/. config/fish/config.fish
add alias ls=exa --icons --colors=always at the end of the file and save the file
close and open the terminal or run source <config-file-path>
type ls <any-directory> and live a colorful life

`grep` replacement - Rip grep (Dude got humor XD)

ripgrep is a line-oriented search tool that recursively searches the current directory for a regex pattern. By default, ripgrep will respect gitignore rules and automatically skip hidden files/directories and binary files. In other word, RIP grep

Now, let’s execute (kill) grep and repalce with ripgrep. Just do following:

Open ~/.bashrc/~/.zshrc/~/. config/fish/config.fish
add alias grep=rg at the end of the file and save the file
close and open the terminal or run source <config-file-path>
Type grep Life <any-file> and … (are you even a human?)

`cat` replacement - Bat

A cat replacement with syntax highlighting and Git integration and line numbers

Cat has nine lives. The cat command has exactly 10 replacement and bat is the 10th attempt at making a better cat (character at)

Now, let's kick off the ungrateful cat and replace it with bat. Just do following:

Open ~/.bashrc/~/.zshrc/~/. config/fish/config.fish
add alias cat=bat at the end of the file and save the file
close and open the terminal or run source <config-file-path>
type cat ./<any-file> and fly out in the night sky and sleep in the day

`top` repalcement - bottom🙃

Yet another cross-platform graphical process/system monitor. It’s a customizable cross-platform graphical process/system monitor for the terminal. No matter what system stats/monitor tool anyone makes/writes, it’d still be better than top

Now, let's remove top from the top and put bottom there

Open ~/.bashrc/~/.zshrc/~/. config/fish/config.fish
add alias top=bottom at the end of the file and save the file
close and open the terminal or run source <config-file-path>
type bottom and find out why Chromes taking the 99% of RAM

See kids, anyone(tool) can go from bottom to top

`sed` replacement - Sd

sd is an intuitive find & replace CLI and the sed butcher. sd uses regex syntax that you already know from JavaScript and Python. Forget about dealing with quirks of sed or awk - get productive immediately. It’s find & replace expressions are split up, which makes them easy to read and write. No more messing with unclosed and escaped slashes

Now, let's replace sed with sd. Just do following:

Open ~/.bashrc/~/.zshrc/~/. config/fish/config.fish
add alias sed=sd at the end of the file and save the file
close and open the terminal or run source <config-file-path>
Example: type echo 'lots((([]))) of special chars' | sed -s '((([])))' '' and you’ll get the output as lots of special chars

`cloc` repalcement - Tokei

Tokei is a program that displays statistics about your code. Tokei will show the number of files, total lines within those files and code, comments, and blanks grouped by language. It’s a great replacement for cloc (count lines of code)

Now, let's count cloc off and use tokei instead. Just do following:

Open ~/.bashrc/~/.zshrc/~/. config/fish/config.fish
add alias cloc=tokei at the end of the file and save the file
close and open the terminal or run source <config-file-path>
type tokei ./ and it’ll output 0 lines of code ‘cause you didn’t write any

`find` replacement - Fd

fd is a program to find entries in your file system. It is a simple, fast and user-friendly alternative to find. While it does not aim to support all of find's powerful functionality, it provides sensible (opinionated) defaults for a majority of use cases.

It has an intuitive syntax: fd PATTERN instead of find -iname '*PATTERN*'. Supports Regular expression (default) and glob-based patterns. Superfast due to parallelized directory traversal. Uses colors to highlight different file types (same as ls). Ignores hidden directories, files & patterns from your.gitignore, by default. AND The command name is 50% shorter than find :-)

Now, let’s forget, find and replace it with fd. Just do following:

Open ~/.bashrc/~/.zshrc/~/. config/fish/config.fish
add alias find=fd at the end of the file and save the file
close and open the terminal or run source <config-file-path>
type find useful-files and forget

`du` repalcement - Dust

du + rust = dust. Like du but more intuitive. dust shows the disk usage more efficiently, fast and in a more organized way

Now, let's throw du to dust and replace it with dust. Just do following:

Open ~/.bashrc/~/.zshrc/~/. config/fish/config.fish
add alias du=dust at the end of the file and save the file
close and open the terminal or run source <config-file-path>
type du and see the reason why your disk space at 69% (I know it’s all Pokémon movies)

`ps` replacement - Procs

procs is a modern replacement for ps. It has colored and human-readable outputs. Supports Multi-column keyword search. Additionally, it shows TCP/UDP port, read/write throughput, docker container name, more memory information too which ps can’t show

Now, lets SIGKILL ps and replace it with procs. Just do following:

Open ~/.bashrc/~/.zshrc/~/. config/fish/config.fish
add alias ps=procs at the end of the file and save the file
close and open the terminal or run source <config-file-path>
type ps and to exit, press q

`bash` repalcement (more like powershell) - Nushell

A new type of shell. It’s an alternative shell, quite different compared to bash, zsh or fish like terminals. Instead of thinking of files and data as raw streams of text, Nu looks at each input as something with structure. For example, when you list the contents of a directory what you get back is a table of rows, where each row represents an item in that directory. These values can be piped through a series of steps, in a series of commands called a 'pipeline'. (~ copied from the official doc)

It supports plugins which interacts with Nushell using JSON-IPC. Plugins are basically binaries available in the path and follows the nu_plugin_* naming convention

Nushell is extremely powerful and flexible and brings organization to the outputs. It structures the output in an intuitive and human-readable way. Nushell is basically the non-corporate open-source terminal, but keeping the UNIX spirit. It’s more like a PowerShell replacement. But in Linux/macOS it shines bright too. It needs more adaptation and updates and let's keep our finger crossed hoping it’ll one day become the top shell of all time

Nushell supports all major platforms (Linux, Windows, macOS). Now install it and then run chsh -s $(which nu)

Without sudo it should work. If you use sudo it will change the shell not for your working user but for root. Finally, log out of your computer and log back in.

What? You want more?

All the configurations at once for replacing the GNU/Unix tools. Put this on ~/.bashrc / ~/.zshrc etc shell configuration files and restart your Terminal

alias cd=z
alias ls=exa --icons --colors=always
alias cat=bat
alias find=fd
alias grep=rg
alias du=dust
alias sed=sd
alias cloc=tokei
alias ps=procs

Well, you can always support me for more 😊

Social

Follow me on:

Fl-Query⚡ for Flutter | Managing async data & mutations in Flutter is like a breeze now🌬️

Kingkor Roy Tirtho — Wed, 13 Jul 2022 09:32:06 +0000

If you’re familiar with Flutter, you’re definitely familiar with FutureBuilder. After all this is the only way you can fetch data in Flutter with proper state, or is it? But you might’ve noticed every time the Widget gets rebuild the Future is run along too unless you declare your Future in initState

But even if you declare your future in initState to avoid reruns across rebuilds it will still rerun when the Widget gets disposed & mounted again. So what’s the solution? Ans: FutureProvider from riverpod or provider

Hold on a sec, but it’s not another riverpod/provider article? No, it's not.

Yeah, to cache your future results or server response in you can use FutureProvider. It can store & distribute the result all across the application without multiple reruns of the same operation. But what happens when the Data becomes expired or stale? What if your app won’t need that data after some time but the data still wasting RAM?

This is where Fl-Query comes to play. It’s an Async Data + Mutation Manager for Flutter that caches, fetches, automatically refetches stale data. Similar to Tanstack Query in the World of web development, but only the concept is implemented & The API is very similar to what Flutter Developers are used to & so it makes everyone feel like home

Enough talk let’s jump to the big part.

What does it offer?

Async data caching & invalidation
Smart & highly configurable refetch mechanism that smartly updates stale/expired data in the background when needed
Declarative way to define asynchronous operations
Garbage Collects Query & Mutation. That means unused queries sitting in the Cache for long time gets automatically removed
Code & data reusability because of persisted data & Query/Mutation Job API
Optimistic updates
Lazy Loading Queries. Run you defined asynchronous task or operation when needed
Zero Configuration out of the box Global Store that no one ever have to touch
Supports both Vanilla Flutter & Flutter Hooks

Let’s see some Code

// A QueryJob is where the Logic of how the data should be 
// fetched can defined. The task callback is a PURE Function 
// & have access to external resources through the second 
// parameter where the first parameter is the queryKey
final successJob = QueryJob<String, void>(
  queryKey: "query-example",
  task: (queryKey, externalData) => Future.delayed(
    const Duration(seconds: 2),
    () =>
        "The work successfully executed. Data: key=($queryKey) value=${
          Random.secure().nextInt(100)
        }",
  ),
);

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // QueryBowlScope creates a Bowl (metaphor for Collection/Store)
    // for all the Queries & Mutations
    return QueryBowlScope(
      child: MaterialApp(
        title: 'Fl-Query Quick Start',
        theme: ThemeData(
          useMaterial3: true,
          primarySwatch: Colors.blue,
        ),
        home: const MyHomePage(),
      ),
    );
  }
}

class BasicExample extends StatelessWidget {
  const BasicExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          "# Basic Query Example",
          style: Theme.of(context).textTheme.headline5,
        ),
        // QueryBuilder Widget provides the expected query 
        // instances through the builder callback based on 
        // the passed job & externalData argument
        QueryBuilder<String, void>(
          job: successJob,
          externalData: null,
          builder: (context, query) {
            if (!query.hasData || query.isLoading || query.isRefetching) {
              return const CircularProgressIndicator();
            }
            return Row(
              children: [
                Text(query.data!),
                ElevatedButton(
                  child: const Text("Refetch"),
                  onPressed: () async {
                    await query.refetch();
                  },
                ), // Text
              ],
            ); // Row
          },
        ), // QueryBuilder
      ],
    );
  }
}

Here’s three key important part in the code

QueryBowlScope: It's the store where all queries & mutations are stored and distributed throughout the application
QueryJob: This what one can use to declare and define the asynchronous operations that retrieves data from server or any other place
QueryBuilder: It creates appropriate Query by using the provided job & provides the Query in the builder method. It is the way the data & the UI connects

QueryBowlScope & QueryJob has many properties that can be configured & changed in a way that best suits your application. Most of their properties are some. But properties defined in QueryBowlScope are global configuration where QueryJob is specific to that very Query

Query External Data

One thing you might’ve notice or have been thinking that the task function is separated from the Widget so how would you use other services, classes, methods or data in it. Simply, how will give inputs to a Query Task or the asynchronous operation? This is where the second parameter of QueryJob’s task callback comes to play. You can use the QueryBuilder’s externalData named argument to pass data to the task callback. You can literally use anything as externalData. Just pass the Type as Type Parameter to QueryJob & QueryBuilder

QueryJob with externalData example:

// This job requires a pre-configured HTTP Client from the http package
// as externalData
// The first Type Parameter is the Type of returned Data & 2nd one is the Type
// of externalData
final anotherJob = QueryJob<String, Client>(
  queryKey: "another-unique-key",
  task: (queryKey, httpClient){
    return httpClient
            .get("https://jsonplaceholder.typicode.com/todos/1")
            .then((response) => response.body);
  }
);

Now let’s use this job inside a Widget

Widget build(BuildContext context) {
    // getting the instance of Client provided by the [provider] package
    final client = Provider.of<Client>(context);

    return QueryBuilder<String, void>(
      job: anotherJob,
      // passing the client as externalData
      externalData: client,
      builder: (context, query) {
        if (!query.hasData || query.isLoading) {
          return const CircularProgressIndicator();
        }
        // remember to always show a fallback widget/screen for errors too. 
        // It keeps the user aware of status of the application their using
        // & saves their time
        else if(query.hasError && query.isError){
          return Text(
            "My disappointment is immeasurable & my day is ruined for this stupid error: $error",
          );
        }
        return Row(
          children: [
                        // accessing the returned data & showing it
            Text(query.data["title"]),
            ElevatedButton(
              child: const Text("Refetch"),
              onPressed: () async {
                await query.refetch();
              },
            ),
          ],
        );
      },
    );
  }

That’s it. It is that easy to provide externalData to a Query task

By default, when externalData changes the Query is not refetched. But you can change this behavior if you want the query to refetch everytime externalData changes. Just set refetchOnExternalDataChange to true in QueryJob for that specific Query or in QueryBowlScope for all Queries

Query Refetch & Stale Time

Every query is updated when needed. But you can trigger a refetch for a Query or multiple queries manually. This can be useful after a mutation or the application data has changed for sure. The Query.refetch allows to refetch a single query where QueryBowl.of(context).refetchQueries allows refetching multiple queries at the same time

Here’s an example of single query refetch:

ElevatedButton(
 onPressed: () async {
   await query.refetch();
 }
 child: Text("Refetch")
);

Now for refetching multiple queries:

TextField(
    controller: controller,
    onSubmitted: (value){
        QueryBowl.of(context).refetchQueries(
            [exampleJob1.queryKey, exampleJob2.queryKey]
        );
    }
);

The QueryBowl.of method gives access to many methods used internally in Fl-Query. Its just an imperative way to do some things when it's necessary. It provides access to many useful methods & properties e.g. refetchQueries, invalidateQueries, resetQueries, isFetching etc

Stale Time means the amount of time when after a Query or multiple Query’s data should be considered as outdated

By default, Queries become stale as soon as fetch/refetch completes. But this can be configured using the staleTime property of QueryBowlScope for global configuration or per Query basis using the QueryJob's property

final job = QueryJob<String, Client>(
  queryKey: "another-unique-key",
  // now the data of the query will become stale after 30 seconds when the
  // fetch/refetch executes
    staleTime: Duration(seconds: 30),
  task: (queryKey, httpClient){
    return httpClient
            .get("https://jsonplaceholder.typicode.com/todos/1")
            .then((response) => response.body);
  }
);

Query status

A Query can be in following statuses

isSuccess: When the task function returned data successfully
isError: When the task function returned an error
isLoading: When the task function is running
isRefetching: When new data is being fetched or simply the refetch method is executing
isIdle: When there's no data & Query's task has not been yet run

These are Query Progress Status there’s another type of status of Query too. They’re called Data availability status. Following are:

hasData: When query contains data no matters what's happening Basically, query.data != null
hasError: When the query contains error. Basically, query.error != null

Remember, don’t use isLoading only for Loading Indicators as even if the Query isSucessful the data can still be null. So use !query.hasData || query.isLoading to ensure there’s no null exceptions

That is all about queries. It has so much more useful functionalities & features that it can’t be covered in a single article. Please visit the docs for more info (https://fl-query.vercel.app)

Mutations

Queries are used for retrieving Data or for GET requests where Mutation are, Unlike queries, typically used to create/update/delete data or perform server side effects

Basically, a mutation is a type of asynchronous operation that modifies already available data or adds data in a store or remote server

Just like QueryJob Mutation has MutationJob that can be used to define the mutation operation or configuring different stuff

Here’s a MutationJob example:

final basicMutationJob = MutationJob<Map, Map<String, dynamic>>(
  // instead of queryKey mutation has mutationKey
  mutationKey: "unique-mutation-key",
  task: (key, data) async {
    final response = await http.post(
      Uri.parse(
        // to simulate a failing response environment
        Random().nextBool()
            ? "https://jsonplaceholder.typicode.com/posts"
            : "https://google.com",
      ),
      headers: {'Content-type': 'application/json; charset=UTF-8'},
      body: jsonEncode(data),
    );
    return jsonDecode(response.body);
  },
);

The task callback of MutationJob has a variable parameter. It might seem like externalData from QueryJob, but it's a little different. Instead of passing data through externalData argument of QueryBuider, you’ve to pass it through mutate or mutateAsync method of Mutation

Now let’s use this MutationJob with our MutationBuilder

Widget build(context){
    return MutationBuilder<Map, Map<String, dynamic>>(
     job: basicMutationJob,
     builder: (context, mutation) {
       return Padding(
          padding: const EdgeInsets.all(8.0),
            // Its just basic Form
          child: Column(
            children: [
               TextField(
                 controller: titleController,
                 decoration: const InputDecoration(labelText: "Title"),
               ),
               TextField(
                  controller: bodyController,
                  decoration: const InputDecoration(labelText: "Body"),
               ),
               const SizedBox(height: 20),
               ElevatedButton(
                 onPressed: () {
                   final title = titleController.value.text;
                   final body = bodyController.value.text;
                   if (body.isEmpty || title.isEmpty) return;
                    // calling the mutate of the mutation
                                        mutation.mutate({
                       "title": title,
                       "body": body,
                       "id": 42069, // the holy number as ID
                      }, onData: (data) {
                        // resetting the form
                        titleController.text = "";
                        bodyController.text = "";
                    });
                  },
                  child: const Text("Post"),
               ),
                const SizedBox(height: 20),
                // accessing the mutation result
                if (mutation.hasData) Text("Response\n${mutation.data}"),
                if (mutation.hasError) Text(mutation.error.toString()),
             ],
           ),
         );
      });
}

Above, there are 2 text fields that provide title and body of a Post & we’re running the mutation whenever the submit button is pressed. The mutate method accepts 3 arguments

1st parameter/Variables
onData: A callback that runs when result is available & Mutation is successful
onError: A callback that runs when result is available & Mutation is successful

Optimistic Updates

The most interesting part of Mutations are the onMutate callback of MutationBuilder. It’s a callback that runs just before executing the MutationJob.task. Here you can do all sort of crazy stuff. Such as adding predicted data to different queries before data being returned from the server or deleting an entire Query or anything you want. But in combination with onData you can update your application’s data Optimistically, so the user doesn’t have to wait

Optimistic update means, updating Query data with predictable data before actually getting back any result. Then, when the real data arrives, replace the predicted data with the real data without letting the user even know

Here’s a simple example of Optimistic Updates:

MutationBuilder<Map, String>(
    job: newUsernameMutation,
    onMutate: (value) {
      // getting the query that needs to be updated optimistically
      QueryBowl.of(context)
          .setQueryData<UserData, void>(job.queryKey, (oldData) {
            oldData.name = value;
            // you've to return a new instance of the oldData else fl-query
      // will assume data hasn't been updated thus won't trigger any changes
            return UserData.from(oldData);
      });
    },
    onData: (data){
        // replacing the predicted fake data with real data
        QueryBowl.of(context)
          .setQueryData<UserData, void>(job.queryKey, (oldData) {
            oldData.name = data["name"];
            // you've to return a new instance of the oldData else fl-query
      // will assume data hasn't been updated thus won't trigger any changes
            return UserData.from(oldData);
      });
  }
    builder: (context, mutation){
        ....
    ....
    ....
    }
);

This is all for Mutations. To learn more about Mutation read the docs

Hooks

Fl-Query supports both Vanilla Flutter & flutter_hooks. Both aren’t much different everything is same but in fl_query_hooks you additionally get 2 hooks useQuery & useMutation which you can use in place of QueryBuilder & MutationBuilder.

useQuery

It is basically QueryBuilder without all the typical Builder boilerplate. So when I write the 1st example with hooks it’ll look like this:

class BasicHookExample extends HookWidget {
  const BasicHookExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
        final query = useQuery(job: successJob, externalData: null);

    if(!query.hasData || query.isLoading || query.isRefetching)
            return const CircularProgressIndicator();

    return Row(
      children: [
        Text(query.data!),
        ElevatedButton(
          child: const Text("Refetch"),
          onPressed: () async {
            await query.refetch();
          },
         ), // Text
       ],
     ); // Row
  }
}

useMutation

I guess, you know what useMutation does. It’s a replacement for MutationBuilder for flutter_hooks which makes code more clean & easier to read

Here’s a useMutation example:

Widget build(context){
    // the mutation object is the same passed as 
  // parameter in the builder method of MutationBuilder
    final mutation = useMutation(job);

    return /* .... (Imaginary Form) */;
}

This article only covers simple & most used features of Fl-Query. There are tons of more things that we can do with Fl-Query. Everything is available in the official docs which is a WIP. So you can contribute to that if you want. It’ll really help the project to move forward

Fl-Query is still under heavy development & it is expected to have bugs + unintended behavior. So if you find any please create an Issue with proper details. Also, we’re open for any suggestions. Suggest what you like or not or want Fl-Query to have. Probably contribute to the project with your own code & feature. It will be much appreciated

Since the project is in a very early stage it needs appropriate tests & I’m the worst excuse for Tester so Fl-Query needs some good testers who’re willing to contribute to the project with tests. If you want to contribute with tests. Please join the discussion by creating one

Give Fl-Query a ⭐Star⭐ in Github

Social

Follow me on:

Dart-lang | Features you didn’t know exists

Kingkor Roy Tirtho — Fri, 03 Jun 2022 12:04:20 +0000

Dart a single threaded, both AOT (Ahead of time) & JIT (Just in time) compiled, UI programming language that also provides HMR (Hot Reload) out of the box, is one of the growing programming languages nowadays. Its the base language of the famous cross platform UI toolkit Flutter. Dart is known for its extreme syntactical similarities with JavaScript & also being strongly typed “compiled” language. And Yes, it can compile to JavaScript too

Its used by many devs everyday for various Flutter related apps/tools. Chances are you’re one of them. But Flutter being one of the great UI toolkit, Dart keeps giving pain in a Developer’s life. But recently Dart improved so much it is actually making good progress on being one of the easiest & flexible programming language ever next to JavaScript. But unluckily lot of us still don’t know those awesome new features that exist & can be used in the programming language right now if you’re using the latest version

Operator Overloading/Overriding

Have you ever compared two Durations in Dart? You probably used the equality operator == to do that, right? But if you’re coming from other languages like JS/Java/PHP, you’d see something like Duration.isEqual. But in Dart, like most other languages, supports operator overloading

class MyClass {
  final String value;

    MyClass(this.value);

  @override
  bool operator ==(other) {
    this.value == other.value;
  }
}

void main() {
  final a = MyClass("Hello");
  final b = MyClass("Hello");
  final c = MyClass("Hola")
  print(a == b); //result is true
  print(a == c); //result is false
}

You can overload every single arithmetic & comparison operator (+, -, *, ≠, ==, >, ≥, <, ≤, [], call()) in Dart using above syntax. More on operator overloading/overriding

Optional Unnamed Parameters

You’re probably familiar with named & unnamed parameters in Dart/Flutter. Named parameters are optional by default but you can make them required by using the required keyword. But did you know you can also make unnamed parameters optional?

void main(){
    example();
}

void example([String? name]){
    return "$name, it's just an owl!";
}

You can also mix ‘n match with default value optional unnamed parameters & unnamed parameters but you can’t use both named parameters & optional unnamed parameters at the same time

void main(){
    what("Bustin");
}

// works fine
void what(String firstName, [String? lastName="Jeiber"]){
    return "Mr. $lastName, you're not $firstName";
}

// doesn't work
// syntax error. Expected ) after
void noway(bool flag, [String? wrong], {bool? isIt}){
    // .....
    // .....
}

// doesn't work
// syntax error. Expected ) after
void impossible(bool flag, {bool? isIt}, [String? wrong]){
    // .....
    // .....
}

🔥Super Parameters🔥

Remember this?😵‍💫

class CustomButton extends MaterialButton {
  const CustomButton({
    Key? key,
    required VoidCallback? onPressed,
    VoidCallback? onLongPress,
    ValueChanged<bool>? onHighlightChanged,
    MouseCursor? mouseCursor,
    ButtonTextTheme? textTheme,
    Color? textColor,
    Color? disabledTextColor,
    Color? color,
    Color? disabledColor,
    Color? focusColor,
    Color? hoverColor,
    Color? highlightColor,
    Color? splashColor,
    Brightness? colorBrightness,
    double? elevation,
    double? focusElevation,
    double? hoverElevation,
    double? highlightElevation,
    double? disabledElevation,
    EdgeInsetsGeometry? padding,
    VisualDensity? visualDensity,
    ShapeBorder? shape,
    Clip clipBehavior = Clip.none,
    FocusNode? focusNode,
    bool autofocus = false,
    MaterialTapTargetSize? materialTapTargetSize,
    Duration? animationDuration,
    Widget? child,
  }) : assert(autofocus != null),
       assert(elevation == null || elevation >= 0.0),
       assert(focusElevation == null || focusElevation >= 0.0),
       assert(hoverElevation == null || hoverElevation >= 0.0),
       assert(highlightElevation == null || highlightElevation >= 0.0),
       assert(disabledElevation == null || disabledElevation >= 0.0),
       assert(clipBehavior != null),
       super(
         key: key,
         onPressed: onPressed,
         onLongPress: onLongPress,
         onHighlightChanged: onHighlightChanged,
         mouseCursor: mouseCursor,
         textTheme: textTheme,
         textColor: textColor,
         disabledTextColor: disabledTextColor,
         color: color,
         disabledColor: disabledColor,
         focusColor: focusColor,
         hoverColor: hoverColor,
         highlightColor: highlightColor,
         splashColor: splashColor,
         colorBrightness: colorBrightness,
         elevation: elevation,
         focusElevation: focusElevation,
         hoverElevation: hoverElevation,
         highlightElevation: highlightElevation,
         disabledElevation: disabledElevation,
         padding: padding,
         visualDensity: visualDensity,
         shape: shape,
         clipBehavior: clipBehavior,
         focusNode: focusNode,
         autofocus: autofocus,
         materialTapTargetSize: materialTapTargetSize,
         animationDuration: animationDuration,
         child: child,
       );
// ..... other stuff .... //
}

Not much long ago we had to specify every single constructor parameter in a child class if we wanted/the parent class required to pass them to the super constructor call. It was bloaty & was kind of a shame for the Dart Programming Language

Starting from Dart 2.17 stable we got super parameters. Now we can pass super constructor parameters directly from the child constructor

The above code now looks like this:

class CustomButton extends MaterialButton {
  CustomButton({
    super.key,
    required super.onPressed,
    super.onLongPress,
    super.onHighlightChanged,
    super.mouseCursor,
    super.textTheme,
    super.textColor,
    super.disabledTextColor,
    super.color,
    super.disabledColor,
    super.focusColor,
    super.hoverColor,
    super.highlightColor,
    super.splashColor,
    super.colorBrightness,
    super.elevation,
    super.focusElevation,
    super.hoverElevation,
    super.highlightElevation,
    super.disabledElevation,
    super.padding,
    super.visualDensity,
    super.shape,
    super.none,
    super.focusNode,
    super.false,
    super.materialTapTargetSize,
    super.animationDuration,
    super.child,
  });
// ..... other stuff .... //
}

Finally my 2.5MB HTTP response models can be squeezed down to 200KB

Even though the Dart programming language still have a lot of flaws & lot features not yet implemented but its evolving. It was super hard to work with but now has become a lot more flexible. I hope a lot of new features will be added time by time making the Language more mature + modern

Follow me on

Choosing Open Source License Wisely🤔

Kingkor Roy Tirtho — Sun, 16 Jan 2022 16:13:23 +0000

Licenses are really important part of a project. It’s one of those protector that’ll make sure no creation of one is used by another for self-profit without permission

Even though Licenses simple stuff but they can get overwhelming to choose while owning a growing/expanding project. And it’s more important when you’re an one man show & you project is open source. Of course, you can create your own licenses. But to save time you can use a free pre-created one

Here’s a List of popular Free Licenses, their basic breakdown & compatibility:

1. MIT

It’s basically like saying take my piece of code/project, do whatever you want (commercially/non-commercially) but don’t blame me if anything goes wrong

It’s the most favorite Open Source Software license & being used by many popular libraries, frameworks, organizations & applications

Here’s the license

2. GNU General Public License (GPL) v3.0

It’s mostly like MIT but instead of saying “do whatever you want” it says “do whatever you want but keep license term unchanged”. GPL is one of the famous license for most of the open source project built on the convention & tradition of Unix & GNU. It can be seen mostly in Linux/Unix related projects

It’s a great license but it’s also called an “infection” as once you publish something under this license, other projects copying/forking this projects have to use this license or other licenses compatible with this license. Making every fork based of this license, it makes the license contagious. But it’s a great way to make the world more open & that’s why it’s OpenSourceFoundation’s favorite license

You can view it here

3. Apache License 2.0

Created by Apache Software Foundation in 2004 for the community & their own services. It allows doing all the things with the software including commercial use but it strictly prohibits the use of the software’s name/trademark/logo

It’s a great choice for organizations as it secures the trademark & name/logo usage without affecting the flexibility of use of the product/software/library

View it here

4. FreeBSD / BSD 2-Clause License

FreeBSD License or Simplified BSD License or BSD 2-Clause License is one of the popular licenses for OpenSource projects. It’s super simple & quite similar to MIT. It just says, “do whatever you want but don’t blame me if anything goes wrong!”

Here’s the license

5. New BSD License / BSD 3-Clause

It’s similar to BSD 2-Clause License, but with a 3rd clause that prohibits others from using the name of the project or its contributors to promote derived products without written consent

Here’s the license

6. Original/Old BSD License / BSD 4-Clause License* (not accepted in OSF)

The original BSD License. It was later updated as the BSD 2-Clause. It wasn’t accepted by the the OpenSourceFoundation because of it’s advertisement related clause (Clause-3). It’s like saying, “Do whatever you want but keep License unchanged/compatible & have to give me my credits”

Even though its outdated, it has quite a lot meaningful things to it. It can be potentially helpful for small or one man army projects as it secures the “credit” of the developer which is often neglected by most of the Open Source Licenses

Here’s the license

7. Mozilla Public License

Created by the Mozilla Foundation for the community. It’s a great license balancing both the open source & the proprietary perspective of a project. As such, it allows the integration of MPL-licensed code into proprietary codebases, as long as the MPL-licensed components remain accessible under the terms of the MPL. It’s a middle ground between the permissive licenses & GPL licenses

Great choice for organizations/company which want to be as transparent as possible also keeping other super secret stuff veiled

View the license here

What to choose?

It’s complicated. But one have to be careful while choosing licenses. If you’re fine to expose “everything” you can. Or you can keep your trademark/logo/patent/credit restricted too

Here are some conditions to help differentiate & choose the correct license:

If you’ve a healthy job but want to serve the community in free time, I’d encourage to choose the permissive licenses (MIT, BSD 2-Clause, Creative Commons)
If you’re running an organization & need a bridge between OSS & proprietary, use MPL
If it’s a non-profit OSS organization, use Apache-2.0/BSD 3-Clause
If you’re an one man show & don’t have a healthy job or a student, I highly encourage to use BSD 4-Clause or a similar one to keep your credit secure & make it easier to get a job. Also good luck & don’t give up😉

In the end, I’m nobody to tell what to choose or not. But Licenses play a really important role in the long run. Yeah, you can change it later (like me) but keeping the ground solid from the beginning is always better

Which one’s my favorite? (Opinion)

It’s the Original BSD/BSD 4-Clause License. But why?

If you’re an opensource contributor/developer you might be aware of the faker.js story. In case you’re don’t know, here’s a video explanation from my bud Jeff aka Fireship,

Most of the time OSS developer works in free-time. But there are many scenarios where that person remain jobless just to maintain the OpenSource Project. Sometimes it’s profitable (sponsorship) & sometimes it’s not

Everyone just uses those libraries where a very few contributes to the project. That’s not a problem, this is how open-source works, mostly. But the problem is when you use too much of that product & make profits but never payback nor give the credits

I’m not saying, the user has to pay with $ money initially or at all but there are other ways to payback. Such as, contributing back, sharing the project or give credit in their own projects. It doesn’t cost anything.

Its only a few lines for others but can be a life changing opportunity for the project owner/maintainer

After all, someone’s helping you for nothing. At least, be grateful to that person & try help him/her back in his/her problems if you’ve the ability

BSD 4-Clause makes it compulsory to give credits to the developer which is most of the time neglected. OpenSource doesn’t mean only open. It means sharing & helping others too. But people are selfish (that included me too) & we can’t change that. But if we try we can do anything & I guess it’s high time we give the proper credits to the proper credit-holder. And there is no shame in giving others their legal credits

“Mega corporation, startup & consulting firms, all make tons of money on the shoulders of open source software” ~ Jeff | Fireship

IMO, BSD 4-Clause License is now a great solution to these open source developer burn out problems. If it’s not maybe we should make Licenses that actually cares about developer credits similar to BSD 4-Clause but even better

Clause-3 of original BSD License:

At the end, this is all my opinion & personal thinking. Of course I can’t be right always. Maybe there are way better solutions to this problem

Do more OSS projects and
DO NOT BURN OUT & TAKE BREAKS

Social

Follow me on:

Facebook Sign Up Form Tutorial | React Binden💪👑 x Tailwindcss ️

Kingkor Roy Tirtho — Tue, 02 Nov 2021 18:29:31 +0000

React is an awesome FrontEnd UI library created by Facebook. But forms in React always been a little hard. This is what the library react-binden solves. It's a fairly new form handling library for React. It's extremely easy to learn & use

Get a deep dive on React Binden or visit the Docs

Tailwindcss is my most favorite css framework❤️ & by far the most awesome library I've ever found

This article only shows how to build a Signup form using React, react-binden & tailwindcss. I'm assuming one will be familiar with above tools & technologies

What are we Building?

We're making a simple, regular & boring old Sign Up Form inspired by Facebook's Sign Up Form with React, react-binden & tailwindcss. But there's a twist. The form will still be a Sign Up Form but we'll be honest for the placeholders, labels & license agreement etc.. texts🙃😆

Creating the project

For bootstraping the project, we'll use vite. An extraordinary frontend build tool that is super fast & also supports various frontend frameworks

Initiating the project

$ npm init vite

It'll ask a few questions, including project name & which frontend framework to use. Write the name of your choice & select the react option

Now open the project into VSCode/your favorite code editor. Then in the terminal, inside the project root run

$ npm install

Then remove all the non required files e.g src/App.css, src/logo.svg. Remove the all the boilerplate code inside src/App.jsx

Now install the following dependencies:

$ npm install react-binden tailwindcss postcss autoprefixer nanoid clsx

Now run the following command to initiate TailwindCSS inside your project

$ npx tailwindcss init -p

This will create the following files tailwind.config.js, postcss.config.js

Now add the following to src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Let's enable JIT (Just in Time) mode for the tailwindcss compiler. Add mode: "jit" inside the code tailwind.config.js's export config object. Then the file should look like below:

module.exports = {
  // added jit mode
  mode: "jit",
  // purge Array
  purge: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  darkMode: "class", // or 'media' for automatic dark mode detection
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Now run following command to start the vite dev server

$ npm run dev

Custom Themed Input

Now that we've done initializing the project, it's time to create a awesome & beautiful Input component with our favorite tailwindcss

Create a file as src/ModInput.jsx then do the following

import { Input } from 'react-binden'
import clsx from "clsx"
import { nanoid } from "nanoid"

function ModInput(props) {
  const id = props.id ?? nanoid()

  return (
    <div>
      {props.model.error && <p>{props.model.error}</p>}
      <Input id={id} {...props} />
      <label htmlFor={id}>{props.label}</label>
    </div>
  )
}

export default ModInput

May be you're thinking why did I put the label & the error hint in the wrong order. Well, there's a reason. But now, let's style these components. I'll be using clsx for handling multiple & conditional classes efficiently

import { Input } from 'react-binden'
import clsx from "clsx"
import { nanoid } from "nanoid"

function ModInput(props) {
  const inputStyle = clsx(
    props.className,
    "peer transition-all p-1 border-2 border-solid rounded outline-none",
    {
      // conditional classes
      ["border-red-400"]: props.model.touched && !!props.model.error,
      ["border-gray-500 focus:border-blue-400"]: !props.model.error
    },
  )

  const id = props.id ?? nanoid()

  // radio & checkboxes are different than text fields thus they need
  // a bit differently adjusted styles
  const rowTypes = ["checkbox", "radio"]
  const secondDivStyles = clsx(
    "inline-flex",
    // corrects the wrong order of label & error-hint
    !rowTypes.includes(props.type) ? "flex-col-reverse" : "flex-row items-center"
  )

  const labelStyles = clsx(
    "transition-all select-none peer-focus:text-blue-500 font-semibold",
    { 
            ["font-normal peer-focus:text-black ml-2"]: rowTypes.includes(props.type),
      ["peer-focus:text-red-500"]: props.model.touched && !!props.model.error 
    }
  )

  return (
    <div className={secondDivStyles}>
      {props.model.error && (
                <p className="text-red-500 text-sm ml-2 group-focus">
                   {props.model.error}
                </p>)
      }
      <Input id={id} className={inputStyle} {...props} />
      <label htmlFor={id} className={labelStyles}>{props.label}</label>
    </div>
  )
}

export default ModInput

Now, let's answer why the order of error-hint & label are in reverse in the JSX. This is because of tailwind's peer class & peer-focus: prefix/variant. TailwindCSS provides an awesome way to handle css's styles based on sibling's state. peer prefix works as the CSS's + operator for selectors. But peer only works when the upper most element/sibling has the peer class. Downwards siblings can use upward siblings states but not vice-versa

Learn more about TailwindCSS Sibling Select Variant

Basic Form

Let's use the newly created ModInput. Now in src/App.jsx we've to create our basic form using react-binden's Form, useModel & regex. We'll style the form later. Now only focus on Logic

import { Form, regex, useModel } from "react-binden"
import ModInput from "./ModInput"

function App() {
  // models of each field
  const email = useModel("")
  const password = useModel("")
  const confirmPassword = useModel("")
  const username = useModel("")
  const birthday = useModel("")
  // since we're using radio-group a common name for all the
  // radio-button is required to make it function
  const gender = useModel("", { name: "gender", required: true })

  function handleSubmit(_e, _states, { setSubmitting, resetForm }) {
      // resetting the form
            setInterval(() => {
              resetForm();
              setSubmitting(false);
            }, 500);
  }

  return (
    <div>
      <h1>Honest Facebook Sign Up</h1>
      <p><b>Disclaimer!:</b> This is just a parody of Facebook. Nothing related to actual Facebook corp. Made just for fun & entertainment</p>
      <Form onSubmit={handleSubmit}>
        <ModInput
          model={username}
          label="Username"
          // only allows lowercase letters
          pattern={[/^[a-z]+$/, "only lower case name is allowed"]}
          required
        />
        <ModInput
          type="email"
          label="Email"
          model={email}
          pattern={[regex.email, "Should be a valid email"]}
          required
        />
        <ModInput
          type="password"
          label="Password"
          model={password}
          pattern={[regex.moderatePassword, "Write a stronger password"]}
          required
        />
        <ModInput
          type="password"
          model={confirmPassword}
          imprint-model={password}
          label="Confirm Password"
          required
        />
        <ModInput
          type="datetime"
          label="Birthday"
          model={birthday}
          pattern={[regex.date_dd_MM_yyyy, "should follow the `ddmmyy` format"]}
          required
        />
        <div>
          <p>Gender</p>
          <div>
            <ModInput
              type="radio"
              model={gender}
              value="male"
              label="Male"
            />
            <ModInput
              type="radio"
              model={gender}
              value="female"
              label="Female"
            />
            <ModInput
              type="radio"
              model={gender}
              value="other"
              label="Other"
            />
          </div>
        </div>
        <div>
          <button type="submit">Get Ruined</button>
        </div>
      </Form>
    </div>
  )
}

export default App

If you feel overwhelmed with all of the code above you can learn about react-binden here

Now, that we've all the fields Facebook requires to Signup, let's style & structure them as following

// ... import stuffs
function App() {
  // ... other stuff (models, handlers etc..)
  return (
    <div className="flex flex-col items-center">
      <h1 className="m-2 text-3xl text-center font-bold">
        Honest Facebook Sign Up
      </h1>
      <p className="text-center">
        <b>Disclaimer!:</b> This is just a parody of Facebook. Nothing related
        actual Facebook corp. Made just for fun & entertainment
      </p>
      <Form
        className="inline-flex flex-col p-5 space-y-2 max-w-xl"
        onSubmit={handleSubmit}
      >
        <div>
          <h2 className="text-2xl text-gray-900 font-semibold">Sign Up</h2>
          <p className="text-xs text-gray-600">
            It's quick & easy
          </p>
        </div>
        <hr />
        <ModInput
          model={username}
          label="Username"
          pattern={[/^[a-z]+$/, "only lower case name is allowed"]}
          required
        />
        <ModInput
          type="email"
          label="Email"
          model={email}
          pattern={[regex.email, "Should be a valid email"]}
          required
        />
        <div className="flex space-x-5">
          <ModInput
            type="password"
            label="Password"
            model={password}
            pattern={[regex.moderatePassword, "Write a stronger password"]}
            required
          />
          <ModInput
            type="password"
            model={confirmPassword}
            imprint-model={password}
            label="Confirm Password"
            required
          />
        </div>
        <ModInput
          type="datetime"
          model={birthday}
          pattern={[regex.date_dd_MM_yyyy, "should follow the `ddmmyy` format"]}
          required
        />
        <div>
          <p className="font-bold">Gender</p>
          <div className="flex items-center justify-between w-1/2">
            <ModInput type="radio" model={gender} value="male" label="Male" />
            <ModInput
              type="radio"
              model={gender}
              value="female"
              label="Female"
            />
            <ModInput type="radio" model={gender} value="other" label="Other" />
          </div>
        </div>
        <p className="text-gray-600 text-xs pb-5">
          By clicking Sign Up, you agree to our Terms, Data Policy and Cookie Policy. You may receive SMS notifications from us and can opt out at any time.
        </p>
        <div className="flex justify-center">
          <button
            type="submit"
            className="bg-[#00a400] py-2 px-10 text-white font-bold rounded"
          >
            Get Ruined
          </button>
        </div>
      </Form>
    </div>
  );
}

export default App;

The Fun Part

I hope it'd now look visually appealing but that's boring. Nothing fun & interesting. Of course, I could add awesome animations, weirdest scroll effect or various CSS animations. But we're developers & we do hard work "occasionally"🤥. So let's use our "joke power" (which I obviously don't have but still trying) with texts. Let's just pretend we're actual Facebook developer & we, for some reason have to be slightly honest with what we build🙃

FUN GENERATING

import { Form, regex, useModel } from "react-binden";
import ModInput from "./ModInput";

function App() {
  const email = useModel("");
  const password = useModel("");
  const confirmPassword = useModel("");
  const username = useModel("");
  const birthday = useModel("");
  const gender = useModel("", { name: "gender", required: true });

  function handleSubmit(_e, { errors }, { setSubmitting, resetForm }) {
    setInterval(() => {
      resetForm();
      setSubmitting(false);
    }, 500);
  }

  return (
    <div className="flex flex-col items-center">
      <h1 className="m-2 text-3xl text-center font-bold">
        Honest Facebook Sign Up
      </h1>
      <p className="text-center">
        <b>Disclaimer!:</b> This is just a parody of Facebook. Nothing related
        actual Facebook corp. Made just for fun & entertainment
      </p>
      <Form
        className="inline-flex flex-col p-5 space-y-2 max-w-xl"
        onSubmit={handleSubmit}
      >
        <div>
          <h2 className="text-2xl text-gray-900 font-semibold">Sign Up</h2>
          <p className="text-xs text-gray-600">
            It's quick & easy (profit for us)
          </p>
        </div>
        <hr />
        <ModInput
          model={username}
          label="Username"
          placeholder="Credit Card Pin. Oops, Username"
          pattern={[/^[a-z]+$/, "only lower case name is allowed"]}
          required
        />
        <ModInput
          type="email"
          label="Email"
          model={email}
          pattern={[regex.email, "Should be a valid email"]}
          placeholder="Password. Oh sorry, Email"
          required
        />
        <div className="flex space-x-5">
          <ModInput
            type="password"
            label="Password"
            model={password}
            pattern={[regex.moderatePassword, "Write a stronger password"]}
            placeholder="Why not use, Hail Zuckerberg?"
            required
          />
          <ModInput
            type="password"
            model={confirmPassword}
            imprint-model={password}
            label="Confirm Password"
            placeholder="Isn't it, Hail Zuckerberg?"
            required
          />
        </div>
        <ModInput
          type="datetime"
          label="Birthday (Makes it easier for your friends to beg treats from you)"
          model={birthday}
          pattern={[regex.date_dd_MM_yyyy, "should follow the `ddmmyy` format"]}
          required
        />
        <div>
          <p className="font-bold">Gender</p>
          <div className="flex items-center justify-between w-1/2">
            <ModInput type="radio" model={gender} value="male" label="Male" />
            <ModInput
              type="radio"
              model={gender}
              value="female"
              label="Female"
            />
            <ModInput type="radio" model={gender} value="other" label="Other" />
          </div>
        </div>
        <p className="text-gray-600 text-xs pb-5">
          By clicking Get Ruined, you agree that you're our product, we can do
          whatever we want with & we own you (for free). You may receive SMS
          notifications from us and can opt out at any time (not actually).
        </p>
        <div className="flex justify-center">
          <button
            type="submit"
            className="bg-[#00a400] py-2 px-10 text-white font-bold rounded"
          >
            Get Ruined
          </button>
        </div>
      </Form>
    </div>
  );
}

export default App;

Glad that it's finished. For a moment, it was feeling like it'd never end. But don't go way. There's a catch in the project. I created the entire website without taking care of responsiveness. So you can now make it responsive by yourself. Do this as a home-work

Results

After writing 2 million lines (200 actually) of code we're finally done. Let's see what have we built so far & let's hope there's no bug

Source Code: https://github.com/KRTirtho/fb-parody-signup

Social

Follow me on twitter

Follow me on Reddit

Give react-binden a ⭐ on Github

React Forms Made Easy with react-binden🚀

Kingkor Roy Tirtho — Sun, 31 Oct 2021 09:10:25 +0000

Introducing React Binden 🎉🚀

A react form handling library which is actually easy

React Binden is inspired from Vue's v-bind directive & is extremely lightweight yet fast

Its,

Lightweight, Fast & Tree-shakable
has Out of the Box validation without any 3rd party library
optimizes both Hooks & Components to get the best of both worlds
offers custom curated collection of useful Regex for validation purposes
UI component library proof
can be integrated with any UI component library/framework without any 3rd party library
zero dependencies

Why created this?

React forms, no doubt can be a nightmare for any developer. It can be messy to create a simple Login form in React

One day, while using Vuejs for creating a medium.com clone, I encountered with Vue's v-bind directive. Which allows to bind a value of a field with a variable. In React, that's not possible as React supports only one-way data-binding. Just think, if it was available in React, it'd been a god sent gift but alas!. Don't be sad as we can mimic two-way data-binding in React with state-up-lifting. It means declaring the state of a child in the parent & then passing that down to child. Kind of like prop-drilling but in a managed manner. You shouldn't do more than 2 times of state-up-lifting as it'd make the UI slow leading to huge re-renders

So I experimentally tried mimicking v-bind for input & walla, it worked fine. I though it might cause performance issues & huge re-renders but surprisingly it didn't instead it's fast & fast as normal. Then, I decided finish writing the library

Another reason is simplicity. I found every form library having some kind of complexity even though, they were doing their best to simplify React Form handling experience. Custom schema for validation, spreading props in Fields, hooks that returns huge amount of objects which you've to manually handle etc. kind of made me really confused. I discovered that, every form library is either completely hook based or completely component render function based or provides both API. I never found a single one that utilizes both custom components & hooks together. So, in with React-Binden I tried closing that gap which will give the developer best of both world

Third & final reason is size. Current form libraries aren't lightweight except react-final-form. So making a decent form library which is lightweight and tree-shakable was React Binden's one of the main goals. BTW, it uses ESNext module system

How to use

React Binden is extremely easy to use. It has the simplest API for handling React Forms. It provides hooks & custom components

The most important ones are the useModel, Form & Input. Using these 3, you can complete most of the job. Now let's see how to use useModel

Using useModel

useModel is nothing but a simple hook that just declares some required states for a Input's model. It requires a default value which can be a number, string or an Array (applicable only for checkbox-group). And has an optional parameter that can be used pass all the validation prop of an Input

import { useModel } from 'react-binden';

/*---------------------------------------*/

const model = useModel('', {
        name: 'some-field',
        max: 20,
        min: [5, 'minimum 5'],
        maxLength: 20,
        minLength: 5,
        pattern: regex.email,
        required: true,
        validate: (_value, _touched) => true,
        'semantic-validation': true,
});

// all the states/properties
model.value;
model.error;
model.touched;
model.default;
model.validations;

// all the methods
model.setValue('Some value');
model.setError('Some Error');
model.setTouched(true);

Learn more about useModel here

Using Form

Form is a typical form component as well as a context provider. It doesn't hold a huge amount of state for the field. Only keeps the state of submit, reset & if all field have don't have any error

You can use onSubmit prop to handle form submission just like a vanilla HTML form. And it supports all other form attributes

Example of a Form

<Form
    onSubmit={async (event, {reset, errors}, methods) => {
        try{
        // handling form submission
        }
        catch(e){
        // handle exceptions
        }
    }}
>
    {/*... other components*/}
</Form>

More about Form can be found here

Using Input

Input is what acts like an input field. useModel's model have to be bind with this component's model prop. It takes all the validation props. Since React Binden follows HTML validation standards & semantic HTML form validation attributes, all the HTML input validation props is present. But instead of validating while submission, React Binden validates in real time. You can pass custom error message with those validation props

Validation props that are supported

min, max (for numeric values)
minLength, maxLength (for string values)
pattern (through regex)
required

export function Example() {
    const user = useModel('');

    return (
        <Input
            model={user}
            maxLength={30}
            // passing a custom error msg using Tuples
            minLength={[5, 'Minimum 5 characters']}
            required
        />
    );
}

Here's more about Input

Learn more about Validation here

Validating password & confirm password is a pain, right? This is where imprint-model comes handy. Pass the password model to this & the field will only match to that password field

Example of imprint-model:

const password = useModel('');
const confirmPassword = useModel('');

return (
    <Form onSubmit={handleSubmit}>
        <Input
            model={password}
            required
            pattern={regex.moderatePassword}
            placeholder="Password"
        />
        <Input
            model={confirmPassword}
            // passing the model that should be imprinted/followed
            imprint-model={password}
            required
            placeholder="Confirm Password"
        />

        <button type="submit">Sign Up</button>
    </Form>
);

Might be thinking about integrating React Binden with an UI component library/framework. No worries. You can learn about it here

Input can be validated completely manually using the validate prop. As a companion, there is also a useValidatorChain hook which can be used for using multiple validation functions at once

Regex

React Binden also provides an useful list of Regular Expressions that can be used with Input's pattern prop. Suppose validating an email field. This can be done with regex

import { regex, useModel, Input } from 'react-binden';

export function Login() {
    const email = useModel('');

    return (
        {/*....Form & other component....*/}
        <Input
            type="email"
            model={email}
            // using `regex.email` for validating email
            pattern={[regex.email, 'Should be a valid email']}
            required
        />
        {/*....Form & other component....*/}
    );
}

The list of available Regex can be found here

React Binden also supports Textarea, Select, Checkboxes & Radio Group. And the entire library is written with Typescript❤️ so don't worry about Typescript support

Conclusion

This is a short review & tutorial of React Binden. The full documentation is what you should be looking for. To learn about all the features of React Binden visit react-binden.netlify.app

React Binden is a completely new library & heavily inspired by other form libraries too. Those are an asset & Thanks❤️ to those library authors for their outstanding generosity for the OSS community

If you ever encounter any bug related to React Binden create an issue on Github

Have any ideas to improve react-binden? Why not Discuss?

Give a 🌟 on Github

Forem: Kingkor Roy Tirtho

Flutter Desktop Mastery 3: Windows Inno Installer, Packaging, and Publishing to Chocolatey

The Big Picture

Packaging Configuration (fastforge)

The Inno Setup Template

Core Setup Metadata

Installer Tasks

Files & Shortcuts

Runtime Dependencies

Building the app and packaging the installer

Chocolatey Packaging Structure

The Nuspec Manifest

Install Script (Inno Setup Silent)

Uninstall Script

Verification File

The Automated Build Flow

Publishing to Chocolatey

Practical Checklist

Flutter Desktop Mastery 2: System Tray & Local Notifications

Introducing the Dependencies

Building the Tray Menu

Platform-Aware Tray Manager

The Tray Manager Provider

Initializing the Tray in Your App

Desktop Notifications 🔔

Initializing Local Notifications

The Minimize to Tray Notification

Showing the Notification

Building Custom Notifications

Putting It All Together: The Complete Desktop Experience

Flutter Desktop Mastery 1: Window Management

1. Window Management & Lifecycle 🪟

Initialization & Configuration

Handling Close Behavior

Platform-Specific Window Fixes

2. Custom Title Bar Implementation 🎨

The TitleBar Widget

TitleBar Buttons

Conclusion: Bringing It All Together

What We've Covered

Moving Forward

It's okay to not to code in your free time in your personal projects

Take weekly breaks

Take daily breaks

Conclusion

Support Me

Find Me

JavaScript Intl API: The hidden gem of web internationalization

Formatting Dates

Relative Time formatting

Number Formatting across Locales

Currency Formatting

Pluralization

Sorting Strings Globally

Easy Time Zones

Embracing User Locale

My socials:

Support me & my work

Rust based alternatives for Unix & GNU Terminal Tools (Quick Table)

Conclusion

Social

Rust-ify Linux/GNU/macOS terminal tools

Rust to the saving

cd replacement - Zoxide

ls replacement - Exa

grep replacement - Rip grep (Dude got humor XD)

cat replacement - Bat

top repalcement - bottom🙃

sed replacement - Sd

cloc repalcement - Tokei

find replacement - Fd

du repalcement - Dust

ps replacement - Procs

bash repalcement (more like powershell) - Nushell

What? You want more?

Social

Fl-Query⚡ for Flutter | Managing async data & mutations in Flutter is like a breeze now🌬️

What does it offer?

Let’s see some Code

Query External Data

`cd` replacement - Zoxide

`ls` replacement - Exa

`grep` replacement - Rip grep (Dude got humor XD)

`cat` replacement - Bat

`top` repalcement - bottom🙃

`sed` replacement - Sd

`cloc` repalcement - Tokei

`find` replacement - Fd

`du` repalcement - Dust

`ps` replacement - Procs

`bash` repalcement (more like powershell) - Nushell