Руслан Куянец | Reactify
رفتن به کانال در Telegram
Я IT-специалист, ментор и основатель проекта YeaHub и сообщества Reactify. Здесь рассказываю про Frontend и IT. Менторство: https://reactify.ru YouTube канал: https://youtube.com/@reactify-it YeaHub: https://yeahub.ru/ Связь: @ruslan_kuyanets
نمایش بیشتر6 406
مشترکین
-424 ساعت
-107 روز
-5230 روز
آرشیو پست ها
\n\nЭтот скрипт выполнится у других пользователей, открывших страницу.\n\nВ 2020 году атака XSS была использована для фишинговых атак через популярные SaaS-сервисы.\n\nКак защититься:\n- Используйте экранирование данных (escaping) перед их выводом.\n- Включите Content Security Policy (CSP).\n- Проверяйте и очищайте вводимые данные (включая HTML).\n- Ограничивайте использование опасных функций, таких как innerHTML.\n\n2. CSRF (Cross-Site Request Forgery)\n\nCSRF-атака заставляет пользователя выполнить нежелательное действие на сайте, на котором он авторизован. Это может быть перевод денег или изменение настроек.\n\nЕсли пользователь авторизован на банковском сайте, злоумышленник может подставить ссылку:\n\n![](\"https://bank.com/transfer?amount=1000&to=attacker\")
\n\nКогда пользователь откроет эту ссылку, запрос выполнится от его имени.\n\nВ 2008 году через CSRF злоумышленники массово взламывали аккаунты в социальных сетях, отправляя вредоносные сообщения друзьям пользователей.\n\nКак защититься:\n- Используйте CSRF-токены в формах и запросах.\n- Применяйте заголовок SameSite для cookies.\n- Проверяйте источник запросов, например, с помощью заголовка Referer.\n\n3. Man-in-the-Middle (MitM)\n\nMitM-атака позволяет злоумышленнику перехватывать и модифицировать данные, передаваемые между пользователем и сервером.\n\nЕсли пользователь подключён к общественному Wi-Fi без шифрования, злоумышленник может перехватить данные формы входа на сайт.\n\nВ 2015 году хакеры атаковали публичные Wi-Fi сети в аэропортах, перехватывая логины и пароли пользователей.\n\nКак защититься:\n- Всегда используйте HTTPS.\n- Применяйте HSTS (HTTP Strict Transport Security).\n- Проверяйте сертификаты серверов.\n- Избегайте использования открытых Wi-Fi сетей без VPN.\n\n4. SQL Injection\n\nSQL-инъекция позволяет злоумышленнику вмешиваться в базу данных приложения, выполняя произвольные SQL-запросы.\n\nНа сайте с формой авторизации вводится:\n\n' OR '1'='1\n\nЭто может обойти проверку логина и пароля.\n\nВ 2017 году через SQL-инъекцию была взломана база данных компании Equifax, что привело к утечке данных 143 миллионов человек.\n\nКак защититься:\n- Используйте подготовленные запросы (prepared statements).\n- Проверяйте входные данные.\n- Избегайте прямого динамического формирования SQL-запросов.\n\n5. DDoS (Distributed Denial of Service)\n\nDDoS-атака перегружает сервер, делая его недоступным для пользователей.\n\nЗлоумышленники отправляют тысячи запросов на сайт одновременно, заставляя сервер тратить все ресурсы на обработку этих запросов.\n\nВ 2016 году произошла крупнейшая DDoS-атака на провайдера Dyn, что вызвало сбои в работе сайтов Amazon, Twitter и Reddit.\n\nКак защититься:\n- Используйте CDN с защитой от DDoS (например, Cloudflare).\n- Настройте ограничения на количество запросов (rate limiting).\n- Мониторьте и фильтруйте подозрительный трафик.\n\nПонимание и предотвращение атак — ключ к созданию безопасных веб-приложений. Используйте лучшие практики и будьте в курсе новых угроз. Ведь безопасность пользователей и данных — это основа доверия к вашему продукту.\n\n#security #web","datePublished":"2024-12-28T07:32:34Z","dateModified":"2024-12-28T07:32:34Z","author":{"@type":"Organization","name":"Руслан Куянец | Reactify","url":"https://telemetr.io/fa/channels/1743248084-reactify_it","image":"https://img.telemetr.io/c/1TYusA/5264756429263324728?ty=x"},"publisher":{"@type":"Organization","name":"Руслан Куянец | Reactify","url":"https://telemetr.io/fa/channels/1743248084-reactify_it","image":"https://img.telemetr.io/c/1TYusA/5264756429263324728?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1371},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":14},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":27}]}},{"@type":"ListItem","position":11,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1743248084-reactify_it/posts/1357","url":"https://telemetr.io/fa/channels/1743248084-reactify_it/posts/1357","mainEntityOfPage":"https://telemetr.io/fa/channels/1743248084-reactify_it/posts/1357","headline":"🎮 Изменение свойств DOM и их влияние на Repainting и Layouting Когда изменяется DOM, браузер перерасчитывает…","articleBody":"🎮 Изменение свойств DOM и их влияние на Repainting и Layouting\n\nКогда изменяется DOM, браузер перерасчитывает его внешний вид и положение на экране. Этот процесс делится на два этапа:\n\n- Layout (или reflow) – перерасчёт геометрии элементов (размеры, положение, отступы и т.д.).\n- Repainting – перерисовка внешнего вида элементов (цвет, тень, шрифт и т.д.) без изменения их размеров или положения.\n\n➕ 1. Layout (Reflow)\nЧто вызывает Layout? Изменения, влияющие на размеры, положение или геометрию элементов. После Layout, браузеру необходимо заново отрисовать элемент (Repainting).\n\nПримеры действий:\n\n// Изменение размеров элемента:\nelement.style.width = \"200px\";\nelement.style.height = \"100px\";\n\n// Изменение положения (например, top, left, margin, padding):\nelement.style.margin = \"20px\";\nelement.style.top = \"50px\";\n\n// Добавление или удаление DOM-элементов:\nconst newDiv = document.createElement(\"div\");\ndocument.body.appendChild(newDiv);\n\n// Изменение шрифта, которое изменяет размеры текста:\nelement.style.fontSize = \"24px\";\n\n// Изменение значения display или position:\nelement.style.display = \"block\";\nelement.style.position = \"absolute\";\n\nОптимизация: Layout – затратный процесс, поэтому избегайте его частого вызова. Например, изменения в цикле следует группировать через requestAnimationFrame.\n\n➕ 2. Repainting\nЧто вызывает Repainting? Изменения внешнего вида элемента, которые не влияют на его размеры или положение.\n\nПримеры действий:\n\n// Изменение цвета фона:\nelement.style.backgroundColor = \"blue\";\n\n// Изменение цвета текста:\nelement.style.color = \"red\";\n\n// Изменение тени:\nelement.style.boxShadow = \"5px 5px 10px gray\";\n\n// Прозрачность:\nelement.style.opacity = \"0.5\";\n\nОптимизация: Хотя Repainting менее затратный, чем Layout, частые изменения могут вызывать визуальные задержки. Используйте classList для массового применения стилей.\n\n✔️ Советы для оптимизации производительности\nИзбегайте частого обращения к Layout-метрикам. Методы, такие как offsetWidth, offsetHeight, getComputedStyle и подобные, вызывают синхронный Layout. Если нужно получить несколько значений, лучше сохранять их в переменные.\n\n// Пример (неоптимально):\nconst width = element.offsetWidth;\nconst height = element.offsetHeight;\n\n// Пример (оптимально):\nconst { offsetWidth, offsetHeight } = element;\n\n\nИспользуйте классы вместо инлайн-стилей. Вместо применения стилей по одному:\n\nelement.style.color = \"white\";\nelement.style.backgroundColor = \"black\";\n\n// Применяйте класс:\nelement.classList.add(\"dark-theme\");\n\n\nИспользуйте transform и opacity для анимаций. Эти свойства не вызывают Layout или Repainting. Браузер оптимизирует их через GPU:\n\nelement.style.transform = \"translateX(100px)\";\nelement.style.opacity = \"0.5\";\n\n\nГруппируйте изменения через requestAnimationFrame. Это поможет избежать промежуточных пересчётов:\n\nrequestAnimationFrame(() => {\n element.style.width = \"300px\";\n element.style.height = \"150px\";\n});\n\n\n#browser #repainting #reflow","datePublished":"2024-12-26T06:54:22Z","dateModified":"2024-12-26T06:54:22Z","author":{"@type":"Organization","name":"Руслан Куянец | Reactify","url":"https://telemetr.io/fa/channels/1743248084-reactify_it","image":"https://img.telemetr.io/c/1TYusA/5264756429263324728?ty=x"},"publisher":{"@type":"Organization","name":"Руслан Куянец | Reactify","url":"https://telemetr.io/fa/channels/1743248084-reactify_it","image":"https://img.telemetr.io/c/1TYusA/5264756429263324728?ty=x"},"commentCount":1,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1444},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":21},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":33},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":12,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1743248084-reactify_it/posts/1356","url":"https://telemetr.io/fa/channels/1743248084-reactify_it/posts/1356","mainEntityOfPage":"https://telemetr.io/fa/channels/1743248084-reactify_it/posts/1356","headline":"🔼 Почему важно использовать lazy-loading Lazy-loading (ленивая загрузка) — это способ загружать ресурсы (изоб…","articleBody":"🔼 Почему важно использовать lazy-loading\n\nLazy-loading (ленивая загрузка) — это способ загружать ресурсы (изображения, компоненты) только тогда, когда они нужны. Это улучшает скорость загрузки страницы, снижает нагрузку на сервер и экономит трафик.\n\n⚠️ Проблема\n\nПри загрузке страницы браузер загружает все ресурсы сразу, даже те, которые пользователь не видит. Это увеличивает время загрузки и может ухудшить пользовательский опыт.\n\n✔️ Решение\n\nLazy-loading изображений\nСовременный HTML позволяет указать атрибут loading=\"lazy\":\n\n![\"Описание\"](\"example.jpg\")
\n\nЭто простой и поддерживаемый способ ленивой загрузки.\n\nLazy-loading компонентов в React\nВ React можно использовать React.lazy и Suspense:\n\nimport React, { Suspense } from 'react';\n\nconst HeavyComponent = React.lazy(() => import('./HeavyComponent'));\n\nfunction App() {\n return (\n
\n );\n}\n\nКомпонент HeavyComponent загрузится только тогда, когда он понадобится.\n\n💎 Преимущества\n- Ускоряет загрузку страницы.\n- Снижает объем передаваемых данных.\n- Улучшает производительность и SEO.\n\nИспользуйте lazy-loading, чтобы сделать ваши проекты быстрее и удобнее для пользователей.\n\n#lazy #react #optimization","datePublished":"2024-12-24T07:46:34Z","dateModified":"2024-12-24T07:46:34Z","author":{"@type":"Organization","name":"Руслан Куянец | Reactify","url":"https://telemetr.io/fa/channels/1743248084-reactify_it","image":"https://img.telemetr.io/c/1TYusA/5264756429263324728?ty=x"},"publisher":{"@type":"Organization","name":"Руслан Куянец | Reactify","url":"https://telemetr.io/fa/channels/1743248084-reactify_it","image":"https://img.telemetr.io/c/1TYusA/5264756429263324728?ty=x"},"commentCount":6,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1737},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":26},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":29},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":6}]}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1743248084-reactify_it/posts/1355","url":"https://telemetr.io/fa/channels/1743248084-reactify_it/posts/1355","mainEntityOfPage":"https://telemetr.io/fa/channels/1743248084-reactify_it/posts/1355","headline":"Руслан Куянец | Reactify","datePublished":"2024-12-21T10:29:37Z","dateModified":"2024-12-21T10:29:37Z","author":{"@type":"Organization","name":"Руслан Куянец | Reactify","url":"https://telemetr.io/fa/channels/1743248084-reactify_it","image":"https://img.telemetr.io/c/1TYusA/5264756429263324728?ty=x"},"publisher":{"@type":"Organization","name":"Руслан Куянец | Reactify","url":"https://telemetr.io/fa/channels/1743248084-reactify_it","image":"https://img.telemetr.io/c/1TYusA/5264756429263324728?ty=x"},"commentCount":8,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2090},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":32},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":8}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1743248084-reactify_it/posts/1354","url":"https://telemetr.io/fa/channels/1743248084-reactify_it/posts/1354","mainEntityOfPage":"https://telemetr.io/fa/channels/1743248084-reactify_it/posts/1354","headline":"📎 Основные инструменты для анализа и форматирования кода Поддержка кода так же важна, как его написание. Если…","articleBody":"📎 Основные инструменты для анализа и форматирования кода\n\nПоддержка кода так же важна, как его написание. Если код плохо организован, это может привести к:\n- Ошибкам, которые сложно обнаружить.\n- Сложностям в его понимании и доработке.\n- Несоответствию стилей написания.\n\nВот ключевые инструменты, которые помогут избежать этих проблем:\n\n✔️ ESLint — Линтер для JavaScript/TypeScript\n\nПроблема: Ошибки и несоответствие стандартам кода.\nРешение:\n- Находит баги и предупреждает о потенциальных проблемах.\n- Проверяет стиль написания (например, использование ; или длину строк).\n- Исправляет часть ошибок автоматически.\n\n\nconst unusedVar = 42; // unusedVar не используется\nconsole.log('Hello')\n\n\n✔️ Prettier — Инструмент для форматирования кода\n\nПроблема: Разный стиль оформления у разработчиков.\nРешение: Приводит код к единому виду (отступы, кавычки, длина строк и др.).\n\n\n// До форматирования:\nfunction test ( ) {console.log( \"Hello!\" )}\n\n// После Prettier:\nfunction test() {\n console.log(\"Hello!\");\n}\n\n\n✔️ Stylelint — Линтер для CSS/SCSS\n\nПроблема: Ошибки и несоответствие стандартам в стилях.\nРешение: Проверяет чистоту и стандарт кода CSS/SCSS.\n\n\nbutton {\n color: red;\n color: blue; /* Ошибка: дублирование свойства */\n}\n\n\n✔️ PostCSS — Обработчик CSS\n\nПроблема: Сложность управления стилями в крупных проектах.\nРешение:\n- Добавляет вендорные префиксы.\n- Минифицирует стили для производительности.\n\n\n/* Исходный код: */\ndisplay: flex;\n\n/* После PostCSS: */\ndisplay: -webkit-box;\ndisplay: -ms-flexbox;\ndisplay: flex;\n\n\n✔️ Husky — Автоматизация проверки перед коммитом\n\nПроблема: Внесение невалидного кода в репозиторий.\nРешение: Запускает проверки (линтеры, тесты) перед коммитом.\n\nПример: Husky не позволит закоммитить файлы, не прошедшие ESLint.\n\n✔️ lint-staged — Проверка только изменённых файлов\n\nПроблема: Долгое время проверки всего проекта.\nРешение: Проверяет только изменённые файлы в коммите, ускоряя процесс.\n\nПример: Если вы изменили только app.js, линтер будет запущен только для этого файла.\n\nЭти инструменты помогают писать код, который легко поддерживать, тестировать и развивать. \n\n#eslint #husky #prettier #postcss","datePublished":"2024-12-18T06:57:48Z","dateModified":"2024-12-18T06:57:48Z","author":{"@type":"Organization","name":"Руслан Куянец | Reactify","url":"https://telemetr.io/fa/channels/1743248084-reactify_it","image":"https://img.telemetr.io/c/1TYusA/5264756429263324728?ty=x"},"publisher":{"@type":"Organization","name":"Руслан Куянец | Reactify","url":"https://telemetr.io/fa/channels/1743248084-reactify_it","image":"https://img.telemetr.io/c/1TYusA/5264756429263324728?ty=x"},"commentCount":1,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2353},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":28},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":41},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1743248084-reactify_it/posts/1353","url":"https://telemetr.io/fa/channels/1743248084-reactify_it/posts/1353","mainEntityOfPage":"https://telemetr.io/fa/channels/1743248084-reactify_it/posts/1353","headline":"📊 Все вокруг айтишники Сегодня утром меня посетила мысль о том, как много людей сейчас переходят в IT — кажет…","articleBody":"📊 Все вокруг айтишники\n\nСегодня утром меня посетила мысль о том, как много людей сейчас переходят в IT — кажется, что вокруг все становятся айтишниками. Однако, взглянув из окна, я увидел огромную пробку — люди едут на работу, и это значит, что айтишников не так много.\n\nМногие из нас могут жить в окружении, где программисты и специалисты IT преобладают. Если вы в поиске работы, информация вокруг вас будет сосредоточена на вакансиях, кандидатах и общем рынке труда, создавая иллюзию, что работа в IT — это повсеместное явление. \n\nЯ сам состою в чатах по трудоустройству и среди других менторов, где разговоры вращаются вокруг IT-профессий. Но это не означает, что в более широком социуме ситуация такая же. Например, у Васи с завода его друзья тоже работают на заводе и ничего не знают о профессиях в IT. \n\nЭто иллюстрирует когнитивное искажение нашего окружения, когда мы думаем, что IT профессии распространены везде. В действительности, это просто наше узкое восприятие мира, основанное на тех людях, которых мы знаем, а не на статистике по всему обществу.\n\nПосмотрим на статистику:\n- Число IT-специалистов в России выросло на 13% в 2023 году и составило 857 000 человек, заявило Минцифры.\n- По данным Statista, к концу 2024 года численность разработчиков в мире достигнет 28,7 миллиона человек.\n- В Соединенных Штатах насчитывается более 4,3 миллиона разработчиков.\n- Германия — ведущая страна среди европейских стран, с 837 398 разработчиками.\n\nЭти 28 миллионов составляют всего около 0.35% от общего числа населения Земли.\n\nМного ли это? Сфера IT продолжает расти, как и количество сервисов и приложений. Есть множество отраслей, в которых программное обеспечение доисторического уровня. У меня есть друзья — строители, агрономы, которые шутят, что их заставляют работать с глючащим ПО, которое только усложняет их работу. Они даже просят меня переписать их рабочие приложения, в шутку, конечно же.\n\n💡 Несмотря на рост IT-специалистов, новички находят работу за 1-2 месяца благодаря подготовке. Как активный участник IT сообществ, я вижу, что возможности для старта в этой сфере стали доступны как никогда раньше.","datePublished":"2024-12-17T10:14:16Z","dateModified":"2024-12-17T10:14:16Z","author":{"@type":"Organization","name":"Руслан Куянец | Reactify","url":"https://telemetr.io/fa/channels/1743248084-reactify_it","image":"https://img.telemetr.io/c/1TYusA/5264756429263324728?ty=x"},"publisher":{"@type":"Organization","name":"Руслан Куянец | Reactify","url":"https://telemetr.io/fa/channels/1743248084-reactify_it","image":"https://img.telemetr.io/c/1TYusA/5264756429263324728?ty=x"},"commentCount":9,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":4090},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":17},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":16},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":9}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1743248084-reactify_it/posts/1352","url":"https://telemetr.io/fa/channels/1743248084-reactify_it/posts/1352","mainEntityOfPage":"https://telemetr.io/fa/channels/1743248084-reactify_it/posts/1352","headline":"💡 Гайд по процессам. Отвечаю на вопросы про опыт, по YeaHub Снял для учеников небольшой гайд по прохождению б…","articleBody":"💡 Гайд по процессам. Отвечаю на вопросы про опыт, по YeaHub\n\nСнял для учеников небольшой гайд по прохождению блока вопросов по процессам. Качество картинки плохое, снимал для учеников, но решил сюда тоже добавить.\n\nВ рамках менторства есть множество гайдов и курсов по легенде, записи митапов, моковые собеседования по софтам и опыту, прожарки и реальные собеседования. Каждому ученику я обязательно провожу моковые собесы, чтобы максимально подготовить его к реальным интервью.\n\nПо сути, после стажировки на проекте в YeaHub вы закрываете все вопросы, связанные с вашим опытом, процессами и проектами. Всё, что я назвал в видео, — это не выдумка. Вы действительно научитесь работать в команде, и вам не придётся ничего придумывать.\n\nВопросы из видео:\n1. Расскажи про команду\n2. По какой методалогии работали?\n3. Расскажи подробнее про процессы\n4. Кто давал задачи?\n5. Как проходило ревью?\n6. Как проходил релиз?\n7. С кем из команды взаимодействовали?","datePublished":"2024-12-15T09:08:50Z","dateModified":"2024-12-15T09:08:50Z","author":{"@type":"Organization","name":"Руслан Куянец | Reactify","url":"https://telemetr.io/fa/channels/1743248084-reactify_it","image":"https://img.telemetr.io/c/1TYusA/5264756429263324728?ty=x"},"publisher":{"@type":"Organization","name":"Руслан Куянец | Reactify","url":"https://telemetr.io/fa/channels/1743248084-reactify_it","image":"https://img.telemetr.io/c/1TYusA/5264756429263324728?ty=x"},"commentCount":7,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1910},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":20},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":18},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":7}],"sharedContent":{"@type":"SocialMediaPosting","datePublished":"2024-12-15T09:05:55Z"}}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1743248084-reactify_it/posts/1351","url":"https://telemetr.io/fa/channels/1743248084-reactify_it/posts/1351","mainEntityOfPage":"https://telemetr.io/fa/channels/1743248084-reactify_it/posts/1351","headline":"🎄 Скоро Новый год, а это значит — время подарков! Антон Назаров и его канал ОМ запустили классный розыгрыш с…","articleBody":"🎄 Скоро Новый год, а это значит — время подарков!\n\nАнтон Назаров и его канал ОМ запустили классный розыгрыш с крутыми призами. Участвовать легко, и шанс выиграть есть у каждого. Нужно всего подписаться на 3 канала.\n\nЕсли хотите попробовать, вот ссылка на участие: Розыгрыш.\n\nУдачи всем! 🚀\n\nМожет тоже запустить розыгрыш небольшой😅 \n\nЧто разыграть?🤔","datePublished":"2024-12-14T13:29:37Z","dateModified":"2024-12-14T13:29:37Z","author":{"@type":"Organization","name":"Руслан Куянец | Reactify","url":"https://telemetr.io/fa/channels/1743248084-reactify_it","image":"https://img.telemetr.io/c/1TYusA/5264756429263324728?ty=x"},"publisher":{"@type":"Organization","name":"Руслан Куянец | Reactify","url":"https://telemetr.io/fa/channels/1743248084-reactify_it","image":"https://img.telemetr.io/c/1TYusA/5264756429263324728?ty=x"},"commentCount":13,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2778},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":14},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":8},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":13}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1743248084-reactify_it/posts/1350","url":"https://telemetr.io/fa/channels/1743248084-reactify_it/posts/1350","mainEntityOfPage":"https://telemetr.io/fa/channels/1743248084-reactify_it/posts/1350","headline":"➕ Челендж до конца недели Этот челлендж поможет прокачать навыки в JavaScript разработчикам любого уровня. За…","articleBody":"➕ Челендж до конца недели\n\nЭтот челлендж поможет прокачать навыки в JavaScript разработчикам любого уровня. Задачи расположены по возрастанию сложности, так что каждый найдет для себя подходящее. Решайте задания и делитесь результатами для обратной связи.\n\n1. Переменные и типы данных\n\nНапишите функцию greet(name), которая принимает имя и возвращает строку:\n\"Привет, [Имя]!\"\n\nconsole.log(greet(\"Иван\")); // Привет, Иван!\n\n\n2. Массивы и циклы\n\nДан массив чисел. Напишите функцию sumArray(arr), которая возвращает сумму всех чисел массива.\n\nconsole.log(sumArray([1, 2, 3, 4])); // 10\n\n\n3. Объекты\n\nСоздайте объект user с полями name, age и методом introduce, который возвращает строку:\n\"Привет, меня зовут [Имя], мне [Возраст] лет!\"\n\nconst user = { name: \"Иван\", age: 30, introduce() { /* код */ } };\nconsole.log(user.introduce()); // Привет, меня зовут Иван, мне 30 лет!\n\n\n4. Функции высшего порядка\n\nНапишите функцию filterArray(arr, callback), которая принимает массив и функцию-условие, возвращает новый массив с элементами, которые прошли условие.\n\nconsole.log(filterArray([1, 2, 3, 4], (num) => num % 2 === 0)); // [2, 4]\n\n\n5. Замыкания\n\nНапишите функцию createCounter(start), которая возвращает объект с методами:\n- increment(): увеличивает значение на 1;\n- decrement(): уменьшает значение на 1;\n- value(): возвращает текущее значение.\n\nconst counter = createCounter(5);\ncounter.increment();\nconsole.log(counter.value()); // 6\ncounter.decrement();\nconsole.log(counter.value()); // 5\n\n\n6. Работа с DOM\n\nСоздайте страницу с кнопкой \"Нажми меня\". Напишите скрипт, который увеличивает счетчик кликов и отображает его на кнопке.\n\n\n\n\n\n7. Асинхронное программирование\n\nНапишите функцию fetchData(url), которая делает запрос на указанный URL и возвращает данные. Используйте fetch.\n\nfetchData(\"https://jsonplaceholder.typicode.com/todos/1\").then(console.log);\n\n\n8. Работа с API\n\nНапишите функцию getPosts(), которая запрашивает список постов с того же API и выводит их на страницу в виде списка.\n\n\n\nЭто простой и поддерживаемый способ ленивой загрузки.\n\nLazy-loading компонентов в React\nВ React можно использовать React.lazy и Suspense:\n\nimport React, { Suspense } from 'react';\n\nconst HeavyComponent = React.lazy(() => import('./HeavyComponent'));\n\nfunction App() {\n return (\n \n Загрузка...
}>\n Главная страница
\n
🖥 5 типичных задач по TypeScript на собеседованиях
Советую изучить дженерики в TypeScript перед просмотром моего нового видео с разбором задач. Дженерики — одна из самых частых тем на собеседованиях, поэтому важно их понимать. В видео "Логика дженериков в TypeScript: Generics, Extends и Conditional Types" я подробно разобрал эту сложную тему, объясняя, как дженерики работают, где и зачем их использовать. Это поможет вам не только в задачах, но и в реальных проектах.
Видео с разбором задач выйдет в понедельник. Не пропустите! 🎥
https://youtu.be/2oJAXXjFhnI?si=uIgzOSihpfGqwYK4
🖥 Практика This
Каким будет вывод этого фрагмента кода?
function f() {
this.x = 5;
console.log(this);
}
var o = new f();
console.log(o.x);
var o = {
f: function() {
return this;
}
}
console.log(o.f())
var o = {
f: function() {
return this;
}
}
var o2 = {f: o.f};
console.log(o.f());
console.log(o2.f())
function f() {
console.log( this );
}
let user = {
g: f.bind(null)
};
user.g();
function sayHi() {
alert( this.name );
}
sayHi.test = 5;
let bound = sayHi.bind({
name: "Вася"
});
alert( bound.test );
🖥 5 главных правил THIS для Frontend собеседований
В этом видео мы разберем 5 главных правил использования this в JavaScript, которые помогут вам не запутаться и успешно пройти собеседование на фронтенд-разработчика!
- Как работает this в стрелочных функциях.
- Почему важно, как вызывается функция, а не где она создается.
- Как this ведет себя в методах объектов.
- Как режим выполнения (strict или нестрогий) влияет на значение this.
- Как управлять this с помощью методов bind, call и apply.
🔗 СХЕМА-ШПАРГАЛКА ИЗ ВИДЕО
Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.
#this #frontend #javascript
Новый год — новые возможности! 🎉
Каждый январь я ставлю себе цели на год. И каждый раз я выполняю их почти полностью — на 90% и больше. Для меня это не просто традиция, а важный ритуал, который помогает идти вперёд.
2024 год был сложным. Были ошибки, трудности, но и много побед. Много хороших дел и помощи другим. В 2025 году предстоит ещё больше работы над собой.
Я желаю каждому из вас расти, достигать новых высот, добиваться своих целей. Найти работу мечты, увеличить доход, и, главное, заботиться о здоровье. Без здоровья ничего другого не будет. Начните ходить в зал, развивайте полезные привычки, избавляйтесь от того, что мешает. Самое сложное — работать над собой, но именно это делает нас сильнее, мудрее и увереннее.
Когда-то я только начинал свой путь в разработке, и мне очень помогли три книги. Они дали мне правильные мысли, мотивацию и веру в себя. Может, они будут полезны и вам:
«Красная таблетка» Андрея Курпатова,
«Хочу и буду» Михаила Лабковского,
«Квантовый воин» Джона Кехо.
Эти книги не волшебная таблетка, которая решит все ваши проблемы, но они точно помогут настроить разум на волну роста и преодоления.
Когда я сталкивался с трудностями, особенно на этапе изучения JavaScript, я вспоминал одну важную мысль из этих книг: «Ты не понимаешь это сейчас только потому, что ещё не сталкивался с этим раньше. Всё придёт с опытом. Главное — не останавливаться».
Всё возможно. Главное — начать. 💡
🎉 Друзья, с Новым годом!
Пусть 2025 год принесет вам развитие, крутые проекты и достойные зарплаты! 🚀
Берегите здоровье, делайте перерывы от компьютера и находите время на себя. 💪
Желаю удачи в новых начинаниях, вдохновения и достижения целей!
Пусть удаленка будет комфортной, а работа приносит удовольствие.
И пусть вокруг будут интересные люди и полезные знакомства!
С новым годом и новым кодом! 🎄✨
🖥 Задания для закрепления Дженериков в TypeScript.
Посмотрите видео -> Выполните задания самостоятельно.
Задание 1
Создайте функцию
createArray с использованием дженериков. Функция должна принимать два аргумента:
- Тип элемента T,
- Количество элементов length — число, указывающее количество элементов в массиве.
Функция должна возвращать массив из указанного числа элементов типа T. Все элементы массива должны быть равными null.
Напишите тесты для функции:
- Проверьте, что она корректно создаёт массивы для различных типов (`number`, string, `boolean`).
- Проверьте, что длина массива соответствует указанному числу length.
function createArray(length: any): any {
// Реализуйте функцию
}
// Пример теста
const numberArray = createArray(3); // Ожидается: [null, null, null]
const stringArray = createArray(2); // Ожидается: [null, null]
Box<T> для упаковки значений. Функция должна принимать значение типа T и возвращать объект с этим значением в свойстве value.
Напишите функцию getBoxValue(box) для извлечения значения из упакованного объекта. Функция должна:
- Возвращать значение из объекта,
- Выбрасывать ошибку, если тип T не соответствует ожидаемому.
Например, если тип в коробке — это строка, функция должна извлечь строку, но выбросить ошибку, если тип окажется другим.
type Box = {
// Реализуйте дженерик
};
function getBoxValue(box: any): any {
// Реализуйте функцию
}
// Пример теста
const stringBox = { value: 'Hello' };
const extractedValue = getBoxValue(stringBox); // Ожидается: 'Hello'
mergeArrays<T>(arr1, arr2), которая сливает два массива в один.
Функция должна принимать два массива типа T[] и возвращать новый массив, который содержит все элементы из обоих массивов.
Напишите тесты для функции:
- Проверьте, что она корректно сливает массивы для различных типов (`number`, `string`).
- Проверьте, что она сохраняет правильный тип массива.
function mergeArrays(arr1: any, arr2: any): any {
// Реализуйте функцию
}
// Пример теста
const mergedNumbers = mergeArrays([1, 2], [3, 4]); // Ожидается: [1, 2, 3, 4]
const mergedStrings = mergeArrays(['a', 'b'], ['c', 'd']); // Ожидается: ['a', 'b', 'c', 'd']
🖥 Логика Дженериков в TypeScript: Generics, Extends и Conditional Types
В этом видео рассмотрена одна из ключевых тем в TypeScript — Дженерики (Generics). Вы узнаете, как использовать дженерики для создания универсального и переиспользуемого кода.
Мы подробно разберем:
- Примеры работы с дженериками на функциях, классах, интерфейсах, типах, компонентах и хуках.
- Условные типы (conditional types) и ограничения через extends.
- Логику использования дженериков, чтобы вы могли применять их эффективно и уверенно.
Дженерики — это основа современного программирования в TypeScript, позволяющая писать чистый, безопасный и гибкий код. Умение работать с дженериками помогает создавать сложные и масштабируемые проекты.
После просмотра этого видео вы сможете:
- Разрабатывать универсальные функции и компоненты.
- Переиспользовать код без потери строгой типизации.
- Понимать сложные структуры и писать более читаемый и надежный код.
Этот курс подходит для всех, кто хочет углубить свои знания в TypeScript и научиться писать действительно крутой код.
Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.
#typescript #frontend #generics #дженерики
Компания: Промсвязьбанк
Позиция: Мидл+
Вилка: 250к-300к
Задачи:
1. На вход дается массив чисел и число-сумма. Нужно вернуть true/false в зависимости от того, есть ли в массиве два числа, которые в сумме дают это число. Нужно решить со сложностью O(n)
2. На вход дается массив кортежей. В каждом кортеже два числа: время подключения пользователя к трансляции и время, когда он отключился. Нужно найти максимальное количество единовременных пользователей.
3. В каком порядке выведутся консоль логи. Измениться ли порядок, если мы вызовем клик по кнопке с помощью button.click()
const container = document.querySelector('#grayContainerOne')
const button = document.querySelector('#buttonOne')
button.addEventListener('click', () => {
Promise.resolve()
.then(() => console.log('STEP 1'))
console.log('STEP 2')
})
container.addEventListener('click', () => {
console.log('STEP 3')
})
Понимание и предотвращение атак — ключ к созданию безопасных веб-приложений. Используйте лучшие практики и будьте в курсе новых угроз. Ведь безопасность пользователей и данных — это основа доверия к вашему продукту.
#security #web
🛡 Разновидности атак на веб-приложения: XSS, CSRF, Man-in-the-Middle и другие
Веб-приложения ежедневно подвергаются множеству угроз, которые могут повлиять на безопасность данных, пользователей и компаний. В этом посте мы разберем основные виды атак, их последствия и способы защиты.
1. XSS (Cross-Site Scripting)
Атака XSS позволяет злоумышленнику внедрить вредоносный скрипт в веб-страницу, который затем выполняется на стороне пользователя. Это может привести к краже данных, подмене контента или захвату сессии.
Представьте форму комментариев на сайте. Если введённый текст отображается без проверки, злоумышленник может вставить скрипт:
<script>alert('Ваши данные украдены!');</script>
Как защититься: - Используйте экранирование данных (escaping) перед их выводом. - Включите Content Security Policy (CSP). - Проверяйте и очищайте вводимые данные (включая HTML). - Ограничивайте использование опасных функций, таких как innerHTML.2. CSRF (Cross-Site Request Forgery) CSRF-атака заставляет пользователя выполнить нежелательное действие на сайте, на котором он авторизован. Это может быть перевод денег или изменение настроек. Если пользователь авторизован на банковском сайте, злоумышленник может подставить ссылку:
<img src="https://bank.com/transfer?amount=1000&to=attacker" />Когда пользователь откроет эту ссылку, запрос выполнится от его имени. В 2008 году через CSRF злоумышленники массово взламывали аккаунты в социальных сетях, отправляя вредоносные сообщения друзьям пользователей.
Как защититься: - Используйте CSRF-токены в формах и запросах. - Применяйте заголовок SameSite для cookies. - Проверяйте источник запросов, например, с помощью заголовка Referer.3. Man-in-the-Middle (MitM) MitM-атака позволяет злоумышленнику перехватывать и модифицировать данные, передаваемые между пользователем и сервером. Если пользователь подключён к общественному Wi-Fi без шифрования, злоумышленник может перехватить данные формы входа на сайт. В 2015 году хакеры атаковали публичные Wi-Fi сети в аэропортах, перехватывая логины и пароли пользователей.
Как защититься: - Всегда используйте HTTPS. - Применяйте HSTS (HTTP Strict Transport Security). - Проверяйте сертификаты серверов. - Избегайте использования открытых Wi-Fi сетей без VPN.4. SQL Injection SQL-инъекция позволяет злоумышленнику вмешиваться в базу данных приложения, выполняя произвольные SQL-запросы. На сайте с формой авторизации вводится:
' OR '1'='1Это может обойти проверку логина и пароля. В 2017 году через SQL-инъекцию была взломана база данных компании Equifax, что привело к утечке данных 143 миллионов человек.
Как защититься: - Используйте подготовленные запросы (prepared statements). - Проверяйте входные данные. - Избегайте прямого динамического формирования SQL-запросов.5. DDoS (Distributed Denial of Service) DDoS-атака перегружает сервер, делая его недоступным для пользователей. Злоумышленники отправляют тысячи запросов на сайт одновременно, заставляя сервер тратить все ресурсы на обработку этих запросов. В 2016 году произошла крупнейшая DDoS-атака на провайдера Dyn, что вызвало сбои в работе сайтов Amazon, Twitter и Reddit.
Как защититься: - Используйте CDN с защитой от DDoS (например, Cloudflare). - Настройте ограничения на количество запросов (rate limiting). - Мониторьте и фильтруйте подозрительный трафик.Понимание и предотвращение атак — ключ к созданию безопасных веб-приложений. Используйте лучшие практики и будьте в курсе новых угроз. Ведь безопасность пользователей и данных — это основа доверия к вашему продукту. #security #web
🎮 Изменение свойств DOM и их влияние на Repainting и Layouting
Когда изменяется DOM, браузер перерасчитывает его внешний вид и положение на экране. Этот процесс делится на два этапа:
- Layout (или reflow) – перерасчёт геометрии элементов (размеры, положение, отступы и т.д.).
- Repainting – перерисовка внешнего вида элементов (цвет, тень, шрифт и т.д.) без изменения их размеров или положения.
➕ 1. Layout (Reflow)
Что вызывает Layout? Изменения, влияющие на размеры, положение или геометрию элементов. После Layout, браузеру необходимо заново отрисовать элемент (Repainting).
Примеры действий:
// Изменение размеров элемента:
element.style.width = "200px";
element.style.height = "100px";
// Изменение положения (например, top, left, margin, padding):
element.style.margin = "20px";
element.style.top = "50px";
// Добавление или удаление DOM-элементов:
const newDiv = document.createElement("div");
document.body.appendChild(newDiv);
// Изменение шрифта, которое изменяет размеры текста:
element.style.fontSize = "24px";
// Изменение значения display или position:
element.style.display = "block";
element.style.position = "absolute";
// Изменение цвета фона:
element.style.backgroundColor = "blue";
// Изменение цвета текста:
element.style.color = "red";
// Изменение тени:
element.style.boxShadow = "5px 5px 10px gray";
// Прозрачность:
element.style.opacity = "0.5";
// Пример (неоптимально):
const width = element.offsetWidth;
const height = element.offsetHeight;
// Пример (оптимально):
const { offsetWidth, offsetHeight } = element;
element.style.color = "white";
element.style.backgroundColor = "black";
// Применяйте класс:
element.classList.add("dark-theme");
element.style.transform = "translateX(100px)";
element.style.opacity = "0.5";
requestAnimationFrame(() => {
element.style.width = "300px";
element.style.height = "150px";
});
🔼 Почему важно использовать lazy-loading
Lazy-loading (ленивая загрузка) — это способ загружать ресурсы (изображения, компоненты) только тогда, когда они нужны. Это улучшает скорость загрузки страницы, снижает нагрузку на сервер и экономит трафик.
⚠️ Проблема
При загрузке страницы браузер загружает все ресурсы сразу, даже те, которые пользователь не видит. Это увеличивает время загрузки и может ухудшить пользовательский опыт.
✔️ Решение
Lazy-loading изображений
Современный HTML позволяет указать атрибут loading="lazy":
<img src="example.jpg" alt="Описание" loading="lazy" />Это простой и поддерживаемый способ ленивой загрузки. Lazy-loading компонентов в React В React можно использовать React.lazy и Suspense:
import React, { Suspense } from 'react';
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));
function App() {
return (
<div>
<h1>Главная страница</h1>
<Suspense fallback={<div>Загрузка...</div>}>
<HeavyComponent />
</Suspense>
</div>
);
}
📎 Основные инструменты для анализа и форматирования кода
Поддержка кода так же важна, как его написание. Если код плохо организован, это может привести к:
- Ошибкам, которые сложно обнаружить.
- Сложностям в его понимании и доработке.
- Несоответствию стилей написания.
Вот ключевые инструменты, которые помогут избежать этих проблем:
✔️ ESLint — Линтер для JavaScript/TypeScript
Проблема: Ошибки и несоответствие стандартам кода.
Решение:
- Находит баги и предупреждает о потенциальных проблемах.
- Проверяет стиль написания (например, использование ; или длину строк).
- Исправляет часть ошибок автоматически.
const unusedVar = 42; // unusedVar не используется
console.log('Hello')
// До форматирования:
function test ( ) {console.log( "Hello!" )}
// После Prettier:
function test() {
console.log("Hello!");
}
button {
color: red;
color: blue; /* Ошибка: дублирование свойства */
}
/* Исходный код: */
display: flex;
/* После PostCSS: */
display: -webkit-box;
display: -ms-flexbox;
display: flex;
📊 Все вокруг айтишники
Сегодня утром меня посетила мысль о том, как много людей сейчас переходят в IT — кажется, что вокруг все становятся айтишниками. Однако, взглянув из окна, я увидел огромную пробку — люди едут на работу, и это значит, что айтишников не так много.
Многие из нас могут жить в окружении, где программисты и специалисты IT преобладают. Если вы в поиске работы, информация вокруг вас будет сосредоточена на вакансиях, кандидатах и общем рынке труда, создавая иллюзию, что работа в IT — это повсеместное явление.
Я сам состою в чатах по трудоустройству и среди других менторов, где разговоры вращаются вокруг IT-профессий. Но это не означает, что в более широком социуме ситуация такая же. Например, у Васи с завода его друзья тоже работают на заводе и ничего не знают о профессиях в IT.
Это иллюстрирует когнитивное искажение нашего окружения, когда мы думаем, что IT профессии распространены везде. В действительности, это просто наше узкое восприятие мира, основанное на тех людях, которых мы знаем, а не на статистике по всему обществу.Посмотрим на статистику: - Число IT-специалистов в России выросло на 13% в 2023 году и составило 857 000 человек, заявило Минцифры. - По данным Statista, к концу 2024 года численность разработчиков в мире достигнет 28,7 миллиона человек. - В Соединенных Штатах насчитывается более 4,3 миллиона разработчиков. - Германия — ведущая страна среди европейских стран, с 837 398 разработчиками. Эти 28 миллионов составляют всего около 0.35% от общего числа населения Земли. Много ли это? Сфера IT продолжает расти, как и количество сервисов и приложений. Есть множество отраслей, в которых программное обеспечение доисторического уровня. У меня есть друзья — строители, агрономы, которые шутят, что их заставляют работать с глючащим ПО, которое только усложняет их работу. Они даже просят меня переписать их рабочие приложения, в шутку, конечно же. 💡 Несмотря на рост IT-специалистов, новички находят работу за 1-2 месяца благодаря подготовке. Как активный участник IT сообществ, я вижу, что возможности для старта в этой сфере стали доступны как никогда раньше.
Repost from Менторство: ИТ-Адаптация
💡 Гайд по процессам. Отвечаю на вопросы про опыт, по YeaHub
Снял для учеников небольшой гайд по прохождению блока вопросов по процессам. Качество картинки плохое, снимал для учеников, но решил сюда тоже добавить.
В рамках менторства есть множество гайдов и курсов по легенде, записи митапов, моковые собеседования по софтам и опыту, прожарки и реальные собеседования. Каждому ученику я обязательно провожу моковые собесы, чтобы максимально подготовить его к реальным интервью.
По сути, после стажировки на проекте в YeaHub вы закрываете все вопросы, связанные с вашим опытом, процессами и проектами. Всё, что я назвал в видео, — это не выдумка. Вы действительно научитесь работать в команде, и вам не придётся ничего придумывать.
Вопросы из видео:
1. Расскажи про команду
2. По какой методалогии работали?
3. Расскажи подробнее про процессы
4. Кто давал задачи?
5. Как проходило ревью?
6. Как проходил релиз?
7. С кем из команды взаимодействовали?
🎄 Скоро Новый год, а это значит — время подарков!
Антон Назаров и его канал ОМ запустили классный розыгрыш с крутыми призами. Участвовать легко, и шанс выиграть есть у каждого. Нужно всего подписаться на 3 канала.
Если хотите попробовать, вот ссылка на участие: Розыгрыш.
Удачи всем! 🚀
Может тоже запустить розыгрыш небольшой😅
Что разыграть?🤔
➕ Челендж до конца недели
Этот челлендж поможет прокачать навыки в JavaScript разработчикам любого уровня. Задачи расположены по возрастанию сложности, так что каждый найдет для себя подходящее. Решайте задания и делитесь результатами для обратной связи.
1. Переменные и типы данных
Напишите функцию greet(name), которая принимает имя и возвращает строку:
"Привет, [Имя]!"
console.log(greet("Иван")); // Привет, Иван!
console.log(sumArray([1, 2, 3, 4])); // 10
const user = { name: "Иван", age: 30, introduce() { /* код */ } };
console.log(user.introduce()); // Привет, меня зовут Иван, мне 30 лет!
console.log(filterArray([1, 2, 3, 4], (num) => num % 2 === 0)); // [2, 4]
const counter = createCounter(5);
counter.increment();
console.log(counter.value()); // 6
counter.decrement();
console.log(counter.value()); // 5
<button id="counter">Нажми меня</button>
<script>
// код
</script>
fetchData("https://jsonplaceholder.typicode.com/todos/1").then(console.log);
<ul id="posts"></ul>
<script>
// код
</script>
fetchData<Post[]>("https://jsonplaceholder.typicode.com/posts").then(console.log);
fetchData<User[]>("https://jsonplaceholder.typicode.com/users").then(console.log);💡 Как понять программирование, если вы не технарь?
Недавно я выступал с докладом в ОМ на важную тему: как гуманитариям и людям без технического образования освоить программирование. В этом посте я собрал основные советы из своего доклада, которые помогут вам преодолеть барьеры и достичь цели.
➕ Развивайте навык обучения
Умение учиться — ключ к освоению программирования. Экспериментируйте с подходами, чтобы найти свой эффективный стиль:
- Читайте материал вслух, затем кратко перескажите своими словами.
- Ведите конспекты, создавайте шпаргалки для быстрого повторения.
- Изучайте темы через разные форматы: видео, книги, интерактивные задания. Это поможет понять материал с разных сторон.
Составляйте план обучения, разбивайте его на этапы и фиксируйте прогресс. Регулярный анализ проделанной работы поддерживает мотивацию и помогает заметить улучшения.
➕ Определитесь с мотивацией и целями
Перед началом обучения важно принять твёрдое решение двигаться вперёд. Постоянные сомнения и мысли вроде "вдруг я трачу время впустую?" могут сбить с пути. Для этого:
- Выпишите причины, почему хотите стать разработчиком.
- Определите плюсы и перспективы профессии.
- Поставьте цели с конкретными дедлайнами.
Уверенность в себе и чёткий план помогут не отвлекаться и эффективно использовать время.
➕ Регулярность — залог успеха
Изучение программирования требует постоянства. Большие перерывы приводят к откатам: забываются концепции, снижается мотивация. Найдите комфортный ритм, чтобы занятия стали привычкой.
Если чувствуете, что подходите к сложной теме, не откладывайте. Работайте над ней, пока материал свеж в голове. Это поможет быстрее преодолеть барьер и закрепить знания.
➕ Повторяйте, чтобы закрепить
Программирование — это навык, который требует постоянного повторения. Возвращайтесь к изученным темам, рассматривайте их под разными углами. Например, попробуйте объяснить концепцию другому человеку или перескажите её своими словами.
Регулярное повторение укрепляет память и делает сложные вещи более понятными.
➕ Практикуйтесь как можно больше
Код — это не теория, а практика. Чем больше пишете, тем быстрее поймёте логику и начнёте мыслить алгоритмически. Начинайте с простых задач, чтобы набить руку, а затем переходите к сложным проектам.
Практика помогает развить абстрактное мышление, умение по шагам решать задачи и преобразовывать код в конечный результат.
➕ Погружайтесь в среду
Для эффективного обучения окружите себя программированием:
- Общайтесь с единомышленниками, участвуйте в чатах и встречах.
- Погружайтесь в профессиональную среду через участие в опенсорс-проектах или взаимодействие с более опытными разработчиками.
- Читайте статьи, смотрите доклады, изучайте новые инструменты.
Чем больше вы взаимодействуете с профессиональным сообществом, тем быстрее адаптируетесь и станете частью индустрии.
➕ Не забывайте об отдыхе
Перерывы и смена активности важны для усвоения информации. Часто решение приходит не во время напряжённых размышлений, а после отдыха. Дайте себе время, чтобы «созреть».
Иногда спустя неделю или даже месяц изучение знакомой темы может стать легче. Новые нейронные связи сформируются, а информация ляжет на уже усвоенные знания.
🌐 Экосистема YeaHub
Сейчас мы активно развиваем экосистему YeaHub. Уже создали тематические Telegram-каналы, которые в будущем заменим полноценными сервисами на платформе. Планируем запустить агрегатор IT-мероприятий, сервис поиска работы и множество других решений.
Уже сейчас начинаем продвигать каналы и привлекать работодателей, чтобы в будущем они размещали вакансии на нашей платформе.
🖥 YeaHub: Главные новости IT, обсуждения с экспертами и аналитика рынка.
👩💻 YeaHub Tech: Полезные гайды, статьи и материалы для развития ваших навыков.
🗓 YeaHub Events: Анонсы митапов, конференций, соревнований и вебинаров.
💵 YeaHub Job: Свежие вакансии, стажировки и лучшие карьерные советы.
🖥 YeaHub Frontend: Теория, задачи, тесты и вопросы для подготовки к собеседованиям.
Вы можете поддержать развитие YeaHub, подписавшись на наши каналы и делясь обратной связью. Это поможет нам сделать платформу ещё лучше!#yeahub
