Русский
Русский
English
Статистика
Реклама

Ссылки

Дайджест свежих материалов из мира фронтенда за последнюю неделю 454 (8 14 февраля 2021)

15.02.2021 00:19:50 | Автор: admin
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.


Медиа|Веб-разработка|CSS|JavaScript|Браузеры|Занимательное


Медиа


podcast Подкаст Веб-стандарты 268. Npm 7, PCM, V8 v8.9, App History API, прагматичные книги, Docker: зачем, как и чьё это дело
podcast Новости 512 от CSSSR: Эра ES-модулей, релизы Node.js LTS, CSS transition, width & height, WebdriverIO 7, Rust Foundation
video HolyJS 2020 Moscow
video Отсобеседование #1: Открытое собеседование frontend разработчика (Middle)

Веб-разработка


habr Боль фронтов, или что нам нужно от дизайнеров
en Weekly Platform News: WebKit autofill, использование Cursor Pointer, задержка автоматического проигрывания видео
en 21 плохая фронтенд-привычка, от которых стоит отказаться в 2021 году
en Доступ к аппаратному обеспечению в вебе
en Разработка производительного пользовательского курсора
en Управление фокусом в shadowDOM
en Почему вы должны превратить свое приложение в PWA
en Отладка WebAssembly с помощью Chrome DevTools
en Простая анимация линий при наведения курсора для ссылок
video Frontend SOLID || Архитектура во Фронтенде




CSS


habr В ожидании aspect-ratio: все хаки для пропорциональных боксов
habr Пришло время попрощаться с единицей измерения px
7 основных понятий CSS Grid Layout с примерами, которые помогут начать работу с гридами
en Обмен данными между CSS и JavaScript с использованием кастомных свойств
en Интерактивное руководство по CSS Transitions
en SmolCSS небольшой набор сниппетов для современных CSS лейаутов и компонентов
en Управление Z-индексом CSS в крупных проектах
en Prefers-contrast: forced это ошибка

JavaScript


habr TypeScript: Раскладываем tsconfig по полочкам. Часть 1
habr Как реализовать drag & drop на чистом JavaScript
habr Решение забавной задачки на JavaScript
en Зависимости JavaScript: все, что вы хотели знать, но боялись спросить
en Программное создание изображений с помощью CSS Painting API








Браузеры


en Safari стал вторым Internet Explorer
Метод идентификации браузера через манипуляции с кэшированием Favicon
Chrome вскоре прекратит работать на процессорах старше 15 лет
Критический баг в Firefox мог привести к выполнению произвольного кода

Занимательное


Атака на зависимости позволила выполнить код на серверах PayPal, Micrоsoft, Apple, Netflix, Uber и ещё 30 компаний
Иконки Favicon научились использовать в качестве Supercookies
Исследование: корпоративных медиа на WordPress стало больше, чем обычных
Google, Microsoft и Huawei объединились для поддержания жизни языка Rust
Проект Tor представил систему анонимных тикетов для GitLab


Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Подробнее..

Дайджест свежих материалов из мира фронтенда за последнюю неделю 455 (15 21 февраля 2021)

22.02.2021 00:14:30 | Автор: admin
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.


Медиа|Веб-разработка|CSS|JavaScript|Браузеры|Занимательное


Медиа


podcast Подкаст Веб-стандарты 269. Прощание с Edge, веб-платформа, z-index, однострочники, атака на зависимости, инди-веб, CTF
podcast Подкаст Сделайте мне красиво 55 Не ешьте фрукты, не используйте margin
podcast Фронтенд Юность (18+) #173: Make TypeScript JavaScript Again
podcast Новости 512 от CSSSR: TypeScript 4.2 RC, долой Express, дата и время на JS, Lerna 4.0.0, Mocha 8.3.0, HolyJS Moscow 2020
podcast Новости 512 от CSSSR: DevTools, лямбды на TS, интервью с Бренданом Айком, Angular 12 next, Node.js 15.9.0, Nuxt.js 2.15.0
video Отсобеседование #2: Собеседование смелого Frontend Middle разработчика

Веб-разработка


habr Грабли WebRTC: как мы допиливали чужой велосипед
Пишем сайт/PWA и выкатываем в прод с Github Actions
en Полное руководство по SEO для начинающих
en Фронт фронтенда и тыл фронтенда в веб-разработке
en Вам, вероятно, не нужен микро-фронтенд
en Создание Tab компонента
en Как преобразовать любой сайт/страницу в устанавливаемое прогрессивное веб-приложение (PWA)




CSS


en Как сделать прилипающий уменьшающийся хедер при прокрутке без JavaScript
en Переключатели с условиями в CSS
en Ответственное скрытие контента
en Что нужно знать о CSS-in-JS на 2021 год
en Отладка CSS Grid как профи
en Используйте CSS Clamp для создания более гибкой обертки
en Три способа создания blob-форм с помощью CSS и SVG
en Создание трехмерных миров с помощью CSS
video en Курс Tailwind CSS: From Zero to Production на YouTube

JavaScript


habr Поддержка JavaScript-приложений в долгосрочной перспективе
Управление памятью в JavaScript
en Редиректы JavaScript и SEO
en Введение в миксины в TypeScript
en Более быстрые вызовы JavaScript
en Как значительно улучшить fetch() с помощью Decorator Pattern
en Создание оглавления с активным индикатором с помощью JavaScript Intersection Observers
en 20 забавных JavaScript-мемов








Браузеры


habr Новая утечка истории браузера через favicon
В Brave обнаружен баг, из-за которого браузер оставляет данные onion-сайтов в трафике DNS
Скоро браузер Chrome для Windows и Android будет потреблять меньше оперативной памяти
Microsoft Edge ждёт обновление: появятся виджеты, поиск по вкладкам и меню расширений


Занимательное


Доля WordPress перевалила за 40% среди топ 10 млн сайтов в рейтинге Alexa
GitHub создал сервис для 3D-визуализации аккаунтов пользователей
В Китае все чаще меняют менеджеров на алгоритмы: те следят за работниками, дают им задачи и могут списать часть зарплаты
Microsoft начала принудительное удаление Flash Player из Windows 10
Туннельный синдром, близорукость, выгорание: чем болеют айтишники

Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Подробнее..

Дайджест свежих материалов из мира фронтенда за последнюю неделю 456 (22 28 февраля 2021)

01.03.2021 00:05:02 | Автор: admin
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.


Медиа|Веб-разработка|CSS|JavaScript|Браузеры


Медиа


podcast Новости 512 от CSSSR: Firefox 86, TypeScript 4.2, рендеры и мемоизация, Код Петцольда, Babel 7.13.0, 30-летие Python
podcast Подкаст Фронтенд Юность #174: Самый типизированный
video Pro Conf #88: OpenJS World 2020
video Как сделать презентацию на движке Shower: быстрый старт, шаблон, элементы и устройство темы

Веб-разработка


en Будущее веб-приложений это HTML-over-WebSockets
en Как веб-компоненты используются в GitHub и Salesforce
en 10 самых популярных методов взлома веба в 2020 году
en Сколько времени нужно SEO, чтобы показать результаты?
en Новости веб-платформы: Reduced Motion, CORS, WhiteHouse.gov, popups, and100vw
en Настигнет ли Deno в 2021 году NodeJS?




CSS


en Создавайте адаптивные эффекты изображения с помощью градиентов CSS и aspect-ratio
en Стилизация символов CSS с помощью Background-Clip
en Houdini: JavaScript API для расширения CSS
en Погружение в псевдоэлементы ::before и ::after
en Как имитировать прозрачность с помощью CSS Background
en Обеспечение правильного вертикального положения для крупного текста
en Погружение в тени
en Поддержка CSS-in-JS в DevTools
en Будущее CSS: анимация с прокруткой и @scroll-timeline (часть 1)
en Отладка repaint-проблем, вызванных CSS Transition
en Красота крошечных улучшений в CSS
en Как стилизовать битые изображения с помощью css
en DRY подход к цветовым темам вCSS


JavaScript


habr Мир JavaScript в 2021 году
habr Неудачный опыт миграции Electron приложения на ECMAScript модули
habr JavaScript нанобенчмарки и преждевременные тормоза
en Анонс TypeScript 4.2
en Как работать с датой в простом Javascript библиотеки не нужны
en 7 вопросов для интервью о ключевом слове this в JavaScript.
video Redux vs Mobx: плюсы, минусы, область применения






Браузеры


Релиз Firefox 86
В десктопной версии Google Chrome появилась поддержка автоматических субтитров
Яндекс.Браузер ограничит передачу данных пользователей сторонним трекерам
Компания Mozilla опровергла ложную информацию об удалении лисы с логотипа Firefox



Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Подробнее..

Дайджест свежих материалов из мира фронтенда за последнюю неделю 457 (1 7 марта 2021)

08.03.2021 00:05:56 | Автор: admin
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.


Медиа|Веб-разработка|CSS|JavaScript|Браузеры


Медиа


podcast Новости 512 от CSSSR: История фронтенда от CSSSR, Chrome 89, Flutter 2, import maps, free-for.dev, структуры данных Ivy
podcast Новости 512 от CSSSR: Не бандлом единым, CSS-in-JS в DevTools, туториал по Rollup, тени, псевдоэлементы ::before и ::after
podcast Подкаст Сделайте мне красиво 56 Не мучайся, переходи на Notepad
podcast Подкаст Фронтенд Юность #175: Открытые отношение рок-звёзд в Netflix
video Archakov Blog: Собеседование на позицию middle frontend-разработчика

Веб-разработка


История фронтенда: Браузер, который умел всё
en Состояние мобильных устройств и почему мобильное веб-тестирование имеет значение
en Как разработать и протестировать Mobile-First дизайн в 2021 году
en Руководство для новичков по headless CMS и Jamstack
en 7 полезных атрибутов HTML, о которых вы, возможно, не знаете
en Динамические метатеги для ботов и сканеров с помощью Firebase и Cloudflare Workers





CSS


CSS COLORS
habr Три способа создания клякс с помощью CSS и SVG
en Серая мертвая зона градиентов
en Сверхгибкая CSS-карусель, улучшенная с помощью JavaScript-навигации
en Новые возможности CSS в 2021 году
en Важность изучения CSS
en Будущее CSS: Scroll-Linked анимация и @scroll-timeline (часть 2)
en Прекратить использование шрифтов со значками
en Как определять позицию мыши в CSS
en Изучение @property и его анимационные возможности
en Анимированный семантичный аккордион на чистом CSS
en Адаптивные изображения: разные методы и тактики
en Илюстрированная шпаргалка по CSS Grid в 2021

JavaScript


en 5 распространенных ошибок, связанных с памятью в JavaScript
en Как анти-TypeScript разработчик JavaScript вроде меня стал поклонником TypeScript
en Темная сторона Javascript: три функции, которые вы никогда не захотите использовать
en Управляйте поведением импорта в JavaScript с помощью карт импорта
en Gyro-web: доступ к ориентации устройства в JavaScript







Браузеры


Релиз Chrome 89
Google упростила тестирование новых функций Chrome при помощи нового раздела Experiments
Google сокращает цикл подготовки новых выпусков Chrome с шести до четырёх недель
Microsoft выпустила Edge 89 браузер запускается до 41% быстрее и теперь поддерживает вертикальные вкладки
Разработчики браузера Brave скоро запустят свою поисковую систему с высоким уровнем конфиденциальности
en WordPress рассматривает отказ от поддержки IE 11
en Ядро Drupal прекращает поддержку Internet Explorer 11 в Drupal 10

Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Подробнее..

Дайджест свежих материалов из мира фронтенда за последнюю неделю 458 (8 14 марта 2021)

15.03.2021 00:06:29 | Автор: admin
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.


Медиа|Веб-разработка|CSS|JavaScript|Браузеры


Медиа


podcast Подкаст Веб-стандарты 272. Chrome 89 и DevTools, релизы и приватность, история веба, цвета из спеки, дизайн-система Consta
podcast Новости 512 от CSSSR #156: Gatsby 3, замедление Twitter, уязвимость git clone, фронтенд в Lyft, @scroll-timeline, Firebase 101
podcast Новости 512 от CSSSR #155: Мануал по TypeScript, @property, заблуждения о микрофронтендах, цена useMemo(), интервью Райана Дала
podcast Подкаст Фронтенд Юность #176: Нулишкуралесинг
podcast Подкаст Фронтенд Юность #177 Бродяги из Джиерписи
video CSSSR: Разбор технического собеседования на позицию senior front-end developer. Часть 1.
video Видео докладов с Я Фронтенд 2021

Веб-разработка


habr Hello, Word! Разрабатываем браузерное расширение в 2021-м
habr Забудьте про div, семантика спасёт интернет
habr Программная генерация изображений с помощью API CSS Painting
en Новости платформы от css-tricks: Defaulting to Logical CSS, Fugu APIs, Custom Media Queries, и WordPress vs.Italics
en Слишком много SVG засоряют вашу разметку? Попробуйте `use`.
en Веб-компоненты проще, чем вы думаете
en Когда следует использовать прогрессивные веб-приложения?
en Создание слайд-шоу с помощью Clip-path




CSS


habr Погружаемся в логические свойства CSS
en Инструменты аудита CSS
en Углубляемся в логические свойства CSS
en Сделайте свой CSS читаемым и поддерживаемым с помощью CSS-шаблона Enabling.
en Системные шрифты не должны быть уродливыми
en HSL: цветовой формат для людей
en Адаптивный текст в зависимости от размера изображения


JavaScript


en Сборка мусора в JavaScript: браузер против сервера
en JavaScript: что означает this?
en По ту сторону Console.log() Повышаем уровень навыков отладки
en 12 способов улучшить логгирование в консоли DevTools
en Упрощение Rest параметров в JavaScript






Браузеры


habr Новый, смелый, анонимный: поисковик Brave Search
Атака по извлечению данных из кэша CPU, реализуемая в web-браузере без JavaScript
Google снизила потребление оперативной памяти в Chrome 89 для Windows, macOS и Android
Microsoft отправляет на покой классический Edge на EdgeHTML поддержка браузера завершится уже сегодня


Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Подробнее..

Дайджест свежих материалов из мира фронтенда за последнюю неделю 459 (15 21 марта 2021)

22.03.2021 00:17:09 | Автор: admin
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.


Медиа|Веб-разработка|CSS|JavaScript|Браузеры


Медиа


podcast Новости 512 от CSSSR: История React API, доклады и воркшопы с Я <3 фронтенд, нюансы this, релизы браузеров и V8, semver
podcast Подкаст Сделайте мне красиво 57 Если всё работает, то и тесты не нужны
podcast Подкаст Веб-стандарты 273. Старый Edge, Safari, React Native и Preact, MDN по-русски, печать, EditorConfig, ховеры, шрифты

Веб-разработка


habr Очередной гайд по HTML-элементам, которые можно использовать в каждом проекте
en Объяснение принципа работы Webpacks Hot Module Replacement Feature
en Как имитировать мобильные устройства в режиме Device Mode в Chrome
en Русская локаль на MDN разморожена и можно снова участвовать в переводе лучших материалов для веб-разработчиков. Желающие присоединиться к проекту могут отписаться в соответствующем issue




CSS


en Официальная вложенность в CSS последний кусочек головоломки
en Знаете ли вы о CSS селекторе :has?
en Три важных вещи, которые вы должны знать о :is() в CSS
en 100 анимаций подчеркивания/наложения | The ultimate CSS collection
en CSS генераторы
en Fluid Space Calculator
en Лучшие техники переноса строки для длинных URL-адресов
en Новости платформы: Prefers Contrast, MathML, :is(), и CSS Background InitialValues
en Что я делаю с размерами шрифтов
en Да, вот лучший фреймворк CSS в 2021 году

JavaScript


Удобный доступ кбуферу обмена сClipboard API
habr JavaScript prototype pollution: практика поиска и эксплуатации
en Обработка пользовательских разрешений в JavaScript
en Совет 1 по ознакомлению с новыми кодовыми базами JavaScript
en Что такое JavaScript Internationalization API (I18n)?







Браузеры


Из Firefox намерены убрать компактный режим отображения панелей
В ночных и бета сборках Firefox включена по умолчанию поддержка HTTP/3
Chrome получил функцию Live Captions и теперь может автоматически создавать субтитры для видео и аудио с речью


Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Подробнее..

Дайджест свежих материалов из мира фронтенда за последнюю неделю 460 (22 28 марта 2021)

29.03.2021 00:13:50 | Автор: admin
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.


Медиа|Веб-разработка|CSS|JavaScript|Браузеры


Медиа


podcast UnderJS Podcast #30 Billing и бухгалтерия инженерная сторона с Виталием Слободиным.
podcast Новости 512 от CSSSR: Firefox 87, Grid на примерах, смерть Node.js-процессов, проблема JS-библиотек, Compat2021
podcast Подкаст Фронтенд Юность #178: Супер-выпуск. Массивы против объектов. Раунд 1
podcast Подкаст Веб-стандарты 274. Новинки V8, бета Chrome 90 и веб-бандлы, ненастоящие PWA и нативный CSS Nesting

Веб-разработка


habr 14 полезных инструментов, ускоряющих и упрощающих веб-разработку
en Глубокое погружение в Eleventy Static Site Generator
en Под капотом Emoji
en Конец AMP
en Интерактивные веб-компоненты проще, чем вы думаете
en Bootstrap 5 Beta 3, Понимание леайута в Bootstrap 5
en 5 различных инструментов для мониторинга фронтенда
en Headless: сценарии использования и для чего он нужен




CSS


video Цветовые функции в CSS. Мечты сбываются: смешивание, прозрачность, контраст
en Compat2021: устранение пяти основных проблем совместимости в вебе
en Приручение режимов наложения: `difference` и`exclusion`
en 4 лучших альтернативы Tailwind CSS на 2021 год
en Обработка текста, размещенного поверх изображений в CSS
en Нетипичное использование горизонтальных разделителей
en Анимация подчеркивания
en Как улучшить недостаточно проработанные элементы select
en Эффект фрагментации изображения с помощью масок CSS и кастомных свойств

JavaScript


habr Как создатель node.js сам разочаровался в нем
en Понятный человеку JavaScript: история двух экспертов
en Основные тренды JavaScript, за которыми стоит следить в 2021 году
en JavaScript SEO: лучшие практики и инструменты отладки
en Самый проклятый JavaScript
en Новые функции ES2021, которые вы могли пропустить







Браузеры


habr Google удалил расширение ClearURLs из Chrome Web Store
habr IETF официально прекратил поддержку протоколов TLS 1.0 и 1.1
Релиз Firefox 87
Microsoft, Google и другие объединяют усилия для улучшения совместимости браузеров
В Chrome 90 утверждено использование HTTPS по умолчанию в адресной строке

Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Подробнее..

Дайджест свежих материалов из мира фронтенда за последнюю неделю 461 (29 марта 4 апреля 2021)

05.04.2021 00:18:36 | Автор: admin
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.


Медиа|Веб-разработка|CSS|JavaScript|Браузеры|Занимательное


Медиа


podcast Новости 512 от CSSSR: Next.js 10.1, Socket.io 4, апрельские security-релизы Node.js, анонс Deno Company, Sublime Text 4
podcast Новости 512 от CSSSR: SvelteKit beta, Bootstrap 5 beta-3, локализация MDN RU, прототип Container Query, атака на PHP
podcast Подкаст Сделайте мне красиво 59 Чем программист отличется от светофора?
podcast Подкаст Фронтенд Юность #180: Конфетти-токены на самописном React-е
podcast Подкаст Веб-стандарты 275. Firefox 87, Container Queries, Compat 2021, SvelteKit, эмоджи, лонгрид и дорога к доступности
video Хард скиллы верстальщика: интервью с Людмилой Мжачих из PayDay, Mail.ru Group
podcast video Подкаст Да как-так то?. Пилотный выпуск


Веб-разработка


habr 7 полезных HTML-атрибутов, о которых вы, возможно, не знаете
habr Вы можете создавать эти элементы, не используя JavaScript
en Как я проанализировал все лицензии в NPM зависимостях
en Использование Python для фронтенда
en Новости платформы: скругленные outlines, GPU-Accelerated анимации в SVG, как определяются CSS переменные





CSS


habr Крутые трюки с переменными CSS
habr Font size бесполезен, давайте это исправим
video CSS Container Queries, или Адаптация по-новому: контейнер вместо вьюпорта
en Container Queries уже на подходе
en Адаптивный веб-дизайн для нового поколения раскладывающихся устройств
en Темный режим за 5 минут, с инвертированными переменными яркости
en Встречайте Utopia: проектирование и разработка с использованием резиновых размеров и масштабирующихся отступов
en Портреты в виде кляксы: развлекаемся с функцией CSS path()
en Несовершенная разработка: стили CSS с перспективой на будущее
en Давайте создадим эффект всплывающего изображения с помощью SVG Clip Path
en Создание волшебной 3D-кнопки
en Совет: стилизуйте псевдоэлементы с помощью Javascript, используя кастомные свойства CSS
en Инструменты для аудита CSS
en Reseter.css современный CSS Reset/Normalizer

JavaScript


habr Экосистема JavaScript: тренды в 2021 году. Всё ли так однозначно?
habr JavaScript: Стек вызовов и магия его размера
habr Умная квартира на JavaScript. От светодиода до распознавания лица в камере домофона
Лучший JavaScript-фреймворк 2021: React илиVue?
en Использование GPU для повышения производительности JavaScript
en [V8 Deep Dives] Случайные мысли о Math.random()






Браузеры


Яндекс.Браузер научился переводить текст на картинках
Браузер Opera получил нативную поддержку ARM-процессора Apple M1


Занимательное


Фальшивая версия плагина jQuery Migrate заразила множество сайтов
Злоумышленники использовали GitHub для криптомайнинга, но сервис до сих пор не закрыл уязвимость
Эксперимент: как запросы в поиске и просмотры на YouTube влияют на ленту от Google с новостями
Офис остался на первом месте: у Amazon и Google не будет полной удалёнки, а сотрудников постепенно вернут в кампусы
Подборка первоапрельских шуток 2021 года
О чём пишут 1 апреля в ИТ-прессе. Лучшие шутки
en Google vs Baidu: ключевые различия в стратегии SEO

Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Подробнее..

Дайджест свежих материалов из мира фронтенда за последнюю неделю 462 (5 11 апреля 2021)

12.04.2021 00:19:09 | Автор: admin
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.


Медиа|Веб-разработка|CSS|JavaScript|Браузеры


Медиа


podcast Новости 512 от CSSSR: TypeScript 4.3 beta, воркшоп по TDD c React, Husky 6, сравнение Hyperapp с React, RGB и HSL
podcast Новости 512 от CSSSR: Prototype pollution, Tailwind CSS 2.1, Ruby 3.0.1, Cypress 7.0, security-обновления Node.js
podcast Подкаст Веб-стандарты 276. Safari, static в V8, Deno, Sublime Text, HSL и LCH, F1, WordPress, SPA, гидрация и Next.js
podcast Подкаст Фронтенд Юность #181 Эйблизм открытого ПО

Веб-разработка


habr Веб-империя правительства UK: все во имя человека, для блага человека
habr DevTools для чайников
PWA для SSR приложения в 5 строк на Workbox 6.
en Руководство по SEO в Jamstack
en HTML атрибут ping для якорных элементов (ссылок)
en Обновление архитектуры DevTools: перенос DevTools на TypeScript
en Создание переключателя с поддержкой доступности
en Эффект перехода на полноразмерную страницу по клику на превью

CSS


habr 5 плохих CSS практик
en Псевдоклассы CSS :where и :is
en Устранение проблем с темным режимом Gmail с помощью CSS Blend Modes
en Современные обновления CSS для улучшения доступности
en Инспектирование элементов как способ удовлетворить свое любопытство
en Возвращение к CSS Pie таймеру

JavaScript


Спецификация ECMAScript 2021 для JavaScript приближается к финишу
en Шпаргалка по переходу с jQuery на ванильный JavaScript
en Сниппеты кода на ванильном JavaScript
en Создание умной панели навигации на ванильном JavaScript
en Лечебная сила JavaScript
en 5 способов предотвратить внедрение кода в JavaScript и Node.js
en Замена let на const
en JS классы это не просто синтаксический сахар







Браузеры


habr Шпион, выйди вон: что делают браузеры после установки?
Google Chrome заблокировал HTTP, HTTPS и FTP-доступы на порте 10080 из-за хакерской угрозы
10 малоизвестных возможностей браузера Google Chrome

Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Подробнее..

Дайджест свежих материалов из мира фронтенда за последнюю неделю 463 (12 18 апреля 2021)

19.04.2021 00:19:54 | Автор: admin
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.


Медиа|Веб-разработка|CSS|JavaScript|Браузеры


Медиа


podcast Новости 512 от CSSSR: Chrome 90, Deno 1.9, анализ производительности JS, сборщики, верстка писем, pnpm 6, ESLint 7.24.0
podcast Подкаст proConf #92: GatsbyConf 2021
podcast Подкаст Сделайте мне красиво 60 Единственный фронтендер, который откладывает яйца
podcast Подкаст Фронтенд Юность #183: Путь от идеи до популярного OpenSource проекта
podcast Подкаст Да как так-то?. Выпуск 2: Тимлиды, проектные менеджеры, тестировщики кто все эти люди?

Веб-разработка


habr Малоизвестные, но крутые атрибуты в HTML
habr Микрофронтенды: разделяй и властвуй
en Полное руководство по созданию шаблонов HTML-писем
en Практическая доступность, часть 2: дайте имя (почти) всему
en Новости платформы: Использование :focus-visible, новый шрифт BBC, Declarative Shadow DOMs, A11Y иплейсхолдеры
en Медленно и осторожно: конвертация всего интерфейса Sentry на TypeScript
en Напряжение между Wix и WordPress растет




CSS


habr Нестандартные шрифты: как подключить и оптимизировать
habr Какие CSS-генераторы можно использовать в 2021 году
habr Пользовательские CSS-переменные, инверсия светлоты цветов и создание тёмной темы за 5 минут
habr CSS: работа с текстом на изображениях
Tailwind CSS: to use, или not to use?
en Tailwind UI: теперь с поддержкой React + Vue
en Проблемы с Overflow в CSS
en Как подружить стили с Fullscreen API
en Скажите привет CSS Container Queries
en CSS это строго типизированный язык
en Руководство для новичков по новым утилитам в Bootstrap 5
en Используйте Reseter.css вместо Normalize и Reset.css. Чтобы улучшить кроссбраузерность.


JavaScript


habr Типобезопасность в JavaScript: Flow и TypeScript
habr Работа с датой и часовыми поясами в JavaScript
en Изменение размера изображения в зависимости от контета с помощью JavaScript
en Работа со строками в современном JavaScript
en Генераторы JavaScript: превосходный async/await
en Другой подход к архитектуре фронтенда





Браузеры


habr Вышел Chrome 90
Включение поддержки HTTP/3 в Firefox намечено на конец мая
В Firefox 90 будет удалён код, обеспечивающий поддержку FTP
Разработчики Vivaldi и Brave отказались использовать FLoC от Google, призванный заменить сторонние cookie
В Microsoft Edge появился специальный детский режим
en В Firefox Nightly и Beta появилась поддержка QUIC и HTTP / 3
en WebKit: Представляем CSS Grid Inspector

Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Подробнее..

Дайджест свежих материалов из мира фронтенда за последнюю неделю 464 (19 25 апреля 2021)

26.04.2021 00:06:32 | Автор: admin
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.


Медиа|Веб-разработка|CSS|JavaScript|Браузеры|Занимательное|


Медиа


podcast Callback Hell записи аудио-стримов о технологиях и не только от CSSSR
podcast Подкаст Фронтенд Юность #182: Не нужно платить разработчикам 200-300к
podcast Новости 512 от CSSSR: релиз Node.js 16 и Firefox 88, проектирование приложения с TypeScript и ООП, взгляд на Container Query, доклады с Я.Субботника.
podcast Новости 512 от CSSSR: Микрофронтенды в Delivery Club, JS-классы, состояние JS-фреймворков и стейт-менеджеров, минусы Dart
video IT-дебаты: JavaScript-программист vs фронтенд-разработчик
habr video Frontend Meetup 20/04
video Я.Субботник по разработке интерфейсов 2021


Веб-разработка


habr CORS для чайников: история возникновения, как устроен и оптимальные методы работы
habr Как создают и поддерживают веб-страницы tinkoff.ru
habr Трёхпроходный алгоритм рефакторинга Front End
en Что нового в DevTools (Chrome 91)
en Независимые компоненты: новые строительные блоки для веба
en Как я создал свой блог



CSS


habr Полное руководство по CSS Flex + опыт использования
CSS-нестинг больше, чем сахар
en Руководство по новым современным псевдо-селекторам CSS
en Создание (и потенциальные преимущества) CSS-шрифта
en Как добавить двойную границу к SVGShapes
en Начало работы с CSS Custom Properties
en TailwindCSS: добавляет сложности, ничего не делает.
en Работа на ошибками гибкой типографии, базирующихся на вьюпорте в Safari


JavaScript


habr Основы управления памятью в JavaScript: как это работает и какие проблемы могут возникнуть
Выпуск серверной JavaScript-платформы Node.js 16.0
en Чудесный мир Javascript бандлеров
en Улучшите управление состоянием в вашем фронтенде с помощью view models
en Шаблон для свойства отложенной загрузки в JavaScript
en Полное руководство по инкрементной статической регенерации (ISR) с Next.js
en Топ-5 самых популярных вопросов о JavaScript на Stack Overflow
en Руководство по MobX
en Понимание Array Reduce в JavaScript





Браузеры


В Firefox 88 молча удалён пункт контекстного меню Page Info
Apple, Microsoft, Opera и другие разработчики не горят желанием поддерживать технологию Google FLoC
Релиз Firefox 88
В Microsoft Edge тестируется новый режим производительности с иным принципом работы спящих вкладок


Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Подробнее..

Дайджест свежих материалов из мира фронтенда за последнюю неделю 465 (26 2 мая 2021)

02.05.2021 22:08:33 | Автор: admin
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.


Медиа|Веб-разработка|CSS|JavaScript


Медиа


podcast Подкаст proConf #94: GraphQL Galaxy
podcast Новости 512 от CSSSR: Chrome 91 Beta, postcss-easy-z, tree-shakeable библиотеки, гайды по кастомным CSS-свойствам и CLS
podcast Подкаст Callback Hell: Падение последнего оплота Dart, визуальные ЯП на примере Enso, Lucy DSL для стейт-машин
podcast Подкаст Фронтенд Юность#184: Матрица для мешка с картошкой


Веб-разработка


История фронтенда: JavaScript как отражение новой эпохи
habr HTMHell адовая разметка
habr HTML-теги и атрибуты, о которых вы, возможно, не знали
habr Адаптивный дизайн как антипаттерн
en Скромный элемент img и Core Web Vitals
en Как реализовать выбор дейстий для выделенного текста с помощью SelectionAPI




CSS


habr Примеры применения переменных CSS на практике
habr Контейнерные запросы в CSS
habr Как обеспечить глассморфизм с помощью HTML и CSS
VDS (value definition syntax)
en fit-content и fit-content()
en Полное руководство по Custom Properties
en Первый взгляд на CQFill, полифилл для CSS Container Queries
en Изучение color-contrast() в первый раз
en GPT-3 и CSS-фреймворки
en Понимание easing-функций для анимации и переходов в CSS
en Новые возможности WebKit в Safari 14.1 (Flexbox Gap, Date & Time Inputs, CSS Individual Transform Properties)

JavaScript


habr Целительная сила JavaScript
habr Человеко-читаемый JavaScript: история о двух экспертах
Принцип мозаики, или Как мы сделали JavaScript по-настоящему модульным
en Fower утилитарная CSS in JS библиотека для быстрой разработки интерфейсов.
en Клиентские шаблоны API, о которых должен знать каждый разработчик фронтенда








Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Подробнее..

Дайджест свежих материалов из мира фронтенда за последнюю неделю 466 (3 9 мая 2021)

10.05.2021 00:07:48 | Автор: admin
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.


Медиа|Веб-разработка|CSS|JavaScript


Медиа


podcast Подкаст 'Callback Hell': Убийцы вебпака, Microsoft + Bytecode Alliance, удалёнка
podcast Новости 512 от CSSSR: Bootstrap 5, V8 9.1, дженерики в TypeScript, RxJS в Angular, e2e-тесты с Cypress, баг в Safari 14.1
podcast Новости 512 от CSSSR: История фронтенда ч.2, Safari 14.1, CORS, Cookie Store API, Next.js 10.2, RxJS 7, Google I/O 2021
podcast Подкаст Веб-стандарты 280. Safari 14.1, гэпы во флексах, история JS, мозаичный JS, кому нужны алгоритмы
video Видеокаст Front-end. Вопросы на собеседовании #1
podcast video Подкаст Pro Conf #95: HollyJS Moscow 2020

Веб-разработка


habr Вышел Bootstrap 5: оцениваем 7 главных нововведений
habr Почему стоит использовать тег <picture> вместо <img>
habr Базовая структура HTML-документа с объяснением каждой строчки
habr HTML трюки
en Эволюция Jamstack
en Как мы используем веб-компоненты на GitHub
en Аудит дизайн-систем на предмет доступности
en Ускорение процесса разработки с помощью Bootstrap 5
en Как мы ускорили трассировку стека Chrome DevTools в 10 раз




CSS


en Состояние кроссбраузерной разработки CSS
en Container Queries: разъяснения и предложения
en Два варианта использования кастомных свойств
en Полное руководство по веб-шрифтам в шаблонах писем
en Является ли CSS языком программирования?
en CSS Hell Сборник распространенных ошибок в CSS и способы их исправления
en Текст размером 16 пикселей или больше предотвращает масштабирование формы в iOS
en Fluid typography Создавайте текст, масштабируемый в соответствии с размером окна, чтобы заголовки отлично смотрелись на любом экране.
en Вендорные префиксы мертвы?
en Компиляция CSS по запросу с помощью последней версии компилятора Tailwind


JavaScript


habr Как я написал браузерный 3D FPS шутер на Three.js, Vue и Blender
Кастомные типы данных в TypeScript: валидация на этапе компиляции
en Возможны ли 0kb JavaScript в вашем будущем?
en Vue Composition API против React Hooks основная разница
en Создайте трекер спутников с нуля 30-ю строками JavaScript кода







Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Подробнее..

Дайджест свежих материалов из мира фронтенда за последнюю неделю 467 (10 16 мая 2021)

17.05.2021 00:12:32 | Автор: admin
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.


Медиа|Веб-разработка|CSS|JavaScript|Браузеры


Медиа


podcast Подкаст Веб-стандарты 281. SpiderMonkey 25 лет, Safari TP, Bootstrap 5, Гитхаб, префиксы, монорепы и свой git в Яндексе
podcast Подкаст Фронтенд Юность #186. Утюжить веб. В гостях создатель и главный редактор Smashing Magazine Виталий Фридман.
video Видеокаст Front-end. Вопросы на собеседовании #2
video Нужен ли джуну идеальный код: интервью с Вадимом Макеевым
podcast video Подкаст Да как так-то?. Выпуск 4: из филолога-япониста во фронтенд на фрилансе

Веб-разработка


Солидные фронтенды: мониторинг
en Регистрация обработчика протокола URL для PWA
en Различия между WebSockets и Socket.IO
habr Переход к Meta GSAP: поиски идеальной бесконечной прокрутки




CSS


habr Выявление устройств с сенсорными экранами на чистом CSS
habr Венец эволюции CSS-in-JS уже здесь: полностью типизированные стили без рантайма в vanilla-extract
habr Сравнение производительности CSS и CSS-in-JS в реальном мире
habr Инструменты для аудита CSS
Родительский селектор :has() в реальность!


en Дизайн для чтения: советы по оптимизации контента для режимов чтения и приложений-читалок
en Продвинутая CSS-анимация с использованием cubic-bezier()
en aspect-ratio и grid
en Создание Stylesheet Feature Flags с помощью Sass!default
en Плавная прокрутка Sticky ScrollSpy Navigation с фиксированным фоном на CSS
en Взгляд на CSS Tailwind

JavaScript


habr Отслеживание и визуализация положения МКС с помощью 30 строк JavaScript-кода
habr Шпаргалка по JS-методам для работы с DOM
habr Паттерны отложенной инициализации свойств объектов в JavaScript
habr Я выпустил Grafar JS-библиотеку для визуализации
en 7 шагов для безопасного JavaScript в 2021 году
en Современный Javascript: все, что вы пропустили за последние 10 лет (ECMAScript 2020)
en Создайте тетрис с помощью современного JavaScript








Браузеры


en Использование обработчиков пользовательских протоколов для кросс-браузерного отслеживания в Tor, Safari, Chrome и Firefox
Идентификация через анализ внешних обработчиков протоколов в браузере

Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Подробнее..

Дайджест свежих материалов из мира фронтенда за последнюю неделю 468 (17 23 мая 2021)

24.05.2021 00:09:13 | Автор: admin
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.


Медиа|Веб-разработка|CSS|JavaScript|Браузеры


Медиа


podcast Подкаст Веб-стандарты #282: Rome, CloudFront Functions, кроссбраузерность, has() и другой современный CSS, мониторинг, GDE
podcast Подкаст Фронтенд Юность #187: Bootstrap круче чем все сраные фреймворки
podcast Подкаст Callback Hell: Производительность CSS-in-JS, языки логического программирования, ООП в современном фронтенде
podcast Новости 512 от CSSSR: Angular 12, Deno 1.10, мониторинг, тестирование UI, :has(), курс по git, Rome + $, TypeScript 4.3 RC
podcast Подкаст Callback Hell Поддержка нескольких мажорных версий, венчурный капитал в Open Source и возвращение тонкого клиента
podcast Подкаст proConf #96: DeveloperWeek 2020
podcast video Подкаст Цинковый Прод #113: Сайт сына маминой подруги

Веб-разработка


W3C представил черновой вариант стандарта WebGPU
en Google AMP мертв! AMP-страницы больше не пользуются приоритетом в поиске Google
en Incremental Static Regeneration: создавайте статические сайты понемногу
en Тестирование фронтенд-приложений что, где, как?





CSS


habr Трюки CSS, которые сделают из вас ниндзя верстки
habr Взгляд на Tailwind CSS
en Новая отзывчивость: веб-дизайн в мире компонентов
en Нет, утилитарные классы это не то же самое, что инлайн стили
en Как создать неоновый текст с помощью CSS
en Как стилизовать любое поле ввода советы и методы
en 82% разработчиков неправильно проходят этот трехстрочный тест по CSS
en Learn CSS Постоянно обновляемый курс CSS и справочник для повышения вашего уровня знаний в области стилизации веба
en aspect-ratio

JavaScript


habr Швейцарский нож отладки JavaScript
habr Трасси что? Доклад Яндекса
en DOM Events изучение системы событий DOM с помощью визуального исследования
en ES12 сделает вашу жизнь проще
en Справочник по массивам JavaScript методы работы с JS-массивами с примерами
en Двухмерные оптические демки в Javascript
en JavaScript API для распознавания людей и ботов в Chrome







Браузеры


habr Microsoft прекратит поддержку приложения Internet Explorer 11 в Windows 10 с июня 2022 года
habr Кросс-браузерный трекинг на основе перебора обработчика внешних протоколов
В Chrome экспериментируют с поддержкой RSS, чисткой User-Agent и автосменой паролей
Компания Mozilla представила режим строгой изоляции сайтов для Firefox
Выпуск перенастраиваемого web-браузера Nyxt 2.0.0

Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Подробнее..

Дайджест свежих материалов из мира фронтенда за последнюю неделю 469 (24 30 мая 2021)

31.05.2021 00:23:47 | Автор: admin
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.


Медиа|Веб-разработка|CSS|JavaScript|Браузеры


Медиа


podcast Подкаст Веб-стандарты 83. Sublime Text 4, Sass, Svelte после React, Container Queries, Learn CSS, Google I/O, новые GDE
podcast Подкаст proConf #97: JavaScript for WordPress 2020
podcast Подкаст Callback Hell: Sublime Text 4 и другие редакторы, проблемы написания читаемого кода, завершение эпохи IE
podcast Новости 512 от CSSSR: Chrome 91, TypeScript 4.3, Server-Sent Events API, logux и logux/state, postTask, Parcel 2 beta 3
podcast Новости 512 от CSSSR: Sublime Text 4, PostCSS 8.3, ненадежность TypeScript, Angular DevTools, WebContainers, Google I/O 21
podcast Пилотный выпуск подкаста Goose & Duck: Babel, деньги, два гуся

Веб-разработка


habr Самая серьёзная проблема HTML? Разработчики, разработчики, разработчики
habr Использование веб-компонентов при работе над GitHub
habr Наиболее полное руководство по практическому использованию Web Speech API
en Эволюция и новое определение Jamstack
en 10 вариантов клиентских хранилищ и когда их использовать
en Нарушаете ли вы патент, публикуя PWA?
en Создайте эффект плавного наведения с помощью GSAP и SVG



CSS


habr HTML и CSS ошибки, ухудшающие UX
en Тщательный анализ CSS-in-JS
en CSS Container Queries для дизайнеров
en 25 лет CSS
en CSS Container Queries: примеры использования и стратегии миграции
en Новый способ уменьшить влияние загрузки шрифтов: дескрипторы шрифтов в CSS

JavaScript


habr Карманная книга по TypeScript. Часть 1. Основы, Часть 2. Типы на каждый день
habr 3 способа визуального извлечения данных с помощью JavaScript
en Sparkplug неоптимизирующий компилятор JavaScript
en Новые стандарты доступа к оборудованию устройств с использованием JavaScript
en 7 инструментов, трансформирующих JavaScript-разработку
en Введение в Clio lang: несложная реализация производительного critical js






Браузеры


habr Mozilla примет Manifest v3 для дополнений Firefox, но без мер против блокировщиков рекламы
Релиз Chrome 91
en Призрак Google Reader находит свой путь в новой сборке Chrome Canary

Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Подробнее..

Дайджест свежих материалов из мира фронтенда за последнюю неделю 470 (1 6 июня 2021)

07.06.2021 00:10:32 | Автор: admin
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.


Медиа|Веб-разработка|CSS|JavaScript|Браузеры


Медиа


podcast video Подкаст Goose&Duck #1 Ржавеющий JavaScript
podcast CSSSR Callback Hell: Rescript, мысли пьяного Senior-разработчика, слежка за сотрудниками
podcast Новости 512 от CSSSR: Server-Sent Events: ограничения, поддержка Node.js-проектов, плагины для VSCode, 12 лет Node.js
podcast Подкаст Фронтенд Юность #189 Рон-дом-дом

Веб-разработка


habr С помощью перехода на микросервис мы ускорили бизнес-процесс в 60 раз
en Создание нескольких прогрессивных веб-приложений в одном домене
en Тестирование фронтенда для всех
en Разрушение мифов: Jamstack не может обрабатывать динамический контент
en История веба: часть 1
en Некоторые из лучших пасхальных яиц, спрятанных на сайтах в Интернете





CSS


habr 25 лет CSS
Нативная валидация ввода в CSS
en CSS in SVG in CSS: добавление конфетти в дизайн-систему Stack Overflow
en Новые функциональные селекторы псевдоклассов CSS: is() и: where()
en Тригонометрия в CSS и JavaScript: Введение в тригонометрию
en Тригонометрия в CSS и JavaScript: творческий подход с помощью тригонометрических функций
en The CSS Layout Generator визуальный инструмент для создания компонентов лейаута на CSS Grid
en Inherit, initial, unset, revert
en Шестиугольники и не только: гибкие, отзывчивые сеточные шаблоны, без медиа-запросов

JavaScript


habr Управление зависимостями в Node.js
habr Как мы потерпели неудачу, а затем преуспели в переходе на TypeScript
habr Создание нейронной сети Хопфилда на JavaScript
ES12 сделает вашу жизнь проще!
en Обеспечение быстрой работы JavaScript в WebAssembly
en Еще одна альтернатива Javascript: ReScript
en Взгляд на компиляцию в JavaScript-фреймворках






Браузеры


habr Firefox 89 обновил интерфейс браузера
Релиз Firefox 89 с переработанным интерфейсом
Mozilla, Google, Apple и Microsoft объединили усилия в стандартизации платформы для браузерных дополнений
en Что нового в DevTools (Chrome 92)

Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Подробнее..

Используйте ссылки и кнопки правильно. Пожалуйста

09.06.2021 14:20:05 | Автор: admin

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

Почему возникает проблема

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

Ссылки создаются с помощью тега <a>.

<a href="http://personeltest.ru/aways/htmlacademy.ru">HTML Academy</a>

Кнопка это функциональный элемент. Она отвечает за выполнение определённой функции: добавить в корзину, купить, отправить, проголосовать и т. д.

Для кнопок используют тег <button>.

<button class="button">9 900 руб.</button>

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

Пример двух кнопок, где нижняя похожа на ссылкуПример двух кнопок, где нижняя похожа на ссылкуПример ссылки, похожей на кнопкуПример ссылки, похожей на кнопку

Что случится, если вместо ссылки сделать кнопку

Если URL-адрес обернуть не <а>, а тегом <button>, то при нажатии пользователя на правую кнопку мыши браузер предложит выполнить действия, которые положены при клике на кнопку. Адрес нельзя будет открыть в новой вкладке или отправить через контекстное меню.

Контекстное меню при клике правой кнопкой мыши на кнопкуКонтекстное меню при клике правой кнопкой мыши на кнопку

Такая кнопка не позволит открыть страницу в новой вкладке и через комбинацию клавиш Ctrl и левая кнопка мыши.

При наведении курсора на правильную ссылку её адрес появляется внизу окна браузера. URL-адрес, обёрнутый в <button>, не отобразится.

Адрес правильной ссылки в окне браузера при наведении на неё курсораАдрес правильной ссылки в окне браузера при наведении на неё курсора

Что произойдёт, если вместо кнопки сделать ссылку

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

Контекстное меню при клике правой кнопкой мыши на ссылкуКонтекстное меню при клике правой кнопкой мыши на ссылку

Если функциональный элемент обернуть тегом <a>, то при клике правой кнопкой мыши всплывающее окно будет как у ссылки, но оно не будет иметь смысла. Такая ссылка не имеет корректного адреса, а значит открыть, сохранить, копировать её или поделиться ею невозможно.

<a href="javascript:;">На самом деле это кнопка</a>

При наведении курсора на псевдоссылку внизу окна браузера появится не адрес, а javascript:; или АдресТекущейСтраницы/#.

Как определить элемент по макету

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

У ссылки должны быть стили для состояния покоя, при наведения курсора :hover, в момент нажатия :focus, активного :active и иногда состояния, когда пользователь уже посещал эту страницу :visited.

У кнопки нет состояния :visited, зато есть состояние блока :disabled.

Состояния ссылок в стайлгайде макетаСостояния ссылок в стайлгайде макета

Однако рассчитывать только на макет не нужно. У ссылки может не быть :visited, а у блока :disabled это может запутать.

Забудьте про div семантика спасёт интернет

Всё-таки кнопка или ссылка?

Если дизайнер по каким-то причинам не отрисовал состояния вообще, то придётся руководствоваться одной логикой.

Ссылка

Кнопка

За что отвечает

Навигация, т. е. пользователь перемещается на другую часть страницы или на новую страницу.

Выполнение какой-либо функции без перехода на другую страницу добавить в корзину, купить, отправить, проголосовать, войти и т. д.

Что видит пользователь

При наведении курсора на ссылку внизу окна браузера возникает её адрес.

Через меню по клику правой кнопкой мыши можно скопировать, отправить, открыть ссылку в новой вкладке.

При наведении курсора на ссылку внизу окна браузера не отображается адрес.

Через меню по клику правой кнопкой мыши нельзя скопировать адрес или поделиться им.

Пример, чтобы расставить всё по своим местам

На макете отрисована фраза Войти. Если клик по ней должен открывать окно для ввода регистрационных данных на этой же странице, это кнопка. Если при нажатии должна открываться отдельная страница для входа, это ссылка.

Другие великие противостояния


Ссылки ссылками, а промокод VESELO даст приятную скидку на любой профессиональный курс в HTML Academy. Например, на курс Анимации для фронтендеров можно записаться в любой момент, а пользы для карьеры будет целый вагон.

Подробнее..

Дайджест свежих материалов из мира фронтенда за последнюю неделю 472 (7 13 июня 2021)

14.06.2021 00:15:08 | Автор: admin
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.


Медиа|Веб-разработка|CSS|JavaScript|Браузеры


Медиа


podcast Новости 512 от CSSSR: Firefox 89, Safari 15 Beta, Jest 27, цикл статей о работе браузера, разработка базовых компонентов, обзорная статья о тестировании фронтенда и анонс WebExtensions Community Group.
podcast Подкаст Веб-стандарты #285: Бета Chrome92, Firefox89, якоря ирасширения, TeamCity, JSвнутри WASM, TypeScript4.3
podcast Подкаст Фронтенд Юность #190: Как подступиться к старому проекту и не сесть на кулак
podcast Новости 512 от CSSSR: React 18, Vue 3.1, анонс ESLint 8, курсы от CSSSR, :is(), where() и :has(), как прилёг Интернет
podcast Подкаст Callback Hell: Сервисы Google с плохими Web Vitals, шеринг логики между фронтом и бэком, документация на проектах


Веб-разработка


habr Будущее веба: станет ли рендеринг в <canvas> заменой DOM?
en Правильный тег для работы: почему следует использовать семантический HTML
en 5 проблем фронтенда, которые нельзя игнорировать





CSS


habr Выкладка нетрадиционной ориентации
en Полное руководство по CSS Grid с шпаргалкой
en Системные цвета CSS
en CSS определяет значения цвета, соответствующие системным настройкам.
en Media Queries во времена @container
en Давайте узнаем об Aspect Ratio в CSS
en CSS size-adjust для @font-face
en Равные столбцы с Flexbox: это сложнее, чем вы думаете
en Эксперимент с сортируемыми мультиколоночными таблицами
en Знакомьтесь с :has: нативный CSS селектор
en Рог изобилия ContainerQueries
en Создание правил для font-size CSS и создание Fluid Type Scale

JavaScript


habr Как я ускорил движок на 13%
habr Прогнозирование временных рядов на JS: анализ данных для самых маленьких фронтендеров
habr Sparkplug неоптимизирующий компилятор JavaScript в подробностях
en Как создать фулстек-приложение с помощью Supabase и Next.js
en Реализация приватных полей в JavaScript
en Forever Functional: Мемоизация промисов
en Как реализовать принципы SOLID в JavaScript
en Автоматизируйте форматирование и исправление JavaScript кода с помощью Prettier и ESLint
en Современный JavaScript
en Выходя за рамки ESLint: обзор статического анализа в JavaScript
en Доберенные типы API для безопасности JavaScript DOM
en Как создать NFT с помощью JavaScript
en Rust с точки зрения JavaScript





Браузеры


habr Vivaldi 4.0 Первое приближение
Google признал неудачным эксперимент с показом только домена в адресной строке Chrome
en Возможности WebKit в Safari, продемонстрированные на WWDC21


Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Подробнее..

Дайджест свежих материалов из мира фронтенда за последнюю неделю 473 (14 20 июня 2021)

21.06.2021 00:15:47 | Автор: admin
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.


Медиа|Веб-разработка|CSS|JavaScript


Медиа


podcast Подкаст Веб-стандарты 286: Высокопроизводительное хранилище для вашего приложения: Storage Foundation API
podcast Подкаст Callback Hell: Микрофронтенды и Module Federation, почему компании боятся открывать свой код, игровая выставка E3
podcast Новости 512 от CSSSR: Canvas-рендеринг, Lighthouse 8, пропорции в CSS, PHP 8.1 alpha, Next.js 11, Линус и антипрививочник
podcast video Подкаст Ленивый фронтендер #2 Kaiwa Show | Как сохранить любовь к веб-разработке
podcast Подкаст Фронтенд Юность #191: HR'ы немножко осатанели


Веб-разработка


habr <img>. Доклад Яндекса
habr Темизация. История, причины, реализация
habr DIV должен уйти: улучшаем HTML
en Изучение Eleventy с нуля. Бесплатный курс, состоящий из 31 урока
en Как я использовал WAAPI для создания библиотеки анимации
en Десять лет веб-компонентам



CSS


video :has в CSS псевдокласс из будущего на примере карточки новости
en Использование свойства `outline` в качестве схлопывающейся границы
en Идеальные всплывающие подсказки с обрезкой и маскированием CSS
en Оптический размер, скрытая сверхспособность вариативных шрифтов
en Краткое руководство по логическим свойствам CSS
en Застенчивая кнопка стоимостью 8 миллионов долларов
en Создание таблиц с липким верхним и нижним колонтитулами стало немного проще

JavaScript


habr Скрываем номера курьеров и клиентов с помощью key-value хранилища
habr Юмористичный обзор Rust с перспективы JavaScript
en Управление состоянием: двусторонние биндинги и расширенные средства форматирования биндингов
en Что такое букмарклеты? Как использовать JavaScript для создания букмарклета в Chromium и Firefox
en Тестирование использования памяти в JavaScript
en Двойные кавычки против одинарных кавычек против обратных кавычек в JavaScript
en sorting-algos-visualizer Визуализация популярных алгоритмов сортировки: QuickSort, MergeSort, HeapSort, BubbleSort, InsertionSort







Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Подробнее..

Категории

Последние комментарии

  • Имя: Макс
    24.08.2022 | 11:28
    Я разраб в IT компании, работаю на арбитражную команду. Мы работаем с приламы и сайтами, при работе замечаются постоянные баны и лаги. Пацаны посоветовали сервис по анализу исходного кода,https://app Подробнее..
  • Имя: 9055410337
    20.08.2022 | 17:41
    поможем пишите в телеграм Подробнее..
  • Имя: sabbat
    17.08.2022 | 20:42
    Охренеть.. это просто шикарная статья, феноменально круто. Большое спасибо за разбор! Надеюсь как-нибудь с тобой связаться для обсуждений чего-либо) Подробнее..
  • Имя: Мария
    09.08.2022 | 14:44
    Добрый день. Если обладаете такой информацией, то подскажите, пожалуйста, где можно найти много-много материала по Yggdrasil и его уязвимостях для написания диплома? Благодарю. Подробнее..
© 2006-2024, personeltest.ru