AJ Dyrbye

Web Developer and Digital Humanist

Tag: javascript (page 1 of 2)

Reflections on the LLC jQuery Workshop

This last Saturday was the jQuery workshop run by my local branch of Ladies Learning Code (LLC). I can honestly say I got out of it what I wanted, namely an introduction to the relationship between JavaScript and jQuery and some real-world examples of how they’re applied. Nevertheless, I’m left ambivalent

To be perfectly clear right out the gate, this is by no means a reflection on Ladies Learning Code, its fantastic organizers, the instructor or the mentors. They all lived up to the high standard I’ve come to expect from the organization, and I’m pleased to say that I’ve committed to mentoring at the upcoming CSS and WordPress workshops. In fact, I would like to give a shout-out to Bree for all her hard work behind the scenes, Kim for handling her first time in the instructor’s chair with confidence and grace, and Susan for her personable and knowledgeable mentoring.

The ambivalence comes from being in that funny in-between as a learner. I’m not exactly a novice, but hardly experienced. I came in already knowing programming fundamentals – variables, loops, objects, methods and so forth – which meant that large parts of workshop was a retread for me. Rather than learning the concepts from scratch, I used my participation to 1) deconstruct how the lesson plan broke them down and built on them (smoothly with little wasted space or time – bravo!), and 2) annotating the guided changes to the learner package web page with my own observations connecting LLC’s approach to that found in Eloquent JavaScript.

This wasn’t particularly a surprise; I knew going in that this workshop is geared toward learners who don’t have prior experience with programming or JavaScript. Nor do I regard it as a drawback. There is enormous value in having widely-accessible beginner-friendly sessions like this; my appreciation for it is a large part of why I’ve chosen to volunteer as a mentor wherever I can of late.

In terms of my own learning, I wanted to come out with some reinforcement of what I’m already learning. I can honestly say I’ve achieved that. I’m more confident that I’ve made the right choice in how I’ve approached JavaScript this time around, and that I can start working with it on a web development level without getting bogged down as badly as I did the first time around, with my overly ambitious game idea.

All in all, I gained a better idea of how the moving pieces on a website with JavaScript work in relation to the CSS and HTML, and of the types of things JavaScript and jQuery are commonly used for. It revealed for me that a few things I’d thought were straight-up advanced CSS tricks are actually some pretty simple jQuery, and that jQuery also streamlines implementing some pretty neat interactivity features, things that I’m now eager to try out on my local WordPress install. On that front, it was good to have a primer on event chaining and timing, particularly in relation to using JavaScript to implement event-specific CSS modifications. I also appreciated the segment on plugins; I only had a vague notion of what they entail before, one largely informed by working with WordPress.

It is at once satisfying and a little maddening that I’m at the point in my learning where this particular workshop couldn’t offer much of a challenge. The only issues I ran into over the course of the day can be traced to two things: still being in the adjustment period with Windows 8 after years of nothing but OS X, and a syntax error in which I forgot the period in front of a method and just couldn’t see it. As it stands, the latter tells me that checking for missing periods when troubleshooting is going to have to be for JS as checking for missing semicolons was while I was learning PHP.

The challenge will come; I simply need to find it on my own now. I have a new set of resources and lessons to explore, and a website to tinker with. And I can’t complain about the way I’ve been taking it slow learning JavaScript; clearly it’s been working.

Besides, where else would I have learned that browsing random websites with the console open can be an amusing and revealing pastime (thanks, Susan!)?

Revisiting JavaScript

I first took a crack at learning JavaScript a year and a half ago. I was fresh from defending my Masters, and eager to constructively fill my time between sending out reams of resumes.

It didn’t go so well.

Looking back, it’s not hard to see why. I bought a book, went through Codecademy’s JavaScript modules, and charged right in with a project that swiftly proved far too big and complex for my limited skills. I came out of it thoroughly discouraged.

I decided at the beginning of the year that it was time to come back to it, and do it right this time. 

What does ‘doing it right’ entail, though?

For me, it means taking it slow. Building an understanding of the language. Seeking out instruction and insight into its ‘real world’ applications. Developing a plan for how to apply it in my own work, scaled down to a manageable proportion.

The first part of this new approach has been to go back to that book I mentioned, Marijn Haverbeke’s Eloquent JavaScript: A Modern Introduction to Programming. Instead of just reading it like I did the first time, I’ve been making myself treat it like a course and taking extensive notes.

Reframing the concepts in my own words, and writing out the code longhand, has been the best thing for my understanding of the language. It’s forced me to break down the book into small chunks, which means building up my comprehension slowly with reinforcement and regular, often daily, reminders of the concepts that a given chapter is exploring. It’s drilled syntax and conventions into my head by ensuring I’m writing out expressions over and over. And, by writing out the explanations in my own words alongside the code examples, I’m finding that it’s much easier to actually read through the code with an attention to detail, building my understanding of how all the parts actually fit together.

At this point, I’m on Chapter 11 of 12 of my edition after three weeks of work devoting at least an hour a day. I’m already much happier with my progress. While it’s been hard to resist the urge to start developing code, my grasp of what JavaScript can do and how to work with it is far better than it started out.

I’m feeling well prepared for the next stage, which will begin this coming weekend: actually working with and applying code. On Saturday, I’ll be attending my local Ladies Learning Code chapter’s jQuery for Beginners workshop.

The great thing about the LLC workshops is not just that they provide an inclusive, beginner-friendly space to learn new concepts, it’s that they’re explicitly designed to be a jumping off point for further learning. I’m looking forward to getting a practical grounding in the concepts I’m already working on, and getting pointed to a whole oodle of resources for carrying it further.

The book and I aren’t quite ready to part ways – there’s a second edition with additional materials and a companion website to go through yet – but as of this weekend I’ll be at a point where I’m able to work with the language in a knowledgeable fashion.

I have ideas I’d like to try out, and a website to work on, and I’m excited to see where it all goes from here.

Hackathon, Day 2

As I write this, it is the morning of the second day of the Hackathon. I’ve been able to pursue my idea, but, as these things tend to go, it hasn’t played out at all how I’d planned. I spent last night turning over the first day in my mind, and now I find myself reassessing.

Here were the goals I had set for myself before the Hackathon:

1) Nail down the character, items, NPCs, areas and basic mechanics such as accessing inventory, exploring a room, combat, conversation, levelling up and so forth. Mechanics will be governed by functions and may be simplified further if required.

2) Build a simple, linear game using each major element and mechanic at least once.

3) Build a web interface over the game.

4) Playtest.

5) Expand game, if enough time remains

As of this morning, I’m still on point one, with no realistic way to move past it in the time remaining. The first room is in place, as is the player-character, some plot items and a sample creature. I’ve also roughed out the combat function and the examine item function, and identified where I need to write other functions to ensure those two behave as I need them to.

To be honest, I’m not terribly surprised. The game mechanics I was hoping to implement prove more complex to build than is realistic for the timeframe, even with additional simplifications. I’m thinking I’ll have to go back to the drawing board at the end of this and decide what, specifically, I hope to accomplish, and how I might more realistically carry that out.

I’m not particularly upset about all this. I ended up working with only one other person, Jacqui. Her strength is in project planning and documentation, and she ended up putting together an impressively through document mapping out all the object relationships a game like this needs. It’s given me some serious food for thought. While it would have been nice to have an experienced coder working with me, planning of this kind is so important, and I’m no doubt better off for it. I’m still happy with how much the two of us accomplished, given our respective skill sets.

Today, I’m going to keep plugging away at functions. If I’m really productive, I might be able to start testing one or two. Jacqui, alas, is down with a back injury, so I’m flying solo.

While it’s clear that the task is much bigger than I expected, I’d like to keep going for a bit longer before I decide whether it’s worth continuing this development path. I’ll have to decide once the even wraps up. I want to continue with the idea, and I still think it’s going to be a great way to learn more about how JavaScript works.

Meetups and Hackathons

I’m still plodding along in Codecademy; it’s been busy enough that while I’ve been able to set aside a bit of time daily for it, I’m still approaching the midpoint of the JavaScript modules and have yet to delve as deeply as I’d like in the book I picked up.

However, I found a local JavaScript community meeting this week, Exchange.js, and attended one of their meetings yesterday. I’ve got a way to go before I can follow much of what they’re discussing, but the group turned out to be friendly to both newbies and questions. It was soon clear that part of the point of the group is to discuss concepts and implementations that not everyone can expect to be familiar with, so they can find out more about them. I was able to have a number of good conversations once the presentations wrapped, and will be attending again next month.

The meeting drove home just how few and far between women are in programming language-based communities, though – I was one of only three attending, and one of the others was a business owner trying to get a conceptual handle on what her employees are developing. It’s stranger than I expected. I’m curious to see how the web developer community compares, once I’ve seen more corners of it; my initial impression is that women are still outnumbered, but not nearly as badly. Regardless, I’ve yet to feel out of place or unwelcome.

One immediate side-effect of the meeting is that I’ve been persuaded to sign up for an upcoming hackathon, and will be prepping a pitch for it. I’m sticking with a game concept, as I still think it’s a great, scalable, learning exercise. The concept is still rooted in the text adventure, but I’m now wanting to integrate a simplified version of the D&D 4E ruleset, pare down the party to a single-character adventure and perhaps adapt a game module for the gameplay. I’ll lay out the rough design here in a future post.

JavaScript, PHP and Planning my First Solo Project

So JavaScript has been going well. I’ve been going through CodeAcademy’s modules at a satisfying pace.

In particular, it turns out that my background in PHP has been really helpful. The two languages are more similar than they are different:

PHP vs JavaScript

A comparison of basic PHP and JavaScript.

 

And so on. If/else is structured the same way, right down to the curly braces, and I won’t be surprised to find out loops are too.

The choose-your-own-adventure module was a disappointment, though – it was plunked in so early on that it didn’t convey any of what I’d hoped. Instead of the rough outline of a complex set of possible inputs and outcomes, it set up a yes/no scenario and completed. There’s a second one forthcoming that may be a bit more what I have in mind, but I’m not holding my breath at this point.

That said, I’m confident I’ll be ready to try out the more complicated version on my own in another day or so. I’m aiming for an experience similar to Zork, or, if I can get myself to the point of including static graphics, the early King’s Quest games. Here’s what I’m picturing:

An interface in which users are encouraged to type key words and phrases to proceed, based on the context provided.
Multiple outcomes, anticipating two to five possible user inputs, plus a set of fail messages (“I don’t understand ‘popsicle’”) which may include some easter egg type responses for some input.
Testing user responses will require string matching, with the strings run through a change to uppercase or lowercase function to ensure user input can be case insensitive.
Outcomes are loading into a variable when the user has made a valid choice, with one  other designating the encounter. Layered if/else or switch/case statements then pass the user to the appropriate next encounter.
I’d need at least two functions: One to allow users to quit/restart based on a preset keyword, and one to bring up play instructions.

I expect this would give me the complexity I want while being appropriate for my current skill level. As my skill level grows, I can use it as a framework to practice on. I’m aiming to include some HTML5 and CSS3, and an interface permits users to type directly into a field in the page rather than relying on a series of annoying on browser popups.

I’ll make the game in progress available through my University of Alberta homepage.

Older posts

© 2014 - 2021 AJ Dyrbye

Up ↑