Сегментированный прогресс-бар

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

https://codepen.io/jkantner/pen/poPWVbV

#codepen

​Трудности перевода в разработке: как делать интернациональные проекты и говорить с пользователями на одном языке

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

Эту проблему решает интернационализация, которая отличается от обычного перевода и о которой пойдёт речь в этой статье:

https://habr.com/ru/company/vk/blog/699852/

Бесконечная бегущая строка

HTML-элемент <marquee> позволяет добавлять прокручиваемый текст на страницу. И долгое время им пользовались, но из-за проблем с его поведением тот был признан устаревшим и сейчас используются другие способы.

В этой статье вы узнаете, как реализовать бесконечную прокрутку элементов в виде бегущей строки с помощью HTML и CSS:

https://ryanmulligan.dev/blog/css-marquee/

#фронтенд #html #css

​Как создать бота Discord с Node.js, Discord.js и OpenAI GPT-3

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

С помощью этого руководства вы создадите бота Discord, который сможет отвечать на сложные вопросы и выполнять требуемые задания. Для этой цели вам потребуется Node.js, Discord.js и OpenAI API для GPT-3, одной из самых крупных и умных обученных нейронных сетей. Подробнее:

https://nuancesprog.ru/p/16647/

#ml #nodejs

Telegram WebApps. Как встроить веб-приложения в чат-бота?

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

Эта статья — обзор основных моментов внедрения веб-приложений в телеграм-ботов. Она написана скорее для новичков или тех, кто хочет быстро узнать, «что к чему»:

https://habr.com/ru/post/706446/

#telegram

​Новый синтаксис диапазона медиа-запросов CSS

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

Спецификация Media Queries Level 4 представила новый синтаксис для таргетинга на диапазон ширины вьюпорта с использованием обычных математических операторов сравнения — таких, как <, >, и =, которые имеют больше смысла синтаксически при написании меньшего количества кода. Подробнее о них здесь:

https://css-tricks.com/the-new-css-media-query-range-syntax/

#фронтенд #css

​Qooxdoo 6.0 — JavaScript фреймворк для тех, кто любит кодить

Обожаете JavaScript, но пресловутые CSS и HTML так и лезут под руку, чтобы сверстать очередной элемент, оттесняя от любимого Япа? Выход есть! Фреймворк Qooxdoo позволит вам создавать полноценные веб-приложения с помощью одного только Javascript, а также использовать ООП так, что оно обойдёт возможности даже стандарта ES7.

Заинтригованы? Тогда скорее переходите по ссылке и читайте статью:

https://habr.com/ru/post/705254/

#javascript #qooxdoo

​Как понять режимы наложения раз и навсегда

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

Если вы всё ещё не знаете, чем отличается Lighten от Soft Light или Multiply от Screen, то для вас есть статья, которая доходчиво всё объяснит:

https://awdee.ru/blending-modes/

#ui #design

​Дайджест Python: итоги 2022 года, обзор версии 3.11 и курсы от Google

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

Подробнее:

https://tproger.ru/articles/dajdzhest-python-itogi-2022-goda-obzor-versii-3-11-i-kursy-ot-google/

#python

​Разработка идеального пользовательского интерфейса для выбора языка

Насколько сложно может быть разработать качественный языковой селектор? Это не так просто, как можно подумать. Вам нужно избегать перенаправлений, разделять настройки языка и стран, допускать переопределения и использовать немодальные окна.

Окунитесь в мир разработки идеального UI и научитесь создавать лучший селектор языка в этой статье:

https://www.smashingmagazine.com/2022/05/designing-better-language-selector/

#фронтенд #ui

Целых 100 CSS-кнопок для вашего следующего проекта

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

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

https://ui-buttons.web.app/

#фронтенд #css

​Как ускорить full-stack разработку, не создавая API

Когда вы используете API для взаимодействия бэкенда с фронтендом, запускается процесс, который состоит из 4 этапов:

1. Запрос на получение данных из базы данных;
2. Отправка запроса API;
3. Обработка запроса API;
4. Получение данных из базы данных.

Для внутренних API второй и третий пункт кажутся достаточно затратными и необязательными, поэтому есть способ, как обойти их и свести обмен данными к их запросу и получению. Как это сделать рассказали в этой статье:

https://nuancesprog.ru/p/16651/

#фронтенд #бэкенд #api

Пикачу в коробке

Эта лягушонка в коробчонке пикачу в коробке отрисован и анимирован с помощью чисто CSS. Отдельные элементы графики сделаны с помощью DIV’ов и затем стилизованы.

Чтобы запустить анимацию нужно нажать на верх коробки и потянуть курсов в сторону. Попробуйте сами. Там же вы найдёте код проекта:

https://codepen.io/maxi83c/pen/JjOZdWX

#codepen #css

Управление содержимым веб-страницы с помощью жестов

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

В данном туториале вы рассмотрите 5 примеров:

— получение данных с видеокамеры и их отрисовка на холсте (canvas);
— обнаружение и отслеживание кисти руки;
— управление «курсором» с помощью указательного пальца;
— определение жеста «щипок» (pinch);
— нажатие кнопки с помощью щипка.

Подробнее:

https://habr.com/ru/company/timeweb/blog/698286/

#фронтенд #javascript

​Сравнение React и Vue: что общего и в чём разница по версии ChatGPT

Статей со сравнением фреймворков и библиотек огромное количество и каждый автор выделяет в качестве плюсов и минусов что-то своё. Мы решили пойти дальше и поинтересоваться мнением у нашумевшей ChatGPT. Она рассказала про React и Vue, а также выделила основные достоинства и недостатки.

Со статьёй, написанной нейросетью познакомиться можно тут:

https://tproger.ru/articles/sravnenie-react-i-vue-chto-obshhego-i-v-chjom-raznica/

#vue #react #chatgpt

Как отследить событие закрытия браузера и вкладки с помощью JavaScript

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

https://nuancesprog.ru/p/16673/

#javascript

​Представляем Turbopack: преемника Webpack на основе Rust

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

Сегодня появился новый инструмент Turbopack — это современный преемник Webpack. Подробнее о нём:

https://vercel.com/blog/turbopack

#webpack #turbopack

Создание редактора веб-кода

Если вы разработчик, который думает о создании платформы, требующей редактора кода в той или иной форме, то эта статья для вас. В этой статье объясняется, как создать редактор веб-кода, который отображает результат в режиме реального времени с помощью HTML, CSS и JavaScript.

https://www.smashingmagazine.com/2022/01/building-web-code-editor/

#javascript #css #html

​Полезные инструменты для создания изображений AVIF

AVIF (формат изображения AV1) — это современный формат, который обеспечивает куда более значительное сжатие файла по сравнению с такими форматами, как JPG, JPEG, PNG и WebP.

В этой статье вы узнаете о некоторых браузерных и CLI инструментах для создания изображений AVIF:

https://css-tricks.com/useful-tools-for-creating-avif-images/

Как дать обратную связь, которая поможет начинающему разработчику совершенствовать навыки и не расстроит его?

Один из советов — не забывайте хвалить.

Другие рекомендации по фидбэку джунам найдёте в карточках от Яндекс Практикума. Читайте и берите на заметку: https://tprg.ru/dRHw