Zephiris - Another Transfem Programmer

wheres a feminine touch. i need to see a feminine touch rn

Park Cleanup Pet Peeves

I'll be starting my seasonal gig at Parks and Rec in a couple months and I've got a couple things I wanna say. I know that this will probably not reach the people who need to hear it, but if ONE LESS person leaves the parks a mess, I will be That Much Happier.

-You're not supposed to smoke, drink, or have sex in public parks but I know that people will anyway. But if you are going to do those things, please dispose of the evidence in the trash cans. A human has to pick these things up.

-Dog poop goes in a bag. Bag goes in the trash can.

-The little wax paper liners in the women's room? See you're supposed to put your pad/tampon in that wax paper bag, take the bag out of the bin, and then dispose of it in the actual trash can. Don't feel bad, no one told me either. Also no one told the dudes I work with. But this reduces direct exposure to bodily fluids, especially as the summer gets on and it gets hot in those bathrooms.

-On that subject! The little bins that they go in next to the toilet? Don't stick trash in there. Don't put diapers in there. Also don't put beer cans crushed in such a specific way that I slice my hand on them as I try to jimmy it out of there. Literally, that bin is too small for most things. They are meant specifically for those brown bags. Please for the love of god, throw things in the trash can.

-As for the urinals, please no solids. Most commonly gum and chewed tobacco, but you can use your imagination.

-If you're doing a photo shoot or an event with confetti, please use a paper confetti instead of a plastic one- its easier to get rid of.

-If you're doing a pizza party, we'd rather you stack the pizza boxes in a pile next to the trash can instead of trying to fit them in the trash. Because then we can just throw the trash bag over the top and tie it instead of trying to fish it out. This kind of goes for any big trash- if it won't fit in the trash can easily, don't try.

-Please don't call cops on people sleeping in the parks if they're not bothering anyone. Even if they've been sleeping there all day. Dude's just trying to chill.

-Destruction of the toilets will result in the indefinite locking of the restrooms. You ruined them and now everyone at the softball tournament can blame you for it.

-Parks people are not the police. We are maintenance workers who are not trained to handle most emergencies and the most we can do in any situation is report to the proper department. Please don't look to us for answers if someone is starting a fight.

-Also please don't spit on us for driving on the path. We're permitted to. Its essential for us to drive on the path to do our job.

-please don't abandon animals at the park. Rehome them properly. I spent a whole week trying to catch a rooster last summer.

-look, I get it- 'oh no, your pretty building has writing on it!' Grafitti is so edgy. We get it. But it means Jacob has to sand it off now so that the kids at the birthday party don't see a giant drawing of a weiner. Acts of rebellion that create more work for the working class are not revolutionary.

-please do not set fire to the Tiny Free Library. Why did you do that? That's mean.

-please do not feed bread to ducks and geese. Corn, birdseed, lettuce- those are better for them. If you want to reduce tge amount of goose poop in the parks, shop feeding them bread.

-also do not anger tge geese. They remember what its like to be dinosaurs.

I'll have more later, probably, once the season wears on.

Edward Lutczyn (1975)

here's to trans girls, transfems & nonbinary people who don't tuck or use gaffs. you do not have to hide your crotch bulge for anyone's comfort but your own. your penis is not a problem, whether or not it is noticeable through clothing doesn't mean or say anything about you, and it does not detract from your womanhood and/or femininity. anyone who gets upset about that part of your body is invading your privacy, you will never be invading someone else's privacy just by being clothed and having a penis. your body, your rules.

& a bonus acoustic version of bless ur heart which never fails to get me to cry when I feel like I need to cry

like black people are present in every single fucking genre and scene and popularized and straight up created several but people are so fucking hell bent on finding every possible excuse to not engage with their music because its easier than trying to confront their own racism. like okay well if its truly just a disinterest in most rap music then surely you listen to black artists in other genres right? who am i fucking kidding. of course you dont.

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 have a question: has anyone else tried using their boobs’ nipples to scroll on a touchscreen or is this an insane person activity I have just attempted?

I tried to google it but it’s a pretty unsearchable query.

Please?!!!

microdosing on estrogen by only consuming the blood of other transfems

Please sign this petition to advocate against apple’s decision to disable Progressive Web Apps on iOS in the EU.

letter.open-web-advocacy.org

Open Letter to Tim Cook: Sabotaging Web Apps Is Indefensible

Open Letter to Tim Cook: Sabotaging Web Apps Is Indefensible

For context, Apple has recently been forced to obey EU regulations and decided to be maliciously compliant in doing so. They argue that they cannot support both multiple browsers and progressive web apps for safety reasons because there is no way to know that those other browsers will treat permissions in the same safe way safari does, breaking the trust and safety of the web. They also mention that in order to have safe PWAs they would have to introduce “an entirely new integration architecture” which they noted their team wouldn’t make the investment into given that so few people use PWAs currently and because apparently Apple doesn’t have enough developers to build the “integration architecture” that would be required.

Most people don’t use PWA’s because Apple hasn’t even supported push notifications on PWAs at up until about a year ago while android supported notifications for almost a decade, since 2015. And still the web push notification support is largely incomplete — not implementing several functions within the Push API specification.

Please take the time to sign the above petition if you appreciate having an open, free, cross platform, and largely unmoderated app distribution channel. You can read more about Apple’s plan for the EU here: https://www.apple.com/newsroom/2024/01/apple-announces-changes-to-ios-safari-and-the-app-store-in-the-european-union/

And here is the direct statement from the Apple article linked above addressing Progressive Web Apps:

The iOS system has traditionally provided support for Home Screen web apps by building directly on WebKit and its security architecture. That integration means Home Screen web apps are managed to align with the security and privacy model for native apps on iOS, including isolation of storage and enforcement of system prompts to access privacy impacting capabilities on a per-site basis.

Without this type of isolation and enforcement, malicious web apps could read data from other web apps and recapture their permissions to gain access to a user’s camera, microphone or location without a user’s consent. Browsers also could install web apps on the system without a user’s awareness and consent. Addressing the complex security and privacy concerns associated with web apps using alternative browser engines would require building an entirely new integration architecture that does not currently exist in iOS and was not practical to undertake given the other demands of the DMA and the very low user adoption of Home Screen web apps. And so, to comply with the DMA’s requirements, we had to remove the Home Screen web apps feature in the EU.