Using Glitch for education — an experience report

Glitch Feedback
1

For the past 1.5 months, I have been using Glitch to teach basics of web development (HTML, CSS, JS) to ~10 Ukrainian and Belarusian refugee kids (ages 14-19).

Here’s my report so far:

  • Overall, Glitch works well. I’m happy I didn’t have to set up anything locally.

  • Any inconsistent behavior eats away at the lesson time. Example: apparently, depending on the screen size, the “site preview” panel either shows up immediately or has to be enabled explicitly. This means that some time has to be spent debugging the issue for everybody & explaining how to enable the panel & reexplaining later.

  • Linter hints turn out to be harmful on the net, for the same reason. Example: I tell kids to write font-family: Georgia. The linter tells them to add the default family (serif or sans-serif). Kids see the red circle and ask “what’s wrong”. Saying “ignore the linter” does not help at all. I have to explain what is serif, what is sans-serif, what are fallback fonts, etc, while I would rather focus on entirely different things.

    • Same for e.g. duplicate CSS rule detection (“don’t use the same selector twice”).

    • Typo detection, on the other hand, would have been great to have. 7 out of 10 kids type getElementByld (“LD”) instead of getElementById (“ID”) and then ask what’s wrong.

  • When you open a HTML page in the editor, the preview panel doesn’t switch to the same page. It turns out to be somewhat annoying, and has also eaten away a bunch of lesson time.

  • A built-in JS console would be nice to have. I tried saying “here, open the web inspector”, but then you have to choose the iframe context in the web inspector every time and nobody can remember to do it. In the end I ended up switching to jsfiddle.net for the “let’s play with JS” parts of the lesson, and Glitch is only used to serve the final result.

  • Some kind of a “classroom” option would be awesome. I want a way to see everyone in the class & their projects. I want kids to see their peers’ projects as well because I’d like them to be able to steal code from each other.

  • Glitch doesn’t work on old macOS versions. By “old” I mean “El Capitan”. Things are just randomly broken. This means I have to upgrade everyone’s Macs, which seems easy, but empirically it’s been more than a month and still not everybody has new enough macOS.

    • I’m not saying it has to be fixed. Supporting 6-year-old OSes is annoying. But it was a major time sink, probably bigger than everything else I have listed above, because if it turns out at the start of a lesson that a kid has El Capitan, they can’t participate in the lesson at all because the upgrade takes ~1.5hr.
15 Likes
2

What a wonderful post @availablegreen, thank you for contributing this, and welcome to the forum! :smiley:

I would love to see your curriculum sometime if it’s available online.

Thank you so much for giving these refugee kids your time and attention, that is just excellent humanity in action (though I’m sure you don’t do it for the praise from strangers… I’m just gushing…)

I can’t speak for the Glitch team but this looks like great feedback, and I have experienced some of these snags myself (e.g. the preview panel not syncing to the current page).

I wonder if there is a way you could build the classroom option yourself (before the team can make it official, or in case they don’t) by having the kids fill in a Glitch web form of their project name, and then loading all of the entries in iframes yourself.

All the best,
Ste

7 Likes
3

Great post, I’m glad you are teaching children to code. Where is the limiter error happening? I cannot reproduce in the editor (I am using Arial as the font, Georgia produces the same results):

image

2 Likes
4

Hi @availablegreen, and welcome! Thank you so much for this really well-written feedback, and for teaching kids how to code (on Glitch, no less).

I’m going to share this with my colleagues and follow up here in case there are questions from our side. In the meantime, it’s not the perfect match for what a classroom view would be, but you may find that our Teams offering (which is free) may help you out if you have an upcoming cohort Glitch Teams Overview - Glitch Support.

1 Like
5

now I wonder if it’s feasible to make an webpage with like 10 iframes going out to all the students’ editors

6

Maybe something with arrows on the bottom to see each one individualy

7

@jenn I think I will use teams & one-project-per-student for the next cohort, yeah. Being able to see at a glance what everyone is up to would be nice. I thought for some reason that teams were a paid feature.

@RiversideRocks The CSS linter only seems to apply in .css files.

2 Likes
8

@SteGriff @wh0 The iframes option hasn’t occurred to me at all, thanks! Does it also show the changes in realtime? (I can’t check myself at the moment but I might investigate it later.)

Actually, it now occurs to me that simply giving everybody a subdirectory in a shared collab project would be ideal. I can see what everyone’s doing & kids can see what everyone’s doing, too. The only downside is that they don’t own the domain name anymore and aren’t making something that feels like “hey, this site is completely my own”, but maybe it’s not an issue in practice. This is probably what I’ll try for the next cohort.

9

would be neat, but be aware that there’s no fine grained access control within a project to choose who may edit what directories. the potential for mischief :scream:

should, yeah. the embedded source view is, as far as I know, a full fledged editor with the live connection to the project codebase

1 Like
10

A small update:

Today I had my first lesson with a new group (2 people who were late to the main cohort). I have some more feedback.

Emails own devices

But first, some context. This might be different from the majority of Glitch users (although I’m not sure!), but for our kids the following two assumptions don’t hold:

  • "Everybody has access to their email inbox". This is technically true because kids /can/ access their email given some time and effort, but mostly it’s an unpredictable time sink. Could be “yep I have Gmail on my phone”, could be five minutes, could be “actually my phone broke yesterday so I don’t have anything at all” (a real thing that happened at a lesson a few days ago).

    • NB: even if an action takes five minutes, if you have several kids who have to perform the same action, it doesn’t parallelize. While you’re helping one person access their email, the rest do nothing / encounter unexpected problems / wait their turn to ask “like this, right?” / etc.

  • "Everybody has their own laptop". In our class (Ukrainian and Belarusian refugees in Warsaw, Poland), only two out of 12 people brought their own laptops. The rest use school-provided laptops, and sometimes several people share a laptop (at different times). Even people who have their own laptops don’t bring them because it’s a few extra kilos to carry & an expensive thing to potentially lose. This partly causes the problem with email inboxes — even if somebody is logged into Gmail at their own laptop, the chances are they aren’t using their own laptop to begin with.

Team invites didn’t work

I tried the “shared project w/ subfolders” idea I outlined above. There was no mischief (yet), but there was a small hitch: team invites didn’t work. I’m not sure why. The kids just didn’t get any notifications anywhere in the interface.

I had to navigate to the shared playground project from everyone’s laptop, press “ask to join”, and then confirm on my own laptop.

It’s possible that team invites are sent by email, but see above re/ access to email.

More observations about the linter

First things first: it is hard to say whether investing into the linter would be useful for us. There’s always a chance that even if the linter was perfect, kids would somehow just ignore the linter explanations. (At the very least, I can say that people do dislike seeing the red circle, but they don’t seem to read the explanations right now.)

This said: here is a list of problems we hit during a two-hour session, and that I had to point out to resolve.

  • Not caught by the linter:

    • Typing color: yello instead of yellow.
    • Typing font-size: 60 px instead of 60px.
    • Typing display: inside-block instead of inline-block.
    • <link rel="stylesheed" ...>.
    • Nesting CSS rules, eg. typing .a {...} inside body {...} instead of at the top level.
    • <head> inside <body>.
    • <head> after <body>.
    • Undefined HTML tags (<h> instead of <h1>, or typing <srtong>; I think this would only count as “not technically an error” if the tag had a hyphen in it as per the custom elements spec, but even then I would want the linter to complain in my case).
    • Writing text outside of <body>.

  • Caught by the linter, but the hint wasn’t useful enough to solve the problem:

    • Typing background color instead of background-color (you get “unknown word”).
    • Typing fond-family instead of font-family (you get “unexpected unknown property”).
    • <link rel "stylesheet" ...> (you get “special characters must be escaped”).
    • <spanclass="a"> (you get “special characters must be escaped”).

  • Not technically errors, but I want to enforce them:

    • font-family: comic sans (missing quotes).
    • Missing semicolons at the end of CSS property assignments.
    • <link rel="stylesheet"href="... /> (missing space before href, actually renders correctly but the linter complains about “special characters must be escaped”).
    • Two <head> tags.
    • <h2> inside <h1> (some kind of optional “sanity HTML schema” I could enable?).

  • Pie in the sky (would be lovely if the linter could catch this as well):

    • In <link rel="stylesheet" href="...">, referring to a relative path that doesn’t exist.

An observation about auto-closing tags

The editor automatically closes tags. In some cases it works well and in others it doesn’t. I will rank these cases.

  1. Good: the kid types <p>, the editor inserts </p>.
  2. Neutral: the kid types <> and then p in the middle. Auto-closing does not fire.
  3. Bad: the kid types <>, then p, then copies this (now we have <p><p>) and finally types a slash. The result is <p></p>p>.
  4. Also bad: I tell the kid "now let’s wrap this whole thing in a <span>", they type the opening span, get a closing span automatically, ignore it, and type another closing span at the end.

So far, “good” is the most rare category.

I’m not sure if (4) can be fixed, but (2) and (3) can.

Misc

Something like “show/hide tree structure” might be nice to have for HTML. I tried asking people to press “Prettier” in a hope that it would vaguely reveal the tree structure, but eg. if you have five spans in a row without spaces, “Prettier” will not put them each on a new line. (I understand why.)

9 Likes
11

One more thing that also stems from “nobody has their own laptop” — it would be nice to have simple project-wide chat built into Glitch, mainly for sharing links during the lesson (“ok kids now please open this”), because otherwise I have to ask people to re-type the link from their phones.

2 Likes
12

WOW :exploding_head: Just want to say thank you, and that this is incredibly valuable feedback.

We use a library that handles all of the linting and it takes into account the .eslintrc configuration files in the project before running. We’re going to put our heads together internally to see if we can provide more defaults to choose from, and maybe a UI to turn rules on / off. We hadn’t considered the extent to which the linter can guide (and frustrate) new users!

5 Likes
13

Thanks! I saw something about .eslintrc, but didn’t realize it also applied to static HTML projects.

I’ll try to configure .eslintrc and see if I can get it to work better.

1 Like
14

A workaround that we’ve seen other glitch users utilize here is having a markdown file that they’re all inside of typing to each other, so maybe a “central” project that everyone is in / can write to each other in a file, and you use that as a chat / link drop.

We’ve been nervous about adding a global chat feature just because we know we have so many educators and young folks using the platform and don’t to expose anyone to more risk than they’re already exposed to daily online :sweat:

1 Like
15

Makes sense. Just in case tho — I didn’t mean “global chat”, more like “chat that’s only accessible to people having edit access for the project”.

16

I seem to recall that project invitations are sent through email. Team invitations I would think are the same. I also ended up mostly using the “ask to join” system too.

:innocent:

nice observations about the kinds of mistakes that happen when learning html though!

1 Like
17

Is it too much of a coincidence that something like this was made just a few days ago?

While the implementation seems to be limited by CSP, Glitch could take a leaf outta @wh0’s and @tiago’s book and officially implement it into the editor.

However, this is also a serious issue so enabling/disabling chat should be a feature controlled only by the project owner?!

2 Likes
18

One way to solve the email dilemma would be to use a single email for everything but make it seem as if there were multiple emails. I accomplish this sort of “multiplexing” emails using filters for gmail. Basically what I’d do is set up multiple glitch accounts using the plus sign goes to the same email trick
So I’d register accounts with the emails
glitchclassroom+studentname1@gmail.com
glitchclassroom+studentname2@gmail.com
…
And then in gmail I’d create a filter to apply a label for each student that way you can find them in the sidebar. (forgive me for the cheesy email I made a long time ago, I now use it for my publicly available email)

image
image1524×174 23.1 KB

image
image718×582 39.8 KB

I use this method for other things actually
image

3 Likes
19

Another small update — apparently my “everyone works on one project” idea is unworkable for two reasons.

  1. Glitch starts rate limiting the editor after a while and we can’t work anymore. It happened during two different lessons.

  2. But even if it didn’t — the iframe page reloads whenever any of the kids types anything in the editor. So one kid might be working on smth JS-related, another kid edits a file in a different subfolder, and the page state resets for the first kid.

20

I haven’t heard of editor rate limiting. Could you post some more information when you have time?

One thing about the editor though, the server keeps a great big in-memory array of every edit that anyone makes since startup. And every edit is nearly every keystroke (maybe less if your internet connection is slower? dunno). If it’s unintentional for the editor to stop working, I’m curious if running refresh to clear out this array would help at all.