Small Web September Check-In 2: Recs and Resources

[enchantedsleeper]

Our second Small Web September check-in point is here!

How is everyone getting on so far with their SWS-ing (hat tip to lovesgaze for making SWS into a verb 😂). Is the code (or blogging, modding, documentation, etc.) behaving as it should? Have you discovered any cool new tricks or come across any great sites you’d like to share?

The theme of this check-in is recs and resources! There are lots of great guides, tutorials and examples out there to help with our small webbing. So, I thought we could share some of our favourites in the comments - along with what you’ve been up to since our last check-in, if you feel like sharing it!

Here’s some examples of things you could share:

• ‘How to code X feature/design element’ tutorials
• Cool templates or layouts
• Gif, blinkie, button or banner-maker tools or websites
• Directories, webrings or blogrolls for anything small web-related
• Communities (like this one! – but they can be anywhere, not just on Dreamwidth) for small web support, resources or discussion
• Inspiring examples of sites, blogs, or other small web projects that you’ve come across
• Any round-ups of links like these or anything else you’ve found helpful!

A bonus discussion-starter (optional, so no pressure to answer this!): What has been the most useful small web resource you’ve found so far? Or, is there a resource that you really wish existed, but doesn’t?

As a reminder, this is the second of five ‘check-in’/comment points that will be published during the event – you can check out the schedule and dates for these posts in the event intro post. There’s no cut-off point for leaving comments on these, so you can add something at any time – you also don’t need to comment on every one or do them in order! The themes are a loose guide, but all discussion is welcome.

For the previous check-in/goals post, check out: Small Web September Kick-Off/Check-In 1: Goals

Comments

[ghislaine]

The Web Design Museum is amazing! Thank you for sharing this link. The site shows so much about the way the web has evolved.

[tarlanx]

I finally got around to fixing a webpage that had been 'broken/not been updated' since I merged an older MB site into mine (back in 2004-6). I had to sort out around 30 images and add code for each. warning: It's Javascript and image heavy. When you hover the mouse over a TV/Movie link it changes the image to what MB looked like in that TV show/movie.

Many Faces of Michael Biehn

[tarlanx]

CSS Grid is one of the things I wanted to look at and learn so thank you for the tutorial links.

[sophia_sol]

yay, glad I could introduce you to it!

[sophia_sol]

haha me too!! :D birds are the best

[lumiosecity]

Oh, this is wonderful, thank you!

[annathecrow]

"common div names" -- oh lol, my first reaction was that I'm like 99% sure these are not taught anywhere, just something that everyone learns by osmosis... but then I was like "wait, this is programmers we're talking about, someone must have already made a collection!" And I was right. Behold: https://shramko.dev/snippets/common-css-classes

Also, it's nice to look through one of those basic "how to name things" posts, like this one: https://www.freecodecamp.org/news/css-naming-conventions-that-will-save-you-hours-of-debugging-35cea737d849/. Like, I often don't use strict BEM for personal projects (this is for fun, don't make me think...), but it is a useful concept to know about.

[aikoto]

In terms of my SWS goals, I haven't even touched the pages lol
My girl's birthday is tomorrow and I make a special page dedicated to her to celebrate it every year. This year I wanted to make a little gane, so I made a dress-up where you decorate her birthday party. I finally got the drag-drop to work so I have been drawing the assets the last few days.

About coding recs, I like CSSLayout (page gor down but Internet Archive got our backs), they're simple snippets to add to your page. Then Tiny Tools is pretty good as well, it mostly focuses on game dev but has useful codes for webpages as well.
I will also link to Celestial Star, Buruma and Lovely Designs, while I find most of them hard to read, old web's layouts and graphics always inspire me ^^

[linky]

Awesome updates!! :D I really love how you've set up your fanfic pages too.

I would also like to see a listing of sites too! I love ficring, but it would be nice to have both. The more the merrier in general.

[sleepyquail]

SWSing progress report!

I decided to try out a new layout for my shrine pages and when I realised how awesome it looked, I just ended up getting eaten by filling in so much information!! So my shrine for Sartauvoir quo Soranus is now well underway! I need to transfer my manifesto over from dw, and then populate the second row of links, but I'm SO obsessed with how it's turned out so far!!

I also added a chatbox to the landing page, and added the navbar to all other pages, as well as alphabetising it and adding a separate page for code credits and things.

Resource-wise, I've been enjoying using dw rper codes for various things! A few faves are 10billionghosts and efryndiel.

[tempural]

Instead of working on the Fujofans web listing like I said I would, I started making a /uses page instead. It's in progress - currently basic hardware and art software, but I hope to add other programs and IRL art supplies I use!

Inspirations: - Cory Dransfeldt use page - 7p drawing tablet documentation - David Revoy's tablets history

I love to see what people use and recommend! Especially for computer programs, IDK what people use for like.. lightweight video editing, or font management y'know? Especially cuz so many apps are phone-only now haha.

I want to add the details/summary function to my list of uses, so that people can quickly read through the page, and choose to click for my wordy opinion on what I use. Cuz what I use isn't necessarily the best, but I have MY REASONS lol. Also need to add CSP brushes, will be useful for me if I ever have to redownload everything I know and love. Also useful for others if they want to use the same brushes as me :P

Next small project before I get the gumption to fix Fujofans, is to edit my fic pages to have MUCH simpler styling. Probably copy the ao3 layout, and add a neutral background color that obeys light/dark preferences rather than my bulky color scheme picker. Make the writing page much slimmer too, I kinda would prefer it to be a small list rather than large over-styled cards.

[tempural]

Looking good! I like how indepth the layout for your shrine can get :D And ooh I didn't even think about using DW codes for regular websites :O The rp codes are cool especially if they fit the game for your fanshrine!

[tempural]

OMG that site is so cool! I love being able to see every character he's played, and click on the page for the media - and even that page is customized with colors and links and information! Very inspirational for me, I wanna do a similar page for the faces of Willem Dafoe :D It didn't take that long for me to load either.

[tarlanx]

Thank you! Internet speeds for most people have improved dramatically since this page was first coded :) It only had about a quarter of the entries/images then and on a 14Kbps modem it took forever to load!

I'm so glad you like the site. I've put a LOT of work into it over the years :)

EDIT: If you open the 'Many faces...' page and then use the right mouse button context button to 'VIEW PAGE SOURCE' you shoudl be able to see the code and use that.

Eventually I'd like to amend the page to work without Javascript (if its possible)

[muttthecowcat]

Thank you!! This is really helpful ヽ(✿ﾟ▽ﾟ)ノ

[sleepyquail]

Thank you!! Yes, I love that part too - the base template had less tabs, but it was very easy to add new ones and it made me Learn A Thing at the same time!

[linky]

Ooh the /uses page is a nice idea! I'll have to make one myself sometime too because I really like the concept behind it.

[larissa]

I have made... a little progress! I've written a handful of pages for my upcoming Sailor Uranus site. None of which are substantial, but at least it's something. I have the next volume of the manga ready to reread, I just haven't had the brainpower to sit down and take notes, etc.

For resources, I offer these:

• An Interactive Guide to CSS Grid: I've never used grid for layouts before so I was trying to learn a new thing. I'm not sure that it really suits my needs precisely, but perhaps it'll help with resizing for mobile.
• Simple Counter: I made this! (So long ago that I've forgotten how I did it.) This is for when you need the same thing repeated a bunch of times, with a number incremented each time. I use it mostly for galleries of images but I'm sure it can be used in other ways.

[quillpunk]

SWS-progress: I've got nearly everything in unpublished drafts on 10001 Nightmares Party, my personal fic archive. Actually publishing them all is going to take time though; I need to add all the tags/information, etc. But I've gotten some published so far, and I really like it :D

Resources: (I haven't read all the comments yet so apologies if I repeat resources others have already recced sweat)

CSS/HTML Layouts:

• CSS Bed has collected a wealth of classless CSS themes.
• Kalechips offers a bunch of mobile-responsive HTML/CSS layouts.
• bloodwrites offers a couple of HTML layouts.
• readable.css is a simple CSS theme.
• Sadgirl's Layout Builder is a simple way to build a basic HTML layout.

Buttons:

• Pride Buttons

Guides:

• Outgrowing HTML/CSS
• Web Content Accessibility Guidelines

Learn:

• HTML - webdev
• HTML - w3schools
• HTML - MDN
• CSS - webdev
• CSS - w3schools
• CSS - MDN

Directory:

• Responsive Web Directory
• Accessible Net Directory

[enchantedsleeper]

Bask away! :D There's so much cool stuff being shared here, I love it.

[enchantedsleeper]

That's a total mood! I've been a lot busier this past week myself, so I'm hoping to have chance to do more things this weekend.

I'm glad to hear your day job stuff is settling down! Good luck with hopefully finding time to do small web stuff, but also make sure you take some breathers, too ^^

[enchantedsleeper]

Birbs!! 🥰🥰🥰🐦🐤🐧🕊️🦆

[enchantedsleeper]

I would like to take this opportunity to recommend zonelets, a simple and free way of structuring a website to use for blogging, but also just a good framework for setting up a simple site in general. I'm making great use of zonelets in my site

Ooooh, I haven't come across that one! I checked it out and it looks great. I've added it to my bookmarks!

"Now, thanks to Zonelets, you can create an UNPROFESSIONAL-looking website by writing NUMEROUS lines of code! ...Hey, wait, come back! Let me explain!"

I LOL'ed 😂

[enchantedsleeper]

Aww, thank you very much for the kind words! <3 That's lovely to hear. I feel like I'm getting this page closer to something I'm happy with!

I originally followed a tutorial - linked in my resources compilation - for having a little spinny pointer that rotates 180 degrees to point downwards (so from 👆 to 👇) when you unfold the section. However, the animation doesn't always work, so I thought a 🔽 would help people know what to do. Fun fact, if you use bullet points within your summary and wrap the whole thing (details and all) in a <ul> tag, you'll get a little triangle bullet point that points downwards when you unfold the bullet. (Well, you've probably seen it in my WIP section already xD)

I'm so glad the scrollable div is helpful to you! It's much better now that I don't have a huge list of site updates taking up my homepage xD

[enchantedsleeper]

Thanks so much! Hey, if it does what you need it to, why not use it? xD