Tag Archives: CSS

Frantic Bouts of Productivity

Work continues on my long-overdue website upgrade. I now estimate that the project has reached the milestone halfway point of completion. And I’m feeling pretty good about the changes; not only is the site looking slick but also includes some major improvements. At every step, I’m testing to make sure it’s functional and readable on a variety of resolutions from mobile to 4K, and that it smoothly scales for everything in between. CSS sure has come a long way in the last decade towards making element scaling more possible.

I was also impressed by the CSS grid layouts. They made it pretty simple to realize my bento box-style homepage with different-sized blocks that automatically arrange themselves to fill in any gaps and any number of columns. And almost no JavaScript was required for this, save for a bit to make all the columns end on the same row, which warrant either hiding or resizing some blocks. I think this new look for the homepage is a lot more compelling. And since it’s an automatically generated mix of posts and pages, it won’t require any additional publishing work like the old homepage “slider” (which has been randomly breaking a bunch lately despite me not touching it for a decade).

I’ve also been designing the look from the start with a dark theme, as I think that’s generally the preference these days—to not have your eyes blown out by bright screens all day. But I do plan on tacking on a light theme as well once it’s all done. I also have a slick new background mask that’s better compressed. It was a whole saga figuring out that WEBP alpha channels are not compressed the same way as RGB channels, and then discovering that there’s now actually masking native to CSS so I could just make the mask be grayscale with no need for an alpha.

snake spinner animationAnd I’ve finally made a snake spinner/throbber animation for loading events (seen at left). I wanted to do this in the past when I was making the current version of the site. I tried using Flash animation, but it didn’t look quite right. This time I rotoscoped footage of a sidewinder snake moving across sand. It’s only 8 frames, but I think it works pretty well. It gives kind of a lo-fi effect and scales quite well. *wink wink* I originally intended to use animated PNG for the final format, but ended up finding the dependable old GIF format worked best, so why not—it’s not like it’s deprecated or anything.

And lastly, I made several improvements to how media is used in posts/pages. I’ve been trying to make all the media usage consistent and standards compliant. So, all audio clips use native audio elements, and all (YouTube) videos use WP oEmbeds. I actually found old videos on here that were still trying to use Flash players for fuck’s sake. Downloads will also be improved by listing previous versions and downloading directly from the server instead of through a WordPress plugin (I think that was the cause of a lot of corrupted downloads in the past😬). And I’m making better use of syntax highlighting for code blocks and markdown-formatted changelogs.

Back to Diablo 2

Now it’s time for the (what’s become) regular section on game modding. I’ve been replaying Diablo 2 lately. Of course, I love the game, but the more I play it, the more I become aware of its flaws. I think they mostly stem from the game being just so dated. Or maybe the game is a bit bad, but we just overlook it because of the nostalgia…? I would love to give Resurrected a try, of course, but I’m not sure I can justify the price quite yet, especially since mods only seem to work in singleplayer. Bleh.

This is the first time I’ve tried playing the sorceress class. I’m usually more inclined to play melee or archer since the controls for magic can be so fiddly. Unlike Diablo 3, you can’t use skills on a single button press. You have to first switch to the skill, and then use it. And because you want to move with your left click, you really don’t want that to also use a skill, especially for a ranged character, it would be a constant dance of switching between move and hold still (to cast a skill without accidentally walking over to enemies). So that leaves you using all your skills with right-click and then either scrolling the mouse wheel to cycle through them (fine for a few skills) or selecting skills with keys first. Ugh… I dunno… you get used to it, I guess.

The sorceress is certainly a powerful class (well, until you start running into elemental resistance monsters), but the way the skills are setup really forces you to focus your points on only one skill. If you start spreading your skills out over several elements or spells, you undoubtedly fall behind on DPS. And the loot is less fun than melee, too, since the weapon damage and any added damage from items isn’t relevant for spell damage. I used the same staff (Bane Ash) for most of Normal, and just recently switched to a Leaf runeword staff in Hell, so there’s not much in the way of options for magic-user weapons. You just get whatever pumps up your skills the most.

The last time I was playing D2, I mentioned wanting to try removing magic find from the game. As a recap, my issue is that magic find is antithetical to the function of gear. Gear is there to help you survive and kill monsters, and it shouldn’t be there to find more gear. Better gear should just come naturally. Plus the way the game was originally balanced, you basically had to pump up your magic find to get good gear in the first place. It felt too forced.

Well, removing magic find is what I’ve been testing during this most recent playthrough. I’m still tweaking the drop rates, but I’ve eliminated magic find as a property from all items, replacing it instead with a mix of other properties: sometimes gold find, sometimes sockets, stamina regen and movement speed for topaz gems, added skills for Ist rune, etc. It’s been working fine so far. I’ve attempted to balance the drop rates so that you’ll get about one or two legendaries and set items during a session, and many rares. I’ve also cut back on the chances for legendary and set items with gambling as I found I was relying on that too much. But I only reduced the chances by about 25%—I don’t want it to be too tedious to gamble if you’re hunting for a specific item.

No idea when I’ll release any update to my Balanced Better Drops mod. I might want to do another playthrough first, maybe another Demon Hunter or Barb. Or maybe I’ll finally give Necromancer or Druid another try—if I have the fortitude to endure another spell-caster. I’ve also been thinking about making my mods easier to install and more modular and customizable by making a mod manager program. I know something like this exists for D2R, so I dunno…maybe it’s a waste of time since few people are still playing classic. But I’m finding it more and more difficult to keep my mods separated; they keep needing changes to the same files. We’ll see.

Also during this playthrough I’ve been trying out the high-res and high-fps mod called D2DX. It’s been a blessing for keeping me from getting migraines due to the low framerate of the base game. It does have a few bugs like a logo showing up on tooltips; sprites stretching weirdly, wiggling, or swapping out when moving; and occasional black screen flashes. But it’s still better that nothing.

Posted in Gaming, Modding, Website | Tagged , , , | Leave a comment

Mobile Improvements

I’ve made a bunch of modifications to the site that should hopefully make it a lot easier to read on mobile devices now. I’m really sorry I neglected to do a proper job of this for so long, but when I made this site back in 2011, mobile support was basically an after-thought. And now it’s just one of those million things that I haven’t the mental capacity to do anymore.

But I think I’ve got it hacked together enough to where it works—at least on phones. I’m pretty sure I accomplished this in what would be considered a non-preferred way by increasing font sizes instead of clamping page widths, but this kept me from needing to fix an untold number of content elements inside posts/pages.

I’ve been wanting to fix this for ages, but it really struck me recently how so many people are browsing on their phones now. Of course, what I really want to do is rebuild this site from scratch with a responsive design. But then, I’ve spent most of the last two weeks stuck on the couch. So, that’s where things are at now. 🙃

Anyways, if there’s any glaring errors, let me know in the comments. I will do my best to fix them.

Posted in Website | Tagged | Leave a comment

We have explosive.

(i.e. Lightboxes)

I’ve been really into web development lately, especially anything requiring a lot of JavaScript control of the DOM and CSS control over layout and style. I’ve spent a solid week (at least) working on adding lightboxes to replace some of my lighter scripts: image viewing and downloads. I’ve been pretty fascinated by lightboxes ever since I saw them on addons.mozilla.org. The idea to actually employ one on this site didn’t come to me until I was doing the remake of the content system and thought it would be awesome to combine a lightbox with the ability to preview the contents of archives (rar and zip files).

Although there are tens if not hundreds of lightbox implementations, I felt like creating my own to avoid all the code bloat and because I’m that much of a control freak. The first hurdle was figuring out how the hell these other lightboxes could be triggered on the click of a link without navigating to the link URL immediately after the script finishes. Googling didn’t turn up any leads, but I eventually found out the answer by just reading the code comments of another lightbox. It’s simple and makes sense but isn’t obvious: the onclick function must return false. It kinda works like a message chain in Windows.

From there, I just kept chugging out JavaScript. On DOM readiness, the script adds onclick events to trigger the lightbox to any existing links to image or download pages. On click, the script does the appropriate HTTP request (AJAX) for the content to fill the lightbox. On request received, it puts the HTML into a lightbox container that automatically enlarges to fit content. Meanwhile, the script is fading in the obligatory black overlay; I chose to fade it in not only because it looks awesome but it also helps your eyes to adjust to change in light. It’s all a delicate ballet of scripting, but surprisingly IE performs quite well with it and only minimal hassles (e.g. filter: alpha(opacity=#); instead of opacity: #.#; for overlay opacity in CSS).

It didn’t stop with lightboxes, though. I’ve also been wanting for a while to have a display of the most recent uploaded images on the front page but was underwhelmed by the prospect of cramming only a few images on there. Then I got to thinking about how I might make a scrolling marquee for the images and realized it wasn’t too hard to code. You simply need an inner container for the images with position: relative and an outer container with overflow-x: hidden and on button script events move the inner container’s style.left property by negative the amount to scroll. Then, obviously, you have to do some code to detect the beginning and end of the marquee to keep it within bounds among other things. Quite snazzy.

I also made another slight change to front page (beyond adding the latest blogs). I was a little displeased by my method of finding the most popular content given that it merely sorts the database by the total downloads. Thus, it’s not at all responsive to changing trends. For example, if file A gets 1000 downloads over five years but not much recently, and file B has only 300 downloads over a couple months but gets several hits a day, then file B is obviously more popular than file A. The best solution to calculate what’s more popular would be to log all the hits for a day for every file and calculate popularity trends often, but that’s a logistical nightmare and too much hassle for this small site. However, I came up with a simple solution that requires only one new field in the database (last_dl_count) and a monthly cron job to do UPDATE `content` SET `last_dl_count`=`dl_count`;. Finally, I switched the front page popular query to the following:

SELECT `id`, `title`, `sshots`, `dl_count`, (`dl_count`-`last_dl_count`) as `delta_count` FROM `content` WHERE `type` = '$type' ORDER BY `delta_count` DESC, `dl_count` DESC LIMIT 2;

It works fairly well, except at the beginning of the next period after the update cron runs. Since all the deltas are 0, you get only the all-time popular again until someone downloads something.

Well, I think that’s enough web developer theory for now. However, I’d like to point out three academic columns I recently added. There’s one from Fortran Programming class with all my source code and most of my documentation. The second is on the Parallel Programming with PVM project I did last year, including a Flash slideshow (first mentioned here), presentation notes, and source code. The last is a paper I wrote on the Aspects of Overpopulation, a subject that greatly concerns me; too bad the class it was for was completely worthless.

Posted in Academics, Programming, Website | Tagged , , , | Leave a comment