How the new design of the viva64.com website of the PVS-Studio code analyzer developers was made / PVS-Studio company blog

The site viva64.com, the main platform for developers of the PVS-Studio code analyzer, is 10 years old! The domain was registered on November 9, 2006, and the last major design update was made in December 2010. It's time to change something.

Project participants

Now 4 people are engaged in viva64.com:

• Konstantin Potapov - web developer;
• Sergey Harleev - web designer ;
• Ilya Teterin - Linux engineer;
• Evgeny Ryzhkov - project manager.

Other people are engaged in the creation of content and are not related to the infrastructure of the site, its appearance and performance.

What does the company do

We make our own software product. This is a tool for programmers - PVS-Studio code analyzer. It helps to find errors in programs by analyzing the source code. Client companies save money by early detection of errors before the beta testing stage and, especially, public release. We sell this software product.

To promote the PVS-Studio analyzer, we write articles on checking open source projects in which we find errors using our tool.

Website concept

For a long time, even we ourselves could not formulate to what type of sites our resource belongs.

On the one hand, we have a company, which means it is a corporate website. But we are not Disney and not Microsoft, therefore nobody is interested in knowing anything about our company.

On the other hand, we have a product for programmers, but in the era of the AppStore, Play Market and other sources, the site of a single product is not so interesting to end users. Many successful products do without a site and nothing.

Finally, on the third hand, we have a content site. After all, the main thing that people come to our site for is to read articles on checking projects using our analyzer, to find out what interesting errors we found in them and how to write code so that they would not be allowed. It turns out, almost an educational resource.

Combining all this into one concept, we came to the following. We have a content site. However, from any of its pages it should be clear that there is such a software product PVS-Studio.

What idea do we want to convey to the site visitor?

So, we have a content project. But what idea do we want to convey to those who are on our site? First you need to figure out how visitors get to our site and which pages are popular. Turn to Google Analytics. Here is an overview of traffic sources for 10 months of 2016 (Acquisition Overview for Jan-Oct 2016):

At the same time, if you look at the most popular pages, then the main page of the site will be only in 15th place. Thus, we can conclude that people almost never visit the main page of a site, but always get to some content (articles) published on the site either from a search, or from social networks, or from a link from another resource.

The first important conclusion: visitors always fall immediately “in the middle” of a site, bypassing the main pages, which means trying to “lead” a person from the main one before purchasing a product (conditionally) is an idea so-so.

Well, we figured it out. But how then do you “lead” a site visitor to purchase a product? After all, in the end, all articles are written for this.

We believe that our sales cycle is about three to six months. During this time, a person should read 3-4 articles about PVS-Studio and test the tool on his project. Further, if we are lucky and a person likes the instrument, he will buy it.

Thus, our task is to convey two thoughts to the site visitor at once:

• You need to read 3-4 articles, and not leave after the one to which he came.
• It is necessary to convincingly and with facts that the proposed software product is not a dummy, not a fraud, but a really cool thing.

In order for a person to read 3-4 articles, you need to show him that these articles are on the site. Therefore, we have the block "Recent Articles", which should catch the eye.

We do a great job - we find errors in projects with source code, and this helps a person to believe in a tool. The task of the site is to make the visitor learn about the checks. Therefore, we have a block “how many projects we checked and how many errors we found”. By going to this section, the user sees a complete list of projects that we have ever checked and all errors found.

While on any page of the site, the visitor must understand that there is such a software product PVS-Studio and it can be obtained on this site. Therefore, references to the code analyzer are scattered in different places.

What specific elements are designed to achieve the purpose of the site

We decided that the purpose of the site is to inform the visitor that the site has interesting articles about checking projects, and they were written not without the help of PVS-Studio. Which, in turn, is an objectively worthy tool.

How exactly do we convey this idea? Let's go on points.

Site header

The heading of the site says what the company is doing ("We make a code analyzer"). In my experience, often a website, in which even a lot of money has been invested, does not always reflect the activities of the company. And okay, when it's multidisciplinary companies like Siemens or Samsung. But often even small organizations for 10-20 people are so keen on creativity that the whole site jumps and overflows, but what the company offers is unclear.

Our contacts are indicated both in the form of email and in the form of a feedback form. Write to us should be easy and convenient. Therefore, we offer two methods of communication and always want them to be available to site visitors.

Left menu of the site

The left menu of the site is super minimalistic. It contains only the most important points. What is the most important thing on our site? In our opinion:

• A blog so that you can always read "what's new checked."
• A list of verified projects and a list of errors found in them with specific numbers, so that people can see that we are working.
• Programming tips.
• And, of course, our software product.

Basement site

The basement is pretty simple:

• Another reminder of PVS-Studio.
• List of main pages and sections of the site.
• Contacts.
• Twitter, RSS.
• Site search.

The right block of the site (side bar)

The following traditional elements are located in the right block:

• Latest articles.
• Twitter feed.
• List of links "this is interesting."

From non-traditional elements:

• The block of “tested projects” - with the number of projects and the number of errors found.
• The block “examples of errors” - real code fragments from different projects.

The purpose of the right block is to make the visitor understand that there are many other interesting materials on the site.

For product fans

Like any product with a story, PVS-Studio has fans (and haters, but I have nothing to say about them). For this category of people, we have prepared a section with free souvenir products .

On our site you can download wallpapers, as well as pictures for printing on T-shirts and mugs. It’s very funny to see these things in someone’s office.

Interview with the developers of the site

An article on the development of a new version of the site would be incomplete without comments from the participants of the process themselves. I asked them to answer a few questions.

Sergey Harleev, web designer

ER: Sergey, please tell me how easy was the concept of the site? Still, not a store, not a landing page, not just a blog. How do you understand what we are doing?

SH: Yes, the project turned out to be bigger and more complicated than at first glance. The main difficulty was keeping the line, not going too far with marketing. But at the same time, do not forget the main task of the site - selling the product. Our target audience is special, picky, and does not tolerate obsession. Therefore, we inside the company created an impromptu focus group of programmers and rolled back some elements and blocks of the site on it.

For starters, we put publications at the forefront, because first of all, viva64.com is a training information resource. Therefore, the main emphasis was on the readability of articles, and user convenience. And the PVS-Studio analyzer itself went by the wayside, having moved to the subsection.

We do not use such marketing elements as multi-colored banners, large beautiful illustrations, flashy headlines, as developers do not respect such things. And with such chips you can only get the opposite effect.

But we did not forget about the product, unobtrusively mentioning it, for example, using the “Verified Projects” block. In it we tell how the PVS-Studio analyzer at one time found serious errors in the code of large, well-known software products, while attaching a specific error in the code. And in the appendage they demonstrated significant statistics of verified open projects, and errors found in them.

ER: In what ways was it decided to return users to the site?

In general, there are many ways in the world, but not everyone is suitable for our audience. For example, we do not use e-mail subscription, as our users, to put it mildly, do not like mailings, as well as social networks. The choice fell on two channels, where we already have subscribers, this is Andrei Karpov's twitter , and RSS .

ER: How much was the flight of creative thought censored?

SH: In the beginning there were moments when I was drifted in terms of graphics, for example, with the concept of a magical world, as in the animated film “Adventure Time” for our hero - a unicorn. But the team stabilized me, as the focus of attention was leaving our hero. But when you have been living with a product for more than one month, you begin to understand it well, principles, philosophy, and closer to completion, I was on the same wave with the client and the team.

ER: How many pages did you have to render? How typical is this number of pages?

CX: Over 60 layouts, a tablet and mobile version were designed for each page. A similar approach is typical for online services, but is not often used for corporate and information sites.

ER: How was this project different from your other projects?

SH: I was first ordered a brand book for the site, with rules for using fonts, colors, distances, elements and blocks. It was a revelation, it turned out to be an extremely convenient tool, and for developers, and for himself, the document significantly accelerated and simplified the process.

Konstantin Potapov, web developer

ER: Konstantin, the first question is about the timing. What time frame did you initially evaluate the project and how much did it end up in? Why do you think such a big discrepancy?

KP: Initially, I saw only a simple elementary site with articles. And he appreciated the creation of the site in a more modern design in 3 weeks. How much I did not know, as they say "after the release of the site his life is just beginning."

ER: Well, I know everything about the deadlines. We started working on the design with Sergey in mid-May 2016, and finished (conditionally of course) in mid-November, that is, six months. The first work on the site code began in July. Although you can say that this was not related to design, but it was necessary in order to understand that the site is "more than it seems." Directly new design began to typeset and code in mid-September, and the release was in mid-December. That is, three months to get acquainted with the code and three months to the main work.

Well, yes, almost three weeks and it turns out ... (Sarcasm)

KP: I did not expect such a small site to have such large internals. And it was both good and bad. Of the good, there was a cool article publishing system on the site. People prepared the material in Word, converted it into a special .html set of a special kind, which can be published both on the main and on other sites, with a special home-made plugin. In addition, there were integrations with the PVS-Studio application, a bunch of marketing analytics.

Out of bad there was a lot of "production code". As I liked to tell my programmers, "this is not production, there is no place for crutches." But after weighing the pros and cons and spending a couple of weeks trying to fit all the eggs in one basket, as well as considerable time combing the legacy code, I came to the conclusion about an evolutionary approach. Apparently, the “take and rewrite everything” option for such projects no longer works.

Separate complexity was the new design. I’m used to working structurally, on rigid grids and on meaning, rather than emotional presentation (since I don’t know how to draw beautifully). I see many shortcomings, but as you know, "an ideal product costs infinite money, infinitely time and does not exist in nature." Therefore, I had to compromise.

ER: By the way, what is the size of the site now? Content size and source size.

KP: At the time of this writing, we have this:

• General articles (blog, news, terminology, lessons, etc.) - 836;
• Documentation articles - 512 (as befits programmers);

Total approximately 1350 pages in Russian and English. In addition, there are 255 (where do these programmer numbers come from?) Pages with examples of errors.

In short, it turns out about one and a half thousand articles in Russian and English.

Speaking of code, this is 14 megabytes of code not counting libraries, but this is a slightly artificial indicator. And for fans of static code analysis, here’s even more artificial in the picture.

ER: Tell me about the “stuffing" on which the site works. What technologies were used?

KP: This is a site with a rich history that exists for 10 years, was made by different programmers. Probably, the word “govnokod” will be cleaned up when editing the text, so I’ll say so streamlined. With this in mind, as a responsible person, I decided to use non-standard or rare technologies to a minimum so that there would be no problems finding a developer if I was hit by a plane. Inside the standard Python 2.7, Django 1.9. If I started the project from scratch, I would use more modern technologies and, possibly, will introduce them in the refactoring process. But here, as with the first wedding night - this honor fell before me to another person 10 years ago :-).

ER: Do you have a story to tell about the layout features?

KP: I tried to maximize the implementation of the “universal” layout and killed (possibly in vain) the finished layout in BEM style(this is when each element is typeset separately). This approach is good for unmanaged projects with hundreds of developers and hot changes. But I'm a supporter of the fact that CSS is a cascading style sheet, and at least I tried to work in this paradigm. I also tried to make the most of the capabilities of the framework (imposition framework), to simply make up for many elements without getting into CSS at all. But damn it is always a compromise. And I'm not sure my decision is the best. For example, now I would like to redo the layout through SASS and make it even more flexible. When I started, many compositional issues that pop up in the development process were not resolved. In addition, I did not fully realize all of Sergey’s design ideas, but I tried to do it to the maximum.

A site is software, and as the HP director once said (if I'm not mistaken) - if you want to make cool software, do your hardware. There are many different devices and permissions, and I tried to find a compromise.

ER: How was the development process organized? Branches, different servers, all that. More details only!

KP:

Here is the infrastructure we have now:

• The battle server is understandable.
• Stage-server (for development) in the hot switching mode of the new release and the old site for the change test.
• "Sleeping server" (as we called it) for the backup deployment of a full copy of the combat.

At the software level, automation and synchronization between different servers were introduced. It seems that this is justified by 200%. You can update the site version "over the air" directly from the administration system. In addition, there is also a separate server on Jenkins, which automatically converts .docx articles into .html and uploads them to the site.

ER: How many had to be redone several times, and if so, why?

KP: I really respect efficiency. And I don’t understand people who can sit and look at the monitor for two hours in a row, waiting for five in the evening or until their boss pushes them. This site posed in front of me an architectural challenge with which I had so tightly encountered only once before, and I do not believe that I was able to solve it fully. I graduated from PhysTech and in my subcortex the ideology of a scientist-engineer-researcher was stitched. I created somewhere 5 versions of the engine with a different interweaving of technologies and architectures, but I rested in the fact that changing “everything at once” is too risky. I remember somehow developing IP-telephony for Tajikistan. But they had electricity there on the cards then, not like the Internet. And among other things, I ran into the problem that they need exactly the G729 codec (and not open-source 723). Licensed only by Intel and someone else. But the point is

But in this project there was someone to stop me in time from these attempts at perfectionism.

ER: Now, after the fact, what would you give a temporary assessment for developing a new version of the site design? And what about the new version of the site engine?

KP: Three weeks for everything. Provided that integration with the existing infrastructure is not needed, I will assemble the design on the finished components and edit the articles through the admin panel. What? This is just a site with articles !!! I hope you understand that this is sarcasm.

ER: What are the next steps you need to take with the site?

KP: At a minimum, the following is absolutely necessary:

• Asynchronously load statics.
• Practice magic with server settings.
• Improve the display of the site on different devices.
• Carry out “training alarms” and check how the backup systems function.
• Document the current system (but I have problems with this).
• If I can create docks, I would like to go on vacation or die with the feeling that “the work is done” :-).

Ilya Teterin, Linux Engineer

ER: Ilya, tell us the story thanks to which we met?

IT: The main site was turned off allegedly for spam, and even started to be blacklisted for the alleged spread of viruses. It was urgent to understand what was happening, and this is more for my part. In his youth he was in a hacker party, some skills remained. However, it turned out that no malicious saboteurs acted, and only protection against the most common viruses stealing passwords from FTP was not well organized. They defended the office normally, but on home computers, where service information also happens, everything is full of holes. However, it is difficult to blame the ordinary software company for this when even presidential candidates and their teams ran into a similar rake. Now, I think, the situation has improved significantly, they have got rid of dangerous protocols, cut everyone’s rights, made an suggestion to employees, etc.

ER: So, tell us about the hardware on which the site works.

IT: This site does not require any extraordinary computing power, but it needs stable operation. A virtual dedicated server is used, it provides a good reserve of strength. In case something goes wrong (traffic growth by orders of magnitude, DDoS attacks) - we are ready to migrate to a more powerful server as soon as possible or even organize a cluster, as well as connect external protection services to ensure the smooth operation of the site.

ER: What tasks on the organization of the server were solved, and what remains to be done in the near future?

IT: System vulnerability to external threats and recovery speed in the event of a breakdown are gradually reduced. We switched to more secure exchange protocols and put in order the user roles and their access rights. Backup is now done in a cloud service with triple redundancy.

At the final stage, the organization of repositories for users of the Linux version of PVS-Studio is at the final stage, thanks to which our product will be convenient to use and especially updated. I would also like to introduce regulations for ensuring information security and working with backups. And then triple backup is good, but it is also necessary to check it all the same.

In addition, it is worth creating a script for automatic deployment of the finished system from an image on any server (so that this can be done in minutes, not tens of minutes).

ER: Already want it all!

Conclusion

We did a good job on the new site, but we do not consider our work finished. Therefore, we will be glad to receive your comments, suggestions for improvement and just comments about the new version of the site www.viva64.com .

If you want to share this article with an English-speaking audience, then please use the link to the translation: Evgeniy Ryzhkov. The new design of viva64.com. The story behind it, told by the PVS-Studio developers