Code Ready | Frontend
الذهاب إلى القناة على Telegram
Авторский канал по Frontend разработке. Ресурсы, гайды, задачи, шпаргалки. Информация ежедневно пополняется! Cотрудничество: @energy_c Реклама на бирже: https://telega.in/channels/code_ready/card РКН: https://clck.ru/3NJCKs
إظهار المزيد📈 نظرة تحليلية على قناة تيليجرام 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/ar/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/ar/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/ar/channels/1743337580-code_ready/posts/642","url":"https://telemetr.io/ar/channels/1743337580-code_ready/posts/642","mainEntityOfPage":"https://telemetr.io/ar/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/ar/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/ar/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/ar/channels/1743337580-code_ready/posts/641","url":"https://telemetr.io/ar/channels/1743337580-code_ready/posts/641","mainEntityOfPage":"https://telemetr.io/ar/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/ar/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/ar/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/ar/channels/1743337580-code_ready/posts/640","url":"https://telemetr.io/ar/channels/1743337580-code_ready/posts/640","mainEntityOfPage":"https://telemetr.io/ar/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/ar/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/ar/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/ar/channels/1743337580-code_ready/posts/639","url":"https://telemetr.io/ar/channels/1743337580-code_ready/posts/639","mainEntityOfPage":"https://telemetr.io/ar/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/ar/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/ar/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/ar/channels/1743337580-code_ready/posts/638","url":"https://telemetr.io/ar/channels/1743337580-code_ready/posts/638","mainEntityOfPage":"https://telemetr.io/ar/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/ar/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/ar/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/ar/channels/1743337580-code_ready/posts/637","url":"https://telemetr.io/ar/channels/1743337580-code_ready/posts/637","mainEntityOfPage":"https://telemetr.io/ar/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/ar/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/ar/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/ar/channels/1743337580-code_ready/posts/636","url":"https://telemetr.io/ar/channels/1743337580-code_ready/posts/636","mainEntityOfPage":"https://telemetr.io/ar/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/ar/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/ar/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/ar/channels/1743337580-code_ready/posts/631","url":"https://telemetr.io/ar/channels/1743337580-code_ready/posts/631","mainEntityOfPage":"https://telemetr.io/ar/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/ar/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/ar/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/ar/channels/1743337580-code_ready/posts/630","url":"https://telemetr.io/ar/channels/1743337580-code_ready/posts/630","mainEntityOfPage":"https://telemetr.io/ar/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/ar/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/ar/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/ar/channels/1743337580-code_ready/posts/629","url":"https://telemetr.io/ar/channels/1743337580-code_ready/posts/629","mainEntityOfPage":"https://telemetr.io/ar/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/ar/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/ar/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/ar/channels/1743337580-code_ready/posts/628","url":"https://telemetr.io/ar/channels/1743337580-code_ready/posts/628","mainEntityOfPage":"https://telemetr.io/ar/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/ar/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/ar/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/ar/channels/1743337580-code_ready/posts/627","url":"https://telemetr.io/ar/channels/1743337580-code_ready/posts/627","mainEntityOfPage":"https://telemetr.io/ar/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/ar/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/ar/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/ar/channels/1743337580-code_ready/posts/626","url":"https://telemetr.io/ar/channels/1743337580-code_ready/posts/626","mainEntityOfPage":"https://telemetr.io/ar/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/ar/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/ar/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/ar/channels/1743337580-code_ready/posts/625","url":"https://telemetr.io/ar/channels/1743337580-code_ready/posts/625","mainEntityOfPage":"https://telemetr.io/ar/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/ar/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/ar/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/ar/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/ar/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/ar/channels/1743337580-code_ready/posts/635","url":"https://telemetr.io/ar/channels/1743337580-code_ready/posts/635","mainEntityOfPage":"https://telemetr.io/ar/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/ar/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/ar/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/ar/channels/1743337580-code_ready/posts/631","url":"https://telemetr.io/ar/channels/1743337580-code_ready/posts/631","mainEntityOfPage":"https://telemetr.io/ar/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/ar/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/ar/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/ar/channels/1743337580-code_ready/posts/630","url":"https://telemetr.io/ar/channels/1743337580-code_ready/posts/630","mainEntityOfPage":"https://telemetr.io/ar/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/ar/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/ar/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/ar/channels/1743337580-code_ready/posts/629","url":"https://telemetr.io/ar/channels/1743337580-code_ready/posts/629","mainEntityOfPage":"https://telemetr.io/ar/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/ar/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/ar/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/ar/channels/1743337580-code_ready/posts/628","url":"https://telemetr.io/ar/channels/1743337580-code_ready/posts/628","mainEntityOfPage":"https://telemetr.io/ar/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/ar/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/ar/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/ar/channels/1743337580-code_ready/posts/627","url":"https://telemetr.io/ar/channels/1743337580-code_ready/posts/627","mainEntityOfPage":"https://telemetr.io/ar/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/ar/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/ar/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/ar/channels/1743337580-code_ready/posts/626","url":"https://telemetr.io/ar/channels/1743337580-code_ready/posts/626","mainEntityOfPage":"https://telemetr.io/ar/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/ar/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/ar/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/ar/channels/1743337580-code_ready/posts/625","url":"https://telemetr.io/ar/channels/1743337580-code_ready/posts/625","mainEntityOfPage":"https://telemetr.io/ar/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/ar/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/ar/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 и опытный ментор знает, как вам помочь.
Автор регулярно ходит на собеседования в топовые компании, чтобы всегда быть в форме и помогать своим ученикам добавиться лучших офферов.
Что вас ждет в блоге?
- Советы по прохождению собеседований;
- Гайды по карьерному росту, проверенные на личном опыте и опыте учеников;
- Лайфстайл-советы для разработчиков.
Присоединяйтесь к блогу Евгения и начните свой путь к успеху во фронтенде уже сегодня!
