webjourn • Веб-разработка

Продолжаю делиться своими наработками. Итак, допустим у нас на сайте есть видео-галерея, но видео хранятся в YouTube (что и логично, зачем тратить драгоценное место на хостинге). Вырезать самостоятельно кадр из видео и грузить его отдельным файлом? Ну слишком муторно. Немного пыхи и проблема решена. 1. Получаем ID видео Эта функция проглатывает ссылку на видео в совершенно любом формате, переваривает её при помощи специальной обученной регулярки и выплевывает нам ID этого видео. Да, чтобы получить ссылку на превью нам важно знать ID, сейчас расскажу почему...

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

Уже давно все иконки на сайте используют в SVG формате. Это современно, адаптивно и удобно. Но что делать если svg иконок много? Как использовать спрайты на примере обычных растровых изображений мы уже знаем. Просто соединяем много иконок в одну картинку и выбираем нужный участок картинки через background-position. В случае с SVG самым быстрым способом будет воспользоваться этим сервисом. Создание SVG спрайта 1. Итак, заходим на SVG Sprit 2. Перетаскиваем нужные SVG иконки прям на страницу 3. Получаем...

Это пост о насущном. Почти каждый день сталкиваюсь с версткой других верстальщиков, иногда детский плевок в ладошку выглядит симпатичней. Не буду долго тянуть, начнем. 1. Ненадежная верстка Хорошо, ты отверстал картинку новости размером 300х300px. Но кто остановит клиента загрузить туда картинку размером 50x4700px? А он загрузит, не сомневайся. И да, твоя верстка полетит. Нужно предусматривать все максимально возможные варианты изменения контента сайта, будь то блок с текстом, блок с картинкой....

Исторически сложилось, что разные люди называют эти самые всплывашки абсолютно по-разному. Pop-up, модальные окна и до кучи AJAX-окна. Но, предлагаю определится. То что мы сейчас будем делать - называется модальное окно. Pop-up - история про другое, это больше в сторону порно-баннеров. Если разобраться, то и AJAX вообще не про это, аякс вообще отдельно живущая технология, которая не имеет никакого отношения к нашим всплывашкам (практически никакого). Так вот, как и со слайдерами, для создания модальных окон есть дохрена различных JS-библиотек...

Сегодня познакомлю с интересной библиотекой maskedinput.js. Если посмотреть на гите, то можно заметить - библиотека не из свежих, но достойных альтернатив маловато. Сам файл плагина весит всего 4кб, подрубается всего 1 строкой JS кода, а зато сколько всего умеет. Сейчас все расскажу. Устанавливаем 📎Качаем модуль с Гугл диска или с GitHub. 🪓Подрубаем его перед </body> : Не забудьте подключить jQuery! p.s. дико неудобно что на дзене нет поддержки кода, приходится все заливать на gist 😕 Используем 🪓Вставляем в файл скриптов, либо в HTML сайта через <script>...

Второй пост будет про кастомизацию обычного чекбокса на CSS. Без JS, изображений и прочего говна. Простой и лаконичный код. Будет использоваться label, в который вложены: input, span и текст. Наш span и будет имитировать сам чекбокс, в то время как псевдоэлемент :after будет имитировать галочку чекбокса...

Самый элементарный способ вычислить определить город посетителя сайта по IP - воспользоваться каким то готовым API. Sypex Geo как раз предоставляет такую возможность. Сразу немного инфы по количеству запросов: Про платную подписку даже писать не буду, потому как такого количества с головой хватит большинству корпоративных сайтиков. Итак, все что нам нужно - это закинуть им запрос...