くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

Nuxt+TypeScript+Firebaseのはじめるときにやること: 2019年12月版

ひさびさに新規でNuxtアプリを作ろうと思ったら、 いろいろ変わっていたので、備忘用のまとめ。 (時間がなかったので割と雑め...いつかきれいに加筆する予定...) プロジェクト作成 # 雛形の作成 $ npx create-nuxt-app <project_name> # GitとGitFlowの初期化 $ cd <project_name> $ git </project_name></project_name>…

text-overflowの複数行版、line-clampを使ってみる

css

複数行でも省略できるようになるline-clamp。 使ってみたら、若干手間取ったので、その時の備忘録。 .clamp-three-lines { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; /* 上の3つを指定して、やっと使えるようになる */ -webk…

<input type="file" />で選択した画像を<img>に表示する

雑だけど、こんな感じ(´ω`) <html> <body> <input type="file" id="myImage" accept="image/*" onchange="setImage(this);" onclick="this.value = '';"> <img id="preview"> <script> function setImage(target) { var reader = new FileReader(); reader.onload = function (e) { document.getElementById("preview").setAttribute(…</body></html>

ISO 8601表記の継続時間(PT10M10Sみたいなの)をtimedeltaに変換する

"PT10M10S"みたいな時間をtimedeltaに変換したいなと思ったら、 isodateで簡単にできたので、その備忘録。 インスール $ pip install isodate 使い方 import isodate iso_time = "PT10M10S" # 10分10秒のISO 8601表記 td = isodate.parse_duration(iso_time)…

pythonのtimedeltaをHH:MM:SSで表示する

毎回調べ直すので、備忘用... timedelta、いい感じにフォーマットできないので、 自分で計算しないといけない.... def format_timedelta(timedelta): total_sec = timedelta.total_seconds() # hours hours = total_sec // 3600 # remaining seconds remain …

DjangoのrunserverをHTTPSで起動する(django-extensionsでRunServerPlus)

Djangoの開発サーバをHTTPSで起動したいなと思ったら、 django-extensionsのRunServerPlusでできるよう。 簡単にできたので、その時の備忘録。 インストール まずはインストール $ pip install django-extensions # RunServerPlusを使うためのライブラリ $ p…

【Nuxt/Vue】dynamic importに置換するsedのスクリプトで速度をちょっと改善した

開発しているWebサービス、少し初期表示が遅いので、少しずつ改善中... Vueの非同期コンポーネントを使うと改善されるよう。 とりあえず置換しただけだけど、赤だったPerformanceが オレンジになった(´ω`) こんな感じに書き換える。 import { Component, Vu…

ネストされたJavaScriptのオブジェクトをフラットにするhughsk/flatというライブラリ

ネストされたObjectをフラットにしたいなと思ってたら、いいライブラリが。 hughsk/flatを使ったらすぐできたので、その備忘録。 サンプルは、GitHubあるREADME.mdの抜粋です。 インストール $ npm install flat 使い方2: ネスト→フラット const flatten = r…

SVGなFont AwesomeをNuxt+Bulmaで使ってみた

開発しているWebサービスでFont Awesomeのお世話になってる。 ただ、Web Font版を使っていたので、読み込みが遅い。。 SVG版だとアイコンごとにimportできるようなので、 性能改善の一環でやってみたときの備忘録。 インストール まずはnpmでパッケージをイ…

TypeScriptでFirebase Admin SDKで認証ファイルを使うときは、スネークケースをキャメルケースに変換する

前の記事でも書いているけど、Firebase Adminで色々するので、 そろそろTypeScript化したくなり。。 www.memory-lovers.blog いざやってみると、すんなりできなかったのでその時の備忘録。 こんな感じ jsonファイルはスネークケースだけど、 型(admin.Servic…