Cовет💡

Быстрый и простой совет для вложенных радиусов: ваши углы будут выглядеть намного лучше, если вы установите внешний радиус на сумму внутреннего радиуса + отступы.

👉 @frontend_1

Пишем одностраничное приложение с помощью htmx

JS-библиотеку htmx воспринимают как средство, которое спасает интернет от одностраничных приложений. Всё дело в том, что React поглотил разработчиков своей сложностью (так говорят), а htmx предлагает столь желанное спасение.

Создатель htmx, Карсон Гросс, иронично объясняет эту динамику библиотеки так:

Нет, здесь у нас диалектика Гегеля:

- тезис: традиционные многостраничные приложения,
- антитезис: одностраничные приложения,
- синтез (возвышенная форма): гипермедиа-приложения с островками интерактивности.

https://habr.com/ru/companies/ruvds/articles/849854/

👉 @frontend_1

Адаптивные SVG

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

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

https://12daysofweb.dev/2023/responsive-svgs/

👉 @frontend_1

Поговорим про деньги в IT?

Приглашаем опытных IT-специалистов пройти небольшой опрос про зарплаты и бенефиты в технологических компаниях. Это займёт не более 7 минут — а ваше мнение поможет одному крупному российскому работодателю делать актуальные оферы.

Пройти опрос можно здесь

Совет по HTML 💡

Знаете ли вы, что можно разместить кнопку отправки формы вне самой формы?

👉 @frontend_1

Совет по JavaScript 💡

Возможно, вы не знали об этом простом способе выполнения сортировки без учета регистра

👉 @frontend_1

Улучшаем типизацию роутинга в Next.js

Неработающие ссылки, неправильно сформатированные строки запросов и отсутствующие параметры маршрута — всё это легко решаемо с помощью типизированной системы, такой как TypeScript.

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

В Next.js есть экспериментальная функция с возможностью подключения для статически типизированных ссылок. Чтобы её включить, активируйте experimental.typedRoutes в вашем файле next.config.js следующим образом:

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    typedRoutes: true,
  },
}
 
module.exports = nextConfig

https://www.flightcontrol.dev/blog/fix-nextjs-routing-to-have-full-type-safety


👉 @frontend_1

33 Концепта

33 концепции JavaScript, которые должен знать каждый разработчик.

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

https://github.com/gumennii/33-js-concepts

👉 @frontend_1

Создаем drag and drop, используя HTML, CSS и Javascript 👨‍💻

https://github.com/atherosai/ui/tree/main/drag-and-drop-04


👉 @frontend_1

Совет по Javascript 💡

👉 @frontend_1

Хотите узнать, как создать чат-приложение с использованием React и WebSockets?

На вебинаре вы узнаете:
- Основы WebSockets и их интеграция с React.
- Реализация функциональности чата.
- Управление состоянием и работа с хранилищем данных (обновление интерфейса при изменении состояния).

Этот вебинар будет полезен:
- JavaScript-разработчикам, которые хотят улучшить навыки работы с React и узнать особенности работы и обновления приложения в режиме реального времени.
- Frontend-разработчикам, желающим понять и использовать WebSockets для создания интерактивных приложений.
- Fullstack-разработчикам для дополнения своих знаний и получения навыков интеграции WebSocket серверов с React-приложениями.

После вебинара вы сможете:
- Настроить и управлять WebSocket соединением в React-проектах.
- Управлять состоянием в React-проектах и работать с хранилищами данных для сохранения истории сообщений.
- Применить знания для создания разнообразных приложений реального времени (чаты, системы уведомлений, онлайн-игры).

Урок пройдет 7 ноября в 20:00 мск и будет приурочен к старту большого курса «React.js Developer». После вебинара вы получите специальную цену на обучение и персональную консультацию от менеджеров!

Регистрируйтесь на открытый вебинар прямо сейчас! 👇

https://vk.cc/cDM83c

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

CSS Совет 💡

Знаете ли вы, что можно задать как min-width, так и width всего одной строкой кода? 🤩

Demo https://www.codewithshripal.com/playground/css/max-function

👉 @frontend_1

Совет по CSS 💡

Конвертируйте цветные логотипы в однотонные черно-белые изображения для темного/светлого режимов с помощью CSS-фильтров 🤩

Нет необходимости создавать отдельные изображения для этого ✨

Demo https://www.codewithshripal.com/playground/css/uniform-grayscale-logos-using-css-filters

👉 @frontend_1

HTML input types сильно различаются в зависимости от значения атрибута type, который вы используете 👨‍💻.

Ознакомьтесь с этой шпаргалкой на будущее 🚀

👉 @frontend_1

Совет по CSS 💡

Измените цвет favicon для тёмного/светлого режима с помощью CSS

👉 @frontend_1

Создаем KPI-индикаторы для дашборда, используя HTML, CSS и JavaScript 🚀

https://github.com/atherosai/ui/tree/main/dashboard-widgets-01

👉 @frontend_1