Обновить
433.12

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

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

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

Веб-компоненты в 2023: нужно поговорить

Уровень сложностиПростой
Время на прочтение5 мин
Охват и читатели13K

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

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

И с этим я хочу бороться

Очередной ответ на вопрос: «Зачем нужна семантика?»

Уровень сложностиСредний
Время на прочтение7 мин
Охват и читатели6K

Этот вопрос преследует меня всю мою карьеру, начиная с 2013 года. Одни разработчики отвечают, потому что так правильно. Другие говорят про SEO. Третьи — ничего не говорят. А я считаю, что атрибут role является отличным ответом на этот вопрос!

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

Как мы версию Sanic’а повышали

Уровень сложностиПростой
Время на прочтение8 мин
Охват и читатели3.2K

Приветствую всех читателей, меня зовут Вадим, я — бэкенд-разработчик в компании Домклик. В этой статье я хотел бы поделиться своим интересным опытом мажорного повышения зависимостей в проекте, который свыше пяти лет находится в проде под ежедневной нагрузкой более 2000 RPS. Мне пришлось обновить наш основной фреймворк сразу на несколько мажорных версий. Приглашаю прочесть как именно и зачем я это делал!

Узнать как это было

Прогрессивный рендер изображений с использованием blurhash

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

Мы уже давно используем адаптивные изображения picture с srcset, но захотелось реализовать ленивую загрузку изображений на проектах, когда юзер видит изображение в плохом качестве, пока загружается основное.

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

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

Читать далее

Почему для проекта стоит прибегать к готовым UI-компонентам

Уровень сложностиПростой
Время на прочтение10 мин
Охват и читатели8.8K

Мы знаем, как важно для веб-разработчиков создавать качественные пользовательские интерфейсы (UI). Однако, создание собственного пользовательского интерфейса с нуля может быть затруднительным, если у вас ограниченное время и ресурсы. Именно поэтому Sencha разработала для вас компоненты Ext JS. Они существенно облегчают задачу создания идеального дизайна для вашего проекта и позволяют сэкономить множество времени и усилий

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

Читать далее

Vue-faq.org — FAQ о фронтенде в целом и Vue в частности

Уровень сложностиСредний
Время на прочтение3 мин
Охват и читатели5K

https://vue-faq.org - попытка охватить наиболее часто задаваемые в профильных чатах и конференциях вопросы о фронтенде в целом и Vue.js фреймворке в частности.

Читать далее

Advanced Custom Fields: Полное руководство

Уровень сложностиПростой
Время на прочтение21 мин
Охват и читатели34K

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

Читать далее

Подключение Twig шаблонов в WordPress: Как избежать конфликтов

Уровень сложностиСредний
Время на прочтение4 мин
Охват и читатели1.9K

Twig доступен в виде Composer пакета, но WordPress не имеет встроенного менеджера зависимостей. Его прямое использование может привести к проблемам; узнайте, как безопасно интегрировать его.

Читать далее

Hello-World туториал на React/Django/RabbitMQ/Websockets

Уровень сложностиСредний
Время на прочтение38 мин
Охват и читатели18K

Однажды в поисках примера на React/Django я нашел на Хабре одну интересную статью. Она показалась мне полезной, и я решил дополнить пример из статьи новыми возможностями. В этом сиквеле мы добавим в веб-проект со списком студентов поддержку авторизации и real-time уведомлений на сокетах, улучшим систему Docker-сборки, оптимизируем модель очередей на RabbitMQ и немного пригладим косметику. В результате получим удобный базовый шаблон, с которого вы сможете начинать свои проекты.

Читать далее

Создаем мини-игру с капельным эффектом и движущимися кружками. Часть 1

Уровень сложностиПростой
Время на прочтение7 мин
Охват и читатели6.3K

Привет, дорогие пользователи мира IT!

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

Предлагаю вам самим создать мини-игру с нуля. И затем, вы сможете использовать её, чтобы оживить и добавить интерактивность любой веб-странице.

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

Как сделать свой UI Kit на Vue 3 + storybook и задеплоить его на npm

Уровень сложностиСредний
Время на прочтение5 мин
Охват и читатели23K

Сейчас очень популярная история создавать свой UI Kit и везде рассказывать какой он крутой и как он ускорил разработку, поэтому я решил написать небольшой гайд, как заиметь себе собственный UI Kit.

После моего туториала, вы тоже сможете рассказывать какой у вас крутой UI Kit, но это не точно :)

Запилить свой UI Kit

Как использовать нейросети веб-студиям и вымрут ли дизайнеры. Бесплатная нейросеть онлайн и как пользоваться Midjourney

Уровень сложностиПростой
Время на прочтение5 мин
Охват и читатели12K

Совсем недавно устраивались интернет протесты и практически похороны художников в связи с появлением нейросети Midjourney. Сейчас ИИ, которые генерируют изображения, достаточно много. Сбер и Яндекс запустили свои нейросети. 

Как это повлияет на веб-дизайнеров и пора ли им подыскивать новую профессию? Или нужно подойти с другой стороны, запрячь искусственный интеллект и использовать в своих целях? Разбираемся! 

Как использовать нейросеть

Как создать сайт на фреймворке Cample.js?

Уровень сложностиСредний
Время на прочтение4 мин
Охват и читатели8K

В данной статье будет описано небольшое руководство по тому, как создать сайт на таком фреймворке как Cample.js. На момент написания статьи (версия 3.1.1), фреймворк уже более года находится в разработке. За это время был реализован минимальный функционал для создания современных веб-приложений.

Читать далее

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

Как оцифровать и автоматизировать разработку, чтобы увеличить пропускную способность и ресурсоемкость производства

Уровень сложностиПростой
Время на прочтение11 мин
Охват и читатели2.8K

Узкое место разработки — пропускная способность и ресурсоемкость производства. Мы его обошли с помощью сбора данных и автоматизации.

Когда проектов и сотрудников становится много, то большинство проблем возникает не из-за объемов и сложности задач, а из-за неумения выстраивать и автоматизировать процессы производства. В этом мы убедились на собственном опыте.

Читать далее

Натальная травматология фронтенда S1 E1-14

Уровень сложностиПростой
Время на прочтение3 мин
Охват и читатели7.9K

Здравствуйте, меня зовут Дмитрий Карловский, и меня хлебом не корми, а дай поиздеваться над хайповыми технологиями. И сейчас я расскажу вам, как я провёл лето.

В этом сезоне ко мне на операционный стол попались разные JS, CSS и тест фреймворки да методологии, менеджеры состояний и потоков исполнения, коллекции виджетов и даже приложений. Приготовьтесь, далее вас ждёт целых 32 часа отборного кринжа!

Погрузится в эпидерсию

Rematch — Redux без шаблонного кода

Уровень сложностиПростой
Время на прочтение7 мин
Охват и читатели5.2K

Сегодня я хотел бы рассказать о Rematch — библиотеке, которая предоставляет удобный и эффективный способ управления состоянием ваших веб-приложений. Если вы уже знакомы с Redux и ищете более простое и компактное решение, то Rematch может оказаться для вас полезным инструментом. 

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

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

С помощью Rematch вы можете определить модели (models) и их состояние, эффекты (effects) и редьюсеры (reducers). Он предоставляет удобные инструменты для работы с асинхронными операциями, а также возможность создания селекторов (selectors) для выборки данных из хранилища. Все это помогает организовать логику вашего приложения и управлять его состоянием с минимальными усилиями.

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

Читать далее

Приглашаем на Ozon Tech Community Go Meetup

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

Всем привет! Я – Влад, руководитель группы поисковой оптимизации в Ozon. 

Go повсюду. И, конечно, ни при каких обстоятельствах мы не могли пройти мимо него в самом крупном направлении компании –  разработке маркетплейса.

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

И нам есть чем поделиться. Приглашаем на открытый Ozon Tech Community Go Meetup, 20 сентября в Москве. На митапе подробно обсудим Go и технологии, которые мы используем в разработке маркетплейса Ozon. Узнаем, как устроена разработка доставки и пути совершения покупки. 

Читать далее

Как рассказать о сайте поисковой системе

Уровень сложностиПростой
Время на прочтение5 мин
Охват и читатели9.3K

Сайт написан, домен куплен, так почему же я до сих пор не вижу его в Google/Yandex?

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

Читать далее

Утечки памяти в SSR: причины, поиск, устранение

Уровень сложностиСложный
Время на прочтение12 мин
Охват и читатели6.5K

Привет, Хабр! Меня зовут Владимир Захаров (@‌vzkhrv), я расскажу про SSR. На самом деле, утечки памяти работают в JavaScript везде – и на сервер-сайте, и на клиенте, поэтому информация будет полезна даже тем, у кого пока нет SSR. Давайте чуть подробнее познакомимся. Я ведущий фронтэнд-разработчик, около 8 лет в отрасли. В Зарплате.ру больше не работаю, но основной опыт, о котором хочу рассказать, получен именно там. Я люблю плавающие баги, разговоры о техдолге и шутки про ненастоящих программистов. Поговорим про утечки в памяти в SSR, про работу с памятью и про то, как всё это выглядит в браузере и в nodejs. Ну, и естественно, как со всем этим жить.

Читать далее

Что нового в Chrome 117?

Уровень сложностиПростой
Время на прочтение4 мин
Охват и читатели7.5K

Что ожидается в статье:

Три новые функции CSS позволяют легко добавлять плавные анимации появления и исчезновения.

Вычисление наборов данных более высокого порядка с помощью группировки массивов.

DevTools упрощает процесс локальных переопределений.

И многое другое.

Читать далее

Вклад авторов