Hacker News Reader

Comment by dragonwriter | Hacker News Reader

If the issue is really making the simplest web app, the principal of YAGNI should be applied liberally.

Complex dependencies that add up-front development burden should be added only if, and only when, there is an expected benefit justifying the cost.

View on HN

Amen! I wrote a handful of offline-cacheable HTML5 apps made simply with CSS, vanilla JS, and HTML. Nothing more! Don't write a single line or character you don't need in the final result.

I have 'app update fatigue' and often after I update an app I end up preferring previous versions I can no longer install or use again once they're 'updated away' and no longer current. My wants for what my phone or tablet can do are really simple, but I just don't want to have to wait to update anything I've already taken time to save to be sure I'd have when I needed it.

So I wrote the following apps and they all have manifests and icons. I have plenty more pages I use that aren't as polished (like http://staticresource.com/base64.html) but this whole exercise has made me feel like I have some control back over my phone.

Doesn't matter iOS or Android, I can always run my crappy little apps equally as crappy everywhere, and I know they'll never need updating, needlessly waste my battery, include malware that's tracking me or spying on me, and they do much of what I would use the device for anyway! If I've learned anything it's that building your own tools is VERY worth it, and I should invest more time in learning how to do this and doing it :)

Sketch

- View: http://staticresource.com/sketch.html

- Source: http://staticresource.com/inspect?/sketch.html

Sketch is a browser-based sketchbook! Draw with the mouse or your finger and export SVG by email or download.

---

SpeedTest

- View: http://staticresource.com/speedtest.html

- Source: http://staticresource.com/inspect?/speedtest.html

SpeedTest is for responsive web testing. Load a URL into the input and press Go or hit 'enter' to load a page into the window below. Pressing the buttons (or keyboard keys 1-0) will resize the window allowing you to quickly test sites at a variety of widths on desktop, and allow you to test sites at widths other than your device width on mobile.

---

Reminders

- View: http://staticresource.com/reminders.html

- Source: http://staticresource.com/inspect?/reminders.html

Reminders is a lightweight reminders app that uses localStorage. Helpful for grocery lists or to-do items.

---

Encode/Decode

- View: http://staticresource.com/encode.html

- Source: http://staticresource.com/inspect?/encode.html

Encode text by shifting its unicode character range. Decode by reverting the text back to the regular character range.

---

Clock

- View: http://staticresource.com/clock.html

- Source: http://staticresource.com/inspect?/clock.html

Analog clock made from JavaScript and CSS

---

Snake

- View: http://staticresource.com/snake.html

- Source: http://staticresource.com/inspect?/snake.html

Move the mouse or touch the screen to draw a rainbow snake on the screen

---

Shuffle

- View: http://staticresource.com/shuffle.html

- Source: http://staticresource.com/inspect?/shuffle.html

Tap the page to draw a new random card and roll a die (unlimited decks)

Virtual Deck of Cards

- View: http://staticresource.com/deck.html

- Source: http://staticresource.com/inspect?/deck.html

1 deck of cards, shuffled,flippable, no rules, no dealing. You can play solitaire, it's just like a real deck of cards you have to deal it yourself :)

---

Calc

- View: http://staticresource.com/calc.html

- Source: http://staticresource.com/inspect?/calc.html

Calc is a very basic calculator to demonstrate how JavaScript can think about strings

---

Piano

- View: http://staticresource.com/piano.html

- Source: http://staticresource.com/inspect?/piano.html

Piano is a small synth with a piano keyboard, capable of generating square waves on the piano scale to make noise for tuning things, or sketch out a melody, or just to jam around when bored.

I also have my own personal web-based 'command line interface' called JOE that end up being my most-used website and app on whatever device I'm using. I use this to check the weather and USD at least once daily, plus many more times for other things: http://staticresource.com/

I share your motivation -- a while back I wrote a web app for myself that gave me my daily checklist. It was a great experience. Your apps have renewed my interest in this idea and given me some inspiration. Thanks!

is there a reason you decided to list all of these apps unsolicited? nobody is going to read these

Yeah! A couple of years ago I thought JavaScript was hard, and I couldn't figure out how to do what I wanted. Somebody posted a teeny tiny code editor here on Hacker News and seeing the source code sparked something, and now I'm writing and releasing my own HTML apps and tools that help me and others.

I listed these here (with the source) to show how small and how LITTLE code you need. Each of these files are single-file apps - icon included! Many of these I either started or created on my iPad, showing that building HTML apps can be so simple that you can execute on the device itself.

I'm just putting it here hoping it can help somebody else. If that's no you, that's fine - but if it is I'm glad I took the time to write them out :)

I looked at them and bookmarked your comment listing them. Thanks for posting them.

I looked at a couple. Probably for the same reason a girl in the mall looks at how other girls are dressed. And my analysis... OMG such a slut! (kidding... but I do like looking at other people's work).

is there a reason you decided to be unpolite unsolicited? nobody is going to appreciate that

What's up with decoding the JS and using eval?

any time you see 'encoded' JS it's just the canvas-based icons (like this: http://codepen.io/tomhodgins/pen/VvjNKq ) being minified and encoded just to keep it out the way.

If I made the icons as PNG's I'd have embedded them as `base64` encoded blobs of data, but in this case the icons are JS that gets decoded and run to draw the icon, then attach it to the page as favicon and apple-touch-icon.

I wrote a short post about how I put together these teeny tiny HTML5 apps if you're interested: http://codepen.io/tomhodgins/post/building-an-html5-app-for-...

Reply on news.ycombinator.com