10 ms·

He does it "the right way™". Use the platform. Don't use any framework or generic library. Go straight to the point and code what you need, when you need it. Do

He does it "the right way™". Use the platform. Don't use any framework or generic library. Go straight to the point and code what you need, when you need it. Don't minify or bundle anything, and let the people who are learning and courious a straightforward way to connect the dots, without forcing them into a github repository with 90% of the code unrelated to the thing and existing just to glue 1000 pieces written by 10000 people together. Every essay by Bartosz is so top-notch and a such breath of fresh air! He gives me hope in humanity and I am immensely grateful for what he does.

10000truths 4y ago
I mostly agree with you, but I don’t mind minification when appropriate, as it can serve a functional purpose with tangible end-user-friendly benefits (less downloaded over the network = faster response times). But if you want to be friendly to the tinkerers, you could always host both the *.js and *.min.js versions, and have the webpage just pull the latter - anyone who wants the unminified source can remove the “min” part from the URI, while the majority of end users will still benefit from pulling the minified js.
- operator-name 4y ago
  That's simply not a very well followed (and thus discoverable) standard. Especially for hand crafted code, minifying functions and variable names only obfuscates what is written and minifying whitespace often only has minimal benifits. In practice this seems to be a lost cause, and links to alternatively hosted source code is more common. Sadly this makes is simple to introduce subtle, harmful differences between the source and what is hosted.
  - NoSorryCannot 4y ago
    The pattern is extremely common on CDNs that serve JS.
- monocasa 4y ago
  It's hard to guess that extra assets exist on the server if they aren't being pulled down by the site itself. Seems better just to have premassaged source available in a repo somewhere, or called out on the page itself for a downloaded archive.
- kevincox 4y ago
  A discoverable version would be to include source maps that link to the original as well. That way a browser console will automatically pull up the original.
- klabb3 4y ago
  People measure minification in byte size (unfortunately I guess you're charged by CDNs by that metric too?). In reality everything text based compresses really well over the wire. In either case, importing tons of libs left and right is going to vastly out-size any minification, yet most fe devs are very liberal with dependencies. Minification strips comments too though, which may be undesirable in many cases.
- throwaway2214 4y ago
  minified js is not greatly smaller than gzipped js, I think the whole minification thing is a swing and a miss and now we have to deal with source maps and shit, and build pipelines and etc $ ls -la -rw-r--r-- 1 jack 197609 330905 May 4 22:56 watch.js -rw-r--r-- 1 jack 197609 152172 May 4 22:55 watch.min.js $ gzip watch.js $ gzip watch.min.js $ ls -la -rw-r--r-- 1 jack 197609 43690 May 4 22:56 watch.js.gz -rw-r--r-- 1 jack 197609 32507 May 4 22:55 watch.min.js.gz
  - MrDOS 4y ago
    Of surprise to no one, Brotli does better on both: $ ls -l *.js -rw-r--r-- 1 mrd staff 330904 5 May 01:04 watch.js -rw-r--r-- 1 mrd staff 152172 5 May 01:10 watch.min.js $ brotli watch.js $ brotli watch.min.js $ ls -l *.br -rw-r--r-- 1 mrd staff 34461 5 May 01:04 watch.js.br -rw-r--r-- 1 mrd staff 27122 5 May 01:10 watch.min.js.br If I were serving this content, and if my web server and all of my target browsers supported Brotli, I'd be somewhat more content to ship an un-minified + Brotli-compressed file than an un-minified + gzip'd one. I'm sure it's some rule of thumb stuck in my head from the Web 2.0 era, but a JavaScript payload in excess of 40KB crosses some warning line in my head. (Probably 40KB / ~4KB/s throughput on a good dial-up connection = 10s transfer time, about the longest you'd want to wait for even a pretty spiffy page to load.)
    - MrDOS 4y ago
      > I'd be somewhat more content to ship an un-minified + Brotli-compressed file than an un-minified + gzip'd one. Whoops, typo: I meant to say that I'd be somewhat more content to ship an un-minified + Brotli-compressed file than a minified + gzip'd one. That is, I'd be more happy to serve the 34.4KB watch.js.br than the 32.5KB watch.min.js.gz.
  - selcuka 4y ago
    True, but it also removes the comments and the whitespace, leading to slightly better performance and memory usage. There are also less bytes to gzip on the server side.
Liron 4y ago
We need a ciechanow.ski explainer for how ciechanow.sky explainers are built
- jhallenworld 4y ago
  Where are the comments in his code? :-)
WHA8m 4y ago
He made this in the spirit of watch making. Super impressive and interesting website!
phailhaus 4y ago
The tradeoff is that there is basically nobody else that has the expertise or time to do the same thing at a similar level of polish. We're not going to see more Ciechanowski-level posts unless new libraries and frameworks make it more accessible.
- javajosh 4y ago
  Maybe, maybe not. We should do the experiment, though.
  - phailhaus 4y ago
    What experiment do you mean?
- Handytinge 4y ago
  We definitely won't if people are taught that frameworks are the only option and never allowed to just write a full program on their own.
  - phailhaus 4y ago
    Nobody stopping you from not using a framework, and yet there is basically nobody else at Ciechanowski's level. It's not going to happen, you can't expect everyone to become a hardcore webgl expert (have you tried?). If we want more cool interactive visualizations, we have to make it easier. Otherwise, we're stuck waiting for those with the time and expertise to pull it off.
AceJohnny2 4y ago
> He does it "the right way™". Use the platform. Don't use any framework or generic library. Hard disagree. "Use What's Right For You™". Of course there is value in understanding the platform beneath your framework or generic library, but that's just an extension of "understand what you're using and why".
valtism 4y ago
I strongly disagree that this is "the right way". I think that the platform provides low level primitives that are _designed_ to have abstractions built upon them. Doing it like this has the potential to be the most performant, but it does so in the same way as writing your programs directly in assembly is potentially performant. I also don't think that the source code is particularly readable for me, and contains lots of magic numbers and very imperative code. I would personally find it a lot more readable if it was written in some sort of declarative way using a library, even if I have to look at a GitHub repo instead of view source.
- swayvil 4y ago
  On a scale of 1 to 10 how strongly are we talking here?
  - plebianRube 4y ago
    9.5 Your PR will be held up for at least a month with the back and forth.
- the_cat_kittles 4y ago
  it depends if you are doing something to get paid, or to last, or to be really good. only in the first case do i ever consider a heap of abstractions
  - noitpmeder 4y ago
    This is so backwards.
    - the_cat_kittles 4y ago
      it really depends on what your doing mate!
  - kaba0 4y ago
    Abstraction is the only thing that makes any of our advancements possible. Not even the simplest of math theses could be proves without a “framework” of relevant lemmas, nor could you write even a single hello world without the layers upon layers of abstractions written carefully over the decades. Sure, there is also bad abstraction, but the problem is the bad part, not the concept itself. Without abstractions you wouldn’t be able to read a text stored on a remote computer with accompanying style information displayed the same on both of our devices and with embedded 3D graphics doing the same thing on vastly differing devices be it a top of the line GPU or a simple low-end phone. Is it not abstraction?
Cthulhu_ 4y ago
> Don't minify or bundle anything Yeah in this case it doesn't need to; there's no extraneous or unused code or documentation blocks, and gzip (and comparable) compression is good enough, minification doesn't actually reduce the downloaded code size by that much.
ivanhoe 4y ago
the obvious downside is that it's a lot of work and takes a lot more time... so it might be "the right way™" for some cases, but it's definitely not a rule of thumb...

10000truths 4y ago

I mostly agree with you, but I don’t mind minification when appropriate, as it can serve a functional purpose with tangible end-user-friendly benefits (less downloaded over the network = faster response times). But if you want to be friendly to the tinkerers, you could always host both the *.js and *.min.js versions, and have the webpage just pull the latter - anyone who wants the unminified source can remove the “min” part from the URI, while the majority of end users will still benefit from pulling the minified js.

operator-name 4y ago
That's simply not a very well followed (and thus discoverable) standard. Especially for hand crafted code, minifying functions and variable names only obfuscates what is written and minifying whitespace often only has minimal benifits. In practice this seems to be a lost cause, and links to alternatively hosted source code is more common. Sadly this makes is simple to introduce subtle, harmful differences between the source and what is hosted.
- NoSorryCannot 4y ago
  The pattern is extremely common on CDNs that serve JS.
monocasa 4y ago
It's hard to guess that extra assets exist on the server if they aren't being pulled down by the site itself. Seems better just to have premassaged source available in a repo somewhere, or called out on the page itself for a downloaded archive.
kevincox 4y ago
A discoverable version would be to include source maps that link to the original as well. That way a browser console will automatically pull up the original.
klabb3 4y ago
People measure minification in byte size (unfortunately I guess you're charged by CDNs by that metric too?). In reality everything text based compresses really well over the wire. In either case, importing tons of libs left and right is going to vastly out-size any minification, yet most fe devs are very liberal with dependencies. Minification strips comments too though, which may be undesirable in many cases.
throwaway2214 4y ago
minified js is not greatly smaller than gzipped js, I think the whole minification thing is a swing and a miss and now we have to deal with source maps and shit, and build pipelines and etc $ ls -la -rw-r--r-- 1 jack 197609 330905 May 4 22:56 watch.js -rw-r--r-- 1 jack 197609 152172 May 4 22:55 watch.min.js $ gzip watch.js $ gzip watch.min.js $ ls -la -rw-r--r-- 1 jack 197609 43690 May 4 22:56 watch.js.gz -rw-r--r-- 1 jack 197609 32507 May 4 22:55 watch.min.js.gz
- MrDOS 4y ago
  Of surprise to no one, Brotli does better on both: $ ls -l *.js -rw-r--r-- 1 mrd staff 330904 5 May 01:04 watch.js -rw-r--r-- 1 mrd staff 152172 5 May 01:10 watch.min.js $ brotli watch.js $ brotli watch.min.js $ ls -l *.br -rw-r--r-- 1 mrd staff 34461 5 May 01:04 watch.js.br -rw-r--r-- 1 mrd staff 27122 5 May 01:10 watch.min.js.br If I were serving this content, and if my web server and all of my target browsers supported Brotli, I'd be somewhat more content to ship an un-minified + Brotli-compressed file than an un-minified + gzip'd one. I'm sure it's some rule of thumb stuck in my head from the Web 2.0 era, but a JavaScript payload in excess of 40KB crosses some warning line in my head. (Probably 40KB / ~4KB/s throughput on a good dial-up connection = 10s transfer time, about the longest you'd want to wait for even a pretty spiffy page to load.)
  - MrDOS 4y ago
    > I'd be somewhat more content to ship an un-minified + Brotli-compressed file than an un-minified + gzip'd one. Whoops, typo: I meant to say that I'd be somewhat more content to ship an un-minified + Brotli-compressed file than a minified + gzip'd one. That is, I'd be more happy to serve the 34.4KB watch.js.br than the 32.5KB watch.min.js.gz.
- selcuka 4y ago
  True, but it also removes the comments and the whitespace, leading to slightly better performance and memory usage. There are also less bytes to gzip on the server side.

Liron 4y ago

We need a ciechanow.ski explainer for how ciechanow.sky explainers are built

jhallenworld 4y ago
Where are the comments in his code? :-)

WHA8m 4y ago

He made this in the spirit of watch making. Super impressive and interesting website!

phailhaus 4y ago

The tradeoff is that there is basically nobody else that has the expertise or time to do the same thing at a similar level of polish. We're not going to see more Ciechanowski-level posts unless new libraries and frameworks make it more accessible.

javajosh 4y ago
Maybe, maybe not. We should do the experiment, though.
- phailhaus 4y ago
  What experiment do you mean?
Handytinge 4y ago
We definitely won't if people are taught that frameworks are the only option and never allowed to just write a full program on their own.
- phailhaus 4y ago
  Nobody stopping you from not using a framework, and yet there is basically nobody else at Ciechanowski's level. It's not going to happen, you can't expect everyone to become a hardcore webgl expert (have you tried?). If we want more cool interactive visualizations, we have to make it easier. Otherwise, we're stuck waiting for those with the time and expertise to pull it off.

AceJohnny2 4y ago

> He does it "the right way™". Use the platform. Don't use any framework or generic library. Hard disagree. "Use What's Right For You™". Of course there is value in understanding the platform beneath your framework or generic library, but that's just an extension of "understand what you're using and why".

valtism 4y ago

I strongly disagree that this is "the right way". I think that the platform provides low level primitives that are _designed_ to have abstractions built upon them. Doing it like this has the potential to be the most performant, but it does so in the same way as writing your programs directly in assembly is potentially performant. I also don't think that the source code is particularly readable for me, and contains lots of magic numbers and very imperative code. I would personally find it a lot more readable if it was written in some sort of declarative way using a library, even if I have to look at a GitHub repo instead of view source.

swayvil 4y ago
On a scale of 1 to 10 how strongly are we talking here?
- plebianRube 4y ago
  9.5 Your PR will be held up for at least a month with the back and forth.
the_cat_kittles 4y ago
it depends if you are doing something to get paid, or to last, or to be really good. only in the first case do i ever consider a heap of abstractions
- noitpmeder 4y ago
  This is so backwards.
  - the_cat_kittles 4y ago
    it really depends on what your doing mate!
- kaba0 4y ago
  Abstraction is the only thing that makes any of our advancements possible. Not even the simplest of math theses could be proves without a “framework” of relevant lemmas, nor could you write even a single hello world without the layers upon layers of abstractions written carefully over the decades. Sure, there is also bad abstraction, but the problem is the bad part, not the concept itself. Without abstractions you wouldn’t be able to read a text stored on a remote computer with accompanying style information displayed the same on both of our devices and with embedded 3D graphics doing the same thing on vastly differing devices be it a top of the line GPU or a simple low-end phone. Is it not abstraction?

Cthulhu_ 4y ago

> Don't minify or bundle anything Yeah in this case it doesn't need to; there's no extraneous or unused code or documentation blocks, and gzip (and comparable) compression is good enough, minification doesn't actually reduce the downloaded code size by that much.

ivanhoe 4y ago

the obvious downside is that it's a lot of work and takes a lot more time... so it might be "the right way™" for some cases, but it's definitely not a rule of thumb...