Posts Tagged ‘Javascript’

Picking the first language to learn for novice programmers can be a daunting task. For many, they simply have no clear where to start, and don’t know any of the merits and drawbacks of the various choices they have. Even among experienced programmers, the debate on what new programmers should start with is long and has many different sides. In this article I will give my side.

My Perspective

Before I talk about which language people should start trying to learn first, I will discuss where I am coming from when I make that choice. The first language someone learns in my opinion should be fairly easy to develop with, and be able to give the programmer results fairly quickly. The main problem I generally see with fledgling programmers just starting out is that they get very frustrated with error messages, and in general struggle to connect the concepts they are working with to an actual useful program. I keep these things in mind when making my choice.

 

My Opinion

For new programmers, I highly recommend starting with a web development related language, namely Javascript or PHP, PHP being the first recommendation. The reason I say this is simple. PHP is a very easy language to program in. As a scripting language,  development goes much faster (no having to recompile upon changing a single line of code), and the language itself is much more forgiving. A new user doesn’t have to memorize many different syntactical rules, so all they have to focus on is understanding the concepts, and getting practice with solving problems. Also, PHP (and to an extent, Javascript) comes right out of the box with many various helper functions and algorithms that in other languages you need to either import a library, or write the function yourself. This allows novice programmers to solve problems much faster and easier. However, this comes with a drawback. A programmer who gets used to PHP having a lot of functionality built in that other languages don’t have by default may make it difficult for the programmer to migrate to different languages/platforms. On the other hand, while the programmer may become too reliant on these built in functions, they do know to some extent how to solve a similar problem with another language. The new problem becomes finding out how the other language implements the functionality used in the built in PHP function, or how to write it themselves.

The second reason I suggest PHP (or Javascript), and web development in general is because it makes using the various concepts they’ve learned in practice more rewarding. It is much easier to make an interactive GUI with PHP combined with HTML/CSS than with a programming language like C++, Java, or even Python. Because of this, its much easier to make a “cool” application even with only basic skills. Making a website where you can log in and see a welcome screen is extremely easy with PHP and HTML, but would be much more difficult for a novice in, say, C++ or Java.

 

Drawbacks

While learning PHP (or web development in general) first is not a bad idea, there are some drawbacks. One thing, which I mentioned earlier in this post, was that many novice users who use PHP may become dependent on the built in functions that aren’t available in other languages without either importing a library, or writing the code yourself. This can make transitioning to a more difficult language even harder. This type of problem isn’t unique to PHP either, but common to people who start with most scripting languages, and than transition to a more difficult, stricter language. For example, in my school, the introductory programming class used Python, while the next class (Object Oriented Programming) is taught using C++. Many of the students who go from the first class to the second struggle early in the class with the unavailability of certain functionality that they got so used to using in Python.

Another issue is bad habits that are easy to form with scripting languages. Since most scripting languages have no explicit typing, the concept of a variable with a type can be difficult to understand, especially if you have been programming for a good amount of time.

In general, since scripting languages or usually much easier than stricter programming languages, novice programmers are able to progress faster and without much frustration, but they can pick up bad habits, like the expectation of the language to provide certain functionality, or the expectation of the program to handle many things in the background that you have to set up yourself in stricter languages. The example that one may come to think of first is garbage collection, which is available in most scripting languages, and even some strict programming languages (most notable being Java), but not in, say, C++. Scripting languages also hide many of the core functionality that is inherent in the language from the user. This can create programmers who know how to do something a certain way, but have no idea of the concept behind what allows them to accomplish whatever goal they have. This makes it much harder for these programmers to solve more complex problems that require knowledge of how programs and the underlying code actually works. For example, a novice may figure out how to stop a certain PHP notice from occurring by using the notice suppression operator (the @ operator), but may have no clue why that operator actually fixes (well it doesn’t actually fix the error, but rather stops it from being reported) the error.

However, these problems can be resolved by going from learning an easy scripting language to learning a more difficult, stricter programming language like C++ (in fact, I highly recommend starting with PHP/Javascript and even MySQL if you are adventurous, and then learning C++ in depth). This way, the programmer gets the benefits of learning a very strict language like C++, where you essentially have full control over your program and therefore have to know not only how to solve problems, but why certain code and concepts solve the problem. Also, the programmer won’t be nearly as frustrated since they already have a language under their belt. The learning curve of C++ is high enough, but some of that difficulty can be mitigated if you already have practice with most or all of the basic programming concepts.

 

In short, for anyone who wishes to learn how to program and make applications, I suggest starting with web design, namely PHP (but Javascript, ASP, or any other web based language would work) because development is faster and easier for a novice programmer, and seeing the results of your knowledge and making cool, useful applications is much easier, especially if you want to incorporate some sort of GUI elements.

As a side note, since not everyone is interested in web design, or has the means to purchase a server (although you can always download software like LAMP, or WAMP to turn your computer into a local web server), other scripting languages will work as well. If you are going to go this route, I suggest Python personally.

 

If you have any questions or comments, or disagree with what I say, leave a comment below! I would love to have a discussion with someone who has a differing opinion from mine.

Everyone has heard of Facebook and used Facebook. It has become sort of a household name, and with the release of their API some time ago, other sites have been able to cash in on Facebook success by integrating parts of it into their site. Overall, the Facebook API is an incredible piece of software, offering developers ways to integrate the users social life with their website seamlessly, and it allows users to share account information and social information across multiple servers without having to remember a bunch of different login information. By the way, when I refer to the Facebook API, I am mostly talking about the PHP API and Javascript SDK.

However, where Facebook does many things right, it also does many things wrong. Now, I’m not saying that the Facebook API is bad or badly written or anything like that. In fact I haven’t really had a chance to examine to code for the API’s I use, so I’m not really in a place to make a claim either way. However, I do have some experience using it, and that experience has gone from awesome high’s where things finally worked and worked well, to horrible lows where the API would do everything but what I wanted it to do, seemingly of its own volition.

 

The problem, in my opinion, about the Facebook API as a whole is the lack of good documentation. Now when I say good, I don’t simply mean “Hey this function call exists. Its syntax is as so:…” but rather some documentation with more than 1 or 2 code examples, and some notes on certain caveats that come with the functionality. For example, take a look at this entry in the PHP.net manual. The parameter list is explained in great detail, notes are given about certain parts of its functionality that might not be apparent, and overall someone reading this would know most of the information on how to use the function. Compare this to almost any entry in the Facebook API documentation and you may see what i’m saying. If you browse through their documentation, on many pages you will find loads of comments with “Hey! I’m having this problem”, “hey me too”, “Hey me three”, etc. with absolutely no comment from the Facebook developers at all. Problems that should be rather simple become a huge headache because, in the end, you simply don’t know what the problem is, and the documentation provides no help.

For example, I was working on implementing a request dialog for a website, and used a simple one line piece of code from the documentation itself. I got absolutely no response when I tried to run this line. Upon viewing the documentation, it makes no mention of whether or not certain permissions are required (This is stated on another page as I came to find out) or if some kind of prerequisite function call was needed before trying to use this API call. This kind of back and forth is common to debugging Facebook API problems simply because there aren’t many places to ask about. Of course there are the developer forums, but half the time you see a topic relevant to your problem discussed, its the same “Hey! I’m having this problem”, “hey me too”, “Hey me three”, etc.

Now the documentation isn’t the only problem with the Facebook API. I’ve had instances where the API seemingly decides to work and not work depending on its mood, and random nondescript error messages happening sometimes, but not other times (and if you read the comments in the documentation, and in the forums, this isn’t an uncommon problem) Hell, I tried using the latest version of the PHP API once (this was a few weeks ago, I am not sure what the status of the latest version is now) and it straight up refused to work, and I had to re-download and re-upload an earlier version. It’s this kind of lack of communication and documentation from Facebook that can make working with the Facebook APIs a huge headache.

 

Now don’t get me wrong, the Facebook API is quite powerful, and an awesome addition to any site that has some sort of social functionality to it. However,  a word of advice for developers getting ready to implement some sort of Facebook connection with their site. If you plan on using the Facebook API, whether its immediately or down the line, plan for using it from the first step. Doing this can save the developer a lot of headache.

In this post I am going to discuss how I went about making the League of Legends extension, and what goes into making a Chrome extension in general. For an introductory tutorial on making a Chrome extension, click here.

Skills Used: For the creation of the extension, I used Javascript, and HTML. The bulk of the extension is Javascript.For the Javascript, I use Jquery, because it makes development a lot quicker and easier, and allowed me to add quite robust features without doing a lot of work, debugging, or coding.

Basics of a Chrome Extension: Everyone Google Chrome extension is different, but what they all have in common is one file required by Google Chrome called manifest.json. JSON stands for Javascript Object Notation, and is basically the standardized notation that Javascript uses when creating object.

The next file(s) common to most extensions are content scripts. These are Javascript files that run in the background of the webpage that your extension works on. For the League of Legends Forum Extension, there are a few content scripts that run in the background. The main script loads all the features, while the others are support scripts. For example, There are two files that contain the Javascript array that holds all the item and champion names with links to their respective wiki pages. There is also the Jquery library file, and a file that has the code that creates the quick navigation bar.

Icons… Icons Everywhere: Most Chrome extensions have an Icon associated with them, and mine is no different. My extension actually has two icon files. One icon is the icon for the extension that you can see on its Chrome Store page. The second icon is the icon that you can see on your chrome extension page (which can be reached by clicking on the wrench in the upper right corner of your browser, and going to Tools > Extensions/

Feature Explanation: In this section, I am going to go into detail about how I went about developing the various features of the extension. This section is going to be heavy in programming terminology, so if you don’t  know much about Computer Science or Programming, feel free to skip this section, as it probably won’t make much sense.

  • Quick Navigation Bar:
    • This simply consists of a string variable that contains the HTML that makes up the quick navigation bar. I use Jquery to add this actual object to the page body. I set it up so that it starts with an opacity of .2 (or 20%). I created a hover event that, when fired, increases the opacity to 100%. Obviously, the quick navigation bar only appears if the option is enabled. It is enabled by default.
  • Image Expansion:
    • This one took a bit of doing. I start off by using Jquery to select all the links that surround the image attachment thumbnails, and disabling them. I them select all the images, and give them an OnClick event. When this event fires, I change the source of the image to the actual big version of the image. I do this by simply taking the source of the thumbnail, and removing the part of the source that says “thumb=1”. The way that attachments in the forums work is they are served to the user by a PHP page that sends the MIME type as an image. After I change the source, I set the display style to none, which will hide the image. I do this so that I can check the width of the image first, and if it isn’t too big, I fade it in. If it is too big, then I create a new div with the image inside, and add it to the page body via Jquery. I set the position as absolute, and use the mouse’s X and Y coordinates (retrieved via Jquery) as the left and top position respectively.
  • Red Post Preview
    • This is probably my favorite feature. When the page loads, I select all the red post icons, and get the URL that they each link too. I then use an AJAX (If you don’t know what this is, read about it here) request to get the content of the page, and use Jquery to parse the page content and get just the content of the red post. Using this content, I create a hidden div which I append to the bottom of the page. I then add a hover event to the red post icons that, when fired, creates a new div positioned at the mouse X and Y position and fades it in. When your mouse leaves the red post icon and div fades out. However, it won’t fade out if your mouse stays hovered over the actual div with the red post content. I did this so that longer posts can be viewed if you need to scroll your window down.
  • Youtube Link Conversion:
    • This was actually the second feature I implemented. I used Jquery to select all the links to a Youtube video. I did this by selecting all links with the string “youtube.com/watch” anywhere in the href attribute. I then used the href attribute to construct an embed tag that pointed to the specific video. Using Jquery I also selected all the text inside the post content div which contained the string “youtube.com/watch” and used that text to create an embed tag much in the same way I used it with links. Theoretically, because I do this, someone could write the text “youtube.com/watch” with some nonsense after it, and it will attempt to embed a video that doesn’t exist.
  • Champion and Item name Conversion:
    • This was the first feature I implemented in the extension, and the first version (1.0.0) basically consisted of this functionality. I used Jquery (surprise, surprise) to select all the div tags with an id attribute that starts with the string “post_message”. I then took that text, and did a regular expression replace that with a pattern that matches a specific item or champion name (as long as its not part of a link) and replaces it with a link to that specific champion or items wiki page. I keep an array with the item and champion names and links in two separate files. The array uses the champion/item names as keys, and the links to the wiki pages as values. I generate these arrays with a PHP script that spiders the League of Legends webpage for all the champion and item names. The unfortunate thing about this process is Riot doesn’t update their information database very often, so when new champions or items are released, sometimes I have to enter the key/value pairs by hand. For certain champions/items with single quotes in their names (like Cho’Gath or Kog’Maw) I have multiple entries in the array to match not only the champion with a quote is his name, but his name without a quote, or with a space instead of a quote. For example, Cho’Gath has three entries. Cho’Gath, ChoGath, and Cho Gath. The pattern matching is also case insensitive, so CHO’gath would also be matched, as well as many others.
  • Left/Right arrow Keybindings:
    • This feature was suggested by ItzWartzy. I simply binded the left and right key press event to the body tag using Jquery. When this event fires, I select the Next/Previous link’s href attribute (by selecting all links with a rel attribute equal to next/previous) using Jquery, and change the window.location variable to this href attribute. I make sure to check that the link actually exists (IE your on the last page for left arrow, or first page for right arrow), and if it doesn’t, nothing happens.
  • Thread Number of Pages:
    • This feature was quite simple. I simply select all the links with the anchor text containing “Last Page” using Jquery, and parse the page number out of the href attribute. I then append text with “X pages” (X being the number of the last page) after the selected link.
  • Options Page:
    • This is an ever changing feature, since when I add new features, I must add them to the options page, and make sure the options work. The problem that I ran into with this feature was that content scripts in a Chrome extension run independent of the rest of the extension. Its basically like the content script is part of the actual web page, rather than the extension. Because of this, content scripts can’t access any other part of the extension, unless you send a request from the content script to the extension. You can read more about this process (known as message passing) here. The information I needed to retrieve was the localStorage array, which is a cookie-like array that browsers can use to store information about a website locally on the clients computer.
    • On the options page, whenever an option is selected/deselected, the entry is entered/altered in the localStorage array. When the options page is first loaded, I check/uncheck certain selections based on what is in the localStorage array. If the localStorage array is empty (IE when first installing the extension), all the options are checked by default, and those values are entered into the array. The structure of the array is the id attribute of each check box is the array keys, and the values are true/false if the option is checked/unchecked. If a user never opens the options page, the localStorage array will be empty. Because of this, when I check the options when executing the code for the various features, the if statement consists of two boolean statements OR’ed together. The feature will be loaded if the various option are true (IE they are checked) or if the localStorage array that was retrieved using message passing (link above) is undefined. I do this because by default, all options are enabled. As I continue to add features certain features may be disabled by default, so obviously I would have to change the conditional.
  • Miscellaneous Information:
    • I use the latest version of Jquery, which is version 1.6.1, minified.
    • The Message passing request is a one time request (sendRequest method of the chrome.extension object) to the background.html page. This page consists of a single javascript tag, where I add a listener to the onRequest port. In this listener, I send a response consisting of the localStorage array.
    • My version system is arbitrary and doesn’t really mean anything. However, I use single digits between each period. IE there will never be a version 1.3.11
    • The features are all executed when the document.ready() event is fired.
    • All the features are executed on a single javascript page. Board and Thread features are seperated by an if statement that checks the URL of the current page your on.

 If anyone has any questions or comments on how I am doing things, Please don’t hesistate to leave a comment, or email me at Mikesta707@yahoo.com. Thanks to everyone for your support. Hope you enjoy the extension.