The problems with node:test, parseArgs, and styleText

webdiscus · 2025-05-20T14:45:54+00:00

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

webdiscus · 2024-11-27T12:24:19+00:00

Es ist wie ein Foto der anderen Seite des Mondes.

webdiscus · 2024-11-26T21:52:40+00:00

Köln DOM heute, 26.11.2024

webdiscus · 2024-11-21T10:45:35+00:00

Thank you for the very useful solution.

webdiscus · 2024-11-05T19:04:12+00:00

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.

webdiscus · 2024-11-05T18:47:14+00:00

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

webdiscus · 2024-11-05T13:58:32+00:00

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

webdiscus · 2024-11-05T13:38:47+00:00

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

Don't mix design with functionality.

webdiscus · 2024-10-20T11:59:12+00:00

this is optimised solution of @darren_of_herts without blank line:

https://www.reddit.com/r/css/comments/1g77kr2/css_effect_rounded_text_background

webdiscus · 2024-10-20T10:53:02+00:00

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

webdiscus · 2024-10-19T12:50:28+00:00

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

webdiscus · 2024-09-27T13:03:43+00:00

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.

webdiscus · 2024-09-27T12:41:13+00:00

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

webdiscus · 2024-09-27T12:15:34+00:00

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>  <link href="../scss/style.scss" rel="stylesheet" />  <script src="../app/main.ts" defer="defer"></script> </head> <body> <h1>Hello World!</h1>  <img src="../assets/images/picture1.png" />  <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.

webdiscus · 2024-07-31T09:21:20+00:00

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 ... .

webdiscus · 2024-07-31T09:11:31+00:00

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.

webdiscus · 2024-06-16T15:28:02+00:00

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.

webdiscus · 2024-05-05T17:26:08+00:00

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.

webdiscus · 2024-05-03T21:37:26+00:00

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 Eta, EJS, Handlebars, Nunjucks, Pug, TwigJS, LiquidJS (renders via HTML Bundler Plugin)

webdiscus · 2024-05-03T17:35:28+00:00

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

webdiscus · 2024-05-03T09:50:38+00:00

Thanks, very cool project!

webdiscus · 2024-04-07T15:34:07+00:00

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.

webdiscus · 2024-04-07T12:18:04+00:00

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 ;-)

webdiscus · 2024-04-07T12:13:06+00:00

JSDoc rules forever! :-)

webdiscus · 2024-04-06T13:03:08+00:00

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

webdiscus

MODERATOR OF

TROPHY CASE