About Normal

Normal Technologies is a small technology design, engineering and consulting company that believes in doing cool stuff in cool new ways with cool technologies. We embrace our name as a reminder to follow the normal vector in a new direction and to always keep innovating. Headquartered in Tucson, AZ, Normal is currently a one man shop comprising over 20 years of experience of software engineering and design.

Normal is devoted to the development of full-stack solutions using the best technologies, whether it be for the web, desktop, mobile or some combination thereof. Please see our projects.

normal (adj): perpendicular; especially: perpendicular to a tangent at a point of tangency

Normal Technologies

This website! Now more normal.

Lotechnica

Personal blog of Nathan Shafer

Website

Type-in Games

Website designed for Normal's game division, Type-in Games.

Website

AnswerCast

Android and iOS apps with corresponding Google Cast receiver application.

Website

Contact Us

We'll act normal, we promise

Address

Normal Technologies LLC
PO Box 30083
Flagstaff, AZ 86003

Phone

(928) 793-2314

Email

[email protected]

AnswerCast Project

The goal of this project was to produce an app for both Android and iOS that uses a Google Cast device, such as a Chromecast or Nexus Player, to facilitate the playing of question and answer board games. Originally developed as a prototype using SMS, this version was created so that anyone can use it.

Both apps were written using native SDKs: Java for Android, ObjectiveC/Swift for iOS. The Receiver for the Google Cast device was written using HTML5/CSS/Javascript. Extra work was done to optimize things for the relatively resource restricted first generation of Chromecast devices.

Technologies used:

Type-in Games Website

Once AnswerCast was done, I needed a home for the company brand I was releasing it under, Type-in Games. This is a company name I came up with a long time ago when I was working on my mobile game, project Isopod. It means a lot to me as it was those old games that my father and I typed in to our Commodore64 that really gave me the spark to pursue programming further.

Just before developing this website, I had been learning Blender in my off-time in preperation for creating this website. However, it soon dawned on me that blender would be perfect to get the magazine background exactly how I wanted it to be. It's a simple model with a copy of an old Compute's Gazette UV mapped as a texture on to it. Some simple lights and further texture blending (using Cycles), and we have a photo-realistic result.

One challenge I came across was getting the background colors behind the text to have proper padding in all browsers. "box-decoration-break: clone" is still a work in progress on modern browsers, so I had to abuse "box-shadow" to fill it in on older browsers.

Technologies used:

Lotechnica Blog

A complete redesign and reimplentation of Nathan Shafer's personal blog. First we migrated it from Blogger to a static site generator, Pelican. Then the templates were designed from the ground up using Bourbon, Bourbon Neat and Bitters. The top priority was keeping the design clean and readable. Second was increasing the maintainability so that there was less of a barrier to publishing new articles. Built-in support for code snippets with syntax highlighting and styled math markup was very important, as was keeping page size down to an absolute minimum for fast loading on mobile devices.

Technologies used:

Normal Technologies Website

I set out to do something that was completely different than I've done before, to really think about what it means to move in a normal direction. First, I wanted a horizontal layout, eschewing the typical vertical page, but still maintain responsiveness and adaptability to any screen size. So I picked Bourbon Neat again for its flexibility. After experimenting with pure CSS parallax effects with forced perspective and scaling, I decided that I needed more control, and thus switched to controlling all of the animations with Javascript. However, to leverage the speed and efficiency of the user's GPU to maintain smoothness and high frame rates, I made sure to still use CSS transforms, merely using JS as a way to toggle the CSS states. The end result is complete control over how the layers are built up, and with some custom math, the background is guaranteed to never underflow so that the user never sees around it.

For the background, I knew I wanted to convey in a visually interesting way exactly what a normal is, at least in a geometrical aspect. So I fired up Blender and started playing around with all kinds of objects, materials, layouts, etc. Then I hit upon the idea of animating it to create even more distinction of what a normal is. With the end result, users can see exactly how a normal relates to the surface it's a normal of. Some creative post-processing adds the glow effect. The final movie is 1200 frames, each at 3000x1200 pixels, which took around 4 days to render the final versions of.

Efficiency wise, I wanted to make sure it was still a good experience on mobile, and thus I still optimized everything down to the essential elements. The main page load on mobile is optimized to only 400KB. The desktop load is significantly larger than that due to the background animation video, but the browser streams that load in the background so that the page still loads and renders very fast. Using Brunch, round trips are kept to a minimum as all CSS and JS is optimized and minified down to 2 files. This was also a great experience fully jumping in to ES2015 using Babel as a transpiler to ES5 Javascript.

Overall this was a really fun project, as I really got to stretch out into modern web practices, saying goodbye to old browsers and fully embracing the new standards, such as ES2015 Javascript, Flexbox, CSS Transforms, HTML5 video, and even some new ones, such as "backdrop-filter" that don't even work in any browsers yet. The site will be ready... =)

Technologies used: