Обновить
281.32

JavaScript *

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

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

О реализации структуры данных Map в V8

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

В стандарте ECMAScript 2015, известном как ES6, появилось много новых JavaScript-коллекций, таких, как Map, Set, WeakMap и WeakSet. Они, судя по всему, стали отличным дополнением к стандартным возможностям JavaScript. Они получили широкое применение в различных библиотеках, в приложениях, в ядре Node.js. Сегодня мы поговорим о коллекции Map, попытаемся разобраться с особенностями её реализации в V8 и сделаем некоторые практические выводы, основанные на полученных знаниях.

Стандарт ES6 не содержит чёткого указания на подход, который должен быть использован для реализации поддержки структуры данных Map. В нём лишь даны некоторые подсказки по возможным способам её реализации. Там же приведены сведения об ожидаемых от Map показателях производительности:

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

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

Я сделал свой PyPI-репозитарий с авторизацией и S3. На Nginx

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

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

Читать далее

Математика верстальщику не нужна, или Временные функции и траектории для покадровых 2D анимаций на сайтах

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


«Математика верстальщику не нужна!», — говорили они. «Арифметики за 2 класс школы хватит!», – говорили они. «Верстальщик – не программист, так что нечего себе голову забивать точными науками!», — чего только не услышишь на просторах интернета на тему нужности тех или иных знаний при разработке сайтов. И на самом деле в большинстве случаев человеку, который делает интерфейсы, и правда хватает умения складывать числа. Что-то более сложное встречается редко и обычно уже есть готовый алгоритм где-то в недрах NPM. Но сайты – понятие растяжимое, и иногда все же нужно включить голову, и разобраться в каком-то вопросе. И один из таких вопросов – это траектории в 2D анимациях.


Наблюдая за людьми, которые осваивают JS, и, в частности, покадровые анимации в вебе, я заметил, что у многих возникают сложности, когда нужно сделать движение какого-то объекта на странице по определенной траектории. И, если эта траектория не нарисована заранее заботливым дизайнером в виде path в SVG-картинке, а формулируется какими-то общими словами и ссылками на референсы из сети, или, что еще хуже, должна генерироваться на лету, то задача приводит их в полный ступор. По всей видимости все упирается в тотальное непонимание того, как получить кривую той или иной формы в рамках JS. Об этом мы сегодня и поговорим в формате своеобразной лекции о временных функциях для анимаций в самых разных их проявлениях.


Мы постараемся избежать излишней теоретизации, отдавая предпочтение картинкам и объяснению всего на пальцах, с акцентом на практическое использование в вопросах 2D анимаций на сайтах. Так что местами формулировки могут быть не совсем точными с точки зрения математики или не совсем полными, цель этой статьи – дать общее представление о том, что бывает, и откуда можно начать в случае чего.

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

Обработка ошибок в JavaScript

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

Привет, Хабр!

Тема обработки ошибок в JavaScript возникает не только у каждого новичка, но и матерого разработчика. Замечу, что тема уже довольно заезжена, поэтому я позволю себе резюмировать в кратком изложении все, что действительно эффективно и проверено в бою мною, коллегами и гуру IT.

Читать далее

SEO npm-пакета: почему важно правильно настраивать конфиг и писать тесты

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

Не так давно я опубликовал статью о CLI для React-компонент, который для меня стал первым публичным npm-пакетом. И так как мне хотелось поделиться своими наработками с как можно большим кругом разработчиков я начал изучать разные способы улучшения своей позиции в поисковой выдаче на разных специализированных сайтах. В попытках улучшить свое положение я опирался на поиск в npm, yarn и npms. И если вы сейчас откроете страничку моего пакета в любом из этих трех сайтов, то результаты там будут, к сожалению, скромными и я попробую объяснить почему и порассуждаю на эту тему.

Читать далее

Дайджест свежих материалов из мира фронтенда за последнюю неделю №431 (1 — 6 сентября 2020)

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

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

Про Shadow DOM

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

Всем привет!

Продолжаю свой цикл публикаций о группе стандартов Web Components. Моя цель - сформировать реалистичные ожидания от данного набора технологий, а также, вместе с вами, прийти к более четкому пониманию того, где их не стоит применять, и где, напротив, ничего лучше еще не придумано. На этот раз, предлагаю подробнее остановится на Shadow DOM.

Читать далее

5 библиотек для Vue.js, без которых мне не обойтись

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



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

Сравнение Blazor и JavaScript-инструментов

Время на прочтение5 мин
Охват и читатели23K
В последние несколько лет JavaScript был самым популярным и распространённым языком для разработки одностраничных приложений (Single Page Application, SPA). Это так и сегодня. Но недавно Microsoft выпустила новый фреймворк, который называется Blazor. Он позволяет писать браузерные приложения на C#.



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

Экстренная психологическая помощь | Prototyping Weekend

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

#openDevelopment #codeSaveLives
Привет Хабр! Я завершил работу над прототипом платформы, которая объединяет психологов-добровольцев и людей, нуждающихся в экстренной помощи. Это инициатива в ответ на насилие, происходящее в настоящее время в Беларуси и Ливане:
https://brmlab.cz/project/belhack/start

Читать далее

Как я искал работу в Берлине

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

Обычно рассказывают про уже свершившиеся истории о том как кто-то уже нашел работу и переехал. Я все еще в процессе, так что расскажу с чем сталкивался и к каким выводам пришел. Советы будут в самом конце.

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

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

Как улучшить SEO с помощью Next.js

Время на прочтение7 мин
Охват и читатели19K
Перевод статьи подготовлен в преддверии старта курса «JavaScript Developer. Basic».



Хотите узнать больше о курсе «JavaScript Developer. Basic»? Приглашаем вас на бесплатный вебинар, в рамках которого преподаватель курса даст ответы на все интересующие вопросы.




Есть несколько современных подходов к разработке приложений. Два самых популярных — это одностраничные приложения (SPA) и приложения с серверным рендерингом.

Одностраничные приложения отличаются высокой производительностью.Хотя после некоторых обновлений поисковый робот Google стал обрабатывать их немного иначе, результаты SEO для них все еще не впечатляют. Серверный рендеринг позволяет более эффективно оптимизировать приложения для поисковых систем, при этом их производительность в этом случае тоже будет вполне приличной.

С появлением таких замечательных JavaScript-фреймворков, как Next и Gatsby, стало появляться больше приложений с серверным рендерингом.Давайте разберемся, почему одностраничные приложения — не всегда хорошее решение, особенно в тех случаях, когда вам нужен высокий поисковый рейтинг.
Читать дальше →

Рецепты по приготовлению офлайн-приложений

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


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

Представляю вашему вниманию перевод замечательной статьи Джейка Арчибальда «Offline Cookbook», посвященной различным вариантам использования сервис-воркера (ServiceWorker API, далее по тексту — просто воркер) и интерфейса кэширования (Cache API).

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

Если не знакомы, то начните с MDN, а затем возвращайтесь. Вот еще неплохая статья про сервис-воркеры специально для визуалов.

Без дальнейших предисловий.
Читать дальше →

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

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

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

Ночь. Стук в дверь. Открыть. Стоят двое. "Верите ли вы в 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.
Читать дальше →