“I myself do not believe in advertising and use AdBlock”: an interview with the founder of Smashing Magazine

Many here are already familiar with Smashing Magazine , a website for web designers and web developers. They also publish books and hold Smashing conferences .

With traffic of about 5 million per month ( 10 times less than Habr’s , but nonetheless ), he is one of the leading online publications on web design. An interesting feature - if you go to the main page of the site, it determines which AdBlock is enabled , but does not prohibit viewing pages - instead, it modestly hints that it would be nice to buy some book. Everyone who promoted the idea that a popular site cannot survive without a bunch of ads has tensed up now :-)

We interviewed one of the founders of the site (and the speaker on HolyJS ) - Vitaly Fridman. We’ll talk about the background of the site’s creation, its technological stack and the development process, wonders with the ability to use AdBlock non-selectively , as well as plans for the future.

- Vitaly, welcome! You are the editor-in-chief and founder of the rather famous Smashing Magazine. Can you briefly describe how you got to such a life? How did you end up on the web, why did you decide to start your project, and was there something different before Smashing Magazine?

Vitaliy: The story is quite simple, there is nothing special about it. I just worked a lot all the time. I was born in Minsk, and when I was 16 years old, my parents moved to Germany. Even in Minsk, I started writing small articles, experimenting, twisting, watching what can be done with Flash, HTML, and so on. And when we moved to Germany, everything was very simple: I needed money. I studied at Computer Science and Mathematics, and we had one project at the university that required a webmaster. And, since the money was needed, I decided why not participate. As a result, I started spinning, spinning, even more deeply engaged in web design. And then, as I graduated from the university, despite the fact that I always wanted to be a backend developer, I realized that this was not entirely mine, because the PHP code that I wrote was, say, completely bad. And I decided to quickly reorient myself and go to the area that interested me the most. I went to CSS, to the frontend, for six or seven years I was a freelancer. Then we created a magazine because I needed some kind of resource to find equipment, tools that I could use in my work. Very quickly we found that I was not the only one, there were many people who were spinning in this area, also tried to find something and could not. Then I spent an insane amount of time writing articles. The most important principle was that we decided to publish at least two articles a week for one year. It was such an obligation. At that time I was still studying at the university, so it was hard. He often wrote articles in cafes, at night, between examinations. But all this was serious, and so Smashing Magazine appeared. which interested me the most. I went to CSS, to the frontend, for six or seven years I was a freelancer. Then we created a magazine because I needed some kind of resource to find equipment, tools that I could use in my work. Very quickly we found that I was not the only one, there were many people who were spinning in this area, also tried to find something and could not. Then I spent an insane amount of time writing articles. The most important principle was that we decided to publish at least two articles a week for one year. It was such an obligation. At that time I was still studying at the university, so it was hard. He often wrote articles in cafes, at night, between examinations. But all this was serious, and so Smashing Magazine appeared. which interested me the most. I went to CSS, to the frontend, for six or seven years I was a freelancer. Then we created a magazine because I needed some kind of resource to find equipment, tools that I could use in my work. Very quickly we found that I was not the only one, there were many people who were spinning in this area, also tried to find something and could not. Then I spent an insane amount of time writing articles. The most important principle was that we decided to publish at least two articles a week for one year. It was such an obligation. At that time I was still studying at the university, so it was hard. He often wrote articles in cafes, at night, between examinations. But all this was serious, and so Smashing Magazine appeared. six to seven years was a freelancer. Then we created a magazine because I needed some kind of resource to find equipment, tools that I could use in my work. Very quickly we found that I was not the only one, there were many people who were spinning in this area, also tried to find something and could not. Then I spent an insane amount of time writing articles. The most important principle was that we decided to publish at least two articles a week for one year. It was such an obligation. At that time I was still studying at the university, so it was hard. He often wrote articles in cafes, at night, between examinations. But all this was serious, and so Smashing Magazine appeared. six to seven years was a freelancer. Then we created a magazine because I needed some kind of resource to find equipment, tools that I could use in my work. Very quickly we found that I was not the only one, there were many people who were spinning in this area, also tried to find something and could not. Then I spent an insane amount of time writing articles. The most important principle was that we decided to publish at least two articles a week for one year. It was such an obligation. At that time I was still studying at the university, so it was hard. He often wrote articles in cafes, at night, between examinations. But all this was serious, and so Smashing Magazine appeared. which I could use in my work. Very quickly we found that I was not the only one, there were many people who were spinning in this area, also tried to find something and could not. Then I spent an insane amount of time writing articles. The most important principle was that we decided to publish at least two articles a week for one year. It was such an obligation. At that time I was still studying at the university, so it was hard. He often wrote articles in cafes, at night, between examinations. But all this was serious, and so Smashing Magazine appeared. which I could use in my work. Very quickly we found that I was not the only one, there were many people who were spinning in this area, also tried to find something and could not. Then I spent an insane amount of time writing articles. The most important principle was that we decided to publish at least two articles a week for one year. It was such an obligation. At that time I was still studying at the university, so it was hard. He often wrote articles in cafes, at night, between examinations. But all this was serious, and so Smashing Magazine appeared. that we decided to publish at least two articles a week for one year. It was such an obligation. At that time I was still studying at the university, so it was hard. He often wrote articles in cafes, at night, between examinations. But all this was serious, and so Smashing Magazine appeared. that we decided to publish at least two articles a week for one year. It was such an obligation. At that time I was still studying at the university, so it was hard. He often wrote articles in cafes, at night, between examinations. But all this was serious, and so Smashing Magazine appeared.

- How was the Smashing Magazine platform technological stack selected for the first time?

Vitaly : Initially, he did not get out at all. I worked with a colleague who already had a magazine in German, he used WordPress for several years, so we just took this platform without hesitation. We chose a random topic, there was no logo there, we just started publishing articles. That is, they didn’t sit and think whether to choose WordPress or something else, just like that historically.

- New Smashing Magazine - it is still at the break-in stage.

Vitaliy : He is almost ready, we should start in the near future. We will have a slow rollout, which means that we will gradually open access to an increasing number of different categories on the site. Now we have a stable, good, working version, there are several bugs that need to be fixed or covered, there are not many of them, so we want to start everything soon. Let's see what happens next.

- You have a rather large portal, this is not a move to some new engine or some trivial update. You are doing a completely new design, a new architecture, a new UX, a new workflow. What was the reason for such a global change? Who initiated - managers, techies or marketers?

Vitaliy: This is a very good question. Usually I am a big opponent of “big bang redesign” in design, I have always opposed this and would rather develop projects in small steps. In this case, we had to do this because there were financial reasons. Not because we are bankrupt and so on. But if you compare the number of people who use AdBlock, as it was in 2012, when we laid out the previous redesign, and how everything developed over time ... From advertising we get 1/16 of the income compared to what we earned in 2012-2013 . Again, this is normal, because around 60-65% of our readers use AdBlock. I myself do not believe in advertising and use AdBlock. There are reasons for this, but I think you should not go into details, everybody knows this. But for us it meant that since most people don’t see ads, we had to come up with how to sponsor the site in a different way. We have several principles, one of them - all the people who work on the site should get paid: every editor, author - everyone should get something for their work.

And we began to think about it. This was not a global problem. In our case, quite early, back in 2013, we began to think what alternative ways of earning we have or can be. For example, they created a conference, workshops, trainings, consultancy, books, e-books, a job board and so on, it was all in the process. But that was not quite what we would like. We wanted to build some kind of stable foundation. One of the ideas was a subscription. A subscription, according to which people get some kind of buns for 2, 5, maybe 7 dollars a month. I don’t believe in donation, that donations can give a stable profit in the long term, and I don’t want to rely on it. It’s important for me to imagine a product in which people see some kind of benefit for themselves, so don’t introduce these membership fees, say how good we are, how we worked well all this time, and then to demand money from you - I did not even consider such an opportunity. Therefore, we decided to create a new product, which would be, in fact, a subscription, which would include various useful things, for example, webinars, discounts on products, MailChimp, on things that people already use. In addition, Smashing TV is a video broadcast of conferences or interviews, “Ask me anything” sessions, a rather large set. Smashing Magazine Print is the print media, Smashing Books. Like a mini-book that will be published three to four times a year. There are many different things in this project that make it, I hope, an interesting, wonderful product. What will change? In the old design, we really did not have the opportunity to show this product, the old version of the site looks like a blog. The only thing, what we could do is put some kind of ad unit, and we will have membership. But in our case, this also includes the Options and Features panel. This is related to everything we do. That is, if you have a membership, you get discounts on conferences, workshops, webinars, job ads, e-books. Integrating membership into each of these systems was very, very difficult. By that time, our job ads were posted on Ruby, a rather old platform specially built for us, the magazine was on WordPress, the shop was on Magento, then moved to Shopify. All this is difficult to integrate. I would have to create a system where it would be necessary to integrate the subscription in the Job Board, Shop, and Magazine. If, of course, you have the opportunity to leave some comments, it turns out highlighting,

We decided why not try to look at this problem from a different perspective. Why not use this opportunity to think through what “smashing” means, Smashing experience, to create membership with an intellectual product in all this new redesign. And so we decided to think about how to make a new platform, a new system, a new unified technical stack, in order, firstly, to learn what “smashing” is, and, secondly, to build a uniform UX where you begin your user journey where you end, that is, so that everything always just goes by. I understand that this is a very long answer to your question, but it seemed like a reasonable option: let's sit down, think over what “smashing” means and how you can build this whole thing, what is needed for this, and eventually we will build it. Of course, we thought we could handle the 10th anniversary, but we didn’t even have time for the 11th anniversary. And now, after 16-17 months of development, design and testing, we are finally able to launch it.

- If I return to the very beginning, to the selection process, I would like to clarify: from the point of view of the product, everything is clear and transparent, but from the point of view of technology, how did you choose the new stack? It is clear that it was JS, but inside JS there is also a large zoo framework: by what criteria did you choose what you watched and what you refused? How did you come to this stack?

Vitaliy: I would not say that it was a long process. In 2012, I met Matt, who then worked in Spain. He did various things, including various commercial projects, portals, having his own Web Design Agency. At some point, three years later, he came from San Francisco and opened his startup company Netlify. The challenge was what would happen if we returned, from the point of view of philosophy in architecture, to where we started. Initially, we just had a server, we had a browser, there you get pages from the server, and you're done. And we thought, why then just do not create “ready-made” pages, with HTML / JavaScript, we just put them off in CDN, invest a lot of resources to make a good, fast CDN, use all modern technologies to speed up the delivery of data from CDN (HTTP / 2, server push and so on). And distribute it to users who are nearby, and then, in the second step, suppress JavaScript for interactive elements, such as comments, notifications, shop, check out. Through the Stripe API, through its APIs or through third-party APIs. The basic principle is to go to serverless and not use the server at all, because everyone, probably, in his life has encountered such a problem as Error Establishing Database Connection.

I was intrigued by this idea when I heard about it, and even before the start of the redesign, we started to think if we could somehow implement this, is it possible to do something at all. That sounded pretty cool. Matt made a couple of demos, took a couple of articles and ran them through his CDN, through Netlify, and we found that pages load six times faster. It was very surprising for me. That is, the rendering time (everything is quite optimized for us, I would say we are trying to do everything as needed), but I was just in shock, because on average our results reached 400-500 milliseconds in start render time .

Of course, it’s understandable why: all the HTML, everything is generated statically, and then the data goes to the CDN, then you get the CDN data, then you add some JavaScript, it sounded pretty simple, and we decided: “Why don't we try?”. Honestly, all decisions about which framework to use or not to use were more likely related to what the Netlify team and our team are familiar with. At that moment, Preact seemed a pretty convenient architecture, because everyone who worked on this project, who worked at Netlify, knew this architecture, Redux, React, and all things with us. We just decided to try it, test it and see what happens. That's how it happened. That is, we did not decide not to use Angular or anything else. The team just knew React, and we decided why not give it a try.

- The base is React, but there is a bunch of all sorts of technologies that you took to yourself to do everything “ smashing ”. But there is an understanding of how much this is enough? What do you think, when will you do the next redesign?

Vitaliy : I hope not soon, because I can’t see this page already. In general, I think that the system is quite stable, a lot of things can be built in it. We use Preact, not React. Perhaps this choice was a mistake. At Preact, many of the things that React could do quite smartly, we have to partially rewrite manually. Depending on how the site is developing, how Preact will develop, we may be rewriting for React, although this is not such a big step, as I understand it. I don’t write JavaScript myself, to be honest. And even better.

As far as I understand, the transition will take some time, but it is not terribly difficult. On the other hand, I hope that what we built has a pretty decent architecture. There are some bugs that need to be refactored or fixed, problems that need to be solved. In general, we built quite complex things that we could not do based on what was. I hope that in a couple of years there’s no need to do a redesign. I hope that 5-7 years is enough.

“Just the normal life cycle.” Regarding the time of the process, you already said that everything dragged on for 17 months. Can you orient on the team - how many people are doing this? Designers, developers, managers?

Vitaliy: I want to explain why it took so long. We wanted to launch in September 2016, worked hard to make it work. We missed this deadline, because we had many other, more priority projects that needed to be addressed. The team was very small, so projects such as, for example, conferences and the publication of books took a very long time. In general, at the beginning of the project there were 10 people with a wide variety of responsibilities: from animation to performance and React. Most of the project was run by Netlify guys: Matt and his team. This project allowed them to show what they are capable of. Our team included Dan Mall (Dan Mall) - the main visual designer, Sarah Soueidan (Sarah Soueidan) - the main front-end developer, but she only worked until February, she had other projects, after that we worked with Ilya Pykhalsky from Minsk, we know each other a long time ago, we met, it seems, at a conference in Ufa. He works (or worked) at EPAM and is also involved in other projects. I don’t know what kind of hobby it is for him - EPAM or Smashing, but he is a cool JavaScript developer and is engaged in including React.

Honestly, I’ve written most of the CSS lately. There is some interesting CSS, but I try, of course, to follow that a lot of code was written 16 months ago, a lot has changed, CSS Grid Layout has come out, the Payment request API has changed, and so every time it’s like a race against mills, I always have to something to update and change. In fact, in the past I would have to do CSS refactoring. I will have to do this next week. In general, we have a very small team, two and a half people who are constantly involved in this, the project manager Marcus is engaged in SEO and a lot of other things, including finance. I would not say that this is a large team that has been involved in the project for 18 months. This is a small team that did this project abruptly.

- What did you manage to do relatively easily over these 18 months, and what were the problems?

Vitaliy: I did not expect so many problems with accessibility. At first in CSS everything was very clear, cool, as needed. But when we started adding all the React chips, when we found out that there are states, we needed to put the content back and forth, change it here, etc., I had to write a lot of JavaScript for accessibility. Now I would say that the checkout script does not work for us at all, there are also more points that I need to refactor. I would not say that CSS problems were complex, we easily solved them. Layout itself is quite complicated, but since we solved this problem, everything else was simple. There wasn’t even any complexity in JavaScript. The only problem that we did not expect and which took a very long time to solve is that membership is the central element of everything. We need to watch, log in a person, make him an account. Authentication without a server - you need to do a bunch of APIs: authentication, commands, job board, because everything goes through JavaScript. We also use Go separately for management, admin, orders and so on. These things took longer than we thought. I would not say that this project was monstrously complex from an architectural point of view. It was necessary to solve a couple of difficult moments, and this was, rather, after finding bugs.

- That is, the normal development process. What will happen next with the project? Will the membership concept continue to evolve? The classic question for an interview: how do you see yourself in five years?

Vitaliy: I definitely can’t answer, because I don’t know what will happen in six months. It all depends on how the project goes. We did full membership, a lot of things are connected with this - webinars, various kinds of actions, campaigns, content campaigns, conferences, etc. I hope that everything goes well, and then we will have a good foundation on which we can build anything. In technical terms, if we can master, there are so many different ideas that I am still looking for, what we are working on. Especially in terms of education. This is not something to create Treehouse or lynda.com. I believe that it is important to have the opportunity, a physical place, where you can cram people involved in education. People who do CSS, JavaScript, front-end, back-end, who can teach students what they decide in practice. Need a physical place where it could be done, like Smashing University, maybe. Something like that. Traditional education, unfortunately, is far from optimal in this regard. Membership for us revolves around the community, so, I think, to do something like Smashing School in terms of education would be very good. Many companies need front-end developers and designers, and many students want to go in this area, so it would be very cool.

- Great plan! I hope everything works out with membership and school. Thanks a lot!