News : NodeJS and JavaScript security packages over sercurity areas.

Because I used NodeJS and JavaScript on web development, today I will show you some good packages for security using tree main areas of security ...

The first one:

ACLs known as Access Control Lists this use node_acl - npm package.

Will allow you to integrates with Express, also supports role-based access control known as RBAC, and stores rules in memory, Redis, or MongoDB. The main goal is to define user roles and permissions for resources.

The RBAC known as Role-Based Access Control): A security model where user permissions are assigned based on roles. Each role has specific access rights to resources, simplifying management and ensuring users only access what’s necessary for their job.

The second one:

SAML known as Security Assertion Markup Language:

This allow you to use passport-saml - npm package.

This package configure SAML strategy in Express for secure authentication.

Enables SSO by integrating with identity providers (e.g., Okta, Azure AD).

The SSO known as Single Sign-On is a system allowing users to authenticate once with an identity provider as IdP known as Identity Provider and access multiple applications without re-entering credentials, improving user experience and security.

The IdP is a system that manages user identities and authenticates users for applications.This verifies user credentials (e.g., username/password) and issues security tokens (e.g., SAML assertions) to enable single sign-on aka SSO across trusted services, like Okta or Azure AD.

The last one is audit Log known as SIEM:

SIEM known as Security Information and Event Management is a system that collects, analyzes, and correlates logs and event data from various sources (e.g., systems, applications) in real-time.

This use winston or bunyan - npm packages for logging.

The main goal is to capture system/user events and integrate with SIEM systems like Splunk via HTTP or TCP forwarding.

Store logs in JSON format for compatibility.

News : Vite new changes.

From the official website ...

Vite is a blazing fast frontend build tool powering the next generation of web applications.

Vite makes web development simple again

The last release on GitHub project comes with the version 7.0.6 .

The good news comes from the same GitHub project and the x.com vite account:

The news is on this change log:

7.1.0-beta.0 (2025-07-30)

News : tested GitHub repo on bolt and netlify !

I used in the past javascript with react and vite, but today I tested two web tools: bold and netlify - both online tools.

The first issue on bold was to use an repo from my secondary GitHub account catafest-work because on bolt account was set catafest.

I asked on discord and answer was simple one:

Use this in the URL area:

bolt.new/github.com/username/reponame

I used easy , works and bold make the default project with react and vite. I set the Gemini API key!

I ask to create a simple grapphic interface and works well.

This works well without any errors.

For deploy an application on web, the bolt give me an answer to netlify ...

I follow that answer and I have a full simple application online, see this website - catafest-gemini-ai.netlify.app.

I tested and works. See some screenshots from work area with these online tool:

News : Deno got even better!

... I worked with javascript and deno was just one step into learning process ... works great !!!

News : JavaScript petition to Oracle.

Oracle acquired the JavaScript trademark in 2009 but does not actively use this trademark for commercial products. Its ownership prevents the official use of the JavaScript name in conferences and other events related to the programming language. The petition is supported by prominent figures in the JavaScript community, including the creator of Node.js, Ryan Dahl, and the creator of JavaScript, Brendan Eich. They argue that releasing the trademark would allow the language to evolve and thrive without artificial barriers

See the official website to sign this petition by JavaScript™.

Dear Oracle,

You have long ago abandoned the JavaScript trademark, and it is causing widespread, unwarranted confusion and disruption.

JavaScript is the world’s most popular programming language, powering websites everywhere. Yet, few of the millions who program in it realize that JavaScript is a trademark you, Oracle, control.

...

CodePen : Home RoughJS and Wired elements example .

PixiJS : examples with filters ...

Examples with PixiJS filters, see more on this webpage.

PixiJS is a rendering library that will allow you to create rich, interactive graphics and cross-platform applications and games without having to dive into the WebGL API or deal with browser and device compatibility.

News : Online tool for JavaScript and TypeScript

Using this online tool you can create a JavaScript/TypeScript project that runs natively on all your users' devices: web, android, iOS.

You can find more details and the documentation on the official page with the documentation.

An very old video example from 7 years ago, see the official youtube.

Here is a screenshot of this online tool I tested today:

CodePen: The pantone color of the year 2022.

The pantone color of the year 2022 is this.

See the Pen the Pantone Color of year 2022 by Cătălin George Feștilă (@catafest) on CodePen.

CodePen: ... challenges every time.

This website comes with challenges all the time, see this week example:

THIS WEEK’S CHALLENGE,Book Text ...Your challenge: Give this book excerpt some tasteful text styles.

Here's what I managed to do for this week:

CodePen: How can share sketchfab 3D models.

The Viewer API lets you build web apps on top of Sketchfab’s 3D viewer. With the API, you can control the viewer in JavaScript. It provides functions for starting, stopping the viewer, moving the camera, taking screenshots and more.

See the official webpage.

CodePen: Webcam with RGB color shader and the three.js javascript library.

Three.js is a cross-browser JavaScript library and application programming interface used to create and display animated 3D computer graphics in a web browser using WebGL.

This library is not really used in website development. It has some great real-time information display capabilities.

Today I show you a combined example of a webcam with a simple shader set with an RGBA color.

CodePen: RGB colors.

Example with the javascript programming language presented in my codepen account solves the following issues:

• create HTML tag div for each for iteration;
• create an id for each div tag;
• build an RGB color with red, green, and blue using a random function;
• read that id and used to set the color background of each div;
• print the RGB value for each color and set background color;

Let's see the example:

See the Pen by Cătălin George Feștilă (@catafest) on CodePen.

CodePen: Lottie for Web, Android, iOS, React Native, and Windows - 001.

Lottie is a mobile library for Web, and iOS that parses Adobe After Effects animations exported as JSON with Bodymovin and renders them natively on mobile!, see GitHub project.

You can find Lottie files on this website. 

This is a simple example with lottie-player.js:

See the Pen lottie-player html 001 by Cătălin George Feștilă (@catafest) on CodePen.

OpenProcessing - simple tree_001.

This is modified example from this in order to build another good tree using openprocessing website interface.

You can see this example on my account.

Let's see the source code:

/*--based on https://openprocessing.org/sketch/396851--*/

var nbranchs = 73;
function setup() {
  createCanvas(640, 400);
  background(0, 0, 128);
  
  noFill();
  stroke(128);
  noLoop();
}

function draw() {
  tree(100, 200, 150, 350);
}
function mousePressed() {
  background(0, 0, 128);
  redraw();
}

function branch(x, y, dx, dy) {
  var sign = random(dx+1.0)/(abs(dx)+5.0);
  
  for (var i = 0; i <= x; i += 3) {
    var idx = i/x;
    
    var xi = bezierPoint(x, x + dx/2,   x + dx, x + dx, idx);
    var yi = bezierPoint(y, y, y + dy, y + dy, idx);

    line(xi, yi, xi + sign*random(8), yi + random(18));  
	
  }
}

function tree(left, right, top, bottom) {
  for (var idx = 0; idx < nbranchs; idx += 1) {
    
    // choose a random y position
    var y = random(bottom, top);
		
    
    // choose a random x position inside of a triangle
    var dx = map(y, bottom, top, 0.0, (right-left)/2.0);
    var x = random(left + dx, right - dx);
		
    var x1 = random(left + dx, right - dx);
    
		// choose the size of the branch according to the position on the tree
    var w = map (x, left, right, random(-25) -25, random(25)+25) + 1;
    var h = map (y, bottom, top, 5 +random(20), 5);
    
		var w1 = map (x, left, right, random(-35), random(35)) + 3;
    var h1 = map (y, bottom, top, random(10), random(10));
    // randonize the size
    var dw = random(-10, 5);
    var dh = random (-5, 5);
  	
		var dw1 = random(-5, 1);
    var dh1 = random (-1, 1);
    // create the new branch
		branch(x1, y, w1 + dw1, h1 + dh1);
		stroke(random(0),random(128),random(15));
		branch(x1, y, w1 + dw1, h1 + dh1);
		stroke(random(25),random(255),random(50));
    branch(x, y, w + dw, h + dh);
    
  }
}

About Phaser Editor 2D game editor.

Today I install Phaser Editor 2D on Fedora 32, you can download it from the official website. Phaser Editor 2D is a commercial IDE to develop video-games. It is delivered as an offline product and users can run it for free (with certain limitations) or can purchase a license key to unlock all features. Phaser Editor 2D version 3, the latest, is a complete new software based on web technologies. So we created Play Phaser Editor 2D, a small service to allow Phaser Editor 2D license owners, to run the editor and create small projects in the cloud. However, in the future, we will provide a different cloud service with options for storage, collaboration, publishing, integration with other services and payment. These are the Play Phaser Editor 2D available plans: Free Plan and Premium Plan About Free Plan: Running the FREE PLAN 0B/50MB of storage is used 59 days before expiration date The Premium Plan comes with these options:

• One Year License - 30$ Valid for one year after the purchase. Phaser Editor 2D Team email support. Write to developers@phasereditor2d.com. The option to refund in the first month after the purchase.
• Two Years License - 45$ Valid for two years after the purchase. Phaser Editor 2D Team email support. Write to developers@phasereditor2d.com. The option to refund in the first month after the purchase.
• Lifetime License - 75$ Never expires. Phaser Editor 2D Team email support. Write to developers@phasereditor2d.com. The option to refund in the first month after the purchase.
• Two Years Team License - 125$ 5 developers allowed. Valid for two years. Phaser Editor 2D Team email support. Write to developers@phasereditor2d.com. The option to refund in the first month after the purchase.

This is a video tutorial from official youtube channel:

Testing the ACE embeddable code editor.

Topday I try to use the ACE editor.

This is an embeddable code editor written in JavaScript with many features:

• Syntax highlighting for over 110 languages (TextMate/Sublime Text.tmlanguage files can be imported)
• Over 20 themes (TextMate/Sublime Text .tmtheme files can be imported)
• Automatic indent and outdent
• An optional command line
• Handles huge documents (four million lines seems to be the limit!)
• Fully customizable key bindings including vim and Emacs modes
• Search and replace with regular expressions
• Highlight matching parentheses
• Toggle between soft tabs and real tabs
• Displays hidden characters
• Drag and drop text using the mouse
• Line wrapping
• Code folding
• Multiple cursors and selections
• Live syntax checker (currently JavaScript/CoffeeScript/CSS/XQuery)
• Cut, copy, and paste functionality

You can read more at the official website.

See the Pen ace_editor_001 by Cătălin George Feștilă (@catafest) on CodePen.

Another Ct.js game engine.

This is a game engine build and run with javascrip.
You can used on these operating systems: Windows, Linux and Mac OS.
Download the archive for your operating system and unarchive.
Start the ctjs application.
Into the main window you have some editbox for Name, Author name, Homepage and Version.
This window comes with buttons for play, stop ... many tabs: Settings, Rooms, UI, Sound ...
First, you need to fill the Settings with your Name and all data, and add Actions.
This engine game comes with examples to see how good is.
Let's see a video tutorial from Gamefromscratch user:

The wrld for custom maps.

A good map can have many features.
If you don't want to build one using advanced programming language then you can use this website.
You can use this with an online map with Unity, JavaScript, iOS and Android.
You can also build your indoor map and visualize any building in 3D.
All of these features let you optimize building management, resources, and planning.
The map can have many features like time of day, weather and seasons and heat map.
The next example is an outdoor map of my location.

The neon effect with javascript P5 JavaScript library.

The P5.js is a JavaScript library for creative coding.
You can use by adding this link on your HTML area using the script tag:

https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js

You can use it like any JavaScript library.
You have two functions: setup and a draw for setup and drawing.

function setup() {
  createCanvas(window.innerWidth, window.innerHeight);
}

function draw() {
  ellipse(50, 50, 80, 80);
}

Then you can fill these functions with any javascript code.
You can see a neon effect with two bezier functions.
The example uses the mouse movement to change the bezier lines.
You can see many examples created by me at codepen website.