Русский
Русский
English
Статистика
Реклама

Блог компании html academy

Тестовое задание для фронтендера

21.01.2021 10:23:56 | Автор: admin

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

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

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

На что смотреть в целом

Соответствует ли результат ТЗ? Всё работает? Всё заверстано? Джуну прощаются мелкие недочёты, но он хотя бы показывает что хотел сделать как можно лучше, просто пока не хватает практики. Если сделано спустя рукава, то это тоже видно.


Пример: сверстать аккордеон

Соответствие ТЗ: аккордеон завёрстан по макету, нет ошибок в HTML. JavaScript написан без onclick, код для аккордеона можно переиспользовать на других страницах и блоках.

Если аккордеон завёрстан, но при нажатии на на кнопку ничего не происходит, то не работает. Для мидла это минус, джуну можно простить, если к внешнему виду и семантике не подкопаться. Джуну также прощается, если JavaScript есть, но в семантике есть ошибки или результат немного не соответствует макету (другие отступы, например, или забыл про уголки).


Предусмотрено ли переполнение? Сильно ли едет макет при добавлении/удалении элементов? Можно ли ввести 4 строки, если в дизайне нарисовано 2? Предусмотрены ли максимальные и минимальные размеры?

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

Столько плюсов каждому по нраву

Как оформлена сборка? Есть readme? Запускаются таски из gulp? Такие мелочи показывают, есть ли у человека опыт в разработке. Обычно, когда сверстаешь пару проектов, учишься наводить порядок в файлах и умеешь работать с таск-менеджерами. В идеале нужна чистая сборка: всё разложено по папкам, комментарии убраны, лишних файлов нет.

Выделяются ли компоненты? Проект у мидла конструктор, где блоки можно менять местами и ничего не ломается.

Как подключаются скрипты и стили? Есть ли инлайн? Есть ли onclick="" или style=""? Джуну какие-то вещи простить можно, мидлу нет.

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

Как реализованы ховеры и адаптив? Это не обязательно, но будет плюсом, показывает опыт и аккуратность. Сразу видно, как человек импровизирует, так как в макете не рисуются разные состояния кнопок. Хорошая импровизация показывает, что человек может заморочиться и сделать вау потому что ему хочется так сделать, а не потому что так сказал босс.

Ховеры на сайте Лиги А.

HTML

Что с семантикой? Есть ли header/main/footer? Правильно ли построена разметка по макету?

Правильная ли вложенность? Если лишние обёртки? Здесь сразу видно опыт у новичков бывает много лишних дивов.

Как вставлены картинки? Предусмотрены ли webp и ретина?

Как оформлены векторные элементы? Вектор это точно SVG, а не PNG? В тестовом задании мы обращаем внимание на сжатие SVG (вручную или через таск-менеджеры) и как элементы вставлены в разметку (лучше всего использовать спрайты для иконок, а не псевдоэлементы или img).

Вот что может случиться, если не подумать о графике заранее:

Внеклассное чтение:

Как свёрстана форма? Есть ли ховеры/фокусы? Какая кликабельность у элементов?

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

CSS

Прибит ли футер к низу экрана? Очень практическая штука, которая показывает опыт кандидата.

Вот здесь не прибит, например. Но мы всё равно вас любимВот здесь не прибит, например. Но мы всё равно вас любим

Как написана сетка? Используются гриды или флексы? Если сетка кривая, то или человеку всё равно, или он ещё джун.

Как подключаются шрифты? Если как-то странно, например, в каждом font-face в качестве шрифтового семейства прописаны montserrat-thin, montserrat-bold вместо montserrat и указания жирности отдельным свойством, то это джун. Используются ли новые свойства вроде font-display или unicode-range? Они не обязательны, но если есть и они действительно там нужны, это плюс.

Используются ли препроцессоры? Это необязательно в тестовом задании, но упрощает разработку.

В JavaScript-коде

Эти требования, в основном, для мидлов. Джуну достаточно знаний HTML/CSS и аккуратной сборки проекта.

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

let a = 1let b = 2setTimeout(() => {[a, b] = [b, a]console.log(a) // 2console.log(b) // 1}, 0)

Странный код для обмена значений двух переменных

Какая версия языка используется? Есть ли единообразие? Есть ли такое, что весь проект на ES5, а потом блок на ES6? Обычно это показатель того, что какой-то блока кода писал кто-то другой.

Пример смешивания:

Как разбит код? Это один огромный модуль (плохо) или есть деление на папки/скрипты, где 1 скрипт = 1 задача (хорошо)? Также не должно быть слишком много файлов, а вызов и обработка функции происходит в одном файле, а не в нескольких.

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

Spoiler
const mailRegEx = /[a-zA-Z0-9]{1}([a-zA-Z0-9-.]{1,})?@[a-zA-Z]{1}([a-zA-Z0-9.]{1,})?[a-zA-Z0-9]{1}.[a-zA-Z]{2,}/;const PHONEMINLENGTH = 18;const showErrorIcon = (sth) => {const input = sth.target || sth;const errorIcon = input.closest('.custom-input').querySelector('.custom-inputerror');if (!errorIcon.classList.contains('custom-inputerror--shown')) {errorIcon.classList.add('custom-input_error--shown');}};function IsNumeric(sText) {var ValidChars = "0123456789.";var IsNumber = true;var Char;for (i = 0; i < sText.length && IsNumber == true; i++) {Char = sText.charAt(i);if (ValidChars.indexOf(Char) == -1) {IsNumber = false;}}return IsNumber;}

Как выбрать нормальный плагин. Например, мы ищем слайдер и гугл выдал несколько вариантов:

  • https://kenwheeler.github.io/slick/

  • https://glidejs.com/

  • https://swiperjs.com/

Slick требует jQuery, у нас в проекте он не используется. Вычеркиваем.

Смотрим документацию. У glide она подробная, у swiper тоже. Если бы её не было, мы бы вычеркнули один из пунктов.

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

  • https://github.com/nolimits4web/swiper - 11 минут назад

  • https://github.com/glidejs/glide - 23 дня назад

Оба варианты хороши. Если бы последние обновления были 2-3 года назад, мы бы вычеркнули один из пунктов.

Далее смотрим на вес. glide ~23kb, swiper ~140kb значит, одно очко за glide.

Зачем нам плагин? У нас большой сайт с кучей анимаций, где нужно сделать слайдер в слайдере с 3D-эффектом перехода? Берем swiper, он как швейцарский нож, в котором есть почти всё. У нас одна страница с простыми переходами? Берём glide, в нём ничего лишнего.


Пример тестового задания

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

Учебный проект Барбершоп из курса HTML и CSS. Профессиональная вёрстка сайтовУчебный проект Барбершоп из курса HTML и CSS. Профессиональная вёрстка сайтов

Требования:

  • Шапка всегда закреплена, у неё белый фон;

  • Фильтр должен сортировать карточки;

  • Кнопка сбросить фильтр показывается после того, как выбрали что-нибудь;

  • Адаптив на своё усмотрение.

  • Нельзя использовать jQuery;

  • Возможно использование плагинов JavaScript;

  • Использование Gulp или Webpack для сборки будет преимуществом.

С таким заданием будет гораздо проще искать фронтендера хоть джуна, хоть мидла.

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

Подробнее..

Забудьте про div, семантика спасёт интернет

11.03.2021 14:15:49 | Автор: admin

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

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

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

Почему семантика важна

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

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

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

Классический пример расписание поезда Сапсан ввыдаче Google.

Разработчики tutu.ru сверстали таблицу тегом <table> вместо <div>и ихсниппет оказался ввыдаче Google поважному коммерческому запросу.

Семантика прописана встандартах. Многие разработчики постаринке пользуются конструкциями типа <div id="nav"> для обозначения навигации или других структурных элементов страницы. Тем временем встандарте HTML есть несколько семантических тегов, которые рекомендуется использовать для разметки страниц вместо <div> и <span>. Вспецификации для каждого семантического элемента описана его роль.

Нуипредставьте, насколько проще читать <nav></nav> вместо <div class="nav"></div>. Или вот такой код. Смотрите исразу понятно, что тут изачем.

<!DOCTYPE html><html lang="ru">  <head>    <meta charset="utf-8">    <title>Заголовок страницы</title>  </head>  <body>    <header class="main-header">      <! Шапка сайта >    </header>    <main>      <! Основное содержимое страницы >    </main>    <footer class="main-footer">      <! Подвал сайта >    </footer>  </body></html>

Основные семантические теги HTML

Среди старых тегов изранних версий HTML тоже есть семантические например, тег <p>, который обозначает параграф. При этом теги <i> или <b> несемантические, потому что они недобавляют смысла выделенному тексту, апросто определяют его внешний вид.

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

<article>

  • Значение: независимая, отделяемая смысловая единица, например комментарий, твит, статья, виджетВК итак далее.

  • Особенности: желателен заголовок внутри.

  • Типовые ошибки: путают стегами <section> и <div>.

<section>

  • Значение: смысловой раздел документа. Неотделяемый, вотличиеот <article>.

  • Особенности: желателен заголовок внутри.

  • Типовые ошибки: путают стегами <article> и <div>.

<aside>

  • Значение: побочный, косвенный для страницы контент.

  • Особенности: может иметь свой заголовок. Может встречаться несколько раз настранице.

  • Типовые ошибки: считать <aside> тегом для боковой панели иразмечать этим тегом основной контент, который связан сокружающими его элементами.

<nav>

  • Значение: навигационный раздел соссылками надругие страницы или другие части страниц.

  • Особенности: используется для основной навигации, анедля всех групп ссылок. Основной является навигация или нет наусмотрение верстальщика. Например, меню вподвале сайта можно необорачивать в <nav>. Вподвале обычно появляется краткий список ссылок (например, ссылка наглавную, копирайт иусловия) это неявляется основной навигацией, семантически для такой информации предназначен <footer> сам посебе.

  • Типовые ошибки: многие считают, что в <nav> может быть только список навигационных ссылок, носогласно спецификации там может быть навигация влюбой форме.

<header>

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

  • Особенности: этих элементов может быть несколько настранице.

  • Типовые ошибки: использовать только как шапку сайта.

<main>

  • Значение: основное, неповторяющееся надругих страницах, содержание страницы.

  • Особенности: должен быть один настранице, исходя изопределения.

  • Типовые ошибки: включать вэтот тегто, что повторяется надругих страницах (навигацию, копирайты итак далее).

<footer>

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

  • Особенности: этих элементов может быть несколько настранице. Тег <footer> необязан находиться вконце раздела.

  • Типовые ошибки: использовать только как подвал сайта.

Как разметить страницу сточки зрения семантики

Процесс разметки можно разделить нанесколько шагов сразной степенью детализации.

  1. Крупные смысловые блоки накаждой странице сайта. Теги: <header>, <main>, <footer>.

  2. Крупные смысловые разделы вблоках. Теги: <nav>, <section>, <article>, <aside>.

  3. Заголовок всего документа изаголовки смысловых разделов. Теги: <h1>-<h6>.

  4. Мелкие элементы всмысловых разделах. Списки, таблицы, демо-материалы, параграфы ипереносы, формы, цитаты, контактная информация ипрогресс.

  5. Фразовые элементы. Изображения, ссылки, кнопки, видео, время имелкие текстовые элементы.

Сомневаюсь, какие теги использовать

Есть простые правила для выбора нужных тегов.

  • Получилось найти самый подходящий смысловой тег использовать его.

  • Для потоковых контейнеров <div>.

  • Для мелких фразовых элементов (слово или фраза) <span>.

Правило для определения <article>, <section> и <div>:

  1. Можете дать имя разделу ивынести этот раздел надругой сайт? <article>

  2. Можете дать имя разделу, новынести надругой сайт неможете? <section>

  3. Неможете дать имя? Получается что-то наподобие новости ифотогалерея или правая колонка? <div>

Как точно ненужно делать

Неиспользуйте семантические теги для украшательств. Для этого есть CSS.

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

Здесь сразу несколько ошибок:

  1. Тег <blockquote> должен использоваться для выделения втексте цитат, анепросто случайного выделения текста. Так совпало, что вбраузерах этот блок поумолчанию выделен, ноэто незначит, что нужно его использовать таким образом.

  2. Тег <ul> тоже использован для визуального сдвига текста. Это неверно, потому что этот тег должен быть использован только для обозначения списков, аво-вторых, втег <ul> можно вкладывать только теги <li> иничего больше.

  3. Тег <p> использован, чтобы визуально раздвинуть текст. Насамом деле этот тег используется для выделения параграфов.

Алюбое выделение, сдвиг или иные превращения текста можно выполнить спомощью CSS.

Поэтому используйте семантические теги поназначению.


Более подробно методика создания семантической разметки описана внавыке Создание семантической разметки помакету икурсах HTMLAcademy. Можно начать с бесплатных тренажёров по основам HTML и CSS или с курса Профессиональная вёрстка сайтов. А с промокодом SKUCHNO цена станет ещё приятнее.

В конце концов, один раз живём.

Подробнее..

Все курсы по программированию устарели ещё до выхода. Или нет?

18.03.2021 14:16:42 | Автор: admin

Обучающие видео могут годами висеть на Ютубе, а пользователи будут смотреть их и не задумываться об актуальности. Хорошо, если это фундаментальные вещи, вроде лекций по физике или грамматике английского языка: даже через 5 лет кардинально там ничего не изменится. Но с IT такой номер не пройдёт. Технологии постоянно развиваются, появляются новые инструменты и задачи, которые надо решать. Поэтому любой устаревший учебник, памятка или видос на Ютубе могут навредить новичку.

Сложно самостоятельно разобраться в том, что на рынке действительно востребовано. Чем изучать всё, что попадётся, логичнее обратиться к полноценному курсу, где уже составлена программа обучения и есть наставник. Но где гарантия, что и эта программа соответствует потребностям рынка? Рассказываем, как HTML Academy поддерживает актуальность своих продуктов.


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

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

Исследование рынка

Первый профессиональный курс HTML Academy был создан в 2014 году. В тот момент он учитывал все требования рынка. На протяжении семи лет его содержание сильно менялось поэтому сейчас это такой же актуальный курс, только уже для 2021 года. К каждому учебному потоку наши профессиональные курсы обновляются на 15-20%. Учебных потоков за год обычно три соответственно, в год меняется примерно половина курса. Это позволяет сохранять уже существующие продукты, просто непрерывно улучшая их.

Общее содержание курсов зафиксировано. Но задача авторских команд поддержание актуальности этих курсов, чтобы на выходе были студенты, востребованные на рынке и способные выполнять те типовые задачи, которые потребуется потом решать в компаниях, рассказывает руководитель направления профессиональных курсов HTML Academy Ирина Ожерельева. Надо следить за всеми тенденциями, новинками на рынке и анализировать, каким образом они развиваются.

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

Проверка гипотез

Например, в прошлом году мы предположили, что в курсе JavaScript. Профессиональная разработка веб-интерфейсов нужно обновить версию стандарта ES6, по которому мы обучаем студентов, до ES2018. Мы поговорили с выпускниками, наставниками и представителями компаний, которые работают в сфере enterprise. Собрав мнения и изучив вакансии в Центре карьеры, мы поняли, что 60% работодателей требуют знания технологий из новой версии стандарта. Мы посмотрели поддержку этих технологий браузерами и решили обновить стандарт ECMAScript в программе курса до новой версии.

А иногда мы временим с обновлениями. Например, в конце 2020 года вышел PHP 8. Но при этом на рынке в ближайшие полгода он не будет нужен, потому что, в основном, проекты сейчас написаны на PHP 7. И если выпустить разработчиков, которые будут уметь работать только на новом, но не на старом, они не будут востребованы. Поэтому новая версия в курс PHP. Профессиональная веб-разработка пока не вошла. При этом мы активно работаем над обновлением, чтобы включить его в подходящий момент.

Коммуникация

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

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

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

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

  • Уметь написать простой интерактив табы, модальные окна, бургер-меню, аккордеоны, тултипы без плагинов на нативном JavaScript и jQuery.

  • Использовать готовые библиотеки для галерей и слайдеров на нативном JavaScript и jQuery.

  • Использовать плагины для создания ползунков, кастомных селектов.

  • Уметь обрабатывать и разбирать входящий JSON в HTML-элементы.

  • Уметь валидировать формы.

  • Собирать данные форм и отправлять их в Json.

  • Манипулировать DOM-элементами по разным событиям.

  • Уметь работать с неявными событиями.

  • Уметь работать с высотой и шириной страницы в зависимости от задачи.

  • Понимать, как отправляются формы и что такое AJAX.

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

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

Пример типовой задачи средней сложности сверстать список новостей по макету

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

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

  • инициативный, готов пройти испытательный срок;

  • умеет работать в команде;

  • постоянно расширяет знания;

  • делает кроссбраузерную, адаптивную, мобильную вёрстку;

  • идеально знает CSS, умеет делать CSS-анимации и использует БЭМ;

  • умеет работать с Git и GitHub;

  • может поддерживать существующие проекты и т.д.

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

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

Анализ данных

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

  1. Список инструментов и технологий. По нему можно судить, чем нужно владеть разработчику в первую очередь. Например, верстальщику или разработчику на React.

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

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

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

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

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

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

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


95% выпускников профессий HTML Academy устраиваются на работу не только из-за хорошего резюме. Они учатся профессиональной вёрстке и программированию, прокачивают скорость работы в Акселераторе и проходят оплачиваемую стажировку в Лиге А.. Ещё мы помогаем выпускникам найти работу даже в небольших городах то есть делаем всё, чтобы студенты могли заниматься новым любимым делом. Присоединяйтесь, старт обновлённой профессии React-разработчик 27 апреля.

Подробнее..

Используйте ссылки и кнопки правильно. Пожалуйста

09.06.2021 14:20:05 | Автор: admin

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

Почему возникает проблема

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

Ссылки создаются с помощью тега <a>.

<a href="http://personeltest.ru/aways/htmlacademy.ru">HTML Academy</a>

Кнопка это функциональный элемент. Она отвечает за выполнение определённой функции: добавить в корзину, купить, отправить, проголосовать и т. д.

Для кнопок используют тег <button>.

<button class="button">9 900 руб.</button>

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

Пример двух кнопок, где нижняя похожа на ссылкуПример двух кнопок, где нижняя похожа на ссылкуПример ссылки, похожей на кнопкуПример ссылки, похожей на кнопку

Что случится, если вместо ссылки сделать кнопку

Если URL-адрес обернуть не <а>, а тегом <button>, то при нажатии пользователя на правую кнопку мыши браузер предложит выполнить действия, которые положены при клике на кнопку. Адрес нельзя будет открыть в новой вкладке или отправить через контекстное меню.

Контекстное меню при клике правой кнопкой мыши на кнопкуКонтекстное меню при клике правой кнопкой мыши на кнопку

Такая кнопка не позволит открыть страницу в новой вкладке и через комбинацию клавиш Ctrl и левая кнопка мыши.

При наведении курсора на правильную ссылку её адрес появляется внизу окна браузера. URL-адрес, обёрнутый в <button>, не отобразится.

Адрес правильной ссылки в окне браузера при наведении на неё курсораАдрес правильной ссылки в окне браузера при наведении на неё курсора

Что произойдёт, если вместо кнопки сделать ссылку

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

Контекстное меню при клике правой кнопкой мыши на ссылкуКонтекстное меню при клике правой кнопкой мыши на ссылку

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

<a href="javascript:;">На самом деле это кнопка</a>

При наведении курсора на псевдоссылку внизу окна браузера появится не адрес, а javascript:; или АдресТекущейСтраницы/#.

Как определить элемент по макету

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

У ссылки должны быть стили для состояния покоя, при наведения курсора :hover, в момент нажатия :focus, активного :active и иногда состояния, когда пользователь уже посещал эту страницу :visited.

У кнопки нет состояния :visited, зато есть состояние блока :disabled.

Состояния ссылок в стайлгайде макетаСостояния ссылок в стайлгайде макета

Однако рассчитывать только на макет не нужно. У ссылки может не быть :visited, а у блока :disabled это может запутать.

Забудьте про div семантика спасёт интернет

Всё-таки кнопка или ссылка?

Если дизайнер по каким-то причинам не отрисовал состояния вообще, то придётся руководствоваться одной логикой.

Ссылка

Кнопка

За что отвечает

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

Выполнение какой-либо функции без перехода на другую страницу добавить в корзину, купить, отправить, проголосовать, войти и т. д.

Что видит пользователь

При наведении курсора на ссылку внизу окна браузера возникает её адрес.

Через меню по клику правой кнопкой мыши можно скопировать, отправить, открыть ссылку в новой вкладке.

При наведении курсора на ссылку внизу окна браузера не отображается адрес.

Через меню по клику правой кнопкой мыши нельзя скопировать адрес или поделиться им.

Пример, чтобы расставить всё по своим местам

На макете отрисована фраза Войти. Если клик по ней должен открывать окно для ввода регистрационных данных на этой же странице, это кнопка. Если при нажатии должна открываться отдельная страница для входа, это ссылка.

Другие великие противостояния


Ссылки ссылками, а промокод VESELO даст приятную скидку на любой профессиональный курс в HTML Academy. Например, на курс Анимации для фронтендеров можно записаться в любой момент, а пользы для карьеры будет целый вагон.

Подробнее..

Как реализовать dragampdrop на чистом JavaScript

11.02.2021 16:05:53 | Автор: admin

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

Drag &drop может понадобиться вразных ситуациях например, втаких:

  • Простое визуальное изменение положения элемента.

  • Сортировка элементов спомощью перетаскивания. Пример сортировка карточек задач втаск-трекере.

  • Изменение контекста элемента. Пример перенос задачи втаск-трекере изодного списка вдругой.

  • Перемещение локальных файлов вокно браузера.

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

HTML Drag and Drop API

Встандарте HTML5 есть API, который позволяет реализовать эффект drag &drop. Ондаёт возможность спомощью специальных событий контролировать захват элемента настранице мышью иего перемещение вновое положение. Рассмотрим этот API подробнее.

Поумолчанию перемещаться могут только ссылки, изображения ивыделенные фрагменты. Если начать перетаскиватьих, появится фантомная копия, которая будет следовать закурсором. Чтобы добавить возможность перетаскивания другим элементам, нужно задать атрибуту draggable значение true.

<div draggable="true">Draggable element</div>

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

  • drag срабатывает каждые несколько сотен миллисекунд, пока элемент перетаскивается.

  • dragstart срабатывает вмомент начала перетаскивания элемента.

  • dragend срабатывает вмомент, когда перетаскивание элемента завершено.

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

  • drop срабатывает втот момент, когда элемент будет брошен, если онможет быть перемещён втекущую зону.

При успешном перемещении элемент должен оказаться нановом месте. Нопоумолчанию большинство областей настранице недоступны для сброса. Чтобы создать область, вкоторую элементы могут быть сброшены, необходимо слушать событие dragover или drop нанужном элементе иотменять действие поумолчанию спомощью метода preventDefault. Тогда стандартное поведение будет переопределено перетаскивание исброс вэту область станут возможными. Рассмотрим напримере чуть позже.

Это далеко невсе возможности API. Также внём есть несколько интерфейсов, которые помогают получать доступ кданным перетаскиваемого элемента иизменятьих. Например, существует объект DataTransfer, который кроме всего прочего хранит информацию олокальных файлах, если они перетаскиваются. Вэтом туториале нам непонадобится использовать эти возможности, нобез DataTransfer необойтись, если нужно, например, загружать файлы скомпьютера исчитывать данные, чтобы затем производить сними какие-либо манипуляции. Подробно обэтом наMDN.

Приступим ксозданию нашего списка задач ирассмотрим напримере, как работать сHTML Drag and Drop API.

Вёрстка истилизация списка задач

Список будет состоять изнескольких задач изаголовка. Для начала создадим разметку. Здесь всё просто если речь идёт осписке, значит нужен тег ul.

<section class="tasks">  <h1 class="tasks__title">To do list</h1>  <ul class="tasks__list">    <li class="tasks__item">learn HTML</li>    <li class="tasks__item">learn CSS</li>    <li class="tasks__item">learn JavaScript</li>    <li class="tasks__item">learn PHP</li>    <li class="tasks__item">stay alive</li>  </ul></section>

Теперь добавим элементам базовую стилизацию:

body {  font-family: "Tahoma", sans-serif;  font-size: 18px;  line-height: 25px;  color: #164a44;  background-color: #b2d9d0;}.tasks__title {  margin: 50px 0 20px 0;  text-align: center;  text-transform: uppercase; }.tasks__list {  margin: 0;  padding: 0;  list-style: none;}.tasks__item {  transition: background-color 0.5s;  margin-bottom: 10px;  padding: 5px;  text-align: center;  border: 2px dashed #b2d9d0;  border-radius: 10px;  cursor: move;  background-color: #dff2ef;  transition: background-color 0.5s;}.tasks__item:last-child {  margin-bottom: 0;}.selected {  opacity: 0.6;}

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

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

Реализация drag &drop

Шаг1. Разрешим перетаскивание элементов

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

const tasksListElement = document.querySelector(`.tasks__list`);const taskElements = tasksListElement.querySelectorAll(`.tasks__item`);// Перебираем все элементы списка и присваиваем нужное значениеfor (const task of taskElements) {  task.draggable = true;}

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

Шаг2. Добавим реакцию наначало иконец перетаскивания

Будем отслеживать события dragstart и dragend навсём списке. Вначале перетаскивания будем добавлять класс selected элементу списка, накотором было вызвано событие. После окончания перетаскивания будем удалять этот класс.

tasksListElement.addEventListener(`dragstart`, (evt) => {  evt.target.classList.add(`selected`);})tasksListElement.addEventListener(`dragend`, (evt) => {  evt.target.classList.remove(`selected`);});

Шаг3. Реализуем логику перетаскивания

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

  1. Делаем всю область списка доступной для сброса.

  2. Находим выбранный элемент .selected итот элемент, накотором сработало событие dragover.

  3. Проверяем, что событие dragover сработало ненавыбранном элементе, потому что иначе перемещать элемент нет смысла онуже нанужном месте.

  4. Также проверяем, что dragover сработало именно наодном изэлементов списка. Это важно, потому что курсор может оказаться инапустом пространстве между элементами, аоно нас неинтересует.

  5. Находим элемент, перед которым нужно осуществить вставку. Сделаем это, сравнив положение выбранного элемента итекущего, накоторый наведён курсор.

  6. Вставляем выбранный элемент нановое место.

Напишем код:

tasksListElement.addEventListener(`dragover`, (evt) => {  // Разрешаем сбрасывать элементы в эту область  evt.preventDefault();  // Находим перемещаемый элемент  const activeElement = tasksListElement.querySelector(`.selected`);  // Находим элемент, над которым в данный момент находится курсор  const currentElement = evt.target;  // Проверяем, что событие сработало:  // 1. не на том элементе, который мы перемещаем,  // 2. именно на элементе списка  const isMoveable = activeElement !== currentElement &&    currentElement.classList.contains(`tasks__item`);  // Если нет, прерываем выполнение функции  if (!isMoveable) {    return;  }  // Находим элемент, перед которым будем вставлять  const nextElement = (currentElement === activeElement.nextElementSibling) ?      currentElement.nextElementSibling :      currentElement;  // Вставляем activeElement перед nextElement  tasksListElement.insertBefore(activeElement, nextElement);});

Для поиска nextElement мыиспользовали тернарный оператор. Если выещё сним незнакомы, это можно исправить, прочитав статью.

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

Шаг4. Учтём положение курсора относительно центра

Функция должна принимать навход вертикальную координату курсора итекущий элемент, накотором сработало событие dragover. Мыбудем сравнивать текущее положение курсора сцентральной осью элемента, над которым курсор находится вмомент перетаскивания. Таким образом, если мыхотим поменять элементы местами, товставка должна сработать втот момент, когда курсор пересекает центральную ось. Значит нас интересуют вертикальные координаты курсора ицентра элемента, над которым оннаходится.

Давайте создадим функцию getNextElement(). Мыуже знаем, что она должна возвращать тот элемент, перед которым нужно сделать вставку. Вэтом нам поможет координата курсора итекущий элемент, которые будут переданы впараметры.

Чтобы получить вертикальную координату текущего элемента, используем метод getBoundingClientRect(). Онвызывается наэлементе ивозвращает объект, всвойствах которого находится информация оразмерах икоординатах элемента относительно вьюпорта. Нам понадобится координата y, нотакже нужно будет учесть высоту элемента height, потому что у рассчитывается относительно верхнего левого угла элемента, анам нужен центр.

const getNextElement = (cursorPosition, currentElement) => {  // Получаем объект с размерами и координатами  const currentElementCoord = currentElement.getBoundingClientRect();  // Находим вертикальную координату центра текущего элемента  const currentElementCenter = currentElementCoord.y + currentElementCoord.height / 2;  // Если курсор выше центра элемента, возвращаем текущий элемент  // В ином случае  следующий DOM-элемент  const nextElement = (cursorPosition < currentElementCenter) ?      currentElement :      currentElement.nextElementSibling;  return nextElement;};

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

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

tasksListElement.addEventListener(`dragover`, (evt) => {  evt.preventDefault();  const activeElement = tasksListElement.querySelector(`.selected`);  const currentElement = evt.target;  const isMoveable = activeElement !== currentElement &&    currentElement.classList.contains(`tasks__item`);  if (!isMoveable) {    return;  }  // evt.clientY  вертикальная координата курсора в момент,  // когда сработало событие  const nextElement = getNextElement(evt.clientY, currentElement);  // Проверяем, нужно ли менять элементы местами  if (    nextElement &&     activeElement === nextElement.previousElementSibling ||    activeElement === nextElement  ) {    // Если нет, выходим из функции, чтобы избежать лишних изменений в DOM    return;  }  tasksListElement.insertBefore(activeElement, nextElement);});

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

Полезности


В HTML Academy обновилась профессия React-разработчик теперь в программе очень много программирования на JavaScript и React.js и бесконечное количество практики. Там не только список задач, целый космический корабль можно сделать. После обучения проверка и прокачка навыков на реальных проектах и оплачиваемая стажировка на коммерческих заказах. 95% выпускников профессии трудоустраиваются. Старт 27 апреля.

Подробнее..

Живые инеживые коллекции вJavaScript

06.05.2021 10:07:53 | Автор: admin

Найти несколько DOM-элементов иполучить кним доступ изJavaScript можно разными способами:querySelectorAll,getElementsByTagName,childrenитак далее. Витоге вкаждом случае будет возвращенаколлекция сущность, которая похожа намассив объектов, нопри этом имнеявляется, насамом деле это набор DOM-элементов. Стоит учесть, что фактически разные методы возвращают разные коллекции:

  • HTMLCollectionколлекция непосредственно HTML-элементов.

  • NodeListколлекция узлов, более абстрактное понятие. Например, вDOM-дереве есть нетолько узлы-элементы, нотакже текстовые узлы, узлы-комментарии идругие, поэтомуNodeListможет содержать другие типы узлов.

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

Вовремя работы сколлекциями можно столкнуться споведением, которое покажется странным, если незнать один нюанс они бываютживыми(динамическими) инеживыми(статическими). Тоесть либо реагируют налюбое изменение DOM, либо нет. Вид коллекции зависит отспособа, спомощью которого она получена. Рассмотрим напримере.

Разница между живыми инеживыми коллекциями

Допустим, вразметке есть список книг:

<ul class="books">    <li class="book book--one"></li>    <li class="book book--two"></li>    <li class="book book--three"></li></ul>

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

const booksList = document.querySelector('.books');const liveBooks = booksList.children;// Выведем все дочерние элементы списка .booksconsole.log(liveBooks);
const notLiveBooks = document.querySelectorAll('.book');// Выведем коллекцию, содержащую все элементы с классом bookconsole.log(notLiveBooks);

Пока никакой разницы невидно. Вобоих случаяхconsole.logвыведет одни итеже элементы. Ночто, если попробовать удалить изDOM одну изкниг?

const booksList = document.querySelector('.books');const liveBooks = booksList.children;// Удалим первую книгуliveBooks[0].remove();// Получим 2console.log(liveBooks.length);// Получим элемент book--two, который теперь стал первым в коллекцииconsole.log(liveBooks[0]);
const notLiveBooks = document.querySelectorAll('.book');// Удалим первую книгуnotLiveBooks[0].remove();// Получим 3console.log(notLiveBooks.length);// Получим ссылку на удалённый элемент book--oneconsole.log(notLiveBooks[0]);

Впервом случае информация околичестве элементов внутри коллекции автоматически обновилась после удаления одного элемента изDOM эта коллекция живая. Вовтором случае впеременнойnotLiveBooksхранится первоначальное состояние коллекции, которое было актуально намомент вызова методаquerySelectorAll. Эта коллекция неживая, она ничего незнает обизменении DOM. При этом доступна ссылка наудалённый элементbook--one, которого фактически больше нет вDOM.

Другие способы получить коллекцию

КромеchildrenиquerySelectorAllесть другие способы поиска DOM-элементов:

  • getElementsByTagName(tag)находит все элементы сзаданным тегом,

  • getElementsByClassName(className)находит все элементы сзаданным классом,

  • getElementsByName(name)находит все элементы сзаданным атрибутомname.

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

Как использовать

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

Структура инекоторые свойства коллекции имеют много общего смассивом. Например, унеё тоже есть свойствоlength, иэлементы коллекции можно перебирать вциклеfor...of, потому что это перечисляемая сущность. Но, как упоминалось ранее, коллекции невовсём похожи наобычные массивы. Сколлекциями неработают такие методы массивов, какpush,spliceидругие. Для ихиспользования нужно преобразовать коллекцию вмассив например, спомощью методаArray.from:

const booksList = document.querySelector('.books');const books = booksList.children;// Выведет обычный массив с элементами из коллекции booksconsole.log(Array.from(books));

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


В HTML Academy есть курсы для опытных разработчиков по анимациям для фронтендеров, вёрстке email-рассылок и Vue.js. Приходите, чтобы улучшить навыки и узнать много нового о веб-разработке а там со всеми этими знаниями и до сеньора недалеко.

Подробнее..

Я никогда не научусь верстать и другие мифы о разработке

24.02.2021 14:21:40 | Автор: admin
За 15 лет я успел забыть, что и так можно былоЗа 15 лет я успел забыть, что и так можно было

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

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

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

Миф 1. Веб-разработка не для меня

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

Слушай, это легко. Пиши весь код в TypeScript. Все модули, использующие Fetch компилируй в ES6, транспайль их с Babel с stage-3, и загружай с SystemJS. Если у тебя нет Fetch, используй polyfill, или Bluebird, Request или Axios, и обрабатывай промисы с await.

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

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

Миф 2. Страшно сделать ошибку

Негативный опыт хороший учитель.

Когда мы получаем штраф, хочется исправиться и больше не повторять. Так что можно даже сказать, что чем больше ошибок в начале, тем лучше. Когда я писал свой первый код на Visual Basic, у меня уже был интернет, но я принципиально им не пользовался, потому что неспортивно. Сейчас, конечно, так бы не стал, но кто слушает тридцатилетних себя из будущего в 13 лет?

Миф #24149. Картинки из xkcd делают статью о программировании лучшеМиф #24149. Картинки из xkcd делают статью о программировании лучше

Что делать. Разрешите себе пробовать снова и снова. Что самое страшное может случиться? Ну, зависнет страничка, и придётся перезагрузить компьютер. В крайнем случае переустановите свою Windows 98. Это не сложно, зато можно продолжать попытки.

Миф 3. Ошибка конец света

В начале кажется, что если в коде ошибка, то сломано вообще всё. Обычно это не так. Я хотел бы посчитать, сколько времени потратило человечество на исправление ошибок в один символ в каком-нибудь PHP. Или хотя бы я сам, когда писал сортировки массивов на Паскале. Хотел бы, но не могу.

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

Миф 4. Сложно сделать первый проект

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

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

Одна из моих первых наивных попыток разбить что-то на фичи. А потом придумать им стильное названиеОдна из моих первых наивных попыток разбить что-то на фичи. А потом придумать им стильное название

Миф 5. Код можно никому не показывать

Этот миф распространён среди тех, кто представляет себе программистов в виде злобных капюшонистых хакеров в тёмном подвале.

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

Что делать. Найти разработчика, который будет смотреть ваш код, пока вы учитесь. Можно поискать среди спикеров профильных ивентов, нагуглить наставников HTML Academy или просто среди программистов в социальных сетях. Конечно, эти люди могут отказывать по многим причинам может не быть времени или желания кого-то обучать. К тому же не все готовы помогать бесплатно, поэтому будьте готовы договариваться. Постоянный ментор может оказаться дороже, чем периодические ревью вашего кода.

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

Чтобы было проще, объединяйтесь с другими новичками. Придумайте общий проект и пилите его вместе (а то мы джва года ждём). Вы научитесь командной работе, будете поддерживать друг друга, спорить, обмениваться мнениями. Вместе расти проще, чем в одиночку. А ещё, если не лень, можно скинуться на ревьюера кода, чтобы было выгоднее.

Все мы знаем, зачем нужен GitВсе мы знаем, зачем нужен Git

Миф 6. После курсов платят по 200 тысяч

Этот миф пошёл из рекламы некоторых курсов, но на практике такое практически не случается. 200 тысяч зарплата синьора в большом городе, но никак не джуна после курсов. Можно через годик-другой добраться до 100 тысяч в месяц, но для этого придётся многому научиться. Курсы только одна из ступеней к большой зарплате, и всё зависит от мотивации и желания постоянно развиваться. Это тот случай, когда план развития важнее прочитанной когда-то теории.

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

Миф 7. Невозможно научиться самостоятельно

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

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

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


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

1 марта в HTML Academy начинается очередной марафон по вёрстке. За три недели вы разберётесь в основах HTML и CSS, сверстаете сайт по макету и выложите его в интернет. В программе 28 тренажёров, которые обычно платные, но для участников марафона будут доступны бесплатно. Ещё разыграем одно место на курсе HTML и CSS. Профессиональная вёрстка сайтов.

Чтобы принять участие, подпишитесь на рассылку в Телеграме или в VK там мы будем присылать макет, материалы для обучения, план работы и подбадривающие сообщения. В день старта марафона мы запустим чат для участников, там можно будет обсудить сложные моменты и задать вопросы обо всём, что непонятно.

Подробнее..

Все научились программировать. А дальше-то что?

10.03.2021 10:18:02 | Автор: admin

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

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

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


Вводные: Серёжа любым способом научился программировать. Что ему делать дальше?

Ничего не менять

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

Главное смириться с тем, что продавать туфли придётся ещё долго.

Кому подходит: всем.

Минусы: туфли сами себя не продадут.

Пробовать себя во всём

Языков, инструментов и фреймворков просто тьма. Типичное заблуждение новичков звучит примерно так:

Так, надо попробовать вон тот форк переиздания пятой версии реакта, и NoSQL хвалят, а ещё Svelte неожиданно пробивается в топы. С другой стороны есть друзья с проектами на Wordpress и разработка плагинов для плагинов jQuery на фрилансе. Там всё понятно, да и PHP не очень сложный.

Так-то оно так. Но здесь важно составить план, что и в каком порядке изучать (например, никогда не прикасаться к Java), иначе можно оказаться в ситуации, когда вы знаете всего понемногу, но нигде не дотягиваете даже до джуна. Хотя даже здесь есть выход можно пойти менеджером проектов.

Джейсон Стэтхем, II в. до н.э.Джейсон Стэтхем, II в. до н.э.

Кому подходит: всем, кому не понравилось, что 1+1 не равно двум в каждый из разов.

Минусы: каша в голове, если работать без плана.

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

Углубляться в технологию

Другой подход сфокусироваться и заниматься конкретным языком или технологией. Если выучили JavaScript, то плотно заняться практикой в веб-приложениях. Если C# подумать, подходит ли вам имя Филипп.

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

Другой путь придумать полезный сервис, работающий каким-нибудь API, со всякими элементами управления, чтобы практиковаться в JavaScript. Здесь может быть проблема с инновационной идеей, поэтому полезным сервисом может быть даже очередной таск-трекер. Главное понимать, как всё внутри работает, но если вы сделали всё самостоятельно, то это не проблема. Такой проект можно выложить на GitHub он пригодится на собеседованиях и при большой удаче может сойти за тестовое задание.

Я бы не стремилась выучить всё подряд. а закрепить на практике навыки, полученные в обучении. Тут как с языками без практики, можно быстро всё забыть. Особенно, если ты новичок и у тебя опыта нет пока. Поэтому я бы

искала стажировку

вписалась бы в какой-то проект за еду

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

сделала бы сайт для какой-то благотворительной штуки

откликалась бы на кучу вакансий с тестовыми и делала бы все тестовые

сделала бы свой какой-то проект.

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

Лера Зелёная, продюсер цифровых продуктов HTML Academy

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

Минусы: за них скорее всего не заплатят.

Готовиться к собеседованиям

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

Опытные разработчики иногда ходят по компаниям даже без мысли устраиваться туда. Это как спорт знаете, людей посмотреть, себя показать (или вдруг денег предложат побольше). А вот новичкам полезно разобраться, что происходит на собеседованиях, о чём спрашивают и чего говорить вообще никогда-никогда нельзя. Например, никогда не говорите, что вы 1С-программист, если не ищете работу 1С-программиста.

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

Короткий список дел такой:

  • Попасть на как можно большее количество собеседований, чтобы понять, каких знаний и навыков не хватает, и подтягивать эти темы.

  • Если дадут, то брать тестовые задания и делать их как можно быстрее.

Кому подходит: тем, кто уже готов ко всем этим взрослым деловым переговорам о работе.

Минусы: нужно много времени.

Учиться на работе

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

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

Кому подходит: всем, кто уже прям готов.

Минусы: хорошие туфли всё равно стоят дорого, придётся потрудиться.

И кажется, этого на первых порах будет достаточно.


Любой путь начинается с первого шага. Во фронтенде можно начать с бесплатных тренажёров по основам HTML и CSS или с курса Профессиональная вёрстка сайтов. А с промокодом SKUCHNO цена станет ещё приятнее.

Подробнее..

Нестандартные шрифты как подключить и оптимизировать

15.04.2021 10:21:55 | Автор: admin

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

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

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

Выбираем формат шрифта

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

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

Подключение шрифтов с помощью Google Fonts

Есть простой и удобный способ подключить нестандартный шрифт использовать Google Fonts. Это бесплатный сервис, с помощью которого можно подключать шрифты, но не хранить их на своём сервере. Чтобы им воспользоваться, необходимо выбрать шрифт и добавить одно или несколько нужных начертаний, а затем вставить в <head> ссылку, которую сгенерирует Google Fonts во вкладке Embed.

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

body {font-family: "Roboto", "Arial", sans-serif;}

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

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

Подключение шрифтов с помощью правила @font-face

Есть альтернативный способ, при котором файлы со шрифтами хранятся вместе с остальными ресурсами сайта. Для них принято заводить отдельную директорию в корне проекта например, fonts. В неё следует поместить файлы для каждого начертания в нужных форматах в большинстве случаев, если не требуется поддержка старых браузеров, подойдут .woff и .woff2, о которых мы говорили ранее. Шрифты можно скачать на различных ресурсах. При этом всегда нужно обращать внимание на лицензию некоторые шрифты могут быть недоступны для коммерческого использования.

После того, как шрифты добавлены в проект, их нужно подключить в CSS-файле. Для этого используется правило @font-face. В самом базовом варианте оно будет включать:

  1. Название шрифта, которое затем нужно использовать, чтобы задать элементам подключённый шрифт.

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

  3. Начертания: жирное, курсивное и так далее. Для каждого начертания нужно отдельное правило @font-face.

Базовый вариант правила:

@font-face {font-family: "Roboto";font-style: normal;font-weight: 400;/* Браузер сначала попробует найти шрифт локально */src: local("Roboto"),/* Если не получилось, загрузит woff2 */url("/fonts/roboto.woff2") format("woff2"),/* Если браузер не поддерживает woff2, загрузит woff */url("/fonts/roboto.woff") format("woff");}/* Теперь можно использовать шрифт */body {font-family: "Roboto", "Arial", sans-serif;}

Для улучшения производительности правило @font-face лучше всего прописывать в самом начале CSS-файла. Так браузер сможет раньше начать обработку шрифта.

Оптимизация

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

FOIT, FOUT и FOFT

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

FOIT (Flash of Invisible Text) с англ. мелькание невидимого текста. При таком поведении, пока шрифт не загрузится, текст не отображается и появляется только после загрузки шрифта. Значительная проблема во время загрузки нет доступа к текстовому контенту.

FOUT (Flash of Unstyled Text) с англ. мелькание неоформленного текста. Во время загрузки используется шрифт, заданный по умолчанию (системный, например), а после загрузки страница перерисовывается с использованием загрузившегося шрифта. Эта перерисовка довольно заметна и может быть нежелательна.

FOFT (Flash of Faux Text) с англ. мелькание синтезированного текста. Это поведение можно наблюдать в промежутке, когда основное начертание уже загрузилось, а дополнительные (жирное, курсивное и так далее) нет. Браузер имитирует нужное начертание до загрузки настоящей версии. В этом случае страница может перерисовываться несколько раз по мере загрузки начертаний.

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

Свойство font-display

У свойства есть несколько значений, которые определяют поведение текста во время загрузки шрифта:

  • auto поведение по умолчанию, зависит от браузера.

  • block текст не отображается в течение короткого периода (3 секунды), затем отрисовывается запасной шрифт, если основной ещё не загрузился. Как только загрузка завершается, текст перерисовывается снова.

  • swap сразу же отрисовывается запасной шрифт, после загрузки шрифта повторный рендеринг.

  • fallback в течение очень короткого периода (100 миллисекунд) не отображается ничего, затем браузер использует запасной шрифт и ждёт 3 секунды если шрифт всё ещё не загрузился, остаётся запасной шрифт. Далее не важно, загрузился шрифт или нет, замена не произойдёт. Если шрифт загрузится, то он применится только при обновлении страницы.

  • optional текст не отображается в течение 100 миллисекунд, а затем отрисовывается запасным шрифтом. Даже если шрифт загрузится после этого, замена произойдёт только при обновлении страницы.

Оптимальное значение swap, его можно использовать в большинстве случаев, оно удобно для пользователей. При подключении шрифта с помощью Google Fonts это значение установлено по умолчанию. Если же есть необходимость избежать мелькания текста (например, для вдумчивого чтения), подойдёт optional.

Предзагрузка шрифтов

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

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

Для того, чтобы предзагрузка сработала, нужно поместить в <head> ссылку на шрифт и задать атрибуту rel значение preload:

<link rel="preload" href="http://personeltest.ru/aways/habr.com/fonts/roboto.woff2" as="font">

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

Уменьшение количества глифов шрифта

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

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

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

Google Fonts по умолчанию использует сабсеты. Это можно увидеть, открыв CSS-файл, который подключается в <head> при использовании сервиса. Для каждого языка есть отдельный сабсет. Пример для латиницы и кириллицы:

/* latin */@font-face {font-family: "Roboto";font-style: normal;font-weight: 400;font-display: swap;src: local("Roboto"),local("Roboto-Regular"),url(http://personeltest.ru/aways/fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2)format("woff2");unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,U+2212, U+2215, U+FEFF, U+FFFD;}/* cyrillic */@font-face {font-family: "Roboto";font-style: normal;font-weight: 400;font-display: swap;src: local("Roboto"),local("Roboto-Regular"),url(http://personeltest.ru/aways/fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu5mxKOzY.woff2)format("woff2");unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}

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

Полезности

Подробнее..

Резюме, тестовые и прочие неприятности

28.04.2021 12:07:29 | Автор: admin

Резюме и ответ на тестовое задание первое, что работодатель получает от кандидата. Если на этом этапе что-то не так, до собеседования дело не доходит. Только кандидату не всегда сообщают, в чём конкретно проблема.

Мы попросили наших студентов, выпускников и подписчиков поделиться воспоминаниями о том, как они искали работу. Спустя месяцы кто-то так и не понял, почему его или её не пригласили на собеседование, остались догадки и вопросы. Мы показали эти истории тем, кто нанимает разработчиков, и получился целый диалог теперь на все ситуации можно посмотреть с обеих сторон. Каждый пункт прокомментировали технический директор HTML Academy Алексей Малейков и HR фронтенд-аутсорса Лига А. София Петлякова.

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

Отклик на вакансию

Мне вообще не отвечают

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

Подписчики HTML Aсademy о неотвеченных откликахПодписчики HTML Aсademy о неотвеченных откликах

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

Дмитрий, студент

Отсутствие ответа на отклик это своего рода дурной тон. Даже если большой поток откликов уже обработан, назначены собеседования, остальным всё равно надо ответить, что работодатель сейчас не может ничего предложить и набор уже не проводится. В таких случаях есть заготовленные ответы, и нет ничего сложного в том, чтобы успокоить человека. Со стороны соискателя тоже нормально напомнить о себе. Письмо может затеряться, работодатель может быть занят. Так что напомнить о себе через пару дней вполне норма. Работодатель увидит, что человек заинтересован и хочет работать именно у него.

Алексей Малейков

Отказали после просмотра резюме

Кто-то считает, что в резюме надо расписать все свои (или не совсем свои) лучшие качества и рассказать обо всём, что он когда-то делал. Мало ли что пригодится! Но работодатели смотрят на это по-другому и могут отказать, даже не предложив выполнить тестовое задание.

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

Анна, выпускница

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

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

София Петлякова

Ответили, но прошла куча времени

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

Подписчики HTML Academy об ответах работодателейПодписчики HTML Academy об ответах работодателей

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

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

Вячеслав, выпускник

Оптимальный срок для ответа два-три рабочих дня. Конечно, в разных компаниях процессы устроены по-разному, но отвечать человеку спустя месяц странно. За это время в компании может что-то поменяться, сам человек уже может передумать или устроиться на другое место. Может быть простительна неделя, максимум две. А когда ответы приходят через месяц, закрадываются сомнения: а работа тоже построена так, с задержками и проблемами? В серьёзных структурах, компаниях могут проводиться дополнительные проверки, например, службой безопасности, что может повлиять на скорость ответа, но обычно это происходит уже на следующих этапах.

Алексей Малейков

Почему я должен редактировать резюме под каждую компанию?

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

В резюме я кратко пишу о себе: что умею (2-3 пункта, самых значимых по моему мнению), причина, по которой хочу поменять работу, почему мне понравилась вакансия и чем я могу быть им полезна. В разные компании отправляю одно и тоже резюме, но графу О себе немного меняю под вакансию или компанию.

Анна, выпускница

Плохой пример сопроводительного письмаПлохой пример сопроводительного письма

Если есть сопроводительное письмо, в котором человек пишет, почему он хочет попасть именно в эту компанию, то резюме можно не редактировать. Единственное в резюме надо правильно указать должность, на которую ты претендуешь.

Алексей Малейков

Когда человек откликается, например, на вакансию менеджера проектов, а в шапке написано QA Engineer Junior, это вызывает вопросы и создаёт впечатление, что человек ещё не определился с выбором.

София Петлякова

Хороший пример настоящего сопроводительного письмаХороший пример настоящего сопроводительного письма

Что запомнить

Кандидатам

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

  • Составьте резюме в официально-деловом стиле. Покажите, что вы умеете вести деловую переписку.

  • Опишите только тот опыт, который относится к должности.

  • Резюме под конкретного работодателя можно не менять, если добавить сопроводительное письмо, где написано, почему должны взять именно вас. Только не забудьте указать в резюме правильную должность.

Эйчарам

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

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


Заметка на полях: нужно ли делать резюме красивеньким?

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

Я составлял своё резюме в Word. Думаю, что работодатель не обращает внимание на оформление. Главное чтобы оно было аккуратно составлено.

Антон, выпускник

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

Алексей Малейков

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

София Петлякова


Тестовое задание

У меня есть портфолио, зачем тестовое задание?

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

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

Марина, выпускница

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

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

Алексей Малейков

Не хочу тратить много времени на тестовое задание

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

Я отказывался выполнять тестовое задание, если по объёму оно занимало более 20 часов и выглядело как вполне реальная задача (например, сделать полноценную галерею или Masonry сетку). Создаётся впечатление, что хотят сделать реальную работу бесплатно.

Константин, подписчик

Пример тестового задания сверстать виджетПример тестового задания сверстать виджет

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

Даже для работодателя невыгодно давать сверстать целый макет: проверять его слишком долго. Это большая затрата времени для всех. Оптимальное тестовое задание должно выполняться не больше четырёх часов.

Алексей Малейков

Не хочу бесплатно делать для вас работу

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

Некоторые тестовые задания были очень объёмными, и я спрашивал, будут ли они оплачиваться. Мне отвечали отказом, и я их просто не выполнял.

Александр, выпускник

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

Алексей Малейков

Моё тестовое украдут и используют без спроса

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

В качестве тестового задания мне предложили сверстать всю главную страницу макета, включая меню на JavaScript и попап. Из-за большого объёма, появилось подозрение, что это реальный проект. Когда я спросил руководителя, так ли это, он ответил: А что, бывают тестовые не по реальным проектам?

Александр, выпускник

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

Алексей Малейков

Прислали отписку вместо подробного ответа на тестовое

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

Мне приходила обратная связь, но очень служебная, типа: Сделанное тестовое задание не на том уровне, на котором мы ожидали. То есть текст, который отправляют всем. И никакой конкретики нет. Чего они ожидали? Какие проблемы?

Александр, выпускник

Пример неудачного ответа на откликПример неудачного ответа на отклик

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

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

София Петлякова

Пример развёрнутой обратной связи Пример развёрнутой обратной связи

Что запомнить

Кандидатам

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

  • Если вы понимаете, что на тестовое надо потратить несколько дней, возможно, оно составлено некорректно. Попробуйте уточнить, нет ли ошибки, или спросите об оплате.

Эйчарам

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

  • Задания, рассчитанные на несколько дней, тянут на полноценную работу. В таком случае не исключено, что кандидат спросит про оплату.

  • Давайте развёрнутую обратную связь, даже если результат совсем не очень.

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

Ну и не забывайте, что без навыков найти работу во фронтенде тяжеловато. Приходите на профессию Фронтенд-разработчик в HTML Academy, мы всему научим, простажируем и поможем с поиском работы. А там и советы из этой статьи пригодятся.

Внеклассное чтение

Что написать в резюме, если нет опыта работы

17 ошибок, которые испортят любое резюме Блог HTML Academy

Тестовое задание для фронтендера

Как провалить собеседование Блог HTML Academy

Устроиться веб-разработчиком: 5 шагов для подготовки к собеседованию

Подробнее..

Что написать в резюме, если нет опыта работы

20.02.2021 16:15:19 | Автор: admin

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

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

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

Напишите, кто вы

Если вы ищете работу в России, то имя и фамилия должны быть заполнены по-русски.

Укажите место проживания. Эта информация важна, чтобы работодатель понимал, сможете ли вы ходить в офис, или в каком часовом поясе вы находитесь, если работа удалённая. Явно укажите, готовы ли вы работать удалённо или рассматриваете только офис. Если готовы переехать так и напишите.

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

Загрузите фотографию

По этому пункту много споров некоторые говорят, что фотография ни на что не влияет и в иностранных компаниях это необязательный пункт. Тем не менее в российских компаниях на наличие фотографии чаще всего смотрят. Её присутствие говорит о том, что человек себя не скрывает и готов заявить о себе заочно.

Есть несколько правил к фото в резюме:

  • не должно быть лишних людей,

  • желательно на однотонном фоне

  • в меру строго и с улыбкой. Когда кандидат доброжелателен на фотографии, это притягивает.

Определитесь с должностью

Пишите по делу и что-нибудь одно это самый хороший вариант. После курсов по разработке вполне рабочие версии такие:

  • HTML-верстальщик

  • Фронтенд-разработчик

  • РНР-разработчик

  • Веб-разработчик

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

Напишите, сколько хотите денег

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

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

Вспомните всё, что было похоже на опыт

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

Например, прохождение стажировки в настоящей компании тоже считается опытом, даже если денег за это не платили.

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

Рассказывает Екатерина Новографская, HR-менеджер компании iBrush:

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

И нетленная классика: выберите адекватное фото, где вас хорошо видно, добавьте рабочую почту (немного странно отправлять предложение о работе на почту kiska94735@mail.ru), перечислите списком ваши навыки. И не забудьте написать пару слов о себе: чем увлекаетесь, какие у вас интересы и цели. Также можете указать нюансы, касаемые графика работы, если имеются.

Расскажите о себе

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

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

Напишите, что умеете из новой профессии

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

Например, средняя вакансия для верстальщика выглядит так:

  • Умеет делать адаптивную кроссбраузерную оптимизированную вёрстку, совместимую с современными браузерами. В вёрстке использует SVG.

  • Идеально знает CSS. Использует препроцессор Sass. Знает флексы. Умеет делать CSS-анимации и использует БЭМ. Знает библиотеку Bootstrap.

  • Знает HTML. В работе использует Canvas. Шаблонизирует HTML с помощью PUG.

  • Использует Git. Умеет работать в GitHub.

  • Может натянуть вёрстку на CMS: Bitrix и Wordpress.

  • JavaScript пишет с помощью jQuery, но не чурается ES6.

  • Умеет автоматизировать свою работу с Node.js, npm-скрипты, Autoprefixer, Gulp или Webрасk.

  • Уверенно владеет Photoshop и Illustrator или знает Figma или Sketch.

  • Имеет своё портфолио, инициативный, готов пройти испытательный срок

Конечно, для новичка здесь много непонятных слов и аббревиатур. Ничего страшного. Предположим, вы уже неплохо знаете HTML и CSS, работали с SVG и немного понимаете, как устроен JavaScript. Значит эти навыки и нужно указать, а некоторые пункты, о которых только слышали, перенести в план развития (тем более, выучить их всё равно придётся).

Рассказывает Назир Хасавов, основатель и арт-директор Студии NKH

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

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

Напишите, где учились

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

Хороший объем две страницы А4

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

Заполненное резюме должно занимать не больше двух страниц (представьте, что его нужно распечатать с двух сторон листа на А4, как раз поместится). Постарайтесь кратко и ёмко изложить всю необходимую информацию.

Напишите хоть какое-нибудь сопроводительное

Хорошее сопроводительное письмо суперсила. Здравствуйте, прошу рассмотреть моё резюме на вакансию тупик.

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

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

95% выпускников профессий HTML Academy устраиваются на работу не только из-за хорошего резюме. Они учатся профессиональной вёрстке и программированию, прокачивают скорость работы в Акселераторе и проходят оплачиваемую стажировку в Лиге А.. Ещё мы помогаем выпускникам найти работу даже в небольших городах то есть делаем всё, чтобы студенты могли заниматься новым любимым делом. Присоединяйтесь, старт профессии React-разработчик 27 апреля.

Как составить резюме, если нет опыта работы

  1. Честно напишите, кто вы имя, возраст, город

  2. Фотка с улыбкой сила

  3. Должность должна быть одна. Никаких маркетолог-мясник

  4. Напишите, сколько хотите денег. Даже если сумма с потолка

  5. Если нет никакого опыта, сгодится любой похожий

  6. План развития важнее пятёрок в школе

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

  8. Образование важнее, чем кажется, но не критично

  9. Не больше двух страниц на всё (но растягивать и лить воду тоже не нужно)

  10. Сопроводительное письмо помогает. Прошу рассмотреть резюме нет


Подробнее..

Категории

Последние комментарии

  • Имя: Макс
    24.08.2022 | 11:28
    Я разраб в IT компании, работаю на арбитражную команду. Мы работаем с приламы и сайтами, при работе замечаются постоянные баны и лаги. Пацаны посоветовали сервис по анализу исходного кода,https://app Подробнее..
  • Имя: 9055410337
    20.08.2022 | 17:41
    поможем пишите в телеграм Подробнее..
  • Имя: sabbat
    17.08.2022 | 20:42
    Охренеть.. это просто шикарная статья, феноменально круто. Большое спасибо за разбор! Надеюсь как-нибудь с тобой связаться для обсуждений чего-либо) Подробнее..
  • Имя: Мария
    09.08.2022 | 14:44
    Добрый день. Если обладаете такой информацией, то подскажите, пожалуйста, где можно найти много-много материала по Yggdrasil и его уязвимостях для написания диплома? Благодарю. Подробнее..
© 2006-2024, personeltest.ru