BobaBoard
LightNews LightNews
bobaboard.bsky.social
BobaBoard
@bobaboard.bsky.social
120 followers 1 following 12 posts
From secret hideouts to fandom kinkmemes, BobaBoard lets you build privacy-oriented forum-like communities for all your interests and groups.

www.bobaboard.com
Posts Replies Media Videos
Reposted by BobaBoard
fujocoded.bsky.social
Until Friday, you can preorder our learn-along for just $9.99! It's a great chance to treat yourself to some learning, and preload those new year resolution 😘

store.fujocoded.com/products/oth...

Find the Table of Contents in the images, and let us know if you have any question. Deep at work now 💪🙏
First image: Screencap of a preview for the Fortune Cookies site. Boba-tan, the FujoCoded mascot, is in a white and red robe with a light golden fortune cookie as a moustache. Boba-tan is standing against a tan background with red borders. Under Boba-tan is a white box with red border, and black text that reads “seek a fortune if you dare”. Under that is a clickable menu, asking for the user to select a vanilla, chocolate, or lemon fortune cookie, and a button saying “get a fortune”. Vanilla is selected. - 01. Clean up the styling slate with a CSS reset - 02. Wait to run JavaScript until the page is ready - 03. Tell screen reader users about content updates - 04. Get the browser's help with single-choice options - 05. Pre-select your options - 06. Create comfortable—and accessible!—inputs with labels PART 1: Declaring our fortunes - 01. Using arrays to store our fortunes - 02. Naming conventions - 02.a Naming conventions – Screaming Snake Case - 02.b Naming conventions – Camel Case - 02.c Naming conventions – Why we use them PART 2: Declaring our functions - 03. Using functions to organize our code - 04. Getting the list of fortunes for a given flavor - 05. Handling errors - 06. Getting a random number between two values PART 3: Adding interactivity to the page - 07. Selecting page elements with document.querySelector - 08. Reacting to events with event listeners - 09. Finding the chosen flavor - 10. Searching through an array - 11. Modifying the page content with innerHTML PART 1: Single-column Layouts - 01. Laying down our Cascade: setting and overriding defaults - 01.a Styling the <body> with a tag-based selector - 01.b Default values and the cascade - 01.c Setting a fallback font family for our page - 01.d Setting a responsive font size for our page - 02. Keeping your CSS values consistent with custom properties - 03. Single-column layouts pt.1: a responsive, centered column - 03.a Making your column's width shrink and grow with the window - 03.b Horizontally centering your column - 03.c Stretching a column to the full height of the page - 04. Single-column layouts pt.2: arranging and aligning content - 04.a Making your elements "flex" into a vertical column - 04.b Adding space between your elements (but not around them) - 04.c Centering the content inside the column * PART 2: Text, Borders, and Layered Images - 05. Styling the container for our fortunes - 05.a Centering a single element... - 05.b ...and the text inside it! - 05.c Setting a width based on text content - 06. Overlapping an image with its surrounding content... - 06.a ...and layering it on top of its siblings! - 07. Muted text color with opacity - 08. Balancing multi-line text with text-wrap: balance - 08.a ...while checking browser support for this newer feature
November 25, 2025 at 9:08 PM
Reposted by BobaBoard
fujocoded.bsky.social
Onward with more polish (and content) as we continue to work up to the final launch NEXT (black) FRIDAY.

Check out the table of contents 👇 and get this $9.99 pack in our store!!

store.fujocoded.com/products/oth...
First image: Screencap of a preview for the Fortune Cookies site. Boba-tan, the FujoCoded mascot, is in a white and red robe with a light golden fortune cookie as a moustache. Boba-tan is standing against a tan background with red borders. Under Boba-tan is a white box with red border, and black text that reads “seek a fortune if you dare”. Under that is a clickable menu, asking for the user to select a vanilla, chocolate, or lemon fortune cookie, and a button saying “get a fortune”. Vanilla is selected. - 01. Clean up the styling slate with a CSS reset - 02. Wait to run JavaScript until the page is ready - 03. Tell screen reader users about content updates - 04. Get the browser's help with single-choice options - 05. Pre-select your options - 06. Create comfortable—and accessible!—inputs with labels PART 1: Declaring our fortunes - 01. Using arrays to store our fortunes - 02. Naming conventions - 02.a Naming conventions – Screaming Snake Case - 02.b Naming conventions – Camel Case - 02.c Naming conventions – Why we use them PART 2: Declaring our functions - 03. Using functions to organize our code - 04. Getting the list of fortunes for a given flavor - 05. Handling errors - 06. Getting a random number between two values PART 3: Adding interactivity to the page - 07. Selecting page elements with document.querySelector - 08. Reacting to events with event listeners - 09. Finding the chosen flavor - 10. Searching through an array - 11. Modifying the page content with innerHTML PART 1: Declaring our fortunes - 01. Using arrays to store our fortunes - 02. Naming conventions - 02.a Naming conventions – Screaming Snake Case - 02.b Naming conventions – Camel Case - 02.c Naming conventions – Why we use them PART 2: Declaring our functions - 03. Using functions to organize our code - 04. Getting the list of fortunes for a given flavor - 05. Handling errors - 06. Getting a random number between two values PART 3: Adding interactivity to the page - 07. Selecting page elements with document.querySelector - 08. Reacting to events with event listeners - 09. Finding the chosen flavor - 10. Searching through an array - 11. Modifying the page content with innerHTML PART 1: Single-column Layouts - 01. Laying down our Cascade: setting and overriding defaults - 01.a Styling the <body> with a tag-based selector - 01.b Default values and the cascade - 01.c Setting a fallback font family for our page - 01.d Setting a responsive font size for our page - 02. Keeping your CSS values consistent with custom properties - 03. Single-column layouts pt.1: a responsive, centered column - 03.a Making your column's width shrink and grow with the window - 03.b Horizontally centering your column - 03.c Stretching a column to the full height of the page - 04. Single-column layouts pt.2: arranging and aligning content - 04.a Making your elements "flex" into a vertical column - 04.b Adding space between your elements (but not around them) - 04.c Centering the content inside the column * PART 2: Text, Borders, and Layered Images - 05. Styling the container for our fortunes - 05.a Centering a single element... - 05.b ...and the text inside it! - 05.c Setting a width based on text content - 06. Overlapping an image with its surrounding content... - 06.a ...and layering it on top of its siblings! - 07. Muted text color with opacity - 08. Balancing multi-line text with text-wrap: balance - 08.a ...while checking browser support for this newer feature
November 21, 2025 at 9:24 PM
Reposted by BobaBoard
fujocoded.bsky.social
We've sung our pack's praises for weeks, and can't wait to see you all sing them instead—like those who already read it 👀

Inside you'll find:

- A full on HTML/CSS/JS course
- Wallpapers & website goodies
- ...free shipping coupon!

All for just $5 (for now) 👇

store.fujocoded.com/products/oth...
original_1763505820002_0361wmbi6 - 01. Clean up the styling slate with a CSS reset - 02. Wait to run JavaScript until the page is ready - 03. Tell screen reader users about content updates - 04. Get the browser's help with single-choice options - 05. Pre-select your options - 06. Create comfortable—and accessible!—inputs with labels PART 1: Declaring our fortunes - 01. Using arrays to store our fortunes - 02. Naming conventions - 02.a Naming conventions – Screaming Snake Case - 02.b Naming conventions – Camel Case - 02.c Naming conventions – Why we use them PART 2: Declaring our functions - 03. Using functions to organize our code - 04. Getting the list of fortunes for a given flavor - 05. Handling errors - 06. Getting a random number between two values PART 3: Adding interactivity to the page - 07. Selecting page elements with document.querySelector - 08. Reacting to events with event listeners - 09. Finding the chosen flavor - 10. Searching through an array - 11. Modifying the page content with innerHTML PART 1: Single-column Layouts - 01. Laying down our Cascade: setting and overriding defaults - 01.a Styling the <body> with a tag-based selector - 01.b Default values and the cascade - 01.c Setting a fallback font family for our page - 01.d Setting a responsive font size for our page - 02. Keeping your CSS values consistent with custom properties - 03. Single-column layouts pt.1: a responsive, centered column - 03.a Making your column's width shrink and grow with the window - 03.b Horizontally centering your column - 03.c Stretching a column to the full height of the page - 04. Single-column layouts pt.2: arranging and aligning content - 04.a Making your elements "flex" into a vertical column - 04.b Adding space between your elements (but not around them) - 04.c Centering the content inside the column * PART 2: Text, Borders, and Layered Images - 05. Styling the container for our fortunes - 05.a Centering a single element... - 05.b ...and the text inside it! - 05.c Setting a width based on text content - 06. Overlapping an image with its surrounding content... - 06.a ...and layering it on top of its siblings! - 07. Muted text color with opacity - 08. Balancing multi-line text with text-wrap: balance - 08.a ...while checking browser support for this newer feature
November 18, 2025 at 10:55 PM
Reposted by BobaBoard
fujocoded.bsky.social
Please also witness our learning guide 🪴🎓 if you thought "wow, they sure seem to be putting A LOT OF TIME into this pack", this 👇 is (also) why—it shows how much we care!

As said before, we know learning to code can be scary; we believe it doesn't have to be!

store.fujocoded.com/products/oth... 👈🛍️
Not sure where to start? While there's as many learning paths as there are readers, here's some advice to help you find your way to learn! In this file... About this Learn-along General Tips When in Doubt, Ask for Help 🫴💖 Finding your Learning Path 1. I want to fully understand the ins and outs! Our advice 2. I want to build something similar Our advice 3. I want to level up my CSS or JS skills Our advice 4. I want to learn specific techniques Our advice 5. Actually, I'm not sure what I want... Our advice Still stuck? Final Thoughts About this Learn-along This learn-along is made up of three heavily commented files that work together to create an interactive webpage. On this page, which features a responsive single-column layout, the user can click a button to get a randomly chosen fortune among 3 different sets. The main files are: learn-along.html — The structure learn-along.css — The styling learn-along.js — The interactivity The code you'll find inside is complete and fully working. You can learn by following along the comments to explore, experiment, and understand how everything connects. If you wish, you can jump around between sections and files, and tackle them in the order you prefer. Each file also contains multiple [[EXTRA CREDIT]] callouts, which are optional hands-on exercises or starting points for deeper exploration. In addition to using them to learn along, the files are structured to serve as a reference for building or styling your own sites. The table of contents at the top of each file is provided to quickly help you find the right section for what you seek to accomplish. Finding your Learning Path Prophet Boba-tan may know your fannish future, but this learning journey is yours to walk. So, what brings you here? I want to fully understand the ins and outs! I want to build something similar I want to level up my CSS or JS skills I want to learn specific techniques Actually, I'm not sure what I want... 1. I want to fully understand the ins and outs! If you're a linear learner who likes to dive deep and build their knowledge comment by comment, we recommend you follow the basic path: Start from HTML to understand how the page is structured Move on to CSS and see how the page is styled Dive into the JavaScript section and learn what happens when the button is clicked Since the CSS and JavaScript learning paths are independent, you can also choose to tackle them in a different order or jump across as your fancy strikes. For example, you might look at how to build a responsive single-column layout, experiment with JavaScript, then move back to finish the other CSS sections! Our advice Read each section thoroughly, fiddle with the code, and see how the page changes. Take breaks between sections and experiment with your own pages. Tackle those [[EXTRA CREDITS]] that jump out to you as you learn, but feel free to leave some to do later at your leisure. 2. I want to build something similar If you're looking to get your hands dirty (either by building your own generator site or your own CSS layouts), we recommend you: Get the lay of the land by skimming all 3 files and finding the sections related to your project Play around with the existing code in the relevant sections to understand how it works and what to "lift" Build your own site from scratch, using this learn-along as a reference Our advice
November 19, 2025 at 9:32 PM
Reposted by BobaBoard
fujocoded.bsky.social
...snatch this guide at the lowest price this side of the launch! For the lowest-it’ll-ever-be price of $5, you can get your fill of:

- website goodies 🌐
- wallpapers 🖼️
- ...and a fun, accessible HTML/CSS/JS learn-along for website tinkerers yearning to grow and explore useful, modern techniques!
First image: Screencap of a preview for the Fortune Cookies site. Boba-tan, the FujoCoded mascot, is in a white and red robe with a light golden fortune cookie as a moustache. Boba-tan is standing against a tan background with red borders. Under Boba-tan is a white box with red border, and black text that reads “seek a fortune if you dare”. Under that is a clickable menu, asking for the user to select a vanilla, chocolate, or lemon fortune cookie, and a button saying “get a fortune”. Vanilla is selected. Table of contents for the HTML file Table of contents for the CSS file Table of contents for the JS file
November 7, 2025 at 7:30 PM
Reposted by BobaBoard
fujoweb.dev
- 📺 Stream recording (starts at 11:00): www.twitch.tv/videos/25557...
- 📖 "Astro Learning Path" Doc: leaflet.pub/117c41f5-52a...
- 🌟 Our Patreon (wink wink): www.patreon.com/c/fujocoded
Special Stream: Astro Learning Path - essentialrandomness on Twitch
essentialrandomness went live on Twitch. Catch up on their Software and Game Development VOD now.
www.twitch.tv
September 2, 2025 at 3:11 AM
Reposted by BobaBoard
fujocoded.bsky.social
Having others write for us was revelatory. We're still working to nail down what learn@ "is" (more info in the newsletter), so we decided to get input from the best: YOU!

This Monday, help us brainstorm our next series of articles. Let's teach fans to build their sites 💪 twitch.tv/essentialran...
A poster advertising an Astro stream. It says &quot;learn@FujoWeb.dev presents Special Stream: Learning Path plan-along&quot;. The stream is to brainstorm new Astro articles together and is at Thursday September 4th, 3pm Pacific time, on the &quot;essentialrandomness&quot; channel on Twitch. In the corner is Boba-tan holding a rubber duck saying &quot;We can ship it!&quot;
August 28, 2025 at 9:46 PM
Reposted by BobaBoard
essentialrandom.bsky.social
On my side, I've been working tirelessly to create organizations that involve "everyday fans" in horizontal governance, teaching the skills they need to bring forth a better future. If I convinced you of the importance of this work, help us keep going:

www.patreon.com/c/fujocoded
Slide 67. Enter FujoCoded LLC. The glowing neon pink and neon blue FujoCoded LLC logo text along with glowing neon yellow lemon with a bite taken out of it, atop a dark purple module that's reminiscent of 90s nostalgia and Web 1.0. Empowering fujoshi and other online subcultures to shape their web through software, education, and community collaboration. Since 2024. Overview of the FujoVerse, with the logos arranged on a grid. Support us today! Patreon.com/fujocoded FujoCoded - our projects The Fujoshi Guide to Web Development - The cast lineup of shippable ikemen tech concepts. Accessible guides to modern web development for the niche subcultures of the web. By professionals, for everyone. Fandom Coders - Boba-tan winking as she holds a rubber duck. A judgement-free learning community for software weavers at all levels building the fandom web and beyond. BobaBoard - Boba-tan winning a plushie of her blorbo in a crane game. Self-hostable forum software updated for today's online dwellers. An active experiment in shared governance and collective building. ...and more! - AO3.js and Astrolabe logos. Tools, libraries, and gatherings to help people bootstrap their coding projects or find open initiatives to contribute to.
August 20, 2025 at 6:54 PM
Reposted by BobaBoard
illuminesce.net
Huge thanks goes out to the volunteers at @bobaboard.bsky.social and Ms. Boba for freely sharing their thoughts and resources on sociocracy. Y'all inspire me. 💚
July 2, 2025 at 10:27 AM
Reposted by BobaBoard
essentialrandom.bsky.social
This Saturday, I'm giving the spiritual successor to this talk at @citruscon.bsky.social, "Working Together in a Dying World".

If you're a BL fan come to the convention (it's free!), meet new friends, and come listen to it live! And if you're not a BL fan... maybe it's time to become one 😏
Screenshot of the panel "working together in a dying world" by Ms Boba. Synopsis reads: "There's no denying it: shit's fucked. From the internet to the world at large—and even within our own communities—it feels like everything’s falling apart. If we're going to make it through, we'll have to do what every ragtag team must: learn to work together. But how do you do that when everything already feels too much?"
June 16, 2025 at 7:19 PM
Reposted by BobaBoard
essentialrandom.bsky.social
We'll only get out of our technological bind by giving users the tools and knowledge they need to come shape the Indie Social Web in a way that truly feels *theirs*—flattening the Hierarchy of Power that divides them and platform runners.

This is power-within: knowing YOU can make a difference.
Slide 55. Power-within happens when we recognize what we're capable of and know we can make a difference. Slide 56. The Upward Spiral. A circle or cycle with arrows looping back around. We create healthier, well-governed organizations, more people can step into their own agency, we create healthier, well-governed organizations (and communities! and platforms!)
June 16, 2025 at 7:19 PM
Reposted by BobaBoard
essentialrandom.bsky.social
The talk (and article) offers counterarguments to the objections we've found our community members raise when called to step into their power. I was anxious to name it, but learned helplessness resonated a lot.

@mmasnick.bsky.social talked about "digital helplessness" recently. This is our enemy.
Slide 42. But I can't take on power! 1. I have nothing to contribute. 2. I don't have time to contribute. 3. I'm too x to contribute (x being a variable for whatever the potential contributor feels is preventing them from contributing). With the tweet from g @stopitg (originally RIP to your grandma but I'm different) now RIP to people who can contribute but I'm different. Slide 54. Learned Helplessness. When someone who is consistently told or shown they are incapable of certain things accepts that as truth.
June 16, 2025 at 7:19 PM
Reposted by BobaBoard
essentialrandom.bsky.social
Above all, power is not as simple as we make it: while we all understand the power that flows from top to bottom of a hierarchy (power-over), we rarely talk about power that flows FROM the bottom of a hierarchy to the top—even though we see it all the time!

Power-under is all around us online.
Slide 37. Again adding to the prior slide, now with an arrow pointing from bottom to top, labeled power under. Slide 38. A quote from Steven Wineman's Power-Under: Trauma and Nonviolent Social Change: Power-under is [...] the power to maintain control of the victim role, creating a context of guilt and obligation. Slide 39. A set of three excerpts, with key points highlighted, indicated here by surrounding with * asterisks. Excerpt 1: stupidity. this can apply to both staff who shut themselves off from the needs of the users as well as *users who expect overextending care from people who are either unpaid volunteers or comically underpaid laborers* toiling digital fields for less than the abuse is worth. Excerpt 2: These *complaints often use highly emotionally charged language*, sometimes to the point of blaming the staff's failure to comply with their demands for a decline in one's mental health or worse. If the staff is not portrayed as actively malicious, at the very least they must be disinterested in what their users want. Excerpt 3: it's easy to lash out to the staff of websites when you're frustrated with something not working, and *it's even easier to find ways to morally justify it* as long as your verbiage is particular and your arguments are, at face value, difficult to go up against. but i'm a (the statement cuts off).
June 16, 2025 at 7:19 PM