\n \n \n\n\n

Привет, это AMP!

\n \n\n\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-02-08T09:10:13Z","dateModified":"2025-02-08T09:10:13Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":4204},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":18},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":34}]}},{"@type":"ListItem","position":5,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/1097","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/1097","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/1097","headline":"🤔 Когда брать абсолютные величины, а когда относительные? 1. Абсолютные величины: - Когда нужны конкретные зн…","articleBody":"🤔 Когда брать абсолютные величины, а когда относительные?\n\n1. Абсолютные величины:\n- Когда нужны конкретные значения, например, доход компании в долларах.\n2. Относительные величины:\n- Для сравнения и анализа изменений, например, рост дохода в процентах.\nАбсолютные подходят для понимания масштаба, а относительные — для динамики.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2025-02-07T16:10:15Z","dateModified":"2025-02-07T16:10:15Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":3723},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":61},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":7}]}},{"@type":"ListItem","position":6,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/1096","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/1096","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/1096","headline":"🤔 Что такое meta теги? Meta-теги – это специальные HTML-теги, которые содержат метаинформацию о веб-странице.…","articleBody":"🤔 Что такое meta теги?\n\nMeta-теги – это специальные HTML-теги, которые содержат метаинформацию о веб-странице. Они располагаются внутри и не отображаются на самой странице, но помогают браузерам, поисковым системам и социальным сетям правильно обрабатывать и отображать страницу. \n\n🚩Зачем нужны meta-теги? \n\nУлучшают SEO (поисковую оптимизацию) \nУправляют отображением в соцсетях и поисковиках \nНастраивают адаптивность страницы (например, на мобильных устройствах) \nОпределяют кодировку, язык и авторство страницы \n\n🚩Основные meta-теги с примерами \n\nКодировка страницы \n\n\nОписание страницы (SEO) \n\n\nКлючевые слова (SEO, устарело) \n\n\nАвтор страницы \n\n\nЗапрет индексации страницы \n\n\nАдаптивность на мобильных устройствах \n\n\nСоциальные сети (Open Graph, Twitter Cards) \nFacebook и другие соцсети (Open Graph) \n\n\n\n\n\nTwitter-карточки \n\n\n\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-02-07T09:10:07Z","dateModified":"2025-02-07T09:10:07Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":4072},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":17},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":38}]}},{"@type":"ListItem","position":7,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/1095","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/1095","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/1095","headline":"Поговорим о любви к фронтенду? 15 февраля встречаемся на самой большой конференции Яндекса для frontend-сообщ…","articleBody":"Поговорим о любви к фронтенду?\n\n15 февраля встречаемся на самой большой конференции Яндекса для frontend-сообщества — «Я 💛Фронтенд». \n\nВ программе:\n\n💛 Большая программа докладов — эксперты индустрии поделятся своим опытом \n\n💛 Code in the dark — вместе с Семёном Левенсоном из Яндекс Маркета поучаствуете в соревновании по вёрстке и поймете, как интеллектуальный помощник разработчика Yandex Code Assistant меняет игру\n\n💛 CodeRun — вместе с Никитой Дубко и Сашей Шинкевич из Контеста Яндекса познакомитесь с тренажером для прокачки скилла разработчика\n\nА ещё не забываем про движ в онлайне — следите за обновлениями сайта. Уже завтра на состоится традиционный Capture the flag — ежегодный турнир для разработчиков.\n\nСмотрим онлайн и регистрируемся на ивент тут.","datePublished":"2025-02-07T07:00:16Z","dateModified":"2025-02-09T07:01:19Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2464},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":12},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":12}]}},{"@type":"ListItem","position":8,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/1094","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/1094","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/1094","headline":"🤔 Что такое merge и rebase, в чем отличие друг от друга? 1. Merge: - Объединяет ветки, создавая новый коммит.…","articleBody":"🤔 Что такое merge и rebase, в чем отличие друг от друга?\n\n1. Merge:\n- Объединяет ветки, создавая новый коммит.\n- Сохраняет историю изменений обеих веток.\n2. Rebase:\n- Переносит коммиты одной ветки поверх другой.\n- История становится линейной, но теряются промежуточные изменения.\nРазница: merge сохраняет все ветвления, а rebase упрощает историю.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2025-02-06T16:10:06Z","dateModified":"2025-02-06T16:10:06Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":3762},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":27},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":36}]}},{"@type":"ListItem","position":9,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/1093","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/1093","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/1093","headline":"🤔 Какие есть альтернативы у redux? Redux – мощный инструмент, но не всегда он необходим. Существует множество…","articleBody":"🤔 Какие есть альтернативы у redux?\n\nRedux – мощный инструмент, но не всегда он необходим. Существует множество альтернатив, каждая из которых подходит для разных сценариев. \n\n🚩React Context API + useReducer\n\nПодходит для небольших и средних приложений \nВстроено в React (не требует установки дополнительных библиотек) \nuseContext` позволяет передавать данные по дереву компонентов без \"прокидывания\" через props \nuseReducer работает как Redux, но проще \nconst AuthContext = createContext();\n\nfunction authReducer(state, action) {\n switch (action.type) {\n case \"LOGIN\":\n return { ...state, isAuthenticated: true, user: action.payload };\n case \"LOGOUT\":\n return { ...state, isAuthenticated: false, user: null };\n default:\n return state;\n }\n}\n\nfunction AuthProvider({ children }) {\n const [state, dispatch] = useReducer(authReducer, {\n isAuthenticated: false,\n user: null,\n });\n\n return (\n \n {children}\n \n );\n}\n\nfunction LoginButton() {\n const { dispatch } = useContext(AuthContext);\n return (\n dispatch({ type: \"LOGIN\", payload: \"Иван\" })}>\n Войти\n \n );\n}\n\n🚩Zustand\n\nПроще Redux, но с теми же возможностями \nНет лишних actions и reducers, только функции \nimport { create } from \"zustand\";\n\nconst useStore = create((set) => ({\n count: 0,\n increment: () => set((state) => ({ count: state.count + 1 })),\n}));\n\nfunction Counter() {\n const { count, increment } = useStore();\n return Счетчик: {count};\n}\n\n🚩Recoil\n\nИдеален для React-приложений \nГибче, чем Redux, с концепцией \"атомов\" (раздельные состояния) \nimport { atom, useRecoilState } from \"recoil\";\n\nconst countState = atom({\n key: \"count\",\n default: 0,\n});\n\nfunction Counter() {\n const [count, setCount] = useRecoilState(countState);\n return setCount(count + 1)}>Счетчик: {count};\n}\n\n🚩Jotai \n\nНапоминает Recoil, но без сложных концепций \nПоддерживает React Suspense и асинхронные состояния \nimport { atom, useAtom } from \"jotai\";\n\nconst countAtom = atom(0);\n\nfunction Counter() {\n const [count, setCount] = useAtom(countAtom);\n return setCount(count + 1)}>Счетчик: {count};\n}\n\n🚩MobX \n\nАвтоматически отслеживает изменения состояния \nУдобен для сложных приложений \nimport { makeAutoObservable } from \"mobx\";\nimport { observer } from \"mobx-react-lite\";\n\nclass CounterStore {\n count = 0;\n\n constructor() {\n makeAutoObservable(this);\n }\n\n increment() {\n this.count++;\n }\n}\n\nconst store = new CounterStore();\n\nconst Counter = observer(() => (\n store.increment()}>Счетчик: {store.count}\n));\n\n🚩XState\n\nПодходит для сложных логик (например, UI-анимаций, состояний формы) \nУдобно описывать последовательности действий \nimport { createMachine, interpret } from \"xstate\";\n\nconst toggleMachine = createMachine({\n id: \"toggle\",\n initial: \"inactive\",\n states: {\n inactive: { on: { TOGGLE: \"active\" } },\n active: { on: { TOGGLE: \"inactive\" } },\n },\n});\n\nconst service = interpret(toggleMachine).start();\nservice.send(\"TOGGLE\"); // Меняет состояние\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-02-06T09:10:09Z","dateModified":"2025-02-06T09:10:09Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":3818},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":26},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":47}]}},{"@type":"ListItem","position":10,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/1092","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/1092","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/1092","headline":"🤔 Что такое hoisting? Это механизм JavaScript, при котором объявления переменных и функций поднимаются в нача…","articleBody":"🤔 Что такое hoisting?\n\nЭто механизм JavaScript, при котором объявления переменных и функций поднимаются в начало своей области видимости. Например:\n- Переменные, объявленные с var, поднимаются, но их значение остается undefined.\n- let и const поднимаются, но не инициализируются.\n- Функции полностью доступны до их объявления.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2025-02-05T16:10:09Z","dateModified":"2025-02-05T16:10:09Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":10,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":3890},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":21},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":23},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":10}]}},{"@type":"ListItem","position":11,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/1091","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/1091","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/1091","headline":"wipe right or swipe left Что делать, если твои мэтчи в жизни не такие точные, как твой код? Спокойно, 14 февр…","articleBody":"wipe right or swipe left\n\nЧто делать, если твои мэтчи в жизни не такие точные, как твой код? \n\nСпокойно, 14 февраля в 19:00 по МСК мы разберём, как ML анализирует speed dating и предсказывает match.\n\n📌 Мы возьмем реальные данные со speed dating.\n\n📌 Обучим модель, которая скажет: match или swipe left.\n\n📌 Разберём, какие признаки реально важны (спойлер: работа в IT — не прям гарантия успеха (наши маркетологи подтверждают 😥).\n\n💡 Приходи, если хочешь прокачать свой Python, ML и, возможно, станешь идеальной парой, как самый стильные форсы. \n\n👉 Записаться","datePublished":"2025-02-05T14:05:08Z","dateModified":"2025-02-05T14:05:08Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":7,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":4048},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":7}]}},{"@type":"ListItem","position":12,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/1090","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/1090","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/1090","headline":"🤔 Как определить что состояние является глобальным? Глобальное состояние – это данные, которые должны быть до…","articleBody":"🤔 Как определить что состояние является глобальным?\n\nГлобальное состояние – это данные, которые должны быть доступны в разных частях приложения. Чтобы определить, является ли состояние глобальным, нужно задать себе несколько вопросов: \n\n🚩Используется ли это состояние в нескольких независимых компонентах? \n\nЕсли одно и то же состояние необходимо сразу нескольким компонентам, расположенным в разных частях дерева компонентов, скорее всего, его стоит сделать глобальным. В React, если в разных компонентах нужна информация о текущем пользователе (user), лучше хранить её в глобальном состоянии (например, в Context или Redux). \n// Глобальное состояние (например, Context API)\nconst UserContext = createContext();\n\nfunction App() {\n const [user, setUser] = useState({ name: \"Иван\", isLoggedIn: true });\n\n return (\n \n \n \n \n );\n}\n\nfunction Navbar() {\n const user = useContext(UserContext);\n return ;\n}\n\nfunction Profile() {\n const user = useContext(UserContext);\n return ;\n}\n\n🚩Должно ли состояние сохраняться при переходе между страницами? \n\nЕсли данные должны оставаться неизменными при смене страниц, лучше использовать глобальное хранилище (например, Redux, Zustand или React Context). Корзина товаров в интернет-магазине \nАвторизация пользователя \nТемная/светлая тема приложения \nЕсли данные теряются при смене страницы – это сигнал, что их нужно вынести в глобальное хранилище. \n\n🚩Может ли состояние изменяться в одном месте, а использоваться в другом? \n\nЕсли одно состояние обновляется в одном компоненте, но влияет на работу нескольких других компонентов, оно должно быть глобальным. В чате, если новое сообщение приходит в одном компоненте (ChatInput), а отображается в другом (ChatList), логично хранить все сообщения в глобальном состоянии. \nconst ChatContext = createContext();\n\nfunction ChatProvider({ children }) {\n const [messages, setMessages] = useState([]);\n\n const sendMessage = (text) => {\n setMessages([...messages, { text, id: Date.now() }]);\n };\n\n return (\n \n {children}\n \n );\n}\n\nfunction ChatList() {\n const { messages } = useContext(ChatContext);\n return messages.map((msg) =>

{msg.text}

);\n}\n\nfunction ChatInput() {\n const { sendMessage } = useContext(ChatContext);\n const [text, setText] = useState(\"\");\n\n return (\n setText(e.target.value)}\n onKeyPress={(e) => {\n if (e.key === \"Enter\") {\n sendMessage(text);\n setText(\"\");\n }\n }}\n />\n );\n}\n\n🚩Зависит ли состояние от URL (адресной строки)? \n\nИногда состояние можно не делать глобальным, а просто хранить его в URL (в query-параметрах или path). \nID открытого товара: /products/123 \nФильтры товаров: /shop?category=shoes&sort=price \nСтраница чата с пользователем: /chat?user=ivan \n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-02-05T09:10:11Z","dateModified":"2025-02-05T09:10:11Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":8,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":3526},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":10},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":18},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":8}]}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/1089","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/1089","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/1089","headline":"🤔 Какие есть способы общения между компонентами? 1. Родительский компонент — дочерний компонент: - Передача ч…","articleBody":"🤔 Какие есть способы общения между компонентами?\n\n1. Родительский компонент — дочерний компонент:\n- Передача через props или события.\n2. Общий контекст или хранилище:\n- Использование глобального состояния (Redux, Zustand, Context API).\n3. Взаимодействие через сервисы:\n- Например, через API или WebSocket.\n4. Pub-Sub модель:\n- С помощью событий или библиотек типа EventEmitter.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2025-02-04T16:10:11Z","dateModified":"2025-02-04T16:10:11Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":7,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":3632},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":23},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":13},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":7}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/1088","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/1088","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/1088","headline":"🤔 Что выбираешь ооп или функции? Выбор между объектно-ориентированным программированием (ООП) и функциональны…","articleBody":"🤔 Что выбираешь ооп или функции?\n\nВыбор между объектно-ориентированным программированием (ООП) и функциональным программированием (ФП) зависит от задачи, которую нужно решить. Оба подхода имеют свои плюсы и минусы. \n\n🚩Когда использовать ООП? \n\nОбъектно-ориентированное программирование подходит, когда: \nНужно моделировать реальные объекты и их поведение \nПриложение состоит из множества взаимодействующих сущностей \nВажно инкапсулировать данные и защитить их от прямого изменения \nТребуется повторное использование кода через наследование и полиморфизм \nclass Animal {\n constructor(name) {\n this.name = name;\n }\n\n speak() {\n console.log(`${this.name} издает звук`);\n }\n}\n\nclass Dog extends Animal {\n speak() {\n console.log(`${this.name} лает`);\n }\n}\n\nconst dog = new Dog(\"Бобик\");\ndog.speak(); // \"Бобик лает\"\n\n🚩Когда использовать функциональное программирование? \n\nФункциональный подход хорош, если\nКод должен быть чистым и предсказуемым \nНужно избегать изменений состояния (иммутабельность) \nТребуется много работы с массивами, коллекциями данных \nНужно легко писать асинхронный код \nconst double = num => num * 2;\n\nconst numbers = [1, 2, 3, 4];\nconst doubledNumbers = numbers.map(double);\n\nconsole.log(doubledNumbers); // [2, 4, 6, 8]\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-02-04T09:10:11Z","dateModified":"2025-02-04T09:10:11Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":5,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":4066},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":19},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":24},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":5}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/1087","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/1087","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/1087","headline":"🤔 В чем разница между GET и POST? 1. GET: - Используется для получения данных с сервера. - Данные передаются…","articleBody":"🤔 В чем разница между GET и POST?\n\n1. GET:\n- Используется для получения данных с сервера.\n- Данные передаются в URL (в строке запроса), ограничены по длине.\n- Менее безопасен, так как параметры видны в URL.\n2. POST:\n- Используется для отправки данных на сервер.\n- Данные передаются в теле запроса, не отображаются в URL.\n- Подходит для передачи больших объемов информации и конфиденциальных данных.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2025-02-03T16:10:11Z","dateModified":"2025-02-03T16:10:11Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":9,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":3998},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":41},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":26},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":9}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/1086","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/1086","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/1086","headline":"🤔 Что такое массив? Это структура данных, которая представляет собой упорядоченный список элементов. В JavaSc…","articleBody":"🤔 Что такое массив?\n\nЭто структура данных, которая представляет собой упорядоченный список элементов. В JavaScript массивы могут содержать любые типы данных: числа, строки, объекты, другие массивы и даже функции. \n\n🚩Почему массивы нужны?\n \nМассивы помогают удобно хранить и обрабатывать наборы данных. Вместо того чтобы создавать множество переменных, можно использовать массив, чтобы хранить сразу несколько значений и работать с ними с помощью специальных методов. \n\n🚩Как используются массивы? \n\nМассивы позволяют: \nХранить несколько значений в одной переменной \nПеребирать элементы с помощью циклов \nДобавлять, удалять, изменять элементы \nВыполнять операции, например, сортировку и фильтрацию \n\n🚩Как создать массив? \n\nВ JavaScript массив можно создать разными способами: \nС использованием литерала массива \nlet fruits = [\"яблоко\", \"банан\", \"апельсин\"];\n\nС использованием конструктора Array \nlet numbers = new Array(1, 2, 3, 4, 5);\n\n🚩Как обращаться к элементам массива? \n\nДоступ к элементу массива осуществляется по индексу (начинается с 0): \nlet fruits = [\"яблоко\", \"банан\", \"апельсин\"];\nconsole.log(fruits[0]); // \"яблоко\"\nconsole.log(fruits[1]); // \"банан\"\n\n🚩Основные методы работы с массивами \n\nДобавление элемента в конец push() \nlet arr = [1, 2, 3];\narr.push(4); \nconsole.log(arr); // [1, 2, 3, 4]\n\nУдаление последнего элемента pop() \narr.pop();\nconsole.log(arr); // [1, 2, 3]\n\nДобавление элемента в начало unshift() \narr.unshift(0);\nconsole.log(arr); // [0, 1, 2, 3]\n\nУдаление первого элемента shift() \narr.shift();\nconsole.log(arr); // [1, 2, 3]\n\nПеребор массива forEach() \narr.forEach(item => console.log(item)); \n\nФильтрация элементов filter() \nlet evenNumbers = arr.filter(num => num % 2 === 0);\nconsole.log(evenNumbers); // [2]\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-02-03T09:10:11Z","dateModified":"2025-02-03T09:10:11Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":3,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":4059},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":21},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":26},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":3}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/1085","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/1085","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/1085","headline":"🤔 Как расшифровывается CSS? CSS расшифровывается как Cascading Style Sheets (Каскадные таблицы стилей). Это я…","articleBody":"🤔 Как расшифровывается CSS?\n\nCSS расшифровывается как Cascading Style Sheets (Каскадные таблицы стилей). Это язык описания внешнего вида HTML-элементов.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2025-02-02T16:10:10Z","dateModified":"2025-02-02T16:10:10Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":2,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":3869},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":34},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":6},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/1084","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/1084","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/1084","headline":"🤔 Какие есть значения у box-sizing? Свойство box-sizing в CSS управляет тем, как рассчитываются размеры элеме…","articleBody":"🤔 Какие есть значения у box-sizing?\n\nСвойство box-sizing в CSS управляет тем, как рассчитываются размеры элемента, включая ширину и высоту. Оно определяет, включаются ли в эти размеры внутренние отступы (padding) и границы (border), или же они добавляются отдельно. \n\n🚩Возможные значения `box-sizing`\n\n🟠`content-box`\nРазмеры элемента считаются только по `width` и `height`, без учета padding и border. Если добавить padding или border, фактические размеры элемента увеличатся. \n .box {\n width: 200px;\n height: 100px;\n padding: 20px;\n border: 10px solid black;\n box-sizing: content-box;\n }\n \n🟠`border-box` \nwidth и height включают padding и border. Внутреннее содержимое (content) будет автоматически уменьшаться, чтобы уложиться в заданные размеры. \n .box {\n width: 200px;\n height: 100px;\n padding: 20px;\n border: 10px solid black;\n box-sizing: border-box;\n }\n \n🟠`inherit` \nНаследует значение box-sizing от родительского элемента. \n .parent {\n box-sizing: border-box;\n }\n .child {\n box-sizing: inherit; /* Унаследует border-box */\n }\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-02-02T09:10:07Z","dateModified":"2025-02-02T09:10:07Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":4,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":4338},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":16},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":12},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":4}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/1083","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/1083","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/1083","headline":"🤔 Что известно про преобразование типов? Преобразование типов может быть: - Явным — например, использование ф…","articleBody":"🤔 Что известно про преобразование типов?\n\nПреобразование типов может быть:\n- Явным — например, использование функций String(), Number() для приведения типов.\n- Неявным — когда JavaScript автоматически приводит один тип к другому в контексте операций (например, сложение строки и числа).\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2025-02-01T16:10:10Z","dateModified":"2025-02-01T16:10:10Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":2,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":3861},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":21},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":6},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/1082","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/1082","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/1082","headline":"🤔 Как бы повернул блок на 45 градусов? Чтобы повернуть блок на 45 градусов, используется свойство CSS transfo…","articleBody":"🤔 Как бы повернул блок на 45 градусов? \n\nЧтобы повернуть блок на 45 градусов, используется свойство CSS transform с функцией rotate. Это свойство позволяет применять различные трансформации к элементам, включая вращение, масштабирование, смещение и наклон.\n\n🚩Пример использования\n\n.rotated-box {\n width: 100px;\n height: 100px;\n background-color: lightblue;\n transform: rotate(45deg);\n}\n\n🚩Объяснение\n\nОсновной синтаксис \n🟠Угол поворота элемента. Может быть положительным или отрицательным значением в градусах (deg), радианах (rad), градусах (grad) или оборотах (turn).\ntransform: rotate(угол); \n\n🟠Параметры\nУгол поворота элемента. В данном случае элемент поворачивается на 45 градусов по часовой стрелке.\n\n\n\n \n \n \n\n\n

\n\n\n\n🚩Пояснение\n\n🟠Свойство `transform`\nПозволяет применять различные визуальные эффекты к элементу, такие как вращение, масштабирование и смещение.\n🟠Функция rotate\nИспользуется для вращения элемента на заданный угол. Положительные значения поворачивают элемент по часовой стрелке, отрицательные — против часовой стрелки.\n\n🚩Использование в реальных проектах\n\n🟠Вращение элементов\nВращение элементов может использоваться для создания интересных визуальных эффектов, таких как поворот иконок, изображений или блоков текста.\n🟠Анимация\nВ комбинации с анимацией (@keyframes и transition), вращение может создавать динамичные и интерактивные пользовательские интерфейсы.\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-02-01T09:10:07Z","dateModified":"2025-02-01T09:10:07Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":4,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":4092},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":12},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":6},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":4}]}}]}

Frontend | Вопросы собесов

17 337

🤔 Расскажи про отдельные домены для статики Статический контент – это файлы, которые не изменяются на сервере и могут кэшироваться у пользователей: CSS, JavaScript Изображения, видео Шрифты, иконки Чтобы ускорить загрузку сайта и снизить нагрузку на основной сервер, статические файлы часто выносят на отдельный домен или CDN. 🚩Зачем использовать отдельные домены для статики? 🟠Разгрузка основного сервера Основной сервер обрабатывает только динамический контент (например, API-запросы). Статические файлы отдаются с другого сервера быстрее 🟠Ускорение загрузки сайта Браузеры ограничивают количество одновременных соединений к одному домену (обычно 6-8). Если статика загружается с другого домена, браузер может скачивать больше файлов одновременно. 🟠Кэширование и CDN Отдельный домен можно использовать через CDN (Cloudflare, AWS S3, Vercel, Fastly). Это уменьшает задержки и ускоряет загрузку контента по всему миру 🟠Уменьшение размера cookie Основной сайт передает cookies при каждом запросе. Если статика загружается с отдельного домена без cookies (static.example.com), это снижает трафик 🚩Как настроить отдельный домен для статики? 🟠Создать поддомен для статики Обычно статику размещают на поддомене: static.example.com cdn.example.com assets.example.com 🟠Настроить веб-сервер или CDN Если используем NGINX:

  server {
    server_name static.example.com;
    root /var/www/static;
  }

Ставь 👍 и забирай 📚 Базу знаний

4.1k3415

analytics

Frontend | Вопросы собесов

17 337

AdRepost from easyoffer

Привет, ребята! 1,5 года я учился на программиста, а сайт easyoffer.ru стал моим пет-проектом. Я создавал его, потому что: а) нужно было добавить хоть какой-нибудь проект в резюме б) подготовиться к прохождению собесов И всё получилось! Благодаря еasyoffer я успешно прошёл собеседование и устроился Python Junior-разработчиком на удаленку с зарплатой 115 тысяч рублей. Однако ещё во время разработки я понял, что у этого проекта есть потенциал. Казалось, что сайт может стать популярным и, возможно, превратиться в стартап. По-этому я с самого начала заложил в проект минимальную бизнес-модель, на случай, если сайт начнёт набирать трафик. Я предложил пользователям полный доступ к сайту в обмен на подписку на Telegram-каналы. Это позволяло развивать аудиторию, а в будущем — зарабатывать на рекламе. Результат превзошёл ожидания! С момента запуска easyoffer посетило 400 тысяч человек. А когда доход с рекламы превысил мою зарплату программиста, я принял решение уйти с работы и полностью посвятить себя разработке новой версии сайта. Вот так, зайдя в IT, через 4 месяца вышел через свой же пет-проект. Мне очень повезло Уже год я работаю над easyoffer 2.0. Это будет более масштабный и качественной новый проект: – Появится тренажер – Появятся задачи из собесов – Фильтрация контента по грейдам и еще очень много фич, о которых я расскажу позже. Хочу, довести easyoffer до ума, чтобы сайт стал настоящим помощником для всех, кто готовится к собеседованиям. По этому в ближайшее время я объявлю о старте краудфандинговой кампании, чтобы ускорить разработку и я готов щедро отблагодарить всех, кто поддержит проект. А те, кто поддержат проект первыми, получат специальные лимитированные выгодные вознаграждения. Следите за этим телеграм каналом, если хотите стать первыми сапортерами.

3.1k2421

analytics

Frontend | Вопросы собесов

17 337

🤔 Что известно про SSR? SSR (Server-Side Rendering) ускоряет загрузку страниц и улучшает SEO, так как контент рендерится на сервере и передается готовым. Это полезно для сайтов с динамическим контентом и высокой нагрузкой, но сложнее в реализации и требует серверных ресурсов. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

3.7k1020

analytics

Frontend | Вопросы собесов

17 337

🤔 Что такое amp страницы? AMP (Accelerated Mobile Pages) — это технология от Google, которая позволяет создавать очень быстрые и легкие веб-страницы для мобильных устройств. AMP-страницы загружаются почти мгновенно, потому что: Используют оптимизированный HTML (AMP HTML) Ограничивают использование JavaScript Подключают Google AMP Cache для мгновенной загрузки 🚩Зачем нужны AMP? Ускоряют загрузку страниц → полезно для мобильных пользователей Улучшают SEO → Google любит быстрые сайты Увеличивают CTR → в поиске AMP-страницы помечены ⚡️ и привлекают внимание Снижают нагрузку на сервер 🚩Как создать AMP-страницу? AMP-страница – это обычный HTML, но с ограничениями и своими тегами.

<!DOCTYPE html>
<html ⚡️ lang="ru">
<head>
  <meta charset="UTF-8">
  <title>AMP Страница</title>
  <link rel="canonical" href="https://example.com/normal-page.html">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <style amp-boilerplate>
    body { visibility: hidden; }
  </style>
  <noscript>
    <style amp-boilerplate>
      body { visibility: visible; }
    </style>
  </noscript>
</head>
<body>
  <h1>Привет, это AMP!</h1>
  <amp-img src="image.jpg" width="600" height="400" layout="responsive"></amp-img>
</body>
</html>

Ставь 👍 и забирай 📚 Базу знаний

4.2k3418

analytics

Frontend | Вопросы собесов

17 337

🤔 Когда брать абсолютные величины, а когда относительные? 1. Абсолютные величины: - Когда нужны конкретные значения, например, доход компании в долларах. 2. Относительные величины: - Для сравнения и анализа изменений, например, рост дохода в процентах. Абсолютные подходят для понимания масштаба, а относительные — для динамики. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

3.7k761

analytics

Frontend | Вопросы собесов

17 337

🤔 Что такое meta теги? Meta-теги – это специальные HTML-теги, которые содержат метаинформацию о веб-странице. Они располагаются внутри <head> и не отображаются на самой странице, но помогают браузерам, поисковым системам и социальным сетям правильно обрабатывать и отображать страницу. 🚩Зачем нужны meta-теги? Улучшают SEO (поисковую оптимизацию) Управляют отображением в соцсетях и поисковиках Настраивают адаптивность страницы (например, на мобильных устройствах) Определяют кодировку, язык и авторство страницы 🚩Основные meta-теги с примерами Кодировка страницы

<meta charset="UTF-8">

Описание страницы (SEO)

<meta name="description" content="Лучший сайт с рецептами вкусных блюд!">

Ключевые слова (SEO, устарело)

<meta name="keywords" content="рецепты, еда, кулинария, блюда">

Автор страницы

<meta name="author" content="Иван Иванов">

Запрет индексации страницы

<meta name="robots" content="noindex, nofollow">

Адаптивность на мобильных устройствах

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Социальные сети (Open Graph, Twitter Cards) Facebook и другие соцсети (Open Graph)

<meta property="og:title" content="Вкусные рецепты">
<meta property="og:description" content="Попробуйте лучшие блюда со всего мира!">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com">

Twitter-карточки

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Рецепты для гурманов">
<meta name="twitter:image" content="https://example.com/image.jpg">

Ставь 👍 и забирай 📚 Базу знаний

4.1k3817

analytics

Frontend | Вопросы собесов

17 337

Ad

Поговорим о любви к фронтенду? 15 февраля встречаемся на самой большой конференции Яндекса для frontend-сообщества — «Я 💛Фронтенд». В программе: 💛 Большая программа докладов — эксперты индустрии поделятся своим опытом 💛 Code in the dark — вместе с Семёном Левенсоном из Яндекс Маркета поучаствуете в соревновании по вёрстке и поймете, как интеллектуальный помощник разработчика Yandex Code Assistant меняет игру 💛 CodeRun — вместе с Никитой Дубко и Сашей Шинкевич из Контеста Яндекса познакомитесь с тренажером для прокачки скилла разработчика А ещё не забываем про движ в онлайне — следите за обновлениями сайта. Уже завтра на состоится традиционный Capture the flag — ежегодный турнир для разработчиков. Смотрим онлайн и регистрируемся на ивент тут.

2.5k1212

analytics

Frontend | Вопросы собесов

17 337

🤔 Что такое merge и rebase, в чем отличие друг от друга? 1. Merge: - Объединяет ветки, создавая новый коммит. - Сохраняет историю изменений обеих веток. 2. Rebase: - Переносит коммиты одной ветки поверх другой. - История становится линейной, но теряются промежуточные изменения. Разница: merge сохраняет все ветвления, а rebase упрощает историю. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

3.8k3627

analytics

Frontend | Вопросы собесов

17 337

🤔 Какие есть альтернативы у redux? Redux – мощный инструмент, но не всегда он необходим. Существует множество альтернатив, каждая из которых подходит для разных сценариев. 🚩React Context API + useReducer Подходит для небольших и средних приложений Встроено в React (не требует установки дополнительных библиотек) useContext` позволяет передавать данные по дереву компонентов без "прокидывания" через props useReducer работает как Redux, но проще

const AuthContext = createContext();

function authReducer(state, action) {
  switch (action.type) {
    case "LOGIN":
      return { ...state, isAuthenticated: true, user: action.payload };
    case "LOGOUT":
      return { ...state, isAuthenticated: false, user: null };
    default:
      return state;
  }
}

function AuthProvider({ children }) {
  const [state, dispatch] = useReducer(authReducer, {
    isAuthenticated: false,
    user: null,
  });

  return (
    <AuthContext.Provider value={{ state, dispatch }}>
      {children}
    </AuthContext.Provider>
  );
}

function LoginButton() {
  const { dispatch } = useContext(AuthContext);
  return (
    <button onClick={() => dispatch({ type: "LOGIN", payload: "Иван" })}>
      Войти
    </button>
  );
}

🚩Zustand Проще Redux, но с теми же возможностями Нет лишних actions и reducers, только функции

import { create } from "zustand";

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

function Counter() {
  const { count, increment } = useStore();
  return <button onClick={increment}>Счетчик: {count}</button>;
}

🚩Recoil Идеален для React-приложений Гибче, чем Redux, с концепцией "атомов" (раздельные состояния)

import { atom, useRecoilState } from "recoil";

const countState = atom({
  key: "count",
  default: 0,
});

function Counter() {
  const [count, setCount] = useRecoilState(countState);
  return <button onClick={() => setCount(count + 1)}>Счетчик: {count}</button>;
}

🚩Jotai Напоминает Recoil, но без сложных концепций Поддерживает React Suspense и асинхронные состояния

import { atom, useAtom } from "jotai";

const countAtom = atom(0);

function Counter() {
  const [count, setCount] = useAtom(countAtom);
  return <button onClick={() => setCount(count + 1)}>Счетчик: {count}</button>;
}

🚩MobX Автоматически отслеживает изменения состояния Удобен для сложных приложений

import { makeAutoObservable } from "mobx";
import { observer } from "mobx-react-lite";

class CounterStore {
  count = 0;

  constructor() {
    makeAutoObservable(this);
  }

  increment() {
    this.count++;
  }
}

const store = new CounterStore();

const Counter = observer(() => (
  <button onClick={() => store.increment()}>Счетчик: {store.count}</button>
));

🚩XState Подходит для сложных логик (например, UI-анимаций, состояний формы) Удобно описывать последовательности действий

import { createMachine, interpret } from "xstate";

const toggleMachine = createMachine({
  id: "toggle",
  initial: "inactive",
  states: {
    inactive: { on: { TOGGLE: "active" } },
    active: { on: { TOGGLE: "inactive" } },
  },
});

const service = interpret(toggleMachine).start();
service.send("TOGGLE"); // Меняет состояние

Ставь 👍 и забирай 📚 Базу знаний

3.8k4726

analytics

Frontend | Вопросы собесов

17 337

🤔 Что такое hoisting? Это механизм JavaScript, при котором объявления переменных и функций поднимаются в начало своей области видимости. Например: - Переменные, объявленные с var, поднимаются, но их значение остается undefined. - let и const поднимаются, но не инициализируются. - Функции полностью доступны до их объявления. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

3.9k232110

analytics

Frontend | Вопросы собесов

17 337

Ad

wipe right or swipe left Что делать, если твои мэтчи в жизни не такие точные, как твой код? Спокойно, 14 февраля в 19:00 по МСК мы разберём, как ML анализирует speed dating и предсказывает match. 📌 Мы возьмем реальные данные со speed dating. 📌 Обучим модель, которая скажет: match или swipe left. 📌 Разберём, какие признаки реально важны (спойлер: работа в IT — не прям гарантия успеха (наши маркетологи подтверждают 😥). 💡 Приходи, если хочешь прокачать свой Python, ML и, возможно, станешь идеальной парой, как самый стильные форсы. 👉 Записаться

4.0k217

analytics

Frontend | Вопросы собесов

17 337

🤔 Как определить что состояние является глобальным? Глобальное состояние – это данные, которые должны быть доступны в разных частях приложения. Чтобы определить, является ли состояние глобальным, нужно задать себе несколько вопросов: 🚩Используется ли это состояние в нескольких независимых компонентах? Если одно и то же состояние необходимо сразу нескольким компонентам, расположенным в разных частях дерева компонентов, скорее всего, его стоит сделать глобальным. В React, если в разных компонентах нужна информация о текущем пользователе (user), лучше хранить её в глобальном состоянии (например, в Context или Redux).

// Глобальное состояние (например, Context API)
const UserContext = createContext();

function App() {
  const [user, setUser] = useState({ name: "Иван", isLoggedIn: true });

  return (
    <UserContext.Provider value={user}>
      <Navbar />
      <Profile />
    </UserContext.Provider>
  );
}

function Navbar() {
  const user = useContext(UserContext);
  return <div>Привет, {user.name}!</div>;
}

function Profile() {
  const user = useContext(UserContext);
  return <div>Профиль пользователя: {user.name}</div>;
}

🚩Должно ли состояние сохраняться при переходе между страницами? Если данные должны оставаться неизменными при смене страниц, лучше использовать глобальное хранилище (например, Redux, Zustand или React Context). Корзина товаров в интернет-магазине Авторизация пользователя Темная/светлая тема приложения Если данные теряются при смене страницы – это сигнал, что их нужно вынести в глобальное хранилище. 🚩Может ли состояние изменяться в одном месте, а использоваться в другом? Если одно состояние обновляется в одном компоненте, но влияет на работу нескольких других компонентов, оно должно быть глобальным. В чате, если новое сообщение приходит в одном компоненте (ChatInput), а отображается в другом (ChatList), логично хранить все сообщения в глобальном состоянии.

const ChatContext = createContext();

function ChatProvider({ children }) {
  const [messages, setMessages] = useState([]);

  const sendMessage = (text) => {
    setMessages([...messages, { text, id: Date.now() }]);
  };

  return (
    <ChatContext.Provider value={{ messages, sendMessage }}>
      {children}
    </ChatContext.Provider>
  );
}

function ChatList() {
  const { messages } = useContext(ChatContext);
  return messages.map((msg) => <p key={msg.id}>{msg.text}</p>);
}

function ChatInput() {
  const { sendMessage } = useContext(ChatContext);
  const [text, setText] = useState("");

  return (
    <input
      value={text}
      onChange={(e) => setText(e.target.value)}
      onKeyPress={(e) => {
        if (e.key === "Enter") {
          sendMessage(text);
          setText("");
        }
      }}
    />
  );
}

🚩Зависит ли состояние от URL (адресной строки)? Иногда состояние можно не делать глобальным, а просто хранить его в URL (в query-параметрах или path). ID открытого товара: /products/123 Фильтры товаров: /shop?category=shoes&sort=price Страница чата с пользователем: /chat?user=ivan Ставь 👍 и забирай 📚 Базу знаний

3.5k18108

analytics

Frontend | Вопросы собесов

17 337

🤔 Какие есть способы общения между компонентами? 1. Родительский компонент — дочерний компонент: - Передача через props или события. 2. Общий контекст или хранилище: - Использование глобального состояния (Redux, Zustand, Context API). 3. Взаимодействие через сервисы: - Например, через API или WebSocket. 4. Pub-Sub модель: - С помощью событий или библиотек типа EventEmitter. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

3.6k13237

analytics

Frontend | Вопросы собесов

17 337

🤔 Что выбираешь ооп или функции? Выбор между объектно-ориентированным программированием (ООП) и функциональным программированием (ФП) зависит от задачи, которую нужно решить. Оба подхода имеют свои плюсы и минусы. 🚩Когда использовать ООП? Объектно-ориентированное программирование подходит, когда: Нужно моделировать реальные объекты и их поведение Приложение состоит из множества взаимодействующих сущностей Важно инкапсулировать данные и защитить их от прямого изменения Требуется повторное использование кода через наследование и полиморфизм

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} издает звук`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} лает`);
  }
}

const dog = new Dog("Бобик");
dog.speak(); // "Бобик лает"

🚩Когда использовать функциональное программирование? Функциональный подход хорош, если Код должен быть чистым и предсказуемым Нужно избегать изменений состояния (иммутабельность) Требуется много работы с массивами, коллекциями данных Нужно легко писать асинхронный код

const double = num => num * 2;

const numbers = [1, 2, 3, 4];
const doubledNumbers = numbers.map(double);

console.log(doubledNumbers); // [2, 4, 6, 8]

Ставь 👍 и забирай 📚 Базу знаний

4.1k24195

analytics

Frontend | Вопросы собесов

17 337

🤔 В чем разница между GET и POST? 1. GET: - Используется для получения данных с сервера. - Данные передаются в URL (в строке запроса), ограничены по длине. - Менее безопасен, так как параметры видны в URL. 2. POST: - Используется для отправки данных на сервер. - Данные передаются в теле запроса, не отображаются в URL. - Подходит для передачи больших объемов информации и конфиденциальных данных. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

4.0k26419

analytics

Frontend | Вопросы собесов

17 337

🤔 Что такое массив? Это структура данных, которая представляет собой упорядоченный список элементов. В JavaScript массивы могут содержать любые типы данных: числа, строки, объекты, другие массивы и даже функции. 🚩Почему массивы нужны? Массивы помогают удобно хранить и обрабатывать наборы данных. Вместо того чтобы создавать множество переменных, можно использовать массив, чтобы хранить сразу несколько значений и работать с ними с помощью специальных методов. 🚩Как используются массивы? Массивы позволяют: Хранить несколько значений в одной переменной Перебирать элементы с помощью циклов Добавлять, удалять, изменять элементы Выполнять операции, например, сортировку и фильтрацию 🚩Как создать массив? В JavaScript массив можно создать разными способами: С использованием литерала массива

let fruits = ["яблоко", "банан", "апельсин"];

С использованием конструктора Array

let numbers = new Array(1, 2, 3, 4, 5);

🚩Как обращаться к элементам массива? Доступ к элементу массива осуществляется по индексу (начинается с 0):

let fruits = ["яблоко", "банан", "апельсин"];
console.log(fruits[0]); // "яблоко"
console.log(fruits[1]); // "банан"

🚩Основные методы работы с массивами Добавление элемента в конец push()

let arr = [1, 2, 3];
arr.push(4); 
console.log(arr); // [1, 2, 3, 4]

Удаление последнего элемента pop()

arr.pop();
console.log(arr); // [1, 2, 3]

Добавление элемента в начало unshift()

arr.unshift(0);
console.log(arr); // [0, 1, 2, 3]

Удаление первого элемента shift()

arr.shift();
console.log(arr); // [1, 2, 3]

Перебор массива forEach()

arr.forEach(item => console.log(item)); 

Фильтрация элементов filter()

let evenNumbers = arr.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2]

Ставь 👍 и забирай 📚 Базу знаний

4.1k26213

analytics

Frontend | Вопросы собесов

17 337

🤔 Как расшифровывается CSS? CSS расшифровывается как Cascading Style Sheets (Каскадные таблицы стилей). Это язык описания внешнего вида HTML-элементов. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

3.9k6342

analytics

Frontend | Вопросы собесов

17 337

🤔 Какие есть значения у box-sizing? Свойство box-sizing в CSS управляет тем, как рассчитываются размеры элемента, включая ширину и высоту. Оно определяет, включаются ли в эти размеры внутренние отступы (padding) и границы (border), или же они добавляются отдельно. 🚩Возможные значения `box-sizing` 🟠`content-box` Размеры элемента считаются только по `width` и `height`, без учета padding и border. Если добавить padding или border, фактические размеры элемента увеличатся.

   .box {
       width: 200px;
       height: 100px;
       padding: 20px;
       border: 10px solid black;
       box-sizing: content-box;
   }

🟠`border-box` width и height включают padding и border. Внутреннее содержимое (content) будет автоматически уменьшаться, чтобы уложиться в заданные размеры.

   .box {
       width: 200px;
       height: 100px;
       padding: 20px;
       border: 10px solid black;
       box-sizing: border-box;
   }

🟠`inherit` Наследует значение box-sizing от родительского элемента.

   .parent {
       box-sizing: border-box;
   }
   .child {
       box-sizing: inherit; /* Унаследует border-box */
   }

Ставь 👍 и забирай 📚 Базу знаний

4.3k12164

analytics

Frontend | Вопросы собесов

17 337

🤔 Что известно про преобразование типов? Преобразование типов может быть: - Явным — например, использование функций String(), Number() для приведения типов. - Неявным — когда JavaScript автоматически приводит один тип к другому в контексте операций (например, сложение строки и числа). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

3.9k6212

analytics

Frontend | Вопросы собесов

17 337

🤔 Как бы повернул блок на 45 градусов? Чтобы повернуть блок на 45 градусов, используется свойство CSS transform с функцией rotate. Это свойство позволяет применять различные трансформации к элементам, включая вращение, масштабирование, смещение и наклон. 🚩Пример использования

.rotated-box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    transform: rotate(45deg);
}

🚩Объяснение Основной синтаксис 🟠Угол поворота элемента. Может быть положительным или отрицательным значением в градусах (deg), радианах (rad), градусах (grad) или оборотах (turn).

transform: rotate(угол);   

🟠Параметры Угол поворота элемента. В данном случае элемент поворачивается на 45 градусов по часовой стрелке.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .rotated-box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <div class="rotated-box"></div>
</body>
</html>

🚩Пояснение 🟠Свойство `transform` Позволяет применять различные визуальные эффекты к элементу, такие как вращение, масштабирование и смещение. 🟠Функция rotate Используется для вращения элемента на заданный угол. Положительные значения поворачивают элемент по часовой стрелке, отрицательные — против часовой стрелки. 🚩Использование в реальных проектах 🟠Вращение элементов Вращение элементов может использоваться для создания интересных визуальных эффектов, таких как поворот иконок, изображений или блоков текста. 🟠Анимация В комбинации с анимацией (@keyframes и transition), вращение может создавать динамичные и интерактивные пользовательские интерфейсы. Ставь 👍 и забирай 📚 Базу знаний

4.1k6124

analytics

Показати більше