Frontend architecture and browser semantics
Framework choices, component and state architecture, browser-native HTML behavior, accessibility, web APIs, UI animation, and progressive enhancement.
28%
Best tweets about JavaScript
50 Best Tweets About JavaScript (2026)
Discover the best tweets about JavaScript, including language features, browser APIs, performance, tooling, frameworks, debugging, and engineering practices.
Technical JavaScript code, language behavior, browser features, performance, tooling, debugging, architecture, and developer experience.
- Creators
- 42
- Updated
Original Xholic analysis
What 50 top JavaScript posts reveal
The 50-post JavaScript set spans language fundamentals and browser-native design, alongside rendering, browser-agent, and TypeScript/code-quality topics. Its largest engagement outliers are a text-rendered video-stream experiment, a post alleging browser-extension probing, and a browser-agent workflow tip. [2065243815208710275, 2039702998339997924, 2034424894394392786]
- Dominant tone
- Positive
- Median score
- 9.81
- Leading format
- Announcement
- Recent posts
- 34%
60% of posts
All-time engagement
40% of posts
Published in 90 days
Conversation map
The themes creators return to
JavaScript language fundamentals
Core language concepts and behavior: objects, closures, null quirks, DOM APIs, async/await, promises, event loop, prototypes, and algorithms.
28%
JavaScript tooling and ecosystem
Package managers, bundlers, compilers, formatters, linters, Rust-powered tooling, API mocking, developer tooling, and JavaScript libraries.
28%
Node.js and server-side JavaScript
Node.js origins and use cases, non-blocking I/O, backend APIs, streams, serialization, server/client boundaries, scripting, and runtime design.
26%
Rendering, performance, and minimal JavaScript
Browser rendering and DOM performance, bundle reduction, static HTML, hydration choices, layout measurement, benchmarks, and removing unnecessary client-side JavaScript.
22%
Browser automation and AI agents
Using browser JavaScript, DevTools, CDP, DOM synchronization, WebMCP, code execution, and rendered-page access to improve agent workflows.
20%
TypeScript and code quality
Stricter typing, null handling, deterministic patterns, maintainability, testing, code review, debugging, and avoiding AI-generated code debt.
20%
JavaScript SEO and web crawling
The discoverability limits of JavaScript-rendered sites for search engines, AI crawlers, bots, SSR/SSG, prerendering, and browser-based crawling.
10%
Tone and stance
Sentiment Positive leads
Author posture Supportive leads
Performance benchmark
- Median likes
- 32
- Median reposts
- 3
- Median replies
- 3
- Median views
- 3.4K
Posts with media make up 54% of this collection. Their median all-time score is 11.8, compared with 4.21 for text-only posts.
Format mix
- Announcement 40% · score 11.6
- Opinion 18% · score 1.91
- Tutorial 14% · score 12.8
- Case Study 12% · score 3.07
Consensus and debate
Where creators agree, and where they do not
Shared view
Fundamentals are emphasized in learning guidance
Learning-oriented posts recommend understanding closures, prototypes, the event loop, async behavior, DOM APIs, and Node.js internals; one contrasts this foundation with treating frameworks as tools. [2043271578188964035, 2038527010251645282, 2036065427479019957]
Shared view
Browser-native navigation is advocated
Posts argue for using links for navigation and for retaining browser behavior rather than replacing native HTML capabilities with JavaScript handlers. [2064746419840540922, 2034177765361258835]
Shared view
Guardrails are proposed for code quality
Posts present stricter TypeScript constraints, null handling, code review, testing, and maintainable fixes as ways to reduce defects and avoid accumulating AI-generated code debt. [2083780381850075574, 2014674226964234301, 2050644463631135088]
Open debate
JavaScript rendering and discoverability
One post argues that JavaScript-rendered content creates substantial crawling and indexing risks and advocates SSR; another recommends escalating from simpler retrieval methods to browser rendering only when needed. These posts represent different approaches to handling JavaScript-dependent content. [2029815915873800327, 2032428403404726659]
Open debate
Frameworks versus minimal JavaScript
One post advocates delaying frameworks and using vanilla browser APIs until their limits are reached, while other posts recommend framework knowledge or describe an Astro migration away from heavy client-side rendering. [2066117181826335115, 2035997562185154663, 2034177765361258835]
What performs
Patterns behind standout posts
Three browser-related posts were the largest outliers
The highest-scoring outlier was the text-rendered video-stream post (7,430.86), followed by the browser-extension-scanning allegation (4,122.09) and the browser-agent workflow tip (440.07). [2065243815208710275, 2039702998339997924, 2034424894394392786]
Lists had the highest format median
LIST posts had a median all-time score of 53.55, higher than the listed medians for announcements (11.55), tutorials (12.798), case studies (3.07), stories (10.2), and opinions (1.909). [2043271578188964035, 2035997562185154663, 2036075375088845264]
Media posts had the higher median score
Posts with media had a median all-time score of 11.8, compared with 4.214 for text-only posts. Media appeared in 27 of 50 tweets (54%). [2065243815208710275, 2039702998339997924]
Statistical standouts
- View standout post 1 Score 7430.9 · 757.48× median
- View standout post 2 Score 4122.1 · 420.19× median
- View standout post 3 Score 440.1 · 44.86× median
- View standout post 4 Score 194.9 · 19.87× median
- View standout post 5 Score 143.8 · 14.66× median
Creator landscape
Who shapes this conversation
The five most represented creators account for 20% of the selected posts.
-
1. Vaishnavi
@_vmlops
2 posts
-
2. K.O.O
@Dominus_Kelvin
2 posts
-
3. GitHub Projects Community
@GithubProjects
2 posts
-
4. Nav Toor
@heynavtoor
2 posts
-
5. Darren Shepherd
@ibuildthecloud
2 posts
-
6. Ihtesham Ali
@ihteshamali
2 posts
GitHub Projects Community was a repeat voice with strong listed performance
GitHub Projects Community published two posts and had a listed median all-time score of 28.78, covering JavaScript algorithms/data structures and Rust-written JavaScript/TypeScript tools. [2069639157740351983, 2054047320384422112]
SumitM_X covered frontend breadth and browser basics
SumitM_X posted both a broad frontend skills checklist and an introductory explanation of the browser-provided document object. [2035997562185154663, 2036667873104707659]
Creator participation was dispersed
The dataset contains 42 creators, and the top-five placement share is 20%, indicating limited concentration in the reported top-five placement measure. [2076325397227331928, 2069639157740351983, 2035997562185154663]
Since the previous snapshot
What changed since Aug 12, 2026
- 82% of the selected posts remained.
- The creator count changed by 0.
- The leading sentiment remained stable.
How this analysis was made
Themes, sentiment, stance, and post format are classified per tweet. All counts, shares, medians, creator concentration, freshness, and performance comparisons are then calculated directly from the published snapshot.
Xholic's all-time score compares engagement while accounting for reach, post age, and creator consistency. It is used for relative comparisons within this collection.
This report analyzes the exact 50-post snapshot shown below. AI identifies editorial categories and drafts explanations; all statistics are calculated from the snapshot, and every narrative claim is checked against cited posts before publication.
Best JavaScript tweets
Top JavaScript tweets from 42 creators
Ranked 01–50
- 01
@om_patel5 ·
SOMEONE VIBE CODED A VIDEO STREAM THAT IS SECRETLY 100% TEXT SO IT CANT BE BLOCKED it plays 360p video at 30fps, but theres no actual video on the page. every frame is just colored text characters being repainted on a canvas to the browser its not media at all, its javascript updating some text its called asciline, and here's the trick: > the server decodes the real video and streams it as binary packed text over websockets > the browser paints thousands of colored block characters fast enough to look like 360p > ad blockers and autoplay blockers cant catch it because theres no video element to catch > it streams in kilobytes since its just strings, so it runs on trash internet since the video is literally text, you can apply css glows to it, let people copy paste a moving frame, or feed it straight to a local llm however, an unblockable stream is also an unblockable ad as well
Watch video
- 02
@katexbt ·
Wow, LinkedIn just got caught in a huge scandal. Here's what's going on: > Every time you open LinkedIn in a Chrome-based browser, LinkedIn’s JavaScript executes a silent scan of your installed browser extensions. > The scan probes for thousands of specific extensions by ID, collects the results, encrypts them, and transmits them to LinkedIn’s servers. It gets worse: > The scan doesn’t just look for LinkedIn-related tools. > It identifies whether you use an Islamic content filter (PordaAI — “Blur Haram objects, real-time AI for Islamic values”) > whether you’ve installed an anti-Zionist political tagger (Anti-Zionist Tag), or a tool designed for neurodivergent users Huge L after L
- 03
- 04
@jbobbink ·
Google is gaslighting the entire SEO industry about JavaScript. I have the receipts. This week Google removed the "Design for accessibility" section from their official JavaScript SEO documentation. Their reason? JavaScript rendering is "no longer a barrier" for Google Search. I nearly choked on my coffee. I manage SEO across hundreds of properties. I see what actually happens when Google tries to render JavaScript sites. Every single day. This is the fifth update to the same document since December 2025, part of a systematic campaign to replace broad cautions with specific technical guidance Here is what I see that Google apparently does not. Content behind tabs, accordions, and "load more" buttons? Completely invisible. Google does not click. Google does not scroll. Google does not interact. That content simply does not exist for them. Structured data injected via JavaScript? Random. Google's own documentation on https://t.co/COodItApeI admits that JS-generated Product markup makes shopping crawls less frequent and less reliable. I see it break constantly. Images loaded through JavaScript? Good luck getting those indexed. Lazy-loaded images behind interaction events are a black hole. Internal links rendered via JavaScript? Onely proved Google needs 9x more time to crawl JS pages than plain HTML. Nine times. Their experiment showed 313 hours for JS versus 36 hours for HTML to reach the same depth. A 2024 counterpoint study by Vercel/MERJ found most pages rendered within minutes. And here is the part nobody is talking about. AI crawlers cannot render JavaScript at all. GPTBot, ClaudeBot, PerplexityBot. They see raw HTML only. Onely's 2025 research estimated about 70% of modern websites may be completely invisible to AI search because of JavaScript dependencies. So Google removes the warning. Developers lean harder into client-side rendering. And what happens? Sites become more dependent on Google's proprietary rendering pipeline while going completely dark for every competing search and AI system. Convenient timing. Google is not telling you JavaScript is fine because it is fine. Google is telling you JavaScript is fine because it benefits Google. Server-side rendering is not optional. It never was. Do not let a documentation update convince you otherwise. Sources: 1. Barry Schwartz, "Loading Content With JavaScript Does Not Make It Harder For Google Search" Mar 5, 2026 2. Google Developers, JavaScript SEO Basics (the removed section) 3. Google Developers, Structured Data with JavaScript (the shopping crawl admission) 4. Vercel "How Google handles JavaScript throughout the indexing process" Jul 20224
- 05
@justinstorre ·
I am experimenting with something I call "Typescript Ultra Strict". Basically, typescript with no nulls, no classes, no undefineds, no switch statements, and no vars + the addition of match macros. Basically forcing AI to write functional AI code through compilation errors that is more deterministic and testable. Back in 2008 Chrome built the V8 Javascript engine and the entire world built edge compute on top of this amazing primitive. However, Javascript had it's short comings so we made Typescript, but Typescript still was "too friendly", mainly to appeal to a human audience. We no longer have humans writing code, so why not give the AI something less clunky and more clanky 😉 UX - write .tsus files - add a one-line plugin to webpack, Vite, esbuild, or Bun Features include: - Option/Result runtime, with boundary helpers that turn the outside world's nulls and throws into Option and Result - match macros - good error messages, so an agent can fix its own errors in a loop
- 06
@jahirsheikh8 ·
Step-1: Learn JavaScript (not just syntax, understand the weird parts) Step-2: Master closures, prototypes & the event loop Step-3: Understand async deeply (promises, async/await, microtasks vs macrotasks) Step-4: Build real UIs with React (state, hooks, rendering behavior) Step-5: Learn Node.js internals (streams, buffers, non-blocking I/O) Step-6: Build APIs (Express/Fastify) & handle errors properly Step-7: Work with databases (SQL + NoSQL) like you actually care about queries Step-8: Optimize performance (debouncing, memoization, caching) Step-9: Deploy (Docker, CI/CD, Vercel/AWS) Step-10: Ship it
- 07
@SumitM_X ·
As a Frontend Engineer in 2026, please learn: - JavaScript & TypeScript (deeply, not just syntax) - Responsive Design (CSS, Flexbox, Grid, Container Queries) - Performance Optimization (lazy loading, code splitting, tree shaking, memoization, Core Web Vitals) - Web Security (CORS, XSS, CSRF, Content Security Policy, secure cookies) - Testing (Jest, Cypress, Playwright) - Build Tools (Vite, Webpack basics, Babel, bundling strategies) - Version Control (Git, PR workflows, rebasing) - Browser DevTools & Debugging - Accessibility (WCAG, ARIA, keyboard navigation, screen readers) - Progressive Web Apps (PWA) - Component Architecture (composition, Atomic Design, HOCs, hooks patterns) - Micro Frontends (when and when not to use them) - API Integration (REST, GraphQL, WebSockets, caching, error handling) - CI/CD for Frontend (automated builds, previews, deployments) - Browser Rendering & DOM Performance - State Management (Redux, Zustand, signals, server state vs client state) - Framework Internals (e.g. React Fiber, Angular Ivy ) - UX/UI Collaboration (design systems, Figma handoff, accessibility audits) - WebAssembly (Wasm) Pick ONE framework/library. Stop jumping from one framework to another.
- 08
@BraydenWilmoth ·
What if you only ever needed one browser tab open and you could bring all the relevant websites to you, instead of you going to them? DOM synchronization allows an invisible web view as data source of truth, while rendering it however you want to display it as a block on the canvas. Gist of it is: - take a source website - annotate with data attributes relevant elements - pass to AI an array of those annotated elements - allow it to rearrange, restyle, etc however it wants - display those elements on a new canvas - when an event happens on an attributed element, replay it back in the source website - reconcile data changes back to canvas This way the canvas representation doesn't have to reproduce any custom javascript. It can fully piggy-back off the original website. Anyways... I'm just sharing some thoughts and explorations as I have them. I've been able to use my canvas to have my Google Chat, Gmail, X feed, Grafana charts and Cloudflare Workers dashboard all in front of me at the same time and I'm enjoying it. Exploring semantic expression of websites instead of strict DOM, also looking at using network calls (CDP) as context instead of relying fully on UI to know what data is available... a lot of interesting things possible. Mix this with generative UI and the whole internet is at your disposal to make it appear how you want backed by all the services/websites you already use.
- 09
@ayushagarwal ·
we just rebuilt @dodopayments from scratch. migrated entirely off framer. rewrote the whole thing in astro. the old site looked fine but under the hood it was slow. heavy javascript bundles. unnecessary client-side rendering for what is fundamentally a static marketing site. page speed scores were mid. every time we wanted to change something it felt like fighting the tool instead of building. so we nuked it. astro ships zero javascript by default. every page is static HTML unless you explicitly need interactivity. the result is a site that loads almost instantly. lighthouse scores through the roof. SEO actually works because crawlers aren't waiting for javascript to render your content. the migration took effort but the tradeoff was obvious. full control over every pixel. no vendor lock-in. no mysterious build steps. no "why is this component re-rendering on every page." if you're running a SaaS marketing site on a no-code builder and wondering why your page speed is garbage, this is your sign.
Watch video
- 10
@sankitdev ·
My girlfriend takes 45 minutes to get ready. I used to just stand at the door. Doing nothing. Completely blocked. Staring at the wall. Waiting. Frozen. Then one day I just... stopped doing that. I took her sister to play with in meantime like badminton, chess, carrom, etc. I lived my life while she got ready. Same wait time. Completely different outcome. That's exactly what async/await does to your JavaScript. ───────────────────────── What is Async/Await? async/await is a syntax built on top of Promises that lets your code wait for an operation to finish without blocking everything else from running. Two keywords. Completely changes how your program breathes. async function getUser() { const response = await fetch("https://t.co/86T5inz1nE") const data = await response.json() return data } The function pauses at await. But the rest of your program keeps running. ───────────────────────── The problem it solves Before async/await, you had callbacks inside callbacks inside callbacks. This was called callback hell. It looked like this: getUser(function(user) { getPosts(https://t.co/8FGd7HzhGQ, function(posts) { getComments(posts[0].id, function(comments) { console.log(comments) }) }) }) Unreadable. Unmaintainable. A nightmare to debug. > Promises cleaned it up. > async/await made it feel like normal code. ───────────────────────── Synchronous vs Asynchronous > Synchronous = one thing at a time, fully blocked // everything freezes here const data = fetchDataSync() console.log(data) Asynchronous = start the task, come back when ready async function run() { const data = await fetchData() // only THIS pauses console.log(data) } She's still taking 45 minutes either way. The difference is whether you freeze at the door or live your life. ───────────────────────── How await actually works When JavaScript hits an await, it: 1. Starts the async operation 2. Suspends that function 3. Returns control to the rest of the program 4. Resumes once the Promise resolves Nothing is blocked. Call stack stays free. ───────────────────────── Error handling with try/catch async function getUser() { try { const response = await fetch("https://t.co/86T5inz1nE") const data = await response.json() return data } catch (error) { console.log("Something went wrong:", error) } } Clean. Readable. Exactly what your code deserves. ───────────────────────── Running things in parallel // Slow - sequential const user = await getUser() const posts = await getPosts() // Fast - parallel const [user, posts] = await Promise.all([ getUser(), getPosts() ]) Don't await things one by one if they don't depend on each other. ───────────────────────── Bonus: Real world applications 1. API calls Every backend request uses async/await to avoid freezing the server for other users. 2. File I/O in Node.js Reading and writing files without blocking the event loop. 3. React data fetching useEffect with async functions to load data after component mounts. 4. Database queries Prisma and Mongoose return Promises, async/await makes querying feel like sync code. ───────────────────────── Congratulations🥳, you just learned async/await. async/await didn't make the wait shorter. It just stopped your program from freezing while it waited. She still takes 45 minutes. But now you ship features in the meantime.
- 11
- 12
@foley_seo ·
Optimizing your site for SEO & for LLMS? It's CRUCIAL that user-agents / bots are actually able to see the rendered output. Not all tech stacks are suitable out of the box - JS tech stacks are notorious for: 1. Not being easy to render even for Googlebot which can render JS but isn't overly efficient at it 2. Not being suitable for LLMs to crawl / ingest content Want to know if your site is? 1. Visit a page on your website, hit F12 and open DevTools 2. Press CTRL + SHIFT + P 3. Type Javascript and click Disable Javascript 4. Click NETWORK in the header menu of devtools 5. Ensure Preserve Log and Disable Cache are set 6. Now on your website URL append ?test and hit enter 7. On your network tab, click DOC (shown with red box in image) 8. Where it says NAME you should see ?test, click it 9. Click on RESPONSE tab (shown with red box in image) This will show you the OUTPUT of what an LLM would see. Google CAN render Javascript but, not all Javascript tech stacks are the same - if you want to see the RAW TEXT OUTPUT, do the following: In the bottom half of DevTools you will see menu items "Console, Issues, Coverage" etc. click on CONSOLE (selected by default). Click the CLEAR icon (circle with line through it) Copy and paste this command into console and hit ENTER: const text = document.body.innerText; for (let i = 0; i < text.length; i += 1000) { console.log(text.slice(i, i + 1000)); } This will show you the RAW, NON JS output of your URL. THIS is the content that LLMS will see, and potentially Google/other search engines if there are any issues with SSR. IF YOU ARE USING JS based tech stacks you SHOULD consider SSG (static site generation) or pre-render. Effectively you want to MAXIMISE the output of RAW TEXT/HTML in the dom post JS processing before that document output is served. The amount of SITE OWNERS who have these fancy tech stacks are often oblivious to the risks/issues with using JS for a web app / site framework. Here are some solutions based on common platforms: React Next.js – [SSG + SSR + ISR] Most popular for React, supports hybrid static rendering and server-side rendering Gatsby Fully static, React-based. Uses GraphQL for data and pre-renders everything at build time Astro Partial hydration. You can use React components but ship less JS by default Vue Nuxt Offers static site generation (nuxt generate) as well as server-side rendering VitePress Lightweight Vue-based SSG, ideal for docs and content-driven sites VuePress Vue-powered static site generator, originally designed for documentation Svelte SvelteKit Can be configured for full SSG, SSR, or hybrid deployment. Excellent for fast, SEO-friendly output Elder.js Performance-focused SSG for Svelte apps (less common now but still useful) Angular Scully The go-to SSG for Angular. Pre-renders Angular apps into static HTML Analog.js Newer project aiming to bring Next.js-like DX to Angular with SSR and SSG #seo #seo2025 #aiseo
- 13
@freeCodeCamp ·
Closures are one of the most misunderstood parts of JavaScript - but they're important to understand. So @sumit_analyzen wrote this in-depth handbook to teach you the detailed ins and outs of closures. You'll learn about functions and parameters, accessing variables, scope, let vs var, and you'll see a bunch of code examples along the way. https://t.co/AesFjtQ4ew
- 14
@GithubProjects ·
JavaScript algorithms and data structures implemented in JavaScript with detailed explanations and complexity analysis. - Beginner and advanced levels for both data structures and algorithms - Includes Linked Lists, Trees, Graphs, Hash Tables, and Bloom Filters - Covers sorting, searching, dynamic programming, and graph algorithms - Each implementation has its own README with links to further reading Explore it here: https://t.co/13bf1VEuKS
- 15
@staysaasy ·
When I first became a manager I was managing someone way more senior than me in a tech stack I knew nothing about. We were doing JavaScript SDK development - the kind of stuff that customers would lose their minds over if you got it wrong. I basically became his QA engineer. I reviewed all of his PRs. Super careful line by line analysis of promises and local storage and browser support code. The I’d check out the code and test it out. Really aggressively try to find bugs and issues. I was ultimately responsible for the output, our customers demanded quality, and it was the way I could add most value. Years later I found myself really, really good at thinking about software quality. I’d have debates with my senior leaders about whether we needed QA engineers. I was adamant that it wasn’t needed. At the same time, I was always shocked at how bad most engineers were about ruining through testing, releasing, and risk management. Eventually, way later, I realized that most people have just never had to do it regularly in a high stakes environment. I often think back to those days of basically being that guys personal tester. It was maybe, on face value, the lamest thing I’ve ever had to do. But it also turned out to be one of the top and most differentiated learning experiences I’ve ever had.
- 16
@suni_code ·
Choose like an Engineer, not like a trend follower: Real time updates → WebSockets Event firehose → Kafka Simple CRUD APIs → REST Flexible data fetching → GraphQL AI / data heavy work → Python Infrastructure & tooling → Go Search + log analysis → ElasticSearch Ultra fast access → Redis Strong, reliable storage → Postgres Continuous data streams → Flink Close to metal control → C Maximum performance → C++ Enterprise grade systems → Java Shipping quickly → Node.js Safer JavaScript → TypeScript Interactive frontends → React Full stack apps → Next.js Fast styling → Tailwind Cross platform apps → Flutter Automation & scripting → Bash Every tool solves a problem. So understand your requirements and work accordingly
- 17
- 18
- 19
- 20
- 21
@ihteshamali ·
JavaScript runs almost the entire internet. It was built in 10 days. Brendan Eich wrote the first version in May 1995a. He was a new hire at Netscape, the browser company racing against Microsoft, and the deadline was already on top of him before he started. He didn't even want to build what they asked for. Eich wanted to put a language he loved, Scheme, into the browser. His managers said no. They had just signed a deal with Sun, and Java was the hottest thing in tech. So the order came down. Make it look like Java. Keep it small. In his own words, he was told to build a silly little brother language. Something for non-programmers to add tiny effects to a page. A blinking image. A scrolling message at the bottom of the screen. That was the whole point. He shipped the prototype in 10 contiguous days. It had bugs. It had quirks people still complain about 30 years later. Then it never stopped growing. That throwaway toy now powers nearly every website on Earth. The thing built to be the small one outlived Java's dominance, outlived Netscape, and became the foundation of the modern web. Nobody plans the thing that takes over the world. They just build the thing in front of them and the world decides the rest.
- 22
@SumitM_X ·
As a frontend dev, do you know how JavaScript talks to your HTML? That magic starts with the document object! It’s like the remote control for your entire web page. NOTE: document isn’t part of JavaScript itself! It’s a gift from the browser, through the Web API. When a browser loads your webpage, it reads the HTML and creates a DOM (Document Object Model) : a tree-like structure in memory that represents everything on the page. This DOM is not HTML , it’s a JavaScript-friendly version of your HTML. JavaScript gets access to this DOM through the document object. So when you write: document.getElementById("btn") You're saying: “Hey browser, give me the JavaScript object that represents the HTML element with id="btn".” Once you get that, you can: Read or change its text Add event listeners Change styles Add/remove it from the page …and more. Some common document usage: document.getElementById("btn") – grab a button document.title = "New Page" – change the tab name document.querySelector(".box") – select like CSS document.createElement("div") – build new stuff
- 23
@firt ·
We keep defaulting to the biggest model in the room every time we touch AI in our apps. Claude, GPT, Gemini. Cloud or nothing. But the browser is already more capable than most people realize: WebAI and WebMCP may change this. With WebAI you can run models client-side. With WebMCP, your site can expose real actions as JavaScript functions. Agents don't need screenshots, DOM scraping, or blind clicking. They can just use your app. I talked about this with @guypod on @tessl_io AI Native Dev podcast: the browser is turning into an AI runtime. Links in first reply :)
Watch video
- 24
@heynavtoor ·
You have visited a website that made you stop scrolling. A product floating in 3D space. A camera slowly rotating around it as you scroll. Text fading in at the perfect moment. Colors shifting with your cursor. The entire page felt like a movie, not a website. Apple's product pages do this. Nike does this. Every luxury brand does this. Agencies charge five and six figures per site for these animations. Designers plan the motion in After Effects. Developers then spend weeks translating it into code. Frame by frame. Curve by curve. After Effects costs $263.88 a year as a single app. Or $659.88 a year bundled in Creative Cloud. And it cannot run on the web. It only exports video files. Every animation you see on a website was coded by hand. An Iranian developer named Aria Minaei, based in Berlin and Helsinki, built an After Effects-style timeline editor that runs directly in the browser. Inside your code. Visually. It is called Theatre.js. 12,509 stars on GitHub. Apache 2.0 licensed. Free forever in personal and commercial projects. In December 2021, Aria raised $4.5 million in seed funding. Led by OSS Capital. Backed by Ram Shriram (founding board member of Google), Amjad Masad (CEO of Replit), Sahil Lavingia (founder of Gumroad), and Adam Wiggins (former CTO of Heroku). Here is what Theatre.js does. You open your website in the browser. A visual editor appears alongside it. A timeline. Exactly like After Effects. Keyframes. Bezier curves. Sequence tracks. You drag a keyframe. The animation changes. In real time. On your actual website. Not a preview. The real thing. Move an object's position at frame 0. Set a different position at frame 60. Theatre.js calculates every frame in between. With customizable easing curves. Here is what it animates. 3D objects in Three.js. Cameras, lights, meshes, materials. Full scene choreography. HTML elements. Position, opacity, color, size, rotation. Any CSS property. SVG graphics. Path animations, morphs, strokes. Any JavaScript variable. If your code controls it, Theatre.js can animate it. Here is the wildest part. Designers use After Effects to design animations. Then developers spend weeks recreating those animations in code. Two people. Two tools. Two interpretations of the same motion. Theatre.js eliminates the gap. The designer and the developer work in the same tool. On the actual website. The animation is the code. After Effects: $263.88 a year. Exports video only. Cannot run on websites. Theatre.js: $0. Visual editor. Timeline. Keyframes. Runs on the actual website you are shipping. Apache 2.0. Forever. One note: Aria moved 1.0 development to a private repo in 2022 to iterate faster on the paid studio product. The public v0.7 codebase is still on GitHub, still Apache 2.0, still used in production by studios today. The license cannot be revoked. The code is yours. 12,509 stars. $4.5 million raised. Free to use. The websites that made you stop scrolling were coded by hand. Now they can be designed. Visually. In the browser. For free. (Link in the comments)
Watch video
- 25
@heynavtoor ·
🚨 A JavaScript library with 100 million weekly downloads was just hacked. Malicious versions were live on npm. Your machine might already be compromised. It's called Axios. On March 31, 2026, attackers hijacked the lead maintainer's npm account and published poisoned versions that silently install a Remote Access Trojan on your computer. Bloomberg covered it. Sophos covered it. Malwarebytes covered it. Google Threat Intelligence attributed the attack with high confidence to a North Korea-nexus financially motivated threat actor. This is not a drill. Here's what happened: → March 30: Attacker hijacks the npm account of Axios's lead maintainer → Changes the account email to an attacker-controlled ProtonMail address → Publishes a clean decoy package 18 hours before the attack. Pre-staged. → March 31: Publishes two poisoned Axios versions. 1.14.1 and 0.30.4. → Both contain a hidden dependency that runs a postinstall script → That script silently downloads and installs a cross-platform RAT (Windows, macOS, Linux) → The malware deletes itself after installation to hide from investigators → The malicious versions were live for 2 to 3 hours before npm pulled them Here's why this is terrifying: → Axios gets over 100 million weekly downloads on npm → Any developer or CI/CD pipeline that ran npm install during those 2 to 3 hours is potentially compromised → The RAT gives attackers full remote access to your machine → StepSecurity detected anomalous C2 contact in over 12,000 projects → Google warns "hundreds of thousands of stolen secrets could potentially be circulating" → Microsoft attributed the attack to Sapphire Sleet, a North Korean state actor Here's what you need to do RIGHT NOW: → Check your lockfiles for [email protected], [email protected], or [email protected] → Check CI logs for any npm install between 00:00 and 03:30 UTC on March 31, 2026 → If found: treat that machine as FULLY COMPROMISED. Re-image it. Do not just uninstall. → Rotate ALL credentials accessible from the affected machine → Block sfrclak[.]com at your firewall → Safe versions: [email protected] and [email protected] → Update immediately Here's the part that should keep the entire industry up at night: Legitimate Axios releases include OIDC provenance metadata and SLSA build attestations linking every package to a verified GitHub Actions build. The malicious versions had none. Zero verifiable build trail. And npm installed them anyway. 100 million weekly downloads. One compromised account. One postinstall script. Full remote access. Check your lockfiles. Now.
- 26
@larsencc ·
port-whisperer > 2,467 lines of javascript > 3 dependencies > zero AI It has 864 GH stars. I build agent infrastructure for a living, but the thing people actually use is a ports checker.
Watch video
- 27
@aiwithmayank ·
A broke guy in Russia runs 75 of the top 100 websites on Earth. His name is Denis Pushkarev. In 2014 he published a small JavaScript library called core-js. It became the invisible thing that lets modern websites work in any browser. Apple, Netflix, Spotify, and PayPal all run on it. It's baked into React, Angular, and Vue. Nine billion downloads, and he maintains all of it alone. When he asked for help, his Patreon brought in 57 dollars a month. People didn't just refuse to pay him. They called him a parasite and wished death on his family. The companies built on his code are worth trillions. He survives on a few hundred dollars a month and still ships updates twelve years later. The most important work in tech is almost always the work nobody can see. We never notice the person holding the ceiling up until the moment he lets go.
- 28
@ihteshamali ·
This tiny JavaScript library is doing something browsers should have built in years ago. Pretext measures multiline text and calculates layout without triggering a single DOM reflow. You get the height, line count, and individual line data back as pure numbers with zero browser layout cost. The use cases are wild. You can do proper list virtualization without height guesswork, prevent layout shift when new text loads, verify at development time that button labels don't overflow, and build masonry grids without hacks. → walkLineRanges() lets you binary search the perfect container width → layoutNextLine() lets each line have a different max width → Handles bidirectional text, mixed scripts, and browser quirks automatically → Server-side rendering support is coming 14.1K stars. MIT License. 100% Opensource. Link in comments.
- 29
@priyankapudi ·
Meet Ryan Dahl - Creator of Node.js - Grew up in San Diego, California - Got his first computer (Apple IIc) at age 6 - Loved math and studied it at UC San Diego - Started a PhD but dropped out , abstract math wasn't applicable to real life - Left for South America and started building web apps in Ruby - While freelancing in Germany, he noticed a major problem - Web servers like Apache used one thread per connection - Servers choked under heavy traffic - Handling thousands of users at once was a nightmare - One day he uploaded an image on Flickr - Saw the progress bar repeatedly querying the server just to show upload status - That moment clicked , the web needed a better way to handle I/O - Started coding in a WiFi-less Starbucks in Cologne, Germany - 8-hour daily coding sprints for 6 months straight - Built it on Google's V8 JavaScript engine - Used non-blocking, event-driven I/O , a radical approach at the time - Presented Node.js at JSConf EU in 2009 - The crowd went wild - He said he was "in a continual state of surprise for four years" - Joined Joyent and worked on Node full-time - Designed it to be lightweight, fast, and asynchronous - JavaScript could now run outside the browser , on servers - Node.js became one of the most transformative tools in web development - Powers: Netflix, LinkedIn, PayPal, Uber, NASA dashboards - Millions of developers use it worldwide - npm became the largest package registry in history - Later gave his famous "10 Things I Regret About Node.js" talk - Then built Deno : a modern rewrite fixing his own mistakes - Literally changed how the internet works behind the scenes Set inspiration for many like me !
- 30
- 31
- 32
@flydotio ·
Built the world's simplest code runner in 5 mins with Sprites. This is doubly cool. First off, how it works: User writes some scary JavaScript, which then gets run in a new Sprite. Sprites are literally built for running random code, so bring on the footguns. 🧵
Watch video
- 33
@nalinrajput23 ·
modern tech is crazy. > cursor is a wrapper over vscode. > vscode is a wrapper over electron. > electron is a wrapper over chromium. > slack desktop is a wrapper over electron. > discord desktop is a wrapper over electron. > notion desktop is a wrapper over electron. > web apps are wrappers over html/css/javascript. > node.js is a wrapper over the v8 engine. > bun is a wrapper over javascriptcore. > react is a wrapper over the browser dom. > next.js is a wrapper over react. > docker is a wrapper over linux kernel features. > kubernetes is a wrapper over containers.
- 34
@_vmlops ·
THIS JS LIBRARY READS TEXT OUT OF ANY IMAGE, RIGHT IN YOUR BROWSER no server, no API calls, pure javascript OCR wrapping tesseract via webassembly ▪️ works in browser (webpack, esm, script tag) and Node.js ▪️ 100+ languages supported ▪️ v7 needs Node v16+, requires just a few lines to get text out of an image ▪️ 38.1k stars, used by 37k+ projects, actively maintained since 2019 ▪️ doesn't handle PDFs directly, that's where scribe.js comes in three lines of code and you've got OCR running client-side: createWorker → recognize → terminate https://t.co/90y8FSFzDC
- 35
@the_smart_ape ·
cloudflare just dropped a /crawl endpoint and everyone's losing their mind. calm down. let me tell you what it actually is, what it isn't, and why you probably don't need it. the /crawl endpoint is a wrapper. you give it a URL, it spins up headless browsers on Cloudflare's infra, follows links, renders JavaScript, and hands you back markdown or JSON. all with 1 API call. it's cool but not revolutionary. firecrawl does this. crawl4AI does this. spider does this. they've been doing it for months. cloudflare just added it to their existing Browser Rendering product and everyone acted like they invented crawling. what IS interesting: it's cloudflare. that means it's cheap ($0.09/hour). but the thing is you probably don't even need a crawler. there are 8 ways an AI agent can read a webpage. most jump straight to the complex ones when a 50ms HTTP request would've done the job. so let's break them all down, from the simplest to the most overkill. 1. raw HTTP fetch your agent sends a request, gets back HTML. that's it. like reading a book's source code instead of the printed page. works great for simple sites, blogs, wikis, docs. breaks on anything that uses JavaScript to load content. speed: ~50ms. cost: free. 2. readability parser same thing, but with a cleaning step. strips out nav bars, ads, footers, cookie banners. gives you just the article text in clean markdown. doesn't handle JavaScript-rendered content. but for articles and docs, it's perfect, and it's what I use daily. speed: ~100ms. cost: free. 3. headless browser (local) launches an invisible Chrome that loads the page like a human would. JavaScript runs, content renders, everything loads. you can click, scroll, fill forms, log in. the problem: slow (2-10s), eats ~200MB RAM per instance, and you maintain the infra. tools: Playwright, Puppeteer, Selenium. 4. cloud browser API same as #3 but someone else runs the browser. you send a URL, get back the rendered page. this is where Cloudflare's /crawl lives, along with Browserbase and Steel. no infra headaches, scales easily, cheap. tradeoff: less control over interactions. 5. managed scraping API this is the anti-bot warfare tier. ScrapingBee, Bright Data, rotating proxies, CAPTCHA solving, residential IPs. for when the site actively fights you. works. costs $49-499+/month. 6. AI-native crawler Firecrawl, Crawl4AI, Spider. crawl + render + auto-convert to clean markdown/JSON. built for RAG pipelines. define extraction schemas in natural language. the "new wave" that Cloudflare is now competing with. 7. LLM extraction skip the code entirely. dump the page content into an LLM, ask "what's the price?" in plain english. no CSS selectors, no regex, no maintenance when the site redesigns. downside: expensive at scale (tokens add up fast). best as the final step after cleaning with methods 1-6. 8. official APIs the one everyone forgets. X, Reddit, most SaaS, they have APIs. structured data, no parsing, no anti-bot games. when an API exists, it's always the right choice. the good setups combine 2-3: → fetch → readability → LLM for cheap article extraction → cloud browser → LLM for JavaScript-heavy sites → sniff the actual API in DevTools → call it directly, the holy grail, free, fastest, most reliable → AI crawler → vector DB for full know ledge bases real costs at 10,000 pages/month • HTTP Fetch: $0 • Jina Reader: $0 • Cloudflare Browser: ~$5 • Spider: ~$4.80 • Firecrawl: $47/mo • ScrapingBee: $49-147/mo • Bright Data: $499+/mo 2 rules i follow: start simple. API > fetch > readability > browser. only add complexity when the simpler method fails. I see people spinning up Playwright for sites where curl works fine. most sites don't need JS rendering. 60%+ of the web is static or server-rendered. test with a simple fetch first.
- 36
@buildwithyash ·
VideoNo7:-Serialization and Deserialization for backend engineers 1. The Core Problem: Language Barriers in Networking >Different Environments: A typical web application consists of a client (e.g., a frontend built with JavaScript, TypeScript, or Swift) and a server (built with languages like Node.js, Python, Java, Go, or Rust). >Incompatible Data Types: Programming languages represent and handle data very differently. JavaScript is dynamically typed and flexible, while Rust is statically typed with strict ownership rules and compile-time guarantees. >The Challenge: When a JavaScript client needs to send data over the network to a Rust (or any other) server, the server cannot directly understand the client’s native data structures. To communicate effectively, both sides need a universal, language-agnostic format. 2. What is Serialization and Deserialization? >The Solution: Both client and server agree on a common, standardized data format for transmission over the network. >Serialization: The process of converting a native data structure (e.g., a JavaScript object or a Rust struct) into this common format before sending it over the network. >Deserialization: The reverse process — converting the received common format back into the receiving system’s native data types so it can be used in business logic. >Purpose: Serialization & deserialization make data transmission language-agnostic and platform-independent. Any machine can communicate with any other machine regardless of the programming language or technology stack used. 3. Types of Serialization Standards Serialization formats generally fall into two broad categories: >Text-Based Formats: Human-readable and easy to debug. Popular examples: JSON, YAML, and XML. >Binary Formats: More compact and efficient for performance-critical applications. Popular examples: Protocol Buffers (Protobuf), Avro, MessagePack, and Thrift. Text-based formats are preferred for most web APIs due to readability, while binary formats are chosen when speed and bandwidth efficiency are critical (e.g., microservices, mobile apps, or high-throughput systems). 4. Deep Dive into JSON (The Industry Standard) For traditional HTTP REST APIs, JSON (JavaScript Object Notation) is by far the most widely used serialization format — estimated to be used in ~80–90% of public APIs. >Use Cases: JSON is not limited to HTTP. It is also heavily used for configuration files, logging, data storage (NoSQL), and inter-service communication. Key Characteristics: Completely human-readable and easy to inspect. Language-independent (works with virtually every modern programming language). Lightweight and simple to work with. >Strict Syntax Rules: A JSON object must begin with { and end with }. All keys must be strings wrapped in double quotes (e.g., "name":). Values can only be: strings, numbers, booleans (true/false), null, arrays ([]), or nested objects ({}). No trailing commas, no comments, and no single quotes allowed. 5. The Backend Engineer’s Mental Model (OSI Layers) When data travels over the internet, it passes through multiple layers of the OSI model. As a backend engineer, you can abstract away most of this complexity. Your Focus — Application Layer: You only need to worry about the data at the Application Layer (HTTP + JSON). What Happens Under the Hood: >Your JSON is converted into data frames → IP packets → and finally into physical bits (0s and 1s) transmitted via cables, Wi-Fi, or fiber optics. >On the Receiving End: The network stack reassembles the bits back into the original JSON text before your server code ever sees it. >You don’t need to handle lower-layer conversions — the operating system and networking libraries manage that for you. This abstraction allows backend engineers to focus on business logic instead of low-level networking details. Youtube Video Link :- https://t.co/WiGt50meUq
- 37
@ibuildthecloud ·
One of the biggest recent issues of full stack dev was to blur the lines of client (browser) and server. Before JavaScript on the server the lines were self evident. With JavaScript going server side and the desire to use the same language for both we broke the boundaries and are paying the price.
- 38
- 39
@leeschmidt123 ·
Founders: This is why you shouldn't aim for 15k LOC per day and "let the tokens rip", despite how cool it sounds. Here's a real bug I encountered today: a page in our app was being pushed up by 50px or so, leaving a white strip at the bottom and cutting off the top of the page content. The vibe coded fix: 18 lines of unmaintainable, messy, duct taped javascript The real fix: changing ONE CSS property It's tempting to spend 15 seconds telling cursor to fix it (using both GPT 5.5 and Opus 4.7). Both models concluded that a reasonable fix was 18 lines of code, accessing the Radix viewport, calling getBoundingClientRect(), manually calculating scroll offsets, and replacing scrollIntoView with a manual scrollTo, and adding an additional dependency to a useEffect(). If you've spent any time as a dev prior to AI, you read this code and immediately know it's wrong. Worse, if you've never been a dev - you might think this looks normal! Next you have two choices: (a) you spend a few more minutes thinking in depth on your own or pushing back on the LLM, or (b) you commit, push, and deploy. The vibe coded fix is at the wrong layer, inside the individual page instead of the shared layout components. It leaves the same bug possible in every other page of the app - so would need to be duplicated on every page. It addresses the symptom, not the root cause. If your app becomes filled with this code, I can virtually guarantee you it will eventually become hard or impossible to continue building on (or the tokens required will become out of hand because changing something simple becomes hundreds or thousands of lines - this burns tokens and uses up context, requires more rounds of inference, etc). A messy and unmaintainable 18 lines of code doesn't sound bad. But the same slop magnified by 10-12 hours of prompting and vibe coding every day? Now you have an unmaintainable mess of code that eventually LLMs will be unable to work on, and neither will a human. If your startup's value is delivered in the form of a software product, this is a recipe for failure. Technical founders, technical CEOs, and experienced devs already know you need to read the code to avoid piles of slop that turn into immovable walls. For new founders, or anyone new to development or product building - if you want to build anything beyond a fun prototype or barely working MVP, you *need* at least one technical founder/cofounder, or you need to be learning real engineering.
- 40
- 41
@_vmlops ·
GOOGLE ENGINEERS WERE TIRED OF WRITING BASH so they built a tool that changed how developers script forever every developer has been there you start with a "simple" bash script 20 lines in, you're googling how to split a string 40 lines in, you're debugging why a variable has a space in it 60 lines in, you've rage-quit and called a python script from inside bash bash is powerful bash is also a special kind of torture → no JSON support → array handling that makes you question your career choices → error handling that silently fails and takes your sanity with it → string escaping that requires a computer science degree to understand google engineers felt this too so someone just... snapped. and built zx the idea was simple: what if you could write shell scripts in javascript...? that's it... real shell commands... real javascript... no glue code → async/await built in → full npm ecosystem access → try/catch for error handling like a normal human → JSON parsing without crying devops engineers, platform teams, and solo devs all said the same thing at the same time: "finally." the repo is google/zx. still actively maintained. still saving developers from bash-induced breakdowns daily the best tools aren't invented... they're born from frustration https://t.co/CETjGtIA8o
- 42
@ThePracticalDev ·
A backend team used AI to convert a Python class to JavaScript — and it failed. Not because the translation was wrong, but because the AI didn't know how to handle a 5GB zip file in the browser without crashing it. This dev did, using IndexedDB as an async workaround. { author: @OlumideSamuel_ } https://t.co/EUv88au50W
- 43
@MPorterBridges ·
Do you have a group of related data in your JavaScript? You can avoid multiple variables by using objects. JavaScript objects are one of the most important concepts to learn because they show up everywhere in real codebases. I’m talking APIs, frameworks, browser data, and more. If you’re new to JavaScript, you’ve likely bumped up against a problem organizing your variables, especially if you’re dealing with a lot of data. For example, if we wanted to create variables to manage the data that describes a car, it starts becoming a little messy - especially if we mean to keep this data all grouped together in some way. const make = "Chevrolet"; const model = "Malibu"; const year = 1999; const odometer = 10000; const used = true; const tirePsi = [100, 90, 95, 97]; A JavaScript object is a collection of related data and behavior, stored as key-value pairs. const objectName = { key: value }; A good visualization for a JavaScript object would be a box and label. The box being the object with the label containing detailed contents of the box. For example, this might be a box that’s shipped to a local bookstore. const bookBox = { multipleGenres: true, genre: ["non-fiction", "romance", "comedy"], amount: 3, value: "$500 CAD" }; This example highlights that the values in our key-value pairs can contain various types of data including booleans, arrays, numbers, strings. Beyond the example, our values can also be other objects and even functions (referred to as methods inside an object). If we rewind to our original example, we can take our car variables and place them inside a single object. const car = { make: "Chevrolet", model: "Malibu", year: 1999, odometer: 10000, used: true, tirePsi: [100, 90, 95, 97] }; Now that we know how to create an object with various data types, what about accessing that data? We can access the data inside an object in two ways - dot notation and bracket notation. Bracket notation being especially useful if the key is dynamic. Using our car example, let’s grab the year value using both of these methods: //Dot Notation console.log(car.year); //Bracket Notation console.log(car["year"]); And finally, what about updating our object’s data? Let’s say we need to correct our odometer reading from 10000 to 9999, we can update our key value pair by doing the following: car.odometer = 9999; And if we want to add a new key-value pair describing the transmission, we can do this: car.transmission = "automatic"; There’s a lot more we can do with objects in our JavaScript that we haven’t covered in this post, but I hope it was a good introduction for anyone getting their JavaScript coding journey started!
- 44
- 45
- 46
- 47
@did0f ·
LinkedIn was accused of testing thousands of Chrome extensions installed in users’ browsers. But the point is not “LinkedIn reads your computer.” The point is more technical: some extensions expose resources that a web page can try to load with JavaScript. If they respond, they become signals. One signal means little. Many signals can become browser fingerprinting. This is called resource probing. And the important part is that the issue goes beyond LinkedIn. Any page running JavaScript can try to observe technical signals from your browser. Not always. Not everything. No magic. But enough small signals can make a browser recognizable.
Watch video
- 48
@Dominus_Kelvin ·
Stop navigating with onClick={() => router.push(...)}. Every time you do, you're opting out of browser behavior and signing up to reimplement it yourself. You are sacrificing: cmd-click open in new tab accessibility browser semantics prefetching SEO for absolutely no reason. HTML solved this before JavaScript existed. If it goes somewhere, it's a link.
- 49
@ThePracticalDev ·
What if the hardest bug in the room is the person sitting beside you? This dev built a retro browser game around JavaScript ticket-fixing, social pressure, and the gap between visible tests and what production actually does to your assumptions. { author: @johnmunn5 } https://t.co/yr51fcgx58
- 50
@donnfelker ·
This weekend I removed a substantial amount of JavaScript from one of my Rails applications. I replaced all the JavaScript with Turbo frames and Turbo streams. In the end, I gained more testability, an easier development experience, and less context switching than I or the AIbagent had to do previously.
Best Tweets by Topic