visSense.js — видимость DOM-элемента

Как часто вам надо было узнать находится ли DOM-элемент в поле зрения пользователя? Может быть пользователь уже проскроллил его или элемент закрывает выпадающее меню?

VisSense.js javascript библиотека, позволяющая наблюдать за видимостью DOM-элементов. Библиотека знает, не только когда элемент полностью скрыт или полностью видим, но даже, когда он частично скрыт — показывает на сколько процентов он видим.

Далее

sloc — метрика исходного кода

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

Далее

Онлайн-редакторы с поддержкой синтаксиса markdown

markdown

Markdown крут, тем что прост. Это самый простой язык разметки, который сейчас существует. Поэтому он внедрен на многих популярных сайтах и сервисах, например, Stackoverflow, Github, Jira. Собственно, поэтому я часто, по инерции, размечаю свой обычный текст в markdown. И как правило, если я пишу какой-то большой текст, я подготавливаю его, либо в Sublimetext, либо в онлайн сервисе, который умеет на лету рендерить разметку markdown.

Далее

Отладка скриптов в Chrome Debug

console-log-pre

Какая конструкция в скрипте самая популярная на этапе его написания и отладки? Правильно — console.log(). Во время отладки часто приходится заглядывать в консоль. Все хотят посмотреть на свои переменные в динамике, но не всем нравится замусоренный «консоль-логами» код. Chrome предоставляет разработчику инструменты для отладки, в частности, точки остановок — breakpoint. Иногда это очень удобно.

Далее

Аудиоплееры для сайта

audioplayer-pre

Ещё недавно единственным способом воспроизведения звука на сайте был Flash. Иногда Flash заставлял наши ноутбуки издавать шум взлетающего самолёта. Но с появлением HTML5 у нас появился тег audio и это в корне поменяло ситуацию, разработчики научились управлять звуковым потоком средствами браузера.

Далее

8 способов сверстать иконку-гамбургер

icon-hamb-pre

Эта иконка везде — в приложениях, в мобильных и десктопных версиях сайтов, в интерфейсах браузеров. Если вы сейчас в Хроме, то взгляните в правый верхний угол :). Даже если вы не знали, что её называют «гамбургером», то эти три полоски всё равно знакомы вам также, как курсор мышки. Помимо того, что эту иконку можно просто нарисовать в фотошопе, современный фронт-энд предоставляет нам множество других «нерастровых» способов её сверстать.

Далее

Как удалить белый фон в Фотошопе

photoshop-ava

Вообще фотошоп придуман для фотографий, но давным-давно он плотно и по уши залез в веб, так что теперь уже не вытащить. Наверное, больше 90% макетов подаются верстальщику в нём. Чтобы далеко не уходить, кейс такой:

Далее

Наверх