Chupurnov Valeriy
Chupurnov Valeriy
Front End Engineer

Стабильный random на JS

В JS есть такой замечательный метода Math.random, он возвращает число от 0 до 1. И незаменим там, где нужно что-то продемонстрировать на случайных данных.

const points = [];
for (let i = 0; i < 1000; i += 1) {
   points.push({
      x: 1024 * Math.random(),
      y: 756 * Math.random(),
   });
}

Такой код создаст 1000 точек на условной плоскости 1024 на 756. И каждый раз точки будут на разных местах. Это не всегда удобно для отладки.

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

В JS ничего подобного нет. Но мы может воспользоваться идеей seed.


Стабильный random на JS

Как заходить по SSH только по SSH ключу

Вы создали виртуальную машину на хостинге. Он присылает вам в письме пароль и логин, что-то вроде:

login: root
password: smth

Обычно пароль короткий, и не очень надежный. Да и сам способ захода по ssh на сервере при помощи пароля оставляет желать лучшего. Нужен какой-то менеджер паролей, либо вы будете обречены постоянно искать это письмо.

Более разумный способ - заход по ssh ключу. На сервере хранится публичный ключ, у вас на компьютере приватный.


Как заходить по SSH только по SSH ключу

Как восстановить доступ к VPS серверу по SSH

Так вышло, что обнаружил на своем сервере следы посторонней деятельности. Залил свой публичный ключ и добавил файлик /etc/ssh/sshd_config.d/disable_root_login.conf.

В нем запретил заходить по паролю:

PasswordAuthentication no

И запретил заходить под root. Подумал, что это отличная идея)

PermitRootLogin no

А другого пользователя разумеется не создал)

Вышел, а дальше все. Сервер превратился в тыкву. Саппорт разводит руками, ничего делать не будем. Посоветовали финт с отладочным диском. Его и провернул.


Как восстановить доступ к VPS серверу по SSH

docker build не показывает никаких выходных данных из команд (RUN в Dockerfile)

Описание проблемы

Вот содержимое Dockerfile:

FROM alpine

ADD . /app/
WORKDIR /app
RUN echo "hello world"
RUN ls -l

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


docker build не показывает никаких выходных данных из команд (RUN в Dockerfile)

Выводим badge о состоянии Github Action воркера

travis ci vs github action

В свободное от работы время, я разрабатываю собственный WYSIWYG редактор Jodit. Подобный проект бы не выжил без автотестов. Их там сейчас больше 1000. Я запускаю тесты при релизе новой версии. Но есть еще ветка master, туда код попадает иногда без релиза. К примеру я принимаю PR, и надо узнать состояние тестов. В этом мне помогал Бейджик в README файле. Но сейчас, все сломалось =)


Выводим badge о состоянии Github Action воркера

Фотошоп выходит в Web

Фотошоп выходит в Web

Из названия статьи понятно о чем она. Разработчики несколько лет пилили и наконец представили бетку фотошопа в web https://web.dev/ps-on-the-web/ В статье ребята детально описывают что и зачем. Честно говоря для меня это было не столь интересно. Я думал, что он давно там =) Собственно, когда люди запускают ОС в браузере, то какой-то программе уже не удивляешься. Интересно другое. Меня, как frontend разработчика, интересует: как они запилили такое дикое количество UI. Вы открывали фотошоп хоть раз? Там же их тысячи: кнопки, формы, пикеры, формы форм, и т.д. Давайте разберемся.


Фотошоп выходит в Web

Лучшая 404

Лучшая страница 404 на моей памяти =) Лучшая страница 404


Лучшая 404

Андроид такой андроид)

Мемас про андроид


Андроид такой андроид)

Департамент планирования =)

/blog/uploads/images/1633618525716-image-image.webp


Департамент планирования =)

Как обновить Open SSL на CentOS 7

Как обновить Open SSL на CentOS 7 В связи с последними событиями (пол интернета лежит из-за Let's Encrypt) у меня на сайте сломался SSL. В интернетах пишут что для того, чтобы завелся, надо обновить Open SSL. Просто апнуть через yum не получилось. Нашел вот такую чудесную статью https://www.dmosk.ru/miniinstruktions.php?mini=openssl-update-centos

На удивление все команды отработали как надо. Когда работаешь на CentOS обычно так не бывает. Поэтому я давно перешел на Debian. Но есть старые легаси проэкты, и тут хочешь не хочешь а надо бы поддерживать.


Как обновить Open SSL на CentOS 7

Уточка

Уточка


Уточка

Параметры mailto

Параметры mailto

Рубрика век живи век учись: всегда использовал mailto в ее сокращенном варианте:

<a href="mailto:name@email.com">Link text</a>

А оказывается у этого вида ссылки, есть параметры:

Параметр Описание
mailto:name@email.com Ящик
cc=name@email.com Ящик который будет получит копию письма
bcc=name@email.com Ящик который получит копию но не будет отображаться в получателях
subject=subject text Тема
body=body text Тело письма
? Первый разделитель
& Остальные разделители

Параметры mailto

Как настроить прокси Charles для симулятора iOS

Как настроить прокси Charles для симулятора iOS

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


Как настроить прокси Charles для симулятора iOS

Ошибка в create react app Cannot assign to read only property 'exports' of object

Или assert в JS

Я пытаюсь переиспользовать код между TypeScript React приложением и NodeJS. Соотвественно есть файлы .js в которых экспортируются функции, старым дедовским способом:

function add(a, b) {
    return a + b;
}

module.exports = {add};

А в typescript просто импортируется так:

const {add} = require('./common/add.js');

До поры, до времени, это работало.

Проект не рабочий, и не основной и в нем мне не хотелось писать автотесты, а вот функции тестить хотелось.

На помощь мне пришел assert модуль. Он позволяет писать код сразу с проверкой тест кейсов.

Как-то так:

function add(a, b) {
    return a + b;
}

if (process.env.NODE_ENV !== 'production') {
    const assert = require('assert');
    assert.equal(add(2, 3), 5);
    assert.equal(add(12, 23), 35);
}

module.exports = {add};

Круто же?! Код сам себя проверяет, а из прод сборки потом выпиливается. Так что же пошло не так?


Ошибка в create react app Cannot assign to read only property 'exports' of object

TypeScript правильная перегрузка функций

TypeScript правильная перегрузка функций

Если вы работали с TS, то вам должна быть знакома такая конструкция:

function double(a: string): string;
function double(a: number): number;
function double(a: any) {
    return a + a;
}

Это механизм оверайда или перегрузки объявления типа функций. Таким же образом можно перегружать и методы классов. Это очень удобно, мы точно сообщаем TS что если подать в функцию number, то она вернет number.

Так что же не так с этим примером?

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


TypeScript правильная перегрузка функций

Крутой сайт у frontend разработчика

/blog/uploads/images/1631790590145-image-image.webp

Я тут в группе у веб стандартов наткнулся на пост про то, как надо готовить тени на сайте. Сама статья весьма занятная, и я даже репостнул в группе вк эту новость. Но сейчас не про это.


Крутой сайт у frontend разработчика

Как загрузить файл с помощью команды curl

Как загрузить файл с помощью команды curl

Базовый синтаксис:

  • Скачать файлы курлом: curl https://your-domain/file.pdf
  • Скачать файлы через ftp или sftp: curl ftp://ftp-your-domain-name/file.tar.gz
  • Вы можете задать имя выходного файла при загрузке файла через curl: curl -o file.pdf https://your-domain-name/long-file-name.pdf
  • Чтобы curls шел по 301 редиректам, во время загрузки файлов с помощью curl, запустите: curl -L -o file.tgz http://www.cyberciti.biz/long.file.name.tgz

Давайте рассмотрим некоторые примеры и использование curl для загрузки и выгрузки файлов в Linux или Unix-подобных системах.


Как загрузить файл с помощью команды curl

Карта сайта на NodeJS или sitemap.xml

/blog/uploads/images/1631634531332-image-image.webp

Для интеграции с поисковыми системами нам потребуется генератор карты сайта. Ничего лишнего, просто список урлов.

Научим наш блог генерировать такой sitemap.xml на стороне NodeJS.


Карта сайта на NodeJS или sitemap.xml

Create new application telegram API выводит Error

/blog/uploads/images/1631536026033-image-image.webp

Наткнулся тут на ошибку, страничка https://my.telegram.org/apps постоянно отдает сообщение об ошибке. Что бы туда не вводил. Что именно не так, оно не поясняет. Помог sof


Create new application telegram API выводит Error

Топ российских фильмов по зарубежным сборам

/blog/uploads/images/1631790661379-image-image.webp

Что из этого вы смотрели?)


Топ российских фильмов по зарубежным сборам

Интересная техника уточнения примитивных типов в TypeScript

/blog/uploads/images/1631520340086-image-image.webp

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


Интересная техника уточнения примитивных типов в TypeScript

Побег из Претории

/blog/uploads/images/1631478239898-image-image.webp Очень достойное кино на вечер с Дэниелом Рэдклифом. Когда смотришь фильм то забываешь про его звездную роль. Фильм был основан на реальных событиях, поэтому авторы не заполняли его всякими ужасами, которые присущи иным фильмам про тюрьмы. Тут не убивают заключённых, не бьют их почем зря. В этом фильм проигрывает. Порой думаешь, а неплохо они там живут. Отдельная камера, разнообразная работа, неплохая еда. Также не очень хорошо передана суть конфликта, суть протеста главных героев. Это все надо почитать отдельно, чтобы понимать. Но фильм прежде всего о свободе. И тут все в порядке. Главные герои жаждут ее, как и любой, кого, когда либо запирали в комнате. Актеры отыгрывают, злые охранники - злые) За героев переживаешь, как за себя. Очень рекомендую к просмотру.


Побег из Претории

Ошибки установки Sharp на Alpine Linux

/blog/uploads/images/1631522046893-image-image.webp

Я тут писал, что очень легко и просто получил ресайз картинок на NodeJS, но не тут то было.

Я на сервере использую докер образ node:14-alpine, и в нем просто установка

npm install

Не прошла. Точнее она прошла, но сервер затем просто не запустился.

Рассказывать почему я использую node:14-alpine образ, думаю лишнее. 5mb скажут за себя. Что же делать если установка sharp в alpine происходит с ошибками?


Ошибки установки Sharp на Alpine Linux

Как уменьшить изображение на NodeJS

/blog/uploads/images/1631790283266-image-image.webp

Я уже писал, что встроил в этот блог загрузку картинок через JS.

Но уже написав несколько статей, с ужасом обнаружил, что все картинки, которые были вставлены в статью - просто огромны.

2мб картинка, которая на экране занимает не более 600px. И даже при хорошем интернете, грузится с ощутимыми тормозами.

Так не пойдет. Будем резать картинки на NodeJS а также сжимать их.

Под конечный формат я выбрал webp, так как он дает наибольший профит при сжатии. Вы можете сказать, что его не поддерживает IE, ну и бог с ним =) Я веду этот блог для прогрессивной части человечества. Вам же ничего не мешает конвертировать в более олдскульные форматы: JPG или PNG.

Поехали!


Как уменьшить изображение на NodeJS

Ледяной драйв фильм (2021)

Ледяной драйв фильм (2021) Очень достойное кино. Лайм Нисон ака Квайгон), снова в свои годы берет рубеж. Я пишу пост снова не досмотрев. Но пока, очень круто. Неожиданно круто для боевика like 90-ые Черный пес. Или более старое Плата за страх (1952). Смотрел еще мальцом, но запомнил кино надолго. Обожаю этот фильм: они везут нитроглицерин по дороге и просто бояться взлететь на воздух.


Ледяной драйв фильм (2021)

КДПВ

Автосайз textarea

На этом блоге я пишу текст в обычном textarea, безо всяких визивигов. Это осознанный выбор. Markdown наше все. Но все же писать в просто textarea не столь удобно. Хочется автосайз и несколько шорткатов: чтобы CTRL+D и Tab работали как в обычных текстовых редакторах. Сейчас про автосайз.


Автосайз textarea

Как работает данный блог

Этот сайт зародился в далеком 2009. Тогда я запилил его на php. Задача была простой: легко и просто доносить до общественности свои мысли. Я сделал добавл на главной div, сделал его редактируемым (аля WYSIWYG) и кнопки сохранить/опубликовать. Так на сайте появились первые статьи. Довольно быстро я понял, что мой визивиг очень убогий и не постоянно глючит. + На сайте регулярно нужны были доработки. Самопис все таки. Я е выдержал и перенес все на Joomla. Про глюки и обновления можно было больше не думать, это прекрасная и надежная система. Это самолет а не система. Порталы, магазины, ракеты работают на Joomla. Но не блоги. Они есть, но это просто неудобно. Чтобы запилить статью, нужно подождать загрузки админки, авторизоваться, создать статью, заполнить кучу полей, и только затем писать статью. А уж посмотреть результат так это вообще квест, кеш не почистил - ничего не увидел! Почистил? Не факт, что если видишь ты, то видят и все остальные (Мы же авторизованы под админом). И тут были подходы это автоматизировать, и тут я делал модуль на главную с визивигом и поэтессами, но общие тормоза CMS Joomla не делали этот процесс комфортным.

Я даже свой визивиг написал https://xdsoft.net/jodit. То тема для отдельной статьи.

Короче я долго страдал. И все это время мечтал о своем старом подходе: зашел на сайт, на главной, ввел текст (желательно на MarkDown), нажал опубликовать - ушел.

Вот я и запилил этот раздел за два вечера. Как я это сделал, расскажу под катом: тут у нас React(create-react-app + typescript), Node JS как сервер, Github actions как CI + CD, и Docker Compose на сервере.


Как работает данный блог

Как через JS отправить файл на сервер и сохранить его на Node JS + Express

/blog/uploads/images/1630535752971-image-image.png

Предположим у нас есть текстовое поле, и когда пользователь копирует туда изображение из буфера, вы хотим его отправить на сервер, сохранить в папку и показать ссылку на изображение в этом самом поле.

Оказалось задачка не из простых.


Как через JS отправить файл на сервер и сохранить его на Node JS + Express

Как в docker-compose использовать localhost

Предположим, в docker-compose.yml у вас лежит вот такая штука:

version: '3.7'
services:
    mysql:
        image: mysql
        container_name: mysql-blog
        ports:
            - '1095:3306'

        expose:
            - 1095

        command: --character-set-server=utf8
            --collation-server=utf8_general_ci
            --default-authentication-plugin=mysql_native_password
            --sql-mode=NO_AUTO_VALUE_ON_ZERO

        restart: always
        environment:
            MYSQL_ROOT_PASSWORD: 'passsword'
            MYSQL_DATABASE: dbname

    some-node-app:
        image: chupurnov/some-node-app
        ports:
            - '8012:8012'

Два контейнера, один для базы данных, второй на ноде. Из ноды нужно обращаться в эту базу. Но какой у нее хост?


Как в docker-compose использовать `localhost`

Тротлер на JS

Есть такой класс задач, которые надо выполнять не чаще чем раз в n период. К примеру отправлять данные на сервер, чтобы его не заспамить. В JS, да как и везде, такие функции называют затротленными. Приторможенными. А сам тротлер, это функция, которая возвращает другую функцию. Сколько бы не вызывай которую, она не выполнится чаще чем задано в тротлере.


Тротлер на JS

Как удалить собачек в ВК

/blog/uploads/images/1631790366936-image-image.webp

Те, что ведут группу в социальной сети ВК знают, что от пользователей - собачек, надо периодически избавляться. Если пользователей несколько тысяч то это та еще задачка.

Но сам ВК не имеет такого функционала. Благо мы программисты умеем делать невозможное)


Как удалить собачек в ВК

Это моя первая запись в блоге

Пишу про все на свете! Что сейчас нагуглил и систематизировал в своей голове. Для этого даже этот блог запилил


Это моя первая запись в блоге