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 →

TC Cup of Codes: Make a Custom Profile Widget

Since, I migrated my blog to a new account, my Profile Widget has changed into a list of contributors which has made the look became unappealing to see.

Thus, in this post, I would like to share how to make a Custom Profile Widget which would show a picture (if you want), your name, a bit of description, and also a link to your profile page from it. Mine looks like below:

Without further ado, here are the steps to reproduce your profile widget:

Step 1: Go To Your Layout

Log to your Blogger account, and click on Layout.

Step 2: Click Add a Gadget

On the right panel, you'll find a structure of your blog and a list of your installed widgets. Click on Add a Gadget.

Step 3: Choose HTML/Java Script

After clicked Add a Gadget, a Pop-up will then show on your browser contains all kinds of widget features that you can add to your blog. In order to put the codes for your profile widget, click on HTML/Javascript.

Step 4: Fill The Title You Want, and Add The Code Below

There will be two columns shown, first is Title. You can fill it with anything you want.

Step 5: Add The Code Below

The second one is Content. Copy Paste all the codes below:

?

1 2 3 4 5 6 7 8 9	<a href="https://www.blogger.com/profile/17710845953662035683"><img alt="My Photo" class="profile-img" height="70" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVcAEWsp71eDpspnF3pL8TByPXQwi5ROEHF4KWwxyTp_fYbiA-wrVuXasqXAKgNE97a6GSgJ7KrH4Xkz4rBn2Uza7VSz9I0LUj0ZyVNypdUH70DVHtRUKyH1gnJT7KWNJjlavHTeY7q2pD/s113/favicont.gif" width="80" /></a> <dl class="profile-datablock"> <dt class="profile-data"> <a class="profile-name-link g-profile" href="https://www.blogger.com/profile/17710845953662035683" rel="author" style="background-image: url(//www.blogger.com/img/logo-16.png);"> Your Name </a> </dt> <dd class="profile-textblock">Your Information</dd> </dl><br/> <a class="profile-link" href="https://www.blogger.com/profile/17710845953662035683" rel="author">View my complete profile</a>

<a href="https://www.blogger.com/profile/17710845953662035683"><img alt="My Photo" class="profile-img" height="70" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVcAEWsp71eDpspnF3pL8TByPXQwi5ROEHF4KWwxyTp_fYbiA-wrVuXasqXAKgNE97a6GSgJ7KrH4Xkz4rBn2Uza7VSz9I0LUj0ZyVNypdUH70DVHtRUKyH1gnJT7KWNJjlavHTeY7q2pD/s113/favicont.gif" width="80" /></a>
<dl class="profile-datablock">
<dt class="profile-data">
<a class="profile-name-link g-profile" href="https://www.blogger.com/profile/17710845953662035683" rel="author" style="background-image: url(//www.blogger.com/img/logo-16.png);">
Your Name
</a>
</dt>
<dd class="profile-textblock">Your Information</dd> </dl><br/>
<a class="profile-link" href="https://www.blogger.com/profile/17710845953662035683" rel="author">View my complete profile</a>

• On line 1, 4, and 9, you should change the Blogger ID (mine shown as 17710845953662035683) to your ID. If you want to use other profile such as Facebook, you should change the whole text inside the quotes sign (" ").
• On line 1, change the picture inside tag "img" to any picture you want to represent you.
• On line 5, fill your name.
• On line 9, fill your description.

So there you go, you have a new personalised profile widget on your Blogger.

Source: 

1. https://too-clever-by-half.blogspot.com/2014/01/make-custom-profile-widget.html

Read More →

TC Apps Insight: Ablo, Best App of 2019!

2019 seems not to long ago yet so far away. A lot of things have happened during, as you've read in the news. I remember at the end of 2019, GooglePlay announced several categories of apps within certain criteria and on the top of it, the application which got the title as The Best App of 2019 was Ablo.

Ablo is a social networking app who will provide you a one-on-one chat room with anyone around the world (who, of course, using the app at the same time). The idea is to make you as an aircraft's passenger, take on a flight to another country and talk to people.

As any other social interactions, be it in real or digital world, you always need to be cautious, learn about the environment, accept differences and be open minded. So, please make sure that you've read the rules before stepping inside the plane.

During the waiting period, the screen will show various fun fact about random country that's quite interesting.

To add the fun, there gonna be points for any mission achieved. Here's what I've got on the First Talk!

Alright, that's gonna be my brief review for this app. Enjoy and have fun!

Android link --> https://play.google.com/store/apps/details?id=live.ablo&hl=en
iOS link --> https://apps.apple.com/us/app/ablo-make-friends-worldwide/id1437793326

Read More →

TC Midnight Mumbles: A New Decade

Fuck it. It's 2020. I'm gonna write everyday.

Read More →