teleren/devto huggingface dataset:
Mantine – 100+ React hooks and components with native dark theme support
Tags: react, javascript
Published: 2021-07-06 14:05:54

Hi all, I'm very excited to share my latest open source project [Mantine](https://mantine.dev/). Mantine is a MIT licensed open source React components and hooks library with native dark theme support and focus on accessibility, usability and developer experience.

## Examples

Explore all examples [on Mantine home page](https://mantine.dev/)

Spendings table:

{% codesandbox strange-bhabha-5qwru %}

Cards grid:

{% codesandbox fragrant-fire-l0mol %}

## Key Features

- **Customization** – colors, fonts, shadows and many other parts are customizable to fit your design needs
- **Flexibility** – configure components appearance and behavior with vast amount of settings or overwrite any part of component styles
- **Dark theme** – mantine supports dark theme by default in all components
- **Accessibility and usability** – all components follow accessibility best practices and feature full keyboard support
- **TypeScript** – all @mantine/ scoped packages are built with TypeScript and support it by default
- **Ready for production** – mantine is well tested and works in all modern browsers
- **Developer experience** – mantine comes with more than 50 components and 15 hooks to cover you in most cases
- **No annoying focus ring** – with new :focus-visible pseudo-class focus ring appears only when user navigates with keyboard
- **React JSS** – take advantage of all react-jss features: automatic critical css extraction during ssr, lazy evaluation, dynamic theming and others
- **React and Preact** – mantine works flawlessly with preact

## Links

- [Documentation](https://mantine.dev/)
- [Core components by category](https://mantine.dev/core/getting-started/)
- [Hooks list](https://mantine.dev/hooks/getting-started/#included-hooks)
- [Notifications system](https://mantine.dev/others/notifications/)
- [Contributing](https://mantine.dev/pages/contribute/)
- [Ask question or give feedback](https://github.com/mantinedev/mantine/discussions)

Thanks for stopping by and let me know what you think, I'm always open to feedback and critique!
Instalar Tailwind via CLI junto con PostCSS & CSSnano
Tags: tailwindcss, postcss, cssnano, userinterface
Published: 2021-07-06 14:03:09

Lo bueno de tailwind css es que podemos instalarlo de diferentes maneras, entre ellas, via CDN o via CLI. En este caso, vamos a hacerlo via npm o yarn o el gestor de paquetes de su preferencia.

### Paso 1: armar nuestro entorno

En mi caso, voy a instalarlo mientras uso un framework de js llamado mithril (donde hablare en algun post proximo que se viene). Para continuar con nuestra instalación vamos armar nuestro entorno  y el output (ambos deben tener la carpeta css, muy importante).

### Paso 2: instalar tailwind

Procedemos a instalar nuestras dependencias en nuestra terminal amiga con los siguientes comandos

```json
yarn add tailwindcss postcss postcss-cli autoprefixer --dev
yarn add @tailwindcss/forms
```

### Paso 4: creamos nuestro archivo tailwind.config.js junto con nuestro postcss.config.js via terminal

```json
npx tailwindcss init -p
```

### Paso 5: vamos a integrar cssnano para minificar nuestro css de desarrollo

```json
yarn add cssnano
```

### Paso 6: copiamos y pegamos este codigo en postcss.config.js

```jsx
module.exports = {
  plugins: [
    require("tailwindcss"),
    require("cssnano")({
      preset: "default",
    }),
    require("autoprefixer"),
  ],
};
```

### Paso 7: Agregamos tailwind/forms a nuestro tailwind.config.js

```jsx
module.exports = {
  purge: ["./*.html", "./*.js"], 
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [require("@tailwindcss/forms")],
};
```

### Paso 8: Creamos nuestro html

```jsx
<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Template Tailwind</title>
  <link rel="stylesheet" href="css/tailwind.css" />
</head>

<body>
  <script type="text/javascript" src="js/App.js"></script>
</body>

</html>
```

### Paso 9: creamos nuestro archivo tailwind.css en nuestro entorno y hacemos un copy / paste de este codigo

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

### Paso 10: Agregamos nuestros scripts en nuestro package.json

```jsx
{
  "scripts": {
    "tail": "postcss tailwind.css -o ./output/css/tailwind.css",
  }
}
```

### Si querés chusmear como quedo mi entorno metete a este repo :) 

[https://github.com/axelvaldez13/tailwindcli](https://github.com/axelvaldez13/tailwindcli)
Thoughts Are Just Thoughts
Tags: growth, motivation, productivity, career
Published: 2021-07-27 06:27:05

---
title: Thoughts Are Just Thoughts
published: true
date: 2021-07-06 13:55:00 UTC
tags: growth,motivation,productivity,career
canonical_url: https://x-team.com/blog/thoughts-are-just-thoughts/
---
Our capacity to torture ourselves with our thoughts is without equal. Our minds feed us with thoughts that scare us and worry us. They're thoughts that contribute to stress, anxiety, depression, and other mental disorders that [hundreds of millions of people](https://www.who.int/news-room/fact-sheets/detail/mental-disorders) suffer from. Consider these thoughts:

- “Your manager didn't look happy. What did you do wrong?”
- “Your run went poorly this morning. Maybe it's time to quit?”
- “The code you just wrote is terrible. You're a poor programmer.”

When we read sentences like these, it seems obvious these are bad thoughts we should pay no heed to. But they're much harder to catch when we're thinking them than when we're reading them. They can flit by and leave a little imprint without anyone noticing.

The essence of the problem is that we trust and respect our minds too much. We believe all thoughts are valid and should be given some consideration, even if we know deep down that what we're thinking is wrong or false.

But the reality is that thoughts are just thoughts. They are not facts. They often don't accurately represent reality. They're just part of our minds erring on the side of caution and warning us against possible threats, but they don't inherently mean anything. From the waterfall of thoughts that crash through our minds every day, we shouldn't place too much emphasis on the worrying ones.

It's a good practice to course-correct wrong thoughts with positive thoughts. For example, “I'm not a poor programmer today and I'll be a much better programmer in the future.” But even then, no one can constantly monitor their thoughts. Our minds will think and some of those thoughts will worry us.

Don't try to forcibly stop all negative thinking, because that's impossible and might worsen the problem. Just don't give undue attention to the worrying thoughts, because they almost always far exaggerate the actual problem, if there is one at all. If each of us could move into a position where we could control our minds instead of the other way round, we would see how fragile these negative thoughts are when you pay them little attention.
Técnica para você mudar de pixels(px) para rem!
Tags: brasil, beginners, css, tutorial
Published: 2021-07-06 13:25:41

### Hoje eu vim falar um pouco de uma técnica que achei super importante e prática para o dia a dia, mas primeiro o que seria rem?

Bem para trazer uma breve explicação, rem significa "The root element's font-size", ou em português, "O tamanho de fonte raiz do elemento". 
**Tá, mas o que isso quer dizer???**
<img src="https://i.pinimg.com/originals/f3/ae/fb/f3aefbee1d617d29938cfad768369b5b.gif"/>
 Muito simples! Essa medida se refere ao tamanho do elemento raiz, o root, e ele pode ser alterado via CSS dessa maneira:
```css
:root {
    font-size: 100%; // 100% = 16px
}
```
### Agora vem o truque que vai facilitar sua vida!!!
Como nos podemos alterar esse valor, e 100% é igual a 16px, seria muito mais fácil trabalhar com essa unidade se fosse por exemplo, 10px e a gente pode alterar pra ser 10px! E eu mostro pra você como fazer isso: **(Porém cuidado ao usar, pois ela é afetada diretamente pelo zoom e pelas configurações do usuário)**
```css
// Se usarmos uma simples regra de 3 podemos fazer esse calculo
//16px - 100%
//10px - ?
// E o resultado disso é...
:root {
    font-size: 62.5%; // 62.5% = 10px
}
// Utilizando dessa maneira
body {
    margin: 1.2rem .8rem; // Que seriam 12px e 8px, respectivamente 
}
```
### Considerações finais
Eu posso dizer que esse método é muito bom até porque a unidade rem acaba sendo **responsiva** o que é mais um ponto forte para a sua utilização, e se você tem alguma outra maneira ou alguma "gambiarra" conta ai pra mim! 🤭
Codever snippets VSCode Extension
Tags: productivity, vscode, opensource, showdev
Published: 2021-07-06 13:22:07

I've been using Visual Studio Code for some projects lately, so I made it easy now to save and search code snippets on [Codever](https://www.codever.land) directly from Visual Studio Code via the [Codever Snippets VSCode Extension](https://marketplace.visualstudio.com/items?itemName=codever.vscode-codever). 

You can see it in action in the following demos.

## Save snippet

Select snippet, then **right click** or **Ctrl+Shift+P** (**Cmd+Shift+P** on Mac) and select **Save snippet to Codever**:

![Save snippet to Codever](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gh0hteuhtiy67s6ipcak.gif)

## Search snippet

**Right click** or **Ctrl+Shift+P** (**Cmd+Shift+P** on Mac) and select **Search my snippets on Codever**:

![Save snippet to Codever](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l18rf5h7ed70fmmo3ej5.gif)

<hr>

The extension is free and open source on Github 👇
{% github codeverland/codever-vscode no-readme %}


<hr>

> :point_right: Other extensions, like for IntelliJ or Browser can be found on the [extensions](https://www.codever.land/extensions) page

Looking forward to your feedback in the comments below 🙏
GREETINGS!!! TO ALL TALES OF SERIES FANS!!

Tags: talesofseries, bandainamco, talesoftheabyss, talesof
Published: 2021-07-06 12:48:47


GREETINGS!!!
TO ALL TALES OF SERIES FANS OUT THERE!!

I just made this page for reaching out all tales of series fans out there, and I aim to help you guys by providing info, tips, experience, strategies I have managed to memorize and gather as much as possible. 

What do you post anyway ? and what are you good for ?

I try my best to help you guys out in case you do not feel like opening, reviewing, retracing your steps during your first or second gameplay (duh! what did I miss ??) that is the moment  where I am going to help you out. 

Stay updated for my further posts on several tips about status, equipments, artes, characters, places, bosses, and so on (Well, I do not mean everything at a time). 

So How do we reach you, and  make sure you exist ?

Drop your questions anytime you want on comment section below in case I am in state of absent, but I will check and re-check my post frequently.

Okay, ENOUGH NONSENSE AND HURRY UP POST SOMETHING ELSE!!
Yeah, I am gonna plan on writing on Tales of the Abyss for starter, I think. Bear with me, okay.



Best,



Tales of Series Forever Admin

source:https://talesofseriesforever.blogspot.com/
Replacing image in clear button
Tags: swift, ios, mobile
Published: 2021-07-06 12:32:04

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/izi3tm5eo7hubth5tu4o.png">
  <figcaption>Default clear button</figcaption>
</figure>

To change default clear button icon, you have to create binding to your text field and then pass the following lines of code:

 ```swift
if let clearButton = someTextField.value(forKeyPath: "_clearButton") as? UIButton {
            clearButton.setImage(UIImage(named:"image_name"), for: .normal)
        }
```
To change size of the icon you can upload to the project the image with the appropriate size.

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ok2203jvupvs0u6dscql.png">
  <figcaption>Changed clear button</figcaption>
</figure>
Getting started with PostgreSQL
Tags: postgres, ubuntu
Published: 2021-07-06 12:27:13

PostgreSQL is an open-source and advanced object-oriented relational database which is also known as Postgres. This database management system is the first designed for the UNIX based environment. However, its design modified with time due to which PostgreSQL can run on other operating systems as well as Solaris, Mac OS X, and Windows. PostgreSQL is free software and its source code is freely available under the licence of PostgreSQL. You can modify and use PostgreSQL in any format according to your requirements.

In this article, you will learn how to install and get started with PostgreSQL on Ubuntu 20.04 system using the terminal.


###Installation of PostgreSQL on Ubuntu 20.04
```
# Create the file repository configuration:
sudo sh -c 'echo "deb http://apt.postgresql.org/pub/repos/apt $(lsb_release -cs)-pgdg main" > /etc/apt/sources.list.d/pgdg.list'

# Import the repository signing key:
wget --quiet -O - https://www.postgresql.org/media/keys/ACCC4CF8.asc | sudo apt-key add -

# Update the package lists:
sudo apt-get update

# Install the latest version of PostgreSQL.
# If you want a specific version, use 'postgresql-12' or similar instead of 'postgresql':
sudo apt-get -y install postgresql
```

After completing the installation of PostgreSQL, you will start, stop, and enable the PostgreSQL services using the following command:
```
sudo systemctl stop postgresql.service
sudo systemctl start postgresql.service
sudo systemctl enable postgresql.service
```

### Set PostgreSQL user password
You can change or create the user password for PostgreSQL. Using the following command, you can change the default user password for PostgreSQL:
```
sudo passwd postgres

# ALTER USER command to change the password for the postgres user:
ALTER USER postgres PASSWORD 'myPassword';
ALTER ROLE;
```

Login to PostgreSQL
```
sudo -u postgres psql
# or run this command
sudo su -l postgres
```

Logout of psql
```
\q
```

List the databases
```
# Get list of databases
\l

# Get list of databases with size & description
\l+

```

Show database tables
```
\dt
```

Create database
```
create database database_name;
```

Select database
```
\c database_name
```

Show list of tables
```
\dt
```

Describe a single table
```
\d table_name
```

Show size of a single database
```
SELECT pg_database_size('database_name');
```

Create a database from bash
```
sudo -u postgres createdb database_name
```

Drop a database
```
sudo -u postgres dropdb
```

Login to a database
```
sudo -u postgres psql database_name
```


In this article, we implemented the installation of PostgreSQL on Ubuntu 20.04. Furthermore, you learned the different psql commands. In the future, you can explore more commands related to PostgreSQL using the command line.
How to create web project in Visual Studio 2019
Tags: blazor, webdev, tutorial, webassembly
Published: 2021-07-06 12:09:40

In this video and in our upcoming videos, we will discuss how to create a real world Blazor WebAssembly application from scratch. We will be using Visual Studio 2019 and .NET 5.0.

Syncfusion Blazor UI Components : https://www.syncfusion.com/blazor-components
Syncfusion Blazor Demo: https://blazor.syncfusion.com/demos/

More Tutorial Videos :https://www.youtube.com/c/Csharp-video-tutorialsBlogspot/videos

{% youtube m-KGXvWwzTI %}
Daily Developer Jokes - Tuesday, Jul 6, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-07-06 12:00:28

---
title: "Daily Developer Jokes - Tuesday, Jul 6, 2021"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Tuesday%2C%20Jul%206%2C%202021"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258ef9deee.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*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:___ What did the proud React component say to its child?

___A:___ I've got to give you props
 -->
How Real Estate App Development Transforms The Sector Digitally
Tags: android, mobile, ios, devops
Published: 2021-07-06 11:57:39

The Internet can do wonders for your enterprise irrespective of your business model and size. With the digital world slowly taking over, tons of industries have shifted their businesses to the online world and have gained a lot of profit. One such business that can attain heights if it shifts to the online world is real estate. There are tons of real estate app development companies helping realtors improve their sales by providing amazing solutions. What kind of solutions? Read on to find out.

What Benefits You Will Get By Hiring A Real Estate App Development Company?

There are tons of benefits that one can get by hiring a real estate app developer for their business. Here are some of the advantages that you and your customers will get from this solution.

— An application dedicated solely to your real estate business can help you to communicate easily with your customers. It would help in diminishing the bridge between customers and agents and establish a relation of trust. Most of the time, the deal doesn’t happen because no one’s present to clear the customer’s doubt. But, with the help of an app, there would be 24*7 services available.

— A [real estate app](https://www.suriainternational.com/real-estate-app-development-transforms-the-sector-digitally/) can help you to increase the reach of your business. Mobile apps can help you target a specific audience through proper online advertising. Moreover, a proper app will show your professionalism and improve your brand’s image.

— Developing an app for real estate is a way of promoting your brand. It would help you in having free marketing at the package of the app development process. If the idea is unique, then more people will tend to download the app and at least look at the various options you provide.

— Earlier, people used to call the agents and watch several properties at a time. With the app’s help, your customers get the freedom of choosing a perfect time for the property viewing and then close the deal.

— A mobile application would help your customers to get a virtual representation of the property before the day of the visit. Most app developers even add a virtual walk-through that shows every aspect of the property for clarification, which helps the customers in making a wise decision.

Visit us: https://www.suriainternational.com/real-estate-app-development-transforms-the-sector-digitally/

Read More
How to Set Up EFS Mount Helper
Tags: aws
Published: 2021-07-01 03:25:41

EFS offers two methods to connect your Linux-based EC2 instance to your EFS file system. Both use a process called mounting whereby you mount a target to the EFS file system on your instance. The original method available with EFS used the standard Linux NFS client to perform the mount. Since then, a new method has been developed, and this newer method is now the preferred option, and this uses the EFS mount helper.
The EFS mount helper is a utility that has to be installed on your EC2 instance. This utility has been designed to simplify the entire mount process by using predefined recommended mounting options that are commonly used within the NFS client. It also provides built-in login capabilities to help with any troubleshooting that might be required and are stored in the following location:
/var/log/amazon/efs
In addition to mounting an EFS file system to running instances, you can also use the EFS mount helper to automatically connect to EFS during the boot process, as well as by editing the /etc/fstab configuration file. Before using the EFS mount helper to connect to your EFS file system from your EC2 instances, there are a couple of prerequisites required to be in place. First and foremost, you need to ensure that you have created and configured your EFS file system, in addition to your EFS mount targets. You must have an EC2 instance running with the EFS mount helper installed, and this instance will be used to connect to the EFS file system.
The instance must also be in the VPC and configured to use the Amazon DNS servers with DNS hostnames enabled. You must have a security group configured allowing the NFS file system NFS access to your Linux instance, and you must also be able to connect to your Linux instance. I now want to provide a quick demonstration on how to create an EFS file system from within the AWS Management Console.

Set up
Navigate to EC2 and go to security group.
Create a security group and select the VPC and add the inbound rule of NFS, As NFS will need to be accessed by EC2 instances.

Configuring Security group
Now let’s search for EFS in AWS console, Select Create Elastic File System.
There are 3 steps to be followed here:
Select the VPC to which the EFS should be associated.
Select the mount targets which are in each AZ and select public subnet and security group which we created in before step.
Add tags , life cycle management to move from standard to Infrequent, through put mode, Performance mode, enable encryption. These all options are pre defined and optional. Can be changed as per your requirement.
Once created we can see the DNS Name of the file system access when you open EFS you created in detail.
Now let’s Mound the EFS created to EC2 instances.

This information is also available in your EFS screen and select how to configure

Now ssh to your 2 instances and you do the bash command as shown in the screen
This command installs efs on EC2: sudo yum install -y amazon-efs-utils.
This command creates the directory in EC2 instances: sudo mk dir efs.
This command can be used to mount the EFS to EC2: sudo mount -t efs fs-obc672co.