WebDev3000 » JavaScript http://www.webdev3000.com web design, freebies and more Tue, 20 Dec 2011 22:07:46 +0000 en hourly 1 http://wordpress.org/?v=3.3 Juitter http://www.webdev3000.com/juitter/ http://www.webdev3000.com/juitter/#comments Thu, 30 Jun 2011 11:50:44 +0000 Codrut Nistor http://www.webdev3000.com/?p=984 While messing with Twitter itself on a regular basis is nothing but a huge waste of time (my personal opinion, of course, you’re free to disagree with it), I have to admit that a lot of the messages sent by Twitter user may lead to useful information. Great, but how can one avoid using Twitter, yet gain access to the goodies that can be found with its help? Without too many doubts, I can say that the answer is not a single one, but Juitter can be one of the possible ones, so… let’s get to it!

Completely free to download and use (donations are welcome, anyway), Juitter is a highly customizable, lightweight and fast jQuery plugin that allows you to easily put live Twitter content on your site. According to its official page I just mentioned, Juitter is smaller and faster than other Twitter widgets, offers content filtering, allows you to show tweets from/to a user or containing a certain word, multiple user/word search is also possible, results can even be filtered based on language and, in case you were wondering, you can add your own stylesheet to make it look exactly as you wish. Not bad at all, right?

Developed by Rodrigo Fante, the Juitter jQuery plugin works with all major browsers on any platform, as long as Java is running as it should. Oh, yeah – if you want to know about its licensing model, keep in mind that Juitter comes covered by the terms of the MIT license. That’s all, folks! ;)

… but, in case you didn’t figure that out yet, the official site of this piece of code is also its demo, since it uses it to display those live Twitter results. Bingo!

Incoming search terms:

]]> http://www.webdev3000.com/juitter/feed/ 1 OpenJS Grid http://www.webdev3000.com/openjs-grid/ http://www.webdev3000.com/openjs-grid/#comments Thu, 26 May 2011 21:18:29 +0000 Codrut Nistor http://www.webdev3000.com/?p=949 I hate statistics. I think I said that before, but I must say it again. It’s my hate for the math behind it, not anything else, since I must also admit that a lot of useful information is contained in various databases and tables. When it comes to displaying them, things can get rather ugly… but you can also step into a beautiful world and show records nicely shaped into a user-friendly datagrid, all thanks to OpenJS Grid, today’s topic.

To make a longer story as short as possible, I will say that OpenJS Grid is – at least according to its official page – “the easiest jQuery Grid ever,” its current version being labeled “1.7″ and offering a bunch of interesting features, including inline editing, the ability to show or hide row numbers, various data filtering methods, even CSS3-powered theming support!

Unfortunately, it seems that the theming part only works in Firefox and Chrome as it should, since I noticed some strange display issues in Opera and IE 8. Other than that, it is supposed that OpenJS Grid requires jQuery and it’s compatible with all major browsers but, as I just said, it seems to be “more compatible” with some than others… so please feel free to drop a comment and enlighten me: what seems to be wrong with this piece of code in Opera or IE? Maybe it’s just something wrong on this side, after all… ;)

Incoming search terms:

]]> http://www.webdev3000.com/openjs-grid/feed/ 0 Leaflet http://www.webdev3000.com/leaflet/ http://www.webdev3000.com/leaflet/#comments Tue, 24 May 2011 12:14:40 +0000 Codrut Nistor http://www.webdev3000.com/?p=946 In case you missed the big news, the Apocalypse was supposed to drop by this last weekend. Since it seems everyone missed it, I guess we need a map now to find it. That reverend-liar-bastard surely disappeared to continue his quest to find it and show it to the world… so I can be sure about one thing: he’s using a map. Hahaha… but it’s not funny, considering that the idiot received donations estimated to be around (in fact AT LEAST) $70 million!!! Well, let’s leave this shit aside and move to the maps, the only part of the story above that makes any sense, as well as Leaflet, today’s maps-related topic, shall we?

I know this doesn’t look good to many people and I am not crazy about it, either, but one of the best way to describe a piece of code is, at least sometimes, to use the description coming from the people behind it, so here’s that one for Leaflet: “Leaflet is a modern, lightweight BSD-licensed JavaScript library for making tile-based interactive maps for both desktop and mobile web browsers, developed by CloudMade to form the core of its next generation JavaScript API.”

Freely available and very easy to use, Leaflet is both extensible and modular, offering support for quite a few features, including drag panning, animated zoom, double-click- and scroll wheel-powered zoom, image overlays, even hardware acceleration on iOS, smart polyline/polygon rendering and many others. A detailed list of features can be found right here, while the examples are waiting for you on this page.

At last, I think I should add a few words about browsers support, because this part looks awesome: Firefox 3.6+, Chrome, Safari 5+, Opera 11.11+ and IE 7–9 on desktops, while mobile platforms running Safari for iOS 3/4+ and WebKit for Android 2.2+ browsers shouldn’t have any problems with Leaflet, either. That’s all for today, folks! ;)

Incoming search terms:

]]> http://www.webdev3000.com/leaflet/feed/ 1 WebApp.Net http://www.webdev3000.com/webapp-net/ http://www.webdev3000.com/webapp-net/#comments Thu, 19 May 2011 18:00:43 +0000 Codrut Nistor http://www.webdev3000.com/?p=941 iPhone application developers, get ready – this one’s for you! Hate it or love it, the iPhone is a real gold mine for developers too, not just for Apple, the carriers and those into making accessories for it, so I decided to find some nice iPhone-related piece of code to expose here today, eventually bumping into WebApp.net… so here it is in all its glory! ;)

As far as the official mumbo-jumbo goes, WebApp.Net is “a light weight, powerful javascript framework taking advantage of AJAX technology.” Just like other similar products, WebApp.Net comes packing a full set of components that are ready to be used to ease development of advanced mobile apps and, since it’s client based, it can be used with any of the server side technologies you may think of, including PHP, ASP.Net or Python, but not limited to them, of course.

Why WebApp.Net? According to its homepage, “WebApp.Net was the first framework to demonstrate the new full screen capabilities of the latest firmware from Apple for iPhone and iPod Touch” and, if that’s not enough, I should also add that “free” thingie to the equation. Of course, donations are always welcome, so…

… no matter if you’re willing to pay for a free thing or not, if you’re an iPhone developer trying to get a better framework to get the job done properly, WebApp.Net may be your lucky shot. Good luck! ;)

Incoming search terms:

]]> http://www.webdev3000.com/webapp-net/feed/ 0 tooltipsy http://www.webdev3000.com/tooltipsy/ http://www.webdev3000.com/tooltipsy/#comments Tue, 17 May 2011 14:00:47 +0000 Codrut Nistor http://www.webdev3000.com/?p=934 Need a hand? Hey, this week is just taking off, so I see nothing bad in asking for a bit of help, even if it comes shaped as a tooltip. This is not necessarily about software, since I’ve seen a lot of websites that really needed some tooltip-based assistance to make your life easier… so I am sure tooltipsy will find its way straight to the tools collection of many Web designers out there.

The story goes like this: tooltipsy is a jQuery plugin that comes under the terms of the GNU GPL version 2 and – at least according to Brian Cray, its creator – provides “extremely efficient tooltip functionality,” while giving you complete control over all that’s involved in this equation – CSS, position and animation. Before deciding anything, be sure to take a closer look at the samples – just visit this page and hover your mouse cursor above the “Show me” buttons. Well documented, completely free and highly customizable, tooltipsy requires jQuery and should work with all major browsers – at least as long as Javascript is enabled, of course! ;)

Other than the above, I guess I should also add a link to tooltipsy’s GitHub page. Well, that’s all of it for today. See you next time!

Incoming search terms:

]]> http://www.webdev3000.com/tooltipsy/feed/ 0 G5 http://www.webdev3000.com/g5/ http://www.webdev3000.com/g5/#comments Tue, 10 May 2011 08:37:44 +0000 Codrut Nistor http://www.webdev3000.com/?p=921 I don’t know about you, but “G5″ sounds like an assault rifle to me – in fact, I am almost sure you have to find some military-related meaning for it, but since we’re supposed to be talking about webdev stuff here… let’s move to the G5 framework, shall we?

Today’s main keywords should be HTML5, CSS3, PHP, jQuery front end, framework and, best part of it all, free. G5 is free for personal and even commercial use as long as humans.txt remains unchanged and placed right inside the index head. If all these are not enough to make things clear, let me add that G5 is a framework that can help you to easily build PHP-powered HTML5 websites making use of resources like Modernizr, CSS3 Pie, jQuery and others, providing excellent compatibility even with older browsers, as well as a bunch of useful features, including GZip support, robots.txt / robots meta, shorthand CSS with some basic reusable classes, sticky footer and more.

G5‘s default design provides a 940 pixels total content width in a “F” shape, coming with a bunch of popular items like Orbit, Reveal or Tipsy. This freely available framework requires only PHP and, obviously, one of those major browsers – seems we’re getting more and more of them with each day, don’t you think? Anyway, if you encounter any problems with G5, don’t be shy and get back here to drop a comment – as long as it’s not spam or nonsense, it will be our pleasure to publish your thoughts. Thank you in advance! ;)

Incoming search terms:

]]> http://www.webdev3000.com/g5/feed/ 0 Sencha Touch http://www.webdev3000.com/sencha-touch/ http://www.webdev3000.com/sencha-touch/#comments Thu, 05 May 2011 08:50:00 +0000 Codrut Nistor http://www.webdev3000.com/?p=919 Not too long ago, we talked about mobl, “a new free and open source language designed specially to speed up building mobile applications.” Well, today we’ll move to another similar piece of code, namely Sencha Touch – after all, it’s incredible how popular became smartphones and mobile Internet in the last few years, so talking about such things isn’t just a good choice – it’s a must!

The official mumbo-jumbo goes like this – “Sencha Touch allows you to develop mobile web apps that look and feel native on iPhone, Android, and BlackBerry touch devices.” This product’s official home looks great and, according to it, Sencha Touch is “the first HTML5 mobile Web app framework,” offering PhoneGap compatibility and allowing you to distribute your apps via Apple’s App Store or the Android Marketplace.

While Sencha Touch is freely available, support comes with a price – details on the available plans can be found here. If you ask me, I think support is pretty expensive, but since popular mobile apps sell 100,000 licenses really easy, I don’t think that’s a problem – only that some kind of free support for beginners on a budget would also be great…

As I was just saying, Sencha Touch 1.1.0 is freely available for open source projects, begin released to the public under the terms of the GPLv3 license. To check the demos currently available, just click here – TouchSolitaire is my favorite, by the way. Well… I guess that’s all, folks! ;)

Incoming search terms:

]]> http://www.webdev3000.com/sencha-touch/feed/ 0 vintageJS http://www.webdev3000.com/vintagejs/ http://www.webdev3000.com/vintagejs/#comments Tue, 03 May 2011 06:08:33 +0000 Codrut Nistor http://www.webdev3000.com/?p=917 A few days ago, I read an article about the closure of the last factory in the world still making typewriters (I think we’re talking about the last mechanical typewriters manufacturer, in fact). If we leave aside the fact that it’s amazing that the factory was still in business back in 2009 or 2010, there’s something nobody can deny: writing using a typewriting machine is something unique that computers will never succeed in replacing. Sure, you can get the job done faster and easier, but you won’t get the same feeling while doing it. In a way, it’s like driving a 50s sports car – while owners of cheap, mass produced contemporary vehicles will go speeding by, they will never feel the same thing you get from driving your treasure. Anyway… I guess it’s the time for vintageJS already, isn’t it? :D

As you can see above, I got a picture of myself took way back in 1922. Hell, no – my grandparents were all kids back in those days, so… this takes us to the purpose of this piece of code known as vintageJS, of course: upload your images, apply a custom retro, vintage look to them by messing with a few controls, enjoy the result – ta-taa! To make everything even better, using vintageJS is absolutely free and, if you’re not happy with it, you can grab the source and play with it (GPL license, jQuery/HTML5 code – sweet!).

With vintageJS, you can upload a photo to the server, then mess with its properties by easily adding sepia, green or grayscale effects, not to mention the vignette or the viewfinder controls – nothing out of this world, after all, but surely some tricks that send your images back in time in a matter of minutes.

At last, I guess I should also add a few words on compatibility… but since it’s all about Javascript and HTML5, I believe that every major browser should be able to handle vintageJS. Anyway, if you encounter any problems with it on a certain software/hardware setup, please don’t be shy and drop a comment below, all right? Thank you in advance for that & bye-bye for now!!!

Incoming search terms:

]]> http://www.webdev3000.com/vintagejs/feed/ 0 Skitter http://www.webdev3000.com/skitter/ http://www.webdev3000.com/skitter/#comments Thu, 21 Apr 2011 10:29:05 +0000 Codrut Nistor http://www.webdev3000.com/?p=910 Online image galleries that also offer some cool animations when moving from one picture to another never get old, don’t you think? Sure, some people may say that watching slideshows instead of checking a bunch of thumbnails and going for the thing you want to see is a waste of time, but when it comes to slideshows, there are plenty of pieces of code to check out, so Skitter fits in really nice into this story, if you ask me… ;)

The jQuery plugin known as Skitter is freely available, looks great and enables virtually anyone to turn unordered image lists into slideshows, offering quite a few animation types, including cubes, bars, fade effects, and so on. The options available include animation particles velocity, label display on/off or slideshow timing, not to mention that each slide’s animation type can be mentioned as a class name, allowing for easy use of multiple animation types straight inside a slideshow.

As you probably figured out by now, Skitter requires jQuery and works with all major browsers… or at least that’s what is supposed to happen, since I will be honest and confess that I wasn’t able to take it for a spin using all those mobile and desktop browsers currently available in the wild, but I am sure you’ll be so nice to drop a comment below and let us know about any compatibility issues you may encounter, right? Thank you in advance and… that’s all, folks!

Incoming search terms:

]]> http://www.webdev3000.com/skitter/feed/ 0 mobl http://www.webdev3000.com/mobl/ http://www.webdev3000.com/mobl/#comments Thu, 24 Mar 2011 09:32:59 +0000 Codrut Nistor http://www.webdev3000.com/?p=888 This entire mobile Internet revolution we’re going through seems to be moving faster than the programming/software worlds, but I am sure they’re already catching up. After all, there has been enough patching up of old stuff so far, the time has come for new languages and technologies to jump forward into the spotlight and mobl, today’s subject, is one of them.

While most of the widely used programming languages and the dev tools needed to turn them into usable code don’t come for free, it’s great to know that mobl is more than just free – this one’s an open source language and, in case the name doesn’t say it all already, you should know that its purpose is to speed up the creation of mobile Web apps.

As you can see here, mobl has a JavaScript-like syntax that’s pretty easy to learn and turns instant debugging of entire apps from dream to reality. In case you’re wondering about the IDE coming with it, you should know that mobl doesn’t come with such a thing, running as a plugin under the freely available Eclipse IDE. Excellent!

The idea behind mobl is pretty simple – its compiler converts the code into HTML5, CSS + JavaScript, delivering output that’s compatible with Webkit-based browsers like the ones available on iOS and Android, WebOS, not to mention Safari or Chrome. Unfortunately, there’s no support for Opera or Firefox for now… but everything seems great if we forget about that part, so why not take a closer look at the demos now? ;)

]]> http://www.webdev3000.com/mobl/feed/ 1