Facebook Hackathon

This weekend has been an amazing experience! 24 hours of non stop coding and fun. The Facebook team offered us the most amazing time, with great food (all the time), drinks, snacks, music and raffles, everything you ever wanted.

I met my team on the day and we quickly brainstormed ideas before the hack officially started around 12:30 on Saturday. I was very keen on developing a project for social good. So I researched before the hackathon the internet.org initiative and their commitment to make Internet accessible to everyone in the world. Their guidelines for developers suggested eligible apps should not include rich data such as video, high resolution images or anything that would require large HTTP responses. As a result, we thought, what is text only and awesome? Code!

So we decided we should make an app to teach children in developing countries to code by sending them short challenges that they could solve, either via the mobile app or offline, through text messages. So if you would send a piece of code in a text message, it would compile on the server and a reply would be sent with the output of your code or an error message if something wasn’t right.

For that, we thought we should create a new programming language, easy to understand for children. We called it Lilo (from Lilo&Stitch) and it complies to Python on server side and also maps to JavaScript on client-side. We thought of a funny and childish syntax for our new language. A variable would be a box, since you can store “things” in a box. Boxes will be labelled with names, just as a normal variable, will be manipulated and they would be able to store any type of object – numbers, strings, boolean values etc. Boxes are also resizable and can store more than one object. In terms of commands, to output something we defined say ‘..’, as a natural command to allow your code to say something. Instead of functions, we decide to call them dogs. A dog is usually called and can return something you’ve instructed it to. A dog knows how to do only one thing and when required, it “fetches” you what you need in your program. Moreover, a dog is happy to get called by you anytime you need it. Loops and conditional statements would stay the same in Lilo, while a line end will be marked by a dot, as it is easier to type in a text message than a semicolon.

The Lilo to Python compiler was written from scratch during the hack. For the SMS processing we used Twilio, a cloud service that handles this sort of interaction with the server. We’ve tested the system from multiple phone numbers and it always works, just like in my screenshot below. The hashtags #bc and #ec just stand for begin code and end code, needed in parsing the content of the text message for testing purposes.

image1

On the frontend side, when Internet was available, we created the Ionic app, with a simple interface for 9 basic lessons and Facebook authentication. Since it addresses children, we also integrated a story, based on Facebook’s sticker character, Biscuit. It would teach children how to code through funny stories. For example, to explain the loops, we imagined the student and Biscuit are playing hide and seek, so the student had to come up with a program in Lilo to count form 1 to 10. When we introduced box assignment, we said Biscuit is giving the student 2 boxes and they have to fill them in with their name and phone number and label them so that they won’t forget what’s inside. The code would be syntactically checked in a live code editor inside the app, CodeMirror, based on JavaScript. Also, the code was mapped client-side from Lilo to JS, so little to no server-side requests had to be made.

In addition to all this, on the app’s Facebook page, users can post a snippet of Lilo code and receive the output of the compiled code as a comment to their post. This is making use of Facebook APIs and scrapes the page for new Lilo code posts every 30 seconds.

Screen Shot 2016-03-14 at 14.13.16 (2)

Even though we didn’t win the hack, it was amazingly fun! My team was purely awesome and we had a great time hacking and sharing stories! The winning team developed a new Terminal experience for developers, enriched will all sorts of new features.

The project is available on GitHub and you can access the app here (it has bugs, we know, but it’s a hack!). Here are some screenshots and photos I took during the hackathon.

Screen Shot 2016-03-14 at 13.48.39 (2)

Screen Shot 2016-03-14 at 13.49.37 (2)

Screen Shot 2016-03-14 at 13.54.56 (2)

 12656380_1134440316575941_663079758_o

12837418_1134440249909281_1689714105_o

12837551_1134440193242620_400454583_o

12421960_1134440186575954_488610086_o

12381249_1134440183242621_1639220288_o

The aftermath:

12476637_1134452196574753_1834779591_o

The team:

12837637_1134440229909283_1476707630_o

12721961_1134440319909274_428935113_n


EnhanceConf 2016 London

Last Friday I have been lucky enough to obtain a scholarship to attend the EnhanceConf. Based on the concept of progressive enhancement in web development, the conference was the first of its kind and gather a set of incredibly good speakers.

The principle of progressive enhancement encourages developers to first build applications that are simple and have great performance on any device and browser, even offline. It then slowly builds on top of the basic requirements to add enhancements suitable for the newest devices, latest browsers and fastest Internet speeds. You can find Aaron Gustafson’s article for more details on the concept, as he coined this term.

The learnings I have gathered from this conference are incredibly useful for my final year project. The biggest challenge for me is to deliver the fastest experience on mobile devices with low processing power and slow networks such as GPRS and 2G. The size and the number of HTTP requests should therefore be minimised as much as possible, making sure users get all the features they need without wasting their time or data.

By far the best talk of the day came from Jen Simmons, a web designer and developer with great experience and ideas. Her talk was entitled ‘Progressing Our Layouts’ and emphasised the fact that we are able to create amazing online experience with little to no JavaScript, by embracing the capabilities of CSS. I realise we usually underestimate the power CSS has and how beautiful it is to simply design in your browser. CSS has great error handling. As she outlined, if a CSS rule is not supported in the user’s browser, it simply is ignored. Nothing bad happens if instead seeing a border radius of 5px, they’ll get a square. On the other hand, if there is one error in your JS, your entire website can be compromised. Of course, that is the point of JS testing, but it is a nice example to outline the difference of using JS for enhancing a website. I very much agree with her also on the unnecessary extensive use of UI frameworks nowadays. I know they make life easier for many developers, but they also make all websites look the same. They lose their individuality and gain page weight.

My other favourite talk came from Stuart Cox, developer at Potato London, gave a very good presentation on progressive enhancement and fighting fragmentation. He presented the link between features (core functionality + enhancements) and capabilities (browser, device, human). He proposed the use of atomic enhancements (small enhancements that are either applied fully or not at all), feature detection (check on the user’s capabilities) and grouping of features as modules. An overall great philosophy towards web development and application structure.

Forbes Lindesay (Facebook) spoke about server side JavaScript, React and shell rendering. Oliver Ash, web developer at the Guardian, explained how they worked on the offline page of the online newspaper with the help of service workers. Also, during the morning session, two other great talks came from Stefan Tilkov on web architecture and how to use the browser smartly and Anna Debenham, who has conducted an in-depth study on console browsers and their use.

Overall, this conference was a great learning experience for me. It offered me an insight into where front-end is at the moment and where it is heading. Hearing from professionals with experience in this field, made me realise how important it is to always stay updated with the latest trends, keep up with development and be flexible and open to new ideas, while still having your own set of principles. In a nutshell, to adapt.

The organisers have also created a website dedicated to Progressive Enhancement, where the community can find out about interesting developments and events surrounding this concept.


IT’s not just for the boys

Yesterday I have been lucky enough to attend an incredible event in London at Bloomberg’s Headquarters (amazing!!). It was, as you can see from its name, destined to undergraduate female students who study STEM (Science, Technology, Engineering or Maths).

I don’t even know where to start from. The agenda kept us busy all day long with loads of inspiring guest speakers, team challenges, insider’s insights, panel discussions, workshops and lots of networking. I left Bloomberg’s HQ yesterday much more confident, inspired, happy, determined, positive and of course, tired :) ). I believe I would like to experience such a day, everyday!

Not only did I find out more about important technology companies who are eager to recruit young and fresh minds, but I have also met some incredible students from various areas of study (e.g. Mechanical Engineering, Ethical Hacking, Theoretical Physics or Computer Science) with whom I have made friends in just a few seconds and we shared our experiences with the speed of light. We have promised ourselves not to leave the event without exchanging contact details to keep in touch.

Representatives from companies such as EMC, Bloomberg, Atos, Cisco, BP, Morgan Stanley, PA Consulting, HSBC, pWc, Vodafone and Sky, offered us the chance to ask all the questions we had about the job roles they offer, the application process , the assessment centers and how they see their perfect candidate.

Overall it has been, I say it again, an amazing experience! Any girls who are reading this article right now, there is another event just as this one taking part on the 22nd of November 2013. Here is the link to apply!


London, England

A week ago, I have just finished my lovely trip in London. Yes, I can never get enough of that wonderful city!Everytime I get there my mind says “Raluca, you want to live here one day!” – and I couldn’t agree more!

I don’t know what makes it so beautiful in my head but I feel like I belong and fit in there perfectly. If I’m not wrong, I believe this is my 6th or 7th time in London and I always manage to find new and interesting stuff to do there. And I am not even close to doing everything you can in London – I have still got loads of places to go to, loads of theatres to see, museums to visit and buildings to admire.

One of the most interesting spots in London this time has been the Science Museum, just a few minutes away from Hyde Park. Unfortunately, I haven’t been lucky enough to see the Web Lab exhibition hosted by Google – those guys were just packing up everything and telling me “We’re sorry, it was about time this exhibition was closed – it has been here for almost 1 year and a half!”. “Que dommage!” – a French man might say. Why haven’t I known about this? However, my sorrow has been eased by another exhibition about Alan Turing – Life and Legacy. Alan Turing (1912-1954) has been one of the pioneers of computer science, as well as a key codebreaker during the Second World War. He had an extremely interesting life and his ideas have shaped what we now use every single day – computers, laptops, tablets almost everything which has ‘a mind of its own’.

Now, this article is getting quite long so I might as well stop here, as much I would love to tell you more about the Science Museum, I can only truly recommend it to you, whenever you’ll get the chance to visit London. Below I attached some photos I hope you’ll enjoy (sorry for their quality – photographs are not one of my cornerstones ):

The pilot ACE computer

The pilot ACE computer

 

The Enigma Machines - used in World War II to send encrypted messages

The Enigma Machines – used in World War II to send encrypted messages

Mechanical Calculating Machine 1849

Mechanical Calculating Machine 1849

Computers in the 60s

Computers in the 60s

Big Ben from Trafalgar Square

Big Ben from Trafalgar Square

Saint Paul's by night

Saint Paul’s by night

the O2 arena

the O2 arena

Wembley Arena

Wembley Arena

Greenwich

Greenwich

On my way back home above the North Sea

On my way back home above the North Sea