I moved to a new URL! Check it out!

May Status Report

May Status Report
May was a pretty good month! I managed to complete my new website layout (almost.) I'm still missing some art work that I want to do for the empty right side, but overall I'm happy have a new design rolling that replaces the one I made in 2011. It doesn't really feel like it was that long ago, but I guess time flies when you get older. Whoops.

I'm still spending a fair chunk of my time working on a project with a few really cool people. Hopefully very soon I'll be able to share what it is and maybe even talk about it a little bit on my blog or in other places.

That being said I haven't really had a lot of time for personal projects. I'm still trying to spend as much time as I can drawing, and some of the free moments I have I spend working on my Pathfinder Character Sheet manager. I just recently added the ability to translate it to any language, and someone has already translated it to German. More on that later!

Sorry that it has been eerily quiet around here. Working on a secret thing is kind of new to me and I'm totally not used to not being able to openly share what I'm working on. I haven't streamed in over 6 months because I'm just not sure what I would stream. I am starting to feel a little bit of that itch though to get back to coding something games related. Maybe Otter FNA can be revived soon... but I got stuck in a lot of different problems trying to put it together. Starting to realize that I'm probably not smart enough to be making my own engine/api and I should probably start putting time into learning something else. But I love C# way too much, and there are no other solutions out there for 2d games and C#. Technically yes Unity does 2d and uses C# but Unity just feels like over kill and is painfully slow for me to develop in. Augh!

Anyway that's all I'll say for now. I feel like I could expand on a couple of these thoughts later as full posts, but some of these things I've already talked about at length many, many times.

Oh I'm still pretty anxious and stuff but at least I'm having fun on this small team project which I can't wait to show off at some point. Yeah!
dev log webdev
Posted May 31st 2017 9:39 PM (General)
2 Comments

Border Image Magic

Border Image Magic
Here's another hot web tip! Did you know about border-image?! It's what I've been searching for in my web design projects since I was 14 years old.

So lets talk about the world of designing image intense websites before I discovered the magic of border-image. In order to have a div element have some sort of image border I had to take an image and slice it up a bunch of different ways depending on how dynamic the div was going to be. If it was a div that would only ever stretch vertically then I could get away with 3 images: one for the top, another for the bottom, and the last for the repeating vertical portion. If the div was going to be stretched both vertically and horizontally then the number of images increases to a whopping 9! Each corner, each side, and the center. Sometimes this is known as a nine slice in certain user interface contexts.

Image


Way back in the day when it was only possible to have one background element inside of a div I had to do things like have multiple layers of divs in order to display each background image. Three slices of an image meant three divs to display it properly. Nine slices meant nine divs! As you can imagine this makes the html look bloated and messy.
Read More
webdev design programming
Posted May 30th 2017 9:23 PM (General)
No Comments

Doodle Post

Image
doodles
Posted May 29th 2017 3:41 PM (Doodle)
No Comments

Google Font Stuff

Google Font Stuff
I knew when making this blog design I wanted to go with some kind of hand drawn sort of look, so I wanted to have a look for fonts that would match. Way back in the day getting a font to render that wasn't on the end user's computer was a gigantic pain if not nearly impossible.

Up until pretty recently the main solution I went to for custom fonts were some pretty complex solutions involving making a canvas and rendering the font to it like an image but somehow also using some weird magic to make the text selectable as if it were normal text... but those days are gone! Now modern browsers with css can load almost any font imaginable.

For this site design I was luckily able to find a couple of things that I liked on Google Fonts, which has grown in size enormously since I last checked in on it. There's now an entire section for hand written looking stuff, and since Google hosts all of the data for using a font it's an incredibly simple addition to your html and css files to get it up and running.

Image


Beyond that if what you're looking for isn't available on Google then you can turn to the services of Font Squirrel. Font Squirrel does not offer hosting of the font data files like Google does, but it does have a huge selection of fonts already ready to rock. On top of that Font Squirrel allows you to upload fonts to convert into web friendly versions. The only gotcha with this however is that you need to be sure your font is licensed in a way that allows you to do this. The big advantage with the fonts already available on Font Squirrel and Google is that they've already been cleared in this way.

Image


Getting custom fonts up and running in web browsers is easier than ever, but this is a great power that requires great responsibility... or whatever, who cares, go all out. Just think of how many options we have beyond Comic Sans now!
webdev design
Posted May 29th 2017 3:40 PM (General)
No Comments

Doodle Post

Image
doodles
Posted May 28th 2017 4:01 PM (Doodle)
No Comments

Super Fast Lightbox

Super Fast Lightbox
One of the things I always make sure to include on any of my site designs is a cool way to view larger versions of images, and that usually involves using some sort of "lightbox." Nobody wants to click on an image and have it totally replace the page that they were browsing, or have it open in a new tab, right? Or maybe that's just me.

A lightbox is a cool way to have a full image display on a page without navigating to a new page, and without popping open a new window or a new tab in the process. Many many years ago light boxes were giant monstrosities of javascript and css that seemed to barely ever work when I tried to use them on my sites, but these days thanks to advancements in both js and css they've become a lot more simple to implement.

For my new blog design I went with a super simple lightweight bare bones light box called Lity. Lity boils down to a single css file, and a single javascript file, and was incredibly easy to toss into my design. There aren't any themes, or images, or crazy styles to worry about like so many of the other lightbox solutions I've tried in the past. Once the files are properly included in the html, all you have to do is add a data-lity attribute to a link element (the "a" tag) and Lity takes care of the rest.

Image


I guess that's all there is to this post! Lity is a simple and fast solution to lightboxes, and seems to work well on mobile too which is pretty dang important these days. If you have any other suggestions on lightbox stuff let me know
webdev programming design
Posted May 28th 2017 4:01 PM (General)
No Comments
« newer posts
older posts »