Keith Cirkel
keithcirkel.co.uk · Personal blog · on HN since 2011
Keith Cirkel is a JavaScript developer who writes on npm scripts as a build tool, CSS, color, and web components.
What HN saysCommenters praise his npm-as-build-tool post for replacing Grunt and Gulp, and his deep-dive article on color use.
59HN people shared it
35linked it in comments
35stories submitted
539story points
7 months agolast shared
2011people per year2026
Most-shared posts
- 1How to Use NPM as a Build Tool17 people · 38 points · first shared 2014 · 3 comments on HN
- 2Why we should stop using Grunt and Gulp6 people · 169 points · first shared 2014 · 106 comments on HN
- 3Too Much Color6 people · 10 points · first shared 2026 · 1 comments on HN
- 4What's My ΔE(OK) JND?6 people · 6 points · first shared 2026 · 1 comments on HN
- 5CSS Classes Considered Harmful5 people · 116 points · first shared 2022 · 119 comments on HN
- 6I don't have time to learn React – Keith Cirkel3 people · 11 points · first shared 2024 · 3 comments on HN
- 7I-HTML, an inline-HTML import element3 people · 4 points · first shared 2024 · discussion on HN
- 8Jwerty - Awesome handling of keyboard events in JS3 people · 2 points · first shared 2011 · discussion on HN
- 9Metaprogramming in es6 symbols3 people · first shared 2017
- 10How to Use NPM as a Build Tool (2014)2 people · 3 points · first shared 2017 · discussion on HN
- 11JavaScript Metaprogramming in ES6 (Part 3): Proxies2 people · 2 points · first shared 2016 · discussion on HN
- 12Metaprogramming in ES6: Symbols and why they're awesome1 people · 104 points · first shared 2015 · 43 comments on HN
- 13The ups and downs of the HTTP header1 people · 58 points · first shared 2013 · 33 comments on HN
- 14What's my JND? – a colour guessing game1 people · 3 points · first shared 2026 · 2 comments on HN
- 15CSS or BS?1 people · 3 points · first shared 2026 · discussion on HN
What HN people wrote when they linked it
jaffathecake · 2026-03-10
The associated deep-dive article is great https://www.keithcirkel.co.uk/too-much-color/
chatmasta · 2024-09-05
You can achieve some hacky form of operator overloading by implementing the “well-known” Symbol.toPrimitive, and exploiting the fact that the addition operator coerces its operands to either a Number or String.
It won’t be perfect but maybe you can do something useful with it. Symbols in general are a really powerful tool that almost enable meta-programming in JS. I searched “Symbol” in your repository and didn’t see any results, so if you aren’t familiar with them, I recommend taking the time to read up on how you can use them.
See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Glob…
And this 2015 blog: https://www.keithcirkel.co.uk/metaprogramming-in-es6-symbols/
e12e · 2020-07-01
A little npm actually goes quite a long way:
https://www.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/
https://github.com/keithamus/npm-scripts-example
Although you should probably prefer yarn these days (concepts should mostly transfer over).
As for tranformations/transpiling/minifying... You could use webpack - it is popular, but quite complex. I've found this a decent introduction to understand how it works:
https://www.freecodecamp.org/news/creating-a-production-ready-webpack-…
The good part about going that route, is that is quite explicit... You might get away with throwing out explicit in favour of convention - by using parcel instead:
https://github.com/parcel-bundler/parcel
(looks like gh readme is currently best entry point for 2.0 docs).
fulldecent2 · 2020-02-08
Here is my list of solo developer blogs. Usually they are on topic. This does not include personal blogs I follow that happen to be developers.
@mdo (Bootstrop) - http://markdotto.com/
Keith Cirkel - https://www.keithcirkel.co.uk/
Coding – Corbin's Treehouse - https://www.corbinstreehouse.com/blog
Aaditya Purani – Ethical Hacker - https://aadityapurani.com/
Ben Balter - http://ben.balter.com/
fulldecent - https://privacylog.blogspot.com
Orange - http://blog.orange.tw/
Cocoa with Love - http://www.cocoawithlove.com/
Mark Otto - http://markdotto.com/
Moxie Marlinspike's Blog - http://www.thoughtcrime.org/blog/
hueniverse - http://hueniverse.com/
armandososa · 2016-04-05
Here: http://blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/
I don't hate grunt, I used to love it and used it for all my projects. And then I started using gulp.
But after reading this article I just use npm script 99% of the time. I don't know if it is better over all, I just prefer it over grunt/gulp.
davidpronk · 2016-03-05
After reading this article on NPM as a build tool I immediately gave up on Gulp and Grunt. Highly recommended!
http://blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/
Wintamute · 2016-01-20
This. A thousand times this. Embrace the unix philosophy of small tools and npm scripts and watch your baroque frontend build process with all its plugin dependencies reduce to amazing simplicity. Here's another good write up with some significantly more useful examples:
http://blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/
> Package.json also doesn’t support variables
Not sure what he means by this, npm scripts do support env vars from package.json config values:
https://docs.npmjs.com/misc/scripts#configuration
djokkataja · 2015-12-29
You can use whatever you want to build--the author of the post didn't offer any reasons not to use grunt/gulp/broccoli; they just said they don't recommend it. If those tools are currently doing what you want, then it's a waste of your time to switch to another system.
That said, if you really want to switch and you're using npm (since you mentioned JavaScript), you can set up a dead simple build system just with bash/npm/JavaScript: http://blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/
Daiz · 2014-12-09
The author has a follow-up post that addresses a lot of things that are also popping up in the comments here: http://blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/
EDIT: Also a HN submission by the author himself: https://news.ycombinator.com/item?id=8721929
edraferi · 2014-12-09
The author addresses this issue directly in his follow up post [1]. He describes two ways to get watch functionality when using NPM as a build tool.
First, "most tools facilitate this option themselves - and usually are much more in tune with the intricacies of the files that should be listened for. For example Mocha has the -w option, as does Stylus, Node-Sass, Jade, Karma, and others." These options are simply invoked when the tool is called from NPM.
Second, "not all tools support this, and even when they do - you might want to compose multiple compile targets into one task which watches for changes and runs the whole set. There are tools that watch files and execute commands when files change, for example watch, onchange, dirwatch, or even nodemon."
[1] http://blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/
footydude · 2026-03-20
0.0042 apparently https://www.keithcirkel.co.uk/whats-my-jnd/?r=AaYkKP___-u-
There's was 2 or 3 where i had no idea, guessed and was a way off.
There's was 1 where i did a hail Mary and got it. It was interesting how some even towards the end were really obvious and others were really subtle - I'd say I did better with purple tones and worst with the blue / greys.
kalaksi · 2026-03-20
https://www.keithcirkel.co.uk/whats-my-jnd/?r=AG4mKP____6_
"This shouldn't be possible. I'm not saying that you cheated, but not not saying that."
0.0011. The quote seems a bit hyperbolic. There were maybe 2-3 that I didn't see and missed. 1-2 that I didn't hit perfectly but close enough. Display probably affects results (but didn't change any settings for this). I have a Dell IPS. I also moved my head around a bit, felt natural while trying to discern the colors.
I do have a good vision (including color). Reminds me of the other color-game where you order some colored boxes to form a spectrum.
Edit: just tried hard mode and got 0.0084. Missed maybe 3 that I couldn't see. Usually some magenta or blue colored. Grey and red / brown seem to be the easiest.
esperent · 2026-03-20
0.0032
I'm on a Vivo X300 pro in a dim room, max brightness. Some of these looked impossible but then suddenly I'd see the line.
https://www.keithcirkel.co.uk/whats-my-jnd/
#WhatsMyJND
xiconfjs · 2026-03-20
What's My JND? 0.0032
Can you beat it? https://www.keithcirkel.co.uk/whats-my-jnd/?r=AUEjKP___831
#WhatsMyJND
I need a better display for sure :)
kirillcool · 2026-03-20
0.00057 here - https://www.keithcirkel.co.uk/whats-my-jnd/?r=ADonKP_____7
I do work with colors pretty much every day as a UI engineer
cratermoon · 2026-03-18
What's My JND? 0.0089
Can you beat it? https://www.keithcirkel.co.uk/whats-my-jnd/?r=A30iKP__7_Hb
#WhatsMyJND
rahimnathwani · 2026-03-10
This is interesting but the result must depend on the screen and the brightness, no?
I tried it on a recent Pixel with brightness set to two-thirds, and this is my result:
https://www.keithcirkel.co.uk/whats-my-jnd/?r=ArggKP__c4_b
nickdothutton · 2026-03-10
Eizo EV3285 and MkI eyeball probably ruined by years of screen time: 0.0052
https://www.keithcirkel.co.uk/whats-my-jnd/?r=AgcgKP__PX8P
dominikh · 2026-03-10
If 0.02 is the JND of deltaEOK, how come everybody is getting results an order of magnitude smaller? Even the author himself (at https://www.keithcirkel.co.uk/too-much-color/) says they get 0.0028, but never elaborate on the significance of that result.
erikig · 2026-03-10
On a good monitor, I got to 0.0032 and then it all fell apart.
Here's the related article on how much accuracy is really needed in CSS values.
https://www.keithcirkel.co.uk/too-much-color/
mbo · 2024-08-24
this is a good article on styling with custom elements too: https://www.keithcirkel.co.uk/css-classes-considered-harmful/
edvald · 2018-06-06
I'm a pretty heavy TS user and I was pondering the same thing. I've not been able to find a motive for allowing numbers as interface keys, but Symbols actually do make sense since, turns out (I'm always learning something new), you can use them as object keys in ES6: https://www.keithcirkel.co.uk/metaprogramming-in-es6-symbols/
That post outlines a few use cases which are admittedly outside of everyday JS/TS usage but I can see them as quite powerful when, for example, building frameworks and libraries that expose an API. I'd offer real-world examples of my own but I'm still working it out for myself .)
ezpg · 2017-05-05
Use Symbols instead of Strings: https://www.keithcirkel.co.uk/metaprogramming-in-es6-symbols/
See the second line of the code snippet under "Symbols are completely unique…"
Unless I have misunderstood the spec, to compare symbols you require both the reference and value. Much more preferable than passing around Strings.
acemarke · 2017-02-19
Couple articles I've seen: http://www.zsoltnagy.eu/es6-proxies-in-practice/ and https://www.keithcirkel.co.uk/metaprogramming-in-es6-part-3-proxies/ .
jbergens · 2016-06-20
Another way is using npm-install-changed for the "npm install" problem and fix everything else with other npm scripts like npm-run-all. Use make if you like it but if everything else is npm you can solve most problems using "npm run" and npm scripts.
https://github.com/oNaiPs/npm-install-changed
http://blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/
[edit: formatting]
hawleyal · 2016-01-20
How to Use npm as a Build Tool - Keith Cirkel
http://blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/
Using npm scripts to build an asset pipeline - Modulus
http://blog.modulus.io/using-npm-scripts-to-build-asset-pipeline
dandv · 2016-01-19
Using npm instead of Grunt/Gulp/etc. has been extensively discussed by Keith Cirkel at http://blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/. Would've been nice to at least acknowledge that, if not join efforts and try to address some of the inherent shortcomings (e.g. the readability of long lines - https://github.com/keithamus/npm-scripts-example/issues/30).
techterrier · 2015-10-15
Here's a couple of articles if you are interested in the gulp free approach:
http://blog.keithcirkel.co.uk/why-we-should-stop-using-grunt/
http://blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/
alexstefan92 · 2015-06-23
Yes. You wouldn't use this unless you're used to work with node.js, you have `tee` on all unix-like systems.
I created `ntee` to replace `tee` inside NPM scripts, so they support both unix-like systems and windows systems.
This is an interesting article that explains what NPM scripts are: http://blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/