29396
🚀 Статьи, новости, туториалы по frontend разработке. http://jem-space.ru Admin: @jem_jem Пишу в @five_a_m Хорошие серваки от DigitalOcean: https://m.do.co/c/1351d64475ee Реклама: http://bit.ly/2NxmVDu
NodeJS добавил экспериментальную поддержку TS
С использованием флага --experimental-strip-types можно запустить TS код без транспиляции.
https://socket.dev/blog/node-js-adds-experimental-support-for-typescript
Как использовать container query сейчас
Сontainer queries уже поддерживаются всеми браузерами, но разработчики не спешат их использовать. Вот несколько простых шагов, которые помогут начать.
https://web.dev/blog/how-to-use-container-queries-now?hl=en
Нужно развернуть приложения быстрее? С Облаком Рег.ру это возможно!
Мы предлагаем мгновенный запуск сервисов, линейку процессоров от мощных до очень мощных ( включая AMD EPYC и высокочастотные E2388), управление через панель или API. С нашими готовыми образами для Docker и GitLab вы сможете начать работу в несколько кликов.
Присоединяйтесь к нашему каналу, чтобы узнать, как облако Рег.ру помогает в разработке, и быть в курсе актуальных IT-новостей.
Реклама. ООО «Регистратор доменных имен РЕГ.РУ». ИНН 7733568767 erid: 2VtzquX6u22Читать полностью…
Выбираем рендер-стратегию для вашего приложения
Оптимизация на уровне доставки: о способах рендера приложения и о том, как выбрать лучший для вашего.
https://vercel.com/blog/how-to-choose-the-best-rendering-strategy-for-your-app
Добавляем определения типов для CSS
Как свойство @property поможет вам избежать ошибок при использовании кастомных свойств.
https://moderncss.dev/providing-type-definitions-for-css-with-at-property/
Для чего нужна библиотека tRPC?
Объяснение на практическом примере.
https://www.freecodecamp.org/news/what-is-trpc/
Почему page.goto() замедляет ваши тесты на Playwright?
Разбираемся с оптимизацией e2e тестов на Playwright.
https://www.checklyhq.com/blog/why-page-goto-is-slowing-down-your-playwright-test/
24 CSS проекта, которые сделают из вас мастера CSS
Анимации загрузки, прогресс бары, переворачивающиеся карты — во многом стандартные эффекты, которые иногда не так просты как кажется. Раскроем все секреты реализации в 2х часовом курсе от freeCodeCamp.
https://www.youtube.com/watch?v=TzuWIHGFKCQ
В CSS в скором времени появятся нативные mixin
Подробнее о том как это будет — в черновиках CSSWG
https://drafts.csswg.org/css-mixins/
AvitoTech выпустили бесплатный видеокурс по JavaScript, и четвёртый эпизод уже доступен к просмотру.
В новом выпуске вы узнаете про устройство и размер памяти программы, стек и кучу, Oddball и иммутабельные примитивы. Это поможет создавать эффективные программы, которые оптимально используют память.
Не забудьте подписаться на канал, чтобы не пропустить следующие выпуски.
Создаем npm пакет с поддержкой CommonJS и ESM
Пошаговое руководство по созданию и оформлению npm пакета на TypeScript
https://blog.mastykarz.nl/create-npm-package-commonjs-esm-typescript/
Разрезаем изображение на кусочки (и соединяем при наведении)
Интересный и простой эффект без использования JS.
https://codepen.io/thebabydino/pen/VwOGJQx
15 советов по оптимизации страниц
Аспекты разработки (на которые часто не обращают внимание), которые помогут улучшить загрузку и работу вашего приложения.
https://www.speedcurve.com/blog/15-neglected-page-speed-optimizations/
В открытом курсе AvitoTech по JavaScript вышел третий урок.
Те, кто прослушал первые два, уже могут написать простой скрипт.
А в третьем уроке всё о данных в JavaScript, их организации и обработке: объявление переменных и инициализация, стек и куча, память, проблемные числа, области видимости.
Подписывайтесь на канал, чтобы не пропустить новые выпуски.
Что нас ждет в следующих релизах ESLint?
Последний релиз ESLint это только начало серьезных изменений. Что будет дальше - в короткой заметке по ссылке.
https://eslint.org/blog/2024/07/whats-coming-next-for-eslint/
React Conf 2024
Все доклады с прошедшей конференции по React. Enjoy.
https://conf.react.dev/talks
Свойство CSS font-size-adjust теперь часть стандарта
Свойство может помочь предотвратить сдвиги контента при загрузке fallback шрифтов.
Подробнее — в небольшой заметке.
https://web.dev/blog/font-size-adjust?hl=en
Popover API 101
Нативный Popover с недавнего времени доступен в браузерах. Посмотрите как использовать его API и как можно его стилизовать и анимировать.
https://www.amitmerchant.com/popover-api-101/
Динамический Github профиль с Bun и Typescript
О том, как сделать свой профиль на GitHub динамическим используя Bun, TS и Github Actions.
https://tduyng.github.io/blog/dynamic-github-profile-with-bun-typescript/
🚀 Ищете ментора? Нужна помощь от опытного разработчика или технического лидера?
В Авито запустили программу менторства, доступную для каждого, кто стремится к развитию и росту 💚
Стас Процкий, руководитель технического подразделения, определит вместе с вами направление развития карьеры, проведет собеседование для разного уровня специалистов: от мидлов до менеджеров.
Это только один из примеров — в Авито много наставников, готовых делиться знаниями.
🔍Ребята из Авито:
• проведут тестовые собеседования с разбором ответов
• помогут в направлении развития и улучшения знаний: frontend / backend-разработка, system design
• направят, если есть проблемы в команде и помогут наладить операционные процессы
Найдите своего ментора из Авито здесь: Getmentor.
Есть разные форматы работы: платные встречи или сессии за взнос на благотворительность 💚
JavaScript console.log
Способы логирования в консоль — улучшаем читабельность логов.
https://www.youtube.com/watch?v=eSGcBJIfAAU
Мидлы и сеньоры тут?
Если вы не понимаете, как и куда расти дальше, но очень хотите, пора познакомиться с IT_One! Это аккредитованная IT-компания, разрабатывающая ПО на заказ. IT_One организует и проводит митапы, хакатоны, участвует в профессиональных мероприятиях, объединяя специалистов по всей стране.
Все сотрудники IT_One имеют возможность работать удалённо и свободно развиваться за счёт компании. Для каждого действует программа ротации — всегда можно сменить направление деятельности на более интересное для себя.
👉🏻 Переходите в профиль IT_One — прямо сейчас у вас есть возможность забрать бесплатный гайд для мидлов, желающих скорее дорасти до сеньоров, а также для сеньоров, которые упёрлись в потолок и не знают, как развиваться дальше!
Реклама. ИП Пчелинцева В.В. ИНН: 701752778729, erid: 2Vtzqwrsoop
TypeScript. Что такое branded types?
https://www.youtube.com/watch?app=desktop&v=OCJX7L0VN7M
Анимация повторения текста при скроле
Очередной необычный эффект для вашего приложения.
Демо | Github
https://tympanus.net/codrops/2022/04/13/on-scroll-text-repetition-animation/
Стилизуем таблицы современным способом
https://piccalil.li/blog/styling-tables-the-modern-css-way/
В CSS появился условный оператор
Подробнее о синтаксисе и примеры использования читайте в статье.
https://css-tricks.com/if-css-gets-inline-conditionals/
Используем @starting-style и transition-behavior для анимации сцен
Практический пример с использованием новых экспериментальных функций для создания анимаций на чистом CSS.
https://nerdy.dev/using-starting-style-and-transition-behavior-for-enter-and-exit-stage-effects
Отменяем Promises в JS
Создаем отменяемые задачи в JS с помощью Promise.withResolvers и AbortController
https://webdeveloper.beehiiv.com/p/cancel-promises-javascript
Однострочники на CSS
Еще одна подборка небольших CSS стилей, которые сделают ваш проект чуточку лучше.
https://alvaromontoro.com/blog/68055/ten-css-one-liners-for-almost-every-project
Sravni Podcast — о разработке, технологиях, процессах и карьере в IT
В новом выпуске — беседа о настоящем и будущем фронтенд-разработки с Алексеем Чимочихиными, фронтенд-архитектором Сравни.
Поговорили об анархии во фронтенде, о том, в каких случаях фронтендеру нужно знать бэкенд, почему любить JS проще, чем TS, и о многом другом.
Думаю, будет интересно разработчикам самого разного уровня.
Можно смотреть на YouTube👀
Слушать на Яндекс Музыке👂