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

Пользователь взаимодействует со страницей сайта 14islands.com с использованием собственного курсора этого сайта
Знакомство фронтендера с WebGL: четкие линии (часть 3)

Третья часть серии статей о том как фронт писал свой микродвижок для рендера моделей, ради экономии байтов. Ссылка на прошлую.
Пишем свой парсер и погружаемся в некоторые функции webGL для красивых линий.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №476 (5 — 11 июля 2021)

Знакомство фронтендера с WebGL: первые наброски (часть 2)

Вторая часть серии статей о том как фронт писал свой микродвижок для рендера моделей, ради экономии байтов. Ссылка на прошлую.
Тут я приступил к попыткам отрендерить красиво яблоко.
Знакомство фронтендера с WebGL: почему WebGL? (часть 1)

Мне и моему коллеге дизайнеру была поставлена задача разработать новую версию сайта-визитки компании. Коллега полгода учился работать с 3D-редакторами (в нерабочее время на Maxon Cinema 4D), поэтому он хотел использовать свои новые навыки при создании новой версии сайта. Его идея заключалась в том, что на каждой странице на первом экране будет крутиться какая-нибудь непонятная фигура с каким-нибудь красивым текстом. Выглядеть это должно было примерно так:
DTO в JS

Информационные системы предназначены для обработки данных, а DTO (Data Transfer Object) является важным концептом в современной разработке. В “классическом” понимании DTO являются простыми объектами (без логики), описывающими структуры данных, передаваемых “по проводам” между разнесенными процессами (remote processes). Зачастую данные "по проводам" передаются в виде JSON.
Если DTO используются для передачи данных между слоями приложения (база данных, бизнес-логика, представления), то, по Фаулеру, это называется LocalDTO. Некоторые разработчики (включая самого Фаулера) негативно относятся к локальным DTO. Основным отрицательным моментом локального применения DTO является необходимость маппинга данных из одной структуры в другую при их передаче от одного слоя приложения к другому.
Тем не менее, DTO являются важным классом объектов в приложениях и в этой статье я покажу JS-код, который на данный момент считаю оптимальным для DTO (в рамках стандартов ECMAScript 2015+).
Как я писал тестовое задание на Angular и почему некоторым разработчикам не стоит давать тестовое задание

Тестовое задание для junior или middle разработчиков обычно показывает их реальный опыт и понимание предметной области, однако для senior'а тестовое это немного другое. Расскажу свою историю написания маленького тестового задания на Angular с использованием лучших практик.
Создаем свой сайт или блог на Ghost в образе Docker

Ghost — платформа для блогов с открытым исходным кодом, опубликованный под лицензией MIT. Ghost создавался как альтернатива WordPress, выросшего из движка для блога в сложную CMS.
Фишкой Ghost является то, что он использует на стороне бекенда сервер Node.js и язык JavaScript и дает альтернативный вариант для разработки.
В этом посте объясняется, как задеплоить свой личный блог на Ghost — движке с базой данных MariaDB с помощью docker.
Быстрая математика для графиков, на примере вычисления среднего

Расскажу про типичные подходы к вычислению данных, для построения графиков. Про "лайфхаки" ускорения вычислений и про работу различных типов данных в JavaScript, а главное, про то, как ускорить вычислительные операции. И задам "Домашнее Задание".
Discord Slash API + Yandex Cloud Functions = ♡

Добрый день. Многие знают, что программисту приходится следить за развитием технологий, даже тех, которые не касаются его текущего стека. Ну, или ему это доставляет удовольствие, которое он оправдывает необходимостью держать руку на пульсе. Так обычно зарождаются разнообразные домашние проекты. Я решил свести в один пост свои наработки по написанию Node.js-бота для Discord Slash API с использованием Serverless-подхода в Yandex Cloud. Использование готовых библиотек сведено к минимуму.
Да, опять онлайн: анонс восьми осенних конференций от JUG Ru Group

Пришло время анонсировать 8 наших конференций, уже хорошо знакомых хабравчанам. Мы распределили даты так, чтобы каждую неделю проходило по одной — получился двухмесячный «осенний марафон»:
- Heisenbug (тестирование): 5-7 октября
- SmartData (data engineering): 11-14 октября
- DotNext (.NET): 18-21 октября
- Joker (Java): 25-28 октября
- HolyJS (JavaScript): 2-5 ноября
- DevOops (девопс): 8-11 ноября
- C++ Russia (C++): 15-18 ноября
- Mobius (мобильная разработка): 22-25 ноября
Под катом — ответы на главные вопросы. Почему снова онлайн? Что там будет? Есть ли абонемент на весь сезон? Можно ли выступить с докладом? Что известно о программе и как меняется цена билетов?
Идеальный инструмент для работы с СУБД без SQL для Node.js или Все, что вы хотели знать о Sequelize. Часть 2

Представляю вашему вниманию руководство по Sequelize.
Sequelize — это ORM (Object-Relational Mapping — объектно-реляционное отображение или преобразование) для работы с такими СУБД (системами управления (реляционными) базами данных, Relational Database Management System, RDBMS), как Postgres, MySQL, MariaDB, SQLite и MSSQL. Это далеко не единственная ORM для работы с названными базами данных (далее — БД), но, на мой взгляд, одна из самых продвинутых и, что называется, "battle tested" (проверенных временем).
ORM хороши тем, что позволяют взаимодействовать с БД на языке приложения (JavaScript), т.е. без использования специально предназначенных для этого языков (SQL). Тем не менее, существуют ситуации, когда запрос к БД легче выполнить с помощью SQL (или можно выполнить только c помощью него). Поэтому перед изучением настоящего руководства рекомендую бросить хотя бы беглый взгляд на SQL. Вот соответствующая шпаргалка.
Это вторая из 3 частей руководства, в которой мы поговорим о простых и продвинутых ассоциациях (отношениях между моделями), "параноике", нетерпеливой и ленивой загрузке, а также о многом другом.
Я постараюсь быть максимально лаконичным (надеюсь, без ущерба для полноты изложения материала). Я также постараюсь излагать материал максимально простым языком. Большинство примеров, приводимых в руководстве, заимствованы из официальной документации.
Ближайшие события
REST hooks для WebRTC Click to Call. Опыт внедрения

Кнопка "Click to Call" на сайте — это "инновация", которой уже около 10 лет. Технологии под капотом изменились, а принцип остался прежним - кликаем по кнопке на странице сайта, запускается JavaScript, который запрашивает доступ к микрофону и устанавливает соединение с сервером — WebRTC SIP шлюзом. Далее одна клиент-серверная нога — это браузер-шлюз, вторая нога может быть сколь угодно длинной и через цепочку SIP proxy может соединяться в конечном счете с мобильным или стационарным телефоном. Таким образом, браузер превращается, в каком-то смысле, в софтфон и становится полноправным участником VoIP телефонии.
Тест библиотек построения диаграмм классов, исследуя исходный код популярных js библиотек

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

Я разрабатывал один проект по недвижимости и появилась задача показывать объекты расположенные в радиусе 20 км с просматриваемым. Т.е. у нас есть объект, в нашем случае это поселок, и нужно отображать находящиеся рядом поселки из нашей базы данных в радиусе 20 км, при этом имея только координаты их расположения.
Как я сделал свой трекер мечты и понял цену времени

Основной посыл этого поста - рассказать о развитии своей старой идеи, которая переделывалась несколько раз, и прошла путь от простой кривой WinForm до полноценного кросс-платформенного приложения на Electron'e.
У меня нет цели прорекламировать программу (хоть она бесплатная, без подписок и рекламы), поэтому я не буду оставлять ссылки на скачивание, просмотр, но если это разрешено - отвечу на подобные вопросы в комментариях.
Книга «JavaScript для глубокого обучения: TensorFlow.js»
Привет, Хаброжители! Пора научиться использовать TensorFlow.js для построения моделей глубокого обучения, работающих непосредственно в браузере! Умные веб-приложения захватили мир, а реализовать их в браузере или серверной части позволяет TensorFlow.js. Данная библиотека блестяще портируется, ее модели работают везде, где работает JavaScript. Специалисты из Google Brain создали книгу, которая поможет решать реальные прикладные задачи. Вы не будете скучать над теорией, а сразу освоите базу глубокого обучения и познакомитесь с продвинутыми концепциями ИИ на примерах анализа текста, обработки речи, распознавания образов и самообучающегося игрового искусственного интеллекта. Nuxt.js и поисковики. Решение проблем с SЕО для Google и Yandex

Пришлось мне как-то столкнуться с одной проблемой, а именно с проблемой, которая связана с отдачей ошибки после выката разных обновлений созданных на Vuejs + Nuxtjs в проде.
Данная ошибка возникает чуть меньше чем на минуту, но роботы кэширует это дело на всех страницах примерно на дня 2-3, из-за этого поисковиками отдаются старые мета-данные и как следствие сайт проседает в выдаче.
Надеюсь мое решение поможет многим, кто столкнется с такой же проблемой и он не будет тратить на это так много времени как я, ведь такая проблема возникает часто, если используешь Nuxt.js в режиме SSR, а описания ее решения в интернете я так и не нашел.
Данное решение уже помогло четырем компаниям избавится от этой ошибки.
Что же происходит и почему возникает такая ошибка?
Я начал разбираться. Первое что я сделал, начал анализировать, как же именно происходит процесс работы при SSR. Да, я знаю как именно он работает, но есть одна вещь..как в одной юмористической передаче.
JavaScript: изучаем регулярные выражения на практике

Регулярное выражение (далее также — регулярка) — это последовательность специальных символов, формирующих паттерн или шаблон (pattern), который сопоставляется со строкой.
Цель такого сопоставления может состоять либо в поиске подстроки в строке, например, для замены подстроки, либо в определении соответствия строки шаблону для валидации строки.
В данной статье мы сосредоточимся на валидации.
Что конкретно мы будем делать? Мы возьмем несколько регулярок из validator.js (наиболее популярной библиотеки для валидации данных с помощью регулярных выражений) и произведем их подробный разбор. Также мы рассмотрим несколько дополнительных регулярок и один алгоритм.
Как результат, мы реализуем несколько полезных функций, которые вы впоследствии сможете использовать в своих проектах.
