Thirty Days with Thimble

I do my best learning when I am teaching. HTML is no different and the new Thimble, an online html editor from Mozilla, has transformed my ability to teach our shared vision of the Web.

Late last month, after years of planning, hard work by contributors, and thanks to David Humphrey and the Seneca College Centre for Development and Open Technology Thimble launched. Dr. Humphrey had been exploring the idea of expanding Thimble capabilities by integrating Bramble, a fork of Adobe’s Brackets open-source text editor.

On August 31st Thimble dropped. The way I teach others to read, write, and participate online will never be the same.

Othello Principle

I have fond memories of playing Othello with my Grandfather. The game had a tagline that I apply to teaching, “Easy to learn a lifetime to master.”

The new Thimble embodies the Othello Principle. As part of a #MakerMonday challenge, the way I kick off the week in #EDU106, I signed up 35 college students to use Thimble. Beyond a link they shared in Snapchat they have never seen HTML. In minutes they could remix and create webpages.

The new features in Thimble help me, help people new to the Web. My favorite new tip is the autocompletion of tags. Also when you click on an opening tag the closing tag also highlights. I have watched people edit HTML for this first time. New Thimble features will alleviate the most common mistakes. Keeping track of nested tags is probably the biggest headache I see students encounter.

These basics will help, but there are so many rich features I need to discover. Thimble can do so much more than one page files. It now supports multiple files in a project. Markdown support is coming. I know nothing of Javascript. I will soon, because of Thimble. Easy to learn life time to master.

Powered by Connected Learning

Other code editors exist. Thousands of CSS tutorials can be found online, but many start with the tyranny of a blank screen.

Learning to write takes mentor texts. New writers need to stare at text structure and then remix patterns that emerge. They need to break things and watch what happens. The preview panel in Thimble is a perfect tool for writing instruction.

More importantly writing requires agency. When you design webpages you will learn more in interest driven production based spaces. New teaching kits will focus on getting students engaged in building a better world.

Meanwhile learners will be making as the read, write, and participate online. The templates found in other editors are great. I try them often. What Thimble brings is the ability to develop your own learning pathways. You begin by making. Your design comes first and you learn HTML, CSS, and Javascript to bring it to life.

That is Thimble. Mentor powered, Interest driven. Production based. Mozilla Learning Networks has a goal for universal Web literacy and hopes to get there through connected learning. You can not separate these values from the tool.

Community Based Curated Curriculum

Thimble stands on its own as a great tool, but it is empowered by a community of contributors. Together we have the simple goal of changing the world.

Thimble comes pre-loaded with curriculum, teaching kits, and learning activities.

As a community, and under the leadership of Chad Sansig, Web Literacy Curriculum Director, we are creating a a Back-To-School Teaching kit. To learn more join us for a Twitter chat on 9/23.

From Noob to Advocate

Thimble, and other products by Mozilla Learning Networks, help develop educators through leadership development and advocacy. Stories likeMarina’s are everywhere. My story really is not that different.

For many years I considered myself a tech enthusiast. I taught middle school and used the latest and greatest…but I never built the latest and greatest. Thimble changed that for me.

In late 2013 I knew nothing of CSS. While I had been involved with the Foundation on and off since 2011 it wasn’t until 201 that I took the deep dive with Thimble. Now I am building webpages for our school like ourdepartment home page, faculty directories, and biographies. Each of these projects began on Thimble and the code is there for anyone to use.

Now on to Javascript

More than my tech skills I have developed my leadership and advocacy skills towards an Open Web. I run a Mozilla Web Club. I helped to develop theWeb Literacy Map. Most importantly I contribute back to the Mozilla Learning Networks.

I teach through learning. Thats the synergy of leadership and advocacy.

Get Involved

Mozilla doesn’t build the Web. It is the Web. Anyone can help us remix the future. If you would like to learn more about joining educators who read, write, and participate for a better future take the pledge to teach the web, join us on Twitter using the hashtag #teachtheweb, or share your story onDiscourse.

This post originally appeared on

As a community, and under the leadership of Chad Sansig, Web Literacy Curriculum Director, we are creating a a Back-To-School Teaching kit. To learn more join us for a Twitter chat on 9/23.

Why Collaborative Inquiry Matters to Future Teachers #EDU106

Inquiry never works better alone. Whether you bury yourself in a book or attend a #hackjam you seek answers with others. As a teacher I find how I participate on the Web influences my personal growth more than what I contribute to my networks.

Thinking... please wait

flickr photo shared by karola riegler photography under a Creative Commons ( BY-ND ) license

Check out this recent conversation started by David Quinn. He asked if I and a few friends had advice to students who were nervous about blogging. Dave noted that there were concerns around privacy and employment.

As a community we explore tips and practices for teaching in open spaces. We discuss and share great teaching activities. Most importantly we collaborate on problems that matter.

I believe teacher preparation programs (all fields really)  have a responsibility to help candidates shape their online presence. The benefits of learning in the open go beyond skills and knowledge acquisition. If schools use job placement as a key metric of success than helping teachers build up a distributed and networked Web presence is central to  our mission.

flickr photo shared by flazingo_photos under a Creative Commons ( BY-SA ) license

Its simple really.

You have two otherwise equal prospective employees. Candidate one can read, write, and participate on the web. She has a website, demonstrates reflective growth through blogging,  and engages in relevant and current educational topics.

When you Google candidate two you only find private social media silos.

Who would you choose?

Practices and Participatory Learning Environments

Never been a fan of 21st century skills. I must admit, I even added to the hype; publishing a set of skills using the latest trope of alliterative “C buzzwords” in a white paper and then a special issue on 21st Century Learning. More so, Ian and I have  taken a stab at “measuring” these “soft” skills through research into self-report instruments.

We need to think of 21st Century Skills as practices of pedagogy rather than of performance. Instead of focusing on the learner we need to intentionally design the learning space to cultivate these practices.


The term “21st” century skills is dated. The Internet has seen more birthday candles than the students who walk the halls of our schools. The web outdates many of the teachers as well. We need to prepare students for the future not catch up to the past.

Instead of 21st century skills I think about our networked society. Castells and Cardosa discussed the need for self-programmable learners. So instead of the consonance of constant change, I tried to think about what the “soft skills” (stop calling them soft) people would need to be a self-programmable learner in a networked society.

I settled on: create, communicate, think, lead. I then wanted to start thinking about a map. Actually the thinking about the map started first. It lead me to the four practices found in participatory learning environments.

I was reading an article by Paul Deane on “Rethinking K-12 Writing Assignment” when he discussed competency models as a “detailed map of the skills that should be assessed.”

Dean, P. (2012). The CBAL Competency Model.

The infographic is great. So many layers of meaning in so few words. It also “mapped” writing in a way that I had never really seen before.

I was also, of course thinking about the Web Literacy Map and the working group efforts to release a second version of the Map. If you have been following the developments a series of focus group interviews is being conducted. Reading the questions being asked it seemed many people are trying to answer what are “21st Century Skills” we are trying to teach.

I am beginning to  wonder if that is the right question. Maybe we should be asking, “What practices should our learning spaces require and reinforce?”

Choosing Practices

I settled on these four practices because they are essential to self-programmable learning. I dropped collaborate because learning never occurs alone. We are social animals and I believe in many ways our humanity begins when behavior must conflict with instinct. When we run simulations in our mind, delay gratifications, weigh consequences, and consider others we become human.

I then placed a series of practices in concentric circles. I was intentional in my design hoping the practices grew in scope and impact on society.

I then looked around for the types of choices and practices I would want to see in participatory learning environments.

I lifted the entire Create category from an etherpad published by the Web Literacy Working Group. It is cool stuff. Gets at the whole design thinking thing plus puts a focus on making.

The Communicate practices are a mix from the Dean article and writings about rhetoric, reading, and writing.

The Lead category is something new to me. Garnder Campbell sparked my thinking around leadership and learning. The recent focus on leadership in the Mozilla Learning Networks has also honed my though.

In the Think category I dropped critical. Maybe its my natural aversion to totally useless and unnecessary  modifiers. I find them redundant and repetitive.

Part of it is just plain confusion. If I can think critically when do I think uncritically? When do I use my dumb thinking skills? Instead critical thinking usually refers to a specific subset of processes and practices. Yet these subset of competencies changes if we are talking Spache’s critical reading or the camp that grew from the Frankfurt school and  Friere’s Pedagogy of the Oppressed.

I went with Think. You can Think Different, but just think.

Levels of Engagement

I then played with the idea that each circle represents some level or characteristic of learning. I tried using two dollar words like enculturation. I attempted to sound like the cool kids by using in words like affinity spaces.

Nothing work. So I tried to settle on simple:



Not sure if this works though. Still I would rather us invest time into ensuring are learning spaces afford the agency for these practices to be built rather than spending time and treasure chasing variance in scores.

#GearUpNH #MakerParty Learning to Play with Code

We went from the courts to the code. It was hot. Real hot. Melt the soles of your kicks hot. So many of the Youth from the Gear Up New Haven Summer Academy retreated indoors during their self-selected learning time.


I decided to take advantage of the over crowded activities (and the superior air condition of the computer lab) and throw an impromptu Maker Party.

I rounded up the volunteers. I was a little saddened when they were all boys. The most talented coder in the class chose to stay and read her novel. Equity does need work it. We do not need to simply open up opportunities for females but make our environments welcoming.  I needed to be more intentional in the set up of my Maker Party to make it more inclusive.

Naiia Huq.
Naia Huq. The best coder of the 2015 Academy.


The Launch

I stole an idea from @soapdog and first had my students discuss how the used the web and what they wanted to do with the web.

Focus on Reading the Web
Focus on Reading the Web
Desire to Write the Web
Desire to Write the Web

Overall the participants all wanted to do more with the web than simply watch videos. There was a strong call to learn more about video production.

We focused on basic HTML and CSS by completing make-a-meme and the comic strip creator remixes.

Learning Activities

The first activity was Make-a-Meme. The students got right to work. Especially when they realized they could use the memes to “tease” each other. The students were quickly Googling deadpan insults, making memes about sports teams, or cheesy pick-up lines.

This get back to the need to make learning spacing more inclusive. I wanted to to push them into interest and away from insults so we left the meme-maker behind. After I left them with this:

We then played with the Comic Maker



The participants started to dig deeper into their own likes and began to customize their makes based on peer culture.




All of the participants who came to #MakerParty were excited to design something for the web. They could not contain the excitement of knowing they had published to the Web without using Facebook. This was their code. Their makes.

Ideas are hard. We lost a lot of time as folks had to “think” of a meme or comic strip idea. Paper based storyboarding is essential. Having them sit down with an idea would have allowed me to focus on the code and not the content.

Overall it was a successful Maker Party. I am hoping the participants take their new skills back to their school and help me launch local clubs in their hood.



Scaling Up and Onboarding in Mozilla Learning Networks

No project or space designed to #teachtheweb could ever exist in stasis. Change is  the only constants on the Web. Well, actually change isn’t the only constant. There is also the mission of Mozilla—the  other fixed variable– as old as browsing itself.

Internet Open

flickr photo shared by balleyne under a Creative Commons ( BY ) license

This philosophy of the web– as an open and public space that empowers us  to read, write and participate has drawn many like me to the Mozilla Learning Networks..

I recently came across this infographic from an article entitled Toward a Grammar of Collaboration by Yrjö Engeström, Anu Kajamaa, Päivikki Lahtinen, & Annalisa Sannino. The picture was taken from a Bennet & Sederberg, 2012 piece. When looking at the overall picture I saw a decent metaphor of  the over-arching goal of shifting Mozilla Foundation’s teaching efforts into a more brokered network.


To be honest I haven’t read either paper yet but the image immediately reminded me of a few things:

So I wanted to use the infographic  as a lens to reflect on the evolution of how the webmaker spirit we knew evolved into, and blended  the tools, toys, and teaching of the future.

Mozilla Learning Networks


I first encountered The Mozilla Learning Networks  through an affiliate. Andrea Zellner had thrown together a Hackjam at a National Conference of Teacher’s of English annual meeting. We walked around until we found free wi-fi to try out X-Ray Goggles.

I didn’t do much with the interaction until the coming summer when I  organized a #hackjam as an after hours activity for a conference Ian and I used to run. This over time turned into Ian and I throwing together our first Maker Party events and evangelizing webmaker tools everywhere.

Things were more hacky then. Webmaker and Hackasaurus  were pitched as, “Here are really cool tools: X-ray Goggles, Thimble, Appmaker, and Popcorn, use this cool stuff and see what you can do.” We did and do some amazing stuff with the Webmaker tools.

Now some things are changing. Appmaker and Popcorn will be deprecated.  Thimble is getting an amazing and much needed make over (I am really excited about what I have seen so far). But it isn’t the tools that matter.

It is the network.

As Ani Martinez noted purpose, people, programs, and presence will make the difference. That brings us to the more updated graphic that in my mind demonstrates the evolution of the Mozilla Learning Networks in the last year.



In today’s vision of Mozilla Learning Networks I see the Webmaker App on-boarding folks into self-organizing efforts. Maker Party serves as an organizational bridge between networks that are actively supported beyond the product side.

I see Mozilla Clubs as being a network The Mozilla Foundation helps to enable.  Through curriculum, tools, and assessment we provide the kits. Through leadership and cultivated social media spaces the Mozilla Learning Networks provide more structured activities, spaces and support  with club captains and regional coordinators.

Then there is the bridge that moves to the brokered network that in fact encapsulates the smaller networks. What is this bridge? Not sure, Matt Thompson has recently started a conversation about this level of on-boarding.

The Impact

It was not the goal of webmaker that shifted, but it was the scope and speed to which results were to be achieved. The battle cry, flying chainsaws and all,  has grown exponentially.  This has lead to much larger global effort.

Ben Mozkowitz, Matt Thompson, Michelle Thorne, Mark Surman, and Laura De Renyal have all written or spoken about the mission of serving the next billion to come online. Basically we can not reach this level of impact with self organizing or enabled networks. They would have to brokered networks. The hackjams affiliates used worked in the past but a new scale is needed. One of massive growth.

I do fear there is a fourth box on the left of the picture, a box not as pretty—“directed networks.” We can not strip all degrees of freedom away from learners, mentors, clubs. We have to make sure we do not raise too many barriers to participate. It is hard to square radical participation with only centralized decision making. Stakeholders need to be decision makers and not worker bees.

Up to this point in the history of the Mozilla Learning Networks the community was relied on very heavily for not just being boots on the ground but forming much of the thinking and planning. Over the last few months, due mainly to growth in scale and staff changes, much of the planning had to be top down.

We will need both horizontal and vertical leadership. Overall it has been such a learning experience being a volunteer contributor within the Mozilla Learning Networks  these past few years. I am excited to see what the next few years bring.

Moving to collective action is the only way to help build and protect an open web.





Making on Android for #CLMOOC

I love all the tools I can choose from when I sink into my deskchair and open up my laptop. The possibilities swirl in my mind as I edit videos and images. Yet for most of the world they will turn to the mobile web and mobile apps to spawn their creativity.

That got me thinking about the apps I use as a webmaker on Android. I wanted to share because more and more of learners I work with across the globe use Android as their only computing operating system. Actually in parts of the world over 91% of users have a phone powered by Android.

Then when I played in #rhizo15 and #clmooc I noticed a large proportion of Android users. We all wanted to create an effort to document how we hack and make using our Android devices.

Drawing Cartoons

This is a great animation app for Android. I made a basic video for #clmooc.

I will work on tutorials for all of these later but you get a full range of movements and can quickly make a cartoon. My six year old son put one together in no time. You basically add frame by frame and can move your characters. You can also select multiple backgrounds.

Flip A Clip

This is a great app for making quick gifs. I used it to create a #CLMOOS gif. You basically draw with your finger and then can add frames and trace over what you drew. You then share your files as a gif.


Font Studio

This is a great app for layering images with texts. You get many options. You can use a mask or put words on an image. It is easy to use and very powerful.



Dogtrax is our resident Super artist. Super allows you to quickly do a “madlib” like prompt and add text your images. You can then share it out onto Twitter.

Other Apps

These are other apps I will add to the collection later. I use them all as an Android Maker. The include: Video to Gif, Superphoto, Webmaker, Smart Voice Recorder, and We Video

Playing with @Webmaker Beta.

Yesterday Mozilla dropped Webmaker into the Google Play store. I have played with past versions but the nightlies had to be sideloaded. Today I got to download from the the Play Store and begin my make.

Webmkaer Beta

Webmaker, in its current state is basically another slideshow app, but one I believe is very intuitive. That’s the main point. The old webmaker suite of tools (now included in the Mozilla Learning Networks) focused on learning communities.

Mozilla at MWC 2014

flickr photo shared by mozillaeu under a Creative Commons ( BY ) license

Webmaker’s new  goal is to take nonusers to users. The team at Mozilla designed Webmaker for villages in Banglesdesh and Kenya where smartphones do not have the latest specs. Ben Moskowitz in a recent post discussed the ladder of users.

The webmaker app focuses on the large segment of non-users to beginning users. This represents significant shift from The Mozilla Foundation’s efforts to #TeachTheWeb. The past suite of webmaker tools focused on learning communities. Webmaker Beta hones in on connecting the classroom of one.

This new segment exists around the globe as the next billion users will come onlin emainly through mobile device. So webmaker beta is easy to use on low powered devices. In fact I gave it to my six year and my four year old on their Moto G and they quickly created a project. Webmaker beta is not feature rich but it is intuitive enough for a toddler.


CC BY Ben Moskowitz.


How Does it Work?

Screenshot_2015-06-17-07-54-14 Screenshot_2015-06-17-07-54-31 Screenshot_2015-06-17-07-54-58 Screenshot_2015-06-17-07-54-50 Screenshot_2015-06-17-07-54-37

The tool is so easy to use you really do not need instruction. Webmaker Beta is based on tiles of pages. You add a page by clicking the plus sign. You can then edit the page by adding a picture, text, or a link to another page. Once you add a picture you can choose your camera gallery or your photo.

My Project

If you want to check out my project first you need to download the app from Google Play. Sharing of projects outside of the app is not yet possible (feature coming soon). Once you install the app you can click on my project.

I created a brief description of Connected Learning. I enjoyed the navigational choices of arranging the pages. I first searched for creative commons images. Not an easy feat on mobile. Flickr’s mobile app does not allow you to sort by license. So I used the creative commons search engine and linked back to Flickr.

I then tried to color coordinate the diferrent values and and principles of connected learning.


Webmaker is very much still in Beta. Many features are sure to come. Some things I quickly missed:

  • Adding an image by url: Downloading images was no problem for me as I had wifi and do not have to worry about data. In emerging enconomies data is a premium. Being able to add images by url may help cut down data costs.
  • Landscape Pages: Webmaker has followed in the footsteps of recent apps that use a portrait aspect ratio. This makes little sense to me. All of the images I found on Flickr were shot with an incompatible ratio. I like to fill pages with images I could not.
  • GIF support: Enough said (though this may have to do with low powered phones in Android One).
  • Layering: If we are to get creative with our projects we will need to be able to make some images full screen, resize others, and layer pics.
  • Move Pages: I wanted to move my pages around to rearrange my navigation.
  • Link to URL: Currently you can only link to other pages in a project. I wanted to link back to my source material and my photos credit pages. Basically I did not properly attribute every picture I used. This would have required typing the license for each picture. This is cumbersome for mobile. What I do is favorite images I use in Flickr and then link back to that folder.


I can not wait to see this project grow. Right now Webmaker Beta is another slide deck, but it is a slide deck with a mission. The design team as created a user experience that requires no real instruction and that can be easily adapted to any language.

Finding Our Voices in Lost Voices

New-Orleans post Katrina Sept 2005: house busted by Katrina's wrecking ball

flickr photo shared by Gilbert Mercier under a Creative Commons ( BY-NC-ND ) license

We want every student to leave Gear Up knowing they have a voice. They are “active players and not spectators in life” as Walter Dean Meyers., the author of Handbook for Boys wrote (our shared reading this summer). To this end we had students explore what it means to be a lost voice through poetry.

As many of our readers know I am also interested in exploring how the pedagogy of poetry can be enhanced with the use of digital texts and tools. Over the last six years, my colleagues Sue Ringler-Pet and Ian O’Byrne have been exploring the intersection of poetry and technology. We present a project at NCTE celebrating a poet laureate through technology.

This year we chose Natasha Trethewey and her work with documentary poetry. Trethewey says she attempts to find lost voices in historical events. This seemed like a perfect project for the 100 students attending our Summer Academy.

The lesson plan we used appears below:

Step 1: Read “The Elegy of the Native Gaurd” and “Beyond Katrina”

Step 2: Then discuss the following prompt in the Google+ Community: Trethewey in explaining why she writes said her purpose is, “giving voice to the groups and individuals blotted out of public memory.” In these two poems what groups and individuals were brought to the light? What words, phrases, or stanzas capture the emotion or plight of these voices?

Step 3: Annotate the text using the PDFZen. Identify key events, characters, and emotions

Step 4: Record and upload your poem (written in Language Arts) to SoundCloud
-Set up a Soundcloud Account
-Post your Account Name to Google+
-Follow everyone in the class
-Record your Poem
-Upload Your Recording to Soundcloud

In order to make the projects manageable the students coule pick from the following historical events: Slavery, Civil War, WWII, 9/11, and Katrina. They then had to create a narrator for their poem, draft, and record the poem

Here are a few examples:

My Thoughts

Overall the project went very well. Yet it is not over. These poems will be used as models, and a few as mentor texts, for middle school students in Hartford who will complete the same project this Fall. We will share these voices in Boston at NCTE.

The lesson also demonstrates how good analytical reading does not need to favor informational, narrative texts, or poetry. In fact the best lessons will result in some type of performance piece (the poem) that required students to question and annotate a variety of sources for a variety of reasons.

9/11, with Katrina as a close second, seemed to be the most popular theme among students. I wonder if this is a due to proximity to New York (almost all know of a life touched by the tragedy). The boys (shocking) seemed to gravitate to lost voices in wars.

The poems are a good, but many have an overarching sense of prose, rather than poetry to the stories. Now I cringe at giving students rules when teaching poetry (in fact I asked teachers not to require stanzas at all let alone a minimum number) yet in the next iteration I want students to try to find more poetry in their voices. I may ask students to write their lost voice as a narrative first and then convert this prose into poetry. This had worked in the past as well.

Our Summer Academy is about building bridges to the future in the hope that the entire New Haven class of 2018 is college bound. I hope by exploring lost voices, we helped students find their own so they lear not to be “spectators in life.”