Обновить
512K+

JavaScript *

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

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

Super Duper Secure Mode

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

Команда VR (Vulnerability Research) экспериментирует с новой функцией, которая бросает вызов некоторым общепринятым предположениям, которых придерживаются многие в коммюнити браузеров. Мы надеемся создать что-то, что изменит современные эксплойты и значительно повысит трудозатраты для злоумышленников. Меры по смягчению последствий издавна обходятся без внимания, поэтому мы стремимся получить отзывы от сообщества, чтобы создать что-то ценное и долговременное.

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

Читать далее

Умные тесты производительности своими руками

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

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

Это не так просто, как хотелось бы. С функциональными тестами всё прозрачно — тест либо проходит успешно, либо фэйлится. А в Perfomance-тесте у вас есть какая-то цифра, и непонятно — хорошая она или плохая. Если бы мы использовали инструмент типа Lighthouse, можно было выставить performance-бюджет, чтобы зафиксировать эту цифру на каком-то уровне. Но для динамической ситуации это не подходит. Расскажу, как это понять и использовать.

Читать далее

Redux Vs Vuex. Часть 2

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


Привет, друзья!


Предлагаю вашему вниманию результаты небольшого исследования, посвященного сравнению Redux и Vuex. Это вторая часть статьи, вот ссылка на первую.


Введение


Redux и Vuex — это библиотеки для управления состоянием приложений, написанных на React и Vue, соответственно. Каждая из них по-своему реализует архитектуру для создания пользовательских интерфейсов, известную под названием Flux.

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

Вышла Vue 3.2

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

Эта статья — перевод оригинальной статьи Evan You "Vue 3.2 Released!"

Мы рады объявить о выпуске Vue.js 3.2 "Quintessential Quintuplets"! Этот релиз включает в себя множество значительных новых функций и улучшений производительности и не содержит критических изменений.

Читать далее

Минимальная установка NextJS без create-next-app

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

В данной небольшой заметке я бы хотел показать, как можно достаточно быстро развернуть и настроить проект на NextJS 11

Штатным и самым быстрым способом создания проекта является использование штатной утилиты create-next-app, которая, по аналогии со всем известной CRA создаст проект за считанные секунды.

Я же хочу показать другой путь - чуть более сложный, но позволяющий (через некоторое количество ручной работы) намного лучше понять, из чего проект строится и как настраивается, как устанавливается и настраивается компилятор TypeScript и линтер ESLint.

Читать далее

Как я написал веб-синтезатор без сэмплов и зависимостей

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

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

Читать далее

Publish-Subscribe на TypeScript — уменьшаем связанность

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

Известно, что одним из признаков хорошего архитектурного дизайна является слабая связанность между отдельными модулями приложения. Достичь этого можно разными способами: Dependency Injection, с помощью паттернов проектирования Mediator, Publish-Subscribe и некоторыми другими, многие из которых так или иначе реализуют принцип инверсии зависимостей, ответственных за уменьшение связанности. Об одном из таких паттернов, а именно о Publish-Subscribe (далее PubSub) мы сегодня и поговорим. А заодно, предлагаю рассмотреть мою собственную реализацию на TypeScript, построенную на декораторах - люблю я декларативный подход, ничего тут не сделаешь.

Читать далее

Гайд по миграции с Vue 2 на Vue 3. Часть 2

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

Эта статья — перевод оригинальной статьи Andy Li из Vue Mastery "Vue 3 Migration Changes: Replace, Rename, and Remove (Pt. 2)".

Команда Vue недавно выпустила долгожданный билд миграции для Vue 3. Если вы думали об обновлении своего приложения с Vue 2 до Vue 3, это то, что вам нужно.

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

Читать далее

Дайджест свежих материалов из мира фронтенда за последнюю неделю №480 (2 — 8 августа 2021)

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

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

Инверсия зависимостей и 'import' в JS

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

В процессе обсуждения статьи "Почему я «мучаюсь» с JS" у меня сложилось понимание, что связка export / import в JS является базой для указания зависимостей между элементами кода (классами и функциями). А так как современные приложения вышли за рамки однофайловых и давно уже строятся из блоков, то выстраивание зависимостей между элементами кода имеет весомое значение. Настолько весомое, что в знаменитой аббревиатуре SOLID этому посвящена отдельная буква — D (Dependency inversion — инверсия зависимостей, не путать с Dependency injection — внедрение зависимостей).


Размышляя над тем, как связываются зависимые элементы кода в JS через export / import, я пришёл к выводу, что не все зависимости в коде es6-модулей SOLID'ных приложений можно описать инструкциями import. Излагаю свои соображения, чтобы коллеги могли указать, где я ошибаюсь, или подтвердить мои выкладки.

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

Как я в 15 лет взломал хостинг

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

Был тёплый, солнечный обед, все шло своим чередом.

Я писал колесо фортуны в интернет-магазине для сети магазинов мяса, в котором можно выиграть продукт...

Я писал колесо фортуны в интернет-магазине для сети магазинов мяса, в котором можно выиграть продукт...Я писал колесо фортуны в интернет-магазине для сети магазинов мяса, в котором можно выиграть продукт...

Читать!

JavaScript: как из Fetch сделать Axios?

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


Привет, друзья!


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


С чего все началось?


Прочитал статью Kent C. Dodds "Replace axios with a simple custom fetch wrapper", изучил несколько аналогичных утилит других разработчиков и решил, что могу сделать лучше. О том, насколько мне это удалось, судите сами.


Ссылки


Исходный код проекта находится здесь.


Обертка в виде npm-пакета — very-simple-fetch (хотел назвать пакет просто simple-fetch, но это название оказалось занято).


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


Что насчет Axios?


Наша обертка будет сильно похожа на axios. Это объясняется тем, что axios — лучший из известных мне инструментов для отправки HTTP-запросов. Он одинаково хорошо работает как в браузере, так и в Node.js. Безусловно, разработчики axios проделали большую работу. Однако в большинстве случаев нам для решения повседневных задач, связанных с разработкой веб-приложений, не требуется весь функционал, предоставляемый этим инструментом. Если в цифрах, то размер axios составляет 371 Кб, а размер very-simple-fetch — 9.33 Кб.

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

Использование типов TypeScript вместо Swagger

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

Сегодня я расскажу о том, как мы можем с помощью типов написать простое расширение для ExpressJS.

А если вы в своём приложении/приложениях используете только решения на TypeScript(JavaScript), то у вас отпадёт необходимость в Swagger.

Вообще, одно из главных преимуществ разработки серверного кода на NodeJS — это один язык программирования с Web-интерфейсом/React/Vue-Native. Это даёт возможность написать общий код в одном месте только один раз и использовать его затем везде.

Именно это мы сейчас с вами и попытаемся сделать.

Читать далее

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

Как собрать свой Lighthouse

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

Чем интенсивнее наш feature delivering, тем быстрее падает производительность. И, конечно, приходит время автоматизировать процесс слежения, чтобы просадка не дошла до прода или даже staging-окружения.

Про прод-мониторинг, оптимизацию и ручной анализ производительности легко узнать на web.dev. Но по автоматизации слежения за производительностью до того, как фичи покатятся в прод, информации не так уж много. Сегодня расскажу, как для профилирования собрать практически свой Lighthouse, чтобы проводить performance-тесты и успешно бороться с просадкой в работе команды фронтендеров.

Читать далее

Пришло время избавиться от Angular и сэкономить миллиарды долларов

Время на прочтение6 мин
Охват и читатели60K
Я знаю, что эта статья вызовет поток гневных комментариев, но… так тому и быть. Кто-то должен наконец озвучить то, о чём уже некоторое время размышляют программисты, обладающие некоторым опытом.

Я занимаюсь программированием более 20 лет, работал в некоторых из самых приличных североамериканских компаний. Вот уже несколько лет я наблюдаю за тем, что происходит в сфере разработки интерфейсов. Ситуация здесь постоянно ухудшается. В частности, я говорю о «модных технологиях», о довольно крупных фрагментах JS- и CSS-кода, претендующих на остроумное исполнение, которые вроде как должны пользоваться неистовой популярностью у толп новичков. Теперь в эти толпы включают даже и опытных разработчиков, которым полагается что-то понимать в том, чем они пользуются.



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

Каждый день мне на почту приходят вакансии. Компании всех размеров и мастей рыщут в поисках ОПЫТНЫХ Angular 4, 5, 6, 7, 8, 10, 12-разработчиков, которые как минимум 5 лет занимались разработкой и поддержкой того дурдома, который все называют «современнейшими пользовательскими интерфейсами».

Это — не нечто «современнейшее». Это — дурдом.

Несколько лет назад я был на собеседовании в EA (Electronic Arts). Там мне сказали, что компания избавляется от всех своих UI-фреймворков и возвращается к написанию кода на чистом JavaScript (речь идёт о модулях, или о том, что тот, кто работает с jQuery, назвал бы JS-плагинами). Я был удивлён и заинтригован.

Теперь о причинах подобного хода знают не только в EA, но и во всех остальных компаниях.
Читать дальше →

Как сделать магический шар на Three.js

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

Конечно же, после смерти Flash веб не превратился в простую, скучную плоскость. К старту курса по фронтенду показываем, как при помощи Three.js и технологии WebGL создать магический шар с анимацией внутри объёма. Автор статьи не только опубликовал код на CodePen для удобной демонстрации, но и добавил на страницу ползунки, чтобы вы могли экспериментировать с шаром и сразу видеть результат. В конце вы найдёте ссылку на исходный код на Github и демонстрацию не на CodePen.

Читать далее

NEST-NEXT: Best Practices — Часть 2

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

Это вторая часть статьи о применении комбинации технологий nest.js и NEXT.js. В первой части был создан и настроен проект, а также выбран способ отправки данных для SSR, в результате чего проект уже удовлетворял большинство потребностей при разработке простого сайта. В этой части можно узнать о том, как выжать максимум пользы из nest-next: Hot Module Replacement, CDN, удобный SSR и разворачивание "за слешом".

Читать далее

О ходе создания игры «Колобок» в июле

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

В июле с помощью Matter.js реализовал прыжки колобка из-под платформы и подкидывание стрелы.

Приёмы ускорения кода на JS и других языках: подборка от разработчика поиска Яндекса

Время на прочтение17 мин
Охват и читатели74K
Привет! Меня зовут Виктор Хомяков, в Яндексе я работаю над скоростью страниц поиска. Однажды мне в голову пришла идея обобщить свой опыт и систематизировать приёмы ускорения работы кода на JavaScript. То, что получилось в итоге, собрано в этом материале.

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


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

Будущее Web это HTML через WebSockets

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

Будущее веб архитектуры  программного обеспечения уже обретает формы и на этот раз server-side рендеринг (опять). Но есть кое-что новое,  а именно передача HTML по WebSocket.

Подход с использованием SPA(Single Page Appllication) и JSON API привел к тому, что многие команды разработки погрязли в бесконечных спорах о структуре данных и ошибках синхронизации между этими двумя слоями. Это увеличивает стоимость разработки, замедляет релизный цикл и сокращает время, которое можно было бы потратить на инновации.

Читать далее