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 ✉️.
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 <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 and what's new. 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 - 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 (fake) 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 some basic 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.
As you might know by now, making things pretty is the driving force for me, so I implemented a tooltip script on all my sites because I do love <title> and don't use it sparingly. This was easy enough and I have zero idea how it works but that's fine with me.
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 widget - which you really shouldn't use to send me your most private and intimate tidbits.
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 script which I use to show snippets from my WIP folder.
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 such a script 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.
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.
My last foray - for now - into JavaScript land is the jukebox script. This was done with a step-by-step tutorial, again, and the most nerve racking part was actually the CSS and the integration of Google's icons. And the musings whether or not to upload all the super rare John Lennon home demos.
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.
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
Updated: loading
Visits: loading
credits
This website is hosted on Nekoweb and uses JavaScript for a bunch of nifty things.
Images are displayed in a lightbox and the look of the boring browser tooltips is beautifully enhanced due to this script.
I'm thrilled to be able to use Ayano's Comment Widget and Frills' moderation code for my guestbook.
The script for the love jar submit form I concocted myself. 😎
The jukebox script required lots of googling and tutorial reading.
The site statistics are made possible with Max's Neko Web Stats.
And lastly, there's a small JavaScript to greet you according to your local time.
Everything is handcoded in CotEditor, up to semantic HTML5 standard with the help of W3Schools.
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 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. And lastly, the Queen and DekoDisplay font.
The blinkies are made with blinkies.cafe, the buttons with patience and Pixilart.
The music was sourced from VIDEVO, pixabay and fesliyanSTUDIOS.
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!
