“Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.”

Getting Started

The quote above covers everything Sass is about but lets go into some detail. Sass is a Ruby Gem that runs via the command line and watches a source file. As you save the file, Sass processes it and outputs a fully readable and useable CSS file for your site.

If you have Windows you can install Ruby from here. OS X has Ruby by default on the system but it is a 1.8.x version. If you want to upgrade to 1.9.x you can, I would suggest RMV. It will let you run a virtual ruby environment with any version of Ruby you like. Some versions of Linux such as Ubuntu, come with package managers such as Aptitude. Try running sudo apt-get install -y ruby1.9.1-full.

Once you have Ruby installed, you need Ruby Gems. Now that we have all the prerequisites out of the way you can start using Sass.

Install Sass by typing sudo gem install sass.

No go to your project directory and type sass –watch style.scss:style.css

Do all of you CSS editing in the style.scss file and every time you save Sass will convert it to the style.css file that you can load in your page.

Dive into Sass

Variables

Lets say your project has specific color pallet. You will more than likely use the same color is different places in your CSS file. The problem most designers face is if you need a change, you now have to go through all the lines of code that require the color change. Sass solves this issue by introducing variables.

The old way of color implementation:

.box
{
color: #0000FF;
}

.sidebar
{
color: #0000FF;
}


As you can see if you need to change to a new text color, you now have to go into three places to make that change. Now here is the same example using Sass.


$textColor = #0000FF;

.sidebar
{
color: $textColor;
}


The CSS file will look just like the 1st example but if you need to make a change, you only need to change the value of $textColor in one place and all of the values change.

That’s a sample for now, keep posted for other updates.

About a year ago I started looking into PHP frameworks as well as the MCV structure for applications. At first I looked at CakePHP, then CodeIgnighter. I also found Kohana and Zend. I tried my hand at CodeIgnighter for a project or two but I really couldn’t get into it. I naturally went right to Kohana (It was forked from CI’s source but was built for PHP5). I ran into the same issues, I could get the framework up, build a sample project but it really didn’t excite me. At that point I stopped trying to work with frameworks and really focused on the language.

I learned about PDO, I started building classes, and I really focused on better programming with out the help of a framework. So fast forward to last month. I started to revisit PHP frameworks again. After looking at the current states of the frameworks I really feel that Zend will work best for me. I think the reason I could not get into the flow with the other frameworks was that I was jumping in head first into both a framework and MCV. Zend is the only one of the frameworks that allows you to work with it and not force your apps to be in the MVC structure. I have started working with Zend 1.11 but I am using it without MVC. I am really liking it so far and once I get more familiar with the framework I will jump into MVC.

If you want to follow along in my journey, you can start with these Zend resources:

• Download the Zend Framework
• Zend Framework Webinars
• Zend videos on Youtube

So use cheat day how you see fit, I think I will just use it to eat food with carbs On that note, if you have any good recipes for Slow-Carb meals, send them my way and I will post them!

Base Ingredients (These Never Change):

2 Hardboiled eggs
1 1/2 Cup Chopped Spinach
1/4 Cup Salsa

Extras (One of any of these):

1/2lb Ground Turkey
1 8oz Chicken Breast
1 Cup Kidney Beans

INGREDIENTS:
2lb organic ground beef
1 large yellow onion, chopped
2 stalks of celery, chopped
2 tbsp olive oil
1 can red kidney beans, drained and rinsed well
1 can black beans, drained and rinsed well
4 chopped bell peppers
2 cans stewed tomatos

Start by adding the olive oil in to a medium hot pan. Add the chopped onion and the chopped bell peppers to the pan and sauté them until the onions are translucent and the peppers are startting to soften. Add the beef and cook until there is no pink left.

Add the beans, celery, and the tomatos. Mix well and let it come to a boil. Add the chili seasoning and let simmer for 30min.

Chili Seasoning Ingredients:
2 tablespoon paprika
4 teaspoons kosher salt
2 teaspoons onion powder
2 teaspoons garlic powder
2 teaspoons ground cayenne pepper (Use 1 teaspoon if you want it mild)
2 teaspoons black pepper
1 teaspoon dried thyme
1 teaspoon dried oregano

PHP Arrays

An array is a list of items that are tracked by an index number (or name “key”). Here is an example of a list of names:


<?php
$array = array("Joe", "Bill", "Susan", "Kim");
echo "<pre>";
print_r($array);
echo "</pre>";
?>


The above lines of code create an array (list) of names in order. In programming and most engineering fields we start counting at 0 and not 1. So the “First” item in the array is “Joe” but we call it the value at index 0. There are four items in the array, most people would count it like this:

1 => “Joe”, 2 => “Bill”, 3 => “Susan”, 4 => “Kim”

but programmers count it like this:

0 => “Joe”, 1 => “Bill”, 2 => “Susan”, 3 => “Kim”

Ok, so now when we run the code the “

” tags will format the output for us and make it more readable. Another note, I echoed the

 tags to the screen but you can't echo an Array. You must use print_r() to display the contents of the array to the screen as text.



    ARRAY

    {

        0 => "Joe"

        1 => "Bill"

        2 => "Susan"

        3 => "Kim"

    }


Now if we want the value of index #2 we would do this:


    echo $array[2];


We would see "Susan". Now this can get confusing with the numbers being shifted so I introduce Associative Arrays.


    <?php

        $array = array("Boss" => "Joe", "Janitor" => "Bill", "Nurse" => "Susan", "Customer" => "Kim");

        echo "<pre>";

        print_r($array);

        echo "</pre>";

    ?>


You will notice that the main difference is the addition of a named index. So now we can call this


    echo $array["Boss"];


We will get "Joe" as our output. All the examples I have shown are single demential arrays. Moving on...
Multi-demential Arrays are Arrays that have Arrays inside of them, observe:


    <?php

        $array = array("Bosses" => array("Joe", "Matt"), "Customers" => array("Bill", "Susan", "Kim") );

        echo "<pre>";

        print_r($array);

        echo "</pre>";

    ?>


Now we have a list of positions that have a list of people.


    ARRAY

    {

        "Bosses"

        {

            0 => "Joe"

            1 => "Matt"

        }

        "Customers"

        {

            0 => "Bill"

            1 => "Susan"

            2 => "Kim"

        }

    }


Now, to get this data we do this:


    echo $array["Bosses"][0];

    echo $array["Customers"][2];


This will output "Joe: and "Kim". We can make this an associative array and make it a little easier. 


    <?php

        $array = array("Bosses" => array("East Boss" => "Joe", "West Boss" => "Matt"), "Customers" => array("Rich" => "Bill", "Poor" => "Susan", "Avg" => "Kim") );

        echo "<pre>";

        print_r($array);

        echo "</pre>";

    ?>


Now we can get our data like this:


    echo $array["Bosses"]["East Boss"]; // output will be "Joe"

    echo $array["Customers"]["Poor"]; // output will be "Susan"


I hope this helps anyone that is confused.
]]>
			http://wrenbjor.com/2011/05/09/php-arrays/feed/
		0
		
		
		
		http://wrenbjor.com/2011/03/02/listviews/
		http://wrenbjor.com/2011/03/02/listviews/#comments
		Wed, 02 Mar 2011 04:00:29 +0000
		wrenbjor
				
		
		
		
		
		

		http://wrenbjor.com/?p=57
		
			Today I am going to cover Lists. Lists can be made several ways, today I will show you how to make a static text based list. After we are displaying the list I will then show you how to send the text from the list to a Toast (popup) when the item is clicked.

Lets start with the XML.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<ListView xmlns:android="http://schemas.android.com/apk/res/android"
	android:id="@+id/fulllist"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
/>
</LinearLayout>

This sets up a basic ListView widget to hold the list data and display it to the screen.
Now we want to make an Activity like normal but for this example your class should extend ListActivity. We will then create a list of movie monsters.
So speaking of… Here is the list of monsters.
static final String[] MONSTERS = new String[] { "Zombie", "Vampire", "Warewulf", "Blob" };

Now for the basic onCreate method:
@Override
public void onCreate(Bundle savedInstanceState)
{
    super.onCreate(savedInstanceState);
}

Now we need to make an adapter to hold the monsters. After the super call add:
setListAdapter(new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, MONSTERS));

android.R.layout.simple_list_item_1 is a default xml view for displaying a list. This can be customized for a variety of list displays.
Now lets make a ListView object that links to the XML widget:
ListView lv = getListView(); // Grabs the ListView widget that is tied to the Activity.
lv.setTextFilterEnabled(true); // Enable the Text Filter. Typing when this view has focus will filter the children to match the users input

Now we are going to create the click listener and the onItemClick event
lv.setOnItemClickListener(new OnItemClickListener()
{
    public void onItemClick(AdapterView<?> parent, View view, int position, long id)
    {
        // Do Stuff Here
    }
});

Lastly we will add the Toast call, put this in the onItemClick stub:
Toast.makeText(getApplicationContext(), ((TextView) view).getText(),Toast.LENGTH_SHORT).show();

Here is the whole Class:
public class Lister extends ListActivity {
	static final String[] MONSTERS = new String[] { "Zombie", "Vampire", "Warewulf", "Blob" };

	@Override
	public void onCreate(Bundle savedInstanceState)
	{
	  super.onCreate(savedInstanceState);

	  setListAdapter(new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, MONSTERS));

	  ListView lv = getListView();
	  lv.setTextFilterEnabled(true);

	  lv.setOnItemClickListener(new OnItemClickListener()
	  {
	    public void onItemClick(AdapterView<?> parent, View view, int position, long id)
	    {
	    	Toast.makeText(getApplicationContext(), ((TextView) view).getText(),Toast.LENGTH_SHORT).show();
	    }
	  });
	}
}





]]>
			http://wrenbjor.com/2011/03/02/listviews/feed/
		0
		
		
		
		http://wrenbjor.com/2011/01/12/custom-android-buttons/
		http://wrenbjor.com/2011/01/12/custom-android-buttons/#comments
		Wed, 12 Jan 2011 05:18:09 +0000
		wrenbjor
				
		
		
		
		

		http://wrenbjor.com/?p=44
		
			So I have been looking into buttons for my app and just like in HTML I hate the default <button> styling. So I started looking into custom buttons. 

A custom button is pretty easy, you just have to make 3 button graphics and place it into your res/drawable-hdpi, res/drawable-mdpi, and res/drawable-ldpi folders. The folders are used for the different screen resolutions and pixel densities that exist in the Android world. There is a great article here and even greater detail here.
This is an example from one of my apps:
You start with an XML file to map the states of the button. Call it buttonmap.xml and put it in the same res/drawable-dpi folder as the graphics you are pointing to. 
<?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:state_pressed="true"
           android:drawable="@drawable/newbuttonpressed" /> <!-- pressed -->
     <item android:state_focused="true"
           android:drawable="@drawable/newbuttonfocused" /> <!-- focused -->
     <item android:drawable="@drawable/newbutton" /> <!-- default -->
 </selector>

Then in the activity’s XML layout file point to the buttonmap.xml definition file.
<Button
    	android:id="@+id/addButton"
    	android:layout_width="wrap_content"
    	android:layout_height="wrap_content"
    	android:background="@drawable/buttonmap"
    	android:width="200dp"
    	android:height="50dp"
    	android:layout_gravity="center_horizontal"
    	android:layout_marginTop="25dp" />

The android:width=”200dp” and android:height=”50dp” force the button to be 200px X 50px. I only have one set of graphics so I am forcing to be that size on purpose. Before I am done with the app I will make 3 different buttons and remove the height and width attributes so Android can size it for me.
You can have the same pic made at different sizes in the folders listed above and Android chooses the best set of graphics based on the screen size of the device. If you only have one set of graphics then they could end up distorted on different screens.
]]>
			http://wrenbjor.com/2011/01/12/custom-android-buttons/feed/
		0
		
		
		
		http://wrenbjor.com/2011/01/12/the-androidmanifest-xml-file/
		http://wrenbjor.com/2011/01/12/the-androidmanifest-xml-file/#comments
		Wed, 12 Jan 2011 02:20:10 +0000
		wrenbjor
				
		
		

		http://wrenbjor.com/?p=20
		
			This little file seems to be the bane of my Android programming existence… It is really not referenced well in the Android books and good luck finding good information on it online other than the Android Javadoc located here. I am going to cover what I have discovered on my own and hopefully help out some people along the way.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.wrenbjor.android.app.helloAndroid"
      android:versionCode="1"
      android:versionName="1.0">
    <application android:icon="@drawable/icon" android:label="@string/app_name">
        <activity android:name=".helloAndroid" android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".GoodByeAndroid" android:label="@string/app_name" />
    </application>
    <uses-sdk android:minSdkVersion="7" />

</manifest>

This is a sample manifest file from a hello world app that has two views. From my extensive searching, most people have problems with intents and activities because they don’t have the manifest file setup correctly. To get started you really just need to add an  tag for each class file (activity) that your application will launch.
<activity android:name=".GoodByeAndroid" android:label="@string/app_name"></activity>
<!-- android:name is the name of the Class you are calling IT IS CASE SENSITIVE!!!
This is where most people mess up and get "Force Close" failures during testing. -->

You will also see tags in example XML files that show an , we will cover this in a later post but you can ignore it for now. This allows the system to launch pieces of our application.
Thats is for now, more to come later.
]]>
			http://wrenbjor.com/2011/01/12/the-androidmanifest-xml-file/feed/
		0