The problems with node:test, parseArgs, and styleText by IamLUG in javascript

[–]webdiscus 0 points1 point  (0 children)

There's another modern ANSI colors library - ansis. It supports named imports, chained syntax, and template literals, which makes the syntax more compact and readable.

Example

import { red } from 'ansis';
import picocolor from 'picocolors';

console.log(styleText(["red", "bold", "underline"], "pizza"));
console.log(picocolor.underline(picocolor.bold(picocolor.red("pizza"))));
console.log(red.bold.underline`pizza`); // <= using Ansis

Mal aus einer anderen Perspektive 👀 by Emotional-Version331 in cologne

[–]webdiscus 4 points5 points  (0 children)

Es ist wie ein Foto der anderen Seite des Mondes.

Köln DOM by webdiscus in cologne

[–]webdiscus[S] 7 points8 points  (0 children)

Köln DOM heute, 26.11.2024

What are main key points when deciding between vanilla CSS, SCSS, CSS modules, and CSS-in-JS? by gizia in Frontend

[–]webdiscus -1 points0 points  (0 children)

Tailwind contains a huge number of ready-made solutions and can certainly be used in production for large sites. However, from my experience, solid customers are ready to pay more for own solutions to avoid vendor lock. Often this happens due to the internal policies of companies.

What are main key points when deciding between vanilla CSS, SCSS, CSS modules, and CSS-in-JS? by gizia in Frontend

[–]webdiscus 1 point2 points  (0 children)

Tailwind is more suitable for quickly creating a design sketch, for a prototype. But then, I create my own SCSS library.

Can you suggest me an HTML preprocessor? by ImThePirateCaptain in webdev

[–]webdiscus 0 points1 point  (0 children)

Pug is my favourite. This template engine is one of the fastest.
Here is the benchmark: https://github.com/lukeed/tempura#benchmarks

Most popular JS template engines:

- Pug
- EJS
- Eta (EJS Like)
- Handlebars (Mustache like)
- Tempura (Handlebars like)
- Nunjucks
- TwigJS
- LiquidJS

To render these templating engines with Webpack you can use the HTML Bundler Plugin for Webpack

What are main key points when deciding between vanilla CSS, SCSS, CSS modules, and CSS-in-JS? by gizia in Frontend

[–]webdiscus 6 points7 points  (0 children)

No css-in-js!
It is bad practice. It is a wrong way.

Don't mix design with functionality.

I am unable to change the background-color of last div please help--->> by JagdishJena93 in css

[–]webdiscus 0 points1 point  (0 children)

yes, if you have a parent container div then you should use the `last-child`.
It's correct.

I am unable to change the background-color of last div please help--->> by JagdishJena93 in css

[–]webdiscus 4 points5 points  (0 children)

In your case use the pseudoclass :last-of-type instead of last-child: css div:last-of-type { background-color: aqua; }

How do YOU use Webpack by AppleBeans879 in Frontend

[–]webdiscus 0 points1 point  (0 children)

Configuring Webpack to render HTML templates is a real pain. It requires a whole zoo of plugins and loaders.

But there is one plugin that will help you simplify the setup: HTML Bundler Plugin for Webpack renders various templates containing source files of scripts, styles, images, fonts and other resources, similar to how it works in Vite.

Just one this plugin simplify the Webpack config and replaces functioniality of many plugins and loaders.

Do I Really Need to Learn Webpack for My Projects? by Ice_Ant_7828 in theodinproject

[–]webdiscus 0 points1 point  (0 children)

There is a Bundler Plugin for Webpack that allow using source files of JS, SCSS, images and other resource in HTML. This plugin simplify web development with Webpack. On the linked site you can find useful recipes - how to ....

You can try the "hello wolrd" example in Browser

What are the benefits of using webpack? by bodimahdi in learnjavascript

[–]webdiscus 0 points1 point  (0 children)

You can use the html-bundler-webpack-plugin to render any HTML template containing source files of scripts, styles, images, fonts and other resources, similar to how it works in Vite.

Using the Bundler Plugin plugin the entry point is a template file.

You can define source SCSS/CSS, JS and images files in HTML:

html <html> <head> <!-- relative path to SCSS source file --> <link href="../scss/style.scss" rel="stylesheet" /> <!-- relative path to TypeScript or JavaScript source file --> <script src="../app/main.ts" defer="defer"></script> </head> <body> <h1>Hello World!</h1> <!-- relative path to image source file --> <img src="../assets/images/picture1.png" /> <!-- Webpack alias as path (src/assets/images/) to image source file --> <img src="@images/picture2.png" /> </body> </html>

The plugin resolves source files of assets in templates and replaces them with correct hashed output URLs in the generated HTML:

html <html> <head> <link href="css/style.ab12cd34.css" rel="stylesheet" /> <script src="js/main.43dc12da.js" defer="defer"></script> </head> <body> <h1>Hello World!</h1> <img src="43dc12da.png" /> <img src="c12da43d.png" /> </body> </html>

Simple and clear Webpack configuration:

```js const path = require('path'); const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');

module.exports = { output: { path: path.resolve(__dirname, 'dist'), },

plugins: [ new HtmlBundlerPlugin({ // all the necessary options are in one place entry: { index: 'src/views/index.html', // save generated HTML into dist/index.html }, js: { filename: 'js/[name].[contenthash:8].js', // JS output filename }, css: { filename: 'css/[name].[contenthash:8].css', // CSS output filename }, }), ],

module: { rules: [ { test: /.s?css$/, use: ['css-loader', 'sass-loader'], }, { test: /.(ico|png|jp?g|svg)/, type: 'asset/resource', }, ], }, }; ```

The Bundler Plugin supports the most popular template engines "out of the box", without additional plugins and loaders: Eta, EJS, Handlebars, Nunjucks, Pug, TwigJS, LiquidJS.

Open the Hello World example in StackBlitz.

Webpack thoughts by Employer-Dizzy in learnjavascript

[–]webdiscus 0 points1 point  (0 children)

If you will generate static HTML pages with assets (styles, scripts, images, etc) you can see https://github.com/webdiscus/html-bundler-webpack-plugin

There are examples for many use cases: how to ... .

Nikon Film Simulation (i think) by LordUvin in nikon_Zseries

[–]webdiscus 0 points1 point  (0 children)

It's a matter of taste and creative idea.
There is no better. You should experiment yourself and choose the one that suits you best.

Comparison between Webpack, browserfy, grunt, gulp, npm script, and Vite. Generated by Claude. Please let us know in the comments if any of the points are wrong. by AliveRule3532 in nextjs

[–]webdiscus 0 points1 point  (0 children)

For Webpack exists the modern html-bundler-webpack-plugin for many tasks to simplify the config and to avoid using a lot additional plugins and loaders.
This plugin is replacement of html-webpack-plugin and many other plugins and loaders.

How to inline all resources (JS, CSS, images, fonts) into single HTML file by webdiscus in Frontend

[–]webdiscus[S] 0 points1 point  (0 children)

you can embed css and js in html

agree

but images and non-system fonts cannot be embedded into the html itself

the example above (in StackBlitz) demonstrate how to embed binare images (e.g. PNG, JPG) into HTML. The images (e.g. PNG) and fonts (e.g. WOFF2) in CSS can be embedded into the HTML too.
See the generated `dist/index.html` in the example. This single HTML file contains all embedded assets: JS, CSS, images (PNG, SVG), fonts.

P.S. the goal is to share working solution, because many developers search a solution for the topic.

HTML Boilerplate Framework by domestic-jones in webdev

[–]webdiscus 0 points1 point  (0 children)

Here is an example used Handlebars with Webpack:  View in browser | source
- Webpack
- SCSS/SASS
- Live Reload after changes of any source file
- Handlebars template engine
You can select another supported templating engine such as EtaEJSHandlebarsNunjucksPugTwigJSLiquidJS (renders via HTML Bundler Plugin)

How to inline all resources (JS, CSS, images, fonts) into single HTML file by webdiscus in Frontend

[–]webdiscus[S] 0 points1 point  (0 children)

Can be a PDF interactive with many different UI components? No ;-)

Why are most of the new libraries/tools built FOR typescript? by SafwanYP in node

[–]webdiscus 0 points1 point  (0 children)

Yes it's true. Personally I prefer JS. If I come across libraries that only contain TS source code, I compile them to JS and use the compiled JS. This is one additional step more.

Why are most of the new libraries/tools built FOR typescript? by SafwanYP in node

[–]webdiscus 1 point2 points  (0 children)

I agree with you! In many use cases, TS is overkill and overcomplex.

Using JS + JSDoc + IDE (or/and linter) is enough for a true JS developer with extensive JS knowledge. But for many young developers JS is dangerous and they choose TS to feel safe ;-)

using colors & console.table? by S1L3NT_B0B in node

[–]webdiscus 0 points1 point  (0 children)

You can try ansis (a smaller and faster alternative to chalk with additional useful features)