teleren/devto huggingface dataset:
React Tailwind Portfolio
Tags: react, tailwindcss, webdev, portfolio
Published: 2022-05-27 09:25:20

A simple responsive portfolio website with `dark mode` feature.

**Live Preview:https://react-tailwind-portfolio.surge.sh/**

**Watch on Youtube: [https://youtu.be/QTY2fLpQn44][yt-video]**

**Made with ❤️ by [Shaif Arfan][arfan-ig]**

---
{% youtube QTY2fLpQn44  %}
---

Technologies used:

- [React](https://reactjs.org/)
- [Tailwind CSS](https://tailwindcss.com/)
- [Vite.JS](https://vitejs.org/)

## Other projects

📚 [All Web Cifar Projects][wc-projects]

## FAQ

### Q: How can i get started?

You can get started by following the YouTube tutorial of this project. Here is the full tutorial video link: [YouTube Video][yt-video].

### Q: I can use this project for my website?

Yes you can. It absolutely free to use. If you want to support the project, you can [buy me a coffee][buymeacoffee].

## Feedback

If you have any feedback, please reach out to us at [@web_cifar][wc-tw]

## Support

For support, join our [Community Group][wc-fb-group].

## License

[MIT][mit]

Happy Coding! ✨🚀

[wc-tw]: http://twitter.com/webcifar
[wc-yt]: http://www.youtube.com/webcifarOfficial
[arfan-ig]: https://www.instagram.com/shaifarfan08/
[wc-projects]: https://github.com/ShaifArfan/wc-project-tutorials
[wc-fb-group]: https://www.facebook.com/groups/webcifar
[mit]: https://choosealicense.com/licenses/mit/
[yt-video]: https://youtu.be/QTY2fLpQn44
[buymeacoffee]: https://www.buymeacoffee.com/shaifarfan08
How my Tech journey started with SQL
Tags: beginners, sql, database, postgres
Published: 2022-05-27 09:21:10

**Step 1.**
I launched PG admin and Valentina Studio from my desktop

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

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

**Step 2.**
I launched the command prompt app (CMD) from windows

**Step 3.**
Locate the database then copy out the address or path

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

**Step 4.**
Paste on the command prompt

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

**Step 5.**
Create the respective databases on Valentina studio
1. Employees
2. France
3. Store
4. World

**Step 6.** 
Steps to creating the databases on Valentina Studio
Valentina is a multi data management tool that helps to create, administer, query and explore database. It works on different Data Base Management System (DBMS)
- On the Valentino studio, connect the Valentina studio to the ProgreSQL 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yfquio06kddgpx9w3b5e.png)
- After connecting, enter the PostgreSQL PW
- Then title the databases accordingly (Employees)
- Repeat same for France, Store and World databases

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

**Step 7.**

- I launched the root folder on the command prompt
C:\Users\JohnsonAdesanya\Downloads\databases
- Then i changed directory (cd) to the employee folder
C:\Users\JohnsonAdesanya\Downloads\databases>cd employee

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

Step 8.
C:\Users\JohnsonAdesanya\Downloads\databases\employee>"C:\Program Files\PostgreSQL\14\bin.psql.exe" -U postgres -d Employees < employees.sql
'"C:\Program Files\PostgreSQL\14\bin.psql.exe"' is not recognized as an internal or external command,
operable program or batch file.

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

C:\Users\JohnsonAdesanya\Downloads\databases\employee>"C:\Program Files\PostgreSQL\14\bin\psql.exe" -U postgres -d Employees < employees.sql
Password for user postgres:

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


**Step 9**
To query your database, you click on the sql employee beside the Schema editor on the Valentina Studio platform using SQL syntanx as required 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xg7h4p866akwx5w42wo0.png)
What people think that web developers do vs. what we really do
Tags: humour, sadbuttrue, chart, development
Published: 2022-05-27 09:06:57

---
title: What people think that web developers do vs. what we really do
published: true
description: Learning to code isn't the main skill you need as a developer
tags: humour, sadbuttrue, chart, development
//cover_image: https://direct_url_to_image.jpg
---

## What people think web developers do:

![Chart showing what people think web developers do](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k7fa0rffg1ap5idd21e0.PNG)

* Code, deploy and use, with coding being the main task

## What web developers really do:

![Chart showing the real tasks](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/au6lkvuk2ycvif87d1qt.PNG)

* Coding
* Require random 3rd party framework code
* Updating Node/NPM
* Try the last command again with `sudo`
* Checking on mobile
* Shaking fist towards Cupertino
* Looking things up on the web
* Pasting Stack Overflow solutions
* Resize the browser/use emulation
* Discover that a browser extension was the problem all along
* Explain again that things can't look the same everywhere
* Add ARIA till everything is fine
* Trace performance issues back to analytics/ad code
* Convert content to usable formats
* Adding/Removing console.log()
* Invalidate caches
* Using
* Summon Imhotep using blood magic to help with a rendering bug
Ionic 4 angular router + NavigationExtras interface
Tags: ionic, angular, webdev, tutorial
Published: 2022-05-27 08:52:27

**Example to pass data between components in Ionic 4/angular:**
_using NavigationExtras interface_

Especially when passing data in dialogs there is often no parent/child-relation ship. So you can't pass data in angular way (parent -> child). In Ionic 4/angular you have this feature to pass data comfortable within the router by the interface _NavigationExtras_.

_page1 pass data to page2_

**page1.ts**

```
import {NavigationExtras, Router} from '@angular/router';
import {Component} from '@angular/core';

@Component({
    selector: 'page1',
    templateUrl: 'page1.html',
    styleUrls: ['page1.scss'],
})
export class Page1 {
    public data: string;
    public value: string;

    constructor(private router: Router) {
    }
    // route page2 and set params in NavigationExtras
    public routePage2() {
        const navigationExtras: NavigationExtras = {
            state: {
                data: this.data,
                value: this.value
            }
        };
        this.router.navigate(['/page2'], navigationExtras);
    }
}

```
________________

**page2.ts**

```
import {ActivatedRoute, Router} from '@angular/router';
import {Component} from '@angular/core';
@Component({
    selector: 'page2',
    templateUrl: 'page2.html',
    styleUrls: ['page2.scss'],
})
export class Page2 {
    public data: string;
    public value: string;

    constructor(private route: ActivatedRoute, private router: Router) {
        this.route.queryParams.subscribe(params => {
            if (this.router.getCurrentNavigation().extras.state) {
                this.data = this.router.getCurrentNavigation().extras.state.data;
                this.value = this.router.getCurrentNavigation().extras.state.value;
            }
        });
    }
}
```

**refer to:** point 4
https://ngrefs.com/router/navigationextras
https://angular.io/api/router/NavigationExtras
Mua máy hút chân không ở đâu giá tốt nhất
Published: 2022-05-27 08:41:20

Bạn đang có nhu cầu mua máy hút chân không, tuy nhiên không biết nên mua máy hút chân không ở đâu để có giá tốt nhất đồng thời vẫn đảm bảo về chất lượng. 

Nếu như bạn đang tìm địa chỉ mua máy hút chân không giá tốt nhất, hãy đến ngay với VITEKO. Với nhiều năm kinh nghiệm cùng với đội ngũ kỹ thuật chuyên môn cao bạn hoàn toàn yên tâm về giá thành cũng như chất lượng của máy hút chân không tại đây.
Tìm hiểu thêm: [Giá máy hút chân không](https://dienmayviteko.com/may-hut-chan-khong#:~:text=B%E1%BA%A3ng%20gi%C3%A1%20m%C3%A1y,28.990.000%20%C4%91)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uh5b27efjq5lhskwz8mg.jpg)
**Tại sao bạn nên mua máy hút chân không tại VITEKO**

- Nhiều mẫu mã, chủng loại, dễ dàng chọn mẫu máy hút chân không phù hợp nhất với nhu cầu
- Máy mới 100%, mọi sản phẩm đều được kiểm tra kỹ lưỡng trước khi xuất xưởng.
- Yêu cầu cao về chất lượng của các sản phẩm máy hút chân không, chạy ổn định, bền bỉ, không lỗi vặt.
- Nhân viên tư vấn giàu kinh nghiệm, hỗ trợ chính xác, tránh trường hợp mua nhưng không ưng ý.
- Khách hàng có thể xem máy hút chân không, thử máy trước khi mua hàng. Hỗ trợ giao hàng cho khách ở xa, được kiểm máy trước khi thanh toán.
- Chế độ bảo hành dài, luôn từ 12 tháng trở lên.
- Có sẵn mọi linh kiện tiêu hao, linh kiện sửa chữa thay thế.
- Bảo trì trọn đời máy, lỗi 1 đổi 1 trong vòng 30 ngày ( lỗi nhà sản xuất như bảng mạch, động cơ ).
- Giá tốt nhất.
Nếu bạn đang cần tìm một địa chỉ mua máy hút chân không giá tốt, uy tín, đăng ký ngay với VITEKO để được tư vấn. Đảm bảo những gì bạn nhận được sẽ không làm bạn thất vọng.
Xem thêm: [Các lĩnh vực ứng dụng máy hút chân không công nghiệp phổ biến nhất hiện nay](https://www.zotero.org/mayepchankhongthucpham/cv)
Day-1 of learning Cyber Security
Published: 2022-05-27 08:30:29

## Linux for beginners
- Introduction to Linux 

- basic commands 

- package management 

- Network configuration

- File permissions

- Log management  

- DNS configuration 

_A very beginner friendly resource_ 
https://linuxjourney.com
_A website to explain commands and working process_
https://explainshell.com
PostgreSQL: An example of using WITH clauses to decompose the problem
Tags: yugabytedb, postgres, sql, cte
Published: 2022-05-27 08:26:16

Here is a simple example using WITH clauses (aka CTE - Common Table Expressions) to decompose a problem. A question from the YugabyteDB forum was about storing hotel room bookings in a table like:
```sql

create table Rooms (PK int primary key, name text, roomNo int);

create table BookedRooms (PK int primary key
, checkInDate timestamptz, checkOutDate timestamptz
, roomId int references Rooms(PK))
;

insert into Rooms values (2,'Deluxe',102),(3,'King',103);
insert into BookedRooms values (1,'2022-05-26T00:00:00Z','2022-05-29T00:00:00Z',2),(2,'2022-05-29T00:00:00Z','2022-05-30T00:00:00Z',3);
```

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

My suggestion was the following query:
```sql
with 
input_month as (
 select 4 as month --> the input months (can be a parameter in a prepared statement)
),
day_generator as (
select 
 date_trunc('year', now())      --> I guess you query for the current year
 + m.month * interval '1 month' --> first day of the month
 + n * interval '1 day'         --> adding 31 days to cover any month
 as day
 from input_month m , generate_series(0,31) n
),
days_of_month as (
select *
from input_month m, day_generator d
 where d.day <                  --> removes the days in next month
 date_trunc('year', now())  + (m.month + 1) * interval '1 month' 
),
result as (
select distinct d.day, r.roomNo 
from days_of_month d, BookedRooms b join Rooms r on (b.roomId=r.PK)
where not(d.day between b.checkInDate and b.checkOutDate) --> remove non available rooms
order by day, roomno
) 
select * from result

```

I start by defining the input parameters as `input_month`. It can be passed as parameter, but I find it more readable to have it at only one place, in the start of the query, rather than referenceing `$1`in multiple places

Then I need to generate all days for a month and I do it in two steps. `day_geneator` generates the maximum (31 days a months) starting from the `input_month`. And `days_of_month` filters to get only the days of the mons (for months with less than 31 days).

Finally, with all that, the query is a cartesian join between the dates and the bookings, filtering on the date interval to show only those available. I've added a DISTINCT in case there are overlaps, but this should not happen and should be checked with constraints. This may be a topic for a next blog post.

I put the final query in `result` so that the main select is the simplest one, this makes it easy to debug by selecting each step.

I find many advantages in decomposing into CTE:
- easier to read and comment each step
- easier to process by the query planner (possibility to materialize or not each query block)
- easier to test, just by changing the final select
Do not fear large SQL queries as long as they are well designed. You can think of it like piping Linux commands one after the other to resolve a problem with small steps.
Now I'm here - 5 years badge on dev.to. Where were you 5 years ago ? :)
Tags: discuss
Published: 2022-05-27 07:59:35

---
title: Now I'm here - 5 years badge on dev.to. Where were you 5 years ago ? :)
published: true
description: History in the making!
tags: discussion
cover_image: https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fd2cdo4blch85n8.cloudfront.net%2Fwp-content%2Fuploads%2F2020%2F11%2FDelorean-Time-Machine-Rental-Company-image-1-1024x683.jpg&f=1&nofb=1
---

# What were you doing 5 years ago?

I recently got a notification about my 5 years on dev.to. It hit me really hard, as I was not active here once I switched careers from scientist to software engineer. 

Back then, dev.to was a startup, I was amidst going from being a Technology Wizard at a high tech perovskite solar cell technology company [towards my own startup, which is kinda in zombie state now - we did invent smart functional materials that can be used for a Black Panther suit, amongst other things](https://drive.google.com/file/d/1u0FPsoW_9E9BPXbQvPTBJxMLhmf7x7Ei/view?usp=sharing). 

Some year later, I was freelancing and looking for a job. 3 and a half years ago, landed my current job. __Now - I'm here.__

Whats your story?
ar
Published: 2022-05-27 07:55:42

**References**
[Spark AR Tutorial - Create Buildings](https://youtu.be/_3WRxVDS0PM)
[Spark AR Tutorial - Create your showroom](https://youtu.be/iBB0gDjY8wY)
[Building Tools Add-on](https://ranjian0.github.io/building_tools/)

## Blender
**Build the Room**
hotkey： N -> tool bar -> building tools
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4qm14cnrgpclvoom4g2b.png)

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

**Export the Room**
hotkey： N -> tool bar -> spark ar toolkit
sp

## Spark AR
add plane
add new material
new material -> new animation sequence
new animation sequence -> new texture
sprite image
set row/column/sprite number

Tools
[Video to GIF](https://ezgif.com/video-to-gif)
[GIF to sprite](https://ezgif.com/gif-to-sprite/)
[Compress JPG/PNG](https://tinypng.com/)
OctoChats - May 2022
Tags: devops, octopusdeploy
Published: 2022-05-27 07:49:08

Folks we are back with our monthly show [OctoChats](https://youtube.com/playlist?list=PLAGskdGvlaw3M-BGbgR8Hw268pprQm_vt)! 

OctoChat is a monthly show created by the Community Team from Octopus Deploy. We share Octopus news, community news and industry news during each show and we hope to be able to interact and chat to the community as well. 

Join us online on [YouTube](https://youtu.be/cvVx_dGbmsQ) (Live at 2pm UK time) or catch the replay below.

{% youtube A5OZ3nqkX-A %}
New .NET 6 Project
Tags: dotnet
Published: 2022-05-27 07:38:14

Work in progress...

This guide helps you setup a new .NET 6 project using PostgreSQL as a database.

## Scaffold a project

```
dotnet new webapi -o myapp
cd myapp
dotnet new gitignore
```

## Configure an existing project using SQL Server to PostgreSQL

This scenario assumes that you used EntityFramework and have existing models and configuration for SQL Server.

### Setup Entity Framework and PostgreSQL libraries

```
dotnet add package Npgsql
dotnet add package Npgsql.EntityFrameworkCore.PostgreSQL
dotnet add package Microsoft.EntityFrameworkCore
dotnet add package Microsoft.EntityFrameworkCore.Design
```

In `appsettings.json` add a connection string for PostgreSQL.

```
"ConnectionStrings": {
    "DefaultConnection": "you_can_retain_existing_connection",
    "PgConnection": "Host=localhost;Database=mydb;Username=myuser;Password=mypassword"
  }
```

In `Program.cs` setup the DbContext

```
var connectionString = builder.Configuration.GetConnectionString("PgConnection");
builder.Services.AddDbContext<MYDB>(opt => opt.UseNpgsql(connectionString));
```

### Run the migrations

```
dotnet ef migrations add InitialCreate
dotnet ef database update
```

## Create Models

:WIP: <how to create a model>

## Reverse Engineering an Existing Database

This scenario is when you have an existing database structure. You can generate the Models automatically by running one of the following scaffolding commands. The --output-dir parameter sets the location of the generated files. If you don't specify this parameter, it will create the files in the root folder.

https://docs.microsoft.com/en-us/ef/core/managing-schemas/scaffolding?tabs=dotnet-core-cli

```
-- SQL Server source
dotnet ef dbcontext scaffold "Data Source=(localdb)\MSSQLLocalDB;Initial Catalog=Chinook" Microsoft.EntityFrameworkCore.SqlServer" --output-dir Models

-- PostgreSQL source
dotnet ef dbcontext scaffold "Host=my_host;Database=my_db;Username=my_user;Password=my_pw" Npgsql.EntityFrameworkCore.PostgreSQL --output-dir Models
```
Common Mistakes to Avoid When Starting a SideProject
Tags: sideprojects, productivity
Published: 2022-05-27 07:36:52

Time estimation in software engineering seems to be the most difficult task.

Time estimation becomes a bit easier for well-managed projects where most of the design decisions have been made and there is enough internal tooling and resources. But it is still not perfect. Things become more difficult for teams with limited resources and external pressure on deadlines. More often than not, the projects get delivered, some more polished than others.

When it comes to time estimation, solo developers working on their side projects face a real challenge. It becomes worse if there is no external motivation or revenue potential for the project. Building something for fun or learning might end up in an unfinished project that never sees a launch day.
Although launching a side project is not necessary, it does help in closure and moving on to the next big thing. If you do want to finish your next side project and cannot find the time or motivation, try avoiding these pitfalls.

### Too Many Features

Side projects should be straightforward by design. If it has dozens of trivial and non-trivial features, it is on its way to becoming a startup. Think about the reason you are building your project. If it is for fun, then pick the top three to five features to include in the first version and move ahead.

### No Delegation

Think of yourself as a resource even when you are working alone. Ask yourself how much you can deliver while working a few hours a week and assign achievable tasks to yourself. Don't forget to look for tools and services outside of your site that you can use to handle some of the work.

### No Deadline

Set a soft and hard deadline for yourself once you have a clear idea of what you are trying to build. Give yourself enough buffer to catch up.

### Unnecessary Marketing

Don’t fall into the trap of doing irrelevant market research and user surveys before coding. As a developer, your strength lies in development. Creating a production-ready product would be easier to market than a landing page.

### Busy Work

Too much planning will ruin the flow and give you a false sense of accomplishment. Don’t create an extensive task list and roadmap before you start coding. Once you have your first few features finalized and an estimation of how much time it will take, start working on your project. You can always revise the estimate and drop or add another feature along the way.

### Burden of Launch Day

Don’t worry too much about the launch. You don’t have to showcase your launch and post links everywhere. Keep it simple and ensure that your project ends up on an accessible platform. You can share the links to your project later.

In conclusion, if you are a developer working on a side project for fun or learning purposes, Then it's better to jump ahead and target finishing the project and avoid these pitfalls.
Teamwork
Tags: team, people, improvement
Published: 2022-05-27 07:32:11

There are people that think that developing is a standalone job and every developer should figure out everything on their own. But, from my point of view, these people miss an important part of a developer’s job: teamwork. In fact, when you experience real and inclusive teamwork what you learn is that teamwork is made up of continuous debating that leads to learning a lot from each other every day.

Besides, there are many other aspects we should consider and learn when we come to teamwork:

First, succeeding to be kind is always a good achievement and it’s not easy at all, but human relationships are very important inside teams and the price to pay for a rude contact is to ruin such kinds of relationships. Besides, there are people that say that speaking the truth can ruin relationships, but this is not totally correct. The fact is that it depends on the way you say the truth. Many times, what we lack is the ability to speak and truth (a to be assertive) in a clear and respectful way. Instead often when we come to speak the truth we became nervous and so we appear unrespectful. This is an important skill that should be learned.

Second (but related to the first point), the ability to succeed inside a team lies in the ability to build strong and deep connections and relationships. And in order to reach such a goal, we need to communicate. Speaking could be a good means to communicate but it’s not the only one. What we really need in order to communicate (even though it could seem unrelated) is a sincere desire to contribute to the general wellness of the person, company, community, or institution we want to connect with. And in order to achieve such a goal we need to engage in a personal development path.

At last but not least, surely teams where we land are not perfect, surely they could have a lot of flames but we should think we’re not helpless. We can give a great contribution to improving the team. I know, it’s not easy but what a team needs is dreamers and people with purpose, and if you are one of them even though you could encounter a lot of issues (they could be fixed with patience, humility, and kindness) you will succeed. On the rest, every single step, even if the smallest, is however a step towards improvement.

However, we should keep in mind, that if the team doesn’t fit with us, we could leave and find another team that better fits with us. We should have always cleared our purpose and checked them against the team’s purpose but this doesn’t mean we shouldn’t give our contribution to the team we are now.

Teams are made of people, and people are, in the last instance, what we should care about.