I’ve spent my spare time during the summer working on a redesigned and renamed update to PasteShack, with some additional new features. The final product is now up and available at pasteboard.co. The biggest new feature is that you now can use Drag & Drop in addition to pasting in images from your clipboard.

I’ve also put work into improving the upload process. To speed things up for you, the web app silently starts preuploading the image as soon as it is inserted. When you click to upload the image, the server sends the file over to the cloud and gives you your link almost instantly. There’s also an upload progress bar for those cases when the image haven’t had time to pre-upload.

The back-end is powered by Node + Express and the front-end is written in HTML, LESS and CoffeeScript. I’ve enjoyed working on this project a lot and the user feedback so far has been great, I definitely plan to keep working on it. For anyone interested, the source code for the app is available on Github for you to learn from and contribute to.

I recently started seeing data in my Google Analytics from two pages that aren’t mine, which is something that usually happens when someone copies your HTML source code without paying much attention. The traffic data assumes that the root URL of all page hits is yours and therefore hides it, but searching for the relative path on Google quickly uncovered the perpetrator.

To my surprise, it was the Turkish website of LG Electronics that was using my Google Analytics tracking code. On top of that, they were also hotlinking to one of my locally hosted copies of prefixfree.js, which I’m not even sure they’re getting any use of. One would think that a big company such as LG would have web developers that knew better.

So, seeing that they’re hotlinking to one of my script files, I decided to have some fun with cross-site scripting. To not get into any trouble, I figured I should stay away from trying to break the site, although there would have been lots of fun things that I could have done (like inserting and playing around with fool.js). But what if I could at least use the injected script to prevent the Google Analytics code from sending data to my account?

Read More

Earlier today I discovered an interesting way to keep (store) a CSS style on an element using CSS transitions. This is probably best explained with an example, so here goes:

As far as CSS only solutions go, there are two other tricks that can be used to achieve this similar behavior: using either the :checked or the :target pseudo selectors. In this post, I’ll show you my CSS transition technique used above, followed by a slightly cooler example that I’ve been working on.

I released a jQuery plugin a couple of days ago and I haven’t had time to write about it here until now. The plugin is based on a slightly crazy idea, but it has been getting some good response on Forrst and Twitter (my follower count has tripled quadrupled since the release).

Most people seem to think that it’s a pretty cool plugin, but struggle in coming up with good practical uses of it. It might not be of much use on any “serious” website, but I think it can create quite a nice effect on personal portfolios and presentation pages, if used creatively.

Read More

Tweet buttons are a great way to spread your content to the public. Twitter provides an easy way to include their button on your site, but this comes at the cost of not having a very customizable style.

The button is served inside an iframe, which restricts CSS and Javascript access. This can make it hard to get the button to fit in with the rest of the design. What’s even worse is that while the button wrapper is set at a fixed width, the counter inside isn’t. Once the page starts getting more tweets and the counter increases, the width of the button expands, but since the parent iframe has a fixed width, it’s impossible for us to know the actual width of the button.

Something that can also be seen as an issue is the size (46.5 kB) of the widget.js script that Twitter injects with the default button. In most cases though, this script file should already be in the visitor’s cache.

Read More

Out of curiosity, I started coding on a script to get the accent colors of external websites, kind of like Chrome does it in the most visited sites thumbnails. The script can be used to automatically give your outgoing links appropriate colors and make them look more interesting.

The script works by calculating the dominant color of the site’s favicon, which usually works pretty well to determine the web page’s signature color. I’m using a canvas object to analyze the pixel data, which restricts the browser suppport to more modern browsers. It would be possible to widen the browser support by parsing the image file data directly, but considering that favicons come in many different formats, this would require too much work and code for such a small visual effect.

CORS is used to connect to getFavicon, a service by Jason Cartwright that retrieves the favicon of any given URL. There is also a PHP proxy file that you can use on your own server as fallback for browsers without CORS support.

I’ve created a pretty demo page for the script, check it out below.

Demo

The system clipboard is a feature that most of us heavy computer users probably couldn’t survive a day without. While it’s mostly used for copying and pasting text, images can also be stored in the clipboard, by for example using the print screen key. Today I want to share with you how you can access these images with a bit of Javascript code. This works in modern versions of Chrome and Firefox, but the technique differs a bit between them.
Read More

I’ve been trying out different things that you can do with the CSS mask property lately. With a CSS mask, you can mask or clip any element to a desired shape. The mask is either a PNG image, or an SVG image.

I coupled this with the CSS transform and transition properties, and came up with a pretty cool concept for an image gallery.

I’ve put together a demo for Chrome and Webkit nightly builds. Firefox also supports the CSS mask property, but doesn’t seem to play well with rotated masked images, so I’ve only used -webkit prefixes for this demo.

I’ll run through all the different steps in making this gallery wheel below, starting with the markup.

Read More