[HN Gopher] Show HN: Print a WiFi Login Card
___________________________________________________________________
Show HN: Print a WiFi Login Card
Author : bndw
Score : 358 points
Date : 2021-07-11 18:04 UTC (4 hours ago)
(HTM) web link (wificard.io)
(TXT) w3m dump (wificard.io)
| barbarbar wrote:
| I am not sure I understand the app. Is it 2 input fields one for
| name and one for password? Which you then print? Is that the
| functionality - or have I misunderstood?
| cyral wrote:
| The QR code it generates can be scanned by a phone to connect
| to a WiFi network without typing anything
| failwhaleshark wrote:
| Neat. Works with Unicode!
|
| Feature request: giant passwords like that one that was posted on
| the side of a building.
|
| I ran it with network off and saw the code, so it looks safe.
| lucb1e wrote:
| I can also recommend drawing it instead of printing if you hate
| printers with the same passion as me. Record to beat is 3 tries
| and I think about three hours (for an SSID of 13 bytes (5 unicode
| characters) and 20-character password).
| tkuraku wrote:
| I just generate a QR code for my wifi login using libreoffice
| writer.
|
| Edit: just use the built in QR code generator with a string in
| this format.
|
| WIFI:T:WPA;S:$SSID;P:$PASSWORD
| remram wrote:
| Can't you also screenshoot it on your phone?
| tkuraku wrote:
| I generate the QR code and then add some text to make a kind
| of poster and print it out. Ios and android users can then
| just use their camera app to automatically connect to the
| wifi.
|
| https://help.libreoffice.org/latest/en-
| GB/text/shared/guide/...
| ThePadawan wrote:
| I do wish there was an option to safely disable all connectivity
| in a browser tab (forever) like with Javascript or camera access.
|
| Yes, saving the page, disconnecting your network connection, then
| deleting the page would work, but it's a real bother.
| mholt wrote:
| Yep, I kind of wish browser permissions let you gate access to
| the network just like they do the camera, mic, location, etc.
| (Though, network permission would probably need to be enabled
| by default to not break the Web.)
| toomuchtodo wrote:
| Perhaps https://github.com/ray-lothian/Block-Site/ could be
| adapted to your needs.
| floatingatoll wrote:
| I do too. Even the web extension APIs don't seem to comprehend
| this. It's super disappointing and it's holding back extension
| development and enabling a massive malware problem.
| mrfusion wrote:
| Airplane mode?
| fulafel wrote:
| The page might start a service worker and exfiltrate the data
| when connectivity returns even after the tab is closed.
| [deleted]
| kortilla wrote:
| Can any website start service workers that outlive their
| tabs? That seems like a huge change
| ComputerGuru wrote:
| Yes, but not directly via a service worker (aren't they
| blocked from network access in general?) - you'd have to
| trigger the main thread to sync with the service worker,
| then perform the exfiltration for you.
|
| The original way to do this via a synchronous XHR request
| in visibilitychange/beforeunload/unload handlers gave you
| a 1-2s window to exfiltrate the data. That's been
| deprecated in exchange for a more insidious "invisible
| background connection to the server maintained after
| closing the tab or navigating away" that doesn't involve
| any UI delays. (For "a better experience" of course, not
| for stealth! Never!)
|
| It's called the beacon API [0] and it's supported by
| basically all browsers [1]. This was introduced because,
| chiefly among others, Google Analytics was stuck between
| blocking in head to record the page view or moving to the
| end of the html document and using documentready but with
| a fairly high risk of user navigating away before all
| that had a chance to trigger at all or after it triggered
| but before it could exfiltrate the data.
|
| [0]: https://developer.mozilla.org/en-
| US/docs/Web/API/Beacon_API
|
| [1]: https://caniuse.com/?search=beacon%20api
| Pick-A-Hill2019 wrote:
| Wow - that is just sad to see from Mozilla (sighs, where
| did all the good guys go?)
|
| Excerpt from their KB
|
| Navigator.sendBeacon() .... It's intended to be used for
| sending analytics data to a web server, and avoids some
| of the problems with legacy techniques for sending
| analytics, such as the use of XMLHttpRequest.
|
| https://developer.mozilla.org/en-
| US/docs/Web/API/Navigator/s...
| fulafel wrote:
| A cursory web search didn't provide information about
| restrictions that would apply.
|
| I remember seeing service workers in browser devtools or
| task manager without having given explicit permission.
| [deleted]
| dheera wrote:
| Also another nitpick:
|
| > View the source code
|
| It would be really nice if the source code _in the browser_
| (no, not the Github repo; how do I know the web server served
| the same thing as the Github repo?) were displayed in a human-
| readable format with proper tabbing, comments if applicable,
| and not an obfuscated, minified form.
|
| In fact if your goal isn't specifically obfuscation, it's not
| necessary to minify JS in general. Web servers do a good job
| gzipping stuff.
| ThePadawan wrote:
| Hm, we could have the best of both worlds if source maps (can
| already be served to browsers and are supported fine) could
| be proven authentic.
|
| I believe right now, I could use foo.min.js and serve you a
| cruddy foo.min.map.js to mislead you.
|
| If I served you the original sources foo.concat.js and a
| build script to go from foo.concat.js => foo.min.js instead,
| we could have both the speed of the minified version and the
| (proven by the browser) accurate source code and maps!
| ComputerGuru wrote:
| We're moving far, far away from the observability and
| introspection that once made the web a transparent medium.
| First it was minified JS, then it was minified and obfuscated
| JS, then it was using a canvas instead of the DOM to prevent
| even HTML inspection, and now it's binary executable payloads
| (WASM) rendering to a WebGL context with zero introspection
| possible.
| dzhiurgis wrote:
| Same for apps.
|
| And it's crazy you can't disable phone service on iPhone.
|
| Also, if you worried about someone accessing your network then
| you probably need to isolate your devices from seeing each
| other.
|
| TBH other than pwning my router or misusing my IP address in
| some way I don't see much problem having my devices on public
| net. All of them run firewall and are up to date. Most traffic
| is HTTPS and I'm not sure if you can MITM with just Wifi
| password lol.
| rhn_mk1 wrote:
| uMatrix kind of does this. Once you forbid everything, requests
| will get filtered out.
|
| I'm not sure if this affects service workers though.
| gpvos wrote:
| Can uMatrix do that only for the current tab?
| rhn_mk1 wrote:
| Yes, until reload. Permanent settings are always per
| domain.
| avel wrote:
| DevTools -> network -> Change the throttling to "offline"
| 41b696ef1113 wrote:
| Offline is not an option in Firefox, just progressively worse
| connection options.
| jacobmischka wrote:
| It's a bit less convenient, but I think you can accomplish
| the same using a `*` request blocking rule:
| https://i.imgur.com/SYgAxuW.png
| ajsnigrutin wrote:
| File -> work offline?
| dzhiurgis wrote:
| Does it stay offline if you have a service worker?
| shoto_io wrote:
| I am sure that this is not what this site is for. But...
|
| For a moment I thought: What a great attack vector. Collect WiFi
| passwords from around the globe.
| thepete2 wrote:
| My first though was "Why would I ever enter my wifi credentials
| into a web form?", but perhaps there are people who would...
| quenix wrote:
| To be fair it's fairly easy to check that it didn't send any
| data over the wire
| xpe wrote:
| > To be fair it's fairly easy to check that it didn't send
| any data over the wire
|
| ... after the fact ...
|
| ... for a user of the web app who watches the network panel
| from their browser's developer tools
| jdironman wrote:
| You just send false info first.
| cushychicken wrote:
| A nice, friction reducing optimization for a home user.
|
| Great work, OP. I'll be printing one for my fridge later today.
| moepstar wrote:
| Just a FYI/PSA: Fritz!Box routers by AVM do have that option
| right in their WiFi-settings page...
|
| Also, there are lots of offline QR generator apps...
| edison112358 wrote:
| The Shortcuts app on iPhone can do this.
| cghendrix wrote:
| Very cool and nicely executed! Love it
| bndw wrote:
| Thank you for the kind words!
| Snawoot wrote:
| Cool! I wonder if we can generate QR code for WPA2 Enterprise
| with EAP-TLS?
| tomcam wrote:
| This is a ridiculously good idea. Thank you.
| Zash wrote:
| qrencode -t utf8 'WIFI:T:WPA;S:network;P:password;;'
| the_cat_kittles wrote:
| wow ok, so you expect me to have a _computer_ (?!) with:
| - a keyboard? - access to a terminal??!?!?! -
| ability to install qrencode??? - knowledge of copy and
| paste!?!?! - some way to edit the command you posted to
| my specific username and password?!
|
| franky this is ridiculous when i could just make a repo that
| uses make, docker, yarn, npx, nginx, react, and jest
|
| /s
| jacobmischka wrote:
| This is a staggeringly passive aggressive comment, who hurt
| you?
| plandis wrote:
| I disagree and I found both the command line and ui
| versions interesting, kudos to both OP and the CLI poster
| :)
|
| As stupid as it sounds I didn't realize there was a wifi
| scheme for a uri-like syntax on phones
| Satam wrote:
| And access to Linux. Which most of non-tech people are not
| going to have.
| bigiain wrote:
| No no no!
|
| You're supposed to deploy qrencode in a kubernates cluster on
| Oracle cloud to run it, and then go to your WiFi base station
| and change your SSID to "network" and it's password to
| "password"
|
| <grin>
| CraneWorm wrote:
| A decade old SO adage comes o mind:
|
| "This should be the accepted answer."
| SubzeroCarnage wrote:
| For WPA3 WIFI:S:SSID;T:WPA3;P:PASSWORD;;
| tomjen3 wrote:
| >zsh: command not found: qrencode
| floatingatoll wrote:
| Did you type this in from memory?!
| captn3m0 wrote:
| There is no real specification. This is the best source[1],
| which documents QR standards.
|
| >There are some standards -- de facto and otherwise --
| already in use. This wiki attempts to catalog some possible
| standards for encoding various types of information, and
| suggest a standard action associated to them.
|
| [1]: https://github.com/zxing/zxing/wiki/Barcode-Contents#wi-
| fi-n...
| mdaniel wrote:
| Damn, that's saddening, but also answers a question I had
| about what the escape character is for a password
| containing `;` -- I guess there's no specification to tell
| me :-(
|
| OTOH, I guess a "standard" is whatever the common
| implementations accept anyway, so if one could dig up the
| source to the WiFi QR scanner in source.android.com that's
| the 2nd best thing
| jaflo wrote:
| No specification, but the linked website mentions that
| they "propose a syntax like "MECARD" for specifying wi-fi
| configuration" and then later:
|
| > Special characters \, ;, ,, " and : should be escaped
| with a backslash (\\) as in MECARD encoding.
| mdaniel wrote:
| In fairness, the string doesn't seem insaneo: T:=Type S:=SSID
| P:=Password then only the leading and trailing chars need to
| be "remembered", plus whatever the escape character is for
| that password string (or maybe even the SSID -- I'm not super
| clear on what characters can be in an SSID)
| bigiain wrote:
| > I'm not super clear on what characters can be in an SSID)
|
| I hear "%s%s%s%s%p" is the preferred SSID these days...
| vletal wrote:
| Since OP intended to learn a bunch of technologies while
| developing this project I'd be amused to see a version of this
| based on qrencode complied to WASM.
| krishnan-r wrote:
| Why would you trust a random page on the internet and go paste
| your wifi password on it?
| black3r wrote:
| opening in incognito tab with internet disconnected to make
| sure it works offline and that nothing gets sent after you
| close the incognito tab should be safe & secure but yeah you
| can also google the proper qr code format and make it yourself
| using qrencode in terminal or something like that...
|
| but for semi-public WiFis like the ones in restaurants, hotels,
| ... it's a survivable risk
| jackson1442 wrote:
| Is your threat model really so severe that it includes someone
| driving to your house and connecting to your wifi network? Of
| all passwords, a wifi password is one you should _never_ reuse.
|
| You could also inspect the source, it's open source, or network
| requests.
| sleavey wrote:
| Can you actually point your phone camera at a QR code and have it
| connect automatically, as the website says? I generally avoid QR
| codes as they obfuscate the target URL, but I thought you needed
| an app for reading them on Android and possibly also iOS.
| asutekku wrote:
| Most phone cameras nowadays have a built in qr-code reader.
| sleavey wrote:
| But does it automatically recognise it as an SSID and
| password and connect as the website suggests?
| quenix wrote:
| Yes
| oarsinsync wrote:
| On iOS, you get a banner notification with the name of the
| wifi network, for you to tap to connect to. It does the
| rest from there, yes.
|
| This has been the case for quite some time. I assume
| Android can do it too (and if so, probably did it first).
| xeromal wrote:
| My Samsung S20 can. IDK about other phones.
| jackson1442 wrote:
| It's definitely built into iOS, just point the camera app at it
| and it'll tell you what the domain behind the qr is, then just
| touch to follow the link.
|
| Something like wifi will have a custom prompt that says
| "Connect to WiFi network MyNetwork."
| drusepth wrote:
| The default Android camera app will read them for you (and
| display the URL before you tap to open it in a browser) by
| either pointing the default camera at a QR code or manually
| scanning it with the "Lens" camera mode.
|
| The Android wifi menu (where you select from nearby networks to
| join) also has a QR icon that lets you scan to immediately join
| a network (next to "Add network"). I'd imagine you'd also join
| if you scanned it from the camera app, too.
| i5heu wrote:
| How convenient I asked myself this question about five hours ago!
|
| There are chances out there, unbelievable.
| fortyseven wrote:
| I think some folks here need to shut the fuck up and let a
| developer code using whatever tools make them happy.
|
| There have been plenty of times I've decided to use a project as
| an excuse to learn something new. There's always going to be a
| more optimal way to go about things. But you might not have
| nearly as much fun, or grow as a developer.
|
| Potentially making a dev feel like shit for sharing the fruits of
| their labor because they didn't implement it in a way that makes
| YOU, personally, satisfied?
|
| You're just a jerk.
| geonnave wrote:
| A nice addition would be either (1) support other languages or (2
| - simpler) the ability to edit the field titles (e.g. change from
| "Network name" to "Nome da rede").
| readingnews wrote:
| At first I was like "OMG, this is going to be awesome, this
| person has a QR generator which will magically connect me to the
| WiFi with my password embedded in the QR somehow. I am going to
| have to read the source... This is gonna be great... but then,
| disappointment. It is just a card with my password in plain text.
| Why the heck would I ever print this out?
| black3r wrote:
| This is for public encrypted guest WiFi networks, to make
| guests lives more comfortable... you can scan this with your
| phone to automatically connect without needing to type the
| password which can come handy if the password is at least
| somewhat secure.
|
| Usually it's printed in the same places where you would
| actually print your plaintext Wi-Fi password, if you're already
| doing that, for example in restaurants (e.g. QR code inside a
| menu card that's only given to actual customers), offices (QR
| code inside meeting room for actual guests), airbnbs (QR code
| on a fridge inside your house), hotels (QR code inside the room
| with a router))
| tomjen3 wrote:
| Because it is now _trivially_ to let other people connect to
| your wifi.
| jackson1442 wrote:
| Wifi passwords aren't supposed to be secure. Really they're
| only to keep people off the network that you want to keep,
| well, off the network. The current method of connecting someone
| to wifi is usually just telling them the password. If the guest
| has a computer on the network (or a mac signed into the same
| apple ID as an apple device on the network), it's trivial to
| figure out a network password that was entered for you.
|
| If you're wanting a _really_ secure network, WPA2 isn't the way
| to go. You'd want to credential every user using 802.1X or WPA2
| Enterprise.
| slig wrote:
| Suppose you have a long password for your WiFi and want an
| easier way for friends to connect to your network without
| having to type a complex password.
| bndw wrote:
| a QR generator which will magically connect me to the WiFi with
| my password embedded in the QR somehow.
|
| This is indeed what it does, but it also includes the plaintext
| password in case you want to connect a device that doesn't have
| a camera, like a PC. There's an open issue for adding a "hide
| password" option. You could also just cut off or scribble out
| the password on the print out.
| Steve0 wrote:
| It depends on the qr-code scanner you have on your phone. The
| one on my android shows a button 'connect to this network'.
|
| In regards to security, you are completely correct. But this is
| to be used in cases where one would put a paper with the
| password on the wall, think of coffee shops. Saves some typing.
| Or you can put a card on your coffee table to help out your
| house guests.
| filleokus wrote:
| I'm guessing the whole point behind the "standard" is to allow
| quick and easy access to protected networks. It's an
| alternative / compliment to verbally telling someone the
| passphrase, or having it printed in clear text on a paper.
|
| Think of hotels / offices with guest networks. I use it for my
| wifi, my home network is not secretive enough to not let
| friends / family join it when at my place.
| [deleted]
| spikepuppet wrote:
| This is really cool! Good work!
| [deleted]
| hnov wrote:
| My iPhone has a pre-defined "Make QR Code" "Starter Shortcut"
| that you can invoke by typing "Make QR Code" in Home screen
| search. It basically generates a QR code of the same
| WIFI:S:$SSID;P:$PASSWORD;; format as wificard.io.
|
| https://en.wikipedia.org/wiki/QR_code#Joining_a_Wi%E2%80%91F...
| JorgeGT wrote:
| My Pixel 4a can also generate a QR by opening a particular
| network in the settings app and pressing <<share>>.
| vxNsr wrote:
| What? That's awesome I had no idea that came built in! Pretty
| cool!
| maxclark wrote:
| Thank you for this!
| ammar_x wrote:
| Really cool, despite that some comments show that generating such
| QR codes can be done with a simple command; because using this
| service is faster for me as a person who is not familiar with
| QRs.
| Softcadbury wrote:
| Love the source code, so clean. First time I see a makefile used
| like that with Docker and front commands.
| b3morales wrote:
| You might enjoy _The Language Agnostic, All-Purpose,
| Incredible, Makefile_
| https://blog.mindlessness.life/2019/11/17/the-language-agnos...
| y04nn wrote:
| I like to use make as it's available everywhere. I use
| Makefiles with podman to create images, containers, pods,
| start, stop them and display logs. With the alias 'm' for make
| I can execute complex actions with very few keystrokes. Also
| variables in Makefiles make it easy to updates labels, volumes,
| etc. But I would not use make for very complex projects.
| lifthrasiir wrote:
| Make is tremendously useful for running jobs with (static)
| dependencies. I used to run make for managing Docker instances
| until docker-compose became a thing.
| collsni wrote:
| Hey I almost gave my ssid and pw over to this guy. That's an
| interesting phishing technique
| hendry wrote:
| No password on my farm.
|
| Why bother setting a password in a non-crowded area?
| black3r wrote:
| Depending on how remote your farm is and how strong is the WiFi
| signal outside your premises (from a nearby public road, ..).
|
| Average case you are in the middle of bumfuck nowhere with a
| huge private property surrounding your WiFi and nothing's gonna
| happen.
|
| Worse case some script kiddie attacks your vulnerable router
| (if using default password) or a smart gadget (if you have some
| and it's a couple of years old) to join a botnet and get your
| IP address on a blacklist limiting your internet usability
| (blacklisted IPs may not be able to send e-mails, may get
| captchas on major websites like Google, ...)
|
| Worst case someone driving around noticing you have an open
| WiFi may drop a battery/solar powered raspberry pi with a 4G
| modem nearby your WiFi and use your WiFi as an untraceable
| VPN/proxy to perform some illegal stuff (e.g. upload child
| pornography or perform some serious hacking) and getting you in
| trouble with the law.
| collsni wrote:
| I almost gave my SSID and password over to this guy, that's an
| interesting fishing technique.
| _def wrote:
| I got a QR code like this on the wall with the SSID and the
| password written on the paper as well as a NFC tag with the wifi
| credentials between the paper and the wall.
|
| I think nobody ever has scanned the QR code.
| PenguinCoder wrote:
| I have a QR code for guests and Wi-Fi too. Unfortunately it
| doesn't seem to work as expected on iphones but works fine on
| Android. Wouldn't think a QR code was platform specific.
| ValentineC wrote:
| I just tried generating a QR code on the linked site, and
| scanning it with my iPhone on iOS 14. Seems to work fine.
| war1025 wrote:
| Do you mean they use the NFC tag or manually enter the username
| / password, or just that no one uses any of it?
| memming wrote:
| I'm here for the top comment.
| wooptoo wrote:
| The format is:
|
| WIFI:S:<SSID>;T:<WPA|WPA3|WEP>;P:<password>;;
|
| And can be generated with any qrencode program.
| notyourwork wrote:
| iOS share password functionality has really simplified things for
| guests. This is a neat idea for an AirBNB or similar short term
| rentals.
| sq_ wrote:
| I'm such a huge fan of that functionality. It doesn't always
| work perfectly (i.e. pick up someone nearby trying to join the
| network quickly), but when it does, it's such an awesome
| example of tech making our lives better in such a simple but
| helpful way.
| [deleted]
| willis936 wrote:
| The QR code seems to have the same amount of friction as the
| share password. It's something a guest can do asynchronously
| without needed someone else to do something.
|
| Also, I like the use of guest SSIDs. My guest SSID is just like
| my main SSID but with L2 filtering for all traffic not going to
| the gateway. Guests can use my fast internet, but just not
| interact with my LAN or other guests. I also don't enforce WPA3
| only on my guest network for legacy support.
| kurthr wrote:
| This is probably safe, but I really can't bring myself to do it.
| blantonl wrote:
| The source code is here, so run it yourself.
|
| https://github.com/bndw/wifi-card
| OJFord wrote:
| If you're going to do that, simpler to just use `qrencode`
| with the same contents as this is using:
| WIFI:T:WPA;S:${ssid};P:${password};;
|
| Unless you need to frequently generate WiFi login QR codes
| (single purpose!) from a device without a convenient command
| line, e.g. mobile, there's not really a reason to self-host
| this.
|
| (It makes sense for OP/the project to host it as a demo and
| for people who don't care or trust it to use though - I'm not
| hating on the site existing.)
| unwiredben wrote:
| Running it on Firefox with web inspector opened, I saw no
| network traffic at all after the page loaded, so it wasn't
| sending the network name or password anywhere off my device.
| gruez wrote:
| This method picks up "most" requests, but not all. eg.
| websocket and webrtc can be used to exfiltrate data but it
| won't show up on inspector.
| kroltan wrote:
| They do show up, not the connections themselves, but the
| initiation, no?? At least I always see lots of 101
| Switching Protocols responses on sites that use websocket,
| it might be some sort of nonstandard gateway though. Never
| used it so dunno.
|
| Of course even if that's the case, you gotta load the
| website with the network inspector already open, to see the
| initiation.
| switz wrote:
| You can "hide" a websocket connection behind a shared
| worker and that won't show up in the network connection
| tab.
|
| I do that on a site of mine, but for a less nefarious
| reason: sharing a websocket connection between multiple
| tabs.
| johtso wrote:
| Are there any tools to run an untrusted client side web
| application isolated from the internet?
| boring_twenties wrote:
| useradd -m luser
|
| iptables -I OUTPUT 1 -m owner --uid-owner luser -j REJECT
|
| Now log in as luser and run your browser.
| r1ch wrote:
| This would still allow data exfiltration via DNS. It really
| needs to be done at the browser level.
| gruez wrote:
| turn off wifi/unplug network cable?
| AndrewOMartin wrote:
| and never plug back in again ;)
| nicolaslem wrote:
| A private browser window should take care of this
| problem.
| memco wrote:
| Probably should also run it in a sandboxed tab and delete
| all site related data after use. It is possible for sites
| to detect network connection and sync data when a
| connection is re-established.
|
| EDIT: you could also just run the local server in offline
| mode and shut it down before you re-connect.
| mynegation wrote:
| This is a nice idea! I once whipped up a shell script to do the
| same thing.
|
| UX feedback - disable autocorrections on the input fields [1],
| you may want to trim white space as well.
|
| [1] https://davidwalsh.name/disable-autocorrect
| baliex wrote:
| Please don't trim whitespace, I ended up on a network recently
| which had a space on the end of the SSID
| ThePowerOfFuet wrote:
| I hope you told them to fix their shit.
| bndw wrote:
| Thanks for the tip, added in https://github.com/bndw/wifi-
| card/commit/1924298335692eebc79...
| gruez wrote:
| On ios it works fine with the default camera app, but what about
| android? I'd guess support varies depending on vendor?
| 77pt77 wrote:
| It works on my stock android photo app.
| sq_ wrote:
| If I remember correctly from playing with this stuff a few
| years ago, there's a simple text format for WiFi SSIDs and
| passwords that's recognized by both iOS and Android, among
| others.
| j03b wrote:
| Seems to be using the same format as https://qifi.org/, which
| lists supported devices, but of course due to the lack of
| native QR on most Android devices it's per-app rather than per-
| phone.
| captn3m0 wrote:
| It's 2021 and Android still has fragmented QR scanning.
| vxNsr wrote:
| I don't get it... is it that every single android oem makes
| their own camera app? Or did google choose to just not have
| barcode/qr code as part of the default camera app?
| graton wrote:
| The native photo app supports QR codes on my Google Pixel
| phone.
|
| Once it sees a QR code then it shows some text that you can
| touch to open the link.
| renewiltord wrote:
| Cool app, dude. Thanks for sharing.
| BugsJustFindMe wrote:
| 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?
| verelo wrote:
| It's the Rube Goldberg style of software development? Didn't
| you hear? It's super popular with the kids!
| banana_giraffe wrote:
| 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/
|
| 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 wrote:
| 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 wrote:
| Ahh, right you are! All fixed.
| cortesoft wrote:
| 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.
| elondaits wrote:
| 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 wrote:
| > 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.
| catchmeifyoucan wrote:
| 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 wrote:
| 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 wrote:
| Ease of distribution and sandboxing
| Spivak wrote:
| 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 wrote:
| 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.
| ozfive wrote:
| No, how can you not know the difference between RAM and disk
| in a server context? What sort of programmers are these?
| drusepth wrote:
| I know the different between RAM and disk in a server
| context (what sort of programmer wouldn't?!), but I've
| worked pretty exclusively in no-persisted-storage
| environments (mostly Heroku) for ~5 years now, where
| referring to "saving" files/data outside of a DB context
| almost exclusively means "save to memory" and I routinely
| run into problems whenever my stack requires downloading
| any sort of third-party library that would have to persist
| outside of RAM (e.g. downloading NLP libs).
|
| When you abstract "storage" into "my library/tools save
| state somewhere" (and god forbid you include localStorage
| into the mix!) and don't deal with the hardware itself, I
| could see how a lot of new-ish coders wouldn't be able to
| differentiate RAM and disk.
| easton wrote:
| 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?
| firebaze wrote:
| 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.
| ajsnigrutin wrote:
| It could be meant not in a way of "this is ram vs this is
| disk", but "we have a 1tb dataset, what kind of a server do
| we need?", and the person not knowing enough about
| databases to think they need 1tb of ram to be able to run
| it.
| sam0x17 wrote:
| You sure you didn't have a computer architecture course?
| Most CS programs it is a required course
| mod wrote:
| What is a required course?
| easton wrote:
| I did (actually it was last semester) but they didn't do
| basic definitions, it came with an assumption you knew
| what the parts of a computer were.
| kyawzazaw wrote:
| I think that's why Scott Hanselman started this series
| https://www.hanselman.com/blog/new-youtube-series-
| computer-t...
| vsareto wrote:
| >A lot of developers only know the new, needlessly
| complicated ways of doing things.
|
| Yeah that was inevitable in an industry that moves quickly,
| likes new stuff, and prefers fast, superficial learning when
| that's all you need to get your product out of the door.
| Google and StackOverflow are probably controlling a decent
| chunk of decision making these days such that you don't need
| to think about solutions too much.
| renewiltord wrote:
| 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 wrote:
| No, that's not the best tool for the job, that's just the
| most convenient tool for the job.
| bndw wrote:
| 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 ;)
| manuel_w wrote:
| > 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 also used to do this until I switched out Make by Just[1].
| I find it worth a recommendation.
|
| https://github.com/casey/just
| sneak wrote:
| Just like perl and grep, I stick to make because it's
| likely to be already available everywhere I need it. Such
| is the tyranny of the installed base. :/
| weejewel wrote:
| But now you're paying for keeping a server online, whereas a
| GitHub page could've hosted this static website for free.
| shepherdjerred wrote:
| There's no reason that this would have to be hosted on a
| traditional server.
| cyral wrote:
| React is compiled to static content so this could be hosted
| with GitHub pages too
| cinntaile wrote:
| He did this for fun, his motivation wasn't to find the
| cheapest way to host his content.
| dividedbyzero wrote:
| 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.
| lionkor wrote:
| make all and make run would be more standard, no?
| [deleted]
| asiachick wrote:
| To be slightly snarky, because the author wants to record your
| WiFi and Password.
|
| That it was a learning project, ok. I guess.
| xeromal wrote:
| 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.
| sergiomattei wrote:
| 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 wrote:
| There's a lot of that around here
| valbaca wrote:
| 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
| remram wrote:
| Make a project -> learn to code
|
| Share a project -> get opinions on it
|
| What's the problem?
| ZoomZoomZoom wrote:
| > 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?
| occz wrote:
| There's a simple explanation: people in this context refers
| to separate groups.
| esolyt wrote:
| 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.
| fredgrott wrote:
| who would believe such as statement that info is not collected or
| sent?
|
| I have some prime real estate in Florida to sell you if you do!
| MattGaiser wrote:
| Not really sure what use knowing my wifi password would be
| unless you were specifically stalking me anyway.
|
| You have a password and an SSID for somewhere in the world
| (maybe, if they didn't lie) or if tracing IP addresses,
| somewhere in a neighbhourhood or city).
|
| Seems about as useful as an MH 370 flight data recorder
| password (if such things exist). Yes, you could break into the
| black box with it, but that's not the real problem.
| 10000truths wrote:
| Luckily, you don't have to believe - you can see for yourself
| by opening Developer tools in your browser and monitoring
| requests under the Network tab.
| bellyfullofbac wrote:
| I don't think this simple app would have bad intentions, but
| your workaround isn't bulletproof either. The fact that the
| user has opened Dev Tools is detectable (I think the console
| object becomes != null?), so if the author has bad
| intentions, he can just unload the bad stuff when he detects
| that Dev Tools has been opened.
|
| I've seen some sites unload the page and set up a breakpoint
| when Dev Tools is opened, so you can't even browse the source
| in it. I guess the trick would be to download the page's
| sources using wget, but if they used some obfuscation it
| becomes more painful to figure out what files need to be
| downloaded...
| [deleted]
| libria wrote:
| No belief is required; the source is available.
|
| Open your network tab and watch for traffic if you want. Or
| turn off wifi after loading.
| qifita wrote:
| This can be done locally in the browser with qifi:
| https://github.com/evgeni/qifi
| xattt wrote:
| But how else will people blindly enter their wireless
| credentials into a honeypot?
| jacobmischka wrote:
| This app also does this locally in the browser.
___________________________________________________________________
(page generated 2021-07-11 23:00 UTC)