More JavaScript Resources

JSON

JSON stands for “JavaScript Object Notation”. It’s something I have been learning a lot about this week. When I made my post about JavaScript is Messy I didn’t understand as much about how messy it is as I do now!1
When I wrote about dot notation and bracket notation last week, I thought they were interchangeable. Actually, they aren’t. There are symbols you can use in your bracket notation that you can’t use in dot notation (and symbols that work that you shouldn’t use anyway!). Jason Ellis has gone over all of this information already and I will link you to his excellent Grok-Interactive blog article about it.

But JSON format, at least for me, helps because it’s very consistent. And the best part is this JSONLint checker. Plug your data into that, and it will show you exactly where your mistakes are in your format, and how to fix them. Thank you Udacity for pointing me to that resource!

Here are some of the best resources I’ve found this week:

Fear and Loathing’s list of JSON Resources

SquareSpace’s tutorial on JSON and how it works behind the scenes in a blog post.

Copterlabs article on making JSON do work nicely with AJAX. Technically some of the things they talk about in this article are beyond me, but I have a feeling I will need this information later.

Mastering Javascript Arrays 

1Yes I know that was only a week ago.

Happy Mother’s Day

JavaScript is Messy

I told a friend I was having trouble with JavaScript and she said “JavaScript is messy”. I thought about this and she’s right. I am only starting to learn it, but it does have more instances of “you can do this legitimately a bunch of different ways“1 than you might want your computer language to allow.

I have trouble even remembering where you need to put a “{ }” or where you just need a “;”. I don’t think those are the “messy” parts, those are just me learning the grammar of the program; learning the punctuation.

But when browsing StackOverflow I can find questions like “Why is JavaScript inconsistent across browsers” and articles on Reddit like “My JavaScript is Messy” and ycombinator articles that just confuse me (but contain some good links).

I guess JavaScript is a language. Languages grow and change. It was created by a guy back “in the day” on Netscape, and now it’s being used long after Netscape is cold in the ground. I’m sure they didn’t develop it in the 90’s thinking that it was going to become this big standard thing, used by everyone, everywhere. Now people are so constantly and consistently asking JavaScript to do things, lots of other programming frameworks and libraries have been built up around just trying to make JavaScript work faster/do things you want better/easier/more consistently. Like Node.js and Angular and JQuery and Bootstrap.

And I’m sure I’ll love the speed and ease of use those bring. But first, I’m still trying to work my way into a basic knowledge of JavaScript. The best resource this week has been the Mozilla Developer Network. This is a great, thorough explanation of just about everything you could want to know as a front end developer.  If you were somehow trapped on a desert island with a copy of MDN you would emerge from the harrowing ordeal with a substantive knowledge of the web as we know it today, and also, starve to death.

Ok, back to trying to make a for loop without crashing my browser.

1What is up with “Object Literal Notation” people. OR you can use a constructor? Too many choices!

 

I don’t Understand JavaScript

So I finally hit a little “wall” in my Udacity course. Starting from my code background of “null”1, I don’t really understand JavaScript at the pace they are giving it to me in this course. So I thought “There must be a How to learn X the Hard Way  for JavaScript that I can check!” I was wrong.2

But I found something else that was very helpful! I found an article on tuts+ called The Best Way to Learn JavaScript.  And it recommended going through the JavaScript course at Codecademy. Oh! Why didn’t I think of that? I really enjoy Codecademy anyway. So now I’ve paused Udacity studies this week to get a refresher at Codecademy.

Further on the “list of things I should have realized but didn’t”, if you are working through a course at Codecademy and get stuck, you can’t continue, and they don’t give you a solution. In order to find a solution when I was stuck, I discovered people are broadcasting themselves going through the classes on YouTube! It’s a great way to watch someone else struggle with the same thing you are (and get a hint). Note, they may be doing it on Twitch.tv too, but I didn’t check.

Finally, I started reading Eloquent Javascript which is free to read online. I haven’t gotten too far, but I expect I will buy a copy just to support the author.

1 Well, “nil” but “null” is a JavaScript term, so it’s a weak pun, yay.
2And even if there was one, it may have been beyond me, to be fair.

I don’t understand Git and GitHub

I have sometimes wanted to throw the computer across the room when trying to figure out Git, but I found some good tutorials! I’ll put the links at the bottom of this post. Not only did I find helpful tutorials, but I want to put some of what I learned about the Git commands into “non technical terms”.

Git is used to help you organize backup copies of your program. Every time you commit a copy of what you are working on, it is like saving a copy of your document/project. Typically you do this every time you’ve added something or worked on something. All the previous saved versions of your project (or whole program directory, called a repository,) still exist, and you don’t  have to keep making incremental file names the way I usually do. And before you save your file, you can look at the differences you’ve made since the last time you saved. Status will check to see  which files are staged to be saved (commit).

I end up with a big directory full of confusingly-named copies like HorseFridayA.PSD, HorseFridayB.PSD, HorseFridayB2.PSD as I am working on an Adobe Photoshop file, for example. But with Git, your current save contains a log of all the changed versions you’ve made in the past! So if you need to go back and undo something, you have all those undo-states available.

Not only can you see a log of all the changes you’ve made, if you want to go back to a previous version and then “try something different and crazy that may not work” you can clone the project and make a branch. In the branch you can create a second version of your project. Then you can work on that version. And if you end up liking those features and wanting to add them back into the original version, you can merge them back together. Handy!

But another major reason people use Git is this: when you upload your project repository to GitHub other people on your team can make changes and work on the documents at the same time you are in them. Then you can update and merge them all back together. Git will warn you if you have made conflicting changes, and you can resolve them before you merge. And you can see the differences between what you did to your copy of the file, and the other team member did.

You can even use GitHub to fork and make a copy of another person’s code repository and alter it to do the things you’d like it to do. You can pull that copy down to your local computer, make changes and push it back.

So Git and GitHub are powerful and useful, once you know what they are for! I still don’t exactly understand why the command line is favored over a graphical interface, but it is, and “they” say you will find it great after you get used to it.

 Ok, now for the tutorial links. These are some I found especially clear and easy to follow:

Making the command prompt easier to use:

Quiet Easter

I wanted to post last week about Grunt, but I still don’t feel like I understand it well enough to post anything about it.

Today was Easter, and I went for a walk in the woods. So, in order to put off trying to give any information about Grunt, I will give you a couple of photos of my walk in the woods.

Unfortunately, we are having a cold and late Spring, and there was hardly anything to take a photo of.

But, He is Risen!

White branches against blue sky

White Branches

No Leaves Yet

Pale white lichen

White Lichen

Twine and Flex

As I work through the Udacity classes on front end web development, I’ve been discovering some pretty good resources on “Flexbox”, a very handy way to make text move around your web page in easily predictable ways that allow your designs to adapt to different sized screens (laptop, tablet, phone).
Here are some of my favorite links. They may help you as well:

In addition to that, I’ve been reading a great book from No Starch Press called “JavaScript for Kids” by Nick Morgan. I have also been looking around at a free, html-based interactive fiction (IF) language/platform called Twine. So I made a little (very basic) tutorial on JavaScript using Twine. JavaScript is Fun.

I had some programming issues making even this tiny script, because I started reading a tutorial on Twine 1.4 and then realized that it has moved to Twine 2.0.x, and changed the syntax. Now, I discovered, you can choose 3 formats for your markup. I chose one called SugarCube because the syntax made the most sense to me (other options are Harlowe and Snowman).

Twine is great fun because it lets you create a branching story in a graphical way; when you link two passages you actually see the link. Then it lets you leverage all the CSS and HTML and scripting language tricks you know to add functionality and cleverness and even more interactivity, images, even animated gifs. And you can test and debug it all before you make it live. Twine publishes its games as a self contained html page using a wiki format called Tiddlywiki. This makes them extremely quick to load and run in a browser.

Of course, having a good story is the crucial part.

Online Learning Tools (Part 4)

I’ve showed you some of my favorite tutorial sites. Now I’m going to briefly describe some of my favorite tutorial podcasts. I love podcasts. I listen to them on my long commute, and sometimes while I’m at work. I sometimes embarrass myself by starting half my conversations with “I was listening to a podcast and someone said…”  Here are some of the ones I have found truly inspirational:

When looking for podcasts iTunes, I always find a lot that have “podfaded” and aren’t ‘making new episodes. They might be worth looking up, but I didn’t list any. I also avoided podcasts marked “E” for “explicit language”.

Web Development:

Start Here
This is a really wonderful podcast, designed to step you through the process of becoming a web developer. They have homework assignments, too! These guys are sincere about what they teach, and invite feedback.

Build & Launch
A new podcast for 2015, you can easily listen to this from its beginning to its current episode, and I suggest you do! Justin Jackson will make you want to make things! He gets me fired up. For season 1 he had a goal to launch a new project every week. I can’t wait to see what happens in season 2.

Coding 101
I don’t catch this one very often since I can’t watch a video podcast while driving to work, but I do recommend this for anyone who wants actual code examples. Father Robert Ballecer is a good teacher. I’ve watched this on my Roku.

Art:

Chris Oatley’s Artcast/Paper Wings
I have never seen anyone as intense about art as Chris Oatley, except perhaps Jerzy Drozd. These fellows take visual storytelling more seriously than a lot of Christians I know take Christianity, and it blows my mind.  Be prepared to analyze everything and come away realizing you don’t work hard enough! (Chris Oatley’s Artcast and Paper Wings are basically one show with two feeds, but that link will get you all of them.)

Lean Into Art
Jerzy Drozd is a master visual story teller who isn’t afraid to let you see the inner workings of his art, life, studio, and mind. He shows you what it takes to be a full time artist, and what you have to give up for your art. He is sober and personal and sweet and friendly and makes me want to attend his classes. These podcasts sometimes come with art challenges you can post via twitter to get comments and critiques.

Pencil Kings
Mitch Bowler finds a new rising star to interview in each episode, and they are always proof that if you are in the right place at the right time doing the right thing you can create your dream job. Or at least, someone somewhere did. But they never make it look easy!

Additional Resources:

These two I found while researching iTunes to see if there were any other good resources. I haven’t actually listened to them much yet.

<Web>Agency </Podcast>
A Responsive Web Design Podcast

 

Meanwhile at Udacity (Week 2)

So Monday was my first “live” session with the Udacity teachers. First I attended a Google Hangout where they discussed some of the more advanced projects. It didn’t pertain to the project I am currently working on, but it was good to know that this would be available to re-watch when the content was more relevant. They have a great library of videos full of content like this; many other people have asked questions about the same projects I will be tackling. This is really useful stuff (if I remember, and take the time to use it).

After that was the “Coaches, Coffee, Code & More” live session. This one was not on Hangouts, it was on rabb.it and I had a lot of technical difficulties with it. In spite of that, it was a personal voice/video chat session with 3 students and 2 coaches. To me, these are the kind of interactions that are setting me up for success with Udacity. I felt like I had a rocky start because I kept applying to the wrong Google group (and consequently was not accepted). In addition, there were (and are) some other technical difficulties on the Udacity site, which have kept me from really feeling close to my “cohort” of students. But when you can spend live time with the teachers, it helps me realize they want to help you succeed.

I didn’t get to any of the “hard projects” yet. I’m really expecting a challenge, since even these first easy projects are out of my comfort zone! But right now I can’t wait to see what comes next.

Online Learning Tools (Part 3)

I’ve discussed some sites already, but I have to get in just a few more that have helped me and may help you.

Lynda.com
This was the first online learning site I ever chose to throw my hard-earned cash at. It has a fantastic variety of tutorials, the majority of which are overviews of various software packages. It’s a great site, but you won’t get nearly as much out of it if you don’t own the software you are studying. With Lynda you get “all you care to learn” tutorials for one monthly fee. I am of the opinion that I learn better on the Udacity/Udemy sites where you have actual quizzes/projects, not just watching someone else tell you what each button does. I haven’t tried every Lynda course, though. Some may be set up in a more hands-on system, but there is no way to interact with the instructor.

A couple more I haven’t used, but want to mention:
Treehouse.com
SitePoint

On to the “art-oriented” tutorials.

Craftsy
Much like Udemy, Craftsy is primarily a “Pay to learn” site, and offers the same one-on-one interaction in the comments. But, frankly I have found more interaction on this site; people want feedback and critique on their art. I found this to be a friendly learning space, and it has many free classes. It also has coupon codes in your e-mail box almost every day, so think about which e-mail you want those to go to when you make your account.

Pencil Kings
I found this site by accident when searching the web for art resources, and I’m glad I did! It offers a great set of free “delivered to your e-mail inbox” tutorials. For a monthly fee you get access to many more. I haven’t taken the time to go through all of my free tutorials. It seems to focus on solid sketching fundamentals. They are always of a very encouraging tone! I believe you get to interact with the instructors as well.

Chris Oatley
This brilliant artist quit his job at Disney in order to start an online teaching school. He is passionate about teaching, passionate about art, and his classes are real “classes”; you have a lot of one-on-one interaction with the teacher, and get out of it what you put in. I haven’t taken one of his classes, but a close friend did.

Here are some other places to find good art tutorials:
deviantART
Ctrl+Paint
YouTube

Basically anywhere you can search for a tutorial, you will find some. But to improve, you just have to spend time doing the thing no matter what it is!

 

Meanwhile at Udacity

I wrote in my last post about how I couldn’t wait to try Udacity, and today the online open enrollment began.
Here’s how it works: You give them your credit card number*, you get seven days to try the class before it’s charged. Enrollment begins today and lasts a week, but study begins today too, if you want to jump right in.

When I saw the course was “6 to 9 months” I wasn’t sure what that means. But here is the explanation: Since it’s your own pace, you may finish it all sooner or later, it depends on how quickly you understand the material and finish the projects. And if you finish quickly you don’t pay for any more than you need.

Well, here begins the next adventure!
My next post will jump back on topic and be part 3 of the Online Learning Tools.

 

*Argh, I couldn’t believe it when I noticed my card expires in 2020. It’s the FUTURE.