npm package , version & publish

※http://localhost:4873がrepositoryの場合

version

# v1.0.1 -> v2.0.0
$ npm version major --registry 
 
# v1.0.1 -> v1.1.0
$ npm version minor --registry http://ocalhost:4873
 
# v1.0.1 -> v1.0.2
$ npm version patch --registry http://ocalhost:4873
 
# v1.0.25 -> v1.0.26
$ npm version patch
v1.0.26

publish

# buildが必要ならやるぽいcommand
$ npm run --if-present build
 
# publish
$ npm publish
npm notice
略....

highlight.js React Typescript (version: 10.4.1)

はじめに

react-highlight.jsがv10に対応していなかったので, highlight.js v10でComponentを作成

なぜかvue.jsはPluginがある、、、vuePlugin

bvaughn.github.io

npm install

2020/12/03 latest version -> 10.4.1

$ npm i highlight.js
$ npm i @types/highlight.js

Highlight.jsx

JSONのsample Component作成

import React, { useEffect } from "react";

import hljs from 'highlight.js';
import json from 'highlight.js/lib/languages/json';
import 'highlight.js/styles/atom-one-dark.css';

export default function Highlight(prop: any) {
  useEffect(() => {
    hljs.registerLanguage('json', json);
    hljs.initHighlighting();
  },[]);
  return (
    <pre>
      <code className='json'>{prop.content}</code>
    </pre>
  );
}

demoサイトから対応しているlanguageとstyleが確認できます。

// この部分
import json from 'highlight.js/lib/languages/json';
import 'highlight.js/styles/atom-one-dark.css';

highlightjs.org

おわり

HEIC magic number

binary dataからHEIF/HEIC形式かどうか判定する方法(memo)

背景

S3からgetObjectした画像がReactで表示されなかった heic2anyというlibraryで画像でheicをに設定可能だが、処理が重いので、APIからcontentTypeを適切に渡してあげたかった （無理やりjpgにrenameするとS3上ではcontentType: image/jpegになり得るので）

結論

HexStringで判定

ftypheicmif1miaf" or "ftypmif1mif1heic

ネットで拾った.heicとiPhoneで撮った.heic画像で異ったので startWith: "ftyp" contains: "heic"

という条件で判定 codeはそのうちあげる予定

react-ga [demo] npm ERR! notarget No matching version found for react-router-dom@4.4.0.

github.com

demo fileを $ npm install した時のerror

対処方法

  • package.jsonの以下を削除
    "react-router": "4.4.0",
    "react-router-dom": "4.4.0",
$ npm install
  • manual install : react-router-dom

www.npmjs.com

$ npm install --save react-router-dom

実行

$ npm start

localhost:8080で接続

おわり

base64 to blobURL

React javascript 
const raw = window.atob(base64);
const rawLength = raw.length;
const blobArray = new Uint8Array(new ArrayBuffer(rawLength));

for (let i = 0; i < rawLength; i++) {
    blobArray[i] = raw.charCodeAt(i);
}

const blob = new Blob([blobArray], {type: 'applicatioin/pdf'});
const blobUrl = window.URL.createObjectURL(blob);

Cannot resolve symbol '***' in POM.xml

Java Java spring maven

はじめに

POM.xmlのErrorの解決方法のmemo

├── pom.xml
├── src
│   ├── main
│   │   ├── filters
│   │   │   └── dev.properties

POM.xml

<project ...>
略
    <profiles>
        <profile>
            <id>dev</id>
            <properties>
                <foo>src/main/filters/dev.properties</foo>
            </properties>
        </profile>
    </profiles>

    <build>
        <filters>
            <filter>${foo}</filter>
        </filters>
    </build>

</project>

この場合<filter>${foo}</filter>の箇所がerrorとなる

Cannot resolve symbol 'foo'

ただ、buildは可能だし、指定したprofileでfilterしてくれる。

原因

defaultを指定してあげないとIDEが解決できない様子

            <activation>
                <activeByDefault>true</activeByDefault>
            </activation>

POM.xml (修正後)

<project ...>
略
    <profiles>
        <profile>
            <id>dev</id>
            <properties>
                <foo>src/main/filters/dev.properties</foo>
            </properties>
            <activation>
                <activeByDefault>true</activeByDefault>
            </activation>
        </profile>
    </profiles>

    <build>
        <filters>
            <filter>${foo}</filter>
        </filters>
    </build>

</project>

Java String to Unicode

Java

memo

private void stringToUnicode(String s) {
        StringBuilder sb = new StringBuilder();

        for (int i = 0; i < original.length(); i++) {
            sb.append(String.format("\\u%04X", Character.codePointAt(original, i)));
        }

        String unicode = sb.toString();

        System.out.println(unicode);
    }