NEW BOT Телеграм, страница - 737795806

masha_codeca

129 subscribers

12 photos

16 videos

1 file

62 links

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

Download Telegram

About

Blog

Apps

Platform

129 subscribers

Channel photo updated

20:12

Channel name was changed to «masha_codeca»

20:12

👋 Привет, друг!

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

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

Присоединяйся!🤗

👍7

183 viewsedited 20:52

⚡️Задача дня

Каков порядок вывода в консоль?


console.log(1);

setTimeout(() => console.log(2), 0);

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

console.log(4);

Ответ: 1 4 3 2

172 views15:06

Design System, Design Library и UI Kit: В чем разница?

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

Design Library: коллекция повторно используемых UI-компонентов (кнопки, формы, карточки и т.д.), упрощающая работу дизайнеров и разработчиков. Обычно является частью дизайн-системы и ориентирована на практическую реализацию ее руководств.

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

149 views12:38

⚡️Задача дня

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


function Foo() {}

Foo.prototype.bar = function () {
  return "Hello";
};

const instance = new Foo();

Foo.prototype.bar = function () {
  return "World";
};

console.log(instance.bar());

Ответ: World

138 views19:51

😁1🤣1

119 views17:13

#javanoscript

⚡️Задача дня
Что выведет этот код?


console.log(true || false && false);
console.log(false && true || true);
console.log(0 || "Hello" && undefined);

Ответ:

true

true

undefined

Тема: Логические операторы https://learn.javanoscript.ru/logical-operators

125 viewsedited 17:53

#алгоритмы #leetcode #javanoscript
🎯 Разбираем задачу с собеседования

https://youtu.be/hxXHYcdez34?si=FVWb90ePF4BdDRqW

20 LeetCode: Разбор задач для собеседований

💻 20. Valid Parentheses | Решение задач с LeetCode на JavaScript
👉 Ссылка на задачу: https://leetcode.com/problems/valid-parentheses
В этом видео мы разберем задачу "Валидная скобочная последовательность" с платформы LeetCode. Пошагово рассмотрим:

✅ Условия…

120 viewsedited 21:58

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

⚡️Задача дня

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


function makeCounter() {
  let count = 0;
  return function () {
    return ++count;
  };
}

const counter1 = makeCounter();
const counter2 = makeCounter();

console.log(counter1());
console.log(counter1());
console.log(counter2());

Ответ:

1
2
1

Тема: Замыкание https://learn.javanoscript.ru/closure

111 viewsedited 17:03

This media is not supported in your browser

VIEW IN TELEGRAM

Пятничные мемы😎

100 views15:35

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

⚡️Задача дня

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


function foo(a, b) {
  arguments[0] = 5;
  arguments[1] = 10;
  return a + b;
}

console.log(foo(1, 2));

Ответ: 15

Статья по теме: https://learn.javanoscript.ru/rest-parameters-spread-operator#the-arguments-variable

118 viewsedited 18:36

⚡ Задача дня

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


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 #собеседования

106 viewsedited 09:25

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

13:28

Channel photo updated

14:35

⚡ Задача дня

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


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 #собеседования

85 views09:33

⚡ Задача дня

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


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 #собеседования

80 views09:32

Доступность (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

73 views15:33

⚡ Задача дня

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


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

75 views09:34

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

64 views18:26

⚡ Задача дня

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


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 #собеседования

69 views09:20