Paxa Gården (roughly calling dibs on the youth club) is a project aiming to reduce the amount of administrative work spent on handling the booking of facilities and equipment on youth centers in Sweden. This web app allows youngsters and adults to quickly get a reserved time for any item or place in a minute or two, generating and handing out all contracts necessary for the booking to take place.

This app is developer by me, Jonathan Lundborg and Patrik Weibull, and has taken shape in deep collaboration with the city of Gothenburg and Lotta Johansson, responsible for its development and increase of young peoples participation in politics, activities and the society in large.

My work

My work on Paxa Gården has been to develop and maintain most of the JavaScript on the site, such as custom alerts and popups, modular forms and a rather complex calendar (based on the lovely jQuery Week Calendar) that fully integrates with the booking system in real-time.

I have also been responsible for the design of the site, including the logotype.

ProNordic also has a mobile version of the site, enabling visitors coming directly form viewing an ad or article about ProNordic to get the information presented to them in the best possible way.

The site is also multilingual.

YouCustomize also runs a blog about entrepreneurship, the hairstylist industry and product/marketing related topics.

The applications are designed, developed and managed by me. For some (rather hasty) previews of the app, you can watch Miniteve's promo video here.

• 6 levels
• Up to six different players
• Best Times chart
• Replays
• Ten bags of fun

TrojMa is built in Java and developed during a ten week part-time class in late 2009.

Note: The game is shipped as a .jar file

Trojma gameplay. This is from the last (and hardest) level Hail The Fame. Going for a really bad time, there.

Developed features and maintenance

• The web platform

  A WordPress installation tweaked to fit our needs as a video site. The main plugins that I have used are All In One SEO Pack and WP Favorite Posts along with analytics, sitemap and contact plugins.

  I also did develop a post packages plugin, with a user access feature. The plugin is not public at the moment.

• An optimized fork of the f4player Flash video player.

  What I did was to improve (limit) visual updating when scrubbing, add HD support, vastly improve the volume bar and add proper comments (yeez!).

  

  The Miniteve Flash video player

• An SMS-driven payment solution

  My client's main focus in our implemented payment service was to make it extremely easy to make a purchase. Therefore, I chose to use an SMS service (in our case Wobtel) where a user sends teve 1 to a short number to purchase a package of programs. If it is the user's first purchase, she is automatically registered as a user and provided with a generated password, enabling her to register and make a purchase in one easy step!

• Converting, compressing and distributing video

  All videos have to be optimized for streaming in order to reduce outgoing traffic loads and improve the users' experiences while still maintaining great quality, as well as for different devices such as the iPhone or the iPad.

• A smooth experience using JavaScript and AJAX

  . Since a video site has many thumbnails, programs (or posts), and in our case also program packages, to display, the user experience is improved by providing a modal box for package purchases and signing in, as well as More buttons, lazy loading and, of course, animating the sun itself!

In Stockholm, where I live, I knew about an Android hack and some annual hack that went off last autumn, but that was about it. Whilst all juiced up I had no plans on waiting some nine months to participate in it, so I decided to host my own.

To make sure people could and would participate I set the event to take place two months ahead, stretching over 36 weekend hours (including sleep). After two months and some hyping amongst me and my friends the hackathon was finally held in my apartment, and I'd like to share my experiences as host, first with some initial thoughts around the meet up and then with a list of tips!

The hack experience

My expectations vs. the outcome

I had no idea what would be the outcome of the hack, besides fantasies about awesome web apps that just sprung out of nowhere as long as we just worked and had a good time. As these dreams were all I had at hand, my expectations were, even though I rejected them, huge. Such expectations are seldom fully met, but I mean, it hazn't gonna kills me to get a bit disappointed. As it turned out, I didn't.

Although there are many things that I'll be doing differently and/or better the next time, I had so much fun! Even when totally stressed out I enjoyed myself. The final result wasn't finished, but hanging out with all the young folks and learning all the things I did was a solid comfort.

Hacking is learning intensified

I gained great amounts of knowledge in the 20-ish hours of programming that was the development phase. I'm about twice as comfortable with the *nix terminal as I was one week ago, and thrice the Git friend. As host and coordinator I also saw the many skills - tech or no tech - that 10 people can represent, as well as the broadness of my own!

10 things to think about

1. Provide a road map all the way to your doorstep

On the first day I had to guide 8-10 people to my apartment (which, by the way, is a bus trip and a walk away from the nearest subway). This is valuable time that could be used for mind-mapping and planning. See to it that you provide detailed road descriptions all the way to your door.

2. Have all participants arrive on time the first day

People have lives. As a result, everyone won't be able to show up at 10 on Saturday morning. That's fine, but waiting for all of them to arrive before choosing a project is dangerous. You might want as many as possible to contribute, but you'll be making a lot of time by declaring the first meeting as uninterruptible. Of course you should weigh this against the extended feedback you get from the extra ones arriving.

3. Make sure your project is doable within the given time frame

Our project didn't finish. It's nearly finished, but that's not sexy at all when Monday comes. I had a great time, but I would have preferred an up and running web app to a big, non-working app. When choosing between a clearly doable and a possibly doable project, I suggest you go with the doable one!

4. Aim for as little coding as possible

If the weight is on the developing (supposing the project is not a Java framework, a fork of jQuery or the like) most people that do not write code will probably find themselves useless, even if they aren't. The more people that are working on clear tasks at full speed, the more you get of the project. I think somewhat content based and minimalistic projects that mostly just needs programming to set it up is a fine way to strolleth upon.

5. Have all technicalities pre-installed

You do not want to start off the hack with hours of installing, debugging and (hopefully) fixing the development environment. For us this wasn't a big problem (we were only a small bunch of dead-on coders) but it wasn't that far from being one. The more attendees, the more time-consuming installations and configurations take.

6. Make sure your Internet connection is stable

You don't need to be online to draw a circle, but an unstable connection has a great sense of timing; it will wave you goodbye just when you're uploading stuff to the server or performing whatever task you hate being interrupted. And who doesn't get all cranky when your Internet access is all random?

7. Work with what you already or almost know

If you haven't got much time for the project there's unfortunately not much time to learn something brand new. We discussed using Python, for example, but estimations and time planning is impossible if you are to learn how to implement it first. If you do have implementation experiences, you will still have to debug it. (I remember debugging the "headers already sent ..." error in the early days. Could've been a dentist by now.)

8. Eat!

I cooked for three and a half hours the day before the hack, making two meals for 12 people. Key features of a happy worker is food, sleep and motivation. Since the motivation is already there, proper food, fruit and tea/coffee must nurture it. Always have something to serve!

9. Do some research before bringing your ideas

The clearer the vision you can make your comrades see, the more likely it is that a) it's a good idea and that b) it'll get chosen by the group. Also, devoting time to discus and vote for an idea (or even worse: spending those days developing a service) that already exists is pure waste.

10. Use a version control system, such as Git

Version control (Git in our case) is as wonderful as it is crucial for team development. For those who do not know what a version control system is can read about it on Wikipedia, on git-scm.com. You may also read this excellent quick look at version control using Git.

Bonus: Write a long list of rules and mottos that no one will read

This tip stands for itself. Rules are so much fun to stipulate, and the more serious you get, the more the fun! Having one out of twenty reading it makes you special space-dust friends.

Having a freakin' good time is all that it's about.

Roundup

If you're thinking of throwing a hack, do it! If you don't succeed with the project you will next time! I hope that the tips that was not totally obvious to you can be of help. Do you have your own experiences? Do you disapprove of mine?

Is you haet this article?

lewl

Teh code

The HTML markup itself is a <div> (or a <p> or whatever you want) with a class of glasses.

<div class="glasses"></div>

Here is the CSS that creates the shapes:

.glasses { width: 50px; height: 45px; margin: 45px auto; background: #222;
 
-webkit-border-radius: 10px 10px 25px 25px / 10px 10px 20px 20px; -moz-border-radius: 0 0 50px 50px / 0 0 10px 10px; border-radius: 10px 10px 25px 25px / 10px 10px 20px 20px; -webkit-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; }
 
.glasses:before, .glasses:after { content: ''; float: left; display: block; width: 250px; height: 200px; margin-top: -28px; background: #2d2d2d; }
 
.glasses:before { margin-left: -250px;
 
-webkit-border-radius: 70px 150px 100px 100px / 70px 30px 160px 130px; -moz-border-radius: 70px 150px 100px 100px / 70px 30px 160px 130px; border-radius: 70px 150px 100px 100px / 70px 30px 160px 130px; }
 
.glasses:after { float: right; margin-right: -250px;
 
-webkit-border-radius: 150px 70px 100px 100px / 30px 70px 120px 160px; -moz-border-radius: 150px 70px 100px 100px / 30px 70px 120px 160px; border-radius: 150px 70px 100px 100px / 30px 70px 120px 160px; }

And here is a little to pimp things up!

.glasses { color: rgb(41,41,41); font-family: "Lucida Grande", Tahoma, Arial, sans-serif; font-size: 11px; letter-spacing: 1px; text-align: center; line-height: 42px; }
 
.glasses:hover { color: #888; text-shadow: 0 1px 0 #000; }
 
.glasses, .glasses:before, .glasses:after { border: 5px solid #222; }
 
:root *> .glasses:before, :root *> .glasses:after { background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(50, 50, 50, 0.792969)), color-stop(0.5, rgba(0, 0, 0, 0.59375)), to(rgba(30, 30, 30, 0.496094))); background-image: -moz-linear-gradient( center top, rgba(50,50,50,0.8) 0%, rgba(0,0,0,0.6) 50%, rgba(30,30,30,0.5) 100%); background-color: none; }