css | Lilikha

The Ministry of Events

Posted on December 9, 2014 by Patrick Wee

And here it is! The Ministry of Events! With the Ministry of Events, you’ll be able to explore, join and create events for you and your community. Let me walk you through the website! I used heroku, so you can access my website at http://tmoe.herokuapp.com. It’s gonna be a lot of fun!

When you reach the website, you’ll be greeted by this cool picture.

After you click learn more, you’ll be brought to the homepage of the website, where you can go to the other parts of the website. Here, you can learn more about The Ministry of Events, including what you can do, and what the site has to offer.

Once you click explore, you’ll be led to a page where you can see all the categories available for you to look at. This ranges from Academics to Meetups, among others.

Once you click any of the categories, you will be led to a site which shows what’s happening now, what are upcoming events and and what’s already done. From here, you can either click on an event and find out what’s happening to that event, or navigate around the site through the navigation panel.

And the coolest part of the project is here. When you click one of the events, it’ll link you to a page where you can see the name of the event, where it’s happening and what date and time it is happening. You’ll also get a description, as well as (here comes the coolest part!) Instagram photos of the event that you’re having! (You can specify this in the Create page.)

After seeing the page of the event you’re making, you can also go to Events Central where you can see all of the events that are about to happen, that are happening now, and that are already done. This is another way you can explore events without thinking about the category. It’s an awesome way to learn about cool things happening without locking yourself to a particular category.

And then you can also add events at the very end. Just simply put in the name of the event, the category, the place and time of the event, what’s the instagram handle you want to follow and a short 180 character description of the event! (So people don’t get bored reading your description!)

And for the date, as I mentioned in my Final Project Checkpoints blog you can see here, I had to use a bootstrap add-on, and so here it is! You can easily just click on the calendar, and then select the date. If you want to select the time, you can also click on the clock at the bottom. Once you’re ready to go, click submit!

If you found this project cool and wanna build on top of it, I’ve also created an API where you can get data from the events that are populated into the website. All you have to do is to add /all for all the events and /api/category/<put category here> for a specific category. If you need anything else, you can email me too!

So that’s pretty much it! That’s how the site works. And a good site never forgets a cool 404 page. So here’s my cool 404 page!

So some final thoughts. I guess some areas for improvement would be to allow people to sign-in, as well as update and delete events. This will surely make it a more effective tool. (Now, only I can edit and delete events!) Another thing I might be able to work on is placing these events in a big calendar so people can see what’s happening from a more macro-view!

That’s all for now! I hope you enjoyed the experience! If you have any ideas or comments or violent reactions (hopefully, not because of the cat), please leave them below! I’d love to hear about how I can improve this project!

Final Project Blueprint: The Ministry of Events (Event Management)

Posted on December 8, 2014 by Patrick Wee

After thinking about it for a while, I guess the project that would most benefit the greater NYUAD community would be the event management portal. So, that’s what I’ll be working on!

So to be able to build this, I’m going to use the usual javascript, css and html with node.js for the serverside code as well as ejs so I can write javascript in the html, as well as some other tools like the body-parser(to make parsing a little bit easier), express(so that server side code will be way easier to write), request(so I can easily request data,etc.) and other stuff.

All the data I’ll make I’m posting to IBM Cloudant, as it’s easy, fun and cool. Oh, just for fun, I’m going to name for this database Dumbledore, as I name all of my databases after Harry Potter characters. This is where I’ll make requests for data, and post data too.

So that’s the basic architecture for now. I’ll post more stuff as I go along. For now, it’s time to work!

Final Project Ideas: NYU Academic Tools, Philippine Government Project and Event Portal

Posted on December 4, 2014 by Patrick Wee

And it all comes down to this. The Final Project.

Tuh-da-da-daaaaaa!

Just joking, it’s going to be fine! For this project, I guess my ethos would be to create something that people will use, and that people will really make people’s lives cooler. So here are the three ideas that I was thinking of (and their dependencies!).

NYU Academic Tools

A few days back, I was in the library with a friend, and he was trying to calculate his GPA. The thing is, there are multiple free GPA calculators out there, but he had a problem. NYUAD has a very interesting GPA calculation policy, where, for example, Freshmen grades don’t count. Also, NYUAD students take JTerm, a class that most other universities don’t have in their academic programming.

So from this, I felt the need to be able to create a platform where students will be able to do two things: calculate their official(without Freshman year grades) and unofficial GPAs(with Freshman year grades), and be able to store these numbers in a database anonymously. This will obviously make the lives of a lot of NYUAD, and NYU students easier.

Philippine Government Project
With a new president, a lot of things have been happening to e-services when it comes to the Philippines. Lots of initiatives have been started that focus on giving citizens access to the government online. For example, the Official Gazette of the Philippines now sends updates to Filipino nationals. There’s also a cool data.gov.ph initiative which opens up data for developers to build applications on top of. And the list goes on.

Idea 1:
But one thing that hasn’t improved is the service afforded by the Department of Foreign Affairs when it comes to Filipinos abroad. Being a Filipino abroad, unlike my other friends, Filipinos do not have a website where they can get clear information about embassies and consulates, or find out what they should do when they lose their passport, or these kinds of things. In fact 10% of the Philippine population, that’s 10 million people are abroad, and so there is a market for this kind of a service.

Idea 2:
With this, I was thinking of building a website where people can search embassies and get help from the Philippine government if needed.

In a similar twist, I was also thinking of creating a website where people can send emails to their representatives and senators about the issues they care about. The emails and numbers of senators and congressmen are out there, but no one really knows how to contact their senators and get their voice heard, so that’s one thing I may want to work on by creating a website where people can easily access this kind of data!

Event Portal
A few days back, I had some extra time on my hands, and I wanted to attend an event. So, naturally, to find out what was happening, I logged on to the Student Portal (a website students have access to that serves as an announcement board). I had a problem. I know the dates that the events listed were posted, but I didn’t know when they were going to happen. So what I had to do that afternoon was to look over two weeks of announcements to find that one event I was looking for. And Facebook, well, let’s just say, I don’t want my fingers to die scrolling over comments and posts and pictures and everything else in between.

The event calendar to the right hand side was also not effective as only high-level school events can be posted to the events calendar (i.e., Academic talks, etc.) If for example, I wanted to gather with friends for an ice cream party, this would not at all be possible to advertise. There were also other problems with the current system: past events would be completely deleted. This means that once an event is over, it is removed completely from the memory of the web, unless people took pictures or anything.

So, I’m thinking of creating an events portal page that will help students plan their get-togethers and events in a easy way, and find out what’s happening now, what events I missed, and what’s coming up. We’ll store events in a database and make fun things with the events that we get.

So initially, these are the project ideas that I have. I’ll think about these ideas over the weekend, and work out which one I’ll work on for now. It doesn’t mean that if I don’t do one, that I am casting that to the abyss. It’s just a matter of prioritization! I’ll get through them too soon enough! I’ll get back to you guys in a few days! Until then, love hear any of your comments!

Noli Me Tangere (Object Detect Video Player)

Posted on November 5, 2014 by Patrick Wee

And finally, it is done! Here is Noli Me Tangere (“Touch Me Not”), an object detect video player that doesn’t need any physical contact with your computer in order to pause and play video content. Using the YoutubeAPI, Popcorn.JS Library, and this library called js-objectdetect (which doesn’t have good documentation), Noli Me Tangere is finally born!

So, let me run you through the web app! You can access the app here. You’ll be welcomed by this very basic interface.

If you read through the introductions, and enter something interesting, and in this case, I’m entering “Nicki Minaj Super Bass,” and hit go, here’s what will happen.

Or you could have just hit enter!

Now you have the video up, it’s time to get interactive! Click the “Get Interactive Now!” button, and you’ll be able to control your video through your webcam! You can see yourself in the top right corner of the webpage. To pause or play the video, all you have to do is to punch the screen.

So here it is! It’s still a work in progress. The Object Detection Library isn’t exactly the most accurate. It detects even minute motions, and I’ll still be looking to improving the code! Otherwise, it’s a really cool thing you should definitely check out!

Oh, and my friend and I who initially had the Cheetos problem, we’re planning to watch a few cool videos over the weekend to test things out! I’m really happy where this project ended up in, but I’m sure there’s still lots of places for improvement!

But for now, if you haven’t yet, play with the web app yourself!

You Feeling Lucky?

Posted on November 3, 2014 by Patrick Wee

A few days ago, I was on the google homepage, and just as I was about to type something, my eyes hovered over the “I’m feeling lucky” button. There was a weird feeling I had when I was looking at this button because as soon as I typed it, the page would change to automatically produce search results. And this fascinated me so much, that I decided to build something like that but for videos!

So, “You Feeling Lucky?” is pretty much an application that takes in a few search words and takes the first thing it finds and gives it to you to enjoy! I used the YoutubeAPI and the Popcorn.JS Libary to get these things up and running. I’m hoping they serve as the backbone for Noli Me Tangere, where I will just add the object detection functionality.

If you haven’t yet, check it out here!

The Blue Eyed Monster (Awesome Image Filter)

Posted on October 19, 2014 by Patrick Wee

With the advent of programs like Adobe Photoshop, CorelDraw and Instagram, it’s now easier than ever to edit photos to your liking, especially if you are talking about filters! Whether its Valencia, EarlyBird or Nashville, you can’t disagree that they do spice up those selfies!

So, for our class, we needed to create our own filters. At first, it sounded impossible. What?! Create our own filters? How is that even possible? But after learning the logic behind these filters, which is pretty much just looping through each pixel in the image, and changing certain properties of that pixel to create the filter, it was actually quite fun to change a few numbers and operators and see how things would act. And so, with that, I am proud to present…The Blue Eyed Monster!

The reason why I called this the Blue Eyed Monster is that it alludes to the idea of a Green Eyed Monster, a character (actually coined by Shakespeare in Othello [Act III, scene 3, line 169]) known to many of us growing up. So the reason why I used a similar name is because this filter turns everything green into blue. So instead of a Green Eyed Monster, it’s a Blue Eyed Monster! (Get the joke?)

So, if you’d like to take a look at the website, it’s here! In the future, I’d like to further develop this, and work on other filters, as well playing with how these filters create different pictures! But for now, enjoy the Blue Eyed Monster!

NYUtoday: Beta Version

Posted on October 2, 2014 by Patrick Wee

This is it.

NYUtoday’s Beta Version is out! You can access the website through http://nyutoday.pancakeapps.com.

If you want to know more about NYUtoday, you can read the project blueprints here. Otherwise, I can give you a short summary. Afterwards, I’ll tell you what the next steps are for NYUtoday.

NYUtoday aims to bring together entire Global Network University through putting together social media pieces from the three portal campuses in Abu Dhabi, Shanghai and New York. The idea that the NYU community considers itself as part of the Global Network University, however, we don’t get beyond just saying that we are of it, or visit the campuses during study away. There has to be a deeper connection. It’s like knowing what’s happening to family across the globe.

So, that’s NYUtoday.

As for future improvements, I plan to streamline the locations to include the study away sites as well because they really have awesome pictures. Some next steps might also be figuring out how to make the pictures into a collage. That would make the user experience even more engaging. Another thing I will work on is integrating more of the Portal Campuses into the sites, maybe bringing in news, tweets and other sweet stuff along the way.

I put this at the very end because it might get a little technical, but to create this site, I used the OpenWeather API, Instagram API and Google Fonts API. Used a little bit of Twitter Bootstrap as well!

This is only the Beta version. Play around with it. Send me an email/comment if you have any suggestions or comments! I’ll take that into account when I work on the next version.

Stay tuned!

Number Trivia Fun: Numbers API!

Posted on September 23, 2014 by Patrick Wee

For Mashups this weekend, our homework was to come up with a cool WebAPI that incorporated one of the many free APIs available online. For this homework, I wanted to work with numbers and trivia about them, wherein when a user inputs a number, a cool fact would come up concerning that number.

So, when I went to class today, I came with a very rough version of the website. I used a numbers API. You can actually access the initial site at www.funnumbers.pancakeapps.com. The design here is pretty non-existent, but it generally does the function of what it has to do.

Go check the site out! When you enter the site, you are prompted for a number, which when you enter, it tells you a cool fact about the number you entered. There are multiple cool facts per number!

However, I wasn’t really satisfied with that, so I decided to come up with a better designed site, with a cleaner CSS and JS file. I also wanted to better work out my positioning. I also tried to make the site a little bit more responsive by setting the background image. So, the newly designed site is available at www.numbertrivia.pancakeapps.com!

So, here’s the code I used to create this Web API. All 3 files, the html, the CSS and the JavaScript are all here for you to see! Enjoy!

HTML

So, here’s my HTML file. Interesting points are that I used Google Fonts which are beautiful! Yay! Also, I used a special div in order to center the search button and the input box!

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8"/>
 <meta name="viewport" content="width=device-width">
 <title>Number Trivia!</title>
 <link rel="stylesheet" type="text/css" href="style.css"/>
 <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>

 </head>

 <body>

 <h2 align="center">Have a number?</h2>
 <h3 align="center">I have a trivia for you!</h3>
 <br><br>
 <div id="special">
 <input id="query" type="text" placeholder="enter a number here"></input> <br><br>
 <button class="pure-button" id="search">ENTER</button>
 </div>
 <h5></h5>
 <div id="resultsTarget" align="center"></div>
 <div id="footer">Developed by Patrick Wee, NYU 2017<br>Mashups 2014</div>

 <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
 <script src="wiki_ex4_script.js"></script>
 </body>
</html>

CSS

So, here’s my CSS file. I finally figured out how to add a background image

html{
padding: 50px;
margin: auto;
font-family:"Lato",Verdana, Arial, sans-serif;
font-size: 24px;
color: white;
background-image:url(http://www.skfny.com/wp-content/uploads/NEW-YORK-SKYLINE-AT-NIGHT4.jpg);
background-repeat: repeat-y;</code>

}
h2{
font-size:70px;
margin:1px;
}

h3{
font-size:30px;
margin:1px;

}
input{
font-family:Helvetica,Verdana, Arial, sans-serif;;
font-size: 24px;
text-align: center;
line-height: 30px;
width:50%;
}

button{
color:white;
font-weight: bold;
font-size: 20px;
border-radius: 10px;
margin: 0 auto;
width:30%;
height:30%;
}

button:hover {
background: #3cb0fd;
background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
text-decoration: none;
}
.find{
position: absolute;
width: 50%;
margin: 0 auto;

}

#footer{
font-size: 10px;
color:gray;
position: fixed;
bottom: 20px;
left: 20px;
right: 20px;
}

#special{
text-align: center;

}

JavaScript

Nothing very interesting here!

var numberAPI = "http://numbersapi.com/";

var numbersFunction = function(searchTerm){
$.ajax({
url: numberAPI + searchTerm,
type: 'GET',
dataType: 'jsonp',
error: function(data){
console.log("We got problems");
},
success: function(data){
console.log("WooHoo!");
console.log(data);
$("#resultsTarget").html('');
$("#resultsTarget").append(data);
}
});
};

$(document).ready(function(){
console.log("LOADED!!!!");
$("#search").click(function(){
console.log("Clicked search");
$("#resultsTarget").html("");
var newSearchTerm = $("#query").val();
console.log(newSearchTerm);
numbersFunction(newSearchTerm);
});

$("#query").keypress(function(e){
if (e.which == 13){
$("#search").trigger('click');
}
});

});

With this done, and with class talking about Instagram APIs, I’m really excited about working with the Instagram API to come up with NYUtoday. It’s gonna one cool weekend!

Javascript Journeys: Looping a Pyramid, FizzBuzz and the Chess Board

Posted on September 15, 2014 by Patrick Wee

Last, our class worked on HTML, CSS and JavaScript. We talked about how HTML provides the content, the CSS provides the styling and the JavaScript the interactivity.

For those of you who have even just a little bit of CS background might have heard of the famous programming language, Java! What’s cool about JavaScript is that it has almost no resemblance or connection to Java. It was just given that name because Java was booming at that time and the Netscape people(who worked on this language for only 14 days) wanted to make Sun (the creators of Java) happy.

So this weekend, we got a quick homework on trying JavaScript out! We had to do three things: Looping a Pyramid, FizzBuzz and the Chessboard!

Seen here is my HTML code. This code wasn’t hard to write at all. I think what was just initially confusing was how to call my Javascript functions. At first, I thought that I had to call them here in the html file, but after trial and error, I realized that you didn’t actually need to call it. So, I just placed the script tags below with the file script.js. To jazz things up, I also used Google Fonts which is actually pretty cool!

You may access a copy of the GitHub gyst here: https://gist.github.com/pkw228/5d269f95800cb6590469

THE HTML FILE

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>First Javascript Homework/First Thing I Ever Did in JavaScript</title>
        <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
    </head>
    <body>
        <h1 style="font-family:Lato">Hello! This is Patrick's Work!</h1>
        <h2 style="font-family:Lato;color:gray">This work consists of three smaller projects: Looping a Pyramid, FizzBuzz and the Chessboard! Of course, the code can't be seen as it's all the console. Check it out there!<em>Fonts made beautiful by the Google Font, Lato!</em></h2>
        <script src="script.js"></script>

    </body>
</html>

And of course, the heart of the code is the JavaScript file! Here, I initially called the three functions, and the individual codes follow after.

THE JAVASCRIPT FILE

//Patrick Sheldon Wee
//Mashups

loopingATriangle();
fizzBuzz();
chessBoard();

//Looping a Triangle
function loopingATriangle() {
    var hashes="";

    for (var i=0;i<7;i++) {
        hashes+="#";
        console.log(hashes);
    }
}
//FizzBuzz

function fizzBuzz() {
    for (var i=1; i<101;i++){
        if (i%5===0 && i%3===0){
            console.log("FizzBuzz");
        }
        if (i%3===0){
            console.log("Fizz");
        }
        if (i%5===0){
            console.log("Buzz");
        }
        else {
            console.log(i);
        }
    }
}

//Chess Board

function chessBoard() {
    var size=8;
    var halfSize=size/2;
    var design1=[];
    var design2=[];

    for (var i=0; i<halfSize;i++){
        if (design1.length<size){
            design1.push("# ");
            }

        if (design2.length<size){
            design2.push(" #");
            }
    }

    var d1=design1.join("");
    var d2=design2.join("");

    for (var i =0; i<halfSize;i++){
        console.log(d1);
        console.log(d2);
    }
}

So this is my first dive into JavaScript. It really looks like a cool language to work with. If you’re even a tiny bit interested with JavaScript, check this beginner’s guide to JavaScript called JS for Cats(http://jsforcats.com/). You guys should check it out!