Latest Posts by zephiris - Page 5

Aweeee ❤️ leaf sheep

coworker told me he “hates all mollusks” today. and to each their own obviously but like… theres 100k species of mollusk… you really hate all of them bro? nautiluses and oysters and snails and nudibranches and chitons and thousands of animals youve never even heard of???? what did ammonites even fucking do to you

I just thought to myself ‘wait are capacitors used to hold charge in devices’ then thought ‘no that’s stupid the charge would run out near instantly’ then thought ‘but wait the time constant might be really really big’ then thought ‘no because then it would take ages to charge’ but THEN thought ‘WAIT BUT YOU COULD HAVE ONE CAPACITOR THAT QUICKLY CHARGES AND THEN ONCE THE CHARGER IS DISCONNECTED IT DISCHARGES INTO CAPACITORS WITH REALLY LONG TIME CONSTANTS SO THEY RELEASE THE CHARGE OVER A LONG PERIOD OF TIME???’ But no just use a rechargeable battery

Happy pride! 🌈

@cerealstresser

It’s fun for me just to grab a boob

Background decorative elements

I felt like the placement of your background images within the body tag to the top and bottom of your main content div is pretty intuitive overall. The only thing I could think of to improve the vines would be to make them pseudo elements (another YouTube video by Kevin Powell) of the body element so that way you don't have to have empty divs cluttering your html for them. Pseudo elements are useful for purely decorative elements because they're created purely out of CSS; no HTML required!

Now for color: below the fold bc hyperfixation go brrr

TLDR: Color contrast is hard; especially with the current color systems we have today (HSB/RGB) since the numeric incantations of popular color systems don't line up with how our eyes actually perceive color, especially when it comes to brightness. Google made a new color system (along with a tool based on that color system to generate color palettes) that lines up better with how humans perceive color but it still isn’t perfect. IMO using tools like palettte.app (with 3 t’s) and hand-selecting colors numbered by how light they are - more about that below - works best and gives projects more of a hand-made feel but Google's tool works well enough for making a quick and professional looking color palette.

Now for a very colorful rant:

Making CSS variables with the format

colorName-brightnessValue

makes it easier to meet contrast standards when coding up a website. I'll usually organize my colors to range from 0 to 1000 exclusive where 0 is black and 1000 is white. I usually use 100, 300, 500, 700, and 900 the most so I have those 5 shades of each main color ready to go whenever I start a new project. (I use the same 4 colors for all my projects so it's easy to copy and paste the colors from the last project into the new one!)

That way if I know my background is violet-100 and my text color is violet-700 that the text will be legible because of the difference in brightness values is 600 just based on the variable names alone. Generally a difference of at least 500 (assuming you go linearly in perceived brightness) is enough to get AAA contrast levels.

For an example, here are my css variables for zephiris.me:

Others do the numbering of the shades differently. Here's how tailwind does it:

Tailwind CSS color guide's section on making a custom color palette has links to some helpful tools on how to hand-pick several shades of a set of colors so that the brightnesses of the colors decrease with the numeric value in a way that actually lines up with people's perception of color.

On that same page, tailwind also has all those color palettes shown above free for you to steal use in your projects!

Google's Material 3 design framework has shades of every color go from 0 to 100 for brightness instead of my 0-1000 brightness or Tailwind's 0-1000 darkness.

Google also has a nice resource which will automatically generate a color palette for you (I like doing it manually with palettte.app [with 3 t's] but if you just need a quick and easy palette that meets contrast standards, Google’s resource works pretty well).

Google actually has a very interesting blog post on why it’s so hard to make accessible colors and get the right amount of contrast with current color systems like HSB/RGB etc.. To fix this, they created a new color system, HCT (Hue Chroma Tone), which helps solve that problem by having HCT's Tone value better match our human perception of brightness.

Wrangling Several Colors to Work Together

My main advice for overall UI design is to pick three colors: a primary color (for background colors), a secondary color (for card backgrounds/text colors), and a tertiary color (for any elements that should be interacted with like buttons and links). I made a site to try out various combinations of colors and share those palettes with others a while ago (apparently November of 2021, thanks GitHub!)

Recently Juxtopposed made a more professional version of what I made called realtimecolors.com along with an accompanying video. Her website also features a palette generator where you just enter in one color and it will generate a set of palettes off that one color!

Unfortunately neither mine nor Juxtopposed's websites support multiple shades of each key color, so to get those additional shades make sure to either use Google's generator or one of the tools mentioned by Tailwind once you have a general set of colors that you feel works well together.

Color Palette Inspiration

What works best for me is to pick colors based on environments which I enjoy to be surrounded by. I based my color palette for zephiris.me on:

the night sky's bluish-purple hue (maybe I wear rose-tinted glasses ok?)

greenish-blue seafoam from ocean waves

golden rays of sun filtering through pine trees

Lastly, I used the trans flag colors to describe my gender for obvious symbolic reasons - I also like being next to a particular shark :p

Conclusion

Meeting color contrast standards can get way easier by numbering your colors based on how light they are. There are plenty of ways to get a set of colors labeled by lightness:

using palettes already made from Tailwind

Have Google do some math wizardry to generate you a custom palette

Use tools like palettte.app to create your own set of colors to play with

Regardless of what option you choose, the overall added structure of numbering colors' brightnesses makes it dramatically easier to make incredibly legible, accessible, and colorful designs.

Colorful rant over!

i like your website! it looks very nice

especially the gradient colored text!! you used a separate font to make it more legible

whenever i try to do something like that, it always becomes really hard to read... maybe i should learn some basic web design?

my website looks like this and it took two days of fiddling with css

Thank you! The biggest thing with making text legible is making sure there is enough contrast between the text color and the background or make the text big enough that it’s legible even if there isn’t that much contrast. The best guide on color contrast that I know of is the Mozilla docs! If you scroll down to the solution part there it has many tools to check text contrast.

Since your website has a warm bright canvas background darker colors and gradients would work better and end up being more legible.

If you’re looking to learn more about web development and especially CSS I strongly recommend Kevin Powell on YouTube! His videos on flexbox and grid are very helpful in understanding those new browser features and making responsive websites (websites that look great on any screen size). For example, I used grid for the nickname table and for my projects so that on desktop those elements would be wider and shorter while on mobile they’d get narrower and taller.

I love your site too, especially the canvas theme with the green branch/orange leaves and the clever span box to show your favorite color complete with a title tag featuring the hex code!

To be clear my site took me at least 20 hours of fiddling and development to make. Feel free to look at the site code (and my commit history) on GitHub!

i like your website! it looks very nice

especially the gradient colored text!! you used a separate font to make it more legible

whenever i try to do something like that, it always becomes really hard to read... maybe i should learn some basic web design?

my website looks like this and it took two days of fiddling with css

Thank you! The biggest thing with making text legible is making sure there is enough contrast between the text color and the background or make the text big enough that it’s legible even if there isn’t that much contrast. The best guide on color contrast that I know of is the Mozilla docs! If you scroll down to the solution part there it has many tools to check text contrast.

Since your website has a warm bright canvas background darker colors and gradients would work better and end up being more legible.

If you’re looking to learn more about web development and especially CSS I strongly recommend Kevin Powell on YouTube! His videos on flexbox and grid are very helpful in understanding those new browser features and making responsive websites (websites that look great on any screen size). For example, I used grid for the nickname table and for my projects so that on desktop those elements would be wider and shorter while on mobile they’d get narrower and taller.

I love your site too, especially the canvas theme with the green branch/orange leaves and the clever span box to show your favorite color complete with a title tag featuring the hex code!

To be clear my site took me at least 20 hours of fiddling and development to make. Feel free to look at the site code (and my commit history) on GitHub!

i've been realizing that when people give you their number/social media they like. want you to text them somewhat often or start talking to you by text. which... seems intuitive, but for me, giving people my contact info is more like "hi, i think you're cool. i would like to be able to contact you if needed/i want to hang out." if i met you in person, i would rather get to know you more wherever we met. frequent communication by text is reserved for close friends and long distance friendships.

idk if anyone else is like this but. i feel like i should tell the people ive become friends with recently that this is how i function socially.

The first link goes so incredibly hard

Resources 🌼

(Updated regularly)

🪷 Emergency resource: oh no I’m having a bad thought

🌻 Apps and Games

Finch: mental health app where you care for a little bird! Offers many features such as focus timers, rant zones, nature sounds, fun questions, and more! You can even make friends on it and send them encouragement :) (my friend code)

Adorable Home: a precious game in which you have a tiny spouse, cats, and a little house you can decorate! You can check in and enjoy peaceful music, different scenes, and upgrades through collecting tiny hearts you earn through easy tasks! A truly adorable and relaxing game!

Seashine: a game set underwater in which you guide a tiny luminescent jellyfish through the abyss. Beautiful, relaxing music and distant whale noises; some scary enemies, so if you have thalassophobia this might not be the one for you. Very calming otherwise though, and the creator is coming out with an enemy-free version soon in which you can just float around to the music!

Cat Snack Bar: an adorable app where you operate different business venues with the help of chubby, adorable cats! You check in periodically to collect money and update your venue, but otherwise it doesn't require much brain power. A very cute game to help you relax!

Webtoon: a comic app that allows you to browse thousands of creative and often relaxing webcomics! My personal favorite is Cursed Princess Club; it's a very clever and happy one with a lot of good messages!

1010!: a fun little game where you match up blocks. Fairly simple and satisfying, and you can update your backgrounds to fun designs!

Papa's Cupcakeria: a relaxing and satisfying game where you make cupcakes! And of course there’s a whole series of games in the Papa Louie universe to choose from that are fun and happy :)

🪸 Fun Websites

Neal.fun: features many creative pages you can visit such as— a stack of movable rocks, a page that shows how deep the ocean really goes, who was alive [insert year], draw logos from memory, and more!

mrdoob.com: a wacky website with lots of fun features you can draw and mess around with

boredbutton: for when you're bored out of your mind and want a pointless website to mess with!

theuselessweb.com: takes you to a completely useless website, such as a page where it rains corndogs or a page where you can create different forms of art.

ashortjourney.com: lets you take a small and beautifully drawn trip on a trolley and pick up/drop off tiny creatures!

Forestopia: allows you to explore images of forests and the things inside, with background forest noises!

boredpanda.com: full of memes, funny stories, and more!

listverse: contains many lists, some horrifying (so be warned for those) and some just fascinating!

🍄 Focus Sites and Playlists

rainymood.com: a site/app that lets you listen to rain for as long as you want!

asoftmurmur.com: lets you listen to a variety of sounds like rain, thunder, or a fire!

Open ocean: 10 hours of underwater videography of a spot in the ocean!

imissmycafe.com: site that lets you listen to the noises of a coffee shop! You can change the different noises too :)

Secret Forest Playlist: peaceful music; 2 hours

Rain on Leaves on a Forest Road in Autumn: rain in the woods; 10 hours

Haunted Village Halloween Ambience: eerie but quiet music; 3 hours

Relaxing Autumn/Fall Forest: sounds of wind, crows, songbirds, and creaking trees; 7 hours

Chill Beats for Worldbuilding and Writing: Fabulous lofi music; 1 hour

It's Just a Dream/Dreamcore: Very peaceful and ambient music; 4 hours

Autumn Acoustic: Autumn inspired songs; 5 hours

Sad Piano Music: beautiful piano pieces by Jurrivh; 6 hours

The Most Relaxing Waves Ever: beach noises; 8 hours

Have your own recommendations? Drop a comment or ask!

mobile-friendly personal websites

@agentreynard wanted to hear more about how I made my website mobile friendly, so here's what I did:

First, crucially, I already had a one-column website that used css to style the HTML.

This made it easy to adapt to smaller screens...as soon as I learned the following three things thanks to Christopher Heng's How to Make a Mobile-Friendly Website: Responsive Design in CSS:

1. You need this magical incantation in the HEAD section of every page:

2. You need to tell your images to simmer down and not be stretching out the screen by being as wide as they want. They can be 100% wide and no more!! Add this to the css:

3. And then you'll probably need to give the page special instructions on how to act if it's being displayed on a small screen. This is the fiddly bit. What you put in here will be specific to your website, but it'll all go at the end of your css, tucked inside one of these:

That's what's known as a media query and it can take a variety of forms. This one says that if a screen is 320px wide or smaller, these rules apply. You can also use "min-width" if you want to tell it what to do if a screen is larger than a set number, and you can put whatever numbers in there you want.

Mine looks like this:

Those were all classes I used for the original layout, only now I want them to display differently on smaller screens. So I shrunk all the margins to remove white (and pink) space and now that same page looks something like this on mobile:

I did the same thing for the story files themselves, shrinking the margins so there's more room for text, but that took a different set of rules because they've got a different structure. I also added "back to top" links to the bottom of all my navigational pages.

Now, this is clearly not a foolproof or comprehensive plan. Everything I know about HTML and CSS I learned through trial and error, so I am barely qualified to say even this much. But these were the three things I needed to know before I could stick my hands in there and really shove stuff around.

A tutorial for my 196 refugees still figuring everything out. (I ran out of rantsonas at the end)

zephiris.me

Zephiris.Me

Learn about my name!

It also lists our what I’m currently working on and what I’ve worked on in the past!