Вместе со Стивом Сьюэллом, CEO Builder.io, разбираемся, почему с точки зрения оптимизации производительности изображения лучше загружать через HTML, а не через CSS.
Разработка веб-сайтов *
Делаем веб лучше
Новости
Главное из мира Python за февраль 2023
Раз в месяц мы в Moscow Python Podcast собираемся и обсуждаем новые релизы, PEP, заинтересовавшие нас инструменты и статьи. Под катом — текстовая выжимка из обсуждения.
Встраивание WebGL в HTML-страницу с помощью Three.JS
Приветствую! Я Алексей, 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 и шейдеры, рекомендую вначале ознакомиться с этой технологией, а после вернуться к статье.
О трудном и утомительном пути от идеи до веб-сайта
2017 год. Я уже около шести лет работаю в компании, продающей кубики Рубика, и начинаю испытывать зуд от желания попробовать что-то новое. Несколько лет проработав с физическими товарами, я осознал, что всегда хотел работать в полностью онлайновом и виртуальном бизнесе, в котором не придётся иметь дело с материальными продуктами (и не испытывать связанной с ними головной боли).
Истории
Свой мониторинг сайтов: от идеи до реализации
У моей команды много сайтов на поддержке, а в нашей стране много праздников. В праздники интернет продолжает работать, реклама продолжает крутиться, люди продолжают покупать на сайтах, а значит и сайты должны функционировать 24/7 вне зависимости от цвета дня календаря. А как узнать, что все в порядке, если ты жаришь шашлык на даче в 100 км. от столицы? Все очевидно — нужен сервис, который будет мониторить сайты и пинговать дежурного программиста, если что‑то пошло не так...
Проводим тестирование и анализ поиска в интернет магазине
В интернет-магазинах день за днем происходят сотни тысяч визитов, и каждый из них может стать потенциальной покупкой для компании. Анализ поведения пользователей на сайте является ключевым моментом в развитии любого интернет-магазина, позволяя определить причины, по которым пользователи покидают сайт, и выработать соответствующие решения.
В данной статье мы рассмотрим результаты анализа поведения пользователей на сайте Кабель РФ[ссылка удалена модератором], на примере данных, полученных из Яндекс.Метрики, Google аналитики и UI тестирования. Данные были собраны методом веб-аналитики и представляют собой набор показателей, таких как количество визитов, отказов, длительность сессии и др.
Возможно кому-то будет полезен некий алгоритм анализа и тестирования работы поиска на конкретном примере.
Использование Rust в Веб-Разработке
Всем привет! Наверно многие уже знают про язык программирования Rust. Но если кто не знает, Rust - мультипарадигмальный компилируемый язык программирования общего назначения. Всем известно что Rust в основном используется для создания CLI приложений и системного программирования, но у него есть другие области. Например - разработка видео-игр, но мы не об этом. Сегодня я бы хотел обсудить веб-программирование на Rust.
Стартап в Соло. Часть 3: упрощаем продукт
В предыдущей статье я рассказал, как появилась идея Telegram чата для сайта, как создавался MVP и сколько пользователей было вначале. В этой статье я расскажу, как я улучшал конверсию из регистрации в подключенный на сайт виджет, а также как начал анализировать источники новых пользователей.
Распознавание речи через Deepgram API в PWA
Распознавание речи — штука довольно прикольная и не очень полезная. С одной стороны голосовой интерфейс для общения с роботами в фантастике является обычным, наверное, годов с 60-х, а с другой стороны — в наше время голосовой интерфейс не продвинулся сильно дальше "Алиса, а какая у нас погода на завтра?". Для того, чтобы самому составить мнение о текущих возможностях систем распознования речи, я попробовал использовать сервис Deepgram в браузерном приложении. Команда сервиса в ноябре прошлого года привлекла дополнительное финансирование в размере $47 млн. и с оптимизмом смотрит в будущее. Сервис хорош тем, что распознаёт русский язык (не все STT-сервисы это делают), даёт приличный кредит для тестирования возможностей (из 150 промо-денег я израсходовал меньше 0.50 "на поиграться"), не требует серверной части (всё работает из браузера). Готовая демка — тут, детали — под катом.
Рано выбрасывать iframe в 2022-м году
Многие считают, что iframe это что-то древнее и небезопасное, лучше не марать об это руки и не использовать. У него сложилась довольно грязная репутация. Но, на самом деле, есть ситуации, где он просто незаменим. Побуду неким адвокатом iframe и расскажу, чем он хорош.
Меня зовут Андрей Кузнецов, я занимаюсь версткой с 2005 года, был flash-ром до 2012 года, сейчас работаю в компании «Рунет Бизнес Системы» frontend-лидом. Мы занимаемся интернет-эквайрингом, всевозможными оплатами в Интернете и всеми сопутствующими процессами. Подробно расскажу, что умеет iframe на данный момент времени, о его развитии. Из этих знаний уже можно что-то лепить, конструировать и решать те самые задачи, которые помогают развиваться бизнесу.
Типизируй с нами, типизируй, как мы…
Сказ о том, как я каррирование типизировал
Кастомная стратегия виртуального скроллинга для просмотра pdf
Angular CDK имеет широкие возможности для скроллинга плоского списка. Если размер каждого элемента одинаков, то можно воспользоваться FixedSizeVirtualScrollStrategy
: всего лишь нужно прокинуть размер элемента в пикселях, проитерироваться по данным и виртуальный скроллинг готов. Но что делать, если размер элементов разный? Данную проблему можно решить кастомной стратегией виртуального скроллинга. В данной статье мы рассмотрим как построить такую стратегию для pdf-документов.
CSS сolor-сontrast(): пошаговое руководство
Если вы испытывали раздражение из-за невозможности легко перемещаться по сайту, с высокой вероятностью вы столкнулись с недоступностью в том или ином виде. Недоступность и неприятные впечатления от использования схожи. Если вам сложно прочитать мелкий шрифт, то человеку с нарушениями зрения, возможно, вообще не прочитает его.
Функция color-contrast()
используется для удобства чтения, придания необходимого контраста между текстом и фоном на веб-странице. Это особенно важно для людей с нарушениями зрения, которым трудно прочитать текст с низким контрастом.
Будни техпода. Разворачиваем сайт из конструктора на vds за 130 рублей
Думаю ни для кого не секрет, что одной из наиболее популярных задач, которую выполняют VDS серверы, является хостинг веб-сайтов. Очевидно, и вопросов на эту тему нам в поддержку приходит немало. Интересуются как возможностью заказать готовый сайт, так и параметрами сервера, которых будет достаточно для работы сайта. Кто-то и вовсе думает, что само понятие хостинга уже подразумевает под собой наличие готового сайта на нём, и сильно удивляются, когда обнаруживают чистую операционную систему на сервере. Сразу оговорюсь, данную статью я задумал в первую очередь для не совсем опытных пользователей, кто не знаком или не хочет разбираться в вёрстке и cms-системах, но при этом хотел бы иметь собственный небольшой сайт. Мы пошагово, но не сильно углубляясь, рассмотрим этапы начиная с создания сайта и заканчивая его размещением на VDS сервере.
Стартап в соло. Часть 2: идея и первая версия
Продолжаю рассказывать о том, как я запустил свой Telegram чат для сайта. В этой статье расскажу о том, как выглядела первая версия продукта, из каких технических компонентов состояла на этапе MVP и как это всё выглядело визуально.
Синий свет — зеленый свет: релизим без даунтаймов
Привет! Меня зовут Николай Тихонов, я работаю в команде Tinkoff eCommerce. Я начинал как фронтендер, а потом стал писать бэкенд и занялся CI/CD. А дальше — FullStack Ops и руководство процессами и собственной командой. Сегодня расскажу про FrontOps, blue-green и релизы без даунтайма. Эта статья — текстовая адаптация моего доклада для FrontendConf 2022.
С минимальными знаниями Ops-технологий фронтендер может показывать каждому пользователю, что он сделал, и в одиночку реализовывать крутые продукты. А релизы с даунтаймом все еще существуют и не дают клиентам пользоваться продуктом ночью, поэтому в этой статье поговорим про практику blue-green.
Как избежать проблем при запуске MVP
Всем привет! Меня зовут Алексей Половинкин, и я отвечаю за Python в AGIMA. За последние 2 года мне повезло запускать сразу 2 крупных MVP‑проекта: классифайд автомобилей для Казахстана и проект в сфере телемедицины. За это время у меня и моей команды накопилось много опыта по запуску подобных проектов, и им хотелось бы поделиться. В этой статье рассказываю, как не допускать ошибок на этапе MVP и какие практики полезно внедрять сразу.
Полное руководство по Remix. Часть 2
Привет, друзья!
В этой серии статей я продолжаю рассказывать о Remix — новом фреймворке для создания клиент-серверных веб-приложений на JavaScript (React) со встроенной поддержкой TypeScript.
Remix позволяет разрабатывать так называемые PESPA (Progressive Enhancement Single Page Apps — одностраничные приложения с возможностью прогрессивного улучшения). Это означает следующее:
- почти весь код приложения "живет" на сервере;
- приложение остается функциональным даже при отсутствии JS;
- JS используется только для прогрессивного улучшения UX (User Experience — пользовательский опыт).
Подробнее о PESPA и других архитектурах веб-приложений можно почитать здесь.
Очевидно, что разработчики Remix вдохновлялись Next.js и Svelte.
К слову, здесь вы найдете полное руководство по Next.js.
В первой части мы прошлись по руководствам из официальной документации, во второй — более подробно рассмотрим возможности, предоставляемые Remix.
Это часть номер два.
Эргономичный мониторинг на практике
Мониторинг проекта — это комплексная задача. В неё входит не только передача метрик, но и сбор логов, трейсов, health-чеки, правила для алертов и система их доставки до ответственных разработчиков.
Важно, чтобы мониторинг развивался планомерно в процессе разработки бизнес-логики. В этой статье я расскажу о том, как подойти к реализации мониторинга со стороны разработки так, чтобы он был полезен и удобен в использовании.
Основы веба, которые должен знать начинающий разработчик
В этом посте я объясню, как работает Интернет. Мы ответим на вопросы наподобие «Как браузер находит файл HTML для запрошенной веб-страницы?», «Как файл HTML превращается в интерфейс пользователя?», «Что можно сделать, чтобы ускорить этот процесс?», «Как устанавливается и поддерживается связь с сервером?», а также рассмотрим следующие концепции:
- Клиент-серверную модель
- Жизненный цикл запроса веб-страницы
- Hypertext Transfer Protocol
- Как браузеры рендерят контент