Правда...

👉 @frontendInterview

​Как проверить, что поле является массивом ?

Для проверки, является ли поле массивом, можно использовать несколько методов. Самый распространенный и рекомендуемый способ — это использование метода Array.isArray(). Этот метод проверяет, является ли переданное значение массивом, и возвращает true или false.

Пример

const arr = [1, 2, 3];
const notArr = "Hello";

console.log(Array.isArray(arr)); // true
console.log(Array.isArray(notArr)); // false

Альтернативные методы

- Проверка с помощью instanceof:
Этот метод проверяет, является ли объект экземпляром конструктора Array.

      const arr = [1, 2, 3];
   const notArr = "Hello";

   console.log(arr instanceof Array); // true
   console.log(notArr instanceof Array); // false
   

- Проверка с помощью конструктора Object.prototype.toString.call():
Этот метод проверяет тип объекта, возвращаемый методом

Object.prototype.toString.

      const arr = [1, 2, 3];
   const notArr = "Hello";

   console.log(Object.prototype.toString.call(arr) === '[object Array]'); // true
   console.log(Object.prototype.toString.call(notArr) === '[object Array]'); // false

Сравнение методов

Array.isArray():
- Является самым современным и предпочтительным методом.
- Поддерживается всеми современными браузерами.
- Легко читается и понимается.

instanceof:
- Работает корректно в большинстве случаев.

  - Может давать неверные результаты, если массив создан в другом контексте (например, в iframe).

- Object.prototype.toString.call():
  - Универсальный метод для проверки различных типов объектов.
  - Меньше подвержен проблемам с контекстом, но выглядит менее читаемым по сравнению с Array.isArray().

👉 @frontendInterview

Введение в веб-разработку на языке JavaScript: учебное пособие

В учебно-методическом пособии рассматриваются фундаментальные основы и прикладные аспекты использования языка JavaScript для клиентской и серверной разработки веб-ресурсов. Проанализированы основные тенденции развития наиболее распространённого языка клиентского веб-программирования в свете внедрения новых стандартов ECMAScript.

👉 @frontendInterview

Testing 1-2-3

Напишите функцию, которая принимает массив строк и возвращает каждую строку, дополненную нужным номером
Нумерация начинается с 1. Обратите внимание на двоеточие и пробел между ними

Пример:

[] --> []
["a", "b", "c"] --> ["1: a", "2: b", "3: c"]

👉 @frontendInterview

​Что нужно сделать, чтобы поменять данные в хранилище redux?

Чтобы изменить данные, нужно выполнить несколько шагов: создать действие (action), определить редюсер (reducer), который будет обрабатывать это действие и обновлять состояние, и затем отправить действие (dispatch action) в хранилище. Рассмотрим эти шаги более подробно.

Шаги для изменения данных в хранилище:

Создание действия (action)
Это объект, который описывает, что должно произойти. Он должен содержать как минимум свойство type, которое указывает на тип действия. Дополнительно можно добавить любые данные, которые нужны для обновления состояния.

// actions.js
export const increment = () => ({
  type: 'INCREMENT',
});

export const decrement = () => ({
  type: 'DECREMENT',
});

export const setValue = (value) => ({
  type: 'SET_VALUE',
  payload: value,
});

Создание редюсера (reducer)
Это чистая функция, которая принимает текущее состояние и действие, а затем возвращает новое состояние. Редюсер должен быть чистой функцией, то есть не изменять переданные аргументы и не иметь побочных эффектов.

// reducer.js
const initialState = {
  count: 0,
};

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return {
        ...state,
        count: state.count + 1,
      };
    case 'DECREMENT':
      return {
        ...state,
        count: state.count - 1,
      };
    case 'SET_VALUE':
      return {
        ...state,
        count: action.payload,
      };
    default:
      return state;
  }
};

export default counterReducer;

Создание хранилища (store)
Создается с использованием функции createStore из библиотеки Redux. Хранилище объединяет редюсеры и обеспечивает централизованное управление состоянием.

// store.js
import { createStore } from 'redux';
import counterReducer from './reducer';

const store = createStore(counterReducer);

export default store;

Подключение Redux к React (или другому фреймворку)
Нужно подключить его через провайдер (Provider), который делает хранилище доступным для всех компонентов в дереве компонентов.

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Использование состояния и отправка действий в компонентах
Для получения состояния из хранилища и отправки действий используются хуки useSelector и useDispatch из библиотеки react-redux.

// App.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, setValue } from './actions';

const App = () => {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
      <button onClick={() => dispatch(setValue(10))}>Set to 10</button>
    </div>
  );
};

export default App;

👉 @frontendInterview

Как настроить доступ по SSH на GitHub

GitHub позволяет получить доступ к репозиториям по протоколу SSH (Secure Socket Shell). Это безопасный способ передачи данных по сети. Для того чтобы настроить доступ, добавьте свой публичный ключ на GitHub. Это делается в несколько шагов, подробно описанных в статье.

👉 @frontendInterview

🚀 С нуля до миддл+ за год с зп 275тр.

👨‍💻  Один из учеников ментора с опытом 7+ лет во фронтенде получил такой апгрейд.
На канале можно найти авторский материал и обучающую информацию как быстрее и проще устроиться на работу.

Также есть разборы заданий и помощь в прохождении собеседований. 
Чему можно обучиться?
1. Теория + Практика (JavaScript, React)
2. Усиление soft skills
3. Узнать про фишки и лайфхаки по написанию резюме и прохождению собседований

Подписывайся и получай полезный контент!

2 небанальных софт-скила для роста в IT-карьере

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

- им доверяют более сложные задачи,
- они быстрее становятся лидерами коллектива,
- их доходы растут в разы быстрее.

Почему так происходит? Что их выделяет, среди остальных? Ответ в статье.

👉 @frontendInterview

Наглядно

👉 @frontendInterview

Как развернуть строку в JS?

Есть несколько способов развернуть строку. Один из наиболее распространенных способов — это преобразование строки в массив, разворот массива и затем преобразование массива обратно в строку.

Использование методов массива split, reverse и join

function reverseString(str) {
  return str.split('').reverse().join('');
}

console.log(reverseString('hello')); // 'olleh'

Использование цикла for

function reverseString(str) {
  let reversed = '';
  for (let i = str.length - 1; i >= 0; i--) {
    reversed += str[i];
  }
  return reversed;
}

console.log(reverseString('hello')); // 'olleh'

Использование рекурсии

function reverseString(str) {
  if (str === '') {
    return '';
  } else {
    return reverseString(str.substr(1)) + str[0];
  }
}

console.log(reverseString('hello')); // 'olleh'

Использование деструктуризации и метода reduce

function reverseString(str) {
  return [...str].reduce((acc, char) => char + acc, '');
}

console.log(reverseString('hello')); // 'olleh'

Использование Array.from и reduceRight

function reverseString(str) {
  return Array.from(str).reduceRight((acc, char) => acc + char, '');
}

console.log(reverseString('hello')); // 'olleh'

👉 @frontendInterview

Practical Web Accessibility

Эта книга дополнена практическими примерами, которые вы можете использовать на своих сайтах, а также совершенно новым подходом к аудиту и улучшению доступности веб-сайтов, а также командным подходом к этому, основанным на инструментах, созданных автором и усовершенствованных на протяжении многих лет. консультант — Структура FAIR и контрольный список ACCESS. С помощью этих инструментов вы можете настроить процессы для себя и своей команды, которые значительно улучшат доступность ваших сайтов и, что немаловажно, сохранят ее такой в ​​будущем.

👉 @frontendInterview

Find the stray number

Вам дан массив целых чисел нечетной длины , в котором все они одинаковы, за исключением одного единственного числа.

Завершите метод, который принимает такой массив и возвращает это единственное другое число

Пример:

[1, 1, 2] ==> 2
[17, 17, 3, 17, 17, 17, 17] ==> 3

👉 @frontendInterview

​text-align-last

text-align-last управляет выравниванием последней строки в блоке. Также работает для строк, которые заканчиваются принудительным переносом строки (например, перед тегом <br>).

Если это свойство не задано, то выравнивание определяется правилами текущего языка (значение атрибута lang у тега <html>), либо значением свойства direction (ltr — слева направо, rtl — справа налево).

Значения:
auto — выравнивание, как и для остальных строк, кроме случая со значением justify, тогда строка будет выравниваться по тому краю, по которому принято в текущем языке (значение по умолчанию).
start — в ту же сторону, что и весь остальной текст.
end — в противоположную сторону от остального текста.
left — по левому краю.
right — по правому краю.
center — по центру.
justify — по ширине, чтобы заполнить всё пространство.

Подсказки
💡Не влияет на выравнивание остальных строк в блоке. Для этого используйте свойство text-align.
💡 Задаёт выравнивание для всех последних строк в выбранном элементе. Например, если у вас есть контейнер <div> с пятью абзацами в нём, выравнивание будет применяться к последней строке каждого из абзацев. Чтобы выровнять только последнюю строку последнего абзаца, используйте :last-child или :last-of-type.

👉 @frontendInterview

👉 @frontendInterview

​Как повернуть элементы на странице просто и быстро?

Свойство rotate используют, когда нужно повернуть элемент. Раньше для поворота нужно было использовать свойство transform со значением rotate, что не всегда было удобно. Теперь для этого есть отдельное свойство.

Поворачиваем элемент на 30 градусов вправо:

div {
  rotate: 30deg;
}

Угол поворота должен указываться в единицах измерения углов.
Если указано одно значение, то элемент будет вращаться вдоль оси z

К значению величины поворота можно добавить уточнение, по какой из трёх осей (x, y, z) применится значение. Эквивалентно rotateX(), rotateY(), rotateZ():

.element {
  rotate: x 90deg;
}

В таком формате можно указать угол наклона только по одной из осей. Не получится задать второе значение в этом же свойстве или ниже.

Можно указать собственный вектор и угол вращения в формате: 3 числа + угол. Аналогично функции rotate3d().

.element {
  rotate: 0 0 1 45deg;
}

Каждое из трёх чисел отвечает за соответсвующую ось (x, y, z). 0 значит, что вращения по этой оси не будет. Всё, что больше нуля, устанавливает точку на этой оси.
В итоге элемент будет повярнут вокруг точки на пересечении всех трёх осей.

👉 @frontendInterview