Рубрика «Разработка веб-сайтов»

enter image description here

Привет! Меня зовут Слава Волков, и я фронтенд-разработчик в Badoo. Сегодня я хотел бы немного рассказать про сбор статистики с фронтенда.

Мы знаем, что аналитика позволяет оценить эффективность работы любого веб-сайта, улучшить его работу, а значит, повысить уровень продаж и усовершенствовать взаимодействие пользователей с сайтом. Проще говоря, аналитика – это способ контроля над процессами, происходящими на веб-сайте. В большинстве случаев для обычных сайтов достаточно установить Google Analytics или «Яндекс.Метрику» – их возможностей вполне достаточно.

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

Читать полностью »

Как создать продукт за 11 дней - 1
Наша школа запустила международную онлайн-олимпиаду по английскому языку Skyeng Super Cup, она проходит с 6 марта по 14 апреля. Школьники 5-11 классов смогут бесплатно проверить свои знания и посоревноваться за интересные призы. Они вряд ли узнают, что этот продукт был разработан нашим «спецназом» всего за 11 дней – сегодня мы расскажем читателям «Хабры», как у нас это получилось.
Читать полностью »

В предыдущей серии (Как слямзить Хабр по-быстрому) получил MVP на базе Create React App (CRA). Но это SPA, что не очень подходит, когда требуется индексация в поисковиках. Хорошо, нужен Server Side Rendering (SSR). И желательно из коробки, а не на коленке. Крайне расточительно тратить ресурсы на самостоятельную разработку базовых технологий. Как выбирать платформу с поддержкой SSR? На практике, конечно, POC. Попробую реализовать CRUD с формой ввода на Material-UI, рассматривая кандидатов: React Starter Kit (RSK), NEXT.js и Electrode (не путать с Electron).

Исходники на GitHub.

Читать полностью »

Многие ли из нас сталкивались на практике с этим модным словом "Big Data", работая в заурядных компаниях веб-разработчиками? Скорее вы, как и мы, разрабатываете каждый день одинаковые сайты на одинаковых CMS, часто даже не задумываясь об их производительности.

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

Это рассказ о том, как пара амбициозных веб-разработчиков впервые столкнулась с задачей обработки "больших данных".

image

Читать полностью »

Автор — Нолан Лоусон, менеджер программы Microsoft Edge

Прокрутка — одно из самых древних взаимодействий в вебе. Задолго до появления методов pull-to-refresh и списков бесконечной загрузки скромная полоса прокрутки решила изначальную проблему масштабирования в вебе: как взаимодействовать с контентом, который распространяется за пределы доступной области просмотра?

Прокрутка в вебе: букварь - 1

Сегодня прокрутка всё ещё остаётся самым фундаментальным взаимодействием в Сети, и, возможно, самым неправильно понятым. Например, вы знаете разницу между следующими сценариями?

  • Пользователь прокручивает страницу двумя пальцами на тачпаде
  • Пользователь прокручивает одним пальцем на тачскрине
  • Пользователь прокручивает колесо мыши
  • Пользователь щёлкает по полосе прокрутки и тянет её вниз и вверх
  • Пользователь нажимает стрелки «вверх», «вниз», PageUp, PageDown и «пробел» на клавиатуре

Если спросите среднего интернет-пользователя (или даже среднего веб-разработчика!), они могут сказать вам, что эти действия равнозначны. Правда гораздо более интересна.
Читать полностью »

Пробуем делать web-frontend на Rust (WebAssembly) - 1 Недавно вышла новость про то, что webassembly теперь включен в firefox 52 из коробки. А потом еще и chrome 57 подтянулся (правда, там вроде бы были какие-то баги с запуском). Я решил, что обязательно надо попробовать.

Для тех, кто не знает, что такое webassembly краткая информация: webassembly (или wasm) — это низкоуровневый язык, который понимают браузеры, и в который можно будет скомпилировать программы, написанные на популярных языках. Это гораздо более выгодно по скорости парсинга и выполнения, чем компилировать эти языки в чистый javascript или какой-нибудь asm.js.

Wasm задумывался в основном для c/c++, но, на удивление, уже все готово, чтобы скомпилировать программу на rust. Давайте сделаем небольшое приложение и посмотрим, что получится. Все это будем компилировать на Ubuntu. Без теоретических деталей, просто "пощупаем".

Читать полностью »

Разрабатываем видеочат между браузером и мобильным приложением - 1

Империи зла нередко получают лучи ненависти со стороны конечных пользователей. Не смотря на это, Uber частично оплачивает наши поездки, хоть и временно, а Google придал значительное ускорение технологии WebRTC, которая бы так и оставалась проприетарной и сильно платной софтиной для узких целей b2b, если бы не ИЗ.

После появления WebRTC, видеочаты стало делать проще. Появились различные API и сервисы, серверы и фреймворки. В данной статье мы подробно опишем еще один способ разработки видеочата между веб-браузером и нативным Android-приложениемЧитать полностью »

FLIF

Как формат JPEG произвел в свое время революцию среди форматов изображений, так и новый формат FLIF обещает такого же масштаба событие для дизайнеров и веб-разработчиков.

FLIF (Free Lossless Image Format) – новый формат файлов для изображений, обеспечивающий беспрецедентное сжатие без потерь. Файлы получаются:

  • На 14% меньше, чем WebP, без потерь
  • На 22% меньше, чем BPG, без потерь
  • На 33% меньше, чем сжатый через ZopfliPNG PNG-файл
  • На 43% меньше, чем обычные PNG-файлы
  • На 46% меньше, чем оптимизированные по Adam7 чересстрочные PNG-файлы
  • На 53% меньше, чем JPEG 2000, без потерь
  • На 74% меньше, чем JPEG XR, без потерь

На Хабре уже опубликовано пару статей на тему FLIF. Но мы пойдем дальше: какую еще практическую пользу несет формат, кроме меньшего размера для любого типа изображений?
Читать полностью »

Дружим Angular с Google

Google ненавидит SPA

Когда мы говорим про современные интернет магазины, мы представляем себе тяжелые для понимания серверы, рендрящие тысячи статических страничек. Причем именно эти тысячи отрендеренных страниц одна из причин, почему Single Page Applications не прижились в электронной коммерции. Даже крупнейшие магазины электронной коммерции по-прежнему выглядят как куча статических страниц. Для пользователя это нескончаемый цикл кликов, ожиданий и перезагрузки страниц.

Читать полностью »

Третья и заключительная часть перевода статьи из блога сервиса Auth0 A Brief History of JavaScript. Ключевые моменты: транспайлеры и ECMAScript 2015, немного о новом процессе подготовки обновлений, чего ждать в будущем и как на него повлияют Asm.js и WebAssembly. Перевод подготовлен отделом фронтенд-разработки компании Лайв Тайпинг.

Краткая история JavaScript. Часть 1
Краткая история JavaScript. Часть 2

Краткая история JavaScript. Часть 3 - 1
Читать полностью »