Website

About the Website

Introduction

So maybe you got here and asked yourself, why in the world did they do all this work on the website? Well, as your friendly neighborhood webmaster, I'll do my best to explain.

Once upon a time, I came to Tekko with the responsibility of managing content on the website. The editor we used at the time was plagued by glitches that would cause the page to randomly reload before we were finished, content shared between pages would permanently disappear for what seemed like no reason, many pieces were duplicated in a way that forced us to make the same change on every page over and over, and the list goes on. The website was also impossibly slow, causing excessive wait times for not only our users, but our own web team too. Needless to say, that system made content updates very painful.

I happen to develop websites for a living, and I've been working in the industry for about 5 years now, honing those skills for over 10, so I understood these problems and how to fix them. I also understood that taking on a project of this size was going to be a huge commitment that I wouldn't get paid for, and I would be making myself vulnerable to thousands of critical eyes.

So why did I do it?

Well, from a selfish perspective, designing and architecting a website like this provided an opportunity to work with the technologies I'm most excited about, giving me valuable experience to add to my resume. Besides that, I'm just super passionate about anime and this community, so I wanted to make a positive impact somehow! Finally, being in charge of website content, it makes my job a lot more pleasant, and the other content editors on the web team are pretty relieved too.

So I brought in a couple more volunteers from my network to help me develop this beast from scratch, and we're proud of the overall result.

Resolved Issues

WHEW! We patched a lot of stuff recently! If you were previously facing issues with the website, please check the resolved issues below to see if we fixed it.

The splash screen was flickering unpleasantly in Safari

This was because Safari has a rough time with animations. I had temporarily fixed the flickering by just forcing the mobile background for desktop, but that looked strange due to the alignment of the text and nothing to fill the space.

After weeks of struggling and optimizing in every possible way, I could not make that cool parallax animation happen gracefully in Safari. I decided to keep these optimizations around anyway, just because it would be better for performance overall on the browsers that DO support complex animations well, so you may notice a slight change in behavior for the background used inside the gear. I thought the fixed background attachment was a pretty nifty effect, but it compromised accuracy and sometimes even performance, so it's now fixed within the gear. That said, the gear and the main background are on separate parallax layers already, so having even more happen on top of that might be overkill anyway.

BUT I did at least make the full splash screen visible on desktop without the animation. As for Edge, I'm just waiting for them to upgrade in a couple months. No sense wasting time fixing something that will be fixed by itself later anyway, since it doesn't prevent the user from viewing or interacting with the website.

There were no dates on Safari

We did it! This one took a bit more effort - turns out Safari gives a lot of people this issue, it wasn't just us. If you're code savvy at all, then you might understand what I mean when I say the "Date" constructor would only accept a specifically formatted string. In other words, "2019-04-02" confused the crap outta Safari, but it was okay with "04/02/2019" because this is AMERICA. Regardless, all that stuff happens under the hood before it spits out the human-readable dates you see in the top right and in the splash screen, so when it failed you didn't see anything at all.

You couldn't open links in a new tab

If you've spent much time on the internet, you know that you can open links in a new tab by right-clicking them and choosing "open in a new tab," or simply using ctrl+click (or cmd+click for Mac users.) A user let us know this wasn't working for all of the links.

Links normally work a certain way, but a single-page application (like this website here) will cancel that behavior and do its own thing. Funny enough, the framework we used had already addressed this issue, but I had inadvertently prevented that part. I didn't notice because I never tried to open a link in a new tab! It was an easy fix, I just removed the interference.

The mobile header wasn't displaying properly

The header was way off the screen on mobile devices, you couldn't even see the menu button, and the splash image was trying to show the desktop version which just caused all sorts of issues.

The issue actually came about because I had quickly added a message to the header for Safari users about all the issues we had originally, just so they at least had some idea of what was going on. This is the joy of making hasty fixes. Don't skip QA, kids. Fortunately, I was able to fix it again pretty fast!

The fonts used to look like crap until the page loaded

The font files used to be hosted externally on a different website, and we were loading them from there. Now we're the ones hosting them, and since you're already loading the website from here, that's not nearly as much work for the browser to do. Hopefully they don't take a noticeable amount of time to load for you anymore!

A hash in the URL didn't take you straight to a specific section

You might not have known this, but if content is laid out properly, you can skip to sections halfway down a page by adding a hash to the end of the URL.

www.example.com/page#section

This was not previously working, because a single-page application (like this here website) has a very particular way of taking you to each page. In layman's terms, it sees everything the browser does to show you a website and says "nah man," and then does things its own way instead. It wasn't a big deal to fix though, it just took a little extra configuration is all.

Outstanding Issues

As much as I'd like to lie and say that experienced developers never encounter issues, I can't even say that with a straight face. In all my years, I've never seen a project completely free of some little bugs here and there, especially if a new feature was recently added.

If you notice an issue that isn't listed here, please let us know by using the button at the very bottom of the page!

The images take a few seconds to load on a fast connection

I'll admit, this is because I was in a hurry, and I didn't get a chance to optimize all the images for the web yet. Don't worry, this is right here on this to-do list, but I'm going to wait for our dev team to finish an image-related feature that only our content editors will see.

Feedback

We're listening! But truth-be-told, sometimes we get conflicting advice and we aren't sure which way to go. That's why we're going to take your anonymous feedback and make it into community polls that we'll use to determine what the majority of our users want to see. Submit your feedback by using the button at the bottom of the page!

If you have any further questions or you would like a reply from us, please feel free to email us at webteam@pittjcs.org . If you have any questions about Tekko in general, including events, badge purchases, volunteering, etc, please email the appropriate department from our contact page . The website department is not responsible for running all of Tekko, as much as we'd love to take the credit. ;)