Today in JavaScript

A few things I learned today:


1. You can't push to an array and sort it in the same line, at least, not like this:

array.push(entry).sort();

It just tells you Uncaught TypeError: undefined is not a function.


2. If you try to push to a variable that you've declared, but haven't initiated as an array, you get an error: "Uncaught TypeError: cannot read property "push" of undefined".


3. You don't have to pass variables to functions for the functions to use and modify them. For example:

var testvar = 02;

var testfunc = function(){
console.log(testvar);
testvar = 3;
console.log(testvar);
}

testfunc();

console.log(testvar);

Simply results in this being printed to the console:

2
3
3

The 2 is testvar, being logged from within the function, even though it was not passed as a parameter.
The first 3 is testvar, being logged from within the function, after the function has modified it.
The second 3 is testvar, being logged from outside the function, which proves that it remains modified even outside the function.

To an experienced coder, this might seem like second nature, but to a beginner, it's important conceptual development. Scope!



4. Say you're making a function that you want to take two parameters: a number, and an array. You then call the function and pass it a number and another number. You think of the first number as the first parameter, and the second number as the only item in an array. The function will take this to mean that both of the things you passed it are actually part of the array parameter. So, make sure you use brackets when you're passing the parameter that's supposed to be an array.

File Structures

Android coding means manipulating a few different file formats. Chief among them are .java and .xml files.

In android, .java files are used to do two things:

1. Allow the operating system to interact with your app
2. Do the back-end/behind-the-scenes work, making the parts of your app interact with each other programmatically

On the other hand, .xml files are used primarily to 

1. Create GUI components known as "layouts", and
2. Define "resource" items, such as entries in lists, strings that give names to individual .xml components, colors that appear within the app, styles that apply to many .xml components, and more.

Today, I was tasked with creating a Settings screen for my app. What seemed like it should have been one of the simplest things I've done yet turned out to require (manual) modifications to or creation of at least 9 files. That's right. Nine files, one settings screen.

And people wonder why so many start to learn code and end up turning away.

The sad truth is that many of the existing code-learning resources don't deal with how file structures interact, instead tackling syntax within individual files.

As I tried to implement the Settings-screen solution shown in the Deitel book I'm working out of, I realized I needed to chart out the file structures to understand what was going on. Which files referred to which other files? First, I made lists of all the .java and .xml files that I thought were relevant to my task, adding them as I found them.

.java files

MainActivity

QuizFragment

SettingsActivity

SettingsFragment

.xml files (folder they're in)

activity_main (layout)

activity_settings (layout)

fragment_quiz (layout)

main (menu)

preferences (xml)

Then, I traced how these files interact, starting with MainActivity. As shown in the upper left, all .java files are enclosed in boxes. (It got a little messy.)

I only wrote down instances where one file referred to another file, as opposed to just calling a method (java), creating a variable (java), generating final content (xml), etc.

The result? I was able to fairly quickly filter out the files unrelated to the task at hand (QuizFragment.java and fragment_quiz.xml) and then create analogues to all the remaining files or pieces of files in my own project.

In other words, a settings screen was made. With one adjustable setting.

Next: Splitting the project into two Activities: One for login, during which the Settings screen will not be shown, and one to become active once the user has logged in, during which Settings will become available to view and modify.

The "Static" Keyword

It's taken me some time to wrap my head around the static keyword in Java. Not only that, I keep learning what it does and then forgetting again. So here's my summary, for my own reference and for yours.

This page is called "What is the Static Keyword in Java?" and it explains the word by going over two things: static fields and static methods. (There are also static nested classes--more on those later.)

The page includes what I would call unnecessary info about each of these things, so I've selected and reproduced the truly valuable parts. About static fields, it says:

The value of a static field is the same across all instances of the class. In other words, if a class has a static field named CompanyName, all objects created from the class will have the same value for CompanyName.

About static methods, it says:

Like static fields, static methods are associated with the class itself, not with any particular object created from the class. As a result, you don’t have to create an object from a class before you can use static methods defined by the class.

 Of course, that doesn't entirely cover it, but it does capture a large part of the idea. "Static methods are associated with the class itself, not with any particular object created from the class."  Useful.

Let's break it down a little further and do some side-by-side comparisons.

Non-static fields | Attached to objects (which are instances of classes.) Two objects of the same class can have different values for the same non-static field.

Static fields | Attached to classes. If a class has a static field, all objects of that class have the same value for that field.

Non-static methods | Methods that require the class in which they reside to be instantiated before they can be used.

Static methods | Methods that can be called without creating an object of the type in which they reside (where they're defined.)

---

What becomes clear is that the "static" keyword doesn't seem to have one meaning. It has slightly different meanings in each case, and so each case has to be handled individually.

But wait, there's more. Although "static" cannot be applied to top-level classes (the first thing in your .java file can't be static class myClass), it can be applied to nested classes. (I mentioned these in my previous post, and wow, I'm actually following up on it. #GoMe.)

A nested class is just a class defined within a top-level class. A nested class with the static keyword is known simply as a static nested class. A nested class without the static keyword is called an inner class.

Static nested classes can't refer to non-static fields or methods defined in the top-level class (which I think would be referred to as an outer class, but I'm not sure on that one.) This was giving me problems in an app I was writing, which is what prompted me to learn more on the topic over the last few days.

The Easy Button for Coders with ADD

The hard part of coding isn't the actual coding... it's everything around it.

Codecademy has you change attributes. Anyone can do this. It's absolutely mindless.

Coding, real coding, is about understanding file structures--what are all the parts? How are they working together? Real coding means troubleshooting and problem-solving. It means googling, mentally filtering the results by their context, talking to people and picking up random tidbits and then remembering these tidbits later when they're helpful, and a billion other complicated problem-solving tasks. Coding is not memorization; it's knowing how to find and use references, online and hard-copy.

Sometimes it means looking for the stackoverflow thread that answers your exact problem, realizing there isn't one, posting in the relevant google+ community, getting no responses, going to the local public library, finding that all of their books are outdated, ordering a book on Amazon, finding that it doesn't really clarify anything, and settling for not answering the question at all while finding a workaround.

The hard part of coding is not giving up. The hard part of coding isn't not giving up, it's staying focused while also keeping your mind open enough to see the solution that lies outside of the box. It's fighting through internet sidebars, address bars, emails, facebook posts, social networking sites, and every other form of alluring entertainment online, just to stay on task for an hour or two at a time--and then doing it again the next day, and the day after that, and all the days that it takes to actually finish the project that you started in the first place. The hard part is still caring enough about your idea on day 3, and then on day 5, and then on day 7, and not just caring enough, but having the discipline to ignore the other cool ideas you came up with every day, just so you can finish the one or two, even though they no longer have the sparkle of novelty.

So, how do you do it?

You remember the reward that's waiting at the end. If you're a paid coder, it's money. If not, it's the satisfaction of actually getting to use the thing that you made.

Strangely enough, one single key on your keyboard might help you more than anything else.

F11. The "full-screen" key.

This magical key removes your tabs and bookmarks from your view while you're reading an online resource. It keeps you focused on the page you're on, the content you're trying to read, and the things you're trying to learn. It prevents you from hovering your mouse over that address bar, feeling the compulsion to type "fa" and then watch autocomplete take you to facebook, where you lose hours of time every day.

Hopefully this helps you as much as it's been helping me recently. If not... pass it on to a friend with ADD.

---

On Mac: command + shift + f.

Using "The Java Tutorials" Right

As I mentioned in my Pilot post, I took one (1) semester of Java in college. As a result, I knew the basic syntax of the language and most of the basic concepts, up to and including classes.

So, when I initially tried to use The Java Tutorials from Oracle, Java's developers, I found them repetitive, boring, and not-useful. This was my own fault.

I have recently made a few discoveries, upon returning to The Java Tutorials. The first of these concerns the world "trail." On each tutorial page, there are "previous" and "next" links that take you to earlier/later pages in the tutorial. In between these, there is a "trail" link. The "trail" link takes you to an overview of the tutorial, which is actually super important and useful because the left nav bar only links you to other pages within the same general topic area. So, this "trail" page was the missing link. I've now been able to locate the exact point where my class left off, which was just prior to dealing with "nested classes".

As the name suggests, nested classes are "classes within classes." That's right. Class-ception. Call up Leonardo DiCaprio and Joseph Gordon Levitt. And Ellen Page. Definitely call up Ellen Page.

Nested classes include static nested classes and non-static nested classes, which are also known as inner classes. These have been tripping me up as I try to make my first few apps, giving me weird errors about static-ness and non-static-ness and stuff. So hopefully, I'll learn some things today that will serve me well in days to come.

This post doesn't seem like much, but if you're trying to spot-learn Java from those tutorials, I probably just saved you some serious headache. So do like your mother taught you, and say thank you!

CSS on Codecademy

As more and more people learn to code, better tools become available for beginners. Fortunately for me, and anyone else that doesn't know the basics, there's a wonderful website called Codecademy (Think "code-academy") that takes you through the fundamentals of any mainstream language, step-by-step. The website itself is well-coded and looks very clean, and it features reward-giving widgets like badges, which you can share on Facebook and Twitter. These rewards turn coding into something akin to playing a video game.

CSS is a language designed to go hand-in-hand with HTML. HTML lays out the content for a webpage, and CSS styles it. Short for "Cascading Style Sheets," CSS lets you group pieces of content into classes (seen as <div class="example_class"> in HTML files) and then apply properties to these groups, making it easy to modify the appearance of large parts of a web page with only a few keystrokes.

While teaching you website building, Codecademy also introduces you to a tool called Bootstrap. Tools like Bootstrap are important to modern coding. To create the beautiful sites that populate the web today, coders build upon pre-existing structures and frameworks. Often, parts of the coding process are automated. For example, when you create a new Android project in the Eclipse IDE, a lot of code is automatically generated for you. Your role as a programmer is then to work within that existing framework, rather than to build everything from scratch.

It seems to me that these are the things not taught in traditional schools. Schools, being institutional in nature, are slow to adapt, and therefore ill-suited to training people in the latest and greatest tools and methods. (I guess it depends on the teacher--but if a new tool just came out this year, it's certainly not in the official curriculum yet.) The other weakness of traditional schools is one shared by Codecademy: It gives you all the tools you need to solve the problem before you. At no point are you staring at the screen, wondering, "What the hell do I do next?"

It is this open-ended problem solving that our school system seems to struggle with. (Having just graduated from college, I'm qualified to at least speak for the schools I went to and the classes I attended.) In school, 90% of your time or more is spent solving a problem that is laid before you and spelled out for you. In the real world, problems do not present themselves to you already defined. Progress is made by finding the problem and then solving it. Sometimes, finding the problem is half the battle (or more!) I think that's why people sometimes end up feeling betrayed by the school system as they enter the real world. When faced with a real problem, they say, "You didn't prepare me for this!" No, in fact, your time in school was spent solving problems and answering questions, not recognizing them in the first place. Rarely were you presented with an open-ended problem. Why? Because they're too difficult to grade! Open-ended problems take longer to solve, and the results take longer to manifest in measurable ways.

I'm going to cut myself off before this becomes more of an editorial than it already is. Suffice it to say: Learning to actually complete coding projects is a lot different from the kind of coding that I learned in my CS 10* courses!

Back to CSS. Say you have two files, an HTML file and a CSS file. In the HTML file, you have some HTML elements:

<!DOCTYPE html>
<html>

<head>
link rel="stylesheet" href="main.css"
</head>

<body>
<div class ="classA">
<h2>Heading Text</h2>
<p>Paragraph 1 paragraph 1 paragraph 1</p>
<p>Paragraph 2 paragraph 2 paragraph 2</p>
</div>
</body>

</html>

In the CSS file (of filename "main.css",) you style the elements as follows:

.classA {
color: #f0f0f0;
}

.classA h2 {
font-size: 20px;
}

.classA p {
font-size: 10px;
}

In the HTML file, there's one div (short for "divider," or something) element. This div element is of class "classA," and it contains three subelements: An <h2> element and two <p> elements.

The CSS file contains three little chunks of code. Each chunk gets applied to certain elements within the HTML file. The element or group of elements that the chunk gets applied to is determined by what follows the dot (.) and precedes the bracket ( { ). The first thing that follows the dot is the class name. In this case, all three chunks of CSS pertain to some or all of the items within the HTML div element labeled as "classA".

The second thing that follows the dot is the specific subset of elements, within that class, to which we wish to apply additional attributes.

So, the first chunk of code gives a color to any HTML elements of class "classA". The color it gives is the color represented by hex code value #f0f0f0, which is some kind of grey. (The first two digits of the hex code represent how much red is in the color, the middle two digits of the code represent green, and the last two represent blue. Since there are equal parts red, green, and blue, the color is some shade of grey.)

The second chunk of code gives a font size of 20 pixels to any HTML elements of class "classA" and type "h2".

The second chunk of code gives a font size of 10 pixels to any HTML elements of class "classA" and type "p".

And there you have the most basic parts of CSS. Explaining it verbally, it gets a bit dense! But Codecademy's show-and-tell method gets the job done much more naturally. Less reading = more fun. That's why it's a great learning tool.

That said, I'm off to complete some more segments, and maybe work on an app for a bit. Later.

Adventures With MySQL

What I knew

If you've read my intro post, you know that I'm just trying to build an app.

Turns out that to build this kind of app, I'll need to know a lot more than just the Android SDK. Because the app will involve a database, I'll need to learn how to use MySQL, a database system. And because I plan to develop a web service to go alongside the app, I'll need to learn all the languages involved in that.

So I bought another book: Learning PHP, MySQL, JavaScript, CSS, & HTML5 (3rd Edition) by Robin Nixon.

Going into today, I knew already that in the MySQL database management system (DBMS,) you can create databases. Each database is a collection of tables. Each table has columns and rows. Each column contains information of a certain kind, and each row represents one entry.


You might have a database called "library." A library is a collection of media. There are different kinds of media--say, books and movies. So, you might have one table called "books" and one called "movies". In the "books" table, you'd likely have columns like "title", "author", "ISBN", and "summary". Each row in that table would represent one book--like "The Bible", with author "God", some ISBN, and a summary like "the primary text of the Christian religion."

What I Learned Today

 You can manipulate databases from the Command Prompt. To do this, you use SQL (Structured Query Language,) which is somewhat intuitive (it's fairly similar to English.) SQL is a language, while MySQL is a DBMS (a system for managing databases.) In practical terms, if you learn SQL through experimentation, you get familiar with MySQL (or another DBMS--they're listed here, in order of popularity.) But conceptually, SQL is the language itself, while MySQL is the program that knows what to do with the language, i.e. creating, modifying, and viewing data as commands are given.

I learned how to create databases, create tables within databases, create users while granting them access to databases and/or tables, and more commands. (See below for details.)

I like the style of the Nixon book--it's direct and straightforward. Like any print source related to coding, it has gone out of date in minor ways quickly. Still, it's one of the most effective resources I've explored so far, and it feels worth the money I paid ($33 on Amazon.)

What Actually Happened Today

First problem: The WAMP (Windows, Apache, MySQL, and PHP) that the book suggests I use is called Zend Server. The book thinks Zend Server is free, probably because it (presumably) was free when the book was published. Zend Server is no longer free. So instead, I'm using a WAMP called EasyPHP.

The first problem this introduces is related to running SQL from the command line. The book tells you to type:

"C:\Program Files\Zend\MySQL55\bin\mysql" -u root

Of course, there's no Zend folder, so this doesn't work. Instead, you have to type:

"C:\Program Files (x86)\EasyPHP-DevServer-14.1VC11\binaries\mysql\bin\mysql" -u root

(Being a command line noob, it took me a few minutes to guess that I should be looking for a binary file named mysql. Before that, I tried typing this:

"C:\Program Files (x86)\EasyPHP-DevServer-14.1VC11\binaries\mysql" -u root

...which gives an error, because there's no binary file "mysql" in the "binaries" folder.)

Once I figured this out, I was good to go. I learned how to...

create databases
CREATE DATABASE publications;

create tables
USE publications;
CREATE TABLE classics;

create users and grant them access to those databases or to tables within databases
GRANT PRIVELEGES ON publications.classics TO 'jim'@'localhost'

I also learned about some of SQL's data types. I simply don't have time to recap everything I learn. (The book is over 600 pages long.) Hopefully this will be useful to people that know even less than I do about this stuff (hard to imagine since I'm such a noob.) At the very least, it helps me clarify my own understanding of the subjects.

--David Garrett
Prism Technologies, LLC

P.S. Your opinion is valuable! Was my color-coding helpful, or just distracting? What should I do differently? Use the comment section to your advantage!

What Environment Do I Use?

For any article published AFTER April, 2015:

I got a Mac.

Browser: Chrome
Text Editor: Atom
Java IDE: Netbeans
C++ IDE: Xcode

And here are some nice keyboard shortcuts for this set of tools.

For any article published BEFORE April, 2015:

"I operate in an environment very similar to the average guy that only uses his computer to browse Facebook. I don't use Linux. I don't even use iOS. I've used Linux on school computers. I even made a bootable USB. But at this point, getting familiar with it feels like one more thing to eat up valuable learning time. So I'm still on Windows. Sue me."

A few specs:

OS
Windows 7, Service Pack 1

32-bit or 64?
64-bit

Other specs?
AMD FX-8350 Eight-Core Processor (4.00 GHz)
Ram:  6 GB

IDE?
Additionally, at the time of writing this post, I use Eclipse to develop Java. I recently downloaded EasyPHP (does this count as an IDE?) to follow along in Learning PHP, MySQL, JavaScript, CSS & HTML5. I also downloaded Netbeans, since I'm working with someone that uses it, but I haven't needed to use it yet.

Pilot / Ketchup

This is the story of a boy named David. One day, David decided he wanted to make an app, the kind that would run on his phone, an Android device, and his Nexus 7, which he had gotten as a graduation present from a kind uncle. To do this, David would have to learn the Android SDK (Software Development Kit) -- a section of Java. David had taken a class in Java already, so he felt ready to depart on this new journey!

Where did David begin? Well, he had been using the Eclipse IDE in his programming class, and so he set out to download the Android SDK and the ADT plugin. The journey was beginning!

David thought that the only good way to learn a language was directly from the documentation produced by its creators, so he started on developer.android.com/training. He got through a few articles before finding himself stuck! The creators' documentation was too dry and linear for David's ADD personality! What was he to do?

David bought a book: Android for Programmers: An App-Driven Approach, by the Deitel family. This was a plunge for David, who was very resistant to spending money on anything but essentials. (David was a college student.) Nevertheless, David took a deep breath and confirmed the order on Amazon.

The book came in. David made a hobby of reading it. He brought it with him in his backpack and read it in places where he didn't have access to a computer with all the necessary programs. The book became a symbol of David's interest in learning the subject, a phenomenon David had not anticipated.

And so David started to become a coder. David was a physics major, and had never done much with coding before, so it marked the beginning of a new chapter in his life. What was in store? He knew that only time would tell. But time was just space, and space was just energy, and... well, he decided to only talk about coding on this blog from now on.