29396
🚀 Статьи, новости, туториалы по frontend разработке. http://jem-space.ru Admin: @jem_jem Пишу в @five_a_m Хорошие серваки от DigitalOcean: https://m.do.co/c/1351d64475ee Реклама: http://bit.ly/2NxmVDu
✨ Свежий, 52-й по счёту, MoscowJS в Авито!
18 мая в 19:00 на MoscowJS будут говорить о фронтенд-разработке: от доступности и перформанса веб-приложений до pet-проектов.
Подписывайтесь на ютуб-канал AvitoTech, ставьте колокольчик под видео и добавляйте встречу к себе в календарь, чтобы получить напоминалку о трансляции.
Реклама. ООО «Авито Тех». LdtCKh9z4
Руководство по использованию обработчиков роутов в Next.JS
https://blog.logrocket.com/using-next-js-route-handlers/
Храним API ключи правильно
Убираем хардкод и используем dotenv для работы с переменными окружения на примере React приложения.
https://www.smashingmagazine.com/2023/05/safest-way-hide-api-keys-react/
CSS Blend Modes
Режимы смешивания цветов и эффекты, которые можно добиться с помощью них.
https://garden.bradwoods.io/notes/css/blend-modes
Работаем с формами в React
Используем интеграцию React Hook Form с валидатором Zod для создания формы.
https://my-js.org/blog/rhf-zod/
Полный курс по MongoDB
https://www.youtube.com/watch?v=sXcZQ5Zg-YM&ab_channel=webDev
HolyJS — конференция для всех, кто пишет на JavaScript.
В программе технические доклады от спикеров из топовых компаний, личный опыт, боль, практика и много кода. Поговорим про ИИ во фронтенд-разработке, разберемся в устройстве плееров анимаций на примере lottie-web, обсудим, почему Playwright лучше Jest — и это только малая часть программы. Будут и более софт-скилловые доклады, например про апгрейд карьеры, а также круглые столы и дискуссии.
Вы можете пообщаться с коллегами из разных компаний, увидеть новые лица JS-мира, а в офлайне поиграть в старую-добрую JS-игру: ищите в словаре случайное слово, гуглите, есть ли JS-библиотека с таким названием. Если есть, выпиваете пиво :)
Если билет вам покупает работодатель, то пришлите ему эту ссылку.
Если идете за свой счет, то ищите билеты здесь. А по промокоду FRONTENDDEV они будут еще дешевле.
KV,JS - кеширующий модуль для JS
https://github.com/HeyPuter/kv.js
Что нового в NodeJS v20
От встроенного тест раннера до компиляции в единый исполняемый файл.
https://www.sitepoint.com/node-js-20-new
Yandex Lockbox вышел в общий доступ
Yandex Lockbox — это сервис для создания и хранения секретов в инфраструктуре Yandex Cloud. Секретами мы называем любую конфиденциальную информацию. Например, пара логин-пароль, ключи сертификата сервера или ключи сервисного аккаунта в облаке. Lockbox надёжно хранит эти данные в зашифрованном виде.
Какие задачи решает сервис:
— безопасное хранение и доступ к секретам;
— централизация хранения секретов в облаке;
— упрощение аудита и соответствие требованиям ИБ;
— удобное управление жизненным циклом секрета.
Преимущества сервиса:
— интеграция с другими сервисами платформы;
— клиенту не нужно дополнительном конфигурировать и самостоятельно поддерживать сервис;
— за отказоустойчивость и безопасное хранение данных отвечает облачный провайдер.
Читайте подробнее по ссылке ➡️
Создаем простое NodeJS приложение и оборачиваем его в Docker контейнер
Пошаговый туториал по созданию приложения и Docker контейнера + деплой на Kinsta хостинг.
https://www.smashingmagazine.com/2023/04/building-dockerizing-nodejs-app-stateless-architecture-kinsta/
Исследуем потенциал Web Workers для многопоточности в вебе
Кратко рассмотрим все аспекты работы с Web Workers: безопасность, использование ресурсов, выполнение запросов и многое другое.
https://www.smashingmagazine.com/2023/04/potential-web-workers-multithreading-web/
Используем Playwright для тестирования компонентов
https://dzone.com/articles/lets-get-start-playwright-for-component-testing
Актуальные и полезные материалы по Python, С++ и машинному обучению
Если вы хотите самостоятельно изучить одно из IT-направлений, лучше всего использовать комплексный подход:
✅ осваивать теорию по актуальным источникам;
✅ закреплять новую информацию на практических заданиях;
А тем, кто собирается заниматься в свободное от учёбы или работы время, к этому стоит добавить возможность проходить новый материал в удобном темпе.
Учитывая всё это, Академия Яндекса разработала хендбуки — бесплатные онлайн-учебники, с помощью которых можно изучить IT-темы с нуля, систематизировать знания или ликвидировать пробелы. Проходите главы последовательно или в произвольном порядке и решайте задачи.
Сейчас на сайте доступны материалы по Python, С++ и машинному обучению. Сохраняйте ссылку, чтобы не потерять: https://clck.ru/33t55W
Топ 14 Chrome расширений для веб разработчика
https://www.youtube.com/watch?v=d0EyQEGfVNg&ab_channel=webDev
Логические свойства CSS и их использование
Чем логические свойства отличаются от физических и как они помогают при разработке приложений.
https://blog.logrocket.com/css-logical-properties-guide
10 простых консольных команд Git для быстрой разработки
https://levelup.gitconnected.com/10-essential-git-command-tricks-for-faster-development-9e9b64a82c02
Идеи для анимации перехода из сетки к слайдеру фото
Демо
Github
https://tympanus.net/codrops/2023/05/04/ideas-for-grid-to-slideshow-switch-animations/
ChatGPT - курс по работе с OpenAI API
Создаем несколько простых приложений использующих OpenAI API.
https://www.youtube.com/watch?v=uRQH2CFvedY
Чит лист по доступности интерактивных элементов
Какого размера должны быть иконки и кнопки, чтобы сайтом или приложением было удобно пользоваться?
https://www.smashingmagazine.com/2023/04/accessible-tap-target-sizes-rage-taps-clicks/
Как поддерживать проект по мере его развития
Пример проекта для создания оглавления, который показывает как структурировать и рефакторить код по мере увеличения функционала.
Часть 1
Часть 2
Часть 3
Используем экспериментальное свойство CSS color-mix
Создаем различные варианты наложения цветов с color-mixhttps://una.im/color-mix-opacity/
Шпаргалки и материалы для IT собеседований
Dev Questions - бесплатный сервис для подготовки к собеседованиям. Проект активно развивается - каждый день добавляется новый контент и функционал!
Делаем авторизацию для приложений на Vue с помощью SuperTokens
https://blog.openreplay.com/using-supertokens-in-vue/
React Router 6 - Полный курс
https://www.youtube.com/watch?v=nDGA3km5He4&ab_channel=freeCodeCamp.org
Объединяем объекты в JS
Используем Object.assign и spread operator, чтобы совместить несколько объектов в один: подводные камни, аспекты и отличие от deep copy.
https://www.sitepoint.com/merging-objects-javascript/?utm_source=rss
Друзья, огромный архив книг по нашим любимым технологиям находится по ссылке @frontendarchive.
Все книги готовы для скачивания в PDF и EPUB формате. Книги публикуются с 2020 года.
Технологии: Javascript, React, Angular, Node, HTML/CSSПодписывайтесь и качайте в один клик: @frontendarchive
Клетчатый фон в 2 строчки CSS
Или как использовать градиенты для создания фона.
https://www.amitmerchant.com/checkered-background-using-only-two-lines-of-code-in-css/
Объясняем 10 алгоритмов сортировки
Преимущества и недостатки различных алгоритмов, а также критерии выбора того или иного алгоритма.
https://www.sitepoint.com/best-sorting-algorithms
Необычный hover эффект для изображений
Пошаговый видео туториал по созданию сложного noise эффекта.
https://www.youtube.com/watch?v=z1wZp4jV4cQ&ab_channel=Hyperplexed