Can we please stop labeling JSX syntax as "React"?
JSX is not exclusive to
@reactjs
.
For example,
@solid_js
,
@preactjs
,
@stenciljs
, and other libs compile JSX to their own output.
👇Please vote!
These are great points in general, but for example I am not planning to work on React projects again because React is legacy: not only has newer better tech been proven, React even still ships only CommonJS modules that do not work in browsers and require a build!
React is
The loading sequence of 𝕏 and the importance on
@nextjs
RSC, Streaming, and Partial Pre-rendering.
Today, x.com is a React-powered SPA that renders and fetches data on the client.
Let's go through what the user sees when they open the site. It starts with… 𝕏
I love buildless web apps with vanilla JavaScript modules.
I despise apps made a year or two ago being broken today because popular build tools had a break in some dependency.
As I get older, the more valuable time is, the more expensive build tools are.
Do not use
@coinbase
!
They are saying the USD Coin address they originally gave me is not mine, and that $6,600 in funds that were sent to it do not belong to me or coinbase.
They either stole my money, or they have serious bugs.
@CoinbaseSupport
@CoinbaseWallet
@CoinbaseExch
I just released element-behaviors 3.1 which introduces an `elementBehaviors.whenDefined()` property similar to `customElements.whenDefined()`.
Element-behaviors allows applying behaviors onto HTML elements.
Here's the release note including a demo:
@dhh
HTTP/2 multiplexing got removed in Chrome. It is not more efficient than bundling. HTTP/*3* has the fix, and may just prove bundling a thing of the past. But no one has tried an HTTP/3 multiplexing esm server yet, as far as I know. Node, Deno, and Bun don't even have HTTP/3 yet.
One reason I really like
@solid_js
is not because it is great tech, but the community is excellent, welcoming, and willing to talk openly and evenly with anyone about any other framework including "competitors" like
@reactjs
,
@preactjs
,
@vuejs
,
@sveltejs
,
@angular
, and friends.
Tooling fatigue no longer! I've recently converted various projects into simple vanilla JS Module web apps, removing fiddly tooling.
In the Lume 3D HTML project, , demos in the docs are vanilla JS modules. F.e. the live demo here:
If you write Custom Elements with Shadow DOM, or generally any system with style scoping similar to Shadow DOM, that problem basically goes away. I haven't that problem in *years*.
First, someone will change .previous__button in some other UI and break this one and nobody will know until it’s in production, and maybe not for a while.
@dgkimpton
@RyanCarniato
@BenJ_Ayc0
Option 2 also does not catch errors. The consistency with async/await is much more desirable. Always prefer async await unless you really need otherwise, and be ready to catch all cases and make your own consistency with option 2. Saving on a microtask is not worth it.
I started prototyping a buildless (no build needed) way to write Custom Elements declaratively in `.html` files. Codepen in the next post.
It is similar to Vue or Svelte files that have HTML and CSS, with JS being an optional feature only when needed.
@EisenbergEffect
I'll share something I've been building with Custom Elements!
HTML elements for high-performance animated experiences powered by WebGL (soon WebGPU):
(Try inspecting the elements in devtools! ✨)
I couldn't find an aria.css framework.
Imagine this! Provide cool CSS-based UI features based on ARIA attributes. It would be similar to Bootstrap, but focused on aria attributes instead of class names.
@AminYa74
@npmjs
Yeah it said something about needing --force to delete an entire package. But I was trusting the docs. It said to use <package-name>@<version> to unpublish a specific version and that's exactly what I did!
Release day for
@solid_js
devtools!
0.21.0 adds an essential way of inspecting reactivity: a Dependency Graph — it will display current (direct and indirect) sources and observers of the selected signal or computation
I'm working on Lume: 3D HTML elements (). I'm debating on the naming of the elements (a dash in the name is required, leading dash is not allowed, trailing dash is allowed).
Which naming pattern do you like more?
Oh my goodness, it exists! pico.css! A CSS framework with styling guided by ARIA attributes.
It is classless as much as it can be, and setting ARIA attributes results in nifty visual changes to your elements! Check it out:
Imagine you can write apps with heavy CPU processing in
#TypeScript
, compile them to
#WebAssembly
, and have the performance gains for the processing far outweigh the slightly higher cost of DOM manipulation. That's what these benchmarks tell us is possible.
#webdev
#javascript
Rust WASM frameworks have been making some good progress in the last few months on rendering performance. Adopting Signals and Fine-Grained reactive rendering.
They've almost caught up to
@solid_js
!
(vanilla, Solid, Svelte, and React included as JS comparisons)
Dependency-tracking auto-rerunning reactivity (reactivity with "signals") was invented before
#Knockout
,
#Meteor
,
#Vue
,
#Svelte
,
#Surplusjs
,
#Solidjs
,
#Preact
Signals, etc. Probably in a non-JavaScript context.
Would be interesting to find out exactly how they came to be.
Nerimity is stunning! This web-based Discord alternative, written with
@solid_js
for frontend reactivity and templating, is already a lot better than Discord's own mobile web app!
And written by a single person in less than a year.
Check Nerimity out and follow
@SupertigerDev
!
Typo? Did you mean "React components"? 😀
#SpaceX
(leader in humanity's space faring future) crew UIs are made with
#CustomElements
, and the UIs are incredible I must say!
👀👉
@joinmastodon
's UI is getting quite nice compared to Twitter/
@X
.
I like how posting is separate from navigation on desktop, making it really easy to navigate without having to discard/save your post, f.e. to gather links. So convenient!
Also no spam!
Ever since I switched to plain JavaScript modules (ES modules), I've never had duplicate dependency problems in web apps.
Import maps are great! The dependency graph is easy to control. The optional tooling is also advancing, and import maps are on the roadmap for Node.js.
It's that time again. The State of JS survey is up.
Filling this out is a great way to support and bring recognition to your favorite projects, resources, and people in this community.
Language I dislike: TypeScript
Language I begrudgingly respect: TypeScript
Language I think is overrated: TypeScript
Language I think is underrated: TypeScript
Language I like: TypeScript
Language I love: TypeScript
Language I dream of writing in: TypeScript
Language I dislike: TypeScript
Language I begrudgingly respect: Lua
Language I think is overrated: Rust
Language I think is underrated: Flow (soon ReScript v11)
Language I like: HTML
Language I love: Nushell
Language I dream of writing in: Futhark
I made a
@github
repo where I'll write live code demos with explanations written in
#Markdown
. This is neat because with
#Docsify
and
#DocsifyThis
we can render the content without a build tool!
Here's the repo,
and the output:
This is so incredibly awesome. If you're into
#WebGL
at all, you should follow Kenneth and watch his open source infinite universe unfold before your eyes!
#webdev
#javascript
#threejs
Some late night ocean shader exploration, using another sphere intersection / ray marching technique instead of an ocean sphere mesh... it's asking for wavy normal maps. Now it's possible to go underwater!
#ScreenshotSaturday
|
#threejs
|
#gamedev
Have you seen Flow Browser yet? Flow's graphical rendering engine is faster than Chrome, Safari, Firefox, in benchmarks! Flow has a new engine from scratch using modern game engine techniques powered by the GPU.
New in Flow 6.13:
@discord
now works well.
Improvements to SVG text positioning.
Fixes for SVG embedded in HTML.
Navigator.sendBeacon() now supported.
Fixes to contenteditable space handling, if not preserving whitespace.
All the things people are making with web! Can the "native" IDEs keep up? Pretty soon we're gonna have things like Blender in a browser written in HTML/CSS/JS/TS!
@RyanCarniato
Seems to me like so much discussion, thought, time, resources, companies' employee money, poured into an idea that doesn't even need to exist in libs like Solid.js for example.
A patch to patch the patches.
The more I use Svelte, the more I don't like it because the JavaScript needed to interop with anything outside a Svelte component is worlds apart from JavaScript inside a Svelte component.
Not mentioned is also that we get an out-of-the-box dev/debug experience in browsers' devtools with
#CustomElements
(f.e. <album-data> in the left screenshot).
Other component libs (React, Vue, Svelte, Solid.js, etc) have to re-create custom devtools (for every browser!).
Another stab at correctly occluded interactive HTML inside of
@threejs
with R3F
Here: A fully interactive instance of
@tldraw
behaving like a normal plane with shadows at 60fps on iOS
Based on an old pen by
@trusktr
Demo:
Inspo:
@areinet
@cramforce
Also isn't JSX a front-end type of thing mainly? It would be a language feature that people writing server apps or other non-UI apps would never touch.
Is there any existing language feature like that?
New in Flow 6.11:
- Support for
@CodePen
's editor. Most of CodePen itself renders correctly, though Pens vary.
- SVG Markers, plus many previously-missing SVG interfaces.
- CSS transition support for CSS filters.
- Numerous CSS grid fixes.
If you write Custom Elements with Shadow DOM, or generally any system with style scoping similar to Shadow DOM, that problem basically goes away. I haven't that problem in *years*.
Although this is about Solid, it's also about signals and effects in general, a very useful pattern even outside of Solid!
Signals and effects clean up your code compared to reactive systems that are callback-per-value (such as event emitters).
Apple Vision Pro is the first VR/AR headset that can totally replace your static computer monitors.
And its gonna help your posture, especially your neck! You can put your work space windows in any directions. You can go lay on a couch, and place things floating above you, while
Custom Elements Language Server is gonna get a banger of an update! 🎉
Until now the filetype support has been pretty much just template literals. What if we could change that?
In the next week, I'll be releasing a version with filetype support for most major systems! 🤩
The seemingly simple syntax entices you at first, but making something complex becomes a lot more complicated than with a tool like Solid.js with *actually true* reactivity that requires no compilation and works anywhere (inside or outside of a component).
If you've heard of Meteor.js but still haven't tried it, try it!
To this day, there is no JavaScript full stack framework that accelerates small projects as much as Meteor does.
Although newer alternatives might have similar features, they are not as cohesive out of the box.