Originally published on his blog Hawstein.com.

directory

  1. preface
  2. Color and style
  3. Home page
  4. A series of page
  5. Video list page
  6. Play page
  7. My page
  8. The FAQ page
  9. conclusion

preface

After nine days of development, AlgoCasts 2.0 went live.

Nine days was a bit more than I expected, and there was a lot of time spent fine-tuning the details. For example, it can take half a day or even a day to tweak a page UI to make it look as good as I can. I remember trying all sorts of ideas for the header on my home page, looking at a lot of website designs, and spending a lot of time trying to figure out if I could make pretty curves with pure CSS. Although I failed to meet my requirements and adopted other schemes, I learned a lot during this process and generated some new ideas that I had the opportunity to put into practice. For example, research and design can take half a day at the beginning to create a cover for a collection/feature. Of course, it takes time, but it’s fun 🙂

So what are the changes in AlgoCasts 2.0?

Color and style

1.0 didn’t take into account the overall color scheme, so you might see a black and white front page, then orange buttons, then dark green and light green package cards and buttons…

The main color of 2.0 was changed to purple (color # 6E60CC). This is a very subjective thing, but I decided to go with purple as the main color of 2.0 because I found a lot of websites that were comfortable looking at development or design related websites. To match the color, I used a purple code highlighting theme (I swapped out the Solarized dark I’d been using for years), which is pretty sexy!

In addition, 2.0 makes a lot of use of color gradients to make it look more layered.

Home page

The information displayed on the home page remains the same: Header, watch video, package card, and footer.

The background of the header is made purple gradient and rotated 6 degrees to make it oblique. In addition, it is accompanied by a self-made image that is not so ugly, which feels more beautiful than simply putting text.

Three videos have been changed from four to four. Since the original video was done earlier, it was often ridiculed as ugly and I thought I was using the mouse to write on the board. I’m not that unprofessional, okay? Drop it! I use a Wacom tablet for blackboard writing, but the handwriting is just ugly. But made so many videos, whether the quality of the board or the quality of the recording, are better than the beginning. Therefore, taking advantage of this revision, I changed the video on the home page to some videos made later, hoping to reduce the misunderstanding that I use the mouse to write on the board. The selection of videos is also reasonable. The difficulty ranges from easy to difficult. Students of different levels should be able to see their own videos.

There’s nothing to say about the package cards, but the big green ones have been replaced.

Footer is not moving. I think we can optimize this area in the future. The 2.0 release didn’t polish all the details, leaving some for 3.0.

A series of page

In the future, videos will be organized by series or episodes rather than episodes. As the beginning of the recording is algorithm topic video, so in the front of a large table display. But from now on, videos outside of algorithmic topics, such as a project, such as a full course on data structures, should be placed in their own series/project, not mixed with algorithmic topics.

A series/project revolves around a central point of knowledge. For example, the sorting topic, that is all about sorting algorithms, for example, the dynamic programming topic, that is around dynamic programming, from principle to practice. Another example of a data structure course is a variety of common or advanced array structures. So, in order to fit the original algorithm problem into this structure, I’m going to put 50 videos in a series. After all, not all topics can be put into one series, which is unreasonable in terms of size and quantity. As soon as you open the algorithm problem series, hundreds and thousands of videos will come out, and you’ll be dumbfounded. It’s also good for people to buy small series. You can choose to buy 50 of them first, and then buy them if you think they’re good. It won’t hurt much if you don’t think I’m right. Of course, I encourage you to buy before I finish recording, because this is the early bird price, and the original price will be restored after recording.

Each series opens with a description of the series/project and a list of the videos it contains, the layout of which is based on laracasts, rather than the original large flat table. There are three sub-tabs under each series of topics: unlearned/learned/Favorites. Each user can mark the videos they have learned as learned. For the videos they like or those they don’t understand and want to watch again, they can click “Favorites” and put them in the “Favorites” column.

In the future, I will design a cover for every collection/feature. It takes a little more time, but I think it’s worth it to make the site look good.

Video list page

For those of you who are approaching the interview algorithm questions, you will want to put all the questions in one big flat sheet, so that you can manage them in one place, such as filtering by tag, sorting by unlearned/learned/favorites. As a result, 2.0 retains the video list page. In login state, the first level view is unlearned/learned/Favorites under the list, and all videos are placed in a large table regardless of series/topic. Also here, you can use tag for filtering.

By the way, the bookmarking function is a small requirement that a young man gave me a long time ago. I kept it in mind and finally implemented it in 2.0. I tend to put a bunch of small features in Todo and put them all together at once. In my video days, if it wasn’t a huge Bug or imperative requirement, I basically didn’t work on implementing it right away.

Play page

The video is still played in theater mode. Since I watch YouTube in this mode all the time, it’s a natural way to render videos when I make the play page. When not in full screen mode, this mode can render a larger picture and move other distractions to the bottom of the video. The current playing page is almost full of information related to the current video. In the future, we plan to add more convenient links, such as links of other videos under a series/topic or links of similar videos, so that we do not need to go back to the previous level to find the video.

My page

It is also the original display of purchased video large flat watch removed, changed to buy a series or special topic. As mentioned above, if you don’t like this level and still want to watch a large flat watch, it’s ok to keep it under the “Video” TAB.

The FAQ page

Did not change.

conclusion

AlgoCasts 2.0 has just been released. In addition to the features I recorded in Nice to Have that haven’t been done yet, if you have any suggestions or comments, please post them to the forum (you can log in the forum directly with the AlgoCasts account). I opened a post to collect them:

AlgoCasts 2.0 Recommended collection

Now it’s time for a new period of video production. I hope everything goes well.