teleren/devto huggingface dataset:
How to create a design system with TailwindCss and NuxtJs ?
Tags: tailwindcss, vue, javascript
Published: 2023-01-11 13:47:26

**Creating a design system is an essential step for building a consistent and well-designed application or website. A design system is a set of reusable rules and components that helps to maintain a consistent visual presentation throughout the application. It can include elements such as colors, typography, buttons, and forms. Using a design system can make the development and maintenance of code easier and also improve user experience.**

**TailwindCSS** and **NuxtJS** are two popular tools that you can use to create a design system. TailwindCSS is a CSS framework that allows for rapid UI development by providing pre-defined classes. NuxtJS is a JavaScript framework built on top of Vue.js that makes it easy to develop dynamic web applications.

## Here are the steps to create a design system with TailwindCSS and NuxtJS:

First, you need to [**Set up a new NuxtJS project with TailwindCSS**](https://dev.to/devyann/how-to-start-a-project-with-nuxtjs-3-and-tailwindcss--4oef)

**Then, add components:** In the components folder of your project, create files for the components you want to use in your design system. Use TailwindCSS classes to style the components. For example, you could create a file Button.vue for a custom button.

**Use the components in the pages:** Use the components you've created in the pages of your application. In each page file, import the components and use them as normal Vue.js tags to build the UI.

Test and adjust: Before deploying your application, it's important to test all the created components to make sure they are working properly and meeting the design standards you've chosen. It's also recommended to continue to adjust and optimize styles for a better user experience.

Furthermore, you can add some globals css rules in a main.css like this :

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

@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
  /* ... */
}
```

You can find more informations about the layer directive on [this page](https://tailwindcss.com/docs/adding-custom-styles#using-css-and-layer).

In conclusion, TailwindCSS and NuxtJS are two powerful tools that can be used to create a design system for your web application. By following the steps above, you can set up a new NuxtJS project, add TailwindCSS, create a Tailwind config file, and add reusable components to create a consistent and visually pleasing design system.

It is important to keep in mind that, like with any other design system, it's an iterative process and some adjustments may need to be made over time to adapt to the project's needs and best practices.
Create your own delivery app - Let's begin
Tags: webdev, cloud, tutorial, aws
Published: 2023-01-11 13:47:23

Hello everybody! 
Everyone said to me before starting this series to "start low", don't put too much on the plate or take one step at a time.

**Not a chance.**

So here we are, first step to create a delivery app.

We will try to tackle all the different parts that are needed for our app and use case. At every stage we are going to make assumptions and make some decisions based on those about the tech stack and approach. The process will be outlined like follow:

1. Basic requirements
2. Backend (code + infrastructure)
3. Frontend (web and mobile)
4. Observability and maintenance
5. Planning for the future

For simplicity we are going to focus on food delivery app. Of course the different domain specific part can be changed based on different industries but the core is going to be the same.

We are going to divide the project in three main functional areas:

- Customer facing (mobile app/website)
- Admin panel (for us to manage all the clients)
- Backoffice (website to manage the point of sales and the app for local screens to be used with the till)
- Riders app (mobile app to manage deliveries etc.)

Let's then focus on some use cases that we want to cover.

**Customer facing:**

- User account creation and login
- Restaurant browsing
- Menu ordering
- Payment processing
- Order tracking
- Push notifications
- Address and contact information
- Review and rating
- Customer service

**Backoffice:**

- Manage orders
- Manage restaurants
- Manage menu items
- Order history and statistics
- Payment and revenue management
- Review and rating management
- Customer service management

**Rider App:**

- Rider registration and login
- GPS tracking
- Order assignment
- Navigation
- Communication
- Payment processing
- Document upload and storage
- Earnings and stats
- Schedule management
- Manage multiple orders

**Admin panel**

- User account management
- Role-based access control (rider, client, customer)
- Client management
- Order management
- Payment processing management
- Reporting and Analytics
- Customer service management
- Integration management (ehhh maybe)
- Push notification management

Does it sounds like a lot? you are totally right.
Of course we are going to start small and add a few piece at a time.
Trying to follow as much this picture:

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

For the purpose of this project I'm going to create a Trello board to keep all this tracked (otherwise I'm going to bin everything from day 2) and a Github organization with all the relevant code bases and projects (because yay opensource is good, no?).

[General Board](https://trello.com/invite/b/B0o1xzJz/ATTId201e24739837bd3f174d458660e2f157E479961/general-project) | [Org git](https://github.com/GoFeedMe)

So, what are you waiting for? go on! Let's start from the juicy backend
API Links
Tags: api, link
Published: 2023-01-11 13:39:58

Weather API: https://openweathermap.org/
Nasa API: https://api.nasa.gov/
Movie API: https://www.themoviedb.org/documentation/api
Voice API: https://responsivevoice.org/api/
Exchange Rate API: https://www.exchangerate-api.com/
Meal API: https://themealdb.com/api.php
Reqres: https://reqres.in/
Marvel API: https://developer.marvel.com/
Mapbox: https://www.mapbox.com/
FavQs API: https://favqs.com/api
Edamam API: https://www.edamam.com/
Fake Store API: https://fakestoreapi.com/
Pokemon API: https://pokeapi.co/
IGDB API: https://www.igdb.com/api
JSON Placeholder: https://jsonplaceholder.typicode.com/
Random User Generator: https://randomuser.me/
Public APIS: https://github.com/public-apis/public-apis
How to use Node JS with your Project?
Tags: node, javascript, webdev, beginners
Published: 2023-01-11 13:38:45

To use Node.js in a project, you will first need to install Node.js on your computer. You can download the installer for your operating system from the official Node.js website (https://nodejs.org/en/download/). Once Node.js is installed, you can use it to run JavaScript code outside of a web browser.

Here is an example of a simple Node.js script that logs "Hello, World!" to the console:


```javascript
console.log("Hello, World!");
```

You can run this script by saving it to a file with a .js extension, such as hello.js, and then running it from the command line with the node command:

```javascript
node hello.js
```
This will output "Hello, World!" to the console.

To use Node.js in a larger project, you will typically organize your code into modules, and use require and exports to include and share code between files.

For example, you can create a file add.js that exports a function:

```javascript
//add.js
const add = (a, b) => a + b;
module.exports = add;
```
And then you can include that module in another file and use the exported function

```javascript
//app.js
const add = require('./add');
console.log(add(1,2)) //3
```
You can run it via command line as well

```javascript
node app.js
```
This is just a very very very basic example of how to use Node.js in a project, but it should give you an idea of how to get started. As your project grows in complexity, you may want to use a framework such as Express.js to help organize your code, or a package manager such as npm or yarn to manage dependencies.

Best of luck!!
Confused with MySQL Recursive Query? This is For You
Tags: mysql, database, dbforge
Published: 2023-01-11 13:29:16

---
title: Confused with MySQL Recursive Query? This is For You
published: true
description: What is MySQL Recursive Query?
tags: #mysql #databases #dbforge
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-01-11 13:25 +0000
---
Recursive queries are an efficient way to solve the problem of building a hierarchy or tree and traversing it. Let's take a closer look at how to use them in MySQL - https://ipwithease.com/mysql-recursive-query/

![mysql recursive query](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9er8429hjdhk6j1eh40r.png)
Webinar: Powering Smart City Solutions with AWS IoT & GovCloud(US)
Tags: iotsolutions, awscloud, smartcitysolutions
Published: 2023-01-11 13:26:41

Learn how Anblicks helped Ubicquia in building a smart city and street light IoT platforms and helped in saving cost by migrating 400+ servers and 1000s of databases to AWS.

Date & Time: 25th January 2025, 11:00 am (CST)

Anblicks will host a webinar “Powering Smart City IoT Solutions on AWS & GovCloud,” on Jan 25, 2023. The webinar will be presented by Gregory Walters (Director – Software Engineering, Ubicquia), Ronald Smith (VP-Software Development, Ubicquia), Jeff Friedman (Business Development Manager, AWS), Rahul Kochhar (IoT Architect, AWS), and Jayesh Prajapati (Director-Delivery, Anblicks).

## This webinar will be beneficial to those who are:

- Planning to build or building Smart City applications on the cloud 
- Building Multi-tenant, complex data platform on AWS 
Building a Highly scalable IoT streaming data platform to process millions of transactions per day  
- Looking for cost savings by leveraging AWS Cloud, cloud-native services, and data components 
- Building a secure data platform on Cloud which comply with FedRamp HIGH baseline standards 

Register Here: [Webinar on powering Smart City Solutions with AWS ](https://www.anblicks.com/insights/webinars/powering-smart-city-solutions-with-aws-iot-govcloud)
Responsive Deign using CSS Flex
Published: 2023-01-11 13:24:09

I've just completed a front-end coding challenge from @frontendmentor! 🎉

Could you take 60 seconds to go to [ https://product-preview-card-8tsuk6d0p-bthedraft.vercel.app/ ] and share your happy experiences? I will be forever grateful. Thank you in advance for helping me out!
Get the count of affected rows with ease: The power of the RETURNING clause in Postgres
Tags: postgres, sql, database, webdev
Published: 2023-01-11 13:19:29

When working with databases, it is frequently vital to know how many rows have been changed by a query, and this is especially true when conducting operations such as updates or removals. Through its **_RETURNING_** clause, Postgres offers a method that is both powerful and versatile for doing this task.

Postgres's **_RETURNING_** clause makes it possible to retrieve both the data of the _impacted rows_ and the _total number of rows_ that were _modified_ or _deleted_. The **_RETURNING_** clause is used to get certain columns from a database. It is appended at the end of a query.

For example, to update all rows in a table where a certain condition is true and return the number of affected rows, you would use the following query:

```
UPDATE mytable SET mycolumn = 'new value' WHERE mycondition = true RETURNING *;
```

This query would update the data of all rows that fit the condition "mycondition = true" and it would return the data of the rows that were changed.

In the same way that you would use the following query if you wanted to use the **_RETURNING_** clause with the DELETE statement, you also have the option to do so.

```
DELETE FROM mytable WHERE mycondition = true RETURNING *;
```

It's important to remember that the **_RETURNING_** clause only works with update and delete statements, not with select statements. It's also only available in **Postgres**, not in other **RDBMS**.

In conclusion, the **_RETURNING_** clause in **Postgres** is a powerful tool that makes it easy to find out how many rows are affected by update and delete queries. it can make it much easier to write robust and reliable code that works with databases.
ChatGPT Is Helping Me Do Code Reviews
Tags: webdev, programming, startup, ai
Published: 2023-01-11 13:02:40

_**Update**: Since the release of this post, I built the exact tool that I'm describing in this post. If you wish to try it out, you can do so by creating account on [the official site](http://whisprai.com). And now, back to the original post._

I have a confession to make.

I'm not a big fan of doing code review. Especially not those big ones.

But lately, I've had a great idea. The idea was to ask GPT model for help.

And I can proudly say, the help I received.

![Pull GPT helping me with code reviews](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9xhmgk4rwnw45dqp7uje.png)

## My Problem With Code Reviews

What I really hate about code reviews is looking at a completely new file with undocumented code.

I have no idea what is going on there.

And this is exactly where GPT model comes into play.

![Pull GPT overview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zsynz2h9m1cevz02q56o.png)

**I built a simple Github bot that do the following:**

- Analyze new pull requests
- Process newly added files
- Write brief description of the code
- Add description as a comment to pull request

I tested this whole flow on one of my projects, and I was very satisfied with the result.

![Pull GPT in action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/19p3qpmmxpjhaa8wwouh.png)

**Here's a brief description that the model wrote.**

_This code is a React functional component that renders an affiliate ad using a combination of React hooks and DOM manipulation._

_The component uses the `useAffiliateAssets` hook to fetch assets for the ad, useMediaQuery to determine the device type, then it renders the ad using `ReactDOM.createPortal` and inserting the ad before the heading variable in the HTML document._

_If any of the required assets, heading, mediumBox or mediumLandscape are not available the component returns `null`_

## My (Possible) Next Steps

I just built the prototype together to prove that the concept is working.

But I can't help to wonder.

- Is this something that could help the others?
- Should I build this into a fully-featured product?

I know this would be a really fun project to work on, but I'm not sure if the idea is valid.

If you think it is, please let me know in the comments. If you think it's not, let me know as well.
How to Build a Truly Agile Team
Tags: agile, management, productivity
Published: 2023-01-11 13:02:01

Have you ever wondered what makes a truly agile team?
Many people believe that if you perform "agile ceremonies", you work agilely.

In the last year and a half, Uri Brodsky has worked as a team lead at Riskified, gaining experience in managing agile teams. In his new blog post, he explains how his team evolved into a truly agile team and how this can help you become a better manager.

[Find out more](https://medium.com/riskified-technology/how-to-build-a-truly-agile-team-4f5aeda0fc91)
This is what the future looks like - ChatGPT + database 🤯
Tags: ai, database, chatgpt
Published: 2023-01-11 12:56:50

In this video, I show you how #ChatGPT answers my question about the data I have in my tables. 🤯

I'll post new features integrating [DoTenX](https://dotenx.com) with AI as we release them.

Please support our open-source project:
github.com/dotenx/dotenx

{% youtube ePGzvNLKSJY %}
Importing JSON data into Firestore
Published: 2023-01-11 21:36:47

---
title: Importing JSON data into Firestore
published: true
date: 2023-01-11 12:56:36 UTC
tags: 
canonical_url: https://cherylm.hashnode.dev/importing-json-data-into-firestore
---

> Code on gitlab: [https://gitlab.com/test-projects47/firestore-import-json](https://gitlab.com/test-projects47/firestore-import-json)

# Creating a Firestore database

1. Register for a firebase account and go to Firebase Console (https://console.firebase.google.com/)

2. Add Project

3. Click Continue when the project is ready, which takes you back to the console

4. Add a new app (Web app in this case) to the project

5. Copy firebaseConfig in the next screen for later use.

6. Continue to console

7. Click into Cloud Firestore and create a database

8. Pick a mode and select a region and "Enable"

# Setup a service account

1. We will authenticate the app using a [service account key](https://cloud.google.com/docs/authentication/provide-credentials-adc#local-key).

2. Go to the Service account page ( Project Overview -> settings -> users and permissions ->service accounts)

3. "Generate new private key", which will save a JSON file to your computer

# The Code

[https://gitlab.com/test-projects47/firestore-import-json](https://gitlab.com/test-projects47/firestore-import-json)

1. start a new node.js project

```
yarn init

```

2. Add dependencies

```
yarn add firebase-admin
yarn add dotenv

```

1. Include the following files in the folder

2. In the .env file, put the path of the service account private key in the variable `GOOGLE_APPLICATION_CREDENTIALS`

3. (Optional) Firebase config variables in `.env`

4. Here (index.js) we insert the data in `data.json` into a collection called "users", with an automatically generated document id.

5. run the code
Validando um objeto JavaScript
Published: 2023-01-11 12:48:12

Estava hoje revisitando alguns projetos de estudo, refatorando algumas coisas e me deparei com uma função bastante simples que valida um objeto javascript. No caso, trata-se de uma validação de token.

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

Fiquei pensando em formas menos verbosas e sem tantos `if's` e acabei chegando neste resultado:

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

Penso que a leitura da lógica de validação se tornou mais clara, o componente `<Fail>` recebeu um detalhe sobre qual validação falhou e a própria mensagem de erro substitui o comentário do código.

O que você achou?
Tips y apuntes de filament PHP parte 2
Tags: filament, php, tips, formbuilder
Published: 2023-01-11 11:58:16


## Configuración de los formularios

```php
 public static function form(Form $form): Form
    {
        return $form
            ->schema([
// usa la relación con la tabla usuarios definida en el método Blog::author() del modelo
                Forms\Components\Select::make('user_id')
                ->required() ->relationship('author', 'name')
                    ->default(request()->query('ownerRecord'))->label('Usuario'),
                Forms\Components\TextInput::make('title')->label('Título')
                    ->required()
                    ->maxLength(150),
                Forms\Components\Textarea::make('abstract')->label('Resumen')
                    ->required(),
                Forms\Components\RichEditor::make('content')->label('Contenido')
                    ->required(),
                Forms\Components\Toggle::make('active')->label('Visible')
                    ->required(),
                Forms\Components\FileUpload::make('image')->label('Imagen')->image()
                ->imagePreviewHeight('250')
    ->loadingIndicatorPosition('left')
    ->panelAspectRatio('2:1')
    ->panelLayout('integrated')
    ->removeUploadedFileButtonPosition('right')
    ->uploadButtonPosition('left')
    ->uploadProgressIndicatorPosition('left')
                ,
     Forms\Components\TextInput::make('slug')
                    ->maxLength(255),
            ]);
    }
```
El formulario completo se ve de la siguiente manera.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jvl83vg3aotcklqzw9w7.png)
Create a VPC with resources to communicate with the Internet
Tags: aws, cloud, awscommunity, 100daysofcloud
Published: 2023-01-11 12:29:18

[11/100] #100DaysOfCloud Today, I created a VPC with a Public Subnet and an Internet Gateway that allows an EC2 Instance to communicate with the internet.

<u>Amazon Virtual Private Cloud (Amazon VPC) :</u>
Amazon Virtual Private Cloud (Amazon VPC) enables you to launch Amazon resources into a virtual network that you've defined. This virtual network closely resembles a traditional network that you'd operate in your own data center, with the benefits of using the scalable infrastructure of Amazon. It gives you full control over your virtual networking environment, including resource placement, connectivity, and security.

With VPC, you can control inbound and outbound access for your resources in your own virtual private network and connect your data center with AWS cloud securely along with other VPCs in your AWS accounts and VPCs in other AWS accounts. You can also securely access data on S3 from your resources in VPC without using the internet.

All these along with many other features make VPC a preferred choice for a variety of use cases, such as hosting development and testing environments in AWS VPC. You could also use VPC for creating environments for Proof of Concept (PoC). These environments can be created on short notice and could act as an isolated network accessible only by specific teams or other resources. Since VPC is a software-defined network, it brings loads of flexibility in designing, integrating, and securing your resources in AWS cloud.

You can try to Create a VPC with a Public Subnet and an Internet Gateway that allows an EC2 Instance to communicate with internet  yourself by following the steps from the link below :
[GitHub](https://github.com/aaditunni/100DaysOfCloud/blob/main/Journey/011/Readme.md)
How to Use pgFormatter: Features and Alternatives
Tags: postgres, database, pgformatter, dbforge
Published: 2023-01-11 12:23:38

---
title: How to Use pgFormatter: Features and Alternatives
published: true
description: pgFormatter tutorial overview and alternatives
tags: #postgresql #postgres #databases #pgformatter #dbforge 
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-01-11 12:19 +0000
---
This article describes pgFormatter, one of the most popular tools for formatting PostgreSQL code. In addition, we will look at its most convenient and feature-rich alternatives - https://blog.devart.com/pgformatter-tutorial-overview-and-alternatives.html

![how to use pgFormatter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cjyjypos9wbs1uaqb71i.jpg)