The Perfect Content Editor. What does it look like? The Beginning

If you don't want these long stories, scroll it down to the result!

There is a page called "Projects" on my website. Mostly this page is the main reason I created the whole website. It's my portfolio, exposure of my skills and knowledge. So here I want to tell you a background story of Projects Publishing Process. I'll be using "PPP"-word for it.

Business Tasks

The Main Task of Content Editor is to make PPP as simple as it could be. And I (as a developer) always suffer because of exposures. See, for each of my projects I:

  1. Develop and write User Stories
  2. Create a prototype
  3. Do Web Design and User Interface
  4. Create Graphic elements, etc.
  5. Work with fonts and icons
  6. Design and develop database and data structure
  7. Develop backend part
  8. Develop frontend part
  9. Deploy the project and make some tuning for a server and environment

Okaay. And than I need to publish this project. The problem? I need to pack it and to design the publishing materials. Have you seen dribbble/behance projects? OMG that's why I suffer. Because dribbble artists think about promoting and exposures. Not about business task and projects. That's the difference. And that's the reason of tons of holywars.

The point is Dribbble/Behance raised the level of skills/projects exposure, so now it's not enough just to develop the project. You need to pack it and do some marketing stuff.

Sooo, the main business task is to make PPP as simple as it could be. And the result of PPP must be nice. Not just a couple of strings and images about how I do this or that.

First version of The Perfect Content Editor

For a first version of the Perfect Content Editor I decided to use the following structure.

  1. Cover or thumb for preview and hero screen
  2. Title and some short description
  3. Tools I used for creating a project
  4. Image slides or Gallery for visual exposure
  5. And some long read description

You can notice this project structure in my earlier projects. Here or here, for example

Why did I like that style?

Well, I used to like it, because as a user and potencial customer you can see, what tools were used for this project, you can see some screens and media data and you can read some background story.

Sounds good. But it's not. I assume that you as a customer has a good tech level of developing stuff. And that is a huge mistake.

Customer doesn't have to know something about developing. So he is not interested in "Tools I've used to create this project". I just don't care. I need a complete product, website or whatever else. The tools is your problem, not mine - a customer could say. And he'll be right.

So what is "Tools" part for? I guess for tech-leads and other developer-skilled customers. But in that case "Tools" is just too small and contains too little data about project background.

So it's a mistake one. Let's move forward and consider the last one part - long read description. I though that somebody's gonna read it. I was wrong. Nobody wants to read this boring stuff. The opposite one - everybody loves bright and juicie visual content: images, videos, interactives.

What visual content do I have in this page structure? A hero image at the very beginning of the screen and a gallery block, following a "tools" block. Aaaand that's it. And that's so lame. Seriously. I can see it myself.

People love media content.

And this structure is very boring for selling and for some exploring.

Anyway, I developed an admin panel or Publishing Project Process-tool for this type of structure. And that how it looks like:

The old website were built with ReactJS and this PPP-page were one of the isolated component. It provided the following structure:

{
   cover: {}, // Hero Image
   title: '', // Main Title
   description: '', // Short Description
   tools: [], // Tools I've used for the project Array
   gallery: [], // Images Slider for some screenshots
   body: '', // Long Description
}

Ok, the hero image uploading is made with classic React Cropping method. During the uploading process I can change image position, zoom it and crop it in the way I like.

Then I use basic input for "Project Title". Yeah, it's basic input with transparent background. So simple. But the problem it caused - input allows only one line string. And if my title has length more than some count of symbols, than it hides. Which is not the most convinient way.

For short description I use hardcoded textarea. "Hardcoded" means this textarea has fixed width and height.

Than let's jump to the last part of this page - long read description. I use SummerNote editor for it. And it's the beautiful WYSWIG tool for content makers. In the past.

Summer Note and the similaer tools has a lot of cons. One the most important: it produces very dirty and uncontrolled output data. For example, I type the following text and expect for correct result:

Hi, this is a header

And this is a paragraph

What result I am expecting for?

<h2>Hi, this is a header</h2>
<p>And this is a paragraph</p>

or may be something like that

<h2>Hi, this is a header</h2>
<div>And this is a paragraph</div>

But what I get as a result of Summer Note:

<div></div><div></div><h2 style="font-family:sans-serif;background:transparent;font-size:13px;line-height:1.4;">Hi, this is a header</h2><div></div><div></div>
<div></div><div style="font-family:sans-serif;background:transparent;font-size:13px;line-height:1.4;">And this is a paragraph</div><div></div>

Bad semantic, bad SEO, bad performance, bad controlling and editing in the future.

What an alternative? Clear JSON output data. So I'talk about it later. And now there 2 blocks left I shoud tell about: tools and gallery.

Tools

So tools have the structure:

[
    {
        title: '', // The Title
        about: '', // Short Description
    },
    ...
]

Every project can have countless number of tools. So it's just a dynamic array of objects in Javascript.

The same tactics about gallery block. There is an array oj objects:

[
    {
         src: '', // Image Source
         caption: '' // Image Caption (it used for alt-tag as well) 
    },
    ...
]

Final first version

So that how it looks like finally