Digital Dreams

Responsive Design – Algorithm to Center An Element using JQuery

Positioning an object on a web page is simple to do in CSS, but doing it responsively is trickier. Given the number of devices and potential viewport sizes a user could be using it’s nearly impossible to anticipate how your design will look in all possible scenarios. Basically you just have to try to account for the most likely variables and hope it works out.

I came up with a simple algorithm to dynamically center an object on the viewport. In my case I am using jQuery as the scripting language of choice, but the basic algorithm should work regardless of the scripting language you choose.

Continue reading

Paint and Brush

WordPress 101: Part 4 – Customizing with Themes, Plugins, and Widgets

One of the wonderful things about WordPress is its extensibility and customization options. You can customize nearly every facet of WordPress to suit your needs. Customization is particularly simple with the use of  Themes, Plugins, and Widgets. Today’s tutorial is going to discuss what those things are and how they make your site function to your needs.

Continue reading

Emulating Mobile Devices with Chrome Developer Tools

It is no secret I am a huge fan of Google Chrome. I installed it some time ago with intending to use it for testing only, but it has since become my default browser because of the robust and invaluable developer tools built right into the browser.

Today I learned that Chrome has a great feature in the developer tools that allows you to emulate a mobile device.  From the Developer Tools Dialog, select “Show Console” show console , then click “emulation”. From there you can select the device you want to emulate. What impressed me most was the wide variety of devices Chrome can emulate ranging from the Kindle Fire, to a variety of iOS devices, to a plethora of Android devices.

Emulation Panel
Emulation panel in Chrome Developer Tools

While the emulation won’t run full applications, it is still a valuable tool when designing responsively or optimizing a mobile interface.

Pretty cool, huh?

 

Announcing my Newest Project: SimpleCMS

I recently began working on a new project that has me pretty excited. I’m calling it “SimpleCMS” because it is basically a stripped down Content Management System. I’m very much aware that there are many such systems available, but this is mostly a learning platform. As such I’ll be posting updates on its progress and eventually plan to release the source code under the GNU Public License (GPL).

SimpleCMS will basically query a database and dynamically publish the contents. It will consist of three basic parts… The public face, the admin face, and the back-end. I’m still working out the details, but I’ll post more about it once I flesh them out.

Type Setting

WordPress 101: Part 3 – Configuring WordPress

Type Setting
Courtesy Joana Croft via www.sxc.hu

It’s been awhile coming, but welcome to part three of my WordPress 101 series of tutorials. In the first two parts we talked about what WordPress is, its place in the world of Content Management Systems (CMS), how to install it, and had a brief overview of the administration panel also known as the Dashboard. In today’s installment we’re going to dig into the base configuration within the Settings Panel to get you up and running in no time!

Continue reading

Little Ones Christian Preschool is Live!

I just wanted to post a quick note to say the website for the new preschool is now live. I’m actually rather pleased with how it turned out. There’s still some information that needs fleshing out which I would normally like to have had done before going live, but the client felt it was more important to get up and running.

Check it out… http://www.littleoneschristianpreschool.org

On Change, New Beginnings, and Endings

I’ll be honest. I haven’t been nearly as active on this blog as I’d hoped I would be. I still haven’t finished the WP Tutorial I’ve been working on and the projects just seem to keep piling up. I’ve decided to take a step back and re-evaluate what I’m doing and what this site is all about. To that end I decided to shift the focus of this site away from WordPress and Web Design and make it more of a central hub for all of my projects. This will result in a kind of redesign for the site along with some new information and a much less formal tone. I want people to come here and see what I’m doing from a professional perspective.

With that in mind, here is a short list of the things I’m working on:

  • Designing a new website for my wife’s new venture. She and my mother-in-law are opening a new preschool in Wilsonville, Oregon and have asked me to set them up with a web site. The URL is live (http://www.littleoneschristianpreschool.org) but the site is not.  I’ve only just begun work on it so it might be a little while before the full site is up.
  • On a related note, I just finished creating a logo for the new preschool. I’ll post a copy here in my portfolio soon.
  • I’m working out the details for a new store that will sell games and game accessories. It will focus on board, tabletop RPG, and Trading Card games. More details later.
  • I’m debating expanding my client base for my freelance computer support business or eliminating it altogether. I only have one client, but with a day job it’s hard to offer the kind of service I would like to. The debate is mostly if I want to get out of Desktop Support or embrace it and take it to the next level.
  • I’m letting inhishandspreschool.org go. It’s looking like the preschool will be closing and the committee decided not to renew the domain. It’s a little sad because the preschool has been a part of my life for so long, but it’s time to let go and so we shall.

That’s all I have for now. As I flesh out this new site I’m sure there will be more to come. It seems there are always new projects. I’m not worried about running out of things to say; I’m more worried about running out of time to say them.

Keep it Simple

I’ve tried to find good ways to test my work in a variety of browsers, especially older versions of Internet Explorer (IE). There are a lot of great solutions available for this kind of testing but I have limited funds and many solutions need a paid subscription or are free but only for a limited trial.

Imagine my delight when I ran into modern.ie, hosted by Microsoft. It offers information on how to test for browser compatibility, but the most valuable thing it provides is a bunch of virtual machines you can download (for free) to run with versions of Internet Explorer from 6 up to 11. They even have a VM for IE 11 on Windows 8.1!

Needless to say I was in geeky heaven and promptly downloaded the various VM’s for testing on, but my excitement was short-lived. I was able to open Internet Explorer in the VM and connect to my development machine, but when I navigated to the WordPress theme I was working on I got the HTML with no styling applied . I fired up the built-in developer tools in IE and determined the problem was that WordPress was passing “localhost” as the server name for the file paths. Obviously this would not do since “localhost” just loops back to the current machine.

My brain started going ten million miles an hour trying to decide how best to implement a local DNS server to point everything to the right place. I started questioning where to host it… do I want to use my regular workstation and take up valuable CPU Cycles and memory to run it, or try to come up with a secondary dedicated server? If so I would need to have the hardware available and the time to configure everything. Then it dawned on me I didn’t have to make everything so complicated. The problem wasn’t DNS, it was the way I had configured WordPress in my development environment. In the settings tab of the WordPress dashboard there are two fields for the WordPress URL and the site URL. Turns out I had both URL’s pointing to “localhost”, so I just switched them to point to the local address of the development box. Once I did that everything worked perfectly.

The lesson here is this, when faced with a challenge it is tempting to leap to a complex solution but often if we take a step back we find the solution is much simpler than we thought. Remember to keep it simple, you’ll save yourself a lot of stress in the long run.

Design, Develop, Inspire!