27159
Присоединяйтесь к нашему каналу и погрузитесь в мир фронтенд-разработки Связь: @devmangx РКН: https://clck.ru/3Fs3wT
🚀Приглашаем на бесплатный урок «Bun – быстрый альтернативный рантайм для Node.js» от онлайн-курса Node.js Developer 05 марта 20:00 (мск).
Что будет на вебинаре?
1️⃣Разбор возможностей Bun: быстрый сервер, менеджер пакетов и тестирование.
2️⃣Сравнение Bun с Node.js: плюсы, минусы, производительность.
3️⃣Практическое применение Bun в реальных проектах.
Кому вебинар будет полезен?
- Фронтент,
- Фуллстэк,
- Бэкенд разработчикам на Node.js
- И других языках для web'а.
Что узнают участники вебинара?
✅ Как использовать Bun для запуска серверов и выполнения JavaScript-приложений.
✅ Как переходить с Node.js на Bun и какие сценарии использования подходят лучше всего.
⏰ Успейте зарегистрироваться на бесплатный вебинар 05 марта 20:00 (мск). Запись ограничена: https://otus.pw/tYMS/
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
Это легковесная декларативная библиотека для создания 3D-приложений в React, основанная на движке PlayCanvas.
Поддерживает физику, события указателя, Gaussian Splats и встроенные скрипты
👉 https://playcanvas-react.vercel.app/docs
➡️ @FrontendPortal | #resourse
Иногда из-за длинных слов текст выходит за границы контейнера, а при text-align: justify в узких колонках появляются неравномерные пробелы
На помощь приходит hyphens: auto — оно позволяет браузеру автоматически переносить слова через дефис, улучшая читаемость и распределение пробелов.
Но когда короткие слова, такие как "Auto", разбиваются на две строки — это выглядит некрасиво 🫣
Тут пригодится ещё одно полезное свойство (поддерживается только в Chromium), которое предотвращает перенос слишком коротких слов:
hyphenate-limit-chars: 10 4 3;
hyphenate-limit-chars: 10;
Каналы про IT делятся на 2 типа:
1. Выучи Python, JavaScript и C++ за 0,0001 секунды просто читая наш канал…
2. Хочешь читать переписки бывшей? Хакер из канала "Взлом Жопы" рассказывает как скачать Tor…
Но среди копипастных статей и мусора есть реально годный проект айтишника, работавшего 9 лет в ИБ — Пакет Безопасности.
Внутри узнаете когда наступит эра без паролей, почему взломали СДЭК, как удалить упоминание о себе из интернетов и как не оказаться жертвой новой схемы интернет-скама.
Подпишитесь, злоумышленники не дремлют: @package_security
Идеальное выравнивание текста в верхнем и нижнем регистрах 🙃
Надоели лишние пробелы над и под текстом? Одна строка кода решит эту проблему и поможет идеально выровнять текст по центру:
/* В верхнем регистре */
.text {
text-box: cap alphabetic;
}
/* В нижнем регистре (без восходящих или нисходящих элементов) */
.text {
text-box: ex alphabetic;
}
text-box
Это одна из лучших современных библиотек UI-компонентов для React, Vue.js и других фронтенд-фреймворков
👉 https://park-ui.com/
➡️ @FrontendPortal | #resourse
😡 Устал от нудных уроков на YouTube, где половина — вода?
Хватит это терпеть) Автор канала Формошлёп убрал воду и оставил только суть:
➧ Мини-гайды по HTML, CSS и JavaScript, которые легко читать и сразу применять.
➧ Шпаргалки, лайфхаки и полезные советы с ноткой юмора.
➧ Всё чётко, лаконично и по делу.
Неважно, новичок ты или фронтендер на опыте — у нас всегда найдётся что-то полезное!
Присоединяйся: @frontbox будем вместе шлёпать формы и красить кнопки)
Автор — админ самого крупного сообщества Vue.js в Twitter 🙃
➡️ @FrontendPortal
🔝 Ловите подборку каналов по Фронтенду
Фронтенд заметки - всё что нужно для Frontend разработчика в одном месте: обучающие видео, статьи, онлайн сервисы, шпаргалки и многое другое...
JavaScript Практика - никакой скучной теории, только интересные практические уроки по JS
WebTaverna - полезные обучающие мини-гайды в картинках, а также различные полезные шпаргалки и советы по HTML, CSS и JavaScript
Гайды по React.js - полезные статьи, уроки, практика по React.js и все что с ним связано!
jsProger - обучающие мини-гайды чисто по JavaScript, без HTML и CSS
⚠️ Пост будет удален через 48 часов, поэтому успей подписаться на эти каналы, чтобы не потерять их
Прощай, create-react-app! Ушла легенда ✌️
Create React App(CRA) был популярным инструментом для старта приложений в 2017–2021 годах
Теперь он официально признан устаревшим, и в ридми проекта рекомендуют перейти на другой React фреймворк
Для новых проектов на React используйте:
npm create vite@latest
Быстрое создание уникальных SVG-фигур
Если нужно сгенерировать необычную форму в SVG, попробуйте Blobmaker. Пару кликов — и готовая «клякса» уже ждёт вас. Настраивайте количество точек, степень кривизны и сразу сохраняйте или копируйте код.
Бесплатно и удобно. Зацените: https://www.blobmaker.app/
➡️ @FrontendPortal | #resourse
Вот простая реализация мерцающего значка, который привлечет внимание вашей аудитории
Важно учитывать предпочтения пользователей в отношении анимации и включать ее только в том случае, если они не против анимации. Проверить это можно с помощью медиазапросов prefers reduced motion
➡️ @FrontendPortal | #CSS
JSON Data AI — сервис на основе ИИ, который позволяет сгенерировать JSON-данные о чем угодно, в зависимости от вашего запроса
➡️ @FrontendPortal | #resourse
Как создать доступный аккордеон в 2025 году?
В HTML есть встроенный тег <details>, который автоматически управляет состоянием открытия и закрытия. Нам не нужно добавлять ARIA-атрибуты, так как он изначально доступен
Мы можем создать аккордеон так:
<details>
<summary>Вопрос?</summary>
<div>Ответ</div>
</details>
open::marker:summary::marker {
content: "👉";
}
details[open] summary::marker {
content: "👇";
}openheight: auto с помощью CSS, так как это не поддерживается всеми основными браузерами.Web Animation API и анимировать высоту через JavaScript. На CSS Tricks есть отличный туториал на эту тему
Все надоело и пропал интерес, чувствуешь себя амебой и хочется только залипать в телефоне. Бывает?
Психолог взрослого человека - канал для айтишников, у которых периодически опускаются руки и отключается мозг, ибо переработки и постоянная тревожность не приводят к другим исходам.
✔️ Как научиться отвлекаться от работы и отдыхать?
✔️ Как совместить кучу рабочих задач и время с семьей?
✔️ Как справиться с прокрастинацией?
✔️ Как не растерять запал, даже если кажется, что ничего не выходит?
Подписывайтесь на канал @vadimpetrov_psy и научитесь работать без упахивания, выгорания и ущерба для личной жизни!
👨🏻💻 Псс. Заходите в закреп канала - там много полезного, и даже бесплатный мини-курс.
Продвинутая JavaScript отладка при помощи console.table()
Довольно аккуратно, правда? 👍
Конечно table лучше всего работает с табличными данными. Если у всех объектов будут абсолютно разные поля — вы получите таблицу, в которой большинство ячеек — undefined. Но, не смотря на это, все будет выглядеть аккуратно, давая вам хороший общий обзор
➡️ @FrontendPortal | #js
⚡️ Дождались! Ребята сделали крутейшие каналы про Айти ⚡️
Здесь сложные темы объясняют на простых картинках, понятном языке. А также решаем задачки, делимся ресурсами и советами.
Принимаем заявки, не упусти:
⚙️ Webdev | Backend & Frontend
📱 Python | Программирование
😷 Hacking | Кибербезопасность
🖥 CodHub | Программирование
🖥 Memes | Мемы айтишников
Объясни как работает any без слов
➡️ @FrontendPortal | #memes
Наткнулся на ресурс, который сильно упрощает работу с гридами — CSS Grid Generator. Просто настраиваешь нужные параметры и копируешь готовый CSS
А для любителей Tailwind есть аналогичный инструмент — TailwindGen, он сам расставит нужные классы по блокам
➡️ @FrontendPortal | #resourse
Хекслет запустил конкурс, который поможет вам познакомиться с обучающей платформой!
Чтобы поучаствовать, нужно всего два шага:
1️⃣ Подписаться на Telegram-канал.
2️⃣ Написать в комментариях под конкурсным постом небольшой рассказ на тему: «Почему я хочу стать программистом?»
🗓 Истории принимаются до 2 марта.
🎁 Призы — три подписки на 14 дней:
🔹 Две истории выберет жюри.
🔹 Одну разыграем случайным образом.
Если давно задумывались о программировании, это хороший повод попробовать!
💡 Совет по Chrome Dev Tools: Нахождение элементов с помощью CSS-селектора
Возможно, вы не знали, что можно находить элементы с помощью CSS-селекторов в панели Elements в Chrome Dev Tools
Перейдите в панель Elements, используйте сочетание клавиш (⌘ F или Ctrl + F), чтобы открыть поле поиска, и введите любой действительный CSS-селектор, чтобы быстро найти нужные элементы
✔️ #tip by Shripal Soni
➡️ @FrontendPortal
Контейнерные запросы в CSS 👍
Если вы еще не пробовали контейнерные запросы, настоятельно рекомендую это сделать
Это относительно новая функция CSS (поддержка 93.36%), которая похожа на медиазапросы. В то время как медиазапросы основаны на размерах всей страницы, контейнерные запросы специфичны для отдельных элементов на странице.
👉 Здесь мы определяем "контейнер" и условно стилизуем элементы внутри контейнера в зависимости от его размеров
👉 Другие примеры включают стилизацию отдельной карточки в зависимости от ее размера
➡️ @FrontendPortal | #CSS
Безумная JS-библиотека для создания анимаций, которые наблюдают за мышью, DOM или просто за вводимыми значениями
➡️ @FrontendPortal | #resourse
Когда 23 февраля близко, а твоя девушка – фронтенд-разработчик
➡️ @FrontendPortal | #memes
Наткнулся на интересный сайт: почти 6000 готовых UI-компонентов в HTML/CSS, которые можно юзать в проектах или просто для вдохновения.
https://uiverse.io/
➡️ @FrontendPortal | #resourse
💻 Ты разработчик, который хочет зарабатывать больше?
В IT важно не просто кодить, а разбираться в архитектуре, понимать бизнес и грамотно выстраивать свою карьеру. Иначе через пару лет ты окажешься в толпе мидлов, которым ИИ уже подбирает замену.
📌 В своем канале Саня об IT я говорю не про «как войти в IT», а как не застрять в нём.
• Какие технологии будут востребованы в 2025?
• Реальные кейсы: разбор IT-трендов без маркетинговой шелухи.
• Карьерный рост: как перейти из мидлов в сеньоры, а дальше – хоть в техлиды.
🚀 Подписывайся, если хочешь развиваться, а не топтаться на месте!
👉 /channel/+w1_gGfsUNHpiZGZi
🔥 Надёжный VPN всего за 4 рубля в день! 🔥
🔹 Молниеносная скорость 🚀
🔹 Железобетонная защита 🔒
🔹 Стабильное соединение 24/7 ⏳
Будь онлайн без ограничений, где бы ты ни был! 🌍
Присоединяйся прямо сейчас и забудь о блокировках и рисках в интернете!
👉 Подключить VPN 👈
#VPN #Безопасность #СвободаИнтернета
Если вы используете npm, то держите инструмент Bundlephobia для анализа размера и влияния npm-пакетов перед их добавлением в ваш проект
Также можно воспользоваться альтернативным сервисом pkg-size.dev
➡️ @FrontendPortal | #resourse
Мягкий перенос в HTML (­)
В отличие от элемента <wbr>, который также указывает браузеру место, где возможен разрыв слова, при использовании мягкого переноса к концу строки добавляется дефис
➡️ @FrontendPortal | #HTML