9 ms·

Asking as a person who understands the fundamentals of all of the technologies involved but is horrified by much of what goes on in the minds of today's web dev

Asking as a person who understands the fundamentals of all of the technologies involved but is horrified by much of what goes on in the minds of today's web developers and designers, what motivates the decision to make this repo use make, docker, yarn, npx, nginx, react, and jest rather than a bit of static HTML and css and something like qrjs2.js or VanillaQR.js with a simple canvas or datauri update in onInput?

sergiomattei 5y ago
Developer experience? Learning project? For fun? If the maintainer is comfortable using that technology, let it be. No need to rain fire on it.
- ykevinator3 5y ago
  There's a lot of that around here
cortesoft 5y ago
I often choose simple, useful projects for learning new technology… i can’t learn something new if I am not using it for something useful, but I also don’t want to try to learn something new WHILE also solving a challenging problem… so something simple like this is a great sweet spot to learn new tech.
catchmeifyoucan 5y ago
This app seems its using create react app, so agreed the app might come with a few extra things that you might not need. However, there are a few reasons I might choose CRA over static HTMl. Don’t get me wrong, HTML is great, but the developer experience can be primative. Here is why I like using CRA for some projects: 1. Live reload. This comes for free with CRA. Makes dev work easy. 2. As easy as installing a component and getting started. And they logically fit in the code flow. Native import libraries, you have to write the JavaScript and point em to your divs and dom and initialize em. 3. Let’s say in the future, I want to reuse the code logic in a different app, I can just take the js and element as one unified component and move it across. Tbh, for an app like this, after doing a production build (npm run build), I don’t think it’d make a radical difference in performance with raw html or react. Might just be dev preference, and ease of use.
numlock86 5y ago
What motivates you to use a feature rich browser on an OS with graphical user interface running on on-premise hardware including your own internet line and all those peripherals if you could just use CLI from a good old VT100 hooked up to your nearest mainframe to HTTP POST a comment on HN? Yeah, probably because nowadays you just do it like that.
- jbverschoor 5y ago
  Ease of distribution and sandboxing
Spivak 5y ago
Docker with nginx because that’s your delivery pipeline. It’s much more common to have a place to run an OCI container than a directory to upload static HTML. CDNs operate on this model but there aren’t many turnkey “on-prem” solutions. The tooling to run a container and get it hooked into your web tier with routes is actually the easier path these days. Edit: More The reason for this model is that it makes everything the same and your caching tier is the great equalizer. Everything is a backend for your caching SSL terminating reverse proxy. And your static site will live in the cache for ages so once your cache is warm there’s no real performance hit.
csande17 5y ago
A lot of developers only know the new, needlessly complicated ways of doing things. I have met professional software engineers who have never heard of shared web hosting, for example. It's also surprisingly possible to learn enough about programming to get a job without understanding basic computing concepts. I've met professional software engineers, with multiple years of experience and promotions under their belt, who did not know the difference between hard drives and RAM in a server context. I've literally code-reviewed attempts to deploy a database server with 1 TB of RAM in order to store 1 TB of data.
- easton 5y ago
  I thought that was crazy, but reflecting over my CS education they haven’t gone over the difference between disk space and RAM. I suppose they figure everyone already knows?
  - kyawzazaw 5y ago
    I think that's why Scott Hanselman started this series https://www.hanselman.com/blog/new-youtube-series-computer-things-they-didnt-teach-you-in-school https://www.hanselman.com/blog/new-youtube-series-computer-t...
  - firebaze 5y ago
    But can you really be, let's be modest, around the baseline of developer competence not knowing the difference between RAM and disk space? Hard to believe to me.
  - sam0x17 5y ago
    You sure you didn't have a computer architecture course? Most CS programs it is a required course
    - mod 5y ago
      What is a required course?
bndw 5y ago
Answering as the author who also understands the fundamentals of all of the technologies involved and questions much of what goes on in the minds of today's web developers and designers-- I use Make as the standard way to interact with every repo I own. This allows me to type `make build` instead of `$some-language-specific-command-I-forget-in-2-weeks`. I use Docker for distributing every app I build. If the app is a website I also use the nginx base image. Docker images make packaging and distribution a breeze IMO. Regarding yarn, npx, react, and jest: I'm similarly disillusioned by the churn but I also like to remain knowledgeable as the industry evolves. React was something I hadn't touched before, so I decided to pick a simple project to give it whirl ;)
- weejewel 5y ago
  But now you’re paying for keeping a server online, whereas a GitHub page could’ve hosted this static website for free.
  - cinntaile 5y ago
    He did this for fun, his motivation wasn't to find the cheapest way to host his content.
    - dividedbyzero 5y ago
      It's also not like you'd have to have a separate server/vserver for every such project, a very affordable vserver will run quite a lot of nginx containers. Plus I guess some people will have a vserver or something like that anyway (I have a small one to get around NAT at the ISP level), in which case it might be net-zero.
      - 867-5309 5y ago
        >get around NAT at the ISP level genuinely interested in the benefits of this. care to share?
        5y ago
asiachick 5y ago
To be slightly snarky, because the author wants to record your WiFi and Password. That it was a learning project, ok. I guess.
valbaca 5y ago
People love to constantly say "Want to learn to code? Make projects! projects! projects!" and then when someone makes a project as a means to learn a particular technology, now people turn up their nose and say "ew, why did you use this?" Anyway, this project provides exactly what I needed. Thanks to OP for sharing! Slick and simple
- esolyt 5y ago
  Sure but if you want to learn a specific technology by making a project, it makes more sense to make a project that can actually benefit from that specific technology.
- remram 5y ago
  Make a project -> learn to code Share a project -> get opinions on it What's the problem?
  - judge2020 5y ago
    It's fine to criticize, but it's very likely "release wificard.io" was a bonus on top of the main goal of "learn react, nginx, docker, jest", so the author could have used simpler technology if it weren't for their objective of obtaining hands-on experience.
    - deleted 5y ago
      [deleted]
- ZoomZoomZoom 5y ago
  > and then when someone makes a project as a means to learn a particular technology, now people turn up their nose and say "ew, why did you use this?" Why post your learning project on HN then? You advertise and get free critique. Double win in my book. What's wrong with that?
  - macintux 5y ago
    Many of these are not critiques, but rather not-so-subtle implications that the author must either not know what they’re doing or is trying to show off.
elondaits 5y ago
If I had done this project it would probably use node.js + gulp + sass + pug + browserify + babel + bootstrap ... or maybe Webpack instead of gulp and browserify (depends on the project). Why? Because I have a website template that solves many things for me, like: - I see no reason not to use SASS or the latest ES even though I know how to. Or pug, for that matter... which I like. I also have a SASS template with some utilities and a particular code organization. - Using an ES bundler allows you to throw in libraries from npm. I would not write the QR code myself, for instance. - Automatically watches sources and recompiles. - Adds hashes to asset filenames in order to cache-bust changes in CSS/JS/images (critical when using a CDN). - Has placeholders for things I'll probably need, like the metadata for building previews in social networks. - Is prepared for dealing with i18n, if the need arises. - Future-proofing, since 80% of projects you think are small end up becoming larger. This is a single-page site, but if I wanted to publish this in Europe it'd already need two extra pages for the Privacy Policy + Impressum... so the single page site suddenly needs to worry about navigation. - It's prepared for quickly deploying to AWS or Github Pages. It could be quickly tweaked for working on Cloudflare Pages or other hosting/CI environments that do the compilation for you. And most importantly... ... my stack does not negatively affect the end result. All the extra baggage is just part of the development environment. If you want to skip my tools, they're quite easy to bypass and replace for any other transpiler... or you can just ignore my sources, reindent my compiled files and work on them directly. PS: Back in the 90s I drew complex table layouts on graph paper, typed them down with vi, and ftped them to the hosting. I'm well aware of the alternatives. My current workflow + templates + helpers are based on the need to efficiently juggle A LOT of completely different projects every year as a freelance developer.
- jonahx 5y ago
  > All the extra baggage is just part of the development environment. If you want to skip my tools, they're quite easy to bypass and replace for any other transpiler... or you can just ignore my sources, reindent my compiled files and work on them directly. This might be technically true, but is not true in any meaningful sense if another developer ever has to work with your code. They will have to deal with all your baggage, and their job will be much harder because of it.
xeromal 5y ago
Probably to learn those various technologies. Not only did they use a bunch of new tech, they made something other people can use in the process. Better than making a bunch of throwaway code.
- dolmen 5y ago
  Of course, why write 50 lines of throwaway code when you can write 500? Single static HTML files are under valued.
verelo 5y ago
It’s the Rube Goldberg style of software development? Didn’t you hear? It’s super popular with the kids!
banana_giraffe 5y ago
I can't speak for the poster, but sometimes the fun is in using tools you know. I don't know VanillaJS that well, so I took a stab at the same concept: https://q726kbxun.github.io/qrcodes/ https://q726kbxun.github.io/qrcodes/ Not nearly as pretty, since I know even less about making pages pretty, but still, a fun little stab at making such a site.
- BugsJustFindMe 5y ago
  I'd say that a tiny amount of CSS would make that basically perfect for the task, except that it's honestly already perfect for the task now. Though it looks like you replace semicolon a second time instead of colon in clean.
  - banana_giraffe 5y ago
    Ahh, right you are! All fixed.
- Evidlo 5y ago
  Would be nice if the code was in an image I could save.
  - edflsafoiewq 5y ago
    What browsers don't let you save a canvas as an image?
renewiltord 5y ago
The same reason I take a massive V8 engine attached to a massive truck bed one mile over to my friend’s place to watch England lose at the Euros. Turns out that sometimes, even when tool X isn’t the best at the job, it’s way better for me to use what’s at hand. This is what a lot of people have trouble understanding: sometimes the best tool for the job is the tool you’re best in. Evidence? No one has made this static website you’re talking about. It doesn’t exist. This one does. The imperfect app that exists beats the perfect app that is vapor.
- pvaibhav2 5y ago
  No, that’s not the best tool for the job, that’s just the most convenient tool for the job.
  - renewiltord 5y ago
    This is the part engineers don’t get. Speed is an engineering feature. The most convenient is the best if it’s faster.
- jonahx 5y ago
  > No one has made this static website you’re talking about. It doesn’t exist. This one does. The imperfect app that exists beats the perfect app that is vapor. Another poster whipped one together since this was posted, because it's so trivial to do with vanilla tech: https://news.ycombinator.com/item?id=27804490 https://news.ycombinator.com/item?id=27804490 I also don't think anyone has a problem with someone who says: "I dunno, this was just the way I learned and I don't know the underlying tech." But that's usually not what happens. Instead, there are endless rationalizations for why the obvious over-engineering is not only okay, but preferable.
zdgeier 5y ago
Made a simple page here https://news.ycombinator.com/item?id=27805746 https://news.ycombinator.com/item?id=27805746 to see how this would look

sergiomattei 5y ago

Developer experience? Learning project? For fun? If the maintainer is comfortable using that technology, let it be. No need to rain fire on it.

ykevinator3 5y ago
There's a lot of that around here

cortesoft 5y ago

I often choose simple, useful projects for learning new technology… i can’t learn something new if I am not using it for something useful, but I also don’t want to try to learn something new WHILE also solving a challenging problem… so something simple like this is a great sweet spot to learn new tech.

catchmeifyoucan 5y ago

This app seems its using create react app, so agreed the app might come with a few extra things that you might not need. However, there are a few reasons I might choose CRA over static HTMl. Don’t get me wrong, HTML is great, but the developer experience can be primative. Here is why I like using CRA for some projects: 1. Live reload. This comes for free with CRA. Makes dev work easy. 2. As easy as installing a component and getting started. And they logically fit in the code flow. Native import libraries, you have to write the JavaScript and point em to your divs and dom and initialize em. 3. Let’s say in the future, I want to reuse the code logic in a different app, I can just take the js and element as one unified component and move it across. Tbh, for an app like this, after doing a production build (npm run build), I don’t think it’d make a radical difference in performance with raw html or react. Might just be dev preference, and ease of use.

numlock86 5y ago

What motivates you to use a feature rich browser on an OS with graphical user interface running on on-premise hardware including your own internet line and all those peripherals if you could just use CLI from a good old VT100 hooked up to your nearest mainframe to HTTP POST a comment on HN? Yeah, probably because nowadays you just do it like that.

jbverschoor 5y ago
Ease of distribution and sandboxing

Spivak 5y ago

Docker with nginx because that’s your delivery pipeline. It’s much more common to have a place to run an OCI container than a directory to upload static HTML. CDNs operate on this model but there aren’t many turnkey “on-prem” solutions. The tooling to run a container and get it hooked into your web tier with routes is actually the easier path these days. Edit: More The reason for this model is that it makes everything the same and your caching tier is the great equalizer. Everything is a backend for your caching SSL terminating reverse proxy. And your static site will live in the cache for ages so once your cache is warm there’s no real performance hit.

csande17 5y ago

A lot of developers only know the new, needlessly complicated ways of doing things. I have met professional software engineers who have never heard of shared web hosting, for example. It's also surprisingly possible to learn enough about programming to get a job without understanding basic computing concepts. I've met professional software engineers, with multiple years of experience and promotions under their belt, who did not know the difference between hard drives and RAM in a server context. I've literally code-reviewed attempts to deploy a database server with 1 TB of RAM in order to store 1 TB of data.

easton 5y ago
I thought that was crazy, but reflecting over my CS education they haven’t gone over the difference between disk space and RAM. I suppose they figure everyone already knows?
- kyawzazaw 5y ago
  I think that's why Scott Hanselman started this series https://www.hanselman.com/blog/new-youtube-series-computer-things-they-didnt-teach-you-in-school https://www.hanselman.com/blog/new-youtube-series-computer-t...
- firebaze 5y ago
  But can you really be, let's be modest, around the baseline of developer competence not knowing the difference between RAM and disk space? Hard to believe to me.
- sam0x17 5y ago
  You sure you didn't have a computer architecture course? Most CS programs it is a required course
  - mod 5y ago
    What is a required course?

bndw 5y ago

Answering as the author who also understands the fundamentals of all of the technologies involved and questions much of what goes on in the minds of today's web developers and designers-- I use Make as the standard way to interact with every repo I own. This allows me to type `make build` instead of `$some-language-specific-command-I-forget-in-2-weeks`. I use Docker for distributing every app I build. If the app is a website I also use the nginx base image. Docker images make packaging and distribution a breeze IMO. Regarding yarn, npx, react, and jest: I'm similarly disillusioned by the churn but I also like to remain knowledgeable as the industry evolves. React was something I hadn't touched before, so I decided to pick a simple project to give it whirl ;)

weejewel 5y ago
But now you’re paying for keeping a server online, whereas a GitHub page could’ve hosted this static website for free.
- cinntaile 5y ago
  He did this for fun, his motivation wasn't to find the cheapest way to host his content.
  - dividedbyzero 5y ago
    It's also not like you'd have to have a separate server/vserver for every such project, a very affordable vserver will run quite a lot of nginx containers. Plus I guess some people will have a vserver or something like that anyway (I have a small one to get around NAT at the ISP level), in which case it might be net-zero.
    - 867-5309 5y ago
      >get around NAT at the ISP level genuinely interested in the benefits of this. care to share?
      - 5y ago

asiachick 5y ago

To be slightly snarky, because the author wants to record your WiFi and Password. That it was a learning project, ok. I guess.

valbaca 5y ago

People love to constantly say "Want to learn to code? Make projects! projects! projects!" and then when someone makes a project as a means to learn a particular technology, now people turn up their nose and say "ew, why did you use this?" Anyway, this project provides exactly what I needed. Thanks to OP for sharing! Slick and simple

esolyt 5y ago
Sure but if you want to learn a specific technology by making a project, it makes more sense to make a project that can actually benefit from that specific technology.
remram 5y ago
Make a project -> learn to code Share a project -> get opinions on it What's the problem?
- judge2020 5y ago
  It's fine to criticize, but it's very likely "release wificard.io" was a bonus on top of the main goal of "learn react, nginx, docker, jest", so the author could have used simpler technology if it weren't for their objective of obtaining hands-on experience.
  - deleted 5y ago
    [deleted]
ZoomZoomZoom 5y ago
> and then when someone makes a project as a means to learn a particular technology, now people turn up their nose and say "ew, why did you use this?" Why post your learning project on HN then? You advertise and get free critique. Double win in my book. What's wrong with that?
- macintux 5y ago
  Many of these are not critiques, but rather not-so-subtle implications that the author must either not know what they’re doing or is trying to show off.

elondaits 5y ago

If I had done this project it would probably use node.js + gulp + sass + pug + browserify + babel + bootstrap ... or maybe Webpack instead of gulp and browserify (depends on the project). Why? Because I have a website template that solves many things for me, like: - I see no reason not to use SASS or the latest ES even though I know how to. Or pug, for that matter... which I like. I also have a SASS template with some utilities and a particular code organization. - Using an ES bundler allows you to throw in libraries from npm. I would not write the QR code myself, for instance. - Automatically watches sources and recompiles. - Adds hashes to asset filenames in order to cache-bust changes in CSS/JS/images (critical when using a CDN). - Has placeholders for things I'll probably need, like the metadata for building previews in social networks. - Is prepared for dealing with i18n, if the need arises. - Future-proofing, since 80% of projects you think are small end up becoming larger. This is a single-page site, but if I wanted to publish this in Europe it'd already need two extra pages for the Privacy Policy + Impressum... so the single page site suddenly needs to worry about navigation. - It's prepared for quickly deploying to AWS or Github Pages. It could be quickly tweaked for working on Cloudflare Pages or other hosting/CI environments that do the compilation for you. And most importantly... ... my stack does not negatively affect the end result. All the extra baggage is just part of the development environment. If you want to skip my tools, they're quite easy to bypass and replace for any other transpiler... or you can just ignore my sources, reindent my compiled files and work on them directly. PS: Back in the 90s I drew complex table layouts on graph paper, typed them down with vi, and ftped them to the hosting. I'm well aware of the alternatives. My current workflow + templates + helpers are based on the need to efficiently juggle A LOT of completely different projects every year as a freelance developer.

jonahx 5y ago
> All the extra baggage is just part of the development environment. If you want to skip my tools, they're quite easy to bypass and replace for any other transpiler... or you can just ignore my sources, reindent my compiled files and work on them directly. This might be technically true, but is not true in any meaningful sense if another developer ever has to work with your code. They will have to deal with all your baggage, and their job will be much harder because of it.

xeromal 5y ago

Probably to learn those various technologies. Not only did they use a bunch of new tech, they made something other people can use in the process. Better than making a bunch of throwaway code.

dolmen 5y ago
Of course, why write 50 lines of throwaway code when you can write 500? Single static HTML files are under valued.

verelo 5y ago

It’s the Rube Goldberg style of software development? Didn’t you hear? It’s super popular with the kids!

banana_giraffe 5y ago

I can't speak for the poster, but sometimes the fun is in using tools you know. I don't know VanillaJS that well, so I took a stab at the same concept: https://q726kbxun.github.io/qrcodes/ https://q726kbxun.github.io/qrcodes/ Not nearly as pretty, since I know even less about making pages pretty, but still, a fun little stab at making such a site.

BugsJustFindMe 5y ago
I'd say that a tiny amount of CSS would make that basically perfect for the task, except that it's honestly already perfect for the task now. Though it looks like you replace semicolon a second time instead of colon in clean.
- banana_giraffe 5y ago
  Ahh, right you are! All fixed.
Evidlo 5y ago
Would be nice if the code was in an image I could save.
- edflsafoiewq 5y ago
  What browsers don't let you save a canvas as an image?

renewiltord 5y ago

The same reason I take a massive V8 engine attached to a massive truck bed one mile over to my friend’s place to watch England lose at the Euros. Turns out that sometimes, even when tool X isn’t the best at the job, it’s way better for me to use what’s at hand. This is what a lot of people have trouble understanding: sometimes the best tool for the job is the tool you’re best in. Evidence? No one has made this static website you’re talking about. It doesn’t exist. This one does. The imperfect app that exists beats the perfect app that is vapor.

pvaibhav2 5y ago
No, that’s not the best tool for the job, that’s just the most convenient tool for the job.
- renewiltord 5y ago
  This is the part engineers don’t get. Speed is an engineering feature. The most convenient is the best if it’s faster.
jonahx 5y ago
> No one has made this static website you’re talking about. It doesn’t exist. This one does. The imperfect app that exists beats the perfect app that is vapor. Another poster whipped one together since this was posted, because it's so trivial to do with vanilla tech: https://news.ycombinator.com/item?id=27804490 https://news.ycombinator.com/item?id=27804490 I also don't think anyone has a problem with someone who says: "I dunno, this was just the way I learned and I don't know the underlying tech." But that's usually not what happens. Instead, there are endless rationalizations for why the obvious over-engineering is not only okay, but preferable.

zdgeier 5y ago

Made a simple page here https://news.ycombinator.com/item?id=27805746 https://news.ycombinator.com/item?id=27805746 to see how this would look