I made this little web app this weekend. The most interesting part is probably the Markdown widget, which you can see an example of here: https://github.com/veggiedefender You'll notice that there...
I made this little web app this weekend. The most interesting part is probably the Markdown widget, which you can see an example of here: https://github.com/veggiedefender
You'll notice that there are clickable buttons implemented in extremely constrained Markdown (GitHub has an aggressive allowlist of acceptable tags and attributes, which precludes obvious things like style or actual buttons)
I had to get creative and channel 1990s web dev techniques -- if you peek into the source you'll see some absolutely awful code. It uses a table as a responsive wrapper, and five images, sliced apart and glued back together with align="top" in order to build out the UI buttons. I think the end result is pretty neat!
Congratulations! It looks really well implemented. I'm looking to create a webring as well for the users of midnight.pub, to circle through personal websites. I haven't given too much thoughts...
Congratulations! It looks really well implemented. I'm looking to create a webring as well for the users of midnight.pub, to circle through personal websites. I haven't given too much thoughts yet, but I like the simple pop-up with the next, prev and random link. Aren't you afraid it could be blocked by pop-up blockers though?
Yeah, getting blocked by pop-up blockers is definitely a risk. Most browsers won't block the pop-up if it is opened by a user-initiated event handler like a click, so I'm less worried. Old school...
Yeah, getting blocked by pop-up blockers is definitely a risk. Most browsers won't block the pop-up if it is opened by a user-initiated event handler like a click, so I'm less worried.
Old school webrings used iframe or frameset for browsing the ring, which I think is the ideal solution. Check out geekring's iframe implementation for an example.
Unfortunately, you can't do that with GitHub profiles because GitHub sends frame-ancestors 'none' and X-Frame-Options: deny headers which block iframing (for good reason, as it protects against clickjacking attacks). So the pop-up widget is really the only way I found to get the same type of interaction within those limitations.
Love the design (and concept), however in comparison to the rest of the text on my readme this feels huge. Would it be possible to have a smaller version?
Love the design (and concept), however in comparison to the rest of the text on my readme this feels huge. Would it be possible to have a smaller version?
Sorry for the late reply -- that's definitely valid, the widget is pretty gaudy. A few members have made modifications to make it less big/bright, which you can look to for inspiration:...
Sorry for the late reply -- that's definitely valid, the widget is pretty gaudy. A few members have made modifications to make it less big/bright, which you can look to for inspiration:
I'm also thinking of adding an option in the "onboarding" flow for a less obtrusive widget, but I'm quite busy atm so that would come by next week at the earliest.
Don't worry! The very fact that this is already a thing is awesome, also thanks for sharing these other profiles, might try and implement something similar myself.
Don't worry! The very fact that this is already a thing is awesome, also thanks for sharing these other profiles, might try and implement something similar myself.
I made this little web app this weekend. The most interesting part is probably the Markdown widget, which you can see an example of here: https://github.com/veggiedefender
You'll notice that there are clickable buttons implemented in extremely constrained Markdown (GitHub has an aggressive allowlist of acceptable tags and attributes, which precludes obvious things like
styleor actual buttons)I had to get creative and channel 1990s web dev techniques -- if you peek into the source you'll see some absolutely awful code. It uses a table as a responsive wrapper, and five images, sliced apart and glued back together with
align="top"in order to build out the UI buttons. I think the end result is pretty neat!Congratulations! It looks really well implemented. I'm looking to create a webring as well for the users of midnight.pub, to circle through personal websites. I haven't given too much thoughts yet, but I like the simple pop-up with the next, prev and random link. Aren't you afraid it could be blocked by pop-up blockers though?
Yeah, getting blocked by pop-up blockers is definitely a risk. Most browsers won't block the pop-up if it is opened by a user-initiated event handler like a click, so I'm less worried.
Old school webrings used iframe or frameset for browsing the ring, which I think is the ideal solution. Check out geekring's iframe implementation for an example.
Unfortunately, you can't do that with GitHub profiles because GitHub sends
frame-ancestors 'none'andX-Frame-Options: denyheaders which block iframing (for good reason, as it protects against clickjacking attacks). So the pop-up widget is really the only way I found to get the same type of interaction within those limitations.Thanks a lot for this answer! I didn't know about geekring - it's an interesting implementation!
Love the design (and concept), however in comparison to the rest of the text on my readme this feels huge. Would it be possible to have a smaller version?
Sorry for the late reply -- that's definitely valid, the widget is pretty gaudy. A few members have made modifications to make it less big/bright, which you can look to for inspiration:
https://github.com/runxel/
https://github.com/19h/
https://github.com/splitbrain/
https://github.com/mehalter/
I'm also thinking of adding an option in the "onboarding" flow for a less obtrusive widget, but I'm quite busy atm so that would come by next week at the earliest.
Don't worry! The very fact that this is already a thing is awesome, also thanks for sharing these other profiles, might try and implement something similar myself.