tgoop.com »
United States »
Frontend Interview - собеседования по Javascript / Html / Css » Telegram Web
Что такое :root в CSS?
Псевдокласс :root нужен для обращения к самому главному родительскому элементу документа. Его также называют корневым элементом. В случае HTML-документа самым главным родителем всей страницы будет тег <html>. Часто :root используется для того, чтобы задавать кастомные свойства.
Пример
Укажем в документе нужный нам шрифт и создадим несколько кастомных свойств:
🛠 Поскольку :root — это псевдокласс, его специфичность будет выше, чем селекторов по тегу html или svg.
В примере ниже фон документа окрасится в персиковый цвет, а не в томатный.
👉 @frontendInterview
Псевдокласс :root нужен для обращения к самому главному родительскому элементу документа. Его также называют корневым элементом. В случае HTML-документа самым главным родителем всей страницы будет тег <html>. Часто :root используется для того, чтобы задавать кастомные свойства.
Пример
Укажем в документе нужный нам шрифт и создадим несколько кастомных свойств:
:root {
font-family: 'Oswald', sans-serif;
--button-size: 40px;
--main-color: #bada55;
}
🛠 Поскольку :root — это псевдокласс, его специфичность будет выше, чем селекторов по тегу html или svg.
В примере ниже фон документа окрасится в персиковый цвет, а не в томатный.
:root {
background-color: peachpuff;
}
html {
background-color: tomato;
}
👉 @frontendInterview
👍10
Настольная книга веб-дизайнера. Практический курс по вебдизайну и проектированию сайтов
Эта книга научит вас тонкостям веб-дизайна и проектированию сайтов. Учебник включает в себя все этапы работы вебдизайнера: начиная с проектирования и заканчивая реализацией сайта.
Книга посвящена описанию этапов разработки сайтов: прототипированию, дизайну веб-страниц, нарезке, дизайну мобильной версии и запуску сайта.
Также вы узнаете: как сделать продающий сайт, как правильно заполнить техзадание и создать базу образцов, как собрать семантическое ядро, купить хостинг и домен, какой конструктор сайтов выбрать. Вы легко создадите первую страницу сайта, состоящую из: хедера, слайдера, преимуществ, модуля «О компании», каталога товаров, схемы работы, отзывов, фотогалереи и футера.
Для начинающих специалистов.
👉 @frontendInterview
Эта книга научит вас тонкостям веб-дизайна и проектированию сайтов. Учебник включает в себя все этапы работы вебдизайнера: начиная с проектирования и заканчивая реализацией сайта.
Книга посвящена описанию этапов разработки сайтов: прототипированию, дизайну веб-страниц, нарезке, дизайну мобильной версии и запуску сайта.
Также вы узнаете: как сделать продающий сайт, как правильно заполнить техзадание и создать базу образцов, как собрать семантическое ядро, купить хостинг и домен, какой конструктор сайтов выбрать. Вы легко создадите первую страницу сайта, состоящую из: хедера, слайдера, преимуществ, модуля «О компании», каталога товаров, схемы работы, отзывов, фотогалереи и футера.
Для начинающих специалистов.
👉 @frontendInterview
👍1
Count the photos!
Вам дана строка, представляющая собой дорогу. На ней есть камеры, обозначенные символом ".", а также машины, которые двигаются вправо - ">", и машины, которые двигаются влево - "<". Камера делает фотографию, если машины двигается в её сторону. Создайте функцию, которая вернет количество сделанных фото.
Примеры:
👉 @frontendInterview
Вам дана строка, представляющая собой дорогу. На ней есть камеры, обозначенные символом ".", а также машины, которые двигаются вправо - ">", и машины, которые двигаются влево - "<". Камера делает фотографию, если машины двигается в её сторону. Создайте функцию, которая вернет количество сделанных фото.
Примеры:
For ">>." -> 2 photos were taken
For ".>>" -> 0 photos were taken
For ">.<." -> 3 photos were taken
For ".><.>>.<<" -> 11 photos were taken👉 @frontendInterview
1👍2👎1
Какие главные особенности куки ?
Cookies (куки) — это небольшие кусочки данных, хранящиеся в браузере и используемые для сохранения информации о пользователе. Вот основные особенности:
Хранение данных на клиенте
Хранятся на стороне клиента (в браузере) и используются для сохранения информации, которая может быть полезна при последующих посещениях веб-сайта.
Ограниченный размер
Размер каждого куки ограничен (обычно до 4KB). Поэтому куки не подходят для хранения больших объемов данных.
Срок действия (время жизни)
Каждая кука имеет время жизни, которое задается параметром
Доступность по домену и пути
Доступны только для указанного домена и пути. Это позволяет ограничивать доступ к кукам для других страниц и поддоменов.
Безопасность (HTTP-only и Secure)
HTTP-only: Куки, установленные с флагом
Secure: Куки, установленные с флагом
Передача с запросами
Автоматически отправляются серверу с каждым HTTP-запросом к соответствующему домену, что позволяет серверу узнавать пользователя и сохранять его сессию.
👉 @frontendInterview
Cookies (куки) — это небольшие кусочки данных, хранящиеся в браузере и используемые для сохранения информации о пользователе. Вот основные особенности:
Хранение данных на клиенте
Хранятся на стороне клиента (в браузере) и используются для сохранения информации, которая может быть полезна при последующих посещениях веб-сайта.
Ограниченный размер
Размер каждого куки ограничен (обычно до 4KB). Поэтому куки не подходят для хранения больших объемов данных.
Срок действия (время жизни)
Каждая кука имеет время жизни, которое задается параметром
Expires или Max-Age. По истечении этого времени кука автоматически удаляется браузером.Доступность по домену и пути
Доступны только для указанного домена и пути. Это позволяет ограничивать доступ к кукам для других страниц и поддоменов.
Безопасность (HTTP-only и Secure)
HTTP-only: Куки, установленные с флагом
HttpOnly, недоступны через JavaScript, что помогает защитить данные от XSS-атак.Secure: Куки, установленные с флагом
Secure, передаются только по защищенному HTTPS соединению.Передача с запросами
Автоматически отправляются серверу с каждым HTTP-запросом к соответствующему домену, что позволяет серверу узнавать пользователя и сохранять его сессию.
👉 @frontendInterview
👍3
❗️Создайте свое приложение для прогноза погоды всего за 1 час
❓Хотите научиться создавать полезные приложения и работать со сторонними веб-сервисами?
⏰ Ждем вас на открытом вебинаре 4 сентября в 20:00 мск, где мы разберем:
- как работать с API сторонних веб-сервисов на примере создания приложения для прогноза погоды;
- основные принципы работы с API и их интеграции в проекты;
- как расширить функционал приложения и использовать больше браузерных инструментов.
🔥 Урок идеально подходит для тех, кто знает основы JavaScript (циклы, условия, функции, базовая работа с DOM).
Встречаемся в преддверии старта курса «JavaScript Developer. Basic». Все участники вебинара получат специальную цену на обучение!
👉Регистрируйтесь прямо сейчас, чтобы не пропустить мероприятие: https://vk.cc/cA2r4D
❓Хотите научиться создавать полезные приложения и работать со сторонними веб-сервисами?
⏰ Ждем вас на открытом вебинаре 4 сентября в 20:00 мск, где мы разберем:
- как работать с API сторонних веб-сервисов на примере создания приложения для прогноза погоды;
- основные принципы работы с API и их интеграции в проекты;
- как расширить функционал приложения и использовать больше браузерных инструментов.
🔥 Урок идеально подходит для тех, кто знает основы JavaScript (циклы, условия, функции, базовая работа с DOM).
Встречаемся в преддверии старта курса «JavaScript Developer. Basic». Все участники вебинара получат специальную цену на обучение!
👉Регистрируйтесь прямо сейчас, чтобы не пропустить мероприятие: https://vk.cc/cA2r4D
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru erid 2SDnjc9FMjY👎2
👍7
This media is not supported in your browser
VIEW IN TELEGRAM
Как сделать ссылку на верх веб-страницы?
Ссылка «наверх» позволяет быстро перейти к верхней части веб-страницы, где обычно располагается логотип, навигация по сайту и другие типовые элементы сайта.
Для создания такой ссылки, в её адресе достаточно указать #top. Все современные браузеры понимают такой адрес и при щелчке по этой ссылке переходят к верхней части текущей веб-страницы.
Вместо ссылки можно использовать кнопку, а переход по ссылке реализовать через JavaScript. Для этого к <button> добавляем событие onclick, внутри которого пишем window.location.href со значением #top
👉 @frontendInterview
Ссылка «наверх» позволяет быстро перейти к верхней части веб-страницы, где обычно располагается логотип, навигация по сайту и другие типовые элементы сайта.
Для создания такой ссылки, в её адресе достаточно указать #top. Все современные браузеры понимают такой адрес и при щелчке по этой ссылке переходят к верхней части текущей веб-страницы.
<a href="#top">Наверх</a>
Вместо ссылки можно использовать кнопку, а переход по ссылке реализовать через JavaScript. Для этого к <button> добавляем событие onclick, внутри которого пишем window.location.href со значением #top
<button onclick="window.location.href='#top'">Наверх</button>
👉 @frontendInterview
👍10❤5
Что делать, когда клиент просит какую-то «дичь»
Слышу много историй о том, как клиент, получив результат работы, даёт какую-то дикую обратную связь. Например, просит увеличить размер логотипа в сто раз или нарисовать желтый прозрачный круглый квадрат.
В фрилансерских кругах есть любители поржать на эту тему. Я тоже когда-то таким был. До тех пор, пока не осознал две вещи.
Первая. Какую бы дичь ни предлагал клиент, ему она дичью не кажется и стоит относиться к этому с уважением. Просто клиент настолько далёк от специфики работы, что его комментарии могут восприниматься странно. Важно просто объяснить ему, почему предложение кажется нам чрезмерным, и предложить более крутой вариант.
Вторая. И тут-то и заключается проблема. Фрилансер, получив странный комментарий к результату своей работы, сразу представляет, как ему придётся тратить время на внесение правок, испытывает от этого дискофморт и его первая реакция (которая очень легко и неприязненно считывается собеседником) — резко возразить.
Как уменьшить количество «дичи» от клиента, да ещё и повысить его удовлетворённость от процесса работы и результата? Ответ в статье.
👉 @frontendInterview
Слышу много историй о том, как клиент, получив результат работы, даёт какую-то дикую обратную связь. Например, просит увеличить размер логотипа в сто раз или нарисовать желтый прозрачный круглый квадрат.
В фрилансерских кругах есть любители поржать на эту тему. Я тоже когда-то таким был. До тех пор, пока не осознал две вещи.
Первая. Какую бы дичь ни предлагал клиент, ему она дичью не кажется и стоит относиться к этому с уважением. Просто клиент настолько далёк от специфики работы, что его комментарии могут восприниматься странно. Важно просто объяснить ему, почему предложение кажется нам чрезмерным, и предложить более крутой вариант.
Вторая. И тут-то и заключается проблема. Фрилансер, получив странный комментарий к результату своей работы, сразу представляет, как ему придётся тратить время на внесение правок, испытывает от этого дискофморт и его первая реакция (которая очень легко и неприязненно считывается собеседником) — резко возразить.
Как уменьшить количество «дичи» от клиента, да ещё и повысить его удовлетворённость от процесса работы и результата? Ответ в статье.
👉 @frontendInterview
❤2👍1
Какой метод используется для увеличения элемента при наведении без сдвигания соседних элементов?
Anonymous Quiz
1%
Изменение width или height
1%
Использование padding
92%
Использование transform: scale()
1%
Использование margin
5%
Использование position: absolute
Что такое useСontext в React ?
Это один из встроенных хуков, который позволяет компонентам подписываться на контекст и получать доступ к данным контекста. Используется для передачи данных через дерево компонентов без необходимости передавать пропсы на каждом уровне. Это особенно полезно для глобальных данных, таких как текущий авторизованный пользователь, тема (светлая/темная) или настройки локализации.
Как он работает?
- Создание контекста
Для создания контекста используется функция
- Provider
Компонент
- useContext
Используется для подписки на контекст в функциональных компонентах. Он принимает объект контекста, возвращаемый из
👉 @frontendInterview
Это один из встроенных хуков, который позволяет компонентам подписываться на контекст и получать доступ к данным контекста. Используется для передачи данных через дерево компонентов без необходимости передавать пропсы на каждом уровне. Это особенно полезно для глобальных данных, таких как текущий авторизованный пользователь, тема (светлая/темная) или настройки локализации.
Как он работает?
- Создание контекста
Для создания контекста используется функция
createContext. Она возвращает объект контекста, который содержит два компонента: Provider и Consumer. import React, { createContext, useState } from 'react';
const MyContext = createContext();
- Provider
Компонент
Provider используется для предоставления значения контекста всем дочерним компонентам. Все компоненты внутри Provider могут получить доступ к значениям, переданным в value. const MyProvider = ({ children }) => {
const [state, setState] = useState('Hello World');
return (
<MyContext.Provider value={{ state, setState }}>
{children}
</MyContext.Provider>
);
};
- useContext
Используется для подписки на контекст в функциональных компонентах. Он принимает объект контекста, возвращаемый из
createContext, и возвращает текущее значение контекста.import React, { useContext } from 'react';
const MyComponent = () => {
const { state, setState } = useContext(MyContext);
return (
<div>
<p>{state}</p>
<button onClick={() => setState('New Value')}>Change Value</button>
</div>
);
};
👉 @frontendInterview
👍7❤2
Алгоритмы: разработка и применение
Вы познакомитесь с базовыми аспектами построения алгоритмов, основными понятиями и определениями, структурами данных, затем перейдете к основным методам построения алгоритмов, неразрешимости и методам решения неразрешимых задач, и, наконец, изучите рандомизацию при проектировании алгоритмов.
Самые сложные темы объясняются на четких и простых примерах, поэтому книга может использоваться
как для самостоятельного изучения студентами, так и учеными-исследователями или профессионалами в области компьютерных технологий, которые хотят получить представление о применении тех или иных методов проектирования алгоритмов.
👉 @frontendInterview
Вы познакомитесь с базовыми аспектами построения алгоритмов, основными понятиями и определениями, структурами данных, затем перейдете к основным методам построения алгоритмов, неразрешимости и методам решения неразрешимых задач, и, наконец, изучите рандомизацию при проектировании алгоритмов.
Самые сложные темы объясняются на четких и простых примерах, поэтому книга может использоваться
как для самостоятельного изучения студентами, так и учеными-исследователями или профессионалами в области компьютерных технологий, которые хотят получить представление о применении тех или иных методов проектирования алгоритмов.
👉 @frontendInterview
❤2
List Filtering
Вам дан массив, состоящий из чисел и строк. Создайте функцию, которая отфильтрует все строки и вернет массив с числами.
Примеры:
👉 @frontendInterview
Вам дан массив, состоящий из чисел и строк. Создайте функцию, которая отфильтрует все строки и вернет массив с числами.
Примеры:
filter_list([1,2,'a','b']) == [1,2]
filter_list([1,'a','b',0,15]) == [1,0,15]
filter_list([1,2,'aasf','1','123',123]) == [1,2,123]
👉 @frontendInterview
Какие минусы у React?
Несмотря на множество преимуществ, у React есть и недостатки, которые могут повлиять на выбор этой библиотеки для проекта. Вот основные из них:
Крутая кривая обучения
Для новых разработчиков React может показаться сложным из-за концепций, таких как JSX, компоненты, хуки и управление состоянием. Требуется время и усилия для освоения всех особенностей и возможностей библиотеки.
Быстрая эволюция
React и его экосистема развиваются очень быстро, часто выходят новые версии и дополнительные библиотеки. Разработчикам нужно постоянно следить за обновлениями и адаптироваться к изменениям, что может быть трудоемким.
Неисчерпывающая документация для продвинутых тем
Хотя базовая документация у React хорошая, для более сложных или специфичных задач может не хватать примеров и объяснений. Разработчики могут столкнуться с трудностями при поиске решений для нестандартных проблем.
Ограниченные возможности для SEO
Приложения на чистом React рендерятся на стороне клиента, что может ухудшить индексацию страниц поисковыми системами. Требуется дополнительная настройка, например, использование серверного рендеринга (Next.js), для улучшения SEO.
Сложность в конфигурировании и настройке
В отличие от некоторых фреймворков, React не предоставляет единого "из коробки" решения. Нужно самостоятельно выбирать и настраивать инструменты для маршрутизации, управления состоянием и сборки проекта. Это увеличивает время на первоначальную настройку и требует знаний в области различных инструментов и библиотек.
Производительность при большом количестве компонентов
При большом количестве компонентов и частых обновлениях состояния могут возникнуть проблемы с производительностью.Требуется оптимизация кода и использование таких инструментов, как мемоизация (
Пример проблемы с производительностью:
В этом примере показана оптимизация вычислений с использованием
👉 @frontendInterview
Несмотря на множество преимуществ, у React есть и недостатки, которые могут повлиять на выбор этой библиотеки для проекта. Вот основные из них:
Крутая кривая обучения
Для новых разработчиков React может показаться сложным из-за концепций, таких как JSX, компоненты, хуки и управление состоянием. Требуется время и усилия для освоения всех особенностей и возможностей библиотеки.
Быстрая эволюция
React и его экосистема развиваются очень быстро, часто выходят новые версии и дополнительные библиотеки. Разработчикам нужно постоянно следить за обновлениями и адаптироваться к изменениям, что может быть трудоемким.
Неисчерпывающая документация для продвинутых тем
Хотя базовая документация у React хорошая, для более сложных или специфичных задач может не хватать примеров и объяснений. Разработчики могут столкнуться с трудностями при поиске решений для нестандартных проблем.
Ограниченные возможности для SEO
Приложения на чистом React рендерятся на стороне клиента, что может ухудшить индексацию страниц поисковыми системами. Требуется дополнительная настройка, например, использование серверного рендеринга (Next.js), для улучшения SEO.
Сложность в конфигурировании и настройке
В отличие от некоторых фреймворков, React не предоставляет единого "из коробки" решения. Нужно самостоятельно выбирать и настраивать инструменты для маршрутизации, управления состоянием и сборки проекта. Это увеличивает время на первоначальную настройку и требует знаний в области различных инструментов и библиотек.
Производительность при большом количестве компонентов
При большом количестве компонентов и частых обновлениях состояния могут возникнуть проблемы с производительностью.Требуется оптимизация кода и использование таких инструментов, как мемоизация (
React.memo, хуки useMemo и useCallback), чтобы избежать ненужных перерисовок.Пример проблемы с производительностью:
import React, { useState, useMemo } from 'react';
function ExpensiveComponent({ num }) {
const computedValue = useMemo(() => {
let sum = 0;
for (let i = 0; i < num * 1000; i++) {
sum += i;
}
return sum;
}, [num]);
return <div>Computed Value: {computedValue}</div>;
}
function App() {
const [num, setNum] = useState(1);
return (
<div>
<button onClick={() => setNum(num + 1)}>Increase</button>
<ExpensiveComponent num={num} />
</div>
);
}
export default App;
В этом примере показана оптимизация вычислений с использованием
useMemo.👉 @frontendInterview
👍2
Каково значение свойства line-height у элемента section?
Anonymous Quiz
7%
60px
15%
40px
5%
120px
20%
80px
52%
20px
👍8