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

Всем привет! Мы — Полина и Степан, дизайнер интерфейсов и фронтенд-разработчик в ЮMoney. В этом тексте расскажем, как у нас в компании устроена дизайн-система, и посмотрим на неё с двух сторон: глазами команды дизайна и разработки.

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

Поводом для этой статьи стал вопрос из нашего Telegram‑чата поддержки (присоединяйтесь — он открыт для всех!): «Почему в репозиториях Angie среди множества сторонних модулей отсутствует Nginx Fancy Index?».

Меня удивило, что кто‑то пользуется устаревшим модулем, поскольку ещё в 2014 году я добавил во встроенный в nginx модуль «autoindex» поддержку форматов JSON и XML, что делает сторонние решения избыточными.

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

Всем привет! Меня зовут Арина, я - frontend-разработчик в отделе разработки конструкторов iSpring. Наша команда занимается разработкой и развитием продукта iSpring Page - облачной платформы для создания курсов.

В 2023 году наша компания начала активно развиваться на рынке Ближнего Востока, и поэтому возник вопрос поддержки арабского языка! А это означало, что нам нужно не только внедрить переводы, но и развернуть или «отзеркалить» пользовательский интерфейс всех наших продуктов.

Поэтому в данной статье я расскажу, как мы реализовали поддержку RTL, с какими трудностями столкнулись, как их решили и как поддержка RTL повлияла на работу смежных команд.

Привет, Хабр. На связи Артем, Laravel-разработчик, и я написал инструкцию для начинающих разработчиков по созданию полноценного локального приложения с бэкендом на Laravel и фронтендом на Vue.js. 

Одностраничные приложения стали стандартом для создания динамичных и быстрых пользовательских интерфейсов. Одним из популярных стеков для разработки SPA является сочетание Laravel и Vue.js.

Пошагово разберу, как настроить среду разработки, создать API на Laravel, реализовать динамический интерфейс с использованием Vue.js и связать эти две части в единое приложение. 

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

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

В 2019 году к нам обратилась всем известная компания Danone. Задача: цифровать и автоматизировать процесс закупки продукции.

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

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

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

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

То есть простое веб-решение. Но с какими проблемами мы столкнулись.

Всем привет. Мне читатели иногда присылают сообщения с одним и тем же вопросом, что ты же Software Engineer и Solution Architect, но почти все твои статьи касаются бизнеса, менеджмента, процессов, управления командами и так далее. Но нет статей технического характера, про разработку и создание разных фич (feature) для проекта. Причина по которой это происходит в том, что весь интернет забит информацией о том, как программировать, но очень мало информации о том, что именно программировать, и о том, что за пределами кодинга огромное количество нерешенных проблем, которые нивелируют весь процесс программирования. Но сегодня я расскажу об одной фиче, которая может оказаться очень полезной для многих.

Для создания современных сайтов разработчики все чаще стали пользоваться реактивными фреймворками или чистым JavaScript, отказываясь при этом от библиотеки jQuery. Однако остаются плагины, от которых не так просто отказаться. К таким относится Slick slider. Он очень удобен в использовании и сочетает в себе все необходимые для создания каруселей опции.

Недавно я собеседовался в Амазон и Майкрософт в офисы в Испании (так как я тут живу). Пока готовился много что понял, сейчас поделюсь.

Собеседование на проектирование систем.

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

За последние 2 года поддержка ESM в TypeScript, Node.js и браузерах сильно улучшилась. В этой статье я объясню мою современную настройку, которая является относительно простой по сравнению с тем, что нам приходилось делать раньше:

• она предназначена для пакетов, которые могут пренебречь обратной совместимостью. Настройка хорошо работает для меня некоторое время — начиная с TS 4.7 (24.05.2022)
  
  • помогает то, что Node.js теперь поддерживает require(esm) — запрос библиотек ESM из модулей CommonJS
• я использую только tsc, но упоминаю поддержку других инструментов в разделе "Компиляция TS с помощью других инструментов"

Обратная связь приветствуется: что вы делаете по-другому? Что может быть улучшено?

Пример пакета: в @rauschma/helpers используется настройка, описываемая в этой статье.

Что вас ждёт

Если в первой части мы заложили фундамент проекта (выбор инструментов, настройка окружения и структура), то здесь мы превратим этот каркас в полноценное API для управления резюме кошек (или людей — как вам ближе). Мы подключим базу данных, добавим тесты, настроим миграции и даже проверим всё в действии. К концу статьи у вас будет рабочее API, которое можно потрогать руками (или лапками 🐾). Полный код доступен на GitHub — ссылка в конце!

Хабр, привет! Я снова пришёл к вам со статьёй, где показываю мои любимые техники вёрстки. Моя цель — поделиться опытом с вами. Я использую не только трюки известных экспертов, есть лично мои придумки. Но, пожалуйста, относитесь к этому контенту как просто к альтернативному мнению. Мои техники не являются единственными правильными решениями.

Сегодня мы рассмотрим:

• мой подход к написанию стилей для динамической сетки без использования БЭМ-модификаторов;
• как я перестал писать свойство text-decoration со значением none для элемента <button>;
• способ для вычисления значения свойства width в зависимости от контента элемента;
• почему вам стоит удалить все стили с использованием псевдо-класса :focus.

Давайте посмотрим, что я вам подготовил.

В одной из предыдущих статей мы узнали, что такое парсинг, и изучили примеры получения данных с HTML-страниц с помощью Python. 

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

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

Как фокус только на обучении повлиял на результат и стоит ли сейчас идти во фронтенд? Вот моя честная история пути в IT. Она похожа на восхождение на вершину без акклиматизации.

Если вас заинтересовала тема авторизации, подразумеваю, что вы уже итак знаете что такое Telegram Mini Apps. Поэтому не буду долго размусоливать вступление и перейду сразу к делу.

Поехали!

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

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

Будет много схем и кода, демонстрирующих практические примеры применения паттернов Композит, Билдер, Визитер, Цепочка обязанностей и Декоратор. Не смотря на то, что примеры кода написаны на PHP, статья может оказаться интересной и для разработчиков, использующих другие языки.

В первой части мы развернули базовый стек для сбора метрик, логов и трейсов и интегрировали его с приложением на Laravel. Теперь покажу настройку Observability на примере простого Golang-приложения — настроим в нём структурированные логи, распределённый трейсинг и метрики, а также интегрируем с нашим стеком.

В этой статье мы поделимся своим опытом разработки приложений в Телеграм и подробно остановимся на следующих вопросах:

‭• Что представляют из себя Telegram mini apps?
‭• Чем они отличаются от других платформ?
‭• Какие перспективы развития у Telegram mini apps?
‭• Как правильно тестировать Telegram mini apps с учетом особенностей платформы
‭• Как настроить окружение для будущего приложения и инициализировать telegram-apps sdk?
‭• Какие нюансы существуют при разработке Telegram mini apps?

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

На очереди конфигурация сервера с помощью Ansible. Данная статья будет разделена на три блока: несколько слов о результатах первой статьи, блок о самом инструменте Ansible и блок о конфигурации сервера с помощью него. 

Когда начинаешь новый проект, то надо какое то время потратить чтобы подобрать подходящие библиотеки, подготовить структуру проекта, связать все воедино. Это занимает прилично времени. Целый день вполне может уйти. А экономить на этом шаге не стоит. Это ведь как фундамент. И вот, 5 лет назад я опубликовал каркас, который собрал для себя, чтобы делать с ним проекты на Go.

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

DI

По теме DI ко мне в чаще всего обращались с критикой, в том числе и коллеги. Поэтому с этого и начнем. В основном предлагали 2 идеи