FrontEndDev

Отслеживание утечек памяти в приложениях на NodeJs Интересный подход поиска и устранения утечек памяти в незнакомом приложении с большой кодовой базой. https://dev.to/gkampitakis/tracking-down-high-memory-usage-in-nodejs-2lbn

🎁 Бесплатный урок курса «Fullstack Developer» на JS. 🚀 Тема: Манипуляции с HTML и CSS с помощью JavaScript — основы динамичного взаимодействия с элементами страницы ⏰ Дата и время: 18.12.2024 в 20:00 👉 Зарегистрироваться на урок: https://otus.pw/bgDV/ Что будет на вебинаре? - Работа с DOM: освоим поиск, изменение и добавление HTML-элементов с помощью JavaScript, чтобы сделать страницы интерактивными. - Реагирование на клики и события: как с помощью JavaScript управлять действиями пользователя, изменяя элементы страницы по щелчкам, вводам и другим событиям. - Основы изменения стилей: научимся добавлять и убирать классы, менять стили CSS для динамического управления внешним видом элементов. Что узнают участники? - Как использовать JavaScript для взаимодействия с HTML и CSS, включая управление элементами страницы через простые клики и другие события. - Основные методы изменения стилей и классов, чтобы делать интерфейсы более динамичными. - Практические навыки для применения в небольших проектах, позволяя создавать страницы с интерактивными элементами, которые реагируют на действия пользователей. Бонус для участников: - Справочник по HTML - Справочник по CSS Урок пройдет в рамках курса «Fullstack Developer». Скидка на курс 15%. 👉 Зарегистрироваться на урок: https://otus.pw/bgDV/ Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

Создаем физический движок в 2D с нуля на JS Создание собственного движка довольно сложная задача, но если опустить перфоманс оптимизации и ограничиться основными функциями, то это задача на удивление окажется простой. https://ailef.tech/2022/11/12/creating-a-2d-physics-engine-from-scratch-in-javascript/

#png #стеганография Как спрятать любые данные в PNG А вы уже прятали что-то внутри PNG? Базовый способ надежно спрятать что-то внутри картинки. И все на вашем любимом JavaScript! ⭐️⭐️⭐️◽️◽️ 📖 Читать

Практическое применение якорного позиционирования Создаем онбординг (и не только) с помощью CSS Anchor position https://css-tricks.com/one-of-those-onboarding-uis-with-anchor-positioning/

Работаем с датой и временем в JavaScript Работа с датой в JS зачастую не так проста. Для облегчения и удобства многие использовали Moment.js/date-fns. Как новый Temporal API может упростить работу с датой? https://blog.logrocket.com/master-javascript-date-time-moment-js-temporal/

Большой гайд по верстке с flexbox Исчерпывающее руководство с демо и паттернами разработки на flexbox. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

В Ташкенте прошел финал международного чемпионата по программированию Yandex Cup 2024. Рекордный призовой фонд в размере 16 млн рублей разделили участники и России, Беларуси, Японии, США, Великобритании и Португалии. Участвовать можно было в 6 направлениях, среди которых был и фронтенд. Темой соревнования в этом году стала «цифровая цивилизация», объединяющая древнюю культуру и IT. Кодеры изучали быт древних цивилизаций через программирование — например, расшифровывали древние письмена и придумывали систему архивации табличек для династии Хань. А участники, попавшие на офлайн-финал, могли посетить отдельное пространство в формате «Музея Айтичности», в котором можно было представить себя человеком из будущего и посмотреть, как будут выглядеть артефакты современной IT-культуры через тысячу лет.

CSS content-visibility Одна из оптимизаций производительности, которую вы, возможно, упустили. https://www.trevorlasn.com/blog/css-content-visibility

3 наиболее необходимых CSS фич для таблиц Дарин Сеннефф рассказывает о UX таблиц с точки зрения стилизации и тех фичах, которых ему не хватает в нативной реализации таблиц, предлагая свои решения для этого. https://www.darins.page/articles/my-3-most-wanted-css-table-features

От медленного к быстрому Используем JS Performance API для анализа и оптимизации веб приложений. https://www.trevorlasn.com/blog/performance-web-api-in-javascript

Preload, prefetch, preconnect... Атрибуты загрузки ресурсов: как они работают и как влияют на скорость работы и загрузки приложений. https://habr.com/ru/articles/445264/

Импортируем JS библиотеки без сборщиков Джулия Эванс рассказывает о том, как в современной экосистеме фронтенд разработки обойтись без сборщиков (если у вас небольшой проект/вам лень/вы любите трудности и не любите сон): 3 типа файлов, которые предлагают вам библиотеки и как с ними работать. https://jvns.ca/blog/2024/11/18/how-to-import-a-javascript-library/

Копаем глубже в Feature-Sliced Design Александр Моргунов кратко разбирает FSD, делится опытом его использования и раскрывает некоторые моменты, не описанные в его документации. А также отвечает на главный вопрос: нужен вам FSD или нет? https://www.youtube.com/watch?v=M84x3pzDYr0

❓ Хотите создать свою первую веб-страницу с нуля? Без магии и кодерских заклинаний — только HTML, CSS и ваши идеи! 👉 На открытом вебинаре «Создаем свою первую страницу: HTML и CSS» вы узнаете, как работают основные элементы веб-разработки: от структуры HTML до современной стилизации с CSS. Мы разберем шаги, которые помогают создать не просто страницу, а основу для вашего портфолио или будущего сайта! 💪 Это ваш шанс научиться веб-разработке, используя простой и мощный инструментарий. Уже на вебинаре вы создадите свою первую веб-страницу — с текстом, картинками и уникальным дизайном! ⏰ Регистрируйтесь на открытый урок 3 декабря в 19:00 мск! Урок проходит в преддверии старта курса «Fullstack Developer», участники вебинара получат скидку на обучение. 👉 Для участия зарегистрируйтесь: https://otus.pw/AhpD/ Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

Адвент календарь по TS 25 задачек по TypeScript чтобы скрасить ваш декабрь 😁 https://www.adventofts.com/

Эксперимент: автоматический запуск View Transitions с помощью MutationObserver Интересный подход и реализация переходов для создания более приятного и плавного интерфейса. https://www.bram.us/2024/11/25/experiment-automatically-triggered-view-transitions-with-mutationobserver

Стилизуем рамки элементов с background-clip: border-area Как работает новое свойство background-clip: border-area, доступное пока только в Safari 18.2, и чем оно отличает от border-image. https://webkit.org/blog/16214/background-clip-border-area/

Введение в TanStack Router Посмотрим на что способен TanStack Router и его основные фичи. Простые примеры: объявление роутов, работа с параметрами url, вложенные лейауты. https://frontendmasters.com/blog/introducing-tanstack-router/

IT-инженеры — объединяйтесь! 🤝 Мы собрали огромную базу прикладной информации для IT-инженеров. Выбирайте, что вам интересно: — Полупроводники — Высоконагруженные системы — Связь и космос — Промышленный дизайн — Нейроморфные технологии — Индустрия 4.0 — Печатные платы — Технологии мира музыки 📌 Статьи, лекции, подкасты, кейсы из инженерной практики и тематические гайды в одном месте @ultimate_engineer