Jem Space

Дебажим мобильное веб приложение на Android-смартфоне

Иногда бывает нужно подебажить веб приложение прямо на телефоне для чистоты эксперимента. Google Chrome позволяет подключить смартфон и запустить отладку по USB. Вот пошаговый туториал как это сделать. Для начала скачаем и установим adb (Android Debug Bridge). adb входит в состав platform-tools. Скачать и установить его можно по ссылке (либо

Бекапим важные данные

Привет! Вынужден обновить систему на своем vps c Ubuntu 18 на 20. При обновлении по идее все данные должны остаться, по крайней мере в /home директории. Но гарантий, что данные баз данных Mongo и MYSQL, а также данные volume docker контейнеров не будут затронуты - нет. Поэтому решил забекапить то,

devops

Деплоим приложение с Dokku

Часто хочется иметь налаженный процесс деплоя для своих пет-проектов. С какими-то серьезными инструментами типа Jenkins заморачиваться не хочется. Есть альтернативы: Github Actions | rsync | Dokku. В этой статье расскажу немного про Dokku, о том как настроить и задеплоить свое первое приложение на примере Telegram бота @ytb_cover_bot, который скачивает для

web

Обновление TLS сертификатов

Или почему я не любил работать с certbot. По своей натуре, я человек очень торопливый. Если можно что-то сделать быстро и не вникая в суть (по какому нибудь туториалу например), то я только рад. Сделал и забыл и желательно не думать что когда то придется это делать опять. Однако, часто

code art

Generative art. Sticks

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

Разработка Telegram бота на NodeJs + Telegraf.js

Разработка ботов тема не новая и затертая до дыр. В сети полно туториалов как сделать простого Телеграм-бота или не простого, и каждый спикер предлагает какой-то свой подход. Ведь, действительно, один и тот же функционал можно реализовать по-разному. И, к сожалению, каких-то best practices по разработке ботов я не нашел, а

mongo

Работа с MongoDB. Заметки на полях

Привет. Как фронт разработчик, я никогда особо плотно не работал с БД. Конечно были какие то пет проекты на NodeJS с использованием sqlite и даже монги, но все это было на скорую руку. Пришло время кое-что зафиксировать. Установка Можно поставить монгу в систему 1 - как пакет, 2 - можно

DIY

Кастомизируем Fender Stratocaster

Привет! Очень хотел иметь в арсенале своих гитар Stratocaster, пусть даже и Squier. Нашел на авито не особо дорогой (13к), послушал и взял. Но как только привез его домой, понял что мне не особо нравится его цвет. И решил я, что можно его ошкурить и оставить натуральный цвет дерева, да

DIY

Makelangelo плоттер на плате от 3д принтера

Привет! Вот уже несколько лет я увлекаюсь рисунками на ЧПУ. Есть несколько устройств, при помощи которых я рисую. Одно из них - настенный плоттер на базе Ардуино под названием Polargraph. На нем я практиковался в рисунках больших размеров. У проекта есть софт для подготовки рисунка и управления процессом рисования, и

Arduino

Делаем timelapse слайдер для камеры

Всем привет! 7 лет назад, будучи молодым юнцом, которому всё казалось по плечу, я пообещал своему другу сделать таймлапс слайдер. Для тех, кто не знает, что такое таймлапс и слайдер, велкам по ссылкам. Если кратко — это девайс, на который можно поставить камеру, и она будет делать серию снимков (или видео

front-end

Popit для бедных или жонглируем событиями

Hello friend! Не так давно стала популярной новая релакс игрушка и я решил попробовать запилить ее аналог для веба. Хотелось бы, чтобы она была более менее реалистичной внешне и по фичам тоже не отставала. В этой статье я немного расскажу о том, как я работал с событиями,о некоторых ограничениях

front-end

Пишем сайт/PWA и выкатываем в прод с Github Actions

Привет! Хочу сохранить для себя некоторые аспекты разработки простенького одностраничного web приложения с функционалом PWA, а также нюансы его деплоя. Опишу некоторые проблемы с которыми я столкнулся, и их решения. Речь пойдет о сервисе nosins.ru. Сервис позволяет получить индульгенцию - сертификат об отпущении грехов (не имеет юридической силы, если

DIY

Чиним Digitech Whammy 4

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

web

Типографика для web

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

web

Что каждый разработчик должен знать о https

Дабы не забыть то, что прошел на pluralsight, зафиксирую основные моменты в статье (сразу извиняюсь за орфографию, пишу наскоро). HyperText Transfer Protocol Secure — расширение протокола HTTP для поддержки шифрования в целях повышения безопасности. Данные в протоколе HTTPS передаются поверх криптографических протоколов TLS или устаревшего в 2015 году SSL. В отличие

web

Продвинутые Git команды из курса (часть 2)

Поиск по истории Доступность комитов Dot Dot notation показывает комиты которые доступны из одой ветки, но не доступны из другой git log feature..master Dot Dot Dot notation показывает комиты которые доступны для каждой из веток, но не для обоих сразу (зачем это может быть нужно узнаете позже) git log

web

Продвинутые Git команды из курса (часть 3)

Изменение истории Изменение сообщения комита (а также и изменений) с помощью команды amend git commit --amend -C HEAD -C - оставить прошлое сообщение HEAD - оставить сообщение из HEAD комит Удаление нескольких комитов, которые не нужны git reset --hard HEAD~2 —hard полностью удаляет все изменения и приводит состояние к

web

Продвинутые Git команды из курса (часть 1)

По мере прохождения курсов по Git решил зафиксировать основные моменты, чтобы можно было обратиться и освежить знания (сразу извиняюсь за орфографию, пишу наскоро). Собрал немного общих команд из одного курса и структурировал лекции из другого. Чтобы поиграться с git и посмотреть как визуализируются ваши действия можно тут: https://git-school.github.

web

Делаем домашний сервер из старого железа

Пару лет назад, я начал делать свои проекты, которые требуют постоянно работающего хостинга. По совету друга начал использовать для этих целей дешевые и удобные vps от digital ocean. За 5$ вы получается 1GB RAM, 20GB SSD и 99% uptime. Со временем число проектов росло и требовалось все больше ресурсов. Я

web

Современные тренды и непростительные ошибки в веб-дизайне

Довольно часто писать сайт с нуля нет времени (а часто и желания), особенно если цель - запилить что-то работающее в короткие сроки. Несмотря на то, что сам пишу на React, пару раз мне приходилось прибегать к быстрым решениям на Wordpress. Шаблоны для сайта - это отличная возможность получить сайт, в

generative_art

Как я погружался в digital art

Как любитель всякого DIY, у меня постоянно зудела идея "А не сделать бы мне что-то эдакое?". Эдакого в интернете навалом, выбирай - не хочу. Одним из главных критериев было чтобы это эдакое каким-то образом преобразовывало информацию поступающую на вход и выдавало какой-то результат, который ты сам врядли бы

web

Кодер. Стандартный CSS3

Что вообще за CSS3? Чем он отличается от CSS2. То, чем мы давно привыкли пользоваться для стилизации приложений было не всегда. Что нового принёсла 3 версия CSS? Пробежимся по фичам. Отметим, что стандарт CSS3 предполагает разделение СSS на модули. Новые фичи - это отдельные модули. Селекторы Селекторы аттрибутов: element[foo^

web

Матрица компетентности

Прокачиваем скилы по матрице от Ильи Климова. Статья будет дополняться по мере накопления материала. Матрица разбита на стадии: Кодер, Программист, Инженер, Гуру. Так пойдем же по порядку. Кодер Кодер. Владеет современной версткой и наиболее распространенными API Кодер. Стандартный CSS3 PS: если у вас есть ссылки на хорошие ресурсы по темам,

web

Кодер. Владеет современной версткой и наиболее распространенными API

Верстка Что можно понимать под современной версткой? В 2к19 я бы отнес flexbox и grid. Большинство браузеров уже умеет в flexbox, и кодеры постепенно начинают его юзать все больше и больше. Но это скорее верхушка айсберга. Не будем забывать про базовые вещи: знание тегов и аттрибутов HTML, блочная верстка, семантический

web

12 хитростей JavaScript, которых вы не найдете в большинстве уроков

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