Category: Frontend

28
Июл
2021

Реализация формы из шагов без перезагрузки страницы

Всем привет! Подскажите пожалуйста есть такая задача, есть форма из 5 шагов, как сделать так что бы каждый шаг открывался без перезагрузки страницы, или все на одной странице но каждый шаг ставал доступен только после корректного заполнени…

23
Июл
2021

🕸 16 шагов к профессии: дорожная карта фронтенд-разработчика в 2021 году

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

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

Обязанности фронтенд-разработчика

Список задач, которые решает Front-end developer, меняется в зависимости от специфики проекта и уровня подготовки разработчика. В него могут входить следующие позиции:

  • кросс-платформенная и адаптивная верстка сайтов;
  • работа со стеком Redux/React;
  • сопровождение и доработка проектов;
  • написание скриптов и создание реактивных компонентов;
  • поддержка проектов ES5;
  • развитие и поддержка архитектуры, основанной на виджетах и компонентах;
  • выполнение рефакторинга проектов;
  • разработка новых npm-модулей в существующих приложениях;
  • автоматизация тестирования и устранение багов, иногда с фрейморком JUnit;
  • разработка сайтов на Angular;
  • сопровождение и разработка сервисов, направленных на распознавание лиц и обработку видео;
  • разработка компонетов на Vue.
Развитие профессии привело к увеличению требований к начинающим фронтенд-разработчикам. На 2021 год Roadmap состоит из многих пунктов, разобраться с которыми поможет подборка на GitHub. Мы попробуем свести данные из разных источников воедино и на их основе составим свой план.

1. Изучите HTML, JavaScript и CSS


Веб-разработчикам никуда не деться от изучения трех «китов»: разметки (HTML), каскадной таблицы стилей (CSS) и языка программирования JavaScript. С этим помогут материалы на CodeAcademy и YouTube: HTML Full Course, CSS Tutorial и CSS Crash Course for Absolute Beginners, Object-oriented Programming in JavaScript.

2. Изучите несколько фреймворков

Для работы потребуется использовать один/несколько фреймворков: ReactJS, AngularJS, VueJS, Bootstrap. Разобраться с React JS поможет ролик freeCodeCamp на YouTube, там же можно найти курс по VeuJS.

3. Освойте работу с генераторами статических сайтов

Примеры статических сайтов: визитки, лендинги, справочники, каталоги продукции. Упростить их создание помогут: Next (React-based), Nuxt (Vue-based), Gatsby (React-based), Gridsome (Vue-based).

4. Научитесь работать с JAMstack

Расшифровка акронима JAM: JavaScript, API and Markup. Архитектура JAMStack основана на клиентском JavaScript, повторно используемых API и предварительно созданной разметке. Что такое JAMStack и как с ним работать можно почитать здесь и на snipcard. Дополнительно в стеке используют CDN и Git.

5. Освойте Progressive web apps (PWA)

Знания PWA (англ. progressive web app или мобильное приложение в браузере) потребуются опытным разработчикам. Прогрессивные приложения направлены на надежность и быстроту работы с технологиями Push Notifications, Service Worker, Web App manifest, App shell, HTTPS.

6. Освойте GraphQL


Этот язык запросов и манипулирования данными для API (а также среда выполнения запросов) является основным для каждого фронтендера, который не хочет работать за еду. Обрабатывающий запросы сервер GraphQL находится между клиентом и источниками данных.

На платформе Apollo реализация GraphQL направлена на транспортировку данных из облачного хранилища к пользовательскому приложению, а поклонники фреймворка Relay Modern использует GraphQL с приложениями data-driven.

Ресурсы для изучения GraphQL:

Дополнительные материалы

7. Научитесь выполнять тестирование и чистить код

Веб-программисту на коммерческом или корпоративном проекте стоит уметь выполнять:

  • Unit tests – проверку отдельных компонентов или функций.
  • Integration tests – тестирование корректности взаимодействия компонентов.
  • End-to-end test – тестирование пользовательских потоков в браузере.
  • Другие виды тестирование, которые нужны для старших разработчиков: manual testing, snapshot testing и т.д.
Front-end developer должен писать чистый код: читаемый, без дубликатов, с минимальным использованием методов, классов и функций.

Основы чистого кода:

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

8. Запаситесь книгами по основам фронтенда

Дэвид Флэнаган, «JavaScript. Подробное руководство».


Кайл Симпсон: cерия книг «Вы не знаете Javascript».


Натан Розенталс, «Изучаем TypeScript 3».


Доминик Майерс, «Front-End Developer».


Карлос Сантана Рольдан, «React Cookbook: Create Dynamic Web Apps with React».


Крис Акино и Тодд Ганди, «Front-End Web Development: The Big Nerd Ranch Guide».


Джон Дакетт, «HTML & CSS: Design and Build Web Sites».


9. Просмотрите туториалы на YouTube

10. Изучите работу с командной строкой

Если вы используете Windows, не стоит полагаться только на графический интерфейс. Чтобы упростить работу с файлами и каталогами (найти, открыть, закрыть, удалить и пр.), а также использовать неочевидные возможности ОС, потребуется знание базовых команд. Кроме старого доброго CMD рекомендуется освоить более прогрессивный PowerShell, а использующим один из дистрибутивов GNU/Linux разработчикам стоит изучить bash.

11. Изучите систему контроля версий Git и хостинг GitHub


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

Команды Git, которые стоит изучить
git config, git init, git commit, git clone, git status, git add, git pull, git push, git branch.

12. Следите за событиями кибербезопасности

Открытый проект OWASP собирает статистику, необходимую для обеспечения безопасности веб-приложения. Для изучения основ необходимо понимать отличия HTTPS и HTTP, какова политика защиты контента (CSP) и принципы работы с CORS.

13. Практикуйтесь как можно больше

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

14. Постоянно повышайте уровень знаний

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

Перечень недостающих знаний можно проверить по чек-листам:

15. Нарабатывайте софт-скилы

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

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

17. Пройдите курсы

Если вы знаете английский, можно пройти курс w3wschhools по HTML, CSS и JavaScript, или по программе Мичиганского университета заняться на coursera веб-дизайном и программированием. Популярная международная платформа предлагает множество аналогичных позиций, включая курс Duke university по основам JavaScript, HTML и CSS.

***

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

  • Изучение основ программирования.
  • Базовый курс Git.
  • Верстка (HTML/CSS), в том числе библиотека Bootstrap и препроцессоры SASS/LESS.
  • Принципы ООП, JavaScript, работа с Veu.js, API Webpack, Parcel, с различным окружением, подключение библиотек.
  • Работа с ReactJS и база backend-разработки с применением ECMAScript 6, Flux, Node.js, REST API.
  • Разработка проекта с нуля до релиза. Разъяснение методологий Kanban, Scrum, Agile, принципов Countinuous Delivery и Continuous Integration.
  • Дополнительно: подготовка к техническому собеседованию, базы данных, как заняться фрилансом и искать работу.
  • Практика: создание посадочных страниц, верстка страниц и сайтов, учитывая валидность, кросплатформенность и адаптивную верстку, создание приложения для учета расходов.
20
Июл
2021

Flutter Global Summit’21

Спикеры из крупных мировых компаний поговорят о применении Flutter и Dart в разработке приложений, сайтов и игр. Рассмотрят кейсы, проведут панельные дискуссии, воркшопы и Q&A-сессии.
— Читать дальше «Flutter Global Summit’21»

16
Июл
2021

Митап «Как устроена разработка в диджитал-агентстве: интервью с Red Collar»

Руководители Red Collar и HTML Academy расскажут о специфике разработки в диджитал-агентстве, задачах и проектах frontend-разработчика и трудоустройстве джунов.
— Читать дальше «Митап «Как устроена разработка в диджитал-агентстве: интервью с Red Collar…

15
Июл
2021

🛠 6 полезных фронтенд-приемов, о которых вы, возможно, не знаете

Небольшая подборка малоизвестных техник для HTML, CSS и JavaScript.

Фронтенд – это первая линия обороны веб-сайта (или, точнее, первая линия “нападения” на пользователя), поэтому у фронтендеров всегда много работы. Чтобы немножко облегчить им жизнь, мы подобрали несколько полезных, но не очень широко известных HTML, CSS и JavaScript-приемов.

1. Быстро скрыть

Чтобы спрятать DOM-элемент, вам не нужен JavaScript, достаточно нативного HTML-атрибута hidden. Эффект аналогичен добавлению стиля display: none, элемент просто исчезает со страницы.

        <p hidden>Этот параграф не виден на странице, он спрятан из HTML.</p>

    

Конечно, с псевдоэлементами такой трюк не сработает.

2. Быстро спозиционировать

Вы знакомы с CSS-свойством inset? Это сокращенный вариант для всем знакомых top, left, right и bottom. По аналогии с кратким синтаксисом свойства margin или padding вы можете задать все смещения для элемента одной строчкой.

        // До
div {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

// После
div {
  position: absolute;
  inset: 0;
}
    

Использовать краткий синтаксис полезно для уменьшения размера CSS-файла, и код так выглядит чище. Однако не забывайте, что inset – это логическое свойство, оно учитывает направление письма. То есть если на вашем сайте используется язык с направлением rtl, то лево окажется справа и наоборот.

3. Узнать скорость интернета

Вы можете легко определить скорость интернета пользователя из кода на JavaScript с помощью объекта navigator.

        navigator.connection.downlink;
    

Результат не очень 🙂 Скорость моего интернета всего 5,65 мб/сек.

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

4. Включить вибрацию на смартфоне

Да, так тоже можно. Метод vibrate() объекта window.navigator может включить режим вибрации на мобильном устройстве.

        window.navigator.vibrate(500);
    

Методу можно передать параметр – время вибрации в миллисекундах. А можно указать даже паттерн – чередование интервалов вибрации и пауз. Для этого передайте методу массив чисел.

5. Запретить pull-to-refresh

Pull-to-refresh (потяни для обновления) – это популярный паттерн мобильной разработки. Если он вам не нравится, просто запретите этот эффект с помощью CSS-свойства overscroll-behavior-y со значением contain.

        body {
 overscroll-behavior-y: contain;
}
    

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

6. Запретить вставлять текст

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

        <input type="text"></input>
<script>
  const input = document.querySelector('input');
 
  input.addEventListener("paste", function(e){
    e.preventDefault()
  })
  
</script>
    

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

***

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

15
Июл
2021

CRM Hack

Компания Т1 Консалтинг проводит свой хакатон CRM Hack, чтобы найти решения для CRM нового поколения, которой будут пользоваться крупнейшие корпорации.
— Читать дальше «CRM Hack»

14
Июл
2021

различие между for и while в js

Недавно проходил собеседование на Fronted разраба, спросили разницу между for и while, не смог ответить. Если можно сделать все, то что делается на while, можно сделать на for и даже больше. Так в чем разница?

14
Июл
2021

проект на vuejs

я начинающий во фронтенде, попал недавно в школу от IT комании, где нам дали проект.
Нас в команде трое(2 фронта и 1 бэк).
Так вот,я вообще не понимаю с чего начать,как сделать первые шаги,что обсудить с напарниками из команды,как вообще р…

13
Июл
2021

Обучение фронтенду с оплатой после трудоустройства

Изучите всё, необходимое фронтенд-разработчику: HTML, CSS, JS, а также React в связке с Redux. Ничего платить не придётся, пока не найдёте работу в Москве.
— Читать дальше «Обучение фронтенду с оплатой после трудоустройства»

13
Июл
2021

Митап «Common anti-patterns in JS apps»

Эксперт по бэкенд- и фронтенд-разработке поговорит о типичных проблемах на бэкенде с Node.js, о фронтенде с React/Redux, ответит на вопросы и даст рекомендации.
— Читать дальше «Митап «Common anti-patterns in JS apps»»

07
Июл
2021

Прекратите изучать фреймворк, станьте JavaScript-разработчиком!

Всем привет, это Макс Кравец из Holyweb. Поговорим о том, почему фронтенд-разработчику важно учить JavaScript, а не фреймворк или библиотеку.
— Читать дальше «Прекратите изучать фреймворк, станьте JavaScript-разработчиком!»

05
Июл
2021

(OwlCarousel) Некорректный вид слайдера

Вот так выглядит сайдбар с категориями:

Хочу сделать так, как изображено здесь, на сайте unsplash.com, то есть придать способность пролистывать:

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

05
Июл
2021

Функция increaseSalary с помощью Promise

Написать функцию increaseSalary, которая:
1)Получает данные по всем работникам
2)Находит работника с наименьшей зарплатой
3)Отправляет запрос на повышение зарплаты этому сотруднику на 20%
4)Если запрос прошел успешно – отправить сотруднику…

05
Июл
2021

Функция increaseSalary с помощью Promise

Написать функцию increaseSalary, которая:
1)Получает данные по всем работникам
2)Находит работника с наименьшей зарплатой
3)Отправляет запрос на повышение зарплаты этому сотруднику на 20%
4)Если запрос прошел успешно – отправить сотруднику…

04
Июл
2021

Среда разработки для фронтенда с графическим конструктором

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

30
Июн
2021

Конференция Podlodka Frontend Crew

2 недели онлайн-сессий, воркшопов, разборов кейсов и круглых столов по архитектуре фронтенда и разработке интерфейсов от ведущих разработчиков Авито, Aviasales, Feature Sliced Core Team, DRIVE2 и Effector.
— Читать дальше «Конференция Podlodka Frontend…

28
Июн
2021

Как в Glightbox js добавить триггер открытия галереи на кнопку

На сайте используется lightbox (всплывающее окно со слайдером) Glightbox js,оно открывается нажатием на картинку но нужно чтобы открывалось и на кнопку.
в readme говорится о триггерах, но непонятно как это использовать.
https://biati-digit…

28
Июн
2021

Нужно написать frontend для скрипта на Python

Введение
Здравствуйте.
Думаю стоит начать с того что я новичок в Python ну и соответственно в Pandas. А с фронтенд разработкой я вообще раньше никогда не сталкивался. Так уж случилось что мне нужно было написать небольшой скрипт для автома…

24
Июн
2021

Курс «JavaScript/Front-end. Stage 0»

На вводном вебинаре бесплатного курса «JavaScript/Front-end. Stage 0» расскажут про школу, процесс обучения и выдадут первое домашнее задание.
— Читать дальше «Курс «JavaScript/Front-end. Stage 0»»

24
Июн
2021

iPod.js — веб-версия легендарного плеера с авторизацией через Spotify и Apple Music

Как вишенка на торте — работающий Click Wheel.
— Читать дальше «iPod.js — веб-версия легендарного плеера с авторизацией через Spotify и Apple Music»

24
Июн
2021

Переопределение дефолтного template во vuetify v-data-table

Необходимо заменить дефолтное отображение в компоненте v-data-table.
В template можно передать шаблон для конкретного столбца, но этих столбов 11. Такой код неудобно читаем и, при изменении дизайна, нужно менять в 11 местах.
Код, который и…