teleren/devto huggingface dataset:
Dependency hoisting in Yarn monorepos
Tags: webdev, javascript, yarn
Published: 2023-11-17 21:02:52

I ran into a strange problem the other day which demonstrates one of the problems with monorepos, at least when using Yarn 1.

I noticed that adding `@testing-library/react` to one of our packages caused tests in another unrelated package to suddenly start failing. This turned out to be a weird quirk of how Yarn "hoists" dependencies.

As a general rule, if you only have one version of a dependency in a workspace, Yarn will put it in `node_modules` at the top level. This avoids duplicating packages unnecessarily. However, sometimes different packages will depend on different versions of a library, in which case Yarn will put the version *used by the majority of packages* at the top level and create separate `node_modules` folders in the individual package directories for packages which depend on a different version.

The cause of the failing tests turned out to be this strange issue:

* In our monorepo, we have several packages built in React 18 and several built in React 17
* This means we have packages depending on `@testing-library/react` versions 14 and 12, which are compatible with the respective React versions
* We had more packages using React 18, but more packages using `@testing-library/react` version 12 (compatible with React 17)


This meant that we ended up with directories like this:

```
node_modules/
  @testing-library/
    react/ -- v12
      node_modules/
        react/ -- *v17, because the top level package is 18*

  react/ -- v18

packages/
  some-unrelated-package/
    node_modules/
      react/ -- v17
```

You'll notice there are two copies of React 17 here - one because the package itself depends on React, and one because the testing library at the top level *depends on a different version of React than the top level one*.

The end result was that both versions of React were loaded in tests (one by the code and one by the testing library), which of course got React super confused and caused a bunch of strange errors.

## Solutions

The best solution here would obviously be to upgrade everything to the same version of React. In fact, I'd say the moral of this story is to keep your dependencies in sync as much as possible in monorepos to avoid this kind of problem from the start.

But a couple of workarounds I found were
* Just test more packages. If every package with React is tested with that library, the number of packages depending on each version matches and the right versions get hoisted
* Use the [`nohoist` property](https://classic.yarnpkg.com/blog/2018/02/15/nohoist/) in `package.json` to force `@testing-library/react` not to be put at the top level. This means there will always be a copy per package, which will always use the nearest `react` (i.e. the same one as the package itself)

This is one of the trickier pitfalls I've run into with monorepos, and one you should absolutely try to avoid!
CI Workflow(with. GitHub Actions)
Published: 2023-11-17 20:33:03

Last week, I added unit and integration tests. However, I need to run the test whenever I push the commits to the repo. But, there is a good way to solve this, I did add CI workflow to GitHub Actions. 

#### Step 1: Go to GitHub Actions
#### Step 2: New workflow
#### Step 3: Choose a workflow

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uxll6spgw1gpxnpwa2gd.png)
#### Step 4: Create a `.yml` file based on your prefrence.

I chose `Node` and this is my `.yml` file for `Linting` and `Unit Tests`.
```node

name: Node.js CI

on:
    push:
        branches: ['main']
    pull_request:
        branches: ['main']

jobs:
    lint:
        name: ESLint
        runs-on: ubuntu-latest
        steps:
            - name: Check out code
              uses: actions/checkout@v3

            - name: Setup node
              uses: actions/setup-node@v3
              with:
                  node-version: '18'
                  cache: 'npm'

            - name: Install node dependencies
              run: npm ci

            - name: Run ESLint
              run: npm run lint

    unit-tests:
        name: Unit Tests
        runs-on: ubuntu-latest
        steps:
            - name: Check out code
              uses: actions/checkout@v3

            - name: Setup node
              uses: actions/setup-node@v3
              with:
                  node-version: '18'
                  cache: 'npm'
            - name: Install npm
              run: npm ci

            - name: Test
              run: npm run test

```

This workflow is triggered when you push the code or when you merge the PR. This CI workflow is successful after I merge the PR.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ocoyilmxaoey294ccdzk.png)

Also, when you create the PR, you must see GitHub is automatically running the CI workflow as below:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2t2p3x0e4wp3kc6vgilv.png)
VSCode Plugin For Feature Flags
Tags: vscode, ruby, react
Published: 2023-11-17 20:45:59

There's nothing like a cool editor extension. I'm so excited that I can edit feature flags right in VSCode. We thought about what would be cool and here are 3 things we came up with:

**Autocomplete for Feature Flags:** No more typos leading to bugs! Get suggestions for flag names as you type.

**Hover to Know:** Curious about a feature flag's status? Just hover over it in your code to see its current settings.

**Personal Overrides:** Test flags in your local setup without messing with the team's settings.


![Autocomplete feature flag names](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hp1w63h92bqt6i6vtmcl.gif)

If you're interested to learn how we did this, check out [Hands-On LSP Tutorial: Building a Custom Auto-Complete](https://www.prefab.cloud/blog/lsp-language-server-from-zero-to-completion/) which takes you step by step through adding an autocomplete of your own to VSCode.
Episode 23/45: Angular 17
Tags: webdev, javascript, programming, angular
Published: 2023-11-17 20:38:53

Angular 17 is out!

{% embed https://youtu.be/eKOvsV4ueYc %}

We can group the features into the new ApplicationBuilder, Signals, Template Syntax and the @defer command.

## ApplicationBuilder

The ApplicationBuilder powers ng build or ng serve. Under the hood, it doesn't webpack anymore. Instead, it runs on esbuild, a tool written in Go that runs significantly faster.

The ApplicationBuilder also includes SSR. In the past, we had to use @nguniversal. Now, SSR is a first-class citizen of Angular. If you migrate, you have to enable the new builder manually.

## Signals

Compared to Angular 16, there were three major changes.

First, there is no mutate method anymore.

Second, in 16, the Signal fired on every update method call, even if you didn't change the object reference. In 17, it checks against the object reference.

Third, is the local Change Detection. That means the change detection could run on a specific component in the component tree. 
To make this happen, the change can only be Signal (not a click or synchronous function), and the components have to set their strategy to OnPush.

## New Template Syntax & `@defer`
The "Star Feature" is definitely the new template syntax for if, for, switch and - brand-new - the defer. The defer command in the template creates a lazy-loaded chunk for its inner components. We don't have to do anything else. "Just use it!"

For more information, please read the official blog article and watch the official videos, and you will also find plenty of community content. There's no shortage of it.

{% embed https://www.youtube.com/live/Wq6GpTZ7AX0 %}
{% embed https://www.youtube.com/watch?v=3C5pvJ0DDo0 %}
{% embed https://blog.angular.io/introducing-angular-v17-4d7033312e4b %}
Authentication and Authorization with NestJS, JWT, Guards Nestjs-modules/mailer, Dto, and TypeORM
Published: 2023-11-17 20:21:30

1. Setting up NestJS:
•	Install NestJS globally: npm install -g @nestjs/cli
•	Create a new NestJS project: nest new your-project-name
•	Navigate to the project directory: cd your-project-name
2. Install Dependencies:
•	Install required packages: npm install @nestjs/jwt  @nestjs-modules/mailer class-validator sendgrid @nestjs/typeorm typeorm, @bcrypt
3. Configure TypeORM:
•	Set up your TypeORM configuration in app.module.js 
•	4. User Entity:
•	Create a User entity with necessary fields like email, password, password hashing etc., using TypeORM decorators.
•	BeforeInsert its replace the password with hashed characters using bcryptjs
5. User Module:
•	Create an authentication module using nest generate module user.
•	Inside the module, create a service (UserService) for handling authentication logic.
6. JWT Service:
•	Create a JwtModule to handle JWT configuration. Define a secret key and expiration time.
7. User Controller:
•	Create an authentication controller (UserController) with routes for login, registration, and password reset link and forgot password route.
8. Guards:
•	Implement a JWT guard using to validate JWT, Refresh token,logout token,reset password token, in requests. This guard will extract the token from the request and verify its validity.
9. Authorization:
•	Implement authorization using guards. Define roles and permissions for different routes. Use guards to check if the user has the necessary roles or permissions to continue.
10. Email Service:
•	Set up an email service using Nestjs-modules/mailer to send verification and new password to the emails. Inject this service into your user service.
11. Registration Flow:
•	When a user registers, hash their password and  create a verification token sent to the  user email using the Nestjs-modules/mailer.
12. Login Flow:
•	When a user logs in, validate their credentials, generate a JWT token, and return it in the response.
13. Password Reset Flow:
•	Implement a password reset mechanism. When a user requests a password reset, generate a token, send a reset link to the user email, and allow the user to access their password.
14. Protect Routes:
•	Use guards to protect routes that require authentication. Attach the guard to the route handler to ensure only authenticated users can access it i.e refresh token, log out token, reset password token, in this route.
16. Error Handling:
•	Implement robust error handling throughout your authentication and authorization logic to provide meaningful feedback to users using (DTO).

17. DTO:
Implement robust error handling throughout your authentication and authorization
My Journey with Svelte: From Vue to Svelte and the Joy of Pure JS Libraries
Tags: daisyui, sveltekit, go, business
Published: 2023-11-17 20:15:53

I apologize for my absence over the past few days. I've been incredibly busy, but I'm back with an exciting story to share. 

When I first started developing this web application, I utilized the Golang Gin framework and Vue 3. I have no significant complaints about Gin, but Gofiber is faster, and I prefer to minimize expenses for long-term sustainability. Building a successful startup is a daunting task, and every cent counts.

Regarding the frontend, I've been a Vue user for several years and naturally gravitated towards Vue 3. I appreciate its improved composition API, which makes it even more user-friendly. However, as the project grew, I faced challenges integrating external JS libraries due to the scarcity of Vue ports. I was reluctant to create my own ports due to time constraints, and using my own functions felt inadequate.

I had previously heard about Svelte and had even worked with it on a project during the Sapper era. I decided to revisit Svelte and installed SvelteKit and Svelte 3. Surprisingly, I grasped it quickly. Defining props is unnecessary; instead, you simply 

```
export let someprop
```
. Similarly, declaring computed properties is straightforward, using 

```
$:
```
 Everything is truly intuitive and effortless.

The most significant advantage of Svelte is its ease of incorporating pure JS libraries. 
While you can use 

```
onMount
```
 for this purpose, my preferred method is leveraging actions and easily integrating them using 

```
use:someaction
```
.

For the next post, I'll delve into the business side of my journey, including my current efforts to secure investors and partners. I'm also eager to learn about effective methods, websites, and forums for attracting sponsors and partners.

Please share any insights or recommendations you may have regarding finding investors and partners. I appreciate your support and look forward to your feedback.

[Image by pch.vector on Freepik](https://www.freepik.com/free-vector/teams-competing-prize-people-playing-tug-war-pulling-rope-with-golden-cup-flat-vector-illustration-competition-contest-concept_10613684.htm#query=pulling%20rope&position=6&from_view=keyword&track=ais&uuid=2031221e-4914-4192-8f0e-2b4c9c9a6ee7)
Adding Tools to TIL Project.
Tags: javascript, programming, webdev
Published: 2023-11-17 20:12:22

I created a branch and wrote tests for core functionalities using Jest. From command line argument parsing to file processing, all thing worked fine.

Next, we delved into testing the `txtToHtml` module. We crafted tests for each function—`textToHtml`, `markdownToHtml`, `generateSidebar`, and `generateIndexPage`.

While doing this I did encountered some hurdle that I addressed unexpected logging by modifying functions to return values. File system operations challenges were mitigated by creating necessary directories and utilizing temporary ones. Deprecation warnings prompted updates and transitions to ensure future compatibility. Module not found errors were resolved by verifying module paths and dependencies. Each challenge presented a learning opportunity, enhancing our understanding of the codebase and bolstering the reliability of our tests.

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


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



In tackling unexpected logging issues, I refactored functions to return values instead of logging directly. For challenges with file system operations, I implemented directory creation and leveraged temporary directories for testing. Deprecation warnings led to updates and transitions to maintain future compatibility. Resolving module not found errors involved thorough verification of module paths and dependencies. Each hurdle was an opportunity for learning, fostering a deeper understanding of the codebase and strengthening the reliability of our tests.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ihq209w71qk3za0yzd9.png)
Learn to code in 5 steps, and 3 habits, Hello folks,
Tags: beginners, learning, programming, productivity
Published: 2023-11-17 20:03:41

When you begin learning code and be on your first steps, 
You are very curious to write every word and repeating lines and blocks of code,
But guess what, it is the first mistake and the last thing you need to do.

(The main steps to learn programming) -The First Habit, no need to waste your time with remembering nonsense things.
- then what;
  All you need is just to:

1. copy paste the code blocks.
2. Read it, understand and grasp the general idea.
3. Gather all code blocks together.
4. Build and run the project.
5. And finally, trace errors and debug the bugs.
  _....and guess what, you have learned how to code, and have built and run your first programming application_ 😉.


(Syntax, programming basics and approaches) -The Second Habit, just read and understand then practice by implementing already existing things.
- if you don't know anything about syntax, code flow, and using IDE "Integrated Development Environment" (the software which helps you write the code, predict and autofull the code while you writing it, and find the errors in code (debug the code)),
Just you need to read about it, take this basics by reading / watching a course and just grasp the general idea of those things,
Once you implement those approaches while you build you first project (by just copy, paste,, read, understand the code,, compile it and debug any errors -as we said before), you will immediately live the live understanding for those concepts without repeating uselessly.


(Practicing and mastering process and acquiring more knowledg) -The Third Habit practice existing projects and search about errors and functions, methods, features and approaches you need.
- the last and your mastering step is to view a lot of projects in your speciality (Web, Mobile Application, or Game Development etc.), and repeating the steps above without writing the code or reproduce it.

In addition to learn to search and inquiry about any function, error or problem on the Internet (and for sure your stackoverflow will be your second home).

And after accomplishing many projects you will be able to navigate through your own way and to build a new projects on your own.
A Decade of Docker! 🐋
Tags: docker, containers, programming, devops
Published: 2023-11-17 19:09:24


Can you believe Docker first showed up in a lightning talk that got everyone talking? Today, I'd like to talk about the history of Docker 🐋

## The Birth of Docker

It all began over a decade ago. Docker, introduced in a lightning talk at PyCon US in 2013, was the brainchild of Solomon Hykes, an entrepreneur and programmer. Hykes, deeply immersed in the world of software development, sought to address a common challenge faced by developers: complexity and inconsistency in deploying applications across various environments.

So, what was the problem? It was the notorious "it worked on my machine issue." Developers often encountered scenarios where their code worked perfectly on their development environment but failed to function correctly when deployed elsewhere. This inconsistency was a significant pain point in software development.

Hykes envisioned a platform that could package applications and their dependencies into lightweight, portable containers. These containers, he believed, could be effortlessly deployed and executed consistently on any system, from a developer's laptop to a production server.

## The Birth of "Docker"

The name "Docker" was chosen to evoke the idea of shipping containers, which are standardized, easily transportable, and capable of holding a variety of goods 📦. Docker containers, in a similar vein, could hold software applications and their dependencies, making them transportable across different computing environments.

With Docker, developers could now create, share, and run applications in isolated, reproducible containers, eliminating the notorious "it works on my machine" problem.

## Docker's Journey Unfolds

Docker's journey unfolds as follows:

- **2013**: Solomon Hykes introduces Docker in a lightning talk at PyCon US, marking its inception.

- **2013-2014**: Docker gains early adopters and community support as developers recognize its potential.

- **2015**: Docker, Inc. is formed to provide commercial support and services around Docker.

- **Late 2010s**: Docker becomes a fundamental tool in the DevOps toolkit, used by organizations worldwide.

- **2020s**: Docker continues to evolve and adapt to the changing needs of the software development industry.

## A Developer's Dream

Docker revolutionized the way developers worked. It allowed developers to concentrate on writing code while abstracting away many of the infrastructure complexities. No longer did they have to worry about the intricate details of setting up development and production environments. Docker containers provide a consistent and efficient way to manage applications and their dependencies.

## First World Appearance of Docker

Here you can find the first world appearance of Docker 📺 ⭐ [Docker Lightning Talk at PyCon US 2013](https://lnkd.in/e2dsHsA3).

Happy learning! 👋
---
I'm a Cloud Engineer at Nordcloud.
WEREWOLF WEED
Tags: javascript, sql, 100daysofcode, digitalgremlin
Published: 2023-11-17 18:53:30

## Hi there 🤖

I'm **Christine**, and I'm *semi* new to the coding brick road! 


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

I'm currently pursuing my Full-Stack Web Development certification, and excited to create some nifty things. 

Check out my latest project and let me know what you think: 

**[WEREWOLF WEED Employee Database](https://github.com/christiecamp/werewolf-weed)**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zc1u5d5w7tmbsxe3t1bw.png)
WEREWOLF WEED
Tags: javascript, sql, 100daysofcode, digitalgremlin
Published: 2023-11-17 18:53:30

## Hi there 🤖

I'm **Christine**, and I'm *semi* new to the coding brick road! 


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

I'm currently pursuing my Full-Stack Web Development certification, and am excited to create some nifty things. 

Check out my latest project and let me know what you think: 

**[WEREWOLF WEED Employee Database](https://github.com/christiecamp/werewolf-weed)**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zc1u5d5w7tmbsxe3t1bw.png)
Why 0.1 +0.2 is not equal to 0.3 is javaScript ???
Published: 2023-11-17 18:39:03


Its because 0.1+0.2 will not give you 0.3 expected 
Because numbers in JS are stored in binary format and it uses
IEEE-754 format to store the number

Here the CATCH ISSSS  if the number size is longer than 64 bit then the least significant figures are rounded up

The solution is to use toPrecision() this method allows to cut or round up the remaining disturbing noise in this calculation for eg 


if say let sum=0.1 +0.2 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o9cm1cxpgbi373jza9nj.png)
let result=parseFloat(sum.toPrecision(12))
now console.log(result===0.3)

> javascriptinterviewquestions
Great News AWS now supports.......
Published: 2023-11-17 18:35:35

AWS now supports URI path aggregation keys for rate-based rules. This means that we can limit the number of requests from an IP address on a specific URI. Previously, we had to use scoped-down statements to specify URIs for rate limiting, requiring explicit URI definitions in the rule configuration. With this feature, we can track request rates for any URI path without the need for additional scoped-down statements. This allows us to set stricter limits per IP address per URI, thereby enhancing security.

1. https://www.youtube.com/watch?v=4asDdOYKE5o
2. https://docs.aws.amazon.com/waf/latest/developerguide/waf-rule-statement-type-rate-based-aggregation-options.html
3. https://docs.aws.amazon.com/waf/latest/developerguide/waf-rule-statement-transformation.html

@awsclouddev @awsgeekcoder @amazeinvent
안전보증놀이터 - FLASH BET, 특별한 혜택과 다채로운 게임으로 여러분을 초대합니다!
Published: 2023-11-17 18:31:43


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

입플 이벤트 진행 중!

신규가입 쿠폰이벤트 및 매충전 20% 무한지급 이벤트로 여러분을 환영합니다!
다양한 이벤트로 더 즐거운 게임을 즐기세요!

매.충전 20% 무한지급: 매 충전 시 20%의 무한지급으로 게임을 더욱 풍성하게 즐겨보세요!
지인추천 이벤트: 지인을 초대하고 특별한 혜택을 누리세요!
프리미엄 출석이벤트: 매일 출석으로 특별한 상품을 획득하세요!
에볼루션, 플레이텍 카지노 및 카지노슬롯머신 이용 가능!

미니게임 다수: MGM바카라, 파워볼, bet365 가상게임 등 다양한 미니게임으로 즐거운 시간을 보내세요.
스포츠 및 라이브배팅: 다양한 스포츠 종목에서 실시간으로 베팅하여 즐거움을 더하세요!

찾아가기: fla-k1.com
가입코드: A T

FLASH BET으로 안전하고 즐거운 게임을 경험하세요! 여러분의 행운이 가득할 것입니다. 지금 바로 참여하세요! 🚀

주소 : -> http://fla-k1.com			
코드 : A T			
❤️ 더많은 사진, 영상 보러가기!			
☑️ 네이버 -> https://cafe.naver.com/browncqpaq			
☑️ 네이버카페 "AI DataBase" 검색			
☑️ 더 많은 입플 이벤트 진행사이트 확인-> http://입플사이트추천.com			
❤️메이저 토토사이트 -> https://start.me/p/OmrOQ0			
❤️메이저 안전놀이터 -> https://start.me/p/lLg592
❤️먹.튀검증사이트 -> https://www.mtmt114.com			


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