JavaScript заметки
8.63K subscribers
2.71K photos
4 videos
1.25K links
Регулярные заметки по практическому JavaScript. Обучащию посты позволят прокачать навыки во Frontend-разработке.

Можно почитать пока компилируется проект :)

Сотрудничество: @noname_media

Канал на бирже: telega.in/channels/notesjs/card?r=Wj7h1mbl
Download Telegram
Как frontend-разработчику получить оффер в Bigtech?

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

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

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

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


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

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


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


Реклама, ИП Галактионов Тихон Витальевич, инн: 771618975809, erid: 2W5zFJDZuwN
Архитектура серверного рендеринга для SPA

Серверный рендеринг обеспечивает быстрый и надежный доступ к контенту. В этом подходе веб-страницы формируются на сервере, а не в браузере пользователя. Это позволяет значительно ускорить время загрузки, что особенно критично для современных одностраничных приложений, известных как SPA (Single-Page Applications).

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью
👍1
Использование MutationObserver для отслеживания изменений DOM-элементов

MutationObserver позволяет отслеживать изменения в DOM-структуре и реагировать на них в коде.

#полезное
👍2
Интересные трюки HTML. Экстремальный минимализм

Мы уже много говорили про оптимизацию сайтов до минимального размера, преимущества статичного HTML, а также упаковку сайта (и веб-сервера) в портативный формат одного исполняемого файла, который нативно исполняется под любой ОС.
Но стремление к минимизации может пойти дальше, если вы хотите поместить весь сайт в адресную строку браузера. А с помощью сокращателя ссылок даже большой сайт сжимается до восьми байт. В этом случае и хостинг не нужен.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью
Использование Proxy для валидации объектов

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

#полезное
👍2
Как сгенерировать безопасный, типизированный Node.js API с использованием Prisma, TypeGraphQL и graphql-query-purifier

Создание эффективного Node.js API, обеспечивающего безопасность данных и типобезопасность, может быть сложной задачей. Это руководство демонстрирует процесс с использованием Prisma, TypeGraphQL и graphql-query-purifier.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью
Использование WebGL для создания интерактивных 3D-график в веб-приложениях

WebGL позволяет создавать интерактивные 3D-графики в веб-приложениях, и библиотека Three.js упрощает этот процесс.

#полезное
👍1
8 углубленных вопросов на собеседованиях на роль сеньора в JavaScript

В этом материале мы покажем подробное объяснение некоторых важных вопросов на интервью по JavaScript. Моя цель будет состоять в том, чтобы тщательно объяснить эти вопросы, чтобы мы могли понять лежащие в их основе концепции.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью
👍5
Использование LocalStorage для хранения данных на стороне клиента

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

#полезное
👍1
Web Accessibility в рассказе «A11Y от 0 до NaN»

Данной статьёй я планирую рассказать про интересные случаи и про то, в каких ситуациях можно оказаться, постигая новые горизонты, но не собираюсь даже пытаться заменить справочники по aria-атрибутам и эталонным примерам доступных компонентов. Стандарт W3C полон полезной информации, которая сдержанно подаёт только нужное.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью
Асинхронные HTTP-запросы с использованием современного API Fetch

В примере мы используем fetch для отправки GET-запроса к удаленному серверу. Мы обрабатываем результат запроса с использованием асинхронного синтаксиса с await и async. Если запрос выполнен успешно (HTTP-код 200), мы преобразуем полученные данные в JSON и выводим их в консоль. В противном случае, мы ловим ошибку и выводим сообщение об ошибке.

#полезное
👍1🔥1
Миграция с Webpack и react-scripts на Vite: Путь к Быстрому и Легковесному React

Я работаю фронтенд-разработчицей в IT-компании, и многие из моих проектов на протяжении долгого времени собирались с использованием Webpack. Настройка Webpack иногда бывала сложной, но в целом он справлялся с задачей сборки проектов. Однако в последнее время мои коллеги начали восторгаться новым инструментом - Vite. Они рассказывали о его легковесности, быстрой сборке и преимуществах для разработчиков React-приложений. В этой статье я поделюсь своим опытом миграции с Webpack и react-scripts на Vite. Я расскажу о причинах, по которым решила попробовать Vite, а также о том, с какими сложностями пришлось столкнуться и как они были решены.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью
Манипуляция с элементами страницы: создание, удаление и изменение HTML-элементов

Манипуляция с элементами страницы - это важная часть разработки веб-приложений, которая позволяет создавать, удалять и изменять HTML-элементы динамически с помощью JavaScript. Это особенно полезно при обновлении содержимого страницы без перезагрузки.

В данном примере мы создаем новый элемент div с текстом "Новый элемент" и классом "my-class". Затем мы добавляем этот элемент в конец body документа с помощью метода appendChild(). Мы также изменяем содержимое элемента с помощью свойства textContent и стилизуем его, устанавливая значение свойства backgroundColor.

Через 3 секунды мы удаляем элемент с помощью метода remove(). Это демонстрирует возможность удаления элементов из документа.

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

#полезное
👍31
Увеличиваем свою производительность в WebStorm / PhpStorm c помощью шаблонов

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

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью
👍2
Работа с датами и временем: использование объекта Date и библиотек для работы с датами

Работа с датами и временем является неотъемлемой частью разработки веб-приложений, особенно при работе с расписаниями, сроками и другими временными данными. Для работы с датами в JavaScript мы можем использовать встроенный объект Date, который предоставляет функциональность для работы с датами и временем.

В данном примере мы создаем объект Date с помощью конструктора new Date(), который инициализирует его текущей датой и временем.

Затем мы используем различные методы объекта Date, такие как getFullYear(), getMonth(), getDate(), getHours(), getMinutes() и getSeconds(), чтобы получить текущие значения года, месяца, дня, часа, минуты и секунды.

Мы также форматируем дату и время, используя шаблон строки и значения, полученные от объекта Date. В данном примере мы форматируем дату в формате "день.месяц.год" и время в формате "часы:минуты:секунды".

#полезное
👍1🔥1
Как добавить несколько товаров в Shopify корзину одним кликом?

Недавно я писал конфигуратор в Shopify и решил поделиться тем, как добавить несколько товаров в Шопифай корзину. Я находил не так много материалов по этому вопросу, тем более на русском языке.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью
Использование WebAssembly для выполнения высокопроизводительного кода в браузере

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

#полезное
👍1
Циклы в JavaScript

Рассмотрим циклы JavaScript, их типы, примеры использования и лучшие практики. Это поможет успешно управлять ходом выполнения программ, эффективно решая повторяющиеся задачи.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью
Использование Object Destructuring для извлечения значений из объектов

Деструктуризация объектов в JavaScript позволяет извлекать значения свойств объекта в переменные.

#полезное
👍1
Первые шаги в JavaScript: создание калькулятора

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

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью
Использование Spread Operator для объединения массивов или объектов

Spread Operator (оператор расширения) позволяет развертывать элементы массива или свойства объекта в другой массив или объект.

#полезное
1👍1