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!
As always, I have working on bildr a lot. But much of what I want to do is not possible with the applications I installed as the base (wiki forum and blog software). With RISDpedia, I modified the wiki software to make it to what I wanted, but it basically made it so I could never update, because it would undo everything I had done. With bildr, I am taking a new and different approach that has some really nice benefits, and one major problem.
With bildr, all modifications at this point are completely separate mini applications that are injected into the page. For instance the portal for bildr code is placed in the wiki with a single line.
<code project=”nameHere” />
This actually gets rendered into the page as
<script src=”http://code.bildr.org/nameHere.js” type=”text/javascript”></script>
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)
When I originally started to think about bildr I had this vision of a place for people who either a: didn’t want to wast time looking for something b: didn’t know what they were doing but still wanted to do.
The idea was simple, just make a new RISDpedia for electronics and code. Originally I thought I could put some code examples in the articles, but it caused a few issues. You had to know how to embed code in the article, and once it was in it wasn’t that easy to copy. It kept inserting non code characters into it so when you copied the code, it wouldn’t work. Pretty lame I know. (I later hacked it to fix this)
I wanted bildr to be easy to edit… so I worked a lot with the WYSIWYG (what you see is what you get) editor for mediawiki so people could edit visually and stop using the horrid syntax.
This had its own issue, it didnt support the code inserts. OK… so how do I do this?
I looked at gitHub first, and actually made an extension for mediawiki to use it easily. Worked pretty well.
gitHub works as a system for many people to work on one code project. It also was nice in how it worked, but there was (at the time) 2 fatal flaws. The code was then hosted somewhere else. I wanted it local incase something happened, I wanted to know I held control. AND you couldn’t have multiple projects under one umbrella. In this case that would to be so that one project could be maintained in several languages.
So I started bildrCode
I then made the bildr video and tons of people wanted to help out. I actually got a lot of bad feedback on bildrCode to the point I just didnt talk about it anymore (outside of here). The problem was that I felt people didnt fully understand why I though it was needed. Why not use gitHub or SVN (similar)?
I use SVN a lot at work, but it wasn’t right for this. It needed to be web centric, and just today I actually signed up for a gitHub account so I could share some code I have been working on.
I consider my self to be pretty in touch with the tech community, but also very understanding of what it was like before that.
Seriously, gitHub can stick it. You expect someone who just wants to share a project, sign up for an account, download the git installer, install it and use the Termainal to execute git commands?
Not to mention that the directions are out of order, this process would not work for 99.9% of the computer using world. Why can’t I do everything web based? Why cant I hit “add file”? Why when in the damn terminal and I try to commit do I get (and dont ask me to google another thing)
error: failed to push some refs to 'git@github.com:ameyer/MooIndent.git' To prevent you from losing history, non-fast-forward updates were rejected Merge the remote changes before pushing again. See the 'non-fast forward' section of 'git push --help' for details.
Im don’t want to open mcDonalds on vegan island, and expect everyone to eat meat. I dont know why anyone would do this. But somehow people think everyone should do as they do.
Maybe in your perfect world people would just be better with technology, but in my perfect world, technology would just be easier to use.
so bildrCode is my push towards my perfect world.
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.
So im not as far along with the video as I would have hoped to be by now. It’s really time consuming to figure out what to draw/ animate for the video. That and I had some stuff come up that slowed me down.
I was able this weekend to make my first flash/javascript connection. Something I was doing in javascript required me to be able to control a flash video. Thankfully, mootools was to the rescue. Sadly mootool’s documentation on how to make it happen was way less than par. It took me a while to find out what I had to do to make it work, but in the end, a nice blog came to the rescue. So for anyone wondering how to get mootools’ SWIFF remote working here is some code:
Swiff.remote($(VarNameOfSwiffInstance), 'NameOfFlashFunction');
TRUST ME! You need: $(VarNameOfSwiffInstance)... it must be wrapped in the $()
and in flash you need this:
import flash.external.ExternalInterface;
ExternalInterface.addCallback("NameOfFlashFunction", NameOfFlashFunction);
Im not sure why you need it in quotes as well... But it is what worked. So there!
Just over a year ago I started learning ActionScript. At the time it was actually to develop multi-touch applications for the table I had made. Back then, I did everything in code, and there was no real interface aside from the black background. For this, flash was great, I just did all my code in a document class, and it worked very smoothly.
Well nowadays Im building AIR applications and have been using flash for it. Building an interface in flash it like doing it with cutout pieces of paper. Seriously. But like that, you can never get everything in the perfect location. It drives me crazy coming from a web development background. Things in flash have no structure. Things can easily overlap. If you move one element it does not affect the elements next to it, meaning you now need to change all of them. And there is no super simple way to do it numerically (all done with the mouse), making it even harder. (if you change the size of a movie clip you stretch it’s contents so you can’t just readjust size from the info box)
So the company I am with just bought Adobe Flex and I am starting over in it. I really like building interfaces in it a lot more than flash, except coding in it is not as easy. This is what I find really funny. Adobe creates a program for flash developers, who want to just code everything. But in the end, you need to do a lot more before you can start coding.
Someone at adobe needs to take a closer look at how javaScript works. Let me have my interface in one document, and my code in an other. Let me name elements and directly talk to them from code. In flex, you can do either one of these, but not both, and that’s not cool. Even flash let me do that, and you claim it is for designers. Well I guess that’s it. I am a designer, but I also like hard structure.
Then again, I have used flex for 1 day. Give me some time.
But if I had to say, I still think flash is the worst applications from adobe now. It tries to be like illustrator, but does not act the same. The key combos are not the same as all their other applications. And it wont behave in the OS like it should (mainly hiding).
Any spare moment I get, I have been trying to finish up the bildrCode beta, but as I get closer, I seem to slow down. The last 10% takes 50% of the time right?
One of the major things I did was not even on my list of things needing to be done. Someone finally wrote a good article on mod-rewrites, and I had to take advantage. For those of you who don’t know…
When you go to http://www.adam-meyer.com/blog/ you are going to my site, and requesting the folder called blog. If you went to blog/this/that, you are going to a folder called that, who is in a folder called this, who is the blog folder. And so on.
Well this Rewrite thing changes all of that. You can have adam.com/400 actually go to adam.com/includes/files/api/index.php?fileId=400. So I took this idea and made the bildr code URLs much nicer. Before you would download a file and it would be like code.bildr.org/includes/php/download.php?id=82 . But now is actually code.bildr.org/82.zip . I made a rule that when you see the .zip extension, that the person actually wants “/includes/php/download.php”. This is also good, because now hovering over the link, the person knows they are about to download a zip file. I did the same for the dynamic java script files used to embed the bildrCode into the wiki articles. code.bildr.org/includes/php/render.php?id=795 is now code.bildr.org/795.js . I actually went a little nuts on the last one and actually made the page output a legit javascript file where before it thought it was html.
I also cleaned up/ rearranged the site a bit. Added some icons. Oh icons, what a pain you are, and how I wish I had a graphic designer to work with. All mine seem to be shots in the dark until I hot something. New is the ability to commit your session and comment on it. This is a change from before where you your session was committed automatically. I think this change makes it a little more like SVN.
So speaking of Icons, here are some boxes I was working with. Feel free to use them if you can. There is a PDF link below.
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.
Here is a 2min video that showcases some of my thesis project. (redesign of wikipedia). This is a composite video, so most of it is fake, but it was a good way to show what a user might go through when using it, and how I feel I was able to engage users more, and get them to contribute and a micro level.
The video currently does not have audio. It really needs it, and it will soon have it. I just need to record it.
