27159
Присоединяйтесь к нашему каналу и погрузитесь в мир фронтенд-разработки Связь: @devmangx РКН: https://clck.ru/3Fs3wT
Легко распознавай лица в JavaScript!
С этой библиотекой ты сможешь сделать это с минимальным количеством кода. Лучше всего то, что она работает в браузере, без серверов
> npm i face-api.js
✔️ #tip by Miguel Ángel Durán
➡️ @FrontendPortal
Некоторые небольшие трюки, чтобы добавить немного волшебства на ваш сайт 🌟
➡️ @FrontendPortal | #CSS
😱 Вот и всё! Теперь вам не нужно сливать деньги на дорогие курсы по фронтенд-разработке — всё необходимое для обучения доступно совершенно бесплатно!
Всё, что нужно для изучения фронтенда: полное руководство по HTML, CSS, а также практические гайды — @made_in_html_css.
Детальный анализ материалов по FRONTEND-разработке. При этом информация представлена в лёгком и доступном формате, который делает процесс обучения увлекательным и ненадоедливым!
Не упустите шанс подписаться на этот уникальный канал — Made in HTML/CSS
Это взорвет тебе мозг! 💀
Бывает, так хочется сразу открыть компонент из браузера, минуя девтулзы и поиск в дереве.
Оказывается, это реально: Click-to-Component позволяет мгновенно переходить к исходному коду компонента через Option+Click(в винде и линуксе это вроде Alt)
Также можем открыть контекстное меню с пропсами компонента по Option-Right-click
✔️ #tip by Miguel Ángel Durán
➡️ @FrontendPortal
Вот быстрый совет о том, как быстро переключаться между регистрами текста в VS Code
➡️ @FrontendPortal | #vscode
Всплывающие подсказки — важный элемент UX. Они дают более подробную информацию о содержимом элемента
Всплывающая подсказка — это небольшой блок, его также называют тултип, который появляется при наведении или нажатии на элемент. Часто тултипы используются вместе с формами, чтобы добавлять пояснения к полям
Почти никто не знает этот крутой трюк с DevTools
Можно перезаписывать CSS и JS на странице...
И изменения не исчезнут при перезагрузке!
✔️ #tip by Miguel Ángel Durán
➡️ @FrontendPortal
Вы когда-нибудь сталкивались с трудностью установить ширину элемента в 100%, одновременно задавая ему отступы (margin) в CSS? С этим трюком вам больше не придется ломать голову!
🔜 Ширина, которую мы задаем в CSS, применяется до границы элемента (включая контент, внутренние отступы (padding) и границу (border)).
Но что, если мы хотим, чтобы элемент имел margin и при этом полностью помещался внутри родителя?
Вы можете попробовать использовать немного математики, например, calc(100% - 40px), но с ключевым словом stretch для свойства width CSS автоматически сделает это за вас.
Это позволяет легко поместить элемент внутрь родителя, даже если у него есть отступы!
➡️ @FrontendPortal | #CSS
🔥Frontend Community: встречаемся на митапе в Екатеринбурге 🔥
📆 3 декабря, 18:00
📍 Офлайн: Технохаб Сбера, ул. Розы Люксембург, 56а, Екатеринбург
О чем поговорим:
🔘Программы, которые пишут программы: как мы внедрили скаффолдинг во фронтенде
Александр Абрамов, Сбер, расскажет, как скаффолдинг помогает снизить порог входа в проект, снизить bus-factor и повысить консистентность кода
🔘Typescript на максималках: как сделать код более гибким и надёжным
Константин Логиновских, Cloud.ru, поделится секретами, как повысить гибкость и надежность кода.
🔘Open Talk: «Назад в будущее — новый взгляд на веб»
ИТ-лидеры Сбера обсудят, что нужно веб-разработке, чтобы быть полноценной альтернативой нативным решениям, какие веб-приложения уже сегодня выходят за рамки классических браузеров и, конечно, в чем сила веба на сегодняшний день.
А также:
фуршет, подарки и много общения с топовыми экспертами - не упустите шанс и приходите за новыми идеями и вдохновением!
💻 Регистрация на митап и детали программы
💡 Не используй .map() для изменения элемента в массиве!
Да, он возвращает копию, но проходит через весь массив.
Лучше используй новый метод .with(), который напрямую изменяет нужный индекс и возвращает копию
✔️ #tip by Miguel Ángel Durán
➡️ @FrontendPortal
Браузеры гораздо более мощные, чем вы, вероятно, думаете!
Новые спецификации и API регулярно добавляются, чтобы расширить возможности веб-приложений
Лично мне больше всего нравится Web Audio API, потому что с его помощью можно работать со звуком на очень низком уровне. Представьте эквалайзеры, синтезаторы — и всё это прямо в браузере 💃
➡️ @FrontendPortal | #js
📁🕵️ В Windows есть папка, которая собирает на вас компромат!
IT ВЕДОМСТВО опять предупредило своих подписчиков, как разгрузить компьютер от слежки и лагов системы.
А ещё они рассказывает о признаках майнеров, как удалить трояны и порно-баннеры за 5 минут
Почему греется проц без запущенных приложений и загружен HDD или SSD.
💻 Подпишитесь на IT ВЕДОМСТВО — залог цифровой гигиены и компьютерной грамотности
Новая ИГРА для изучения CSS!
Она научит вас создавать всплывающие подсказки без JavaScript.
Как? Благодаря новой API Anchor.
От создателей Flexbox Froggy.
🔜 http://anchoreum.com
➡️ @FrontendPortal | #resourse
Знаете ли вы, что CSS теперь поддерживает установку свойства align-content для блочных элементов?
Раньше, если вы хотели выровнять контент по вертикальному центру, вы не могли этого сделать, пока не измените контейнер на flex или grid
Но теперь все основные браузеры поддерживают свойство align-content и для блочных элементов. Поддержка на данный момент 83.31%
➡️ @FrontendPortal | #CSS
Господи, да в чём проблема стать фронтендером?
Подписался на эти три канала:
👉 Фронтенд
👉 Верстка
👉 Node.JS
Заходишь каждый день, тратишь 15 минут и изучаешь актуальную информацию. Можешь сразу применять на практике. ВСЁ!
Это настолько просто, что даже твой кот справится. Подпишись сейчас, потом спасибо скажешь.
Готовишься к собеседованию в IT?
Разбираем для тебя самые актуальные вопросы для подготовки
Выбирай направление:
👩💻 Frontend
👩💻 Python
👩💻 Go
👩💻 Java
👩💻 C/C++
👩💻 C#
👩💻 PHP
👩💻 QA
🖥 SQL
👩💻 Git
🈳 Псс, ребята, тут недавно вышел обновленный курс по React от Боба Зиролла
Это 15-часовое видео, которое учит React с нуля, включая актуальный React 19. Что особенно круто — это не просто теория: вас ждут 170+ интерактивных заданий и шесть реально интересных проектов
Мне часто пишут в личные сообщения с просьбой порекомендовать правильные ресурсы для старта в веб-разработке. Scrimba и freeCodeCamp — идеальное сочетание для этого 🍵
🔜 Ссылка на курс
➡️ @FrontendPortal | #react
Нашел классный CSS-трюк, который автоматически переключает текст между черным и белым в зависимости от произвольного цвета фона 🌈
div {
--bg: red;
background: var(--bg);
/* Переключение между белым и чёрным текстом в зависимости от фона. */
color: lch(from var(--bg) calc((50 - l) * infinity) 0 0);
}
⚡️ Бесплатное обучение фронтенд-разработке с нуля с поддержкой от наставника
Опыт в программировании не нужен.
На канале Интенсивный JavaScript действующий тимлид и опытный разработчик помогает изучить фронтенд на практических задачах, которые интересно кодить
С 3 декабря стартует бесплтаное обучение, где он на практике поможет разобраться в основах — HTML/CSS и JavaScript, а также попробовать три фреймворка — Vue, Angular и React
Вот план обучения:
💡 с 3 декабря напишете фронтенд для сервиса доставки
💡 с 10 декабря свой киносайт
💡 а с 17 по 21 декабря свою доску объявлений
Обучение подойдёт, даже если у вас нет опыта в программировании — всё объясняют так, чтобы поняла даже ваша бабуля
🔖Ещё этот парень регулярно набирает новичков в свою команду и знает, как трудоустроиться и джуну, и разрабу поопытнее
Помимо работы с кодом он даст пошаговый план изучения всего, что нужно современному фронтенду.
Поделится способом трудоустройства с помощью ИИ.
Расскажет, как взять свой первый заказ на фрилансе без фриланс-бирж с огромной конкуренцией
Подписывайтесь, чтобы участвовать бесплатно
Учиться самостоятельно можно бесконечно, если не знать, куда копать. На интенсиве сократите время на поиск информации и получите пошаговый план от разработчика, который нанимает новичков в команду
👉Участвовать бесплатно
Первые уроки уже доступны
Некоторые интересные и полезные пакеты NPM, которые вы можете использовать в своих проектах
➡️ @FrontendPortal | #разное
Поделитесь лучшими IT-мемами и получите подписку на Telegram PREMIUM 🔥
Прямо сейчас в канале IT_One проходит конкурс, где коллеги из сферы IT уже активно отправляют шутки и ждут результатов.
4 декабря будут подведены итоги и определены трое победителей, чьи мемы наберут наибольшее количество реакций. В числе подарков:
🥇первое место — годовая подписка на Telegram PREMIUM
🥈второе — подписка на 6 месяцев
🥉третье — подписка на 3 месяца
Также в канале IT_One вы узнаете о самой компании, найдёте интересные статьи от сотрудников, разборы кейсов, новости и многое другое. Переходите и подписывайтесь 🤝🏻
реклама. ООО "ИТ1-Решения" ИНН: 9717134195, erid: 2VtzqvEC2TH
Хочешь изучить React, Svelte, Vue или Angular?
Этот сайт сравнивает синтаксис каждого из них!
Если ты уже знаешь один из них, ты легко освоишь другой:
→ http://component-party.pages.dev
➡️ @FrontendPortal | #resourse
СУПЕРФИШКА в VS Code 😏
Создавайте файл и его папки одним шагом
➡️ @FrontendPortal | #vscode
⚡️Всероссийский Хакатон ФИЦ 2024
🚀Попробуйте себя в одном из предложенных кейсов:
Кейс №2. Выявление трендов в сфере бухгалтерского учета, поиск «болей» бухгалтера: разработать алгоритм для поиска новых трендов и проблем бухгалтера.
Кейс №8. Формирование фото и видео контента с использованием нейросетей на основе биографии и фото персоны.
Кейс №10. Цифровая карта подземных коммуникаций с использованием Cesium.
Кейс №12. Цифровой сервис для ведения реестра зеленых насаждений города Москвы.
Кейс №17. Стартовый (профилактический) комплаенс: предотвращение рисков с помощью AI.
Кейс №19. Parallax-scroll лендинг для сайта Insidium.
И другие 19 кейсов смотрите на сайте: https://фиц2024.рф/hackathon
Хакатон пройдет в 2 этапа: Отборочный этап в Онлайн, Финал в Офлайн.
🏆Призовой фонд: 6 000 000 руб.
🔥Дедлайн регистрации: 28 ноября, 23:59
📅Даты отборочного этапа: 29 ноября - 2 декабря
🦾Даты финала: 3 - 4 декабря
Зарегистрируйтесь для участия в хакатоне: https://фиц2024.рф/hackathon
Реклама. ООО «Акселератор Возможностей», ИНН: 9704005146, erid:2VtzqwZkaCf
Мало кто по-настоящему понимает Event Loop в JavaScript 💀
Этот ресурс объясняет его пошагово и наглядно.
Вставь свой код, и он покажет, как всё выполняется:
🔜 https://vault-developer.github.io/event-loop-explorer/
➡️ @FrontendPortal | #resourse
Прочитайте больше о шифровании здесь:
Шифрование — это криптографический механизм кодирования данных с использованием секретного ключа, благодаря которому только те стороны, которые знают этот ключ, могут расшифровать и прочитать сообщение.
Есть два способа сделать это:
⏩ Симметричное шифрование:
Один и тот же ключ используется как для шифрования, так и для расшифровки. Это требует, чтобы обе стороны каким-то образом безопасно поделились секретным ключом между собой.
⏩ Асимметричное шифрование:
Для него используются два ключа: закрытый (private key) и открытый (public key). Если я генерирую пару ключей, я должен держать закрытый ключ в секрете, но могу свободно распространять открытый ключ.
Если сообщение зашифровано одним ключом, его можно расшифровать только другим ключом.
В HTTPS (и, в частности, в TLS) открытый ключ сайта распространяется через сертификаты. Это позволяет браузеру подключаться к сайту безопасно и обмениваться секретным ключом, который будет использоваться для всех последующих коммуникаций.
➡️ @FrontendPortal | #разное
Чтобы расти в профессии и брать на себя новые роли, нужно не бояться пробовать новое. Например, новое обучение.
Если попробовать курс бесплатно, можно проверить, подходит ли он вам. Тогда пробовать новое уже не так страшно.
Практикум собрал большую экспертизу Яндекса: на курсах вы освоите новые скилы на практике, получите обратную связь от опытной команды и пополните ваше портфолио.
Вот несколько наших курсов:
✅ Мидл Python-разработчик
✅ Мидл Java-разработчик
✅ Мидл Android-разработчик
✅ Мидл фронтенд-разработчик
Получите скидку 20% после прохождения первой темы любого курса. Она бесплатная🔥
Наткнулся тут на одну годную штуку — Mocky называется
В общем, если нужно быстро сгенерить какой-нибудь фейковый ответ от сервера — вот это как раз то, что надо
Заходишь на сайт, вбиваешь свой JSON-ответ, настраиваешь заголовки, коды ответов — и вуаля, у тебя уже есть URL, который можно дёргать как настоящий API 😧
✓ Эндпоинты GET/POST/PUT/DELETE
✓ Настройка заголовков и ответов
✓ Без регистрации и бесплатно
➡️ @FrontendPortal | #resourse
Это тип интерфейса, который часто встречается на сайтах социальных сетей, где воспроизводящееся видео автоматически останавливается, когда пользователь прокручивает страницу вниз
API Intersection Observer — это действительно крутая штука с множеством применений, как в данном примере. Она также проста в настройке и избавляет от необходимости вручную обрабатывать события прокрутки и проверять пересечения
➡️ @FrontendPortal | #js