teleren/devto huggingface dataset:
Flutter TabBar the basics
Tags: flutter, dart
Published: 2021-07-11 08:54:01

A lot of apps come with a TabBar. It's that icon bar you see to navigate through the app quickly.

Some examples of these TabBars can be found in the Twitter or Instagram app:

![TabBars in mobile apps](https://cdn.hashnode.com/res/hashnode/image/upload/v1625462395270/KnDldg8q9.png)

And yes, we'll be learning how to create this in Flutter today.

## Creating a TabBar in Flutter

Let's start with our [basic Flutter application](https://daily-dev-tips.com/posts/flutter-how-it-works-hello-world/) and work from there today. We'll be doing all our code in the `lib/main.dart` file.

Now let's modify our main function to include a TabBar.

```dart
void main() async {
  runApp(
    MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            title: Text('Tabs Demo'),
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.directions_car)),
                Tab(icon: Icon(Icons.directions_transit)),
                Tab(icon: Icon(Icons.directions_bike)),
              ],
            ),
          ),
          body: TabBarView(
            children: [
              Icon(Icons.directions_car),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    ),
  );
}
```

This is the most basic setup for a TabBar in Flutter. As you can see, it leverages the AppBar, and provides a bottom part for it.
This bottom part includes a TabBar with some icons.

Then, in our application's actual body, we should add a TabBarView with an equal amount of children.

With this, we can click the icons or even scroll through them by swiping!

![Flutter TabBar basics](https://cdn.hashnode.com/res/hashnode/image/upload/v1625993607140/6yYLpHbl8.gif)

Looking to find the complete code example, download it from [GitHub](https://github.com/rebelchris/flutter/tree/tabbar).

You might have noted the default Flutter TabBar is positioned at the top. In a later article, we'll look at how to set it at the bottom.

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Be careful of optional parameters in your APIs
Tags: api
Published: 2021-07-11 08:52:59

---
title: Be careful of optional parameters in your APIs
published: true
description: A story about how optional parameters can lead to chaotic affects.
tags: API
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/38m3ndzdqiinnsrzxbqr.png
---

Recently, a team in my company has been facing a chaotic situation caused by bad API designs from a payment service, giving me an idea to share the story here. Most of the details in the article have been modified due to sensitivities but the big picture is not affected. 

The background, to put it roughly, is that the payment service provides a web API that supports offline transactions. After a customer has completed an offline transaction (for example, using a credit/debit card to transfer money), the customer can enter its reference ID on the merchant's website. The website then calls the offline transaction API to verify the reference ID. If the ID is valid, the website increases the user's balance.

Everything was perfect until one day the payment service added two parameters to the API without releasing change notes to callers. Simply put, the new parameters allow its callers to specify the ID of a merchant's subsidiary (if any) so the verification will fail if the reference ID belongs to another subsidiary. In order to maintain backward compatibility, both parameters are optional.

This was where the catastrophe started. For some reason, after the two optional parameters were added, malicious users found that **a reference ID of the transaction that does not belong to the merchant can pass the verification**. It is like the reference ID of an offline transaction to Steam can be used to increase the balance on Epic Games Store. This caused a huge loss to victim merchants because they actually did not receive the money, yet the API misled them to increase a malicious user's balance. 

After a great effort of investigation and lengthy communication with the provider, the team found that the provider's API works if the two parameters are present. However, the damage has been done.  

So two morals of the story:

1. When adding new optional parameters to an old API, **testing the new parameters working as expected is equally important as they are omitted**. And yet the latter is usually not covered. 
2. Sometimes, a breaking change is acceptable when maintaining backward compatibility becomes expensive.

Thank you for reading this.
Connect Java with Mysql Database | Java JDBC
Tags: java, jdbc, programming, productivity
Published: 2021-07-11 08:11:35

To connect Java application with MySQL database using Java JDBC, we follow 5 steps:

1. Register the Driver class
2. Create connection 
3. Create statement 
4. Execute queries
5. Close connection 

Go through this video for detailed explanation :

{% youtube AHFBPxWebFQ %}
Value of count rows variable give me undefined although I assign it?
Tags: angular, typescript, javascript
Published: 2021-07-11 07:46:36

I work on angular 7 I face issue count rows variable give me undefined value

although returned data is 3

Expected result I need is Count rows must equal 3

public Countrows:Number;
ngOnInit(): void {
countitems()
console.log("final count rows is" + this.Countrows);

}
countitems()
 {
  this._inventory.GetcountItems().subscribe(
    data =>this.Countrows=data[0].countItems 

  )
 }
it give me final data undefined although returned data value is 3

data returned on count items function

[
    {
        "countItems": 3
    }
]
What I have tried:

console.log("final data" + data[0].countItems)
give me on console as 
final data 3
Heroku streamlit app for single image dehazing
Tags: heroku, python
Published: 2021-07-11 07:26:25

Hello guys, I have built an app using streamlit and hosted it on heroku. The web app helps you to dehaze hazy images of traffic on road(I will be extending to other use cases soon). It is working fine but it takes a lot of time to process the image. The algorithm works faster on PC but is slow on heroku. Any suggestions are welcome and appreciated. Thank you.

Webapp: https://image-dehazing.herokuapp.com/
GitHub repo: https://github.com/saswat01/imageDehaze-streamlit
Learning to toggle Dark Mode through React Hooks
Tags: react, codenewbie, hooks
Published: 2021-07-11 07:20:38

I recently revisited a project of mine and found a feature that I think I can recreate with the use of React Hooks.

_My current goal is to try out things from React to deepen my familiarity of it and maybe others can relate or give tips to #codenewbies like myself about React Hooks. So if you have any resource suggestions, feel free to drop them in the comments below!_

So for starters..

The app that I mentioned is called [SplashGlam](https://splashglam.herokuapp.com/). It is powered by ReactJS and hosted through Heroku. Feel free to toggle the day and night mode using the button on the top navigator to see what are we working with.

On Day/Bright mode..
![Day mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nrubarynm8n9bchy3ux7.png)

On Night/Dark mode..
![Night mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/46r4bl1h80fsdk50rjkg.png)

I also have discussed how I built the toggling feature using LocalStorage on my other blog.([What is LocalStorage?](https://dev.to/tolentinoel/what-is-localstorage-3ffh)) This time around, I wanted to try Hooks to recreate at least the toggling part.

I created a repo to test things out and feel free to check it out if you wanted to test it out on your own. [Github repo](https://github.com/tolentinoel/randomHex)

### Small breakdown of my code:
#### First
![JSX for DOM elements](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5zz3e9bdavvtotm3xqdp.png)-So I built the elements on the page first with the corresponding attributes needed like an onClick eventListener.

#### Second
![Function snapshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/siij491kn6b0f0hibtmr.png)-Here's how I incorporate useState in the toggle & using a function that has an if statement to trigger changes.

#### Third

CSS! Now that we have our functions and elements all set. Remember our function has a line of code where we change/replace the className of the body from `dayMode` to `nightMode`?

Here's my corresponding CSS to see DOM change!
![CSS snapshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aupzy3b6gj04mfxdeb9i.png)


## Results!

![Day Mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b3y535mzrnjm6rw1dkco.png)

![Night Mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cqot4i6lv4uji4zos7ka.png)

And that is pretty much it! I hope anyone that needs an example in using hooks to toggle day/night mode find this helpful!

### Let me know if I missed anything in the comments please! Until the next!
Function boobs or how people love to call them: Higher Order Functions
Tags: javascript, react, beginners, higherorderfunctions
Published: 2021-07-11 07:20:31

\- Branko are you crazy?
No I’m certainly not! 

I just love crazy stuff in JavaScript. One of those things are definitely function boobs. I’m sorry, but I couldn’t find more describable and funnier name for this phenomenon so I’m gonna call it like that.

Foo()(), am I right? Hihi.

## Let's dive in!

In your, so far, developer life, you must have seen something like this:

`connect(mapStateToProps, mapDispatchToProps)(App);`

Did you try to understand what this is and how the hell is it working?

This `connect` function is called `Higher Order Function (HOF)`.

By definition HOF is a function that accepts and / or returns a function as parameter.

## How it works you might ask?

First boob in connect accepts several things. Couple of functions for redux state and actions and some other options which are not the topic here so I’m not gonna cover it.

Second boob is basically return function from connect that accepts react component.

So, main purpose of the connect function is to prepare testament for its child (child that comes from the second boob).

All the information from testament (redux state and actions) is bound to the child’s props when connect is about to die. That’s why we access redux state via props.

Keep in mind that this is not the definition of connect function. This is just an brief explanation how things are working by my understanding.

```js
function connect(state, actions) {
    /* testament preparation */
    const preparedTestament = {...};
    return (component) => {
        return <component props={props, …preparedTestament}
    }
};
```

So, at the end, connect returns anonymous function that returns react component but with appended props as I described earlier, hence we call it with 2 pars of brackets like this: `connect()()`.

## Why it is useful?

While this technique is used widely with connect, withRouter, etc. HOF can be used for custom stuff as well. For e.g. When you want to attach some component (notification sidebar or something like that) to 3 pages in your react app but omit on 4th and 5th.

Yes! Of course that you can use HOF outside of the react! And that’s the point where the real fun begins!

Or, or, you have already used it and you don't know it! Does map, filter, sort, reduce sounds familiar? :)

## Conclusion

HOF as concept is definitely something worth exploring on the deeper level so don’t be afraid to use it, don’t be afraid to understand it. It will be easier with time passed by, and with that, a new horizons will open up for you. :)

Thank you for reading good people. 'til next time!
C# Dictionary
Tags: csharp, tutorial, beginners
Published: 2021-07-11 06:55:15

The Dictionary in C# is a generic collection, which is used to store data in key-value pairs. It is available under the `System.Collections.Generic` namespace.

```csharp
public class Dictionary<TKey,TValue>
```

## Parameters

### TKey
It represents the data type of the **key**. For example, **string, bool, int**, etc. 

### TValue
It represents the data type of the **value**.

## Creating a Dictionary

The Dictionary collection provides an `Add()` method to add elements to it.
```csharp
...
using System.Collections.Generic;
...

static void Main(string[] args)
{
    Dictionary<int, string> users = new Dictionary<int, string>();
    users.Add(1, "John");
    users.Add(2, "Jane");
    users.Add(3, "Smith");
}
```

## Accessing an element

We can access the element from dictionary by providing the key inside `[]`.

```csharp
Console.WriteLine(users[1]); // John
```

## Removing an element

We can remove an element from the dictionary using the `Remove` method by providing the key to be removed.

```csharp
users.Remove(2);
Console.Write(users.Count); // 2
```

## Iterating over the dictionary

We can use the `foreach` loop in C# to iterate over the dictionary collection.

```csharp
foreach(KeyValuePair<int, string> user in users)
{
    Console.WriteLine(user.Key + " - " + user.Value);
}
```
Insmod: ERROR – Required key not available
Tags: centos, dkms, devops, linux
Published: 2021-07-11 06:37:08

---
title: Insmod: ERROR – Required key not available
published: true
description: 
tags: centos, dkms, devops, linux
//cover_image: https://direct_url_to_image.jpg
---

Problem:

insmod: ERROR: could not insert module MODULENAME.ko: Required key not available

Solution:

1) sudo yum install mokutil
2) sudo mokutil —disable-validation
3) When executed, the terminal will let you set up 8-16 digit password (after you do, do not forget Oh ~)
Next, restart the computer, a blue screen (do not be nervous, press any key to enter the selection interface :–)), options are as follows:
– Continue boot
– Change Secure Boot state
– Enroll key from disk
– Enroll hash from disk
to select –>Change Secure Boot state<– , next in line before you enter the password.
requiresEnter password character 7, Meaning that the password bit 7 (this point to note!).
4) enter –> Disable Secure Boot selection <– screen,
select yes (Do not simply press Enter, this would be lost, only to start all over again!).
5) returned to the next screen beginning interface, reboot selection, re-enter the system
Capstone Project
Tags: react, mongodb, node, express
Published: 2021-07-11 06:35:47

For the final project of my coding bootcamp, we were instructed to make a full stack application that included something that we did not learn before. This was a challenging project for us as we all had to learn from scratch without really any directions from our instructors into our app. The one thing that I took from this was that learning a new language or incorporating a new library from a language is something that is very challenging and mind-stimulating once you see it in action. 

I decided to create this application that would help keep track of daily habits. The idea came from a point in my life where I wanted to start building better habits in my everyday life, whether it be exercise or the amount of water I drank every day. Health has been such an important aspect in my life and to my family the past few years so this was something that I thought would help me to maintain a healthier lifestyle. 

The application mainly uses the MERN stack(React.js, Express.js, Node.js and Mongodb). React was something that I worked with before on another project but did not get as much practice on it on the third project of our cohort. I mainly worked on developing the back-end with another classmate. Therefore, I had a lot of trouble with the basic understanding of how Routes and Links worked. Another problem that I had when building the app was getting Authentication to work. There were many console logs that I had to do with an instructor, and it took us approximately an hour before we were actually able to get it working. 

Overall, the app is working but lacks any styling on the front-end. It includes the use of react-calendar and also react-redux. I learned how to use both of these things from Annie Liao's blog post and repository for her app. (Link: https://dev.to/liaowow/adding-calendar-to-your-react-app-1i0o). Through this I was able to incorporate the use of redux as well as the calendar library in React. I will continue to work on this project to fix functionality of the app as well as the styling to improve user experience. The pictures seen above are what I want it to look like. Hope to write another update with the completely finished product soon.

Deployed Link:
https://devhealthyhabits.herokuapp.com/
Find the maximum element from the array in javascript
Tags: beginners, javascript, react
Published: 2021-07-11 06:18:32

In this article i am going to find the maximum value from the array,i will use multiple approach to find the maximum value from the array.

####Mehod 1: using math method

```javascript
let max_value = [4,10,3,20];
Math.max.apply(0,max_value)// 20
```

####Method 2: sort array in descending order

```javascript
let max_value = [4,10,3,20];
let sortedArray = max_value.sort((a,b)=>b-a);
sortedArray[0]; // 20
```
#### Method 3: using spread operator(ES6)

```javascript
let max_value = [4,10,3,20];
Math.max(...max_value); // 20
```

####Method 4: using loop

```javascript
let max_value = [4,10,3,20];
let max = max_value[0];
let i;
let len = max_value.length;
for(i=0;imax){
 max = max_value[i]; // 20
 }
}
```

####Method 5: using reduce

```javascript
let max_value = [4,10,3,20];
max_value.reduce((a,b)=>Math.max(a,b)); // 20
```

Please visit for more information [codewithabu](https://codewithabu.blogspot.com/)
GraphQL Queries - Variables
Tags: graphql
Published: 2021-07-11 05:58:53

---
title: GraphQL Queries - Variables
published: true
date: 
tags: graphql
canonical_url: https://eternaldev.com/blog/graphql-queries-variables
---

## GraphQL Queries - Variables

Real world application requires queries to be dynamic and respond to user input, so we have variables in GraphQL to pass dynamic value and get the response from the server.

Before we jump into the variable definition and use cases, we will get familiar with `Operation`

If you are just starting your GraphQL journey, read [GraphQL Queries - Getting Started](https://www.eternaldev.com/blog/graphql-queries-getting-started/) before coming to this post

## Operation

GraphQL allows the user to use shorthand syntax with defining name of the query but the preferred way to define a query name with the `query` keyword

```
query TodoListResult {
	todos {
		name
		completed
		created_at
	}
}
```

We have defined Operation name for the above query called `TodoListResult`. These names will come in handy when you are debugging your application or logging the data.

## Operation Type

There are three operation types in GraphQL

- query - Fetch the data from the database
- mutation - Create/ Modify data in the database
- subscription - Realtime update on changes in data

These operation types form the first part of the operation declaration followed by the name of the operation

```
{operationType} {operationName} {

}
```

## Variables

Variable help in adding dynamic value to the GraphQL Queries. Queries can be reused based on the argument and variables passed. So lets look at an example of using variable inside an operation.

```
query TodoListResult($count: Int) {
	todos(limit: $count) {
		name
		created_at
	}
}
```

Variables are defined with operation name and their type and then you can use the variable in the operation using the same syntax `$count`

In this example, we are trying to limit the number of todos returned from the query based on the variable passed into the query. So you can imagine reusing the same query in multiple pages based on your requirement.

When you are calling this query you need to pass the variable.

```
{
	"count": 5
}
```

[![GraphQL Variable playground](https://eternaldev.com/static/f78146ab58bad4750bd486e909d69584/75dcb/graphqlvariablesexample.png "GraphQL Variable playground")](/static/f78146ab58bad4750bd486e909d69584/75dcb/graphqlvariablesexample.png)

## Practical Exercise

Lets look at some practical exercise to get your hands dirty with these GraphQL Variables.

1. Creating a query to return the todos from start\_date to end\_date
2. Creating a query to return either `completed` todos or `not completed` todos

If you are unsure where to start follow this tutorial to get started with GraphQL server is a short time using Hasura

[Build Sports API with GraphQL - Hasura - Part 1](https://www.eternaldev.com/blog/build-sports-team-api-with-graphql-hasura-and-postgresql-part-1/)

## Join our community

Stay tuned by subscribing to our mailing list and joining our Discord community

[Discord](https://discord.gg/AUjrcK6eep)
Feedback is like being pelted with chunks of gold. (100 Bytes Of Wisdom: Day 62)
Tags: career, journey, advice
Published: 2021-07-11 04:40:25

---
title: Feedback is like being pelted with chunks of gold. (100 Bytes Of Wisdom: Day 62)
published: true
description: Bytes of Wisdom is a new project by Sam Jarman that brings together snippets of advice for software engineers
tags: career, journey, advice
//cover_image: https://direct_url_to_image.jpg
---

![Feedback is like being pelted with chunks of gold. It hurts initially, but hold onto it and use it because it's valuable.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xw8aewr0g04r6f7er3q8.png)

A silly metaphor I came up with for feedback a while ago is likening it to having chunks of gold/coins thrown at you. Owch. But pick up those coins and put them to use as they're quite valuable. Feedback does tend to hurt, especially when delivered even slightly less than perfectly, but just being calm an seeing the wood for the trees is a good way forward.

Heads up: As with any terse bit of advice, there will be exceptions of course, and subtleties and nuance that can't possibly be captured in a Byte of Wisdom. This has been what I've experienced, I'd love to hear yours in the comments too!

You can catch up with all the other bytes at http://bytesofwisdom.com/