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.