I've worked on a few different visual novels all using Ren'Py. It's open source, free, and there's a lot of resources and tools people make for it. I'd recommend looking into the forums. People share a lot of code snippets there. Itch.io also has a lot of tools and assets made for Ren'Py.

The scripting language is pretty easy to understand (I think) when starting up. VimislikArt has pretty good simple tutorials for Ren'py that can help you get an idea of what you might be getting into.

Another free engine I've heard of is TuesdayJs. I've never used it before though. I've heard TyranoBuilder can be janky but it's an option. I'd avoid Visual Novel Maker; I haven't heard a good thing about it.

I've personally been playing a lot of Hatsune Miku: Project DIVA. There's finally a PC version and my partner gifted it to me on Christmas

i think if youre using iframes for other people's sites you definitely should be disabling JS execution with the "sandbox" attribute:

One, I think that's really cool. I didn't know you could do that. Two, that kinda takes the way the whole point why certain things are iframes. For example, Gifypet needs JavaScript to run. Your pet wouldn't work if you disabled JavaScript.

That's why I don't embed anything from other sites on my site.

Also speaking of Gifypet, I do find it interesting that you say this even though you have one on Libre.Town's home page. Though, I assume that's because Melon is seen as a trusted individual/friend. (p.s. Your pet is really cute)

I kind of thought something similar when it comes to links specifically. There is still a possibility that someone can change their website that you've linked to something malicious or uh.. of bad taste.. but mutual trust happens to be a very important part of a strong and healthy community.

Yeah, this is basically the reasons I'll link to people and use their iframes. A community built on distrust isn't a community; plus, I typically don't assume malicious intention from people without reason. I'd personally like to believe that most people don't create shareables with ill intent, though I do understand the worry and reality.

This is kinda why with my own iframe-ables I've created, JavaScript isn't necessary for them to look good and work. Yeah, certain customization might not be there but it'll still work. I personally roam the web with JavaScript enabled, but I know there's people that don't so I try to accommodate that when I can.

This web garden looks nice and dandy, but maybe a static image of the sites and a "report" button would be enough against that security nightmare of Frames or Iframes.

Travelling across the internet without some kind of script blocker is a whole nightmare in itself!

I dunno, I feel like the whole point of web gardens it to be interactable; that's what makes them unique to other shareable / adoptable things like Teeny Towers. I could see a separate option where it's plain HTML and CSS code blocks you share instead though.

Spoon usually.

White rice or brown rice?

Recently while making my own adopt iframe that people embed in their sites, I starting thinking about a certain level of trust developers must have with each other. Stuff like web gardens and Gifypet require you to embed a whole site page to your website that could be running any sort of code. I doubt many inspect those iframe pages to see what kind of code they're running before adding them to their site.

It's not even just the code part that could go wrong either. At anytime, those pages you're embedding could change without notice. They can be changed to something entirely different if the person who made them decides to.

Lighthearted example: One day you could have an adopt on your site; the next day it's a Rick Astley gif with code that spams all the song lyrics to Never Gonna Give You Up in your console.

Another way to handle this that gives you a bit more control than flex is by using grids. Also I remember trying to use float when I was just starting out and it was horrible. I don't use it anymore.

Code

.container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* You can alter these sizes all you'd like */
  grid-template-rows: 1fr; /* or auto */
}

Code

<div class="container">
  <div>Column 1</div>
  <div>Column 2</div>
</div>

I hope this helps.

It really depends on the look and functionality you're going for. I made a gallery for my art awhile ago using baguetteBox.js. You can use small thumbnails to not take up space. Clicking on the thumbnails brings up a modal to show the full image. This does require Javascript.

Im lazy and usually just dump everything in a list on a page and call it a day but you can do better!

An alternative to this list method is just dumping it all into a simple grid that auto-adjusts itself to screens. It's the same type of way all the thumbnails in my gallery rest.

Code

.gallery {
  display: grid;
  grid-gap: 1em;
  grid-template-columns: repeat( auto-fill, minmax(250px, 1fr) );
  grid-template-rows: auto;
}

This one snippet always ends up on all of my sites. It makes things tremble in fear or excitement! It's the only animation I tend to implement.

Code

.scared {
  animation: an_shake .2s linear infinite;
}
.scared_h:hover {
  animation: an_shake .2s linear infinite;
}
@keyframes an_shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

That's a hard. Even though I drink coffee more often, I'll have to say tea. Some of the milk tea I've tried recently is really good.

Hot chocolate or chocolate milk?

I'd have to say my favorite is the "corner of woe". It's a very relatable trope.


Another one I enjoy is when mushrooms are shown growing on people to emphasize a depressed or gloomy mood.

these are really cute! and they match my site's woodsy theme so I put one on my homepage hehe

(also I really like the animated banner)

Thank you! I'm glad you like them; I'm trying my best.
Also your site is quite pretty. I love the palette you chose.

I don't know a whole lot about mushrooms, but some I can think of off the top of my head that might be cool to add are chicken of the woods and dead man's fingers~

Those are some really good suggestions, thank you. I added them to the list I started to plan my next batch of shrooms.

I barely ever play fightings games or games that allow to both see and customize/pick your character, but I decided to make a collage myself. Seemed fun.

For games where you pick a premade character, I tend to lean towards aesthetics and personality first. If the gameplay isn't unbearable with that character, I tend to stick with them mostly. I do tend to play other characters though, definitely is I like the others gameplay better.

For games that allow you customize your own character, how I make them look really depends on the game and genre. If it's more slice of life, I tend to make them look like an alternate version of myself. If it's basically anything else, I just chose what I think the coolest or most aesthetically pleasing thing to me is.

If I'm forced to look at and follow a character the whole time, I wanna at least like them for who they are and how they look.

Would you like to adopt a lonely shroom? Or maybe hire a brave shroom to guard and protect your site? Now you can!



Please treat your shrooms with care and respect.

I thought it'd be fun to make some shroom adopts. So far there's only 6 kinds of shroom, but I plan on adding more in the future. Let me know if there's any specific ones you guys might want to see.

I also added a generator that allows you to embed an iframe with a specific shroom to guard your site. I've seen a couple of site protectors on different sites and thought it was cute so I made my own.

Also this was my first time making an animated banner like that. I'm not sure how I feel about the outcome.

I changed the layout of my site along with the colors. I wasn't vibing with how it used to look anymore.

I also decided that my site needed a mascot. I actually decided this months ago. I just never got around to doing it till today.

Added an elevator to my site

The elevator is really cool!

I'm a little late to this, but CSS grids are the reason I'm able to easily manipulate my website layouts and make them mobile friendly. Over time I've been using them more and more. This guide is like my holy grail; I reference it a lot.

Here's an example that I'm quite proud of (sorry that it's blurry, I optimized the life out of it):