SSL and 404 Pages and Passwords, oh my!
So I'll start by saying that I'm ready to remove most the passwords from the site. There's a lot that's been blocked off in the past and I don't really have a reason to lock it all anymore. So sometime soon, there's going to be a lot more people reading this. Hello new people. Finally, I've managed to get the site a certificate, which means I can use SSL. By the time you're reading this, you can look in the address bar and see that the site now runs with HTTPS instead of HTTP (s = secure btw). So, for users, this generally won't change you experience much from the surface level. The lock and S means that anyone looking at your internet traffic (such as a middleman, ISP, or your router) can no longer see the data being transmitted. Well they can, but they can't tell what it is or what's inside it. Before, anyone with access could just browse in and see what you were entering and sending. This is a big step to becoming a legitimate website and it really makes the site look more formal to those techies. No popular page should still be using basic HTTP. None. Zip. Zilch. In order to qualify for an SSL certificate, I had to pay for a review and certificate, and make sure my website would pass a basic inspection. I don't have an enterprise certificate by any means, but it will work great for this site. I contacted a CA (Certificate Authority) and ended up buying the encryption keys and cert from them. Anyways, it all works now : - ) And in other news; the website now has a custom 404 page! 404 is the error code returned when you try and access a webpage on a domain that doesn't exist. By modifying some files (or scripts, depends on how you host your website) it's possible to always redirect to another page if the page someone searches for doesn't exist. Now, if you go a page that doesn't exist, like www.seventhomsen.com/pepsiisbetterthancoke then you'll get a page telling you that there's a 404, a nice little vector graphic, and a search bar. This post seems comparatively short compared to the last two, but I don't really know what to add. Oh, I forgot to mention I added Bohemian Rhapsody and Mortal Engines on the movies page. If they aren't accessible when you're reading this, then they are most likely still processing. It literally takes days.
So, you can see that the code breaks generally start with a .shutter. The period signifies in CSS that this is a class, and the name is shutter. The first code block makes an invisible box around the item, and sets the duration of the transition. The second one has some resets to make sure the text is still in line and tidy, despite it having an invisible box around it. the :before signifies that the stuff there appears before the text does on the page. And the bottom actually sets it so that the item will transform once you :hover over it. Then, I can simply add the class prefix into any item on the page, and it will have the shutter affect. Here's the code for the example that's above:
It's as simple as just applying that to anything, and boom, shutter. That's why CSS makes website development so modular. With a few letters, I could change what font every single paragraph on the site uses.
We also now have a public chat! Using an embedded chatroom from a handy website called chatovod, anyone can now chat anonymously on the website. I think this is a cool feature to just talk to people or post random stuff. It's cool. Here's the chatroom embedded right here!
You can view the chatroom on the main homepage, and you can also access it under the 'Other' navigation tag in a full page format. And yes, you can and will be banned if you're racist or something. I literally don't care what you talk about as long as it isn't insanely insulting or sexual.
And with that, I wrap up another successful post. Still trying to conquer SSL, and I hope that next time I post here that's what the article's about. It's been a while since the first post, sorry about that. I've been doing a lot of work under the hood. I'm still working on getting an SSL Certificate. It should be coming, I think I'm in the clear. Meanwhile, I've been updating the website with vectors. A vector is an image that can be resized and manipulated. Normal images (raster images) are stuck with pixels. Pixels are great for real photos and videos, but they can't be resized well and it's very hard to individually manipulate parts of a raster image. Using vectors, I can make logos and animations for things that look like images. Think of it like text. If you zoom in on text, it automatically looks perfectly smooth. That's because text rendering actually uses one of the first forms of vectors. So, if you zoom in on this paragraph, it will automatically sharpen. However, if you zoom in on a raster image with text, it will look very blurry.
In the code above, you can see what looks like a bunch of mumbo jumbo. I make all my vectors in Adobe Illustrator, and it allows auto exporting as an SVG. The code shows paths. A path in an SVG is basically just a single line or shape, kinda like how it sounds. There are only three lines on my logo, but keep in mind there is also a black stroke. These paths are represented with a series of numbers and characters in a plane. Think of it like a 2D coordinate plane from Algebra. Lines are connected between each dot to form an image. So if the image size changes, it can just automatically fill in everything, providing perfect scaling. Each path also has a class. At the top, classes are styled using CSS. On my logo for instance, you can see I'm filling the .st2 class with #FFFFFF. That's the RGB color code for pure white, which is the basis of my logo. This is just specifying to fill the points up with white. So what else is cool about CSS. Well, CSS has animations. Using this, we can use Javascript and CSS to animate vectors. This provides an awesome and smooth affect. This is how websites make awesome animation for the users that look clean and effective. Here is an example. It's the logo from my main homepage, where the black stroke progressively appears around the vector. And also, the logo from my tournament Ultimate Underground, which uses the same effect. Try zooming in! The edges are perfect!As you can see, these CSS animations can be used to make awesome things. This is only a basic animation, the possibilities are endless! So, let me put the code for the animated logo here: The animations are made using keyframes. Since this isn't really supposed to be about CSS, I'll just say a few quick things on how it works. JAzTzDPf and anything that looks like it is actually a class. This means that anything in that class will load with the animation. Every keyframe, it draws the black stroke some more, creating what looks to be a super smooth drawing animation. That's all for now.Thanks for checking this out, for real. I'm working on adding 1 or 2 new movies. Kinda stuck on music. What's some music? Not looking for anything too niche since I can't add it very easily. Until next time. : - )
Hello everyone! This is a simple post testing the functionality of this page. Here are some very high quality pictures of me you can use for photoshop and such. I had a few request for these. To download them in full resolution, use the buttons under the pictures. In the future, more useful things will be posted.
|