バージョン管理では差分表示ツール（diffツール）がセットとして使われています。ターミナルなどでは縦型の差分表示が多いですが、GUIやWebでは左右に並べた表示が多くなっています。左右の方が、実際には分かりやすいのでしょう。 そこで使ってみたいのがydiffです。ターミナルベースで、左右に並べた差分表示が実現できます。 ydiffの使い方 表示例です。 ydiffは左側に修正前、右側に修正後のコードを表示します。GUIアプリなどでは一般的な表示でしょう。文字単位で差分を出してくれるのも便利です。Gitコマンドなどでそのまま使えるので、設定しておくと開発が捗ることでしょう。 ydiffはPython製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 joshuarli/ydiff: side-by-side, character-level git un

Web技術を使ってデスクトップアプリケーションを作成する事例が増えています。有名なところではAtomやVisual Studio Codeが挙げられるでしょう。プログラミングエディタができるなら、大抵のソフトウェアが作れるはずです。その基盤としてはElectronを使っている例が多いです。 NeutralinoJsはElectron代替のソフトウェアです。より小さなサイズで動作し、メモリ消費量も小さいのが特徴です。 NeutralinoJsの使い方 NeutralinoJsのコードサンプルです。 let myapp = { myfunction : function () { document.getElementById('info').innerHTML = NL_NAME + " is running on port " + NL_PORT + " inside " + NL_OS

Webサイトはシンプルなデザインが好みです。情報量が多いと、どこを見ていいのか分かりませんし、情報の取りこぼし（メールマガジンの送付設定など）があってイライラしたりします。 開発者には開発者に合ったUIがあるはずです。今回紹介するHacker UIはまさに開発者のために作られたWeb UIフレームワークです。 Hacker UIの使い方 スクリーンショット多めで紹介します。 ボタンです。 ボタンをアウトライン化した例。 リスト。 フォーム。 ラジオボタン。 チップ。 ツールチップ。 モーダル。 タイポグラフィ。 Hacker UIはボタンなどがはっきりしており、フラットなデザインになっています。シンプルで、何が何を行うUIなのかが分かりやすいです。開発者以外の人にとっては殺風景に見えるかも知れませんが、開発者にとってはこれくらいのデザインがさっぱりしていて、使いやすいのではないでしょうか。

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました CSVファイルは今なおシステムの中で現役ばりばりに利用されています。様々なシステムから出力されるCSVファイルに対して、差分を確認したいと考えることはないでしょうか。通常の差分表示では、CSVのようなフォーマットではうまく表示できないかも知れません。 そこで使ってみたいのがcsvdiffです。CSVに特化した差分表示コマンドです。 csvdiffの使い方 普通にコマンドを打ったところです。追加された行、修正された行が確認できます。 $ csvdiff asof.csv asof2.csv # Additions (1) + 20160525 13:15:00.075,AAPL,98.65,10,NASDAQ,98.55,98.56 # Modifications (19) - 20

PWA（Progressive Web Apps）というキーワードに注目が集まっていますが、実際のところ何からはじめれば良いのか分からない人は多いのではないでしょうか。PWAは固有の技術を指し示すものではないので、特に分かりづらいでしょう。 そこで参考にしたいのがbento-starterです。PWAとは何か、を学ぶのにぴったりなスターターキットです。 bento-starterの使い方 こちらがそのテンプレートです。 マニフェストファイル、Service Workerもちゃんとインストールされます。 Lighthouseを使った評価はほぼパーフェクトです。 PWAの要素となるCACHE APIの利用はもちろん、アプリマニフェストやアクセシビリティもきちんと提供されています。このbento-starterをベースにしたり、ここから学べることは多数あるでしょう。Service Workerの

プログラムを覚える上でWikiや掲示板を作ってみるのは良いネタですが、バイナリファイルの扱いを覚えたりする時には何を題材にすると良いでしょうか。敷居は高いですがチャレンジしてみて欲しいのがファミコンエミュレータです。 多くのプログラミング言語でファミコンエミュレータが作られていますが、今回はWebブラウザ上で動作するrustynesを紹介します。 rustynesの使い方 音も流れます。 特に問題なく遊べます。 幾つかのROMが用意されていて、すぐに遊べます。 rustynesはRustで開発されており、WebAssemblyで提供されています。そのため、Webながら申し分ない速度で動作します。ついにWebブラウザであってもここまでのレベルに達したのかと驚くはずです。ぜひお試しを。 rustynesはRust製のオープンソース・ソフトウェア（MIT License）です。 rustynes

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 2019年02月22日追記：こちら、ライセンスが非常に怪しい（というかブラック）です。記事は残しますが、ダウンロード/利用されないことをお勧めします。 プログラマーやWebデザイナーにとってフォントは気になる存在です。そのフォントの善し悪しで作業効率が大幅に変わってきます。視認性の悪いフォントを使うと不用意なバグを生み出してしまう可能性もあります。0やO、Iとlなどが見分けやすいものを選ぶべきです。 今回は開発者向けに作られたフォント、Consolasを紹介します。元々オープンソース・ソフトウェアではなかったのですが、v8.0からオープンソース（といっても現時点ではライセンスはありませんが…）になるとのことです。 Consolasの使い方 フォントの見栄えはこんな感じ。 コードを表

プログラミングコードはコンピュータ上で実行されるので、実行を開始して終わるまでが一瞬です。そのため、どう動いているのかを確認するのは困難で、初学者にとっては魔法のように感じてしまうでしょう。 そこで使ってみたいのがJavaScript Visualizerです。JavaScriptをステップ実行してその内容を把握できます。 JavaScript Visualizerの使い方 実行中です。 実行速度が指定でき、左側に書いたコードを実行してくれます。 thisの内容など変数も確認できます。 JavaScript Visualizerを使うことでJavaScriptのコードがどう実行されているのかが分かりやすくなります。処理の順番が分かればデバッグもしやすくなるでしょう。プログラミング初級者にもお勧めなソフトウェアです。 JavaScript VisualizerはJavaScript製のソフト