Kekeの日記

エンジニア、読書なんでも

HTML、CSS設計方法!OOCSS、SMACSS、BEMについて

「良いHTML、CSS」の基本ルール CSSといえど、プログラミング言語であることは間違いなく、とりわけ「CSS」だからというものはありません。 どの言語においても「変更に耐えうるコード」が一つの鍵となってきます。 特にCSSは軟弱な言語であり、セレクタの書…

Fish shell packageを作成して、公開するまでのいろは!

Fisherとは FisherとはFish shellに関するパッケージマネージャーです。似たようなものでOh-my-fishがありますが、使い勝手はFisherの方が便利で簡単であるという印象です。 そんなわけで、よくfish shellを自分は書いて、コマンドなどを作成したりするので…

Lighthouse Botを設定する方法 with TravisCI

動機 私は以前、ポートフォリオサイトを作成しました。 Pocketに130ぐらいポケットしてもらった「Lighthouseを使ってVue.jsのサイトを爆速化する」というものでLighthouseを使ったフロントエンドのパフォーマンスチューニングを紹介しました。かなり反響があ…

Gulpでワークフローを効率化しよう!

動機 メモを整理していたときに、もっと簡潔に明文化したいと思って本記事を書き起こしました。 自動化の道具箱の一つでもあるので、ぜひ気になる人はご覧ください。 かなり入門的な記事になるので、これから入門される方のサポートができれば嬉しいです。

Browserifyの上級指定教科書『Browserify Handbook』を読みすすめる

動機 ハリーポッターの作品中には『幻の動物とその生息地』のようにホグワーツ指定の教科書があります。 Browerifyも同様に、Browserifyを学ぶにあたって必要な上級教科書『Browserify Handbook』があります。 上級といっても非常にシンプルにわかりやすく解…

Google AssistantとDialogflowで使えるLINE家計簿Botを作ってみる!

動機 アドラー心理学によれば、私たちは常に目的をもって行動しています。 そして、過去は一切関係ないと。これがアドラー心理学の目的論の主眼点であり、これが過去のフロイトとも大きく論点が異なるものです。 特に、私はお金の管理が面倒で、たまに後悔す…

DevToolのConsoleを使い倒すテクニック集

Consoleとは Windowインタフェースのプロパティですが、このインタフェースは特別に省略することが許されているので window.console.log("hoge"); or console.log("hoge") と、どっちの書き方でもブラウザでは出力することができます。

Web Storage vs Cookie! どのように違って、どのように使うの?

動機 半年前にWeb Storageというものフロントエンドに詳しい友達から知りました。 それ以来、Web Storageのことを思い浮かぶこともなかったのですが、ちょっと時間があるので調査していこうと思います。

影との戦いを制する力を手に入れる!CSSのbox-shadowプロパティを理解する

はじめに ここの節は余談なので飛ばしてもらっていいです。 ジブリ映画『ゲド戦記』の原作であるゲド戦記シリーズの第1巻『ゲド戦記 影との戦い』では、主人公のゲドの学童期が描かれます。 すでに奇才と認められていたにも関わらず、ゲドは他人より優れたい…

Digdagでワークフローを宣言的に書く!

本記事 私は、いくつか家内サービスを運用しています。 例えばCloud FunctionsとCloud SQLを使った「家計簿」を家族全員が使っていますし、自宅に「監視カメラ」をおいてLineBotで適宜確認できるようになっています。 無料枠を使い回しているのでデータ移行…

NATS on Kubernetesのいろは。メッセージセマンティックからPrometheus、Grafanaによるモニタリングまで

本記事 本記事はKubernetes 3 Advent Calendar 2018の14日目の記事です。 本日(2018/12/26)の投稿になっているのは、空きがあったため埋めるために参加したからなのであって、決して遅刻などではありません!笑 モチベーション 私は学部3年生だった去年の201…

Concourseで継続的デリバリー。そしてSpinnakerとの比較

本記事 本記事はConcourse Advent Calendarの23日目の記事になっています。 もうすぐ学部を卒業するので、積極的にアウトプットしようと思って、以下のAdvent Calendarも参加したので、もし興味がございましたらご覧ください。 Vue.js Advent Calendar 2018 …

Siderでコードレビューを自動化してプロジェクトのエントロピーを維持する

本記事 本記事では自動コードレビューができるSider(旧SideCI)を使ってみようかなとおもいます。 よくミスタイプとかして、それを修正するプルリクが必要になったりするとプロジェクトのエントロピーが圧倒的に増大するので防ぐためにも導入してみます。 イ…

Raspberry PiとImgurを使って無料で自宅監視カメラLINEボットを構築する

本記事 本記事では、実際にRaspberry Piのカメラモジュールを使って監視カメラサービスを構築してみようと思います。 完成形は以下のようにかまると呼びかけると家の画像を返信してくれるものです。すべて無料の制限内にします。 モチベーションとしてはカメ…

Argo CDによってGKEでGitOpsをする

はじめに 最近読んだ鎌倉時代の歌人、鴨長明の『方丈記』にも ゆく河の流れは絶えずして、しかももとの水にあらず。 とありますが、私たちのソフトウェアも然りです。 毎日更新され、デプロイされ、時に不可逆に破壊され。そして、ちぐはぐな形に落ち着くま…

CircleCIでSpinnakerのデプロイメントパイプラインをデプロイする

どうも、もうすぐ大学卒業の@timtimtim1026です。 もしコメントなどがございましたらDMなり、リプライしてください。 本記事はCircleCI Advent Calendarの14日目の記事になっています。 本記事 この記事では、CircleCIを使ってSpinnakerのデプロイメントパイ…

Terraformで運用しているLineBot家計簿をGCPで使う

はじめに 私は自分で作ったLineBotを使って家計簿をつけています。 クラウドにはGoogle Cloud Platform(GCP)の無料枠を使っていて、データベースにはCloud SQL(MySQL)を使っています。 自分でデータを集めているので、以前にもApache Supersetなどを用いてデ…

Lighthouseを使ってVue.jsで書いたポートフォリオサイトを爆速化する

本記事はVue.js Advent Calendar 2018の第3日目の記事です。 はじめに GCPの無料枠が終了したため、ポートフォリオサイトはクローズドしましたが、引き続き本記事はご覧いただけます。 私は以前、インターンシップなどの選考に備えて自分のポートフォリオサ…

Github Actionsが使えるようになったので使ってみる

本記事 本記事では、少し前にアナウンスされたGithub ActionsというCIツールのようなものを実際に触ってみて、現時点での使い勝手をまとめてみようと思います。 実際に使えるようになると以下のようなタブが追加されています。 初めて使ってみる Actionペー…

Perlで現ブランチのPull RequestのURLを取得するtig用のスクリプトを書いた

本記事 私は、これまでtigでpushをするとブラウザでプルリク作成に飛ぶスクリプトを使っていましたが、現在のブランチのプルリクをみたい時があります。 今回はperlを使って、その機能を実装するスクリプトを書ければなと思います。 また、スクリプトはすべ…

Glitchを使って簡単にBotをデプロイする

本記事 本記事ではGlichというサービスを使ってアプリケーションをホスティングしてみようと思います。 無料で、かつ、簡単にデプロイできるうえに、GUI上で複数人でソースコードを変更することができる点で新しいので調査も兼ねて使っていこうと思います。 …

Rustの複数の生存期間パラメータでハマった

問題となったソースコード RustでPathcargoを使って、いろいろファイル操作をしていました。 app.rs let input_path_str = matches.value_of("input").unwrap(); let output_path_str = matches.value_of("output"); let (input_path, output_path) = utils:…

CLIツールを作る上で知っとくべき用語

cli

本記事 本記事では、CLIツールを作る時に出てくるフラグやオプション、サブコマンドなどの用語を解説することで、どんな言語でもCLIツールを開発できるようになることを目的に解説します。 用語 Command: コマンド コンピュータに命令を出すためのものです。…

Rustのcrateとmoduleについて

本記事 本記事ではRustのcrateとmoduleを解説していきます。 動機としては公式ドキュメントには簡単な説明がありましたが、実用的なものはなくて、困ったので今回記事にしようと思いました。

超絶便利!maidを使ってTaskRunnerでRustのタスクを実行する

本記事 本記事ではMarkdownでタスクランナーがかけるNode.js製のmaidというものを使ってみます。 特にmarkdownだと言語に縛られることもなく、好きな箇所で好きなように定義できるので便利です。 しかしながら、その柔軟性のためgalpやgruntなどのように高機…

ヒューズの選定方法

本記事 電源回路を作っているときに、考慮すべきがヒューズであると思います。 例えばコンセントからは日本だと100Vという非常に高電圧で電流が流れていて、回路に異常事態が起きた時は発火など重大な事故に繋がるかもしれません。 そのときにヒューズが回路…

第一原理計算と密度汎関数理論

第一原理計算とは 第一原理計算は「非経験的電子状態計算」とも呼ばれている経験に基づかない(パラメーターがない)、第一原理である量子力学を基本法則に立脚した計算手法で物性値を知るための計算手法である。量子力学とは、私たちが中学の頃に学んだ力学…

スーパーコンピュータのPortable Batch System(PBS)の使い方

はじめに はじめにいくつかの概念や用語について説明します。 スーパーコンピュータとは スーパーコンピュータは厳密の定義は存在しません。 しかし、抽象的な概念として「大規模な計算機」と私たちは認識しているかと思いますが、そのようなものです。 また…

CircleCIでOrbsを公開する

Orbsとは Orbsとはconfig.ymlに書いてあるJobやワークフローをシェアする機能になっていて、v2.1から追加された機能になっています。 シェアされたものは自身のWorkflowに取り込んで、開発スピードをあげることができます。 正式なOrbsはOrbs Registryにあり…

React、Typescript、Styled-componentでカスタマイズQRコードを作る

本記事 本記事ではQRコードを使う中で、実用的に使えるまでに必要となるまでの知識をつけて、実際にTypescirptで生成できるまでを目指します。 また、今回はReact上でやってみようと思います。