Twitter widget refresh

I couldn’t find anything in the Twitter Embedded Timelines documentation that would let me set refresh interval so I made my own. At first I thought I could simply reset the iframe’s src attribute, which usually would reload frame’s content. But Twitter’s widget didn’t had src attribute.

I found a solution. It’s really quick and dirty one, but it works. You can get and modify it to your needs. I’ve only tested it with list’s timeline.

Continue reading »

setTimeout with reference to object

The problem

Calling setTimeout or setInterval from an object can be sometimes problematic. The timers are executed outside of your object’s context. You loose reference to your object and can only work with global variables. this suddenly points to window instead.

Solution

I’ve found out that there are plenty of ways to achieve it only after I published this post online. You can use whichever you suits your needs.

  1. using closure
  2. bind(this);
  3. Immediately executing function expression

But first lets see what we’re working with. For all three methods we’ll use the same object, only one function will look different. We’re creating new object of type Person with name Steven and make him say his name after the delay using setTimeout.

// Create new 'class'
function Person(name_)
{
  this.name = name_;
}

// Say whats my name after 2 seconds
// we plug in the reference to `this` person
// with variable named `self`
Person.prototype.whatsMyName = function()
{
  // This one will fail silently with an empty log
  setTimeout(function(){
    console.log(this.name)
  }, 2000);
}

// Define Steven and call him!
var stev = new Person('Steven');
stev.whatsMyName();

Continue reading »

Pixel Sprite Generator

Recently I’ve found this interesting Pixel Sprite Generator. You can create procedurally generated sprites on the fly. It uses ala 2D array of values to draw solid outline, “soft” body or an empty pixel. Provide just one mask and get milions of variations.

I can see it being used in rougelike games, besides procedurally generated levels: enemy sprites, weapons, items, EVERYTHING.

It is written in JS so I couldn’t help but port it over to Haxe!

JS version draws on canvas and Haxe on openfl.BitmapData. Enough talking, go check live example if you’re not yet excited:

Live Example (keep refreshing that thing for new sprites!)

Responsive Tabs

If you have a component with tabs in your non-mobile website you don’t think about “how will those look on smaller screens?” You already know it’s going to look ok but switching between tabs will not feel comfy in most cases. Instead you should wonder “how do I make it work well on mobile?” or “how to make tabs usable on smaller screens?”. Creating responsive tabs is important to make the website usable in every environment.

“Tabs”, how-to

Depending on a number of tabs in your component, making it look and work just like in desktop may not always be the best idea. You can make tabs a little bigger to make them easier to hit with your fingers. Sure, that’ll work on a component with 2 or 3 tabs (with small, non-descriptive captions on them). What if your component have more then 3 tabs or even better – dynamic number of tabs? Predicting the numbers and making silly styling adjustments for each of them is like ignoring a huge hole in your room and stepping over it, everytime you want to get out.

The perfect solution doesn’t need to be a hard one if you start thinking in Responsive Web Design and It doesn’t require any bloated jQuery plugin. While we’re still going to use a little bit of jQuery, It will only be used to switch between CSS classes.

Continue reading »

Scrollable off-canvas navigation in HTML mobile app

There are many different ways to achieve nice and fluid off-canvas navigation in mobile websites. Some simple solutions can be easily implemented in you mobile app without too much of a trouble. The problem comes when we want to create menu similar to those in native apps, like Google+ or new Gmail app. We start to design it on the computers, we put some JS and CSS definitions – everything works fine! By the time we open our app on the phone we realize that something is not quite right… and it get’s even worse on other or older devices.

Imitate native app’s navigation in HTML

On the new YouTube app, we have a combination of a fixed header and off-canvas menu. When we pull out menu, the rest of the containers stays on place. We can easily swipe through the list in menu and swipe it off to hide it.

I wanted to create similar menu, which slides in from left side of the screen when I tap a logo and hide it when I tap it again.

Continue reading »