Forwarded from Точка входа в программирование
Разбираемся, как работает цикл событий в JS
Event Loop Visualizer — очень удобная песочница, в которой можно посмотреть, как работает цикл событий и асинхронный код. Просто берёте готовый или вставляете свой, запускаете его и смотрите, что происходит в очереди вызовов, цикле, API-запросах и так далее.
Причём вы также можете попробовать угадать в каком порядке будет выполнен код. Для этого есть отдельное окошко.
Пробуем тут.
#javascript
Event Loop Visualizer — очень удобная песочница, в которой можно посмотреть, как работает цикл событий и асинхронный код. Просто берёте готовый или вставляете свой, запускаете его и смотрите, что происходит в очереди вызовов, цикле, API-запросах и так далее.
Причём вы также можете попробовать угадать в каком порядке будет выполнен код. Для этого есть отдельное окошко.
Пробуем тут.
#javascript
❤8🔥2🤩2
Как писать на Angular грамотно и не совершать банальных ошибок
Фреймворк постоянно обновляется и дополняется, и уследить за всеми лучшими практиками почти нереально. Поэтому многие продолжают писать приложения по инерции, используя паттерны, которые выучили на заре второй версии. В итоге даже опытные разработчики продолжают делать ошибки, которые когда-то не считались ошибками.
В этой статье речь пойдёт не о банальных ошибках синтаксиса, о более глубоком уровне, об архитектурных просчётах и антипаттернах, которые кочуют из проекта в проект.
#angular
Фреймворк постоянно обновляется и дополняется, и уследить за всеми лучшими практиками почти нереально. Поэтому многие продолжают писать приложения по инерции, используя паттерны, которые выучили на заре второй версии. В итоге даже опытные разработчики продолжают делать ошибки, которые когда-то не считались ошибками.
В этой статье речь пойдёт не о банальных ошибках синтаксиса, о более глубоком уровне, об архитектурных просчётах и антипаттернах, которые кочуют из проекта в проект.
#angular
👍3😁1
This media is not supported in your browser
VIEW IN TELEGRAM
Полезные материалы по веб-разработке
Энтузиаст собрал в одном месте огромную подборку материалов по HTML, CSS, JavaScript, React, а также сервисы и программы, которые пригодятся веб-разработчику. Сохраняйте в закладки, чтобы не потерять.
#подборка
Энтузиаст собрал в одном месте огромную подборку материалов по HTML, CSS, JavaScript, React, а также сервисы и программы, которые пригодятся веб-разработчику. Сохраняйте в закладки, чтобы не потерять.
#подборка
❤4
Forwarded from Типичный программист
Собрали для вас подборку новогодних адвент-календарей, которые помогут интересно скрасить декабрь. Здесь задачи, статьи, видео и немного HTML-ужасов.
AdventJS. Классический адвент с задачами по JavaScript и TypeScript, живёт с 2015 года. В декабре вас ждут 24 задачи — по одной каждый день.
PerfPlanet Performance Calendar. Ежегодный адвент про web performance. Внутри свежие статьи, практики оптимизации и кейсы от инженеров крупных компаний.
HTMHell Advent Calendar. Адвент-календарь из HTML-антипаттернов. Каждый день вас ждёт забавный, но поучительный пример того, как верстать не нужно (и чем это заменить).
CSS Advent Calendar. Короткие ежедневные сниппеты про современный CSS. Хороший способ подтянуть свежие фичи и приёмы без длинных статей.
Accessibility Advent. Адвент, посвящённый доступности интерфейсов. Практики, паттерны и методы, которые помогают сделать продукты удобнее для разных пользователей.
CS Advent (C#). Каждый день публикуют по два материала про разработку на C#. Формат — статьи от практиков, фокус на реальных задачах и инструментах.
Java Advent. Адвент для всех, кто шарит за Java.
Raku Advent Calendar. Raku — это тот самый бывший Perl 6. В календаре статьи про приложения, полезные модули, техники программирования, контейнеры и даже гайды по миграции с Perl.
Knowit Julekalender. Адвент от норвежской компании Knowit для всех, кто любит программировать. За каждой «дверцей» спрятана задачка, на которую нужно ответить текстом или числом; уровень сложности плавает.
Advent of Sysadmin. 12-дневный адвент с задачами по Linux и DevOps разной сложности (с 1 по 12 декабря).
Advent of Agents (Google). Бесплатный адвент от Google для тех, кто хочет «подружиться» с ИИ-агентами. 25 дней коротких уроков, материалы под рукой и копируемый код — от быстрого старта до оркестрации мультиагентных систем.
Advent of Code 2025. Культовый адвент для тех, кто любит программные головоломки. Каждый день — новая задачка, где важны и алгоритмы, и аккуратное чтение условия.
Bekk Christmas. Контентный адвент от команды Bekk. Каждый день до 25 декабря выходят новые статьи, подкасты, туториалы, чек-листы и видео от разработчиков, дизайнеров, менеджеров и консалтеров.
Festive Tech Calendar. Месячный комьюнити-адвент с ежедневными видео, вебинарами и воркшопами по техтемам (Azure, .NET, AI, security).
А если знаете ещё какие-то крутые календари, то присылайте в комментарии. Добавим их в подборку!
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥15
Самое нужное для фронтендера в 2025: честный взгляд изнутри индустрии
2025 год стал переломным — требования к специалистам растут, стек технологий стремительно обновляется, появляются десятки новых инструментов, а часть задач на себя забрал ИИ. Что сегодня действительно важно для фронтендера, а какие навыки можно отложить?
В статье вы узнаете, какие технологии и фреймворки стали обязательными для фронтенд-разработки, как нейронки меняют рабочий процесс разработчика и почему понимание архитектурных принципов (SSR, SSG, ISR, edge-функции) стало необходимым. Материал будет полезен как действующим фронтенд-специалистам, так и тем, кто только планирует войти в эту сферу.
#фронтенд
2025 год стал переломным — требования к специалистам растут, стек технологий стремительно обновляется, появляются десятки новых инструментов, а часть задач на себя забрал ИИ. Что сегодня действительно важно для фронтендера, а какие навыки можно отложить?
В статье вы узнаете, какие технологии и фреймворки стали обязательными для фронтенд-разработки, как нейронки меняют рабочий процесс разработчика и почему понимание архитектурных принципов (SSR, SSG, ISR, edge-функции) стало необходимым. Материал будет полезен как действующим фронтенд-специалистам, так и тем, кто только планирует войти в эту сферу.
#фронтенд
👍3🗿3❤1
Срочно обновляем React до версий 19.0.1, 19.1.2 или 19.2.1
29 ноября исследователь Лахлан Дэвидсон обнаружил RCE‑уязвимость в React Server Components (RSC), зарегистрированную как CVE‑2025‑55182 и неформально названную React2Shell.
Уязвимость позволяет удалённо и без аутентификации выполнить произвольный код на сервере через специально сформированный HTTP‑запрос к endpoint’ам Server Actions / React Server Functions.
Проблема затрагивает приложения на React 19, использующие React Server Components и связанные пакеты протокола Flight (например, react‑server‑dom‑webpack и аналоги). Под удар попадают популярные фреймворки и тулчейны, использующие RSC: Next.js (App Router), React Router, Waku, Parcel RSC, Vite RSC‑плагины, RedwoodJS и прочие интеграции.
#новости #react
29 ноября исследователь Лахлан Дэвидсон обнаружил RCE‑уязвимость в React Server Components (RSC), зарегистрированную как CVE‑2025‑55182 и неформально названную React2Shell.
Уязвимость позволяет удалённо и без аутентификации выполнить произвольный код на сервере через специально сформированный HTTP‑запрос к endpoint’ам Server Actions / React Server Functions.
Проблема затрагивает приложения на React 19, использующие React Server Components и связанные пакеты протокола Flight (например, react‑server‑dom‑webpack и аналоги). Под удар попадают популярные фреймворки и тулчейны, использующие RSC: Next.js (App Router), React Router, Waku, Parcel RSC, Vite RSC‑плагины, RedwoodJS и прочие интеграции.
#новости #react
react.dev
Critical Security Vulnerability in React Server Components – React
The library for web and native user interfaces
🤣5❤3🤔3
Какой возможностью JS вы никогда не пользуетесь, но хотели бы?
В JavaScript много различных функций, которые вы по тем или иным причинам избегаете. Например, функции-генераторы, прокси и так далее.
Пишите в комментариях о каких функциях вы знаете, но не понимаете, где применить или не решаетесь внедрять.
#обсуждение
В JavaScript много различных функций, которые вы по тем или иным причинам избегаете. Например, функции-генераторы, прокси и так далее.
Пишите в комментариях о каких функциях вы знаете, но не понимаете, где применить или не решаетесь внедрять.
#обсуждение
🤔2
24 CSS-проекта: Анимация загрузки, индикаторы выполнения, карточки и многое другое
На freeCodeCamp вышло новое видео, в котором вы сможете узнать, насколько хорошо вы на самом деле знаете CSS.
На протяжении 24 заданий вы будете воссоздавать компоненты и макеты из популярных приложений, таких как GitHub, CodePen и Instagram. Вы также создадите анимацию загрузки, индикаторы выполнения, карточки и многое другое, используя чистый CSS: https://youtu.be/TzuWIHGFKCQ
#css
На freeCodeCamp вышло новое видео, в котором вы сможете узнать, насколько хорошо вы на самом деле знаете CSS.
На протяжении 24 заданий вы будете воссоздавать компоненты и макеты из популярных приложений, таких как GitHub, CodePen и Instagram. Вы также создадите анимацию загрузки, индикаторы выполнения, карточки и многое другое, используя чистый CSS: https://youtu.be/TzuWIHGFKCQ
#css
❤9
Forwarded from Типичный программист
Bun войдёт в состав Antropic
Американский ИИ-гигант Anthropic (создатели Claude) купил Bun. Современный аналог Node.js и Deno будет интегрирован в Claude Code. Стоимость сделки пока не раскрывается.
Но не стоит переживать, что теперь эта булочка не для вас. Bun останется бесплатным open-source проектом, а команда продолжит развитие среды.
#antropic #bun #новости
Американский ИИ-гигант Anthropic (создатели Claude) купил Bun. Современный аналог Node.js и Deno будет интегрирован в Claude Code. Стоимость сделки пока не раскрывается.
Но не стоит переживать, что теперь эта булочка не для вас. Bun останется бесплатным open-source проектом, а команда продолжит развитие среды.
#antropic #bun #новости
❤3🔥3👍1
Веб-страница
«Жидкое стекло» в вебе Новый дизайн фирменных ОС от Apple наделал шуму и постепенно начинает проникать в различные элементы дизайна сайтов и приложений. В этой статье показано, как легко повторить этот эффект с помощью возможностей как нативного JS и CSS…
Мы уже говорили о Liquid Glass в вебе. Но оказалось, что примеры в прошлой публикации работали далеко не у всех.
Поэтому нашёл ещё один рабочий вариант с инструкцией по воспроизведению у себя в проекте. Так что можете брать готовый код и повторять.
Все подробности по ссылке: https://habr.com/ru/articles/974058/
#liquidglass #ui #фронтенд
Поэтому нашёл ещё один рабочий вариант с инструкцией по воспроизведению у себя в проекте. Так что можете брать готовый код и повторять.
Все подробности по ссылке: https://habr.com/ru/articles/974058/
#liquidglass #ui #фронтенд
Хабр
Как реализовать эффект, подобный Liquid Glass, при помощи CSS без JavaScript и шейдеров
В предыдущем посте я не затронул техническую часть — исправляю это. Как Apple опять поменяла UI/UX Последние годы мы привыкли к безопасному, предсказуемому минимализму в интерфейсах. Плоские панели,...
❤2🔥2💩2
Umami 3.0: Self-hosted аналитика сайтов вместо Google Analytics
Umami 3.0 — это современный open-source инструмент веб-аналитики, который позволяет владельцам сайтов и разработчикам получить полное представление о посетителях без передачи данных третьим лицам, в отличие от Google Analytics. Он легко развёртывается на собственном сервере или в облаке через Docker или Kubernetes и не использует cookies и трекинг на базе fingerprinting, обеспечивая полное соответствие законам о приватности, таким как GDPR и CCPA.
Этот инструмент подойдёт всем, кто ценит конфиденциальность и хочет минимизировать нагрузку на сайт. Сервис отличается лёгким и быстрым скриптом, который не замедляет загрузку страниц и не блокируется ad-blockers, при этом предоставляя точные и полные данные без сэмплинга и сложных настроек Google Analytics, которые часто оказываются излишними.
Подробнее можно почитать на странице проекта.
#инструменты #аналитика
Umami 3.0 — это современный open-source инструмент веб-аналитики, который позволяет владельцам сайтов и разработчикам получить полное представление о посетителях без передачи данных третьим лицам, в отличие от Google Analytics. Он легко развёртывается на собственном сервере или в облаке через Docker или Kubernetes и не использует cookies и трекинг на базе fingerprinting, обеспечивая полное соответствие законам о приватности, таким как GDPR и CCPA.
Этот инструмент подойдёт всем, кто ценит конфиденциальность и хочет минимизировать нагрузку на сайт. Сервис отличается лёгким и быстрым скриптом, который не замедляет загрузку страниц и не блокируется ad-blockers, при этом предоставляя точные и полные данные без сэмплинга и сложных настроек Google Analytics, которые часто оказываются излишними.
Подробнее можно почитать на странице проекта.
#инструменты #аналитика
GitHub
GitHub - umami-software/umami: Umami is a modern, privacy-focused analytics platform. An open-source alternative to Google Analytics…
Umami is a modern, privacy-focused analytics platform. An open-source alternative to Google Analytics, Mixpanel and Amplitude. - umami-software/umami
❤2
Большая шпаргалка по бэкенду на русском языке
В этой шпаргалке вы найдёте самую разную информацию, нужную бэкенд-разработчикам: как устроен интернет, Работа с БД, API, советы по тестированию и многое другое. Причём весь материал сопровождается картинками и таблицами для наглядности.
Забрать шпаргалку можно здесь: https://github.com/cheatsnake/backend-cheats
#шпаргалка
В этой шпаргалке вы найдёте самую разную информацию, нужную бэкенд-разработчикам: как устроен интернет, Работа с БД, API, советы по тестированию и многое другое. Причём весь материал сопровождается картинками и таблицами для наглядности.
Забрать шпаргалку можно здесь: https://github.com/cheatsnake/backend-cheats
#шпаргалка
🔥9❤3🗿3👍2👎1
Теперь создание макетов станет ещё семантичнее и удобнее: subgrid улучшает возможности CSS Grid
По умолчанию при использовании «гридов» в создании макета могут участвовать только прямые дочерние элементы сетки. И тут, конечно, можно просто засунуть все нужные блоки для сетки внутрь родителя, но это может плохо сказаться не семантике сайта.
Но теперь, чтобы избежать этого, можно воспользоваться свойством subgrid, которое передаёт дочерним сеткам свойства родительской, расширяя её возможности там, где нам это необходимо. Так мы и семантику не теряем, и используем общую структуру для разных элементов с разной степенью вложенности.
Возможно, на словах это не очень понятно. Поэтому предлагаю вам познакомиться с новым туториалом от Джона Комо, где он на наглядных примерах показал всю прелесть этого способа: https://www.joshwcomeau.com/css/subgrid/
#css #фронтенд
По умолчанию при использовании «гридов» в создании макета могут участвовать только прямые дочерние элементы сетки. И тут, конечно, можно просто засунуть все нужные блоки для сетки внутрь родителя, но это может плохо сказаться не семантике сайта.
Но теперь, чтобы избежать этого, можно воспользоваться свойством subgrid, которое передаёт дочерним сеткам свойства родительской, расширяя её возможности там, где нам это необходимо. Так мы и семантику не теряем, и используем общую структуру для разных элементов с разной степенью вложенности.
Возможно, на словах это не очень понятно. Поэтому предлагаю вам познакомиться с новым туториалом от Джона Комо, где он на наглядных примерах показал всю прелесть этого способа: https://www.joshwcomeau.com/css/subgrid/
#css #фронтенд
❤4