Working

Working with All Star Code in NYC to empower minorities to get into development

Sometimes it is great to work for a large company that gives you opportunities to do some good. I am currently in New York to run a workshop with All Star Code in our offices. Originally Aaron Gustafson was supposed to also be part of this but he got sick. Instead I am happy to work with Rachel White, Claudius Mbemba and Adina Shanholtz to help All Star Code.

Originally All Star Code approached me to get a bulk order for Surfaces for their students to work with. When I heard that their curriculum was involving Git, Node, Web Development and Debugging in Browsers and the stack was Sublime Text and Chrome Devtools I offered a small change. So now we’ll be teaching the teachers of All Star Code’s next course how to use Visual Studio Code and do all the development and debugging inside that one. My main driver there was that Code is open source and thus the students don’t need to get another license.

If you wonder what All Star Code does you can head over to the Decoded Chats blog, where I interviewed Mahdi Shadkamfarrokhi, their head of curriculum.

If you prefer to have an audio version, you can download it here (MP3, 18MB)

Here are the questions I asked:

  1. You work for All Star Code. Can you give us a quick introduction what that is and what you do? (00:13)
  2. How low are the numbers of developers that came from a minority background? What are the main reasons? (01:40)
  3. Do you think that by teaching communication skills together with technological skills you become more interesting for someone with a less privileged background? Is selling technology skills as a part of a whole package more successful? (02:49)
  4. The program has been running for quite a while. Is there a success story you are really proud of? (04:20)
  5. You learn a lot by teaching as you can’t fake it – you have to know. Do you find that it is easier to keep your skills up-to-date by running this program? (04:46)
  6. What are the biggest barriers for your students to get into development? Is it hardware access? Connectivity? The style and language of documentation out there? (06:14)
  7. I learned a lot because when I started computers didn’t do much and you had to program. Do you think that nowadays kids are less inclined to learn as computers are more seen as a consumption device? (07:47)
  8. There is a vast amount of online courses to choose from when it comes to learning how to program. Many of them decayed a bit after the first round of funding dried out. How do you find great and trustworthy resources? (10:10)
  9. A lot of creativity happens on the web but these makers don’t know or don’t get into professional development. Where do you go to find people for your course? (12:04)
  10. Do you see Open Source and services like GitHub to host, document and discuss your projects as an opportunity for newcomers? (14:49)
  11. How can people help you? Are there ways to volunteer? (18:07)

I’m very excited to be working on this.

View full post on Christian Heilmann

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Working with receipts for paid apps

You’ve put your hard work into building a great app. If you want to get paid for your app then the Firefox Marketplace supports app receipts and verification of those receipts.

Receipt verification is how we ensure that your app has been paid for in the case of both hosted and packaged apps. It’s important to point out that we don’t limit the installation or distribution of apps from the Marketplace. They can be installed by anyone without limitation, they just won’t have the receipt.

That means as developers, it is essential to check the receipt in your app. This is the only way to ensure that the payment has been processed.

Receipt format

Receipts are based on the Web Application Receipt specification. A receipt is a JSON object that contains information about the purchase. That JSON is then signed using the JSON Web Token specification.

When the App is installed after purchase, the receipt is installed along with the app. To check that a receipt is installed you can access the receipt through the mozApps API, for example:

var request = window.navigator.mozApps.getSelf();
request.onsuccess = function(){
    for (let k = 0; k < request.result.receipts.length; k++) {
        let receipt = request.result.receipts[k];
        console.log('Got receipt: ' + receipt);
    }
}

Once you’ve decoded and expanded a receipt it would look something like the following:

{
  "product": {
    "url": "http://example.com",
    "storedata": "id=111111"
  },
  "iss": "https://marketplace.firefox.com",
  "verify": "https://receiptcheck.marketplace.firefox.com/verify/111111", // The verify URL
  "detail": "https://marketplace.firefox.com/en-US/purchases/111111",
  "reissue": "https://marketplace.firefox.com/en-US/app/example/purchase/reissue",
  "user": {
    "type": "directed-identifier",
    "value": "1234-abcd99ef-a123-456b-bbbb-cccc11112222"
  },
  "exp": 1353028900,
  "iat": 1337304100,
  "typ": "purchase-receipt",
  "nbf": 1337304100
}

Receipt verifier library

Just checking for the presence of the receipt is not enough, there are a few checks that should be performed as well:

  • That the receipt is correctly signed and has not be tampered with
  • That the receipt is from a marketplace you approve of
  • That the receipt is for your app

There are two optional steps you can perform:

  • That the crypto signing on the receipt is correct
  • That the receipt is still valid with the store

These last steps require the app to have internet access to be able to call servers.

An easy way to perform most of these checks is to use the receipt verifier library. After including it:

var verifier = new mozmarket.receipts.Verifier({
  // checks that the receipt is for your app.
  productURL: 'http://example.com',
  // only allow apps that came from the firefox marketplace.
  installs_allowed_from: ['https://marketplace.firefox.com']
});
verifier.verify(function (verifier) {
  if (verifier.state instanceof verifier.states.OK) {
    // everything is good.
    console.log('good');
  } else {
    // something went wrong.
    console.log('wrong');
  }
});

See the docs for a full list of the options.

The receipt verifier returns a state object that tells you the exact error. We don’t prescribe what the app should do under those circumstances, that is left completely to the developer. For example a NetworkError indicates that we couldn’t connect to the verification server. That may, or may not be, a fatal condition for your app.

The receipt verifier library also includes a basic user interface for showing errors to the user. It is great for testing, but since the user interface in your app is going to be different, the chances are you’ll want to display messages back to the user in your own style. If you include receiptverifier-ui.js, then you can use the prompter like this:

mozmarket.receipts.Prompter({
  storeURL: "https://marketplace.mozilla.org/app/myapp",
  supportHTML: '&lt;a href="mailto:me@example.com"&gt;email me@example.com&lt;/a&gt;',
  verify: true
});

If you ran the app without the receipt installed you would see a message like this:

One last thing that the receipt verifier library won’t do is verify that a receipt has not been shared between users. That is left as something the app developer will need to implement: an example might be using the django-receipts library.

Getting help

If you need more help then there’s a mailing list or a helpful IRC channel at #marketplace.

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

7 things about working in I.T. you don’t learn in school

Disclaimer: this is the script, well, the notes, for a presentation I am giving at Spotify in Sweden this weekend as part of the Studenttechfest. I was asked to give an inspirational keynote telling students what working in IT is like. The slides and recording will be available afterwards.

1) The “how” lands you a job, the “why” lands you a career

In I.T. there is what I call a “fetish of the how”. We are obsessed with finding and showing quick and intelligent solutions for problems that abstract away the original issues in order to make us more effective and use less time to achieve our goals. I remember a Dilbert cartoon in around 1996 that hit the nail on the head. Dilbert explained when asked why he uses computers all the time that they make him much more effective and save time. When asked what he does with the time he said he does more computer stuff and his friend went “wow, so you can save even more time”.

stop listening to ducks

This culture of giving you a “how to do things” instead of “why they work” starts perpetuating a false belief that what we do is easy and can be learned quickly by doing an online course or looking things up in Google. Many of the threads on sites like Stackoverflow are just repeated answers stating that “you just do this and everything works”. Sites like W3Schools are very successful as they show how to do something and give you the promise that you can achieve anything by just copying and pasting an answer. Why bother with understanding what you do when you could already deliver?

Organic Unicorn Farts

The issue is that a lot of quick solutions start breaking really soon and then you are stuck as you don’t know what you did. You used magic, and not even yours and you aren’t even a wizard. There is nothing wrong with using free resources and abstractions and be more effective. In order to be professional, however, you also need to understand how they work and be able to create working solutions without them. This is when you start becoming someone who can be hired and offered a career. Otherwise you can get a job as a deliverer or maintainer but no company in their right mind would invest in you as your attitude is that of those who try to dazzle and really don’t not know what they are doing.

2) It is a ride, hop on and take in the scenery

I.T. is probably, with the exception of acting and journalism, the most versatile job market out there. Things are constantly in flux and there is not much boredom if you are excited about building things from zeros and ones.

Never look back

You will encounter a lot of products, frameworks, software packages and practices along the way. Take them in and deliver with them. Stay agnostic though as things are continuously changing. In every job there is something new to be learned and whilst your task is to deliver it you can also learn from the mistakes made and the results of shortcuts taken. Try everything and you will find patterns over time that help you make better decisions later on in your career.

3) Be a collector and an archivist

Working in a constantly changing environment also means a lot of drama, a lot of problems and egos clashing. Be aware of that and prepare for it. Even when you disagree with people strongly – if they are your manager and tell you something needs to be done the best way is to ask why and you might learn about outside pressures you weren’t aware of before.

Don't burn bridges

The I.T. world seems large, but it is actually pretty small. When leaving a job, don’t leave in anger. Don’t burn bridges as you will come across people later on you are very much sick of right now. You might even realise that in another environment these people will be brilliant to work with. You make a career by forging personal relationships. Collect great people to work with and keep up to date with what they are doing. Most great jobs come from word of mouth. Not via LinkedIn.

4) Your degree opens doors, your passion opportunities

Once you are done with university, you have your degree and many jobs require a degree as a right of passage. This means you can and will easily get a job. However, lots of other people also have degrees and as someone who hires I am looking for other, additional features. You are about to embark on a great journey, one of privilege, really. No other market is booming like I.T. and the things companies do for us make other people gape in astonishment.

Pawing puppy

Therefore, as a prospective employee, I am looking for passion in you. One of the main complaints by hiring managers is that people come into the job interview not knowing anything about the company they apply for. This is a bad first impression, as if you don’t care about the company why should the company care about you? Talk about your passions, give me an indicator that you want to get better and you are ready to learn more. Then I am ready to take you on and do a lot more for you than just pay you.

5) Nothing stops you from building a reputation now

There is no better way to get hired than to be known as someone who cares about sharing, giving feedback and showing technical and social aptitude. The good news is that this is amazingly simple these days.

touch my hair for a dollar

The main issue is that becoming known and being visible can be easily seen as showing off and in many cases actually is. In the US, this is part of a career; you have to sell yourself. As a European this can be daunting and feel wrong, but sometimes we need to jump over our shadow.

A great way to be visible is to go out there and speak about things you do. This is scary, but it is also a great way to get into the business. The simplest way to do that is to attend meetups and unconferences.
However, you don’t have to put yourself out there immediately, participation and visibility can be achieved much easier.

GitHub managed to make the impossible possible: it is a social network for engineers, people not generally known for being too social. On GitHub you can not only get lots and lots of great, free software but you can also become part of it. You can contribute code, you can file issues and help with testing, you can comment and help work around people’s differences. All of this brings you brownie points when it comes to applying for a job and looks much better on a CV than hypothetical achievements.

It is important to remember that your bad behaviour online is also noted by prospective employers. It might be fun to start a flame war and to troll people, but it can also mean the end of your career before it started. Playing nice is a good idea.

6) Being mobile and flexible gets you places

One ironic thing about I.T. is that whilst we are all connected world-wide, a lot of times traveling to other places to work with people face to face is necessary. Therefore it is important to be flexible about this. Many of my career jumps happened because I was OK to work from a different location for a short while. This also gave me a lot of interesting experiences I took with me.

Taking on an opportunity to work with a remote team is a great move in your career. The problem of making distributed teams work efficiently is still a big one for a lot of companies. If you already manage to have a fruitful collaboration with people from other timezones and cultural backgrounds you become a very interesting asset to companies out there.

7) Find a place to grow, not just a place to get paid

Lastly, I want to point out that I don’t see any way that you could not end up with a good job right now. The question you have to ask yourself is what you want to do. My advice is to find a place you feel great, you can be part of a team you respect and you see opportunities to learn new things. That is much more important than being paid a lot. Burnout is a big problem, and you should consider planning for a longer career rather than being a rockstar for a season and then feel like you already need a break at 22.

View full post on Christian Heilmann

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

fxosstub – a minimalist’s working example of the design guide rules for Firefox OS

This post is written by Pierre Richard, Principal, Jaxo, Inc.

I know, by experience and practice, the importance of the first hours—or even the first minutes—spent discovering and learning new concepts. During this period, developers take their go/no-go decision, mostly based on the apparent complexity of what they see.

Once you gain expertise in a given domain, you have tendencies to forget the obvious, the basics, which is where the new developers (“newbies”) need the most help. Experts are focusing on topics largely irrelevant to newbies wanting to get the essentials.

A Getting Started guide should never be written by an expert—it’s too late because they forgot what it’s was like to be a newbie.

This document and fxosstub were written by a Firefox OS newbie.

git clone https://github.com/Jaxo/fxosstub

image

My 2-week Firefox OS Trip

I started from scratch studying Firefox OS about 2 weeks ago. The first minutes were frustrating, but my Jaxo, Inc., co-founder, Joe Latone, had me motivated. Having faced and understood many innovations in the past, I was confident. I knew that, in a few days or more, I would be able to overcome these difficulties, i.e., “developer ego.”

I enjoy and respect the Mozilla community. I thought that I could give my 2 pence to the Firefox OS community, while learning about their new work. So, I decided to gain profit of my inexperience in playing the Janus figure, keeping one of my faces as the newbie as long as I could, and then switching to the veteran face when needed. This is where the Firefox OS “Hello, World” sample, fxosstub, derives.

It is intended for people with minimum knowledge. You only need to know the following:

  1. Basic EcmaScript, HTML, and CSS versus HTML5, CSS3, JS Objects, JQuery, requireJS, Node, Volo, etc.
  2. fxosstub versus mortar_app_stub

My First Hour with Firefox OS

Here are some remarks I conscientiously jotted from the very first minutes I discovered Firefox OS:

Newbie notes:

  • A fxos application is a big blue Install button. I was wrong, of course.
  • What’s the role of this Install button? I was afraid to press it.
  • Use the force and read the code!
  • Do I need to learn requireJS? Why the strange syntax/look of these functions?
  • Whats is B2G? Alas, R2D2B2G doesn’t work, but that was mid-November, and now it does – it has now evolved into the Firefox OS Simulator.
  • This seemingly random directory structure is frustrating. What’s www? tool?
    ? 3 out of 4 newbies may give up at this point.
  • Ask Google! Search for GaiaChrono, MozillaBall. Ah, that’s better.

Veteran notes:

  • I have to simplify all of this, and reduce a “Hello, World” to the minimum.
  • Examples are buried in ~/.mozilla/firefox/lkz6bqgi.default/extensions/r2d2b2g@mozilla.org/profile and in there is a r2d2-installed application, zipped. Ah ha! So, that’s the way they do install, but there was a mistake in the launch-path.
  • Should I install BootToGecko? OK, let’s do it. It smells like Android. Lucid, Precise, 32, 64? adb-get install? Use Nightly? I wasted 1 day on this and so will finish later this +6-hours long build, if it is really necessary.

The Next Day

I had written several apps on Google App Engine (GAE) and these should be good candidates to use to build an application for Firefox OS because they’re HTML5, they’re RESTful (through XMLHttpRequest, not JQuery), and they interface with Google APIs.

One of my GAE applications, Genetick, I decided to “install” on Firefox OS. How?

  1. Create a manifest.webapp in the war directory, but it needs fixes:
    • If I forget the icons, I get a cryptic message.
    • I have to remove the launch-path, and get rid of the cache line as well.
  2. Seize this opportunity to make the “install” code self-contained:
    • A standard Install JS Object, private.
    • A setInstallButton JS method, exported.

It works quite well!

Now, a newbie can start with the following test:

In my opinion, this makes it much more obvious to the newbie how Firefox OS deals with mobiles, and raises their enthusiasm!

  • “Wow, my pre-existing application looks a true mobile one!”
  • “Yes, the veteran says, that is what FxOS-Mobile is about—later you might be able to make it stand-alone, with no need for an Internet connection.”
  • Note that I couldn’t show it on FxOS-Desktop, problems on Ubuntu 12.04, no dashboard.
  • “But it doesn’t have the proper look and feel, the newbie argues, can I fix it?”
  • Newbies love new-look designs, that makes them feel they gain the knowledge and ownership of the application.

Googling again, this newbie finds the Warsaw 2012 Mozilla Camp, as well as some other gems, patterns and custom elements, and gets frustrated again:

Where are all those icons the Camp advertised about? No place to go. The icons I dug up from the samples are of different sizes (30, 32, 40), different naming schemes, etc. Sigh!

The CSS3′s scripts are obscure. It seems that the styler added rules over a set of defined rules, some of them new just for nullifying previous ones—using role, type, id, classes—increasing the preferences or, worse, exploiting the order of rules as it happens to be implemented.

On the HTML side, there is no clear pattern giving life to the design concept, i.e., between nav, section, and menu. What HTML5 tag should I use?!

The Next Days…

The veteran decided to provide the newbie with a working example of the design guide rules. No much to say, except that it was a tedious work to:

  • Select the best icons from the samples;
  • Use GIMP to resize them properly;
  • Simplify the CSS rules (remove the useless ones, check several combinations of buttons);
  • Make sure the fonts and color pan-tones obey the Firefox Identity rules.

It began with the twittershare application, because it wasn’t the worst application regarding its look’ n feel (and structure, although it could have been better at terminology). It also was the one closer to a vanilla application, from a newbie point of view.

It ended 2 days later with ffoxstub, consisting of:

  • A simple index.html
  • A style directory with its CSS and standard iconic images
  • A js directory containing install.js.

Then, as a newbie, I was able to adapt my GAE application—mentioned earlier—in the context of a Firefox OS mobile device. This step took 3 hours, starting from the stub. Now, a newbie can start to get more involved with Firefox OS and the community, trust the approaches, feel the power. Soon, the newbie will be an expert.

So, what is fxosstub?

The most simplistic, minimalist pattern to get the most newbies started building an application for Firefox OS on mobile, and it must stay as such: no rings, no bells. The Ariadne’s string through the Labyrinth, just enough to wake up the enthusiasm of legions of developers. Those, one day or another, will evolve to the wonderful world of requireJS, Volo, and the rest, but not at the start. Target the widest audience first.

fxosstub does absolutely nothing, except to show a screen suitable for obtaining the familiar layout of a mobile application aujus Firefox: a top header—with an install button, a body section, a bottom toolbar—with normalized icons. In the body section, there is a text area—launching the virtual keyboard—and a progress bar. All of this is supposed to self-adapt to an adequate size, keeping the text readable, the buttons finger-reachable.

fxosstub fills the gap between:

  1. What you are used to for building a regular web-page on a laptop/desktop display
  2. What is required on mobile with touch screens of reduced size.

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)