2021年1月1日のブックマーク (13件)

  • レガシーおじさん、Vue.jsでSSGを頑張るのを諦めてNuxt.jsにする

    はじめに Vue.jsのSPAだとTwitterのサムネイルに使うOGP等が指定できないと以前記事を書いたのですが、コメントの中にNuxt.jsやNext.jsを使うと良いよ、とありました。コメントありがとうございました。 ただ、既存のアプリを違うFWに移行させるのはちょっと面倒だと思いPrerender SPA Pluginとかを使って、下記あたりを参考にVue.js+プリレンダリングで出来ないかと頑張ってみたけど諦めた、という記録になります。 具体的にはビルド時にAPI呼び出しをしてるのに、ブラウザで表示するタイミングで値が初期化されてしまう 「APIが2回呼び出される問題」 を解決できなかったので。Nuxt.jsなら簡単に出来たので素直にそっちを使うことにしました。 この記事では他の誰かあるいは過去を忘れた未来の自分が同じ過ちを繰り返さないように、「Vue.js + Prerende

    レガシーおじさん、Vue.jsでSSGを頑張るのを諦めてNuxt.jsにする
    kkeisuke
    kkeisuke 2021/01/01
  • Vue.jsのプリレンダリングで手軽なOGP対応 - Qiita

    はじめに プリレンダリングは、Nuxt.js の Generate のようなもので、ビルド時にルートごとの HTML ファイルを生成する仕組みです。去年参加した v-meetup で、おいちゃんさんが「プリレンダリングでもわりと十分なんだよ~」とお話をされていたので、ずっとやろうと思ってました(遅い)。公式ガイドでも小規模な静的ページならプリレンダリングを推奨しているようです。 🐹 SSR vs プリレンダリング (事前描画) 最近チョコチョコ使うようになった Netlify にプリレンダリングの機能がありましたが、まだベータ版なのと、キャッシュされるタイミングは調整できないみたい? 課金すれば外部サービスを利用できるらしく、Vue.js の SPA でどのぐらいシームレスに導入できるのかちょっと気になります。近いうちにホスティングサービスを乗り換えると思うので、また今度試してみようと思

    Vue.jsのプリレンダリングで手軽なOGP対応 - Qiita
    kkeisuke
    kkeisuke 2021/01/01
  • TypeScript >= 4.1 の Template Literal Types を活用した引数パーサーを作ってみた - ジンジャー研究室

    ヘルプっぽいものを書くと文字列をパースして型をつけてくれる。 デフォルト値を指定すると T | null が T になったりする。 公開は今のところ GitHub Packages だけです(メンテしなくていい方法を考え中) github.com 型レベルのパーサーはこちらの記事を大いに参考にしたというかパクりました。 (ネタ) TypeScript 型パズルで作るmini interpreter | by Yosuke Kurami | Medium こんなに格的じゃないけど。 難しいなと思ったのは、せっかく型レベルでパースしてもその結果を値レベルの実装に利用できない点。 なので、型は型、値は値でそれぞれパースして最終的に辻褄が合うように実装しました。 それでは皆さま良いお年を。

    TypeScript >= 4.1 の Template Literal Types を活用した引数パーサーを作ってみた - ジンジャー研究室
    kkeisuke
    kkeisuke 2021/01/01
  • GitHub - g-plane/typed-query-selector: Better typed `querySelector` and `querySelectorAll`.

    You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

    GitHub - g-plane/typed-query-selector: Better typed `querySelector` and `querySelectorAll`.
    kkeisuke
    kkeisuke 2021/01/01
  • Linear – A better way to build products

    Powering the world’s best product teams. From next-gen startups to established enterprises. Unlike any tool you’ve used beforeDesigned to the last pixel and engineered with unforgiving precision, Linear combines UI elegance with world-class performance.

    Linear – A better way to build products
    kkeisuke
    kkeisuke 2021/01/01
  • JavaScriptでいきなり機械学習を遊び倒す本

    機械学習って難しいんでしょ…?」と考えている人に向けて、誰でも手軽に機械学習を活用したWebアプリをJavaScriptで開発できるようになる初心者向けのチュートリアルです。 関連サイト書の関連ページが用意されています。 NextPublishingオフィシャルWebサイト内容紹介書は「機械学習って難しいんでしょ…?」と考えている人に向けて、誰でも手軽に機械学習を活用したWebアプリをJavaScriptで開発できるようになる初心者向けのチュートリアルです。基的なJavaScriptの構文さえ使えれば、あとはマウス操作で簡単に機械学習モデルを構築できるWebサービスを組み合わせてミニWebアプリを開発する方法について丁寧に解説しています。これまで、興味はあるけど手が出せなかった人や機械学習を活用してみたいと考えている人、JavaScriptでWebアプリが作りたい人など、幅広く

    JavaScriptでいきなり機械学習を遊び倒す本
    kkeisuke
    kkeisuke 2021/01/01
  • 最近話題の「frourio」を無料でサクッとデプロイする方法(Vercel + Heroku)

    はじめに 最近話題の frourio をご存知でしょうか? TypeScriptフルスタック環境 を一発で作れるフレームワークです。実際に試してみると分かりますが、簡単に環境構築が出来ます。 こんな簡単に作れるなら、試しにアプリを作って外部に公開するとこまでやってみたいですよね。 この記事では、その環境を VercelHeroku を利用し、無料でサクッとデプロイする手順を紹介します。 全体構成 デプロイ先としては、フロントエンドVercel 、バックエンドは Heroku を選択しました。 選択理由 選択理由としては以下です。今回は "無料でサクッと" がコンセプトなのでポイントと考えています。 基的に無料で利用可能なこと インフラレイヤを意識せずに簡単なセットアップで利用可能なこと VercelHeroku について Vercel VercelNext.js

    最近話題の「frourio」を無料でサクッとデプロイする方法(Vercel + Heroku)
    kkeisuke
    kkeisuke 2021/01/01
  • 非エンジニアが文章校正のためにVSCodeとtextlintを導入するまでの記録

    今年は文章校正の環境を整えられなかったことが大きな課題でした。いままで、秀丸のハイライト……はMacに乗り換えたのでお別れしたり、miを使って表記ルールを入れ込む……は用語統一を登録するので精一杯で実用的にはならなかったりといった具合で、なかなか「これ!」という校正・校閲環境に持って行けていませんでした。 そんなとき見つけたのがtextlintというもの。ATOKのような文章チェックをしてくれるものとイメージしてもらえたらよいかなと思います。 Markdown などのテキストファイルを特定のルールにしたがってチェックするツールです。 ルールは作者の azu さんを始め、多くのルールが公開されています。 (textlintVSCodeで始める文章校正) で、textlintVSCodeというエディタで動かせます。VSCode(Visual Studio Code)は、マイクロソフトが提供

    非エンジニアが文章校正のためにVSCodeとtextlintを導入するまでの記録
    kkeisuke
    kkeisuke 2021/01/01
  • 2021年のTypeScript環境構築で絶対入れるべき「better-typescript-lib」の紹介 - Qiita

    こんにちは。この記事は筆者が開発した「better-typescript-lib」を宣伝する記事です。これは、導入するだけでTypeScriptプログラムがより型安全になるという素晴らしいライブラリです。あくまで型定義なので、導入してもランタイムの挙動は何も変わらず、バンドルサイズなどへの影響もありません。 better-typescript-libの導入法 ここに記載されているのはv1 (TypeScript 4.0 〜 4.4向け)のインストール方法です。v2 (TypeScript 4.5〜)ではインストール方法が変わり、最初のnpm installのみで良くなります。詳しくは次の記事をご覧ください。

    2021年のTypeScript環境構築で絶対入れるべき「better-typescript-lib」の紹介 - Qiita
    kkeisuke
    kkeisuke 2021/01/01
  • Apple M1は、Web開発でもクソ速い Kotlin & TypeScript編

    2020年も残すところわずかとなりました。年もお疲れ様でした。 今は2020年12月31日大晦日の夜です。当は2021年1月1日0時0分にドヤ顔で公開しようと思ったのですが、力尽きたのでもう公開します。 この記事は「イエソド アウトプット筋 トレーニング Advent Calendar 2020 無限列車編」のXX日目です。縮退しているたけうちさんがお送りいたします。 TL;DR Apple M1は、Intel Core i7と比べて、KotlinTypeScriptを使った実プロダクト開発で、倍近く速い。 ただし、まだ自分でトラブルシューティング出来る玄人向け(僕はサポートしたくありません)。 前振り 2020年11月末に、開発機として使用していたMacBook Proの液晶が壊れてしまったのですが、色々大事なデータが入っているのと、忙しいのもあって年を越してもまだ修理に出せていま

    Apple M1は、Web開発でもクソ速い Kotlin & TypeScript編
    kkeisuke
    kkeisuke 2021/01/01
  • Windows の PlantUML で GraphViz インストールが不要になってた

    概要 PlantUML の設定を見直していたら Installation under Windows Starting from 1.2020.21 If you use a recent version (that is at least version 1.2020.21), you don't need to manually install GraphViz anymore ! ということで、GraphViz インストールが不要になってました。 詳細は以下のリンクに書いてあります(上の引用もリンクからです)。 設定 https://github.com/plantuml/graphviz-distributions の zip をダウンロード 解凍してフォルダを適当なところに設置 環境変数を設定 変数: GRAPHVIZ_DOT 値: {解凍したフォルダへのパス}\dot.exe

    Windows の PlantUML で GraphViz インストールが不要になってた
    kkeisuke
    kkeisuke 2021/01/01
  • 【2021年版】GitHub × Go製ツールのリリースフロー

    はじめに GoでCLIをよく作る身として、 どのように素晴らしいリリースフローを構築するか に心を砕いています。 2019年末にリリースされたGitHub Actionsがすっかり成熟し、GitHub Container Repository(β)もお目見えとなった2020年も暮れを迎えたところで、新たなリリースフロー構築を検討し、一定の結論を得ましたので、少しでもGophersのたすけになることを願って、記事として公開します。 背景 実現したい「リリース」 クロスコンパイルしたバイナリでの配布 Goでツールを作ることで、クロスコンパイルの手軽さによって、様々な環境で、ダウンロードすればすぐに実行できるバイナリでの配布が可能です。 $ curl -O bin.tar.gz https://github.com/kyoh86/gogh/releases/download/v1.7.1/gog

    【2021年版】GitHub × Go製ツールのリリースフロー
    kkeisuke
    kkeisuke 2021/01/01
  • Denoからnpmパッケージを使用するノウハウ

    このページの内容は古くなっています。 最新の情報については、以下のページを参照いただければと思います。 https://zenn.dev/uki00a/books/effective-deno/viewer/how-to-use-npm-packages DenoJavaScript/TypeScriptランタイムであるため、既存のNode.jsやブラウザの資産をある程度活かすことができます。 この記事では、Denoからnpmパッケージを使用する際のノウハウについて、パッケージの種別ごとに解説します。 DenoとNode.jsの両方をサポートするパッケージ Node.jsとブラウザの両方で動作するパッケージ CommonJS形式で配布されているパッケージ Node.jsのAPIに依存するパッケージ DenoとNode.jsの両方をサポートするパッケージ npmパッケージの中にはDeno

    Denoからnpmパッケージを使用するノウハウ
    kkeisuke
    kkeisuke 2021/01/01