27159
Присоединяйтесь к нашему каналу и погрузитесь в мир фронтенд-разработки Связь: @devmangx РКН: https://clck.ru/3Fs3wT
Моя новая любимая функция в VSCode — включение «inline values» во время отладки.
Проверка кода становится в разы проще
➡️ @FrontendPortal | #tips
⚡ Kali LInux — канал-гайд, который научит тебя хакингу и защите информации с нуля.
Это кладезь полезной информации, первоисточник того, что появляется в платных гайдах и курсах.
•Лучшие бесплатные курсы и книги по Этичному Хакингу и Информационной Безопасности.
• Полезный репозиторий с подборкой ресурсов по хакингу
• Где изучать Linux и хакинг. Бесплатные курсы
•Виртуальная машина Linux для #OSINT на базе Ubuntu.
•Целая папка полезных ресурсов для Хакеров
и многое другое
🔈 Подписывайся, это самый простой способ научиться хакингу: @linuxkalii
💡 Совет для VS Code:
Используйте Ctrl + Shift + L, чтобы мгновенно выделить все вхождения выделенного текста в текущем файле.
Это отлично подходит для быстрых правок и массовых изменений
➡️ @FrontendPortal | #tips
CSS свойство field-sizing
Позволяет манипулировать поведением полей формы при заполнении
При значение field-sizing: content; - отключит стандартное поведение и позволит подстраивать размер полей формы в зависимости от контента field-sizing: fixed; сохранит текущее поведение, и поле ввода формы не будет изменяться в размерах
input,
textarea,
select{
field-sizing: content;
min-width: 50px;
max-width: 250px;
padding: 10px 20px;
}
Наткнулся на интересную штуковину — Midscene.js
Это мощнейший инструмент, который автоматизирует работу браузера с помощью ИИ и естественного языка
Просто описываете, что хотите сделать, обычными словами, а он сам кликает, проверяет и вытаскивает нужные данные.
Похоже на Operator от OpenAI (объявили только недавно)
🔜 Доступно как расширение для Chrome: GitHub
➡️ @FrontendPortal | #resourse
Градиентная обводка текста
Простой способ cоздать градиентную обводку для текста с помощью нескольких строк кода. В комментариях поподробнее 👇
.text {
/* Устанавливаем градиентный фон */
background: linear-gradient(
45deg, #4158D0 0%, #C850C0 50%, #FFCC70 100%
);
/* Устанавливаем цвет текста, равный цвету фона контейнера */
color: black;
/* Используем свойство background-clip, при использовании значения text фон будет применен для текста элемента */
background-clip: text;
/* Используем webkit-text-stroke, чтобы добавить ширину и цвет обводки. Цвет нужно установить на transparent(прозрачный), чтобы цвет градиента из-за обрезки фона начал отображаться */
-webkit-text-stroke: 6px transparent;
}
Новые возможности для инвестиций и своя "дача" у моря — это Таиланд
Что, не ожидали? Регион активно развивается, рынок не перегрет. Стоимость недвижимости растет, потому что территория для застройки ограничена.
Иностранцам доступны рассрочки, а доходность в валюте составит 5-7% при сдаче в аренду на долгий срок или до 10% посуточно. А еще здесь стабильная к $ валюта и почти 0% инфляции.
Разобраться в недвижимости Таиланда помогает на своем канале аналитик Андрей Негинский. Он каждый день публикует квартиры и виллы для жизни и инвестиций, рассказывает об особенностях рынка недвижки и местного быта.
Подписывайтесь на канал и забирайте подборку объектов в Таиланде в закрепленном сообщении.
Нашел классную штуку для практики — BigDevSoon
Это платформа с 100 челленджами для прокачки навыков. Здесь есть задачи на любой вкус: от верстки до сложных штук с JS, анимациями и прочими веб-фишками
Что круто:
🔸Разные уровни сложности — подойдет и новичкам, и профи.
🔸Фокус на практику, а не сухую теорию.
🔸Реальные задачи, которые развивают навыки, применимые в реальной работе.
👉 https://app.bigdevsoon.me/challenges
➡️ @FrontendPortal | #resourse
Десятичные числа с нулём в списке
Мы можем подставить ноль к одиночным цифрам нумерованного списка, установив decimal-leading-zero в значении list-style-type
ol {
list-style-type: decimal-leading-zero;
}
⚡ Новые каналы с вакансиями и стажировками для джунов
Друзья, мы запустили новые каналы, где публикуются все свежие вакансии и стажировки
🔺 ВАКАНСИИ
Горячие вакансии с привлекательными офферами для джуниор разработчиков, аналитиков, дизайнеров и QA-специалистов.
Стажировки для начинающих специалистов в IT независимо от возраста!
Вакансии и стажировки
в крупнейших IT-компаниях мира:
NVidia, Apple, T-банк, Яндекс, Google и т. д.
Простой трюк, чтобы поменять две переменные местами
Деструктурирующее присваивание позволяет присваивать элементы массива в правой части переменным в левой части
Здесь мы создаем массив с двумя переменными, а затем присваиваем его противоположным переменным
➡️ @FrontendPortal | #js
Откопал интересный репозиторий — react-learning-resources
Это тщательно подобранный список материалов для быстрого освоения React и все, что с ним связано.
Здесь собраны курсы, статьи и полезные инструменты, которые покроют всё: от основ React до более продвинутых технологий.
→ https://github.com/nareshbhatia/react-learning-resources
➡️ @FrontendPortal | #resourse
⚡️ ИТОГИ УЖЕ ЗАВТРА. Конкурс с призами на 700 ТЫСЯЧ рублей подходит к концу. Дарим:
1. iPhone 16
2. AirPods Pro 2
3. Самый свежий Samsung на Android
4. PlayStation 5 Pro
5. Nintendo Switch
6. ПК с RTX 4060
7. AirPods Max
8. Игровая мышь Razer Viper Pro 2
9. Наушники Razer Barracuda
10. $200 на Steam
Держите под рукой эти бесплатные и удобные шпаргалки по CSS:
🔸Селекторы
🔸Box Model
🔸Flexbox
🔸Grid
→ Ссылка на репозиторий GitHub
➡️ @FrontendPortal | #resourse
➡Топ-каналы с инструментами для веб-разработчиков и программистов:
🖥 /channel/seniorFront - решай задачи, читай статьи и расти как фронтендер
🖥 /channel/frontendInterview - прокачай свои знания для собеседований
👩💻 /channel/sWebDev - находи лучшие библиотеки для работы
👩💻 /channel/web_craft - вдохновляйся и улучшай навыки
👩💻 /channel/python_practics - учи Python легко и эффективно
Подписывайся и развивайся с нами ✅
Держите крутой ресурс, где можно вытащить всю айдентику бренда в пару кликов
Тут можно найти логотипы, цвета, шрифты и прочие фишки более чем 22 миллионов брендов со всего мира
Полезно, быстро, современно. Проверяйте: brandfetch.com
➡️ @FrontendPortal | #resourse
Правило для анимации входа @starting-style
Используйте @starting-style, чтобы применить стиль, который браузер сможет найти до того, как элемент будет открыт на странице. Это состояние «до открытия» (из которого вы выполняете анимацию)
Что дает нам возможность придать микро анимацию даже для тех элементов, которые были скрыты с помощью свойства display: none;
Полезные ссылки:
🔸Наглядное видео-объяснение
🔸Хорошая статья
🔸Поддержка 88.9%
➡️ @FrontendPortal | #CSS
👨💻 Изучай фронтенд по мини-гайдам!
Канал WebTaverna ежедневно публикуют полезные обучающие мини-гайды в картинках, а также различные полезные шпаргалки и советы по HTML, CSS и JavaScript
➡️ Подписывайся на WebTaverna 😮
А также залетай в наш новый канал
🆕 "Фронтенд Заметки", где ты найдешь бесплатные видео-уроки и статьи по HTML, CSS, JS, а также по React.js и Vue.js
Когда используешь <div> как <button>:
➡️ @FrontendPortal | #memes
👩💻 Программирование — В С Ё
В 2024 году на кодинге уже не вывезешь, перспектива года - Информационная Безопасность.
Ловите полезные каналы, которые помогут ворваться в новое направление.
👍 ZeroDay — Уроки, эксплуатация уязвимостей с нуля
👍 Белый Хакер — Свежие новости из мира ИБ
😎 Арсенал Безопасника — Все необходимые инструменты
😎 Бункер Хакера — Статьи, книги, шпаргалки и хакинг
👨💻 Серверная Админа — Настройка и уроки по компьютерным сетям
📂Вступай и изучай новое направление!
JavaScript Visualizer 9000 — потрясающий инструмент, позволяющий наглядно видеть порядок выполнения JavaScript кода
Можно выбрать из предлагаемых примеров или запустить выполнение своего кода (думаю, часто встречали такие задачи - "в каком порядке выполнится код?")
Очень полезно для понимания JavaScript в целом
👉 https://www.jsv9000.app/
➡️ @FrontendPortal | #resourse
Свойство shape-outside
Определяет форму, вокруг которой должно обтекаться соседнее встроенное содержимое. Обычно это делается для того, чтобы текст мог перерисовываться по такой фигуре, как круг, эллипс или многоугольник
.column--left .shape {
float: right;
shape-outside: circle(100px at 100% 50%);
}
Бесплатный практический вебинар: Веб-разработчик: с нуля до мини-игры за 2 часа.
⏰ Когда: 30 январяв 19:00 по мск.
Погрузитесь в решение реальной задачи и напишите небольшую игру на HTML, JS и CSS, которая работает прямо в браузере 🎮
Расскажем, что ждут работодатели от джунов, какие есть грейды во фронтенд-разработке и на какую зарплату рассчитывать в перспективе.
Какие JS фреймворки учить: Vue, React, а может, Angular?
Задайте вопросы опытному спикеру, сделайте первый шаг в направлении новой профессии.
🎁 Всем, кто зарегистрировался - гайд «Как заговорить на сленге IT-специалистов», а каждому участнику - карта компетенций начинающего Frontend-разработчика и гайд «Как опубликовать страницу в интернете при помощи GitHub Pages»
Видео объясняет одну из особенностей TypeScript: поведение кода в бесконечном цикле while (true).
Если после такого цикла есть строки кода, они считаются недостижимыми, поскольку цикл теоретически выполняется бесконечно.
Однако, если в цикле есть логика прерывания (break), TypeScript больше не считает последующий код недостижимым.
✔️ #tip by Matt Pocock
➡️ @FrontendPortal | #TypeScript
Использование box-shadow необычным способом, которого вы могли не ожидать 🤩
Box-shadow в CSS может быть многослойным. Вы можете применять несколько теней для одного элемента. Обычно это используется для создания глубоких и реалистичных теней, но что мешает нам немного поэкспериментировать? 😂
🔸 Здесь мы создаём тень с нулевым размытием и небольшим смещением, чтобы создать дублирующий слой.
🔸 Затем создаём похожий слой, но с немного большим расхождением, чтобы создать псевдо-обводку.
🔸 И, наконец, добавляем ещё один слой с настоящей тенью.
➡️ @FrontendPortal | #CSS
Совет IT-спецам на 2025 год - чаще посещайте тематические мероприятия
Зачем тратить время на Ютубчик, когда можно интересно проводить время, при этом развивая свои навыки!
А чтобы не гуглить афиши и не подписываться на сотню разных каналов, IT-мероприятия России уже собрали все самые топовые события в одном месте.
Оффлайн и онлайн, для разных специальностей и уровней знаний.
👨🏻💻 В этом канале ты найдешь самые актуальные и интересные события: анонсы форумов, конференций, митапов, вебинаров, хакатонов, олимпиад и многое другое.
Присоединяйся к комьюнити лучших спецов и заново влюбись в свою работу:
IT мероприятия России / ITMeeting / IT events
Атрибут poster
Указывает адрес картинки, которая будет отображаться, пока видео не доступно или не вопроизводится. Если атрибут poster не указан, браузер постарается отобразить первый кадр видео
➡️ @FrontendPortal | #HTML
Свойство columns помогает разделить текст или элементы списка на несколько колонок.
Вы можете контролировать как:
🔸 Количество колонок
🔸 Ширину каждой колонки
Здесь мы использовали "auto" для количества колонок и ширину 10rem.
Это заставляет браузер автоматически выбирать количество колонок в зависимости от доступного размера, так чтобы ширина каждой колонки была близка к 10rem.
Это полезно для контента, подобного новостным статьям, и, как показано в этом примере, для ссылок в подвале.
➡️ @FrontendPortal | #CSS
Если вы используете Object.fromEntries(url.searchParams) для разбора строки запроса, теперь вы можете заменить это на typedSearch(url.searchParams, schema) для:
🔸типобезопасности
🔸поддержки массивов
✔️ #tip by EGOIST
➡️ @FrontendPortal | #TypeScript