Здравствуйте, дорогие читатели. В этом уроке мы: создадим форму редактирования товара; рассмотрим понятие делегата и удобство его использования; добавим действия редактирования / удаления товара в списке товаров. Откройте проект Warehouse. В первую очередь, давайте изменим цвет View входа в систему с “Light Green” на “White”, я явно перестарался с выбором цвета в самом начале :). В будущих уроках, когда разберем, как пользоваться Assets, мы заменим фон на красивую картинку, подходящую по смыслу к этому приложению, а пока сделаем нейтральный цвет, не бросающийся в глаза. Для этого в панели навигатора откройте модуль “Main.storyboard”, выделите “View Controller”, затем в панели свойств откройте вкладку “Show the Attributes inspector”. Найдите свойство “Background” и установите значение “White”. Теперь найдите в библиотеке компонентов компонент “Table View Controller” и перетащите его в свободную область дизайнера рядом с “Supplies View Controller”, созданным в прошлом уроке. Выделите только что добавленный компонент. Найдите кнопку в дизайнере “Show Document Outline”, нажмите на нее, откроется панель документов. На этой панели разверните компонент “Table View Controller” и выделите компонент “Table View”. Затем в панели свойств откройте вкладку “Show the Attributes inspector”. Найдите свойство “Content”. По умолчанию у этого свойства установлено значение “Dynamic Prototypes”, установите значение “Static Cells”, в дизайнере вы увидите, что интерфейс контроллера изменился и отобразилось 3 строки. Разберем значения этого свойства. Значение “Dynamic Prototypes” используется, если вам необходимо иметь динамический набор данных, который будет постоянно изменяться. Установив это значение, обязательно необходимо переопределить методы протокола “UITableViewDataSource” для корректной работы контроллера. Значение “Static Cells” используется, если вам необходимо иметь статические данные, которые не будут меняться. Установив это значение, вам не нужно переопределять методы протоколы “UITableViewDataSource”. В данном примере мы устанавливаем это значение с целью удобства размещения элементов управления на нашей View. У нас будут ячейки с таким содержимым: ячейка под картинку, идентификатор товара, название товара, описание товара. Сейчас у нас 3 ячейки, надо чтобы было 4. В первой ячейке будет компонент “Image View”, в остальных 2 ячейках будут элементы управления “Label” и “Text Field”, в последней 4-й ячейке будут элементы управления “Label” и “Text View”. На панели документов для “Table View Controller”  выделите компонент “Table View Section”. В панели свойств откройте вкладку “Show the Attributes inspector”. Найдите свойство “Rows”. Сейчас у этого свойство установлено значение “3”. Измените значение на “4”, у вас появится 4 ячейка. В панели документов раскройте компонент “Table View Sections”, вы увидите список ячеек типа “Table View Cell”. Выделите первую ячейку. В панели свойств откройте вкладку “Show the Size inspector”. На этой вкладке можно управлять размерами компонента. Найдите свойство “Custom” и отметьте его галочкой. Затем найдите свойство “Row Height”. Установите значение этого свойства “144”, высота ячейки изменится. Перетащите на эту ячейку из библиотеки компонентов  компонент “Image View” и растяните его на всю область ячейки. Выделите компонент “Image View” и нажмите кнопку “Pin”. В открывшемся диалоговом окне снимите галочку с поля “Constrain to margin” и отметьте позиционирование относительно всех стенок ячейки. Нажмите кнопку “Add 4 Constraints”. В панели документов выделите вторую ячейку. Перетащите из библиотеки компонентов компонент “Label” на эту ячейку. Поместите его с левого края ячейки и растяните по высоте ячейки. В панели свойств откройте вкладку “Show the Size inspector”, установите свойство “Width” в значение “120”. Откройте вкладку “Show the Attributes inspector”, установите безымянное свойство с текстом “Label” на текст “Идентификатор”. Найдите свойство “Font”, нажмите на кнопку со значком “T”, откроется диалоговое окно задания свойств шрифта. Установите свойство “Style” в значение “Bold”, свойство “Size” в значение “12”. Нажмите кнопку “Done”. Представление должно выглядеть так: Из библиотеки компонентов перетащите компонент “Text Field” и расположите рядом с компонентом “Label”. Растяните компонент “Text Field” на оставшуюся ширину ячейки. Выделите элемент управления “Label”, нажмите кнопку “Pin”. Снимите галочку с поля “Constrain to margin”, отметьте позиционирование относительно верхней и левой стенок ячейки. Отметьте галочкой поле “Height”. Нажмите кнопку “Add 3 Constraints”. Выделите элемент управления “Text Field”, нажмите кнопку “Pin”. В диалоговом окне снимите галочку с поля “Constrain to margin”, установите позиционирование относительно левой, верхней, правой стенок ячейки, отметьте галочкой поле “Height”. Нажмите кнопку “Add 4 Constraints”. В панели документов выделите 3 ячейку. Повторите для нее все операции, которые были применены ко второй ячейке. Измените текст элемента управления “Label” на “Название”. Должно получиться вот так: В панели документов выделите последнюю ячейку, на вкладе “Show the Size inspectors”  установите в поле “Row Height” значение “144”, предварительно отметив поле “Custom” галочкой. Перенесите на ячейку два компонента “Label” и “Text View”. В          Установите ограничения для элемента управления “Label”, как мы устанавливали для предыдущих элементов управления “Label”, а для элемента управления “Text View” такие же ограничения, как для “Text Field”. Для элемента управления “Label” установите текст “Описание”, для элемента управления “Text View” уберите текст по умолчанию. Должно получиться вот так: В панели навигатора, добавьте новый модуль “Swift File” с именем “ProductViewController.swift”. Измените код, как показано ниже: Перейдите снова в дизайнер , выделите “Table View Controller”, с которым проводили изменения, в панели свойств, откройте вкладку “Show the Identity inspector”. Установите свойство “Class” значением “ProductViewController”, свойство “Storyboard ID” значением “ProductViewController”. В панели инструментов нажмите кнопку “Show the Assistant editor”. Для элемента управления “Image View” создайте переменную с именем “imageView”.       Во второй ячейке, для элемента управления “Text Field”, создайте переменную с именем “idTxt”. В третьей ячейке, для элемента управления “Text Field”, создайте переменную с именем “nameTxt”. В четвертой ячейке, для элемента управления “Text View”, создайте переменную с именем “descriptionTxt”. Должно получиться вот так: В панели навигатора, добавьте новый модуль “Swift File” с именем “ProductModel.swift”. Добавьте в него следующий код: Разберем добавленный код построчно. На 9 строке мы подключили пространство имен “Foundation” для класса “NSObject”. На 11 строке мы объявили класс с именем “ProductModel”, который наследуется от класса “NSObject” для того, чтобы считаться типом данных. На 12 строке мы объявили переменную с именем “productId” типа “Int” и инициализировали ее значение по умолчанию “-1”. На 13 строке мы объявили поле с именем “productImage” типа “String” и инициализировали ее значение по умолчанию “”. На 14 строке мы объявили поле с именем “productName” типа “String” и инициализировали ее значение по умолчанию “”. На 15 строке мы объявили поле с именем “productDescription” типа “String” и инициализировали ее значение по умолчанию “”. На 17 строке мы объявили параметризированный инициализатор класса “ProductModel” (это тоже самое, что и конструктор в языке программирования C#). Инициализатор - это метод, который вызывается при создании нового экземпляра класса. Данный инициализатор принимает аргументы с такими же именами, как имена полей в классе. Для того, чтобы инициализировать внутренние поля класса значениями полей аргументов. Мы левым операндом обращаемся к самому себе, через ключевое слово “self” и обращаемся к нужному нам полю, а правым операндом задаем значение аргумента. Мы плавно подходим к созданию делегата. В панели навигатора добавьте новый модуль “Swift File” с именем “ProductProtocol.swift”. Добавьте в него следующий код: Разберем добавленный код. На 11 строке мы объявили протокол с именем “ProductProtocol”. Протокол - это тоже самое, что и интерфейс в языке программирования C#. Экземпляр протокола через инициализатор создать нельзя, поскольку это только прототип, который не содержит реализации и используется в качестве описания и задания соглашений, которые разработчик должен реализовать сам в будущем. На 12 строке мы объявили метод прототип с именем “changeProduct”,  который принимает аргумент типа “ProductModel” с именем “model”. Откройте модуль “ProductViewController.swift”, добавьте поле с именем “delegate” типа “ProductProtocol?” и поле с именем “id” типа “Int” со значением по умолчанию “-1”. Должно получиться вот так: Добавьте после метода “viewDidLoad”, новые методы с именами “initNavigationButtons”, “backToParent”, “saveData”, которые ничего не принимают и ничего не возвращают. Код: Разберем построчно добавленный код. На 21 строке мы вызываем метод “initNavigationButtons”, когда View находится в процессе загрузки, чтобы инициализировать кнопки навигации. На 24 строке мы объявили метод с именем “initNavigationButtons”. На 25 строке мы переопределяем левую кнопку навигации, задаем ей текст “Отмена” и обработчик события на нажатие, метод “backToParent”. На 26 строке мы создаем кнопку с именем “saveButton” и текстом “Сохранить”, добавляем для нее обработчик событие на нажатие, метод “saveData”. На 27 строке мы обращаемся к экземпляру панели навигации контроллера “navigationItem” и вызываем от него метод “setRightBarButton”, который принимает два аргумента. Первый аргумент - это экземпляр добавляемой на панель навигации кнопки, второй аргумент - это стиль добавления кнопки, добавить с анимацией или без. Сам метод, как видно из названия, добавляет кнопку справа на панель навигации. Это вариант, как добавить правую кнопку из кода. На 30 строке мы объявили метод с именем “saveData”. На 31 строке мы обращаемся к нашему делегату с именем “delegate” и проверяем, если он инициализирован, тогда вызываем у него метод “changeData” и передаем туда модель данных, заполненную данными собранными с элементов управления. На 32 строке мы создаем экземпляр типа “ProductModel” с именем “model”. На 33 строке мы вызываем у делегата метод “changeData” и передаем туда экземпляр “model”. Данный метод будет реализован в классе “SuppliesViewController”. На 35 строке мы возвращаемся на предыдущую View (SuppliesViewController) в стеке иерархий вызовов View. На 38 строке мы объявляем метод с именем “backToParent”. Данный метод делает переход на предыдущую View (SuppliesViewController) в стеке иерархий вызовов View. Теперь откройте модуль “SuppliesViewController.swift”. Нам необходимо обновить его реализацию: Разберем обновленный код построчно. На 12 строке в классе SuppliesViewController мы наследуемся от протокола “ProductProtocol”. На 13 строке мы заменили тип данных для поля “supplies”. Тип данных был “[String]”, стал “[ProductModel]”. И сделали это поле статическим для того, чтобы была возможность доступа к нему из контроллера “ProductViewController”. На 29 строке мы реализовываем метод “changeProduct” протокола “ProductProtocol”. Именно этот метод будет вызываться при нажатии кнопки “Сохранить” в контроллере “ProductViewController”. На 30 строке мы проверяем идентификатор продукта, если “-1” - это означает, что это новый продукт. Иначе существующий продукт, и мы его обновляем. На 32 строке мы правым операндом генерируем идентификатор продукта путем вызова метода “makeNewProductId”. Данный метод возвращает значение типа “Int”, которое мы присваем левому операнду. Левый операнд - это поле “productId” экземпляра “ProductModel”. На 33 строке мы добавляем новый продукт в коллекцию продуктов. На 36 строке мы объявляем переменную с именем “changedIndex” типа “Int” со значением по умолчанию “-1”. В эту переменную мы запишем найденную ниже в цикле позицию продукта в коллекции “supplies”. На 37 строке мы в цикле проходимся по элементам коллекции “supplies” и ищем продукт, который нужно обновить. На 38 строке описано условие поиска продукта. На 39 строке, когда продукт был найден, мы сохраняем его позицию в переменную “changedIndex”. На 40 строке выходим из цикла. На 43 строке проверяем, если продукт был найден , тогда обновляем этот продукт. С 44 по 46 строку мы обновляем свойства продукта , значениями свойств модели, переданной аргументом метода “changeProduct”. На 49 строке мы запускаем переинициализацию “DataSource” для табличного представления, чтобы данные в ячейках обновились и добавились/удались обновленные данные. На 52 строке мы объявили метод с именем “makeNewProductId”, который ничего не принимает и возвращает значение типа “Int”. На 53 строке левым операндом мы объявили переменную с именем “sortProducts” типа “[ProductModel]”. Правым операндом мы на экземпляре коллекции “supplies” вызываем метод “sorted”, который принимает лямбда метод сортировки коллекции объектов и возвращает отсортированную коллекцию. У лямбда метода есть два аргумента, в них находятся экземпляры сравниваемых объектов из коллекции “suppliers”. Данный метод возвращает значение типа “Bool”. На 54 строке мы возвращаем условие сортировки по возрастанию. Сортировка производится по свойству “productId” класса “ProductModel”. На 56 строке мы обращаемся к последнему элементу отсортированной коллекции, тем самым получаем максимальный идентификатор продукта в коллекции и увеличиваем его на единицу. Теперь надо обновить реализацию метода “cellForRowAt indexPath”: Разберем код построчно. На 69 строке мы изменили вид обращения к коллекции “supplies”. На 73 строке мы изменили для экземпляра ячейки тип стиля. Был “.plain”, стал “subtitle”. На 74 строке мы левым операндом объявили константу с именем “model” типа “ProductModel”. Правым операндом мы инициализируем константу значением из коллекции “supplies”. На 75 строке мы записываем в свойство “tag” идентификатор продукта для этой ячейки. На 76 строке в элемент управления “Label”, который находится в верхней области ячейки, мы записываем название продукта. На 77 строке в элемент управления “Label”, который находится в нижней области ячейки, мы записываем описание продукта. На 78 строке мы активируем в ячейке информационную кнопку справа. При нажатии на эту кнопку мы будем редактировать продукт. Теперь нам надо подвязаться на событие нажатия на информационную кнопку в ячейке. Для этого необходимо переопределить метод протокола “UITableViewDelegate” ,реализованного в классе “UITableViewController” с именем “accessoryButtonTappedForRowWith”. Разберем код построчно. На 83 строке мы получаем экземпляр типа “ProductModel”, привязанный к ячейке, и сохраняем его в константу с именем “model”. На 84 строке мы производим поиск контроллера с именем “ProductViewController” в модуле “Main.storyboard”. На 85 строке на найденном экземпляре контроллера обращаемся к свойству “delegate” типа “ProductProtocol” и инициализируем его ссылкой на самого себя, тем самым говоря, что в этом классе уже реализован метод этого протокола с именем “changeProduct” и вызывать метод надо именно из этого класса. На 86 строке мы на найденном экземпляре контроллера обращаемся к свойству “id” и инициализируем его идентификатором продукта, привязанного к текущей ячейке. На 87 строке мы открываем контроллер “ProductViewController”. Редактирование мы почти сделали, осталось добавить инициализацию редактируемых данных в контроллере “ProductViewController”. Давайте реализуем еще в этом контроллере удаление данных. Для этого надо переопределить два метода объявленных в протоколе “UITableViewDelegate” и реализованных в классе “UITableViewController”. Эти методы называются “canEditRowAt IndexPath” и “commit editingStyle”. Обновите свой код в соответствии с представленным ниже: Разберем код построчно. На 90 строке мы переопределили метод “canEditRowAt IndexPath”, данный метод возвращает значение , которое говорит о том, активировать удаление строк или нет. На 91 строке возвращаем значение активировать. На 94 строке мы переопределили метод “commit editingStyle”, данный метод вызывается, когда мы нажали кнопку удалить на ячейке. На 95 строке мы удаляем продукт из коллекции “supplies”. На 96 строке обновляем содержимое таблицы. Теперь добавим кнопку добавления нового товара. Для этого обновим код метода “initNavigationButtons”.   Разберем код построчно. На 100 строке мы создали экземпляр кнопки с текстом “Новый продукт” и обработчиком события на нажатие - метод “newProduct”. На 101 строке мы добавили выше созданную кнопку в панель навигации контроллера в область справа. На 104 строке мы объявили метод “newProduct”, которые ничего не принимает и ничего не возвращает. На 105 строке мы производим поиск контроллера “ProductViewController” в модуле “Main.storyboard”. На 106 строке мы на найденном экземпляре контроллера обращаемся к свойству “delegate” и инициализируем его ссылкой на самого себя. На 107 строке мы  на найденном экземпляре контроллера обращаемся к свойству “id” и говорим, устанавливая значение “-1”, что мы создаем новый продукт. Теперь откройте модуль “Main.storyboard”, в нем на контроллере “ProductViewController” выделите элемент управления с идентификатором “idTxt”. В панели свойств на вкладке “Show the Attributes inspector” найдите свойство “User Interaction Enabled” и снимите галочку. Тем мы самым мы запретили редактирование значения этого поля. Теперь перейдите в модуль “ProductViewController.swift”. Обновите в нем код, как это показано ниже: Разберем добавленный код построчно. На 19 строке мы добавили метод с именем “initData”, который ничего не возвращает и принимает аргумент с именем “id” типа “Int”. На 20 строке мы проверяем идентификатор продукта, если он больше значения “-1”, значит продукт уже существует и содержит внутри себя данные, которые можно отобразить на текущей View. На 22 строке мы ищем продукт по идентификатору продукта, переданному аргументом в методе в коллекции продуктов “supplies”. С 23 по 25 строку мы заполняем элементы управления на пользовательском интерфейсе данными найденного продукта. На 33 строке в методе “viewDidLoad” мы добавили вызов метода “initData” и передали ему аргумент поле “id”, которое мы задаем в контроллере “SuppliesViewController”. Запустите приложение. На анимации выше видно, что мы вошли в систему, открыли товар на редактирование, откредактировали товар и изменения сохранились. Затем удалили товар. Теперь давайте проверим добавление нового товара: Проверили, добавление нового товара работает хорошо. Но все равно есть один нюанс, наше приложение на русском языке. А когда выполняли на ячейки жест справа на- лево, то показывалась кнопка удалить “Delete” на английском, давайте исправим это, чтобы показывалось русское название “Удалить”. Откройте модуль “SuppliesViewController.swift”, нам необходимо переопределить метод, объявленный в делегате “UITableViewDelegate” c именем “titleForDeleteConfirmationButtonForRowAt” и реализованный в классе “UITableViewController”. Добавьте следующий код, после метода “backToParent”: Я думаю, этот метод не стоит разбирать построчно, тут и так все понятно. Запустите приложение. На этом завершим наш урок. В следующем уроке мы разберем технологию 3D Touch и применим ее к нашему приложению для предварительного просмотра товаров. Добавим поле поиска в заголовок контроллера со списком товаров, реализуем поиск товаров. Реализуем протокол “UITextFieldDelegate”, чтобы скрывать клавиатуру при нажати кнопки “Ввод” на клавиатуре мобильного устройства. Разберем, как добавить собственную панель интрументов с кнопками.

Создания простого чата Для начала создадим простой чат с помощью HTML&CSS и PHP&MySQL Проектирование Базы Данных Переходим к phpMyAdmin. Создаем новую базу данных, называем “chatdb”. Создаем новую таблицу, называя “Posts”, включая в себя 4 столбца: “id” тип колонки INT, автоматическое увеличение на 1 (задаем A_I в ячейку с флажком) основной ключ (index); “nick” тип колонки VARCHAR и длина 100; “post_text” тип колонки TEXT; “post_dt” тип колонки DATETIME по умолчанию является CURRENT_TIMESTAMP. Создание веб-сайта. Во-первых, создадим главную страницу. Список комментариев и отправка формы, используя кнопку. Всё будет находится в файле “index.php” .  Давайте создадим этот файл и напишем что-то вроде этого:  <html> <head> head> <body> php $mysqli = new mysqli("127.0.0.1", "root", "", "chatdb"); /* "127.0.0.1" is MySQL host name. In local servers (XAMPP, Ampps, etc.) it is 127.0.0.1. If you using a dedicated hosting, see it in admin panel. */ /* "root" and "" is login and password for DB's user. In local servers usually default DB user is "root" with empty password. */ /* "chatdb" is DB's name. */ /* Warning: in XAMPP you should manually run MySQL server (from xampp-control.exe) to get it work. */ $result = $mysqli->query("SELECT * FROM posts;"); ?> <style> /* All CSS is very simplified. I provide it for example and no more.  * In Chrome it works tolerably, but in IE and Firefox it works very poorly.  */ .content {   display: table;   width: 50%;   min-width: 400px;   height: 80%;   /* Center horizontally and vertically */   position: absolute;   left: 0; right: 0;   top: 0; bottom: 0;   margin: auto;   /* Design */   border: 1px solid;   background-color: silver;   padding: 5px; } /* For mobile devices */ @media (max-width: 400px) {   .content {     width: 100%;     min-width: 0;     padding: 0px;   } } style> <div class="content"> <div id="comments" style="overflow-y: scroll; height: 100%;"> php if ($result) {   while ($post = $result->fetch_object()){     $nick = $post->nick;     $post_dt = $post->post_dt;     $post_text = $post->post_text;         echo "<b>$nickb> ($post_dt):<br>";     echo "$post_text<br>";     echo "<br>";   }   $result->close(); } ?> div> php $mysqli->close(); ?> <form action="post.php" method="post" style="height: 0; display: table-row;">   Nick:<br>   <input type="text" name="nick" style="width: 100%;">input><br>   <br>   Text:<br>   <textarea name="text" style="width: 100%;">textarea><br>   <br>   <input type="submit">input> form> div> <script type="text/javascript">     var divComments = document.getElementById('comments');     divComments.scrollTop = divComments.scrollHeight; script> body> html> 2. Дальше давайте создадим “post.php” файл и напишем такое:  php $nick = $_POST['nick']; $post_text = $_POST['text']; $mysqli = new mysqli("127.0.0.1", "root", "", "chatdb"); $nick = $mysqli->real_escape_string($nick); $nick = htmlspecialchars($nick); $post_text = $mysqli->real_escape_string($post_text); $post_text = htmlspecialchars($post_text); $mysqli->query("INSERT INTO posts (nick, post_text) VALUES ('$nick', '$post_text');"); $mysqli->close(); /* Redirect To Main Page */ header('Location: ' . $_SERVER['HTTP_REFERER']); ?> 3. Откроем ваш чат в любом продвинутом браузере. Вся работа:  4. Напишите ник и текст, а потом нажмите на кнопку отправки.  Когда отправили форму, сразу же происходит перенаправление формы главной страницы в “post.php”. “Post.php” моментально наполняет данными таблицу и перенаправляет на главную страницу. Также “post.php” содержит начальный XSS и SQL защищенный вход. Для упрощения не отправляем клиентам время с JS на “post_dt” на внесения данных, а указываем значение по умолчанию – CURRENT_TIMESTAMP, который предоставляет нынешнюю дату и время на сервер. Когда количество комментариев больше, чем экран может вместить, то комментарии   переполнены в div, используется вертикальный скроллбар. Во время загрузки страницы JS автоматически опускает скроллбар вниз к недавнему комментарию. Что тут не так? Проблема номер 1. Новый непрочитанный комментарий от пользователя не загружается в базу данных автоматически, без ручной перезагрузки страницы. Это очень, очень серьезная проблема для любого чата. Как это исправить? Очевидно, один из путей сделать это - использовать HTTP-запрос к фоновой работе автоматически (с помощью JS) и асинхронно, то есть это один из способов обеспечить выполнение AJAX в любой form. Проблема номер 2. Также неправильно то, что кнопка отправки перезагружает страницу (перенаправляет на вторую страницу и следующим шагом возвращает назад). При перезагрузке страницы сбрасывает “Nick” в  поле (также, как любые другие изменения, те, что сделали с пользователем) Как это исправить? Конечно, можно обеспечить выполнение обхода для сохранения изменений и перезагрузки на перезагружаемой странице. Но не эффективнее ли устранить причину, чем последствие? Можно только убрать перезагружаемую страницу и эта проблема будет решена автоматически. Проблема номер 2.1. Видите ли что-то необычное тут? Это слишком быстро? Дело с чатом очень простое – загружаем только два маленьких текстовых параметра. Что делать, если нужно улучшить чат с помощью добавления присоединения, а конкретно - изображений и видео? Видео может иметь объем в размере нескольких мегабайт, что тогда в этом случае? Давайте попробуем.  Давайте немного изменим “post.php”, после $mysql->query() добавив это:  for ($i = 0; $i < 1000000000; $i++) { } Старайтесь размещать какие-либо комментарии. Что мы видим? Нет, UI не остановилось (заморозилось), но браузер ждет до того, как закончится подключение:   Да, если “post.php” вызывает какую-то необработанную ошибку, то чат исчезает, и пользователь видит пустое окно с сообщением о непонятной ошибке. Чтобы вернуться к чату, пользователю стоит нажать кнопку “Back” в браузере. И это проблема номер 2.2. Давайте уберем петлю с “post.php” и исправим эти проблемы. Реализация легкого AJAX в простой чат Автоматическое обновление комментариев Эта веб-страница без AJAX? Это веб-страница, которая полностью перезагружается. Эта веб-страница c AJAX? Это веб-страница, что перезагружается частично. Где же взять части этих страниц? Стоит разделить нашу страницу на части, в этом случае сервер генерирует страницу частично. Страница будет состоять из двух частей – блок комментариев и другой контент страницы. Комментарии будут загружаться и перезагружаться отдельно от другой страницы. Давайте сделаем первую часть, то есть блок комментариев. Для начала создадим пустой файл, назовем “getcomment.php”. Дальше переходим в “index.php” для того, чтобы вырезать комментарии и далее отделить его. 1. Вырезаем инициализированный блок MySQL с “index.php"  php $mysqli = new mysqli("127.0.0.1", "root", "", "chatdb"); /* "127.0.0.1" is MySQL host name. In local servers (XAMPP, Ampps, etc.) it is 127.0.0.1. If you using a dedicated hosting, see it in admin panel. */ /* "root" and "" is login and password for DB's user. In local servers usually default DB user is "root" with empty password. */ /* "chatdb" is DB's name. */ /* Warning: in XAMPP you should manually run MySQL server (from xampp-control.exe) to get it work. */ $result = $mysqli->query("SELECT * FROM posts;"); ?> вставляем в “getcomments.php”. 2. Следующее, вырежем контент div c комментариями с “index.php”: php if ($result) {   while ($post = $result->fetch_object()){     $nick = $post->nick;     $post_dt = $post->post_dt;     $post_text = $post->post_text;         echo "<b>$nickb> ($post_dt):<br>";     echo "$post_text<br>";     echo "<br>";   }   $result->close(); } ?> И вставим (добавим) в “getcomments.php” после инициализации MySQL. 3. Дальше, вырежем недалекий блок MySQL с “index.php”: php $mysqli->close(); ?> Вставим его в конец файла “getcomments.php”. 4. Наконец-то, убираем JS-скрипт, который опускает скролл в самый низ. <script type="text/javascript"> var comments = document.getElementById('comments'); comments.scrollTop = comments.scrollHeight; script> Не переживай, это только временно. 5. Сделано. Теперь имеем что-то наподобие этого:  <html> <head> head> <body> <style> /* All CSS is very simplified. I provide it for example and no more.  * In Chrome it works tolerably, but in IE and Firefox it works very poorly.  */ .content {   display: table;   width: 50%;   min-width: 400px;   height: 80%;   /* Center horizontally and vertically */   position: absolute;   left: 0; right: 0;   top: 0; bottom: 0;   margin: auto;   /* Design */   border: 1px solid;   background-color: silver;   padding: 5px; } /* For mobile devices */ @media (max-width: 400px) {   .content {     width: 100%;     min-width: 0;     padding: 0px;   } } style> <div class="content"> <div id="comments" style="overflow-y: scroll; height: 100%;"> div> <form action="post.php" method="post" style="height: 0; display: table-row;">   Nick:<br>   <input type="text" name="nick" style="width: 100%;">input><br>   <br>   Text:<br>   <textarea name="text" style="width: 100%;">textarea><br>   <br>   <input value="Submit" type="submit">input> form> div> body> html> getcomments.php:  php $mysqli = new mysqli("127.0.0.1", "root", "", "chatdb"); /* "127.0.0.1" is MySQL host name. In local servers (XAMPP, Ampps, etc.) it is 127.0.0.1. If you using a dedicated hosting, see it in admin panel. */ /* "root" and "" is login and password for DB's user. In local servers usually default DB user is "root" with empty password. */ /* "chatdb" is DB's name. */ /* Warning: in XAMPP you should manually run MySQL server (from xampp-control.exe) to get it work. */ $result = $mysqli->query("SELECT * FROM posts;"); ?> Вероятно, теперь наша страница разделена. Давайте проверим её. Переходим http (точнее ССЫЛКА для локального сервера). Дальше, переходим на главную страницу, http:///index.php Это удивительно! Всё удачно получилось, разделив страницу на части за пару минут! Не останавливаемся на этом. Теперь “glue” эти части с помощью AJAX. Как это сделать? 1. Для начала стоит создать пустой JS-скрипт на главной странице: <script type="text/javascript"> alert('Test'); script> Добавив это после тега div, перед закрывающимся тегом . 2. Сделаем HTTP GET запрос от JS к “getcommet.php” Для этого используем XMLHtttpRequest (XHR) класс: <script type="text/javascript"> var xhr = new XMLHttpRequest(); xhr.open('GET', '/getcomments.php', false); xhr.send(null); if (xhr.status == 200) {   alert(xhr.responseText); } script> Это работает, но не читает старые версии IE те, что не поддерживают такую инициализацию. Для получения более кросс-браузерного пути переходим в и добавляем это: <script type="text/javascript"> function getXmlHttp(){   var xmlhttp;   try {     xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");   } catch (e) {     try {       xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");     } catch (E) {       xmlhttp = false;     }   }   if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {     xmlhttp = new XMLHttpRequest();   }   return xmlhttp; }; script> И главный скрипт (в конце) <script type="text/javascript"> var xhr = getXmlHttp(); xhr.open('GET', '/getcomments.php', false); xhr.send(null); if (xhr.status == 200) {   alert(xhr.responseText); } script> Как видно, теперь JS получает контент со страницы “getcomments.php” и показывает это в предупреждении.   2.1. Вопрос: «Это на самом деле AJAX (Asynchronous Javascript And Xml)?» Это AJAX, потому что запрос сервера отформатирован в HTML (который основан на XML). Но действительно ли это AJAX, это асинхронно? Проверим. Добавим эти уже знакомые строки в любое место между в “getcomments.php”: for ($i = 0; $i < 1000000000; $i++) { } Что теперь видно на загружаемой странице? Вначале страница зависает, его замораживает UI (становится не реагирующим на нажатие левой/правой кнопки мыши): Дальше Chrome показывает навязчивое всплывающие окно, сообщающее об удалении страницы: Это не AJAX! Это JAX! Как его сделать асинхронным? К счастью, ХHR также поддерживает асинхронный режим: <script type="text/javascript"> var xhr = getXmlHttp(); xhr.open('GET', '/getcomments.php', true); /* true for asynchronous */ xhr.onreadystatechange = function() {   if (xhr.readyState == 4) {     if(xhr.status == 200) {       alert(xhr.responseText);     }   } }; xhr.send(null); script> В этом случае браузер не ждет ответа с главного потока пользовательского интерфейса, он запускает в другом (асинхронно) и вызываемым событием “onreadystatechange” в главном контексте UI.  Теперь всё в порядке, страница полностью доступна, пока запрос запущен, и после ответа получит предупреждение. for ($i = 0; $i < 1000000000; $i++) { } И продолжаем работу. 3. Добавляем этот контент в div  вместо предупреждения. Заменить это: alert(xhr.responseText);  C этим: var divComments = document.getElementById('comments'); divComments.innerHTML = xhr.responseText; Возвращаем назад, клиент видит “glued” страницу с блоком комментариев. 4. Дальше следует установить интервал для автоматической проверки новых комментариев время от времени… и также восстановить удаленный сценарий автоматической прокрутки.  <html> <head> <script type="text/javascript">     function getXmlHttp() {         var xmlhttp;         try {             xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");         } catch (e) {             try {                 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");             } catch (E) {                 xmlhttp = false;             }         }         if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {             xmlhttp = new XMLHttpRequest();         }         return xmlhttp;     }; script> head> <body> <style> /* All CSS is very simplified. I provide it for example and no more.  * In Chrome it works tolerably, but in IE and Firefox it works very poorly.  */ .content {   display: table;   width: 50%;   min-width: 400px;   height: 80%;   /* Center horizontally and vertically */   position: absolute;   left: 0; right: 0;   top: 0; bottom: 0;   margin: auto;   /* Design */   border: 1px solid;   background-color: silver;   padding: 5px; } /* For mobile devices */ @media (max-width: 400px) {   .content {     width: 100%;     min-width: 0;     padding: 0px;   } } style> <div class="content"> <div id="comments" style="overflow-y: scroll; height: 100%;"> div> <form action="post.php" method="post" style="height: 0; display: table-row;">   Nick:<br>   <input type="text" name="nick" style="width: 100%;">input><br>   <br>   Text:<br>   <textarea name="text" style="width: 100%;">textarea><br>   <br>   <input value="Submit" type="submit">input> form> div> <script type="text/javascript">     var divComments = document.getElementById('comments');     function loadComments() {         var xhr = getXmlHttp();         xhr.open('GET', '/getcomments.php', true);         xhr.onreadystatechange = function () {             if (xhr.readyState == 4) {                 if (xhr.status == 200) {                     if (xhr.responseText !== divComments.innerHTML) {                         divComments.innerHTML = xhr.responseText;                         divComments.scrollTop = divComments.scrollHeight;                     }                 }             }         };         xhr.send(null);     };     loadComments();     setInterval(loadComments, 1000) script> body> html> Теперь проблема исправить это. Новые комментарии с другого пользовательского чата (другие вкладки браузеров, окон и экземпляров) получают каждые 1000 миллисекунды (1 секунду) автоматически. Но отправка комментариев уже вызывает перезагрузку нашей страницы. Отправка комментариев без перезагрузки Как написано выше, XHR помогает отправлять HTTP GET-запросы без перезагрузки страницы и GUI заморозки (асинхронно). Теперь отправляем HTTP-запрос асинхронно, но на этот раз POST запрос, а не GET. И, естественно, XHR позволяет это. Используем метод send(). Для GET указываем null. Для POST устанавливаем запрос “body”.Также нужно добавить “Content-Type:application/x-www-from-urlencoded” в header  для того, чтобы разрешить серверу знать, какой формат использовать для отправки данных. Заметка: если не знаете, что отправлять, то можно захватить регулярный запрос с помощью “Fiddler” или же любой другой HTTP-перехватчик и только просимулировать запрос. HTTP-перехватчик — это незаменимый инструмент для работы с HTTP/HTTPS. Это позволяет увидеть все headers и bodies по всем HTTP(S)-запросам, что отправляются в систему. Лучше использовать “Fiddler”, это бесплатное, современное и очень простое приложение, что может поддерживать HTTP/HTTPS и оба Win x86/x64. 1. Для начала создадим пустой JS скрипт в HTML. Разместить до самого тега, потому что этот скрипт будет использован для отправки формы комментария (форма будет вызывать этот скрипт при отправке).2. В этом скрипте, реализуем функцию, что будет отправлять ник и комментарии в “post.php”  <script type="text/javascript"> function postComment(nick, text) {   var xhr = getXmlHttp();   xhr.open('POST', '/post.php', true);   xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');   xhr.onreadystatechange = function() {     if (xhr.readyState == 4) {       if (xhr.status == 200) {         /* it isn't required to add comment to DOM manually, it will done automatically on next refresh via AJAX */       }     }   };   xhr.send('nick=' + nick + '&text=' + text); /* joining the data in format simulates form */ }; script> 3. Следующие, перезагружая страницу при отправке:  ... onsubmit="return false;"> Также добавим вызов “postComment’s”: action="post.php" method="post" style="height: 0; display: table-row;" onsubmit="postComment(this.nick.value, this.text.value); return false;"> 4. Наконец, необязательно, но можно убрать “action” и “method” с формы:  <form style="height: 0; display: table-row;" onsubmit="postComment(this.nick.value, this.text.value); return false;"> 5. Результат: <html> <head> <script type="text/javascript">     function getXmlHttp() {         var xmlhttp;         try {             xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");         } catch (e) {             try {                 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");             } catch (E) {                 xmlhttp = false;             }         }         if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {             xmlhttp = new XMLHttpRequest();         }         return xmlhttp;     }; script> head> <body> <style> /* All CSS is very simplified. I provide it for example and no more.  * In Chrome it works tolerably, but in IE and Firefox it works very poorly.  */ .content {   display: table;   width: 50%;   min-width: 400px;   height: 80%;   /* Center horizontally and vertically */   position: absolute;   left: 0; right: 0;   top: 0; bottom: 0;   margin: auto;   /* Design */   border: 1px solid;   background-color: silver;   padding: 5px; } /* For mobile devices */ @media (max-width: 400px) {   .content {     width: 100%;     min-width: 0;     padding: 0px;   } } style> <div class="content"> <div id="comments" style="overflow-y: scroll; height: 100%;"> div> <script type="text/javascript">     function postComment(nick, text) {         var xhr = getXmlHttp();         xhr.open('POST', '/post.php', true);         xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');         xhr.onreadystatechange = function () {             if (xhr.readyState == 4) {                 if (xhr.status == 200) {                     /* it isn't required to add comment to DOM manually, it will done automatically on next refresh via AJAX */                 }             }         };         xhr.send('nick=' + nick + '&text=' + text);     }; script> <form style="height: 0; display: table-row;" onsubmit="postComment(this.nick.value, this.text.value); return false;">   Nick:<br>   <input type="text" name="nick" style="width: 100%;">input><br>   <br>   Text:<br>   <textarea name="text" style="width: 100%;">textarea><br>   <br>   <input value="Submit" type="submit">input> form> div> <script type="text/javascript">     var divComments = document.getElementById('comments');     function loadComments() {         var xhr = getXmlHttp();         xhr.open('GET', '/getcomments.php', true);         xhr.onreadystatechange = function () {             if (xhr.readyState == 4) {                 if (xhr.status == 200) {                     if (xhr.responseText !== divComments.innerHTML) {                         divComments.innerHTML = xhr.responseText;                         divComments.scrollTop = divComments.scrollHeight;                     }                 }             }         };         xhr.send(null);     };     loadComments();     setInterval(loadComments, 1000) script> body> html>  Теперь простая реализация AJAX подошла к концу. Это ещё не конец, это только начало. Есть ещё достаточно всего для изучения и улучшения.

Введение Факторизация целых чисел позволяет раскладывать на множители (факторинг) большие числа (Int64) и проверять простоту целых чисел [1,2]. Приведем пример больших (14 ... 18-ти значных) простых чисел, которые можно использовать для тестирования или оценки. biggest 18-digit primes 999999999999999989 999999999999999967 999999999999999877 biggest 17-digit primes  99999999999999997 99999999999999977 99999999999999961 biggest 16-digit primes 9999999999999937 9999999999999917 9999999999999887 biggest 15-digit primes 999999999999989 999999999999947 999999999999883 biggest 14-digit primes 99999999999973 99999999999971 99999999999959 Кодовый модуль демонстрирует практическое использование алгоритма, написанного в C# (4.0). using System; using System.Collections.Generic; namespace Infosoft.MathShared {        /// Integers: Properties and Operations        public  static partial class Integers        { #region Prime Numbers <100              private static readonly int[] Primes =              new int[] { 2, 3, 5, 7, 11, 13, 17, 19, 23,              29, 31, 37, 41, 43, 47, 53, 59,              61, 67, 71, 73, 79, 83, 89, 97 }; #endregion              // starting number for iterative factorization              private const int _startNum = 101; #region IsPrime : primality Check              ///              /// Check if the number is Prime              ///              /// Int64              /// bool              public static bool IsPrime(Int64 Num){                     int j;                     bool ret;                     Int64 _upMargin = (Int64)Math.Sqrt(Num) + 1;;                     // Check if number is in Prime Array                     for (int i = 0; i < Primes.Length; i++){                            if (Num == Primes[i]) { return true; }                     }                     // Check divisibility w/Prime Array                     for (int i = 0; i < Primes.Length; i++) {                            if (Num % Primes[i] == 0) return false;                     }                     // Main iteration for Primality check                     _upMargin = (Int64)Math.Sqrt(Num) + 1;                     j = _startNum;                     ret = true;                     while (j <= _upMargin)                     {                            if (Num % j == 0) { ret = false; break; }                            else { j = j + 2; }                     }                     return ret;              }              ///              /// Check if number-string is Prime              ///              /// string              /// bool              public static bool IsPrime(string StringNum) {                     return IsPrime(Int64.Parse(StringNum));              } #endregion #region Fast Factorization              ///              /// Factorize string converted to long integers              ///              /// string              /// Int64[]              public static Int64[] FactorizeFast(string StringNum) {                     return FactorizeFast(Int64.Parse(StringNum));              }              ///              /// Factorize long integers: speed optimized              ///              /// Int64              /// Int64[]              public static Int64[] FactorizeFast(Int64 Num)              { #region vars                     // list of Factors                     List _arrFactors = new List();                     // temp variable                     Int64 _num = Num; #endregion #region Check if the number is Prime(<100)                     for (int k = 0; k < Primes.Length; k++)                     {                            if (_num == Primes[k])                            {                                   _arrFactors.Add(Primes[k]);                                   return _arrFactors.ToArray();                            }                     } #endregion #region Try to factorize using Primes Array                     for (int k = 0; k < Primes.Length; k++)                     {                            int m = Primes[k];                            if (_num < m) break;                            while (_num % m == 0)                            {                                   _arrFactors.Add(m);                                   _num = (Int64)_num / m;                            }                     }                     if (_num < _startNum)                     {                            _arrFactors.Sort();                            return _arrFactors.ToArray();                     } #endregion #region Main Factorization Algorithm                     Int64 _upMargin = (Int64)Math.Sqrt(_num) + 1;                     Int64 i = _startNum;                     while (i <= _upMargin)                     {                            if (_num % i == 0)                            {                                   _arrFactors.Add(i);                                   _num = _num / i;                                   _upMargin = (Int64)Math.Sqrt(_num) + 1;                                   i = _startNum;                            }                            else { i = i + 2; }                     }                     _arrFactors.Add(_num);                     _arrFactors.Sort();                     return _arrFactors.ToArray(); #endregion              } #endregion        } } Точки обзора Тест на проверку простоты 18-ти значного числа (999999999999999989), т.е. процедура, которая определяет, являются ли целые числа простыми, это лучший способ проверки факторинга программного обеспечения. Если вычисления занимают слишком много времени (например, когда используется мобильная платформа с низким уровнем обработки большого количества численных данных), возьмите меньшее число, но тоже 18-ти значное: 324632623645234523. Чтобы получить не такую тривиальную запись, как i = i + 2, или i + = 2, необходимо исходный код увеличить в два раза. i ++; i ++; Даный фрагмент кода был использован для сравнения производительности трех методов возрастания целых чисел:  using System; using System.Diagnostics; namespace IncrementEfficiencyTest {        class Program        {              private const Int64 _max = 1000000000; // 1 billion              private const int _cycles = 5;              static void Main(string[] args)              {                     Stopwatch sw = new Stopwatch();                     Console.Write("{0} on {1}", "i++;i++:", String.Concat(_cycles, " cycles with ", _max, " max: "));                     sw.Restart();                     for (int count = 0; count < _cycles; count++)                     {                            Int64 i = 0;                            while (i < _max) { i++; i++; }                     }                     sw.Stop();                     Console.WriteLine("{0} elapsed.", sw.Elapsed);                     Console.Write("{0} on {1}", "i=i+2", String.Concat(_cycles, " cycles with ", _max, " max: "));                     sw.Restart();                     for (int count = 0; count < _cycles; count++)                     {                            Int64 i = 0;                            while (i < _max) { i = i + 2; }                     }                     sw.Stop();                     Console.WriteLine("{0} elapsed.", sw.Elapsed);                     Console.Write("{0} on {1}", "i+=2", String.Concat(_cycles, " cycles with ", _max, " max: "));                     sw.Restart();                     for (int count = 0; count < _cycles; count++)                     {                            Int64 i = 0;                            while (i < _max)  { i += 2; }                     }                     sw.Stop();                     Console.WriteLine("{0} elapsed.", sw.Elapsed);                     Console.ReadKey();              }        } Чтобы минимизировать потенциальные побочные эффекты теста, следует работать в нескольких циклах (5 циклов) с последующей апроксимацией нескольких результатов тестирования и не нужно реализовывать вызовы функций , потому что оценка синхронизации может искажаться. Основываясь на статистических данных, самый быстрый способ увеличения числа Int64 в 2 раза можно достичь через составленное уравнение: i = i + 2 (5,589 сек для всей процедуры тестирования), вместе с i + = 2 (5,625 сек) и удвоением и ++; i ++;  "leading from behind" с оценкой производительности в 11,907 сек. Соответствующая поправка была сделана в факторизации первичных чисел (теперь выводится i = i + 2). Параллельный алгоритм для факторинг-теста При использовании параллельных алгоритмов факторизации можно значительно увеличить производительность теста. Параллельне алгоритмы факторизации region GetFirstFactorParallel(Int64 Num) algorithm internal static Int64 GetFirstFactorParallel(Int64 Num) {        // use concurrent stack to store non-trivial factor if found        ConcurrentStack _stack = new ConcurrentStack();        // object to specify degrees of parallelism        ParallelOptions _po = new ParallelOptions();        try        {              // return value initially set to 1              Int64 _ret = 1;              // step 1: try to factor on base 2, return if OK              if (Num % 2 == 0) return 2;              // step 2: try to factor on base 3, return if OK              if (Num % 3 == 0) return 3; #region parallel algo to find first non - trivial factor if exists              // set upper limit              Int64 _upMargin = (Int64)Math.Sqrt(Num) + 1;              // number of CPU cores              int _countCPU = System.Environment.ProcessorCount;              // max degree of parallelism set equal to _cpuCount              _po.MaxDegreeOfParallelism = _countCPU;              Parallel.For(0, 2, _po, (i, _plState) = >              {                     // starting number for inner loops (5 and 7)                     int _seed = 5 + 2 * i;                     // inner loops running in parallel;                     // notice that because input Num was already tested for factors 2 and 3,                     // then increment of 6 is used to speed up the processing,                     // thus in dual core CPU it looks like:                     // 5, 11, 17, 23, 29, etc. in first thread                     // 7, 13, 19, 25, 31, etc, in second thread                     for (Int64 j = _seed; j < _upMargin; j += 6)                     {                            // exit loop if stack contains value                            if (_stack.Count != 0) { break; }                            // check divisibility                            if (Num % j == 0)                            {                                   // push non-trivial factor to ConcurrentStack and exit loop                                   if (_stack.Count == 0) { _stack.Push(j); }                                   break;                            }                     }              }); #endregion              // return the value in ConcurrentStack if exists, or 1              return (_stack.TryPop(out _ret)) ? _ret : 1;        }        catch { throw; }        finally { _po = null; _stack = null; } } #endregion Источник: http://www.codeproject.com/Tips/155308/Fast-Prime-Factoring-Algorithm

Введение AngularJS – фреймворк-библиотека Javascript, разработанная для создания одностраничных приложений на основе MVC (Model-View-Controller) шаблона. Будем осваивать данную технологию на практике. Создадим HTML страничку со стандартной структурой. Далее нам нужно преобразовать ее в одностраничное приложение. Для этого подключим AngularJS к своей странице, добавив в тег с данным кодом: <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> script> Следующим шагом мы явно укажем на то, что наша страница является AngularJS приложением. Нужно добавить ng-app директиву, которой мы обозначим корневой элемент приложения. Зачастую таким элементом выступает тег или же тег . Добавим эту директиву к :  <!DOCTYPE html> <html ng-app=""> <head>     <title>title>     <meta charset="utf-8">     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">     script> head> <body> body> html> Проверим,  все ли работает, добавив небольшое выражение для подсчета произведения чисел 123 и 45. В AngularJs все выражения записываются в двойных скобках. Добавим в параграф со следующим содержимым: <p>Результат произведение чисел 123 и 45 равен : {{ 123 * 45 }}p> Запустим в браузере:  Теперь у нас есть готовый шаблон приложения, который мы будем использовать во всех последующих примерах. AngularJS позволяет разработчику легко взаимодействовать с пользовательским вводом. Для этого есть соответствующая директива ng-model, которая связывает значения HTML элементов контроля (teaxtarea, input etc.) с приложением. Использовать эти данные поможет директива ng-bind, добавив эти данные во View (элемент MVC) и отобразив их на странице. Применим полученные знания на практике. В созданный ранее шаблон добавим поле для ввода <input> с директивой ng-model и параграф для вывода данных c директивой ng-bind. Код странички: <!DOCTYPE html> <html ng-app=""> <head>     <title>title>     <meta charset="utf-8">     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">     script> head> <body>     <p>Ввведте свое имя:p>     <input type="text" ng-model="yourName">     <p>Здравствуй, <span ng-bind="yourName">span>p> body> html> Откроем в браузере: Теперь попробуйте ввести свое имя в поле для ввода. Давайте добавим в данный пример дефолтное значение имени, к примеру Анна. Сделаем это, конечно же, с помощью директивы ng-init, которая позволяет инициализировать любую переменную AngularJS приложения. В строку  добавим директиву ng-init. <input type="text" ng-model="yourName" ng-init="yourName='Aнна'"> Посмотрим изменения в браузере: Теперь мы имеем значение по дефолту – Анна, но все так же можем изменять его: Вывод данных в этом примере можно сделать еще одним способом, а именно, использовав выражение. Заменим на {{yourName}}. <p>Здравствуй, {{ yourName }}p> Открыв страницу, мы не увидим абсолютно никаких изменений, а все потому, что выражения в AngularJS связывают данные со страничкой точно так же, как и ng-bind директива. Как упоминалось в статье ранее, AngularJS строит приложения на основе MVC. Часть модель – представление (Model - View) определяется с помощью директивы ng-app. Контроллер в свою очередь определяется директивой ng-controller. Рассмотрим пример с использованием контроллера страницы. Создадим страничку со списком гостей, которых Вы пригласите на свой день рождения. К созданному ранее шаблону добавим контроллер, а так же установим имя для приложения. В тег внесем следующие изменения: <html ng-app="firstApp" ng-controller="firstController"> Далее добавим с типом text для введения имени гостя и еще один с типом submit для добавления гостя в список. Также добавим с полем для вывода списка и чекбоксом с типом checkbox для того, чтобы можно было удалять тех, кто не придет на ваш праздник. В данный добавим директиву ng-repeat, отвечающую за повторение данных в обозначенном контейнере. <!DOCTYPE html> <html> <head>     <title>title>     <meta type="utf-8">     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">script> head> <body ng-app="firsApp" ng-controller="firstController">     <h2>Мои гости:h2>     <form ng-submit="addGuest()">         <input type="text" ng-model="guestsInput" size="50" placeholder="Введите имя гостя">         <input type="submit" value="Добавить гостя">     form>     br>     <div ng-repeat="guest in listOfGests">         <input type="checkbox" ng-model="guest.come"> <span ng-bind="guest.guestName">span>     div>     <p><button ng-click="remove()">Удалить гостя button>p> body> html> Осталось добавить скрипт, который будет содержать функции для работы с элементами нашего приложения. Замечу, что все функции будут расположены в контроллере приложения. Скопируйте и добавьте после закрывающегося тега параграфа с кнопкой <p><button ng-click="remove()">Удалить гостя button>p> следующий код: <script>         var app = angular.module('firsApp', []);         app.controller('firstController', function($scope) {             $scope.listOfGests = [{guestName:'Я любимый', come:false}];             var countOfGuests = 1;             $scope.addGuest = function() {                 $scope.listOfGests.push({guestName:$scope.guestsInput, come:false});                 $scope.guestsInput = "";                 countOfGuests++;                 checkNumberOfGuests();             };             $scope.remove = function() {                 var oldGuests = $scope.listOfGests;                 $scope.listOfGests = [];                 angular.forEach(oldGuests, function(guest) {                     if (!guest.come) $scope.listOfGests.push(guest);                     countOfGuests--;                 });                 checkNumberOfGuests()             };             function checkNumberOfGuests(){                 if(countOfGuests <= 2){                     alert("Маленькая вечеринка тоже не плохо! Не печалься! Лучших друзей не бывает много!");                 }else if(countOfGuests >= 9){                     alert("Праздник?! ВЕЧЕРИНИЩЕ!");                 }else{                     alert("Узкий круг самых близких, это всегда хорошо!");                 }             } script> В данном коде у нас есть три функции: добавление и удаление гостя и проверка количества гостей. В функции добавления мы берем введенные данные guestsInput и добавляем их в лист listOfGests. Устанавливаем значение чекбокса в false (в нашем случае, это значит, что человек придет / если значение true, то есть галочка стоит - значит не придет), после чего очищаем поле ввода. Далее увеличиваем счетчик гостей и вызываем функцию проверки их количества. В функции удаления мы берем список гостей listOfGests и проверяем значение чекбокса каждого гостя, определяя, кто придет, а кто нет. Удаляем тех, кто отмечен галочкой (не пойдет) и уменьшаем счетчик элементов. Функция проверки количества гостей очень проста, поэтому подробнее мы ее разбирать не будем. Давайте откроем пример в браузере и поработаем с ним: Добавим несколько гостей: С изменением количества гостей содержимое оповещений будет меняться. Когда вы добавите больше 9 друзей, тогда увидите такое оповещение: Поздравляем, вот Вы и создали свое первое одностраничное приложение с помощью AngularJS!

Введение Приходилось ли Вам, работая в интернет-агенстве или веб-студии, сталкиваться с ситуациями, когда у Вас возникали разногласия с S’ales-менеджерами (менеджерами по продажам услуг компании)? Лично у меня они возникают чуть ли не ежедневно. Вроде бы и цели у нас общие – выстраивать мощный бизнес и зарабатывать хорошие деньги. Но технари и менеджеры по продажам , оказывается, настолько разные по своему мышлению, и идем мы к этим глобальным целям разными дорогами. В данной статье я хочу  разобрать психотип технического специалиста и продажника. Исходя из этого мы сможем понять: Почему возникают спорные ситуации между отделом продаж и отделами по производству; Какие стандартные “косяки” допускают менеджеры по продажам, которые в дальнейшем существенно вредят производственникам; Как попытаться избавиться от этих ошибок раз и навсегда. Основные особенности психотипа технаря Техническими специалистами в такой структуре, как веб-студия, являются SEO-специалисты, PPC-специалисты, программисты, маркетологи, аккаунт-менеджеры, менеджеры проектов, руководители отделов и другие позиции, которые в этом перечне я случайно мог пропустить. Основная цель технаря – максимально качественно закрывать вопросы разработки стратегии и реализации работ для достижения максимального результата, будь то контекстная реклама, поисковое продвижение или разработка сайтов. Мышление и построение работы данных категорий сотрудников построено преимущественно на: Систематичности; Педантичности; Четкой последовательности действий, которые формируются на составлении четких дедлайнов (сроков) по каждой задаче и процессу; Тайм-менеджменте (детальном планировании всего рабочего времени); Отсутствии какого-либо хаоса и утверждение всех нюансов с заказчиком. По моему мнению, это идеальная схема построения рабочего процесса технического специалиста, который сможет четко и слаженно, как часовой механизм, решать свои задачи в рамках той компании, в которой работаю сейчас я. С большой вероятностью, у других компаний и фирм данный секрет успеха отличается от того, что приведен выше. Рассмотрим теперь особенность настроев S’ales-менеджеров. Настрои сейлзов Как бы гениально это не прозвучало, но основная задача продажника – много продавать. Продавец должен быть стрессоустойчивым, уметь подать продукты компании в такой упаковке, чтобы покупатель, не раздумывая, хотел стать клиентом компании. Исходя из этого, менеджеры по продажам пользуются следующими векторами в своей работе: Нагенерировать как можно больше лидов (людей, которые проявили хотя бы минимальный интерес к продукту) путем обработки, например, входящих обращений или холодных звонков; Постоянно контактировать с лидами до момента, пока клиент все-таки не подпишет договор и не заплатит деньги; Назначить как можно больше встреч, где убедить клиента в целесообразности и необходимости услуг проще, чем по телефону; Выполнить план продаж путем заключения как можно большего количества договоров. Такие настроения оправданы, потому что зачастую мотивация S’ales-менеджера состоит из небольшой ставки + хорошего процента от суммы бюджетов подписанных договоров. Поэтому основной кусок пирога заложен именно в этой процентной части. А теперь про типичные «косяки» продажников Настоящий менеджер по продажам – это охотник за процентами. На этом я уже поставил акцент в предыдущем пункте. Когда я наблюдаю за своими коллегами-сейлзами, порой у меня возникает ощущение, что они готовы на все ради продажи. Извините, я без критики и осуждения. Просто такое рвение доставляет нам неприятности и проблемы следующего характера: Продажа ради продажи. Иногда к нам на стол попадает такой проект, с которым ты просто не знаешь, что делать, либо который со старта обречен на провал. Проходит месяц-два, и клиент отказывается от услуги, потому что, к примеру, SEO на первых порах не тот тип рекламы, который нужен проекту. Несогласованный или весьма заниженный бюджет на проект. Бывают такие ситуации, что ко мне подходят и говорят что-то типа: “Клиент очень «горячий». Можем подписать прямо сейчас, если ты дашь добро. У него бюджет 3500 грн., из которых на ссылки 1000 грн.”. И это при среднем чеке компании, например, в 6000 грн. и очень конкурентной тематике проекта типа котлов или окон. Увы, с таким бюджетом нет смысла заходить на рынок. Да и коммерческий интерес компании-исполнителя невелик. Не доходит  ключевая информация. Для лучшего понимания проблематики смоделирую ситуацию. Например, у нового клиента компании есть два сайта A и B одной тематики. Сайт A клиент хочет продвигать, а сайт B – старый, который он трогать не хочет. Сайт B имеет уже какую-то видимость и позиции, но является аффилиатом по отношению к A, поэтому отдел SEO предлагает клиенту склеить 301 редиректом непродвигаемый сайт с продвигаемым. Когда поступает такое предложение, клиент возмущенно говорит, что сайт B уже продвигался ранее другой компанией и попал под текстовый фильтр Panda, и основная идея появления нового сайта A и его дальнейшей раскрутки связана именно с этим. И немаловажно то, что заказчик утверждает, что вся эта информация была донесена до менеджера, который подписывал договор. Чья недоработка и в чем она заключается, я думаю, понятно… Обещание золотых гор. Ради подписанного договора сейлз на эмоциях может пообещать клиенту четкие сроки и даже гарантии на вывод в ТОП. Это большая ошибка, которую потом придется разгребать аккаунт-менеджерам. Клиента нужно обязательно ориентировать на какие-то примерные сроки, но давать 100% гарантии на вывод в ТОП никак нельзя. Гарантировать можно только максимально внимательный и профессиональный подход и перечень работ, прописанных  в договоре. Включение в общий бюджет дополнительных доработок. Иногда те лиды, которые являются «горячими» или «теплыми» манипулируют до безумия заинтересованным в продаже менеджером. Это может заключаться в том, что заказчик обещает долгосрочное сотрудничество по SEO-оптимизации или продвижению, если в общий бюджет будут включены некоторые доработки по сайту. И очень часто заказчики почему-то считают, что все они весьма простые типа CTRL+C и CTRL+V и все готово. То ли от незнания специфики правок, то ли от желания докрутить клиента до продажи как можно быстрее, менеджеры часто обещают: ”Все просто. Все будет. Все сделаем!” И в 80% случаев эти доработки оказываются такого масштаба, что в рамках лояльности их не сделаешь и нужно оценивать отдельными сроками и бюджетами. На эти грабли менеджеры наступают регулярно и до тех пор, пока их не заставляют самостоятельно выруливать такие ситуации. Такое нужно мгновенно искоренять! Это далеко не весь список казусов, которые происходят с менеджерам по продажам. Это золотая классика, которая, я уверен, повторяется у многих компаний и фирм данного сегмента бизнеса. Как искоренить весь этот бардак? Это намного проще, чем может показаться на первый взгляд. Для этого всего лишь нужно:  Ввести обязательную систему брифования со стандартным списком вопросов, которые еще на этапе переговоров помогут получить важную информацию для составления более-менее прозрачой картины о проекте будь-то SEO, контекст или веб; Внедрить многоуровневое утверждение проектов через руководителей отдела продаж,  отдела по производстенной части и аккаунтинга. Пока каждый руководитель детально не изучит условия договора и особенности заказа, ничего подписано быть не должно! Использовать систему передачи проекта в письменном виде руководителям отделов со стоимостями по проектам. (Как, сколько, за что клиент заплатил и что должен в итоге получить); Проведение периодических ликбезов и занятий, на которых менеджеры по продажам могут задавать вопросы техническим специалистам, тем самым повышать свой уровень до уверенной компетенции в продукции. Ну, и как резюме… Подытожить данный материал, над которым я работал не один вечер, хочется следующим обращением: Уважаемые менеджеры по продажам. Мы Вас очень ценим и уважаем. Вы - локомотив нашего бизнеса и от Вас зависит многое. Но, пожалуйста, согласовывайте с нами каждый нюанс и мелочи и прислушивайтесь к производственникам Вашей компании. Давайте жить дружно ;)

Кто такой верстальщик? Языки верстки HTML & CSS Техники верстки Препроцессоры Графический редактор и векторная графика Инструмент упрощения верстки Bootstrap 4 Язык программирования JavaScript Библиотека jQuery Методология БЭМ Вспомогательные инструменты Система управления версиями Git Английский язык Итоги   Всем привет! Вы когда-либо задумывались о том, как происходит полный цикл разработки современного веб-сайта? С чего все начинается и как мы приходим к такому сервису, который имеет привлекательный и гармоничный внешний вид, а также богатый функционал? Давайте разберемся с этим вопросом, а заодно поближе познакомимся с героем данной статьи. Прежде всего стоит знать, что сегодня человек-оркестр, который мог бы осуществить полный цикл создания веб-сайта — очень редкое явление. Процесс реализации одной только клиентской стороны уже является трудом целой команды специалистов. Если говорить о профессиональной веб-студии, то разработка несложного корпоративного веб-сайта осуществляется следующим образом. Вначале за заказчика сайта берется менеджер по продажам. Он общается с клиентом через телефон, электронную почту, при личной встрече. Обсуждает все детали возможного сотрудничества. Задача менеджера по продажам — решить все финансовые и юридические нюансы, связанные с созданием сайта. После заключения договора и оплаты услуг наступает звездный час PM`а (менеджер проекта), который и управляет проектом. Он ответственен за координацию действий команды разработчиков: проектирование и расстановка приоритетов, планирование выполнения задач, контроль, своевременное решение проблем, согласование промежуточных и конечных этапов создания и продвижения сайта. PM является связующим звеном между заказчиком и разработчиками: он плотно сотрудничает с клиентом, выясняет его требования, желания, предпочтения, затем конвертирует всю информацию в понятный команде девелоперов вид. После определения требований за работу берется веб-дизайнер. Данный специалист занимается графической и художественной составляющими сайта. В этой секции веб-кухни происходит создание красивого и приятного интерфейса с удобным размещением кнопок, меню и других элементов веб-сайта. На выходе получаются макеты, которые учитывают различные платформы потенциальных посетителей (стандартные и широкоформатные экраны ПК, планшеты, мобильные устройства и т. д.). Результат работы веб-дизайнера — графическая схема с указанием оттенков, отступов и других параметров веб-сайта в статическом виде, которая максимально точно отображает внешний вид будущего сайта. Фактически, это точный рисунок сайта. Готовый макет передается в руки верстальщика. Теперь при помощи различных элементов языка разметки веб-страницы графические элементы дизайна (рисунки, шрифты, таблицы и т. д.) будут переведены в понятный для браузера формат. Можно сказать, что он создает текстовый макет того, что придумал дизайнер. После того, как страница сверстана и проверена в различных браузерах на правильность отображения, она передается в работу специалисту, который подключает необходимый клиентский функционал, используя JavaScript-фреймворки, библиотеки и сопутствующие технологии. Как правило это FrontEnd разработчик. Затем начинается работа BackEnd разработчика, который занимается реализацией серверной стороны веб-сайта (базы данных, серверная архитектура, программная логика). Обработка пользовательских запросов, хранение и оперирование пользовательскими данными, аутентификация, оптимизация функциональных возможностей сайта и многое другое — обязанности бэкендщика. С уже готовым сайтом работают те специалисты, которые ответственны за его наполнение и продвижение в поисковых системах: контент-менеджер, специалист по контекстной рекламе, SEO-специалист, копирайтер и другие. Сегодня же нас интересует именно тот, кто превращает графику в узнаваемый браузером формат — верстальщик. Разберемся в специфике его работы и навыках, которыми должен обладать потенциальный кандидат на данную должность.   Кто такой верстальщик? Сразу дадим определение терминам, которые важны для составления целостной картины. Верстальщик — это специалист, который занимается версткой интернет-страниц. Верстка — процесс создания визуальной составляющей сайта. Структура самого сайта задается языком гипертекстовой разметки HTML, а каскадная таблица стилей CSS описывает его внешний вид. Проще говоря, HTML задает каркас страницы, а CSS занимается его облагораживанием (цвет, шрифты, стили, расположение, отображение блоков и т. д.). Если говорить о профессиональной верстке, то она происходит согласно заранее разработанному макету, который обычно создает веб-дизайнер, знающий тонкости своего ремесла. После получения графического документа от дизайнера верстальщик использует Photoshop или другие аналоги для извлечения необходимой информации (Illustrator, Sketch, Figma и другие): используемые шрифты, иконки, картинки, точные кодировки цветов, размеры элементов в пикселях, их точное расположение. Только после такой подготовительной работы герой нашей статьи может открыть среду написания кода и приступить к верстке. Давайте узнаем, каков арсенал инструментов использует верстальщик в своей работе.   Какие языки / технологии / инструменты применяет верстальщик?   HTML & CSS Языки верстки, которые мы уже упоминали. Являются главными инструментами верстальщика. Без них не обходится создание ни одного веб-сайта. HTML определяет его структуру (костяк), а CSS — внешний вид (вся остальная надстройка).   Техники верстки Для создания качественных веб-сайтов необходимо использовать специальные техники, которые упрощают верстку, делая код понятным и легко масштабируемым. Таким образом, выделяют три вида верстки:   фиксированная; резиновая; адаптивная. Фиксированную верстку применяли еще при создании самых первых сайтов. Тогда они были простые, не требовали какой-либо оптимизации и кроссбраузерности, а потому не было потребности в разработке новых сайтостроительных техник. При фиксированной верстке ширина сайта всегда одинаковая вне зависимости от разрешения экрана. Это самый простой подход к реализации верстки, но при этом самый непопулярный, поскольку сегодня пользователи используют множество моделей компьютеров, ноутбуков, телефонов и планшетов для выхода в сеть. В связи с этим, разрешение экранов варьируется от 200 до 3000 пикселей. Резиновая верстка способна менять размеры сайта в зависимости от размерности экрана. Таким образом, проблемы фиксированного вида решаются, однако сама процедура набора страницы усложняется. Верстальщику приходится думать о том, как растянуть картинки, чтобы они не потеряли в качестве и корректно отображались на всевозможных девайсах. Ну и о производительности не забывать. Кому нужен сайт, который будет прогружаться вечность? Адаптивная верстка является самой сложной. Сайт помимо размеров меняет свой внешний вид в зависимости от размеров устройства, на котором воспроизводится. Ориентирована в первую очередь на мобильные устройства, оттого и имеет сегодня большой спрос. Также, качественная верстка должна обладать следующими свойствами: семантичность; кроссбраузерность; валидность. Семантика в верстке означает соответствие тегов информации, которая находится внутри них. С ее использованием код становится чище, читабельнее и лаконичнее. Более того, поисковые системы начинают лучше воспринимать такие сайты, повышая их позиции при ранжировке.    Кроссбраузерность означает, что разработанный сайт должен качественно отображаться во всех популярных браузерах (Mozilla Firefox, Opera, Google Chrome, Safari, IE). Почему она так важна? Все дело в том, что один и тот же сайт может по-разному отображаться в разных браузерах. Не будем заглядывать за кулисы этого явления — просто подчеркнем, что современные сайты обязаны отвечать требованию кроссбраузерности. Валидность веб-сайта означает соответствие его HTML-кода стандартам W3C (Консорциум Всемирной паутины). Валидация предусматривает соблюдение корректности кода страниц, отсутствие синтаксических ошибок, наличие вложенности тегов и т. д. Проверка HTML-кода выполняется при помощи специальной программы — валидатора кода. Она находит и фиксирует все несоответствия со стандартом, указывая на их местонахождение и формулируя, где проблемный участок и почему он должен быть исправлен. Естественно, важным является и тот нюанс, что ваш код должен быть минимален, а интернет-страница, созданная с его помощью, должна быстро прогружаться. Ниже мы также рассмотрим вспомогательные инструменты, которые обеспечивают выполнение этих условий.   Sass/SCSS Препроцессор, который является расширением CSS. Если современный CSS сам по себе простой и мощный инструмент, то в комбинации с препроцессором это вовсе боевая машина для качественного оформления контента на интернет-страницах. Польза Sass/SCSS особенно отчетливо ощущается в больших проектах, когда количество строчек кода кажется бесконечным. Препроцессор позволяет использовать функции, недоступные в самом CSS. Например, переменные, вложенности, миксины, наследование и другие вещи, которые упрощают и делают удобным написание CSS-кода.   Photoshop / Illustrator / Sketch / Figma / Avocode Графический редактор, как мы уже упоминали, необходим верстальщику для извлечения необходимой информации из предварительно подготовленного макета: используемые шрифты, иконки, картинки, точные кодировки цветов, размеры элементов в пикселях, их точное расположение. Какой редактор был использован для создания макета, такой следует использовать и для изъятия необходимых данных.   SVG Вдогонку за графическими редакторами упомянем об SVG. Это язык разметки масштабируемой векторной графики. Изображения на странице, сделанные с помощью SVG, корректно отображаются на экранах с различным разрешением не теряя при этом своего качества, в отличии от традиционных растровых .jpeg, .png и других. Верстальщик должен уметь работать с SVG, поскольку он важен для оптимизации и быстродействия сайта, а также используется для реализации анимации векторных изображений, разработки прелоадеров и других интерактивностей.   Bootstrap 4 Это HTML, CSS, JS фреймворк для разработки кроссбраузерных веб ориентированных интерфейсов. Bootstrap являет собой набор инструментов от Twitter, созданный для облегчения разработки веб-приложений и сайтов. Он использует CSS и HTML для типографии, форм, кнопок, таблиц, сеток, навигации и т. д., а также дополнительные расширения JavaScript, упрощающие работу веб-разработчика. Данные свойства позволяют коду, написанному с применением Bootstrap, быть переиспользуемым, понятным и компактным. Основные преимущества фреймворка: высокая скорость верстки; кроссбраузерность и кроссплатформенность; наличие хорошей документации, большого сообщества и огромного количества разнообразных обучающих материалов; низкий порог вхождения (необходимо знать лишь основы HTML, CSS, JavaScript и jQuery).    JavaScript Язык программирования, который повсеместно используется в создании сайтов, даже в реализации их серверной стороны. Становиться ниндзя JavaScript верстальщику не нужно — это задача FrontEnd разработчика, который прорабатывает логику клиентской стороны веб-приложений. Герою статьи JS необходим для реализации различных динамических элементов на странице: анимации, слайдеры, калькуляторы и т. д. Также, этот язык применяется для подключения различных библиотек и определенных взаимодействий с ними. Знание базы JavaScript необходимо для комфортного использования библиотеки jQuery, подробнее о которой пойдет далее речь.     jQuery Небольшая, быстрая и многофункциональная JavaScript-библиотека, для работы с которой необходимо владеть HTML, CSS и JavaScript на базовом уровне. Она упрощает процесс программирования на JS и представляет объемные решения распространенных задач в виде методов, которые вызываются одной строчкой кода. Этой особенностью jQuery приносит ощутимую пользу верстальщикам. Вместо углубления в JavaScript и написания тонны кода, можно просто использовать уже готовые решения в различных задачах.   Методология БЭМ “Блок, Элемент, Модификатор” — методология, предусматривающая компонентный подход к разработке веб-страниц, в основе которого лежит принцип разделения интерфейса на независимые блоки. Подход БЭМ позволяет повторно использовать существующий код в создании других страниц с сохранением всех его свойств (размеры, шрифт, цвет и т. д.). Таким образом обеспечивается расширяемость и повторная используемость компонентов интерфейса. Соблюдение принципов БЭМ повышает качество, читаемость кода, увеличивает производительность и упрощает командную работу.   CMS (Wordpress / Opencart / Joomla / Bitrix) Content Management System — система управления контентом, являющая собой движок для обеспечения и организации процесса создания, редактирования и управления контентом. В случае отсутствия CMS разработчики были бы обязаны реализовывать дополнительную функциональность для каждой новой страницы, вносить новый контент самостоятельно программным путем и т. д. Ниже приведем пример для наглядности. Допустим, вы ведете собственный блог на специализированной платформе и у вас появилась необходимость сделать новую рубрику. Вы же не будете просить целую команду разработчиков создать новую интернет-страницу с нуля со всей функциональностью либо дорабатывать уже существующую под каждый новый пост? А в случае с интернет-магазином вы были бы вынуждены проделывать такие манипуляции для каждого нового товара. Вот для этого и существуют CMS. Они предоставляют удобную администраторскую панель вашему сайту, с которой в дальнейшем работает контент-менеджер. В профессиональной среде процесс настройки взаимодействия движка и готового шаблона сайта называется “натяжкой” шаблона на CMS. Основные функции CMS: предоставление инструментария для работы над контентом; управление контентом — хранение, управление потоком документов, соблюдение режима доступа, контроль версий; публикация контента; представление необходимой информации в удобном для навигации и поиска виде.        Gulp / Webpack Gulp — система сборки, которая автоматизирует рутинные задачи верстальщика. В число ее обязанностей входят: минимизация кода, оптимизация изображений, тестирование, анализ качества кода и прочее. Другими словами, она используется для сбора верстки. Webpack по сравнению с Gulp обладает более широкими настройками и функционалом. Предназначенный для удобной разработки одностраничных веб-приложений с использованием JavaScript.   Git Самая популярная распределенная система управления версиями, которая позволяет вести историю разработки проекта с возможностью доступа к каждой сохраненной версии. Таким образом, если в процессе создания программный продукт стал неправильно функционировать, есть возможность вернуться к предыдущей рабочей версии вместо длительных поисков ошибок. Также системы управления версиями являются неотъемлемым инструментом командной разработки, который дает возможность девелоперам работать над одним проектом одновременно, сохраняя внесенные изменения. Заодно удобно отслеживать выполнение задач каждым членом команды. Очень важный инструмент для любого IT-разработчика.   Английский язык Знание английского языка является одним из основных требований к верстальщику, поскольку большое количество полезной информации находится именно на англоязычных сайтах. Уровень чтения технической документации будет достаточным для комфортного пользования иностранными ресурсами.    Итоги Верстальщик — это специалист по верстке веб-страниц. Несмотря на довольно лаконичное определение, список требуемых от него знаний и навыков гораздо красноречивее. Верстальщик в 2020-м году должен владеть неплохим стеком технологий. Более того, мы привели лишь общий список инструментов. В реальности он может немного отличаться согласно направлению деятельности компании/веб-студии. Если к перечисленному добавить углубленные познания JavaScript и хорошее владение одним из фреймворков (Angular, Vue.js, React) + парочка смежных технологий, получится полноценный FrontEnd разработчик.  Отдельно отметим портфолио верстальщика. Оно должно быть в наличии у данного специалиста в обязательном порядке, иначе шансы получить job-оффер ничтожно малы (не забывайте и о конкуренции). В портфолио вам необходимо продемонстрировать все свои навыки и умения. Это может быть десяток проектов с использованием по крупице различных технологий в каждом, либо пара-тройка, но с концентрированием всех ваших умений и познаний в верстке. В этом случае пригодятся специальные ресурсы с опубликованными бесплатными макетами, которые можно брать и верстать, набивая руку и набираясь опыта. Также, если вы заинтересованы в изучении ремесла верстальщика, ITVDN имеет для вас хорошие новости. На нашем образовательном ресурсе вы сможете освоить данную специальность за 4 месяца. Учебная программа каждой специальности, в том числе и верстальщика, содержит: тщательно подобранный пакет видео курсов; план обучения с нуля до уровня специалиста, который вы можете адаптировать под свой уровень; Интерактивный Тренажер навыков для формирования навыков написания кода; учебные материалы, исходники программного кода, опорный конспект, презентации к урокам; доступ к Форуму, где каждый учащийся может общаться с другими студентами, тренерами и единомышленниками; возможность персональной консультации с тренером согласно выбранному пакету подписки; возможность проходить тестирование для подтверждения знаний, полученных в результате прохождения видео курса; электронный сертификат об окончании курса после успешного завершения тестирования. Все видео курсы записываются опытными разработчиками, которые проходят соответствующую сертификацию, чем подтверждают свое мастерство владения той или иной технологией. Наши преподаватели работают в IT и в курсе всех современных тенденций в своей сфере разработки. Знакомство со специальностью мы рекомендуем начать с просмотра бесплатных вебинаров по специальности верстальщик, в частности, с вебинара Елены Хижняк “Как стать верстальщиком?”, в котором отражены все самые актуальные тренды и требования. Возможно, нас читают практикующие верстальщики? С удовольствием прочтем вашу точку зрения на позиции, изложенные в данной статье. Также, будем рады любым вопросам и замечаниям от всех читателей! Ну а тем, кто решил выбрать профессию верстальщик мы желаем быть упрямыми, оптимистичными и с неугасаемым огоньком жажды знаний в глазах.Успехов и вдохновения на вашем пути!

Что такое адаптивная верстка? Преимущества мобильного адаптивного дизайна Почему адаптивный дизайн важен для бизнеса Как создать адаптивный дизайн Плавающая Сетка (Fluid Grid) Гибкий текст и изображения Медиа-запросы Пользовательское тестирование адаптивных сайтов Браузерное и устройство-зависимое тестирование на адаптивный дизайн Вдохновение от других адаптивных сайтов Будущее адаптивного дизайна для мобильных устройств Является ли ваш сайт Mobile-Friendly? Подводя итоги От редакции ITVDN Еще в 2015 году Google внедрил изменения в алгоритмы своей поисковой системы, которые теперь учитывают адаптированность сайта под мобильные устройства как важный пункт при ранжировании сайта. Дата была удачно названа Мобилгеддон (Mobilegeddon), как сравнение с Армагеддоном. Одно только такое введение требований от поисковиков к наличию мобильной версии сайта может оправдать важность адаптивного дизайна. Проще говоря, веб-сайт должен быть удобным для просмотра на смартфоне. Требования к адаптивной верстке включают в себя такие элементы дизайна, как: читаемый текст без необходимости его увеличения; достаточное количество места для целей касания (tap targets); отсутствие горизонтальной прокрутки. На сегодня уже почти 4 миллиарда пользователей используют смартфоны для серфинга в Интернете. Веб-сайты, не оптимизированные для всех небольших экранов смартфонов, имеют рейтинг в поисковых системах ниже тех, что выполнены адаптивно. Более 50% поисковых запросов в Интернете теперь происходит с мобильного устройства. Чтобы ваш веб-сайт мог работать с карманными устройствами (не создавая отдельное приложение), вам для начала стоит признать – адаптивная вёрстка важна для пользователей смартфонов. Давайте рассмотрим более детально, почему и как это происходит. Прежде всего ... а что такое адаптивная верстка и мобильный дизайн, и почему вы вообще должны о них заботиться?   Что такое адаптивная верстка? Адаптивный веб-дизайн (RWD - Responsive web design) создает систему, позволяющую одному сайту (с одним URL-адресом и одним источником контента) реагировать и адаптироваться к размерам устройства пользователя. Адаптивный веб-сайт создан с использованием верстки с гибким макетом, который подстраивается под размеры экрана устройства. По-сути, благодаря адаптивной верстке, ваш веб-сайт будет отлично выглядеть и хорошо работать как на настольном компьютере (или ноутбуке), так и на планшете, и в браузере мобильного телефона. В прошлом разработчики создавали более одного сайта, для соответствия страниц экранам разных размеров. С учетом того, что на рынке сегодня представлено много типов устройств, это кажется совершенно неэффективным… верно? Сам термин «адаптивная верстка» был фактически придуман в 2010 году веб-дизайнером Итаном Маркоттом. Сегодня адаптивная верстка в веб-дизайне уже не новая тенденция, а скорее проверенный временем способ мышления, стоящий за созданием сайтов. На сегодня наличие адаптивного веб-сайта больше не является еще одной возможностью для развития вашей инфраструктуры — это уже необходимость! Преимущества мобильного адаптивного дизайна Преимущество адаптивного макета номер один— это получение гарантии того, что любой пользователь на любом устройстве будет иметь наилучшие возможности взаимодействия с контентом на вашем сайте. Адаптивная верстка веб-сайта также является отличным способом улучшить контент на вашем сайте. Вы сможете убедиться, что те, кто использует мобильное устройство, видят всю важную информацию. Благодаря особенностям алгоритма Google, адаптивный веб-дизайн повышает видимость сайта в поисковых системах, поскольку он удобен для просмотра на мобильных устройствах. Сайт с качественным представлением контента на мобильном устройстве будет находиться в результатах поиска выше, чем сайт, хорошо отображающий контент только на десктопах.   Почему адаптивный дизайн важен для бизнеса Расширяется охват клиентов благодаря захвату пользователей небольших устройств (планшетов и смартфонов); Постоянный опыт работы с широкой аудиторией, который может увеличить количество потенциальных клиентов, продажи и конверсии; Аналитика, отслеживание и отчетность по версиям сайтов для десктопов и мобильных устройств могут быть в одном месте; Затраты времени и стоимость управления контентом снижается; Более 60 % запросов в Google на конец первого квартала 2019 делаются с мобильных устройств. Обратите внимание, что есть еще два способа, с помощью которых можно обеспечить взаимодействие пользователя с сайтом через мобильные приложения. Первый называется динамическим показом (Dynamic Serving), в котором используется один и тот же URL-адрес, но разные коды HTML и CSS. Страницы распознают устройство, на котором они просматриваются, и предоставляют соответствующий код. Второй способ — это вообще отдельный мобильный сайт. Когда пользователи посещают сайт с мобильного устройства, они отправляются на другой - мобильный URL-адрес. Вам следует выяснить, какой вариант лучше всего подходит для вашего присутствия в Интернете, прежде чем остановиться на одном. Учтите, что на Google ежедневно приходится более 5,6 миллиардов поисковых запросов. Рекомендуемая Google конфигурация для сайтов, оптимизированных для смартфонов, - это сайты с адаптивным веб-дизайном. Google даже предлагает тест на адаптивность сайта под мобильные устройства, чтобы вы могли увидеть, насколько легко посетитель может использовать вашу страницу на мобильном устройстве. Вы просто вводите URL страницы и получаете оценку. Как создать адаптивный дизайн Как сделать адаптивную верстку? Есть несколько моментов, о которых стоит подумать при создании адаптивного макета. Это процесс, который требует определенной системы проектирования и иерархии контента среди различных устройств. Три основных компонента адаптивного веб-дизайна включают в себя: Гибкая (плавающая) сетка - fluid grid; Гибкий текст и изображения; Медиа-запросы. Рассмотрим каждый из этих элементов детальнее.   Плавающая Сетка (Fluid Grid) Сетка является ключевым элементом для создания адаптивного макета. На сегодня сетки уже не являются чем-то новым. Веб-дизайнеры использовали сетки для создания веб-сайтов с самого начала. Однако в прошлом эти сетки имели фиксированную ширину и не позволяли поддерживать плавную компоновку. Гибкая сетка, используемая для адаптивных веб-сайтов, обеспечит вам гибкость и масштабируемость дизайна. Элементы будут иметь постоянный интервал, пропорции и смогут настраиваться на определенную ширину экрана в процентах. Гибкий текст и изображения Способ отображения текста зависит от того, на каком устройстве пользователь просматривает ваш сайт. Однако текст должен оставаться читаемым, несмотря ни на что. На адаптивных веб-сайтах есть возможность увеличить размер шрифта и высоту строки (расстояние между каждой строкой текста) для удобочитаемости. Гибкий текст и изображения настраиваются в пределах ширины макета, в соответствии с иерархией содержимого, заданной с помощью CSS (таблицы стилей). Текст на сайте с адаптивной версткой теперь может быть разборчивым независимо от устройства конечного пользователя. Благодаря гибкому контейнеру (внутри сетки) текст может переноситься с увеличением размера шрифта на небольших устройствах. Гибкие изображения могут оказаться более сложными из-за времени загрузки в небольших браузерах устройств. Но эти изображения могут масштабироваться, обрезаться или исчезать в зависимости от того, какой контент необходим для мобильных устройств. Медиа-запросы Медиа-запросы - это код, который обеспечивает гибкость макета на адаптивных веб-сайтах. Медиа-запросы определяют код CSS, который будет применен соответственно, в зависимости от размеров и ориентации устройства (например, книжная ориентация iPhone или альбомная ориентация iPad и т. д.). Медиа-запросы допускают существование несколько макетов дизайна, которые будут использовать одну и ту же HTML-кодированную веб-страницу. Все три указанных элемента являются основой адаптивной верстки. Однако есть и другие важные средства, которые могут помочь определить акценты и усовершенствовать адаптивный веб-дизайн ваших сайтов для мобильных устройств. Обратите внимание на: Пользовательское тестирование адаптивных сайтов Информация о том, как пользователи взаимодействуют с вашим сайтом, - бесценна и точно стоит того, чтобы заплатить за ее получение. Существует множество способов провести пользовательское тестирование, чтобы получить максимально полезную обратную связь. Такие сайты, как UserTesting.com, предоставляют пользователям тестирование за небольшую плату или бесплатно. Различные методы, такие как тестирование in-the-wild и карточная сортировка (Card Sorting), также могут помочь обнаружить неожиданные болевые точки и слабые места в использовании вашего продукта.   Браузерное и устройство-зависимое тестирование на адаптивный дизайн Убедитесь, что ваш адаптивный дизайн и верстка совместимы со всеми соответствующими браузерами и сохраняет целостность вашего пользовательского опыта и дизайна. Не полагайтесь только на изменение размеров окна браузера при тестировании адаптивного веб-дизайна для мобильных устройств. Попробуйте просмотреть сайт на как можно большем количестве физических устройств. Вы будете удивлены тем, что можно обнаружить при переходе от одной операционной системы к другой, от одного устройства – к другому.   Вдохновение от других адаптивных сайтов Точно также, как и выполняя любой другой дизайн-проект, обратитесь к опыту других людей. Найдите другие адаптивные веб-сайты, которые творчески обыгрывают концепцию адаптивного веб-дизайн. Задумайтесь над следующими вопросами: Какие веб-сайты или приложения вы часто используете на своем мобильном телефоне или других портативных устройствах? Почему вы предпочитаете один сайт другим, которые могут предоставлять аналогичные услуги? Предпочитаете ли вы использовать их на смартфоне или на настольном компьютере? Поиск ответов на эти вопросы может помочь вам найти слабые места, которые вы, возможно, никогда не замечали, во время ежедневного использования своего вебсайта. Будущее адаптивного дизайна для мобильных устройств Мы знаем, что Google требует следующих оптимизированных элементов для эффективного взаимодействия с пользователями мобильных интерфейсов, используя адаптивный веб-дизайн: Текст, с читаемым размером без необходимости его принудительного увеличения; Контент, который умещается на экране устройства, без необходимости горизонтальной прокрутки; Ссылки и кнопки, расположенные на достаточном расстоянии друг от друга, чтобы не было затруднений в работе с интерфейсом; Разумное время загрузки страниц; Не используйте Flash! Эти правила адаптивной верстки очень важно соблюдать. Рост числа мобильных устройств — это только начало перехода к более удобному использованию Интернета. Нужно быть уверенными, что пользователи могут просматривать ваш сайт в любом месте на любом устройстве, самые разнообразные мобильные носимые устройства становятся все более популярными. Важным моментом будет учитывать современные размеры гаджетов, чтобы понимать в вашей адаптивной верстке какие разрешения учитывать. К примеру, на 2019 год все еще лидирующим остается разрешение экранов - 360х640. Является ли ваш сайт Mobile-Friendly? Пройдите тест Google, чтобы узнать, насколько адаптирован ваш сайт для мобильных устройств. Ваш сайт получил зеленый свет? Отлично, значит вы прошли тест Google на адаптивность. Вы уже прочитали выше причины, почему адаптивный дизайн важен для пользователей вашего сайта. Вместо зеленого видите большие красные иксы? Значит вам следует начать предпринимать определенные шаги для оптимизации работы вашего сайта под пользователей мобильных устройств. Помните, что изменения в алгоритмах Google и требованиях к адаптивному дизайну в настоящее время мало учитывают планшеты, но, если вы сделаете ваш сайт полностью адаптивным - вы будете впереди тех конкурентов, которые этого еще не сделали!   Подводя итоги Согласно требованиям сегодняшнего времени, ваш веб-сайт должен отлично выглядеть и хорошо работать как на настольном компьютере, так и на планшете, и в браузере смартфона. Адаптивный веб-дизайн может помочь вам достичь этого. В этой статье мы ответили на общий вопрос «что такое адаптивный дизайн?». Есть три компонента адаптивного веб-дизайна: плавающая сетка, гибкий текст и изображения и медиазапросы. Помните о важности адаптивного веб-дизайна для вашего бизнеса.  Выполнение вашего сайта по всем правилам адаптивной верстки поможет вам: Увеличить охват потребителей на всех устройствах; Поддерживать постоянный качественный пользовательский опыт, который увеличивает удержание аудитории на сайте; Консолидировать данные аналитики, отслеживания и отчетности; Сократить время и стоимость управления контентом; Конкурировать в своей отрасли с другими брендами. Google привлекает к коммерческим сайтам более 85% трафика мобильного поиска и рекомендует применять на ваших сайтах адаптивный дизайн. Поскольку адаптивный веб-дизайн удобен для мобильных устройств, он помогает улучшить видимость в поисковых системах, что, в свою очередь, может увеличить количество посетителей вашего сайта. Увеличение трафика приводит к лучшей генерации потенциальных клиентов, дополнительным конверсиям и увеличению продаж - три основные причины, по которым вам нужен адаптивный веб-дизайн!   От редакции ITVDN Мы с вами рассмотрели необходимость адаптивной верстки для каждого современного сайта. Такой подход является конкурентным преимуществом для компании из любой сферы бизнеса. Если говорить о разработчике, то навыки создания адаптивных web-сайтов будут существенным конкурентным преимуществом при поиске работы. Специальные знания и навыки вы можете получить, обучаясь по видео курсам ITVDN. В первую очередь это курсы: HTML5&CSS3 Advanced Практический курс по верстке лендинга Создание адаптивного сайта с Bootstrap 3 Также вам могут быть интересны другие курсы и технологии, которые входят в программу обучения по специальностям Верстальщик сайтов и FrontEnd разработчик. По материалам статьи за авторством Сони Грегори.

Здравствуйте, друзья! Все, кто выбирает для себя путь IT-разработки, проходят через традиционную последовательность действий: Выбор конкретной специальности. Определение необходимых к изучению языков и технологий. Непосредственное обучение + практика. Составление портфолио, в котором демонстрируется весь набор знаний и навыков, которым вы обладаете. Поиск работы согласно специальности. Последний, пятый пункт, является не менее важным, чем предыдущие. В наше время поиск работы ведется в основном с помощью сети Интернет. Следовательно, возникает потребность в использовании проверенных веб-сайтов, на которых вас не введут в обман. Также, ресурс должен быть дружелюбным к пользователю, иметь интуитивно понятные механизмы поиска работы и выдавать вам те вакансии, которые вы ищете. Мы подготовили для вас список самых эффективных ресурсов поиска работы в IT секторе, которым можно доверять, и которые при этом удобны в использовании. Информация о каждом сервисе будет структурирована в следующем виде: особенности сервиса; аналитика уровня зарплат определенных специалистов и частота ее обновления; возможность подписки и отслеживания вакансий по определенной категории; наличие дополнительной информации о компаниях, которые размещают вакансии; наличие вакансий для начинающих и стажеров; количество открытых вакансий на текущий момент; контингент работодателей (отечественные/зарубежные); предложения на релокейт; удобство использования сервиса. Этих показателей должно быть достаточно, чтобы по максимуму раскрыть возможности каждого рассматриваемого ресурса. Начнем!   DOU   Профессиональное сообщество разработчиков, запущеное Максимом Ищенко в 2005 году. Один из главных IT-ресурсов Украины, на котором публикуются новости, аналитические статьи и другая информация, связанная с IT индустрией. Также, ДОУ располагает форумом, где любой зарегистрированный пользователь может задать свой вопрос и получить развернутые ответы от множества IT-специалистов. Данный сервис имеет специальный раздел “Работа”, где каждый желающий может просмотреть список опубликованных вакансий как для программистов, так и для нетехнических специалистов, задействованных в IT. Заглавная страница с вакансиями выглядит следующим образом (на рисунке лишь ее часть):     Справа изображено ведущие компании и количество их вакансий (лишь часть компаний):     Перейдя к вакансии, вы увидете типичное описание компании и требования к кандидату. Откликнуться на предложение предлагают через Google, Facebook, GitHub, LinkedIn, Вконтакте, Twitter.     Как можно видеть из рисунка, каких-либо механизмов помощи в создании резюме на ДОУ нет — его оформление полностью и целиком возлагается на плечи соискателя работы. Перейдем к анализу ресурса согласно нашим пунктам. Аналитика уровня зарплат определенных специалистов и частота ее обновления. ДОУ имеет собственный зарплатный виджет, который составляется на основании зарплатного опроса. Результаты опроса публикуются раз в полгода (в декабре и июне-июле)     В виджете указываете город, интересующую вас должность и применяющийся язык программирования (если вакансия связана с программированием), затем имеете возможность наблюдать I квартиль, медиану и III квартиль заработной платы: I квартиль - это значение з/п, ниже которого в упорядоченном по возрастанию массиве находится 25% данных о заработных платах; III квартиль - значение з/п, выше которого в упорядоченном по возрастанию массиве находится 25% данных о заработных платах; медиана - значение з/п, расположенное в середине изучаемого массива, который упорядочен по возрастанию. На вкладке “Динамика” можно наблюдать, как менялись зарплаты по самым популярным направлениям. К примеру, вот такая ситуация наблюдалась у JavaScript:      Вкладка ”По городам” отображает статистику зарплат по всем главным направлениям в крупнейших городах Украины (Киев, Львов, Харьков, Днепр, Одесса).     Последняя вкладка демонстрирует различного рода демографические показатели: пол разработчиков (в процентном соотношении), их возраст, опыт работы, уровень знания английского, город проживания, образование, размер и тип компании.    Также, ДОУ каждый год составляет портрет украинского IT-специалиста, в который входят такие показатели, как: город проживания, пол, опыт работы, профессиональный уровень разработчиков, количество компаний, в которых работали, причины выбора IT-специальности, самое важное при выборе работы, удовлетворенность зарплатой, оформление трудоустройства и другие показатели. Если вам интересно, можете ознакомиться с портретом украинского IT-специалиста за 2020 год. Дополнительная информация о компаниях, которые размещают вакансии. У каждой вакансии помечена компания-работодатель, нажав на иконку которой можно перейти на профиль этой компании на ДОУ и ознакомиться с ним. Таким образом вы без проблем можете просмотреть рейтинг этой компании (он есть не у всех), прочесть информацию о работодателе, просмотреть фотографии сотрудников, узнать расположение офиса, контактные данные и отзывы других людей о данном месте работы.  Возможность подписки на рассылку вакансий. Отсутствует, однако частично реализуется при помощи телеграм-канала “Junior дайджест dou.ua”, речь о котором пойдет ниже. Наличие вакансий для начинающих и стажеров. Сервис DOU располагает специальным разделом “Первая работа”, который находится на странице “Работа” в соответствующей вкладке. Он обновляется каждый месяц и содержит список актуальных курсов и вакансий для новичков, а также стажировки. Во внимание принимаются все крупные города Украины. Имеется в наличии и специальный телеграм-канал, который помогает следить за новинками на ресурсе.     Количество открытых вакансий. На момент написания статьи на сайте ДОУ размещено более 7000 вакансий. Карантинные меры довольно ощутимо ударили по количеству предложений от работодателей в 2020, но сейчас количество предложений не то что достигло уровня начала 2020-го года, а даже перепрыгнуло его. Контингент работодателей. Точной информации нет, однако подавляющее большинство работодателей из Украины. Также присутствуют и иностранные компании. Предложения на релокейт. На странице вакансий в ДОУ в самом верху можно найти фильтр быстрого перехода “Работа за рубежом”. Удобство использования сервиса. В целом, данный ресурс достаточно информативен и комфортен в использовании. Полноценный сервис, на котором украинский разработчик может найти практически все необходимое: различные статьи, портрет и зарплаты разработчиков, вакансии, опросы, рейтинги IT-компаний и многое другое. Можно создать свою тему и узнать мнение других разработчиков касательно какого-либо вопроса. При первых посещениях сайта разбегаются глаза от его насыщенности информацией, однако, со временем к этому привыкаешь и начинаешь быстро находить искомое.   Djinni     Djinni (он же “Джинни”, “Джинн”) - ресурс, позиционирующий себя как сервис анонимного поиска работы для программистов, тестировщиков, UI/UX дизайнеров, специалистов DevOps, PM-ов и всех тех, кто работает в сфере IT. Был запущен в 2012 году в качестве части ресурса dou.ua, однако затем обрел собственный домен. Как Джинн работает. Соискатель размещает заявку на сайте, не раскрывая при этом своей личности. В ней указываются такие параметры, как: категория (специализация), имеющийся опыт работы, зарплатные ожидания, желаемая должность, уровень владения английским языком, варианты занятости, города для поиска работы, ключевые слова для рекрутера. После заполнения и публикации профиля просто ждёте, пока на вас выйдет работодатель. Получается эдакий поиск работы наоборот — ищете не вы, а вас. Однако, рекрутеры также могут размещать вакансии, на которые вы вольны отзываться, не раскрывая своей личности. Сам соискатель ничего никому не платит, в то время, как работодатель в случае успешного найма обязан заплатить 25% от месячной зарплаты кандидата, по факту выхода на работу. Оплата не требуется лишь в том случае, если на работу принимается специалист уровня Junior. Аналитика уровня зарплат определенных специалистов и частота ее обновления. Джинн располагает собственным виджетом зарплат, который собирает необходимую статистику автоматически путем подсчета, сколько предложений получил кандидат и на какую зарплату. К примеру, если FrontEnd разработчик в Киеве с з/п $2500 получил 10 предложений, то он будет посчитан 10 раз. Если предложений не было, то и в статистику он не попадет. Сама статистика обновляется раз в сутки и наочно демонстрирует динамику рынка.     Рассмотрим рисунок выше (с изображением статистики по .NET разработке). Над каждым столбиком диаграммы показано общее количество предложений. Это не количество вакансий, а показатель уровня спроса. Чем больше предложений, тем больше компаний пытаются нанять такого специалиста. На диаграмме приведены данные за последние 6 месяцев активности на Джинни. Сам виджет имеет несколько фильтров: город, категория (специализация), опыт работы и уровень знания английского, что позволяет настраивать и просматривать статистику согласно личным предпочтениям. Также данный сервис способен отправлять вам на почту статистику по выбранной специальности и городу — так называемая зарплатная рассылка. Это позволит быть в курсе з/п в IT и понимать, во сколько примерно оценивается специалист из той или иной области. Дополнительная информация о компаниях, которые размещают вакансии. Сам Джинн не размещает дополнительную информацию о работодателях, однако в предложенных рекрутерами вакансиях зачастую можно отыскать ссылки на веб-сайты компаний.  Возможность подписки на рассылку вакансий. Раз в месяц Джинн присылает статистику зарплат и наймов по выбранной вами технологии и городу. Наличие вакансий для начинающих и для стажеров. Вакансии для начинающих имеются в небольшом количестве. Однако на Джинне новичкам будет тяжело. Таких людей очень много, а рекрутеры редко ищут неопытных разработчиков, поэтому надо составить хороший профиль, быть активным и откликаться на вакансии самостоятельно.  Чтобы не быть голословными, вот пример хорошо составленных профилей:     Количество открытых вакансий. На момент написания статьи на сайте Djinni размещено 14 417 вакансий. Контингент работодателей. Согласно данным 2017-го года, примерно 80% работодателей — украинские компании, остальные 20% — зарубежные (Европа, США). Предложения на релокейт. Джинн имеет телеграм-канал Трактор на Джинне, который специализируется на поиске relocate-вакансий, предусматривающих переезд в другую страну. На данный момент канал заморожен, а вместо него запущен бот для подписки на вакансии. С его помощью можно получать уведомления о подписках и новых сообщениях на Джинне, создавать подписки на вакансии, изучать статистику вакансий и зарплат. Удобство использования сервиса. Djinni — достаточно комфортный сервис, который имеет приятный современный интерфейс, лишенный ненужных деталей. Также в наличии удобная система фильтров, позволяющая определять зарплатную статистику и предложения от работодателей эффективно и быстро. Главная особенность Джинна — анонимность, что дает возможность искать работу не беспокоясь о раскрытии вашей личности, если вы в этом нуждаетесь. Несмотря на то, что главный акцент данный ресурс ставит именно на соискателей работы и их комфорт, он также будет полезен и работодателям. Дополнительно можете ознакомиться с бесплатным вебинаром “Джинн - сервис анонимного поиска работы для программистов”, в котором участвует сам создатель платформы Djinni — Максим Ищенко.   LinkedIn     Социальная сеть для делового общения, которая ориентирована на поиск сотрудников и вакансий. На данный момент в ней зарегистрировано более 645 млн пользователей из разных уголков планеты. Основные функции LinkedIn заключены в следующем: поиск контактов (знакомые, коллеги, рекрутеры, HR-ы, интересующие вас личности и т. д.) и установление с ними связи (расширение своей сети); отслеживание новостей по вашим интересам путем использования хештегов; непосредственный поиск работы; отслеживание вакансий путем подписки на интересующие вас компании; гибкое управление системой настроек различных уведомлений; публикация информации о деловых поездках, предстоящих профессиональных мероприятиях и другого профессионального контента; получение подтверждения ваших профессиональных навыков вашими коллегами; общение с другими пользователями сети; настройка собственного профиля, где указывается ваш карьерный путь, места обучения, профессиональные достижения и т. д.; возможность генерировать резюме на основании вашего профиля.   Аналитика уровня зарплат определенных специалистов и частота ее обновления. LinkedIn запустил собственную службу под названием LinkedIn Salaries. На данный момент она работает лишь для США, поэтому вы сможете посмотреть только американские зарплаты.  Дополнительная информация о компаниях, которые размещают вакансии. Данная социальная сеть, подобно сети Facebook, имеет странички компаний, на которых публикуются различные мероприятия, фотографии и новости. Возможность подписки на рассылку вакансий. Отслеживание вакансий возможно путем подписки на интересующие вас компании, а также при помощи хэштегов (#dotnet, #backend и т. д.). Наличие вакансий для начинающих и для стажеров. LinkedIn на странице поиска вакансий имеет фильтр “Должностной уровень”, в нем - опцию “Стажер”. После ее выбора вы сможете просматривать все вакансии, предусматривающие стажировку.  Количество открытых вакансий. На момент написания статьи количество открытых вакансий - более 12 млн. Количество открытых вакансий в регионе Украина — 155 301, Республика Беларусь — 34 329, регион Россия — 21 504, Казахстан — 12 974. Контингент работодателей. LinkedIn имеет многонациональное сообщество, которое включает в себя пользователей из 200 государств. Соответственно, работодателей можно найти практически в любой стране, где пользуется спросом данный ресурс. Предложения на релокейт. Поскольку данная социальная сеть с огромным мультинациональным сообществом, она в естественном порядке содержит вакансии, предусматривающие смену места проживания. Однако совершать поиск таких предложений необходимо вручную. Удобство использования сервиса. Несмотря на свою многофункциональность и обилие различных инструментов, LinkedIn все очень компактно совмещает и предоставляет солидный, а также удобный интерфейс. Каких-либо недостатков замечено не было. LinkedIn имеет все, что только может пожелать IT-разработчик, ищущий работу. Единственный нюанс — необходимо знание английского языка — сеть-то интернациональная. Также, существует мобильное приложение под Android и iOS, которое позволяет оперативно использовать LinkedIn с вашего гаджета. Напоследок козырь в рукаве этой соцсети: если вы программист уровня Middle+ и имеете более 400 контактов, можете забыть о других сайтах поиска работы, ведь вы не останетесь без внимания рекрутеров.   HeadHunter (Россия) / GRC (Украина)     HeadHunter (HH) — международный кадровый портал, разработанный в России в 2000 году. Несколько лет спустя было открыто украинское представительство компании. В 2019 году в связи с трансформацией бренда было принято решение о переименовании украинского сегмента ресурса на GRC (grc.ua). Согласно заявлениям владельцев, отличительной чертой GRC является то, что он создан усилиями профессионалов по подбору персонала. Также, ресурс дает возможность создать детализированное резюме при помощи специально разработанной формы. На самом деле по своему внешнему виду, функционалу и возможностям HH и GRC почти идентичны. Поэтому здесь мы будем говорить об обоих ресурсах сразу. Если они будут иметь какие-то различия, сделаем на этом акцент. Аналитика уровня зарплат определенных специалистов и частота ее обновления.  Отсутствует. Дополнительная информация о компаниях, которые размещают вакансии. Подобно ДОУ, данные ресурсы имеют странички компаний, публикующих вакансии. Перейдя по ссылке, можно прочесть краткую информацию о компании, а также подписаться на нее, тем самым постоянно отслеживая новые предложения от выбранного работодателя. Возможность подписки на рассылку вакансий. GRC и HH обладают такой возможностью. Для того чтобы получать по email-у новые вакансии, необходимо авторизоваться на сайте под своим логином и паролем. С помощью функции «Автопоиск» при поиске вакансий можно сохранять параметры запроса, а затем ежедневно отслеживать интересующие вакансии. Также можно подписаться на обновление предложений определенной компании, которая вас интересует. Наличие вакансий для начинающих и для стажеров. Ресурсы имеют фильтр “Нет опыта”, который выбирает для соискателя только те предложения, которые ориентированы на новичков с определенным уровнем знаний, но не имеющих опыта работы.  Количество открытых вакансий. HeadHunter. На момент написания статьи было отмечено 821 657 открытых вакансий. При этом количество оставленных резюме — 49 097 833. GRC. На момент написания статьи — 8201 открытая вакансия. При этом количество оставленных резюме — 1 594 886. Контингент работодателей. Если рассмотреть оба ресурса в совокупности, то наибольшее количество вакансий исходит из России. На втором месте по численности идет Украина и страны СНГ. За ними — множество стран из Азии, Африки, Южной и Северной Америки, Европы, однако количество их вакансий очень мало. Предложения на релокейт. GRC и HH не имеют специального фильтра для нахождения вакансий, предусматривающих смену жительства. Однако, можно выполнять фильтрацию по интересующим вас странам/областям/городам. Удобство использования сервиса. HH и GRC имеют приятный интерфейс и удобную систему поиска вакансий. Помимо айтишных там можно найти и множество других вакансий, что дает ресурсам большей универсальности и массовости.   Work.ua     Work.ua — один из лучших украинских ресурсов для поиска работы, который был запущен еще в 2006 году. В 2013 году была разработана удобная мобильная версия сервиса. Свою цель создатели Work.ua обозначают следующим образом: “Предоставлять самый лучших сервис поиска работы, чтобы помогать людям быть счастливее и развивать Украину ”. Ресурс содержит вакансии, ориентированные на широкий круг соискателей. Также на сайте публикуются новости рынка труда и небольшие информативные статьи — как аналитические, так и те, что носят рекомендательный характер. Новоприбывшему на Work.ua очень пригодится гайд по использованию сервиса, хотя и сам по себе сервис интуитивно понятен. Аналитика уровня зарплат определенных специалистов и частота ее обновления.  Данный сервис имеет собственную аналитику уровня зарплат по городам и профессиям. К примеру, по запросу “программист” вы можете увидеть следующую статистику:     Также, можно просмотреть среднюю зарплату, исходя из выбранной специальности:     Ознакомиться с более подробной статистикой можно здесь. Дополнительная информация о компаниях, которые размещают вакансии. Практически каждая вакансия закреплена за определенной компанией. Нажав на логотип компании, вы попадаете на небольшую страничку внутри сервиса Work.ua, которая содержит краткое описание работодателя, количество сотрудников, сферу предоставления услуг, контактные данные, ссылку на сайт компании и список вакансий. Возможность подписки на рассылку вакансий. Work.ua предоставляет рассылку вакансий на почту, а также в Telegram (бот @jobs_workua_bot). Обе достаточно удобны и информативны. К примеру, в телеграме вы получаете регулярные сообщения с новыми вакансиями, которые включают название должности, компанию-работодателя, город, зарплату (если такова заявлена) и ссылку на само предложение. Наличие вакансий для начинающих и для стажеров. На Work.ua есть специальный фильтр “Без опыта”, который выводит только те вакансии, которые ориентированы на новичков и стажеров. Также есть специальный раздел “Для студентов”, что может помочь найти подработку либо полноценную работу учащимся в вузе (даже с возможностью смены места проживания!).    Количество открытых вакансий. На момент написания статьи было отмечено 47 576 открытых вакансий. Также, согласно статистике сайта, его посещают 450 тыс. человек в день, он имеет 2.8 млн резюме и 100 тыс. работодателей. Контингент работодателей. Среди опубликованных 47 576 вакансий 926 ориентированы на работу за рубежом (в основном это Польша, Чехия, Словакия, Германия, балтийские страны и другие европейские государства). Предложения на релокейт. Некоторые вакансии из раздела “Работа в других странах” предусматривают смену места жительства, однако поиск таких предложений необходимо осуществлять вручную, ведь множество вакансий могут просто предлагать удаленную работу. Удобство использования сервиса. Work.ua имеет хороший дизайн в синих и голубых тонах. Он сразу дает понять, что здесь все заточено под пользователя. Использовать сервис приятно и удобно — ничто не вызывает диссонанса, как и в мобильной версии. Ресурс имеет гибкую систему поиска, которая предусматривает поиск вакансий по: категориям, городам, компаниям, должностям. Естественно, присутствует и расширенный поиск (фильтрация по опыту, категории, виду занятости, наличия инвалидности и т. д.). Work.ua подходит всем, кто ищет работу - как айтишникам, так и другим соискателям. В целом — хороший сервис для поиска работы с новостями, статьями, аналитикой и рассылкой вакансий на email и Telegram.   Хабр Карьера     Проект известного в СНГ сервиса под названием Хабр. Будучи запущенным в 2017 году, сегодня Хабр Карьера находится в фазе активного развития. Достаточно удобный ресурс, который позволяет находить как вакансии соискателям, так и специалистов работодателям. Аналитика уровня зарплат определенных специалистов и частота ее обновления. Аналитика присутствует во вкладке “Зарплаты”. Однако, она не позволяет произвести сегментацию по конкретным профессиям, а подается в виде среднего показателя по всем IТ специализациям за первое или второе полугодие, начиная со второго полугодия 2017 года.     Также присутствует опция “Диаграммы зарплат”. Как заявляют создатели, это инструмент для работы со статистикой по всем зарплатам в IT, которые были накоплены с момента запуска зарплатного калькулятора на Хабр Карьере. Здесь вы найдете готовые отчеты по основным IT-специализациям, квалификациям, языкам программирования и группам городов. Данные можно смотреть отдельно по полугодиям и в динамике с 2017 года. Единственный нюанс — просматривать диаграммы зарплат могут только зарегистрированные пользователи с созданным профилем компании, у которых есть размещенная вакансия или приобретен доступ к базе резюме. Дополнительная информация о компаниях, которые размещают вакансии. Сервис в удобной форме предоставляет всю важную информацию. Таким образом, вы можете узнать рейтинг компании на Хабр Карьера, просмотреть открытые и архивные вакансии, изучить информацию о сотрудниках компании, узнать о подписчиках и тех, кто хочет работать в данной компании, расположение офисов, контакты, полезные ссылки и общую информацию о компании. Возможность подписки на рассылку вакансий. Вы можете подписаться на интересующие вас компании и следить за их новостями. Также, есть возможность получать вакансии на почту в соответствии с заданным вами фильтром. Наличие вакансий для начинающих и для стажеров. Сервис имеет специальный фильтр “Квалификация” во вкладке “Вакансии” — для начинающих как раз подойдут пункты “Intern” и “Junior”.   Количество открытых вакансий. На момент написания статьи было зафиксировано 2022 размещенные вакансии. Контингент работодателей. В подавляющем большинстве работодатели из России. Также, есть небольшая украинская и белорусская диаспора. Предложения на релокейт. Имеются, но такие вакансии необходимо искать вручную. Удобство использования сервиса. Сервис очень удобен и приятен в использовании. Пользовательский интерфейс располагает всей необходимой информацией как для работодателя, так и для соискателя работы. Ничто не подвисает, любой фильтр обрабатывается достаточно быстро. Заметно, что создатели сервиса проделали хорошую работу для предоставления максимального комфорта своим юзерам.   dev.by   Сервис для белорусских айтишников, который является своеобразным братом украинского DOU. Является важным сервисом Беларуси, на котором распространяются новости, ведутся корпоративные блоги, публикуются вакансии, собирается аналитика зарплат в отечественном IT, а также предоставляется другая информация, связанная с данным сектором. Во вкладке “Зарплаты” заявляется, что на jobs.dev.by 1732 компании, 132 123 пользователя и 586 вакансий. Аналитика уровня зарплат определенных специалистов и частота ее обновления. На уже упомянутой вкладке “Зарплаты” присутствует хорошая аналитика зарплат со множеством фильтров: можно указать должность, промежуток времени, опыт работы, город, используемые в работе технологии и языки программирования. Согласно заданным критериям вы и получите информацию о заработной плате.     К примеру, выборка с критериями “2020 год”, “Software Engineer”, “Опыт от 3 до 7 лет”, “Минск” выдала такой результирующий график:   Также, вы можете просмотреть средний показатель зарплаты в IT практически за любой интересующий вас месяц. Дополнительная информация о компаниях, которые размещают вакансии. Компании имеют свои собственные “странички” на jobs.dev.by, где вы можете узнать такую информацию, как: общие сведения о компании, ее рейтинг согласно определенным параметрам, кол-во сотрудников и их отзывы, год основания компании, просмотреть фотогалерею (если работодатель размещал фото), контактные данные, официальные представители (со ссылками на их аккаунты), адрес, компании-соседи.  Возможность подписки на рассылку вакансий. Такая возможность присутствует. Вы можете описать свой опыт, ожидания от работы, пожелания по зарплате, а затем получать подходящие предложения и вакансии на электронную почту.   Наличие вакансий для начинающих и для стажеров. Сервис имеет фильтр “Junior”, который производит выборку вакансий, подходящих для потенциальных интернов и джунов. Количество открытых вакансий. На момент написания статьи было зафиксировано 586 размещенных вакансии. Контингент работодателей. В подавляющем большинстве работодатели из Беларуси. Предложения на релокейт. Необходимо искать вручную. Также, можно указать этот пункт в качестве пожелания во время оформления подписки на рассылку вакансий. Удобство использования сервиса. Сервис достаточно удобен, помимо вакансий и зарплатной аналитики предлагает различные новости и истории от разработчиков Беларуси. Интерфейс понятен, хотя и содержит много информации. Однако, к нему очень быстро привыкаешь и в краткие сроки начинаешь отлично в нем ориентироваться.   Заключение   В данной статье были рассмотрены самые лучшие ресурсы для поиска работы в IT в Украине, Беларуси, Россие. Затрагивались как локальные сервисы, так и один интернациональный. Мы постарались пройтись по всем самым важным пунктам и показать, насколько удобен и функционален тот или иной job-ресурс. Если вы опытный разработчик, то регистрируйтесь на LinkedIn, заполняйте профиль, расширяйте свою сеть общения и ждите предложений от рекрутеров. Если же вы новичок, то вам не помешает искать работу на всех отечественных ресурсах сразу, ведь кандидатов без опыта много, и каждый хочет свое место под солнцем. Надеемся, статья была полезной для вас. Пишите в комментариях свое мнение и задавайте интересующие вас вопросы!   Желаем вам здоровья и успехов! Оставайтесь с ITVDN!

Junior 1.1 Общие вопросы и Linux. 1.2 Networks, Clouds. 1.3 Automation, Information Security. 1.4 Виртуализация, CI/CD, Development. 1.5 Monitoring/Logging. 1.6 Практические задания. Middle 2.1 Linux. 2.2 Networks. 2.3 Container orchestration. 2.4 Виртуализация и контейнеризация. 2.5 CI/CD, Clouds and Automation. 2.6 Monitoring/Logging. 2.7 Information Security. 2.8 Development, Databases. 2.9 Практические задания. Senior 3.1 Linux. 3.2 Networking, Разное. 3.3 Container orchestration, Clouds and Automation. 3.4 CI/CD, Information Security. 3.5 Observability, Databases. 3.6 Практические задания.     Дорогие друзья! Предлагаем вашему вниманию перевод статьи, опубликованной на DOU.ua 7 декабря 2021 года. Оригинальная версия на украинском языке доступна по ссылке. Можно спорить о популярности DevOps, а можно просто готовиться к собеседованию и получить желанные 9K :) Чтобы помочь вам сориентироваться в вопросах, которые задают на интервью, мы поговорили с теми, кто их проводит, и составили список возможных вопросов.   Junior   Общие 1. Что такое DevOps? 2. Вы набираете google.com в браузере. Расскажите как можно подробнее, что происходит в это время? 3. Как работает HTTPS? 4. Объясните концепцию Infrastructure as Code, зачем это нужно и какие проблемы решает?   Linux 5. Опишите общую архитектуру операционной системы. 6. Опишите основное предназначение операционной системы. 7. Зачем нужны файловые системы? Какие существуют? 8. В чем разница между виртуализацией и контейнеризацией? 9. В чем преимущества контейнеров? 10. Какова файловая структура в Linux (UNIX) системах, расположенных в /etc, /dev, /proc, /sys, /lib, /var (несколько директорий на выбор)? 11. Что такое Load Average? 12. В чем разница между soft и hard symlink? 13. Как работают file permissions, зачем директории права исполнения (+x)? 14. Что такое zombie process? 15. С помощью чего можно собрать информацию о текущем состоянии процессора, памяти, диска, сети? 16. Что такое swappiness? 17. Как посмотреть свободное место на диске? 18. Что такое inode? 19. Расскажите поэтапно процесс загрузки Linux с момента включения питания компьютера. 20. Что произойдет при выполнении команд: 1. cat file1 > file2 2. cat file1 >> file2 21. В чем разница между Ctrl+C и Ctrl+Z? 22. Как перенаправить одновременно stderr и stdin? 23. Как убить процесс? Какие есть типы сигналов? 24. Что делает команда grep? 25. Что такое скрипт bash? 26. Какие типы переменных используются в bash? 27. Что выведут команды: 1. echo ${hostname}; 2. echo $(hostname);   Networks 28. Что такое модель OSI, TCP/IP? 29. Для чего нужны network masks? 30. Структура IP-пакета. Из чего состоит? Что такое фрагментация и почему она происходит? 31. Что такое коллизия? Почему возникает? 32. Что такое прокси? 33. Что такое firewalls и зачем они нужны? 34. Что такое NAT и для чего он нужен? 35. Какие типы IP-адресов вы знаете? 36. По какому порту и протоколу работают Ping и Traceroute?   Clouds 37. В чем разница между IaaS, PaaS и SaaS? 38. Что такое VPC и из каких компонентов должно состоять? 39. Что такое cloud-init? init/systemd/upstart configs?   Automation 40. Что такое IaaC и зачем он нужен? 41. Что такое Terraform? 42. Какие инструменты автоматизации вы знаете?   Information Security 43. В чем разница между аутентификацией и авторизацией? 44. Сертификаты. Как работает HTTPS? Что такое certificate ciphers? 45. Как безопасно передать данные своему коллеге? 46. ​​Что такое MFA, TOTP?   Виртуализация 47. В чем разница между виртуализацией и контейнеризацией? В чем плюсы и минусы? 48. Как при запуске Docker-контейнера «повесить» его из 80-го порта в контейнере на 8081 на хост? 49. Как передать в виртуальную машину USB device? 50. Docker-контейнер потребляет многие SWAP. Что делать?   CI/CD 51. Что такое Continuous Integration и Continuous Deployment? В чем разница между Continuous Deployment и Continuous Delivery? 52. Опишите основные этапы CI/CD. 53. Опишите пример процесса CI (и/или CD), который начинается с момента, когда разработчик запушил изменения/PR в Git? 54. Расскажите о разновидностях тестов, которые мы можем использовать в CI пайплайне. 55. Какие инструменты CI вы использовали? Есть ли опыт работы с Jenkinsfile? 56. Какие виды тестов вы знаете и зачем они нужны?   Development 57. Git. Как решить merge conflict? Что такое rebase, cherry-pick? 58. В чем разница между git merge и git rebase? 59. Какие UI использовали? 60. Какая разница между GitLab/GitHub/Bitbucket? 61. Какая разница между Git pull/Git fetch? 62. Что такое Git-Flow? 63. Версионирование. Какая разница между SemVer и CalVer? 64. Тестирование. Какие существуют виды? Как писать тесты, TDD? 65. В чем разница между компилируемыми и интерпретационными языками программирования?   Monitoring/Logging 66. Какие метрики нужно собирать? Разница между infrastructure и application monitoring. 67. Какая разница между pull и push model в системах мониторинга? 68. Какая разница между Black box и White box monitoring? 69. Расскажите о подходах к сбору application логов.   Практические задания 71. Напишите простую программу на ваш выбор. Программа должна получать сообщения из сервиса очередей и печатать его в stdout. Сервис очередей — по вашему усмотрению. 72. Разберите структуру сервиса (на примере Docker-Compose). 73. Практическая сессия работы с Git (Git command line: fetch, push, pull, rebase, checkout, submodules).   Middle   Linux 1. Опишите архитектуру ядра Linux. 2. Что такое ядро ​​и каково его предназначение? 3. Опишите общие части файловой системы Unix/Linux, архитектуру файловой системы. 4. В чем разница между RedHat и Debian? 5. В чем разница между /proc и /sys? 6. Ситуация: указывает, что на диске занято 50% места, а сделать файл даже под root юзером не можем. В чем проблема? 7. Мы удалили файл, открывший приложение. Как нам его восстановить? 8. Как найти PID процесса, его стартовые параметры? 9. Как проверить, открыт ли порт на удаленном хосте, локальном хосте? 10. Как искать файл по его содержимому? 11. Что такое SSH, как организовать доступ на сервер без пароля или с определенных хостов? Как ограничить доступные для выполнения команды? 12. Как проверить потреблённые ресурсы во время сеанса SSH? 13. Что означает разрешение на файл 755? 14. Что такое SELinux и зачем он нужен? 15. Как определить PCI-устройство в системе, например, RAID controller? 16. Как переименовать устройство, например, сетевую карту или диск? 17. Что такое LVM? Какие знаете примеры использования? 18. Что такое root reserved space? 19. Что такое exit code и как его узнать? 20. Почему вывод df -h указывает, что на диске занято мало места, но система не дает записать файл с сообщением “no space left on device”? 21. В чем разница между command1 & command2 и command1 && command2, а также command1 && command2 || command3? 22. Из сети резко вырос исходящий трафик на 25-й порт. Как, имея доступ на гейтвей, обнаружить вредителя из внутренней сети? 23. Как затюнить параметры Linux Kernel? 24. Что такое ulimits? 25. В чем разница между символическими и hard links? 26. Что такое фрагментация ext3 и ext4? 27. Зачем файловые системы ext* резервируют 5% места? 28. Как увеличить размер файловой системы? 29. Можем ли мы уменьшить размер файловой системы? 30. Что такое chroot и для чего он нужен? 31. У нас есть Linux box с 2 Гб оперативной памяти и Java-приложение, которое пытается выделить 4 Гб во время запуска. Удастся ли это? 32. Есть приложение, которое читает файл, который пользователь пытается удалить. Что случится? Можно ли удалить этот файл? Можно ли восстановить этот файл? 33. Какие механизмы создания процессов в Linux вы знаете? 34. Сравните systemd и init system. 35. У вас есть папка с большим количеством файлов, и вы хотите удалить все файлы с именами, начинающимися на A (прописная буква). Но команда rm –f A* выдает Argument list too long. Как удалить эти файлы? 36. Вы начинаете удалять файлы первым методом из предыдущего вопроса, но каждый rm запрашивает подтверждение. Это очень долго. Как можно ускорить эту операцию?   Networks 37. Расскажите о модели OSI. Опишите функции и назначение каждого уровня. 38. Какие сетевые топологии вы знаете? Опишите разницу между ними. 39. Зачем нужен IP-адрес, если MAC-адрес уникален? Разве мы не можем общаться только по MAC-адресу? 40. В чем разница между концентратором и коммутатором L2 в сетях Ethernet? 41. Что такое VLAN и для чего существует разделение на виртуальные локальные сети? 42. Какой номер порта используется для PING-коммуникации? 43. Что такое сеанс связи? Какой алгоритм использует TCP для доставки? 44. В чем основное отличие между TCP и UDP? 45. Зачем нам маршрутизатор по умолчанию? 46. Как хост решает DNS по умолчанию? 47. Компьютер начал получать IP-адрес из другой сети (есть подозрение, что в сети работает другой DHCP-сервер): как его найти и отключить? Какие методы защиты от такой проблемы? 48. Мы будем мигрировать сайт на новый IP-адрес. Как сделать, чтобы пользователи этого практически не заметили? 49. Что такое socket? 50. Как узнать, какие удаленные хосты подключаются к хосту через порт 8888? (с помощью команд и не используя /proc или /sys). 51. У нас есть несколько сетевых карт. Как увеличить пропускную способность сервера? 52. Как проверить открытые порты на удаленном сервере без команд Netcat или Nmap Linux?   Container orchestration 53. В чем преимущества Kubernetes как платформы? 54. Что такое control plane и из каких компонентов состоит? 55. Какие CNI вы использовали и чем они отличаются? 56. Чем отличается managed Kubernetes от self-deployed? 57. Как можно контролировать размещение подов в кластере? (taints/tolerations, affinities, topologies etc.) 58. Скейлинг кластера. Cluster autoscaler vs HPA vs VPA? Как сделать zero-downtime node decommission/cluster upgrade? PDB? Lifecycle hooks? 59. Какие способы для внешнего доступа к кластеру? ingress, node port, port-forward и т. д. 60. С каким PID запускается процесс в контейнере? 61. Что лучше использовать для изоляции окружения – Vagrant или Docker? 62. Какой инструмент оркестрирования контейнеров использовали? (Swarm, Kubernetes, Openshift, Rancher и т. д.) 63. Что происходит в Kubernetes после запуска kubectl (API, ReplicaSet Controller, storage back-end, scheduler, kubelet, worker node, pod)? 64. Какая разница между pod и контейнером в K8s? 65. Как мы можем сделать любой микросервис, работающий на K8s, доступным из внешней среды?   Виртуализация и контейнеризация 66. Какие типы виртуализации вы знаете? 67. Как работает Docker на macOS/Windows? 68. Что такое Docker-image и Docker-контейнер? Как они между собой связаны? 69. Каковы основные отличия между контейнерами докеров и виртуальными машинами? 70. Что такое image layer? Какое максимальное количество layers возможно? Почему нужно пытаться иметь малое количество layers? Какое оптимальное количество? 71. Как в виртуальной машине изменить размер диска после создания? Что нужно сделать с гостевой ОС? 72. Как в Docker реализовано ограничение ресурсов? 73. Существует виртуальная машина, к которой потерян доступ. Как, имея доступ к диску, восстановить root пароль/SSH-ключ? 74. Оптимизировать Dockerfile, объяснить, что и почему так: FROM golang RUN apt install -y pkg1 pkg2 pkgN # Dependencies for app COPY. . RUN go build -o app main.go CMD ./app 75. Что такое IPVS и какой у него функционал? 76. Какова структура API в Kubernetes? 77. Что такое operators и зачем они нужны?   CI/CD 78. Какие стадии должны быть в любом пайплайне (lint, test, build, deploy etc.)? 79. Как и где хранить build artifacts? 80. Что такое артефакт? 81. Есть два бренча: dev и stage. Мы забросили Dockerfile в dev, а затем сбилдили в dev и stage. Это будет одним артефактом или разными? 82. Что вы использовали для автоматизации настройки Jenkins и GitLab CI? 83. Сравните CI инструментов: Jenkins, GitLab CI, AWS Code Pipeline, GCP cloudbuild, GitHub actions, Circle CI. 84. Deployment strategies. Какие существуют и чем отличаются (recreate, blue-green, canary etc.)? 85. Как реализовать СI/CD для программы, которая зависит от нескольких других программ? 86. GitOps. В чем его преимущества и недостатки?   Clouds and Automation 87. Какова роль и преимущества облачных сервисов для DevOps? 88. Что такое immutable infrastructure? Как достичь? В чем преимущества и недостатки? Packer, AMI и т. д. 89. Структура Terraform. Как организовать multi-environment project? Terraform workspaces? 90. Лучшие практики по использованию многих Terraform states. 91. Как организовать доступ команде разработчиков к AWS/GCP/Azure? Role-based access, assume role, SSO. 92. Что такое Terraform provider, module? 93. Как версионировать Terraform modules? 94. Когда нужно использовать local-exec и remote-exec? 95. Что такое golden image и как его создать?   Monitoring/Logging 96. Как мониторинг помогает поддерживать всю архитектуру системы? 97. Какие инструменты мониторинга вы использовали? 98. Что такое медиана и процентиль? 99. Что такое SLI, SLO, SLA? Зачем это нужно? 100. Архитектура системы для сбора логов, ELK, EFK etc. Как сохранить логи при отказе хранилища? Нужно ли использовать для этого брокер сообщений? Нужно ли делать throttling/rate limits? 101. Prometheus long-term storage. Какие варианты? 102. Как работает Prometheus? 103. В чем принципиальное отличие между Grafana и Kibana? 104. В чем главное отличие между Ansible and Terraform? 105. Что такое SAAS monitoring и какие виды знаете? 106. Если вы используете Datadog/NewRelic, то как нам отслеживать падение инструментов мониторинга? 107. Что такое distributed tracing и error tracking systems? Как вы думаете, когда следует их использовать?   Information Security 108. В чем разница между RBAC и ABAC? 109. В чем заключается XSS атака? SQL injection? Что такое CSP? 110. Какие базовые меры можно предпринять для защиты SSH-соединения? 111. Root-пароль неизвестен или потерян. Какова процедура восстановления? 112. Как управлять правами на файловой системе в Linux? 113. Что такое Firewall? 114. Чем отличается stateless от stateful фаерволов? 115. Сколько таблиц в iptables? 116. Можно ли настроить трансляцию NAT с помощью iptables? Какую таблицу следует использовать? 117. Какую таблицу используют для смены заголовков пакетов? 118. Если вам ломают Linux-сервер, то как более эффективно блокировать трафик с IP-адресов? 119. Принцип работы GCP Firewall: можем ли мы профильтровать трафик на Load Balancer? 120. Что такое SELinux? 121. Можно ли полностью отключить SELinux на лету? 122. С какими secrets management systems вы работали? 123. У нас есть сервер NAT, и мы хотим обеспечить доступ по IP к серверу снаружи. Как нам это реализовать? 123. Чтобы попасть на сервер клиента, нужно залогиниться на 4+ jump хоста. Как автоматизировать? Где мы будем хранить наш SSH-ключ?   Development 125. Что такое cookies? Зачем нужны? JWT? 126. Что такое feature toggles и зачем они? 127. Что такое TDD (Test Driven Development) и BDD (Behaviour Driven Development)?   Databases 128. Что такое индекс и что такое ключ? 129. Каковы преимущества и недостатки индексов? 130. Представьте, что вы разрабатываете систему биллинга, которая должна обрабатывать тысячи счетов. Какую стратегию обновления данных вы бы выбрали? 131. Какие методы чаще всего используют для масштабирования реляционных баз данных? 132. Опишите механизм транзакций БД. 133. Как мы можем удалить таблицу или базу данных? 134. Как найти медленные запросы в MySQL/PostgreSQL? 135. Какие SQL-операторы манипулирования данными вы знаете? 136. Можно ли вывести список баз данных/таблиц через CLI? Как мы можем переключаться между базами данных MySQL/PostgreSQL? 137. Какие storage engines в MySQL вы знаете? Какие отличия? 138. Как реализована репликация MySQL master-master? Сколько серверов MySQL может быть задействовано в таком взаимодействии? 139. Как работает репликация MySQL/PostgreSQL? Какие параметры должны быть настроены для репликации? 140. Сравните SQL и NoSQL. 141. Sharding vs replication? 142. Какие есть виды индексов? Когда и зачем использовать? 143. Требования к схеме БД. Character sets, collations, default, not null и т. д. 144. Мы мигрируем MySQL/PostgreSQL из on-prem в облако. Как нам это сделать с минимальным даунтаймом? 145. Зачем и как тестировать перформанс баз данных?   Практические задания 146. Напишите Terraform module для инфраструктуры тестового сервиса в AWS. 147. Напишите hello-world программу на ваш выбор и сформируйте для нее helm chart/kustomize. 148. Как организовать деплой без downtime? 149. Опишите способы troubleshooting для Docker-контейнера. 150. Разобрать и объяснить структуру CI/CD pipeline (на примере gitlab.yml). 151. Продемонстрируйте навыки работы с GitOps, опишите деплоймент простенькой программы. 152. Как организовать деплой веб-приложения, запущенный на нескольких серверах без (или с минимальным) downtime? 153. Как с помощью Ansible узнать default gateway для пула серверов, и, если он отличается от желаемого, записать строчку «hostname: gateway» в файл на локальной машине?   Senior   Linux 1. Что может создавать высокую нагрузку на CPU (процессы приложений потребляют очень мало ресурсов CPU)? 2. У нас нет команд ifconfig, ip, и поставить мы их не можем. Как нам узнать ip address, mask, network, routes? 3. Что такое suid, sgid и sticky? 4. Что тюнилось с системой для нагрузки трафика 1GB, 10G, 40G+? 5. Что тюнилось с системой для высокой нагрузки на диск? 6. Что такое Linux namespaces? 7. Что такое Ceph, как работает? 8. Что нужно тюнить для Ceph? 9. Что произойдет, если /dev/sda1 перенесем в /root? 10. Мы удалили /dev/sda1. Как нам его восстановить? Что такое pseudo-devices? 11. Нам хакнули сервер, и в директории /var/www создали два миллиона файлов небольшого размера. Если использовать команду cd /var/www и затем rm -rf*, то у нас зависнет терминал. Как удалить файлы? 12. На каком уровне работает iptables? 13. Что такое eBPF и зачем нужен? 14. У вас есть файл, содержащий IP-адреса серверов (по одному в строке). Есть SSH доступ к этим машинам, и вам нужно выполнить задание (например, установить список пакетов на все узлы). Объясните, как можно это сделать.   Networking 15. В чем отличия между IPv4 и IPv6? Зачем мы мигрируем на IPv6? 16. Сосуществование IPv4 и IPv6: что это значит? 17. Действительно ли работают межсетевые экраны с поддержкой IPv6? 18. Как работает DHCPv6? Чем она отличается от DHCPv4? 19. Как фрагментируются пакеты IPv6 и чем это отличается от IPv4? 20. Нужно ли с IPv6 больше использовать NAT? 21. Что такое DPDK? 22. Что такое SR-IOV? В чем разница между DPDK и SR-IOV? 23. Что такое NetFlow и зачем нужен? 24. Что такое OpenFlow? 25.Что такое SDN и какие контроллеры вы знаете? Сравните контроллеры.   Разное 26. Что такое SDLC? 27. Расскажите о последнем опыте реализации архитектуры для сервиса. 28. Какой самый тяжелый скрипт писали? 29. Что такое configuration drift? Почему это происходит и как это усложняет жизнь инженерам\SRE\Ops? 30. Расскажите об архитектуре, за которую вы отвечаете, и укажите, как она масштабирована и отказоустойчива. 31. Назовите три важных KPI для DevOps-специалиста. 32. Как работает Kafka (clusters(brokers, controllers), topics, partitions)? 33. GitOps: Rancher Fleet vs Flux vs Argo? 34. Как использовать GitOps для обновления документации DevOps-приложений? 35. Расскажите об особенностях проектирования Kubernetes on-premise. 36. Как организовать On-call процесс для команды DevOps? 37. Опишите главные шаги загрузки операционной системы Linux.   Container orchestration 38. Service mesh. Что это такое и зачем нужно? 39. Cluster federation. Что это такое и зачем нужно? 40. Pod fine-grained access. Как реализовать? IRSA vs kube2iam vs kiam? 41. Как реализованы услуги в кубернетах? 42. Как дебажить трафик контейнера? 43. Что такое unikernel и зачем он нужен? 44. Почему коммьюнити переезжает из Docker containerd?   Clouds and Automation 45. Какие преимущества и недостатки cloud-провайдеров? 46. Cost оптимизация. Какие инструменты? Spot/preemptible instances, reservations? 47. Как организовать multi-account, multi-region cloud setup? 48. В чем разница между частными и публичными сетями в AWS? 49. AWS Lambda: имели ли опыт работы? 50. Когда следует переходить на AWS Lambda? Когда не стоит? Аналогичные решения в GCP или Kubernetes? 51. Когда лучше использовать CloudFormation, а когда Terraform?   CI/CD 52. Что такое state в контексте использования Terraform? 53. Какие существуют branching strategy? На что опираться при выборе? 54. Как реализовать feature/dynamic environments? 55. Как сделать эмуляцию ресурсов cloud-провайдера для локального тестирования и ускорения разработки? 56. Что такое MultiCloud? 57. Что такое Cloud-Agnostic и когда он потребуется? 58. Что такое Hybrid-Cloud и с какими решениями вы работали?   Information Security 59. Как должны храниться пароли в базах данных (Salt&Pepper, Rainbow Tables, Adaptive Hashing)? 60. Как передавать секреты в application (Secrets management)? 61. Сравните CI/CD SAST и DAST? 62. Какие вы знаете Kubernetes security practices? RBAC? OPA? Какие недостатки RBAC и какие кейсы знаете? 63. Расскажите о защите от DDOS атак, WAF. 64. Что такое Rootless containers и для чего он нужен? 65. Что такое AppArmor и Seccomp и зачем они нужны? 66. Приходилось ли работать с Falco? Если да, то что реализовывали? 67. HashiCorp Vault и как правильно передать нам секреты в контейнере и CI pipeline? 68. Что такое Admission Controllers и какие вы использовали? 69. Как хранятся секреты etcd? Как просмотреть ресурсы в etcd? 70. Чем проверяете на уязвимости ваш Kubernetes cluster? 71. Что такое Secure SDLC? 72. Что вы знаете о Cloud Infrastructure Attack via a Pull Request и как этого избежать?   Observability 73. Что такое observability и чем отличается от обычного мониторинга? Какие особенности необходимо учитывать в микросервисной архитектуре (tracing)? 74. Что такое SLI, SLO, SLA и зачем они нужны? Для чего используют error budget?   Databases 75. Что такое теорема CAP? Зачем это нужно? 76. Как работать с миграциями? Что делать в случае rollback? Как проверить, что миграция backward-compatible? 77. Опишите, как бы вы оптимизировали работу базы данных? (БД по выбору кандидата) Slow queries, buffers, thread pools? 78. Зачем нужно тестировать перформанс базы данных и какими инструментами?   Практические задания 79. Представьте, что вы CTO Booking или Airbnb. Какие бы вы принимали решения касательно: языков программирования. Infrastructure as a Code. архитектуры инфраструктуры. настройки CI/CD. 80. У вас есть файл, содержащий патчи в директории. Например: /var/tmp/temp/file1.c /var/tmp/file.ext /var/tmp/temp/ etc... один путь в строке. Если путь заканчивается на '/' — это путь в каталог. Вам нужно восстановить это дерево каталогов с пустыми файлами в другой файловой системе. Напишите bash-скрипт. 81. Представьте, что вам нужно убедить Spotify, использующего AWS, перейти на GCP. Как вы будете мотивировать Spotify мигрировать на GCP? 82. Есть сервисная компания, предоставляющая сервис трекинга перевозок. Есть клиенты, которые не желают, чтобы их данные процессировались в AWS. Как нам реализовать multi-cloud solution?   Редакция DOU выражает благодарность за помощь в подготовке статьи: Владу Волошину, Павлу Петриченко, Виталию Гарбулинскому (BrightLocal), Евгению Думе, Сергею Яремчуку, Вадиму Шкилю, Александру Билюку, Александру Нежинскому, Владиславу Граму, Станиславу Коленкину, Олегу Миколайченку, Антону Гаврилову.

Kotlin – это статически типизированный язык программирования, разработанный компанией JetBrains. Подобно языку Java, Kotlin стал отличным выбором для разработки приложений на Android. Это можно увидеть даже из того факта, что Android Studio поставляется со встроенной поддержкой Kotlin, как и с поддержкой Java. Kotlin против Java Итак, вопрос состоит в том, стоит ли разработчику переходить на Kotlin с Java или нет? Конечно это зависит от предпочтений разработчика. Однако, прежде чем переключаться, важно понять разницу между двумя языками программирования.   Проверяемые исключения Одно из основных различий между Java и Kotlin заключается в том, что в последнем нет условий для проверяемых исключений (checked exception). Следовательно, нет необходимости отлавливать или объявлять какие-либо исключения. Если разработчик, работающий на Java, считает, что использование кода try / catch в коде раздражает, то упущение, сделанное Kotlin, можно считать желанным изменением. Однако противоположностью будет, если разработчик считает, что проверяемые исключения нужны, способствуя восстановлению после ошибок и созданию надежного кода. В этом случае это можно считать для Kotlin плюсом и минусом, в зависимости от подхода к разработке.   Краткость кода Сравнение класса Java с эквивалентным классом Kotlin демонстрирует лаконичность кода Kotlin. Для той же операции, что выполняется в классе Java, класс Kotlin требует меньше кода. Например, конкретный сегмент, где Kotlin может значительно сократить общий объем стандартного кода, - это findViewByIds. Расширения Kotlin в Android позволяют импортировать ссылку на View в файл Activity. Это дает возможность работать с этим представлением, как если бы оно было частью Activity. Это явно можно отнести к плюсам Котлин.   Сопрограммы Процессы, интенсивно загружающие процессор и сетевой ввод-вывод, обычно используют длительные операции. Вызывающий поток блокируется до завершения всей операции. Поскольку Android является однопоточным по умолчанию, пользовательский интерфейс приложения полностью блокируется, как только блокируется основной поток. Традиционное решение этой проблемы в Java - создать фоновый поток для длительной или интенсивной работы. Однако управление несколькими потоками приводит к увеличению сложности, а также к ошибкам в коде. Kotlin также позволяет создавать дополнительные потоки. Тем не менее, есть лучший способ управления интенсивными операциями в Kotlin, известный как сопрограммы или корутины (coroutines). Корутины в Kotlin реализованы без стека, что означает, что они требуют меньшего использования памяти по сравнению с обычными потоками. Корутины могут выполнять длительные и интенсивные задачи, приостанавливая выполнение, не блокируя поток, а затем возобновляя выполнение через некоторое время. Это позволяет создавать неблокирующий асинхронный код, который выглядит в работе как синхронный. Код с использованием корутин не только понятен, но и лаконичен. Более того, корутины позволяют создавать элегантные дополнительные стили асинхронной неблокирующей разработки, такие как async / await. Все это также явно относится к плюсам Котлина.   Классы данных В полноразмерных проектах обычно есть несколько классов, предназначенных исключительно для хранения данных. Хотя эти классы практически не имеют функциональности, разработчику необходимо написать много стандартного кода на Java. Обычно разработчик должен определить конструктор и несколько полей для хранения данных, функции геттеры и сеттеры для каждого из полей, а также функции equals(), hashCode() и toString(). У Kotlin есть очень простой способ создания таких классов. Разработчику достаточно включить только ключевое слово data в определение класса, и все - компилятор сам позаботится обо всем. Такое удобство создания классов, в вопросах для Kotlin «за и против», явно свидетельствует в его пользу.   Функции расширения Kotlin позволяет разработчикам расширять класс новыми функциями с помощью функций расширения. Эти функции, хотя и доступны в других языках программирования, таких как C#, не доступны в Java. Создать функцию расширения легко в Kotlin. Это делается путем добавления префикса к имени класса, который должен быть расширен до имени создаваемой функции. Чтобы вызвать функцию в экземплярах расширенного класса, нужно использовать нотацию «.»   Функции высшего порядка и лямбды Функция высшего порядка - это функция, которая принимает другие функции в качестве параметров или возвращает функцию. Кроме того, функции Kotlin являются функциями первого класса. Это означает, что они могут храниться в структурах данных и переменных, которые могут передаваться в качестве аргументов и возвращаться из других функций более высокого порядка. Все это просто означает, что функции могут работать всеми возможными способами во взаимодействии с другими нефункциональным значениям. Как статически типизированный язык программирования, Kotlin использует ряд функциональных типов для представления функций. Более того, он поставляется с набором специализированных языковых конструкций, таких как лямбда-выражения. Анонимные функции и лямбда-выражения также известны как функциональные литералы. Это функции, которые не объявлены, но передаются как выражения.   Неявные расширяющие преобразования В Котлине нет поддержки неявных расширяющих преобразований для данных. Таким образом, меньшие типы не могут быть преобразованы в большие типы. В то время как Java поддерживает неявные преобразования, Kotlin требует выполнить именно явное преобразование. Ряд разработчиков воспринимает это как минус Котлин.   Встроенные функции Переменные, к которым осуществляется доступ в теле функции, называются замыканиями. Использование функций высшего порядка может существенно увеличить время выполнения вычислений. Каждая функция в Kotlin является объектом, и он захватывает замыкание. И классы, и функторы требуют выделения памяти. Они, наряду с виртуальными вызовами, требуют определенных затрат на время выполнения. Таких дополнительных издержек можно избежать, вставив лямбда-выражения в Kotlin. Одним из таких примеров является функция lock(). В отличие от Kotlin, Java не обеспечивает поддержку встроенных функций. Тем не менее, компилятор Java способен выполнять встраивание с использованием метода final. Это так, потому что методы final не могут быть переопределены подклассами. Кроме того, вызов метода final разрешается во время компиляции. Такие нововведения также воспринимаются как плюсы Котлина.   Встроенная поддержка делегирования В терминологии программирования, Делегирование представляет собой процесс, в котором принимающий объект делегирует свои операции второму объекту делегата. Kotlin поддерживает шаблон проектирования композиция поверх наследования посредством делегирования первого класса, также известный как неявное делегирование. Делегирование в Kotlin является альтернативой наследования. Этот механизм позволяет использовать множественное наследование. Кроме того, делегированные свойства Kotlin предотвращают дублирование кода.   Не-private поля Инкапсуляция необходима в любой программе для достижения желаемого уровня управляемости. Посредством инкапсуляции, представление объекта может быть установлено исходя из того, как вызывающие стороны взаимодействуют с ним. Кроме того, можно изменить представление без необходимости изменения вызывающих абонентов, если публичный API остается неизменным. Неприватные поля или public поля в Java полезны в сценариях, где вызывающие объекты должны меняться в соответствии с их представлением. Это означает, что такие поля предоставляют представление объекта вызывающим объектам. У Kotlin нет не-private полей. Это достаточно интересное отличие при сравнении Kotlin и Java.   Нулевая безопасность Одной из самых заметных проблем для разработчиков, связанных с Java, является NullPointerExceptions. Java позволяет разработчикам присвоить значение null любой переменной. Однако, если они пытаются использовать ссылку на объект с значением null, возникает исключение NullPointerException! В отличие от Java, в Kotlin все типы по умолчанию являются не-nullable. Если разработчики попытаются присвоить или вернуть значение null в коде Kotlin, во время компиляции произойдет сбой. Тем не менее, есть способ обойти этот момент. Чтобы присвоить значение null переменной в Kotlin, необходимо явно пометить эту переменную как nullable. Это делается путем добавления знака вопроса после типа, например: val number: Int? = null Таким образом, в Kotlin нет исключений NullPointerException. Если вы встречаете такое исключение в Kotlin, то, скорее всего, вы либо явно присвоили значение null, либо это связано с каким-то внешним Java-кодом.   Примитивные типы Существует 8 примитивных типов данных, включая char, double, float и int. В отличие от Kotlin, переменные примитивного типа не являются объектами в Java. Это означает, что они не являются объектами, созданными из класса или структуры.   Умные приведения Прежде чем объект может быть приведен в Java, обязательно нужно проверить тип. Это также верно в сценариях, где очевидно нужно приводить объект. В отличие от Java, Kotlin имеет функцию умного приведения, которая автоматически обрабатывает такие избыточные приведения. Вам не нужно выполнять приведение внутри оператора, если он уже проверен оператором is в Kotlin.   Статические Члены В Kotlin нет статических элементов. Однако в языке программирования Java ключевое слово static отражает то, что конкретный член, с которым используется это ключевое слово, принадлежит самому типу, а не экземпляру этого типа. Это просто означает, что один и только один экземпляр этого статического члена создается и используется всеми экземплярами класса.   Поддержка Конструкторов Классы Kotlin, в отличие от классов Java, могут иметь один или несколько вторичных конструкторов, в дополнение к первичному конструктору. Это делается путем включения этих вторичных конструкторов в объявление класса.   Троичный оператор В отличие от Kotlin, Java имеет тернарный оператор. Тернарный оператор в Java работает как базовый оператор if. Он состоит из условия, которое оценивается как истинное или ложное. Кроме того, тернарный оператор в Java имеет два значения. Только одно из них возвращается в зависимости от того, является ли условие истинным или ложным. Синтаксис для тернарного оператора Java: (состояние) ? (значение 1) : (значение 2)   Типы подстановочных знаков В общем коде, ' ?' представляет неизвестный тип. Этот символ известен как подстановочный знак. Существует несколько вариантов использования подстановочного знака, в том числе в качестве типа поля, локальной переменной или параметра. В то время как система типов Java предлагает использовать подстановочные знаки, в Kotlin их нет. Тем не менее, у него есть два других механизма - вариативность на уровне объявления и проекции типов как альтернатива. Этого будет полезно учитывать при переходе с Java на  Kotlin.   Библиотеки обработки аннотаций с Kotlin Помимо предоставления поддержки существующим Java-фреймворкам и библиотекам, Kotlin также предлагает расширенные Java-фреймворки, основанные на обработке аннотаций. Однако применение в Kotlin библиотеки Java, которая использует обработку аннотаций, требует добавления ее в проект Kotlin немного другим способом, чем требуется для библиотеки Java, которая не использует обработку аннотаций. Требуется указать зависимость с помощью плагина kotlin-kapt. После этого необходимо использовать инструмент обработки аннотаций Kotlin вместо annotation Processor.   Все еще в замешательстве? Вот решение - взаимозаменяемость! Очевидно, что некоторые моменты лучше реализованы в Kotlin, в то время как для других - выгодно использовать Java. Для тех, кто не хочет отказываться от любого из двух ведущих языков программирования для разработки под Android, к счастью, есть и другой путь. Независимо от всех различий между двумя языками программирования, они полностью совместимы. И Java, и Kotlin компилируются в байт-код. Это означает, что в вопросах «Kotlin vs Java» не будет однозначного ответа, ведь можно вызывать код Java из Kotlin и наоборот. Эта гибкость имеет два преимущества. Во-первых, это облегчает начало работы с Kotlin, постепенно добавляя код Kotlin в проект Java. Во-вторых, оба языка могут использоваться одновременно в любом проекте разработки приложений для Android.   Подводя итоги Несмотря на значительные плюсы Kotlin, в вопросах разработки общего назначения Java одерживает верх. С другой стороны, все больше разработчиков и организаций внедряют Kotlin для быстрой разработки Android приложений. И Java, и Kotlin имеют свои преимущества друг перед другом. Дискуссия о том, какой из них подходит для разработки лучше, только началась, и вряд ли она закончится в ближайшее время. Вопросы выбора: «почему Java?», «почему Kotlin?» все еще остаются. В любом случае переход с Java на Kotlin не будет болезненным. С нашей стороны, мы хотели бы предложить комплексную программу подготовки Java разработчика, которая включает в себя видео курсы по Java и сопутствующим технологиям. Тем же, кто хочет познакомиться с основами языка Kotlin – ITVDN.com предлагает ознакомиться с курсом Kotlin.   Источник