29203
🚀 Статьи, новости, туториалы по frontend разработке. http://jem-space.ru Admin: @jem_jem Пишу в @five_a_m Хорошие серваки от DigitalOcean: https://m.do.co/c/1351d64475ee Реклама: http://bit.ly/2NxmVDu
Разбираемся с Record Type в TS
Создание, использование и отличие от Tuple.
https://www.sitepoint.com/typescript-record-type-comprehensive-guide/
Sticky хедер + элементы на всю высоту: хитрая комбинация
Sticky-позиционирование не всегда надежное, и может быть нарушено многими факторами.
Вот небольшой разбор, как можно сделать его более стабильным, если вам нужно использовать разметку с заголовком и элементами на всю страницу.
https://www.smashingmagazine.com/2024/09/sticky-headers-full-height-elements-tricky-combination/
Vue & Vite Updates
Доклад с VueConf US 2024
https://www.youtube.com/watch?v=A9MSFp9Fs8k
Диалоговое окно с анимацией на показ и скрытие
Простое демо с нативной поддержкой входных и выходных анимаций.
https://frontendmasters.com/blog/the-dialog-element-with-entry-and-exit-animations/
❗️Создайте свое приложение для прогноза погоды всего за 1 час
❓Хотите научиться создавать полезные приложения и работать со сторонними веб-сервисами?
⏰ Ждем вас на открытом вебинаре 4 сентября в 20:00 мск, где мы разберем:
- как работать с API сторонних веб-сервисов на примере создания приложения для прогноза погоды;
- основные принципы работы с API и их интеграции в проекты;
- как расширить функционал приложения и использовать больше браузерных инструментов.
🔥 Урок идеально подходит для тех, кто знает основы JavaScript (циклы, условия, функции, базовая работа с DOM).
Встречаемся в преддверии старта курса «JavaScript Developer. Basic». Все участники вебинара получат специальную цену на обучение!
👉Регистрируйтесь прямо сейчас, чтобы не пропустить мероприятие: https://vk.cc/cA5wlu
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru
Мониторим показатели Web Vitals с web-vitals.js
Показатели CLS, INP и LCP теперь можно удобно отслеживать в консоли без необходимости запускать Lighthouse!
https://www.debugbear.com/blog/core-web-vitals-js
CSS Grid Areas
Свежий взгляд на CSS grid template areas и как использовать их потенциал по максимуму. Интерактивное руководство.
https://ishadeed.com/article/css-grid-area/
Делаем таймер обратного отсчета на чистом CSS
https://blog.logrocket.com/how-to-build-countdown-timer-using-css/
10 консольных команд, необходимых для разработчика
Grep, cat, tail и ещё несколько команд, которые повышают удобство и скорость разработки.
https://www.trevorlasn.com/blog/10-essential-terminal-commands-every-developer-should-know
Больше никаких плохих контролов!
Эти карточки появились благодаря яндексовской конференции «Я 💛 Фронтенд 2024». Ребята из Яндекса сделали их на основе доклада Ильи Бирмана, арт-директора Бюро Горбунова.
Илья жёстко прошёлся по интерфейсам российских и международных сервисов и приложений, а главное, на примерах показал, как кнопки, слайдеры, выпадайки и прочие контролы делать нужно, а как ни в коем случае нельзя и где спрятаны различия.
Полезные посты для фронтендеров вроде этого регулярно публикуют на канале [Yandex for Frontend]. Подписывайтесь, ребята готовят много интересного!
Что нового в ECMAScript 2024
▫️Улучшенная работа с unicode
▫️Atomics.waitAsync
▫️Расширяемые ArrayBuffer
▫️Promise.withResolvers
Подробнее:
https://pawelgrzybek.com/whats-new-in-ecmascript-2024/
True Myth
TS библиотека с type-safe обертками и утилитарными функциями для обработки ситуаций, когда у вас нет значений в переменной, и обработки успешных или ошибочных результатов выполнения.
https://github.com/true-myth/true-myth
Уверены, что в коде вашего сайта нет уязвимостей? 💻
За последние три года в 63% случаев именно веб-приложения оказались исходным вектором атаки хакеров (данные Positive Technologies).
Проверить свой веб-ресурс на наличие уязвимостей можно с помощью бесплатного анализатора PT BlackBox Scanner. Для этого вам нужно только ввести его домен на сайте сервиса. А после регистрации будут доступны все возможности сканера (тоже бесплатно) 🎯
По результатам более 110 видов проверок анализатор выдаст подробный отчет, в котором обнаруженные уязвимости будут распределены по уровню опасности, что позволит составить оптимальный план работы по их устранению и защитить сайт от хакерских атак.
🐈⬛ Проверить веб-ресурс с помощью PT BlackBox Scanner
45 шорткатов для VS Code
Улучшаем продуктивность при работе с VS Code (все, конечно, не запомните, но хоть какие-то из 45 вам приглянутся).
https://www.sitepoint.com/visual-studio-code-keyboard-shortcuts/
Частые причины утечек памяти в JS
Излишняя сложность, замыкания и глобальные переменные - все это сказывается на потреблении памяти. Расскажем, какие есть способы мониторинга и устранения утечек.
https://www.trevorlasn.com/blog/common-causes-of-memory-leaks-in-javascript
Создаем React с нуля
Большая статья с собственной реализацией основных фич React: рендер, эффективное обновление DOM, хуки.
https://www.rob.directory/blog/react-from-scratch
21 сентября в расслабленной обстановке на свежем воздухе пройдёт Код-пленэр от Яндекса!
Встретимся с коллегами из Яндекса, чтобы порисовать кодом в саду, послушать про творчество в IT, поделиться опытом решения рабочих и не только проектов и подышать свежим воздухом в одну прекрасную сентябрьскую субботу.
Главным событием станет воркшоп по p5.js. На нём ваши навыки программирования пригодятся неожиданным образом: с помощью кода вырастите дерево, которое станет частью общего диджитал-леса.
Вечером мы увидим получившийся лес на большом экране. А потом завершим день у костра под DJ-сеты.
Заполняйте форму как можно подробнее и регистрируйтесь!
До встречи на Код-пленэре! 🔥
Объясняем, как работают генераторы в JS (сложно)
Глубокое погружение в одну из малоиспользуемых фич JS — генераторы.
https://www.reactsquad.io/blog/understanding-generators-in-javascript
Как оптимизировать ваше приложение еще до того как оно загрузилось?
О сетевых взаимодействиях, которые происходят во время запросов — какие и как их можно ускорить.
https://blog.sentry.io/how-to-make-your-web-page-faster-before-it-even-loads/
Консольные команды для чайников
Хотите быть адептом терминала, но не понимаете что делают те или иные команды?
Держите сайт, который помогает разобраться с консолью, объясняя, что делает команда и значение каждого флага или опции в ней.
https://explainshell.com/
Telegram Mini App. Как создать Web App с нуля
Туториал по созданию веб-приложения для Telegram и работе с Telegram API.
https://habr.com/ru/companies/amvera/articles/838180/
‼️Тест по React JS от OTUS
— Ответьте на 30 вопросов и проверьте, насколько хорошо вы знаете язык.
Сможете сдать — пройдёте на продвинутый онлайн-курс по React.js по спец. цене!
👉ПРОЙТИ ТЕСТ - https://vk.cc/czSWZI
Курс доступен в рассрочку.
❇️ Пройдите тест и получите:
✔️ Живое общение с экспертами
✔️Получите видео-курс по Git в подарок
✔️ Лучшие открытые уроки прошлых наборов курса
✔️ Продвинутые темы и практика на «боевых» задачах уровня Middle+
✔️ Скидку на прохождение онлайн курса «React.js Developer»
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru
Кастомный слайдер с использованием API привязки позиционирования
Пошаговый туториал по созданию слайдера на основе современных фич CSS: Anchor Positioning API и Scroll-Driven Animation.
https://frontendmasters.com/blog/custom-range-slider-using-anchor-positioning-scroll-driven-animations/
Настраиваем деплой приложений с Dokku
Dokku - это мини-Heroku, который можно установить на свой сервер и удобно деплоить приложения командой git push.
В статье — пошаговый туториал по установке, первоначальной настройке и конфигурации приложений для деплоя.
https://jem-space.ru/dokku-deploy/
Пишем в буфер обмена с помощью JS
Основы работы с Clipboard API и некоторые нюансы его использования.
https://frontendmasters.com/blog/writing-to-the-clipboard-in-javascript/
Советы по CSS
Профессиональные советы как с популярными, так и с малоизвестными решениями по работе с CSS.
https://github.com/AllThingsSmitty/css-protips/tree/master/translations/ru-RU
Набор инструментов для веб разработки
Большая подборка инструментов для разработки, разбитая на категории: UI киты, библиотеки для анимации, расширения для Chrome, иконки и многое другое.
https://surffers.notion.site/surffers/The-Best-Web-Development-Tools-2cf90734ead54d748edaf706120728d8
Релиз Storybook 8.2
Что нового: хуки, портативные стори, онбординг.
Подробнее по ссылке: https://storybook.js.org/blog/storybook-8-2/
Создаем 3D иллюстрации на CSS
Сложно, но возможно: пошаговый гайд по созданию красивых иллюстраций
https://frontend.horse/articles/creating-3d-illustrations-with-css/
Создаем свой собственный React Query
14 минутный тутораил по созданию собственного React Query с нуля. Залипательное видео, позволяющее понять как React Query работает под капотом
https://www.youtube.com/watch?v=YmrnPOgOvy4