I love Black Boxes

articleengineering

Since I was young I've been fascinated with the concept of Black Boxes. Not the plane ones, mind you, I'm talking about Engineering. The concept it's very simple: it's a something that gets something as Input and returns something as Output without the need of revealing the process.

Silly thing you may think. Well, it's actually one of the main advances in many Engineering fields and the one that allows us to bring complex systems to life. It's the a similar concept to encapsulation in programming and the good ol' divide and rule.

A practical example: cars. No one today knows exactly how every part in a car works. However, new cars are being released every day. There's however a team that handles the engine: the more you press the accelerometer (input) the more thrust that is generated (output). When the light sensor (input) detects low luminosity it turns the lights on (output). By considering these simplified systems as black boxes, there's no need for the engine designers to know anything about the lighting system or others, thus there's no one that needs to handle the complexity of the whole system.

This is also the main lesson I learned from Code Complete, a book that I recommend to anyone who already knows the basics of programming and wants to improve.

There are many good designers for the content of the black boxes. They are being poured, year after year, from Universities all around the world. However there's lack of people able to combine them to make things usable. Are you a black box designer? Do you spend most of the time writing code and solving equations or do you organize teams of people? I'm a black box designer myself, but I aspire to join them into something that matters.

Pure css chart

After seeing chartjs.org and highcharts.com, I decided to try to do one chart by myself. I achieved this in 1 hour, and I'm happy that it's highly customizable by using pure css, flexible and interactive. The only thing that is missing are vertical labels, however when you hover each bar, you can see the value that you gave to it.

The main differences with other charting tools out there are:

Lightweight. No, really. I would call 0.7kb of CSS lightweight.

Highly customizable. Being based on CSS changing a color is just background: #FAA;

No javascript required. No need for slow computers to load the chart

Nice HTML markup. A lightweight PHP class will give you all the HTML you need.

Hexapod

experimentscollaborative

This is Spidey:

The main objective for me was experimenting with rapid prototyping techniques, using materials suited for the task. For this, we used Arduino Mini with an extension shield, 12 servomotors, expanded polystyrene for the main body and some tape for tiding up.

I coded the arduino from the ground up with the sole objective to make it walk. Finally we delivered a more efficient than expected robot. I learned some harsh lessons, like being careful not to cross those legs, the basics of robotic walking and that too many cables can hinder the result.

For the next version:

I will make the code object oriented. Each leg will be an object, then the main Spider will contain the movements as methods and the legs as properties. Finally, after years learning those methaphores about objects and real life things, I will be able to actually use it in that way. I intend to make it walk forward, backwards, turn and something else.

Hack for Good

collaborativeuniversity

Emi and I got into this programming competition out of the blue for a couple of days, focused around hacking for the good of others. We decided to go for a collaborative newspaper, since we thought it was something lacking in the society and that it was something that many would benefit from. The main idea was the chain of events:

Anyone can submit an article.

There's a filter with code. The article cannot contain above some % of wrong words. This is mainly to filter spam and trolls, not content.

The good enough articles are now in the moderation queue. There anyone can upvote/downvote the content.

The best articles of the day get into the main page.

So yes, it was something between Reddit, Wikipedia and StackOverflow. Unfortunately we didn't win, but it was a great learning experience.

Html tree visualization

Radar

experimentsuniversity

A small project in processing that plots a radar. It was achieved using an Ultrasound Sensor and a simple Servo Motor. We might use it for a competition, so the code won't be available until it is finished.

ひらがな

experiments

This small experiment swaps characters from a text for their hiragana equivalent. It's only valid for Spanish, since the pronunciation it's similar to that of hiragana. You write a text, press a button and it converts some of its characters to hiragana, depending on the difficulty level.

So far so good. We already have a sound-looking wave. However, this is only when we zoom in. Real world audio waves look more like this:

So we need to wrap the fourier transform with some decay at the end and some initial growth. The decay is easy, a simple (e ^ {-Bx})will suffice. This approaches 0 for values of t >> 0 and 1 for t ~ 0. For the growing cycle I decided to use (x ^ {A}) as the multiplication term, since it approaches 0 for values of t ~ 0 and the growth is limited when comparing it to the decay. However, these two factors will yield to a odd amplitude. For solving this, we take this wrapping function and make its maximum to be 1. This is the equation for the wrapper and it's representation:

User Manager

I cannot begin to explain how much this project has taught me. I can outline the main challenges I faced anyway. However, in this particular project, each challenge was harder than some other full projects:

Refactoring. This is probably the first script I wrote around 3 years ago, when I started learning PHP. I've learned a great deal in the way, so the code was completely refactored aproximately once each 6 months.

Security. There are just too many concerns about security and trying to cover them all is daunting, to say little. While I know I haven't covered them all, I am proud of the amount I've covered so far. You can follow the progress of security bugs as I put them in Github.

External APIs. Facebook connect, Gmail's implementation of Oauth, Persona, Hotmail, Twitter, VK, etc. I've integrated several services to log in with and failed horrible at few others. Basically, I had to create a system that had the flexibility to support many different login methods, through javascript + php (Persona) or only through PHP (others).

Meeting [under construction]

Matrix

experiments

I still remember how much the movie changed my train of thought back then. As a web programmer, I don't have much time to experiment with graphics as other people in videogames, optimizing frames or having a timer is something I was completely unaware of until I decided to try creating the Matrix.

It has been a great learning experience since now I know something about:

Handling real time graphics and colors

Updating the render screen on each frame

Optimization. Everything that is outside the screen should be deleted

What seemed like a simple task turned out to be much more complicated than I foresaw. Color gradients with javascript, clearing the characters outside the screen and precomputing how many columns would be were some of the things I had to do to make it work.

The Matrix for me it's a movie that changed part of my beliefs, but other people also have their own Matrix. What form does your Matrix take? Maybe a novel or a terror story?

Neural Network

Robotic Contest

Creation of francisco.io

projects

Note: this is for the old version of Francisco.io

I have learned a lot creating this page. These are the main challenges that I faced while creating the web:

The back button. When you are viewing a #smth entry there's no easy way to detect when you click the back button. So I had to set up a background process in javascript with a non-consuming interval to check whether the page should change to the main one or not.

Sprites. While it's okay for a page like this to load few more images than needed, it is not okay for a big, intensive page. So I decided to over-optimize this site for the sake of learning about it. Also, minimization is in place.