В течение последних нескольких лет JavaScript изменялся. И вот 12 новых фичей, которые вы можете начать использовать уже сегодня! 1.    История JavaScript Новые дополнения к языку называются ECMAScript 6. Они также упоминаются как ES6 или ES2015+. Начиная с концепции 1995 года, JavaScript развивался медленно. Новые дополнения выходили раз в несколько лет. ECMAScript появился в 1997 году, чтобы указать путь JavaScript. Были выпущены такие его версии: ES3, ES5, ES6 и другие.   Как вы заметили, между ES3, ES5 и ES6 существуют промежутки в 10 и 6 лет. Новая стратегия состоит в том, чтобы делать небольшие постепенные изменения каждый год. Вместо того, чтобы делать большие изменения сразу, как это случилось с ES6. 2.    Поддержка браузеров Все современные браузеры и среды программирования уже поддерживают ES6!   Chrome, MS Edge, Firefox, Safari, Node и многие другие уже имеют встроенную поддержку большинства функций JavaScript ES6. Таким образом, всё, что вы собираетесь изучить в этом туториале, вы можете начать использовать прямо сейчас. Давайте начнем с ECMAScript 6! 3.    Основные функции ES6 Вы можете проверить все эти фрагменты кода на консоли своего браузера.   Так что не верьте мне на слово и тестируйте каждый пример ES5 и ES6. 3.1. Блочная область видимости переменных В ES6 мы перешли от объявления переменных с var на использование let/const. Что не так с var? Проблема var – это утечка переменной в другой блок кода, например, в циклы for или if-блоки.   Для test(false) вы ожидаете возвращения outer, но нет, вы получаете undefined. Почему? Потому что даже при том, что if-блок не выполняется, выражение var x в строке 4 «поднимается». Поднятие переменных: var является переменной области видимости. Она доступна во всей функции даже до того, как её объявят. Выражения «поднимаются». Так что вы сможете использовать переменные до их объявления. Инициализация НЕ поднимется. Если вы используете var, ВСЕГДА объявляйте ваши переменные наверху. После применения правил подъема, мы можем лучше понять, что же случилось.   ECMAScript 2015 идёт на помощь:   Изменение var на let приводит к тому, что всё работает так, как и ожидалось. Если блок if не вызывается, переменная x не поднимается из блока. Взглянём на поднятие и «временные мёртвые зоны»: В ES6 let будет поднимать переменную наверх блока (НЕ наверх функции, как это происходит в ES5). Однако ссылка на переменную в блоке перед объявлением этой переменной приводит к ReferenceError. let – переменная области видимости. Вы не можете использовать её, пока она не будет объявлена. «Временные мёртвые зоны» – это зоны в начале блока и до того места, где объявляется переменная. IIFE (Immediately-Invoked Function Expression) Перед объяснением IIFE взгляните на пример:   Как вы видите, появляется private. Для того, чтобы удержать его, вам необходимо использовать IIFE (немедленно-вызываемое выражение функции):   Если вы посмотрите на jQuery/lodash или другие open source проекты, то заметите, что они используют IIFE во избежание загрязнения глобальной  среды и определения только глобального, например _,$ или jQuery. ES6 гораздо проще, нам больше не нужно использовать IIFE, когда мы просто можем применить блоки и let:   Const Вы также можете использовать const, если не хотите, чтобы переменная изменялась вообще.   3.2. Литералы шаблонов Нам больше не нужно встраивать конкатенации, когда у нас есть литералы шаблонов. Взгляните: Сейчас вы можете использовать кавычку (`) и строковую интерполяцию ${}:   3.3. Многострочные строки Нам больше не нужно конкатенации строк + \n по типу:   В ES6 мы снова можем использовать кавычку для решения такого примера:   Оба фрагмента кода будут иметь точно такой же результат. 3.4. Назначение деструктуризации Деструктуризация в ES6 очень полезная и точная. Получение элементов с массива   То же самое:   Обмен значений   Так же:   Деструктуризация для нескольких возвращаемых значений   В строке 3 вы также можете вернуть ее в массив подобный тому, что на примере (и сохранить некоторые, набрав код):   Но потом необходимо подумать о порядке возврата данных.   В ES6 вызывающий выбирает только те данные, которые ему нужны (строка 6):   Обратите внимание: В строке 3 есть некоторые другие функции ES6. Мы можем сжать { left: left} только до { left}.Посмотрите, насколько это компактнее по сравнению с версией ES5. Разве не круто? Деструктуризация для параметров согласования   Так же, но короче:   Deep Matching   Так же, но короче:   Это также называют деструктуризацией объектов. Как видите, деструктуризация весьма полезна и способствует хорошему стилю программирования. Практический опыт: Используйте деструктуризацию массива для получения элементов или замены переменных. Это избавит вас от создания временных ссылок. Не используйте деструктуризацию массива для нескольких возвращаемых значений, вместо этого примените деструктуризацию объекта. 3.5. Классы и Объекты С ECMAScript 6 мы перешли от «функции-конструктора» к «классам». В JavaScript каждый отдельный объект имеет прототип, который является другим объектом. Все объекты JavaScript наследуют свои методы и свойства от своего прототипа. В ES5 мы использовали объектно-ориентированное программирование (ООП), применяя функцию- конструктор для создания объектов, следующим образом:   В ES6 имеется некий синтаксический сахар. Мы можем делать то же самое менее шаблонно и с новыми ключевыми словами, такими как class и constructor. Также обратите внимание на то, как мы определяем методы constructor.prototype.speak = function () vs speak():   Как видим, оба стиля (ES5/6) дают одинаковые результаты и используются одинаково. Практический опыт: Всегда используйте синтаксис класса и избегайте прямого манипулирования прототипом. Почему? Потому что это делает код более кратким и понятным. Избегайте наличия пустого конструктора. Классы имеют конструктор по умолчанию, если он не указан. 3.6. Наследование Опираемся на предыдущий класс Animal. Предположим, мы хотим расширить его и определить класс Lion. В ES5 это большей частью связано с прототипическим наследованием.   Я не буду описывать все детали, но заметьте: В строке 3 мы явно вызываем конструктор Animal с параметрами. В строках 7-8 мы назначили прототип Lion прототипу Animal. В строке 11 мы вызываем метод speak из родительского класса Animal. В ES6 у нас есть новые ключевые слова extends и super.   Посмотрите, насколько разборчиво выглядит этот код ES6 по сравнению с ES5, и они работают одинаково! Практический опыт: Используйте встроенный способ наследования с extends. 3.7. Native Promises Мы перешли от callback hell к promises.   У нас есть одна функция, которая при done получает обратный вызов для выполнения. Мы должны выполнить этот вызов дважды один за другим. Вот почему во второй раз мы вызываем printAfterTimeout. Правда, это может пойти наперекосяк, если вам нужен третий или четвёртый обратный вызов. Давайте посмотрим, как мы можем сделать это с промисами:   Как видите, мы с промисами мы можем использовать then, чтобы сделать что-либо после выполнения другой функции. Больше не нужно хранить вложенные функции. 3.8. Стрелочные функции ES6 не удалил выражения функций, но добавил новые функции – стрелочные. В ES5 были некоторые проблемы с this:   Вам нужно использовать временное this для ссылки внутри функции или использовать bind. В ES6 вы можете использовать стрелочную функцию.   3.9. For…of Мы перешли от for к forEach, и потом к for…of:   В ES6 for...of также позволяет нам делать итерации.   3.10.  Параметры по умолчанию Мы перешли от проверки того, была ли переменная определена, к присвоению значения параметрам по умолчанию (default parameters). Вы делали что-то подобное раньше?   Вероятно, это обычный шаблон для проверки того, имеет ли переменная значение или присваивает значение по умолчанию. Однако заметьте, что здесь есть некоторые спорные вопросы: В строке 8 мы задали 0, 0  и получили 0, -1 В строке 9 мы задали false, но получили true. Если в качестве параметра по умолчанию задано значение boolean или это значение равно нулю, то оно не будет работать. Знаете почему? Все расскажем после примера ES6. С ES6 вы можете писать код лучше и короче! Обратите внимание на строки 5 и 6 – мы получаем ожидаемые результаты. Пример ES5 не работает. Сначала мы должны проверить undefined, поскольку false, null, undefined и 0 являются фальшивыми значениями. Мы можем выбраться с такими цифрами:   Сейчас всё работает так, как и должно, когда мы проверяем undefined. 3.11. Rest-параметры Мы перешли от аргументов к rest-параметрам и spread-оператору. Получать произвольное количество аргументов на ES5 довольно неудобно:   Мы можем сделать то же, используя rest-оператор . . . .   3.12. Spread-оператор  Мы пришли от apply() до spread-оператора. Опять на помощь приходит . . .: Напоминание: мы используем apply () для преобразования массива в список аргументов. Например, Math.max () принимает список параметров, но, если у нас есть массив, мы можем использовать apply, чтобы заставить его работать.   Как мы видели ранее, мы можем использовать apply для передачи массивов в виде списка аргументов:   В ES6 вы можете использовать spread-оператор:   Кроме того, мы пришли от использования массивов contact к использованию spread-оператора:   В ES6 вы можете сглаживать вложенные массивы, используя оператор spread:   4.    Заключение JavaScript прошёл через множество изменений. В этой статье описываются основные функции, которые должен знать каждый разработчик JavaScript. Кроме того, в статье есть примеры из практического опыта, которые помогут сделать ваш код более кратким и простым для понимания. Материал подготовлен на основе статьи из блога Adrian Mejia

Опять не выспались, потому что всю ночь кодили, учились, искали баги? Не сходили на обед, потому что дел выши крыши, плюс еще и весь небесный свод усыпан задачами? Забываете сделать обещанное, вспоминаете в последнюю секунду о встрече или запланированном мероприятии? Вы круглые сутки пашете, аки конь, но без результатов? Остановитесь, выдохните, вам надо заняться планированием и освоить азы тайм-менеджмента. Не секрет, что в IT почва для планирования не шибко благодатная. Сколько бы ни придумали систем, все равно всегда есть место форс-мажору, заваленным проектам, испорченным нервам. В большинстве случаев так происходит не потому, что системы плохие, а потому что каждый конкретный человек, принимающий участие, например, в разработке, должен организовываться самостоятельно и уметь распределять дела, а у него не очень то и получается. В этой статье мы поговорим с вами, как начать с себя, чтобы и у вас все успевалось, и у тех, с кем вы взаимодействуете, тоже. Как говорил кто-то очень умный и просвещенный, работать нужно не 12 часов в сутки, а головой. Ладно, мы знаем, это фраза Стива Джобса. =) Итак, как же успевать все? Планирование Да, это банально, скучно и уныло. Но это работает. Более того, планирование смело можно считать одним из основных столпов грамотного распределения времени. Чтобы планирование было успешным, вам нужно любое место, куда писать: - милый блокнот и мягкий карандаш, - любимый девайс с приложением, - "вездедоступный" онлайн календарь, - почтовый клиент… В общем, подойдет абсолютно любое человеческое изобретение, где есть даты и куда можно записать что-то. Выберите время суток, когда вы можете выделить 10 минут и спокойно поразмыслить о делах. Кому-то удобнее этим заниматься утром, перед работой, занятиями и т. д. Кто-то спокойнее отдается планированию вечером перед сном. Поставьте себе на это время напоминание. Сначала вам будет тяжело, обременительно, но с каждый днем привычка планировать будет укореняться, а разгребать завалы дел вы будете быстрее и успешнее. Сложное и простое Часто бывает, что одна задача очень большая и необъятная. И она такая страшная, что порой даже не знаешь, как к ней подойти. В таком случае выручает разбивание огромного на что-то маленькое. То есть, одной большой задачи - на подзадачи. Согласитесь, перенести огромный стеллаж с книгами за один раз — это непосильно и нереально. Но если вытащить книги, разложить их на стопки, а шкаф разобрать, то справиться с этим будет намного проще и быстрее. Составляйте ваш список дел на день так, чтобы в нем было несколько простых, но нужных дел, например, разобрать почту, позвонить маме, заказать книгу и - более сложных. Выполнение простых задач обычно стимулирует и вы видите, как список сокращается, входите во вкус и завершаете все! Мультизадачность Она не работает и ее не существует. Это миф. И Юлий Цезарь со своими умениями не показатель. Наш мозг не умеет делать 2 дела одновременно и параллельно, ну не поддерживает он многопоточность. Даже когда вам кажется, что вы успешно сели на два стула - вы себя обманываете. Вы просто переключаетесь с одной задачи на другую. При этом с каждым переключением вспомнить о том, что вы делали по этой задаче раньше, становится все труднее и труднее и, как следствие, вы быстрее устаете. У вас болит голова, вы больше тратите времени, чтобы завершить начатое. И, в общем-то, либо ничего не успеваете, либо посредственно справляетесь с заданиями. Всегда делайте задачи одна за другой. Поверьте, последовательность — это идеальный помощник в решении сложных дел. Одно дело сделали — вычеркнули, наградили себя вкусным кофе, побежали делать следующее. Приоритеты Итак, мы договорились с вами, что будем планировать. Записали, все что нужно сделать, разбили сложные задачи на подзадачи, а как же сделать так, чтобы не перескакивать с одного дела на другое? В этом нам помогут приоритеты. Как бы это странно ни звучало, но не бывает задач одинаково важных в один и тот же момент времени. Давайте рассмотрим на жизненном примере. Каждый водитель, подъезжающий к перекрестку, где есть светофор, помимо него также видит перед собой знак, который сообщает ему о том, что он на главной дороге, например, и может свободно ехать. Но вот вам ситуация: светофор горит красным, а знак говорит — поезжай. Стоять и ехать одновременно  невозможно. Как решается эта ситуация? Правильно, приоритетами. У светофора он выше, значит, когда горит красный, какой бы знак ни висел, машина — стоит. Если же не работает светофор, то в силу вступает знак. И все. Так же вы можете поступать со своими делами, решая, какая задача из списка более важная и нужная, а какая может подождать и подняться вверх только после выполнения более важной, а какую можно и вовсе не делать — никто не умрет, заводы и пароходы не остановятся. Если же вам трудно сразу научиться расставлять приоритеты, почитайте о матрице Эйзенхауэра. Все ваши задачи можно разделить на 4 категории: Срочные и важные, Важные, но не срочные, Срочные, но неважные, Несрочные и неважные. С таким подходом выполнять намеченное станет еще проще. Время У каждого из нас есть рутинные дела. И обычно мы приблизительно знаем, сколько тратим на них времени. Значит, мы можем четко прописывать, что на чтение почты и ответы на письма мы отводим 30 минут, например. Более того, ограничение по времени можно превратить в игру. Каждый раз пытаться побить рекорд предыдущего дня. Например, сегодня вы работали с почтой 30 минут, а завтра попробуйте справиться за 28. Так становится немного веселее. Существуют дела без времени, например чтение профессиональной литературы. Тут проще, отведите себе какое-то время, например, час, поставьте таймер и садитесь читать. Время вышло — задача выполнена. Следите за тем, как вы проводите свое время. Бывает, нам кажется, что мы так много работали, но ничего не сделали, хотя на самом деле, львиную долю рабочего дня мы просидели в социальных сетях. В общем-то, четкое планирование должно вас оградить от зыбучих песков интернета, но если вы уже и решили себя порадовать очередным спором в интернете, то также ограничьте это по времени. Не делайте этого Если вы понимаете, что то, что вам предстоит сделать, будет приносить вам страдания — не делайте это. Просто остановитесь и откажитесь, передайте эту задачу другому, забудьте о ней. Поверьте, всегда есть люди, которые сделают это за вас и никто не пострадает. Зато вы спокойно будете заниматься другими важными делами, а не страдать над подходами к выполнению намеченного. Если вся ваша работа причиняет вам боль, значит пора менять либо работу, либо профессию. Серьезно. В общем, старайтесь делать меньше того, что вам не нравится. Отдыхайте От работы дохнут кони, ну а я - бессмертный пони? Это про вас? Значит, выдохните. Знаете, если вы сегодня уйдете вовремя, небесная твердь не свалится, планеты не сойдут с орбит. А если вы завтра и вовсе возьмете отгул, то тоже ничего страшного не произойдет. Найдите для себя занятие, которое поможет вам расслабиться. И, да, запланируйте на него время. Это может быть все, что угодно: спорт, чтение, вышивание, прогулки, медитации и прочее, прочее. И спите, обязательно давайте мозгу время  перезагрузиться и восстановиться, тогда вам все будет по плечу! А теперь небольшой свод коротких правил, которые дополнят и уточнят все вышесказанное: 1. Планируйте и проставляйте приоритеты. 2. Ставьте на все задачи временные рамки, желательно, чтобы эти рамки не выходили за пределы рабочего времени (если мы говорим о рабочих делах). 3. Перерывы и отдых тоже планируйте. 4. В списке дел должны быть разные задачи: легкие, средние и посложнее. 5. Фиксируйте намеченное и вычеркиваете сделанное. 6. Мотивируйте себя музыкой, перерывом или чем-то еще приятным. 7. Разбивайте большие задачи на маленькие. 8. Суперконцентрация. Если нужно, а никак не получается — отключите все раздражители, уйдите в другую комнату, в общем, сделайте все, чтобы вы остались со своим заданием наедине. 9. Не делайте то, что вам не нравится. 10. Любите себя и берегите!

Введение Данная статья ориентирована на тех, у кого уже есть небольшой опыт работы с Unity. В первую очередь мы рассмотрим воссоздание механики управления главного героя игры Super Meat Boy. Также узнаем, как построить сцену, имея скриншот уровня оригинальной игры. Все материалы, использованные в данном примере, принадлежат разработчикам оригинальной игры.  Для начала стоит сказать пару слов о фоновых картинках для уровней. Чтоб не создавать весь уровень из отдельных элементов, редактируем найденные на просторах интернета скриншоты, на которых вырезаем главного героя, таймер с левой части экрана и следы крови. Теперь у нас есть подготовленный фон. Элементы Уровня Поверхности, по которым можно двигаться, задаем с помощью компонента Polygon Collider 2D. Места, где игрок может умереть (выпасть из поля зрения камеры или попасть на режущую пилу) обозначаем тегом killzone. К ним крепим данный скрипт: void OnTriggerEnter2D(Collider2D other)     {         if (coll.tag =="killzone")         {            Application.LoadLevel(Application.loadedLevelName);         }           } При прикосновении коллайдер игрока вызывает срабатывание скрипта и подгружает этот же уровень, то есть происходит рестарт. Аналогично работает и загрузка следующего уровня, единственным отличием является передаваемое методу Application.LoadLevel() текстовое значение с названием уровня. Этот скрипт прикрепляем к объекту endTarget. Следы крови размещаем на все потенциально доступные игроку поверхности (кроме уровня песочницы, где они находятся на каждой из 4 сторон блока). Они состоят из отключенного по умолчанию компонента Sprite Renderer, компонента Box Collider 2D с активированным значением IsTrigger и скрипта, который собственно и включает Sprite Renderer при коллизии с игроком.  SpriteRenderer sR;       void Start()     {         sR = transform.GetComponent<SpriteRenderer>();     }       void OnTriggerEnter2D(Collider2D coll)     {         if (coll.tag =="Player")         {            sR.enabled = true;         }             } Получаем компонент Sprite Renderer во время выполнения при помощи метода GetComponent(), вызываемого на данном объекте. Если тег прикасающегося коллайдера равен "Player", то включаем Sprite Renderer, который отображает картинку крови на уровне.  Создание персонажа Внешний вид персонажа В оригинальной игре мит-бой тщательно анимирован и имеет большое количество визуальных эффектов, большинство из которых мы воссоздавать не будем по причине нецелесообразности. Вместо анимации будем использовать простую подмену спрайтов при смене состояния игрока. Для главного персонажа нам понадобятся  компоненты Rigid Body 2D, Sprite Renderer, Box Collier 2D, Circle Collider 2D и скрипт управления, который мы рассмотрим чуть ниже. В инспекторе на компоненте Rigid Body 2D ставим галочку на Fixed Angle, в Circle Collider 2D на IsTrigger. Этим мы зафиксировали персонажа в одном положении и указали, что Circle Collider 2D выполняет функцию триггера. Радиус окружности коллайдера должен быть таким, что немного выходит за рамки квадратного коллайдера. Он является триггером появления следов крови на уровне. Объявление переменных Для корректной имитации поведения нам понадобятся переменные для скорости ходьбы, бега, прыжка, а также ускорения в воздухе и на земле.     public float jumpForce = 50f;     public float speed = 10;     public float speedMultiplier = 4f;     public float acceleration = 5f;     public float airAcceleration = 2f; Для данных переменных экспериментальным путем были подобраны значения, которые больше всего напоминают поведение оригинала. Также нам понадобятся переменные для контроля вида персонажа и собственно его физика. Они позже будут инициализированы уже знакомым нам способом во время выполнения. SpriteRenderer spriteRender; Rigidbody2D rBody; Для правильного отображения разных состояний мит-боя будем использовать несколько картинок, поэтому берем переменные типа Sprite. //спрайты разных состояний     public Sprite jumpSprite;     public Sprite RunSprite;     public Sprite IdleSprite;     public Sprite SlidingOnAWallSprite; Данные спрайты будем инициализировать не в рантайме, а в редакторе, где проводим им ссылку на картинку для каждого состояния. И напоследок еще понадобятся данные о высоте, толщине персонажа и состояние прыжка.   float playerWidth;     float playerHeight;     //флаг состояния прыжка     bool ableToJump = true; Управление главным героем После объявления всех нужных нам переменных, переходим к реализации. Зарезервированный метод Awake() отработает сразу поле загрузки уровня, поэтому в нем и инициализируем переменные толщины, высоты и другие.  void Awake()     {         //инициализация этих переменных произойдет сразу после запуска сцены         playerWidth = GetComponent<BoxCollider2D>().bounds.extents.x + 0.05f;         playerHeight = GetComponent<BoxCollider2D>().bounds.extents.y + 0.05f;         rBody = transform.GetComponent<Rigidbody2D>();         spriteRender = transform.GetComponent<SpriteRenderer>();     } Переменные playerHeigth и palyerWidth будут полезны при определении, находится ли игрок на земле. К ним прибавляем небольшой зазор, который не даст лучу от персонажа заметить его же коллайдер. Метод IsOnGround() возвращает true в случае, если хотя бы один из созданных лучей касается коллайдера. Для удобства создаем два луча – с левой нижней части коллайдера персонажа и правой соответственно. При создании отнимаем высоту, учитывая вертикальный и горизонтальный зазоры. Этот способ позволит уйти от многих проблем при прыжках возле стен. public bool IsOnGround()     {         //создаем луч длинной 0.01 справа с направлением вниз         bool rightBottom = Physics2D.Raycast(             new Vector2(transform.position.x + playerWidth - 0.055f,             transform.position.y -playerHeight), -Vector2.up, 0.01f);         //аналогичный луч слева         bool leftBottom = Physics2D.Raycast(               new Vector2(transform.position.x - playerWidth + 0.055f,               transform.position.y - playerHeight),-Vector2.up, 0.01f);         return (rightBottom || leftBottom) ? true : false; } Метод Run() отвечает за движение игрока по горизонтали. Параметр int directionX отвечает за направление, если число позитивное, то двигаемся вправо, негативное – влево соответственно. Если нажат LShift, то учитывается умножитель ускорения. Если игрок находится в воздухе, то множим на переменную ускорения в воздухе.  private void Run(bool onGround, int directionX)     {         rBody.AddForce(new Vector2((directionX * speed - rBody.velocity.x) *             (Input.GetKey(KeyCode.LeftShift) ? speedMultiplier : 1f) *            (onGround ? acceleration : airAcceleration), 0));     } Метод JumpNearWall() отвечает за прыжок персонажа возле стены. Аналогично методу Run(), он принимает параметр int directionX. private void JumpNearWall(int directionX)     {         //убираем инерцию         rBody.velocity = Vector2.zero;         rBody.AddForce(new Vector2(directionX *             jumpForce * airAcceleration * 3,             jumpForce * airAcceleration * 5));         StartCoroutine(JumpCoolDown());     } В конце тела этого метода вызываем корутин, который будет убирать возможность прыгать суммарно на 0.1 секунд. IEnumerator JumpCoolDown()     {         yield return new WaitForSeconds(0.05f);         ableToJump = false;         yield return new WaitForSeconds(0.05f);         ableToJump = true;     } Метод FlipPlayer() меняет направление используемого спрайта игрока. void FlipPlayer(bool toLeft)     {         //если повернут направо, а нужно налево         if ((transform.localScale.x < 0 && toLeft) ||         //если повернут налево, а нужно направо             (transform.localScale.x > 0 && !toLeft))         {             transform.localScale = new Vector3(transform.localScale.x * -1f,                 transform.localScale.y, transform.localScale.z);         }     } Метод FixedUpdate() является зарезервированным и вызывается независимо от количества отработанных кадров. Для начала получаем значение, касается ли персонаж пола и стен слева и справа.  bool onGround = IsOnGround();         bool nearLwall = Physics2D.Raycast(             new Vector2(transform.position.x - playerWidth, transform.position.y),             -Vector2.right, 0.01f);         bool nearRwall = Physics2D.Raycast(             new Vector2(transform.position.x + playerWidth, transform.position.y),             Vector2.right, 0.01f); Присваиваем спрайт по умолчанию – спрайт безделья.  spriteRender.sprite = IdleSprite; Теперь считываем нажатие кнопок управления. if (Input.GetKey(KeyCode.RightArrow))         {             //двигаем персонажа в позитивном направлении по оси Х             if (!nearRwall) Run(onGround, 1);             //присваиваем новый спрайт и меняем его направление             spriteRender.sprite = RunSprite;             FlipPlayer(false);         }         else if (Input.GetKey(KeyCode.LeftArrow))         {             //двигаем персонажа в негативном направлении по оси Х             if (!nearLwall) Run(onGround, -1);             spriteRender.sprite = RunSprite;             FlipPlayer(true);         } Если персонаж находится на поверхности и нажат пробел, то выполняем прыжок и активируем таймер до следующего прыжка. if (Input.GetKeyDown(KeyCode.Space) && onGround && ableToJump)         {             //выполняем "прыжок с земли"             rBody.AddForce(new Vector2(0, jumpForce * acceleration* 1.7f));             spriteRender.sprite = jumpSprite;             //таймер до следующего прыжка             StartCoroutine(JumpCoolDown());         } В противном случае разделяем поведение для прыжка возле левой и правой стенки.             if (Input.GetKeyDown(KeyCode.Space) && nearLwall && ableToJump)             {                 //прыжок от стены вправо                 JumpNearWall(1);             }             if (Input.GetKeyDown(KeyCode.Space) && nearRwall && ableToJump)             {                 //прыжок от стены влево                 JumpNearWall(-1);             } Если игрок возле стенки, меняем спрайт и уменьшим скорость вертикального движения при прикосновении к стене после прыжка. Поворачиваем спрайт в нужном направлении и скрипт управления готов. spriteRender.sprite = SlidingOnAWallSprite;                 rBody.velocity = new Vector2(rBody.velocity.x,                     (rBody.velocity.y > 9.0f) ? rBody.velocity.y * 0.6f : rBody.velocity.y);                              if (nearLwall) FlipPlayer(true);                 else FlipPlayer(false); Теперь осталось опробовать все на практике. К данной статье прикреплен проект с уровнем «песочница», который можно изменить, как угодно добавив или убрав элементы. 

Введение Привет всем. Многие студенты, которые решили связать свою жизнь с програмированием, задаются такими вопросами: - что выбрать своим главным инструментом в работе? - чем пользуется большинство? - чем пользоваться при написании своего кода? - что лучше? На эти вопросы нет однозначного ответа, каждый редактор по-своему хорош. Но постараюсь описать главные возможности тех редакторов, с которыми я сам столкнулся и пользовался в своей практике. Сразу внесем ясность и расставим точки над i. Средства разработки делятся на два главных класса: 1 – Интегрированные среды разработки (IDE) 2 - Текстовые редакторы (text editor) Официальное определение  интегрированная среда разработки можно найти по адресу: https://ru.wikipedia.org/wiki Официальное определение текстовый редактор по адресу: https://ru.wikipedia.org/wiki Попытаюсь объяснить  разницу между двумя этими классами своими словами. Интегрированная среда разработки - это как швейцарский нож или трактор, он мультифункционален, а следственно, и граничен. Может делать много, но некоторые вещи делает не так, как нам хотелось бы. Посудите сами: трактор ведь может тянуть тяжелый груз, копать и, главное, может передвигаться. Но все это он делает медленно. К примеру, если стоит задача переместиться из пункта “А” в пункт “Б” (что является одной из функций трактора), для этого лучше пригодится спорткар или обычный легковой автомобиль, для этой операции нами не нужен трактор со всеми его функциями. Следовательно, мы можем сделать вывод, что для определенных операций нам нужны определенные инструменты. В этой статье я не буду рассматривать IDE и их фичи (feature). Хочу рассказать о главных текстовых редакторах и их возможностях. Мой TOP текстовых редакторов: 1. Sublime Text 2. Brackets 3. Visual Studio Code (на этом месте был Atom) Пробовал, но не понравились/не подошли, по каким-либо причинам (поэтому не рассматриваю их тут) 1. Notepad++ (Сайт https://notepad-plus-plus.org/) 2. Komodo Edit (Сайт http://komodoide.com/komodo-edit/) 3. Atom (Сайт https://atom.io/) 4. Textmate (Сайт https://macromates.com) Итак ,начнем. Sublime Text 3 сайт: http://www.sublimetext.com/3 Чем нравится: кроссплатформенный легкий большая и понятная библиотека плагинов (дополнений) легко настроить под себя Что следует сделать после установки. Зайти на сайт https://packagecontrol.io/installation И сделать все согласно инструкции, открыть консоль Саблайма: найти вкладку View  и кликнуть Show Console. В появившемся снизу поле ввода вставить следующий код: import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by) Должно получиться вот так: Жмем Enter. Так мы установили Package Control в наш Sublime. Теперь мы можем устанавливать плагины в редактор, нажав сочетание клавиш Ctrl+Shift+P on Windows/Linux, ⇧⌘P on OS X На сайте https://packagecontrol.io/ вы найдете множество плагинов с детальным описанием, руководством установки и руководством использования. Теперь о плагинах. Плагин – грубо говоря, это дополнение программы. Официальное определение https://ru.wikipedia.org/wiki Плагины, которые пригодились мне в работе, возможно, пригодятся и вам. 1. Emmet - https://packagecontrol.io/packages/Emmet Плагин, который помогает быстро набирать код. С помощью шпаргалки вы быстро научитесь быстро набирать сложные конструкции html, указав лишь название тега и  порядок иерархического положения елемента на странице. Его официальный сайт http://emmet.io/ и шпаргалка http://docs.emmet.io/cheat-sheet/ Еще одно условие: для работы этого дополнения нужен предустановленный nodeJS. Найти его можно тут: https://nodejs.org/ Думаю, что nodeJS у вас уже был предустановлен, а если не был, то он вам точно еще пригодится не раз. 2. SublimeCodeIntel - https://packagecontrol.io/packages/SublimeCodeIntel Плагин портирован из текстового редактора Komodo Editor, помогает автодополнением к языкам программирования JavaScript, Python, Ruby, XML, HTML, CSS, PHP и другим. 3. SideBarEnchancements - https://packagecontrol.io/packages/SideBarEnhancements Плагин открывает новые возможности боковой панели для работы с Вашими проектами. 4. BracketHighlighter - https://packagecontrol.io/packages/BracketHighlighter Плагин позволяет отображать дополнительные скобки возле номеров строк, отображая, к примеру, блоки кода. 5. AutoFileName - https://packagecontrol.io/packages/AutoFileName Плагин говорит сам за себя, когда мы пишем пути к нашим фалам, помогает, выводя дополнительное выскакивающее окошко, с выбором папок или файлов. 6. HTML-CSS-JS Prettify https://packagecontrol.io/packages/HTML-CSS-JS%20Prettify Плагин “расческа”. Причесывает наш код, делает его более читабельным для человеческого глаза. 7. Color Highlighter - https://packagecontrol.io/packages/Color%20Highlighter Плагин подсвечивает цвета при написании вайлов CSS/Less/SASS/SCSS/Stylus. Остальные плагины, для работы с такими библиотеками как jQuery, Bootstrap, AngularJS,  советую устанавливать осторожно, потому как постоянно выскакивающие окошки с помощью какого либо плагина если не пугают, то начинают очень надоедать. Поэтому советую не превращать текстовый редактор в “неубранный балкон”. Также есть возможность установки из того-же Package Control множества тем и цветовых схем. Темы и цветовые схемы отличаются тем, что тема  меняет полностью весь внешний вид Sublime, цветовая схема  меняет только цвета подсветки синтаксиcа. Файл настроек находится во вкладке Preferences>Settings Default/Settings User. Почему именно два файла? Потому что вы сможете изменять только Settings User. Оба файла являются, по сути, JSON объектами, поэтому разобраться и изменять свои настройки вы научитесь довольно быстро. Brackets сайт - http://brackets.io/ Этот текстовый редактор также поддерживает большинство перечисленых плагинов, и даже если таковых вы не найдете, то их аналоги точно есть в песочнице. На правой боковой панели вы найдете несколько кнопок: Первая в виде молнии – LivePreview. Запускает страницу с рашрирением html в вашем браузере, который установлен по умолчанию, браузер будет сам обновлять страницу.  Вторая в виде лего – Extension Manager. При клике вызывает модальное окно в, котором содержатся вкладки меню для выбора плагинов, тем, их установке и удалению.  Третья в виде “слоев торта” со стрелочкой вверх – Extract for Brackets. Ради этой кнопки и стоит устанавливать этот редактор. Она позволяет после регистрации загрузить файлы psd формата для верстки прямо  из текстового редактора, не загружая ничего больше.  Кликаете по кнопке Open PSD Регистрируетесь или же входите под своим Adobe ID, загружаете PSD шаблон и начинаете верстать в разы быстрее. Кликнув по какому либо элементу на шаблоне, вы можете моментально перенести: текст, css свойства, или же выгрузить картинку из шаблона пряму в папку с проектом. С такими возможностями верстка становится в разы быстрее! Не агитирую, просто  советую попробовать) Visual Studio Code сайт - https://code.visualstudio.com/ Бесплатный кроссплатформенный текстовый редактор, основанный на технологиях замечательного текстового редактора Atom от GitHub. Подробное описание можно прочитать по ссылке ниже: https://uk.wikipedia.org/wiki/Visual_Studio_Code Также будет полезна ссылка с документацией: https://code.visualstudio.com/Docs/setup Отличный текстовый редактор от компании Microsoft. Облегченная и кроссплатформенная версия Visual Studio. Имеет схожий дизайн со своим старшим собратом. Похожие темы и подсказки в виде выпадающих окошек (контекстные подсказки). Так что разработчикам, перешедшим с Visual Studio, будет гораздо легче адаптироваться. Еще несколько плюсов с коробки: поддержка таких языков програмирования: JavaScript, C++, C#, PHP, XML, Java, Objective-C, HTML, CSS, Less, Sass и т.д. (полный перечень находится в документации). отладчик инструменты для работы с Git автодополнения в стиле Emmet. Настоятельно рекомендую обратить внимание и попробовать Visual Studio Code. Даже просто потому, что вы установите его и все, дальше просто приступаете к работе :) На этом все. Думаю, что изложил свои мысли достаточно простым языком. Помните, что не важно, в каком текстовом редакторе или IDE вы работаете, это всего лишь инструмент, в конечном итоге вы можете остановить свой выбор на обычном блокноте и там разрабатывать приложения, для того, чтобы писать программы не обязательно иметь подсветку синтаксиса, всякие плюшки, главное, чтобы вам было удобно и при написании вы чувствовали себя комфортно. Выбор за вами. Удачи!

Введение Эта статья предназначена для начинающего разработчика, который впервые столкнулся с изучением AngularJS и сопутствующими технологиями, такими как GIT, node.js, Grunt, Bower. Вы могли много читать литературы по поводу перечисленных выше технологий, в этой статье мы лишь вкратце опишем, чем по сути является каждая из них, и как с ней работать. 1. Проходим по ссылке: https://docs.angularjs.org/tutorial и следуем всем инструкциям по установке. Не бойтесь, мы Вам в этом поможем! И постараемся вместе разобраться в основных понятиях современного Frontend Development'a :) Для начала нам следует установить git на свою ЭВМ :)       Коротко о git. Git — система для контроля версий файлов. Более обширное определение - это  ресурс, который позволяет разработчику или команде разработчиков контролировать версии своих приложений. Подробнее тут: https://ru.wikipedia.org/wiki/Git  Идем по ссылке в новой вкладке: http://git-scm.com/ и выбираем ту версию git, которая нас интересует, в соответствии с нашей операционной системой. Скачиваем файл для установки, с расширением .exe и устанавливаем в папку Program files. 2. Идем по ссылке в новой вкладке браузера https://github.com/ и регистрируемся. Github – самый крупный веб-сервер для хостинга (размещения) проектов разработчиков. Итак, мы это все сделали, далее скачиваем приложение из репозитория angular-phonecat, размещенного на Github. То есть, нашей задачей теперь будет взять и скачать готовое приложение себе на жесткий диск. 3. AngularJS – это JavaScript фреймфорк, который заточен под разработку одностраничных приложений. Официальный сайт AngularJS https://angularjs.org/ Основной идеей AngularJS является убеждение создателей оного, что декларативное программирование (парадигма программирования - описание программы, какая она по сути, а не то, как ее создать) находит применение в разработке внешнего вида приложения, а императивное программирование (парадигма программирования – в отличие от декларативного программирования, описывает процесс вычисления в виде инструкций, по сути, пошагово изменяет инструкции программы, похоже на приказы) используется для описания бизнес логики. AngularJS – расширяет HTML, чтобы создать двустороннюю привязку данных для динамического контента. Цели AngularJS: DOM-манипуляции не зависят от логики приложения. Параллельная разработка путем разделения клиентской части и серверной части приложения. Планирование разработчиком всех приложений – интерфейс, бизнес-логика, тестирование. Открываем терминал/консоль и перемещаемся в ту папку, в которую хотим сохранить проект с помощью команды cd Documents/ (эта команда означает - cd – change derictory на Documents) и нажимаем Enter  мы переместились в папку, где хранятся документы (просто потому, что мне так удобней, можно этого не делать и остаться в корне диска). Копируем следующую строку  git clone --depth=14 https://github.com/angular/angular-phonecat.git вставляем в терминал/консоль и нажимаем Enter. Эта строка создает папку angular-phonecat и копирует приложение с Git с последними 14 коммитами (изменениями). Ждем окончания копирования проекта. Далее переходим в директорию с нашим приложением командой     cd Documents/angular-phonecat  или cd angular-phonecat/   после жмем Enter и оказываемся в папке с приложением 4. У нас на жестком диске есть наше приложение, теперь нам следует установить node.js. Node.js – что такое node.js? Есть много статей, определений и объяснений. В общем и коротко: Node.js – это интерпретатор JavaScript. Приложение node.js получает js код и выполняет его. Нам надо установить node.js в папку с нашим приложением. Переходим по ссылке: http://nodejs.org/download/ качаем приложение и устанавливаем. 5. Вместе с node.js устанавливается и npm. Что такое npm? Npm – это node package manager. Npm устанавливает пакеты, которые прописаны в файле package.json перед установкой npm нам следует проверить, какая версия node.js установлена у нас. Это мы делаем командой в терминале: node –-version есть :) Теперь в терминале набираем следующее: npm install На выходе получаем такую структуру нашего проекта: Файл  package.json содержит в себе информацию о приложении, название, версию, установленные пакеты в приложении. Возможна установка пакетов как через файл package.json, так и через терминал. 6. Это не обязательно, но в будущем этот пакет Вам пригодится. Grunt – это Task Runner – автоматизатор процессов, позволяет проводить минификацию кода, сборку кода(компиляцию), тестирование. В терминале вводим следующее: npm install -g grunt-cli (-d   - говорит о том, что мы устанавливаем grunt глобально.) Дополнительно устанавливаем в директорию с приложением npm install grunt-cli теперь обновляем npm:  sudo npm update npm -g sudo - (substitute user and do – подменить пользователя и выполнить) – в Unix системах позволяет пользователям выполнять команды от имени суперпользователя root. В директории с приложением требуется создать файл Gruntfile.js, вложим в него код из официального примера http://gruntjs.com/sample-gruntfile в конце страницы - конечная версия файла, копируем код себе в файл. Или копируем отсюда: module.exports = function (grunt) {     grunt.initConfig({         pkg: grunt.file.readJSON('package.json'),         concat: {             options: {                 separator: ';'             },             dist: {                 src: ['src/**/*.js'],                 dest: 'dist/<%= pkg.name %>.js'             }         },         uglify: {             options: {                 banner: '/! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> /\n'             },             dist: {                 files: {                     'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']                 }             }         },         qunit: {             files: ['test/**/*.html']         },         jshint: {             files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],             options: {                 // options here to override JSHint defaults                 globals: {                     jQuery: true,                     console: true,                     module: true,                     document: true                 }             }         },         watch: {             files: ['<%= jshint.files %>'],             tasks: ['jshint', 'qunit']         }     });     grunt.loadNpmTasks('grunt-contrib-uglify');     grunt.loadNpmTasks('grunt-contrib-jshint');     grunt.loadNpmTasks('grunt-contrib-qunit');     grunt.loadNpmTasks('grunt-contrib-watch');     grunt.loadNpmTasks('grunt-contrib-concat');     grunt.registerTask('test', ['jshint', 'qunit']);     grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']); }; Пакеты, которые мы прописали в Gruntfile.js, следует установить через npm следующими командами: npm install grunt-contrib-uglify --save-dev npm install grunt-contrib-qunit --save-dev npm install grunt-contrib-concat --save-dev npm install grunt-contrib-jshint --save-dev Подробнее об установленных пакетах можно прочитать тут: https://github.com/gruntjs/grunt-contrib-uglify https://github.com/gruntjs/grunt-contrib-qunit https://github.com/gruntjs/grunt-contrib-concat https://github.com/gruntjs/grunt-contrib-jshint https://github.com/gruntjs/grunt-contrib-watch 7. Установка Bower и что это такое. Bower – менеджер пакетов для клиентской стороны приложения JS. Отличием Bower от Npm есть то, что Bower, если возникнет конфликт, не позволит Вам поставить несовместимый пакет(библиотеку), которая уже установлена, Bower ставит одну версию пакета. В терминале ставим глобально bower и пишем: npm install -g bower  и конечно ставим в директорию с проектом  bower install 8. Сongrats !!! Теперь у нас установлено приложение и мы можем запускать его, из файловой системы заходим в папку с приложением, потом в папку – app, находим файл и тапаем (двойной клик) по нему index.html или (что будет правильным) нужно зайти в терминал и ввести: npm start (запускаем сервер) и в браузере в омнибоксе (адресной строке) ввести: http://localhost:8000/app/index.html Wuala – наше приложение запускается и работает. Подробнее об AngularJS и как с ним работать вы можете узнать из курса AngularJS в учебном центре CyberBionic Systematics. Всем спасибо и удачного кода. 

Операционная система Android Языки программирования Java и Kotlin. Принципы ООП Среда Android Studio и набор инструментов Android SDK Формат обмена данными JSON Архитектура REST API Реактивное программирование Библиотека Retrofit 2 Фреймворк Dagger 2 Данные и СУБД SQLite UI/UX дизайн Шаблоны проектирования Алгоритмы и структуры данных Unit тестирование Архитектурные шаблоны Git & GitHub Google Play Английский язык Как стать Android разработчиком? Итоги   Всем привет! С каждым годом смартфоны, планшеты и другие гаджеты приобретают все большую популярность. Нам уже трудно представить хотя бы один день без них. Каким образом мы так сильно приявязались к ним? Все дело в программном обеспечении, которое находит ключ к каждому из нас: общение (телефонная связь, видеозвонки, социальные сети), просмотр мультимедийного контента, прослушивание музыки, фото- и видеосъемка, игры на любой вкус и цвет, обучающие приложения и т. д. За всем этим стоят девелоперы, разрабатывающие программы, от которых тяжело оторваться. Каждое мобильное устройство работает с использованием одной из мобильных операционных систем. Cамыми популярными из них являются Android и iOS. В контексте данной статьи нас интересует именно первая ОС. Мы расскажем вам, какие инструменты используют разработчики в создании таких увлекательных приложений на Android и как стать специалистом в этой сфере. Но прежде хотим познакомить вас поближе с данной операционной системой. Уверены, что практически каждый ее использовал (а может, и сейчас ею пользуется), однако сейчас вы узнаете некоторые интересные факты об Android: Изначально Android разрабатывалась как ОС для фотоаппаратов. ОС Android основана на ядре Linux. Компания Samsung имела возможность приобрести стартап-компанию Android Inc. в 2004-м году, однако корейцы поставили под сомнение выгодность этого предложения. Через год корпорация Google купила Android Inc. не менее чем за $50 миллионов и смогла направить полученный потенциал в нужное русло. Число активированных устройств, использующих Android, более 2 миллиардов. Первая версия Android, как и первый пакет разработчика (SDK 1.0), вышла осенью 2008 года. Тогда эту ОС многие критиковали и не верили в успешность проекта. Google Карты вычисляют дорожные пробки на основе концентрации и скорости перемещения Android устройств. Android используется не только в смартфонах и планшетах, но также и в электронных книгах, наручных часах, фитнес-браслетах, игровых приставках, ноутбуках, нетбуках, смартбуках, очках Google Glass, телевизорах, бытовых роботах, научных аппаратах, компонентах исследовательских систем на базе гаджетов, компонентах IoT (Internet of Things — “интернет вещей”) и других устройствах.     Теперь перейдем ближе к сути. Андроид разработчик — это IT-специалист, который создает, поддерживает и совершенствует программное обеспечение для мобильных устройств, использующих популярную ОС Android. Вместе с этим он задействован в процессах поддержки, улучшения и обновления разрабатываемых продуктов. Если посмотреть на количество устройств, которые используют данную ОС, можно прийти к выводу, что разработчик под платформу Андроид — очень востребован в IT, а также имеет высокие доходы. Какие технологии использует в своей работе этот специалист?     Какие языки программирования и технологии используют Android разработчики Android Каждый Android девелопер обязан знать операционную систему, под которую разрабатывает софт, а также понимать назначение и жизненный цикл Android-компонентов. Чтобы создавать эффективные мобильные приложения, вы должны понимать все аспекты устройства и работы данной ОС. Java + ООП Java — это объектно-ориентированный язык программирования со строгой типизацией. Безусловно, в создании приложений под Андроид можно использовать другие языки (C#, C/C++, Python и прочие), однако, именно Java считается флагманским в Android разработке. Поэтому в данной статье мы будем делать уклон в Java-стек. Что являет собою этот язык? Не будем углубляться в его устройство, а скажем лишь, что все Java-приложения транслируются в специальный байт-код, выполняемый виртуальной машиной JVM (Java Virtual Machine), которая может быть установлена практически на любое устройство. Это делает программы, разработанные на Java, кроссплатформенными. Какими знаниями необходимо обладать? Прежде всего необходимо знать Java и владеть методологией объектно-ориентированного программирования (ООП). Если конкретизировать: Машинная математика, переменные и типы данных, условные конструкции, логические операции, циклические конструкции, методы, рекурсия, массивы, списки, обработка исключений, суперкласс Object, обобщения (Generics, дженерики), работа с памятью. Понимание и применение пакетов (Packages) в Java; ООП, понятия объектов и классов; Механизмы наследования, умение работать с интерфейсами; Коллекции и работа с ними; Параллелизм. Помимо теоретических знаний, новичок должен сформировать необходимые навыки написания кода. Для этого мы советуем вам как можно чаще практиковаться и решать прикладные задачки из интернета либо составленные самолично. Также, советуем использовать онлайн-тренажеры, например, интерактивный тренажер от ITVDN. С его помощью вы сможете потренироваться в кодинге на Java и проверить свои знания. Kotlin Молодой и перспективный язык программирования, который поддерживает как объектно-ориентированное, так и процедурное программирование. Отличается своей простотой, гибкостью, лаконичностью, и являет собой следующий этап развития Java. Kotlin-приложения компилируются в уже упомянутый JVM байт-код, что делает этот язык полностью совместимым с Java.  На конференции для разработчиков I/O 2017 компания Google расставила акценты в Android разработке, заявив, что язык программирования Kotlin отныне позиционируется как приоритетный язык для разработчиков приложений под ОС Android. Подкреплено это было тем, что теперь новые API и библиотеки будут выпускаться сперва под Котлин. Несмотря на возрастающую популярность данного языка и поддержку со стороны Google, Java не собирается уходить из мобильной разработки, удерживая там уверенные позиции и по сей день. Так что знание обоих языков будет предпочтительным для всех, кто собирается заниматься Андроид разработкой. В любом случае, зная Java, вы безпроблемно освоите и Kotlin. Все-таки классику надо знать и уважать. Среда Android Studio и набор инструментов Android SDK Android Studio — это интегрированная среда разработки (IDE) приложений под Android. В ней вы будете создавать проекты и работать над ними. В свою очередь, студия вам предоставит всевозможные удобности для облегчения разработки софта. Android Software Development Kit — кроссплатформенный комплект средств Android разработки, включающий в себя: отладчик, набор библиотек, телефонный эмулятор, набор документации по работе в данной среде и примеры приложений. Особенно интересен в этом перечне эмулятор — программа, которая создает виртуальный мобильный девайс, где можно тестировать написанные приложения и смотреть, как они будут выглядеть на том или ином Андроид-устройстве. JSON JSON (JavaScript Object Notation) — это общий формат обмена данными. Позволяет совершать обмен информацией между программными продуктами, написанными на разных языках. Таким образом, клиент, использующий Java, может легко передавать данные на сервер, который реализован с помощью Ruby/Java/PHP. REST API REST — популярный архитектурный стиль, содержащий определенные принципы организации взаимодействия приложения либо сайта с сервером через протокол HTTP. API — это прикладной программный интерфейс. С его помощью происходит определение, каким образом следует обращаться к программе и какие ответы она обязана предоставлять пользователям. К примеру, оплачиваете футболку в интернет-магазине или покупаете билет в кино — как только вы нажимаете соответствующую кнопку, подтверждающую ваши намерения на оплату, сайт соединяет вас с платежной системой с использованием API этой системы. Но даже если система не имеет никакой интеграции с другими, API все равно используется — для общения внутри системы.  RxJava Библиотека, которая позволяет реализовать принципы реактивного программирования для JVM. Используется для оперирования событиями и потоками данных, комбинируя лучшие идеи шаблонов проектирования Observer (Наблюдатель), Iterator (Итератор) и функционального программирования. В реальной жизни влияние реактивного подхода мы ощущаем, когда на нашем смартфоне высвечивается сообщение о новом посте человека, которого мы фолловим в социальных сетях или когда нам приходит уведомление о новом сообщении из мессенджера. То есть, вместо того, чтобы каждые 10 секунд лично перезагружать страничку объекта фолловинга или свой мессенджер, мы просто ожидаем уведомления о новом посте, занимаясь своими делами. Это очень полезная опция, позволяющая не только экономить наше время, но и упрощающая нагрузку на сервер. Куда без RxJava в мобильную разработку на Java? Retrofit 2 Популярная библиотека для сетевого взаимодействия — типобезопасный HTTP-клиент для Android и Java. Позволяет легко получить и загрузить JSON (либо иные структурированные данные) через веб-сервис на основе REST. Для работы с HTTP-запросами в Retrofit используется библиотека OkHTTP. Dagger 2 Фреймворк для работы с зависимостями в Java и Android. Позволяет уменьшить количество шаблонного кода, структурировать зависимости, упрощает работу при большом количестве зависимостей, а также позволяет делать код более читабельным. SQLite Structured Query Language (SQL) — декларативный язык структурированных запросов, разработанный для взаимодействия с базами данных. Особенностью SQL является то, что он лишь описывает необходимые компоненты и желаемые результаты, не указывая, как именно эти результаты должны быть получены. Любое ПО подразумевает работу с данными, будь то обыкновенная процедура приема данных от сервера (например, скачивание файлов) либо внесение в БД информации о новом пользователе, который только зарегистрировался — умение работать с данными одинаково важно во всех сферах разработки. Исключением является только FrontEnd. Также, изучите одну из систем управления базами данных (СУБД). В Андроид разработке по умолчанию используется SQLite. Благодаря своей компактности, легкости и надежности, эта СУБД идеально подходит для разработки в электронных устройствах и программах, где стратегическое значение имеет оперативная память. XML Extensible Markup Language - расширяемый язык разметки, с помощью которого можно структурировать и хранить данные для удобства их дальнейшей обработки. XML хорошо масштабируем, сочетает в себе простой и удобный синтаксис, а также базируется на кодировках Юникод для представления содержания документов. Также, в Андроид разработке XML используется для создания интерфейса посредством объявления элементов пользовательского интерфейса и задания их расположения. UI/UX дизайн UI/UX (User Interface — “интерфейс пользователя”, User eXperience — “опыт пользователя”) дизайн — это проектирование различных пользовательских интерфейсов, в которых удобство использования (UX) настолько же важно, как и внешний вид (UI). Android девелопер в ходе создания приложений также занимается и разработкой внешнего вида приложения, а потому, должен знать, как реализовывать интерфейс, который принесет юзеру максимальный комфорт во всех аспектах использования. Обычно в UI/UX разработке под Андроид используют Material Design — стиль графического дизайна интерфейсов программного обеспечения и приложений, разработанный компанией Google, делающий уклон на естественность графической составляющей. Для работы необходимо использовать инструменты Material Components for Android.  Шаблоны проектирования Паттерны (они же шаблоны) являют собой архитектурные конструкции, описывающие общепринятые способы решения задач, которые часто возникают в ходе проектирования программного обеспечения. Всего существует более двух десятков шаблонов, однако разработчику нет необходимости владеть ими всеми. Достаточно изучить самые популярные. Алгоритмы и структуры данных Понимание алгоритмов и структур данных — обязательное требование, которому должен соответствовать каждый программист. Это необходимый фундамент, который учит разработчика писать хороший исходный код через подбор оптимальных формы представления информации и последовательности действий. Изучив структуры данных, вы будете уметь управлять уровнем сложности своих программ, делая их более доступными для понимания, а также разрабатывать приложения с высокой производительностью, которые будут рациональнее взаимодействовать с памятью. Знание алгоритмов позволит вам создавать сложные конструкции для эффективного решения широкого спектра задач на Java и Kotlin. Unit тестирование Вид тестирования, который берет на себя программист, а не тестировщик. Его основная идея заключена в написании тестов под каждую нетривиальную функцию либо метод. Цель Unit (модульного) тестирования — изоляция отдельных частей программы, чтобы продемонстрировать, что по отдельности они являются работоспособными. Таким образом происходит проверка кода на регрессию, а вместе с этим — соответствующее обнаружение ошибок. Архитектурные шаблоны В зависимости от предпочтений работодателя, от вас могут потребовать знание одного или нескольких архитектурных паттернов. Это шаблоны наивысшего уровня, которые определяют архитектуру всей программной системы. Самыми популярными являются MVC (Model-View-Controller), MVVM (Model-View-ViewModel), MVP (Model-View-Presenter), Clean Architecture. Git & GitHub Git — это популярная система контроля версий, позволяющая вести историю разработки проекта с возможностью доступа к каждой сохраненной версии. Одним из самых известных антагонистов Git является SVN — централизованная система, в отличие от децентрализованной Git. Также, в работе вам пригодится и сервис онлайн-хостинга проектов, использующий систему контроля версий. В данном случае это GitHub. В паре с Git он позволяет разработчикам сохранять свой код онлайн, а затем взаимодействовать с другими разработчиками в разных проектах. Данные системы позволяют команде программистов работать над одним проектом одновременно, сохраняя внесенные изменения, а также отслеживать выполнение задач каждым членом группы. Google Play Магазин приложений, в котором можно размещать и скачивать приложения под Андроид. Умение его использовать — обязательно. Google Play имеет очень строгий набор политик, которым должно соответствовать ваше приложение. К слову, за аккаунт Android разработчика необходимо один раз раскошелиться на $25. Зато это дешевле, чем за аккаунт iOS девелопера — там с вас будут брать дань каждый год денежную сумму в размере $99.  Английский язык Наверное, единственный язык, которым обязаны владеть все разработчики без исключения. Его вы будете использовать во время поиска ответов как во время учебы, так и во время работы, ведь большинство новых сведений о технологиях, курсы, учебные и справочные материалы появляются в первую очередь на английском. Для работы в команде разработчиков обычно знаний языка на уровне чтения технической документации и комментирования кода вполне достаточно, однако если вы планируете вести переговоры и переписку с иностранным заказчиком, ваш уровень должен быть выше.   Как стать Android разработчиком   Как вы заметили, Android девелоперы должны знать множество различных технологий. Сейчас очень много разработчиков данного направления, но действительно хороших очень мало. Поэтому и требования к кандидатам высоки. Если вы пройдетесь по ресурсам поиска работы, то наверняка отметите, что вакансий Android Developer уровня Junior не так много, как хотелось бы, а потому за место под солнцем придется побороться. Давайте перейдем к советам касательно того, как сделать старт в Андроид разработке и начать “набирать массу”. В университетах никто не обучит вас искусству разработки на Android, поэтому вы можете: Учиться самостоятельно — по книгам или видео курсам. Записаться на соответствующие курсы для максимально эффективного обучения специальности. Второй вариант является лучшим, поскольку предусматривает более высокий уровень дисциплинированности на всем пути обучения, а также структурированную подачу необходимой информации, которой удобно пользоваться и которая отвечает современным требованиям рынка. Если вы выбираете обучение по видео курсам, то прежде всего определите подходящую для вас образовательную онлайн-платформу. Мы рекомендуем сделать выбор в пользу ITVDN. Почему именно эта платформа? Давайте мы познакомим вас с преимуществами обучения на ITVDN. ITVDN — образовательная онлайн-платформа, содержащая полноценные программы обучения по 12 самым популярным специальностям. В каталоге ITVDN свыше 180 видео курсов по различным языкам программирования и информационным технологиям. Учебная программа каждой специальности содержит:  тщательно подобранный пакет видео курсов; план обучения с нуля до уровня специалиста, который вы можете адаптировать под свой уровень; Интерактивный Тренажер навыков для формирования навыков написания кода; учебные материалы, исходники программного кода, опорный конспект, презентации к урокам; доступ к Форуму, где каждый учащийся может общаться с другими студентами, тренерами и единомышленниками; возможность персональной консультации с тренером согласно выбранному пакету подписки; возможность проходить тестирование для подтверждения знаний, полученных в результате прохождения видео курса; электронный сертификат об окончании курса после успешного завершения тестирования. Все видео курсы записываются опытными разработчиками, которые проходят соответствующую сертификацию, чем подтверждают свое мастерство владения той или иной технологией. Наши преподаватели работают в IT и в курсе всех современных тенденций в своей сфере разработки. Знакомство со специальностью мы рекомендуем начать с просмотра бесплатных вебинаров по специальности Android Developer, в частности, с одноименного вебинара Евгения Мыцы Как стать Android разработчиком, в котором отражены все самые актуальные тренды и требования. Если вы заинтересованы в изучении специальности Android Developer на ITVDN, у нас есть отличное предложение для вас. Наш образовательный портал содержит полноценную программу обучения Android разработке. Переходите по ссылке и делайте шаг навстречу желаемой профессии!  Какой бы способ обучения вы не выбрали — вначале нужно изучить язык программирования Java и довести владение им до высокого уровня. После каждой пройденной темы нужно решать практические задачи, чтобы закрепить полученные знания. В этом вам может помочь интерактивный тренажер от ITVDN, с помощью которого вы сможете проверить ваше владение навыками написания кода на Java. Продолжайте обучение и изучайте те технологии, которые мы перечислили в данной статье. Очень желательно, чтобы у вас был наставник, который мог бы следить за вашим прогрессом, отвечать на возникающие вопросы, давать полезные советы. Это может быть как преподаватель на ITVDN, так и один из ваших знакомых, который занимается Андроид разработкой и готов взять под свое крыло юного протеже. Знание английского на уровне не ниже Intermediate обязательно. Оно вам понадобится для комфортного поиска информации по Java, Kotlin и другим технологиям в интернете. Если ваши знания английского недостаточны как минимум для чтения технической литературы — обязательно подтяните их при помощи различных курсов либо интернет-материалов свободного пользования. Изучите Git, начните делать свой небольшой проект и опубликуйте его на GitHub — это даст вам ценный опыт работы с распределенной системой управления версиями и позволит проверить свои навыки в решении реальной задачи. Несколько хороших проектов, и полноценное портфолио готово. Не забывайте о Google Play, ведь именно сюда Android разработчики выкладывают готовый к использованию продукт. Актуальную информацию касательно языков и технологий, которыми необходимо владеть Android разработчику, вы можете узнать из нашего вебинара “Как стать Android разработчиком”, перейдя по ссылке. Резюмируя Android разработчик — специалист, который занимается созданием ПО под различные устройства — смартфоны, планшеты, ноутбуки, нетбуки и прочие девайсы, в основе которых лежит ОС Android. Востребованность этого разработчика очень высока, а на настоящих профессионалов то и дело ведут охоту HR-ы и рекрутеры. Изучайте все необходимые языки и технологии, практикуйтесь, а также всегда подпитывайте интерес к вашей будущей профессиональной деятельности. Не забывайте следить за новостями в мире Android. Просматривайте в YouTube видео, посвященные данной сфере разработки и впитывайте новую информацию. Для дополнительных очков мотивации подпишитесь на известных Андроид девелоперов. Пробуйте посещать различные мероприятия, посвященные разработке под Андроид, находите единомышленников и поддерживайте активность в их среде. Главное — быть целеустремленным и иметь желание развиваться в IT-сфере. Не останавливайтесь ни перед чем и тогда вас обязательно настигнет успех! Желаем вам побед в обучении! Обогащайтесь новыми знаниями и скиллами на ITVDN!

Создания простого чата Для начала создадим простой чат с помощью 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 подошла к концу. Это ещё не конец, это только начало. Есть ещё достаточно всего для изучения и улучшения.

Що таке патерн (шаблон) проєктування. Коли використовують шаблони. Якими бувають патерни проєктування. Породжуючі. Структурні. Патерни поведінки. Як обрати шаблон? Висновки. Програмісти-початківці завжди приходять до точки, коли їхній код перетворюється на “спагеті”. Його важко читати, він містить масу самоповторень, зайвих функцій, а додавання нового функціоналу перетворюється на десяте коло пекла. Один із найкращих засобів запобігання цьому – використовувати патерни проєктування (Design Patterns). Чи є це срібною кулею, які переваги та недоліки патернів існують, і які з них необхідно знати розробникам? Відповіді розбираємо нижче. Що таке патерн (шаблон) проєктування? Патерни – це типові архітектурні рішення проблем, котрі часто зустрічаються під час розроблення ПЗ. Їхня інша назва – шаблони, і що цікаво – людство дуже часто оточує себе шаблонами у повсякденному житті: однакові гнізда розетки та форми вилок у приміщеннях – універсальне рішення для електроживлення; виделки та ложки – інструменти споживання майже будь-якої їжі; чашки – ємності для розміщення будь-якої рідини і так далі. Людина завжди прагне спростити традиційну діяльність, і це не могло обійти стороною програмування. Ідеї створення універсальних правил для якісної розробки існували ще до 90-х років минулого століття, але дійсно проривною стала праця "Design Patterns: Elements of Reusable Object-Oriented Software" (1994) авторства Еріха Ґамма, Річарда Гелма, Ральфа Джонсона та Джона Вліссідеса, які іменують себе як "Банда чотирьох" (Gang of Four, GoF). У книзі описано 23 патерна та їхнє застосування в об'єктно-орієнтованому дизайні. Ця праця стала фундаментальною і тепер патерни gof складають кістяк багатьох обговорень якісного коду. Коли використовують патерни В розробці шаблони використовують при необхідності приведення коду до наступних критеріїв: Читабельність – інші розробники мають без складнощів розуміти написане. Масштабованість – легкість у створенні нового функціоналу. Підтримуваність – оновлення кодової бази має проходити якомога плавніше. Також вони здатні підвищити швидкість і продуктивність розробника – патерни це дійсно дозволяють. Вони гарно справляються і з наступними задачами: зменшення кількості потенційних помилок та вузьких місць; спрощення рефакторингу; зменшення технічного боргу; покращення комунікації девелоперів з іншими програмістами, проєктними менеджерами, власниками тощо. Необхідність використати шаблони проектування зростає разом зі збільшенням кодової бази, особливо при комерційному розробленні – коли створюване ПЗ має приносити прибуток. Важливо пам’ятати, що використання патернів інколи є геть недоречним. Подекуди воно може значно ускладнити читабельність, громіздкість і масштабованість коду. Наприклад, нескладний функціонал, який нечасто використовується і займає мало місця в коді, не потребує pattern-втручання. А от репетативний код, що вирішує класичні задачі (сортування, перебір даних тощо) – ідеальний претендент на застосування шаблону. Аби не помилитися спершу з’ясуйте контекст вашої проблеми, а вже потім обирайте патерни програмування, які найкраще задовольняють вимогам. Якими бувають патерни проєктування У своїй книзі GoF виділяють три великі сімейства: Сімейство Короткий опис Породжуючі патерни або Creational Patterns Надають найкращі способи створення об'єктів. Вони абстрагуються від процесу конкретизації і роблять вашу систему незалежною від створення, компонування та представлення її об'єктів. Популярні приклади: “Абстрактна фабрика” (Abstract Factory), “Одинак” / “Одиночка” (Singleton), “Прототип” (Prototype), “Фабричний метод” (Factory Method). Структурні патерни або Structural Patterns Фокусуються на композиції об’єкту. Допомагають переконатися в тому, що зміна частини системи не потягне за собою необхідність змін в інших її складових. Популярні приклади: “Проксі” (Proxy), “Адаптер” (Adapter), “Компонувальник” (Composite), “Фасад” (Facade). Патерни поведінки або Behavioral Patterns Зона відповідальності – алгоритми та обмін інформацією між об’єктами. Популярні приклади: “Відвідувач” (Visitor), “Ітератор” (Iterator), “Ланцюжок обов’язків” (Chain of Responsibility), “Стратегія” (Strategy). Розглянемо більш детально деякі з них. Породжуючі Породжуючі патерни – це надійні помічники у створенні об’єктів таким чином, аби в майбутньому з ними було максимально легко працювати. Дамо короткий опис деяких шаблонів: Патерн Одинак / Сінглтон забезпечує наявність лише одного екземпляру класу з глобальною точкою доступу. Singleton поширений в задачах конфігурацій або логування в застосунках, де потрібен єдиний контрольований доступ. Шаблон Прототип дозволяє створювати нові об'єкти шляхом копіювання існуючих екземплярів. Використовується Prototype в ситуаціях, коли створення об'єкта надто дороге, наприклад, при клонуванні складних або ресурсоємних об'єктів. Фабричний метод визначає інтерфейс для створення об'єктів, але дозволяє підкласам самостійно визначати тип створюваних об'єктів. Fabric Method корисний у багатофункціональних застосунках, де класи повинні мати можливість вибирати тип об'єктів, наприклад, при роботі з різними форматами документів, системами онлайн платежів тощо. Абстрактна фабрика визначає інтерфейс для створення сімейств пов'язаних об'єктів без вказівки їх конкретних класів. Використовують Abstract Factory для створення різних компонентів інтерфейсу користувача, які повинні працювати разом і забезпечувати єдиний стиль (світла / темна тема вебсайту тощо). Розглянемо приклад на патерні Singleton. Уявіть собі просту програму – музичний плеєр. Він дозволяє користувачам відтворювати музичні файли. Однак водночас має працювати лише один екземпляр плеєра – можливість відкриття декількох одночасно повинна бути недоступна. Цього можна досягти за допомогою шаблону Singleton. Простий приклад коду мовою C#: public class MusicPlayer {             private static MusicPlayer _instance;             private MusicPlayer()             {              // Ініціалізуємо музичний плеєр (наприклад, завантажуємо плейлисти)             }             public static MusicPlayer Instance             {             get             {             if (_instance == null)             {                        _instance = new MusicPlayer();             }             return _instance;             }             }             public void PlaySong(string songPath)             {             // Запустити пісню             }             public void PauseSong()             {             // Поставити на паузу             }             public void StopSong()             {             // Зупинити відтворення пісні             } } // Отримуємо екземпляр MusicPlayer MusicPlayer player = MusicPlayer.Instance; // Використовуємо функціонал MusicPlayer player.PlaySong("C:\\Users\\yourUsername\\Music\\mySong.mp3"); player.PauseSong(); player.StopSong(); Щоразу як в різних ділянках проєкту вам треба буде створювати екземпляр плеєру для відповідної взаємодії, ви завжди працюватимете лише з одним і тим самим екземпляром, уникаючи дублікації. Якщо ви програмуєте мовою сі шарп, детально розібрати популярні патерни проєктування C# з прикладами ви можете за посиланням. Структурні З короткого опису в таблиці легко дійти висновку, що структурні патерни дозволяють сформувати надійну, масштабовану та підтримувану архітектуру проєкту. Коротке знайомство: Проксі забезпечує об'єкт-посередник для контролю доступу до іншого об'єкта. Зазвичай шаблон Proxy використовують для реалізації “лінивого” завантаження, коли об'єкт створюється або ініціалізується лише при зверненні до нього (наприклад, завантаження картинок з високою роздільною здатністю). Адаптер дозволяє об'єктам з несумісними інтерфейсами працювати разом. Застосовується патерн Adapter для інтеграції нових компонентів в існуючу систему без зміни її коду. Підходить для використання нової бібліотеки у старому застосунку. Компонувальник використовується для ієрархічного компонування об'єктів для подальшої роботи з ними як з єдиним об'єктом. Використовується для створення деревоподібних структур, як-от файлові системи або GUI, де кожен вузол може бути як простим, так і Composite об'єктом. Фасад (Facade) надає спрощений інтерфейс для взаємодії зі складною системою або набором класів. Він зменшує складність роботи з підсистемами і надає користувачам єдиний вхідний інтерфейс для виконання рутинних операцій. Вивчити саме структурні патерни проєктування C# (з прикладами) ви можете за посиланням. Поведінкові Патерни поведінки в першу чергу визначають зв’язки між об’єктами і те, як вони здійснюють обмін інформацією. Наприклад: Патерн Відвідувач (Visitor) дозволяє додавати нові операції до об'єктів без зміни їхніх оригінальних класів. Використовується для взаємодії з об’єктами зі складною структурою, коли внесення додаткової логіки в оригінальні класи невиправдано ускладнює код. Ітератор / Iterator надає зручний механізм послідовного та простого доступу до елементів колекції, незважаючи на складність її побудови. Даний патерн поведінки популярний при обході елементів контейнерів, як-от списки або масиви – він надає універсальний інтерфейс для різних типів колекцій. Ланцюжок обов’язків або ж патерн Chain of Responsibility дозволяє передавати запит ланцюжком обробників, поки один з них не обробить запит. Незамінний при обробці запитів на сервері, де кожен обробник може передати запит наступному обробнику в ланцюжку: перевірка при авторизації на сайті, оброблення подій у GUI тощо. Для входу в патерни проєктування книга від Gang of Four буде гарною точкою відліку. Ви познайомитеся з класикою та академічним розкриттям теми, використовуючи патерни gof. Якщо ж ви хочете збагатити свої знання шаблонів, але віддаєте перевагу мові Java, рекомендуємо відео курс “Патерни проектування Java”. Як обрати патерн? Спочатку ви маєте проаналізувати задачу – для більшої зрозумілості виконайте її декомпозицію, розбивши на декілька складових. При цьому використовуйте системний підхід: прорахуйте, як ваше рішення вплине на весь проєкт, які елементи воно зачепить зараз, і який вплив воно матиме на додавання нового коду. Якщо ви вже працюєте в ІТ-компанії, ваші колеги, тімлід або архітектор можуть підказати вам доцільність використання того чи іншого патерну, розкрити нюанси вже існуючої архітектури, кодового стилю та багато іншого. Лише після ретельного аналізу можна переходити до підбору шаблону, зважаючи на усі переваги та недоліки. До речі, в цих задачах гарними помічниками будуть безкоштовні AI-асистенти на кшталт ChatGPT, Gemini та ін. Також не забувайте про використання інших методик покращення кодової читабельності, масштабування й чистоти: SOLID принципи – вони регламентують 5 основних засад створення структурованого, якісного коду. Нещодавно ми проводили вебінар, на якому розбирали кожен принцип в деталях, запрошуємо до перегляду! А якщо вас цікавить прикладний характер SOLID принципів на Java, можете пройти даний відео курс. GRASP (General Responsibility Assignment Software Patterns) – патерни для об’єктно-орієнтованого проєктування. Вони не мають вираженої структури і носять більш абстрактний характер, аніж патерни gof. DRY (Don’t Repeat Yourself) – головна ідея даного принципу полягає у створенні коду, який не матиме дублікацій в проєкті. KISS (Keep It Simple, Stupid) – регламентує написання якомога простішого коду, аби його можна було легко читати і розуміти. Рефакторинг – повернення до вже написаного коду з метою його покращення без зміни функціональності. Інші техніки, що залежать від проєктів. Висновки Патерни грають ключову роль в сучасному розробленні. Вони акумулюють в собі найкращі практики створення кодової бази таким чином, аби досягнути максимальної легкості та ефективності розроблення, особливо на великих проєктах. Звісно, не завжди їхнє використання є доречним – потрібно аналізувати задачі і продумувати наслідки застосування того чи іншого шаблону, аби не отримати величезну валізу без ручки. Розвивайте вашу експертизу в області патернів – це win-win стратегія. З одного боку перед працедавцями ви постанете як досвідчений та висококваліфікований спеціаліст, а з іншого – ваші програмні рішення матимуть елегантний характер і відзначатимуться легкістю в читанні, підтримці та масштабуванні. Чи використовуєте ви патерни в своїй розробницькій діяльності? Можливо, тільки вивчаєте? Залишайте в коментарях ваші відповіді!

Здравствуйте! Друзья, в этот раз мы подготовили для вас подборку лучших вебинаров от ITVDN по направлению .NET. В рейтинг вошли как познавательные вебинары с актуальной информацией, так и вебинары, ориентированные на прокачку ваших навыков создания кода. Давайте приступим к их рассмотрению. Как стать C# разработчиком в 2021 году? .NET или .NET Core? Автор — Дмитрий Охрименко, сертифицированный специалист Microsoft (MCTS, MCPD, MCT). Тренер-консультант, эксперт по построению распределенных и веб-ориентированных приложений. Автор курсов по .NET и FrontEnd разработке на ITVDN C#/.NET разработка — это очень перспективное направление в IT, жизнь которому дала всемирно известная компания MIcrosoft. Если вам интересна данная сфера и вы хотите сделать в ней профессиональный старт, этот вебинар будет для вас как нельзя кстати! Цель вебинара — помочь вам разобраться с главными аспектами данной специальности, опираясь на тенденции развития IT рынка, правильно расставить приоритеты и помочь спланировать ваше обучение и карьеру по направлению C# / .NET.  На мероприятии рассмотрены следующие важные вопросы: Есть ли смысл начинать учить C# в 2021 году? Что такое .NET Framework и что такое .NET Core? Что учить и в какой последовательности? Карта специальности Сравнение веб приложения на .NET и на .NET Core Полезные ресурсы для обучения и развития Вопросы и ответы Как стать Full-Stack разработчиком? Автор — Виталий Емец, FullStack Developer, Microsoft Certified Specialist Full-stack разработчик (произносится “фулл стек”) — это мастер на все руки в мире веб-разработки. Ему под силу реализовать как клиентскую, так и серверную сторону приложения, которыми обычно занимаются FrontEnd и BackEnd разработчики раздельно друг от друга. Таким образом, в некоторых случаях Full-Stack специалист может даже в одиночку вести проект от начала до конца. Какими навыками необходимо обладать, чтобы достичь такого уровня мастерства, и какой инструментарий должен быть у истинного Full-Stack разработчика? В чем преимущества данной профессии и какие у нее подводные камни? Каким образом Full-Stack разработка связана с технологиями C#/.NET? Все ответы на ваши вопросы вы получите на вебинаре Виталия Емца. Что нового в C# 8, 9? Автор — Алексей Никифоров, Software Engineer & Business Analyst at HYS-Enterprise C# — это универсальный объектно-ориентированный язык, который является мощным инструментом создания программного обеспечения с широкой областью применения. При столь высокой функциональности он является достаточно несложным в изучении и отлично подходит тем, кто собирается сделать первый шаг навстречу программированию. Данный вебинар предусматривает погружение в последние нововведения языка С#. Основной упор будет сделан на коммуникацию и обсуждение, предполагая, что участники вебинара — разработчики C#, которые следят за новинками данного языка. Автор пройдется по новым возможностям языка и обсудит, как эти изменения могут быть использованы с целью написания более выразительного и чистого кода. Алгоритмы и структуры данных в .NET Автор — Ярослав Кучук, .NET Developer На вебинаре рассматривается вопрос фундаментальной алгоритмической подготовки – от математического обоснования мощности алгоритма до стандартных алгоритмов и структур данных. Базовые алгоритмы реализованы на C#; автор анализирует их с точки зрения их мощности. На вебинаре рассматриваются следующие темы: Понятие алгоритма Сложность алгоритма и способы ее измерения Основные структуры данных Стек Очередь Связанный список Хеш-таблица Бинарные деревья поиска Красно-черные деревья Базовые сортировочные алгоритмы Базовые поисковые алгоритмы 5. Безопасность .NET веб-приложений: частые ошибки и методы борьбы с ними Автор — Алексей Голубев, Lead Software Engineer в компании SoftServe Цель вебинара — обратить внимание разработчиков на проблемы в сфере безопасности веб приложений, которые можно устранить еще на этапе разработки. На вебинаре автор рассказывает о наиболее частых ошибках в приложениях, уязвимостях, связанных со сторонними библиотеками, и то, как их можно избежать. Содержание вебинара: Авторизация. Кражи сессий и стойкости паролей. Человеческий фактор. Что разработчик может сделать не так и на что обращать внимание. Инъекции. Какие встречаются чаще и чем опасны WYSIWYG редакторы. Рандомизация. Случайности не случайны. Вебинар подойдет .NET разработчикам — приветствуются специалисты любого уровня. Будет много практической информации которую можно применить как на этапе разработки, так и на этапе проектирования систем. 6. Техники тестирования для C# разработчиков. Уровень Advanced Автор — Юрий Науринский, Senior Fullstack .NET Software Developer На вебинаре будет рассмотрено 3 «продвинутые» техники тестирования, которыми должен владеть опытный разработчик. Будет немного теории, примеры и ответы на вопросы. Все примеры на языке С#. Ниже перечислены техники, которые рассматриваются на встрече. Property based testing — техника тестирования, применяемая для проверки свойств функции, программы, системы. Ключевая идея в том, что описываются не заранее заданные ожидаемые значения, а свойства, которым должны удовлетворять тестовые примеры. Дальше, тестовые примеры генерируются случайным образом, постоянно проверяя, удовлетворяют ли они вышеописанным свойствам. Performance testing — одна из самых важных техник тестирования, которую желательно знать каждому разработчику, применяемая для ответа на вопрос, насколько быстро работает функция, программа, система, а также отдельные её компоненты. Также, может отвечать на вопрос, сколько памяти потребляет функция, программа, система. Load testing — техника тестирования, о которой желательно иметь представление каждому веб-разработчику; применяется для измерения поведения системы под различной нагрузкой, в частности нормальной и пиковой. Могут измеряться время ответа, пропускная способность, прочие бизнес-ориентированные метрики. 7. Docker для .NET разработчиков Автор — Алексей Никифоров, Software Engineer & Business Analyst at HYS-Enterprise Docker — это популярная платформа, которая используется при разработке, тестировании и развертывании программного обеспечения. Она позволяет сократить время между написанием кода и поставкой его на “production”. За последние годы популярность Docker’a сильно возросла и данная технология стала индустриальным стандартом в сфере контейнеризации программных решений. Docker может быть полезен очень широкому спектру специалистов: разработчик, тестировщик, администратор, релиз-менеджер и т. д. Несмотря на то, что Docker написан на Go и использует особенности ядра Linux, .NET разработчики, которые традиционно ведут разработку под Windows, могут получить огромную пользу от использования Docker’a на самых разных уровнях. Знание данного инструмента повысит вашу продуктивность и даст конкурентное преимущество на рынке труда. Вебинар будет полезен специалистам начального уровня, которые всегда хотели попробовать Docker. Ознакомление будет основано на .NET Core приложении. По завершению, вы смело будете ориентироваться в основных концепциях и инструментах и сможете успешно начать свою путь изучения Docker’а. 8. F# и функциональное программирование для C# разработчиков Автор — Альберт Ташу, .NET Developer, тренер-консультант учебного центра CyberBionic Systematics, а также сертифицированный специалист Microsoft С# — это мультипарадигменный язык, и с каждым релизом он приобретает всё больше возможностей, направленных на применение функционального программирования, которое является одной из самых востребованных парадигм в современной разработке программного обеспечения. Для того, чтобы легче было разобраться в этой парадигме, будет рассмотрен очень интересный язык платформы .NET — F#. Помимо этого, будут затронуты основные принципы функционального программирования и их применение при разработке на языке C#. Содержание вебинара: Введение в язык F# Основы функционального программирования Применение функциональных подходов при разработке на C# Рефакторинг проекта на С# 9. Создание игры “Space Invaders” на C# с нуля Автор — Армен Маилян, C#/.NET Developer, тренер-консультант CyberBionic Systematics Какой самый лучший способ изучить что-то новое? Конечно же, превратить это в игру! Этот способ хорош и в обучении программированию. Начните изучение языка C# путем создания консольной компьютерной игры. Обещаем минимум скучной теории и максимум практики. Будет интересно! Кому это будет полезно? Новичкам. Никогда не программировали? Это не повод отказываться от нового крутого опыта. У вас есть шанс сделать свою собственную игру на C# и получить опыт практического применения данного языка программирования, а также попробовать себя в роли разработчика игр. Начинающим C# разработчикам. Вы сможете углубить и применить на практике свои знания языка C# вместе с наставником. Чему вы научитесь: Разрабатывать простую игру на языке C#. Разбивать большую задачу на отдельные этапы и последовательно их реализовывать. Применять на практике процедурный и объектно-ориентированный подход для написания программ на С#. Понимать и применять основы алгоритмирования. Применять знания основ ООП для создания полноценной программы. Использовать функционал .NET Framework. 10. Создание эволюционной игры Conway's Game Of Life на C# + WPF Автор — Юрий Науринский, Senior Fullstack .NET Software Developer На вебинаре будет рассмотрен Game Of Life — клеточный автомат, придуманный английским математиком Джоном Конвеем в 1970 году — и его реализация с помощью языка программирования C# и фреймворка WPF. Прежде чем реализовывать игру, необходимо чётко определить задачу и постановку правил самой игры. Дальше будет рассмотрено, как реализовать саму логику игры без привязки к какому-либо фреймворку. Следующий логичный шаг после того, как была реализована основная логика игры — это рассмотрение привязки логики к фреймворку WPF и придание «жизни» игре. В конце вебинара автор расскажет, какие техники тестирования можно применить для гарантии корректности получаемого результата логики игры. Данный вебинар будет интересен C# разработчикам, которые желают углубиться в разработку приложений с использованием технологии WPF, а также хотят рассмотреть с практической точки зрения достаточно интересную и известную математическую игру.   Изучайте .NET разработку на ITVDN!

Code Wars CodinGame Cyber Dojo CodeCombat CodeMonkey CSS Diner Flexbox Froggy Flexbox Defense Ruby Warrior Untrusted Robocode CheckIO Elevator Saga Вывод Когда начинали писать код многие из современных гуру программирования, их возможности в обучении были ограничены – книги, справочники, наборы технической документации и спецификаций. Со временем ситуация улучшилась. Начали появляться  различные онлайн ресурсы.  Появилось множество видеоуроков. Родилось и набрало силы новое направление в обучении – онлайн обучение. Онлайн обучение прошло долгий путь в последние несколько лет. Появились интерактивные курсы, в сети Интернет выложено множество видеоуроков, различные онлайн-уроки проводятся с квалифицированными тренерами по множеству направлений. Одним из новых и очень увлекательных способов интерактивного онлайн обучения программированию стали игры, в которых нужно выполнять задания с использованием различных языков программирования. Конечно, одно только написание кода в играх не сделают из вас профессионального разработчика, однако такие игры могут стать действительно полезным способом отработать навыки  и поддержать интерес к обучению. Игры увлекают. Вы внезапно обнаружите, что потратили несколько часов на закрепление своих навыков программирования, даже не осознавая этого. 1. Code Wars Code Wars поможет вам улучшить ваши навыки написания кода, соревнуясь с другими разработчиками. Игра предлагает большое разнообразие языков, включая JavaScript, Swift, PHP, Python, Ruby и Haskell. Сначала вам нужно будет подтвердить ваши навыки, пройдя базовый тест на понимание языка, который вы хотите практиковать. Особенности игры: браузерная игра, бесплатная игра. Доступные языки интерфейса: Английский. Доступные языки программирования: Clojure, C, C++, C#, Crystal, Dart, Elixir, F#, Go, Haskell, Java, JavaScript, PHP, Python, Ruby, Rust, Shell, SQL, Swift, TypeScript.   2. CodinGame CodinGame предлагает набор бесплатных игр, которые помогут вам в освоении более 25 различных языков программирования, включая C#, Java, Python, JavaScript, Ruby и PHP. Вы можете выполнять игровые практические задания для проверки навыков или посмотреть примеры, объясняющие различные конструкции языка. Одна из особенностей CodinGame заключается в том, что вы можете играть с друзьями или коллегами, а также участвовать в международных соревнованиях по программированию. Материалы игр доступны на английском и французском языках. Особенности игры: браузерная игра, бесплатная игра. Доступные языки интерфейса: Английский, Французский. Доступные языки программирования:  Bash, C, C++, C#, Clojure, Dart, F#, Java, JavaScript, Go, Groovy, Haskell, Kotlin, Lua, Objective‑C, OCaml, Pascal, Perl, PHP, Python2, Python3, Ruby, Rust, Scala, Swift, VB.NET. 3. Cyber Dojo В Cyber Dojo есть практические упражнения и задачи для десятков языков программирования, включая C#, Java, C++, Ruby, JavaScript, PHP, Python и другие. Каждое упражнение предполагает определенную задачу, чтобы дополнить имеющийся код, выполняющий определенную задачу. Несмотря на то, что это не совсем игра, а скорее большой набор интересных задач, это все же отличный способ попрактиковать свои навыки в коде. Особенности игры: браузерная игра, бесплатная игра. Доступные языки интерфейса: Английский. Доступные языки программирования: Assembler, BCPL, Bash, C, C#, C++, Chapel, Clojure, CoffeeScript, D, Elixir, F#, Fortran, Go, Groovy, Haskell, Java, JavaScript, Kotlin, PHP, Pascal, Perl, Python, R, Ruby, Swift, VHDL, assert, VisualBasic, NUnit. 4. CodeCombat CodeCombat ориентирован на учителей и учеников, но играть может каждый. Эта достаточно яркая и увлекательная платформа подойдет для практики в таких языках как Python, JavaScript, CoffeeScript, HTML и CSS. На начальном уровне подземелий вы будете перемещать своего персонажа по различным уровням игры, используя базовые команды. Далее команды усложняются. Можно играть самому, участвовать в соревнованиях и многопользовательских вариантах игр – все это поможет вам не заскучать во время отработки в этой игре полученных ранее навыков программирования. Имеется возможность играть бесплатно, но получить доступ ко всему контенту можно только по платной подписке. Особенности игры: браузерная игра, есть платный контент. Доступные языки интерфейса: Английский, Русский, Украинский и еще 57 языков. Доступные языки программирования: Python, JavaScript, CoffeeScript, HTML и CSS. 5. CodeMonkey CodeMonkey это онлайн игра, которая обучает программированию с использованием CoffeeScript. CoffeeScript – это современный открытый язык программирования, который по своей сути является  просто надстройкой и синтаксическим сахаром для JavaScript. В основном CoffeeScript используется для веб-приложений. В игре пользователи с помощью кода контролируют поведение обезьяны и помогают ей собирать бананы. CodeMonkey предназначен скорее для обучения детей. Однако данная игра подойдет и взрослым, желающим в простой игровой манере закрепить знания языка. Несмотря на относительно детский интерфейс игры, задачи в CodeMonkey затрагивают такие темы языка программирования, как: объекты, вызовы функций, аргументы, циклы, переменные, массивы, цикл for, определение функций, булевые условия, цикл until, if и if-else условия, булевые операторы, события клавиатуры и мыши.   Имеется бесплатная триальная версия и ряд премиум подписок, позволяющих, в частности, учителям подключать учеников для обучения и контроля выполнения заданий. Особенности игры: браузерная игра, триальная версия на 14 дней и платная подписка. Доступные языки интерфейса: Английский, Русский, и еще 16 языков. Доступные языки программирования:  CoffeeScript (JavaScript). 6. CSS Diner CSS Diner - простой, но достаточно увлекательный способ изучения языка CSS. Последовательно проходя 32 уровня, вы в игровой манере сможете познакомиться с основами работы CSS-селекторов. Начиная с простых селекторов по классам  и тэгам  уровни этой бесплатной игры постепенно усложняется, основываясь на том, что вы запомнили на предыдущих уровнях. Под конец вы будете использовать сложные структурные селекторы наподобие и их комбинации. Эта игра будет полезна тем, кто ищет удобный и нескучный инструмент, чтобы попрактиковаться в верстке. Особенности игры: браузерная игра, бесплатная игра. Доступные языки интерфейса: Английский. Доступные языки программирования: CSS. 7. Flexbox Froggy Flexbox Froggy это удобный инструмент для тех, кто уже имеет определенные навыки работы с CSS и хочет на практике, и в интересной манере, изучить основы такой технологии, как CSS Flexible Box Layout Module (или CSS Flexbox).  У Flexbox Froggy достаточно простой интерфейс, с помощью которого вы научитесь основам выравнивания во Flexbox, пока вы помогаете лягушонку Фрогги и его друзьям в их приключениях. Особенности игры: браузерная игра, бесплатная игра. Доступные языки интерфейса: Английский, Русский, Украинский и еще 28 языков. Доступные языки программирования: CSS. 8. Flexbox Defense Flexbox Defense - еще один интересный способ попрактиковаться в навыках работы с Flexbox. Это игра по принципу Tower Defense. В этой игре вы будете с помощью CSS свойств размещать пушки в нужные места вдоль пути, чтобы победить встречные волны врагов. Вы получите нужную практику в интересной интерактивной манере, используя те же команды, что и в Flexbox Froggy. Особенности игры: браузерная игра. Доступные языки интерфейса: Английский. Доступные языки программирования: CSS. 9. Ruby Warrior Если вы хотите изучать язык Ruby, тогда Ruby Warrior - это игра для вас. Управляя персонажем рыцаря с помощью кода на Ruby, вы будете выполнять игровые задачи, сражаться с монстрами и проходить подземелья. В игре есть простые и сложные задания, подходящие вашему уровню владения языком Ruby. Играя в Ruby Warrior вы улучшите ваши знания циклических и условных конструкций, создания и вызова методов. Авторизация в игре происходит через аккаунт Facebook. Особенности игры: браузерная игра, бесплатная игра. Доступные языки интерфейса: Английский. Доступные языки программирования: Ruby. 10. Untrusted Untrusted - это приключенческая игра, которая поможет вам проверить и закрепить ваши знания и навыки JavaScript для решения различных проблем. Вы будете использовать код на JavaScript, чтобы провести доктора Эвала по разным локациям электронной вселенной. Это увлекательная бесплатная игра поможет отработать достаточно сложные навыки применения JavaScript. Особенности игры: браузерная игра, бесплатная игра. Доступные языки интерфейса: Английский. Языки: JavaScript 11. Robocode Robocode  подойдет вам, если вы когда-нибудь интересовались играми с противостоянием различных роботов. Играя в Robocode, вы приобретете и укрепите навыки программирования, создавая виртуальные боевые роботы-танки. Логику поведения этих роботов вы будете прописывать, используя языки Java или C# с помощью вашей IDE. Битвы с такими роботами затем разыгрываются в браузере на экране в режиме реального времени. Особенности игры: бесплатная игра; онлайн игра, но требует установки определенных модулей на ваш ПК. Доступные языки интерфейса: Английский. Языки: Java или C#. 12. CheckIO CheckIO  - это стратегическая игра, которая будет интересна как начинающим, так и уже продвинутым программистам. Вы будете выполнять  задания, которые помогут лучше изучить особенности выбранного языка программирования. Данная игра поможет вам вписать код лучше. Набирая балы за выполнение задания, вы можете также сравнивать свои ответы с ответами других игроков CheckIO. Особенности игры: браузерная игра, бесплатная игра. Доступные языки интерфейса: Английский. Доступные языки программирования: Python, JavaScript. 13. Elevator Saga Elevator Saga поможет вам протестировать ваши знания JavaScript во время решения  проблем, связанных с перемещением лифта и транспортировкой людей наиболее эффективным способом. Начинается задача с перемещения 15 человек, затем задачи становятся сложнее. Особенности игры: браузерная игра, бесплатная игра. Доступные языки интерфейса: Английский. Доступные языки программирования: JavaScript. Для удобства подбора подходящей игры мы собрали их в таблицу: Не всегда только суровая зубрежка и толстые учебники способствуют получению знаний. Обучение в игровой форме – это также один из лучших способов запомнить что-то новое или закрепить уже существующий навык. Вывод Многие из представленных в этом обзоре игр смогут реально помочь Вам улучшить понимание основного инструмента разработчика – языка программирования. Мы включили в этот обзор как игры, полезные при изучении языков программирования, так и те из них, что помогут лучше запомнить конструкции CSS, HTML, SQL. В некоторых играх вы будете выполнять готовые задачи, зарабатывая баллы и играя «против компьютера», некоторые игры позволят вам соревноваться с другими разработчиками в поиске решений чужих задач и предложении встречных задач. Учитесь, играючи и обучайтесь во время игры! Мы надеемся, что наша подборка игр поможет вам в этом. Также всем, кто изучает программирование, мы рекомендуем использовать интерактивный тренажер навыков ITVDN. В тренажере вас ждут задания, которые нужно выполнять, используя навыки программирования. За правильные решения вы будете получать баллы. В случае ошибки, вы сможете воспользоваться подсказками, но за использование подсказок будут сниматься баллы. Итак, ваша задача – выполнить все задания на тренажере, набрав максимальное количество баллов! На ITVDN доступны интерактивные тренажеры по таким языкам программирования и технологиям: HTML5&CSS3 (уровень Starter и Essential) JavaScript (уровень Essential и Advanced) Python (уровень Starter и Essential) Java Starter C# (уровень Starter и Essential) SQL Essential C++ (уровень Starter и Essential) Перейти в Тренажер ITVDN