Archive Page 3

A simple use case for yahoo pipes

1 Comment Published by April 13th, 2009 in web development

If you’ve never played with Yahoo Pipes, you should. The innovative interface alone is worth it.

Here’s a simple yahoo pipes example: lets say that you have a blog that you want to syndicate differently to different audiences (for example we have a Tumblr blog and we want to exclude some of the content from the rss feed for use with facebook pages). The solution is simple; add a tag to posts that you want to exclude on tumblr and then use yahoo pipes to filter out those posts and generate a new RSS feed.

You can try it with your own Tumblr blog and tag.

Renewing Your SSL Certificate (harder than it should be)

0 Comments Published by March 26th, 2009 in technology, web development

If you’ve ever setup an SSL certificate you know that its a hassle. Renewing your SSL certificate is likewise un-intuitive and takes more steps than it should. It turns out that paying for a certificate renewal does not automatically renew the certificate you have installed, you actually have to install the renewed copy.

Our setup involves a wildcard GoDaddy SSL certificate hosted on IIS6. The renewal process goes something like this:

  1. You then have to go to “Manage Certificate” in Godaddy and request a renewal.
  2. Generate the CSR in IIS:
    • Go to the “Directory Security” tab for SSL site in IIS.
    • Click the “Server Certificate.” button (located in the “Secure communications” area)
    • Click “Next” in the Welcome to the “Web Server Certificate Wizard” window.
    • Select “Renew”; then click “Next.”
    • Select “Prepare the request now, but send it later” and click “Next.”
    • Paste the CSR into the Godaddy form.
  3. Godaddy will issue the new certificate (you should get an email instantaneously)
  4. Process the pending request in IIS using the .crt file sent by GoDaddy.
  5. Select “replace the current certificate” and select the certificate with the new expiration date.
  6. If you’re using a wildcard certificate and want to use it with other sites select “export the current certificate to a .pfx file”
  7. To use the exported wildcard certificate on a different website you will first need to remove the current certificate on that website and then import the one from the .pfx (there will be momentary downtime while you do this).

(anti) IE8 CSS Hack

16 Comments Published by March 19th, 2009 in technology, web development

IE8 came out today. Along the way Microsoft fixed a bunch or rendering bugs, which is great, but you might run into problems of you previously used conditional comments such as:

<!--[if IE]>
<link rel="stylesheet" href="patches-ie.css" type="text/css" media="all" />
< ![endif]-->

The trouble is that IE8 will still read that patches-ie.css file and apply some styles that may no longer be needed because the bugs they address have since been fixed. Microsoft recommends that you update your pages to do more precise version detection. That’s probably the best solution, but let’s say that you don’t want to update all of your web applications.

The quick and dirty solution for you is the * hack. IE8 no longer supports the * hack, so you can edit your patches-ie.css file to make it look like this:

*margin-top: 30px; /* for versions prior to IE8 */

Of course you can also reverse this to target IE8:

float: right;  /* all browsers (including IE8) */
*float: none; /* override for IE7 and prior*/

Be sure to use Xenocode to test various version of Internet Explorer side by side and make sure the hack worked.

Server Side TiddlyWiki with PHP (easy)

7 Comments Published by March 18th, 2009 in technology, tiddlywiki

Update January 19, 2014: I’ve updated the zip file for PHP5 compatibility. This includes changes from Jared Swets for the install portion (see comments), and single quote escaping for the title and body.

Update February 17, 2011: I’ve updated the zip file with changes from Harry Saal (my original versions of index.php and tiddly1.php are included with a .boris extension in the zip). Harry writes:

…changes are marked with my initials (HJS):
(a) line 42: make sure to flush to disk, no caching please
(b) line 120: made autosave the default
(c) line 582: don’t allow local save, use database only
(d) line 594: startup bug fixed
(e) line 3384: if we are editing a name of a tiddly to a new one, delete the old disk copy
(f) line 4618: all data comes from the disk, never from local divs! performance tweak

TiddlyWiki is an awesome reusable non-linear personal web notebook. That’s a lot of words. Keyword is awesome.

There have been a number of server-side implementations of TiddlyWiki that allow you to save data to a server (as opposed to locally as TiddlyWiki does by default). PHPTiddlyWiki is a good simple implementation using PHP/mySQL, but its an abandoned project with a couple of minor (but important) bugs. I’ve re-packaged PHPTiddlyWiki with the necessary fixes. Note that this is still essentially a non-upgradable version, but its easy to get it running today and I’m happy with the existing functionality. Here’s a video of what it can now do:

1. Download PHPTiddlyWiki:
Download my re-packaged version of PHPTiddlyWiki which includes a bug fix which was previously preventing proper server saves. Follow the instructions in tiddly_readme.html to install PHPTiddlyWiki in sub-directory on your server. You will need to have PHP and mySQL running (as most web hosts do)

2. Password protect:
You will probably want to password protect your wiki. You can do this easily using standard .htaccess/.htpasswd. Your host may even provide a GUI to do this though DirectAdmin (as mine does) or CPanel. Note that there are some special instruction if you’re using WordPress. I had to put the ErrorDocuments referenced in that link after ” RewriteEngine On RewriteBase / ” in my .htaccess file.

3. Configure your theme:
The default PHPTiddlyWiki theme is a nice blue one, but I’m used to the Getting Things Done theme. I’ve hacked together an imitation style sheet (its probably imperfect, but fairly easy to tweak). Go to “All” Tiddlers and enter the following in the StyleSheetLayout Tiddler:

/*{{{*/
 
/*
#displayArea{
position:absolute;
top:0;
width: 520px;
_width: 545px; /* CSS UNDERSCORE HACK FOR PROPER WIN/IE DISPLAY */
}
 
#mainMenu, #licensePanel{
float:right;
clear:right;
margin-right:0;
margin-left:10px;
}
 
#contentWrapper{
width:1000px;
}
 
#sidebar{
font-size:12px;
margin:10px 10px 0 0;
width:215px;
}
 
#licensePanel{
margin-right:0px;
}
 
#logger{
xdisplay:block;
}
*/
 
/*}}}*/

Enter the following for the StyleSheet Tiddler:

/***
!Calendar CSS
***/
/*{{{*/
.calendar{
 border-bottom: 1px solid #550000;
}
 
.viewer .calendar{
 width: 220px;
}
 
#mainMenu .calendar{
 font-size: 8px;
 cursor: pointer;
 width: 100%;
 border: 0;
 border-collapse: collapse;
}
 
#mainMenu .calendar .button{
 border: 0;
}
 
#mainMenu .calendar td{
 font-size: 8pt;
 padding: 0;
 background: #fff;
 border: 0;
}
 
#mainMenu .calendar a{
 margin: 0;
 color: #000;
 background: transparent;
}
 
#mainMenu .calendar a:hover{
 color: #000;
 background: transparent;
}
 
#mainMenu .calendarMonthname,
#mainMenu .calendar .calendarMonthTitle td a{
 color: #fff;
}
 
#mainMenu .calendarDaysOfWeek td{
 background: #500;
 color: #fff;
}
 
/*}}}*/
 
/***
!GTD Style
 
!Generic rules /%==================================================================== %/
***/
/*{{{*/
body {
 background: #464646 url('http://shared.snapgrid.com/images/tiddlywiki/bodygradient.png') repeat-x top fixed;
 color: #000;
 font: .82em/1.25em Arial, "Trebuchet MS", "Bitstream Vera Sans", Verdana, Helvetica, Arial, sans-serif;
/*"Lucida Sans Unicode", "Lucida Grande","Trebuchet MS", */
}
/*}}}*/
 
/***
!Header rules /%====================================================================== %/
***/
/*{{{*/
#contentWrapper{
 margin: 0 auto;
 width: 59em;
 position: relative;
}
 
.header, .tagging, .tagged{
 display:none;
}
 
#siteTitle {
font-size:30px;
}
 
#siteSubtitle {
 font-size: 1em;
 padding-left: .8em;;
}
 
#titleLine{
 background: transparent;
 padding: 0;
}
 
#titleLine a {
 color: #CCFF66
 background: transparent;
}
/*}}}*/
 
/***
!Sidebar rules /%====================================================================== %/
***/
/*{{{*/
#sidebar{
 left: 0;
 width: 18em;
 margin: .9em .9em 0 0;
 color: #000;
 background: transparent;
}
 
.button {
 border:none;
}
/*}}}*/
 
/***
!Main menu rules /%=================================================================== %/
***/
/*{{{*/
#mainMenu {
line-height: 166%;
background: #600;
border-right: 3px solid #500;
font-size:12px;
margin:10px 10px 0 0;
width:215px;
}
 
#mainMenu h1{
 padding: 0;
 margin: 0;
 font-size: 1em;
 font-weight: normal;
}
 
#mainMenu ul{
 padding: 0;
 margin: 0;
 list-style: none;
}
 
#mainMenu h1 a,
#mainMenu li a,
#mainMenu li a.button{
display: block;
 padding: 0 5px 0 10px;
border: 0;
 border-bottom: 1px solid #500;
 border-top: 1px solid #900;
margin: 0;
}
 
#mainMenu a,
#mainMenu a.button{
background:#770000 none repeat scroll 0 0;
border-bottom:1px solid #550000;
border-top:1px solid #990000;
color:#FFFFFF;
display:block;
height:22px;
line-height:22px;
padding:0 5px 0 10px;
}
 
#mainMenu a:hover,
#mainMenu a.button:hover {
 background: #b00;
 color: #fff;
}
 
/*}}}*/
 
/***
!Sidebar options rules /%============================================================ %/
***/
/*{{{*/
#sidebarOptions {
 background: #eeb;
 border-right: 3px solid #bb8;
 color: #B4C675;
 padding: .5em 0;
}
 
#sidebarOptions a {
margin:3px 10px;
}
 
#sidebarOptions a.button{
display:block;
}
 
#sidebarOptions a:hover, #sidebarOptions a:active {
 color: #fff;
 background: #700;
 border: 0;
}
 
#sidebarOptions input{
 margin: 2px 10px;
 border: 1px inset #333;
padding: 0;
}
 
#sidebarOptions .sliderPanel {
 background: #fff;
 color: #000;
 padding: 5px 10px;
 font-size: .9em;
}
 
#sidebarOptions .sliderPanel a{
 font-weight: normal;
 margin: 0;
}
 
#sidebarOptions .sliderPanel a:link,#sidebarOptions .sliderPanel a:visited {
 color: #700;
}
 
#sidebarOptions .sliderPanel a:hover,#sidebarOptions .sliderPanel a:active {
 color: #fff;
 background: #700;
}
/*}}}*/
 
/***
!Sidebar tabs rules /%===================================================================== %/
***/
/*{{{*/
#sidebarTabs {
 background: transparent;
 border-right: 3px solid #740;
 border-bottom: 3px solid #520;
 border: 0;
 padding: 0;
}
 
#contentWrapper #sidebarTabs a,
#contentWrapper #displayArea .tabContents a{
 color: #fff;
}
 
#contentWrapper #sidebarTabs a:hover,
#contentWrapper #displayArea .tabContents a:hover {
 background: #000;
 color: #fff;
}
 
#contentWrapper #sidebarTabs a:active,
#contentWrapper #displayArea .tabContents a:active{
 color: #000;
}
 
#contentWrapper .tabSelected {
 background: #960;
}
 
#contentWrapper .tabUnselected{
 background: #660;
}
 
#contentWrapper #sidebar .tabset{
 background: #eeb;
 border-right: 3px solid #bb8;
 padding: 0 0 0 .75em;
}
 
#contentWrapper .tabContents{
 font-size: .95em;
 background: #960;
 border:0;
 border-right: 3px solid #740;
 border-bottom: 3px solid #520;
 padding: .75em;
}
 
#contentWrapper .tabContents{
 width: auto;
}
 
#contentWrapper #sidebarTabs .tabContents .tabset,
#contentWrapper .tabContents .tabset{
 border: 0;
 padding: 0;
 background: transparent;
}
 
#contentWrapper .tabContents .tabSelected,
#contentWrapper .tabContents .tabContents {
 background: #700;
 border: 0;
}
 
#contentWrapper .tabContents .tabUnselected {
 background: #440;
}
 
#contentWrapper .tabset a {
 color: #fff;
 padding: .2em .7em;
 margin: 0 .17em 0 0;
 height: 2em;
position: static;
}
 
#contentWrapper .tabset a:hover {
 background: #000;
 color: #fff;
}
 
#contentWrapper .tabset a:active {
 color: #000;
}
 
#contentWrapper .tabContents ul{
 margin: 0;
 padding: 0;
 list-style: none;
}
 
#contentWrapper .tabContents .tabContents ul{
 color: #eeb;
}
 
.tabContents ul a,
.tabContents ul .button{
 color: #fff;
 display: block;
 padding: .1em 0 .1em .7em;
 background: transparent;
 border: 0;
}
 
.tabContents ul a:hover {
 color: #fff;
 background: #000;
}
/*}}}*/
 
/***
!License panel rules /%==================================================================== %/
***/
/*{{{*/
#licensePanel {
 padding: 0px 1em;
 font-size: .9em;
}
 
#licensePanel a {
 color: #960;
 display: block;
 margin-top: .9em;
}
 
#licensePanel a:hover {
 color: #fff;
 background: transparent;
}
/*}}}*/
 
/***
!Popup rules /%================================================================= %/
***/
/*{{{*/
.popup {
 font-size: .8em;
 padding: 0em;
 background: #333;
 border: 1px solid #000;
}
 
.popup hr {
 margin: 1px 0 0 0;
 visibility: hidden;
}
 
.popup li.disabled {
 color: #666;
}
 
.popup li a,
.popup li a:visited{
 color: #000;
 border: .1em outset #cf6;
 background: #cf6;
}
 
.popup li a:hover {
border: .1em outset #cf6;
 background: #ef9;
 color: #000;
}
/*}}}*/
 
/***
!Message area rules /%================================================================= %/
***/
/*{{{*/
#messageArea{
 font-size: .9em;
 padding: .4em;
 background: #FFE72F;
 border-right: .25em solid #da1;
 border-bottom: .25em solid #a80;
 
position: fixed;
 top: 10px;
 right: 10px;
 color: #000;
}
 
#contentWrapper #messageArea a{
 color: #00e;
 text-decoration: none;
}
 
#contentWrapper #messageArea a:hover{
 color: #00e;
 text-decoration: underline;
 background: transparent;
}
 
#contentWrapper #messageArea .messageToolbar a.button{
 border: 1px solid #da1;
}
 
#contentWrapper #messageArea .messageToolbar a.button:hover{
 color: #00e;
 text-decoration: none;
 border: 1px solid #000;
 background: #fff;
}
 
/*}}}*/
/***
!Tiddler display rules /%================================================================== %/
***/
/*{{{*/
#displayArea {
 width: 39.75em;
 margin: 0 0 0 17em;
position:absolute;
top:0;
}
 
.subtitle{
padding:5px;
}
 
.tiddler {
 margin: 0 0 .9em 0;
 padding: 0 1em;
 border-right: .25em solid #aaa;
 border-bottom: .25em solid #555;
 background: #fff;
}
 
.title {
 font-size: 1.5em;
 font-weight: bold;
 color: #900;
padding:5px;
}
 
.toolbar {
 font-size: .8em;
 padding: .5em 0;
}
 
.toolbar .button{
 padding: .1em .3em;
 color: #000;
 
 border: .1em outset #cf6;
 background: #cf6;
margin: .1em;
}
 
.toolbar .button:hover {
 background: #ef9;
 color: #000;
}
 
.toolbar .button:active {
 background: #ff0;
}
 
/*}}}*/
 
/***
!Viewer rules /% ------------------------------------------------------------------------------------------ %/
***/
/*{{{*/
.viewer {
 line-height: 1.4em;
 font-size: 1em;
}
 
.viewer a:link, .viewer a:visited {
 color: #15b;
}
 
.viewer a:hover {
 color: #fff;
 background: #000;
}
 
.viewer .button{
 background: transparent;
 border-top: 1px solid #eee;
 border-left: 1px solid #eee;
 border-bottom: 1px solid #000;
 border-right: 1px solid #000;
}
 
.viewer .button:hover{
 background: #eee;
 color: #000;
}
 
.viewer .button:active{
 background: #ccc;
 border-bottom: 1px solid #eee;
 border-right: 1px solid #eee;
 border-top: 1px solid #111;
 border-left: 1px solid #111;
}
 
.viewer blockquote {
 border-left: 3px solid #777;
 margin: .3em;
 padding: .3em;
}
 
.viewer pre{
 background: #fefefe;
 border: 1px solid #f1f1f1;
}
 
.viewer pre, .viewer code{
 color: #000;
}
 
.viewer ul {
 padding-left: 30px;
}
 
.viewer ol {
 padding-left: 30px;
}
ul{
list-style-type: asquare;
}
ol{
 list-style-type: decimal;
}
 
ol ol{
 list-style-type: lower-alpha;
}
 
ol ol ol{
 list-style-type: lower-roman;
}
 
.viewer ul, .viewer ol, .viewer p {
 margin: .0;
}
 
.viewer li {
 margin: .2em 0;
}
 
h1,h2,h3,h4,h5,h6 {
 color: #000;
 font-weight: bold;
 background: #eee;
 padding: 2px 10px;
 margin: 5px 0;
}
 
.viewer h1 {font-size: 1.3em;}
.viewer h2 {font-size: 1.2em;}
.viewer h3 {font-size: 1.1em;}
.viewer h4 {font-size: 1em;}
.viewer h5 { font-size: .9em;}
.viewer h6 { font-size: .8em;}
 
.viewer table {
 border: 2px solid #303030;
 font-size: 11px;
 margin: 10px 0;
}
 
.viewer th, .viewer thead td{
 color: #000;
 background: #eee;
 border: 1px solid #aaa;
 padding: 0 3px;
}
 
.viewer td {
 border: 1px solid #aaa;
 padding: 0 3px;
}
 
.viewer caption {
 padding: 3px;
}
 
.viewer hr {
 border: none;
 border-top: dotted 1px #777;
 height: 1px;
 color: #777;
 margin: 7px 0;
}
 
.viewer
{
 margin: .5em 0 0 0;
 padding: .5em 0;
 border-top: 1px solid #ccc;
}
 
.highlight {
 color: #000;
 background: #ffe72f;
}
/*}}}*/
 
/***
!Editor rules /% ----------------------------------------------------------------------------------------- %/
***/
/*{{{*/
.editor {
 font-size: .8em;
 color: #402C74;
 padding: .3em 0;
}
 
.editor input, .editor textarea {
 font: 1.1em/130% "Andale Mono", "Monaco", "Lucida Console", "Courier New", monospace;
 margin: 0;
 border: 1px inset #333;
 padding: 2px 0;
}
 
.editor textarea {
 height: 42em;
 width: 100%;
}
 
input:focus, textarea:focus
{
 background: #ffe;
 border: 1px solid #000;
}
.footer
{
 padding: .5em 0;
 margin: .5em 0;
 border-top: 1px solid #ddd;
 color: #555;
 text-align: center;
}
/*}}}*/
 
/***
!IE Display hacks /% ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~%/
***/
/*{{{*/
body{
 _text-align: center;
}
 
#contentWrapper
{
/* _width: 770px; CSS UNDERSCORE HACK FOR PROPER WIN/IE DISPLAY */
 _text-align: left; /* CSS UNDERSCORE HACK FOR PROPER WIN/IE DISPLAY */
}
 
#messageArea{
 _position: absolute;
}
/*}}}*/

 

Create a Simple Facebook Application (without using the Facebook API)

14 Comments Published by March 11th, 2009 in facebook, technology

Turns out that it’s actually fairly easy to create a simple static Facebook application to display some data without needing to work with the Facebook API or any back-end code at all. For example, take a look at the World Map Tab on our Facebook Page. This tab was created by pulling some static HTML content from our web server, there’s really nothing Facebook specific about it, and the process is largely the same as creating a simple HTML page.

Here’s an overview video:

Creating Google Analytics Goals for Off-Site Links

2 Comments Published by March 11th, 2009 in google analytics, technology

Sometimes you might want to setup a Google Analytics Goal that is actually a link to an off-site url. For example, you conversion page might be on a different domain, but you want to be able to track users who click though to it as completing a goal.

We recently launched a WordPress MU blog network called Au Pair News and wanted to track when people click on certain off-site links (such as our “View Available Au Pairs” page) as having completed a goal. Google Analytics allows you to do this with a 2 step process.

Step 1: Track a Page View For Your Links
Even though your link is off-site you can still track a virtual page view for it by using the pageTracker call. So for example, we might have:

<li><a href="http://www.culturalcare.com/hostfamilies/availableaupairs/" onclick="pageTracker._trackPageview('/avaaupairs/');">View Available Au Pairs</a></li>

Google will now track the /avaaupairs/ page in my aupairnews.com analytics account. (Learn more about trackPageview)

Step 2: Setup your Goal
Now that /avaaupairs/ is showing up as one of the content pages in Analytics, we can create a goal based off it. Because we’re operating a blog network where the subdomain is different for each user, our goal is setup as a Regular Expression with the goal url /avaaupairs/ (but if you know the full path, you could use an exact match or a head match as well).

Changing Domain Registrars (and avoiding downtime)

0 Comments Published by February 25th, 2009 in technology, web development

Yahoo small business domains recently increased their yearly domain renewal fees to $30 (as compared to $7 for some others)

I needed to transfer several production domains from yahoo to godaddy and avoid downtime. Domain transfers are notoriously lengthy and painful; domain unlocking, transfer initiation, secret codes, and waiting, waiting, and more waiting.

Here’s a little tip to avoid downtime:

When you are transferring your domain, select to keep the existing DNS servers. This means that you don’t need to worry about re-configuring the DNS entries right away. First, your transfer will take place, and then, when you are good and ready you can change the name servers to godaddy (or your new registrar), and add all the appropriate entries in one sitting.

Insert Arbitrary HTML into Umbraco Pages

5 Comments Published by February 18th, 2009 in ballroom, google analytics, technology, umbraco

We have the Umbraco CMS (version 3) configured to use TinyMCE for WYSIWYG editing. It works quite well up until we want to insert some HTML content that TinyMCE strips out (like an embedded youtube video, or a screencast)

Here’s how to create a very simple Umbraco macro (using a c# user control) to allow you to insert arbitrary HTML code that won’t interfere with TinyMCE:

Create a visual studio solution and create InsertHTML.ascx with the following code:

< %@ Control Language="C#" AutoEventWireup="true" Codebehind="InsertHTML.ascx.cs"
    Inherits="YourNameSpace.InsertHTML" %>
< %=HTMLCode%>

The code-behind InsertHTML.ascx.cs just needs to have:

using System;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
 
namespace YourNameSpace
{
    public partial class InsertHTML : System.Web.UI.UserControl
    {
        private string __HTMLCode = "";
 
        public string HTMLCode
        {
            get
            {
                return __HTMLCode;
            }
            set
            {
                __HTMLCode = value;
            }
        }
 
    }
}

Build your DLL, drop it into the umbraco bin folder, and put the .ascx file in the \usercontrols\ directory. You’re almost done. Go to Developer -> Macros and create a new macro called “Insert HTML.” Point it to the user control on the server and be sure to check “use in editor.” Lastly, on the “Parameters” tab add a textMultiLine parameter and call it HTMLCode.

You should now see the “Insert HTML” macro as one of the options when you click the macro button in the TinyMCE editor. And we’re done.

Here’s a solution file extracted from my project:
Download Solution

Yucatan Photos

0 Comments Published by January 13th, 2009 in site news

Yucatan photos are up. Check ’em out.

Where to, chief?

0 Comments Published by January 5th, 2009 in technology

So I just launched http://www.wheretochief.com. It’s a little silly, but try it out.

Mostly its is a technology demo:

  • Entirely Client Side
  • ZVents API (JSON via JQuery)
  • Facebook Connect
  • Blueprint CSS
  • UserVoice

Watcha think?

« Previous Entries
Next Entries »

Search


About

Hi, I'm Boris. This is my website.


Archives

Categories