teleren/devto huggingface dataset:
Build Project Svelte untuk Dibuka di Protocol "file:"
Tags: svelte, html, vite, javascript
Published: 2024-04-06 16:23:51

---
title: Build Project Svelte untuk Dibuka di Protocol "file:"
published: true
description: Ini loh caranya supaya project Svelte kita bisa dibuka tanpa perlu protocol http. Istilahnya itu, tinggal double click aja file HTML nya untuk membuka.
tags: svelte, html, vite, javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sz7ga0oiz0jvra7u47r0.png
# Use a ratio of 100:42 for best results.
# published_at: 2024-04-06 16:02 +0000
---

Buat project Svelte:

```bash
pnpm create vite
```

Pas ditanya project name, masukkan nama project yang diinginkan. Misalnya aja: "latihan".

Pilih Svelte.

Pilih JavaScript.

Kemudian, masuk ke folder latihan:

```bash
cd latihan
```

Git init (recommended):

```bash
git init
```

Buka dengan VS Code:

```bash
code .
```

Tapi, aku lebih suka bukanya dengan extension Project Manager sih. Tinggal klik aja nama "latihan" di list Project Manager.

Install dependencies:

```bash
pnpm i
```

Install Vite Plugin Legacy dan Terser:

```bash
pnpm i @vitejs/plugin-legacy terser
```

Edit `vite.config.js` menjadi seperti berikut:

```diff
import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
+ import legacy from '@vitejs/plugin-legacy';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    svelte(),
+    legacy({
+      renderModernChunks: false
+    })
  ],
});
```

Build:

```bash
pnpm build
```

Buka `dist/index.html`. Kan isinya seperti ini awalnya:

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Svelte</title>
    
  </head>
  <body>
    <div id="app"></div>
    <script crossorigin id="vite-legacy-polyfill" src="/assets/polyfills-legacy-CsGtGfX8.js"></script>
    <script crossorigin id="vite-legacy-entry" data-src="/assets/index-legacy-CTkYmYBZ.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
  </body>
</html>
```

Hapus `crossorigin` dan sesuaikan `src` dan `data-src` menjadi seperti berikut:

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Svelte</title>
    
  </head>
  <body>
    <div id="app"></div>
    <script  id="vite-legacy-polyfill" src="./assets/polyfills-legacy-CsGtGfX8.js"></script>
    <script  id="vite-legacy-entry" data-src="./assets/index-legacy-CTkYmYBZ.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
  </body>
</html>
```

Klik kanan `dist/index.html`, lalu pilih Copy Path. Nah, sekarang paste ke browser.

Berhasil.

Yuk join komunitas [Zen Sharing](https://chat.whatsapp.com/K3TdZ0cezEDBzLMVxBZyOs) untuk mendapatkan informasi bermanfaat seperti di artikel ini.
ลองใช้ Google Wire
Published: 2024-04-06 16:15:47

`Wire is a code generation tool that automates connecting components using dependency injection`

ลองใช้ Wire กับ Project API Todo แบบง่ายๆ

## เครื่องมือที่ใช้
- golang
- go fiber
- postgres

## ขั้นตอน
1. เริ่มจากสร้างโปรเจคขึ้นมา 1 โปรเจคโดยมีไฟล์ในโฟรเดอร์ดังนี้

- go.mod
- cmd
 - webservice
  - main.go
  - wire.go
- controllers
 - todo_controller.go
- services
 - config
  - env.go
 - db
  - gorm.go
 - server
  - fiber.go

2. โฟกัสที่ file `cmd/webservice/main.go`
สร้าง struct ขึ้นมาหนึ่งตัวและ function ที่ทำหน้าที่สร้าง struct ตัวนั้นเสมือนเป็น constructor
```go
// vvvvvvvv สนใจ struct ตัวนี้ vvvvvvvv
type WebService struct {
 ENVConfig *config.ENVConfig
 DB        *gorm.DB
 TodoController *controllers.TodoController
}

// vvvvvvvv สนใจ function ตัวนี้ vvvvvvvv
func NewWebService(envConfig *config.ENVConfig, db *gorm.DB, todoController *controllers.TodoController) *WebService {
 return &WebService{
  DB: db,
  ENVConfig: envConfig,
  TodoController: todoController,
 }
}

func main() {
 // ยังไม่ต้องสนใจตรงนี้
}
```

3. ไปที่ file `cmd/webservice/wire.go`
จะเห็นว่าที่ `wire.Build(...)` ใน ... จะต้องมี function ที่ return struct ที่เราสนใจจะใช้งานใน struct `Webservice`
```go
// vvvvvvvv ต้องใส่นะ vvvvvvvv
//go:build wireinject
// +build wireinject

func InitWebservice() *Webservice {
	wire.Build(NewWebService, config.NewENVConfig, db.NewDB, controllers.NewTodoController)
	return &Webservice{}
}
```

4. กลับมาที่ file `cmd/webservice/main.go` แล้ว run คำสั่งใน terminal run คำสั่ง `wire` แล้วมันจะสร้าง file มาให้อันนึงชื่อ `wire_gen.go` ซึ่งในนั้นจะมี function `InitWebservice` มาให้ในแบบที่ inject ตัว dependencies ทั้งหมดที่จำเป็นมาให้แล้ว

```go
func main() {
 webservice := InitWebservice()
}
```

5. ซึ่งถ้าต้องการเพิ่ม dependencies ต้องเพิ่ม 2 ที่
- function New....(..., dependency ที่เราอยากเพิ่ม *DependencyStruct)
- wire.Build(...., NewDependencyFn ที่ return dependency นั้นๆ)
แล้ว wire จะไปหา dependency เหล่านั้นมาใส่ให้เราเอง
ความ

## ความรู้สึกหลังใช้
รู้สึกว่าไม่ค่อยจำเป็นต้องใช้มันเท่าไหร่ 555
My Github project has more than 100 stars✨
Tags: career, github, remote, remotework
Published: 2024-04-06 15:50:17

👩‍💻I created and maintained this project [(RemoteWLB/remote-jobs)] 
 (https://github.com/RemoteWLB/remote-jobs) to update new remote work every day. Now it has received 100+ stars⭐, which means that my efforts are not in vain. I will continue to update every day to provide better content and help everyone. Find your ideal remote job better and easier. Keep me motivated by supporting the project with a star⭐.

At the same time, if you are looking for remote job seeker, you can **fork** and submit a **PR** according to our [contribution guidelines](https://github.com/RemoteWLB/remote-jobs/blob/main/.github/contributing.md), and your position will be published in this project to help you find your target candidates faster.


[My website](https://www.remotewlb.com) has also been updated with a new UI design. Added new features ✨ of location filter and sign up. Remote jobs on the site is updated daily, and sites older than a month are hidden to keep remote jobs available. You can save a job and view it in your saved list even if it is hidden.

![website screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v5vbdqf0fgjbo9h5ahmr.jpg)

Welcome to my website🌐 [RemoteWLB](https://www.remotewlb.com). This website has not had time to create a feedback page. If you find any bugs or have suggestions, you can comment here or [contact](https://www.remotewlb.com/about) me.Thanks!
Tools I Learnt during my First Month of Programming
Tags: git, command, html, css
Published: 2024-04-06 15:48:40

## Command Line Tools and Basic git command.

- Command Line Tools 

Let's start with some of the basic command line tools

1. cd: Change directory


Illustration, to navigate into the downloads folder, we write

```
cd Downloads
```

- Basic Git Commands

1. git init:-

illustration

```
git init
```

- HTML ELEMENT

```html
<a href="/">Homepage</a>
```
LeetCode Meditations — Interlude: Fast & Slow Pointers
Tags: computerscience, algorithms, javascript, learning
Published: 2024-04-06 15:38:47

Before we start the [next problem in the series](https://leetcode.com/problems/reorder-list/), let's take a quick look at a technique that comes in handy when it comes to working with linked lists.

We can keep two pointers while traversing a linked list: fast and slow. While the fast one increases by two steps, the slow pointer will increase by just one step. 

#### Finding the middle node of a linked list

When the fast pointer reaches the end of the list, the slow pointer will be at the "middle" node.

Let's see it conceptually:

```js
let slow = head;
let fast = head;

while (fast !== null && fast.next !== null) {
  slow = slow.next;
  fast = fast.next.next;
}
```

We can think of a list like `[1, 2, 3, 4, 5]` (where each value is a node in the linked list).

Both `fast` and `slow` start pointing to the head, that is, `1`.

Then, we update the slow pointer one step, which will be `2`. And, `fast` will be at `3`.

When we update `slow` again, it will be at `3`.
When the fast pointer increases, it will be two steps ahead, and its `next` pointer will point to the `null` value, at which point our loop will stop iterating. 

`slow` will end up pointing to the node with the value `3`, which is the middle node.


![An example on fast and slow pointers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ey23djj9f5ry2hm6a48.gif)

With an even number of nodes, there are two candidates for the middle node. For example, with a list like `[1, 2, 3, 4]`, our current implementation will find the middle as `3`.

---

This technique is also useful to detect cycles in a linked list, but we'll see that in an upcoming problem.
For now, knowing that it exists is sufficient and makes our day better. Happy coding.
The Power of Data Cleaning: A Dev's Guide
Published: 2024-04-06 15:09:39

Ever struggled with messy WhatsApp data? What if I told you there’s a one-click solution?

Have you ever grappled with unruly WhatsApp data? Imagine a one-click solution that transforms chaos into clarity. Data Cleaning is a fundamental concept in data processing that cannot be overemphasized. Whether you’re a data analyst, data scientist, or Python software engineer, I’ve got something for you — a Python package, devoid of dependency, designed to effortlessly cleanse your imported WhatsApp data. With a single execution of your code, you can achieve data-purging nirvana.

What Does It Look Like?

Behold your chat corpus, neatly formatted in your terminal. But wait, there’s more! If any unwanted data lingers, fear not. Simply copy the offending words or phrases and configure them in your settings.py file. Voilà! Your data emerges pristine and ready for analysis.

🚀 Project GitHub Repo: [Chat Cleaner](https://lnkd.in/dNeA3-ER) and fork my work on [Chat-Cleaner Repo Fork] (https://lnkd.in/dGYM3fcS) and contribute if you want.
It has a well-documented Readme file too.


Ready to revolutionize your data cleaning process? Dive into my article on LinkedIn and discover how to comprehensively analyze generated conversation chats:

📖 Read the Article: How to Analyze Comprehensively Generated Conversation Chats — [here](https://lnkd.in/dJVZAE45)

Remember, quality data fuels insightful decisions. Let’s clean up and level up ASAP! 🌟
Translator AI App
Tags: cloudflarechallenge, devchallenge, ai, webdev
Published: 2024-04-06 15:07:43

*This is a submission for the [Cloudflare AI Challenge](https://dev.to/devteam/join-us-for-the-cloudflare-ai-challenge-3000-in-prizes-5f99).

## What I Built

The web application can recognize automatically the language you are using, and will translate to another language, which user can select on the translate to section, it handle four languages.

**The main features of the application are:**

1.** Text input in which you can enter text**, when click on the button translate, the text  you entered will be translated into the language you had selected to _translate for_

2.** Speech recognition:** you can use the microphone to send a voice message and translate to the selected language

3. **The app handle files translations** which means you can upload a file, select the language to translate and the web will do the job of extracting the text, translate it and display the translated message on the translated information section

## Demo

[You can access to the deployed project on CloudFlare Pages
](https://241a0829.translator-ai.pages.dev/)


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


## My Code

[See the code](https://github.com/elmerurbina/translator-ai) 

## Journey

Is the first time i use APIs, I had been working on AI related projects but with Python, so this project allow me to understand clearer how does the API integrations works, I developed the project alone, I want to fix some bugs, add more functionalities and maybe present the project on my University at the end of the year, so it will be fine to find collaborators and growth network.
Mousiny
Tags: gamedev, webdev, showdev, javascript
Published: 2024-04-06 14:46:55

<iframe frameborder="0" src="https://itch.io/embed-upload/10053469?color=22243d" allowfullscreen="" width="360" height="660"><a href="https://takaneichinose.itch.io/mousiny">Play Mousiny on itch.io</a></iframe>

## Mousiny

### Description

Mousiny is the brave hero who explore the dungeon and defeat all the monsters in it.

This is just a simple and more like static turn based game (based on your luck).

To control this game, just tap anywhere (or into the certain menu you want to do) to do an action.

The main goal is to explore the dungeon, and go to the highest floor as you can.

You can't get inside the dungeon if you haven't bought anything. So do remember to buy your need before going. It's going to be dangerous!

There are 4 types of floors in the dungeon:

1. Monster (Boss monster every 5 floors)
2. Treasure
3. Healing Fountain
4. Nothing at all

There are 4 types of monsters, and 3 types of boss monsters. Normal monsters only have 1 life, but boss monsters have 3 lives. You may tap on the card to do an action.

Monsters:

1. Cockroach
2. Evil Mouse
3. Pigeon
4. Spider

Boss Monsters:

1. Cat
2. Owl
3. Snake

You can get 4 kinds of items you can get in the treasure:

1. 100 coins
2. 200 coins
3. 500 coins
4. Cards

Healing fountain is where you can replenish all your health.

Of course if you can into the "nothing at all" floor, you can't get not fight anything.

### Credits

Tools I used:

1. [Construct 3](https://construct.net/)
2. [Aseprite](https://aseprite.org/)
3. [MuseScore](https://musescore.org/)
4. [PICO-8](https://www.lexaloffle.com/pico-8.php) (For sound effects )

### Screenshot

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

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

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

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

<iframe frameborder="0" src="https://itch.io/embed-upload/10053469?color=22243d" allowfullscreen="" width="360" height="660"><a href="https://takaneichinose.itch.io/mousiny">Play Mousiny on itch.io</a></iframe>
Cloudflare + AI
Tags: cloudflarechallenge, devchallenge, ai
Published: 2024-04-06 14:44:51

*This is a submission for the [Cloudflare AI Challenge](https://dev.to/devteam/join-us-for-the-cloudflare-ai-challenge-3000-in-prizes-5f99).*

## What I Built

<!-- Tell us what your app does! -->

## Demo

<!-- Share a link to your deployed solution on Workers or Pages, and add a screenshot or video embed of your app here. -->

## My Code

<!-- Show us the code! Share a public link to your repo and be sure to include a README file with installation instructions. We also encourage you to add a license for your code.  --> 

## Journey

<!-- Tell us about your process, the task types and models you used, what you learned, anything you are particularly proud of, what you hope to do next, etc. -->

**Multiple Models and/or Triple Task Types**

<!-- Let us know if your project utilized multiple models per task and/or if your project used three or more task types. If so, you may qualify for our additional prize categories! If not, please remove this section. -->

<!-- Team Submissions: Please pick one member to publish the submission and credit teammates by listing their DEV usernames directly in the body of the post. -->

<!-- Don't forget to add a cover image or an additional tag to this post (if you want). -->

<!-- Thanks for participating! -->
Introducing Windowlight - Create world-class code screenshots online
Tags: webdev, laravel, showdev, tutorial
Published: 2024-04-06 14:23:21

## What is Windowlight?

**[Windowlight](https://windowlight.desilva.se)** is a code screenshot generator that uses [Torchlight](https://torchlight.dev) for syntax highlighting.

With Windowlight, you can generate **beautiful code screenshots**, with the **best syntax highlighting available**.
Simply paste your code, choose your settings, and download your high quality PNG image. All for free!

### What does it look like?

Here's an example of an image generated with Windowlight:

![Code screenshot of a Hello World route](https://windowlight.desilva.se/og-image.png)


## How does it work?

Windowlight wraps the Torchlight API, providing a user-friendly interface to generate beautiful code screenshots, fully online - right from your browser.

We call Torchlight from our server, and then we display the result in a beautiful, customizable code window, that you can then download as a high quality PNG image.

Using Torchlight means that you can use their special directives, allowing you to add code highlights and annotations, and even Git diffs to your screenshots.


## Why use Windowlight?

### Features include:

- Probably the best syntax highlighting available
- Customizable code window with support for file labels
- High quality PNG images with support for ultra high resolutions
- Choose any background color, including transparent backgrounds
- Add annotations and highlights to your code, and even Git diffs
- Fully online and browser-based, no need to install anything
- [Open Source](https://github.com/caendesilva/Windowlight), and 100% free to use!

### Backed by the power of VS Code

Additionally, since Torchlight is powered by VS Code and TextMate, you get extremely accurate and feature rich syntax highlighting.
This includes support for virtually any programming language (over 100 languages supported, including PHP, JavaScript, Python, Ruby, Java, C++, C#, Swift, Go, Rust, and many, many more)

### Ready to get started?

Head on over to [windowlight.desilva.se](https://windowlight.desilva.se) and start generating beautiful code screenshots today!
Easily Resize Multiple Images Quickly Through the Terminal on Your Mac
Tags: macos, terminal, image, imagemagick
Published: 2024-04-06 14:18:09

I just wanted to start out by saying that this is an abridged version of my [original published version from January 27, 2021 that you can find on my website here](https://www.simplykyra.com/easily-resize-multiple-images-quickly-through-the-terminal-on-your-mac/).

---

**_Resizing and Compressing Images Using Preview on My Mac…. a.k.a. Now the Old Way_**

When I first started resizing images on my Mac I had been using `Preview` to view and crop my images so naturally I simply went into `Tools` and selected `Adjust Size` to open a new popup window, choose the new size, pressed OK, and voila it was adjusted!

![Image show the "adjust size" popup with the highlighted dimensions.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lxcj5jwjfod1ha9h346z.png)

This was great but time consuming especially when combined with needing to export it and manually guesstimate what the quality level should be on the slider. The annoyance was multiplied even more with each additional photo I had as this was an individual process... unless I was missing something with `Preview` so feel free to comment for someone else.

![When exporting you had to drag the slider and see the estimated file size that sometimes didn't update for me.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i3ba2mm28bm48cp9ajdo.png)

**_ImageMagick®… a.k.a. My New Quicker Way_**

I want to start by saying I still use `Preview` on my Mac to go through my images before using [ImageMagick®](https://imagemagick.org/). The full iterative process of this is on [my website in my original post](https://www.simplykyra.com/easily-resize-multiple-images-quickly-through-the-terminal-on-your-mac/) so I'll jump ahead and share my final command in this image with captions:

![Written out command with captions explaining each part](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o3o47hq35lh1s4sadzmy.png)

The above command uses the [ImageMagick’s magick mogrify](https://imagemagick.org/script/mogrify.php) to take all of the JPEGs in the current directory and create a resized and compressed copy in the output directory. You can change which image file types are resized and compressed with that last parameter.

I then realized I sometimes use mixed file types so after making a mega command I then simplified it back down to this one which finds the files by name rather than type:

`mogrify -path output -resize 750 -quality 100% -define jpeg:extent=70KB IMG_*`

And there you go! So much quicker than only using `Preview`... plus I found away to use `montage` to create a collage. I show that and the entire process of discovery at my SimplyKyra website where [this original and longer published version from January 27, 2021 lives](https://www.simplykyra.com/easily-resize-multiple-images-quickly-through-the-terminal-on-your-mac/).

Have a great day!
Use Migration, Factory , Seeder In Laravel 10
Tags: webdev, laravel, php, programming
Published: 2024-04-06 14:09:20

{% youtube AdkDQIGpiFw %}

The first.  we can note 1 list command Migration in Laravel
php artisan make:migration create_products_table
//or
**php artisan make:migration table_products_table --table= products**
//or
**php artisan make:migration create_products_table --create=products**
Note
**--table= products** : open products table modify
**--create=products** : create product table
OR : The Artisan command to create a migration (-m), a seeder (-s), and a factory (-f) in Laravel is:
**php artisan make:model Product -m -s -f**
ModelName is the name of the model you want to create.
This command will generate a migration, a seeder, and a factory for the specified model as well as create the model itself.