Valid Braces

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

Все входные строки будут непустыми и состоять только из круглых скобок, скобок и фигурных скобок: ()[]{}.

Что считается валидным?

Строка скобок считается валидной, если все скобки сопоставлены с правильной скобкой.

Примеры:

"(){}[]"   =>  True
"([{}])"   =>  True
"(}"       =>  False
"[(])"     =>  False
"[({})](]" =>  False

👉 @seniorFront

Краткая история JavaScript

В этом году JavaScript исполняется 30 лет.

За три десятилетия он прошел путь от забавного и непритязательного скриптового языка, созданного за 10 дней, до самого популярного языка программирования в мире. В статье — ключевые моменты истории JavaScript, которые помогут понять, как он менялся и куда идет.

👉 @seniorFront

Что такое this?

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

Контексты использования:

1. Глобальный контекст:
В глобальном контексте (вне каких-либо функций) он ссылается на глобальный объект. В браузере глобальным объектом является window, в Node.js — global.

console.log(this === window); // в браузере вернет true

2. Функции (не строгий режим):
В функциях, вызванных обычным способом (не как методы объекта), он ссылается на глобальный объект. В строгом режиме ("use strict") this будет undefined, если функция вызвана не как метод объекта.

   function show() {
      console.log(this === window); // true в браузере в нестрогом режиме
      console.log(this); // undefined в строгом режиме
    }
    show();

3. Методы объекта:
Когда функция вызывается как метод объекта, он ссылается на объект, частью которого является метод.

const obj = {
      myMethod() {
        console.log(this);
      }
    };
    obj.myMethod(); // this ссылается на obj

4. Конструкторы:
В функции-конструкторе, вызванной с new, он ссылается на вновь созданный объект.

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

5. Стрелочные функции:
Стрелочные функции не имеют собственного контекста, вместо этого они захватывают его из внешнего лексического окружения.

const obj = {
      method: function() {
        const arrowFunc = () => console.log(this);
        arrowFunc(); // this ссылается на obj
      }
    };
    obj.method();

6. Явное привязывание:
С помощью методов call, apply и bind можно явно указать контекст для функции.

function show() {
      console.log(this);
    }
    const obj = {name: "Explicit context"};
    show.call(obj); // this в show() ссылается на obj

👉 @seniorFront

Envelope Open Animation with Hearts

Свёрстано и анимировано на HTML и SCSS. Логика открытия конверта и запуска анимаций реализована в JS.

👉 @seniorFront

​Путь из разраба в лида: что я понял об ответственности

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

Усвоенные уроки

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

2. Вы — мост между разрабами и бизнесом. Лид — это не просто координатор задач, а проводник между разработчиками и бизнесом. Ваша задача — замечать проблемы раньше всех, находить компромиссы и поддерживать баланс между интересами команды и компании.

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

4. Берите на себя ответственность. Лидерство начинается с готовности принимать решения и нести за них ответственность. Иногда лучше попробовать и ошибиться, чем ждать, пока кто-то другой возьмёт инициативу.

5. Тяните за собой команду. Если кто-то буксует — помогайте. Иногда это значит просто подсказать, иногда — сходить в соседний отдел и спросить, как коллеги решали похожие задачи. Вместе вы сможете двигаться быстрее.

6. Фейлы — часть пути. Ошибки неизбежны. Главное — понять, почему так произошло, сделать выводы и двигаться дальше. Через год любой фейл превращается в байку, которую приятно вспоминать на корпоративе.

7. Делегируйте, но держите руку на пульсе. Не пытайтесь завязать всё на себе. Дайте команде проявить себя, но не отпускай задачи полностью. Контролируйте ключевые точки, чтобы вовремя заметить, если что-то идёт не так.

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

9. Проводите встречи один-на-один.
Эти беседы важны не только для фидбека по задачам, но и для построения доверия. Иногда такие разговоры помогают увидеть скрытые проблемы и лучше понять команду.

10. Не выносите фейлы на общие собрания. Ошибки лучше разбирать на личных встречах — это снижает стресс и позволяет обсуждать промахи честно и открыто. Общие митинги лучше использовать для обсуждения успехов и планов.

11. Документируйте процессы. Плохая документация кода лучше, чем ее полное отсутствие. Записывайте ключевые моменты, команды и решения — потом скажете себе за это спасибо.

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

👉 @seniorFront

Как я выполнил 1000+ заказов на фрилансе без единого негатива: что я понял за годы удалённой работы

Фриланс — это не про свободу, а про ответственность, дисциплину, прозрачность и умение выстраивать процессы. В этой статье — конкретные принципы, которые помогли мне выполнить 1000+ заказов на разных платформах, удержать 0 негативных отзывов, войти в топы рейтингов и получать более 70% повторных заказов.

👉 @seniorFront

RemindMe App Concept

Приложение - напоминалка о том, что пора выпить, реализованное на Vue.

👉 @seniorFront

Card Hover Effects

В этом видео создаётся эффект в стиле glassmorphism при наведении на карточку. Эффект накладывается при помощи CSS селектора :has().

👉 @seniorFront

Трудности удалёнщиков

👉 @seniorFront

Как frontend-разработчику получить оффер в Bigtech?

Ты уже давно в профессии, но до сих пор в компании, которая тебя не ценит. Зарплата не растёт, задачи скучные.

Хочешь сменить работу, но технические собеседования всё сложнее, а на отклики на hh только отказы и тестовые?

При этом вокруг кто-то постоянно получает офферы в Яндекс или VK, Т-Банк. Хочется стабильности, интересных задач и наконец-то попасть в сильную команду...

Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Помогаю устроиться на хорошие позиции в Bigtech и сопровождаю на испытательном сроке.

На своем канале:
👉публикую видео с решением задач, которые прямо сейчас дают крупные компании на собеседованиях
👉даю примеры по прохождению собеседований
👉разбираю резюме и докручиваю резюме подписчиков
👉И просто создаю дружелюбное, комфортное сообщество, где коллеги всегда готовы подсказать и поддержать вас

🎁В закрепе тебя ждёт подборка из 60 задач, которые сейчас дают на собеседованиях Яндекс, Т-Банк и другие крупные IT игроки.

Подписывайся и получай максимум пользы, а нас уже больше 2000 🤓: https://t.me/+rGtaoRsjfCRhMDli


Реклама, ИП Галактионов Тихон Витальевич, инн: 771618975809, erid: 2W5zFJUPnkp

Particles in space

Реализовано на canvas. При клике частицы генерируются и анимируются в JS.

👉 @seniorFront

Parallax Star background

Создано и анимировано с использованием препроцессоров Haml и Sass.

👉 @seniorFront

Animated Circular Progress Bar

В этом видео создаётся анимированная полоса загрузки на CSS и JS.

👉 @seniorFront

Monument Valley in Space

Оригинальная карточка с эффектом при наведении, реализованная на angular.

👉 @seniorFront

Merged String Checker

На собеседовании вам предстоит написать алгоритм, проверяющий, может ли строка(s), быть сформирована из двух других строк, part1 и part2.

Ограничение состоит в том, что символы в part1 и part2 должны располагаться в том же порядке, что и в s.

Пример:

'xcyc', 'xc', 'yc' —> // true
'xcyc', 'yc', 'xc' —> // true
'codewars', 'code', 'wars' —> // true
'codewars', 'cdwr', 'oeas' —> // true
'codewars', 'code', 'code' —> // false

👉 @seniorFront

Команда на одной волне: неформальные правила ИТ разработки, которые реально работают

Последние полгода у меня зрела мысль поделиться накопленным опытом нашей ИТ-команды, но подходящего повода не находилось, пока я не попал на мероприятие по «практикам прозрачных процессов». Там я снова услышал знакомую проблему — одни и те же абстрактные ответы без примеров и конкретных решений на вопросы коллег. Хотя я всего лишь рядовой участник воркшопов, а не спикер, регулярно замечаю эту тенденцию.

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

👉 @seniorFront

Зачем размещают статический контент на отдельные домены?

Статический контент – это файлы, которые не изменяются на сервере и могут кэшироваться у пользователей:
- CSS, JavaScript
- Изображения, видео
- Шрифты, иконки

Чтобы ускорить загрузку сайта и снизить нагрузку на основной сервер, статические файлы часто выносят на отдельный домен или CDN.

Зачем использовать отдельные домены для статики?

Разгрузка основного сервера
Основной сервер обрабатывает только динамический контент (например, API-запросы). Статические файлы отдаются с другого сервера быстрее

Ускорение загрузки сайта
Браузеры ограничивают количество одновременных соединений к одному домену (обычно 6-8). Если статика загружается с другого домена, браузер может скачивать больше файлов одновременно.

Кэширование и CDN
Отдельный домен можно использовать через CDN (Cloudflare, AWS S3, Vercel, Fastly). Это уменьшает задержки и ускоряет загрузку контента по всему миру

Уменьшение размера cookie
Основной сайт передает cookies при каждом запросе. Если статика загружается с отдельного домена без cookies (static.example.com), это снижает трафик

Как настроить отдельный домен для статики?

Создать поддомен для статики
Обычно статику размещают на поддомене:
static.example.com
cdn.example.com
assets.example.com

Настроить веб-сервер или CDN
Если используем NGINX:

  server {
    server_name static.example.com;
    root /var/www/static;
  }

👉 @seniorFront

Lowpoly holy space cow

Это SVG картинка, анимированная в JS.

👉 @seniorFront

​КАША в голове, КАША в коде — как навести порядок

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

Фундамент важнее фасада
Сначала разберись в основах, а потом строй "свой Instagram". Без понимания основ твой код — декорация, которая рухнет на первом вопросе.

Пиши понятный код
Назови переменные так, чтобы через неделю не гадать, что делает doIt(). Простые имена и структура спасут нервы тебе и коллегам.

Не зубри, а ищи
Не пытайся запомнить всё. Знай, что инструмент существует, и умей его найти (Google/ИИ в помощь).

Копипаст — не грех
Гуглить и копировать — норм. Главное, учись задавать вопросы чётко, а не "у меня не работает".

Уточняй проблему
Не понимаешь код? Разбей проблему на части: что именно неясно? Назови проблему — и половина уже решена.

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

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

Итог: строй фундамент, пиши просто, не бойся гуглить и экспериментировать. Тогда каша в голове превратится в порядок!

👉 @seniorFront

Роль СТО: как из разработчика вырасти в технологического лидера

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

👉 @seniorFront