Protoglobe.com

"Ajax" uploads are a hot topic widely asked about on the web, but unfortunately 'actual' Ajax uploads don't really happen using Ajax as much as Flash, Java applets or other embedded programs. Some browsers do support drag and drop file uploads, but you still have to submit the form to actually upload something. Because client-side programs can't interact with your operating system unless you explicitly give permission to use something like those options, it might seem you're stuck with boring uploads. "But that can't be! I see it all over the place!", you might exclaim. Well, yes, you DO see something graphically appealing, and it CAN be pretty user-friendly to be able to upload as many things in a form as you'd like.

"But you just said I can't do that!"

No I didn't. I said you can't UPLOAD files with Ajax. I never said you can't provide the user with more and more upload fields in their form as they fill it out (hiding the ones they've already used). This page explains how, and links to code to help you do it. The strategy involves creating (and then hiding) dynamically-generated input fields as the user clicks a button to add more and more files. Then all of them are uploaded at the time of form posting, which is a completely normal, manageable thing to do.

Found on Ajaxian:

http://mrdoob.com/lab/javascript/harmony/#grid

http://www.andrew-hoyer.com/experiments/cloth

I've been tinkering with the Twitter API in search of some inspiration for some sort of useful "quickie" to develop. I haven't really narrowed it down to a niche or integrated any data on my end yet, but I've created an interesting search tool that lets you browse recent Tweets containing particular keywords and (optionally) within a certain distance of your current location (or any other location that you specify).

... I'm aware, but I'm a little busy. The semester has started, and I'm taking two classes: S512 "Information Systems Design" and S656 "Information Standardization" (basically an XML class). Neither is looking to be particularly stressful, but they do take up some of my time. I've also taken on a personal project upon realization that I actually have quite a bit of free time (which I realize contradicts my afore-mentioned busy-ness) and that I shouldn't gripe so much about not "having" the time to study (human) language when it's really about "making" the time to do it. Therefore, I've been reading Harry Potter 1 very slowly in Finnish. Don't worry, it's not completely random: I developed an interest for personal reasons years ago, took two years here at IU about 6 years back, and then forgot a lot of it.

However the primary reason that I've been distracted from maintaining this blog has been a somewhat relevant reason: I'm developing a new website that I hope to launch over the summer to facilitate the job search process for users from a more... "seeker-friendly?"... perspective.

I've been finding uses for movable objects on the screen for a long time now, ranging from tinkering with in-browser wireframing to a recent interactive resume concept. While working on the latter, I realized that, depending on the browser (read: when using Internet Explorer), I was having trouble maintaining a reliable position of the element at the location of the mouse pointer as the screen scrolls down. I finally got frustrated enough to revisit my moving script altogether and refine it drastically. I've produced this sandbox to demonstrate the concept, and here are a few things to note:

(1) Note that the boxes are both visually, and in code, embedded in each other. In other words, C is in B, and B is in A. Note that moving a box with others inside of it initially moves the concepts as well. However once you move a box outside of its container (though this is a setting that I plan to make optional by adding a paramter to the 'grab' function), it is detached as a child of the container and reattached to the grandparent (as long as the parent isn't the main document element).

(2) There is a distinction between the .offsetTop/.offsetLeft values, which represent the position value within a relative or absolute container, and the getX()/getY() values that represent absolute X/Y (top/left) values from the top of the screen. By keeping track of the position of the mouse when grabbed, the absolute X/Y of the parent element, the offset X/Y of the dragged element, and the current position of the mouse as it is dragged, I can continually update the relative position of the element in order to keep it reliably attached to the mouse (and even taking into consideration the grab point within the element so that it doesnt' jump) in all (or most?) browsers (including the IE8 that I tested it in after seeking the solution).

(3) When an element is dragged out of its parent container, the checkParent() function (which is constantly called during dragging anyway) also accounts for the difference between the absolute offsets of the parent and the new (grand)parent element, eliminating the jump that would have otherwise occurred there as an element were detached.

The code is suprisingly simple once you grab the various values and sort out the math. You can take a look at it here, and you're welcome to use it, but please take the time to credit the code to this site if you do!

I've only had limited experience really using advanced CSS to achieve certain results. I attended Spring <br /> 2008 last summer in Athens, Ohio, and Eric Meyer (CSS god, and author of the best books on the subject) spoke about CSS, but I never really did a whole lot with it after that point that I already had before. Today in class, while the teacher wandered around and spoke with people about their projects, I decided to look at the W3 documentation as well as this page.

Here's my sandbox.

It's pretty cool how easily you can select a pretty handy variety of very specific things based on their properties, class names, first-child/letter/line occurrrence, and so forth. You can even append new content at the beginning or end of the content of a selected tag using the :before and :after pseudo-classes. Perhaps pairing this feature with :hover elements could allow for CSS-based menu generation, though I had addressed a different solution in a previous post.

I haven't posted anything in a long time because I've been very busy juggling work, a C#/.NET programming class with a lot of deliverables, and a stats class with a lot of cramped deadlines near the end of the semester. However I've been asked by a job that I'm applying for to come in for a third interview to give a presentation on a hypothetical workflow scenario. I'd like to present something broader-reaching than a single hypothetical context and then discuss how this broad strategy might apply to their particular scenario, so I figured that if I was going to work through something like that, I might as well blog about it.

Here it is. (PDF)

(Note that one of the slides is a joke.)

I have to admit that I've been so taken with learning through building from scratch that, up until recently, I gave frameworks relatively little thought. My interest finally took hold when I tried to come up with a simpler way to manage date- and otherwise-ordered content in subfolders without sacrificing the same back-end functionality and templates that I'm used to using. This resulted in the framework that I discuss in a previous post.

Similarly, I've also written almost all of my own JavaScript from scratch, relying only on either existing samples to guide my coding, and perhaps stealing the occasional snippet (but only if and only if I understood what it was going on) that really wasn't worth recoding myself. But after visiting the (unfortunately relatively disappointing) Spring <br /> conference again this past summer, I decided to tinker around some with jQuery (which they offered in an oversimplified workshop). It's interesting in that it has a particularly nicely trimmed-down selector syntax, meaning that you can quickly refer to things like "document.getElementById('x')" by just saying "$('#x')".* It essentially shortcuts many of the tedious tasks involved in selecting elements by class name, tag name or ID, and also allows for quick CSS property reading and reassignment. In addition to that, it features various animation tricks that I have yet to really explore, such as expanding boxes, navigation effects, drag and drop, and so on.

But again, as I muddle through this particular library, I find myself wondering if I wouldn't prefer to borrow some useful conventions from it and then produce my own more modular set of Javascript classes and functions. So perhaps as I work towards building a 'Resources' section to add to the tabs above, I'll begin to package what I've already done in a nicer format and distribute it along with some notes and instructions for implementation.

Follow-up:
It's interesting to note that jQuery's functionality revolves around a single function (guess what it's called: "jQuery()") that selects DOM objects matching a CSS expression (first argument) within a context (second argument: optional). With that in mind, you're not necessarily selecting DOM objects, but rather a group of objects grouped into a jQuery-specific object to which certain jQuery methods and properties can be applied. This was pointed out by a friend, whose emailed comments are appended below:

However, it is important that $('#x') is NOT a DOM object, it is a JQUERY object, and therefore it is not equal to getElementByID('x'). The outcome is, it has its own methods and properties (and really cool ones), and lacks of some important methods and properties of DOM objects. It is easy to forget about it when you writing the code that includes both JQuery and core Javascript, and results can get messy.

Assuming you select a single object using the syntax example that I gave above - $("#x") - its use shouldn't preclude the use of normal methods and property revaluing that would apply to a DOM object, but this is certainly an important logical distinction to make. A few notes (linked to sources) that I've read since receiving this comment to help myself clear up what's really going on:

(1) This $ method accepts a css-like selector as argument, so if you want to select a specific element by its id you have to use the hash: $("#myElementId") returns a reference to the DOM element boosted by jQuery. We can say it's a shortcut to the usual way of getting a DOM element document.getElementById("myElementId").
...
It took me a while to understand why I was wrong: the $ method gives a jQuery object that is always an array of Elements, even if the docs say otherwise.
...
So to the get the real DOM element you have to use $("#myElementId")[0] or the more friendly $("#myElementId").get(0)

(2) The topic of optimization has come up a number of times in the jQuery mailing list. jQuery’s DOM traversal is powerful and easy, but it can sometimes be slow as well. As with any JavaScript library or framework, the helper methods will be slower than the plain old JavaScript (p.o.j) methods. Nevertheless, if we keep in mind the jQuery’s speed hierarchy, the speed difference between jQuery and p.o.j. will often be negligible.

Considering I wrote this blog myself (the code, I mean), it lacks a few things that other blogging systems naturally include unless I explicitly realize I need them and include them. Permalinks are one of those things. Until now, a link to a specific entry has looked something like this:

http://protoglobe.com/weblog/?action=view_weblog&weblog_entry_id=83

But that's not very search-friendly, nor is it easy on the eye, so I've added a line of code to my .htaccess file:

RewriteRule ^blog/[0-9]{4}/[0-9]{2}/[0-9]{2}/([0-9]+)[^0-9]* http://protoglobe.com/weblog/?action=view_weblog&weblog_entry_id=$1 [QSA,P]

Anything structured like /blog/yyyy/mm/dd/id(/...) will reroute to the blog entry ID indicated in the URL (actually ignoring the date and any leading 'permalink' text with underscores, which will just be autogenerated for visual recognition. You can write anything you want after the /id/ portion and still get the same entry.

So now links like this should work:

http://protoglobe.com/blog/2009/09/30/83/whatever

Listen to a brief talk (paired with some entertaining slides) here.

And here's a link to their business on the web.