Расскажите про относительные единицы измерения в CSS

В CSS3 были добавлены относительные единицы измерения, такие как vh, vw, vmin, vmax. Эти единицы вычисляются относительно размеров окна браузера.

Если вы хотите использовать высоту и ширину окна браузера, лучше воспользоваться единицами vh и vw. Например, если высота окна браузера равна 900px, то 1vh будет равен 9px. Аналогично, если ширина окна браузера равна 1600px, то 1vw будет равен 16px.

vmin и vmax определяются минимальным или максимальным значением высоты или ширины. Например, если ширина окна браузера равна 1200px, а высота 700px, то vmin будет равен 7px, а vmax - 12px.

Ищешь годный материал по front end разработке?

FrontEndDev - канал для продвинутых веб-разработчиков.

На канале найдешь свежие статьи, фишки JS и TS, туториалы по современным фреймворкам, лучшие практики разработки и многое другое.

Рекомендуем подписаться - @front_end_dev

Как выполнить условный рендеринг компонентов в React?

В некоторых случаях вам нужно будет рендерить разные компоненты в зависимости от некоторого состояния. JSX не рендерит false или undefined, поэтому вы можете использовать короткие вычисления для рендеринга определенной части компонента только при удовлетворении условия:

 const MyComponent = ({ name, address }) => (
   <div>
     <h2>{name}</h2>
     {address &&
       <p>{address}</p>
     }
   </div>
 )

Если вам требуется условие if else, тогда используйте тернарный оператор:
const MyComponent = ({ name, address }) => (
<div>
<h2>{name}</h2>
{address
? <p>{address}</p>
: <p>{'Address is not available'}</p>
}
</div>
)

​Что такое предохранители (Error Boundaries) в React?

Error boundaries- это компоненты, которые отлавливают ошибки JavaScript, возникающие в любом дочернем компоненте, сообщают об этих ошибках и отображают резервный UI.

Классовый компонент становится предохранителем при определении в нем нового метода жизненного цикла componentDidCatch(error, info) или static getDerivedStateFromError() :

 class ErrorBoundary extends React.Component {
   constructor(props) {
     super(props)
     this.state = { hasError: false }
   }

   componentDidCatch(error, info) {
     // Вы также можете отправлять ошибки в специальный сервис по их обработке
     logErrorToMyService(error, info)
   }

   static getDerivedStateFromError(error) {
      // Обновляем состояние, чтобы при следующем рендеринге использовался запасной UI
      return { hasError: true };
    }

   render() {
     if (this.state.hasError) {
       // Вы можете рендерить любой резервный интерфейс
       return <h1>{'Что-то пошло не так.'}</h1>
     }
     return this.props.children
   }
 }

После этого, предохранитель используется как обычный компонент:
<ErrorBoundary>
<MyWidget />
</ErrorBoundary>

The Road to React (2020)

При помощи книги вы можете изучить основы React.js, шаг за шагом создавая полноценное приложение на React. При создании приложения каждая глава книги знакомит вас с новой функцией или особенностью React.

Фильтрация массива

Вам дан массив, состоящий из чисел и строк. Задача проста - отфильтровать строки и вернуть массив чисел.

Примеры
filter_list([1,2,'a','b']) == [1,2]
filter_list([1,'a','b',0,15]) == [1,0,15]

TypeScript Quickly (2020)

TypeScript - это JavaScript с важным обновлением! Добавив строгую систему типов в JavaScript, TypeScript может помочь вам устранить целые категории ошибок времени выполнения. Читая книгу, вы c помощью практических примеров и проектов научитесь создавать надежные приложения под руководством опытных веб-разработчиков Якова Файна и Антона Моисеева.

Что такое ReactDOMServer?

ReactDOMServer - это объект, позволяющий рендерить компоненты в виде статической разметки (обычно, используется на node-серверах). Данный объект в основном используется при рендеринге на стороне сервера. Следующие методы могут быть использованы как на сервере, так и в браузерном окружении:

 renderToString()
 renderToStaticMarkup()

Например, вы запускаете основанный на Node веб-сервер, такой как Express, Koa или Happi, и вызываете renderToString() для рендеринга корневого элемента в виде строки, которую сервер отправляет в ответ на запрос:

// используем Express

 import { renderToString } from 'react-dom/server'
 import MyPage from './MyPage'

app.get('/', (req, res) => {
res.write('<!DOCTYPE html><html><head><noscript>My Page</noscript></head><body>')
res.write('<div id="content">')
res.write(renderToString(<MyPage/>))
res.write('</div></body></html>')
res.end()
})

👉 @frontendInterview

👉 @frontendInterview

Что такое Symbol в JavaScript?

Symbol это уникальный и неизменяемый тип данных.

Свойства символов:
При создании символам можно дать имя.

 Создаём символ id с описанием (именем) "id"
let id = Symbol("id");

Они гарантированно уникальны.

 let id1 = Symbol("id");
 let id2 = Symbol("id");

alert(id1 == id2); // false

Не преобразуются автоматически в строки.

 let id = Symbol("id");
alert(id); // TypeError: Cannot convert a Symbol value to a string

Позволяют создавать «скрытые» свойства объектов, к которым нельзя обратиться из других частей программы и перезаписать их.

 id = Symbol("id");

let user = {
  name: "Вася",
  age: 30,
  [id]: 123 // просто "id: 123" не сработает
};

Игнорируются циклом for…in

 for (let key in user) alert(key); // name, age (свойства с ключом-символом нет среди перечисленных)

👉 @frontendInterview

Regex валидатор

Вам нужно написать regex, который будет валидировать пароль по заданным критериям:

1. Длина пароля как минимум 6 символов
2. Содержит строчную букву
3. Содержит заглавную букву
3. Содержит число

👉 @frontendInterview

👉 @frontendInterview

Как использовать InnerHtml в React?

Атрибут dangerouslySetInnerHTML в React является альтернативой innerHTML. Как и последний, его использование представляет собой угрозу межсайтового скриптинга (XSS). Необходимо передать объект с ключом html и HTML-разметкой в качестве значения.

В приведенном ниже примере MyComponent использует атрибут dangerouslySetInnerHTML для определения разметки:
function createMarkup() {
return { __html: 'Первый · Второй' }
}

function MyComponent() {
return <div dangerouslySetInnerHTML={createMarkup()} />
}

👉 @frontendInterview