Algorithm: Reverse String

One of the hardest task to achieve is coding a program that reverses a string. For example, “Greetings from Earth” should return “htraE morf sgniteerG”. This challenge is on @freecodecamp. Requirements include:

Reverse the provided string.

  • create a function that accepts a string and returns a string
  • Your result must be a string.

Sample Code:

function reverseString(str) {
return str;
}
reverseString("hello");

Just like any algorithm, there are multiple ways of executing it. For such a small program such as this, I’ve decided I was going to focus on coding the least amount of lines. After a few seconds, I created this one line beauty.

To program this algorithm, I fundamentally used three built-in JavaScript methods. The methods split, reverse, and join. Split() mainly takes in a string and separates the string into an array. Anything parameter in split() will be the separator so split(“”) would simply have no separator. Next, reverse() just reverses an array so the first array element becomes the last and the last becomes the first. And finally, the join() method takes in an array and joins it into a string. Using all three in that exact will give you a working algorithm to this problem.

When I first gave this shot many months ago, I coded everything without using built-in methods, but then realized it would be cleaner and intuitive if I took it the easy way out.

That’s it for now, see you all next time!

 

Good Programming Language

In the previous post, I mentioned the thought of picking the best programming language for the job. The process for deciding one is q daunting and difficult task. Researchers at MIT have developed a ‘Language Evaluation Criteria’. They propose the 4 main characteristics for switching over to a new language. They are readability, writeabilltiy, reliability, and cost. I attempt to explain each below.

Readability, the biggest of the four for me. It is important but ultimately it will save a lot of time and money down the line (think maintenance) Before the 1970’s, languages were designed for computers in mind, not programmers. While it was close to the machine, it did not do a good job communicating to the writer as a language in the literal sense. In the early 1980’s, language designers began making strides in this direction. A language is considered readable if it prospers in simplicity, orthogonality, syntax design, and data type design.

Simplicity is crucial because it makes it easier for programmers to pick up the language. The fewer constructs the simpler it is in general. Othorganility is all about using primitive features to construct advanced ones. Data types of programming languages need to be intuitive as possible. An example below:

time_out = 1 ; vs time_out = false;

While they both convey the same meaning, the data type on the right is much more clear to the user.

To Be Continued. Part 2 and 3 will be up shortly. ūüôā

 

Benefits of Program Language Design

There are a few benefits of having a great deal of knowledge on program language design. When a programmer learns the ins and out’s of language design, they are able to learn new languages effortlessly. There has been literally hundreds of programming languages since the late 1940s however they can be categorized into 3-4 types of languages all with the same design. Looking at 2016’s top 5 programmings languages (Java, C++, Python, JavaScript, and C#), once can see they are all imperative languages based off of C. Therefore they provide similar features such as for-loops, if-statements, data types and sub-functions except in slightly different syntax. A programmer from one language would simply just need to acquire syntax and quirks from the language based on the concepts he learned in programming language design.

Another added benefit is the programmer is able to better decide which program language would be best suited for the project. Most programmers only learn a few languages on their own or through an in-house training. This results in the professional programmer to continue to use the language even when is it not best suited for the job.

 

Dissecting ToDos Part 1

As mentioned in the previous post, I completely love the ToDosMVC project. For such a simple project, the programmers/contributors put a lot of effort into making clean readable code. It really is a great resource to learn off from by studying it.

In today’s post, we’ll go straight to the code and get our hands dirty of the jQuery function.

http://todomvc.com/examples/jquery/

Actually before diving straight in, please give yourself 10 minutes to mess around with the features. The first step into learning off of anyone’s code is to get a picture of how the program works.

ToDos List Main Functionalities:
1) Delete
2) Modify
3) Add

If you have taken an algorithm course, you might understand that either delete or add functions are the simplest. In this case, I chose to analyze the delete function because it seemed the easiest.

Using google chrome’s developer tools, locate the delete function and simply run through it line by line.


destroy: function (e) {
this.todos.splice(this.indexFromEl(e.target), 1);
this.render();
}

Hurray, we found the delete function! Let’s go through this line by line.

destroy: function (e)
An event interface is passed through the destroy function

this.todos.splice(this.indexFromEl(e.target), 1);
We can assume [this.todos] is an array because splice is a method only used for arrays. If you’re not familiar with how splice operates, refer to MDN but basically it’s often used to remove an element from an array. However, you must know the index is located in.

Which we then run to an unknown method, “indexFromEl”. Luckily, for Chrome we can step into the function and check it out.

We will look through indexFromEl in the next post.

 

TodoMVC

Spoiled with so many frameworks, we are often stuck with so many options. TodoMVC attempts to solve it by providing a Todo program in a multitude of frameworks (almost all?). They made a project which offers the same Todo application implemented using concepts in most of the popular JavaScript frameworks of today.

It’s great for people like me to learn the JavaScript because it’s well documented and can also be useful on in my future career.

http://todomvc.com/

I have chosen to inspect the jQuery version over the vanilla JS, due to the nature of jQuery. jQuery is a popular JS library supported by all browsers and makes working in javascript easier. Learning jQuery is great for beginners to get their foot wet and then learn a what is happening in vanilla JS later on in the future.

Starting tomorrow, I’ll break down the jQuery version bit by bit. Until then, audios!

 

Algorithm: Reverse String

One of the hardest task to achieve is coding a program that reverses a string. For example, “Greetings from Earth” should return “htraE morf sgniteerG”. This challenge can be seen on @freecodecamp. Requirements include:

Reverse the provided string.

  • create a function that accepts a string and returns a string
  • Your result must be a string.

Sample Code:

function reverseString(str) {
return str;
}
reverseString("hello");

Just like any algorithm, there are multiple ways of executing it. For such a small program such as this, I’ve decided I was going to focus on coding the least amount of lines. After a few seconds, I created this one line beauty.

To program this code, I fundamentally used three built-in JavaScript methods. The methods are split, reverse, and join. Split() essentially takes in a string and separates the string into an array. Anything parameter in split() will be the separator so split(“”) would simply have no separator. Next, reverse() simply reverses an array so the first array element becomes the last and the last becomes the first. And finally, the join() method takes in an array and joins it into a string. Using all three in that exact will give you a working algorithm to this problem.

When I first gave this a shot many months ago, I coded everything without using built-in methods, but then I realized it would be cleaner and intuitive if I took it the easy way out.

That’s it for now, see you all next time!

 

October Round-Up

Every month, I round up a small list of resources/links I believe every web developer should give a read. I’m not going to spam your bookmark list with endless articles to read but I’ll put up I will put 2-3 of the hottest reads in the industry. I will also share with the world some useful resources

Articles to Read:

How it is like learning JS in 2016 РA great fun read that sums up the industry.
The path of software development craftsmanship¬†–¬†Don’t be a framework chaser.
Chrome Dev Tool Tips –¬†Absolutely useful.

General Resources:

Dribbble¬†–¬†Easily the best spot for UI inspiration.
Python Tutor¬†–¬†Helps you visualize code (works with non-js languages too).
Hyper Dev¬†–¬†Online IDE that is actually good.

Sorry, for the short post today. Been working way too hard on a ToDo list application that I simply do not have time for anything. Enjoy and see you all tomorrow.

 

 

 

 

Practical JavaScript: MVC

In @gordon_zhu’s WatchAndCode course, he tells the user, the importance of clear code organization. ¬†In the programming world, it’s not only¬†about fast and efficient code, ¬†it’s also important to have¬†clean structured code. ¬†Many beginning web developers get so excited about¬†their project, they start hacking everything¬†without any clear road map. I was like that¬†and it was dreadful. Sure, I can be a ¬†great coder (ooou, how humble) but 2 hours in, I’ll look back at the at my program and absolutely cringe. My code is tough to debug and impossible to maintain. Then came the MVC pattern.

Model-view-controller (MVC) is a design pattern used to split your code into 3 components.

Model: Structures your data in a reliable form and prepares it based on controller’s instructions.

View: Displays data to the user in an easy-to-understand format, based on the user’s actions.

Controller: Takes in user commands, sends commands to the model for data updates, sends instructions to view to update interface.

To put this in a typical user-experience, the user starts off by viewing the website created by the view. The user then interacts with the page and thus alerts the controller. The controller receives the request and then sends it either to the model or simply the view. The model carries out all of the logic and sends it to the view.

I still have a lot to learn but this is my take on MVC model so far. I’ll see you tomorrow!

 

 

UI/UX: Neighbor Hoods App

Every 2 weeks, I participate in a community project called Code for San Jose. A bunch of coders come together to solve problems the community might have. I’ll go into detail in a future post but I have been to 2 meetings and I absolutely love it. I have always been one for helping out the world through coding. Today’s project was proposed by the founder, Kalen, to create a web app for neighborhood associations. Enjoy below.

Project background and description: Interest for neighborhood association app  was growing in the community of San Jose.  However, members of the community complained that while the community was interested in such events they do did not know their neighborhood association.

We propose a website with the ability to look at the map, click on their neighborhood shape, and learn more about the Neighborhood Association is best (ie. website, Facebook page, Twitter account, meeting location, meeting dates). To summarize our v1 requirements are:

  • browse map of San Jose with neighborhood overlay
  • it should pop up information when neighborhood is clicked
  • it should display all of neighborhoods in full list view

web

Mobile Version:
A large percentage of the world browse the web through their phones so I felt a need to design a strong responsive web app. App condesnses when viewed on smaller resolutions

mobike

 

Practical JavaScript (objects)

I just put in about an hour into the Objects module of the Practical Javascript by Gordon Zhou. His teaching style is unlike others. Instead of going over concepts blindly, he puts us under the keyboard and teaches us while we code. He gives us the examples and then uses it to back up his teachings.

Now, everyone is different but this particular teaching style fits well with me. I was able to better understand this keyword in javascript in ways I couldn’t before. Part of this blog is to document my learnings and internalize different concepts I had trouble in the past. Hang on tight as I attempt to¬†explain this keyword.

1 . This keyword (in object method):
Using this keyword in an object method ,  you can reference an object that you are currently in. This allows your code to become dynamic.
Example:

This keyword sets to the object that the method is called. I intend on expanding my knowledge on this topic in future posts. More information @The Mystery of This

 



Other than that, there wasn’t anything new I haven’t learned. On to the next part, Gordon Zhou emphasizes heavily in creating a ‘requirements’ list and then programming code under those select guidelines. By doing this, you concentrate solely on functionality and stay on the right path.

For his v3 objects requirements, he has the following.

  1. It should store the todos array on an object
  2. It should have  a displayTodos method
  3. It should have an add addTodo method
  4. It should have a changeTodo method
  5. It should have a deleteTodo method

I then attempt to code something up myself before watching the rest of the module. Here’s my attempt.

Code based on previous knowledge. The first day with WatchAndCode has been a success so far. I’ll see you tomorrow. ūüôā