DEV Community

Cover image for How I made any browser tab my Notepad
Keme Kenneth
Keme Kenneth

Posted on

How I made any browser tab my Notepad

I like speed, and sometimes opening a notetaking app while you're on a page is just too slow for the thoughts going through our fast thinking minds. In that case, a quick browser tab is all you need to start jotting.

contenteditable might as well as be the most powerful HTML attribute in this regard.

All I did was to bookmark a tiny HTML script. I then made sure the bookmark icon (yes, I added an icon 😎) is visible when I hit new tab, and I have a ready cursor take my notes.

I applied basic styling, and also prevented accidental tab/browser closure.

_Here's the script. Customize it to your liking ✌️ _

data: text/html, <html><head><style>body::before{content: "Make great notes today!";color:cornflowerblue; font-size:3rem; margin: 2rem 0px 3rem;position:absolute;top: 0;}</style><script>window.onbeforeunload%20=%20e%20=>%20%20(e.returnValue%20=%20"Please,%20stay")</script><link%20rel="icon"%20type="image/png"%20href="https://img.icons8.com/color/72/typewriter-with-tablet.png"%20sizes="32x32"><title>Notr%20by%20Zeelz</title></head><body%20contenteditable%20style="font-family:%20'Monaco',%20sans-serif;font-size:1.1rem;line-height:1.4;max-width:60rem;margin:0%20auto;position: relative;padding:4rem;padding-top: 7rem;background-color:rgb(53,%2054,%2058);color:darkgray">
Enter fullscreen mode Exit fullscreen mode

ProductivityTips #Notetaking #HTML

Top comments (0)