JavaScript *

Представлен открытый проект релейного компьютера 1961 года Minivac 601, работающий в браузере (код на GitHub). До появления микрочипов компьютеры строились на основе механических реле. Это рабочая модель Minivac 601, образовательного компьютера, разработанного Клодом Шенноном.

Представлена шпаргалку по JavaScript. Внутри есть всё для изучения, проверки себя и прокачки навыков до уровня сеньора: основы и теория, поиск и выбор элементов, CSS, AJAX и база по DOM, формы и ввод данных, общие проверки , разметка и текстовое содержание, документ, область просмотра, переходы и удобный поиск по всем темам.

minimal vscode - гайд по кастомизации vscode: чистим status bar, пишем плагины на #javascript

В статусбаре в vscode – очень много всего: как полезного, так и лишнего.
Сегодня посмотрим, как можно его кастомизировать:

• Можно просто спрятать (как делаю я)

• Можно очень детально кастомизировать

• Можно перенести часть его функций в плагины

И вот тут главная фича vscode выходит наружу – у нас ведь просто браузер с html / css / js. А значит, мы можем использовать css и js для кастомизации всего! И оно будет работать одинаково даже в cloud версиях IDE.

В выпуске:

• Будем писать CSS для удаления лишнего из status bar

"custom-ui-style.stylesheet": {
  "#status\\.problems": {
    "visibility": "hidden !important",
    "display": "none !important",
  }
}

• И создавать локальные плагины на #javascript для кастомизации поведения редактора

function updateColumnPosition() {
    const positionLabel = document.querySelector(
      '#status\\.editor\\.selection .statusbar-item-label',
    )
    if (!positionLabel || !positionLabel.textContent) {
      // It might not exist for some reason ¯\_(ツ)_/¯
      return
    }

    const currentLine = document.querySelector(
      '.line-numbers.active-line-number',
    )

    // Now we would have the column position instead of the active line number:
    const colNumber = positionLabel.textContent.match(/Col (\d+)/)
    currentLine.textContent = colNumber[1]
}

Впереди еще пара взрывающих мозг видосов, будем и дальше превращать vscode в Черный Квадрат Малевича.

Идентификация множественных поставщиков услуг и их потребителей

На платформе версии 1.29.0 появилась возможность указывать множественных поставщиков и потребителей услуг в бизнес-инструментах ESM-платформы.

Компания может в системе определить поставщиками услуг любые внутренние отделы и департаменты, такие как бухгалтерия, HR или АХО, и управлять их портфелями услуг наряду с внешними поставщиками.

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

Что это даёт бизнесу:

• сквозную прозрачность сервисных отношений;

• фиксацию ответственности на любом уровне;

• честную аналитику, отчётность и управляемость затратами.

Это открывает путь к осознанному внедрению ESM-подхода не только на операционном, но и на стратегическом уровне.

Читайте подробнее Поставщики услуг Читайте подробнее Виджет Service Relationship

Смотрите видео, в котором Андрей Вишняков, директор по бизнес-продуктам компании SimpleOne, рассказывает, как это работает на практике.

Новая эра осознанного внедрения ESM — с версии 1.29.0 платформы SimpleOne

В версии 1.29.0 Low-code платформы SimpleOne мы выпустили несколько фундаментальных обновлений.

Одно из них знаменует новую веху в развитии платформы — разделение платформы на ESM и LCAP.

Мы отделили бизнес-логику инструментов Low-code платформы (LCAP) от бизнес-инструментов ESM-платформы и поместили в отдельное приложение.

• Приложение Simple Application содержит бизнес-инструменты ESM-платформы

• Приложение Platform содержит бизнес-логику инструментов Low-code платформы

«Мы подошли к точке, где SimpleOne из единой платформы превращается в экосистему. Разделение на ESM и LCAP — это не просто обновление, а архитектурный сдвиг, который открывает новую эру осознанного внедрения ESM. Клиенты получают независимые релизные циклы, большую стабильность и контроль над развитием своих решений» — Илья Радченко, директор по платформенным продуктам SimpleOne, корпорация ITG.

Документация для версии 1.29.0

Подробнее об обновлении

Слышали великую новость? JavaScript без единого латинского символа - всё кирилицей! Подробности тут:

https://www.cnews.ru/news/top/2025-10-30_bolshe_nikakoj_latinitsy

Теперь вопрос: есть ли у кого-то комментарии, кроме матерных? 😎

Привет, хабровчане! 😊

Недавно я копался в мире ИИ-инструментов для разработки — тех, что помогают писать код быстрее и умнее. Знаете, когда сидишь за проектом и думаешь: "А не взять ли помощника, который подхватит идеи на лету?" Решил поделиться обзором нескольких интересных вариантов на рынке. Это не глубокий разбор с бенчмарками (для этого нужны отдельные тесты), а просто описание, чтобы понять, что можно выбрать под свои нужды. Я опираюсь на личный опыт и отзывы из сообществ — вдруг кому-то пригодится для экспериментов.

Давайте по порядку:

1. Cursor — это как эволюция VS Code с встроенным ИИ. Он автокомплитит код, генерирует фрагменты по описанию, понимает контекст проекта и даже помогает с отладкой. Подходит для тех, кто любит привычный интерфейс, но хочет ускорить рутину. Работает на Windows, macOS и Linux, есть бесплатная версия, но премиум открывает больше моделей ИИ. Идеально для соло-разработчиков или команд, где нужно быстро итератировать.

2. Harvi Code — российский продукт, первый в России аналог Cursor, построенный на мощной модели Sonnet 4.5 (от Anthropic, которая славится точностью и скоростью). Это расширение для VS Code и Cursor с удобным интерфейсом, как в знакомых IDE, плюс фокус на хороших ценах (не дерут втридорога за подписку). Подходит для генерации кода, отладки и работы с проектами. Если вы в РФ и ищете локальный вариант без заморочек с платежами — стоит попробовать.

3. Lovable — здесь акцент на создание веб-приложений без глубокого кодинга. Чат с ИИ: описываешь идею на естественном языке, и он генерирует full-stack app — от фронта до бэка. Удобно для прототипов или MVP, особенно если вы не хотите копаться в деталях. Поддерживает интеграции с базами данных и API. Минус — иногда нужно дорабатывать вручную, но для стартапов или хобби-проектов это спасение.

4. Bolt (bolt.new) — браузерный инструмент для быстрого создания сайтов, приложений и прототипов. Вводишь промпт — и вуаля, он строит всё от начала до конца, включая деплой. Работает с веб, iOS и Android. Круто для тех, кто хочет экспериментировать без установки софта. Есть интеграции с Expo для мобильных apps. Подходит новичкам или когда нужно быстро проверить концепцию.

5. Roo Code — это расширение для VS Code и Cursor, как целая команда ИИ-агентов прямо в вашем редакторе. Он анализирует весь проект, предлагает мульти-шаговые решения, ускоряет редактирование в 10 раз. Поддерживает разные модели ИИ (Anthropic, OpenAI), есть инструменты для автоматизации задач. Хорош для сложных проектов, где нужен глубокий контекст — не просто автокомплит, а умный помощник.

6. Kilo Code — открытый ИИ-агент в виде расширения для VS Code, JetBrains и Cursor. Генерирует код, автоматизирует задачи, предлагает рефакторинг. Есть система инструментов для взаимодействия с окружением (безопасно, с контролем). Бесплатный, с опцией кастомизации. Идеален для тех, кто предпочитает open-source и хочет интегрировать в свой workflow без лишних зависимостей.

В общем, выбор зависит от вашего стиля: если любите браузер — Bolt или Lovable; если вглубь кода — Cursor, Harvi, Roo или Kilo. Я пробовал пару из них на пет-проектах, и реально сэкономил время. Что вы думаете? Пользовались кем-то из списка? Делитесь в комментах, может, вместе разберёмся, какой подойдёт под разные языки или фреймворки. Буду рад обсуждению! 🚀

Ссылки для удобства:

• Cursor

• Harvi Code

• Lovable

• Bolt

• Roo Code

• Kilo Code

Как войти в нужную дверь: API-ключ и как с ним работать

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

Чтобы использовать API-ключ, нужно:

1. Получить его в личном кабинете сервиса.

2. Добавить в запрос — обычно в заголовке Authorization.

3. Следить за безопасностью: не хранить ключ в коде и регулярно менять.

Пример запроса в Node.js:

const axios = require('axios');

const API_KEY = process.env.MY_API_KEY;

axios.get('https://api.example.com/data', {

  headers: { 'Authorization': Api-Key ${API_KEY} }

})

.then(r => console.log(r.data))

.catch(e => console.error('Ошибка', e.response?.status));

В базе знаний Рег.облака поделились подробной инструкцией: как создать, подключить и защитить API-ключ. Заходите, сохраняйте и используйте :) 

Привет всем!🙃

⠀⠀⠀⠀⠀⠀⠀⠀⠀

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

Хочу научиться делать простенькие визуализации.

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

Заранее спасибо за любую наводку🌷
Вы мне очень поможете!

Всех приветствую! Видел ТГ бота который присылает аварии(инциденты, ДТП) сразу как то их создали на яндекс картах в определенных городах! Попытался сделать такого же, опыт в разработке ботов имеется, но увы я ни как не могу достать из яндекса инфо о ДТП, перерыл все их АПИ, отрисовать на карте слой с ДТП могу, а вот получить данные для обработки ни как вообще! Может кто знает какой то секрет? Буду благодарен любой помощи!

Как правильно внедрить SRI и обезопасить свой проект от атак через CDN?

Subresource Integrity (SRI) — это функция безопасности, которая позволяет браузерам проверять, не были ли данные, загруженные посредством CDN, изменены. SRI — важный инструмент для повышения безопасности веб-приложений. Он защищает от атак, в которых злоумышленник может внедрить вредоносный код в сторонние ресурсы.

В статье «Как настроить SRI, если у нас микрофронты» рассказываем, что это такое и зачем он нужен, как устроена технология на практике и почему она особенно важна в проектах с микрофронтами. Если вы работаете с микрофронтами или хотите повысить безопасность фронтенда — эта статья поможет сделать всё грамотно и без лишних головных болей.

Анализ проектов

Заказчик отправил архив с десятками айтишных разработок и попросил в короткие сроки дать по нему заключение: что полезно, а что нет. Какие проекты выбросить, а какие выгодно развивать (с указанием потенциальной прибыли и перечня необходимых работ). С подобной задачей мы в лабе сталкивались не раз, но это была внутренняя кухня. А тут большое количество проектов, которые никто прежде в глаза не видел. Сроки сжатые, вникнуть в детали каждого проекта физически невозможно.

Невыполнимые задачи мы любим больше всего. Структурировали требования к оценке проекта и написали протокол для анализа (https://vsempo.xyz/lab/analpro/index.html). Работает так: загружаете исходные файлы проекта в LLM, загружаете файл протокола и в ответе получаете JSON с полным описанием проекта, багами, технологическим стеком, конкурентными преимуществами, потенциальной прибылью от внедрения, алгоритмом развития и необходимым ресурсам. При желании можно сделать все это пакетно: указываете каталог и получаете набор файлов с результатами.

Но сами по себе JSON-файлы изучать сложно. Поэтому на сдачу написали небольшой вьюер на JS (https://vsempo.xyz/lab/analpro/analproview/index.html). Загружаете в него все файлы JSON с описанием проектов и получаете визуализацию, сводную статистику по всем проектам, возможность изучить детали по каждому проекту и общую стратегию развития. Пока эта система больше напоминает концепт, чем промышленное решение, но для нашей конкретной задачи этого более чем достаточно.

Изначально задача казалось совершенно невыполнимой. А в итоге самую большую трудность вызвало придумать название. С одной стороны, мы написали протокол анализа. Но еще мы написали классическую программу для анализа проектов. Долго не могли решить, какое название выбрать: аналпро или проанал. В итоге остановились на первом варианте. Хотя я был против. Нужно было назвать систему "проанал", а название "аналпро" сохранить для расширенной коммерческой версии.

От TODO-листа к анимационному шедевру

Начал разбираться с Motion для React, но оказалось, что свежих обзорных статей почти нет? В нашей статье полный обзор библиотеки Motion — идеального инструмента для создания современных UI-анимаций. Внутри:

• Разбор ключевых motion-компонентов.

• Практические примеры кода с плавной анимацией TODO-листа.

• Как настроить анимации появления, исчезновения и перетаскивания элементов.

• Советы по оптимизации с LazyMotion и управлению анимациями через хуки.

• Интересные лайфхаки для создания интерактивных интерфейсов без потери производительности.

В статье «Попробовал библиотеку Motion в React: делюсь обзором» есть примеры кода, GIF-анимации и описание хуков, которых, достаточно, чтобы понять Motion, и, возможно, попробовать его руками, сэкономив время на чтении документации.

Поиск скомпрометированных зависимостей через Dependency Track

На днях стало известно о компрометации почти 2-х десятков npm-пакетов (подробнее в этой статье). Зловредный код может похищать криптовалюту. Это не первый раз, когда в зависимости попадает зловред (например, в 2022 году зловред удалял данные).

Один из вариантов поиска наличия скомпрометированных пакетов среди сотен проектов - использование Dependency Track. При этом поиск возможен и в транзитивных зависимостях тоже. На картинке ниже показан процесс. Заходим в раздел "Components", вводим название в формате "pkg:npm/$name$". Далее остаётся отсортировать по версии и найти среди них скомпрометированную (сейчас это легко - нужно смотреть самую старшую версию). Можно поиск производить сразу по конкретной версии. Пример:

pkg:npm/simple-swizzle@0.2.3

Если пакет нашёлся - можно не только узнать в каком именно проекте, но и увидеть где именно в дереве зависимостей проекта используется (нажать на иконку, обведённую красным).

Если знаете альтернативные варианты поиска скомпрометированных пакетов другими средствами - напишите в комментариях.

Подборка обучающих материалов по языкам программирования от Selectel: Go, Python и JavaScript

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

Go

Эти семь статей составляют практический гайд по работе с Go. Вы научитесь писать простые сервисы вроде сокращателя ссылок и использовать этот язык в некоторых рабочих задачах, а еще получите большую подборку материалов для погружения в тему (да, у нас тут подборка в подборке, так уж вышло). На прочтение всех материалов уйдет примерно два часа.

Python

Если самые базовые вещи в Python вы уже освоили, то эта подборка для вас. Вы узнаете, как настраивать инструменты, работать с базами данных, создавать программы с интерфейсом и использовать Python для парсинга. А еще здесь есть несколько интересных задач, чтобы можно было закрепить знания. Всего в подборке девять материалов, примерно на четыре с небольшим часа чтения.

JavaScript

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

Репозиторий react-bits содержит тысячи анимированных компонентов на React для создания веб-проектов и интерфейсов, а также большое количество элементов — кнопки, карточки, меню, необычные курсоры, анимированные списки и декоративные фишки. Каждый из компонентов можно протестировать в браузере — проверить работу и то, как он будет смотреться в вебе. Элементы интегрируются в проект за один клик.

HR-собеседование: почему не стоит задавать технические вопросы

За эти полгода я прошел больше 100 собеседований, и только на одном техническом интервьюер понял, о чем спрашивает. HR там занимается только React-разработчиками и умеет писать простые приложения.

На остальных собеседованиях меня спрашивали про ООП, связи таблиц в базе данных и типы данных в JS. На первый вопрос я уже могу не помнить ответа, так как пишу на функциях 5 лет. Второй вопрос — вообще не мой конек. Третий — вроде имеет смысл, но что HR этим проверяет? 🤔

HR-собеседование важно, но его цель — не в проверке технических навыков, а в оценке личных качеств. Когда HR начинает спрашивать про фреймворки или синтаксис, это пустая трата времени для всех. 🕐

Почему технические вопросы на HR-этапе — это плохо?

1. HR может неправильно оценить ответ. Если кандидат скажет что-то сложное, HR не поймет, правда это или блеф. Если ответ будет неверным, HR может пропустить хорошего специалиста. 😕

2. Создаётся ложное впечатление о компании. Кандидат думает: «Если HR лезет в технические детали, что будет на реальном собеседовании?» 😲 Это отпугивает сильных разработчиков, которые ценят время. ⏰

3. HR-этап должен фильтровать другое. Мотивация, ожидания по зарплате, готовность к условиям работы (офис, гибрид, удалёнка). Умение коммуницировать, работать в команде, адаптироваться к процессам. 💼

Вывод

HR-собеседование должно помочь кандидату и компании понять, подходят ли они друг другу по культуре, запросам и ценностям, а не проверять знание фреймворков. Оставьте техническую часть технарям. 🛠️

Представлена библиотека красочных анимаций на чистом JS для разных проектов All-in-one animation engine. Все анимации интегрируются за один клик и разобраны по типам: скроллбары, загрузчики, меню, переходы, счётчики или просто стилизованные элементы.

Переписываем примеры из популярных стейт-менеджеров на kr-observable используя только две функции.

вот код, позволяющий создавать экземпляры экземпляров:

const Cstr = function () {
    const Self = function () {};
    Object.setPrototypeOf(Self, this);
    return Self;
};

const item = new Cstr;

console.log('item instanceof Cstr : ', item instanceof Cstr);

const itemInstance = new item;

console.log('itemInstance instanceof item : ', itemInstance instanceof item);

вот Gist где кода больше и лучше, там экземпляры вглубину тоже наследуются, но там намного соложней и очень долго, зато 200 строк console.log'ов :
https://gist.github.com/wentout/8a2631fd5cc5827df5946b9b6598bf99

вот статья про этот код, но там душно, и форточки закрыты:
https://habr.com/ru/articles/939050/

; ^ )