You can see abstract triangles art everywhere these days. They are on banners, wallpapers, decorative pillows, fliers, tattoos, book covers… Just put a bunch of triangles and some colors and it will look great.
To create this abstract art we need functions for two things: dots and colors.
Continue reading “JavaScript Art: Triangles”
Some time ago I saw some online animated gif creator and thought it could be done in JS instead of Flash. We could easily access webcam from browser with the getUserMedia API. Nice tutorial about this API can be found on HTML5Rocks site.
So, getting image in real time from camera is easy with getUserMedia, but creating animated gif on client side was trickier part. Luckily, someone already made JS lib for that, and jsgif is great solution with really good documentation. All I had to do is to combine getUserMedia API with jsgif lib and I could create animated gifs with my face.
Some time ago I was working on app where for each category we had to assign random color in case that user didn’t choose one. A few day ago I needed to generate random color again. Instead of copy/paste code from one place to another much better is to create re-usable module. Also, this might not be unusual request and potentially could be useful to others.
just.RandomColor is Javascript random color generator in one of hex, RGB, RGBA formats and it can return object with color data or CSS string. It can be used on both, client and server side.
GrooveShark is one of the web services which I’m using on daily basis. Actually, I have one computer which I use only to play music from my GrooveShark playlists, while I’m sitting on couch. But problem is when I want to skip or pause some song. I have to get up because I can’t hit those small controls buttons with wireless mouse from 2m range.
So, as every lazy developer, I’ve tried to make my life easier so I don’t have to move from my couch. That’s why I create this small Greasemonkey script which will show controls buttons over the whole screen. If you have similar problem you should install Bigshark.
Continue reading “Bigshark – larger buttons on Grooveshark”
I like experiment with data visualization on client side. For that purpose, of course, I need some data for development phase. Since that development phase means that something constantly change, I had to find a way to make my life easier. That’s why I wrote a group of JavaScript range functions which helps me to create array of different types and formats of data really fast.
I just had to put them in some namespace, so “just” was good enough. Coincidentally, JUST can be acronym for JavaScript Useful Stuff, so I’ll probably use it more in the future. I’m still looking word for T, so any suggestion is welcome.
There are a lot of different jQuery News Ticker plugins with lot of options that you can use. Do you want to learn how to create one on your own in only 4 lines of jQuery code ?
Idea is pretty simple, take first element from list, apply some disappearing effect on it and on callback attach it to the end of the list.
I always find it interesting to see who from people that I’m following on Twitter follows me back and also to see how those people are related with each others. I was looking the best way to present that visually and presenting connections as dots and put those dots in rings sounds like a good solution to me.
Main idea was to create this to work on client side only. Using AJAX for getting the data, localStorage to store them and SVG for visual presentation. So, this will work only in ‘modern browsers’, such as Chrome 10, Firefox 4 or IE9.
First I had to pull followers and following data for desired Twitter account. Since that Twitter API returns 100 results per request I had to create recursive function to gather all the data. Twitter API allows only 150 request per hour, so if you have more than 15000 followers and following accounts in total, you’ll exceed that limit, but that number of dots and rings will be hardly presented nicely either way.
Also, because of Twitter API limitation I decided not trying to check how my connections are connected between each other. However, that’s really interesting for me and I’m sure I’ll do that in future.
After getting all responses I check how I’m connected with each account. Each account is marked as follower, following or friend (people who follow me and I follow them). Now I got one object and stored that object in browsers’ localStorage. Again, if you have large number of followers and following account there will be a problem since that localStorage limit, for most browsers, is 5MB.
Final step was to create visual part and I choose SVG to do that. Basically, I used simple math to create rings of Twitter accounts. There is no specific rule in which order accounts will be shown. I just place them as dots with different settings (color, radius) for each type of account. I could not resist to add some animation even though it is not really smooth in some cases. You can hover each dot to see more details and clicking will redirect you to Twitter user account.
That part should be upgraded with different rules how to decide which account will be in which ring. Maybe by popularity or some other criteria. Feel free to share your suggestions with me or try to upgrade code by yourself, it can be found on GitHub.