teleren/devto huggingface dataset:
Angular version 8 to 9
Published: 2023-11-05 05:51:52

{
  "name": "colegios",
  "version": "1.4.2",
  "scripts": {
    "ng": "ng serve --host 192.168.1.10",
    "start": "ng serve",
    "prod": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng build --prod",
    "prod-o": "node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng build --prod --build-optimizer",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^8.2.14",
    "@angular/cdk": "^8.2.2",
    "@angular/common": "^8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "^8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/material": "^7.3.7",
    "@angular/platform-browser": "^8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "@auth0/angular-jwt": "^2.1.0",
    "@ng-bootstrap/ng-bootstrap": "^5.3.0",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "@reactivex/rxjs": "^6.6.7",
    "angular-calendar": "^0.27.7",
    "angular-ng-autocomplete": "^2.0.7",
    "core-js": "^2.5.4",
    "crypto-js": "^3.1.9-1",
    "date-fns": "^1.30.1",
    "hammerjs": "^2.0.8",
    "lodash": "^4.17.14",
    "moment": "^2.24.0",
    "ng-click-outside": "^4.0.0",
    "ng-select": "^1.0.2",
    "ng-spin-kit": "^5.1.1",
    "ng2-currency-mask": "^5.3.1",
    "ng2-toasty": "^4.0.3",
    "ng2-ui-switch": "^1.0.2",
    "ngx-carousel": "^1.3.5",
    "ngx-image-cropper": "^1.3.9",
    "ngx-mask": "^8.0.3",
    "ngx-perfect-scrollbar": "^7.2.1",
    "ngx-select-dropdown": "^1.0.0",
    "ngx-take-until-destroy": "^5.4.0",
    "ngx-typeahead": "^6.2.0",
    "nova-auto-complete-library": "file:src/app/shared/directives/custom/nova-autocomplete-0.0.1.tgz",
    "nova-search": "file:src/app/shared/directives/custom/nova-search-2.0.0.tgz",
    "rxjs": "^6.6.7",
    "rxjs-compat": "^6.6.7",
    "sweetalert2": "^8.5.0",
    "tslib": "^1.14.1",
    "uuid": "^9.0.1",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.29",
    "@angular/cli": "~8.3.29",
    "@angular/compiler-cli": "~8.2.14",
    "@angular/language-service": "~8.2.14",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/lodash": "4.14.149",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.1",
    "html2pdf.js": "^0.9.2",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "sass": "^1.55.0",
    "ts-node": "~10.7.0",
    "tslint": "~5.11.0",
    "typescript": "3.4.1"
  }
}

This is my package json i need to upgrade this to angular 9
It's Time to Ditch Node.js - bun.js is the Future
Tags: javascript, webdev
Published: 2023-11-05 05:43:08

**Introduction:**

JavaScript runtimes have come a long way in the past few years. From Node.js to Deno and many others, developers now have several excellent options for building fast and efficient JavaScript applications. One of the newest players in this space is bun.js - a fast all-in-one JavaScript runtime created by Jarred Sumner and the team at Oven.sh. 

In this post, we'll take a quick look at what makes bun.js special and why you should consider it for your next JavaScript project.

**What is bun.js?**

Bun is a JavaScript runtime built in Zig - a low-level programming language that compiles to native code. This allows bun to execute JavaScript at near-native speeds without the overhead of compilers or interpreters.

**Some key features and benefits of bun include:**

- _Blazing fast start up and execution_ - benchmarks show bun starting up and running code faster than Node.js and Deno.

- _All-in-one runtime_ - bun handles everything from package management to transpilation out of the box. No need for separate build tools.

- _Excellent TypeScript support_ - bun has first-class support for TypeScript with no extra configuration required.

- _APIs compatible with Node.js_ - bun implements the native Node.js APIs which makes it easy to migrate existing projects.

- _Lightweight_ - bun has a small runtime footprint around 7 MB compared to 100+ MB for Node.js

**Why Choose bun.js?**

There are a few key reasons why bun.js stands out from other JavaScript runtimes:

_Speed_ - The biggest selling point is raw speed. bun achieves incredible performance by compiling JavaScript directly to machine code using LLVM. This eliminates interpreter overhead.

_Simplicity_ - Getting started with bun.js is simple. There's no complex configuration or build setup. Just install and start coding.

_Latest JavaScript features_ - bun supports the latest JS features like top-level await out of the box. No need to wait for these to be implemented in Node first.

_Easy migration_ - Using the native Node.js APIs makes migrating existing projects to bun straightforward.

_Developer experience_ - bun provides excellent TypeScript support, fast error reporting, dependency graphs, and other features to enhance developer experience.

**Summary**

Bun.js brings a unique approach to running JavaScript and TypeScript outside the browser. By compiling code directly to machine language, it unlocks speed and performance not possible in traditional interpreted environments.

So if you're looking for a fast, lightweight and developer-friendly runtime for your next JavaScript or TypeScript project, give bun.js a try!
Ocean Transport
Tags: webdev
Published: 2023-11-05 05:40:50

Ocean Transport es una empresa especializada en el transporte nacional e internacional que se destaca por ofrecer soluciones integrales para sus clientes. Con una amplia gama de servicios que abarcan desde el transporte por vía terrestre hasta el marítimo y aéreo, Ocean Transport se posiciona como un aliado estratégico para empresas de todos los tamaños. Su compromiso principal es garantizar que sus envíos lleguen a su destino de manera eficiente y segura, sin importar la complejidad de la ruta o el tipo de carga.

Una de las ventajas más destacadas de Ocean Transport es su capacidad para gestionar todas las necesidades logísticas de sus clientes. Esto significa que no solo se encargan del transporte en sí, sino que también se ocupan de planificar y coordinar cada etapa del proceso. Desde la recolección de la mercancía en origen hasta la entrega en destino, Ocean Transport supervisa y asegura que todo se realice sin contratiempos. El transporte por vía terrestre es una parte fundamental de la oferta de servicios de Ocean Transport. Con una amplia flota de vehículos y una red de socios confiables en todo el país, pueden transportar cargas de cualquier tamaño y tipo a nivel nacional. La eficiencia y la seguridad son sus prioridades, lo que se refleja en la puntualidad de sus entregas y en la integridad de la carga.

Para las empresas que requieren de soluciones de transporte marítimo, Ocean Transport es también la elección ideal. Conexiones en puertos clave en todo el mundo, junto con una amplia experiencia en la gestión de envíos internacionales, les permiten ofrecer un servicio de primer nivel en este ámbito. Ya sea que necesite transportar contenedores completos o carga consolidada, Ocean Transport se asegurará de que su carga llegue a su destino de manera eficiente y económica. El transporte aéreo es otra de las áreas en las que **[Ocean Transport](https://www.oceantransport.es/)** se destaca. Con alianzas estratégicas con las principales aerolíneas y una experiencia sólida en la gestión de envíos aéreos, pueden ofrecer soluciones de transporte rápido y seguro para sus clientes. Esto es especialmente importante cuando se trata de envíos urgentes o de alto valor.

Además de su expertise en transporte, Ocean Transport se ocupa de todas las gestiones aduaneras. El comercio internacional a menudo implica trámites y regulaciones complicados, pero su equipo de expertos se encargará de todos los aspectos relacionados con la aduana, asegurando que sus envíos cumplan con todas las normativas y que no haya retrasos innecesarios en la liberación de la carga.
110 berufliches Vorwärtskommen: Warum strebst du nach Mehr?
Tags: deutsch, career, motivation, discuss
Published: 2023-11-05 05:00:00

Moin Moin,

warum strebst du nach Mehr? (1)
[Im vorherigen Beitrag→](https://dev.to/amustafa16421/109-berufliches-vorwartskommen-das-streben-nach-mehr-und-mehr-4m8e) haben wir uns eine äußere Einflussgröße für unser Streben angeschaut, den ständigen Wandel in der IT. Jetzt möchte ich nach der inneren Einflussgröße fragen.

Möchtest du
1) stets neues lernen
2) das bereits gelernte perfektionieren
3) ästhetisches schaffen – sowohl im greifbaren als auch abstrakten
4) Lösungen entwickeln
5) dein Ansehen steigern ( zum Beispiel als Super-Hacker, Top-Entwickler, Gehalt / Geld, Auto, … )

Was genau möchtest du erreichen, also was genau möchtest du lernen, perfektionieren, …

Fragen über Fragen :-)

Lass uns mittels Kommentaren austauschen.

Beste Grüße,
Mustafa

Oder auch mittels E-Mail: mustafa.kevin.dwenger@posteo.de
Betreff: Austausch

(1) statt nach Meer oder Mär :-)
React component for an amazing card border and glow animation
Tags: freecodez, react, html, blog
Published: 2023-11-05 04:48:41

Hey there, You are most welcome to this article. I hope you will enjoy this article. If you like this article then please share this article with your friends and colleagues. If you have any questions or suggestions regarding this article then please comment down below.

**React component for an amazing card border and glow animation**

![React component for an amazing card border and glow animation](https://res.cloudinary.com/freecodez/image/upload/v1699159713/images/lo0iymyfk0vo5gki3kso.webp)

For full source code visit : [https://freecodez.com/post/tfrt9rz](https://freecodez.com/post/tfrt9rz)


```
// https://freecodez.com
const Hello = (props) => {
	return (
		<div class="card" role="button">
			<span class="glow"></span>
			<div class="inner">
				<span>cool</span>Glowing shadows <br/>
				{props.txt}
			</div>
		</div>
	);
};

```

Source Code : [https://freecodez.com/post/tfrt9rz](https://freecodez.com/post/tfrt9rz)

For more such articles visit : [https://freecodez.com](https://freecodez.com/all)
How to do Authorization in MERN Stack?
Published: 2023-11-05 04:10:30

Authentication in a MERN (MongoDB, Express.js, React, Node.js) stack application usually follows this pattern:

1. User Registration and Login:
- The user provides their email/username and password.
- Passwords are hashed using a library like `bcrypt` before they're stored in MongoDB.
- The backend verifies the hashed password during login.

2. Token Generation:
- Once verified, the server generates a JSON Web Token (JWT) and sends it back to the client.
- Libraries like `jsonwebtoken` are popular for handling JWTs in Node.js.

3. Token Storage:
- On the client side (React), the JWT is typically stored in local storage or cookies.
- For added security against cross-site scripting (XSS), HTTP-only cookies can be used. This way, the token isn't accessible via JavaScript on the client side.

4. Authenticated Requests:
- For subsequent requests that require authentication, the client attaches the JWT as a header (usually an Authorization header).
- The server verifies the JWT on every request to ensure it's valid and belongs to the right user.

5. Protected Routes:
- On the server side (Express.js), middleware functions can be used to protect routes. If a request doesn't have a valid token, the server will return a 401 Unauthorized error.
- On the client side (React), you can create protected routes using React Router by checking if the user is authenticated before rendering a component.

6. Logging Out:
- On the client side, logging out might simply involve removing the JWT from local storage or cookies.
- If you're using token blacklisting (where invalidated tokens are stored in a list/database to prevent their use), you'd also add the token to the blacklist at this stage.

7. Token Expiration:
- JWTs typically have an expiration time. When they expire, the user needs to log in again or refresh the token.
- Refresh tokens can be used to get a new access token without having the user log in again.

Remember, while JWTs provide a way to authenticate requests, they shouldn't be used to store sensitive or confidential information since they can be decoded easily.

Finally, always ensure that connections are secured using HTTPS to prevent man-in-the-middle attacks. This is especially crucial during the login phase where passwords might be sent from the client to the server.

This is a basic overview, and depending on the specifics of your application, additional security measures and considerations might be necessary.
Placeholder Contributor
Tags: hack23contributor
Published: 2023-11-05 03:53:20

<!-- ✨This template is only meant to get your ideas going, so please feel free to write your own title, structure, and words! ✨ -->

### Intro
<!-- Share a bit about yourself as a contributor. Is this your first Hacktoberfest, or have you contributed to others? Feel free to embed your GitHub account by using {% embed LINK %} -->

### Highs and Lows
<!-- What were some of your biggest accomplishments or light-bulb moments this month? Did any problems come up that seemed impossible to fix? How did you adapt in those cases?  -->

### Growth
<!-- What was your skillset before Hacktoberfest 2023 and how did it improve? Have your learning or career goals changed since working on these new projects? -->
Introducción a la Arquitectura de Software.
Tags: architecture, designpatterns, microservices, beginners
Published: 2023-11-05 03:43:01

I have finished the series of articles (Spanish version), written on Medium about an introduction to learn Software Architecture. I leave you the link to the board on [Pinterest](https://co.pinterest.com/villamorosjuan/arquitectura-de-software/) where I compile each of the articles. Don't forget to share it and follow me here and follow me on [Medium](https://medium.com/@villamorosjuan), and my other social networks [here](https://linktr.ee/villamorosjuan)
Late Hacktoberfest Part ll
Published: 2023-11-05 03:29:48

## Second Contribution

This is the second post in my multi-part Late Hacktober series. This post is about my second contribution to an open source project during the 2023 Hacktoberfest. Lately, I've been focused on learning and improving my C#. So, I wanted to work on a project using C# and something that was connected to game engines. Luckily I found a "good first issue" [here](https://github.com/dmitry-ivashenko/StatefulUI/issues/4), which is about using StringBuilder class instead of String.

## String vs Stringbuilder

One of the project members had made the observation that one of the custom classes in the code base which was in charge of code generation was using the String class with += operators, and string interpolation, for string concatenation. He recommended that it is more efficient to use a StringBuilder class instead of using String, because the StringBuilder is a mutable item compared to the immutable String. This was interesting to me because first of all, I had never used the StringBuilder class and it was an opportunity to learn something new, and secondly, because it made sense to me that if the string value is not fixed and it will be constantly changing, to use a mutable class in order to avoid memory duplication. So, I went over the StringBuilder [documentation](https://learn.microsoft.com/en-us/dotnet/api/system.text.stringbuilder?view=net-7.0) to understand how it works and what methods I can use to fix this issue.

## Working on the Issue

After going over the issue requirements and understanding what and where I needed to implement the fix, I asked the project owner to assign me the issue, which he happily did. Like my first contribution I forked the repo and created a new branch to work on. The implementation was not complicated at all, I just had to replace the String class with the StringBuilder, use StringBuilder methods for string concatenation and override one of the functions with a custom logic. After I implemented the logic, I tested my changes to make sure that it did not break anything in the code base and that it did what was needed. When I was satisfied that everything worked fine, I commited my changes, pushed them, and made a [pull request](https://github.com/dmitry-ivashenko/StatefulUI/pull/9/commits). Afterwards, one of the project members reviewed my code, approved it, and the project owner thanked me for my contribution, and merged the code, which will be included in his next release.

## What I Learned

I really liked how appreciative the project owner was of my contribution, even though it was nothing complicated or huge. This made me feel good about contributing to other people's projects, and made me want to do more contributions even after I finish college. It was also a great learning opportunity which allowed me to learn the difference between StringBuilder and String and when to use each one. I will have to go over some of my own C# personal projects and update them, to use StringBuilder instead of String where I have a mutable object.
cashfx recovery review
Tags: cashfx, lexatrade, pocketoption, forex
Published: 2023-11-05 02:54:26

I just wonder what is happening to CFX Group? After trading and making so much profit, withdrawals suddenly became very difficult. I messaged  CFX Group support but no positive response until October 11 that  I was able to recover my money with the help of a triangulation expert. I felt hope again. Professionalism and Frecuperation Support fostered a sense of certainty and trust. They were really helpful, guiding me through explanations of the recuperation process and making sure I was aware of everything at all times. I was able to successfully retrieve my lost Bitcoin thanks to support@frecuperation.online
Web Workers 調用 API，減輕主執行緒負擔
Tags: javascript, tutorial, api, webdev
Published: 2023-11-05 02:44:11

## 本篇要解決的問題

這陣子，不知道是不是演算法的關係，看到的文章很常出現「Web Workers」這個詞，查了一下後發現，Web Workers 是一個連 IE10 都支援的功能，看來是歷史悠久牌子老、街頭巷尾都稱讚的 API，就想說來看一下。

看完幾篇教學文，發現應該再早點知道的，可以處理工作上遇到的一些問題。

Web Workers 可以解決的問題，August 想到的有以下：

- 調用回應時間比較長的 API
- 在背後收集使用者的行為
- 想提前載入頁面上其它區塊會需要的資料

總之，就是可以把一些處理時間較長、不必要在頁面一載入就撈取的資料，丟給另一條執行緒去處理，不讓主執行緖有阻塞，進而減少使用者在操作上會有的卡頓感。

本篇會先簡單說明什麼是 Web Workers，接著是使用方法，以及附上 August 最想應用的方式：調用 API 的 Demo。

---

## 簡單解釋 Web Workers

本段最後會提供的參考資源，把 Web Workers 都解釋得很清楚了，所以這段的說明，會用 August 的方式來簡單形容。

我們假設瀏覽器是一間便利商店，這間便利商店因為慣老闆的原因（咦？），只有一位員工，這位員工就是 JS 的主執行緒。超商員工是很辛苦的，又要上架商品、又要結帳、又要煮咖啡、又要幫顧客找網購的商品，然後薪水才這麼一點（哎這樣說好嗎？）

通常，「找網購商品」這件事是耗時最久的，因為員工要在一堆的包裹裡找到特定顧客的那件，耗掉的時間有可能會阻礙結帳，讓結帳的人流排到店門口。而這件事就是網頁上最常發生的調用 API，是不是很像？在 API 回應我們特定需要的資料前，我們就只能等，還什麼事情都不能做。

後來，老闆覺得這樣累績負面評價有害公司的名聲（如：讀取時間會影響 SEO 排名），所以他選擇了最快的解決方式：再找一位員工來，讓他在後面協助處理找包裹這件事，如果煮咖啡也覺得久，那就讓他順便處理煮咖啡好了。這位新來的員工，就是這篇在講的 Web Workers。

Web Workers，就是在網頁上除了 JS 主執行緒之外的另一條執行緒。

參考資源：

- [MDN Web Workers API](https://developer.mozilla.org/zh-TW/docs/Web/API/Web_Workers_API/Using_web_workers)
- [W3Schools HTML Web Workers API](https://www.w3schools.com/html/html5_webworkers.asp)
- [阮一峰 Web Worker 使用教程](https://www.ruanyifeng.com/blog/2018/07/web-worker.html)

---

## Web Workers 使用

Web Workers 的使用方式很簡單，整理成下圖：

![Web Workers 使用說明](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rhqpwffs83wcc2jdzkvz.png)

網頁的 JS 跟 Web Workers 溝通的方式就是 `postMessage`、`onmessage`。

`postMessage` 是傳送資料。

`onmessage` 是接收資料。

我們先看網頁上的主要 JS，我們命名為 main.js。

**main.js**

```js
const worker = new Worker('worker.js');

// 傳送資料
work.postMessage({ name: 'August' });

// 接收 Web Workers 來的資料
worker.onmessage = e => {
  const data = e.data;
  console.log(data);
}
```

接著來看 Web Workers 的內容，我們命名為 work.js。

**work.js**

```js
importScripts('https://cdnjs.cloudflare.com/ajax/libs/axios/1.6.0/axios.min.js');

// 接收資料
self.onmessage = e => {
  const data = e.data;
  if(data) {
    const result = axios.post(...); // 調用 API
    self.postMessage(result); // 傳送資料
  }
}
```

是的，你沒看錯，我也沒寫錯，work.js 在 importScript 時，可以引用 CDN，而且寫程式的方式可以用 ES6。

這點因為看的教程上都沒有，是問了 ChatGPT 後，再透過實作去嘗試才知道的。

---

## Web Workers 使用範例：調用 API

最後這段，是 August 寫了一個 Demo，讓 Web Workers 來處理調用 API 的部份，然後回傳給主執行緒，讓網頁上呈現結果。

完整的原始碼已放上 GitHub，不過有一段 August 想列出來，就是 Web Workers 處理 API 的部份。

原本 August 自己寫了一個，結果丟給 ChatGPT 看，想問它還有沒有可以優化的地方，殊不知，它就給了一個加上「限制最大請求數」的方式，覺得這樣子的方式更符合實際需求，就採用了。

{% embed https://gist.github.com/letswritetw/bbebfd339366507743240e124a628e5d %}

---

## Demo、原始碼

本篇的 Demo 跟原始碼，都放上 GitHub，取用前請分享此篇文章，或對 GitHub 專案點個星星，你的小小舉動，對本站都是大大的鼓勵。

Demo：<https://letswritetw.github.io/letswrite-web-workers/>

原始碼：<https://github.com/letswritetw/letswrite-web-workers>
How to Change the Bootstrap Primary Color in Vue 3.0 CLI
Published: 2023-11-05 02:26:22

# How to Change the Bootstrap Primary Color in Vue 3.0 CLI

While some may argue that Bootstrap has aged, I believe it remains a robust framework. Bootstrap simplifies code and enhances readability, making it a valuable tool for many developers, myself included.

This article is aimed at explaining how to customize the original color provided by Bootstrap to suit your preferences. If you wish to make this change, follow the instructions below.

## Installation of Bootstrap in Vue CLI

To integrate Bootstrap with Vue CLI, you can follow the official documentation available at https://bootstrap-vue.org/docs.
https://bootstrap-vue.org/docs

First, you need to install the required packages using npm:
```
npm install vue bootstrap bootstrap-vue
```

Next, you'll want to install the SASS library to use SASS in your Vue CLI project:
Install sass library for Vue CLI to use SASS.  
```
npm install sass-loader node-sass
```

## Customizing the Bootstrap Primary Color
To customize the primary color of Bootstrap in your Vue CLI project, you can create an SCSS (SASS) file and import it into your main.js file. This allows you to redefine the primary color to your preference.  

1: Create an SCSS file in your project. You can place it in the src/assets/scss directory. Let's name it bootstrap-custom.scss. Here's an example of what the file might contain:
```
$primary: rgb(248, 126, 250);

@import '~bootstrap/scss/bootstrap';
@import '~bootstrap-vue/src/index.scss';
```

In the example above, we redefine the $primary variable with your desired RGB color values. You can adjust these values to set your preferred primary color.  


2: In your main.js file, import the custom SCSS file you just created, like this:
```
import "./assets/scss/bootstrap-custom.scss"
// import 'bootstrap/dist/css/bootstrap.css' // Comment out or remove these lines
// import 'bootstrap-vue/dist/bootstrap-vue.css'
```

By importing the custom SCSS file, you override the Bootstrap primary color with your defined value. Be sure to comment out or remove the default Bootstrap CSS imports as shown above.

Now, Bootstrap in your Vue CLI project will use the customized primary color defined in bootstrap-custom.scss. You have successfully personalized the primary color of Bootstrap to match your project's design.

## Conclusion
In this article, we've seen how to quickly customize Bootstrap's primary color in a Vue 3.0 CLI project. Bootstrap's enduring power in simplifying code and improving readability is evident.

By following these steps, you can adapt the primary color to match your project's style, creating a cohesive user interface. Enjoy the flexibility of Bootstrap and Vue CLI for your web development journey.

For more details, refer to the official documentation and reach out to the developer community for assistance. Happy coding!