iEFdev

Apple Maps Street View

Found a picture of some rain damaged streets in France. Thought it would make a great Apple Maps picture. :)

· Eric

Compress, split and merge files

Compress

When/if you work with large files there are times you need to compress the file.

Let say you have a folder with your big file(s). You tar to compress it:

tar -cvzf MyFolderName.tar.gz MyFolderName

I used that recently to compress a virtual disk (.vmdx). It went down from 12.6GB to 5.3GB.

Split

So, that’s good. But the file is still kind of big to send or maybe upload somewhere. In Terminal:

split -b 200m MyFoldeName.tar.gz MyFoldeName.part-

That will create a number of 200MB files with the names:

MyFolderName.part-aa
MyFolderName.part-ab
MyFolderName.part-ac
MyFolderName.part-ad
...etc.

Now they’re more friendly sized to send or upload.

Merge

To put the big file back together again. In Terminal:

cat MyFolderName.part-* > MyFolderName.tar.gz

· Eric

Added a scrollToTop to my Tumblr page

I made another small modification to this blog. A scrollToTop-function. Like in the Dashboard. Thought I should write it down if you want to do it yourself. It’s really simple.

Found a guide with an example: Add Back to Top Button Tumblr – Easy Scroll to Top Navigation from tumblrtips.com.

The guide itself have a few misses - wrong id’s etc. And I also think it’s a little bit too much code int there, to make it work. Less is more!

Assuming you already have jQuery loaded in your head… Add following code to your <head>. Just before the closing tag is fine.

<style type="text/css">
/* scrollToTop */
#scrollToTop {
    width: 50px; height: 50px;
    display: none;
    position: fixed;
    top: 115px;
    right: 15px;
    background: transparent url(data:png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyBAMAAADsEZWCAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sICQgYHo9StoUAAAAPUExURQAAAGmCl2mCmKysrP///xf8AHQAAAAEdFJOUwAZGX/73jvQAAAAAWJLR0QEj2jZUQAAAHxJREFUOMvtlEEKwDAIBAd8Qp/QD6T1/3/rIYdGoxJyK9RbGBbiriyAzgPEoKMjJHcmUQVJSCuIZvMB0hhmkez/IH1Ye7E5xqRh0sJdRUT6ShIQ3CVhJYMIJ3lFqDdOHJkMjbwWQyhTSDf9SUnWr3enD/J24QzBVbZY1nwP6XnPkR8k9ioAAAAASUVORK5CYII=) no-repeat 0 0;
    border-radius: 9px;
    cursor: pointer;
}
</style>
<script type="text/javascript">
    /* scrollToTop */
    $(function() {
    	$window=$(window);
		$link=$("#scrollToTop");
		$link.click(function() {
			$("html, body").animate({ scrollTop: 0 }, 'slow')});
			$window.scroll(function() {
			if ($window.scrollTop() <= 800 ) {
				$link.fadeOut('fast');
			}
			else {
				$link.fadeIn('slow');
			}
		});
	});
</script>

Then in the end, just before </body> we add the <div>

	<div id="scrollToTop"></div>

If you compare that to the code on the example page, there’s only a div here. No, link and no image.

How it works

Main difference between this one and the one from the example page is that I only use the second part. So they did too, but linked to both. The graphic is now a single div and the image is set in the CSS as a background.

To set different values when it should start to show. Look in the script at the line:

if ($window.scrollTop() <= 800 ) {

I set mine to 800, to start to show up when the last shelf in my right column is gone. You can change that value to what suits your site.

The positioning is in the CSS. Look at the lines:

top: 115px;
right: 15px;

That’s what I use here. Change to what suits your site.

Examples:

/* Top-Left */
top: 15px;
left: 15px;

/* Top-Right */
top: 15px;
right: 15px;

/* Bottom-Left */
bottom: 15px;
left: 15px;

/* Bottom-Right */
bottom: 15px;
right: 15px;

The image

If you wonder about the long row of characters? That is the image it self. It’s the Data Uri of the image I used. So, NO image, just code instead. :)

The image I used was just slightly ugly in the rounded corners, so I added some border-radius. And it made it look nicere, here anyway. And since the link element is gone, I also put a cursor in the CSS as well.

Except that, the code is kind of self explanatory. Enjoy!

· Eric

It&#8217;s just hilarious.


· Eric

It’s just hilarious.

· Eric

Open external links in new windows with MooTools

If you’re using the XHTML syntax in your site, you know that target="_blank" isn’t a very good thing to use. So, what we use instead is the onclick attribute. Something like:

<a href="http://www.example.com/"onclick="window.open(this.href); return false;">Foo Bar</a>

I found this snippet at Snipplr: Automatically send external links to new window with mootools by birnamdesigns.

It’s old (2010), but good & simple, and it’s a really nice way to get some automatization on the website. But there are still a few links I’d prefer to open up in new windows as well (at least on my sites. So, I modified that script a bit and added a test for a class: class="ext". I also stripped out the , '_blank' part from that code as it’s not needed.

The Snippet

Here’s my modified version of the snippet. I used MooTools 1.4.5 when I tested it, but should work fine with older versions as well.

/**
* Function to open links to external sites in new windows.
* The 'target' attribute, is not part of xhtml 1.* strict.
* A modified version of: http://snipplr.com/view/30551/
* Added a short check for class="ext" to control local links as well.
*/
window.addEvent('domready', function() {
    var currentDomain = window.location.host;
    $(document.body).addEvent('click', function(evt) {
		var target = $(evt.target);
		if (target.get('tag') !== 'a') {
		    target = target.getParent();
		}

		if (target && target.get('tag') === 'a' && target.get('href').test('http') && !target.get('href').test(currentDomain) || target && target.hasClass('ext')) {
			window.open(target.get('href')); return false;
		}
    });
});

Examples

Here are 3 different links. 2 local and 1 external. Example #2 & #3 will open up in new windows.

Example #1 :: Local link:

<a href="/some_page.php" class="foo bar">Local link</a>

Example #2 :: Local link: (with ext added to the class)

<a href="/some_page.php" class="foo ext bar">Local link</a>

Example #3 :: External link:

<a href="http://google.com.com/">Link To Google</a>

It’s much easier to add ext to a class instead of typing the full onclick-part if you want to trigger the link top open up in a new window. If you already use ext in your CSS, you’ll have to change it of course. This is just a dummy example (eg my version).

· Eric

(Source: pastebin.com)

“Out of the 6 Billion people on the planet, 4.8 Billion have a mobile device while only 4.2 Billion own a toothbrush”

100 Amazing Social Media Statistics, Facts And Figures [INFOGRAPHIC]

That’s just disturbing… and should at least be the other way around.

· Eric

“Nerd? We prefer the term INTELLECTUAL BADASS”

I love that quote. Found it on Pintrest

· Eric

Added recent posts to my Tumblr page

As you can see in the right column, II’ve added some Recent Posts. Appearently not a standard feature here on Tumblr. (Yes, I know about the sh**y looking header, but I’ll fix that one later. ;) )

Anyway, here’s how I did it in case you want it too.

First, here’s a good page I found with an example I used for this: Tumblr recent posts with javascript from mybrainoncode.com.

Assuming you already have jQuery loaded in your head… Add the link to the Tumblr API in your <head>.

<!-- Tumblr API :: Recent Posts -->
<script type=text/javascript src="http://yourtumblrname.tumblr.com/api/read/json"></script>
<script type=text/javascript>
	// Recent Posts :: how many?
	var recent_posts_nr = 6;
</script>

Recent posts..? I’ll explain later.

Code

Now, the code example from the page. I did modify it a bit. Here’s the original code:

<script type=text/javascript>
	const recent_posts_count = 5;
	var tumblr_api_read = tumblr_api_read || null;
	if (tumblr_api_read != null) {
		var recentPostsHtml = "<ul>";
		for (var i = 0; i < recent_posts_count; i++) {
			var url = tumblr_api_read.posts[i].url;
			var title = tumblr_api_read.posts[i]["regular-title"];
			recentPostsHtml += "<li><a href=" + url + ">" + title + "</a></li>";
		}
		recentPostsHtml += "</ul>";
		$("#recentPosts").append(recentPostsHtml);
	}
</script>

Changes

It did work, but some posts turned up as undefined. Those are my image posts. They don’t have a title for their posts, so here’s what I did.

The var url = .....

var url = tumblr_api_read.posts[i].url;

When reading the API, you’ll see url-with-slug. That’s the one I used, so change it into:

var url = tumblr_api_read.posts[i]['url-with-slug'];

Next is var title = .....

var title = tumblr_api_read.posts[i]["regular-title"];

That one stays, but we add and replace the title with the slug if the post title is undefined. After the title, add:

slug = tumblr_api_read.posts[i]['slug'].replace(/-/g, ' ');
title = (title == null) ? slug : title;

In the slug-line, we also replaced the dashes with a space to make it look better.

I also added the title to the title attribute:

recentPostsHtml += '<li><a href="' + url + '" title="' + title + '">' + title + '</a></li>';

The recent_posts in <head>… That one is to make it easier to change, without scrolling down the source code. And I also noticed that when setting this to 8 or more the result differs by 1, so change the first line: const recent_posts_count = 5; into:

recent_posts_nr = (recent_posts_nr > 7) ? recent_posts_nr + 1 : recent_posts_nr;
const recent_posts_count = recent_posts_nr;

The complete code should now look like:

<script type=text/javascript>
	recent_posts_nr = (recent_posts_nr > 7) ? recent_posts_nr + 1 : recent_posts_nr;
	const recent_posts_count = recent_posts_nr;
	var tumblr_api_read = tumblr_api_read || null;
	if (tumblr_api_read != null) {
		var recentPostsHtml = '<ul>';
		for (var i = 0; i < recent_posts_count; i++) {
			var url = tumblr_api_read.posts[i]['url-with-slug'];
			var title = tumblr_api_read.posts[i]['regular-title'];
			slug = tumblr_api_read.posts[i]['slug'].replace(/-/g, ' ');
			title = (title == null) ? slug : title;
			recentPostsHtml += '<li><a href="' + url + '" title="' + title + '">' + title + '</a></li>';
		}
		recentPostsHtml += '</ul>';
		$('#recentPosts').append(recentPostsHtml);
	}
</script>

In your theme

First add the element, and then the code. Script needs to go after.

<div id="recentPosts" class="your_class"></div>

Here’s an image how it looks like in my editor:

CSS tweaks

You can style the list as you need or want, but here are a few notes. To prevent long titles to break into more lines you can use nowrap for the white space, and then make use of the new CCS3 text-overflow. Some browsers won’t be able to use that of course, but the forst overflow will work as a fallback. And when using the slug as the title, the letters are all small caps. You can set the first letter to uppercase, and your good to go.

Parts from my css edits:

#content #right #recent_posts_section ul { list-style-type: none; }
#content #right #recent_posts_section ul li {
	margin-right: 7px;
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
#content #right #recent_posts_section ul li:first-letter {
	text-transform: uppercase;
}

So, there it is - the recent post block. One good thing about using the slug is now we can use the slug to provide nice titles for posts that doesn’t have titles.

· Eric