Teaching Front End Programming in Your Own Culture

[mozfest-bot]

[ UUID ] 5a17981c-4e5b-4a4b-b986-189a0a6c9620

[ Session Name ] Teaching Front End Programming in Your Own Culture
[ Primary Space ] Digital Inclusion
[ Secondary Space ] Web Literacy

[ Submitter's Name ] Tom Wang

[ Submitter's Github ] twhy

What will happen in your session?

Share ideas and skills to teachers on teaching frond end

It includes but not limited to

• How using variable names in your own language(Chinese in my case) help teaching JavaScript?
• How to write a short story, describe a short history of ancient China using Array API?
• How to stop a taxi(not a real one) by setting a css property?

What is the goal or outcome of your session?

Inspire people who teach programming to do better with ideas shared in this session.

Time needed

less than 60 mins

[hannahkane]

Hey @twhy—I think this is a really great idea for a session. Are the second and third points in your description (the short history of ancient China, and how to stop a taxi) going to be interactive lessons within the session?

Will people leave the session with an understanding of how to adapt front-end dev lesson plans to their culture?

[twhy]

Thanks, @hannahkane

The second point is somewhat interactive, and the third one is interactive.

• For the 'a short history of China' case, you can see it in my courseware below.
  https://github.com/fe13/fe/blob/master/JavaScript/08.%20%E6%95%B0%E7%BB%84%20Array.md
  Just search for Array.prototype.splice(). I documented this API in Console style, so it's somewhat interactive, but I can make it fully interactive with graphics.

The story in English

1. A team of three heroes founded to save the country. var 蜀 = ['刘备', '关羽', '张飞'];
2. Their leader(刘备) then hired two military advisers. 蜀.splice(1, 0, '诸葛亮', '庞统')
3. One of them died in a battle. 蜀.splice(2, 1)
4. Two of the founders died in battles but more members joined. 蜀.splice(2, 2, '刘婵', '赵云', '廖化')
5. Later the leader (刘备) died and his son(刘婵) became the leader of the team. 蜀.copyWithin(0, 2, 3).splice(2, 1)

• For the 'how to stop a taxi' case, you can see it here https://codepen.io/twhy/pen/zzNGKV
  When you hover on the taxi it stops. I use this little demo to teach the animation-play-state css property. (You probably need to use the 'Change View' button in CodePen to put the editors aside)

I have more cases to cover and pretty sure it will help people understand how to adapt front-end dev lesson plans to their culture.

But it's not limited to that. The main idea behind this session is actually making programs alive. Programs are NOT just codes, we can use it to express our ideas, telling a story, stopping a taxi, etc.

[hannahkane]

Thanks, @twhy!

[nobodxbodon]

You read my mind! I just wrote a draft of beginner's tutorial Java编程一天入门 using Chinese naming in all the sample codes. For example:

public class 人类 {
  String 姓名 = "无名氏";
  int 年龄 = 0;
  float 身高 = 0.0f;
  private String 小秘密 = "";
  
  public 人类(String 姓名, int 年龄) {
    this.姓名 = 姓名;
    this.年龄 = 年龄;
  }

  public void 自我介绍() {
    System.out.println("我叫" + 姓名 + ", 今年" + 年龄 + "岁");
  }
  
  public String 回答(String 听到的) throws 听不懂例外 {
    if (听到的.contains("%")) {
      throw new 听不懂例外(听到的);
    } else if (听到的.contains("?")) {
      return "你猜? 答案长度是" + 小秘密.length();
    } else if (听到的.contains("秘密")) {
      小秘密 = 听到的;
      return "我记住了";
    } else {
      return "...";
    }
  }
}

And I just started a similar tutorial for JavaScript, but now I think you could be better author for it.

BTW we have collected sample code snippets using Chinese naming for 15+ other programming languages here.

[kenyatta1]

Unfortunately we didn't think this session was quite right for the Digital Inclusion space this year. I'm removing the milestone to allow other spaces to consider your proposal.

[twhy]

Hi @hannahkane, since this session is not quite right for the Digital Inclusion space this year, I'm wondering is there any other spaces for this session? Thanks!

[hannahkane]

Hi @twhy - the curators for the other spaces have the opportunity to view this proposal as well. You'll hear from them if they think it's a fit for their space. Cheers!

[mozfest-bot]

Thank you for taking the time to submit a session to MozFest. Due to the high level of submissions, we’re unable to accept all proposals and unfortunately, your session was not part of the final group.

Thank you for taking the time to submit and we will follow up on email very soon.