WebDev+ | Веб-разработка

Насколько быстрый Bun? Настолько, что он успел сломать настройку нашей тестовой базы, которая крутится в Docker-контейнере. Bun выполнил SQL-запросы до того, как база вообще успела подняться. Пришлось прикрутить sleep(), чтобы дать контейнеру время стартануть. Жесть. С pnpm такого никогда не было. @WebDev_Plus

Совет по JavaScript: Можно обернуть аргументы console.log() в фигурные скобки, чтобы в выводе были видны имена переменных. @WebDev_Plus

Совет по NgRx на сегодня (и чуть вопрос) Когда используешь @ngrx/signals/events с

{ providedIn: 'root' }

ты можешь подписаться на события из фичи, которая вообще не инжектит стор. В таком случае стор может ещё не создаться, и события просто проглотятся 😅 В целом логично, это стандартное поведение DI в Angular, но я почему-то предполагал, что в NgRx есть какая-то магия, которая из коробки стартует «глобальные» сторы (срезы состояния) заранее. Решение: заинжектить глобальные сторы в app.config.ts (или core.ts), чтобы инстанс стора создавался с самого начала. @WebDev_Plus

Очень интересный ресурс для программистов и веб-дизайнеров. Инструмент для создания анимированных фонов с цветовыми градиентами. https://www.krumzi.com/tools/animated-background-generator @WebDev_Plus

Ищем новичков во фронтенд-разработке и вёрстке сайтов. Хотим показать, как получить реальный опыт в разработке сайтов и веб-приложений. А именно: - Сверстать веб-сайт на HTML + CSS; - Реализовать функционал на JavaScript; - Пощупать фронтенд-фреймворк Angular; - Подключить Backend и загрузить сайт на хостинг. Чтобы в итоге ты своими руками разработал качественный сайт, который не стыдно добавить в портфолио или продать. Такой опыт можно получить на бесплатном практикуме уже завтра с поддержкой от опытных кураторов на каждом этапе. 👉 Приходи на бесплатное обучение и зови с собой друзей Бонусом получишь гайд для поиска работы и заказов на фронтенд-разработку.

Шарь свой localhost кому угодно прямо из VS Code 🤯 В VS Code есть встроенная фишка с портами, которая позволяет открыть твой локальный сервер в интернет без всяких сторонних тулз. Как это юзать: Открой вкладку Ports в терминальной панели Жми Forward a Port Введи номер локального порта (у меня был 5173, у тебя может быть 3000, 3001 и т. д.) VS Code сгенерит ссылку — правой кнопкой и Make Public Копируй ссылку и кидай кому надо Идеально для демо, тестов на других девайсах или чтобы показать работу клиентам и команде :) В видео есть пошаговый разбор, как это делается 👌 @WebDev_Plus

Отличный веб-компонент для создания эффекта спойлера на вашем веб-сайте. Совместим с React, Vue, Angular, Svelte и другими.

> npm install spoilerjs

@WebDev_Plus

🔥Прими участие в Хакатоне от ИТ-холдинга Т1 в Москве и поборись за призовой фонд 1 200 000 рублей! Когда: 25–28 ноября Формат: онлайн + финал на площадке Участвуй, если ты: 🔹обучаешься на технической или ИТ-специальности 🔹развиваешься в направлении разработки, системной администрации, AI/ML или DevOps 🔹сможешь быть в Москве 28 ноября. Выбери свой кейс:

✴️VibeCode Jam: собеседование будущего. Создай ИИ-платформу для прохождения технических собеседований с виртуальным интервьюером. ✴️Self-Deploy: CI/CD без DevOps. Автоматизируй генерацию CI/CD пайплайнов по анализу структуры Git-репозитория.

Почему стоит участвовать: 🔘Кейс в портфолио и полезная обратная связь от менторов Т1 🔘Шанс проявить себя, чтобы начать карьеру в одной из крупнейших ИТ-компаний 🔘Реальный опыт командной работы 🔘Мерч и атмосфера сильного комьюнити — в Т1 более 5 000 джунов из 580+ вузов России и Беларуси. Регистрация открыта! ➡️ Успей до 23 ноября по ссылке. Реклама. О рекламодателе.

Bun.password упрощает безопасное хеширование и проверку паролей. Алгоритм, который используется для генерации хеша, хранится внутри самого хеша. Если используется bcrypt, возвращаемый хеш кодируется в Modular Crypt Format для совместимости с большинством существующих реализаций bcrypt. Если применяется argon2, результат кодируется в более новом PHC формате. Функция verify автоматически определяет алгоритм по входному хешу и использует правильный метод проверки. Она корректно определяет алгоритм как из PHC-, так и из MCF-кодированных хешей. По умолчанию библиотека bcrypt обрезает пароли длиннее 72 байт. В Bun, если передать Bun.password.hash пароль длиннее 72 байт и использовать алгоритм bcrypt, пароль сначала будет захеширован через SHA-512, а затем уже отправлен в bcrypt. То есть вместо того чтобы отправить в bcrypt 500-байтный пароль, который без предупреждения обрежется до 72 байт, Bun сначала прогонит его через SHA-512 и передаст в bcrypt уже получившийся хеш (только если длина превышает 72 байта). Это более безопасное поведение по умолчанию. @WebDev_Plus

Получите локализованные названия стран и языков с помощью Intl.DisplayNames @WebDev_Plus

Telegram опубликовал список 8 самых быстрорастущих каналов для программистов: Only Python — Подборки приёмов и фич, о которых не рассказывают в курсах. Only Tech — Главные тренды и инсайды из мира технологий, маркетинга и интернет-культуры. Only Hack — Реальные кейсы кибератак, инструменты и методы защиты, которые используют хакеры. Only GitHub — Репозитории, которые решают реальные задачи. Скрипты, фреймворки и готовые решения Only IT — Без мнений и слухов — только факты и важные IT-события. Only Apple — Новые апдейты, утечки и фишки, которые Apple ещё не показала. Only GPT — Промпты, хаки и свежие инструменты, о которых молчат даже AI-каналы. Only Memes — Если ты когда-нибудь деплоил в пятницу вечером — ты поймешь Подписывайтесь и прокачивайте свои скиллы.

Оцените мой алгоритм сортировки 🤓 @WebDev_Plus

Менять HTML на лету еще никогда не было так просто. Bun HTMLRewriter API дает низкоуровневый контроль для парсинга, модификации и улучшения HTML через CSS-селекторы, и все это на бешеной скорости. Реализация в Bun основана на Cloudflare lol-html. Можно переписывать контент из строк, Blob, ArrayBuffer, файлов или даже HTTP-ответов. Есть тонкое управление элементами, текстовыми нодами и комментариями. Идеально, когда нужно подправить HTML прямо в процессе обработки. @WebDev_Plus

Свежак в ChromeDevTools! Отладка полной performance-трейсы с помощью Gemini. Записал трейс, а дальше просто общаешься с Gemini про весь этот трейс: связанные Performance Insights и даже данные из поля. И главное.. не надо заранее выделять контекст, Gemini сам разберется @WebDev_Plus

Разработчик экспериментирует с HTMX и нашёл способ комбинировать JSX, TypeScript и кастомные HTML-элементы… без привычной фронтовой сборки. Стили и небольшой клиентский код он просто инлайнит прямо с сервера. Звучит странновато, но есть плюсы: всё лежит рядом, не нужно возиться с бандлерами, а работа идёт быстрее. Фокус в одном трюке: клиентские функции можно передавать в <script> как есть, забрав их исходник через Function.prototype.toString(). То же работает и для CSS. Получается, будто пишешь фронт прямо в браузере, но все плюшки TypeScript и JSX получаешь на сервере. Метод, конечно, не для гигантских приложений. Но для маленьких виджетов, кастомных элементов или отдельных фич без тонны зависимостей — вполне себе вариант. Минификацию можно отдать CDN или вообще забить, если кода немного. С внешними библиотеками помогут import maps. Автор задумки признаёт: это не серебряная пуля. Просто ещё один инструмент, который делает разработку чуть приятнее, когда он уместен. @WebDev_Plus

Айтишники не рассказывают где учатся бесплатно и эффективно Никому не говори об этом канале!!! В сфере онлайн образования появился новый гигант «TERMINAL» — который разрушит индустрию платных IT-курсов Бесплатный доступ:

🔄Практические курсы и задания 🔄Книги и статьи от профи 🔄Полезные инструменты и ресурсы 🔄IT-новости и инсайды

Обучение по всем направлениям: SQL, Python, Frontend, PHP, C++, Golang, GIT, Linux, Java, кибербезопасность и др. Если ценишь знания — подпишись: @Terminal_tg

Array.with() для аккуратных неизменяемых обновлений @WebDev_Plus

Вот небольшой совет, не про Angular. Не обязательно держать submit/reset кнопки прямо внутри формы. Можно повесить на кнопку атрибут form. Этот атрибут связывает кнопку с нужной формой, и тогда её можно разместить где угодно в документе, независимо от её позиции. Надеюсь, пригодится. @WebDev_Plus

⚡️ Запускаем крупный розыгрыш призов, где можно выиграть iPhone 17, игровые наушники, клавиатуру и мышь! Без лишних слов, условия: 1. Подписка на: — бизнестрендс — Технотренды — Блумберг 2. Нажать кнопку «Участвовать» снизу Итоги будут опубликованы 15 ноября в 18:00 на наших каналах, желаем удачи!

Мой любимый терминал — Warp. Я до сих пор нахожу в нём мелкие фишки, которые помогают работать быстрее. Знал, что там есть встроенный файловый менеджер? @WebDev_Plus