The Reading Project has a new domain name and email address. Our domain name is now readingproject.au and I can be contacted by email using bikerbuddy@readingproject.au.
I’ve long resisted the move to a purchased domain name because it was spending money without benefit. But changes to Gmail in the last two months mean that almost all the newsletters I have sent out were blocked by Gmail, which is used by the vast majority of our subscribers. The fact that I was using a Gmail account to send the newsletter also probably didn’t help. Kit.com, the company I use for the newsletter, strongly discourages the use of free emails like Gmail to send mailouts. But I’d been burned last year when another company could not explain why the emails they provided didn’t work.
But buying the domain name also gave me a tailored email account to use with kit.com. I sent a new newsletter out this morning and based on the response, it appears to have fixed the problem.
If you would like to receive the newsletter each month, you can fill in the form at the end of this page, where it is on most pages of this website. Or you can use this one which I have embedded in this post:
- bikerbuddy
The original image I mapped in 2022 was from a promotional pamphlet for the bookstores in the Blue Mountains, the area we live west of Sydney
This post will probably only interest other webmasters on Neocities, the platform that hosts this website.
Yesterday I wrote about the rug Victoria made me and I said that putting the blog post together took some time. I said I would probably write today about why that post took so long to create. This was because the image map I created from the picture of the rug required me to solve technical problems that had stumped me in the past. I originally wrote about an image map I attempted in a blog on 2 September 2022. I could provide the link but you can look that post up in the Blog Archive, accessed from the menu above, if you want.
To create the original map, I used standard xy coordinates to create hotspots over the image. It was a while into this process before I realised that on smaller monitors the image would either flow outside its div, meaning some of the hotspots could not be accessed, or I would have to allow the image to shrink, which meant the hotspots would increasingly go out of alignment as the image shrank. This was a problem I didn’t solve in 2022. What I did do, however, was use a jquery plugin, maphilight.min.js, to do the nice red dotted highlight around each hotspot when a mouse hovered over it.
Fast forward to last month when I was given the rug. I wanted to give a sense of the link between the rug and the books I had reviewed. As part of that I wanted to solve the alignment issue for creating an image map. My starting point was that I knew how to create the coordinates and use the jquery plugin. I soon found another plugin, jquery.rwdImageMap.js, which recalculated the hotspot positions as the image shrank, allowing them to remain together. Great! Except the maphilight plugin then stopped working. They didn’t like to play together.
I tried various other ways to highlight the hotspots while hovering, but nothing worked. I decided that maybe I should just be satisfied that the recalculation of the coordinates worked, since I could make titles appear when I hovered over the hotspots, and the hand cursor appeared too.
But then I went on a quest, thinking there must be some way to make both jquery plugins work together. Over the course of a few days, I found a number of pages which suggested it could be done. Some of them suggested what I had already tried. Others had different instructions which I tried, but they didn’t work. I eventually gave up.
Then I decided to try something I had thought would be beyond me three years. Everything I read and every example that truly worked the way I wanted my map to work used SVG images (Scalable Vector Graphics – sounds promising, right?). The problem was I had no way of creating them (I thought) except to use online tools, all of which returned terrible results. I decided to try Photoshop and discovered that while I can’t edit SVG in photoshop, I can export images as SVG files.
The next problem was that the syntax for using SVG files is different to the syntax I used to create the map in 2022. Even the coordinates are written differently, meaning I couldn’t use photoshop to read them. I read everywhere that Adobe Illustrator was the program I needed to solve my problems, but I don’t have Adobe Illustrator, and I didn’t fancy paying for it for an experiment. So, I looked for other equivalents that were free. I found Inkscape, a free program that claimed could do what I wanted. I downloaded it and installed it and started to play with it two days before I wanted to post the blog. I was surprised that I managed to get the basics of what I needed from the program very quickly. I imported the image of the rug and mapped out the 64 squares I needed. Then a search around the menu brought me to a promising item, the XML editor. I recalled that this was used for editing SVG. I opened it from one of my mapped squares and found the coordinates I needed.
After that, it was merely a matter of finding an example of an SVG map online to see how it was written. From there I could create my own page and I imported the coordinates for each map square one at a time. Hey presto, the whole thing now worked!
Except that I didn’t like the default highlight. I searched around a bit more to work out how to style that. I decided to make it look like the red dotted border I had in 2022 without a background colour.
This might seem like a lot of effort for one blog post, but I decided it was worth it for the following reasons. First, Victoria had put in a lot of time and effort to create the rug, and I wanted to do the best I could to acknowledge her effort and thank her. Secondly, solving the technical problems means I now have another trick up my sleeve for this website. I might be able to use it for a graphic menu sometime in the future – perhaps for a special project – and it will also allow me to identify features or people in crowded photos if I need to. I’m sure there might be other uses.
If you’re interested in this topic and have any questions drop me a line.
- bikerbuddy
This blog post has taken me longer to produce than any other blog post I have ever written. I’ve even rewritten it just before I put it up because I wanted it to be about the Reading Project Rug rather than why it took me so long. I might save the details of that journey for tomorrow.
Winter has just begun in Australia and Victoria made me a crocheted rug for the cold days. I have now pronounced this rug to be the Official Reading Project Rug. Victoria presented me with the rug about a week ago. I said I would write a blog post about it because the rug was inspired by what is apparently a thing that people who both love to read and crochet do. People make rugs with squares that use the colour palettes from the covers of books they have enjoyed, and so each square of the rug comes to represent a book. Victoria chose 64 books I have reviewed for this website to create my rug.
I decided that if I was going to write a blog about this, I didn’t want to just display a picture of the rug. I wanted someone reading this blog to understand which book each of the squares represents and to make it interactive on some level. So, I created a hotspot on each square. They reveal which book the square represents and provide a link to the review I wrote for the book.
So, here is an interactive picture of the rug. If you run your mouse over it you will see the pointer cursor appear over each square along with a red border, as well as the title and author that each square represents. On touch screens the red border will appear if you hold your finger on the image for 2 seconds. The links work on touch screens, too.
The Reading Project Rug
I was hoping to have images pop up showing the book cover next to its respective crocheted square, but the long journey I took to create this, issues of space, aesthetic appearance, practicality and time constraints meant I abandoned this idea. So I decided just to display those images below so that what Victoria has done can be made apparent. The first square of the rug at the top left represents Tim Winton's Juice. I have separated it from the rest of the list because Victoria based the crochet square on the hardcover of the book, not the dust jacket which would normally be accepted as the cover image. I've displayed both the cover and the dust jacket next to the crocheted square in this one instance:
Juice
The rest of the list follows:
The City and its Uncertain Walls
The Fifth Season
Improper Stories
The Women of Troy
The Silence of the Girls
Clytemnestra
The Wasp Factory
Middlesex
The Monk
Orbital
Girl, Woman, Other
Shades of Grey
Red Side Story
James
Electra
Silas Marner
Call for the Dead
The Ark Sakura
The Song of Achilles
Yellowface
Kairos
The Mill on the Floss
A Murder of Quality
The Bee Sting
David Copperfield
Demon Copperhead
The Singapore Grip
The Sand Digger's Skull
The Line of Beauty
Windhall
The Red and the Black
The Oresteia
Elektra
The Adventures of Huckleberry Finn
Kallocain
The Safe Keep
The Corner that Held Them
Stone Yard Devotional
The Adventures of Tom Sawyer
The Iliad
Wanting
The Escapades of Tribulation Johnson
The Crocodile's Kill
The Good Wife of Bath
Tall Stories
The Coffin Makers Apprentice
The Problem with Murder
All the Pretty Horses
Child of God
Question 7
Coming up for Air
Morgan's Run
Decline and Fall
Prophet Song
The Man in Black
This Other Eden
Creation Lake
Time Shelter
King Kong
Lolita
A Brief History of Seven Killings
Dr. No
Babel
- bikerbuddy
Comments about blog posts can be written below. If there are multiple blog posts please make it clear which you are responding to. Any comments will be archived with the blog posts at the end of each month.
Contributions - Submit a Review
Contributions to the Reading Project are welcome. But before you send us a review please check our contributions page by clicking the button below:
© Reading Project, 2017-2025