Дорогие друзья! Предлагаем вашему вниманию перевод статьи, опубликованной на DOU.ua 10 ноября 2020 года. Оригинальная версия на украинском языке доступна по ссылке. На DOU размещено более 450 вакансий для .NET-разработчиков, что свидетельствует о популярности этой технологии. Редакция DOU собрала вопросы, которые .NET-разработчики задают своим коллегам на технических собеседованиях. Готовьтесь на здоровье :) Вопросы для Junior Общее 1. Назовите основные принципы ООП. 2. Что такое наследование, инкапсуляция, абстракция, полиморфизм: приведите примеры (желательно из собственного опыта). От какого класса неявно наследуются все классы в .NET? Разрешено ли множественное наследование в C#? 3. Что такое рекурсия? 4. Что такое лямбда-выражение? 5. Что такое параллельное программирование (многопоточность) и его назначение? Какие классы используются? 6. Что такое JSON? 7. Как вы понимаете REST? 8. Расскажите о SPA concept. 9. Какие GoF-паттерны использовали? 10. Какая разница между GET и POST HTTP методами? 11. Какую проблему решает Docker? Каковы его плюсы и минусы? 12. Чем принципиально отличаются unit-тесты от интеграционных тестов?   Обработка исключений 13. Что такое Exception? 14. Для чего служат try, catch, finally? В каком случае может не выполниться блок finally? 15. Что такое call stack? Какие ключевые слова вы знаете?   Платформа .NET 16. Что такое ASP.NET? 17. Какие существуют типы Action filters? 18. Что такое Web Service? 19. Что такое CLR? 20. Что такое сборщик мусора (Garbage Collector) на базовом уровне? 21. Что такое делегат? 22. Отличается ли Delegate от Action? 23. Что такое LINQ и для чего используется? Приведите несколько примеров применения LINQ. 24. Что такое пространство имен (namespace) и зачем это нужно?   Типы данных, коллекции и структуры данных 25. Какие типы данных вы знаете? 26. Какие примитивные типы знаете? 27. Что такое Nullable-тип? 28. Что такое тип значения, а что такое тип ссылки? Что из этого class, а что struct? В каком участке памяти они хранятся? 29. Чем отличаются value от reference type? String - это reference или value? 30.В чем отличие между string builder и string? 31. Что такое дженерики? Какие проблемы они решают? 32. Что такое boxing / unboxing? 33. Что такое Array, List, HashSet, Dictionary? Приведите примеры использования этих структур данных. Какая сложность операций с ними (поиск, вставка, удаление)? 34. Какие знаете коллекции? 35. Что делает оператор yield?   Классы, структуры и интерфейсы 36. Что такое класс? 37. Чем отличается класс от абстрактного класса? 38. Чем отличается абстрактный класс от интерфейса? Для чего нужны интерфейсы и какие задачи они выполняют? 39. Какие вы знаете модификаторы доступа? 40. В чем разница между обычным классом и статическим? 41. В чем разница переопределения метода между ключевыми словами new и override? 42. Какое различие между const и read only? 43. Разница между структурой и классом. Приведите примеры структур. 44. Может ли экземпляр структуры храниться в куче (heap)? Как это сделать?   Асинхронность 45. Что такое асинхронность и чем она отличается от многопоточности? 46. Какие есть ключевые слова для использования асинхронности в коде? 47. Что означают ключевые слова async / await?   Базы данных 48. Разница между реляционными и нереляционными базами, плюсы и минусы использования обоих вариантов. 49. Что такое индексы в RDBMS? 50. Какие типы JOIN существуют в SQL?   Тестирование 51. Для чего нужны unit-тесты? 52. Какие преимущества и недостатки использования unit-тестов? 53. Из каких трех логических блоков состоит unit-тест?   Вопросы для Middle   Общее 54. Вы набираете google.com в браузере. Расскажите как можно подробнее, что происходит в это время на HTTP-уровне? 55. Как работает HTTPS? 56. Как вы понимаете SOLID? 57. Какие протоколы сериализации вы знаете и где они применяются? 58. Что такое в вашем понимании чистая функция? Какие у нее преимущества? 59. Что такое dependency injection и зачем оно нужно? 60. Что такое cohesion и coupling (связанность и связность)? 61. Что такое IaaS, PaaS, SaaS и каковы различия между ними? 62. Какие способы отладки программы вы используете? 63. Какие знаете паттерны? Объясните суть перечисленных. 64. В чем суть паттерна Singleton? Почему его еще называют антипаттерном? 65. Для чего нужен паттерн Strategy? 66. Какие ключевые различия между распределенными системами и монолитными? 67. Какие паттерны проектирования распределенных систем вы знаете? 68. Какие есть принципы работы Message bus? Почему могут возникать дубликаты в очередях? 69. Какие принципы построения идемпотентных сервисов знаете? 70. Расскажите, как работают асинхронные методы? Чем асинхронность отличается от параллелизма?   Платформа .NET 71. Какие исключения нельзя остановить в блоке catch? 72. Какая разница между .NET Standard Class Library и .NET Core Class Library? 73. Объясните разницу между отложенным и немедленным исполнением в LINQ. Приведите примеры. 74. Для чего нужен метод ConfigureServices в Startup.cs? 75. Какая разница между services.AddTransient и services.AddScope в ASP.NET Core? 76. Что такое Kestrel? 77. Опишите ASP.NET MVC request pipeline. 78. Как в ASP.NET WebAPI настроить кэширование ответов на HTTP-запросы?   Управление памятью 79. Что такое куча и стек? Различия, принцип работы. 80. Как работает сборщик мусора? 81. Зачем нам зарезервированное слово using в C#, если в .NET есть автоматическое управление памятью? Как с этим связан disposable-паттерн и зачем такой сложный паттерн для managed и unmanaged ресурсов? 82. Какие особенности работы с Large Object Heap?   Типы данных, коллекции и структуры данных 83. Когда генерируется дженерик-класс конкретного типа - при выполнении программы или во время компиляции? 84. Что такое рефлексия? 85. Расскажите о коллекции LinkedList <T>. Чем она отличается от других коллекций? 86. Что такое индексатор? 87. Что такое immutable object? Какие преимущества дает использование immutable object? Предложите способ реализации его в .NET. 88. Когда использовать StringBuilder, а когда string? Как работает StringBuilder? 89. Что такое балансирование деревьев? 90. Что такое Key-value структуры? 100. Что такое хэш-функция и зачем нужны хэш-таблицы? 101. Какими свойствами должна обладать идеальная хеш-функция? 102. Что такое коллизии и как с ними бороться? 103. В чем заключается сложность CRUD-операций в Dictionary <K, V> в .NET? 104. Где хранятся массивы? Массивы примитивных типов? 105. В чем отличие между массивом (T [ ]) и списком (List <T>)? 106. В чем разница между IList <T> и IEnumerable <T>? 107. Зачем нужны Enumerable, Observable, AsyncEnumerable и какие модели получения данных они реализуют? 108. В чем разница между IEnumerable и IQueryable? 109. Что такое enum flags?   Базы данных 110. Расскажите о нормальных формах в СУБД. 111. Что такое индекс в БД? 112. Когда следует использовать индексы? Преимущества и недостатки. 113. Какие типы индексов существуют? Чем они отличаются? 114. Что такое ACID? 115. Какие вы знаете уровни изоляции транзакций? 116. Что такое план выполнения запроса (execution plan) в MS SQL? 117. Проблема: запрос долго выполняется. Какие есть методы ее диагностики и решения? 118. Как ORM (Entity Framework или Entity Framework Core) транслируют C# код в язык запросов базы данных? Что для этого используется?   Параллелизм 119. Для чего использовать Task.ConfigureAwait? 120. Например, есть веб-сервер, который по HTTP-запросу делает выборку из базы данных. Всего на сервере 16 тредов (threads). Каждый HTTP-request выполняет запрос в базу и ожидает результатов, в этом случае тред блокируется. Можно ли оптимизировать эту работу средствами .NET? 121. Зачем нужен ThreadPool? Опишите механику работы: как поток выделяется и возвращается обратно в ThreadPool.   Вопросы для Senior   Общее 122. Какие ещё практики, кроме ООП, использовали (AOP, FP и т. д.)? 123. Назовите три самые сложные проблемы, которые вам приходилось решать. Как вы это сделали, как пришли к этому решению? 124. Что такое слабосвязанный код? Чем он лучше сильносвязанного кода? Как бы вы достигали более слабой связности кода? 125. Использование статических классов повышает или понижает связность кода? 126. Как можно измерить performance кода? Влияет ли факт замеров на производительность? 127. Для чего используются и как работают multi-stage билды в Docker? 128. Как понять, что какая-то часть кода утилизирует много памяти или долго выполняется? Что может быть ботлнеком в разных случаях? Какие есть способы уменьшения памяти и трафика памяти? 129. Как бы вы реализовали cross-cutting concern (например, логирование, валидация, транзакции)? 130. Расскажите о Rest Maturity Model. 131. Что такое CPU и IO-bound задачи? 132. Что такое маршалинг? 133. Как работает async / await (подробно)? Почему нельзя использовать async void методы?   Платформа .NET 134. Как работает lock? Можно ли использовать структуры внутри выражения lock? 135. Что такое Expression Tree? 136. Как работает сборщик мусора (подробно)? Почему в GC три поколения, а не, скажем, пять, десять или два? 137. Как бы вы организовали трассировки Web API сервисов? 138. Как в .NET Core можно настроить хранение секретов на компьютерах разработчиков и на рабочих средах? 139. Как бы вы организовали процесс CI/CD .NET Core сервисов для их деплоймента в облачную инфраструктуру? 140. Как включить CORS в AspNetCore?   Типы данных, коллекции и структуры данных 141. Как реализованы дженерики? 142. Как создать собственный immutable-тип? 143. Как работает IEnumerable <T> (подробно)? 144. Какой алгоритм использует коллекция STACK? 145. Какие структуры данных вы реализовывали сами для платформы .NET? Расскажите, чем они отличались от стандартных реализаций. 146. Чем отличается интерфейс от абстрактного класса? В каких случаях вы использовали бы и то, и другое? 147. Почему в структуре нет конструктора по умолчанию?   Базы данных 148. Как БД сохраняет данные? 149. Какие типы БД вы знаете? 150. Как и когда БД лучше использовать? 151. Что такое денормализации? 152. Когда и какие уровни изоляции транзакций можно использовать? 153. Как в популярных СУБД реализованы принципы ACID (SQL Server, PostgreSQL и т. д.)? 154. Приходилось ли вам оптимизировать запрос в БД? Если да, то как? 155. Опишите, какие вы знаете потенциальные проблемы, связанные с параллельными запросами к БД. 156. Какую базу данных вы бы использовали для реализации distributed lock механизма? Расскажите детали реализации.   Микросервисы 157. Какую проблему решают микросервисы? 158. Какие есть способы коммуникации микросервисов? 159. Расскажите варианты реализации распределенных транзакций в микросервисах. 160. Что такое circuit breaker? 161. Каким образом вы будете налаживать систему, состоящую из множества микросервисов, если нужно отследить полный путь обработки запроса? 162. Что такое брокеры сообщений? Что такое at-least-once, at-most-once семантика? Есть ли какие-то брокеры, которые гарантируют exactly-once семантику? 163. Как должен работать код клиента брокера в зависимости от выбранной семантики? 164. Какие инструменты для работы с очередями вам известны (как в .NET, так и отдельные продукты), какой инструмент/продукт вы бы выбрали и почему?   MS Azure 165. Какие виды сервисов бывают в Service Fabric? 166. Какие особенности и ограничения Azure Table Storage? 167. Как бороться с проблемой холодного старта в Azure Functions? 168. В чем отличие очередей и топиков в Azure Service Bus?   Практические задания   Junior only Опишите, как бы вы реализовали калькулятор. Если понадобится добавить поддержку для римской системы счисления, что будете делать? Напишите программу, чтобы проверить, является ли число простым или нет. Найдите наименьший элемент в массиве. Упорядочите структуры папок в файловой системе. Напишите программу, которая симулирует fizz-buzz. Расскажите, что делает этот код, и предложите, как его улучшить. а) public bool IsArrayEmpty(string[] array) {   if (array.Length > 0)     return false;   else     return true; }   б) protected string GetClass(object url) {   string result = string.Empty;   if (SiteMap.CurrentNode != null && SiteMap.CurrentNode.Url == url.ToString())     result = "class=\"active\"";   return result; }   Middle Напишите программу для тиражирования последовательности Фибоначчи для заданного числа. Спроектируйте базу данных врачей и пациентов в SQL. Создайте stored procedure или запрос в SQL, который вернет врачей, имеющих больше, чем N пациентов. Проверьте коллекцию на наличие дубликатов. Спроектируйте thread-safe класс Singleton в C#. Надо записать некую сущность в базу данных и отправить событие в брокер сообщений. Как это сделать с минимальным риском потери данных? Имеются три сервиса. Выполняется HTTP-запрос на первый. Первый должен записать данные во второй, а второй - в третий. Как гарантировать, что данные при такой сложной коммуникации не потеряются? Как предотвратить записи дубликатов данных? Будет ли работать этот код и почему? a) SomeClass myClass = null; myClass.SomeMethod();   б) var table = GetTable(); table.Draw(); … private SomeClass GetTable() {   using(var table = new SomeClass())   {     table.ID = "www";     table.Width = "95%";     table.Controls.Add(tr);     return table;   } } Расскажите, что делает этот код, и предложите, как его улучшить: а) Shape shape = GetNextShape(); if(shape is Circle) Console.WriteLine(((Circle)shape).Radius);   б) public int Quantity {   get   {     try     {       return int.Parse(TxtQuantity.Text);     }     catch (Exception)     {       return 0;     }   } }   Что не так с кодом?   try {   SomeMethod(); } catch(Exception e) {   Log(e.Message);   throw e; }   Senior Как бы вы спроектировали FTP-сервер? Web-сервер? Хостинг картинок с разделением прав доступа? Систему, состоящую из front- и back-офисов? Создайте клон любой популярной социальной сети (Instagram, Facebook и т.д.) Допустим, есть сущность сделки (Bid). И в сделке есть список партнеров, с которыми эта сделка заключается. Сами сделки хранятся в сервисе сделок (bidding service), а партнеры - в своем сервисе (partners service). И когда показывается список сделок, на начальном скрине нужно отразить количество партнеров. Как бы вы спроектировали хранение и изображение этого счетчика? Задача на знание LINQ: с исходной коллекции данных необходимо получить новую коллекцию по определенным требованиям (например, отсортированную, без дубликатов и т. д.). Напишите программу, которая проверяет, является ли поле судоку 9×9 правильно заполненным. Реализуйте свой Select, Where, SelectMany со всеми характеристиками LINQ (отложенное исполнение, одномоментная (eager) проверка входных данных). С помощью LINQ напишите метод, который вернет такие элементы коллекции, которые делятся на N без остатка, отсортированные от наибольшего значения к наименьшему. Сигнатура метода: List <int> Filter (IEnumerable <int> collection, int n) ;. Напишите функцию, которая вернет сумму всех четных элементов массива, который передается в функцию (JavaScript).   Выражаем благодарность за подготовку статьи Алексею Краевому, Максиму Шнуренку, Андрею Ткаченку, Владу Медведовскому, Сергею Селецкому, Андрею Губскому, Сергею Мащуренку, Александру Скриннику, Андрею Соболю, Богдану Нановскому, Святославу Аксёнчикову, Ивану Корнелюку, Михаилу Пивоварову, Алексею Дерке, Евгению Гуреву, Михаилу Меркулову, Юрию Воронину.

Переход от AngularJS к Angular 2 был огромным шагом вперед. При этом изменилось абсолютно все, без обратной совместимости. В то же время, Angular 4 добавила новые возможности, но при этом была обратно совместимой с Angular 2 (Версия Angular 3 была пропущена из-за @angular/router, который на момент релиза был 3.x, в то время как остальные пакеты 2.x. Для того, чтобы избежать путаницы и перевести все пакеты к одной версии, третья версия была пропущена). Angular 5 - это следующее обновление, в котором изменения затронули механизмы, работающие «под капотом». Многие пользователи ITVDN задают вопрос об актуальности учебных программ видеокурса Angular Essential, который записан с использованием версии 2 и видеокурса Angular Advanced (версия 4). Angular 5 не является чем-то абсолютно новым, это улучшение существующего Фреймворка. Чтобы понять и начать использовать возможности, которые появились в пятой версии, необходимо знать основы, которые не изменились, начиная со второй версии. Что нового в Angular 5? Улучшенный компилятор. В Angular 4 компилятор перекомпилировал все файлы при каждом изменении. В Angular 5 компилятор работает только с теми файлами, в которых есть изменения, а это значит, что время на компиляцию проекта в целом значительно снизилось. Оптимизированная сборка. В Angular CLI при использовании production build совместно с версией Angular 5 по умолчанию будет применяться build optimizer, который с помощью семантического анализа кода приложения сможет значительно уменьшить его размер. Акцент на упрощение разработки PWA (Progressive Web Apps). PWA - это приложения, которые объединяют в себе лучшее, что есть в веб-приложениях и лучшее, что есть в мобильных приложениях. PWA работают независимо от выбранного браузера; адаптируются под устройство - десктоп, планшет, телефон; могут работать без подключения к Интернет или при перебоях со связью; выглядят как приложение, установленное на устройство; благодаря Service Worker содержат актуальную обновленную информацию; являются безопасными, так как работают через HTTPS; используют возможности, подобные push уведомлениям; Installable – позволяют пользователю добавить приложение на домашний экран устройства. Поддержка TypeScript 2.4. Angular 5 поддерживает версию TypeScript 2.4, что дает возможность использовать новые возможности TS: перечисления, основанные на строках, улучшения проверки типов при работе с generic-типами, week-type-detection и прочее https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-4.html Pipes, адаптированные под локализацию. Обновленные Pipes для Date, Currency, Number и Percent, нет необходимости использовать i18n. https://github.com/angular/angular/blob/master/CHANGELOG.md#i18n-pipes Новые события Router. Используя события ActivationStart и ActivationEnd или ChildActivationStart и ChildActivationEnd, можно организовать отображения индикаторов загрузки при смене маршрута. HttpClient. Новый HttpClient был добавлен в версии 4.3, старый http клиент помечен как depreceted в новой версии. В Angular 6 старый клиент будет удален. Из преимуществ нового клиента можно выделить самостоятельное извлечение JSON без необходимости явного применения метода map и возможность применять interceptors. https://angular.io/guide/http Валидация форм. Теперь при работе с формами, c помощью свойства updateOn, можно определить, в какой момент будет происходить проверка – на событие blur или submit (вместо проверки на каждое событие input). Замена ReflectiveInjector на StaticInjector. Изменен механизм для внедрения зависимостей. Для нового StaticInjector не нужен полифил Reflect (но при использовании JIT данные полифил все равно нужно будет использовать), что может уменьшить размер приложения. Angular CLI 1.5 использует Angular версии 5. Улучшение NgZone. NgZone стала еще быстрее, также библиотеку можно отключить для применения другой библиотеки для улучшения производительности. Улучшенный RxJS. Поддержка обновлена до версии 5.5.2 и выше. Поддержка новых pipable operators https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md Angular 5 получился компактней и быстрее, чем его предшественники, и не обошелся без новых возможностей. Запуск следующей версии Angular планируется на 28 марта 2018 года. Будем ждать улучшений и новых возможностей от команды Angular.

Введение Когда в 2008 году компания Microsoft придумала ASP.NET MVC, у многих возник вопрос: «Зачем нужна ещё одна технология ASP.NET?». Многие считают, что ASP.NET MVC не обязательно использовать, заменив на Web Forms ASP.NET. Однако, это неправда. Оба имеют свои плюсы и минусы. В статье мы рассмотрим преимущества этих двух технологий – и каждый сможет определиться, какая из них ему ближе. Мы также объясним понятия ASP.NET, ASP.NET Web Forms, MVC, ASP.NET MVC. Опытным разработчикам в ASP.NET MVC данная статья поможет переосмыслить свои концепции. Web-технологии Когда речь идёт о web-технологиях, на ум приходит классический ASP, PHP, JSP, ROR, ASP.NET Web Forms, ASP.NET MVC и другое. Классический ASP - web-технология, созданная корпорацией Microsoft. У классического ASP было два недостатка: слишком большой, неудобный исходный код и ненадёжность. К примеру, у Вас есть текстовые поля и кнопка. Нажав на кнопку, можно проверить данные, хранящиеся на сервере. Успешная проверка означает, что данные хранятся в базе, а в обратном случае выведется определённое сообщение об ошибке. В чём проблема такого сценария? Вам нужно совершить много действий. Приложение ASP.NET ASP.NET – приложение Microsoft, его структура построена на всеязыковой среде выполнения для построения динамических веб-сайтов – для создания можно использовать такие языки: C#, VB.NET и другие. ASP.NET поддерживает две модели: Web Forms и ASP.NET MVC. ASP.NET Web Forms Корпорация Microsoft первой вывела ASP.NET Web Forms из ASP, таким образом они решили множество проблем путём создания высокого уровня абстрагирования. Web Forms включает в себя postback (постит данные на заданную страницу) и ViewState. И самое интересное в том, что для ASP.NET Web Forms не требуется написания вручную ни единой строчки кода. ASP.NET 4.0 В ASP.NET 4.0 придумали, как преодолеть некоторые трудности: появилась возможность отключать и контролировать размер ViewState; с URL routing можно предоставить собственный URL вместо физического пути; в ASP.NET 4.0 мы имеем лучший контроль над ID элементов и, таким образом, интеграция с платформой JavaScript стала проще. Шаблон MVC MVC – архитектурный шаблон. Многие используют его с Java-технологией. MVC – не новое понятие, созданное Microsoft. Однако, в MVC ASP.NET нужно разобраться. До этого стоит уточнить для себя некоторые определения – в том числе, что такое MVC. Архитектурный шаблон – то, что решает наш вопрос на суб-системном уровне или на коротком уровне модуля. Речь идет о проблеме, связанной с архитектурой проекта. Это говорит о том, как можно разделить системы, а в частности - почему. Создаются библиотеки классов, компоненты, веб-сервисы, чтобы решить данный вопрос. MVC – архитектурный шаблон, позволяющий уловить тонкую связь между input-логикой, бизнес-логикой и UI-логикой. Платформа ASP.NET MVC ASP.NET MVC – еще одна платформа web-приложений от Microsoft. В ней устранены недостатки, имеющие место в предыдущих, подобного типа платформах. Эта платформа построена на всеязыковой среде выполнения (CLR) и полностью основана на MVC-архитектуре. Источник: http://www.codeproject.com/Articles/528117/WebForms-vs-MVC#Visual_in_Web

Введение Все мы уже знаем (ну или что-то слышали об) основных правила применения элементов разметки HTML5. Появилось много "плюшек" и “вкусностей” в новой спецификации HTML. Вместе с тем, появились новые элементы разметки. Но не все помнят/знают, как их использовать правильно. Коротко остановлюсь на главных нововведениях HTML5: Новые элементы: header, footer, section, article, video, audio, progress, nav, meter, time, aside, canvas; Новые значения для атрибута type тега ; Новые атрибуты HTML5 для элементов, такие как: dragable, contenteditable, hidden, contextmenu, data-*, dropzone, role, spellcheck[8] и т.д.; Атрибуты class, dir, id, lang, style, tabindex, title, существовавшие в HTML4, теперь можно применять ко всем елементам HTML разметки; Устаревшие элементы HTML страницы, которые частично поддерживаются и не рекомендуются к ипользованию: acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt, u. Итак,  более детально рассмотрим, как же правильно использовать основные новые теги. Элемент Элемент <main>содержит главную информацию вашего сайта. Такие повторяющиеся элементы как логотип, окно поиска, меню навигации не рекомендуется вкладывать в <main>. Также не стоит помещать сам элемент <main> внутрь элементов <article>, <aside>, <header>, <footer> или <nav>. Элемент В элемент <article> следует помещать тот контент, который может быть удален без ущерба для всего сайта. К примеру, краткое описание новостей, рекламный баннер, статья, комментарии. Можно вкладывать <article> в <article>, что будет связывать вложенные элементы <article> с родительским. Элемент Элемент <header>, как  понятно из названия, используется для оглавления отдельного контента или всей страницы. Должен содержать  заглавие, дату статьи и т.д. Элемент Элемент <footer> служит для предоставления информации об авторе статьи/страницы, ссылки на авторские права и т.д. Обычно является прямым потоком тега <body> (помещается сразу за элемент <body>). Элемент Этот элемент содержит информацию об окружающем контенте, дополнительную информацию пользователю. Может содержать такой элемент, как <nav>, сноски, ссылки и т.д. Элемент   Предназначен для предоставления контактной информации о статье или всей странице. Стоит отметить, что этот элемент часто помещают в , для размещения ссылок для связи с авторами страницы. Элемент Элемент <nsfw> (англ. - Not Safe For Work – небезопасно для отработки) используется для размещения на странице контента сомнительного характера. Часто этот тег используют для размещения порнографии. Чтобы браузер не отображал такой контент, используют CSS код  nsfw {display: none ;} Элемент Элемент предназначен для размещения видео контента на странице. Для корректного отображения контента стоит прописать дополнительно атрибуты width, height, src, controls. Ваш код будет выглядеть примерно так:   <video width="840" height="480" src="../video/myVideo.mp4" controls> video>   Если же Вы хотите разместить у себя на странице видео, которое расположено на сайте youtube.com. Вам стоит зайти на страницу c видео, правой кнопкой мыши нажать на видео, и из выпадающего меню выбрать “Получить код для встраивания”. Копировать код из “попап” окошка. В разметке вашего сайта, в нужном вам месте, кликнуть правой кнопкой мыши и выбрать “Вставить”. У вас получится примерно такой код:   <iframe width="854" height="510" src="https://www.youtube.com/embed/_giinWWrNlQ" frameborder="0" allowfullscreen>iframe>   В свою очередь, элемент > создает область, которая позволяет загружать любой документ в себя. Элемент Элемент <audio> позволяет добавить на страницу аудио дорожки. Также в HTML5: Реализована возможность добавления на станицу геолокационных карт, а также определения местоположения пользователя в данный момент. Теперь мы можем рисовать с помощью технологии canvas. А также использовать 3D графику. Стало возможным просто перетягивать документы и прикреплять к письму. И еще много новых "плюшек", которые вы можете узнать и научиться их использовать, пройдя наши курсы в учебном центре CyberBionic Systematics. Всем удачи и хорошего кода)

Введение  CSS3 произвел революцию в мире веб разработки, поскольку он принес много новых функциональных возможностей. Эта технология продолжает развиваться и внедрять новые возможности. В Новом, 2015 году будут добавляться новые свойства, про некоторые из них мы расскажем в этой статье. CSS - маски В Webkit браузерах CSS-маски функционируют уже давно. В ноябре 2014 года была опубликована новая спецификация CSS масок, теперь мы ждем, когда поддержку данного свойства получат все браузеры. Что такое маска? Проще говоря, маской можно назвать изображение с белой или черной фигурой и прозрачным фоном. Применяя маску на изображение или элемент, мы получим маскированное изображение. Пример:  Маски можно использовать сейчас, но, к сожалению, только в браузерах Webkit отображение будет корректным. Использование масок в Webkit На движке Webkit маски выполняются очень легко, просто используйте тег mask. .element {      -webkit-mask: url('mask.png'); } Давайте попробуем создать пример. Вот наше изображение маски:  Накладывать маску будем на эту фотографию: Теперь добавим немного кода:  class="element">     src="image.jpeg" alt="" /> type="text/css"> .element {    width: 500px;    overflow: hidden; } .element img {     -webkit-mask: url(mask-image.png); } В результате мы получим вот такое изображение:  Кроме того, можно использовать свойства. Например, Вы можете установить позицию: .element img {     -webkit-mask: url(mask-image.png) 30% 30% repeat-x border-box;         /* .. тоже самое что и.. */     -webkit-mask-image: url(mask-image.png);     -webkit-mask-position: 30% 30%;     -webkit-mask-repeat: repeat-x;     -webkit-mask-box-clip: border-box;         /* Так же можно указать и размер! */     -webkit-mask-size: 30% 30%; }   CSS-исключения CSS-исключения (CSS Exclusions) - очень мощная функция, позволяющая изменить отображение контента на странице. Используя только одно свойство, можно поменять весь стиль страницы, это очень похоже на редактирование страницы в редакторе WYSIWYG. Давайте посмотрим на самое интересное свойство - “wrap-flow”. Wrap-flow Wrap-flow позволяет определить, какое количество элементов влияет на другие, когда они поверх остальных. Зачастую блоки перекрываются. С помощью wrap-flow все элементы адаптируются под верхний элемент на странице.  Wrap-flow имеет несколько настроек: auto: обычное состояние, ни один из элементов не регулируется start: все, что после элемента - удаляется end: удаляется все, что до элемента  both: удаляется контент под объектом minimum: удаляется сторона с наибольшим количеством контента maximum: удаляется сторона с наименьшим количеством контента clear: c двух сторон от объекта всё содержимое удаляется Диаграмма для помощи: Композиции и модели смешивания (Composition and Blending) Режимы смешивания в CSS стали частью официальной спецификации W3C. Это значит, что Вы можете выполнять затемнения основы (color burn) через CSS. Данная спецификация новая, так что возможны изменения прежде, чем она попадет в другие браузеры. У нее такой принцип работы: есть 2 изображения, они накладываются одно на другое с помощью абсолютного позиционирования. Это будет выглядеть так: <div class="blend">    <img src="duck.gif" alt="Duck" class="duck" width="500" height="500" style="position: absolute; top: 0; left: 0" />    <img src="penguin.gif" alt="Penguin" class="penguin" width="500" height="500" style="position: absolute; top: 0; left: 0" /> div> Пример CSS кода:  .blend {      position: relative; } .blend .duck {         mix-blend-mode: overlay; } В целом вся конструкция выглядит так:  Если Вам интересно, то можете попробовать режимы наложения прямо сейчас. Для этого Вам необходимо скачать Adobe’s experimental webkit browser Источник: http://www.inserthtml.com/2013/01/future-css3/ 

Друзі, привіт! Сьогодні ділимося приємною новиною з тими, хто націлений на вдосконалення своїх знань у FrontEnd, а саме – на поглиблене вивчення популярної JS-бібліотеки React, – на ITVDN вийшли всі уроки курсу “React Поглиблений”! Курс українською мовою! React використовували для розробки такі відомі компанії, як Facebook, Instagram, Netflix, Dropbox, GitHub, Discord, Uber, – і це лише декілька прикладів з численних проєктів. Разом із розповсюдженням даної бібліотеки зростає і попит на React розробників різного рівня. Під час проходження курсу ви розроблятимете вебзастосунок на основі публічного API, використовуючи різноманітні техніки, які пропонує React та його суміжні бібліотеки. Ви навчитеся впроваджувати роутинг за допомогою бібліотеки React Router, використовувати CSS-препроцесори та UI бібліотеки, публічні API для отримання даних. Також ви будете використовувати Redux Toolkit для спрощеного написання коду та розв’язання багатьох проблем, реалізуєте можливість логіну через сторонній identity provider та багато іншого. Автор курсу – Андрій Полевий, Software Developer у MindK. Сертифікований розробник Microsoft, 11+ років досвіду, включаючи роботу в компаніях лідерів української ІТ-індустрії – SoftServe та Intellias. Професійний стек: JavaScript, React, C#, SQL, Azure, ASP.NET Core. Курс складається з 15 уроків загальною тривалістю 10 годин 5 хвилин. Структура курсу: Створення проєкту. TypeScript. Типізація в React. Стилізація. Частина 1. Стилізація. Частина 2. Практика 1. Робота з API і стилізація. Хуки useContext, useRef, портали. Кастомні хуки та memory leak. Робота з формами. Мемоізація. Оптимізація. Redux Toolkit, RTK Query. Практика 2. Міграція на RTK Query. GraphQL. JWT token, авторизація, приватні та публічні маршрути. Server-side Rendering. Тестування компонентів. Чого ви навчитеся на даному курсі: Будувати state management за допомогою Redux і Redux Toolkit. Розуміти основи популярних CSS-фреймворків для стилізації. Використовувати бібліотеку Material UI і її компоненти замість ручної стилізації. Використовувати React hooks і створювати власні (кастомні) хуки. Досліджувати проблеми швидкодії React-застосунку. Використовувати React Developer Tools для дослідження дерева компонентів та профайлингу. Розв’язувати проблеми з memory leak. Використовувати React.lazy та Suspense для динамічного завантаження модулів, React Router для динамічного завантаження маршрутів. Використовувати RTK Query для звертання до API. Додавати автентифікацію для застосунку на основі OAuth2. Використовувати мову запитів GraphQL для здійснення запитів та зміни даних на сервері. Працювати з концепцією Server-side Rendering (SSR). Дізнаєтеся про Jest Testing Framework та його альтернативи, навчитеся тестувати компоненти за допомогою React Testing Library. Попередні вимоги Для проходження курсу потрібно мати знання та практичні навички роботи з React на рівні курсу “React Базовий”. Зміст курсу розрахований на веброзробників, котрі вже знайомі з даною бібліотекою і хочуть розширити свої знання. Дивіться перший урок у вільному доступі. Курс вже доступний на нашому сайті в повному обсязі – до кожного уроку є практичні завдання та опорний конспект. Якщо у вас є активна підписка, ви можете дивитися його прямо зараз. Курс входить до комплексної програм підготовки за спеціальністю FrontEnd Developer.     

Всем привет! У нас хорошая новость для FrontEnd разработчиков - в каталоге ITVDN появился практический курс "Создание сайта на Vue.js". Главная задача любого FrontEnd разработчика - оживить макет веб-сайта, вдохнув в него жизнь при помощи HTML, CSS, JavaScript и сопутствующих технологий. Однако, прогресс не стоит на месте - с каждым годом сфера разработки сайтов все больше и больше расширяется и преображается. Как следствие, количество требований к сайтам также увеличивается. Чтобы облегчить разработку девелоперам и реализовать все требования заказчика, создаются специальные фрейморки. Один из популярнейших - Vue.js. Чтобы раскрыть его потенциал и продемонстрировать основной инструментарий этого фреймворка, мы записали для вас практический курс “Создание сайта на Vue.js”. Что полезного вы можете извлечь из него? Курс “Создание сайта на Vue.js” поможет вам на практике изучить возможности платформы Vue.js, рассматривая процесс создания своего веб-проекта с нуля и постепенно добавляя в него модули и плагины. Данный фреймворк считается гибким, легким в освоении, легко интегрируемым со сторонними технологиями, с кратким и лаконичным синтаксисом, а также прекрасно подходящим для решения простых задач сайтостроения. Автор курса Максим Сластен - специалист, у которого за спиной 6-ти летний опыт FrontEnd разработки. В записанных видео уроках Максим делится эффективными техниками создания сайта на Vue.js, которые он сам успешно применяет в своей работе.   Структура курса: Введение в Vue.js. Авторизация и работа с роутером. Работа с маршрутизацией и знакомство с компонент фреймворком. Работа с интернационализацией. Работа с компонентами и страницами. Работа с поиском и функциональными элементами страницы. Работа с е2е тестированием (Cypress). Тестирование функционала. Jest. Финальная доработка и деплой.    После успешного прохождения курса вы научитесь: Выполнять установку VUE CLI и настройку стартового проекта. Создавать форму логина для входа на сайт. Организовывать настройку и защиту роутера. Организовывать авторизацию, аутентификацию, используя JWT токен. Создавать свой собственный сервер, который будет создавать токен и возвращать его пользователю. Выполнять тестирование сервера c использованием Postman. Использовать компоненты из библиотеки компонентов. Создавать свои компоненты на основе компонентов библиотеки. Выполнять стилизацию компонента и настраивать адаптивность сайта. Использовать плагин интернационализации Vue i18n. Создавать переводы на сайте. Создавать файл переводов, реализовывать переводы для всех компонентов сайта. Работать со структурой проекта, добавлять новые компоненты, такие как компонент списка статей. Тестировать проект с помощью Cypress. Модифицировать проект для покрытия компонентов тестами. Оптимизировать тесты модификациями конфига Cypress. Применять для тестирования инструмент для создания юнит тестов Jest. Создавать свой репозиторий и использовать для деплоя сервис Heroku. Выполнять деплой сайта на Netlify. Какими предварительными знаниями вы должны обладать? Необходимый бэкграунд для успешного прохождения курса: хорошее знание HTML, CSS, JavaScript. Курс входит в специальность FrontEnd Developer. Если вас заинтересовало создание сайта на Vue.js и вы хотите ознакомиться с преподавателем, а также его манерой подачи материала, переходите по ссылке и смотрите бесплатный вступительный урок от Максима. Также можем вам предложить ознакомиться со следующими статьями: “Инструменты Vue.js разработчика” и “Переход с jQuery на Vue.js”.

20 апреля компания Lemberg Tech Business School будет проводить уже одиннадцатый Lviv IT Outsourcing Forum! Наряду с Kyiv IT Outsourcing Forum это уже традиционная конференция для владельцев и C-Level менеджмента украинских IT аутсорсинговых компаний. Планируется, что в этом году в конференции примут участие около 400 CEO, CTO, COO, CFO директоров из Украины, Германии, Израиля и других стран Европы. Зарегистрироваться - http://bit.ly/2SbvFxT Промокод на скидку 15 % - LIOF15ITVDN Темой следующего LIOF будет "Трансформация IT компании. Quo Vadis?». Вопросы, которые будут обсуждаться:   Куда развивать собственную IT компанию? Каковы перспективы развития в ближайшие 3-5 лет? Как перейти в новые технологические ниши? Какие ресурсы и инвестиции это потребует? За какое время они могут окупиться? Что происходит на мировом рынке IT-сервисов? Возможна жесткая специализация компании по технологии, домейн, рынка и продукта? Примеры сервисно - продуктовых компаний которые "взлетели" в 2018 году. Как построить sales процесс в технологической нише в средней компании? Возможен ли переход в продукты? Что делать, чтобы перейти в консалтинговую модель IT бизнеса в выбранной вертикали?   Цели конференции: изучить опыт передовых компаний к изменению себя в высокопроизводительных игроков глобального рынка проговорить возможные угрозы внутреннего рынка талантов и существующим легально-налоговым принципам работы открыть новые возможности наиболее продуктивным владельцам компаний способствовать обмену опытом среди владельцев ИТ сервисных и полупродуктовых компаний Ключевые докладчики конференции: эксперты-практики, владельцы и директора IT-аутсорсинговых компаний, представители компаний-заказчиков аутсорсинговых услуг, консалтинговые и продуктовые компании.   Если Вы считаете себя одним из них и хотите подать доклад - https://docs.google.com/forms/d/1b_H_NDS1zz7f2gjulE97XqslbyoGg6mOBSOPLRFW88Q/viewform?edit_requested=true   Конференция традиционно проводится 2 дня. Программа первого дня - это 4 классических потока:   Outsourcing Business. О стратегических вопросах развития компании, стабильность, возможности рынка в Украине, выход на новые рынки, PDS 2.0. BDMS (Business development, marketing, sales). Об эффективном маркетинге, организации и реализации процессов продаж, управления финансами и поддержания отношений с клиентами. Evolution. О новейших рынках и путях развития компании. Организационная зрелость. Для опытных проектных менеджеров и СЕО аутсорсинговых ИТ компаний об управлении проектами, новинки в области и гибкие методологии. Образование, корпоративная культура, рекрутинг, HR.   "Фишка" Lemberg Tech Business School - частные встречи и консалтинг от опытных и прорывных владельцев IT компаний. Получите консультацию, которая стоит тысячи долларов, почти бесплатно! Также на события будет постоянно действующая биржа контактов. Частные встречи будут доступны участникам с билетом типа "GOLD". Второй день конференции только для "GOLD" участников, которые хотят практики и реальных примеров! Именно для них организовывают: Тур львовскими офисами крупнейших ИТ аутсорсинговх компаний! Серию воркшопов от докладчиков-практиков, которые поделятся своими наработками! Организатор: Lemberg Tech Business School: организация с 10-летней историей проведения успешных конференций: Lviv Mobile Development Day, GameDev Conference, Lviv PM Day, Lviv Freelance Forum и BDMSummit. Также в рамках LemBS действуют следующие школы: jCEO School, PMSchool, IMarketing School, SMM School, Startup School. Как было на предыдущих конференциях: Фото с осеннего KIOF 2018 -  https://www.facebook.com/media/set/?set=a.1889194937836183&type=1&l=800e5408f9 Фото с весеннего KIOF 2018 - https://www.facebook.com/media/set/?set=a.1658085234280489&type=1&l=2e2fda2139 Фото осеннего LIOF 2017 - https://www.facebook.com/media/set/?set=a.1511898538899160&type=1&l=13e27fa0cb   Презентации докладчиков из прошлых конференций можно найти тут - https://www.slideshare.net/lvivstartup. Видео - на youtube-канале - https://www.youtube.com/user/StartupLviv/videos Получите новые знания и нетворк для успешного развития вашей компании на Lviv IT Outsourcing Forum 2019.

Мы рады сообщить, что 23 июля количество подписчиков на нашем YouTube канале достигло знаменательной отметки 130000 пользователей. Благодарим всех, кто выбирает ITVDN. В период с 18 до 25 июля 2018 года проходила акция 130 тысяч подписчиков на YouTube канале ITVDN» . Ответы на 10 вопросов прислали 378 человек, но всего 75 участников ответили верно на все вопросы. Правильные ответы: Сколько лет YouTube каналу ITVDN? Ответ: 5 лет, канал существует с 30 апреля 2013 года Сколько авторов видео курсов и вебинаров на ITVDN? Ответ: от 50 до 100, так же мы засчитывали за правильный ответ более 100. У нас 56 авторов видео курсов и 44 автора вибинаров. Какое видео является самым популярным на канале ITVDN? Ответ: Видео курс Python Starter Урок 1. Введение в Python, который набрал более 524 тыс. просмотров Какие дополнительные сервисы есть на ITVDN.com? Ответ: Проверка домашних заданий, тренажер навыков, онлайн тестирование и сертификация, консультации с тренером. Кто из авторов ITVDN записал самое большое количество видео курсов? Ответ: Дмитрий Охрименко записал 17 видео курсов. Кто в 2018 году провел самое большое количество вебинаров на канале ITVDN? Ответ: Евгений Волосатов, который за 2018 год провел 12 вебинаров. Как часто на канале ITVDN публикуются новые видео уроки? Ответ: Ежедневно По какому из перечисленных языков программирования на канале ITVDN нет видео курсов и вебинаров? Ответ: Go Сколько стоит подписка ITVDN c полным доступом к 140 видео курсам на 1 месяц? Ответ: Подписка на 1 месяц стоит 19,99$ Как расшифровывается аббревиатура ITVDN? Ответ: IT Video Developers Network Список победителей акции: 1.    Vitaly Balashkov 2.    Андрей Горяев 3.    Mais Rasulov 4.    Константин Прохоров 5.    Михаил Ершов 6.    Chokan Yesmagambetov 7.    Ольга Сучкова 8.    Александр Шамрай 9.    Анна Шамрай 10.  Антон Жарый 11.  Андрей Абрашкин 12.  Янина Таран 13.  Владислав Захлебин 14.  Александр Буровцев 15.  Lyudmila Nadolina 16.  Vadim Ryzhkov 17.  Никита, Спесивцев 18.  Павел Фиронов 19.  Алексей, Булгаков 20.  Алексей Гревцев 21.  Людмила Лагутина 22.  Станислав Башкатов 23.  Валерий Каменев 24.  Александр Ткаченко 25.  Драгун Максим 26.  Михаил Путишин 27.  Карлен Саакян 28.  Alexey Orlov 29.  Светлана Кобенкова 30.  Александр Скирда 31.  Рамиль Абрамов 32.  Mustafa Ismail 33.  Ирина Исмаил 34.  Андрей Кривонос 35.  Максим Китица 36.  Прошина Ирина 37.  Manko Svetlana 38.  Алексей Коржаков 39.  Веретеник Руслан 40.  Городничий Максим 41.  Екатерина Щуплова 42.  Вячеслав Першин 43.  Андрей Воронов 44.  Борис Арканов 45.  Полина Борисова 46.  Максим Овсянников 47.  Александр Смольников 48.  Острецов Дмитрий 49.  Илья Гареев 50.  Vadim Romanenko 51.  Алексей Ермолаев 52.  Антон Максимов 53.  Виктория Марьенко 54.  Андрей Громовой 55.  Влад Красовський 56.  Татьяна Кутейкина 57.  София Гареева 58.  Павел Лобань 59.  Алексей Назаренко 60.  Yegor Loba 61.  Татьяна Притула 62.  Олег Шира 63.  Татьяна Мурадян 64.  Мария Подольская 65.  Светлана Королева 66.  Анастасия Лазарева 67.  Ирина Солокова 68.  Ольга Кириленко 69.  Владимир Назаренко 70.  Богдан Притула 71.  Богдан Соколов 72.  Матьев Алексей 73.  Александр Алчевский 74.  Olga Komarova 75.  Alex Alex Благодарим всех за участие в акции!

Друзі, привіт! 4 квітня (4.04) – День вебмайстрів. Ми вітаємо зі святом усіх, хто обрав напрямок веброзробки, і маємо для вас подарунок! З 4 до 11 квітня на ITVDN проходить акція – ви можете отримати доступ до нового відео курсу “React Поглиблений” безкоштовно, а також – сертифікат, який буде підтвердженням ваших знань. React – найпопулярніша FrontEnd-бібліотека для побудови користувацьких інтерфейсів. Її використовують розробники Facebook, Instagram, Netflix, Dropbox, GitHub, Discord, Uber та інші. Про курс “React Поглиблений” Автор курсу – Андрій Полевий, Software Developer у MindK. Сертифікований розробник Microsoft, 11+ років досвіду, включаючи роботу в компаніях лідерів української ІТ-індустрії – SoftServe та Intellias. Професійний стек: JavaScript, React, C#, SQL, Azure, ASP.NET Core. Тривалість відео уроків – 10 годин 5 хвилин. Під час проходження курсу ви розроблятимете вебзастосунок на основі публічного API, використовуючи різноманітні техніки, які пропонує React та його суміжні бібліотеки. Ви навчитеся впроваджувати роутинг за допомогою бібліотеки React Router, використовувати CSS-препроцесори та UI бібліотеки, публічні API для отримання даних. Також ви будете використовувати Redux Toolkit для спрощеного написання коду та розв’язання багатьох проблем, реалізуєте можливість логіну через сторонній identity provider та багато іншого. Структура курсу: Створення проєкту. TypeScript. Типізація в React. Стилізація. Частина 1. Стилізація. Частина 2. Практика 1. Робота з API і стилізація. Хуки useContext, useRef, портали. Кастомні хуки та memory leak. Робота з формами. Мемоізація. Оптимізація. Redux Toolkit, RTK Query. Практика 2. Міграція на RTK Query. GraphQL. JWT token, авторизація, приватні та публічні маршрути. Server-side Rendering. Тестування компонентів. Чого ви навчитеся на даному курсі: Будувати state management за допомогою Redux і Redux Toolkit. Розуміти основи популярних CSS-фреймворків для стилізації. Використовувати бібліотеку Material UI і її компоненти замість ручної стилізації. Використовувати React hooks і створювати власні (кастомні) хуки. Досліджувати проблеми швидкодії React-застосунку. Використовувати React Developer Tools для дослідження дерева компонентів та профайлингу. Розв’язувати проблеми з memory leak. Використовувати React.lazy та Suspense для динамічного завантаження модулів, React Router для динамічного завантаження маршрутів. Використовувати RTK Query для звертання до API. Додавати автентифікацію для застосунку на основі OAuth2. Використовувати мову запитів GraphQL для здійснення запитів та зміни даних на сервері. Працювати з концепцією Server-side Rendering (SSR). Дізнаєтеся про Jest Testing Framework та його альтернативи, навчитеся тестувати компоненти за допомогою React Testing Library. Попередні вимоги Для проходження курсу потрібно мати знання та практичні навички роботи з React на рівні курсу “React Базовий”. Зміст курсу розрахований на веброзробників, котрі вже знайомі з даною бібліотекою і хочуть розширити свої знання. Терміни акції Акція проходить з 4 до 11 квітня 2024 року включно. Доступ до курсу відкривається на 10 днів.