Category: web development

Continuing JavaScript Education

I am still working on learning JavaScript. It’s hard. But I’m not alone in the struggle.

There will be times when reading this book feels terribly frustrating. If you are new to programming, there will be a lot of new material to digest. Much of this material will then be combined in ways that require you to make additional connections.

It is up to you to make the necessary effort. Take a break, reread some material, and always make sure you read and understand the example programs and exercises. Learning is hard work, but everything you learn is yours and will make subsequent learning easier.
– Eloquent JavaScript by Marijn Haverbeke.

I have found some good resources in books.

  • First, as I just quoted up there, Eloquent Javascript by Marijn Haverbeke. It’s great, and it’s free online.
  • JavaScript for Kids by Nick Morgan (so good!)
  • Beginning JavaScript 4th ed by Paul Wilton and Jeremy McPeak
  • Secrets of the JavaScript Ninja by John Resig and Bear Bibeault
  • A Software Engineer Learns HTML5, JavaScript and jQuery, by Dane Cameron
  • Thinking in Javascript by Aravind Shenoy, and
  • Mastering Javascript Design Patterns by Simon Timms.

Not one of of them have I completely finished reading, but I think they were all good resources and I don’t regret any money spent on them.
I wish I had them all in hardcopy print; trying to read for comprehension on a Kindle is just not the same.

Now, once I had randomly purchased some of these books, I realized that you can’t just dive deep into code books indiscriminately.
I purchased Mastering Javascript Design Patterns optimistically thinking “hey this is an O’Reilly book, it must be awesome” and not realizing that it has a big disclaimer that you should really have a strong grasp on JavaScript before you actually use the book.

So, I suggest, start by reading Eloquent Javascript online (or purchase it!). Also JavaScript for Kids is fantastic – that one is really the first one I picked up. it made the language seem friendly.

My personal trouble is that I haven’t yet learned how to “think like a JavaScript programmer” and I am not good at breaking a complex problem down into bite-sized chunks that I can tackle using the JavaScript tools in my belt. This bothers me. This reminds me of all the classes in college that caused me to get out of Engineering. I just don’t intuitively have the problem-solving gene, or whatever it is. But that quote at the beginning of Eloquent JavaScript gives me hope.

When you are struggling to follow the book, do not jump to any conclusions about your own capabilities. You are fine—you just need to keep at it.

jQuery is not JavaScript, except (surprise), it is.

I didn’t really understand what jQuery was until this week.
If you are just getting into front end web development, maybe this will help the light-bulb turn on for you as well.
All I really had to do is read the first sentence at the https://api.jquery.com/ web page: jQuery is a library of JavaScript commands, developed by John Resig. It isn’t a separate language. It’s a library of powerful commands. As Cameron said in my Udacity course, “if you had a few days, you could come up with a library of commands like this yourself”. But that is, as someone else commented, like saying the Mona Lisa is just paint. The jQuery library is concise, and streamlined to work effectively at what it does. You can open the library itself in your editor of choice (I like Note++) and look at it, and even start to see how it works.

In my studies at Udacity I have moved from JavaScript to jQuery. But I don’t feel like I have a strong enough background in JavaScript to fully understand how to shortcut the commands using jQuery. I just purchased a copy of Secrets of the JavaScript Ninja, by John Resig and Bear Bibeault. My copy didn’t arrive yet, but I’ll let you know if I find it valuable. In fact, I just heard an interview with John Resig on this episode of Code Newbie podcast. It’s an interesting listen too, though he doesn’t get into jQuery code itself in the interview.

If you have any insights or tips, let me know!

The Making of My Logo

Here is how I came up with the logo for my “Identiflora” project.

I know normally I would have some pencil sketches, but my idea was all vector fonts from the moment it entered my head, so I didn’t sketch any lines.  I imagined question marks rotated around a circle, looking like flower petals – since my project is about identifying flowers.

many_questionsThe first thing I did was do a cursory Google search, and didn’t discover anyone else using anything like that idea.  (Whew!)

 

flower_appsNext I decided to check the iTunes App Store both to get an idea of what a good, clear logo would look like, and to see which logos are already out there.  I also consulted this article on How to Create Better App Icons.

logo_1So with that in mind I started making my vector question marks. I began with a base font, and squashed it around a bit so it is “mine” and not a specific font.

I like where this is going but, hey, those question marks are all backwards!

So I flipped them. I also decided this orange color is not reading “flower.” It looks more like “sun.”

I switched to green and red, like red rose petals. But it just wasn’t working for me. I tried some more colors and even added leaves to emphasize “flower.” But I don’t just want a flower, I want a question too. So I finally realized I should make the question mark stand out!

But that doesn’t read as a flower. It’s just a “weird octopus made of question marks”. So I went to my secret flower weapon: pink. This one is a keeper.

Indentiflora_2015

What do you think?

 

I have an idea

While I am still working on Udacity classes, I really want to start working on my own personal project. For years I have been passionate about plants, especially identifying wild native plants. You can probably tell, since most of the photos that make it into this blog are plants.

In college plant taxonomy was by far my favorite class. I loved that class. It was just four guys, the teacher, and myself. In retrospect my final project was “sort of phoned in.” It involved going out to a nearby park, several times a week over the course of a few months, and documenting the growth of the spring plants, and the seed dispersal methods they each used. I really didn’t take personal observation seriously, and at the last minute I sort of “Alta Vista-ed1” for a good part of the information. The way I didn’t pursue my college classes with my whole heart still bothers me, and that’s why I really want to complete this Udacity nanodegree. I want to prove to myself I can work hard at something difficult, and push through, and complete it.

But back to the plants.

I love plant books!

I want you to see wildflowers as your friends.

While I know other plant ID sites and apps already exist, this one is going to be my own. Everyone starts with a first project, and, yes, this may be ambitious, but it’s a topic I really enjoy. Ideally, I want to code the web app, sketch the art,  write the text, and take the photos of the plants. Now that probably isn’t going to be exactly how this works out, or else it would be a site that only helps you identify plants that live in my back yard. But it’s a dream, goal, and working idea.

Indentiflora_2015So Identiflora.com was born. If you go there, there is nothing to see. I won’t even link you to the  boring parked page. But I registered the name and drew a little app icon.
I’m excited about this!

 

1That’s what searching was called before it was Google, and after it was Lycos.

Slow Progress, Various Resources

I have been bogged down this week and making very little progress on my Udacity work, to be honest. I still found a few good resources.

Good resources I found this week:

Device Screenshot Emulator allows you take screenshots of how your site looks on various devices. This has been especially handy when I want to place images of projects I’ve worked on into my Udacity resume project. It is so accurate, the function on my site that I could always get to work in emulation in Chrome, but not actually work on my iPhone, fails to work in this emulator.

JSHint allows you to paste a chunk of code into the screen, and will make suggestions about things you may have missed or done in a non-standard way. This helped me a lot when I was getting an obscure error in Chrome due to some missing brackets.

Non JavaScript resources:

HTMLFreeTemplateStuff a Tumblr of interesting HTML and CSS templates.

Fantastic list of art tutorials by Jonathan Rector check out his art.

This isn’t even a resource, but I really have been helped by using HabitRPG to motivate myself. Losing virtual hit points by failing to complete tasks has been compelling! It also motivates me get at least 5k steps a day (yes I know 10k would be better), spend more time in prayer, work on my biceps, and any other thing I set for myself as a task. And I get to ride a pink dragon and have a pet zombie octopus.

 

Now I get to check “Write a Blog Post” off my task list!habitrpg

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:

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.