#вопросы_с_собеседований
Что такое Cross-Origin Resource Sharing (CORS)?

Cross-Origin Resource Sharing (CORS) — механизм, использующий дополнительные HTTP-заголовки, чтобы дать возможность агенту пользователя получать разрешения на доступ к выбранным ресурсам с сервера на источнике (домене), отличном от того, что сайт использует в данный момент. Говорят, что агент пользователя делает запрос с другого источника (cross-origin HTTP request), если источник текущего документа отличается от запрашиваемого ресурса доменом, протоколом или портом.

В целях безопасности браузеры ограничивают cross-origin запросы, инициируемые скриптами. Например, XMLHttpRequest и Fetch API следуют политике одного источника (same-origin policy). Это значит, что web-приложения, использующие такие API, могут запрашивать HTTP-ресурсы только с того домена, с которого были загружены, пока не будут использованы CORS-заголовки.

🕵️‍♂️ Используй дебаг как игру

Иногда кажется, что баги — это твой главный враг. На самом деле, они просто ждут, когда ты их разгадал.

👉 Совет: подходи к дебагу, как к квесту. Пиши логи на каждом этапе, рисуй схему, как данные проходят через код, или используй дебаггер, чтобы шаг за шагом отслеживать выполнение. В процессе ты не только найдёшь проблему, но и глубже поймёшь систему.


Original post link: t.me/frontendnoteschannel/4312
Forwarded and filtered by @smartfeed_bot

​Чистая архитектура фронтенд приложений.

За свою карьеру я встречал достаточно много проектов, крупных и малых, которые страдали от огромной и запутанной кодовой базы с высоким уровнем зацепления и малой связностью, непонятной структурой, в которую весьма сложно погрузиться (на онбродинг нового сотрудника может уходить до трех месяцев) и большим количеством непонятных и громоздких компонентов, которые являются god object'ами. Стоит ли говорить, что у таких проектов имеются большие проблемы с поддержкой и развитием.

Зачастую, в ответ на вопрос "почему так?" можно услышать разнообразные оправдательные ответы, которые, в основном, ссылаются на сжатые сроки, частые продуктовые изменения и первичность продукта перед качеством кодовой базы. И большая доля правды в этом есть, но, что, если я скажу, что можно усидеть сразу на нескольких стульях и от этого выиграют все, от менеджеров до разработки? И это гораздо проще, чем кажется. Естественно, универсального решения нет, но можно существенно облегчить жизнь в будущем себе или своим потомкам.

В данном цикле статей я хочу поделиться своими наблюдениями и дать советы и рекомендации, которые помогли мне и, по моему мнению, могут помочь другим разработчикам. Я не буду сразу разбирать типовые ошибки в коде или микроархитектуре, так как это лишь маленькие точки на радаре.

👉 @seniorFront

​В чём разница в работе eventloop на сервере и в браузере?

Это механизм, используемый для обработки и выполнения асинхронных операций. Он позволяет JavaScript выполнять неблокирующие операции, несмотря на то, что JavaScript является однопоточным. Хотя принципы работы Event Loop в браузере и на сервере (например, в Node.js) схожи, есть некоторые важные различия в их реализации и окружении.

Event Loop в браузере
В браузере Event Loop отвечает за обработку событий, выполнение асинхронного кода и обновление пользовательского интерфейса.

DOM и рендеринг
Браузер должен обновлять и перерисовывать пользовательский интерфейс. Это включает в себя обработку изменений в DOM и применение стилей. Рендеринг обычно происходит между итерациями Event Loop.

Очередь макрозадач
Включает такие задачи, как обработка пользовательских событий (нажатие кнопок, ввод текста), setTimeout, setInterval, сетевые запросы (XHR, fetch) и другие. Эти задачи обрабатываются в порядке их поступления.

Очередь микрозадач
Включает такие задачи, как промисы (Promise), MutationObserver. Микрозадачи выполняются перед макрозадачами в рамках одной итерации Event Loop.

UI события
Браузер должен обрабатывать события, связанные с пользовательским интерфейсом, такие как рендеринг и взаимодействие с пользователем.

Event Loop в Node.js
Node.js, как серверная платформа, использует Event Loop для обработки асинхронных операций, таких как I/O, таймеры и сетевые запросы.

Фазы Event Loop
Node.js Event Loop состоит из нескольких фаз, каждая из которых обрабатывает определённые типы задач: timers, I/O callbacks, idle, poll, check, и close callbacks.

- Timers - Эта фаза обрабатывает колбэки от setTimeout и setInterval.
- I/O callbacks - Обрабатывает почти все колбэки от асинхронных операций ввода-вывода, за исключением close callbacks, таймеров и setImmediate.
- Poll Извлекает новые I/O события; выполняет I/O-колбэки (почти все, за исключением тех, которые закроют сервер); и если ничего не происходит, ждет в этой фазе.
- Check - Обрабатывает колбэки от setImmediate.
- Close callbacks - Обрабатывает колбэки от закрытия всех I/O операций.
- Microtasks (process.nextTick и Promises) - Выполняются после каждой фазы Event Loop, перед переходом к следующей фазе

Различия

Окружение
В браузере Event Loop управляет как асинхронными задачами, так и обновлением пользовательского интерфейса. В Node.js Event Loop больше ориентирован на обработку I/O операций и серверных задач.

Фазы Event Loop
В браузере Event Loop менее детализирован по фазам по сравнению с Node.js. В Node.js Event Loop разделён на более детализированные фазы для обработки различных типов асинхронных задач.

Микрозадачи
И в браузере, и в Node.js микрозадачи выполняются перед макрозадачами, но реализация и использование могут слегка отличаться.

Рендеринг
В браузере Event Loop включает в себя шаги, связанные с рендерингом и обновлением DOM. В Node.js этого аспекта нет, так как он работает на сервере и не имеет дела с рендерингом пользовательского интерфейса.

👉 @seniorFront

Обзор 10 приемов JavaScript для эффективного программирования

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

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

Рассмотрим пример форматирования валюты:
let num = 100;

let RupeeFormatter = new Intl.NumberFormat("en-IN",
{style: "currency", currency: "INR"})

let RupeeFormatted = RupeeFormatter.format(num);

console.log(RupeeFormatted)
// ₹100

let USDFormatter = new Intl.NumberFormat("en-IN",
{style: "currency", currency: "USD"})

let USDFormatted = USDFormatter.format(num)

console.log(USDFormatted)
// $100

2. Оператор ??
Оператор ?? присваивает переменной значение по умолчанию, если она null или undefined.

Используйте данный оператор, если сомневаетесь в существовании у объекта того или иного свойства. Если свойство отсутствует, переменной присваивается значение по умолчанию.

Пример:
let user = {}

let name = user.name ?? "Anonymous"

console.log(name)
// "Anonymous"

3. Object.fromEntries()
Метод Object.fromEntries() преобразует массив пар “ключ-значение” в объект.

Возьмем следующий массив и создадим из него объект, как показано ниже:
let arr = [["name", "Alice"], ["age", 25]]

let obj = Object.fromEntries(arr);

console.log(obj)
// {name: "Alice", age: 25}

4. Array.flat()
Метод Array.flat() преобразует вложенный массив в один единственный.

Поскольку вложенными массивами сложно управлять, то данный метод помогает уменьшать их вложенность.

Пример:
let arr = [1, [2, [3, [4]]]];

let flat = arr.flat(Infinity)

console.log(flat)
// [1, 2, 3, 4]

5. Оператор ?
Оператор ?. обеспечивает доступ к свойствам объекта без проверки, является ли он null или undefined.

Используйте его, когда не знаете, существует ли объект или нет.

Пример:
let user = null

let age = user?.age

console.log(age)
// undefined

6. Array.reduce()
Метод Array.reduce() применяет функцию к каждому элементу массива и суммирует результат в одно значение.

Пример сложения всех чисел массива:
let arr = [1, 2, 3, 4, 5]

let sum = arr.reduce((a, b) => a + b)

console.log(sum)
// 15

7. String.repeat()
Метод String.repeat() создает новую строку, повторяя заданную строку указанное количество раз.

Пример:
let str = "js".repeat(10)

console.log(str)
// 'jsjsjsjsjsjsjsjsjsjs'

8. Array.from()
Метод Array.from() создает новый массив из массивоподобного или итерируемого объекта.

Пример:
let str = "Hello"

let arr = Array.from(str)

console.log(arr)
// ["H", "e", "l", "l", "o"]

9. Math.hypot()
Метод Math.hypot() находит квадратный корень из суммы квадратов его аргументов.

Так, сумма квадратов 3 и 4 равна 25, а квадратный корень из 25 равен 5. Следовательно, Math.hypot(3, 4) возвращает 5.

Пример:
let hyp = Math.hypot(3, 4);

console.log(hyp)
// 5

10. Object.assign()
Метод Object.assign() копирует значения всех перечисляемых собственных свойств из одного или нескольких исходных объектов в целевой объект.

Пример:
let obj1 = {a: 1, b: 2};

let obj2 = {c: 3, d: 4};

let obj3 = Object.assign(obj1, obj2)

console.log(obj3)
// {a: 1, b: 2, c: 3, d: 4}

​Почему ваш мозг нуждается в «даунтайме»: история одного разработчика

Если вы читаете эту статью на третьем часу ночного дебага, держа в руках четвёртую чашку кофе, то эта статья создана специально для вас. Как‑то ко мне за психологической помощью обратился успешный разработчик, который из‑за постоянного недосыпа довёл себя до депрессии.

Он брался за всё: ночные релизы, срочные багфиксы, работу по выходным, работу вместо сна... В какой‑то момент его мозг просто отказался работать. Он не мог вспомнить элементарные вещи, чувствовал себя абсолютно опустошённым и заметил первые признаки лёгкой депрессии: постоянное чувство усталости, потерю мотивации и интереса к задачам.

Как мы это решили
Причиной всего вышеперечисленного оказался хронический недосып. Первое, что мы сделали, это начали отслеживать его распорядок дня, записывая, сколько времени уходит на работу, отдых, еду и сон. На первый взгляд это может показаться скучным упражнением, но результаты оказались шокирующими: сну он уделял всего 4 часа в сутки — меньше, чем он тратил на чтение комментариев в чужом коде.

Через неделю юноша вернулся с электронным отчетом, где были таблицы и графики.
Вот тут началась настоящая трансформация. Мы разобрали его график, как код — построчно. Он заметил, что на бессмысленные задачи уходит уйма времени: бездумный скроллинг соцсетей, обсуждение мемов в рабочих чатах, бесконечный «еще один баг, и точно спать».

Мы начали с небольших, но значимых шагов: сначала убрали из его дня 2 часовой скроллинг соцсетей, затем заменили обсуждение мемов в рабочих чатах полноценным сном. Постепенно его распорядок стал меняться, как будто мы оптимизировали код — строка за строкой, убирая лишнее и добавляя важное.

Главное правило, которое мы внедрили: сон — это не роскошь, а необходимость. Минимум 7 часов сна, и не важно, как горят дедлайны. «Лучше выспаться и решить проблему за час, чем работать всю ночь и полдня разбираться в собственных ошибках», — эта фраза стала для него девизом.

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

👉 @seniorFront

JavaScript: Удобство или Угроза? Размышления о Приватности и Вебе

Интернет проник во все сферы жизни, вклад этой технологии в прогресс невозможно переоценить. Интернет-браузеры (Chrome, Firefox, Safari, Opera и т.д.) занимают топ среди инструментов "использования интернета", а сайты, которые посещают через эти браузеры — самый распространенный способ для обмена информацией.

Несмотря на прогрессивность, в кругу людей, которые заботятся о своей приватности и что-то смыслят в технологиях, JS пользуется дурной славой. Как правило, его отключают через специальные браузерные расширения и негодуют на онлайн-ресурсы, которые вынуждают включать JavaScript для их использования.

Сложно переоценить пользу JS, который делает сайты интерактивными, удобными и современными. В то же время опасность, которая в нем таится, обычно ускользает от внимания. Эта статья — попытка заглянуть монстру в глаза, попутно открывая глаза читателя.

👉 @seniorFront

#вопросы_с_собеседований
В чём разница между объектами Map и WeakMap?

Эти объекты ведут себя по-разному в том случае, если переменная, содержащая ссылку на объект, являющийся ключом одной из пар ключ/значение, оказывается недоступной.

После того, как завершается выполнение IIFE, у нас уже не будет доступа к объектам a и b. Поэтому сборщик мусора удаляет ключ b из weakmap и очищает память. А вот содержимое map остаётся при этом неизменным.

В результате оказывается, что объекты WeakMap позволяют сборщику мусора избавляться от тех своих записей, на ключи которых нет ссылок во внешних переменных. Объекты map хранят пары ключ/значение вне зависимости от наличия или отсутствия внешних ссылок на ключи. То же самое можно сказать и о реализации структуры данных Map с использованием обычных массивов. В WeakMap используются «слабые» ссылки на ключи. Они не препятствуют работе сборщика мусора в том случае, если на объект, используемый в роли ключа, нет других ссылок.

📊 Не игнорируй логи — они твой лучший друг

Логи часто воспринимают как шум, пока что-то не сломается. Но правильно настроенные логи — это ключ к пониманию работы системы.

👉 Совет: добавляй информативные сообщения на ключевых этапах выполнения кода. Указывай не только ошибку, но и контекст: входные данные, шаг выполнения. А ещё раз в месяц проверяй, что старые логи актуальны — это спасёт кучу времени при разборе багов.


Original post link: t.me/frontendnoteschannel/4333
Forwarded and filtered by @smartfeed_bot

🖥 Самые интересные публикации за последние дни:

• Сериализация сущностей с помощью декораторов на TypeScript

• От Web к Native с React

• Обучение детей HTML, CSS, JavaScript: обзор курса по созданию сайтов

• Как улучшить работу сайта с помощью оптимизации изображений Image Stack

• Удалёнка до того, как стала удалёнкой


Original post link: t.me/frontendnoteschannel/4337
Forwarded and filtered by @smartfeed_bot

​Как взаимодействуют frontend и backend ?

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

Архитектура взаимодействия
Фронтенд: Это часть веб-приложения, с которой взаимодействует пользователь. Она включает HTML, CSS и JavaScript, а также фреймворки и библиотеки, такие как React, Vue.js и Angular. Фронтенд отвечает за отображение данных, обработку событий и обеспечение интерактивности.

Бэкенд: Это серверная часть веб-приложения, которая управляет бизнес-логикой, обработкой данных и взаимодействием с базой данных. Бэкенд может быть написан на разных языках программирования, таких как C#, Python, Ruby, Java, PHP и других. Он включает веб-серверы, базы данных и API.

HTTP-запросы и ответы
Фронтенд и бэкенд взаимодействуют через HTTP-запросы и ответы. Фронтенд отправляет запросы на сервер (бэкенд), который обрабатывает их и отправляет ответы обратно на фронтенд.

Запрос данных:
- Фронтенд отправляет HTTP GET-запрос на сервер, чтобы получить данные.
- Бэкенд получает запрос, извлекает данные из базы данных и отправляет их обратно в виде JSON-ответа.

// Фронтенд (JavaScript с использованием Fetch API)
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data); // Обработка данных на фронтенде
  })
  .catch(error => {
    console.error('Error:', error);
  });

Отправка данных:
- Фронтенд отправляет HTTP POST-запрос на сервер с данными для создания нового ресурса.
- Бэкенд получает запрос, обрабатывает данные и сохраняет их в базе данных, затем отправляет ответ о статусе операции.

// Фронтенд (JavaScript с использованием Fetch API)
fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
})
  .then(response => response.json())
  .then(data => {
    console.log(data); // Обработка ответа на фронтенде
  })
  .catch(error => {
    console.error('Error:', error);
  });

WebSocket
Для взаимодействия в реальном времени между фронтендом и бэкендом используется WebSocket. Он позволяет устанавливать постоянное двустороннее соединение между клиентом и сервером, что полезно для приложений с обновлениями в реальном времени, таких как чаты или онлайн-игры.

// Фронтенд (JavaScript с использованием WebSocket API)
const socket = new WebSocket('ws://example.com/socket');

socket.onopen = () => {
  console.log('WebSocket is open now.');
  socket.send(JSON.stringify({ message: 'Hello Server!' }));
};

socket.onmessage = (event) => {
  console.log('Received:', event.data);
};

socket.onclose = () => {
  console.log('WebSocket is closed now.');
};

RESTful API и GraphQL

RESTful API: Это стиль архитектуры API, который использует стандартные HTTP методы (GET, POST, PUT, DELETE) для взаимодействия с ресурсами. Каждый ресурс идентифицируется уникальным URL, а данные передаются в формате JSON или XML.

GraphQL: Это язык запросов для API, который позволяет клиенту запрашивать именно те данные, которые ему нужны. В отличие от REST, где каждый ресурс имеет свой URL, в GraphQL есть единая точка доступа (endpoint), и запросы могут быть более гибкими и оптимизированными.

👉 @seniorFront

👩‍💻 Работа с датами и временем

Напишите функцию, которая принимает дату в виде строки и определяет, сколько дней прошло с начала года до этой даты. Функция должна учитывать високосные годы и возвращать корректное количество дней для любой заданной даты в формате YYYY-MM-DD.

Пример: Для даты "2024-03-01" функция должна вернуть 61, так как 2024 год является високосным и к 1 марта прошло 61 день.

Решение задачи🔽

function daysSinceYearStart(dateString) {
const date = new Date(dateString);
const startOfYear = new Date(date.getFullYear(), 0, 1);

const msPerDay = 24 * 60 * 60 * 1000;
const diffInMs = date - startOfYear;

return Math.ceil(diffInMs / msPerDay);
}

// Пример использования:
console.log(daysSinceYearStart("2024-03-01"));
// Ожидаемый результат: 61


Original post link: t.me/frontendnoteschannel/4339
Forwarded and filtered by @smartfeed_bot

​Как перестать отвлекаться по мелочам, избавиться от прокрастинации и стать продуктивнее как минимум в 2 раза?

Если ты не можешь долго сконцентрироваться на одной задаче и часто отвлекаешься на что-то другое - то эта статья специально для тебя!

Избавьтесь от перфекционизма. Он лишь замедляет работу. Не нужно быть идеалистом и стараться угодить всем подряд. Стремитесь оптимально использовать свои возможности и достигать хорошего результата. Этого достаточно, чтобы поддерживать активность и ни на что не отвлекаться.

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

Планируйте. Непонимание того, что нужно делать, часто приводит к тому, что человек вообще ничего не делает. Избежать этого очень просто – составляйте списки дел на день, задач – на месяц, целей – на год вперед. Вы удивитесь тому, насколько быстрее вы станете действовать и достигать результатов.

Учитесь отказывать. Окружающие люди и ненужные дела всегда будут вторгаться в вашу жизнь. И если вы будете каждый раз идти у них на поводу, вы рискуете всю жизнь топтаться на одном месте. Относитесь к своему времени и силам как к ценности – тогда и желания отвлекаться и соглашаться на все просто не будет.

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

Фиксируйте прогресс. Во-первых, вычеркивайте из списка дел все, что сделано, а во‑вторых, отмечайте даже самые незначительные продвижения на своем пути. Это поможет вам постоянно оставаться в тонусе и сохранять мотивацию для дальнейших действий, ведь вы будете наглядно видеть, что есть реальный результат.

👉 @seniorFront

👩‍💻 Как работает деструктуризация объектов и массивов в JavaScript?

Деструктуризация — это удобный синтаксис в JavaScript, который позволяет извлекать значения из массивов и объектов и присваивать их переменным. Это делает код более лаконичным и удобным, особенно при работе с объектами с множеством свойств.

➡️ Пример:

// Деструктуризация объекта
const user = { name: 'Alice', age: 25 };
const { name, age } = user;
console.log(name); // 'Alice'
console.log(age);  // 25

// Деструктуризация массива
const colors = ['red', 'green', 'blue'];
const [firstColor, secondColor] = colors;
console.log(firstColor);  // 'red'
console.log(secondColor); // 'green'

🗣️ Деструктуризация полезна для удобного доступа к значениям из объектов и массивов, минимизируя дублирование кода и делая его более читаемым.

🖥 Подробнее тут


Original post link: t.me/frontendnoteschannel/4342
Forwarded and filtered by @smartfeed_bot

🛠 Пиши код так, как будто завтра будешь его рефакторить

Часто думаешь: «Главное, чтобы сейчас работало, потом доработаю»? Проблема в том, что «потом» может никогда не наступить.

👉 Совет: пиши код с учётом, что через неделю или месяц придётся к нему вернуться. Разбивай на маленькие функции, выбирай понятные имена, оставляй заметки. Это сэкономит тебе время и нервы, когда всё-таки придётся с ним работать.


Original post link: t.me/frontendnoteschannel/4354
Forwarded and filtered by @smartfeed_bot

Будущее микросервисов: уйдем ли мы к монолитам 2.0

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

Автор же этой статьи предлагает не сравнивать их друг с другом, начиная очередной спор, а рассмотреть концепцию монолитов 2.0, узнать, что за ней стоит и почему компании возвращаются к упрощению.

#микросервисы


Original post link: t.me/tproger_web/5185
Forwarded and filtered by @smartfeed_bot

​В чём разница между классической функцией и стрелочной?

Классические функции (объявленные через ключевое слово function) и стрелочные функции (введённые в ES6 через => синтаксис) являются двумя способами объявления функций, но между ними есть несколько важных различий:

Синтаксис

Классическая функция:

function add(a, b) {
  return a + b;
}

Стрелочная функция:

const add = (a, b) => a + b;

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

Контекст this
В классических функциях контекст определяется тем, как функция была вызвана. В стрелочных функциях контекст наследуется из окружающего контекста (лексический контекст this), где функция была объявлена.

Пример с классической функцией:

const obj = {
  id: 42,
  counter: function() {
    setTimeout(function() {
      console.log(this.id); // this ссылается на глобальный объект или undefined в строгом режиме, а не на obj
    }, 1000);
  }
};

Пример со стрелочной функцией:

const obj = {
  id: 42,
  counter: function() {
    setTimeout(() => {
      console.log(this.id); // this корректно ссылается на obj, так как стрелочная функция наследует this из окружения
    }, 1000);
  }
};

Конструктор
Классические функции могут использоваться с помощью ключевого слова new. Стрелочные функции не могут быть использованы как конструкторы, и попытка это сделать приведет к ошибке.

Пример с классической функцией:

function Person(name) 
{
  this.name = name;
}
const person = new Person("Alice");

Попытка использовать стрелочную функцию как конструктор:

const Person = (name) => {
  this.name = name;
};
// const person = new Person("Alice"); // Ошибка: Person не является конструктором

Аргументы
В классических функциях можно использовать объект arguments, который содержит аргументы, переданные функции. В стрелочных функциях нет объекта arguments, но можно использовать оператор расширения ... для достижения аналогичного результата.

👉 @seniorFront

Как работает псевдокласс :has() в CSS

Псевдокласс :has — это мощный инструмент в CSS, который позволяет выбирать элементы, основываясь на их содержимом или дочерних элементах. Другими словами, он даёт возможность стилизовать элементы на основе контекста внутри них, чего раньше невозможно было сделать только средствами CSS.

Как это работает?

element:has(selector) выбирает элемент, который содержит определённого потомка или соответствует указанному селектору.

/* Выбрать карточки, содержащие кнопку */
.card:has(button) {
    border: 2px solid blue;
}

Здесь будут выделены только те .card, внутри которых есть <button>.

Зачем он нужен?

1. Работа с родительскими элементами. Например, стилизовать <div>, если внутри него есть конкретный элемент.

2. Условное форматирование. Например, вы можете выбрать контейнеры, в которых есть определённое состояние, например, отмеченный чекбокс.

/* Стилизовать родительский div, если внутри есть отмеченный чекбокс */
div:has(input[type="checkbox"]:checked) {
    background-color: lightgreen;
}

#простымисловами #css

​Когда пора менять работу?

Работу следует менять тогда, когда она перестаёт вести Вас вверх и в гору, и это идёт вразрез с Вашими карьерными целями. Иными словами, если Вы хотите расти профессионально, есть простой способ оценить насколько текущее место помогает это сделать.

Этот способ, или, скорее, инструмент носит акроним AIGCC.

Чтобы его запомнить, можно использовать следующую мнемонику:

Am I Growing Complacent Currently? (дословный перевод: «Становлюсь ли Я самодовольным?», смысловой перевод: «Скатился ли я в зону комфорта?»)

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

Accomplishment (достижение): описывает собственные достижения, которыми Вы гордитесь или о которых не стыдно рассказать

Impact (влияние): описывает отношение или, скорее даже, важность той работы, что была совершена; насколько она ценна

Growth / Future alignment (соответствие с собственными целями): описывает насколько полученный опыт соотносится с собственными карьерными целями и планами

Challenge (вызов): описывает наличие или отсутствие сложных задач, которые продвигают Вас вперёд

Community (сообщество): описывает Ваше отношение к коллегам, к руководству, к ценностям и целям организации

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

На скриншоте ниже, моя собственная карьерная рефлексия с использованием именно этого инструмента

Набор метрик для оценки, перечень вопросов, ответы на которые помогают оценить значение метрики за последний квартал, и, общая оценка за квартал.

Значениями метрик могут быть только «Да» и «Нет». Каждая «да» — это 20% к результату квартала.

Так вот, оценив свой карьерный путь за квартал, мы получим итоговый результат за квартал. Именно, с помощью него и можно ответить на главный вопрос этой статьи — «Когда пора менять работу?». Если результат двух последних кварталов равен 40% и ниже, то это явный сигнал о том, что, возможно, стоит поискать что‑то ещё.

👉 @seniorFront

Порты в веб-разработке: от локальной разработки до продакшена

Эта статья предназначена в первую очередь для веб-разработчиков. Я не являюсь экспертом в области сетей, администрирования или DevOps, поэтому представленный материал не углубляется в сетевые аспекты.

Из любопытства, я как то задался вопросом практического использования разных номеров портов: что они означают для разработчиков, почему используются определенные порты, и какие приложения чаще всего запускаются на них. Цель статьи — пролить немного света на эти “магические” циферки с точки зрения их прикладного применения веб-разработчиками.

👉 @seniorFront


Original post link: t.me/seniorFront/4927
Forwarded and filtered by @smartfeed_bot