Web Tutorial: The Mini-carousel

Hello, readers!

Have you ever seen that neat row of images on a website (any website, but mostly photo galleries) that just slides from right to left (or vice versa) seamlessly and endlessly? And ever wondered what it would take to make one?

It's fairly simple actually, and today I'm going to show you just how.

If you recall the web tutorial on The Lightbox Effect I made last year, I used pictures of my nephew Paul. Well, little Paul's going to star in this one again. We'll make a carousel of his pictures and animate it.

HTML and CSS3 is needed for this. You won't need JavaScript, but it sure as hell will make your life a whole lot easier.

To begin, let's start off with a standard HTML setup.

<!DOCTYPE html>
<html>
    <head>
        <title>Carousel</title>
    </head>

    <body>

    </body>
</html>

Add a div with a class of carousel, and then style it like so. The width has to be set to 100% of your screen size, or however wide you want your carousel to be. Here, I've given it a margin of 25% from the top. This number is arbitrary and not really important in the general scheme of things. The height is 200 pixels. Again, you may want to change this to suit your purposes.

The overflow property is set to hidden, and I'll explain why in a bit.

<html>
    <head>
        <title>Carousel</title>
        <style>
            .carousel
            {
               width: 100%;
                height: 250px;
                overflow:hidden;
            }
        </style>
    </head>

    <body>
        <div class="carousel">

        </div>
    </body>
</html>

Now add this to your CSS. This will make all divs a translucent shade of red, and give you a really nifty visual guide.

        <style>
            div {background-color:rgba(255,0,0,0.2);}

            .carousel
            {
               width: 100%;
                height: 250px;
                overflow:hidden;
            }
        </style>

That's what you have right now.

Next, we have another div, with a class of carouselitems. The width is set at 200% of its container, and the height is 90%. This div will contain all the items in your carousel.

<html>
    <head>
        <title>Carousel</title>
        <style>
            div {background-color:rgba(255,0,0,0.2);}

            .carousel
            {
               width: 100%;
                height: 250px;
                overflow:hidden;
            }

            .carouselitems
            {
                width:200%;
                height:90%;
            }
        </style>
    </head>

    <body>
        <div class="carousel">
            <div class="carouselitems">

            </div>
        </div>
    </body>
</html>

Refresh. You should see that the carousel is now a deeper shade of red, and paler at the bottom. That's because the new div is also a translucent shade of red, and overlaid nicely on top of the first div. I set the height temporarily at 90% so you could see the parts where the second div doesn't overlap the first.

Although this div is twice as long as the first, you don't see it sticking out because the overflow property of the first div was set to hidden!.

So set the height of the div to 100%, and we're good to go.

            .carouselitems
            {
                width:200%;
                height:100%;
            }

Now add another div inside that last div you created. It should have the class carouselitem. Singular.

        <div class="carousel">
            <div class="carouselitems">
                <div class="carouselitem">

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

The CSS class carouselitem is like so. It's floated left and has its height set to 100% and width set to 10%. Why 10%? This will become clear shortly.

            .carouselitems
            {
                width:200%;
                height:100%;
            }

            .carouselitem
            {
                width:10%;
                height:100%;
                float:left;
            }

Your carousel should be looking even redder now on the left. That's because the carouselitem is a translucent red, and overlaid on top of the previous two containing divs!

Still with me? We'll add another two divs inside this new div, and style it with the CSS classes carouselitem_image and carouselitem_content. They will now have its width set to 80% of it's parent. The margin property is set to 0 auto 0 auto to place it right in the middle. The first div is supposed to contain the image, and the second div, the caption.

<html>
    <head>
        <title>Carousel</title>
        <style>
            div {background-color:rgba(255,0,0,0.2);}

            .carousel
            {
               width: 100%;
                height: 250px;
                overflow:hidden;
            }

            .carouselitems
            {
                width:200%;
                height:100%;
            }

            .carouselitem
            {
                width:10%;
                height:100%;
                float:left;
            }

            .carouselitem_image,.carouselitem_content
            {
                width:80%;
                margin 0 auto 0 auto;
            }

            .carouselitem_image
            {
                height:70%;
            }

            .carouselitem_content
            {
                text-align:center;
            }
        </style>
    </head>

    <body>
        <div class="carousel">
            <div class="carouselitems">
                 <div class="carouselitem">
                    <div class="carouselitem_image">
              
                    </div>
                    <div class="carouselitem_content">
                        <p>1</p>
                    </div>
                 </div>
            </div>
        </div>
    </body>
</html>

So far so good?

Now copy this div until you have 5 of them in the same containing div. Number them off.

5 of these suckers make up a width of 50% of the div we styled using the CSS class carouselitems. and since that div is 200% as wide as its parent div, that means 50% of its width is 100% of the first containing div!

Simple math - such fun.

            <div class="carouselitems">
                <div class="carouselitem">
                     <div class="carouselitem_image">
              
                     </div>
                     <div class="carouselitem_content">
                          <p>1</p>
                     </div>
                 </div>

                <div class="carouselitem">
                     <div class="carouselitem_image">
              
                     </div>
                     <div class="carouselitem_content">
                          <p>2</p>
                     </div>
                 </div>

                <div class="carouselitem">
                     <div class="carouselitem_image">
              
                     </div>
                     <div class="carouselitem_content">
                          <p>3</p>
                     </div>
                 </div>

                <div class="carouselitem">
                     <div class="carouselitem_image">
              
                     </div>
                     <div class="carouselitem_content">
                          <p>4</p>
                     </div>
                 </div>

                <div class="carouselitem">
                     <div class="carouselitem_image">
              
                     </div>
                     <div class="carouselitem_content">
                          <p>5</p>
                     </div>
                 </div>
            </div>

And once again, your carousel should be looking really red now. Because 5 of these translucent red divs just about covers the entire carousel.

Now change this line...

div {background-color:rgba(255,0,0,0);}

And let's begin adding images to the carousel, along with some captions. The images should be in a separate folder, named img.

            <div class="carouselitems">
                <div class="carouselitem">
                    <div class="carouselitem_image" style="background-image:url(img/01.jpg)">

                    </div>
                    <div class="carouselitem_content">
                        <p>Fresh from the womb</p>
                    </div>
                </div>

                <div class="carouselitem">
                    <div class="carouselitem_image" style="background-image:url(img/01.jpg)">

                    </div>
                    <div class="carouselitem_content">
                        <p>Tiny pale Yoda</p>
                    </div>
                </div>

                <div class="carouselitem">
                    <div class="carouselitem_image" style="background-image:url(img/02.jpg)">

                    </div>
                    <div class="carouselitem_content">
                        <p>Wants to chew on his Uncle's fingers</p>
                    </div>
                </div>

                <div class="carouselitem">
                    <div class="carouselitem_image" style="background-image:url(img/03.jpg)">

                    </div>
                    <div class="carouselitem_content">
                        <p>More fingers</p>
                    </div>
                </div>

                <div class="carouselitem">
                    <div class="carouselitem_image" style="background-image:url(img/04.jpg)">

                    </div>
                    <div class="carouselitem_content">
                        <p>At age 2</p>
                    </div>
                </div>
            </div>

Uh-oh.

No sweat. The CSS just needs some touching up.

            .carouselitem_image
            {
                height:70%;
                border-radius:1em;
                background-size:cover;
                background-position: center center;
                background-repeat: no-repeat;
            }

Here we are. A row full of little Paul's pics! But something's off here. This thing ain't moving. And if it ain't moving, it ain't a carousel.

So we're going to animate this. Add this to your CSS. This defines a CSS animation, named carousel, and assigns it to the CSS class carouselitems. The animation basically moves the div 100% left of its original position, and repeats for eternity.

            .carouselitems
            {
                width:200%;
                height:100%;
                animation-name: carousel;
                -webkit-animation-name: carousel; /* Chrome, Safari, Opera */
                animation-duration: 15s;
                -webkit-animation-duration: 15s; /* Chrome, Safari, Opera */
                 animation-timing-function: linear;
                -webkit-animation-timing-function: linear;
                animation-iteration-count: infinite;
                -webkit-animation-iteration-count: infinite;
               
            }

            /* Chrome, Safari, Opera */
            @-webkit-keyframes carousel {
                0%   {margin-left:0%;}
                100%  {margin-left:-100%;}
            }

            @keyframes carousel {
                0%   {margin-left:0%;}
                100%  {margin-left:-100%;}
            }

It's moving! But wait. We want this to be infinite. Or at least appear infinite.

We have a couple options here. If you want an entirely JavaScript-free solution, just do this. Copy and paste the div code.

            <div class="carouselitems">
                <div class="carouselitem">
                    <div class="carouselitem_image" style="background-image:url(img/00.jpg)">

                    </div>
                    <div class="carouselitem_content">
                        <p>Fresh from the womb</p>
                    </div>
                </div>

                <div class="carouselitem">
                    <div class="carouselitem_image" style="background-image:url(img/01.jpg)">

                    </div>
                    <div class="carouselitem_content">
                        <p>Tiny pale Yoda</p>
                    </div>
                </div>

                <div class="carouselitem">
                    <div class="carouselitem_image" style="background-image:url(img/02.jpg)">

                    </div>
                    <div class="carouselitem_content">
                        <p>Wants to chew on his Uncle's fingers</p>
                    </div>
                </div>

                <div class="carouselitem">
                    <div class="carouselitem_image" style="background-image:url(img/03.jpg)">

                    </div>
                    <div class="carouselitem_content">
                        <p>More fingers</p>
                    </div>
                </div>

                <div class="carouselitem">
                    <div class="carouselitem_image" style="background-image:url(img/04.jpg)">

                    </div>
                    <div class="carouselitem_content">
                        <p>At age 2</p>
                    </div>
                </div>

                <div class="carouselitem">
                    <div class="carouselitem_image" style="background-image:url(img/00.jpg)">

                    </div>
                    <div class="carouselitem_content">
                        <p>Fresh from the womb</p>
                    </div>
                </div>

                <div class="carouselitem">
                    <div class="carouselitem_image" style="background-image:url(img/01.jpg)">

                    </div>
                    <div class="carouselitem_content">
                        <p>Tiny pale Yoda</p>
                    </div>
                </div>

                <div class="carouselitem">
                    <div class="carouselitem_image" style="background-image:url(img/02.jpg)">

                    </div>
                    <div class="carouselitem_content">
                        <p>Wants to chew on his Uncle's fingers</p>
                    </div>
                </div>

                <div class="carouselitem">
                    <div class="carouselitem_image" style="background-image:url(img/03.jpg)">

                    </div>
                    <div class="carouselitem_content">
                        <p>More fingers</p>
                    </div>
                </div>

                <div class="carouselitem">
                    <div class="carouselitem_image" style="background-image:url(img/04.jpg)">

                    </div>
                    <div class="carouselitem_content">
                        <p>At age 2</p>
                    </div>
                </div>
            </div>

See? It works. But damn, that's a lazy solution and will come back to bite you in the ass when you need to update your code.

Of, if this is being run server-side, use PHP, or whatever server-side scripting language floats your boat.

            <div class="carouselitems" id="carouselitems">
                <?php for ($i=0;$1<2;$i++)  { ?>
                <div class="carouselitem">
                    <div class="carouselitem_image" style="background-image:url(img/00.jpg)">

                    </div>
                    <div class="carouselitem_content">
                        <p>Fresh from the womb</p>
                    </div>
                </div>

                <div class="carouselitem">
                    <div class="carouselitem_image" style="background-image:url(img/01.jpg)">

                    </div>
                    <div class="carouselitem_content">
                        <p>Tiny pale Yoda</p>
                    </div>
                </div>

                <div class="carouselitem">
                    <div class="carouselitem_image" style="background-image:url(img/02.jpg)">

                    </div>
                    <div class="carouselitem_content">
                        <p>Wants to chew on his Uncle's fingers</p>
                    </div>
                </div>

                <div class="carouselitem">
                    <div class="carouselitem_image" style="background-image:url(img/03.jpg)">

                    </div>
                    <div class="carouselitem_content">
                        <p>More fingers</p>
                    </div>
                </div>

                <div class="carouselitem">
                    <div class="carouselitem_image" style="background-image:url(img/04.jpg)">

                    </div>
                    <div class="carouselitem_content">
                        <p>At age 2</p>
                    </div>
                </div>
                <?php } ?>
            </div>

But if you aren't running this on server-side and don't want to do the good ol' copy-paste, here's the JavaScript solution. First, undo the copy-paste job. Then add this JavaScript. It's the function duplicate(). It grabs all the code in the carouselitems div and duplicates it.

        <style>
            div {background-color:rgba(255,0,0,0);}

            .carousel
            {
               width: 100%;
                height: 250px;
                overflow:hidden;
            }

            .carouselitems
            {
                width:200%;
                height:100%;
                -webkit-animation-name: carousel; /* Chrome, Safari, Opera */
                animation-name: carousel;
                -webkit-animation-duration: 15s; /* Chrome, Safari, Opera */
                animation-duration: 15s;  
                -webkit-animation-timing-function: linear;
                animation-timing-function: linear;
                -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
            }

            /* Chrome, Safari, Opera */
            @-webkit-keyframes carousel {
                0%   {margin-left:0%;}
                100%  {margin-left:-100%;}
            }

            @keyframes carousel {
                0%   {margin-left:0%;}
                100%  {margin-left:-100%;}
            }

            .carouselitem
            {
                width:10%;
                height:100%;
                float:left;
            }

            .carouselitem_image,.carouselitem_content
            {
                width:80%;
                margin 0 auto 0 auto;
            }

            .carouselitem_image
            {
                height:70%;
            }

            .carouselitem_content
            {
                text-align:center;
            }
        </style>

        <script>
            function duplicate()
            {
                var wrapper=document.getElementById("carouselitems");
                var content=wrapper.innerHTML;
                content=content+content;
                wrapper.innerHTML=content;
            }
        </script>

Of course, for that to work, the div must have an id...

<div class="carouselitems" id="carouselitems">

And this has to be added to your body tag.

<body onload="duplicate();">

Run your code again. Does it work? Cool, dude.

The Final Touch

Now we want some semblance of control over when the carousel moves and stops. So do this to your CSS. This changes your mouse cursor to a pointer when you hover over the div, and pauses the animation! You could even say the animation was... Paul-sed. (hur hur)

            .carouselitems
            {
                width:200%;
                height:100%;
                cursor:pointer;
                animation-name: carousel;
                -webkit-animation-name: carousel; /* Chrome, Safari, Opera */
                animation-duration: 15s;  
                -webkit-animation-duration: 15s; /* Chrome, Safari, Opera */
                animation-timing-function: linear;
                -webkit-animation-timing-function: linear;
                animation-iteration-count: infinite;
                -webkit-animation-iteration-count: infinite;
            }

            /* Chrome, Safari, Opera */
            @-webkit-keyframes carousel {
                0%   {margin-left:0%;}
                100%  {margin-left:-100%;}
            }

            @keyframes carousel {
                0%   {margin-left:0%;}
                100%  {margin-left:-100%;}
            }

            .carouselitems:hover
            {
                animation-play-state: paused;
                -webkit-animation-play-state: paused; /* Chrome, Safari, Opera */ 
            }

This is how it should perform. Go on, move your cursor over it and out again.

Fresh from the womb

Tiny pale Yoda

Wants to chew on his Uncle's fingers

More fingers

At age 2

Fresh from the womb

Tiny pale Yoda

Wants to chew on his Uncle's fingers

More fingers

At age 2

From here on, you can make the pics link to different pages, or even bring up the Lightbox Effect for magnified pics. The possibilities are endless!

Till next time, stay Paul-sitive!
T___T

Denial of Service Attack on Dyn!

Boy, that does sounds like the title of a sci-fi flick.

Anyway.

I'm sure many of you have heard about the massive DDoS attack on Dyn by now. You know, the one that caused several Internet services to be unavailable for extended periods of time? Services like PayPal, Amazon and Twitter? It happened just around the third week of last month and caused quite a stir.

Dyn themselves released a statement on this attack. The details are interesting. Apparently, while Dyn employs safety and security features such as load-balancing and malware protection, the attack that occurred was of an unprecedented scale and sophistication, and actually caused them some concern. Dyn is a Domain Name Server (DNS), which basically means they help map URLs to numbered IP addresses, the kind only computers can read without great discomfort. And the attack caused those addresses to go AWOL for the duration.

OK, so what's a DDoS?

For those who aren't sure what a DDoS is, it stands for Distributed Denial of Service. What happens is that attackers make use of several computer terminals to send requests over the Internet to their target, flooding it with traffic and eventually causing it to stumble (or even crash) under the load. Mothers would probably understand this one - imagine feeding a  baby, talking to the mother-in-law on the phone while five other kids clamor for your attention. Now imagine juggling five babies, ten phone conversations and twenty kids. And then multiply that stress level by several millions.

That's what Dyn's servers had to deal with - a motherload (pun intended) of spam in one go, drowning out the legitimate users of their services.

Now, while the attacks were of an extensive scale, the nature of the attack was DDoS, which has existed for as long as - well, let's just say that DDoS ain't the new kid on the block. If I were to say it has been around for 30 years, that wouldn't be stretching the truth.

Yep, older than this.

The mode of attack wasn't new - it was the implementation that gives one pause.

The Internet of Things

Unlike the old days, in this particular assault, venues of attacks weren't restricted to computer terminals with an Internet connection. Now many things have Internet connections - mobile phones, copiers, webcams, smart toasters, the list of devices goes on. Now with the Internet of Things being in vogue, Dyn was under siege from all manner of devices. And that's a scary thought. Imagine Twitter being brought down by your refrigerator.

A group that calls themselves New World Hackers has claimed responsibility behind the attack, and stated that it was their intent to bring awareness to the vulnerability. Whatever their intentions really were, I say bravo - it certainly accomplished that. A great many people have been shaken out of their complacency.

I think many people constantly underestimate just how dangerous the Internet is. It's a useful tool, yes, and at times an untamed and unpredictable one. Who's to say the device you're reading this blogpost on, isn't at this moment being compromised for nefarious purposes? You think that nifty new antivirus program you bought last year, or even last week, is bulletproof? Please. As long as you're connected to the Internet, you're vulnerable. Don't ever forget that. The worst thing is, dependency on the Internet is growing as we speak. Can't log into your computer without a Microsoft account? Gotcha. When's the last time you used your phone for, I dunno, making a call instead of surfing the net?

If you've gone this far without any obvious signs of having been compromised, it's not because you're good, it's not because you're well protected, it's not because God is smiling on you after you gave up your seat to the old lady on the train today, and it's certainly not because hackers are afraid of you. It's because you've been lucky. Simple as that.

Ya feelin' lucky, punk?

There anything you can do about it? Sure. Don't use the Internet. But please don't heed my advice, because that would eventually put me out of a job.

Seriously, though.

The Internet is a useful tool (did I just say that twice in one blogpost?) but don't ever let it be more than that. Exercise due caution. Don't get over-dependent on it, because I'm pretty sure this historic attack isn't a one-off thing. I mean, really, do you absolutely need a smart toaster? The capability is in place, and the potential to do a great deal of harm on a massive scale is there, and has been there a while now. This attack shouldn't have surprised anyone. It was a matter of when, not if.

At your (denied) service,
T___T

Film Review: I.T

Now with Internet of Things being a, well, thing, this movie was just begging to be made. I.T is a techno-thriller (no relation to the horror thriller, Stephen King's It) that lives up to its billing, albeit barely.

The synopsis sounded promising - rich dude pisses off tech support guy and techie gets his own back through an escalating series of IT-related pranks. Also, as an ex-desktop support office drone, I felt compelled to check this out. Plus, it starred Pierce Brosnan! How bad could it be?!

Well, I was about to find out...

Warning - many spoilers ahead and possibly objectionable content!

I'm going to shamelessly spoil this one, because the plot is so utterly predictable you could see every twist and turn a mile off. No shit; the plot could have been written by a primary school punk, it's that simple. Trust me, I'm doing you a favor and saving you the money.

Also, if profanities and partial nudity offend you, sod off from here, you oversensitive wanker.

The Premise

Mike Regan is the head honcho of a large tech corporation, husband to Rose and father to teenager Kaitlyn, whose troubles begin when he makes an enemy of his IT guy. His smart home, wired with gadgets of all sorts and run with computer intelligence, becomes a ripe battlefield for the wronged techie.

The pranks begin harmlessly enough with the sound system blaring music in the middle of the night, appliances turning themselves on and off, etc. But they soon progress to the malicious (falsifying evidence of corruption via forging emails sent from the company's server), the sadistic (falsifying Rose's mammogram report results and making viral a video of Kaitlyn diddling herself in the shower) and the outright psychotic (taking control of Mike's smart car while he's driving).

Mike needs to fight back, and does so by engaging his own security expert who helps him take his life back, bit by bit.

This culminates in a showdown as the enraged nerd breaks into his home with a gun...

The Characters

Pierce Brosnan as Mike Regan. Something of a technophobe who ironically owns a tech company and wants to launch the aviatory version of Uber. He has trouble with basic IT security and yet wires his entire mansion with all manner of gadgetry. He's portrayed as a bit of an asshole (Getting your IT guy to do free work for you on the weekend? Really?) who wears his power way too easily. Also, the first time Ed broke the employer-employee boundaries and the way Mike put him down, was unnecessarily high-handed. Made it hard for me to sympathize when the techie started getting his revenge. Still, he's also portrayed as a devoted family man who stops at nothing to protect his wife and kid. Pierce Brosnan's a fine actor with one hell of a resume. I've been watching him since his days as James Bond, and flicks such as Mrs Doubtfire and The Thomas Crown Affair. He projects the layers which make up Mike Regan, quite effectvely. Affable tycoon? Sure. Arrogant bastard? Oh yeah. Aplopetic rage? No problem. Loving husband and father? You know it. Alpha male? In spades, brother. Unfortunately, he's also let down by a really crap script.

Anna Friel as Rose Regan. Other than looking worried and fretful, she didn't have much to add to the plot. It wasn't too believable anyway. One moment she's greeting Ed cordially and next moment, she looks concerned when he shows up. Doesn't add up at all. The producers must have sensed this, because they seemed to be getting her to contribute more near the end of the movie, with gratuitous cleavage shots.

Stefanie Scott as Kaitlyn Regan, the bratty daughter. Having seen Stefanie Scott's restrained performance in Insidious: Chapter 3, I believe she can do way better. Why she would even bother with this movie is a mystery to me.

James Frecheville as Ed Porter. Guy overacts. To be fair, with a script this bad and a character this stereotypical, he might as well have fun and really ham it up. He did a credible job portraying dorky friendliness, cool intensity, neurotic fragility... and really ramped it up when putting on the "psycho face". Eye candy for the ladies - big on the jaw and kind of pale, but tall and well-built, a right pretty boy.

Michael Nyqvist as Henrik. He's the guy Mike turns to when he needs a tech security expert to counter the hostile actions of the geek he pissed off. And counter Henrik certainly does, with a composed, grandfatherly air reminiscent of Albus Dumbledore. I almost expected him to break out a wand at some point. Nyqvist is a pretty versatile actor and I rate him higher than even Brosnan in this cast. Which is why, though he nails the damn role with near zero effort, I can't help but think he's really slumming it here. This is the guy I watched in The Millennium Series, Mission Impossible: Ghost Protocol and John Wick? He's far too cool for this shit.

When I was watching him, however, it occurred to me that he and Pierce Brosnan have something in common. Both have had movie franchise characters taken over by suave, macho Daniel Craig - in Nyqvist's case it's the role of Mikael Blomkvist in The Millennium Series, and in Brosnan's case it's the role of James Bond.

The Mood

This was supposed to be a techno-thriller. They got the "techno" part down, but the "thriller" part? Yawn city. The miserable excuse of an utterly unimaginative plot didn't raise my heartbeat a tick. All I felt was disgust. I didn't care what happened to Mike, Rose and Kaitlyn. Whatever, kill them all. They suck.

What I liked

Production was slick, man. Gorgeous visuals of the Regan home and the surrounding scenery, and the glass tower office. Insane lightning and grimy feel when around Ed's crummy apartment.

Michael Nyqvist was a welcome presence. He just somehow made everything less depressing simply by being there.

What I didn't

Ed being a psycho with a history of mental instability, abused as a child, etc. Real original, dudes. You think only psychos could pull this shit? Guess again, morons. The average computer nerd has the ability and connections to make your life utterly fucking miserable, given enough motivation. Sure, a non-psycho wouldn't (intentionally) put you in harm's way, but the rest of it? All too possible.

The progress of Ed and the Regans' relationship from trusted employee to outright hostility went too fast to be believable.

What's up with Kaitlyn's Stars And Stripes bikini? Gaudy much?

I'm supposed to believe that an old rich fuck could consistently beat up taller, younger and buffed dude?

Conclusion

Could have been better. Way better. For a movie that dragged on almost two hours and boasted a cast consisting of Pierce Brosnan and Michael Nyqvist, I sure expected a hell of a lot more than tech-guy-makes-dick-boss's-life-miserable-because-he's-a-nutcase. Again, save your money. Watch something more interesting... like paint drying or grass growing.

My Rating

4 / 10

This film needs to be de-fragged, pronto.
T___T

TeochewThunder: Year Two (Part 2/2)

I’d love to report that the blogging year was a roaring success, but as with the previous year, it was a bit of a mixed bag.

Crash n' burn.

The first part of the year was rather slow, with viewership plummeting to dismal levels. Were readers tiring of web tutorials and the techy stuff? Well, too bad, then. This is what I do. This is what I like to talk about. Thankfully, I make no money from writing this shit, because if I did, I would feel pressured to write things that people like reading. As it is… 404: Fucks Not Found!

For some reason, I found myself writing quite a bit about Facebook. I wonder why.

Things picked up in the second quarter, rather inexplicably, I might add. Normally I’d think that Google's court case against Oracle is far more interesting than a mini-dissertation on the Three Great Virtues, but what the hell do I know, right? Rise of the Handphone Vigilante was the most popular post, followed by Social Media Mishap.

I’ve belabored to keep things short and in bite-sized chunks. Whereas in the past year I would simply cram stuff into one long blogpost, these days I segregate them into smaller parts. Examples: Data Passing Methods and Three Great Virtues. Some viewers may find this disconcerting, but trust me, it’s for the best. This blogging and stuff is pretty hard work. Gotta pace myself or burn the hell out.

Still, I’ve picked up some exciting new skills along the way and made plenty of interesting mistakes in the process. So web tutorials and the Spot the Bug series should really be a lot more varied.

Obstacles

Dollar Photo Club, the site where I got most of my images from, folded this year and handed my account over to Adobe Stock. I’m going to miss those really cheap stock photos.

Damn these hurdles.

Some of the content here is mirrored in http://www.teochewthunder.com, a site I sent up to lure in the head-hunters. Maintaining that in tandem with this blog, keeps me busy from time to time.

In the first half of the year, I was also busy with school (What, you think I got this awesome all by my lonesome?), final exams and getting laid off at work (Yes, that particular story will make its way onto this blog in due course. Watch for it!). All in all, it’s been quite an eventful year.

2017 beckons!

Things are looking up, on the professional front as I attempt to ride on the momentum of my modest accomplishments. I’m in another job, surrounded by people smarter than I am, and rediscovering the enthusiasm that so endeared me to my previous employers all those years back.

Thanks for reading. I’ll be write back in November! (heh heh)
T___T

TeochewThunder: Year Two (Part 1/2)

Happy 2nd anniversary!

It’s two years to the day I first bit the proverbial bullet and started TeochewThunder. As with yearly tradition, the month of October will be used for introspection, preparation, and, ahem, a little break.

Every once in a while, I find it prudent to remind myself - and others - why I chose to start this blog in the first place.

Someone told me that I should be spending more time honing my craft instead of little vanity projects like my blog. Blimey, mate. Is that what you think I’m doing, stroking my ego? If I needed an ego trip, all I need to do is stand in front of a mirror and flex my pectorals. I certainly don’t need to spend those hours writing code, making sure it works and making sure my tutorials make sense.

Check these out, baby.

When you’re writing code for your own amusement, you can be as sloppy as you damn well please. When you’re writing it for the public eye and have to explain every bloody line, that brings your game up to a whole new level.

Think I’m not honing my craft? You’re watching me do it, right under your nose.

I kid you not. Looking back at some of the tutorials I’ve written in the past year, some of it might be charitably described as “amateurish”. Riddled with bad practices and excruciatingly inefficient in parts. But if I hadn’t bothered with the blog; indeed, if I’d just been happy to work nine-to-five and call it a day, none of this terrible, terrible content would have been written and I wouldn’t have learned from it.

So understand this - if you like what I’ve written and get value from it, I’m happy for you. If you don’t; you think my writing is abysmal, and my insights are naive and misguided, that’s OK too. Make no mistake: Ultimately I’m not writing this blog for you. I’m doing it for me.

Speaking of which, you could be forgiven for thinking that some of the code is horrible and a castrated monkey could do much better. But the idea behind the code is what really counts; and if you can implement those ideas with better code, good on you. Do it, and share!

Some more feedback I’ve received pertain to certain observations I’ve made, particularly those in the category Life as An Economic Digit. Apparently, people enjoy the brutal honesty, but some think I could be hurting my professional opportunities with the public criticism I’ve leveled towards companies such as Fixx Digital, and towards practices in the industry I regard as fucking retarded somewhat antiquated. Apparently, prospective employers like their employees docile and neutered.

It’s not that I don’t see their point, or appreciate the concern… but really, what professional opportunities? Like maybe some hotshot company will be interested in hiring me, but drop the idea once they see what I really think of some industry practices that they may have adopted, and get all butthurt about it? Are such companies even worth wasting time on? Or maybe I’m hurting my chances of being hired with great pay and a senior-sounding title? Trust me, that particular ship pretty much left the harbor some time back. Years ago, I made the decision not to spend time climbing corporate ladders and chasing meaningless fancy titles, and instead invested that time into building stuff, like an actual developer.

Maybe if I pretend not to see it...

Let’s face it - none of the observations and comments I’ve made are particularly insightful or groundbreaking. It’s stuff most of us would have realized at some point or other. It’s simply that many choose to lay low and keep quiet about it, hoping that their patience will be rewarded if they suck it up long enough.

Rubbish.

Dudes, your roadmap to success and promotion was ordained the moment you joined the organization. Not getting into trouble isn’t going to significantly increase your chances of getting that raise or promotion. The best you could hope for is not to get fired.

I don’t have some fancy managerial position to lose, nor some glamorous job at a Fortune 500 company. Therefore I should feel free to call bullshit out as and when I fucking please. In fact, I don’t have an excuse not to. Because I care about this shit. Way more than I care about living in a nice house, driving a nice car and having a bombastic title on my calling card.

Phew!

OK, with those rants out of the way, it’s time to report on the highs, lows, hits and misses of late 2015 to the third quarter of 2016.

Next

TeochewThunder’s loosely presented statistics.