Обновить
149.49

HTML *

Стандартный язык разметки web-страниц

Сначала показывать
Порог рейтинга
Уровень сложности

Как разобраться в API HTML?

Время на прочтение8 мин
Количество просмотров22K
Автор статьи, перевод которой мы сегодня публикуем, решил разобрать несколько HTML5-API  и поговорить об их возможностях, о том, для чего они созданы, об особенностях их использования и об их ограничениях.


Читать дальше →

Как стать фронтенд-разработчиком? Пошаговый гид в мир фронтенда

Время на прочтение14 мин
Количество просмотров266K


Приветствую всех! Меня зовут Пучнина Анастасия, я ведущий разработчик в компании ДомКлик, занимаюсь фронтендом Витрины объявлений. Сегодня я хотела бы поделиться с вами своим мнением на тему того, что важно знать фронтенд-разработчику. Эта статья будет полезна тем, кто только начинает свой путь в разработке, или имеет опыт программирования в другой области и решил перейти на сторону фронтенда.

Содержание:

  1. Кто такой фронтендер и чем он занимается?
  2. С чего начать и что читать? Чек-лист обучения
  3. Какие трудности могут быть? Ошибки в начале пути
  4. Подготовка к собеседованию на Junior-разработчика

Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №439 (26 — 31 октября 2020)

Время на прочтение3 мин
Количество просмотров8.8K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать дальше →

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

Время на прочтение6 мин
Количество просмотров3.9K
Всем привет!

В этой статье я бы хотел рассказать как реализовать доступное модальное окно, без использования атрибута «aria-modal».
Читать дальше →

Как я IF на Twine писал

Время на прочтение3 мин
Количество просмотров11K
Привет Хабр! Это мой первый пост, и я хотел бы поделиться опытом создания IF-игры на Twine. Рассказать о преимуществах и недостатках инструмента, которые заметил во время работы, ну и немного о самой игре.

image

Началось все пять месяцев назад, когда мне предложили сделать IF-игру.
Читать дальше →

Задавать Height и Width для изображений снова важно

Время на прочтение13 мин
Количество просмотров66K

Сторонники веб-оптимизаций часто советуют добавлять к изображениям атрибуты с размерами, что позволяет при отрисовке страницы оставлять нужное количество пространства ещё до загрузки самого изображения. Это позволяет избежать смещения раскладки страницы по мере загрузки изображений - что с недавних пор начал измерять Chrome в новой метрике Cumulative Layout Shift (CLS).

Секрет, не так хорошо известный разработчикам, не являющимся заядлыми сторонниками веб-производительности, заключается в том, что до недавнего времени, как мы увидим в статье, во многих случаях это фактически не имело особого смысла. Однако, недавние изменения в мире CSS и их быстрое внедрение в браузерах снова делает добавление атрибутов width и height к тегу <img> полезным.

Читать далее

Помогаем пользователям менять пароли с помощью well-known URL

Время на прочтение4 мин
Количество просмотров4.9K
Привет!

Делимся переводом небольшой, но полезной статьи о том, как упростить процесс обновления данных для аутентификации.

Установите редирект со страницы /.well-known/change-password на страницу смены пароля для вашего сайта. Благодаря этому, менеджеры паролей смогут направлять пользователей прямо на данную страницу.
Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №438 (19 — 25 октября 2020)

Время на прочтение3 мин
Количество просмотров9.7K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать дальше →

Элементарный автоматический слайдер на основе библиотеки RevolveR: 10 строчек кода

Время на прочтение3 мин
Количество просмотров3K
В кой-то веки, году в 2013, я постепенно перестал использовать jQuery в пользу native ECMAScript. У меня ни осталось ни каких инструментов, сахарного API и нужных в повседневной верстке плагинов. Создавать код библиотеки пришлось с самого нуля и она постепенно обзавелась всем необходимым для быстрой и комфортной работы. У меня не было даже слайдера, а идея не брать jQuery и любые другие библиотеки привела к созданию своей кодовой микро базы.

Rotor by RevolveR Labs
Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №437 (12 — 18 октября 2020)

Время на прочтение3 мин
Количество просмотров9.6K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать дальше →

Динамическое меню c поддержкой touch move и mouse move на RevolveR

Время на прочтение6 мин
Количество просмотров2.9K
Наверняка многие из вас хотели бы научиться создавать красивые и подвижные меню в духе Android Java и Kotlin приложений. Скорее всего даже многие из вас ради этого уходили в области программирования отдельных приложений и были вынуждены осваивать инородный стек.

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

И так: Simple Dynamic Menu by RevolveR Labs.

image
Читать дальше →

10 современных раскладок в одну строку CSS-кода

Время на прочтение7 мин
Количество просмотров34K

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

Читать далее

Дайджест свежих материалов из мира фронтенда за последнюю неделю №436 (5 — 11 октября 2020)

Время на прочтение3 мин
Количество просмотров11K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать дальше →

Ближайшие события

Создание favicon для сайта 2020

Время на прочтение10 мин
Количество просмотров147K

Что такое favicon и для чего он нужен?


Favicon – это значок (иконка), который отображается во вкладке браузера, закладках, а также в сниппетах результатов поиска.

image

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

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

Какой формат использовать для favicon?


Раньше в качестве основного формата использовали ICO. Особенность данного формата – мульти-размерность. Данный файл может хранить в себе несколько размеров иконки. На смену ICO пришел формат PNG. ICO все еще поддерживаемый, но большинство современных браузеров выбирают PNG формат иконки, который легче. Некоторые браузеры не могут выбрать правильный значок в файле ICO, что приводит к неправильному использования значка с низким разрешением.

О каких платформах пойдет речь в этой статье?


  • Десктопные браузеры
  • Chrome на Android
  • Иконка закладки в iOS (PWA)
  • macOS
  • Windows

Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №435 (28 сентября — 4 октября 2020)

Время на прочтение2 мин
Количество просмотров8.4K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать дальше →

Вы не знаете как должны работать модальные окна

Время на прочтение10 мин
Количество просмотров28K

Уверен, многие хоть раз создавали всплывающее модальное окно. Но задумывались ли вы об определении этого компонента? Как он должен работать?


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


Я покажу, как просто создавать сложные, удобные, производительные и доступные модальные окна независимо от браузера, платформы, устройства или способа взаимодействия пользователя.


Этот список сформирован на основе спецификаций WAI-ARIA, HTML Living Standard и моего личного опыта. И хотя я буду говорить про веб, большинство правил и рекомендаций применимы для модальных окон где угодно.

Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №434 (21 — 27 сентября 2020)

Время на прочтение3 мин
Количество просмотров8.6K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №433 (14 — 20 сентября 2020)

Время на прочтение3 мин
Количество просмотров10K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать дальше →

Делаем модальные окна для сайта. Заботимся об удобстве и доступности

Время на прочтение16 мин
Количество просмотров209K

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


Вёрстка таких окон сначала кажется простой задачей. Модальные окна можно сделать даже без помощи JS только лишь с помощью CSS, но на практике они оказываются неудобными, и из-за маленьких недочетов модальные окна раздражают посетителей сайта.


В итоге было задумано сделать собственное простое решение.


Читать дальше →

HTML и CSS ошибки, которые я встречаю как человек без ограничений по здоровью

Время на прочтение3 мин
Количество просмотров22K

Сейчас много шума по поводу доступности интерфейсов. Здорово, что люди обращают на это внимание и начинают разрабатывать интерфейсы, которыми могут пользоваться люди с какими-то ограничениями.


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

Читать дальше →