Что такое CSS переменные и как их использовать?

CSS переменные - это сущности, хранящие конкретные значения, которые можно повторно использовать в документе.
Их можно использовать, чтобы убрать дублирования в вашей таблице стилей.

Чтобы объявить переменную, вам сначала нужно решить, в какой области должна быть переменная. Если вы хотите, чтобы она была доступна глобально, просто определите её в псевдоклассе :root


 :root {
   --main-color: #ff6f69;
 }

Для получения доступа к переменной, нужно использовать функцию var() и передать имя переменной в качестве первого параметра.

 #noscript {
   color: var(--main-color); 
 }

Функция var поддерживает второй параметр - значение, которое будет использоваться, если переменная, переданная первым параметром, не определена:

 #noscript {
   color: var(--main-color, black);
 }

Вы также можете создавать переменные с локальной областью видимости.

 .alert {
   --alert-color: #ff6f69;
 }

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

Атрибут style принимает объект JavaScript со свойствами в стиле camelCase, а не в виде CSS-строки. Это обеспечивает согласованность с JavaScript-свойствами, связанными со стилями, является более эффективным и закрывает дыры в безопасности (XSS).

 const divStyle = { 
   color: 'blue',
   backgroundImage: 'url(' + imgUrl + ')'
 };

 function HelloWorldComponent() {
   return <div style={divStyle}>Привет, народ!</div>
 }

Использование атрибута style для оформления элементов не рекомендуется. В большинстве случаев для ссылки на классы, определённые во внешнем CSS, следует использовать className.

Заглушить троллей

Тролли набежали в комменты! С ними можно разобраться, удалив все гласные буквы в их сообщениях. Напишите функцию, которая будет принимать строку и возвращать обработанную строку без гласных.

Пример:
"This website is for losers LOL!" станет "Ths wbst s fr lsrs LL!".

Расскажите про относительные единицы измерения в 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