Resume

Posted on September 22, 2012 by bvalero

Hi, Im Bryce. Most likely you have either stumbled upon this site by accident, or I gave you the link to look at as a resume for my potential employment. Either way, This site is mainly just a collection of randomn things that I have worked on. Some things may not even make sense, but its nice to have a place to dump all my projects, finished or not.

Be sure to check back if you like the site, as I am going to be adding a ton of stuff in the near future. Basically, everything that I have done in the last 4 years will be here for everyone to see.

Here is a link to my coverletter and resume:

Resume.pdf
Coverletter.pdf

Posted in Uncategorized | Leave a comment

Why should I use Modernizr for my projects?

Posted on November 18, 2012 by bvalero

I was looking for a way to add HTML5 and CSS3 capabilities to all browsers and came across Modernizr as a potential solution.  As usual, I did not read the documentation carefully and proceeded to inject its presence into a website I was working on and it just was not working for me.  I googled some information on the tool and almost every site I came across seemed to portray it as giving browsers full HTML5 and CSS3 compliance.  Therefore I kept plugging away at it until I got a bit frustrated and decided to read the documentation more closely.  To my surprise, Modernizr does not magically add compliance, but merely detects if HTML5 and CSS3 features are present.  It says that in the first sentence on their homepage.

After realizing I wasted a bit of time on this I was about to abandon this tool and move on, but after reading some more, I found some merit in it.  Browser detection has always been a pain, and I always used it for styling purposes anyway.  Modernizr eases this pain by substituting browser detection with browser feature detection.  In other words, I could detect whether a browser supported a feature, such as CSS3 columns, and cause it to render a specific way, with alternative CSS  or a polyfill, if CSS3 columns was not supported.

What is a polyfill?  A polyfill is a Javascript shim that replicates the standard API for older browsers.  There is a polyfill for basically every HTML5/CSS3 feature.

Now at this point, I have mixed emotions.  Feature detection by itself is lightweight, and fast, but including multiple polfills into a project could slow things down dramatically and be very buggy.  It all depends on were you get your scripts from and how many you include.  I don’t think it is wise to include a bunch of polyfills so Internet Explorer is fully HTML5/CSS3 compliant.  I would just give IE users a slightly different experience with some alternative CSS, although be it challenging.

Now for all intensive purposes of this article, I will explain how to add Modernizr your project and use it.

First off, Download it from their website, including only the features you wish to detect, and add it into your <head> section after all your CSS inclusions as follows:

<head>
     <script type="text/javascript" src="path/to/modernizr.min.js"></script>
</head>

Then, you want to add a ‘no-js’ class to your <html> tag like so:

<html class="no-js">

This class will be replaced by Modernizr with a list of classes to be used in your stylesheets. If a HTML5/CSS3 feature is not present, Modernizr will append ‘no-’ to the beginning of the class.  For example:

<html class="js csscolumns no-cssgradients">

This is showing that the browser supports csscolumns but not cssgradients. So in this example it would be wise to have an CSS alternative for gradients.  Really you should always have an alternative. For this example you would have something like

.csscolumns div{
  column-width:100px;
}
.no-csscolumns div{
  width:100px;
}
.cssgradients div{
  /*some style*/
}
.no-cssgradients div{
  /*some alternative style*/
}

Now if you want to load an alternative CSS file or polyfill accordingly, you can use Modernizr’s load function.  You would add this in the <head> section as well, just below the Modernizr script.  Like so:

<script>
Modernizr.load({
  test: Modernizr.csscolumns,
  nope: 'path/to/alternative/csscolumns.css'
});
</script>

or,

<script>
Modernizr.load({
  test: Modernizr.csscolumns,
  nope: 'path/to/csscolumns-polyfill.js'
});
</script>

or test and load multiple features, 

<script>
Modernizr.load({
  test : Modernizr.fontface && Modernizr.canvas && Modernizr.cssgradients,
  nope : ['presentational-polyfill.js', 'presentational.css']
});
</script>

Just keep in mind that if you use a polyfill, to read the authors documentation on how to use it. I may not be as straight-forward as coding CSS3 normally.

Posted in HTML, Javascript | Tagged , , , | Leave a comment

Create Yii Application from Windows Command Line

Posted on October 13, 2012 by bvalero

I decided to start a Yii application only to find out that the documentation at www.yiiframework.com was geared towards Mac OS, Linux and Unix.  This was a problem because I own a Windows 7 machine with Xampp on it.  Basically, if you were to type:

C:\> cd WebRoot
C:\WebRoot> php YiiRoot/framework/yiic.php webapp testdrive

You would get the following error:

'php' is not recognized as an internal or external command, 
operable command or batch file.

This is because you have to do just one of the following:

Type out the full path to your php.exe file

C:\> cd WebRoot
C:\WebRoot> C:/path/to/php.exe YiiRoot/framework/yiic.php webapp testdrive

Or add PHP to your PATH environment variable

First we navigate to the Environment Variable Page. Click Start>Computer>System Properties>Advanced System Settings>Environment Variables.

Click ‘Path’, then ‘Edit’ and add the directory path to php.exe to the end of ‘Variable Value’ followed by a semi-colon.

Now you can type:

C:\> cd WebRoot
C:\WebRoot> php YiiRoot/framework/yiic.php webapp testdrive

And it will work giving you the prompt:

Create a Web application under 'C:\WebRoot\testdrive'? (yes|no):

Type ‘yes’ and this will create a skeleton Yii application under the directory WebRoot/testdrive. The application has a directory structure that is needed by most Yii applications.

Without writing a single line of code, we can test drive our first Yii application by accessing the following URL in a Web browser:

http://hostname/testdrive/index.php
Posted in Development, Yii | Leave a comment

CSS Button Generator with javascript/jquery

Posted on October 2, 2012 by bvalero

Today I created a CSS Button Generator to make it easier to make buttons on the fly.  It also allows me to see results of my changes instantly.  For this little project I used JQuery and JQuery UI frameworks as well as a MiniColors plugin for the colorpickers.  Overall it is quite handy but could use a few more options.  I figured I could just tweek the CSS the way I wanted after I had a roughed in button.  Click the image for a demo:

Basically, you just update each property and the CSS in the center will be automatically updated.  When finished, you just copy the CSS to you .css file and then use the .button class with your links or buttons.  Like so,

<a href="yoursite.com" class="button">yoursite.com</a>

That is all there is too it.  If you are curious how I wrote the generator, there are a couple of weird things in the code but here it is.

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Button Generator</title>
        <link rel="stylesheet" type="text/css" href="css/button.css" />
        <link type="text/css" href="css/smoothness/jquery-ui-1.8.24.custom.css" rel="stylesheet" />
        <link type="text/css" href="miniColors/jquery.miniColors.css" rel="stylesheet" />
        <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.24.custom.min.js"></script>
        <script type="text/javascript" src="miniColors/jquery.miniColors.min.js"></script>
        <script type="text/javascript" src="js/buttonBuilder.js"></script>   
    </head>
    <body>
        <div id="top">
            <div class="padder">
                <h1>CSS Button Generator</h1>
                <p>CSS buttons are extremely versatile.  
                    They are not only leaner than a image style button, requiring less bandwidth, 
                    but also much easier to edit in case your site changes themes.  Give it a wirl!</p>
            </div>
        </div>
        <div id="leftCol">
            <div class="border">
                <div class="padder">
                    <h3>Text</h3>
                    <label for="buttonText">Text</label>
                    <input id="buttonText" class="update" type="text" value="Click me!" /><br />
                    <label for="buttonFont">Font</label>
                    <select id="buttonFont" class="update" >
                        <option value="Andale Mono">Andale Mono</option>
                        <option value="Arial">Arial</option>
                        <option value="Arial Black">Arial Black</option>
                        <option value="Arial Narrow">Arial Narrow</option>
                        <option value="Arial Rounded MT Bold">Arial Rounded MT Bold</option>
                        <option value="Avant Garde">Avant Garde</option>
                        <option value="Baskerville">Baskerville</option>
                        <option value="Big Caslon">Big Caslon</option>
                        <option value="Bodoni MT">Bodoni MT</option>
                        <option value="Book Antiqua">Book Antiqua</option>
                        <option value="Calibri">Calibri</option>
                        <option value="Calisto MT">Calisto MT</option>
                        <option value="Cambria">Cambria</option>
                        <option value="Candara">Candara</option>
                        <option value="Century Gothic">Century Gothic</option>
                        <option value="Consolas">Consolas</option>
                        <option value="Copperplate">Copperplate</option>
                        <option value="Courier New">Courier New</option>
                        <option value="Didot">Didot</option>
                        <option value="Franklin Gothic Medium">Franklin Gothic Medium</option>
                        <option value="Futura">Futura</option>
                        <option value="Garamond">Garamond</option>
                        <option value="Geneva">Geneva</option>
                        <option value="Georgia">Georgia</option>
                        <option value="Gill Sans">Gill Sans</option>
                        <option value="Goudy Old Style">Goudy Old Style</option>
                        <option value="Helvetica">Helvetica</option>
                        <option value="Hoefler Text">Hoefler Text</option>
                        <option value="Impact">Impact</option>
                        <option value="Lucida Bright">Lucida Bright</option>
                        <option value="Lucida Console">Lucida Console</option>
                        <option value="Lucida Grande">Lucida Grande</option>
                        <option value="Lucida Sans Typewriter">Lucida Sans Typewriter</option>
                        <option value="Magneto">Magneto</option>
                        <option value="Monaco">Monaco</option>
                        <option value="Optima">Optima</option>
                        <option value="Palatino">Palatino</option>
                        <option value="Papyrus">Papyrus</option>
                        <option value="Perpetua">Perpetua</option>
                        <option value="Rockwell">Rockwell</option>
                        <option value="Rockwell Extra Bold">Rockwell Extra Bold</option>
                        <option value="Segoe UI">Segoe UI</option>
                        <option value="Tahoma">Tahoma</option>
                        <option value="Times New Roman" selected>Times New Roman</option>
                        <option value="Tahoma">Tahoma</option>
                        <option value="Trebuchet MS">Trebuchet MS</option>
                        <option value="Verdana">Verdana</option>
                    </select><br />
                    <label for="buttonTextColor">Color</label>
                    <input id="buttonTextColor" class="update" /><br />
                    <label for="buttonTextHoverColor">Hover</label>
                    <input id="buttonTextHoverColor" class="update" /><br />
                    <label for="buttonFontWeight">Bold</label>
                    <input type="checkbox" id="buttonFontWeight" class="update" />,
                    <label for="buttonFontStyle">Italic</label>
                    <input type="checkbox" id="buttonFontStyle" class="update" />,
                    <label for="buttonTextDecoration">Underline</label>
                    <input type="checkbox" id="buttonTextDecoration" class="update" /><br />
                    <hr />
                    <label for="textHShadow">Shadow Horizontal</label>
                    <div id="textHShadow" class="slider update"></div>
                    <div id="textHShadow-result"></div><br />
                    <label for="textVShadow">Shadow Vertical</label>
                    <div id="textVShadow" class="slider update"></div>
                    <div id="textVShadow-result"></div><br />
                    <label for="textShadowBlur">Shadow Blur</label>
                    <div id="textShadowBlur" class="slider update"></div>
                    <div id="textShadowBlur-result"></div><br />
                    <label for="textShadowColor">Shadow Color</label>
                    <input id="textShadowColor" class="update" /><br />
                </div>
            </div>
            <div class="border">
                <div class="padder">
                    <h3>Border</h3>
                    <label for="borderStyle">Style</label>
                    <select id="borderStyle" class="update">
                        <option value="dashed">Dashed</option>
                        <option value="dotted">Dotted</option>
                        <option value="double">Double</option>
                        <option value="groove">Groove</option>
                        <option value="inset">Inset</option>
                        <option value="outset">Outset</option>
                        <option value="ridge">Ridge</option>
                        <option value="solid" selected>Solid</option>
                    </select><br />
                    <label for="border">Width</label>
                    <div id="border" class="slider update"></div>
                    <div id="border-result"></div><br />
                    <label for="borderColor">Color</label>
                    <input id="borderColor" class="update" /><br />
                    <label for="borderHoverColor">Hover</label>
                    <input id="borderHoverColor" class="update" /><br />
                    <label for="radius">Radius</label>
                    <div id="radius" class="slider update"></div>
                    <div id="radius-result"></div><br />
                </div>
            </div>
        </div>
        <div id="middleCol">
            <div id="linkwrapper"><a href="#" class="button" >Click me!</a></div>
            <div id="cssoutputwrapper">
                <p>Use the css class below to style youre links or buttons.<br />
                Ex)&lt;a href="yoursite.com" class="button"&gt;yoursite.com&lt;/a&gt;</p>
                <hr />
                <div id="cssoutput"></div>
            </div>
        </div>
        <div id="rightCol">
            <div class="border">
                <div class="padder">
                    <h3>Button</h3>
                    <label for="size">Size</label>
                    <div id="size" class="slider update"></div>
                    <div id="size-result"></div><br />
                    <label for="hpadding">Padding Horizontal</label>
                    <div id="hpadding" class="slider update"></div>
                    <div id="hpadding-result"></div><br />
                    <label for="vpadding">Padding Vertical</label>
                    <div id="vpadding" class="slider update"></div>
                    <div id="vpadding-result"></div><br />
                    <label>Width</label><div id="width"></div><br />
                    <label>Height</label><div id="height"></div><br />
                    <hr />
                    <label for="buttonBGColor">Color</label>
                    <input id="buttonBGColor" class="update" /><br />
                    <label for="buttonHoverBGColor">Hover</label>
                    <input id="buttonHoverBGColor" class="update" /><br />
                    <hr />
                    <label for="buttonHShadow">Shadow Horizontal</label>
                    <div id="buttonHShadow" class="slider update"></div>
                    <div id="buttonHShadow-result"></div><br />
                    <label for="buttonVShadow">Shadow Vertical</label>
                    <div id="buttonVShadow" class="slider update"></div>
                    <div id="buttonVShadow-result"></div><br />
                    <label for="buttonShadowBlur">Shadow Blur</label>
                    <div id="buttonShadowBlur" class="slider update"></div>
                    <div id="buttonShadowBlur-result"></div><br />
                    <label for="buttonShadowColor">Shadow Color</label>
                    <input id="buttonShadowColor" class="update" /><br />                   
                </div>
            </div>
            <p>**Note: Some options may not work in other browsers</p>
            <p>Ex)Text shadows do not work in IE</p><br />
            <a href="http://www.brycevalero.com">brycevalero.com</a>
        </div>        
    </body>
</html>

Javascript

$(document).ready(function() {

    //Text properties----------------------------------------------------------
    var size = $('#size');
    size.slider({
        slide:function(event,ui) {
            $("#size-result").html(ui.value + "px (font)");
            $(".button").css("font-size", ui.value + "px");
        }
    });
    
    $('#buttonText').bind('change keydown keypress keyup', function(){
        $(".button").html($(this).val());
    });
    
    $('#buttonFont').change(function(){
        $(".button").css("font-family", $(this).val());
    });
    
    var weight = "normal";
    $('#buttonFontWeight').change(function(){
        $(".button").css("font-weight", "normal");
        weight = "normal";
        if(buttonFontWeight.checked){
            $(".button").css("font-weight", "bold");
            weight = "bold";
        } 
    });
    
    var style = "normal";
    $('#buttonFontStyle').change(function(){
        $(".button").css("font-style", "normal");
        style = "normal";
        if(buttonFontStyle.checked){
            $(".button").css("font-style", "italic");
            style = "italic";
        } 
    });
    
    var decoration = "none";
    $('#buttonTextDecoration').change(function(){
        $(".button").css("text-decoration", "none");
        decoration = "none";
        if(buttonTextDecoration.checked){
            $(".button").css("text-decoration", "underline");
            decoration = "underline";
        } 
    });

    //Text Padding------------------------------------------------------------
    var hpadding = $('#hpadding');
    hpadding.slider({
        slide:function(event,ui) {
            $("#hpadding-result").html(ui.value + "px");
            $(".button").css("padding-left", ui.value + "px");
            $(".button").css("padding-right", ui.value + "px");
        }
    });

    var vpadding = $('#vpadding');
    vpadding.slider({
        slide:function(event,ui) {
            $("#vpadding-result").html(ui.value + "px");
            $(".button").css("padding-top", ui.value + "px");
            $(".button").css("padding-bottom", ui.value + "px");
        }
    });
    
    //Text shadow--------------------------------------------------------------
    var th = 0;
    var tv = 0;
    var tb = 0;
    var tc = "#ffffff";
    var texthshadow = $('#textHShadow');
    texthshadow.slider({
        min:-50,
        max:50,
        slide:function(event,ui) {
            $("#textHShadow-result").html(ui.value + "px");
            th= ui.value;
            $(".button").css("text-shadow",  
                th + "px " + tv + "px " + tb + "px " + tc);
        }
    });
    
    var textvshadow = $('#textVShadow');
    textvshadow.slider({
        min:-50,
        max:50,
        slide:function(event,ui) {
            $("#textVShadow-result").html(ui.value + "px");
            tv= ui.value;
            $(".button").css("text-shadow",  
                th + "px " + tv + "px " + tb + "px " + tc);
        }
    });
    
    var textShadowBlur = $('#textShadowBlur');
    textShadowBlur.slider({
        min:0,
        max:20,
        slide:function(event,ui) {
            $("#textShadowBlur-result").html(ui.value + "px");
            tb= ui.value;
            $(".button").css("text-shadow",  
                th + "px " + tv + "px " + tb + "px " + tc);
        }
    });
    
    $("#textShadowColor").miniColors({
        change: function(hex, rgb) { 
            tc=hex;
            $(".button").css("text-shadow",  
                th + "px " + tv + "px " + tb + "px " + tc);
        }
    });
    
    //Text Color---------------------------------------------------------------
    $("#buttonTextColor").miniColors({
        change: function(hex, rgb) { 
            $(".button").css('color', hex);
            var color = $('#buttonTextHoverColor').val();
            $('.button').hover( function(){
                 $(".button").css('color', color);
            },
            function(){
                 $(".button").css('color', hex);
            });
        }
    });

    $("#buttonTextHoverColor").miniColors({
        change: function(hex, rgb) { 
            var color = $('#buttonTextColor').val();
            $('.button').hover( function(){
                 $(".button").css('color', hex);
            },
            function(){
                 $(".button").css('color', color);
            });
        }
    });

    //Button Color-------------------------------------------------------------
    $("#buttonBGColor").miniColors({
        change: function(hex, rgb) { 
            $(".button").css('background-color', hex);
            var color = $('#buttonHoverBGColor').val();
            $('.button').hover( function(){
                 $(".button").css('background-color', color);
            },
            function(){
                 $(".button").css('background-color', hex);
            });
        }
    });

    $("#buttonHoverBGColor").miniColors({
        change: function(hex, rgb) { 
            var color = $('#buttonBGColor').val();
            $('.button').hover( function(){
                 $(".button").css('background-color', hex);
            },
            function(){
                 $(".button").css('background-color', color);
            });
        }
    });
    
    //Button shadow------------------------------------------------------------
    var bh = 0;
    var bv = 0;
    var bb = 0;
    var bc = "#000000";
    var buttonhshadow = $('#buttonHShadow');
    buttonhshadow.slider({
        min:-50,
        max:50,
        slide:function(event,ui) {
            $("#buttonHShadow-result").html(ui.value + "px");
            bh= ui.value;
            $(".button").css("box-shadow",  
                bh + "px " + bv + "px " + bb + "px " + bc);
        }
    });
    
    var buttonvshadow = $('#buttonVShadow');
    buttonvshadow.slider({
        min:-50,
        max:50,
        slide:function(event,ui) {
            $("#buttonVShadow-result").html(ui.value + "px");
            bv= ui.value;
            $(".button").css("box-shadow",  
                bh + "px " + bv + "px " + bb + "px " + bc);
        }
    });
    
    var buttonShadowBlur = $('#buttonShadowBlur');
    buttonShadowBlur.slider({
        min:0,
        max:20,
        slide:function(event,ui) {
            $("#buttonShadowBlur-result").html(ui.value + "px");
            bb= ui.value;
            $(".button").css("box-shadow",  
                bh + "px " + bv + "px " + bb + "px " + bc);
        }
    });
    
    $("#buttonShadowColor").miniColors({
        change: function(hex, rgb) { 
            bc=hex;
            $(".button").css("box-shadow",  
                bh + "px " + bv + "px " + bb + "px " + bc);
        }
    });

    //Border-------------------------------------------------------------------
    $('#borderStyle').change( function(){
        $(".button").css("border-style", $(this).val());
    });
    
    var radius = $('#radius');
    radius.slider({
        slide:function(event,ui) {
            $("#radius-result").html(ui.value + "px");
            $(".button").css("border-radius", ui.value + "px");
        }
    });

    var border = $('#border');
    border.slider({
        slide:function(event,ui) {
            $("#border-result").html(ui.value + "px");
            $(".button").css("border-width", ui.value + "px");
        }
    });
    
    //Border Color-------------------------------------------------------------
    $("#borderColor").miniColors({
        change: function(hex, rgb) { 
            $(".button").css('border-color', hex);
            var color = $('#borderHoverColor').val();
            $('.button').hover( function(){
                 $(".button").css('border-color', color);
            },
            function(){
                 $(".button").css('border-color', hex);
            });
        }
    });

    $("#borderHoverColor").miniColors({
        change: function(hex, rgb) { 
            var color = $('#borderColor').val();
            $('.button').hover( function(){
                 $(".button").css('border-color', hex);
            },
            function(){
                 $(".button").css('border-color', color);
            });
        }
    });
    
    //Events update------------------------------------------------------------  
    $('.update').bind('blur change click dblclick error focus focusin focusout hover keydown keypress keyup load mousedown mouseenter mouseleave mousemove mouseout mouseover mouseup resize scroll select submit', function(){
	$("#width").html($("#linkwrapper").width()+"px");
        $("#height").html($("#linkwrapper").height()+"px");
        
        $("#cssoutput").html(
            ".button{<br />" +
            "<span id='indent'>background-color:" + $('#buttonBGColor').val() + ";</span><br />" +
            "<span id='indent'>border:" + $("#border").slider("value") + "px " + 
                $("#borderStyle").val() + " " + $('#borderColor').val() + ";</span><br />" +
            "<span id='indent'>padding:" + $('#vpadding').slider("value") + "px " + 
                $('#hpadding').slider("value") + "px;</span><br />" +
            "<span id='indent'>border-radius:" + $('#radius').slider("value") + "px;</span><br />" +
            "<span id='indent'>font-weight:" + weight + ";</span><br />" +
            "<span id='indent'>font-style:" + style + ";</span><br />" +
            "<span id='indent'>text-decoration:" + decoration + ";</span><br />" +
            "<span id='indent'>color:" + $("#buttonTextColor").val() + ";</span><br />" +
            "<span id='indent'>font-size:" + $("#size").slider("value") + "px;</span><br />" +
            "<span id='indent'>font-family:\"" + $("#buttonFont").val() + "\";</span><br />" +
            "<span id='indent'>box-shadow:" + 
                bh + "px " + bv + "px " + bb + "px " + bc + ";</span><br />" +
            "<span id='indent'>text-shadow:" + 
                th + "px " + tv + "px " + tb + "px " + tc + ";</span><br />" +
            "}<br />" +
            ".button:hover{<br />" +
            "<span id='indent'>background-color:" + $('#buttonHoverBGColor').val() + ";</span><br />" +
            "<span id='indent'>border:" + $("#border").slider("value") + "px " + 
                $("#borderStyle").val() + " " + $('#borderHoverColor').val() + ";</span><br />" +
            "<span id='indent'>color:" + $("#buttonTextHoverColor").val() + ";</span><br />" +
            "}<br />"
        );
    });
    
    //Presets------------------------------------------------------------------
    $("#buttonBGColor").miniColors('value', '#0000ff');
    $("#buttonHoverBGColor").miniColors('value', '#0000cc');
    $("#borderColor").miniColors('value', '#555555');
    $("#borderHoverColor").miniColors('value', '#444444');
    $("#buttonShadowColor").miniColors('value', '#000000');
    $(".button").css("background-color", $('#buttonBGColor').val());
    $(".button").css("padding", "10px");
    $(".button").css("border-radius", "25px");
    $(".button").css("border-style", $('#borderStyle').val());
    $(".button").css("text-decoration", "none");
    $(".button").css("color", "white");
    $(".button").css("font-size", "30px");
    $(".button").css("font-family", $("#buttonFont").val())
    $(".button").html("Click me!");
    $("#size" ).slider({value: 30});
    //$("#size-result").html("30px (font)");
    $("#hpadding" ).slider({value: 10});
    //$("#hpadding-result").html("10px");
    $("#vpadding" ).slider({value: 10});
    //$("#vpadding-result").html("10px");
    $("#radius" ).slider({value: 25});
    //$("#radius-result").html("25px");
    $("#border").slider({value: 2});
    //$("#border-result").html("2px");
    $(".button").css("border-width", "2px");
    $('#buttonText').trigger('change');
});
Posted in Javascript | Leave a comment

Fix WordPress title that shows twice

Posted on September 24, 2012 by bvalero

After uploading my website, I noticed that the title for all my Pages and Posts showed up twice.  Didn’t quite understand why that was happening so decided to try and figure it out.  Turns out if you have the very popular WordPress SEO by Yoast plugin activated, you could very well have problems with your titles.  For me the fix was as simple as navigating to SEO>Titles and Metas, then checking the ‘Force rewrite titles’ box.  This worked with WordPress SEO version 1.2.8.4

Posted in Wordpress | Leave a comment

How to move wordpress install to new directory or server, fix URL’s

Posted on September 24, 2012 by bvalero

Today I finished up a local WordPress version of this site, as I find Drupal to be quite annoying at times, and uploaded my site to the server only to find all the images and links to be broken.  This is because your ‘Home’ and ‘Site Url’ settings are pointing to the old location of your blog.

LINKS

So how do you solve this problem?  You must go out to the server and obtain a copy of the functions.php file, open it in some sort of text editor, and add,

update_option('siteurl','http://www.brycevalero.com');
update_option('home','http://www.brycevalero.com');

,right after the opening <?php tag, but with YOUR SITE URL.  If you dont have this file in your theme, just create a new one on your computer.  Save it, then upload this file to the server via your favorite FTP client, overwriting the original in themes/yourTheme/functions.php.  Once it is on the server, navigate to your login page and login/logout a couple of times.  You may have to click around to a couple other pages to run the update script.

Your links should be working now but you have to remove the code previously added.  Just delete the code added in your editor, save it, and upload it to the server again. Login/logout a couple of times again.  You should be all set.

IMAGES

My image links were still broken after I did the above steps, so I had some additional work to do.  I knew there had to be a database edit, but did not want to poke around in the database manually.  After searching around for an answer, I found that the problem could be fixed with a plugin (Velvet Blues Update URL’s) that could change old URL’s to the new URL.  This could actually eliminate the steps I wrote above for updating links, but I only used it to fix the image URL’s. Just download and extract the plugin to your plugins folder and activate it.  Then follow the instructs under Setting>Update Url’s.

Something else to note is that your theme may have hard-coded URL’s that should be fixed.  For instance, if you have something like:

<img src='http://localhost/wordpress/path/to/image.jpg'>

You should change it to:

<img src="<?php echo home_url('/'); ?>/path/to/image.jpg">
Posted in Wordpress | Leave a comment

Get Nearby Cities within Distance of ZIP Code, via PHP and MySQL

Posted on September 17, 2012 by bvalero

This project actually ties a lot of concepts together, so before getting started, you should have a good grasp on CSV’s, MySQL, PHP, and Trigonometry.  This project also requires that you can think outside of the box, or in this case ‘outside of the radius,’ in order to narrow down the search results.  Here is an example of what this should do:  http://php.brycevalero.com/distance/index.php.  So, lets get started.

In short, we will be completing the following steps:

Step 1: Convert CSV to MySQL database

This Step is probably the hardest step to get past.  Personally, I obtained a copy of the Zip Code database from http://www.populardata.com.  There may be other, and better, resources out there but this one suited just fine for me.  The important thing is that for each ZIP, there is a latitude and longitude in the database, as well as city name; any other fields are a bonus.  There were several other references to this site on the web as well.  If you have a fairly current version of phpMyAdmin, you may be able to import the CSV directly to your database.  If not however, you may have to convert the CSV to MySQL in order to do the import.  I wrote a small Java program that did the job for me.  If you cant get the job done, you can use this SQL file.  I suggest you try to get your own reliable database, as I wont be updating this one.

Step 2: Get formula to calculate distance between two points, on a sphere

Ok, this is where the Trigonometry comes in.  Here is the formula, which I found at moveable-type.co.uk:

    • lat2 = asin(sin(lat1)*cos(d/R) + cos(lat1)*sin(d/R)*cos(θ))
    • lon2 = lon1 + atan2(sin(θ)*sin(d/R)*cos(lat1), cos(d/R)−sin(lat1)*sin(lat2))

 θ is the bearing in which you want to go, example: 0 is north, and 180 is south

Basically, you will find a SQUARE area by calculating latnorth and latsouth as well as loneast and lonwest at a given distance from (lat1,lon1), and then querying your database for everything South of latnorth AND North of latsouthAND East of lonwest AND West of loneast.  This will create a SQUARE of data to start from.  All you have to do from there is find your CIRCLE by calculating the actual distance to each city in the SQUARE and compare that distance with your desired distance.  Any city that is farther than desired distance will be dropped.  Here is the formula (Spherical law of cosines) to find the actual distance:

    • d = acos(sin(lat1).sin(lat2)+cos(lat1).cos(lat2).cos(long2−long1)).R

Step 3: Write some PHP code

Lets start by computing the extremes to find our box area, you should already have $lat1 and $lon1 for a starting point, as well as a desired distance for $distance and $r is equal to 3959 miles (earths radius)

//compute max and min latitudes / longitudes for oursearch square
$latNorth = rad2deg(asin(sin(deg2rad($lat1)) * cos($d / $r) + cos(deg2rad($lat1)) * sin($d / $r) * cos(deg2rad(0))));
$latSouth = rad2deg(asin(sin(deg2rad($lat1)) * cos($d / $r) + cos(deg2rad($lat1)) * sin($d / $r) * cos(deg2rad(180))));
$lonEast = rad2deg(deg2rad($lon1) + atan2(sin(deg2rad(90)) * sin($d / $r) * cos(deg2rad($lat1)), cos($d / $r) - sin(deg2rad($lat1)) * sin(deg2rad($latN))));
$lonWest = rad2deg(deg2rad($lon1) + atan2(sin(deg2rad(270)) * sin($d / $r) * cos(deg2rad($lat1)), cos($d / $r) - sin(deg2rad($lat1)) * sin(deg2rad($latN))));

Then query the database,

//Rough in a square search area and exclude zip that you search on.
$query = "SELECT * FROM zips WHERE (latitude = $latSouth AND longitude = $lonWest)

Now lets turn our SQUARE into a CIRCLE:

$rs = mysql_query($query)
 while($row = mysql_fetch_array($rs)) {
	  //Of the roughed in matches, dont include the matches that are outside of actual distance, in corners of square.
	  //This will carve out a circle with included zips.
	  $truedistance = acos(sin(deg2rad($lat1)) * sin(deg2rad($row['latitude'])) + cos(deg2rad($lat1)) * cos(deg2rad($row['latitude'])) * cos(deg2rad($row['longitude']) - deg2rad($lon1))) * $r;
	  if($truedistance < $d) {
		  echo $row[City] . "\t" . round($truedistance,2) . "\n";
	  }
 }
Posted in PHP | Leave a comment

Setting up MySQL Connector/J on Windows 7

Posted on September 3, 2012 by bvalero

Basically, all that needs to be done, is to download the Connector/J JDBC driver from mysql.com and extract it to a directory of your choice.  I chose the lib folder in my JDK installation for consistency.

After that, you just set up the CLASSPATH to point to the MySQL driver:

First we navigate to the Environment Variable Page.  Click  Start>Computer>System Properties>Advanced System Settings>Environment Variables.

Click ‘New’ or ‘Edit’ if it is already there, and add CLASSPATH with ‘Variable Value’ pointing to the filepath of the ‘mysql-connector-java-5.1.21-bin.jar’.

Posted in Development, MySQL | Leave a comment

Setting up Apache Ant on Windows 7

Posted on September 3, 2012 by bvalero

In order to set up Apache Ant, you must first have the Java Development Kit (JDK) installed on your Windows 7 machine. For this walkthrough, I have already installed JDK 1.7 and will install Apache Ant 1.8.4 along with it.

Step 1: Go to http://ant.apache.org/ and click on Binary Distributions, and download the latest zip archive.

Step 2: Unzip Apache Ant to a directory of your choice. I chose “C:\Program Files\apache-ant-1.8.4″

Step 3: Create Environment Variables for your application and add bin folders to System Path. Here is how to do that..

First we navigate to the Environment Variable Page. Click Start>Computer>System Properties>Advanced System Settings>Environment Variables.

Click ‘New’, then add the ANT_HOME and JAVA_HOME variables, with ‘Variable Value’ pointing to corresponding home directories, under the user variables section.

It should look like this.

Then add bin directories to System path using the Environment variables you just created by selecting ‘Path’ and clicking ‘Edit’.  It should look like this,

Click ‘OK’ and restart your computer.

Step 4:  Check that Apache Ant is installed correctly.  You can do this by opening cmd.exe and typing simply ‘ant’.  It should display

Buildfile: build.xml does not exist!
Build failed

, and if you type ‘ant -version’

Apache Ant version 1.8.4 compiled on May 22 2012

Posted in Apache, Development | Leave a comment

Create tile based platform game. Pt. 1

Posted on May 18, 2012 by bvalero

Right now this page is just a place holder till I finnish the game up.  In the meantime, this is what I have ( a super mario bros clone).  Eventually I will have all the dynamic content included, but as of now it is just a basic tile layout of the level, some of wich have collision detection.

Use the arrow and space keys.

Posted in Flash | Leave a comment