29396
🚀 Статьи, новости, туториалы по frontend разработке. http://jem-space.ru Admin: @jem_jem Пишу в @five_a_m Хорошие серваки от DigitalOcean: https://m.do.co/c/1351d64475ee Реклама: http://bit.ly/2NxmVDu
Несколько простых советов по использованию DevTools
От банального $0 в консоли до Edit and Resend Request в Network
https://www.freecodecamp.org/news/cross-browser-devtools-features
Контекстно-зависимые анимации для фиксированных элементов
Изменение масштаба, повороты и движения - динамичные визуальные эффекты для оживления вашего сайта.
Демо | Github
https://tympanus.net/codrops/2024/10/09/exploring-playful-context-aware-animations-for-fixed-elements/
Поддержка различных видов масштабирования
О том, как правильно поддерживать различное поведение зума на веб-сайтах, чтобы страницы корректно реагировали на увеличение в браузерах и сенсорное масштабирование на устройствах. Лучшие практики для улучшения доступности контента.
https://blog.logrocket.com/understanding-supporting-zoom-behaviors-web/
Управление памятью в JS c WeakRef и FinalizationRegistry
Что такое WeakRef и FinalizationRegistry, как и когда их стоит использовать и как это влияет на использование памяти.
https://jsdev.space/memory-management-js/
Несколько советов по доступности
Кевин Эндрюс делится советами по accessibility, которые можно применять уже сегодня.
https://piccalil.li/blog/practical-accessibility-tips-you-can-apply-today/
Используем Map вместо привычного Object
Дмитрий Павлутин рассказывает о том, как обойти ограничения обычных объектов для хранения данных с помощью Map.
https://dmitripavlutin.com/maps-vs-plain-objects-javascript/
В чем разница между Dialog и Popover?
Разбираем отличия и аспекты использования Dialog и Popover.
https://frontendmasters.com/blog/whats-the-difference-between-htmls-dialog-element-and-popovers
AbortController не только для fetch
Несколько вариантов использования AbortController'a, о которых мало кто знает, но которые могут быть сподручными при решении задач разработки.
https://kettanaito.com/blog/dont-sleep-on-abort-controller
Сборщики: прошлое, настоящее и будущее
Исторический экскурс на тему бандлеров: почему приходится их использовать, как они работают под капотом, какие проблемы решают и как будут развиваться дальше
https://www.youtube.com/watch?v=JUS6EPMbk0U
🙂 Как эффективно и безболезненно внедрить DevSecOps?
Positive Technologies выпустили в помощь общедоступную методологию внедрения практик безопасной разработки — AppSec Table Top.
📖 Внутри — набор принципов и подходов, которые помогут выстроить AppSec-процессы с учетом интересов бизнеса, требований регуляторов и потребностей команд.
В методологии учтена передовая экспертиза Positive Technologies в области application security, а также лучшие российские практики и зарубежные наработки.
Скачивайте гайдлайн на сайте, а дальше... вы будете знать, что делать.
Управление сессией в NextJS
Полное руководство с примерами кода по работе с сессиями без использования сторонник библиотек.
https://clerk.com/blog/complete-guide-session-management-nextjs
Переходы открытия и закрытия для <details>
Интересный и простой способ оживить нативный <details> c помощью interpolate-size и transition.
https://nerdy.dev/open-and-close-transitions-for-the-details-element
Создаем фигуры с вырезами, используя CSS маски
Простые примеры использования CSS Mask для создания фигур.
https://verpex.com/blog/website-tips/how-to-create-shapes-with-inner-curves-using-css-mask
ColorSpace
Простой и удобный генератор CSS градиентов.
https://mycolor.space/gradient3
SVG Coding Examples: Рецепты ручного создания SVG
Разбираемся с внутрянкой работы SVG на примере простых фигур и операций.
https://www.smashingmagazine.com/2024/09/svg-coding-examples-recipes-writing-vectors-by-hand/
Приглашаем на конференцию по JavaScript-разработке — 7 ноября онлайн и 14–15 ноября в Санкт-Петербурге
Новая HolyJS — это:
— 40 докладов и 3 воркшопа о JavaScript во всех сферах его использования;
— большая встреча JS-сообщества в онлайне и офлайне;
— обмен опытом, нетворкинг, конкурсы по кодингу и другие активности.
О чем можно послушать: про фронтенд, бэкенд, графику, 3D-движки в беспилотных автомобилях, архитектуру, внутренности фреймворков и многое другое.
Чем можно заняться на воркшопах: оптимизировать web perf, разработать игру для TON, внедрить HTMLVideoElement с быстрой перемоткой.
Где попробовать свои силы: в «открытом микрофоне», в соревновании Code in the Dark и других конкурсах от партнеров конференции.
Выбирайте, что вам больше по душе — и покупайте персональный билет со скидкой 15% по промокоду — FRONTENDDEV
В HolyJS можно поучаствовать и за счет компании. Почему это выгодно не только вам, но и работодателю — читайте в статье на VC.
Реклама. ООО «Джуг Ру Груп». ИНН 7801341446
Scroll Driven анимация карточек
Вариант замены привычной карусели
https://codepen.io/paulnoble/full/gOVPedz
Сейчас сезон, когда IT-мероприятий, как из рога изобилия — как оффлайн, так и онлайн
Но где найти единую "базу" ивентов? Чтобы "заглянул -> увидел все что есть -> выбрал -> пошел"?
🔥Советуем обратить внимание на канал, в котором публикуют анонсы вебинаров, хакатонов, конференций, мастер-классов, ивентов от гигантов индустрии и лучших специалистов по кодингу, дизайну, аналитике и т.д.
👍 Очень крутая вещь, где вы точно не пропустите ничего важного и интересного.
🗂 IT-мероприятия России / ITMeeting / IT events - подпишитесь, чтобы не потерять!
ViteConf 2024
43 доклада с прошедшей конференции об экосистеме vite.
https://viteconf.org/24/replay
Перевод веб приложения в Telegram Mini Apps
Интересная история о том, как команда Точки решила изменить подход к развитию продукта и перевела его на интеграцию с Telegram.
Глеб Агеев — фронт-разработчик Точка Нетворк, рассказывает о том, как это упростило разработку и делится советами по эффективной работе с платформой.
Как использовать CSS свойство backdrop-filter
Примеры стилизации с backdrop-filter, которые помогут создать необычный эффект в пару строк.
https://blog.logrocket.com/use-css-backdrop-filter-property/
Всем привет!
На связи команда RuStore.
Каждый день мы стараемся делать RuStore ещё удобнее и будем благодарны за вашу помощь. Примите участие в исследовании о работе магазинов приложений, заполнив небольшой опрос.
Это займёт не более 5 минут и поможет нам стать лучше.
Пройти опрос по ссылке
Сделайте ваше React приложение в стиле Windows 95
Библиотека React компонентов для ностальгирующих.
https://react95.github.io/React95/?path=/story/all--all
ESLint теперь поддерживает линтинг JSON
Поддержка новых правил с помощью плагинов eslint/json и eslint/markdown для проверки JSON и Markdown файлов
https://eslint.org/blog/2024/10/eslint-json-markdown-support/
Angular Routing
Все, что нужно знать о роутинге в Angular в одной статье
https://monsterlessons-academy.com/posts/angular-routing-essentials-all-you-need-to-know-in-one-post
Scroll-to-select
Создание необычного для веба контрола, позволяющего выбирать значение при помощи скролла к нужному элементу.
https://css-tricks.com/how-to-make-a-scroll-to-select-form-control/
🚀 Dockhost - современный хостинг для разработчиков приложений, ботов, mini apps и баз данных!
Облачная PaaS платформа на основе Docker-контейнеров, которая упрощает запуск и масштабирование приложений. Отлично подходит для разработчиков, владельцев пет проектов, фрилансеров, которые хотят быстро и просто запустить свой продукт, не задумываясь о настройке инфраструктуры.
👨💻Бонусом на платформе удобный интерфейс для управления контейнерами, высокий уровень безопасности и оплата по факту потребления, без фиксированных тарифов.
Помимо запуска готового образа Docker-контейнера из любого реестра, вы можете легко подключить к своему проекту в Dockhost любой репозиторий Git (GitHub, GitLub, и другие) с вашим кодом и настроить авто-деплой через Push (Push-to-Deploy).
👉 Перейти в Dockhost
5 способов ленивой подгрузки изображений
Улучшаем быстродействие и UX с помощью ленивой загрузки, используя нативные возможности браузера или библиотечные функции.
https://www.sitepoint.com/five-techniques-lazy-load-images-website-performance/
Используем Axios с Proxy
Примеры глобальной конфигурации axios, а также конфигурации одиночных запросов с использованием proxy.
https://brightdata.com/blog/how-tos/axios-proxy
CSS Converter
VS Code расширение для конвертации HTML/CSS в JS/CSS для styled components и обратно.
https://marketplace.visualstudio.com/items?itemName=Lakkannawalikar.css-converter