TeochewThunder

Monday, 16 November 2015

Web Tutorial: Remembering Paris

Bon jour.

I'd like to interrupt the regularly scheduled broadcast to bring you the news that the EU will be holding a moment of silence today at noon, for Paris.

For those not in the know, a rash of terrorist attacks were carried out in Paris over the course of Saturday, 14th November. Facebook became awash in a sea of blue, white and red as users changed their profile pictures in a show of solidarity.

I'm just going to get into the act here, and show you how to slap an entire overlay of the blue-white-red on your website.

Take this HTML and the "lorem ipsum" text as your Average Joe website.

<!DOCTYPE html>
<html>
    <head>
        <title>Paris Demo</title>

        <style type="text/css">

        </style>
    </head>

    <body>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </body>
</html>

Now add this div, and the paragraph. Google Translate tells me that it means "we are united". I'll have to take Google's word for it because my French is absolument merde.

    <body>
        <div id="paris_wrapper">
       <p>#NousSommesUnis</p>
        </div>

   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Modify as follows. This ensures that the overlay goes away upon being clicked.

        <div id="paris_wrapper" onclick="this.style.display='none';">
       <p>#NousSommesUnis</p>
        </div>

Next, of course, is styling. Add the paris_wrapper CSS. Its width and height properties have been set to 100% to fill the entire screen. top and left are set to 0 for the same reasons. position is set to "fixed" to ensure that this overlay follows even if you scroll. That's for the layout.

For the rest of it,
cursor:pointer ensures that the user knows the overlay is clickable.
text-align:center justifies the text.
background-color:rgba(252,252,254,08.8) sets the white part of the overlay, semi-transparently.

Next, we add another specification to style the text in the overlay. Mostly cosmetic. Modify as you see fit.

Now, we add the blue and red parts of the overlay.

            #paris_wrapper p
          {
                margin-top:10%;
                color:#888888;
                font-size:5em;
                font-family:arial;
                font-weight:bold
           }

            #paris_wrapper::before,#paris_wrapper::after
            {
                content:"";
                display:block;
                width:33%;
                height:100%;
                position:absolute;
                top:0;
            }

            #paris_wrapper::before
            {
                left:0;
                background-color:rgba(0,0,254,0.5);
            }

            #paris_wrapper::after
            {
                right:0;
                background-color:rgba(254,0,0,0.5);
            }

This basically adds two block-level elements to your paris_wrapper div, both with a width of 33% (because one-third of 100% is roughly that) and a height of 100%. They are then colored blue and red respectively and positioned.

Here you go. Hope this is helpful for your moment of silence.

Vive la francais,
T___T

Sunday, 15 November 2015

Romance and the Web Developer (Part 1/2)

People often say working is like dating. Your career is like a relationship that needs to be cultivated, nurtured and maintained. They're not all wrong, but after a bit of rumination, I've stumbled upon more pieces of the puzzle. There are both similarities and differences. If you treat your career like your relationship, it might take off gloriously, or you might crash and burn.

Why this topic?

See, recently I met this woman through one of these newfangled mobile dating apps. We met a couple of times, hung out, and talked. Her company was all right, though I had no intention of taking it further. Somewhere along the way, she revealed that she was seeing someone, who was a married man. She wasn't altogether happy with the arrangement, and dropped heavy hints that she would be open to another guy rescuing her from this situation.

That's when I pulled the hand-brake.

Fine, I may not be much. Average looks, average figure, very average paycheck. But I have enough self-respect not to allow myself to be part of this distasteful monkey business. Even if I were interested in her (and no, I wasn't), I would still not have engaged in the whole knight-in-shining-armor-rescuing-the-simpering-damsel charade.

However, it occurred to me that if this was paralleled in a professional environment, I would have absolutely no problem with it. I would even encourage someone not to quit his job before looking for a new one. Is this hypocrisy? Double standards? Not at all. That's because working and dating, while eerily similar in places, are inherently different.

And that's where I got to pondering this topic - how is web development and dating the same, and how are they different? Let's begin with the similarities.

All shapes and sizes

Not all are equal

Not all jobs are made equal (even in the same industry), and neither are women. They're all unique in their own ways.

One of my previous jobs dealt with the business end of development, whereas the one before that dealt exclusively with the technical portion. I adapted, but it was a struggle. Instead of spending my days in a cramped room churning out code, my hair and stubble all over the place and wearing clothes that had seen better days; I now had to get a decent haircut and shave, put on a shirt and tie and nice shoes, spray on the cologne and gargle that mouthwash, and generally make myself pretty. It required some adjustment. Mere technical proficiency just didn't cut it anymore.

As for the women? Some wanted romance. Some wanted the devil-may-care dude with the shit-eating grin. Some wanted respectability and financial stability. One even felt that financial stability wasn't quite enough, and wanted someone ambitious enough to start his own business. Some just wanted a good time in the sack. And some, regrettably, didn't even know what they wanted.

Different jobs demand different things from you, and so do women. It's a good thing - it stretches your repertoire. You have to tailor your approach, and take nothing for granted.

Some lines can't be crossed.

Certain things go without saying

That said, some things should be assumed. Ever have your boss tell you "you're too experienced to make a mistake like this" or a woman say "I can't believe you've learned nothing from dating that many girls."? I have. And it's especially galling because they're right.

You don't go AWOL from work. You don't work for the competition, or steal your boss's clients. If you're given enough time to do a job, you don't write sloppy code just to meet the deadline.

When you're dating... be nice to her friends. And when she asks you if her ass looks fat in that dress, the correct answer is not "yes". ("Yes, and boy does it turn me on" might be acceptable, but try that at your own risk.)

With each job or woman that you pursue, over time, there are certain rules of thumb (a.k.a universal rules) you may have developed. The above are just a few examples.

"Me" time

Time off

People need some time off from their jobs once in a while. It's only healthy. I hate the term "work-life-balance" - it's so overused and trite - so I'll just call it "letting the brain cells regenerate". Spend too much time on a piece of code and you end up getting tunnel vision. Taking a break, even if it's only in the form of eight hours' rest, is good for your job, and good for you.

Likewise, relationships need that. Couples need time apart. Either to hang out with other people, or just some good old-fashioned "alone time". Know when to give the intense lovin', and when to give people their goddamn space. Taking a break, even in the form of a day or two, is good for her, and good for you.

See the pattern here?

It helps to step back and breathe. And when you return to either your job or your date, you see things with a renewed clarity.

Put your back
into it, buster.

You get what you put in

Oh, scrub your filthy mind.

Sure, the world's an unfair and unpredictable place. Some people graduate and have their careers mapped out for them from the get-go. Some people are genetically blessed and have interested romantic parties throwing themselves at them every damn day. But privilege aside, nothing good comes easy. Whether it's a career or a date, you need to put your back into it.

Ever tried to write a web application? A fair amount of work goes into it - planning, coding, testing. You need it to look good. You need it to work. You need it to be secure. The list goes on. Now imagine having to put in that much work throughout your entire career - and more. And that's not including client relations and office politics.

Dating needs work, too. It ain't all sunshine and roses, and if you still believe that love will strike at first sight and you'll naturally end up meeting some woman at the altar some time later; dude, why are you up so late? Don't you, like, have school tomorrow?

We examine the differences. This should be interesting.

Thursday, 12 November 2015

Steve Jobs: Love What You Do

It was early one morning when the company had a gathering in the conference room. We were shown a video, of Steve Jobs making a speech at Stanford College. Apparently this was meant to be an educational experience for the staff.

During the video, Jobs said this.

"Your work is going to fill a large part of your life, and the only way to be truly satisfied is to do what you believe is great work. And the only way to do great work is to love what you do."

No, I have no problem with what Jobs said, whatsoever. In fact, I concur.

What was interesting was when our Office Manager used that quote to illustrate her own behavior. She told us she loves what she does - and that's why she comes in early and leaves late. It's true - she does that, and I offer no argument to the contrary.

What did pose a problem, however, was that the entire exercise was meant to inspire staff to work harder and put in that extra mile. I'm afraid it could very well have been taken the wrong way.

Love what you do.
LOVE IT!

The staff seemed to be being fed the concept that loving what you do means spending more time in the office.

Dead wrong. On so many levels. But I'll address the most pertinent one - that you don't have to be in the office, or even part of your current company, in order to love what you do.

Yes, spending more time in the office can be a result of loving what you do. But loving what you do should never be confused with loyalty to the company. At some point in your career, your company and you are going to part ways. Bank on it. But you will remain who you are, what you are.

I am a web developer. I write scripts, code and test. I design layouts and systems. I set up databases.

I love what I do.

I love it so much that I leave the office on time whenever possible, so that I can continue honing my craft once I reach home.

I love it so much that the insane amount of competition flooding this little island has not deterred me one bit.

I love it so much that even though I could feasibly be making more money doing something else, this is what I want to do.

So much that most of my waking hours I spend doing just that, on my weekends and vacations. And I will continue to love it even if, one day, I no longer work for this fine company. Because I would be doing what I love somewhere else.

That is what it means to love what you do.

Much love,
T___T

Friday, 6 November 2015

Five Employer Bullshit Lines

Morning, long-suffering readers.

Have you ever felt like your employer was trying to pull wool over your eyes? Give you some textbook pep talk designed to put your nose even more firmly to the grindstone? Grease you up for some heinously degrading/difficult/thankless/all three task?

Well, wonder no more. In my years of web development, I've come across some real doozies. Even fallen for a few of them. Here, I'll list five of the stinkiest bullshit lines I've ever heard an employer utter.

1. The Post-probationary Bait

"We'll pay you this much first, and review your salary after you pass your probation."

Subtext: Bite, sucker. Bite hard!

This line has happened three times in my professional life. The first time, I laughed out loud and abruptly left the interview. The second time, I got laid off as soon as my probationary period was up. The third time, the employer actually increased my salary... by thirty-three dollars. Per month.

Such overwhelming generosity!!!

I've seen it happen to others too. Promises are easy to make, but somehow after you've made it through the months of your probationary period, getting a raise is like getting blood from a stone.

In short, anything that isn't written in your contract is just so much hot air. And if it is written in your contract, the probability of you getting fired after your probationary period just went up by 20%. No, when I apply for a job, I want my raise right away, and I want it to be worth the hassle of switching jobs in the first place.

2. The Dummy Promotion Carrot

"We're looking to promote. We need to evaluate your performances these coming months."

Subtext: We already know who we're going to promote, and it's not you. But what the hell, let's see how hungry you are.

This is when your employer has already decided who he's going to give that promotion to. The rest of you just aren't working hard enough for his liking. In his eyes, you'll never qualify for promotion - you're either not skilled enough, not pretty enough, not eager enough. But hey, you don't have to know that. A little bit of motivation will go a long way, right?

This isn't for you, but you're
not supposed to know that.

The idea here is to dangle that carrot. You'll put in the performance of your life, and meet with certain disappointment. They'll imply that you simply weren't up to the mark, but the fact is, that carrot was never meant to be yours.

My humble opinion? Don't do it for a promotion. Give your best because it's who you are and what you do.

3. The Reverse Psychological Ploy

"You're probably not up to it, so no pressure."

Subtext: Prove yourself.

Good golly, I hate this one. Especially since I've been suckered by it time and again. I suspect the employer who used this on me, especially since he's a computer geek as well, knew how well it would work on me because it's worked on him before.

Basically, here the employer implies that this is such an awesomely difficult task that you might not be good enough. And if you fall for that one, you'll work extra hard just to prove otherwise.

Challenge accepted,
motherfucker.

Back in the day, I could never let this challenge to my huge developer's ego pass unaccepted. If the boss even hinted that something was too difficult for me, I absolutely had to prove him wrong. This led to very long workdays, slaving away on weekends and loads of intense effort. Fortunately, in the process, I leveled up.

Still a bullshit line, and one of the dirtiest tricks in the book.

4. The Burnt Bridge Gambit

"If you tender your resignation to your current company today, you can come over this evening and sign your appointment letter with us."

Subtext: We really hope you're dumb or desperate enough to swallow this one.

So you've gone for an interview. The boss seems to like what he sees, and he's prepared to make you an offer. All he needs you to do is sign the appointment letter. Of course, there's the small matter of tendering your resignation to your current company. Not a problem, right?

But then the boss throws a spanner in the works. He needs you over ASAP, so he's going to put the date of your appointment as exactly one month (or whatever your contractual notice period to your current company is) from today, not tomorrow. Which means you have to tender your resignation before going over to sign the appointment letter.

Don't burn your bridge before
signing.

This is a dick move, no doubt, but please tell me you're not actually stupid enough to do it. What if the terms and conditions in the contract are different from what you discussed earlier? What if the pay suddenly isn't as attractive, the job scope seems to have doubled and there are more strange clauses you weren't aware of earlier? You just burned the bridge behind you, dude.

5. The Butter-up

"I like you because..."

Subtext: The task I'm about to entrust to you is something even interns are too dignified to do.

Insert more bullshit after the "...".

I like you because you take responsibility for your actions. Like, whose actions should I take responsibility for, yours?

I like you because you see things through. Like I have a choice here?

I like you because I know you'll rise to the occasion. Kiss my ass. Oh hold up, you already are.

Christ Almighty. Just how trite can bosses get?

Fake and overdone praise.
Who needs it?

It's some shit job they need someone to do, and you just got arrowed. Fine. No need to sugarcoat it. What's that flattery supposed to accomplish, enthusiasm? Lame.

What a load of poo...

Phew! Even typing all this down makes me feel filthy. Some employers really don't understand subtlety, do they? If you're just such an employer, may I suggest you try something a little less insulting to the intelligence of your employees? Employees need a little encouragement now and then, sure. You want your subordinates to sweat for their measly wages, understandable. But if your lines stink like you pulled them freshly out of your arse, perhaps it's time to put a little sincerity into it.

Sincerity, like, y'know, a big fat bonus paycheck.

Yours excrementally,
T___T

Monday, 2 November 2015

Google's Logo Switcheroo

Holy pixellated pictograms, Batman! Google has changed their logo! Again!

Google: Before and after

If you're like me and a little slow on the uptake, you might have noticed the change now, when it actually took place two months ago. It's not that I never noticed; it's more that the change never fully registered in my mind until now. I mean, come on, this is Google. Ever so often, they change their home search page for shits and giggles, and sometimes, that involves changing the font and styling of the word "google". This felt like one of those changes.

Take a look at some of these. (Check out more at Google Doodles!)

And I'm suppose to blink when I encounter this?

That aside, check out Logopedia and you'll see that Google has changed its logo no less than five times since it burst on the scene in 1997. The last change took place in 2014 where the "l" in "google" was shifted by a few pixels. If nothing else, this tells you just how ~~anal~~ detail-oriented the branding team is. As they should well be - Google's brand is pretty damn strong and one of their main assets.

Google's been evolving since Day One. It's associated with change, in a constant state of flux; which is perhaps why it still feels fresh and perky despite having lasted more than a decade. Which is also why I saw the new logo two months ago and thought little of it. Hey, this is Google, right?

The Trend

Two other web companies that changed their logo these past few years - Microsoft and Yahoo!. It's worth noting because the changes, including Google's, reflect a trend. Note the transition from fancy lettering and kerning to simpler non-serif fonts. In Yahoo!'s case, the vertical alignment has also been altered to be less radical.

Yahoo!: Before and after

Microsoft: Before and after

All to what end? Well, you may have noticed that the changes seem to have been made to allow their logos to be better viewed on small screens, ie. mobile phones and tablets. Mobile devices have influenced yet another aspect of our lives. This is the new normal. Embrace it!

When will Google next change their logo? Hey, search me.
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. Seek life elsewhere.