Daily Learning Notes for June 14th, 2017

Today I created another homework challenge for the UnBootcamp students, this time as an intro to data modeling in the context of JavaScript (JSON) and Firebase. Then I spent a little time learning about native modules in JavaScript with my friend, and in the evening I hosted our weekly web dev meetup again and had a great time!

Real-time Notes

8:13am: Day two of waking up early and sticking to this biphasic sleep experiment, day three of creating curriculum for our UnBootcamp students and posting it every day at lunch time. I’m not sure what to focus on for today’s homework challenge. Now we’re at the point where we can branch out into several different topics!

Ideas for next homework challenges:

  • Intro to JSON and/or data modeling, with practice exercises to create a data model for our group project
  • “Up for grabs” style GitHub issues for small tasks like documentation scavenger hunts, creating sample code or instructions for the rest of our team, drawing flowcharts or more UI sketches, etc
  • Intro to the Firebase rules system and how to limit read/write access
  • Intro to AJAX calls (definitely related to an intro to JSON too!)
  • Implementing user presence in Firebase (or save that as a documentation scavenger hunt challenge?)

Oh yeah, following up on one student’s suggestion, I have another idea for a small Firebase app: making our own minimal Learning Management System (LMS) for our class to use! But that might be too big of a project, haha. At least for now. He also made another couple of great suggestions, one of which I’m going to implement right now: I should really suggest a different way of submitting the homework assignment for the objects and arrays practice problems that I made the other day! GitHub comments would indeed be messy. I think I’ll create a REPLIT template file for them and suggest they use that and submit a link.

8:24am: Exploring a tangent: REPL.it’s classroom feature! I wonder how well this will work for these practice problems. They have an auto-grader system built in, which seems pretty cool. They use Jasmine for their unit testing framework – what a fun way for me to finally learn to write unit tests, in order to create practice challenges! I’ll give this a try real quick.

8:48am: OK, I realized that would take a really long time to finish, so I didn’t both with it yet. First step will be to write the solutions! I can worry about writing tests for automated grading later. I went back to fixing up the arrays and objects challenge and made a REPL.it link for each section, with instructions included as comments. That’s much better than before! Also adding a couple more people to the RSVP for our Friday night math study group real quick and checking messages on Slack.

9:05am: Updated my to-do list and calendar, answered a couple more messages. Time for a quick break. Need more coffee. Looking forward to a pair programming session with a friend this afternoon, but just hoping I still have time to finish everything I want to finish and take a nap too before tonight’s web dev study meetup!

9:29am: I’m back with an amazingly delicious drink: English breakfast tea with milk, a pinch of sugar, and a hint of mint! I’ve also decided on the next homework challenge: data modeling and an intro to JSON! I want to do this in the next hour or so and finish it early, if possible. Now, before I can assign a challenge to the students, I need to make sure I understand what the data model for our project would actually look like! And what’s the “right” way to link additional data to our users in Firebase? Time for a little research! This should be fun!

Firebase data modeling examples and resources:

  • The Firechat demo has a nice data structure outline here: https://firechat.firebaseapp.com/docs/#data_structure
  • The Firepad demo also has a good outline of its data model here: https://firepad.io/docs/#firebase
  • …I didn’t like any of the other examples I found!

9:55am: Tangent: a friend just sent me a link to The Dinner Party, a social group for people to talk about living after a loss. Interesting idea. I might want to join one sometime! Another tangent: I’m answering a quick question for a student that’s using Cloud9 for all their development, and I realized I never provided any instructions on how to run an app on Cloud9! Digging up their documentation real quick.

10:07am: OK, now I have a better idea of how I want to approach this topic. First, I’ll write a short intro to the concept of data models, then give an example and a mini-challenge that builds upon the arrays and objects practice problems (maybe by modeling a website about penguins?), and then assign a diagramming and coding challenge to create a data model for our app. I guess those can be two separate assignments though. Cool, I should be able to do the first part pretty quickly! Time to get to writing.

10:52am: After a bit of writing and head-scratching, I took a break to chat with my friend who arrived here at the coworking space. We’ll do some pair programming this afternoon after a lunch break, but first I really want to finish this!

11:28am: As usual, this is taking much longer than I thought it would. But I realized I need to provide a complete example before I can ask the students to create their own data models. I’m starting with the penguins example, showing the code for that, showing a screenshot of what it would look like in the Firebase console, and showing the exported JSON data to point out that Firebase uses nested objects instead of arrays. Important concepts include: nested objects, hierarchical relationships, unique IDs, methods vs properties, diagramming data models, and JSON. I may or may not talk about JSON in this example, though. Leaning towards no. OK, time for a quick break and then I’ll draw a diagram on a sticky note and upload it!

11:49am: Finally finished drawing a tiny diagram, photographing it, and editing the photo on my phone. It’s super cute – and color-coded! Uploading it now.

12:24pm: Done! I reviewed those data model examples from the Firebase demos, wrote some instructions to suggest how the students should review the examples, and then finished this issue by challenging the students to propose a data model for our group project, describing it in three different ways – with an outline, with a diagram, and with JavaScript code! Now I’ll post it on Slack, answer any questions, and then I guess it’s time for a lunch break and maybe a nap break too! Oh yeah, I also need to send some emails for tonight’s meetup. And I still want to do some pair programming with my friend this afternoon too. Lots to do!

12:41pm: OK, done with the time-sensitive emails and all that other stuff for now. Time for a lunch break!

1:37pm: Back from lunch and ready to do some pair programming and collaborative learning with my friend! We might take a look at some ES6 features in JavaScript (maybe pick one from this overview of ES6) or focus on learning more about modules and the export statement. (Notes in a separate section below.)

…

2:53pm: Followed some tangents, learned a couple new things, tried and failed at getting an test with ES6 modules to work in a Codepen project using Babel. But my brain is fading quickly so now I think it’s nap time!

…

4:46pm: Back from a nap and another snack and coffee break spent chatting with a couple other people here at the coworking space. Still feeling groggy, but better than before. I have a slight headache and feel a little antsy, like I either want to go for a jog or do something else for a while. But I’ll try cleaning up these notes a little bit.

4:57pm: Reviewed and cleaned up my notes on modules and ES6 stuff, realizing just how sleepy I was when we reviewed all of that, because I barely remember writing any of this stuff down!

…

6:42pm: At the meetup group! Gonna try the mob coding app. Aww, and it’s broken. I spent a little time trying to identify the latest bugs, but no luck! I don’t remember how I set up this code though! All I know is that it doesn’t make much sense, haha. I think I need to rewrite it from scratch! Meanwhile, I’m spending most of my time helping other people out and jumping in and out of random conversations – everything from bin packing problems to new CSS properties to NodeJS and Express!

…

8:27pm: Setting up Cloudflare for free SSL on the Learn Teach Code website! I guess I should set it up on my personal blog too! The steps are pretty simple: create an account, select my domain name, choose the free plan, then change the nameservers on my domain registrar to point to the Cloudflare servers, and then set up “page rules” and choose “Always Use HTTPS”!

To do next: In 24 to 48 hours, check if HTTPS is working on the website! And then go to the CloudFlare page rules for my site and see if I need to add another rule to redirect from the WWW version of the site or add HTTPS to that one too. (I don’t really know what I’m doing, haha.)

…

9:55pm: Back at my usual coworking space after the meetup group at a different coworking space. We had a great meeting tonight! Lots of people of all skill levels and backgrounds, very social and chatty but still somewhat productive – and we even got free food leftover from an event happening in another room around the corner! I took a couple photos this time (see the meetup section of my notes below). Anyway, now I’m taking care of a couple administrative things and I want to write up a more detailed schedule for Saturday’s UnBootcamp meeting and send out a reminder to both the students and the mentors before I forget!

10:20pm: Done with that for now. Time to walk home, have a bite to eat, and go to sleep whenever I finally feel sleepy again.

Links to check out:

Questions:

  • What problems do modules solve and what are some specific use cases?
  • What are module loaders all about?
  • What is CommonJS exactly? It sounds like it covers a lot more than just modules!
  • How is AMD different from other specifications? How is it different from CommonJS?
  • How does the syntax even work for the export and import statements?
  • What is a default export?
  • Some intriguing buzzwords: Dynamic loading, state isolation, global namespace isolation, compilation hooks, nested virtualization…
  • What’s a look-ahead preprocessor, in the context of how browsers render web pages and run JavaScript?

Today I Learned (#TIL):

  • Browsers prioritize downloading JavaScript files as soon as they’re encountered in a web page’s source code, so putting a script tag at the top of your HTML file will cause a performance hit compared to putting it at the end of the file!
  • You can use the async attribute to tell browsers to asynchronously load JavaScript files. (And it’s well-supported! See http://caniuse.com/#feat=script-async)
  • Modules are automatically in strict mode; you don’t have to write “use strict”!

Web Dev Study Group Recap

Tonight’s meetup went really well! I even took a couple photos:

Cool stuff from tonight’s meetup:

  • I learned how to use Cloudflare for a free SSL certificate!
  • I helped a couple people with JavaScript questions, HTML/CSS questions, and a Node/Express bug
  • I finally looked at my mob coding project again – opening that can of worms was scary, but it made me realize just how much I’ve learned in the last couple of months, because when I saw my old code, I said to myself out loud, “What was I thinking?!”
  • A friend shared his awesome functional implementation of the classic Fizz Buzz challenge – no if statements!
  • I learned a tiny bit about AVL trees, which are self-balancing binary search trees.
  • We also got free burritos and chips, courtesy of the Los Angeles Latino Chamber of Commerce group meeting in one of the other conference rooms – one of their members even said she might join our study group next time!

Ideas for next time:

  • Meeting in the kitchen area worked really well, so why not try it again next time?
  • I’d still love to try out the scavenger hunt idea, where everyone pairs up to research a new topic (we could pick them out of a hat) and then shares what they found at the end.
  • I also still love the idea of micro talks, which is what I’m calling presentations even shorter than lightning talks – like 1 minute or less!
  • Wouldn’t it be cool if we had a collaborative, real-time web app to go along with our round of introductions somehow? Maybe a little game? Or at least an app to make it easier for guests to sign in, so I can better keep track of who’s attending our meetups?
  • Hopefully I can fix my mob coding app enough to actually use it with our group, because I love mob programming as a warmup exercise!
  • My idea for an app for more structured real-time collaborative note-taking would still be an awesome addition to the meetup! I should bump up the priority of that side project.