teleren/devto huggingface dataset:
Connecting MySQL database in Dart
Tags: dart, flutter, mysql, tutorial
Published: 2022-07-19 11:03:05

Connecting MySQL database in dart is really easy. First you have to create a dart project.
![Create Project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c09c3ukuk5lvxb0j7glt.PNG)

## Plugin

> mysql1: ^0.20.0

This plugin has some issues, but it's something that we have right now to work with.

## Description

Create a function add host which in this case is localhost and port which your MySQL port is running.
In case of Windows you need XAMPP and in case of macOS see the documentation.
db is database name you created inside MySQL. Or You can add it by your own choice if you don't want to choose the existing one. 

![Function](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0r7cb8u73ok606yq10rn.PNG)

### Writing queries inside function


![Queries](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5erp0xx9348glic06dx8.PNG)

## Note

When you are using this plugin, and you're adding the db name in connection setting if you are adding the same name it will give you error even if your data is getting insert inside the database of existing table but one thing you should remember that db name should be different because db represent the database name and table is that will be generated inside the database. One thing also that you should not write insert query again and again to insert multiple data. Just use the same query and change data inside, it will insert on top of it with different ID of course. And at the end, don't forget to close it.


[SourceCode](https://gist.github.com/ayoubzulfiqar/15952e6261210aa687a3868e5769e38d)
Positioning in CSS
Tags: css, javascript, webdev, beginners
Published: 2022-07-19 10:57:40

We come across many elements during the webpage creation, and each of these elements must be positioned on the webpage. For this, we have a **position** property in CSS. The position property is used to align the different elements on the HTML page. Position Property plays an important role in making high-quality web pages.

The CSS position property defines the position of an element in a document. The position property when accompanied by other properties such as the top, left, bottom, and right play an important role in designing a webpage

There are five values the position property can take. These are

1. Static
2. Relative
3. Absolute
4. Fixed
5. Sticky

## Static

Static is the default value for the position property. In static position, elements are positioned according to the normal flow of the page. Left, top, right, bottom and Z-index don't affect an element positioned static.

![Static](https://blog.froont.com/content/images/2015/01/02-Static-position-FROONT.gif)

**Syntax:**

selector{
    position: static;
} 

## Relative

Relative positioned elements also remain in the normal flow of the page. But unlike static the properties of left, right, top, bottom, and Z-index affect the element positioned relative.

![Relative](https://blog.froont.com/content/images/2015/01/04-Relative-position-FROONT.gif)

**Syntax:**

selector{
    position: relative;
    top: value;
    left: value;
    right: value;
    bottom: value;
    z-index: value;
} 

## Absolute

Absolute positioned elements do not follow the normal flow of the page. They are positioned according to the closest relative positioned parent. The properties of left, right, top, bottom, and Z-index to the element are given in accordance per the parent element containing the element which is absolute positioned.

![Absolute](https://blog.froont.com/content/images/2015/01/03-Absolute-position-FROONT.gif)

**Syntax:**

parent{
    position: relative;
}

selector{
    position: absolute;
    top: value;
    left: value;
    right: value;
    bottom: value;
    z-index: value;
} 

## Fixed

The fixed element does not follow normal document flow and position themselves relative to <HTML> tag. This element always sticks to the screen. The properties of left, right, top, bottom, and Z-index affect the element positioned fixed.

![Fixed](https://blog.froont.com/content/images/2015/01/05-fixed-position-FROONT.gif)

**Syntax:**

selector{
    position: fixed;
    top: value;
    left: value;
    right: value;
    bottom: value;
    z-index: value;
} 

## Sticky

An element positioned sticky is basically the combination of position: fixed and position: relative. The element positioned sticky acts as a element positioned relative till a certain point on the screen. After that point the element starts acting as position fixed.

![Sticky](https://css-challenges.com/wp-content/uploads/2020/06/css-sticky.gif )

_Remember that getting better at CSS takes consistent practice. So continue to practice and you'll improve._
The best way to recommend extensions on vscode with your team
Tags: vscode, productivity, programming, tutorial
Published: 2022-07-19 10:56:35

How many times did you see the screen of a colleague using vscode and asked "hey, what extension are you using to do _that_?".

Or a different scenario, in order to make something work properly you and everyone in your team **must** have some extensions installed.
Do you write them in a README.md file?

Here's a better trick!

You can place inside the `.vscode` folder a file called `extensions.json` with this simple structure.
```
{
  "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
}

```

All you have is a `recommendations` array of strings, the names of the extensions.

With this example, when you open the workspace with vscode you'll get a popup asking for install the extensions for eslint and prettier.

You can read more in the official documentation: https://code.visualstudio.com/docs/editor/extension-marketplace#_workspace-recommended-extensions


Did you know that? Are you going to use it? Let me know!
Making a NAFF Discord Bot
Tags: discord, python, tutorial, beginners
Published: 2022-07-19 10:14:24

## Preamble 

So you fancy making your own bot for Discord? Got a fun idea for your community? Well let's get you started. 

For this tutorial I'll be using the python library [NAFF](https://github.com/NAFTeam/NAFF).

I'm going to skip past creating a Discord bot on the [Developer Portal](https://discord.com/developers/applications). If you're unsure check out [this guide](https://naff-docs.readthedocs.io/en/latest/Guides/02%20Creating%20Your%20Bot/).

## Environment
As with any python project, I **strongly** recommend that you make use of Virtual Environments when working on any project. This means that each project will not affect anything else on your system. Don't worry, this isn't setting up a full-fledged virtual machine, just small python environment. 
```bash
cd "[your bots directory]"
python3 -m venv venv-name

# Linux
source venv/bin/activate
# Windows
venv/Scripts/activate
```
It's that simple, now you're using a virtual environment. When you're donme, just type `deactivate`. If you want to learn more about virtual environments, check out [this page](https://docs.python.org/3/tutorial/venv.html)

## Installation
Installing python libraries is really easy! Just type this command and you're good to go
```bash
python3 -m pip install naff
```

## Basic Bot
Let's make something really simple first, we just want to connect to Discord, and say we've logged in. 
```python
import naff

bot = naff.Client()


@naff.listen()
async def on_ready():
    print(f"Logged in as {bot.user.username}")

bot.start("your_bot_token_here")
```
Now just run your code, and you should see it login!

## Commands
Its pretty boring to only see a logged in message, it would be nice to actually have commands; so lets do that now. 

For this, we're going to add a `ping` *slash* command to the code we just wrote. 

```python
import naff

bot = naff.Client()


@naff.listen()
async def on_ready():
    print(f"Logged in as {bot.user.username}")

@naff.slash_command("ping", description="A ping command", scopes=[some_guild_id])
async def ping(ctx: naff.InteractionContext):
    await ctx.send("Pong")

bot.start("your_bot_token_here")
```
Lets break down that decorator. `@naff.slash_command` tells NAFF the coroutine is a command. From there you have these parameters

`Name` - The first parameter, this is the name of the command, here it is "ping"
`Description` - When a user views commands, this is the help text they'll see
`Scopes` - These are the guilds this command will be available in, by default they are available everywhere. For testing its recommended to use a testing guild as it will update faster, and keep your mistakes secret 😉

There are [some more parameters](https://naff-docs.readthedocs.io/en/latest/API%20Reference/models/Naff/application_commands/#naff.models.naff.application_commands.SlashCommand) you can play with, but those can be left for a future guide

And there you have it, now you have a NAFF powered discord bot with slash commands. just start the bot and type `/ping` in your guild!
A Quick 10-Second Programming Joke For Today
Tags: jokes, dailydeveloperjokes
Published: 2022-07-19 08:00:24

---
title: "A Quick 10-Second Programming Joke For Today"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e12591e45d64.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

_This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit._

<!--
Joke text:
___Q:___ Why didn't the `<div />` get invited to the dinner party?

___A:___ Because it had no class!
 -->
Feature Engineer each class separately in Binary Classification
Tags: python, machinelearning
Published: 2022-07-19 10:03:40

I have an imbalanced tabular dataset, my problem is a binary classification. The dataset is strongly imbalanced so I have performed oversampling, but it did not solve the issue, you can find the Classification Report below:(The accuracy is 88% but I don't care, it does not represent well the performance since the dataset is imbalanced)
![](https://www.googleapis.com/download/storage/v1/b/kaggle-forum-message-attachments/o/inbox%2F5421044%2Fea4e02f481271a010e67679484b33c64%2FCR.PNG?generation=1658224466177856&alt=media)  
The only explanation that I found is that the features selected are well suited to detect "0" while they don't tell much information about the "1" class, is there any way to catch the best features that represent the "1" class, maybe split the dataset into 1_Class_Dataset and 0_Class_Dataset and catch the best features for each and then combine both? If it is not possible can you please suggest another solution?
How to fix QuickBooks printer issue 20?
Tags: javascript, beginners, tutorial, programming
Published: 2022-07-19 09:25:16

Came across QuickBooks printer not active error and don’t know what can be done? Well, if that is the case then reading this post will help you eliminate the issue from its root cause. Talking about this error, the printer quickbooks error code 20 not is active. Occurs when a user try to install or upgrade to a newer Windows version. It can be caused if the KEY_CURRENT_CONFIG\Software key is deleted. As a result of this issue, the users are not able to publish or send the invoices and payslips which leads to inconvenience. To know the steps to fix the issue along with the factors causing it, make sure to read the post till the end, or contact us at +18445210490
What Factors Cause QuickBooks Error Code 20?
The below factors can trigger this error in QuickBooks:
•	Elimination/deletion of the ‘HKey_current_config\software’ key. 
•	When the multiple QuickBooks versions are installed in the computer. 
•	QuickBooks application isn’t compatible with the PDF driver & operating system.
Steps to reinstall QuickBooks to fix the issue 
The user can perform the below steps related to clean installing QuickBooks and try to eliminate this issue. 
•	The very first step is to close your QuickBooks and all the running programs on your systems.
•	After that head to Control panel.
•	Find programs (Apps) & features option.
•	The next step is to click on Programs & Features.
•	Also, locate the QuickBooks and click on the Uninstall option.
•	The next step is to uninstall and Reinstall QuickBooks on your server computer - Screenshot
•	The user is then required to install a fresh copy of QuickBooks version that is compatible with your system.
•	After the re-installation process gets complete, the program along with the printer will work again.
•	Reboot the system 
•	In case the issue is with PDF converter only, then it is advised to uninstall the old driver and install a compatible driver with your operating system.
After implementing the steps above, it is expected that the reader might be able to eliminate the error code 20 from its root cause. However, if the user isn’t able to, then in that case, contact our QuickBooks support team at +18445210490 and they will provide you with instant support and assistance. We are a team of technically sound QuickBooks professionals who work round the clock to provide immediate support and assistance. 
https://www.qberrorsupport.com/quickbooks-printer-not-activated-error-20/
Get More Information-https://telegra.ph/What-are-ND-files-in-QuickBooks-07-14
Find the Symmetric Difference Between Two Arrays in JavaScript
Tags: javascript, beginners, tutorial, arrays
Published: 2022-07-19 08:58:57

The goal of this post is to find the symmetric difference between two arrays in JavaScript which can be very helpful for total beginners. 

We will compare two arrays and return a new one with items that are found only in one of the arrays. In other words, we will remove the ones that exist in both arrays.

We will use two arrays:


![Two arrays](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uvw9hb4d7lwt54k5c4ha.png)


**Using Array.prototype.filter()**

The filter() method is a function that creates a new array and returns a value that will pass the specific condition.

The plan will be like this:
a. First, we will compare arrayOne to ArrayTwo using another method includes().
b. Secondly, we will compare ArrayTwo to ArrayOne using includes() once again.
c. Then, we will use a third method Array.prototype.concat() to merge the result of the first two steps.


**_Let's get started!_**


![Filter arrays](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pmwdy7jppbnbx1esc3f8.png)

Let's analyze what happened here:

1. First we took the **arrayOne** and used a **filter()** method which returns an array that passes the next condition: check each item in **arrayOne** and return only those which aren't included in **arrayTwo**. 
2. Next, we took the **arrayTwo** and used a **filter()** method which returns an array that passes the next condition: check each item in **arrayTwo** and return only those which aren't included in **arrayOne**. 
3. Finally, we took the results of the first and second steps, the array of items of **arrayOne** that do not exist in **arrayTwo** and the array of items of **arrayTwo** which do not exist in **arrayOne**, and used **concat()** method to merge those two.


There are many other ways to do this however if you are a beginner this is all you need to find the symmetric difference between two arrays in JavaScript.
Scratch top image with mouse dragging
Tags: javascript, scratch, jsplugin
Published: 2022-07-19 08:55:48

Scratch top image with mouse dragging and discover hidden image plugin is working on the Javascript Bridge concept. Scratch Image with is a Javascript plugin used to create canvas, Html5 based scratchcard. JavaScript scratch effect.

[Code Example and Codepen](https://jederalle.com/scratch-top-image-with-mouse-dragging-javascript-example/)
Simple Protected Routes Middleware in NextJS 12
Tags: nextjs, react, javascript, webdev
Published: 2022-07-19 08:42:21

just put the code below in **`<project-root>/middleware.ts`**

[https://gist.github.com/mhaecal/f6acdfb108080fdce44e4c2f3eead306](https://gist.github.com/mhaecal/f6acdfb108080fdce44e4c2f3eead306)
Pro method to shut down your windows 10.
Published: 2022-07-19 08:35:11

We used to shut down our Windows by clicking on windows button then shut down. Or some of us may use Alt+F4 option. But there is an awesome pro way to shut down your Windows 10, thats called 'Slide To Shut Down '. Yes, you can shut down your Windows by sliding on your screen. Sounds good!
Wanna know how? Lets go

**On your desktop, Right click > New > Create Shortcut. You will see a box there, type "SlideToShutDown.exe ". Click enter.**

Its done know, you are ready to go. To shut Down click on the created shortcut, a new screen will popup, slide down. And your windows will shut down. Looks cool 😎
The New Learning Portal is live
Tags: webmetods, iot, adabasnatural, apama
Published: 2022-07-22 09:49:52

---
title: The New Learning Portal is live
published: true
date: 2022-07-19 08:32:41 UTC
tags: webMetods, IoT, AdabasNatural, Apama
canonical_url: https://tech.forums.softwareag.com/t/the-new-learning-portal-is-live/259267
---

 **Where the learner experience begins with YOU.**

> _“Continual improvement is an unending journey.”_  
> Lloyd Dobens

It is now easier to learn how to simplify the connected world by connecting people and technology for a smarter tomorrow.

**[Our new Learning Portal is live.](https://learn.softwareag.com/)**

<video width="100%" height="100%" preload="metadata" controls="">
      <source src="https://aws1.discourse-cdn.com/techcommunity/original/3X/a/2/a2f23bff42c05927807590844854a26f4a3d157c.mp4">
      <a href="https://aws1.discourse-cdn.com/techcommunity/original/3X/a/2/a2f23bff42c05927807590844854a26f4a3d157c.mp4" rel="noopener nofollow ugc">https://aws1.discourse-cdn.com/techcommunity/original/3X/a/2/a2f23bff42c05927807590844854a26f4a3d157c.mp4</a>
    </source></video>
  
What does this change mean for you? With a more streamlined course catalogue, it’s now easier to find the right course at the right time.

Also, finding the support you need has never been easier. The new **Learner Support tab** located on the main menu bar will provide direct access to Instructor-led training options, quick links to product documentation, Tech Community and our Frequently Asked Questions.

The initial change will help to clear the way for things like, “Recently Released” course titles, and “Recommended Courses”. In the future, you’ll be able to access everything from your very own learning dashboard where you can find your learning history including Certifications, Courses and Badges. Sounds good? We’re not stopping there. This is the first of many platform enhancements to come.

Visit us now at [https://learn.softwareag.com](https://learn.softwareag.com/) and let us know what you think. We’d love to hear from you or answer any questions you may have as YOUR experience continues to drive our priorities.

Feel free to reach us at [Learning.Portal@softwareag.com](mailto:Learning.Portal@softwareag.com).

<small>1 post - 1 participant</small>

[Visit the original post](https://tech.forums.softwareag.com/t/the-new-learning-portal-is-live/259267)
MERN FOLDERS & FILES STRUCTURE
Tags: structure, webdev
Published: 2022-07-19 08:14:00

This article tells about MERN Stack folders and files structure, How to name folders and files! first, know that. Lots of beginner developers' mistakes were backend and frontend folders were created in different locations which was a big mistake. When you deploy your project problem will come, First we create the folder and the folder name is MERN-STRUCTURE. Inside the folder create two sub-folders Backend and frontend folders.


![MERN FOLDER STRUCTURE](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n7v4uno1o80ug8rwuw9r.jpg)

we use backend and frontend separate folders, and the backend folder was the server connection and database connection and controls the data and rest APIs. The frontend folder was UI components and .env files were environment variables using server and help to secret port number and database name and secret keys. .gitignore file was ignored in the node_modules folder and .env files, why use gitignore files? The gitignore file helps to store particular files and folders in the GitHub repository.

#### BACKEND FOLDERS STRUCTURE


![Backend Folder Structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6sej3ch4c55sz16ninpq.jpg)


Backend folder inside the lots of sub-folders like this, Config folder was database configuration. The controller folder was the control data and the rest APIs. Middleware folder was authenticated middleware and error middleware, routes folder was rest APIs and router the location. server file important to all files is a configuration in the server file.

#### FRONTEND FOLDER STRUCTURE


![Frontend Folder Stucture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o1ytajuug9b6xx6xz0h3.jpg)

The frontend folder was UI components and easy to display the data and easy way to understand the client. I have used React for the frontend library and React is reduce your code and reusability. Redux is a tool for state management using reactjs.

---

THANKS FOR READING THIS ARTICLE ❤️
[Design Pattern] Strategy Pattern
Tags: designpattern, oop, java, strategypattern
Published: 2022-07-19 08:01:00

Strategy pattern is a group of algorisms or business logics and each of them are interchangable. 
Strategy pattern separates the algorisms from the clients that use it so that we can modify the algorisms without touching the clients.



**Scenario Problem**

Here is the simple example. We have an Animal class, and 4 different child classes(Horse, Sheep, Lion, and Bird) inherit from it. 
![img1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4q4bqc1j1ylnjypccwxq.png)
 
 
It may be very straightforward to implement `eat()` and `move()` methods in each of the children classes. However, sometimes some of the children classes may have the same implementation.

As we see this example, Horse and Sheep have the same `eat()` behavior(Eat grass); Horse, Sheep, and Lion have the same `move()` behavior(Walk). 
Now this code duplication shows some bad smells while we have only 4 classes. Imagine how crazy it will be if there's like 10 classes or more? 🤯
![img2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f5rmgxlwde8c67ntj2yh.png)



**Solution**

Now the strategy pattern comes in.
We change `eat()` and `move()` into **EatStrategy** and **MoveStrategy** interfaces, and the Animal class has properties of these strategies as the following diagram.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rw2mzrdewwc8mlzsat4s.png)
 
We now separate the eat and move behaviors from the Animal class. The benefit is when we modify any of the move or eat behaviors(the business login), we don't have to touch the animal(the client using it) like before. Also, we will not have any duplicated codes.

Final code will be like:

```java
MoveStrategy walk = new WalkStrategy();
MoveStrategy fly = new FlyStrategy();
EatStrategy eatGrass = new EatGrassStrategy();
EatStrategy eatMeat = new EatMeatStrategy();
EatStrategy eatGrains = new EatGrainsStrategy();

Animal horse = new Animal(walk, eatGrass);
Animal sheep = new Animal(walk, eatGrass);
Animal sion = new Animal(walk, eatMeat);
Animal bird = new Animal(fly, eatGrain);
```