forked from ta1hia/tahia-khan.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
173 lines (143 loc) · 8.32 KB
/
index.html
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!DOCTYPE html>
<html>
<head>
<title> tahia index </title>
<script type="text/javascript" src="/static/jquery-1.8.0.js"></script>
<script type="text/javascript" src="/static/frontjs.js"></script>
<script type="text/javascript" src="/static/scrollbar.js"></script>
<link rel="stylesheet" type="text/css" href="/stylesheets/style.css">
</head>
<body>
<br><br>
<div class="post-title">Tahia Khan</div>
<br><br>
<div class="nav-main">
<a class="nav-list" target="_blank" href="http://goo.gl/b2tyB">google+</a><br><br>
<a class="nav-list" target="_blank" href="https://bitbucket.org/tkhan">bitbucket</a><br><br>
<a class="nav-list" target="_blank" href="https://docs.google.com/open?id=0B6454eVzYMZvenJ4Qi1CRjZoaUk">resume</a><br><br>
<a class="nav-list" href="javascript:void(0);" id="projects-link">projects</a><br><br>
</div>
<div class="project-description" id="asciichan-desc"> <b>ASCIICHAN</b><br><br>I made this simple 4chan spoof to practise using some of the features of Google App Engine and webapp2. It includes:<br>
<ul>
<li>Using the Datastore (GAE database) to store submissions</li>
<li>Using Memcache to explore caching functionality</li>
<li>Using the Static Map API from Google Maps to display the (latitude, longitude) of where a submission was made</li>
</ul>
Here's a link to the project: <a href="http://tkapphaus.appspot.com/asciichan" target="_blank" class="project-container">asciichan</a>
</div>
<div class="project-description" id="cusblog-desc"> <b>CUSTOM BLOG</b><br><br>This is a custom blog whose backend I built from scratch using Python. Backend features of include:<br>
<ul>
<li>Using the Datastore (GAE database) to store posts</li>
<li>Using Memcache to cache the front page and individual posts, thereby reducing Datastore hits</li>
<li>Displaying the last time a Datastore request was made for each page by storing query time</li>
<li>Adding a .json extension for all pages</li>
<li>Exploring URI routing and generation of unique post IDs</li>
</ul>
Here's a link to the project: <a href="http://tkapphaus.appspot.com/blog" target="_blank" class="project-container">custom blog</a>
</div>
<div class="project-description" id="wiki-desc"> <b>WIKI</b><br><br>A wiki is a page that can be developed collaboratively by its users by allowing anyone to edit content or add new content. Backend features of this wiki include:<br>
<ul>
<li>Dynamic URI routing and generation </li>
<li>Using the Datastore (GAE database) to store posts and users</li>
<li>User authentication (hashing, cookies)</li>
</ul>
Here's a link to the project: <a href="http://wrongtahia.appspot.com/" target="_blank" class="project-container">wiki</a>
</div>
<div class="project-description" id="recipe-desc">
<div class="scrollbar" id="style-3">
<div class="force-overflow">
<b>BYTEFINDER - REVERSE RECIPE LOOK UP</b><br><br>
Bytefinder is a reverse-recipe lookup application. Its basic function is to take a list of ingredients provided by the user and determine which recipes correspond best with the ingredients given. It will return recipes in ascending order by the percentage matched with the given list of ingredients. Search results will redirect to the appropriate "Budgetbytes.com" page for the recipe.
This application is yet to be deployed because I decided to change frameworks/hosts during production. Migration to a PostgreSQL database is still underway to allow for hosting on Heroku. <br><br>
<b>Development Process</b><br><br>
This application was initially built on Google App Engine and webapp2. I switched frameworks to Flask and hosting to Heroku in order to gain experience with different frameworks. The application is available locally because the Ingredients and Recipes databases are built on SQLite3. Migration to a PostgreSQL database is still underway in order to allow for hosting on Heroku. <br><br>
<b>Backend</b><br><br>
The database of recipes and ingredients were built using a web crawler (with the use of Beautiful Soup library in simple Python scripts) to pull recipe names, prices, a list of ingredients corresponding to each recipe, and their URLs from "budgetbytes.blogspot.ca". It was initially implemented on SQLite3. I need to learn how to work with PostgreSQL in order to recreate the databases for hosting on Heroku.<br><br>
<b>Frontend</b><br><br>
The most challenging part of designing the frontend of this application was integrating the jQuery Autocomplete UI with the ingredient search bar to dynamically generate ingredient names for the user as he/she types. I was also introduced to AJAX for the first time in order to add a loading bar for the search. <br><br><br>
Here's a link to the <a href="https://bitbucket.org/tkhan/bytefinder" target="_blank" class="project-container">source code</a> of this project. Since this project hasn't actually been deployed, my cop-out solution to show off my progress is a video of the local experience! Click to show the video: <a id="show-vid" href="javascript:void(0);" class="project-container">bytefinder</a><br><br>
<iframe id="byte-vid" style="display:none" type="text/html" width="550" height="385" src="http://www.youtube.com/embed/8KK9jajifpQ" frameborder="0">
[Your browser does not support the video tag. You ought to update!]
</iframe>
<script type="text/javascript">
<!--
$("#show-vid").click(function() {
$("#byte-vid").fadeToggle('fast');
});
</script>
</div>
</div>
</div>
<div class="project-description" id="essay-desc"> <b>ESSAYS</b><br><br>Here's a link to an unhealthy obsession with single-party state leaders: <a target="_blank" href="http://sweetibnotes.blogspot.ca/p/hl-history-americas.html" target="_blank" class="project-container">essays</a>
</div>
<div class="clear"> </div>
<div id="project-list" style="display:none">
<div id="asciichan" class="project-container">> asciichan</div>
<div id="cusblog" class="project-container">> custom blog</div>
<div id="wiki" class="project-container">> wiki</div>
<div id="bytefinder" class="project-container">> reverse recipe look-up</div>
<div id="hlessays" class="project-container">> essays</div>
</div>
<script type="text/javascript">
<!--
$("#projects-link").click(function() {
$("#project-list").slideToggle();
});
$("#asciichan").click(function() {
$("#wiki-desc").fadeOut('fast');
$("#cusblog-desc").fadeOut('fast');
$("#recipe-desc").fadeOut('fast');
$("#essay-desc").fadeOut('fast');
$("#asciichan-desc").fadeToggle('fast');
});
$("#cusblog").click(function() {
$("#wiki-desc").fadeOut('fast');
$("#asciichan-desc").fadeOut('fast')
$("#recipe-desc").fadeOut('fast');
$("#essay-desc").fadeOut('fast');
$("#cusblog-desc").fadeToggle('fast');
});
$("#wiki").click(function() {
$("#cusblog-desc").fadeOut('fast');
$("#asciichan-desc").fadeOut('fast')
$("#recipe-desc").fadeOut('fast');
$("#essay-desc").fadeOut('fast');
$("#wiki-desc").fadeToggle('fast');
});
$("#bytefinder").click(function() {
$("#cusblog-desc").fadeOut('fast');
$("#asciichan-desc").fadeOut('fast')
$("#wiki-desc").fadeOut('fast');
$("#essay-desc").fadeOut('fast');
$("#recipe-desc").fadeToggle('fast');
});
$("#hlessays").click(function() {
$("#cusblog-desc").fadeOut('fast');
$("#asciichan-desc").fadeOut('fast')
$("#wiki-desc").fadeOut('fast');
$("#recipe-desc").fadeOut('fast');
$("#essay-desc").fadeToggle('fast');
});
-->
</script>
<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
}
}
</script>
</div>
<canvas onresize='resize()' id="canvas" width="900" height="200">[Your browser does not support HTML5 canvas]</canvas>
<div class="canvas-text" id="shawlispeech">hi! my name is tahia khan. i'm a computer engineering student at the university of toronto (and possibly some other things as well).<br><br>(you can move me by pressing the left and right keys) </div>
<script type="text/javascript" src="../static/requestAnimFrame.js"></script>
<script type="text/javascript" src="../static/movement.js"></script>
</body>
</html>