Frontend Feeds

Today

Front-end, in one read.

The latest from the sources worth following, newest first.

  • David BushellMore Front-end Bloggers4 min read

    I was wrong about dark mode

    Apple invented dark mode again! They’re calling the new feature Adaptive Dark Mode™. I’m learning that other browsers already had a similar feature. I assumed people relied on add-ons like Dark Reader (and millions do). Regardless, pushing what is effectively an accessibility option to the forefront […]

  • DEV CommunityThe Giantsread at source

    Your Mac has been keeping a file on your family

    Your Mac has been keeping a file on your family Since macOS 13 shipped in 2022, every Mac has run two daemons whose only job is to build a graph about you. Who you are, who you know, how those people relate to you and to each other, how you communicate, where you go, what you do and when. The daemons are called knowledgeconstructiond and intelligenceplatformd, and the closest thing Apple has ever documented about them is a two-sentence man page. A security duo going by The Bishop and The Knight took the system apart in October and published the anatomy. The graph lives in ~/Library/IntelligencePlatform, fifty-one plaintext SQLite databases protected by macOS's Full Disk Access permission. The core one, graph.db, is a triple store: 181 entity classes, 278 predicates, and a confidence score on every row. What goes into it is basically everything the OS can see. Contacts. Photos, with faces. Calendar titles and attendees. Family Sharing, including the age of every member. The emergency contact in your Medical ID. Events and people Siri Suggestions digs out of your mail and messages. Apps donated through App Intents. Beside the graph sit tables for who appears with whom in your photos, a communication log without content, location and movement, and a stream of device signals: screen locked, Wi-Fi, Bluetooth, charging, ambient light. Then there is the part the HN headline picked up: a pair of XGBoost classifiers, shipped as CoreML models, that decide who counts as family. They read 144 features and output a probability for seventeen relationship columns per person, recomputed every day. Twenty of the features are identity: same last name, shared home address, an iCloud Family flag, age difference. Forty are communication patterns. Eighty-four come from photographs. One shipped feature name is worth reading twice: photosPersonPosteriorProbabilityGivenSaturdayNight. A real input to a real classifier, and its job is deciding whether someone is your sister. The scores look mundane until you look at what produced them. A mother scored 0.960, the ceiling of that column. Nobody typed it. The post counts nine independent signals that land on the same person: the partner column, a composite score, a household entity, the Family Sharing token, an iCloud flag, top twelve-month contact, a Photos face cluster, a Contacts record, a reachable handle. The model joined them and concluded "partner" for someone the owner had never labeled. The joins are where it stops being about you. From one store, the authors worked out that there is a child in the household and roughly how old, which daycare the child attends along with both phone numbers, where the family will be and between which hours on a given Thursday, and which password manager is installed. A relationship is intelligence one level above the rows it was inferred from. Deletion does not fully retract any of it. The live graph drops a contact, but a second table, expired_stable_graph, keeps the retracted rows with their confidence and sources, about forty-eight hours by the authors' measurement, longer on their own machines. The scorecard still scored two people a day after the graph had dropped them, people it knew only from a calendar invitation. The authors also run a thought experiment that applies to any personalized system: what happens when this file ends up in the wrong hands, paired with a local model that has had its guardrails stripped. They call the graph a privacy single point of failure, and they play the scenario out in a second post. To be fair to Apple: everything happens on device. The databases sit behind the Full Disk Access permission, so other apps cannot read them without the user approving it. Apple's researchers published a paper on the graph techniques back in 2023. And the same store exists on iOS, where a forensics tool called iLEAPP has been reading it since September. The fair criticism is narrower and harder to wave off. The depth of the inference is undocumented. The kinship classifier is mentioned nowhere. And the graph does not just hold your data; it holds data about everyone who has ever emailed you, appeared in your photos, or been invited to a calendar event, and none of those people were asked. The authors open-sourced a dashboard called iKnow that reads your own graph locally, if you want to see the file your Mac keeps on you. I made a 56-second film about how the graph and the family classifier work: And if you want to cut a clip like this into a GIF, try the tool I used: https://gif-master.com/en/tools/video-to-gif

  • DEV CommunityThe Giantsread at source

    Agent instructions: in the repo or in the tool?

    There are two places to put the standing rules you want a coding agent to follow: in a file in the repo, or built into the tool that runs the agent. I've ended up with both, and they trade off differently. In the repo, the rules are versioned. They show up in pull requests, the whole team sees them, and they travel with a clone. The cost is that you write and maintain them per project, and they're only as good as the last person who edited them. In the tool, they work in every project and for every agent with no setup. The cost is that they're invisible: nobody reviews a diff of them, and they can clash with how a particular repo does things. Styx does the second kind. It builds in guidance from a few public repos: Ponytail for coding, Impeccable for interfaces, design-critique for reviewing a design, and architecture-designer for system design. Only the core rules are included, each applies only to that kind of work, and your project's own design system and rules come first. That last part is the rule I'd defend: when the two disagree, the repo wins, because it knows the project and the tool doesn't. Do you agree, or do you let the tool override the repo?

  • DEV CommunityThe Giantsread at source

    Pydio Cells access needs a PAT, workspace, and public-share inventory

    Pydio Cells access needs a PAT, workspace, and public-share inventory Pydio Cells combines identity, file storage, workspaces, OAuth clients, and public sharing. A person who reaches the login page may be blocked before seeing any files, while a leaked personal access token or public link may bypass the browser flow entirely. An exposure assessment that only records the login page leaves the important paths out. On 2026-11-08, ZoomEye count-only observations returned 0 matches for app="Pydio Cells" , 1,470 for title="Pydio Cells" , and 2,397 for http.body="Pydio Cells" . The query scope was sub_type=all , page 1, and page size 1. The title and body counts are close enough to be useful leads, but neither proves that a host is configured with public shares or weak tokens. Personal access tokens are delegated authority Pydio documents personal access tokens as an alternative to the standard OAuth flow. A token can replace a bearer access token when calling the REST API. It can also be restricted to a specific node with a scope in the form node:NODE_UUID:PERMISSION , where the permission can include read or write. That scope is useful only when it is applied to the right node and the underlying user still has access to that node. The token should not be treated as an independent grant of filesystem authority. If the user is removed from a workspace or loses a role, the token should lose the effective access as well. Review both the token's scope and the roles that determine the user's workspace ACLs. Workspaces and shares are different paths Workspaces define which data a user can see through the application. Public links and shares can expose selected data to people who do not have a Cells account. The sharing model may include link permissions and visibility settings. Each share is a capability that should have an owner, a purpose, an expiration where supported, and a revocation path. Inventory links that are reachable without authentication, including links that are unlisted rather than indexed. A link that does not appear in search results is still reachable by anyone who receives it. Check whether the link grants read only, write, or upload permission and whether the underlying workspace changed after the link was created. A practical audit Start from the public host and identify the OAuth, API, and share routes. Confirm that anonymous users can reach only the intended login or share surfaces. Test an API token in a separate test account and verify that it cannot read a workspace the account is not assigned to. Review user roles, group membership, workspace ACLs, and administrator roles. Then list active personal access tokens by owner and creation date. Revoke tokens that have no owner or no documented consumer. Rotate secrets that were stored in CI logs, browser storage, or public repositories. For shares, record the creator, target node, permission, and expiration. Test a link after removing the creator's access. Decide whether the link should continue as an independent capability or fail with the user. That policy should be explicit. Search: ZoomEye title matches for Pydio Cells Pydio's value comes from flexible delegation. The security work is to inventory every delegation separately: the OAuth client, the personal token, the workspace ACL, and the public share. References Pydio, Personal Access Tokens Pydio, Role based security rules Pydio, Sharing Features

  • DEV CommunityThe Giantsread at source

    Virginia Layoffs November 2026: WARN Numbers Explained

    Virginia Layoffs November 2026: WARN Numbers Explained Virginia holds fifth place in the current national layoff picture. In the 90-day window tracked by Layoff Atlas, Virginia accounts for 2,546 reported workers across its WARN filings, behind California (21,514), Washington (17,411), Illinois (3,548) and Texas (2,750) — about 4% of the 65,089 workers reported nationwide. California and Washington together hold roughly 60% of that total. This is a November refresh of Virginia's numbers, last spotlighted on October 24. Here is where the state stands now, what changed, and how to read the numbers. The November picture Virginia's full imported archive now holds 2,195 non-cancelled WARN notices reporting 255,368 workers affected. In the last 365 days, the archive contains 74 eligible official filings reporting 8,917 workers, with no worker counts unavailable. The newest official notice date is October 30, 2026. Sixteen notices have future effective dates, meaning layoffs that have been announced but have not yet taken effect. So far in 2026, Virginia has 67 notices reporting 8,394 workers. That works out to about 125 workers per filing on average. The state's 2026 total is already close to its full-year 2024 total of 63 notices and 8,706 workers, and it sits below 2025, when Virginia recorded 112 notices and 12,067 workers. With almost two months of the year left, 2026 is on course to land between those two years. The mix of sources behind Virginia's numbers is nearly even: 1,138 direct government records and 1,057 attributed secondary records appear in the full archive. Recent official event types are layoffs and closures. What changed since October Compared with the October 24 snapshot, Virginia's 2026 figures have grown. Notices for the year rose from 61 to 67, and reported workers rose from 7,735 to 8,394 — an increase of 659 workers in about two weeks. The archive total moved from 2,189 notices and 254,709 workers to 2,195 and 255,368. Official filings in the last 365 days rose from 71 to 74, and their worker total from 8,388 to 8,917. Future effective dates increased from 13 to 16, and the newest official notice date moved from October 7 to October 30. Virginia's position in the national ranking has also firmed up. On November 3, the state entered the top five with 2,373 workers in the 90-day window. Five days later that figure is 2,546, a gain of 173 workers, and fifth place has firmed up. Virginia's 90-day total is small next to California's 21,514 and Washington's 17,411, but it leads every state outside the top four. The year-by-year picture Virginia's recent history shows how uneven layoff years can be. The pandemic year of 2020 dominates the archive: 453 notices and 58,089 workers, nearly five times the worker total of any year since. The years after that fell back sharply — 74 notices and 7,852 workers in 2021, then 60 and 5,220 in 2022. 2023 brought 112 notices and 9,742 workers, 2024 brought 63 and 8,706, and 2025 brought 112 and 12,067. Further back, totals ran higher: 132 notices and 17,968 workers in 2019, 188 and 19,216 in 2018, 121 and 12,261 in 2017, and 118 and 15,058 in 2016. By that longer view, 2026 is a quiet year for Virginia — below every year from 2012 through 2019, and below 2023 and 2025 as well. The biggest recent filings Two Virginia filings stand out in the recent record. The largest is The Washington Post's 118-worker filing for its Springfield, Virginia operation, with notice given on October 7, 2026 and an effective date of December 31, 2026. It is the single biggest Virginia filing in the current window. The newest is Haynes Furniture's 83-worker filing, with notice on October 30, 2026 and an effective date of November 2, 2026 — a notice gap of just three days, far shorter than the 60 days the WARN Act generally requires. That short gap is the kind of detail worth watching: the law allows shorter notice only in narrow circumstances, such as unforeseeable business circumstances or a faltering company seeking capital. Both filings sit inside a national calendar whose heaviest week ahead is November 15, with 7,887 workers scheduled, followed by November 22 with 6,614. The newest week, December 13, carries 5,307. Virginia's 16 future effective dates are part of that pipeline, including the Washington Post filing effective on the last day of the year. How to read Virginia's numbers Three caveats matter. First, these are reported plans, not confirmed job losses. A WARN notice records what an employer told the state it intends to do; some planned layoffs shrink, some are averted, and some workers are rehired. Second, Virginia's archive blends 1,138 direct government records with 1,057 secondary records, so coverage depends on what sources report and what the registry has imported. A quiet feed is not proof of zero layoffs. Third, the 90-day window shows the current pace, while the full archive shows the state's longer history. What the numbers do show is a state near the top of the national ranking on a moderate 2026 pace by its own history, with small recent filings and a modest pipeline of 16 future effective dates. The story to watch is whether the heavy November and December weeks bring new Virginia filings with them. Data source: Layoff Atlas

  • DEV CommunityThe Giantsread at source

    'Dubious Ownership': The 2022 Git CVE Behind the Error Your Agent's Container Hits

    Book: AI Agents Pocket Guide The series: Pocket Guides for Developers — 8 short books on agents, RAG, prompts, observability, events, databases and system design — the whole series My project: Hermes IDE | GitHub — an IDE for developers who ship with Claude Code and other AI coding tools Me: xgabriel.com | GitHub Claude Code rejects --dangerously-skip-permissions when it's launched as root, per its dev container docs , so the container you build for an agent that runs without permission prompts uses a non-root user, say node at uid 1000. Your host account is uid 1001, and you start the container with plain docker run , the repo bind-mounted from the host. The agent's first git status comes back with this: fatal: detected dubious ownership in repository at '/work' To add an exception for this directory, call: git config --global --add safe.directory /work That is the message template in Git's setup.c , with /work as the path. The fix it suggests is one line. The tempting move is to go one step further, paste safe.directory '*' into a Dockerfile or your own ~/.gitconfig , and never see the error again. That also switches off the protection. The check is there because of a real 2022 vulnerability, and the situation it guards against is the one you build when you give an agent its own user or container. Reproduce it On a Linux host, file ownership is a number. A bind mount shows the container the same number the host has. Your repo is owned by your uid, 1001 in the example above, and git inside the container checks it against its own. The quickest way to see a mismatch needs no custom user at all: Docker runs containers as root (uid 0) by default , and 0 isn't 1001, so git stops. The alpine/git image runs git with whatever arguments you pass: mkdir -p ~/code/demo && cd ~/code/demo git init -q docker run --rm -v " $PWD " :/git -w /git \ alpine/git status I haven't run this exact command myself. What git checks is in its source: is_path_owned_by_current_uid calls lstat on the path and compares the file's owner with geteuid() . When git runs as root it also accepts the uid in SUDO_UID , which sudo sets and docker run does not. Docker Desktop handles bind mounts its own way , so on macOS or Windows you may not see the error at all. The non-root user from the opening fails the same way: node at 1000 inside the container, files owned by 1001 on the host, same message. C:\.git and the 2022 fix The check comes from CVE-2022-24765 . When you run git in a folder, it walks up the parent directories looking for a .git . On a shared machine, someone else could create one above you. The Git 2.30.3 release notes give the examples: a repository in C:\.git , on a mounted network drive, or in a scratch space. That matters because some config values run programs. GitHub's announcement names core.fsmonitor , which makes git execute a command. Plant a C:\.git\config with that value, and every user who runs git in a folder under C:\ that isn't its own repo runs your command. They don't even have to type git. The release notes point out that a Git-aware shell prompt running git status , or opening the folder in VS Code or Atom, was enough. CVE-2022-24765: a .git planted in a parent folder could run its owner's commands when you ran git below it. The timeline, from Git's own records: March 2, 2022: the owner check for the top-level directory is written, as commit 8959555 , authored by Johannes Schindelin (the commit message of the later fix gives the date). April 12, 2022: Git 2.35.2 ships with the fix, along with backports to 2.30.3, 2.31.2, 2.32.1, 2.33.2 and 2.34.2. Git now refuses a repository owned by someone else unless it's listed in safe.directory . The error back then read unsafe repository ('...' is owned by someone else) . July 12, 2022: Git 2.37.1 and seven maintenance releases fix CVE-2022-29187. The April fix was incomplete, and the 2.30.5 notes describe the gap: it checked the worktree but not the .git directory or a .git file pointing to one. The patch extends the check to all three, gives a privilege-escalation example using a shared /tmp , and replaces the old wording with "detected dubious ownership in repository". Vendor docs followed. Atlassian's article lists both wordings. GitHub's actions/checkout gained a set-safe-directory input, on by default, which runs git config --global --add safe.directory for the one workspace path. What safe.directory '*' turns off The git-config docs put it plainly: "To completely opt-out of this security check, set safe.directory to the string * ." Every repository on the machine is then treated as safe, whoever owns it. Two details in the same docs matter for agents. safe.directory is only read from protected configuration, meaning system, global and command scope, so a repo can't vouch for itself. And a value ending in /* allows every repository under that directory, which is a middle ground but still broader than one path. In a throwaway container that only ever mounts one repo, * costs you little. There is no second user inside to plant anything. The damage comes when it leaks out of there: into your host ~/.gitconfig because the error showed up once, into a base image the whole team builds on, or onto a shared CI runner. A second OS user for the agent, a shared box you reach over SSH, a container user writing into a folder your host user also works in: each is the multi-user machine the CVE was written for. The less-trusted user is the agent, and Anthropic's own docs warn that, run with --dangerously-skip-permissions , a dev container doesn't stop a malicious project from exfiltrating anything accessible inside it. If the agent's user can create a .git with core.fsmonitor in a directory above where you later run git, the ownership check is what keeps that command from running as you. With * in your global config, nothing does. Three fixes that keep the check on Match the uid. If git runs as the user who owns the files, there's nothing to fix. With plain Docker, pass your own ids. --user takes uid:gid , per the Docker run reference : docker run --rm -v " $PWD " :/git -w /git \ --user " $( id -u ) : $( id -g ) " \ alpine/git status Dev containers do this for you on Linux. The spec's updateRemoteUserUID rewrites the container user's UID/GID "to match the local user's UID/GID to avoid permission problems with bind mounts," when a remoteUser or containerUser is set, and it defaults to true . Matching the uid keeps the check on, but git can no longer tell the agent's files from yours, so on that mount the container is the boundary. The check never covered your repo's own .git anyway: you own it, and an agent with write access to the bind mount can add a core.fsmonitor value or a hook there. Look at any .git/config or .git/hooks change the agent made before you run git on the host. List one path, not all of them. When the uids can't match, name the mount point. The command scope counts as protected, so -c works for a single run: docker run --rm -v " $PWD " :/git -w /git \ alpine/git -c safe.directory = /git status An agent runs git many times, so for a whole session pass it as environment variables. GIT_CONFIG_COUNT and the matching GIT_CONFIG_KEY_ and GIT_CONFIG_VALUE_ are command scope too, per the git-config docs : docker run --rm -it -v " $PWD " :/work -w /work \ -e GIT_CONFIG_COUNT = 1 \ -e GIT_CONFIG_KEY_0 = safe.directory \ -e GIT_CONFIG_VALUE_0 = /work \ your-agent-image Bake the path into the image. If every container mounts the repo at the same place, one line in the Dockerfile covers it, and it lives in the image's system config, so your host config never sees it: RUN git config --system --add safe.directory /work If someone already put safe.directory=* in the system config, the git-config docs say to start your own list with an empty value. That resets it, and the paths you add after it are the only ones trusted. Worktrees make the mount trickier Tools that run agents in parallel, Hermes included, often give each task its own git worktree. A linked worktree has a .git file , not a directory, and the git-worktree docs say it points back to the main repository's .git/worktrees/ folder. By default that pointer is an absolute host path. Mount only the worktree into a container and the path it names doesn't exist in there. Two ways around it. Mount the main repository too, at the same path it has on the host. Or link worktrees with relative paths: Git 2.48 added this, set with worktree.useRelativePaths or --relative-paths . The docs warn it enables the extensions.relativeWorktrees extension, which older Git versions can't read. Remember the July 2022 fix as well: the ownership check now covers the worktree, the .git directory and the .git file, so all three have to belong to the container's user, or the worktree path goes in safe.directory . I build Hermes IDE, so weigh this part with that in mind. Hermes starts each task on its own hermes/ branch in its own worktree, and every agent runs in a real terminal on your machine, as you. The agent's git and your git are the same user there, so the check never fires. The boundary comes in when you add one: an SSH session to a shared box (Hermes supports those), or a container you start from a plain shell session in the task's worktree. That's when the three fixes above apply. The Review Desk's Worktrees tab: one Hermes worktree each for orders-api, web-app and orders-types under ~/code, with each worktree's hermes/ branch, task, age and disk size, and the free disk space. Check what you already trust Before you add anything, see where a * might already be hiding. git config --show-origin --get-all safe.directory prints every entry with the file it came from. Entries in a repo's local config show up in that list too, but git ignores them for this check, per the git-config docs . A * in your global or system file is the one to replace with a path. If this was useful Giving an agent its own user, container or worktree is a guardrail, and every guardrail has an edge like this one where it rubs against older security assumptions. The AI Agents Pocket Guide covers the patterns behind autonomous agents, including how much autonomy to grant and where to put the guardrails. It's one of 8 short books in the Pocket Guides for Developers series , on agents, RAG, prompts, observability, events, databases and system design. If you run several agents on one repo, Hermes IDE is free, source-available (BSL 1.1), on macOS, Windows and Linux, and on GitHub . It's not affiliated with Nous Research, Anthropic, OpenAI or any agent vendor.

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

    Show HN: Micron – The Oberon with the Power of C

    Comments

  • Hacker News Front PageThe Giantsread at source

    Person of Interest

  • Flavio CopesMore Front-end Bloggersread at source

    How to write an Agent Skill

    Write an Agent Skill that loads at the right time and does one job well: SKILL.md and the spec, descriptions that trigger, scripts, authority, and real activation tests with claude -p.

  • Hacker News Front PageThe Giantsread at source

    Petered (what happens after the Peter Principle)

  • Hacker News Front PageThe Giantsread at source

    JIT bitmap text rendering for microcontrollers

  • Hacker News Front PageThe Giantsread at source

    Llama-modchip: 284B DeepSeek on 64GB RAM, no GPU

  • Hacker News Front PageThe Giantsread at source

    Agent memory needs its OpenTelemetry moment

  • AdactioTop Front-end Bloggersread at source

    Stranded - Richard’s Blog

    The great span : We are to Apollo 13 as Apollo 13 is to Shackleton. adactio.com/links/22830

  • Flavio CopesMore Front-end Bloggersread at source

    Open your Mac's dev server on your phone over Tailscale

    Test a local site on a real phone through the tailnet with HTTPS, no ngrok and no public URL. Builds on the Tailscale tutorial for your Mac and a server.

  • SitePointThe Giantsread at source

    Prompt Management in TypeScript: LangSmith vs Git vs 3 Open-Source Registries

    null Continue reading Prompt Management in TypeScript: LangSmith vs Git vs 3 Open-Source Registries on SitePoint .

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

    Show HN: Maple – Sub-2-BPW Moe Pruning to Run Gemma 4 26B at 45 TPS on a 6GB GPU

    Comments

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

    Show HN: Reges Town – a 3D city run by AI citizens, in the browser

    Comments

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

    Show HN: LLM weight editing tool made by a 15-year-old

    Comments

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

    Show HN: I declared war on every country, one at a time. 77 of 133 survived

    Comments

  • AbduzeedoMulti Author Blogsread at source

    The New York Times 175th Anniversary Branding & Campaign

    For its 175th anniversary, The New York Times and XYZ Type pair a custom 175 blackletter mark with archival collage branding across print. Typed straight out in Ed Benguiat’s NYT Fraktur, the numerals...

  • AbduzeedoMulti Author Blogsread at source

    How Studio Yukiko Reimagined Book Design for Everything At Once

    Studio Yukiko turned the Bundeskunsthalle catalogue Everything At Once into a tomb for postmodernism, built from stone and loud colour. The cover says it plainly. A grey stone slab, carved with the wo...

  • CodePenCompany/Startup Blogs1 min read

    447: WebMCP Rules (and We Already Have It)

    Chris & Shaw are chatting this week about the newfangled web technology, WebMCP. It involves new browser APIs like document.modelContext, meaning it needs to be a web standard, and that process is chugging along, but certainly not a done deal. That said, CodePen already has it conditionally implemented for browsers that support it, so you […]

  • AbduzeedoMulti Author Blogsread at source

    Semaine Design de Montréal 2026: Graphic Design by Principal

    Principal and Index-Design pair James with Office Sans in the graphic design for Semaine Design de Montréal 2026 across print and badges. Framed inside a matte-black lanyard holder on raw-seamed grey ...

  • AbduzeedoMulti Author Blogsread at source

    Vocation Brewery: Inside Turner Duckworth's New Identity

    Turner Duckworth rebuilt the Vocation Brewery identity around one watchful eye, bold colour and paired beer names like Life and Death. The work starts from a return to roots. Turner Duckworth stripped...

  • AbduzeedoMulti Author Blogsread at source

    Editorial Design: Nea Magazine Issue N.3 by Gabriele Colia

    Studio Gabriele Colia pairs green-ink diagrams and Fedrigoni paper in the editorial design of Nea Magazine Issue N.3 on non-places. Down the exact center of pages 12 and 13 in Nea Magazine – Issue N.3...

  • HTML All The ThingsPodcastsAudioListen

    Are Software Engineers Going to Get Paid Less?

    Is software development becoming a code factory - and what could that mean for developer salaries? Two Toronto job postings spark a conversation about pay, AI, outsourcing, and the future of tech careers. In this edition of the Web News, Matt and Mike discuss the salary figures…

  • Flavio CopesMore Front-end Bloggersread at source

    Build a private AI feature with a local model, Ollama and Node.js

    Build a Node.js feature on a local Ollama model: what's in the model file, schema output, validation, timeouts, a fallback, evals, tests and real speed.

  • SitePointThe Giantsread at source

    Google Workspace vs. Microsoft 365 vs. Proton Workspace: Which Is Best for Developers and Freelancers?

    Google Workspace, Microsoft 365 and Proton Workspace compared on pricing, encryption and the tools developers and freelancers actually use. Continue reading Google Workspace vs. Microsoft 365 vs. Proton Workspace: Which Is Best for Developers and Freelancers? on SitePoint .

  • Flavio CopesMore Front-end Bloggersread at source

    Migrating a Ghost blog to EmDash on Cloudflare

    Export Ghost, scaffold EmDash, keep every URL, move posts, tags and images with a script, publish them with their original dates, and shut the VPS down.

  • Flavio CopesMore Front-end Bloggersread at source

    Migrating a WordPress blog to EmDash: the checklist

    The built-in WordPress importer, the exporter plugin, what moves and what doesn't, how statuses and dates come across, and a checklist to run the migration from export to cutover.

  • Swizec TellerMore Front-end Bloggersread at source

    How do we auto-approve and merge 60% of PRs?

    I'm still drowning in code review. Getting to ~16% auto-approved and merged PRs helped but it's not enough. How can we do 60%?

  • AbduzeedoMulti Author Blogsread at source

    Bar Rêve: Belle Époque Visual Identity by Dutchscot

    London studio Dutchscot crafts a Belle Époque visual identity for Brooklyn cocktail bar Bar Rêve with wobbly script and a 222 monogram. Named after the French word for dream, Bar Rêve sits at 222 Smit...

  • AbduzeedoMulti Author Blogsread at source

    &Walsh Unveils BATCH Brand Identity

    &Walsh built the BATCH Brand Identity on a blocked matte wordmark, film grain and Pre is the new post, for film mattes in hours, not months. BATCH makes software that pulls mattes, the cutouts tha...

  • AbduzeedoMulti Author Blogsread at source

    NM Art & Design: Digital Platform UI/UX Design by ESH Gruppa

    ESH Gruppa pairs a stencil-cut monogram with calm cream-and-ochre UI/UX design for contemporary gallery platform NM Art & Design. NM Art & Design runs both a collectible contemporary gallery a...

  • Flavio CopesMore Front-end Bloggersread at source

    EmDash: Cloudflare's CMS for Astro, explained

    What EmDash is, how it's built, what the admin and the MCP server look like, where it runs and what it costs, and where it falls short of WordPress and Ghost.

  • CSS-TricksThe Giantsread at source

    RSS Club: CSS-Tricks Redesign Preview

    Hey you wonderful RSS subscribers! We just soft-pushed a site redesign and wanted to give ya'll the first heads-up. A full write-up is coming but here are the high-level details. RSS Club: CSS-Tricks Redesign Preview originally handwritten and published with love on CSS-Tricks . You should really get the newsletter as well.

  • Flavio CopesMore Front-end Bloggersread at source

    Tailscale vs Cloudflare Tunnel vs a cloud firewall

    I scanned one Droplet behind ufw, a cloud firewall, Tailscale and a Cloudflare Tunnel. What each one left open, what it costs, and how fast it was.

  • Dave RupertTop Front-end Bloggersread at source

    Pseudo-pseudo-classes for maximum interactive demos!

    Have you ever wanted to display all variants of a Button next to each other in your Storybook like your designer did in Figma? But then you come to a screeching halt when you realize :hover , :active , :focus don’t work without user-interaction? Blergh. Whatever can we do? I got nerd-sniped by this problem in the ShopTalk Discord when Nils said he was trying to build a simple state machine demo for his components. A handful of immediate options came to my head: Style states using .is-hover utility classes (à la SMACSS ) Create a system of [data-state="hover"] attributes and copy over styles Build some over-the-top Playwright-based screenshot contraption Each of those approaches has trade-offs for me. I don’t want to ship extra component styles or manage duplicate global styles. And if I’m building a Playwright contraption for a CSS demo… yeesh, I should probably back away from the keyboard. When Nils mentioned he was using web components, I realized I might have an ace up my sleeve for a simple’ish solution to this problem. See the Pen Pseudo-pseudo-states Demo! by Dave Rupert ( @davatron5000 ) on CodePen . There’s a handful of Advanced Web Component Tips & Tactics happening in this demo like adoptedStyleSheets , ElementInternals , and custom state sets but the approach is pretty lightweight. I scan the custom element’s styles, clone the interactive bits, rewrite styles like :hover state to :state(hover) and add the new stylesheet inside the component. What I like about this approach compared to the other ideas I had is: Styles owned by the component - No “magic” global styles or utilities. Appended styles also owned by the component - No global conflicts. Interactive states use regular HTML/CSS - Avoid managing interactive state in JavaScript when possible. Write once, ship once - I don’t write or ship duplicate :hover and .is-hover styles to customers. Low maintenance - Beyond the initial setup, it’s automatic and I’m resilient to component style updates. Want an end-to-end walkthrough of how it all works? Please, follow me… Adopting stylesheets in your web components In web components, we’d typically author our styles in a CSS tagged template literal: const MyButtonStyles = css` /* Change the host-element itself */ :host(:hover) { background: pink; scale: 1.1; } /* Update a child element based on the host-element interaction */ :host(:hover) button { background: pink; scale: 1.1; } /* Or put the interaction on the interactive child-element */ button:hover { background: pink; scale: 1.1; } ` Then we create a new “constructed stylesheet” and populate the stylesheet with the styles we wrote. That stylesheet then attaches to our component by adding it to the Shadow Root’s array of adoptedStyleSheets . /* Create a new constructed stylesheet */ const MyButtonStyleSheet = new CSSStyleSheet() MyButtonStyleSheet.replaceSync(MyButtonStyles) class MyButton extends HTMLElement { constructor() { /* Setup and create shadowroot */ super(); this.attachShadow({ mode: "open" }) /* Adopt the constructed stylesheet */ this.shadowRoot.adoptedStyleSheets = [MyButtonStyleSheet] /* ... etc */ } } The component will now render its styles without a tag or inline tag in the template. If we put two MyButton components on the page, they’ll share the same stylesheet in memory which is a pretty neat efficiency gain for style application. adoptedStyleSheets aren’t limited to web components, but they’re still pretty niche. But the web component ecosystem’s pattern of using adoptedStyleSheets for style application will come in handy later when we want to apply our new custom states. Attach internals to unlock custom states Before we jump to the grand finale, there’s one other unique-to-web-components feature we need to talk about first: ElementInternals . In a web component class you can call attachInternals() which allows you to dip into the element’s guts and mutate the innards of your spicy div . An example of this might be setting an ARIA role: class MyButton extends HTMLElement { constructor() { super(); this._internals = this.attachInternals() this._internals.role = "button" } } customElements.define('my-button', MyButton) The accessibility inspector will report a role of button for your custom element. Setting ARIA role is a weak example because both and Element.role = "button" both work pretty seamlessly. But ElementInternals brings other ✨superpowers✨ like adding form validation behaviors that you can’t do on a normal div . One newer capability of ElementInternals is that it allows you to create your own custom pseudo-classes and apply styles using :state() . class MyScrollingElement extends HTMLElement { constructor() { super(); this._internals = this.attachInternals() } connectedCallback() { this.addEventListener('scroll', this.handleScroll) this.addEventListener('scrollend', this.handleScrollEnd) } /* Use arrow functions to avoid `this` complications */ handleScroll = (_event) => { this._internals.states.add('scrolling') } handleScrollEnd = (_event) => { this._internals.states.delete('scrolling') } } Now you can style your element when it’s scrolling using :state(scrolling) and you’re manipulating the element’s internal state, not modifying HTML in the DOM. :host { overflow-y: scroll; transition: background 0.2s; } :host(:state(scrolling)) { background: pink; } Isn’t that cool? With great power comes great spider-mans, of course, but having your own custom pseudos is a thing you can do now with web components. Mimic native pseudo-states using custom states Now that we have a loose grasp on all the pieces we need to make our demo work, the next steps are: Find all our components and loop through them Copy their interactive rules to a new constructed stylesheet Replace :hover with :state(hover) Adopt the constructed stylesheet in the component Attach internals and imperatively set the state Here’s a simplified version of what’s happening in the CodePen version. /* A bit of pseudo-code here... */ const MyButtons = document.querySelectorAll('my-button'); const sheet = new CSSStyleSheet(); MyButtons.forEach(async (button, index) => { const isDefined = await customElements.whenDefined(button.localName); // Grab the stylesheet from the first if(isDefined && index === 0) { // Get current CSS rules const cssRules = Array.from( button.shadowRoot.adoptedStyleSheets[0].cssRules ) .filter(rule => rule.cssText.includes(':hover')) .map(rule => rule.cssText.replaceAll(':hover', ':state(hover)')); // Update the stylesheet contents sheet.replaceSync(cssRules.join('')); } // Adopt the stylesheet button.shadowRoot.adoptedStyleSheets = [...button.shadowRoot.adoptedStyleSheets, sheet] // Attach internals and set the state if(button.dataset.state == 'hover') { const _internals = button._internals ?? button.attachInternals(); _internals.states.add('hover'); } }) And that’s the gist of the trick: clone the pseudo-class states and set imposter custom states. I’m hand-waving some of the more complex bits like button:hover {} needs to be rewritten to :host(:state(hover)) button {} , but again, feel free to read the code. And my demo makes a couple assumptions I know won’t scale: All elements use the same static stylesheet (e.g. it doesn’t change per component). Each only has one adoptedStyleSheet. Hard-coded to HTMLButtonElement -specific interactions. Assumes you either don’t have ElementInternals already setup or already externally expose them and you know that @public property name. Next steps might be to make this a bit more robust and support all the other platform pseudo-classes like :popover-open , :user-invalid , or :playing . An agent could probably do this, not me though. I’m tired. Shadow DOM isn’t that bad, actually. Shadow DOM often gets a bad rap even in web component circles. I fully understand the friction there. Everyone’s first test drive of Shadow DOM styling almost always ends up in flames, leading to a poor unboxing experience that’s hard to shake off. That said, I feel like this demo captures a glimpse at some of the unique ✨superpowers✨ you get when styling with Shadow DOM. When coming from a global styles world, that loss of control can feel frustrating. But in my experience, with Shadow DOM encapsulation you’re gaining predictability and precise control by keeping everything local. You could probably figure out a way to do this with global styles. It’d be more difficult with roboclass-based scoping from something like CSS Modules, but I think it’s possible. But I imagine you’d have to parse through all the global document.styleSheets and that seems like a lot of work to add a :hover state demo to a . Style encapsulation here saves a lot of work. If you got all the way here and still hate Shadow DOM, I’d love to read a post of yours about where it broke down for you. But if you use Shadow DOM on the regular, I’d love to hear why it’s great. This has been my mantra for awhile now, but I think the web component community can do more about promoting the benefits. For example, there’s only two articles about adoptedStyleSheets on CSS-Tricks which seems low. In the meantime, while I try to convince my bosses to let me blog for a living, I’ve got my free course guidebook online and you can check it out.

  • freeCodeCamp.orgYouTube ChannelsVideoWatch on YouTube

    Godot 4 Roguelike Course – Build a Complete Top-Down Action Game

  • HeyDesignerDeveloper/Designer Newsread at source

    On borrowing Apple's type scale

    How a designer/founder wins by their own rules (video), Taming typography: Building a modern CSS reset, Introducing Adaptive Dark Mode.

  • Frontend Masters BlogMore Front-end Bloggers5 min read

    true or false in CSS

    CSS doesn’t have a boolean type, but it does have the true and false keywords. Register a custom property that only accepts them, flip it with :has(), and container style queries turn messy :checked selector combinations into readable conditions.

  • Net NinjaYouTube ChannelsVideoWatch on YouTube

    GitHub Copilot App Tutorial #9 - Using the Rubber Duck Agent

  • Flavio CopesMore Front-end Bloggersread at source

    Tailscale tutorial: your Mac and a server on one private network

    Install Tailscale on a Mac and a VPS, SSH by name, serve a page only you can open, close every public port, and use the server as an exit node.

  • QuirksBlogTop Front-end Bloggersread at source

    The Valley bubble

    I expected something to happen around the AI hype after the US elections. I didn’t expect it to happen so soon . Too early to tell yaddah yaddah, and the hype could very well continue for another few months, but did any AI-related stock ever tumble before now? Silicon Valley exists in its own reality bubble. Hell, the entire US tech scene inhabits in a bubble whose main feature is relentless self-flagellation. Apparently they’re all Guilty and will all be Punished. (Then again, the US is fundamentally a Calvinist country.) Sanity prevails outside the US. Sometimes. For now I’ll stick to my idea : the Valley is creating something with the appeal of a 19th-century factory, complete with oppressed and estranged workers, without delivering the sole benefit of such factories: cheaper IT and other services. They want to get rid of the middle classes whose salaries they have to pay so badly that they forgot to create an appealing product. The Valley doesn’t understand how fed up normal people are with AI. This is the first time ever a technological advance is so cordially disliked, and the Valley is not equipped to detect that. It has no experience with being disliked by normal people. Also, so far many of the Valley’s consumer tech innovations were free . AI isn’t free, or even cheap, as we’ll see in the coming months, once credit dries up. The Valley’s position will be damaged permanently, and tech will lose its centre of gravity, its global Schwerpunkt . I don’t think there will be a replacement. I think we’re moving to a multi-hub world, and I think that’s a good development. Sure, inertia will keep the Valley important for decades to come, but it’s lost its natural dominance of the hearts and minds of the world. Permanently. None of this is a judgement on AI itself. I refuse to do anything about it until its true costs are known, after the hundreds of billions per year (month?) of free money from clueless investors dry up. All the while I acknowledge that there is something there that will change programming — just not as radically as the US-based doomsayers think. AI can copy, it cannot innovate.

  • Smashing MagazineThe Giants4 min read

    A New Community For In-House UX People

    We’ve been working on something new! We’ve teamed up for a **new small community** for people doing UX-inside organizations — with weekly calls and a shared library of the business cases, templates, and research plans that have actually worked for other folks. [Jump to details](https://uxinsiders.boagworld.com/).

  • PiccalilliMore Front-end Bloggersread at source

    The Index: Issue #205

    Poznote In our endless search for a Notion replacement, this one is showing real promise. Fixing illustrations on a dark background with CSS The drop-shadow property is so overlooked considering how useful it is. This is a great use of it! Death comes for XSLT It's so frustrating that browsers are ignoring the one main rule: don't break the web . How to quit Spotify and improve your life in the process This one weird trick to improve your life. (We recommend TIDAL or Qobuz) Introducing adaptive dark mode It's interesting to see this concept back — this time from Safari — considering how much of a dreadful job Google did half a decade ago in Chrome. We'll see how it goes! CSS nesting: use with caution Here's one from the Piccalilli archives that you might have missed to wrap up this issue. P.S. this is a good website . Sponsor message When anyone can make anything, we can make you stand out. AI technologies have given anyone the ability to bring their ideas to life, but to produce a high quality service that actually works for the people it needs to work for requires experience, specialist skills and creativity. We’ve got heaps of all of that here at Set Studio and we've got availability starting in 2027, so check us out and see what we're about. Check out our work

  • SitePointThe Giantsread at source

    Build a Hardware Diagnostic Log with Vanilla JavaScript

    null Continue reading Build a Hardware Diagnostic Log with Vanilla JavaScript on SitePoint .

  • Chris HawkesYouTube ChannelsVideoWatch on YouTube

    I Made a Fake 1980s AI Commercial (Step by Step)

  • ESLint BlogLibraries, Frameworks, etc.2 min read

    ESLint now officially supports linting of shell scripts

    Back in July of 2024 we announced our plan to make ESLint a more general-purpose linter capable of linting any language. Since then, we’ve added official support for JSON, Markdown, and CSS. Today, we’re happy to add shell scripts to that list with the introduction of the…

  • Hidde's blogMore Front-end Bloggers4 min read

    Reflections from TPAC 2026

    TPAC is W3C's yearly work week. A large part of the Working Groups and all sorts of committees get together to collaborate in person (mostly hybrid). This post has some things I got out of it this year. Some of my week had been slightly overbooked, as is the faith of most TPAC…

  • Twilio BlogMulti Author Blogsread at source

    How to build an AI agent that remembers returning customers

    Build an AI agent that recognizes returning customers, recalls past conversations, and saves new facts, with Twilio Conversation Memory.

See everything from the last 30 days →