Ok. So after
bildrCode is in alpha. I know, I know. It’s probably a lot to think about. You have been reading about this for such a long time, and it felt like it would never happen, but it’s true.
So… Without further ado, Lets see a video!
What’s been going on in the world of Adam as of late?
Well you saw a few days ago that I posted an early stage of the bildrCode front end, but I didnt really give you much info on that. I have actually made a good deal of enhancements on this since just a few days ago.
This front end is the part most users will actually use and see when they encounter bildrCode. This is the client end, the part that makes the code so available, and easy to find. This front end is a portal to the real bildrCode that can be embedded anywhere. This portal as seen in my last post was inserted with just a single line. That single line automatically builds this into the site where users can see and copy the code from a project. (as well as download the project if the user was logged in) – These will be placed in the wiki to correspond with the sensor (or other electronic part).
This portal was actually ended up being dumber than I ever thought it would be. As in… when I tried to make this before, it ended badly because I was trying to make it too complex. I wanted the system to only grab what the user needed at that time. But for many reasons, it wasn’t going to work as I would like. So this now actually takes all the code from all the modules in a project and places them together on a list. So if you select a file, it just scrolls to that file.
The addition of code highlighting (changing the color of the code text to match its function) actually takes a long time to render, and some of the portals where taking upwards of 10sec to render every time the page was loaded. This was obviously not ok, so the system actually creates a cache file the first time it is rendered, and is now under a third of a second to render the same thing.
But this gets bilder one step closer to being able to launch later this month (cross my fingers)
A part of bildrCode has been opened up and made available as open source. The code I wrote to allow of tab indents can now be found/ downloaded in the mootools forge. My mooTools class called mooIndent will hopfully come in handy for anyone needing this kind of functionality in your site.
Putting this up on github (required to use the mootools forge) was sadly hard. There is just too much special knowledge needed to make it work correctly. But after 2 weeks (just poking at it here and there) it’s there and ready for you to use. (i know, i know… it kinda specialized)
As many of you know, Matt Cottam of Tellart was my mentor while at RISD. I worked with Matt for over a year and a half on may projects. And he was nice enough to hire me for an inter position one summer… The same summer I was learning actionScript for my multi-touch table. That Summer Tellart + Zango worked to design a beautiful new site for tellart. After all the design was done they allowed me to work on the programming of it in flash. I actually did quite a bit of it, but then had to leave to go back to school before it was finished. After I left, I think they noticed how bad some of the code was, and redid most of. Though I did see some of my code in there latter (very little). – That was summer of 2008.
Fast forward to spring 2009. Im reading the Mootools Documentation and found a class I thought I could have used to re-create the site in JavaScript. It worked. In about 50 lines of code I had made a mock-up that functioned very similer to original. It only took me a few hours. I sent it over to the guys at tellart to show them it could be done if they ever wanted it to. But why?
<rant>
So here is my flash rant. I love flash and ActionScript. But not for making web pages. 90% of the time flash is used on a site, it could have been done with out it. But many who say “Who cares?”. I do. And you should too.
Flash ruines page searchability, navigation, SEO, and a lot more. Not to mention that poorly done it is a CPU HOG!
</rant>
Then, just a few months ago, Matt asks me if I still had that code, and if I would be interested in completing it for their site. When am I not interested in more javaScript work?
So the deal was. The site needed to work on the iPhone, retain all the movies/slideshows, have all the portions be bookmarkable, and make it easier to add more content.
I did it. And my code is now in use on their site.
I kept all the flash for the videos and slideShows, and I used mootools to check for flash. If it was not there, replace all the flash, with jpg images.
I made all the elements on the page dynamically generated in PHP. Using some simple arrays, they can now add a new project with a single line of code. And it will resize everything, and create all the parts needed for it to work without modification.
I enabled bookmarking. This is a lot harder than it sounds. There is one page. One. So what do you bookmark? Well there are 7 projects and an info page with a lot of info. Each project position is boorkmarkable. So if you go to the link, the page will load, and it will auto scroll to that project. If you bookmark a person on the info page. It will auto scroll to the info slide, and do a nice ajax call to grab the info on the right person.
Another part was … if a user is watching a video on a slide 0r slideshow, and moves to a different slide, we needed to stop the current slide, and return to the teaser frame. Because the moving part is all javaScript, there a language problem. How do you talk to a flash movie from JS? With mootools. It’s Swiff class is wonderful (though incorrectly documented). I just had to render all the flash to include the JS connect. Worked really well.
It took a full weekend to do (I had thought less) but it came out really nicely. And on a javaScript friendly browser, it is actually a bit faster than the flash version.
My favorite blog right now is by David Walsh. A post David made a few days back was about a writer making a cool function to restyle drop down menus, and he took it and made a Mootools class of it. I was inspired and took something I made for bildrCode and turned it into my first Mootools class. What I made is an OSX like drop down box that works as a confirmation. The class allows the user to set a function to fire when the user clicks on cancel or confirm, and even determine the text for each button as well as add custom html to the box itself (here seen with an input box).
Works really well.
At work? Im working on something really cool, but Im not sure I can share yet. I can say that Adobe Air is really cool.
If you read this you are probably aware that I use Ajax (allows a page to load new content without reloading the page) alot. I really like it. It allows me to control my users experience, and doesn’t require flash. It, if done properly, also degrades nicely. Meaning, if the browser does not support it, the user can still proceed to seeing the content. Just not exactly the same way. (often just navigates to the content, and leaves the current page behind).
Because I love it so much, and I see most people using it incorrectly, I want to go over the correct way.
First of all, everything you are doing in MooTools should be between this. The reasoning is that, this waits for the DOM (Document object model… basically the HTML structure) to be completely loaded and ready.
Anything that fires before this would risk not working properly.
window.addEvent('domready', function(){
});
Now we are going to make an instance of the Request class (ajax)
window.addEvent('domready', function(){
var ajax = new Request();
});
This is actually most often where people go wrong. A lot of people think that this should go inside of a click event listener or something like that… EG
THIS IS WRONG!!!!!!!!!
window.addEvent('domready', function(){
$( 'elementID' ).addEvent('click', function(e) {
var ajax = new Request();
});
});
The reason it is wrong is because this creates a new Request instance every time elementID is clicked. Basically that is like buying a new car every time you want to go to the grocery store. Not only that, but you dont even get rid of the previous cars. What you want to do is get one car, and drive it where ever you want to go.
So in full what you want to do is something like this
window.addEvent('domready', function(){
var ajax = new Request({
url: 'fileToRequest.php';
onRequest: function(txt){
$('toLoad').set('html', 'Loading...');
},
onSuccess: function(txt){
$('toLoad').set('html', txt);
}
});
$( 'elementID' ).addEvent('click', function(e) {
ajax.send();
});
});
And… If you want to drive the care somewhere else, you can so this.
ajax.setOptions({"url": 'NewPlace.php'});
ajax.send();
So make one car, dive it where ever you need.
Note, there are times when you need multi cars, like if you need to pick up info from multi places at the same time, or you need different types of cars.
==NOTE: Nothing here will work copy pasted, the quotes are all messed up==
Im not sure if this would work as I dont know how man, if any, spam bots use javaScript. But if very few of them do, then this should be a very simple solution to drastically reduce form submitted spam, WITHOUT your users needing to type in those damn captua things.
Using mootools, you can so very easily target parts of HTML elements. So lets take a look at how we could use this to fix this issue.
Lets say you have the following form
<form id=”myForm” action=”rightPlace.php” method=”post”>
<input type=”name” name=”firstName” />
<input type=”name” name=”lastName” />
<input type=”submit” name=”submit” value=”submit” />
</form>
The spam bot can easily fill out this out, and because the form has the action info, it knows where to send it to etc.
So now say you changed it to this:
<form id=”myForm” action=”wrongPlace.php” method=”post”>
<input type=”name” name=”firstName” />
<input type=”name” name=”lastName” />
<input type=”submit” name=”submit” value=”submit” />
</form>
We then capture everything going to wrongPlace.php, so we can see what was spammed (I love it, just not on my site).
In mootools we include some javaScript in the pages head that is something like this (remember to fire only after the DOM is ready).
$(’myForm’).set(’action’, ‘rightPlace.php’);
Now, in javaScript we just changed where the form posts to (from wrongPlace.php to rightPlace.php), and everything works.
But what about your non javaScript people out there. Well, if you must… Just have wrongPlace.php require a challenge question before doing what you wanted it to do, and everyone is happy. Your non javascript spam bots dont know what’s up, and 95% of your users dont have any extra steps to prove they are human.
If you dont use mootools, or cant target the action of a forum, just use a hidden input like so
<input id=”challenge” type=”hidden” name=”challenge” value=”wrong” />
then pure js (been a while) should be something like getElementById(’challenge’).value=’correct’;
When the Ideas come, they don’t stop. I work up early on friday to get some work done before I went to my last day of my winter internship at Tellart when I came up with an idea.
One of my sites, TheGiant.org, is home to a community of over 2500 art collectors. It is just over 3 years old, but friday morning I felt compelled to make it possible to allow the members of the forum to keep track of their Shepard Fairey works. My last semester starts tomorrow, so I knew I had to finish it by tonight.
I got it done faster than I thought I would, and I think it came out better, and having more functionality than I thought it would when I started it. I managed to interface with the existing database to handle users, messaging etc. The add-on allows users to track their owned, selling, and wanted prints, and even allows for privacy settings for each list. Users can also take advantage of the friends feature the site has and set lists as friends only. Each user has a URL can link to, to allow them to see their collection. The site also allows users to search others wanted/selling/trading lists to help each other find the pieces they want.
The entire system was built in an AJAX fashion which actually made it much faster to code the php.
Mootools allowed me to make the interaction of the site much nicer, and give a lot more feedback to the user when things happen, and the MooTools AJAX allowed me to reduce the entire system down to only 3 pages. The layover system I normally use is called SmoothBox, but for what ever reason wouldn’t work inside of MediaWiki (Where the user adds prints to their collection). I figured I’d give it a shot and make one my self. Knowing some tricks in css (full bowser compatible transparency etc) , I was actually able to do it in 3 lines of JavaScript. It surprised me how well it worked, and SmoothBox never worked on the iPhone, but mine did. Maybe Ill write plugin of my own sometime.
So, as I promised, I made a copy of my new flickr image viewer I just made for my brother. It looks a ton better with lots of photos and tags. The tags line up in columns when there is enough of them.
Private Flickr Image Viewer
After looking at it, you may think I got a little crazy with the animation, but I think it added a feeling of interactivity when you are waiting for the AJAX call to load. That and I wanted to try out some stuff I may be using on some new projects.
I have to say, I love Mootools, but I really wish there was a better was of chaining actions. Do this, then that, but only after the first one ends. You can do it easily with animations, but only with the same instance of a class, and only animations. What If I want to fade out, then remove/replace content in an HTML element, then fade back in. Maybe im missing something… but it looks like there is no simple way to do this.
And just because I said I would… Tellart <– Take that google reader!
For my service design class final, my friend Molly (she really needs a blog) and I designed a service to connect people with food.
We worked on it for a few weeks, and for a while it became so real that it was actually hard to create a presentation for it. We had gone over every possibility and every situation so it felt redundant to do it.
But we pulled it off, and it went really well. I will have a video of the presentation up at some point. (our teacher recorded it, I just need a copy ).
So about it…
Foode is a service that designs a weeks worth of meals to fit your eating habits. Foode does this by getting to know every detail about what the user likes to eat, how long they have to cook, how experienced they are and how much money they have to spend per meal. Foode also looks at allergies, diets, religious restrictions, etc and works with them. Once designed, foode then delivers all the groceries needed to make the meals. Included in the delivery are customized recipe cards and a food report so the user can see not only how much meal costs to make, but how much it costs per person.
After the user has made the meals, they can go back on the website and rate them. This gives foode a better understanding about what they liked and didn’t like enabling us to better serve the user.
We created the site so we would have something to demo. The idea was to convince people it was real. For the video we made we wanted to show the interactivity the site had, and mocked up illustrator files would not do. The norm for this would have been to do it in flash, but because it only had to work in safari (as it was being recorded in it and nothing else) we where able to rapid develop it in HTML and not worry about it being compatible. The rounder corners are just some of the things that only work in safari. All the interaction/ animation was done in mooTools , a javascript framework. Mootools allowed me to do some of this stuff in half the time it would have taken in flash/actionscript, and because it is a web site it looks like one too.
Here is a short video that I just threw together. The password is risd
Foode Service from Adam Meyer on Vimeo.
This week left me with some extra time, though most of it went to seeing family for Thanksgiving, I did manage to create my first gesture-esk application for my multitouch table. When you place 3 or more fingers on the table, it looks for 3 that are making a triangle within a certain size, if it finds one it places a circle in the middle, symbolizing bringing up a menu system.
I’m not sure if there is a better way to do what I did (it seemed to contain too many for loops), but it starts at a finger, then looks for two other fingers within a certain distance from that one. If it does not find two others close enough, it moves to the next finger. If it finds two or more, it checks to see if any of them are within that distance from each-other, and stops if it does. It works really well, and thanks to a friend on a forum I visit, I was able to use an incenter equation to calculate the center.
I started thinking about the next push for RISDpedia. Im looking at ways to document electronic components next. One of the things I have been thinking about is how to document the availability of said components.
Because you cant just pop into a store to purchase them (sad I know), I needed to have a list of placed they can be ordered. As luck would have it octopart (if you don’t know it you really should) has a search API. Octopart lists all the place where you can order a part (Digikey, Mouser etc), if it is in stock, ho many they have, and more.
The API was a little hard to break into though, and it took me more than a few hours to get everything out of it I needed. It is only available as a JSON object and im not the best with javascript. I used MooTools to handle the JSON call, but because there is no print_r (as in php) to pull, and see everything out of an array, I had to do loop after loop to find the entire structure, so I could then map it out, go back, and just ask for the information I want.
Granted, I’m sure im doing it completely wrong, it works. At some point when I have time Ill make it into a MediaWiki extension for RISDpedia.