Рубрика: Технологии Web‑разработки

50 лучших JavaScript плагинов и библиотек из 2016 года

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

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

Приступим.
Читать далее «50 лучших JavaScript плагинов и библиотек из 2016 года»

Веб-хостинг: полезные советы

  Статья «Администрирование → Веб-хостинг: полезные советы» на Хабре, которую можно вполне использовать в качестве лекции о подборе хостинга для своих электронных дневников

Хостинг как вид услуг развивался вместе с Web и всегда был наиболее широко востребован именно для размещения веб-сайтов в ЦОД провайдеров.

Появившаяся позднее технология виртуализации привлекла внимание поставщиков услуг хостинга, поскольку оказалась подходящим средством для максимального использования имеющихся физических ресурсов.
Читать далее «Веб-хостинг: полезные советы»

Рецепты наложения текста на изображения

Я с огромным наслаждением читаю статью Эрика Д. Кеннеди (Erik D. Kennedy) 7 Rules for Creating Gorgeous UI (Part 2). Четвёртое правило в ней гласит: Learn the methods of overlaying text on images — Изучите методы наложения текста на изображениях. Думаю, что здесь можно было бы детальнее обсудить эту тему, рассмотреть вопросы кодирования и обратить внимание на технику.
Читать далее «Рецепты наложения текста на изображения»

Свежие приёмы и методы CSS3

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

ВНИМАНИЕ: некоторые методы, описанные в этой заметке, пока ещё считаются экспериментальными и требуют проверки на совместимость в разных браузерах перед использованием в рабочих проектах.
Читать далее «Свежие приёмы и методы CSS3»

Требования к html-верстке

1. Верстка, аутсорсинг и технические задания

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

Так сложилось, что мне часто приходилось отдавать эту работу субподрядчикам и, несмотря на предполагаемую однозначность результата, иногда верстальщики меня очень удивляли. Причем чаще — в негативном смысле.
Читать далее «Требования к html-верстке»

Формальные критерии оценки качества вёрстки

Базовые критерии:

  1. Выполнена HTML-разметка всех страниц и всех элементов на страницах.
  2. Один стилевой файл на все страницы (с учётом normalize.css можно два).
  3. Вёрстка идентично отображается в последних версиях браузеров Chrome, Opera, Firefox, Safari, а также в Internet Explorer 10+.
  4. Сайт должен нормально смотреться на минимальном для данного макета разрешении:
    • При большем размере экрана макет должен оставаться по центру и не иметь горизонтального скролла.
    • На разрешениях экрана меньше ширины контейнера вёрстка не должна менять свою структуру.
  5. В корне документа должны быть папки css, img, js или аналогичные. Главная страница имеет название index.html. В названиях и расширениях файлов нет заглавных букв и пробелов.
  6. Единообразное написание и форматирование кода в HTML, CSS и JavaScript.
  7. Грубые ошибки в разметке отсутствуют. Например:
    • Ссылки сделаны не тегом < a >, а другими тегами.
    • Использование строчных элементов для создания крупных (сеточных) блоков.
    • Абзацы должны быть абзацами, а не < br >< br >
  8. Нельзя строить сетку с помощью таблиц и позиционирования.
  9. Нельзя использовать !important в CSS.
  10. При наполнении контентом как на макете элементы каждой страницы должны соответствовать макету:
    • Допускаются различия в 5 пикселей по высоте и 2 пикселя по ширине.
    • Допускаются отсутствия стилизации кастомных элементов форм.
    • Допускаются различия в отображении шрифтов, связанные со сглаживанием на различных платформах.
    • Должны быть подключены правильные шрифты, а их размеры и толщина должны соответствовать размерам в макетах и ТЗ.
  11. Выбран правильный формат изображений:
    • JPEG для фотографий.
    • Всё остальное в PNG.
  12. Документ должен проходить проверку на валидность validator.w3.org

Читать далее «Формальные критерии оценки качества вёрстки»

Вставка Data-URI изображений

Довольно часто возникает необходимость «спрятать» свои оригинальные картинки, загруженные на сервер. Тогда использовать традиционный способ вставки изображения (с помощью HTML, например) не рекомендуется, но можно применить технику кодирования с помощью base64 (а если ещё дополнить её gzip-ом, то получается «полный фарш»). Результат кодировки подставляется всё в тот же src. Кроме того, это полезно для каких-то лендингов, когда, по идее, картинки должны подгружаться сразу и целиком, а не по частям. Это уменьшает количество запросов к серверу и скрывает пути к изображениям, чего никак не скажешь о традиционном способе вставки.
Читать далее «Вставка Data-URI изображений»