Information

How to Create a Publication

The most important thing on the website is content. On practice you can place almost any format: a small preview and a long overview, an interview, a photoreport, an event broadcast, a lesson, and much, much more. Quite often the success of publication depends on its design. Pleasantly decorated material is a pleasure to read. Please see the helpful tips on the design of the material.

Tools

Despite the fact that we have an auto-save function on our site (works through localStorage), write materials better somewhere else, and then after all the edits, post to the site. One of the most convenient tool, including teamwork is all known GoogleDocs. Although, in general, any text editor will fit.

These options are preferable for at least three reasons.

• They do not depend on LocalStorage and the text will not accidentally disappear anywhere, it is also accessible from any device.

• You can work on the text for a long time, bringing it to perfection.

• Presence of tools for the design of the text allows you to see the publication as it will be.

• For the following transfer of material, you can use converters, for example, this one.

Text

There are the same forms of writing a publication on the site - a regular editor with a preview. For writing, you can use plain text that can be supplied with HTML-tags. Often (especially in the Sandbox) you can see a text in which authors try to use CSS styles, write paragraphs with a paragraph tag, write tags for links and so on, all this is superfluous, do not "pollute" the publication with code that not interpreted by the site. Just try to play with the form of the publication a couple of times, not forgetting to use the preview button to evaluate the results. Well, for now, a few tips.

• Paragraphs

  Do not insert texts with a single sheet. Accidentally scrolling the wheel (or sloppy touch to the tablet) and that's it, you've already lost the place where you read it. Divide the text into small paragraphs, a few sentences each.

  The paragraphs of the text can be separated by pictures. This is very good, if they are also relevant.

• Hedlines

  On the site as in HTML-markup, 3 levels of headings are available: the largest (H1), the smaller (H2) and average (H3). Use them to structure the text: the largest one is to highlight the main sections, the smaller headings are subsections, etc. The headers should make clear what is before you - the section of the publication or part of the section. Do not make headings only for headings.

  By the way, headings (as well as plain text) can also be painted with a font color tag (a tag, not a css-style!). Corporate clients were especially fond of this approach to design, coloring headlines in corporate colors. This option is good because it even more emphasizes the header on the background of a black and white sheet of text.

• Links

  Do not insert long links directly into the publication text. Tie them to a word.

  Insert links to the materials used in the publication (other publications on Habr, articles on Wikipedia, etc.)

• Special tags

  Learn the tags available on thesite. Among them there are many useful. For example, if you use any rare abbreviations in the publication, why not decipher their meaning using the abbr tag?

  Pay attention to the difference between the "source" and "code" tags. "Source" inserts a block element with syntax highlighting, while the "code" inserts a string element (in fact, just a monospaced font). Accordingly, there is no sense in inserting several lines of code into the code tag - it will look ugly, merging with the main text. "Source" tag will fit perfectly for this case.
  Not everyone knows that there is support of tables, including the ability to combine rows and columns. You can not set the thickness of the border or the background color of the tables, but you can use images and text with the same formatting inside them. If you approach it responsibly, it will turn out beautifully. It is possible to insert the table and a picture, but so it is not indexed and so it will be more difficult to change something in it.

  There are many other tags: for mentioning other users (for noticing them in their tracker), for inserting interactive twitter-cards, etc. The "Spoiler" tag is used to hide some information, but at the same time that it is available after the click.

Why is it cool?

Most often this is necessary to fit more information into one publication, but that the publication itself does not seem bloated. In spoilers, you can hide useful information. For example, technical characteristics in the review of the device or the operating principle of some algorithm. Thus, those who need information will be able to look at it, and everyone else will not be bored by it. Also, this approach avoids throwing the user to external sites (Wikipedia for example), which is especially useful when reading a publication from a mobile device.

Images

All images from Habr are stored on the Habrastorage service - a special resource for storing pictures. Even if you insert images from an external site, they will still be reuploaded on Habrastorage to be available even after years. Upload your pictures directly on the service - it is very convenient.

All large images are automatically scaled by means of CSS, so that the layout of the site is not dispersed. That is, you can insert a FullHD-screenshot, but on it, most likely, nothing will be seen - do not be too lazy to make the picture clickable, specifying a link to the full version of the image.

• Choosing the proper cover image

  The fate of the publication and mood in it's comments often depends on the choice of cover picture. There is nothing more boring than the brand logo; use something more vivid and juicy that will attract attention. Humor and memes are welcome, but everything should be in moderation. If everyone is tired from some meme and you understand that it is not very appropriate, then it is better to look for another picture.

  When creating a publication cycle, it makes sense to use the same picture before cut. Then those, who liked the previous publication from the cycle are likely to read the new part.
  

• Screenshots

  For Mac users it's very simple. Steve Jobs himself told us to use "CMD + Shift + 4 + Space" to make beautiful screenshot of a window with shades. For Windows- and Linux-users there is a huge amount of various utilities and methods for every taste.

  

  Some nuances:

  • If the screenshot is very large, then most likely, it does not fit entirely into the publication. In this case, it is easier to make it clickable, so that by clicking on the thumbnail of the picture a full screenshot opens. Do not forget to sign that the picture is clickable.

  • If you insert a screenshot of a part of the window, then with a high probability of a screenshot there will be text, perhaps even black and white, as in the publication. In this case, the screenshot can merge with the text, so do not be too lazy to make the image frame that will clearly separate the picture from the text. In Photoshop it's a couple of clicks: layer settings → stroke.

  Do not insert JPEG-screenshots and PNG-photos, this will be metnioned in comments after all. As well as pictures of terrible quality should not be used.

• Text wrapping

  If you use a small picture in the publication (less than 300–400 pixels in width), then on the sides of the image there will be empty areas. To get rid of them, you can assign the align attribute to the picture with the value "left", "center" or "right". To avoid doing a few line breaks, use the "clear" attribute. All images can be set with the width and height attributes.

Other tips

• Learn the tags available on the site. The same publication can be drawn up in different ways. If the publications on Habr are a part of your portfolio, then do not be lazy to spend a little time on the beautiful result.

• Pay attention to how other users make out the publications. Many examples are published almost every day.

• Pay attention to the indentation. At different objects they are different: the headers have one indent, a picture or a tag with a code - another. It's ugly, when there are extra line breaks in the publication, and the pictures "stick" to the text.

• Use the spelling / printing tool. Dashes, quotation marks, etc. is at your discretion. But no one likes mistakes. Correct at least what the browser emphasizes.

• And most importantly - use the preview. Many times unfinished publications, with system notes or without pictures were posted.

Habrahabr Flavored Markdown

When writing publications and comments on the site, you can use HTML or Markdown to choose from. It is important to note that we support "Habr Flavored Markdown" (abbreviated HFM) — it extends the traditional Markdown with several significant differences.

If you are not familiar with Markdown, it's worth taking a look at Markdown basics.