The Pudding

Команда The Pudding создает интерактивные истории на различные темы. Как говорят создатели, визуальное повествование делает идеи более доступными.

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

Смотреть -> тут.

🔥 @ProstoRazrabotka

Лучшие AI генераторы картинок

Никак не можете найти подходящую картинку на просторах интернета? Можно воспользоваться AI генераторами картинок.

В статье как раз представлен список с ссылками на такие инструменты. Нужно только ввести в строку запроса свои пожелания для картинки. 

Смотреть -> тут.

🔥 @ProstoRazrabotka

scrollbar-gutter

Еще одно интересное CSS свойство, о котором вы возможно не слышали.

scrollbar-gutter решает проблему с «прыгающей» шириной контента при появлении или скрытии скроллбара. Такое обычно происходит при открытии модалок с заданным overflow: hidden для body.

Делимся полезной заметкой об этом свойстве с наглядными примерами. 

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

Читать -> тут.

🔥 @ProstoRazrabotka

Promise.allSettled()

Не нужно оборачивать Promise.all() в try/catch для обработки возможных отклонений. Метод Promise.allSettled() всегда ждёт завершения всех промисов, и даже если в одном из них произойдет ошибка, то результаты других будут получены.

В статье рассказывается, как его использовать и разница между Promise.all() и Promise.allSettled().

Читать -> тут.

🔥 @ProstoRazrabotka

SVG Path Visualizer

Если вы хотите разобраться, как работает path в SVG, то SVG Path Visualizer — это удобный инструмент, помогающий понять все эти загадочные числа, которые передаются в атрибут d.

Смотреть -> тут.

🔥 @ProstoRazrabotka

react-intersection-observer

react-intersection-observer - это готовое решение для использования Intersection Observer API в React приложении, чтобы отслеживать когда элемент появляется в области просмотра и исчезает из него.

Смотреть -> тут.

🔥 @ProstoRazrabotka

Figma Dev Mode

Совсем недавно в Figma появился режим Dev Mode. Теперь можно будет скопировать не только CSS стили, но и HTML, и код для компонента React, Vue и других.

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

Подробнее о новом функционале в статье.

Читать -> тут.

🔥 @ProstoRazrabotka

Best practices для форм

Классная и полезная статья на тему, как улучшить UX форм. Советы дельные, однако даже многие популярные сайты почему-то не следуют им.

Стоит взять на заметку! В конце даже представлен чек-лист этих практик.

Читать -> тут.

🔥 @ProstoRazrabotka

CSS Quizzes

Пора размяться и проверить свои знания по CSS!

CSS Quizzes - это коллекция тестов с вопросами по CSS. Тесты разделены на несколько тем: базовые основы, селекторы, градиенты, трансформации и другие. 

Смотреть -> тут.

🔥 @ProstoRazrabotka

Chrono

Chrono - это Javascript парсер даты из текста.

Он предназначен для обработки большинства форматов даты/времени и извлечения информации из любого заданного текста. 
Например, из таких вариантов:
- 5 days ago
- 2 weeks from now 
- this Friday from 13:00 - 16.00
и других!

Смотреть -> тут.

🔥 @ProstoRazrabotka

pkg-size

Зависимости npm пакетов могут быть обманчивы — пакет с одной прямой зависимостью может на самом деле установить 100 косвенных. 

Узнать реальный размер пакета и какие зависимости он подтягивает еще можно с помощью сервиса pkg-size.

Смотреть -> тут.

🔥 @ProstoRazrabotka

RedwoodJS

RedwoodJS - это фуллстэк фреймворк, который объединяет в себе React для разработки страниц и компонентов, GraphQL в качестве языка запросов для данных, Prisma в качестве ORM для доступа к данным, TypeScript для лучшего программирования, Jest для тестирования и Storybook.

Классное готовое решение для создания React приложений.

Смотреть -> тут.

🔥 @ProstoRazrabotka

PenPot

PenPot — это графический редактор с открытым исходным кодом, альтернатива Figma, Adobe XD и Sketch.

Кстати, Adobe купили Figma осенью 2022 года и неизвестно стоит ли ожидать когда-то в будущем платной подписки. Но если что, можно взять на заметку PenPot!  

Смотреть -> тут.

🔥 @ProstoRazrabotka

Как контрибьютить в опенсорсный проект

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

Инструкция, как это делать по ссылке.

Смотреть -> тут.

🔥 @ProstoRazrabotka

aspect-ratio

Бывают случаи, когда нужно поддерживать определенное соотношение между шириной и высотой адаптивных элементов на странице. Раньше это делалось с помощью различных трюков CSS.

Свойство CSS aspect-ratio стало спасителем и теперь можно указывать соотношение сторон элемента в одной строке кода. 

Подробнее о том, как использовать aspect-ratio и какие факты о нем полезно знать читайте в статье!

Читать -> тут.

🔥 @ProstoRazrabotka

Password Game

Password Game - это чисто приколюха позалипать. Суть игры заключается в создании пароля согласно условиям. Попробуйте ее пройти!

Смотреть -> тут.

🔥 @ProstoRazrabotka

Как пройти интервью в заграничной компании?

• Что нужно чтобы начать собеседоваться за границу?
• Где искать вакансии?
• Как выбрать страну для переезда и спланировать его?
• Как составить CV?
• Как проходить разные типы собеседований?
• Какие есть лайфхаки для прохождения технического интервью?

🧠 Авторский канал про IT-эмиграцию и релокацию рассказывает как пройти все этапы трудоустройства в заграничную компанию - от отклика на вакансию до торга по зарплате.

Автор проходил интервью в десятках IT-компаний Австралии 🇦🇺, Сингапура 🇸🇬 и Европы 🇪🇺, получил обширный опыт трудоустройства и релокейтов, занимался наймом программистов, а теперь делится своим опытом и знаниями с читателями.

⚡️ Есть вопросы? Добро пожаловать: @australia_reporting

Lazy loading в JavaScript

Lazy loading — хороший метод для улучшения перфоманса сайта. Он используется для отсрочки загрузки второстепенного контента до тех пор, пока он не понадобится.

В статье представлены два способа реализации и случаи, когда лучше использовать.

Читать -> тут.

🔥 @ProstoRazrabotka

React Portals

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

Подробнее как работать с порталами и в каких случаях применять читайте в статье.

Читать -> тут.

🔥 @ProstoRazrabotka

Важное объявление! 📢

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

Со временем мои интересы и занятия изменились. Я уже довольно долгое время не занимаюсь разработкой напрямую, и мое направление сместилось к управлению проектами. Честно говоря, иногда даже сам теряюсь в определениях своей профессии - Project manager, Program manager, Engineering manager или же Delivery manager? Всё потому что делаю столько разного! 😄

Не расстраивайтесь, ведь я хочу порекомендовать вам отличный канал моего хорошего знакомого - Сергея Бехарского, "Будни разработчика", он действительно делится уникальным и полезным опытом из мира IT. И у него тоже есть ламповый чатик.

Что касается меня, то, возможно, я буду делиться своими размышлениями и опытом в управлении проектами на своей странице в LinkedIn. Но, это не точно. 😉

Большое спасибо за вашу поддержку и понимание! Надеюсь, мы встретимся снова в других пространствах интернета. Всего вам доброго! 🙏🌟 

С наилучшими пожеланиями,
Виталий Киренков.