teleren/devto huggingface dataset:
Build a flutter theme switcher with riverpod
Tags: flutter, riverpod, theme, dart
Published: 2022-10-30 15:03:45

---
title: Build a flutter theme switcher with riverpod
published: true
description: 
tags: #flutter #riverpod #theme #dart
---

With this article, I added dark and light themes in the MaterialApp.
{% embed https://dev.to/leehack/material3-theme-recipe-for-the-flutter-app-3gd9 %}

Now it's time to add a toggle switch in the app. I'll use [riverpod](https://riverpod.dev/). One of the famous framework people uses for state management. As expressed in the official document, It's more caching framework itself, but It's helpful to cache the global states.

## Setup the riverpod
1. Add the riverpod package
    ```bash
    flutter pub add flutter_riverpod
    ```
2. Wrap the MainApp with the ProviderScope
    From:
    ```dart
    void main() {
      runApp(const MyApp());
    }
    ```
    To:
    ```dart
    void main() {
      runApp(const ProviderScope(child: MyApp()));
    }
    ```

## Implement the theme toggle switch
1. Add the `themeModeProvider`
    ```dart
    final themeModeProvider = StateProvider<ThemeMode>((ref) {
      return ThemeMode.dark;
    });
    ```
2. Convert the `MyApp` as `ConsumerWidget` and watch the provider
    ```dart
    class MyApp extends ConsumerWidget {
      const MyApp({super.key});

      @override
      Widget build(BuildContext context, WidgetRef ref) {
        final themMode = ref.watch(themeModeProvider);
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            useMaterial3: true,
            colorScheme: lightColorScheme,
            textTheme: textTheme,
          ),
          darkTheme: ThemeData(
            useMaterial3: true,
            colorScheme: darkColorScheme,
            textTheme: textTheme,
          ),
          themeMode: themMode, // Apply them theme
          home: const MyHomePage(title: 'Flutter Demo Home Page'),
        );
      }
    }
    ```
    Every time the themeModeProvider changes, the widget rebuilds and assigns the new value to the `themeMode`
    ```dart
    final themMode = ref.watch(themeModeProvider);
    ```

3. Add the toggle button
    ```dart
    Consumer(builder: (context, ref, child) {
      final theme = ref.watch(themeModeProvider);
      return IconButton(
          onPressed: () {
            ref.read(themeModeProvider.notifier).state =
                theme == ThemeMode.light
                    ? ThemeMode.dark
                    : ThemeMode.light;
          },
          icon: Icon(theme == ThemeMode.dark
              ? Icons.light_mode
              : Icons.dark_mode));
    })
    ```

The complete code can be found on [github](https://github.com/leehack/flutter_skeleton/tree/theme_switcher)
How to make smooth progressive image loading in React js
Tags: react, webdev, design, javascript
Published: 2022-10-30 14:42:44

Hello developers,  Does anyone know how to use React js to create a smooth progressive image loading precisely like the website given below?

If anyone is aware, kindly let us in on the information.
thanks :)

[getplanta](https://getplanta.com/)


![getplanta](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/56me1so1mg4ssste8589.gif)
Video Streaming using Spring Webflux by Onurdesk
Tags: springboot, springwebflux, tutorial, programming
Published: 2022-10-30 14:38:04

In this tutorial, Ill like to show you how to use Spring WebFlux to accomplish video streaming. Spring will do all of the heavy work for us, so it will be a lot easier than you think.

This Articles Contents

[Video Streaming
Sample Application:
Project Setup
Spring WebFlux Video Steaming:
Spring WebFlux Video Steaming – Demo:
Functional Endpoint:
Summary
](https://onurdesk.com/video-streaming-using-spring-webflux/)

## Video Streaming

The browser client does NOT download the complete video content when you watch a movie via Amazon Prime or a video tutorial via YouTube or Udemy. It initially receives some material. It obtains the next few pieces in a streaming way while playing the material so that the consumer is engaged with the video as soon as he clicks on it, rather than having to wait for the entire material to download.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2d4ulaqkqdye24faqz9r.gif)

For a more detailed tutorial[ Please visit:](https://onurdesk.com/video-streaming-using-spring-webflux/)
Creating a simple CLI note app using a shell alias
Tags: terminal, tutorial, bash, linux
Published: 2022-10-30 14:11:33

## Overview

I've been using the terminal for my work as a software engineer for several years now and really love the idea of doing most of my tasks in the terminal. I mainly use `vim` as my IDE and have spent lots of time configuring it to my work style and to improve my productivity over the years. 

Don't get me wrong, I love tools like VSCode (especially the [web version](https://vscode.dev)) and I started out using text editors like Notepad++ and Sublime Text 2. But when I learned how to use `vim` and configure it to become a full-fledged IDE for everyday use, I fell in love with it. Back then I was really looking into how I can write code with minimal overhead as possible.

Some might say, I'm an old school kind of guy and I'd happily take it as a compliment! 

Enough with the backstory, let's see how we can take note-taking capabilities into the terminal...

## Prerequisites

- Vim 8+ or Neovim 0.5+
- Unix shell

## Creating an alias

If you're using bash, add this line to your `.bashrc` file:

```
# Quickly create a note file for today
NOTES_FILENAME="notes-$(date +%Y%m%d).txt"
alias notes="mkdir ~/notes &> /dev/null; touch ~/notes/$NOTES_FILENAME; cd ~/notes; vim ~/notes/$NOTES_FILENAME"
```

Let's explain the script above...

First off, we create a `NOTES_FILENAME` variable with the current date formatted into the filename. So for example, today is October 10, 2022, then the file `notes-20221010.txt` would be created.

Second, we pass that variable to the `alias notes=` declaration. To learn more about aliases, check out [this article](https://www.geeksforgeeks.org/alias-command-in-linux-with-examples/).

The `alias notes=` declaration is like a shortcut for a shell command. So instead of running the actual commands, you save it into a command named `notes`. In this case, this command does 4 things:

1. It creates a folder named notes, into the current user's home directory (`~/notes`)
2. It creates a file with the name based on the `NOTES_FILENAME` variable we created earlier.
3. It cds into the `~/notes` directory.
4. Runs the `vim` text editor for the file we created.

### Notes environment

Now we can access our notes by just running the `notes` command in the terminal.

If you have configured `vim` to have a fuzzy search for project files or live grepping action, you should be able to search through your notes. And given the date format we mentioned earlier, you can search by file for a specific date. Simple enough yeah? LGTM!

### Conclusion

The steps we did above is a very simple example of how we can  quickly create notes in the terminal and focus on writing what's on our mind fast without leaving the terminal. If you're like me and you mostly work on the terminal and use `vim` as your text editor, this is a very handy tool, simple and practical.

Let me know your thoughts about this. Cheers!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ok3j7gp3ezfvcgwzz7c.gif)
Create a very simple State Machine with closures
Tags: javascript, mvu
Published: 2022-10-30 13:50:26

State machine are a great way to render consistent view.
Here is a very simple example of a state machine created via a closure.

Once the state machine created, you simply pass it the desired transition, and the state machine returns the updated one. 

You can test it here [SimpleStateMachineDemo](https://flems.io/#0=N4IgZglgNgpgziAXAbVAOwIYFsZJAOgAsAXLKEAGhAGMB7NYmBvAHjmoCcIAHYgAjgdqAXgA6IEsW5xEAelnUAJmnwArOIphQIANw740MYrIDmhWRg7EAnpp2ysOgK4ABAIz4PAJlmKIcY0cnfCcsRXwsCBV1cQA+Fll2Ll5Y0TQ0lj8dPghFMRAMbm44tL4+DN9dVPS0Fm5qsoAVQn8+GAAPbG5YPic4GD4WDD5CDhgwYQBySWk5UwhiQicAI3w6LAsrWxh7IMnYgFkANQBVBIxYvjBaDj4xtE0uNBM+RYHC4trZesoQfthqMQIPQEIgQAAORAAFhAAF8KOhsLgwWoEFQ6AwmMQ8BiAnxgFgKHxFLRCb0SWT7o8iSQyHxYXxhHxjicANxpNK4-iENyMvhYAAU4h54gAlOy0Fy+MsnMRiPQ+YLxDK5fQxRK0mAnJKgQqdhgoE4MIwAPoBY0wE1YDDUFqGPgC82MInEDgYNBwBbAtCi-GlAQAdwWtoFrvdnt1Pr9aDKsb41Aw-SFICi1DFfEQ-rjZSdAyZwHwhdzRLo2sYt0QAmIFrWtDLMFuAGombzYVns8sxhgANYS7PxxMwZOaNMgX2ZmP9qsWvkFovV53xuuYivTxi1+u3AC0Lfp7bjnZgPdZcf3xPGGCcUGIE6na7z9-9bcnY2ITg4MdzEufmu1gO995WjadoDAKvrAP6sD8LmfLRnGpYrhmfAAAxPv6Wo6gBZoLpa1q2lEoFhh6Xr0OB7YwUy+qGha2E0XhIGOjhLpusRkbiu2r7vp+OF9nuL5GFxZS0aa9EEd+HJoBh-4KgAgkUDpwFgZGTlB958opYG8apHx8hSDrsZOZQ8gKAAGADKOH8sBBHnlgtBIQAJMAuYbiusImaK7YqvKaDJqmYr4PQ1DaNQ3Z8mBjKXMAAhKimkrqr03CKDROmOkpsK8WU3n0MOMCjqKgWSiFYVMhFwhRTFuX5SeThJSl8lpaKGX+k4emaf6nEfnwHziWgqmKepOFAfhhjtTUUmRolyWmqlinKWUVINgKHxEnJ3CNQZP5oLV02WrNSkamgvz-HlkagiAbgAMyIG4MLwoiOB4GscBojQ9CMMwYJwgAurCQA)

```js
const {m, dom, udom, render, html } = MVU;

const h1 = m("h1");
const button = m("button");

function evaluate_state_machine (state, transition) {
  switch(transition) {
      case("inc") :
        state = {...state, counter : state.counter += 1 }
        break;
      case("dec") :
        state = {...state, counter : state.counter -= 1 }
        break;    
      default:
        state = state
  }
  return state;
}

function state_machine () {
  let state =  {
    counter : 0
  }
  function _state_machine (transition) {
    state = evaluate_state_machine(state, transition);
    return state;
  }
  return  _state_machine;
}

function App (sm) {
  let state = sm();
  let app = dom ();
    h1(`State machine demo : ${state.counter}`)
    button("inc").onclick = () => { sm("inc"); update_app (sm)};
    button("dec").onclick = () => { sm("dec"); update_app (sm)};
  udom ();
  return app;
}
let sm = state_machine();

function update_app (sm) {
  render(app, App(sm));
}

update_app (sm);
```
What is Plagiarism? use best free Plagiarism checker！
Published: 2022-10-30 13:25:09

## **What is Plagiarism?**

Plagiarism is the act of passing off someone else's ideas or writing as your own. It's an act of intellectual dishonesty,violates honor codes and can cause irreparable damage to a person's reputation.

[Online plagiarism checker](https://checkplagiarism.info/) is widely used and loved by thousands of students, teachers, and content writers.Use [best free plagiarism checker](https://checkplagiarism.info/),copy and paste your text below in the text box,check plagiarism for free!

The best Plagiarism checker: https://checkplagiarism.info
How to Make Responsive Landing Page Using Html CSS JavaScript
Tags: webdev, tutorial, css, html
Published: 2022-10-30 13:24:45

{% youtube 6snv-yu2_c4 %}

How to Make Responsive Landing Page Using Html CSS JavaScript

This video will show you how to How to Make Responsive Landing Page Using Html CSS JavaScript

🔗 Essential links
-----------------------------
[Download the starter file to practice](https://drive.google.com/file/d/17C_TyFJ7I6n38uyOCGJywV3ihkWc027j/view?usp=share_link)

---

⏱️ Timestamps
-----------------------------
0:00 - Demo
4:19 - File structure
5:26 - Project initial
12:03 - Preloading
17:49 - Header
32:03 - Hero section
42:37 - Instruction section
47:55 - Top restaurant section
55:59 - CTA section
59:12 - Stats section
1:02:12 - Testimonials section
1:06:12 - Partnership
1:12:03 - Newsletter
1:16:19 - Footer
1:31:40 - Media queries
Cherry Pick Azure DevOps
Tags: azure, git
Published: 2022-10-30 13:24:07

Cherry picking in Git is designed to apply some commit from one branch into another branch. It can be done if you eg. made a mistake and committed a change into wrong branch, but do not want to merge the whole branch. You can just eg. revert the commit and cherry-pick it on another branch.
To use it,
you just need git cherry-pick hash, where hash is a commit hash from other branch.
also you can find it on Azure DevOps boards for PRs.
#git #versioncontrol #azuredevops2

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0cuzwgb7m36ifbkfmjld.jpeg)
how use dynamic condition is filtering in react js
Tags: javascript, dynamic, filter, multiplefilterconditioninreact
Published: 2022-10-30 13:15:11

Suppose you have an array of Json your task is need to filter the array dynamically with six different type of values. The values are store dynamically into json object.If object value change you need to push new conditions. 


**My Working procedure:**
1. declare an array where we push our conditions.
2. If condition matches then push new condition into that array.
3. then filter data and check each condition with every function 

```
const [formdata, setFormdata] = useState({});

##handle onchange
setFormdata({ ...formdata, 
            [e.target.name]: e.target.value 
           });

let conditions = []
if (formdata.geography) {
    conditions.push(function (item) {
        return item.geography === formdata.geography;
      });
  };

if (formdata.traffic_type) {
    conditions.push(function (item) {
     return item.trafficType === formdata.traffic_type;
        });
  };

  if (formdata.task_type) {
      conditions.push(function (item) {
         return item.taskType === formdata.task_type;
     })
 };

 if (formdata.status_type) {
     conditions.push(function (item) {
         return item.statusType === formdata.status_type;
     })
}

 if (formdata.rev_type){
    conditions.push(function (item) {
        return item.revType === formdata.rev_type;
    })
}

if (formdata.device_type){
   conditions.push(function (item) {
       return item.deviceType === formdata.device_type;
   })
}
        
 const itemsMatchingCondition = campaigns.filter(d => 
                                conditions.every(c => c(d)));

console.log(itemsMatchingCondition);
```

Note: If you have any issue feel free to knock me. I am happy to contribute with you.
Use Apollo 3 to Manage Local State
Published: 2022-10-30 12:19:49

(https://www.apollographql.com/blog/apollo-client/caching/dispatch-this-using-apollo-client-3-as-a-state-management-solution/)

[https://medium.com/kili-technology/why-you-could-switch-from-redux-to-apollo-in-react-ffaf26cc11c6](https://medium.com/kili-technology/why-you-could-switch-from-redux-to-apollo-in-react-ffaf26cc11c6)

[https://kulkarniankita9.medium.com/oh-hello-apollo-client-goodbye-redux-49dfdeda16d1](https://kulkarniankita9.medium.com/oh-hello-apollo-client-goodbye-redux-49dfdeda16d1)

[https://www.apollographql.com/blog/apollo-client/caching/demystifying-cache-normalization/](https://www.apollographql.com/blog/apollo-client/caching/demystifying-cache-normalization/)

https://www.apollographql.com/docs/react/local-state/reactive-variables
Weekly Challenge 188
Tags: perl, python, theweeklychallenge
Published: 2022-10-30 11:13:45

[Challenge](https://theweeklychallenge.org/blog/perl-weekly-challenge-188/), [My solution](https://github.com/manwar/perlweeklychallenge-club/tree/master/challenge-188/sgreen)

## Task 1: Divisible Pairs

### Task

You are given list of integers `@list` of size `$n` and divisor `$k`.

Write a script to find out count of pairs in the given list that satisfies the following rules.

The pair (i, j) is eligible if and only if
1. `0 <= i < j < len(list)`
1. `list[i] + list[j]` is divisible by `k`.

### My solution

This seems relatively straight forward. As list is a reserved word in Python, I used `nums` for the Python version. For this I start with the value of `matches` as zero. I take the last number off the input using the pop function, and store that as `k`.

For the `i` iterator, I start at zero and finish at the second last number. For the `j` iterator, I start at `i+1` and end at the last position. I increase `matches` if the numbers at the relevant position is divisible by `k`. And then print the result.

I know some clever eggs are going to use map, which is probably going to be a little faster. In the case of these challenges, some times I'll make code easier to understand over speed.

### Examples

```bash
$ ./ch-1.py 4 5 1 6 2
2

$ ./ch-1.py 1 2 3 4 2
2

$ ./ch-1.py 1 3 4 5 3
2

$ ./ch-1.py 5 1 2 3 4
2

$ ./ch-1.py 7 2 4 5 4
1
```

## Task 2: Total Zero

### Task

You are given two positive integers `$x` and `$y`.

Write a script to find out the number of operations needed to make both ZERO. Each operation is made up either of the followings:

* `$x = $x - $y` if `$x >= $y`
* `$y = $y - $x` if `$y >= $x` (using the original value of `$x`)

### My solution

The hardest part of this challenge was understanding what was required. In particular 'using the original value of $x'. I took this to mean the value of $x that was provided, but it became clear that it meant $x at this particular iteration.

With that out of the way, the code become straight forward. I have a value called `count` starting at 0, and a loop that continues until both `x` and `y` is 0.

For each iteration, I add one to the `count` value. If `x` is greater, I take `y` of it, likewise if `y` is grexater I take `x` off it. If `x` and `y` are the same, I set them both to zero, as we know that taking the other value from each would result in this.

### Examples

```bash
$ ./ch-2.py 5 4
5

$ ./ch-2.py 4 6
3

$ ./ch-2.py 2 5
4

$ ./ch-2.py 3 1
3

$ ./ch-2.py 7 4
5
```
Can you see me??
Tags: python, programming, beginners, opensource
Published: 2022-10-30 11:07:41

## 👁 Hideandseek Preview 

![ezgif com-gif-maker](https://user-images.githubusercontent.com/72777943/194717665-1fb16b59-b5c5-4aaf-b94c-1ecddf279b58.gif)

## 👓 What is HideAndSeek?
Hideandseek is a small tool developed to scan for a username on multiple platforms.

### 👀 Hideandseek scans many known platforms, such as:
- https://youtube.com/
- https://facebook.com/
- https://reddit.com/
- https://www.instagram.com/
- https://in.pinterest.com/
- https://twitter.com/
- and more! 

## ⌨️ Commands
```
usage: hideandseek.py [-h] [-v] [--wildcard]

HideAndSeek Flags

options:
  -h, --help  show this help message and exit
  -v          Verbose
  --wildcard  Returns all as True
```

### 🎥 Example 
```
you@pc: hideandseek.py
[=]  Enter a username:  swiftglitxh
[!]  Scanning 'swiftglitxh' on 54 different platforms

[+] [FOUND] #6   https://twitter.com/swiftglitxh  =>  swiftglitxh Found!
[+] [FOUND] #11  https://steamcommunity.com/id/swiftglitxh  =>  swiftglitxh Found!
[+] [FOUND] #44  https://www.peanut-app.io/swiftglitxh  =>  swiftglitxh Found!
[+] [FOUND] #49  https://www.shutterfly.com/sitesearch/swiftglitxh  =>  swiftglitxh Found!
[+] [FOUND] #50  https://mymfb.com/search/?q=swiftglitxh  =>  swiftglitxh Found!
[+] [FOUND] #51  https://www.habbo.com/profile/swiftglitxh  =>  swiftglitxh Found!
[+] [FOUND] #52  https://www.plurk.com/swiftglitxh  =>  swiftglitxh Found!

[!] SCAN COMPLETE!
```
The Three Laws of Test-Driven Development
Published: 2022-10-30 10:35:55

When I studied at Hacktiv8 Indonesia I was told about Test-Driven Development. It is a development process where instead of you write the code real implementation, in TDD you have to write the test first.

I still remember the expression on my face, “lol, we don’t have any code? what to test?”.

Long story short, I am in love with TDD. Other than it being cool to write a unit test, it also helps a lot in the development process, especially when you working on a team.

Read more at my blog:

https://blog.muhammadilham.xyz/post/three_laws_of_tdd/

Kindly leave comments suggestions criticisms or anything xD
creating a simple database using SQL
Tags: sql, postgres, database, webdev
Published: 2022-10-29 23:26:58


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dti9rwvxrz9w9plxwuvg.jpg)assuming you have some basic understanding of database and SQL, the logical next step is to interact with SQL and creating databases and have a feel of writing queries.If you what a quick reminder of theory behind SQL, [here](https://dev.to/nelsonchege13/sql-101-447b) is a blog to help you on that.

On this blog, i will be taking you through creating a simple database for a coffee shop.

Firstly we will define the schema for the database tables which is simply the blueprint of how the database will look like.

The coffee shop database will have three tables:

1. Coffee Menu
2. Employee table
3. Orders table

columns for Coffee Menu table include:

1. id
2. Coffee name
3. price

columns for Employee table include:

1. id
2. employees name
3. role

columns for Orders table include:

1. id
2. coffee ordered (foreign key from coffee menu table)
3. served by (foreign key from Employees table)
4. order time

with this we have a basic look at how the database looks like and now comes the best but running some SQL. i'll be using PostgreSQL but the commands will still work for any RDBMS.
the command for creating a database is:

`CREATE DATABASE <db_name>;`

note that any SQL query written must end with a semi colon.In this case i will run the below command to create the table.

`CREATE DATABASE coffee_shop;`

next step is witting queries to create the different tables .The SQL format for creating a table is:

`CREATE TABLE table_name (
 column_name datatype,
 column_name datatype,
 ….
);`

There are different datatypes that can be stored in a database column.Read more on the different datatypes [Here](https://www.w3schools.com/sql/sql_datatypes.asp). For our tables i will run the following SQL queries:

`CREATE TABLE coffee_menu (
 id INTEGER PRIMARY KEY,
 coffee_name VARCHAR(255),
 price FLOAT
);`

`CREATE TABLE Employees(
 id INTEGER PRIMARY KEY,
employees_name VARCHAR(255),
 role VARCHAR(255)
);`

`CREATE TABLE Orders (
 id INTEGER PRIMARY KEY,
 coffee_ordered INT,
 served_by INT,
 order_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
 FOREIGN KEY (coffee_ordered) REFERENCES coffee_menu(id),
 FOREIGN KEY (served_by) REFERENCES Persons(id)
);`

That is it, that's all the queries needed to create our database.this will create all the tables and required columns for each table.