29771
🚀 Статьи, новости, туториалы по frontend разработке. http://jem-space.ru Admin: @jem_jem Пишу в @five_a_m Хорошие серваки от DigitalOcean: https://m.do.co/c/1351d64475ee Реклама: http://bit.ly/2NxmVDu № 4850240725
Создаём REST API с Deno
https://blog.openreplay.com/getting-started-with-deno--building-a-rest-api
Это — Антон Резник, у него более 12 лет опыта во фронтенд-разработке. Кто, если не он, научит вас делать серьёзный фронтенд?
Антон с нуля создал веб-версию Telegram на базе собственной реализации реактивного UI-фреймворка. А ещё однажды он написал систему «Умный дом» для своей квартиры на чистом JavaScript!
Сейчас Антон тимлид в команде рекламы ВКонтакте, где создаётся frontend нового рекламного кабинета. Его работа состоит из сложных архитектурных решений, задач производительности и интеграций с другими командами.
Вместе со своими коллегами с не менее классным опытом, Антон собрал весь свой опыт воедино на курсе Frontend. По секрету расскажем, что там действительно много практики и инсайтов индустрии.
Так что если вы junior+ или middle фронтендер и хотите научиться работать над масштабными проектами, вам сюда!
Новый поток стартует 18 мая, а по промокоду FRONTDEV20 вы получите скидку 5%
[Начать обучение]
Склеиваем коммиты в git при помощи squash и fixup
Статья о том как и зачем использовать склеивание коммитов.
https://htmlacademy.ru/blog/git/how-to-squash-commits-and-why-it-is-needed
50 запросов для ChatGPT, которые могут быть полезны для разработчиков
От генерации кода до его документирования и тестирования.
https://dev.to/hackertab_org/50-chat-gpt-prompts-every-software-developer-should-know-tested-9al
✨ Свежий, 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/
JavaScript Security Vulnerabilities Tutorial
Топ 10 JS уязвимостей и как с ними бороться.
https://www.youtube.com/watch?v=ypNKKYUJE5o&ab_channel=freeCodeCamp.org
Как и когда использовать debounce и throttle в React
Что такое debouncing и throttling и примеры их использования.
https://soshace.com/how-and-when-to-debounce-and-throttle-in-react/
Пара трюков в DevTools, которые немного упростят вашу отладку
Выбираем элементы через $ и $$ и получаем текущий элемент через $0.
https://gomakethings.com/a-few-developer-console-tricks/
Погружаемся в Redux Toolkit
На примере разработки проекта для трекинга багов рассмотрим работу с Redux Toolkit.
https://www.smashingmagazine.com/2023/05/guide-redux-toolkit-typescript/
Логические свойства 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