エンジニアの業務委託単価表とは...?

参考

qiita.com

 

picture_pc_5b45283442ac99917366882c5ef4e038.png

 

言語や就業場所、案件によりけりではあると思うけど、自分の目標年収に対してどの程度の能力が求められているのか、スキルに対する市場の相場ってのは知っておきたいですね。

自社の基準だけでなく業界全体の相場も知っておくことは大事だなと...

javascriptでファイルダウンロードするには?

モダンブラウザでhtml属性の「download」が使えない...

仕方ないのでjavascriptを使いサーバー上のExcelファイルをダウンロードさせたい

ということがあったので備忘録的に...

File APIのBLOBを使うことで実現可能みたい!

 

1.BLOBオブジェクト作成

2.ファイル名を指定

3.window.URL.createObjectURLでBlobからURLを生成しそれをリンク先に設定

 

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
</head>
<body>
  <div id="result"></div>
  <script>
    let blob = new Blob(['あいうえお'],{type:"text/plain"});
    let link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = '作ったファイル.txt';
    link.innerText = 'ダウンロードします';
    const result = document.getElementById('result');
    result.appendChild(link);
  </script>
</body>
</html>

 

参考:

qiita.com

 

 

指導する立場における考え方の参考になった本

『その指導は、しない』

https://www.amazon.co.jp/%E3%81%9D%E3%81%AE%E6%8C%87%E5%B0%8E%E3%81%AF%E3%80%81%E3%81%97%E3%81%AA%E3%81%84-%E3%82%81%E3%81%8C%E3%81%AD%E6%97%A6%E9%82%A3/dp/4491045542/ref=sr_1_1?adgrpid=123830291896&gclid=CjwKCAiA68ebBhB-EiwALVC-NtsmcgN-gQlkkvPu9nwDdhSKbi7wrpTapQ6wLk4xuJoq3Oh21V4SyxoCWjoQAvD_BwE&hvadid=625965019616&hvdev=c&hvlocphy=1009343&hvnetw=g&hvqmt=e&hvrand=11522732348617451754&hvtargid=kwd-1330628714851&hydadcr=27964_14609300&jp-ad-ap=0&keywords=%E3%81%9D%E3%81%AE%E6%8C%87%E5%B0%8E%E3%81%AF%E3%81%97%E3%81%AA%E3%81%84&qid=1668439455&qu=eyJxc2MiOiIxLjQxIiwicXNhIjoiMS4yMyIsInFzcCI6IjEuMTcifQ%3D%3D&sr=8-1

 

ついつい感情的になったり固定観念に囚われた固い思考になってしまう時があるので定期的に読んで自分を戒めたい...

 

自分が新人の頃どんなだったかっていつの間にか忘れちゃうよね...

状況に合わせた、人に合わせた指導は心がけたいところ。

JavaScriptの超軽量ライブラリ -vanilla-tilt.js

DLはここから:

micku7zu.github.io

 

サンプルコード:

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <div class="container">
      <div
        class="background"
        data-tilt
        data-tilt-max="50"
        data-tilt-speed="400"
        data-tilt-perspective="500"
      >
        <img src="https://dl.dropbox.com/s/4f8xub814why1k6/slime.png?dl=0" />
      </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.6.1/vanilla-tilt.js"></script>
  </body>
</html>

 

お手軽に色々アニメーション実装できそうで楽しめるかも!

CSSの新しいプロパティ「accent-color」

 

web.dev

 

こちらの記事を参考:

coliss.com

 

チェックボックスでaccent-colorプロパティを使用

 

accent-colorプロパティをサポートしているブラウザでは、下記のように表示されます。

Chromium 93での表示

Chromium 93での表示

ちなみに、サポートされていない場合は下記のように表示されます。

Chrome 92での表示

Chrome 92での表示

ラジオボタンでaccent-colorプロパティを使用

Chromium 93での表示

Chromium 93での表示

レンジスライダーでaccent-colorプロパティを使用

Chromium 93での表示

Chromium 93での表示

プログレスバーでaccent-colorプロパティを使用

Chromium 93での表示

Chromium 93での表示

 

こったUIの画面とか作る機会はあまりないしそもそもCSSフレームワーク使うことが多いけど、こういった素の使い方は知ってて損はないよねー

OKIPPA

置き配バッグ「OKIPPA」、大分県民300名を募り再配達削減の実証実験へ | Techable(テッカブル)

 

これすごくいいなぁー

 

今はリモートワークが多いけど、配送側で置き配しかしてくれなかったり会議多い人間なので居るけど出れないとか多い中で置き配は衛生的にも防犯面でも心配があるのでこういうのあると安心できるなぁ。

 

関東でも導入しないかしら...通販で売ってないのかな?

Dockerを触ってみよう!

以下からプロジェクト全体をpull、またはzipでダウンロード。

「package.json」と同じフォルダに、「Dockerfile」という名前のファイルを作成し、以下のように編集しコンテナイメージを作成。

# syntax=docker/dockerfile:1
FROM node:12-alpine
RUN apk add --no-cache python g++ make
WORKDIR /app
COPY . .
RUN yarn install --production
CMD ["node", "src/index.js"]
copy
・FROM : ベースイメージ
・RUN : コンテナイメージ生成時に実行されるコマンド
・WORKDIR : 作業フォルダ
・COPY : コピー
・CMD : コンテナイメージ開始時に実行されるコマンド

Dockerfileリファレンスは以下...

docker build」で、コンテナイメージを作成。

 $ docker build -t getting-started .
copy

パラメータ意味:

-t : コンテナイメージ名
:  現フォルダでDockerfileを探すことを指示。

「Dockerダッシュボード」でコンテナイメージ「getting-started」が追加されたことを確認。

画像2

 

docker run」で、コンテナを開始。

$ docker run -d -p 3000:3000 getting-started
copy

ブラウザで「http://localhost:3000」を開く

画像3

「Dockerダッシュボード」でコンテナ「getting-started」が実行されていることを確認。

画像3

 

参考:

Image-building best practices | Docker Documentation