sheek.org
My latest attempt at reinventing the wheel (in JavaScript, naturally). I've seen the future of JS frameworks, and it's...more frameworks. This one will be slightly different (lol). Come watch the inevitable train wreck
🟢Leave your thoughts about anything
489 posts
207 followers
185 following
Regular Contributor
Active Commenter
comment in response to
post
- single customizable #namespace for "framework" stuff
- searching for `$.` will return all places where it's used
- framework code goes "around" your code and not "inside it"
- all the #jsx is isolated inside single-function-export .jsx files
- vanilla #CSS files
- the rest is just javascript™
comment in response to
post
npm modules will get resolved/bundled (even if the package itself doesn't have a build). You get full sourcemap support (debug the npm module's src code) in dev and it gets minified for you in prod
comment in response to
post
Elements can just be a single #JSX file that exports a function if you just need to render the props passed to it - functional
The js class is only needed for "stateful" elements
Elements are #lazy-loaded. When you load an element its template/css is preloaded on the same request
no HTTP waterfall
comment in response to
post
Yeah, I lean toward that too. Especially as things get a bit more involved and move past simple counters and the like
Thanks for wanting to contribute ❤️
The code is not currently available because there's a ton of churn on my end. Things will slow down towards the next few weeks and I'll share it
comment in response to
post
🌶️ take because `this` is considered ambiguous by some peeps and it's associated with ES6 Classes and those are wrongly associated with OOP so... it's "not functional"
You don't see much `this` use in a lot of popular frontend codebases (my observation)
the answer to 2 is in the other reply above
comment in response to
post
`this` is a reference to an object or undefined
calling a function creates a new "execution context"
The value of `this` there is determined dynamically at that time
I like `this` because its value is decided by "how" the function is called
comment in response to
post
Things are getting to the point where I'm starting to enjoy creating #UI with this thing
state, computed props, routing, lifecycle, scoped styles and jsx for the templates and live-reload all wrapped up in a web component kind of all work together in a very nice way🥷
comment in response to
post
Ignore the 462kb in the "resources" thing. I still need to figure out font loading.
JS size is around 12kb for the inital load, then 1-2kb for every route you load after
Here's the full code for the "app" including the server RPC stuff for `get-blog-post-by-id` (the video shows data fetching)
comment in response to
post
It shares a few things with React like JSX but it's not React. It's a new thing that I've been working on
comment in response to
post
It's outside the class because we want only run it once (when the module is imported) and then have those styles (which are just a CSS string) apply to all instances of the element
It's possible to move it inside a static block inside the class like so
```
static {
css`...`
}
```
comment in response to
post
The css part is a tagged template developer.mozilla.org/en-US/docs/W...
where you put it doesn't matter so much
it can go before or after the class or even in a separate file. You write vanilla CSS in it and it adds that CSS as a <style> tag. It's just an option if you want to have things nearby
comment in response to
post
With the 11kb loaded, you pretty much have everything you need "framework-wise" including the #RPC module to call server methods. The only additional code would be your routes/components and any vanilla libs you want to use - all lazily loaded #esmodules
comment in response to
post
There's now 0 globals or implicit imports and you get a 1:1 sourcemap of the code as authored (added inline via a flag)
Browser errors will show in authored code, not the transformed/uglified version. #sourcemaps are only added in dev
The 11kb transfer size from above is the total "framework" tax
comment in response to
post
#3 happened after they got called out for the "website" not having any updates or content
Even then... it's just a Twitter feed
Throughout all of the above (1,2, and 3) the canonical link on the page always pointed to the Twitter account
```
<link rel="canonical" href="https://x.com/doge">
```
comment in response to
post
A (count) > B > C > D (lookup count)
All you need to do is call `this.getParentProp` and pass the name of the prop you want like
`this.getParentProp('count')`
It will transverse up the parents and find it. You will get a value, not a reference. Changing the value won't mutate the parent value.
comment in response to
post
It's fully implemented as an internal thing. You still use `this.querySelector` and the like inside the elements (web components) and all other Real DOM™ APIs. In fact, you should not even notice a difference at all and the syntax is exactly the same as before.
Plus, it's very tiny at 1.4kb min+br
comment in response to
post
Heya Beth 👋
MDN is the gold-standard and that's already linked in the replies
heard great things about htmlforpeople.com (mostly on HTML but is a great foundation)
also heard great things about www.theodinproject.com (wider coverage and paths)
(not affiliated with any of those)
Good luck!
comment in response to
post
subroutes can be separate fully featured routes. Essentially the vast majority of state is in the URL. You can optionally define them all in one file
The "tabs" in the video are plain <a> tags with hrefs so stuff like "open in new tab" still works
comment in response to
post
Thanks! Yeah, I agree not everything needs to be a SPA and I'm a big fan of Astro too 💯
I'm scratching my own itch with this so it's mostly "not invented here" stuff. That said, I'm using Node, and a few packages
comment in response to
post
Because I can
comment in response to
post
Lies 👀
comment in response to
post
"Jetstream" is a service that Bluesky runs. You create a websocket client and connect to it
It's designed to be used when you don't want the "full" firehose and only care about specific types of "events"
Plus jetstream is already serialized as JSON unlike the "Firehose" which sends encoded binary