_____ _____ _____ _____ _____ _____ _____ _____ | __| | | __ | | __| __ | __| __| |__ | | | __ -| | | | __| -| | | __| |_____|_____|_____|_|_|_|_____|__|__|_____|_____| Communities List Devlog | Maintained by Sequor [YYYYMMDD] 20240531: - This was a fun problem to solve! I *think* I've finally nailed it, and I don't plan on touching it again for a while. So, YouTube embeds are already good enough that they don't cause any issues with formatting. Twitter embeds, on the other hand, load their text contents first, and the video later, which means their size changes. I had already created two separate JSON properties: twitter1 and twitter2. twitter1 was already in use and didn't require any changes, but twitter2 has NOT been used before, so I had to write a check for it as well. Once it determines that either twitter1 or twitter 2 is in use, it creates a container div that is styled via CSS. CSS has recently added the `aspect-ratio` property, and that's what saved me. The video embed and the credit line combined for *most* of the twitter embeds is 720 x 444 pixels max. That's an abnormal size and certainly doesn't meet a standard ratio, but the aspect-ratio property doesn't care. Setting the aspect-ratio property to 1.62:1 ensures that when the viewport is resized (i.e, when a mobile device changes orientation), the media container div keeps its aspect ratio, and therefore will always be right. Now, what about videos that *aren't* 720 x 406? That's what the twitter2 JSON property is for. That container is set to be more square, so that videos with more of a 4:3 ratio will still fit just about perfectly. Anyways, I'm sleepy and I'm done with this for now. Until the next issue arises! 20240516: - Work continues on fixing issues with elemnts being pushed out of bounds by slow-loading media elements. I've tried a bunch of things so far: setting up mutation observers, waiting for Twitter oEmbed calls, adding delays, and all of it... didn't work. I'm not sure if my implementation is wrong or if I'm just an idiot, but nothing works outside of monitoring the entire website for child element height changes, which is resource-heavy. My next attempt is to actually create a temporary object that fills the dimensions of the video to "reserve" it, and then removes itself once the media element is completely loaded (which there's an API call for). Hopefully that'll solve the issue once and for all. The main site is also under construction but I'm slow as shit at getting front-end design work done. 20240501: - Oops, I lied. Turns out that some of the communities on my list are no longer operating, so I needed to account for that. As such, closed clubs and communities are now marked as "Defunct" and have a new red tag. Additionally, if I have a screenshot of the closure notice, I've linked it in the community's description. This should really, really be the last update to the community list backend for a while. Progress is being made on the main news site! Byebye P.S - With so many requests being sent to the various embed API's (YouTube, Twitter, etc), it's starting to bog down the site. I definitely need to revisit lazy loading using placeholder images, but that's something for another time. 20240428: - Happy to report that the Community Creator and Community Uploader scripts work exceedingly well! As I'm using them, I'm realizing that there's a few QoL things I'd like to add (mainly to the Community Creator), but for the most part, they're a HUGE time-saver. This will probably be the last devlog entry for a while, as I'm shifting focus to the main site. Knowing how long just this portion of the project took, the main site will be quite a bit of work; I'm just not happy unless it's as performant as I can possibly make it! Anyways, to whoever reads this, I love you and I hope this list helps! Party on, and DIVE_DEEP! 20240423: - First iteration of my Community Uploader is nearly done! I've never written anything in Python before, so this has been a learning experience. In order to test it out, I pushed a new club listing for KYUUB and it got just about everything right. I still need to set up the actual file transfer code, but once this is complete, I'll be able to pop up new communities with ease. Hooray! 20240307: - 'Devlog', 'Backlog', and 'Updates' links now open in a new tab. 20240306: - Reorganized the sidebar. I always felt it was a bit dumb to not have a link back to the main site, so I added that. Then I got a little silly and added a subheader and cut out a lot of the fluff text, because sometimes I read something a thousand times over and it doesn't sound right anymore. So, keeping it short and sweet this time. - Sidebar links have title properties now. Why is this in the devlog? - Fixed an issue with the accordion content properties for mobile causing the content box to be somewhat visible / not hidden by the header, even when the accordion was collapsed. ...I have no idea how to explain this. Just trust me, it's better now. - More troubleshooting done for the weird "shit don't fit the box" bug. It seems to be an issue with the accordion's content dimensions when the viewport size changes. To elaborate a bit, just about everything on the site is generated via JavaScript, especially the accordion objects. Their dimensions are established based on the size of its contents; they're only as big as they need to be. The problem comes into play when the accordion's contents scale for different viewport sizes (looking at you, social buttons). When things get smooshed smaller or grow bigger, the open accordion content window doesn't recalculate its size; it only recalculates when the listener event for the accordion expand/collapse triggers. The quick n' dirty solution is to just set up a resize event to trigger and run a recalculation of the content container size. However, I'm lazy, and without knowing what kind of performance hit that would have, I'm not going to bother right now. As it stands, if you experience this issue, just close and reopen the accordion object; it'll fix itself. - Work has begun on a "community uploader" that can be used to quickly (more quickly) add communities to the website with minimal effort. I'm writing it in Python because, uh... I dunno. I never really use Python so I thought, 'hey, it could be fun'. Anywho, the first pass at it is just about done. Once it works, I'm taking a short break from dev. My eyes hurt. 20240303: - HTML, CSS, and JavaScript files minified for performance. Removing white- space can shave off a bit of loading time. - Site officially published to https://communities.submer.ge/. It's not what I would consider feature-complete by any means, but it's stable (for the most part). I'll be continuing to iterate the testing site with new features and fixes, while keeping the communities site as the production side. More work ahead! 20240301: - Fixed mobile responsiveness. This was a bit of a pain to get right, but I think I nailed it. All elements should scale properly. I have noticed a bit of an issue with expanding accordions that use Twitter Video embeds, but a simple close/open cycle fixes the display. I'll play around with it more and see if I can figure out why that happens. - Fixed viewport overflow when viewing the website and smaller resolutions. For some reason, shrinking the window down would occasionally clip the sidebar and main content column. A few simple tests, and this should now be a thing of the past. - Final checks for production site. This website's development is coming to a point in which I can feasibly release it to the public. The production site will be stripped of any console logs, and all scripts and styles will be minified to remove whitespace and further improve performance. Any and all optimization measures will be explored to keep this site as speedy as possible. 20240228: - Changed this document to Devlog. - Added updates.txt file. - Added backlog.txt file. 20240225: - Added preloader. This is just a screen that displays before all of the website content is loaded, so you're not watching elements pop in. Once the site is done loading, it gives a 1-second buffer and then fades out. - Added visual tags to the accordion object headers. This should help quickly identify which kind of community each listing is. I'm not really happy with how it looks at this moment (since it makes the titles misaligned with each other), but the alternative is to either create a dedicated tag container at the start of the header (preferred) or to prepend it to the accordion status arrow on the right-hand side. - Removed the lazy loading feature (for now). Since most of the content on the site is dynamically generated via JavaScript, this means that the accordion's content height is also dynamic. If I lazy load the inner elements upon expanding the accordion, it won't properly adjust the height to fit the newly loaded content. This leads to the content description and social buttons being cut off. Until I figure out a way to fix this (probably by setting placeholder items), the site won't be using lazy loading. 20240211: - Added social buttons. These use icons from FontAwesome, so there's a minor performance hit from the script import. Might consider using local icons to mitigate, but this works for now. - Added Media Preview images. For now, these go where the YouTube video URL's go, so you'll get one or the other. Eventually may be changed to a carousel or something, but that could be costly performance-wise, which is against the design philosophy of the site. I noticed that when loading the one preview image I created, even as a WebP file, it was listing as ~48mb of data usage, which is way too much. I may need to look into serving a medium-quality image at first, with a higher-res image in a lightbox onClick. [EDIT FROM THE FUTURE: "No idea where I got 48mb from. Was I high? That image is literally 195 KB. WebP > PNG for real."] - More formatting. All elements should have a ~15px margin to give it some uniformity. The issue is that some objects don't use their full bounds (looking at you, description section), and therefore *appear* to be using a larger margin when they're not. - Wrote the beginning of the lazy loading feature. I'm still playing around with how I want to implement this, but hopefully I can come up with a solution that'll allow you to only load the content that you're actually wanting to see. I'll most likely serve placeholder images that you can click on to load the actual media. I should also introduce a short cooldown so that it can't be spammed to load multiple heavy embeds at once (but why would you do that, anyways? I digress). 20240210: - Added YouTube Embed support. All you need to do is supply a YouTube video URL into the "media.media" property and it'll automatically parse it. - Added a Twitter Embed check. This works differently than the YouTube Embed method, as Twitter doesn't like you generating your own embed code. You have to do it via their Twitter Publishing page, and then stringify that to store it in the JSON, and then have the script check to see if "media.twitter1" is populated (not null). If so, it appends the value of the twitter1 property. Finally, it performs a check to see if the embed code is successfully appended, and then it calls for the Twitter Widget script to load the function again. 20240209: - Fixed the filters. Turns out that the JS code I had for converting the category names into tags was bad; setting up category keys fixed the issue. This gave me a significant headache to fix, I overlooked it for nearly four hours. - Added banner elements. These also pull the filename from the JSON file and append it to the InnerHTML generation. For now, these will all serve WebP formats, but I do want to write a conditional that checks to see if your browser supports WebP, and if it doesn't, it checks for a PNG version in the same folder. [EDIT FROM THE FUTURE: "Heck no. WebP has been supported since, like, 2010. If your browser doesn't support WebP files and you're also on VRChat, please update your browser."] - Switched to AR Open Sans for text. This font is clean and easily readible, with very little decoration. No excessive swiggles or swirls, just smooth, clear lines. 20240208: - Filters added, but broken - Changed color scheme 20240207: - Sidebar added - Successfully parse JSON files 20240206: - `communities.submer.ge` created - Main column with accordion elements added