29396
🚀 Статьи, новости, туториалы по frontend разработке. http://jem-space.ru Admin: @jem_jem Пишу в @five_a_m Хорошие серваки от DigitalOcean: https://m.do.co/c/1351d64475ee Реклама: http://bit.ly/2NxmVDu
Переходы открытия и закрытия для <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/
Новые значения и функции CSS
Обновленные старые и новые фичи, которые могут заехать в релиз в ближайшем будущем.
https://alvaromontoro.com/blog/68062/new-values-and-functions-in-CSS
🥥 Kokoc Hackathon 2024: Объединяй технологии, спорт и бизнес!
Прими участие в Kokoc Hackathon 2024 – событии, где спорт, e-commerce и технологии сливаются воедино! С 3 по 18 октября ты сможешь решить реальные кейсы и побороться за призовой фонд в 1 000 000 рублей.
💼 Приглашаем аналитиков, ML-специалистов, Product-менеджеров, Backend и Frontend-разработчиков (знание Python, Django и/или PHP будет преимуществом), UI/UX-дизайнеров, студентов и выпускников технических вузов.
🎯 Задачи хакатона:
1. Веб-платформа для футбольного клуба – создай платформу для взаимодействия клуба и болельщиков.
2. Интеллектуальная рекомендательная система – создай ML-модель, прогнозирующую действия пользователей интернет-магазина.
📅 Таймлайн:
🔸 3 сентября - 30 сентября: Регистрация
🔸 3 октября: Открытие и задачи
🔸 4 - 10 октября: Чек-поинты с экспертами
🔸 18 октября: Питчинг и награждение
👉 Регистрируйся до 30 сентября! https://cnrlink.com/kokochack2024frontenddev
Реклама. ООО «Эдбокс». ИНН: 9702043065. erid: LjN8K3jeC
Улучшаем рендеринг перфоманс с CSS content-visibility
На примере сайта с большим количеством emoji посмотрим как content-visibility влияет на отрисовку страницы.
https://nolanlawson.com/2024/09/18/improving-rendering-performance-with-css-content-visibility/
Scroll-based анимация текста с помощью SVG фильтров
Очередной необычный эффект для анимации текстового контента.
Демо | GitHub
https://tympanus.net/codrops/2024/08/22/scroll-based-svg-filter-animations-on-text/
Динамические лейауты с Vue jsx: руководство по созданию поддерживаемых компонентов
Посмотрите, как динамические лейауты c Vue jsx могут оптимизировать процесс разработки, сделав ваши компоненты более гибкими.
https://www.vuemastery.com/blog/dynamic-layouts-with-vue-jsx/
React и FormData
FormData один из старых стандартов для работы с формами. Посмотрим как работать с данными форм в React и какие трюки использовать для интеграции с TS.
https://reacttraining.com/blog/react-and-form-data
«Группа Астра» проводит первую бесплатную практическую конференцию для разработчиков Astra DevConf 2024.
Разработчики ИТ-компаний раскроют секреты эффективной и безопасной разработки, а также поделятся практическими кейсами.
На конференции мы:
— покажем как реализовать разработку, сборку и тестирование в облаке;
— расскажем как легко и просто опубликовать ваше приложение в RuStore;
— поведаем, как разрабатывалась Astra Linux восьмого поколения (новый визуальный стиль - Astra Proxima, современная пакетная база и пр.);
— развенчаем миф о том, что запустить современные игры на Astra Linux невозможно;
— и многое другое.
Для участников конференции будет доступен:
— личный кабинет разработчика, в котором можно бесплатно скачивать решения «Группа Астра» для целей изучения и разработки (в том числе ОС Astra Linux 1.8);
— портал с документацией, где можно найти различные инструменты для разработки, примеры кода и готовые стенды для тестирования.
Дата и время: 24 сентября, в 10:00
Формат: онлайн/офлайн
Регистрация доступна по ссылке. Поехали!
реклама. ООО «РусБИТех-Астра», ИНН: 7726388700, erid: 2Vtzqux9UpQ
MutationObserver для CSS
@bramus/style-observer позволяет повесить JS коллбек на изменение CSS свойств
https://www.bram.us/2024/08/31/introducing-bramus-style-observer-a-mutationobserver-for-css/
Многопоточное программирование на Node.js с использованием Atomics
Павел Романов делится нюансами использования памяти при работе с worker_threads и почему стоит использовать Atomics для более предсказуемых результатов.
https://pavel-romanov.com/multithreading-in-nodejs-using-atomics-for-safe-shared-memory-operations
❓Как прототипное наследование может улучшить ваши навыки разработки на JavaScript?
🗓 Ждем вас на открытом вебинаре 18 сентября в 20:00 мск, где мы разберем:
- что такое прототипное наследование в JavaScript и как оно работает;
- как прототипное наследование помогает при разработке программ;
- как лучше понять объектную модель JavaScript;
- как писать ООП код с экономией памяти.
Урок подходит для тех, кто знает основы JavaScript и хочет углубить свои знания в области разработки.
🔥 Встречаемся в преддверии старта курса «JavaScript Developer. Basic». Все участники вебинара получат специальную цену на обучение!
👉 Регистрируйтесь прямо сейчас, чтобы не пропустить мероприятие: https://vk.cc/cAHeZ6
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru
Next.js + Playwright. Как мы начали писать автотесты и что из этого вышло
Данила, фронедт-тимлид компании KTS, делится опытом внедрения автотестов на одном из боевых проектов с NextJs 12: почему выбрали Playwright, детали разработки, интеграция с CI.
https://habr.com/ru/companies/kts/articles/843054/
🚀 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
Управляем React компонентом с помощью url
Как синхронизировать состояние компонента с url параметрами: пошаговое и интерактивное руководство.
https://buildui.com/posts/how-to-control-a-react-component-with-the-url
Math4Devs
Список математических символов с их эквивалетном в JS: от простых до сложных.
https://math4devs.com/
Хочешь щёлкать задачи по фронтенду как орешки?
Канал Frontend tests & tasks научит!
Это не очередной канал с задачами. Здесь придется думать.
Убедись сам 👉 @Frontend_tasks
2 CSS свойства, позволяющие обрезать лишнее пространство box-контейнера
Экспериментальные свойства text-box-trim и text-box-edge, позволяющие тонко настраивать размеры текстовых контейнеров.
https://css-tricks.com/two-css-properties-for-trimming-text-box-whitespace/#aa-now-where-do-you-want-to-trim-from
Розыгрыш подарков от Linux Club 🐧
— Мини-ПК GenMachine 2023 AMD Ryzen 5 3550H
— Три больших коврика с командами для Linux
— Механическая клавиатура VOROTEX K680
Для участия подпишись на Linux Club и нажми кнопку Участвую!
1 октября бот выберет 5 победителей. Отправка по РФ за наш счёт. Удачи!
Обновление Chrome DevTools
Новые фичи для оценки перфоманса: какие показатели и как теперь можно измерить.
https://www.debugbear.com/blog/fix-web-performance-devtools
Ускоряем разметку - Emmet для React
Смотрим как встроенный помощник Emmet помогает быстрее писать разметку, будь то html или jsx в React.
https://www.youtube.com/watch?v=S_s4M5LVXAQ
Text Diff на JavaScript
Простой инструмент для определения различий между строками, реализованный на JS
Демо | Github
Отправляем данные из приложения прямо в Google Sheet
Простая интеграция веб-приложений с Google Sheet без дополнительных прослоек.
https://dev.to/miracool/submitting-form-data-to-a-google-sheet-from-a-react-app-3o83
Необычные приёмы отладки, которые браузер от вас скрывает
О не очень популярных, но от этого не менее полезных способах дебага веб-приложений.
https://habr.com/ru/companies/ruvds/articles/842428/
Работа с буфером обмена
Как web clipboard сохраняет различные типы контента и как можно этим управлять.
https://alexharri.com/blog/clipboard