Skip to main content
Category

John Wenzler

What is Responsive Design?

By Coding, CSS, Javascript, John Wenzler, Mobile First Design, Responsive Design, Styling, Web DesignNo Comments

This post is about responsive design principles, some current frameworks for building responsive websites,  and the concept of mobile-first. With our clients we have learned that responsive design is not a feature, it is a necessity. So what is it anyways? Responsive Design Let the website RESPOND to varying browser sizing The goal of responsive web design is to provide a great viewing and interaction experience regardless of the platform the user is viewing your site from. It also means providing the same content and options to users of all platforms. This means that the old-school “mobile version” of web sites doesn’t fit the responsive design guidelines. The most popular modern frameworks for responsive web design are: Twitter Bootstrap: Docs Foundation Framework: Docs I won’t get into specifics on the differences between the two, instead I will focus on what they both do well. The Grid A grid is a way of dividing up the page into columns.  These columns can then float and stack based on the size of the screen.  Both Bootstrap and Foundation utilize a grid based on 12 divisions. With some simple math this means: columns = 12/width 1 column (full width) = 12 2 columns = 6…

Read More

Remove Green Screen with Photoshop in 3 Easy Steps

By Image Editing, John Wenzler, PhotoshopNo Comments

So this one should be short and sweet.  You’ve got a photo with a green screen background and you want to remove the green, place in some new background, and pass it off as a nice clean piece of work.  It’s not hard to do and you can do it yourself. Without further ado, let’s get started…   Step 1 Open your image and add in the background We picked this nice shot of some glasses in front of a green screen… … and we are going to place them on this crazy dog that had a little too much fun! Notice I placed the dog layer below the layer with the green screen.  This makes sense since the glasses will sit on top of the dog’s face.  If this were a headshot and you were putting it on some other background, the headshot would be the glasses and the background would go where the dog is. Step 2 Select the green color range This is where the magic happens, click Select -> Color Range. First you will need to click on the green area of the screen, this will choose that color range to be selected.  Then go ahead…

Read More

Comet: A jQuery and PHP Implementation

By Comet, Javascript, John Wenzler, jQuery, PHP, Web Design

If you’ve ever needed real-time data on the front-end of your website and you were using PHP as your back-end, you are most likely familiar with using a polling technique to fetch data.  What you may not know, however, is that another method exists for pulling data that does not require a large number of unnecessary requests.  Enter Comet…   Sounds great right? Just wait for the data to come to you! The problem? Currently, no built in Comet functionality exists for PHP and Javascript.  I’ll share with you my code for implementing a Comet controller. In this article I’ll provide the functions you need to get this working today on your project.  You will have to make some modifications to fit the framework and structure of your site, but if you need help, just leave a comment and I’ll do my best to get back to you! The PHP How to make a long held http request Before we delve into code, I’ll give you a short summary of how we are going to accomplish our goals.  We will utilize a file on our system to keep track of if there are any changes we need to “push” to the…

Read More

Top 5: jQuery Functions You May Not Have Known

By Coding, Javascript, John Wenzler, jQuery, Web Design
Welcome to my first of a series of website coding language related top five lists. I'm going to start us off with some functions from jQuery that you may or may not know. There is no particular order to this list, just a set of what I consider interesting and potentially useful functions in jQuery.  Let's get started! trim() What it does Trim is a super simple function that removes any leading or trailing whitespace from a string How to use it var myString = " Trim is great "; var trimmedString = myString.trim(); //myString is now "Trim is great" » Read More: jQuery docs In Action Enter string here Trimmed version generated here: "" fadeToggle() What it does Toggles the visibility of an element with a fading effect. The function also accepts parameters for duration of the fading effect, the easing function to be used furing fading, as well as a callback function for when the effect is complete. You may want to use this function because it takes care of issues with trying to fade in or out while the opposite effect is still not complete. How to use it var element = $("#someElement"); var button = $("#fadeToggleButton"); button.click(function(){...
Read More