CodePen & Education

Transcript

1. h"p:/ /codepen.io ❤’s Education

2. Education is an area we (really really really) want to

   serve. We’re all ears: support@codepen.io

3. CodePen is a code editor in the browser.

4. It’s for front end code: HTML, CSS, & JavaScript

5. None

6. One big reason teachers like it: It requires no software.

   Just go to the website start writing code.

7. We see people of all ages having some of their

   first coding experiences on CodePen and having moments of understanding right away.
8. None
9. None

10. – M E L I S S A T A

    Y L O R “…once we used CodePen to demonstrate the real-time output of markup changes, many people made the connection almost instantly and began marking up their own content with confidence.”
11. None
12. None

13. You can save the code you write. Each of those

    is called a Pen.

14. CodePen has accounts. (Including free accounts.)

15. So every Pen you create you can: 1. Find it

    again (by searching or browsing) 2. Go back and edit it (forever) 3. Share it (they are public and open source)

16. ~5,000,000 Pens

17. None

18. CodePen is a social network. For example: 1. You follow

    other people. 2. They can follow you. 3. Every Pen has a comment thread. 4. You can heart Pens.
19. None
20. None
21. None
22. None

23. As an educator, a Pen might be an assignment.

24. In this case, the Pen was part of an interview

    process.

25. SomeKmes we’ll come across a big group of Pens that

    are clearly a variaKon on a simple theme. They looked a bit like spam at first, before we realized it was a classroom working on an assignment.
26. None

27. – R O S E M A R Y B

    I A N C H I “Although it wasn't a requirement and I didn't really encourage my students to do it, many of them explored Pens they found on CodePen. They were so excited. They wanted to be able to do what they saw. Many of them learned advanced CSS3 concepts that I didn't have the time to teach them. Many explored animation in CSS and were able to make some awesome navigation menus. I had others looking at responsive web design. It was really neat to see my students engaged and excited about learning more. The users of CodePen have taught my students so much more than I ever could in one semester.”

28. Forking

29. A forks lineage (parents and children) are preserved. Forks are

    also treated a differently than regular Pens on CodePen. They go into a special tab on profiles, they don’t show up in search by default, or in Recent Pens, for instance.
30. None

31. – T I M W I L L I S

    O N “I have 30 in my class. My fellow prof has 37 in his. We teach a program for Digital Media Arts. I usually teach final semester students, but this time I got switched to first semester. I'm excited for that, as it is a chance to get people off on the right foot. Many are intimidated by code. But CodePen makes it simple to share an example. I used to have to go around computer to computer to help out. I would find the same bug repeated by several students, wasting a lot of class time. Now if someone has a problem I can bring it up and we all work on it together, so everyone gets the benefit. Students can send me a specific URL to look at. And they can fork my examples to learn from, or bet yet fork each other's work.” I think this is the highest participation I've seen in my years working with colleges. h"p:/ /codepen.io/team/OddlyTimbot/post/classes-in-codepen
32. None

33. h"p:/ /blog.codepen.io/2015/03/07/professor-Km-willison-uses-codepen/

34. The Editor can do quite a bit more than basic

    HTML, CSS, and JavaScript (although it all comes down to that).

35. • Write in preprocessing languages like Sass, CoffeeScript, Markdown, and

    many more • Run add-ons for those languages, like Compass for Sass or Autoprefixer for PostCSS. • Link out to assets hosted elsewhere (my-style.css) • Easily add popular resources (jQuery, Bootstrap, Lodash, etc.) • Link to other Pens, pulling in the code from it. The CodePen Editor allows you to:
36. None

37. Let’s get into some of the obvious education-specific features. h"p:/

    /blog.codepen.io/2015/03/16/im-thinking-of-using-codepen-to-teach-a-class/

38. Most of these are PRO features. (They cost money. Not

    a lot.)

39. Professor Mode • Teacher codes; students watch. • Real-Kme. Real

    code, not video of screen. • Also put on projector (or not). • EnKre UI is synced • Size of editors • What secngs are being changed • Student can “Pause and Play”, the Resume • Student can fork • Student can be anonymous user • Good for same-room or across the world • Coming: video/audio • 10 Students on PRO, 35 on Super PRO • Secret: Hard-limit on Super PRO is really 100
40. None

41. Collab Mode • Everybody gets a cursor. • Real-Kme. Real

    code, not video of screen. • UI is not synced. • Anyone can change secngs. • Owner only can save. Others can fork. • Collaborators can be anonymous. • Good for same-room or across the world • Coming: video/audio • 2 collaborators on PRO; 6 on Super PRO
42. None

43. We had an educator tell us once their major beef

    with CodePen was that it made coding a little too easy.

44. They were specifically talking about auto-closing of braces, quotes, parens,

    etc. That’s now a feature you can turn off.
45. None

46. • LinKng • JS error detecKon (even infinite loops!) •

    Preprocessor error displaying Here’s a thing thing that is pretty great for learning: seeing inline errors.

47. You can ask CodePen to analyze your CSS (using CSS

    Lint)

48. CodePen will automatically show you preprocessing errors. (In a fairly

    unobtrusive way.)

49. CodePen will automatically detect and warn you of JavaScript errors.

    (And it won’t execute in the preview.)

50. Collections and Tags Organizing Pens

51. None
52. None
53. None
54. None

55. (Public Pens are) Open Source

56. None

57. Public vs. Private Pens Private Pens… • Are saved at

    an unguessable URL • Will not show up in CodePen search • We try to block from search engines • You can find on your profile, but nobody else can • Are sKll shareable • You can apply your own license to them

58. Presentation Mode

59. PresentaKon mode has no header (more room) and quick controls

    for changing the display. It’s meant to be useful when using CodePen on an overhead projector.
60. None

61. DevCamp with Nate Wiley https:/ /www.denverlibrary.org/blog/nate/teens-learning-web-development-library-devcamp-wraps

62. Embedded Pens

63. You can apply themes to Embedded Pens (e.g. change colors).

    Update that theme, update all embeds using it. You can even apply your own custom CSS to the theme to match your own site be"er.

64. Templates h"p:/ /codepen.io/pen?template=avJqwq Start a new Pen that is an

    exact copy of another (code, settings, and all) but have it not be a fork.

65. Prefill API POST to CodePen with JSON data describing a

    Pen. We’ll set all the settings and fill the editors with all the right stuff. It’s for managing code on your own site, and providing links to send people to CodePen to play.

66. What could be on your own website? • Embedded Pens

    • Code Snippets (“Open in CodePen”) • Links to Pens / CollecKons • Links to Templates

67. Teams

68. None
69. None
70. None

71. Uploading Assets

72. None
73. None

74. Things teachers have not liked about CodePen features: • You

    don’t see the whole document. (<!DOCTYPE html>) • You can’t have index.html, about.html, etc. • It’s not the real sooware students will end up using in real life • We’re a third-party. Are we reliable?

75. • Our upcoming “projects” feature will show the whole document.

    • You’ll be able to do have mulKple files in projects. • For now! • We’re pre"y dang reliable, but we get it.

76. There are other code editors. • Mozilla Thimble (mulKple files)

    • JS Fiddle (unKl recently, biggest market share) • JS Bin (oldest and acKvely developed, open source) • Dabblet (open source, easy to host) Of course, we think CodePen is the best online code editor, but everyone has different needs and most of all we think online code editors are awesome and you should use them. Plus, CodePen is so much more than an editor. It’s a community.

77. What could we do to make CodePen really great for

    educators?

78. • “Projects” (more like an online IDE) • Classrooms (be"er

    organize students into groups) • Submicng Pens (transfer of ownership) • Return with notes / diffs / grading • WebRTC (live audio and video) • Pass/Fail Pens (Jasmine tests) • CombinaKon of Modes • e.g. Professor Mode where you hand off control A few ideas

79. Pricing