Teochew Thunder: June 2015

Sunday, 28 June 2015

Web Tutorial: The CSS Rainbowlizer

It was history in the making two days earlier, on Friday 26th June 2015. The US Supreme Court essentially legalized gay marriage nationwide. Facebook erupted with responses - outpourings of love and approval from LGBT lifestyle supporters, and disgust and consternation from naysayers. Mark Zuckerberg himself authorized a feature on Facebook to "rainbowlize" profile pictures. Instructions on how to do so are circulating around the web.

Below is Zuckerberg's profile picture.

Mark Zuckerbeg, founder of Facebook.

I'm a little late to the party, but here's my challenge - apply the rainbow filter using only CSS!

There's already a Facebook feature for that!

Why, of course there is. But this will serve as a useful little exercise for CSS and RGB! Let's use another picture of Zuckerberg for this.

zuck.jpg

We begin with some HTML.

<!DOCTYPE html>
<html>
   <head>
       <title>Gay Pride</title>
       <style>
           .gaypride
           {
               background:url(zuck.jpg) center

center no-repeat;
               width:200px;
               height:200px;
               background-size:cover;
           }
       </style>
   </head>

   <body>
       <div class="gaypride">
       </div>
   </body>
</html>

Instead of an img tag for Zuckerberg's pic, we have a div tag that uses his pic as a background image. The div has been given a class, appropriately named gaypride, for this.

height and width properties have been set to 200 pixels. Feel free to adjust!

The background-size property has been set to cover, so Zuckerberg's shit-eating grin is plastered all over the div.

Now, what do we have?

Excellent. Now to super-impose those colorful translucent bars over this pic! To do so, we create the CSS class bar.

width has been set to 100%, so whatever width your div will be eventually, no sweat! The bar covers it all the way.

position is set to relative and float to left. So anything that doesn't fit into the width of the containing div floats to the next line! Which is a certainty because your width, as noted above, has been set to 100%.

So you're probably wondering why the height is 14.5%. That's because we are going for 7 bars - Red, Orange, Yellow, Green, Blue, Indigo and Violet. And we want the entire height of the div to be covered. So 100% divided by 7 is roughly 14.5%.

More HTML. This time, divs have been added inside the first div. Each of these divs has the CSS class bar attached to it. The background colors for each one is different, obviously. And the alpha value for each bar has been set to 0.3. Again, feel free to adjust!

Now what do we have?

And here we are, ladies, gentlemen and all in-between. The CSS Rainbowlizer.

Last words on the Legislation

Warning: This may come across as flamebait. It's certainly not entirely in keeping with the neutral nature of this tech blog.

Do I approve of same-sex marriage? Hell no, I don't. Actually, I don't approve of any kind of marriage, for that matter. I happen to think matrimony is one of the most heinous forms of slavery ever invented. Freedom to love... yes, absolutely. Freedom to marry... well, let's just say that I don't think the words "freedom" and "marriage" go together.

I'm watching the wars break out on Facebook and other Social Media with no small amount of amusement. The Legislation happened, folks. Nothing any of us can do about it. So, for those who support the LGBT movement, nobody likes a bad loser, but bad winners are worse. Maybe you should quit your victory-wanking in the faces of the others. And for those who feel you suffered a great loss because it's now legal in the US for two men to live together and have vigorous noisy buttsex... suck it up, whiners. Life goes on.

Have a nice gay, I mean, day.
T___T

Tuesday, 23 June 2015

Web Tutorial: QBasic Baby Name Generator

Hello, World!

It's clearly a time for nostalgia since we'll be doing something light today - a QBasic Baby Name Generator I wrote back when I was an impressionable teenager.

Why a Name Generator?

OK, some backstory here. I was this idealistic young thing, see, and my head was filled with old-fashioned ideals like getting married and having kids. So my then-girlfriend and I would think of nice baby names. It wasn't long before I decided to use my newfound programming skills to do the work and calculate all the permutations.

Plus, I really, really wanted to test my understanding of array and nested loops.

What's in a name?

Here's the thing: I'm Singaporean Chinese. Therefore, to generate a Chinese name, we need a surname, and a given name made up of two Chinese syllables.

So fire up your QBasic Editor, let's do this thing! We begin by asking the user for his surname.

PRINT "Welcome to T___T Name Generator"
INPUT "What is your surname"; surname$

Next. we ask how many different words the user wants, to be run through the generator. You could get away with 1 or 2, but that wouldn't yield a very good sample size

PRINT "Welcome to T___T Name Generator"
INPUT "What is your surname"; surname$
INPUT "How many options do you want"; names

After we get the number of words, stored in the variable names (it's an integer, you can tell by how it doesn't have the "$" symbol after it, unlike the surname$ variable, which is a string.), we will create an array of strings middlenames$ of that size.

PRINT "Welcome to T___T Name Generator"
INPUT "What is your surname"; surname$
INPUT "How many options do you want"; names

DIM middlename$(names)

Now, we need to gather input. Get as many options for middle name syllables as the user indicated earlier. This asks the user, over and over, what syllables to use, saves each syllable into the array middlenames$ and then prints out each one as it is entered.

DIM middlename$(names)

FOR i = 0 TO (names - 1) STEP 1
    INPUT "Please enter Option:", middlenames$(i)
    record$ = "Option " + STR$(i + 1) + ": " + middlenames$(i)
    PRINT record$
NEXT i

So now we're ready to process the output! This is going to take the form of a nested For loop. The nested For loop creates names by combining the surname$ and the contents of the array middlenames$, and adding the entire generated name to the variable fullnames$.

The QBasic function LCASE$() converts the second middlename$ in the combination to all lowercase.

DIM middlename$(names)

FOR i = 0 TO (names - 1) STEP 1
    INPUT "Please enter Option:", middlenames$(i)
    record$ = "Option " + STR$(i + 1) + ": " + middlenames$(i)
    PRINT record$
NEXT i

FOR i = 0 TO (names - 1) STEP 1
    FOR j = 0 TO (names - 1) STEP 1
        fullname$ = fullname$ + surname$ + " " + middlenames$(i) + LCASE$(middlenames$(j)) + " | "
    NEXT j
NEXT i

And finally, we print out the results!

FOR i = 0 TO (names - 1) STEP 1
    FOR j = 0 TO (names - 1) STEP 1
        fullname$ = fullname$ + surname$ + " " + middlenames$(i) + LCASE$(middlenames$(j)) + " | "
    NEXT j
NEXT i

PRINT "Your Generated Results:"
PRINT fullname$

Time to test!

Compile and run. Let's see what this sucker does!

First, the program asks for your input. Enter your surname right here. Then it asks for the number of syllables you want to play with. 1 or 2 will still get you results, but let's go with 5 for more!

Now let's enter 5 different Chinese syllables.

And voila!

This works as well for Japanese names.

Just a little trip down memory lane. Here's another Chinese name for you - See Yew Soon!
T___T

Friday, 19 June 2015

Of Gratitude and Loyalty (Part 2/2)

And now, we examine the other part of the discontent within the typical employer-employee relationship...

The Disloyal Employee

How often have we heard this lament? The employer goes on and on about the opportunities he gave this employee, and this employee had the nerve to just pack up and leave because someone else was offering him more money. Gone are the days when you could count on a new hire staying on for a good five years, and growing with the company.

Growing with the company. Allow me to address this fallacy first.

Growing at different rates

In theory, "growing with the company" is a nice soundbite. In reality, all growth rates are different. We're talking about the growth of a company versus the growth of a professional. There's no growing "with" anyone. Either the company or the individual employee is going to outgrow the other at some point or other.

It happens, dude. Deal with it.

It's not to say I don't sympathize. I do! Jumping from company to company every few months is bad form, especially when the employee is just starting out in his career. The least one could do is attempt to contribute positively to his company before considering greener pastures. Job-hoppers are a valid concern.

But let's face it - you want to hire people worth hiring. And people who are worth hiring, tend to have options.

But I don't want to be a stepping stone!

How do I put this delicately? Perhaps I should ask a few pertinent questions to start with. How big is your company? What's the scope of professional growth? How much of a mover-and-shaker is this company within your industry?

Just a stepping stone, buddy.

In other words, are you on par with the giants like Microsoft, Google, Facebook or Apple? If the answer is "no", then the bad news is, your company is a stepping stone, just like every other company who isn't Microsoft, Google, Facebook or Apple.

Don't want to be a stepping stone? Grow, or suck it up.

Whatever happened to loyalty?

Let's not kid ourselves. Loyalty is a pleasant concept - to a point. The strange thing about loyalty is, it goes both ways.

Your employee is only as good as his last completed project. Should the day come when you have the opportunity to replace him with someone just as skilled but far cheaper and younger, are you claiming you wouldn't do it in a heartbeat? Come on, it's just good business. Law of the Jungle, and all that.

Law of the Jungle: Eat or be eaten.
Kill or be killed.

Well, this is the kind of loyalty employees have to expect from their employers. And this is reflected in the kind of loyalty they show in return.

Loyalty and the web developer

Any web developer worth hiring, is pro-active, an enthusiastic learner and unafraid of change. Hell, change is probably what defines (and constantly redefines) the web industry. The quintessential web developer needs to have a wide skillset because the web leverages on several technologies, all of which change almost on a monthly basis! Any web developer content to rest on his laurels quickly becomes obsolete. In this industry, stagnation equals death.

But when you hire a web developer and expect him to have these qualities, bear in mind that this may work against you. His pro-activeness, enthusiasm for new horizons and lack of change-resistance are just as likely to be applied to seeking a new job. You want your web developers to spend their free time doing their own research and upgrading their skills? Sure. Lots of learning material on the web, eh? Absolutely. Guess what else is on the web? Job opportunities, pal. Loads of them.

Having your cake, and
eating it.

You can't have your cake and eat it. If you want the kind of web developer who'll innovate and do his own research to keep in step with emerging technologies, you can't expect him to not look out for new opportunities at the same time. Being a tad unrealistic here, aren't we?

You want a long-staying employee? Sure. Get the kind of web developer who'll be content to do the same thing, with the same technology, year after year. The ones likeliest to stay longest are the ones who have very few options. In fact, they might stay long after you want them to leave!

What's the magical solution?

Here's the thing: there isn't one. Things are what they are. But adjusting your expectations to match reality will cause a lot less grief in the long run.

Allow me to demonstrate gratitude and loyalty - thank you for reading, and please come again!
T___T

Wednesday, 17 June 2015

Of Gratitude and Loyalty (Part 1/2)

The employer-developer relationship is sometimes an acrimonious one. I've often found that it's a mismatch of expectations on both sides.

In particular, developers complain about gratitude, and employers complain about loyalty.

The Ungrateful Employer

What's this about "gratitude"? Well, sometimes developers go the extra mile. They stay back after official hours to get things done, beyond the call of duty. And the employer seems to take it all for granted. No pay raise, no promotion, not even a cursory word of thanks. The prevailing attitude seems to be "I pay you, so I own you".

Employee or slave?

I'm not disagreeing (much). But I think a little mindset shift will help make things more palatable.

You see, most people think they're doing their boss a favor by going the extra mile. And when the employer fails to reciprocate, this inevitably leads to resentment.

Who benefits?

When you spend those extra hours in the office, take the extra effort to learn stuff, hone your craft and improve the quality of your work, who benefits? Sure, your boss and the company. In the short run.

When you eventually leave the company, where does all the accumulated know-how and experience go to? It stays with you, locked inside your head.

In other words, don't do it for your employer. Do it for yourself.

Recently two friends, on separate occasions, asked me certain searching questions. The first asked me if I thought I was a bit too cocky, and if I ever considered humility as an option. The second wondered how come it seemed that I wasn't pushing myself as hard as I used to.

The answer to both questions is a resounding YES.

Here, have a nice warm
slice of humble pie.

I have eaten plenty of humble pie in the past. And I used to push myself a lot harder. To insane levels. This was done with a goal in mind. If I ate enough humble pie, took enough shit, pushed myself hard and often, one fine day I would improve to the point where I would no longer need to. I would be confident enough in my own capabilities, no longer insecure about losing my job or being found wanting. I would become so good at what I did that I wouldn't have to push myself as hard to get things done.

Sure. my employers saw me stay back late. They saw me with my nose almost constantly to the grindstone. They found that I was willing to take any assignment they threw at me. Did I expect anything in return, other than getting paid on time? No, because I sure as hell wasn't doing it for their benefit.

Besides, I love what I do. They just happened to profit from it.

I'm tired of earning peanuts!

You may think your employer doesn't appreciate you, because he pays you so little. Here's a tip: Employers, in general, are cheap bastards who will pay you as little as they feel they can get away with. And unless you're raking in 3 to 5 times your monthly salary in revenue, they will begrudge you every cent they pay you. Don't take it personally, it's just business!

Being paid peanuts?

Honestly, if you are getting x dollars a month for doing a job, why should your boss feel like paying you x+15% per month to do the exact same job a year later? Expecting an automatic yearly salary increment makes little sense unless you're willing to justify it.

I had a colleague who once complained that his wife had just given birth, and that our boss hadn't increased his pay in years. As a friend, I sympathized. Ain't easy raising a baby. Price of milk and diapers, and all that. As a professional, however, the first thought that came to mind was, so you fucked your wife without a condom and expect our boss to pay for it?

He's your employer, not your buddy.

Your boss is not your friend. He is your employer. He has a company to run. Your expenditure is not his problem. He pays you what he pays you, and it's up to you to live within those means. And if you can't, then be prepared to justify a pay raise with increased value, or work somewhere else!

What, you think this is a one-sided show? I'm going to discuss The Disployal Employee in the following part.

Saturday, 13 June 2015

Five User Interface Fails

The User Interface, known as UI, is an integral part of any web application. It is the bridge between the user and the system, and vital to effective use of said system. There's where an unhealthy amount of people misunderstand UI. It doesn't have to look pretty. It has to be easy to use, and as intuitive as possible.

In my time as a web developer, I've come across some truly mystifying interface elements. These contravene common sense in a huge way. These make you wonder what the hell the developer was thinking, or if he was thinking at all. I've even been guilty of some of these.

Fail, buddy,

It happens. Sometimes developers get lazy. Sometimes they get frustrated and take the easy way out. Or sometimes, they just don't go through as much testing as they should.

1. The Time Traveler Birth Date

Please enter your Date of Birth:

Kind of clumsy, but otherwise nothing really wrong with this one. Except that when I came across this little beauty, it was 2012. The years in the dropdown list go all the way up to 2015!

Now I can accept that maybe 1 year old babies surf the site. Maybe. But a user who will be born in the next few years?! Come on.

2. The Troll Form

Contest Form

Title
Name
Email
Mobile
Address

Postal Code
Company
GST Reg
Designation
Business
Please describe your experiences in logistics, if any

In your opinion, what are the ideal conditions for freight transfer?

What do you see in the future of automation and technology?

Please describe your experience at the convention so far.

Are there any areas in which the organizers could improve on?

Long form, eh? Did you try the Submit button? Yes, entries were closed and this genius of a developer decided to just add a JavaScript alert to inform the user, after the user fills in the whole damn form and clicks the Submit button. Imagine the frustration!

I confess. I was the lazy bastard who did this back then. Got hell from my boss for it, and deservedly so. Somehow I decided that I really didn't want to go through the trouble of hiding the entire form and writing a nice informative message right at the top of the page.

3. The Unreadable Calendar

2014
San	Mun	Tus	Wen	Thu	Fry	Sat
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

Years ago, while sourcing for a suitable JavaScript calendar plugin to ~~steal~~ reference, I came across this one. Now, let me just say that the code in that plugin was brilliant. No sarcasm there. It was written by an Indian programmer. I learned a fair bit from reverse-engineering it. And one of the things I unfortunately learned was that this dude can't spell.

It doesn't matter how awesome your code is - if no one can read your calendar, it's a fail.

4. The Must-click Button

Proin a mi consectetur, fringilla lacus a, placerat lectus. Nunc placerat pretium libero quis vehicula. Proin accumsan nec lacus id bibendum. Morbi tincidunt id lorem eu luctus. Phasellus nec efficitur odio. Sed pulvinar faucibus dictum. Sed eu volutpat magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer eros lacus, malesuada eget pellentesque at, laoreet sed ipsum. In vehicula sapien et aliquet ullamcorper. Cras pretium convallis accumsan. Nulla placerat congue orci non pharetra. Nulla ornare rhoncus dapibus.

So I'm supposed to mouse-over the button for more information, and when I mouse-out, the information disappears. No problem with that, right? Until you consider the fact that this site was supposed to be on a mobile device. Since when was there a mouse-out in a touch-screen device? The user is only going to end up clicking the button whether or not he wants to.

Also, this site peddles mobile applications. How's that for irony?

Yes, I'm guilty of this one too. Kind of. It wasn't really my idea. I was given specs to fulfill, and it only occurred to me what a fail this was while I was doing it.

5. The Revolving Door

Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi eget volutpat tellus. Aenean pellentesque lectus id massa vulputate pharetra. Nunc fermentum erat et nulla tempus, nec fermentum mi rutrum. Sed mauris nisl, fermentum quis diam at, hendrerit viverra elit. Etiam erat est, tincidunt in semper nec, rhoncus maximus turpis. Quisque libero arcu, dictum vel tincidunt vitae, tempus vitae libero. Duis sed congue massa, at consectetur augue. Nullam tempus est nec libero dictum egestas. Mauris sit amet magna sed felis congue accumsan nec quis magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer consectetur porta lacus, lobortis efficitur urna dignissim maximus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ornare sapien malesuada gravida blandit. In ac ligula mollis, aliquet libero ullamcorper, egestas massa. Vivamus ornare nulla in nisl blandit euismod.
Aliquam imperdiet purus eget vehicula pulvinar. Pellentesque in lorem mauris. Maecenas suscipit sem nulla, quis mollis mauris tincidunt eget. Aenean congue lobortis mauris, vitae rutrum felis luctus ac. Donec ex lacus, luctus ut diam ac, faucibus lacinia dolor. Maecenas interdum dignissim quam eu mattis. Nam egestas urna et massa mattis ultricies porta non augue. Nullam fermentum elit justo, et gravida nisi mattis eget. Aliquam pellentesque tellus lectus, sed vulputate ipsum tincidunt id. Nullam velit ex, posuere at sagittis ornare, consectetur in nibh. Curabitur in hendrerit turpis. In augue magna, molestie nec consectetur porttitor, ultrices ut sem. Quisque sed aliquet velit. Nullam venenatis feugiat urna. Suspendisse non elit vitae lectus vestibulum dignissim. Aenean erat dui, scelerisque et fringilla eget, sodales a erat.

Back Button right next to Logout Button. A fail all by itself.

And when you consider the fact that this on a mobile device and users' fingers are generally not small enough to avoid consistently clicking on the Logout Button rather than the Back Button... boy, the word "fail" doesn't even come close. Imagine logging in, and then accidentally logging yourself out again each time you try to navigate.

For those of you privileged enough to have access to Singapore's NS Portal, try logging in via mobile to see what I mean. Information in there is supposed to be classified, so I'm not going to provide a screenshot. SAF, are you listening? I hate your portal, it stinks!

Editor's Note: At the time of this posting, it appears that the SAF has finally cottoned on to the utter fail-laciousness of their portal, and improved the layout accordingly. Well done!

Such utter fail.

Five of the most frustrating interface fails known to man. OK, I'm exaggerating. I'm sure there's worse out there, but blimey, are these annoying!

T___T

Sunday, 7 June 2015

The Tragic Case of Izabel Laxamana

A couple weeks ago in May, a teenager in Tacoma, Washington, committed suicide by jumping off a bridge apparently after a public shaming video of her was posted up by her father on Instagram.

It's a tragedy on multiple levels.

If indeed the sole cause of her suicide was the video - which, in all fairness, cannot be proven at this point - it does seem a ridiculously tiny thing to end your life over. It's trivial, some say. It's insignificant. It means nothing in the larger scheme of things. Hair will grow back. The memory will fade with time.

All valid arguments, all logical. To an emotionally balanced adult, at least. But Izabel was freshly in her teens. And like the typical teenager - young, impressionable, vulnerable, filled with confusion and conflict, chock-full to the brim with barely manageable hormones. And the typical teenager cannot be expected to face these things the same way an adult would. Earlier this year, I posted a movie review for the horror film Unfriended. In my review, I mentioned that I could not wrap my mind around the fact that the suicide victim took her own life over what apparently was a trivial matter of a video of her which went viral.

I take that all back. As an adult, it was hard for me to understand. I had totally neglected the fact that the character in question was a teenager.

Also, let us take into account the scope of the shame. When we were kids, our parents probably disciplined us. Raised voices, harsh words, the occasional beating. And let me assure you, all respect to my long-suffering parents, it did me a world of good. You may feel differently. But my point here is that all of it was in private. Even if I was screamed at in public, the only people to take note of it would be those in the immediate area, who'd probably had the same experience growing up. Barely worth a second thought.

But this girl had her hair cut off, and the experience was shared with the world. A teenager having to deal with humiliation on a global scale.

Why does this interest me?

Yeah, well. This is a tech blog, right? Why am I blogging about the suicide of a teenager halfway across the world?

The reason is simple.

Along with the wonders of the Internet and how you can create really cool stuff with web technology, I'm also interested in how web technology is being used in this day and age. Social media, for good or ill, has its own entire sub-culture. The advent of the Internet has expanded everyone's world, and in the process, ironically, it has made the world a much smaller place.

It has also given us a great deal of power, and not everyone, least of all Izabel's father, handled that power wisely.

Should Mr Laxamana be charged for child abuse?

To what end? Assuming it could actually be proven that Izabel's suicide was directly caused by the video, does this constitute child abuse? Cyberbullying comes closest, and last time I checked, it was not a crime.

Mr Laxamana was merely trying to discipline his child. Unfortunately, he got a little too creative. Perhaps he was emulating some of the other parents who had gone that route before, one notable example here. All he's guilty of, at this point, is making a mistake that possibly pushed his kid over the edge. A mistake he will have to live with for the rest of his life. Charge him for child abuse? Let's not kick a man when he's down. It probably sucks to be him, right this moment.

(Editor's Note: Some of the comments and anecdotes in the comments section of certain articles hint at domestic abuse and bullying at school. But until those are proven, my opinion remains so.)

In contrast, here in sunny Singapore...

This is what people call "cyberbullying". Pathetic much?

It's not about who took suicide and who didn't. A bunch of people talking behind your back hardly constitutes "bullying". My friends are lovely, but I'm pretty sure they say things behind my back from time to time. Does anyone see me being in a hurry to claim the status of victim? Grow up.

That's not to say Singapore doesn't have a cyberbullying problem. STOMP, anyone? But that's another topic, for another day.

Moral of the story

Be very careful the next time you shame somebody on the Internet. Especially if that person in question is very young and fragile. Internet technology has certainly made this word a far richer place, in terms of culture and experience. It has built new bridges to human communication, but its misuse is a cause for concern.

Remember - virtual bullying, real consequences.
T___T

Tuesday, 2 June 2015

The Taming of the Image Background

G'day, readers.

We've all encountered that frustrating moment where you have nicely sized placeholders, precise as you please, for containing images, but somehow that damned image refuses to conform to the dimensions you've specified. Images provided tend to come in all sizes, so you may end up having to personally trim or resize each image, which is a tedious task in and of itself.

But hold on - what if the dimensions for your placeholder changes? Maye you want thumbnails to appear slightly larger. Maybe there have been some layout changes and suddenly you less space to play with, than you originally allocated to that logo. What are you going to do, go through the entire process of trimming your images again?

Dear Lord, no.

Besides, if you're trimming those images, you need to make the pesky decision of which parts to trim and which parts not to trim.

Boy, that sure sounds like a lot of work.

CSS to the rescue!

Yup! There's a CSS property that's going to save you a whole lot of frustration. The background-size property. For this, we'll be discussing the cover and contain values.

background-size:cover ensures that the entire area of your placeholder is filled. This may lead to parts of your background image being cropped off. Below is a div measuring 200 pixels by 400 pixels . And its background image, which is 350 pixels by 250 pixels. background-size:cover produces the result below.

See? As much of the background image has been squeezed into the placeholder as possible, while ensuring that the entire div is covered.

background-size:contain ensures that all of the image is inside the placeholder. This may lead to parts of the placeholder being left uncovered. Below is the same div and background image. background-size:contain produces the result below.

Note that all of the image has been squeezed into the div. But because the image is in portrait while the div is in landscape, this leads to a fair bit of uncovered space.

Which one's more useful?

Well, that really depends on what you're going to use it for, yes? There are no blanket solutions. It all depends on context!

To illustrate, I'm going to use random football images. Because football is one of my many passions.

500 x 300

400 x 250

400 x 600

500 x 500

600 x 250

300 x 450

500 x 350

background-size:cover is better suited for a gallery of thumbnails. Because, a) you won't need all of the image to appear and b) you really want the thumbnails to be uniformly sized.

Below is a typical gallery, each thumbnail measuring 200 pixels by 150 pixels, the background-size property set to cover.

Just for contrast, I'm going to set the background-size property to contain instead, and show you the result.

Yikes, that's ugly.

Convinced yet? Moving on.

background-size:contain is better suited for a situation where you need all of the image to appear within the placeholder. For the purpose of this exercise, I'll be using the crests of some of my favorite clubs. (Yes, I do have a soft spot for Bournemouth. Don't judge me!)

200 x 287

200 x 269

200 x 334

200 x 203

216 x 250

Let's say you have a layout like this. Each thumbnail is about 100 pixels by 100 pixels. The background-size property has been set to contain.

Not too bad, eh? While all logos have differing dimensions, they've been made to confirm to a similar size.

Again, for contrast, let's try this with background-size:cover.

No. Just... no.

That's all for now. That should just about cover it. (heh heh)
T___T

Disclaimer

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

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

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

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

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

Pages