Giters

jmmastey / level_up

Codebase for the Rails Prime Stack training website

Home Page:http://leveluprails.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Frontend exercises

fengb opened this issue · comments

commented

Level Up is very comprehensive for dev / server / backend work but somewhat lacking for frontend. Some things that would be nice to cover include:

  • UI
    • HTML / CSS
    • DOM / jQuery
      • event bubbling
  • Javascript
    • this
    • closures
    • prototypes - contrast with class-based and function-based (Crockford style)
    • Callbacks - ajax or node fs
    • Promises
commented

Spoke to @fengb a bit on this one. There are basically three options:

  1. Use the existing exercises
  2. Add more exercises to Engineering I
  3. Build a new course.

I think (3) is the only good option. The existing course is long enough as it is. Similarly to the perf course, I think you could build a single app up from more rudimentary bits and pieces for this.

Questions:

  1. What constitutes the frontend stack you want to target. Ember? Angular? POJS?
  2. Do you have folks to help code review?

Flagging @djkotowski as Enova's UI guild had talked about a more in-depth UI course before. Anyway I think this is a good idea.

commented
  1. My current goal is probably POJS as the frontend environment changes so quickly and the basics can be applied across any environment (including mobile and node.js)
  2. Should be able to get code reviews, depending on workload
commented

We're looking to build a "200-level" Advanced UI course for newish hires. After they complete Engineering Baseline I, new hires get assigned to a team. The 200-level courses would be a part of their continuing professional development.

commented

@djkotowski That sounds like Engineering Baseline II (another thing that actually exists in the codebase but is not turned on). Is that what you're talking about? I think this would probably be a UI-only thing. Hrm.

commented

Okay, @fengb, so usually I start on these w/ a list of things people need to know (esp. the ones they suck at). There's some very very basic stuff in Interaction I, but not much. Some thoughts:

Javascript: organization patterns (something to make them neat). unobtrusive stuff. bubbling.
Async: your list is pretty well spot on. not sure whether anyone does event loops in POJS? if not, what framework would be easy enough to add?
DOM: ehh... no idea. what could someone learn here? is this maybe just part of tagging elems with behavior?
HTML: semantic markup. newer html5 elements, especially form elements.
CSS: pain points seem to include positioning and sizing. basic animation?

I know @brousalis also did a course at Enova, which was good. Maybe he has curriculum he already built too?

Thoughts?

commented

I would like a separation of JS and DOM/HTML/CSS. General JS knowledge is pretty useful on its own (node, browser-based backend, even mobile). So maybe two separate courses:

  • advanced Javascript - "the good parts", prototype, async
  • advanced UI - semantic web, progressive enhancement, navigating a DOM, rendering quirks

I think this approach could work better because we already introduced JS and these concepts are pretty orthogonal.

Maybe we should also use CoffeeScript instead of Javascript? Despite my grievances, it's a lot less quirky to start with.

On event loop: it's one of those nice to know low-level concepts, but I can't think of a practical use so maybe it's not really necessary.

commented

Okay, so for POJS, maybe provide some basic HTML running on a Sinatra app (if any backend is needed), then ask them to progressively add to it using event-driven behavior / templating / async loading. Data binding? Trying to think of an app that's sufficiently simple but also would respond well to those sorts of changes. Recipe website (to add sarcasm, have it randomly switch ingredients and then ask for a rating), or something like 99designs (again w/ bonus sarcasm). We could provide all the templates so they're only worrying about wiring them to each other. Or would you prefer something 100% JS (node, Ember, Angular, etc)?

For visual stuff, same basic idea (maybe if the above becomes node, this becomes that). But add new sections to an existing page. "Add a new voting widget to the sidebar." Use HTML5 to mark it up, including shimming new field types etc. Add JS behavior (navigating DOM). What would you do for rendering quirks?

I don't know about coffee. Not against it, but not sure if I'd really teach it.

I feel like this is close to being actionable :D

commented

Closing as this didn't result in any action. Let me know if you still have some need around this.