teleren/devto huggingface dataset:
CSS Shorthand
Tags: css, webdev, frontend
Published: 2023-03-09 20:50:00

CSS shorthand is a powerful tool that can save time and effort when writing CSS code. By using shorthand, you can write less code, reduce redundancy, and make your CSS more efficient. In this article, we’ll take a look at some of the most commonly used shorthand properties in CSS, including border, margin, font, background, list, and transition.


![CSS Shorthand — Designed By [Rutik Patel](https://dev.to/rutikkpatel) ([Author](https://dev.to/rutikkpatel))](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z9vi5cqj6qg0fsve72ej.png)


&nbsp;
## CSS Shorthand For

 1. Border

 2. Margin

 3. Font

 4. Background

 5. List

 6. Transition


&nbsp;
## 1. Border

With the border shorthand, you can specify the width, style, and color of an element’s borders all in one line of code.

![](https://cdn-images-1.medium.com/max/2640/1*dBgK5j65bZfKdId-ddeAnQ.png)



**Border Shorthand :**

![Border Shorthand](https://cdn-images-1.medium.com/max/2640/1*tFYAsGkitv_8zZt-Io1TvA.png)


&nbsp;
## 2. Margin

The margin shorthand is used to specify the margin of an element. By using shorthand, you can set the margin for all four sides of an element with one line of code. For example:
margin: 10px 20px 30px 40px;

![](https://cdn-images-1.medium.com/max/2640/1*7pBgyQaYOOu6T78JvQDYhQ.png)



**Margin Shorthand :**

![Margin Shorthand](https://cdn-images-1.medium.com/max/2640/1*fnLl6WP9ndXTiEv3cWxmFA.png)


&nbsp;
## 3. Font

The font shorthand is used to specify multiple font-related properties in one line of code.

![](https://cdn-images-1.medium.com/max/3184/1*cefZE1HS5-2FeyV6vKf0kw.png)



**Font Shorthand :**

![Font Shorthand](https://cdn-images-1.medium.com/max/3184/1*vCDUFW-0DHi2RpX6EVV0OA.png)


&nbsp;
## 4. Background

The background shorthand is used to specify multiple background properties in one line of code. This includes the following background properties.

![](https://cdn-images-1.medium.com/max/3184/1*7mOHn2sgQ5WRjV-f_-vDSg.png)



**Background Shorthand :**

![Background Shorthand](https://cdn-images-1.medium.com/max/3184/1*2yvZo2uJz3es08yYlZJW5g.png)


&nbsp;
## 5. List

The list shorthand is used to specify multiple list-related properties in one line of code.

![](https://cdn-images-1.medium.com/max/3184/1*hnjvZNvpmdpcFsShVCu7Ag.png)



**List Shorthand :**

![List Shorthand](https://cdn-images-1.medium.com/max/3184/1*2Dga63TQEq04S77V6_b19g.png)


&nbsp;
## 6. Transition

The transition shorthand is used to specify multiple transition-related properties in one line of code.

![](https://cdn-images-1.medium.com/max/2640/1*LM8SHVYXUZZCWzz8lEI0-Q.png)



**Transition Shorthand :**

![Transition Shorthand](https://cdn-images-1.medium.com/max/2640/1*0zBidI2SphBJKplxziEk9g.png)

---

## Conclusion

By using shorthand, you can simplify your CSS code and make it easier to read and maintain. This can save time and effort, and make your code more efficient. By mastering these shorthand properties, you can write cleaner, more effective CSS code for your website.
Gender Equality in Tech: Breaking Barriers and Building a Better Future
Published: 2023-03-10 03:04:44

The tech industry has long been characterized by a lack of diversity and a gender gap, with women significantly underrepresented in the field. However, there is growing recognition of the importance of promoting gender equality in tech, not only for the sake of fairness but also for the future success of the industry.

Despite efforts to promote gender equality in the tech industry, there are still several obstacles that prevent women from entering and thriving in the field. Some of the biggest obstacles to gender equality in tech include **stereotypes and bias, lack of representation, workplace culture, hiring practices, and pay and advancement.**

Stereotypes and bias usually discourage women from pursuing careers in tech. Gender stereotypes and bias can make it difficult for women to see themselves as part of the industry, and they may be seen as less capable or less interested in **STEM** subjects.

The lack of representation of women in tech can make it difficult for women to see themselves as part of the industry, leading to a lack of female role models and support networks. Workplace culture can also be a significant obstacle to gender equality in tech, with some companies having a culture that is hostile to women or that prioritizes male employees.

Hiring practices can also be a barrier to gender equality in tech. Unconscious bias can lead to the hiring of men over women, perpetuating the lack of diversity in the industry. Finally, pay and advancement can be significant obstacles to gender equality in tech, with women often paid less than men for doing the same work and having fewer opportunities for advancement and promotion.

To overcome these obstacles and promote gender equality in tech, it is essential to address stereotypes and bias, increase representation of women in the industry, promote inclusive workplace cultures, implement fair hiring practices, and ensure equal pay and opportunities for advancement.

Many tech companies have taken steps towards achieving these goals, offering mentorship and training programs, addressing unconscious bias, and promoting work-life balance. By prioritizing diversity and inclusion, tech companies can unlock the full potential of their workforce and promote innovation that benefits everyone.

In conclusion, gender equality is essential for the future success of the tech industry and for society as a whole. By working to break down the barriers that prevent women from entering and thriving in tech, we can build a more diverse and inclusive industry that benefits everyone.
2023 IoT Webinar on March 15 with Less Than 1 Week to Go!
Tags: iot, opensource, software, programming
Published: 2023-03-10 03:02:48



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

Hi Engineer, 

The 2023 IoT Webinar is on March 15 with Less Than 1 Week to Go! 
We are very excited to announce the full agenda for the IoT Webinar, featuring a lineup of exciting topics:



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


Time: March 15, 8:00 AM PDT
Free Register: https://events.teams.microsoft.com/event/ce2617af-e829-4200-96fa-adf5d30a959f@8093a42e-efec-433c-9880-6c238cdbec38


The 2023 IoT Contest follows the IoT Webinar will be launching on March 15, there are over 60 free hardware and cash prize prepared for the participants.

Register and get a chance to win: https://events.teams.microsoft.com/event/ce2617af-e829-4200-96fa-adf5d30a959f@8093a42e-efec-433c-9880-6c238cdbec38


Share and spread will be very much appreciated! See you Soon!
Warmest Regards!
Cathy
Setting up Next.js 13 with Prisma and SQLite
Published: 2023-03-10 03:00:57

In this tutorial, we will demonstrate how to set up a `Next.js 13` application with `Prisma` as the ORM and `SQLite` as the database.

## Prerequisites

- Node.js
- npm

## Step 1: Creating a Next.js application

First, let's create a new Next.js application using the create-next-app command:

```
npx create-next-app my-app --yes
```

This command will create a new Next.js application in the my-app directory. When prompted, choose `No` for `TypeScript` and `No` for the `experimental app/` directory.

Next, change into the project directory:

```
cd my-app
```

## Step 2: Setting up SQLite

To set up a SQLite database for our Next.js application, we need to install the sqlite3 package and create a new dev.db file:

```
npm install sqlite3
```

## Step 3: Setting up Prisma

Next, we need to install the Prisma and initialize a new Prisma project:

```
npm install prisma --save-dev && prisma init
```

This will initialize a new Prisma project in our application directory. Then, we can paste the following code into the schema.prisma file:

```
datasource db {
  provider = "sqlite"
  url      = "file:./dev.db"
}

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

model User {
  id    Int    @id @default(autoincrement())
  email String @unique
}
```

Don't forget to create `dev.db` file inside prisma folder

```
cd prisma
touch dev.db
```

## Step 4: Pushing the Prisma schema and starting the Prisma Studio

Finally, we need to push our schema to the database and start the Prisma Studio to view the database:

```
prisma db push && prisma studio
```

## Conclusion

Congratulations, you have successfully set up a Next.js 13 application with Prisma as the ORM and SQLite as the database. You can now use Prisma to query the SQLite database in your Next.js application.
Daily UX Writing Challenge Day 6 + 7
Tags: ux, uxwriting, beginners
Published: 2023-03-10 02:41:26

[Day 1](https://dev.to/fuwa/daily-ux-writing-challenge-day-1-50la) | [Day 2](https://dev.to/fuwa/daily-ux-writing-challenge-day-2-4d6p) | [Day 3](https://dev.to/fuwa/daily-ux-writing-challenge-day-3-3cog) | [Day 4](https://dev.to/fuwa/daily-ux-writing-challenge-day-4-5cg8) | [Day 5](https://dev.to/fuwa/daily-ux-writing-challenge-day-5-2hac)


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

I didn’t like this challenge….
I’m confused about the context...the scenario is that the user has already gotten into the car and is driving. Why would the message only appear after they plug in their phone and are already driving (I don’t have a car so I’m not aware if cars have a feature that alerts users of local news when plugged in)? Did the fire take place at that exact timing? I would like the message to alert the user the moment news of the fire is discovered. Also what's with the definite danger if fire gets close? Is the fire spreading towards her? Roads are closed so how would the user even get near enough to be in danger? 
To complete the challenge I assumed the fire started not long after the user started driving and that the user has a news app of some sort with push notifications which will wake up her screen and display the message.  
I made so many assumptions in this challenge - something you are not supposed to do as a UX designer >_<


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

Another sports one, I assumed it was football and used the 2 names I know as an example for the message.
openGauss Confirming Connection Information
Tags: opengauss
Published: 2023-03-10 02:37:43

You can use a client tool to connect to a database through a the primary node of the database in the database. Before the connection, obtain the IP address and the primary node of the database port number of the server where the the primary node of the database is deployed.

Procedure
Log in as the OS user omm to the primary node of the database.

Run the gs_om-t status–detail command to query instances in openGauss.

""
gs_om -t status --detail
""
[ DBnode State ]

node        node_ip         instance                                  state
 -----------------------------------------------------------------------------
 1  plat1 192.168.0.11  5001 /srv/gaussdb/data1/dbnode  P Primary Normal
In the preceding information, the IP address of the server where the primary database node instance is deployed is 192.168.0.11. The data path of the primary node of the database is /srv/gaussdb/data1/dbnode. P indicates that the role specified during the installation is Primary. The role does not change after the database is installed and is read from the system static file. Primary means the primary instance. Normal indicates that openGauss is available, the data has redundancy backup, all processes are running, and the primary/standby relationship is normal.

Confirm the port number of the primary node of the database.

View the port number in the postgresql.conf file of the primary node of the database path, which is queried in 2. The command is as follows:

""
cat /srv/BigData/gaussdb/data1/dbnode/postgresql.conf | grep port
""
port = 8000    # (change requires restart)
#comm_sctp_port = 1024   # Assigned by installation (change requires restart)
#comm_control_port = 10001  # Assigned by installation (change requires restart)
      # supported by the operating system:
      # e.g. 'localhost=10.145.130.2 localport=12211 remotehost=10.145.130.3 remoteport=12212, localhost=10.145.133.2 localport=12213 remotehost=10.145.133.3 remoteport=12214'
      # e.g. 'localhost=10.145.130.2 localport=12311 remotehost=10.145.130.4 remoteport=12312, localhost=10.145.133.2 localport=12313 remotehost=10.145.133.4 remoteport=12314'
      #   %r = remote host and port
alarm_report_interval = 10
support_extended_features=true
8000 is the port number of the the primary node of the database.
9 tips to help you focus on one thing at a time
Tags: programming, devjournal, focus
Published: 2023-03-10 02:34:00

“By focusing deeply on just one important thing at a time—hyper-focusing—we become the most productive version of ourselves.”

Being able to focus on one thing at a time can truly be your superpower.

9 tips to help you focus at once:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kkrm0ht08twmixx5vah3.png)
openGauss Concepts
Tags: opengauss
Published: 2023-03-10 02:31:05

Database
Databases manage various data objects and are isolated from each other. While creating a database, you can specify a tablespace. If you do not specify it, the object will be saved to the PG_DEFAULT tablespace by default. Objects managed by a database can be distributed to multiple tablespaces.

Tablespace
In openGauss, a tablespace is a directory storing physical files of the databases the tablespace contains. Multiple tablespaces can coexist. Files are physically isolated using tablespaces and managed by a file system.

Schema
openGauss schemas logically separate databases. All database objects are created under certain schemas. In openGauss, schemas and users are loosely bound. When you create a user, a schema with the same name as the user will be created automatically. You can also create a schema or specify another schema.

User and Role
openGauss uses users and roles to control the access to databases. A role can be a database user or a group of database users, depending on role settings. In openGauss, the difference between roles and users is that a role does not have the LOGIN permission by default. In openGauss, one user can have only one role, but you can put a user's role under a parent role to grant multiple permissions to the user.

Transaction
In openGauss, transactions are managed by multi-version concurrency control (MVCC) and two-phase locking (2PL). It enables smooth data reads and writes. openGauss stores them together with the version of the current tuple. A VACUUM thread is introduced to periodically clear historical version data. Unless in performance optimization, you do not need to pay attention to the VACUUM process. In addition, openGauss automatically commits transactions.
I made app that can convert sentences to Japanese honorific form (Keigo)
Published: 2023-03-10 02:13:15

I am not a Japanese native, sometimes I don't know how to say correctly in Keigo form (Japanese honorific form, usually for business).

For example, I wanted to say "I don't understand what this means", or in casual Japanese "これはどういう意味か分からない (Kore wa douiu imi ka wakaranai".

The app will return "これはどういう意味でしょうか？教えて頂けますか? (Kore wa doiu imi deshouka? oshiete itadakemasuka?)".
Or in English "what this means? Can you explain to me?"

https://keigobot.com


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

I used OpenAI's latest model ("gpt-3.5-turbo") to convert the sentences.
For the front end I used NextJS and TailwindCSS.

The API call part looks like this.

```javascript
  const config = new Configuration({
    apiKey: process.env.OPENAI_API_KEY
  })

  const openai = new OpenAIApi(config)
  
  const prompt = 

`I want you to act as an Japanese teacher. I will speak to you in any language, and you will change it to Keigo form.
Make it natural and keep the meaning same. I want you to only reply the correction, the improvements and nothing else, do not write explanations. 
My sentence is {${userInput}}` 

  const response = await openai.createChatCompletion({
    model: "gpt-3.5-turbo",
    messages: [{role: "user", content: prompt}],
  })

  res.status(200).json({ result: response.data.choices[0].message })
  
```

You can type any language for the input, and it will return the honorific sentence.
Of course because it is generated by AI, It's not always right. But I can say it is good most of the times.

I shared this on Reddit after release, so the traffic was pretty high. Currently, I am expecting about 100 visitors per day.

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

There are still many other things that can be improved.
It would be nice if this website can help people who are using Japanese. 

## References

OpenAPI Guide (Paid)
https://platform.openai.com/docs/api-reference/completions?lang=node.js

Host/Deploy (Free)
https://vercel.com/
How to use GetForm.io to manage your website forms without having to build a backend?
Tags: webdev, programming, tutorial, productivity
Published: 2023-03-10 02:10:00

## How to Use Getform.io for Form Backends

## Introduction

Getform.io is a form backend platform that allows developers to easily create custom forms and receive form submissions without having to build a backend system from scratch. In this guide, we'll walk you through the steps to set up a form and receive form submissions using Getform.io.

## Prerequisites

Before you begin, you'll need the following:

- A Getform.io account
- A website or application where you want to add a form
- Basic knowledge of HTML and JavaScript

## Step 1: Create a Form

To create a form in Getform.io, follow these steps:

1. Log in to your Getform.io account.
2. Click the "Create a Form" button.
3. Enter a name for your form and click "Create".
4. Customize your form by adding fields, changing labels, and selecting field types.
5. Click "Save" to save your changes.

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

## Step 2: Embed the Form

Once you've created your form in Getform.io, you can embed it into your website or application using the provided code snippet. To do this, follow these steps:

1. Copy the code snippet provided in the "Embed" tab of your form in Getform.io.
2. Paste the code snippet into your website or application's HTML code where you want the form to appear.

```
<form action="https://getform.io/f/{your-form-endpoint}" method="POST">
  <input type="text" name="name">
  <input type="email" name="email">
  <input type="text" name="message">
  <button type="submit">Send</button>
</form>

```
## Step 3: Receive Form Submissions

After your form is embedded, you'll need to set up where you want to receive form submissions. Getform.io allows you to receive form submissions through email or webhook. To set this up, follow these steps:


### Option 1: Receive Submissions via Email

1. In the "Settings" tab of your form in Getform.io, click the "Add Notification" button.
2. Enter the email address where you want to receive form submissions and click "Save".

### Option 2: Receive Submissions via Webhook

1. In the "Settings" tab of your form in Getform.io, click the "Add Webhook" button.
2. Enter the URL where you want to receive form submissions and click "Save".

## Conclusion

Congratulations! You've successfully set up a form and are now ready to receive form submissions using Getform.io. If you have any issues or questions, be sure to check out the Getform.io documentation or contact their support team for assistance.

learn more:
[getFrom](https://www.getform.io/)
[getFrom-Docs](https://docs.getform.io/)
4 Stages Of Problem Solving
Tags: webdev, programming, algorithms, strategy
Published: 2023-03-10 01:17:10

As software developers, we are faced with an array of tasks and problems that require our attention and expertise on a daily basis. To address these challenges, based on my studies, I rely on a problem-solving strategy that consists of four stages.

![4 Stages Of Problem Solving](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zxgsw28dzccqjj4lwz8q.png)

### 1 - Analyze
The first stage involves understanding the available resources and constraints of the problem. By assessing the resources at our disposal and identifying any limitations, we can gain a clear understanding of what is required to solve the problem effectively.

### 2 - Plan
The second stage is to write a program that outlines the steps needed to solve the problem. This plan of action serves as a roadmap that guides us toward a successful resolution.

### 3 - Implement
The third stage is to execute the program to obtain the desired results. By doing so, we can confirm that our solution is indeed effective and meets the requirements of the problem.

### 4 - Evaluate
Lastly, we match the results of the program with the desired output to determine if the problem has been successfully solved. This allows us to verify that our solution is accurate and meets the expectations of the stakeholders involved.

By following this four-stage problem-solving strategy, software developers can approach problems in a structured and systematic manner, leading to more efficient and effective solutions.

This four-stage problem-solving strategy is not only effective in the context of software development but can also be applied to various real-life situations. By breaking down complex problems into smaller, more manageable steps and following a structured approach, we can approach challenges with greater confidence and achieve successful outcomes.
WordPress 6.2 RC 1 Released and Ready for Testing
Tags: webdev, wordpress, beginners, programming
Published: 2023-03-10 00:16:45

**
WordPress 6.2 RC 1 Released and Ready for Testing**


WordPress 6.2 RC 1 was released today, marking the hard string freeze and readiness for translation ahead of the official release on March 28. There are three weeks remaining for testing.
https://wptavern.com

WordPress contributors published the 6.2 Field Guide, which includes the dev notes – technical updates for many of the new features and changes included in this release. These include editor component updates, notes on new and expanded APIs, accessibility updates, and more.

Plugin and theme developers are advised to test their extensions for compatibility and update the “Tested up to”  version in their readme files to 6.2. (A separate testing guide is available for those who are testing the changes in this release.)

A bug that was introduced in 6.2 Beta 1, which showed a white screen when using the browser’s back button inside the Site Editor, was fixed earlier this week in the 6.2 Beta 5 release. This is a major issue that would likely affect millions of users, and it underscores the fact that testing at this phase is still important. Bugs can be reported via the Alpha/Beta area in the support forums or by filing a bug report on WordPress Trac.



**mehr Infos und links:**

der Release-Artikle: https://wordpress.org/news/2023/03/wordpress-6-2-release-candidate-1/
field guide; https://make.wordpress.org/core/2023/03/09/wordpress-6-2-field-guide/
alpha-beta-area: https://wordpress.org/support/forum/alphabeta/
testing guide:  https://make.wordpress.org/test/2023/02/07/help-test-wordpress-6-2/