tag:blogger.com,1999:blog-26093513622183519402024-03-05T17:43:57.673-08:00Machine ThinkingUnknownnoreply@blogger.comBlogger16125tag:blogger.com,1999:blog-2609351362218351940.post-59066825041881360792014-12-16T20:12:00.004-08:002014-12-16T20:12:41.104-08:00Confused Shopper Chrome ExtensionNext Cyber Monday will be a blast.<br />
<br />
<a href="https://chrome.google.com/webstore/detail/confused-shopper-prank/mhamipanbofhcddlbjfkgkgigkekhjon" target="_blank">Confused Shopper</a> is a Chrome extension that changes all of the prices on your page to appear to be between $0.01 and $0.99. Secretly upload it to a friend's computer and enjoy their reaction when they discover the great new deals of the day.<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<a href="https://chrome.google.com/webstore/detail/confused-shopper-prank/mhamipanbofhcddlbjfkgkgigkekhjon" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf1WJP7n-_o0I6KhmN-fSctzUj-fJYNinLaS67oL5Rr9y5nEePfw6oqdGm0r1temj1wQ1MbNRV9l7ybONWkPYcAvsjQ3RAgIg5hRZti-E-MSATyF0KE2CzFs-NcrAk3qkfqrddXdqbpnM/s1600/Screen+Shot+2014-12-16+at+9.40.17+PM.png" height="404" width="640" /></a><br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="" style="clear: both; text-align: left;">
<br /></div>
<div class="" style="clear: both; text-align: left;">
<span style="color: blue;">Lessons Learned:</span></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<ol>
<li><span style="color: blue;">Calling the Javascript String replace() method with a function</span></li>
<li><span style="color: blue;">Regular Expressions for a repeating patterns</span></li>
<li><span style="color: blue;">Basic setup of a Chrome extension</span></li>
</ol>
<br />
<span style="color: red;">Issues:</span><br />
<ol>
<li><span style="color: red;">Something like '$5 billion' would turn into something like '$0.45 billion', which looks silly.</span></li>
<li><span style="color: red;">Since prices are randomly generated, if a page displays the price of a single item twice the two values may be different.</span></li>
</ol>
<br />
<br />
Fixes/additional features to add:<br />
<ol>
<li>Include conditions for the words 'billion, million, hundred' etc. and change accordingly.</li>
<li>Keep equal prices equal (i.e. $10 and $10 will equal $0.22 and $0.22). </li>
<li>Let users choose the range of prices they want to display.</li>
<li>Add functionality for turning the extension off</li>
<li>Including a safeguard to keep people from actually buying anything when they are under the assumption that it costs less.</li>
</ol>
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix_AQ_ZOZ9Zay4SZuuqG2YibaWoBQHHgOXLZvOs0jPbu2josQAvCJWMHUII-B6WFLReNCrq1u6hjeJVcUV6cjwTl5wUKUckhmOCgNyBMbeKRt0BGWSkvy88uPdURWPxeoAVCCI6btDjUE/s1600/Screen+Shot+2014-12-16+at+9.37.37+PM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix_AQ_ZOZ9Zay4SZuuqG2YibaWoBQHHgOXLZvOs0jPbu2josQAvCJWMHUII-B6WFLReNCrq1u6hjeJVcUV6cjwTl5wUKUckhmOCgNyBMbeKRt0BGWSkvy88uPdURWPxeoAVCCI6btDjUE/s1600/Screen+Shot+2014-12-16+at+9.37.37+PM.png" height="314" width="640" /></a></div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2609351362218351940.post-84780401570444388142014-12-15T19:19:00.000-08:002014-12-15T19:19:00.364-08:00Keeping Heroku Apps AwakeI host my rails apps on <a href="https://www.heroku.com/" target="_blank">Heroku</a>, which is an awesome service.<br />
It was becoming a problem though, that after an hour of disuse the apps would go into idle mode. When an app is idling, the time to start it up again ranges from 8 - 15 seconds, at which point many users would just give up and click elsewhere.<br />
<br />
I fixed this by installing a Heroku add-on called <a href="https://devcenter.heroku.com/articles/scheduler#installing-the-add-on" target="_blank">Scheduler</a>. This add-on makes it possible to carry out tasks periodically. I then wrote a rake command that sent a GET request to all of my apps, keeping them from idling.<br />
<br />
<span style="color: blue;">Lessons Learned:</span><br />
<br />
<ol>
<li><span style="color: blue;">Difference between web and worker dynos</span></li>
<li><span style="color: blue;">Building custom rake tasks</span></li>
<li><span style="color: blue;">Heroku add-ons</span></li>
</ol>
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk7W-Hn7uZQkL9kN12tbYou_zDjPHI54zXN3-aWortISx4zjHldP2mXbYr8EURgyBVyPQi5XIRyvkXnbqwisoPTQ6eXoh3WVpLrzZv8lpZaD24FQwBEI1KMIDUlQIqqdZdvpW87ttYXdU/s1600/Screen+Shot+2014-12-15+at+8.31.24+PM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk7W-Hn7uZQkL9kN12tbYou_zDjPHI54zXN3-aWortISx4zjHldP2mXbYr8EURgyBVyPQi5XIRyvkXnbqwisoPTQ6eXoh3WVpLrzZv8lpZaD24FQwBEI1KMIDUlQIqqdZdvpW87ttYXdU/s1600/Screen+Shot+2014-12-15+at+8.31.24+PM.png" height="310" width="640" /></a></div>
<br />Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2609351362218351940.post-72070049217214376082014-12-11T12:34:00.002-08:002014-12-11T12:34:28.486-08:00Code Academy: Make an Interactive WebsiteI had a feeling that I haven't been jQuery to its fullest potential!<br />
This tutorial outlined some of the cool jQuery functions that can make interacting with Javascript so much easier.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.codecademy.com/en/skills/make-an-interactive-website/topics/your-first-program/jquery-introduction" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiopd_5MA1IkongKTsmj8uOKXYZavqIuFShIlYGRGj4FvNLWpfBUTxCplyDx6LUDryVY_ACna9Mau6wUAoaI_hh0WZ2-tp-C9B-tICCXYRVWDsG6TwDJZPqn7ACHIpoA6fJA27VGUre6KI/s1600/Screen+Shot+2014-12-11+at+1.56.15+PM.png" height="224" width="320" /></a></div>
<br />
<br />
<span style="color: blue;">Lessons Learned:</span><br />
<span style="color: blue;">1. jQuery animate function</span><br />
<span style="color: blue;">2. jQuery toggle function</span><br />
<span style="color: blue;">3. jQuery event handlers</span><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2609351362218351940.post-39354867550168334662014-12-10T20:41:00.000-08:002014-12-10T21:43:22.863-08:00Jasmine Testing Framework<span style="background-color: white; color: #252519; font-family: Lora, serif; font-size: 15px; line-height: 22px;">Vectors have proven to be useful wherever circles are involved, so I wrote myself a library to avoid rewriting code for every project. It includes functions for adding, subtracting, scaling and normalizing vectors. You can find the source code </span><a href="https://github.com/marytal/marytal.github.io/tree/master/jasmine-standalone-2.1.0/src" style="font-family: Lora, serif; font-size: 15px; line-height: 22px;" target="_blank">HERE</a><span style="background-color: white; color: #252519; font-family: Lora, serif; font-size: 15px; line-height: 22px;">.</span><br />
<span style="color: #252519; font-family: Lora, serif;"><span style="background-color: white; font-size: 15px; line-height: 22px;"><br /></span></span>
<span style="color: #252519; font-family: Lora, serif;"><span style="background-color: white; font-size: 15px; line-height: 22px;">I used <a href="http://jasmine.github.io/2.1/introduction.html" target="_blank">Jasmine</a> to</span></span><span style="background-color: white; color: #252519; font-family: Lora, serif; font-size: 15px; line-height: 22px;"> test my functions. </span><span style="background-color: white; color: #252519; font-family: Lora, serif; font-size: 15px; line-height: 22px;">Click </span><a href="http://github.marytal.com/jasmine-standalone-2.1.0/spec/vectorsspec.js" style="font-family: Lora, serif; font-size: 15px; line-height: 22px;" target="_blank">HERE</a><span style="background-color: white; color: #252519; font-family: Lora, serif; font-size: 15px; line-height: 22px;"> to see my specs.</span><br />
<span style="background-color: white; color: #252519; font-family: Lora, serif; font-size: 15px; line-height: 22px;">Click <a href="http://github.marytal.com/jasmine-standalone-2.1.0/SpecRunner.html" target="_blank">HERE</a> to see the Jasmine Spec Runner in action. </span><br />
<span style="background-color: white; color: #252519; font-family: Lora, serif; font-size: 15px; line-height: 22px;"><br /></span>
<span style="background-color: white; color: #252519; font-family: Lora, serif; font-size: 15px; line-height: 22px;">Got Jasmine set up thanks to <a href="http://evanhahn.com/how-do-i-jasmine/" target="_blank">THIS</a> well-written tutorial.</span><br />
<span style="background-color: white; color: #252519; font-family: Lora, serif; font-size: 15px; line-height: 22px;">Get the latest Jasmine version <a href="https://github.com/jasmine" target="_blank">HERE</a>.</span><br />
<span style="background-color: white; color: #252519; font-family: Lora, serif; font-size: 15px; line-height: 22px;"><br /></span>
<span style="background-color: white; font-family: Lora, serif; font-size: 15px; line-height: 22px;"><span style="color: blue;">Lessons Learned:</span></span><br />
<span style="background-color: white; font-family: Lora, serif; font-size: 15px; line-height: 22px;"><span style="color: blue;">1. Basics of the Jasmine testing framework</span></span><br />
<span style="background-color: white; font-family: Lora, serif; font-size: 15px; line-height: 22px;"><span style="color: blue;">2. Re-learned how to find the dot product of two vectors. Yaay!</span></span><br />
<span style="background-color: white; font-family: Lora, serif; font-size: 15px; line-height: 22px;"><span style="color: blue;"><br /></span></span><span style="color: red;">Next Steps:</span><br />
<span style="color: red;">1. Use the Jasmine beforeEach, afterEach functions</span><br />
<span style="color: red;">2. Test asynchronous data </span>
<span style="color: #252519; font-family: Lora, serif;"><span style="background-color: white; font-size: 15px; line-height: 22px;"><br /></span></span>
<span style="color: #252519; font-family: Lora, serif;"><span style="background-color: white; font-size: 15px; line-height: 22px;"><br /></span></span>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2609351362218351940.post-40802675826585998842014-12-08T14:45:00.004-08:002014-12-08T14:45:37.394-08:00Ring GameVisit game <a href="http://github.marytal.com/rings/ring.html" target="_blank">HERE</a><br />
See Github <a href="https://github.com/marytal/marytal.github.io/tree/master/rings" target="_blank">HERE</a><br />
<span style="color: blue;"><br /></span>
<span style="color: blue;">Lessons Learned:</span><br />
<span style="color: blue;">1. Google analytics tracking</span><br />
<span style="color: blue;">2. Custom shapes with KineticJS</span><br />
<br />
Problems with program:<br />
1.When the mouse is moved quickly past the rings, the program doesn't register that it had intersected with it. This makes cheating very easy.<br />
2. Since each level is randomly generated, it is possible for a level to be impossible.<br />
3. When the screen size is small enough, the Next Level button can be made to be right next to the star which, again, makes cheating possible.<br />
<br />
Problem Fixes:<br />
1. Register the mouse movement as a line instead of a point and check if the line intersects with the ring.<br />
2. Set up safeguards regulating how close rings can be to one another.<br />
3. Enable the size of the star, the player, and the radiuses of the rings to take into account the screen size.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://github.marytal.com/rings/ring.html" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsBd4A8W5aNzbpLI2K2H5RSC8-RANfnBtOwLbQgSdBsW8u9sALMf2VvFQG4kc5sH0nF-Gkb-OZ6M8RY7F8xzWQjx1T5f78nsjiDQaPV-obKk5L_qt2OIEGuZh-0F-Qr_MtWYHAG9LyYEU/s1600/Screen+Shot+2014-12-03+at+9.14.11+PM.png" height="590" width="640" /></a></div>
<br />Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2609351362218351940.post-32105058664730068932014-11-28T09:15:00.002-08:002014-11-28T09:15:33.046-08:00Gallery<h2>
<a href="http://oskar.marytal.com/" target="_blank">One Page Website</a></h2>
I made a website for a friend who wanted a place to display pictures of his welding projects, using Ruby on Rails and Knockout. This time I used Knockout to make a working lighbox instead of changing the lightbox's class from "visible" to "invisible". It was both more and less difficult.<br />
<br />
<i>More difficult because:</i><br />
I accidentally included an outdated knockout gems which produced a few errors that I just couldn't figure out. I also didn't know about Knockout's $parent and $child bindings until after I had figured out a convoluted way of producing the same effect on my own.<br />
<i><br /></i>
<i>Less difficult because:</i><br />
Knockout's 'foreach' and 'click' bindings allowed me to easily move from image to image. I would say the overall time this took me, even with the difficulties, was less than the previous implementation of the same lightbox.<br />
<br />
<br />
<span style="color: blue;">Lessons Learned:</span><br />
<span style="color: blue;">1. How to use $parent and $child binding contexts in KnockoutJS</span><br />
<span style="color: blue;">2. <span style="text-indent: -18pt;">How to use anchors to jump to numerous points on a page</span></span><br />
<span style="color: blue;"><span style="text-indent: -18pt;">3. </span><span style="text-indent: -18pt;">Improved understanding of HTML positioning and CSS features</span></span><br />
<span style="text-indent: -18pt;"><br /></span>
<div class="MsoListParagraphCxSpLast" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<o:p></o:p></div>
<!--EndFragment-->Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2609351362218351940.post-59961994216421158362014-11-26T18:43:00.003-08:002014-11-26T18:50:11.776-08:00Starry Night<h3>
<a href="http://github.marytal.com/starrynight/starrynight.html" target="_blank">Click To View</a></h3>
<span style="font-size: 13px; text-align: center;">Before you click: Music plays on page load, so mind your speakers.</span><br />
<span style="font-size: 13px; text-align: center;"><br /></span>
<b>More KineticJS and SoundJS</b><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://github.marytal.com/starrynight/starrynight.html" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWwUxkcC5r2iySoWqEJE9LpWdwCf6-29iHqQPQbl-r0MhhVEJustE23NL3uZry9hQj3MGt56VNulolfBcmJ1a5i2lJwxWeF0y1xSYrgyb1eYenSNaqg6g1gr_FFzRysdrz4t_xhBJ-7mM/s1600/Screen+Shot+2014-11-26+at+7.59.16+PM.png" height="350" width="640" /></a></div>
<br />
The Canvas starts off empty, background colour set to black. On 'mousedown' a yellow circle starts to grow, on 'mouseup' a Kinetic Tween sets it on its course. Some circles fly off of the screen but some stick around to create the appearance of a "starry night". If want what looks like a full moon in your sky, wait a few seconds before lifting your mouse up.<br />
<br />
Background Song: <a href="https://www.youtube.com/watch?v=8Sk5Ch29DrY" target="_blank">Once Upon a December</a><br />
<br />
<br />
<b>Box2D</b><br />
I want to learn to use <a href="https://code.google.com/p/box2dweb/">Box2D-Web</a>, a Javascript version of the C++ library used by Angry Birds to create and manage all their physics. I've been slowly trying to build something using the tutorials linked below under "resources".<br />
<br />
.........................................<br />
<br />
Visit Github page <a href="https://github.com/marytal/marytal.github.io/tree/master/starrynight" target="_blank">HERE</a><br />
Visit Starry Night <a href="http://github.marytal.com/starrynight/starrynight.html" target="_blank">HERE</a><br />
<br />
<br />
<b>Resources:</b><br />
<br />
<a href="http://blog.sethladd.com/2011/09/box2d-javascript-example-walkthrough.html">Box2D Tutorial</a><br />
<a href="http://www.codeproject.com/Articles/492883/Box-D-and-JavaScript-Part">Box2D Tutorial 2</a><br />
<br />
<br />
<br />
<br />
<br />Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2609351362218351940.post-72961738348607398332014-11-25T18:43:00.000-08:002014-11-25T18:43:09.054-08:00SoundJS<h3>
<a href="http://github.marytal.com/soundjs/playing_around.html" target="_blank">Crazy Minion</a></h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://github.marytal.com/soundjs/playing_around.html" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5o_4WEuveQCi6_ai0cy2HqZeTYb23d83L76ul7bUa8Oqi8POmRPoTYiRA6JVIaQyTrQnkRW85-lyaBI4bHtmyspB7hvF0dtaukwgu3Iea3729Eh7vhC86yyG6agpbwCN2K_VdSonUGIw/s1600/Screen+Shot+2014-11-25+at+8.13.36+PM.png" height="179" width="200" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<b><span style="font-size: x-small;">Click on the minion to hear a sound bite and watch an animation. </span></b><br />
<br />
<b>SoundJS</b><br />
<br />
In building this page I used both KineticJS, which I discussed in my <a href="http://machinethink.blogspot.mx/2014/11/kinetic-js.html" target="">last post</a>, and <a href="http://www.createjs.com/#!/SoundJS/documentation" target="_blank">SoundJS</a>, a Javascript library that makes working with audio "a breeze", by the authors' account at least. I followed SoundJS's online <a href="http://www.createjs.com/tutorials/Basics%20and%20Best%20Practices/">tutorial</a> closely to learn the basics of preloading, playing and pausing audio. Everything easily integrated with KineticJS.<br />
<br />
<b>KineticJS</b><br />
<br />
Working with Kinetic Images wasn't as simple as with shapes. It was necessary to load the images before making them kinetic or adding event listeners. <br />
<br />
<span style="color: blue;">Lessons Learned:</span><br />
<span style="color: blue;">1. Basic loading and playing of MP3's through SoundJS</span><br />
<span style="color: blue;">2. Using Kinetic Images</span><br />
<span style="color: blue;">3. The difference between URI's and URL's</span><br />
<br /><br />
<b>Resources:</b><br />
<a href="http://www.createjs.com/tutorials/Basics%20and%20Best%20Practices/" target="_blank">Basic and Best Practices Tutorial</a><br />
<a href="http://www.createjs.com/Docs/SoundJS/modules/SoundJS.html" target="_blank">SoundJS Documentation</a><br />
<br />Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2609351362218351940.post-67297997254953688812014-11-25T00:25:00.004-08:002014-11-25T00:25:42.401-08:00Kinetic JS<br />
<h3>
<a href="http://github.marytal.com/kineticjs/kineticjs.html" target="_blank">Math Bubbles</a></h3>
A simple game for kids to practice basic addition, subtraction, and multiplication.<br />
<br />
<b>Left click</b> on the bubbles with a correct answer:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcWB3PyVOqJT1gpGSj1uNgYM0WiyIJUmYirHT4U5-wwa5c_FWl4oOW__VB7Hq9udMW2ONtWgB6DN9UMCgN5T0byanXlOZPtJMnFoV1xCim6oRX36fx46toU9AqcMWMNmQAuVbdaebeiP0/s1600/Screen+Shot+2014-11-24+at+11.45.25+PM.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcWB3PyVOqJT1gpGSj1uNgYM0WiyIJUmYirHT4U5-wwa5c_FWl4oOW__VB7Hq9udMW2ONtWgB6DN9UMCgN5T0byanXlOZPtJMnFoV1xCim6oRX36fx46toU9AqcMWMNmQAuVbdaebeiP0/s1600/Screen+Shot+2014-11-24+at+11.45.25+PM.png" height="195" width="200" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: left;">
<b>Right click</b> on the bubbles with an incorrect answer:</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIwjEQp_n6hr9AouU2vlASqfMl6omwhlAcVGo_Xt0w4cOs6M9C1LLizSLsOitHRO726GER3QrDu8T3PMvP8JTtp1uv0MRNlugTe4ok26eMb_KjncpR_jT-AdXBtUCfRhfTGHQ6p5zv0pc/s1600/Screen+Shot+2014-11-24+at+11.45.13+PM.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIwjEQp_n6hr9AouU2vlASqfMl6omwhlAcVGo_Xt0w4cOs6M9C1LLizSLsOitHRO726GER3QrDu8T3PMvP8JTtp1uv0MRNlugTe4ok26eMb_KjncpR_jT-AdXBtUCfRhfTGHQ6p5zv0pc/s1600/Screen+Shot+2014-11-24+at+11.45.13+PM.png" height="166" width="200" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<b>Kinetic JS</b><br />
<br />
I was fiddling around with Canvas, attempting to rotate an image via animation (which turned out to be far more complicated than I'd hoped), and I stumbled upon an awesome Canvas framework. Kinetic JS "enables high performance animations" (<a href="http://kineticjs.com/" target="_blank">source</a>) - it automates so many of the tedious functions necessary for every Canvas project. It turned the whole rotating animation into something as simple as drawing a single rectangle with plain Canvas.<br />
<br />
<b>Javascript</b><br />
<br />
I ran into a few confusing bugs with my dreadful enemy, Javascript variable scope. I think that this time I really understood the scope and how to avoid running into problems with it in the future, so hopefully this'll be the last of that.<br />
<br />
Aside from learning to use Kinetic JS, this was a very education project for me because I pushed myself to use classes instead of isolated functions whenever possible. The first two languages I learned, Scheme and C, don't use classes, so it was hard for me to get into the habit.<br />
<br />
<span style="color: blue;">Lessons Learned:</span><br />
<span style="color: blue;">1. Basic animation with Kinetic JS</span><br />
<span style="color: blue;">2. Javascript variable scope understanding </span><br />
<span style="color: blue;">3. Improved Javascript class understanding</span><br />
<br />
<b>Link to Math Bubbles github folder <a href="https://github.com/marytal/marytal.github.io/tree/master/kineticjs" target="_blank">HERE</a> </b><br />
(Just a note that the Javascript and HTML are in the same file because I was just playing around and then it sort of turned into an actual project, so I didn't bother separating them.)<br />
<b>Link to Math Bubbles <a href="http://github.marytal.com/kineticjs/kineticjs.html" target="_blank">HERE</a></b><br />
<br />
<br />
<br />Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2609351362218351940.post-12527627092446575042014-11-23T17:51:00.000-08:002014-11-23T20:28:12.233-08:00Movie Log<span style="font-size: large;">Visit my <a href="http://loggit.marytal.com/welcome">Movie Log</a>!</span><br />
<br />
Below is a summary of what I learned in the making of <i><a href="http://loggit.marytal.com/welcome" target="_blank">this</a></i> app, as well as a snapshot of its functionality. I'd suggest looking through the app before reading.<br />
<br />
<b>Nokogiri</b><br />
<br />
To acquire a list of most popular movies in the last 30 years I used Nokogiri to parse movie titles from <i>http://www.boxofficemojo.com/yearly/chart/?page=1&view=releasedate&view2=domestic&yr=2014&p=.htm</i> (with page and year parameters changing). The resulting text file was used for the autocomplete function below.<br />
<br />
<span style="color: blue;">Lessons Learned:</span><br />
<span style="color: blue;">1. How to use Unix > operator to output results into a text file</span><br />
<span style="color: blue;">2. Using querySelectorAll to find a CSS selector for Nokogiri's css method</span><br />
<span style="color: blue;">3. Using HTTParty to make HTTP requests</span><br />
<br />
<br />
<b>Autocomplete</b><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAoaq_HXbo8-5mzkhs2zzeCdxuwGzFxNd3zrj5r2o8sSEIboPQgPqHkf3q539tPTVhyLksFa7qKTIsFnI1eDf-6zQHlmh8veYvVdi43QeBQOgb8yAIDBqV9ceGLLOMHrHi7sf7Yk0__L4/s1600/Screen+Shot+2014-11-23+at+6.27.14+PM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAoaq_HXbo8-5mzkhs2zzeCdxuwGzFxNd3zrj5r2o8sSEIboPQgPqHkf3q539tPTVhyLksFa7qKTIsFnI1eDf-6zQHlmh8veYvVdi43QeBQOgb8yAIDBqV9ceGLLOMHrHi7sf7Yk0__L4/s1600/Screen+Shot+2014-11-23+at+6.27.14+PM.png" height="62" width="640" /></a></div>
<br />
When a user begins typing out a movie's title into the input field (shown above), jQuery makes a request to my application's API endpoint, which returns the top five titles that most closely match the input value, determined via a regular expression. jQuery's autocomplete widget dropdown menu appears with the results.<br />
<br />
The submitted value is then sent to Rotten Tomatoes' APIs to retrieve movie attributes.<br />
<br />
The dropdown is needed to A) improve user experience and B) send more expressive values to Rotten Tomatoes' API ("Harry Potter and the Sorcerer's Stone" VS. "Harry Potter").<br />
<br />
<br />
<span style="color: blue;">Lessons learned:</span><br />
<span style="color: blue;">1. How to make a relative path in Ruby on Rails</span><br />
<span style="color: blue;">2. The value of responding with a JSON object</span><br />
<span style="color: blue;">3. Don't use the passive voice or else you'll sound politician-y</span><br />
<br />
<br />
<b>Knockout</b><br />
<br />
Once the information from Rotten Tomatoes is received, it is parsed and automatically assigned to the movie's proper attributes.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLg0aXkl1WM8XNxhxUz-2OTXIBPSJVExvJyAGs9Wugu81yXN5J4q5C_LEdU-UP9hVg-aKkAQbhcbITAi8ISBXpoJcvEHn0JHYFSOgA4Ups5VEhBthVwrE4wtRwfOVkcPFpU7otM89dyII/s1600/Screen+Shot+2014-11-23+at+7.19.26+PM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLg0aXkl1WM8XNxhxUz-2OTXIBPSJVExvJyAGs9Wugu81yXN5J4q5C_LEdU-UP9hVg-aKkAQbhcbITAi8ISBXpoJcvEHn0JHYFSOgA4Ups5VEhBthVwrE4wtRwfOVkcPFpU7otM89dyII/s1600/Screen+Shot+2014-11-23+at+7.19.26+PM.png" height="426" width="640" /></a></div>
<br />
<br />
The user can then fill in the empty fields as well as change those that have been filled automatically. To achieve this I used <a href="http://knockoutjs.com/" target="_blank">Knockout</a>, a javascript library that allowed any changes made to the values to be automatically detected and saved. <br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2fxPBh9SeneQtbEg5AHnqQUi5p2_bsZwJKMtVoKDuLN1DPCcpF2I5wQjlkf-tfRU7NN946z4xnRRp-igR1iVaV2-cSSazqiv0rPvfk7wS-rQm1wEWjNhd3zsxjUWffy6S4vVYxCkXdlc/s1600/Screen+Shot+2014-11-23+at+7.25.14+PM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2fxPBh9SeneQtbEg5AHnqQUi5p2_bsZwJKMtVoKDuLN1DPCcpF2I5wQjlkf-tfRU7NN946z4xnRRp-igR1iVaV2-cSSazqiv0rPvfk7wS-rQm1wEWjNhd3zsxjUWffy6S4vVYxCkXdlc/s1600/Screen+Shot+2014-11-23+at+7.25.14+PM.png" height="170" width="640" /></a></div>
<br />
<span style="color: blue;">Lessons Learned:</span><br />
<span style="color: blue;">1. How to use Knockout bindings</span><br />
<span style="color: blue;">2. How to use Knockout computed values to send jQuery POST requests</span><br />
<br />
<br />
<b>Lightbox</b><br />
<br />
I made a post earlier about a <a href="http://machinethink.blogspot.com/2014/11/simple-lightbox.html" target="_blank">lightbox</a> that I had made in preparation for this project. I wish I had known about Knockout back then, because it would have saved me making "visible" and "invisible" classes to hide and show the lightbox. The Knockout library has an "if" binding that would make displaying/hiding the lightbox a simpler process.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaRZwV4EMiaEfhNdDLi1RhlTgc7T7RhssVpGhmgPruAvacyS9Fz8vkRSe26W5FFitAdPlkI7t8Dz0lF_0qE81jWn865LPsTjBDe4OxgBCMHkyAiCdqlL-sm6L7fKwQHJKBnJVp9w29pDQ/s1600/Screen+Shot+2014-11-23+at+7.35.45+PM.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaRZwV4EMiaEfhNdDLi1RhlTgc7T7RhssVpGhmgPruAvacyS9Fz8vkRSe26W5FFitAdPlkI7t8Dz0lF_0qE81jWn865LPsTjBDe4OxgBCMHkyAiCdqlL-sm6L7fKwQHJKBnJVp9w29pDQ/s1600/Screen+Shot+2014-11-23+at+7.35.45+PM.png" height="395" width="400" /></a></div>
<br />
<span style="color: blue;">Lessons Learned:</span><br />
<span style="color: blue;">1. Knockout "Foreach"</span><br />
<span style="color: blue;">2. Improved understanding of Javascript classes and methods</span><br />
<span style="color: blue;">3. Overflow: scroll;</span><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Visit the movie log <a href="http://loggit.marytal.com/welcome" target="_blank">HERE</a><br />
Visit my github <a href="https://github.com/marytal" target="_blank">HERE</a><br />
<br />
<br />Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2609351362218351940.post-73640573702604155092014-11-19T14:41:00.003-08:002014-11-19T14:41:56.269-08:00Simple LightboxA simple lightbox made from HTML, CSS, and Javascript. No jQuery or plugins.<br />
Video below demonstrates functionality.<br />
<br />
<ol>
<li>Click an image to open its lightbox</li>
<li>Click left and right arrows to traverse images, X to escape</li>
<li>Press left and right arrow keys to traverse images, ESC to escape</li>
<li>While scrolling through page, lightbox stays fixed to centre</li>
</ol>
<br />
<br />
<iframe allowfullscreen="" frameborder="0" height="390" src="//www.youtube.com/embed/mtKGxXt9UI8" width="640"></iframe><br />
<br />
Visit <a href="http://github.marytal.com/simple_lightbox/lightbox.html" target="_blank">Simple Lightbox</a> here.<br />
Visit <a href="https://github.com/marytal/marytal.github.io/tree/master/simple_lightbox" target="_blank">Github Directory</a> to see code.<br />
<br />Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2609351362218351940.post-84759078215952537102014-11-08T13:00:00.003-08:002014-11-25T00:29:53.949-08:00Nokogiri<div class="MsoNormal">
This past week I learned how to use nokogiri, a Ruby gem
that allows for “the ability to search documents via CSS3 selectors” (<a href="https://rubygems.org/gems/nokogiri/versions/1.6.4-x86-mingw32">RubyGems</a>). Crazy useful!</div>
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal" style="tab-stops: 97.65pt;">
<span style="mso-tab-count: 1;"> </span><o:p></o:p></div>
<div class="MsoNormal">
I needed a list of the most popular movies from 1980 – 2014
but I couldn’t find a text file online that wasn’t too exclusive or too
extensive. Finally, I found this website: <a href="http://www.boxofficemojo.com/yearly/chart/?page=2&view=releasedate&view2=domestic&yr=1982&p=.htm">LINK</a>, which had the right idea – but since they had no API for me to use I was forced to extract data on my own, yay!</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
See my work <i>here</i>. (coming soon) </div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Resources: <o:p></o:p></div>
<div class="MsoNormal">
<a href="http://www.nokogiri.org/tutorials/">http://www.nokogiri.org/tutorials/</a><o:p></o:p></div>
<div class="MsoNormal">
<a href="https://rubygems.org/gems/nokogiri">https://rubygems.org/gems/nokogiri</a><o:p></o:p></div>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<!--[if gte mso 9]><xml>
<w:WordDocument>
<w:View>Normal</w:View>
<w:Zoom>0</w:Zoom>
<w:TrackMoves/>
<w:TrackFormatting/>
<w:PunctuationKerning/>
<w:ValidateAgainstSchemas/>
<w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid>
<w:IgnoreMixedContent>false</w:IgnoreMixedContent>
<w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText>
<w:DoNotPromoteQF/>
<w:LidThemeOther>EN-US</w:LidThemeOther>
<w:LidThemeAsian>JA</w:LidThemeAsian>
<w:LidThemeComplexScript>X-NONE</w:LidThemeComplexScript>
<w:Compatibility>
<w:BreakWrappedTables/>
<w:SnapToGridInCell/>
<w:WrapTextWithPunct/>
<w:UseAsianBreakRules/>
<w:DontGrowAutofit/>
<w:SplitPgBreakAndParaMark/>
<w:EnableOpenTypeKerning/>
<w:DontFlipMirrorIndents/>
<w:OverrideTableStyleHps/>
<w:UseFELayout/>
</w:Compatibility>
<m:mathPr>
<m:mathFont m:val="Cambria Math"/>
<m:brkBin m:val="before"/>
<m:brkBinSub m:val="--"/>
<m:smallFrac m:val="off"/>
<m:dispDef/>
<m:lMargin m:val="0"/>
<m:rMargin m:val="0"/>
<m:defJc m:val="centerGroup"/>
<m:wrapIndent m:val="1440"/>
<m:intLim m:val="subSup"/>
<m:naryLim m:val="undOvr"/>
</m:mathPr></w:WordDocument>
</xml><![endif]--><!--[if gte mso 9]><xml>
<w:LatentStyles DefLockedState="false" DefUnhideWhenUsed="true"
DefSemiHidden="true" DefQFormat="false" DefPriority="99"
LatentStyleCount="276">
<w:LsdException Locked="false" Priority="0" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Normal"/>
<w:LsdException Locked="false" Priority="9" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="heading 1"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 2"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 3"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 4"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 5"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 6"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 7"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 8"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 9"/>
<w:LsdException Locked="false" Priority="39" Name="toc 1"/>
<w:LsdException Locked="false" Priority="39" Name="toc 2"/>
<w:LsdException Locked="false" Priority="39" Name="toc 3"/>
<w:LsdException Locked="false" Priority="39" Name="toc 4"/>
<w:LsdException Locked="false" Priority="39" Name="toc 5"/>
<w:LsdException Locked="false" Priority="39" Name="toc 6"/>
<w:LsdException Locked="false" Priority="39" Name="toc 7"/>
<w:LsdException Locked="false" Priority="39" Name="toc 8"/>
<w:LsdException Locked="false" Priority="39" Name="toc 9"/>
<w:LsdException Locked="false" Priority="35" QFormat="true" Name="caption"/>
<w:LsdException Locked="false" Priority="10" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Title"/>
<w:LsdException Locked="false" Priority="1" Name="Default Paragraph Font"/>
<w:LsdException Locked="false" Priority="11" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Subtitle"/>
<w:LsdException Locked="false" Priority="22" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Strong"/>
<w:LsdException Locked="false" Priority="20" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Emphasis"/>
<w:LsdException Locked="false" Priority="59" SemiHidden="false"
UnhideWhenUsed="false" Name="Table Grid"/>
<w:LsdException Locked="false" UnhideWhenUsed="false" Name="Placeholder Text"/>
<w:LsdException Locked="false" Priority="1" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="No Spacing"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading Accent 1"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List Accent 1"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid Accent 1"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1 Accent 1"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2 Accent 1"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1 Accent 1"/>
<w:LsdException Locked="false" UnhideWhenUsed="false" Name="Revision"/>
<w:LsdException Locked="false" Priority="34" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="List Paragraph"/>
<w:LsdException Locked="false" Priority="29" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Quote"/>
<w:LsdException Locked="false" Priority="30" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Intense Quote"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2 Accent 1"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1 Accent 1"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2 Accent 1"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3 Accent 1"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List Accent 1"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading Accent 1"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List Accent 1"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid Accent 1"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading Accent 2"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List Accent 2"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid Accent 2"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1 Accent 2"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2 Accent 2"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1 Accent 2"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2 Accent 2"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1 Accent 2"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2 Accent 2"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3 Accent 2"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List Accent 2"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading Accent 2"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List Accent 2"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid Accent 2"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading Accent 3"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List Accent 3"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid Accent 3"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1 Accent 3"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2 Accent 3"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1 Accent 3"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2 Accent 3"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1 Accent 3"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2 Accent 3"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3 Accent 3"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List Accent 3"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading Accent 3"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List Accent 3"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid Accent 3"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading Accent 4"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List Accent 4"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid Accent 4"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1 Accent 4"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2 Accent 4"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1 Accent 4"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2 Accent 4"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1 Accent 4"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2 Accent 4"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3 Accent 4"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List Accent 4"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading Accent 4"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List Accent 4"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid Accent 4"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading Accent 5"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List Accent 5"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid Accent 5"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1 Accent 5"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2 Accent 5"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1 Accent 5"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2 Accent 5"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1 Accent 5"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2 Accent 5"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3 Accent 5"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List Accent 5"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading Accent 5"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List Accent 5"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid Accent 5"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading Accent 6"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List Accent 6"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid Accent 6"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1 Accent 6"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2 Accent 6"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1 Accent 6"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2 Accent 6"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1 Accent 6"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2 Accent 6"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3 Accent 6"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List Accent 6"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading Accent 6"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List Accent 6"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid Accent 6"/>
<w:LsdException Locked="false" Priority="19" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Subtle Emphasis"/>
<w:LsdException Locked="false" Priority="21" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Intense Emphasis"/>
<w:LsdException Locked="false" Priority="31" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Subtle Reference"/>
<w:LsdException Locked="false" Priority="32" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Intense Reference"/>
<w:LsdException Locked="false" Priority="33" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Book Title"/>
<w:LsdException Locked="false" Priority="37" Name="Bibliography"/>
<w:LsdException Locked="false" Priority="39" QFormat="true" Name="TOC Heading"/>
</w:LatentStyles>
</xml><![endif]-->
<!--[if gte mso 10]>
<style>
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:"Table Normal";
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin:0cm;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:12.0pt;
font-family:Cambria;
mso-ascii-font-family:Cambria;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Cambria;
mso-hansi-theme-font:minor-latin;}
</style>
<![endif]-->
<!--StartFragment-->
<!--EndFragment--><br />
<div class="MsoNormal">
<br /></div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2609351362218351940.post-86494128221374960912014-11-08T12:54:00.003-08:002014-11-08T12:54:49.861-08:00Getting Acquainted With Classes<div class="MsoNormal" style="background-color: white; color: #333333; font-family: 'Helvetica Neue Light', HelveticaNeue-Light, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 19.6000003814697px; margin: 0px; outline: none; padding: 0px; text-align: justify;">
<span style="line-height: 19.6000003814697px;">I spent the last couple of hours writing a Book class with methods that assign a title, find the most common words, break up pages, replace all instances of a word with another, etc. Ran into some issues with runtime since the input (a whole book) was rather large. Eventually improved runtime from n^2 to nlog(n), which made a big difference.</span></div>
<div class="MsoNormal" style="background-color: white; color: #333333; font-family: 'Helvetica Neue Light', HelveticaNeue-Light, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 19.6000003814697px; margin: 0px; outline: none; padding: 0px; text-align: justify;">
<o:p></o:p></div>
<div class="MsoNormal" style="background-color: white; color: #333333; font-family: 'Helvetica Neue Light', HelveticaNeue-Light, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 19.6000003814697px; margin: 0px; outline: none; padding: 0px; text-align: justify;">
<br /></div>
<div class="MsoNormal" style="background-color: white; color: #333333; font-family: 'Helvetica Neue Light', HelveticaNeue-Light, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 19.6000003814697px; margin: 0px; outline: none; padding: 0px; text-align: justify;">
I’m really starting to see the value that classes bring. I’d never used them with C or Scheme, and only a very limited amount with Javascript - so maybe now I can start to reap their benefits.<o:p></o:p></div>
<div class="MsoNormal" style="background-color: white; color: #333333; font-family: 'Helvetica Neue Light', HelveticaNeue-Light, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 19.6000003814697px; margin: 0px; outline: none; padding: 0px; text-align: justify;">
<br /></div>
<div class="MsoNormal" style="background-color: white; color: #333333; font-family: 'Helvetica Neue Light', HelveticaNeue-Light, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 19.6000003814697px; margin: 0px; outline: none; padding: 0px; text-align: justify;">
<span style="color: blue;">Lessons Learned:<o:p></o:p></span></div>
<div class="MsoNormal" style="background-color: white; color: #333333; font-family: 'Helvetica Neue Light', HelveticaNeue-Light, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 19.6000003814697px; margin: 0px; outline: none; padding: 0px; text-align: justify;">
</div>
<ol style="background-color: white; color: #333333; font-family: 'Helvetica Neue Light', HelveticaNeue-Light, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 19.6000003814697px; list-style-image: initial; list-style-position: initial; margin: 0.5em 0px; outline: none; padding: 0px 0px 0px 2em; text-align: justify;">
<li style="margin: 0px; outline: none; padding: 0px;"><span style="color: blue;">Uses for class variables</span></li>
<li style="margin: 0px; outline: none; padding: 0px;"><span style="color: blue;">The basics of Regular Expressions</span></li>
<li style="margin: 0px; outline: none; padding: 0px;"><span style="color: blue;">Using Procs to avoid recalculations</span></li>
</ol>
<div style="text-align: justify;">
<span style="color: blue; font-family: Helvetica Neue Light, HelveticaNeue-Light, Helvetica Neue, Helvetica, Arial, sans-serif;"><span style="font-size: 14px; line-height: 19.6000003814697px;"><br /></span></span></div>
<div style="text-align: justify;">
<span style="font-family: Helvetica Neue Light, HelveticaNeue-Light, Helvetica Neue, Helvetica, Arial, sans-serif;"><span style="font-size: 14px; line-height: 19.6000003814697px;">See link to github file <i>here</i>.</span></span></div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2609351362218351940.post-49910240714199128002014-11-08T12:52:00.002-08:002014-11-08T12:52:18.023-08:00Blobs and Buttons<b><a href="http://blobs.marytal.com/">Blobs</a></b><br />
<br />
This Ruby on Rails app uses canvas (HTML5, Javascript) to draw the "blobs". I haven't learned too much about asynchronous programming in Javascript so some of the organization is kind of wild. I hope to cover that with my next project.<br />
<br />
Back to the blobs: Go and make your own! Remember to feed and pet your blob often, or else s/he'll get sad. Just click the strawberry once to pick it up, then click it once more over the blob to feed your special friend. Same goes for petting.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://blobs.marytal.com/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkH5Oce0j2ko8DZOs_eZ4y1mkf-pzIBrrH0D193xtSDcwlgjrnRd5RbFIoc2QqSFuqBWZrr1dwKD9mF9FXSuTJd_mO5YVY2Sv3qdafQ-a5-p4O7fOAxSxmCCkIAcMxyuL6CYzkPZeB9oOl/s1600/Screen+Shot+2014-10-15+at+11.44.23+AM.png" height="244" width="320" /></a></div>
<br />
<br />
<br />
<div>
<span style="color: blue;">Lessons Learned:</span></div>
<div>
</div>
<ol>
<li><span style="color: blue;">PUT requests in Rails </span></li>
<li><span style="color: blue;">Rails environments (development, production, etc.)</span></li>
<li><span style="color: blue;">Using getters to set model attributes</span></li>
</ol>
<br />
<b><a href="http://useless-buttons.marytal.com/">Useless Buttons</a></b><br />
<br />
With this project I was mostly trying to get accustomed to using HAML (<a href="http://haml.info/">haml.info</a>), a markup language to replace ERB.<br />
<br />
<span style="color: blue;">Lessons Learned:</span><br />
<ol>
<li><span style="color: blue;">Basic HAML</span></li>
<li><span style="color: blue;">Basic SASS</span></li>
<li><span style="color: blue;">Uploading a database to Heroku</span></li>
<li><span style="color: blue;">Benefits of Relative vs. Absolute positioning</span></li>
</ol>
<br />
Try and get a new high score for one or more of the buttons! :)<br />
Or do what Shea did (cheater) and send your own PUT request to the necessary URL. >:(<br />
<br />
<br />
<br />Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2609351362218351940.post-81596708880598744252014-11-08T12:51:00.004-08:002014-11-25T00:34:04.657-08:00SweepRules for <a href="http://github.marytal.com/circle_soccer/many_circles.html">Sweep</a>:<br />
<div>
1. Get the green circles to the green side, red circles to the red side, etc. </div>
<div>
2. Match bombs (black circles) with the colour of their outlines.<br />
3. (Level 2 only) One point per second will be deducted until the white bomb is caught.</div>
<div>
<br /></div>
<div>
The current odds of getting a black bomb are 1 per 13 circles on level 1, and 1 per 5 circles on level 2.</div>
<div>
<br /></div>
<div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://github.marytal.com/circle_soccer/many_circles.html" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvuRtULz06agW4JqRrWQCWzNwsQ6C7f-hpG6cQPpIEML6R4961_IUZaRO524-afnH5tUJH8WKzn5aqka-fgCaxBBDQ6q4Y6wxh_LnQreo_eB-xLg9LUJnrtXxjRMQad6ynTVVWI6JCLVFI/s1600/Screen+Shot+2014-09-25+at+12.59.44+AM.png" height="369" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div>
On a side note, both <a href="http://github.marytal.com/catch_circle/repell.html">Chase the Circle</a> and <a href="http://github.marytal.com/catch_circle/circle.html">Circle Drawing</a> have been updated.<br />
Circle Drawing now has a button that allows users to save their pictures, and Chase the Circle alerts users when their circle is out of bounds.<br />
<br />
Happy Rosh Ha Shana! (Jewish New Year)<br />
<div>
<br />
<div>
<br /></div>
</div>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2609351362218351940.post-30882170055929406622014-11-08T12:49:00.003-08:002014-11-25T00:33:32.813-08:00Fun With CanvasI've been learning to use Canvas these past couple of days. It's a tool that "allows for dynamic, scriptable rendering of 2D shapes and bitmap images" according to Wikipedia<span style="color: #222222; font-family: arial, sans-serif;"><span style="background-color: white; line-height: 19.2000007629395px;">.</span></span> At the bottom of this post are some good resources for anyone who is interested.<br />
<br />
It's amazing how the most difficult things to program often look very simple.<br />
<br />
First: <a href="http://github.marytal.com/catch_circle/repell.html" target="_blank">Chase the Circle</a><br />
This looks much simpler than it is. In order to get a natural movement from the circle I had to subtract the coordinates of the mouse from the coordinates of the circle's centre. AKA: Vectors! (Thanks Mrs. Hill!) Then I had to normalize the vector and add the normalized result to the original coordinates of the centre. Craaayzaay.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://github.marytal.com/catch_circle/repell.html" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpXjg62U38QZf1n71kcD8tNUmVYj-0XGsQdIr-Nt7673YUZ0N650ouWGSM7WWtSo9a4wzrEm8F0LtSsutBktM8zk9JVil1_DOpQ61HxEVuBemDPT2zvHE0oXZmbNLwK5G0inbIs3yrZk6E/s1600/Screen+Shot+2014-09-22+at+5.38.00+PM.png" height="121" width="200" /></a></div>
<br />
<br />
If you'd like to know how to catch the circle (by cheating), you can highlighting the next line. There are a few ways to do it.<br />
<span style="color: white;">Right click, then move your mouse to the circle.</span><br />
<br />
<br />
<br />
This one is my favourite of the three: <a href="http://github.marytal.com/draw_circles/circle.html" target="_blank">Circle Drawing</a><br />
It started off with a funny glitch while trying to make "Chase the Circle", but I liked it and decided to make it its own project. Shea mentioned that it looks like Windows when stuck. I wasted a lot of time playing around with it. Refresh the page if you want to start over.<br />
<br />
<br />
<a href="http://github.marytal.com/draw_circles/circle.html" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3VRwk3WIr7gowiow9zx0tJWtfJikuXOPUFbxgh0ayU04-F09Me2LemdnhFc3rivkMgKwNwuM6fTTu64RMRTxGFchWpJ6a952wL7mKmto8oNKjmlGhji0bK9sHCsk9eyfYKcQe2Dvl52fN/s1600/Screen+Shot+2014-09-22+at+5.37.36+PM.png" height="132" width="320" /></a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Last one: <a href="http://github.marytal.com/circle_soccer/many_circles.html" target="_blank">Sweep</a><br />
I intend to turn this one into an actual game. I was thinking the objective would be getting the circles into their proper "goal posts" by colour. I welcome suggestions/ideas!<br />
The challenging aspect with this project was applying the functions previously used on one circle to an array. Working on this one made me feel much more comfortable with Javascript EventListeners, functions, naming conventions, and the organization of code.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://github.marytal.com/circle_soccer/many_circles.html" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiry0D0idW-Wdm6dOre6G4WrfH4Da2J_B6FDMerSg41OwuRHC6qKh0YJHvo9V_Wk1KJrxu9ppjIUqyo9j3EEd849ioS36dBAe1Rl6OhIEBU1d7_1FmI5kvgYBU2U8ELkrCAtWqmngrxL6xH/s1600/Screen+Shot+2014-09-22+at+5.36.51+PM.png" height="138" width="320" /></a></div>
Oh what fun :)<br />
<br />
<br />
Resources:<br />
<a href="http://www.w3schools.com/html/html5_canvas.asp">http://www.w3schools.com/html/html5_canvas.asp</a><br />
<a href="http://www.html5canvastutorials.com/tutorials/html5-canvas-element/">http://www.html5canvastutorials.com/tutorials/html5-canvas-element/</a>Unknownnoreply@blogger.com0