Советы начинающим разработчикам

#почитать

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

⏱Читать статью

Обзор наследования в JavaScript

#почитать

В JavaScript наследование является важным способом повторного использования кода и управления сложными объектными отношениями. Благодаря модели, основанной на прототипах, в JavaScript существует несколько шаблонов наследования, обладающих уникальными преимуществами. Давайте рассмотрим эти техники и поймём, когда какая из них наиболее эффективна.

⏱Читать статью

Разворачиваем микрофронты на Next.js

#почитать

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

⏱Читать статью

Простой интернет-магазин на HTML, CSS, JS с отправкой данных на почту

#почитать

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

⏱Читать статью

▫️Собеседование сеньора фронтендера

#посмотреть

Вопросы на собеседование по React, javascript, frontend.

⏱Смотреть на YouTube ⏱️1 час

Веб-приложения будущего: что нужно знать о WebAssembly

#почитать

Часто при разговоре о веб-разработке на ум приходят JavaScript и различные фреймворки. Но что, если бы веб-приложения могли запускаться с той же производительностью, что и нативные, а разработчики могли бы писать их на Rust, C++ или Go? Вот тут-то на сцену и выходит WebAssembly (Wasm) — инструмент, который позволяет взглянуть на веб-разработку иначе. Он открывает возможности для выполнения сложных вычислений, запуска игр, виртуальных машин и приложений для анализа данных прямо в браузере. Все это — с высокой производительностью и кроссплатформенностью, от настольных компьютеров до мобильных устройств.

⏱Читать статью

Алгебраические эффекты на Javascript

#почитать

Первоначально в этой статье я хотел рассказать об интересном подходе к построению программ, описанному в книге Sandy Maguire, Algebra-Driven Design. Подход позволяет строить программы на основе абстрактных математических структур и законов. Это позволяет разработать обобщенные подходы к их созданию и тестированию. Но потом я понял, что в этом мало смысла без объяснения, почему такой подход в принципе имеет право на существование. В книге для примеров используется Haskell - ленивый, чистый функциональный язык, имеющий мало отношения к языкам, которые широко применяются на практике. Распространено мнение, что приемы, используемые в Haskell, существуют в основном для преодоления его же недостатков и в других языках не нужны. Например, про монады пишут, что это оторванная от реальной жизни абстракция, которую не встретить в повседневной работе. Нет ничего более далекого от истины.

⏱Читать статью

Работа с куки-файлами хуже сапёрного дела

#почитать

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

⏱Читать статью

От первого байта до конверсии: большой гайд по ускорению сайта

#почитать

Быстрый сайт - что-то очень очевидное и простое - сайт загружается быстро и не зависает. “3 секунды ожидания и вы начинаете терять пользователей” - пожалуй это правило слышал любой веб-разработчик. Но это правило лишь вершина айсберга - как в вопросе причин потери клиентов, так и в реальном результате.

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

⏱Читать статью

Интерактивные метки на изображении JS

#почитать

Хочу поделиться своим скриптом, который позволяет создавать адаптивные изображения с интерактивными метками.
Скрипт по умолчанию поддерживает до 50 меток на изображении.

⏱Читать статью

Липкие заголовки и полновысотные элементы: сложная комбинация

#почитать

Липкое (sticky) позиционирование - одна из тех функций CSS, которая довольно чувствительна и может быть сведена на нет множеством факторов. И вот один из этих факторов, который стоит добавить в ваш мысленный каталог: липкие элементы плохо работают, если им приходится вместе с другими элементами формировать общую высоту, например, 100vh. Филип Браунен объясняет, почему это происходит, и предлагает решение.
Недавно одна студентка попросила меня помочь с кажущейся простой задачей. Она работала над сайтом кофейни с липким заголовком и хотела, чтобы раздел с информацией о заведении располагался под этим заголовком и занимал оставшееся вертикальное пространство в окне просмотра.
Кажется, это должно быть довольно просто, не так ли? Я был уверен (читай: самоуверен), что решение этой задачи займёт всего пару минут, но оказалось, что она гораздо сложнее, чем я предполагал.

⏱Читать статью

Способы разделения длительных задач в JavaScript

#почитать

Легко "уничтожить" пользовательский опыт, позволив длительной дорогой задаче захватить основной поток (main thread). Неважно, насколько сложным является приложение, цикл событий может выполнять только одну задачу за раз. Пока выполняется одна задача, другие ждут своей очереди. Как правило, задача выполняется настолько быстро, что пользователь ничего не замечает. Но так бывает не всегда.

⏱Читать статью

Генераторы в JavaScript: yield, синтаксис, примеры

#почитать

Генераторы – это мощная и гибкая функция в JavaScript, которая позволяет управлять выполнением кода и возвращать значения поэтапно. Они отличаются от обычных функций тем, что их выполнение можно приостанавливать и возобновлять в любое время. Это делает генераторы особенно полезными для работы с последовательностями данных, потоками или асинхронными задачами.
Главная особенность генераторов – их способность «помнить» свое состояние между вызовами. Когда вы вызываете генератор, он не выполняется сразу целиком, как обычная функция, а возвращает специальный объект-итератор. Этот объект управляется методом next(), который каждый раз продолжает выполнение генератора до следующей точки остановки, определенной ключевым словом yield.

⏱Читать статью

▫️Собеседование React

#посмотреть

В этом видео показываю пример моего реального собеседования на позицию Senior Front-End разработчика. После данного интервью я получил оффер на 400k

⏱Смотреть на YouTube ⏱️45 минут

20 приемов TypeScript, которые должен знать каждый разработчик

#почитать

Многие разработчики знают основы TypeScript, но знание некоторых приемов может сделать ваш код более эффективным, чистым и поддерживаемым.

⏱Читать статью

Faux Containers in CSS Grids

#почитать

Containers! Where would we be without them? All our menu items and body copy and button text, all loose and adrift in our viewports… un-contained! Chaos!!
Then again, if we wrap everything in a box, our layouts become rather… boxy. A little boring, maybe?
So sometimes for emphasis, visual interest or plain ol’ fun, we’ll let certain elements break out of their container.

⏱Читать статью

AbortController в JavaScript

#почитать

AbortController в JS — инструмент, который позволяет отменять асинхронные операции в любой момент. Разберёмся, как он работает, где пригодится и какие у него есть проблемы.

⏱Читать статью

Reimagining Fluid Typography

#почитать

For many years, it has been ‘best practice’ to use relative units (especially em and rem) for sizing text. That’s great! But after playing around with my user preferences, I think we can improve on the common approaches.

⏱Читать статью

Ultimatum — еще один форк хромиума, с претензией

#почитать

Если коротко — Ultimatum уже помножил на ноль такие техники трекинга как hsts-pinning, favicons cache и вообще использование многих других кешей в трекинге. А также! Теперь можно поставить расширение с любого сайта, не только со сторов гугля, оперы или микрософта (с них кстати тоже можно — со всех!). А еще! Можно перехватывать сетевые запросы и подменять их полностью! Ну и так далее и тому подобное.

⏱Читать статью

Использование Proxy и Reflect для создания реактивных объектов в JavaScript

#почитать

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

⏱Читать статью