I have this. So much fun :)

Monkeyspheres

Interesting article over at Cracked about how we have difficulty seeing people as people when they are out of our ingroup. It's a possible explanation for stereotyping, and has made me more reflective of my own biases.

Makes you think.

This is fun.

This is genius. Take away the make-up, take away the clothes, take away the socially-acceptable mannerisms, and the same person is someone completely different.

Think about that. People surround themselves with stuff and smells and sights and sounds and other people to insulate themselves and protect themselves and make themselves look attractive. Do they even know what they are anymore under all those layers?

I've come to think of the sense of attractiveness as passing all of the criteria we have in our heads for what an attractive thing is. Nice clothes? Check. Confident demeanor? Check.

Remember that it's all illusions.

Two objects cost 1.10 - one costs 1 more than the other. How much is the cheaper object?

Did you answer 0.10? It's instinctive for many people to answer that way - but that would mean the more expensive object is 1.10, and that means we've gone over the stated total cost. Simple algebra would tell us the correct answer is 0.05.

It's an easy question, but it's hard in the sense that we don't stop to think about it more. We're trapped in the mode of thinking where we favor knee-jerk reactions. It would be fine if our instincts were something like what Aristotle wrote about as correct beliefs - we don't know why it's correct, we just gravitate to the answer. But in real life those correct beliefs have to be tempered with experience; experience is what gives you fingertip feel - fingerspitzengefühl - or the correct beliefs in the first place. Experience also tells you when to stop rushing into something and take your time to suss the answer out.

This is by far not an easy thing; too often we find that these two systems of the brain are at cross-purposes in certain situations. On the one hand, punching him in the face would feel so good; on the other, I'd be sacrificing my livelihood. Decisions, decisions...

Magic and other stuff

I've played it for some time now, so perusing Magic: the Gathering articles occasionally is something I tend to do even if at this point I no longer have anyone to play with. Right now I'm enjoying these three articles - on sideboards, mana curves, and optimal aggro decks.

I'm also recently getting into Team Fortress 2. I'm looking to Zeigon and  MrPaladin's YouTube channels for guidance. I'm gravitating toward the Spy class for some reason; I think it has a very exciting playstyle.

With work I have been recently introduced to the idea of Flat UI design. I'm playing with it on my current project, and I am looking to designmodo this time. What's interesting is that web designers use a lot of image editing. I'm thinking I need to start learning GIMP and Inkscape. This might be related somehow, I don't know; but it seems like it will lead to something promising. 

I'm really getting into UI and one good reference I found is Your Visual Blueprint for Designing Rich Web Pages and Applications. There's also this article on UI design patterns I'll be referring to a lot in future, so I'm posting it here.

Javascript is also something that's becoming an interest of mine, so I found myself this here reading list.

On the subject of cooking meanwhile, here's two things I'm meaning to try in the kitchen: a pasta with no-cook tomato sauce, and delicious veggie burgers.

Lastly, for something completely different: the loneliness of tennis players, mentioned as part of an analysis of the similarities between them and boxers.

The effect of dietary capsaicin on the intestinal linings of mice

As a fellow who loves spicy food, I wholeheartedly love the fact that my addiction has healthy side-effects. This is an interesting finding (article here).

Growing our own wings

I'm obsessed with the comic series Global Frequency. I remember a character mentioning about being blocked by government institutions acting like gatekeepers to where they wanted to go. He said that they'll grow their own wings, as in they'll take care of themselves instead of being enslaved by others and suffering the externalities caused by the latter's callous decisions.

In light of what's happening with the FBI and the CDC right now, with the global repercussions of this I think people need to seriously start considering to grow a pair of their own. So long as the members do not become circlejerkers I'm sure they can accomplish a lot more than the politicos would give them credit. Remember that it's in the authority figure's best interest to keep you dependent because that's his livelihood we're talking about here. A lot of them don't have skin in the game, which is why they don't even bother sometimes.

There's a lot of good in the world being done by ordinary people with skin in the game - here's one more in a line of other's I'll be talking about in future: the Delancey Street Foundation.

Datepickers

The tricky thing about calendar form inputs is that browsers render them in different ways. Safari on Windows for instance, I recently found out it does not render calendars as a calendar; rather it shows two buttons on the extreme right side of the textbox that when either is clicked increments or decrements the date being displayed. What's more, it displays in YYYY-MM-DD format, which is a bit difficult if your client wants you to have MM-DD-YYYY format instead.

jQuery to the rescue, I guess. I got the widget to work well, it even displays a default date thanks to help from this blog post, but I wanted to make sure the theme did not conflict with any other styles I might need to put into the site I'm working on; the jQuery UI theme should only affect select elements in my form. This should be a piece of cake since a Download Builder page is available that allows one to specify CSS scope. Except datepickers in jQuery have a quirk when used with the CSS scope; that cost me two and a half hours of trying to get it to work. 

If I may digress, what the h#ll. I mean, you create such powerful code and you can't be bothered to elaborate what's happening more clearly on your documentation? It's these kinds of bottlenecks that ruin the development experience for me. Luckily, I found this entry on stackoverflow that was a light at the end of the tunnel. It clearly stated the reason for the theme not showing up when using CSS scope, and gave a workaround. 

Here it is, for future reference:

Note: Another gotcha was how to embed JSFiddle code on blogger. Got the skinny here and here. If it weren't for these resources I would have been out of a job already...

Menus and Modals

I'm trying to create a system I can rely on so that I can create website UI's much quicker. I've written about this before here, and this time around I'll be writing about what I found with regard to menu bars and modal popups.

Everyone's familiar with menu bars, but to illustrate modal popups we have a handy demo here. My issue has always been browser compatibility; I can come up with good code on my own, but it fails when taking into account Internet Explorer, Safari on Windows, Opera, and so on.

The Gibson Research Corporation's Script-Free Pure-CSS Menuing System was a godsend to me in this regard. I experimented with it on IE's Emulator tool; while it's true it looks ok on the emulated IE 5, the hover over submenus didn't work. Also, when I replaced the images being used for the first-order menu elements with text and styling, in IE 5 the menu reordered itself vertically. I'm therefore more comfortable with saying my alters result in code that's IE 7-applicable. 

The site that I got the demo from became the basis for the modal system. It was very simple code, except that it used a lot of features older versions of IE do not support. So the gradients, border-radius, rgba opacity, and box-shadows had to go. One could presumably use hacks to get the same effects on IE, but I've tried all of them and have never gotten them to work. Besides, we need to have a handle on how fast the page runs - adding too many files would be awful on the load time.

For radial gradient effects or large linear gradients, I usually take a screenshot of the gradient on a browser that supports it. I then crop everything out, leaving only a thin sliver of the gradient. For small gradients, I use online gradient image creation tools; then we just specify on the CSS to repeat the image as a background image and we're done. That method is also how I got around the rgba opacity not being supported in old IE; in this case I use a PNG file at a certain percentage transparency (usually plain black) for the background.

Another thing I noticed is that Safari on Windows does not give a nice calendar when using Formalize CSS; I would recommend instead using jQuery's Datepicker.

Floating Point

The game is called Floating Point, and it's free on Steam. I like that it has simple mechanics that are hard to master; the levels are randomly generated and there's really no other goal aside from learning to move elegantly and gracefully throughout each level. It's the kind of game that's a step away from the usual run-and-gun.

Let's clean our backyard.

I'm sharing this, but I haven't watched it yet. I've lived to the point where I think it's fine if I refrain from watching some things. I'm never watching one scene in Malena again, and neither will I ever watch this.

I've been lurking in YouTube since before it got acquired by Google. In all that time it's grown to be something quite amazing, I think. It's changed how people see the world. It's a source of income for a lot of folks, and a vehicle for free information. 

I've grown older too, and the longer I've been in the world the more I see what selfish cruel sh*ts some people are. I've seen shallowness and people letting themselves down. Heck, I've let myself down a lot too. But I think letting down the girl above, we all who've been in YouTube are a little culpable. 

Why didn't someone reach out? 

Yesterday, sick of the crap I had to wade through at work and looking for some distraction, I found videos of people taken on the sly. They weren't really doing anything wrong, just going about their day. But the one who uploaded the drivel was trying to frame the situation in such a way that the person being recorded was doing something wrong. As if the uploader had the right, training, or authorization for that. Taking someone minding their own business, taking the situation out of context, exploiting the hive mind-cum-rage machine that is us. 

And people fall for it too. Or they willingly go with it. For the power trip it brings. 

I'm sick of this crap out in the world. I know it's not my job to swat at these flies, but I can at least do a little bit to clean up. To show the sh*ts of the world that there are consequences to their manipulations, that there is at least one person out there who won't buy into their propaganda. I reported the video; today I saw that it had been taken down. 

The feeling is cathartic. Right now I found a user uploading voyeur shots of women. There's a lot of videos on the channel and YouTube's reporting tools are cumbersome. Hunkering down...

You can join at any time.

Our Superhero Team: Google, Ladies and Gentlemen.

It's a brave new world we're in. Google's now being proactive about fixing problems with the Internet. There's some hope here; that in my lifetime I'll see the day when people will stop relying on governments and politicians to keep them safe, that we'll be able to grow our own wings. The dream of a Global Frequency is alive, sniff...

Haunting Music.

I fell in love with this music after I watched the "Undress Me" short film by Tatia Pllieva. Just wanted to share it here.

Brazil and the Global Frequency

It's a fond dream of mine to have something like the Global Frequency exist in the world. This is why I am so impressed with this article about Brazil solving its problems by actually leveraging the power of the Internet. I mean, we have Tor, we have passionate activists who have genius technical abilities, and an open-source culture in full bloom. When are we going to see Miranda Zero on the news?

Draggable Elements

This was an experiment from about a year ago using Metro UI CSS and jQuery. I remember this was a b*tch to write; there were so many things to take into account. I started with a test page where you could drag an element (a name) between two areas of the page. I finished up with the second test that converted the appearance of the element to a colored box with a small image of the person (that's the black area) as well as a checkbox.

Unfortunately the project that I was doing the test pages for got temporarily shelved. Part of me still feels that I did all that research and proof-of-concept design for nothing; a bigger part feels proud I got the whole thing wired up and running perfectly. So, here's the sample code - unlike the previous one this doesn't need Visual Studio; just run it on your browser, really.

The Layout

One of the things I enjoy about web development is making the user interface. It's fun for me to make elements appear on the browser and move it around. But the thing the I really hate the most about web development is also connected to the interface - I'm talking about making the markup behave consistently across different monitor resolutions, different browsers, different devices, and different content lengths. 

This has been the bane of my work life; thankfully I've gained knowledge over the two and a half years I've been in my company. The very first thing I learned was how to keep the content centered with even margins on both sides; that's just setting margin-left and margin-right to auto, natch. The second thing I learned was to use grid systems. It's very much like the old days when people used columns to arrange the layout of their newspapers; the bonus is that a layout made with a grid system will be perfect regardless of the browser or screen resolution. I started out with the 960 Grid then Bootstrap; right now I'm leaning toward Blueprint.

For some time I came to accept that form elements have varying renders depending on the browser; and then I heard about the Formalize CSS; cue mind being blown. I checked this beast from IE 5 to 9, Chrome, Firefox, Safari - it was all the same. Uniform and consistent. Until you've tried designing across browsers, this thing might seem trivial - but I assure you it is not. With the grid system and the form normalizer in place, one can for the same amount of work make a UI that doesn't break over a ton of situations. It's amazing for productivity.

The last thing to complete this was guidance from cssstickyfooter.com. This brilliant web page provided insight into solving the thing which has plagued me ever since I was a beginner developer - how to set up a footer that expanded with the content and was always at the bottom of the viewport. I've found that different CSS systems can interfere with this fix - for example, Bootstrap needs a completely different markup. That's why my preferred styles now are Formalize and Blueprint. It's so much simpler and unobtrusive.

I've been experimenting with this setup and I'm really satisfied with how easy it is to create my own custom styles. The styles for the labels and textboxes are an example, I just lengthened the boxes' width and added the colors for the labels.

Fixing the buttons meanwhile was quite fun. Turns out the Formalize style took precedence and even if I added a class of my own my changes would be canceled out. It would work with an inline style, but that would make the markup clunky. What I did was dive in the Formalize code, find the part concerned with the link button, and copy the style. I then used this for my own class, minus the attributes I needed changed of course.

You can see that I used the :not selector starting from line 68, this was to exclude those elements with my class. Unfortunately, this caused the Blueprint link hover style to display. It was no problem though, just had to do the same thing to line 43 of the Blueprint style:

I got the tip from Mr. Dudley Storey's site. I recommend you all visit, very cool website it is. I used this for the Submit button, and I left a Cancel button with the inline style for comparison. Anyway, here's a download link to the code I was playing around with (needs 7Zip to unpack, and Visual Studio 2013 to run). The markup I got from the Formalize demo, they used tables to layout the elements and it was a bit annoying to have to translate everything to Blueprint grid. It was good practice though, so all's good.

Power

It's a concept I've been grappling with. In lay terms power is the ability to influence the world; for example, you bump into me and I mess up your day. Or there's some law being put to vote I don't like so I make a call and poof! Several months' work and taxpayer money wasted.

In the martial arts, power is all about doing more work for less effort. So, either I kill you without breaking a sweat or I kill more people before I get winded.

Having power over your environment is a good thing, something to aspire to. It's kind of humanity's schtick, mastering our circumstances. But I can't help but think that the lay definition and the martial arts version are incompatible. See, in the first definition of power the focus is on the effect whereas in the latter the focus is on the process.

An office worker with his crew spreads a rumor about a colleague who is in an outgroup - not part of their clique. The rumor spreads, gains momentum and causes the colleague years of emotional turmoil. The guy that started it must be so powerful, huh? But for things to have turned out the way they did so many other factors had to fall in line. Just to talk about one factor,you're telling me he had a hand in the opinions of the people he was spreading the rumor to?

We save money and seek out high-paying jobs so we gain purchasing power. But if we die before we ever spend a cent, there's no difference between us and a pauper. We may be objectively rich, but effectively we're poor. It's the same with the kind of "power" a lot in our society desire in my opinion.

For another metaphor, and this I learned from an online crisis management course I took, imagine being ruined by some catastrophic, overwhelming occurrence. Say this event destroyed everything in your immediate vicinity, you don't have food or water or shelter. You're taxed physically, emotionally, spiritually even.

You find a big chocolate bar - it's still good. You're better than you were before, right? So, what do you do - do you save the chocolate, prolong your state of relative prosperity for a few more days; or do you eat it? After all, you might not find food anytime soon. It would make sense to keep what luxury you were "blessed" with as long as possible.

Except this would be wrong. Eating the chocolate would remind you of better times, and it would be to you a pleasurable treat - a high point in a situation that doesn't have much of those. It'll help get you in a calmer mindset. Eating it would also give you fuel for whatever you would need to do. Not eating now will make you hungrier and less in a rational mood; if deprivation doesn't kill you it will put you in a state where you'll make a blunder that can't be fixed by the chocolate you put off eating. 

Eating now and going hungry tomorrow is infinitely better than growing more malnourished today because eating won't fix all the conditions your body might get as a result of worsening health.

I kind of like the martial artist's definition. If I get more of the same kind of work done in the same amount of time or if I do the same work with less strain then I know I've grown. It's something that's part of me, like my arms or legs.

Dan Ariely.

Word Clouds

My site's Word Cloud.

I made this over at Wordle. It represents the most common words that I use in my posts, as of right now. 

Very cool app. I'll be trying a few experiments with it in the near future.