teleren/devto huggingface dataset:
How to Send and show data from flutter app to MySQL Database without PHP OR RestApi server
Tags: dart, flutter, database, mysql
Published: 2022-08-21 06:58:00

## Introduction

This article showcase the how to implement MySQL database inside flutter app without using any external service.

## Explanation

First you have to start Xampp service and start apache service and MySQL service if you are using Windows OR if you are using MacOS you can use MySQL workbench

## Package

We will use mysql1 package for this purpose. But if you don’t like it, you can also use mysql_client package for this purpose. Links are given blow for both packages.

1:- mysql1
2:- mysql_client

## Step 1

First thing you have to do is to create a database inside MySQL. If you are using Windows, use Xampp controller and start Apache Server and also MySQL server.


![stepOne](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/itnhg9khesumjotfyhcq.PNG)

You can edit the port in config option or leave it default and click on Admin option to lead the phpMyAdmin


![stepTwo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ddqsilot1wynm9ks39cr.PNG)

As you can see that, it’s running on local host. You can click on *New option to create a database such as I created profiles, and its table is users and as you see the data inside that I inserted using flutter.

You can also create table using packages mentioned above, but I prefer it creating inside phpMyAdmin. The *new option inside the profiles is to create a table.

## Step 2:-

Now it’s time to set up our database connection using package


![stepThree](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mvia75sg1u4u85zsgt5y.png)

## Insert Data


![inserData](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a0627oo6mzfwjbc3ycjn.png)


## Show Data


![showData](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w3o13dbflruw4wixtvc6.png)

## Important Note:-

About localHost always use ‘10.0.2.2’ for android/IOS app because you will end up with socket error.

If you use wrong password than it will end up with this error

ERROR 1045 (28000): Access denied for user ‘root’@’localhost’ (using password: YES)

Also, this is direct connection to our MySQL database which totally scary to use because it can be easily accessible by any other third party person and your whole database will be compromised. It’s best to use server to integrate MySQL database service.

Which you can do using dart_frog package to create a server with dart, or you can use any other backend service to create a custom server.

GitHub Repo:- [Link](https://github.com/ayoubzulfiqar/flutter_with_mysql)
My understanding of learning vanilla JS
Tags: javascript, programming, coding
Published: 2022-08-21 06:56:45

When I started learning web development initially I learnt **HTML** 
(hyper text markup language) then,**CSS**(cascading style sheets) then I came to learn vanilla JS/javascript. _Vanilla_ js is the plain javascript without any framework or library.
**console.log('Hello World')**, sounds familiar ? 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4rj5lzlux7bfdncut2ad.png)indeed the main line of code that every beginner learn while learning javascript basics. When I took in my first js code I thought what is this? , what it's utilization?, Why console.log('')?.And then variables,data types,operators,functions loops,objects,arrays, etc. As javascript was my very first programming language I had never experienced these words.But then I learnt **DOM**(DOCUMENT OBJECT MODEL) while learning DOM I figured the reason why these things are utilized for any website,since without DOM javascript must be utilized to make **CLI** (Command Line Interface) yet with regards to GUI(Graphical User Interface) javascript assumes exceptionally fundamental part for putting functionality to any webpage graphically.
when we learn javascript the entire console.log('') concept seems to be meaningless thinking that why one will inspect our webpage to see the js in the console (developer tool in every browser)? however, then I understood that alright so the console.log('') is utilized majorly for debugging(to counter any code error).Dom manipualtoin truly assisted me with learning JS coherently and,afterall each programming language has one single capacity **INPUT**,**OUTPUT** and **PROCESSING**.
Same with the js in browser or even in console it takes any input ,processes it and then gives output the first dom functionality which I learnt was event listener,that helped me to understand how any button in browser performs any action while been ‘clicked’.
Js is seems to be an amazing as well as very usefull and easy to learn programming language,as a beginner I understood it’s basics quickly and implemented on my various projects and I’m learning it daily.
CSS Directional Properties vs Logical Properties
Published: 2022-08-21 06:38:03

For a lot of people, responsive web design means "make this website look good regardless of the device it's being displayed on". It's true, but responsiveness means much more than just the fact that our content can fit to the user's screen size.

One subject to keep in mind is _**Internalization**_. Let's take a look at that definition from w3.org :

> "If you internationalize, you design or develop your content, application, specification, and so on, in a way that ensures it will work well for, or can be easily adapted for, users from **any culture, region, or language.**"
source: [Internationalization - W3C](https://www.w3.org/standards/webdesign/i18n)

So, when we want to internationalize a web app, besides translations, we also need to ask: **"what will happen in the day that the direction of the text will be the opposite of the current direction?"**

You might develop your web app for the **LTR** languages, but then the business decides to enter a market which it's language direction is **RTL**. In those cases, it's really important to know the difference between **CSS Directional Properties**, and **CSS Logical Properties.**

## CSS Directional Properties
As the name suggests - CSS Directional properties are **based on direction.** We all use them daily: **top, right, bottom, left.** If we want our div to have a margin on its right side, we will use margin-right, and yay, problem solved.

The problem with that approach is that if we change the direction of the page, let's say from LTR to RTL, the page direction changes from one side to the other, but the margin on the div did not move to the other side.

## CSS Logical Properties
In simple terms, logical properties are properties that are linked to the flow of text, or the document, and not to a static direction. We don't use top, bottom, left, and right, but instead - we use more fluent terms, like start and end, which allows us to have more flexibility with our layouts.

Let's look at an example:

```
// HMTL
<body>
  <div class="content">
    <h1>This is the title</h1>
    <p>This is the content</p>
  </div>
</body>
// CSS
body{
  direction: ltr;
}
.content{
  border: 1px solid black;
  width: 400px;
}
h1, p{
  margin-left: 1.5rem;
}
```
Now let's see how we do the same thing with logical properties.

```
h1, p{
  margin-inline-start: 1.5rem;
}
```
The difference is that now our content will know to have margin from the start of the natural direction flow of the page, and not statically choose left or right.

You can see this difference in the next pen. Check what happens when you change the direction of the body from ltr to rtl(click on edit in the top-right corner):

{% codepen https://codepen.io/yairwebdev/pen/mdxGmNp %}

## The next steps
Moving to CSS logical properties can be a bit tricky for those who are used to directional properties. For all of you that want to dig deeper into this subject, I would suggest checking out the [MDN guide about CSS logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties)
Chat App with WebSocket: Deleting User
Tags: javascript, webdev, react, node
Published: 2022-08-21 06:13:00

{% embed https://dev.to/sokhavuth/table-of-contents-3m2h %}
GitHub: [https://github.com/Sokhavuth/chat](https://github.com/Sokhavuth/chat)
Heroku: [https://khmerweb-chat.herokuapp.com/](https://khmerweb-chat.herokuapp.com/)
<br/>

<p>When a user leaves the chat page, related socket client could inform socket server for it to broadcast this information to all connected socket clients. In this case, socket server could delete the user who left the chat page from the users  collection object and broadcast this new users object to socket clients.</p>

{% embed https://gist.github.com/Sokhavuth/b656d9bf3b36836b033b2a5bd506ee5c %}

{% embed https://gist.github.com/Sokhavuth/52a8f662114db3e10572fab0b3c6ed9d %}
Fix - Rendered fewer hooks than expected in React
Tags: react
Published: 2022-08-21 06:10:54

Are you working on a react application from the scratch and getting the following error while using hooks?

`Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.`

In this article, we will see why this error occurs, and how to fix it.

## Replicating the issue

First, let's replicate the issue. Update your code with the following:

```jsx
import { useEffect, useState } from "react"

function App() {
  const [hasError, setHasError] = useState(false)
  if (hasError) {
    const x = { foo: true }
    if (x.foo) {
      return <div>Error</div>
    }
  }

  // eslint-disable-next-line react-hooks/rules-of-hooks
  useEffect(() => {
    setHasError(true)
  }, [])

  return <div className="App">Loading</div>
}

export default App
```

If you run the code now, you will get the following error:

![Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/96owd9igigepis0uae4g.png) 

## Understanding the issue

The above error occurs because, we have a return statement inside the conditions and after the return, we are having useEffect hook. As the rule of hooks, we should run all the hooks irrespective of conditions. So we need to maintain all the hook calls before any return statement.

## Fixing the issue

Moving the useEffect hook above the if conditions should fix the issue:

```jsx
import { useEffect, useState } from "react"

function App() {
  const [hasError, setHasError] = useState(false)

  useEffect(() => {
    setHasError(true)
  }, [])

  if (hasError) {
    const x = { foo: true }
    if (x.foo) {
      return <div>Error</div>
    }
  }

  return <div className="App">Loading</div>
}

export default App
```
Fix - React Hook "useEffect" is called conditionally
Tags: react
Published: 2022-08-21 06:09:14

If you have started using react hooks recently, you might have come across the following error:

`React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?`

In this article, we will try to replicate the error, see why the error occurs and will fix the error.

## Project Setup

Create a react project using the following command:

```bash
npx create-react-app react-useeffect-called-conditionally
```

## Replicating the issue

Now update the `App.js` with the following code:

```jsx
import React, { useEffect, useState } from "react"

const App = () => {
  const [isLoading, setIsLoading] = useState(false)

  if (isLoading) {
    return <div>Loading..</div>
  }

  useEffect(() => {
    // Load some data
    setIsLoading(false)
  }, [])

  return <div>App</div>
}

export default App
```

If you try to run the app, you will see the following error in the browser:

![React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x8v9cs7zr2shj1q0nvq2.png) 

## Understanding the issue

React is throwing the above error because we are calling [useEffect](https://www.codingdeft.com/posts/react-useeffect-hook/) after the return statement (inside `isLoading` check). It is mandatory that all the hooks are defined before any return statement.

## The fix

The fix is simple. Just move the useEffect block before the if condition and the code should work fine.

```jsx
import React, { useEffect, useState } from "react"

const App = () => {
  const [isLoading, setIsLoading] = useState(false)

  useEffect(() => {
    // Load some data
    setIsLoading(false)
  }, [])

  if (isLoading) {
    return <div>Loading..</div>
  }

  return <div>App</div>
}

export default App
```
Fix - React Hook "useState" is called conditionally
Tags: react
Published: 2022-08-21 06:06:58

Have you started using React hooks recently and got the following error?

`React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?`

In this article, we will see why this error occurs, and how to fix it.

## Replicating the issue

First, let's replicate the issue:

```jsx
import React, { useState } from "react"

const App = () => {
  const [isLoading, setIsLoading] = useState(false)

  if (isLoading) {
    return <div>Loading..</div>
  }
  const [data, setData] = useState({})

  return <div>Home</div>
}

export default App
```

If you update `App.js` to the above code, you will get the following error :

![React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6alby65kj2e156udcncx.png) 

## Understanding the issue

Before fixing the issue, let's understand the issue. As the error message indicates, you should not call useState after the return statement or inside an if condition. React hook calls should always happen before any return statement and preferably at the top of the component.

## Fixing the issue

To fix the error, you just need to move the useState call before the if condition:

```jsx
import React, { useState } from "react"

const App = () => {
  const [isLoading, setIsLoading] = useState(false)
  const [data, setData] = useState({})

  if (isLoading) {
    return <div>Loading..</div>
  }

  return <div>Home</div>
}

export default App
```
Every JVM Garbage Collector you should know.
Tags: java, performance, garbagecollector
Published: 2022-08-21 05:27:21

In today’s era of cloud-native applications, getting the most out of your application with bare minimum resources has become a new non-functional requirement. If you are building JVM applications, you may want to size your heap correctly to get the most out of it. What is going on with your heap may have an impact on your application and if you want to reach the maximum throughput or if you want to have the least latency, then choosing an implementation of GC(garbage collector) may help.

Check out my latest post on every JVM GC available and when to choose what

https://blog.devgenius.io/every-jvm-garbage-collector-you-should-know-2b4b3b96282b
936. Leetcode Solution in Cpp
Tags: cpp
Published: 2022-08-21 05:14:42

```
class Solution {
 public:
  vector<int> movesToStamp(string stamp, string target) {
    vector<int> ans;
    // stamped[i] := true if we already stamped target by stamp on index i
    vector<bool> stamped(target.length());
    int stampedCount = 0;  // out goal is to make stampedCount = target.length()

    while (stampedCount < target.length()) {
      bool isStamped = false;
      // try to stamp target[i..i + stamp.length()) for each index
      for (int i = 0; i <= target.length() - stamp.length(); ++i) {
        if (stamped[i])
          continue;
        const int stampified = stampify(stamp, target, i);
        if (stampified == 0)
          continue;
        stampedCount += stampified;
        isStamped = true;
        stamped[i] = true;
        ans.push_back(i);
      }
      // after trying stamp each index, we can't find a valid stamp
      if (!isStamped)
        return {};
    }

    reverse(begin(ans), end(ans));
    return ans;
  }

 private:
  // stamp target[i..i + stamp.length()) and return # of newly stamped chars
  // e.g. stampify("abc", "ababc", 2) returns 3 because target becomes "ab***"
  int stampify(const string& stamp, string& target, int s) {
    int stampified = stamp.length();

    for (int i = 0; i < stamp.length(); ++i)
      if (target[s + i] == '*')  // already stamped
        --stampified;
      else if (target[s + i] != stamp[i])
        return 0;  // we can't stamp on index i

    if (stampified > 0)
      fill(begin(target) + s, begin(target) + s + stamp.length(), '*');

    return stampified;
  }
};

```
#leetcode
#solution
Here is the link for the problem:
https://leetcode.com/problems/stamping-the-sequence/
Guest Posting Sites You Should Submit To For More Organic Traffic
Tags: welcome, tutorial, discuss, productivity
Published: 2022-08-21 04:58:19

best [Guest Posting Sites](https://www.guest-posting-sites.com/) Pakainfo.com is a website that provides software, services, and resources that aid in digital marketing. 

## Guest Posting Sites

pakainfo is a great place to showcase your marketing expertise through guest blogging. Currently, it is one of the best guest blogging sites.

Here are some benefits of **guest blogging:** 

1. Get introduced to a new audience
2. Build brand trust
3. Free backlinks
4. Increase online presence and authority
5. Grow social media following
6. Generate leads

## What is guest posting?

[Guest posting](https://www.pakainfo.com/guest-posting-sites/) is known to be the off-page SEO activity where you get to write an article and submit it to the other blog or website in order to publish it. 

You can easily find out the free guest posting sites list on google or in our posts. However, it is the importance of SEO nowadays.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pmahy3ifipsvhy32egbg.png)

## Why should you submit guest posts?

If you’re looking for an SEO boost, be on the lookout for current guest posting opportunities. Even though the concept of guest posting has been around since the dawn of blogging, it’s still a proven way to enhance your website’s search engine rankings.

Yes, things have changed, and you’ll need to approach guest posts differently than you would have ten years ago. But you can still benefit from things like:

Increased exposure and visibility as a content creator
Improved domain authority from well-placed do-follow links
Better position as a thought leader in your industry

Here are a **few additional tips**: 

1. Determine your goals
2. Find opportunities
3. Shortlist guest posting sites
4. Get some topic ideas together
5. Create a pitch 
6. Prepare your post
7. Follow up
8. Track results

Simply put, guest posting involves writing and publishing articles for other websites. 

The whole idea is to write for similar blogs in the industry and pull some of that traffic back to your own website. 

It is also great for search engine optimization (SEO) since it allows for backlinking opportunities, and as common knowledge goes, the more backlinks a website has, the higher its chances of being ranked well. 

## Best Practices to Get Your Guest Blog Posted

Here are a few tips to get your blog published on top sites. 

### 1. Become an expert in your field

You need to set yourself apart from competitors. Get expertise in your field and create exclusive content that adds credibility and validation to your blogs.

### 2. Create an effective pitch 

Create a personalized pitch. Know who you are pitching to, including the blogs on their website and their audience, in order to demonstrate credibility and knowledge.

### 3. Value your network and relationships  

Your pitch for your guest post may get rejected by a publication, but you can still build your network and maintain relationships so that a different post you write might get accepted in the future.
Sadness VS Depression
Tags: mentalhealth, sad
Published: 2022-08-21 04:33:39

My new blog about “Sadness VS Depression”. I hope it will be useful to differentiate those two words.

> People who have never dealt with depression think it’s just being sad or being in a bad mood. That’s not what depression is for me; it’s falling into a state of greyness and numbness. — Dan Reynolds

We hear about sadness and depression regularly but mostly during and after the pandemic. Most of us think these two words are some but sadness and depression have two different meanings.

Read more at [https://my-beautiful-life-style-praveena-t.blogspot.com/2022/08/sadness-vs-depression.html]

Thanks for reading my blog by spending your time. I hope this blog helped you to get an idea about sadness and depression.

If you like the blog, share it and show some love.

If you know other facts about depression, do share them in the comment section or message me on my social media.

You can read more of my future blogs by following me.

Please share your ideas…
Do you have a newsletter?
Tags: discuss, newsletter
Published: 2022-08-21 03:44:00

Do you have a newsletter? If you do, drop it in the comments and tell us what it’s all about!

If you don’t have one, consider starting one!

Thanks to [Mathyas Kurmann @mathyaskurmann](https://unsplash.com/@mathyaskurmann) for making this photo available freely on Unsplash 🎁
create static html pages without repeating yourself
Tags: webdev, cpp, language, discuss
Published: 2022-08-21 03:17:00

I am  c++ developer and I would like some helps on my project. I am currently developing software that will help you to code static html pages without repetitions.
please fork my project
[h5assembler](https://github.com/ngdream/H5assembler)

## what is  h5 assembler ?
h5a help developers to write html static pages without repeatition
it is made  for web integrator and and people who are a bit lazy like me