Latest posts
HTML Academy
18 Sept, 09:47
forwarded from @cssbol
CSS shape() — фича больших надеждCSS начал вырастать из коротких штанишек квадратного веба. Швы конкретно затрещали, когда хром зарелизил свойство border-shape, ядро которого — CSS-функция shape().shape() была не особо популярной, про неё вспоминали, когда нужно было что-то обрезать. Но и тут можно было повыбирать: маски или clip-path, а можно ли использовать какой-нибудь генератор?Но давайте посмотрим на текущий потенциал фичи: — сложные формы контейнеров (с нормальной отрисовкой рамок), — траектории движения для анимаций, — просто обрезки, — комбинирование с другими фичами (например с anchor-positioning).Короче, с фичей пора знакомиться, можно начать с мини-игры по CSS shape(). Цель — пройти уровень идеально.P.S.: куда поместить навык работы с shape() в системе грейдов?Я думаю, что на текущем этапе даже базовое владение shape() — это удел синьоров, потому что синьор — это
HTML Academy
17 Sept, 06:09
17 сентября в 12:00 (MSK) — прямой эфир с руководителем студии OKTTA. Студия сама делает дизайн и разработку цифровых продуктов: корпоративных сайтов, интернет-магазинов, мобильных приложений. Пока все спорят, забрали ли нейросети стартовые задачи у джунов
HTML Academy
16 Sept, 12:40edited
Завтра спросим у работодателя, что джун должен уметь без нейросетиЭфир с руководителем студии OKTTA — завтра в 12:00 (MSK). Что спросим:— Что джун должен уметь сам, без нейросети? — Как работодатель понимает, сам ли кандидат сделал тестовое? — Что студия делает с кодом от нейросети, который приносит заказчик? — Каково новичку в команде, где все работают удалённо?Курс «Разработка с AI-агентами: инженерный подход» уже входит в программу отдельным модулем. На нём вы ставите агенту задачу с границами и критериями приёмки, сами тестируете его код и доводите изменения через ревью до релиза. Почему сами? Отвечать за результат всё равно вам, и курс учит видеть, где заканчивается зона агента.Ну и регистрируйтесь сегодня: бесплатное место на программе разыграем среди первых 100 зарегистрировавшихся, итоги подведём в конце эфира.https://htmlacademy.ru/events/live-oktta
HTML Academy
15 Sept, 12:34
17 сентября в 12:00 (MSK) — прямой эфир с руководителем студии OKTTA. Студия сама делает дизайн и разработку цифровых продуктов: корпоративных сайтов, интернет-магазинов, мобильных приложений.Пока все спорят, забрали ли нейросети стартовые задачи у джунов, спросим у работодателя напрямую:— Какого джуна студия готова взять в команду? — Что нейросеть пока не может сверстать по макету? — Почему бы не нанять верстальщика через обычные отклики?Ответы — в эфире. А среди первых 100 зарегистрировавшихся разыграем бесплатное место на программе, победителя назовём в конце.Регистрируйтесь — за час до начала пришлём напоминание.https://htmlacademy.ru/events/live-oktta
HTML Academy
11 Sept, 12:51
forwarded from @cssbol
CSS Anchor PositioningБывают такие фичи, до которых долго доходят руки. Но чуть познакомишься — понимаешь, что фича — бомба. Якорное позиционирование — бомба, прям петарда чёрный корсар из детства.Заякорённые элементы это как бы абсолютно позиционированные, но с суперспособностями.Например, их можно привязывать не только к элементу в цепочке родителей, но к элементам вне родителя. И ещё куча других фич.Короче, не затягивайте с тем, чтобы поиграться с Anchor Positioning, тем более мы сделали красивую мини игру про эту фичу (первую из множества).
HTML Academy
1 Sept, 15:51edited
Штош, вот и подходит к концу 1 сентября и начинается учебный год. А ваше «когда-нибудь разберусь с программированием» переедет на следующий учебный год.На htmlacademy.ru снова работает «Колесо фортуны», вход через коробку с подарком. Что выпадет, то ваше: персональная скидка на обучение и повод начать учиться в один день со школьниками.
HTML Academy
14 Aug, 11:52
forwarded from @cssbol
Треугольники на CSSНедавно вышла статья, в которой автор открыл для себя треугольники на конических градиентах. Идея простая: помещаем центр градиента в угол и используем резкий переход цветов.Способ гибкий и удобный: не нужен дополнительный элемент, можно сделать сразу несколько треугольников и независимо управлять их параметрами с помощью многослойных фонов.Cхема решения такая:conic-gradient( from 335deg at bottom right, transparent 0 25deg, red 25deg );"Наклон" треугольника задаём позицией цвета, помещаем центр градиента в нужный угол контейнера и подбираем подходящий стартовый угол.Этот полезный приём можно сразу закрепить в небольшом игровом уровне по CSS-градиентам: 5 минут практики, чтобы поиграть с параметрами и набить руку.
HTML Academy
31 Jul, 09:14
forwarded from @cssbol
Флексы или флоатыДля опытных разработчиков этот вопрос даже не встаёт. Выбор в пользу флоатов очевиден.Но для фронтендеров-неофитов последних двух поколений были придуманы флексы. Этакое простое введение в системы раскладок (в общем-то такая же эрзац-система-раскладки, как и гриды). Главная цель флексов — не отпугнуть новичка на пути к вершине мастерства (флоатам). Так что не удивляйтесь их достаточно слабым возможностям.Свои первые робкие шаги во флексах можно сделать в нашей красивой псевдо-три-дэ игре
HTML Academy
24 Jul, 12:34
forwarded from @cssbol
Мифические измерения гридов"Флексы одномерные, а гриды двумерные" (ага, а трансформации трёхмерные).Никогда не понимал, что это значит. Признайтесь, у кого так же?Я расшифровываю это так: в гридах есть явная двумерная адресация для элементов, а во флексах — нет. Грид-элементу можно сказать: "живи в 4 колонке 3 ряда". И он будет там жить, даже если в грид-контейнере он один-одинёшенек.Двумерная адресация — это хорошо. Но настоящая жемчужина (без иронии) гридов — именованные области и адресация по имени: grid-template-areas + grid-area.Поиграться с именованными областями можно в новом уровне грид-лего
HTML Academy
23 Jul, 05:08
Код, с которого начинают во фронтенде, всё чаще пишет ИИ. Зачем Андагар растит своих джунов с нуля? 23 июля в 12:00 (MSK) спросим об этом у самой компании в прямом эфире. Андагар 10 лет делает цифровые продукты и высоконагруженные платформы для крупного бизнеса:
HTML Academy
22 Jul, 10:23edited
Код, с которого начинают во фронтенде, всё чаще пишет ИИ. Зачем Андагар растит своих джунов с нуля?23 июля в 12:00 (MSK) спросим об этом у самой компании в прямом эфире. Андагар 10 лет делает цифровые продукты и высоконагруженные платформы для крупного бизнеса: энергетика, банки, ритейл, фарма, логистика. TAdviser включил компанию сразу в три раздела карты цифровизации промышленности.Спросим напрямую:– Как выглядят боевые задачи фронтенда, когда за интерфейсом энергетика, банк или аптечная сеть? – Кто в загруженной команде ведёт новичка первые недели, пока он вникает в проект? – Как в потоке автооткликов, сгенерированных нейросетью, разглядеть живого джуна?Ещё одно, важное для новичков. Умение работать с AI-агентами сегодня спрашивают на всех грейдах, не только у сеньоров. Поэтому в программу с Андагаром сразу включили полноценный обновлённый курс «Разработка с AI-агентами:
HTML Academy
21 Jul, 11:03
🆕 Мы пересобрали курс «Фронтенд на автопилоте: AI-агенты на практике». От старой версии почти ничего не осталось, и название стало честнее: «Разработка с AI-агентами: инженерный подход».За новым названием стоит главный сдвиг на рынке: производство кода дешевеет. Агент выдаёт его за минуты. Дорого теперь другое. Точно поставить задачу и дать агенту контекст, продумать архитектуру, проверить за ним каждый шаг и собрать надёжные интеграции. А отвечать за то, что ушло в продакшен, приходится вам.Это отдельная инженерная дисциплина. Большинство пока ведёт её на глаз. На зелёные тесты полагаться рано: агент подгоняет их под то, как уже ведёт себя код. Дефект по-прежнему нужно доводить до первопричины, а она почти никогда не совпадает с первым, что бросается в глаза.А инструменты постоянно сменяют друг друга. Сегодня в руках Claude Opus 4.8, GPT-5.6 Sol,
HTML Academy
20 Jul, 17:06
forwarded from @cssbol
Лего-гридыГриды бесят. Это самый сложный и муторный механизм раскладки, в котором есть дополнительная (по сравнению с флексами) виртуальная сущность — шаблоны.Флексы намного проще и намного популярнее. Но, к сожалению, владеть нужно и гридам — слишком уж мощная технология.И если разбираться с гридами неспеша, с помощью красивых кубиков лего, то они почти не бесят.Играть в новый уровень про гриды
HTML Academy
12 Jul, 05:45
forwarded from @frontmiddle
Сегодня скидка закрывается вместе с выходными. 60% на курс «Протоколы и сети: основы» по промокоду NET60 — до конца дня.Понимание сетевых протоколов — один из навыков, которых не хватает мидл-фронтендерам: так показывает наша карта компетенций. Если откладывали курс — сегодня последняя возможность взять его со скидкой.🔒 Записаться на курс
HTML Academy
10 Jul, 12:28
forwarded from @frontmiddle
Большинство фронтендеров работают с сетью каждый день, но редко глубже, чем «отправил запрос — получил ответ». Почему ответ медленный, почему рвётся соединение, почему одни данные шифруются, а другие идут открытым текстом — это уже за пределами fetch().За четыре раздела курса «Протоколы и сети: основы» вы разбираете путь данных — от нижних уровней сети до прикладных протоколов. В основе — модель OSI и стек TCP/IP. Дальше TLS: шифрование и аутентификация по сертификатам. На практике сравниваете HTTP/1.1, HTTP/2 и HTTP/3 и разбираетесь, когда нужны WebSockets, а когда нет. Две задачи решаете руками: предварительное открытие TCP-соединений и оптимизация проекта под HTTP/2. Плюс четыре кейса с эталонными решениями.«Самостоятельно всё это изучать можно, но информации в интернете много, она разрозненная, местами противоречивая. А здесь — конкретные выжимки с объяснениями. Направляют куда
HTML Academy
10 Jul, 08:13
forwarded from @cssbol
Продолжение мини-игры по CSS-фильтрамМеняйте код, подбирая комбинации карточек, чтобы повторить образец. Чем меньше ходов — тем вы круче!Можно играть даже на мобильном.👉🏻 Играть здесь
HTML Academy
9 Jul, 09:59
Карусели, ленты сторис, постраничные слайдеры раньше означали JavaScript: обработчики касаний, подсчёт смещений, ручная докрутка. CSS Scroll Snap делает «прилипание» к слайдам силами самого браузера — двумя свойствами и без единой строки скрипта.Работает во всех современных браузерах, а в старых лента листается как обычно. В статье — что это за свойства, пара приёмов для тонкой настройки и живая лента, которую можно поскроллить прямо на странице. #css #baseline🎲 Читать статью
HTML Academy
8 Jul, 09:45
HTML Academy
8 Jul, 06:04
Тёмная тема обычно удваивает CSS: пишете цвета для светлой, потом те же — для тёмной в @media. Функция light-dark() схлопывает это в одну строку: оба значения в одном объявлении, а браузер выбирает нужное по системной теме.Уже работает во всех актуальных браузерах, а для старых достаточно обычного запасного цвета. В статье — как подключить (есть обязательный color-scheme, иначе не сработает) и чем функция выручает дизайн-системы. #css #baseline💡 Читать статью
HTML Academy
7 Jul, 10:01
Есть вечная история в диджитале: компаниям нужны хорошие специалисты, начинающим специалистам нужна первая нормальная работа, а между ними стоит большой и не всегда дружелюбный мост под названием «опыт работы».Так начинается заметка веб-студии MediaMint — одного из работодателей нашей совместной программы для фронтендеров. Про обучение обычно рассказываем мы, а тут — взгляд со стороны компании, которая потом нанимает выпускников.Максим Заруцкий, CEO студии, рассказывает, зачем работодателю видеть студента ещё на этапе обучения и каких джунов в MediaMint реально ждут в команде. Прочитать стоит и студентам, и тем, кто нанимает.🎁 Читать заметку MediaMint
Related Channels
Other channels in the same section of the catalogue.
