DEV Community: Kingkor Roy Tirtho

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

VSCode extensions that you need [Webdevs]🚀🔧

Kingkor Roy Tirtho — Wed, 15 Sep 2021 17:00:05 +0000

VSCode lover? I know extensions are our life support for coding. And if you're a web dev you're in great luck. Below are some useful extensions/configs that will make you amazed after learning their use-cases & benefits

This is just a small description of the extensions so do not expect full details here. You can learn more info about the extensions from their respective docs/repositories

BTW, all the credit for images & GIFs that are embedded below goes to their respective extension authors

1. Visual Studio IntelliCode

You know about Tabnine but do you know Microsoft already provides an AI-powered autocompletion tool? Visual Studio Itellicode is an AI-powered autocompletion tool for AI-enhanced development workflow. It's really lightweight & doesn't require any extra runtime like other autocompletion tools. It uses Microsoft Azure cloud services to process the information instead of local computer

2. HTML Tag wrap Abbreviation (Emmet)

You can wrap a piece of code with curly braces/brackets/quotes really simply. But that doesn't work for HTML tags. You've to manually write the opening/closing tags.

But VSCode has a built-in emmet extension. Using this you can do so much stuff & even wrap it with an HTML tag

Here's how to do it

select the content you want to wrap
Type CTRL+SHIFT+p then search "Emmet: Wrap with Abbreviation"
Select the first one & type out the HTML tag name e.g div

More precisely, you can set a custom shortcut for the command configuring key-maps using CTRL+k+s shortcut. Just set your desired key-binding e.g CTRL+k+SHIFT+w for the command "Emmet: Wrap with Abbreviation". Make sure your desired key-binding is not used for other commands or it might remove that command's functionality

3. Wrap Console

Tired of manually writing console.log() & prefixing with labels to identify the console log coming from which file? Well, this extension gives you the superpower to write the complete console.log with a single shortcut

It supports string prefixes, dynamic (you've to type) prefixes or no prefixes at all

4. Document this

It's a JavaScript/Typescript JSDoc generator. Instead of writing javascript doc comments/structures manually, you can inject a prebuilt configurable JSDoc structure with a simple command/shortcut

5. Template string converter

It's really annoying to covert normal strings to template strings when you've to concat other strings into that string. This is where template-string-converter makes life a breeze

6. ES7 React/Redux/React-Native/JS snippets

JavaScript and React/Redux snippets in ES7+ with Babel plugin features for VS Code

Your React/React-Native component is only one snippet way thanks to this awesome snippet extension. It offers all the cool snippets for generating boilerplate code for redux & react components. Also offers new ES7 syntax-related snippets. Saves a lot of time while creating react components. It supports Typescript too

7. Draw.io integration

Fan of popular diagram application diagrams.net (previously known as draw.io)? Well, you don't have to install any application/visit the website to create/edit/open diagrams. You can do this in VSCode. As draw.io is web-based & vscode runs on top of Electron thus it can be run easily inside VSCode. It supports collaborative editing too

8. Error lens

Tired of hovering over variable/function/instance names to read the error message? Well, error-lens saves you. Instead of showing error info on hover, it'd show it on the right of the error occurring place

9. Path Intellisense

The most time-saving extension I've ever found. It autocompletes paths on strings based on the relative path. Also shows every file/folder with its appropriate icon (works with 3rd party icons too). Works with any language/file

10. Indent Rainbow

Indentation is really confusing & even though it's nothing much but it always troubles so this extension fixes this all with colors

11. Todo tree

It's hard to find the TODO comments in the project. Sometimes I found certain Todos 1/2 months after writing😅. VSCode Todo Tree helps you find & navigate all the comments starting with the TODO: clause. It works for every programming languages

12. IntelliSense for CSS class names in HTML

These extensions autocompletes locally declared CSS class names in HTML & HTML like Files (JSX, Vue, pug etc..)

13. Styled components

Support for CSS in JS (CSS syntax highlighting/autocomplete). Even though it's created for styled-components library but it works with other libraries well if these are using string literals for declaring styles. Only works with functions named like styled.<html-tagname>\, `styled\`\& css\``

14. :emojisense:

Autocompletion for emojis in VS Code. Surprisingly it works in the comment box of the Git Integration Tab too. That means you can commit with emojis too. Commenting with emojis makes the comment more descriptive & this extension makes it easier

15. Code Spell Checker

A basic spell checker that works well with camelCase code. An awesome must-use extension to keep your code user-friendly & safe from typos. You can even create your own word library by saving unknown yet right words. Also provides suggestions

16. Color Highlight

This extension styles CSS/web colors found in any file. Extremely useful for frontend developers

17. Auto Rename Tag

It's common to rename/change your HTML tags. But it wastes a lot of time. With auto rename tag you can easily edit both starting & ending tags by editing only either one of 'em

After VSCode 1.60 update there's a new feature called linked-editing that might replace the use case of this extension. But you've to manually activate the mode by shortcut or command pallet where this extension just works. But as always, it's your choice what you want to use

18. SQL Tools

Want to run simple queries/insertions/update/delete? Why always have to open the DB Administration Application? It takes time & resources to startup. Also hurts the developer experience. But VSCode SQL Tools solves this problem. Simple & easy SQL statements can be run easily against any SQL database. Just install the driver extension & you're good to go. It even supports autocomplete for the currently connected database

19. MongoDB for VS Code

Just like SQLTools but for NoSQL MongoDB

20. Regex Previewer

A total life-saver extension. Only grown men/women know the pain of creating regex as there is no way to know if it'll work until running it. But this extension lets one create regex separately, interactively & super quickly. Just write the regex in your file & write the words/sentences that you want to match with that regex

That's all folks. Hope you like it & don't be unhappy if you're using 30-40+ extensions. As a developer, I can guarantee you extensions are our life support🙂

Nestjs🐺⚡ | The framework of Nodejs (Part-3) | Database Integration, TypeORM

Kingkor Roy Tirtho — Sun, 05 Sep 2021 12:12:16 +0000

If you haven't read part-1 & part-2, please first read those else you'll feel this article is out of context

In this part, I'll be discussing

Nestjs Database integration
Basic Typeorm

Database Integration

A major part of a backend service/API is its Database Management System

Important: This article is about Nestjs, not about Databases (SQL/NoSQL) so I'm assuming, one reading this will have basic knowledge about DBMS

As Nestjs is only an abstraction over typical Nodejs server APIs/Package, it supports all kinds of popular databases & most of their ORMs. It supports the following database drivers & ORMs:

Typeorm (SQL/NoSQL )
MikroORM (SQL/NoSQL)
Knex
Prisma
mongoose (NoSQL)

I'm using TypeORM here as IMO it matches the API scheme of Nestjs the most because of its decorator pattern. Also using PostgreSQL as the Database. You can use other databases & ORMs if you want. The configuration pattern of all of them is mostly the same. Also, there's always an official/3rd-party package & documentation for your choice. Just google for it

To get started first install:

# for npm users*
$ npm i @nestjs/typeorm typeorm psql
# for yarn user
$ yarn add @nestjs/typeorm typeorm psql

Note!: Install PostgreSQL driver or the DB driver you've chosen first in your OS. For PostgreSQL, installation instructions can be found here

Now create following files in the root of the project:

.env (for storing database credentials & secrets)
config.ts (for importing the env vars)
ormconfig.ts (database connection configurations)

#### .env #####
POSTGRES_PASSWORD=simplepassword
POSTGRES_DB=hello
NODE_ENV=development
DATABASE_USERNAME=postgres # you can put your username of your OS
DATABASE_HOST=localhost # use `postgres` if using PostgreSQL Docker Container
DATABASE_PORT=5432
PORT=4000

Now import this environmental variables & re-export for the project

///// config.ts //////
export const NODE_ENV = process.env.NODE_ENV;
// all the env vars
export const DATABASE_HOST = process.env.DATABASE_HOST;
export const DATABASE_PORT = process.env.DATABASE_PORT
    ? parseInt(process.env.DATABASE_PORT)
    : undefined;
export const DATABASE_NAME = process.env.POSTGRES_DB;
export const DATABASE_PASSWORD = process.env.POSTGRES_PASSWORD;
export const DATABASE_USERNAME = process.env.DATABASE_USERNAME;
export const PORT = process.env.PORT ?? 4000;

Create the Database connection:

///// ormconfig.ts /////
import {
    DATABASE_HOST,
    DATABASE_NAME,
    DATABASE_PASSWORD,
    DATABASE_PORT,
    DATABASE_USERNAME,
    NODE_ENV,
} from "./config";
import { PostgresConnectionOptions } from "typeorm/driver/postgres/PostgresConnectionOptions";

// db configuration for the orm
const ormconfig: PostgresConnectionOptions = {
    type: "postgres", // name of db you'll be using
    username: DATABASE_USERNAME,
    database: DATABASE_NAME,
    host: DATABASE_HOST,
    port: DATABASE_PORT,
    password: DATABASE_PASSWORD,
    uuidExtension: "uuid-ossp", // for using `uuid` as the type for Primary-Column `id` column
    synchronize: NODE_ENV !== "production",
};

export = ormconfig;

Now generate a module named database where all the database-related configuration/files will be saved. The following command will generate it:

$ npx nest g module database

Inside database.module.ts register database connection of the configuration using TypeORM:

///// database.module.ts //////

import { Module } from '@nestjs/common';
import ormconfig from "../../ormconfig";
import { TypeOrmModule } from "@nestjs/typeorm";

@Module({
  imports: [
       // registers Database config
        TypeOrmModule.forRoot({
            ...ormconfig, //db config
            entities: [], // put the constructor of all classes that are an Entity
        }),
    ],
})
export class DatabaseModule {}

Hopefully, after restarting your application, your API/service will be connected with the Database

Tip!: You can pass an Array of ORM configurations in TypeOrmModule.forRoot() function for multiple database connections. It allows using any type of database together

TypeORM

This tutorial isn't about TypeORM but I'll give a little explanation of it to get started. You can find more information about it in their docs

TypeORM API for SQL/NoSQL varies. Here I'll be showing the SQL part only. If you're using NoSQL DB e.g. MongoDB with TypeORM then you can learn it from here

If you had read part-2, you may know, there I was using a class property as an In-memory temporary database. Now we'll reflector that part to use the new PostgreSQL DB with TypeOrm

First, create src/database/entities/hello-record.entity.ts, then create a TypeORM schema:

///// hello-record.entity.ts /////

import { Entity, PrimaryGeneratedColumn, Column } from 'typeorm';

@Entity('hello-record')
export class HelloRecord {
  @PrimaryGeneratedColumn('uuid')
  id!: string;

  @Column('varchar', { length: 16 })
  from!: string;

  @Column('text')
  msg!: string;
}

You can declare a class a TypeORM entity using @Entity() decorator. You can give the entity a name (which you should always do) or let typeorm create a name from the class's displayName

To create a primary column, @PrimaryGeneratedColumn is used. You can use rowId, incremented, or uuid as your primary column type. Remember to enable the UUID extensions of your PostgreSQL Database or any SQL database for using uuid

To create a Column, @Column decorator is used. You can specify the type of the column or anything of that column. I used 16 characters long varchar for column "from" because it'd be the IP address of the user who has posted a hello message. Also, I used the type text for the "msg" column as we don't want to limit anyone to only 240 characters long like some social media. That's inhumanity🤐

Now to let TypeORM know HelloRecord exists, we've to put it in the entities array of Typeorm.forRoot() function in database.module.ts. You've to put all entities that you're gonna use in the application in that array. BTW, if you're using multiple database connections, put entities, that are specifically created for the specific database in the specific database's configuration object's entities array. The same entity won't work for multiple databases

///// database.module.ts //////

// .... (other imported stuffs)
import { HelloRecord } from './entities/hello-record.entity';

@Module({
  imports: [
    TypeOrmModule.forRoot({
      ...ormconfig,
      // put all the entities related to the database in here
      entities: [
        HelloRecord,
      ],
    }),
  ],
})
export class DatabaseModule {}

Important!: Never use inheritance in entity/schema declaration. If some of your entities share the same type of properties/columns, don't make a common class for them & then inherit from it. It can cause schema synchronization issues as TypeORM won't be able to know the type of that parent class's properties. Schema inheritance is not DRY instead it's an overuse of DRY (Don't Repeat Yourself). So one should never do that

Now that we've created the entity, let's use it in our HelloService. But we've to import it in HelloModule to let Nest know it belongs to HelloModule

////// hello.module.ts //////

// .... (other imported stuff)
import { TypeOrmModule } from '@nestjs/typeorm';

@Module({
  imports: [
    forwardRef(() => HiModule),
    // labelling the entity as `HelloModule`'s Repository
    TypeOrmModule.forFeature([HelloRecord]),
  ],
  providers: [HelloService, ByeService],
  controllers: [HelloController],
  exports: [HelloService],
})
export class HelloModule {}

TypeOrmModule.forFeature will give access to the HelloRecord entity in all providers/controllers of HelloModule. BTW, you can't label the same entity in different modules multiple times. If you want to have access to that entity in other modules, just import the provider that is using that entity

Now let's refactor HelloService to use the new Entity to save, modify & read the hello messages:

////// hello.service.ts ///////

import { forwardRef, Inject, Injectable } from '@nestjs/common';
import { HiService } from 'src/hi/hi.service';
import { ByeService } from './bye.service';
import { InjectRepository } from '@nestjs/typeorm';
import { Repository } from 'typeorm';
import { HelloRecord } from '../database/entities/hello-record.entity';

@Injectable()
export class HelloService {
  constructor(
    @Inject(forwardRef(() => HiService))
    private hiService: HiService,
    @Inject(forwardRef(() => ByeService))
    private byeService: ByeService,
    @InjectRepository(HelloRecord)
    private helloRecordRepo: Repository<HelloRecord>,
  ) {}

    async findById(id: string) {
    return await this.helloRecordRepo.findOneOrFail({ id });
  }

  async create(msg: string, ip: string) {
    const newMsg = this.helloRecordRepo.create({ msg, from: ip });
    return await newMsg.save();
  }

  async deleteById(id: string) {
    return await this.helloRecordRepo.delete({ id });
  }

  getHello(arg: string) {
    return `hello for ${arg}`;
  }

  // a method that uses `hiService`
  hiServiceUsingMethod() {
    return this.hiService.getHi('hello');
  }

  byeServiceUsingMethod() {
    return this.byeService.getBye('hello');
  }

TypeORM provides all the necessary methods to create-delete-modify data. Below are some of those that are used mostly:

EntityName.findOne (Finds by criteria & returns the first matched record as a Promise)
EntityName.findOneOrFail (Just like findOne but throws an error if no record is found. Always try using it instead of findOne as it supports error-handling)
EntityName.find (finds all the records matching criteria & returns as a Promise)
EntityName.save (saves any object passed to it matching the schema of that entity. Can be used to modify/update a record too)
EntityName.create (creates a new soft record which will be passed as a parameter to EntityName.save)
EntityName.delete (deletes all the records matching the passed criteria)
EntityName.createQueryBuilder (Alternative query API that uses strings to manipulate SQL transactions instead of using Object-Oriented approach. It's more like a functional approach. It follows the popular builder-pattern & supports method chaining. It's closer to native SQL)

Working final Application:

Here, I end the Nestjs🐺⚡ | The framework of Nodejs series

Nestjs is an awesome backend framework providing all the necessary tools needed for developing enterprise-grade, reliable server applications/APIs. This series is only a higher-level overview of Nestjs where very few concepts & features of Nestjs were covered. Nestjs offers much more than that. Nest's official docs provide a much deeper & clearer overview & tutorial about Nestjs. They also provide Enterprise support

Nestjs is not a tool/framework/library only, it's a guide for you too

Nestjs🐺⚡ | The framework of Nodejs (Part-2) | Modules, Circular Dependency, Guards

Kingkor Roy Tirtho — Sat, 14 Aug 2021 13:38:16 +0000

If you haven't read the part-1, please first read that else you'll feel this given information is out of context

In Part-2, I'll be discussing Nestjs Modules, Circular Dependency, Guards

1. Modules

In part-1, there was a smidge description of modules. Modules in Nestjs aren't global instead it has depth. But can be shared across any other modules too. Though it supports Global Module like Angular, it is more recommended to keep Services/Controllers in the module where they're mostly used in Nestjs

Most of the time modules will be generated through the NestCLI & providers/controllers generated in that module's context will get automatically added by the CLI. These are called feature modules

Here's a module example:

////// hi.module.ts //////
import {Module} from "@nestjs/common"
import HiService from "./hi.service";
import HiController from "hi.controller";

@Module({
  providers: [HiService],
  controllers: [HiController],
  exports: [HiService]
})
export class HiModule{
}

////// hello.module.ts//////
import {Module} from "@nestjs/common"
import HelloService from "./hello.service";
import HelloController from "hello.controller";
import HiModule from "../hi/hi.module"

@Module({
    imports: [HiModule],
  providers: [HelloService],
  controllers: [HelloController],
  exports: [HelloService]
})
export class HelloModule{
}

The @Module decorator's controllers array-property is used for all the controllers that the module uses or all the classes decorated with the @Controller decorator. The providers property is used for service or classes that are decorated with an @Injectable decorator. Remember, anything Injectable is a provider & you've to put it in providers field to be able to inject/use it.

The exports property is used to export/expose the providers that can be shared with other modules. Put any providers that you want to inject/use in other modules

The imports property is the exact opposite of exports. To be able to use/inject any external providers in a provider/controller of another module, you've to add that exported provider's module in the imports field of another module

2. Circular Dependency

Often times you want to use a provider in another module's provider & another modules' provider in that provider/controller. In this case, it creates a circular dependency. Circular dependencies can arise in Nest between modules and between providers. One should always try best to avoid Circular Dependency in Nestjs but sometimes it's not possible. In this case, forwardRef & @Inject parameter decorator comes handy for providers which are within the same module context

Example of using forwardRef accross providers from same module to resolve circular dependency:

///// bye.service.ts /////
import { forwardRef, Inject, Injectable } from '@nestjs/common';
import { HelloService } from './hello.service';

@Injectable()
export class ByeService {
  constructor(
        // injecting HelloService
    @Inject(forwardRef(() => HelloService))
    private helloService: HelloService,
  ) {}

  getBye(arg: string) {
    return `bye bye, ${arg}`;
  }

    // it uses `helloService` & is within same module
  helloServiceUsingMethod() {
    return this.helloService.getHello('bye');
  }
}

///// hello.service.ts /////
import { forwardRef, Inject, Injectable } from '@nestjs/common';
import { ByeService } from './bye.service';

@Injectable()
export class HelloService {
    // ...other stuff

  constructor(
        // injecting ByeService
    @Inject(forwardRef(() => ByeService))
    private byeService: ByeService,
  ) {}

  getHello(arg: string) {
    return `hello for ${arg}`;
  }

  byeServiceUsingMethod() {
    return this.byeService.getBye('hello');
  }

    // ....other stuff
}

Let's add newly created ByeService in /hello module or HelloModule's providers field

////// hello.module.ts //////
// import stuff
import {ByeService} from "./bye.service"

@Module({
  providers: [HelloService, ByeService], // new bye-service added
  controllers: [HelloController],
  exports: [HelloService]
})
export class HelloModule{
}

Now, what about providers that are from the external modules? No worries, just do like above for the providers & just use forwardRef in the imports field of both modules to import each other's providers in their context

Example of forwarding ref of external providers across modules:

////// hi.module.ts //////
import { forwardRef, Module } from '@nestjs/common';
import HiService from "./hi.service";
import HiController from "hi.controller";
import HelloModule from "../hello/hello.module";

@Module({
  imports: [forwardRef(() => HelloModule)], // importing HelloMoule using forwardRef
  providers: [HiService],
  controllers: [HiController],
  exports: [HiService] // exporting hi-service for using in hello-service
})
export class HiModule{
}

////// hello.module.ts//////
import {Module, forwardRef} from "@nestjs/common"
import HelloService from "./hello.service";
import HelloController from "hello.controller";
import HiModule from "../hi/hi.module";
import ByeService from "./bye.service";

@Module({
    imports: [forwardRef(() => HiModule)],
  providers: [HelloService, ByeService],
  controllers: [HelloController],
  exports: [HelloService] // exporting hello-service for using in hi-service
})
export class HelloModule{
}

Now that both module's providers are available in each other's scope, let's use forwardRef in their providers HelloService & HiService to resolve their circular dependence:

///// hello.service.ts //////
import {Injectable, Inject, forwardRef} from "@nestjs/common"
import HiService from "../hi/hi.service"

@Injectable()
export class HelloService{
  // .... other properties/methods

    constructor(
        // just like provider-scoped circular dependency
        @Inject(forwardRef(()=>HiService))
        private hiService: HiService
     ){
    }

    getHello(arg: string){
        return `hello for ${arg}`
    }

    // a method that uses `hiService`
  hiServiceUsingMethod(){
        return this.hiService.getHi("hello");
  }
  // .... other properties/methods
}

///// hi.service.ts /////
import {Injectable, Inject, forwardRef} from "@nestjs/common"
import HelloService from "../hello/hello.service"

@Injectable()
export class HelloService{
  // .... other properties/methods

    constructor(
        @Inject(forwardRef(()=>HelloService)) private helloService: HelloService
     ){
    }

    getHi(arg: string){
        return `hi for ${arg}`
    }

    // a method that uses `helloService`
  helloServiceUsingMethod(){
        return this.helloService.getHello("hi");
  }
  // .... other properties/methods
}

Make sure your code does not depend on which constructor is called first as the order of instantiation of these provider classes are indeterminate

There's an advanced alternative to forwardRef. The ModuleRef class is provided from @nestjs/core for dynamically instantiating both static and scoped providers. It can be mainly used to navigate the internal list of providers and obtain a reference to any provider using its injection token as a lookup key. ModuleRef can be injected into a class in the normal way. Learn more about [ModuleRef](https://docs.nestjs.com/fundamentals/module-ref)

3. Guards

According to Nestjs docs, Guards have a single responsibility. It's their job to determine if a request will be handled by the controller or not depending on certain conditions (Specifically user-defined logic). It's useful for authentication/authorization & is the recommended way to handle authentication/authorization in Nestjs. Though authentication/permissions etc.. can be done with middleware & is done in express or other HTTP servers as these don't have connected strong context & need no reason to know about which method will be used to handle the request. Middlewares only have the next function, nothing else thus it's kinda dumb for Nestjs. But Guards have access to the execution context. It's designed more like exception filters, pipes & interceptors.

Guards are executed after each middleware but before any interceptor or pipe

Guards are a kind of provider as its class also needs to be annotated with @Injectable decorator but it has to implement interface CanActivate or provide the method canActivate in case of JS

Most of the time authentication will be handled using passport or similar libraries. And Nestjs docs has an explanation of how to use passport to make a Authentication flow in Nestjs here. Here, this AuthGuard is usable but not production safe. Just using it for demonstration purpose

Example of an AuthGaurd:

////// auth.guard.ts /////

import { Injectable, CanActivate, ExecutionContext, Logger } from '@nestjs/common';
import { Observable } from 'rxjs';

function validateToken(token: string): boolean{
    return true
}

@Injectable()
export class AuthGuard implements CanActivate {
    logger: Logger = new Logger(AuthGuard.name)  

  canActivate(
    context: ExecutionContext,
  ): boolean | Promise<boolean> | Observable<boolean> {
        try{
          // gives access to the express/fastify request object
        const request = context.switchToHttp().getRequest();
            // jwt/any kind of token
        const token = request?.hearders?.["Authorization"]?.split(" ")[1]
            if(!token)return false; // no token no entry

          return validateToken(token)
        }
        catch(e){
            this.logger.error(e)
            return false
        }
  }
}

Just like exception-filter/pipes you can use Guards in method-scope/controller-scope using @UseGaurds() decorator. It can take any amount of Guards as its arguments

method-scoped Guard example:

////// hello.controller.ts ///////
// ... import stuff
import {UseGuards} from "@nestjs/commmon"
import {AuthGuard} from "../../guards/auth.guard"

@Controller()
export class HelloController{
  // ..... other stuff

    @Get("/restricted-data")
    @UseGuards(AuthGuard)      // or pass it already being instantated as `new AuthGuard()`                             
    async getRestrictedData(){ // if it doesn't require dependency injection
        // ... logic
        return {};
    }

    // ..... other stuff
}

BTW, you can assign new properties to the request object in the Guard & can access it through @Req() parameter-decorator in any Controller route handler such as getRestrictedData in HelloController

Just like pipes/exception-filters, you can use Guards globally with the app's useGlobalGaurds method. Then no need to use @UseGaurds() for each controller/handler that requires that Guard

Example of global guards:

///// main.ts /////
// ...import stuff
import {AuthGuard} from "./guards/auth.guard"

async function bootstrap(){
    // ...other stuff

    app.useGlobalGuards(new AuthGuard())

    // ...other stuff
}

bootstrap()

But it'll throw an error if you're using/injecting other providers inside that Guard. But if you want to keep both dependency-injection & global scope then providing it through global AppModule & then setting it as a global guard will work

DI capable Global Guard:

///// app.module.ts //////
// ...import other stuff
import {AuthGuard} from "./guards/auth.guard"

// unique key/id for selecting the gaurd from within the NestFactory instance
export const AUTH_GUARD = "unqiue-auth-guard";

@Module({
  // ...other stuff

    providers: [
        AppService,
        {provide: AUTH_GUARD, useClass: AuthGuard}
    ],

  // ...other stuff
})
export class AppModule{
}

///// main.ts /////
// ...import stuff
import {AUTH_GUARD} from "./app.module";

async function bootstrap(){
    // ...other stuff

    const authGuard = app.select(AppModule).get(AUTH_GUARD)

    app.useGlobalGuards(authGuard);

    // ...other stuff
}

bootstrap()

Now, there another problem arises. How will one make a route public/unrestricted from this Guard? This is where the Reflector comes in handy. It's a special class provided by @nestjs/core that can be accessed in any module-scoped providers/controllers or simply, in any controller/provider/guard/exception-filter/interceptor/pipe that isn't instantiated globally

With Reflector, @SetMetadata() decorator & custom-decorator we can simply handle this case

@SetMetadata() is a both method & class decorator provided by @nestjs/common & can be used to set special key-value metadata for a method/class & this can be accessed through the Reflector that is injected in every @Injectable() & @Controller() available in AppModule's context

Custom Decorator example:

///// public.decorator.ts /////

import { SetMetadata } from "@nestjs/common";

export const IS_PUBLIC_KEY = "THIS_ROUTE_IS_PUBLIC"

// decorators are functions inside function with access to extra metadata provided 
// by the JSVM (JavaScript Interpreter). So you can ovbiously call 
// a decorator in a function like normal functions but just remember to `return` it to
// let the decorator's inner function to access those metadata about the class/method/parameter/property
// its currently being applied to
export const Public = () => SetMetadata(IS_PUBLIC_KEY, true);

// the decorator flow-> `Public` is a function which returns & calls `SetMetadata`
// function which also returns & calls an inner function within it. Its called
// **function-currying**
// More on Wikipedia: https://en.wikipedia.org/wiki/Currying

Now in AuthGuard's canActivate method lets get the metadata of currently active class/method in context:

////// auth.guard.ts /////
// ...import stuff
import { Reflector } from "@nestjs/core";
import {IS_PUBLIC_KEY} from "./decorators/public.decorator"

@Injectable()
export class AuthGuard implements CanActivate {
        // ...other stuff

        // just add the Reflector as a type
    constructor(private readonly reflector: Reflector){}

  canActivate(
    context: ExecutionContext,
  ): boolean | Promise<boolean> | Observable<boolean> {
        try{
            // accessing the passed metadata with its unique key/id
            // within the current execution context
            const isPublic = this.reflector.getAllAndOverride<boolean>(
                        IS_PUBLIC_KEY,
                        [
              context.getHandler(),
              context.getClass(),
                  ]
                    );
            if(isPublic) return true;

          // ... other validation logic/stuff
        }
        catch(e){
            this.logger.error(e)
            return false
        }
  }
}

Now we only have the job to apply the custom @Public() method/class decorator in a route to make it unrestricted. If you've read part-1 then you know that HelloController (created in part-1) has a GET /hello route that responds with hello on request. But for the AuthGuard, that route will be restricted. But what in the world should make someone not getting a warm hello?!. So let's make it open to everyone:

////// hello.controller.ts ///////
// ... import stuff
import {Public} from "../decorators/public.decorator"

@Controller()
export class HelloController{
  // ..... other stuff

    @Get("hello")
  @Public() // now everyone gets a hello ;)
    async replyHello(){
        // ... logic
    }

    // ..... other stuff
}

Here's the complete application with today's update

After update, All the routes except /hello will return

{"statusCode": 403,"message": "Forbidden resource", "error": "Forbidden"}

Providing any jwt-token in this Bearer <token> format with request-header's Authorization field will make the protected routes work for now

DEV Community: Kingkor Roy Tirtho

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

Query Refetch & Stale Time

Query status

Mutations

Optimistic Updates

Hooks

useQuery

useMutation

Social

Dart-lang | Features you didn’t know exists

Operator Overloading/Overriding

Optional Unnamed Parameters

🔥Super Parameters🔥

Follow me on

Choosing Open Source License Wisely🤔

1. MIT

What to choose?

Which one’s my favorite? (Opinion)

Social

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

What are we Building?

Creating the project

Custom Themed Input

Basic Form

The Fun Part

Results

Social

React Forms Made Easy with react-binden🚀

Why created this?

How to use

Using useModel

Using Form

Using Input

Regex

Conclusion

VSCode extensions that you need [Webdevs]🚀🔧

2. HTML Tag wrap Abbreviation (Emmet)

4. Document this

5. Template string converter

6. ES7 React/Redux/React-Native/JS snippets

7. Draw.io integration

`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