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

Когда мы взялись за гибридный проект, в котором одновременно использовались Django и React, мы столкнулись с дилеммой: как интегрировать две эти части, в особенности, как разрешить шаблонам Django отображать ресурсы JavaScript, сгенерированные при клиентской сборке. Мы нашли изящный способ, позволяющий с этим справиться: использовать Webpack-загрузчик для Django с трекером бандлов Webpack, при помощи которых нам поддался этот этап работы сборочного конвейера. А в этой статье мы научим вас, как это делается.

Введение

Тултип, от английского tooltip. Это такая короткая всплывающая подсказка, появляющаяся при наведении курсора на элемент. Или при фокусировании на элементе с помощью клавиатуры. Или при длительном разглядывании элемента, если вы в шлеме виртуальной реальности с трекингом глаз.

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

Всем привет! Буквально за 5 минут расскажу, как сделать parallax-эффект, который помог нам наглядно показать стилистические различия между светлой и темной темами на сайте «Дизайн-система НЛМК».

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

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

Мало просто сменить свою сферу работы на IT, желательно еще и стать хорошим разработчиком. Бывший тимлид и консультант Александр Усков рассказывает, как понять, что перед вами плохой разработчик и что с ним вообще можно делать

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

В этой статье мы расскажем о том, как запускать Selenium-тесты в Docker и выполнять их в браузерах Chrome и Firefox. И мы, вероятно, также поймем, зачем запускать Selenium-тесты в Docker.

Всем привет. Меня зовут Михаил, я - фронтенд-разработчик в Лиге Цифровой Экономики.

В последнее время я пробую себя в должности руководителя направления фронтенд-разработки, однако я хочу с вами поделиться опытом разработки приложения с применением Webpack Module Federation, о том, какие задачи приходилось решать и проблемы, которые возникли на этом пути. Не буду вдаваться в теорию о микрофронтах и module federation, об этом уже много написано и предполагается, что вы знакомы с базовой настройкой. Мы же поговорим о самом «вкусном», некоторые моменты будут опущены в целях сосредоточения на деталях.

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

UPD: добавили ссылки.

Привет, друзья!

В этой статье я покажу вам, как делать селфи в браузере.

Мы разработаем простое приложение со следующим функционалом:

• при инициализации приложение запрашивает у пользователя разрешение на захват медиапотока (далее также — поток) из видеокамеры его устройства;
• захваченный поток передается в элемент video;
• из потока извлекается видеотрек (далее также — трек), который передается в интерфейс для захвата изображений;
• из экземпляра интерфейса извлекается список поддерживаемых возможностей (capabilities) и настроек (settings) для фото;
• из трека также извлекается список поддерживаемых возможностей и настроек;
• формируется список диапазонных полей (<input type="range">) для установки настроек для фото;
• пользователь имеет возможность снимать фото (take photos) и захватывать фреймы (grab frames);
• фото выводится в элемент img, генерируется ссылка для его скачивания;
• фрейм инвертируется и отрисовывается на холсте (canvas), генерируется ссылка для его скачивания.

Репозиторий.

Приложение будет разработано на чистом JavaScript.

Для создания шаблона приложения будет использован Vite.

Если вам это интересно, прошу под кат.

Что было до

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

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

Привет, меня зовут Феликс Пискунов. Разрабатываю веб-приложения уже 16 лет. Решил поделиться своими размышлениями по поводу выбора фреймворка и что меня подвигло оставить Angular и уйти без оглядки в React

В одном переданном проекте на NextJs и typescript, попалась “интересная” ошибка при использовании библиотеки react-svg-worldmap. Для решения ошибки, пришлось обращаться к разработчику библиотеки.

Taiga UI — это огромная библиотека компонентов на Angular. Мы в Тинькофф разрабатывали ее внутри пару лет, прежде чем выпустили вторую, мажорную версию на публику. С тех пор прошел год, и я хочу подвести итоги и обозначить планы на 2022 год.

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

Привет, меня зовут Соня! Я – UX/UI дизайнер в hh.ru. В этой статье мы разбираем популярные мифы о конструкторе сайтов и рассказываем, можно ли сделать классный сайт на Тильде и почему это доступнее, чем кажется.

У этой статьи есть видеоверсия для тех, кто захочет посмотреть на фишечки Тильды в динамике.

Привет, Хабр! Меня зовут Евгений Лабутин, я из команды разработки продукта МТС Твой бизнес. Мы разработали свой рецепт приготовления картинок для нашего портала. Благодаря ему удалось сократить их вес на странице до 10 раз относительно уже оптимизированного jpg/png, сохранив при этом простоту разработки – как будто это стандартный img элемент. Разработанный микросервис называется ImageOptimize, из этой статьи вы узнаете, как он работает и что у него под капотом. Мы уже выложили код микросервиса в OpenSource (чему очень рады), поэтому вы тоже можете использовать такую компрессию, настроив ее в несколько простых шагов.