Learn, Code, Grow

Closures and Privacy Failures in JavaScript

In JavaScript, there’re no private variables per se, i.e., you cannot denote a private variable using the key word “private”. Implementating the concept of private variable in JavaScript can be achieved using the concept called closure: a closure is basically a pattern to tuck variables in a function. The tucked in variables are local to the function so outer scope cannot access those local…

Hacker News clone using Rails 4 and AngularJS I

In this series, I will use Rails to build a RESTful backend JSON API that interacts with an AngularJS front end.

Front End

We’re going to start with Angular side of things first to build the front end piece of our app.

Angular Module and Controller

We need three files to get started, index.html, app.js and MainController.js.

. ├── index.html ├── js │   ├── angular.js │   └── app │   ├── app.js…

In Rails, there’re more than one way you can generate a form. This post is going to go over how to generate forms in rails using html form tag, rails’ form_tag as well as rails’ form_for.

1. html form tag

You can always generate a form using html’s form tag in rails.

We have the following routes:

Prefix Verb URI Pattern Controller#Action root GET / application#hello signup GET /signup(.:format)…

Package a Ruby Gem

In this post, I’m going to package a Ruby cli app I built into a Ruby Gem. The app scrapes a list of beer currently available at a local Austin beer bar named Draught House from taplister.com and displays basic information for each beer, i.e. name, brewery, abv, etc., and there’s also an option for users to type in the name of a beer to get its style and description. The current tree structure…

HTML5-Using iframe to embed Google Maps

In the past I have come across websites where I saw Google Maps being embedded on a webpage. I never put too much thoughts in it but always felt it was neat and would be a very helpful thing for small local businesses’ websites.

Recently I watched a HTML5 tutorial by Flatiron school and learned that it’s actually super easy to embed a Google map to your site. Depending on the level of…

Intermediate Rails: Layout Links

After generating the static pages for the Twitter like app (Upcase named it Shouter, and in my implementation I decided to name mine Scream). I followed the steps in chapter 4 and 5 of the Ruby on Rails Tutorial by Micheal Hartl and refactored my code.

The header partial view now looks like this:

<header class="navbar navbar-fixed-top navbar-inverse">

Intermediate Rails: Shouter App’s Static Pages

As I promised in Rail’s intro post, the Intermediate Rails series will cover building a Twitter like app in Ruby on Rails. I want to break things down a little bit by referring to the Ruby on Rails Tutorial written by Michael Hartl.

For one, this app has a fair share of static contents. Just like a good front end framework such as Angular, Rails is also very powerful and can significantly help…

Ruby on Rails Tutorial Series: Intermediate Rails Intro

Seriously, guys, two months ago when I started this blog, I didn’t know I would be able to write Intermediate Rails tutorial two months later. But yet here I am, writing the Ruby on Rails Tutorials Series on building Intermediate Rails apps. Blog until your faces fall off, that’s some good advice if you’re learning coding just like me.

Alright, that’s just some sentimental thoughts I had. You…

Build My First Website: Use AngularJS to Refactor Code III

In Build My First Website: Use AngularJS to Refactor Code II, we used directives to separate variable content out of html skeleton to make the code more readable and reusable. Today let’s use services to refactor the code even more.

Currently, controller MainController.js file is being used to hold the data.

app.controller('MainController', ['$scope', function($scope) { $scope.applications=[ {…

Build My First Website: Use AngularJS to Refactor Code II

Let’s use directives to make the code better. The starting point of this blog is Build My First Website: Use AngularJS to Refactor Code.

First, create a folder named directives under the js folder:

Current content in body tag of index.html code:

<body ng-app="myApp"> Learn, Code, Grow

Welcome to learning.

Applications

jQuery UI: Use Draggable and Droppable to Enhance Towers of Hanoi App

One of the apps I practiced building lately is Towers of Hanoi (see its Wiki page here). For the first iteration I built the barebone logic and used only one click even listener on data-stacks. You can play the game here: Towers of Hanoi.

It’s more intuitive for users to drag and drop the blocks than clicking. jQuery UI offers draggable and droppable interactions and I decided to use those…

Tool Belt: Git II

As mentioned in Git Intro, Git is a really nice version control system, but it does have a learning curve to overcome. Checkout Git I for a list of frequently used Git commands.

Git is known for being a very robust and efficient version control system. Once I got familiar with Git and fell in love with its magic, I started to wonder what’s under the hood that makes it so powerful. It turns out,…

Build My First Website: Use AngularJS to Refactor Code

Previously I have made my first website’s index page and used jQuery’s AJAX call to load reusable nav bar in Make reusable HTML code using jQuery and Node.js post.

Recently I started to learn AngularJS and got to like it a lot (check out the AngularJS course on Codecademy). Unlike jQuery which adds behavior on top of HTML elements, AngularJS makes behavior native to HTML. jQuery chains actions to…

Tool Belt: Git I

As I promised in Git Introduction, this post is regarding Git commands that I use most frequently and find most helpful. Below list is to serve as much of a reminder for myself as it may be for you to look up a common Git command.

The list:

1. Initiate a Git repository in current directory.

git init

2. Add files for tracking, after this command, the selected files will become “staged”

git…

Build My First Website: Make reusable HTML code using jQuery and Node.js

After building the basic HTML and CSS structure of my site‘s index.html page, I decided to make the navigation bar section common for all future pages. I don’t want to copy and paste the same code on each page of my site, instead, I will take the code responsible for the navigation bar out of index.html file, save the code into a new file named header.html, and use some JavaScript power to load…

This is my first post :)

It's been a little over a year since I started learning coding, and I just feel like it's about time for me to start something so I can share the road blocks and how I overcome them with people who are also in the learning path.

A little about my background: I am a software product development manager who is super passionate about technology. I started my current role about two years ago fresh out of grad school, and during this job I have had the opportunity to learn about many aspects of software development process. What I enjoy the most about being a product manager is I get to be the bridge between our development team and business team, and in the center of how the whole product come together.