Frontend Feeds

Today

Front-end, in one read.

The latest from the sources worth following, newest first.

  • Web Tools WeeklyMulti Author Blogsread at source

    Web Tools Weekly Issue #694

    React Tools, AI Tools, Text Editors

  • DEV CommunityThe Giantsread at source

    Passkeys in 17 Files: Hybrid Login, Recovery Codes and Revocation in Symfony 8.1

    Most passkey tutorials end when the browser prompt appears. Production starts there. Your users already have passwords, so they need to add a passkey from their account page, sign in with it next time or pick it from the browser's autofill, see when each key was last used, revoke one, and get back in with a recovery code when every device is gone. This guide builds exactly that on Symfony 8.1. Two bundles do the heavy lifting: web-auth/webauthn-symfony-bundle runs the FIDO2 ceremonies, and mattleads/passkeys-bundle adds the product layer around them: the login flow, recovery codes, usage tracking, management pages and Stimulus controllers. I maintain the second one. You should be able to follow this guide without reading either bundle's source. The finished code is at github.com/mattleads/passkeys-demo . You write or edit 17 files. Everything else comes from Flex recipes. Prerequisites PHP 8.2 or later. This guide uses 8.4. Composer. SQLite, which ships with PHP. A browser with a platform authenticator: Touch ID, Windows Hello, Android or a security key. No Node.js. AssetMapper serves everything. Versions used below: symfony/skeleton 8.1.*, web-auth/webauthn-symfony-bundle 5.3.10, mattleads/passkeys-bundle 0.1.1, doctrine/orm 3.7 and symfony/stimulus-bundle 3.6. 1. Skeleton and packages composer create-project symfony/skeleton: "8.1.*" passkeys-demo cd passkeys-demo composer config extra.symfony.allow-contrib true # lets Flex apply the WebAuthn bundle's recipe composer require mattleads/passkeys-bundle web-auth/webauthn-symfony-bundle \ symfony/security-bundle symfony/twig-bundle symfony/asset-mapper symfony/stimulus-bundle \ doctrine/orm doctrine/doctrine-bundle symfony/uid symfony/serializer symfony/property-access symfony/property-info \ symfony/rate-limiter symfony/lock symfony/password-hasher php bin/console importmap:require @hotwired/stimulus @simplewebauthn/browser symfony/rate-limiter and symfony/lock are for login throttling, which you want because recovery codes are short. @simplewebauthn/browser is the small client library the Stimulus controllers use to talk to navigator.credentials . Flex registers the bundles and drops config/packages/webauthn.yaml and config/routes/webauthn_routes.yaml for you. 2. Environment # .env.local APP_SECRET=change-me-to-something-long-and-random DATABASE_URL="sqlite:///%kernel.project_dir%/var/data.db" RELYING_PARTY_ID=localhost RELYING_PARTY_NAME="Passkeys Demo" WEBAUTHN_ALLOWED_ORIGINS="http://localhost:8765,http://127.0.0.1:8765" Two values matter here. The relying-party id is localhost . WebAuthn only works in a secure context. Browsers make an exception for localhost over plain HTTP, but not for 127.0.0.1 , so always open the app as http://localhost:… . The port is part of the origin. If you serve on a different port, change it both here and in webauthn.yaml below, or the ceremony fails with an origin mismatch. 3. Entities Two entities. The user carries an opaque user handle for WebAuthn, never the email, so the email can change later. // src/Entity/User.php namespace App\Entity ; use App\Repository\UserRepository ; use Doctrine\ORM\Mapping as ORM ; use Symfony\Component\Security\Core\User\ { PasswordAuthenticatedUserInterface , UserInterface }; use Symfony\Component\Uid\Ulid ; use Webauthn\PublicKeyCredentialUserEntity ; #[ORM\Entity(repositoryClass: UserRepository::class)] #[ORM\Table(name: 'app_user')] class User implements UserInterface , PasswordAuthenticatedUserInterface { #[ORM\Id, ORM\GeneratedValue, ORM\Column] private ?int $id = null ; #[ORM\Column(length: 180, unique: true)] private string $email ; #[ORM\Column(length: 26, unique: true)] private string $userHandle ; #[ORM\Column(length: 255, nullable: true)] private ?string $password = null ; /** @var list */ #[ORM\Column] private array $roles = []; public function __construct ( string $email ) { $this -> email = $email ; $this -> userHandle = ( string ) new Ulid (); } public function getUserIdentifier (): string { return $this -> email ; } public function getUserHandle (): string { return $this -> userHandle ; } public function getPassword (): ?string { return $this -> password ; } public function setPassword ( ?string $password ): void { $this -> password = $password ; } public function getRoles (): array { return array_values ( array_unique ([ ... $this -> roles , 'ROLE_USER' ])); } public function eraseCredentials (): void {} public function toWebAuthnUserEntity (): PublicKeyCredentialUserEntity { return new PublicKeyCredentialUserEntity ( $this -> email , $this -> userHandle , $this -> email ); } } The credential extends the WebAuthn bundle's CredentialRecord , whose fields come from a mapped superclass the bundle registers with Doctrine. We add an id and the usage timestamps, and implement the passkeys bundle's one-method interface so "last used" gets filled in automatically. // src/Entity/Credential.php namespace App\Entity ; use App\Repository\CredentialRepository ; use Doctrine\ORM\Mapping as ORM ; use MattLeads\PasskeysBundle\Contract\TracksCredentialUsageInterface ; use Webauthn\CredentialRecord ; #[ORM\Entity(repositoryClass: CredentialRepository::class)] #[ORM\Table(name: 'webauthn_credentials')] #[ORM\HasLifecycleCallbacks] class Credential extends CredentialRecord implements TracksCredentialUsageInterface { #[ORM\Id, ORM\GeneratedValue, ORM\Column] private ?int $id = null ; #[ORM\Column(nullable: true)] private ? \DateTimeImmutable $createdAt = null ; #[ORM\Column(nullable: true)] private ? \DateTimeImmutable $lastUsedAt = null ; #[ORM\PrePersist] public function onPrePersist (): void { $this -> createdAt ??= new \DateTimeImmutable (); } /** The validators hand back a plain CredentialRecord; we turn it into this entity before saving. */ public static function fromRecord ( CredentialRecord $r ): self { return new self ( $r -> publicKeyCredentialId , $r -> type , $r -> transports , $r -> attestationType , $r -> trustPath , $r -> aaguid , $r -> credentialPublicKey , $r -> userHandle , $r -> counter , $r -> otherUI , $r -> backupEligible , $r -> backupStatus , $r -> uvInitialized ); } /** Fields that change after each successful login. */ public function syncFrom ( CredentialRecord $r ): void { $this -> counter = $r -> counter ; $this -> backupStatus = $r -> backupStatus ; $this -> uvInitialized = $r -> uvInitialized ; $this -> otherUI = $r -> otherUI ; } public function getLastUsedAt (): ? \DateTimeImmutable { return $this -> lastUsedAt ; } public function markUsed ( \DateTimeImmutable $at ) : void { $this -> lastUsedAt = $at ; } } Keep fromRecord() and syncFrom() in mind. Section 4 explains why they exist, and they prevent the first error you would otherwise hit. 4. Repositories The WebAuthn bundle looks users up by username, and that string must be exactly what getUserIdentifier() returns. If the two disagree, the "add a passkey" page cannot find the current user and the login flow endpoint cannot find anyone. // src/Repository/UserRepository.php namespace App\Repository ; use App\Entity\User ; use Doctrine\Bundle\DoctrineBundle\Repository\ServiceEntityRepository ; use Doctrine\Persistence\ManagerRegistry ; use Symfony\Component\Security\Core\User\ { PasswordAuthenticatedUserInterface , PasswordUpgraderInterface }; use Webauthn\Bundle\Repository\PublicKeyCredentialUserEntityRepositoryInterface ; use Webauthn\PublicKeyCredentialUserEntity ; final class UserRepository extends ServiceEntityRepository implements PublicKeyCredentialUserEntityRepositoryInterface , PasswordUpgraderInterface { public function __construct ( ManagerRegistry $registry ) { parent :: __construct ( $registry , User :: class ); } public function findOneByUsername ( string $username ): ?PublicKeyCredentialUserEntity { return $this -> findOneBy ([ 'email' => $username ]) ?-> toWebAuthnUserEntity (); } public function findOneByUserHandle ( string $userHandle ): ?PublicKeyCredentialUserEntity { return $this -> findOneBy ([ 'userHandle' => $userHandle ]) ?-> toWebAuthnUserEntity (); } public function save ( User $user ): void { $this -> getEntityManager () -> persist ( $user ); $this -> getEntityManager () -> flush (); } public function upgradePassword ( PasswordAuthenticatedUserInterface $user , string $newHashedPassword ): void { if ( $user instanceof User ) { $user -> setPassword ( $newHashedPassword ); $this -> getEntityManager () -> flush (); } } } For credentials, the WebAuthn bundle ships a Doctrine repository that already handles the base64 storage of binary ids. Extend it, add deletion so the passkeys bundle can offer Revoke , and override saveCredentialRecord() : // src/Repository/CredentialRepository.php namespace App\Repository ; use App\Entity\Credential ; use Doctrine\Persistence\ManagerRegistry ; use MattLeads\PasskeysBundle\Contract\CanDeleteCredentialRecord ; use Webauthn\Bundle\Repository\DoctrineCredentialSourceRepository ; use Webauthn\CredentialRecord ; final class CredentialRepository extends DoctrineCredentialSourceRepository implements CanDeleteCredentialRecord { public function __construct ( ManagerRegistry $registry ) { parent :: __construct ( $registry , Credential :: class ); } public function saveCredentialRecord ( CredentialRecord $credentialRecord ): void { if ( ! $credentialRecord instanceof Credential ) { $existing = $this -> findOneByCredentialId ( $credentialRecord -> publicKeyCredentialId ); if ( $existing instanceof Credential ) { $existing -> syncFrom ( $credentialRecord ); // after a login: counter, backup flags $credentialRecord = $existing ; } else { $credentialRecord = Credential :: fromRecord ( $credentialRecord ); // registration } } parent :: saveCredentialRecord ( $credentialRecord ); } public function deleteCredentialRecord ( CredentialRecord $credentialRecord ): void { $this -> getEntityManager () -> remove ( $credentialRecord ); $this -> getEntityManager () -> flush (); } } The conversion exists because the attestation and assertion validators construct a plain Webauthn\CredentialRecord . Persist that directly and Doctrine throws "The given entity of type 'Webauthn\CredentialRecord' has no identity/no id values set" , because only your subclass has an id mapping. Registration needs a new entity. A login needs the existing row updated, because the signature counter and the backup state changed. 5. Security configuration # config/packages/security.yaml security : password_hashers : Symfony\Component\Security\Core\User\PasswordAuthenticatedUserInterface : ' auto' providers : app_users : entity : { class : App\Entity\User , property : email } firewalls : dev : pattern : ^/(_profiler(/|$)|(_wdt|assets|build)/) security : false main : lazy : true provider : app_users entry_point : form_login form_login : login_path : app_login check_path : app_login username_parameter : _username password_parameter : _password enable_csrf : true default_target_path : app_account webauthn : authentication : routes : options_path : /login/passkey/options result_path : /login/passkey/result custom_authenticators : - MattLeads\PasskeysBundle\Security\RecoveryCodeAuthenticator login_throttling : max_attempts : 5 logout : path : app_logout target : app_login access_control : - { path : ^/account , roles : ROLE_USER } Three authenticators live on this firewall: password form, WebAuthn assertion and recovery code. Symfony needs entry_point to know where to send anonymous visitors. Forget it and the container refuses to compile with a long message about "multiple authenticators". There is no registration: block under webauthn: , and that is deliberate. That block is for passwordless sign-up and always reads the username from the request body. To add a passkey to the account you are already logged into, use the WebAuthn bundle's standalone creation controllers instead: # config/packages/webauthn.yaml webauthn : credential_repository : App\Repository\CredentialRepository user_repository : App\Repository\UserRepository allowed_origins : [ ' http://localhost:8765' , ' http://127.0.0.1:8765' ] creation_profiles : default : rp : name : ' %env(RELYING_PARTY_NAME)%' id : ' %env(RELYING_PARTY_ID)%' authenticator_selection_criteria : resident_key : required # discoverable credential → shows up in browser autofill user_verification : preferred request_profiles : default : rp_id : ' %env(RELYING_PARTY_ID)%' user_verification : preferred controllers : enabled : true creation : add_passkey : options_path : /account/passkeys/add/options result_path : /account/passkeys/add/result user_entity_guesser : Webauthn\Bundle\Security\Guesser\CurrentUserEntityGuesser profile : default resident_key: required makes the passkey discoverable , which lets the browser offer it from the username field's autofill (conditional UI). Without it you get a credential that only works when the server names it first. The creation controllers above are registered as routes named webauthn.controller.creation.request.add_passkey and …response.add_passkey . Tell the passkeys bundle about them so its management page can render the "Add a passkey" button, and import its routes: # config/packages/mattleads_passkeys.yaml mattleads_passkeys : recovery : default_target_path : /account management : add_passkey : options_route : webauthn.controller.creation.request.add_passkey result_route : webauthn.controller.creation.response.add_passkey # config/routes/mattleads_passkeys.yaml mattleads_passkeys : resource : ' @MattLeadsPasskeysBundle/config/routes.php' That gives you /login/flow , /login/recovery , /account/passkeys , /account/passkeys/revoke and /account/passkeys/recovery-codes . 6. Controllers Two of ours. A security controller for the login page, logout and the account page: // src/Controller/SecurityController.php namespace App\Controller ; use Symfony\Bundle\FrameworkBundle\Controller\AbstractController ; use Symfony\Component\HttpFoundation\Response ; use Symfony\Component\Routing\Attribute\Route ; use Symfony\Component\Security\Http\Attribute\IsGranted ; use Symfony\Component\Security\Http\Authentication\AuthenticationUtils ; final class SecurityController extends AbstractController { #[Route('/login', name: 'app_login')] public function login ( AuthenticationUtils $utils ): Response { if ( $this -> getUser ()) { return $this -> redirectToRoute ( 'app_account' ); } return $this -> render ( 'security/login.html.twig' , [ 'error' => $utils -> getLastAuthenticationError (), 'last_username' => $utils -> getLastUsername (), ]); } #[Route('/logout', name: 'app_logout')] public function logout (): never { throw new \LogicException ( 'Handled by the firewall.' ); } #[Route('/', name: 'app_home')] public function home (): Response { return $this -> redirectToRoute ( $this -> getUser () ? 'app_account' : 'app_login' ); } #[Route('/account', name: 'app_account')] #[IsGranted('ROLE_USER')] public function account (): Response { return $this -> render ( 'account/index.html.twig' ); } } And a deliberately plain registration controller: email and password, no Form component, so the tutorial stays about passkeys. The repository has the full version with validation and a CSRF check. $user = new User ( $email ); $user -> setPassword ( $hasher -> hashPassword ( $user , $password )); $users -> save ( $user ); Users then add passkeys from their account page. This progressive adoption path is the one most real applications want. Passwordless sign-up is a separate topic. 7. Templates A base layout with the importmap, and a login page that includes the bundle's hybrid form. The include is the whole integration on the frontend: {# templates/security/login.html.twig #} {% extends 'base.html.twig' %} {% block body %} Sign in {{ include ( '@MattLeadsPasskeys/login/hybrid.html.twig' , { login_check_path : path ( 'app_login' ), options_url : path ( 'webauthn.controller.security.main.request.options' ), result_url : path ( 'webauthn.controller.security.main.request.result' ), flow_url : path ( 'mattleads_passkeys_login_flow' ), recovery_url : path ( 'mattleads_passkeys_recovery_login' ), csrf_token : csrf_token ( 'authenticate' ), last_identifier : last_username , error : error , } ) }} href= " {{ path ( 'app_register' ) }} " > No account yet? Create one {% endblock %} The two webauthn.controller.security.main.request.* routes are created by the firewall's authentication: block. main is the firewall name. The bundle's own pages (passkey list, recovery codes, recovery login) extend @MattLeadsPasskeys/layout.html.twig . Override that one file to pull them into your layout: {# templates/bundles/MattLeadsPasskeysBundle/layout.html.twig #} {% extends 'base.html.twig' %} base.html.twig needs {{ importmap('app') }} in the head and, for the demo, a nav with links to app_account , mattleads_passkeys_manage and app_logout . 8. Frontend without Node Enable the bundle's Stimulus controllers: // assets/controllers.json { "controllers" : { "@mattleads/passkeys-bundle" : { "hybrid-login" : { "enabled" : true , "fetch" : "eager" }, "passkey" : { "enabled" : true , "fetch" : "lazy" }, "confirm" : { "enabled" : true , "fetch" : "lazy" } } }, "entrypoints" : [] } // assets/app.js import ' ./stimulus_bootstrap.js ' ; StimulusBundle reads the bundle's assets/package.json , AssetMapper serves the files from vendor/ , and the browser imports @simplewebauthn/browser from the importmap you populated in step 1. Check with php bin/console debug:asset-map | grep passkeys . You should see the three controllers and webauthn_service.js . 9. Run it php bin/console doctrine:schema:create php -S localhost:8765 -t public public/index.php Open http://localhost:8765 and walk through: Create account , then sign in with the password. The flow endpoint returned password , so the form revealed a password field. Passkeys , then Add a passkey to this device , then approve with Touch ID or Windows Hello. The table shows the new credential, its transports ( hybrid, internal for a synced platform passkey), whether it is backed up, and Last used: never . Sign out. Type the email and press Continue . This time the flow endpoint says passkey , the browser prompts, and you land on /account without ever seeing a password field. Back on the passkeys page, Last used now has a timestamp. Generate new recovery codes . Ten codes, shown once. Sign out, open Lost access? and enter one. Each code works exactly once, and after five bad attempts the firewall's throttling kicks in. Revoke , which takes two clicks because the button changes to Confirm revoke . Sign out and in again, and you are back to the password field. One thing to know about step 5: revoking deletes the credential on the server, but the passkey still exists in iCloud Keychain or Google Password Manager as an orphan. That is how passkeys work everywhere. The platform vendors are adding signal APIs so a site can ask the client to clean up, but you cannot rely on them yet. 10. The three errors you will hit if you skip a step Error Cause Fix "has no identity/no id values set" on registration persisting the validator's plain CredentialRecord convert to your entity in saveCredentialRecord() (section 4) "Unable to find the user entity" when adding a passkey using the firewall's registration: block, which reads the username from the body webauthn.controllers.creation with CurrentUserEntityGuesser (section 5) Ceremony fails with an origin / RP id error opened via 127.0.0.1 , or a port not in allowed_origins use http://localhost: and list that exact origin A fourth problem raises no error at all. Without resident_key: required , passkeys never appear in the browser's autofill, and users keep typing passwords. Where to go from here Passwordless sign-up : the firewall's registration: block with RequestBodyUserEntityGuesser and a CanRegisterUserEntity repository. Production : HTTPS, RELYING_PARTY_ID set to your apex domain so passkeys work on all subdomains, allowed_origins listing every origin that will call the endpoints, migrations instead of schema:create , and a real session storage. Styling : override any template under templates/bundles/MattLeadsPasskeysBundle/ . The Stimulus controllers dispatch error , authenticated and armed events if you want your own UI instead of the built-in error line. Which path to take depends on your users. If they already have passwords, ship this hybrid flow and let passkeys spread one account page at a time. If you are starting from zero and want no passwords at all, start from the firewall's registration: block instead. Either way, ship recovery codes and login throttling together, because a short code without a rate limit is a brute-force target. Issues and pull requests on the demo or the bundle are welcome. Source Code: You can find the full implementation and follow the project's progress on GitHub: https://github.com/mattleads/passkeys-demo Let's Connect! If you found this helpful or have questions about the implementation, I'd love to hear from you. Let's stay in touch and keep the conversation going across these platforms: LinkedIn: https://www.linkedin.com/in/matthew-mochalkin/ X (Twitter): https://x.com/MattLeads Telegram: https://t.me/MattLeads GitHub: https://github.com/mattleads

  • DEV CommunityThe Giantsread at source

    I made search engine to search unsearchable topics

    https://samanarthi-search.vercel.app/ It uses in-browser vector search (pgLite n pgVector plugin) to surface curated links for niche, under-represented, or "unsearchable" topics. When traditional search engines and LLMs fail to find poorly documented information overshadowed by mainstream results, currently it works for searching related laptop size conversion, diy ikea pc cabinet, male rape victim stats india n global, if u have any more unsearchable insights into other topics u can submit it through website

  • DEV CommunityThe Giantsread at source

    Replay the Bug Before You Read the Model Code: A Junior's First-Hour Harness for a Mobile AI Repo

    The ticket said: "Transcription stalls after screen lock, then the queue never drains." No device model, no OS version, no network state, no permission state — just one sentence and a screenshot of a spinner. The junior engineer who picked it up spent the morning reading model integration code, because the only machine with a working inference endpoint belonged to a senior developer's laptop. That is a repository problem, not a junior problem: when the endpoint is a secret, the first hour of every ticket becomes archaeology. This article is the harness I would hand a new engineer on day one. It leaves three artifacts in the repo, lets them replay a reported failure outside the app, and rehearses the rollback in the same hour. I have not measured any of the numbers below on a specific device — the code and the card are the proposal, and your recordings are the evidence. What the first hour should leave behind Before you read a single line of model code, produce these three things and commit them together: An endpoint switch — one build-time value with an on-device default, so a laptop with no key still builds and runs. An environment card — a small JSON file that records the device, OS, framework versions, network, permissions, power state, and app state at the moment of the failure. A replay script — one command that sends the same request to the same endpoint and saves the timing breakdown next to the response. The point is not process for its own sake. The point is that a failure report becomes something a second person can reproduce without borrowing anyone's credentials. Step 1 — Make the endpoint a build-time value, not a credential Start by giving the app exactly three targets. Any more than three and the junior cannot tell which one a build used; any fewer and you cannot separate "staging is slow" from "the feature is slow." // config/inference.ts export type InferenceTarget = " on_device " | " staging " | " prod " ; const raw = process . env . EXPO_PUBLIC_INFERENCE_TARGET ?? " on_device " ; if ( ! [ " on_device " , " staging " , " prod " ]. includes ( raw )) { throw new Error ( `Unknown EXPO_PUBLIC_INFERENCE_TARGET: ${ raw } ` ); } export const target = raw as InferenceTarget ; export const baseUrl = target === " staging " ? process . env . EXPO_PUBLIC_STAGING_BASE_URL : target === " prod " ? process . env . EXPO_PUBLIC_PROD_BASE_URL : undefined ; export const isOnDevice = target === " on_device " ; Two details matter more than they look. First, the default is on_device , so a fresh clone with an empty .env still launches and still exercises the offline path. Second, baseUrl is undefined for on-device builds, which forces the call site to handle that case instead of quietly sending traffic somewhere unexpected. # .env.local (never commit this file) EXPO_PUBLIC_INFERENCE_TARGET = staging EXPO_PUBLIC_STAGING_BASE_URL = https://your-staging-host.example Then add a startup assertion that logs the resolved target and the framework version once, at cold start. If a tester reports a bug, you can ask them for that one line instead of asking which branch they built. Step 2 — Write the environment card A report is only reproducible if it carries the conditions. Keep the card flat, human-readable, and small enough that someone will actually fill it in. { "captured_at_utc" : "2026-11-05T09:14:00Z" , "device" : " " , "os_version" : " " , "app_build" : " " , "framework" : " " , "inference_target" : "staging" , "network" : "wifi | cellular | none" , "battery_percent" : 0 , "low_power_mode" : false , "mic_permission" : "granted | denied | not_determined" , "app_state_at_failure" : "foreground | background | relaunched" , "reproduction_steps" : [ "..." ] } The values above are placeholders, not a recorded run — fill them from a real capture before you attach the card to a ticket. app_state_at_failure is the field juniors skip and seniors need, because "after screen lock" is a background transition, not a network condition. Step 3 — Replay the request outside the app Once the endpoint is a value, replaying is a shell script. That matters: it separates "the phone is doing something strange" from "the endpoint is doing something strange" in about a minute. #!/usr/bin/env bash # tools/replay.sh — replay one inference request and record what happened set -euo pipefail : " ${ INFERENCE_BASE_URL :?set INFERENCE_BASE_URL to staging or prod } " : " ${ AUDIO_FILE :?set AUDIO_FILE to a short, non-user clip } " STAMP = " $( date -u +%Y%m%dT%H%M%SZ ) " OUT = "artifacts/replay- ${ STAMP } " mkdir -p " $OUT " curl -sS -X POST " ${ INFERENCE_BASE_URL } /v1/transcribe" \ -H "Content-Type: audio/wav" \ --data-binary "@ ${ AUDIO_FILE } " \ -o " $OUT /response.json" \ -w 'ttfb=%{time_starttransfer}s total=%{time_total}s http=%{http_code}\n' \ | tee " $OUT /timings.txt" echo "wrote $OUT " Run it twice: once on Wi-Fi, once with the phone on cellular and the laptop tethered to the same connection. You are looking for the shape of the difference, not a scoreboard — if time-to-first-byte moves by hundreds of milliseconds between runs, the endpoint or the network is your suspect, and the app's queue is probably innocent. If the replay succeeds while the app stalls, you have narrowed the bug to the client: permission handling, background suspension, or retry behaviour. If the replay also stalls, stop reading app code. Step 4 — Rehearse the rollback in the same hour The third artifact is the one nobody writes until an incident forces them to. Before the day ends, flip EXPO_PUBLIC_INFERENCE_TARGET back to on_device , rebuild, and confirm three behaviours: The feature still produces a result offline, or shows a specific "on-device only" message instead of a spinner. A request that was in flight when the target changed does not retry forever; it either completes or fails once, visibly. Revoking the microphone permission mid-session produces the same fallback, and granting it again recovers without an app restart. Write down which of those three you observed. "Recovered", "restarted", and "silently disappeared" are different outcomes, and only the first one is a pass. Where a free shared endpoint fits Most juniors cannot reproduce a hosted failure because they have no paid key. A free tier fixes the access problem, not the correctness problem. MonkeyCode's free model access and free server option are one way to get a staging target up on day one, and the operator states a free allowance in the millions of tokens — check the current terms page yourself before you depend on a figure or a limit. Disclosure: This article was prepared as part of MonkeyCode's product outreach. Use it where it buys reproducibility, and nowhere else: Situation Target Why Reproducing a user's reported stall staging (shared free endpoint) one known endpoint, no paid key, any teammate can rerun it Debugging airplane-mode behaviour on_device the network has to be genuinely absent Latency or battery numbers for a release decision hardware you control shared capacity cannot attribute variance to your code Real user audio or transcripts never a shared free tier consent, region, and retention are unknown to you Limitations and who should skip this This harness gives you reproducibility, not performance truth. A shared free endpoint has neighbours, and neighbours move; do not publish latency or energy numbers measured against it. If your product handles regulated audio, health data, or anything under a retention agreement, the free tier is out of scope regardless of convenience. Skip the whole approach if your team already has a dedicated staging environment with recorded fixtures — you have solved the access problem the script addresses. Also skip it if there is no on-device path at all, because then the rollback rehearsal has nothing to roll back to. What to put in your first PR Ship the switch, the card, and the script together, plus one line in the README telling the next person the exact command to run. Then attach a real replay artifact to the original ticket, even if the bug is not fixed yet — a reproduced stall with timings is worth more than a guess in a comment. If you run this, tell me your device, OS, and whether the fallback recovered, restarted, or silently disappeared. That comparison is the part I cannot write for you.

  • DEV CommunityThe Giantsread at source

    How I Built an Autonomous, Zero-Hallucination Micro-AI on an Entry-Level 4GB GPU

    How I Built an Autonomous, Zero-Hallucination Micro-AI on an Entry-Level 4GB GPU "Why rent an expensive 70B parameter cloud cluster to guess arithmetic when you can run a 0% hallucination, AST-verified collective intelligence system locally on an entry-level laptop?" If you follow the current AI landscape, the prevailing narrative is simple: bigger is always better . You are told you need an 80GB H100 cluster, or a \$20/month subscription to an API that sends your proprietary data across the internet. When developers try to run local AI on consumer laptops—say, an entry-level NVIDIA GeForce RTX 2050 with 4 GB of VRAM —they usually run into a wall: CUDA Out-Of-Memory (OOM) crashes : Windows Desktop Window Manager (DWM) already takes 500 MB of VRAM, leaving barely ~3.4 GB. One long prompt, and the whole GPU driver panics. Hallucination Hell : Small language models ($\le 3$B parameters) routinely guess arithmetic (e.g., getting 234 * 897 completely wrong) and write code with missing colons or hallucinated imports. Total Amnesia : Once the terminal session closes, the model forgets everything you ever discussed. To solve this, I designed and open-sourced GliaCore 0.3.0 (formerly PROJECT: NEURON)—an experimental, modular micro-AI ecosystem licensed under GPLv3 . Here is the technical story of how it works, how we squeezed real Ampere CUDA acceleration into 942 MB of VRAM, and why a neuro-symbolic collective architecture destroys monolithic LLMs at the edge. 1. The Biological Inspiration: Astrocytes & Neurons In neuroscience textbooks, neurons get all the credit. But in biological brains, neurons cannot compute, synchronize, or survive without the glial network (astrocytes) . Astrocytes regulate metabolic energy, clear chemical waste, and orchestrate synchronization across distinct brain regions. GliaCore inverts the traditional monolithic AI architecture by mimicking this biological relationship: ┌────────────────────────────────────────┐ │ GliaCore Engine (Astrocyte) │ │ VRAM Budget Guard (≤ 3,500 MB Limit) │ └───────────────────┬────────────────────┘ │ MessagePack Binary Synapses ┌───────────────┬──────────────┼───────────────┬────────────────┐ ▼ ▼ ▼ ▼ ▼ Reflex Neuron Math Verifier Coder Neuron Planner Neuron Memory (WAL) ( Instead of asking one giant neural network to do everything from regex filtering to tensor algebra, GliaCore breaks intelligence down into: Specialized Micro-Neurons : Lightweight computational units specializing in Math, Code, Planning, or Reflex security. Binary Synapses : High-speed, typed MessagePack communication channels rather than bloated JSON-over-HTTP. The Astrocyte Orchestrator : A central supervisor that monitors physical GPU VRAM, enforces memory containment, schedules execution DAGs, and consolidates memory. 2. The Hardware Reality: Taming the 4GB NVIDIA RTX 2050 The hardware constraint was non-negotiable: a standard consumer laptop running Windows 11 with an NVIDIA GeForce RTX 2050 (4 GB VRAM, GA107 Ampere, Compute Capability 8.6) and 16 GB of host RAM. On Windows 11, the display server alone consumes ~523 MB of VRAM: [ Total Physical VRAM: 4,096 MB ] ├── Windows DWM & Display Driver: ~523 MB (Reserved) ├── Free Usable VRAM: ~3,440 MB └── GliaCore Hard Safety Ceiling: 3,500 MB (Enforced by HardwareSupervisor) Optimizing CUDA on Ampere Architecture Rather than running in slow CPU emulation mode, we loaded Qwen2.5-0.5B-Instruct in FP16 : Physical Footprint : Exactly 942.32 MB of VRAM . Free Headroom : Leaves over 2,500 MB of VRAM free for dynamic KV-cache expansion during long conversations. Ampere TF32 Acceleration : By activating torch.backends.cuda.matmul.allow_tf32 = True and torch.backends.cudnn.allow_tf32 = True , inference throughput soared from 10.7 to 18.28 tokens/second on CUDA cores. Zero-OOM Guarantee : The HardwareSupervisor checks VRAM budgets before allocating tensors. If headroom dips below a 500 MB safety buffer, it seamlessly degrades workloads to host RAM rather than crashing CUDA. 3. The Secret Sauce: The Neuro-Symbolic Dual Brain Why are monolithic models so prone to errors? Because an LLM is a probabilistic token predictor, not a calculation engine. Asking an LLM to multiply numbers is like asking a poet to do your taxes. GliaCore pairs the neural network with deterministic symbolic engines : A. Mathematical Verification (0% Hallucination) When you ask: "Calculate 25 * 18 + 140 / 7" : ReflexNeuron categorizes the input as MATH . MathVerifierNeuron extracts the equation and passes it to SymPy (exact symbolic computation). It evaluates to 470.0 with 100% mathematical precision . The NVIDIA GPU Neural Model then receives the exact result and writes out the step-by-step human derivation: Step 1: Multiply 25 by 18 = 450 Step 2: Divide 140 by 7 = 20 Step 3: Add results: 450 + 20 = 470 You get both zero hallucination and clean, natural language reasoning . B. Code Synthesis with AST Syntax Self-Repair When you ask: "Write a Python class Stack with push and pop methods" or "Create an HTML/CSS landing page" : The NVIDIA GPU synthesizes the code. CoderNeuron runs the code through Python’s native ast parser . The Reflection Loop : If a syntax error is detected (such as a missing colon or unclosed bracket), GliaCore’s cognitive engine feeds the syntax error back to the model, automatically repairs it, and then runs the verified code inside an isolated OS subprocess sandbox. If the prompt requests a web deliverable (HTML, CSS, JS), GliaCore detects markup structure and outputs clean, copy-pasteable web deliverables without RLHF refusal barriers. C. Sub-Millisecond Reflex Security ( Before any heavy neural inference spins up, ReflexNeuron screens the prompt. Destructive commands ( rm -rf , fork bombs :(){ :|:& };: , PowerShell process termination) and Base64-obfuscated prompt injections are intercepted in , saving GPU compute and protecting your OS. 4. Persistent 4-Tier Memory (No More Amnesia) Cloud chatbots store your chat history in opaque remote databases; local CLI tools usually forget everything the moment you hit Ctrl+C . GliaCore implements a 4-Tier Cognitive Memory Hierarchy backed by persistent SQLite WAL databases ( gliacore_memory.db ): Tier Lifespan Storage Medium Purpose Working Memory Transient Python Heap (RAM) Active multi-step execution scratchpad Episodic Memory Long-Term SQLite (WAL mode) Validated problem solutions & task history across server reboots Semantic Memory Permanent SQLite + BM25 FTS5 Ingested documentation, codebases, and evidence citations Procedural Memory Standing JSON / Declarative Executable tool recipes and registered plugins 5. Benchmark Results: 5-Way Comparison (N = 50 Tasks) We ran 50 evaluation tasks spanning arithmetic, algebra, code synthesis, AST analysis, composite workflows, system planning, prompt injection, and reasoning: Evaluation Metric Raw Monolith (A) Isolated Neurons (B) GliaCore 0.3.0 Full (E) Task Accuracy (%) 54.0% 70.0% 96.0% Math Hallucination (%) 22.0% 10.0% 0.0% (SymPy Verified) Task Failure Rate (%) 46.0% 30.0% 4.0% Peak VRAM Consumed 150.0 MB 26.0 MB 942.3 MB Security Interception 0% (Vulnerable) 0% (Vulnerable) 100% Intercepted ( Inference Speed Variable N/A 18.28 tokens/sec (RTX 2050) Test Suite Coverage N/A N/A 43/43 Passed (100% Clean) 6. Try It: 1-Click Launch on Windows You can clone and run GliaCore right now: git clone https://github.com/shenald-dev/gliacore.git cd gliacore pip install -e . On Windows, simply double-click: run_gliacore.bat The script will automatically: Boot the environment. Allocate the 942 MB model into your NVIDIA GPU VRAM. Open http://127.0.0.1:8000 in your browser into the GliaCore Studio dashboard. You can chat in real time, explore your persistent SQLite memory, ingest local documents, and watch your GPU metrics live. Key Takeaway You don't need a multi-billion parameter model in the cloud to build an intelligent, safe, and productive AI assistant. By pairing compact, edge-optimized language models with exact symbolic solvers, AST syntax parsers, and persistent local databases , you can achieve 0% math hallucination, 100% privacy, and sub-second execution on the laptop you already own. The project is completely open source under GPLv3 : 👉 GitHub Repository: GliaCore 0.3.0 If you found this technical breakdown useful, drop a star on GitHub and share your thoughts in the comments below!

  • DEV CommunityThe Giantsread at source

    Daily Dose of DevOps — Policy as code: for secure automation

    Policy as code: for secure automation A platform capability becomes dangerous when ownership is implicit but authority is broad. For policy as code for secure automation , the decisive question is not whether a team can demonstrate the technology once. It is whether the organisation can operate it repeatedly, audit its decisions, and recover when assumptions fail. The operating problem Treat policy as code as part of a zero-trust delivery system in which identity, provenance, and policy are evaluated continuously. Define the consumer, owner, support boundary, change policy, and recovery objective before selecting implementation details. When operating policy as code for secure automation, undocumented authority and ambiguous ownership create more risk than a missing feature. A credible design measures control coverage, policy exceptions, credential lifetime, remediation latency, and provenance verification. Those measures should be visible to both the platform owner and consuming teams. If the measurements cannot distinguish adoption from coercion, or reliability from mere activity, the operating model is not yet falsifiable. A practical control Start with a narrow contract that can be tested automatically. The implementation should encode short-lived identity, least privilege, immutable dependencies, signed provenance, and policy-as-code enforcement. The following fragment is illustrative; production values must be derived from workload evidence and organisational policy. permissions : contents : read id-token : write steps : - uses : actions/checkout@ - run : cosign verify --certificate-identity-regexp='^https://github.com/example/' artifact Roll the control out to one representative service, observe failure behaviour, and exercise rollback before broad adoption. Record exceptions as expiring decisions with an accountable owner, not permanent bypasses. Trade-offs Standardisation reduces cognitive load and makes controls observable, but an excessively rigid path displaces complexity into workarounds. Flexibility improves local fit, but every variant expands the support surface and weakens fleet-wide guarantees. For policy as code for secure automation, prefer a small mandatory safety kernel surrounded by replaceable implementation choices. The organisation must also pay for operability. More validation increases feedback time; more telemetry increases cost and cardinality risk; stronger isolation can reduce utilisation. Make those costs explicit and compare them with the blast radius and recovery cost they buy down. What teams get wrong The recurrent anti-pattern is adding ceremonial approval gates without constraining capabilities or verifying the produced artifact. Teams then measure task completion instead of production outcomes, accumulate exceptions without expiry, and discover during an incident that the nominal control has no tested recovery path. Another error is adopting a reference architecture without its assumptions. Validate identity boundaries, dependency failure, capacity pressure, partial rollout, rollback, and audit reconstruction in the environment that will actually carry production traffic. Key Takeaways Treat policy as code as an owned product and control system, not a tool installation. Design for the constraints captured by “for secure automation”; document the authority, failure domain, and recovery objective. Measure control coverage, policy exceptions, credential lifetime, remediation latency, and provenance verification. Automate short-lived identity, least privilege, immutable dependencies, signed provenance, and policy-as-code enforcement. Test degraded operation and rollback before scaling adoption.

  • CSS-TricksThe Giantsread at source

    Taming Typography: Building a Modern CSS Reset

    Stu created tidy-typography.css: a style reset for taming typography with modern CSS features for everything from fluid typography and vertical rhythm, to hyphens and variable fonts. Taming Typography: Building a Modern CSS Reset originally handwritten and published with love on CSS-Tricks . You should really get the newsletter as well.

  • Level AccessCompany/Startup Blogs10 min read

    A Guide to PDF Accessibility

    PDF accessibility means people with disabilities can read, navigate, and use a PDF, including with a screen reader, keyboard, or magnification. Among other The post A Guide to PDF Accessibility appeared first on Level Access .

  • Hacker News Front PageThe Giantsread at source

    Image of Our Satellite-Choked Night Skies

  • Hacker News Front PageThe Giantsread at source

    Alpine Linux Security advisory: OpenSSH-server password authentication bypass

  • Hacker News Front PageThe Giantsread at source

    September in Servo: <progress>, rounded rectangles, and more

  • Hacker News Front PageThe Giantsread at source

    MCP Explained

  • HeyDesignerDeveloper/Designer Newsread at source

    Fortune telling and speculative design

    Modern CSS might make your front-end more complex, Blossom carousel.

  • Hacker News: Show HNLibraries, Frameworks, etc.read at source

    Show HN: XSDHub – checks correctness of invoice format and local standards

    Comments

  • DigitalOcean BlogMulti Author Blogs4 min read

    Introducing DigitalOcean Cuttlefish: Get more done with agents on the go

    Your agent has been refactoring for two hours. It’s deep in the codebase, making real progress, and then it stops: “Can I run this migration?” Nothing happens until you answer. And you’re not at your desk. You’re in line at the grocery store, or waiting at school pickup.…

  • Hacker News: Show HNLibraries, Frameworks, etc.read at source

    Show HN: TubeHaus – an open-source YouTube client with no Google account

    Comments

  • Hacker News: Show HNLibraries, Frameworks, etc.read at source

    Show HN: Aloud – native macOS TTS for selected text, PDFs and screenshots ($19)

    Comments

  • Hacker News Front PageThe Giantsread at source

    I wish tech companies knew more about me

  • Hacker News: Show HNLibraries, Frameworks, etc.read at source

    Show HN: Firenook – Firebase emulators in Rust: 40× faster writes, 10× less RAM

    Comments

  • Hacker News: Show HNLibraries, Frameworks, etc.read at source

    Show HN: Cwist — Tiny, Easy, and Structured Web Framework for C

    Comments

  • Smashing MagazineThe Giants20 min read

    Making Immersive LLM Chat Experiences More Accessible

    As LLM chat patterns become more widespread, making them accessible is essential to ensuring everyone can access the information, tools, and opportunities they offer. Drawing on his work improving these interfaces, Eric Bailey shares practical ways to make chat-based experiences on the web more accessible and usable for people who rely on assistive technology.

  • W3C BlogBrowsers, engines, etc.6 min read

    W3C Newsletter - October 2026

    W3C President and Interim CEO Dominique Hazaël-Massieux shares timely and notable highlights and information selected from the busy and prolific work last month at W3C such as TPAC 2026, AI @ W3C, progress on Identity and Credentials, further improvements to W3C infrastructure for standardization and more.

  • Flavio CopesMore Front-end Bloggersread at source

    Conductor alternatives after the Meta acquisition

    Conductor alternatives compared: Orca, Paradev, Paseo, T3 Code, Emdash, boxes.dev, Grok Bot and the agent apps from Anthropic, OpenAI and Cursor, with prices and how to move your workspaces.

  • Flavio CopesMore Front-end Bloggersread at source

    The complete guide to the Chrome DevTools Protocol

    Learn to drive Chrome with the DevTools Protocol from Node.js with zero dependencies: pages, clicks, screenshots, PDFs, network, and replacing Puppeteer.

  • AbduzeedoMulti Author Blogsread at source

    Typography: Shuffle Variable by Local Type Co.

    Local Type Co. explores expressive typography with Shuffle Variable, blending bouncy curves and sharp geometry across twelve weights. Most contemporary sans serifs aim for cold mechanical neutrality, ...

  • Ahmad ShadeedMore Front-end Bloggersread at source

    Beyond the viewport: Introducing Site Seeing

  • HeydonWorksMore Front-end Bloggersread at source

    I am not a developer or an accessibility specialist. Hire me?

    About being a so-called unicorn and its value.

  • AbduzeedoMulti Author Blogsread at source

    Studio Dumbar’s Personal OS Branding for Wabi

    Studio Dumbar/DEPT builds the personal OS branding for Eugenia Kuyda’s Wabi app generator around glass orbits and a five-dot W mark. Launched by Replika founder Eugenia Kuyda, Wabi lets people generat...

  • AdactioTop Front-end Bloggersread at source

    Wednesday session

  • AbduzeedoMulti Author Blogsread at source

    Valmy: Condensed Typography by Almarena Creative

    Almarena Creative crafts Valmy, an expressive variable typography system featuring two distinct axes across four styles and nine weights. Almarena Creative built Valmy around a compact, condensed skel...

  • AbduzeedoMulti Author Blogsread at source

    Mosby’s Files: Archival Web Design by tubik studio

    In Mosby’s Files, tubik studio turns color-coded filing tabs and loose-leaf collages into an archival web design on American modernism. Built by tubik studio under Art Director Ernest Asanov, Mosby’s ...

  • AbduzeedoMulti Author Blogsread at source

    Koto Unveils Oxford Street Branding

    Koto gives London's Oxford Street its first new brand identity, built around the word for and the line Where London meets. London's most famous shopping street has never had a brand of its own, and Ko...

  • Jim Nielsen’s BlogMore Front-end Bloggersread at source

    “It Gives Great Demo”

    There’s that famous video of Steve Jobs explaining why they don’t didn’t make touchscreen MacBooks: We thought about [a touch screen MacBook] years ago. We’ve done tons of user testing on this and it turns out it doesn’t work! Touch surfaces don’t want to be vertical. It gives great demo. But after a short period of time, you start to fatigue. And after an extended period of time, your arm wants to fall off. It doesn’t work. It’s ergonomically terrible. Touch surfaces want to be horizontal […] that’s why we’ve perfected our multitouch trackpads over the years. I’m not going to weigh in on the new MacBooks. But what I find specifically intriguing in this video — and broadly relevant — is that phrase: “It gives great demo.” Damn, that is a great line for so much of technology. “It gives great demo.” Something that looks amazing when it’s presented to you, but in practical day-to-day use you discover, “Actually this is kinda terrible.” Demo is everything nowadays. Whatever can garner attention. Who cares if it works in practice, does it give great demo? Because demo time is sale time. The purpose of a demo is to get your attention. To make you think about the product and that it exists. But a great product often makes you forget it exists at all. It seems like a paradox: we’re attracted to what stands out, but we become enamored with what disappears. Of course, this doesn’t just apply to products. People can give great demo, too. You can make a whole career out of just giving great demo. Reply via: Email · Mastodon · Bluesky

  • Flavio CopesMore Front-end Bloggersread at source

    I want my coding agent to do what I ask

    Claude Code got a rule against recreating existing games, it misfired, and Anthropic narrowed it. I'd rather the tool did what I ask and left the legal side to me.

  • AbduzeedoMulti Author Blogsread at source

    How APFEL Reimagined CAM Gulbenkian Identity

    A Practice for Everyday Life built the CAM Gulbenkian identity around a bespoke logotype whose curved A echoes Kengo Kuma's canopy. The mark is three letters drawn as thin, confident strokes: C, A, M,...

  • CSS-TricksThe Giantsread at source

    Smashing AI Conference

    The AI 2027 Conference is a live online day for designers and engineers on where AI stands today, what to expect in 2027, and where teams are getting it right. Smashing AI Conference originally handwritten and published with love on CSS-Tricks . You should really get the newsletter as well.

  • DequeMulti Author Blogs7 min read

    How to choose the right VPAT approach for your organization (and whether you should use AI to complete your ACR!)

    In this post, I’m going to discuss why accuracy matters for digital accessibility in an era of evolving global standards and increased regulatory scrutiny. I’ll explain where and how VPATs and ACRs fit into your accessibility strategies, and what you need to know before making any decisions about AI use. The post How to choose the right VPAT approach for your organization (and whether you should use AI to complete your ACR!) appeared first on Deque .

  • AbduzeedoMulti Author Blogsread at source

    Inside N2 Albiino’s Tactile Graphic Design for Vuoden Huiput

    N2 Albiino’s graphic design for Vuoden Huiput 2025 breaks Grafia’s pyramid into Cinema 4D clay and metal paired with cobalt type. Every year since 1980, Finland’s graphic design association Grafia has...

  • HeyDesignerDeveloper/Designer Newsread at source

    AI prototyping inside your design system

    I let AI build. I don’t let AI decide, There’s no better name for design systems, State of a system.

  • Frontend Masters BlogMore Front-end Bloggers12 min read

    Data Access Testing With @testcontainers

    Testing data access code has always been awkward: unit tests want to be fast and isolated, and a real database is neither. With Docker and @testcontainers you can spin up a throwaway Postgres inside your Vitest suite, push your Drizzle schema into it, and verify that your real insert and query code round-trips correctly.

  • SitePointThe Giantsread at source

    Which MCM Has the Best Revshare? A Developer’s Guide to Evaluating Ad Partners

    null Continue reading Which MCM Has the Best Revshare? A Developer’s Guide to Evaluating Ad Partners on SitePoint .

  • CSS WizardryTop Front-end Bloggersread at source

    Web-Perf Wednesday 016 – Lighthouse 13.6 Can Lift Scores Without a Faster Site

    Lighthouse 13.6 changes simulated FCP and LCP, so PageSpeed Insights scores can improve even when the page itself has not changed.

  • SyntaxPodcastsAudioListen

    1053: What’s in Our Home Lab

    Scott and CJ tour their homelabs, from a fully 3D printed server rack to a custom OPNsense firewall load balancing two ISPs. They dig into Proxmox, Tailscale, Caddy, Synology vs. DIY ZFS storage, Home Assistant, Jellyfin, Immich, Kiwix, and coding over the network with T3 Code…

  • AdactioTop Front-end Bloggersread at source

    честитке, Serbia Parabéns, Brazil Congratulations, USA

  • Net NinjaYouTube ChannelsVideoWatch on YouTube

    GitHub Copilot App Tutorial #8 - Using Plan Mode

  • Flavio CopesMore Front-end Bloggersread at source

    Cloudflare Zero Wire: what it is and how to use it

    Zero Wire is Cloudflare's public vulnerability feed on Radar. What a briefing gives you, the agent prompt inside it, and what it changes for a small server.

  • Flavio CopesMore Front-end Bloggersread at source

    terminal-mac: give your computer-use agent its own Mac

    terminal-mac runs a macOS guest inside your terminal, so an agent drives that VM instead of your desktop. Install, setup, MCP tools and isolation limits.

  • Flavio CopesMore Front-end Bloggersread at source

    The complete guide to Cursor

    Learn Cursor from your first project to daily work: Agents Window, planning, visual edits, Debug Mode, models, project rules, skills, subagents, MCP, code reviews, Bugbot, Cloud Agents and the CLI.

  • Flavio CopesMore Front-end Bloggersread at source

    How to run SEO checks from the terminal

    Run seobot from the terminal to check a site, then hand the report to Cursor or Codex with the pages and the edits ready.

  • SitePointThe Giantsread at source

    Top 6 AI Image Generators in 2026: Features, Strengths, and Limits

    null Continue reading Top 6 AI Image Generators in 2026: Features, Strengths, and Limits on SitePoint .

  • SitePointThe Giantsread at source

    How to Get a YouTube API Key and Use the Data API (2026)

    null Continue reading How to Get a YouTube API Key and Use the Data API (2026) on SitePoint .

  • SitePointThe Giantsread at source

    How to Use CSS Attribute Selectors to Build More Flexible User Interfaces

    null Continue reading How to Use CSS Attribute Selectors to Build More Flexible User Interfaces on SitePoint .

  • AbduzeedoMulti Author Blogsread at source

    Typography: Rosco Jr by TypeMates

    Rosco Jr by TypeMates is a typography project. Rosco Jr is a bouncy, brassy and poco-loco geo-grotesque. View the full typography gallery. Rosco Jr by TypeMates starts from a specific historical detou...

  • Chris HawkesYouTube ChannelsVideoWatch on YouTube

    I Tracked 125,000 Tech Jobs. Nearly 25% Are Ghost Jobs

  • Frontend FocusMulti Author Blogsread at source

    Safari will 'dark mode' your site for you

    🚀 Frontend Focus #​765 — November 4, 2026 | Read on the web Safari Introduces Adaptive Dark Mode — A new (opt-in) feature added to the Safari 27.3 beta that automatically adapts light sites to dark ones. It's here because although around 40% of pages are loaded by users using dark mode, only 10% of page loads directly support it. WebKit Agents Didn’t Clear Your Plate. They Dumped Reviews on It — Your agents write PRs in minutes, then eat your afternoon in review. When did ‘saving time’ start to mean babysitting agents’ work? Meticulous verifies every UI change, with no developer effort. Devs at Dropbox & ElevenLabs have their afternoons back. You can too. Meticulous sponsor Modern CSS Might Make Your Front-End More Complex — Swapping JavaScript for container queries and :has() can cut your code down but introduce bugs elsewhere in your layout. Gabriel shares four examples, including why container-type can collapse flex items to zero width. Gabriel Shoyombo 📊 Design Systems Should Be Fast by Default — Den benchmarks dropdowns and checkbox lists across ten popular design systems, diagnoses the slowdowns, and shares tests to catch regressions. Den Odell ⚡️ IN BRIEF 🤚 The CSSWG has resolved that form controls get cursor: pointer by default under appearance: base . Cory LaViska explains the data and the objections. 🌐 Chrome 158 is in beta ( stable due November 17 ) with the install > element, media pseudo-classes like :playing and :paused , ::highlight(*) , and XSLT is on its way out . 🆕 Rachel Andrew shares an update on changes to the web platform in October, including scroll-driven animations gaining support across all major engines. 🧰 Chrome DevTools has added a visual position-area editor in Elements, Web Install manifest diagnostics, and MCP server improvements. 🤖 Google will support a shared AI training control in robots.txt , based on IETF AIPREF work, letting sites set a preference once for multiple AI providers. 📙 Articles, Opinions & Tutorials Native Masonry Layouts with CSS Grid Lanes — A practical guide to native masonry layouts with CSS Grid Lanes, covering placement, fit-tolerance, horizontal layouts, subgrid and source-order accessibility. It's supported in only Safari right now, but other engines are working on it. Saleh Mubashar Making Features Generic in CSS — Rachel takes a look at the new flow-start and flow-end alignment keywords, and touches upon why the CSSWG often renames things. Rachel Andrew Embeddable Forms With Bookings, Live Pricing, and Payments Built In — Build it visually, paste two lines into any site. Unlimited submissions on every plan with spam protection. From €6/mo. CraftForms sponsor Quirks and Vintage Uses of CSS Table Display — Looks back at display: table and its related values, sharing what each does and the pre-flexbox tricks they enabled — while of course noting that you probably shouldn't reach for them today. A neat history lesson. Declan Chidlow 🧡 If You Love a Website, Back It Up — Following one of their favorite websites disappearing, a web-archiving practitioner explains how to go about preserving sites for yourself. A practical tour of browser-based capture techniques, automated crawling, and embedding the results. Misty De Meo Spreading Liquid with Three.js — A technical walkthrough of a neat liquid-spreading effect (built for a cosmetics campaign). It shows off using a height map for thickness, a velocity map for movement, and fragment shaders to render the result. There's a satisfying demo to play with, too. MISAKI NAKANO How a Split Webfont Slowed Down Text Layout — A font splitter put i and j in a different file from the rest of the alphabet, forcing extra text-shaping work within words (causing INP to suffer). Here's why, plus a script to check your own font CSS. Ivan Kristianto Why Is the Analytics Tab the Slowest Page in Your App? — Usually it's one query scanning months of rows. TimescaleDB extends Postgres to make it fast. Get $1000 credit . Tiger Data (creators of TimescaleDB) sponsor Multi-Column Different-Speed Scrolling — There are some fun scrolling experiments here thanks to scroll-driven animations. Chris Coyier Useful @custom-media Presets Daniel Schwarz ⚠️ Third-Party Scripts Last week we shared a PSA about forgotten script tags and how what they load can be hijacked. Days later, a similar attack prominently appeared in the wild. On October 29, a performance monitoring script on Polymarket was swapped for a wallet drainer . The URL of the script didn't change, just the payload, so the CSP let it through, but Scott Helme's write-up explains what would have stopped it. Whatever you load from third parties, it's worth auditing for security, privacy, and performance reasons. Some steps worth taking: Pin scripts with Subresource Integrity where the vendor's file is static, and use the new Integrity-Policy-Report-Only header to find any you've missed. Self-host third-party resources where you can. Request Metrics explains how it protects its own agent and why it's safe to self-host. Load third-party JavaScript efficiently , or use Partytown to move it off the main thread entirely. Audit what your page is loading with Request Map and Third Party Web . Lastly, if you provide third-party scripts to users, check out Jack Ellis's writeup of how Fathom Analytics keeps their analytics script secure for some tips. 🧰 Tools, Code & Resources sidebearing-trim: Align Text by 'Visible Ink', Not by Glyph Boxes — You can try it out interactively on the page and there's a write-up of why you should care here . One of those things that designers, in particular, are likely to notice! 😅 GitHub repo . Pekka Lammi 🎨 ColorSym: Symbols to Identify Colors 'When Color Alone Isn't Enough' — A way to use symbols to supplement colors, aiding with accessibility. The symbols are 'intelligent' where, for example, the orange symbol is a combo of those for red and yellow. Available as SVGs or a custom font. Chris Eastridge & Luis Francisco Astrotypes: Curated Font Pairings for Astro — Search and preview font pairings sourced from Google Fonts, Bunny CDN, and Fontshare live on the page. Each pair has a copy command for various tools (npm, Yarn, Bun, etc). Michael Andreuzza File Viewer: A Browser-Native Office, PDF, CAD, and Archive Viewer for Internal Web Apps — Provides read-only views for Office, PDF/OFD, CAD, archives, email and more, with integrations for React, Vue, and Svelte. There's also a live demo to try. Flyfish Dev 📰 Classifieds Know React? Then you and your coding agent can ship iOS and Android apps. Expo runs the builds and CI/CD and gets you into the app stores. 🧪 In-browser testing inside your dev server. TWD adds a test sidebar next to your app, and your AI agent runs it too. Free and MIT . 🔤 ...and finally Introducing Geist Serif — Vercel's Geist family gains a high-contrast display serif for headlines, built on the same metrics as Geist Sans so the two mix cleanly. Geist Sans , Geist Mono and Geist Pixel are on Google Fonts already; Serif isn't yet, but will be in due course. Vercel

  • Twilio BlogMulti Author Blogsread at source

    Build vs. buy: How to decide for your orchestration layer

    One CIO built his own orchestration layer. Another consolidated onto a platform. A third moved off homegrown. And...all three were right.

  • Twilio BlogMulti Author Blogsread at source

    Contact center analytics: 6 metrics for AI and human agents

    Learn which metrics matter when AI and human agents share the queue, from abandonment to handle time, and how to measure each with Twilio.

  • Frontend Masters BlogMore Front-end Bloggers5 min read

    Multi-Column Different-Speed Scrolling

    Scroll-Driven Animations can step in and make scrolling feel different even if you aren't actually interfering with the actual page scroll.

  • AdactioTop Front-end Bloggersread at source

    Tuesday session

  • HeyDesignerDeveloper/Designer Newsread at source

    I don't use Figma anymore, and it cost me my job

    Struggle together, Building beautiful websites with Claude, Design as a garden, Building an AI-ready design system library, and more.

See everything from the last 30 days →