29396
🚀 Статьи, новости, туториалы по frontend разработке. http://jem-space.ru Admin: @jem_jem Пишу в @five_a_m Хорошие серваки от DigitalOcean: https://m.do.co/c/1351d64475ee Реклама: http://bit.ly/2NxmVDu
Пиксельный эффект загрузки изображения при скролле
Демо
Github
https://tympanus.net/codrops/2023/05/24/on-scroll-pixelated-image-loading-effect/
Node, Nest, Next, Express🤯 - пора бы всё объединить!
Для этого мы создали отдельный уголок - Серверный JavaScript.
Собрали всё, проверяй🔥
Что нового в CSS и UI
I/O 2023: 20 наиболее интересных фич.
https://developer.chrome.com/blog/whats-new-css-ui-2023/
Создаем интересный hover эффект градиентной маски
Демо
Github
https://tympanus.net/codrops/2023/05/17/recreating-the-gradient-mask-hover-effect-from-evervault/
Грант до 500 000 ₽ на облачные сервисы #CloudMTS
Можно применить на:
– Готовые мощности в публичном облаке и простое управление виртуальными машинами
– Сервисы для управления кластерами K8s и брокером сообщений Apache Kafka в облаке
– Хранение данных нужного объема и формата с доступом через интернет
– Сервисы управления сетью в облаке
Воплощайте крутые цифровые проекты в облаке #CloudMTS 💥
Подробнее об условиях Акции и о сервисах, доступных в рамках Акции, — на сайте: https://bit.ly/3V9qYWZ
Оставляйте заявку, получите подтверждение, и команда #CloudMTS рассчитает Грант под ваш проект.
Реклама. Рекламодатель ПАО «МТС», ИНН 7740000076
Адаптивный Dark mode, основанный на теме ОС
Простой пошаговый туториал по темизации сайта.
https://1stwebdesigner.com/implementing-adaptive-dark-mode-based-on-users-os-settings-a-step-by-step-guide/
Знакомьтесь, tRPC
Разрабатываем простое типобезопасное клиент-серверное приложение с tRPC, React и Express. tRPC позволяет создавать типобезопасные API без схем или кодогенерации.
https://my-js.org/blog/trpc-intro/
Как выбрать правильный шрифт для сайта
Классификация шрифтов, а также советы по выбору и комбинации нескольких шрифтов.
https://www.codica.com/blog/how-to-choose-fonts-for-your-website-guide/
Оформляем свой профиль на GitHub
Добавляем красивый Readme.md для всего профиля.
https://habr.com/ru/articles/649363/
Глубокое погружение в N-th Element селекторы в CSS
https://blog.bitsrc.io/understanding-css-selectors-for-the-n-th-element-a-deep-dive-7bb73e2cf72c
Создаём 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
Создаем ваш первый ChatGPT плагин на JavaScript
https://www.sitepoint.com/javascript-chatgpt-plugin
React Reconciliation
Как работает процесс Reconciliation в React и почему стоит это знать.
https://www.developerway.com/posts/reconciliation-in-react
Пишем собственные проверки на ESLint за 15 минут
https://www.youtube.com/watch?v=oBFupJl0AaU
WebRTC - что это такое и как это работает
Обзорная статья о принципах работы WebRTC.
https://www.sitepen.com/blog/getting-started-with-webrtc
Создаём кастомный слайдер на CSS
Примеры стилизации слайдеров.
https://www.sitepoint.com/css-custom-range-slider/
Возможности JS и TS, о которых многие не знают
▫️Теггированые шаблонные литералы,
▫️Promise.allSettled,
▫️globalThis,
▫️WeakRef,
▫️явное определение неиспользуемых переменных и многое другое.
https://my-js.org/blog/js-ts-features
Получите работу в Яндексе всего за два дня
27–28 мая мы проводим Weekend Offer Frontend. Ищем разработчиков на JavaScript и TypeScript с опытом работы от 4 лет. За один день вы пройдёте две технические секции и, если всё сложится, на следующий день получите офер в крутую команду.
Нанимаем в самые разные продукты — выбирайте из 13 сервисов. Вы сможете работать из любого офиса в России и Беларуси, а некоторые команды приглашают разработчиков в Армению, Казахстан и Сербию.
Регистрация на мероприятие продлится до 22 мая, подробнее здесь
Новые методы работы с массивами в ES2023
https://www.sonarsource.com/blog/es2023-new-array-copying-methods-javascript/
Frontender's notes - самый большой канал по фронту с актуальной инфой по HTML, CSS, JS, TypeScript, React, Node.js и развитию Soft-skills, а также разборы вопросов для интервью и подборка крутых статей c опытом релокации айтишников в другие страны.
Вам сюда: 👉 @frontendnoteschannel
А так же небольшой канал с англоязычными статьями @frontend_international
В общем добро пожаловать!
Из localhost в облако - большой туториал по деплою сайтов
Оборачиваем в Docker, создаем Kubernetes кластер, конфигурируем dns, настраиваем Github Actions.
https://dev.to/chetanam/from-localhost-to-cloud-nextjs-django-ssl-github-actions-dns-ultimate-website-deployment-tutorial-34hp
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