Pull to refresh
27
0
Андрей Громоздов @AndyGrom

Senior frontend developr

Send message

Docker-образ для раздачи Single Page Application

Reading time9 min
Views14K

Single-page Application (SPA) – это набор статических JavaScript и HTML файлов, а так же картинок и других ресурсов. Поскольку они не изменяются динамически, опубликовать их в интернете очень просто. Для этого существует большое количество дешёвых и даже бесплатных сервисов, начиная с простого GitHub Pages (а для кого-то даже с narod.ru) и заканчивая CDN вроде Amazon S3. Однако мне нужно было другое.


Мне нужен был Docker-образ с SPA, чтобы его легко можно было запустить как в продакшене в составе Kubernetes-кластера, так и на машине back-end разработчика, который понятия не имеет, что такое SPA.


UPD 07.07.20: Посмотерть самому на то, что в итоге получилось, можно тут: https://github.com/alexxxnf/spa-docker-example


Я для себя определил следующие требования к образу:


  • простота в использовании (но не в сборке);
  • минимальный размер как с точки зрения диска, так и с точки зрения RAM;
  • настройка через переменные окружения, чтобы образ можно было использовать в разных средах;
  • максимально эффективная раздача файлов.

Сегодня я расскажу как:


  • выпотрошить nginx;
  • собрать brotli из исходников;
  • научить статические файлы понимать переменные окружения;
  • ну и конечно как собрать из всего этого Docker-образ.

Цель этой статьи поделиться моим опытом и спровоцировать опытных участников сообщества на конструктивную критику.

Читать дальше →
Total votes 12: ↑10 and ↓2+12
Comments45

Что такое производительность веб-приложений?

Reading time5 min
Views18K
image

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

Ответить на эти и многие другие вопросы в одной статье было бы очень сложно. Поэтому я собрал каталог ссылок и разбил его на категории. Но для начала — немного теории о том, что такое производительность и когда о ней стоит задуматься.
Читать дальше →
Total votes 27: ↑26 and ↓1+31
Comments8

Как заопенсорсить npm-пакет с нормальным деплоем, CI и демо (без потери радости к жизни)

Reading time6 min
Views11K

Вот вы сделали что-то новое и крутое, приходит мысль — выложить в опенсорс и опубликовать в npm.


Просто запушить код в публичный репозиторий недостаточно. Это обречет проект на отсутствие развития и провал. А с другой стороны вспоминается целый ряд скучных процессов: версионирование и публикация пакета, настройка непрерывной интеграции, хостинг и деплой странички с демо проекта, организация возможности контрибьютинга для комьюнити.


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


На самом деле всё это может занять у вас меньше часа. Без знаний DevOps и совершенно бесплатно.


Читать дальше →
Total votes 64: ↑64 and ↓0+64
Comments8

Солнечная электростанция на дом 200 м2 своими руками

Reading time15 min
Views169K
Частенько в сети проскакивают сообщения о борьбе за экологию, развитие альтернативных источников энергии. Иногда даже проводят репортажи о том, как в заброшенной деревне сделали солнечную электростанцию, чтобы местные жители могли пользоваться благами цивилизации не 2-3 часа в сутки, пока работает генератор, а постоянно. Но это всё как-то далеко от нашей жизни, поэтому я решил на своем примере показать и рассказать, как устроена и как работает солнечная электростанция для частного дома. Расскажу обо всех этапах: от идеи до включения всех приборов, а также поделюсь опытом эксплуатации. Статья получится немаленькая, поэтому кто не любит много букв могут посмотреть ролик. Там я постарался рассказать то же самое, но будет видно, как я все это сам собираю.


Total votes 90: ↑90 and ↓0+90
Comments525

Архитектура веб-интерфейсов: деревянное прошлое, странное настоящее и светлое будущее

Reading time14 min
Views11K
image

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

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

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

NB: В качестве примеров в статье будут использоваться только те фреймворки, с которыми непосредственно имел дело автор, и существенное внимание здесь будет уделено React и Redux. Но, несмотря на это, многие описываемые здесь идеи и принципы носят общий характер и могут быть более-менее успешно спроецированы на другие технологии разработки интерфейсов.

Читать дальше →
Total votes 12: ↑11 and ↓1+10
Comments14

19 концепций, которые нужно изучить для того, чтобы стать эффективным Angular-разработчиком

Reading time14 min
Views35K
TODO-приложение во фронтенд-разработке — это то же самое, что «Hello world» в обычном программировании. При создании TODO-приложений можно изучить выполнение CRUD-операций средствами того или иного фреймворка. Но часто подобные проекты лишь весьма поверхностно касаются того, что на самом деле умеет фреймворк.

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



Для освоения Angular нужно очень много всего изучить. Многие разработчики застревают на начальных этапах освоения Angular. Происходит это из-за того, что они не знают о том, куда им двигаться, или не знают того, по каким ключевым словам им искать информацию, которая позволит им сделать шаг вперёд. Автор этого материала говорит, что ей, когда она начинала осваивать Angular 2+, хотелось бы, чтобы ей попалось бы руководство по данному фреймворку, похожее на это.
Читать дальше →
Total votes 26: ↑22 and ↓4+18
Comments11

10 PostCSS плагинов, которые сэкономят время вашему верстальщику

Reading time10 min
Views31K


У нас, у фронтендеров, есть такая категория инструментов, которые никак не решают стоящие перед нами задачи, а скорее влияют на сам процесс их решения. Изменяют его. Отношение к таким инструментам самое разное – начиная от мании в духе “давайте эту штуку пихать везде, это же так круто” и заканчивая отговорками вроде “раз не решает задачи бизнеса, значит оно нам не нужно”. Но, так или иначе, сегодня мы поговорим про PostCSS — один из таких инструментов.


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

Читать дальше →
Total votes 27: ↑25 and ↓2+23
Comments14

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

Reading time11 min
Views39K
Человеку, который никогда толком не изучал английский язык, может быть очень тяжело как морально, так и умственно основательно приступить к изучению языка. Ещё сложнее это может показаться делать самостоятельно. Кажется, что следовало заниматься всем этим в детстве. Потому что сейчас уже просто нет для этого ни сил, ни времени. Потому что английский язык это очень-очень много информации, а мозг маленький. Это нормальное чувство, хотя оно и обманчиво.

image


Предыстория


Кому-то в школьные годы английский давался легко. Другим же, в том числе и мне, английский казался жутко сложным и учить его казалось невозможным. Я себя чувствовал просто отчаянно тупым, когда сидел на уроках английского и что-то мямлил, пытаясь ответить на вопросы учителей. А потом родителям приходилось оплачивать дополнительные уроки по английскому, чтобы меня не оставляли на второй год. И на этих уроках я точно так же сидел и ничего не понимал.
Читать дальше →
Total votes 36: ↑29 and ↓7+22
Comments42

Производительность фронтенда: разбираем важные метрики

Reading time12 min
Views31K
Обычно под производительностью понимают количество операций за определенный интервал времени и чем их больше, тем лучше. Но такое определение, да и подход в целом, мало применим к фронтенду, потому что у каждого пользователя будет свой «фронтенд». Именно об этом я и хочу поговорить, что же происходит «там», у пользователя, на другой стороне, в реальности, а не на вашем топовом MacBook.

Кроме это, я постараюсь вскользь рассмотреть общие правила оптимизации кода и некоторые ошибки на которые стоит обратить внимание. Ещё расскажу про инструмент, который помогает не только в профилировании, но и «из коробки» собирает кучу базовых метрик о производительности вашего приложения (и надеюсь, вы дочитаете этот пост до конца).
Читать дальше →
Total votes 65: ↑65 and ↓0+65
Comments22

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

Reading time15 min
Views101K

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

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

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

Музыка в День космонавтики

Reading time4 min
Views15K
Традиционно на 12 апреля я размещаю в соц. сетях песню «Fire in the Sky», одну из моих самых любимых на космическую тему и прекрасно подходящую к празднованию Дня космонавтики. Но это далеко не единственная отличная композиция на космическую тему. Музыка может менять наше состояние, радовать, печалить или погружать в задумчивость. Предлагаю отметить этот День космонавтики путешествием в космический «полуабстрактный мир, нечувствительно сконструированный поколениями композиторов» (братья Стругацкие).


Total votes 36: ↑34 and ↓2+32
Comments52

Собираем бандл мечты с помощью Webpack

Reading time18 min
Views68K
JS-приложения, сайты и другие ресурсы становятся сложнее и инструменты сборки — это реальность веб-разработки. Бандлеры помогают упаковывать, компилировать и организовывать библиотеки. Один из мощных и гибких инструментов с открытым исходным кодом, который можно идеально настроить для сборки клиентского приложения — Webpack.

Максим Соснов (crazymax11) — Frontend Lead в N1.RU внедрил Webpack в несколько больших проектов, на которых до этого была своя кастомная сборка, и контрибьютил с ним несколько проектов. Максим знает, как с Webpack собрать бандл мечты, сделать это быстро и конфигурировать так, чтобы конфиг оставался чистым, поддерживаемым и модульным.


Расшифровка отличается от доклада — это сильно усовершенствованная пруфлинками версия. По всей расшифровке рассыпаны пасхалочки на статьи, плагины, минификаторы, опции, транспайлеры и пруфы слов докладчика, ссылки на которые просто не поставить в выступление. Если собрать все, то откроется бонусный уровень в Webpack :-)
Total votes 61: ↑58 and ↓3+55
Comments17

19 идей для Node.js-разработчиков, которые стремятся вырасти над собой в 2019 году

Reading time16 min
Views38K
Автор материала, перевод которого мы публикуем, собрал 19 идей, которые могут оказаться полезными для тех Node.js-разработчиков, которые хотят повысить свой профессиональный уровень в 2019 году. Мир JavaScript огромен, поэтому освоить всё то, о чём пойдёт здесь речь, попросту нереально. Вряд ли найдётся кто-то, кто владеет всем этим в совершенстве. Однако кое-что в этом обзоре вполне может пригодиться именно вам.


Читать дальше →
Total votes 29: ↑25 and ↓4+21
Comments11

Бэкенд для фронтенда, или Как в Яндекс.Маркете создают API без костылей

Reading time7 min
Views68K

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



Этой осенью Яндекс.Маркету исполняется 18 лет. Все это время развивается партнерский интерфейс Маркета. Если кратко, то это админка, с помощью которой магазины могут загружать каталоги, работать с ассортиментом, следить за статистикой, отвечать на отзывы и т.д. Специфика проекта такова, что приходится очень много взаимодействовать с различными бэкендами. При этом данные не всегда можно получить в одном месте, из одного конкретного бэкенда.


Читать дальше →
Total votes 69: ↑61 and ↓8+53
Comments40

Оптимизируем веб с Виталием Фридманом: скорость загрузки, память, CPU

Reading time10 min
Views16K
Это второй пост о всевозможных трюках во фронтенд-разработке. В нем затронут вопрос оптимизации сайта, скорости его загрузки на устройствах с недостаточным объемом оперативной памяти и медленным CPU.

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



В основе материала — расшифровка доклада Виталия с конференции HolyJS 2018 Piter.
Total votes 33: ↑31 and ↓2+29
Comments3

Удивительный Angular

Reading time31 min
Views212K

Awesome Angular



От переводчиков


Всем привет, с вами Максим Иванов и Дмитрий Сергиенков, и сегодня мы поговорим о новостях в мире Angular. Мы подготовили для вас наиболее интересные материалы и отобрали список вопросов, который вам должен понравиться. Отметим только, что если вы будете ждать от этой статьи ответа на вопрос "Чем Angular лучше других технологий?", то придется вас огорчить, у нас не будет ответа на него. Почему? Как правило, все мнения вида "Технология X лучше технологии Y" почти всегда не более, чем отражение точки зрения высказывающегося. Однако для тех, кто только начинает изучать этот фреймворк, мы постараемся объяснить, что дает вам эта технология и какую пользу она приносит. Также не проходите мимо и ответьте на опрос, самые популярные ответы будут отправлены Игорю Минару (ведущий разработчик команды Angular). Ну что же, приступим.

Читать дальше →
Total votes 47: ↑45 and ↓2+43
Comments59

[в закладки] 23 рекомендации по защите Node.js-приложений

Reading time15 min
Views23K
В наши дни веб-сервисы постоянно подвергаются самым разным атакам. Поэтому безопасность — это то, о чём стоит помнить на всех этапах жизненного цикла проектов. Авторы материала, перевод которого мы сегодня публикуем, поддерживают репозиторий на GitHub, содержащий около 80 рекомендаций по обеспечению безопасности приложений, работающих на платформе Node.js. В этом материале, базой для которого послужило множество публикаций, посвящённых безопасности, собрано более двух десятков рекомендаций, касающихся Node.js, и некоторые советы общего характера. При этом данный материал покрывает топ-10 уязвимостей из списка проекта OWASP.


Читать дальше →
Total votes 35: ↑34 and ↓1+33
Comments16

Нужные HTTP-заголовки

Reading time5 min
Views45K
Наши клиенты в Fastly любят манипулировать заголовками HTTP. Подбор правильной комбинации заголовков — одна из лучших вещей, какую вы можете сделать для безопасности своего сайта и значительного вклада в его производительность.

Большинство разработчиков знают о важных и нужных HTTP-заголовках. Самые известные — Content-Type и Content-Length, это почти универсальные хедеры. Но в последнее время для повышения безопасности начали использоваться заголовки вроде Content-Security-Policy и Strict-Transport-Security, а для повышения производительности — Link rel=preload. Несмотря на широкую поддержку в браузерах, лишь немногие их используют.

В предыдущей статье мы рассмотрели ненужные заголовки. Сейчас разберёмся, какие заголовки действительно следует настроить для своего сайта.
Читать дальше →
Total votes 29: ↑29 and ↓0+29
Comments5

Ненужные HTTP-заголовки

Reading time7 min
Views42K
Заголовки HTTP важны для контроля, как кэш и браузеры обрабатывают ваш контент. Но многие из них используются неправильно или бессмысленно, затрачивая лишние ресурсы в критический момент загрузки страницы, и они могут работать не так, как вы думаете. В серии статей о лучших практиках сначала рассмотрим ненужные заголовки.

Большинство разработчиков знают о важных и нужных HTTP-заголовках. Самые известные — Content-Type и Content-Length, это почти универсальные хедеры. Но в последнее время для повышения безопасности начали использоваться заголовки вроде Content-Security-Policy и Strict-Transport-Security, а для повышения производительности — Link rel=preload. Несмотря на широкую поддержку в браузерах, лишь немногие их используют.

В то же время есть много чрезвычайно популярных заголовков, которые вообще не новые и не очень полезные. Мы можем это доказать с помощью HTTP Archive, проекта под управлением Google и спонсируемого Fastly, который каждый месяц при помощи WebPageTest скачивает 500 000 сайтов и выкладывает результаты в BigQuery.
Читать дальше →
Total votes 33: ↑32 and ↓1+31
Comments11

Поиск и устранение неисправностей Node.js-приложений под капотом

Reading time14 min
Views13K
С момента появления Node.js диагностика совершенствовалась в несколько этапов, от отладки приложений до глубокого анализа производительности. В этот раз речь пойдет о стратегиях использования таких инструментов, как core dump debuggers, flame graphs, ошибках в production и утечке памяти.


Мы расшифровали для Хабра доклад Николая Матвиенко из Grid Dynamics с нашей конференции HolyJS. Далее повествование идёт от лица спикера.
Читать дальше →
Total votes 44: ↑43 and ↓1+42
Comments1

Information

Rating
Does not participate
Location
Сочи, Краснодарский край, Россия
Works in
Date of birth
Registered
Activity