Barba.js — это небольшая JavaScript бибилиотека, с помощью которой можно сделать плавные переходы между страницами. Библиотека уменьшает задержку между переходами, минимизирует HTTP-запросы и улучшает UX.

Демо | GitHub

#js #tools

Backend разработка на JavaScript

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

Читать статью

#js #article #backend

Сделайте страницу простой для сканирования глазами

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

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

Выделите и/или добавьте важные элементы, например, кнопки или меню входа в систему.

#tips #design #ux

Во время разработки на OSX часто можно перепутать строчные и заглавные буквы в пути при импорте модуля. На маке сборка соберется, но на других чувствительных к регистру системах она упадет. Если хотите избавиться от этой проблемы, нужно поставить case-sensitive-paths-webpack-plugin.

Теперь при импортировании модуля с неправильным регистром вы всегда будете получать ошибку.

NPM | GitHub

#npm #tools

Минимизируйте количество вариантов выбора

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

#tips #design #ux

Microsoft выпустила бета-версию Edge на базе Chromium

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

Скачать бета-версию можно здесь.

#news #browsers

Что такое объектная модель документа и зачем она нужна

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

Читать статью

#article #web

Относитесь к содержимому сайта серьёзно

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

Практические советы:

- Текст должен быть релевантным и полезным, иначе у вас будет меньше посещений.
- Не используйте жаргон. Информация должна подаваться в простой форме, чтобы пользователи разного уровня могли правильно прочитать и понять её.

#tips #design #ux

Бесплатный PSD макет лендинга приложения

Скачать

#psd

Ведите пользователя вниз по странице

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

#tips #design #ux

Open in Browser — это расширение для VS Code благодаря которому, через контекстное меню, можно открыть страницу в браузере, заданном по умолчанию, или в каком-нибудь другом браузере, установленном в системе.

VS Code Marketplace | GitHub

#vscode #tools

Руководство по обработке ошибок в JavaScript

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

Читать статью

#js #article #errors

Spotlight — это JavaScript галерея, которую невероятно легко добавить на свою веб-страницу. Она работает из коробки, вам не придется писать дополнительный JS/HTML/CSS код. Маленький размер и отсутствие зависимостей делает эту галерею лучшей в своем классе.

Демо | GitHub

#js #gallery

Называйте кнопки в соответствии с их функциями

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

#tips #design #ux

Scene.js — это JavaScript библиотека анимаций с множеством крутых функций. Её можно использовать с помощью JS и CSS, она поддерживает SVG и имеет много классных пресетов прямо из коробки.

Демо | GitHub

#js #animation

Почему не стоит использовать LocalStorage

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

Читать статью

#article #js #storage

В больших проектах, состоящих из нескольких сотен файлов, сборка может занимать до нескольких минут. Замерить каждый шаг сборки и найти проблемы поможет speed-measure-webpack-plugin.

В выводе сборки добавится информация об общем времени сборки, времени выполнения каждого плагина и каждой цепочки лоадеров.

NPM | GitHub

#npm #webpack

Moveable — это крутая бибилиотека, которая берет HTML элемент и придает ему свойство "свободной трансформации", делая возможным взять элемент мышью, изменить размер, форму, ориентацию и позицию. Рекомендую посмотреть демо.

Демо | GitHub

#js #html #transform

Как делать меньше ошибок в коде?

Избегая ошибки в коде, вы повышаете эффективность работы, успеваете делать больше за тот же промежуток времени. Мы расскажем некоторые советы, позволяющие избегать ошибок в коде.

Читать статью

#tips #programming