Академия началась 10 лет назад с интерактивных тренажёров по вёрстке, которые сделал Саша Першин. Через год появились полноценные интенсивные курсы для верстальщиков, а чуть позже добавились курсы по JavaScript, React и PHP. 

Всё это добро нужно было кому-то вести — сначала всё делали Саша и Лёша Симоненко, а потом их сменили другие авторы. Некоторых вы и без меня хорошо знаете — например, Вадима Макеева, который несколько лет вёл в Академии курсы по HTML и CSS. А всего за 10 лет у курсов Академии было 14 авторов. При этом автор — не наставник и не преподаватель в привычном смысле. Он не занимается отдельно с каждым студентом и не проверяет домашние задания и итоговые проекты. 

Чтобы узнать, чем на самом деле занимаются авторы, я подловил их в тёмном коридоре и задал кучу неудобных вопросов. Поговорили о работе авторов, секретах профессии, бесящих студентах, революциях в вебе, HTML 6, замене JavaScript и ответственности за судьбы людей.

Уже который год во всех слаках, дискордах, телеграмах и форумах главный вопрос о любом языке программирования звучит так — стоит его учить В ЭТОМ ГОДУ, или лучше уже не надо? Взять какой-нибудь PHP — его же вечно хоронят, и всё никак.

Есть и много других вопросов. Например:
— Что выбрать — PHP, Python, Go или Node.js? Или Visual Basic? Или С? Может, Brainfuck?
— Почему все говорят про Python? Он крутой? Круче, чем всё?
— Бэкенд — это про логику и алгоритмы? Матан нужен? А чувство прекрасного?
— У фронтендеров React, Vue и миллионы других фреймворков, о которых все слышали, а что у бэкендеров? Терпение?
— Придётся ли устанавливать Linux, чтобы работать с бэкендом?
— Почему о фронтендерах все говорят, а о бэкендерах нет? Это потому что у них зарплата 20 тысяч?

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

Самое важное — отказ от поддержки старых браузеров в 2021. Майки окончательно убили IE, поэтому разработчикам станет проще использовать классные технологии. Гриды (83%) и флексбоксы (99%) захватили всё. TypeScript есть в 70% вакансий для мидлов. 2022 будет годом TypeScript. 

Container Queries — переосмысление подхода к медиавыражениям. Если медиавыражение зависит от размера экрана, то Container Queries опирается на размер блока. С Cascade Layers мы можем лучше управлять всеми слоями отрисовки на сайте. Это самое большое изменение в CSS на уровне флексов и гридов.

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

Эти и другие прогнозы о технологиях, зарплатах, вакансиях и навыках в 2022 ждут под катом.

Олег — фронтенд-разработчик в крупном видеосервисе (и попутно выпускник Академии). Он только недавно начал работать, но уже согласился ответить на некоторые вопросы от подписчиков нашего комьюнити-чата в Телеграме, которым интересно, как всё устроено в реальной работе.

Что нужно делать? Дают ли коммитить в мастер? Чего больше — вёрстки или JavaScript? Действительно ли на практике нужны все глупые вопросы из интервью?

Давайте разберёмся вместе.

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

Давайте без лишних слов разберёмся, какие бывают типы значений у CSS-свойств, и определим, чем отличаются абсолютные и относительные значения (все эти em, rem, vh, vw), как задать красный цвет шестью способами, и зачем нужны CSS-директивы.

Кроме редактора кода, терминала, браузера и гита веб-разработчики пользуются вагоном и маленькой тележкой маленьких инструментов, которые выполняют какую-то одну задачу, но могут пригодиться в ежедневной работе. Предлагаем вам нашу подборку — надеемся, что что-то пригодится, а по поводу чего-то вы и вовсе скажете «А что, так можно было?».

Краткое содержание: проверка кода по стандартам, проверка вёрстки и стилей, работа с кодом, работа с графикой (SVG, фавиконки, конвертеры и сжималки), работа с текстом (типографы и конвертеры всего во всё).

Дисклеймер: подборка не претендует на полноту, но в комментариях собираем другие полезные инструменты.

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

Фавиконки — ответственность верстальщика. Под катом рассказ о том, как подключить обязательную фавиконку и каким должен быть набор иконок, как использовать иконки в SVG, что нужно дополнительно сделать для устройств от Apple, и почему хорошо использовать webmanifest для подключения всех фавиконок к вашему сайту.

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

Это перевод статьи Nic Chan «A Complete Guide To Accessibility Tooling» из журнала Smashing Magazine.

Моя первая настоящая работа была странной. 

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

1С-программистом с нулевым знанием 1С. С записью в трудовой «Системный администратор» с нулевыми знаниями системного администрирования. Ну то есть как — эникействовать же все могут, вот и могу. Наверное.

Так прошёл целый год, полный переписывания легаси на 1С, софта для этикеток на С++ и дельфи, включения бухгалтерских компьютеров обратно в розетку и, конечно, вообще без визуального бейсика.

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

Дисклеймер. Всё пишу по расплывчатым воспоминаниям, поэтому если бывшие коллеги читают это — привет на сто лет.

Не зря говорят, что геймдев безжалостен (и особенно к новичкам).

Rovio сделали Angry Birds с какой-там-сорок-с-лишним попытки, всякие новички регулярно проваливают ответственную задачу по доделыванию своих инди пиксельных платформеров на юнити, Башурова вон вообще забанил Эпл, хотя казалось бы — целый Башуров. Короче, жуть и ужас.

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

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

Давным-давно (лет пятнадцать назад) почти все делали сайты и не переживали о том, что под капотом. Верстали таблицами, использовали всё, что попадётся под руку (а попадались в основном <div> и <span>) и не особо заморачивались о доступности. А потом случился HTML5 и понеслось.

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

Дисклеймер: статья может обидеть тех, кто прикипел к вёрстке дивами. Но <div> — не приговор, и мы не призываем от него целиком отказываться. Ну и всегда можно договориться.

Где-то в мире живёт Серёжа — тридцатилетний продавец обуви и отец троих детей. 

Представим, что Серёже в какой-то момент надоело продавать одинаковые туфли и захотелось делать одинаковые лендинги. Он почитал статьи в интернете, посмотрел 70-часовые разборы разборов по вёрстке на Ютубе, прошёл курсы. Даже купил «Алгоритмы» Скиены, но пока не открывал. В общем, любым способом научился программировать. 

Как ему теперь поступить, чтобы мечта «максимально хорошо начать карьеру» стала реальностью (если это вообще выполнимо)? Как и в любой профессии, есть несколько вариантов. Сколько из них хороших — непонятно, будем разбираться.

Дисклеймер: осторожно, этот пост может задеть чувства Java и 1С-разработчиков, менеджеров проектов и владельцев парикмахерских.

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

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

Осторожно, в статье очень много иллюстраций.

Могу честно сказать — я побаиваюсь CSS. За последние годы он неслабо разросся, но вместе с этим пришла и монструозность (ну то есть чего вы всерьёз не можете сделать на CSS? Машину времени?). Мне сложно смотреть даже на селекторы, а из-за угла уже манят флексы с гридами и говорят — «псс, не хочешь немного сеток и бессоных ночей?». Больно думать о позиционировании текста на бесконечном холсте, когда всю жизнь расставлял кнопки мышкой на форме. 

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

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

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

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

Осторожно, мы тут вовсю советуем загружать в резюме фотографию. Если не согласны — приходите в комментарии.

В этом туториале мы рассмотрим, как реализовать эффект drag & drop на ванильном JavaScript. Дословный перевод с английского — «потяни и брось» — отражает суть эффекта, это хорошо знакомое любому пользователю перетаскивание элементов интерфейса. Drag & drop может понадобиться при сортировке карточек в таск-трекере, переносе между списками или вообще при перетаскивании файлов в окно браузера.

Мы разберём drag & drop на примере сортировки. Для этого создадим интерактивный список задач.

Однажды «Лига А.» искала веб-разработчика примерно с годом опыта работы — ни больше, ни меньше. Мы завели вакансию, получили много резюме и много на что насмотрелись — в том числе, на кучу ошибок, которых легко можно было бы избежать.

Этот пост — попытка структурировать наш опыт в поиске разработчиков и поделиться полезными советами для всех, кто ищет работу.

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

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

Чтобы решить эту проблему, собираем в одном месте опыт десятков собеседований с верстальщиками. Вместе с Дашей Владыко из фронтенд-аутсорса «Лига А.» рассказываем, на что смотреть в тестовом задании джунов и мидлов, и как отличить хороший результат от плохого. Плюс несколько практических советов — например, как выбирать плагины и составить тестовое задание.