Обновить
512K+

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

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

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

Какой будет новая версия Vuex?

Время на прочтение7 мин
Охват и читатели6.2K
Vuex — стейт менеджер для Vue приложений. Его следующая версия — Vuex 4, которая практически готова к официальному релизу. Она добавит поддержку Vue 3, но не принесет никакой новой функциональности.

Несмотря на то, что Vuex считается отличным решением и многие разработчики выбирают его как основную библиотеку для управления состоянием, они надеются получить больше возможностей в будущих релизах. Поэтому, пока Vuex 4 только готовится к выходу, один из его разработчиков, Kia King Ishii (входит в состав core-команды) уже делится планами для следующей, 5 версии. Стоит заметить, что это только планы и некоторые вещи могут измениться, тем не менее основное направление уже выбрано. О нем и пойдет речь.
Читать дальше →

Бесплатные хостинги для веб-разработчиков

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

Привет, Хабр!

Одним из наиболее популярных направлений разработки сегодня является веб. И когда нужно разместить свой проект где-нибудь, кроме localhost, многие сталкиваются с трудностями, ведь хостинг должен быть быстрым, удобным и, желательно, бесплатным :)

В этом списке вы найдете 15 бесплатных сервисов, где легко сможете разместить свой проект и не заплатите ни копейки. Погнали!

Читать далее

Что выбрать в качестве библиотеки компонентов для React-проекта

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

Меня зовут Ксюша Луговая. В СберКорусе я занимаюсь поддержкой библиотеки React-компонентов Korus-UI. 

С проблемой выбора библиотеки рано или поздно сталкивается почти каждый разработчик, и порой решение может быть нетривиальным. Возникают вопросы: чем руководствоваться при выборе библиотеки, какие популярные решения предлагает рынок, какие у них плюсы и минусы? Обзоры и отзывы не всегда помогают найти решение.

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

Читать далее

Ловушки для современного PHP

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


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


После множества обсуждений этого вопроса, я хотел бы поделиться с вами выводами, к которым пришёл: под катом вы узнаете, с какими трудностями PHP предстоит столкнуться в перспективе самых ближайших лет.

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

CSS: о выводе коротких и длинных текстов

Время на прочтение8 мин
Охват и читатели59K
Когда, пользуясь возможностями CSS, создают макет страницы, важно учитывать то, что в различных элементах этой страницы могут выводиться короткие и длинные текстовые материалы. Страницы, кроме того, нужно тестировать на предмет того, как они отображают тексты разной длины. Если разработчик чётко понимает то, как обрабатывать различные тексты, выводимые на странице, если он соответствующим образом спроектировал макет, это способно избавить его от множества неприятных неожиданностей.



Есть много ситуаций, в которых изменение некоего текстового фрагмента путём добавления или удаления всего одного слова способно заметно изменить внешний вид страницы, или, что ещё хуже «поломать» макет и сделать невозможной нормальной работу с сайтом. Когда я только начинал изучать CSS, я недооценивал последствия, к которым может привести добавление единственного слова в некий элемент или удаление из него всего одного слова. Здесь я хочу поделиться различными способами обработки текстов разной длины средствами CSS.
Читать дальше →

Монолит vs. Микрофронтенды

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

Вы идёте в ногу со временем, и ваше веб-приложение использует самые передовые технологии? Тогда вы совершенно точно используете микрофронтенды! Достаточно провокационно, правда?

Читать далее

Три малоизвестных факта об AVIF

Время на прочтение5 мин
Охват и читатели41K
AVIF — графический формат, основанный на видеокодеке AV1, представляет собой один из самых современных форматов хранения изображений. Судя по ранним публикациям и исследованиям, AVIF показывает достойные результаты в сравнении с JPEG и WebP. Но, даже учитывая то, что этот формат хорошо поддерживается браузерами, AVIF, в плане кодирования и декодирования изображений, всё ещё представляет собой ультрасовременную технологию, которой свойственны определённые проблемы.



Несомненно то, что использование AVIF позволяет эффективно сжимать изображения, что помогает сокращать объёмы данных, передаваемые от серверов к клиентским системам. AVIF-изображения, при этом, хорошо выглядят. Но, прежде чем принимать решение о полном переходе на AVIF, стоит знать о некоторых особенностях этого формата, которым и посвящён этот материал.
Читать дальше →

#lazy_builder (не путать с lazy load) в Drupal 8/9

Время на прочтение5 мин
Охват и читатели2.9K
Продолжая изучать Drupal, мы наткнулись на очень интересную технологию, которая в него встроена. И которая, на наш взгляд, используется неоправданно мало. И совершенно зря. Потому что подход, который использует эта технология, позволяет мгновенно отдать высоконагруженную (или просто долго формирующуюся) страницу пользователю, а потом «доотдать» ему данные, требующие много времени на формирование. И изучая эту технологию, мы столкнулись с тем, что нет ни одного простого объяснения, что это и как это запустить. Нет, объяснения-то есть. Простых нету. Сейчас мы попытаемся восполнить эту неприятность.
Читать дальше →

Полный стек на примере списка задач (React, Vue, TypeScript, Express, Mongoose)

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


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

В данном туториале я покажу вам, как создать фуллстек-тудушку.

Наше приложение будет иметь стандартный функционал:

  • добавление новой задачи в список
  • обновление индикатора выполнения задачи
  • обновление текста задачи
  • удаление задачи из списка
  • фильтрация задач: все, активные, завершенные
  • сохранение задач на стороне клиента и в базе данных

Выглядеть наше приложение будет так:


Для более широкого охвата аудитории клиентская часть приложения будет реализована на чистом JavaScript, серверная — на Node.js. В качестве абстракции для ноды будет использован Express.js, в качестве базы данных — сначала локальное хранилище (Local Storage), затем индексированная база данных (IndexedDB) и, наконец, облачная MongoDB.

При разработке клиентской части будут использованы лучшие практики, предлагаемые такими фреймворками, как React и Vue: разделение кода на автономные переиспользуемые компоненты, повторный рендеринг только тех частей приложения, которые подверглись изменениям и т.д. При этом, необходимый функционал будет реализован настолько просто, насколько это возможно. Мы также воздержимся от смешивания HTML, CSS и JavaScript.

Яндекс отключил расширения с аудиторией в 8 млн пользователей. Объясняем, почему мы пошли на такой шаг

Время на прочтение14 мин
Охват и читатели360K
Сегодня мы приняли решение отключить расширения SaveFrom.net, Frigate Light, Frigate CDN и некоторые другие, установленные у пользователей Яндекс.Браузера. Совокупная аудитория этих инструментов превышает 8 млн человек.

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



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

Самые популярные языки программирования бэкенда: для чего они подходят лучше всего и какие компании их используют

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


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

Вопросы для собеседования по хукам React

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

В данной статье приведены примеры вопросов и задач по React Hooks для собеседования

Читать далее

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

DartUP 2020: итоги и видеозаписи докладов

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


Вот и отгремел DartUP 2020! Два дня мы слушали доклады про Dart и Flutter, играли в Code Kombat и Bugz Arena и общались с участниками и спикерами в SpatialChat. Получилось ничуть не менее атмосферно, чем в офлайне. В этой статье мы подведем итоги конференции и поделимся с вами видеозаписями докладов на русском и английском.

Сервис для технического собеседования 2.0 — видеозвонки, запуск кода, тестовые задания

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


UPD: обновил превью на новую. meet2code.com

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

Прикрутил firebase в качестве бэкенда, добавил видеозвонки, запуск кода на фронте, пока это React, Vue и Angular, все только последних версий.

Отвлёкся от допиливания текущего функционала и добавил тестовые задания, чтобы было, что разобрать на собеседовании, например. Добавил предварительное интервью, чтобы после знакомства с кандидатом информация сразу была в анкете.

Но львиная доля времени ушла на рефакторинг и правки багов, это ещё хорошо, что я на Typescript пишу.
Читать дальше →

Как мы распилили монолит. Часть 4. И как Angular между приложениями пошарили

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

В первой, второй и третьей частях мои коллеги рассказали, как и почему мы распиливали монолит. 

Если коротко, то мы создали решение, которое позволило в рамках одной открытой страницы браузера запускать несколько независимых Angular-приложений, шарить между ними данные, управлять роутингом и аутентификацией. Мы научились бороться с утечками памяти и решать конфликты глобальных стилей приложений. Но одна проблема оставалась открытой — каждое приложение несло в своем банде Angular, RxJS, zone.js и т. д. И в этой статье я расскажу, как мы ее решили.

Читать далее

Ещё раз о производительности фреймворков Python для веб разработки

Время на прочтение2 мин
Охват и читатели13K
Недавно мне пришлось начинать проект нового веб сервиса, и я решил протестировать максимальную нагрузочную способность Django, а заодно сравнить её с Flask’ом и AIOHTTP. Результат показался мне неожиданным, поэтому я «просто оставлю» его тут.
Читать дальше →

Яндекс.Карты API, я устал. Я ухожу

Время на прочтение3 мин
Охват и читатели84K
О последней и других каплях в чаше решения о прекращении использования Яндекс.Карты API.

Что случилось?


С 1 ноября Яндекс.Карты уменьшили лимиты на бесплатное использование HTTP API Геокодера с 25 000 до 1 000 запросов в сутки. Но не всех об этом уведомили.
Читать дальше →

Разработка сложных компонентов: деливерим быстро, поддерживаем легко

Время на прочтение7 мин
Охват и читатели4.3K
Всем привет, меня зовут Роман Пятаков! Я техлид во фронтенд-команде Lamoda. И сегодня хочу поговорить с вами о разработке сложных компонентов.

Lamoda — это технически сложный продукт, которым пользуются 10 миллионов пользователей ежемесячно, насчитывающий более 100 внутренних подсистем. Вершина этого айсберга – интерфейс онлайн-магазина, или фронтенд. Наша команда занимается разработкой и поддержкой UI десктопного и мобильного сайтов, тех частей нативных приложений для iOS, Android, которые сделаны на WebView, а также разными маркетинговыми «добавками» (это баннеры и лендинги).

В своей работе мы, конечно же, используем компоненты. Компоненты нам попадаются всякие, но есть и такие, которые по праву можно назвать сложными. Вы сразу подумали про навороченные формы или эффектные графики? Я вас удивлю, но даже обычное модальное окно может создать проблемы в разработке. Около года назад на мои плечи легла задача разработать этот с виду несложный компонент, в итоге вылившаяся в три календарных месяца работы. К счастью, из этого неуклюжего опыта я вынес три урока – три принципа, которыми сегодня с вами и поделюсь, чтобы вы не наступали на те же грабли и сделали свою работу эффективней.

Сразу оговорюсь, что мы в компании используем стек на основе Vue.js. Но если у вас React или Angular, эта статья все равно будет полезна, так как выделенные мною принципы универсальны.

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

Best practices для клиент-серверного проекта PoC

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

Типичный клиент-серверный проект PoC (Proof of Concept) для веба состоит из клиента с GUI, сервера c бизнес логикой и API между ними. Также используется база данных, хранящая оперативную информацию и данные пользователей. Во многих случаях необходима связь с внешними системами со своим API.

Когда у меня возникла необходимость в создании проекта PoC, и я начал разбираться в деталях, то оказалось, что порог вхождения в веб-программирование весьма высок. В крупных проектах для каждого компонента есть выделенные специалисты: front-end, back-end разработчики, UX/UI дизайнеры, архитекторы баз данных, специалисты по API и информационной безопасности, системные администраторы. В небольшом PoC надо самому во всем разобраться, выбрать подходящее техническое решение, реализовать и развернуть. Ситуацию ухудшает тот факт, что из обучающих материалов не всегда понятно, почему предлагается сделать именно так, а не иначе, есть ли альтернативы, является ли решение best practice или это частное мнение автора. Поэтому я разработал заготовку под названием «Common Test DB», отвечающую лучшим практикам. Ее можно использовать для начала любого проекта, остается только наполнить функциональным смыслом.

В статье я подробно опишу примененные best practices, расскажу про имеющиеся альтернативы и в конце размещу ссылки на исходники и работающий в сети пример.
Читать дальше →