teleren/devto huggingface dataset:
This Tool Will Help You to Look PROFESSIONAL on Twitter 💥
Tags: webdev, codenewbie, beginners, help
Published: 2021-08-01 17:00:39

I've recently got to know about this tool that will help you look professional on Twitter. It really creates an impact on how you look on social media. I'm not talking about your photos, I'm talking about your profile customization on Twitter. Your profile picture, banner image, bio everything matters to your audiences. Use this tool for Twitter.

<a href="https://www.youtube.com/channel/UCUtWlpJoFin58UEejqEtNLg"><button>Watch More Videos</button></a>

Link: https://blackmagic.so/

There're mainly 2 ways to create a good do & banner image for your Twitter profile. Either you have to go manually, I mean with any of your favourite photo editing software like Photoshop, Canva, Photopea etc. or you can use this tool to get great high-quality, colourful assets for your Twitter. And the best part is, they update everything from the backend. So, you don't have to worry about anything.

### Connect with me:
Facebook: https://fb.com/thesouvikpaul
Twitter: https://twitter.com/thesouvikpaul
Instagram: https://instagram.com/amisouvikpaul
FB Page: https://fb.com/amisouvikpaul

Thank you for watching!
Como modificar uma taxonomia registrada no WordPress
Tags: wordpress, tutorial
Published: 2021-08-01 16:52:04

Em algum momento pode ser necessário alterar o comportamento de uma taxonomia já registrada, pelo WordPress, pelo tema ou algum plugin.

Publiquei um post (no meu blog) detalhando passo a passo de como fazer isso, veja aqui: https://everaldo.dev/wordpress/como-modificar-uma-taxonomia-registrada-no-wordpress/
Seeding NestJs with Prisma And Faker
Tags: nestjs, prisma, faker, typescript
Published: 2021-08-01 16:47:13

- Seeding NestJs with Prisma And Faker

I've been working on this college project and I chose [NestJs](https://nestjs.com/) for the backend. You could just [Hasura](https://hasura.io/) or other BaaS platforms for small projects. But I wanted to learn NestJs.

_Note: Usage with other ORMs might differ but will be almost the same because we'll be using a script._


## What you'll need:
 -  NestJs template for existing project setup with prisma as the default ORM
 As someone once said.
> _ez commands got brrrr_.

- For NestJs
```bash
git clone https://github.com/nestjs/typescript-starter.git project
cd project
yarn 
yarn add -D prisma
npx prisma init
```

```prisma
// prisma/scheme.prisma

datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
}

generator client {
provider = "prisma-client-js"
}

model User {
id Int @id @default(autoincrement())
name String
email String @unique
password String
}
```
- env("DATABASE_URL") is set in .env file

After that run :
```bash
yarn prisma generate
yarn prisma migate dev init
```
![Migrate.png](https://imgur.com/Ns1ne5A.png)
Now:
onto the actual seeder using [faker](https://github.com/Marak/Faker.js) for generating random data and [dotenv](https://www.npmjs.com/package/dotenv) to initialize environment variables :
```bash
yarn add -D faker dotenv
```

Now create the script:
```typescript
// prisma/seed.ts
import { PrismaClient } from '@prisma/client';
import * as faker from 'faker';
import * as dotenv from 'dotenv';

const prisma  = new PrismaClient();

const fakerUser = (): any => ({
name: faker.name.firstName() + faker.name.lastName(),
email: faker.internet.email(),
password: faker.internet.password(),
});

async function main() {
const fakerRounds = 10;
dotenv.config();
console.log('Seeding...');
/// --------- Users ---------------
for (let i = 0; i < fakerRounds; i++) {
await prisma.user.create({ data: fakerUser() });
}
};

  

main()
.catch((e) => console.error(e))
.finally(async () => {
await prisma.$disconnect();
});

```
- Add the seeder to our `package.json` for ease of use:
```json
{
...
"scripts":{
...
"seed": "ts-node prisma/seed.ts"
}
...
}
```
- And then we run the seeder:
```bash
yarn seed
```
![seed.png](https://imgur.com/BXONdpJ.png)

✨ That's it ✨
The preview of the database:
![db-preview.png](https://imgur.com/pT77pr7.png)

- Source code :  https://github.com/100lvlmaster/nestjs-prisma-seeder-template

> (If you're a beginner) don't be alarmed at the number of packages because devDependencies aren't bundled in the production build :]

You can find me at:
https://100lvlmaster.in
Working With the Float Property in CSS
Tags: css, javascript, webdev
Published: 2021-08-01 16:44:28

Float is a CSS positioning property, after the introduction of Flexbox in CSS, developers don’t really work much with the float property, but there are still millions of websites where floats are used. In case, you are maintaining such websites you need to know about the Float property.
To understand the Float property, you can think about a print layout, where the images are set into pages where the text wraps around them as needed.

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

**Using the Float Property**

The float property can be used just like any other CSS property, while working with the float property make sure to have a proper hierarchy of elements otherwise it will get way too much complicated.

#For example:#

###We have three elements, an article, a div, and a paragraph. With their following classes as profile, avatar, status. To keep things simple as possible, I have taken an example of a basic profile page layout so that you can relate the issues more practically.###

###At this moment you can observe two elements in the web page with the basic layout as block elements, where we have our div( avatar) and paragraph (status) elements aligned as block-level elements.###

###However, if we apply the float property to our div (avatar), all the text starts to appear floating around the div as shown below.###

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


**Parent Collapsing**
One of the biggest issues you have to face while working with Floated elements is the collapsing between child and parent elements. As parent elements ignore Floated elements and they end up collapsing, as a result, the layouts get messy.


###Also, if we set the float value to right, the div moves to the right position on the available space, where all the text float around it.###


Read the full Post at : https://javascript.plainenglish.io/working-with-the-float-property-in-css-f73cf7525261
A simple way to import data to Power BI from Mondrian
Tags: powerbi, mondrian, emondrian, opensource
Published: 2021-08-01 16:22:05

In the [previous article](https://dev.to/sergeisemenkov/how-to-load-data-from-mondrian-to-power-bi-desktop-50kb) I described how to import data to Power BI using MDX query. A new version of [eMondrain](https://github.com/SergeiSemenkov/eMondrian) allows you to load data from Mondrian without any query, using only Power BI designer. eMondrain is a version of Mondrian that is modified to support Excel and some other applications as clients.

As an example, we will load data from the Mondrian sample database Foodmart.

In the [Power BI Desktop](https://powerbi.microsoft.com/en-us/desktop/) application we create a new report and select the menu **Get data** - **Analysis Services**.

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

In **SQL Server Analysis Services database** dialog we fill in the **Server** field as a connection string to the Mondrian server. Pick the **Import** radio button and push the **Ok** button.

To try this example you can use an online eMondrian server with a sample database. The server address is *https://ssemenkoff.dev/emondrian/xmla*.

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

**Navigator** window will appear. There you have to pick up columns that you want to see in your report. While you are choosing columns you will see a data preview on the right side of the window. As you finish push the **Load** button. 

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

Data will be loaded to our report and available columns will appear on the right side of the application.

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

This way of loading data from Mondrian OLAP server to Power BI is very simple and doesn’t need any knowledge of a query language.

If you have any questions or suggestions, feel free to contact me at siarhei.semiankou@gmail.com.
Extend Windows System Reserved Partition
Tags: operations, infrastructure, windows
Published: 2021-08-01 16:18:46


**I'm going to say sorry in advance that I didn't take printscreens while I solved this one - so I've nicked some others from the internet to explain it.**

Today I tried to update my windows 10 install on my Gaming PC. However I kept seeing the following error: 

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

**"Windows 10 couldn't be installed - We couldn't update the system reserved partition"**
 
I opened up Disk Management (Windows Key + R  then "diskmgmt.msc")

I could see the System Reserved partition was full but it only had 500MB assigned. It looked something like this... except the first drive was full:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x7o3id1x6v1dsjqxirbb.png)
 
The rest of the disk was my 245GBish C: drive and it had a lot of free space. Of course the logical step was to extend the system partition.

That didn't work because there was no unallocated space. Next step was to unallocate a few GB's from the big C drive. I did that, it all worked and I still couldn't extend. 

The disk looked something like this, my Reserved Drive was on the far left, in the middle was the rest of my big C: drive and the far right was my 3GB of unallocated space: 
![image](https://i.stack.imgur.com/xWBQK.png)

Turns out you can't extend a drive into space that isnt directly right of it in this table. 

To solve this issue, I used a piece of software called **IM-Magic Partition Resizer**: https://www.resize-c.com/ - They haven't paid me for this post by the way - I just found this software and it did the job. 

I used the free software to move the C: over to the far right, meaning my unallocated space would now be directly adjacent to my System Reserved space. I then activated the changes in the application. 

My system rebooted, and I saw the command line interface running the changes. I was only 10% this wouldnt trash my PC. Luckily it didnt, the script finished and then windows booted. 

Now my partitions were in the correct order, and I could extend my System Reserved partition into the unallocated space. Now my system looks like this: 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yalhou2ifbgu2rw9giok.png)
 
I've just retried my system updates and it worked!
EasyAnalytics
Tags: android, kotlin, library, opensource
Published: 2021-08-01 16:16:36

Hi Everyone :) Recently I created this easy to use Android library sharing it with all of you.

#What is EasyAnalytics?
It’s an easy-to-use Android library to let developers know how much internet data their app is consuming. We can identify this as we want to be based on our own needs:
* any Screen or Module.
* any event.

EasyAnanlytics library gives us the power to easily add logging events anywhere we want to check ~ how much Internet is consumed.

#Is it free and where it's available?
Yes, EasyAnanlytics is completely free :) and its hosted on Jit Pack, and this project is also listed in Android Arsenal.

Github -https://github.com/droid-lover/EasyAnalytics
JitPack- https://jitpack.io/#myJarvis/EasyAnalytics
Android Arsenal -https://android-arsenal.com/details/1/8245
How to use - https://medium.com/native-mobile-bits/easyanalytics-3a92799410c7

Thanks, Happy coding :)
Introduction to MongoDB
Tags: mongodb, database
Published: 2021-08-05 01:07:42

---
title: Introduction to MongoDB
published: true
date: 2021-08-01 16:10:38 UTC
tags: MongoDB,Database
canonical_url: https://donaldfeury.xyz/introduction-to-mongodb/
series: "Small Bytes of MongoDB"
---

MongoDB or you might hear people call it Mongo, is one of the most popular NoSQL database solutions to date.

It is open-source, free to use for personal and commercial use, and extremely flexible.

Programming languages such as Go ( I have a short example [video](https://youtu.be/D3jhplPWqnA) of interacting with MongoDB using Go ), Javascript, and many others can interact with MongoDB using third-party modules, often being official modules from the MongoDB team.

You can read more about it [here](https://mongodb.com).

Here is a summary of some of its features:

- Stores data as JSON documents in schema-less collections.
- Uses Javascript as its query language.
- Has a lot of feature parity with traditional SQL databases.
- Boasts amazing horizontal scaling using replica sets.

Here is some additional information and tutorials about MongoDB from me:

## Setup

- [Set up MongoDB on Windows](https://donaldfeury.xyz/setting-up-mongodb-on-windows/)

### Reading Documents

- [Get all documents out of a collection](https://donaldfeury.xyz/get-all-the-documents-out-of-a-collection-in-mongodb/)
- [Limit the result of a MongoDB query to one document](https://donaldfeury.xyz/how-to-retrieve-only-one-document-from-a-mongodb-collection/)
- [How to use filters to retrieve specific documents from MongoDB](https://donaldfeury.xyz/how-to-retrieve-specific-documents-from-mongodb-using-filters/)
- [How to retrieve a very specific number of documents from a MongoDB query](https://donaldfeury.xyz/use-the-limit-method-to-retrieve-a-specific-number-of-documents-from-mongodb/)

### Inserting Documents

- [How to insert a single document into a MongoDB collection](https://donaldfeury.xyz/how-to-insert-a-single-document-into-a-mongodb-collection/)
- [How to bulk insert documents into a MongoDB collection](https://donaldfeury.xyz/how-to-bulk-insert-documents-into-a-mongodb-collection/)

### Aggregations

- [How to count the number of documents in a MongoDB collection or query result](https://donaldfeury.xyz/how-to-count-the-number-of-documents-in-a-mongodb-collection-or-query/)

---

> I will be adding a lot of posts and tutorials around MongoDB in the future. As I post them, I will add them here.
CSS Gradient - Color Gradient for your next Project
Tags: html, css, webdev, programming
Published: 2021-08-01 15:59:31

[uiGradients](https://uigradients.com) has handpicked collection of beautiful color gradients for designers and developers

### JShine
![JShine](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gcnxji4fplasjaqe4aho.png) Output:
![JShine Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3z9how5uot7vuzrsnn92.PNG) https://uigradients.com/#JShine
<br>


### Rainbow Blue
![Rainbow Blue](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2lz2hitwexyz6m2pkwgs.png) Output:
![Rainbow Blue Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e0o8nc7jrnn8m8lguygn.png) https://uigradients.com/#RainbowBlue
<br>


### ViceCity
![ViceCity](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/96e7v79dfhckiroessld.png) Output:
![ViceCity Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o3wbm3pyculpxroko4gd.png) https://uigradients.com/#ViceCity
<br>


### AzurePop
![Azure Pop](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g9icwvvpodo36evlvvme.png) Output:
![Azure Pop Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r9u4fqeyj7e9245q80b8.PNG) https://uigradients.com/#AzurePop
<br>


### A Lost Memory
![A Lost Memory](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uhv01ooqooshsx1oliid.png) Output: 
![A Lost Memory Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hn9jtxxwqq1cz0lrsisx.PNG) https://uigradients.com/#ALostMemory
<br>


### Flare
![Flare](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/owydvwm6qn5evsfh7kvc.png) Output: 
![Flare Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/32zab0x788bs9kpphznj.PNG) https://uigradients.com/#Flare
<br>


### Magic
![Magic](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hcrwpwyd3m8z5ej14nca.png) Output:
![Magic Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2wt7ys3iv4f8sloq7mp8.PNG) https://uigradients.com/#Magic
<br>

### Purple Love
![Purple Love](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0guc8lorbdqa747l86hu.png) OUtput:
![Purple Love Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dfglgnf89cr9xaej35tk.png) https://uigradients.com/#PurpleLove
<br>

### Cool Sky
![Cool Sky](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ccptjgrxn34jh63uqs3i.png) Output:
![Cool Sky Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rw7g68bc7ksyoegma93l.PNG) https://uigradients.com/#CoolSky
<br>

### Ibiza Sunset
![Ibiza Sunset](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yjnnmc3zvbxnl54zemmi.png) Output:
![Ibiza Sunset Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hjxc3xyhybyggzb3xhem.PNG) https://uigradients.com/#IbizaSunset


[You can check out my Blog 😀](https://beginners-developer.blogspot.com)
What is Software architecture? Who are architects? Why should we care?
Published: 2021-08-01 15:57:41

Passing software monolith and entering into the cloud native era, software architecture has become more important. Because in cloud native application development, we develop self sufficient micro services that are responsible to do exactly one job.

##What do we want?

Software is not visible and not tangible. But we want to talk about them, share knowledge and information on software. We want to convince and defend our ideas and we want to discuss them with others. We need an efficient and easy to understand medium for communication and much more.

##What is software architecture?

As per [Wiki](https://en.wikipedia.org/wiki/Software_architecture) “Software architecture refers to the fundamental structures of a software system and the discipline of creating such structures and systems. Each structure comprises software elements, relations among them, and properties of both elements and relations.” Means software architecture is a blueprint of what runs on a machine, it's a pictorial representation of what we can't touch and see. We can depict the product as a whole with a high level of abstraction and each of its modules in detail. The pictures are called models.

##Why Modelling?

We need a standard that understandable across industry, a common language and graphical notation for communication and visualization.

##What is the Job of an Architect?

An Architect needs to understand the target audience. It could be anyone between a developer to a Customer. Architect needs to capture and present information, design a software system and/or part of it. An architect's work is not only limited to creating the designs he/she also needs to help assigning ”who does what?”
 
##Who are the communication partners?

Other Architects, Software Developers, Documentation Developers, Customers, Managers.

##What are the Do’s of an architect?

Draw diagrams, Write documents that explains the diagrams, structure the documents, setup context before jumping into drawings.

Read [this blog post](https://www.cloudnativemaster.com/post/what-is-software-architecture-who-are-architects-why-should-we-care) for more details.
SEMESTER PROJECT DEMO
Tags: java, showdev, mysql, devops
Published: 2021-08-01 15:51:28

Hello All,
Hope all of you are doing well!. I have completed my 4th semester and in which I have developed a real world Tour Management project. Demo can be seen here.
<a href="https://www.youtube.com/watch?v=qe26kgANEXk" target="_blank">Youtube Link</a>

<a href="https://github.com/GauravSingh9356/GN_Tours_Services">GitHub</a>
Plss don't forget to leave your comments and feedback!
Cheers!
Shadow realm in HTML? Send CSS there.
Tags: css, webpack, tabs
Published: 2021-08-01 15:51:07

I spent a bit more time on CSS this week and revisited some tricks on shadow effects. That prompted me to think maybe there can be a theme for each of these weekly posts. Shadow DOM is added to complete this week's theme, alongside with optimising what Webpack watches in shadow (too much of a stretch but I'll go with it).

- **CSS**: use multiple layers of `box-shadow` to finetune shadows.
- **CSS**: use the `drop-shadow()` filter to create shadow that conforms the shape of an image.
- **Shadow DOM**: it is a hidden, isolated tree attaches to regular DOM, the CSS within this tree is scoped to the realm itself.
- **Webpack**: If watch mode takes up too much resources on your computer, try optimise it with `watchOption.ignored`, e.g. ignore `node_modules`.
- **Tabs**: NN/g has guidelines for tabs, the most important one is that they should be used for views within the same context instead used for navigating to another different context.

Thank you for reading and do let me know your thoughts about this post. If you want more content like this to be delivered to you, consider subscribing via Substack: [smallpotatodev.substack.com](https://smallpotatodev.substack.com/)

### Related Links

- MDN - box-shadow: [developer.mozilla.org/en-US/docs/Web/CSS/box-shadow](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow)
- MDN - drop-shadow(): [developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow()](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow())
- Google Developers - Shadow DOM: [developers.google.com/web/fundamentals/web-components/shadowdom](https://developers.google.com/web/fundamentals/web-components/shadowdom)
- Webpack - WatchOptions: [webpack.js.org/configuration/watch](https://webpack.js.org/configuration/watch/#watchoptionsignored)
- Nielsen Norman Group - Tabs, Used Right: [nngroup.com/articles/tabs-used-right/](https://www.nngroup.com/articles/tabs-used-right/)
Flutter is based on Adaptive or Responsive Design ?
Tags: discuss, flutter, dart, frontend
Published: 2021-08-01 15:47:15

I was learning flutter because I need to develop a few highly interactive websites and I found everyone was utilizing MediaQueries and Device Orientation to change size fixed by pixels on each Widget and called it Responsive design.

As far as I know that method is Adaptive design in which the elements change depending upon Device or Screen whereas in Responsive it should scale things i.e. make it smaller or Bigger depending on Resolution.

Did I making some mistake in understanding the concepts or Flutter is based on Adaptive instead of Responsive ?

Let's have a discussion on this topic.
Create a Netflix clone from Scratch: JavaScript PHP + MySQL Day 6
Tags: javascript, webdev, tutorial, codenewbie
Published: 2021-08-01 15:29:54

Netflix provides streaming movies and TV shows to over 75 million subscribers across the globe. Customers can watch as many shows/ movies as they want as long as they are connected to the internet for a monthly subscription fee of about ten dollars. Netflix produces original content and also pays for the rights to stream feature films and shows.

In this video,we will learn how to create the login page

{% youtube y_1NLVxg6Jg %}

In this video,we will learn how to create our own custom logo

{% youtube oB4cIOyOM7I %}

If you like my work, please consider
[![Buy me a coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jm11knj7d8zwcvo150q2.png)](https://www.buymeacoffee.com/cglikpo)
so that I can bring more projects, more articles for you

If you want to learn more about Web Development, feel free to [follow me on Youtube!](https://www.youtube.com/c/ChristopherGlikpo)