Статьи / Закладки / Профиль IvanCher / Хабр

Иван Че @IvanCher

Программист

Профиль Публикации Комментарии 19Закладки 100

driusha 18 окт 2018 в 09:26

Проксируем файлы из AWS S3 средствами nginx

4 мин

32K

Системное администрирование*Серверное администрирование*Amazon Web Services*Блог компании Флант

Казалось бы, задача реализации фронтенда для AWS на nginx звучит как типовой кейс для StackOverflow — ведь проблем с проксированием файлов из S3 быть не может? На деле выяснилось, что готовое решение не так-то просто найти, и данная статья должна исправить эту ситуацию.

Зачем это вообще может понадобиться?

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

Читать дальше →

+24

JamesJGoodwin 17 дек 2019 в 02:07

PM2: подходим к вопросу процесс-менеджмента с умом

5 мин

68K

JavaScript*Node.JS*

Recovery Mode

Буквально пару часов назад у меня завязался спор на тему того, что Node.JS слишком медленная для крупных проектов и ей стоит предпочесть Golang, Rust, PHP, etc. Основным аргументом противоположной стороны в этом споре был факт однопоточности JavaScript. Якобы при разработке приложения производительность просто упрётся в эту однопоточность и ничего сделать уже нельзя — только переписать на каком-то другом языке. Однако дела с этим в NodeJS обстоят немного лучше, чем кажется на первый взгляд. Перед тем, как мы углубимся в эту тему хочу заявить, что уважаю право каждого разработчика использовать тот язык программирования, который пришёлся ему по душе и который он считает предпочтительным в той или иной задаче.

Сделав поиск по ключевому слову «PM2» на Хабре я не нашёл ни одной статьи, посвящённой этому process-менеджеру. Лишь одиночные упоминания в статьях других пользователей. Я загорелся (сильно сказано) идеей наверстать упущенное и пролить свет на этот тёмный уголок разработки backend на Node.JS (о котором многие знают, да, я в курсе). Всех заинтересовавшихся прошу под кат.

Читать дальше →

+15

Firemoon 24 янв 2023 в 16:10

SD – это Linux, а Midjourney – Mac: краткое полное руководство по Stable Diffusion

13 мин

78K

IT-инфраструктура*Блог компании SelectelМашинное обучение*Искусственный интеллектIT-компании

Туториал

Вот таких тирекс-тянок выдает нейросеть

Текст про Midjourney привлек внимание, и в комментариях наметилась дискуссия про Stable Diffusion. Аргументы убедили меня попробовать SD самостоятельно, но вскоре я понял, что это не самая простая задача. Сообщество любителей Stable Diffusion произвело на свет множество удобных инструментов, которые своим количеством и сложностью могут отпугнуть новичков.

Всю неделю, что я экспериментировал с нейросетью, я боролся с желанием SD добавлять вторичные гендерные признаки по моим запросам и грустил, смотря на результаты генерации котиков. О своих страданиях частично писал в личном Telegram-канале — подписывайтесь! В этом же тексте — собрал основные советы по работе со Stable Diffusion и подвел итог, сравнив эту нейросеть с Midjourney.

Читать дальше →

+104

SibProgrammer 5 ноя 2020 в 06:35

Хостинг статических сайтов на AWS

7 мин

12K

ХостингAmazon Web Services*Блог компании Plesk

Туториал

В данной статье я хочу подробно разобрать тему хостинга статических сайтов на AWS. Тему нельзя назвать сильно сложной, но нюансов хватает. Для настройки вручную потребуется организовать взаимодействие 4-5 сервисов, а по дороге порой можно встретить весьма интересные грабли.

Некоторое время назад существовал официальный туториал по такой ручной настройке. Местами он мог показаться сложным, местами странным. Скорее всего, это была дань универсальности и необходимости продемонстрировать разные варианты хостинга. Однако сейчас туториал кардинально обновлен, и предлагает использовать сервис AWS Amplify для решения такой задачи. С одной стороны, это удобно, но с другой стороны, иногда необходимо разобраться, что же именно происходит “под капотом”. Поэтому здесь мы разберем, как все настроить руками.

Читать дальше →

+36

Kapustlo 21 дек 2022 в 13:24

Конфигурируем веб-сервер для Next.js

3 мин

19K

JavaScript*Nginx*

Туториал

Из песочницы

Казалось бы, что развёртывание приложений на Next.js не влечёт за собой трудностей - установил зависимости, сделал "npm run build && npm run start" и проксируешь запросы на 3000-ый порт, но для оптимальной работы предстоит сделать кое-что ещё.

arch1baald 14 сен 2022 в 17:11

Шерудим под капотом Stable Diffusion

10 мин

33K

Обработка изображений*Машинное обучение*Искусственный интеллектNatural Language Processing*

Туториал

Вероятно вы уже слышали про успехи нейросетей в генерации картинок по текстовому описанию.

Я решил разобраться, и заодно сделать небольшой туториал, по архитектуре модели Stable Diffusion. Сегодня мы не будем глубоко погружаться в математику и процесс тренировки. Вместо этого сфокусируемся на применении и устройстве основных компонент: UNet, VAE, CLIP.

+81

PatientZero 17 окт 2022 в 09:42

Как работает Stable Diffusion: объяснение в картинках

9 мин

94K

Обработка изображений*Машинное обучение*Искусственный интеллект

Перевод

Генерация изображений при помощи ИИ — одна из самых новых возможностей искусственного интеллекта, поражающая людей (в том числе и меня). Способность создания потрясающих изображений на основании текстовых описаний похожа на магию; компьютер стал ближе к тому, как творит искусство человек. Выпуск Stable Diffusion стал важной вехой в этом развитии, поскольку высокопроизводительная модель оказалась доступной широкой публике (производительная с точки зрения качества изображения, скорости и относительно низких требований к ресурсам и памяти).

Поэкспериментировав в генерацией изображений, вы можете задаться вопросом, как же она работает.

В этой статье я вкратце расскажу, как функционирует Stable Diffusion.

Читать дальше →

+29

sfi0zy 4 дек 2019 в 16:59

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

10 мин

18K

Веб-разработка*JavaScript*

Туториал

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

+14

RationalAnswer 19 мар 2022 в 22:01

Удивительная история Tether (USDT): люди отнесли $80 миллиардов пластическому хирургу, который не гарантирует их возврат

11 мин

100K

Финансы в ITКриптовалюты

В попытке избежать санкций Запада и контрсанкций со стороны РФ, многие россияне спешно переводят сбережения в криптовалюту. В этой статье я разбираюсь в финансовой надежности крупнейшего и старейшего стейблкоина USDT (спойлер: к ней есть серьезные вопросы).

+153

HoroSamiK 10 окт 2020 в 08:05

Создание favicon для сайта 2020

10 мин

140K

Веб-разработка*HTML*

Из песочницы

Что такое favicon и для чего он нужен?

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

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

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

Какой формат использовать для favicon?

Раньше в качестве основного формата использовали ICO. Особенность данного формата – мульти-размерность. Данный файл может хранить в себе несколько размеров иконки. На смену ICO пришел формат PNG. ICO все еще поддерживаемый, но большинство современных браузеров выбирают PNG формат иконки, который легче. Некоторые браузеры не могут выбрать правильный значок в файле ICO, что приводит к неправильному использования значка с низким разрешением.

О каких платформах пойдет речь в этой статье?

Десктопные браузеры
Chrome на Android
Иконка закладки в iOS (PWA)
macOS
Windows

Читать дальше →

+46

ru_vds 31 июл 2020 в 16:16

CSS и множественный фон

7 мин

62K

Веб-разработка*CSS*Блог компании RUVDS.com

Перевод

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

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

Если вы не знакомы с CSS-свойством background — хорошо будет, если вы, перед чтением материала, заглянете на эту страницу документации MDN, посвящённую данному свойству.

Читать дальше →

+30

belyan 17 фев 2016 в 18:44

Все способы вертикального выравнивания в CSS

6 мин

794K

CSS*HTML*Блог компании Netcracker

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

Да, для вертикального выравнивания в CSS есть специальное свойство vertical-align с множеством значений. Однако на практике оно работает совсем не так, как ожидается. Давайте попробуем в этом разобраться.

Читать дальше →

+38

ru_vds 1 апр 2020 в 12:30

Всё о ключевом слове auto в CSS

13 мин

42K

Веб-разработка*CSS*Блог компании RUVDS.com

Перевод

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

Ключевое слово auto имеет особый смысл при использовании его с различными CSS-свойствами. Мы разберём особенности auto, касающиеся применения этого значения к различным свойствам.

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

Читать дальше →

+46

hisbvdis 14 ноя 2019 в 13:10

Медиавыражения в CSS — это не только max-width

6 мин

36K

Веб-разработка*CSS*Accessibility*

Перевод

Недавно мы опубликовали новый веб-сайт нашей компании Mabiloft с полностью переработанным чистым дизайном и множеством новых великолепных иллюстраций и анимаций.

После того, как наш дизайнер проделал потрясающую работу, продумав и нарисовав сайт, нам, разработчикам, было необходимо реализовать макет, сохранив его чистым и цельным для каждого устройства, от большого 2K экрана, на которых мы пишем код, до старого iPhone 4 с его 3.5-дюймовым дисплеем.

Несколько недель спустя веб-сайт был почти готов и я просматривал его, чтобы убедиться, что всё работает как нужно. Заметив, что макет главной страницы неправильно отображался на нашем iPad, я быстро изменил некоторые CSS-правила и исправил ошибку, но… это привело к проблемам отображения макета на всех всех ноутбуках с небольшим экраном

Читать дальше →

+15

MagisterLudi 4 мая 2021 в 14:27

Базовая структура HTML-документа с объяснением каждой строчки

9 мин

107K

Веб-дизайн*Веб-разработка*HTML*Учебный процесс в ITБлог компании Маклауд

Перевод

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">

  <title>Unique page title - My Site</title>

  <script type="module">
    document.documentElement.classList.remove('no-js');
    document.documentElement.classList.add('js');
  </script>

  <link rel="stylesheet" href="/assets/css/styles.css">
  <link rel="stylesheet" href="/assets/css/print.css" media="print">

  <meta name="description" content="Page description">
  <meta property="og:title" content="Unique page title - My Site">
  <meta property="og:description" content="Page description">
  <meta property="og:image" content="https://www.mywebsite.com/image.jpg">
  <meta property="og:image:alt" content="Image description">
  <meta property="og:locale" content="en_GB">
  <meta property="og:type" content="website">
  <meta name="twitter:card" content="summary_large_image">
  <meta property="og:url" content="https://www.mywebsite.com/page">
  <link rel="canonical" href="https://www.mywebsite.com/page">

  <link rel="icon" href="/favicon.ico">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="manifest" href="/my.webmanifest">
  <meta name="theme-color" content="#FF00FF">
</head>

<body>
  <!-- Content -->
  <script src="/assets/js/xy-polyfill.js" nomodule></script>
  <script src="/assets/js/script.js" type="module"></script>
</body>
</html>

Под катом — разбор каждой строчки

Читать дальше →

+34

puchnina_nastya 3 ноя 2020 в 11:49

Как стать фронтенд-разработчиком? Пошаговый гид в мир фронтенда

14 мин

228K

CSS*JavaScript*HTML*Блог компании Домклик

Приветствую всех! Меня зовут Пучнина Анастасия, я ведущий разработчик в компании ДомКлик, занимаюсь фронтендом Витрины объявлений. Сегодня я хотела бы поделиться с вами своим мнением на тему того, что важно знать фронтенд-разработчику. Эта статья будет полезна тем, кто только начинает свой путь в разработке, или имеет опыт программирования в другой области и решил перейти на сторону фронтенда.

Содержание:

Кто такой фронтендер и чем он занимается?
С чего начать и что читать? Чек-лист обучения
Какие трудности могут быть? Ошибки в начале пути
Подготовка к собеседованию на Junior-разработчика

Читать дальше →

+32

DmitryOlkhovoi 22 июл 2018 в 23:45

Разработка редактора для создания веб сайтов/лендингов (опыт)

23 мин

24K

Веб-дизайн*Веб-разработка*Бизнес-модели*Дизайн

Туториал

(Art by http://www.simonstalenhag.se/)

Предыстория / Дисклеймер

Всем привет, данная статья является по факту материалом для моего выступления в понедельник на марафоне в Киеве. Но не думайте, что вы аудитория на которой я отрабатываю текст, просто мне так проще подготовиться.

На данный момент я Front-end разработчик в Conductor/WeWork. Мы не занимаемся разработкой редакторов, как собственно и я, по вечерам не разрабатываю такие вещи. Это больше об опыте который я получил на прошлом проекте в компании УТИ(сокращенно), утипути, ути-…. Это было достаточно давно, но как оказывается, тема актуальна и по сей день, как и косяки связанные с ней.

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

UTIEditor special for you <3

Зачем нам нужны такие редакторы?

Тут достаточно много ответов на этот вопрос, многие из вас, я уверен догадываются и так.
Я отвечу на этот вопрос с точки зрения УТИ, компании которая предоставляет услуги по разработке сайтов.

УТИ по сути своей — компания ширпотреб. Уверен в свое время в таких поработал каждый, десяток сайт визиток на человека, десяток интернет магазинов и фирменная вишенка — своя CMS.

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

Тут пожалуй стоит перейти к обсуждению этого функционала, ведь он очень разный.
Хотелось бы добавить, что я не буду включать в этот разговор такие CMS как WrodPress, Drupal, мы сконцентрируемся на рынке редакторов.

+16

InlyIT 26 мая 2021 в 14:07

Портфолио разработчика по Джошу Комо: структура, наполнение, смысл

10 мин

12K

Карьера в IT-индустрииБлог компании InlyIT

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

Читать дальше →

Andriell 16 сен 2019 в 16:18

Полное руководство по Flexbox

11 мин

602K

Веб-дизайн*CSS*HTML*

Перевод

Полное руководство по CSS flexbox. Это полное руководство объясняет все о flexbox, сосредотачиваясь на всех возможных свойствах для родительского элемента (контейнер flex) и дочерних элементов (элементы flex). Оно также включает в себя историю, демонстрации, шаблоны и таблицу поддержки браузеров.

Читать дальше →

+11

aio350 18 ноя 2020 в 13:57

Полное визуальное руководство-шпаргалка по Flexbox и Grid + туториал

31 мин

150K

Веб-разработка*CSS*JavaScript*Программирование*HTML*

Доброго времени суток, друзья!

Представляю вашему вниманию полное визуальное руководство-шпаргалку по всем свойствам CSS-модулей Flexbox и Grid.

Основные источники: A Complete Guide to Flexbox, A Complete Guide to Grid.

В конце статьи вас ждет небольшой туториал по созданию тренажера по Flexbox.

Без дальнейших предисловий.

Оглавление

Flexbox
Grid
Туториал

2 3 4 5