27159
Присоединяйтесь к нашему каналу и погрузитесь в мир фронтенд-разработки Связь: @devmangx РКН: https://clck.ru/3Fs3wT
⭐️ Web Workers
JavaScript изначально является однопоточным языком. У нас нет встроенной возможности многопоточности.
Но современные браузеры поддерживают Web Workers!
Хотя это не прямая многопоточность, они позволяют выполнять задачи параллельно. Вы можете создавать воркеры и отправлять/получать сообщения из основного потока.
➡️ @FrontendPortal | #js
⚡️Всероссийский Хакатон ФИЦ 2024
🚀Попробуйте себя в одном из предложенных кейсов:
1. Семантический делитель текстов: Разработать алгоритм, который сможет обеспечить точное разделение текста на блоки в рамках произвольно заданных ограничений размера блока.
2. Контекстный перевод названий научных работ: Разработать и реализовать переводчик, который будет переводить названия научных работ с русского на английский.
3. Прогнозирование бизнес драйверов: Разработать решение для задачи прогнозирования временных рядов бизнес-драйверов и произвести прогноз на следующий календарный месяц.
4. Система контроля и управления доступом: Разработка системы контроля и управления доступом в реальном времени. Система будет включать API для управления сотрудниками, точками доступа и интеграцию с системой видеонаблюдения.
И другие 16 кейсов смотрите на сайте: https://фиц2024.рф/hackathon
Хакатон пройдет в 2 этапа: Отборочный этап в Онлайн, Финал в Офлайн.
🏆Призовой фонд: 6 000 000 руб.
🔥Дедлайн регистрации: 26 ноября, 23:59
📅Даты отборочного этапа: 29 ноября - 2 декабря
🦾Даты финала: 3 - 4 декабря
Зарегистрируйтесь для участия в хакатоне: https://фиц2024.рф/hackathon
Реклама. ООО «Акселератор Возможностей», ИНН: 9704005146, erid: 2VtzquqsWwY
💡 Знал ли ты, что можно открыть браузер в VSCode?
Без расширений и установок. Всё уже встроено!
Твой код и изменения в одном окне 👆
✔️ #tip by Miguel Ángel Durán
➡️ @FrontendPortal | #vscode
Я айтишник и я устал!
С годами работы в IT все сильнее напрягает рутина, прокрастинация, куча задач и 0 желания их выполнять. Че делать?
Рекомендуем подписаться на того, кто уже не первый год работает с IT-специалистами и помогает им справиться с апатией и прокрастинацией - Психолог с научным подходом.
✔️ Как оторваться от ленты соцсетей и сесть за работу с удовольствием?
✔️ Как спокойно общаться с коллегами, если они бесят?
✔️ Как избавиться от постоянной тревожности?
✔️ Как успокоить конфликты в семье и перестать срываться на всех, а вместо этого получить поддержку и понимание со стороны близких?
Подписывайся на канал @remizov_changes - начни работать и жить в кайф, не скатываясь в кризисы и выгорание!
А в закрепе тебя уже ждут бонусы:
👨🏻💻 Видео, в котором ты найдёшь ответ на вопрос «Почему у тебя нет энергии и что с этим делать» + гайд как IT-специалисту вернуть энергию, даже если не получается отдохнуть.
Создание визуализации аудио с Web Audio API 🔴
Одна из самых интересных фич Web Audio API — возможность извлекать частоту, форму волны и другие данные из звукового источника, которые могут быть использованы для создания визуализаций
Приведенные в этом посте фрагменты кода — это только верхушка айсберга 😁 Обязательно загляните в полный исходный код на GitHub
➡️ @FrontendPortal | #tutorial
👩💻 Программирование — В С Ё
В 2024 году на кодинге уже не вывезешь, перспектива года - Информационная Безопасность.
Ловите полезные каналы, которые помогут ворваться в новое направление.
👍 ZeroDay - Уроки, эксплуатация уязвимостей с нуля
👍 Белый Хакер - Свежие новости из мира ИБ
😎 Арсенал Безопасника - Все необходимые инструменты
😎 Бункер Хакера - Статьи, книги, шпаргалки и хакинг
👨💻 Серверная Админа - Настройка и уроки по компьютерным сетям
📂Вступай и изучай новое направление!
👩💻 Автозаполнение инпута
HTML-элемент <datalist> содержит набор опций (<option>), доступных для выбора. Выбранное значение будет установлено для элемента <input>
⏩Различия между <select> и <datalist>
Кроме функции автодополнения элемента <datalist>, основное отличие между <select> и этим тегом в том, что в элементе <select> нельзя выбрать или указать значение не из списка предлагаемых
➡️ @FrontendPortal | #HTML
🖥 Разбор кодов состояния HTTP
➡️ @FrontendPortal | #разное
Срочно! Запустили набор на бесплатные курсы по обучению программирования
Подойдет новичкам и опытным:
Веб разработчик (Зп от 135 000 ₽)
Java разработчик (Зп от 165 000 ₽)
Python разработчик (Зп от 140 000 ₽)
🔔 Платить ничего не нужно! Набор только до 19 ноября
🈳 Шпаргалка по React
Краткая и полезная шпаргалка по React.js: условный рендеринг, обработка событий, хуки, компоненты и пропсы — всё с примерами кода.
➡️ @FrontendPortal | #resourse
🦋💡 Совет по TypeScript: не злоупотребляйте необязательными свойствами в логике вашего приложения
❌ prop?: string;
✅ prop: string | undefined;
Явное указание undefined для значений устраняет скрытые ошибки, которые случаются, когда вы забываете задать значение.
✔️ #tip by DavidK
➡️ @FrontendPortal | #TypeScript
Ищем новичков во фронтенд-разработке и вёрстке сайтов.
Хотим показать, как получить реальный опыт в разработке сайтов и веб-приложений.
А именно:
- Сверстать веб-сайт на HTML + CSS;
- Реализовать функционал на JavaScript;
- Пощупать фронтенд-фреймворк Angular;
- Подключить Backend и загрузить сайт на хостинг.
Чтобы в итоге ты своими руками разработал качественный сайт, который не стыдно добавить в портфолио или продать.
Такой опыт можно получить на бесплатном практикуме уже завтра с поддержкой от опытных кураторов на каждом этапе.
👉 Приходи на бесплатное обучение и зови с собой друзей
Бонусом получишь гайд для поиска работы и заказов на фронтенд-разработку.
Создание простых форм "blob" в #css с помощью свойства border-radius!
Создайте квадратный элемент с нужными размерами и добавьте немного хаотичности с помощью свойства border-radius, чтобы получить крутую форму "blob"
В контексте дизайна и CSS, blob — это абстрактная форма с неровными, органическими контурами, напоминающими пятна или капли, вместо стандартных геометрических фигур
Крутое видео — Некоторые функции Dev Tools, на которые вы, возможно, раньше не обратили особого внимания
➡️ @FrontendPortal
⚡️Слита База из 1000+ топовых IT-курсов
👩💻 Все языки: /channel/+aJ6DgvwKYzMDFi
👩💻 Frontend: /channel/+BsAYMK1p1mNDAy
👣 Backend: /channel/+KvlCPZxamGdkNDAy
📊 SQL: /channel/+ybipaFF2vNc0Njky
Всё лучшее про IT бесплатно — уже на Базе 🚀
Открыл недавно для себя ещё одну крутую фичу в VS Code:
Возможность отображать вкладки в несколько строк без прокрутки 👆
Не знал, что это возможно, крутяк 🤩
➡️ @FrontendPortal | #vscode
Простой переключатель (Switch toggle) на CSS 🤩
Стандартные чекбоксы не позволяют гибко стилизовать себя напрямую с помощью CSS.. Поэтому это обходной метод для решения этой задачи.
Он сохраняет функциональность чекбокса, но изменяет его внешний вид
Кроме того, здесь не используется JavaScript.
❗️Также не забывайте добавлять необходимые атрибуты доступности
➡️ @FrontendPortal | #tutorial
⭐️ Событие beforeunload
Это событие позволяет веб-странице вызвать диалоговое окно подтверждения, спрашивающее пользователя, действительно ли он хочет покинуть страницу
Событие происходит перед событием выгрузки страницы unload
Обработка через определение onbeforeunload на объекте window:
window.onbeforeunload = () => false
Цепочка промисов
«Чейнинг» (chaining), то есть возможность строить асинхронные цепочки из промисов – пожалуй, основная причина, из-за которой существуют и активно используются промисы
➡️ @FrontendPortal | #js
Regulex — визуализатор регулярных выражений для JavaScript
Инструмент позволяет наглядно посмотреть и понять сложные регулярные выражения, представляя их в удобочитаемом и графическом формате
🔜 Ссылка на инструмент: https://jex.im/regulex/
➡️ @FrontendPortal | #resourse
Псевдокласс :target
Его можно использовать для применения определённых стилей, когда фрагмент (или "хэш") URL совпадает со значением свойства ID элемента
Это действительно умный способ реализовать состояния "открыто" и "закрыто" для боковых панелей (sidebar) 😧
Вы можете скрыть боковую панель по умолчанию и открыть её с помощью :target
Но учтите, что одновременно может быть нацелен только один элемент. 😶
➡️ @FrontendPortal | #CSS
Для тех кто просил, наш канал с мемами для программистов и айтишников 👇
/channel/+Inv94bErEEs4ZmQy
Подборка 4-х полезных свойств для изображений
⏩С помощью clip-path можно задавать видимую область элемента. Всё, что выходит за её пределы, скрывается
⏩CSS-свойство filter добавляет визуальные эффекты к элементам на странице и использует в качестве значений функции
⏩Свойство object-fit позволяет управлять тем, как картинка <img> или видео <video> будет подстраиваться под заданные размеры
⏩Свойство aspect-ratio задаёт соотношение сторон для элемента
➡️ @FrontendPortal | #CSS
⭐️💻 Работа с локальным хранилищем в JS
Если вам нужно сохранить данные в браузере на долгое время и объем этих данных достаточно большой, то localStorage — то, что вам нужно.
Данные будут храниться бессрочно и могут быть стёрты только в двух случаях: при превышении лимита по размеру данных или очистке хранилища пользователем или программно.
➡️ @FrontendPortal | #js
Устали бороться с древним кодом? Чувствуете, что легаси по-тихоньку захватывает ваш проект? 😱
Приглашаем на онлайн-митап «Как лиду работать с легаси?», где лид фронтенд-разработчик Мерка, Никита Шальнев, поделится проверенными техниками борьбы с «программным наследием».
О чем будем говорить?
- Что такое легаси-код и откуда он берется?
- Как обнаружить легаси в проекте?
- Какую ошибку постоянно совершают лиды?
- Как предотвратить появление легаси и сохранить код чистым?
- Рефакторинг или ... может, ну его? 😜
Встречаемся с вами в 19:00 МСК в канале @merkteam ⬅️
👉 Подписывайтесь, чтобы не пропустить митап, а заодно быть в курсе других мероприятий, открытых вакансий в Мерке и полезных айти-новостей от меркурианских разработчиков.
Мало кто знает о свойстве box-decoration-break в CSS. Давайте это исправим 🙂
Это свойство управляет тем, как оформляется фрагмент текста, когда он переносится на новую строку
При значении clone каждый фрагмент оформляется независимо. Ко всем фрагментам отдельно применяется рамка, тень, фон и др.
👆На гифке показан пример использования этого свойства
➡️ @FrontendPortal | #CSS
Эффект печати текста
Трюк заключается в автоматическом пошаговом изменении ширины текстового элемента (по одному символу за раз)
.typing-effect {
width: 10ch;
overflow: hidden;
animation: typing 1s steps(10) infinite alternate-reverse;
}
@keyframes typing {
from { width: 0ch; }
}
Недавно наткнулся на интересный сайт CSS Tip, который делится мини-советами по CSS
Это отличный ресурс для тех, кто хочет быстро освежить свои знания или узнать о новых фишках CSS, буквально за минуту.
⛓ Ссылка: https://css-tip.com/
➡️ @FrontendPortal | #resourse
Выравнивание последней строки текста
В случае необходимости выравнивания последней строки используйте text-align-last, значения свойства совпадают с text-align
.text {
text-align-last: right;
}
⚡️ Как установить динамические имена свойств с помощью ES6
ES6 ввел новый синтаксис для определения динамически вычисляемых имен свойств в литералах объектов.
То, что раньше требовало двух шагов, теперь сводится к компактному синтаксису 🥳
Вы можете использовать динамические свойства как обычные, просто обернув их в квадратные скобки [ ], и внутри можно поместить любое выражение. Это аналогично использованию квадратных скобок для вручную установленного значения свойства.
➡️ @FrontendPortal | #js