No rest for the wicked

May 25th, 2014

Dear Dethstrobe.com,

Ah, my old personal website. How you look so interesting yet so functionally bad. Sadly, I don’t have the time to update you my wonderful test ground for JS and CSS. No, I got myself a fancy job at a mega corporation. So its not like I need this website for much of anything right now. I haven’t had the time to work on my personal projects as much, and I’ve signed NDA’s so I can’t comment on my professional work anymore…which is annoying…but I have been learning. Oh yes…so much learning.

So incase you are a prospective web developing student or … masochist or something. And you came here to learn some of the new cutting edge web technologies…well, this is a very poor website for that. But, lets pretend that my website is somehow culturally relevant and people like to read about what I’ve been learning. Then some technologies I’d highly recommend looking into are:

Node.js - Node.js id backend development for frontenders. Its a server that uses javascript! Hey, I know that language. And so as a frontend engineer, you know what’s really annoying, backend development. Ruby, Python, etc, all that shit is crazy. I don’t have time to learn new languages. I barely have enough time to pretend like I actually know javascript. But hey. Look at that, now I can continue to learn Javascript and do back end development at the same time. And that’s pretty awesome.

AngularJS – Want to make your own web application? Of course not, because that shit is hard. Well, it just so happens that Google has made it slightly easier. AngularJS is god damn amazing. It actually makes making web applications easy. But to be fair, its still really complicated. Like REALLY complicated. Anyone that tells you how easy Angular is to learn is only saying that because everything else is a million times worse. AngularJs makes it almost tolerable.

Salesforce.com – This is actually the least cool of all the stuff I’ve had to learn. Salesforce isn’t terrible. But its not as super awesome as I’d like it to be. But everyone is talking about how great Salesforce is, so I was kind of pushed in to learning it. I am very VERY far from an expert in it, but it is well documented. So its not that bad to work with. But it does not allow for as much flexibility as I’d like. Its also a bit slow.

so anyway, even though I haven’t been updating. I’m still moderately alive and well and doing stuff. So…yeah…

Lets talk Cyberpunk

October 24th, 2013

I want to redesign my site. When I made this site, it was mostly a concept of attempting to learn jQuery, so I didn’t have any grand or consistent vision of what I wanted for this site. But after feeling awfully embarrassed by my last job interview, I might as well take the time to redesign this site. Also, it’ll give me a chance to document the process. But I’m also in the middle of job hunting, and making a character generator for SR5. So this might be a bit of a slow process… But that’ll give me time to think at the least.

Mood board

Lets talk mood boards. What does cyberpunk look and feel like? Well, luckily there is no shortage of imagery for me to steal ideas from. So here are a few images, that I think capture the cyberpunk interface aesthetic.

So a few notable style choices, black backgrounds are VERY popular. Green and cyan are popular colors as well. Round interfaces. Clearly digital san serif fonts. A lot of small text that clutters interfaces to make it appear highly technical. Grids and more grids with circle grids. Square cross hairs. Lots of blinking. Lots of pointless yet technical rotating animation. Circles with offset inner circles. Wires EVERYWHERE! Circuit board styled lines. And caution labels. Corners that are cut off. Rounded corners.

Restyling the DethLogo

I’m still debating if I should just get rid of my Dethstrobe moniker. Its not exactly the most mature thing around, and I assume being a “professional” means you can’t be immature and enjoy fun anymore. But screw it, if I’m making my site in the theme of cyberpunk, clearly I’m immature anyway. Also, I prescribe to the rule of cool. So I’d like to think if my site is awesome enough, that an employer will look past my blatant immaturity. But who knows, I could be shooting myself in the foot.

20131023

So here we have a few experiments at trying to find a new logo. I think I’ll come back to this idea tomorrow and see what else I can produce after a bit of rest. But a very interesting start.

Effect Tech Service & Operations

October 18th, 2013


The Effect Tech websites were an interesting experience. I basically just needed to design one site and then copy the css over to the other site while changing a few values to match the theme. Both sites are responsive, and originally had a flash slider on their home pages. This was later changed to what is currently being used since it interacts better with mobile devices.

ThermoFlexX & Xeikon

October 18th, 2013

ThermoFlexX

Thermoflexx.com is a subsite of Xeikon for their label printers.

I implemented a tab system. This system would allow users to view additional content on the printers on each printer’s page. It was ultimately decided that this was unnecessary, so even though its still on the site, it does nothing since all the content for each printer is shown at once.

I have also worked on Xeikon.com, as well.

Cook Street

October 18th, 2013

The image is the landing page for a Cook Street advertising campaign.

I also did work on updating cookstreet.com as well.

This was actually one of the very first websites I professionally worked on for spidertrainers.com

idellawines.com

October 18th, 2013

idealwines.com

This was a pretty simple website update.

One of the more interesting challenges was styling the text on the slider. Normally it’d appear on a black bar that runs under the slide. But using a bit of CSS magic, I was able to place it on the lower right side of the window.

On an unseen note, the original designed had the headers breaking from the normal document flow. This was a problem because the container that housed the headers had a overflow hidden property, which made this impossible to be seen. I was able to make it work after a while, but in the final design, it was decided to just go back to the way it is now, which sadly defeated the purpose of most of my previous work. But still, a very good learning experience on the ins and outs of overflow.

All work was done under contract of Spidertrainers.com

The Poor Man’s Loading Screen

September 9th, 2013

dethloader

There, now I have a loading screen for users that have javascript enabled…which I’d like to think is everyone, but realistically speaking, it’s probably not everyone.

So how did I MacGyver this loading screen you may wonder? Well, first I made a div I gave the id of “jqloader.” Then I went in to my css and made it fill up the whole screen. If you want to steal my css it looks like this.

position: fixed;
display: block;
height: 100%;
width: 100%;
left: 0;
top: 0;
background: url(media/images/dethloader.gif) no-repeat center center fixed #9dd; /* Old browsers */
background: url(media/images/dethloader.gif) no-repeat center center fixed, -webkit-linear-gradient(top, rgba(245,255,255,1) 0%,rgba(153,221,221,1) 100%; /* Chrome10+,Safari5.1+ */
background: url(media/images/dethloader.gif) no-repeat center center fixed, linear-gradient(to bottom, rgba(245,255,255,1) 0%,rgba(153,221,221,1) 100%; /* W3C */

Its a pretty basic style for a full screen div. Now the real trick was to make it only appear when a person uses Javascript and disappear once the page is fully loaded. This was actually really easy, I say that but it took me a few hours to figure it out… Anyway to cut to the chase, I have a small bit of script in the head of the html which adds the class of js to the html.

$('html').addClass('js');

Nothing too exciting. But what this allows me to do is detect with css if a user have javascript running. So that style for my jqloader now has the caveat that it’s looking for .js #jqloader. This means that it will only add all that styling if there is something with the class of js before the id of jqloader is found. So, now that we have the loader working and detecting if javascript is enabled, we need to make it magically disappear once the page is done loading. Luckily with jQuery this isn’t that hard either.

If you create a self invoking function with jQuery, it will execute that code after the DOM is loaded.

$(function() {
$('#jqloader').addClass('jqdoneloading');
});

So now after the DOM is loaded I add a new class to the jqloader div. So I just have the css target this new div with “.js #jqloader.jqdoneloading”. It needs to have all 3 of those because specific trumps general when it comes to targeting with css. If it was just “.js .jqdoneloading” that wouldn’t be specific enough to over right the “.js #jqloader” because id’s have a higher priority. And then I just simply style it with display: none; to hide the div.

Easy effective, and it makes it look like I know what I’m doing.