A.k.a. The Marvellous Adventures of a Former Backend Dev in the World of Static Frontend Development
Long story short, I forgot most of the notions on frontend development that I had managed to acquire while working as a web dev, so this silly page here will just be a way of sharing my development journey on Neocities.
Luckily, I can only make static webpages, so I won't have to suffer through trying to make stuff like Angular work again.
Unluckily, not being able to use a framework means no quick and useful little features for me. Which, honestly, is fine, given that I do remember enough html to make the most basic of pages, and that css would have been a nightmare anyway. JavaScript worries me, but I trust in free online tutorials to give me a hand.
So enjoy, I guess!
And if you have any tips you'd like to share, you can find me via my Contacts page.
To any of my former webdev colleagues: please, look away, this won't be pretty.
I'm trying to figure out how to add JavaScript to my website, mainly to avoid having to copy-paste my header and footer code every time I create or update a page.
For some reason, it was pretty hard to find a good tutorial on how to do exactly that! I guess it's because most FE development nowadays uses frameworks such as Angular and React to streamline everything, and rightfully so. Nonetheless, I found a tutorial that seems easy enough to follow, here's a link for future reference.
Bless free tutorials, I owe most of my programming knowledge to this kind of freely available information.
Oh, also, I'm finally using my super duper old Linux netbook to code on Neocities. When I say super duper old, I mean I got this in, like, 2010 max? So, I'm amazed not only that it still works, but that it's relatively fast and can actually load most webpages I come across; the power of Linux and Firefox, I guess?
In any case, after updating Firefox for the first time in about a decade so that it could actually run JavaScript, I managed to make cool new headers and footers for each page, along with some handy little other elements I can now reuse anywhere I need. I'd say I'm starting to like this, but I think it's better to wait till I'm sure everything actually works before saying that lol.
I found this useful tutorial on how to securely add an email adress to a website and possibly avoid a mountain of spam, but for reasons unknown I just couldn't get it to work. So I said screw it, I know how to do one (1) thing in JavaScript and I'm gonna try that: I made a component with my encripted email address, and it worked! I think I can say it now: I'm starting to get the hang of this. Maybe. A little. All that matters is that now people can also reach me via email, which is something I really wanted to implement, since not everyone has social media they can contact me through (and I don't want anyone to feel obliged to make an account anywhere just to ask for some directions).
On another high note, I also managed to fix my Linux netbook's brightness settings, so that the backlight won't fry my eyes while I use it. All thanks to a forum post from years ago and a couple of commands; I love Linux.
Other minor changes to this website include: there's a new page to list knitting patterns, patterns look a little better, with bold text where needed and centered images, and images now have stylish rounded corners. There's still work to do: I need to fix the homepage, add more patterns, add PDF versions of each pattern, and figure out how to translate everything into Italian. Maybe I could also style the website with a banner and some more colourful images, but to be completely honest I kind of like this simple look.
Why, oh why, must it take two hours to figure out how to make it so that an image goes left and some text goes right?
I finally managed to do just that in the simplest way possible, after sorting through several long and complex tutorials. Anyway, we now have a Gallery page! I plan on posting my favourite creations here, along with their history, what inspired me to make them, maybe even some work in progress pics and drawings. We shall see!
I still haven't fully figured out what I want my homepage to look like, both because my webdev skills are still limited, and because I don't have a lot of ideas. For now, I've resorted to have a greeting, my logo, what the website is about, and a simple list with its contents. Also, after the aforementioned suffering through CSS floats and flexboxes and whatnot, I feel like concentrating on patterns for a while.
I spent the past hour or so trying to wrap text around images for my Gallery page, since using flexbox can't give me what I'm looking for. Basically I'm back to using a silly little div that floats left and that I put an image into; except, if I add more than one gallery entry, images start to overflow and happily stroll around the page and go say hi to the footer section.
I am not entirely sure what I'm doing wrong, and now I'm kinda stumped; I don't know whether it would be best to just make a simple page with some images and without the wraparound text, knowing that that will be less visually appealing but will still work on mobile, or to look for a fancier grid sort of gallery and maybe make the text appear when an image is clicked, although that may be less accessible in general. Now that I type it, I guess the best strategy is to choose the first option (sigh) and hope the float deities smile upon me some other day; I want people to be able to easily see my makes, after all, and who knows, maybe if I get the widths and whatnot right it will still look kinda nice?
Yep, I did say in the last Dev Log entry that I would focus on patterns and then proceeded to hyperfocus on the Gallery section on a Wednesday night; but, well, the html and CSS for my Gallery page also said they would work as intended, and yet, do they?
(Which is still probably my fault, to be honest.)
Thanks to a couple of tutorials (this one about calling functions through buttons and this other one about collapsing details elements with JavaScript), I managed to remake my Gallery page: each entry is a details element, and thanks to JavaScript I can expand or collapse them all by clicking a button. It's quite a simple thing, but I'm so satisfied, and it actually works! (So far, at least.) After this, maybe I'll figure out a way to add more pictures in a grid or something, so as to be able to show more than one image for each make.
Also, I've improved this Dev Log page by adding some colours to it; idk, it bothered me that all the summaries for each entry were completely white. I didn't go for the most elegant solution, admittedly; but on a friday night after a work week, a silly span element will have to do.
As usual, the other day I had a very good idea for this website while at my day job doing something completely unrelated, so I had to take a quick note of it and wait a couple of days until I had some free time (that I was willing to pass in front of a computer too) to implement it. The very good idea started with "I should add some quick links to my Contacts page so that people can find them without having to read all my ramblings", and quickly devolved into "I WANT TABLES OF CONTENTS EVERYWHERE"; so, today I added a simple yet functional table of contents called "Quick Links" to my Contacts page, as well as one for each of the (still only two) crochet patterns I've published so far. Hopefully this will make both things easier to navigate!
Similarly, I may try to add some other links that bring users back to the top of the page when clicked, but I first need to decide where exactly to put them in the pattern layout. Plus, spring is coming and there's a very pretty pair of socks I'm knitting that I really want to get back to today, so this will have to wait for a bit. ^_^