Hello All,
I will be migrating my blog posts to GitHub.
Blogger, it has been fun.
I will perhaps write a blog post later on why I switched but for now if you want to see the latest updates, please visit my new blog hosted on GitHub.
See you all over there!
Bess
Saturday, November 15, 2014
Sunday, October 26, 2014
MVC - Separating state from presentation!
The other day I was working on adding logic to the date picker on the main page of my application.
I wanted to add a feature to add days and months to the date picker with a single click.
The first approach I had taken was to directly write a js function in my main js file:
function addDays(numDays) {
// grab date in the date picker
// add num days to date
// update the date picker date with the newly calculated date using jquery
}
I had a span element with the on click listener hooked on to the addDays method above.
However, in this function, I was mixing logic with presentation. i.e.
How can I separate this function such that it follows the MVC pattern?
Essentially I have a variable that holds the state of the application:
var appState = {};
In this variable I plan on holding the current value of the Date picker I have defined in my view. It is initiated on document ready to the current date.
I have a separate function (i.e. addDays(numDays) ) that has the job of updating the current date whenever I want to change it.
Finally I have an update view function that updates the view with the appState variable that I have declared earlier!
function addDays(numDays) {
var selectedDate = appState.currentDate;
appState.currentDate = selectedDate.addDays(numDays);
updateView();
return false;
}
In the updateView method here, Im only concerned with updating the view with the values stored in my appState variable. I can call this function whenever appState is updated.
function updateView() {
$('#send_date').val(appState.currentDate.toDateInputValue());
// Other values to update based on the appState variables I want updated.
}
Lesson learned today, separation of concerns! The method I learned today is to use a variable to hold the state of the application and update the view with my updateView() method.
I wanted to add a feature to add days and months to the date picker with a single click.
The first approach I had taken was to directly write a js function in my main js file:
function addDays(numDays) {
// grab date in the date picker
// add num days to date
// update the date picker date with the newly calculated date using jquery
}
I had a span element with the on click listener hooked on to the addDays method above.
However, in this function, I was mixing logic with presentation. i.e.
- Logic where I was doing all of the calculations and
- Updating the date picker value in the same function!
How can I separate this function such that it follows the MVC pattern?
Essentially I have a variable that holds the state of the application:
var appState = {};
In this variable I plan on holding the current value of the Date picker I have defined in my view. It is initiated on document ready to the current date.
I have a separate function (i.e. addDays(numDays) ) that has the job of updating the current date whenever I want to change it.
Finally I have an update view function that updates the view with the appState variable that I have declared earlier!
function addDays(numDays) {
var selectedDate = appState.currentDate;
appState.currentDate = selectedDate.addDays(numDays);
updateView();
return false;
}
In the updateView method here, Im only concerned with updating the view with the values stored in my appState variable. I can call this function whenever appState is updated.
function updateView() {
$('#send_date').val(appState.currentDate.toDateInputValue());
// Other values to update based on the appState variables I want updated.
}
Lesson learned today, separation of concerns! The method I learned today is to use a variable to hold the state of the application and update the view with my updateView() method.
Wednesday, October 15, 2014
KSOTD: shift + cmd + [ or ]
I'm going to occasionally post about some useful keyboard shortcut that I'm learning to use to help speed up my workflow.
Today's keyboard shortcut of the day allows me to switch tabs quickly within any application ( iterm, chrome to name a couple).
shift + cmd + [ navigates you to the tab to the left of the currently active tab.
shift + cmd + ] navigates to the tab on the right.
Another keyboard shortcut I knew before to switch tabs within an application is ctrl + tab, but that's a little awkward and you can only go in one direction. With this one, I can put my thumb on cmd, pinky on shift and right pinky to press either [ or ].
PS. In case you haven't figured it out yet, KSOTD stands for Keyboard Shortcut of the Day. I will be tagging future posts with this acronym! I got the idea from another acronym OOTD meaning Outfit of the Day.
That's it for today!
Goodnight~
Bess
Today's keyboard shortcut of the day allows me to switch tabs quickly within any application ( iterm, chrome to name a couple).
shift + cmd + [ navigates you to the tab to the left of the currently active tab.
shift + cmd + ] navigates to the tab on the right.
Another keyboard shortcut I knew before to switch tabs within an application is ctrl + tab, but that's a little awkward and you can only go in one direction. With this one, I can put my thumb on cmd, pinky on shift and right pinky to press either [ or ].
PS. In case you haven't figured it out yet, KSOTD stands for Keyboard Shortcut of the Day. I will be tagging future posts with this acronym! I got the idea from another acronym OOTD meaning Outfit of the Day.
That's it for today!
Goodnight~
Bess
Saturday, October 11, 2014
I made my first contribution to an open source project!
Today I was working on my node app and I was looking up how the res.redirect method in Express worked.
I then found a typo in the deprecate message so I decided to make my very first contribution to an open source project!!! It was a fairly trivial change but I submitted it anyways, it was exhilerating!
Here's what I did:
That's it!!!
After making the pull request, the automated build (Travis CI) ran and passed (obviously) and shortly after, my changes were accepted. :D
In summary, when you want to make changes to a git repository essentially what you do is fork the project, make changes locally, and make a pull request to get your changes accepted and pulled into the main branch.
This is my very first open source contribution! More to come..
If you're curious...
https://github.com/strongloop/express/pull/2395#issuecomment-58762835
Cheers,
Bess
I then found a typo in the deprecate message so I decided to make my very first contribution to an open source project!!! It was a fairly trivial change but I submitted it anyways, it was exhilerating!
Here's what I did:
- Forked the repository (I went to https://github.com/strongloop/express and clicked on the fork button)
- Clone the repository locally
> git clone git@github.com:strongloop/express.git - Corrected the typo
- Committed my changes and pushed it to my branch.
- Make a pull request! https://github.com/strongloop/express/pulls -- click on the green "New pull request" button! This step is to merge your changes to the main code repository.
That's it!!!
After making the pull request, the automated build (Travis CI) ran and passed (obviously) and shortly after, my changes were accepted. :D
In summary, when you want to make changes to a git repository essentially what you do is fork the project, make changes locally, and make a pull request to get your changes accepted and pulled into the main branch.
This is my very first open source contribution! More to come..
If you're curious...
https://github.com/strongloop/express/pull/2395#issuecomment-58762835
Cheers,
Bess
Tuesday, October 7, 2014
Mongo, Heroku and testing
For my current project (Ephemeral-messages), I'm using Nodejs and Mongo.
The project is being hosted in Heroku right now!
Today I'm going to write about how I set up the database for my app.
1. Login to Heroku dashboard: https://dashboard-next.heroku.com/apps
2. Click on your application
3. Under the Add-ons section, click on "Get more addons.."
4. Choose the service you need -- in my case I chose MongoHQ
You can use their services for free -- 512 mb for the MongoHQ Sandbox.
The only tedious part was verifying my account with a credit card.
Once it's all set up, I was able to access the database from my Heroku dashboard.
With this add on you can view the mongo documents you currently have stored and run queries too!
Additional notes for running a local version for testing:
When testing the application locally, it is useful to have a local instance of mongo running in my terminal.
Install mongo using Brew:
> brew install mongodb
** another side note: brew --> is Homebrew, a package manager for osx. This is what I used to install mongodb. Here's a link to download: http://brew.sh/
Run mongodb in the terminal:
> sudo mongod
Example of how to start up and query the database in the terminal:
> mongo
> use test
> show collections
> db.ephemerals.find()
> db.ephemerals.remove({})
That's it for today!
Bess
The project is being hosted in Heroku right now!
Today I'm going to write about how I set up the database for my app.
1. Login to Heroku dashboard: https://dashboard-next.heroku.com/apps
2. Click on your application
3. Under the Add-ons section, click on "Get more addons.."
4. Choose the service you need -- in my case I chose MongoHQ
You can use their services for free -- 512 mb for the MongoHQ Sandbox.
The only tedious part was verifying my account with a credit card.
Once it's all set up, I was able to access the database from my Heroku dashboard.
With this add on you can view the mongo documents you currently have stored and run queries too!
Additional notes for running a local version for testing:
When testing the application locally, it is useful to have a local instance of mongo running in my terminal.
Install mongo using Brew:
> brew install mongodb
** another side note: brew --> is Homebrew, a package manager for osx. This is what I used to install mongodb. Here's a link to download: http://brew.sh/
Run mongodb in the terminal:
> sudo mongod
Example of how to start up and query the database in the terminal:
> mongo
> use test
> show collections
> db.ephemerals.find()
> db.ephemerals.remove({})
That's it for today!
Bess
Friday, October 3, 2014
I'm alive!!! And stuff about my new MacBook Pro Retina!
Already 10 months out of school, working full time and I'm still learning lots! When I was young I had this naive idea that once I'm out of school and working for a company with stable pay that will be my life. But nope!
Today I'm going to write about my new dev machine, my MacBook Pro Retina!
Coming from working with both linux and windows, I must say osx is quite slick. The terminal is really easy to work with ( Similar to linux ). I really enjoy the smooth feeling of the trackpad. It's so responsive compared to all of the other laptops I've ever worked with ( Asus, Lenovo ).
After getting my new machine, I began prepping it up for development. Here are a few things I installed and what I think about them:
Sublime text 3
I'm currently using Sublime text 3 and there are many add-ons that that will be very useful for development depending on what I need.
- Package installer for installing add-ons in sublime. All I need to do is command + shift + p to bring up package installer, then type in whatever add on you want to install for your instance of sublime!
- Sublimegit - still have yet to learn more about this tool..
OSX tools
Some tools I installed into my new macbook pro that you should install too:
- BetterTouchTool - The track pad on the mac is so smooth! Better than all of the track pads I've ever used. Take advantage of this great trackpad using this tool. You can customize gestures and add gestures with this application. So far, I have two finger swipe from top edge to close applications, and tiptap right and left for switching between tabs quickly. It's great!
iterm2
- This is a replacement for the default terminal. Has a whole lotta settings you can use if you're using the terminal a lot. Check it out! http://iterm2.com/features.html
Alfred
Search anything on your computer quickly! You can use it to quickly open up applications, define a word, do calculations... There are so many things this app can do I have yet to discover! http://www.alfredapp.com/
That's it for now! Let the programming adventures begin~
Bess
Today I'm going to write about my new dev machine, my MacBook Pro Retina!
Coming from working with both linux and windows, I must say osx is quite slick. The terminal is really easy to work with ( Similar to linux ). I really enjoy the smooth feeling of the trackpad. It's so responsive compared to all of the other laptops I've ever worked with ( Asus, Lenovo ).
 | ||
| Isn't she beautiful? I've already decided the gender of my MacBook Pro apparently. |
After getting my new machine, I began prepping it up for development. Here are a few things I installed and what I think about them:
Sublime text 3
I'm currently using Sublime text 3 and there are many add-ons that that will be very useful for development depending on what I need.
- Package installer for installing add-ons in sublime. All I need to do is command + shift + p to bring up package installer, then type in whatever add on you want to install for your instance of sublime!
- Sublimegit - still have yet to learn more about this tool..
OSX tools
Some tools I installed into my new macbook pro that you should install too:
- BetterTouchTool - The track pad on the mac is so smooth! Better than all of the track pads I've ever used. Take advantage of this great trackpad using this tool. You can customize gestures and add gestures with this application. So far, I have two finger swipe from top edge to close applications, and tiptap right and left for switching between tabs quickly. It's great!
iterm2
- This is a replacement for the default terminal. Has a whole lotta settings you can use if you're using the terminal a lot. Check it out! http://iterm2.com/features.html
Alfred
Search anything on your computer quickly! You can use it to quickly open up applications, define a word, do calculations... There are so many things this app can do I have yet to discover! http://www.alfredapp.com/
That's it for now! Let the programming adventures begin~
Bess
Wednesday, September 5, 2012
Clearing out the spider webs..
Phew.. I haven't updated this blog as often as I'd hoped when I first started it.
Summer has just ended and I am four months into my final co-op term and everything seems to be taking its course... It was a slow first 3 months to be honest but I'm finally doing real dev work for real software in the real world! It really is an amazing feeling! :) I just recently developed a feature for the company's software and wrote (am still working on actually) the tests. I've never really worked on such a large project before with so many solutions to manage and build. I one day that a lot of the work of a developer entails building large projects, debugging, and managing files*** I cannot stress enough how much time put into managing files properly... I guess this was all because I was relatively new to subversion. I've only used it for a couple of semesters in school... At work there are much more clear and strict guidelines to how we should check out our projects and merge in our changes. I am certainly learning a lot!!
This week was also the start of the fall semester for some of my friends still in school... It feels like I'm still on vacation (technically I didn't really have one since I was working full time the whole four months of summer). I feel like I'm not spending my time productively enough after work when I get home. So today I got off my bum, and looked at a few of the free online courses that are offered by Standford et al.
*drumroll please* I will be working on the web development course cs 253 offered by udacity!! I've always been interested in web dev, and this will certainly be a great way to start. I plan to work on the assignments and homework throughout the span of the next four months before I start school again next year January! By writing it down here I hope I'll be able to hold myself accountable and finish at least 2 units a week. Possibly write a few thoughts down here if I feel like it. Looks like we'll be developing a web application focusing more on server side stuff in this course. Also a plus, we will be using google web app engine which I have some experience with in my cs 310 course just this year's January. (I'll write about that later..)
CIAO!
Summer has just ended and I am four months into my final co-op term and everything seems to be taking its course... It was a slow first 3 months to be honest but I'm finally doing real dev work for real software in the real world! It really is an amazing feeling! :) I just recently developed a feature for the company's software and wrote (am still working on actually) the tests. I've never really worked on such a large project before with so many solutions to manage and build. I one day that a lot of the work of a developer entails building large projects, debugging, and managing files*** I cannot stress enough how much time put into managing files properly... I guess this was all because I was relatively new to subversion. I've only used it for a couple of semesters in school... At work there are much more clear and strict guidelines to how we should check out our projects and merge in our changes. I am certainly learning a lot!!
This week was also the start of the fall semester for some of my friends still in school... It feels like I'm still on vacation (technically I didn't really have one since I was working full time the whole four months of summer). I feel like I'm not spending my time productively enough after work when I get home. So today I got off my bum, and looked at a few of the free online courses that are offered by Standford et al.
*drumroll please* I will be working on the web development course cs 253 offered by udacity!! I've always been interested in web dev, and this will certainly be a great way to start. I plan to work on the assignments and homework throughout the span of the next four months before I start school again next year January! By writing it down here I hope I'll be able to hold myself accountable and finish at least 2 units a week. Possibly write a few thoughts down here if I feel like it. Looks like we'll be developing a web application focusing more on server side stuff in this course. Also a plus, we will be using google web app engine which I have some experience with in my cs 310 course just this year's January. (I'll write about that later..)
CIAO!
Sunday, March 11, 2012
Hackathon continued...
I managed to fix up storing and retrieving data for the application!
Deployed it in appspot and users are now able to write reviews and view them even after they close and reopen the browser! (ha-ha) It's still barely presentable and the hacked code needs some serious cleaning up.
List of to-dos:
- refractor!
- error handling
- pagination for reviews
- get the background to display
- make the menu bar prettier
- display markers on the map as we load the reviews
- associate markers with the reviews
- marker click handlers to show the addresses
For now, I'm putting this project on hiatus!
I need to work on some course work now!
Deployed it in appspot and users are now able to write reviews and view them even after they close and reopen the browser! (ha-ha) It's still barely presentable and the hacked code needs some serious cleaning up.
List of to-dos:
- refractor!
- error handling
- pagination for reviews
- get the background to display
- make the menu bar prettier
- display markers on the map as we load the reviews
- associate markers with the reviews
- marker click handlers to show the addresses
For now, I'm putting this project on hiatus!
I need to work on some course work now!
Saturday, March 10, 2012
White day Hackathon
Today I participated in my very first Hackathon!
It was hosted by A Thinking Ape and Silicon Sisters.
The Hackathon was aimed at promoting female developers and the turnout was great! There was a mixer the previous evening to meet other developers going to the hackathon today and tentatively formed a team with another aspiring developer who also has amazing experience in design. She went to Emily Carr and is amazing at front end web development! Talked to a whole bunch of developers whose enthusiasm inspired me immensely.
The day of the hackathon, I teamed up with the developer I met at the mixer the previous night and an ambitious computer science friend from UBC! I was really blessed to have these two on my team. We decided to work with GWT with GAE because I was most familiar with it and we had a basic idea of what we wanted to make for our web application. We wanted to build an application where people can post up reviews of chocolates they've eaten around the world. They're able to mention things like location and price of the chocolate they want to review. Most of the time I was working with data persistence - keeping the reviews in datastore and the other two were working on front-end UI. As I was working with maps in my current cpsc 310 class, I just slapped on the code that I was working on previously to add in the feature of displaying locations of chocolates that were reviewed and posted on the web app. Unfortunately, after I got persistence working on my machine, I ran into problems pushing my changes onto github so I ended up not adding it to our final product. We had to use dummy data, and adding data was erased after you close the browser. I plan on probably fixing this and deploying it just for future reference. During the hackathon I had a lot of sugar, I'm worried for my health. More hackathons like this and I could develop diabetes O_O *knocks on wood*
At the end of the day, 18 teams presented their hacked together application and all were pretty amazing. There were web applications and games. One of the games involved two robots in space - one female and one male. The goal of the game was to tag the female robot and gain points. It was really adorable the way they floated around haha. I won't go into detail for the other ones because I don't know if it's confidential! Go try out for a hackathon if you wanna see all of the amazing ideas people have!
If ever there is another hackathon being held, I would definitely participate if I had the time. A great opportunity to learn, share ideas, meet new people and practice coding!
P.S I do have a version of our app deployed right now but I'd rather not share it until I have the data persistence and CSS fixed. Until then, here's a picture of two of us and our scribbled UI plan for the web app.
Sunday, February 26, 2012
My changes aren't appearing, why?!
Today I was working on maps with gwt again.
I managed to separate the map functions into a single class and run the map api without using the load method as I was when I first started. There was something wrong with my xml file and it turned out I was missing a semicolon ;_;. Aside from that, after getting maps to work, I needed to add my changes to my team's project.
I needed to change the html file so I could incorporate the map into our app and while I was doing that I ran into some difficulty! I had no idea why my changes were not being reflected in development mode. I changed the title and it did not change. I restarted eclipse and nothing happened. I checked the source code on the browser and I did not see my changes. Then I thought, Chrome was probably caching the page! I tried it in incognito mode and I immediately saw my changes. So lesson learned today, when writing web applications and you're working on the UI, run it in incognito mode, if not, clear your web cache.
If I haven't mentioned before, my team and I decided to use Github and I was really excited to use it since a lot of people in the tech industry were talking about it. I wanted to know how great it was. :) Other source control systems I used were TortiseSVN and Visual Studio Team Foundation Server. I used TortiseSVN for one of my school projects in which we built a Library Database System. I can't remember having too much trouble with Tortise but maybe because it was a relatively small project. I used TFS at my old co-op work place and worked on a project with one other co-op. There would be times when we were pulling out our hairs but I thought the functions (merging, branching etc) were pretty intuitive. Back to Github, I'm using eGit - Git with Eclipse. Our team decided not to work with branches and just commit and push changes into the main branch as we work. (I'm not sure if that's a wise decision or not..?) I'm wondering if I should make my own branch and merge changes as I code. That's what I did with TFS. I shall look into that. Today when I was merging in my changes, I realized it was not as intuitive. I could not merge my changes without a massive migraine. Perhaps this is due to my lack of knowledge of how to use this plugin. I had to delete and re-import the project to solve my problem because egit refused to push my changes upstream. (It was due to me not pulling the most recent changes from my other group members, but even after I did, I could not push my changes..).
I'm sure I will have more hair pulling coding stories to tell in the following weeks! :)
<3 Bess
I managed to separate the map functions into a single class and run the map api without using the load method as I was when I first started. There was something wrong with my xml file and it turned out I was missing a semicolon ;_;. Aside from that, after getting maps to work, I needed to add my changes to my team's project.
I needed to change the html file so I could incorporate the map into our app and while I was doing that I ran into some difficulty! I had no idea why my changes were not being reflected in development mode. I changed the title and it did not change. I restarted eclipse and nothing happened. I checked the source code on the browser and I did not see my changes. Then I thought, Chrome was probably caching the page! I tried it in incognito mode and I immediately saw my changes. So lesson learned today, when writing web applications and you're working on the UI, run it in incognito mode, if not, clear your web cache.
If I haven't mentioned before, my team and I decided to use Github and I was really excited to use it since a lot of people in the tech industry were talking about it. I wanted to know how great it was. :) Other source control systems I used were TortiseSVN and Visual Studio Team Foundation Server. I used TortiseSVN for one of my school projects in which we built a Library Database System. I can't remember having too much trouble with Tortise but maybe because it was a relatively small project. I used TFS at my old co-op work place and worked on a project with one other co-op. There would be times when we were pulling out our hairs but I thought the functions (merging, branching etc) were pretty intuitive. Back to Github, I'm using eGit - Git with Eclipse. Our team decided not to work with branches and just commit and push changes into the main branch as we work. (I'm not sure if that's a wise decision or not..?) I'm wondering if I should make my own branch and merge changes as I code. That's what I did with TFS. I shall look into that. Today when I was merging in my changes, I realized it was not as intuitive. I could not merge my changes without a massive migraine. Perhaps this is due to my lack of knowledge of how to use this plugin. I had to delete and re-import the project to solve my problem because egit refused to push my changes upstream. (It was due to me not pulling the most recent changes from my other group members, but even after I did, I could not push my changes..).
I'm sure I will have more hair pulling coding stories to tell in the following weeks! :)
<3 Bess
Friday, February 24, 2012
Google maps api with GWT and GAE
Today I continued exploring google maps api with GWT. After playing for a while, running the application in dev mode suddenly gives me an error with the server. I thought maybe something went wrong after I deployed the application, but I was wrong! Even after reverting changes, I was still getting the same eerie error message. The solution was actually to restart Eclipse. So.. I have reconfirmed my previous post's recomendation. If you get an error but you didn't do much to change the code, restart eclipse.
Also, one thing I realized while working with GAE (google app engine) is that it is extremely slow in dev mode! When testing, I run the application in dev mode in Chrome. I get at least two messages saying that the browser was not responding. Solution to this is be patient and continue waiting. It will load eventually. Im wondering if it's just my laptop that's getting old.
Google map exploration progress:
Tuesday, February 21, 2012
Project setup blues
Today, (or rather, yesterday) I started working on my part for my cpsc 310 group project (introduction to software engineering). I was assigned the task of working with another member to develop the GUI and I, specifically to learna about Google maps and make sure that a map appears in our application. Briefly, our application pulls property tax data from dataVancouver and displays filtered information in the form of a map or table. I thought it would be a pretty neat idea to see how property taxes are distributed in the region of Vancouver, so we'll see how this turns out! If successful, I hope that our application will show some kind of pattern in property taxes in different regions of Vancouver visually on a map. I began the other night, looking for ways to get the google maps into our application. I began a new project and everything was a-okay until I looked at a few introductory applications in google code... Turns out there was a Google Maps API version 2 and 3. Let's say I spent a little too much time trying to get v3 working because I didn't know like they were calling v2 a deprecated API... So I spent the whole night (and the next night) scratching my head and pulling out chunks of hair trying to figure out why the sample application wasn't working out. I moved the jar file around my project, downloaded different versions of the jar file and moved those around.. Tried different tutorials and internally cried blood. I later on, in a nutshell managed to finally get the map to appear in dev mode. *phew*
Lesson learned: In software engineering, dealing with project setup - a tedious task that all programmers have to deal with is inevitable. It's part of the process of software development. I wouldn't believe it if anyone was able to start with an errorless project in which build paths are correct, the correct jars are installed, and everything's compatible. Everyday, new software is shared, old software is updated. Compatibility issues are bound to arise due to these software updates and improvements.
Now, I think I've come to the point where I realize that if I'm not experienced enough, I should be prepared to spend hours searching up solutions on google to see what the problem is with my project and why certain errors occur. I'm prepared to spend the ENTIRE day searching for a solution. The next day even. Distractions are a big nono. ( I should've realized this before though, this definitely wasn't the first time I ran into project setup pains )
Some of the solutions to my project setup problems:
- restart IDE (if you're using one.. Eclipse in my case)
- start afresh. (delete the entire project and start the setup process again)
- check and ensure that you have the right versions of everything - Jars -- libraries, APIs...
- ask someone, they might have a clue. Otherwise, they serve as someone to keep me sane for the duration of my hair-pulling project setup experience. -- good reminder that everyone (computer scientists..developers) goes through the same painful experience.
Subscribe to:
Posts (Atom)