Путь JavaScript Senior подборка ресурсов для вдохновения


Оглавление (нажмите, чтобы открыть):

Студия готового дизайна GS studio

Login

Советы сеньоров — постоянная рубрика, в которой опытные специалисты делятся практическими советами с джуниорами — общие лайфхаки по обучению, какие книги и ресурсы читать, какие навыки осваивать и многое другое. В этом выпуске говорим о Front-end/JavaScript разработчиках.

Михаил Стадник, Senior JavaScript Engineer, 16 лет опыта во Front-end/JS:

Первое и самое важное — быть фанатом своего дела. Если этого нет, зачем себя обманывать, займитесь тем, что вам по душе. На самом деле зарабатывать можно не меньше (а может и больше) и в других сферах. Работа разработчика — это постоянное обучение. Ежедневное. И это должен быть осознанный выбор. Со временем вы обнаружите, что знания, которые были актуальны 15 лет назад, вдруг оказались устаревшими и никому не нужными. Действительно, кому какое дело в 2020 году, какие особенности были у рендеринга таблиц в IE6? А ведь когда-то об этом могли и на собеседовании спросить.

Поэтому всегда проявляйте любознательность. И главное — не бойтесь программировать и совершать ошибки.

Читайте официальные документации, следите за изменениями стандартов. Обновляйте то, что у вас в голове — забывайте ненужное, складывайте то, что актуально.

Не бойтесь задавать вопросы более опытным коллегам. Единственное, что важно понимать — вопросы должны быть максимально конкретизированы. Опытные люди, как правило, с радостью готовы поделиться своим опытом, но только в том случае, если понимают и видят, что человек задает вопросы по существу и действительно пытается разобраться в той или иной проблеме, а не просто пытается её решить чужими руками.

Заботьтесь о глубине знаний больше, чем об их ширине. Глубина — это фундамент. Чем прочнее фундамент, тем лучше и долговечней построенный на нем храм ваших знаний. Экспертизой обладает тот, кто понимает глубинную суть вещей, а не имеет лишь поверхностное представление о них. Есть вещи, которые не меняются даже с течением времени. Вот они — самые важные.

Я гарантирую, что специалиста с глубокими знаниями чистого JavaScript и пониманием базовых принципов программирования, алгоритмов и структур данных, но с отсутствием знания отдельного фреймворка (или какой-то библиотеки) с гораздо большей вероятностью возьмут на работу на позицию сеньора, чем того, кто условно знает или применял десять фреймворков, но не понимает, чем двоичный поиск отличается от простого перебора или чем нестрогое равенство отличается от строгого. Условно, можно сказать так, что разработчик, который теоретически может сам создать фреймворк (то есть имеет для этого достаточно базовых знаний) гораздо более интересен того, кто умеет лишь применять какой-то конкретный.

Поэтому изучайте шаблоны проектирования. Все наши любимые фреймворки, в большинстве своем — это набор реализаций тех или иных шаблонов. Например, для ООП-парадигмы много шаблонов описал и систематизировал Мартин Фаулер. Тем не менее JavaScript мультипарадигмальный язык, поэтому не зацикливайтесь на ООП, изучите принципы функционального, императивного/декларативного и основанного на прототипах программирования. Изучайте, что такое неблокируемый ввод-вывод и асинхронность, событийно-ориентированное, аспектно-ориентированное программирование и так далее (информацию, благо, сейчас найти не составляет труда). Особое внимание уделите пониманию базовых принципов функционирования языка, с которым вы работаете. Протоколы и стандарты, которые связаны с ним и со средой окружения, в которой выполняется ваша программа. Разберитесь, что такое многопоточность и однопоточность, чем потоки отличаются от процессов. В конце концов, опуститесь до низких уровней и разберитесь, как работает эта чертова железяка, которая стоит перед вами на столе и которую называют компьютером. Попробуйте, например, достоверно разобраться, что физически происходит в машине, когда вы объявляете в коде переменную и присваиваете ей какое-то значение. Через сколько и какие программные и аппаратные слои пройдет этот процесс? И помните: «There is no silver bullet».

Это важнее изначально, чем просто быстро выучить очередной интерфейс новомодного фреймворка и начать производить некий, что-то делающий код. Тем не менее изучайте и фреймворк, с которым вы вынуждены в данный момент работать. Просто это будет легче сделать, если ваш гандикап базовых знаний существенен.

Ведь мир очень динамичен. Вы не успели еще досконально изучить все тонкости работы Angular 1, а где-то кто-то уже пишет на Angular 5. Мой личный опыт говорит о том, что в самом начале выгодно инвестировать своё время в фундаментальные знания, так как всё остальное — приходит и уходит.

Также мы часто пользуемся такими ресурсами, как Stack Overflow и Google, чтобы найти решение той или иной проблемы. Это нормально, так как экономит наше время. Но не стоит слепо копировать решения. Каждый раз, когда вы прибегаете к этому, пытайтесь разобраться в сути найденного решения, разберитесь, как оно работает. Найдите второе похожее, сравните оба, попытайтесь понять, чем одно лучше другого. Может быть вы сможете в результате придумать какое-то своё, которое будет ещё лучше. Если возникают вопросы или непонимание — обсудите с коллегами. Вы — Junior, у вас есть для этого время, от вас никто не требует феноменальной скорости. Но все ждут, что ваш профессионализм со временем будет расти.

Если же вы попали на проект, в котором вам досталась скучная и неинтересная работа, но по каким-то причинам альтернатив нет — не отчаивайтесь. Мир OpenSource всегда готов вам предложить что-то интересное. Попробуйте сделать свой вклад в какой-либо популярный проект или начните свой, если у вас есть хорошая идея. В конце концов, опыт, приобретенный на практике, — самая важная составляющая вашего роста, да и будет что показать на следующем интервью в какую-либо компанию.

Сергей Россоха, Software Architect, 11 лет опыта во Front-end/JS:

JavaScript давно уже используется не только для разработки динамических интерфейсов пользователя, но и для написания достаточно сложной бизнес-логики. Поэтому знание алгоритмов и структур данных становится критичным для JS-разработчиков. Однако, как показывает практика собеседований и опыт работы с начинающими и не очень JS-разработчиками, их знания о базовых алгоритмах и структурах данных оставляют желать лучшего. Поэтому начинающим JS-разработчиками я настоятельно рекомендую начать свой нелегкий путь в IT с изучения алгоритмов и структур данных.

Руководствуясь принципом: «полезность книги обратно пропорциональна её толщине», я не буду рекомендовать труды Д. Кнута, вместо этого быстрее и полезнее начать со статьи структур данных, о которых стоит знать программисту». Здесь описаны основные структуры данных и алгоритмы работы с ними. Для тех из вас, кто хочет более детально ознакомиться с алгоритмами и структурами данных, я рекомендую книгу Н. Вирт «Алгоритмы и структуры данных», ее достаточно легко найти в Google или купить в книжном магазине. Я бы рекомендовал реализовывать в коде каждый алгоритм из этой книги, это поможет набить руку в написании кода, а заодно поможет лучше запомнить особенности реализации алгоритмов на JS. Как вариант, можно написать собственную библиотеку с реализацией алгоритмов, описанных в книге.

JS экосистема развивается очень динамично. Новые библиотеки и фреймворки появляются чуть ли не каждые полгода. И перед начинающими JS-разработчиками стоит нелегкий выбор, какой из них стоит учить. Мой ответ достаточно прост — учите JavaScript. В этом вам поможет серия книг YDKJ, тем более она доступна на GitHub. Для любителей настоящих книг доступна также и бумажная версия. Не стоит забывать и о всеми любимом Mozilla Development Network (MDN) — это отличный справочник, в который можно подсмотреть, если что-то забыли 😉

При изучении фреймворков настоятельно рекомендую изучать код двух-трех наиболее популярных open source проектов, которые используют изучаемый вами фреймворк. Это поможет понять, как данный фреймворк или библиотеку лучше всего использовать и для чего.

Ну и последнее, это, конечно, практика, практика и еще раз практика. Для получения практики я рекомендую поддерживать различные open source проекты, благо их сейчас много на любой вкус, было бы желание 🙂

Александр Смолянинов, Front-end Tech Lead, более лет опыта во Front-end/JS:

Если заводить речь о современном фронтенде, то следует соблюдать осторожность в выборе советов для начинающих специалистов. Последнее время наша сфера бурно растет как сама по себе, так и разбрасывая свои асинхронные щупальцы во многие смежные технологии. Не успеваешь ознакомиться с одним модным фреймворком, как рядом появляются еще два. Вроде бы еще вчера какая-то клевая спецификация числилась в черновиках w3с, а уже сегодня она готова к работе в большинстве современных браузеров (а завтра и в браузере от Microsoft). Но, посоветовав обратить внимание на какой-нибудь модный фреймворк, можно столкнуться с тем, что послезавтра он уже будет не актуален. Это я все к чему. Новые технологии приходят и уходят, а хорошие знания базы фронтенда будут полезны всегда вне зависимости от того, какой путь развития вы выберете в этой сфере.

Поэтому в первых двух советах хотелось бы поговорить о верстке и JS.

Не отодвигайте верстку на второй план

Последнее время часто можно встретить довольно пренебрежительное отношение к верстке. Возможно, именно поэтому сейчас так сложно найти действительно хорошего HTML/CSS специалиста, который кроме качественной верстки заботится о клиентской производительности, делает приятную анимацию, не забывает о доступности, применяет современные техники и знаком с нюансами фреймворков и CMS, под которые верстает. Помимо основ уделите время нюансам — и станете на голову выше целой армии верстальщиков.

Не забывайте о нативном JS

Если раньше мы сталкивались с поколением «jQuery-программистов», не умеющих обращаться с ванильным JavaScript, то сейчас все чаще встречаются молодые разработчики, взращенные на модном JS-фреймворке и не способные написать простейший алгоритм на чистом JS, иногда практически не владеющие версткой. Не надо так. Хорошие знания языка позволят намного быстрее понять любой новый фреймворк на нем. И да, штудируя проверенные временем книги по JS, не забывайте о ES2015.

Одновременно и простой, и сложный вопрос, где же этой базой овладевать. Кому-то проще штудировать книги, кому-то ходить на офлайн-курсы, кому-то заниматься онлайн. Несмотря на то, что курсы фронтенда — одни из самых популярных среди всех айтишных, там не всегда высокий уровень преподавания из-за низкого порога вхождения. Лично мне видится идеальным сочетанием — проверенные онлайн-курсы + ментор, к которому всегда можно обратиться с вопросом. Если проблемы с английским языком, то можно попробовать свои силы на ITVDN, Loftschool, HTML Academy или Hexlet. Среди англоязычных неплохо себя показали freeCodeCamp, udemy, Code School и codecademy. Ментора же лучше искать по рекомендациям, личному отношению и в офлайн-доступности. Однако слишком увлекаться курсами тоже не стоит, чем раньше вы перейдете к реальным задачам, тем лучше.

Старайтесь всегда быть в теме

На собеседованиях довольно часто бывает ситуация, когда знания вроде бы опытного разработчика с приличным стажем работы были неплохими по версии, скажем, года, но устаревшими по современным меркам. В такой ситуации он может быть в более проигрышном положении перед менее опытным, но следящим за индустрией кандидатом.

В современном мире фронтенда новые технологии, техники, инструменты и подходы появляются чуть ли не каждый день, поэтому очень легко выпасть из его актуального контекста, что может резко снизить конкурентоспособность и продуктивность.

Последние 5 лет я являюсь соавтором еженедельного дайджеста по фронтенду на хабре. И знаете, несмотря на то, что каждый выпуск обычно содержит более сотни свежих ссылок, еще не было ни одной недели, когда нам было бы нечего публиковать.

Каналов для мониторинга на сегодняшний день более чем достаточно: это и вышеупомянутый дайджест, и RSS/Twitter лента с подпиской на тематические (микро)блоги, и периодические почтовые рассылки, и агрегаторы ссылок типа echojs.com, frontendfront.com или heydesigner.com. Для любителей соцсетей есть reddit.com/r/Frontend, hashnode.com и medium.com (с фильтрацией по нужному тегу), паблики и каналы в slack или telegram. Также нельзя забывать о подкастах, которые последнее время растут как грибы — Веб-стандарты, Frontend Weekend, Пятиминутка React, Пятиминутка Angular, Фронтёрки, devschacht и многие другие.

Проактивность

Старайтесь быть на шаг впереди и делать чуть больше, чем требует задача (если есть такая возможность и позволяет бюджет, конечно же).

Сделали сайт с перспективой будущей поддержки или в процессе работы над крупным проектом? Добавьте стайлгайд и облегчите жизнь всем разработчикам на проекте. Закончили верстку быстрее, чем планировали? Добавьте хотя бы базовую поддержку accessibility, проверьте стили для печати и убедитесь, что анимация работает со скоростью 60 FPS. Осваивайте и предлагайте добавить поддержку offline, оцените возможность создания PWA и поборитесь за 100 баллов в google page speed.

Увидели разнобой в коде? Предлагайте внедрить линтеры, поднимите вопрос о стандартизации. И не забывайте делиться полученными знаниями с командой.

Ответственность

Последний, но, наверное, самый важный совет. Можно идеально освоить любую технологию, стать богом CSS, JavaScript ниндзя и быть крутым спецом в Angular и React. Но если вы не попадаете в свои же естимейты, регулярно срываете сроки, подставляя всю команду, не сигнализируете вовремя о проблемах на проекте, исчезаете с рабочего места без объяснений, убегаете на условную тренировку во время критической ситуации на проекте и тому подобное — то в таких ситуациях ценность ваших знаний будет стремительно катиться к нулю. К сожалению, дежурный набор слов в конце каждого второго резюме (про ответственность, усидчивость и стрессоустойчивость) на деле оказывается просто набором слов, а найти по-настоящему ответственного и надежного специалиста — тот еще квест.

Роман Савицький, Team Lead, Senior Software Engineer, 6 років досвіду у Front-end/JS:

Напевно, я не буду розпочинати з того, як «увійти в ІТ», адже занадто багато статей на цю тему. В ІТ увійти можливо, головне розуміти, що таке ІТ. Я працюю зі студентами і випускниками ВНЗ, і деякі з найбільш активних отримують роботу у свої 18. З чого ж почати у фронтенді?

Основи

Розпочинати потрібно з основ програмування і мови, якою ви хочете займатись. Фронтенд розробку я пропоную вивчати з основ HTML5, а саме семантики. Насправді, у мене погані новини тим, хто починає з ToDo List React і вважає, що семантика відійшла в минуле, і все, що зверстано div елементами, — це чудово. Розуміння різниці між b та strong залишиться на все життя, і саме цією базою ви будете користуватись щодня.

Також вивчайте CSS, до того ж послідовно. Починати з bootstrap не раджу, краще чистий CSS. Завжди вважав помилкою, коли розробники не розуміють одиниць вимірювання, підбирають все навмання. Розповім про цікавий випадок на співбесіді одного новачка на вакансію трейні. Розпочали ми, як завжди, із запитань невеликої складності для розуміння рівня. Усе наче добре, і дійшли до CSS. Отримали позитивні відповіді на рахунок flex, box моделі й інші. Коли ж запитали на рахунок одиниць вимірювань, отримали відповідь: «Є пікселі, навіщо ще щось». В очах виник подив і сумнів на рахунок знань. Цікавим відкриттям співбесіди стало те, що, чим простіше було запитання, тим гірша була відповідь.

Мастер Йода рекомендует:  Функциональное программирование на языке Python

На жаль, новачок намагався вивчати трендові технології і взагалі не розумів, як все працює, а в голові був лише набір кейсів, які він дістав з простору інтернету.

Вивчайте спочатку основи, а далі набирайте оберти і додавайте технології.

Найкращою мовою програмування на фронті був і залишається JavaScript. Розпочинайте з нього, а далі можна CoffeeScript, TypeScript й інші. Але головне, розпочинайте з останнього стандарту, не намагайтесь вивчити старий стандарт, якому 10 років, і думати, що, можливо, знадобиться на старих проектах. У такому разі будете завжди доганяти поїзд.

Ментор

Після того як ви вже маєте мінімальну базу, на мою думку, найкращий варіант — це знайти ментора — людину, яка зможе вас направити в правильний бік і допоможе швидко розібратись з принадами фронтенду. Адже різноманіття технологій, підходів і фреймворків просто вражає.

Курси

Ну якщо ж ви не знайшли ментора і немає змоги стати трейні в одній з компаній, тоді віддайте перевагу курсам. Якщо мову вести про офлайн, то віддавайте перевагу тренінгам при компаніях: саме їм цікаво якісно навчити вас і запросити на роботу. Це те, що потрібно молодому спеціалісту. Платні офлайн-курси, які побудовані на комерційній основі, я не раджу, тому що зацікавленості у менторів немає (тільки грошова), і вона не залежить від ваших результатів. Добре, якщо ви дістанете хоч якусь інформацію, а здебільшого youtube канал допоможе більше.

Якщо ведемо мову про онлайн-ресурси, то моя порада, перевіряйте і дивіться матеріали з різних джерел, адже кожен спікер дає матеріал у тому ракурсі, у якому він розуміє, він додає своє бачення і не завжди це правильно. Якщо ж ви пройшли курс, побачили недоліки і сформували свою думку на рахунок того чи іншого матеріалу, вітаю, ви на правильному шляху.

Англійська

Тут все просто: не володієте англійською, навряд чи зможеш програмувати. Уся актуальна інформація англійською, ресурси українською та іншими мовами перекладають із запізненням, якщо взагалі перекладають. Та й мови програмування, у цілому, «англомовні».

Намагайтеся читати документацію англійською, на перших етапах головне читати, розуміти і бажано вміти відповідати.

Практика

Напевно, буду я не першим і не останнім, хто скаже, що інформація, яку прослухав, прочитав з будь-якого джерела, не збережеться в пам’яті і не допоможе вам, якщо ви не спробували її на практиці.

Вивчаєте створення макетів і HTML, обов’язково скачайте макет і зверстайте його. Без практики неможливо увійти в ІТ. Будете проходити курсів — і розвитку ніякого не буде.

Коли на практиці виконаєте декілька завдань, тоді спробуйте визначити напрямок фронтенду, у якому хочете розвиватись, — і вперед.

Ресурси

Не люблю я надавати посилання, оскільки інформація за декілька днів вже може бути не актуальна. Швидкість розвитку технологій занадто висока, але все ж.

По-перше, рекомендую ресурси в стилі готових рішень CodePen. Тут можна і попрактикувати технології, вивчити і зрозуміти, як це виконують інші, і знайти різні завдання.

Далі, напевно, W3Schools, MDN web docs, HTML5 Rocks — це набір довідників, які оновлюються гарно і де завжди можна знайти актуальну інформацію.

На рахунок онлайн-відеоконтенту, тут раджу ютуб з різноманітними каналами, cousera, udemy, codeschool.

Наостанок додам, що головне мати бажання, вибрати напрямок і активно розвиватись в ньому, завжди виконуйте роботу, яку пропонують, практика допоможе вам — і з часом отримаєте все кращі і кращі задачі. Не хвилюйтеся, коли робите помилки, наступного разу вийде краще. Який критерій того, що ви можете працювати і боротись за позицію junior для мене? Коли декілька рандомних практичних задач ви можете виконати різними способами і розумієте різницю між ними, переваги кожного. Це перша ознака готовності до роботи у фронтенді.

Тимофей Лавренюк, Full Stack Engineer, 6 лет опыта во Front-end/JS:

Front-end сегодня развивается очень быстро. 10 лет назад для создания Front-end хватало знания верстки и jQuery. Но сейчас совсем другое время — количество фреймворков, библиотек, языков и прочих фишек во Front-end просто зашкаливает. И тут у новичка может появиться вопрос: как разобраться в огромном количестве фреймворков и библиотек и что и в какой последовательности изучать, чтобы стать Front-end разработчиком в 2020 году? Придется много учиться, если хочется быть хорошим разработчиком и решать сложные задачи. Но если такой задачи нет, то список можно сократить вдвое.

0. English

Английский очень важен. Часто нужно будет читать документацию, статьи и книги, смотреть уроки и лекции, общаться. Почему на месте? Все описанное ниже можно выучить, не зная хорошо английский язык. Но с годами появляется нужда в коммуникации и углубленном изучении. И здесь без знаний английского будет трудно.

0. Computer Science

Как и с английским, каждый должен сам для себя решить, на какой пункт ставить CS.
Часто хочется изучить только одно направление (в нашем случае Front-end) и сразу идти в бой. В итоге появляются программисты, которые и базовых вещей не знают. Отсюда вытекают проблемы с качеством кода, эффективностью алгоритмов и созданием велосипедов.

Если хочется быть хорошим разработчиком и не зацикливаться в будущем только на Front-end, то нужно понимать:

  • как работает ЭВМ;
  • как работает Сеть и Интернет;
  • базовые алгоритмы и структуры данных;
  • устройство браузера.

Здесь я бы посоветовал посмотреть лекции курса CS50 Стэнфордского университета. Поначалу это не поможет стать разработчиком, но с годами вы поймете, что программирование — это полноценная область знаний, которая требует в том числе и инженерной подготовки.

1. Верстка

Конечно, сейчас хочется выучить React или Angular, взять Bootstrap и сразу делать веб-приложения. Но нужно помнить, что веб начинался не с них. В первую очередь желательно выучить HTML и CSS и сверстать пару десятков сайтов. Нужна практика, чтобы понять, как работает верстка блоками, flex-aми или даже таблицами, и где какой layout нужно применять. Постепенно можно освоить сетки, верстку под различные экраны и препроцессоры.

2. JavaScript

Если CS для вас немаловажно, то лучше сначала изучить язык С, а после него взяться за изучения основного языка для Front-end разработки. А именно JavaScript-a по спецификации ES5. Надо понять, что умеет этот язык, как реализовать на нем базовые алгоритмы и паттерны, и потом уже есть смысл посмотреть на его эволюцию в виде ES2015 или TypeScript. Для изучения базового JavaScript я бы посоветовал серию уроков JavaScript Road Trip на CodeSchool. Это может показаться скучно и бессмысленно поначалу. Поэтому нужно не затягивать и браться за следующий пункт. Но не стоит забывать, что нужно стремиться учить JavaScript всегда, постепенно познавая тонкости языка и его Best Practices. В этом может помочь ресурс learn.javascript.ru

3. Frameworks

Можно учить Framework, не зная тонкости JS. Но, по моему мнению, лучше учить фреймворк после того, как знаешь хорошо JS. Со временем фреймворки меняются, а JavaScript остается. И, зная основные паттерны и JavaScript, можно выучить любой Framework. Но для начала хорошо подойдут уроки на том же CodeSchool.

Однако с фреймворками также можно и переусердствовать. Не редко встречал случаи у новичков, когда небольшие сайты делали на React или Angular, потому что они были популярны, хотя можно было обойтись Bootstrap и jQuery. Со временем получится научиться использовать технологию там, где она лучше всего подходит под задачи.

4. Работа

Самообучение — это хорошо, но командной работе можно научиться только работая на реальных проектах. Но стоит помнить что работа не всегда гарантия роста знаний и опыта. Например: если ты работаешь верстальщиком, то ты вряд ли научишься правильно делать приложения на React.

Поэтому если хочется расти не только в $ плане, я бы рекомендовал не останавливаться учиться. А чтобы изучать глубже верстку, JavaScript, фреймворки и различные новые технологии — можно параллельно создавать свои pet-проекты. Решение реальных проблем, которые действительно что-то значат для тебя — это лучший путь к становлению хорошего разработчика. А если получится выпустить свой проект в production и поддерживать его, то это 2x boost опыта. Проверено на личном опыте и проекте.

Я надеюсь эти советы помогут стать хорошим разработчиком, но они не решают всех проблем. Front-end разработка постоянно меняется. И обучение никогда не закончится. Это значит, что сколько бы книг ты ни прочел, сколько бы митапов ты ни посетил или сделал проектов, обучение должно продолжаться, если ты хочешь оставаться в теме.

Влад Лукьянов, Senior Software Engineer, 5 лет опыта во Front-end/JS:

Первым делом я бы стал учить английский, как мне кажется, хорошим знанием английского можно перекрыть недостачу каких-либо технических навыков при прохождении интервью, а в условиях того, что большинство компаний на рынке работают с иностранными заказчиками, это несомненно плюс. В большинстве случаев вам придется общаться с клиентом по скайпу либо вживую, и в дальнейшем каждый день у вас будут митинги с представителем заказчика либо с ним самим, иногда заказчик сам проводит интервью новых сотрудников к себе в команду, тут пригодятся ваши навыки коммуникации.

Что касается технических навыков, сейчас ценится знание ReactJS и Redux, но важно понимать, что это самый сложный стек за всю историю Front-end разработки, поэтому если у вас что-то не будет получаться либо что-то непонятно, не стоит расстраиваться. Я бы не стал смотреть в какой-то большой проект, где используется React, Redux, Immutable, RxJS и еще много чего, а учить все поэтапно. Конечно же, нужно начинать с самых основ, понимание цикла жизни компонентов (например, в чем отличие componentDidMount от componentWillMount), что такое state, props, какое между ними отличие и когда нужно использовать одно либо другое, как работают events в React. Есть замечательная библиотека, которая позволяет сразу писать React код без каких-либо настроек npm, webpack, babel и прочего, — это create-react-app, однозначно это сэкономит массу времени.

Подборка лучших ресурсов для обучения JavaScript.

Наткнулся тут на сайте proglib.io на очень интересную подборку ресурсов для всех желающих начать изучать JavaScript. Лично для меня, тема крайне актуальная, потому не смог удержаться и решил разместить данный текст у себя (разумеется со ссылкой на первоисточник), чтобы не плодить и без того огромную коллекцию закладок в моём браузере Safari.

Погружение в язык

Без глубокого понимания концепций языка программист не может профессионально развиваться. У JavaScript джуна впереди увлекательная дорога, полная загадок и открытий. Выбирайте ваш любимый способ обучения и начинайте погружение!

Видео-уроки по ES6

Современные JavaScript Junior, возможно, никогда не сталкивались с цепочками прототипов и асинхронными «велосипедами». Сейчас на фронтенде правит бал стандарт ES6. Смотрите один из самых лучших курсов в рунете от CodeDojo:

Основы

Про то, что происходит под капотом, тоже нельзя забывать. Разобраться с конструкторами и прототипами поможет видеокурс freeCodeCamp и этот плейлист loftblog:

JavaScript был рожден, чтобы манипулировать веб-страницами. Это по-прежнему одна из основных задач языка. Лекция Дмитрия Лаврика окончательно прояснит все моменты работы с объектной моделью документа:

Книги

Держите лучшие в мире книги для JavaScript Junior, если вы еще не успели изучить их от корки до корки:

Онлайн-учебники

90% русскоязычных джуниоров учат JavaScript по учебнику Ильи Кантора. А вот еще один отличный ресурс с классической структурой «от простого к сложному».

Полезные статьи

Листание популярных интернет-сайтов IT-тематики – важная часть образования JavaScript Junior. Чтение статей помогает:

Документация

Последнее прибежище разработчика – документация языка. Вам придется обращаться к ней не раз, поэтому будьте знакомы, Mozilla Developer Network. А здесь вы можете узнать немного о темной стороне спецификации.

Инструменты и инфраструктура

Для эффективной и быстрой разработки важно обустроить удобную рабочую среду. Все современные проекты используют сборщики и системы контроля версий. JavaScript Junior должен в этом разбираться.

Node и сборщики файлов

Великолепный скринкаст Ильи Кантора введет вас в курс дела и поможет освоиться с платформой Node.js:

После этого можно переходить к изучению сборщиков: Gulp или Webpack на том же канале.

А вот несколько полезных статей для начала:

Git – самая популярная система контроля версий, она используется во многих проектах, поэтому JavaScript Junior должен в ней разбираться. Основные сведения можно почерпнуть из книги Pro Git или видео-курса по основам Git. А эта замечательная интерактивная игра поможет разобраться с моделями ветвления.

Шпаргалки по командам сэкономят ваше время:

Отладка кода

Отладка – неотъемлемая часть программирования. Главный помощник JavaScript джуниора – консоль разработчика Google Chrome. Чем быстрее вы с ней подружитесь, тем эффективнее будет ваша работа. В помощь вам короткое, но очень информативное видео от школы Hillel:

Фреймворки

Многие компании создают свои продукты на базе современных JavaScript-фреймворков, которые позволяют с легкостью делать очень сложные вещи. Их изучение не только станет огромным плюсом в вашем резюме, но и позволит лучше понять механизмы работы и возможности языка.

React

Освоить основы самого популярного JS-фреймворка поможет этот учебник. В нем понятно разобраны все базовые вопросы, начиная с JSX-синтаксиса и заканчивая моделью Redux.

Еще пара статей по Redux с примерами:

Разобравшись, начинайте экспериментировать. Напишите собственный чат или попробуйте осилить вот этот мастер-класс по созданию бухгалтерского приложения:

Angular

Еще один популярный фреймворк, с которым может встретиться JavaScript Junior. Не путайте AngularJS (он уже устарел) и просто Angular. Проект активно развивается, выходят новые версии. Чтобы не потеряться в них, держите постоянно обновляющийся учебник. А если вы знаете английский, то обязательно посмотрите скринкаст по Angular 6. В качестве шпаргалки вполне подойдет этот конспект по Angular 5.

Священная война фреймворков в самом разгаре. Если вы еще не сделали свой выбор, возможно эта статья поможет Angular vs. React: что лучше для веб-разработки?

Vue.js

Практика для JavaScript Junior

Самое сложное для джуниора – превратить теоретические знания в практические умения. Вот несколько материалов вам в помощь:

А лучше всего создайте свою игру. Это полезно и интересно.

Прежде чем бросаться с головой в обучение, посмотрите это коротенькое видео об ошибках, которые совершают джуниоры:

Если считаете статью полезной,
не ленитесь ставить лайки и делиться с друзьями.

Комментариев: 1

Отличная подборка. Для начинающих то, что надо. Не нужно искать самому разные статьи и программы, все на месте. Спасибо.

Путь JavaScript Senior: подборка ресурсов для вдохновения

13’350 подписчиков
3’961 просмотров на пост

Полезные материалы по всему, что может быть интересно frontend-разработчику.

Детальная рекламная статистика будет доступна после прохождения простой процедуры регистрации

  • Детальная аналитика 70’046 каналов
  • Доступ к 28’004’146 рекламных постов
  • Поиск по 112’332’059 постам
  • Отдача с каждой купленной рекламы
  • Графики динамики изменения показателей канала
  • Где и как размещался канал
  • Детальная статистика по подпискам и отпискам

Найдено 955 постов

Муки выбора: какой язык программирования изучать в 2020

Сегодня любой может получить знания в интернете. Если хотите изучать язык программирования, но не знаете, какой, – статья для вас.

​​Напиши собственный Инстаграм на React.

За 4 дня самостоятельно напишешь свой Инстаграм. Поработаешь с React, state/props, styled components, fetch API, JSON, JSON-server, React Router.

День 1.
Знакомимся с синтаксисом препроцессора JSX и с понятием props (свойства). Создаем основу для нашего приложения.

День 2.
Продолжаем создавать основу под приложение. Знакомимся с понятием state (состояние). Стилизуем приложение и знакомимся с fetch API

День 3.
Загружаем данные с сервера для построения приложения. Настраиваем маршрутизацию при помощи React Router. «Билдим» проект.

День 4.
Составим план изучения React.js. Разберем вопросы с собеседований на позицию фронтенд-разработчика.

Переходи по ссылке и получи приглашение��
https://telegram.me/gloacademy_bot?start=5ce50d60f138da000d6cff44

Мастер Йода рекомендует:  Разработан законопроект, запрещающий обходить блокировки сайтов через VPN и анонимайзеры

16 идея для приложений, реализовав которые вы поднимите свои навыки.

На выходе Angular 8, и что от него ждать и к чему готовиться — узнаем из следующей статьи.

​​Напиши собственный Инстаграм на React.

За 4 дня самостоятельно напишешь свой Инстаграм. Поработаешь с React, state/props, styled components, fetch API, JSON, JSON-server, React Router.

День 1.
Знакомимся с синтаксисом препроцессора JSX и с понятием props (свойства). Создаем основу для нашего приложения.

День 2.
Продолжаем создавать основу под приложение. Знакомимся с понятием state (состояние). Стилизуем приложение и знакомимся с fetch API

День 3.
Загружаем данные с сервера для построения приложения. Настраиваем маршрутизацию при помощи React Router. «Билдим» проект.

День 4.
Составим план изучения React.js. Разберем вопросы с собеседований на позицию фронтенд-разработчика.

Переходи по ссылке и получи приглашение��
https://prglb.ru/105yi

8 самых распространенных ошибок веб-разработчика

Сложный и громоздкий проект чреват серьезными ошибками: это знает каждый. Смотрите наш ТОП-8 ошибок веб-разработчика и не совершайте их!

Разбираемся с правилами нормализации CSS.

Правила CSS, которые облегчат вашу жизнь.

Кофе-брейк: бессерверное приложение для поиска кофеен Starbucks

Хотите сделать собственное бессерверное приложение для поиска ближайшего Старбакса? VueJS и DynamoDB вам помогут!

Пузырьковая сортировка на JavaScript

Пузырьковая сортировка – один из самых широко обсуждаемых (и несовершенных) алгоритмов.

Если вы опытный JavaScript разработчик, вам нет нужды изучать серверные языки для самостоятельного создания полноценных приложений: вы можете изучить и работать на Node.js. Данное руководство рассматривает многочисленные протестированные примеры решения различных задач, которые научат вас использовать продвинутые функции и возможности данной технологии.

Функциональное программирование на JavaScript.

​​Профессия фронт- или веб-разработчик с гарантией результата

Яндекс.Практикум – образовательный сервис, на котором обучают профессии веб- или фронтенд-разработчика с нуля. Курсы подходят для людей любого образования и профессии и состоят из занятий в тренажёре и погружения в рабочую среду.

Яндекс.Практикум работает над трудоустройством выпускников и запускает эксперимент со 100% возвратом стоимости обучения в случае, если вы не найдете новую работу за 3 месяца после выпуска.

Подробнее по ссылке – https://clck.ru/G4E58

Создаем отзывчивые приложения, используя flexbox.

​​Как начать карьеру в Data Science? Узнайте на бесплатном митапе Нетологии!
26 мая, воскресенье. С 14:00 до 18:00. Москва. Онлайн-трансляция для участников из регионов.

На митапе вы получите:
1. Пошаговый гайд — как войти в сферу работы с данными и выбрать роль в data science-проектах.
2. Ответы на вопросы:
— Как перейти в data science?
— Какие компетенции и роли существуют?
3. Лайфхаки от сотрудников ведущих технологических компаний.

А также подарки!
— 1 место на бесплатное обучение в Нетологии (SQL или Python для работы с данными).
— Разбор резюме и сложных кейсов с руководителем Центра развития карьеры Нетологии.
— Для участников митапа действуют скидки на курсы направления Data Science Нетологии.

Не откладывайте на потом переход в новую профессию!

Регистрируйтесь на бесплатный митап и участвуйте в розыгрыше подарков:
https://netolo.gy/eUU

Создаем кастомный компонент для выбора на Angular.

Реализуем медленную подгрузку изображений в React приложении.

10 причин сделать неудачный проект

Неудачный проект сделать очень просто. Если вы поищите в интернете тексты о тенденциях разработки, то наверняка найдете бесконечный список статей и информации о быстро развивающихся технологиях и то, как они повлияют на всех нас к 2020 году. Но мало кто пишет о том, почему проекты проваливаются.

20 сайтов для поиска вдохновения.

Самый простой способ разбудить свое воображение и заставить мозг генерировать новые идеи — посмотреть на лучших образцы творчества других людей.
1. Synaptic Stimuli
Фотографии, креативные концепции и творческие проекты. Synapyic Stimuli — это курируемый проект, который может повлиять на восприятие прекрасного и расширить сознание.
2. Hover States
Ресурс с новыми и интересными примерами интерактивного дизайна.
3. Awwwards
Лучшие дизайнеры. разработчики и рекламные агентства.
4. Delectable
Курируемый архив современного веб-дизайна.
5. Design You Trust
Ежедневная подборка новостей собраний и трендов в мире дизайна.
6. But Does It Float
Множество визуальных подборок на различные тематики.
7. FormFiftyFive
Сообщество дизайнеров, иллюстраторов и программистов, которые делятся интересными работами.
8. Chrome Experiments
Подборка экспериментальных работ от креативных кодеров.
9. Abduzeedo
Коллекция примеров для вдохновения и полезных материалов.
10. 1X
Курируемый фоторесурс
11. LENS
Фотография и фотожурналистика.
12. Art-Spire
Ресурс с вдохновляющими работами в области графического и веб-дизайна.
13. Cargo
Платформа для творческих людей, где можно публиковать свои работы.
14. Show Me Design
Подборка вдохновляющих проектов дизайнеров и фотографов.
15. The Big Picture
Истории и новости в фотографиях.
16. Burn Magazine
Онлайн-журнал для фотографов.
17. Re:vision
Российский ресурс, на котором собирается большое количество дизайнерских работ.
18. Ui Parade
Вдохновляющая подборка для дизайнеров интерфейсов.
19. Behance
Один из ведущих сайтов, на котором представители разных творческих областей делятся своими работами.
20. Deviant Art
Площадка для публикации своих работ.

Благодарю за внимание, надеюсь вам понравилось.

12 ресурсов для вдохновения: рекомендации дизайнера

Творческие кризисы знакомы многим. Особенно трудно их избежать, когда перед вами стоит пугающая задача вроде глобального ремонта перед открытием бизнеса мечты. Попросили Дарью Львову, дизайнера и спикера нашего курса по созданию бара , составить список источников, которые помогут вдохновиться и разобраться в дизайне интерьеров. В него вошли красивые страницы в Instagram, модный журнал, мемуары Дали и парочка неожиданных рекомендаций.

illustrarch

инстаграм и сайт

Проект турецких архитекторов. Команда молодых специалистов собирает талантливые урбанистические зарисовки со всего мира: от схематичных офисных центров до ярких садов. По ним удобно изучать геометрию общественных пространств.

Кроме инстаграма у illustrarch есть сайт . На нём архитекторы выставляют примеры студенческих и профессиональных работ с пояснениями, публикуют статьи и туториалы для начинающих дизайнеров. Пишут illustrarch не слишком академично, так что их тексты будут полезны и тем, кто не занимается дизайном профессионально.

maison_de_sable

Пастельные цвета, необычные изгибы и эксперименты с перспективой — таков инстаграм британской художницы и дизайнера Шарлотт Тейлор, в котором девушка собирает вдохновляющие её интерьеры. Стиль собственных работ Шарлотт во многом опирается на принципы брутализма , постмодернистской архитектуры и античности, что отражается на её мудборде: страничка по большей части состоит из необычных арок, лестниц и колонн. Больше всего maison_de_sable подойдёт людям, интересующимся ритмом в интерьере и игрой света и тени.

artur.de.menezes

Страница бразильского предметного дизайнера Артура де Менецеза. Там он публикует спроектированную им самим мебель и интерьерные аксессуары: лампы, напоминающие скрученный воздушный шарик, кресла с голографическим переливом и пухлые диваны с необычными пропорциями. В основе работ де Менецеза — округлые формы, игра с текстурами, а также разнообразие оттенков синего, розового и оранжевого.

yellowtrace

медиа и инстаграм

Австралийское медиа, отслеживающее тренды в оформлении интерьеров. Его в 2010 году создала Дана Томик Хаджес, которую Elle Decor Italia включил в список самых важных инфлюенсеров в сфере дизайна.

В инстаграме Yellowtrace выставляют удачные интерьеры со всего света. В отличие от предыдущих страниц, издание не отдаёт предпочтение конкретным стилям и цветам. У них можно встретить всё: от киевского кафе , сочетающего стальную мебель и советские обои 30-х годов, до нью-йоркского хостела со множеством деревянных элементов. На сайте Yellowtrace при этом публикуют не только красивые примеры дизайна, но и профессиональные новости, интервью со специалистами и серьёзные теоретические разборы — в общем, всё, что нужно, чтобы оставаться в курсе.

Javascript — полезные ресурсы для начинающих

Обзор лучших ресурсов для обучения Javascript джуниоров

Наверняка любой Javascript джуниор мечтает как можно быстрее сделать шаг в направлении нового статуса – «сеньора». Для этого амбициозному джуну необходимо «перелопатить» множество ресурсов, которые позволяют еще глубже погрузиться в Javascript.

Погружение в Javascript

Любой начинающий программист, задающийся вопросом с чего начать изучение Javascript, должен знать, что сегодня существует целый ряд способов погружения в этот язык. Наибольшей популярностью среди перспективных джунов пользуются следующие ресурсы:

  • видео-уроки;
  • книги;
  • онлайн-учебники;
  • полезные статьи;
  • техническая документация.

Видео-уроки по Javascript программированию

В русскоязычном интернете, к сожалению, очень сложно найти видео-уроки, которые заслуживают внимания Javascript джуниора. Исключением является канал CodeDojo, который подробно рассказывает о возможности реализации всех функций стандарта ES6. Именно этот стандарт предпочитает использовать большинство front-end разработчиков. Больше информации можно получить по этой ссылке:

Программистам на JS, владеющим английским языком, доступна возможность просмотра интереснейших лекций от канала freeCodeCamp. Видео-уроки на этом канале позволяют разобраться с конструкторами, прототипами и другими основами языка программирования Javascript. Для изучения основ back-end разработки также рекомендуется следить за каналом Loftblog:

Также не стоит забывать, что первоначально основным назначением JS было управление веб-сайтами. Эта задача и сегодня является одной из приоритетных. Об этом напомнит лекция Дмитрия Лаврика:

Книги по программированию на Javascript

Отвечая на вопрос с чего начать Javascript, следует акцентировать внимание на книги, которые любой сеньор должен тщательно изучить. Список этих книг представлен ниже:

  • JavaScript: сильные стороны, Дуглас Крокфорд;
  • Выразительный JavaScript, Марейн Хавербек;
  • Серия You Don’t Know JS (англ.);
  • Человеческий JS (англ.), Henrik Joreteg;
  • DOM Просветление (англ.), Cody Lindley.

Онлайн-учебники для изучения Javascript

Программисты, предпочитающие изучать язык по онлайн-учебникам, должны обратить внимание на работу Ильи Кантора. Его учебник построен на классическом принципе – «от простого к сложному».

Полезные статьи

Получить ответ на вопрос – с чего начать Java или JavaScript, также позволят полезные статьи на многочисленных сайтах, касающихся IT-тематики. Данный способ обучения позволяет:

  • разобраться как в новых, так и в старых концепциях JS;
  • увидеть наглядные объяснения действий, которые ранее были непонятны (например, как добавить элемент в начало массива в Javascript);
  • изучить чужой опыт обучения;
  • найти новые фичи;
  • распланировать программу обучения.

Техническая документация

Наконец, для изучения JS можно обратить внимание на техническую документацию языка и ECMAScript-спецификацию.

Рабочая среда Javascript джуниора

Джун, мечтающий повысить свой статус, также должен хорошо разбираться в современных инструментах разработки и других элементах рабочей среды программиста на JS. С этой целью стоит обратить внимание на популярные видео-уроки. Например, Илья Кантор на канале Javascript.ru поможет разобраться с платформой Node, а также сборщиками файлов Webpack и Gulp:

Для изучения самой востребованной системы контроля версий Git рекомендуется внимательно изучить книгу Pro Git. Альтернативный вариант – просмотр видео-курса по основам этой системы. Для того чтобы разобраться с особенностями ветвления на практике рекомендуется сыграть в интереснейшую интерактивную игру LearnGitBranching. JS джунам также доступны многочисленные шпаргалки и гайды по работе с Git, которые можно легко найти посредством поисковика.

Еще одним важнейшим элементом рабочей среды программиста на JS считается отладка кода. Для того чтобы не иметь проблем с отладкой, JS джун должен изучить все возможности консоли разработчика в Google Chrome. Помочь в этом может следующее видео:

Фреймворки

Огромным плюсом в резюме программиста на Javascript является знание всех современных фреймворков. Такие знания способствуют пониманию механизмов этого языка и позволяют без проблем делать самые сложные вещи. Для тех программистов, которые находятся только в начале Javascript, прежде всего, стоит знать такие фреймворки:

React

Для того чтобы освоить фреймворк React, рекомендуется изучить руководство по Redux-приложениям на сайте Proglib. Изучив теорию, JS-джуниоры могут приступить к практической части – написанию собственного чата. Альтернативным вариантом является разработка бухгалтерского приложения, алгоритм создания которого подробно описан здесь:

Angular

JS-фреймворк Angular постоянно обновляется. Поэтому джуну необходимо внимательно следить за появлением новых версий и приступать к изучению именно их. На сегодняшний день наиболее актуальным является видео-урок по Angular 6 на сайте CourseHunters.

Для сравнения возможностей двух вышеуказанных фреймворков можно почитать статью на Proglib — Angular vs. React.

При изучении JS-фреймворков не стоит забывать и о Vue. Для изучения возможностей этого фреймворка можно использовать видео-курс от канала Точка.dev или интереснейший семинар от Дмитрия Лаврика.

Практика для JS-Junior

Отвечая на вопрос с чего начать Javascript или Python, необходимо понимать, что для джуна в любом случае важна практика. Он должен уметь превратить теоритические знания в умения. Для этого можно использовать такие ресурсы:

  • видео-урок Арсена Арустамян по задачам из собеседований;
  • практикум по JS от канала Web Developer Blog;
  • перечень самых каверзных вопросов и тестовых задач из собеседований.

Перед тем как начать обучение, также рекомендуется тщательно изучить видео о типичных ошибках JS-джуниоров:

Лучшие ресурсы для изучения JavaScript

Получайте новости почтой:

Писать код на JavaScript не так-то сложно. Этот язык дает программисту много свободы и — что немаловажно — прощает многие ошибки. JavaScript позволяет разрабатывать интерактивные сайты, анимировать изображения и программировать роботов. А начать можно прямо в школе. Делимся полезными ресурсами из книги «JavaScript для детей», написанной Ником Морганом — фронтенд-разработчиком в Twitter.

Сайты и книги о JavaScript

В книге описано немало возможностей JavaScript, но можно обратиться и к другим источникам. Вот некоторые издания и сайты, которые помогут познакомиться с различными аспектами JavaScript:

  • Книга: «JavaScript: сильные стороны», Дуглас Крокфорд (издательство «Питер»)
  • Книга: «Eloquent JavaScript, 2nd Edition», Marijn Haverbeke (No Starch Press, 2014)
  • Книга: «JavaScript. Подробное руководство», Дэвид Флэнаган (издательство «Символ-Плюс», 2013)
  • Ресурсы по JavaScript на Mozilla Developer Network: https://developer.mozilla.org/ru/docs/Web/JavaScript (на русском)
  • Курсы JavaScript от Codecademy (на английском)

Веб-программирование

Чтобы создавать сайты, вам помимо JavaScript понадобятся знания HTML и CSS.

HTML — это язык разметки, предназначенный для создания веб-страниц. Вот некоторые источники, из которых вы можете узнать об HTML больше:

CSS, или «каскадные таблицы стилей», — это язык для управления внешним видом веб-страниц. Узнать о CSS больше можно здесь:

  • Введение в CSS от Mozilla Developer Network (на русском)
  • Курс HTML и CSS от Codecademy (на английском)

Серверное программирование на Node.js

Веб-страницы располагаются на веб-серверах. Сервер хранит весь HTML, CSS и JavaScript-код страницы, предоставляя к ней доступ из интернета. Также вы можете писать программы для серверов (так называемый серверный код), позволяющие серверу генерировать различный HTML-код при каждой загрузке страницы. Например, когда вы заходите в Twitter, серверная программа ищет самые свежие посты для вашей ленты, генерирует HTML-файл с этими постами и передает его вашему браузеру. Node.js позволяет писать серверные программы на JavaScript. Ознакомьтесь с информацией о Node.js по этим ссылкам:

Графическое программирование

Если вы хотите создавать интерактивную графику на JavaScript, у вас есть два основных пути: это элемент canvas и SVG.

canvas

Вот некоторые обучающие статьи и игры, которые помогут вам ближе познакомиться с «холстом»:

  • Обучающая статья по canvas на Mozilla Developer Network (на русском)
  • Игра Code Monster от Crunchzilla (на английском)

SVG с помощью Raphael

SVG — это графический формат, позволяющий рисовать разные фигуры и анимировать их без необходимости перерисовывать каждый шаг анимации с нуля. Программирование SVG — дело не из простых, но вам будет куда легче, если вы воспользуетесь JavaScript-библиотекой Raphael

3D-программирование

С помощью canvas можно создавать и трехмерные изображения. Это еще одна из тех областей, где проще всего воспользоваться библиотекой, и я рекомендую вам библиотеку three.js. Вот некоторые ресурсы для ее изучения:

Программирование роботов

При помощи JavaScript можно даже управлять роботами! Например, Parrot AR.Drone. Это маленький вертолет, которым можно управлять с помощью Node.js. Также вы можете обратить внимание на Johnny-Five, JavaScript-библиотеку для управления устройствами наподобие Arduino (это популярный микроконтроллер, который используется во многих любительских устройствах и роботах). Вот некоторые ресурсы о том, как управлять роботами и другими устройствами из JavaScript-кода:

Программирование звука

JavaScript также позволяет программировать звук в веб-браузере с помощью интерфейса Web Audio API. Используя этот программный интерфейс, вы можете создавать звуковые эффекты и даже писать музыку! Вот некоторые ресурсы по Web Audio API:

Программирование игр

Если вы хотите продолжить заниматься программированием JavaScript-игр, вам стоит попробовать какой-нибудь игровой движок. Игровой движок — это библиотека кода, который обеспечивает низкоуровневые детали реализации игры (такие как ввод с клавиатуры и мышки), позволяя вам сосредоточиться на том, что делает вашу игру особенной, то есть на дизайне. Вот ресурсы, где вы можете больше узнать о программировании игр и игровых движках:

  • Игровой движок Crafty (на английском)
  • Pixi Renderer (на английском)
  • Игровые движки для HTML5 (на английском)
  • Курс по разработке HTML5-игр от Udacity (на английском)
  • Книга: «3D Game Programming for Kids», Chris Strom (Pragmatic Programmers, 2013) (на английском)
Мастер Йода рекомендует:  Текст из воды

Обмен кодом с помощью JSFiddle

Что если вам захочется поделиться своим замечательным JavaScript-кодом со всем миром? Есть немало способов это сделать. Один из самых простых — воспользоваться JSFiddle. Просто введите ваш код в поле для JavaScript, добавьте любой необходимый HTML-код в поле для HTML и нажмите Run для запуска своей программы. Чтобы поделиться кодом с другими, нажмите Save, и вы получите URL (веб-адрес), который сможете передать друзьям.

По материалам: Ник Морган , «JavaScript для детей»
Фрагмент опубликован с разрешения правообладателя.

Подборка из 15 лучших JavaScript-фреймворков для фронтенд-разработки

В этой подборке рассмотрены 15 удобных фреймворков для фронтенда. Кроме самых популярных платформ в списке есть несколько менее известных — надеемся, каждый сможет найти подходящее решение для своего проекта.

Angular

Этот фреймворк от Google, ставший очень популярным в последние годы, идеален для разработчиков, которые с большим вниманием относятся к последним новинкам отрасли. Angular представляет из себя набор современных функций для разработки и проектирования, обеспечивающих высокую скорость разработки. Компания Google даже создала специальный компонент Angular Material, позволяющий легко реализовать настоящий Material Design с помощью Angular.

Angular 2 добрался до релиза в сентябре прошлого года. Позже Google анонсировала выпуск Angular 3, но затем сообщила о том, что сразу займется четвертой версией фреймворка, которая в марте стала доступна для скачивания.

React

Жемчужина веб-программирования: даже некоторые рьяные последователи Angular сделали свой выбор в пользу React. React смог то, с чем не справился Angular — он позволяет разрабатывать фронтенд, не погружаясь в дебри и сложности фреймворка. React — JavaScript-библиотека, созданная Facebook, и основная ее цель — обеспечить комфортную работу с Shadow DOM. Для этого используется Virtual DOM, модель, при каждом изменении генерирующая список операций, которые необходимо провести над DOM, чтобы привести его к новому состоянию.

Если вас заинтересовал этот фреймворк и вы решили начать его изучение, мы подготовили для вас перевод 9 полезных советов по этой теме. В апреле 2020 Facebook анонсировала перезапуск библиотеки, новый проект будет называться React Fiber.

Socket

Socket является одним из наиболее популярных инструментов для разработки реал-тайм проектов. Будучи фреймворком с событийно-ориентированной архитектурой, Socket поделен на серверную и клиентскую части с одинаковым API: такая архитектура позволяет без лишних телодвижений создавать самые разнообразные приложения: от браузерных игр, видео- и текстовых чатов до офисных приложений с функцией совместной работы над документом. Именно на основе Socket реализована аналогичная функция в Microsoft Office Online.

Ember

Ember — современный JavaScript-фреймворк для амбициозных разработчиков и проектов. Будучи невероятно мощным, он очень прост в освоении.

14 ноября в 10:00, Санкт-Петербург, беcплатно

Одной из вещей, за которые любят Ember, является шаблонизатор Handlebars, который, по словам разработчиков, намного элегантней директив Angular. В целом Ember почти всё делает за программиста, поэтому вам останется только создавать свою бизнес-логику и наслаждаться процессом.

Polymer

Polymer — это проект Google, который не просто облегчает вам использование Material Design. Этот очаровательный фреймворк — воплощение скорости и удобства в работе над интерфейсом, позволяющий создавать и повторно использовать веб-компоненты. Проект много времени провел в стадии бета-теста, но сразу после выхода его популярность начала расти подобно снежному кому.

Meteor

Meteor проделал долгий путь от простой идеи до полнофункционального и хорошо финансируемого проекта, ставшего смыслом жизни для многих разработчиков-энтузиастов. Любое веб-приложение на Meteor полностью совместимо с мобильными устройствами — вы даже можете преобразовать существующее веб-приложение в мобильное и опубликовать его в магазине мобильных приложений.

С появлением облачного хостинга Galaxy, созданного специально для Meteor-приложений, Meteor сделал фронтенд и бэкенд неразрывными компонентами, для работы с которыми не нужен огромный опыт. Meteor — full-stack фреймворк, который поможет вам на одном JS создать современное, хорошо масштабируемое приложение для веба и мобильных устройств. Публичный репозиторий Atmosphere хранит тысячи пакетов, которые помогут вам создавать такие приложения на лету.

Backbone

Если не уделять должного внимания структуре кода, даже в ходе разработки всего одной страницы или одностраничного приложения код может превратиться в настоящую тарелку спагетти. Backbone построен на идее того, что вся работа с сервером должна осуществляться через API, минимизируя количество кода, который необходим для достижения такой же широкой функциональности, как у сложных веб-фреймворков.

Backbone — один из самых популярных фреймворков для веб-разработки, в основном благодаря двум причинам: принцип применения модулей очень прост для понимания, а значит, просто и обучение использованию самого фреймворка.

Vue — это простой в использовании и при этом очень мощный фреймворк. Начинающие по достоинству оценят документацию. Vue берёт всё лучшее от других фреймворков и соединяет в один удобный инструмент. Так же, как и React, Vue работает с однофайловыми компонентами и однонаправленными связями между ними, но работать с ним проще благодаря CLI-инструменту vue-cli . Внутри Vue-компонентов можно использовать препроцессоры (Jade, Stylus и др.)

Knockout

Knockout — это открытый фреймворк, работающий с моделью MVVM. Он разработан на чистом JavaScript без внешних зависимостей. Knockout лёгок и удобен в использовании и особенно эффективен в связывании данных. Отлично подойдёт для создания одностраничных приложений.

LiquidLava

Фреймворк для создания пользовательских интерфейсов с возможностью масштабирования от простых интерактивных элементов на странице до многофункциональных приложений. К основным особенностям можно отнести прозрачный дизайн (вы всегда понимаете, что происходит внутри фреймворка), уникальную систему классов и использование шаблонов проектирования вместо внедрения зависимостей.

dhtmlxSuite

Библиотека для создания кроссбраузерных мобильных и веб-приложений, которая содержит большой набор готовых к использованию компонентов пользовательского интерфейса, которые могут быть скомбинированы или использованы по отдельности. Виджеты совместимы с любой серверной технологией: PHP, Java, ASP.NET, Ruby, Grails, ColdFusion, Python и т.д. В новой версии 5.1 добавлена поддержка TypeScript, JSON и Promise API.

PureMVC

Простой фреймворк с поддержкой модульного программирования и эмуляции классов. В репозитории на GitHub можно обнаружить, что последние обновления производились очень давно, но создатели сами упоминают об этом на основном сайте и говорят, что придерживаются позиции «достаточно один раз сделать очень хорошо». Что ж, предлагаем к рассмотрению.

Sencha Ext JS

Данный фреймворк позволяет создавать информационно емкие кроссплатформенные веб-приложения для десктопа, планшетов и смартфонов. Ext JS содержит большую коллекцию готовых, протестированных компонентов интерфейса и множество полезных инструментов, в том числе для анализа и визуализации данных.

Spine

Крайне легковесный фреймворк с подробной структурированной документацией и доступным исходным кодом. Из отличительных черт — асинхронное соединение с сервером, минимальное число зависимостей, адаптеры для локальных хранилищ AJAX и HTML5. Совместим со всеми современными браузерами.

49 полезных ресурсов в помощь дизайнеру

В современных реалиях дизайнер не может себе позволить дожидаться музы, но, имея под рукой хорошие источники для вдохновения, он способен настроиться на нужную «волну» и без нее. Предлагаем вашему вниманию подборку полезных ресурсов, которые помогают дизайнерам в их нелегком, но очень ярком и увлекательном труде. Собранные по безграничным просторам сети Интернет, известные и не очень. Надеемся, каждый найдет в списке что-то интересное для себя!

Для вдохновения

Престижная премия для талантливых веб-дизайнеров, разработчиков и агентств всего мира. Также ресурс — отличный источник вдохновения и самых последних трендов.

Мировая социальная сеть для лучших дизайнеров, позволяющая увидеть не только презентацию готовых работ, но и процесс их создания.

Отличный блог, где можно найти все необходимое для вдохновения и дизайнерских нужд.

Потрясающий сервис для просмотра и публикации творческих работ.

Интересный блог с большим количеством полезной и вдохновляющей информации.

Название в данном случае говорит само за себя. На ресурсе собраны фотографии, дизайнерские работы со всего мира, которые удобно отсортированы по тегам.

На данном ресурсе собраны интересные работы, в большинстве своем в области графического дизайна.

Сервис позволяет не только размещать и делиться понравившимися изображениями, но и рекомендует материалы других пользователей, исходя из ваших вкусовых предпочтений. Подборки весьма нестандартные!

Ежедневное вдохновение от мирового сообщества художников.

Ресурсы, с отличным веб-дизайном, собранные на одном сайте.

На сайте собраны ресурсы с хорошим веб-дизайном, удобно сортированные по категориям.

Лучшие сайты, выполненные в стиле минимализма, собранные на одной платформе.

Витрина лучших сайтов с интерактивными решениями.

Хотите быть в курсе обновлений всех сайтов, касающихся хорошего дизайна, но некогда посещать каждый из них по отдельности? Используйте данный ресурс. Panda — это подборка самых свежих и топовых публикаций с платформ, представленных выше.

Пользовательские интерфейсы с лучшим дизайном, соответствующие самым последним тенденциям. Свежо, вдохновляюще и полезно!

100% вдохновения! Потрясающие фотографии и изображения, которые не оставят равнодушным никого.

Искусство — один из главных источников вдохновения. В данном блоге собраны картины, фотографии, иллюстрации талантливых мастеров.

Платформа, на которой собраны креативные фотографии, иллюстрации, картины со всего мира с ссылками на авторов.

Бесплатные стоковые фотографии

Бесплатные стоковые фотографии в хорошем качестве, собранные по различным категориям.

Бесплатные фото в высоком разрешении от профессиональных фотографов. Два новых изображения каждый день!

Все фотографии предоставлены для свободного использования, без нарушения авторского права. Сотни изображений в высоком разрешении добавляются еженедельно.

Следуйте за кроликом и почувствуйте себя Алисой в стране бесплатных фотографий в высоком разрешении для личных и коммерческих нужд.

Красивые фотографии в отличном разрешении от талантливых фотографов мира. Ресурс удобно сортирует все материалы по категориям, цветовым схемам и т.д.

Ресурс с бесплатными фотографиями самых различных тематик.

Более 560 000 бесплатных фотографий, векторов и иллюстраций.

Красивейшие фотографии добавляются каждую неделю. Удобная сортировка по категориям и цветовым схемам.

Ресурс с хорошей подборкой фотографий, скачать которые можно в самых разных разрешениях.

Минимум деталей, максимум фотографий, которые можно выбирать по цветам, категориям и источникам.

10 новых фотографий каждые 10 дней для свободного использования.

Здесь вы можете бесплатно скачать фотографии и угостить владельца ресурса кофе, если очень захочется.

Есть возможность подписаться и получать 10 лучших фотографий каждые 2 недели. Сам ресурс представляет большую подборку красивых изображений.

Отличная подборка фотографий для вдохновения и работы!

Фотографии для свободного использования в хорошем качестве.

Работы фотографа Jonas Wimmerström, предназначенные для свободного использования без нарушения авторских прав.

Бесплатные стоковые фотографии на любой вкус.

Прекрасные бесплатные работы фотографа Jay Mantri.

Изображения для личного и коммерческого использования. Добавляются еженедельно.

Подбор цветовых схем

Данный ресурс позволяет выбрать два цвета и посмотреть, как они будут смотреться в сочетании друг с другом, а также подобрать сопутствующие оттенки.

Хотите узнать, какие цвета используют известные бренды? Тогда этот ресурс для вас.

Подбор различных цветовых схем и их сочетания.

Находите цвета и их оттенки с HEX кодом.

Автоматическое создание градиентов.

Укажите ссылку на изображение и узнайте, какие цвета в нем используются с указанием HEX кода.

Идеальное сочетание цветов в палитрах. Полезный и очень вдохновляющий ресурс!

Бесплатные иконки

Более 800 000 иконок для дизайнеров на одном сайте.

Более 150 000 иконок в свободном доступе.

Бесплатные иконки от первоклассных дизайнеров со всего мира.

Бесплатные черно-белые иконки для любой тематики.

Бесплатные иконки, сортированные по категориям и цветовым схемам.

10 замечательных ресурсов для вдохновения в веб-дизайне

Наличие хорошей и качественной подборки с ресурсами веб-дизайна для вдохновения, является полезным активом для вашего рабочего процесса. Имея такой список, вам будет легче и быстрее вникать в суть того или иного проекта, а главное – удовлетворять потребностям любого творческого задания.

Тематика проекта может быстро сузить количество доступных ресурсов, что ужесточает рамки для поиска вдохновения в решении задач. Однако имея несколько надежных серверов, поможет вам удовлетворить потребности клиентов, в то же время, предоставляя возможность исследовать новые дизайнерские решения и стимулируя свое творчество.

Думая об этом, мы решили создать для вас список из 15 ресурсов, которые помогут компенсировать проблемы, вызванные проектной нишей, и посодействуют в организации собственного арсенала отличных ресурсов для вдохновения.

Весьма хорошо организованная галерея с веб-дизайном высокого уровня для вдохновения, которой управляет один человек — Дэвид Гельман. Он начал этот проект еще в 2008 году, и он по-прежнему остается мощным, возможно, потому, что он также служит в качестве личной галереей вдохновения Давида.

Это очень хорошая идея, если подумать. Возможно, к концу этой статьи, вы будете вдохновлены, чтобы начать создавать свою собственную галерею вдохновения.

Best Website Gallery, или BWG, использует систему тегов, так что вы можете быстро найти веб-сайты, основываясь на их стиле, дизайнерском подходе, функциональности и многом другом. Имея более 2000 качественных сайтов для просмотра, эта галерея весьма полезна.

Вдохновляющие сайты на CSSnectar трижды проверяются. Во-первых, существует оплата за то, чтобы представить свой сайт на рассмотрение, и можно с уверенностью предположить, что человек не станет платить за представление своей работы, если он не уверен в ней и она не вызывает у него гордости. Во-вторых, команда креативщиков изучает и рассматривает каждую представленную работу, прежде чем она выходит в трансляцию. И, наконец, третий этап – сообщество голосует за дизайн сайта, код и творчество. Лучшие работы награждаются и появляются на странице победителей.

Несмотря на свое название, Footer Love является очень полезным для работы сайтом, где представлена отличная галерея футеров веб-сайтов. Даже если футеры пользователи видят в самую последнею очередь, это вовсе не значит, что они не имею право на целенаправленный и творческий подход при создании, как любой другой элемент сайта. Галерея напомнит вам поднажать на дизайн этого часто игнорируемого элемента и убедиться, что вы на самом деле обратили внимание на каждую деталь.

Запущенный Даниэлем Хоуэллс из Howells Studio, SiteInspire предлагает огромную библиотеку вдохновляющих сайтов, которые вы можете легко фильтровать с помощью разветвленной системы тегов. Используя несколько тегов сразу, вы можете определить тип необходимого вдохновения, а различные комбинации могут порой выдавать очень интересные результаты.

Главной привлекательностью Inspirational Shops является библиотека исключительных веб-дизайнов сайтов электронной коммерции. Будучи собранными на протяжении многих лет, они продемонстрировали эволюцию дизайна сайтов электронной коммерции, предоставляя качественные образцы веб-сайтов интернет-магазинов.

Относительно новый сайт для вдохновение, который предлагает высококачественные образцы для цифрового маркетингового сообщества, в том числе дизайн email, инфографику и посадочные страницы. Разделе лендингов по-прежнему растет, но делает хорошую работу по выдвижению на первый план качественных примеров.

Admire The Web – это еще один мощный ресурс с высококачественным отобранным контентом. Поиск по сайту немного сложнее и запутаннее чем у других ресурсов, но награда том богатый выбор предлагаемых материалов.

Я знаю, что вы думаете. Но на самом деле вам нежно знать язык, чтобы насладиться этим сайтом. French Design Index следует за знакомой структурой, похожей Awwwards, только тут чуть больше ниш, а сам сайт показывает работы французских дизайнеров, которые оценивало французское жюри. Опять же, тут представлено лишь немного сайтов на французском языке. Тем не менее, это довольно интересно, посмотреть, как язык может повлиять на дизайн, учитывая, что большая часть веб-дизайна отталкивается именно от текста.

Магазин тем может не быть первым местом, о котором вы думаете, когда ищите творческое вдохновение, ведь тамошний дизайн, как правило, склоняется к более общим сторонам визуального спектра. Однако Template Monster может быть действительно эффективным ресурсом, где можно найти, от чего оттолкнуться, потому что темы, обычно, имеют очень хорошую структуру и часто обращают пристальное внимание на лучшие практики. Используйте темы, как вдохновение, просматривая их основу структуры для контента или идеи элементов, затем наложите их на свое творческое представление, исходя из потребностей проекта.

Хоть это и конструктор сайтов, но в его разделе Discover вы можете найти достаточно вдохновения для своих будущих проектов. К тому же это отличный способ увидеть, что вы можете сделать при помощи данного инструмента без написания кода.

Добавить комментарий