I’ve discovered a way to pull in blog titles and links on an external page without having to access the database directly. The former approach is somewhat of a hack which makes it brittle. If the WordPress team decides to change their database structure that approach could fail to work. That’s why using approved APIs is generally considered a much safer alternative whenever possible.

To make the internal WP functions available on the external page, add the following at the top of your non-WP .php page (in my case index.php):

Now let’s define the actual function that will use WordPress commands to fetch recent posts and any data we want. Add the following to functions.php theme file (WP Admin Dashboard -> Appearance, Editor -> Theme Functions):

Finally, we need to call that function in the html of our external page (index.php):

Hope you enjoy it. Let me know if you have any issues.

Related posts:

How to add 5 full WordPress posts on an external html page
How to add recent WordPress post excerpts on an external html page

So I can either stay up with the kid, or go to bed and risk getting woken up every 20 minutes to fulfill my duty as the next-episode-button-pushing-man. I’ve been going with option 2, which is no way to live (or sleep).

So I’d had it, from 3-5am, with my kid on my lap, I resolved to find some sort of solution. Certainly SOMEBODY has written an app to solve my problem. Turns our there was only 1 could find, and it was Windows only, so it wasn’t a viable option for our iMac in the loft.

My solution:

I found a neat program called Sikuli (Open Source and written by MIT students) which handles GUI automation. I wrote a python script for it, which now looks for the “next episode” button and clicks it (for as many times as I specify). Works like a charm.

Here is the project on Github:
Autoplay-net

Here is the source of the script:

#setThrowException(False)

#function exit the script
def exitScript(event):
    popup("You've managed to close Autoplay. Script will abort.")

    #kill the program (this is native python)
    import sys
    sys.exit()

#how often has next button been pressed?
counter = 0

#prompt user with input
numEpisodes = input("How many more episodes should this run for? \nexample: 4     |     Press Ctrl + F1 to cancel.")
#default success message that will play after script ends successfully
popMessage = "Done auto-playing episodes!\n" + str(counter) + " played."

#select a region
region = Screen().selectRegion("Where should the mouse-pointer go after autoplaying?")

#take a screenshot, then click that one
#scrnShot = Screen(0).capture("take a screenshot")

#add key listener. Listen for this key combo to exit the script.
Env.addHotkey(Key.F1, KeyModifier.ALT+KeyModifier.CTRL, exitScript)

#loop through looking for the next for the # of times specified by user through input above
for x in range(int(numEpisodes)):
    #look for the button every 5 seconds (easier on CPU)
    while not ("PlayNextEpis.png"):
        wait(5)

    #Check for button existence (for 1 hr)
    if exists("PlayNextEpis.png", 60 * 60 ):
        click(exists("PlayNextEpis.png")) #(first click for focus)
        wait(2) #wait for load
        click(exists("PlayNextEpis.png")) #click again if still there (since we now certainly have focus)

        #increment the counter to show how many were played
        counter += 1
        #update play count here for how many episodes have played
        popMessage = "Done auto-playing episodes!\n" + str(counter) + " episodes auto-played."

        try:
            #move moouse to rest after clicking next episode. This was user selected earlier.
            mouseMove(region.getTopLeft()) #move to place selected
            #popup("found")

        except:
            #upon failure to find a valid region specified, pop this up, before terminating the script.
            popMessage = "Region selected earlier was invalid. So mouse move didn't work.\n" + str(counter) + " episodes autoplayed."
            #pass # we miss it
            #pass is just a placeholder.

    else:
        popMessage = "Auto-play aborted! Next button wasn't found for 1 hour. \n"
        break #terminate the loop

#popup before script ends with success or failure message.
popup(popMessage)

Enjoy. Bear in mind I’m a total Python newb. If you have any improvements / suggestions please let me know.

Every week, the teams have two meetings. One in which to brainstorm, to forget about constraints and think freely. As Lopp put it: to “go crazy”. Then they also hold a production meeting, an entirely separate but equally regular meeting which is the other’s antithesis. Here, the designers and engineers are required to nail everything down, to work out how this crazy idea might actually work.

This really struck me as quite profound. I’ve participated in brainstorming sessions, creative sessions, (or whatever else you want to call them) where the goal of the meeting was to come up with creative ways to solve problems and restrictions. The most successful of these meetings followed something similar to Apple’s process.

Why is this?

There seems to be something intensely paralyzing about trying to find creative solutions while at the same time trying to remember all of the constraints of the tiny square you’ve painted around yourself. Trying to find solutions that solve all of the problems while staying inside of the constraints of the box is an unproductive ritual of self-guessing. You end up shooting yourself down on every idea you come up with. “This won’t work. That won’t either…”

A lesson to be learned from authors

Authors write a rough draft. They just kind of vomit everything out, and then write and write until they run dry. Then they go back and refine parts that need refining. Many authors will do 9 or 10 rewrites until the finished book ends up being very different from the original draft. The rough draft gets their ideas out on paper. They can improve it. They can show it to others who can critique it.

Designer’s Block

Just like writers have “writer’s block” so do designers. I find the best remedy to this (after sketching and doing the normal research) is to simply open up photoshop and start pushing pixels. Overwhelmingly, after 10 minutes or so of this, I can see a solution and am excited to finish the piece.

Summary & Conclusion

Have 1 meeting where anything goes. Everybody’s idea is appreciated. There are no dumb ideas. This is a meeting for trying to find ways an idea could work.

Have a 2nd half or separate meeting where you shoot holes in those ideas. You then usually end up with the really good ones.

A word of caution before I end. There is such a thing as getting input from too many people. With most brilliant ideas, many people don’t recognize them as such. There will often be opposition. Show it to the right people you trust. Not too many. Design by committee is useless. Now go forth and be brilliant.

I’m finally happy enough to launch it. So here it is. Of course I’ll be polishing the site some more over the coming months, but I’m itching to move on to other projects that have been kept waiting.

My previous design

Why a new site?

I had just finished my previous design, and was very proud of it. I showed it to my brother who just threw up all over it. At first I was just going to ignore his comments, but then I really thought deeply about what he’d said, sifted through his comments, and extrapolated what he really meant when he said certain things.

It made me realize that I had gone about the entire design process for that site completely wrong. I needed to seriously rethink my methodology. So I pondered and looked to where I could make improvements.

Goals

I thought about what the purpose of the site was and what I was trying to accomplish. Once I set my goals, I realized my current design wasn’t achieving them, primarily because I hadn’t thought very hard about what the site should do. I had just sat down and started running. I think I still came up with something pretty, but pretty isn’t always meaningful. I want design that is meaningful. That will make an impact. That will achieve results.

I don’t like it when people tell me that I’m here to “paint pretty pictures”. I solve problems. I solve business needs. I bring results. It often happens to be pretty. But pretty isn’t the goal. Effective is.

A time to think

I appreciate these times because I get to reflect on my design process and really think about what is working and what isn’t. I looked around the web. I thought hard. I tried to see what other designers were doing, and meditated some.

So I came up with a new process. It seemed to me that the designers I really respect seem to spend a lot more time thinking about their Design before they start and along the way. They can explain why made their choices. So I tried the same thing. I thought. It thought a lot more at each step of the way. I tried to have good design rationale for everything I did. Some things of course, I just did because I wanted to, but that’s part of the fun of it. I think it worked better for me. You be the judge.

In the next few weeks I’ll be talking about my new design process. I’ll be taking a look under the hood of thise and talk about what went into building it. Starting at custom built RSS feeds, Image Replacement, Grid based design and CSS etc.

Until then…

I finally settled on Bluehost. Fast forward 6 months later, and I couldn’t be happier. I haven’t had a single entire day of downtime. I remember having minutes of downtime maybe once. It’s been a great experience. I’m very pleased with the additional control I get over the server too. Besides that I have access to PHP, Ruby on Rails, SSH, and lots of stuff that usually doesn’t come standard.

A list of their features (from their site):

• UNLIMITED Hosting Space (NEW!)
• UNLIMITED File Transfer (NEW!)
• web hostingHost UNLIMITED Domains!!!
• 2,500 POP/Imap Email Accounts
• SSH (Secure Shell), SSL, FTP, Stats
• CGI, Ruby (RoR), Perl, PHP, MySQL
• 2000/2002 Front Page Extensions
• Free Domain Forever!
• Free Site Builder (NEW)
• 24/7 Superb/Responsive Sales/Support

They only have 1 price. It’s not the cheapest plan, but I thought the added value was definitely worth it. Give it a try.

<script type="text/javascript">
//build our array
var array1 = new Array();
array1[0] = 0;
array1[1] = 1;
array1[2] = 2;
array1[3] = 3;
array1[4] = 4;

var numArray = array1.length;
for(var i=0; i<numarray ; i++){
	if (array1[i] == 2){
		continue; //skip to the end of the for loop, then start over after incrementing by 1
	}else if (array1[i] == 3){
		break; //end the for loop, and execute code after the loop
	}

	alert("still in for loop: " + i);
}
	alert("after for loop: " + i);
</script>

The above code should have created popups for the numbers “0″, “1″, and “3″. This is because the “continue;” statement makes the code skip to the end of the loop, not executing any of the rest of the loop code, then starts over at the beginning of the loop after incrementing i by 1.

The “break;” statement causes the loop to end and the code after the loop to be executed. i is NOT incremented anymore and thus remains at 3.

You can also use “return;” to just end a function prematurely.

<script type="text/javascript">
Array.prototype.clone = function (){
	var newArray = new Array(this.length);

	for(var i=0; i < this.length; i++ ){
		newArray[i] = this[i];
	}

	return newArray;
}

</script>

This would have the same effect as the following code:

<script type="text/javascript">
function cloneArray(oldArray){
	var newArray = new Array(oldArray.length);

	for(var i=0; i < oldArray.length; i++ ){
		newArray[i] = oldArray[i];
	}

	return newArray;
}

</script>

The difference here being that for the prototype function you call it by using “arrayName.clone()” and for the second function you use cloneArray(arrayName). The both functions return the same thing.

Why not just use the following code below, you might ask? Because what you are doing below is just creating a new reference to the same array object. So if you made changes to oldArray, newArray would reflect those same changes. The functions above actually create and return a brand new array.

var oldArray = new Array();
var newArray = oldArray;

Why a concept?

A concept gives a designer a vision to work with. A theme to follow. A goal to aim towards. It is the subconscious end that will(should) guide all of your decisions. If your concept is “A rainy day”, you will font that expresses that. You might choose blue as your main color. You might choose a layout or certain effects that make you think of sadness and rain. Suddenly you find yourself having ideas based on this concept, and you have a definite direction to go towards. If you have new ideas, you can always compare them to the concept, and see if it fits.

Your concept will guide and inspire the sketching process. You won’t choose blue because you like blue, or a 1 column layout because you like it, but because it fits with your concept. Suddenly, you have a completed piece, with it’s fitting parts that make up that piece. Not just different parts that are trying to fit like puzzle pieces that don’t belong together. The difference is immediately apparent and powerful.

How do you get a concept?

If happen to be designing a page about an artist, you need need to research that artist. Write down words that come to mind. Words like powerful, dressing, provocative, words that are descriptive. I have found time and again, that I will write these words down, until the words cause images to flash in my head. Images of possible designs. I then sketch these images on paper, and explore those options if I like them. If I don’t I keep going on with my concept.

Once I have my concept, I should try to stick with it as much as I can. The finished piece will be better if I do, because each part will have a sense of belonging. It will feel like it is adding to the piece by being there. Not just there as decoration, or as a crutch, but because it helps express the overall theme or emotion of the piece.

The solution? There are 2 possible workarounds. 1) Use a DIV, or 2) use appendChild(). I will show how to use appendChild here. I’ve tested this in IE7, FF, and Safari (Mac) and it should work. Thanks to Jeremy Keith I was able to figure it out after hours of struggling.

The following code should probably be within a function you call.

<script type="text/javascript">

var output = "dynamic output from earlier should go in this variable";

//first, create the table row and the table cell
var newtr = document.createElement("tr");
var newtd = document.createElement("td");

//place the output variable within the table cell, innerHTML here works because it's not on the page yet
//then, append the cell to the row, basically places the "<td>output here</td>" tags within the <tr></tr> tags
newtd.innerHTML = output;
newtr.appendChild(newtd);

//last, append the whole thing to the element, here it'll find the element with the "tbody_one" id, go inside, and make it the last child
document.getElementById("tbody_one").appendChild(newtr);

</script>

<script type="text/javascript">
var browser = navigator.appName; //find the browser name

alert(browser); //popup with the browser name

if(browser == "Microsoft Internet Explorer"){
    alert("You are using IE");
}else{
    alert("you are using a different browser than IE");
}
</script>

Usually the code above suffices, because most JavaScript will either work in IE or the other browsers.