Рубрика «Разработка веб-сайтов» - 100

в 12:00, , рубрики: accessibility, acessibility, css, drag and drop, frontendconf, javascript, Блог компании Конференции Олега Бунина (Онтико), доступность, Разработка веб-сайтов

Что объединяет Trello, Gmail, Aviasales и Google Keep? В каждом из них есть Drag-&-Drop-компоненты, которые можно перетаскивать мышкой. Использование этих компонентов делает сайты по-настоящему удобными, потому что в реальной жизни мы часто используем этот паттерн. Передвигать вещи для нас естественно, поэтому и в вебе мы хотим перемещать элементы по экрану с одного места на другое, как стикеры на доске или магнитики на холодильнике. Сортировка todo-списков, организация дашбордов, загрузка файлов — мы просто не можем себе представить все эти события без перетаскивания элементов на странице.

Drag-&-Drop компоненты для слепых пользователей? Вы шутите? - 1

Но есть нюанс. Когда мы разрабатываем такие компоненты, то думаем, что наши пользователи физически видят экран и элементы, могут зацепиться за них мышкой и перетащить.Часто так и есть, но мы забываем о сегменте пользователей с проблемами зрения. Мы создаем компоненты, которыми невозможно пользоваться большой группе людей, которая просто их не видит. Как сделать так, чтобы им тоже были доступны Drag-&-Drop-компоненты?

Сергей Кригер — фронтенд-разработчик в компании SinnerSchrader. Кроме фронтенд-разработки, активно интересуется темой веб-доступности и расскажет о некоторых способах ее повышения. Под катом — рассказ о создании Drag-&-Drop-компонентов для тех, кто не видит экран и пользуется другими устройствами для взаимодействия с браузером.
Читать полностью »

в 10:00, , рубрики: css, html, javascript, Блог компании RUVDS.com, браузеры, разработка, Разработка веб-сайтов

image Скроллбар (scrollbar, полоса прокрутки) — это простой, но эффективный механизм, который действует как основное средство, с помощью которого можно просматривать большие документы. Но это — далеко не всё, на что способны полосы прокрутки! Эти скромные рабочие лошадки ещё и неплохо подсказывают пользователям о том, каковы размеры документов, с которыми они взаимодействуют. В результате скроллбары несут на себе двойную нагрузку. Они и помогают работать с различными материалами, и информируют пользователя о размерах этих материалов.

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

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

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

Материал, перевод которого мы публикуем сегодня, посвящён некоторым особенностям использования скроллбаров в веб-приложениях.
Читать полностью »

в 9:40, , рубрики: javascript, jquery, Блог компании Mail.Ru Group, никто не читает теги, Разработка веб-сайтов
История и наследие jQuery - 1

jQuery — это самая популярная в мире JavaScript-библиотека. Сообщество веб-разработчиков создало её в конце 2000-х, что привело к возникновению богатой экосистемы сайтов, плагинов и фреймворков, использующих под капотом jQuery.

Но в последние годы её статус главного инструмента для веб-разработки пошатнулся. Давайте посмотрим, почему jQuery стала популярной и почему она вышла из моды, а также в каких случаях её пока ещё целесообразно использовать для создания современных сайтов.
Читать полностью »

в 9:30, , рубрики: javascript, Блог компании RUVDS.com, разработка, Разработка веб-сайтов, Серверная оптимизация, Социальные сети и сообщества

В последние годы на instagram.com появилось много нового. Очень много. Например — средства создания историй, фильтры, творческие инструменты, уведомления, прямые сообщения. Однако по мере роста проекта всё это дало один печальный побочный эффект, который заключался в том, что производительность instagram.com начала падать. В течение прошлого года команда разработчиков Instagram прилагала постоянные усилия к тому, чтобы это исправить. Это привело к тому, что общее время загрузки ленты Instagram (feed page) снизилось почти на 50%.

Ускорение instagram.com. Часть 1 - 1

Сегодня мы публикуем перевод первого материала из серии статей, посвящённых рассказу о том, как ускоряли instagram.com.
Читать полностью »

в 5:03, , рубрики: Apache, laragon, mysql, php, wamp, windows, Разработка веб-сайтов, разработка под windows, сервер для windows, Серверное администрирование

Даже странно, что про Laragon нет ни единой публикации на Хабре. Хочу очень кратко восполнить этот пробел, ибо данный инструмент вполне заслуживает популярности среди целевой аудитории веб-разработчиков, кодящих под Windows.

Laragon

Laragon — это простой и компактный WAMP (Apache + MySQL + PHP под Windows) во многом сродни своим более известным аналогам, вроде XAMPP, OpenServer, Denwer etc. Но, со своей маленькой изюминкой:

Когда вы создаете папку your-test-project в каталоге <laragon_root>www, то содержимое этой папки автоматически становится доступно из браузера по адресу http://your-test-project.test причем, шаблон, по которому именуются домены, также настраиваемый.
Читать полностью »

в 20:20, , рубрики: angular, css, ember, ES6, html, html5, javascript, JS, React, vue, браузеры, дайджест, подкасты, Разработка веб-сайтов, ссылки, фронтенд

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Дайджест свежих материалов из мира фронтенда за последнюю неделю №381 (16 — 22 сентября 2019) - 1

Читать полностью »

в 13:21, , рубрики: css, html, layout, markup, верстка, Разработка веб-сайтов

Gap — светлое будущее для отступов в Flexbox (как в Grid) - 1

Одна из моих любимых частей спецификации CSS Grid — это grid-gap. Они позволяют легко создавать отступы между элементами внутри сетки.

Margins и приёмы, к которым мы прибегаем, чтобы реализовать их в разных ситуациях, долгое время были одним из главных моментов, раздражающих меня в CSS.

W3C порекомендовала отказаться от свойства grid-gap в пользу простого gap и его использования в Flexbox и Multi-Column.

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

в 18:52, , рубрики: javascript, slider, Разработка веб-сайтов, слайдер изображений

Автор уже опубликовал скрипт карусели, который также использует только CSS и Javascript. Теперь давайте рассмотрим скрипт слайдера. Он отличается от карусели тем, что одновременно виден только один элемент, а не несколько, и элементы не прокручиваются, а медленно замещаются одно другим. И ещё. В данном слайдере в качестве элементов используются только изображения (слайды), поэтому и называется он простой слайдер изображений.

Навигация осуществляется стрелками “Следующий элемент” или “Предыдущий элемент” и индикаторными точками. Стрелки и точки можно отключить в настройках скрипта. Элементы могут быть показаны с остановкой на первом и последнем элементе или в цикле, когда за последним элементом вновь следует первый. Можно включить автоматический просмотр (пролистывание) элементов, длительность просмотра (интервал между переключениями) регулируется. При наведении мыши на элемент пролистывание прекращается.
Читать полностью »

в 10:47, , рубрики: frontend-разработка, блоги, Программирование, Разработка веб-сайтов

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

Англоязычные блоги

Новостные ленты и тематические аккаунты

  • Smashing Magazine — онлайн-журнал для профессионалов веб-дизайна и разработки.
  • CSS-Tricks — официальный аккаунт ресурса CSS-Tricks.com, объединяющего веб-дизайнеров.
  • CSS {IRL} — советы, лайфхаки, хитрости и ссылки на тему CSS.
  • Web Platform News — ежедневные новости веб-разработки с одноименного ресурса.
  • A Book Apart — издательство книг на темы адаптивного веб-дизайна, Git и JavaScript, контент-стратегии, принципов дизайна, публичных выступлений и многого другого.

imageЧитать полностью »

в 9:30, , рубрики: javascript, React, ReactJS, V8, Блог компании RUVDS.com, разработка, Разработка веб-сайтов

Сегодня мы публикуем вторую часть перевода материала, посвящённого внутренним механизмам V8 и расследованию проблемы с производительностью React.

История о V8, React и падении производительности. Часть 2 - 1

→ Первая часть
Читать полностью »

1...1020...99100101...110120...347
Главная   |  Архив новостей  |   Android  |   Google  |   Apple  |   Microsoft  |   Информационная безопасность  |   Веб – разработка
Публикации RSS  |  Комментарии RSS
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js