Разработка веб-сайтов

Неотъемлемой частью сайта для знакомств OkCupid являются рекомендации потенциальных партнёров. Они основаны на совпадении множества предпочтений, которые указали вы и ваши потенциальные партнёры. Как вы можете себе представить, существует множество вариантов оптимизации этой задачи.

Однако ваши предпочтения — не единственный фактор, влияющий на то, кого мы вам рекомендуем в качестве потенциального партнёра (или рекомендуем вас самого в качестве потенциального партнёра для других). Если бы мы просто показали всех пользователей, которые соответствуют вашим критериям, без какого-либо ранжирования, то список был бы совсем неоптимальным. Например, если не учитывать недавнюю активность пользователя, то вы можете потратить намного больше времени на общение с человеком, который не заходит на сайт. Кроме указанных вами предпочтений, мы используем многочисленные алгоритмы и факторы, чтобы рекомендовать вам тех людей, которых, по нашему мнению, вы должны увидеть.

После 3 лет разработки и 2,5 лет использования в продакшн-проектах Airbnb, после переписывания кода на TypeScript, мы рады представить вам официальный релиз коллекции графических примитивов visx 1.0  (раньше она называлась vx). Вот — страница проекта на GitHub. Документацию и примеры можно найти на airbnb.io.



Мы поставили себе цель, которая заключалась в том, чтобы унифицировать стек технологий визуализации данных, применяемый во всех проектах Airbnb. В ходе движения к этой цели мы создали новый проект, в котором объединена мощь D3 и удобство React. Среди сильных сторон visx мы можем отметить следующие:

• Использование коллекции способствует созданию бандлов приложений маленького размера. Дело в том, что visx разбита на множество пакетов. Поэтому при её использовании в некоем проекте можно взять из неё лишь то, что нужно.
• Коллекция спроектирована так, чтобы не навязывать программистам некие предопределённые схемы работы. Используя visx, разработчик может использовать собственную систему управления состоянием приложения, свою библиотеку анимации или подходящее ему CSS-in-JS-решение. Высока вероятность того, что при создании вашего React-приложения уже приняты решения о том, как в нём выполняются анимации, о том, какой подход используется для работы с темами, о том, как стилизуются элементы. Visx, в этом плане, ничего нового в приложения не добавляет. Библиотека интегрируется со всем тем, что уже есть в проект.
• Это — не коллекция элементов, «заточенная» под создание графиков. Если вы будете пользоваться визуализационными примитивами для создания графиков, то вы, в итоге, создадите собственную библиотеку, решающую эту задачу. Причём, это будет библиотека, оптимизированная под ваши нужды. Она будет находиться под вашим полным контролем.

Доброго времени суток, друзья!

В данном туториале мы рассмотрим встроенный механизм перетаскивания элементов на странице.

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

Поддержка технологии:



Превью:

• MDN
• Демо
• Код
• Песочница

Наша задача состоит в следующем: реализовать список задач, состоящий из трех колонок: все задачи, задачи, находящиеся в процессе выполнения, завершенные задачи. Разумеется, приложение должно предусматривать возможность добавления и удаления задач. Кроме того, должна быть предусмотрена возможность произвольного расположения задач. Это одна из наиболее интересных частей туториала — отслеживание элемента, находящегося под перетаскиваемым, и определение того, где должен располагаться перетаскиваемый элемент, над или под отслеживаемым.

Для стилизации будет использоваться Bootstrap.

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

Наконец-то руки дошли попробовать новую версию Vue. Я не собираюсь быть объективным в этой статье, я просто расскажу свои впечатления в процессе работы с новой версией, а так же расскажу как её установить и начать работу уже сейчас.

Не смотря на релиз, Vue 3.0 еще не готов для полноценного использования в продакшене. Router и Vuex еще не готовы для работы с новой версией, Vue CLI по умолчанию устанавливает старую версию, не говоря уже о сторонних плагинах и библиотеках, авторы которых не успели их обновить. Вот такой долгожданный и неполноценный релиз мы получили.

Особенно много вопросов вызывает новый синтаксис, так называемый Composition API, который к счастью не заменит полностью привычный и всеми любимый Options API. В пользу новой композиции нам всюду предлагают подобную картинку:

Обычно видео загружаются с помощью тега video (хотя, появился альтернативный метод с использованием img, правда, его возможности ограничены). Способ реализации отложенной загрузки видео зависит от варианта его использования. Давайте обсудим несколько сценариев, для каждого из которых требуется своё решение.

Blacklight — это инспектор конфиденциальности веб-сайтов, выполняющий проверку в реальном времени.

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

Принцип работы Blacklight заключается в посещении каждого веб-сайта headless-браузером (браузером без графического интерфейса), в котором запущено специализированное ПО, созданное The Markup. Это ПО отслеживает, какие скрипты на сайте потенциально могут наблюдать за пользователем, выполняя семь тестов, каждый из которых исследует отдельный известный способ наблюдения.

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

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

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

Статья не поможет найти хорошие градиенты или оттенки. Она предназначена для подбора красивых, чётких цветов для различных категорий информации (например, континентов, отраслей промышленности, видов птиц) в линейных, круговых, полосковых диаграммах и так далее.

Набор уроков по восьмой версии фреймворка. Советы по Laravel и веб-разработке. Используем очереди для переноса изображений. Чистим тяжелые таблицы. Полное описание маршрутизации в Laravel.

ScreenPlay — это опенсорсное приложение для Windows (а скоро — ещё и для Linux и macOS), предназначенное для работы с обоями и виджетами. Оно создано с использованием современных инструментов (C++/Qt/QML), активная работа над ним ведётся с первой половины 2017 года. Код проекта хранится на платформе GitLab.



Автор статьи, перевод которой мы сегодня публикуем, занимается разработкой ScreenPlay. Он столкнулся с рядом проблем, решить которые ему помог переход с QMake на CMake.

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

Можно вечно смотреть на улучшать три вещи: первую, вторую и код, который написан не тобой. Именно ему мы решили посвятить один из ближайших онлайн-митапов:

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

  Истории будут приниматься в чате трансляции на Youtube. Лучшую историю субъективно выберут ведущие в конце стрима. Мы отправим слоника из Москвы в любую точку мира.
  
  У слона есть вторая сторона, на которой написано Symfony. Возможно, кому-то будет важно это знать.
  
  
  Слоник официальный. Ехал к нам 3 месяца.
  
  
  
  

Подключайся в ближайший четверг, 1-го октября, в 19 часов по Москве/Киеву/Минску. Тут можно посмотреть расписание стрима и получить напоминалку.

Под катом — знакомство с участниками и несколько «разогревающих» историй от них.

Сегодня речь пойдёт об очередной JavaScript-библиотеке, предназначенной для разработки интерфейсов. Возникает такое ощущение, что такие библиотеки появляются всё чаще и чаще. В этом материале мы рассмотрим библиотеку Moon.js и раскроем её особенности, о которых нужно знать для того чтобы приступить к работе с ней. В частности, мы поговорим о том, как создавать новые Moon.js-проекты, о том, как создавать элементы интерфейсов, как обрабатывать события. Освоив это руководство, вы сможете пользоваться Moon.js для разработки собственных приложений.

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

Существует большое количество (всего порядка 50) Headless CMS. Это системы управления, в которых реализован новый принцип разделения двух слоев — данных и представления (логика Jamstack).

Доброго времени суток, друзья!

Представляю вашему вниманию справочник по основным хукам React: useState, useEffect, useLayoutEffect, useContext, useReducer, useCallback, useMemo и UseRef.

Источник вдохновения: React Hooks cheat sheet: Unlock solutions to common problems.

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

Полный набор хуков доступен в этом репозитории.

1. Скачиваем репозиторий
2. Устанавливаем зависимости: npm i
3. Запускаем: npm start

Хуки находятся в директории «hooks». Основной файл — index.js. Для того, чтобы выполнить конкретный хук, необходимо раскомментировать соответствующие строки импорта и рендеринга.

Без дальнейших предисловий.

Во время пандемии я, честно говоря, не собиралась изучать Linux, не думала, что умение работать в этой ОС сделает меня продуктивнее. Но, как оказалось, Linux-навыки, и правда, помогают мне быстрее справляться с делами. Всё началось с того, что мне посоветовали «взглянуть на Linux». Я тогда подумала, что делать мне, всё равно, нечего, да ещё и сентябрьский выпуск #IBelieveinDoing оказался как раз о Linux.

Я почувствовала, что всё у меня получится, и отправилась в путешествие по миру Linux. В том выпуске #IBelieveinDoing были уроки не только по Linux, но и по Git. Между этими системами можно провести некоторые параллели. Linux — это опенсорсная ОС, которой пользуются программисты, а Git — это система управления версиями, которую применяют для отслеживания изменений в исходном коде при разработке программ. Надо отметить, что изучение Linux и Git оказалось весьма увлекательным занятием. Но Git — довольно сложная система, поэтому и освоить её основы было тяжелее, чем основы Linux.



В этом материале я хочу поделиться с вами тем, что узнала, осваивая Linux и Git.

Подключить CDN для ускорения загрузки сайта рекомендует чуть ли не каждый инструмент по оптимизации. Беглый поиск показывает, что услугу предоставляют не менее десятка крупных сервисов, однако лишь у немногих можно найти действительно доступные тарифы.

После небольшого ресерча наш рейтинг недорогих CDN провайдеров возглавили BunnyCDN, BelugaCDN и OVH. Сравним их предложения.

Когда-то поиск Яндекса представлял из себя бутерброд. Каждый его слой могли эффективно разрабатывать единицы людей. Однако верхний добавлял пикантности. Этот слой представлял из себя Apache с кучей Perl’овых модулей.

Поддерживать большой объём кода на стареющем языке программирования дорого и сложно, развивать — ещё дороже и сложнее. Так верхний слой Поиска оказался разделён на микросервисы, целую вселенную микросервисов. Как это обычно бывает, создавая что-то своё, мы получили нечто непохожее на всё, существующее снаружи.

Привет, Хабр. Меня зовут Святослав Фельдшеров. Я разрабатываю Apphost в поиске Яндекса. Добро пожаловать в нашу вселенную!

В прошлый раз мы говорили о графиках и траекториях для покадровых анимаций, а сегодня речь пойдет про матрицы. Мы разберемся с тем, как строятся базовые трансформации в CSS, SVG и WebGL, построим отображение 3D-мира на экране своими руками, попутно проводя параллель с таким инструментом, как Three.js, а также поэкспериментируем с фильтрами для фотографий и разберемся, что же за магия такая лежит в их основе.

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