Обновить
512K+

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

Делаем веб лучше

363,84
Рейтинг
Сначала показывать
Порог рейтинга
Уровень сложности

Laravel–Дайджест (28 сентября – 4 октября 2020)

Время на прочтение1 мин
Охват и читатели4.4K

Пакеты для настройки каркаса аутентификации под себя. Подключаем Google Drive. Сравниваем интернет-магазины. Кастомные логи и исключения.


Laravel Дайджест

Читать дальше →

Почему я выбрал Next.js, а не Gatsby, Gridsome или Nuxt?

Время на прочтение9 мин
Охват и читатели31K
Мы, выбирая фреймворк для нового веб-проекта, обычно склонны останавливаться на инструментах, с которыми знакомы, не обращая внимания на то, насколько хорошо они подходят для этого проекта. Я же пробую поступать с точностью до наоборот. Всякий раз, когда у меня возникает такая возможность, я испытываю новые технологии. Что я узнал после таких экспериментов? Почему я, в итоге, считаю своим стандартным инструментом для создания статических сайтов (static site generator, SSG) Next.js?



В этом материале я расскажу о том, как я экспериментировал с разными веб-технологиями. Речь пойдёт о поиске подходящего инструмента в рамках Jamstack, о том, как выбирать именно то, что подойдёт разработчику и хорошо интегрируется в его проект, о том, почему я выбрал Next.js.
Читать дальше →

Современное SEO: качество страниц

Время на прочтение3 мин
Охват и читатели11K

В конце мая с. г. в Google сообщили, что теперь они намерены в алгоритм ранжирования сайтов ввести понятие "качества страницы" (page experience). А в понятие качества страницы они включили: скорость загрузки страницы, интерактивность (т.е. например, чтобы кнопка быстро приобретала способность нажиматься), и стабильность контента во время загрузки (т.е. вы не должны случайно нажимать кнопки или ссылки из-за того что всё на экране прыгает пока страница грузится). Кроме того страница должна быть оптимизирована для мобильных устройств (mobile friendly), безопасна для просмотра, передаваться по протоколу https (не http), и не иметь навязчивой рекламы между страницами (intrusive interstitials).

Читать далее

Понимание спецификации ECMAScript, часть 2

Время на прочтение9 мин
Охват и читатели5.1K

Привет, Хабр! Представляю вашему вниманию перевод статьи под редакцией xfides


Автор оригинала: Marja Hölttä
Перевод первой части.



Давайте еще попрактикуемся в чтении спецификации. Если вы не видели предыдущую статью, самое время сходить ее посмотреть. В первой части мы познакомились с простым методом Object.prototype.hasOwnProperty. Также, посмотрели список абстрактных операций, которые вызываются при выполнении этого метода. Еще мы узнали о специфических сокращениях «?» и «!», которые связаны с обработкой ошибок. И наконец, мы получили информацию о типах языка, типах спецификации, внутренних слотах и внутренних методах.


Готовы для второй части?

Читать дальше →

Зачем нужна выделенная Frontend Core команда и как мы внедряли дизайн систему

Время на прочтение9 мин
Охват и читатели11K


Всем привет, меня зовут Ростислав, я занимаю должность Front Lead в компании ДомКлик. Хочу поделиться с вами опытом создания Web Core команды и сразу ответить на следующие вопросы:


  • Необходима ли такая команда в компании?

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


  • Выгодно ли внедрять такую команду?

Безусловно. Изначально было сложно измерить и спрогнозировать выгоду от её создания, все расчеты, P&L были на словах, в цифрах — только примерные предположения. Спустя год мы можем посчитать сэкономленное время, профиты, и все расчеты говорят о том, что это было не зря.


  • На долгую перспективу ли эта команда?

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


  • Чем эта команда занимается?

Основное направление — дизайн система, но по ходу её разработки у нас появилось еще много интересных задач.

Читать далее

Разработка веб-приложений на встраиваемом портале

Время на прочтение12 мин
Охват и читатели3.6K

Java порталы это особый класс веб-приложений позволяющий разрабатывать достаточно сложные и при том модульные информационные системы, которые напоминают Системы Управления Содержимым (CMS), но для корпоративного сектора. Это подразумевает, что в них обычно заложена возможность работы с иерархиями страниц, приложений, пользователей, процессов, поддерживается интернационализация и есть средства интеграции в корпоративную информационную инфраструктуру. 

На рынке этих систем существуют коммерческие продукты от таких известных компаний как Oracle, SAP, IBM (теперь HCL Technologies Ltd), Red Hat JBoss, и кроме того есть также портал Liferay имеющий приличную опенсорс версию, а также образовательные и другие тематически-ориентированные портальные системы, есть и не вполне порталы, но информационные системы, поддерживающие технологии порталов такие как DMS Alfresco. Поддерживающие означает даже, что в теории приложения разработанные для одной системы можно устанавливать в другую, но на деле это было не совсем так. Производители добавляли свои возможности несовместимые с другими, что оставляло эту не имеющую аналогов фичу в нереализованных.

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

Читать далее

Vespa лучше Elasticsearch для поиска пар среди миллионов мужчин и женщин

Время на прочтение20 мин
Охват и читатели3.6K


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

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

Visx — коллекция графических примитивов для React-приложений, созданная в Airbnb

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



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

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

Drag'n'Drop API: пример использования

Время на прочтение7 мин
Охват и читатели10K
Доброго времени суток, друзья!

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

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

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



Превью:



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

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

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

Vue 3.0 — первый взгляд

Время на прочтение5 мин
Охват и читатели26K

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

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

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

Читать далее

Lazy-loading видео

Время на прочтение4 мин
Охват и читатели19K
image

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

Blacklight — инспектор конфиденциальности веб-сайтов

Время на прочтение15 мин
Охват и читатели5.8K


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

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

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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №434 (21 — 27 сентября 2020)

Время на прочтение3 мин
Охват и читатели8.6K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать дальше →

Ближайшие события

Как выбрать красивые цвета для вашей инфографики

Время на прочтение10 мин
Охват и читатели44K


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

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

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

Laravel–Дайджест (21–27 сентября 2020)

Время на прочтение2 мин
Охват и читатели3.5K

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


Laravel Дайджест

Читать дальше →

История успешного перевода ScreenPlay с QMake на CMake

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



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

Как быстро создать Bootstrap-сайт для бизнеса: 6 полезных инструментов

Время на прочтение2 мин
Охват и читатели30K


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

Рефакторинг в стиле ниндзя и другие приемчики

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

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

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


    Слоник официальный. Ехал к нам 3 месяца.




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

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

Первое знакомство с Moon.js

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


Читать дальше →

Как мы распилили монолит. Часть 2, Frame Manager

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

image
Читать дальше →