Web technologies for designers - I return the debt

I have a duty to Habr. Two years ago I wrote an article “ Web technologies for designers - why and how ”, but I did not release the continuation of the article.

And finally, I can return some of this debt. All November, in the mornings and weekends, I recorded instructional videos about JS for designers. In the course of the project I experimented with different formats, equipment and post-processing. In this post, I will summarize the month of work on the course and tell you about what I learned myself while recording it.

The course had two tasks:

1. help designers see how knowledge of technology can be useful to them in their daily work;
2. To those designers who want to learn technology, give an easy platform to start.

To solve the first problem, I recorded a few short videos to help designers see new approaches to work:

1. Fighting a routine in Sketch with Crafting and JSON
2. How to take data from the site, turn it into JSON and feed the sketch
3. A simple way to create a prototype of a new version of the product using Stylish
4. How to create a browser extension

These videos people watched and liked. Everything looked so that you can begin to disassemble the topic in more detail. Therefore, I created an example with template data and recorded an introductory video about it, “ Lesson # 1: Why designers do not manage to learn web technologies ”. The videos were viewed 1296 times, 83 times they like and 7 times they have been disabled.

I wanted the example to look like a real one. But to most viewers, he seemed too complicated. To explain the principles of its work, I wrote down the analysis of a simplified example: “A simplified example of data templateization ”.

Further, the plan was this: to sort out different topics about JS based on this example, so that with each lesson the example would become clearer. And then, when people understand the basics, rewrite the example from pure JS to React and start a course about it.

And I started recording the first video:

1. JS syntax
2. Variables
3. Functions
4. Objects
5. Arrays
6. Json

The videos were long, 15–20 minutes each, and few could watch them all the way. Therefore, I began to split the threads into smaller ones. For example, the parsing of conditional operators looked like this:

1. Conditional Operators: Basics
2. Boolean values ​​and comparison operators
3. Type conversion to logical
4. Logical operations
5. Ternary operator
6. Conditional assignment
7. Homework analysis

I recorded the same set of videos about the basics of working with DOM:

1. DOM: Basics
2. Search nodes on page
3. Reading node properties and their contents
4. Editing nodes
5. Traversing tree nodes
6. Homework analysis

Despite the fact that the videos have become shorter and lighter, the number of views has dropped. The videos are still too complex to watch between times. And those people who are willing to spend time watching, it's easier to watch one video entirely than a set of short ones. In addition, the videos have become just more boring.

What further to do with the course is not quite clear. On the one hand, dozens of views show that interest in the topic sit down. On the other hand, I am not satisfied with the quality of those materials, which are obtained and the amount of time it takes to create them.

In any case, creating a course was an interesting experience for me that taught me a few things:

1. Found a cool Sandox for working with the code: codesandbox.io . In it, you can create not only individual pieces like in codepen.io , but also whole projects with a file structure.
2. I learned how to work with the program ScreenFlow , which turned out to be very convenient for editing screencasts.
3. It is better to write a sound in living conditions on a buttonhole , than on a large microphone. To achieve a tolerable quality is much easier, because you do not have to deal with the echo from the walls.
4. You can write video on the phone, but you need a little skill. For example, in the last video I have a very poor recording quality, and the picture is constantly jumping. It looks like this is some kind of video stabilization feature in Note 9.
5. We must immediately buy the light. Two softboxes with AliExpress cost 3000 para, and the video quality has become noticeably better.
6. I found out that all my life I incorrectly called the “ternanny” operator “trinary”.
7. Before recording a video, it is better to check the pronunciation of all foreign words, and then it will be a shame. :)

Thank you for reading to the end. If you have any thoughts on how to make this course better, I will be glad to any comments. The course is designed to promote technology among designers, not developers. Therefore, I omit performance issues and sometimes intentionally “teach the bad,” since performance and cleanliness rarely play a large role in prototypes.


PS: I will respond to comments with post updates so that new readers do not have to ask the same questions.

PPS: If you are interested in following the development of the course, that is, the Telegram-channel detepr . To litter Habr with articles about the basics of development - the hand does not rise. So the next article about the course I will write somewhere in half a year.