Last year was an amazing experience. For the first time I had given 100% not only to preparing a conference but also to run it during the day. I missed all of the sessions, except a couple, but I definitely enjoyed being there, it felt like being part of the future

One thing I noticed was that, while we put had together a very Browser-focused conference (by inviting Browser Representatives to talk about the new and upcoming features) a few designers were there and I hope that they were able follow the main talks. I am not implying designers might not be knowledgeable about browser/HTML/CSS but that I am the first one that is working with them on a daily basis but feels like she don’t really know what’s “under the hood” and that knowing this might actually help her improve her understanding of HTML, CSS, HTML5, CSS3 and JavaScript.

So the other day I thought we could prepare whoever wants to come to the next State of the Browser to what’s ahead of them by putting together a “preparation event” the month before, at one of the monthly London Web Standards nights.

Since then, I’ve been trying to think what would a “browser newbie” need to know before she can attend State of the Browser. I wanted to watch all the past videos, but I also wanted to hear the opinion of our past speakers and of anybody who could help putting together what I think could be a very interesting and useful talk for anybody willing to learn more about how the browser and the technologies used in it work.

This is what I’ve got so far (taken from what seemed to me a very useful page http://taligarsiel.com/Projects/howbrowserswork1.htm

• The Browser high level structure
• The rendering engine 
  • The main flow
  • Parsing and DOM tree construction
  • HTML Parser
  • CSS Parsing
  • Parsing Scripts
• Render tree construction
• Layout (without going into all the CSS concepts like the visual models)
• Painting

Then I also thought of

• Local Storage
• Offline Cache
• Web Sockets?
• Geolocation
• Web Workers
• Security
• JavaScript on the Client side?

I would like to know your opinion – is there anything you would not cover, or anything else you would add? I would really appreciate your help

0. Don’t be scared/shy

I don’t want to hear any excuses ”but I’m only a designer, I can’t code”. Nobody will witch hunt you for that. There are coders like me who are a rubbish architect, or/and a useless project manager or/and a hopeless designer. I need all those skills in order to produce something solid and pretty so please come to hack days and form a team where your skills will be definitely in need. I know there will be downtime, but it’s part of the challenge. “I don’t know anyone” – I’ve gone to hackdays literally on my own. No team, no friends and yet I’ve met the most interesting and kind people. It’s a social event (even if at the eyes of most non tech people it’s not social at all) so people tend to speak to you a lot easier than possibly in a bar or cafe (ok, I might have exaggerated a bit on the bar comparison). Plus you’re bound to bump into a Twitter acquaintance to which you will be able to finally put a face against “I only code when I get paid”. Although this one could be a respectable reason, I truly believe that there is so much value you can take from a hackathon. If you want to learn something new it’s a unique opportunity to do so. I remember the lovely and most patient Daniel Knell and Chris Lockteaching me how to use Zend; the Facebook engineers being on site (lots of them) to explain in details how to use the Graph API. the ever so patient Twilio devs helping me setting up a call and text messaging through their API. I learned skills I can now use in my day job and get paid more because I know this new stuff! And if your idea is really good you might land some funding! VCs and press often attend hackathons!

1. Pitch your idea

Do you have an idea already? pitch it to a few friends, techy and non. Do they honestly think it’s a good idea, or just useless? At hackathons I’ve seen spectacular ideas win, as well as quirkiest ones, so it’s not as if only the most useful ideas win…

2. Don’t start before the hacking time begins.

It’s rude and unfair. Although I think some people must come in with some sort of “basic codebase” they can then adapt. In a way, I recommend this and I will definitely try to do this next time. Not to bring something specific to the hack, but a working base. For example this could be the previous hack you have built, maybe stripped out of specific modules, but you know you will need (I’m making an example using Zend Framework) a user model and a database model, so you might as well keep those. Whatever you do think very carefully, I’ve spent hack days where I got nowhere because I wanted to build my hack in Zend (just to learn more about it) and got really anal about setting up models and controllers the right (hopefully, all part of the learning curve) way. Whatever you bring don’t cheat, start when you officially can start, it’s more fun and deep down you know you will have won (hopefully) in good faith.

3. Form a team

Idea or no idea, try and find some friends/colleague to team up with. I usually go to hackathons on my own because at times I just go to play around with a new technology and learn something new and therefore get lost in the learning process and don’t really finish what I build. But to make the most of it, form a team with skills that complement each other. If you can’t find any friends of colleagues then post a message on Twitter with the event’s hashtag and ask to be retweeted, or post a message on the event’s meetup page/facebook page/comment area, etc. You can also form a team on the day. There is usually a shout-out for “people with skills but no ideas”, or “people with ideas but missing skills”.

4. Don’t choose your hack just yet

I might be explaining something you already know, but at hackdays there might be rules on what to build (or not). There mostly will be categories i.e. “the mobile app that uses both Spotify and Last.fm’s APIs” or “best for children” etc. Each category winner will get a prize (could even be a tablet or a phone!), so there is not only an ultimate winner, but you could aim to win one of the categories. So before you set on an idea, wait until all the sponsors/categories owners have pitched their request. Some of them will want a problem solved i.e. “build a Spotify app that works with food” or “build an archive of music videos pre 1990s”. Then make your decision.

5. Look at the available APIs and datasets

This should give you an idea of what you can actually build. On the day be really careful about the dataset you choose. When deciding which of your ideas to build, the API/dataset you chose could have a big impact on your work. APIs are usually safer, but still check that the API has an endpoint for what you are looking for. I once decided on a hack to then discover the API was not actually exposing the info I needed. APIs usually come from the sponsors, so there should be a list on the event’s site. Datasets are less safer. I’ve been at hackdays where the data was in a very messy Excel file and was only available for a small part of London. Not only I had to clean the data, but to then discover that to obtain the rest of the data I had to go to the Fire Brigade’s Archive and manually consult some record books. Only having part of the data made my hack kind of useless. Some companies/organisations have provided datasets in PDFs (!!!) or messy Excel file, so if you decide to use this data you will have to import it in a database and I’ve seen hackers spending HOURS doing that blocking the progress on the hack. So at least bring an CSV reader script as a base.

6. Think about where and if to store the data.

What data do you actually need from the API? If the hack is just a quick one then querying the API on every page load won’t hurt. But think about  daily/hourly query limits, the last thing you want while building and testing (yep, happened to us) is to be blacklisted from an API provider who will not be on hand to give you unlimited access for the day/weekend (the sponsors who provide APIS will instead be on site and able to whitelist you, just ask them). So think of all the data you need and only put through a request when you have a spot on query – I know this is hard, but ask some help and work on the perfect query on paper. Then cache your request or save it against the current user in the database. Or if you need for example, a list of venues, make a search query once, then write a script to save it into your DB. That way you don’t have to make a query to API any longer.

7. Plan

I don’t know quite how much to stress this, but I’m a rubbish planner, I’m an impulsive coder, so I will just follow the flow rather then architect my hack. So don’t waste your time like me, plan everything, write wireframes, think of all the options.

8. Eat healthy

I know it’s easy to be glued to the chair/bean bag/bench/floor when you are deep in code, but if you want to be productive you have to eat. So when dinner/lunch are served take a deep breath and go get some. It’s also a great time to socialise, find some help for something you are stuck on and your break will really help you going back refreshed. There will be TONS of sugar snacks and drinks. Watch it. I’ve spent hack days surviving on sugar and felt so ill on the Monday. Eat fruit and drink plenty of water.

9. Prepare an awesome presentaion

It’s essential that you take at least an hour to prepare for your presentation. Appoint the best person for the job. Ideally you want somebody with a sense of humour, with a clear and loud voice. You only have about a minute and you have to use it wisely. I am no expert (I have indeed pitched and forgot a big bunch of features I was meant to mention and made jokes nobody laughed at – that was really hard to accept) but the trick is just to plan it properly and write a simple speech. Imagine you have to explain how your hack works to a very non techy person. You must have spent the last day building this so you might be very comfortable and knowledgeable on how to use it, but remember you are presenting it to complete strangers who will have to judge your work.

10. Test, test, test

Most importantly test your demo. Demos is where it can all go wrong. Try it many times before you go on stage, you won’t have time to wait for it to load…   Excited? Then come to Titanium App Camp, an uncoference and a hackathon on the 2nd and 3rd February!

The scary bits

The scariest thing (it would appear to be) is that I have left a permanent job and went Freelance. When I did it I was not scared. The work has come in regularly and I have not been without work for longer than a week. Except now. And for the first time I am scared I will not find something.
I should definitely write a separate post on encouraging people on starting contracting in Web Development, but I am not sure some employers would appreciate me pushing some permanent employees to do the big jump…
Anyway it was the best decision I’ve made in ages. I am free, I get to meet lots of people and work on new stuff on every project.
The downside? You’re on your own. If you are stuck with a bug or a problem, there is no team mate or experienced boss you can ask help. Luckily in the era of the social media, I have been able to Tweet for Help and some vey nice people have looked into my troubles and offered me a hand.

Thank you

I also did lots of other scary things…

I’ve gone skiing for the first time and challenged my fear of heights and of skiing.

I’ve started to learn how to drive and discovered how hard the practical exam is. Or, excuse me for saying this, how much a big business it is – I am now on my third attempt, feeling very comfortable and able while driving, but still failing the test on very small things – OK I could do with improving my behaviour on roundabouts, so hopefully I will past next time…

I have had my first minor operation, under sedation, of course. I am so scared of any medical operation. When I ask somebody “how painful is that operation?” everybody seems to say “it’s the pain afterwards the worse part” and I’m like “I don’t care how much painful it is afterwards, I am scared about the pain I will have DURING the operation.
So after begging my dentist to get a tricky wisdom tooth out under sedation, I had the best experience of my life (except for the students repeatedly failing at performing a smooth intravenous injection): literally, as soon as the drip got into my body I was completely out. I “woke up” (I was always conscious, just in a happy place somewhere…) not remembering anything but most of all not feeling any pain and/or sign of having received an operation.
What struck me though was the fact that I somehow performed Jingle Bells with the aid of the beeping heart monitor… So definitely repeating an “under sedation” any time soon.

The nice bits

I got engaged! Which I never thought would happen AND to the best soul mate ever, so how could I ask for more?

The one thing I really enjoyed this year was organising State of the Browser for the second time. I loved every hard worked/ing second of it. I loved contacting the sponsors, getting all the speakers ready, attending amazing sessions by the best in the industry (like my favourites Bruce Lawson, Martin Beeby, Pete Gasston – it is quite a thing to bring your favourite speakers to a conference you are organising!) and most of all I loved working together to the other amazing organisers of London Web Standards. I’ve never worked with such enthusiastic and caring volunteers.

The sad bits

On that note I have made the hard decision to leave my role as band manager of the folk band Amaraterra and of Vice President of the Apulian Association Friends of Puglia. As a volunteer, organising tech conferences for 175 people seems to be much easier and to be bringing so much more happiness to me than to organise small events for a bunch of Italians.

So what will 2013 bring me?

Oh..I’ve only got 2 conferences and 1 wedding to organise on my cards…FOR NOW…I am sure it will be amazing but challenging.

So help me by attending both, they are free!

Titanium App Camp, 2nd-3rd February http://appcamp.londontitanium.co.uk/

State of the Browser, April some time http://browser.londonwebstandards.org/

I also plan to pass the bleeping driving test (one day…), to organise the most eclectic wedding, to finish two hacks, tour the Mekong region (that’s already booked so THAT’S definitely happening yuhuuu) and possibly start wearing contact lenses (I need to overcome my fear yet…).

Happy 2013 everyone!

First of all before you read further, I think you should consider your Google Group settings – public or private? If you make your group private (members only, so users have to apply to get access to the group content) you won’t be able to expose it to the public and this works also if you embed it. The same should stand for exposing the group through API but I have not tested this yet, in this post I will only cover plugin or code embedding.

So if your group is public then you should read ahead. The first option you have, for example if you’re only embedding one group is to just add the code on this page on your post or page changing forum-name to your group name (which you can find in the URL of your group i.e. the “angrybirdsdaylondon” in https://groups.google.com/forum/#!forum/angrybirdsdaylondon )

<iframe id="forum_embed"
 src="javascript:void(0)"
 scrolling="no"
 frameborder="0"
 width="900"
 height="700">
</iframe>

<script type="text/javascript">
 document.getElementById("forum_embed").src =
  "https://groups.google.com/forum/embed/?place=forum/forum-name" +
  "&showsearch=true&showpopout=true&parenturl=" +
  encodeURIComponent(window.location.href);
</script>

Before I take you through a few extra options, you should know that if your group belongs to an organisation then you will need to specify that in the settings. If you don’t you’ll get an iframe populated with posts on sex and viagra and you so don’t want your client to see that, right?

The setting you need is

So you can personalise the output by adding the following settings to the URL i.e. https://groups.google.com/forum/embed/?place=forum/forum-name&domain=yourdomain.com&showpopout=true&theme=default

• showsearch: whether to show an embedded search box on destination forum pages. (default is false)
• showpopout: whether to show the “popout” button which lets the view be expanded to a full page, on destination forum pages (default is true)
• hideforumtitle: if you want to show the forum title and description, false if you don’t want to show the title or description (default is true)
• hidesubject: if you want to hide the subject of the last post in My Forums view, false if you want to leave the subject visible (default is true)
• showtabs: whether to show tabs for changing views (e.g., to the Members view), on destination forum pages (default is false)
• width: the width of page (default is 100%)
• height: the height of page (default is 800px)

Your other option, especially if you want to display multiple groups or different groups in different pages and posts, is to download Odyno Google Groups made by a fellow Italian, Alessandro Staniscia.

The setup is very easy. You just install the plugin then you add the following shortcode to a page or post, just swap “name-of-group” with your group name:

[google_groups name="name-of-group"]

The same settings as above apply to the plugin too, for example from Alessandro’s site

[google_groups name="mixare-development"  width = '100%'  height = '800px'  showsearch = 'true'  showtabs = 'true'  hideforumtitle = 'true' hidesubject = 'true']

The setup

Create a new Category if you have not already in Posts->Categories. Let’s call it “events”

Add your posts to the “event” category, then retrieve the category ID from clicking on Posts->Categories on the left hand admin menu. When in Categories click on the category “events” and in the URL you will find the ID – make a note of it.

http://morenafiore.com/wp-admin/edit-tags.php?action=edit&taxonomy=category&tag_ID=18&post_type=post

There’s an easy workaround

In your Events template you will have to run the normal query to display the title and text you might have inserted in your Events page

(this is my version)

<?php if ( have_posts() ) : ?>
<header class="entry-header">
<h1 class="entry-title"><?php the_title(); ?></h1>
</header><!-- .entry-header -->
<div class="entry-content">
<?php the_content(); ?>
</div><!-- .entry-content -->
<?php endif; ?>

Then start 2 queries, one for the future events – place the category ID you made a note of instead of the number 18 below:

$future_events = new WP_Query("cat=18&post_status=future&order=DESC");
if ($future_events->have_posts()){ while ($future_events->have_posts()) :$future_events->the_post(); ?>
<article id="post-<?php echo $post->ID; ?>" class="event_post">
...
</article>
<?php endwhile; } ?>

And then a second query to show the old posts - place the category ID you made a note of instead of the number 18 below

$old_events = new WP_Query("cat=18post_status=publish&order=DESC");
if ($old_events->have_posts()){ while ($old_events->have_posts()) :$old_events->the_post(); ?>
<article id="post-<?php echo $post->ID; ?>" class="event_post">
...
</article>
<?php endwhile; } ?>

Bear in mind that unfortunately when using get_permalink() the link, even if correct will redirect to a 404, unless you are logged in. So to get round this problem, just add this to your functions.php and even posts in the future will be exposed to users.

add_filter('the_posts', 'show_future_posts');
function show_future_posts($posts)
{
   global $wp_query, $wpdb;
   if(is_single() && $wp_query->post_count == 0)
   {
      $posts = $wpdb->get_results($wp_query->request);
   }
   return $posts;
}

Sorted!

It does not matter where you put your form

I researched a bit to see what the problem was and initially thought it was maybe the fact that I had put the form in a partial, a content-something.php file, could it be that it needs to be in a template? So I moved it higher up in single.php (in my case) but still nothing.
So I changed the action of my form and pointed it to a template file and created a page for it in the WordPress Admin. Still nothing…

The secret is in the name

Woke up this morning willing to look at this with a fresh pair of eyes and as you do the solution just landed on my screen (more on my search results list) – it’s amazing how you’re stuck on something one day, you call it a day, you start again in the morning and the solution comes so quickly…

So why was it not working? Don’t apply any crazy workaround and fiddle with .htaccess, the trick is just not to use the value “name” for any of your input fields name attribute!

So instead of

<input type="text" name="name" value="">

use

<input type="text" name="myName" value="">

I know, a bit weird, but it’s because WordPress has reserved that value. Also avoid using ”day”, ”month”, ”year”, ”hour”, “date” and “minute”.

Hope you found this quickly enough and that you have not wasted hours trying to work out what was wrong!

I then stayed for 8 months (!) and worked on the app emails, added Analytics to them and also integrated the results for open rate and click throughs to an internal tool. I then helped the Front End team implementing a few features.

I loved the Startup ambience and the Agile fast shipping pace. I really enjoyed working with the Marketing team, I was fascinated by their scalability work and got introduced to MongoDB.