Once again another project that was a lot easier than I anticipated. The HTML and CSS portion was easy because it is easy to hide elements based on screen size. Typically you just create a “hide-mobile” ID, set its display type to none, and encapsulate you want hidden on mobile within the id. You can see what I mean in the HTML source code for the Portfolio page. The hard part was using JavaScript to pull off the same effect. JavaScript has a window class that can get the width or height of the screen, but it alone is not enough to get an accurate size. As I learned from StackOverFlow you need to multiply that number by the windows device pixel ratio. I threw that equation into a function and had it return that value for simplicity. There is a bug where if you reduce the Firefox window small enough it will not iterate through the array properly.
There are possibly some ways to overcome the bug within JavaScript, and I will work on a fix. However, the update may be deployed before that fix is in place. Aside from that, I am going to migrate this site to a new provider. That migration will not happen overnight as I want to put a Node.JS system in place before I make the move. In the meantime I plan on posting more stuff on IT and tech. I’ve been destructive enough anyway, and despite my lack of planning this is all going pretty well. Anyway, you can check out the new page.