Monday, 30 March 2015

So you want to be a Web Developer? (Part 4/4)

And now for the final segment! We've covered the front-end, back-end and database technologies you'll need in web development. But those are merely the technical aspects of the job. Arguably, the most important part of the job is temperament.

What's "temperament" got to do with anything?

To answer that, let me just ask a few simple, searching questions.

Is it hard to take a urine sample? No, it's just icky.

Is it hard to draw someone's blood? Not if you have the correct training and enough practice, and don't faint at the sight of blood.

Is it hard to help an infirm person take a bath? It's not difficult per se, but boy is it tedious.

Got your attention?
Those are just three out of the numerous little tasks nurses do daily. Would you say any of it is difficult? Maybe not. But would you want to make a living doing that? No? Why not? It's a noble profession. But perhaps - just perhaps - it's not you. Perhaps you're thinking, screw all that, I just want an office job.

Almost every profession attracts people with a certain temperament. Accountancy attracts the number-crunchers, sports attracts the athletic, law attracts the argumentative. OK, if any of you reading these are accountants, sportsmen or lawyers, bear with me. I'm generalizing here. My point is, web development is like any other profession - it requires a certain temperament for it to work. Especially web development, because there's nothing about web development that is rocket science. Any kid with an average IQ can pick it up, it's a matter of whether they want to.

So what's a web developer's temperament? Let's examine this.


This is how you should be
approaching your work.

Love what you do

Unlike medicine, sports or astrophysics, web development is a field in which you don't have to be extremely smart, strong or fast. But you do have to be interested. There are professions in which one can get by on natural talent, and zero interest. Web development is not one of them. If you don't love it, you won't last a week.

Web development isn't glamorous. And unless you turn out to be another Steve Jobs or Mark Zuckerberg, it's not going to make you rich and famous. You can earn a decent living, but before you get to that stage, it's a lot of shitty working hours and crap pay. And web development is definitely not the kind of job where you can turn in a nine-to-five performance, do the bare minimum and coast till you reach retirement age.

Some people want to be managers. They want to take home a 5-figure salary. Or they just want to work till they're in their 50s, and then retire with kids and grandchildren. There's absolutely nothing wrong with any of that. But buddy, if all you wanna do is make a living, there are far more effective ways to do so. There are better ways to achieve the glamor of holding a high position somewhere. And there are definitely far more likely avenues to big money. The only feasible reason to make web development your living, is to love it.


Keep up, honey.

Keep improving

There's always something new over the horizon. When you get into web development, there's no time to rest on your laurels. It's a state of constantly honing your craft, one way or another. You don't learn a couple things and then get to ride on them for the next few years, because there are many technologies associated with web development, and all of them undergo changes every few months.

Do you want to be in an industry where the ground keeps shifting beneath your feet? Would you enjoy it?

The whole point of learning so much stuff is this: in web development, there are no blanket solutions. Some technologies are more suited for certain needs. That's precisely why web development is the wonderfully diverse field it is today. However, in order to flourish, you have to like learning new shit all the time. You have to like constantly honing your craft. Because if you don't, keeping up is gonna be a gigantic drag.

You can be untalented. I've met developers who couldn't tell the difference between Comic Sans Serif and Arial. You can be dumb. Everything has a learning curve to it, and if yours happens to be steeper, so be it. But you cannot, under any circumstances, refuse to improve.



Yep. Back in those days...

Give to your craft, and it will give to you

Web development has been good to me. It can be good to you, too. But before you get something, most of the time you have to give something. I've given long hours of my life figuring stuff out. Taken pay cuts. Worked for some really demanding taskmasters. Sacrificed three girlfriends to the cause (because let's face it, no self-respecting woman appreciates being shafted aside on a weekend, for PHP and AJAX).

And I would do it all over again, in a heartbeat.

No one threatened me with dismissal if I didn't work during weekends, public holidays and put in 12-hour workdays. Certainly no one pointed a gun to my head and forced me to keep coding. I did it all because I loved what I do, and I wanted to be good at it. "Work-life balance"? What's that?

I'm not saying you have to make the exact same sacrifices. But what are you willing to give to be a web developer, and how much?

Conclusion

Again. web developers are the bricklayers of web development. If you're looking for tips on how to climb the corporate ladder, have the good sense to look somewhere else. If you want to make big money... hey, you know what makes big money? Peddling cocaine. Go sell some fucking cocaine and leave me alone, yeah?

Every recommendation I've given here, technical or otherwise, is just that - a recommendation. Web development's diverse enough that you could conceivably ignore everything I've said here and do it your own way. But as a starting point, give it a chance. Hey, you could do worse.

So you want to be a web developer? Get out there and <br> a leg!
T___T

Monday, 23 March 2015

Web Tutorial: LKY's Memorial

We interrupt your regular broadcast to bring you this message.

Lee Kuan Yew, a.k.a Harry Lee (who shall, in this web tutorial, be known as "LKY" for the sake of brevity), arguably Singapore's most famous personality, has passed on, at 3:18 am in the morning, at the ripe old age of 91.

I wouldn't call myself a fan, per se. But boy, this old geezer was one badass dude. Tough, dedicated and uncompromising, the likes of which will probably never be seen on our fair shores again. And his passing will be felt.

Now, with that out of the way, some of you might want to put your website at "half-mast" as a show of respect. The code is simple. No CSS classes. All CSS will be inline, so as not to interfere with the workings of your site. Just put this anywhere right after the body tag of your page.

<div style="background-color:rgba(0,0,0,0.5);width:100%;height:100%;left:0px;top:0px;position:fixed;color:#FFFFFF;text-align:center;z-index:900">

</div>

Here's an obligatory explanation as to what the CSS means.
background-color: rgba(0,0,0,0.5) - Set overlay background to black, with 50% opacity.
width: 100%, height: 100% - covers the entire screen.
left: 0px, top: 0px - Blackened screen overlay starts from top left corner
position: fixed - overlay moves with the page if there's scrolling.
color: #FFFFFF - text in overlay set to white for contrast.
text-align: center - all content in the overlay to be dead center.
z-index: 900 - This ensures that the overlay is on top of everything else. You may need to adjust this to a bigger number.

Now add some text in the div. Feel free to elaborate!
<div style="background-color:rgba(0,0,0,0.5);width:100%;height:100%;left:0px;top:0px;position:fixed;color:#FFFFFF;text-align:center;z-index:900;">
    Lee Kuan Yew, 1923 - 2015
</div>

Now we're going to add a picture. It's a memorial, right? Normally we'd use a nice dignified black-and-white picture of the grand old man, but to hell with that. Let's use my favorite picture, the one that captures him in all his majestic badassery. Credit to the phenomenally talented Samantha Lo of SKL0.

lky.jpg
So add this image into the content. Feel free to use your own image! I've set the margin-top property to 10% so that there's a decent amount of space between the top of the page and the image.

<div style="background-color:rgba(0,0,0,0.5);width:100%;height:100%;left:0px;top:0px;position:fixed;color:#FFFFFF;text-align:center;z-index:900;">
    <img src="lky.jpg" style="margin-top:30%">
    <br /> <br />
    Lee Kuan Yew, 1923 - 2015
</div>

And there you are, a nice memorial to mark the day LKY left us! This is what it should look like, using a sample Lorem Ipsum background.


But that leaves my site non-functional!

Sweat not! Just alter the code as follows:

<div style="background-color:rgba(0,0,0,0.5);width:100%;height:100%;left:0px;top:0px;position:fixed;color:#FFFFFF;text-align:center;z-index:900" onclick="this.style.display='none';">

This basically ensures that while the memorial to LKY will obediently pop-up whenever somebody accesses the site, it will vanish as soon as it is clicked. Problem solved! Keep calm and Harry on, folks!

What are you expecting here, me to sign off with a pun? This is a very grave occasion, OK?
T___T

Saturday, 21 March 2015

So you want to be a Web Developer? (Part 3/4)

So we've covered the front-end and back-end aspects of web development. And, as mentioned in the last segment, we're going to delve into databases.

Unless you're only planning to create static websites, which in this day and age isn't really feasible as a career choice, at some point or other you're going to have to deal with databases, or at least a data source. Some databases are more suitable than others - it all really depends on the scale of what you're trying to accomplish. An enterprise-level application might require SQLServer, whereas MS Access is probably better for a simple disposable solution.



Again, as with back-end scripting languages, learn one database platform, preferably two.

- MySQL (http://www.mysql.com/)
- SQLServer (http://www.microsoft.com/en-us/server-cloud/products/sql-server/)
- MS Access (https://products.office.com/en-SG/access)
- DB2 (http://www-01.ibm.com/software/data/db2/)
- Oracle (http://www.oracle.com/index.html)

 

What you must know

- SQL (well, duh)
- Views
- Indexing
- Stored Procedures
- Database security
- Normalization

Good-to-haves

The following aren't absolutely necessary, but if databases are going to be your specialty, you could do worse!

Do have a look at CSV, JSON and XML as alternative modes of data storage and transfer.

MS Excel is a spreadsheet application, but through the years it's picked up a heft amount of added functionality. Worth a gander. (https://products.office.com/en-us/excel)

LinQ is an alternative to SQL. (https://msdn.microsoft.com/en-sg/library/bb397926.aspx)



NoSQL databases such as MongoDB and Redis. They seem to be the in-thing now. For a more comprehensive listing of NoSQL databases, see this link (http://en.wikipedia.org/wiki/NoSQL).

What are my career options?

If you're going to do only databases, why go into web development at all? There's demand for database administrators all around.

Next

Coming up, the final ingredient needed to be a web developer. Stay tuned!

Tuesday, 17 March 2015

So you want to be a Web Developer? (Part 2/4)

In the last segment, we discussed the front-end technologies of web development, and the things you'll need to know as a web developer. However, don't take it as an exhaustive list. Even barring the fact that technology changes - and is changing even as we speak - I'm fairly sure I missed out certain things. It's actually pretty hard to get everything. Yes, if you want to be a web developer, you'll need to know that many things, and more, on the front-end.

Intimidated? Don't be. You ain't seen nothing yet. We're talking about back-end technologies next.

Back-end

By back-end technologies, I mean server-side stuff. Server configuration and server-side scripting.

However, while configuration is important, one could actually scrape by without it unless you're in an environment where you have to take charge of your own server. Otherwise, this is pretty much the province of your vendor.


For server-side scripting, there are tons of scripting languages out there, each with their own quirks and preferred operating systems and databases as complements. Do your research. Some of them are proprietary and require licenses.

Just to list a few...

ASP.NET (http://www.asp.net/)
PHP (http://php.net/)
Python (https://www.python.org/)
Ruby (https://www.ruby-lang.org/en/)
Coldfusion (http://www.adobe.com/products/coldfusion-family.html)
JSP (http://www.oracle.com/technetwork/java/javaee/jsp/index.html)
Perl (https://www.perl.org/)

For a more complete list, see this link. (http://en.wikipedia.org/wiki/Scripting_language)

(Yes, I'm aware that ASP.NET is a framework and not a scripting language per se. This is for the layman, so bear with me.)

Pick one of these and get intimately familiar with it. And once you've reached a certain level of proficiency with it, pick up a second one. A third, if you're so inclined, but as a benchmark, most web developers know at least two.

What you must know

Regardless of what languages you end up learning, the following are a must. As with JavaScript, you'll need to know the following:
- Data types.
- Operators.
- Number and date formatting.
- Arrays.
- Programming constructs, ie. For, While, If-Else, etc.

And these as well:
- Database connections and CRUD (Create, Read, Update, Delete) functions.
- Input sanitization.
- File handling.
- GET and POST.
- Sessions and cookies.

AJAX

If you're good with your JavaScript and have picked up at least one back-end scripting language, you'll want to combine these skills to produce a totally awesome package known as AJAX. To put it simply, with AJAX you can leverage on your JavaScript skills to interface with your back-end scripting language, to produce wonders on screen.

More on AJAX (http://en.wikipedia.org/wiki/Ajax_(programming))

Good-to-haves

Again, these are optional. Companies are veering towards frameworks and IDEs, but if you haven't a decent foundation in the basics, forget about it. You don't want to be one of those developers who's totally crippled without an framework.

PHP Frameworks such as CodeIgniter, Symfony, CakePHP, Zend

Python Frameworks such as Django and Pyramid.



Ruby Frameworks such as Ruby On Rails.

For a more complete list, check out this link! (http://en.wikipedia.org/wiki/Comparison_of_web_application_frameworks)

What are my career options?

With just back-end scripting? Not good. You'll forever play second-fiddle to software developers who are the "actual" programmers. And front-end web developers are simply more highly valued. The ability to make things look pretty leverages on artistic talent, which isn't something that can simply be learned. On the other hand, programming and scripting is about logic. Anyone with an average IQ and enough interest can pick it up.

No one flourishes on back-end web scripting alone. Without databases and the front-end portion of web development, you're screwed.

Next

We're going to go even further back-end, and talk about databases.

Saturday, 14 March 2015

So you want to be a Web Developer? (Part 1/4)

Think web development's the life for you? Want to get your hands dirty and be part of the process? Want to get into the industry but aren't sure what skills to pick up? Hey, look no further. This four-parter shows you the bare minimum you'll need to get started.

If we exclude design and SEO, which are just about separate and distinct disciplines anyway, the areas you'll want to look into are front-end, back-end and databases.

Front-end

If you're thinking HTML, you're right. But only partially right. What you should really be thinking of is HTML, JavaScript and CSS. Seriously, if you only know HTML, don't even bother mentioning it to an interviewer.

I thought JavaScript and CSS were optional!

Technically, it's true that HTML can work on its own, while JavaScript and CSS need to be embedded in a HTML page in order to work. In practice, we have a term for aspiring web developers who only know HTML: secondary school kids. You can make a living with only knowledge of HTML. But unless you want to spend your entire career writing EDMs, do consider picking up the rest.

We live in an exciting age where JavaScript and CSS are no longer just nifty add-ons to make your pages more interesting. Knowing JavaScript is a precursor to mastering AJAX, which adds a whole new dimension to the interactivity of your pages altogether. And CSS is great for styling and layout, and pretty damn useful for large-scale projects. That's not even mentioning the fact that CSS3 now does for web development what Flash did years back - great animations.

What you must know

You'll need to know all these like the back of your hand. Off the top of your head. It better be more familiar to you than your mother's birthday.

For HTML,
- Basic page anatomy, ie head and body tags, and what goes into each.
- Form elements and their attributes.
- Color codes.
- W3C Compliance.

For CSS
- Text formatting.
- Layout, in particular the position property.
- Responsive and adaptive design.

For JavaScript
- The DOM (Document Object Model), elements and properties.
- Data types.
- Operators.
- Number and date formatting.
- Arrays.
- Programming constructs, ie. For, While, If-Else, etc.



HTML5

When you're done with basic HTML, know the ins and outs of form and page elements, the next useful thing to know would be HTML5. It's the way of the future, or at least it will be once the World Wide Web Consortium stops dicking around and actually cements some industry standards.

More about HTML5 (http://www.w3.org/html/wg/drafts/html/master/)

Good-to-haves

I would never recommend that you start off with these. But they're such a mainstream part of the web development landscape, they're worth a mention. If you're up to speed with the basics, you may want to consider expanding in the directions listed below.


HTML5 Boilerplate and Twitter Bootstrap work great if you're pressed for time and you're trying to make it look like you know your shit.

HTML5 Boilerplate (https://html5boilerplate.com/)
Twitter Bootstrap (http://getbootstrap.com/)

If you're good with JavaScript, JavaScript libraries such as jQuery or MooTools is the next logical step in that direction. You'll do fine without them because they can be a right pain in the posterior. But they're respectable items in the resume.

jQuery (http://jquery.com/)
MooTools (http://mootools.net/)


CSS Frameworks such as SASS and LESS would come after you've mastered CSS syntax. Again, not compulsory. Know your basics first.

SASS (http://sass-lang.com/)
LESS (http://lesscss.org/)

And then there are the CMS platforms. These require a quite a bit of tweaking, a lot of it on the front-end. There are two ways to interact with these - as a non-technical user, and as a developer. You will, of course, be doing the latter.

WordPress (https://wordpress.org/)
Drupal (https://www.drupal.org/)
Joomla! (http://www.joomla.org/)
Magento (http://magento.com/)

For the record, I absolutely hate this crap. Worked with Joomla! and WordPress over a year, and never found a reason to like them.

What are my career options?

If you only know HTML, there's still a job for you in Marketing. You know those mass emails they send out, with advertisements, newsletters and all that jazz? Those are called EDMs. (Electronic Direct Marketing). Since email clients have not caught up with browser standards, the safest way to render them would be using only HTML - no CSS, no JavaScript, no forms.

But that kind of job pays miserably. Plus, if you say you want to go into web development, I assume that means you're up for a challenge.

If you know your HTML, CSS and JavaScript, and know the best practices that come with using them (W3C Compliance and cross-platform compatibility, etc), and don't wish to expand your skill-set any further beyond the front-end, you can still hack it as a Web Designer.

Next

What you need to have in your back-end repertoire.

Sunday, 8 March 2015

Web Tutorial: Infinite Scroll, a.k.a The Ngerng Effect

Everyone probably already knows what an Infinite Scroll is. But just in case you've been in a coma the past five years, I'm going to elaborate.

Sometimes, when there's a lot of content to load onto a single page, it makes more sense to only fill up the parts that the user can see, which is the entire width and height of the monitor. Then, when the user scrolls down, more content is loaded. The more the user scrolls, the more content is loaded, until there's no more content left to load. This saves buffer space and loading time.

Facebook are doing it. So are Google Plus, Instagram and Pinterest, among other social media platforms and blogging tools.

So why "The Ngerng Effect"? 

Roy Ngerng is a Singaporean blogger who ran afoul of the law last year, and is currently embroiled in a defamation suit with Prime Minister Lee Hsien Loong.

The entire saga can be found at these links:
http://mothership.sg/2014/05/blogger-roy-ngerng-receives-defamation-suit-from-pm-lee-hsien-loong-2/
https://atans1.wordpress.com/tag/roy-ngerng/
http://alvinology.com/2014/06/05/on-pap-and-defamation-suits/

Putting aside the personal and largely irrelevant question as to whose side I'm on, I'm going to tell you why I call today's web tutorial, which is about the Infinite Scroll, "The Ngerng Effect".

Here goes: Roy Ngerng is a colossal windbag.

Hey, if you don't believe me, just check out his blog at The Heart Truths. This guy goes on practically forever, repeating himself ad nauseam. He rambles on and on about how this defamation suit is a conspiracy and how he aspires to be a voice for the people, and how the government is cheating the people... well, you get the idea.

And in case you still need convincing, here are the links to the blogposts from which I derived the material for today's web tutorial.
http://thehearttruths.com/2015/02/07/pap-continues-to-whitewash-the-truth-about-the-cpf/
http://thehearttruths.com/2015/01/25/singaporeans-i-cannot-be-your-member-of-parliament-in-government/
http://thehearttruths.com/2015/01/17/the-government-has-violated-the-constitution-by-charging-us-for-holding-an-illegal-demonstration-under-the-parks-and-trees-act/

Amusing chap, eh? Wants to represent the people in Parliament, and all that. What a hero. Well, now you can be a hero too, without having to defame the Prime Minister, go through a court case and pay a hefty fine.

Some graphics you may need

Roy's very fond of inserting infographics, so we're going to do the same. Here are some sample ones.

01.png

02.png

03.png

04.png


Let the windbaggery begin! 

Start with the basic HTML code.
<!DOCTYPE html>
<html>
    <head>
        <title>The Ngerng Effect</title>
    </head>

    <body>
        <div id="container">

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

Here we have a div element named container to contain all the bombastic crap text we're going to fill it with. No real styling needed here, so this web tutorial will be sans CSS. The bulk of the magic is in the JavaScript.

Firstly, I've defined a few arrays - prefixes, suffixes, phrases and infographics, and I'm filling it with random repeated text taken from Roy Ngerng's blogposts, like so.

<!DOCTYPE html>
<html>
    <head>
        <title>The Ngerng Effect</title>
        <script>
            var prefixes=[];
            prefixes[0]="";
            prefixes[1]="";
            prefixes[2]="";
            prefixes[3]="";
            prefixes[4]="";
            prefixes[5]="My friends,";
            prefixes[6]="My fellow countrymen,";
            prefixes[7]="My fellow Singaporeans,";
            prefixes[8]="However,";
            prefixes[9]="But still,";

            var suffixes=[];
            suffixes[0]="";
            suffixes[1]="";
            suffixes[2]="";
            suffixes[3]="";
            suffixes[4]="";
            suffixes[5]=" Are you ready?";
            suffixes[6]=" We need more.";
            suffixes[7]=" You have to fight.";
            suffixes[8]=" This is not true.";
            suffixes[9]=" Will you?";

            var phrases=[];
            phrases[0]="You have to fight for yourself.";
            phrases[1]="I am very tired.";
            phrases[2]="Things will only change if you are willing to fight for yourselves.";
            phrases[3]="Singaporeans are still not willing to be ready.";
            phrases[4]="Singaporeans did not stand up, or fight back.";
            phrases[5]="The PAP set us up.";
            phrases[6]="Many Singaporeans have asked me to run for the next general election and become a member of parliament.";
            phrases[7]="I fought because I believed that at some point, Singaporeans would join in, and stand up to fight back.";
            phrases[8]="How many of you are ready for this?";
            phrases[9]="I have lost my job and pretty much my life in Singapore.";
            phrases[10]="The government has made a constitutional breach against our constitutional rights.";
            phrases[11]="We cannot allow the bullying from the prime minister and government to persist.";
            phrases[12]="We cannot allow the abuse of power to continue unchecked.";
            phrases[13]="I did not say anything that is defamatory or against the law.";
            phrases[14]="Surely things can get better.";
            phrases[15]="I still hope that we are ready for change and change will happen.";
            phrases[16]="Because they don't care, and they never cared. ";
            phrases[17]="We've waited too long.";
            phrases[18]="This is it.";
            phrases[19]="Singaporeans are blinded by their fears.";
            phrases[20]="It is up to Singaporeans now.";

            var infographics=[];
            infographics[0]="";
            infographics[1]="";
            infographics[2]="";
            infographics[3]="";
            infographics[4]="";
            infographics[5]="";
            infographics[6]="";
            infographics[7]="";
            infographics[8]="";
            infographics[9]="";
            infographics[10]="";
            infographics[11]="";
            infographics[12]="";
            infographics[13]="";
            infographics[14]="";
            infographics[15]="";
            infographics[16]="00.png";
            infographics[17]="01.png";
            infographics[18]="02.png";
            infographics[19]="03.png";  
         
        </script>
    </head>

    <body>
        <div id="container">

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

You'll notice that some of the array elements are blank. This is deliberate, because I'm going for a random effect. Sometimes, a sentence doesn't have a prefix, suffic or infographic. In the interests of proper programming, I should probably derive an actual formula. But this works just as well in a pinch!

        <script>
            var prefixes=[];
            prefixes[0]="";
            prefixes[1]="";
            prefixes[2]="";
            prefixes[3]="";
            prefixes[4]="";
            prefixes[5]="My friends,";
            prefixes[6]="My fellow countrymen,";
            prefixes[7]="My fellow Singaporeans,";
            prefixes[8]="However,";
            prefixes[9]="But still,";

            var suffixes=[];
            suffixes[0]="";
            suffixes[1]="";
            suffixes[2]="";
            suffixes[3]="";
            suffixes[4]="";
            suffixes[5]=" Are you ready?";
            suffixes[6]=" We need more.";
            suffixes[7]=" You have to fight.";
            suffixes[8]=" This is not true.";
            suffixes[9]=" Will you?";

            var phrases=[];
            phrases[0]="You have to fight for yourself.";
            phrases[1]="I am very tired.";
            phrases[2]="Things will only change if you are willing to fight for yourselves.";
            phrases[3]="Singaporeans are still not willing to be ready.";
            phrases[4]="Singaporeans did not stand up, or fight back.";
            phrases[5]="The PAP set us up.";
            phrases[6]="Many Singaporeans have asked me to run for the next general election and become a member of parliament.";
            phrases[7]="I fought because I believed that at some point, Singaporeans would join in, and stand up to fight back.";
            phrases[8]="How many of you are ready for this?";
            phrases[9]="I have lost my job and pretty much my life in Singapore.";
            phrases[10]="The government has made a constitutional breach against our constitutional rights.";
            phrases[11]="We cannot allow the bullying from the prime minister and government to persist.";
            phrases[12]="We cannot allow the abuse of power to continue unchecked.";
            phrases[13]="I did not say anything that is defamatory or against the law.";
            phrases[14]="Surely things can get better.";
            phrases[15]="I still hope that we are ready for change and change will happen.";
            phrases[16]="Because they don't care, and they never cared. ";
            phrases[17]="We've waited too long.";
            phrases[18]="This is it.";
            phrases[19]="Singaporeans are blinded by their fears.";
            phrases[20]="It is up to Singaporeans now.";

            var infographics=[];
            infographics[0]="";
            infographics[1]="";
            infographics[2]="";
            infographics[3]="";
            infographics[4]="";
            infographics[5]="";
            infographics[6]="";
            infographics[7]="";
            infographics[8]="";
            infographics[9]="";
            infographics[10]="";
            infographics[11]="";
            infographics[12]="";
            infographics[13]="";
            infographics[14]="";
            infographics[15]="";
            infographics[16]="00.png";
            infographics[17]="01.png";
            infographics[18]="02.png";
            infographics[19]="03.png";           

            function createpara()
            {
                var sentences;
                sentences=Math.floor((Math.random() * 3) + 1);

                var para="";

                for (i=1;i<=sentences;i++)
                {
                    para=para+createsentence();
                }

                return para;
            }

            function createsentence()
            {
                var prefix,phrase,suffix,infographic="";
                var sentence="";

                prefix=prefixes[Math.floor(Math.random() * (prefixes.length-1))];
                phrase=phrases[Math.floor(Math.random() * (phrases.length-1))];
                if (prefix!=""){phrase=phrase.substr(0, 1).toLowerCase() + phrase.substr(1)};

                suffix=suffixes[Math.floor(Math.random() * (suffixes.length-1))];
                infographic=infographics[Math.floor(Math.random() * (infographics.length-1))];
  
                sentence=prefix+" "+phrase+suffix+" ";

                if (infographic!=""){sentence=sentence + "<br/><br/><img src=\"" + infographic + "\"> <br/><br/>";}

                return sentence;
            }

        </script>


The createsentence() function joins some of these lines together to form a sentence. More specifically, I am taking a random item from each of these arrays and joining them to form a (somewhat) coherent sentence.

The createpara() function runs the createsentence() function from 1 to 4 times to form a paragraph.

I use the  JavaScript random() function for these, so if you want to read up on it, here's the link (http://www.w3schools.com/jsref/jsref_random.asp).

Now, we're going to define what happens when the user scrolls down. Add the following code.
        <script>
            window.onscroll=scroll;

            var prefixes=[];
            prefixes[0]="";
            prefixes[1]="";
            prefixes[2]="";
            prefixes[3]="";
            prefixes[4]="";
            prefixes[5]="My friends,";
            prefixes[6]="My fellow countrymen,";
            prefixes[7]="My fellow Singaporeans,";
            prefixes[8]="However,";
            prefixes[9]="But still,";

            var suffixes=[];
            suffixes[0]="";
            suffixes[1]="";
            suffixes[2]="";
            suffixes[3]="";
            suffixes[4]="";
            suffixes[5]=" Are you ready?";
            suffixes[6]=" We need more.";
            suffixes[7]=" You have to fight.";
            suffixes[8]=" This is not true.";
            suffixes[9]=" Will you?";

            var phrases=[];
            phrases[0]="You have to fight for yourself.";
            phrases[1]="I am very tired.";
            phrases[2]="Things will only change if you are willing to fight for yourselves.";
            phrases[3]="Singaporeans are still not willing to be ready.";
            phrases[4]="Singaporeans did not stand up, or fight back.";
            phrases[5]="The PAP set us up.";
            phrases[6]="Many Singaporeans have asked me to run for the next general election and become a member of parliament.";
            phrases[7]="I fought because I believed that at some point, Singaporeans would join in, and stand up to fight back.";
            phrases[8]="How many of you are ready for this?";
            phrases[9]="I have lost my job and pretty much my life in Singapore.";
            phrases[10]="The government has made a constitutional breach against our constitutional rights.";
            phrases[11]="We cannot allow the bullying from the prime minister and government to persist.";
            phrases[12]="We cannot allow the abuse of power to continue unchecked.";
            phrases[13]="I did not say anything that is defamatory or against the law.";
            phrases[14]="Surely things can get better.";
            phrases[15]="I still hope that we are ready for change and change will happen.";
            phrases[16]="Because they don't care, and they never cared. ";
            phrases[17]="We've waited too long.";
            phrases[18]="This is it.";
            phrases[19]="Singaporeans are blinded by their fears.";
            phrases[20]="It is up to Singaporeans now.";

            var infographics=[];
            infographics[0]="";
            infographics[1]="";
            infographics[2]="";
            infographics[3]="";
            infographics[4]="";
            infographics[5]="";
            infographics[6]="";
            infographics[7]="";
            infographics[8]="";
            infographics[9]="";
            infographics[10]="";
            infographics[11]="";
            infographics[12]="";
            infographics[13]="";
            infographics[14]="";
            infographics[15]="";
            infographics[16]="00.png";
            infographics[17]="01.png";
            infographics[18]="02.png";
            infographics[19]="03.png";           

            function scroll()
            {

            }


            function createpara()
            {
                var sentences;
                sentences=Math.floor((Math.random() * 3) + 1);

                var para="";

                for (i=1;i<=sentences;i++)
                {
                    para=para+createsentence();
                }

                return para;
            }
            function createsentence()
            {
                var prefix,phrase,suffix,infographic="";
                var sentence="";

                prefix=prefixes[Math.floor(Math.random() * (prefixes.length-1))];
                phrase=phrases[Math.floor(Math.random() * (phrases.length-1))];
                if (prefix!=""){phrase=phrase.substr(0, 1).toLowerCase() + phrase.substr(1)};

                suffix=suffixes[Math.floor(Math.random() * (suffixes.length-1))];
                infographic=infographics[Math.floor(Math.random() * (infographics.length-1))];
  
                sentence=prefix+" "+phrase+suffix+" ";

                if (infographic!=""){sentence=sentence + "<br/><br/><img src=\"" + infographic + "\"> <br/><br/>";}

                return sentence;
            }
        </script>

This is pretty straightforward. When the user scrolls, the scroll() function is triggered. Now the screen height and offset are captured. Here, we create a variable by the name of excess. screen.height is the height of your screen, and window.pageYOffset is the actual number of pixels the user has scrolled down. excess is the remainder.

            function scroll()
            {
                var excess=screen.height^window.pageYOffset;
            }

The scroll() function appends a p delement to the container div. It then fills the p element with the value returned from running the creatapara() function.

 For more about the appendchild() method, follow this link. (http://www.w3schools.com/jsref/met_node_appendchild.asp)

Now for the logic!


            function scroll()
            {
                var excess=screen.height^window.pageYOffset;
                var moretext;

                if (excess>(0.5*screen.height)&&screen.height<window.pageYOffset)
                {           
                    moretext= document.createElement("p");                
                    document.getElementById("container").appendChild(moretext);
                    moretext.innerHTML=createpara();
                }

            }

Here, we see that if the excess exceeds the screen size by more than 50%, the createpara() function kicks in, thereby diminishing the ratio of the offset to the screen size till it's less than 50% again. And this goes on forever. Just like Roy Ngerng. What a guy!

Add this to your HTML
    <body>
        <div id="container">

        </div>

        <script>
            var starttext;

            for (j=1;j<=50;j++)
            {
                    starttext= document.createElement("p");               
                    document.getElementById("container").appendChild(starttext);
                    starttext.innerHTML=createpara();
            }
        </script>

    </body>

This basically runs the createpara() function 50 times at the start, just to fill up your page. I should probably do some calculation to calibrate the number of times to the screen's height, but that's too much like work.

So run the code... 

Do you see that when you scroll down, more and more text is added to the bottom of the screen? That's the Infinite Scroll at work.

But some of these sentences don't really make sense! 

That's OK. Neither does Roy.

Just to be clear, this is not a critique of Roy Ngerng's character or the cause he claims to be fighting for. It's a critique of his writing style, which irritates the bejeezus out of me. The programmer's adage: Minimum input, maximum output. Ngerng has somehow managed to do it in reverse.

Yours infinitely,
T___T

Monday, 2 March 2015

Five Dubiously Effective Job-change Interview Tips

Interviewing is part and parcel of every professional's career journey. Some do it once a year. Some do it every six months. Some do it only when they need a new job, and some, like me, do it for the sheer hell of it.

Actually, I'm kidding. Who does this purely for fun? What I really mean to say is - I go for job interviews even when I have absolutely no intention of leaving my current job - sometimes especially when I have no intention of leaving my current job (more on that later). It keeps you in touch with what the industry wants. It keeps your speaking and presentation skills sharp. And selling yourself is probably a skill you want to keep razor sharp.

People will probably give you tips on how to dress, how to write your resume, and all that. Dos, Don'ts, the whole shebang. I'm just going to list a few things I always bear in mind while interviewing.


No consequences.

1. There are no consequences for failure.

Interviewer: There's not a lot of market for your particular skill-set...

Me: That's not what the last five interviewers said. But I'll take your word for it.

Subtext: I see what you're doing, and I'm having none of it. Save the mind games for the noobs.


Some people go to an interview thinking that they absolutely must land this job. Don't. You're just putting unnecessary pressure on yourself, and this could affect performance. The job isn't yours to lose. The job is out there, and it's anyone's to take. You're not auditioning for the fucking Yakuza. If you fail, they're not going to shoot you in the head, burn your house down and massacre your entire family. So - less pressure, more nerve, OK?

There are no consequences for failure. Ergo, there is no way to "fail" your interview. Go with the mentality that the interview is good practice for the next one. The objective, of course, is to be good enough to get a job offer. But if you don't - too bad, move on. Don't beat yourself up over not getting the job offer and get demoralized. Because you didn't lose a damn thing. The job wasn't yours in the first place!

This also means that you should feel free to adopt a take-it-or-leave-it stance. Don't make too many concessions. Be confident. Cocky, even. What are they going to do, fire you? Leave your fear behind and you can do wonders.


Don't surrender your position.

2. Don't surrender the high ground

Interviewer: Why do you want to leave your current job?

Me: I don't want to leave. I love my current job. The benefits are great, my colleagues are wonderful, and sometimes the work is really interesting. I've got no reason to leave, unless I get an offer I can't refuse.

Subtext: I don't need a new job. You need a new hire. Do the math.


The company and you may be in different negotiating positions. You can't control the company's position, but you can certainly control your own.

I mentioned earlier that sometimes I go for interviews even when I'm not looking for a new job. The reason is simple - if the company needs to hire and you need a new job, then on that front at least, you're on even terms. But if the company needs to hire and you don't need a new job, then the company is in the position where it needs to convince you to leave your current job and hop on board. That's no small advantage.

This is in line with the old adage "don't speak ill of your last company". Interviewers can smell blood. Once you tell them why you're unhappy in your current job, the key thing is that you are unhappy and you need to leave. And that's when you've surrendered any negotiating advantage you might have had.


Don't get squeezed.

3. Don't sell yourself short

Interviewer: I can hire an Indian for a third of what you're asking. And he wouldn't be any less skilled or experienced than you. Explain why I should hire you?

Me: Then hire the Indian. It's perfect business sense. I'd do it.

Subtext: If it were that much of a no-brainer to hire the Indian, we wouldn't be having this conversation, would we?


It's probably tempting to exhibit some humility. Don't overdo it. Humility is overrated, and can be used against you. You may think that penning a lower amount, lower than average, in the Expected Salary column, will sweeten the deal.

Wrong, buddy.

There is always some asshole out there who will try to get you to lower your Expected Salary, no matter how low the figure already is. There is always someone who will try to push his luck. Count on it. It's practically part of the interviewer SOP. They probably think that the cheaper you are, the better it makes them look to their superiors. Note to interviewers: It doesn't. It makes the company look cheap, and it makes you look like a stooge.

So ask for exactly what you think you deserve and don't be coy about it. Because modesty gets you nowhere. Don't give an inch. They'll take a yard and then help themselves to the entire battlefield.

You don't want me at this price? That's OK, plenty of others do. That's the frame of mind you should be in.


If you want to haggle,
talk to this guy.

4. Your requested pay is not negotiable.

Interviewer: What's the lowest amount you will accept?

Me: Exactly what it says on my resume. Sorry, I'm a web developer. Haggling is for fishmongers.

Subtext: This shit is beneath me. Move on, please.


OK, I never actually said that during an interview, but I definitely implied the heck out of it.

Some people advocate penning an amount much higher than the salary they would accept. They figure they can then negotiate later, and perhaps even end up with an amount higher than what they would have settled for. In theory, this is correct. In practice, more often than not, interviewers are pretty canny negotiators themselves. That's akin to trying to beat Tiger Woods at golf, blindfolded and armed with a hockey stick.

As a professional, I consider myself above petty haggling, and I make sure my interviewer knows it. Then again, I tend to sell myself as a no-frills, no-nonsense tech geek, so that works in my favor.


WOW!!!

5. If you're impressed, show it

Interviewer: ...and we have a Linux server as well. We're planning to implement virtualization in the near future...

Me: You have both a Linux and Windows server? Virtualization too?! That's awesome! I can totally work with this!

Subtext: That's a great setup here, and if you meet my price, I'll happily stay on.


There's no need to be a hard-ass all the time. Give credit where it's due. You want your interviewer to be impressed with you - and that goes both ways. So if something your interviewer says about the company's accomplishments/job scope/infrastructure presses your WOW button, don't be shy about showing it.

If the interviewer also happens to be someone who is going to work with you or someone whom you are going to report to, he or she will want to be assured that you're not too obnoxious to work with. A display of enthusiasm can only improve your chances.

Conclusion

While all this does not necessarily translate to a 100% success rate, more often than not, it gets me job offers.

But don't take my word for it. Your mileage may vary. You could be in a totally different industry where this doesn't apply. Plus, it takes lots of practice and big brass testicles tons of confidence for this to work.

Note: If you're a fresh grad looking for entry-level work, none of the above applies to you. Get out there and pay your goddamn dues.

Oh, and one last thing...

I know it says five tips. Don't worry, I can count. But this isn't a tip per se. More like a rider on every single tip you've seen here today.

Smile.

Smile as you negotiate. Smile with every zinger you deliver. Smile as they attempt to belittle your possible contribution to the company. Smile as you stick to your guns even as they try to make you budge from your position.

Smile the smile of ultimate confidence, the smile that says you won't be rattled, the smile that says - bring it on, bitch. I've taken worse. The smile that leaves them wondering if they've just been mocked or if you really meant it as a joke.

Consider this the icing on every single slice of cake I've offered you in this post.


Are you impressed yet? Hey, don't be shy. Show it!
T___T