Launching Q&A Website

In the next few weeks, I will be deploying and starting a new website. It's a Q&A website with focus on bureaucracy. It is localized in Portugal, so I won't be writing much about it on this blog.

I'll be using question2answer, which is a PHP-based open-source QA website. I will customize it and open-source that customization on github as well as a few fabric scripts I will use to test and deploy the website.

There is no kind of business plan yet. I don't really intend to make more money from it more than the amount needed to pay for the hosting, but this could change if I saw this really taking off.

As for marketing and getting people on this, I have started a Facebook page last week, with not too many people on it so far. I'm guessing I will need a lot of people to be there before I get to launch day.

Nobody wants to use an empty website. I have looked into how stackexchange launches a new website, and it's very interesting. They have the area 52 site, which is a staging zone where ideas are tested. People can commit to proposed sites and example questions are added. If a site is deemed good enough to launch, it goes into beta, and then becomes a full-fledged website.

I have to learn a bit more about stackexchange's process. I'm not too clear on the specifics.

Anyway, a simple "this is coming soon" + FAQ single web page is up in its future domain, papelada.pt

I never started any kind of website before, so this will be a great learning opportunity. I am looking forward to it!

It turns out...

That you really need to set your MIME types when serving your static media. Every nginx-as-a-reverse-proxy configuration file example for Django I have seen missed this point and made me waste hours figuring out why static media is loaded from the server (with http status 200 OK) but ignored by browsers.

Apparently browsers will ignore media files with the wrong Content-Type header.

The consequences of this when a server is misconfigured aren't always immediately evident; for example, consider an HTML page (sent out correctly as text/html) which calls out a stylesheet and a number of in-lined images: if the server sends these out with a wrong Content-type, then the browser might be displaying the HTML page's main content, but the browser has every right to ignore the offending stylesheet, or to omit the offending image(s) from the display: indeed a strict interpretation of the rules would say that it must behave that way. Faking the wrong Content-type from the server is potentially a way of compromising security, so there's a genuine reason for this rule being the way that it is.

So take care, and keep this in mind.

Media queries being ignored

Are all your media queries failing? You are probably just forgetting to add the meta tag. The code is as follows:

    <meta name="viewport" content="width=device-width">

Then you can use your media queries. They will work.

    @media (max-width: 800px) {
        .titleimg {
            width: 100%;
        }
        .wrapper {
            width: auto;
        }
    }

You will also want to keep in mind that tablet and smartphone vendors will lie about their device's resolution and physical size. This is because of display density differences among devices, and between these devices and the desktop.

You can read more about this on quirksmode.

A cute service

The guys at {placekitten} have made this simple, but cute, service. It's intended for developers like you and me, who don't have many pictures laying around on their hard drive.

When in need of a quick example image, you can hotlink to them and get a cute kitty as a placeholder :3

Here is 200x200:

I found this especially useful in jsfiddle, since you have nowhere to upload your images.

Just make an <img> tag and set src to the following:

    http://placekitten.com/{ width }/{ height }

And replace { width } and { height } by the width and height of the desired image.

Apparently a trailing slash makes your image a square, so if you get a square you know what's happening.

Their kitty pictures are really tasteful and cute. They vary according to the size of the image you requested.

Periodic table of HTML5 elements

A very interesting and helpful link from Josh Duck:

http://joshduck.com/periodic-table.html

It contains all HTML5 elements, formatted in a table that looks much like the Periodic Table of the Elements. It is very nice and informative to look at all of them, grouped into categories.

Find out a couple of new elements, and use it as reference, since every element in the table has links to helpful documentation on MDN and the formal declaration in W3C when you click them.

The little form on top lets you count elements used in any published website. Detect divitis!

Timetable selection snippet.

I have put together a simple timetable snippet for helping keep track of time, or to do time allocation of some resource.

Check it out on jsfiddle:

This is a jQuery plugin. It works by converting a table with checkboxes inside each td into a time planner. It does this by moving the checkboxes away from their td containers into a div inserted below the table.

Here is that DIV's HTML. As you can see it has all the checkboxes from every cell.

    <div style="display: none;" class="timeplanner-checkbox-dump">
        <input type="checkbox" checked="checked" name="0-0">
        <input type="checkbox" name="1-0">
        <input type="checkbox" name="2-0">
        <input type="checkbox" che...

Then it routes the events of each td into its containee checkbox. This is done by using an annonymous function for each td. In a jQuery.each loop I declare var checkbox_here, (so it is different for every closure) and then just do $(checkbox_here)-click() in the click event handler for the td.

Creating my new employer's website

Been a while since I posted.

What I've been doing:

Both at work and in my spare time, I've started messing around with the Android SDK, and am planning a small mobile app. I'm usually very concerned with the UI aspect, so I believe I'll make something good and useable.

I've changed jobs, and my previous bosses at António José Moreira decided that I wouldn't get paid for my work in the month of January. They state that the work was being done on a per-objective basis and that they haven't been satisfied with my work. However, they always paid a constant monthly salary.

Working at António José Moreira was a challenge, but I was always aware of their ruthless nature. As a company, they never cared for the well-being or satisfaction of their customers, or even cared to pay their suppliers or service providers at all.

I doubt that they will pay my salary willingly. However I have earned my pay with hard work, and I'm determined to get it.

My new company and their new website

I work at a company called Descontel Consulting now. They are a small company with less than 20 employees (Not sure of the exact size though).

I've already made their new website. I used Joomla! CMS for the first time, and I must say it was fun customizing a template and making it work with all the components.

First I created the above image (grayscale helps me focus on organisation of content rather than how the page looks like)


Then I was asked to take Twitter off the top of the page, so I decided to make the above 3-column layout. The black thing to the right was a screenshot of the Twitter plugin I thought I was going to use.


After that, I colored it and started coding the HTML


No programming was involved, since everything was handled by Joomla. My work there was just creating the template, planning and organizing content and a lot of HTML and CSS. I used this great jQuery plugin for the slider up on the top. The site currently loads the jQuery library twice, though, because of the twitter module. I'm going to have to optimize that.

I had to support Internet Explorer 6, and I did so using a second stylesheet and a conditional comment in the page header.

Like this:

<!--[if lt IE 7]>
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/css/style_ie6.css" type="text/css" />
<![endif]-->
It does make the browser download another stylesheet, but it's not a big one, and I didn't have the time to support IE 6 properly.