Is slimming possible?

Looking for feedback

Would it be possible to slim this down? All it does is send these variable's values to the jQuery plugin, and the less code I use here the better.

Accordion with CSS3

Sharing my progress

I found this on tympanus.net and I wanted to share it.

Airbrake Deploy Hooks on Heroku

Sharing my progress

Command to add a deploy hook to Airbrake with user and revision tracking on the Heroku Cedar stack.

It seems the included Airbrake rake task for accomplishing the same thing doesn't quite work.

Create noised background image with ImageMagick

Sharing my progress

Today I wanted to have noised background image such as recent YouTube's one.

You can create that without any PhotoShop experience, but with ImageMagic's convert command. Above command explained as:

convert -size 120x120\ # Size of image in #{width}x#{height}
  xc:white\  # I will create an image from scratch
  -fill '#dddddd'\ # Base color of image in css hex-value
  -opaque white\ # This may not be needed for ImageMagick guru
  +noise gaussian\ # I want some noise
  out.png # Name of image

Raw

So you will get image like this. It would work as website's background image very well. But if you have any suggestion, I appreciate!

BTW: Is there a tag represents 'this post is a tips for programmers when they need some design work'?

Weighted Survey Snippet

Looking for feedback

I'm currently pulling questions (based on the URI assessment ID) from a database, and listing them on the page. Each of them has a slider, which in turn has its own 'data-weight' attribute, which is just a multiplier for the final score for that question.

Each question has an #ID in the format 'id="q1"' - the number being pulled from the database, as well as the weight:

<div id="q<?=$question['id']?>" data-weight="<?=$question['weight']?>" data-value="50" class="slider"></div>

Raw

I added the i += 1 to compensate for it starting at q0 and there being no such thing. There would be a maximum of 50 questions at a time.

Am I doing this in an optimal way? Is there a better way that I could build this? I'm planning to pass each question's ID:VALUE to the next stage for processing.

Super Simple jQuery Preloader

Ian Lunn

2 days ago · 111 views

View Post 1 comment 6 likes

    $(document).ready(function(){
        $("body").prepend('<div id="preloader">Please wait...<div>');
        $(window).bind("load", function(){
            $("#preloader").fadeOut(500);
        })
    })

Raw

Looking for feedback

Hi folks,

I've spent the last few days searching the Internet for a super simple, no hassle, jQuery image preloader and I haven't came across one that's satisfied my needs. Whilst there are lots available, they all seem to need to have the image sources fed into them which is something I don't want to do.

So, my question is, as I haven't found this code anywhere else, are there drawbacks to the above code? It simply displays a "Please wait" sign after the HTML has rendered and then when the window has loaded (and all the images have loaded), it removes the preloader.

Thoughts?

Guitar chord as html

Ryan Parsley

2 days ago · 119 views

View Post 9 comments 15 likes

<div class="chord">
  <h1>E7</h1>
  <span class="offset">1</span>
  <ol class="strings">
    <li class="open">E</li>
    <li class="finger2 fret2">B</li>
    <li class="finger3 fret2">E</li>
    <li class="finger1 fret1">G#</li>
    <li class="finger4 fret3">D</li>
    <li class="open">E</li>
  </ol>
</div>

Raw

Looking for feedback

Tinkering around one night, I set a goal for myself to cleanly and sensibly mark up guitar tabs in HTML. This is the markup I found most satisfying. See a demo at ssws.ryanparsley.com/codeSamples/…

Can you think of a way to improve it?

Determine credit card type based on card number

Jeff Madsen

3 days ago · 72 views

View Post 6 comments 20 likes

<?php 

/*

'*CARD TYPES            *PREFIX           *WIDTH
'American Express       34, 37            15
'Diners Club            300 to 305, 36    14
'Carte Blanche          38                14
'Discover               6011              16
'EnRoute                2014, 2149        15
'JCB                    3                 16
'JCB                    2131, 1800        15
'Master Card            51 to 55          16
'Visa                   4                 13, 16

*/

function credit_card_determiner($cardno)
{


	$cardname = false;
	
	$cardno = str_replace(array("-"," "), array("",""),$cardno);

	$cardno_len = strlen($cardno);
			
	if ($cardno_len < 13 OR $cardno_len > 16 OR !is_numeric($cardno))
	{
		return $cardname;
	}
	
	//Luhn check
	if (!validLuhn($cardno))
	{
		return $cardname;
	}
	
	// what kind of card?
	
	switch ($cardno_len)
	{
		case 13:
			if (substr($cardno,0, 1) == 4){
				return $cardname = 'Visa';				
			}
			break;
		case 16:
			$card_1 = substr($cardno,0,1);
			if ($card_1 == 4){
				return $cardname = 'Visa';				
			}
			
			if ($card_1 == 3){
				return $cardname = 'JCB';				
			}	

			$card_2 = substr($cardno,0,2);
			if (in_array($card_2, array(50,51,52,53,54,55)))
			{
				return $cardname = 'Master Card';
			}

			$card_4 = substr($cardno,0,4);
			if ($card_4 == 6011){
				return $cardname = 'Discover';				
			}						
			break;
						
		case 14:
			$card_2 = substr($cardno,0,2);
			$card_3 = substr($cardno,0,3);
		
			if ($card_2 == 36 OR in_array($card_3, array(300,301,302,303,304,305)))
			{
				return $cardname = 'Diners Club';
			}
			
			if ($card_2 == 38){
				return $cardname = 'Carte Blanche';				
			}
			break;
				
		case 15:
			$card_2 = substr($cardno,0,2);			
			if (in_array($card_2, array(34,37))){
				return $cardname = 'American Express';				
			}

			$card_4 = substr($cardno,0,4);
		
			if (in_array($card_4, array(2131, 1800))){
				return $cardname = 'JCB';				
			}

			if (in_array($card_4, array(2014, 2149))){
				return $cardname = 'EnRoute';				
			}								
			break;
			

	}
	

	return $cardname;
}



/*
Copyright (c) 2008, reusablecode.blogspot.com; some rights reserved.

This work is licensed under the Creative Commons Attribution License. To view
a copy of this license, visit http://creativecommons.org/licenses/by/3.0/ or
send a letter to Creative Commons, 559 Nathan Abbott Way, Stanford, California
94305, USA.
*/

// Luhn (mod 10) algorithm

function validLuhn($input)
{
   $sum = 0;
   $odd = strlen($input) % 2;
    
   // Remove any non-numeric characters.
   if (!is_numeric($input))
   {
       eregi_replace("D", "", $input);
   }
    
   // Calculate sum of digits.
   for($i = 0; $i < strlen($input); $i++)
   {
       $sum += $odd ? $input[$i] : (($input[$i] * 2 > 9) ? $input[$i] * 2 - 9 : $input[$i] * 2);
       $odd = !$odd;
   }
    
   // Check validity.
   return ($sum % 10 == 0) ? true : false;
}

Raw

Looking for feedback

the "why" behind this is a tangent-filled story, but basically: I see a lot of code out there that is either;

1) bug-filled

2) no testing

3) bad code because someone tried to show off cool techniques

4) bad code because someone didn't consider the frequency of the different cards they would be checking (i.e., they would check every card against...EnRoute? Diners Club? Carte Blanche?...oh, wait- what about Visa?)

I realize this code is pretty simplistic, but I think it is good because:

-- I started by writing some tests that you can easily add more too -- I concerned myself more with reducing the number of "questions" the program has to ask, rather than trying to use clever techniques that might shave a few miliseconds in matching -- I designed it in a way that you can easily rearrange the order of the checks if you live in a place where different cards are used, or used more frequently

interested in feedback! thanks

Automatic WP Source Download, DB Setup, and Server Configuration

Jay

3 days ago · 19 views

View Post 0 comments 8 likes

#!/bin/bash

###
# WordPress Install Script
#
# Automatically downloads & installs WordPress. This
# version uses nginx.
#
# Downloads WordPress.
# Extracts it.
# Installs it into your server location.
# Creates a database with a user.
# Saves db info into a text file in the server directory.
# Edits nginx vhost file
# Restarts nginx
# Appends to hosts file
# Opens domain in browser window
#
# Author: Jay Zawrotny <jayzawrotny@gmail.com>
# Website: http://jayzawrotny.com
# License: None (Public Domain)
# Agreement: It's not my fault if you use this on your
# production server and something bad happens.
##

##
# PLEASE USE ON LOCAL DEVELOPMENT SERVERS ONLY
###
script_folder="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
tmp_folder="${script_folder}/tmp/"

###
# SET THE FOLLOWING ENVIRONMENT VARIABLES EITHER BEFORE EXECUTING 
# OR IN YOUR PROFILE.
##########
# MYSQL_ROOT        - Your root mysql username. Usually is "root".
# MYSQL_PASS        - Your root mysql password.
# WP_DOC_ROOT       - Where to install WordPress to
# WP_SERVER_ROOT    - Location of your server's root directory either your 
#                     nginx install or /private/etc/apache2
##


# Edit These Lines if you need to

mysql_root_user=${MYSQL_USER} # Used to create the user and database.
mysql_root_pass=${MYSQL_PASS} # This is why I suggest keeping it local dev servers. 

if [ ! ${mysql_root_user} ]; then
    echo "You need to set the MYSQL_USER env variable to your root mysql user."
    exit 0
fi;
if [ ! ${mysql_root_pass} ]; then
    echo "You need to set the MYSQL_PASS env variable to your root mysql pass."
    exit 0
fi;

sites_folder=${WP_DOC_ROOT} # Where to move the wordpress installation to
server_folder=${WP_SERVER_ROOT} # Location of Server folder that may contain sites-available and sites-enabled.
current_folder="${HOME}/Projects/Current/" # The current folder for current projects.

vhost_folder="${server_folder}sites-available/"
vhost_en_folder="${server_folder}sites-enabled/"
vhost_file="${vhost_folder}wordpress" # The default vhost file to copy and then substitute
server_restart="restart_nginx"

# Optional
download_filename="${tmp_folder}wordpress.tar.gz"

## End of Editable Region ##

skip_download=0
skip_mysql=0
skip_nginx=0

cleanup ()
{
    if [ -d ${tmp_folder}  ]; then
        rm -rf ${tmp_folder}
    fi
    if [ -f ${vhost_folder}${site_name}.bak ]; then
        rm ${vhost_folder}${site_name}.bak
    fi
}

error ()
{
    echo -e "Error: ${1}"
    cleanup
    exit 0
}

usage ()
{
    cat <<USG
Usage:
    -h              -       Help with usage info.
    -f sitename     -       Creates a folder named sitename to put wordpress in it. Also used as the default for everything.
    -d domain       -       The domain to add to the hosts file.
    -b database     -       Database to create
    -u username     -       Username to create for the specified database
    -p password     -       Password for the created username
    -w  -   Skip WordPress Download
    -m  -   Skip MySQL Setup
    -n  -   Skip Nginx/Apache Setup
USG
}

##
# Determine if [ the name of the site is specified as an argument
# if [ it doesn't, ask the user.
###
OPTIND=1
while getopts "hf:d:b:u:p:w:m" option
do
    case "$option" in
        h)
            usage
            exit 1
            ;;
        f)
            site_name=$OPTARG
            ;;
        d)
            domain=$OPTARG
            ;;
        b)
            mysql_db=$OPTARG
            ;;
        u)
            mysql_username=$OPTARG
            ;;
        p)
            mysql_password=$OPTARG
            ;;
        w)
            skip_download=1
            ;;
        m)
            skip_mysql=1
            ;;
        n)
            skip_nginx=1
            ;;
            
    esac
done


if [ ! ${site_name} ]; then
    read -p "Enter the name of the folder/site to create (exmaple: portfolio): " site_name
fi

##
# Make sure we have a site name at this point if [ not, bail.
###
if [ ! ${site_name} ]; then
    error "Invalid sitename."
fi

## 
# Get the domain
###
if [ ! ${domain} ]; then
    domain=${site_name}.dev
fi
    
##
# Check to make sure our sites folder does exist.
###

if [ ! -d ${sites_folder} ]; then
    error "${sites_folder} does not exist."
fi

##
# The absolute name of the folder to create. To
# host the WordPress files.
###
destination="${sites_folder}${site_name}"

echo `mkdir ${tmp_folder}`

if [ ! -d ${tmp_folder} ]; then
    error "The temporay folder ${tmp_folder} could not be created."    
fi

if [ ${skip_download} -eq 0 ]; then
    ##
    # Download WordPress from wordpress.org
    # Then test to make sure it worked.
    ###
    echo "Downloading File..."
    echo `curl -o $download_filename http://wordpress.org/latest.tar.gz`

    if [ ! -f ${download_filename} ]; then
        error "WordPress could not be downloaded."

    else
        echo -e "File Downloaded\r\n"
    fi
fi

##
# Extract the WordPress archive
# Then test to make sure that worked.
###
echo "Extracting WordPress..."
echo `tar -xzvf ${download_filename} -C ${tmp_folder}`

if [ ! -d "${tmp_folder}/wordpress" ]; then
    error "${tmp_folder}wordpress could not be extracted!"
fi

echo -e "WordPress Extracted\r\n"

##
# Move the extracted WordPress folder to the server
# location.
# Test to make sure it worked
###
echo "Moving WordPress to ${destination}"
mv ${tmp_folder}wordpress ${destination}

if [ ! -d ${destination} ]; then
    error "The WordPress files could not be moved to your server."
else
    echo -e "WordPress moved.\r\n"
fi

if [ ${skip_mysql} -eq 0 ]; then
    ##
    # Get the mysql username & password to create
    ###
    if [ ! ${mysql_db} ]; then
        read -p "Database name(default: ${site_name}): " mysql_db
    fi
    if [ ! ${mysql_db} ]; then
        mysql_db=${site_name}
    fi
    if [ ! ${mysql_username} ]; then
        read -p "Mysql Username: " mysql_username
    fi
    if [ ! ${mysql_username} ]; then
        error "No mysql username to use."
    fi
    if [ ! ${mysql_password} ]; then
        stty -echo
        read -p "MySql Password: " mysql_password
        stty echo
    fi
    if [ ! ${mysql_password} ]; then
        error "No mysql password given."
    fi

    ##
    # Use the root mysql user & pass in the script to
    # create the database.
    # Then add the user.
    ###
    echo "Creating database..."
    echo `/usr/local/mysql/bin/mysqladmin -u ${mysql_root_user} -p${mysql_root_pass} create ${mysql_db}`
    echo -e "Database ${mysql_db} created. \r\n"

    ###
    ##
    # TODO: MySQL User Stuff
    ##
    ###

    mysql -u ${mysql_root_user} -p${mysql_root_pass} ${mysql_db} <<EOF
CREATE USER '${mysql_username}'@'localhost' IDENTIFIED BY '${mysql_password}';
GRANT ALL PRIVILEGES ON ${mysql_db}.* TO '${mysql_username}'@'localhost' WITH GRANT OPTION;
EOF

    echo -e "Database: ${mysql_db}\r\nMySQL Username: ${mysql_username}\r\nMySQL Password: ${mysql_password}" > "${sites_folder}${site_name}/database.txt"
fi

##
# I setup a template vhost file for WordPress sites
# with text like <server> and <directory> to be replaced
# textually with sed.
#
# I just use sitename.dev as my hostname, but I'll make it
# an input variable.
###
if [ ${skip_nginx} -eq 0 ]; then
    echo "Setting up virtual host..."
    echo `cp ${vhost_file} ${vhost_folder}${domain}`

    ## 
    # sed searches and replaces <server> and <directory> in my
    # blank wordpress vhost template.
    ###
    echo `sed -i.bak -e "s/<server>/${domain}/g" -e "s/\<directory\>/${site_name}/g" ${vhost_folder}${domain}`

    echo "Authorize the creation of our symbolic vhost links into the enabled-sites folder."
    echo `sudo -S ln -s ${vhost_folder}${domain} ${vhost_en_folder}${domain}`

    ## 
    # Create a symbolic link to my current projects folder.
    ###
    echo `sudo -S ln -s ${sites_folder}${site_name} ${current_folder}${site_name}`

    echo "Virtual Host Created"
fi

##
# Adds the domain to the /private/etc/hosts file.
# Will safely ask for your root password through the
# OS's native means for doing so, if needed.
###
echo "Adding to hosts file..."
echo `echo "127.0.0.1   ${domain}" | /usr/bin/sudo -S tee -a /private/etc/hosts`
echo "Host filed edited."

##
# Destroy the tmp directory and the bak file we needed
# for sed to be able to update that conifg file
###
echo "Cleaning up..."
cleanup
echo "Restarting server..."

##
# Execute the restart server command. For me
# I have an external script for this.
# For apache should be like "sudo -S apachectl restart"
###

if [ ${skip_nginx} -eq 0 ]; then
    echo `${server_restart}`
fi

##
# That's it!
# Any other things you want automated should go here.
###
echo `open "http://${domain}"`
echo -e "Done.\r\n"

Raw

Sharing my progress

So the idea is pretty simple.

It downloads WordPress. Extracts it to your server. Creates a database and user. Appends a dev domain to the hosts file. Opens the browser to that dev domain to display the WordPress setup page.

You just download the script, set the global env variables as necessary then just change a few settings to match your server setup. I'd like to have made a better way to handle that but I figure it's pretty straight forward this way and easy to extrapolate to your needs.

Right now mine works with a specific setup of nginx that I use. I have a vhost wordpress template named "wordpress" in my nginx "sites-available" folder with where I want the script to replace the domain and where to replace the end of the document root path that contains the WordPress files.

It's also on github: raw.github.com/jayzawrotny/Scripts/master/…

If anyone's having trouble setting it up for your server or adds/fixes/changes something to it by all means post here.

HTML 6.2

Kurtis Rainbolt-Greene

4 days ago · 303 views

View Post 30 comments 7 likes

<html version="6.2">
  <meta>
    <name> Home Page </name>
    <author> Kurtis Rainbolt-Greene </author>
    <details> This is Kurtis' little HTML6 home page. </details>
    <created> 2011.07.15-02:31/-8 </created>
    <updated> 2011.07.15-02:33/-8 </updated>
    <include type="style" path="styles/core.css">
    <include type="style" url="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
    <include type="script" path="scripts/core.js">
  </meta>
  
  <page>
    <header>
      <navigation>
        <item> <link path="home/" > Home </link> </item>
        <item> <link path="resume/" > Resume </link> </item>
      </navigation>
    </header>

    <article class="container">
      <!> This is a commented block </!>
    </article>

    <footer>
      <para id="copyright">
        Copyright (<copy>) 2011 by Kurtis Rainbolt-Greene
      </para>
    </footer>
  </page>
</html>

<!>And Compressed</!>

<a version="6"><b><d>Home Page<D><e>Kurtis Rainbolt-Greene<E><f>This is Kurtis' little HTML6 home page.<F><g>2011.07.15-02:31/-8<G><h>2011.07.15-02:33/-8<H><i type="style" path="styles/core.css"><j type="style" url="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css"><k type="script" path="scripts/core.js"></b>
  <c><m><p><r><t path="home/" > Home <T><R></m><n class="container"><!> This is a commented block </!><N><o><q id="copyright">
        Copyright (<s>) 2011 by Kurtis Rainbolt-Greene
      <Q><O><C><A>

Raw

Looking for feedback

I decided one night to invent the next HTML schema, but made a few mistakes along the way! So I decided to rework it a bit and add in a few extras.

You'll notice the change from <resource> to <includ>, the change from uri= to url=, the <copy> symbol tag, and the drop of the /> from singleton tags.

The compression works like this: In the initial head response you send a list of key => tag values. This should be incredibly small since their are actually a very limited amount of tags.

The browser will use that map to uncompress the HTML, replacing the lowercase letters with the correct opening tag name, and uppercase letters with the correct closing tag names.

The difference is clear: 31 lines, 894 characters vs 4 lines and 522 characters. That's a 41.6% drop!

This actually brings up another area of compression in the original negotiation: Site wide scripts/styles. If you could somehow send along the js and css in the first row, you would save on latter cache checking. The Tax drops significantly.

Code on Forrst

Sort by: popular recent staff picks

Is slimming possible?

Paul Schaefer

Looking for feedback

Accordion with CSS3

Zach Schneider

Sharing my progress

Airbrake Deploy Hooks on Heroku

Chris Conley

Sharing my progress

Create noised background image with ImageMagick

nonowarn

Sharing my progress

Weighted Survey Snippet

Jarrod Mosen

Looking for feedback

Super Simple jQuery Preloader

Ian Lunn

Looking for feedback

Guitar chord as html

Ryan Parsley

Looking for feedback

Determine credit card type based on card number

Jeff Madsen

Looking for feedback

Automatic WP Source Download, DB Setup, and Server Configuration

Jay

Sharing my progress

HTML 6.2

Kurtis Rainbolt-Greene

Looking for feedback

Advertisement