Как определить местоположение пользователя?

Geolocation API позволяет пользователю предоставлять свое местоположение web-приложению. При вызове метода navigator.geolocation.getCurrentPosition() браузер запросит разрешение на передачу данных о геолокации, в случае разрешения будет вызван первый колбэк, в случае отказа - второй.

В примере реализовано получение координат пользователя через Geolocation API и если геолокация не доступна - используется сервис определения местоположения по ip-адресу

👉 @frontendInterview

Совершенный алгоритм

Алгоритмы — это сердце и душа computer science. Без них не обойтись, они есть везде — от сетевой маршрутизации и расчетов по геномике до криптографии и машинного обучения. «Совершенный алгоритм» превратит вас в настоящего профи, который будет ставить задачи и мастерски их решать как в жизни, так и на собеседовании при приеме на работу в любую IT-компанию.

👉 @frontendInterview

Посчитать слова

Вам дана строка, состоящая из нескольких слов и символов. За слова считаются только последовательности из латинских букв, отделенных пробелами. Посчитайте количество таких слов в строке и верните результат.

Примеры:
wordCount("hello there") => 2
wordCount("I'd like to say goodbye") => 6

👉 @frontendInterview

box-sizing

CSS свойство box-sizing определяет как вычисляется общая ширина и высота элемента.

Согласно CSS размеры блока складывается из размера контента, внешних отступов, внутренних отступов и границ. Box-sizing позволяет изменить этот алгоритм, чтобы width и height задавали размеры не контента, а блока.

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

Рассмотрим пример:

 .parent{
   width: 100px;
 }
 .child{
   width: 50%;
   padding: 10px;
 }

Кажется что ширина блока .child должна быть равна 50px, но по факту ширина будет равна половине ширины родителя + левый padding + правый padding = 70px. Разумеется, можно изначально указать размер блока calc(50% - 20px), но это не всегда удобно.

Для решения этой проблемы часто используется переопределение box-sizing для всех элементов, делается это элементарно:

 *{box-sizing: border-box}

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

​Хватит использовать && для условного рендеринга в React

Как работает "&&"
Классический пример использования этого оператора в React выглядит так:
function MyComponent({ condition }) {
return (
<div>
<h1>Title</h1>
{condition && <ConditionalComponent />}
</div>
);
}

Если condition возвращает значение true, <ConditionalComponent /> рендерится, а если false, <ConditionalComponent /> не рендерится.

Почему не надо использовать “&&”
В случае выше, если condition оценен как true или false, ты получаешь то, на что рассчитывал — <ConditionalComponent /> или что он не будет отрендерен. Все пока нормально. Но, если condition не будет оценен как булево значение, это может вызвать проблемы.

Например:
- если condition возвращает 0, 0 будет отображен в UI
- если condition вернет undefined, ты получишь ошибку "Uncaught Error: Error(...): Nothing was returned from render..."

Что использовать вместо “&&”
Чтобы избежать отображения в UI чего-то неожиданного, что может сломать разметку, вроде 0, используй тернарный оператор:
condition ? <ConditionalComponent /> : null;

👉 @frontendInterview

Бесплатное обучение дизайну с нуля. Вместе сделаем портфолио из 4+ работ с личной поддержкой от наставника.

Что вы получите?
— Фидбэк (мощный разбор всех ДЗ от куратора)
— Тусовка (личный кабинет с уроками + живой чат)
— Портфолио и экзамен (упакуем по урокам и проверим)
— Мастер-класс "как заработать на дизайне" и найти клиента

🔥 Будем делать: веб-дизайн, графический дизайн, анимацию интерфейсов.

→ Начать обучение бесплатно

Программа бесплатного курса:
— Обучение по Figma с нуля и 4+ дз с личным разбором
— Изучение основ дизайна (контент, сетки, композиция т.д.)
— Создание анимации интерфейса
— Все о профессии и доходе дизайнера (поиск клиентов и реальный доход)

👉 Первый урок уже сегодня, кликайте сюда и забирайте все бонусы

👉 @frontendInterview

CSS background

CSS3 предоставляет возможность указать несколько фонов для блока одной строкой с помощью короткой записи которая объединяет свойства background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size, и background-attachment.

 
background
   url(url.jpg) center / 50% no-repeat, 
   url(url.noscript) top 100% / contain fixed repeat-x,
   linear-gradient(to bottom, #000 0%, #0000 100%),
   #ccc

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

👉 @frontendInterview

Learning TypeScript (2022)

Вы узнаете:
- Преимущества TypeScript и общие характеристики его системы типов
- Почему и как TypeScript полезен поверх JavaScript
- Как информировать свою систему типов с помощью аннотаций типов, предназначенных только для разработчиков
- Как TypeScript анализирует и понимает код, чтобы помочь вам дополнить существующие модели разработки
- Как TypeScript помогает работать с массивами, классами, функциями, объектами и другими важными встроенными конструкциями JavaScript

👉 @frontendInterview

Object extend

Создайте функцию, которая принимает несколько объектов в качестве параметров и возвращает новый объект со всеми свойствами из входных объектов.

Примеры:
extend( {a: 1, b: 2}, {c: 3} )
// should === {a: 1, b: 2, c: 3}

extend( {a: 1, b: 2}, {c: 3}, {d: 4} )
// should === {a: 1, b: 2, c: 3, d: 4}

extend( {a: 1, b: 2}, {a: 3, c: 3} )
// should === {a: 1, b: 2, c: 3}

👉 @frontendInterview

Object.freeze и Object.seal в JavaScript.

Object.seal()
1. Предотвращает добавление и / или удаление свойств из запечатанного объекта; использование delete вернет false

2. Делает каждое существующее свойство неконфигурируемым: они не могут быть преобразованы из «дескрипторов данных» в «дескрипторы доступа» (и наоборот), и никакой атрибут дескрипторов доступа не может быть изменен вообще (тогда как дескрипторы данных могут изменить свой writable атрибут, и их value атрибут, если writeable === true).

3. Может выдавать TypeError при попытке изменить значение самого запечатанного объекта (чаще всего в строгом режиме )

Object.freeze()
Делает всё то же самое что и Object.seal плюс предотвращает изменение любых существующих свойств.

👉 @frontendInterview

Оператор void в JavaScript

Я полагал, что мне знакомы все операторы JavaScript до тех пор пока не увидел оператор void, который, как оказалось, присутствует в JS с 1996-го года. Его поддерживают все браузеры, работает он довольно просто. Вот что пишут об этом на MDN:

Оператор void вычисляет переданное выражение и возвращает undefined.

Этот оператор позволяет, например, использовать альтернативную форму конструирования IIFE:

 void function iife() {  
   console.log('hello');
 }();

 // это – то же самое, что и...

 (function iife() {
    console.log('hello');
 })()

По поводу void можно сделать лишь одно замечание, которое заключается в том, что вычисление выражения это… void (undefined)!
const word = void function iife() {
return 'hello';
}();

// word имеет значение "undefined"

const word = (function iife() {
return 'hello';
})();

// word имеет значение "hello"

👉 @frontendInterview