I'm officially a curmudgeon. Here's a rant about the Shadcn component library and how over-complicated its radio buttons are: https://paulmakeswebsites.com/writing/shadcn-radio-button/

(Inspired by this week's work frustrations lol)

#WebDev #CSS #HTML #JavaScript

dailycoding - 20260119 / graphic
#p5js #javascript #Processing #generativeart #creativecoding #dailycoding
code : https://openprocessing.org/sketch/2850552

dailycoding - 20260119 / graphic
#p5js #javascript #Processing #generativeart #creativecoding #dailycoding
code : https://openprocessing.org/sketch/2850552

주고받는 이메일 데이터에 AI를 활용하는 것에 대한 이야기가 나왔다.

하지만, 이걸 위해 메일 서버를 별도로 구축하거나, 메일 클라이언트와 검색 기능 등을 별도로 코딩하기에는 아무리 AI Code Generation을 쓴다고 해도, 쓸만한 결과물이 나오기까지의 과정이 여간 쉬운 일이 아니다.

결국, 이메일과 관련된 모든 기능이 이미 있는 "MS Office"에 붙어서 바로 코딩할 수 있는 JS 프레임워크를 이용하기로 했다.

MS Outlook의 메일을 AI로 분석하는 실제 예시

// Analyze Microsoft Outlook data with ChatGPT
// Require: WelsonJS framework (https://github.com/gnh1201/welsonjs)
// Workflow: Microsoft Outlook -> OpenAI -> Get Response
var Office = require("lib/msoffice");
var LIE = require("lib/language-inference-engine");

function main(args) {
    var prompt_texts = [];

    var keyword = "example.com";
    var maxCount = 10;
    var previewLen = 160;

    console.log("Searching mails by sender OR recipient contains: '" + keyword + "'.");
    console.log("This test uses Restrict (Sender/To/CC/BCC) + Recipients verification.");
    console.log("Body preview length: " + previewLen);

    var outlook = new Office.Outlook();
    outlook.open();
    outlook.selectFolder(Office.Outlook.Folders.Inbox);

    var results = outlook.searchBySenderOrRecipientContains(keyword);
    console.log("Printing search results. (max " + maxCount + ")");

    results.forEach(function (m, i) {
        var body = String(m.getBody() || "");
        var preview = body.replace(/\r/g, "").replace(/\n+/g, " ").substr(0, previewLen);
        
        var text = "#" + String(i) +
            " | From: " + String(m.getSenderEmailAddress()) +
            " | To: " + String(m.mail.To || "") +
            " | Subject: " + String(m.getSubject()) +
            " | Received: " + String(m.getReceivedTime());

        console.log(text);
        console.log("  Body: " + preview);
        
        // Add an email data to the prompt text context
        prompt_texts.push(text);
        
        // The body to reduce token usage and avoid sending overly large/sensitive content.
        var bodyForPrompt = body;
        var maxBodyLengthForPrompt = 2000; // Keep the body snippet short
        if (bodyForPrompt.length > maxBodyLengthForPrompt) {
            bodyForPrompt = bodyForPrompt.substring(0, maxBodyLengthForPrompt) + "...";
        }
        prompt_texts.push("  Body: " + bodyForPrompt);
    }, maxCount);

    outlook.close();

    // build a AI prompt text
    var instruction_text = "This is an email exchange between the buyer and me, and I would appreciate it if you could help me write the most appropriate reply.";
    prompt_texts.push(instruction_text);

    // complete the prompt text
    var prompt_text_completed = prompt_texts.join("\r\n");

    //console.log(prompt_text_completed);  // print all prompt text

    // get a response from AI
    var response_text = LIE.create().setProvider("openai").inference(prompt_text_completed, 0).join(' ');

    console.log(response_text);
}

exports.main = main;

실행 방법

1. CLI 사용

모든 작성 및 저장을 마친 후, 다음 명령을 통해 실행한다. (outlook_ai.js 파일로 저장했을 때.

cscript app.js outlook_ai

2. GUI 사용

모든 작성 및 저장을 마친 후, WelsonJS Launcher 앱을 통해 실행한다.

실행하면 어떤 결과가 나오는가?

메일 내용에는 개인정보가 포함되어 있으므로 예시는 따로 첨부하지 않았다.

위 코드의 작업이 성공하면 메일 내용이 출력되면서, OpenAI 서버에서 분석을 마친 결과값을 얻어올 수 있다.

I'm officially a curmudgeon. Here's a rant about the Shadcn component library and how over-complicated its radio buttons are: https://paulmakeswebsites.com/writing/shadcn-radio-button/

(Inspired by this week's work frustrations lol)

#WebDev #CSS #HTML #JavaScript

I'm officially a curmudgeon. Here's a rant about the Shadcn component library and how over-complicated its radio buttons are: https://paulmakeswebsites.com/writing/shadcn-radio-button/

(Inspired by this week's work frustrations lol)

#WebDev #CSS #HTML #JavaScript

Is there, like, a javascript library for manipulating midi files?

I was going to write a format converter in Python, but then I thought it would be a lot more useful to more organ grinders if it could run in a web page.

Webmidi js is super cool, but, like only does a small part of what i need from a midi library.

#midi #javascript

Is there, like, a javascript library for manipulating midi files?

I was going to write a format converter in Python, but then I thought it would be a lot more useful to more organ grinders if it could run in a web page.

Webmidi js is super cool, but, like only does a small part of what i need from a midi library.

#midi #javascript

ほわあ、jQueryが20周年で4.0.0をリリースかあ。触らなくなって結構経つなあ。

/ jQuery 4.0.0 | Official jQuery Blog https://blog.jquery.com/2026/01/17/jquery-4-0-0/

#javascript

dailycoding - 20260117 / graphic
#p5js #javascript #Processing #generativeart #creativecoding #dailycoding
code : https://openprocessing.org/sketch/2849704

dailycoding - 20260117 / graphic
#p5js #javascript #Processing #generativeart #creativecoding #dailycoding
code : https://openprocessing.org/sketch/2849704

Temporal is out!

It's about time (literally).

Time to delete some abhorrent regex.

https://piccalil.li/blog/date-is-out-and-temporal-is-in/

#javascript #web #WebDev

RE: https://theforkiverse.com/@louis/115907631989435204

One last time for old times sake. Collab with @olivia yielded 15/28

https://jsdate.wtf/

#javascript #web #WebDev

RE: https://theforkiverse.com/@louis/115907631989435204

One last time for old times sake. Collab with @olivia yielded 15/28

https://jsdate.wtf/

#javascript #web #WebDev

Temporal is out!

It's about time (literally).

Time to delete some abhorrent regex.

https://piccalil.li/blog/date-is-out-and-temporal-is-in/

#javascript #web #WebDev

This sketch also runs on #DOjS, my #p5js compatible #CreativeCoding platform for #MSDOS.
Only change is that I needed to remove the SVG rendering as that is not supported.

I will make the source available later.

#RetroComputing #JavaScript

🚩✊ Friday is Dependency Deletion Day! Today on the chopping block: rimraf (103,000,000 downloads/week). Unless your Node.js version is from the Cretaceous, rimraf delegates to fs.rm under the hood anyway, so you might as well just skip the middleman. Free your node_modules, use fs.rm!

https://nodejs.org/docs/latest/api/fs.html#fspromisesrmpath-options

#javascript #webdev

dailycoding - 20260116 / graphic
#p5js #javascript #Processing #generativeart #creativecoding #dailycoding
code : https://openprocessing.org/sketch/2849082

dailycoding - 20260116 / graphic
#p5js #javascript #Processing #generativeart #creativecoding #dailycoding
code : https://openprocessing.org/sketch/2849082

🚩✊ Friday is Dependency Deletion Day! Today on the chopping block: rimraf (103,000,000 downloads/week). Unless your Node.js version is from the Cretaceous, rimraf delegates to fs.rm under the hood anyway, so you might as well just skip the middleman. Free your node_modules, use fs.rm!

https://nodejs.org/docs/latest/api/fs.html#fspromisesrmpath-options

#javascript #webdev

Your CLI's completion should know what options you've already typed by @hongminhee https://lobste.rs/s/5se1tq #javascript #programming
https://hackers.pub/@hongminhee/2026/optique-context-aware-cli-completion

Your CLI's completion should know what options you've already typed by @hongminhee https://lobste.rs/s/5se1tq #javascript #programming
https://hackers.pub/@hongminhee/2026/optique-context-aware-cli-completion

Your CLI's completion should know what options you've already typed by @hongminhee https://lobste.rs/s/5se1tq #javascript #programming
https://hackers.pub/@hongminhee/2026/optique-context-aware-cli-completion

I need to create a webapp that gets data from a csv file and stores in sqlite db, and this db data has to fill a docx template file. Which language is better for the job?
#Go #Javascript or #Python ?

dailycoding - 20260112 / graphic
#p5js #javascript #Processing #generativeart #creativecoding #dailycoding
code : https://openprocessing.org/sketch/2845124

dailycoding - 20260112 / graphic
#p5js #javascript #Processing #generativeart #creativecoding #dailycoding
code : https://openprocessing.org/sketch/2845124

dailycoding - 20260110 / graphic
#p5js #javascript #Processing #generativeart #creativecoding #dailycoding
code : https://openprocessing.org/sketch/2843917

dailycoding - 20260110 / graphic
#p5js #javascript #Processing #generativeart #creativecoding #dailycoding
code : https://openprocessing.org/sketch/2843917

MiniShader is a small JS/WebGL renderer for prototyping fragment shaders locally. It provides common uniforms, up to three image/video inputs, and can export a standalone HTML page.

https://github.com/Rabenauge/minishader
#shader #webgl #js #javascript

MiniShader is a small JS/WebGL renderer for prototyping fragment shaders locally. It provides common uniforms, up to three image/video inputs, and can export a standalone HTML page.

https://github.com/Rabenauge/minishader
#shader #webgl #js #javascript

dailycoding - 20260109 / graphic
#p5js #javascript #Processing #generativeart #creativecoding #dailycoding
code : https://openprocessing.org/sketch/2842638

dailycoding - 20260109 / graphic
#p5js #javascript #Processing #generativeart #creativecoding #dailycoding
code : https://openprocessing.org/sketch/2842638

#javascript #frontend #html #css Can anyone recommend a very lightweight charting lib?

Web dependencies are broken. Can we fix them?

Dear JS ecosystem, I love you, but you have a dependency management problem when it comes to the Web, and the time has come for an intervention.
— by @leaverou

🤷 https://lea.verou.me/blog/2026/web-deps/

#webdev #frontend #npm #javascript #js #fixthem #dependencies #frontend #dev #fixit #broken #web

dailycoding - 20260108 / graphic
#p5js #javascript #Processing #generativeart #creativecoding #dailycoding
code : https://openprocessing.org/sketch/2842004

Web dependencies are broken. Can we fix them?

Dear JS ecosystem, I love you, but you have a dependency management problem when it comes to the Web, and the time has come for an intervention.
— by @leaverou

🤷 https://lea.verou.me/blog/2026/web-deps/

#webdev #frontend #npm #javascript #js #fixthem #dependencies #frontend #dev #fixit #broken #web

dailycoding - 20260108 / graphic
#p5js #javascript #Processing #generativeart #creativecoding #dailycoding
code : https://openprocessing.org/sketch/2842004

SocialDocs — Developer Documentation for ActivityPub & Fediverse

The comprehensive developer resource for ActivityPub, Mastodon, and the Fediverse

🧑‍💻 https://socialdocs.org

#fediverse #activitypub #webdev #js #dev #web #mastodon #javascript #socialdocs

SocialDocs — Developer Documentation for ActivityPub & Fediverse

The comprehensive developer resource for ActivityPub, Mastodon, and the Fediverse

🧑‍💻 https://socialdocs.org

#fediverse #activitypub #webdev #js #dev #web #mastodon #javascript #socialdocs

catswords-jsrt-rs provides minimal ChakraCore bindings for Rust.

https://github.com/gnh1201/catswords-jsrt-rs

#rust #opensource #javascript

catswords-jsrt-rs provides minimal ChakraCore bindings for Rust.

https://github.com/gnh1201/catswords-jsrt-rs

#rust #opensource #javascript

dailycoding - 20260107 / graphic
#p5js #javascript #Processing #generativeart #creativecoding #dailycoding
code : https://openprocessing.org/sketch/2840348

dailycoding - 20260107 / graphic
#p5js #javascript #Processing #generativeart #creativecoding #dailycoding
code : https://openprocessing.org/sketch/2840348

This week's #WebOrigami comic: Inline paths

More about Origami JavaScript expressions: https://weborigami.org/language/expressions
HTML comic: https://weborigami.org/comics/inline-paths.html

#programming #javascript

This week's #WebOrigami comic: Inline paths

More about Origami JavaScript expressions: https://weborigami.org/language/expressions
HTML comic: https://weborigami.org/comics/inline-paths.html

#programming #javascript

dailycoding - 20260105 / graphic
#p5js #javascript #Processing #generativeart #creativecoding #dailycoding
code : https://openprocessing.org/sketch/2839284

dailycoding - 20260105 / graphic
#p5js #javascript #Processing #generativeart #creativecoding #dailycoding
code : https://openprocessing.org/sketch/2839284

JavaScript engines zoo https://lobste.rs/s/rgkpv3 #javascript
https://zoo.js.org/

dailycoding - 20260103 / graphic
#p5js #javascript #Processing #generativeart #creativecoding #dailycoding
code : https://openprocessing.org/sketch/2838295

dailycoding - 20260103 / graphic
#p5js #javascript #Processing #generativeart #creativecoding #dailycoding
code : https://openprocessing.org/sketch/2838295

Designing type-safe sync/async mode support in TypeScript https://lobste.rs/s/844jrt #api #javascript #plt
https://hackers.pub/@hongminhee/2026/typescript-sync-async-type-safety

Designing type-safe sync/async mode support in TypeScript https://lobste.rs/s/844jrt #api #javascript #plt
https://hackers.pub/@hongminhee/2026/typescript-sync-async-type-safety

Designing type-safe sync/async mode support in TypeScript https://lobste.rs/s/844jrt #api #javascript #plt
https://hackers.pub/@hongminhee/2026/typescript-sync-async-type-safety

Remember the old #html , #css and #javascript badges?
These came out around around 15 years ago....
I'm getting old

Remember the old #html , #css and #javascript badges?
These came out around around 15 years ago....
I'm getting old

Hello world! It's #introduction time!

I'm Fabio, a software developer originally from #Brazil based in Toronto. I work mostly with #Ruby and #Javascript but I'm always trying new languages and stacks because why not?

I'm very much an AI skeptic – borderline hater when it comes to AI "art" – but I keep an open mind and I'm very familiar with the available tools (hence the skepticism/hate).

I also make music sometimes - mostly electronic using #Ableton, #DirtyWaveM8, #PolyendTracker and other bits and pieces, including live drums!

I'm openly #queer, #bisexual and #AntiFascist

Released Vertana 0.1.0—agentic #translation for #TypeScript/#JavaScript.

Instead of just passing text to an #LLM, it autonomously gathers context from linked pages and references to produce translations that actually understand what they're #translating.

• Docs: https://vertana.org/
• GitHub: https://github.com/dahlia/vertana

#opensource

Released Vertana 0.1.0—agentic #translation for #TypeScript/#JavaScript.

Instead of just passing text to an #LLM, it autonomously gathers context from linked pages and references to produce translations that actually understand what they're #translating.

• Docs: https://vertana.org/
• GitHub: https://github.com/dahlia/vertana

#opensource

Released Vertana 0.1.0—agentic #translation for #TypeScript/#JavaScript.

Instead of just passing text to an #LLM, it autonomously gathers context from linked pages and references to produce translations that actually understand what they're #translating.

• Docs: https://vertana.org/
• GitHub: https://github.com/dahlia/vertana

#opensource

Released Vertana 0.1.0—agentic #translation for #TypeScript/#JavaScript.

Instead of just passing text to an #LLM, it autonomously gathers context from linked pages and references to produce translations that actually understand what they're #translating.

• Docs: https://vertana.org/
• GitHub: https://github.com/dahlia/vertana

#opensource

Released Vertana 0.1.0—agentic #translation for #TypeScript/#JavaScript.

Instead of just passing text to an #LLM, it autonomously gathers context from linked pages and references to produce translations that actually understand what they're #translating.

• Docs: https://vertana.org/
• GitHub: https://github.com/dahlia/vertana

#opensource

Released Vertana 0.1.0—agentic #translation for #TypeScript/#JavaScript.

Instead of just passing text to an #LLM, it autonomously gathers context from linked pages and references to produce translations that actually understand what they're #translating.

• Docs: https://vertana.org/
• GitHub: https://github.com/dahlia/vertana

#opensource

Why I 🧡 the web.

The ASCII Side of the Moon

https://aleyan.com/projects/ascii-side-of-the-moon

"A rendering of the Moon in glorious 7-bit ASCII".

#javascript #webdev #moon

Why I 🧡 the web.

The ASCII Side of the Moon

https://aleyan.com/projects/ascii-side-of-the-moon

"A rendering of the Moon in glorious 7-bit ASCII".

#javascript #webdev #moon

dailycoding - 20251229 / graphic
#p5js #javascript #Processing #generativeart #creativecoding #dailycoding
code : https://openprocessing.org/sketch/2836528

dailycoding - 20251229 / graphic
#p5js #javascript #Processing #generativeart #creativecoding #dailycoding
code : https://openprocessing.org/sketch/2836528

dailycoding - 20251228 / graphic
#p5js #javascript #Processing #generativeart #creativecoding #dailycoding
code : https://openprocessing.org/sketch/2836152

dailycoding - 20251228 / graphic
#p5js #javascript #Processing #generativeart #creativecoding #dailycoding
code : https://openprocessing.org/sketch/2836152

I'm thinking of learning React/NextJS/Typescript. Is this a good idea?
I know HTML and CSS like the back of my hand, and half know Javascript (and PHP). I've been building websites on and off for 25 years.
A year ago I started putting thought and research into creating my own CMS for the flexibility (and having a hobby project).
I started learning Laravel, mostly because 10 years ago I had wanted to learn it, though I never got around to it. Plus I figured I would be able to pick it up quite easily, already having an understanding of how PHP works.
But over this last year, I've not been able to engage with learning it, wondering if there is any point learning something (getting on a bit now) that still leads to a clunky PHP app that needs constant maintainence.
I figure instead, I could use NextJs for the frontend, and a headless flexible open source data management / cms for the backend.
I would think it would take me at least a year of learning and practice to become adequate enough. So, I'm trying to decide if this is where I should put my energy - or if there is something else I should be putting focus on, if I'm going to start properly learning something new to me.

#webdev #webdesign #webapps #react #nextjs #typescript #javascript

押されたキーが何かを調べるのに`keydown`と`keypress`どっち使うのがいいんだったかを高確率で忘れてしまい、つい`keypress`の方を使ってしまってカーソルキーとかが拾えなくてアレっ!?😱ってなって数分時間を無駄にすることがしょっちゅうあるので、誰か絶対迷わずにパッと`keydown`が出てくる方法を教えてください #javascript

押されたキーが何かを調べるのに`keydown`と`keypress`どっち使うのがいいんだったかを高確率で忘れてしまい、つい`keypress`の方を使ってしまってカーソルキーとかが拾えなくてアレっ!?😱ってなって数分時間を無駄にすることがしょっちゅうあるので、誰か絶対迷わずにパッと`keydown`が出てくる方法を教えてください #javascript

#ReleaseThursday #OpenSourceXmas A little present (to some of you)... Been meaning to release these recent additions before the holidays, but only getting around to it now. The most important new things are these:

https://thi.ng/units now includes a Lisp-like formula DSL to combine, calculate and convert quantities and units in a much concise manner than via the normal TypeScript API (see attached examples)

https://thi.ng/pixel-io-tiff is a new package (only 2.6KB) to provide TIFF image format parsing and EXIF/GPS metadata extraction (without having to parse the image fully). Also includes format conversions for https://thi.ng/pixel buffers (grayscale 8/16bit, RGB 24/32bit), but only supports most common TIFF features (e.g. tiles, strips, uncompressed or deflate). Supports multiple sub-images... Write support will be released early next year

https://thi.ng/math now has conversions to/from fractions, using "continued fractions" for best possible precision (also includes recursion-free implementations of GCD & LCM).

https://thi.ng/binary now provides `DATAVIEW`, a JS-native DataView-like API tailored for using `Uint8Array` or vanilla JS numeric arrays (assuming the array contains u8 values) and accessors for signed/unsigned 8-64bit word sizes and little/big endian ordering.

See main #ThingUmbrella readme for other recent updates:
https://github.com/thi-ng/umbrella?tab=readme-ov-file#latest-updates

#TypeScript #JavaScript #OpenSource #DSL #Lisp #UnitConversion #TIFF #Binary #Fraction

mquickjs: Micro QuickJS Javascript Engine via @andrew_chou https://lobste.rs/s/60fjs1 #javascript
https://github.com/bellard/mquickjs

2025 #WebOrigami year-end report https://jan.miksovsky.com/posts/2025/12-22-web-origami-year-end-report

Work this year included substantial syntax changes to make Origami a dialect of #JavaScript expressions: "JavaScript expressions with paths"

2025 #WebOrigami year-end report https://jan.miksovsky.com/posts/2025/12-22-web-origami-year-end-report

Work this year included substantial syntax changes to make Origami a dialect of #JavaScript expressions: "JavaScript expressions with paths"

2025 #WebOrigami year-end report https://jan.miksovsky.com/posts/2025/12-22-web-origami-year-end-report

Work this year included substantial syntax changes to make Origami a dialect of #JavaScript expressions: "JavaScript expressions with paths"

A fun fact from the latest #CloudFlare 2025 - practically all web today is based on #JavaScript frameworks. That is, to load simple “my company is ACME WIDGETS and here’s my phone” majority of pages will first load 145 MB of advanced JavaScript libraries and then make requests to further 50 Google and Amazon trackers to report “someone saw your phone!”, wasting tons of bandwidth, electricity, memory and time.

https://blog.cloudflare.com/radar-2025-year-in-review/#javascript-based-libraries-and-frameworks-remained-integral-tools-for-building-web-sites

TL;DR

arr.sort((a, b) => a - b); 보다 sortAsc(arr)가 낫고,
sortAsc(arr) 보다 sort123(arr) 내지는 sortAbc(arr)가 낫다.

arr.sort((a, b) => a - b);

이런 코드를 마주하면 나는 보통 js 콘솔에다가

[3, 2, 1].sort((a, b) => a - b); // [1, 2, 3]

이걸 실행해서 이게 오름차순인지 내림차순인지 확인하곤 한다.

사실 자주 접하는 패턴이라 abab로 적혀있으면 바로 오름차순이라고 읽히긴 하는데 내가 제대로 읽은게 맞나 싶어서 매번 다시 확인한다.

// 오름차순으로 arr 정렬
arr.sort((a, b) => a - b);

이렇게 주석으로 오름차순인지 내림차순인지 언급해주면 좀 낫긴 하지만 나는 사람에 대한 기대가 낮다.

// 오름차순으로 arr 정렬
arr.sort((a, b) => b - a); // ?

원래 오름차순이었던 코드를 누가 내림차순으로 바꾸면서 주석은 안 고쳐놨을지 어떻게 아나.
누군가가 코드를 고쳐놓고 주석 또는 문서는 안 고쳐놓는 경우를 일하면서 수도없이 (오늘도) 마주했다.

이런건 주석보다는 그냥 자신의 동작을 잘 설명하는 이름이 붙은 함수를 만드는게 맞다.

// 실제 코드에서 이렇게 sort asc라고 써있으면 양반이다.
// 보통 사람들은 함수명을 sortBlablaArr 따위로 적어두고
// 그게 오름차순인지 내림차순인지 제 3의 기준인지 언급하지 않는다.
function sortAsc(arr) {
  return [...arr].sort((a, b) => a - b);
}

그런데 나는 sortAsc라는 이름을 보면 바로 감이 확 오지는 않고 대략 머리속에서 이런 절차를 거쳐서 코드를 읽는다.

1. 풀어서 sort ascending
2. 한국어로는 오름차순 정렬
3. 점점 커지는(올라가는) 정렬이겠구나
4. 1, 2, 3 같이 되겠네

이쯤 되면 사실 나한테는 sortAsc(arr)나 arr.sort((a, b) => a - b)나 해석하는데 오래걸리긴 매한가지다.

그나마 sortAsc(arr) 쪽은 js 콘솔을 열지 않고도 해석할 수 있다는 이점이 있긴 하다.

그래서 나는 사람들이 오름차순 정렬에는 sort123, 내림차순에는 sort321 같은 이름을 사용해줬으면 좋겠다.

앞서 언급한 다른 코드들보다 sort123(arr) 같은 코드가 내 머릿속의 해석 단계를 많이 줄여줄 수 있다.

sort 라는 앞에 단어를 붙이는게 (동어반복이라거나 해서) 부자연스러운 맥락에서 123, 321만 있으면 숫자로 시작하니까 식별자로 사용할 수 없어서 문제라면 abc, cba라는 대안(즉, sortAbc(arr), sortCba(arr))을 제시해본다.

A fun fact from the latest #CloudFlare 2025 - practically all web today is based on #JavaScript frameworks. That is, to load simple “my company is ACME WIDGETS and here’s my phone” majority of pages will first load 145 MB of advanced JavaScript libraries and then make requests to further 50 Google and Amazon trackers to report “someone saw your phone!”, wasting tons of bandwidth, electricity, memory and time.

https://blog.cloudflare.com/radar-2025-year-in-review/#javascript-based-libraries-and-frameworks-remained-integral-tools-for-building-web-sites

import { makeNoise2D } from "https://esm.sh/open-simplex-noise"

let chars = " .:-=+*#%@";
let noise2D = makeNoise2D(42);

let out = "";
for (let y = 0; y < 80; y++) {
let line = "";
for (let x = 0; x < 24; x++) {
let v = noise2D(x * 0.08, y * 0.08);
let n = chars.length;
let idx = Math.floor((v + 1) * 0.5 * (n - 1));
idx = Math.max(0, Math.min(n - 1, idx));
line += chars[idx];
}
out += line + "\n";
}
document.getElementById("out").textContent = out;

#javascript #graphics

🎄 Advent of Donations - Day 19 🎄

It's day 19, Advent of Donations is almost over. Today's donation of $50 go to @astro, the web framework for content-driven websites. Since the beginning of the year I've built three websites using Astro, including my blog. I really love the flexibility and all the integrations.

Learn more about Advent of Donations and Astro in my latest blog update: https://britter.dev/blog/2025/12/01/advent-of-donations/#day-19---astro

#AdventOfDonations #Astro #JavaScript #StaticWebsiteGenerator

dailycoding - 20251219 / graphic
#p5js #javascript #Processing #generativeart #creativecoding #dailycoding
code : https://openprocessing.org/sketch/2830618

dailycoding - 20251219 / graphic
#p5js #javascript #Processing #generativeart #creativecoding #dailycoding
code : https://openprocessing.org/sketch/2830618

dailycoding - 20251218 / graphic
#p5js #javascript #Processing #generativeart #creativecoding #dailycoding
code : https://openprocessing.org/sketch/2829009

dailycoding - 20251218 / graphic
#p5js #javascript #Processing #generativeart #creativecoding #dailycoding
code : https://openprocessing.org/sketch/2829009

dailycoding - 20251217 / graphic
#p5js #javascript #Processing #generativeart #creativecoding #dailycoding
code : https://openprocessing.org/sketch/2828069

dailycoding - 20251217 / graphic
#p5js #javascript #Processing #generativeart #creativecoding #dailycoding
code : https://openprocessing.org/sketch/2828069

RE: https://mastodon.social/@firefoxwebdevs/115730171895808634

A quick rundown on Invoker Commands by @jaffathecake

We've written about this a lot on the blog and will no doubt have more to say now that the need to polyfill this is quickly starting to fade. It's truly exciting to have a web-native API which can solve the “wire up a click to perform a task” problem. #WebDev #HTML #JavaScript

RE: https://mastodon.social/@firefoxwebdevs/115730171895808634

A quick rundown on Invoker Commands by @jaffathecake

We've written about this a lot on the blog and will no doubt have more to say now that the need to polyfill this is quickly starting to fade. It's truly exciting to have a web-native API which can solve the “wire up a click to perform a task” problem. #WebDev #HTML #JavaScript

dailycoding - 20251216 / graphic
#p5js #javascript #Processing #generativeart #creativecoding #dailycoding
code : https://openprocessing.org/sketch/2827001

dailycoding - 20251216 / graphic
#p5js #javascript #Processing #generativeart #creativecoding #dailycoding
code : https://openprocessing.org/sketch/2827001

Stop writing if statements for your CLI flags https://lobste.rs/s/hzyyyy #javascript
https://hackers.pub/@hongminhee/2025/stop-writing-if-statements-for-your-cli-flags

Stop writing if statements for your CLI flags https://lobste.rs/s/hzyyyy #javascript
https://hackers.pub/@hongminhee/2025/stop-writing-if-statements-for-your-cli-flags

Stop writing if statements for your CLI flags https://lobste.rs/s/hzyyyy #javascript
https://hackers.pub/@hongminhee/2025/stop-writing-if-statements-for-your-cli-flags

I see various #JavaScript and #Dart libraries offering functions for detecting #Japanese kanji characters, but they almost always do this in a limited way that misses a huge number of characters, i.e. nothing beyond the #Unicode BMP, or even missing ranges in the BMP.

The only way to do this right is to

1. Work with codepoints, not UTF-16 code units

2. Look at the Unicode script property, which should be `Han` for kanji/hanzi

dailycoding - 20251213 / graphic
#p5js #javascript #Processing #generativeart #creativecoding #dailycoding
code : https://openprocessing.org/sketch/2824805

dailycoding - 20251213 / graphic
#p5js #javascript #Processing #generativeart #creativecoding #dailycoding
code : https://openprocessing.org/sketch/2824805

I see various #JavaScript and #Dart libraries offering functions for detecting #Japanese kanji characters, but they almost always do this in a limited way that misses a huge number of characters, i.e. nothing beyond the #Unicode BMP, or even missing ranges in the BMP.

The only way to do this right is to

1. Work with codepoints, not UTF-16 code units

2. Look at the Unicode script property, which should be `Han` for kanji/hanzi

I couldn't find a logging library that worked for my library, so I made one https://lobste.rs/s/ouph7k #javascript
https://hackers.pub/@hongminhee/2025/logtape-fedify-case-study

I couldn't find a logging library that worked for my library, so I made one https://lobste.rs/s/ouph7k #javascript
https://hackers.pub/@hongminhee/2025/logtape-fedify-case-study

I couldn't find a logging library that worked for my library, so I made one https://lobste.rs/s/ouph7k #javascript
https://hackers.pub/@hongminhee/2025/logtape-fedify-case-study

The untold history of web development:

1990: HTML invented.
1994: CSS invented to fix HTML.
1995: JS invented to fix HTML/CSS.
2006: jQuery invented to fix JS.
2010: AngularJS invented to fix jQuery.
2013: React invented to fix AngularJS.
2014: Vue invented to fix React & Angular.
2016: Angular 2 invented to fix AngularJS & React.
2019: Svelte 3 invented to fix React, Angular, Vue.
2019: React hooks invented to fix React.
2020: Vue 3 invented to fix React hooks.
2020: Solid invented to fix React, Angular, Svelte, Vue.
2020: HTMX 1.0 invented to fix React, Angular, Svelte, Vue, Solid.
2021: React suspense invented to fix React, again.
2023: Svelte Runes invented to fix Svelte.
2024: jQuery still used on 75% of websites.

(By https://twitter.com/fireship_dev)

#Web #Development #HTML #CSS #JavaScript #React #ReactJS #JQuery #Svelte #Angular #AngularJS

The untold history of web development:

1990: HTML invented.
1994: CSS invented to fix HTML.
1995: JS invented to fix HTML/CSS.
2006: jQuery invented to fix JS.
2010: AngularJS invented to fix jQuery.
2013: React invented to fix AngularJS.
2014: Vue invented to fix React & Angular.
2016: Angular 2 invented to fix AngularJS & React.
2019: Svelte 3 invented to fix React, Angular, Vue.
2019: React hooks invented to fix React.
2020: Vue 3 invented to fix React hooks.
2020: Solid invented to fix React, Angular, Svelte, Vue.
2020: HTMX 1.0 invented to fix React, Angular, Svelte, Vue, Solid.
2021: React suspense invented to fix React, again.
2023: Svelte Runes invented to fix Svelte.
2024: jQuery still used on 75% of websites.

(By https://twitter.com/fireship_dev)

#Web #Development #HTML #CSS #JavaScript #React #ReactJS #JQuery #Svelte #Angular #AngularJS

The untold history of web development:

1990: HTML invented.
1994: CSS invented to fix HTML.
1995: JS invented to fix HTML/CSS.
2006: jQuery invented to fix JS.
2010: AngularJS invented to fix jQuery.
2013: React invented to fix AngularJS.
2014: Vue invented to fix React & Angular.
2016: Angular 2 invented to fix AngularJS & React.
2019: Svelte 3 invented to fix React, Angular, Vue.
2019: React hooks invented to fix React.
2020: Vue 3 invented to fix React hooks.
2020: Solid invented to fix React, Angular, Svelte, Vue.
2020: HTMX 1.0 invented to fix React, Angular, Svelte, Vue, Solid.
2021: React suspense invented to fix React, again.
2023: Svelte Runes invented to fix Svelte.
2024: jQuery still used on 75% of websites.

(By https://twitter.com/fireship_dev)

#Web #Development #HTML #CSS #JavaScript #React #ReactJS #JQuery #Svelte #Angular #AngularJS

Aeolian dune simulation (made in 2017) for #MeerMittwoch:

The images show a screenshot of the JavaScript application to create the simulation and some Houdini renders of exported height fields. The sim itself had 5 macro params to control the behavior of the interactive deposit/erosion/transportation process. It supported tileable patterns, customizable seed terrain (images) and ran realtime at ~30fps. The profile (cross-section) visualization was important because the tool was intended to create traction patterns for footwear...

References:

https://en.wikipedia.org/wiki/Aeolian_landform
https://en.wikipedia.org/wiki/Saltation_(geology)
https://en.wikipedia.org/wiki/Barchan

https://web.archive.org/web/20170809065427/https://wou.edu/las/physci/taylor/g322/baas_2002.pdf

#GenerativeDesign #ComputationalDesign #Dunes #Simulation #Erosion #CellularAutomata #3D #Houdini #JavaScript #ThingUmbrella

Made a small tool for converting images into pixel art that preserves features while downscaling. The key trick is in using edge detection, the first example is with it enabled, and second one is without

https://git.sr.ht/~yogthos/pixel-mosaic

#javascript #pixelart #opensource

Made a small tool for converting images into pixel art that preserves features while downscaling. The key trick is in using edge detection, the first example is with it enabled, and second one is without

https://git.sr.ht/~yogthos/pixel-mosaic

#javascript #pixelart #opensource

Optique 0.8.0: Conditional parsing, pass-through options, and LogTape integration https://lobste.rs/s/wh35st #javascript
https://hackers.pub/@hongminhee/2025/optique-080

Optique 0.8.0: Conditional parsing, pass-through options, and LogTape integration https://lobste.rs/s/wh35st #javascript
https://hackers.pub/@hongminhee/2025/optique-080

Optique 0.8.0: Conditional parsing, pass-through options, and LogTape integration https://lobste.rs/s/wh35st #javascript
https://hackers.pub/@hongminhee/2025/optique-080

It's really depressing to see so many people and/or job ads talking about how they're using React so heavily for things that don't need React.

Why are we so committed to making things more complicated, and harder to learn, and having fewer skilled people?

And if you're talking about migrating JS frameworks on the front-end, at least *think* about HTMX/etc. for server-controlled rendering. Don't replace one bloat with another.

#React #Javascript #HTMX #HTML

It's really depressing to see so many people and/or job ads talking about how they're using React so heavily for things that don't need React.

Why are we so committed to making things more complicated, and harder to learn, and having fewer skilled people?

And if you're talking about migrating JS frameworks on the front-end, at least *think* about HTMX/etc. for server-controlled rendering. Don't replace one bloat with another.

#React #Javascript #HTMX #HTML

@sil except #JavaScript is a net negative in my experience as it is only good for 3 things:

• making websites #inaccessible to #TextBrowsers, thus #discriminating against #blind users.

• Injecting #malware like #Shitcoin #miners for #CryptoJacking.

• Violating #consent of users with #tracking and #adware.

Tell me i I'm wrong!

#JS #PayOrOkay #Privacy #ITsec #ClownFlare #CloudFlare #Enshittification #bloatware #ads

dailycoding - 20251207 / graphic
#p5js #javascript #Processing #generativeart #creativecoding #dailycoding
code : https://openprocessing.org/sketch/2818331

dailycoding - 20251207 / graphic
#p5js #javascript #Processing #generativeart #creativecoding #dailycoding
code : https://openprocessing.org/sketch/2818331

I may be a little late to the ChatGPT Plus party, but have been finding it rather effective at helping me learn #JavaScript for user interaction and making online games. I'm using it to enhance my #CSS on a variety of my personal sites, but have to stay vigilant when it makes recommendations. It has given me bad code, perpetuated poor designs and suggestions for #usability and #a11y, and makes pretty strong assumptions about how #Blind people use their devices. Helpful, but untrustworthy.

Il y a tout juste 30 ans, Netscape et Sun Microsystems annoncaient la disponibilité d'un nouveau langage pour le Web : Javascript. Je ne sais pas s'il faut s'en réjouir... #Web #Javascript https://arstechnica.com/gadgets/2025/12/in-1995-a-netscape-employee-wrote-a-hack-in-10-days-that-now-runs-the-internet/

30 years (and one day) ago!

"JavaScript is an easy-to-use object scripting language designed for creating live online applications that link together objects and resources on both clients and servers."

https://web.archive.org/web/20070916144913/http://wp.netscape.com/newsref/pr/newsrelease67.html

#javascript #webdev #internet #TheWeb #programming

Il y a tout juste 30 ans, Netscape et Sun Microsystems annoncaient la disponibilité d'un nouveau langage pour le Web : Javascript. Je ne sais pas s'il faut s'en réjouir... #Web #Javascript https://arstechnica.com/gadgets/2025/12/in-1995-a-netscape-employee-wrote-a-hack-in-10-days-that-now-runs-the-internet/

dailycoding - 20251205 / graphic
#p5js #javascript #Processing #generativeart #creativecoding #dailycoding
code : https://openprocessing.org/sketch/2816711

dailycoding - 20251205 / graphic
#p5js #javascript #Processing #generativeart #creativecoding #dailycoding
code : https://openprocessing.org/sketch/2816711

And to be clear this is a real vulnerability in React which still ought to be patched.

More details on these vulnerablities and how to mitigate is linked below 👇🏿

https://react2shell.com

#React2Shell #react #javascript #nodejs #cybersecurity

A maximum-severity vulnerability in React could enable remote code execution (RCE), and may affect more than a third of cloud service providers.

https://www.wiz.io/blog/critical-vulnerability-in-react-cve-2025-55182

#javascript #react #security #programmig

A maximum-severity vulnerability in React could enable remote code execution (RCE), and may affect more than a third of cloud service providers.

https://www.wiz.io/blog/critical-vulnerability-in-react-cve-2025-55182

#javascript #react #security #programmig

UPDATE - It turns out this "proof of concept" was AI slop code where the AI just made a super vulnerable server instead of any exploit demo. Bc, of course it did.

Original:

There's an epic react server component RCE exploit making the rounds today.

A proof of concept just dropped. Probably wanna patch this rapidly.

https://github.com/ejpir/CVE-2025-55182-poc/tree/main

#React #Javascript #Cybersecurity #breaking

Critical Security Vulnerability in #React Server Components 🍿

https://react.dev/blog/2025/12/03/critical-security-vulnerability-in-react-server-components

#webdev #javascript

Critical Security Vulnerability in #React Server Components 🍿

https://react.dev/blog/2025/12/03/critical-security-vulnerability-in-react-server-components

#webdev #javascript

Anthropic bought Bun. I'm not sure that I like that. I recently started a project with it. Might switch to Deno.

What do you think about this?

#JavaScript #webdev

dailycoding - 20251203 / graphic
#p5js #javascript #Processing #generativeart #creativecoding #dailycoding
code : https://openprocessing.org/sketch/2814113

dailycoding - 20251203 / graphic
#p5js #javascript #Processing #generativeart #creativecoding #dailycoding
code : https://openprocessing.org/sketch/2814113

Perhaps it’s time to embrace real web open standard .js files which don’t require any build steps or tooling to execute properly, all while utilizing the power combo of JSDoc + tsc to gain all of the benefits of type hints in IDEs and type checking in CI.

Let’s dive into some examples!
#WebDev #JavaScript

https://thathtml.blog/2025/12/nuances-of-typing-with-jsdoc/

Perhaps it’s time to embrace real web open standard .js files which don’t require any build steps or tooling to execute properly, all while utilizing the power combo of JSDoc + tsc to gain all of the benefits of type hints in IDEs and type checking in CI.

Let’s dive into some examples!
#WebDev #JavaScript

https://thathtml.blog/2025/12/nuances-of-typing-with-jsdoc/

Neither #Affinity nor #Darktable seemingly support 1D LUTs, which would have been too easy and useful for my #DigitalNegative preparation tool... Instead they both insist on using only 3D LUTs. Converting 1D to 3D takes a bit more effort, but thanks to https://thi.ng/transducers, it's still very easy...

#ThingUmbrella #TypeScript #JavaScript #FunctionalProgramming #Transducers #LUT #Photography

WelsonJS version 0.2.7.57 released!

Make an Windows Apps with Windows built-in JavaScript engine!

#opensource #JavaScript #windows

https://github.com/gnh1201/welsonjs/releases/tag/0.2.7.57

WelsonJS version 0.2.7.57 released!

Make an Windows Apps with Windows built-in JavaScript engine!

#opensource #JavaScript #windows

https://github.com/gnh1201/welsonjs/releases/tag/0.2.7.57

🚨 Breaking News: R enthusiasts celebrate the groundbreaking achievement of finally getting R to run in a browser... by enabling #JavaScript. 🎉 Because, of course, nothing screams #innovation like making a heavyweight statistical tool rely on a glorified calculator script. 🤦‍♂️
https://webr.sh/ #RProgramming #BrowserTech #DataScience #HackerNews #ngated

dailycoding - 20251128 / graphic
#p5js #javascript #Processing #generativeart #creativecoding #dailycoding
code : https://openprocessing.org/sketch/2809552

dailycoding - 20251128 / graphic
#p5js #javascript #Processing #generativeart #creativecoding #dailycoding
code : https://openprocessing.org/sketch/2809552

New research from Socket: We uncover how North Korean hackers are using npm, GitHub, and Vercel together to spread OtterCookie malware, adding 197 malicious npm packages.

https://socket.dev/blog/north-korea-contagious-interview-npm-attacks #JavaScript #malware

These sorts of NPM worms have been around for a LONG time.

It's typically due a common practice of low 2fa opt-in on NPM accounts.

So be sure to setup NPM 2FA if you're a package maintainer do that asap!

A lesser known NPM capability is that you can disable install time scripts. This may break some packages but its worth a try to see if your projects can work with out any install scripts. 👇🏿

https://blog.npmjs.org/post/141702881055/package-install-scripts-vulnerability

#GitHub #NPM #Microsoft #Sha1Hulud #nodejs #javascript

Just finished writing another tool, now I can see NINE known compromised packages are still up for download on NPM! ⚠️

This tool crawls the list of known bad packages and downloads the latest bundle.

It then runs my other checks against the downloaded bundle and logs the results.

https://github.com/datapartyjs/walk-without-rhythm

#WalkWithoutRhythm #Sha1Hulud #NPM #GitHub #Microsoft #nodejs #javascript #cybersecurity #devlog #bash

Just finished writing another tool, now I can see NINE known compromised packages are still up for download on NPM! ⚠️

This tool crawls the list of known bad packages and downloads the latest bundle.

It then runs my other checks against the downloaded bundle and logs the results.

https://github.com/datapartyjs/walk-without-rhythm

#WalkWithoutRhythm #Sha1Hulud #NPM #GitHub #Microsoft #nodejs #javascript #cybersecurity #devlog #bash

I've spent the last few hours writing down my scripts for detecting this so you can use them!

I'm hitting on two or three ways to detect it and will be adding more.

Watching the attack running I can see developers all over the world still doing their morning `npm i` and getting owned 😭

Maybe let the node developers in your life know about this tool 👇🏿

https://github.com/datapartyjs/walk-without-rhythm

#ShaiHulud #WalkWithoutRhythm #nodejs #javascript #npm #github #cybersecurity

New research from Socket: We uncover how North Korean hackers are using npm, GitHub, and Vercel together to spread OtterCookie malware, adding 197 malicious npm packages.

https://socket.dev/blog/north-korea-contagious-interview-npm-attacks #JavaScript #malware

Updated my listing of Sha1-Hulud detection tools.

I now have found at least 12 other tools for detecting Sha1-Hulud compromise on your dev box and in infrastructure.

https://github.com/datapartyjs/walk-without-rhythm?tab=readme-ov-file#similar-sha1-hulud-112425-detection-tools

#WalkWithoutRhythm #Sha1Hulud #npm #github #nodejs #javascript #cybersecurity #devops

I've updated my suggestions to include links and info on how to get fine grained control over the scripts your projects run at compile time.

There's two fairly interesting community projects that seem to address this part of the problem and make it possible to disable most install scripts while keeping the ones your project actually requires.

https://github.com/datapartyjs/walk-without-rhythm?tab=readme-ov-file#steps-to-take

#Sha1Hulud #NPM #nodejs #javascript

#Breaking There's an active nodejs supply chain attack going around.

From the looks of it many of these compromised packages have been mitigated but quite a few have not.

https://helixguard.ai/blog/malicious-sha1hulud-2025-11-24

#nodejs #cybersecurity #aws #github #npm #trufflehog #go #cyberattack #ShaiHulud #javascript #deno #browser #Sha1Hulud

These sorts of NPM worms have been around for a LONG time.

It's typically due a common practice of low 2fa opt-in on NPM accounts.

So be sure to setup NPM 2FA if you're a package maintainer do that asap!

A lesser known NPM capability is that you can disable install time scripts. This may break some packages but its worth a try to see if your projects can work with out any install scripts. 👇🏿

https://blog.npmjs.org/post/141702881055/package-install-scripts-vulnerability

#GitHub #NPM #Microsoft #Sha1Hulud #nodejs #javascript

dailycoding - 20251126 / graphic
#p5js #javascript #Processing #generativeart #creativecoding #dailycoding
code : https://openprocessing.org/sketch/2807367

dailycoding - 20251126 / graphic
#p5js #javascript #Processing #generativeart #creativecoding #dailycoding
code : https://openprocessing.org/sketch/2807367

Just finished landing Exit Code support. So now if more scanners are made or one of the projects gets more features you can quickly switch to whichever makes the most sense for your use case!

I literally lost a ton of sleep on this volunteer incident response work so I'm going to go touch grass for a bit.

More hacks later tonight, still got some loose ends gnawing at me lol.

https://github.com/datapartyjs/walk-without-rhythm?tab=readme-ov-file#how-to-use

#nodejs #npm #javascript #Sha1Hulud #WalkWithoutRhythm #Sha1HuludScanner #cybersecurity

At the end of scanning for obvious compromise the `check-projects` script then builds a listing of all of your dependencies and all of the versions your project files mention.

You can find that info under `reports/`

I'm currently working on improving the `check-projects` script so that it will alert you if ANY of your package.json or package-lock.json mentions a known infected package.

#ShalHulud #WalkWithoutRhythm #npm #github #javascript #cybersecurity #threatresponse

#ReleaseTuesday — Earlier today, I published https://thi.ng/arcball, a small new package providing an intuitive click & drag 3D camera view controller which is completely agnostic from any UI/drawing/rendering framework. The library simply provides the (quaternion) maths to translate gesture events into rotations and then computes a view matrix (presumably for WebGL/WebGPU).

The code is ported from the old 2016 Clojure implementation in https://thi.ng/geom-clj, which itself is based on a 1992 paper (link in readme). Behind the scenes it uses https://thi.ng/matrices and https://thi.ng/vectors for various math ops.

There's also a small new example project to show how to use it (mouse & touch events are enabled, but zooming only works via scroll gestures on touchpad or mousewheel):

https://demo.thi.ng/umbrella/webgl-arcball/

#ThingUmbrella #TypeScript #JavaScript #UI

First pass is super simple and just looks for the file names & package.json signature for signs of infection anywhere in the path you tell it to search.

If it sees anything fishy it tells you where and stops until you've read the alert.

Oh and this only uses bash, sed, awk, grep, curl, and jq. So no npm, node or other big supply chains 🥴

https://github.com/datapartyjs/walk-without-rhythm/blob/main/check-projects

#ShalHulud #WalkWithoutRhythm #nodejs #npm #github #javascript

Woot ok now that I have the dependency graph crawled I can just ship the listing of known bad NPM packages and just compare directly against that.

I updated the scanning script to alert if you have -any- version of an infected package.

You're gonna want to be very careful if you're not infected but have one of these dependencies present.

https://github.com/datapartyjs/walk-without-rhythm/blob/main/data/infected-pkgs-versions.txt

#ShalHulud #WalkWithoutRhythm #npm #github #javascript #cybersecurity #threatresponse

At the end of scanning for obvious compromise the `check-projects` script then builds a listing of all of your dependencies and all of the versions your project files mention.

You can find that info under `reports/`

I'm currently working on improving the `check-projects` script so that it will alert you if ANY of your package.json or package-lock.json mentions a known infected package.

#ShalHulud #WalkWithoutRhythm #npm #github #javascript #cybersecurity #threatresponse

First pass is super simple and just looks for the file names & package.json signature for signs of infection anywhere in the path you tell it to search.

If it sees anything fishy it tells you where and stops until you've read the alert.

Oh and this only uses bash, sed, awk, grep, curl, and jq. So no npm, node or other big supply chains 🥴

https://github.com/datapartyjs/walk-without-rhythm/blob/main/check-projects

#ShalHulud #WalkWithoutRhythm #nodejs #npm #github #javascript

I'm quickly finding a mix of packages which were compromised, some were months ago and had the bad versions taken down.

However at the same time I'm noticing packages like the one below that were -just- hacked 19 hours ago and still have not been taken down yet!

With how this worm works its a bit of a pencils down moment... you probably should check your packages right now.

https://www.npmjs.com/package/capacitor-voice-recorder-wav?activeTab=code

#nodejs #npm #ShaiHulud #javascript

I've spent the last few hours writing down my scripts for detecting this so you can use them!

I'm hitting on two or three ways to detect it and will be adding more.

Watching the attack running I can see developers all over the world still doing their morning `npm i` and getting owned 😭

Maybe let the node developers in your life know about this tool 👇🏿

https://github.com/datapartyjs/walk-without-rhythm

#ShaiHulud #WalkWithoutRhythm #nodejs #javascript #npm #github #cybersecurity

I'm quickly finding a mix of packages which were compromised, some were months ago and had the bad versions taken down.

However at the same time I'm noticing packages like the one below that were -just- hacked 19 hours ago and still have not been taken down yet!

With how this worm works its a bit of a pencils down moment... you probably should check your packages right now.

https://www.npmjs.com/package/capacitor-voice-recorder-wav?activeTab=code

#nodejs #npm #ShaiHulud #javascript

#Breaking There's an active nodejs supply chain attack going around.

From the looks of it many of these compromised packages have been mitigated but quite a few have not.

https://helixguard.ai/blog/malicious-sha1hulud-2025-11-24

#nodejs #cybersecurity #aws #github #npm #trufflehog #go #cyberattack #ShaiHulud #javascript #deno #browser #Sha1Hulud

I'm thinking of using EntityDB for in-browser local embeddings.

No idea if this is a good idea.

The API seems quite straightforward.

I don't even need to spin up Hugging Face (transformers.js) myself. It just takes text and runs the embedding for me.

Any other recommendations?

https://github.com/babycommando/entity-db

#AIEngineering #ContextEngineering #PromptEngineering #RAG #RetrievalAugmentedGeneration #JavaScript #WebDev

Am I the only one to think that it's good that cancellable promises never made it into any specs whatsoever?

#JavaScript #ECMAScript #ECMA262 #TC39

Moving Beyond the NPM elliptic Package

If you're in a hurry, head on over to soatok/elliptic-to-noble and follow the instructions in the README in order to remove the elliptic package from your project and all dependencies in node_modules. Art: CMYKat Why replace the elliptic package? Yesterday, the Trail of Bits blog published an intern's post about finding cryptographic bugs in the elliptic library (a Javascript package on NPM) by using the Wycheproof.

http://soatok.blog/2025/11/19/moving-beyond-the-npm-elliptic-package/

#npm #crypto #cryptography #elliptic #security #infosec #cve #mitigation #appsec #javascript #js #npm #npmsecurity #npmpackages

Wow, just noticed #ThingUmbrella reached 3700 stars on GitHub — I'm celebrating... 🤩🫠

Heartfelt thanks to all of you who've been helping along the way (in any shape & form) and been supporting this work for all these years and across different programming languages/camps! Merci beaucoup!!! Esp. big Thank You's to fellow fediverse people/supporters from various stages of this project: @avi, @made, @lurvey, @alesroubicek, @brandtryan, @latrokles, @rc101, @jeffpalmer, @jack, @Yura, @danielrothaug, @computersandblues, @shiffman... (apologies if I forgot you/others here!) 🙏😍

Not counting the earlier years spent on my related toxiclibs library collection for Java/Processing (developed between ~2006-2012), the larger thi.ng project is now 14+ years old, starting with various 2D/3D geometry and dataviz-related libraries for Clojure/ClojureScript in 2011.

Since 2018 the main focus has been https://thi.ng/umbrella, a monorepo collection of (so far) 210+ #TypeScript projects/libraries. It will be 8 years old in January and covers an extremely wide spectrum of topics, use cases, data structures and techniques (take a look at the tag cloud on the https://thi.ng website or the tag browser[1] to explore the scope and related projects).

These 200+ main libraries are NOT forming a monolithic framework and can largely be used individually. However, many of these libraries are complementing each other, or are structured to be composable, expose related functionality at different levels of abstraction and/or are heavily re-use functionality to ensure high code density and small bundle sizes when building large(r) projects. 99% of the packages have NO 3rd party runtime dependencies... The umbrella meta-project also includes 185 commented standalone example projects, hundreds of code snippets in documentation and readme files, illustrating other possible usage & composition patterns.

The total code size of this project is now around 3850 source files, 140k lines of code and 71k lines of comments/docstrings. The example projects add in total another ~35k lines of code & comments. The average package readme size is 11.8KB. 99.9% of this all has been created & maintained by yours truly...

There're still so many unreleased (and useful/interesting!) parts of functionality I've been working on and still need to figure out how to best refactor and package them up (bit by bit) before releasing... we're not done just yet!

There seemingly are quite a few active users (~1.8 million of combined installs per month) and it's so pleasing to see how these tools have matured, are stable/reliable[2] and it confirms to me these efforts were all somehow worth it. Especially this year, I've also spent a lot more time myself using these packages in production, mostly for client projects, but also my own (some of which will be open sourced too). Of course, we all have our own particular likes and preferences for our own tools, but for my kind of work/workflows, #ThingUmbrella provides some of the most varied, productive, _composable_ and malleable tools I've ever used...

Happy coding! 🙌

[1] https://demo.thi.ng/umbrella/thing-browser/

[2] ...even many of those packages which still manage to have a v0.x.y version number, often for years already! My release tool only creates new major versions when there're breaking changes, so if the API is already stable, the version stays at 0.x — I just need to manually bump some of them to a v1.0... 😅

#ThingUmbrella #OpenSource #TypeScript #JavaScript #Community #Github

There's no maintained #ActivityPub library for #JavaScript. I'll have to implement my own...

Moving Beyond the NPM elliptic Package

If you're in a hurry, head on over to soatok/elliptic-to-noble and follow the instructions in the README in order to remove the elliptic package from your project and all dependencies in node_modules. Art: CMYKat Why replace the elliptic package? Yesterday, the Trail of Bits blog published an intern's post about finding cryptographic bugs in the elliptic library (a Javascript package on NPM) by using the Wycheproof.

http://soatok.blog/2025/11/19/moving-beyond-the-npm-elliptic-package/

#npm #crypto #cryptography #elliptic #security #infosec #cve #mitigation #appsec #javascript #js #npm #npmsecurity #npmpackages

#JavaScript has a `Map` class for holding key/value pairs, but it’s underused and underappreciated. If you fix the class’ limitations, you can use `Map` as a building block to create really interesting things — like a build system for a #static site.

https://jan.miksovsky.com/posts/2025/11-19-maps

#JavaScript has a `Map` class for holding key/value pairs, but it’s underused and underappreciated. If you fix the class’ limitations, you can use `Map` as a building block to create really interesting things — like a build system for a #static site.

https://jan.miksovsky.com/posts/2025/11-19-maps

#ReleaseWednesday — Thanks to a user suggestion, I've added support for declarative canvas pixel density adjustments in the following packages:

- https://thi.ng/hiccup-canvas
- https://thi.ng/hdom-canvas
- https://thi.ng/rdom-canvas

By default canvas components defined via the latter two packages are defaulting to use the current `window.devicePixelRatio`, but this can now be overridden via the new `__dpr` control attribute to force a certain pixel density. For example, set it to 4 to create a 4x larger canvas in terms of pixel dimensions, but keep the apparent display size the same. Likewise, for performance reasons, it might be useful to keep the pixel density at 1 (or lower), even if the current screen would have a higher density.

More info in this readme section (the hiccup-canvas package is the shared "low-level" backend for the other two UI packages, which also have updated readmes):

https://docs.thi.ng/umbrella/hiccup-canvas/#device-pixel-ratio

Btw. There were also several other recent additions/releases, but since there're hardly ever any reactions to these announcements, I've reduced my messages about project updates posted here. Please let me know if I should change my mind... :)

#ThingUmbrella #TypeScript #JavaScript #Canvas

dailycoding - 20251117 / graphic
#p5js #javascript #Processing #generativeart #creativecoding #dailycoding
code : https://openprocessing.org/sketch/2794345

dailycoding - 20251117 / graphic
#p5js #javascript #Processing #generativeart #creativecoding #dailycoding
code : https://openprocessing.org/sketch/2794345

https://ivankra.github.io/javascript-zoo/ #JavaScript

https://ivankra.github.io/javascript-zoo/ #JavaScript

Boa: A standard-conforming embeddable JavaScript engine written in Rust

https://github.com/boa-dev/boa

#github #javascript #rust

Blocking LLM crawlers without JavaScript - (owl.is)

https://www.owl.is/blogg/blocking-crawlers-without-javascript/

#llm #web #javascript #privacy

Blocking LLM crawlers without JavaScript - (owl.is)

https://www.owl.is/blogg/blocking-crawlers-without-javascript/

#llm #web #javascript #privacy

Boa: A standard-conforming embeddable JavaScript engine written in Rust

https://github.com/boa-dev/boa

#github #javascript #rust

Love it when a near complete project just appears out of nowhere.

"Brimstone is a JavaScript engine written from scratch in Rust, aiming to have full support for the JavaScript language.

Brimstone is a work in progress but already supports almost all of the JavaScript language (>97% of the ECMAScript language in test262). Not ready for use in production."

https://github.com/Hans-Halverson/brimstone

#Rust #JavaScript

Love it when a near complete project just appears out of nowhere.

"Brimstone is a JavaScript engine written from scratch in Rust, aiming to have full support for the JavaScript language.

Brimstone is a work in progress but already supports almost all of the JavaScript language (>97% of the ECMAScript language in test262). Not ready for use in production."

https://github.com/Hans-Halverson/brimstone

#Rust #JavaScript

dailycoding - 20251116 / graphic
#p5js #javascript #Processing #generativeart #creativecoding #dailycoding
code : https://openprocessing.org/sketch/2793651

dailycoding - 20251116 / graphic
#p5js #javascript #Processing #generativeart #creativecoding #dailycoding
code : https://openprocessing.org/sketch/2793651

New blog post is up! This is a deep dive into continuation-passing style in TypeScript. (No, I'm not talking about asynchronous callbacks.)

https://jnkr.tech/blog/cps-in-ts

Let me know what you think and if you have any questions I can answer!

#TypeScript #JavaScript #FunctionalProgramming #Programming #NodeJS

New blog post is up! This is a deep dive into continuation-passing style in TypeScript. (No, I'm not talking about asynchronous callbacks.)

https://jnkr.tech/blog/cps-in-ts

Let me know what you think and if you have any questions I can answer!

#TypeScript #JavaScript #FunctionalProgramming #Programming #NodeJS

Lion engineers have been squeezing time to make the website fancier with Astro. Early look: https://lion.js.org/next -- They also had a successful workshop open to all frontenders at ING this week. Theme was to "Make Lion Great Again". 😂

#webdev #webcomponents #javascript #lion @astro

Maybe a good opportunity to illustrate the purpose of one of the more uncommon packages in #ThingUmbrella: The https://thi.ng/hex package provides hexadecimal formatters for a variety of word sizes (4-64 bits) and also a customizable hex dump facility, which is super useful for analyzing, debugging & reverse engineering binary data or file formats from within a NodeJS REPL session (my main dev env & workflow), but of course can also be used in other situations... This has already saved me countless of times...

#ThingUmbrella #REPL #Debugging #TypeScript #JavaScript

LibreOffice's JavaScript macros are quite powerful! Much impressed!

Also, they are quite hard to get started with. What I've learned: https://bojidar-bg.dev/blog/2025-11-11-wordle-libreoffice/

#100DaysToOffload #LibreOffice #Automation #JavaScript

いまさらながらVueに入門してみようかなぁ… #vue #vuejs #javascript

Learn Vue.js – Tutorial for Beginners - YouTube: https://www.youtube.com/watch?v=Kt2E8nblvXU

LibreOffice's JavaScript macros are quite powerful! Much impressed!

Also, they are quite hard to get started with. What I've learned: https://bojidar-bg.dev/blog/2025-11-11-wordle-libreoffice/

#100DaysToOffload #LibreOffice #Automation #JavaScript

LibreOffice's JavaScript macros are quite powerful! Much impressed!

Also, they are quite hard to get started with. What I've learned: https://bojidar-bg.dev/blog/2025-11-11-wordle-libreoffice/

#100DaysToOffload #LibreOffice #Automation #JavaScript

I’ve seen one-time passcode (“OTP”) interfaces cause undue stress in otherwise level-headed #WebDev teams.

Thankfully, it doesn’t have to be complicated: https://cloudfour.com/thinks/simple-one-time-passcode-inputs/

#HTML #CSS #JavaScript

I’ve seen one-time passcode (“OTP”) interfaces cause undue stress in otherwise level-headed #WebDev teams.

Thankfully, it doesn’t have to be complicated: https://cloudfour.com/thinks/simple-one-time-passcode-inputs/

#HTML #CSS #JavaScript

React나 Vue 등의 프레임워크 사용은 지금은 매우 당연시되지만, 한편으로는 지금까지도 당연시되지 않아 그나마 사용 가능한 라이브러리가 jQuery 밖에 없는 경우도 꽤나 있다. (jQuery no.1...)

이런 상황에서 SPA(Single-page application) 앱을 작성해야 한다....? 걱정말라. 아예 바닐라(프레임워크의 조력을 받지 않는) 상태로 앱을 짜라는 것 보단 낫지 않은가.

7년전 실무에서 실제로 쓰였던 jQuery 기반의 SPA 최소 구현을 공유해보고자 한다. (그땐 코딩 잘하는 AI도 없으니 일일히 다 짠거다.)

SPA 경험이 아예 없는 경우 이러한 최소 구현을 분석하는 과정을 통해 실제 React, Vue 같은 SPA 작성에 쓰이는 주류 프레임워크를 이해하는데에도 도움이 될 것이다.

App 도입부

App 도입부는 이렇게 시작하면 된다. 간단하다. 현재의 주류 프레임워크에서는 <App /> 표현에 가까운 도입부이다.

(function($) {
    $.fn.App = {
        // set routing rules
        "routes": [
            { "path": "/", "tmpl": "main.tmpl.html" },
            { "path": "/gift", "tmpl": "gift.tmpl.html" },
            { "path": "/gift/:id", "tmpl": "gift.view.tmpl.html" },
            { "path": "/gallery", "tmpl": "gallery.tmpl.html" },
            { "path": "/contact", "tmpl": "contact.tmpl.html" },
            { "path": "/policy", "tmpl": "policy.tmpl.html" },
            { "path": "/policy/privacy", "tmpl": "policy.privacy.tmpl.html" },
            { "path": "/policy/email", "tmpl": "policy.email.tmpl.html" },
            { "path": "/policy/cookie", "tmpl": "policy.cookie.tmpl.html" },
            { "path": "/policy/copyright", "tmpl": "policy.copyright.tmpl.html" },
        ],

        // set default title
        "title": "Gift soldout",

        // set API url
        "apiUrl": "http://gift-soldout.local/",

        // set page
        "page": 1,

        // set limit per page
        "limit": 20,

        // add script
        "addScript": function(url, callback) {
            var $s = $("<script/>").attr({
                "type": "text/javascript",
                "src": url
            }).appendTo("head");
            $s.promise().done(function() {
                if(typeof(callback) == "function") {
                    callback($s[0], $s[0].innerHTML);
                }
            });
        },

        "addStylesheet": function(url, callback) {
            $s = $("<link/>").attr({
                "rel": "stylesheet",
                "type": "text/css",
                "href": url
            }).appendTo("head");
            $s.promise().done(function() {
                if(typeof(callback) == "function") {
                    callback($s[0], $s[0].innerHTML);
                }
            });
        },

        "initScripts": function() {
            // disabled auto-completable form
            $("form.autocomplete-disabled").attr("autocomplete", "off");

            // disable ime
            $("input.ime-disabled").css("ime-mode", "disabled");
        },

        // (...omiited...)

여기까지 함으로서 스타일 시트 및 스크립트, 그리고 URI Route 규칙이 해결된다.

양식(Form)에 대해서 자동완성(autocomplete) 및 입력기(IME) 설정을 조정해야 되는 경우에 대한 처리도 부가적으로 추가했다.

렌더링(Rendering) 부

렌더링 부분에서는 실제 사용자에게 보여줄 컨텐츠를 처리하게 된다. 렌더링 과정과 함께 pushState, popState를 활용하여 SPA가 아닌 일반 정적 웹사이트와 동일한 브라우징 경험을 제공한다.

        // (...omiited...)
        "renderTemplate": function(uri, routes, _data, _options) {
            var _uri = URI.parse(uri);
            var _path = _uri.path;
            var _query = $().App.parseQuery(_uri.query);
            var _tmpl = "404.tmpl.html";
            var _matched = false;
            var _fail = function(xhr, status, error) {
                var _row = [xhr, status, error, xhr.responseText];
                var data = "('" + _row.join("','") + "')<=(xhr,status,error,responseText)";
                var qs = $.param({"route": "ajax.error.gif", "data": data});
                $("<img/>").attr("src", $().App.apiUrl + "?" + qs).appendTo("body");
                console.log(data);
                alert("We're sorry. Please try again in a few minutes.");
            };
            var _success = function(response) {
                var uiContent = $(".ui-content");
                var html = $.render.tmpl(response);
                var pageTitle = ("title" in response) ? response.title : $().App.title;
                uiContent.html(html);
                uiContent.find("a").click($().App.initClicks(_options));
                window.history.pushState({"html": html, "pageTitle": pageTitle}, "" , _path);
                $(document).find("title").text(pageTitle);
                $().App.initScripts();
            };

            // override path
            _path = ("p" in _query) ? _query.p : _path;

            // checking matched rule (try 1)
            for(var i in routes) {
                var paths = routes[i].path.split("/");
                var pos = routes[i].path.indexOf("/:");
                var _paths = _path.split("/");

                // parse URI parameters
                if((paths.length - _paths.length) == 0 && pos > -1) {
                     if(_path.indexOf(routes[i].path.substring(0, pos)) == 0) {
                        _tmpl = routes[i].tmpl;
                        _matched = true;
                        for(var k in paths) {
                            if(paths[k].indexOf(":") == 0) {
                                _query[paths[k].substring(1)] = _paths[k];
                            }
                        }
                    }
                }
            }

            // checking matched rule (try 2)
            if(_matched == false) {
                for(var i in routes) {
                     if(_path.indexOf(routes[i].path) == 0) {
                        _tmpl = routes[i].tmpl;
                        _matched = true;
                     }
                }
            }

            // load template file
            $.get("/templates/" + _tmpl, function(response) {
                $.templates({ tmpl: response });

                if(!!_data) {
                    _success(_data);
                } else {
                    $().App.getItems(_path, {
                        "page": $().App.page,
                        "limit": $().App.limit,
                        "query": _query,
                        "referer": $().App.getCurrentUri()
                    }, _success, _fail);
                }
            }, "html").fail(_fail);

            // after rendering template
            if("afterRenderTemplate" in _options) {
                _options.afterRenderTemplate(_path, _data);
            }
        },
        // (...omiited...)

데이터 연결

데이터베이스로 부터 실제 데이터를 가져와야하므로, 데이터 요청을 처리할 수 있는 메소드를 추가해준다.

        // (...omiited...)
        // get items from remote server
        "getItems": function(uri, data, callback, error) {
            var params = { "route": "spa", "p": uri };
            $.ajax({
                url: $().App.apiUrl + "?" + $.param(params),
                type: "post",
                dataType: "json",
                data: data,
                success: callback,
                error: error
            });
        },
        // (...omiited...)