Растянутая аватарка с овальным лицом на сайте — это
Свойство
👀 Читать статью
object-fit: fill по умолчанию и две минуты невнимательности.Свойство
object-fit : cover заполняет бокс и обрезает лишнее, пропорции не ломаются. contain вписывает изображение целиком, оставляя поля. fill растягивает без разбора — именно это и случается с аватарками по умолчанию. none показывает в оригинальных размерах, scale-down выбирает между contain и none автоматически. В статье разбираем каждое значение на примерах. #cssPlease open Telegram to view this post
VIEW IN TELEGRAM
🔥4❤🔥3⚡1
Git — инструмент, без которого не обходится ни один проект. Мы собрали бесплатный учебник по Git и GitHub — 11 глав от введения в системы контроля версий до решения типичных проблем.
Структура учебника выстроена так, чтобы двигаться последовательно: сначала базовые понятия и команды
Последняя глава — перевод «First Aid Git»: что делать, если случайно удалили ветку, отправили не тот коммит или запутались в слиянии.
Учебник бесплатный, читать можно в любом порядке. #git #github
⭐ Читать статью
Структура учебника выстроена так, чтобы двигаться последовательно: сначала базовые понятия и команды
clone, pull, push, add, commit, потом регистрация на GitHub, работа в VS Code, GitHub Desktop и консоли, следом — бесплатный хостинг на GitHub Pages и разбор ситуаций, когда что-то пошло не так.Последняя глава — перевод «First Aid Git»: что делать, если случайно удалили ветку, отправили не тот коммит или запутались в слиянии.
Учебник бесплатный, читать можно в любом порядке. #git #github
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5❤🔥4🔥2
Каждый раз вручную сжимать изображения, минифицировать CSS и собирать спрайт — это звучит как рабочий процесс только до тех пор, пока файлов немного. Когда проект вырастает, рутина начинает занимать заметную часть времени.
Автоматизация передаёт эти задачи компьютеру. Минификация HTML, CSS и JavaScript, сжатие изображений, генерация WebP, сборка
Основа цепочки — Node.js и npm. Npm устанавливает нужные пакеты из внешних библиотек и запускает задачи через консоль. Список зависимостей хранится в
В статье разбор каждого звена цепочки с примерами
☝️ Читать статью
Автоматизация передаёт эти задачи компьютеру. Минификация HTML, CSS и JavaScript, сжатие изображений, генерация WebP, сборка
sprite.svg — всё это делается один раз в конфигурации, а дальше запускается одной командой.Основа цепочки — Node.js и npm. Npm устанавливает нужные пакеты из внешних библиотек и запускает задачи через консоль. Список зависимостей хранится в
package.json: достаточно положить файл в папку проекта и выполнить npm install — все инструменты скачаются автоматически. Сами задачи прописываются в gulpfile.js, который Gulp выполняет по команде.В статье разбор каждого звена цепочки с примерами
package.json и объяснением, что такое зависимости и зависимости для разработчиков. #npmPlease open Telegram to view this post
VIEW IN TELEGRAM
❤5👍3❤🔥2 2
Forwarded from Как стать мидлом
32% вакансий фронтендера в продуктовых компаниях требуют Vue.js. Это второй по популярности фреймворк после React — и при этом один из самых приятных в работе: компонентный подход понятен, Composition API читается как обычный JavaScript.
Разобраться по документации можно, но долго. В курсе «Vue.js 3. Разработка клиентских приложений» — восемь разделов с теорией, разбором кейсов и практикой на двух реальных проектах. Отдельные разделы по Pinia, маршрутизатору, работе с сервером, анимациям переходов и тестированию через Vitest и Vue Test Utils. Гибкие сроки — начать можно прямо сейчас.
В выходные, 4 и 5 июля — скидка 60% по промокодуVUE60 . #htmlacademy #levelup
💎 Программа и детали
Разобраться по документации можно, но долго. В курсе «Vue.js 3. Разработка клиентских приложений» — восемь разделов с теорией, разбором кейсов и практикой на двух реальных проектах. Отдельные разделы по Pinia, маршрутизатору, работе с сервером, анимациям переходов и тестированию через Vitest и Vue Test Utils. Гибкие сроки — начать можно прямо сейчас.
В выходные, 4 и 5 июля — скидка 60% по промокоду
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡2❤1❤🔥1🔥1 1
Forwarded from CSS Боль
Мини-игра по CSS-фильтрам
Нужно менять код, подбирая комбинации карточек, чтобы повторить образец. Чем меньше ходов — тем лучше.
Можно играть даже на мобильном.
Играть здесь
Нужно менять код, подбирая комбинации карточек, чтобы повторить образец. Чем меньше ходов — тем лучше.
Можно играть даже на мобильном.
Играть здесь
👍5👏3 3
HTML Academy
Накануне эфира Максим из Maxis попросил нейросетку сделать iframe-приложение для Битрикс24. Она сделала — и выложила весь бэкенд в открытый интернет. Без авторизации, без проверки портала. Будущие конфиденциальные данные — по URL, заходи, забирай. Максим…
Media is too big
VIEW IN TELEGRAM
Что случилось с рынком найма в 2026 году?
Максим Самарцев, директор Maxis, — про три волны, с которыми работодателю приходится сталкиваться на рынке найма. Объяснение в клипе из эфира.
Запись эфира: смотреть на YouTube | смотреть в VK
👍 Программа обучения
Максим Самарцев, директор Maxis, — про три волны, с которыми работодателю приходится сталкиваться на рынке найма. Объяснение в клипе из эфира.
Запись эфира: смотреть на YouTube | смотреть в VK
Please open Telegram to view this post
VIEW IN TELEGRAM
Forwarded from Как стать мидлом
Сегодня последний день скидки 60% на курс «Vue.js 3. Разработка клиентских приложений».
Промокод VUE60 — до конца дня. Курс «Vue.js 3»: два проекта поверх готового API, Composition API, Pinia, Vitest.
🎁 Записаться на курс
Промокод VUE60 — до конца дня. Курс «Vue.js 3»: два проекта поверх готового API, Composition API, Pinia, Vitest.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤2❤🔥1🔥1
ChatGPT и Claude печатают ответ у вас на глазах — слово за словом. Это стриминг: сервер отдаёт данные по мере генерации, ещё до того как соберёт ответ целиком. И тот же приём доступен в браузере — через Streams API и обычный
Кроме ИИ-интерфейсов, так грузят большие файлы с прогрессом и разбирают CSV на лету, нативно и без библиотек. В статье показываем, как читать ответ по кускам через
👀 Читать статью
fetch.Кроме ИИ-интерфейсов, так грузят большие файлы с прогрессом и разбирают CSV на лету, нативно и без библиотек. В статье показываем, как читать ответ по кускам через
response.body, и даём интерактивный пример прямо на странице. #js #baselinePlease open Telegram to view this post
VIEW IN TELEGRAM
❤4🔥4❤🔥1👍1
Есть вечная история в диджитале: компаниям нужны хорошие специалисты, начинающим специалистам нужна первая нормальная работа, а между ними стоит большой и не всегда дружелюбный мост под названием «опыт работы».
Так начинается заметка веб-студии MediaMint — одного из работодателей нашей совместной программы для фронтендеров. Про обучение обычно рассказываем мы, а тут — взгляд со стороны компании, которая потом нанимает выпускников.
Максим Заруцкий, CEO студии, рассказывает, зачем работодателю видеть студента ещё на этапе обучения и каких джунов в MediaMint реально ждут в команде. Прочитать стоит и студентам, и тем, кто нанимает.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥3
Тёмная тема обычно удваивает CSS: пишете цвета для светлой, потом те же — для тёмной в
Уже работает во всех актуальных браузерах, а для старых достаточно обычного запасного цвета. В статье — как подключить (есть обязательный
💡 Читать статью
@media. Функция light-dark() схлопывает это в одну строку: оба значения в одном объявлении, а браузер выбирает нужное по системной теме.Уже работает во всех актуальных браузерах, а для старых достаточно обычного запасного цвета. В статье — как подключить (есть обязательный
color-scheme, иначе не сработает) и чем функция выручает дизайн-системы. #css #baselinePlease open Telegram to view this post
VIEW IN TELEGRAM
🔥8
👍4❤🔥2
Карусели, ленты сторис, постраничные слайдеры раньше означали JavaScript: обработчики касаний, подсчёт смещений, ручная докрутка. CSS Scroll Snap делает «прилипание» к слайдам силами самого браузера — двумя свойствами и без единой строки скрипта.
Работает во всех современных браузерах, а в старых лента листается как обычно. В статье — что это за свойства, пара приёмов для тонкой настройки и живая лента, которую можно поскроллить прямо на странице. #css #baseline
🎲 Читать статью
Работает во всех современных браузерах, а в старых лента листается как обычно. В статье — что это за свойства, пара приёмов для тонкой настройки и живая лента, которую можно поскроллить прямо на странице. #css #baseline
Please open Telegram to view this post
VIEW IN TELEGRAM
❤🔥4
Forwarded from CSS Боль
Продолжение мини-игры по CSS-фильтрам
Меняйте код, подбирая комбинации карточек, чтобы повторить образец. Чем меньше ходов — тем вы круче!
Можно играть даже на мобильном.
👉🏻 Играть здесь
Меняйте код, подбирая комбинации карточек, чтобы повторить образец. Чем меньше ходов — тем вы круче!
Можно играть даже на мобильном.
👉🏻 Играть здесь
❤4
Forwarded from Как стать мидлом
Большинство фронтендеров работают с сетью каждый день, но редко глубже, чем «отправил запрос — получил ответ». Почему ответ медленный, почему рвётся соединение, почему одни данные шифруются, а другие идут открытым текстом — это уже за пределами
За четыре раздела курса «Протоколы и сети: основы» вы разбираете путь данных — от нижних уровней сети до прикладных протоколов. В основе — модель OSI и стек TCP/IP. Дальше TLS: шифрование и аутентификация по сертификатам. На практике сравниваете HTTP/1.1, HTTP/2 и HTTP/3 и разбираетесь, когда нужны WebSockets, а когда нет. Две задачи решаете руками: предварительное открытие TCP-соединений и оптимизация проекта под HTTP/2. Плюс четыре кейса с эталонными решениями.
«Самостоятельно всё это изучать можно, но информации в интернете много, она разрозненная, местами противоречивая. А здесь — конкретные выжимки с объяснениями. Направляют куда нужно», — из отзыва студента. #htmlacademy #levelup
Скидка 60% — только в эти выходные, 11 и 12 июля. Разовая акция: два дня, один курс, промокодNET60 .
💣 Смотреть программу
fetch().За четыре раздела курса «Протоколы и сети: основы» вы разбираете путь данных — от нижних уровней сети до прикладных протоколов. В основе — модель OSI и стек TCP/IP. Дальше TLS: шифрование и аутентификация по сертификатам. На практике сравниваете HTTP/1.1, HTTP/2 и HTTP/3 и разбираетесь, когда нужны WebSockets, а когда нет. Две задачи решаете руками: предварительное открытие TCP-соединений и оптимизация проекта под HTTP/2. Плюс четыре кейса с эталонными решениями.
«Самостоятельно всё это изучать можно, но информации в интернете много, она разрозненная, местами противоречивая. А здесь — конкретные выжимки с объяснениями. Направляют куда нужно», — из отзыва студента. #htmlacademy #levelup
Скидка 60% — только в эти выходные, 11 и 12 июля. Разовая акция: два дня, один курс, промокод
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤2
Forwarded from Как стать мидлом
Сегодня скидка закрывается вместе с выходными. 60% на курс «Протоколы и сети: основы» по промокоду NET60 — до конца дня.
Понимание сетевых протоколов — один из навыков, которых не хватает мидл-фронтендерам: так показывает наша карта компетенций. Если откладывали курс — сегодня последняя возможность взять его со скидкой.
🔒 Записаться на курс
Понимание сетевых протоколов — один из навыков, которых не хватает мидл-фронтендерам: так показывает наша карта компетенций. Если откладывали курс — сегодня последняя возможность взять его со скидкой.
Please open Telegram to view this post
VIEW IN TELEGRAM