Обновить
294.19

JavaScript *

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

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

Веб-компоненты вместо React — очередная попытка

Время на прочтение6 мин
Охват и читатели4.9K
Привет, Хабр!

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

  • DOM — это стейт. Поскольку у нас нет фреймворка, сразу забываем про функциональщину, и возвращаемся к императивному ООП. Веб-компоненты — это долгоживущие узлы DOM, инкапсулирующие свой стейт и имеющие публичное API. Они не пересоздаются, а изменяются. Значит DOM мы должны рассматривать не только как представление, но как хранилище бизнес-объектов, а значит и строить иерерхию компонентов нужно с учетом удобства их взаимодействия.
  • Взаимодействие компонентов. Компоненты могут взаимодействовать посредством прямых вызовов, обмена колбэками, или посредством восходящих / нисходящих пользовательских событий DOM. Последний способ наиболее предпочтителен, так как снижает взаимную зацепленность (coupling), и упорядочивает граф связей (см. пример ниже).
Читать дальше →

Хранилище для Веба

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


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

Представляю вашему вниманию перевод статьи «Storage for the Web» автора Pete LePage.

Существует несколько технологий для хранения данных в браузере. Какая из них лучше?

Интернет-соединение может быть плохим или вовсе отсутствовать в определенных местах. Поэтому поддержка оффлайн-режима является одной из ключевых особенностей прогрессивных веб-приложений. Даже при наличии высокоскоростного подключения разумно применять кэширование и другие техники для улучшения пользовательского опыта. Существует несколько способов сохранения файлов (HTML, JavaScript, CSS, изображения и т.д.) и данных (пользовательские данные, новостные статьи и др.). Но какое решение лучше выбрать? И как обеспечить его долговечность?
Читать дальше →

Интерактивные эксперименты с машинным обучением (на TensorFlow)

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

Вкратце


Я создал новый проект Интерактивные эксперименты с машинным обучением на GitHub. Каждый эксперимент состоит из Jupyter/Colab ноутбука, показывающего как модель тренировалась, и Демо странички, показывающей модель в действии прямо в вашем браузере.


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


  • Распознать цифры и прочие эскизы, которые вы нарисуете в браузере
  • Определить и распознать объекты на видео из вашей камеры
  • Классифицировать изображения, загруженные вами
  • Написать с вами поэму в стиле Шекспира
  • И даже поиграть с вами в камень-ножницы-бумагу
  • и пр.

Я тренировал модели на Python с использованием TensorFlow 2 с поддержкой Keras. Для демо-приложения я использовал React и JavaScript версию Tensorflow.


Интерактивные эксперименты с машинным обучением

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

Почему я сделал личный проект учёта трат на Git+JS

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

Здравствуйте, господа, в этой статье я поделюсь опытом создания приложения учёта трат, в частности отвечу на следующие вопросы:


  1. Зачем мне приложение учёта трат?
  2. Почему это личный проект?
  3. Почему проект на Git+JS?

1. Зачем мне приложение учёта трат?


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

Модель «Хищник-жертва» на Node.js

Время на прочтение5 мин
Охват и читатели16K
Недавно по сети прошел всплеск упоминаний игры Жизнь, в связи в основном с тем, что умер ее создатель.

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

Модель похожа на Жизнь тем, что это такой же циклический процесс, на который можно смотреть как на огонь, бесконечно медитировать и размышлять о вечном.
Читать дальше →

Как подружить Electron и Webix. Часть 2. Создаем приложение со своим View

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

Введение


В предыдущей статье мы рассмотрели с Вами вопрос интеграции фреймворка «Webix» в «Electron» и создание на основе этих фреймворков простого GUI приложения. Цель данной статьи является дальнейшую развитие вопроса интеграции в GUI интерфейс, построенный с помощью «Electron» и «Webix» других «JavaScript» фреймворков. Все элементы GUI реализованные в «Webix» характеризуются параметром «view». В зависимости от значения этого параметра будет отображаться тот или иной GUI элемент. Количество типов элементов «view», которые позволяет создавать «Webix» перекрывают порядка 90% задач при реализации интерфейса. Оставшиеся 10% это как раз тот случай, когда необходимо осуществить интеграцию либо ранее написанного кода либо фреймворка (библиотеки), которые в явном виде не поддерживаются в «Webix». Для осуществления интеграции со сторонними фреймворками(библиотеки) создадим вместе с Вами свой «view» элемент «Webix».

Постановка задачи


Создать GUI приложение «Electron+Webix», которое будет строить график функции вида «y=a*sin(b)+c» с возможностью изменения параметров функции «a, b и c» с динамической перерисовкой графика.
Читать дальше →

Runtime Type Safety in Typescript (Возможна ли удобная проверка типов в рантайме)

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

Относительная простота и доступность Javascript, относительная легкость входа в него предопределила на многие годы вперед его популярность. Некоторые языки программирования существенно повлияли на развитие всей отрасли в целом. Так, например SmallTalk стал неким прадедушкой ООП и объектного подхода, хоть сам по себе мало где используется. А Javascript… на мой взгляд это язык, о потенциале которого создатели не имели должного представления. Но мне всегда хотелось работать с чем-то на стыке между гибкостью  Javascript и строгостью типизированных языков. Возможно ли это?


В добрых традициях хабра я хочу сразу оговориться, что не претендую на применимость в 100% случаев, и не считаю мое мнение единственно верным. Приведенное ниже — мой взгляд и отношение к программированию вообще и к написанию кода на TS/JS в частности. Кроме статьи, я этот взгляд постарался донести на митапе, запись которого доступна тут.

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

[Перевод] Смыть

Время на прочтение18 мин
Охват и читатели27K
Привет, Хабр! Представляю вашему вниманию перевод статьи «To Wash It All Away» автора James Mickens.



Когда я учился в аспирантуре в Анн-Арбор, у меня был друг, глубоко увлеченный движением защитников окружающей среды. Он покупал еду у местных фермеров, ездил на велосипеде вместо машины, желая уменьшить выбросы, и держал жуткое компостное ведро, которое, вероятно, будет источником следующей пандемии гриппа. Однажды он сказал мне, что собирается неделю пожить на ферме. Я спросил зачем, и он ответил, что хочет «побыть ближе к земле» — фраза, которую вы можете произнести с серьёзным лицом, только комментируя документальный фильм о древних южноамериканских племенах. Я сказал моему другу, что земля не хочет побыть ближе к нему и что если бы он действительно присмотрелся к земле, то увидел бы не молочные реки и кисельные берега, а голод, стервятников, непосильный труд с использованием тачек и в целом неприемлемые количества насекомых. Он разразился продолжительной лекцией об экологической ответственности, которую я тут же выбросил из головы, потому что понял, что мой наивный друг даст дуба на этой ферме, и посоветовал ему без колебаний возвращаться, если вдруг ему там будет недостаточно хорошо. Он улыбнулся мне так, как улыбаются люди в фильмах ужасов за минуту до встречи с топором, и отчалил.
Читать дальше →

Пишем приложение для заметок на JavaScript

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


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

Сегодня мы с вами, как следует из названия, напишем простое приложение для формирования и хранения заметок.

Возможности нашего приложения будут следующими:

  1. Создание заметки.
  2. Хранение заметок.
  3. Удаление заметки.
  4. Отметка о выполнении задачи.
  5. Информация о дате выполнения задачи.
  6. Напоминание о необходимости выполнения задачи.

Приложение будет написано на JavaScript.

Заметки будут храниться в индексированной базе данных (IndexedDB). Для облегчения работы с IndexedDB будет использована эта библиотека. Как заявляют разработчики данной библиотеки, она представляет собой «тоже самое, что и IndexedDB, но с промисами».

Предполагается, что вы знакомы с азами IndexedDB. Если нет, то прежде чем продолжить рекомендую прочитать эту статью.

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

Итак, поехали.

Имитация рисования от руки на примере RoughJS

Время на прочтение8 мин
Охват и читатели12K
RoughJS это маленькая (<9 КБ) графическая библиотека JavaScript, позволяющая рисовать в эскизном, рукописном стиле. Она позволяет рисовать на <canvas> и с помощью SVG. В этом посте я хочу ответить на самый популярный вопрос о RoughJS: как это работает?


Немного истории


Очарованный изображениями рукописных графиков, схем и эскизов, я, как истинный нерд, задался вопросом: можно ли создавать такие рисунки с помощью кода, как можно точнее имитировать рисунок от руки, в то же время сохранив возможность программной реализации? Я решил сосредоточиться на примитивах — линиях, многоугольниках, эллипсах и кривых, чтобы создать целую библиотеку 2D-графики. На её основе можно создавать библиотеки и графики для рисования графиков и схем.

Вкратце изучив вопрос, я нашёл статью Джо Вуда и его коллег под названием Sketchy rendering for information visualization. Описанные в ней техники стали основой библиотеки, особенно в рисовании линий и эллипсов.

В 2017 году я написал первую версию библиотеки, которая работала только на Canvas. Решив задачу, я потерял к ней интерес. Год спустя я много работал с SVG, и решил адаптировать RoughJS для работы с SVG. Также я изменил структуру API, сделав её более простой, и сосредоточился на простых векторных графических примитивах. Я рассказал о версии 2.0 на Hacker News и внезапно она обрела огромную популярность. В 2018 году это был второй по популярности пост ShowHN.
Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №413 (27 апреля — 3 мая 2020)

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

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

Чистая Архитектура для веб-приложений

Время на прочтение36 мин
Охват и читатели130K
Хочу поделиться с вами подходом который я уже много лет использую в разработке приложений, в том числе и веб-приложений. Многим разработчикам настольных, серверных и мобильных приложений этот подход хорошо знаком, т.к. является фундаментальным при построении таких приложений, однако в вебе он представлен очень скудно, хотя желающие использовать такой подход однозначно есть. Кроме того на таком подходе написан редактор VS Code.

Чистая Архитектура

В результате применения этого подхода вы отвяжетесь от конкретного фреймворка. Сможете легко переключать библиотеку представления внутри вашего приложения, например React, Preact, Vue, Mithril без переписывания бизнес логики, а в большинстве случаев даже вьюхи. Если у вас есть приложение на Angular 1, вы без проблем сможете перевести его на Angular 2+, React, Svelte, WebComponents или даже свою библиотеку представления. Если у вас есть приложение на Angular 2+, но нету специалистов для него, то вы без проблем сможете перевести приложение на более популярную библиотеку без переписывания бизнес логики. А в итоге вообще забыть про проблему миграции с фремворка на фреймворк. Что же это за магия такая?
Читать дальше →

Как Gatsby обошёл Next.js

Время на прочтение10 мин
Охват и читатели21K
Автор статьи, перевод которой мы сегодня публикуем, работает программистом в компании Antler. Эта компания представляет собой глобальный генератор стартапов. В Antler несколько раз в году проходят демонстрационные дни, собирающие множество создателей стартапов и инвесторов со всего мира. Ситуация вокруг COVID-19 вынудила Antler перевести свои мероприятия в онлайн-формат.



Компании хотелось сделать так, чтобы посетители их виртуальных мероприятий, ни на что не отвлекаясь, и нигде не застревая, видели бы самое главное. А именно — идеи представляемых публике стартапов, выраженные в виде содержимого веб-страниц. Виртуальные демонстрационные дни могут быть интересны достаточно широкой аудитории. Некоторые представители этой аудитории, возможно, впервые принимают участие в чём-то подобном. Поэтому компании нужно было сделать всё самым лучшим образом и обеспечить высокую скорость загрузки страниц, представляющих стартапы. Они решили, что это — как раз тот случай, когда им может пригодиться высокопроизводительное прогрессивное веб-приложение (PWA, Progressive Web App). Главный вопрос заключался в подборе подходящей технологии для разработки PWA.
Читать дальше →

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

Spring-анимации во Vue

Время на прочтение12 мин
Охват и читатели9.8K
Привет, Хабр!

Мне давно хотелось добавлять в любые проекты Spring-анимации. Но делал я это только для React-проектов с помощью react-spring, так как не знал ничего другого.

Но наконец я решил разобраться, как оно все устроено и написать свою реализацию!

Если вы тоже хотите использовать Spring-анимации везде, заходите под кат. Там вы найдете немного теории, реализацию Spring на чистом JS и внедрение Spring-анимации во Vue с помощью компонентов и composition-api.

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

Неироничная ненависть к JavaScript

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

Прочитав данный перевод первоапрельской статьи о JavaScript я был удивлен тому, к каким мелочам могут придираться люди. И проблема не в самой статье, не в мемах и шутках о данном языке, а в том, что кто-то неиронично утверждает что JavaScript — плохой язык программирования. Но что, если попытаться его понять?

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

Пишем калькулятор на JavaScript

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


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

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

Желание написать калькулятор возникло у меня после просмотра одного туториала, посвященного созданию «simple calculator», который оказался далеко не симпл и толком ничего не умел делать.

Наш калькулятор будет true simple (42 строки кода, включая пробелы между блоками), но при этом полнофункциональным и масштабируемым.

Для расчетов будет использоваться эта замечательная библиотека (Math.js).

Без дальнейших предисловий, приступаем к делу.

Как подружить Electron и Webix

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

Введение


Доброе время суток! Хотелось поделиться с Вами личным опытом создания десктопного приложения на JavaScript с использованием связки Electron и Webix. Такая связка позволяет ускорить процесс верстки интерфейса, особо не тратя время на разметку и прочие web штуки, которыми может заняться как раз фреймворк Webix.

Инструменты


Итак приступим, на понадобится следующие инструменты:

  1. Редактор, в котором мы будем писать непосредственно наш код. Я буду использовать visual studio code (VSC), который можно взять отсюда ;
  2. Сервер Node.js, который можно взять отсюда . Скачиваем его и устанавливаем;
  3. Фреймворк «Webix» бесплатную версию (Webix Standard is a free UI library under GNU GPLv3 license), которую берем вот отсюда webix.com/get-webix-gpl. Для того что бы его скачать нужно перейти по выше приведенной ссылке, вести email, имя и фамилию, поставить три галочки нажать отправить после чего Вам на почту отправят ссылку для скачивания.
Читать дальше →

Дорога в ад JavaScript-зависимостей

Время на прочтение8 мин
Охват и читатели28K
Каждый JavaScript-проект начинается с благих намерений, заключающихся в том, что его создатели обещают себе не использовать слишком много NPM-пакетов в ходе его разработки. Но даже если разработчики прилагают немалые усилия к тому, чтобы сдержать это обещание, NPM-пакеты постепенно проникают в их проекты. Размер файла package.json со временем растёт. А с package-lock.json после установки зависимостей происходит настоящий ужас, выражающийся в добавлениях и удалениях пакетов, особенно заметных при очередном PR…



«Всё нормально», — говорит тимлид. Остальные члены команды согласно кивают. А что ещё делать-то? Нам всем хорошо от того, что экосистема JavaScript жива и здорова. Нам не надо каждый раз изобретать колесо и пытаться решать задачи, уже решённые сообществом опенсорса.

Предположим, вы собираетесь сделать блог и хотите воспользоваться Gatsby.js. Попытайтесь добавить этот генератор сайтов в зависимости своего проекта. А теперь — принимайте поздравления. Только что в вашем проекте оказалось 19000 дополнительных зависимостей. Это нормально? Насколько сложным может стать дерево JavaScript-зависимостей? Как дерево зависимостей превращается в ад? Давайте с этим разберёмся.
Читать дальше →

3D игры в Инстаграм на Javascript, или траектория полета колбасы

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


После первой статьи о программировании игр в масках Инстаграм ко мне обратился заказчик с просьбой создать игру в Инстаграм для его пиццерии. Эту игру планировалось использовать для целей продвижения бизнеса. Я, конечно, понимаю, что, судя по количеству просмотров первой статьи, тема Инстаграма сообществу Хабра не особо интересна. По-видимому, этот сервис все еще считается каким-то несерьезным развлечением для блондинок, а статья о нем годится только в качестве пятничного чтива под вечерний коктейль. Впрочем, сегодня, как раз, пятница. Доставайте коктейль. И не забудьте пригласить блондинок. Однако, вполне вероятно, в будущем технологии достигнут таких высот, что мы начнем играть в Инстаграме в GTA-5. Или 10.

В данной статье речь пойдет сразу о двух играх. Одну я сделал на заказ, а вторую потом — для себя. С каждой новой игрой я сталкивался с новыми задачами, поиск путей решения которых заставлял меня знакомиться с новыми нюансами разработки. Возможно, этот рассказ будет полезен и другим разработчикам элементов дополненной реальности. Игры написаны на чистом Javascript без использования каких-либо дополнительных библиотек. Для отображения 3D графики задействованы встроенные средства Инстаграм.

Storacle — децентрализованное хранилище файлов

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

image


Прежде чем начну, должен оставить ссылку на предыдущую статью, чтобы было понятно о чем именно речь.


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

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