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