Pages

Se afișează postările cu eticheta web development. Afișați toate postările
Se afișează postările cu eticheta web development. Afișați toate postările

luni, 5 octombrie 2026

Tool : Visual Studio Code Server.

The Visual Studio Code Server is a service you can run on a remote development machine, like your desktop PC or a virtual machine (VM). It allows you to securely connect to that remote machine from anywhere through a local VS Code client, without the requirement of SSH.
In VS Code, we want users to seamlessly leverage the environments that make them the most productive. The VS Code Remote Development extensions allow you to work in the Windows Subsystem for Linux (WSL), remote machines via SSH, and dev containers directly from VS Code. These extensions install a server on the remote environment, allowing local VS Code to smoothly interact with remote source code and runtimes.
We now provide a standalone "VS Code Server," which is a service built off the same underlying server used by the remote extensions, plus some additional functionality, like an interactive CLI and facilitating secure connections to vscode.dev.

luni, 28 septembrie 2026

Tool : The Clerk tool for authentication and user management for web applications.

You can use Clerk to handle authentication and user management for web applications without building the entire login system yourself. Clerk provides ready-made components for authentication, user profiles, organizations, and billing.
From the official website, you can create applications that support:
  • User sign-up and sign-in (email, Google, GitHub, and more).
  • Session and device management.
  • Multi-factor authentication (MFA).
  • Editable user profiles.
  • Organizations, teams, and multi-tenant SaaS applications.
  • Member invitations and role management.
  • Social login and Single Sign-On (SSO).
  • Pre-built UI components for React, Next.js, and other modern frameworks.
Examples of Projects You Can Build
  • SaaS platforms with subscriptions
  • Online learning platforms
  • Forums and communities
  • Custom CRM systems
  • Customer dashboards
  • AI applications with user accounts
  • E-commerce stores
  • Business administration portals
If you work with Python, FastAPI, Django, or even Godot, Clerk is typically used as the authentication provider while your backend verifies the tokens and manages application logic.
In short, you do not build applications directly inside Clerk. Instead, you build your application and use Clerk to provide authentication, user management, organizations, and security features.

vineri, 25 septembrie 2026

News : Javalin 7 and artificial intelligence .

Javalin 7 requires Java 17+, and Jetty 12+. See the migration guide for details on upgrading from Javalin 6. Javalin follows semantic versioning, meaning there are no breaking changes unless the major (leftmost) digit changes, for example 6.X.X to 7.X.X.
Copy pre-built instructions to teach your AI coding assistant about Javalin 7.2.3. Each block contains the same core knowledge — API patterns, conventions, and common pitfalls — adapted to the format your tool expects. Add the instructions to your project's AI config file and your assistant will write better Javalin code immediately.
This can be integrate with artificial intelligence, see this webpage.

joi, 10 septembrie 2026

News : React 19.3 released ...

React 19.3 is now available on npm!
Last year, we shared View Transitions and Fragment Refs as new experimental APIs coming to React. We’re excited to announce that both of these are now stable in React 19.3!
In this post, we’ll go over how they work, and also cover some other notable changes in this release.

miercuri, 9 septembrie 2026

News : Vercel Opens vgpu 0.3.1 for WebGPU Across Browser, Node, and CI.

Vercel has open-sourced vgpu 0.3.1, a small TypeScript WebGPU layer with typed WGSL modules, shared browser and Node APIs, deterministic mocks, CLI validation, examples, and agent-facing documentation.

luni, 7 septembrie 2026

News : Stable Channel Update for Desktop by Chrome.

The Stable channel has been updated to 152.0.7977.82/.83 for Windows and Mac and 152.0.7977.82 for Linux, which will roll out over the coming days/weeks.

sâmbătă, 18 iulie 2026

Tools : testing LiteRT on static website with codesandbox.io online tool.

This simple project on codesandbox.io creates a responsive web interface for a LiteRT-powered image classifier that enables users to load machine learning models and process images directly within the browser.

joi, 9 iulie 2026

News : LiteRT.js, Google's high performance Web AI Inference from Google

We are excited to announce LiteRT.js, a JavaScript binding of LiteRT for running AI directly inside the web browser. By bringing the trusted on-device inference library LiteRT to the web, web developers can now run ML and AI models with maximum performance entirely locally. This means enhanced user privacy, zero server costs, and ultra-low latency for real-time experiences. For developers with existing .tflite models, LiteRT.js makes deployment to mobile and desktop web browsers smoother than ever, serving as a powerful evolution from TensorFlow.js for executing .tflite models.

joi, 28 mai 2026

Tools : PerfCompare and Firefox Profiler tools.

The latest version of PerfCompare is now live! See the official website.
The latest version of the Firefox Profiler is now live! Check out the full changelog below to see what’s changed on the official website.

miercuri, 27 mai 2026

Tools : Exercism - website for learning.

Develop fluency in 82 programming languages with our unique blend of learning, practice and mentoring.
Over 8,136 coding exercises. From "Allergies" to "Zebra Puzzle".

joi, 21 mai 2026

News : Get 2 social accounts free forever by Zernio with 15+ social networks

Zernio is a social media scheduling platform that lets you manage and publish content across all major platforms from a single API. Whether you're building a social media tool, automating your content workflow, or managing multiple brands, Zernio's API gives you complete control.
One unified API for 15+ social networks — publish, run ads, pull analytics, manage DMs. Pay-per-account beyond the free tier.

marți, 19 mai 2026

Shadertoy: buttons with effect - 001.

A simple effect on buttons with a little help of artificial intelligence.
// with a little help with artificial inteligence
// ============================================================================
// HELPER FUNCTIONS
// ============================================================================

// Matrix for 2D rotation (useful if you want to rotate internal effects)
mat2 rotate2d(float angle){
    return mat2(
        cos(angle), -sin(angle),
        sin(angle), cos(angle)
    );
}

// Signed Distance Field (SDF) for a rectangle with independent corner radii
// r.x = Top-Right, r.y = Bottom-Right, r.z = Top-Left, r.w = Bottom-Left
float sdRoundedBox( in vec2 p, in vec2 b, in vec4 r )
{
    r.xy = (p.x > 0.0) ? r.xy : r.zw;
    r.x  = (p.y > 0.0) ? r.x  : r.y;
    vec2 q = abs(p) - b + r.x;
    return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - r.x;
}

// ============================================================================
// MAIN SHADERTOY ENTRY POINT
// ============================================================================
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // 1. Normalize coordinates (from 0.0 to 1.0)
    vec2 uv = fragCoord / iResolution.xy;
    float ratio = iResolution.x / iResolution.y;
    
    // 2. Define the Color Palette (Sci-Fi / Neon Theme)
    vec3 backgroundColor = vec3(0.06, 0.06, 0.09); // Dark background
    vec3 buttonBaseColor = vec3(0.05, 0.18, 0.35); // Base body fill color
    vec3 neonBlue        = vec3(0.27, 0.67, 1.0);  // Sharp border stroke
    vec3 aquaGlow        = vec3(0.0, 0.95, 1.0);   // Outer aura glow
    
    vec3 finalColor = backgroundColor;

    // 3. Split the screen into a 2x3 grid (2 columns, 3 rows) to show 6 variations
    vec2 gridSize = vec2(2.0, 3.0);
    vec2 gridId = floor(uv * gridSize); 
    
    // Localize UV coordinates inside each grid cell, and center the origin (0,0)
    vec2 localUV = fract(uv * gridSize) - 0.5;
    
    // Adjust aspect ratio locally for the 2x3 grid mapping
    float localRatio = (iResolution.x / gridSize.x) / (iResolution.y / gridSize.y);
    localUV.x *= localRatio;

    // 4. Define Button Size (scaled for the 2x3 grid layout)
    vec2 buttonSize = vec2(0.38, 0.13); 
    
    // 5. Initialize the corner radii vector
    // Format: vec4(Top-Right, Bottom-Right, Top-Left, Bottom-Left)
    vec4 cornerRadii = vec4(0.0);

    // 6. Assign a different combination to each grid area (Rows from bottom=0 to top=2)
    if (gridId.y == 2.0) // === TOP ROW ===
    {
        if (gridId.x == 0.0) {
            // [TOP-LEFT]: All corners rounded equally (Standard Pill Button)
            cornerRadii = vec4(0.07, 0.07, 0.07, 0.07);
        } else {
            // [TOP-RIGHT]: Sharp rectangular button (No rounding)
            cornerRadii = vec4(0.00, 0.00, 0.00, 0.00);
        }
    }
    else if (gridId.y == 1.0) // === MIDDLE ROW (THE LEAF DIAGONALS) ===
    {
        if (gridId.x == 0.0) {
            // [MIDDLE-LEFT]: Leaf Style 1 (Top-Right and Bottom-Left rounded)
            cornerRadii = vec4(0.15, 0.00, 0.00, 0.15);
        } else {
            // [MIDDLE-RIGHT]: Leaf Style 2 (Top-Left and Bottom-Right rounded)
            cornerRadii = vec4(0.00, 0.15, 0.15, 0.00);
        }
    }
    else if (gridId.y == 0.0) // === BOTTOM ROW ===
    {
        if (gridId.x == 0.0) {
            // [BOTTOM-LEFT]: Tab Style (Top corners rounded only)
            cornerRadii = vec4(0.08, 0.00, 0.08, 0.00);
        } else {
            // [BOTTOM-RIGHT]: Asymmetric single corner rounded
            cornerRadii = vec4(0.00, 0.00, 0.16, 0.00);
        }
    }

    // 7. Calculate the distance field for the current button shape
    float d = sdRoundedBox(localUV, buttonSize, cornerRadii);

    // 8. Render Button Body (Fill with a clean vertical light-to-dark gradient)
    float fillMask = smoothstep(0.003, 0.0, d); 
    vec3 buttonBody = buttonBaseColor * (1.1 - (localUV.y + 0.5) * 0.4); 
    finalColor = mix(finalColor, buttonBody, fillMask);

    // 9. Render Sharp Neon Border (Stroke)
    float borderThickness = 0.004;
    float borderMask = smoothstep(borderThickness, 0.0, abs(d)) * smoothstep(d, d + 0.004, 0.0);
    finalColor += borderMask * neonBlue * 1.8;

    // 10. Render Dynamic External Glow Effect (Pulses over time using iTime)
    float pulse = sin(iTime * 3.5) * 0.12 + 0.88; 
    float glowIntensity = exp(-max(d, 0.0) * 28.0) * pulse;
    finalColor += glowIntensity * aquaGlow * 0.5 * (1.0 - fillMask); 

    // 11. Render Internal Scanline Laser Effect
    if (d < 0.0) 
    {
        // Laser position sweeps horizontally across the local cell width
        float scanSpeed = 0.5;
        float scanX = fract(iTime * scanSpeed) * 2.2 - 1.1; 
        
        // Render the vertical beam profile
        float scanlineWidth = 0.07;
        float scanline = smoothstep(scanlineWidth, 0.0, abs((localUV.x / localRatio) - scanX));
        
        // Add reflection overlay inside the button
        finalColor += scanline * neonBlue * 0.45;
        
        // Add inner vignette shadow
        float innerShadow = smoothstep(-0.06, 0.0, d);
        finalColor -= vec3(0.15) * innerShadow;
    }

    // 12. Draw grid lines to separate the 6 showcase zones clean
    float gridLines = smoothstep(0.004, 0.0, abs(uv.x - 0.5)) + 
                      smoothstep(0.004, 0.0, abs(uv.y - 0.3333)) + 
                      smoothstep(0.004, 0.0, abs(uv.y - 0.6666));
    finalColor = mix(finalColor, vec3(0.15, 0.15, 0.2), gridLines * 0.4);

    // 13. Output processed pixels to screen
    fragColor = vec4(finalColor, 1.0);
}
Let's see the result:

vineri, 10 aprilie 2026

Tools : test devv.ai for development with artificial intelligence.

Today I tested devv.ai and I asked it to make me an image generator with a prompt.
The issue was : Create an AI image generator app with gallery and user authentication.
After the application was created , I tested online on this webpage.
I asked on the prompt : A magnificent futuristic city based on Christianity, science and knowledge, robots, rehabilitation centers, food, everything is free and fair, without weapons or coercive institutions.
This is resized result:

marți, 31 martie 2026

News : example with cubes from omma.build website

3D scenes, websites, games, apps. Describe anything and Omma builds it for you in seconds.
I found this idea of html graphics design, see this exemple website.
The main website is the omma website.

vineri, 6 martie 2026

News : WordPress 7.0 Beta 3.

This beta version of the WordPress software is still under development. Please do not install, run, or test this version of WordPress on production or mission-critical websites. Instead, you should evaluate Beta 3 on a test server and site.WordPress 7.0 Beta 3 can be tested using any of the following methods
The scheduled final release date for WordPress 7.0 is April 9, 2026.

sâmbătă, 28 februarie 2026

CodePen : march 2026

Security : CORS (Cross‑Origin Resource Sharing) few headers.

CORS (Cross‑Origin Resource Sharing) is a browser security mechanism that controls whether a web application is allowed to request resources from a different domain than the one it was loaded from. It is a controlled extension of the Same‑Origin Policy, which would otherwise block most cross‑site requests.
CORS allows a server to explicitly declare which origins are permitted to access its resources. Without this rule, a malicious website could attempt to read sensitive data from your account on another site.
Header Explanation
Access-Control-Allow-Origin: * Allows any origin to access the resource (very risky for sensitive APIs).
Access-Control-Allow-Origin: https://example.com Allows only the specified origin to access the resource.
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, PATCH Specifies which HTTP methods are allowed for cross-origin requests.
Access-Control-Allow-Headers: Content-Type, Authorization, X-Api-Key Lists which custom request headers the client is allowed to send.
Access-Control-Allow-Credentials: true Allows cookies and authentication data in cross-origin requests; cannot be used with "*".
Access-Control-Expose-Headers: X-RateLimit-Remaining, X-Custom-Header Allows the browser to read specific response headers that are normally hidden.
Access-Control-Max-Age: 86400 Defines how long the browser may cache the preflight response (in seconds).
Access-Control-Request-Method: PUT Sent by the browser during preflight to ask if the HTTP method is allowed.
Access-Control-Request-Headers: Authorization, X-Api-Key Sent by the browser during preflight to ask if custom headers are allowed.
Origin: https://client.com Sent by the browser to indicate the origin of the request.
Vary: Origin Instructs caches that the response may vary depending on the Origin header.
Vary: Access-Control-Request-Headers Ensures caches treat responses differently based on requested headers.
Vary: Access-Control-Request-Method Ensures caches treat responses differently based on requested methods.
Timing-Allow-Origin: * Allows cross-origin access to detailed performance timing information.
Timing-Allow-Origin: https://example.com Allows only the specified origin to access performance timing data.
Access-Control-Allow-Private-Network: true Allows requests to private network resources (used in newer browser security models).
Cross-Origin-Opener-Policy: same-origin Isolates the browsing context from cross-origin pages to prevent data leaks.
Cross-Origin-Opener-Policy: same-origin-allow-popups Allows popups but keeps the main page isolated from cross-origin interference.
Cross-Origin-Opener-Policy: unsafe-none Disables isolation; allows cross-origin interactions (least secure).
Cross-Origin-Embedder-Policy: require-corp Requires embedded resources to explicitly allow cross-origin embedding (needed for SharedArrayBuffer).
Cross-Origin-Embedder-Policy: unsafe-none Allows embedding any resource without restrictions (not secure).
Cross-Origin-Resource-Policy: same-origin Restricts resource loading to the same origin only.
Cross-Origin-Resource-Policy: same-site Allows resource loading from the same site but different subdomains.
Cross-Origin-Resource-Policy: cross-origin Allows resource loading from any origin.
Cross-Origin-Opener-Policy-Report-Only Reports violations of COOP without enforcing them.
Cross-Origin-Embedder-Policy-Report-Only Reports violations of COEP without enforcing them.
Content-Security-Policy: script-src 'self' Restricts which scripts can run; critical for preventing cross-origin script injection.
Content-Security-Policy: worker-src 'self' Controls which origins can load Web Workers; required for secure WASM execution.
Content-Security-Policy: frame-ancestors 'none' Prevents the page from being embedded in iframes (anti-clickjacking).
Content-Security-Policy: require-trusted-types-for 'script' Protects against DOM XSS by enforcing Trusted Types.
Permissions-Policy: shared-array-buffer=(self) Allows SharedArrayBuffer only in isolated contexts (COOP + COEP required).
Permissions-Policy: fullscreen=(self) Controls which origins can request fullscreen mode.
Permissions-Policy: geolocation=() Blocks geolocation access for all origins.
Referrer-Policy: no-referrer Prevents sending the Referer header to any destination.
Referrer-Policy: strict-origin-when-cross-origin Sends full referrer on same-origin requests, but only origin on cross-origin.
Sec-Fetch-Site: cross-site Indicates the request came from a different site; used by browsers for security decisions.
Sec-Fetch-Mode: cors Indicates the request is a CORS request.
Sec-Fetch-Dest: script Indicates the destination type of the request (script, image, iframe, etc.).
Sec-Fetch-User: ?1 Indicates the request was triggered by a user interaction.
Report-To: {"group":"coop","max_age":10886400} Defines where browsers should send COOP/COEP violation reports.
NEL: {"report_to":"coop","max_age":10886400} Network Error Logging; allows reporting of network failures.