teleren/devto huggingface dataset:
Tipos básicos de modelos de banco de dados
Tags: database, model
Published: 2021-09-03 09:41:14

Modelos de banco de dados são basicamente esquemas de banco de dados, usados para expressar uma estrutura e um formato mantido pelo sistema gerenciador de banco de dados (SGBD, do inglês DBMS). Existe um tipo de modelo para diferentes tipos de necessidades de negócio para o qual o banco de dados foi implementado para resolver.

Cada tipo de modelo de banco de dados possuem tipos de ações implementadas no modelo que são distintas umas das outras. O uso possível dos modelos pode ser modificado de acordo com a demanda e desejo do usuário, podendo até mesclar características de diferentes modelos para montar um novo modelo híbrido.

#Modelos de Banco de Dados
Abaixo, uma lista de possíveis modelos de banco de Dados
* Modelo Hierárquico
* Modelo Flat
* Modelo de Rede
* Modelo Dimensional
* Modelo Relacional
* Modelo Contextual

#Conclusão
Os modelos de banco de dados são usados para armazenar dados de uma forma que permita preservar a sua forma e minimizar o tempo de recuperação. Juntamente com tipos de operações que podem ser implementados nos diferentes tipos de modelos de banco de dados.
Error Message When Importing Products in Batches to HUAWEI AppGallery Connect
Tags: huawei, android, appgallery
Published: 2021-09-03 09:08:53

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/813jb6bl7dwgdhyq6zai.jpg)

When I imported products in batches to AppGallery Connect, an error message was displayed, indicating that the price does not comply with the specifications, as shown in the following figure.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zy64r1zaaujfx50rtatj.png)
 
All product information was configured according to the specifications. No problems were found. 
 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5yedf3v13bgcjjsc8i0w.png)

# Analysis and solution

I contacted Huawei technical support and was told to make check whether I was importing products in batches or modifying products in batches, since the two operations require different specifications. I confirmed that I was indeed performing the former. 

I then sent the product list to Huawei technical support, after which the true cause of the problem was finally discovered: the product price format was invalid. This is a known problem that has already been resolved for developers in the Chinese mainland but still needs to be resolved for developers in other regions.

Solution: Copy and paste the price column into a TXT file and then copy and paste it back into the Excel file. The issue was caused because the price column must be in TXT format.

Price information can be imported properly only when the following small green triangle is displayed.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sl80eosg04parnm09f02.png)
 
Note: The problem is currently being processed for developers outside the Chinese mainland, but you can use my experience as a reference if you encounter a similar problem.
4 Tips to work on your side project while working full-time
Tags: motivation, productivity, career
Published: 2021-09-03 08:44:34

## 1. Create Time Boundaries

I can not stress enough how import it is to create time boundaries between your work hours and your personal time.

I made some strict rules about work hours for the company I worked on and stick to that plan to free up my personal time.

I saw the differences very shortly afterwards.

## 2. Set Small Goals

Set small goals every day/week. Divide that goals into parts where they will not look so big and try to achieve them.

Try to reward yourself once you achieve your goal. This will keep you motivated and happy.

## 3. Keeping it Consistent

Progress is progress even if it 10 minutes, 30 minutes. So no mather how small your contibution it will still be counted.

So try to understand what is best for you and how much can you spend in that week.  Even it is a small amount do not see it as not worth it.

Small but consistent efforts are definitely going to pay out for you. It may take some time, but you will definitely see the results.

## 4. Don't be a perfectionist

Being a perfectionist will cause you to spend more time, think more time and stress more time on small things. Always remember, you will have enough time to improve it later than making it perfect now!

Believe me I've been there, I've been done that.

---
It is hard to focus on side projects especially if you have a full time job. But once you start to free up some of your time, you will see the differences. 

I want to say special thanks to @ms_yogii. You can check out [her article](https://dev.to/ms_yogii/5-tips-to-work-on-your-side-project-while-working-full-time-n7i).

## Links
- [5 Tips to work on your side project while working full-time.](https://dev.to/ms_yogii/5-tips-to-work-on-your-side-project-while-working-full-time-n7i)
Learning Python- Intermediate course: Day 20, Tkinter — Types of Widgets part 3
Tags: learningpython, python, programming
Published: 2021-09-03 08:00:57

Today let us finish off with the remaining Tkinter widgets
---
____
### Summary of the week
This week we learnt about Tkinter. We also checked out the various widgets supported by Tkinter. Today let us finish of the remaining widgets.
### Types of widgets in Tkinter continued..........
- menu
The Menu widget is used to create various types of menus in the python application. The types of menus include top level, pull down, and pop up
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dneeeyjxs7iklejbu0ul.png)
 
- message
The message widget is used to display a message in the application. It looks similar to the label widget.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ucmw44cpxiyeui4suyp4.png)

- Toplevel 
This widget is used to make a pop-up like effect. It creates another window. It can be used to represent some extra info. This window is managed internally by the system. (Window manager in Windows)
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ebocu6t1rmmhwv2rkuz.png)
In this program, clicking on the open buttons activates the Toplevel widgets and creates another blank window. 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ziog74u7zokjjsnjetab.png)
 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3b9vbtrocqhf1zxlbrqt.png)

Closing the main application window closes all windows. 

- spinbox
Spinbox is a less attractive version of the slider widget. Again, It is useful over the Entry widget when the user is forced to select only one value from the given range of values.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/enctml1i4bl22p1ltmqe.png)
 We can also type in the spinbox.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/palfmmu22cvmq0yplbgt.png)
 
- panelWindow
The PanedWindow widget is a resizable frame widget. It contains one or more child widgets arranged horizontally or vertically. Unlike the frame widget, child widgets can be resized by the user, by moving the separator lines. These separator lines are called as sashes.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i6arkvgzqmcm4dzesd93.png)
 ![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hcwtxzo9sk16mcm6kzu1.png)
 
- LabelFrame
LabelFrame is also a type of frame, but we can add borders to the widgets.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3gvqihl1kkebol8bm9vn.png)

- MessageBox 
The messagebox module is used to display the message boxes in the python applications.
It is a kind of alert in the application. 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1dp32v1vpv1v92ci8jf1.png)
 ![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mqgpg5k51misbveeqzyd.png)
 

____
**Image credits**- All images in the text are my own screenshots.
____
🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
Follow me on GitHub for updates.......
TWITTER IMAGES INTO YOUR WEBSITE
Published: 2021-09-03 07:51:02

1.Click the  icon located within the Tweet.
2.From the menu, select Embed Tweet.
3.This will open publish.twitter.com where you can customize the look of the embedded Tweet by clicking set customization options.
4.If the Tweet is a reply to another Tweet, you can check Hide Conversation to hide the original Tweet.
5.Once you like the look of the embedded Tweet, copy the code provided by clicking the Copy Code button.
6.Paste the code into your blog or website.

#example
<blockquote class="twitter-tweet" data-theme="dark"><p lang="en" dir="ltr"><a href="https://twitter.com/hashtag/MoneyHeistSeason5?src=hash&amp;ref_src=twsrc%5Etfw">#MoneyHeistSeason5</a> must watch today <a href="https://t.co/IyFpGbFLfD">pic.twitter.com/IyFpGbFLfD</a></p>&mdash; computer_wizard (@MillersYasin) <a href="https://twitter.com/MillersYasin/status/1433677771751010308?ref_src=twsrc%5Etfw">September 3, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
```
<blockquote class="twitter-tweet" data-theme="dark"><p lang="en" dir="ltr"><a href="https://twitter.com/hashtag/MoneyHeistSeason5?src=hash&amp;ref_src=twsrc%5Etfw">#MoneyHeistSeason5</a> must watch today <a href="https://t.co/IyFpGbFLfD">pic.twitter.com/IyFpGbFLfD</a></p>&mdash; computer_wizard (@MillersYasin) <a href="https://twitter.com/MillersYasin/status/1433677771751010308?ref_src=twsrc%5Etfw">September 3, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
```
##You can also edit the image as you are coding in your editor that's the height, width etc.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b4m8v5w8flq7aghkxucp.jpeg)
##Make your site very light by using twitter to host the images.
Color format filtering NPM package
Tags: javascript, npm, color, colour
Published: 2021-09-03 07:49:41

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vr2shf4tqepxpf9uia6i.jpeg)

**color-detector** is an Javascript library to get all the HTML colors (256 colors) in standard formats. (hex, rgb, hsl and simple name).

This library helps you to filter through any type of standard color format and find you all other details of it.

[Link to NPM package](https://www.npmjs.com/package/color-detector)

> npm install color-detector --save

## Usage

    // import the library
    const {
        accessFromId,
        accessFromName,
        accessFromHexString,
        accessColorFromRGB,
        accessColorFromHSL
    } = require('color-detector');

    (async () => {
        try {

        // get color from name
        const resultFromName = await accessFromName('Green');
        console.log('result from name :', resultFromName);

        // get color from hex
        const resultFromHex = await accessFromHexString('#000000');
        console.log('result from Hex :', resultFromHex);

        // get color from RGB
        const resultFromRGB = await accessColorFromRGB({
            r: 128,
            g: 0,
            b: 128,
        });
        console.log('result from RGB :', resultFromRGB);

        // get color from HSL
        const resultFromHSL = await accessColorFromHSL({
            h: 0,
            s: 0,
            l: 75,
        });
        console.log('result from HSL :', resultFromHSL);

        // get color from ID
        const resultFromId = await accessFromId(10);
        console.log('result from Id :', resultFromId);

    } catch (error) {
        console.log(error);
    }
    })();

Result :-

    result from name : {
      colorId: 2,
      hexString: '#008000',
      rgb: { r: 0, g: 128, b: 0 },
      hsl: { h: 120, s: 100, l: 25 },
      name: 'Green'
    }
    result from Hex : {
      colorId: 0,
      hexString: '#000000',
      rgb: { r: 0, g: 0, b: 0 },
      hsl: { h: 0, s: 0, l: 0 },
      name: 'Black'
    }
    result from RGB : {
      colorId: 5,
      hexString: '#800080',
      rgb: { r: 128, g: 0, b: 128 },
      hsl: { h: 300, s: 100, l: 25 },
      name: 'Purple'
    }
    result from HSL : {
      colorId: 7,
      hexString: '#c0c0c0',
      rgb: { r: 192, g: 192, b: 192 },
      hsl: { h: 0, s: 0, l: 75 },
      name: 'Silver'
    }
    result from Id : {
      colorId: 10,
      hexString: '#00ff00',
      rgb: { r: 0, g: 255, b: 0 },
      hsl: { h: 120, s: 100, l: 50 },
      name: 'Lime'
    }

## Reference

The colors which are avaible in the library is refered from [jonasjacek.github.io/colors](https://jonasjacek.github.io/colors/)

## Licence

(The MIT License) Copyright (c) 2021 [kmkasunmadushanka@gmail.com](mailto:kmkasunmadushanka@gmail.com)
Flutter vs React Native
Tags: flutter, reactnative, mobile, javascript
Published: 2021-09-03 07:25:08

Of course, both Flutter and React Native occupy the identical niche in app development, and they share the identical general features. Each is good to create a mobile cross-platform MVP, and it is possible to use the code again afterward and extend it with a free community-provided or official add-on. Both of them minimize project and time-to-market expenses while developing for several platforms.

<b>In what ways are they different?</b>

<b>Platform support</b>

Apart from targeting the mobile and the web, the tools of Flutter are embedded too. Therefore, it is helpful once an application has been designed to be accessible easily from virtually any device such as a tablet, phone, laptop, or even the screen of an automobile infotainment system.

<b>Performance</b>

Projects created with Flutter comply with native code, and this leads to better performance. Here, we have mentioned a decent benchmark on this. Nevertheless, it experiences performance problems once a specific graphics routine isn’t optimized now and then.

<b>Simplicity of usage</b>

The former JavaScript programmers have reported that it is simpler to learn React Native. This is because one needs to know Dart before learning Flutter.

<b> Project size</b>

Projects created using React Native are usually more lightweight. Although it might not appear to be quite advantageous at present, consider the miniature wearable gadgets; one needs to take into account free space usage.

React Native vs. Flutter: Which one is the Winner?

![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/etbv23ec878b1pog8vni.png)

  
Image Source: Google

 

It is a fact that both Flutter and React Native are comparatively young, and therefore, one cannot consider them to be rock-stable and mature right now. It is possible to experience unforeseen drops in performance at any time. In the meantime, both have been improved actively by their community and lead developers.

Although React Native developers are easily available, Flutter happens to be a serious alternative for React, given that it has been supported by Google.

While the cross-platform mobile development of Google depends on dart compiler, React Native development depends on JavaScript and WebView layers that effectively decrease React Native mobile application’s speed.

Flutter features its rendering engine allowing the development of unique designs which are genuine. On the other hand, React Native is limited to native components, and it might be required to customize them manually further. Furthermore, while a Flutter application can jump into a desktop environment instantaneously, a React app ought to use a web interface.

In general, it can be rightly asserted that while comparing Flutter vs. React Native, the former happens to be the better solution.

Let's know more here Benefits of Flutter & React Native https://www.techcolite.com/flutter-vs-react-native-who-is-the-winner-in-2021/
Copy Slides from One Presentation to Another Using Java
Tags: java, powerpoint, api
Published: 2021-09-03 07:04:51

This article will introduce how to copy slides from one PowerPoint presentation to another programmatically using Free Spire.Presentation for Java.

**Import jar dependency (2 Methods)**
● Download the [free library](https://www.e-iceblue.com/Download/presentation-for-java-free.html) and unzip it. Then add the Spire.Presentation.jar file to your project as dependency.

● You can also add the jar dependency to your maven project by adding the following configurations to the pom.xml.
```xml
<repositories>
    <repository>
        <id>com.e-iceblue</id>
        <name>e-iceblue</name>
        <url>http://repo.e-iceblue.com/nexus/content/groups/public/</url>
    </repository>
</repositories>
<dependencies>
    <dependency>
        <groupId>e-iceblue</groupId>
        <artifactId>spire.presentation.free</artifactId>
        <version>3.9.0</version>
    </dependency>
</dependencies>
```

**Sample Code**
```java
import com.spire.presentation.FileFormat;
import com.spire.presentation.Presentation;

public class CopySlides {
    public static void main(String[] args) throws Exception {

        //Create a Presentation object to load the first document
        Presentation pptOne= new Presentation();
        pptOne.loadFromFile("test1.pptx");

        //Create a Presentation object to load the second document
        Presentation pptTwo = new Presentation();
        pptTwo.loadFromFile("input1.pptx");

        //Insert the specific slide of the first document to the specified position on the second document
        pptTwo.getSlides().insert(1,pptOne.getSlides().get(0));

        //Append the specific slide of the first document to the end of the second document
        pptTwo.getSlides().append(pptOne.getSlides().get(2));

        //Save the second document to file
        pptTwo.saveToFile("CopySlides.pptx", FileFormat.PPTX_2013);
    }
}
```
![CopyPPT](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zt5pm1a87rbb9b5x36ao.png)
Disabling iFrames With CSS
Tags: css, html
Published: 2021-09-03 06:40:39

While you can't technically *disable* [HTML iFrames](https://www.hostinger.com/tutorials/what-is-iframe/), you can prevent user interaction and make them appear read-only.

In fact, you can do it in just two lines of code:

```css
iframe {
    overflow: hidden;
    pointer-events: none;
}
```

But wait!

That `overflow: hidden` declaration, which removes the iFrame's scrollbars, **only works in Firefox**.

So to ensure compatibility with *all other* modern browsers, you must set the `scrolling` attribute to `no` directly on your `<iframe>` tag:

```html
<iframe src="/example.html" title="Example" scrolling="no">
```

I think it's important to note that the `scrolling` attribute for `<iframe>` tags was actually [deprecated in HTML5](https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-iframe-element). However, [most major browsers still support it](https://caniuse.com/?search=iframe%20scrolling).

Oh, and if all else fails, try adding the `!important` rule to your CSS declarations:

```css
iframe {
    overflow: hidden !important;
    pointer-events: none !important;
}
```

## Conclusion

Well, this is probably my shortest post yet. But personally, I definitely prefer concise and to-the-point solutions!

The ability to make iFrames "read-only" is quite practical, and I've saved this snippet for whenever I'm trying to generate a preview image of a page. I hope it helps you out too.

Thanks for reading.
Setting Up Jest in Angular
Tags: testing, jest, angular, frontend
Published: 2021-09-03 05:25:15

###### Install Jest in dev dependencies:
```
npm install --save-dev jest jest-preset-angular @types/
jest
```

###### Uninstall Karma in default Angular project
```
npm uninstall karma karma-chrome-launcher karma-jasmine-html-reporter @types/jasmine @types/jasminewd2 jasmine-core jasmine-spec-reporter karma-coverage-istanbul-reporter karma-jasmine
```

**Note**: also delete karma.conf.js & src/test.ts from project

###### Update the test configuration angular.json file:
```
{
 ...
 ...
 "test": {
    "builder": "@angular-builders/jest:run",
    "options": {
      "tsConfig": "<rootDir>/src/tsconfig.test.json",
      "collectCoverage": false,
      "forceExit": true
    }
 },
 "lint": {...},
 "e2e": {...}
 ...
}
```

###### Create file name ***jestSetup.ts***
`import 'jest-preset-angular /setup-jest';`

###### Update tsconfig.spec.json
```
"compilerOptions": {
 "outDir": "./out-tsc/spec",
 "types": ["jest", "node"],
 "esModuleInterop": true,
 "emitDecoratorMetadata": true
 },
```

###### Update package.json run script
```
"test": "jest",
"test:coverage": "jest --coverage",
```

###### Add Jest configuration in package.json
```
"jest": {
 "preset": "jest-preset-angular",
 "setupFilesAfterEnv": [
 "<rootDir>/jestSetup.ts"
 ],
 "testPathIgnorePatterns": [
 "<rootDir>/node_modules/",
 "<rootDir>/dist/"
 ],
 "globals": {
   "ts-jest": {
     "tsconfig": "<rootDir>/tsconfig.spec.json",
     "stringifyContentPathRegex": "\\.html$"
    }
  }
}
```
Finally, run with command
`npm run test` to check your result


Happy Coding !
Configuration for ESLint
Tags: eslint
Published: 2021-09-03 05:18:31

##What and Why ESLint
**ESLint** is a code analyzer, it will prevent errors by finding and fixing problems in our codebase from variable to syntax

##Configuration
###My configuration
I just use the default configuration from command `eslint --init`.
```
{
  "env": {
    "browser": true,
    "es2021": true
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "rules": {}
}
``` 

###To use
- Just as my post about [prettier](https://dev.to/maithanhdanh/configuration-for-prettier-14g1), we need to install [ESLint](https://www.npmjs.com/package/eslint) with flag `--save-dev`. You can reach to the first step of part **To Use** in the last post to get an answer for question **why we need the flag**.
```
# for npm
npm install --save-dev eslint 

# for yarn
yarn add --dev eslint 
```
- After installing the package, we initialize the configuration file for the project.
```
# for npm
$ npx eslint --init

# for yarn
$ yarn run eslint --init
```
- Then, it will ask us a lot of questions to generate a suitable config.
![init process](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cupn02mix42r5ub2dj0l.PNG)

__*Notes:*__
- Because I've already installed `@typescript-eslint\eslint-plugin` and `@typescript-eslint\parser`, I selected **No** for the question `Would you like to install them now with npm`.
- **ESLint** also supports pretty much formats of the configuration file. [Configuartion Files](https://eslint.org/docs/user-guide/configuring/configuration-files#configuration-file-formats)

##Other Options
**ESLint** is a great tool for us, and well worth for our digging into the [Documentation](https://eslint.org/docs/user-guide/configuring/). To understand more how it behaves, you can test ESLint on [demo](https://eslint.org/demo). By clicking on `Rules Configuration`, you can change the configuration.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2fz0n1seesc94mdp72ga.png)

After enjoy while playing around, **ESLint** allows us to download the current config.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iaewee0oeg6iytusy66d.png)

[Paypal](https://paypal.me/DantisMai).

_Now, we already have `tsconfig`, `prettier` and `eslint`, I hope they can you guys with your current projects. I am really happy to receive your feedback on this article. Thanks for your precious time reading this._