DEV Community: Akash Pattnaik

I got tired of Googling Docker commands, so I built an interactive cheatsheet

Akash Pattnaik — Sun, 29 Mar 2026 15:17:29 +0000

Let me paint you a picture.

It's late. You're writing a Dockerfile. You're in the zone — the kind of focus where you're actually moving fast and everything is clicking. You type HEALTHCHECK and your fingers pause.

Is it --interval or --period? And what's the timeout default again? Is there a --start-period flag or did you make that up?

You open a new tab.

You type "dockerfile healthcheck options" into Google.

The first result is a Stack Overflow answer from 2017. The accepted answer is wrong. The second answer is right but references a flag that was renamed. You scroll past three more answers, open the official Docker docs, find the right section, get your answer, close five tabs, and try to remember where the hell you were.

Three minutes gone. Flow state: destroyed.

I've been doing this for years. And I finally got annoyed enough to do something about it.

What I built

Docker Hub is a free, open-source interactive cheatsheet for all 18 Dockerfile instructions. It lives in your browser, works offline, needs no login, and exists for one reason: so you never have to leave your editor to look up a Docker command again.

Here's the layout — three panels, all visible at once:

┌──────────────┬──────────────────────────┬──────────────┐
│  Cheatsheet  │   Interactive Dockerfile  │  Deep Dive   │
│   + search   │    (hover any keyword)    │  Reference   │
└──────────────┴──────────────────────────┴──────────────┘

Left panel — the cheatsheet

All 18 instructions, grouped by category, with a real-time search bar and category filter pills. Hover any instruction card and you get an instant tooltip summary. Click it and the right panel updates.

Center panel — the interesting part

This is what I actually wanted to exist. It's a realistic, multi-stage Node.js production Dockerfile rendered with token-level syntax highlighting. Every instruction keyword — FROM, RUN, COPY, HEALTHCHECK, all of them — is a hoverable, clickable span.

Hover HEALTHCHECK and you get a popover right there:

What it does
All its options (--interval, --timeout, --start-period, --retries)
A live code example
A link to the full reference

No new tab. No context switch.

Right panel — the full reference

Click any keyword and the right panel shows you everything:

Full description in readable prose
All syntax variants
A parameter table (type, required, default, and a BuildKit badge for flags that need it)
Multiple copy-ready code examples
A layer info strip (creates a layer? persists in image? runtime override flag?)
Related instructions you can jump to directly

The tech (keeping it boring on purpose)

This is a Next.js app with Tailwind CSS. That's basically it.

There's no backend. No database. No external API calls. The entire knowledge base is a single well-structured DATA.json file that gets imported at build time.

// lib/data.ts
import data from '../DATA.json'

export function getInstructionById(id: string): Instruction | undefined {
  return data.instructions.find(i => i.id === id)
}

export function searchInstructions(query: string): Instruction[] {
  const q = query.toLowerCase()
  return data.instructions.filter(i =>
    i.name.toLowerCase().includes(q) ||
    i.summary.toLowerCase().includes(q) ||
    i.tags.some(t => t.includes(q))
  )
}

The center panel's syntax highlighting is a custom tokenizer — not Prism, not Shiki, not any heavy library. Just a function that splits each Dockerfile line into typed tokens:

type TokenType = 'keyword' | 'flag' | 'string' | 'comment' | 'path' | 'plain'

interface Token {
  type: TokenType
  value: string
  instructionId?: string  // links keywords to DATA.json
}

function tokenizeLine(line: string): Token[] {
  if (line.trim().startsWith('#')) {
    return [{ type: 'comment', value: line }]
  }
  // first word = keyword if it matches a known instruction
  // --word = flag
  // /word or ./word = path
  // "word" = string
  // everything else = plain
}

Simple, fast, zero dependencies. Perfect for what we need.

The DATA.json schema — the real project

I want to talk about this because it's where most of the work actually went.

Each instruction in the JSON has a full semantic schema:

{
  "id": "healthcheck",
  "name": "HEALTHCHECK",
  "summary": "Defines a command to test container health",
  "description": "Full prose description...",
  "deprecated": false,
  "syntax": [
    "HEALTHCHECK [OPTIONS] CMD <command>",
    "HEALTHCHECK NONE"
  ],
  "layer": {
    "createsLayer": false,
    "persistsInImage": true,
    "overridableAtRuntime": true,
    "runtimeFlag": "--health-cmd, --health-interval"
  },
  "parameters": [
    {
      "name": "--interval",
      "type": "duration",
      "required": false,
      "default": "30s",
      "buildkitOnly": false,
      "description": "Time between health checks"
    }
  ],
  "examples": [
    {
      "id": "healthcheck-http",
      "title": "HTTP endpoint check",
      "description": "Check a health endpoint with curl",
      "code": "HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \\\n    CMD curl -f http://localhost:8080/health || exit 1"
    }
  ],
  "relatedInstructions": ["CMD", "ENTRYPOINT", "EXPOSE"],
  "tags": ["health", "monitoring", "check", "liveness"],
  "category": "runtime"
}

This schema is the reason the whole app is easy to contribute to. If you find a wrong example, a missing parameter, or a flag I forgot — you literally just edit the JSON and open a PR. You don't need to understand Next.js, React, or anything about the app. Just find the instruction, fix the data, ship it.

That was an intentional design decision. I wanted the knowledge base to be community-maintained without requiring any contributors to touch application code.

Things I learned building this

1. Token-level interactivity is a surprisingly underused pattern.

Most syntax highlighters treat code as display-only. Making each token interactive — hoverable, clickable, state-driving — forced me to think about the rendering differently. Instead of a <pre> tag, each line is an array of <span> elements with event handlers. Feels obvious in retrospect.

2. A JSON schema is a product decision, not a technical one.

I spent more time thinking about the shape of DATA.json than I did writing component code. Getting the schema right — deciding what fields an Example needs, how parameters should be typed, how to represent the CMD+ENTRYPOINT interaction matrix — was the hard part. The React components were almost mechanical after that.

3. Tooltip positioning is an unsolved problem and I respect Floating UI more now.

My first tooltip implementation overflowed the viewport constantly. The second one flickered. The third one used getBoundingClientRect() + a viewport-edge detection check and finally worked. I should've just used Floating UI from the start.

4. "No backend" is a feature, not a constraint.

Every time I was tempted to add a server route ("for search", "for analytics", "for saving custom Dockerfiles"), I asked myself: can this be done in the client with the static data? The answer was always yes. Keeping it fully static means it deploys anywhere, works offline, and has zero ongoing infrastructure cost.

What's next

A few things I want to add:

Custom Dockerfile input — paste your own Dockerfile and get it syntax-highlighted interactively with the same hover system
Docker Compose reference — same format, for docker-compose.yml keys
BuildKit toggle — hide/show BuildKit-only parameters to reduce noise for people on older Docker versions
Print export — a single-page PDF cheatsheet you can pin above your monitor

If any of those sound interesting to you, contributions are very welcome.

Try it / contribute

🐳 Live site: dockerhub
📦 GitHub: github.com/iakashpattnaik/docker_hub

The fastest way to contribute is to open DATA.json, find an instruction you know well, and improve its description, examples, or tags. That alone is enormously valuable.

If you find a bug, spot a wrong parameter, or think an instruction needs a better example — please open an issue or just send a PR directly. The bar is intentionally low.

And if this saves you even one "dockerfile COPY --chown syntax" Google search — that's the whole point.

Happy shipping. 🚀

For all vibe coders wanting to build apps - I strongly advise you read this once before you go on to chose a random framework!!

Akash Pattnaik — Tue, 13 Jan 2026 13:18:08 +0000

Akash Pattnaik

Jan 13

Why Flutter beats React Native ?

#flutter #beginners #programming #reactnative

Comments

2 min read

Why Flutter beats React Native ?

Akash Pattnaik — Tue, 13 Jan 2026 13:17:07 +0000

Performance 🚀

Flutter delivers superior performance because it compiles directly to native machine code. This eliminates the need for a JavaScript bridge, which React Native relies on. As a result, Flutter apps feel snappier and more responsive, particularly when handling complex UI and animations.

Consistent UI Across Platforms 🎨

Flutter uses a single codebase to create a consistent user experience on both Android and iOS. Since it draws its own widgets, the app looks the same across different platforms. React Native, on the other hand, uses native components, which can lead to slight differences in the UI across devices.

Hot Reload ⚡

Although both frameworks offer Hot Reload, Flutter’s implementation is faster and more reliable. Changes made to the app’s code can be seen almost instantly without needing a full app restart, speeding up development significantly.

Rich Widget Library 🛠️

Flutter provides an extensive collection of customizable widgets, offering more out-of-the-box functionality compared to React Native. With Flutter, developers can easily create visually appealing apps without depending heavily on third-party libraries.

Native Feel Without the Hassle 📱

Flutter's widgets replicate native UI elements closely, giving apps a native-like feel while allowing developers to customize the design easily. React Native sometimes requires additional work to bridge the gap between custom designs and native components.

Conclusion

In summary, Flutter stands out with its performance, consistency, rich UI tools, and a faster development process, making it the go-to choice for developers looking for a modern and efficient cross-platform solution.'

Connect with me 🙍

Mail - akashpattnaik.github@gamil.com
Github - iAkashPattnaik
Linkedin - iAkashPattnaik

10 Secret Tips That Make You Better at DSA

Akash Pattnaik — Mon, 12 Jan 2026 17:22:07 +0000

Introduction

Data Structures and Algorithms (DSA) often feel overwhelming at first. With so many concepts, patterns, and problem types, it’s easy to feel stuck or slow. But here’s the good news: becoming good at DSA is less about talent and more about strategy. The right habits, mindset, and techniques can dramatically speed up your progress. In this article, you’ll discover 10 secret tips that can make you significantly better at DSA, even if you’re starting from scratch.

Table of Contents 💻

Master the Basics Before Chasing Advanced Topics
Think in Patterns, Not Problems
Always Dry Run Your Code
Learn Time and Space Complexity Visually
Write Code on Paper (Yes, Really!)
Solve Fewer Problems, but Solve Them Deeply
Revisit Old Problems Regularly
Explain Your Solution Out Loud
Learn When Not to Use a Data Structure
Build Consistency, Not Motivation

1. Master the Basics Before Chasing Advanced Topics

Many learners rush into advanced topics like dynamic programming or graphs without fully understanding arrays, strings, and linked lists. This creates weak foundations. Spend time mastering basics like loops, recursion, and simple data structures. Strong fundamentals make complex topics feel easier and more logical.

2. Think in Patterns, Not Problems

Most DSA problems are variations of a few core patterns such as sliding window, two pointers, recursion, backtracking, or divide and conquer. Instead of memorizing solutions, train your brain to recognize these patterns. Once you spot the pattern, the solution becomes much clearer.

3. Always Dry Run Your Code

Before jumping into coding, dry run the logic step by step with a small example. This helps you catch edge cases, logical errors, and unnecessary steps early. Dry running also improves your problem-solving clarity and reduces debugging time.

4. Learn Time and Space Complexity Visually

Big-O notation can feel abstract. Instead of memorizing formulas, visualize how your algorithm grows with input size. Ask questions like: How many loops are running? or Is extra memory being used? This approach makes complexity analysis intuitive rather than confusing.

5. Write Code on Paper (Yes, Really!)

Writing code on paper forces you to slow down and think clearly. It improves logical flow and prepares you for interviews where you may not have an editor or auto-complete. This habit strengthens your confidence and precision.

6. Solve Fewer Problems, but Solve Them Deeply

Solving 100 problems poorly is less effective than solving 30 problems deeply. For every problem you solve:

Understand why the solution works
Explore alternative approaches
Analyze time and space complexity

Depth beats quantity in DSA learning.

7. Revisit Old Problems Regularly

Re-solving old problems after a few weeks is incredibly powerful. You’ll notice improved speed, better logic, and cleaner code. This reinforces long-term memory and helps patterns stick naturally.

8. Explain Your Solution Out Loud

If you can explain your solution clearly, you truly understand it. Try teaching the solution to a friend, or even to yourself. This technique exposes gaps in understanding and improves interview communication skills.

**9. Learn When Not to Use a Data Structure**

Many beginners overuse complex data structures when simpler ones work better. Always ask: Is this the simplest solution? Choosing the right (or minimal) data structure often leads to cleaner and faster code.

10. Build Consistency, Not Motivation

Motivation comes and goes, but consistency builds skill. Even 30 minutes of daily DSA practice is better than long, irregular sessions. Create a routine and stick to it. Progress will follow naturally.

Final Thoughts

Becoming better at DSA isn’t about shortcuts—it’s about smart learning. Apply these 10 secret tips consistently, and you’ll notice improved problem-solving speed, better confidence, and stronger fundamentals. Remember, every expert was once a beginner who didn’t give up.

End of ElephantSQL 😔

Akash Pattnaik — Wed, 03 Apr 2024 19:52:13 +0000

ElephantSQL started back in 2013 and it was one of the first services to offer postgreSQL at such low rates as a service.

I personally have been using it since last 4-5 years and my favorite part was the browser SQL executer.

Unfortunately 😟, just moments ago I received a mail saying that they are ending their services from January 27, 2025.

This marks a end to an era!

No doubt ElephantSQL was one of the best postgreSQL service providers out their for small projects.

I had build over 20 small projects using ElephantSQL. All of them had over 1K+ users. Their free plan was, in my personal opinion, the best postgreSQL service a beginner might ever get!

Comment if you have ever used ElephantSQL and what are you going to use from now one?!

File API

Akash Pattnaik — Thu, 21 Mar 2024 17:04:48 +0000

This is a submission for DEV Challenge v24.03.20, One Byte Explainer: Browser API or Feature.

`File` API

The File API allows web applications to interact with files on the user's device. It enables reading file content, accessing metadata, and handling file uploads, enhancing user experience with file management in web applications.

Example Code (Not a part of explanation)

// Reading file content using File API
const fileInput = document.getElementById('file-input');

fileInput.addEventListener('change', (event) => {
  // Get the selected file
  const file = event.target.files[0];

  // Create a FileReader object
  const reader = new FileReader();

  // Define what to do when file is loaded
  reader.onload = (event) => {
    // Retrieve the file content
    const fileContent = event.target.result;
    console.log('File content:', fileContent);
  };

  // Read the file as text
  reader.readAsText(file);
});

DOM API

Akash Pattnaik — Thu, 21 Mar 2024 17:03:46 +0000

This is a submission for DEV Challenge v24.03.20, One Byte Explainer: Browser API or Feature.

`DOM`

The Document Object Model (DOM) represents webpage structure in a tree-like format. It allows scripts to dynamically access, update, and modify webpage content and styles, enabling interactive web development.

Example Code (Not a part of explanation)

// Accessing and updating DOM elements
const heading = document.querySelector('h1'); // Selecting an element
heading.textContent = 'New Heading'; // Updating its text content
heading.style.color = 'blue'; // Changing its style
document.body.appendChild(heading); // Appending it to the document

fetch API

Akash Pattnaik — Thu, 21 Mar 2024 17:01:55 +0000

This is a submission for DEV Challenge v24.03.20, One Byte Explainer: Browser API or Feature.

`fetch` API

The Fetch API in browsers is for making HTTP requests. It's promise-based and cleaner than XMLHttpRequest. You can use fetch() with a URL and options to get data. Returns a promise with a Response object. Extract data with methods like .json().

Example Code (Not a part of explanation)

// Fetching data from a URL
fetch('https://api.example.com/data')
  .then(response => {
    // Check if response is successful
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    // Extract JSON data from response
    return response.json();
  })
  .then(data => {
    // Work with the retrieved data
    console.log(data);
  })
  .catch(error => {
    // Handle any errors that occur during the fetch operation
    console.error('Fetch error:', error);
  });

The new BottomBar in Flutter

Akash Pattnaik — Sun, 17 Mar 2024 13:50:55 +0000

Hello fam 👋!

This tutorial shows the new BottomBar implementation in flutter. (It's official).

This is a new Material UI 3 implementation and is recommended to have only 3 childs (NavigationDestination).

For further lookup you can see here.

Here's a sample code that I used...

class AppHomePage extends StatefulWidget {
  const AppHomePage({super.key});

  @override
  State<AppHomePage> createState() => _AppHomePageState();
}

class _AppHomePageState extends State<AppHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: const SizedBox(),
      // Here
      bottomNavigationBar: NavigationBar(
          overlayColor: MaterialStateProperty.all(Colors.yellow),
          selectedIndex: _selectedIndex,
          onDestinationSelected: (int index) {
            setState(() {
              _selectedIndex = index;
            });
          },
          // indicatorColor: Colors.pink,
          destinations: const [
            NavigationDestination(
              icon: Icon(CupertinoIcons.home),
              selectedIcon: Icon(CupertinoIcons.house_fill),
              label: 'Home',
            ),
            NavigationDestination(
              icon: Icon(Icons.explore_outlined),
              selectedIcon: Icon(Icons.explore_rounded),
              label: 'Explore',
            ),
            NavigationDestination(
              icon: Icon(CupertinoIcons.bookmark),
              selectedIcon: Icon(CupertinoIcons.bookmark_solid),
              label: 'Saved',
            ),
            NavigationDestination(
              icon: Icon(CupertinoIcons.person),
              selectedIcon: Icon(CupertinoIcons.person_fill),
              label: 'Account',
            ),
          ],
       ),
    );
  }
}

The PlayStore Killer

Akash Pattnaik — Tue, 27 Feb 2024 18:29:08 +0000

It's 2024, and PlayStore is dominating the space in androids.

Towards the mid-end of 2023, PhonePe announced their own AppStore for India called Indus AppStore to compete against Playstore. Feb 21st is the date it's going to be released.

Features 🚀

This new AppStore comes with various new features and here are a few to list ->

Support for 13 India regional Languages
No fee for developers to list their apps.
AI integrated, you just need to enter your app details in english and they auto generate the same for the other 13 regional languages.
Ease of WebUI.

This is something I created as my first app to be listed on Indus. I invite you all too, to shift from playstore and get started with Indus.

Active theme switch in flutter

Akash Pattnaik — Wed, 14 Feb 2024 07:23:04 +0000

Hello fam 👋!

This tutorial shows the easiest way to setup adaptive themes in your flutter applications and instantly change them whenever user requests. Stick till then end for a better grasp at the concept!

Required Packages 📦
Initialization 🤩
Theme change page 🎢

Required Packages 📦

Initialization 🤩

Here we are using the flex_color_scheme package for the themes, you can have your custom ones setup as you like. So the ease of explaining, this package fits the best!

In your main.dart file, add the following code. Don't worry, It's well explained below!


void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  // This is important
  await Hive.initFlutter();
  await Hive.openBox('user');
  // Make use the theme key is set!
  if (!Hive.box('user').containsKey('theme')) {
    await Hive.box('user')
        .put('theme', FlexScheme.values.indexOf(FlexScheme.dellGenoa));
  }
  runApp(const App());
}

class App extends StatefulWidget {
  const App({super.key});

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


class AppState extends State<App> {
  @override
  Widget build(BuildContext context) {
    // This is a Widget that auto updates the state when data in the keys that are being watched are changed.
    return ValueListenableBuilder(
      // the box MUST exists, so look at the main function above
      valueListenable: Hive.box('user').listenable(keys: ['theme']),
      builder: (BuildContext context, Box box, Widget? widget) {
        return MaterialApp(
          title: 'FlutterSimplified',
          // I am putting dart theme by default, you cant put that too as a listenable key and change on user request!
          theme: FlexThemeData.dark(
              scheme: FlexScheme.values[box.get('theme')], useMaterial3: true),
          debugShowCheckedModeBanner: false,
          home: const MyHomePage(), // A StatefuleWidget here
        );
      },
    );
  }
}

Theme change page 🎢

Now, let's make a page where user can select the theme they want!

Let's but that in theme_selector.dart.

import 'package:flex_color_scheme/flex_color_scheme.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:hive_flutter/hive_flutter.dart';

class ThemeSelector extends StatefulWidget {
  const ThemeSelector({super.key});

  @override
  State<ThemeSelector> createState() => _ThemeSelectorState();
}

class _ThemeSelectorState extends State<ThemeSelector> {
  Box box = Hive.box('user');

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          'Imggy',
          style: TextStyle(
            fontWeight: FontWeight.w500,
          ),
        ),
        leading: IconButton(
          icon: const Icon(CupertinoIcons.back),
          onPressed: () => Navigator.pop(context),
        ),
        automaticallyImplyLeading: false,
      ),
      body: ListView.builder(
        itemCount: FlexScheme.values.length,
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
            leading: Icon(
              CupertinoIcons.color_filter,
              color: box.get('theme') == index ? Colors.blue : null,
            ),
            title: Text(FlexScheme.values[index].toString().split('.').last),
            onTap: () {
              box.put('theme', index);
              setState(() {});
              ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
                content: Text('🍨 Theme has been selected!'),
              ));
              Navigator.pop(context);
            },
            trailing:
                box.get('theme') == index ? const Icon(Icons.check) : null,
          );
        },
      ),
    );
  }
}

The output should be something like this ->

Notifications in flutter

Akash Pattnaik — Mon, 12 Feb 2024 16:33:09 +0000

Hello fam 👋!

This tutorial shows the easiest way to implement push notifications in flutter. Stick till then end for a better grasp at the concept!

It's 2024 and still most of these docs are quite confusing. Awesome Notifications package has an extremely well documented docs but all in one page. This makes it look like shit!

Required Packages 📦
Initialization 🤩
Sending Notifications 📨
Setup Firebase 🔥
Sending Notifications 🛎️
Setup Notifications in background 🚀

Required Packages 📦

Initialization 🤩

In the main.dart file, under the main void, add the following codes -

import 'package:awesome_notifications/awesome_notifications.dart';
import 'package:firebase_messaging/firebase_messaging.dart';
import './firebase_options.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(const App());
  await FirebaseMessaging.instance.setAutoInitEnabled(true); // Enables the notifications automatically!
  await FirebaseMessaging.instance.requestPermission(provisional: true); // Request the user for permissions of notifications
  await FirebaseMessaging.instance.getToken(); // The is used to get a token, specific for each user, generated by firebase
  await AwesomeNotifications().initialize(null, [
    NotificationChannel(
        channelKey: 'random_unique_key',
        channelName: 'A name visible to the user',
        channelDescription: 'Description',
    ),
  ]);
}

This registers the channel along with the key with android system. Now you can use these channels, through the keys to send notifications to the users!

Sending Notifications 📨

Assuming that you have a basic knowledge of flutter (this tutorial isn't for you if you don't), use these codes inside the initState function of your homepage that is shown to the user after login!

import 'package:awesome_notifications/awesome_notifications.dart';
import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:flutter/material.dart';

class HomePageState extends State<HomePage> {
  AwesomeNotifications notifications = AwesomeNotifications();
  @override
  void initState() {
    super.initState();
    FirebaseMessaging.onMessage.listen((RemoteMessage event) async {
      await notifications.createNotification(
        content: NotificationContent(
          id: 0, // Doesn't really matter that much
          channelKey: 'key', // The unique key that you registered at the start
          title: event.notification!.title!,
          body: event.notification!.body!,
          notificationLayout: NotificationLayout.BigPicture,
          bigPicture: event.notification!.android!.imageUrl,
        ),
        actionButtons: [
          NotificationActionButton(key: '_', label: 'Ok', autoDismissible: true),
        ],
      );
    });
  }
}

Setup Firebase 🔥

From the above code you can clearly derive that Firebase is needed for this project. So go ahead and add it! Then, come the most crucial part!

Under engage section, goto messaging!

Sending Notifications 🛎️

It's your first time, so click on create a new campaign! Fill it up like this.

This is how it will be shown on your device!

Setup Notifications in background 🚀

The above code only works if the app is open in the foreground and user is using it. It DOES NOT work if app is closed or even in background apps.

For that, there is a simple and quite an easy fix!

In the main.dart file, add this ->

Future<void> backgroundNotificationHandler(RemoteMessage event) async {
  await AwesomeNotifications().createNotification(
    content: NotificationContent(
      id: 0,
      channelKey: 'key',
      title: event.notification!.title!,
      body: event.notification!.body!,
      notificationLayout: NotificationLayout.BigPicture,
      bigPicture: event.notification!.android!.imageUrl,
    ),
    actionButtons: [
      NotificationActionButton(key: '_', label: 'Ok', autoDismissible: true),
    ],
  );
}

void main() {
    FirebaseMessaging.onBackgroundMessage(backgroundNotificationHandle);
}

DEV Community: Akash Pattnaik

I got tired of Googling Docker commands, so I built an interactive cheatsheet

What I built

Left panel — the cheatsheet

Center panel — the interesting part

Right panel — the full reference

The tech (keeping it boring on purpose)

The DATA.json schema — the real project

Things I learned building this

What's next

Try it / contribute

For all vibe coders wanting to build apps - I strongly advise you read this once before you go on to chose a random framework!!

Why Flutter beats React Native ?

Why Flutter beats React Native ?

Table of Contents:

Performance 🚀

Consistent UI Across Platforms 🎨

Hot Reload ⚡

Rich Widget Library 🛠️

Native Feel Without the Hassle 📱

Conclusion

Connect with me 🙍

10 Secret Tips That Make You Better at DSA

Introduction

Table of Contents 💻

1. Master the Basics Before Chasing Advanced Topics

2. Think in Patterns, Not Problems

3. Always Dry Run Your Code

4. Learn Time and Space Complexity Visually

5. Write Code on Paper (Yes, Really!)

6. Solve Fewer Problems, but Solve Them Deeply

7. Revisit Old Problems Regularly

8. Explain Your Solution Out Loud

9. Learn When Not to Use a Data Structure

10. Build Consistency, Not Motivation

Final Thoughts

End of ElephantSQL 😔

File API

File API

Example Code (Not a part of explanation)

DOM API

DOM

Example Code (Not a part of explanation)

fetch API

fetch API

Example Code (Not a part of explanation)

The new BottomBar in Flutter

The PlayStore Killer

Features 🚀

Active theme switch in flutter

Contents

Required Packages 📦

Initialization 🤩

Theme change page 🎢

Notifications in flutter

Contents

Required Packages 📦

Initialization 🤩

Sending Notifications 📨

Setup Firebase 🔥

Sending Notifications 🛎️

Setup Notifications in background 🚀

**9. Learn When Not to Use a Data Structure**

`File` API

`DOM`

`fetch` API