wingsooyoung / oxloveletters

My latest silly little coding project for OMEGA X!

OXLoveLetters (aka FORXLoveLetters.com)

All the code for my newest "silly little project"! (Hosted on Netlify)

IN PROGRESS... (FXLL VERSION 3.0):

If I have realized anything over these past several months, it is that my site was NOT designed to handle the number of submissions it has received. I have been brainstorming nonstop about new and better ways to manage all the letters. Who would have though that vanilla HTML and JavaScript could only get me so far? (/j)

Right now, my goal is to slowly start converting pieces of this site into React because I believe that is the framework that can help me the most moving forward. I don't know a damn thing about React though, so this will take me some time to work on, but I will keep working until I have a new and very improved version of FOR X Love Letters for everyone!

Thank you for your patience! ♥

APRIL MEMBERS UPDATE (FOR X LOVE LETTERS VERSION 2.0) NOTICE:

IT'S FINALLY HERE!!! I've worked almost nonstop for these past couple months, trying to get this update out. I know the site is probably still lacking in some areas, but GOD DAMN I am so proud of this update! Functionally, I realize all it looks like is a new dropdown list on the form to write letters, and some new postcard designs, but behind the scenes I have been making so many changes to help the site run more efficiently. I completely changed the entire submit process (goodbye Google Sheets!) which definitely took up most of my time. And when I wasn't working on that, I was fighting with my inner artist to design eleven (11!!!!) brand new postcards... And considering the "handmade" theme of the website, I think I'm pretty proud of my final creations. However, please anticipate version 2.5 where I add some more doodles to a few of the cards, which is to be released after my inspiration grows back ❤

• Brainstorming for the new postcard designs can be found here

FEBRUARY 14TH LAUNCH DAY NOTICE:

Thank you for visiting forxloveletters.com! While the website is functional, it's not perfect yet, so if there are any issues you notice I would really appreciate you reaching out to let me know. The mobile site may look a little off depending on what device you are using, but I'm working on fixing those issues. You can report any issues in one of the following ways:

1. Create an issue here on Github
2. Send me a message on Twitter / Tumblr / Instagram (linked below)
3. Fill out this Google form

CODE

• HOME
• READ
• WRITE
• ABOUT THEM
• ABOUT THIS
• FAQ
• SITEMAP

CREDITS:

This project would not exist without these websites, examples, and resources listed below!!! Nearly all of my web development experience is self taught, so I'm very grateful to everything I have linked below for helping me get to this point.

1. This post I found on Pinterest that became the design inspiration for the entire site!!!!! ❤ --> HERE

2. This Netlify example site showing how to take in form input and populate the comment template with the form's data -> HERE

3. This basic HTML form app on Glitch that shows how to use form data input -> HERE

• Glitch example found on web dev's Learn Forms! section -> HERE

4. W3schools, yes the entire website, who I would be lost without -> HERE

5. Sketchbook, which I downloaded several years ago when it was released for free and still under Autodesk, and Photopea, the web-based photo editor putting Adobe Photoshop to SHAME

6. Canva, for helping me create the postcard design as well as many other design features -> Draft designs can be viewed here

7. Social Media Icon Buttons on the ABOUT pages came from here.

8. Instagram Logo SVG

9. Tooltips courtesy of Tippy.js

10. Google Sheets integration

11. Phosphor Icons and Google Fonts

12. Rounded corner gradient border -> HERE

13. Shout out to my favourite colour resources:

• Color Tool by Material Design
• Coolors
• Paletton
• HEX Colour codes for transparency
• Transparent Textures
• UXPRO

14. For the new postcard designs, I used Canva, Sketchbook, Photopea, and Boxy SVG

Special shout out to Intellij's WebStorm (I hate that you're not free though) and the Doki Theme plugin, because coding with a Hastune Miku layout makes me work better :)

---

Find me on Tumblr @ omegaxmasterlist.tumblr.com

Find me on Twitter @oxmasterlist or @mylilbirdcage

Find me on Instagram @omegaxmasterlist

oxloveletters's Issues

Deploy on Approval

okay this is not working!!! Figure out a way to approve a bunch of letters, and THEN click a button to redeploy the site (building in those newly approved letters)!
Approve Button --> adds a new spreadsheet row to letter-approved

approve now

• takes data from previews
• posts as form submission to approved-letters
• upon each new submission to the form, zap is called AND rebuild is called
• zap takes the submission data and creates new spreadsheet row in letter-approved
• read page takes data from letter-approved spreadsheet rows to create each of the letters!

better approve

• cancel rebuild call on approved-letters new submissions
• tie rebuild hook to new button on admin approval page (i hope)

Mailbox Colour

several comments about changing the colours of the background or mailbox so they stand out more from each other!!! probably easier to change the mailbox tbh 😭💔 the background was um.. A Bitch™️ to make!

Opening Animation

Work on reducing loading time / delay on the animation!

Definitely a little clunky, slow, and awkward right now so make it more smooth and seamless before launch day!!!

open new branch to begin moving OXM content over from Tumblr to Netlify!

TO DOs (Apr 11th)

• look at new phosphor icons?

• ABOUT OX general clean up and improve

• ABOUT THIS bg colour adjustment

• #21

• make sure READ is mobile friendly in general

• #20

sanity.io

got side-tracked trying to come up with more helpful tools to integrate into OXLL so

madlibs-sanitytest repo

_{I finally submitted an issue to the 11ty repo and hopefully someone can help me out over there ... fingers crossed dude!!!}

_{and god i just know my problem is like oh you gotta use 3.10.2 not 1.56.7 or maybe a missing comma or something SMALL and SEEMINGLY INSIGNIFICANT and EASY AS HELL TO MISS... christ}

Colour Customization for member specific letters

Someone suggested changing the postcard's colour based on each member and I like that!!!

Member filtering is definitely something I'll work on implementing

• Add a drop down list to the letter form,
• maybe pass along as a hidden text input to approved
• secretly use it to determine what postcard img the approved letter gets??
• drop down list on READ page to show only letters for one member

options for dedication: individual member (11), full group, not specified? = 12 or 13

options for filtering: individual member (11), full group, all letters = 13

Various To Dos

• Add {% if %} statements to css style declarations (each page only has css for elements on that page instead of for everything across the whole site)
• Add styling for Read pag nav and Admin pag nav bars
• Fix links on Success.hbs page
• Test to make sure the PipeDream method of deletion still works with the new form submission caching method (aka without the netlify form plugin that i customized!)

Then continue with approving the letters!

Resubmit with 'Members' input & Delete from letter-form on approval

ADD MEMBER FILTERS TO EXISTING LETTERS ON "READ" PAGE:

1. Delete all submissions from approved-letters
2. Resubmit and include correct memberbox letterTo selection!!!

Fix lettercontent undefined issue

        <div id="contentbox" class="template">{{ letter.message | safe }}

change to:
        <div id="contentbox" class="template">{{ letter.message }}

Read Pages

• fix home page button to go to paginated version of Read Letters

• postcards aren't showing member versions again 😐 fix that

Current/Recent Group Updates page??

"Maybe add updates from their court cases, their win and release from their contracts, next steps"

Definitely considering this, not an immediate top priority but once all the current features are in better shape, look at expanding the site with things like this! :)

What IS This Place? (fix about modal)

"I would make the "what is this place" icon a bit more visible - because I honestly didn't see it until going back to fill out this form lol"

fair enough lol

Change so the about modal pops up first when you enter the site!!!
And like, by extension then, make the about modal prettier and stuff...

Add this link to README credits

http://iamcocoasmom.blogspot.com/2014/02/valentine-mailbox-svg-cuts.html?m=1

The mailbox DIY post I found on Pinterest that inspired the whole website 🥲🙏💖

RELEASE DAY EVENT

Hi I'm an idiot!
Junghoon's bday is LITERALLY ON VALENTINE'S DAY???????????

Do smth or add smth or SOMETHING to mention this/promote this on the site?!

VERSION 3.0

GOAL: Move submission pipeline away from the two form method!

The current two form method causing delays due to the Netlify API calls.

Pipedream is a good service though and I would like to make use of it for the new method, just without the current API calls.

• keep letter-form
• export letter-form data to (tbd)_

1. sanity.io
2. airtable

• fetch data from external data source (tbd) and display on site

FORMS AND SUBMISSIONS...

So turns out my system was not set up to handle 100+ letters let alone .. what are we at .. 800+???????

So:

• finish rebuilding the netlify-plugin-form-submissions-twos to have it paginate properly ! i want to view all the submissions on the admin approval page but it's stuck only showing 100 right now

• figure out the best (fastest and easiest) way to filter out the duplicate submissions, spam, etc

re this: right now i

• downloaded the csv letter-form subs and uploaded it to notion.so

• grouped by ip address

• tag as duplicate if message, member, and ip is the same

• some subs have selected YES to sign their name but the nickname is blank?? make sure i fixed that when submitting to approved-letters to add FOR X, but also go back and do the form validation thing where it wont let them submit without filling that out if they select YES!

• i dont have an easy way to go back thru and actually delete the subs besides using the ui. trying to find one.

• i also manually made api calls and saved the responses in chunks of 100 per json file, which has more info than the csv the ui gives you!!! maybe that will help. perhaps.

• CHECK THE SUBS MARKED SPAM AND MANUALLY CHECK IF THEY ARE OR NOT??????? OMG DON’T FORGET TO DO THIS..... PLEASE

See I just don't know enough to make the automation process easy and seamless so tragically hard-coding and manual labour is my only course of action right now 💔 BUT I FIGURED OUT THE FORM PLUGIN AND GOT OFF GOOGLE SHEETS SO MAYBE IF I KEEP TRYING I WILL FIGURE THIS OUT!!!!!!!!!!!

ALSO... I started using notion.so because one of the alternate form services lets you send ur data over there without zapier I believe! Which would help bc zapier is dead to me after i reached their limit of function calls 😭💔 And netlify forms is easily integratable but will get crazy expensive if the site keeps getting this many submissions 😭😭😭😭😭 Which is a fun problem to have and I am so happy and proud and flattered that this is even an issue and GOD I NEED TO APPROVE THESE LETTERS SO THE BOYS CAN SEE HOW LOVED THEY ARE!!!!!!!!!!

Bestie Ghoul Critiques

WIDTH: 303px

The letterbox opening is really cool. However it might a good idea to change the background colour to a softer, more light pink for better contrast only on the landing page. The pink you've picked works well on the other pages

I realize I'm on mobile but the space in between the text and the photo of the band is weird. I would try to eliminate that space.

I would also include boarders where you have the letters. You have them on the top and bottom but not the sides and it makes it look a little jarring

I would also change the pink to a more softer pink. It would probably be best to use the same light pink i recommended from the landing page

I have two colour pallettes here for the website the site that would probably work a little better

READ filters = MAKE THE BUTTONS MOBILE FRIENDLY SOMEHOW!!!

Improve "ABOUT OMEGA X" page

"Meaby a space for actualization of the ox activities or like photos of the members idk something like that for the "who is omega x" section"

she's still in very rough shape :'(

Add:

• member intros
• member photos
• more group photos?
• photos to timeline entries
• MAKE SURE ALL LINKS ACTUALLY POINT SOMEWHERE!!!!!
• fix mobile spacing of social media icons