Pull to refresh
0
0
F-A-M-E @DEbuger

Пользователь

Send message

Веб-разработка с нуля: руководство для молодых команд по созданию инфраструктуры CI/CD и процесса разработки

Reading time 12 min
Views 32K

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


  • Проверка каждой ветки проходила локально. Приходилось откатывать базу от изменений с предыдущей проверки, билдить фронт. Когда несколько разработчиков вот-вот закончат работы и осталось проверить каждую по мелочи — это превращалось в ад;
  • Различались окружения на проде и между разработчиками, что приводило к ошибкам: “у меня всё работает”.

Внутренний перфекционист жаждал организовать всё правильно. Делюсь результатами поисков ответа на вопрос: «а как, собственно, “правильно”»?


Мы добились


  • Легкого и быстрого деплоя в production (ради эксперимента выводили каждый день две недели подряд);
  • Гарантию защищённости от ошибок из-за различий в окружении приложения;
  • Можем организовать эффективное взаимодействие с заказчиком:
    • демонстрировать каждую feature-ветку;
    • давать гостевой доступ для создания задач и наблюдения над ходом работ.

Данная статья будет полезна, если вы:


  • начинающая IT-компания или в первый раз столкнулись с работой в команде над большим проектом;
  • хотите обновить свой устаревший процесс разработки (workflow);
  • ищете лучшие практики и хотите посмотреть, как у других;
  • часто натыкаетесь на статьи про DevOps, CI/CD, облака и хотите, чтобы у вас одним нажатием кнопки создавались тестовые окружения, а очередное обновление прода не было рулеткой.

Под катом вы найдёте


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

Читать дальше →
Total votes 30: ↑29 and ↓1 +28
Comments 48

Используем tcpdump для анализа и перехвата сетевого трафика

Reading time 7 min
Views 205K


Утилита tcpdump — отличный инструмент командной, который способен перехватывать и анализировать сетевой трафик. Может оказаться большим подспорьем при решении сетевых проблем. Пакеты можно сохранить в файл и анализировать позже. Рекомендуется время от времени запускать эту утилиту, чтобы следить за своей сетью.


Содержание:


  • Вывод tcpdump
  • Установка tcpdump
  • Опции tcpdump
  • Фильтры tcpdump:
    • Фильтр выражений
    • Фильтр портов
    • Фильтр хостов
    • Комбинирование фильтров
  • Сохранение заголовков в файл
  • Просмотр сведений о пакете
  • Вывод

Вывод tcpdump


Утилита tcpdump позволяет проверять заголовки пакетов TCP/IP и выводить одну строку для каждого из пакетов. Она будет делать это до тех пор, пока не нажать Ctrl + C.


Давайте рассмотрим одну строку из примера вывода:


20:58:26.765637 IP 10.0.0.50.80 > 10.0.0.1.53181: Flags [F.], seq 1, ack 2, win 453, options [nop,nop,TS val 3822939 ecr 249100129], length 0

Каждая строка включает:


  • Метка времени Unix (20: 58: 26.765637)
  • протокол (IP)
  • имя или IP-адрес исходного хоста и номер порта (10.0.0.50.80)
  • имя хоста или IP-адрес назначения и номер порта (10.0.0.1.53181)
  • Флаги TCP (Flags [F.]). Указывают на состояние соединения и могут содержать более одного значения:
    • o S — SYN. Первый шаг в установлении соединения
    • F — FIN. Прекращение соединения
    • — ACK. Пакет подтверждения принят успешно
    • P — PUSH. Указывает получателю обрабатывать пакеты вместо их буферизации
    • R — RST. Связь прервалась
  • Порядковый номер данных в пакете. (seq 1)
  • Номер подтверждения. (ack 2)
  • Размер окна (win 453). Количество байтов, доступных в приемном буфере. Далее следуют параметры TCP
  • Длина полезной нагрузки данных. (length 0)
Читать дальше →
Total votes 9: ↑7 and ↓2 +5
Comments 5

Ресайз изображений на лету с помощью Nginx и LuaJIT (OpenResty)

Reading time 3 min
Views 6.5K

Уже довольно давно, вдохновившись статьей Ресайз изображений на лету был настроен ресайз изображений с помощью ngx_http_image_filter_module и все работало как надо. Но появилась одна проблема, когда менеджеру понадобилось получать изображения с точными размерами для заливки на некоторые сервисы, т.к. это были их технические требования. К примеру, если мы имеем оригинал изображения размером 1200x1200, и при ресайзе мы пишем что-то вроде ?resize=600x400, то получим пропорционально уменьшенное изображение по наименьшему краю, размером 400x400. Так же невозможно получить изображение с бОльшим разрешением (upscale). Т.е. ?resize=1500x1500 вернет все тоже изображение 1200x1200


На помощь пришла статья OpenResty: превращаем NGINX в полноценный сервер приложений для понимания как работает Nginx с Lua и сама библиотека для Lua isage/lua-imagick — Lua pure-c bindings to ImageMagick. Почему было выбрано такое решение, а не, скажем, что-нибудь на python — потому что это быстро и удобно. Вам даже не понадобится создавать никаких файлов, все прямо в конфиге Nginx (не обязательно).

Читать дальше →
Total votes 7: ↑7 and ↓0 +7
Comments 21

PHP и регулярные выражения: азы для новичков

Reading time 9 min
Views 119K
В преддверии старта нового потока по курсу «Backend-разработчик на PHP», а также смежного с ним курса «Framework Laravel», хотим поделиться статьей, которую подготовил наш внештатный автор.

Внимание! данная статья не имеет отношения к программе курса и будет полезна только для новичков. Для получения более углубленных знаний приглашаем вас посетить бесплатный двухдневный онлайн интенсив по теме: «Создание Telegram-бота для заказа кофе в заведении и оплаты онлайн». Второй день интенсива будет проходить тут.




Всем привет! Всех с наступившим [20]{2,}0 годом. Сегодня я хочу затронуть тему, которая иногда является темой для шуток от «Да зачем тебе все это учить, если есть уже есть готовые решения» до «может тебе еще и весь Perl выучить?». Однако время идет, множество программистов начинают осваивать регулярные выражения, а на Хабре нет ни одной свежей (хоть регулярные выражения не слишком изменились за последнее время) статьи на этой тематику. Пришло время написать ещё одну!
Читать дальше →
Total votes 23: ↑21 and ↓2 +19
Comments 9

Проектирование интернет-магазина для SEO: (теория + чеклист)

Reading time 8 min
Views 17K
Что стоит учесть при проектировании интернет-магазина, чтобы не пришлось переделывать пол сайта для начала продвижения.

Статья разбита на две части.
Теория: о том, что в принципе можно учесть в SEO интернет-магазина и как это работает.
Чек-лист: 80 пунктов, по которым легко проверить, насколько удобно будет продвигать ваш сайт после разработки

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

Читать дальше →
Total votes 22: ↑18 and ↓4 +14
Comments 58

Quasar 1.0: новый полезный инструмент для Vue-разработчиков и не только для них

Reading time 6 min
Views 25K
Автор материала, перевод которого мы публикуем сегодня, занимается работой над фреймворком Quasar. Это — полнофункциональный расширяемый опенсорсный инструмент для разработки современных приложений различного назначения. Он построен на базе популярного фронтенд-фреймворка Vue.js и использует возможности Node.js, Webpack и Babel. Совсем недавно, в начале июля сего года, вышел первый стабильный релиз Quasar.

Читать дальше →
Total votes 31: ↑30 and ↓1 +29
Comments 18

HTTP-заголовки для ответственного разработчика

Reading time 15 min
Views 99K

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

Разработчики соединяют людей.
Разработчики помогают людям.
Разработчики дают людям возможности.

Разработчики могут создать сеть для всех, но эту способность необходимо использовать ответственно. В конце концов, важно создавать вещи, которые помогают людям и расширяют их возможности. В этой статье я хочу рассказать о том, как HTTP-заголовки могут помочь вам создавать лучшие продукты для лучшей работы всех пользователей в интернете.
Читать дальше →
Total votes 92: ↑90 and ↓2 +88
Comments 64

Как сделать из сайта приложение и выложить его в Google Play за несколько часов. Часть 1/2: Progressive Web App

Reading time 8 min
Views 96K


Наверное, все близкие к веб-разработке люди уже наслышаны о Progressive Web App. Ещё бы! Эта технология практически уравняла веб и мобильную разработку с точки зрения распространения продуктов и вовлечённости пользователей.

Да, современный фронтенд, написанный, например, на React, работает как приложение. Но вот только скачивается это приложение в браузер и запускается из него. В этом и заключается огромный гандикап, который всегда имела мобильная разработка. Давайте подумаем, чем с точки зрения обычного пользователя, «приложение» отличается от «сайта». Сразу в голову приходит, что приложение в телефоне, а сайт на компьютере. Но ведь есть мобильный браузер, так что сайт и в телефоне тоже. Тогда остаётся 3 существенных отличия:
Читать дальше →
Total votes 52: ↑52 and ↓0 +52
Comments 31

Принципы построения REST JSON API

Reading time 8 min
Views 334K

Эта памятка писалась для внутренних нужд (открыть глаза менее опытным в вебе коллегам). Но, т.к. я насмотрелся велосипедов от довольно уважаемых, казалось бы, контор, — выкладываю на хабр. Мне кажется, многим будет полезно.


Зачем


Надеюсь, читающий уже понимает, зачем ему вообще нужен именно REST api, а не какой-нибудь монстр типа SOAP. Вопрос в том, зачем соблюдать какие-то стандарты и практики, если браузеры вроде бы позволяют делать что хочешь.


  • Стандарт HTTP это стандарт. Его несоблюдение вредно для кармы и ведёт к постоянным проблемам с безопасностью, кэшированием и прочими "закидонами" браузеров, которые совсем не закидоны, а просто следование стандарту.
  • Велосипеды со всякими {error: "message","result":...} невозможно нормально тестировать и отлаживать
  • Поддержка большим количеством готовых клиентских библиотек на все случаи жизни. Те, кто будет вашим api пользоваться, скажут большое человеческое спасибо.
  • Поддержка автоматизированного интеграционного тестирования. Когда сервер на любые запросы отдаёт 200 ОК — ну, это такое себе развлечение.
Читать дальше →
Total votes 71: ↑55 and ↓16 +39
Comments 207

iRobot Scooba: опыт использования и решение часто встречающихся проблем моющего робота-пылесоса

Reading time 7 min
Views 22K

iRobot Scooba (модели 5800, 380 и аналоги выглядят практически идентично)

Когда я впервые услышал о роботе-пылесосе, мне сразу же захотелось такой приобрести, чтобы опробовать в “полевых условиях”. Прочитал я о них где-то в 2010, и через некоторое время мне удалось исполнить свою маленькую мечту. Тогда я случайным образом познакомился с менеджером компании-дистрибьютора продукции iRobot, и мне предложили с хорошей скидкой забрать стендовый Scooba 5800.

Недолго думая, я согласился, привез новинку домой, опробовал и … робот полностью оправдал мои ожидания. Он мыл полы просто идеально, во всяком случае, гораздо лучше, чем это делаю я, даже когда очень стараюсь. Под катом — еще немного воспоминаний, опыт работы с роботом и решение нескольких распространенных среди всех Scooba «железных» проблемы, которые приводят к неработоспособности устройства.
Total votes 32: ↑32 and ↓0 +32
Comments 28

Как усилить защищенность веб-приложений при помощи HTTP заголовков

Reading time 18 min
Views 32K
image

Это третья часть серии по веб-безопасности: вторая часть была «Web Security: введение в HTTP», первая "Как работают браузеры — введение в безопасность веб-приложений".

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

В настоящее время браузеры внедрили очень широкий спектр заголовков, связанных с безопасностью, чтобы злоумышленникам было труднее использовать уязвимости. В этой статье мы попытаемся обсудить каждый из них, объясняя, как они используются, какие атаки они предотвращают, и немного истории по каждому заголовку.
Читать дальше →
Total votes 35: ↑34 and ↓1 +33
Comments 9

Отладочная плата STM32F4 в форм-факторе Raspberry Pi

Reading time 20 min
Views 27K

image Добрый день, уважаемые хабровчане! Хочу представить общественности мой проект — небольшая отладочная плата на базе STM32, но в форм-факторе Raspberry Pi. От других отладочных плат она отличается тем, что имеет совместимую с корпусами от Raspberry Pi геометрию и наличие ESP8266-модуля в качестве беспроводного модема. А также приятные дополнения в виде разъёма для micro-SD карты и стерео-усилителя. Для использования всего этого богатства я разработал высокоуровневую библиотеку и демонстрационную программу (на C++11). В статье я хочу подробно описать как аппаратную, так и программную части этого проекта.

Читать дальше →
Total votes 63: ↑61 and ↓2 +59
Comments 85

Пакетная обработка изображений в Windows с ImageMagick. Часть I

Reading time 6 min
Views 29K
ImageMagick — свободный и кроссплатформенный редактор для работы с графикой.
Он состоит из нескольких консольных утилит. Его возможностей не счесть, как звезд на небе.
В сети есть множество примеров, как пользоваться им. Но большинство из них для Linux или PHP. Для Windows же их кот наплакал. Настало время восполнить пробел.
Читать дальше →
Total votes 17: ↑15 and ↓2 +13
Comments 5

PLF запуск — как запустить продукт, чтобы об этом кто-нибудь узнал

Reading time 13 min
Views 33K


Собираюсь запускать несколько продуктов и понимаю, что нужно делать правильный запуск. И это не просто реклама в Директе и SEO-оптимизация, но и какие-то предстартовые действия. В одном из тренингов Лайк Центра я наткнулся на книжку «Запуск» (Launch) Джеффа Уокера. Её анонсировали как уникальный инструмент для успешного запуска продуктов, и я решил попробовать этот инструмент на себе. В нескольких статьях я расскажу, как это выглядит на практике. Но в этой статье только теория, т.е. конспект книги.

Джефф Уокер разработал уникальную методику запуска. Она состоит в том, что для запуска нужно произвести некоторую последовательность действий, которая поможет продать продукт и обеспечит доверие. Он назвал эту методику PLF: Product Launch Formula — формула запуска продукта. Она состоит из последовательностей, историй и триггеров.

Кто хочет нутром прочувствовать проблематику, — послушайте песню Uma2rmaH «Зависть».
Читать дальше →
Total votes 13: ↑10 and ↓3 +7
Comments 1

Настройка DKIM/SPF/DMARC записей или защищаемся от спуфинга

Reading time 5 min
Views 240K
Приветствую, Хабр! В этой статье будет инструкция по настройке DKIM/SPF/DMARC записей. А побудило меня написать эту статью полное отсутствие документации на русском языке. Все статьи на эту тему, которые были мной найдены, были крайне не информативны.
Читать дальше →
Total votes 29: ↑26 and ↓3 +23
Comments 8

Чек-лист вёрстки

Reading time 7 min
Views 80K

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

Читать дальше →
Total votes 92: ↑87 and ↓5 +82
Comments 47

Верстка интернет-магазина: список товаров

Reading time 5 min
Views 175K


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


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

Читать дальше →
Total votes 32: ↑26 and ↓6 +20
Comments 58

FPS и пусть ваш код подождет

Reading time 8 min
Views 19K
Приветствую, уважаемые читатели Хабра. Эта статья про фронтенд, JavaScript и FPS. И сегодня мне хотелось бы поделиться своими мыслями о «слепом» коде, который фактически никак не учитывает производительности среды исполнения. Ну и, конечно, напишем очередной велосипедокостыль — куда без них.

image
Читать дальше →
Total votes 31: ↑29 and ↓2 +27
Comments 38

CSS-стили для печати, о которых я забыл

Reading time 8 min
Views 80K
image


Аарон Густафсон недавно отправил твит Indiegogo, в котором было сказано, что при распечатке их страниц с информацией о заказе получается нечто совершенно неприличное. И понеслооось.
Total votes 59: ↑51 and ↓8 +43
Comments 17

От Jquery UI до Ext.js: обзор javascript UI библиотек для SPA. Часть 1

Reading time 7 min
Views 36K
Всем привет! На дворе 2016 год, и web давно превратился в нечто большее, чем простые сайты. Львиная доля компаний уже давно забыла про десктопные программы, и для повсеместных задач используют веб приложения, будь это CRM, система управления складом, система аналитики или простая панель администрирования от сайта (в дальнейшем – админка).

image

И их можно понять, ведь для работы не нужна специфическая конфигурация, специальное установленное ПО, его обновление. Достаточно открыть браузер и программа работает. Поэтому, на мой взгляд, за веб-приложениями – будущее!

Делать с нуля полноценную, ничуть не уступающую десктопной программу — это титанический труд.
Читать дальше →
Total votes 36: ↑31 and ↓5 +26
Comments 56

Information

Rating
Does not participate
Location
Новосибирск, Новосибирская обл., Россия
Date of birth
Registered
Activity