Антонина Листопадова  Тут есть что почитать // Фронтенд-разработчик и тимлид. Веду блог и youtube-канал о разработке, soft-skills, трудоустройстве и найме. Читаю и периодически пишу о книгах.

Мои ресурсы за февраль 2023: статьи, видео, книги, документации, учебники и т. д. + краткие описания, комментарии, мысли Техническое Технического в этом месяце было мало. А что было, многим поделиться нельзя, т. к. находится на внутренних рабочих ресурсах. CSP: script-src Google Аналитика 4 (Гугл Аналитика) npm  — перечень версий npm Slack и Microsoft Team окончательно блокируют бесплатные лицензии. Альтернатива от RUVDS  — vk Короткая заметка, что в марте этого года Slack полностью прекратит деловые отношения с клиентами из России. Плюсы и минусы HTTP Live Streaming Интенсив Iterable API, Андрей Кобец — доступ платный, поэтому оставлю ссылку на страницу с информацией о вебинаре и возможностью купить:  ссылка . Для руководителей + саморазвитие 12 советов для п

Мои ресурсы за январь 2023: статьи, видео, книги, документации, учебники и т. д. + краткие описания, комментарии, мысли Техническое Документация по БЭМ: Соглашение по именованию CSS по БЭМ HTML по БЭМ JavaScript по БЭМ Организация файловой структуры Уровни переопределения Способы изменения блока Сборка БЭМ-проекта Декларации в БЭМ Решение распространенных проблем веб-разработки с помощью БЭМ Входные данные — BEMJSON О bem-xjst Начала читать в прошлом месяце: чтобы что-то выпилить, сначала нужно понять. Знакомство с WebSocket  — YT CodeDojo Интенсив Promise API — YT Kobezzza. База в программировании Интенсив на 3+ часа, хороший. Платный продукт, поэтому ссылку прикрепляю не на интенсив, а на "где можно купить": https://taplink.cc/kobezzza.channel

Мои ресурсы за декабрь 2022: статьи, видео, книги, документации, учебники и т. д. + краткие описания, комментарии, мысли YaTalks 2022 YaTalks 2022. Lifestyle: Career and Development  — YT Яндекс Запись трека про жизнь с первого из двух дней конференции YaTalks. Смотрела в записи, как обычно на х2 и не все доклады. Все эти доклады смотрела вместе с секцией Q&A. Ниже ссылки на таймкоды докладов, которые посмотрела: 1. Из эксперта в руководители и обратно: через боль, выгорание и инсайты. Андрей Бреслав и Александр Ложечкин Мне доклад очень понравился, оставляю тут ссылку на первой из нескольких сообщений в tg-канале: скидывала туда несколько скринов и комментарии. Ссылка —  https://t.me/alistopadova/1071 2. Подходящего момента не будет: как начинать и делать в любые времена. Денис Гончаро

Мои ресурсы за ноябрь 2022: статьи, видео, книги, документации, учебники и т. д. + краткие описания, комментарии, мысли Техническое Дочитала третью чаcть учебника по JS: Лишнее место под IMG Свойство overflow Особенности свойства height в % Знаете ли вы селекторы? CSS-спрайты Правила форматирования CSS Как сделать подсказки нескольких вариантов при вводе в текстовое поле: <datalist> Custom DataList CSS Datalist element How to Display Suggestions for Input Field in HTML ? Пригодилось, когда делала админку (проект, который взяла на самозанятости в августе, будучи ещё "безработной", сейчас по выходным там доделываю всякие штуки). Например, есть текстовый инпут и мы знаем самые часто используемые значения. Вот их можно упаковать в datalist и эти варианты будут

Мои ресурсы за октябрь 2022: статьи, видео, книги, документации, учебники и т. д. + краткие описания, комментарии, мысли Техническое Интенсив по архитектуре — платный интенсив, поэтому ссылку на сам интенсив не оставляю. Но ссылку на YT канал обязательно :) Автор — Андрей Кобец, вот его YT:  Kobezzza. Курсы по программированию . React Styled Components  — YT Codevolution Плейлист из 10-ти коротеньких видео о Styled Components. MDN: Template literals (Template strings) Узнала, что оказывается функции можно вызывать и передавать параметры не с помощью скобок, а ещё и с помощью обратных кавычек `. Неожиданно. <input type="checkbox"> Node.removeChild String Ходила почитать (тут совсем немножко, но хватило) про сравнение строк и strcmp. Учебник http://learn.javasc

Мои ресурсы за сентябрь 2022: статьи, видео, книги, документации, учебники и т. д. + краткие описания, комментарии, мысли Техническое MDN parseInt() Number.prototype.toString() History.pushState() Главы учебника http://learn.javascript.ru , которые частично перечитывала перед собеседованиями: Типы данных Function Expression Методы объекта, "this" Конструктор, оператор "new" Тип данных Symbol Преобразование объектов в примитивы Методы примитивов Перебираемые объекты Map и Set Object.keys, values, entries Формат JSON, метод toJSON Рекурсия и стек Остаточные параметры и оператор расширения Замыкание Объект функции, NFE Планирование: setTimeout и setInterval Декораторы и переадресация вызова, call/apply Привязка контекста к функции Повт

Мои ресурсы за август 2022: статьи, видео, книги, документации, учебники и т. д. + краткие описания, комментарии, мысли Техническое Учебник http://learn.javascript.ru , часть 2. Браузер: документ, события, интерфейсы Изменение документа Стили и классы Размеры и прокрутка элементов Размеры и прокрутка окна Координаты Введение в браузерные события Всплытие и погружение Делегирование событий Действия браузера по умолчанию Генерация пользовательских событий Основы событий мыши Движение мыши: mouseover/out, mouseenter/leave Drag'n'Drop с событиями мыши Клавиатура: keydown и keyup События указателя Прокрутка Свойства и методы формы Фокусировка: focus/blur События: change, input, cut, copy, paste Отправка формы: событие и метод submit Страниц

Мои ресурсы за июль 2022: статьи, видео, книги, документации, учебники и т. д. + краткие описания, комментарии, мысли Техническое MDN — String.prototype.replaceAll() — CORS settings attributes — word-spacing — Регулярные выражения — <label> — Element.insertAdjacentHTML() — Element.classList — Отправка данных формы — font-display О, а вот эту статью читала пока искала каверзный баг с шрифтами. В скриншотных тестах через раз немножко падали шрифты. Всё перекопала и перегуглила. В итоге оказалось, что шрифт просто перетирала прилетающая интеграция. Но почитать всякое-разное успела)) Вообще всё в этом newsletter, что связано со шрифтами и загрузкой страницы/ресурсов, скорее всего читала именно пока занималась раскопками этого бага и попытками его починить. — О

Мои ресурсы за июнь 2022: статьи, видео, книги, документации, учебники и т. д. + краткие описания, комментарии, мысли Техническое — Как делать сортировку в JavaScript при помощи sort() — статья на medium Тут про разные кастомные сортировки. Меньше, чем ожидала, но несколько вариантов кастомных функций для сортировок. Документация по Jest: — Начало работы — Глобальные значения — Опции командной строки Jest Решала очередную алгоритмическую задачу и что-то так надоело решать их то там, то тут, потом решения сохраняются по разным углам или вовсе не сохраняю их, потому что иногда решаю в консоли браузера. Завела пока что приватный репозиторий, в котором буду складировать задачи с решениями и тестами к ним. Тесты как раз на Jest. — JavaScript: Reverse a Linked List Та самая зада

Мои ресурсы за май 2022: статьи, видео, книги, документации, учебники и т. д. + краткие описания, комментарии, мысли Техническое — Поразрядная сортировка  — wikipedia Она же radix sort. В курсе "Алгоритмы и структуры данных" (HTML Academy) упоминается этот алгоритм и даётся ссылка на эту статью. — Мой любимый алгоритм: нахождение медианы за линейное время  — habr Объяснение алгоритма нахождения медианы за O(n). Статья вошла тяжело. — mid-square method  — определение метода "середины квадрата" в англоязычном глоссарии. Ссылка из курса Алгоритмы и структуры данных. MDN: — Array.prototype.splice() — Node.childNodes — Infinity — isFinite() — scroll-behavior — Object.entries() — Error — WindowTimers.setTimeout() — aria-live Читала не целиком. Искала, за что отве

Мои ресурсы за апрель 2022: статьи, видео, книги, документации, учебники и т. д. + краткие описания, комментарии, мысли Техническое Учебник по JS: — Привязка контекста к функции — Повторяем стрелочные функции — Флаги и дескрипторы свойств — Свойства - геттеры и сеттеры — Прототипное наследование — F.prototype — Встроенные прототипы — Методы прототипов, объекты без свойства __proto__ — Класс: базовый синтаксис — Наследование классов — Статические свойства и методы Продолжаю читать учебник (и хватит его ещё на долго, особенно вместе со следующей частью). С удивлением и фейспалмом открыла, что там есть англоязычная версия. Теперь некоторые главы (самое простое) читаю только на английском, некоторые (редко используемые) только на русском, а остальное сначала на русск

Мои ресурсы за март 2022: статьи, видео, книги, документации, учебники и т. д. + краткие описания, комментарии, мысли Техническое Продолжила перечитывать учебник по JS: — Замыкание В последний день февраля прочитала, в первый день марта прорешала задачи в конце главы. Ещё все эти задачки потом прорешали на встречах по алгоритмическим задачам. — Устаревшее ключевое слово "var" — Глобальный объект — Объект функции, NFE — Синтаксис "new Function» — Планирование: setTimeout и setInterval — Декораторы и переадресация вызова, call/apply MDN: — Array.prototype.reduce() — Array.prototype.filter() — Set — object-shorthand  — правило ESLint на написание методов в объектах — CSS flexbox  — моя любимая статья о flex box на html5book. — CSS Grid  — статья на html5book В нача

Мои ресурсы за февраль 2022: статьи, видео, книги, документации, учебники и т. д. + краткие описания, комментарии, мысли Техническое / hard-skills — Рекомендации Google и ваш сайт  — статья из документации на http://developers.google.com Появилась новая фича от Google, она пока в бета-версии, тестируется на некоторых пользователях пока только на территории США. Подписка на контент. Есть основной поиск, в котором пользователь вводит запрос, а согласно этой новой функциональности пользователи смогут подписываться на контент сайтов, и у них будет кроме поиска ещё и материалы по подписке. Подключается на сайте одной строчкой, нужно указать link на rss. — An experiment in helping users and web publishers create deeper connections on Chrome  — статья на Chromium Blog Тема та же, что и в пункте выш

Заголовки пунктов — ссылки Техническое / hard-skills — Повышение конфиденциальности пользователей и удобства разработчиков с помощью расширения User-Agent Client Hints  — статья на http://web.dev http://web.dev — гугловый ресурс. Эта статья о скорых нововведениях в user agent. Если кратко, то само значение userAgent планируют ужать, а всю дополнительную информацию можно будет получать отдельно. Первой реакцией было "ААААА", потому что по нынешнему фомату огромное количество сайтов определяет какую версию отдавать: мобильную или десктопную. И как бы если при первичном запросе от браузера не будет поступать эта информация... Ну вы понимаете, трындец? Потом внимательно почитала, всё в порядке: информацию про мобильность/десктопность браузер не перестанет передавать, но это немного видоизменит

Заголовки пунктов — ссылки Техническое Спецификации метатега robots, атрибута data-nosnippet и HTTP-заголовка X-Robots-Tag — статья на http://developers.google.com . Читала не всё, выборочно про meta с name="robots". Пять книг, которые изменили мою карьеру программиста — статья на habr. Подборка книг о развитии карьеры, её организации и кое-что техническое. Пополнила список того,

Заголовки пунктов — ссылки Техническое apidock, flatten — документация по ruby)) Я, конечно, не рубист, но иногда приходится)) Антигерой CSS-разметки — свойство «display: table» — статья на htmlacademy аж 2014 года! Пошла почитать на всякий пожарный прежде чем убирать display table из ревью. Убрали. Не могу сказать, что очень хорошая статья. Ну и с 2014 уже столько всего изменилось, что использовать display table там, где семантически/визуально не таблица — ну странно. Учитывая, что есть флексы. А уж если можно обычным block сделать то же самое — table вообще хочется спрятать и не доставать)) MDN. Node.textContent — статья на mdn про метод textContent. Отличается от innerHTML тем, что парсит текст как текст, а не как html. То есть (1) более ресурсоёмкий, (2) безопаснее и (3)

Заголовки пунктов — ссылки Техническое Bringing instant page-loads to the browser through speculative prerendering — статья на http://web.dev . Про пререндеринг и префетчинг — как подсказать браузеру какие ресурсы скоро понадобятся, чтобы он мог начать грузить их слегка заранее, и потом для пользователя всё произошло быстрее, потому что часть работы браузер успел сделать заранее. Перебираемые объекты Map и Set WeakMap и WeakSet Object.keys, values, entries Деструктурирующее присваивание Big O — статья на habr. Big O notation на простых примерах. Искала статью, чтобы прислать. Одна из первых, прочитала, чтобы "быть уверенной, что скидываю". Для знакомства, думаю, очень даже нормально. Запустилась Дока — опенсорсный справочник по веб-разработке — статья на hab

Заголовки пунктов — ссылки  Фулстеки — это будущие архитекторы, а не вечные мидлы (если захотят, конечно) — статья на habr. Хочется расти и как тимлид, и вглубь фронтенд-разработки, и наращивать периферию: ruby захватить (у нас в проекте есть ruby), системы, конфиги всяческие, архитектуру... Улучшаем карму: раскручиваем гайки на Хабре — статья на habr. Ура! На хабре изменили политику кармы! Теперь я могу плюсовать статьи! Вот, кстати, мой профиль с целой одной статьёй: https://habr.com/ru/users/AntoninaList/ Как проходить техническое собеседование? — статья на habr. Мысли и советы по теме от разных разработчиков. Minimizing DOM Nodes for Performance. How to win ~200ms with simple HTML refactoring — статья на medium Code review — статья из Teamlead Roadmap. Добавила е

Заголовки пунктов — ссылки Техническое (JS, Webpack) JavaScript Продолжаю перечитывать учебник по JavaScript, в августе перечитала: Полифилы Объекты Копирование объектов и ссылки Тут решила записать себе задачку для стажёров/джунов: написать функцию, которая делает глубокое клонирование объекта. Мне нравится практика раз в 2 недели уединяться и решать алгоритмическую задачу. Не слишком часто, чтобы на длинной дистанции давило и надоело, и не слишком редко, чтобы был постоянный вклад в прогресс. Сборка мусора Тут всё-таки очень грустный пример про семью для объяснения доступности объектов? Каждый раз ужасаюсь этому примеру? Методы объекта, "this" Ещё пару задачек записала? И поймала флешбек на задачку, которую мне давал наставник на стажировке)) Конструкторы, создание об

Заголовки пунктов — ссылки Первый пост в таком формате ? Тут собраны мои ресурсы за месяц: статьи, книги, видео. Почти у каждого есть подробности-описание. Видео пишу только публичные, приватные/платные не пишу, потому что на них либо нельзя оставить ссылку, т. к. нужен доступ, либо это будет пиратством, а я им не занимаюсь. Не собирала ссылки на материалы по типу "быстро забежала, посмотрела половину абзаца и убежала" — это странно добавлять в ресурсы) Оказалось, что собирать ресурсы в процессе не только занимает время, но ещё и интересно, повышает осознанность происходящего и мотивирует больше читать. И ещё поняла, что не так мало читаю и смотрю, как думала)) Материалы разбила по более-менее тематическим группам. Менторинг, менеджмент и всё около teamlead Как начать менторить и не поте