We Keep Coding

Vite can't resolve paths from CSS url()

I have a Vite 4 project that uses vanilla JS & no frameworks. When I reference an asset using CSS url(), it throws a 404 error. The path works fine in HTML img src. I saw the answer for Vue but don't know how it applies to my project without a framework. Merely importing an asset from the index.js file changes nothing.
_search-input.scss
.search-input {
width: 100%;
background-image: url("../../assets/icons/search.svg");
}
Index.js:
import "./styles/index.scss"
console.log("index file")
Project structure:
├── src/
│ ├── assets/
│ │ └── icons/
│ │ └── search.svg
│ ├── styles/
│ │ ├── components/
│ │ │ └── _search-input.scss
│ │ └── index.scss
│ └── index.js
└── index.html
I removed a single ../ from the path and now the image loads. However, isn't ../assets/icons/search.svg an invalid path? From search-input.scss I'm supposed to go up two levels to get to src/ and then reach assets. My IDE also complains that this path can't be resolved. Why does this work? What is this path relative to?

CSS url() paths are relative to the current css location, in contrast to HTML img src which is not relative to the current path.
Maybe try to add another ../ to your css path.

Parcel creates a new hashed file after updating a dynamically imported module

I'm using the verion 2.7 of Parcel for bundling my client side javascript. I have a index.ts where I group all my code. In some cases I have to use dynamic import statements:
example:
const { Menu } = await import('./Menu');
The issue that I can't solve: after each update on Menu.ts, Parcel creates a newly hashed Menu.[hash].js file instead of updating it.
npm run watch:js:
"watch:js": "parcel watch --no-hmr ./public/ts/index.ts --dist-dir ./public/js --public-url ./"
public folder structure:
.
└── public/
├── [...]
├── js/
│ ├── index.js
│ ├── index.js.map
│ ├── Menu.[hash-1].ts **! that's an issue !**
│ └── Menu.[hash-2].ts **! that's an issue !**
└── ts/
├── [...]
├── index.ts
└── Menu.ts

How to exclude files when create build in react js

Currently I am working one react js project. there i create two different app in one application (eg. app1 and app2).
i have render two app base on condition i want to deploy this app one by one firstly create build with app1 and
after few time create build with app2.
so what i want to do is when i m create build for folder app1 in that time i don't want move app2 folder in build.
and also don't want to move unnecessary components with build.
so is there any way to exclude my app2 folder from build and others file ? how can i achieve that?
here is my app structure.
.
└── myApplication/
├── public
└── src/
├── app1/
│ ├── assets
│ ├── service
│ ├── hooks
│ ├── components
│ └── index.js
├── app2/
│ ├── assets
│ ├── service
│ ├── hooks
│ ├── components
│ └── index.js
├── router.js
├── App.js
├── index.js
├── app.css
├── service
└── hooks

How to create a modal in moodle using mustache Template

How can i create a modal in moodle using mustache Template, the js must be in a separate file, i don't know hot to put this together, the documentation it's a little bit hard
I am doing this inside a local plugin.
I'm following the documentation, i have this file structure
├── amd
│ ├── build
│ │ └── modal.min.js
│ └── src
│ └── modal.js
├── classes
│ └── form
│ └── edit.php
├── index.php
├── manage.php
├── styles.css
├── templates
│ └── index.mustache
└── version.php
inside the index.php i call the js using this
$PAGE->requires->js_call_amd('amd/src/modal', 'init');
And in the modal.js i only have a console log, and it doesn't print i always get this error
define([], function() {
return {
init: function() {
console.log('Hello world');
},
};
});
Error :
ncaught Error: Script error for "amd/srcmodal"
http://requirejs.org/docs/errors.html#scripterror

Benefits of using bin files over .js in express-generator

If one wants to jump start a project in Node.js with express. one would use express-generator. After creating a new project your file tree will look like this
.
├── app.js
├── bin
│ └── www
├── package.json
├── public
│ ├── images
│ ├── javascripts
│ └── stylesheets
│ └── style.css
├── routes
│ ├── index.js
│ └── users.js
└── views
├── error.pug
├── index.pug
└── layout.pug
One thing that stood out for me is that to run the app you need to do node bin/www or a predefined shortcut npm run. My question is why would one use the www the way it is and not add a .js extension and remove #!/usr/bin/env node from the top of the file? Are there any benefits of doing it this way or is it a personal preference?

Let's look at the first line of the bin/www file:
#!/usr/bin/env node
This shebang tells the *nix operating system how to interpret the file if you try to run it as a program.
So this file can be started as a program. And in Linux traditionally executable files do not have an extension.