Similar to #19, except this time it’s the HTML content that needs to be imported. Also, leading whitespace must be removed (else Markdown parser thinks it’s all preformatted code blocks) except within <pre> elements.

I’ll do this. Any volunteers willing to go through the articles after that and clean them up (i.e. fix links and references to images, etc.)? @brucelawson @shwetank? (Only asking cause I’ll be preparing a talk + traveling later this week.)

We need to have a 404 page.

Right now we have this description:

Dev.Opera is the ultimate source of distilled knowledge for web developers, covering the latest open web technologies and techniques including HTML5, CSS3, JavaScript, SVG, optimizing content for mobiles, tablets and TVs, and creating add-ons such as extensions and themes for the Opera browser.

Which is too much even for Google:

Should we update it to be less SEO? Just one sentence, something better and more relevant. Something that could be used in RSS feed.

Some examples:

HTML5 Rocks

A resource for developers looking to put HTML5 to use today, including information on specific features and when to use them in your apps.

MDN

The Mozilla Developer Network (MDN) provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS.

1. Add missing link: URL fields to front matter in authors/_posts/*.md
2. Put missing first-second.jpg (256×256) files in authors/_posts/

The current favicon.ico looks blurry and pixelated on high-res displays. It should be at least 32×32px.

If you need/want a user account (needed to deploy and for ssh access), post a comment here containing the following:

• your desired username
• your public key(s)
• are you gonna need root access or not?

Users added so far:

• mathias
• pepelsbey
• shwetankdixit
• odinho (for @velmont)

Adding a new user (note to self)

sudo su;
adduser "$username";
passwd "$username";
visudo; # add `$username   ALL=(ALL)    ALL`
usermod -a -G wheel "$username";
usermod -a -G www "$username";
usermod -g www "$username";
cd "/home/$username";
mkdir -p .ssh;
chmod 700 .ssh;
vi .ssh/authorized_keys; # add public key(s)
chmod 600 .ssh/authorized_keys;
chown "$username:$username" .ssh;
chown "$username:$username" .ssh/authorized_keys;
/etc/init.d/sshd reload;

Such as:

my.opera.com/*
snapshot.opera.com/*
people.opera.com/person/*
tc.labs.opera.com/*
widgets.opera.com

All of them should be at least removed as active links and kept as a text.

Something like this:

• Redirect all /articles/view/* to /articles/*
• Apply redirects for the slugs list (list is not finished yet)

@andreasbovens, do you have current statistics for browsers on Dev.Opera? I wonder what kind of browser support should I provide in the new Dev.Opera code. For example: should I care about IE9 and give serious fallback for multi-columns, etc.

This probably requires a lot of manual work (up to 217 articles from “yes” list).

Possible task workflow. Feel free to automate it.

1. Run git clone [email protected]:operasoftware/devopera.git to clone repository to devopera folder
2. While it’s running log in to Dev.Opera
3. Once cloning is finished, go to articles/_posts folder
4. Open MD file, copy title: field, Google it and go to article
5. Click “Edit article” link at sidebar
6. Copy contents of “Introduction” field
7. Add new intro: field to MD file with copied text
8. Repeat from 4 with next MD file

Intro contents should be in MD format (square brackets for links, backticks for code, etc.) and quoted, preferably using single quotes '. If there are single quotes inside: didn't replace them with apostrophe didn’t (which is Alt Shift } on Mac).

There are also translated MD located in articles/LANG/_posts folders. You could take care of your favorite language.

Example for “Understanding 3D Transforms” article:

---
title: Understanding 3D Transforms
authors:
- tiffany-brown
intro: 'In this article we’ll dig in to 3D transforms in detail,
looking at the fundamental differences between 3D and
2D transforms, the 3D transforms available, and some
demos that show how these work.'
tags:
- css
- css3
- transforms
layout: article

---

Such as used in introduction-html5-video article.

Sub-tasks (75 items each)

#53 (comment)

Running "sass:compile" (sass) task
Syntax error: Invalid CSS after "... unquote(".") ": expected selector or at-rule, was "!global;"
on line 150 of styles/grids.scss
from line 11 of styles/screen.scss

Currently we have following feeds listed in Dev.Opera header:

/feeds/rss/articles
/feeds/atom/articles
/feeds/rss/comments
/feeds/atom/comments

I guess there will be no comment feeds and there’s no need in two feed types (in most cases it’s detected automatically by Feedly or any other service). Let’s just redirect all of them to /feed/. Commit moving atom.xml too feed folder will be ready soon.

Assigning to redirects guru @mathiasbynens ;)

I have to set up a custom search engine and template.

See decision taken in #27.

There are few blog posts in blog/_posts folder with non-English content (not translations as in articles’ case), I found a few but there are more (Chinese, Japanese?):

blog/_posts/2010-06-25-html5-video-artikel-und-wettbewerb-auf-chip-de.md
blog/_posts/2010-10-12-schone-neue-welt-von-html5-webtech-2010-mainz.md
blog/_posts/2011-10-31-handys-und-tablets-webentwicklung-jenseits-des-desktops-webtech-mainz-12.md

It could be done in following ways:

• Analyzing post slugs (it could help with German as you can see above)
• Get all posts by certain author: German for Patrick, Chinese for Zi Bin, Japanese for Karl and Daniel, etc. (search by author slug bruce-lawson)
• Surfing through all posts and quickly analyzing language

Once post is found — delete file and commit deletion.

There are 13 articles in TV section on old Dev.Opera:

1. http://dev.opera.com/articles/view/creating-tv-store-icons-thumbnails-and-screenshots/
2. http://dev.opera.com/articles/view/creating-web-content-for-tv/
3. http://dev.opera.com/articles/view/opera-tv-store-app-templates/
4. http://dev.opera.com/articles/view/building-applications-for-the-opera-tv-store/
5. http://dev.opera.com/articles/view/design-considerations-for-opera-tv-store-applications/
6. http://dev.opera.com/articles/view/testing-your-app-inside-the-opera-tv-store/
7. http://dev.opera.com/articles/view/opera-tv-emulator/
8. http://dev.opera.com/articles/view/functional-key-handling-in-opera-tv-store-applications/
9. http://dev.opera.com/articles/view/html5-audio-video-support-in-opera-tv-store-applications/
10. http://dev.opera.com/articles/view/functional-key-handling-in-opera-device-sdk-based-tv-browsers/
11. http://dev.opera.com/articles/view/opera-for-devices-out-of-memory-system/
12. http://dev.opera.com/articles/view/responsive-web-design-a-project-management-perspective/
13. http://dev.opera.com/articles/view/tweaking-spatial-navigation-for-tv-browsing/

Number 12 is not TV-oriented at all: there’s no even a “TV” word mentioned there.
@andreasbovens, should we exclude it from TV category?

There’s problem with Markdown in post titles: when you do {{ page.title | markdownify }} it also wrap line into <p> which is definitely wrong tag to nest in <h1>. So it should be just a plain text. See examples:

title: Brand new <video> blah
title: Get your media with getUserMedia

So: no Markdown is allowed in title: front-matter field. @mathiasbynens, could you please clean up your files?

I mean articles/_posts/2012-04-25-drag-and-drop.md

It's located at http://miketaylr.com/test/security.html and lacking
http://people.opera.com/miket/2012/4/origin.html page.

As far as I understand, it requires two domains to work. It could be dev.opera.com + jsfiddle.com or some github.io static repository.

Without tags.rb: 4m35s
With tags.rb: 14m9s

We should consider removing / rewriting it.

The font weight (and possibly size) of the title seems to be too light / small compared to the article preview text.
See https://www.dropbox.com/s/uty752zirr33ogf/Screenshot%202014-03-03%2011.41.24.png

Also: no more green please :)

There are seven license types:

1. cc-by-3.0 — Creative Commons Attribution 3.0 Unported
2. cc-by-nc-nd-2.5 — Creative Commons Attribution, Non Commercial - No Derivs 2.5
3. cc-by-nc-sa-2.5 — Creative Commons Attribution, Non Commercial - Share Alike 2.5
4. cc-by-nc-nd-3.0 — Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Unported
5. cc-by-nc-sa-3.0 — Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported
6. cc-bsd — Creative Commons BSD License
7. os-asa — Opera Software ASA

Steps

1. Go to dev.opera.com main page
2. Open each article on the main page
3. Go to “Edit article” (see picture below) and check license type
4. Open corresponding MD file in articles/_posts (they are listed alphabetically)
5. Put license: key in front matter before layout: with license slug value, cc-by-3.0 for example
6. Go to the next page dev.opera.com/?page=2, repeat.

Examples

License type selected in article

License key in front matter

---
title: Opera 9 Technology Preview 2
authors:
- hakon-wium-lie
intro: '…'
tags:
- opera-9
- labs
license: os-asa
layout: article

---

Right now they are identical.

1. Create _layouts/entry.html
2. Replace all layout: article and layout: post with layout: entry

But only if there will be no ideas how to make them different, which is probably the right thing to do.

Links of interest, or "Elsewhere" or something like that. Static section for now.

We can use this to deploy (after building):

rsync --delete --exclude ".DS_Store" -avz _site/ devopera:/var/www/html/

There’s a grunt-rsync task available that we could use to abstract this, or we could just pass it to grunt-shell directly.

Do we leave those as is for the time being, or do we want to integrate them into the site? Integrated is probably nicer, but it's also a bit more work of course.

It could be one obsolete tag or additional historical tag, it depends on decision that will be taken in #8.

When I do grunt deploy it stuck on some (probably updated) files. But when I remove all files on server (it’s possible only with sudo when some of them are updated by you) it runs without any problem.

@pepelsbey can you confirm this? I can take of it if this needs to happen.

…and then contact Michael Link (Jostein's boss) so he can connect it to the Opera account.

For example:

blog/_posts/2010-06-25-html5-video-artikel-und-wettbewerb-auf-chip-de.md
blog/_posts/2010-10-12-schone-neue-welt-von-html5-webtech-2010-mainz.md
blog/_posts/2011-10-31-handys-und-tablets-webentwicklung-jenseits-des-desktops-webtech-mainz-12.md

There are few more in blog folder.

For example /articles/extension-developer-interview-abine/team.jpg.

I think it’s somehow related to the fact that this particular URL is rewritten in .htaccess

Right now we have 587 tags. Half of them are just useless, another half is applied without any general idea. I suggest to create a “canonical tags tree”. Why not “cloud”? Because it will act in a special way. Our aim is to make number of tags around 100 and keep it there or grow this number really slow.

For example, you have an article about forms elements specific to HTML5. Right now it’s probably marked as html5-forms, html5 and input-type-number-is-cool. But it’s also forms and plain html without “5”. And no one would ever use input-type-number-is-cool tag again because it’s too specific.

Sample tree, finally

Full draft tree is on wiki page.

• html
  • html5
  • semantics
  • video
  • forms
• css
  • css3
  • gradients
    • linear
    • radial
  • prefixes
  • gradients
• opera
  • opera-12
  • opera-15
  • …
  • opera-mini
  • opera-mobile

How it works? When you need a tag for your article you just follow steps:

1. Select one or more root tags
2. Add a few more specific if needed
3. Add even more specific tags if you really need it and they are presented in the tree
4. Profit!

For example: article about linear gradients: css css3 gradients linear — root tag, specific, even more specific. And if you really need new tag (some new technology like conical gradients appeared), go to wiki page, add it and only then use it.

And here’s the task

Create this tree based on existing content, existing tags (listed on special wiki page) and future topics. As I mentioned before, tags tree is located in wiki and could be edited just in place by “Edit Page” button. Requirements for tags tree:

1. Number of all tags should close to 100 or less
2. Tree should cover all existing articles and posts but aim to the new ones

Let’s use this task for discussion. I guess it’s something for you @brucelawson.

At least a 152×152px PNG named apple-touch-icon.png and located in the root of the site is needed.

For more icon dimensions/specs, see http://realfavicongenerator.net/.

Custom categories pages (not all of them) such as /articles/ and /blog/ should be divided into pages: /category/n/ (based on config variable set) with page.next and page.prev objects available containing page number or nothing for building page navigation in following way:

{% if page.prev or page.next %}
    {% if page.prev %}
        <a href="/{{ page.category }}/{{ page.prev }}/">Previous</a>
    {% endif %}
    {% if page.next %}
        <a href="/{{ page.category }}/{{ page.next }}/">Next</a>
    {% endif %}
{% endif %}

Articles marked as deprecated should get this in the <head>:

<meta name="robots" content="noindex">

We have 74 authors in authors/_posts folder. All of them have names and links, most of them have pictures (thank you @mathiasbynens). But no one have bio. We need to fill all available bios and maybe even update them with current author status.

Steps

1. Pick one MD file in authors/_posts folder
2. Copy file slug or author name from title: field
3. Google it, for example andreas bovens site:dev.opera.com
4. Go to author page and then to any article
5. Scroll to bottom, copy author bio for example: Andreas is based in Oslo, where he works for Opera Software as Extensions Product Manager + Developer Relations.
6. Paste it to MD file right after front matter:

---
title: Andreas Bovens
link: https://twitter.com/andreasbovens
layout: author

---

Andreas is based in Oslo, where he works for Opera Software
as Extensions Product Manager + Developer Relations.

Get extra points and 20 minutes in jacuzzi with @brucelawson for updating your own bio or outdated bio of the person you know.

• wget
• SiteSucker
• WebDevil
• HTTrack

@pepelsbey I wanted to run this by you. I’ve enabled GitHub Flavored Markdown, which effectively removes the need for the scripts/highlight.js file. Now, all the syntax highlighting can be done at build time.

All we need to do is use fenced code blocks as described on https://help.github.com/articles/github-flavored-markdown#syntax-highlighting, so that we can (optionally) specify the programming language used for each code block.

The result for an example post that uses this syntax can be found here: http://54.213.240.91/blog/opera-19/

The extension docs should be published to our new Amazon server (which will host all of dev.opera.com). It would be get this set up as soon as possible, so that we can test it properly. For example, some changes to our rsync task will be needed.

Whoever has access to the current extension docs server (@andreasbovens? @shwetank?), please see #29 for how to request an account for the new server.

…to put at the top of all articles with obsolete tag. Something like: “Mentioned features are already implemented in Opera, see Opera Next, Desktop Team blog, blah-blah…”

It could be just one obsolete or more tags, historical for example. See #9.

It could be:

This article is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported license.

…after each article or general disclaimer or even page mentioned in the footer.

Currently some articles on Dev.Opera contains above disclaimer, some not. Should it be one license and disclaimer for all articles or different in some cases?

Missed resources from people who left Opera:

zibin

• http://people.opera.com/zibin/background/background_origin_clip.html
• http://people.opera.com/zibin/background/multiple_background_image.html
• http://people.opera.com/zibin/background/box_shadow.html
• http://people.opera.com/zibin/background/border_radius.html
• http://people.opera.com/zibin/background/border_radius_screenshot.html
• http://people.opera.com/zibin/multicol/index.html

danield

• http://people.opera.com/danield/examples/bg-clip.html

patrickl

• http://people.opera.com/patrickl/experiments/keyboard/test
• http://people.opera.com/patrickl/articles/introduction-html5-video/basic/
• http://people.opera.com/patrickl/articles/introduction-html5-video/multi-source/
• http://people.opera.com/patrickl/articles/introduction-html5-video/transitions/
• http://people.opera.com/patrickl/articles/introduction-html5-video/video-canvas/
• http://people.opera.com/patrickl/articles/introduction-html5-video/scripted-controls/
• http://people.opera.com/patrickl/experiments/css3/sliding-doors/

More to come.

Resources of dstorey were moved to dev.opera.com/static/dstorey so I have copied and relinked them to articles folders.

From now on we should store all articles’ resources together with articles. And it’s probably better to use <iframe> with local demo instead of JSFiddle, Dabblet, etc.

There's also could be a lack of author.link field in certain profiles, so it should be checked first. Affected templates:

• authors/_posts/* (add http://twitter.com/name instead of name)
• authors/index.html
• layouts/_author.html

The settings in .htaccess are very much dependent on server config, so I’d like to make sure the redirects and everything else in there work correctly on our target host.

Do we have a test server? Who should I ask?

…as it has moved to _scripts as well as url-redirects.json has moved to _data in a012aa1 to not being copied to _site folder on build process.

Maybe we should also watch url-redirects.json for changes in Grunt?