Full-Stack React Projects (2020)

React в сочетании с проверенными в отрасли серверными технологиями, такими как Node, Express и MongoDB, позволяет разрабатывать и развертывать надежные полнофункциональные веб-приложения. Данное обновленное второе издание фокусируется на последних версиях и соглашениях технологий в этом стеке, а также на их новых фичах, таких как хуки в React и async / await в JavaScript. В книге также раскрываются сложные темы, такие как создание веб-приложения для учебных занятий и визуализация данных в приложении для отслеживания расходов.

👉 @frontendInterview

Invert values

Вам дан массив чисел. Сделайте все положительные числа отрицательными, а отрицательные положительными и верните новый массив.

Примеры:
invert([1,2,3,4,5]) == [-1,-2,-3,-4,-5]
invert([1,-2,3,-4,5]) == [-1,2,-3,4,-5]
invert([]) == []

👉 @frontendInterview

​Какие значения можно задать CSS переменной?

CSS переменные это сущности, хранящие конкретные значения, которые можно повторно использовать в документе. Они устанавливаются с использованием custom property нотации (например. --main-color: black;) и доступны через функцию var() (например. color: var(--main-color);) .

В CSS переменную можно записать:
1. Значения в различных единицах измерения, доступных в CSS

 :root {
   --nice-padding: 20px;
 }

 article {
   padding: var(--nice-padding);
 }

2. Небольшие вычисления с помощью calc() и другие CSS функции

 {
  --image-width: 800px;
  --image-height: calc(var(--image-width) / (4/3));
 }

 img {
   width: var(--image-width);
   height: var(--image-height);
 }

3. Просто числовые значения, которые затем можно использовать, например в calc()
:root {
--magic-number: 41;
}
.crazy-box {
width: calc(var(--magic-number) * 1%);
}

4. Картинки, которые затем можно использовать в content или background
:root {
--image-from-somewhere: url(https://codersblock.com/assets/images/logo.png);
}

.a {
background-image: var(--image-from-somewhere);
}

И многое другое. Все возможные значения можно посмотреть в оригинальной статье.

👉 @frontendInterview

👉 @frontendInterview

​Как отсортировать массив в JavaScript?

Сортировка массивов в JavaScript делается через метод array.sort()

Сортировка массива в алфавитном порядке:

 var myarray=["Bob", "Bully", "Amy"]
 myarray.sort() // Массив становится ["Amy", "Bob", "Bully"]

А теперь, посмотрите на то, что случится когда мы вызовем array.sort() на массиве из чисел:

 var myarray=[7, 40, 300]
 myarray.sort() //Теперь он становится таким [300,40,7]

Хотя 7 в численном порядке меньше, чем 40 или 300, в лексикографическом порядке, семёрка больше, таким образом она оказывается правее всех в отсортированном массиве. Всегда имейте в виду, что по-дефолту array.sort() сортирует элементы в лексикографическом порядке.

array.sort() допускает дополнительные параметры в виде функций
Формат такой функции будет выглядеть таким образом:

 function sortfunction(a, b){
  //Тут сравнивается a и b, и возвращается -1, 0 или 1.
  //Если возвращается -1, то число смещается влево
  //Если вернется 1, то число смещается вправо
  //Если 0, то остается на месте
 }
 array.sort(sortfunction)

Когда такая функция передаётся в array.sort(), элементы массива сортируются, основываясь на взаимосвязи между ними.

👉 @frontendInterview

👉 @frontendInterview

Как обрезать текст в блоке после n-ной строки?

Cвойство line clamp усекает текст до определенного количества строк.
Синтаксис

 .module {
   line-clamp: [none | integer];
 }

В текущем варианте спецификации line-clamp принимает следующие значения:
1. none: не устанавливает максимальное количество строк, и в результате усечение не происходит.
2. integer: устанавливает максимальное количество строк перед усечением контента, а затем отображает многоточие (…) в конце последней строки.

Эй, а не могу я сделать это с помощью text-overflow?
text-overflow действительно имеет значение ellipsis, которое будет обрезать текст:
.truncate {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
Но text-overflow обрежет текст только в первой строке, а если вам нужно вывести две или более, можно использовать line-clamp

👉 @frontendInterview

Появился топовый курс с акцентом на практику для Middle фронтенд-разработчиков!

Тимлиды с опытом работы в Яндексе, Вконтакте, TON и Frogly научат создавать масштабные продукты уровня ведущих международных компаний. На курсе вам предстоит с нуля построить новостную ленту и превратить её в рабочий production-ready сервис.

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

За 5 месяцев обучения вы получите все знания и навыки, необходимые для работы над крупными проектами в крутой команде. Вы познакомитесь с best practices современной фронтенд-разработки, разберётесь, как устроен веб, научитесь разговаривать на одном языке с Backend, QA и DevOps специалистами и даже сможете делать их работу самостоятельно.

Записывайтесь на курс по ссылке до 16 сентября — по промокоду вы получите скидку 10%. Также на сайте доступна бесплатная демоверсия — можете начать с неё. Ждём вас!

👉 @frontendInterview

👉 @frontendInterview

JavaScript Next

Благодаря множеству новых функций, код на JavaScript теперь выглядит лаконичнее, его удобнее отлаживать и легко понимать. Эта книга представляет собой практическое руководство по новым фичам, представленным в JavaScript, начиная с версии 6 ECMAScript и заканчивая ECMAScript 9.

👉 @frontendInterview

What is between?

Вам даны два числа: a и b, причем a < b. Создайте функцию, которая вернет массив целых чисел, находящихся в промежутке между этими числами, включая их самих.

Пример:
a = 1
b = 4
--> [1, 2, 3, 4]

👉 @frontendInterview

​Как удалить элемент из массива в JavaScript?

Удаление последнего элемента массива

 const fruits = ["Яблоко", "Банан", "Апельсин"]
 const last = fruits.pop(); // удалим Апельсин (из конца)
 // ["Яблоко", "Банан"];

Удаление первого элемента массива
const first = fruits.shift(); // удалим Яблоко (из начала)
// ["Банан"];

Удаление нескольких элементов, начиная с определённого индекса
arr.splice(str) – это универсальный «швейцарский нож» для работы с массивами. Умеет всё: добавлять, удалять и заменять элементы.

 arr.splice(index[, deleteCount, elem1, ..., elemN])

Он начинает с позиции index, удаляет deleteCount элементов и вставляет elem1, ..., elemN на их место. Возвращает массив из удалённых элементов.

 let arr = ["Я", "изучаю", "JavaScript"];
 arr.splice(1, 1); // начиная с позиции 1, удалить 1 элемент
 // осталось ["Я", "JavaScript"]

Метод arr.slice намного проще, чем похожий на него arr.splice.
Его синтаксис:

 arr.slice([start], [end])

Он возвращает новый массив, в который копирует элементы, начиная с индекса start и до end (не включая end). Оба индекса start и end могут быть отрицательными. В таком случае отсчёт будет осуществляться с конца массива.
let arr = ["t", "e", "s", "t"];
alert( arr.slice(1, 3) ); // e,s (копирует с 1 до 3)
alert( arr.slice(-2) ); // s,t (копирует с -2 до конца)

👉 @frontendInterview

👉 @frontendInterview