Обновить
282.77

JavaScript *

Прототипно-ориентированный язык программирования

Сначала показывать
Порог рейтинга
Уровень сложности

Оптимизация производительности фронтенда. Часть 2. Event loop, layout, paint, composite

Время на прочтение11 мин
Охват и читатели81K

Ночь. Стук в дверь. Открыть. Стоят двое. "Верите ли вы в Event loop, нашу главную браузерную цепочку?" Вздохнуть. Закрыть дверь. Лечь досыпать. До начала рабочего дня еще 4 часа. А там уже ивент лупы, лейауты и прочая радость…


В первой части мы говорили о первой загрузке и работе с ресурсами. Сегодня я расскажу о второй части оптимизации производительности фронтенда. О том, что происходит с нашей страницей, когда она загружена, на что уходит процессорное время и что с этим делать. Ключевые слова: event loop, paint \ repaint, layout \ reflow, composite.


Читать дальше →

Вопросы, которые мне задавали на фронтенд-собеседованиях

Время на прочтение14 мин
Охват и читатели28K

Всем привет. В сентябре OTUS вновь запускает целую линейку курсов по JavaScript. Прямо сейчас вы можете посмотреть запись открытого урока по курсу "JavaScript Developer. Professional", а также зарегистрироваться на дни открытых дверей по курсам "React.js Developer" и "JavaScript Developer. Basic". Ну а мы традиционно делимся с вами переводом полезного материала.

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

Читать

4 рекомендации по разработке крупномасштабных проектов на Vue

Время на прочтение7 мин
Охват и читатели15K
Как известно, Vue.js — это фреймворк, основанный на JavaScript, популярность которого в последние годы стремительно растёт.

У роста популярности Vue есть множество причин. Сюда входят простота фреймворка, лёгкость его интеграции в существующие проекты, удобство работы с ним, не слишком сильные ограничения, накладываемые на Vue-приложения. Всё это, кроме того, помогает Vue конкурировать с Angular и React. На самом деле, возникает такое ощущение, что Vue, во многих отношениях, соответствует уровню других популярных фреймворков и библиотек.

Я решил узнать о том, что пишут о недостатках Vue. Занявшись поиском соответствующих материалов, я обратил внимание на то, что везде говорят о том, что Vue недостаточно хорошо подходит для разработки крупномасштабных проектов. Я же, зная Vue, могу с уверенностью говорить о том, что это неправда.



В этом материале я хочу представить вашему вниманию 4 развёрнутых рекомендации по разработке крупномасштабных Vue-проектов.
Читать дальше →

Перенос почты между серверами через интерфейс пользователя посредством IMAPSync

Время на прочтение4 мин
Охват и читатели8K

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

Процесс миграции передаем пользователю по причине запрета организацией использовать пароли от почтовых ящиков сотрудников в скрипте. Для этого разработан web-интерфейс пользователя.

Читать далее

Реализация технологии SSO на базе Node.js

Время на прочтение10 мин
Охват и читатели18K
Веб-приложения создают с использованием клиент-серверной архитектуры, применяя в качестве коммуникационного протокола HTTP. HTTP — это протокол без сохранения состояния. Каждый раз, когда браузер отправляет серверу запрос, сервер обрабатывает этот запрос независимо от других запросов и не связывает его с предыдущими или последующими запросами того же самого браузера. Это, кроме прочего, означает, что получить доступ к серверным ресурсам, которые никак не защищены, может кто угодно. Если нужно защитить от посторонних некие серверные ресурсы, это значит, что нужно как-то ограничить то, что может запрашивать у сервера браузер. То есть — нужно аутентифицировать запросы и отвечать только на те из них, которые прошли проверку, игнорируя те, которые проверку не прошли. Для аутентификации запросов нужно владеть некими сведениями о запросах, хранящимися на стороне браузера. Так как протокол HTTP не хранит состояние запросов, нам для этого нужны некие дополнительные механизмы, которые позволяют серверу и браузеру совместно управлять состоянием соединений. Среди таких механизмов можно отметить использование куки-файлов, сессий, JWT.



Если речь идёт о каком-то одном веб-проекте, то сведения о состоянии конкретного сеанса взаимодействия клиента и сервера легко поддерживать с применением аутентификации пользователя при его входе в систему. Но если такая вот самостоятельная система эволюционирует, превращаясь в несколько систем, перед разработчиком встаёт вопрос о поддержании сведений о состоянии каждой из этих отдельных систем. На практике этот вопрос выглядит так: «Придётся ли пользователю этих систем входить в каждую из них по-отдельности и так же из них выходить?».
Читать дальше →

Пишем свой CLI генерации React компонент, а может быть не только компонент, а может не только React

Время на прочтение4 мин
Охват и читатели3K

Всем привет!


В этой статье, я хочу вам рассказать о том, как так получилось, что мне пришлось писать свой CLI генерации React компонент, притом, что готовых решений достаточно много.

Читать дальше →

JavaScript: область видимости простыми словами

Время на прочтение6 мин
Охват и читатели121K
Доброго времени суток, друзья!

Область видимости — важная концепция, определяющая доступность переменных. Данная концепция лежит в основе замыканий, разделяя переменные на глобальные и локальные.

В этой статье я постараюсь простыми словами объяснить, что такое область видимости в JavaScript.
Читать дальше →

Безопасность npm-проектов, часть 1

Время на прочтение9 мин
Охват и читатели11K

Безопасность npm-проектов, часть 1


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

Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №430 (24 — 30 августа 2020)

Время на прочтение3 мин
Охват и читатели8.9K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать дальше →

Как использовать новейшие функции JavaScript в любом браузере

Время на прочтение6 мин
Охват и читатели7.3K
image

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

Транспилирование — это преобразование исходного кода, написанного на одном языке, на другой язык с сопоставимым уровнем абстракции. Следовательно, в случае JavaScript транспилятор берет синтаксис, который старые браузеры не понимают, и превращает его в синтаксис, который они понимают.
Читать дальше →

Benchmarking. Введение для начинающих

Время на прочтение8 мин
Охват и читатели16K

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


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

Читать дальше →

23 полезнейших Node.js-библиотеки, о которых стоит знать в 2020 году

Время на прочтение3 мин
Охват и читатели31K
Профессиональному Node.js-разработчику нужно быть в курсе того, что происходит в сфере пакетов, предназначенных для этой платформы. Ему нужно знать о том, что вышло свежего, и о том, какие пакеты, используемые для решения различных задач, пользуются популярностью. Дело тут в том, что разработка ПО в наши дни зависит от библиотек. Знание хороших библиотек способствует повышению производительности труда программиста и помогает ему разрабатывать качественные приложения. Сегодня мы поговорим о 23 полезных пакетах для Node.js.


Читать дальше →

Фрактальная шизофрения

Время на прочтение21 мин
Охват и читатели55K


Нет, я не болен. По крайней мере так говорит голос в моей голове. Я наркоман. Вот уже более 15 лет я сижу на игле. Употребляю много, жёстко, до обморочного состояния. Докатился до того, что в последнее время не стесняюсь ни друзей, ни жены, ни детей… Двоих детей! Не люблю бадяженый, люблю чистый, без примесей. За годы перепробовал многое, но в последнее время остановился в поисках. Забавно осознавать, что от одного и того же получаешь одновременно и боль, и радость. Мне бы в лечебку, я даже хочу, я даже знаю в какую. Знаете такие, где продолжаешь употреблять, но под присмотром?

Читать дальше →

Ближайшие события

20_20 — год, в котором подчеркивание в числовых литералах победило

Время на прочтение3 мин
Охват и читатели10K

Вдруг вы не знали, но в языке, на котором вы пишите, вы можете использовать _ в числах. Например, следующий код на PHP:


<?php

print(1_00);
print(100);

Выведет 100100 (проверить онлайн). Этот синтаксический сахар появился в Ada в 1980 году, и он имел переменный успех последние 40 лет. Но за последний год его добавили в javascript, PHP, Go, Scala и даже консервативный Erlang. Я не могу объяснить, что послужило всплеском популярности, поэтому в статье просто опишу историю разделителей в цифрах.

Читать дальше →

Сладкая жизнь, или Создание веб-приложения без написания кода

Время на прочтение7 мин
Охват и читатели7.5K

Сладкая жизнь, или Создание веб-приложения без написания кода



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

Читать дальше →

Дружим Angular с Google

Время на прочтение6 мин
Охват и читатели4.8K

Дружим Angular с Google


Google ненавидит SPA


Когда мы говорим про современные интернет магазины, мы представляем себе тяжелые для понимания серверы, рендрящие тысячи статических страничек. Причем именно эти тысячи отрендеренных страниц одна из причин почему Single Page Applications не прижились в электронной коммерции. Даже крупнейшие магазины электронной коммерции по-прежнему выглядят как куча статических страниц, для пользователя это нескончаемый цикл кликов, ожидания и перезагрузки страниц.

Читать дальше →

JavaScript, Python или Go: что лучше всего подойдёт для бэкенд-разработки в 2021 году?

Время на прочтение6 мин
Охват и читатели58K
Уже прошло почти восемь месяцев 2020 года, а технические прогнозы на этот год всё выходят и выходят. И это — несмотря на то, что очень сложно предсказать будущее в такой динамично развивающейся индустрии, как разработка программного обеспечения. Тот, кто работает в этой индустрии, видел, как технологии приходят и уходят. Иногда эти технологии проводят свою недолгую жизнь практически незаметно. Технологиям нелегко выживать в мире программирования.

Но если вспомнить прошлое, окажется, что языки программирования имеют огромную историю. В их истории было множество заметных событий, оказавших серьёзное влияние на индустрию. Например, C и Java, одни из самых старых языков программирования, до сих пор находят широкое применение. Но если поинтересоваться их популярностью, окажется, что сейчас они занимают не самые высокие позиции.



Я — программист. Мне очень нравится JavaScript (у меня с этим языком, так сказать, «вечная связь»), я пишу на этом языке уже давно. Но если немного оглядеться, то можно заметить, что в мире разработки ПО есть и другие языки. Предлагаю поразмыслить о том, что лучше использовать для серверной разработки в 2021 году: JavaScript, Python или Go. Но, прежде чем говорить о сильных сторонах каждого из этих языков, давайте взглянем на результаты некоторых исследований.
Читать дальше →

Крошечный генератор мелодий на JS — как он устроен

Время на прочтение3 мин
Охват и читатели6K
Рассказываем об инструменте ZzFXM, который пригодится разработчикам инди-игр или веб-приложений, вынужденных оперировать сильно ограниченным объемом памяти.

Также поговорим об аналогах — rFXGen, wafxr.

Читать дальше →

Изучаем Parcel — альтернативу Webpack для небольших проектов

Время на прочтение8 мин
Охват и читатели21K


Доброго времени суток, друзья!

Основное назначение сборщиков модулей или бандлеров, таких как Webpack или Parcel, состоит в том, чтобы обеспечить включение всех модулей, необходимых для работы приложения, в правильном порядке в один минифицированный (если речь идет о сборке для продакшна) скрипт, который подключается в index.html.

На самом деле сборщики, как правило, умеют оптимизировать не только JS, но и HTML, CSS-файлы, могут преобразовывать Less, Sass в CSS, TypeScript, React и Vue (JSX) в JavaScript, работать с изображениями, аудио, видео и другими форматами данных, а также предоставляют дополнительные возможности, такие как: создание карты (используемых) ресурсов или источников (source map), визуальное представление размера всего бандла и его отдельных частей (модулей, библиотек), разделение кода на части (chunks), в том числе, в целях переиспользования (например, библиотеки, которые используются в нескольких модулях, выносятся в отдельный файл и загружаются лишь раз), умная загрузка пакетов из npm (например, загрузка только русской локализации из moment.js), всевозможные плагины для решения специфичных задач и т.п.

В этом отношении лидерство, безусловно, принадлежит Вебпаку. Однако, что если мы разрабатываем проект, в котором большая часть функционала, предоставляемого этим замечательным инструментом, не нужна? Существуют ли альтернативы данной технологии, более простые в освоении и использовании? Для меня ответом на этот вопрос стал Parcel. К слову, если вы заинтересованы в изучении Вебпака, рекомендую к просмотру это видео. Мой файл с настройками Вебпака по данному туториалу находится здесь.
Читать дальше →

В TypeScript 4.0 наконец появилось то, чего я очень ждал

Время на прочтение3 мин
Охват и читатели22K
6 августа сего года Microsoft объявила о выходе релиз-кандидата TypeScript 4.0. Там появилась поддержка кортежей с маркированными элементами (Labeled Tuple Elements). А это — именно то, появления чего я ждал в TypeScript.


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

Почему я этого ждал? Объясню это на примере разработки функции.
Читать дальше →