![](https://webcf.waybackmachine.org/web/20230315102233im_/https://habrastorage.org/getpro/habr/upload_files/19a/252/47c/19a25247c4b21ef3c0f8448f861ab37f.jpg)
Вместе со Стивом Сьюэллом, CEO Builder.io, разбираемся, почему с точки зрения оптимизации производительности изображения лучше загружать через HTML, а не через CSS.
Делаем веб лучше
Вместе со Стивом Сьюэллом, CEO Builder.io, разбираемся, почему с точки зрения оптимизации производительности изображения лучше загружать через HTML, а не через CSS.
Раз в месяц мы в Moscow Python Podcast собираемся и обсуждаем новые релизы, PEP, заинтересовавшие нас инструменты и статьи. Под катом — текстовая выжимка из обсуждения.
Приветствую! Я Алексей, frontend‑разработчик в SimbirSoft. Вы, возможно, видели потрясающие веб‑сайты, представленные на www.awwwards.com. Это онлайн‑каталог лучших веб‑сайтов, который оценивает и награждает творческие и инновационные работы веб‑дизайнеров и разработчиков. На этом сайте можно найти множество примеров креативного веб‑дизайна, анимаций и визуальных эффектов. Такие удивительные анимации обычно разрабатываются с использованием WebGL. Эта технология позволяет более свободно и творчески подходить к созданию впечатляющих визуальных эффектов без ущерба для производительности. Для работы с WebGL используются такие библиотеки, как Three.js, PIXIJS или BABYLON, которые также популярны при создании игр.
В данной статье мы рассмотрим совмещение WebGL‑анимации с прокруткой страницы HTML, используя библиотеку Three.js. Работа с ней во многом схожа с работой 3D‑редактора (3ds Max, Maya, Blender и т. д.). Для получения результата в виде картинки или анимации необходимо создать сцену, поместить в нее камеру, создать примитив (геометрию или 3D‑модель), создать источник освещения и запустить процесс рендеринга.
Эта статья будет полезна middle и senior фронтенд‑разработчикам, которые хотят ознакомиться с Three. В статье очень мало теории и вводных материалов, акцент сделан на практической части. Если вы совсем не знаете, как работает Three.js и шейдеры, рекомендую вначале ознакомиться с этой технологией, а после вернуться к статье.
У моей команды много сайтов на поддержке, а в нашей стране много праздников. В праздники интернет продолжает работать, реклама продолжает крутиться, люди продолжают покупать на сайтах, а значит и сайты должны функционировать 24/7 вне зависимости от цвета дня календаря. А как узнать, что все в порядке, если ты жаришь шашлык на даче в 100 км. от столицы? Все очевидно — нужен сервис, который будет мониторить сайты и пинговать дежурного программиста, если что‑то пошло не так...
В интернет-магазинах день за днем происходят сотни тысяч визитов, и каждый из них может стать потенциальной покупкой для компании. Анализ поведения пользователей на сайте является ключевым моментом в развитии любого интернет-магазина, позволяя определить причины, по которым пользователи покидают сайт, и выработать соответствующие решения.
В данной статье мы рассмотрим результаты анализа поведения пользователей на сайте Кабель РФ[ссылка удалена модератором], на примере данных, полученных из Яндекс.Метрики, Google аналитики и UI тестирования. Данные были собраны методом веб-аналитики и представляют собой набор показателей, таких как количество визитов, отказов, длительность сессии и др.
Возможно кому-то будет полезен некий алгоритм анализа и тестирования работы поиска на конкретном примере.
Всем привет! Наверно многие уже знают про язык программирования Rust. Но если кто не знает, Rust - мультипарадигмальный компилируемый язык программирования общего назначения. Всем известно что Rust в основном используется для создания CLI приложений и системного программирования, но у него есть другие области. Например - разработка видео-игр, но мы не об этом. Сегодня я бы хотел обсудить веб-программирование на Rust.
В предыдущей статье я рассказал, как появилась идея Telegram чата для сайта, как создавался MVP и сколько пользователей было вначале. В этой статье я расскажу, как я улучшал конверсию из регистрации в подключенный на сайт виджет, а также как начал анализировать источники новых пользователей.
Распознавание речи — штука довольно прикольная и не очень полезная. С одной стороны голосовой интерфейс для общения с роботами в фантастике является обычным, наверное, годов с 60-х, а с другой стороны — в наше время голосовой интерфейс не продвинулся сильно дальше "Алиса, а какая у нас погода на завтра?". Для того, чтобы самому составить мнение о текущих возможностях систем распознования речи, я попробовал использовать сервис Deepgram в браузерном приложении. Команда сервиса в ноябре прошлого года привлекла дополнительное финансирование в размере $47 млн. и с оптимизмом смотрит в будущее. Сервис хорош тем, что распознаёт русский язык (не все STT-сервисы это делают), даёт приличный кредит для тестирования возможностей (из 150 промо-денег я израсходовал меньше 0.50 "на поиграться"), не требует серверной части (всё работает из браузера). Готовая демка — тут, детали — под катом.
Многие считают, что iframe это что-то древнее и небезопасное, лучше не марать об это руки и не использовать. У него сложилась довольно грязная репутация. Но, на самом деле, есть ситуации, где он просто незаменим. Побуду неким адвокатом iframe и расскажу, чем он хорош.
Меня зовут Андрей Кузнецов, я занимаюсь версткой с 2005 года, был flash-ром до 2012 года, сейчас работаю в компании «Рунет Бизнес Системы» frontend-лидом. Мы занимаемся интернет-эквайрингом, всевозможными оплатами в Интернете и всеми сопутствующими процессами. Подробно расскажу, что умеет iframe на данный момент времени, о его развитии. Из этих знаний уже можно что-то лепить, конструировать и решать те самые задачи, которые помогают развиваться бизнесу.
Angular CDK имеет широкие возможности для скроллинга плоского списка. Если размер каждого элемента одинаков, то можно воспользоваться FixedSizeVirtualScrollStrategy
: всего лишь нужно прокинуть размер элемента в пикселях, проитерироваться по данным и виртуальный скроллинг готов. Но что делать, если размер элементов разный? Данную проблему можно решить кастомной стратегией виртуального скроллинга. В данной статье мы рассмотрим как построить такую стратегию для pdf-документов.
Если вы испытывали раздражение из-за невозможности легко перемещаться по сайту, с высокой вероятностью вы столкнулись с недоступностью в том или ином виде. Недоступность и неприятные впечатления от использования схожи. Если вам сложно прочитать мелкий шрифт, то человеку с нарушениями зрения, возможно, вообще не прочитает его.
Функция color-contrast()
используется для удобства чтения, придания необходимого контраста между текстом и фоном на веб-странице. Это особенно важно для людей с нарушениями зрения, которым трудно прочитать текст с низким контрастом.
Продолжаю рассказывать о том, как я запустил свой Telegram чат для сайта. В этой статье расскажу о том, как выглядела первая версия продукта, из каких технических компонентов состояла на этапе MVP и как это всё выглядело визуально.
Привет! Меня зовут Николай Тихонов, я работаю в команде Tinkoff eCommerce. Я начинал как фронтендер, а потом стал писать бэкенд и занялся CI/CD. А дальше — FullStack Ops и руководство процессами и собственной командой. Сегодня расскажу про FrontOps, blue-green и релизы без даунтайма. Эта статья — текстовая адаптация моего доклада для FrontendConf 2022.
С минимальными знаниями Ops-технологий фронтендер может показывать каждому пользователю, что он сделал, и в одиночку реализовывать крутые продукты. А релизы с даунтаймом все еще существуют и не дают клиентам пользоваться продуктом ночью, поэтому в этой статье поговорим про практику blue-green.
Всем привет! Меня зовут Алексей Половинкин, и я отвечаю за Python в AGIMA. За последние 2 года мне повезло запускать сразу 2 крупных MVP‑проекта: классифайд автомобилей для Казахстана и проект в сфере телемедицины. За это время у меня и моей команды накопилось много опыта по запуску подобных проектов, и им хотелось бы поделиться. В этой статье рассказываю, как не допускать ошибок на этапе MVP и какие практики полезно внедрять сразу.
Привет, друзья!
В этой серии статей я продолжаю рассказывать о Remix — новом фреймворке для создания клиент-серверных веб-приложений на JavaScript (React) со встроенной поддержкой TypeScript.
Remix позволяет разрабатывать так называемые PESPA (Progressive Enhancement Single Page Apps — одностраничные приложения с возможностью прогрессивного улучшения). Это означает следующее:
Подробнее о PESPA и других архитектурах веб-приложений можно почитать здесь.
Очевидно, что разработчики Remix вдохновлялись Next.js и Svelte.
К слову, здесь вы найдете полное руководство по Next.js.
В первой части мы прошлись по руководствам из официальной документации, во второй — более подробно рассмотрим возможности, предоставляемые Remix.
Это часть номер два.
Мониторинг проекта — это комплексная задача. В неё входит не только передача метрик, но и сбор логов, трейсов, health-чеки, правила для алертов и система их доставки до ответственных разработчиков.
Важно, чтобы мониторинг развивался планомерно в процессе разработки бизнес-логики. В этой статье я расскажу о том, как подойти к реализации мониторинга со стороны разработки так, чтобы он был полезен и удобен в использовании.