376. Safari, CSS-нестинг, DevTools, @property, бета TS 5.2, Navigation…
Веб-стандарты
00:02:02 Safari TP
00:05:51 Глубина CSS-нестинга
00:15:46 Chrome DevTools
00:25:19 @property в Firefox
00:27:29 Бета TypeScript 5.2
00:40:58 Navigation API
00:54:55 Реклама и Topics API
01:14:40 AI-ошибка MDN
01:27:48 Ответы на вопросы
#podcast
Please open Telegram to view this post
VIEW IN TELEGRAM
🗺️💼 Трудоустройство в России и за рубежом: в чем ключевые отличия
Давно мечтали устроиться на работу в иностранную IT-компанию и получать зарплату в долларах или евро? Давайте разберемся, как происходит отбор за рубежом и чем он отличается от трудоустройства в России.
🔗 Основной сайт
🔗 Зеркало
Давно мечтали устроиться на работу в иностранную IT-компанию и получать зарплату в долларах или евро? Давайте разберемся, как происходит отбор за рубежом и чем он отличается от трудоустройства в России.
🔗 Основной сайт
🔗 Зеркало
Библиотека программиста
🗺️💼 Трудоустройство в России и за рубежом: в чем ключевые отличия
Давно мечтали устроиться на работу в иностранную IT-компанию и получать зарплату в долларах или евро? Давайте разберемся, как происходит отбор за рубежом и чем он отличается от трудоустройства в России.
Мини-книга по эффективной разработке на TypeScript
Книга содержит исчерпывающий и краткий обзор возможностей TypeScript и охватывает все аспекты последней версии языка: от его мощной системы типов до расширенных функций.
Книга содержит исчерпывающий и краткий обзор возможностей TypeScript и охватывает все аспекты последней версии языка: от его мощной системы типов до расширенных функций.
GitHub
GitHub - gibbok/typescript-book: The Concise TypeScript Book: A Concise Guide to Effective Development in TypeScript. Free and…
The Concise TypeScript Book: A Concise Guide to Effective Development in TypeScript. Free and Open Source. - gibbok/typescript-book
11 лучших практик оформления HTML-форм на примере форм входа/регистрации: чек-лист от Андрея Ситника.
Читать
Читать
evilmartians.com
11 HTML best practices for login & sign-up forms—Martian Chronicles, Evil Martians’ team blog
Even popular sites fail to implement the 11 best practices mentioned in this article, and thus have at least one mistake. Use this checklist on your next pull request review that deals with any form.
⚛ 🤌The React Handbook — то, что вам нужно после чтения официальной документации.
Вот основные темы:
✔️Frameworks & Build Tools
✔️Project Standards for High-Quality Code
✔️Ecosystem
✔️Accessibility & Semantics
✔️Styling & UI Libraries
✔️Proficiency with the Hooks API
✔️State Management in React Applications
✔️React Performance & Optimization
Вот основные темы:
✔️Frameworks & Build Tools
✔️Project Standards for High-Quality Code
✔️Ecosystem
✔️Accessibility & Semantics
✔️Styling & UI Libraries
✔️Proficiency with the Hooks API
✔️State Management in React Applications
✔️React Performance & Optimization
reacthandbook.dev
React Handbook
Modern approaches to architecture and feature development for production-ready React apps.
«Стоимость» JavaScript в 2023 году: как и почему JavaScript является самым дорогим ресурсом, который сегодня использует ваш сайт, особенно на мобильных устройствах и десктопах.
📺 Смотреть
📺 Смотреть
YouTube
The Cost Of JavaScript - 2023
As we build sites that are more heavily reliant on JavaScript, we sometimes pay for what we send down in ways that we can’t always easily see. In this talk, Addy explains how and why JavaScript is the most expensive resource your site uses today—especially…
Над каким фронтенд-проектом вы сейчас работаете? Какой стек используете? Поделитесь в комментариях👇
#холивар
#холивар
20 самых захватывающих и впечатляющих возможностей CSS и UI, которые появились недавно или появятся в ближайшем будущем:
— запросы контейнера (container queries);
— запросы стиля (style queries);
— селектор :has();
— микросинтаксис nth-of;
— text-wrap: balance;
— initial-letter;
— динамические единицы измерения области просмотра (viewport);
— цветовые пространства с широкой гаммой;
— color-mix();
— вложенность селекторов (nesting);
— каскадные слои (cascade layers);
— стили с ограниченной областью видимости (scoped styles);
— тригонометрические функции;
— индивидуальные свойства трансформации;
— popover;
— позиционирование якоря (anchor positioning);
— selectmenu;
— дискретные свойства переходов;
— анимации, управляемые прокруткой (scroll-driven animations);
— переходы отображения (view transitions).
— запросы контейнера (container queries);
— запросы стиля (style queries);
— селектор :has();
— микросинтаксис nth-of;
— text-wrap: balance;
— initial-letter;
— динамические единицы измерения области просмотра (viewport);
— цветовые пространства с широкой гаммой;
— color-mix();
— вложенность селекторов (nesting);
— каскадные слои (cascade layers);
— стили с ограниченной областью видимости (scoped styles);
— тригонометрические функции;
— индивидуальные свойства трансформации;
— popover;
— позиционирование якоря (anchor positioning);
— selectmenu;
— дискретные свойства переходов;
— анимации, управляемые прокруткой (scroll-driven animations);
— переходы отображения (view transitions).
Хабр
Новинки CSS и UI: I/O 2023
Последние несколько месяцев открыли золотую эру веб UI (User Interface — пользовательский интерфейс). Вот 20 самых захватывающих и впечатляющих возможностей, которые появились недавно или появятся в...
This media is not supported in your browser
VIEW IN TELEGRAM
Простой способ изменения цветовых форматов CSS с помощью Chrome Dev Tools.
#devtool #tip by Shripal Soni
#devtool #tip by Shripal Soni
🕸 Даркнет: вымысел киношников или реальная история?
Попробуем разобраться с понятием «даркнет» и поймем, существует ли темная путина на самом деле.
🔗 Основной сайт
🔗 Зеркало
Попробуем разобраться с понятием «даркнет» и поймем, существует ли темная путина на самом деле.
🔗 Основной сайт
🔗 Зеркало
Команда Тинькоф открыла исходные коды Maskito, а совсем недавно произошел релиз ее первой мажорной версии.
Maskito — коллекция библиотек, упрощающих маскирование текстовых полей, с удобным и гибким публичным API.
Подробнее
Maskito — коллекция библиотек, упрощающих маскирование текстовых полей, с удобным и гибким публичным API.
Подробнее
Хабр
Maskito – новая коллекция библиотек для маскирования текстовых полей
Рады поделиться: выложили нашу разработку Maskito в открытый доступ, и совсем недавно произошел релиз ее первой мажорной версии. Maskito — коллекция библиотек, упрощающих маскирование текстовых полей,...
Mozilla представила аналог онлайн-редактора CodePen для создания интерактивных примеров.
⏩ Попробовать
#news
⏩ Попробовать
#news
MDN Web Docs
Playground | MDN
The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.
Важно: правила площадки❗️
1️⃣ За спам, рекламу, ботоводство, скам — бан и удаление всех комментариев
2️⃣ За оскорбления группы/канала/админа/других участников, политические дебаты — первый раз удаление, второй раз — профилактический бан на неделю, третий раз — бан
3️⃣ За ссылки на нелегальные ресурсы — первый раз удаление, второй раз — бан
Напоминаем, что написать нам можно сюда: @proglibrary_feedback_bot
Пожалуйста, соблюдайте правила — мы со своей стороны тоже будем стараться максимально оперативно модерировать комментарии.
1️⃣ За спам, рекламу, ботоводство, скам — бан и удаление всех комментариев
2️⃣ За оскорбления группы/канала/админа/других участников, политические дебаты — первый раз удаление, второй раз — профилактический бан на неделю, третий раз — бан
3️⃣ За ссылки на нелегальные ресурсы — первый раз удаление, второй раз — бан
Напоминаем, что написать нам можно сюда: @proglibrary_feedback_bot
Пожалуйста, соблюдайте правила — мы со своей стороны тоже будем стараться максимально оперативно модерировать комментарии.
В 2020 году Стас Мельников, фронтенд-разработчик и UI/UX дизайнер, поделился довольно популярным списком любимых вопросов о CSS.
Спустя 3 года CSS изменился, и он решил дополнить список, добавив вопросы про гриды, пользовательские свойства (CSS-переменные), новые селекторы и свойства👇
Читать
Спустя 3 года CSS изменился, и он решил дополнить список, добавив вопросы про гриды, пользовательские свойства (CSS-переменные), новые селекторы и свойства👇
Читать
Хабр
Мои любимые вопросы о CSS с ответами
Я проходил множество интервью, и когда дело доходило до вопросов о CSS, то они сводились к: "Перечислите все известные способы центрирования элемента". После 5 ответов, откровенно, это...
💭Вдогонку к предыдущему посту с вопросами о CSS, накидайте в комментарии самые интересные, по вашему мнению, вопросы, которые вы когда-либо встречали на собесах.
Пишите не только про CSS, но и про другие фронтенд-темы👇
#холивар
Пишите не только про CSS, но и про другие фронтенд-темы👇
#холивар
Недавно команды React и Next.js представили Server Components, новый способ разработки веб-приложений, который со стандартным React-приложением совместим примерно никак.
Резонные вопросы: это такое же серьёзное изменение как и переход с Angular.js на Angular 2 и React сейчас проходит через ту же фазу, что и Angular.js когда-то?
Ответить на них постарался автор статьи. Подробности — под катом.
Резонные вопросы: это такое же серьёзное изменение как и переход с Angular.js на Angular 2 и React сейчас проходит через ту же фазу, что и Angular.js когда-то?
Ответить на них постарался автор статьи. Подробности — под катом.
nextjs.org
React Foundations
Learn the fundamental JavaScript and React concepts that'll help you get started with Next.js.
🤖Не Chat GPT единым: собрали для вас топ инструментов на основе ИИ для разработки (один из них — именно для веб) — сохраняйте и тестируйте⬇️
🔍Sketch2Code конвертирует рисунки от руки в HTML-прототипы
🔍Code Mentor оптимизирует и рефакторит код
🔍Copilot by GitHub помогает писать код и дополняет его своими предложениями
🔍ExplainDev обучает в процессе и помогает разобраться в коде
🔍GPT Engineer вообще может всю работу сделать за вас — нужно только сказать, что хотите написать
А чем пользуетесь вы? Пишите в комментариях, если в нашем списке чего-то не хватает 👇
#дайджест
🔍Sketch2Code конвертирует рисунки от руки в HTML-прототипы
🔍Code Mentor оптимизирует и рефакторит код
🔍Copilot by GitHub помогает писать код и дополняет его своими предложениями
🔍ExplainDev обучает в процессе и помогает разобраться в коде
🔍GPT Engineer вообще может всю работу сделать за вас — нужно только сказать, что хотите написать
А чем пользуетесь вы? Пишите в комментариях, если в нашем списке чего-то не хватает 👇
#дайджест
Сколько повышений в должности у вас было за последние три года на последнем/текущем месте работы? (смена работы не считается повышением)
Anonymous Poll
32%
0
17%
1
11%
2
12%
Более 2-х
5%
Я фрилансер, занимаюсь проектной работой
23%
Я не работаю, хочу посмотреть результаты
Использование видео вместо анимированного gif повышает производительность (посмотреть пример).
#perfomance #tip by Shripal Soni
#perfomance #tip by Shripal Soni
🔍Нашли удобный справочник с полезными инструментами для веб-разработки с генераторами разметки, тегами, цветовой палитрой с HEX-кодами и многим другим. Можно переключиться на CSS или JavaScript, а еще скачать страницу в виде PDF, чтобы держать перед глазами.
#инструмент
#инструмент