<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" media="screen" href="/~d/styles/rss2full.xsl"?><?xml-stylesheet type="text/css" media="screen" href="http://feeds.feedburner.com/~d/styles/itemcontent.css"?><rss xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" version="2.0"> <channel><title>clubmate.fi</title> <link>http://clubmate.fi</link> <description>about Internet &amp; WordPress</description> <lastBuildDate>Tue, 18 Jun 2013 19:31:54 +0000</lastBuildDate> <language>en-US</language> <sy:updatePeriod>hourly</sy:updatePeriod> <sy:updateFrequency>1</sy:updateFrequency> <generator>http://wordpress.org/?v=</generator> <atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" type="application/rss+xml" href="http://feeds.feedburner.com/Clubmate" /><feedburner:info xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" uri="clubmate" /><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="hub" href="http://pubsubhubbub.appspot.com/" /><item><title>Remove weird characters like ö and ä from file names in WordPress. Aka, sanitise file upload image names.</title><link>http://clubmate.fi/remove-weird-characters-like-o-and-a-from-file-names-in-wordpress-aka-sanitise-file-upload-image-names/</link> <comments>http://clubmate.fi/remove-weird-characters-like-o-and-a-from-file-names-in-wordpress-aka-sanitise-file-upload-image-names/#comments</comments> <pubDate>Tue, 21 May 2013 23:41:05 +0000</pubDate> <dc:creator>Hiljá</dc:creator> <category><![CDATA[WordPress]]></category> <category><![CDATA[snippets]]></category> <guid isPermaLink="false">http://clubmate.fi/?p=172</guid> <description><![CDATA[Sometimes when you move your site to another server and the database has different charset (or something else mysterious happens), you may find some of your images broken cause of the weird characters in the names. To be on the safe side, it's nice to sanitise the file names.]]></description> <content:encoded><![CDATA[<p>There is a simple function to do it. Just paste this into your themes <code>functions.php</code> file.</p><pre class="lang-php"><code>add_filter('sanitize_file_name', 'sa_sanitize_spanish_chars', 10);
    function sa_sanitize_spanish_chars ($filename) {
    return remove_accents( $filename );
}</code></pre><p><a
href="http://www.uv.mx/personal/gvera/wordpress-remove-special-characters-from-uploaded-files/">Source</a></p> ]]></content:encoded> <wfw:commentRss>http://clubmate.fi/remove-weird-characters-like-o-and-a-from-file-names-in-wordpress-aka-sanitise-file-upload-image-names/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>Upload a file to FTP server and copy the link to clipboard with Automator</title><link>http://clubmate.fi/upload-a-file-to-ftp-server-and-copy-the-link-to-clipboard-with-automator/</link> <comments>http://clubmate.fi/upload-a-file-to-ftp-server-and-copy-the-link-to-clipboard-with-automator/#comments</comments> <pubDate>Tue, 21 May 2013 15:37:53 +0000</pubDate> <dc:creator>Hiljá</dc:creator> <category><![CDATA[Uncategorized]]></category> <category><![CDATA[mac]]></category> <category><![CDATA[server]]></category> <guid isPermaLink="false">http://clubmate.fi/?p=171</guid> <description><![CDATA[So you want to upload a funny image quickly to the Internet. You may use something like CloudApp. Or, do it yourself with Automator.]]></description> <content:encoded><![CDATA[<p>This post assumes that you have a Mac and an Automator in it.</p><ol><li>First, go ahead and <a
href="http://editkid.com/upload_to_ftp/">download and install &#8220;Upload to FTP&#8221;</a>.</li><li>Then, fire up Automator, choose app, drag the &#8220;Upload to FTP&#8221; to the app.</li><li>Fill up your details like shown in this example photo: <img
src="http://editkid.com/upload_to_ftp/img/screenshot.jpg" width="533" height="383" class="alignnone" /></li><li>Then, drag in &#8220;Copy to Clipboard&#8221; after the Upload to FTP.</li><li>Save it and drag the <code>app</code> icon to the Dock. When you want to upload a image to your server, simply drag an image to the app icon in your Dock. The path to your image is automatically coped to your clipboard for you to paste somewhere.</li></ol> ]]></content:encoded> <wfw:commentRss>http://clubmate.fi/upload-a-file-to-ftp-server-and-copy-the-link-to-clipboard-with-automator/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>How to zip and unzip files and folders on your remote server</title><link>http://clubmate.fi/how-to-zip-and-unzip-files-and-folders-on-your-remote-server/</link> <comments>http://clubmate.fi/how-to-zip-and-unzip-files-and-folders-on-your-remote-server/#comments</comments> <pubDate>Mon, 20 May 2013 21:40:01 +0000</pubDate> <dc:creator>Hiljá</dc:creator> <category><![CDATA[php]]></category> <category><![CDATA[server]]></category> <category><![CDATA[ssh]]></category> <guid isPermaLink="false">http://clubmate.fi/?p=168</guid> <description><![CDATA[When installing, lets say, a WordPress, you naturally need to move the files to the server. It's about ~100 times faster to move one big compressed file than a folder containing literally thousands of small files. But, you can't unzip anything from your FTP client. Here's all about zipping and unzipping.]]></description> <content:encoded><![CDATA[<p>Ideally you have an <code>SSH</code> acces to your server (<code>SSH</code> means Secure shell, <a
href="http://en.wikipedia.org/wiki/Secure_Shell">read more about it</a>). Meaning that you log into your server using the Terminal (Mac) or Putty if your on Windblows. If you don&#8217;t have <code>SSH</code> acces, don&#8217;t worry, there is another way.</p><h3>Login with SSH</h3><pre class="lang-html"><code>ssh username@domainname.com</code></pre><p>or</p><pre class="lang-html"><code>ssh username@12.12.12.123</code></pre><p>The series of numbers being your IP address. If you got those right, you&#8217;ll be prompted your password, just type it in.</p><h3>To zip a folder</h3><pre class="lang-html"><code>zip -r archive.zip foldername</code></pre><ol><li><code>-r</code> include all files and directories</li><li><code>archive.zip</code> name of the zip file you want to do</li><li><code>foldername</code> name of the folder you want to zip</li></ol><h3>Unzip</h3><pre class="lang-html"><code>unzip archive.zip</code></pre><p>Recourses:</p><ul><li><a
href="http://zugec.com/linux/using-zip-via-ssh">Using Zip Via SSH</a></li><li><a
href="https://kb.mediatemple.net/questions/247/Common+SSH+Commands#gs/delete-file">Common SSH Commands</a></ul><h3>Unzipping using a PHP script</h3><p>I&#8217;ve been using this script <a
href="http://clubmate.fi/cm/wp-content/uploads/unzipper1.zip">PHP Unzipper</a>. Just unzip it and throw to your server and navigate to <code>yourdomain.com/index2.php</code></p><p>Or you can use some other script, <a
href="http://scriptime.blogspot.in/2013/01/unzip-zip-file-with-php.html">like this</a>. I haven&#8217;t tested it.</p> ]]></content:encoded> <wfw:commentRss>http://clubmate.fi/how-to-zip-and-unzip-files-and-folders-on-your-remote-server/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>spin.js light weight spinner thing</title><link>http://clubmate.fi/spin-js-light-weight-spinner-thing/</link> <comments>http://clubmate.fi/spin-js-light-weight-spinner-thing/#comments</comments> <pubDate>Sat, 27 Oct 2012 14:04:39 +0000</pubDate> <dc:creator>Hiljá</dc:creator> <category><![CDATA[HTML/CSS]]></category> <guid isPermaLink="false">http://clubmate.fi/?p=163</guid> <description><![CDATA[http://fgnass.github.com/spin.js/]]></description> <content:encoded><![CDATA[<p>Usually you would do the loading spinner as an animated gif, but it has it&#8217;s fallbacks. Gifs have no alpha transparency and for retina screens you&#8217;d need another double the size gif. Spinner.js has none of those limitations and is very customizable, plus it only weights 2KB when zipped. A loading gif I was using before weighted 20KB.</p> ]]></content:encoded> <wfw:commentRss>http://clubmate.fi/spin-js-light-weight-spinner-thing/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>Disable metabox dragging in WordPress backend</title><link>http://clubmate.fi/disable-metabox-dragging-in-wordpress-backend/</link> <comments>http://clubmate.fi/disable-metabox-dragging-in-wordpress-backend/#comments</comments> <pubDate>Tue, 23 Oct 2012 03:50:50 +0000</pubDate> <dc:creator>Hiljá</dc:creator> <category><![CDATA[WordPress]]></category> <category><![CDATA[meta box]]></category> <category><![CDATA[snippets]]></category> <guid isPermaLink="false">http://clubmate.fi/?p=159</guid> <description><![CDATA[A quick snippet]]></description> <content:encoded><![CDATA[<div
class="note"> Just noticed a flaw in this, the postbox script affects also to the tagging interface, disabling it you disable the tagging.</div><pre class="lang-php"><code>function disable_drag_metabox() {
    wp_deregister_script('postbox');
}
add_action( 'admin_init', 'disable_drag_metabox' );</code></pre><p>Not for the admin.</p><pre class="lang-php"><code>if (!current_user_can('author')) {
    function disable_drag_metabox() {
        wp_deregister_script('postbox');
    }
    add_action( 'admin_init', 'disable_drag_metabox' );
}</code></pre>]]></content:encoded> <wfw:commentRss>http://clubmate.fi/disable-metabox-dragging-in-wordpress-backend/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>Sublime Text 2 – Useful Shortcuts (Mac OS X)</title><link>http://clubmate.fi/sublime-text-2-useful-shortcuts-mac-os-x/</link> <comments>http://clubmate.fi/sublime-text-2-useful-shortcuts-mac-os-x/#comments</comments> <pubDate>Sat, 20 Oct 2012 14:51:34 +0000</pubDate> <dc:creator>Hiljá</dc:creator> <category><![CDATA[Internet]]></category> <guid isPermaLink="false">http://clubmate.fi/?p=158</guid> <description><![CDATA[https://gist.github.com/1207002]]></description> <content:encoded><![CDATA[<p>Handy little page that I keep open almost all the time.</p> ]]></content:encoded> <wfw:commentRss>http://clubmate.fi/sublime-text-2-useful-shortcuts-mac-os-x/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>PHP if, else and elseif statements</title><link>http://clubmate.fi/php-if-else-and-elseif-statements/</link> <comments>http://clubmate.fi/php-if-else-and-elseif-statements/#comments</comments> <pubDate>Tue, 16 Oct 2012 00:37:41 +0000</pubDate> <dc:creator>Hiljá</dc:creator> <category><![CDATA[php]]></category> <category><![CDATA[conditional]]></category> <guid isPermaLink="false">http://clubmate.fi/?p=155</guid> <description><![CDATA[Here's all the different ways to do conditional logic in PHP]]></description> <content:encoded><![CDATA[<p>The barebones basic syntax in plain english goes something like this:</p><pre><code>if (value is lagrer than other value)
    do stuff
else
    do something else</code></pre><h3>Different methods</h3><p>To my knowledge there are few different ways to do this.</p><ol><li>The normal way using shorthand</li><li>The normal way with curly brackets</li><li>The normal way with colon</li><li>The ternary method</li></ol><p>Actually only two, the first three are exactly the same. Lets see.</p><h3>The shorthand method</h3><pre class="lang-php"><code>if ($a &gt; $b)
    echo "a is larger than b";
else
    echo "a is smaller than b";</code></pre><p>But, as they say &#8220;Explicit is <em>always</em> better than implicit&#8221;. More on that <a
href="http://stackoverflow.com/questions/8726339/php-if-else-for-foreach-while-without-curly-braces">here</a>.</p><h3>The curly bracket method, the more explicit method</h3><pre class="lang-php"><code>if ($a &gt; $b) {
    echo "a is larger than b";
} else {
    echo "a is smaller than b";
}</code></pre><p>It&#8217;s good to use <code>{</code> <code>}</code> to be more clear. I like this.</p><h3>Colon method</h3><p>This is more clear when you have a lot of html in between the <code>if</code> <code>else</code> statements.</p><pre class="lang-php"><code>&lt;?php if ($a &gt; $b) : ?&gt;
    &lt;!--Loads of html content here--&gt;
&lt;?php else : ?&gt;
    &lt;!--Loads of html content here--&gt;
&lt;?php enfif; ?&gt;</code></pre><h3>The ternary method</h3><p>This one is also referred as the shorthand method. It is probably the most confusing and it has its limitations compared to the normal statement, but also more handy in many cases.</p><pre class="lang-php"><code>$age_string = ($age &lt; 18) ? 'Cannot buy booze' : 'Can buy booze';</code></pre><p>That is equal to:</p><pre class="lang-php"><code>if ($age &lt; 18) {
    $age_string = 'Cannot buy booze';
} else {
    $age_string = 'Can buy booze';
}</code></pre><p>Much more compact!</p><p>The limitation in it being that you can&#8217;t <code>echo</code> out stuff in the statement. The following will not work.</p><pre class="lang-php"><code>($age &lt; 18) ? echo 'Cannot buy booze' : echo 'Can buy booze';</code></pre><p>The way you would make the <code>echo</code> work with it:</p><pre class="lang-php"><code>$age_string = ($age &lt; 18) ? 'Cannot buy booze' : 'Can buy booze';
echo $age_string;</code></pre><h3>But there is more&#8230;</h3><p>&#8230;than two &#8220;states&#8221; the <code>if</code> and the <code>else</code>. A value can have three &#8220;states&#8221; so to speak: smaller, larger and equal to. That&#8217;s when the <code>elseif</code> steps in, (of course there is ∞ amount of different outcomes, not only three, hope you get the point).</p><p>The upper mentioned statements all have a flaw. See comments below.</p><pre class="lang-php"><code>if ($a &gt; $b) {
    echo "a is larger than b";
} else {
    echo "a is smaller than b"; //This is also true when the two values are equal, so it's not smaller
}</code></pre><p>The following is straight from the <a
href="http://php.net/manual/en/control-structures.elseif.php">PHP Manual elseif/if else article</a>.</p><pre class="lang-php"><code>if ($a &gt; $b) {
    echo $a . " is greater than " . $b;
} elseif ($a == $b) { // Note the combination of the words.
    echo $a . " equals " . $b;
} else {
    echo $a." is neither greater than or equal to ".$b;
}</code></pre><p>Here&#8217;s the same with comments.</p><pre class="lang-php"><code>if ($a &gt; $b) {
    echo $a . " is greater than " . $b; //First state:  if "a" is larger
} elseif ($a == $b) {
    echo $a." equals ".$b;              //Second state: if "a" and "b" are equal
} else {
    echo $a . " is smaller " . $b;      //Third state:  if "a" smaller
}</code></pre><p>The <code>elseif</code> does not mean that something &#8220;is equal to&#8221;, it&#8217;s just a way to test it among millions of other things.</p><p>I quote the manual:</p><blockquote><p> elseif, as its name suggests, is a combination of if and else. Like else, it extends an if statement to execute a different statement in case the original if expression evaluates to FALSE. However, unlike else, it will execute that alternative expression only if the elseif conditional expression evaluates to TRUE.</p></blockquote><p>What what??? <code>else</code> and <code>if</code> combined&#8230; To me it always kind of said <code>or</code>. Does that make sense?</p><p>Hope this was helpful.</p> ]]></content:encoded> <wfw:commentRss>http://clubmate.fi/php-if-else-and-elseif-statements/feed/</wfw:commentRss> <slash:comments>1</slash:comments> </item> <item><title>Fluid multi column layout where sidebar and margins stays fixed width, without javascript</title><link>http://clubmate.fi/fluid-multi-column-layout-where-sidebar-and-margins-stays-fixed-width-without-javascript/</link> <comments>http://clubmate.fi/fluid-multi-column-layout-where-sidebar-and-margins-stays-fixed-width-without-javascript/#comments</comments> <pubDate>Sat, 13 Oct 2012 18:08:55 +0000</pubDate> <dc:creator>Hiljá</dc:creator> <category><![CDATA[HTML/CSS]]></category> <category><![CDATA[layout]]></category> <guid isPermaLink="false">http://clubmate.fi/?p=153</guid> <description><![CDATA[More fluid layout examples ahead. First I was like hmm... sure need js to that. But of course not!]]></description> <content:encoded><![CDATA[<p>I was working on a layout with a lot of narrow columns and a sidebar. <a
href="http://jsfiddle.net/andy_h/xThLt/15/">First I did it like this</a>.</p><p>Problems in that approach:</p><ul><li>Margins are define in percentage so they vary depending on the width of the window, we don&#8217;t want that</li><li>On low resolutions the sidebar gets too narrow and the list in it wraps, ugly.</li></ul><p>What we want:</p><ul><li>Fluid width columns</li><li>Static width sidebar</li><li>Static width margins</li></ul><p><a
class="demo-button" href="http://jsfiddle.net/andy_h/xThLt">See in the fiddle what I mean &rarr;</a></p><p><iframe
style="height: 600px" src="http://jsfiddle.net/andy_h/xThLt/embedded/result,html,css/" allowfullscreen="allowfullscreen" frameborder="0"></iframe></p><h3>Elementary HTML and CSS</h3><p>Here&#8217;s what we&#8217;re doing, check the comments in the code.</p><p>The HTML:</p><pre class="lang-html"><code>&lt;!-- Wrapper in normal fashion --&gt;
&lt;div class="wrap"&gt;
    &lt;!-- Normal header --&gt;
    &lt;header&gt;
        &lt;h1&gt;Fixed width sidebar in a fluid layout&lt;/h1&gt;
    &lt;/header&gt;
    &lt;!-- Apply the margin to this not the wrap --&gt;
    &lt;section&gt;
        &lt;!-- Give the columns a wrapper --&gt;
        &lt;div class="article-wrap"&gt;
            &lt;article&gt;
                &lt;!-- Inner element to the columns --&gt;
                &lt;div class="inner-article"&gt;
                    &lt;p&gt;Some content here&lt;/p&gt;
                &lt;/div&gt;
            &lt;/article&gt;
            &lt;article&gt;
                &lt;div class="inner-article"&gt;
                    &lt;p&gt;Some content here&lt;/p&gt;
                &lt;/div&gt;
            &lt;/article&gt;
            &lt;article class="last"&gt;
                &lt;div class="inner-article"&gt;
                    &lt;p&gt;Some content here&lt;/p&gt;
                &lt;/div&gt;
            &lt;/article&gt;
        &lt;/div&gt;
        &lt;aside&gt;
            &lt;!-- Inner element here also --&gt;
            &lt;div class="inner-sidebar"&gt;
                &lt;h2&gt;Sidebar&lt;/h2&gt;
                &lt;ul&gt;
                    &lt;li&gt;
                        Some sort of a menu
                    &lt;/li&gt;
                    &lt;li&gt;
                        List item 2
                    &lt;/li&gt;
                    &lt;li&gt;
                        List item number three
                    &lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt;
        &lt;/aside&gt;
    &lt;/section&gt;
&lt;/div&gt;​</code></pre><p>And the CSS:</p><pre class="lang-css"><code>.wrap{width:100%;}
    /* Margin in the inner wrapper */
    section{font:normal 13px/1.4 sans-serif; margin:20px;}
/* Right margin width of the sidebar */
.article-wrap{margin:0 193px 0 0;}
    /* Float the columns and give width depending on how many you have them */
    article{float:left; width:33%;}
        /* Apply margins and paddings to the inner element */
        .inner-article{background:LightGoldenRodYellow; margin:0 20px 0 0; padding:10px;}
/* Position the sidebar absolutely */
aside{background:Aquamarine; height:350px; position:absolute; top:74px; right:20px; width:200px;}
    /* Again paddings and margins in the inner element */
    .inner-sidebar{padding:15px}
/*Just to make is pretty*/
header{margin:20px; width:100%;}
h1{font:bold 25px/1.4 sans-serif;}
h2{font:bold 18px/1.4 sans-serif;}
p{margin:10px;}
ul{list-style:disc; margin:0 0 0 17px;}
​</code></pre><p>The key here is to wrap elements. Check the full code in the <a
href="http://jsfiddle.net/andy_h/xThLt/">fiddle</a>.</p> ]]></content:encoded> <wfw:commentRss>http://clubmate.fi/fluid-multi-column-layout-where-sidebar-and-margins-stays-fixed-width-without-javascript/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>Translucent tabs blending into opaque body in a responsive fluid layout</title><link>http://clubmate.fi/translucent-tabs-blending-into-opaque-body-in-a-responsive-fluid-layout/</link> <comments>http://clubmate.fi/translucent-tabs-blending-into-opaque-body-in-a-responsive-fluid-layout/#comments</comments> <pubDate>Thu, 27 Sep 2012 11:36:04 +0000</pubDate> <dc:creator>Hiljá</dc:creator> <category><![CDATA[HTML/CSS]]></category> <category><![CDATA[opacity]]></category> <category><![CDATA[tabs]]></category> <category><![CDATA[transparent]]></category> <guid isPermaLink="false">http://clubmate.fi/?p=149</guid> <description><![CDATA[Hard to explain what I'm doing here but, when designing things to a fluid layout simple things may get hard. Here's an elegant solution to a very specific fluid width layout CSS conundrum.]]></description> <content:encoded><![CDATA[<p><a
class="demo-button" href="http://jsfiddle.net/andy_h/wVJnk/">See a fiddle of it &rarr;</a></p><ol><li>The texts length in the tabs vary (multilingual site)</li><li>The layout needs to be fluid</li><li>No javascript can be used</li><li>The <code>ul</code> can&#8217;t have background color</li></ol><p>The gist of the problem was to have the tabs (the <code>a</code> elements) blend into the semi transparent <code>section</code> element beneath it on hover and when current.</p><p>Cause of the transparency, the <code>ul</code> could not have a background color (it wouldn&#8217;t be transparent then), and we needed to use a filler element.</p><p><a
href="http://clubmate.fi/cm/wp-content/uploads/Snapshot-92712-110-PM.png"><img
src="http://clubmate.fi/cm/wp-content/uploads/Snapshot-92712-110-PM.png" alt="" title="Snapshot 9:27:12 1:10 PM" width="850" height="636" class="alignnone size-full wp-image-150" /></a></p><p>Half of glory to <a
href="http://www.melavanamo.com/">Martti</a>.</p> ]]></content:encoded> <wfw:commentRss>http://clubmate.fi/translucent-tabs-blending-into-opaque-body-in-a-responsive-fluid-layout/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>Flick Scrolling</title><link>http://clubmate.fi/flick-scrolling/</link> <comments>http://clubmate.fi/flick-scrolling/#comments</comments> <pubDate>Tue, 18 Sep 2012 16:36:37 +0000</pubDate> <dc:creator>Hiljá</dc:creator> <category><![CDATA[Uncategorized]]></category> <guid isPermaLink="false">http://clubmate.fi/?p=147</guid> <description><![CDATA[http://simurai.com/post/31460815120/flick-scroll]]></description> <content:encoded><![CDATA[<p>What an amazing idea!</p> ]]></content:encoded> <wfw:commentRss>http://clubmate.fi/flick-scrolling/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> </channel> </rss>
