Seeking volunteers: how long does it take you to complete this JAMstack tutorial?

Seeking volunteers: how long does it take you to complete this JAMstack tutorial?
0
#1

Hey campers, I’m considering using this YouTube tutorial we published a few months ago for a major project. Before I ask hundreds of people to complete this tutorial, I wanted to ask a few of you your thoughts on it first.

I’m looking for a few volunteers who can complete the full tutorial (including deployment) and let me know:

  • how clear is the tutorial?
  • how long did it take?
  • are there any notations we could add that could save people time?

Here’s the tutorial: https://www.youtube.com/watch?v=NSts93C9UeE

Thanks for your help!

#2

Comment here? or do you have some other place for people to leave notes, feedback etc? (GitHub or wiki somewhere? Or slack/discord channel?

#3

Sure you can comment right here. Eager to hear your feedback. The more people we get going through this tutorial the more we can annotate it and improve the description text.

#4

I will take a look myself to the tutorial and let you know my opinion soon.

#5

In general, he should tell us where he’s clicking when he clicks a button. Some people may be coding along and not watching his pointer like a hawk. Even if they are, if the pointer is moving, it still may not be clear. He should say and there are solutions that create a graphic on the screen when the mouse clicks.

2:18 My Netlify screen looks different - had to search for the github link

2:18 Should explain that the slug will be different than his - beginners may not understand this.

3:30 Holy crap! 40MB to download!

A lot of warnings on npm install:

npm WARN deprecated babel-preset-es2015@6.24.1: :raised_hands: Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!
npm WARN deprecated gulp-util@3.0.8: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
npm WARN deprecated postcss-cssnext@2.11.0: ‘postcss-cssnext’ has been deprecated in favor of ‘postcss-preset-env’. Read more at https://moox.io/blog/deprecating-cssnext/
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated graceful-fs@3.0.11: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated array.prototype.flatten@1.2.1: This method has been renamed to “flat” - please use array.prototype.flat instead
npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated graceful-fs@1.2.3: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN react-toolbox@1.3.4 requires a peer of react@^0.14 || ~15.4.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-toolbox@1.3.4 requires a peer of react-addons-css-transition-group@^0.14.0 || ~15.4.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-toolbox@1.3.4 requires a peer of react-dom@^0.14.0 || ~15.4.0 but none is installed. You must install peer dependencies yourself.
npm WARN victor-hugo@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {“os”:“darwin”,“arch”:“any”} (current: {“os”:“linux”,“arch”:“x64”})

added 1380 packages from 906 contributors and audited 12653 packages in >109.605s
found 10 vulnerabilities (3 low, 2 moderate, 5 high)
run npm audit fix to fix them, or npm audit for detail

Running npm start gives me this:

victor-hugo@1.0.0 start /home/kevin/dev/hrt
gulp server

[13:11:54] Failed to load external module >@babel/register
[13:11:54] Requiring external module babel-register
/home/kevin/dev/hrt/node_modules/babel->core/lib/transformation/file/options/option->manager.js:180
throw new >ReferenceError(messages.get(“pluginUnknown”, plugin, loc, i, dirname));
^

ReferenceError: Unknown plugin “transform-react-jsx” specified in “/home/kevin/dev/hrt/.babelrc” at 0, attempted to resolve relative to “/home/kevin/dev/hrt”
at /home/kevin/dev/hrt/node_modules/babel-core/lib/transformation/file/options/option-manager.js:180:17
at Array.map ()
at Function.normalisePlugins (/home/kevin/dev/hrt/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
at OptionManager.mergeOptions (/home/kevin/dev/hrt/node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
at OptionManager.init (/home/kevin/dev/hrt/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
at compile (/home/kevin/dev/hrt/node_modules/babel-register/lib/node.js:103:45)
at loader (/home/kevin/dev/hrt/node_modules/babel-register/lib/node.js:144:14)
at Object.require.extensions.(anonymous function) [as .js] (/home/kevin/dev/hrt/node_modules/babel-register/lib/node.js:154:7)
at Module.load (internal/modules/cjs/loader.js:566:32)
at tryModuleLoad (internal/modules/cjs/loader.js:506:12)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! victor-hugo@1.0.0 start: gulp server
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the victor-hugo@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/kevin/.npm/_logs/2018-08->24T20_11_54_568Z-debug.log

Seeing that the problem seems to be that transform-react-jsx isn’t known. After going to the docs, I run

$ npm install --save-dev babel-plugin-transform-react-jsx

And we get past that error. Not sure how he was getting past that. Maybe he has it installed globally.

And onto the next error. When I run npm start I get:

victor-hugo@1.0.0 start /home/kevin/dev/hrt
gulp server

[13:12:39] Failed to load external module @babel/register
[13:12:39] Requiring external module babel-register
assert.js:49
throw new AssertionError(obj);
^

AssertionError [ERR_ASSERTION]: Task function must be specified
at Gulp.set [as _setTask] (/home/kevin/dev/hrt/node_modules/undertaker/lib/set-task.js:10:3)
at Gulp.task (/home/kevin/dev/hrt/node_modules/undertaker/lib/task.js:13:8)
at Object. (/home/kevin/dev/hrt/gulpfile.babel.js:22:6)
at Module._compile (internal/modules/cjs/loader.js:654:30)
at loader (/home/kevin/dev/hrt/node_modules/babel-register/lib/node.js:144:5)
at Object.require.extensions.(anonymous function) [as .js] (/home/kevin/dev/hrt/node_modules/babel-register/lib/node.js:154:7)
at Module.load (internal/modules/cjs/loader.js:566:32)
at tryModuleLoad (internal/modules/cjs/loader.js:506:12)
at Function.Module._load (internal/modules/cjs/loader.js:498:3)
at Module.require (internal/modules/cjs/loader.js:598:17)
at require (internal/modules/cjs/helpers.js:11:18)
at execute (/home/kevin/dev/hrt/node_modules/gulp/node_modules/gulp-cli/lib/versioned/^4.0.0/index.js:36:18)
at Liftoff.handleArguments (/home/kevin/dev/hrt/node_modules/gulp/node_modules/gulp-cli/index.js:175:63)
at Liftoff.execute (/home/kevin/dev/hrt/node_modules/liftoff/index.js:203:12)
at module.exports (/home/kevin/dev/hrt/node_modules/flagged-respawn/index.js:51:3)
at Liftoff. (/home/kevin/dev/hrt/node_modules/liftoff/index.js:195:5)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! victor-hugo@1.0.0 start: gulp server
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the victor-hugo@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/kevin/.npm/_logs/2018-08-24T20_12_40_783Z-debug.log

This is the point where I give up. A quick look for that error has people talking about breaking changes from Gulp 3 to Gulp 4.

One of my pet peeves is tutorials that run on computers that have setups that are already there and they just assume that you have those setups. A good tutorial should start from scratch and install everything as they go, to avoid problems like this. It’s too easy to just assume.

Sorry, I wasn’t able to complete the tutorial without taking a class on Gulp so I could fix his errors.

#6

Also, I think he should have explained what netlify is and does - many people will have no idea what is going on.

As a 20-year educator, I am rather picky on this subject. Most tech people don’t know how to put themselves in the shoes of their audience and break things down into the smallest and simplest chunks. I have complaints about most tutorials. But the technical issues are a deal-breaker. I just don’t have the time right now to sort it out. I budgeted 90 minutes to do this and if this is any indication, that won’t be enough time. They assume too much and explain too little. They skip over important points and make things more complicated than the student can easily absorb, often unnecessarily.

Looking at the comments, I see that some (not all) ran into the same technical problems I did.

#7

I agree with Kevin. I was going though the tutorial and it was kind of unclear even though I have some experience, some people might not be able to follow up with the tutorial. Maybe if the trainer takes a little bit more time to explain other steps he does, instead of giving only a brief flash of the instructions will be better. I didn’t finish yet the tutorial because I got some interruptions but I will get back to it later.

#8

@kevinSmith @lindakovacs Thank you for going through this tutorial and giving me this valuable feedback.

It sounds like the simplest way would be for me to just write my own text-based tutorial with instructions and ask people to complete that instead of sending them to this video.

#9