Фронтенд-новости за последнюю неделю 9–15 мая уже на Хабре. В этом выпуске: интернет сломан, бесплатный VPN в Edge, State of CSS 2022.

🏃Типы данных в JavaScript. Инструкция для начинающих

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

В статье мы расскажем про примитивные, встроенные и собственные структуры данных.

«Неожиданная» скидка 60% на навыки, дерево навыков и проекты 17–18 мая.

Выбрать можно здесь

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

Если хотя бы один из этих пунктов про вас, тогда приглашаем на лайв, который пройдёт уже завтра в 16:00.

О старте карьеры в IT расскажут опытные программисты:
Лёша Симоненко — директор по развитию HTML Academy.
Игорь Антонов — автор профессиональных курсов по JavaScript в HTML Academy.

Запишитесь на лайв, чтобы получить:

— Ответы на вопросы от спикеров.
— Скидки на курсы для всех участников.
— Полезные материалы по теме веб-разработки.

🦾Полезные плагины JavaScript в VS Code

Большую часть времени разработчик творит код в редакторе. Редактор кода Visual Studio Code сам по себе помогает работать быстрее. Например, он подчёркивает ошибки красным цветом и выдаёт подсказки. Но процесс можно сделать ещё приятнее: достаточно установить нужное расширение.

В статье мы расскажем про самые популярные плагины, которые пригодятся при работе с JavaScript

🌚Зачем нужны навыки, если есть тренажёры и курсы

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

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

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

Каждый навык — это что-то конкретное: например, «Создание семантической разметки по макету» — это навык, а вот «Особенности HTML и CSS» — не навык, а просто технологии. В навыке вы по единой схеме проходите путь от теории до умения выполнять конкретную задачу фронтендера. Эта схема тоже, как и тренажёры, включает теорию, практику и «экзамен»:

1. Теория, которая дополняет тренажёры, рассматривает вопрос со всех сторон, соотносится с практикой (например, чем кнопки отличаются от ссылок и в каких случая лучше использовать то или другое).
2. Тщательно разобранные примеры применения конкретных технологий «в действии»: вёрстка отдельных элементов и крупных сеток, программирование, алгоритмы для работы с графическим редактором (например, в какой последовательности и как нужно работать с Figma-макетом, чтобы добыть оттуда все необходимые для вёрстки параметры).
3. Демонстрации, в которых пошагово показывается вся вёрстка или программа в рамках навыка с комментариями и объяснениями.
4. Несколько кейсов для того, чтобы сделать всё самостоятельно по образцам.
5. Проверки для тренировочных кейсов, чтобы оценить своё решение и самостоятельно исправить ошибки, если они будут.
6. Эталонные решения, которые вы получите для сверки своего решения с эталонным.

Кстати, сегодня ещё действует скидка 60% на навыки, дерево навыков и проекты. Распродажа здесь

Через 15 минут начнется лайв «Фронтенд, реакт, фулстек: как выбрать направление веб-разработки».

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

Успейте записаться

🙀Стоит ли делать слайдеры на CSS?

Что такое слайдеры:

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

Как бывает:

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

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

Совет:

НИКОГДА не делайте слайдеры на реальных проектах с помощью CSS. Да, вы это можете сделать, но посмотрите, как много минусов вы получите, попросту говоря, выстрелите себе в колено.

— Чтобы добавить новый слайд, нужно дописать ещё немного CSS-стилей. Каждое изменение количества слайдов влечёт за собой изменение стилей.

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

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

Из этого следует правило: пишите логику с помощью языка программирования, например, JavaScript. И это касается не только слайдеров, но и табов, попапов. Разделяйте ответственность правильно: HTML — контент, CSS — стили, JavaScript — логика.

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

24 мая в 18:00 в прямом эфире ответим на все вопросы о старте карьеры в IT и дадим советы по поиску работы и прохождению собеседований.

Спикеры:

— Серёжа Попов — руководитель фронтенд-аутсорса «Лига А.».
— Венера Мещерова — IT HR, дипломированный психолог, лид модераторов и куратор и соавтор курсов «PSYvIT».

О нашем партнёре:

PSYvIT — партнёры HTML Академии. Команда психологов с IT-бэкграундом, которые создают обучающие программы для повышения психологической грамотности и soft skills.

Записаться

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

Пишите в комментариях, как прошла ваша рабочая неделя🤗

Вместе с проектом «Не перепутай!» объясняем сложные термины простыми словами, остальные карточки ищите у ребят в канале

В феврале у нас проходил день открытых дверей с основателями HTML Academy. Смотрели интервью, как вам?

Если не смотрели — советуем. Саша Першин рассказывает все секреты создания тренажёров и учебной программы курсов.

На лайве обсудили:

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

Смотреть здесь