#CanvasExperiments – first experience with canvas

For my university web module, I had to include a canvas experiment. I haven’t really played around with canvas before so this was something new.

And my conclusion: CANVAS IS AMAZING! Seriously.

I wrote a simple game in canvas. The aim is to destroy the ball. As you click on the ball to destroy it, smaller balls appear. Destroying the smallest balls, finishes the game! Play NOW!

I wrote another little script to draw gradients in canvas. This was fun. By clicking on any part of the gradient you can change the page background. I used this script along with the game to change the colours of the balls while the game in in play. Have fun with it!

#Animation – Making a simple equalizer gif in Photoshop

Did you know you can create animations in Photoshop? I mean, you’re not going to create the next Toy Story using just Photoshop, but still, you can create pretty little gifs and much more. I love equalizers. Equalizers are cool and eq animations, even cooler. So I was looking to create a simple equaliser animation of my own, when I came across animation with Photoshop. It will end up looking something like this… equalize_lq

To start of, I created a single tile and filled it with #ff5f44 (the theme colour of the website). You can fill your tiles with any colours you like and also apply pretty patterns / gradients / overlays, etc. I the created the six layers by copying and pasting the tile as follows. Each layer should be an individual Photoshop layer.

Then copy and pasted the layers from 0 to 5 and back down to 1. This is so that when the layers are animated, and the animation looped, it forms a continuous animation by looping through each layer and showing a continuous equalizer.

To animate the layers, click on Window -> Animation and an animation panel appears near the bottom of the interface.

Click on the little icon near the top right of the animation panel and click ‘Make Frames From Layers’ to create all the frames, quickly.

You should now see all the frames. Each frame has a frame duration, in seconds, written under it. Select all the frames and change the duration to 0.1 seconds.

frame_duration

equalizer_save Click File -> Save for Web and Devices, and select GIF as the file format. Set Animation Looping Options to Forever and save your beautiful new equalizer.

You can play around with different colours, gradients, overlays and even images for the equalizer tiles. You can also have a lot more frames, change frame durations, etc. I just needed a simple equalizer for a gif icon. I created a 1794 x 664 gif, which I’m going to resize down to just 81 x 30.

Turn off the lights while watching videos…

While working on a website recently, I was looking for solutions to “turn off the lights” while watching videos. I found two decent solutions. One was based on a jQuery script while the others were a set of browser plugins.

I needed something which didn’t rely on any javascript libraries, worked within the website and was light!

To use this solution simply add the following code to the <head> section of the page and then use the onclick=”lightSwitch();” event on any supported HTML tag and add an empty div with id=”shadow” anywhere on the page!

Vied the demo!

<style>
div#shadow {
        background:#000;
	filter: alpha(opacity=70); /* internet explorer */
	-khtml-opacity: 0.7;      /* khtml, old safari */
	-moz-opacity: 0.7;       /* mozilla, netscape */
	opacity: 0.7;           /* fx, safari, opera */
	z-index:9998;
        width:100%;
       position:fixed;
       top:0;
       left:0;
       height:0px;}

span.light-switch{cursor:pointer; z-index:9999;}
</style>

<script type="text/javascript">
function getDocHeight() {
    var D = document;
    return Math.max(
        Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
        Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
        Math.max(D.body.clientHeight, D.documentElement.clientHeight)
    ) + "px";
}

function lightSwitch() {
if (document.getElementById('shadow').offsetHeight == 0){
document.getElementById("shadow").style.height = getDocHeight(); }
else { var h = 0 + "px";
document.getElementById("shadow").style.height = h; }}

</script>

#Facebook – How to get rid of the Facebook timeline

For all you timeline haters out there, this is so far the best way to get your old Facebook profile view back!

It’s a chrome extension. So obviously it only works on Google Chrome! This chrome extension will get rid of the timeline for you and bring back your old profile, BUT this change won’t be seen by all your friends, etc. It’s all aesthetics, but worth a try for all you timeline haters!

Click here to go to the extension download page!

#NobodyCanFixIt – a new concept!

I haven’t had the chance to write blog posts recently as I’ve been working on a new section for the website. So I came up with an idea of having an open Q&A section where people can ask questions and posts requests and I’ll answer it for them. The section is finally up and I need some beta testers for it. So if you’re interested in testing it out and get exclusive early access then find me through the stalk me link on the left or email me@mansimransingh.com

Mr. Nobody

Anyway, the whole idea was sparked when I realised that a few of you come to me for tech related problems. Sometimes different people come to me for the same problems. So I decided to have an online database where I will post all solutions on how to fix things, or how to access certain features or just about anything to do with tech that you request.

I decided to call this ‘Nobody can fix it’ and created a character Mr. Nobody ;)

So if you’d like to beta test the new section then contact me NOW !!

#BBM – How to read BBM messages without notifying the sender

One of BlackBerry Messenger’s great features is the notification system. Yes, the small tick with the ‘D’ or ‘R’ next to it telling the sender that your message has been Delivered or Read by the recipient.

We’ve all had times when we do not want to reply to the message straight away. But you’ve read the message. So the sender knows you’re not replying, on purpose! They’re gonna hate you. They’re gonna think there’s something wrong with you. The same old ‘why didnt you reply to my message?’ question will pop up in the next question. I mean it was all good with text messaging where you could just say ‘o sorry, I didn’t get your text’ or ‘I didn’t read it’; but these pathetic excuses don’t work with BBM messages. Your sender knows that the message was delivered, in fact they even know you read it because their little tick next to the message had a ‘R’ written next to it.

The Read and Delivered status

So how to read the message, without having that ‘D’ status change to ‘R’.

To put it simply: Chat History.

Yes.

You must ‘Save Chat History’. Yes that must be enabled for you to sneakily read the message without notifying the sender. What you do next is simple. When you receive a new message, just View Chat History for that contact and open the most recent chat history. There you will see the message and you can happily read it.

This way it will never inform the sender that you have read the message and you won’t be pressured into replying straight away!

Have fun. Stay sneaky.

Like this post? Please click ‘Like’ below!!