Teochew Thunder: May 2015

Monday 25 May 2015

An Issue of Common Courtesy

A common complaint I hear from associates in the field of HR, is failure to show up for interviews. In particular, the candidate failing to turn up and failing to inform the interviewer.

You know how it is - you pick a promising candidate from a list of possible candidates, after a fair bit of deliberation based on information gleaned from his or her resume, and make the call. Assuming you manage to contact said person and he or she is still available, you fix a mutually agreeable time and place for the interview. Sometimes it may even (horrors!) involve staying back after office hours to accommodate the candidate's schedule.

Kept waiting.

And then the candidate fails to show up. You call, nobody picks up. There's no email from this person informing you that he or she can't make it. The candidate has disappeared, and you have just wasted your time. Common courtesy seems to be a thing of the past, you lament.

Bitch, please.

Yes, if a candidate agrees to a time and place for an interview and somehow finds himself or herself unable to attend, it's common courtesy to at least keep the interviewer informed. I agree that deliberately neglecting to do so is pretty frickin' rude. But if that somehow gives you the impression that I feel your pain, perish the thought.

Allow me to explain my curious lack of sympathy for your distress. Your situation is somewhat illustrated below:

Kettle. "Hi Pot, I'm Kettle."
Pot: "Kettle, ya dawg! Whassup, nigga?"

You see, back in the days where I was a fresh graduate, wide-eyed and innocent, filled with boundless enthusiasm - OK, you get the idea - I attended my fair share of interviews. After almost every interview, there was this same refrain.

"We'll let you know in a week whether or not we decide to hire you."

Maybe it was naivete on my part, but I truly believed that I would get an answer. Nope, not a peep. Ten, twenty, fifty interviews. Nothing. Yes, I'm aware that it's common practice to only inform the interviewee if the company is interested in hiring. That doesn't make it any less rude.

So now you complain about getting the exact same treatment you've been dishing out. Sorry, I don't think you have a goddamn leg to stand on. How's that shoe feel when it's on the other foot? Well, see the picture below - this illustrates the fucks I give.

That's right! Nun.

Back when the market was saturated with job-seekers and it was up to you to pick and choose, you got away with that shit constantly. Now we're dealing with a tight labor market. The worm has turned, and you can do absolutely diddly-squat about the candidates who are standing you up.

You know what's that you're tasting right now? That's humble pie, my friend. Chew and swallow.

If you object to anything I said here, give me some feedback. I'll call you.
T___T

Monday 18 May 2015

Web Tutorial: The Lightbox Effect (Part 2/2)

You've created the layout for your Lightbox, you've managed to get it to display content dynamically. What's next? Why, the fun part - making it look good. The cake's already done, all you're doing today is adding the icing.

So add this to your CSS class content_wrapper.

            .content_wrapper
            {
                width:80%;
                height:80%;
                border:1px solid #777777;
                overflow:hidden;
                margin-top:50px;
                margin-left:auto;
                margin-right:auto;
                background-color:#FFFFFF;
                border-radius:9px;
            }

What happened there?

You gave your Lightbox cute round corners. Now the next part is slightly trickier. The Lightbox currently appears and disappears without much fanfare. We're going to change that with some CSS3 animation.

Add a couple more lines to your CSS class content_box and make the following changes.

            .content_wrapper
            {
                width:1px;
                height:1px;
                border:1px solid #777777;
                overflow:hidden;
                margin-top:50px;
                margin-left:auto;
                margin-right:auto;
                background-color:#FFFFFF;
                border-radius:9px;
                -webkit-transition: width 0.5s, height 0.5s; /* For Safari 3.1 to 6.0 */
                transition: width 0.5s, height 0.5s;
            }

What this does, is ensure that when your Lightbox's width and height changes, it'll do so at a measured rate. We also set the width and height properties to 1px at the start.

For more on CSS Transitions, follow this link. (http://www.w3schools.com/css/css3_transitions.asp)

Now, it's time to modify the JavaScript.

The last two lines define a timer function to set the lb_wrapper div's height and width properties (which we initially set to 1px) to 80%. This, coupled with the transition specifications we added to the content_wrapper class earlier, ensures that your Lightbox makes a nice slow entrance.

Here's some more material on JavaScript timing functions! (http://www.w3schools.com/js/js_timing.asp)

Why do we need Timer functions for this? Can't we just get it done instantaneously?

For a more detailed explanation, please refer to Establishing a Transition Sequence in CSS3.

OK, we're going to do the same for the Lightbox closing.

            function close_content()
            {
                document.getElementById("lb_wrapper").style.width="1px";
                document.getElementById("lb_wrapper").style.height="1px";
                setTimeout(function(){document.getElementById("wrapper").style.display="none";},500);
            }

And we're done! Easy, wasn't it?

Test out your Lightbox now. Does it pop up nicely and disappear nicely? It's one of those very neat but simple tricks that you don't need clunky jquery libraries for.

Seeya. Time to "x close" this chapter,
T___T

Friday 15 May 2015

Web Tutorial: The Lightbox Effect (Part 1/2)

The Lightbox Effect is named after a plugin (Lightbox) created by Lokesh Dhakar.

OK, but what does it do?

It's an overlay on the current page, dimming the entire page with displayed content in the middle, with a button to close it. That's it! Nothing fancy. It's a simple and elegant method of housing content in the Lightbox without having to let it take up precious real estate on the parent page.

Other versions may have fancy borders, loading animations and countless nifty little features. We're going to do none of those today, and just focus on the basics.

So why write our own?

It's fun! Always a good reason to do anything.

Also, I want to show you that it's not all that complex at its core. That is, if you just want a Lightbox Effect without any funny stuff, it's possible with just a few lines of code. No clunky JavaScript libraries. Just good old-fashioned JavaScript and HTML, with a bit of CSS3 thrown in for shits and giggles.

So let's start with this bit of code.

<!DOCTYPE html>
<html>
    <head>
        <title>Lightbox test</title>
        <style type="text/css">
            .content_wrapper
            {
                width:80%;
                height:80%;
                border:1px solid #777777;
                overflow:auto;
                margin-left:auto;
                margin-right:auto;
margin-top:5%;
                background-color:#FFFFFF;
            }

            .screen_wrapper
            {
                position:fixed;
                z-index:900;
                background: rgba(0,0,0,0.8);
                left:0px;
                top:0px;
                width:100%;
                height:100%;
            }

            .btn_close
            {
                width:95%;
                margin-left:auto;
                margin-right:auto;
                text-align:right;
                color:#999999;
                cursor:pointer;
            }

            .content_box
            {
                width:95%;
                margin-left:auto;
                margin-right:auto;
            }
        </style>
    </head>

    <body>
        <div id="wrapper" class="screen_wrapper">
            <div id="lb_wrapper" class="content_wrapper">
                <div class="btn_close">
                    x close 
                </div>
                <div id="lb_content" class="content_box">

                </div>
            </div>
        </div>

        <div>
            <div>Photo 1</div>
            <div>Photo 2</div>
            <div>Photo 3</div>
            <div>Photo 4</div>
            <div>Photo 5</div>        </div>
    </body>
</html>

Open it in your browser and you should see a translucent grey film over your page, with a white box in the middle. There's no content at the moment, and there's a "x close" button on the right. It doesn't work either. You need to write script for that!

But first things first - this is what your Lightbox looks like when visible. We're going to turn it invisible. Make the following change to the CSS.

            .screen_wrapper
            {
                position:fixed;
                z-index:900;
                background: rgba(0,0,0,0.8);
                left:0px;
                top:0px;
                width:100%;
                height:100%;
                display:none;
            }

Now when you refresh your browser, your screen is back to its pristine clickable self!

Didn't we just do that two months ago?

Ah, you've been paying attention. Yes, we did pretty much the same thing for LKY's Memorial. So if you went through that one, the first part of this web tutorial should be easier than Britney Spears on crack.

The difference here is that we're going to populate different content here on the fly. And, of course, in here we define proper CSS classes.

The screen_wrapper class is the translucent black overlay on the screen. Look up LKY's Memorial for the explanation regarding this bit of code.

The content_wrapper class sits in the middle of the overlay and has the following properties.

- width:80%, height:80% fills up the screen with a little border around the edges, to show part of the screen beneath this layer.
- border:1px solid #777777; gives the content_wrapper a nice grey border.
- overflow:auto ensures that any content that goes outside this box will be available through the use of (very ugly but functional) scrollbars.
- margin-left:auto, margin-right:auto puts the box dab center of the overlay.

The btn_close class is for the clickable element that closes your Lightbox.
- width:100% makes sure the div occupies the entire width of content_wrapper.
- text-align:right because you want the text to be aligned right, duh.
- cursor:pointer to change the mouse cursor to a pointer when you roll over the area, indicating that this guy can be clicked on.

And the content_box class is for the div we'll be populating with content!
- width:100% makes sure the div occupies the entire width of content_wrapper.
- padding:20px makes sure your content doesn't stray too close to the borders, which would make for some really ugly effects.

Now for some data!

We need some JavaScript for this. Add this code to your head tag.

    <head>
        <title>Lightbox test</title>
        <style type="text/css">
            .content_wrapper
            {
                width:80%;
                height:80%;
                border:1px solid #777777;
                overflow:auto;
                margin-left:auto;
                margin-right:auto;
                margin-top:5%;
                background-color:#FFFFFF;
            }

            .screen_wrapper
            {
                position:fixed;
                z-index:900;
                background: rgba(0,0,0,0.8);
                left:0px;
                top:0px;
                width:100%;
                height:100%;
                display:none;
            }

            .btn_close
            {
                width:100%;
                text-align:right;
                color:#999999;
                cursor:pointer;
            }

            .content_box
            {
                width:100%;
                padding:20px;
            }
        </style>

        <script>
            function open_lb(varid)
            {
                document.getElementById("wrapper").style.display="block";
                document.getElementById("lb_content").innerHTML=content[varid];
            }

            function close_lbt()
            {
                document.getElementById("wrapper").style.display="none";
            }
        </script>
    </head>

The close_lb() function is straightforward - just set the wrapper div's display property to none, thus rendering it - and all content within it - to vanish. For that to happen, you need to add this code in the HTML, like so.

                <div class="btn_close" onclick="close_lb();">
                    x close 
                </div>

The open_lb() function does a wee bit more - it sets the wrapper div's display property to block, thus rendering it - and all content within it - to appear. And then it uses the varid variable which was passed in as an argument, to populate the lb_content div.

So let's create the content array, and fill it with data like so. The images are, of course, to be saved to the same folder as your HTML file.

Yep, I'm going to use this opportunity to plug pictures of my nephew Paul. Do I hear a collective groan from the audience? Well, fuck you. If you guys can post your bimbotic selfies and pics of your cats and your lunch all over Facebook and Instagram, I am damn well going to post pics of my baby nephew. Deal with it!

For the purposes of brevity, the actual HTML code for the content array is listed here.

Now adjust your HTML so that clicking on the labels "Photo 1" to "Photo 5" brings up the Lightbox.

        <div>
            <div><a href="#" onclick="open_lb(0);">Photo 1</a></div>
            <div><a href="#" onclick="open_lb(1);">Photo 2</a></div>
            <div><a href="#" onclick="open_lb(2);">Photo 3</a></div>
            <div><a href="#" onclick="open_lb(3);">Photo 4</a></div>
            <div><a href="#" onclick="open_lb(4);">Photo 5</a></div>
        </div>

Now refresh your browser. Click on the links. Do the individual photos pop up in the Lightbox? And can you close the Lightbox by clicking on "x close"? Well, congratulations then! You've just made your first Lightbox!

It's a boring Lightbox, truth be told. Let's jazz it up a little with some good old CSS3!

Monday 11 May 2015

Film Review: Unfriended

Unfriended, known in some circles as Cybernatural, is a horror movie in found footage format with social media as the theme. And while I'm not a big fan of the found footage genre (they make me giddy, and then some) the computer-based theme of the trailer was enough to pique my interest.

Technically, it's more of a variant of the found footage format, in the sense that the main narrative isn't told from the point-of-view of a handheld camera. Instead, the entire story takes place on the computer screen of the main character, with interaction among the other characters in the story taking place via chat and webcam windows.

But make no mistake - this film is as much about cyberbullying as it is about technology. And in this case, the two are interlinked.

The Premise

A girl has a humiliating video of herself posted online, and it goes viral. She takes suicide. A year later, on the anniversary of her death, a group of teenagers are in a group chat when they are suddenly joined by an unknown user. All manner of attempts to evict the user, who identifies herself as the girl who killed herself, fail and the teenagers start getting picked off one by one.

Warning: Definite spoilers ahead!

This is a horror movie. And half the scare is in the unknown. If you're planning to watch it, you may want to skip all the way to the end.

The Characters

Shelley Hennig as Blaire Lily. The range of emotions she portrayed was entertaining - from seductive/virginal to peacemaker, to hysterical, to mortified, and finally guilty.

Moses Jacob Storm as Mitch Roussel, Blaire's boyfriend. A horny teenager who's best friends with Adam, which is the source of many more twists down the road. His performance was blah, and only merits a mention because the character had the second-most screen time in the movie. The Chekov's Gun in the shape of a knife, was a nice touch.

Will Peltz as Adam Sewell, tall. dark and brooding. With anger-driven impulses. I found the character more compelling than Mitch. Overacted a little near the end, but I can live with that.

Jacob Wysocki plays Ken Smith, the fat stoner dude who also happens to be the group's tech whiz. I liked this guy, but the moment he started being the one to come up with solutions to evict the ghost, I knew he would be among the first to die.

The rest of the cast were... bland. Their characters were typical bratty self-centered teenagers with no inkling of the consequences of their casual cruelty.

The Mood

Started out light-hearted and - dare I say - banal, but quickly upped the tension and the creep factor as things progressed.

What I liked

Foreshadowing. "I GOT HER" was a nice touch.

The study in human behavior online. You'll see this in things Blaire, the main character, chooses to say to the group, in private to others, and things she initially wants to say and then retracts. And if you have enough of an eye for detail to look around what's shown of her desktop, you'll get a stunning amount of insight on her character.

You'll also see this in the way the characters use their perceived anonymity online to participate in malicious attacks on each other. And the scary thing about this is - it's based on things people do, and do on a regular basis.

What I didn't

The humiliating video taken of the vengeful ghost did not seem enough to warrant her suicide. Sure, honey. You got filmed passed out and soiling yourself. So what? Then again, I've never been a teen girl brought up in today's viral cyberworld, so...

Which brings me to my next point - this film will hit you particularly hard if you are a teenager brought up in today's viral cyberworld. Even to people like me, who grew up without the internet but have adapted to this way of life, this hits us more or less where we live. And if not, this may just look like some overlong advertisement for Skype, Facebook, Google, Instagram and YouTube. Oh, not to forget iTunes.

Also, the fact that the ghost of Laura Banks forces people to kill themselves, came off as a little trite.

Conclusion

I was entertained. Unfriended is a work of art, and the first of its kind. Hopefully it's the only one of its kind, not because it's bad, but because its appeal lies in its originality. Any follow-up clones would serve only to lessen the impact of the original.

My Rating

8 / 10

I give this flick one huge and heartfelt Like.
T___T

Wednesday 6 May 2015

The Prime Minister's New Sudoku

Two days ago at about 6pm, Singapore's current Prime Minister Lee Hsien Loong (who, for the purpose of brevity, will in this blogpost be referred to as LHL) posted the following on Facebook.

The Sudoku
solver

It referenced a speech he made on 20th April this year, a speech which I admittedly made no effort to listen to because up till then, I hadn't the faintest clue that this dude might say anything I would find worth listening to.

But man, was I wrong.

In his speech, LHL declared his intent to promote Information Technology. He accepted - nay, embraced - the changes that this age has foisted upon us, and the positive differences it has made in our lives. There's too many things cool about his speech and I don't want to regurgitate it all here, so follow this link for the transcript.

And if that wasn't awesome enough, he topped it off by posting a Sudoku solver he had written in C++ some years ago. I'll admit it - I was legit impressed.

Was I all that surprised though? Not really. It's common knowledge that our PM is a bit of a math prodigy. And while it would be a fallacy to say that all good programmers are also great mathematicians or vice versa, the two disciplines are somewhat interlinked. Math is about logic. So is programming.

I've looked at C++ program. As far as I can tell, it's pretty much just basic constructs, arrays and loops. Solid but not spectacular. As for the logic, I'm not about to try and dissect that. Math's not my thing. Sudoku, for Christ's sake.

The reaction has ranged from derision...

"A mathematician leading a country. No wonder everyone is treated like a digit, and the country lost its soul."

"Sorry, not high enough for my standard"

...to outright sycophantic.

"I think that u are the only prime minister on our planet who can code as a truly professional programmer"

"There you have it, a Prime Minister who can write codes! You need a problem solver in every chaotic situation, now I see why Singapore progresses."

We probably need to hold our horses here. While I agree that this little display puts the PM's IQ at above average, this has little or nothing to do with how he's run the country so far, or his ability to do so. I mean, math is math. Leadership is leadership.

But still! I knew our PM was good at numbers. Just didn't know he could program too.

It figures, eh?
T___T

Friday 1 May 2015

Whitelisting - a Paler Shade of Security

URL parameters are an easy and convenient way for web pages to pass data to other pages. And, where SEO is concerned, it's a plus because URLs can be cached. But sometimes it can be too convenient. People tend to forget that such methods are open to abuse and appropriate measures can (and should) be taken against said abuse.

Below are some instances of URL parameters, where products is the page name, and id and type are the parameters, and "34400" and "cars" are their respective values.

products.php?id=34400&type=cars
products/cars/34400

Obviously, some of the security risks are SQL Injection and XSS. I'm writing this with the assumption that you know what that is, and on the off-chance that you don't, check out an explanation of SQL Injection and XSS.

There are plenty of ways to deal with such threats, some at script level (depending on language), some at database level (depending on database). But these aren't under discussion today, because there is a simple and non platform-specific solution at the logical level: whitelisting.

What's Whitelisting?

Whitelisting is a technique that ensures that the values of the parameters conform to a specific range of values. At its simplest, here is a preliminary example. (All examples are in PHP)

URL: products.php?id=56700

<?php
$productid = $_GET["id"];
$productid = intval($productid);
?>

The above example ensures that the variable productid, when taken from the URL, is an integer, by converting the value of productid to its integer equivalent. With this, it's not possible to enter malicious code into the parameter, and the usability of the data is preserved. If I wanted to be pedantic about this, the above could be termed sanitization instead of whitelisting.

To take this further and to see a more comprehensive example of whitelisting, see the following.

URL: report.php?month=11&year=2011

<?php
$reportmonth = $_GET["month"];
$reportmonth = intval($reportmonth);

if ($reportmonth<1) $reportmonth=1;
if ($reportmonth>12) $reportmonth=12;

$reportyear = $_GET["year"];
$reportmonth = intval($reportmonth);

if ($reportyear<1969) $reportyear=1969;
if ($reportyear>year(date)) $reportyear=year(date);
?>

See what went on there? The variables reportmonth and reportyear were forced to conform to a range of values. reportmonth had to be a value from 1 to 12. reportyear had to be a value from 1969 to the current year. This makes it impossible for the values to do any damage if written as part of an SQL string.

What if input is a string?

Well, in that case we can't convert the value to integer. But, we can still make input conform via an array. URL: products.php?type=cars

<?php
$producttype = $_GET["type"];

$wl_producttype = array();
$wl_producttype[] = "buses";
$wl_producttype[] = "cars";
$wl_producttype[] = "vans";
$wl_producttype[] = "lorries";

if (!in_array($producttype,$wl_producttype)) $error=true;
?>

With this, we ensure that the value of producttype is either "buses", "cars", "vans" or "lorries". All else produces an error.

What if there's no range to conform to?

That can happen, yes. If, for example, the parameter is a search string and thus can theoretically be any value, then there's no conformity to speak of. Therein lies the limitation of whitelisting. Simple and elegant, but applicable only to very specific instances such as those outlined.

Why go to that trouble, then?

You'd be surprised, though, how many web developers don't bother with this, hoping that more advanced techniques will catch any monkey business. I think that's terribly short-sighted. It's good to secure your code at a logical level to weed out any possible exceptions before letting more advanced security techniques do their job.

messagetype=goodbye&article=whitelisting
T___T

Disclaimer

All opinions expressed on this blog are mine, and mine alone. Deal with it.

All technical information and code are written at my current level of understanding and may be incomplete. Some of it has been deliberately kept simple for clarity. Don't hesitate to correct me.

My experiences may be limited, and as such there may be blind spots in my reasoning. Feel free to disagree.

I'm not being paid to write this blog. This is purely a leisure activity. Keep your expectations low.

This being the Internet, someone is bound to take offense. The Web's a big place, and you're all big boys and girls. If so, seek life elsewhere.

Teochew Thunder

Pages