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!

 

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!

 

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!

 

 

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. 🙂

 

Only Vanilla JS

I need to display data on a page, not perform Sub Zero’s original MK fatality.

The state of the developmental web is a mess. You have React, Angular (1/2), JSX, Babel, ES6, bundles and buttload more. Sure, one can be excited with all of these front-end tools but it’s dreadful for a student to learn. You don’t have anywhere to start and nowhere to end. For a more in-depth explanation, check out How it feels to learn JavaScript in 2016

What’s the solution? Learn vanilla Javascript. No, master vanilla javascript. If you don’t, you’re literally setting yourself up to be incapable of adapting to changing requirements.

Recently, my good friend @douglasdunn15 introduced me to Gordon Zhou and his site watchandcode.com to learn JavaScript. WatchAndCode has a different take on learning on learning JavaScript. Gordon Zhou plays down the importance of learning numerous JS frameworks. While he doesn’t outright scold them, he tells his students to focus on the fundamentals of programming. Syntax is not important and can be learned through practice. Mastering the language, debugging and learning the overall development process is far more important. I’m not going to elaborate any longer or else it will feel like a paid advertisement/review but all I have to say it’s a breath of a fresh air from the other tutorials.