top | item 19652384

Fucking Color Picker

103 points| dosy | 7 years ago |tonymccoy.me

135 comments

order
[+] est31|7 years ago|reply
In total, the app is 122 MiB large.

Of which the runtime is about 120.3 MiB. There is even a copy of ffmpeg (2 MB) for the rare occasion when you want to play back an mp4 video in your color picker.

The actual app itself is in the resources directory which is 1.8 MiB large.

This directory contains files electron.asar (214 KiB), app.js (1.7 KiB), package.json (727B), and directories static (152 KiB) and node_modules (1.4 MiB).

The actual content created by the author is in app.js, package.json and static, which together take 160 KiB, of which 52 KiB is the logo (would have been much smaller as SVG) and 68.8 KiB a bundled font.

In the node_modules directory major contributors for size that I see are:

* node_modules/tinycolor2/demo (288 KiB; largest contributor here is a jquery copy)

* node_modules/tinycolor2/docs (228 KiB)

* node_modules/tinycolor2/test (116 KiB)

* node_modules/electron-settings/node_modules/fs-extra/docs (96 KiB)

* node_modules/electron-settings/node_modules/fs-extra/CHANGELOG.md (56 KiB)

* node_modules/user-media-screenshot/.idea/ (44 KiB)

All of the stuff I listed above is quite redundant for the users who just want to run the app. If you remove them, the 1.8 MiB become 764 KiB for the entire app and I'm pretty sure that minifiers, bundlers etc. could make it even smaller.

The runtime could be provided by the OS. I think it's definitely possible to create apps < 500 KiB with web technology, it's just the deployment patterns that turn this into a major download of 122 MiB. As for the RAM usage, idk about that. I guess if the runtime is provided by the OS, it would be the same electron binary so the OS could share that one at least.

[+] lioeters|7 years ago|reply
Nice breakdown of wasted resources.. It's frustrated me for a long time how people are carelessly bundling unused code, which is unfortunately common in JavaScript-land.

Including only the bundled/minified app is possible, leaving no node_modules folder at all - or, at least, just the native binaries needed.

As for bundling the whole Electron runtime on every app: technically it's possible to have a shared runtime - as this 3-year old issue shows, many people have attempted various approaches: https://github.com/electron/electron/issues/673

However, sadly no one has stepped up to come up with a general solution. While there are disadvantages and some reasonable arguments for bundling the exact version of the runtime required by an app, it seems efficent use of resources isn't enough of a priority..

[+] solarkraft|7 years ago|reply
Thanks for the wonderfully detailed breakdown. I wish every electron app could get this.

I don't hate web technology, I just hate electron's distribution model. There are so many frameworks to get around this.

[+] Polarity|7 years ago|reply
What´s the problem with this? I have enough space on my drive. Sure the app is bigger but it´s platform independent and works flawlessly. Native apps crash often, use big os dependent frameworks (you have to install sometimes) and only to have a smaller bundle? I don't get it.
[+] kgraves|7 years ago|reply
> So I wondered... why didn't Windows just have a fucking color picker?

Color Picker for Windows (500KB) (1.6MB unzipped): http://instant-eyedropper.com

Significantly smaller than the Electron app and works across Windows XP to 10.

[+] allwynpfr|7 years ago|reply
I use this and couldn't recommend it more
[+] fxfan|7 years ago|reply
Windows has a million color pickers, just go to chocolatey
[+] nickjj|7 years ago|reply
If anyone is put off by it being an Electron app and are running Windows, here's an AHK[0] script to get the hex code of the pixel color under your cursor and copy it to your clipboard:

---

#h::

MouseGetPos, MouseX, MouseY

PixelGetColor, color, %MouseX%, %MouseY%

StringLower, color, color

clipboard := SubStr(color, 3)

---

It's bound to Win+h (hex color) by default.

It's not fancy, but it works. You just run it in the background and hit the hot key to copy the color whenever you want to. There is no UI.

What's neat about it is the entire source code fits in a tweet: https://twitter.com/nickjanetakis/status/1108825825116332032

And it uses 0.6MB of RAM when running.

[0]: https://www.autohotkey.com/

[+] TeMPOraL|7 years ago|reply
AutoHotkey is amazing. It's a little gem of a Windows app. I only wish I discovered it earlier, when I was still using Windows as my main OS.

AHK can be used to trivially fix many usability warts you have with random software, and is powerful enough that someone implemented a clone of dwm tiling window manager in it (bug.n, [0], I used it for more than a year and can attest it works very well).

--

[0] - https://github.com/fuhsjr00/bug.n

[+] AnIdiotOnTheNet|7 years ago|reply
AutoHotKey is great and the kind of thing that should just be built in to desktop OSs. Why shouldn't I just be able to assign any key combo to anything, contextually? Why do we have to rely on applications supporting hotkeys at all?
[+] fxfan|7 years ago|reply
> It's not fancy

Excuse me, this is one of the tiniest and most useful things i've seen in my life as a budding designer.

[+] misnome|7 years ago|reply
A dev missed some feature of their usual OS and so wrote a cross platform version open source in their spare time.

Who cares that they used the “wrong” language or framework, or could have solved it another way or “who need this functionality anyway”.

Isn’t this supposed to be what the dev spirit is about?

[+] krapp|7 years ago|reply
That isn't the problem. The problem is the community, and the effect Electron is having on it.

Cross platform application development is considered a "solved problem" with Electron, and it's developed a cult that leads people to disparage native applications and native development as inferior in all cases, as if Electron were already the best possible solution rather than a hack around webdev that blew up because of the SV hype machine.

Because of this commoditization around a single language and a single framework (mostly by corporate interests, mind you,) curiosity and innovation are halted in favor of developer time efficiency and resume visibility. No one is even going to bother trying to create the next cross-platform application solution after Electron, because they would only be able to do so in Electron.

It's getting kind of ridiculous.

[+] ekianjo|7 years ago|reply
> A dev missed some feature of their usual OS and so wrote a cross platform version open source in their spare time.

So what matters is the "why" and the "what", and we can just forget about the "how"? Engineering is all about the how we do things, and HN tends to have more engineers than your typical online community. What's wrong with that?

[+] theNextEpisode|7 years ago|reply
100%. HN comments can be so perfectionist which is ironic given the name.

Someone spent their free time to give the world something free, shame on them it's not perfect.

[+] Drup|7 years ago|reply
If you wonder about linux: gcolor2 (http://gcolor2.sourceforge.net/) does the job.

And for size fetishists: it weights 42KB.

[+] spookylukey|7 years ago|reply
Also, xmag, you already have it installed if you use the X Window System. It's 41kb, extremely lightweight (always starts instantly) and also magnifies a screen portion which is helpful for picking colours.
[+] Hendrikto|7 years ago|reply
A color picker using Electron. The epitome of resource waste.
[+] booleandilemma|7 years ago|reply
I had become so used to just grabbing color values from any old pixel on the screen..., but on Windows the best way I came up with was to take a screenshot, wait for Photoshop to open, then get the color value through the PS eyedropper tool. That took probably 30 seconds to get a single color, since Adobe software is somehow still dog slow on brand new hardware.

You can do the same thing in MS Paint and save yourself 15 seconds.

[+] Scrantonicity|7 years ago|reply
and you can leave it running in the background all day long
[+] happyweasel|7 years ago|reply
Nope, you cannot colorpick with MS Paint from the whole visible screen (i.e. all windows and the desktop)
[+] stephc_int13|7 years ago|reply
Wow, this is waaaay too big for my taste.

I'm absolutely sure it is possible to write the same cross-platform app for less than 500KBytes and no dependencies.

[+] drivingmenuts|7 years ago|reply
Well, for one, you could skip writing it for Mac OS because it already has a fucking color picker.

This is an answer without a real problem, for Mac users anyway.

[+] phiresky|7 years ago|reply
Yes, this 450 line program could have been written in whatever native language you want with probably 3x the code and time spent, but why would you? Developer time has been more expensive than hardware for a decade now.

Everyone here loves to virtue signal about how horrible programs that take 0.01% of the space of a normal SSD and 1% of the RAM are, but the fact is that it does not matter at all, and you wouldn't even have noticed if you hadn't intentionally looked at the size of it.

[+] pooya72|7 years ago|reply
I know some people think Electron is cancer[1], but it is the fastest way to write cross-platform applications. I've been trying to learn to make apps for macOS, and it feels like even Apple doesn't want me write apps for the Mac.

[1]:https://medium.com/commitlog/electron-is-cancer-b066108e6c32

[+] mizaru|7 years ago|reply
128 MB for something that should be a couple hundred KB at best? Yes, it is cancer.
[+] jacobedawson|7 years ago|reply
I'd like for people to drop the whole 'x is cancer' thing since aside from the actual fuckery of cancer most things aren't that bad. A little too flippant imo :)
[+] nieksand|7 years ago|reply
Is it actually faster to develop in Electron than with QT and C++?

It has been over a decade, but I remember it being both straight-forward and pleasant to support Linux, Windows, and MacOS. I vaguely recall supporting Solaris too.

[+] Waterluvian|7 years ago|reply
I think the bottom line is that most of the time you see an electron app, just say to yourself, "this wouldn't exist if electron didn't exist."

It isn't replacing app dev. It's adding more app developers.

[+] happyweasel|7 years ago|reply
cancer is also one of the "fastest way" to grow some kind of tissue. That might kill you in the end.
[+] AnIdiotOnTheNet|7 years ago|reply
> it is the fastest way to write cross-platform applications.

I disagree. Maybe that's true if you're a webdev unwilling to learn anything else, but Lazarus is the fastest way I've found to write cross-platform GUI software, and as a bonus it compiles to native code in a single executable.

[+] _noise_|7 years ago|reply
Doesn't seem to fucking work.

On Linux it seems confused with a muti-monitor setup, the orbit button does nothing.

On Windows, in a VM, the orbit button opens a web browser to https://www.tonymccoy.me/orbit/#ffffff and gets a 404 Not Found

[+] _noise_|7 years ago|reply
Also QT provides a cross-platform color chooser widget.

https://doc.qt.io/qt-5/qcolordialog.html

KDE's KColorChooser is simply a wrapper around this and is less than 100 lines of code, mostly setting up the about box.

https://kde.org/applications/graphics/kcolorchooser/

This could have trivially been made into a cross-platform color chooser that uses significantly less resources.

On my Linux box Fucking Color Chooser spawns 4 fucking processes uses 128 MB of RAM and 4% CPU.

KColorChooser uses 15 MB in one process and near zero CPU.

Please stop making everything a web application.

[+] Piisamirotta|7 years ago|reply
For me it takes 1 second to hit alt+print screen and then open ms paint with my shortcut ctrl + alt + P.
[+] mehrdadn|7 years ago|reply
Confused... why do you need Photoshop? Can't you just PrtScn, paste in MS Paint, and use the eyedropper?
[+] kakarot|7 years ago|reply
I was really excited until I saw Electron at the bottom.

A color picker is a tantamount example of an application that does not belong on the Electron platform.

[+] lousken|7 years ago|reply
I just use ShareX on windows which has color picker tool. Also you can simply create a system-wide keybind for it.
[+] tenryuu|7 years ago|reply
I bound mine to the middle click action of the taskbar.

but I also overrode the tooltip text on the screenshot cursor to display the RGB hex, as a ctrl+c will copy whatever is in this box

[+] pooya72|7 years ago|reply
I actually tried installing this on my Mac and it doesn't open. I'm on 10.14.4.
[+] aeonflux|7 years ago|reply
Seriously there was no existing color picker app for Windows alraady?
[+] astura|7 years ago|reply
Of course there was, even open source Electron ones[1], but that wouldn't be a blog post and a chance to "promote" yourself.

Also, opening up Photoshop for the color picker? Paint opens faster than I can blink and has a color picker.

[1] https://electronjs.org/apps/colorpicker

[+] montroser|7 years ago|reply
xmag comes by default on most Linux distros