TC Lazy Screening: Watching FRIENDS The First Time In My 30s!

I've been a fan of situational comedy or SitCom most people would say. For example, How I Met Your Mother & The Big Bang Theory are still two of the series I keep watching randomly until now. One of the reasons probably because of its simplicity. I remember coming back from a hard day in uni to a fresh and funny episode that didn't take much to make me laugh. It's short enough to be watched during my dinner time with all the problems that has surfaced, resolved in the end of the episode. And also, having those kind of circle who get to hang out everytime is the dream.

Among all of the series I've watched, there's one huge title that I haven't touched yet, not until recently.

I have never ever ever ever ever watched Friends.

This show, which apparently lots of other shows look up to, is finally within my reach and I've finished watching everything in around 6 days.

As like other shows, Friends gave you life lessons, valuable guidance on how to interact with people, and obviously, great times. There are lots of lessons I gathered from the show, but in a glance, here are 3 points I learnt from watching 236 episodes of F.R.I.E.N.D.S:

1. Yes, Turning 30 is Kind of Scary

Accepting the fact that you're an adult is horrifying, and realizing that everything you have imagined being an adult when you're a kid then finding out you're still not reaching it kind of a bit frightening. But we gotta enjoy it since we create memories with people around us and at some point on our lives we're gonna cherish it.

2. Starting a Relationship is Hard (pretty much throughout all of the seasons)

As everybody get histories with tons of their relationship before, you will find yourself disappointed several times because of some crushed expectations.

“Welcome to the real world. It sucks. You’re gonna love it!” – Monica

3. It's Always Seems Crazy to Change Career and Start Something New

Some people love their jobs, some don't. Finding ways to channel your passions sometimes seems taking a long time. But it's worth the time spent. And you know what they say about comfort zone is a dangerous place, that stuff is real.

Alright then, I'll get back to watch some random episodes of it, and update this post whenever I got new lessons. Ciao!

Read More →

TC Cup of Codes: Smooth Scroll to The Top

On today's post, I would like to add another enhancement to my blog. As I've been reading my posts on my phone, one thing came to my realization, it's tiring to scroll back up finding home. So I decided to look around on what I could do, which finally led to this snippet for a Scroll Up.

For this tutorial, I would like to use a circular button (you can use any button you want) with an up arrow sign. I believe, in the UX part, it won't be treated as having an ambiguous function (Up Arrow means go to the Top). 

1. Go To Your Layout

There are two ways to do this, the first option is you can go to your Theme section and edit your template. The second option is go to your Layout and add HTML/Javascript widget. For this tutorial, I'm gonna use the second way.

Choose Add A Gadget:

Pick HTML/Javascript:

2. Add The Codes Below

ouou

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32	<!--Smooth Back to Top Button Start--> <script> jQuery(document).ready(function() { var offset = 220; var duration = 500; jQuery(window).scroll(function() { if (jQuery(this).scrollTop() > offset) { jQuery('.back-to-top').fadeIn(duration);} else { jQuery('.back-to-top').fadeOut(duration);}}); jQuery('.back-to-top').click(function(event) { event.preventDefault(); jQuery('html, body').animate({scrollTop: 0}, duration); return false;})});</script> <style> div#page { max-width: 900px; margin-left: auto; margin-right: auto; padding: 20px;} .back-to-top { position: fixed; bottom: 0%; left: 50%; text-decoration: none; color: #000000; font-size: 12px; padding: 1em; display: none;} .back-to-top:hover { text-decoration: none;}</style> <a href="#" class="back-to-top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis0o6j0ShMri8ADgshCFbc6yKh9zI6p0s6h4mlRho1nyxoGUMGwQAFMhQyWjgOKllc5-W5U3viGUONvadVm2V63czLARhYRBYycwfRkpGwuX61hg4jnPoBbQOY9F4fNUuQY0_h_xVut8k/" alt="Back to Top" / /></a> <!--Smooth Back to Top Button End-->

<!--Smooth Back to Top Button Start-->
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);} else {
jQuery('.back-to-top').fadeOut(duration);}});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;})});</script>
<style>
div#page {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 20px;}
.back-to-top {
position: fixed;
bottom: 0%;
left: 50%;
text-decoration: none;
color: #000000;
font-size: 12px;
padding: 1em;
display: none;}
.back-to-top:hover {
text-decoration: none;}</style>
<a href="#" class="back-to-top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis0o6j0ShMri8ADgshCFbc6yKh9zI6p0s6h4mlRho1nyxoGUMGwQAFMhQyWjgOKllc5-W5U3viGUONvadVm2V63czLARhYRBYycwfRkpGwuX61hg4jnPoBbQOY9F4fNUuQY0_h_xVut8k/" alt="Back to Top" / /></a>
<!--Smooth Back to Top Button End-->

Let's analyze the codes part by part.

1. The <script> part

The document ready() method will specify a function to execute when the DOM is fully loaded.

?

1	jQuery(document).ready(function()

jQuery(document).ready(function()

The offset will allow you to determine when the button will show up, the duration will determine how long the animation will work (in will be used for the fade in and fade out effect)

?

1 2	var offset = 220; var duration = 500;

var offset = 220;
var duration = 500;

And the last part, here comes the magic. scrollTop() method will set or return the vertical scrollbar position for the elements. It will also use offset to determine whether the page has moved or not.

1 2 3 4 5 6 7 8	jQuery(window).scroll(function() { if (jQuery(this).scrollTop() > offset) { jQuery('.back-to-top').fadeIn(duration);} else { jQuery('.back-to-top').fadeOut(duration);}}); jQuery('.back-to-top').click(function(event) { event.preventDefault(); jQuery('html, body').animate({scrollTop: 0}, duration); return false;})});

jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);} else {
jQuery('.back-to-top').fadeOut(duration);}});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;})});

So, there you have it. A button to scroll your page up to the top after reading the article you've written. See you on another post!

Read More →