Since more and more people have been noticing DEV's offline page, I thought I would do a quick tutorial on how to replicate the code for it!
Canv...
For further actions, you may consider blocking this person and/or reporting abuse
I've always loved working with the canvas element. Back when I still wanted to be a games developer, it seemed like the quickest watly to make an (almost, because it was a few years ago) browser agnostic HTML5 game without having to rely on this party adons and plugins.
I even ended up writing a super simple game (which I called "Run Away") using it and vanilla javascript. I don't think that I have it hosted anywhere right now (I might fling it up on Netlify tonight), but the source code is available at my github. I'd love to see what folks think of it.
EDIT:
And it's live. You can now play the game over at Netlify.
One thing to note: it has support for touch (on mobile and tablets), but it doesn't use it. So you'll need to use a physical keyboard to play it.
tl;dr: run away from the scary monster. The further you run, the more fatigued you'll get. The longer you last, the hungrier (and faster) the monster gets.
Interactive offline pages are the new funny 404 pages. 💜
Holy cow. This is the first tutorial I've read of yours. You really explain things systematically. Cheers :)
thank you so much!!!
Seriously. Crushed this Ali 💪
This is amazing Ali! I love the idea
Love this article, thanks!
Will be using this for our 404 page, kthanksbye.
This is so cool! When my wifi cut out and I saw it the first time, I tried to learn how to code it but couldn't quite figure it out. Thank you for this! Also, I really like that you put your style into the design with the colors and everything. When I saw that page, before I noticed your initials at the bottom, I thought, "Hey, Ali made this."
Thanks for the fun post Ali! You've inspired me to implement it myself in Blazor.
Creating DEV's offline page using Blazor
Aaron Powell ・ Jul 5 ・ 8 min read
Found this lying around in the millions of tabs I have open on my phone - looking forward to diving in the near future. Seems pretty straightforward and is surprisingly easy to follow along to (for some reason I always figured working with the canvas would be complicated, so I never bothered).
Amazing job :)
Really nice tutorial Ali. I recreated this as a React Component
React Component to draw on a page using Hooks and Typescript
Ankur Sheel ・ Aug 8 ・ 3 min read
Sweet lovely post. Thank you for the tip and wonderful examples!
Nice Page!
1 small feedback I have is "Should we add
cursor:pointerfor those color so user know they're clickable" :DHmm maybe I can make a pull request for that too :D
github.com/thepracticaldev/dev.to/...
Great write up Ali :)
Recreated this with Rust and WebAssembly :))))
dev.to/sendilkumarn/create-dev-s-o...
Excuse me but this is FLIPPING COOL
Reminded me of an old high school project that I did one time. Makes me want to update that repo! Thanks @aspittel 😄 On a side note, You might also want to disable scroll on iOS when you try to draw.
Speaking of DEV offline page, I encountered this today (for the first time). Being pretty sure I was in fact connected, tried visiting in Chromium instead of Firefox and DEV operates normally.
I once tried doing something like that but with WebSockets (or maybe WebRTC) for collaborative drawing, it was a lot of fun, I should try to finish that project one day.
How is this offline page triggered? I always have the feeling to end up there for absolutely the wrong reason, like go backwards and forwards in the browser or opening a tab in a container :(