Blog

SCSS and Compass

Posted in: Websites by koolkat on April 11, 2012 | No Comments

I finally installed the Compass app to help me this my CSS generation. At first I was a bit resistant to the whole SCSS idea thinking I would have to learn something new which would just slow me down. But using SCSS and compass is really easy!

I took the plunge when faced with a project that used different colors for fonts and  backgrounds depending on what pages was displayed. It also has a variety of font stacks (font families). What would be more than using mixins  in this situation to easily set the correct styles? I also really appreciate the fact that I can nest selectors so I don’t have the keep repeating myself, making creating the stylesheet actually faster!

I had to do a bit of setup to get this all working smoothly as use Dreamweaver (code mode only) as my editor and wanted it to handle SCSS like it does CSS. I followed this advice which worked perfectly . And, since I am using the Compass app, and was creating WordPress custom theme, I did not want to keep copying the generating style sheet to the usual WordPress directory. The following code allows my WordPress site to use a different stylesheet path:

add_filter('stylesheet_uri','schwartzbros_stylesheet_uri',10,2);

function schwartzbros_stylesheet_uri($stylesheet_uri, $stylesheet_dir_uri){

return $stylesheet_dir_uri.'/restaurant-sass/stylesheets/style.css';
}

Want to learn more about SCSS and Compass? Check out the Compass documentation.

My CSS is out of control!

Posted in: Ecommerce, Websites, WordPress by koolkat on March 1, 2012 | No Comments

I have been working on an e-commerce site using the SHOPP plugin. Along with that, I am using jQuery UI to create tabs. Shopp and jQuery UI come with CSS files. And the layout from the site designer is fairly complex. Even the pages with tabs may have different fonts and different numbers of tabs. The result of all this is a lot of CSS with too much specificity and lacking in efficiency. What to do?

Well, for one, I am trying out SASS. I am hoping this will allow me to better organize my files, get rid of redundancies and improve the overall efficiency. Since this is my first foray into SASS, I will need to re-assess once the project is complete.

Responsive Web Design

Posted in: Websites by koolkat on February 13, 2012 | No Comments

As all of us in the web development community know, responsive web design seems to be the hot, new approach to handling multiple device types and screen sizes.  While this may work really well for news sites, it often seems that the design is never quite right when applied to other types of websites. With this in mind, I was very pleased to listen to Kristofer Layon on http://5by5.tv/bigwebshow/62.  He made the case, that most sites display well on tablets but that it is really the small screens, such as on phones that require a different design and sizing approach.  I have often thought the same thing.

Habitat Seattle

Posted in: Websites by koolkat on | No Comments

Just finished coding a custom WordPress site for Habitat for Humanity of Seattle/South King County. I did this work as part of the team at Blue Sky Projects.

Patricia Rovzar Gallery

Posted in: Websites, WordPress by koolkat on January 31, 2012 | No Comments

Patricia Rovzar Gallery launched its new WordPress based website at http://www.rovzargallery.com/.

The site was designed by Horsepower.net with Kool Kat Web Designs as the developer. The website uses the following features to enhance the site:

1. A custom post type to display each artists

2. Custom attachment fields to handle items specific to an art gallery such as price, media type and actual item size.

3. A jQuery carousel from http://caroufredsel.frebsite.nl/. This carousel was chosen as it supports variable width items.

Stretch Physical Therapy

Posted in: Websites by koolkat on December 5, 2011 | No Comments

Just finished coding another great design from Horsepower.net at http://stretchpt.com/

JQuery animations

Posted in: Websites by koolkat on November 13, 2011 | No Comments

I have recently been working one project using several jQuery animations. While I had already mastered using callback functions to make sure the animation completed and using stop to prevent that nasty continuous animation effect, I negelected to consider what happens when more than one user interaction triggers the animation. The result was an animation mess! The solution, of course, is to check if the item is already being animated and use a time out interval to make sure all animations are complete.

Here is an example from some jQuery code:

this.bind('mouseenter', function() {
var wait = setInterval(function() {
if( inAnimation == false)  {
clearInterval(wait);
var infolink = Galleria.get(0).$("info-link,image-nav-left,image-nav-right,playpause");
var navpause = Galleria.get(0).$("image-nav-left,image-nav-right,playpause");
var orangebars = Galleria.get(0).$("stageleft, stageright");
if (options.showInfo === true) {
if (!Galleria.get(0).$("info-text").is(":visible") )
{
Galleria.get(0).$('playpause').show();
orangebars.stop(true, true).animate({"width": "toggle"}, 500, 'swing', function() {
stageidle.css({'width':'', 'overflow': ''});
stageleftidle.css({'width':'', 'overflow': ''});
infolink.show();
});
}
else {
stageidle.stop(true,true).animate({"width": "toggle"}, 500, 'swing', function() {
navpause.show();
stageidle.css({'width':'', 'overflow': ''});
});

stageidle.show();
navpause.show();
}
}}, 200);
});

5 Critical Aspects of a Web Page

Posted in: Websites by guest on October 31, 2011 | No Comments

Creating a webpage can be both demanding and rewarding. No matter what the topic or motive of the web page, there are some criteria that apply to all websites in order to get the traffic and unique visitors necessary for success. The first critical aspect of having a webpage, is to have a reliable host. Australian web hosting is often the most dependable web hosting. It is important to have a web host with the lowest downtime possible. Once the web host is set up, the next important thing to do is brainstorm ideas to make the webpage unique. 

Successful web development demands that the site be unique and distinguishable from others. A svelte appearance will carry you a long way, such as having a color scheme that is easy on the eyes, or using the space on the webpage wisely. Making sure the webpage is organized for optimal comprehension and user success is another critical facet. If somebody was to visit a website and see that it is jumbled and unorganized, they are not very likely to visit the site a second time. Having a user friendly interface is extremely important in getting repeat visitors to a website.

Feedback from the community also ranks highly on this list. Having a forum or message board is a great way for the visitors to voice their concerns and to give suggestions. They can give feedback on what they like and don't like about the web page. A web site should be much more than just a showcase of whatever service you are offering. It should be a well organized space that visitors can easily navigate, interact with, and respond to.

WordPress and Soap Authentication

Posted in: Websites, WordPress by koolkat on August 16, 2011 | No Comments

I have been working on a project that requires the use of Soap Authentication in order to use a web service. While I understood how to create a SOAP call in php, I did not know how to get around the standard WordPress authentication process. Fortunately, I found a SOAP Authentication plugin that I could adapt to my needs. The plugin helped me understand what actions and filters were required to achieve the desired results. Since the site has specific requirements that the end-user cannot change, I did not need any of the user interface provided by the plugin. As a result, I stripped all of that away and just made the code I needed part of my theme. I  also needed to allow the end-user to login with an email instead of a user name and to store a token for further use when making additional SOAP calls to retrieve data from the Web Service. The token gets stored in the user meta data. The main part of code that handles the SOAP authentication process is presented below. You will have to provide your own valid WSDL file; the one in the example does not exist.

remove_filter( 'authenticate', 'wp_authenticate_username_password', 20, 3 );
//add_filter( 'authenticate', array('Soap_Auth', 'rotary_email_login_authenticate'), 20, 3 );
add_action('wp_authenticate', array('Soap_Auth', 'soap_auth_check_login'), 1, 2);
add_action('lost_password', array('Soap_Auth', 'disable_function'));
add_action('user_register', array('Soap_Auth', 'disable_function'));
add_action('wordp', array('Soap_Auth', 'disable_function_register'));
add_action('retrieve_password', array('Soap_Auth', 'disable_function'));
add_action('password_reset', array('Soap_Auth', 'disable_function'));
add_filter('login_errors', array('Soap_Auth', 'soap_errors'));
add_filter('show_password_fields', array('Soap_Auth', 'soap_show_password_fields'));


function soap_auth_check_login($username, $password) {
require_once(ABSPATH.'wp-includes/registration.php');
try{
$client = new SoapClient('http://www.someWSDL.com', array('trace' => true));
$response = $client->Authenticate($username, $password);
} catch(SoapFault $e) {
$response = $e;
global $error_type;
$error_type = "soap";
global $error_msg;
$error_msg = "There was a problem with the soap service: " . $e->getMessage();
}

if ( $response->AuthorizationToken->Token != 0) {
$email = $username;
$username = substr(trim($username), 0, strlen($username) - 4);
if ( $user_id = username_exists($username)) {
update_user_meta( $user_id, 'rotary_user_session', $response->AuthorizationToken->Token);
}
else {
remove_action('user_register', array('Soap_Auth', 'disable_function'));
$user_id = wp_create_user( $username, $password, $email );
add_user_meta( $user_id, 'rotary_user_session', $response->AuthorizationToken->Token, true );
}

add_filter( 'authenticate', array('Soap_Auth', 'rotary_email_login_authenticate'), 20, 3 );
}

function rotary_email_login_authenticate( $user, $username, $password ) {
$user = get_user_by_email( $username );
if ( $user )
$username = $user->user_login;

return wp_authenticate_username_password( null, $username, $password );
}

The Honeycomb Project

Posted in: Websites by koolkat on July 27, 2011 | No Comments

The Honeycomb Project is a nonprofit organization in Chicago that creates and manages meaningful family volunteer events for parents to enjoy with their kids. Their new website was designed by Rupert LLC and developed into a WordPress theme by Kool Kat Web Designs.