Browsing posts in: development

QuickAutoComplete

I often miss autocomplete feature of IDEs while on the web. I couldn’t find anything so I thought may be I will make something on my own. So here is what I have come up with over the past few days:

Features

  • The interface should not intrude user at all if he wants to type without using the feature
  • The interface is turned off temporarily (till next word) by pressing ESC once, press twice to deactivate, press again to reactivate
  • Press DOWN for next suggestion, UP for previous
  • Press TAB or ENTER to accept a suggestion
  • … or just press RIGHT as you would have if it were a normal selection
  • Dictionaries are configurable and numerous. Takes JSONP sources (type=store), webpages (type=page) and current pages (type=self).

A sample initiation:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="/assets/closure-library/closure/goog/base.js"></script>
<script type="text/javascript" src="js/jquery.caret.1.02.min.js"></script>
<script type="text/javascript" src="js/jquery.caretposition.min.js"></script>
<script type="text/javascript" src="js/bin/qac.min.js"></script>

<script type="text/javascript">
  goog.require('goog.structs.Trie');
  goog.require('goog.structs.PriorityQueue');
  var dicts = [
    { type: 'store', url: 'js/words.php?jsoncallback=?', weight: 1 },
    { type: 'self', weight: 2 },
    { type: 'page', url: '/', weight: 3 }
  ]; // Define dictionaries to use.
  var qac = new QAC("div.log table tbody", dicts); // Load QAC object.
  qac.listen("#tryarea"); // Start listening to user input.
</script>

I wanted to actually make a chrome extension but I couldn’t design it in a way that will allow me to add HTML/text to webpages without the webpages themselves sniffing them away resulting in user data being breached without their permission. So I will just upload the scripts that I have written. May be someone can suggest me a way to do what I originally intended to do.

The code is available on Github and is licensed with MIT License.


The Animated Quest on the Web

Okay, animations on web is hard. Flash is proprietary. Neither do I own Adobe Flash neither do I wish to learn ActionScript at the moment. Doing animations from scratch on your own using plain JavaScript is tricky. My requirements are simple: I want to move clouds, slowly and elegantly.

 

There are many open ways to accomplish animations on web these days:

  1. Animate on element CSS properties using JS. You can use Jquery animate or its equivalent in those dozens of JS libraries.
  2. Use CSS3 transitions: they are prettier but they are new and not as ubiquitous as the first option.
  3. Raphaël.js: Oh good lord. I love this library! It uses SVG animations.
  4. Canvas! Okay doing this is not as easy as any of others. Where nothing else works, this will.

My problem: I want slow animations. This means that Option 1 and Option 3 cannot be used. For translation, these solutions use positions. Unfortunately, browsers require them to snap the values to nearest integers. This results in jerky movements, especially for cases like mine, I am moving an element 300 pixels in 60 seconds. That’s way to slow for these kind of solutions. Here is an example of the jerky movements.

Well, this leaves me with two choices: CSS3 transitions and Canvas. Both do subpixel animations. Results, I will post as soon as I have some.