teleren/devto huggingface dataset:
How to setup SvelteKit with Tailwind CSS
Tags: tailwindcss, svelte, css, javascript
Published: 2023-03-02 08:13:21

## What is SvelteKit?

[SvelteKit](https://kit.svelte.dev), built on top of Svelte, is a framework for rapidly developing robust, performant web applications. You can read more about Svelte [here](https://dev.to/arpitjalan/introduction-to-svelte-3i4k).

## What is Tailwind CSS?

[Tailwind CSS](https://tailwindcss.com) is a utility-first CSS framework for rapidly building custom user interfaces. It is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

## Setup SvelteKit with Tailwind CSS

First, let's create a new SvelteKit project if you don't have one set up already.

```shell
npm create svelte@latest myapp
cd myapp
npm install
npm run dev
```

Install the Tailwind CSS dependencies.

```shell
npm install -D tailwindcss postcss autoprefixer
```

Create the Tailwind CSS config files.

```shell
npx tailwindcss init tailwind.config.cjs -p
```

In your `svelte.config.js` file, import `vitePreprocess` to enable processing `<style>` blocks as PostCSS.

```javascript
// svelte.config.js

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
		adapter: adapter()
	},
	preprocess: vitePreprocess()
};

export default config;
```

Add the paths to all of your template files in your `tailwind.config.cjs` file.

```javascript
//tailwind.config.cjs

/** @type {import('tailwindcss').Config} */
module.exports = {
	content: ['./src/**/*.{html,js,svelte,ts}'],
	theme: {
		extend: {}
	},
	plugins: []
};
```

Create a `./src/app.css` file and add the `@tailwind` directives for each of Tailwind’s layers.

```css
/* app.css */

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

Create a `./src/routes/+layout.svelte` file and import the newly-created `app.css` file.

```svelte
<!-- +layout.svelte -->
<script>
	import '../app.css';
</script>

<slot />
```

That's it! You can now start using Tailwind CSS utility classes in your markup! 🚀

```svelte
<!-- +page.svelte -->

<h1 class="text-3xl font-bold underline">Welcome to SvelteKit</h1>
```

### Conclusion

The combination of SvelteKit & Tailwind CSS provides a powerful toolset for creating modern web applications that are both visually appealing and highly functional. Whether you're building a small personal project or a large-scale enterprise application, the SvelteKit & Tailwind integration is a great choice for optimizing your design and development workflow.

Check out the [repository at GitHub](https://github.com/arpitjalan/sveltekit-tailwind) to see the source code.
A vue plugin for file upload?
Published: 2023-03-02 08:10:43

Check out [Progress-up](https://progress-up.live)

![Banned files](https://i.imgur.com/NXyisu1.png)

## Features

* &#128311; Multiple files sent in parallel
* &#128311; 10 progress bars to choose from
* &#128311; 4 tabs [setup, drag drop, stats, help]
* &#128311; MIME and size filters [allow/deny, total/per file limit]
* &#128311; Test upload feature to test backend
* &#128311; Bare min config needed to start uploading
* &#128311; Drag and drop
* &#128311; Dark mode
* &#128311; POST HTTP method
* &#128311; Plugins for svelte, vue, react & angular
gsql Connection and Usage
Tags: opengauss
Published: 2023-03-02 08:05:00

gsql provided by openGauss is a database connection tool running in the CLI. gsql provides basic and advanced functions of databases to facilitate user operations. This section describes how to use gsql to connect to a local database. You need to provide a database name and a port number of the primary database node.

1.Log in as the OS user omm to the primary node of the database.
2.Connect to a database.
After the database is installed, a database named postgres is generated by default. When connecting to a database for the first time, you can connect to this database.
Run the following command to connect to the postgres database:

**gsql -d postgres -p 8000**

postgres is the name of the database to be connected, and 8000 is the port number of the database primary node. Replace the values as required.
If information similar to the following is displayed, the connection succeeds:

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

User omm is the administrator, and DBNAME=# is displayed. If you log in to and connect to the database as a common user, DBNAME=> is displayed, prompting you to enter SQL statements.
Non-SSL connection indicates that the database is not connected in SSL mode.
3.You are advised to change the password upon the first login to improve security. The command is as follows:

**openGauss=# ALTER ROLE omm IDENTIFIED BY 'XXXXXXXX' REPLACE 'XXXXXXXX';**


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

4.gsql provides advanced functions for you to use the database.
The gsql program has some meta-commands that are not SQL commands. They begin with a backslash (\). For example:
   1.You can run the following command to query the openGauss version and copyright information:
**openGauss=# \copyright**
   2.You can run the following command to obtain the help syntax of various openGauss SQL commands:
**openGauss=# \h**
   3.You can run the following command to query all data and description information in the openGauss:
**openGauss=# \l**
5.Exit the database.
**openGauss=# \q**
By default, a client is automatically disconnected if it remains idle for a period longer than 10 minutes (the default value of session_timeout) after connecting to the database.
A Fun Programming Joke To Start Your Day
Tags: jokes, dailydeveloperjokes
Published: 2023-03-02 08:00:26

---
title: "A Fun Programming Joke To Start Your Day"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes
---

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

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

---

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

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

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

<!--
Joke text:
What's the best tool for automatically ignoring long email threads about tech buzzwords?

"Block-chain"
 -->
What Are Some Common Mistakes That Beginners Make When Learning to Code, and How Can You Avoid Them?
Tags: discuss, beginners, codenewbie
Published: 2023-03-02 08:00:00

Starting out as a beginner programmer is exciting, but it can also be overwhelming. Here are some common mistakes that beginners make when learning to code, and how to avoid them:

1. Not practicing enough: Consistent practice is essential for mastering any skill, including coding. Make sure to allocate enough time to practice regularly, even if it's just for a few minutes a day.

2. Not seeking help or support: It's okay to ask for help or seek support when you're stuck on a problem. There are plenty of online communities, forums, and resources available to help you out.

3. Overcomplicating things: As a beginner, it's easy to get bogged down in complex concepts and technical jargon. Try to focus on the basics and build a strong foundation before moving on to more advanced topics.

4. Not testing code: Testing your code is crucial to catch errors and ensure that it's functioning as intended. Make sure to test your code regularly and thoroughly.

5. Copying and pasting code: While it's tempting to copy and paste code from the internet, it's important to understand what the code does and how it works. Try to write your code from scratch to build a better understanding of programming concepts.


To the more experienced coders out there: what were some of the biggest mistakes you made early on in your coding journey? How did you learn from them? What advice would you give to those who may be making similar mistakes now?

Let's learn from each other and continue to grow as a community!
Installation of One Primary and One Standby Nodes
Tags: beginners, discuss, opengauss
Published: 2023-03-02 07:57:25

**Procedure**

1.Create a user group dbgroup.

**groupadd dbgroup**

2.Create a common user omm in the dbgroup user group and set the password to Gauss_234.
**useradd -g dbgroup omm
 passwd Gauss_234**

3.Log in to the host where the package is installed as user omm and decompress the openGauss package to the installation directory (for example, /opt/software/openGauss).

**tar -jxf openGauss-x.x.x-openEuler-64bit.tar.bz2 -C /opt/software/openGauss**

4.Assume that the decompressed package is stored in the /opt/software/openGauss directory. Go to the simpleInstall directory.

**cd /opt/software/openGauss/simpleInstall**

5.Run the install.sh script to install openGauss.

**sh install.sh  -w xxxx  --multinode**

In the preceding command, -w indicates the initial database password (specified by gs_initdb). This parameter is mandatory for security purposes.

6.After the installation is complete, check whether the process is normal by using ps and gs_ctl.

**ps ux | grep gaussdb
gs_ctl query -D /opt/software/openGauss/data/master**

Run the ps command to display information similar to the following:

**omm  4879 11.8 1.1 2082452 373832 pts/0  Sl   14:26   8:29 /opt/software/openGauss/bin/gaussdb -D /opt/software/openGauss/data/master -M primary
omm  5083  1.1  0.9 1819988 327200 pts/0  Sl   14:26   0:49 /opt/software/openGauss/bin/gaussdb -D /opt/software/openGauss/data/slave -M standby
omm      20377  0.0  0.0 119880  1216 pts/0    S+   15:37   0:00 grep --color=auto gaussdb**

Run the gs_ctl command to display information similar to the following:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n8baqhcrbk6bncl4mvkn.png)
How to Import Component in SwiftUI
Published: 2023-03-02 07:54:29

In SwiftUI, components are created using views, and you can import them into your project by creating a new SwiftUI file and defining your view there. Here's an example of how to create a custom component and import it into your project:

Open Xcode and create a new SwiftUI file by selecting File > New > File... from the menu bar.
Select SwiftUI View as the template and click Next.
Enter a name for your view, such as MyComponent, and click Create.
Define your view in the body property of the struct. For example:
swift
```
struct MyComponent: View {
    var body: some View {
        VStack {
            Text("Hello, world!")
            Image(systemName: "star.fill")
        }
    }
}
```
Save the file and import it into your project by adding the following code to your SwiftUI view:
```
import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            MyComponent()
            Text("This is my main view")
        }
    }
}
```
In this example, the MyComponent view is imported into the ContentView view using the name of the file and the name of the struct that defines the view. The MyComponent view can be used like any other SwiftUI view in the body property of the ContentView view.

You can define as many custom components as you need in separate files and import them into your project as needed. This allows you to modularize your code and reuse components across different views and projects.
How to Fetch Data in SwiftUI
Published: 2023-03-02 07:52:39

Fetching data from an API in SwiftUI can be done using the URLSession class provided by the Swift standard library. Here's an example of how to fetch data from an API and display it in a SwiftUI view:

```
import SwiftUI

struct ContentView: View {
    @State private var data: [Post] = []

    var body: some View {
        List(data, id: \.id) { post in
            VStack(alignment: .leading) {
                Text(post.title)
                Text(post.body)
                    .font(.subheadline)
                    .foregroundColor(.secondary)
            }
        }
        .onAppear {
            fetchData()
        }
    }

    func fetchData() {
        guard let url = URL(string: "https://jsonplaceholder.typicode.com/posts") else { return }

        URLSession.shared.dataTask(with: url) { data, response, error in
            guard let data = data else { return }
            do {
                let posts = try JSONDecoder().decode([Post].self, from: data)
                DispatchQueue.main.async {
                    self.data = posts
                }
            } catch {
                print(error.localizedDescription)
            }
        }.resume()
    }
}

struct Post: Codable {
    let id: Int
    let title: String
    let body: String
}
```
In this example, a List is used to display the data fetched from the API. The @State property wrapper is used to store the fetched data as a property of the view. The onAppear modifier is used to trigger the fetchData() method when the view appears.

The fetchData() method uses URLSession.shared.dataTask(with:completionHandler:) to fetch data from the API. The fetched data is then decoded using JSONDecoder() and stored in the data property using the DispatchQueue.main.async method to ensure that the UI is updated on the main thread.

Note that in this example, the Post struct conforms to the Codable protocol, which allows it to be decoded from JSON data using the JSONDecoder() class provided by the Swift standard library. If the API returns data in a different format, you may need to use a different decoding method or update the Post struct to match the data format.
Installation on a Single Node
Tags: beginners, discuss, opengauss
Published: 2023-03-02 07:50:29

1.Create a user group dbgroup.

**groupadd dbgroup**

2.Create a common user omm in the dbgroup user group and set the password to Gauss_234.

**useradd -g dbgroup omm
passwd Gauss_234**

3.Log in to the host where the openGauss package is installed as user omm and decompress the openGauss package to the installation directory (for example, /opt/software/openGauss).

**tar -jxf openGauss-x.x.x-openEuler-64bit.tar.bz2 -C /opt/software/openGauss**

4.Assume that the decompressed package is stored in the /opt/software/openGauss directory. Go to the simpleInstall directory.

**cd /opt/software/openGauss/simpleInstall**

5.Run the install.sh script to install openGauss.

**sh install.sh  -w xxxx** 

In the preceding command, -w indicates the initial database password (specified by gs_initdb). This parameter is mandatory for security purposes.

6.After the installation is complete, check whether the process is normal by using ps and gs_ctl.

**ps ux | grep gaussdb
gs_ctl query -D /opt/software/openGauss/data/single_node**

Run the ps command to display information similar to the following:

**omm      24209 11.9  1.0 1852000 355816 pts/0  Sl   01:54   0:33 /opt/software/openGauss/bin/gaussdb -D /opt/software/openGauss/single_node
omm      20377  0.0  0.0 119880  1216 pts/0    S+   15:37   0:00 grep --color=auto gaussdb**

Run the gs_ctl command to display information similar to the following:

**gs_ctl query ,datadir is /opt/software/openGauss/data/single_node
HA state:
    local_role                     : Normal
    static_connections             : 0
    db_state                       : Normal
    detail_information             : Normal
Senders info:
    No information
 Receiver info:
No information**
Electric Vehicle Myths busted By ElectricPe
Tags: ev, electricvehicle, charging, stations
Published: 2023-03-02 07:43:06

EVs have long been the subject of debate and discussion. [EV myths](https://www.instagram.com/p/Co9KN76v4hE/?utm_source=ig_web_copy_link) continue even after the world is heading towards clean, sustainable energy. The idea that electric vehicles are slow and underpowered is one of the most widespread misconceptions. This is not.

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

In reality, electric vehicles are quicker and more potent than internal combustion engine (ICE) vehicles. Electric vehicles (EVs) accelerate faster than internal combustion vehicles. EVs generate 100% accessible torque instantly and deliver it to the electric motors.

In conclusion, contrary to popular belief, electric vehicles are not slow and underpowered. They offer a quieter and more comfortable ride while being swift and powerful. It's crucial to dispel common myths about electric vehicles, At Electric, we are providing the facts from fiction. Join us and take steps towards a more sustainable and clean future by recognizing the advantages of EVs.

Follow us on [Instagram](https://www.instagram.com/goelectricpe/) for [more](https://www.facebook.com/ElectricPeIndia) Electric vehicle updates.
Preparing the Software and Hardware Installation Environment
Tags: beginners, discuss, opengauss
Published: 2023-03-02 07:40:34

This section describes the preparations for installation. It is recommended that servers to be deployed on openGauss have the same software and hardware configurations.

**Hardware requirements**

Table 1 lists the minimum hardware requirements of the openGauss server. When planning the hardware configuration of a product, consider the data scale and expected database response speed. Plan hardware as required.

Table 1 Hardware requirements

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

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

**Software Requirements**

Table 2 Software requirements


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

**Software Dependency Requirements**

Table 3 describes the openGauss software dependency requirements.

You are advised to use the default installation packages of the dependent software in the listed OS installation CD-ROMs or sources. If the software does not exist, refer to the recommended versions of the software.
Table 3 Software dependency requirements

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4yytl3vu38v02lqzq2ed.png)
I think we programmer won't lose our job in the next 5 years
Tags: discuss, news, career, writing
Published: 2023-03-02 07:40:06

## The wild world right now
A wile ago, Microsoft released Github Copilot which is an AI based tool to support people writing code more efficiently using native language.

Recently, the announcement of ChatGPT marked a new era. An era of AI where we simple just ask without doing much.

Follow that, Microsoft released Bing which uses newer data than ChatGPT.

Many creative people tried various things like
- Ask ChatGPT to write unit test for their program, teach them to write code...

![Writing code using ChatGPT](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jw57tg3piddj5042fiks.png)

- They even finished an essay within 24 hours with the help of ChatGPT

Now we live in fear of being replace by AI :<

## What changed?
From my point of view
- We may switch from using Google to use AI platform to learn stuff quicker. (there is some news that Google is releasing their AI, too).
- We will learn quicker and many people will join the Programming community.
- Speaking of long term, there will be less critical thinking people than ever.
## What will remain the same?
First, If we bring the value, we get paid.

- From a point of view of "It's just a tool". Remember when people have to write down everything on the paper for accountant then Microsoft Excel came out and people use it as a **Tool**? Of course, some old people could not catch up and lost their job because the youth are better at learning technology. Nevertheless, they didn't lose their job instantly, they lose their job after a couple of years till all the company shifting from paper to Excel.
People get hired and get paid because they bring the value of accountant done.

- From a point of view of "It's gonna replace us who write code". Yes, If AI does a very good job at coding and could make performance and bug-free app then we should give up coding, why would we reinvent the wheel? We should leverage it's skill to make our products or do whatever brings value instead. We use this to bring the value instead of writing code.

## What should we do?
- **Keep learning** We are still the one who get the job done on a high level. AI at the moment is just a tool which will makes the job done faster but the decision is still up to us. We should use AI to learn even quicker.
- **Become a high value person** I don't think AI in the next 5 years could write the whole project from scratch base on some vague requirements. In the meantime, we should try to increase our value so the value we bring up could never be fulfilled by the AI.

## Conclusion
Keep learning, keep improving yourself to become a high value person and enjoy your life.

Tell me your opinion in the comment section!