fine print
Everything you want to know but are too afraid to ask... But in case you do feel curious and bold, you can also send me an e-mail.
Now, let me take you down 'cause I'm going to tell you the story of a laywoman who set out to discover the magical wonders of web design. Step right this way!
// Concept --tent (updated now and then)
hire coach yellow! read all about CSS, more CSS, JavaScript, HTML and SVG! And fonts!ye little gobshite😛why is the website named like that? Song (Fool on the Hill?)
Laboratory scene important & serious numbers!
credits and stuff. Lunch mangoes tropical
Stripper + Band write me a letter, maybe? Grab a button?
the continuing story of web design
You're looking at a fully responsive, mobile friendly layout - you might have noticed already, given that most people these days use their phones to browse the web.
In fact, having a bash at designing a nifty responsive layout was the main motivation for me to register with Nekoweb.
The result - a CSS grid layout, which was a tad frustrating to code.
i love css
I'm pretty old-school; my very first layout was a two column <div> layout with an anime header and stretched background.
My two other websites ⧼💖 ✌🏻⧽ are very basic but look rather polished thanks to various CSS tricks (and their naked <body> looks great, too - I'm a stickler for structure).
To make those work on mobile devices, all I had to do was set a viewport, add max-width: 100% and define exactly two media query.
But I wanted more. Just for fun.
The initial idea was to use flexboxes - it seemed simple enough but I just couldn't do it. Neither getting the desired structure of the layout nor setting a specific order as to how boxes are moved around for different screen sizes.
So instead I read through this basic CSS grids tutorial and got at least the very gist of it all.
I then put my pride aside and used this handy layout generator instead of writing everything by myself.
Soon enough, I had the basic layout ready: big content box on the left and three small boxes on the right. But the goal was to make it pretty as well.
This is where it got frustrating because it was all trial and error and error and error.
It took me quite a while to figure out how to achieve the triple border
look. In hindsight, I don't know why. It's simply several nested grids with different styling.
At one point I also got so hung up on rectangles that I didn't realise I could simply put an image with border-radius:50% inside a square.
Finally, I noticed that <table> doesn't really work inside a grid. The fixed width of a <td> was ignored and everything was squished tiny. But, being the semi-pro gridder by then, I just made another CSS grid to replace my dusty <table>.
Anyroad, I'm quite proud of what I cooked up - mind you I'm a HTML hobbyist - and when I started to type all this a couple of days ago I actually wanted the conclusion to be that CSS grids are shite.
Not so anymore. They're good-ish. One might say they're the superior <table> and are an easy way to make the classic holy grail layout
responsive.
more css
I love CSS. It's amazing what you can do with it and therefore a part of me dies whenever I see a Reddit post concerning a design question and the answer is just use JavaScript
. No! 😢. CSS can move your stamps around, too. It can spin your text, make it blink and it can hide and reveal content with the click of a button!
I honestly love to browse MDN web doc's CSS section to see what's possible & new and I'm waiting with bated breath for the masonry value for grid layouts!
If you take a look at my stylesheet you'll notice that I also make an effort to simplify and optimise my code by grouping elements together or using new selectors like :has() or :is() - that's oddly satisfying.
javascript?!
In the heydays of my Angelfire homepages, I never thought of learning JavaScript, probably because I didn't know what it was or that it even existed. The fanciest I could do back then was very basic PHP - mainly to set up an e-mail form, a header and sidebar menu.
When I made my first Neocities homepage ⧼💖⧽, I was preoccupied with re-learning HTML and CSS, learning HTML5 & CSS3 and - knowing my AO3 audience - making the website mobile friendly.
It was only when I tried to figure out an aesthetically pleasing way to display my Polaroid photos, that JavaScript became inevitable: I needed a pretty lightbox feature.
Next was a visitor counter which I set up with the help of a superb step-by-step tutorial, which made me feel like a hacker - y'know, because actually I had no idea what I was doing but it seemed complicated.
And that was it.
The first time I truly looked into JavaScript and started to read tutorials, was when I was designing my second Neocities homepage ⧼✌🏻⧽ and I just needed a script for a greeting according to the visitor's local time to make it extra groovy.
A couple of months later I decided that a proper greeting on this site here also requires presenting a fab Beatles fact. That's why you now know that
Thanks, indra.js.
As you can guess by now, making things pretty is the driving force for me, so I implemented a tooltip.js on all my sites because I do love <title> and don't use it sparingly.
Initially, I used a jQuery plugin made by malihu which works splendidly but it did me 'ead in
that the tooltips wouldn't show up on mobile devices. Now, it's fixed.
When I finally started this website on Nekoweb, I was able - due to their lax security policy - to use Ayano's Comment Widget. It made me think how hard can it be to write a script that sends just a comment to a Google Form? Must be dead easy
. Not at all. But I wasn't the first one who thought about such things, so really the hardest part was googling all the information I needed to come up with my lovejar submit form.
Browsing the Indie Web, I'd occassionally see scripts that display random quotes or lyrics either on pageload or by the click of a button. Once I had a closer look at the JavaScript, I realised that this wasn't some kind of wicked sorcery but instead a pretty forward and logical approach. I could do that, too! And I did. I made my own notebook.js which I use to show snippets from my WIP folder on my Beatles fanfiction site .
For good measure, I added two heavily John Lennon inspired sketches which, on further reflection, of course needed to make some noise. The according sound.js was simple enough to do, especially with the <audio> available nowadays.
Speaking of random, not so long ago I added a script to my webring homepage that shuffles the contents of all my <table> on pageload. It was a bit tricky because I had to figure out how to not shuffle empty cells and how to only shuffle cells within certain categories. But the hassle was worth it; I think club.js is actually a handy tool for webrings and button walls - unless you actually want to have a ranking of favourite websites of course.
I also use a similar, yet much simpler script on this website to shuffle my love jar It's of course called lovejar-shuffle.js. And to randomise my fanlistings I rely on fanlist.js. I know...my creativity knows no bounds.
Since my webring provides a few codes for members to copy & paste to their website, I implemented copycode.js, which - who would've thought - automatically copies the code to the clipboard when the according <textarea> is clicked or tapped.
A while ago my partner said - out the blue - wouldn't it be great if you had a calendar on your website where you put all the relevant dates in your Beatles fanfiction so that you and the readers have a timeline?
I laughed it off because it seemed impossible to do albeit I already had toyed with that idea in the past. One afternoon I sat down and had a look at various very basic calendar scripts, I even did a beginner step-by-step tutorial and I think I got a tiny layman's grip on what is going on. Eventually, it was enough to put together a working code by copy & pasting snippets from here, there and everywhere. There are a few things I just cannot get to work but all in all I'm very proud of myself - my partner likes it, too. We 🤍 you, calendar.js!
Now...joining the Pantson Color Club made it inevitable - for purely aesthetic reasons - to implement a JavaScript that sorts the colour cards based on the Hue-Saturation-Lightness model. Since that seems to be everyone's favourite method - in contrast to a simple rainbow pattern - it wasn't hard to gather all necessary information and snippets on the world wide web. But, just like with the club.js on my webring homepage, the one thing that caused the script to not work was the minor technicality of having two <div> classes by the same name on the site where the script was suppose to work its colour magic. Once I found out that this was the problem I could modify pantone.js accordingly after hours of frustrated a bit of internet research.
My next foray into JavaScript land was the jukebox script. This was done by looking at various music player scripts and a step-by-step tutorial. I made sure that jukebox.js could play mp3 that are uploaded to my own site as well as sounds that are stored on an external file host like Catbox.
The most nerve racking part was actually the CSS and the musings whether or not to upload all the super rare John Lennon home demos.
A much simpler version of this is miniplayer.js. It's a small script that modifies the appearance of the standard audio player. Instead of the - ugly - controls, it just has a 🤍 emoji for a play and a 🎵 emoji for a pause button. Yes, it's not user-friendly but it looks pretty!
With Halloween just around the corner I felt inclined to do something spooky. I came up with a very simple idea which turned out to be quite nightmarish to realise. autumn.js displays huge 👻 🎃 emojis, which expand and then fade away again whenever the screen is clicked or tapped on - links and buttons excluded. As of November 1st, the script has retired until next year though. Leave a comment in my guestbook if that gave you the crawlies.
All right, I've got one more thing. Everyone likes like buttons, no? That's why several of them are scattered across this website. likebutton.js counts the number of times you, my dear visitor, clicked or tapped 💖. Since I can only use localStorage, the click counter will be reset to (0) once you clear the cache. So, one could say that the purpose of that script is more about giving you a serotonin rush than about stroking my ego.
html
Oh yeah, love it. Very good! It's great, y'know.
Seriously, though...if you take a look at my source code, you'll see that I do love HTML and I'm a big advocate of structuring a website with HTML first before going to town with the CSS.
I had a lot of fun discovering all the new features HTML5 brought on after my return to hobby web design and a two decade long hiatus. I do dig the rather logical semantic approach to separate structure from style - that's why our beloved <marquee> and the sledgehammer tag <center> are deprecated 💀
While we're at it: please don't use <br><br> or <p></p>to create vertical space. That's what <margin> is for.
Anyroad, I strive to have my code spick and span and it gives me immense joy to look at my websites in reader mode or with the CSS removed. Yeah...
One thing I still haven't figured out is how to nest <article> and <section> correctly. After reading many articles (ha!) and lots of them contradicting each other, I apply those tags ad lib.
behold! svg!
I first came across SVGs when I was looking for a way to implement the AO3 logo because it just looks nice. I eventually found it on tabler and when I copied and pasted the code into my story.html it looked...not nice at all. Same with this
logo, which was just really huge.
A thorough internet investigation brought to light that SVGs can indeed be styled to fit into your text quite nicely with display: inline-block! After that there was no stopping me - I even included the Google Fonts logo in my credits sections because I now can!
Then, once again, an idea came to me in my dream. I could use some retro-inspired SVGs to design a little text clique widget. And so I did, see? The SVGs originally were simply black which didn't spark much joy. But then I learned about <def> which basically allows you to inject a mini CSS stylesheet into the SVG code. Fab!
It didn't end there though.
My webring logo has a bunch of symbol entities which look fine but some browsers tend to render some as actual red emojis. 😒. This of course destroys my neat design idea. So I thought, Wait! How about turning the logo into an actual SVG?
At first I tried to gather all symbols I'd need on the internet. It was impossible. And then I decided to just make my own SVG.
Now, I have no clue if that's how you're supposed to do it, but I just typed the logo in my desired font, took a screenshot and converted the .png into a .svg. Voila! The hardest part was the actual styling of the logo, making it responsive and in fact <center>.
Folks, what can I say? I'm so proud of my creation. Look at this beauty here ✨
SVGs are really neat and in some instances probably even a more elegant approach than using actual .png. Once you get over the initial shock of seeing rows and rows and rows of code and you find your <path>, it's good fun.
fonts <3
I don't know if you noticed, but I have a passion for fonts. Or typefaces, to be precise. In fact, the right typeface can make or break an entire design, whether it’s a magazine page, a product label, or a website. One could say it's a real pet peeve of mine.
I routinely have to rip off the label of my Listerine mouthwash bottle. It's awful. My pains intensify tenfold whenever I look at the newly designed Dolormin painkillers package. I refuse to drink Pepsi because the new font is boring. Just joking. I only drink afri Cola anyway. It has the world's most gorgeous bottle design and Charles Wilp created an iconic & scandalous advertisement for it in 1968. ⧼🎬⧽ On the other hand I spend happily on Sol de Janeiro body care products because the design is gorgeous and the most exciting thing I've seen in quite a while.
That being said, I'm not overly picky when it comes to fonts. I haven't come across an awful one yet - yes, I have nothing against ComicSansMS.ttf. I like serif fonts just as much as sans serif, monospace typefaces, handwritten ones (obviously!) and display fonts (naturally!). Typing it now, I realise I'm not too fontd of script typefaces. I guess they look phoney to me - pretending to be handwritten but clearly aren't. Who can write like zapfino.ttf? Thinking of it now - I really don't like pacifico.ttf It's the typeface version of a neon paisley polyester dress sold as authentic 60s-woodstock-hippie
.
What I'm trying to convey is, that there is a time and place to use a certain font and it'll be great. You just have to figure out when to use what. Sans serif fonts are perfect for info text and on my MacBook but I could never read a book in avenir.tff. It's too cold and lacks personality.
Sadly, the art of aesthetically pleasing font use seems to be in critical condition nowadays. I am most likely biased but the 50s & 60s were much bolder in their design choices. Which is strange because most typefaces that we use today were created in those decades - I adore Adrian Frutiger (a.k.a. Aero) - but somehow font use and design isn't as charming and mindblowing as it used to be.
Instead of listing all kinds of whimsical teen-age magazines like rave or the more grown-up twen and underground publications like OZ for which my most beloved photographer Robert Whitaker contributed, I urge you to take a look at Ralph Ginzburg's AvantGarde magazine for which Herb Lubalin designed the iconc typeface by the same name. It's just wonderful. I wish we had more of that today.
Ah, looks like my passion for fonts took over because this was intended to be a short introduction... Anyway, handwritten fonts.
When I decided to make a website ⧼💖⧽ for my OFC in my Beatles fanfiction, I wanted to have that little extra something to make her more real. So I gave her a handwriting - ReenieBeanie.tff. Briefly, I considered to use my own handwriting but decided against it; after all it could give the impression that the girl is a self-insert. She's not. Honest. Despite the undeniable pash I have on John Lennon.
Yeah... As I progressed with my worldbuilding, I started to design fake Polaroids, which at first only had handwritten captions by the girl but how grande would it be to also have captions by the lads? Very!
Well, Analia Wainer designed Johnlennon-e22e.ttf - fortunately a version of John's handwriting where he put his best hand forward because usually, his writing is like the Voynich Manuscript to me - and Erick Molina paid tribute to George with GeorgeHarrison.ttf.
And then there's a typeface inspired by the world's most famous bassist, which I didn't download for a very long time because whilst it's free you have to provide order and contact information.
Eventually though, my curiosity took over. I became
Menlove Ave. 69
London
Antigua
0910-19641965
jane.asher@fontlover.mail
and got my paul.ttf
Let me put it that way, paul.ttf is a true handwriting font; maybe inspired by an autograph Paul McCartney gave whilst being mobbed, thrown into a delivery van by Mal Evans, and on Preludin. It's all over the place. And it looked horrible when used to write more than just a name. The kerning was way off, the letters didn't connect at all. What a disappointment.
So, one afternoon I sat down, determined to quickly fix paul.ttf. Since I've mulled over making my own handwriting font before, I already had FontForge - an open source programme which you can find here - installed.
Well, when I opened the font editor and loaded paul.ttf it became obvious just how sloppily made it was 😬. FontForge gave me all kinds of warnings, and errors and I had no idea what it all meant. For example, I was notified that in TrueType fonts, the UPM is by convention a power of two
, so apparently an em size of 1000 was wrong. So, now what?
The fascinating thing about typefaces and everything that comes with it - the things we type into our style.css - is based on the centuries-old craft of typography and not that much has changed since then. I assume Nicolas Jenson would have had a better grip on FontForge than me. But, he wasn't there - and if I had the possibility to teleport a historical personality into my living room... you know the answer.
By happenstance though, I'd come across a blog post Making A Font a couple of months before and had actually bookmarked it. Not only did it explain everything in detail - from writing the font, fine-tuning it in a graphic programme and eventually loading it into FontForge - it also provided screenshots, which proved to be extremely helpful since I use a German interface and wasn't fluent in typography lingo yet. I just followed along all the steps in the tutorial and on the way got more comfortable with the programme itself and learned a lot about font specifications. Honestly, I can't thank Rek Bell enough for this blog post. It truly was a lifesaver.
So, after adjusting the UPM to 1024, center the metrics, fixed the non-integral coordinates, and added extrema, the only thing that was left to do was to correct the kerning by checking every glyph against every other character including itself.
Let's assume a standard Latin font with uppercase letters (26), lowercase letters (26), numbers (10), and basic punctuation and symbols (approximately 20) - 82 characters.
822 = 6,724 kerning pairs. 🙃
It took me hours. A lot of hours. And then a few more days because I'd constantly notice more things that were off or that I forgot to check in the first place. I think I did a decent job in the end.
Of course all of this re-ignited my desire to make my own handwriting font. I have this vague idea that now with Apple Notes prettifying my griffonage, maybe it doesn't require that much of a touch up in Photoshop. Maybe I can do it after all? You'll notice if I get around doing it.
One fun side-effect: the girl in my fanfiction is an art student with a special interest in lettering. Now, with my newly acquired knowledge about typography I can see her huskily whispering sweet little nothings about self intersecting glyphs in my newest NSFW installment.
bohemian what?
The name of this website was inspired by a verse from Liverpudlian Beat poet Royston Ellis' poem Jazz Club.
Into an exclusive frigid room
of bohemian pseudo sultriness -
cute little cliques of callowness
eyeing desperation
statistics
credits
This website is hosted on Nekoweb and uses JavaScript for a bunch of nifty things. Images are displayed in a lightbox and I'm thrilled to be able to use Ayano's Comment Widget as well as Frills' moderation code for my guestbook. The site statistics are made possible with Max's Neko Web Stats and the eternal September is brought to you by Clarity Anne. All other scripts on this site are cobbled and stitched 🪡 together by me. You can read all about this rollercoster journey here.
Everything is handcoded in CotEditor, up to semantic HTML5 & CSS3 standard with the help of W3Schools and mdn_. The layout is fully responsive and mobile-friendly.
Freeformatter is my trusty tool to make everything truly beautiful in case someone takes a look at my source code. For all HTML entities and symbols I refer to (◕⏝◕).
I use Dither Me This for an extra retro touch in the games section.
And yes, I use a John Lennon, Paul McCartney and a George Harrison handwriting font as well as the Bootle font. Oh, and of course the groovy Magical Mystery Tour font is rolling up as well. It's been A Hard Day's Night, folks! Honorably mentioned: this gorgeous Guyon Gazebo font and the jazzy Stereofidelic one. There's also the Queen and DekoDisplay font. And lastly, just because I love my guitar so much, I implemented Epiphanatic. Everything else can be found on Google Fonts.
The blinkies were made with blinkies.cafe, the website buttons & pixel art with Pixilart and my beloved ancient touch pen.
The AO3 SVG is from tabler and the CSS one from SVGrepo. The Rubber Soul SVG I found on seeklogo.
contact
If you have any questions or like to talk some more, why don't you send me an e-mail?
If you want to link back to my site, you can use these buttons below - but please do not hotlink!
