For each article, you are required to read please post the answers to the following questions in your respective repo. Don't worry, your answers will not be graded. It's just a way to reflect on what you have learned.
- name (at least) one thing that was new to you
- name (at least) one thing that surprised you
- name (at least) one thing you intend to use in the future
-
0.5 HTML & CSS Practice - practice
-
0.7 Document Object Model - practice
-
0.8 Building a Tiny JS World (pre-OOP) - practice
-
0.9 Object oriented JS - practice
-
0.10 OOP exercise - practice
-
0.12 Memory pair game — real project!
-
0.14 Friends App - real project!
-
1.1 Lection 1. Стандарты W3C and WHATWG. Разметка HTML. Введение в CSS. Сетки.
-
1.2 Lection 2. Графика в интернете. А11Y и формы. Работа с контентом.
- One thing that was new to me: I used to think that GIT is "git add ." + "git commit -m "some comments" + "git push". I absolutely did not understand the difference between GIT and GitHub.
- One thing that surprised me: It turns, I do not now anything about GIT AT ALL.
- One thing I intend to use in the future: Now I like GIT. It seems to me very flexible and useful. I will try to improve my level of using GIT in the future with right branches and commits.
My results
My results
Basics of working with GIT - short, clear, with many examples.
Very cool! A huge library of materials, articles and quizzes about git. I watched not all of them but I will returning here again and again when I will have some troubles with GIT. Cheat sheet is great, saved it.
Step-by-step manual to resolve merge conflicts from GitHub page.
Step-by-step manual to resolve merge conflicts using the text editor.
My results
Here I found the portal leading to the endless world of modern web development. I have remembered out this place and I will research it step by step. Thanks Kottans for the useful links.
Began to practice. 50 lessons a day and see what would be...
Very good motivation article. I always have been liking Rahim with his clear and deep explanations. Thanks for it.
Back to contents- One thing that was new to me: it was absolutely new topic for me because all I could do with command terminal was "cd"-command. Now I know much more about it, so I think I will feel more confident with terminal in the future.
- One thing that surprised me: I do not know yet why I need Linux CLI but I trust Kottans teacher because last theme (Git Basics) was very useful for me and showed me the gaps in my knowledges.
- One thing I intend to use in the future: I think "man"-command will help me resolve any problem with terminal.
My results
My results
My results
My results
I cannot call the material presented in two parts of the article absolutely new for me, but this time the immersion into the material was much deeper than a simple listing of the server response status codes. I hope that repeated reading of the material allowed me to create a certain theoretical foundation, which will become the beginning of a deeper study of this topic for next practical creating of REST services.
My results
I liked this course because it gave me more confidence in my work with IDE terminal. One more thing - practical part was not difficult, so I liked it. It is very pleasant when you do something correct.
Reading this article improved my knowledge about HTTP one more time. Earlier I did not notice some details or just did not understand them properly. But still I have some difficulties with understanding of practical using these data. Until now I did not made any requests just "fetch" in my "Friends App". I hope next practices give me more material for comprehending and studying and I will catch the purpose of such articles. At the moment for me it is a bit abstraction knowledge.
I think that the best in this article is this words: "It goes without saying that there’s a huge difference between the relatively cursory amount of knowledge needed to build a simple prototype (the focus of this post) and the depth of knowledge and experience needed to be a truly qualified software engineer.".
I had many difficulties with this article. First, it's English was too complicated for me, the second was that the material itself was new and difficult for me. Anyway, it was interesting and I hope useful. I am planning to return one day and read all set of articles from this author.
My results
I had some difficulties with this task. First of all I had Windows 10 Home that doesn't support Hyper V so I couldn't use virtual machine with my PC. I changed the version of my operation system to Windows 10 Pro for Workstations. And then I had troubles with installing VirtualBox and Vagrant. Udacity doesn't give enough information to do it. So I spent a lot of time collecting information that I need. Anyway, it was very interesting and useful course.
My results
This course was a good way to understand of basics of Internet's work like Netcat using, names and addresses, firewals, etc. Moreover all the course I had the opportunity practicing with Linux terminal so my Ubuntu from course before was useful. Even through it was sometimes a bit complicated the course was interesting and helpful for my next steps.
My results
After studying "Learn Git Branching - Remote", this Udacity course was mostly like some addition with deeper studying "git rebase" command. Anyway, all GIT-materials was very useful for me and I am sure I will come back to them many times in future to make my GIT technique perfect at the end.
My results
I studied this set of lessons with part #0 Git Basic. So my emotions after studying were something like this:
- One thing that was new to me: I used to think that GIT is "git add ." + "git commit -m "some comments" + "git push". I absolutely did not understand the difference between GIT and GitHub.
- One thing that surprised me: It turns, I do not now anything about GIT AT ALL.
- One thing I intend to use in the future: Now I like GIT. It seems to me very flexible and useful. I will try to improve my level of using GIT in the future with right branches and commits.
My results
It was a good seminar. One thing I want to mentioned is that after all courses and quizzes in tasks "Git intro" and "Git for Team Collaboration" that I did before, particularly after all practical task that I did (because I made this task after the end of Stage0), after all code reviews that mentors made for my code and fixing all the mistakes this information seemed a bit like basics of using Git. But, anyway, thanks authors of this FrontEnd course for this great material.
I like when it is useful and so funny. Cool article.
It is one of the most completed manual for Git troubles. One part of these issues I have already been faced, another part I can imagine that I would face in nearest future. Unequivocally I save this repo because I am sure it would be very helpful for me.
My results
My results
- One thing that was new to me: I had never before use the tag "figure", I don't know why.
- One thing that surprised me: In all HTML courses in Russian I have ever seen before always many time takes a question of semantics, but in this course do not mentioned this question at all.
- One thing I intend to use in the future: I don't know - I always use all these tags and properties.
My results
- One thing that was new to me: in this course for me was very interesting to have known more about forms. It turns there were many possibility with this elements about which I even did not hear.
- One thing that surprised me: input-tag can support RegExp - guys, nothing can surprise me today any more. It is very cool news.
- One thing I intend to use in the future: RegExp with input-tag.
- One thing that was new to me: when I studied CSS, browsers support of Grid layout was not high and there weren't a lot of education materials in Russian, so I didn't practice with this wonderful features enough. Now, I think I have closed this problem in my education with this CodeAcademy course.
- One thing that surprised me: all the course was interesting and useful but there is no thing surprise for me.
- One thing I intend to use in the future: formerly I studied it but forget it - "inline-flex" value for "display" - now I will use this value more often.
My results
My results
My results
My results
My results
My results
My results
- One thing that was new to me: I have never seen before that break points could be making in separate css files. Interesting practice. Maybe)
- One thing that surprised me: There was a link to another course - "Responsive images" (maybe not) - I have tried to do this thing long time ago and something went wrong - now I have scheduled to study this course later.
- One thing I intend to use in the future: all studied methods and hacks.
My results
I heard a lot about this game but I have never been playing it before. So, it was quite easy to won it except level 24 (that's because in my practice I never used property "wrap-reverse"). Long story short, first easy task in this course. Thanks, because it is Saturday today.
My results
- One thing that was new to me: .foo[style*="color: red"] {color: firebrick !important;}
- One thing that surprised me: As a nonsense special case for (2), duplicate simple selectors to increase specificity when you have nothing more to specify. #myId#myId span { color: yellow; }
A visual way to get an understanding of how CSS Specificity works, and how you can write better CSS as a result.
My results
- One thing that was new to me: The phrase "What in the George W Bush was going on?"
- my favorite quote from any spec ever: "Note: This variance sucks, but it accurately captures the current state of the world (no consensus among implementations, and no consensus within the CSSWG)…"
- One thing I intend to use in the future: Cool solution for long words on small screens (suggested behavior right from the spec.):
.book {
display: flex;
}
.book .description {
font-size: 30px;
min-width: 0;
word-wrap: break-word;
}My results
- One thing I intend to use in the future: screensiz.es.
I used to made dropdown menu with pure css but it was the first time when this technique seems to me very convenient. It was a good practice. Again I did not pay my attention to notice from tutors). They said "Make sure you've added empty lines in each file from your PR - reason. If you forget to add an empty line at the end of the file GitHub will show it:". So, I had some problem with my pull request.
- One thing I intend to use in the future: Hide native checkbox with:
.check__input {
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
}-
One more thing I intend to use in the future: Hide native checkbox with: URL-encoder for SVG
-
One more thing I intend to use in the future: Hide native checkbox with: visually-hidden:
.visually-hidden {
position:absolute;
width:1px;
height:1px;
margin:-1px;
border:0;
padding:0;
clip:rect(0 0 0 0);
overflow:hidden;
}- One thing that was new to me: I think, now I mach better understand the function expressions - presentation of this material was very clear and easy to perceive.
- One thing that surprised me: I had some difficulties with quizzes - sometimes format of the answer was not completely described (one of them is "FacebookProfile Object Task").
- One thing I intend to use in the future: I very like Udacity courses and I am planing to study many of them in 2021.
My results
- One thing that was new to me: Next themes was new for me: "Rest Parameter", "Spread Operator", "Destructuring". Actually, I have read them before but I did not examine these themes deep and didn't use them in my practice. One more thing that I noticed, there was information about "Promice". Unfortunately, it was too little and I hope we will study it in next lessons.
- One thing that surprised me: I have very liked exercises from "freeCodeCamp". Unlike "CodeWars" where I have "Kata 5" and where exercises are or too difficult or too easy these exercises were picked up evenly with small increasing of difficulty.
- One thing I intend to use in the future: I am planning to finished course "JavaScript Algorithms and Data Structures Certification (300 hours)" from "freeCodeCamp" after "Stage 0".
My results
My results
My results
My results
- One thing that was new to me: I very liked this course. It helped me to understand more deeply Event Loop, Event Phases and .style.cssText() method. Further, I have rehearsed my knowledges about listeners and creating elements.
- One thing that surprised me: I thought that example with setTimeout(, 0) is using only for examination of understanding Event Loop and not use in practice.
- One thing I intend to use in the future: all knowledges that was received with this course are vitally important in my practice so I think I will use all of them in my projects constantly.
My results
- One thing that was new to me and I intend to use in the future: it was translating of the binary string. Thanks, stackoverflow.com for help.
My results
Unfortunately, I have spent too much time for this task. Let's accelerating! I want to thanks Bohdan Kovalchuk for his review. It made me thought again about many aspects of my code. I formerly worked as an engineer and I good understanding how it is boring to check students works. But for me I think this code review was the most important part of this course. Now I understand why nobody wants to work with people without experience. Bohdan made a great job.
I've made this task even though I not fully understand entire idea of this tiny world yet. Maybe that was a cause of some difficulties with this task. I want to thanks Oleksiy Rudenko for his review - strictly but fair). Every code review make my code better.
This Udacity course for me was like some Evolution Theory of JavaScript OOP. It was the way to combine my fragmentary knowledge together that I received earlier. Now I feel like I know more about OOP, but low level of understanding Lesson 10 (Prototype chains) do not let me to feel myself more comfort in these themes. I understand that I will return to this material later.
My results
I thank Oleksiy Rudenko for his time and work with my code. Code review is very important for me and always makes my code better. I made some mistakes in my code which I hope I wouldn't do next time.
My results
With this task I got a set of articles that helped me to start my way in OOP. It is a good start but there is a lot of work and practice in the feature to feel at least the same confident that using functional programming. I am sure I will get this opportunity with "Kottans".
In fact, the "Tiny JS world" and its "Post-OOP" part for me was the most difficult task in this course. Sometimes the hope that one day I will finally do it properly left me. Anyway, I understand that my solution for this task was approve as in advance and I will try to work more hardly to comprehend this Zen in my next steps. I want to thanks Oleksiy Rudenko for his reviews and patient in work with my code.
- One thing that was new to me: I very liked this course. I have never heard before about "offline-first" conception. Even though I failed to got opportunity to worked with education application "Wittr" because of the version conflict my NPM and application's Gulp I could got the structural knowledges about implementation "offline-first" conception with any application I need.
- One thing that surprised me: I used to work with Local Storage with my previous educational projects (like "Personal Scheduling Service" for example) but now I know about IDB, its methods and possibilities, and I think it opens new ways to implement much scale projects in my future actions.
- One thing I intend to use in the future: I hope I will have chance to study this material more deeply, have a lot of practice with it and then I think I would use it in my projects constantly.
My results
I thank Maksym Kalashnyk for his time and work with my code. Code review is very important for me and always makes my code better. Having pay attention to his notices about using event delegation and template strings, I tried to implement them both by reconstruction my app. I hope that this deep changes didn't make his work harder with checking my code.
When I started study HTML and CSS I have spent a lot of time learning Site Performance and conducting experiments on my landings with Google Page Speed to change performance index of them. Now it is obviously that some things I was doing correct, some things I was doing wrong, but I even did not know about most of patterns. Now I have a whole science named "Front-End Performance". It will takes a lot of time to study it but it is necessary. Thanks author and Kottans for this article.
Now I have the list of simple rules to optimizate my sites and I know how use Network tab of DevTools. These knowledges open many ways to practice with Google SpeedPage and other apps for analysing the performance of my projects.
My results
With this article I have started better understood building of CSSOM and working of CSS engine of browser. During the reading I always wanted to install this wonderful browser Mozilla and I have always remember that I have it and it is very slow and boring)
- One thing that was new to me: I have never heard before about "will-change" CSS property and it looks like using it is very good idea improve performance of the app. I watched many ru-chanels about creating of simple web pages like landings or so, but nobody didn't even mention about it.
- One thing that surprised me: I couldn't suggest that using BEM methodology may improve web page performance that much that we would see it.
- One thing I intend to use in the future: Dev Tools doesn't not stop surprise me. How many cool features it has! Unfortunately, professors in course use some old version of Chrome, so I have to find some newer material about it. Cool, that now I know what I need to find. And of course I need to know more about requestAnimationFrame() method.
My results
I used try to figure out how to use a "picture" tag and attribute "srcset" when I did my first steps with landings. Honestly, with russian language resources it was difficult to do. Now I have a step-by-step manual to make it properly and I can't wait to try it and get cool SpeedPage index.
My results
Once again these magic "transform: translateZ(0)" and "will-change". I need help - I need practice. However, now the way is obvious. It was very useful article for me.
- One thing that was new to me:
<link rel="dns-prefetch" href="//hostname_to_resolve.com">
<link rel="subresource" href="/javascript/myapp.js">
<link rel="prefetch" href="/images/big.jpeg">
<link rel="prerender" href="//example.org/next_page.html">
-
One thing that surprised me: "...we are not limited by the channel width. The problem is the latency between client and server."
-
One thing I intend to use in the future: This article operates with complex concepts that will take time to fully understand.
The technique of choosing between the "async" and "defer" attributes of the "script" tag is explained and argued in a cool and accessible way.
When I was starting to do this task I have remembered that I have always wanted to try some library with google like styles and some basic functionality. I have chosen MaterializeCss and it was the biggest mistake. Those problems that I have got did not cost it. When I was finishing my work with this task I have noticed, that I almost did not use any possibility of this library because I just did not need them instead I have many troubles with positioning elements with float that use MaterializeCss. Long story short "Never again". I want to thank Ivan Tytarenko for his time and work with review of my code. I have tried to make all changes according his notices and video of AMA helped me very much. It was forgetless experience for me and I am sure that it gave me huge new knowledges that I did not have before.
In the course I liked a thorough approach to the selection of material - a huge number of very useful materials and courses, the opportunity to improve the level of technical and spoken English (course materials, communication with mentors in GitHub), and, of course, code review from mentors - experience, which can hardly be obtained anywhere else but real work.
Frontend Course Stage 0 (self-study). Finalists
Lecturer: Alexandr Ostrovny
Разметка страницы может быть непростым занятием, особенно поначалу. Какой тег выбрать? Какой класс добавить? Какой должна быть разметка, чтобы стили одного элемента не поломали другой?
На все эти случаи есть простые правила, следуя которым вы сможете писать легко писать чистый, хорошо структурированный HTML-код, который будет удобно читать и приятно поддерживать.
Lecturer: Alexandr Ostrovny
CSS свойство overflow-wrap применяется к строковым элементам, устанавливая должен ли браузер расставлять переносы строк внутри неразрывной строки, чтобы избежать выхода текста за границы элемента.
CSS свойство hyphens указывает, как следует переносить слова через дефис, когда текст переносится на несколько строк. Оно может полность запретить перенос, делать перенос в местах, заданных вручную или позволять браузеру автоматически расставлять переносы, где это необходимо.
Lecturer: Anastasiya Mashoshyna
Scroll Bouncing On Your Websites
When you scroll to the very top of a page or HTML element, or to the bottom of a page or element, on a device using a touchscreen or a trackpad, and empty space can be seen for a moment before the element or page springs back and aligns itself back to its top/bottom (when you release your touch/fingers)
This command uses a binary search algorithm to find which commit in your project’s history introduced a bug
The prefers-color-scheme CSS media feature is used to detect if the user has requested the system use a light or dark color theme.
Websockets: что такое вебсокеты и как они работают? Часть 1
The WebSocket API is an advanced technology that makes it possible to open a two-way interactive communication session between the user's browser and a server. With this API, you can send messages to a server and receive event-driven responses without having to poll the server for a reply.
CSS counters let you adjust the appearance of content based on its location in a document.
The attr() CSS function is used to retrieve the value of an attribute of the selected element and use it in the stylesheet. It can also be used on pseudo-elements, in which case the value of the attribute on the pseudo-element's originating element is returned.
Your web pages have an underlying meaning that people understand when they read the web pages. But search engines have a limited understanding of what is being discussed on those pages. By adding additional tags to the HTML of your web pages—tags that say, "Hey search engine, this information describes this specific movie, or place, or person, or video"—you can help search engines and other applications better understand your content and display it in a useful, relevant way. Microdata is a set of tags, introduced with HTML5, that allows you to do this.
Lecturer: Christina Landvytovych
At KONTRA, we believe every software engineer should have free access to developer security training. KONTRA OWASP Top 10 is our first step in that direction. Inspired by real-world vulnerabilities and case studies, we have created a series of interactive application security training modules to help developers understand, identify and mitigate security vulnerabilities in their applications.
Roman Yakobchuk - A tale of one request. How Internet works under the hood
Lecturers: Ivan Tytarenko Anastasiya Mashoshyna Christina Landvytovych
Lecturer: Christina Landvytovych
1. Створити плажку, де буде відображатись місця,які вибрали (дизайн на ваш розуд)
2. По кліку на сидіння повинно відбражатись ряд та місце
3. При повторному місце знакає
1. Створити кнопку підтвердження та модальне вікно.
2. В модальному вікні показати кількість мість та їхню суму
Lecturer: Christina Landvytovych
You Don't Know JS Yet: Scope & Closures - 2nd Edition
Обучение JavaScript "Scope and Closures" You don't know js
Обучение JavaScript "this - контекст исполнения функции" You don't know js
Lecturer: Christina Landvytovych
Lecturers: Oleksiy Rudenko
Kottans Frontend Tasks Review Checklist
Lecturer: Anastasiya Mashoshyna
Обучение JavaScript "Объекты" You don't know js
Домашнее задание по желанию: написать свою реализацию Function.prototype.bind. Чтобы работала, как обычный bind, но называлась, например, myBind.
Lecturers: Anastasiya Mashoshyna Ivan Tytarenko
Lecturer: Christina Landvytovych
You Don't Know JS: this & Object Prototypes
What Makes JavaScript JavaScript? Prototypal Inheritance
JavaScript properties: inheritance and enumerability
Lecturer: Anastasiya Mashoshyna
You Don't Know JS Yet: Types and grammar constructions
Lecturer: Anastasiya Mashoshyna
Lecturer: Anastasiya Mashoshyna
-
Филипп Робертс: Что за чертовщина такая event loop? (0h 27m)
-
An open standard for sound, interoperable JavaScript promises—by implementers, for implementers
You Don't Know JS Yet: Asynchronous processing and optimization
Lecturer: Christina Landvytovych
Lecturer: Anastasiya Mashoshyna
We have a problem with promises
Async functions - making promises friendly
async / await in JavaScript - What, Why and How - Fun Fun Function
Error handling Promises in JavaScript - Fun Fun Function
Lecturer: Anastasiya Mashoshyna
ES proposal: Shared memory and atomics
Асинхронное программирование в Node.js и JavaScript - Тимур Шемсединов
Lecturer: Anastasiya Mashoshyna
You Don't Know JS Yet: ES6 and not only
Lecturer: Nikita Shulipa
- Выбрать тематику приложения, для которого есть (уже написано) API.
- Написать требования к приложению в виде списка фич, реализуемых вами за вменяемую единицу времени (помните пункт про последовательное улучшение a.k.a. переписывание своего приложения?
- Создать репозиторий с файлом readme.md на github.com, куда выложить требования списком, в порядке убывания важности.
- Нельзя брать идею приложения для прогноза погоды!
Lecturer: Nikita Shulipa
- Взять 3-4 первые фичи из вашего списка, отсортированного по убыванию важности.
- Придумать для них общий UI и написать реализацию (MVP) приложения на чистом JS, используя компонентный подход.
Lecturer: Nikita Shulipa
Lecturer: Nikita Shulipa
-
P0: use real network API requests instead of fixtures in your app.
-
P0: Client-Server communications: read Сетевые запросы.
-
P1: GraphQL vs REST:
-
P1: template literals:
-
P2: parsing source code (JS, HTML/HTMLx):
-
read Как работает JS: абстрактные синтаксические деревья, парсинг и его оптимизация @ habr.
-
read HTML5 Parser @ MDN.
-
quasi-JSX based on template literals using DOMParser Web API, ES6 Quiasi-literal for JSX
-
implement your own HTML or JSX parser.
-
code reading github.com/tmont/html-parser.
-
Lecturer: Oleksiy Rudenko Anastasiya Mashoshyna Ivan Tytarenko
Lecturer: Nikita Shulipa
Lecturer: Oleksiy Rudenko
Lecturer: Oleksiy Rudenko
Lecturer: Oleksiy Rudenko
Целью данной лекции является систематизация знаний для понимания логики дальнейшего построения фреймворка в контексте нашего курса, а также реализация хуков useState и useEffect.
Lecturer: Vitalii Ovcharenko
Lecturer: Vitalii Ovcharenko
- Даем определение "data flow"
- Имплементируем и внедряем Context
Lecturer: Bohdan Kovalchuk