TuesDog

ADHD Zine

Recently, as part of my never ending notetaking quest, I bought a Rocketbook. If you have never heard of them before they are a reusable notebook that you write on, scan the notes to “the cloud” or your email, then rinse and repeat… literally! They use Pilot Frixion erasable pens that wash off really easily, and the Rocketbook app basically scans the page and processes it with super high contrast to get clean, crisp notes that can then be analyzed with OCR so you can search through your notes on the computer later on.

My first doodle in the Rocketbook.

After writing in the book for a while I wondered what drawing in it would be like. The ink pools a little and takes up to 15 seconds to dry, so you have to draw a little tactically and your a little limited with colours because of the Frixion pens being the only good compatible pens. On the other hand, limitation breeds creativity and I was caught up in some great doodles! Then I had the idea of making a fully functioning website from my notes with links that are hand written and underlined just like hyperlinks in a webpage! How cool! Well… it turns out that you can totally do this and it is SUPER easy too.




Map and Area HTML Tags

To place clickable links inside an image using pure HTML you can use the <map> and <area> tags. Here’s a quick how-to guide!

<!-- add your image tag and include the 'usemap' attribute -->
<img src="your/image/here.jpg" usemap="#map-name" alt="My image" />

<!-- next, add the map tag with the name that matches the 'usemap'
     of the img tag (minus the '#') -->
<map name="map-name">
	<!-- inside the map tag go the area tags for each link you want to add -->
	<area shape="rect" coords="10,20,60,40" href="www.google.com" />
	<area shape="rect" coords="50,50,100,100" href="www.yahoo.com" />
</map>

There are different “shapes” you can use for the area tags:

  • rect - a rectangle
  • circle - a circle
  • poly - a polygon that can be used to create any shape you need

The coords work slightly differently for each shape. For more info use W3Schools documentation.

NOTE: The clickable areas will break if you add any CSS sizing to the images, or if the screen size/resolution changes. The coords are referencing pixel positions so you’ll need some JavaScript in order to be able to adjust the coordinates dynamically. Luckily for you I have this code available on GitHub: Guitaryan93/dynamic-area-tags

ADHD Zine

Using my Rocketbook I have created a zine about living with ADHD. It has been a very cathartic experience and I am really happy with how it came out! Click here to read it.

I wasn’t sure what to make the hand-written website about so I started looking up inspiration. When I look at the initial doodles I was getting oldschool zine vibes so I started looking up some online. There are absolutely tons of them out there and they are like tiny projects just bursting with creativity! Perfect for someone with ADHD because you can make a zine and finish it in a single sitting or a few nights before your enthusiasm wanes due to the ADHD mind and the broken reward system. I might have to look into creating more zines or zine like projects? Maybe this is the ultimate project management style for people with ADHD?

🏡
^