Contribution at Mozilla: High School

Last month I hold a presentation, about contributing to Mozilla projects, at a local High School “Tudor Vianu National College of Computer Science”. The main reason for such an event ? Well, here in Romania, there are a lot of great high school where student learn computer science but usually until they go to a university they don’t find out a thing about open source or how many opportunities they have even while they are in high school.

Around 30 students participated at the event. My presentation focused on Mozilla projects and the fact that everyone, no matter how much they know, if they are willing to be involved they can be a part of this great project, the Mozilla project. I spoke about many different projects (from Thunderbird to Rust and Servo) and what are the first steps in order to start contributing.

Also at the event I was helped by Teodor Szente who hold a short presentation and some demos about Rust and Servo. He is still in High School, 10th grade and already made some contributions to Servo.

It was a great event and I hope will repeat the experience but this time with some hacking.

 

Mozillians…

3 weeks ago I held a great event at a local University (University Politehnica of Bucharest). It was 9 November, Firefox 9th birthday, and a perfect opportunity to talk more about Mozilla and find contributors.

Event page:  https://reps.mozilla.org/e/how-to-be-a-mozillian-mozilla-community/

The event was a great success, more than 60 participants, very interested in joining the Mozilla community, contributing to projects or promoting our mission. For the event we prepared a lot of interesting presentation and discussions. From learning, to teaching, from just using our products, to promoting Mozilla’s values and vision, or by creating new content, coding, writing documentation, or helping other users the idea was to promote what we are and why we love doing this and how everyone can help.

3 speakers, 5 presentations, more than 60 participants, discussions about projects, research, contribution and community. We also announced future hacking activities, projects and how we can help those that want to become mozillians.

Around 5 students were interested in becoming Firefox Student Ambassadors. Right know I’m still discussing with them about the opportunity and help them to understand better the Firefox Student Ambassadors program and their future role.

GSoC: The final countdown

That was it, it seems … or not ?

It started 4 months ago with, well. nothing more than just some great ideas and a project proposal and today the project repository is counting more than 15000 lines of coding :D including HTML and CSS.

GSoC project state

I was suppose to end up with 6 CSS Tool, right now I have only 5 (and a half :D) – well the UI and some logic behind the radial-gradient will be inherited from linear-gradient. Radial-gradient will arrive a few days later.

The goal of the project was to offer CSS tools for some of the tricky CSS properties out there but to be as real-time as possible and provide an easy way of using without the need of setting numbers to get something :D. I tried make to them as visually as possible but also to offer a great number of advanced features for experimented developers.

All the tools can be found on MDN CSS Tools page:

The tool couldn’t be ready without some great modules that I had to write for simpler and faster implementation of the tools:

  • ui-dropdown – a HTML5 drop-down select with animation and easy styleable
  • ui-checkbox – CSS3 checkbox
  • ui-color-picker – great ColorPicker with RGB, HSL and HSV Color objects and alpha support
  • ui-input-slider – compact input box with slider style functionality
  • ui-slider- html slider with input box and a lot of options

All the modules implement a JavaScript observer, very useful for real-time updates on the UI.

Project information

  • Code repository can be found on my GitHub account : GSoC MDN CSS Generation Tools
  • Documentation: a little, not that much but the code should be self explanatory
  • There is still a huge room for improvements and probably bugs

In then end I would like to say that GSoC was a really great experience for me, mostly because I had the chance to contribute with my project for my favorite organization Mozilla. I will continue to improve the tools when I have free time and also try to find more contributors to it.

It makes no sense to state that I will continue to be involved somehow with this project or other projects for Mozilla because that’s not an option, it was a clear always well before the GSoC project (or as long as Mozilla keeps its goals and mission)

Thanks Mozilla and Google for this awesome opportunity.

Linear-gradient Generator

Capture

Linear-gradient generator is ready for your feedback :D. Sadly because of a really weird bug on MDN I can’t upload it. In the mean the tool can be tested by accessing this page.

As soon as the uploading problem will be solved the tool can be found by accessing the MDN CSS Tools section or directly on the liniar-gradient page,

The tool provides the following :

  • easy rotation of axis
  • adding as many gradient points as you wish
  • placing gradient points (stops) just by clicking on the gradient-line
  • real-time update when moving gradient-points around
  • support for 2 types of units pixels (px) and percentage (%)
  • supports for up to 4 different gradient-lines
  • order gradient-lines using drag and drop (when multiple gradient-lines/axes are used)
  • a great ColorPicker with HSV and HSL picking mode
  • standard linear-gradient syntax code

All user events and settings all updated in real-time according to user actions.

During the development of the tool I used the prefixed version of the linear-gradient. After reading a little more about the syntax I realized that there is a big difference between standard syntax and old prefix syntax. The problem is actually with the angle. Where the old syntax seemed to be easy to understand, like 0 deg where actually 0 deg which means a horizontal axis like we’ve all learned at school (or I hope so), using the new syntax 0 deg actually stands for a vertical axis, which from my point of view doesn’t actually has any logical sense.

Why would 90 deg be 0 when the actual gradient is drawn from left to right ? That should be 0 deg or the inverse, 180 deg but not the logical 90.

Sadly as long as this is the standard syntax will have to use this, but again I don’t understand the awesome logic that is used behind :D.

So I had to do a simple and yet magical change to the output code to be the standard way by using this awesome transformation: -1 * (math logical deg) + 90.

I will wait for feedback to see what I should do about the old prefixed version of the syntax. Until then take a look over the gradient tool and tell me what you think about it :D

Week 12+ ColorPicker Tool

ColorPicker Tool is live on MDN and it just can’t wait to tested by everyone :D

I really put a lot of work into this tools. The UI interface was a really big challenge because there are a lot of updates happening in real-time and a lot of options had to be carefully added to keep the experience really great. Most of time was spent on creating and integrating features for the color-picker module.

The tool uses a lot of native HTML5 drag and drop in order to provide a pleasant experience.

You can read about the features and also test the tool on the MDN page,

Webmaker Party – IP Workshop 2013

Organizing my first Webmaker event

This month I held my first Webmaker event in Targu Mures, Romania.  The event was part of IP Workshop, an annual summer workshop for students. At the event, more than 120 students, from middle school, high school and college, had the opportunity to learn new thinks and make awesome projects. There were 5 different workshops : robotics, graphics editing, android programming, embedded and web development. Each student had the opportunity to sign up for a workshop based on his knowledge and his preferred topics.

I was invited to hold the Web an HTML5 workshop for beginners. It was meant to be an introduction to web development, exactly what a web-making event should be, so I accepted.

The following weeks I tried to prepare some materials for the event. Sadly I had no idea what to expect. I knew that It should be an introductory course, but to whom ? There were a series of question that I was asking myself.

The course consisted of around 8 days of teaching including working on a project. Each day was split into 2 sessions of teaching, the first one: 2 and a half hours and the second one of 2 hours.The programs was fixed and the same for everyone, all workshops taking place at the same time, different classrooms.

So I had roughly 8 * 4,5 = 36 hours of teaching (including projects). What to do with them? Well I can say that I had some little experience being a mentor in different programs, but I have never experienced teaching an entire classroom or for such a log time.

mozilla-webmaker

Webmaker Mentor program

I knew about the Mozilla’s Webmaker project but I was not really involved into it, until this year when I started to read and learn more about the project. I followed the Mozilla Webmaker Mentor Program because I was really interested to became one. Also, I have joined the webmaker group ([email protected]) because I wanted to be up to date with everything about Webmaker, like the future of the project, events around the world and so on.

I have learned a lot about the program, events, the Webmaker Tools like X-Ray Goggles, Thimble or the awesome HTML5 web video editor Popcorn and I’m really glad that I’ve done this.

so… back to the event

I thought for a moment about what to do… I had more than 30 hours of teaching. Should I do this using the Webmaker platform or not ?

Well, Webmaker tools are really great and a powerful way to learn about the web. They give users the opportunity to easily create and/or remix on the web. They are perfect for small events, where everyone gets to work on a project and learns something new about the web, but there’s a but … they are not really meant to be a full walk-through from 0, meaning “what is HTML?” to a “web developer”. I guess you can do great web tutorials on Thimble but, again, the platform doesn’t seem to be made for that. Its not an online IDE but just a great tool to remix and create single pages.

I decided to make my own HTML course, after all I was sure that 30 hours should be more than enough to be able to explain everything about HTML and CSS in depth, lot of time to practice and even some JavaScript. Actually I was hoping for a lot more JavaScript but I was kinda too excited about when I i thought it through and the reality was a little bit different.

As I was saying in the beginning of the post, I was was asking myself some questions:

  • From where to start ?

Well that’s easy, let’s say the beginning, but how to advance ? Maybe there are a lot of thinks that I consider as being “really easy to understand” but in fact they’re not. How to make this course fun, easy for everyone and why not challenging for those that what to learn more?

  • What’s the right path to learn about the web, having in mind that you don’t know a think about it?

I’ve done some research to be sure that I will present everything in a logical order:

  1. HTML – structure of a webpage, tags, elements, properties, attributes (almost every single HTML element (not HTML5) was discussed)
  2. CSS -  what is CSS, structure, syntax, selectors (tag, id, classes, pseudo-selectors, attributes) CSS relationships (child, direct child, etc), and the most important properties
  3. I insisted a lot on box-modeling, after explaining it I sketched a basic Layout on the blackboard and everyone had to make the layout.
  4. DOM – understanding how webpages are structured in the Browser. DOM tree, DOM nodes, elements, methods
  5. Javascript - syntax, dynamic styling, forms, working with events, basic JavaScript Objects
  • Do we need a development environment ? What about browsers, development tools ?

From the start, I really wanted from my students to really understand what’s behind those really nice web-pages that we’re surfing daily. Thus, development tools were a must and understanding how to use them was really important, from my point of view.

We used Aptana Studio 3 for coding because it offers a full web-development environment, it is open source, has a nice syntax checker, code highlighting and code completion. Those 3 helped me a lot because students were making lots of syntax mistakes and the IDE helped me most of the time to quickly find the problems.

For testing/running/viewing webpages we used Firefox Aurora, because it offers a lot of great development tools that are not yet available in the release version. I insisted a lot on using the tools and I explained why thy are so important. We used them daily for code inspection, understanding how webpages are built, console logging, live editing, etc.

Because I had some trouble getting demo materials, or exercises to students I decided to use Dropbox to share everything (a shared folder). It saved me a lot of time because almost instantly everyone in the classroom had the materials (demos, templates, web reference links). :D too bad that I couldn’t lock the writing permissions. Guess what can go wrong with 27 people having read/write access to the same shared folder? A lot of unwanted events!!! Even so, it was a really great idea, and incredibly useful. A constant connection between my computer and student’s computers with the possibility to send files both ways, it was perfect for fast sharing what was needed, easily prototyping a new demo or helping a student by looking over the code he wrote.

The event

At the course I was expecting around 20 students, actually had 27. The teaching part was harder than I expected. Students were between 12 years (7th grade) and 20-21 years ( college ), thus, there were like really, really big difference between knowledge and learning efficiency, Because of that and the fact that I couldn’t help each students (for to long) when there were problems I had to restrict the number and complexity of the courses to something, well less advanced.

I taught web (HTML, CSS, DOM, JavaScript) for the first 5 days, that’s around 20 hours, because on the last 3 days all students had to work on their projects. Students were let to team up to work on the same project to encourage teamwork. On the last day everybody got the chance to present the project (demo and a short presentation) in front of all the students, just 120 :D.

Firefox and Webmaker swag were the *Starts* of the event :D.  Everyone got Firefox and Webmaker stickers, lenyard, pins. Students having the best projects were rewarded with Webmaker T-shirts or Firefox backpacks.

Don’t forget to check out the list of the projects, below. All of them are made from scratch by students that didn’t know a think about the web before the event started.

  • Project 1 – Flower shop
  • Project 2 – Awesome History Turn Based Game – uses canvas
  • Project 3 – Photography site
  • Project 4 – Labyrinth game
  • Project 5 – Exotic places around the world
  • Project 6 – Game Wiki – Metin 2
  • Project 7 – Tic Tac Toe – Game
  • Project 8 – Peles Castle
  • Project 9 – Pizza site
  • Project 10 – Evolution of Volkswagen Golf
  • Project 11 – About basketball

Last

The event was really great. I met a lot of people, made a lot of friends, learned a lot about teaching and organizing a Webmaker event. I hope to repeat the event in the near future.

I can say that I feel like an official Webmaker mentor, just have to get my badge :D.

Link to event page: https://reps.mozilla.org/e/webmaker-party-at-ip-workshop-2013/

Photos:  http://www.flickr.com/photos/red_energy/tags/ipwmakerparty/

Week 11 – New module ColorPicker

Based on the color-picker from box-shadow tool I created a ColorPicker module that can be used multiple times on the same page.

The ui-color-picker module offsers the following options:

  • very easy instantiation by setting only the className and picker-format (optional)
  • support for hue-saturation-value (HSV)
  • support for hue-saturation-lightness (HSL) – browser format
  • support RGB format colors
  • support HEXA format colors
  • support for alpha channel – 0.01 incremental step
  • HSV or HSL picking format – can be switched anytime
  • observer pattern for getting real-time updates

The ui-color-picker module also provides an advanced JavaScript Color class with a lot of useful methods for manipulating colors:  creating, setting, getting CSS code format, converting co different format representation based on other format. HSV, HSL, RGB, HEXA.

Border-image Generator

Border-image generator is up and running.

The tool provides the following :

  • easy set border-image properties using by dragging
  • load custom images or use the samples provided
  • load local images or by URL
  • scale source image for fine control over the units
  • support for all border-image properties (slice, source, width, outset, repeat)
  • support for the most common units used on the web (px, em, %)
  • advance unit support – custom increment step and precision

All user events and settings all updated in real-time according to user actions.

Status

I updated the GSoC project repository with the latest tools, modules and assets using during the development.

Sadly I’m a little bit behind the schedule because I don’t have 3 full working tools uploaded on MDN, just 2 : box-shadow and border-radius (right now I’m working on border-image).

Some tools took longer than I expecting, especially border-shadow, because there was a lot of code rewriting and UI/UX improvements.

During the development of the first tool I realized that I need to write some kind of modules because most of the tools will be using similar interaction elements : sliders , checkboxes, inputs, dropdowns, color-picker. After analyzing what I need I created a basic template for a module. All modules must offer the option to attach onChange functions based on the “topic” affected by that instance. Also a setValue function is necessary to update the module data-value from outside.

I also created a general Color-picker that will be used for all the tools that need color management. Right know it’s not a module, it is still based on HTML (I need to declare every single element of the picker) to be rendered correctly but I wrote it with this idea in mind because I knew that I had to also use it for color-picker and css-gradients. So I guess I can call this one a + for the future.