Code Ready | Frontend
前往频道在 Telegram
Авторский канал по Frontend разработке. Ресурсы, гайды, задачи, шпаргалки. Информация ежедневно пополняется! Cотрудничество: @energy_c Реклама на бирже: https://telega.in/channels/code_ready/card РКН: https://clck.ru/3NJCKs
显示更多📈 Telegram 频道 Code Ready | Frontend 的分析概览
频道 Code Ready | Frontend (@code_ready) 俄语 语言赛道中的 是活跃参与者。目前社区聚集了 21 579 名订阅者，在 技术与应用 类别中位列第 6 115，并在 俄罗斯 地区排名第 30 327 位。
📊 受众指标与增长动态
自 невідомо 创建以来，项目保持高速增长，吸引了 21 579 名订阅者。
根据 04 十一月, 2026 的最新数据，频道保持稳定运转。过去 30 天订阅人数变化为 -88，过去 24 小时变化为 -5，整体触达仍然可观。
- 认证状态： 未认证
- 互动率 (ER)： 平均受众互动率为 6.49%。内容发布后 24 小时内通常能获得 4.31% 的反应，占订阅者总量。
- 帖子覆盖： 每篇帖子平均可获得 1 401 次浏览，首日通常累积 931 次浏览。
- 互动与反馈： 受众积极参与，单帖平均反应数为 23。
- 主题关注点： 内容集中在 css, браузер, интерфейс, загрузка, api 等核心主题上。
📝 描述与内容策略
作者将该频道定位为表达主观观点的平台：
“Авторский канал по Frontend разработке.
Ресурсы, гайды, задачи, шпаргалки.
Информация ежедневно пополняется!
Cотрудничество: @energy_c
Реклама на бирже: https://telega.in/channels/code_ready/card
РКН: https://clck.ru/3NJCKs”
凭借高频更新（最新数据采集于 05 十一月, 2026），频道始终保持新鲜度与高覆盖。分析显示受众积极互动，使其成为 技术与应用 类别中的关键影响点。
21 579
订阅者
-524 小时
+227 天
-8830 天
帖子存档
\nlet mymap = L.map(\"map\").setView([55.7558, 37.6173], 10);\nL.tileLayer(\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\", {\n maxZoom: 19,\n}).addTo(mymap);\n// Создание маркера с указанными координатами\nL.marker([55.7558, 37.6173]).addTo(mymap);\n\n@code_ready | #обучение #js","datePublished":"2024-04-23T16:01:26Z","dateModified":"2024-04-23T16:01:26Z","author":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ch/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"publisher":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ch/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"commentCount":10,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":5052},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":51},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":82},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":10}]}},{"@type":"ListItem","position":6,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/642","url":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/642","mainEntityOfPage":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/642","headline":"Reactify - это активное Frontend сообщество для бесплатного обучения веб-разработке. В нем есть: 🎓 Практическ…","articleBody":"Reactify - это активное Frontend сообщество для бесплатного обучения веб-разработке. В нем есть:\n\n🎓 Практические курсы по JavaScript, TypeScript, React, CSS. Реализация проектов - от новостных приложений до курсов криптовалюты.\n\n👨💻 Ежедневные обновления с теорией, кодом, IT-новостями и аналитикой рынка.\n\n👥 Обмен знаниями, поддержка и советы от единомышленников.\n\nНа канале тебя ждет комплексный план обучения. Frontend Roadmap 2024 + Более 60 ресурсов для бесплатного обучения.\n\nОбучайтесь, общайтесь, растите. Присоединяйтесь к @reactify_IT","datePublished":"2024-04-23T13:13:08Z","dateModified":"2024-04-23T13:13:08Z","author":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ch/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"publisher":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ch/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2829},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":14},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4}]}},{"@type":"ListItem","position":7,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/641","url":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/641","mainEntityOfPage":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/641","headline":"✅ Методы для работы с файлами В данной шпаргалке представлены основные методы для работы с файлами на JavaScr…","articleBody":"✅ Методы для работы с файлами\n\nВ данной шпаргалке представлены основные методы для работы с файлами на JavaScript. После каждого метода есть комментарий поясняющий его функционал\n\n@code_ready | #шпаргалка #js","datePublished":"2024-04-23T07:33:57Z","dateModified":"2024-04-23T07:33:57Z","author":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ch/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"publisher":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ch/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"commentCount":3,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":5132},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":39},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":94},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":3}]}},{"@type":"ListItem","position":8,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/640","url":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/640","mainEntityOfPage":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/640","headline":"✅ CSS Свойство Perspective Свойство perspective позволяет задавать трехмерным объектам расстояние. То есть то…","articleBody":"✅ CSS Свойство Perspective\n\nСвойство perspective позволяет задавать трехмерным объектам расстояние. То есть то, насколько далеко или близко наблюдатель видит сцену.\nЗначение задается в стандартных единицах: px, %, em.\n\nВозможны разные вариации, наклона, вращения и масштабирования, как и использование этого свойства в связке с hover.\n\nЯ оставлю готовый код с примером из видео в комментариях.\n\n@code_ready | #свойство #css","datePublished":"2024-04-22T16:28:06Z","dateModified":"2024-04-22T16:28:06Z","author":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ch/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"publisher":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ch/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"commentCount":1,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":5465},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":45},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":58},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":9,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/639","url":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/639","mainEntityOfPage":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/639","headline":"👨💻 Изучаешь Frontend? Я тоже! idk Frontend - канал, в котором я максимально подробно конспектирую весь мой п…","articleBody":"👨💻 Изучаешь Frontend? Я тоже!\n\nidk Frontend - канал, в котором я максимально подробно конспектирую весь мой путь обучения с самого старта.\n\nС меня:\n— Сложная теория простым языком;\n— Практические примеры и объяснения;\n— Крутые викторины по JS;\n— Работа над ошибками.\n\nС тебя:\n— Подписка @idk_frontend\n\nПродолжим обучаться вместе! 👋","datePublished":"2024-04-22T12:17:08Z","dateModified":"2024-04-22T12:17:08Z","author":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ch/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"publisher":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ch/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2952},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":15},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":1}]}},{"@type":"ListItem","position":10,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/638","url":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/638","mainEntityOfPage":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/638","headline":"Code Ready | Frontend","datePublished":"2024-04-22T06:16:11Z","dateModified":"2024-04-22T06:16:11Z","author":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ch/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"publisher":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ch/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"commentCount":7,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":4523},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":27},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":7},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":7}]}},{"@type":"ListItem","position":11,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/637","url":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/637","mainEntityOfPage":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/637","headline":"@code_ready | #консоль","articleBody":"@code_ready | #консоль","datePublished":"2024-04-22T06:16:11Z","dateModified":"2024-04-22T06:16:11Z","author":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ch/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"publisher":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ch/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":4667},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":20},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":9}]}},{"@type":"ListItem","position":12,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/636","url":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/636","mainEntityOfPage":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/636","headline":"✅ Декорация текста с помощью псевдоэлементов Данный CSS-эффект добавляет декоративные элементы в виде синих к…","articleBody":"✅ Декорация текста с помощью псевдоэлементов\n\nДанный CSS-эффект добавляет декоративные элементы в виде синих квадратов в углах блока. Они создаются с использованием ::before и ::after, которые позиционируются абсолютно относительно родительского элемента .decorated-box. \n\n
\n\n
\n\n\nfunction calculateBMI() {\n const weight = parseFloat(document.getElementById('weight').value);\n const height = parseFloat(document.getElementById('height').value) / 100;\n const bmi = weight / (height * height);\n const bmiCat = getBMICategory(bmi);\n document.getElementById('result').innerHTML = `Ваш ИМТ: ${bmi.toFixed(1)} (${bmiCat})`;\n}\nfunction getBMICategory(bmi) {\n if (bmi < 18.5) {\n return 'Недостаточный вес';\n } else if (bmi >= 18.5 && bmi < 25) {\n return 'Нормальный вес';\n } else if (bmi >= 25 && bmi < 30) {\n return 'Избыточный вес';\n } else {\n return 'Ожирение';\n }\n}\n\n@code_ready | #обучение #js","datePublished":"2024-04-20T08:49:02Z","dateModified":"2024-04-20T08:49:02Z","author":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ch/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"publisher":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ch/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"commentCount":4,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":5513},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":58},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":77},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":4}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/631","url":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/631","mainEntityOfPage":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/631","headline":"Материалы из этого канала дают на платных курсах Frontend Portal — настоящий портал для тех кто хочет стать в…","articleBody":"Материалы из этого канала дают на платных курсах\n\nFrontend Portal — настоящий портал для тех кто хочет стать востребованным frontend-разработчиком. Полезные ресурсы, шпаргалки, разбор вопросов с собеседований, задачи, викторины и многое другое\n\n👉 Присоединяйтесь к @FrontendPortal и станьте частью дружного frontend-комьюнити!","datePublished":"2024-04-19T14:15:30Z","dateModified":"2024-04-19T14:15:30Z","author":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ch/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"publisher":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ch/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":3041},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":24},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":26}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/630","url":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/630","mainEntityOfPage":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/630","headline":"✅ Menu Icon Animation Анимация различных иконок для меню на CSS. Написано без использования JavaScript. 👨💻 Г…","articleBody":"✅ Menu Icon Animation\n\nАнимация различных иконок для меню на CSS. Написано без использования JavaScript.\n\n👨💻 Готовый код: Ссылочка \n\n@code_ready | #кодпен","datePublished":"2024-04-19T06:30:11Z","dateModified":"2024-04-19T06:30:11Z","author":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ch/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"publisher":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ch/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":4916},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":68},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":101}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/629","url":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/629","mainEntityOfPage":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/629","headline":"✅ Шпаргалка по событиям JS Данная шпаргалка представляет собой набор основных событий для обработки действий…","articleBody":"✅ Шпаргалка по событиям JS\n\nДанная шпаргалка представляет собой набор основных событий для обработки действий пользователя.\n\n@code_ready | #шпаргалка #js","datePublished":"2024-04-18T16:39:11Z","dateModified":"2024-04-18T16:39:11Z","author":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ch/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"publisher":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ch/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":4652},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":68},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":163}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/628","url":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/628","mainEntityOfPage":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/628","headline":"Всем привет! 👋 Помню времена, когда я сам был начинающим разработчиком и не знал как настроить редактор кода…","articleBody":"Всем привет! 👋\n\nПомню времена, когда я сам был начинающим разработчиком и не знал как настроить редактор кода и комфортно работать в нём(\n\nБыло сложно адаптироваться, мало качественного материала на эту тему.\n\nНО! Недавно увидел полезное видео как раз на эту тему, и даже подчерпнул что-то для себя, хотя у меня уже не мало опыта в программировании)\n\nВ ходе курса автор показывает:\n— как улучшить комфорт работы в редакторе кода VS Code 👩💻\n— какие плагины лучше всего использовать;\n— как ускорить работу с кодом!\n\nВ общем рекомендую к просмотру! 💪\n\nhttps://www.youtube.com/watch?v=SE0_wdokumg","datePublished":"2024-04-18T14:11:02Z","dateModified":"2024-04-18T14:11:02Z","author":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ch/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"publisher":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ch/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":4582},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":41},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":126}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/627","url":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/627","mainEntityOfPage":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/627","headline":"📱 Заметки в файлах VS Code Расширение Bookmarks позволяет ставить заметки на любой строчке каждого файла ваше…","articleBody":"📱 Заметки в файлах VS Code\n\nРасширение Bookmarks позволяет ставить заметки на любой строчке каждого файла вашего проекта.\n\nДобавлять ярлыки можно с помощью команды Bookmarks: Toggle\n\n@code_ready | #плагин","datePublished":"2024-04-18T07:03:09Z","dateModified":"2024-04-18T07:03:09Z","author":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ch/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"publisher":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ch/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":4263},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":38},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":47}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/626","url":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/626","mainEntityOfPage":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/626","headline":"✅ Фильтры для картинок Свойство filter в CSS позволяет применять различные изменения на картинки. • Атрибут b…","articleBody":"✅ Фильтры для картинок\n\nСвойство filter в CSS позволяет применять различные изменения на картинки.\n\n• Атрибут blur накладывает размытие на картинку. Он принимает значения в: %, em, rem, vm, vh, px.\n• Атрибут bright изменяет яркость картинки. Он принимает значения в процентах.\n\nЭто свойство имеет еще несколько атрибутов, они будут описаны в следующих постах.\n\n• В первый раз мы задаем тегу с классом blur свойство фильтр с аргументом blur и значением в 5px. Это значит что картинка будет размыта на 5 пикселей.\n• Во второй раз мы меняем яркость со стандартной 100% На 50, поэтому картинка становится в 2 раза темнее.\n\n@code_ready | #свойство #css","datePublished":"2024-04-17T13:55:12Z","dateModified":"2024-04-17T13:55:12Z","author":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ch/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"publisher":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ch/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":4295},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":60},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":46}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/625","url":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/625","mainEntityOfPage":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/625","headline":"Хотите стать фронтенд-разработчиком или бустануть свою карьеру, значительно увеличив свой доход? 💸 Евгений Шу…","articleBody":"Хотите стать фронтенд-разработчиком или бустануть свою карьеру, значительно увеличив свой доход? 💸\nЕвгений Шушков - Senior Frontend-разработчик из Avito и опытный ментор знает, как вам помочь.\n\nАвтор регулярно ходит на собеседования в топовые компании, чтобы всегда быть в форме и помогать своим ученикам добавиться лучших офферов.\n\nЧто вас ждет в блоге?\n- Советы по прохождению собеседований;\n- Гайды по карьерному росту, проверенные на личном опыте и опыте учеников;\n- Лайфстайл-советы для разработчиков.\n\nПрисоединяйтесь к блогу Евгения и начните свой путь к успеху во фронтенде уже сегодня!","datePublished":"2024-04-17T11:51:12Z","dateModified":"2024-04-22T06:01:02Z","author":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ch/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"publisher":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ch/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2827},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":21},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5}]}}]}
+3
\n
\n.decorated-box {\n position: relative;\n width: 300px;\n padding: 20px;\n background-color: #f0f0f0;\n}\n.decorated-box::before, .decorated-box::after {\n content: '';\n position: absolute;\n width: 30px;\n height: 30px;\n background-color: #3498db;\n}\n.decorated-box::before {\n top: 0;\n left: 0;\n}\n.decorated-box::after {\n bottom: 0;\n right: 0;\n}\n\n@code_ready | #обучение #css","datePublished":"2024-04-21T14:05:55Z","dateModified":"2024-04-21T14:05:55Z","author":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ch/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"publisher":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ch/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":5072},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":42},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":44}]}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/635","url":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/635","mainEntityOfPage":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/635","headline":"✅ Калькулятор массы тела Данный код реализует калькулятор индекса массы тема(ИМТ), по нажатию кнопки \"Рассчит…","articleBody":"✅ Калькулятор массы тела\n\nДанный код реализует калькулятор индекса массы тема(ИМТ), по нажатию кнопки \"Рассчитать ИМТ\"\n\n\nЗаголовок
\nНекоторый текст
\n\n\n
\n\n\nfunction calculateBMI() {\n const weight = parseFloat(document.getElementById('weight').value);\n const height = parseFloat(document.getElementById('height').value) / 100;\n const bmi = weight / (height * height);\n const bmiCat = getBMICategory(bmi);\n document.getElementById('result').innerHTML = `Ваш ИМТ: ${bmi.toFixed(1)} (${bmiCat})`;\n}\nfunction getBMICategory(bmi) {\n if (bmi < 18.5) {\n return 'Недостаточный вес';\n } else if (bmi >= 18.5 && bmi < 25) {\n return 'Нормальный вес';\n } else if (bmi >= 25 && bmi < 30) {\n return 'Избыточный вес';\n } else {\n return 'Ожирение';\n }\n}\n\n@code_ready | #обучение #js","datePublished":"2024-04-20T08:49:02Z","dateModified":"2024-04-20T08:49:02Z","author":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ch/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"publisher":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ch/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"commentCount":4,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":5513},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":58},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":77},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":4}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/631","url":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/631","mainEntityOfPage":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/631","headline":"Материалы из этого канала дают на платных курсах Frontend Portal — настоящий портал для тех кто хочет стать в…","articleBody":"Материалы из этого канала дают на платных курсах\n\nFrontend Portal — настоящий портал для тех кто хочет стать востребованным frontend-разработчиком. Полезные ресурсы, шпаргалки, разбор вопросов с собеседований, задачи, викторины и многое другое\n\n👉 Присоединяйтесь к @FrontendPortal и станьте частью дружного frontend-комьюнити!","datePublished":"2024-04-19T14:15:30Z","dateModified":"2024-04-19T14:15:30Z","author":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ch/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"publisher":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ch/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":3041},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":24},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":26}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/630","url":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/630","mainEntityOfPage":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/630","headline":"✅ Menu Icon Animation Анимация различных иконок для меню на CSS. Написано без использования JavaScript. 👨💻 Г…","articleBody":"✅ Menu Icon Animation\n\nАнимация различных иконок для меню на CSS. Написано без использования JavaScript.\n\n👨💻 Готовый код: Ссылочка \n\n@code_ready | #кодпен","datePublished":"2024-04-19T06:30:11Z","dateModified":"2024-04-19T06:30:11Z","author":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ch/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"publisher":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ch/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":4916},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":68},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":101}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/629","url":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/629","mainEntityOfPage":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/629","headline":"✅ Шпаргалка по событиям JS Данная шпаргалка представляет собой набор основных событий для обработки действий…","articleBody":"✅ Шпаргалка по событиям JS\n\nДанная шпаргалка представляет собой набор основных событий для обработки действий пользователя.\n\n@code_ready | #шпаргалка #js","datePublished":"2024-04-18T16:39:11Z","dateModified":"2024-04-18T16:39:11Z","author":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ch/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"publisher":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ch/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":4652},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":68},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":163}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/628","url":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/628","mainEntityOfPage":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/628","headline":"Всем привет! 👋 Помню времена, когда я сам был начинающим разработчиком и не знал как настроить редактор кода…","articleBody":"Всем привет! 👋\n\nПомню времена, когда я сам был начинающим разработчиком и не знал как настроить редактор кода и комфортно работать в нём(\n\nБыло сложно адаптироваться, мало качественного материала на эту тему.\n\nНО! Недавно увидел полезное видео как раз на эту тему, и даже подчерпнул что-то для себя, хотя у меня уже не мало опыта в программировании)\n\nВ ходе курса автор показывает:\n— как улучшить комфорт работы в редакторе кода VS Code 👩💻\n— какие плагины лучше всего использовать;\n— как ускорить работу с кодом!\n\nВ общем рекомендую к просмотру! 💪\n\nhttps://www.youtube.com/watch?v=SE0_wdokumg","datePublished":"2024-04-18T14:11:02Z","dateModified":"2024-04-18T14:11:02Z","author":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ch/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"publisher":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ch/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":4582},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":41},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":126}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/627","url":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/627","mainEntityOfPage":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/627","headline":"📱 Заметки в файлах VS Code Расширение Bookmarks позволяет ставить заметки на любой строчке каждого файла ваше…","articleBody":"📱 Заметки в файлах VS Code\n\nРасширение Bookmarks позволяет ставить заметки на любой строчке каждого файла вашего проекта.\n\nДобавлять ярлыки можно с помощью команды Bookmarks: Toggle\n\n@code_ready | #плагин","datePublished":"2024-04-18T07:03:09Z","dateModified":"2024-04-18T07:03:09Z","author":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ch/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"publisher":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ch/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":4263},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":38},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":47}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/626","url":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/626","mainEntityOfPage":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/626","headline":"✅ Фильтры для картинок Свойство filter в CSS позволяет применять различные изменения на картинки. • Атрибут b…","articleBody":"✅ Фильтры для картинок\n\nСвойство filter в CSS позволяет применять различные изменения на картинки.\n\n• Атрибут blur накладывает размытие на картинку. Он принимает значения в: %, em, rem, vm, vh, px.\n• Атрибут bright изменяет яркость картинки. Он принимает значения в процентах.\n\nЭто свойство имеет еще несколько атрибутов, они будут описаны в следующих постах.\n\n• В первый раз мы задаем тегу с классом blur свойство фильтр с аргументом blur и значением в 5px. Это значит что картинка будет размыта на 5 пикселей.\n• Во второй раз мы меняем яркость со стандартной 100% На 50, поэтому картинка становится в 2 раза темнее.\n\n@code_ready | #свойство #css","datePublished":"2024-04-17T13:55:12Z","dateModified":"2024-04-17T13:55:12Z","author":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ch/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"publisher":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ch/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":4295},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":60},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":46}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/625","url":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/625","mainEntityOfPage":"https://telemetr.io/ch/channels/1743337580-code_ready/posts/625","headline":"Хотите стать фронтенд-разработчиком или бустануть свою карьеру, значительно увеличив свой доход? 💸 Евгений Шу…","articleBody":"Хотите стать фронтенд-разработчиком или бустануть свою карьеру, значительно увеличив свой доход? 💸\nЕвгений Шушков - Senior Frontend-разработчик из Avito и опытный ментор знает, как вам помочь.\n\nАвтор регулярно ходит на собеседования в топовые компании, чтобы всегда быть в форме и помогать своим ученикам добавиться лучших офферов.\n\nЧто вас ждет в блоге?\n- Советы по прохождению собеседований;\n- Гайды по карьерному росту, проверенные на личном опыте и опыте учеников;\n- Лайфстайл-советы для разработчиков.\n\nПрисоединяйтесь к блогу Евгения и начните свой путь к успеху во фронтенде уже сегодня!","datePublished":"2024-04-17T11:51:12Z","dateModified":"2024-04-22T06:01:02Z","author":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ch/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"publisher":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ch/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2827},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":21},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5}]}}]}
21 576
✅ Компиляция кода прямо в редакторе
Плагин Quokka позволяет компилировать JavaScript код прямо внутри редактора. Результат кода выводится справа от самого кода(не комментарием).
Ссылка на видео с полным функционалом плагина - https://www.youtube.com/watch?v=l-zB8k582k8
@code_ready | #плагин
21 576
✅ Компиляция кода прямо в редакторе
Плагин Quokka позволяет компилировать JavaScript код прямо внутри редактора. Результат кода выводится справа от самого кода(не комментарием).
Ссылка на видео с полным функционалом плагина - https://www.youtube.com/watch?v=l-zB8k582k8
@code_ready | #плагин
21 576
✅ Компиляция кода прямо в редакторе
Плагин Quokka позволяет компилировать JavaScript код прямо внутри редактора. Результат кода выводится справа от самого кода(не комментарием).
Ссылка на видео с полным функционалом плагина - https://www.youtube.com/watch?v=l-zB8k582k8
@code_ready | #плагин
21 576
Я айтишник и я устал!
Рутина, прокрастинация, куча задач и 0 желания их выполнять. Еще и в семье конфликты. Че делать?
Хватит грызть самого себя и заставлять через силу - сделаешь только хуже!
Лучше подпишись на того, кто уже не первый год работает с IT-специалистами и помогает им справиться с апатией и прокрастинацией - Психолог с научным подходом.
👨🏻💻 Не очередной инфоциган, а практикующий психолог с дипломом и аккредитацией.
✔️ Как оторваться от ленты соц. сетей и сесть за работу с удовольствием?
✔️ Как перестать работать по выходным и при этом все успевать?
✔️ Как избавиться от постоянной тревожности?
✔️ Как успокоить конфликты в семье и перестать срываться на всех, а вместо этого получить поддержку и понимание со стороны близких?
Подписывайся на канал @remizov_changes - начни работать и жить в кайф, не скатываясь в кризисы и выгорание!
А в закрепе лови бонус - 7 практик для снятия головной боли без лекарств 💆🏼♂️
Не эзотерика, а минус одна отмазка от работы - “голова болит, посмотрю лучше еще один видосик”
21 576
✅ Использование сторонней библиотеки для работы с картами
Библиотека Leaflet предоставляет широкий функционал для работы с картой мира. Это может быть удобно для вставки местоположения какого-либо предприятия, или компании к себе на сайт.
<div id="map"></div>
<!-- Подключение библиотеки Leaflet -->
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>let mymap = L.map("map").setView([55.7558, 37.6173], 10);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
maxZoom: 19,
}).addTo(mymap);
// Создание маркера с указанными координатами
L.marker([55.7558, 37.6173]).addTo(mymap);21 576
Reactify - это активное Frontend сообщество для бесплатного обучения веб-разработке. В нем есть:
🎓 Практические курсы по JavaScript, TypeScript, React, CSS. Реализация проектов - от новостных приложений до курсов криптовалюты.
👨💻 Ежедневные обновления с теорией, кодом, IT-новостями и аналитикой рынка.
👥 Обмен знаниями, поддержка и советы от единомышленников.
На канале тебя ждет комплексный план обучения. Frontend Roadmap 2024 + Более 60 ресурсов для бесплатного обучения.
Обучайтесь, общайтесь, растите. Присоединяйтесь к @reactify_IT
21 576
✅ Методы для работы с файлами
В данной шпаргалке представлены основные методы для работы с файлами на JavaScript. После каждого метода есть комментарий поясняющий его функционал
@code_ready | #шпаргалка #js
21 576
✅ CSS Свойство Perspective
Свойство perspective позволяет задавать трехмерным объектам расстояние. То есть то, насколько далеко или близко наблюдатель видит сцену.
Значение задается в стандартных единицах: px, %, em.
Возможны разные вариации, наклона, вращения и масштабирования, как и использование этого свойства в связке с hover.
Я оставлю готовый код с примером из видео в комментариях.@code_ready | #свойство #css
21 576
👨💻 Изучаешь Frontend? Я тоже!
idk Frontend - канал, в котором я максимально подробно конспектирую весь мой путь обучения с самого старта.
С меня:
— Сложная теория простым языком;
— Практические примеры и объяснения;
— Крутые викторины по JS;
— Работа над ошибками.
С тебя:
— Подписка @idk_frontend
Продолжим обучаться вместе! 👋
21 576
✅ Декорация текста с помощью псевдоэлементов
Данный CSS-эффект добавляет декоративные элементы в виде синих квадратов в углах блока. Они создаются с использованием ::before и ::after, которые позиционируются абсолютно относительно родительского элемента .decorated-box.
<div class="decorated-box">
<h2>Заголовок</h2>
<p>Некоторый текст</p>
</div>.decorated-box {
position: relative;
width: 300px;
padding: 20px;
background-color: #f0f0f0;
}
.decorated-box::before, .decorated-box::after {
content: '';
position: absolute;
width: 30px;
height: 30px;
background-color: #3498db;
}
.decorated-box::before {
top: 0;
left: 0;
}
.decorated-box::after {
bottom: 0;
right: 0;
}21 576
✅ Калькулятор массы тела
Данный код реализует калькулятор индекса массы тема(ИМТ), по нажатию кнопки "Рассчитать ИМТ"
<label for="weight">Вес (кг):</label>
<input type="number" id="weight" required><br>
<label for="height">Рост (см):</label>
<input type="number" id="height" required><br>
<button onclick="calculateBMI()">Рассчитать ИМТ</button>
<div id="result"></div>function calculateBMI() {
const weight = parseFloat(document.getElementById('weight').value);
const height = parseFloat(document.getElementById('height').value) / 100;
const bmi = weight / (height * height);
const bmiCat = getBMICategory(bmi);
document.getElementById('result').innerHTML = `Ваш ИМТ: ${bmi.toFixed(1)} (${bmiCat})`;
}
function getBMICategory(bmi) {
if (bmi < 18.5) {
return 'Недостаточный вес';
} else if (bmi >= 18.5 && bmi < 25) {
return 'Нормальный вес';
} else if (bmi >= 25 && bmi < 30) {
return 'Избыточный вес';
} else {
return 'Ожирение';
}
}21 576
+3Материалы из этого канала дают на платных курсах
Frontend Portal — настоящий портал для тех кто хочет стать востребованным frontend-разработчиком. Полезные ресурсы, шпаргалки, разбор вопросов с собеседований, задачи, викторины и многое другое
👉 Присоединяйтесь к @FrontendPortal и станьте частью дружного frontend-комьюнити!
21 576
✅ Menu Icon Animation
Анимация различных иконок для меню на CSS. Написано без использования JavaScript.
👨💻 Готовый код: Ссылочка
@code_ready | #кодпен
21 576
✅ Шпаргалка по событиям JS
Данная шпаргалка представляет собой набор основных событий для обработки действий пользователя.
@code_ready | #шпаргалка #js
21 576
Всем привет! 👋
Помню времена, когда я сам был начинающим разработчиком и не знал как настроить редактор кода и комфортно работать в нём(
Было сложно адаптироваться, мало качественного материала на эту тему.
НО! Недавно увидел полезное видео как раз на эту тему, и даже подчерпнул что-то для себя, хотя у меня уже не мало опыта в программировании)
В ходе курса автор показывает:
— как улучшить комфорт работы в редакторе кода VS Code 👩💻
— какие плагины лучше всего использовать;
— как ускорить работу с кодом!
В общем рекомендую к просмотру! 💪
https://www.youtube.com/watch?v=SE0_wdokumg
21 576
📱 Заметки в файлах VS Code
Расширение Bookmarks позволяет ставить заметки на любой строчке каждого файла вашего проекта.
Добавлять ярлыки можно с помощью команды Bookmarks: Toggle
@code_ready | #плагин
21 576
✅ Фильтры для картинок
Свойство filter в CSS позволяет применять различные изменения на картинки.
• Атрибут blur накладывает размытие на картинку. Он принимает значения в: %, em, rem, vm, vh, px.
• Атрибут bright изменяет яркость картинки. Он принимает значения в процентах.
Это свойство имеет еще несколько атрибутов, они будут описаны в следующих постах.
• В первый раз мы задаем тегу с классом blur свойство фильтр с аргументом blur и значением в 5px. Это значит что картинка будет размыта на 5 пикселей. • Во второй раз мы меняем яркость со стандартной 100% На 50, поэтому картинка становится в 2 раза темнее.@code_ready | #свойство #css
21 576
Хотите стать фронтенд-разработчиком или бустануть свою карьеру, значительно увеличив свой доход? 💸
Евгений Шушков - Senior Frontend-разработчик из Avito и опытный ментор знает, как вам помочь.
Автор регулярно ходит на собеседования в топовые компании, чтобы всегда быть в форме и помогать своим ученикам добавиться лучших офферов.
Что вас ждет в блоге?
- Советы по прохождению собеседований;
- Гайды по карьерному росту, проверенные на личном опыте и опыте учеников;
- Лайфстайл-советы для разработчиков.
Присоединяйтесь к блогу Евгения и начните свой путь к успеху во фронтенде уже сегодня!
