Суперечки навколо Full-stack Різновиди Full-stack розробників. Стек мов та технологій для кожного Плюси професії Full-stack Developer Мінуси професії Full-stack Developer Як стати Full-stack розробником? Зарплати Full-stack розробників Підсумки Оновлено 9 червня 2023 року Привіт, друзі! Full-stack розробник (вимовляється "фул стек") – це якийсь майстер на всі руки у світі веб-розробки. Йому під силу реалізувати як клієнтську, так і серверну сторону додатку, якими, зазвичай, займаються FrontEnd і BackEnd розробники окремо один від одного. Таким чином, Full-stack спеціаліст здатний одноосібно вести проєкт від початку до кінця. Ще в далеких нульових і раніше не існувало такого розподілу обов'язків між розробниками. Відносна простота ПЗ, що розроблялося, так само як і технології того часу дозволяли тримати процеси, які зараз виконують різні люди, в одних руках. Наприклад, у ті часи IT-фахівець, який називається веб-майстром, і зовнішній вигляд сайту створював, і серверну частину реалізовував, і розміщував сайт на хостингу. Тобто, Full-stack розробники існували і раніше, просто ніхто їх так не називав. Однак IT-сектор не стояв на місці. Вимоги до програмних продуктів зростали, з'являлися нові мови та технології, змінювалися підходи до розробки. Дерево IT почало ставати все більш гіллястим, породжуючи нові спеціальності. Разом із цим професія універсального бійця розбилася на два окремі напрямки, а потім знову відродилася з гордою назвою "Full-stack Developer". Суперечки навколо Full-stack Не все так гладко, як здається на перший погляд. Багато досвідчених програмістів та IT-фахівців вищої ланки не визнають цю посаду за визначенням. "Чому?" — спитаєте ви. Адже раніше були ті самі веб-спеціалісти, які успішно поєднували обов'язки сучасних напрямків — фронту та беку. Чому сьогодні поняття Full-stack викликає суперечки? Поширеною є думка, що Full-stack розробників не існує, а ті, хто такими називаються, насправді не відповідають вимогам цієї спеціальності. Наприклад, Сергій Немчинський — програміст з 20-річним стажем, керівник та власник навчально-виробничої компанії FoxmindEd — в опублікованому відео на YouTube відгукується про Web Full-stack розробників наступним чином (посилання): “В принципі, в ідеалі, Full-stack розробник – це класно та чудово. Проблема в тому, що... Таких немає. Фактично все, що ми маємо на ринку з тих людей, які називають себе Full-stack девелоперами – це приблизно 50% BackEnd девелоперів, які трошки вивчили FrontEnd і вже можуть Angular або React скомпілювати і, відповідно, зібрати-підключити, плюс трошки розуміють у верстанні – навіть не на рівні Junior верстальника. Вони у більшості випадків зробити добре, красиво не можуть ніяк. Максимум, що можуть – зробити так, щоб кнопка натискалася. Або ж Full-stack девелопери – це решта 50% FrontEnd розробників, які трошки вивчили BackEnd; в більшості випадків – якийсь Node.js. Можливо, PHP. Такий розробник мінімально вміє щось підрихтувати, але, знову-таки, говорити про те, що він сяде і напише вам нормальний Full-stack додаток – ні, ні і ще раз ні. (…) Чесно скажу, мені ідея з об'єднанням у Full-stack девелоперів здається, з одного боку, не дуже вдалою, тому що фактично ми отримуємо "ні риба, ні м'ясо". З іншого боку, ринок вимагає – отже, треба. Тому затребуваність у Full-stack девелоперів, за великим рахунком, трохи більша, ніж у чистих BackEnd або FrontEnd розробників. Однак ринок вже усвідомив, що вони (Full-stack розробники) у своїй більшості "ні риба, ні м'ясо", і тому термін "Full-stack" починає пропадати. Тепер просто вважається, що це BackEnd розробник з невеликим знанням фронту і, навпаки, FrontEnd розробник з невеликим знанням однієї з BackEnd мов. Мені здається, що так набагато правильніше”. Інші розробники схиляються більше до того, що Full-stack розробка – це ні що інше, як хитрощі бізнесу. Роботодавець не бажає переплачувати за двох різних фахівців, віддаючи перевагу більш дешевому аналогу, котрий вміє все те саме. По суті, вся суперечка щодо Full-stack розробника зав'язана на скептицизмі. Прихильники міфологічності цієї професії не вірять у існування розробника, здатного добре реалізувати як FrontEnd, так і BackEnd частини, оскільки за обома ховається безліч технологій і мов, а вивчити все і працювати не гірше за фронтендерів і бекендників — практично неможливо. Ті ж, хто займаються Full-stack девелопментом, парирують, вказуючи на велику кількість часу, проведеного за розробкою, в ході чого так чи інакше доводиться заглядати по інший бік барикад і розбиратися в усіх процесах, що супроводжують розробку всього проєкту від і до. Ну а далі справа техніки — вивчаєш необхідні інструменти, практикуєшся і можеш самостійно працювати над цілим проєктом. Звичайно, пізнання у всіх використовуваних мовах і технологіях у Full-stack спеціаліста будуть не такі глибокі, як у вузькоспеціалізованих побратимів по цеху, але зробити повноцінний робочий проєкт з нуля, реалізувавши як BackEnd, так і FrontEnd, йому буде під силу. Різновиди Full-stack розробників Варіацій Full-stack розробників насправді безліч: PHP Full-stack Developer, Node.js Full-stack Developer, Java Full-stack Developer і так далі. Назва, яка стоїть на початку спеціальності, говорить про те, яка мова/платформа береться за основу під час реалізації BackEnd частини. Стек технологій FrontEnd практично завжди однаковий і відрізняється лише використовуваними JavaScript-фреймворками / бібліотеками: Angular, React або Vue.js. А ось бекенд надає набагато більше можливостей для реалізації своїх амбіцій. Ще раз проговоримо, що Full-stack Developer – це розробник, який бере безпосередню участь у всіх етапах розробки веб-додатків: від створення клієнтської частини (візуальна частина + логіка користувача) до реалізації серверної (бази даних, серверна архітектура, програмна логіка). Який стек технологій та мов знаходиться у розпорядженні цього фахівця? Якщо говорити про FrontEnd складову (клієнтська сторона), то вона у всіх приблизно однакова: мова верстання HTML та мова стилів CSS; мови програмування JavaScript та TypeScript; препроцесори SASS та LESS; фреймворк Angular/Vue.js або бібліотека React; технології DOM, AJAX, REST API, знання про інтернет та веб-технології в цілому тощо; навички адаптивного та кросбраузерного верстання. А що потрібно знати full stack розробнику із серверного набору? Тепер розберемося з відгалуженнями в бекенді, які вказують на популярні мови та технології, що використовуються під час реалізації серверної сторони веб-додатків, котрі розробляються. Node.js Full-stack Developer BackEnd складова (серверна сторона) може мати різну начинку, на відміну від FrontEnd. Якщо говорити про Node.js Full-stack розробника, то в якості основної мови виступає JavaScript, а сам стек наступний: платформа Node.js; фреймворки Express.js, Nest.js; пакетний менеджер npm; Web Sockets; розуміння REST API; інші спеціалізовані технології. Java Full-stack Developer Головний акцент робиться на мову програмування Java та пов'язані з нею технології. BackEnd-стек у такого розробника має бути наступним: мова Java + Java Core; веб-сервер Apache; інструменти для комфортної взаємодії з БД – JDBC, Hibernate; веб-сервіси; фреймворк Spring та його популярні модулі (Spring MVC, Spring Boot, Spring REST, Spring Web тощо); ASP.NET Full-stack Developer .NET розробники мають широкий інструментарій для самореалізації у вебі. Як основну мову програмування вони використовують C#. Скарбничка знань BackEnd частини у ASP.NET Full-stack Developer-а повинна містити: мову C#; знання інфраструктури .NET. платформу ASP.NET MVC/ASP.NET Core (Web API); Entity Framework (Core); хмарний сервіс Azure; мову T-SQL; розуміння RESTful API. PHP Full-stack Developer PHP – класична мова веб-розробки. Типовий BackEnd-стек даного розробника відрізняється від інших своєю компактністю. РНР у вебі вже досить давно, а тому йому багато не потрібно; достатньо лише: власне, сама мова PHP; фреймворк Yii2/Symfony/Laravel. Python Full-stack Developer Універсальність Python не знає меж! Не стала винятком сфера веб-розробки. BackEnd-стек Python Full-stack спеціаліста наступний: мова Python; фреймворк Django/Flask; REST API; Web Sockets; навички роботи з ОС Linux та веб-сервером Nginx/Apache (можливо); досвід роботи із хмарними сервісами. Також окрім спеціалізованих технологій, усім Full-stack розробникам необхідно: знати систему керування версіями Git + сервіс для хостингу IT-проєктів GitHub; знати реляційні (SQL) та нереляційні (NoSQL) бази даних, вміти їх проєктувати; розумітися на протоколах HTTP, HTTPS та роботі FrontEnd + BackEnd загалом; вміти оперувати мовою запитів SQL та однією із СУБД – MySQL / PostgreSQL / SQLlite, або однією з NoSQL СУБД (MongoDB, Redis, Cassandra, наприклад); вміти проводити тестування додатків; здійснювати Code Review; використовувати Docker; володіти англійською мовою на рівні Intermediate та вище; знати популярні патерни програмування та вміти їх реалізовувати; мати гарне знання алгоритмів та структур даних. Також від Full-stack спеціаліста можуть вимагати навички мобільної розробки, якщо роботодавець має намір портувати веб-додаток на відповідні платформи. Як бачите, список необхідних мов і технологій для створення гарної серверної складової веб-додатків є досить значним. У наступному розділі ми розберемося, які переваги та недоліки чатують на тих, хто таки має намір пов'язати свою професійну діяльність з Full-stack розробкою. Плюси професії Full-stack Developer Можливість самостійно вести цілий проєкт Очевидна перевага розробника даної спрямованості полягає в об'єднанні двох течій – FrontEnd та BackEnd – в одному фахівці. Крім того, що такий професіонал здатний реалізувати обидві частини веб-додатку, він може безпроблемно налаштувати їхній взаємозв'язок, що є частим каменем спотикання між фронтендниками та бекендниками. Тим самим усуваються непорозуміння і протиріччя, які неминуче виникли б між декількома розробниками, які працюють над одним і тим самим продуктом. В'ячеслав Лобода, Senior Full-stack PHP Developer, про свою професію відгукується наступним чином: “Часто при вирішенні завдань веб-розробки виникає необхідність вносити редагування одночасно і до FrontEnd, і до BackEnd. Для цього можна найняти двох різних спеціалістів чи одного Full-stack розробника. Останній варіант дозволяє заощадити час на комунікацію” Даний відгук і всі наступні взяті зі статті на dou.ua "Кар'єра в IT: посада Full-stack розробник". Висока швидкість розробки, можливість приймати власні рішення, мінімальні витрати часу на зайву комунікацію Full-stack розробник – це вже фахівець досить високого рівня, який здатний приймати певні самостійні рішення, не витрачаючи час на зайві обговорення та узгодження з іншими розробниками, адже проєкт цілком перебуває під його крилом. “Подобається, що можу створювати веб-додатки одноосібно, менше затримок під час роботи. Наприклад, коли працюєш як FrontEnd і потрібно, щоб BackEnd віддавав нові дані, ти просиш колегу внести зміни, чекаєш. Full-stack розробнику чекати ні на кого не потрібно. Взяв і зробив як слід” – Геннадій Догаєв, Web Full-stack Developer Легкість пошуку роботи на фрілансі На біржах фрілансу замовники найчастіше шукають такого веб-спеціаліста, який зробить всю роботу самостійно без залучення додаткових розробників. Хто, як не Full-stack девелопер найкраще підійде на цю роль, маючи таку перевагу перед вузькоспеціалізованими побратимами? Отже, обравши цей шлях, ви не залишитеся без роботи і зможете користуватися всіма благами, які дарує фрілансерство. Великі кар'єрні можливості Широкоформатність професії Full-stack розробника дозволяє реалізувати себе в будь-якій сфері веб-девелопменту. Ви можете в будь-який момент перейти на більш вузький профіль – чисту FrontEnd або чисту BackEnd розробку (горизонтальний розвиток, поглиблення в конкретну сферу діяльності), а можете стати сильним тімлідом або архітектором, який чудово розуміється на всіх процесах створення веб-додатків і має багатий досвід за плечима (вертикальний розвиток, просування кар'єрними сходами). Також Full-stack розробник може знайти успішне застосування своїм здібностям у стартапах. Стартап-команди, як правило, мають дуже малий бюджет і їм набагато вигідніше мати тих, хто може взяти на себе обов'язки декількох людей. Таким чином ви і новий досвід отримаєте, і зможете попрацювати над чимось свіжим, цікавим, раніше не баченим. Ну а щодо потреб ринку в Full-stack розробниках навіть згадувати не варто – безліч компаній хоче отримати спеціаліста широкого профілю в свій штат. Кількість вакансій для них менша, ніж для фронтендників та бекендників, однак і конкуренції теж не так багато. Мало рутини та вигорянь Багата на різноманітність діяльність Full-stack розробників знижує ризики загрузнути в одноманітній роботі. Ви володієте великим арсеналом знань, що дозволяє вам періодично перемикатися між проєктами і менше втомлюватися від застосування одних і тих самих технологій. Легкість у розвитку свого продукту Ви маєте достатньо знань та вмінь, щоб самостійно створити власний проєкт. У майбутньому ви зможете організувати свою команду для вдосконалення та подальшого розвитку програмного продукту, проте вже на старті ви маєте все необхідне для того, аби реалізувати ваші ідеї. Мінуси професії Full-stack Developer Програш вузькоспеціалізованому розробнику на його полі бою Full-stack девелопер володіє багатьма інструментами, але не може знати кожен настільки ж добре, наскільки окремо взятий фахівець. Ця професія передбачає подібне розпилення і унеможливлює поглиблення в будь-яку мову або технологію. Виходить, ви вмієте все, але гірше за розробника конкретного напряму. Багато часу на навчання Технологій, які має опанувати Full-stack спеціаліст, багато. Під час вивчення, наприклад, бекенду легко забути те, що ти вчив по фронтенду. Щоб усі знання та вміння утримувати на гарному рівні, необхідно витрачати багато зусиль. Впоратися з цим можна наступним чином: вивчаєте одну спеціальність, влаштовуєтеся на роботу, а потім вивчаєте другий напрямок. Виходить, ви не тільки поточні знання зберігаєте, але й примножуєте їх, рухаючись до фул-стек розробки. “Нарощуйте компетенцію поступово, з невеликих завдань. Пройдіть курс із напрямку, якого вам бракує, щоб вникнути в базові принципи. А далі опановуйте знання на практиці за правилом Learning by doing” – Олексій Голубєв, Team Lead Full-stack Developer в GlobalLogic. Важко стежити за новими тенденціями Світ IT дуже гнучкий і мінливий. Наче імперії – виникають і руйнуються нові мови, технології, підходи в розробці ПЗ, техніки написання та ревізії коду. Вам, як фахівцю широкого профілю, необхідно знати всі новинки, адже, зрештою, цього і вимагатимуть від вас роботодавці — використання сучасних інструментів та підходів. Занадто багато обов'язків Роботодавці іноді починають висувати велику кількість вимог до фул-стек фахівця. Раніше згадуваний Full-stack розробник Геннадій Догаєв має таку думку щодо цього: “Замовники хочуть звалити на одну людину надто багато. Наприклад, вже зустрічаються оголошення Node.js+React.js+React Native, тобто до веб-стеку додається ще й мобільна розробка. Це впливає на якість знань та кінцевого продукту: чим більше технологій потрібно охопити, тим більш поверхнево знаєш кожну з них. Крім того, людині не можуть подобатися всі напрямки одночасно. Мені з цього набору не дуже цікава мобільна розробка”. Вами хочуть залатати дуже багато дірок Фул-стек розробнику можуть часто делегувати різноманітні завдання на робочому місці. Дописати за кимось код, щось переглянути, пофіксити, доробити. Працювати замість FrontEnd/BackEnd розробника, який пішов у відпустку, – мила справа. А якщо вас найняли як альтернативу 5-ти розробникам, то й взагалі будуть тримати як раба. Складні завдання Ви знаєте більше інших, а значить, вам під силу розібратися з тою чи іншою важкою задачею. Принаймні так думає той, хто вам їх роздаватиме. Велика завантаженість Як ви вже помітили за попередніми пунктами, Full-stack розробнику не дадуть відпочити. Справ по вуха – це точний опис його стану на кожний робочий день. Складнощі у заміні Цей пункт одночасно є і перевагою, і недоліком. З одного боку, вам важко знайти заміну і, відповідно, вас цінуватимуть. З іншого боку, вам буде проблемно піти у відпустку, адже де взяти заміну? Тут і почнуться дзвінки у будь-який час доби, неможливість перекладання деяких завдань на інших розробників та інше. Як стати розробником Full-stack? Відповідь проста – оберіть найбільш близький до вас варіант професії та вивчіть необхідні технології за допомогою різних ресурсів, або підіть на курси full stack розробників. Радимо зробити свій вибір на користь освітньої IT-платформи ITVDN – тут ви зможете знайти 90% усіх потрібних вам відео курсів за будь-яким із обраних напрямків. Наприкінці статті ми залишимо корисні посилання на всі спеціальності, які допоможуть вам у вивченні ремесла Full-stack. Наприклад, вам сподобався BackEnd-стек Python розробника – тоді вам підійдуть 2 курси за наступними спеціальностями: FrontEnd Developer. Python Developer. З кожною програмою навчання ви зможете ознайомитися докладніше, перейшовши за залишеними посиланнями. Зарплати Full-stack розробників Відповідно до липневої зарплатної аналітики від DOU.ua (опитано 6605 українських розробників), медіанна зарплата FullStack розробників наступна: Junior – 980 USD; Middle – 2475 USD; Senior – 4750 USD. При цьому ЗП у колег по цеху – FrontEnd та Mobile розробників – приблизно такі ж. Єдині, хто помітно виділяються – BackEnd девелопери рівня Middle та Senior. Їхня медіанна оплата праці становить 2800 USD і 5000 USD відповідно, що на кілька сотень доларів перевищує зарплату фулстеккерів. Якщо звернутися до міжнародного веб-сайту з пошуку роботи Jooble (має українське коріння), то станом на липень середня пропозиція щодо зарплати для FullStack Developer у Києві становить 114 183 грн (приблизно 3100 USD). Відповідно до міжнародного опитування Stack Overflow Developer Survey 2023 (понад 90 000 респондентів з усього світу), річна медіанна ЗП FullStack фахівця складає 71 140 USD (приблизно 5930 USD на місяць). Підсумки Full-stack Developer — універсальний веб-розробник, який поєднує у собі силу FrontEnd та BackEnd напрямків. Так, спеціалізовані девелопери зроблять всю роботу краще, ніж фул-стек фахівець, проте головний коник героя цієї статті – можливість розробляти повноцінні веб-додатки самостійно, доводячи їх до повністю готового стану. Як і будь-яке інше, Full-stack ремесло має свої переваги та недоліки. Шлях, яким повинен пройти full stack розробник з нуля досить тернистий і насичений. Проте недаремно казали класики — терпіння та праця все перетруть. Так що все у ваших руках! Можливо, нас читають розробники Full-stack? Із задоволенням прочитаємо вашу точку зору на позиції, викладені в цій статті. Також будемо раді будь-яким питанням та зауваженням від усіх читачів! Ну а тим, хто вирішив обрати професію Full-stack Developer, ми бажаємо бути впертими, оптимістичними і з незагасаючим вогником спраги знань в очах. Успіхів та кодерського натхнення на вашому шляху!   Корисні посилання Весь каталог спеціальностей: ІТ-спеціальності на ITVDN. FrontEnd складова: відео курс за спеціальністю FrontEnd Developer. BackEnd складова: Python Developer PHP Developer ASP.NET MVC Developer ASP.NET Core Developer Java Developer Онлайн навчання в групі з тренером за спеціальністю FullStack Node.js Developer.

Вітаємо, друзі!   Сьогодні на вас чекає підбірка класних, наповнених корисним контентом відео від ITVDN за напрямком Java. Топ насичений як теоретичними відеоматеріалами, які допомагають побудувати ефективне навчання, так і практичними вебінарами, орієнтованими на прокачування навичок програмування за допомогою джави та супутніх технологій (фреймворк Spring, Elasticsearch). Отже, які відео увійшли до цього рейтингу?     Карта спеціальності Java розробник   Автор – Андрій Бондаренко, Android Developer & Trainer, Samsung R&D Institute, Ukraine   Java – це популярна об'єктно-орієнтована мова програмування, якою написані програми для більш ніж 3-х мільярдів пристроїв по всій планеті. Сфера її застосування практично безмежна, а ті, хто добре володіють Java, мають великі можливості та завжди будуть забезпечені цікавими завданнями та високооплачуваною роботою.   На вебінарі ви отримаєте відповіді на всі питання, пов'язані з навчанням, набуттям досвіду, розстановкою пріоритетів у виборі технологій та навчальних матеріалів, а також кар'єрою програміста Java-напрямку.   Програма зустрічі:   Хто такий Java розробник? Актуальність спеціальності та затребуваність на IT-ринку. Як стати Java розробником: попередні вимоги; картка спеціальності; огляд обов'язкових та факультативних технологій.         Де та як вивчити мову програмування Java. Як отримати перший практичний досвід Стажування та перша робота - можливості і перспективи. Питання та відповіді.     Створення базового Spring Boot веб-сервісу на Java   Автор – В'ячеслав Аксьонов, Java/Kotlin Software Engineer   Spring Boot – це найпопулярніший фреймворк для розроблення веб-додатків на Java. У вебінарі буде розглянуто, як влаштовані додатки, котрі створені з використанням Spring Boot, на прикладі найпростішого stateless веб-сервісу. Також автор розгляне http взаємодії з використанням REST, побудову масштабованої архітектури бізнес-логіки, взаємодію з базами даних через найбільш популярні та прості прийоми.   План вебінару:   Що таке Spring/Spring Boot та Dependency Injection. Контекст та як його створювати. @Service/@Component/@Repository/@Controller – що все це таке і навіщо потрібно. Створюємо шаблон проєкту Spring Boot. Пишемо веб-сервіс із нуля. Розглядаємо найбільш простий та зручний спосіб роботи з базою даних. Перевіряємо працездатність та відповідаємо на запитання.     3. Як стати Java розробником у 2021?   Автор – Максим Федосов, Java Developer   З цього вебінару ви дізнаєтеся, як почати свій шлях у якості Java розробника – від новачка без досвіду в програмуванні до рівня фахівця, затребуваного на ринку.   У вебінарі будуть розглянуті дві сторони:   Що вчити: автор поділиться своїм баченням того, що потрібно вивчати насамперед як базу, що потрібно опановувати на етапі пошуку першої роботи, і що потрібно підтягнути, коли спеціаліст вже працює (на прикладі Java стеку). Як шукати роботу: з боку побудови кар'єри йтиметься про те, які шляхи можна обрати для побудови кар'єри, про ринок з точки зору роботодавця, курсів, шукачів. Який проєкт краще обрати, як часто змінювати роботу, як розвивати свою кар'єру.   Весь вебінар буде розділено на 2 частини – до першої роботи та під час роботи. В результаті у фахівців-початківців з'явиться конкретний план дій для того, щоб розпочати кар'єру, а у працюючих фахівців — розуміння того, як рости далі.   План вебінару:   Знайомство, трохи про себе та свій шлях у IT-сфері. Що потрібно вчити розробнику-початківцю Java. Напрацювання практики програмування. Портфоліо. Підготовка до пошуку роботи та подальша кар'єра.     4. Elasticsearch - пишемо свій пошуковик на Java   Автор – Федір Яременко, Senior Java Developer   На вебінарі буде розглянуто, як на Java реалізувати повнотекстовий пошук на об'ємному масиві документів з мінімальними затримками за допомогою Elasticsearch.   План вебінару:   Про повнотекстовий пошук та індексацію Огляд Elasticsearch Налаштування проєкту Додавання індексів Пошук за індексом Пошук за кількома полями Пошук у знайденому Агрегація результатів пошуку Пошук запитів з помилками Інші корисні опції пошуку Ранжування результатів Налаштування форматування результатів Пагінація Налаштування індексів для російської та української мов Асинхронні виклики Масштабування за допомогою кластера Візуалізація даних за допомогою Kibana Висновок       5. Створення 2D гри Танчики з Денді на Java з нуля   Автор – Андрій Бондаренко, Android Developer & Trainer, Samsung R&D Institute, Ukraine   Дане відео є захоплюючим онлайн тренінгом із написання графічної гри "Танки", який допоможе легко і швидко познайомитися з практичною стороною розроблення на Java. Нуль теорії – лише практика.   Кому це буде корисно:   Новачкам. Відсутність досвіду у програмуванні не повинна вас зупиняти. Ми даємо вам шанс зробити свою першу програму на Java та отримати досвід практичного застосування цієї мови програмування у створенні справжньої комп'ютерної гри. Розробникам-початківцям Java без досвіду. Ви зможете поглибити і застосувати на практиці знання мови Java під керівництвом тренера.   Чого ви навчитеся:   Писати прості програми та підпрограми з використанням мови Java Працювати з масивами даних Використовувати типи даних та класи Java Застосовувати всі базові навички (змінні, умовні конструкції, цикли, методи) на практиці   Програма тренінгу:   Створення карти поля бою. Робота над пересуванням танка Реалізація стрільби. Навчання танка рухатися у вказаний квадрант. Додавання танка-ворога. Підсумок: танк проходить все поле бою та чистить його. Відповіді на питання. Куди розвиватись далі?     6. Spring для початківців. Огляд можливостей та переваг. Початок роботи зі Spring   Автор – Дзюба Роман, Java Developer   Spring – це один з найбільш популярних та універсальних фреймворків для створення веб-додатків для бізнесу. Він дає Java-розробникам більшу свободу в проєктуванні програм, надаючи засоби вирішення проблем корпоративного масштабу. Spring має велику документацію і досить простий у використанні.   Дане відео є першим відеоуроком з відео курсу “Spring”, який знайомить з однойменним фреймворком.   На самому курсі розглядаються різні способи використання модулів Spring, написання REST додатків, використання MVC моделей та інші теми.   Проходження курсу за даним фреймворком буде корисним як тим, хто тільки познайомився з мовою Java і шукає, що вчити далі, так і тим, хто вже має певні знання і хоче освіжити в пам'яті навички використання SpringCore, SpringWeb, SpringSecurity.   Головні теми цього відео:   Ознайомлення із базовими принципами фреймворку. Переваги Spring, знайомство з основними принципами ООП та поняттям POJO. Області видимості Java Bean.     7. Створення гри Морський Бій на Java з нуля. (Частина 1, Частина 2)   Автор – Антон Кашніков, Java Developer, тренер-консультант CyberBionic Systematics   Відео у форматі онлайн тренінгу з написання консольної гри "Морський бій". З його допомогою ви швидко познайомитеся з Java, відразу ж розпочавши розроблення. Як результат – ви випробуєте джаву у справі, відчуєте її потужність, а також отримаєте на виході власноруч зроблену гру, яка після доопрацювання може стати чудовим проєктом у вашому майбутньому резюме Java розробника.   Програма тренінгу:   Частина 1   Знайомство із засобом розроблення IntelliJ IDEA та мовою програмування Java. Розбивання проєкту на підзавдання. Робота з масивами під час створення поля бою. Створення перших об'єктів. Використання об'єктів з масивами.   Частина 2   Тонкості роботи з консоллю при відображенні ігрових об'єктів. Продумування логіки гри. Створення геймплею. Оброблення винятків. Розбір помилок. Підбиття підсумків.     Що потрібно знати Java розробнику? ➤ Як вивчити Java?   Автор – Дмитро Саєвський, Java Developer   На цьому вебінарі ви дізнаєтеся, чим займається джавіст, які типи розроблення Java найбільш затребувані. Також автор розгляне весь шлях Java розробника з моменту вибору цієї спеціальності до рівня Senior.   План вебінару:   Типи розроблення Java. Якими вміннями повинен володіти Java розробник. Особливості Java. Історія версій Java. З чого розпочати навчання та скільки потрібно вчитися? Складання плану навчання. Кар'єрний шлях розробника. Рекомендовані посилання. Рекомендована література.     9. Підготовка до співбесіди з позицією Junior Java Developer   Авторка – Вікторія Силенко, Java розробниця desktop та web додатків.   Незважаючи на дату випуску даного вебінару, він досі залишається актуальним для тих, хто вирішив пов'язати свою кар'єру з розробленням Java і при цьому прагне з успіхом пройти співбесіду на позицію Junior Java Developer.   На цьому вебінарі ви дізнаєтесь, як правильно складати резюме, які популярні питання на співбесіді (+ відповіді), теми під час перевірки рівня англійської мови, як добре зарекомендувати себе у перші місяці роботи.     10. Створення багатопотокового клієнт-серверного додатку на Java   Автор – Євген Волосатов, професійний програміст, викладач мови Java у коледжі, автор відео курсів з мов C#, Java, PHP; має більше 20 років досвіду у якості провідного програміста в різних фірмах, має значний викладацький досвід; 6 років досвіду у проведенні вебінарів та створенні відео курсів   Євген Волосатов – справжній метр в області алгоритмів і структур даних на C#, Java, PHP — в даному вебінарі демонструє, як необхідно створювати багатопоточний клієнт-серверний додаток мовою Java.   На цьому вебінарі на вас чекає практика, котра зачіпає сокети та потоки. За допомогою Java буде написано невелику клієнт-серверну програму на сокетах. Для цього автор створить дві різні програми, які запускаються на різних комп'ютерах, але при цьому працюють спільно, надсилаючи одна одній дані.   Для зв'язку програм одна з одною буде створено універсальний клас Phone – він використовуватиметься як на сервері, так і на клієнті в JAR файлі. Наприкінці вебінару автор додасть багатопоточність до серверної частини, щоб сервер міг обробляти кілька клієнтів одночасно.   План вебінару:   Найпростіший сервер – Автовідповідач. Найпростіший клієнт – Вміти читати. Клієнт-серверний діалог. Універсальний сокет – Телефон. Серверна багатопоточність.   Для успішного засвоєння матеріалу необхідні базові навички роботи з Java у середовищі IntelliJ IDEA.   Вивчайте Java розроблення на ITVDN!

Введение В этой статье Вы научитесь создавать секундомер, используя HTML5 и CSS3. Мы рассмотрим CSS3 анимацию с тремя кнопками: старт, остановка и сброс. Запуск начинает работу секундомера, стоп – останавливает секундомер, и кнопка сброса сбрасывает секундомер. Основная логика создания секундомера очень простая, Вы будете использовать простой контейнер div, содержащий цифры, они будут увеличиваться с помощью ключевого кадра анимации. Сначала создайте div (содержащий числа) с помощью кода HTML: <!doctype html> <html> <head>     <title>Stopwatchtitle>     <link rel="stylesheet" href="Style.css" /> head> <body>     <div class="number">0 1 2 3 4 5 6 7 8 9div> body> html> Вот результат предыдущего кода: Теперь Вам нужно выровнять числа по вертикали за счет уменьшения ширины контейнера. Итак, создайте файл CSS (styles.css) и введите следующий код в этот CSS-файл. * {     margin: 0;     padding: 0; } .numbers {     width: 10px; } Согласно предыдущему коду, Ваши цифры будут выровнены вертикально:  Теперь используем цифровые шрифты, Вы можете скачать их с сайта ds-digi.font. Используйте следующий код CSS, чтобы изменить шрифт: .number {     width: 10px;     font-family: digital, arial, verdana;     font-size: 50px; } @font-face {     font-family: 'digital';     src: url('DS-DIGI.TTF'); } Результат такого кода:   Давайте поместим числа в поле для отображения только одной цифры. Таким образом, в HTML-файле поместите div с цифрами в другой div. Код будет таким:     <div class="box">         <div class="number">0 1 2 3 4 5 6 7 8 9div>     div> Теперь примените такие настройки CSS, чтобы отображать только одну цифру.  .box {     width: 40px;     height: 40px;     border: 1px solid #000;     font-size: 50px;     overflow: hidden; } .number {     width: 40px;     line-height: 40px;     font-family: digital, arial, verdana;     text-align: center; } Таким будет результат: Давайте создадим анимацию цифр, так как это главная задача статьи. Логика анимации – изменить значение top position absolute от 0 до -400 px, потому что высота поля 40 px, а у нас есть цифры от 0 до 9, то есть в общей сложности 10 цифр, так что 40 * 10 = 400, Вы будете менять верхнюю от 0 до -400 px. Вот так выглядит код файла style.css: .box {     width: 40px;     height: 40px;     border: 1px solid #000;     font-size: 50px;     overflow: hidden;     position: relative; } .number {     width: 40px;     line-height: 40px;     font-family: digital, arial, verdana;     text-align: center;     position: absolute;     top: 0;     left: 0;     -webkit-animation: moveup 1s steps(10, end) infinite; /* Chrome, Safari, Opera */     animation: moveup 1s steps(10, end) infinite; } @-webkit-keyframes moveup {     0% {         top: 0px;     }     100% {         top: -400px;     } } @keyframes moveup {     0% {         top: 0px;     }     100% {         top: -400px;     } } Вот каким будет результат: Вы можете увидеть, что цифры заменяются, а не перемещаются вверх пиксель за пикселем. Теперь создайте еще несколько div: два для часов, два для минут, два для секунд и три для мили-секунд. <!doctype html> <html> <head>     <title>Stopwatchtitle>     <link rel="stylesheet" href="Style.css" /> head> <body>     <div class="stopwatch">         <div class="box">                         <div class="number tensPlaceHours">0 1 2 3 4 5 6 7 8 9div>         div>         <div class="box">             <div class="number onesPlaceHours">0 1 2 3 4 5 6 7 8 9div>         div>                 <div class="box divider">             <div class="number">:div>         div>                  <div class="box">             <div class="number tensPlaceMinutes">0 1 2 3 4 5 6div>         div>         <div class="box">             <div class="number onesPlaceMinutes">0 1 2 3 4 5 6 7 8 9div>         div>                 <div class="box divider">             <div class="number">:div>         div>                 <div class="box">             <div class="number tensPlaceSeconds">0 1 2 3 4 5 6div>         div>         <div class="box">             <div class="number onesPlaceSeconds">0 1 2 3 4 5 6 7 8 9div>         div>                 <div class="box divider">             <div class="number">:div>         div>                 <div class="box">             <div class="number onesPlaceMiliSeconds">0 1 2 3 4 5 6 7 8 9div>         div>         <div class="box">             <div class="number tensPlaceMiliSeconds">0 1 2 3 4 5 6 7 8 9div>         div>         <div class="box">             <div class="number hundredsPlaceMiliSeconds">0 1 2 3 4 5 6 7 8 9div>         div>     div> body> html> Результат предыдущего кода: Теперь установите float left для всех div, как указано ниже. .box {     width: 40px;     height: 40px;     border: 1px solid #000;     font-size: 50px;     overflow: hidden;     position: relative; } После применения float left мы получим такой результат: Таким образом, максимальное значение минут и секунд будет 60. Вы должны создать две анимации, одна из которых будет 10-шаговой и 10-цифровой, и одна 6-шаговой, и только 6-цифровой. Используйте следующий код CSS для этого: * {     margin: 0;     padding: 0; } .box {     width: 40px;     height: 40px;     border: 1px solid #000;     font-size: 50px;     overflow: hidden;     position: relative;     float: left; } .number {     width: 40px;     line-height: 40px;     font-family: digital, arial, verdana;     text-align: center;     position: absolute;     top: 0;     left: 0;     -webkit-animation: moveup 1s steps(10, end) infinite; /* Chrome, Safari, Opera */     animation: moveup 1s steps(10, end) infinite; } .moveuptens {     -webkit-animation: moveuptens 1s steps(10, end) infinite; /* Chrome, Safari, Opera */     animation: moveuptens 1s steps(10, end) infinite; } .moveupsix {     -webkit-animation: moveupsix 1s steps(6, end) infinite; /* Chrome, Safari, Opera */     animation: moveupsix 1s steps(6, end) infinite; } @-webkit-keyframes moveup {     0% {         top: 0px;     }     100% {         top: -400px;     } } @keyframes moveup {     0% {         top: 0px;     }     100% {         top: -400px;     } } @-webkit-keyframes moveuptens {     0% {         top: 0px;     }     100% {         top: -400px;     } } @keyframes moveuptens {     0% {         top: 0px;     }     100% {         top: -400px;     } } @-webkit-keyframes moveupsix {     0% {         top: 0px;     }     100% {         top: -240px;     } } @keyframes moveupsix {     0% {         top: 0px;     }     100% {         top: -240px;     } } @font-face {     font-family: 'digital';     src: url('DS-DIGI.TTF'); } Теперь, после создания предыдущих анимаций, примените класс CSS к HTML следующим образом: <div class="stopwatch">         <div class="box">             <div class="number tensPlaceHours moveuptens">0 1 2 3 4 5 6 7 8 9div>         div>         <div class="box">             <div class="number onesPlaceHours moveuptens">0 1 2 3 4 5 6 7 8 9div>         div>         <div class="box divider">             <div class="number">:div>         div>         <div class="box">             <div class="number tensPlaceMinutes moveupsix">0 1 2 3 4 5 6div>         div>         <div class="box">             <div class="number onesPlaceMinutes moveuptens">0 1 2 3 4 5 6 7 8 9div>         div>         <div class="box divider">             <div class="number">:div>         div>         <div class="box">             <div class="number tensPlaceSeconds moveupsix">0 1 2 3 4 5 6div>         div>         <div class="box">             <div class="number onesPlaceSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>         div>         <div class="box divider">             <div class="number">:div>         div>         <div class="box">             <div class="number onesPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>         div>         <div class="box">             <div class="number tensPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>         div>         <div class="box">             <div class="number hundredsPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>         div>     div> Таким будет результат:  Теперь Вам нужно синхронизировать скорость анимации со скоростью времени. Примените следующие свойства: .onesPlaceSeconds {     animation-duration: 10s;     -webkit-animation-duration: 10s; } .tensPlaceSeconds {     animation-duration: 60s;     -webkit-animation-duration: 60s; } .hundredsPlaceMiliSeconds {     animation-duration: 1s;     -webkit-animation-duration: 1s; } /*1/10th of .second*/ .tensPlaceMiliSeconds {     animation-duration: 0.1s;     -webkit-animation-duration: 0.1s; } .hundredsPlaceMiliSeconds {     animation-duration: 0.01s;     -webkit-animation-duration: 0.01s; } .onesPlaceMinutes {     animation-duration: 600s;     -webkit-animation-duration: 600s; } /*60 times .second*/ .tensPlaceMinutes {     animation-duration: 3600s;     -webkit-animation-duration: 3600s; } /*60 times .minute*/ .onesPlaceHours {     animation-duration: 36000s;     -webkit-animation-duration: 36000s; } /*60 times .minute*/ .tensPlaceHours {     animation-duration: 360000s;     -webkit-animation-duration: 360000s; } /*10 times .hour*/ Вот таким будет результат: Вы можете увидеть, что сейчас с секундомером все в порядке. Теперь добавьте стили к секундомеру. Модифицируйте HTML и CSS. HTML-файл: <!doctype html> <html> <head>     <title>Stopwatchtitle>     <link rel="stylesheet" href="Style.css" /> head> <body>     <!doctype html>     <html>     <head>         <title>Stopwatchtitle>         <link rel="stylesheet" href="Style.css" />     head>     <body>         <div class="MainContainer">             <div class="stopwatch">                 <div class="box">                     <div class="number tensPlaceHours moveuptens">0 1 2 3 4 5 6 7 8 9div>                 div>                 <div class="box">                     <div class="number onesPlaceHours moveuptens">0 1 2 3 4 5 6 7 8 9div>                 div>                 <div class="box divider">                     <div class="number">:div>                 div>                 <div class="box">                     <div class="number tensPlaceMinutes moveupsix">0 1 2 3 4 5 6div>                 div>                 <div class="box">                     <div class="number onesPlaceMinutes moveuptens">0 1 2 3 4 5 6 7 8 9div>                 div>                 <div class="box divider">                     <div class="number">:div>                 div>                 <div class="box">                     <div class="number tensPlaceSeconds moveupsix">0 1 2 3 4 5 6div>                 div>                 <div class="box">                     <div class="number onesPlaceSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>                 div>                 <div class="box divider">                     <div class="number">:div>                 div>                 <div class="box">                     <div class="number onesPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>                 div>                 <div class="box">                     <div class="number tensPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>                 div>                 <div class="box">                     <div class="number hundredsPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>                 div>             div>         div>     body> html> CSS-файл: * {     margin: 0;     padding: 0; } body {     background: url(images.jpg); } .MainContainer {     padding: 200px;     text-align: center; } .stopwatch {     padding: 10px;     background: linear-gradient(top, #222, #444);     overflow: hidden;     display: inline-block;     border: 7px solid #eeeeee;     border-radius: 20px;     box; } .box {     width: 40px;     height: 40px;     font-size: 50px;     overflow: hidden;     position: relative;     float: left; } .number {     width: 40px;     line-height: 40px;     font-family: digital, arial, verdana;     text-align: center;     color: #fff;     position: absolute;     top: 0;     left: 0;     -webkit-animation: moveup 1s steps(10, end) infinite; /* Chrome, Safari, Opera */     animation: moveup 1s steps(10, end) infinite; } .moveuptens {     -webkit-animation: moveuptens 1s steps(10, end) infinite; /* Chrome, Safari, Opera */     animation: moveuptens 1s steps(10, end) infinite; } .moveupsix {     -webkit-animation: moveupsix 1s steps(6, end) infinite; /* Chrome, Safari, Opera */     animation: moveupsix 1s steps(6, end) infinite; } .onesPlaceSeconds {     animation-duration: 10s;     -webkit-animation-duration: 10s; } .tensPlaceSeconds {     animation-duration: 60s;     -webkit-animation-duration: 60s; } .onesPlaceMiliSeconds {     animation-duration: 1s;     -webkit-animation-duration: 1s; } /*1/10th of .second*/ .tensPlaceMiliSeconds {     animation-duration: 0.1s;     -webkit-animation-duration: 0.1s; } .hundredsPlaceMiliSeconds {     animation-duration: 0.01s;     -webkit-animation-duration: 0.01s; } .onesPlaceMinutes {     animation-duration: 600s;     -webkit-animation-duration: 600s; } /*60 times .second*/ .tensPlaceMinutes {     animation-duration: 3600s;     -webkit-animation-duration: 3600s; } /*60 times .minute*/ .onesPlaceHours {     animation-duration: 36000s;     -webkit-animation-duration: 36000s; } /*60 times .minute*/ .tensPlaceHours {     animation-duration: 360000s;     -webkit-animation-duration: 360000s; } /*10 times .hour*/ @-webkit-keyframes moveup {     0% {         top: 0px;     }     100% {         top: -400px;     } } @keyframes moveup {     0% {         top: 0px;     }     100% {         top: -400px;     } } @-webkit-keyframes moveuptens {     0% {         top: 0px;     }     100% {         top: -400px;     } } @keyframes moveuptens {     0% {         top: 0px;     }     100% {         top: -400px;     } } @-webkit-keyframes moveupsix {     0% {         top: 0px;     }     100% {         top: -240px;     } } @keyframes moveupsix {     0% {         top: 0px;     }     100% {         top: -240px;     } } @font-face {     font-family: 'digital';     src: url('DS-DIGI.TTF'); } После применения некоторых стилей результат будет следующим: Теперь добавьте 3 кнопки типа radio для запуска, остановки и сброса секундомера. Эти кнопки будут управлять секундомером. HTML-код: <!doctype html> <html> <head>     <title>Stopwatchtitle>     <link rel="stylesheet" href="Style.css" /> head> <body>     <div class="MainContainer">         <input id="start" name="controls" type="radio" />         <input id="stop" name="controls" type="radio" />         <input id="reset" name="controls" type="radio" />         <div class="stopwatch">             <div class="box">                 <div class="number tensPlaceHours moveuptens">0 1 2 3 4 5 6 7 8 9div>             div>             <div class="box">                 <div class="number onesPlaceHours moveuptens">0 1 2 3 4 5 6 7 8 9div>             div>             <div class="box divider">                 <div class="number">:div>             div>             <div class="box">                 <div class="number tensPlaceMinutes moveupsix">0 1 2 3 4 5 6div>             div>             <div class="box">                 <div class="number onesPlaceMinutes moveuptens">0 1 2 3 4 5 6 7 8 9div>             div>             <div class="box divider">                 <div class="number">:div>             div>             <div class="box">                 <div class="number tensPlaceSeconds moveupsix">0 1 2 3 4 5 6div>             div>             <div class="box">                 <div class="number onesPlaceSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>             div>             <div class="box divider">                 <div class="number">:div>             div>             <div class="box">                 <div class="number onesPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>             div>             <div class="box">                 <div class="number tensPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>             div>             <div class="box">                 <div class="number hundredsPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>             div>         div>                 <div id="stopwatch_controls">             <label for="start">Startlabel>             <label for="stop">Stoplabel>             <label for="reset">Resetlabel>         div>     div> body> html> Теперь измените код CSS для стилизации элементов управления секундомером: * {     margin: 0;     padding: 0; } body {     background: url(images.jpg); } .MainContainer {     padding: 200px;     text-align: center; } .stopwatch {     padding: 10px;     background: linear-gradient(top, #222, #444);     overflow: hidden;     display: inline-block;     border: 7px solid #eeeeee;     border-radius: 20px;     box; } .box {     width: 40px;     height: 40px;     font-size: 50px;     overflow: hidden;     position: relative;     float: left; } .number {     width: 40px;     line-height: 40px;     font-family: digital, arial, verdana;     text-align: center;     color: #fff;     position: absolute;     top: 0;     left: 0;     -webkit-animation: moveup 1s steps(10, end) infinite; /* Chrome, Safari, Opera */     animation: moveup 1s steps(10, end) infinite; } #stopwatch_controls label {     cursor: pointer;     padding: 5px 10px;     background: #eeeeee;     font-family: arial, verdana, tahoma;     font-size: 20px;     border-radius: 0 0 3px 3px; } input[name="controls"] {     display: none; } #stop:checked ~ .stopwatch .number {     animation-play-state: paused;     -webkit-animation-play-state: paused; } #start:checked ~ .stopwatch .number {     animation-play-state: running;     -webkit-animation-play-state: running; } #reset:checked ~ .stopwatch .number {     animation: none;     -webkit-animation: none; } .moveuptens {     -webkit-animation: moveuptens 1s steps(10, end) infinite; /* Chrome, Safari, Opera */     animation: moveuptens 1s steps(10, end) infinite;     /*By default animation will be paused*/     animation-play-state: paused;     -webkit-animation-play-state: paused; } .moveupsix {     -webkit-animation: moveupsix 1s steps(6, end) infinite; /* Chrome, Safari, Opera */     animation: moveupsix 1s steps(6, end) infinite;     /*By default animation will be paused*/     animation-play-state: paused;     -webkit-animation-play-state: paused; } .onesPlaceSeconds {     animation-duration: 10s;     -webkit-animation-duration: 10s; } .tensPlaceSeconds {     animation-duration: 60s;     -webkit-animation-duration: 60s; } .onesPlaceMiliSeconds {     animation-duration: 1s;     -webkit-animation-duration: 1s; } /*1/10th of .second*/ .tensPlaceMiliSeconds {     animation-duration: 0.1s;     -webkit-animation-duration: 0.1s; } .hundredsPlaceMiliSeconds {     animation-duration: 0.01s;     -webkit-animation-duration: 0.01s; } .onesPlaceMinutes {     animation-duration: 600s;     -webkit-animation-duration: 600s; } /*60 times .second*/ .tensPlaceMinutes {     animation-duration: 3600s;     -webkit-animation-duration: 3600s; } /*60 times .minute*/ .onesPlaceHours {     animation-duration: 36000s;     -webkit-animation-duration: 36000s; } /*60 times .minute*/ .tensPlaceHours {     animation-duration: 360000s;     -webkit-animation-duration: 360000s; } /*10 times .hour*/ @-webkit-keyframes moveup {     0% {         top: 0px;     }     100% {         top: -400px;     } } @keyframes moveup {     0% {         top: 0px;     }     100% {         top: -400px;     } } @-webkit-keyframes moveuptens {     0% {         top: 0px;     }     100% {         top: -400px;     } } @keyframes moveuptens {     0% {         top: 0px;     }     100% {         top: -400px;     } } @-webkit-keyframes moveupsix {     0% {         top: 0px;     }     100% {         top: -240px;     } } @keyframes moveupsix {     0% {         top: 0px;     }     100% {         top: -240px;     } } @font-face {     font-family: 'digital';     src: url('DS-DIGI.TTF'); } Финальный результат Источник: http://www.c-sharpcorner.com/UploadFile/75a48f/stopwatch-using-css3/

Введение ASP.Net Web API – это основа создания HTTP услуг широкого спектра клиентов, таких как браузеры, мобильные телефоны, планшеты и так далее. API должна быть совместима с современными браузерами, чтобы использовать эти услуги в простой форме. Мы можем быстро и просто сбрасывать служебные данные в браузер, а также приложения. Необходимость в Web API Если Вы нуждаетесь в Web Service и Вам не нужно SOAP, то API ASP.Net –лучший выбор. Он строит простые HTTP сервисы, основанные на базе существующей WCF. ASP.Net Web API на основе HTTP легко определяются. У них открытый исходный код. Легкая архитектура подходит для устройств с ограниченной шириной полосы, например, смартфонов. Создание простой Web API в ASP. NET MVC 6 Запустите Visual Studio 2015 Preview. В меню Файл выберите New > Project. В диалоговом окне New Project нажмите Tempates > Visual C# > Web и выберите ASP. NET шаблон проекта Web-приложений. Назовите проект "WebApplication1" и нажмите OK. В диалоговом окне New ASP.NET Project выберите "ASP.NET 5.0 Empty” шаблон. Проект включает в себя следующие файлы:   Global.json содержит настройки решения. В project.json находятся настройки проекта. Project_Readme.html – read me файл. Startup.cs содержит встроенный код конфигурации. Откройте файл Project.json. Добавьте библиотеки классов (class libraries) в разделе зависимостей (dependencies). ​ "dependencies": {           "Microsoft.AspNet.Server.IIS": "1.0.0-beta1",           " "Microfost.AspNet.Diagnostics": "1.0.0-beta1" } Затем откройте Startup.cs с кодом, показанным ниже.  public class Startup    {         public void Configure(IApplicationBuilder app)         {             // For more information on how to configure your application, visit http://go.microsoft.com/fwlink/?LinkID=398940              app.UseWelcomePage();             // app.UseMvc();          }     }  После отладки Visual Studio перейдите на http://localhost:port/ в браузере. Создание Web API Мы создадим Web API, чтобы упорядочить список клиентских продуктов. Сначала нужно добавить ASP.Net MVC6 в приложение. Добавьте пакет MVC6 в список зависимостей в Project.json. Используйте код ниже. "dependencies": {         "Microsoft.AspNet.Server.IIS": "1.0.0-beta1",         "Microsoft.AspNet.Diagnostics": "1.0.0-beta1",         "Microsoft.AspNet.Mvc": "6.0.0-beta1"       } Затем добавьте MVC в request pipeline в Startup.cs. Добавьте Using для Microsoft.Framework.DependencyInjection.   Добавьте следующий метод в Startup класс. using System; using Microsoft.AspNet.Builder; using Microsoft.AspNet.Http; using Microsoft.Framework.DependencyInjection;//add new  namespace WebApplication1 {     public class Startup     {         public void Configure(IApplicationBuilder app)         {                      app.UseWelcomePage();              app.UseMvc();         }         public void ConfigureServices(IServiceCollection services)         {             services.AddMvc();         }     } } Добавьте модель using System; using System.ComponentModel.DataAnnotations; namespace WebApplication1.Model {     public class Customer     {         public int CustomerId { get; set; }         [Required]         public string Name { get; set; }     } } Добавьте контроллер  using Microsoft.AspNet.Mvc; using System.Collections.Generic; using System.Linq; using WebApplication1.Model; namespace WebApplication1.Controllers {     public class HomeController : Controller     {                 static readonly new List<Customer> _items = new List<Customer>()             {                 new Customer  { CustomerId = 1, Name = "Henry" },                 new Customer { CustomerId = 2, Name = "John" },             };         public IEnumerable<Customer> Get()         {             return _items;         }         public IActionResult GetById(int id)         {             var its = _items.FirstOrDefault(x => x.CustomerId == id);             if (its == null)             {                 return HttpNotFound();             }             return new ObjectResult(its);         }         public void CreateCustomer([FromBody] Customer item)         {             if (!ModelState.IsValid)             {                 Context.Response.StatusCode = 400;             }             else             {                 item.CustomerId = 1 + _items.Max(x => (int?)x.CustomerId) ?? 0;                 _items.Add(item);                 string url = Url.RouteUrl("GetByIdRoute", new { id = item.CustomerId },                     Request.Scheme, Request.Host.ToUriComponent());                 Context.Response.StatusCode = 201;                 Context.Response.Headers["Location"] = url;             }         }         public IActionResult DeleteItem(int id)         {             var item = _items.FirstOrDefault(x => x.CustomerId == id);             if (item == null)             {                 return HttpNotFound();             }             _items.Remove(item);             return new HttpStatusCodeResult(204);         }     } } Выше описывается класс HomeController. Маршрутизация Атрибут маршрутизации определяет URL шаблоны контроллера. [Route("api/[controller]")] Методы HTTP [HttpGet], [HttpPost] и [HttpDelete] – атрибуты, определяющие методы HTTP для контроллера. public IEnumerable<Сustomer> Get() { }  //[HttpGet]  public IActionResult GetById(int id) { } //[HttpGetbyid}  public void СreateСustomer([FromBody] Сustomer item) { } // [HttpPost]  public IActionResult DeleteItem(int id) { } //[HttpDelete] {Customerid: int} int ограничивает переменную до соответствия целому числу, чтобы URL-адреса совпадали. http://localhost/api/home/1 http://localhost/api/home/42 Из этой статьи Вы узнали, как создавать Web API в MVC 6, используя модели, контроллер и HTTP методы. Источник: http://www.c-sharpcorner.com/UploadFile/85ed7a/create-web-api-in-mvc-6/

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

Важливість нейромереж у сучасній розробці Короткий огляд нейромережевих технологій ТОП 10 сервісів з використанням нейромереж для розробників Поради та рекомендації щодо вибору AI Висновки Висока динаміка ІТ-індустрії змушує розробників постійно шукати нові шляхи покращення власної продуктивності. Нещодавно людство ковзнуло ще однією спіраллю прогресу, і тепер девелоперів оточує плеяда штучних асистентів, причому часто в їхній основі саме нейромережі. Можливості ШІ дозволяють значно прискорити рутинні процеси, починаючи від зідзвонів з командою і закінчуючи написанням коду та його рефакторингом. І хоча рівень штучного інтелекту ще далекий від ідеалу, це вже великий крок уперед. Які штучні інструменти дозволяють впоратися з розробницькими задачами найбільш успішно? Щоб допомогти вам із відповіддю, в цій статті ми зібрали 10 цікавих ШІ сервісів для розробників з урахуванням функціоналу, вартості, наявності free-версії тощо. Читайте далі, щоб дізнатися більше! Важливість нейромереж у сучасній розробці Сьогодні нейромережі дозволяють значно спростити життя звичайному розробнику. Ось кілька прикладів: Декомпозиція задач. ШІ здатен розбивати комплексні задачі на дрібні, пояснювати їх, надавати підказки щодо їх виконання, пропонувати найоптимальніше рішення. Генерування коду. Розумній моделі можна дати на вхід певну програмістську задачу, а на виході отримати готовий шматок коду. Також AI здатен аналізувати чужий код, пояснювати його, розставляти коментарі, досліджувати технології програмування тощо. Code-рев’ю & рефакторинг. Ви можете зекономити час, довіривши AI внесення необхідних змін: сканування і оптимізація коду, видалення надлишкових фрагментів, покращення лаконічності, алгоритмів тощо. Написання тестів. Розробники не надто люблять займатися unit-тестуванням, хоча це важлива складова забезпечення якості ПЗ. На щастя, штучний інтелект здатен генерувати необхідні тестові кейси, котрі охоплюють різні сценарії, а також автоматизувати виконання цих тестів. Проактивна обробка помилок. ШІ прогнозує потенційні помилки та рекомендує виправлення до того, як вони трапляться, що скорочує час налагодження коду. Потужний аналіз даних. Штучні помічники здатні відносно швидко аналізувати великі масиви даних, щоб з’ясувати причинно-наслідкові зв’язки, виявити закономірності / потенційні проблеми та помилки тощо. Досить актуально для ІТ-спеціалістів, пов’язаних з Data Science, ML, big data тощо. Створення документації. ШІ може аналізувати код і автоматично створювати вичерпну документацію, яка пояснює функціональні можливості, інструкції з використання та посилання на API і багато іншого. Прогнозування. Прогнозування та моделювання поведінки користувачів і продуктивності ПЗ, покладене на плечі AI, дозволяє розробникам планувати масштабованість, виявляти потенційні вузькі місця на ранніх стадіях розробки і проактивно вирішувати їх, щоб забезпечити безперебійну роботу в майбутньому. Список можна розширити багатьма іншими пунктами – в залежності від специфіки напрямку розроблення. Використовуючи нейромережі, девелопери можуть значно підвищити свою ефективність і продуктивність. Однак важливо пам'ятати, що ШІ сьогодні – це помічник, і людський досвід залишається вирішальним для прийняття важливих рішень, творчого розв'язання проблем і забезпечення загальної якості та бачення ПЗ. Короткий огляд нейромережевих технологій: від глибокого навчання до штучного інтелекту Штучний інтелект – це широке поняття, що позначає системи, здатні імітувати когнітивні функції людини: запам’ятовування, креативність, комунікація з використанням мови, вирішення задач, прийняття рішень тощо. Однією з ключових складових ШІ є нейронні мережі, які імітують роботу людського мозку і дають комп'ютерам змогу навчатися і ухвалювати рішення на основі великих обсягів даних. Але між AI та нейромережами стоять ще 2 важливі технології – машинне навчання (МН, Machine Learning) та глибоке навчання (ГН, deep learning). Нижче ми швидко пробіжимося ШІ, МН та ГН, а більше про нейронки ви можете почитати у нашій статті “Чи замінить штучний інтелект розробників?”. ШІ Штучний інтелект містить в собі технологію ML, але лише нею не обмежується. Додатково він здатен використовувати: оброблювач мов – щоб розуміти нашу людську мову і формувати зрозумілі нам відповіді; комп’ютерний зір – аби аналізувати, класифікувати, сегментувати, розпізнавати обличчя та предмети; робототехніку – для виконання завдань з навігації та взаємодії з навколишнім середовищем та багато іншого. Відомі AI-платформи: віртуальні асистенти Alexa, Siri, чат-боти ChatGPT, Gemini, Midjourney тощо. Що таке машинне навчання? Це підмножина ШІ, яка фокусується на розробленні алгоритмів і моделей, що дають змогу комп'ютерним системам "навчатися" на основі даних і досвіду, без явного програмування. На відміну від традиційних програм, де розробник задає явні інструкції, в МН комп'ютерна система сама "витягує" закономірності та зразки з даних, щоб зробити прогнози або прийняти рішення. Машинне навчання використовує різні алгоритми класифікації, регресії, кластеризації, навчання з підкріпленням. Ці алгоритми дають змогу системі обробляти й аналізувати дані, знаходити приховані закономірності та будувати моделі, які можуть робити передбачення на основі нових даних. Приклади МН: спам-фільтри в електронній пошті, рекомендації фільмів на Netflix або товарів на відвіданому вами сайті. Глибоке навчання vs машинне навчання Глибоке навчання – це підмножина МН, яка використовує штучні нейромережі для аналізу даних і навчання. У глибокому навчанні нейронні мережі імітують роботу людських мізків, що складаються з численних шарів нейронів. Ці нейронні мережі можуть розпізнавати складні образи, обробляти природну мову та ухвалювати рішення на основі великих обсягів даних. Відмінність машинного навчання від deep learning полягає у здатності другого автоматично витягувати ознаки і представлення з даних. Замість ручного визначення ознак, як у традиційних методах МН, глибоке навчання використовує багатошарові нейромережі, які автоматично дістають ієрархічні ознаки з даних. Приклади архітектур ГН включають згорткові нейронні мережі (CNN) для оброблення зображень, рекурентні нейронні мережі (RNN) для послідовних даних і трансформатори для оброблення природної мови. Таким чином, deep learning зосереджується на використанні нейронних мереж з багатьма шарами для вивчення представлень безпосередньо з даних. Приклади ГН: розпізнавання облич для розблокування смартфонів, системи для перекладу тексту з однієї мови на іншу. То який можна зробити узагальнюючий висновок з цього розділу? Штучний інтелект відображає комп'ютерні системи, здатні імітувати і моделювати людське мислення та поведінку. Машинне навчання дає змогу комп'ютерним системам навчатися на основі даних і досвіду, без явного програмування. А глибоке навчання використовує штучні нейронні мережі для аналізу даних і навчання. ТОП 10 сервісів з використанням нейромереж для розробників Назва AI-платформи Короткий опис GitHub Copilot Інструмент доповнення та прогнозування коду CodiumAI Інструмент тестування та підвищення якості кодування Fathom Розумний помічник для відеозв'язку Scribe Інструмент автоматизованого документування Snyk Інструмент пошуку та виправлення вразливостей Codeium Інструмент автодоповнення коду Mintlify Інструмент генерування документацій Tabnine Інструмент автозавершення коду ChatGPT Розумний мультизадачний помічник Stepsize AI Інструмент відстежування командних процесів GitHub Copilot GitHub Copilot – це інноваційний інструмент, що входить в ТОП сервіси на основі ШІ у багатьох рейтингах. Розроблений спільними зусиллями GitHub, OpenAI та Microsoft, аби докорінно змінити досвід кодингу для розробників. Використовуючи потужну мовну модель OpenAI Codex, GitHub Copilot дає пропозиції та доповнення коду в режимі реального часу безпосередньо у вашому середовищі розроблення. Інтелектуальні інструменти розробки від Copilot дозволяють здійснювати аналіз даних, створювати фрагменти коду, генерувати цілі функції, коментарі, налагоджувати та виявляти проблеми безпеки. Вартість: Individual: 10 USD/місяць або 100 USD/рік Business: 19 USD/місяць Enterprise: 39 USD/місяць Безкоштовна версія для перевірених студентів, викладачів та тих, хто веде популярні open-source репозиторії на GitHub. Оцінки: Capterra: 4.7 з 5 зірок (19 відгуків) G2: 4.5 з 5 зірок (132 відгуки) Capterra та G2 – популярні американські онлайн-платформи, що спеціалізуються на оглядах та рейтингах різного ПЗ та послуг. CodiumAI Codium AI – це інструмент, який відсуває програмування на другий план і більше зосереджується на тестуванні та забезпеченні якості коду. Його можливості включають: декілька фреймворків для тестування: Jest, Mocha, Jasmine, Karma тощо; генерування тестового плану, test cases; детальний аналіз вашого коду; оптимізація коду з аргументацією. Вартість: Developer: безкоштовно. Teams: 19 USD/місяць. Enterprise: індивідуально. Оцінки: G2: 4.9 з 5 зірок (29 відгуків). Capterra: відсутні оцінки. Product Hunt: 4.7 з 5 зірок (7 відгуків). Product Hunt – платформа та онлайн-спільнота для ентузіастів, де вони діляться існуючими програмними й апаратними рішеннями, дізнаються про інновації в ІТ та надають їм свою оцінку. Fathom Fathom є чудовим рішенням для тих, хто прагне, щоб автоматизація збільшила продуктивність їхніх Zoom / Google Meet / Microsoft Teams зустрічей в рази. Даний AI записує ваш відеозв’язок, транскрибує бесіду в реальному часі (з таймлайн прив’язкою до відео), а як вишенька на торті – ШІ-чат для контекстних питань. Справжній digital transformation довготривалих мітингів у есенцію ключових тез! І це лише частина його можливостей. Українська мова, на жаль, не підтримується, зате розробники та інші учасники онлайн зустрічі гарно підтягнуть англійську! Вартість: free forever. Чому? Творці використовують Fathom для привернення уваги до інших своїх продуктів, які розширюють можливості цього AI асистента. Їхнє підключення якраз і потребує оплати (підключення опціональне). Оцінки: Product Hunt: 4.8 з 5 зірок (199 відгуків). G2: 5 з 5 зірок (2370 відгуків). Capterra: 5 з 5 зірок (289 відгуків). Scribe Scribe AI – це інструмент для розробників на базі ШІ для створення, управління та спрощення процесів, пов’язаних із документуванням. Серед його можливостей: автоматизація розроблення стандартних операційних процедур (SOP), мануалів, документації, захоплення ваших дій в реальному часі (на кшталт захоплення екрану) з подальшим створенням покрокових інструкцій тощо. Штучний інтелект Scribe значно полегшує допомогу в онбордингу нових працівників, пошук відповідей на запитання, підтримку клієнтів тощо. Вартість: Basic: безкоштовно. Pro Personal: 23 USD/міс. (річна підписка), 29 USD/міс. (місячна). Pro Team: 12 USD/міс. (річна підписка), 15 USD/міс. (місячна) – для команд з 5+ особами. Enterprise: індивідуально. Оцінки: Product Hunt: 4.9 з 5 зірок (155 відгуків). G2: 4.8 з 5 зірок (67 відгуків). Capterra: 4.9 з 5 зірок (10 відгуків). Snyk Інструмент, який дозволяє виявляти вразливості вашого коду і виправляти їх. Snyk може також сканувати залежності і пакети, Docker-файли, інфраструктуру коду (IDE), GitHub-репозиторії тощо. Підійде для розробників, які серйозно ставляться до сучасних digital transformation трендів, кібербезпеки та захищеності програмних продуктів. Згідно з даними вебсайту Snyk.io, їхнє рішення успішно використовують ТОП сервіси AWS, Google, Atlassian, Salesforce тощо. Вартість: Free: безкоштовно. Team: стартує від 25 USD за продукт/місяць, мінімум 5 розробників / 1,375 USD на рік. Enterprise: індивідуально. Оцінки: G2: 4.5 з 5 зірок (118 відгуків). Capterra: 4.7 з 5 зірок (17 відгуків). Codeium Творці Codeium позиціонують свій продукт як безкоштовний та потужний AI інструментарій, котрий розробники обов’язково оцінять. Він надає розширені можливості: оптимізація коду, його доповнення, пошук інформації, чат для запитань. Що цікаво, самі автори порівнюють своє рішення з GitHub Copilot і запевняють у низці переваг кодіуму: оцінка 5 з 5 зірок у маркетплейсах VS Code та JetBrains; безкоштовна версія для одноосібного розроблення; дешевша підписка для командного розроблення; більша кількість підтримуваних середовищ програмування (40+) та мов (70+); кращі можливості для стадії розгортання ПЗ (deployment); відповідність нормам безпеки SOC 2 Type 2. Вартість: Individuals: безкоштовно. Team: 12 USD/міс. у річній підписці та 15 USD/міс. – у місячній. Enterprise: індивідуально. Оцінки: G2: 4.7 з 5 зірок (менше 5 відгуків). Product Hunt: 4.8 з 5 зірок (28 відгуків). Mintlify На черзі інструмент для полегшення документування процесів на базі програмування – Mintlify. Він виконує аналіз даних і дозволяє генерувати ґайди, керівництва API, SDK-документації на основі вашого коду, а також використовувати AI-чат на базі GPT-4 для аналізу та відповідей на питання за вашими текстами. Mintlify швидко сканує код і генерує пояснювальні інструкції, що робить його ідеальним рішенням для розробників, продуктових менеджерів та support-команд, які прагнуть використати нейромережі для спрощеного написання документації та підвищити зрозумілість коду. На додачу забезпечує легку інтеграцію з GitHub, Slack та Dropbox. Вартість: Free: безкоштовно. Startup: 120 USD/місяць/проєкт – річна підписка, 150 USD – місячна. Growth: 400 USD/місяць/проєкт – річна підписка, 450 USD – місячна. Enterprise: індивідуально. Оцінки: G2: 5 з 5 зірок (менше 5 відгуків). Product Hunt: 5 з 5 зірок (6 відгуків). Capterra: відсутні оцінки. Tabnine Tabnine AI Assistant – це ШІ-інструмент, котрий інтегрується у середовище розробки і слугує як Copilot: доповнює код на льоту, створює власний на основі ваших коментарів, а також надає ШІ-чат, де ви можете ставити додаткові задачі вашою рідною мовою. Під капотом – машинне навчання для надання допомоги при написанні коду, що пропонує персоналізовані та контекстно-залежні підказки на основі мови програмування та вподобань користувача. Tabnine доступний для інтеграції у велику кількість середовищ: Visual Studio, VS Code, IntelliJ IDEA, WebStorm, PhpStorm, Sublime, Eclipse, PyCharm, Android Studio тощо. Алгоритми машинного навчання Tabnine дають масу переваг: відносна точність, підказки щодо генерації коду та підтримка багатьох мов. Вартість: Basic: безкоштовно. Pro: безкоштовно перші 90 днів, потім – 12 USD/місяць. Enterprise: 39 USD/місяць за умови річної підписки. Оцінки: Capterra: 4.5 з 5 зірок (менше 5 відгуків). G2: 4.2 з 5 зірок (37 відгуків). ChatGPT ChatGPT – найвідоміший інтелектуальний асистент, розроблений компанією OpenAI, який використовує штучний інтелект для цілого спектру завдань. “Чат” є одним із найкращих безкоштовних помічників у кодингу: окрім генерування коду він досить гарно пояснює його, надає додатковий контекст, хоча і може інколи оперувати некоректною інформацією без цитування джерел. Досить гарний free варіант для вивчення програмування, мови запитів даних, big data тощо. Також ChatGPT у вигляді мобільного застосунку доступний на iOS та Android. Вартість: Free – безкоштовно (використовується велика мовна модель GPT 3.5). Plus – 20 USD/міс. (більш досконала GPT 4). Team – 25 USD/міс. при оплаті за рік, 30 USD/міс. при оплаті щомісяця. Enterprise – індивідуальний рахунок. Оцінки: Capterra: 4.6 з 5 зірок (42 відгуки). G2: 4.7 з 5 зірок (479 відгуків). Product Hunt: 4.7 з 5 зірок (538 відгуків). Stepsize AI Якщо у фокусі попередніх продуктів автоматизація коду, то штучний інтелект Stepsize AI націлений на задачі масштабу команди. Це система, яка забезпечує інженерні та продуктові команди розумним відстежуванням оновлень. Вона трекає активності та оновлення у вашому відділі розробки і вчасно надає найважливішу інформацію кожному члену групи. Містить метрику з графіками, діаграмами та автоматичним коментуванням, дозволяє побачити прогрес команди, легко інтегрується з GitHub, Slack, Jira тощо. Даний інструмент створено для команд, які хочуть мати звітність про всі процеси з мінімумом нервів та непотрібних мітингів. Також Stepsize має ще один продукт – Stepsize Technical Debt, який здатен відстежувати та виправляти технічний борг. Це дозволяє зекономити гроші та час, які розробники витратили б на bug fixes, простої, опрацювання клієнтських запитів у відділ підтримки і т. п. Вартість Stepsize AI: Team – 29 USD/міс. за Jira-дошку або команду Linear. Tailored Setup (встановлення під ваші особисті запити) – 29 USD/міс. за Jira-дошку або команду Linear. 2 безкоштовні тижні для кожного плану. Вартість Stepsize Technical Debt: Free – безкоштовно. Team – 19 USD/міс. (річна підписка). Business – 49 USD/міс. (річна підписка). Enterprise – індивідуально. Оцінки: Product Hunt: 5 з 5 зірок (18 відгуків). Як вибрати відповідний сервіс: поради та рекомендації Обираючи інструменти розробки на базі ШІ ви маєте орієнтуватися на власні запити. Наприклад, ви маєте вирішити: яка мета використання AI-платформи; які задачі AI має покривати; який функціонал безкоштовної версії (якщо така є) і наскільки він покриває ваші потреби; наскільки функціонал платної версії вас задовольняє та скільки ви готові заплатити; інтегрованість із важливими для вас інструментами; скільки уваги приділяється захисту вашого коду, особистих даних, які політики безпеки використовуються тощо; наскільки AI масштабований та гнучкий: чи зможе він ефективно виконувати задачі при розростанні вашого продукту, інтегрувати хмарні обчислення тощо; підтримка постачальника AI-сервісу та вичерпність документації для роботи з AI. Обрати ТОП сервіси вам також допоможуть наступні джерела інформації: YouTube-огляди. Це найшвидший спосіб знайомства з головним функціоналом ШІ. Він є поверхневим, але достатнім, аби скласти перше враження, дізнатися основні плюси-мінуси та зрозуміти, чи є сенс занурюватися у вподобаний інструмент надалі. LinkedIn та інші професійні соціальні мережі. Підпишіться на авторитетних діячів / спеціалізовані групи за напрямком вашої діяльності у лінкедині та/або іншій професійній мережі і слідкуйте за їхніми постами. Такі люди/спільноти завжди оглядають інновації в ІТ і можуть робити тематичні дослідження щодо AI, надати корисні інсайти стосовно найкращих сервісів, розповісти про власні історії успіху тощо. Поради та досвід знайомих розробників. Зверніться за рекомендаціями та думками до колег або спільноти розробників, які мають досвід роботи з різними сервісами ШІ. Таким чином ви отримаєте корисну інформацію з перших вуст, яка пройшла горнило практики, і збережете свій час, нерви та інші ресурси. Форуми з відгуками. Перевірте рейтинги AI та відгуки користувачів, які вже спробували ТОП сервіси і дослідили алгоритми машинного навчання: які переваги/недоліки вони відзначають, чого їм не вистачає, які рекомендації щодо покращення користувацького досвіду вони пропонують тощо. До прикладу, в даній статті ми використовували рейтинги Product Hunt, G2, Capterra. Пробний період / демо-версія. Можливість безкоштовно пограти з ШІ-сервісом може бути ключовою у прийнятті рішення. Якщо після попередніх 4 пунктів ви досі сумніваєтеся в інструменті – спробуйте trial-версію і розставте всі крапки над “і”. Висновок: майбутнє нейромереж у розробці Наш світ зазнає разючих змін під впливом ШІ – і це факт. Вказані у статті сервіси виводять продуктивність розробників на новий рівень, але і ці інструменти вже мають десятки – якщо не сотні – ефективних аналогів, – обирайте на ваш смак. Нейронки, глибоке та машинне навчання тільки посилюватимуть свою роль, тому питання про майбутнє професії “розробник” починає турбувати все більшу кількість девелоперів. То що ж робити? Вивчайте AI-платформи, використовуйте їхню магію для автоматизації рутини та бусту вашої ефективності. Розвивайте ту експертизу, яка штучному інтелектові наразі недосяжна. Зазвичай це комплексні, креативні, системні знання та навички, що знаходяться на сплетінні кількох сфер – унікальний досвід, котрий роботам не по зубам. Слідкуйте за новинами зі світу ШІ, за нашими оновленнями в блозі і розвивайте навички швидкої адаптації. Світ змінюється з неймовірною швидкістю і найкращі місця дістануться тим розробникам, котрі вміють ловити хвилі та швидко пристосовуватися до змін в ІТ.

В мире дедлайнов правильный выбор технологии играет ключевую роль. Имея многолетний опыт за спиной, мы были вовлечены в разработку на десятках языков, с использованием фреймворков и библиотек. Собрав вместе наши знания, мы решили пролить свет на вопрос: React или Angular? и поделиться своими мыслями с вами. Так что в этой статье мы собираемся преобразовать наш опыт frontend разработки в информацию, которая поможет определить лучшую для вас технологию. Почему Angular 2? Angular JS – это open-source библиотека, предоставляющая всё необходимое для создания клиентской части сайта. Используя Angular 2, вы можете заметить, что вторая версия избавлена от ненужной сложности, которая присутствовала в предыдущей версии. Команда, работавшая над Angular 2, устранила или заменила почти все концепции первой версии. Я говорю о модулях, контроллерах, областях видимости, директивах и так далее. Однако они не остановились только на упрощении фреймворка. Они также добавили новые примечательные фичи и некоторые улучшения. Среди фич мы хотели бы выделить встроенную поддержку приложений и server-side рендеринг. Говоря об улучшениях, мы не можем упустить тот факт, что производительность Angular 2 резко возросла. Как Angular стал популярным? Тот факт, что Angular – создание Google, внушает доверие сам по себе. Фреймворк разработан таким образом, что не травмирует психику разработчиков, которые ранее учили другие технологии и языки. Многие разработчики утверждают, что если код на Angular кажется сложным – тогда ты делаешь что-то не так. Сайты, созданные на Angular JS: YouTube (for PS3), GoodFilms, Freelancer, Upwork. Итак, почему Angular 2 может быть полезным? Давайте рассмотрим его основные плюсы и минусы. Angular pros and cons by Cleveroad Почему ReactJS? В отличие от Angular, ReactJS – это JavaScript-based библиотека с открытым исходным кодом и JSX компилятором. Он в основном сосредоточен на пользовательском интерфейсе и разрешает создавать многоразовые UI рассматриваемые компоненты. Используя React, вы всегда должны помнить, что это не MVC фреймворк, а только библиотека для рендеринга вашего View (V из MVC). Таким образом, React – это интерфейс-ориентированное решение, когда ваши пользователи получают весьма отзывчивый интерфейс с плавной загрузкой. Как React стал популярным? За этим проектом стоит Facebook. ReactJS-решения дружественны с SEO. Производительность и гибкость ReactJS очень высоки. Известные сайты, сделанные с помощью ReactJS: Netflix, Feedly, Airbnb, Walmart Сейчас давайте рассмотрим, почему ReactJS может быть полезным. React pros and cons by Cleveroad Как сделать выбор? Сейчас мы глубже рассмотрим детали и нюансы, которые могут быть достаточно важными при выборе технологии. Лицензия Вы должны быть ознакомлены с видами лицензий фреймворка. Большинство лицензий довольно гибкие в работе, и вы можете использовать их для создания коммерческих приложений без каких-либо проблем. Однако существует целый ряд лицензий, которые не дают вам такой свободы действий. Лучше просто поискать информацию, нежели потом узнать, что вы не имеете права на коммерческое распространение своего продукта, не так ли? Примечание: Одним из преимуществ Angular JS и ReactJS является то, что это open-source фреймворки без каких-либо ограничений в использовании. Стоит отметить, что Angular использует MIT лицензию вместо 3-clause BSD лицензии, которая используется в React. Однако BSD отличается от MIT только присутствием запрета на использование имени владельца прав в рекламных целях. Паттерн MVC Паттерн Model-View-Controller разрешает разделять проекты на три компонента: модель, вид и контроллер. Таким образом, модификацию каждого компонента можно проводить независимо друг от друга, что способствует сжатию кода и повышению качества конечного результата. Помимо шаблонов MVC существуют также Model-View-Presenter (MVP) и Model-View-View-Model (MVVM). Примечание: Среди всех особенностей Angular 2 наличие out-of-the-box MVC паттерна является значительным преимуществом перед React. Из трёх букв акроним MVC имеет только букву «V» – View (в переводе «вид»). Так что если вам нужны буквы «М» и «С», то придётся искать их в другом месте. Размещение шаблонов Говоря о преимуществах Angular 2, стоит упомянуть о простоте написания шаблонов отображения. Имея действительно простой интерфейс, Angular позволяет получить конечный результат с более интуитивным подходом к пользовательскому интерфейсу, который требует меньше кода и кажется «очевидным». React же требует специальные функции для управления отображением данных. В основном это значит, что вам следует определить способ представления данных перед тем, как они будут внесены в DOM. Это может привести к отключению во время попыток определить, как будет отображаться определённый элемент.  Примечание: До 80% того, что вы делаете при создании онлайн-сервиса, основывается на написании пользовательского интерфейса. Так что, лучше взвешивайте подходы этих технологий к шаблонизации, чтобы понять, какой из фреймворков соответствует вашим предпочтениям в написании кода. Привязка данных Angular использует двухстороннюю привязку данных. С её помощью фреймворк может присоединить DOM к данным Model через контроллер. В двух словах: когда пользователь взаимодействует с входными данными и задаёт новое значение вашему приложению, то не только View может быть обновлен, а и Model тоже. Соответственно, вам не нужно писать какой-либо метод отслеживания этих изменений в приложении. Примечание: Подход Angular влияет на производительность из-за того, что создается вотчер (watcher) при каждой привязке данных. React использует одностороннюю привязку, где поток данных направлен только в одном направлении. Благодаря этому, вы всегда будете знать, в каком месте ваши данные меняются. Примечание: Подход React гораздо проще отлаживать, когда речь идёт о больших приложениях. Стоит сказать пару слов о клиентском и серверном рендеринге. Фактически server-side рендеринг использовался в первых версиях Angular и создавал трудности для маркетинга. Поскольку браузер воспринимает рендеринг клиентской стороны, то JavaScript дает отличные возможности для SEO оптимизации. Это является существенным недостатком, ведь большинство цифровых продуктов нуждаются в маркетинговой поддержке, дабы остаться в живых. Кроме того, client-side рендеринг может сильно повлиять на загрузку страниц. Однако начиная со второй версии, разработчики Angular исправили эту проблему, перенеся модель рендеринга на сторону сервера. Производительность Как вы знаете, Angular создает наблюдатель (watcher) для каждой привязки данных, чтобы отслеживать все изменения в DOM. Как только View получает некоторые обновления, Angular начинает сравнивать полученные значения с начальными. Дело в том, что данная технология проверяет не только те значения, которые изменились, но и все остальные тоже. Примечание: Производительность Angular 2 может стать причиной проблем для массивных приложений. Разработчики ReactJS ввели концепцию виртуального DOM, которая позволяет создавать легкое дерево DOM, сохраняя его на сервере. Каждый раз, когда пользователь взаимодействует с сайтом, например, заполняет форму, React создает новый виртуальный DOM для сравнения с предыдущим. После того, как библиотека обнаружит все различия между этими двумя моделями – виртуальный DOM будет перестроен. Весь процесс на сервере выполняется, таким образом снижая нагрузку на браузер. Примечание: Производительность ReactJS возрастает, когда дело доходит до больших объемов данных, поскольку в этом фреймворке нет вотчеров. Взгляните на график, показывающий оценку React и Angular по некоторым критериям. Эти оценки основаны на нашем личном опыте. Cleveroad evaluation of technologies У нас было небольшое собрание, посвященное вопросу «React или Angular?», в ходе которого наши frontend разработчики имели возможность обсудить все плюсы и минусы этих технологий. Они пришли к выводу, что Angular лучше подходит для их предпочтений в написании кода, а также для рабочих задач, с которыми они сталкиваются ежедневно. Для подведения итога всему сказанному выше мы подготовили для вас график. В нём сравниваются Angular 1.X, Angular 2 и React. React vs Angular versions Опыт Cleveroad Из этих двух технологий наши разработчики предпочитают Angular. Имея много наработок, связанных с этим фреймворком, мы способны работать более эффективно, сокращая время, необходимое для реализации проекта. Таким образом наши клиенты экономят на стоимости проекта из-за сокращения часов разработки. Все наши проекты, основанные на этой технологии, имели большое количество frontend-логики в своей структуре, которая часто изменяется. Кроме того, в проектах предусматривался ряд изменений в дизайне. Использование библиотеки React может увеличить время разработки и повысить общую стоимость конечного продукта. Вот некоторые из наших проектов: Age In Days, Count, Lifetile. Все эти веб-сайты основаны на AngularJS в нашей компании. Вы также можете посмотреть наш tech stack, который мы обычно применяем вместе с разработкой на Angular 2. Серверные решения: AWS, DigitalOcean, Hetzner, Microsoft Azure Back-end технологии: Node.js + Typescript 2, Angular 2 Базы данных: MySQL, MongoDB, Redis, PostgreSQL Облачные хранилища: WS S3, Azure storage Платёжные системы: Stripe, Braintree Инфраструктура и управление проектами: Webpack 2, Docker и CI, Jira, Bitbucket / Git Подводя итог Вероятно, проблема выбора между Angular и React в мире frontend может быть сопоставима с выбором между iOS и Android. Обе технологии имеют свои преимущества и недостатки, своих поклонников и ненавистников. Таким образом, у каждого разработчика есть определенные причины использовать ReactJS или другую технологию. В 2017 году все больше веб-проектов будет основано на Angular 2 благодаря фичам, позволяющим упростить жизнь разработчиков. Например, хорошая отладка, шаблон MVC, рендеринг на стороне сервера и т. д. В результате это сократит количество часов, необходимых для разработки, и, соответственно, снизит цены на разработку и обслуживание. Оригинал- https://www.cleveroad.com/blog/react-vs-angular-ultimate-performance-research-2017#.WKMPN5BkZMM.twitter

Введение В данной статье с помощью некоторых примеров мы научим Вас использовать свойство CSS: Z-index. Z-index используется для стабилизации порядка элементов, которые перекрываются. Z-Index является важным свойством CSS. Оно указывает на уровень элемента в стеке. Свойство z-index регулирует вертикальный порядок перекрытия элементов, а сам z-index определяет, какой элемент будет располагаться выше остальных. Элемент с большим указателем порядка стека всегда будет располагаться выше элемента более низкого порядка. А элемент с самым большим индексом перекроет остальные элементы. «Порядок стека» обращается к позиции элемента по оси Z. Чем выше значение z-индекса, тем ближе элемент будет располагаться к верхней части порядка наложения. Синтаксис Z-index  z-index: auto| number | initial | inherit;  Z-index: auto Это настройка по умолчанию, что приписывает одинаковое значение и элементу, и родителю. Если значение не определено для родителя, то оно равняется нулю (0); Z-index: integer number Z-index: 1 Z-index: 2 Z-index: 3 Z-index: negative number Z-index: -1 Z-index: inherit Принимает такое же определенное значение, как свойство элемента родителя. Ниже предоставлен HTML код, который будем использовать.  <!DOCTYPE html> <html> <head>     <title>Z-Index tutorialtitle> head> <body>     <div id="one">Onediv>     <div id="two">Twodiv>     <div id="Three">Threediv>     <div id="Four">Fourdiv>     <div id="Five">Fivediv> body> html> Далее мы используем CSS код для установки внешнего вида всем элементам HTML, что использовались ранее. #one {     border: solid 5 px silver;     background-color: Aqua;     position: absolute;     z-index: 1;     opacity: 0.5;     height: 100 px;     width: 100 px; } #two {     border: solid 5 px silver;     background-color: Green Yellow;     position: absolute;     top: 30 px;     left: 35 px;     z-index: 2;     opacity: 0.5;     height: 100 px;     width: 100 px; } #Three {     border: solid 5 px silver;     background-color: Coral;     position: absolute;     top: 60 px;     left: 60 px;     opacity: 0.5;     z-index: 3;     height: 100 px;     width: 100 px; } #Four {     border: solid 5 px silver;     background-color: Yellow;     position: absolute;     top: 90 px;     left: 90 px;     opacity: 0.5;     z-index: 4;     height: 100 px;     width: 100 px; } #Five {     border: solid 5 px silver;     background-color: MediumSpringGreen;     position: absolute;     top: 120 px;     left: 120 px;     opacity: 0.5;     z-index: 5;     height: 100 px;     width: 100 px; } Полный код <!DOCTYPE html> <html> <head>     <title>Z-Index tutorialtitle>     <style>         #one {             border: solid 5px silver;             background-color: Aqua;             position: absolute;             z-index: 1;             opacity: 0.5;             height: 100px;             width: 100px;         }         #two {             border: solid 5px silver;             background-color: Green Yellow;             position: absolute;             top: 30px;             left: 35px;             z-index: 2;             opacity: 0.5;             height: 100px;             width: 100px;         }         #Three {             border: solid 5px silver;             background-color: Coral;             position: absolute;             top: 60px;             left: 60px;             opacity: 0.5;             z-index: 3;             height: 100px;             width: 100px;         }         #Four {             border: solid 5px silver;             background-color: Yellow;             position: absolute;             top: 90px;             left: 90px;             opacity: 0.5;             z-index: 4;             height: 100px;             width: 100px;         }         #Five {             border: solid 5px silver;             background-color: MediumSpringGreen;             position: absolute;             top: 120px;             left: 120px;             opacity: 0.5;             z-index: 5;             height: 100px;             width: 100px;         }     style> head> <body>     <div id="one">Onediv>     <div id="two">Twodiv>     <div id="Three">Threediv>     <div id="Four">Fourdiv>     <div id="Five">Fivediv> body> html> Наш результат: Заключение Надеемся, что данная статья Вам понравилась. Она будет полезной для новичков в HTML и CSS. Источник: http://www.c-sharpcorner.com/UploadFile/88d8c0/z-index-property-in-css/

Введение Элементарные и ссылочные типы, или элементарно-ссылочный дуализм на примере строк в JavaScipt. Одно из ключевых правил языка JavaScript состоит в особенностях выполнения операций над элементарными типами данных и ссылочными типами. Так, числа и логические величины  являются элементарными типами данных, операции над ними выполняются по значению, они состоят из относительно небольшого и заранее определенного числа байт, поэтому операции над ними легко выполняются даже низкоуровневым интерпретатором JavaScript. Примером ссылочных типов являются объекты. Что касается массивов и функций – они являются специализированными типами объектов, поэтому также представляют собой ссылочный тип данных. Эти типы данных характеризуются произвольным количеством свойств и элементов, поэтому операции над ними выполняются намного сложнее. В случае массивов и объектов больших размеров, операции по значению могут привести к избыточному копированию и сравнению огромных объемов памяти, что легко может поставить под сомнение оптимальность использования клиентских ресурсов. Примером работы с элементарными типами послужит следующая пара инструкций: var a = 5; // переменная с именем a хранит значение 5 var b = a; // производится операция копирования, исключительно по значению: переменная с именем b хранит другое значение 5 (его дубликат) другим примером может послужить изменение значения внутренней копии переменной: var a = a + 5; // эта строка изменяет только внутреннюю копию переменной с именем a, перезаписывая в нее значение 10 Что касается работы со ссылочными типами, простейшим примером послужит набор операций над двумя массивами: var myArray = [10, 20, 30, 40]; // создаем переменную ссылочного типа, а именно массив с именем myArray состоящий из четырех элементов var otherArray = myArray; // присваиваем новой переменной с именем otherArray первую перменную, при этом, копирование значений из переменной с именем myArray не производится, мы разрешаем новой переменной работать со значениями из первой. otherArray[0] = 110; // так изменив якобы значения ново-созданной второй переменной, на самом деле мы производим операцию перезаписи значений из первой переменной. alert(myArray); // отобразим значение 110,20,30,40 Стоит отметить, что строки, которые, на первый взгляд, могут восприняться в качестве ссылочного типа в силу неограниченности своей длины, что касается JavaScript, то строки зачастую рассматриваются с позиции элементарного типа из-за того, что не являются сущностью с природой объекта. Что же касается реальных случаев, то строки не могут вписываться в двойственный элементарно-ссылочный тип. Строки нельзя представить объектами, поэтому можно предположить, что их можно отнести к элементарному типу, но такого рода ситуация может привести к непроизвольному расходованию системных ресурсов, в случае произведения операций по значению, в силу возможности задания произвольной длины строки. Поэтому в JavaScript нельзя изменить содержимое строки, пусть даже существует специальный метод charAt(), который после вызова вернет символ из заданной строки, но не существует метода setChartAt(), который мог бы ввести на это место другой символ. Строки в JavaScript преднамеренно созданы как неизменяемые сущности, в нем отсутствуют элементы языка, предполагающие возможность изменения символов в строке. Несмотря на то, что невозможно определить, каким образом производится копирование строк, есть возможность определить, как производится сравнение строк – по ссылке или же по их значению. <script>         var row1 = "hello world";         var row2 = "hello " + "world";         if (row1 == row2) {             alert("строки сравниваются по значению")         } script> Поскольку мы сравниваем абсолютно разные строки, состоящие из одинаковых последовательностей символов, но они интерпретируются как эквивалентные, следовательно, увидим соответствующую надпись. Важно помнить, что сравнение строк выполняется строго посимвольно и производится для числовых значений отдельного символа из общепринятой кодировки Unicode последовательно. Кроме того, сравнение символов происходит с учетом регистра, т.е. все прописные буквы будут иметь «вес» меньший, чем соответствующие строчные буквы. var word1 = "hello"; var word2 = "Hello"; var rez = word1 < word2; document.write(rez); // false Также стоит помнить, что сравнение происходит от первого определения разных символов, при этом длина строки не учитывается var word1 = "hello w"; var word2 = "hello World"; var rez = word1 > word2; document.write(rez); // true Порой получая знания от пользователя в виде строк, к примеру, используя prompt, возвращается строка, введенная пользователем. В таком случае нельзя сравнивать числа, полученные от пользователя, поскольку результат будет не верен. var a = "5"; var b = "10"; var rez = a > b; document.write(rez); // true Посимвольное сравнение дает результат: символ ‘5’ больше, чем ‘1’. Стоит помнить о явном преобразовании полученных значений к числовым. Использую унарный знак плюс «+» var a = "5"; var b = "10"; var rez = +a > +b; document.write(rez); // false Как видим, язык JavaScript имеет много тонкостей, о которых стоит помнить при написании своих сценариев и программ. В дальнейшем вы сможете самостоятельно обнаруживать подобные особенности и грамотно ими пользоваться.  

ASP.NET Core представляет собой существенный редизайн ASP.NET. В этом разделе представлены новые концепции в ASP.NET Core, а также содержатся объяснения, как они помогают разрабатывать современные веб-приложения.   Что такое ASP.NET Core? ASP.NET Core – это новый общедоступный и кроссплатформенный фреймворк для создания современного облака приложений, связанных с подключением к интернету, таких как веб-приложения, приложения для интернета вещей и мобильных серверов. Приложения ASP.NET Core могут работать на .NET Core или на полной платформе .NET Framework. Этот фреймворк был спроектирован таким образом, чтобы обеспечить оптимизированную платформу разработки для приложений, которые перемещаются в облако или выполняются локально. Он состоит из модульных компонентов с минимальной перегрузкой, поэтому вы сохраняете гибкость при построении своих решений. Существует возможность разрабатывать и запускать кроссплатформенные ASP.NET Core приложения на Windows, Mac и Linux. Фреймворк ASP.NET Core общедоступен на GitHub. Зачем строить ASP.NET Core? Первая предварительная версия ASP.NET появилась почти 15 лет назад как часть платформы .NET Framework. С тех пор миллионы разработчиков использовали технологию для создания и запуска отличных веб-приложений. За эти годы удалось добавить и разработать множество возможностей. ASP.NET Core имеет ряд архитектурных изменений, которые приводят к более компактной и модульной структуре. ASP.NET Core больше не основывается на файле System.Web.dll. Он основан на наборе детальных и хорошо структурированных пакетов NuGet. Это позволяет оптимизировать приложение с помощью пакетов NuGet, которые вам необходимы. Преимущества меньшей площади поверхности приложения включают: более строгую защиту, сниженный уровень обслуживания, улучшенную производительность и снижение затрат в модели «плати за то, что используешь». С помощью ASP.NET Core вы достигните таких основных улучшений: Единая история создания для Web UI и Web APIs Интеграция современных клиентских фреймворков и схем разработки Конфигурация, готовая для работы в облаке и основывающаяся на окружении Встроенная поддержка внедрения зависимостей Новый легкий и модульный HTTP-запрос Возможность хостироваться в IIS либо в вашем собственном приложении Фреймворк построен на платформе .NET Core, которая поддерживает истинное совместное управление версиями приложений Поставка как полные NuGet пакеты Новый инструментарий, который упрощает разработку современных веб-приложений Сборка и работа кроссплатформенных ASP.NET приложений на Windows, Linux и Mac Общедоступный и социально-ориентированный фремворк   Создание web UI и web APIs с использованием ASP.NET Core MVC Вы можете создавать службы HTTP, которые охватывают широкий круг клиентов, включая браузеры и мобильные устройства. Поддержка нескольких форматов данных и согласования содержимого – уже встроены. ASP.NET Core - идеальная платформа для создания web APIs и RESTful приложений на .NET Core. Вы можете создавать хорошо факторизованные и тестируемые веб-приложения, которые следуют шаблону Модель-Вид-Контроллер (MVC). Razor обеспечивает продуктивный язык для создания Views Тег-хэлперы позволяют серверному коду участвовать в создании и рендеринге HTML- элементов в файлах Razor Привязка модели автоматически отображает данные из HTTP-запросов в параметры метода действия Проверка модели автоматически выполняет проверку на стороне клиента и на стороне сервера   Разработка клиентской стороны ASP.NET Core предназначен для беспроблемной интеграции с различными клиентскими платформами, включая AngularJS, KnockoutJS и Bootstrap. Материал подготовлен на основе статьи: https://docs.microsoft.com/en-us/aspnet/core/. Авторы: Daniel Roth, Rick Anderson, Shaun Luttin