Make me run and support your favorite opensource project

Couple of months ago I started a little “via Twitter” only campaign and now I think it’s the time to give it more visibility, because the deadline is in 20 days.

What?

The main idea is:  for every tweet [tooltip title=”Yes I Will” gravity=”e”][mark color=”yellow”]I will run 1[/mark][/tooltip] meter on Prague Marathon on September 8th 2012 (yes in 20 days) and will donate some money to an open source project.

How?

[box color=”orange” icon=”flag”]
Join the campaign now – it’s FUN. Fell more than free to share it with your friends.
[/box]

Offline AddonSDK (#jetpack) activities

One of the coolest way to bring the knowledge to the masses is to …write an article for a magazine. I know it’s kinda old fashion, but there are a lot of people that are reading actually magazines.

I will write 2 articles in next several days about JetPack and AddOns in general for JSMag and .Net Magazine (Bulgarian edition) and I hope I will get more people trying to write an AddOn or just diving into this new technology.

jsmag netmag.bg

I will be stick on:

0. What is an Addon and why we should create more of them.
1. JetPack Architecture and structure.
2. JetPack API (panel, widget and more).
3. How to write an external reusable library.
4. How to remix the code and add your JS to an AddOn;
5. How to use SDK to develop, pack and test your AddOn.

Any recommendations?

Mozilla #JetPack: Create a simple debugger

So I wanted to create a simple JetPack debugger that will write me some data and will dump me some objects on my …Firefox error console.

Here is the code. This simple tutorial shows :

0. How to use some of Firefox Services via Services.jsm
1. How to work with nsIConsoleService

Why I need that? Well I want to debug some of my extensions without using console/notifications or Firebug. This can be usable for getting better support for users. You can always put some debug lines on your code that will be visible for your addon user.

Anyway this is an example library and it’s not for production use :)

Mozilla Jetpack talk at #OpenCamp

Here is the background for my JetPack talk next week:
Jetpack

I will be talking and hacking about:

0. What is an Addon and why we should create more of them.
1. What is XUL and what is JetPack about.
2. JetPack Architecture and structure.
3. JetPack API (panel, widget and more).
4. How to write an external reusable library.
5. How to remix the code and add your JS to an Addon;
6. How to use SDK to develop, pack and test your Addon.
7. Bamo vs. your own IDE.
8. How to add your addon to AMO website
9. Q&A

Create a class-based library in #JetPack (addon SDK)

I just commit to GitHub a class based library called JPersona..

You can get the background color and text color of the active persona your Firefox is wearing and to do whatever you want.

This example shows :
0. How to import LightweightThemeManager – the one responsible for handling Personas.
1. How to write class-based library for JetPack
2. How to import this library in your main.js and how to use it.

Go now to github and give me a feedback

Get current active theme in #JetPack

I need to know ID of current active Firefox Persona in order to get the textcolor value from users.pref to be able to display different icons on my widget, because I don’t wont to display blue icon on blue background.

This tutorial shows:

      How to access Addon Manager from a JetPack script
      How to get all Addons based on their type [extension, theme, locale, multipackage]
      How to get Active Persona’s ID

It’s a lot for such short script, isn’t it?


//we need this component
const {Cu} = require("chrome");

//import AddonManager
var AddonManager = Cu.import("resource://gre/modules/AddonManager.jsm")
                              .AddonManager;

//We need to get all Addons that are with type 'theme'
var types =['theme'];

//get all themes
var currentTheme = AddonManager
                          .getAddonsByTypes(types,function(addons){
	//Firefox always shows active theme as 0 element (not sure, need confirmation)
       
       //get the ID of the active theme/persona
	var tid=addons[0].id.toString();
      
        //show it in console 
        console.log("Current Id:"+ tid);
});

Unfortunatelly textcolor value is not part of the object (yet) and the only way to find it is to check with this id (tid) in prefs.js

#Javascript survey results and #jetpack

Some time ago I have posted a call for javascript hackers to fill a survey in order to help me to create a better world.

0. Here are the results:

What OS you are using while hacking the code?

Gnu/Linux 239 40%
MS Windows 236 39%
MacOS 291 48%
Other 7 1%

What’s your location?

Europe 394 65%
South America 7 1%
North America 161 27%
Asia 23 4%
Africa 1 0%
Australia 8 1%
New Zealand 3 0%
Moon :) 17 3%
Other 15 2%
People may select more than one checkbox, so percentages may add up to more than 100%.

What is your IDE?

This was an input filed:
Aptana, Eclipse, TextMate,BBedit,Coda, Dreamweaver and more as you can see here.

Why I need that?

I am part of Mozilla’s JetPack community and I am researching how to make our life easier by creating plugins and snippets (maybe debuggers) for most popular IDE’s in the #JS world in order to allow rapid development of Firefox Addons using AddonSDK (a.k.a JetPack).

You can see my prototype here and version 0.2 here.

Can I help?

Of course you can. If you know how to write plugins for any IDE or if you have any other idea how we can make our life easier – please drop me a note here or on identi.ca nor twitter

JetPack: How to add a button to a webpage + events

This is a Jetpack example for beginners that shows:

0. How to add a simple DOM element – button to a webpage using Mozilla Addon SDK (Jetpack)
1. How to attach an event
2. And how to handle it.

If you want to try it – go here click on Test icon and when it loads, visit: http://talkweb.eu/labs/jetpack/button.html or use your own SDK


var buttonScript = [
'var butt = document.createElement("button");', //define button element
'var btext = document.createTextNode("Click me");', //define the text
'butt.appendChild(btext);', //attach text to the button
'butt.addEventListener("click", function(){document.bgColor="red"} , false)', //handle onclick event
'document.getElementById("test").appendChild(butt);' //put the button on the page
];
 

var pageButton = require("page-mod").PageMod({
include: 'http://talkweb.eu/labs/jetpack/button.html', // this script will works only on this website
contentScriptWhen: 'ready',
contentScript: buttonScript
});

Is it (Mozilla) Jetpack still confusing?

If you want to create an unique technology maybe you should to create an unique name or create an unique strategy to connect the term with your technology and leave others alone :)

Currently there are a lot of JetPack terms related to technology:

0. JetPack me – Great, great WordPress plugin
1. Microsoft JetPack
2. A game
3. An AD system
4. Mozilla JetPack

Do you think It’s a bit still confusing for a developer who is looking for some help to find it?

Are you interested in learning something new and cool?

Well, why don’t you join me at P2PU in a Mozilla JetPack course. The main idea of P2PU is to give the opportunity to anyone to teach anyone to a certain topic.

It doesn’t matter if you are beginner or if you are Mozilla JetPack guru – P2PU course perfect place for you to learn or to share knowledge.

If you are part of Facebook, please join the JetHack group also.

Jetpack.ruble 0.2

My jetpack.ruble project has a new version. Hooray. The idea is to provide a rapid development tools for opensource IDE called Aptana, as a part of a bigger project to provide such tools for all Open Source tools we’re using.

Of course it’s still experimental, but as soon as I found some time I will create some nice features like snippets and preferences.

Here is the URL in GitHub – if you are interested, please watch it.

Help
Also I still need help. If you are JS hacker, please answer me this questions 3: http://talkweb.eu/openweb/768

Converting your IDE into a powerful JetPack machine

I just started a project at GitHub to add a command bundle for my Aptana IDE (it’s Eclipse based) for Mozilla JetPack.

Right now it’s just a skeleton and contains only ‘cfx – run’ command, but the main idea is to create bunch of snipplets and to add more command in near future for rapid JetPack development.

Here are some screenshots:

Here is how the menu looks like:

Let’s see it in action:

You can use the shortcut also (CTRL +R)

Join
If you want to download it or if you want to join this interesting project, please visit GitHub or drop me a line here.

Video
To see it with good quality, click Right button – and select ‘View Video’ or select “Full screen”

This video shows what happens after ‘CTRL + R’ combination (see above). The automation is real :)

JetPack offline and a JetHack idea.

I will be leading a JetPack session during OpenCamp in Sofia. This will be regular session with slides, code examples and some quick hacks, but I think this approach is some kind of wrong.

JetHack?
I am thinking about something like a Bootcamp or HackCamp where we gather together Java script programmers, Jquery meetupers, CSS and HTML writers, some hackers and some ordinary people and we can start talking and hacking using JetPack – that will be really cool and useful approach – bring your computer NOR your head and let’s start the engine.

Interested? Join “the evil” Facebook group now and let’s polish the idea together.

PcMagazine
Talking about JetPack offline I will be writing a big & fat article in our PC Magazine local edition to start finding a people that can be interested in such hack activities.

10 reasons to fell in love with Mozilla JetPack

What is Jetpack?

Jetpack is a project to make it easy to build Firefox 4 add-ons using common web technologies like HTML, JavaScript, and CSS. The main goal is to enable anyone who can build a web site to participate in making the Web a better place to work, communicate, and play.

Sooo. let’s count to 9 from 0 of course. We’re hackers!

0 – Use your web knowledge

Hacker

You can use your JQuery/HTML/CSS skills to write a add-on for Firefox. Yes, you can write an Add-on with easy and pack it with easy via JetPack SDK.

1 – It’s easy to start

You don’t need to be a XUL mastodon to write some cool extensions.
P.S I like XUL Also.

2 – Easy to learn

Kose

It’s so easy. I bet I can teach my son to write an addon when he turns 6.

3 – Sharing is caring

Share

You can share your code with others via some kind of standard libraries. Write the code and let’s other re-use it within their applications.

Continue reading “10 reasons to fell in love with Mozilla JetPack”