Фронтендеру, который хочет стать мидлом, нужно уметь работать с данными и выстраивать архитектуру.
Рассмотрим, что нужно знать тем, кто пишет или собирается писать бизнес-логику. А ещё посоветуем, что можно почитать.
Рассмотрим, что нужно знать тем, кто пишет или собирается писать бизнес-логику. А ещё посоветуем, что можно почитать.
👍29🔥5
Forwarded from Доктайп
Фронтенд-новости 45. Дайджест новостей и полезных статей о фронтенде.
🔥 Самое важное
▶️ Может ли ChatGPT писать хороший CSS? Автор видео считает, что да.
Основные команды для работы с Git. Обновили важную инструкцию для всех, кто терпеть не может
💫 Что нового
Safari 16.4 beta
Node.js v19.7.0: npm v9.5.0 и новый анализатор URL-адресов, совместимый с Ada WHATWG
🧬 HTML и CSS
Новое выравнивание по базовой линии с помощью
Фокусные точки и соотношение сторон - интересный способ обрезки изображений с учётом их фокуса.
Вращающаяся галерея с анимацией на основе CSS-прокрутки.
Доступное использование текстовых символов в псевдоэлементах.
А так ли нам нужно обнаружение переноса строки в флексах? Кажется, что очень пригодилось бы.
Пошаговое руководство по созданию доступных каруселей.
(255 255 255) — это наивысшая специфичность. Исследование того, как движки браузеров хранят специфичность и каковы ее ограничения, если таковые имеются. С этим вы вряд ли стокнётесь в реальной работе, но почитать интересно.
Как найти проблемы в CSS с помощью DevTools.
Как работать с выражениями от стилей контейнера.
Типы инпутов. Просто типы инпутов.
🏝️ JavaScript
MutationObserver для обработки узлов DOM, которых ещё не существует.
React-библиотеки на 2023.
Как предотвратить проблемы при использовании асинхронных диспетчеров состояний в React и избежать нарушения UI, анимации и повреждения UX.
Создание простого инструмента командной строки с помощью современного Node.js. Начинаем с нуля, без шаблонов.
Подпишитесь на @html_blog, чтобы не пропустить следующие выпуски.
🔥 Самое важное
▶️ Может ли ChatGPT писать хороший CSS? Автор видео считает, что да.
Основные команды для работы с Git. Обновили важную инструкцию для всех, кто терпеть не может
index_release_копия(2)_3_final.html. 💫 Что нового
Safari 16.4 beta
Node.js v19.7.0: npm v9.5.0 и новый анализатор URL-адресов, совместимый с Ada WHATWG
🧬 HTML и CSS
Новое выравнивание по базовой линии с помощью
first и last.Фокусные точки и соотношение сторон - интересный способ обрезки изображений с учётом их фокуса.
Вращающаяся галерея с анимацией на основе CSS-прокрутки.
Доступное использование текстовых символов в псевдоэлементах.
А так ли нам нужно обнаружение переноса строки в флексах? Кажется, что очень пригодилось бы.
Пошаговое руководство по созданию доступных каруселей.
(255 255 255) — это наивысшая специфичность. Исследование того, как движки браузеров хранят специфичность и каковы ее ограничения, если таковые имеются. С этим вы вряд ли стокнётесь в реальной работе, но почитать интересно.
Как найти проблемы в CSS с помощью DevTools.
Как работать с выражениями от стилей контейнера.
Типы инпутов. Просто типы инпутов.
🏝️ JavaScript
MutationObserver для обработки узлов DOM, которых ещё не существует.
React-библиотеки на 2023.
Как предотвратить проблемы при использовании асинхронных диспетчеров состояний в React и избежать нарушения UI, анимации и повреждения UX.
Создание простого инструмента командной строки с помощью современного Node.js. Начинаем с нуля, без шаблонов.
Подпишитесь на @html_blog, чтобы не пропустить следующие выпуски.
👍15
Если вы планируете создавать Single Page Applications — одностраничные приложения — вам нужно изучить Vue, React или Angular.
Vue создан бывшим инженером Google — Эваном Ю. Фреймворк поддерживается сообществом, имеет 197 000 звёзд и 32 300 форков.
Этот фреймворк встречается в четверти вакансий для разработчиков с опытом 1–3 года и в 15% вакансий — с опытом от трёх лет.
Для тех, кто решит изучать Vue самостоятельно, подготовили план обучения. Если вам удобнее сразу получить доступ к отобранным материалам, демонстрационным кейсам и готовым проектам для практики, записывайтесь на курс. До 5 марта действует скидка 30%.
#htmlacademy_обучение
Vue создан бывшим инженером Google — Эваном Ю. Фреймворк поддерживается сообществом, имеет 197 000 звёзд и 32 300 форков.
Этот фреймворк встречается в четверти вакансий для разработчиков с опытом 1–3 года и в 15% вакансий — с опытом от трёх лет.
Для тех, кто решит изучать Vue самостоятельно, подготовили план обучения. Если вам удобнее сразу получить доступ к отобранным материалам, демонстрационным кейсам и готовым проектам для практики, записывайтесь на курс. До 5 марта действует скидка 30%.
#htmlacademy_обучение
👍11🔥5
⚡️ Если вы планировали изучить JavaScript, сейчас подходящее время, чтобы записаться на обучение.
Мы открыли запись на следующие потоки профессий «JavaScript-разработчик», «Фулстек-разработчик» и на курс «JavaScript. Профессиональная разработка веб-интерфейсов».
Это значит, что сейчас действует минимальная цена. Каждые две недели стоимость будет увеличиваться пока не дорастёт до максимальной.
Те, кто запишутся раньше, не только сэкономят, но и смогут больше времени уделить подготовке к основному обучению — а это сильно увеличивает шансы на успешное прохождение курса.
Изучить программу подробнее и записаться:
Профессия «JavaScript-разработчик», стоимость сейчас 129 000₽, максимальная 179 000₽.
Профессия «Фулстек-разработчик», стоимость сейчас 169 000₽, максимальная 219 000₽.
Курс «JavaScript. Профессиональная разработка веб-интерфейсов», стоимость сейчас 24 900₽, максимальная 30 900₽.
#htmlacademy_обучение
Мы открыли запись на следующие потоки профессий «JavaScript-разработчик», «Фулстек-разработчик» и на курс «JavaScript. Профессиональная разработка веб-интерфейсов».
Это значит, что сейчас действует минимальная цена. Каждые две недели стоимость будет увеличиваться пока не дорастёт до максимальной.
Те, кто запишутся раньше, не только сэкономят, но и смогут больше времени уделить подготовке к основному обучению — а это сильно увеличивает шансы на успешное прохождение курса.
Изучить программу подробнее и записаться:
Профессия «JavaScript-разработчик», стоимость сейчас 129 000₽, максимальная 179 000₽.
Профессия «Фулстек-разработчик», стоимость сейчас 169 000₽, максимальная 219 000₽.
Курс «JavaScript. Профессиональная разработка веб-интерфейсов», стоимость сейчас 24 900₽, максимальная 30 900₽.
#htmlacademy_обучение
Forwarded from Доктайп
Фронтенд-новости 46. Дайджест новостей и полезных статей о фронтенде с 27 февраля по 5 марта.
🔥 Самое важное
W3C делают новый сайт и приглашают поучаствовать в его создании.
💫 Что нового
Safari Technology Preview 164 и Next.js 13.2
🧬 HTML и CSS
Руководство по проверке доступных форм — что нужно учитывать, чтобы никто не застрял на недоступном недействительном поле.
Руководство по CSS
Руководство по цветовым функциям CSS.
Узнайте от Рэйчел Эндрю, что было нового в феврале в веб-платформе:
- выражения от контейнера для размеров
-
-
-
- IFrame без учетных данных
- и многое другое.
Теория. Теперь можно запрашивать у контейнера не только размеры, но и стили, и даже кастомные свойства.
Практика. Как сделать тёмную тему с помощью выражений от стилей контейнера.
О выражения от контейнера, адаптивных изображениях и JPEG-XL.
Изменение размера с помощью CSS-свойства
Заголовки составных таблиц плохо поддерживаются средствами чтения с экрана — избегайте их (ну, в смысле, составных таблиц :)
Шесть распространенных ошибок SVG (и как их исправить)
Используйте позиционирование к якорю для расположения элементов рядом с другим
Проблема добавления пробела после псевдоэлемента
🏝️ JavaScript
▶️ Перезапуск процессов в Node.js / Новый параметр —watch. Разбираемся на практике с новым экспериментальным параметром для CLI ‘—watch’.
▶️ Как вызвать функцию в JavaScript / 5 способов. Разбираем вопрос с собеседований.
Миграция с Enzyme на React Testing Library.
«React держит меня в заложниках» — несколько преувеличенное название, но автор под псевдонимом считает, что пришло время: «Под защитой этого нового тренда в недовольстве React я хотел бы, наконец, высказать своё» и тратит много слов и примеров кода, выражая неудовольство, признавая, что React никуда не денется.
Создание анимации в React с помощью React Spring.
Sandworm Audit: новый инструмент аудита JS для сканирования проекта и зависимостей на наличие уязвимостей, проблем с лицензией и связанных с этим проблем.
Декомпозиция и интерфейс vue-компонентов.
🦭 Общее
Chrome долгое время считался ресурсоемким на современных компьютерах Mac, но последняя версия Chrome значительно улучшила ситуацию, говорят разработчики Chrome.
WebPush в iOS изменил мир? Получается, что да.
Разрабатываем браузерное расширение легким движением руки
Подпишитесь на @html_blog, чтобы не пропустить новые выпуски.
🔥 Самое важное
W3C делают новый сайт и приглашают поучаствовать в его создании.
💫 Что нового
Safari Technology Preview 164 и Next.js 13.2
🧬 HTML и CSS
Руководство по проверке доступных форм — что нужно учитывать, чтобы никто не застрял на недоступном недействительном поле.
Руководство по CSS
object-view-box.Руководство по цветовым функциям CSS.
Узнайте от Рэйчел Эндрю, что было нового в феврале в веб-платформе:
- выражения от контейнера для размеров
-
initial-letter — для работы с буквицей-
ReadableStream — в асинхронном формате-
AudioContext.setSinkId() — чтобы AudioContext мог направлять звук в нужное устройство- IFrame без учетных данных
- и многое другое.
Теория. Теперь можно запрашивать у контейнера не только размеры, но и стили, и даже кастомные свойства.
Практика. Как сделать тёмную тему с помощью выражений от стилей контейнера.
О выражения от контейнера, адаптивных изображениях и JPEG-XL.
Изменение размера с помощью CSS-свойства
resize, которое создает в документе область с изменяемым размером.font-display: swap решает проблему с FOIT, но не решает всех проблем. Всё-таки если шрифт, даже с font-display: swap, загрузился не сразу, то сначала отображается дефолтный шрифт, а потом он меняется на указанный в font-family. В этот момент происходит микро, а иногда и макро, смещение макета, которое негативно влияет на метрику CLS. С помощью size-adjust, ascent-override, descent-override`и `line-gap-override можно нивелировать смещение и улучшить метрику.Заголовки составных таблиц плохо поддерживаются средствами чтения с экрана — избегайте их (ну, в смысле, составных таблиц :)
Шесть распространенных ошибок SVG (и как их исправить)
Используйте позиционирование к якорю для расположения элементов рядом с другим
Проблема добавления пробела после псевдоэлемента
::marker.🏝️ JavaScript
▶️ Перезапуск процессов в Node.js / Новый параметр —watch. Разбираемся на практике с новым экспериментальным параметром для CLI ‘—watch’.
▶️ Как вызвать функцию в JavaScript / 5 способов. Разбираем вопрос с собеседований.
Миграция с Enzyme на React Testing Library.
«React держит меня в заложниках» — несколько преувеличенное название, но автор под псевдонимом считает, что пришло время: «Под защитой этого нового тренда в недовольстве React я хотел бы, наконец, высказать своё» и тратит много слов и примеров кода, выражая неудовольство, признавая, что React никуда не денется.
Создание анимации в React с помощью React Spring.
Sandworm Audit: новый инструмент аудита JS для сканирования проекта и зависимостей на наличие уязвимостей, проблем с лицензией и связанных с этим проблем.
Декомпозиция и интерфейс vue-компонентов.
🦭 Общее
Chrome долгое время считался ресурсоемким на современных компьютерах Mac, но последняя версия Chrome значительно улучшила ситуацию, говорят разработчики Chrome.
WebPush в iOS изменил мир? Получается, что да.
Разрабатываем браузерное расширение легким движением руки
Подпишитесь на @html_blog, чтобы не пропустить новые выпуски.
👍6
Всем привет, меня зовут Айгуль, я работаю смм в Академии.
Пользуясь своим служебным положением, я решила пройти профессию «Фронтенд-разработчик» и сменить профессию. Ближайший поток стартует в апреле, значит, у меня есть время в спокойном темпе пройти подготовительный раздел и подготовиться к обучению.
Если вам интересно посмотреть, что из этого выйдет, подписывайтесь на канал, будем учиться вместе.
Пользуясь своим служебным положением, я решила пройти профессию «Фронтенд-разработчик» и сменить профессию. Ближайший поток стартует в апреле, значит, у меня есть время в спокойном темпе пройти подготовительный раздел и подготовиться к обучению.
Если вам интересно посмотреть, что из этого выйдет, подписывайтесь на канал, будем учиться вместе.
👍10👎4🔥4❤1🐳1
Подборка статей по JavaScript для начинающих
Сели изучать JavaScript и хотите написать пару рабочих скриптов? В помощь публикуем подборку статей. Внутри найдёте инструкцию по типам данных, познакомитесь с React и TypeScript, узнаете про алгоритмы и посмотрите, как писать код правильно.
Зачем фронтендерам React, если есть JavaScript
TypeScript. Зачем он нужен и почему так популярен
Что такое и зачем нужны алгоритмы
Типы данных в JavaScript. Инструкция для начинающих
Кодгайд: почему, зачем и как
6 книг по JavaScript для начинающих
#htmlacademy_статьи
Сели изучать JavaScript и хотите написать пару рабочих скриптов? В помощь публикуем подборку статей. Внутри найдёте инструкцию по типам данных, познакомитесь с React и TypeScript, узнаете про алгоритмы и посмотрите, как писать код правильно.
Зачем фронтендерам React, если есть JavaScript
TypeScript. Зачем он нужен и почему так популярен
Что такое и зачем нужны алгоритмы
Типы данных в JavaScript. Инструкция для начинающих
Кодгайд: почему, зачем и как
6 книг по JavaScript для начинающих
#htmlacademy_статьи
👍10
Горячие клавиши позволяют выполнять действия в программе, не прибегая к её меню – это быстро и просто. Собрали комбинации, которые могут помочь верстальщику при работе с макетом.
#htmlacademy_полезное
#htmlacademy_полезное
👍18🔥4