Ideas Come Cheap: January 2014

Wednesday, January 15, 2014

NUS ModCrasher: Behind the Scene #3 - Social Widget in CSS

See the Pen Social Widget Bar by HansNewbie (@HansNewbie) on CodePen.

So this is the social widget that I made for NUS ModCrasher. I put the relevant code in CodePen so you could look at it and use it if you want (Tell me if you are using it for your site!). The effects are in pure CSS, but I use JavaScript to open the link as a pop-up window - much like other websites. You can customize what you want to share in the href link as stated in the respective social sites' documentations (the links are correct - Facebook button shares Facebook website, Google+ button shares Google+ website, Twitter button links to posting Test this button - but they are not working; I assume CodePen blocks it).

NUS ModCrasher: Behind the Scene #2 - jQuery/Twitter Bootstrap Copycat on scrolling result

Topic: NUS ModCrasher

GitHub
NUS ModCrasher on GitHub

Project
NUS ModCrasher on AppSpot

This is a long overdue post,but I will write it anyway. So I wanted to have the collapsible item in ModCrasher. Yos and I were using Bootstrap - thus jQuery - but I wanted a finer control of the scroll and I didn't use any other part of Bootstrap nor jQuery initially (Yos later used it to show the map on the result page). So I was thinking, "Why don't I try making it myself? Must be fun!!" So yeah, I made the collapsible result myself. I can't remember which code I looked at, but I think it was Bootstrap/jQuery code. I followed the idea, except being more general than that.

Read this post →

Sunday, January 12, 2014

Exact Age Calculator: Behind The Scene - Button With Pure CSS

Topic: Exact Age Calculator

So I was trying to make the button to calculate more apparent. I thought about it for a while and was reminded of what the button in NUS ModCrasher looks like. So I tried to make that using CSS only. Apparently, I could achieve similar result!

Here is the sample code snippet:

<!DOCTYPE html>
<html>
<head>
    <style>
    #button {
        cursor: pointer;
        text-align: center;
        width: 200px;
        padding: 5px;
        margin: 10px;
        margin-left: auto;
        margin-right: auto;
        border: 1px solid #999;
        border-radius: 10px;
        background: #FFD119;
        background: -webkit-gradient(linear, left top, left bottom, from(#FFD119), to(#E6B800));
        background: -moz-linear-gradient(top, #FFD119, #E6B800);
        font-weight: bold;
        height: 28px;
        box-shadow: 0 -8px inset;
    }

    #button:hover {
        background: -webkit-gradient(linear, left top, left bottom, from(#E6B800), to(#FFD119));
        background: -moz-linear-gradient(top, #E6B800, #FFD119);
        margin-top: 13px;
        height: 25px;
        box-shadow: 0 -5px inset;
    }

    #button:active {
        background: #403300;
        padding-top: 10px;
        height: 20px;
        box-shadow: 0 5px #000 inset;
    }
    </style>
</head>
<body>
    <div id="button">This is the button</div>
</body>
</html>

To see it in action, you could go to my Codebits at http://www.codecademy.com/HansNewbie/codebits/PmVTjH.

Exact Age Calculator

Topic: Exact Age Calculator

Exact Age Calculator
on Codebits by Codecademy

I don't know how I came up with the idea, but I was wondering it would be cool to know exactly how old are you. The calculations are pretty rough (I don't count by birthday, but by year as 365 days and month as 30 days) and it has not been up to hour and minutes, but it is kind of working.

I was thinking it would be cool if it could be improved to prompt which country you are from then pull the data of the country's life expectancy, then we do a countdown how long do you have to live and make your dreams come true.

I am quite satisfied with it, though, especially with the button since that was actually an 'accident'; I didn't plan for it, but I thought it was hard to differentiate between the button and the Age box and I just did it on the fly.

Many thanks to Build A Calculator! track on Codecademy for helping in making this Codebits!

Have fun!

Saturday, January 11, 2014

Android Home Sample

Topic: Android Home Sample

GitHub
Home

Hey guys. I have been trying to play around with Android homescreen, but the sample code is too old for the current Android version that it won't even display well. I will try to improve the sample code bit by bit while adding styles that I want as well. This will take a very long time since I am kind of busy. Hopefully I can make what I want to use and see. :D

Ideas Come Cheap

Pages