teleren/devto huggingface dataset:
(SHOWCASE) Build an Amazon Clone with SvelteKit, Svelte, and Tailwind CSS
Tags: sveltekit, svelte, tailwindcss, amazonclone
Published: 2023-05-29 14:46:13

# (SHOWCASE) Build an Amazon Clone with SvelteKit, Svelte, and Tailwind CSS

# Source Code: https://rebrand.ly/amazon_svelte

[![Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/70zrgtovwzbgjskkfvsa.jpg)](https://amazon-svelte.vercel.app/)

Check out the live demo of this impressive Amazon clone built using SvelteKit, Svelte, and Tailwind CSS: [Live Demo](https://amazon-svelte.vercel.app/)

## Experience the Power of SvelteKit, Svelte, and Tailwind CSS

Are you ready to explore the potential of SvelteKit and build an Amazon-like e-commerce website? Look no further! This comprehensive tutorial showcases the key features and techniques behind this amazing project.

### Requirements and Customization

To ensure easy setup and customization, this project utilizes SvelteKit, Svelte, Tailwind CSS, and ShopAPI. You'll be amazed at how simple it is to modify this clone without touching the core code.

Just open the file `src/assets/details.js` and customize it according to your specific needs. Update the API URL, image URLs, site logo, and more with ease.

## Key Features of the Amazon Clone

1. Seamless Product Display: Experience a sleek and intuitive product listing that replicates the Amazon browsing experience.

2. Easy Cart Management: Add products to your cart effortlessly and enjoy a smooth checkout process.

3. Personalized Experience: Sign in to access your cart and keep track of your orders. Get a glimpse of the total price before making a purchase.

## Directory Structure

```plaintext
├── jsconfig.json
├── package.json
├── package-lock.json
├── postcss.config.cjs
├── README.md
├── sda.js
├── src
│   ├── app.css
│   ├── app.html
│   ├── assets
│   │   ├── cartHelper.js
│   │   ├── details.js
│   │   ├── firebaseImport.js
│   │   ├── req.js
│   │   └── router.js
│   ├── firebase
│   │   ├── auth.js
│   │   └── config.js
│   ├── global.d.ts
│   ├── hooks.js
│   ├── lib
│   │   ├── Body
│   │   │   ├── CarousalItem.svelte
│   │   │   ├── CheckoutProduct.svelte
│   │   │   ├── Currency.svelte
│   │   │   ├── ProductFeed.svelte
│   │   │   ├── Product.svelte
│   │   │   └── Stars.svelte
│   │   └── Header
│   │       ├── bottomnav.svelte
│   │       ├── index.svelte
│   │       └── login.svelte
│   ├── routes
│   │   ├── checkout.svelte
│   │   ├── index.svelte
│   │   └── __layout.svelte
│   └── store
│       ├── basket.store.js
│       └── user.store.js
├── static
│   ├── favicon.svg
│   └── robots.txt
├── svelte.config.js
└── tailwind.config.cjs
มือใหม่หัด Go: Docker Multi-stage Builds
Tags: go, docker, cloud
Published: 2023-05-29 14:29:21

สวัสดีชาว Gopher ทุกท่าน ในปัจจุบันการใช้ Container สำหรับพัฒนาแอปอย่าง Docker เป็นที่นิยมอย่างมาก เนื่องจากช่วยในการจัดการ environment และ library ให้เหมือนกันได้ไม่ว่าจะอยู่ที่ไหนก็ตาม

อย่างไรก็ดี ปัญหาการ "บวม" (Docker image bloating) หรือก็คือ image มีขนาดใหญ่เกินความจำเป็นนั้น สามารถเกิดขึ้นได้ถ้าไม่จัดการให้ดี ทางออกอื่นๆ ที่ช่วยได้ เช่น
- ใช้ `dockerignore` เพื่อไม่ให้เพิ่มไฟล์ที่ไม่ต้องการ
- เลือกใช้ distroless/minimal base image เพื่อลดขนาดให้ได้มากที่สุด

ต้องเข้าใจว่าส่วนที่ใช้ทำในตอน build แอปพลิเคชันนั้น พอเสร็จแล้วมักจะไม่ถูกนำมาใช้ต่อตอนที่แอปกำลังรัน ถ้าเรานำทั้งหมดมาใช้ก็จะทำให้บวมได้ ในบทความนี้จะนำเสนออีกวิธีที่จะแยกส่วนที่เป็น build tool ออก ให้เหลือเฉพาะส่วนที่จำเป็นต่อการรันแอปนั่นเอง เรียกว่า *Multi-stage builds*

## Docker : Multi-Stage Builds
Multi-stage builds จะช่วยลดขนาดของ container ให้เล็กลงได้ ด้วยการแตกขั้นตอนออกเป็นหลายๆ stage ย่อย แต่ละ stage จะส่งผลลัพธ์ต่อไปยัง stage ถัดไป

## Demo
เราสามารถใช้แอปนี้ [GitHub](https://github.com/nattrio/goimdb) เป็นตัวอย่างเบื้องต้นในทดสอบ

ในการเปรียบเทียบเพื่อให้เห็นภาพชัด จะทดสอบการ build ทั้งสองรูปแบบ

1. ใช้ Dockerfile ในการ build แบบปกติ

```dockerfile
FROM golang:1.18-alpine

WORKDIR /crud

COPY . .

RUN go mod download

EXPOSE 2565

RUN  go build -o /test main.go

CMD [ "/test" ]
```

2. ใช้ Dockerfile ในการทำ Multi-Stage build ซึ่งจะแบ่งเป็น 2 environment ที่แตกต่างกัน

```Dockerfile
# Build stage

FROM golang:1.18-alpine AS builder

WORKDIR /crud

COPY . .

RUN go mod download

EXPOSE 2565

RUN  go build -o /test main.go

# Deploy stage

FROM alpine:latest

WORKDIR /

COPY --from=builder /test /test

EXPOSE 2565

USER nonroot:nonroot

ENTRYPOINT [ "/test" ]
```

เมื่อ build เรียบร้อยทั้งสองรูปแบบ มาดูผลลัพธ์กันดีกว่า

![multi-stage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jyw09h6ct010g6c310hw.png)



จะเห็นว่าการใช้ Multi-stage builds ช่วยลดขนาดให้ image ของเราอย่างมหาศาลเทียบกับแบบปกติ จาก 430 MB เป็น 16 MB พอเล็กแล้วก็สามารถนำไปใช้ต่อได้ง่ายมากขึ้นนั่นเอง

หวังว่าบทความนี้จะเป็นประโยชน์กับ Gopher และผู้ใช้ Docker ทุกคนกันนะครับ

Reference:
[Optimizing Golang Docker images with multi-stage build | by Krishnadutt Panchagnula](https://medium.com/geekculture/optimizing-golang-docker-images-with-multi-stage-builds-ca7b305faa)
Three Sum Problem
Tags: javascript, dsa, interview
Published: 2023-05-29 14:08:14

## This is similar to that of the problem which I had posted earlier i.e two sum problem, please refer to the same understand about this problem.

Solution :

![ThreeSumProblem](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j8chvbvkqnnnf373z7rb.png)
I built the free and open source, privacy-first Google Analytics alternative
Tags: go, nextjs, react, showdev
Published: 2023-05-29 13:59:50

---
title: I built the free and open source, privacy-first Google Analytics alternative
published: true
description: Check out PoeticMetric Analytics! A free, open source, and privacy-focused website analytics tool. (Links inside, and please don't hesitate to share your feedback!)
tags: go, nextjs, react, showdev
---

Hey folks!

For about the last two years, I have been working on this. I have recently published it, so I want to share with you all, and ask for your feedback, too!

Some highlights you might find interesting are:

✊ It is 100% free and open source (AGPL).
✌️ It doesn't collect any personal data, so it is out-of-the-box compliant with data privacy regulations like GDPR, CCPA, PECR and KVKK.
🎯 It is simple analytics. It provides consolidated real-time reports on a single-page.
🪶 It has a very lightweight (< 1KB) script. It doesn't cause any harm on the website's performance.

You can see a demo of the reports page [here](https://www.poeticmetric.com/s?d=www.poeticmetric.com).

Even though you can see the stack yourself on the repository, here are some of the stuff I used building it:

* **Go** for backend,
* **Next.js** (TypeScript, Bootstrap) for frontend,
* **PostgreSQL** for the single source of truth database,
* **ClickHouse** for time series analytics data,
* and **RabbitMQ** as the task queue.

You can give it a go on [poeticmetric.com](https://www.poeticmetric.com?utm_source=dev.to&utm_term=showdev), and the check its full source code on https://github.com/th0th/poeticmetric. I also published ready-to-use Docker images for self-hosting ([guide here](https://www.poeticmetric.com/docs/open-source/self-hosting)).

I would love to what you think of it!

Cheers,
Share a strong typed object path package!
Published: 2023-05-29 13:49:17

I've used some packages related to object path before, but I found that the type support of these packages is not particularly comprehensive, such as lodash, react-hook-form, formik, mongodb client, etc.

There are more or less several problems with these packages:

- There is no type constraint, so code autocompletion cannot be provided;
- The generated path is not standardized. Most of them only support 'a.b.c'. This kind of path has some shortcomings, is not unified with other packages (such as yup), cannot distinguish between object/array, and most of them treat numbers as arrays, but they may actually be object with number keys;
- The corresponding type cannot be inferred from the path.

Because I had a high demand for object path when writing the open-source project react-happy-form, I wrote the package object-standard-path separately:
- Provides very comprehensive type support (including handling of some special types such as any, Map, etc.);
- Generates standard paths;
- Supports inferring types through paths.
It is also very easy to use, without any dependencies, and less than 1k in package size. If anyone needs it, you can try it :)

Repo address: https://github.com/react-earth/object-standard-path

If possible, you can give it a star. Every star is my motivation for continuous updates in the future. Thank you! 🌟

```typescript
import { Path, PathValue, pathGet, pathSet } from 'object-standard-path';

type Test = {
  value: string;
  array: {
    value: string;
  }[];
};

type TestPath = Path<Test>;
// result: "value" | "array" | `array[${number}]` | `array[${number}].value`

type TestPathValue = PathValue<Test, 'array[0]'>;
// result: { value: string }

const object = {
  array: [
    {
      value: 1,
    },
  ],
};

const result = pathGet(object, 'array[0].value');
// result: 1

pathSet(object, 'array[0].value', 2);
// result: { array: [{ value: 2 }] }
```
Strange things are bundled in react? (after build)
Tags: react, vite
Published: 2023-05-29 13:45:08

I've build an existing project & take a look a miggest chunk.
[index-5f674eff.js](https://drive.google.com/file/d/1XTJAjDEp5Y5JX-GG48aMtkCYk86HNqVe/view?usp=sharing)

_(Download the file & seach after opening it in code editor or you might not find it as google derive does't loads whole file at once)_

There I'm seeing huge amount of code that's looks like come from google (If search with `Google LLC`). Found 92 scripts from them.
Found 8 scripts from Facebook (Search with `(c) Facebook`), It makes sense that some first party package are from them but from where rest of the other came?

If anybody help me understand this I'll greatly appreciate this. I think something little bit wrong going on here.
The cost of building an ecommerce website
Tags: web, ecommerce, beginners, website
Published: 2023-05-29 13:36:40

Discover the hidden expenses that determine the fate of your online venture. Dive into our article on "The Cost of Building an Ecommerce Website" and unravel the secrets behind a successful online presence. From development to maintenance, we uncover the financial intricacies that can make or break your journey to digital prosperity. Get ready to make informed decisions and maximize your ROI in the competitive world of ecommerce.

Read the article on [Liki Blog](https://likims.com/blog/the-cost-of-building-an-ecommerce-website).
My Journey with Udacity's AI Programming with Python Nanodegree: From AWS DeepRacer to 1:1 Mentorship
Tags: ai, nanodegree, udacity, machinelearning
Published: 2023-05-29 13:27:05

**Introduction:**
Ah, the world of AI and Python! It's like a magical realm where algorithms come to life and machines start speaking our language. As a coding enthusiast, I couldn't resist the allure of the Udacity AI Programming with Python Nanodegree. And let me tell you, it has been quite the adventure! So, grab your favorite beverage, sit back, and join me on this exhilarating journey through the realms of Reinforcement Learning, Computer Vision, and more!

**Phase One: AWS Deep Racer - My First Encounter with Reinforcement Learning:**
Picture this: tiny racing cars zooming around a track, fueled not by petrol but by algorithms! Yes, my friends, AWS Deep Racer was my gateway drug to the world of Reinforcement Learning. I learned the fundamentals of Machine Learning while training my miniature speed demons to navigate the twists and turns of the digital racecourse. Let's just say, I may have developed an emotional attachment to those little virtual vehicles.

**Phase Two: Winter Cohort - Where Weather Meets Computer Vision:**
After surviving the exhilaration of Deep Racer, I found myself in the midst of the Winter Cohort, a vibrant community of 2000 students ready to conquer the world of AI. During this phase, I dove headfirst into the captivating world of Computer Vision. My mission? To train a pre-trained model to recognize different weather conditions based on images.

**Phase Three: Mentorship and the Road to Machine Learning Mastery:**
As luck would have it, I made the cut and found myself among the top 500 students selected for the third and final phase of the Nanodegree. This phase promises an invaluable 1:1 mentorship experience, where I'll be guided by an expert in the field of machine learning. I can already imagine the wealth of knowledge and insights awaiting me. Soon, I'll be swimming in a sea of neural networks, conquering complex algorithms, and unleashing the full potential of AI!

**Conclusion:**
My Udacity AI Programming with Python Nanodegree journey has been nothing short of extraordinary. From racing miniature cars to deciphering the weather through images, I've witnessed the power of AI in action. The road to machine learning mastery may be challenging, but with the support of Udacity, AWS, and the amazing cohort of fellow learners, I'm ready to embrace the next chapter. So, if you're contemplating an AI adventure, my friend, buckle up and get ready for the ride of a lifetime!

Stay curious, keep coding, and who knows, maybe you'll join me on this incredible journey into the realms of artificial intelligence!

Now, where did I leave my virtual racing helmet? It's time to get back on that Deep Racer track and race towards the future!
How to find non-numeric values in SQL Server
Tags: sql, database, datascience, development
Published: 2023-05-29 13:24:46


Have you ever encountered an error like this when trying to convert a varchar column to a numeric column in SQL Server?

> Error converting data type varchar to numeric

This error occurs when the varchar column contains some values that are not valid for the numeric data type, such as alphabets, symbols, spaces, commas, etc.

In this article, I will show you how to find these non-numeric values using some simple SQL queries.

## Finding non-numeric values
There are two main ways to find non-numeric values in a varchar column in SQL Server. One way is to use the ISNUMERIC() function, which returns 1 for numeric values and 0 for non-numeric values. Another way is to use the LIKE operator with a pattern that matches any character that is not a digit.

For example, suppose we have a table called Payments with a column called Amount that contains some varchar values. Some of them are numeric, some of them are not. Here is a sample of the data:

| Amount |
| ------ |
| 100.00 |
| 50.00  |
| 75.00  |
| 80     |
| 90.00  |
| AB     |
| ABCDE# |
| .ABC   |

**To find the non-numeric values using the ISNUMERIC() function, we can use this query:**

`Select Amount
from Payments
where ISNUMERIC(Amount) <> 1`

This will return the following rows:

| Amount |
| ------ |
| AB     |
| ABCDE# |
| .ABC   |

**To find the non-numeric values using the LIKE operator, we can use this query:**

`Select Amount
from Payments
where Amount like '%[^0-9]%'`

This will return the same rows as before:

| Amount |
| ------ |
| AB     |
| ABCDE# |
| .ABC   |

## Conclusion
In this article, I have shown you how to find non-numeric values in a varchar column in SQL Server using some simple SQL queries. I hope this helps you understand the cause of the error _Error converting data type varchar to numeric_ and prepare your data for conversion.

If you have any questions or feedback, please let me know in the comments below.

Happy coding!
Outreachy | Introduce Yourself
Published: 2023-05-29 13:15:20

## Introduction
I am Emmanuel (He/Him) from Nigeria. I'm a Software developer and Currently an intern for Ersilia in Outreachy. I enjoy writing code(Most importantly, code that impacts humanity positively). I am highly interested in learning new technologies, improving my skills, contributing to open source software and sharing knowledge. 

I currently enjoy listening to music and podcasts. When you meet me in person, you are most likely going to see me with an earphone :smile: :smile:


## My Core Values
I will put down three of my core values that describes me as a person. These include Creativity, Love and Growth.

I believe we as human are Creative being and each posses excellent characteristics and we should never lose touch of our creative self in everything we do. 

I like to live my life with love and I always try to remind myself to apply it to my daily life.

I also like to learn new things and to grow as human. While I grow, I like to also assist others improve.


## What motivated me to apply to Outreachy?
I applied to Outreachy as it provides me an opportunity to develop my programming abilities and gain exposure to alot more real-world projects, and also learn from experienced mentors. 

Outreachy creates an avenue for me to contribute to a project that has high positive impact on society and humanity which is what my mentoring organization(Ersilia) is doing. 

I also applied to expand my professional network and connect with industry experts.

Thanks for reading and stay tuned for more as I will be blogging more often.
Music Monday — What are you listening to? (Not Your Homeland Edition)
Tags: watercooler, discuss, music
Published: 2023-05-29 13:00:00

_cover image source: [Giphy](https://giphy.com/gifs/80s-alternative-aesthetic-1cMSWoZlxhO8w)_

**In the past, I've asked you all to share music from your native country in our [Homeland Edition](https://dev.to/music-discussions/music-monday-what-are-you-listening-to-homeland-edition-14nb), but this time I wanna do the inverse of that. I'd like everybody to try and highlight music that is _not_ from your homeland. Props to @darkterminal for dropping [this comment](https://dev.to/darkterminal/comment/26jo2) that got my wheels turning and led me to choose this topic. I really enjoy learning about music from other cultures and am siked to hear y'all's suggestions! Of course, as always, if you wanna share music outside of the prompt, then go for it.** 🙌

![A detailed picture of Earth spinning around](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3py407s89z0h1yb9imf9.gif)

***

## How we do 

In this weekly series, folks can chime in and drop links to whatever it is they've been listening to recently + browse others suggestions. You can follow the suggested genre if you'd like, but don't feel confined to it; you're free to suggest whatever you wanna. 🙌  

If you're interested in having other discussions about music, consider following the aptly named [#music discussions](https://dev.to/music-discussions) organization.

{% embed https://dev.to/music-discussions %}  

***

I'm siked to do some musical globetrotting with y'all.🌍🌏🌎 _Note: you can embed a link to your song using the following syntax `{% embed https://... %}`. This should work for most common platforms!_

Looking forward to listening to y'all's suggestions! 🎶
Amazon connect -> manage prompts
Tags: aws, amazonconnect, lambda, dynamodb
Published: 2023-05-29 12:57:53

Amazon connect launches api to manage prompts, which allow us to perform CRUD operations along side configure in your contact flow, here are the benefits of doing so.

- It allows you to configure prompts by customer/caller phone number
- It scales unlimited prompts(right now amazon has limit about 5000 prompts per instance)


architecture flow

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


here are the steps to create and manage them

_**Step-1**_
create a prompt

Amazon connect launches api to manage prompts, here is the code snippet to create a prompt by using javascript sdk


```
var params = {
  InstanceId: 'STRING_VALUE', /* required */
  Name: 'STRING_VALUE', /* required */
  S3Uri: 'STRING_VALUE', /* required */
  Description: 'STRING_VALUE',
  Tags: {
    '<TagKey>': 'STRING_VALUE',
  }
};
connect.createPrompt(params, function(err, data) {
  if (err) console.log(err, err.stack); // an error occurred
  else     console.log(data);           // successful response
});
```

_**Step-2**_
have an entry in dynamo db by phone number

When you create a prompt in step-1, you get prompt id & arn, create an entry in dynamo db with these details associate with customer toll free number/DID

_**Step-3**_
create a lambda function to get the prompt details by phone number

create a lambda function with nodejs runtime, expect an input as phone number, and get the item from dynamo db and return the prompt arn in the response.
here is the sample code snipper

```
var params = {
  Key: {
   "PhoneNumber": {
     S: "8xxx"
    }
  }, 
dynamodb.getItem(params, function(err, data) {
   if (err) console.log(err, err.stack); // an error occurred
   else     console.log(data);           // successful 
 });

return {"promptARN":"arn:aws:connect:us-east-1:123456789012:instance/abcdef12-3456-7890-abcd-ef1234567890/prompts/guid-1234-abcd-5678-efgh"}
```

_**Step-4**_
configure in contact flow

Invoke lambda function which you configured on above step, pass the external user defined value in prompt flow


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




That's all, this solution helps you manage your prompts and scale to unlimited, please make sure you create a web UI to manage your prompts and associate with customer/caller phone numbers.
How to install sample data in Magento 2
Tags: magento, magento2, magento2tutorial
Published: 2023-05-29 12:56:55

Magento 2 sample data serves as a testing dataset for the Luma theme, encompassing sample products, categories, and customers' information. Its purpose, once Magento 2 is installed, is to create a test environment where you can modify orders, prices, add products, manage inventory, and test pricing rules. Let's explore various methods to install sample data in Magento 2.

Magento is a powerful e-commerce platform that offers a wide array of features and functionalities. However, some may find it challenging to fully grasp its usage. To simplify this process, Adobe has developed a sample data module for Magento 2, transforming a standard Magento installation into a fully-functional demonstration store. This guide, titled "**_How to Install Sample Data in Magento 2_**," provides an overview of the Magento 2 sample data module and guides you through the correct installation procedure.

For more information , please visit this :- **_[https://webguru.dev/how-to-install-sample-data-in-magento-2/](https://webguru.dev/how-to-install-sample-data-in-magento-2/)_**
De[v]log#1: Oops.....powershell is ruined...sorry
Published: 2023-05-29 12:44:25

```
Oops, something went wrong.
Please report this bug with ALL the details below, including both the 'Environment' and 'Exception' sections.
Please report on GitHub: https://github.com/PowerShell/PSReadLine/issues/new?template=Bug_Report.md
Thank you!

### Environment
PSReadLine: 2.2.0-beta1
PowerShell: 7.3.4
OS: Microsoft Windows 10.0.22000
BufferWidth: 132
BufferHeight: 35

Last 0 Keys

### Exception
System.TypeLoadException: Could not load type 'System.Management.Automation.Subsystem.PredictionResult' from assembly 'Microsoft.PowerShell.PSReadLine.Polyfiller, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null'.
   at Microsoft.PowerShell.PSConsoleReadLine.PredictionViewBase.Reset()
   at Microsoft.PowerShell.PSConsoleReadLine.PredictionInlineView.Reset()
   at Microsoft.PowerShell.PSConsoleReadLine.Prediction.Reset()
   at Microsoft.PowerShell.PSConsoleReadLine.Initialize(Runspace runspace, EngineIntrinsics engineIntrinsics)
   at Microsoft.PowerShell.PSConsoleReadLine.ReadLine(Runspace runspace, EngineIntrinsics engineIntrinsics, CancellationToken cancellationToken)

```

This is the error code I got after modding my powershell7 with oh-my-posh....I don't really know what went wrong but after I restarted the powershell7...this error showed up...as if I didn't have enough error in my hands to solve....well fortunately upgrading PSreadline solve the problem

```
pwsh.exe -noprofile -command "Install-Module PSReadLine -Force -SkipPublisherCheck -AllowPrerelease"
```


prompting this line on my built in powershell solved the problem...

so yeh...basically this one line did it and I wanted to recorded it somewhere if it were to happen again...