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!
Subscribe to:
Comments (Atom)