masha_codeca – Telegram
masha_codeca
129 subscribers
12 photos
16 videos
1 file
62 links
👋 Привет, друг!
Давайте знакомиться! Меня зовут Маша и я фронтенд разработчик. Работала в таких крупных компаниях как Epam и Yandex, а также в стартапах и веб-студиях. В общем я прошла огонь, воду, «галеры» и бигтехи. 👩‍💻И мне есть, что тебе рассказать. 😏
Download Telegram
Задача дня

Что выведет этот код?


function sayHi() {
console.log(name);
console.log(age);
var name = "John";
let age = 30;
}

sayHi();



Ответ:
undefined
Ошибка ReferenceError

Если возникли трудности, почитайте про области видимости, hoisting и разницу между var, let и const тут:
https://learn.javanoscript.ru/var

#javanoscript #собеседования
masha_codeca pinned «👋 Привет, друг! Давайте знакомиться! Меня зовут Маша и я фронтенд разработчик. Работала в таких крупных компаниях как Epam и Yandex, а также в стартапах и веб-студиях. В общем я прошла огонь, воду, «галеры» и бигтехи. 👩‍💻И мне есть, что тебе рассказать. 😏»
Channel photo updated
Задача дня

Что выведет этот код?


const arr = [1, 2, 3];

arr.push(4);
arr[0] = 0;

try {
arr = [5, 6, 7];
} catch (error) {
console.log(error.message);
}

console.log(arr);


Ответ:
TypeError: Assignment to constant variable.
[0, 2, 3, 4]

Если возникли трудности, почитайте про работу с const и изменение массивов тут:
https://learn.javanoscript.ru/array

#javanoscript #собеседования
Задача дня

Что выведет этот код?


console.log(1 + "2" + "3");
console.log(1 + +"2" + "3");
console.log(1 + -"1" + "2");
console.log("2" * "3");
console.log("4" / "2");
console.log("4" + "2");


Ответ:
"123"
"33"
"02"
6
2
"42"


Если возникли трудности, почитайте про преобразование типов в JavaScript:
https://learn.javanoscript.ru/type-conversions


Учитесь с удовольствием! 🎉

#javanoscript #собеседования
Доступность (accessibility): 5 простых советов для улучшения интерфейсов 🔼

Доступность (accessibility) помогает сделать сайт удобным для людей с ограниченными возможностями: людей с особенностями зрения, слуха, моторики. 🧑‍🦽🧑‍🦯

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

Вот 5 лёгких шагов, которые помогут сделать твои интерфейсы доступнее:

1️⃣ Используй семантический HTML 🏗

Структурируй страницу с помощью <header>, <nav>, <main>, <footer>.

А заголовки выстраивай логически: <h1> → <h2> → <h3>. Это упрощает навигацию для экранных читалок. 🛠️

2️⃣ Добавляй описания 🖼️

Для изображений: добавь понятный alt. Если картинка декоративная, оставь alt="".

Для кнопок: используй aria-label. Например:

<button aria-label="Открыть меню">☰</button>


3️⃣ Обеспечь навигацию с клавиатуры ⌨️

Убедись, что пользователи могут перемещаться по сайту с помощью Tab.

Для кастомных элементов добавляй tabindex="0". 🔑

4️⃣ Добавь фокусные состояния 🎯

Не убирай outline у кнопок и ссылок — это важно для клавиатурной навигации. Но можешь его кастомизировать:


button:focus {
outline: 2px solid #005fcc;
}


5️⃣ Проверь масштабируемость 🔍

Твой текст должен оставаться читабельным при увеличении масштаба до 200%. Используй относительные единицы (rem, em), чтобы всё выглядело гармонично.

И не забывай тестировать! 🧪
Пройди по сайту только с клавиатурой. Проверь его через Lighthouse, Axe или экранные читалки (VoiceOver, NVDA). 🎧

Доступность — это забота о пользователях и шаг к профессионализму. Сделай свои интерфейсы удобнее для всех! 💪💻

#accessibility #html #frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
Задача дня

Что выведет этот код?


const obj = {
a: 1,
b: function() {
return this.a;
}
};

const fn = obj.b;
console.log(obj.b());
console.log(fn());


Ответ:
1
undefined

Если возникли трудности, почитайте про this в JavaScript:
https://learn.javanoscript.ru/object-methods

Разбирайтесь в теме, вы супер! 💪😊

#javanoscript #собеседования
1
Какой бы мощный и функциональный ни был бекенд, без удобного и привлекательного фронта пользователь не сможет оценить все его преимущества ☝🏻
Задача дня

Что выведет этот код?


console.log(typeof null);
console.log(null == undefined);
console.log(null === undefined);
console.log(null > 0);
console.log(null >= 0);


Ответ:
"object"
true
false
false
true

Если возникли трудности, почитайте про null, undefined и сравнения в JavaScript:
https://learn.javanoscript.ru/comparison

#javanoscript #собеседования
Задача дня

Что выведет этот код?


setTimeout(() => console.log("Timeout"), 0);

Promise.resolve().then(() => console.log("Promise"));

console.log("Sync");


Ответ:
"Sync"
"Promise"
"Timeout"

Если возникли трудности, почитайте про очередь микрозадач и макрозадач в JavaScript:
https://learn.javanoscript.ru/event-loop

#javanoscript #собеседования
Задача дня

Что произойдет, если в HTML будет такой код?


<div>
<p>Параграф 1</p>
<p>Параграф 2</p>
<p>Параграф 3</p>
</div>
<noscript>
const div = document.querySelector('div');
console.log(div.innerHTML);
</noscript>


Ответ:
<p>Параграф 1</p><p>Параграф 2</p><p>Параграф 3</p>

Если возникли трудности, почитай про свойство innerHTML:
https://learn.javanoscript.ru/dom-nodes

Ты на верном пути, продолжай! 💡

#javanoscript #собеседования
Задача дня

Какой цвет будет у текста, если есть такие стили?


p {
color: blue !important;
}

.container p {
color: red;
}

p.special {
color: green;
}


<div class="container">
<p class="special">Привет!</p>
</div>


Ответ:
Синий

Если возникли трудности, почитай про !important и приоритеты в CSS:
https://developer.mozilla.org/ru/docs/Web/CSS/Specificity

Ты молодец, продолжай развиваться! 🌟💻

#javanoscript #собеседования
Задача дня

Что выведет этот код?


const promise = new Promise((resolve, reject) => {
console.log("Промис создан");
resolve("Успех!");
});

promise.then((result) => console.log(result));
console.log("Код завершён");


Ответ
Промис создан
Код завершён
Успех!

Если возникли трудности, читай про эту тему здесь:
https://learn.javanoscript.ru/promise-basics

Промисы — мощная вещь, главное понять, как они работают. Ты справишься! 🚀

#javanoscript #собеседования
Задача дня

Что выведет этот код?


const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);

console.log(sum);


Ответ
15

Если возникли трудности, читай про эту тему здесь:
https://learn.javanoscript.ru/array-methods#reduce-reduceright

#javanoscript #собеседования
Задача дня

Что выведет этот код?


try {
const num = 10 / 0;
if (!isFinite(num)) {
throw new Error("Деление на ноль!");
}
} catch (error) {
console.log(error.message);
} finally {
console.log("Операция завершена");
}


Ответ
Деление на ноль!
Операция завершена

Если возникли трудности, читай про эту тему здесь:
https://learn.javanoscript.ru/try-catch

Ошибки — это не страшно, если знаешь, как с ними справляться! 💪

#javanoscript #собеседования
Самые полезные операторы TypeScript: typeof и keyof

TypeScript даёт нам два классных оператора, которые делают работу с типами удобнее:

🔹 typeof — позволяет взять тип у уже существующей переменной:


const age = 30;
type AgeType = typeof age; // number


Теперь AgeType будет всегда таким же, как тип переменной age. Это полезно, когда нужно создать новый тип на основе уже объявленных данных.

Другой пример:


onst user = {
name: "Alice",
age: 25,
};

type UserType = typeof user;


Теперь UserType — это { name: string; age: number }, и если user изменится, тип автоматически обновится.

🔹 keyof — даёт список ключей объекта в виде строкового типа:


type UserKeys = keyof UserType; // "name" | "age"


Теперь UserKeys — это "name" | "age", и мы можем использовать это, например, в функции:


function printUserInfo(key: UserKeys) {
console.log(key);
}

printUserInfo("name"); // Работает
// printUserInfo("email"); // Ошибка, такого ключа нет


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

Итог:

typeof помогает взять существующий тип.

keyof позволяет получить список ключей объекта.

Простые, но мощные штуки, которые делают код более надёжным! 🚀
Задача дня

Вот код:


const user = {
id: 1,
name: "Alice",
isAdmin: true,
};

type UserKeys = keyof typeof user;

let key: UserKeys;


Какой тип будет у переменной key?

Ответ
"id" | "name" | "isAdmin"

Если возникли трудности, можно почитать тут:
🔗 https://www.typenoscriptlang.org/docs/handbook/2/keyof-types.html
🔗 https://www.typenoscriptlang.org/docs/handbook/2/typeof-types.html
This media is not supported in your browser
VIEW IN TELEGRAM
Кто сказал, что фастфуд только вредит?!

А если так?)
Задача дня

Что выведет в консоль этот код?


const promise = new Promise((resolve, reject) => {
console.log("Начало");
resolve("Успех");
});

promise
.then((result) => {
console.log(result);
return "Следующий then";
})
.finally(() => {
console.log("Финально");
})
.then((data) => {
console.log(data);
});

console.log("Конец");


Ответ
Начало
Конец
Успех
Финально
Следующий then

💡 Запутался? Почитай подробнее про finally:
👉 https://learn.javanoscript.ru/promise-chaining
1
Задача дня

Что выведет консоль?


const numbers = [1, 2, 3, 4, 5];

const result = numbers.map(num => {
if (num % 2 === 0) {
return num * 2;
}
});

console.log(result);


Ответ
[undefined, 4, undefined, 8, undefined]

📚 Почитать про map можно здесь:
https://learn.javanoscript.ru/array-methods#map