Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CodePen & Education

Chris Coyier
October 03, 2015

CodePen & Education

Chris Coyier

October 03, 2015
Tweet

More Decks by Chris Coyier

Other Decks in Education

Transcript

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

    View Slide

  2. Education is an area we
    (really really really)
    want to serve.
    We’re all ears:
    [email protected]

    View Slide

  3. CodePen is a code editor
    in the browser.

    View Slide

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

    View Slide

  5. View Slide

  6. One big reason teachers like it:
    It requires no software.
    Just go to the website start
    writing code.

    View Slide

  7. We see people of all ages having some of their
    first coding experiences on CodePen and having
    moments of understanding right away.

    View Slide

  8. View Slide

  9. View Slide

  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.”

    View Slide

  11. View Slide

  12. View Slide

  13. You can save the code you write.
    Each of those is called a Pen.

    View Slide

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

    View Slide

  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)

    View Slide

  16. ~5,000,000 Pens

    View Slide

  17. View Slide

  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.

    View Slide

  19. View Slide

  20. View Slide

  21. View Slide

  22. View Slide

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

    View Slide

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

    View Slide

  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.

    View Slide

  26. View Slide

  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.”

    View Slide

  28. Forking

    View Slide

  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.

    View Slide

  30. View Slide

  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

    View Slide

  32. View Slide

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

    View Slide

  34. The Editor can do quite a bit
    more than basic HTML, CSS,
    and JavaScript (although it all
    comes down to that).

    View Slide

  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:

    View Slide

  36. View Slide

  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/

    View Slide

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

    View Slide

  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

    View Slide

  40. View Slide

  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

    View Slide

  42. View Slide

  43. We had an educator tell us
    once their major beef with
    CodePen was that it made
    coding a little too easy.

    View Slide

  44. They were specifically talking about
    auto-closing of braces, quotes,
    parens, etc.
    That’s now a feature you can turn off.

    View Slide

  45. View Slide

  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.

    View Slide

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

    View Slide

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

    View Slide

  49. CodePen will automatically detect
    and warn you of JavaScript errors.
    (And it won’t execute in the preview.)

    View Slide

  50. Collections and Tags
    Organizing Pens

    View Slide

  51. View Slide

  52. View Slide

  53. View Slide

  54. View Slide

  55. (Public Pens are) Open Source

    View Slide

  56. View Slide

  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

    View Slide

  58. Presentation Mode

    View Slide

  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.

    View Slide

  60. View Slide

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

    View Slide

  62. Embedded Pens

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

  66. What could be on your own website?
    • Embedded Pens
    • Code Snippets (“Open in CodePen”)
    • Links to Pens / CollecKons
    • Links to Templates

    View Slide

  67. Teams

    View Slide

  68. View Slide

  69. View Slide

  70. View Slide

  71. Uploading Assets

    View Slide

  72. View Slide

  73. View Slide

  74. Things teachers have not liked about
    CodePen features:
    • You don’t see the whole document. ()
    • 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?

    View Slide

  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.

    View Slide

  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.

    View Slide

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

    View Slide

  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

    View Slide

  79. Pricing

    View Slide