teleren/devto huggingface dataset:
Customer: Use Case for Learning Simple CRUD on ExpressJS and NestJS and The CI Pipeline (Use Case Introduction)
Tags: node, beginners, tutorial, nestjs
Published: 2023-11-29 04:33:16

Hello dear reader. Today I have new use case to learn ExpressJS and NestJS and I think it's quiet beginner friendly since I have no experience in NestJS. We are just going to create a simple CRUD application and save it into PostgreSQL database. You can find the working repository [here](https://github.com/amalja0/simple-mini-project).

## Resources
Before diving deeper, I want you to know that I will be using two different ORMs, Sequalize for ExpressJS and TypeOrm for NestJS. As I haven't work with node backend environment for so long, I have few resources that I read to build my application. 
1. [Node.js Express & PostgreSQL: CRUD Rest APIs example with Sequelize](https://www.bezkoder.com/node-express-sequelize-postgresql/)
2. [Clean Node.js Architecture —With NestJs and TypeScript](https://betterprogramming.pub/clean-node-js-architecture-with-nestjs-and-typescript-34b9398d790f)

Please check them out since of course they have better explanation.

## Brief explanation
This is a painless usecase once you know how each ORM works and since again, it just a simple CRUD application. Below is how I structured my `customer`  data to be use on every services:

```
{
    id: number,
    no: string, //uuid
    nama: string, //nama means name
    alamat: string, //alamat means adddress
    kota: string //kota means city
    createdAt: Date,
    updatedAt: Date
}
```
For summary, we are going to make same functionality for both service which are:
1. Create new customer
2. Get all customers
3. Get a customer by id
4. Update a customer based on the id
5. Delete a customer based on the id

## Project structure
Since we are going to be running some CI (Continuous Integration) using Jenkins, this is my kind of project structure:
```
simple-mini-project/
    ├── express-service/
    ├── nest-service/
    ├── front-end-service/
    └── Jenkinsfile
```

## Tips from a beginner:
Since one of our goal is to have CI run, we will have to push our code to a Git repository. It's much better if you push your work everytime you create a new functionality so you don't have to worry about losing your job!
Day5-Dia5
Tags: 100daysofcode, html, css, español
Published: 2023-11-29 03:48:20

#Dia 5  Day 5

##Css primeros pasos/repaso

Hoy me pude poner con el día 5 de escribir código. Me toca empezar a repasar css selectores clases id, fuentes . Cambiar de color la fuente, color de fondo. Muchas cosas básicas que había olvidado como escribirlas. 

Lo que mas me gusta de seguir la ruta de **Odin Project** que te va dando ejercicio para realizar después de una teoría. Vas desatollando pequeños proyectos que te obligan a escribir código.

Las capturas son simplemente de los primeros dos ejercicios para tener en claro los selectores que debo usar tanto para id para clases y las herencias dentro de lo mismo. 

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


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


#Day 5

##CSS First Steps/Review

Today, I was able to dive into day 5 of coding. It's time for me to start reviewing CSS selectors, classes, IDs, fonts, changing font color, background color, and many other basic things that I had forgotten how to write.

What I like the most about following the Odin Project path is that it provides exercises to do after each theory session. You end up developing small projects that force you to write code.

The screenshots are simply from the first two exercises to clarify the selectors I should use, both for IDs, classes, and the inheritance within them.
Berikan Tampilan yang Modern dan Klasik pada Lift Rumah Anda dengan Sentuhan Estetika yang Menawan
Tags: homelift, publiclift, building
Published: 2023-11-29 03:06:38

Tidak peduli bagaimana tren zaman berubah, akumulasi seni Tiongkok selama lima ribu tahun akan selalu hadir dan bertumbuh di era jaman yang modern sekarang ini.

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


Temperamen furnitur kayu mahoni yang lembut, pilihan pencahayaan yang lebih banyak dan terang, menonjolkan identitas dan status, serta membuat ruangan lebih terang. Bentuknya yang sederhana memberikan kesan bersih dan alami.

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

Karpet menggunakan lanskap sebagai fokus visual, dan warna-warnanya elegan, membuat ruang tamu lebih hangat dan nyaman.

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

Detail lift rumah PSA-Franz lebih sesuai dengan kebiasaan hidup masyarakat modern, struktur estetika Barat dipadukan dengan soft furnishing China, serta bahan dan gambar lebih memperhatikan keindahan dan konsepsi.

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

Dikombinasikan dengan fungsi praktis dari hunian pemilik, gaya sederhana membuat ruangan penuh ketegangan, dengan warna hitam elegan yang melewatinya. Kaca tempered memberikan pencahayaan maksimal pada ruangan, dan pemandangan transparan memungkinkan pemandangan panorama luas dan jauh.

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

Lift rumah PSA-Franz mengedepankan kenyamanan tanpa mengorbankan keindahan. Bangun hunian elegan ala Cina di tengah indahnya pemandangan selatan. Sikapnya yang halus memancarkan temperamen dan keanggunan, dan setiap gerakan serta keheningan langsung menggambarkan keindahan dan karakter halus Timur, yang membuat orang kagum dan tidak bisa dibandingkan dengannya.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yz5uoa9w63yoy70hjviv.jpg)
Dapatkan [informasi lebih lanjut](http://www.pardisolusi.com) dan hubungi kami segera.
The Future of Commuting? Exploring the Benefits of Electric Skateboards
Published: 2023-11-29 02:44:01

## Efficient and Eco-friendly

If this is interesting to you, why not [electric skateboard](https://www.ecomobl.com/product-category/products/electric-longboard-series/?utm_source=dev_to&utm_medium=rankking). 

Electric skateboards are becoming more popular among commuters due to their efficiency and eco-friendliness. Unlike traditional vehicles that emit harmful gases, electric skateboards are equipped with batteries that power the motor, making them environmentally sound. In addition, electric skateboards are more energy-efficient than traditional vehicles, as they require less energy to operate.

[![electric  skateboard](https://www.ecomobl.com/wp-content/uploads/2023/08/ecomobl-electric-board-21.jpg)](https://www.ecomobl.com/product-category/products/electric-longboard-series/?utm_source=dev_to&utm_medium=rankking)

## Cost-effective and Time-saving

Commuting with electric skateboards is a cost-effective and time-saving option. With rising fuel costs and traffic congestion, electric skateboards offer a more affordable and convenient alternative to traditional transportation. They are also lightweight and portable, allowing riders to easily navigate through crowded areas.

## Fitness and Fun

Electric skateboards provide a fun and engaging way to commute. They require riders to stand and control the board, which engages core muscles and helps improve balance. Commuting with an electric skateboard also provides an opportunity to get outside and enjoy fresh air and exercise, unlike sitting in a car for hours on end.

## Safety and Regulations

While electric skateboards offer many benefits, it is important to follow safety regulations when riding. Riders should always wear appropriate safety gear, such as a helmet, and follow traffic laws and regulations. In some areas, electric skateboards may be restricted or even banned, so it is important to check local laws before deciding to commute with an electric skateboard.

## References

  * [electric skateboard](https://cityofhuntington.com/?URL=https://www.ecomobl.com/product-category/products/electric-longboard-series/ "electric  skateboard")



### Useful Resources:

  * [Electric Skateboard Builders Forum](https://www.electric-skateboard.builders/)
  * [Wired's Guide to Electric Skateboards](https://www.wired.com/story/electric-skateboard/)
  * [ZDNet's Best Electric Skateboards](https://www.zdnet.com/article/the-best-electric-skateboards/ )
5 Hooks Personalizados Essenciais para Desenvolvimento React
Published: 2023-11-29 02:42:42

#1 - useModal - Simplificando Modais:
O useModal facilita a vida ao lidar com modais no React. Ele traz um estado de visibilidade (como um interruptor) e funções prontas para abrir, fechar e gerenciar o modal. Tudo para tornar a integração de modais suave e menos complicada.

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



#2 - useWindowResize - Dimensões Dinâmicas da Tela:
Com o useWindowResize, tenho acesso fácil às dimensões da tela do meu cliente. É como ter um guia para ajustar dinamicamente o layout conforme a tela muda. Isso faz maravilhas pela usabilidade e responsividade do meu aplicativo.

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



#3 - useSearchSelect - Facilitando Buscas em Tempo Real:
Quando lido com formulários que demandam opções em tempo real, o useSearchSelect é meu parceiro. Ele cuida da pesquisa, loading e dos dados retornados. Além disso, posso explorar conceitos como debouncing ou deferred conforme a vibe do meu aplicativo.

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


#4 - useGenericContext - Contextos sem Complicações:
Com o useGenericContext, minha vida com contextos e TypeScript ficou muito mais tranquila. Ele age como um guardião, certificando-se de que meu contexto está definido corretamente. Dessa forma, não preciso ficar validando a cada vez que uso o contexto - é uma mão na roda para um código mais limpo.

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

#5 - useFetch - Gerenciando Requisições sem Estresse:
Para lidar com requisições HTTP e seus estados, o useFetch é imbatível. Ele é meu go-to para tratar loading, error e data. Simples, direto ao ponto, e faz maravilhas para manter meu aplicativo fluindo, mesmo quando lida com operações de rede.

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

_Obs: Cada modelo foi feito baseado em necessidades de projetos e compatibilidade com a biblioteca Antd, alguns foram feitos apenas para demonstração possuindo mais itens em versões que eu uso, lembre-se sempre de adaptar seus hooks á suas necessidades._
Understanding TypeScript Primitive Types: Exploring Explicit and Implicit Typing
Tags: typescript, programming, beginners, webdev
Published: 2023-11-29 01:23:35

TypeScript, a superset of JavaScript, introduces static typing to the dynamically-typed world of JavaScript. This empowers developers to catch potential bugs during development and enhances code readability. In TypeScript, variables can be explicitly or implicitly typed, and the language supports various primitive types. Let's delve into each primitive type, explore examples, and understand the distinction between explicit and implicit typing.

## Primitive Types in TypeScript
**1. Number:**
The `number` type represents both integer and floating-point numbers.
```
let count: number = 42;
let pi: number = 3.14;
```

**2. String:**
The `String` type is used for textual data.
```
let message: string = "Hello, TypeScript!";
```

**3. Boolean:**
The `boolean` type represents true or false values.
```
let isCompleted: boolean = false;
```

**4. Null and Undefined:**
TypeScript has null and undefined as separate types.
```
let data: null = null;
let info: undefined = undefined;
```

**5. Objects:**
The `object` type is a broad category encompassing non-primitive values.
```
let user: object = { name: "John", age: 25 };
```

**6. Arrays:**
Arrays can be typed using the `type[]` syntax.
```
let numbers: number[] = [1, 2, 3, 4];
let fruits: string[] = ["apple", "banana", "orange"];
```

**7. Tuple:**
Tuples allow the declaration of arrays where the type of a fixed number of elements is known.
```
let person: [string, number] = ["John", 25];
```

**8. Enum:**
Enums are a way of giving more friendly names to sets of numeric values.
```
enum Color {
    Red,
    Green,
    Blue
}
let myColor: Color = Color.Green;
```

#**Explicit Typing:**
Explicit typing involves declaring the type of a variable during its initialization.
```
let age: number = 25;
let username: string = "JohnDoe";
let isActive: boolean = true;
```
Explicit typing offers clarity and helps catch errors during development. However, it requires more keystrokes and can be redundant in simple cases.

#**Implicit Typing:**
Implicit typing, also known as type inference, allows TypeScript to deduce the type based on the value assigned.
```
let age = 25;           // TypeScript infers 'number'
let username = "John";  // TypeScript infers 'string'
let isActive = true;     // TypeScript infers 'boolean'
```
Implicit typing reduces verbosity, making code more concise. However, it may lead to less clarity, especially in larger codebases.

#**Conclusion**
Understanding primitive types in TypeScript and when to use explicit or implicit typing is crucial for writing robust and maintainable code. Explicit typing provides clarity and catches errors early, while implicit typing promotes concise code. Striking the right balance depends on the context and developer preferences. By leveraging the strengths of both approaches, developers can harness the full power of TypeScript in their projects.
Uninstall docker that was install with Ubuntu software
Tags: ubuntu, docker, webdev, linux
Published: 2023-11-29 01:21:38

If you install docker using the Ubuntu Software on the 22.04 version, when you try to uninstall docker, sometimes is not easy way to do it.

After a will I found how to do it.

1. This will display a list of ongoing operations with their respective IDs:
`snap changes`

2. Find the ID of the operation you want to stop.
3. Stop the operation using the snap abort command followed by the operation ID:
`sudo snap abort 19`

4. Stop the snapd service to ensure the changes are applied correctly. You can do it with the following commands:
  `sudo systemctl stop snapd`

5. Uninstall Docker more forcefully using the following command:
  `sudo snap remove --purge docker`

6. Start the snapd server: 
`sudo systemctl start snapd`


Happy coding  :sunglasses:!!!
Transolution
Published: 2023-11-29 00:54:43

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<p style="font-family:'-apple-system','system-ui','BlinkMacSystemFont',"Helvetica Neue","Segoe UI",'Roboto','Arial','sans-serif'">
</head>
<body>
  <header>
    Transolution - Translation Services
    Professional Translation Services
  </header></p>
  <section>
    <h2>About Me</h2>
    <p>
      Welcome to my website! I am a professional translator offering high-quality translation services. With expertise in English, French, and Korean. I ensure accurate and culturally sensitive translations for various industries.
    </p>
  </section>

  <section>
    <h2>Services</h2>
    <p>
      I provide translation services for documents, websites, and more. Whether you need business, legal, or technical translations, I am here to help you bridge the language gap.
    </p>
  </section>

  <section>
    <h2>Contact</h2>
    <p>
      For inquiries or to discuss your translation needs, feel free to reach out to me at <a href="yvnh@icloud.com">[yvnh@icloud.com]</a>. I look forward to assisting you!
    </p>
  </section>

  <footer>
    <p>&copy; 2023 Transolution - Translation Services</p>
  </footer>
</body>
</html>
阿里反复宕机和滴滴宕机，难道他们没有引入”捣乱猴“？
Published: 2023-11-29 00:49:38

- 1、阿里，他是傻逼，宕机合理的，企业价值观烂了：不是为创造加值而做事，而是为了快速抢占市场、快速捞钱而做事
- 2、滴滴，经常使用滴滴，目前我还没有发现其价值观腐烂的地方；

---
**从工程管理的角度来讲，两家大型企业难道没有在自己庞大的系统中引入”捣乱猴子（Chaos Monkey）“嘛？**

- 这个管理思想**诞生**于2010年的Netflix，就是整除一套程序在自己的整个系统架构中捣乱，制造各种网络、服务器...故障，以此来提升自己系统架构的鲁棒性；
抵抗各种可能得系统性风险；

- 并且”捣乱猴子（Chaos Monkey）“于2012年就已经被**开源**了，阿里与滴滴都是超大型企业，员工都聪明人，难道没有引入这套机制吗？；

- 基于”捣乱猴子（Chaos Monkey）“于2015年**诞生了”混沌工程“**原则；
Netflix将这种工程管理思想渗透到自己的每一个毛细血管，全方位的践行它；

---
- 不得不说**Netflix是一家伟大的企业**，是全人类的宝贵财富，为普通用户创造价值（影片）；为全世界的企业输出管理哲学价值；

- **企业文化对于世界的影响：**米哈游的企业文化就脱胎于netflix，看了《不拘一格》（netflix的企业文化），你大概就知道米哈游是什么企业文化了，虽然你可能拿不到米哈游的企业文化手册；
  >基于这样的企业文化（老板的价值观，也就是企业的价值观），才能诞生米哈游创造的优秀产品；
个人价值观也深深的受其影响，影响我的思考方式和行为方式，对我来说也是极其的宝贵

- **”捣乱猴子（Chaos Monkey）“对于世界的影响：**能将其开源，并演化出”混沌工程“这种管理理念，无数企业从中受益



---
**关于”捣乱猴子（Chaos Monkey）“这种管理思想，其实并不特殊，其”父亲“历史悠久，也诞生了无数”同胞兄弟“**

1、**创新：**不想被革命，就不断地自我革命，自我颠覆；

2、**受苦：**不想吃苦，就不断自己主动的找苦吃，以此来避免被吃苦；

3、**自我批判：**不断地”否定“自己、轻度毁灭自己，才能塑造足够强大的自己，这是让自身这个封闭系统产生进化的必要手段；
  > 基于此，才有可能坦然面对瞬息万变的外界环境；


- 这是一种**非常重要的思想**，对于组织和个人都极其的重要；

- 要么你被自然选择，要么你在自身封闭系统内先创造自然选择的环境，以混沌来对抗混沌 ；

---
说到这里，我**多说一句**，我极其讨厌一句话：”大环境不好“，这是一种推卸责任的表现，是极其无能，懦弱的表现；无能就是无能，不要找理由；
MinIO Cloud Native SDS Solution
Tags: softwaredefinedstorage, objectstorage, cloudnativestorage, s3compatiblestorage
Published: 2023-11-29 00:43:35

## Introducing [MinIO](https://min.io/)
[MinIO](https://min.io/) is an open-source, high-performance object storage server that is designed for cloud-native environments. It is a high-performance, scalable, and reliable object storage solution that can be used to store and manage unstructured data, such as images, videos, and documents.

## Key Features of [MinIO](https://min.io/)
- **High-performance**: MinIO can handle millions of objects and petabytes of data with low latency and high throughput.
- **Scalable**: MinIO can be easily scaled horizontally to accommodate growing data volumes.
- **Reliable**: MinIO is built on a distributed architecture that provides high availability and data durability.
- **Cloud-native**: MinIO is designed to work with cloud-native platforms, such as Kubernetes and Docker.
- **S3-compatible**: MinIO is fully compatible with the Amazon S3 API, making it easy to integrate with existing S3 applications and tools.

## Use Cases for [MinIO](https://min.io/)
MinIO can be used for a variety of use cases, including:
- **AI and Machine Learning**: MinIO is well-suited for use in AI and machine learning applications where large datasets need to be stored and processed.
- **Primary storage for cloud-native applications**: MinIO can be used as the primary storage for cloud-native applications, such as web applications, microservices, and serverless applications.
- **Object storage for data lakes**: MinIO can be used to store and manage unstructured data for data lakes.
- **Content delivery network (CDN) backends**: MinIO can be used as a backend for CDNs, providing a scalable and reliable way to cache and deliver content.
- **Archiving and backup**: MinIO can be used to archive and backup data from other storage systems.

## Benefits of Using [MinIO](https://min.io/)
There are many benefits to using MinIO, including:
- **Reduced costs**: MinIO is an open-source solution, so there are no license fees to pay.
- **Ease of deployment**: MinIO can be easily deployed on-premises or in the cloud.
- **Flexibility**: Minio can be used with a variety of storage backends, such as disks, object storage, and cloud storage.
- **Security**: Minio supports a variety of security features, such as encryption, access control, and auditing.

## Conclusion
Overall, MinIO is a powerful and versatile object storage solution that is well-suited for cloud-native environments. It is a high-performance, scalable, and reliable solution that can be used for a variety of use cases. If you are looking for an open-source, cloud-native object storage solution, then I recommend that you consider MinIO.
Clean and responsive portfolio website powered by React
Tags: portfoliopage
Published: 2023-12-06 09:12:49

---
title: Clean and responsive portfolio website powered by React
published: true
date: 2023-11-29 00:38:00 UTC
tags: PortfolioPage
canonical_url: https://reactjsexample.com/clean-and-responsive-portfolio-website-powered-by-react/
---

# Portfolio – Hafiz Kadir 🤟🏻 

# Portfolio – Hafiz Kadir 🤟🏻 
 ![Clean and responsive portfolio website powered by React](https://reactjsexample.com/content/images/2023/11/Code_2023-11_21-33-39.jpg)

This Personal Portfolio is a dynamic and interactive portfolio website built with React and Redux in the Front-End. It provides a modern and visually appealing platform for showcasing your skills, projects, and achievements to potential employers or clients.

## 🛠 Built With 

### Tech Stack 
#Client
- [React.js](https://reactjs.org/)

### App Screenshot

![Clean and responsive portfolio website powered by React](https://github.com/itsFiz/react-portfolio/raw/master/reactportfolio.png?raw=true)

## 💻 Getting Started 

To get a local copy up and running, follow these steps.

### Prerequisites

In order to run this project you need:

- A web browser like Google Chrome.
- A code editor like Visual Studio Code with Git and Node.js.

You can check if Git is installed by running the following command in the terminal.

```
$ git --version

```

Likewise for Node.js and npm for package installation.

```
$ node --version && npm --version

```

### Setup

Clone this repository using the GitHub link provided below.

### Install

In the terminal, go to your file directory and run this command.

```
$ git clone https://github.com/itsFiz/react-portfolio.git

```

### Usage

Kindly modify the files as needed.

In the project directory, you can run:

```
$ npm start

```

Runs the app in the development mode. Open [http://localhost:3000](http://localhost:3000) to view it in your browser.

The page will reload when you make changes.

You may also see any lint errors in the console.

## 👥 Authors 

👤 **Hafiz Kadir**

- GitHub: [@itsFiz](https://github.com/PrantoshB)
- Twitter: [@criedfizcken](https://twitter.com/criedfizcken)
- LinkedIn: [Hafiz Kadir](https://www.linkedin.com/in/hfzkdr/)
- Youtube: [Hafiz Kadir](https://www.youtube.com/@criedfizcken6200)

## 🤝 Contributing 

Contributions, issues, and feature requests are welcome!

Feel free to check the [issues page](https://github.com/itsFiz/react-portfolio/issues).

## 📝 License 

This project is copyright free. But I’ll be grateful if you consider mentioning me.

## GitHub

[View Github](https://github.com/itsFiz/react-portfolio?ref=reactjsexample.com)