jQuery

Notes from Forward JS

- Tracy 1 Comment

AKA baby’s first JavaScript conference

I’m not the hugest fan of JavaScript, so how did I find myself at Forward JS, a JS conference? Well, I’m on a number of email lists,and last week Girl Develop It was offering a great discount for Forward JS – $19 for the one day conference (no workshops), down from the original price of $249. I do love a bargain, and I figured that I would learn something, so I impulsively purchased a ticket.

The event took place at the Regency Ballroom. I think I saw CocoRosie play here a long time ago. One guy I talked to mentioned that he had his high school prom at the Regency. They do everything!

I tried to hit up as many talks as possible, but I got tired as the day wore on, and left before the afterparty.

Here’s what I saw:

How Your Brain is Conspiring Against You Making Good Software

  • Jenna Zeigen, Engineering Manager @ Digital Ocean
  • The keynote was pretty interesting. It was all about cognitive biases and how they affect development – from building teams, to coding to project planning. It pushed for greater diversity and inclusion, which seemed to be a theme of the conference.

IMG_3734

Forward themed tampons! Yeah diversity! There were a lot more female attendees than I was expecting, and maybe half of the speakers I saw were women. It felt really good, and positive.

Coffee break – Coffee & Stroopwafels – Apparently last year they promised stroopwafels and there were none? They were delicious. Various tech companies had booths set up in the social hall, and I ended up learning about some cool technologies like IBM’s ez API builder, API Connect.

IMG_3735

Bringing Dynamic Back

  • Raymond Camden, Developer Advocate @ IBM
  • This session was all about finding ways to make your static site more dynamic. I gave static a try with Jekyll and didn’t end up sticking with it, but this talk was still pretty helpful.

There’s a Bookmarklet for That!

  • Justine Lam, Web Developer @ ShareProgress
  • This talk was a lot shorter and more straightforward than I was expecting. I think it finished in 20 minutes when there were 40 minutes scheduled. Justine made bookmarklets look easy, so I’m working on my first one. It’s a bookmarklet to replace all images on a webpage with photos of Bill Clinton playing with balloons. I call it “Billoons.”

IMG_3740

Lunch Break

React/Omniscient and Immutable – the Gateway Drugs of Functional Programming 

  • Erin Depew, Front End Engineer @ Bit.ly
  • This one was incredibly popular, probably because it was about React, but also because it was held in the room where lunch had just ended, and there were so many people already seated that maybe they just decided to stay?
  • I got to see how Bit.ly uses React along with Omniscient and Immutable, and all the challenges they’ve run into along the way. I haven’t used React yet, but the talk was easy to follow. There wasn’t much emphasis on functional programming, which is what I was expecting from the title.

IMG_3742

React Native: Learn From My Mistakes

  • Joe Fender, Senior Developer @ Lullabot
  • Another React talk (there were 4 total), things to consider when using React. I had a harder time following this talk. Guess it’s time to learn React!

IMG_3755

Practical Performance Tips to Make your Cross Platform Mobile Apps Faster

  • Dr. Doris Chen, Senior Technology Evangelist @ Microsoft
  • I was excited about this one. It was basically tips and tricks for speeding up your apps. She was trying to condense an hour talk into 40 minutes so she didn’t quite make it to the end, but it was still enjoyable. One of the better tips: you don’t have to put event listeners on everything, just set it on the parent, and let bubbling up take care of that for you.

IMG_3756 2

Coffee Break – Milk & Cookies

By the time it was cookie time, I was exhausted. While I could have checked out another hour or so of lectures, I decided that it was a good time to call it quits. Overall, I’m really happy that I went. I met some interesting people, and the energy was good. Everybody, male/female, young/old was there to learn. Do I like JavaScript any more than before? I don’t know. It’s a useful language, that’s for sure.

 

jQuery Project: Vacay+

- Tracy Leave a comment

I’m at the point in my program where all I’ve got left are projects and the corresponding assessments. Awesome and terrible. Awesome because projects are where the learning really happens, and where I tend to get into a flow. Terrible because project time is usually when my ego takes a hit. My track record for amount of time spent on projects has been all over the place. Would it take me a day or two to finish this project (Sinatra)? Or 3 weeks (Rails)? Also, the assessments with Learn instructors have been immensely helpful, but I get a bit nervous. So I tend to schedule my  assessments a ways out and over-prepare with my review of the material.

If you read my Rails assessment post, you might remember that my next steps were to extend the functionality of my Rails project with some jQuery magic. Hrm. Okay, not gonna lie, it took me a while to figure out what they were asking for, as each of the requirements didn’t necessarily ask for an additional feature, it seems like they were mostly describing specific design choices in order to implement the first couple of features.

Here are the Specific Project Requirements and my choices:

1. Must render one show page and one index page via jQuery and an Active Model Serialization JSON Backend. 

I had multiple models to choose from (Attractions, Destinations, Users, Trips), but since vacation planning was the whole point of my app, trips seemed like the obvious choice to work on. I wanted to be able to reveal a little bit more information about a trip on the index page, and on the trip show page I wanted to be able to cycle between all trips with a next button, for inspiration.

  • *Trips Index page has a “More info” link that expands a section under the trip to show the trip’s city, start date and end date.
  • *Trips Show page has a “next” link which updates the page by showing the next trip.

2. Must use your Rails API to create a resource and render the response without a page refresh 

This confused me for a long time until I went back through the end of the curriculum. Then I realized that it probably meant I was supposed to use AJAX post to create a new object. I chose to create a new attraction.

  • *Via the Attractions page, you can create a new attraction (and associated destination and trip, which was a feature of my old app as well), and it will show it to you on the same page by exposing the new data in a hidden div, with no refresh.

3. The Rails API must reveal at least one has-many relationship in the JSON that is then rendered to the page.

  • *Index page – a User has many Trips.
  • *Show page – a Trip has many Attractions.

4. Must have at least one link that loads, or updates a resource without reloading the page.

  • *Index page – has “More info” link that loads … more info
  • *Show page – “Next trip” link 

5. Must translate the JSON responses into Javascript Model Objects. The Model Objects must have at least one method on the prototype. Formatters work really well for this.

This part confused me as well.  I guess they were asking for the JSON responses to be turned into JavaScript objects first before the updated data was rendered to the page. So for example I’d hit the page for trip information (in JSON), and then take the info I needed to create a JavaScript Trip object. Then I’d take that object and use it in the rendering of the information. Also, I’d have to add a method to the prototype. Easy enough.

  • *Trip has the countdown() method
  • *Attraction has the formatUrl() method

Anyways! Here’s a walkthrough of my updated project.  

Read more

Scroll To Top