Engagement/Developer Engagement/Hacks blog/Writing

Writing for Mozilla Hacks

THIS PAGE IS NO LONGER CURRENT. PLEASE VISIT the Hacks wiki for must current useful information for people who would like to post on the Hacks blog.

Writing in plain text or HTML

If you are writing a draft in whatever environment you prefer: write it in plain text or HTML and send to the Editor of Mozilla Hacks (mozhacks [at] mozilla [dot] com). We can also accept drafts writtten in Markdown. Once the initial draft has been received and accepted for publication, we will create an author account for you on the Mozilla Hacks blog. You will be responsible for adding and iterating from within Wordpress admin interface, with revision and reviewer support by the Hacks team.

NOTE: If you write directly in Mozilla Hacks' Wordpress instance, the WYSIWYG editor in WordPress produces very bad HTML, which reflects poorly on our expertise if people view the source of posts. So, please don't use it. There's even a profile setting, "Disable the visual editor when writing". If this wasn't set by whoever created your account, please go in and change your own profile, so you don't accidentally use the visual editor.

Mozilla Hacks author account

The Editor of Mozilla Hacks will set you up with an account. Make sure to have a bio ready and that your e-mail address is connected to a Gravatar. Additionally, please inform the Editor about potential website URLs, Twitter, Facebook and Google+ accounts you want to show with your profile.

Embedding media and https

The width of the content on Mozilla Hacks is 500 pixels. Make sure that images, embedded videos etc are adapted to that. If you want to add images to your post, please upload them to Mozilla Hacks and then reference their URL with an <img> element.

Note: Mozilla Hacks is being served as https so if you embed anything, it has to support https as well, due to Mixed Content Blocking. For instance, at the time of writing (April 26th 2013), YouTube and GitHub embeds supports https, Vimeo and jsFiddle doesn't.

Using code samples in your post

When you write code samples in your post, make sure to wrap code blocks spanning over multiple lines with <pre> elements. As described above, we use the GeSHI support to generate color highlighting for your code. To enable that, just use the lang attribute on the <pre> element, like this:

<pre lang="javascript">
    var URL = "https://hacks.mozilla.org/";
</pre>

For code formatting within text/paragraphs, wrap them with <code> elements:

This is some text about the <code>canvas</code> element

Note:

• Do not use <code> elements in code blocks wrapped with the <pre> element
• Do not escape HTML entities like <, > and & with &lt;, &gt; and &amp; in those code blocks

Another option is also embedding gists or similar. Note: it has to support https (see above).

Sharing code

When you write a blog post that contains code, please consider adding that code to the Mozilla Hacks repository on GitHub. That way, people can read, fork and easily work on that code themselves!

Installed Plug-ins

The following plug-ins are installed on Hacks:

• Akismet: spam filter
• Co-Authors Plus: allows multiple authors to be assigned to a post
• FC Pagination: Show numbered pagination instead of "Next page" and "Previous Page" (by Craig Cook)
• FD Footnotes: supports footnotes
• SEO Smart Links: helps SEO through auto-generation of links
• Subscribe to comments: lets users subscribe to comments
• Time Release: queues posts to publish after inactivity
• Twitter Tools: supports auto-tweeting articles
• WP-reCAPTCHA: integrates reCAPTCHA with WordPress
• WP-Syntax: Syntax highlighting with GeSHi: use <pre lang="LANGUAGE_NAME" line="1"> to highlight for LANGUAGE_NAME, with line numbers