Обновить
256K+

JavaScript *

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

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

Детальный обзор Well-known Symbols

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


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

Символ (Symbol) — это примитивный тип данных, представленный в ECMAScript2015 (ES6), позволяющий создавать уникальные идентификаторы: const uniqueKey = Symbol('SymbolName').

Вы можете использовать символы в качестве ключей для свойств объектов. Символы, которые JavaScript обрабатывает особым образом, называются хорошо известными символами (Well-known Symbols). Эти символы используются встроенными алгоритмами JavaScript. Например, Symbol.iterator используется для перебора элементов массивов, строк. Его также можно использовать для определения собственных функций-итераторов.

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

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

В данной статье речь пойдет о хорошо известных символах с примерами их использования.
Читать дальше →

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

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

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

Google Apps Script: переносим расписание из таблицы в календарь

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

Для кого предназначена данная статья


  • Для людей, кто активно пользуется сервисом Google Calendar
  • Для людей, у которых есть файлы таблиц с расписаниями, и которые хотели бы работать с ними более продуктивно — всегда иметь ближайшие мероприятия перед глазами, получать уведомления с напоминаниями на почту или push-уведомления
  • Для людей, которым хочется быстро познакомиться с Google Apps Script, понять, что это такое, и где его можно применить

Что понадобится


  • Google-аккаунт
  • Базовые знания JavaScript
Читать дальше →

Сорта элементов (element kinds) в движке V8

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

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


Хотя в большинстве случаев данные свойства ведут себя неотличимо от любых других, движок V8, в целях оптимизации, хранит их отдельно от остальных и обрабатывает особым образом. Внутри V8 такие свойства называют элементами (elements) объекта. Довольно логично: у объектов есть свойства, доступные по имени, а у массивов есть элементы, доступные по индексу.

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

Как портировать модуль с Node на Deno

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


Я верю, что когда-нибудь Deno мог бы стать следующим стандартом после Node, как TS постепенно заменяет JS. Экосистема ноды уже достаточно разрослась, чтобы стало сложно вносить глобальные изменения в ядро, выход 15 версии тому пример. Помните, какое там ключевое изменение? Теперь unhandledRejection вместо warn будет выдавать throw, вау! На эту тему сломано много копий, но большинство обсуждений приходит к выводу что Node оказался в стагнации. И тут Райан Даль, создатель ноды, врывается на рынок со своим свежим и гибким решением: строгий подход к безопасности, новая кодовая база на TS, новые фичи… Но есть один нюанс.
Читать дальше →

JavaScript: что нас ждет в следующем году

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


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

Данная статья посвящена возможностям JavaScript, которые будут представлены в новой версии спецификации (ECMAScript 2021, ES12).

Речь пойдет о следующем:

  • String.prototype.replaceAll()
  • Promise.any()
  • WeakRefs
  • Операторы логического присваивания
  • Разделители чисел

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

Осциллограф в браузере

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

Отрисовка графиков в реальном времени




Одно время я работал в компании, которая разрабатывала бесконтактные датчики, как на фото. И при установке этих датчиков, надо было правильно сориентировать антенну (белая штука на фото). И выглядело это так: один человек на объекте, где-то в Сибири, на морозе крутит антенну, а другой в Питере, в офисе, не видит того человека, но видит графики на мониторе. И вот они как слепой с глухим пытаются поставить антенну, один по графикам, по телефону говорит, что надо антенну повернуть, а другой пытается понять в какую сторону её крутить. Звучит как бред, правда? Но так и было.

Когда я это всё увидел, понял, что получать графики надо локально и прямо здесь и сейчас наблюдать всю картину, чтобы один и тот же человек видел сигнал и крутил антенну. И понял: надо пилить веб-интерфейс для этой железки. Опыта веб-разработки ноль, значит заодно и поучимся.

Как и почему Яндекс переехал с собственного npm-репозитория на Verdaccio

Время на прочтение9 мин
Охват и читатели14K
Всем привет. Меня зовут Андрей Фримучков, я работаю в команде инфраструктуры разработки интерфейсов Яндекса. Последние несколько месяцев участвовал в запуске нового хранилища пакетов. Около года назад мы упёрлись в ограничения собственного решения и после череды экспериментов пришли к выводу, что дальше масштабироваться под растущие нагрузки не получится.

Нужно было искать что-то новое. Выбор пал на опенсорсное решение под названием Verdaccio. Это может показаться странным, потому что им чаще пользуются небольшие компании. Скажу честно, настроить работу оптимально и внести необходимые доработки было непросто, но интересно. И стоило того. А теперь — обо всём по порядку.

Как пакеты хранились раньше?


Хорошая практика при разработке на JS — хранить внутренние пакеты в собственном репозитории и сохранять копии внешних пакетов. Это снижает зависимость от внешнего npm и позволяет ограничить выходы во внешнюю сеть в системах сборки. Исторически Яндекс использовал своё решение для хранения внутренних пакетов. Долгое время оно всех устраивало, но компания росла. Росли нагрузки, репозиторий стало сложно масштабировать и поддерживать. Например, при регламентных работах в датацентрах приходилось вручную переключать мастер у CouchDB. Схема выглядела следующим образом:


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

Современный стартовый HTML-шаблон

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


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

Позвольте представить вам мой новый проект — современный стартовый HTML-шаблон.

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

  • Все meta и link-теги (общие, Microsoft, Facebook, Twitter, IOS, Android, структурированные данные — Schema.org и JSON-LD, а также парочка тегов, связанных с безопасностью)
  • Пример использования HTML5-тегов
  • Пример использования CSS3-свойств
  • Пример использования CSS-модулей
  • Пример использования JavaScript-модулей
  • Файл «manifest.json»
  • Сервис-воркер общего назначения (сначала кэш, затем сеть)
  • Файл «robots.txt»
  • Файл «sitemap.xml»
  • Файл «browserconfig.xml»
  • Файл ".gitignore"
  • Пример Express.js-сервера, устанавливающего заголовки, связанные с безопасностью и сжатием, и возвращающего файлы по запросу
  • Пример креативной страницы ошибки 404 (страница не найдена, креатив не мой)
  • и многое другое

Официальный сайт: moderntemplate.site.

Код проекта находится здесь.
Читать дальше →

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

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

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

Добро пожаловать в Angular 11

Время на прочтение6 мин
Охват и читатели15K
Специально к старту нового потока курса «Fullstack веб-разработчик на JavaScript» представляем вам обзор новой версии популярного фреймворка JavaScript — Angular. 11.0.0 версия уже доступна, и в ней есть отличные обновления, которые затрагивают всю платформу, включая сам фреймворк, библиотеку компонентов и инструменты командной строки. Давайте посмотрим, что в этом релизе.


Приятного чтения!

Разработка круговых интерфейсов. Часть 2. Перенос библиотеки с JavaScript на QML

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

Оглавление


Введение
Библиотека круговых интерфейсов v2.0
Круговая CAPTCHA
Перенос библиотеки с JavaScript на QML
Демонстрационное мобильное приложение
Заключение


Введение


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


Во-первых, вышла вторая версия библиотеки на JavaScript, в которой реализованы круговые элементы управления.


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

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

Декларативный подход в Angular

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

Когда я впервые услышал про compliant-механизмы, был весьма впечатлен. Хоть они и окружают нас в повседневности — в виде застежек рюкзака, кнопок мыши или колпачков от шампуней, — мы редко задумываемся о концепции таких устройств.

Если говорить кратко, в compliant-механизме для обеспечения его технических характеристик используют деформацию. В то время как в традиционной технике (rigid body) гибкость зачастую является негативным качеством материала, сompliant-механизмы используют ее для передачи силы и движения в нужном направлении, вместо соединений из нескольких подвижных деталей.

Узнать, к чему это я

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

Как релизить библиотеку с открытым кодом в 2020 году

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

Выпуск библиотеки — это непростая задача, но с нужными инструментами это проходит намного легче. На конференции HolyJS Ундже Ли (Eunjae Lee) показал, как можно автоматизировать процесс релиза, как сделать его асинхронным и коллаборативным.



Ниже — видео и перевод этого доклада.

Есть ли перспективы у монолитных web-приложений?

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

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

В фокусе моих интересов не гигантские web-приложения типа Gmail, Facebook, Twitter, а web-приложения, созданные на базе таких платформ, как Wordpress, Drupal, Joomla, Django, Magento и им подобным. Под катом мои субъективные мысли на этот счёт. Ничего нового - всё те же 33 буквы кириллицы и 26 букв латиницы вперемешку.

Читать далее

Все ли вы знаете о React key?

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

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


Я время от времени провожу собеседования, и когда вопрос касается React key, чаще всего я вижу недоумевающий взгляд, намекающий “Да, там и спрашивать вроде нечего?”. Если Вам кажется React key понятным и простым, тогда давайте проведем мини собеседование (данная статья является расшифровкой видео).

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

Готовим console.log() правильно

Время на прочтение7 мин
Охват и читатели22K
Специально к старту нового потока курса «Frontend-разработчик» делимся с вами полезным переводом. Автор рассказывает, как использует методы логирования в производственной среде собственного проекта и в чём именно они помогают. Кроме того, нас знакомят с платформой AppSignal, созданной, чтобы напрямую уведомлять разработчика о возникающих у пользователя исключениях в приложении. Подробности под катом.

Приятного чтения!

20 небольших, но вдохновляющих вызовов веб-разработчику

Время на прочтение7 мин
Охват и читатели22K
Специально к старту нового потока курса «Frontend-разработчик» делимся переводом подборки с 20 проектами для освоения фронтенда. Эта подборка хорошо подходит, если вы хорошо знакомы с какой-то областью разработки ПО и хотите глубже копнуть во фронтенд. Также она прекрасно подходит людям, которые не хотят начинать знакомство с фронтендом со стандартных проектов. Проекты довольно небольшие, и у каждого указан уровень сложности. С помощью этих проектов вы ознакомитесь с Tone.js — обёрткой над Web Audio, освоите необычно мягкую смену темы со светлой на темную, и наоборот, а почти в конце ждёт самое вкусное — управляемая голосом векторная графика SVG.


Приятного чтения!

Как я устал от JavaScript и создал свой собственный язык программирования

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

За свою карьеру я успел поработать со множеством языков программирования. Писал flash-игры на ActionScript 3 и Android-игры на Java, сервера на Java, Scala и NodeJS (JavaScript), скрипты на Python, веб и мобильные приложения на React (JavaScript). И на каком бы языке я не писал, меня не покидало ощущение, что синтаксис этого языка слишком многословен, полон излишеств, шума и синтаксического бойлерплейта, мешающего пониманию написанного кода.

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

Читать далее

Как анимировать элемент «details» с помощью WAAPI

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


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

В данной статье я покажу, как можно анимировать нативный элемент «details» с помощью Web Animations API.