CodeRoll | Frontend

React Portals React порталы предоставляют мощный механизм для рендеринга компонентов за пределами стандартного дерева компонентов, обеспечивая большую гибкость и контроль над структурой DOM приложения. Порталы применяют в ситуациях, когда необходимо, чтобы дочерние компоненты визуально были отделены от родительского контейнера. Например, для модальных окон или всплывающих подсказок. Подробнее как работать с порталами и в каких случаях применять читайте в статье. Ссылка #react

Chat2Code - это AI чат, который может генерировать веб-компоненты за считанные секунды. В настройках можно задать для какого фреймворка или библиотеки генерировать: React, Vue, Angular, Svelte. Лимит бесплатного использования ограничен. Для неограниченного действует платная подписка. Интересно пощупать и посмотреть на сколько он хорош! Ссылка  #инструменты

Парень запилил крутой трейлер к фильму Genesis, и заработал 50.000$, используя только нейросети❗️ Это можете сделать и ВЫ!  Все эти приложения мы уже разбирали на нашем канале 💪🏽  Какие нейросети он использовал:

Эффект капания воды Делимся ссылкой на CodePen, в котором реализован эффект капания воды. Выглядит необыкновенно реалистично и это на чистом CSS! Ссылка #css

Qwick - это фронтенд-фрэймворк от разработчика Angular Misko Hevery.  У большинства современных фреймворков проблема с метрикой - Time to interactive. Все дело в том, что после отправки HTML сгенерированного на сервере, необходимо также загрузить фреймворк и код приложения, запустить его, и только после этого можно обрабатывать события. Эту проблему попытался решить Qwik. Создатели обещают быстрый старт приложения и почти моментальную возможность интерактивного взаимодействия. Ссылка

Durves - это интерактивный инструмент для создания и экспорта 2D графики из точечных узоров с возможностью настройки матрицы, радиуса точек, амплитуды, волн и частоты. В общем, можно классный элемент в дизайн добавить, а если его еще и анимировать! Доступно для скачивания в формате PNG и SVG. Ссылка #дизайн

React-Chrono — это универсальный компонент, который дает возможность с легкостью и быстро создавать такой UI элемент, как временная шкала. React-Chrono полностью кастомизируемый, что позволяет адаптировать компонент к конкретным потребностям. Он предлагает три режима: горизонтальный, вертикальный и вертикальный c чередованием. Ссылка #react

SVG.js - это библиотека для манипуляции и анимации SVG. Мало весит и простая в использовании! Ссылка #инструменты

Kaboom — это библиотека для программирования игр на Javascript, которая помогает создавать игры быстрее и делать их интереснее и увлекательнее.  На официальном сайте можно глянуть всю документацию и туториал, как работать с данной библиотекой. Ссылка #js

margin-trim Свойство margin-trim позволяет контейнеру обрезать поля своих дочерних элементов там, где они примыкают к краям контейнера. Пока оно в экспериментальной стадии и поддерживается только браузером Safari. На первый взгляд свойство очень полезное. Подробнее о нем в статье! Ссылка #css

DevTools Tips & Tricks В DevTools существуют десятки панелей и сотни функций для ускорения процесса отладки. Автор статьи делится самыми популярными советами по DevTools, которые могут повысить вашу продуктивность. Например, знали ли вы что во вкладке Network запросы можно редактировать, а еще сразу переотправлять из панели вместо того, чтобы перезагружать снова страницу. Об этом и других советах читайте в статье. Ссылка #статьи

Figma Dev Mode Совсем недавно в Figma появился новый функционал Dev Mode. Теперь можно получить не только готовый CSS код, но и HTML и код для компонента React, Vue и других. Например, вы пишете на React, а для стилей используете Tailwind CSS. Выбрав эти технологии в опциях, на выходе будет сгенерирован HTML код для компонента, стили, файл config для Tailwind CSS, даже файл package.json и многое другое. Подробнее о новом функционале в статье. Ссылка #дизайн

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

Вы еще не слышали про телеграм-канал LEFT JOIN?  Это медиа о технологиях и данных, в котором собрана самая главная информация про: ☑️ применение AI-моделей почти во всех сферах работы и жизни, ☑️ всемогущий язык SQL и работу с базами данных, ☑️ стартапы на основе нейросетей, которые заслуживают не меньшее внимание чем ChatGPT,  ☑️ то, как нейросети могут облегчить работу аналитика данных. А еще у авторов сейчас выходит третий сезон подкаста Data Heroes — честные разговоры с настоящими супергероями, чья сила в данных. Если вы еще не слушали первые два — наверстывайте упущенное и...  💬 Подписывайтесь на @leftjoin!

phind - это AI поисковая система для разработчиков. Можно задать вопросы про то, как работает определенный код или как задать какие-то настройки для приложения и многое другое. Что круто на этом ресурсе, так это то, что помимо ответа показываются ресурсы откуда информация. Ссылка #инструменты

Требуются парни и девушки в возрасте 19–40 лет, желающие работать в сфере IT. Опыт в программировании не нужен. 🔥 С 11 по 17 июля проводим бесплатный онлайн-интенсив по Frontend-разработке, где будем учить, как разрабатывать сайты и веб-приложения. За эти 7 дней обучения ты: 1. Создашь полноценный веб-сайт на HTML и CSS; 2. Оживишь страницу с помощью JavaScript; 3. Используешь фронтенд-фреймворк Angular; 4. Подключишь Backend и загрузишь сайт на хостинг; 5. Получишь советы по доработке своего проекта; 6. Узнаешь сколько можно зарабатывать и как работать; 7. Получишь в подарок чек-лист «45 мест для поиска работы». А главное, ты увидишь, что разрабатывать сайты и приложения не так сложно, как кажется. И поймёшь, как тебе развиваться в этой профессии, чтобы уже в следующем году зарабатывать от 1000$ на вёрстке сайтов. 👉 Проскочить на интенсив бесплатно

Elevator Saga - это игра, задачей которой является запрограммировать движение лифтов, написав код на JavaScript. Проверьте себя на сообразительность и знание JavaScript! Ссылка #js

Spruce CSS - это низкоуровневая, легкая по весу и современная система дизайна CSS, построенная на Sass. Благодаря минималистичному дизайну компоненты смотрятся очень стильно.  Берите на заметку для своего следующего проекта! Ссылка #css

Расширения Chrome для разработчиков В статье представлено 10 AI Chrome расширений, которые помогут оптимизировать рабочий процесс, повысить производительность и писать более качественный и чистый код. Ссылка #статьи

iconhunt - это ресурс для поиска иконок.  175 000 бесплатных векторных иконок! Доступны в формате PNG, SVG или можно сразу скопировать SVG код. Ссылка #дизайн