27159
Присоединяйтесь к нашему каналу и погрузитесь в мир фронтенд-разработки Связь: @devmangx РКН: https://clck.ru/3Fs3wT
Хитрость с HTML для ваших изображений
Загружайте изображение по умолчанию в случае ошибки!
✔️ #tip by Miguel Ángel Durán
➡️ @FrontendPortal
Network в Chrome DevTools
Один из самых полезных инструментов для разработчиков в Chrome DevTools — это Network
Он позволяет анализировать сетевой трафик, который создают сайты. Network является мощным инструментом, который помогает вам понять, как работает ваш сайт, оптимизировать его и улучшить производительность
Для некоторых из вас это может показаться тривиальным, но использование вкладки «Network» даёт больше понимания о том, как работает HTTP и как выполняются сетевые запросы
➡️ @FrontendPortal | #devtools
Трудно понять, как работает Flexbox в CSS?
Тогда этот визуальный инструмент тебе очень поможет.
Отлично подходит для обучения и ускорения работы 😏
🔜 Ссылка: https://flexboxlabs.netlify.app/
➡️ @FrontendPortal | #resourse
⭐️ Новые методы Set в JavaScript
JavaScript недавно обогатился новыми методами для работы с Set, которые значительно упрощают операции над множествами
➡️ @FrontendPortal | #js
Открыл недавно для себя ещё одну крутую фичу в 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
💡 Хакатон «Норникеля» «Интеллектуальные горизонты»: стартуем на поиски инноваций!
Погружайся в кейсы от «Норникеля» и решай задачу по одному из трех треков: от анализа данных до автоматизации, от экологического мониторинга до создания алгоритмов, которые могут изменить правила игры в индустрии.
Когда: 6 - 8 декабря.
Формат: онлайн.
Призовой фонд: 1 500 000 рублей.
🧑💻 Разработчики, аналитики, инженеры и любители новаторских решений смогут применить свои знания, чтобы придумать решения для реальных задач в промышленности.
Хакатон «Норникеля» «Интеллектуальные горизонты» — это отличный шанс показать свои идеи, повлиять на промышленность и найти новых единомышленников.
Если нет команды — поможем её собрать!
➡️ Регистрация открыта! Успей зарегистрироваться до 2 декабря, 23:59 МСК по ссылке.
#реклама
О рекламодателе
Избегай использования относительных импортов в своем коде!
Они трудны для чтения и поддержки.
Лучше используй алиасы с абсолютными путями. Это работает в проектах на JavaScript и TypeScript
✔️ #tip by Miguel Ángel Durán
➡️ @FrontendPortal
Начать изучать frontend-разработку: подборка ресурсов от НИУ ВШЭ
Центр непрерывного образования факультета компьютерных наук Высшей школы экономики собрал бесплатные материалы, которые помогут познакомиться с индустрией фронтенда.
- Литература и ресурсы для тех, кто хочет научиться проектировать и разрабатывать сайты
- Вебинар и статья: «Как работает фронтенд: от загрузки сайта до современных инструментов»
- Вебинар «С нуля до frontend-разработчика: введение в frontend и базовые инструменты»
- Вебинар «Как современные библиотеки упрощают жизнь фронтендера»
- Онлайн-курс «Введение в Git»
- Онлайн-интенсив «Frontend с нуля: первый шаг в веб-разработку»
Больше полезных публикаций, вебинаров и мероприятий — в канале Центра непрерывного образования.
Реклама: Федеральное государственное автономное образовательное учреждение высшего образования «Национальный исследовательский университет «Высшая школа экономики».
Erid: 2SDnjdPjKcX
⭐️ 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 и загрузить сайт на хостинг.
Чтобы в итоге ты своими руками разработал качественный сайт, который не стыдно добавить в портфолио или продать.
Такой опыт можно получить на бесплатном практикуме уже завтра с поддержкой от опытных кураторов на каждом этапе.
👉 Приходи на бесплатное обучение и зови с собой друзей
Бонусом получишь гайд для поиска работы и заказов на фронтенд-разработку.