
In this Tutorial I have created a responsive Developer Portfolio using Flutter. You can use this to change and learn a lot more about flutter and responsive design using it. Also use it as a base for your own Portfolio.

## Tutorial

<YouTube youTubeId="Q634baMiz5o" autoPlay="true" />

## Code 

You can get the source Code [here](https://github.com/desi-programmer/flutter).

Let's create a simple but amazing and responsive Developer Portfolio using Flutter Web.

Let's Create an Amazing and Responsive Developer Portfolio Using Flutter Web


## Cryptography

Cryptography in very simple terms can be said is hiding information. We can use this to put some information public, but it is not useful to others, and can only be used by the person it is intended for.

You can imagine this as some code that you have set and it can only by understood by you or the people you have shared with.

Here we will look into a very basic implementation of cryptography and hiding information.

## The System

Our system or algorithm, if you may, is simple.

We are going to revert and substitute the value of alphabets. So `a` shall be represented by `z` and `z` should be represented by `a`.

```txt
a = z
b = x
c = y
...
...
...
...
x = c
y = b
z = a
```

So our messages will be easily interchanged.
A Plain text, `Text` will then become `Gvcg`.

[Also See](https://sites.google.com/site/codesforscouts/reverse-the-alphabet)

## Character Dictionary

```js
{ 
    'a' : 'z',
    'b' : 'y',
    'c' : 'x',
    'd' : 'w',
    'e' : 'v',
    'f' : 'u',
    'g' : 't',
    'h' : 's',
    'i' : 'r',
    'j' : 'q',
    'k' : 'p',
    'l' : 'o',
    'm' : 'n',
    'n' : 'm',
    'o' : 'l',
    'p' : 'k',
    'q' : 'j',
    'r' : 'i',
    's' : 'h',
    't' : 'g',
    'u' : 'f',
    'v' : 'e',
    'w' : 'd',
    'x' : 'c',
    'y' : 'b',
    'z' : 'a',
}
```


## Python Code

There are obviously multiple ways to implement this, but since this is focused for absolute beginners , we will continue with a very basic way to implement it.

We will use concepts like `Python Dictionaries` to create key value pairs and cypher accordingly. In this way the code implementation will be simple and the data set will be easily visible.

```python
alphabetdict = { 
    'a' : 'z',
    'b' : 'y',
    'c' : 'x',
    'd' : 'w',
    'e' : 'v',
    'f' : 'u',
    'g' : 't',
    'h' : 's',
    'i' : 'r',
    'j' : 'q',
    'k' : 'p',
    'l' : 'o',
    'm' : 'n',
    'n' : 'm',
    'o' : 'l',
    'p' : 'k',
    'q' : 'j',
    'r' : 'i',
    's' : 'h',
    't' : 'g',
    'u' : 'f',
    'v' : 'e',
    'w' : 'd',
    'x' : 'c',
    'y' : 'b',
    'z' : 'a',
}

def generateCypherText():
    data = input("Enter Plain text : ")
    cypherText = ''
    for i in data:
        if i.lower() in alphabetdict.keys():
            cypherText = cypherText + alphabetdict[i.lower()]
        else:
            cypherText = cypherText + i
    print("Your Cypher Text is : " + cypherText)

def generatePlainText():
    data = input("Enter Cypher text : ")
    plainText = ''
    for i in data:
        if i.lower() in alphabetdict.values():
            value = [x for x in alphabetdict if alphabetdict[x]== i]
            plainText = plainText + value[0]
        else:
            plainText = plainText + i
    print("Your Plain Text is : " + plainText)


print("1. Generate Cypher Text")
print("2. Generate Plain Text")

choice = int(input("> "))

if choice == 1:
    generateCypherText()
else:
    generatePlainText()
```

Let's look at a very basic implementation of cryptography.

Cryptography - The Most Basic Implementation


##  Requirement 

I wanted to see if there is an alternative to `time` command on windows too, using which i can find execution time of a command. Did some search , found out a solution and in this Blog , I am mentioning it for future use or I hope it helps someone too.

## Solution 

PowerShell has a cmdlet for this called `Measure-Command`. And since powershell is available on almost all newer windows (including and after win 7), we are safe to go with this.

```
Measure-Command { echo hi }
```

Measure-Command captures the command's output.So `h1` won't be displayed on your terminal. You can redirect the output back to your console using Out-Default.

```
PS> Measure-Command { echo hi | Out-Default }

hi
Days              : 0
Hours             : 0
Minutes           : 0
Seconds           : 0
Milliseconds      : 0
Ticks             : 1318
TotalDays         : 1.52546296296296E-09
TotalHours        : 3.66111111111111E-08
TotalMinutes      : 2.19666666666667E-06
TotalSeconds      : 0.0001318
TotalMilliseconds : 0.1318
```

This command returns a TimeSpan object, so the measured time is printed in such Detail . You can format the object into a timestamp string using ToString().

```
PS> (Measure-Command { echo hi | Out-Default }).ToString()
hi
00:00:00.0001318
```

`NOTE` : If the command inside Measure-Command changes your console text color, use `[Console]::ResetColor()` to reset it back to normal.{.note}

So for instance, If you want to see how much time npx takes to create a react js project , you can use.

```
Measure-Command { npx create-react-app testapp | Out-Default }
# (Measure-Command { npx create-react-app testapp | Out-Default }).ToString()
```

Or , if you want to know , How much time does your system takes to build a flutter apk, You can use.

```
Measure-Command { flutter build apk | Out-Default }
```

A built-in way to measure execution time of a command on the Windows command linelike Powershell, cmd or Command Prompt.

Measure execution time of a command on the Windows command line


## Intro

A Simple code snippet to server static builds from `views` directory, from an express server.
This can be used to serve react js and next js apps.

> Put your static content in a directory named `static`.

```bash
npm init --yes
npm i express
```

```js
const express = require("express"); 

const app = express();

app.use("/", express.static(__dirname + "/static"));
 
app.get('/', (req, res) => { 
    res.sendFile('views/index.html', {root: __dirname })
});
 
app.get('*', (req, res) => {
    res.sendFile('views/404.html', {root: __dirname })
});

const PORT = process.env.PORT || 8000;
app.listen(PORT, () => console.log(`Started At ${PORT}`));

```

Using express js as a static server to serve react or next js build.

Using Express js as a static server


## Point Of View 

I do remember telling that fastify is very ideal for API development and that is true, but for this Blog let's talk about using any template engine to implement Server Side Rendering.

## Setup
Let's create a project and install everything we need.
```bash
mkdir fastify_pov_ejs
cd fastify_pov_ejs
npm init --yes
npm i fastify
```
We are going to use Point of view that will help us register express template engines like ejs, hbs and pug.

> In production mode, point-of-view will heavily cache the templates file and functions, while in development will reload every time the template file and function.

> Learn more about [point of view](https://github.com/fastify/point-of-view)

I am also going to use ejs as the template library here, but feel free to choose anything else.
Just remember that some may have some specific requirements, so check out the documentation of Point of view once.

```sh
npm i ejs point-of-view
```
Let's just setup a basic server.

```js
const fastify = require('fastify')();

fastify.get('/', (req, res) => {
    res.send("Hello World !");
});

const PORT = 5000;
fastify.listen(PORT, () => {
    console.log("Server Started !")
});
```

Now we will register point-of-view and will use it to set template engine.

```js
fastify.register(require("point-of-view"), {
  engine: {
    ejs: require("ejs"),
  },
});
```

We will create a directory named templates and a ejs file named index.ejs.
As of now, Add some basic HTMl code in it.
You can refer to my [github repo](https://github.com/desi-programmer/fastify) for the source code.

Now for a route, we can render this ejs template, using the view method as shown below.

```js
return res.view("/templates/index.ejs");
```

Now our '/' route looks like like this.
```js
app.get('/', (req, res) => {
    return res.view("/templates/index.ejs");
});
```

Run this code and you will see 
`Welcome from ejs `
in your browser, which is compiled html.

Let's add an h1 that says welcome {name}, where name will be provided as a variable to our template.
So, the ejs looks like this
```html
<h1>Welcome <%= name %></h1>
```
and let's pass the variable while rendering our view, 
```js
return res.view("/templates/index.ejs", { name : "Prince" });
```

Let's run this and we will see
`Hello Prince`
in the browser.

## Serving static files



Using fastify to implement a templating engine and serve static file.

Fastify - using Templating Engine and serving static files



## Validation

Fastify uses a schema-based approach to validate the body, parameter and queryString and serialize your outputs.
alidation will only be attempted if the content type is `application-json`.
Although it is not mandatory, it's recommended to use json schema.

## Query String Validation

Let's talk about simple query string validation.

We create another file in controllers named `query_validation.js` and add this simple validation schema.
It's pretty complicated if you have no previous understanding of body validation so consider watching this youtube video or reading the docs from fastify.

Anyways as you can see we have a simple data here, called validationSchema.
schema here can be used to validate body,parameters and query strings.

We have type to define the expected type of data (object, array), properties that define each property and required that is an array of all required values.

```js
const validationSchema = {
    schema: {
        querystring: {
            type: 'object',
            properties: {
                id: { type: 'string' },
                name: { type: 'string' },
            },
            required: ['id']
        }
    },
    handler: (req, res) => {
        res.send({ "msg": req.query });
    },
}
```

> Although I am using the handler here itself, it's a good idea not to do that. For simplicity we will just send some response from here.

Let's make request and see what happends.

Without query
```
localhost:5000/query
```

```json
{
	"statusCode": 400,
	"error": "Bad Request",
	"message": "querystring should have required property 'id'"
}
```

With query
```
localhost:5000/query?id=121212
```

```json
{
	"msg": {
		"id": "121212"
	}
}
```

## Parameters Validation

Validating parameters is also almost the same.
Let's take a look at the example below.

A file for parameter validation, I named it parameters.js
```js
const validationSchema = {
    schema: {
        params: {
            type: 'object',
            required: ['id'],
            properties: {
                id: { type: 'number' },
            },
        }
    },
    handler: (req, res) => {
        res.send({ "msg": req.params });
    },
}

module.exports = validationSchema;
```

and let's call it in our router.

```js
app.get('/params/:id', require('./parameter'));
```

This will make sure that an id is passed which is an integer.

Request Without Id
```
localhost:5000/params/
```

Response
```json
{
	"statusCode": 400,
	"error": "Bad Request",
	"message": "params.id should be number"
}
```

Request With Non integer Id
```
localhost:5000/params/as
```

Response
```json
{
	"statusCode": 400,
	"error": "Bad Request",
	"message": "params.id should be number"
}
```

Request With Valid data
```
localhost:5000/params/12
```

Response
```json
{
	"msg": {
		"id": 12
	}
}
```

## Body data Validation

Validating Body data is also the same. 
Let's take a look at the example below.

```js
const ValidationSchema = {
    schema: {
        body: {
            type: 'object',
            // array of required fiels
            required: ['name', 'username', 'password',],
        },
    },
    handler: (req, res) => {
        res.send({ "msg": req.body });
    },
}

module.exports = ValidationSchema;
```
```js
// in router.js
app.post('/body', require('./bodyValidation')); 
```

We use body to validate body data, and here it will ask for name, username and password.
try making requests without data or with invalid data and you will see the different kinds of responses.


Invalid Request

```
localhost:5000/body
```

```json
{
	"statusCode": 400,
	"error": "Bad Request",
	"message": "body should be object"
}
```

Valid Request
```
localhost:5000/body
```
Body
```json
{
	"name" : "Prince",
	"username" : "prince",
	"password" : "12121212"
}
```

Response
```json
{
	"msg": {
		"name": "Prince",
		"username": "prince",
		"password": "12121212"
	}
}
```

## Serialization

*It will increase your throughput by 100-400% depending on your payload and will prevent accidental disclosure of sensitive information.*

In simple terms , it will make sure that any data , other than that which you have mentioned in schema, will not be sent, even if you are sending it in response.

Let's take a quick example.

We add response schema and now you will see that we can only send valid objects and only data with the key of `msg` will be sent

```js
const ValidationSchema = {
    schema: {
        response: {
            200: {
                type: 'object',
                properties: {
                    msg: { type: 'string' }
                }
            }
        },
    },
    handler: (req, res) => {
        res.send({ "msg": "This is allowed", "msg2": "This is some sensitive information !" });
    },
}

module.exports = ValidationSchema;
```

```js
app.get('/res', require('./response'));
```

Request

```
localhost:5000/res
```

Response

```json
{
	"msg": "This is allowed"
}
```

A lot more can happen with this, you can watch the video below or read the documentation, and don't worry, I ain't trying to promote myself, it's just that I am not very good with typing blogs.

We will talk about validation and schema in fastify.

Fastify Validation and Schema

 
##  Setup 
Add the following dependencies in your pubspec file.

```yaml
 internet_connection_checker: ^0.0.1+1
 connectivity_plus: ^1.0.4
```
##  Code 

#### Checking Internet using **internet_connection_checker**

```dart
Future<bool> getInternetUsingInternetConnectivity() async {
  bool result = await InternetConnectionChecker().hasConnection;
  return result;
}
```
##  Checking Internet using **connectivity_plus**

```dart
getConnectivity() async {
  var connectivityResult = await (Connectivity().checkConnectivity());
  if (connectivityResult == ConnectivityResult.mobile) {
    // I am connected to a mobile network.
    print("Mobile Data Connected !");
  } else if (connectivityResult == ConnectivityResult.wifi) {
    // I am connected to a wifi network.
    print("Wifi Connected !");
  } else {
    print("No Internet !");
  }
}
```
##  Subscribing to internet connectivity changes **connectivity_plus**

```dart
  var subscription;
  String status = "Offline";

  @override
  void initState() {
    super.initState();
    subscription = Connectivity()
        .onConnectivityChanged
        .listen((ConnectivityResult result) {
      if (result == ConnectivityResult.none) {
        setState(() {
          status = "Offline";
        });
      } else {
        setState(() {
          status = "Online";
        });
      }
    });
  }

  @override
  void dispose() {
    super.dispose();
    subscription.cancel();
  }
```


Check internet connection using flutter's connectivity package.

Flutter Check Internet Connectivity

## Setting Up Everything

You will have to first install the flutter local notification plugin by adding the below text to your pubspes.yaml file under dependencies and then use flutter get to get the packages.

```yaml
  flutter_local_notifications: ^1.4.4+2  
```

After fetching all the plugins, we have to set up our Android application for using it. we'll have to add a couple of user permissions and receiver details in our app's manifest file that'located in **android>app>src>main>AndroidManifest.xml**. Use the details given beloto add the data to
 your
 own project.

```xml
  <manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.example.testproject">
  
  
  
  <uses-permission android:name="android.permission.INTERNET"/>
  <uses-permission android:name="android.permission.VIBRATE" />
  <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>
```

Now add the following receivers in your application tag but not inside the activity.

```xml
 
 <application
   android:name="io.flutter.app.FlutterApplication"
     android:label="testproject"
     android:icon="@mipmap/ic_launcher">
   
   
   
   <receiver android:name="
   com.dexterous.flutterlocalnotifications.ScheduledNotificationBootReceiver">
     <intent-filter>
     <action android:name="android.intent.action.BOOT_COMPLETED"/>
     <action android:name="android.intent.action.MY_PACKAGE_REPLACED"/>
     </intent-filter>
   </receiver>
   <receiver android:name="
   com.dexterous.flutterlocalnotifications.ScheduledNotificationReceiver" />  

```

## Intilializing The Plugin

Now we have to initialize the plugin with some of the options. We have to start by importing the **flutter_local_notifications** plugin that we just installed.
Then create a variable of type **FlutterLocalNotificationsPlugin**. I will name it as fltrNotification. Also, make sure that you add an app-icon as a drawable resource in your android project. Add a .png icon inside **android>app>src>main>res>drawable**.

```dart
 @override
 void initState() {
   super.initState();
   var androidInitilize = new AndroidInitializationSettings('app_icon');
   var iOSinitilize = new IOSInitializationSettings();
   var initilizationsSettings =
       new InitializationSettings(androidInitilize, iOSinitilize);
   fltrNotification = new FlutterLocalNotificationsPlugin();
   fltrNotification.initialize(initilizationsSettings,
       onSelectNotification: notificationSelected);
 }
```

NOTE : The **notificationSelected** function is invoked when a notification is tapped. It expects a payload parameter.

Given below is a function to handle the code which just shows a Dialog when tapped along the payload passed.It can be further customised to pass real world data and handle that accordingly

```dart
 Future notificationSelected(String payload) async {
   showDialog(
     context: context,
     builder: (context) => AlertDialog(
       content: Text("Notification : $payload"),
     ),
   );
 }
```

## Creating Notifications

To create a notification we have to first set notification details for both platforms and then a general notification detail. Once the notification details are set, it can be used to show or schedule any notification.
 We will use the show method of the FlutterLocalNotificationsPlugin variable that takes id, title, body, notification details and payload as parameters.

```dart
 Future _showNotification() async {
   var androidDetails = new AndroidNotificationDetails(
       "Channel ID", "Desi programmer", "This is my channel",
       importance: Importance.Max);
   var iSODetails = new IOSNotificationDetails();
   var generalNotificationDetails =
       new NotificationDetails(androidDetails, iSODetails);
 
    await fltrNotification.show(
        0, "Task", "You created a Task", 
        generalNotificationDetails, payload: "Task");
 }
```

## Scheduling Notifications 

In the same **_showNotification** function with all the details set we can also schedule a notification that accepts the same parameters as the show method, but only a scheduled time as an extra parameter.

```dart
 var scheduledTime; = DateTime.now().add(Duration(seconds : 5));
 fltrNotification.schedule(1, "Times Uppp", task, 
     scheduledTime, generalNotificationDetails);
```

Blog on Flutter Local Notification, Realtime And Scheduled Push Notification For Offline Devices

Flutter Local Notification, Realtime And Scheduled Push Notification For Offline Devices


## Setup

we will be using http to make basic network calls for methods like **GET**, **POST**, **DELETE** and so on.

```yaml
 http : <latest version>
```
## Making a simple GET request

I will setup a simple class named **APIService** which contains all the methods for making requests.

```dart
 class APIService{

 }
```
I am not exclusively checking for internet availability using any package like [connectivity plus](https://pub.dev/packages/connectivity_plus){target=_blank}. Will be handling errors here itself.

```dart
 class APIService{

  // baseurl for API
  String baseUrl = "http://10.0.2.2:5000";
    
    // returns a list of all posts as per my API
    // may use this in a futurebuilder
    Future<List> getPosts() async {
      try {
        var response = await http.get(Uri.parse(baseUrl));
        if (response.statusCode == 200) {
            // return a decoded body
          return jsonDecode(response.body);
        } else {
          // server error
          return Future.error("Server Error !");
        }
      } catch (SocketException) {
        // fetching error
        // may be timeout, no internet or dns not resolved
        return Future.error("Error Fetching Data !");
      }
    }
  }
```
## POST with data
I will send post data to server with some json data. This api doesn't require any authentication hence no Bearer or auth token.

```dart
 Future<String> createPost(Map<String, dynamic> data) async {
     try {
       var response = await http.post(
         Uri.parse("$baseUrl/create"),
         body: jsonEncode(data),
         headers: {
           "Content-Type": "application/json; charset=UTF-8",
         },
       );
       if (response.statusCode == 200) {
         return "success";
       } else {
         print(response.body);
         // server error
         return "err";
       }
     } catch (SocketException) {
       // fetching error
       return "err";
     }
   }
```

The returned string can be used to show weather the post was created successfully or not.

## Delete Request

Deleting a resource is also simple , make a request as per your API, mine expects a slug in the body, so doing that.
Create a map/object of the data that you grab from a form or anything.

```dart
 Future<String> deletePost(Map<String, dynamic> data) async {
     try {
       var response = await http.delete(
         Uri.parse("$baseUrl/delete"),
         body: jsonEncode(data),
         headers: {
           "Content-Type": "application/json; charset=UTF-8",
         },
       );
       //
       if (response.statusCode == 200) {
         return "success";
       } else {
         print(response.body);
         // server error
         return "err";
       }
     } catch (SocketException) {
       // fetching error
       return "err";
     }
   }
```


Code snippets for making http requests using flutter or dio plugin.

Flutter - Making http calls using http and dio


## Reading PDF Files 

First, we need to add the following plugins to our **pubspec.yaml** file And then fetch all the plugins. The pdf_flutter plugin will be used to read and display PDF files. The **file_picker** plugin will be used to pick a file from the local storage.
Now the path_provider plugin and the pdf plugin well together help us in creating and saving a PDF file as path provider plugin will give us a path to save our file and the PDF plugin will help us in creating a PDF file.

```dart
  pdf_flutter: ^1.1.3
  file_picker: ^1.13.3
  
  pdf: ^1.10.1
  path_provider: ^1.6.11
```
Working with pdf_flutter is very simple and here are quick examples on how you can open a file from the internet, from the assets or how you can pick a file using the file_picker plugin and then display the file content using PDF plugin.
I have allowed only the PDF extension in file_picker to make sure that we don't end up getting errors

To Open a File from internet

```dart    
  PDF.network(
      // file url
     'http://africau.edu/images/default/sample.pdf',
     // optional height and width
     height: 600,
     width: MediaQuery.of(context).size.width * 0.90,
  ),
```

To Open a File from asset

```dart
  PDF.assets('assets/dummypdf.pdf'),
```

To Open a File from Local Storage

```dart
  import 'dart:io';
  // declare a File variable
  File localfile;
  
  // to view a file only if a file is picked
  localfile != null
  ? PDF.file(
      localfile,
      height: 600,
      width: MediaQuery.of(context).size.width * 0.90,
    )
  : RaisedButton(
      child: Text("Grab A File"),
      onPressed: () async {
        File pickedFile = await FilePicker.getFile(
            allowedExtensions: ['pdf'], type: FileType.custom);
        setState(() {
          localfile = pickedFile;
        });
      },
    ),
```

## Creating PDF Files 

Let's talk about creating the PDF and to do that we will create a function named generateFile that will use the PDF widgets provided by the pdf plugin to create a PDF file.
Here we have a doc variable which is a PDF widget document We will add a page to our PDF document with the page format as A4 and we will build the page. The best part is that the entire page structure can we built using normal flutter widgets the only difference being that they will be provided by the PDF widget. For example we will add a column then a center with some dummy text.

```dart
  // import the packages
  import 'package:path_provider/path_provider.dart';
  import 'package:pdf/pdf.dart';
  import 'package:pdf/widgets.dart' as pw;

  // a dcoument variable decalration
  final doc = pw.Document();
  
  // the function
  void generateFile() async {
   doc.addPage(pw.Page(
       pageFormat: PdfPageFormat.a4,
       build: (pw.Context context) {
         return pw.Column(
           mainAxisAlignment: pw.MainAxisAlignment.center,
           children: [
             pw.Center(
               child: pw.Text("Dummy PDF",
                   style: pw.TextStyle(
                     fontSize: 50.0, 
                   ),
                ),
             ),
           ],
         ); 
       }
    ),
  ); 
                     
```
Then we have to save our document.
For that, First we will get the getExternalStorageDirectory path and will add a filename to that. We will then use File to create file at that path and will save the doc and will write that to our file.
I will simply print the pdf path so that you can go and check if the file exists there.


```dart

  final outPut = await getExternalStorageDirectory();

  String path = outPut.path + '/example.pdf';
  final file = File(path);
  file.writeAsBytesSync(doc.save());
  
  print(outPut.path);
 
```
If You face Error In Release [Follow This](https://github.com/erluxman/pdf_flutter/issues/4#issuecomment-684108676).

Get started with basics of flutter pdf, learning body,query,parameters etc.

Flutter PDF - Create & Read Pdf From Internet, Storage or Assets


Flutter as we know, is google's Framework for cross platform development. It talks about creating Android, iOS, web and desktop apps with a single code base.

While this may sound interesting , The truth is far from this.

We can't just write code for a platform and expect it work everywhere, atleast not without certain tweaks.

So Here, We will talk about creating a simple responsive navbar.

## Creating a Project

```sh
flutter create responsive_navbar .
```

Here we will have a simple widget `ResponsiveNavbar` that will act as a Container for our app and will contain our other children widgets.

## Code

```dart

class ResponsiveNavbar extends StatefulWidget {
  const ResponsiveNavbar({Key? key}) : super(key: key);

  @override
  State<ResponsiveNavbar> createState() => _ResponsiveNavbarState();
}

class _ResponsiveNavbarState extends State<ResponsiveNavbar> {
  List<Widget> navItems = [
    ElevatedButton(onPressed: () {}, child: Text("Education")),
    ElevatedButton(onPressed: () {}, child: Text("Skills")),
  ];

  bool mobile = false;
  @override
  Widget build(BuildContext context) {
    mobile = MediaQuery.of(context).size.width > 700 ? false : true;

    return Scaffold(
      appBar: AppBar(
        title: Text("Desi programmer"),
        actions: mobile ? null : navItems,
      ),
      drawer: mobile
          ? Drawer(
              child: ListView(
                children: navItems,
              ),
            )
          : null,
      body: Text("Main Content Container "),
    );
  }
}

```


## English Tutorial

<YouTube youTubeId="9jvl6TkUfzA" autoPlay="true" />

## Hindi Tutorial

<BunnyVideo id="/57278/273241f8-38ba-488d-94c7-ba31a83bc03d"   />

Flutter Web - A Simple Responsive Navbar


## What is fastify

According to the website itself, *Fastify is a web framework highly focused on providing the best developer experience with the least overhead and a powerful plugin architecture, inspired by Hapi and Express.*

It is another node js powered server side framework, which is good enough to be considered. 

## Why fastify

Fastify promotes itself by some really good points that will help us understand, why we can use this.

1. Fast and low overhead web framework.

2. Like express js but faster than express js.

3. A better way to use plugins.

4. Straight forward for APIs development, although can be used for SSR.

5. A Better Request and response validation.

## Other Options

There are many other options available for creating a web server using node.js
1. Express js
2. Fastify js
3. Nest js
4. Koa

But when it comes to developing API, fastify could be a very good option as it provides a clean architecture and default validation for request and responses.

> See the pro and cons of some top nodejs web frameworks [here]().

## Express vs Fastify

A common question may arise that why would you use fastify when there is express already. Fastify wins this argument by it's benchmarks. 
[Fastify benchmarks](https://www.fastify.io/benchmarks/)

Fastify has a logger included, so I don't have to think about how to log.

Fastify supports async/await out of the box for all the components that must be awaited.

Another reason is that fastify provides some core plugins for which express js has to rely on the community.

## Getting Started

We simply create a node js project, and install fastify in it.

```bash
mkdir fastify_started
cd fastify_started
npm init --yes
npm i fastify
```

## Simple Server

A simple fastify server to saay hello world is almost similiar to an express server doing the same.

We create an index.js file to write server code.

```bash
touch index.js
```

```js
const fastify = require('fastify');
const app = fastify();

app.get('/', (req, res) => {
    res.send("Hello World !");
});

const PORT = 5000;
app.listen(PORT, () => {
    console.log("Server Started !")
});
```

The code is as simple as it looks.
We create a `app` from fastify.

When a `get` request is made at `/` route, we simply send `hello world`.

We use a port variable and make the app listen to the particular port.

## Routing

Let's see how we can handle different Request methods using fastify.
I think the code itself is pretty self explanatory.

```js
const fastify = require('fastify');
const app = fastify();

app.get('/', (req, res) => {
    res.send("Hello World !");
});

app.post('/', (req, res) => {
    res.send("Hello POST !");
});

app.delete('/', (req, res) => {
    res.send("Hello DELETE !");
});

app.put('/', (req, res) => {
    res.send("Hello PUT !");
});

app.all('/user', (req, res) => {
    res.send("Hello All !");
});

const PORT = 5000;
app.listen(PORT, () => {
    console.log("Server Started !")
});
```

## Router / Controller

It's a good idea to handle all the routes in different files or via a controller.
it's a good way to maintain clean code and good architecture.
Create an `router.js` file in `controllers` directory in the root folder.
In our index.js file, we will register a `router`.

```js
// register the router from controller to handle routes
app.register(require('./controllers/router'));
```

In the `router.js` file we will add a simpel router function to handle the routes.

```js
function Router(app, options, done) {
    // @Routes
    app.get('/', (req, res) => {
        res.code(200).send({"data" : "Response from router !"});
    }); 

    // @Not-Found Route
    app.all('*', (req, reply) => reply.code(404).send("ERR ! Not Found !"));

    done();
};

module.exports = Router;
```

Notice that things are little different here from express.js. Instead of use, we are using register and the router function ends with done(), just like a middleware in express js.

## Route Prefix

Adding a route prefix is as simple as the below code.

It adds a `/api/v1` to all the routes the router.
```js
app.register(require('./controllers/router'), { prefix: 'api/v1' });
```

## Query Parameters

All the query parameters are available in `req.query`.
Let's take a look at a simple example.

```js
// query
app.get('/user', (req, res) => {
    res.code(200).send({"data" : req.query.name});
}); 
```

If we send a name query with data, we will get the following resposne.

```
localhost:5000/user?name=Prince
```
```json
{
  "data": "Prince"
}
```
## Url Parameters

Url Parameters are available in `req.params`
Let's take a look at a simple example.

```js
app.get('/user/:username', (req, res) => {
    res.code(200).send({"data" : req.params.username});
});
```

```
localhost:5000/user/prince
```

```json
{
  "data": "prince"
}
```
The parameter here is mandatory, which means without a parameter value, the route will throw an error.
If we add a `?` then the parameter becomes optional.

```js
app.get('/user/:username?', (req, res) => {
    res.code(200).send({"data" : req.params.username});
});
```
## Body

Handling body data is pretty easy in fastify as it securely parses the json by default.
> That's why I said *Straight forward for APIs development*.

```js
app.post('/', (req, res) => {
    res.code(200).send({"name" : req.body.name, "data" : req.body});
}); 
```

Make a request with name in json data and you will get the value in response.

 - Request
```
localhost:5000/
```

 - Body
```json
{
	"name" : "prince",
	"username" : "prince"
}
```
 - Response
```json
{
	"name": "prince",
	"data": {
		"name": "prince",
		"username": "prince"
	}
}
```

Get started with basics of fastify, learning body,query,parameters etc.

Let's learn Fastify.js - A Fast and low overhead web framework, for Node.js


## Initial Project Setup 

We will use the same things that we do while setting up a project.
Let's not make this blog any longer than it need to be. I just switched to 60% keyboard and I am not used to typing on it.😭

```sh
npx create-react-app state_issue
```

## Normal State

We have an `App.js` file with a button and a simple `<h1>` which simply shows the current counter value. yes, I get it, it's a simple counter app, but wait it is going to be more than enough to show this issue.

```js
import { useState } from 'react';

function App() {
  const [counter, setCounter] = useState(0);

  function increase() {
    setCounter(counter + 1);
  }

  return (
    <div>
      <h1>Counter : {counter}</h1>
      <button onClick={increase}>Increase</button>
    </div>
  );
}

export default App;
```

Run this and click on the counter button 5 times and the counter value will be 5, just as we expect it to be.

![useState issue Image](/blogs/react-usestate-issue-1.png)

## The Issue

Now to create an issue, let's add an `lazyIncrease` function that calls `setCounter` but with a `setTimeout` which will update the counter only after 2 seconds.

```js
// add this function
  function lazyIncrease() {
    setTimeout(() => {
      setCounter(counter + 1);
    }, 2000);
  }

// add this button after the increase button
<button style={{ marginLeft: '12px' }} onClick={lazyIncrease}>Lazy Increase</button>
```

Not refresh the page so that the counter resets to 0. Then first click the `Lazy increase button once` and then the `increase` button 5 times.
The counter will go to `5` and will then automatically be set to `1`.

This arises because when we clicked the `Lazy increase button` the value was `0` and `javascript` will use that to increase counter after `2 seconds`, hence setting it back to `1`.

## The Solution

We will call the `callback method to update state` , which will then use the current value to update it.

Replace the lazyIncrease function with this and then repeate the same click process.
First click the `Lazy increase button once` and then the `increase` button 5 times.
The counter will go to `5` and will then automatically be set to `1`.

```js
  function lazyIncrease() {
    setTimeout(() => {
      setCounter((counter) => counter + 1);
    }, 2000);
  }
```

Now , you will see that the count is actually 6, what it is supposed to be.

So if you ever have to use any lazy update on any state value, then use the callback method to update it and such bugs will not arise.

If you found this helpful , follow me on other social media for Updates.


We will see a Lazy Setstate Issue in React js.

React Js Lazy Setstate Issue


## 1. Bootstrap

Bootstrap is a powerful css and js library. It is widely used in simple and complex websites.Bootstrap is a component based library as it provides many components to us out of the box but it also provides many helper utilities to achieve simple manipulation

## 2. Tailwind CSS

Twailwind CSS is a another amazing CSS library. it's a  utility based framework and does not provide any component out of the box despite seen a bit complex at first but the fact that tailwind CSS generates CSS only for those classes which are using in your code. make sure that you have the minimum CSS required where as in bootstrap you have to get the entire bundle and use only free component out of

## 3. Materialize CSS 

Materialize CSS is another CSS framework which is component based. it provides many components out of the box and its very easy to use

## 4. MDBootstrap

MD bootstrap can be thought as an extension to bootstrap by adding material design but it's not just that MD bootstrap also provides many extra components and a pro version where it add more components or top of pre existing extra components. We have to pay some amounts for it but it may be useful for you

## 5. Daisy UI

Daisy UI is a component based CSS library  which provides components using tailwind CSS utilities. it is free unlike other tailwind CSS component library is like profile and hence widely popular.

## 6. Chakra UI

Chakra UI is another CSS design system and Library which is widely used with react and next JS. its approach to making responsive website using many utility classes and JavaScript and react JS is a little different from others CSS frameworks. But its amazing and is quietly used.


## 7. Material UI 


## 8. Ant Design
Ant design is another CSS design system and component library which says that its enterprise-grade it is amazing easy customisable and is widely used in many places.

> A design system for enterprise-level products. Create an efficient and enjoyable work experience.

## 9. Bulma CSS

> Bulma is a free, open source framework that provides ready-to-use frontend components that you can easily combine to build responsive web interfaces.

## 10. Infima

Infima CSS is something that I recently found out and is very amazing. It's widely use for content driven website as I have seen its uses in ...

As the website itself reads.

> A modern styling framework for content-driven websites 🔥

It is popular and is used in (docasaurous)[http://www.docsusaurous.io] , a fomous documentation generation website.

Some very useful and needed libraries which accelerate the entire web development process.

Top 10 Styling and Component libraries for Web - you must know


## What is Cryptography ?

Cryptography is the study of secure communications techniques that allow only the sender and intended recipient of a message to view its contents. The term is derived from the Greek word kryptos, which means hidden.

### Features Of Cryptography

 - Confidentiality: Information can only be accessed by the person for whom it is intended and no other person except him can access it.

 - Integrity: Information cannot be modified in storage or transition between sender and intended receiver without any addition to information being detected.

 - Non-repudiation: The creator/sender of information cannot deny his or her intention to send information at later stage.

 - Authentication: The identities of sender and receiver are confirmed. As well as destination/origin of information is confirmed.

### Types Of Cryptography

In general there are three types Of cryptography:

## Symmetric Key Cryptography

It is an encryption system where the sender and receiver of message use a single common key to encrypt and decrypt messages. Symmetric Key Systems are faster and simpler but the problem is that sender and receiver have to somehow exchange key in a secure manner. The most popular symmetric key cryptography system is Data Encryption System(DES).

## Hash Functions

There is no usage of any key in this algorithm. A hash value with fixed length is calculated as per the plain text which makes it impossible for contents of plain text to be recovered. Many operating systems use hash functions to encrypt passwords.

## Asymmetric Key Cryptography

Under this system a pair of keys is used to encrypt and decrypt information. A public key is used for encryption and a private key is used for decryption. Public key and Private Key are different. Even if the public key is known by everyone the intended receiver can only decode it because he alone knows the private key.
 

Let's get started by understanding what is cryptography.