はじめに 仮想DOMのフレームワークが乱立する殺伐としたJS界隈ですが、Riot.jsが神すぎたので少しでも人口が増えればなーと思い書きます。 Riot.js自体の素晴らしさは以下の記事で十二分に伝わると思いますのでこの記事では省略ということで。 Riot.js 2.0 を触ってみた — まだReactで消耗しているの? Riotjsのいいところ また、最後の方に出てくる今回作ったプロジェクトは以下にリポジトリを置いてますので適当にお持ち帰ってくださっても結構です。 gaogao-9/testriot - GitHub 環境説明 今回はタイトルの通り、環境構築の話をメインでしていきます。使用するバージョンは以下のとおりです。 Node.js 6.x npm 3.x gulp 4.x (※執筆時点でβ版です！) babel 6.x Riot 2.x rollup 0.36.x gulp 4.

NoSQLデータベース「CouchDB」と互換性のあるJavaScriptデータベース「PouchDB」を使えば、オフライン時はローカルに、オンライン時はサーバーに保存する処理が簡単に実装できます。Webアプリの開発が捗りそうですね。 近年、クライアントサイドのWebアプリケーションはますます洗練されてきました。ブラウザーでは絶えずJavaScriptのパフォーマンスの改良が提供され、ジオロケーション（geolocation）などのリッチJavaScript APIやピアツーピア通信によってどんどん多くのことができるようになっています。 リッチWebアプリケーションが進歩するにつれ、クライアントサイドの良好なストレージメカニズムも必要になり、最近になってPouchDBなどのJavaScriptデータベースが登場してきました。 PouchDBとは？ PouchDBは、ブラウザーで快適に動作す

ども、大瀧です。 gRPCの関連ツールとしてHTTP/2リバースプロキシであるnghttpxを触っています。手軽に利用するためにDockerで実行する場合のTipsをいくつかご紹介します。 1. Dockerイメージはdit4c/nghttpxがオススメ Docker Hubでnghttpxを検索するといくつかのイメージが表示されますが、dit4c/nghttpxが使い勝手が良く、おすすめです。ベースイメージがAlpine Linuxなのでイメージのサイズが小さく、最小限のDockerfileなのでカスタマイズしやすいです。ただ、タグがルーズ(latestのみで、ビルド時のAlpine Linuxのパッケージ最新版を利用)なので、以下のようにnghttpx -vを実行してバージョンを確認してから利用するのが良いでしょう。 $ sudo docker run -it --rm dit4c/n

＊ はじめに!! ポケモンGO楽しいー！ こんにちは！ぴーすけです！ 今回はRiot.jsのルーティング機能でSPA(シングルページアプリケーション）を作りたいと思います！ とおもったのですが、SPAの定番である画面をふわっと切り替える方法が見つからなかったので、無理やり実装してみました！ もしもっと良い方法があったら教えてください！ ＊ まずはRiot.jsを使った基本的なルーティング機能!! 多分一番簡単なルーティン機能はこんな感じだと思います。上に固定メニューを用意したので、そのリンクを押すと画面が一部切り替わります。 ソースを見るには「html」タブを押してください。

Awesome Vim plugins from across the universe

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

CSS3 Multi-column Layout で Masonry のような（レスポンシブ）タイル・レイアウトを実現するCSSmasonry 👇こういうやつですね。 使いどころがあまり思いつかないかも知れませんが、 いつの間にかマルチカラム・レイアウトが現実的に使えるようになっていました。 これでレスポンシブなタイル・レイアウトが実現できます。 IE10以上OK（http://caniuse.com/#feat=multicolumn） "> 1% in JP"（http://browserl.ist/?q=%3E+1%25+in+JP） プロパティ 指定できるプロパティには下記のようなものがあります。 親要素 カラム数/幅 columns カラム間隔 column-gap 子要素 折り返し break-inside ※ 子要素はinline-blockにする必要があります。 Maso

ファイル検索ユーティリティThe Silver Searcherの速度と、GNU grepの多機能さを併せ持つ新たなファイル検索ユーティリティ「ripgrep」。Rustで作られたオープンソースソフトウェアで、Windows / Mac / Linux用の実行ファイルをダウンロードすることができます。 ripgrepの特徴としてはまず検索速度の速さが上げられます。Linuxカーネルソースツリーに対し「[A-Z]+_SUSPEND」という単語を検索した場合、高速検索が売りのThe Silver Searcherが0.753s必要なのに対し、ripgrepは0.245sとさらにその上を行っています。 機能面ではThe Silver Searcherと同様ripgrepも再帰検索をデフォルトで実行します。 .gitignore等で指定されているファイルや、隠しファイル、バイナリファイルなどを無視

こんにちは。 アプリケーション共同開発部 名古屋開発課の辻です。 2016 年 2 月に、Microsoft 社が Xamarin を買収したことは大きな話題となりました。 しかしながら、Xamarin でモバイルアプリケーションを作ることのメリットは何なのか、Xcode での開発と比較して不自由な部分はないのかなど、実際に触ってみないと分からない部分が多いのではないかと思います。 そこで、Xcode を用いて Objective-C や Swift で開発してきた iOS 開発者が、Xamarin.iOS を導入することで感じたことをお話ししたいと思います。 クロスプラットフォーム開発の再興 クロスプラットフォーム開発は、iOS / Android など、個別のプラットフォームに向けて開発する工数を削減することを目的として、HTML5 の普及期に盛り上がりを見せましたが、WebView

2016年は何もかもが会話型の年です。世界中でメッセージアプリの会話が飛び交い、アプリストアでの再訪率もエンゲージメント率も信じられないほど高くなっています。全てのコミュニティ、電子マーケット、オンデマンドサービス、デートアプリ、ソーシャルゲーム、eコマースの製品が、現在あるいは近い将来において、再訪、エンゲージメント、使用を急増させるエクスペリエンスの要素としてメッセージングの機能を持つでしょう。 こういう全てのアクティビティにともなって、会話型UIに関して多くの議論が重ねられてきました。また、単純なコマンドと、単純なレスポンス(多くはテキストですが、時には写真と組み合わされることもあります)において、人間とコンピュータのコミュニケーションのパターンでメッセージや音声のやり取りがどのように組み合わされるかを議論しました。私はテキストと写真が好きなことは好きなのですが、リッチでグラフィカル

TOP  >  WebDesign  >  WEBの表現をもっと豊かにしてくれるアニメーションまとめ「36 Brilliant User Interface Animations」 WEB上のユーザーインターフェイスの中で行われるちょっとしたアニメーションに驚きと感動をするということがたまにありますが、インターフェイスに即したアニメーションはWEBをより良いものにしてくれます。今日紹介するのはWEBの表現をもっと豊かにしてくれるアニメーションまとめ「36 Brilliant User Interface Animations」です。 Menu open / tick / close 全部で36ものアニメーションが原文ではまとめられていましたが、今日はその中からいくつか気になったものをピックアップして紹介したいと思います。 詳しくは以下 Sendingmail メールのアイコンが変形して紙飛

Spring BootによるAPIバックエンド構築実践ガイド 第2版 何千人もの開発者が、InfoQのミニブック「Practical Guide to Building an API Back End with Spring Boot」から、Spring Bootを使ったREST API構築の基礎を学んだ。この本では、出版時に新しくリリースされたバージョンである Spring Boot 2 を使用している。しかし、Spring Boot3が最近リリースされ、重要な変...

Content Security Policy（CSP）の潜在力をフル活用してもらう目的で、XSS対策支援ツール「CSP Evaluator」「CSP Mitigator」を公開した。 Web上で横行するクロスサイトスクリプティング（XSS）攻撃の防止に役立ててもらおうと、米Googleが「Content Security Policy」（CSP）を活用した対策を支援するツールを発表した。 XSSは信頼されたWebアプリケーションに不正なスクリプトを仕込む攻撃で、そうした攻撃の阻止を目的とするCSPは主要Webブラウザにサポートされている。 ところがGoogleが10億あまりのドメインを分析した調査では、CSPポリシーの95％がXSS攻撃を防ぐ役に立っていないことが判明。これは開発者がホワイトリストで外部スクリプトの読み込みを許容している上位15のドメインのうち、14ものドメインでパターン

「シェルスクリプトって冪等性ないじゃないですか」 そんなことをよく耳にします。しかし、if文を入れるだけで簡単に冪等性を担保したシェルスクリプトを書くことができます。 今回は、私が使う条件式を紹介します。基本的な形式なものなので、組み合わせると幅が広がりますよっ！ ファイル/フォルダ関係 ファイルの存在確認 -e 'ファイル名'で「ファイル名」が存在しているかチェックします。 if [ -e 'ファイル名' ]; then # ファイル/フォルダが存在していれば、ファイル/フォルダを削除するなど rm ファイル名 fi

2016/9/27 スタートアップRails勉強会発表資料 About @takashi Increments アプリケーションエンジニア 主にQiita:Team担当 最近入社した 最近 Incrementsの開発チームが大事にしていること HRTを大切にしたコミュニケーション 作業は意識的に自動化する 属人性を極限まで排除する 重要な価値に集中する Qiitaにおけるリモートワーク開発プロセス HRTを大切にしたコミュニケーション Humility(謙遜), Respect(尊敬), Trust(信頼) リモートワークにおいてHRTとは？ オンラインコミュニケーションは誤解を招きやすい (本当に)意図せず冷たく接しているように伝わる そこで なにげないレビューに を添えるだけで雰囲気が良くなる (けど普段喋れないこともあるので)月１回はオフラインで集まるようにしている 作業は意識的に自

超初心者のためにHTML・CSSを解説 今回は、HTMLやCSSを勉強してみたいって人のための入門記事です。 HTMLやCSSというのは、いわゆるマークアップ言語というもので、WEBサイトを作るために必須の言語になります。 HTMLは土台というか骨組みのようなもの。それを装飾するのがCSSです。 始めはちょっと難しく感じるかもしれませんが、慣れればそこまで難しいものではありません。 全く知識はないけど、WEBサイトを１から作ってみたい。ブログのカスタマイズがしたい。そんな人は一度目を通してみて下さい。 勉強したいけど、参考書買うお金がないよ…という人にはぴったりです。 筆者情報： 都内で働くWEBデザイナーです。個人としては、はてなブログ向けのデザインテーマも作ったりしてます。 はてなブログの超便利なデザインテーマ「Brooklyn」を作りました この記事の内容について 超初心者向けなので

1. qiraとは qiraとは世界的なハッカー、George Hotz氏 (ジョージ・ホッツ - Wikipedia) によって開発された高機能バイナリトレーサーであり、qiraという名は（QEMU Interactive Runtime Analyser）の略である。 GitHub - BinaryAnalysisPlatform/qira: QEMU Interactive Runtime Analyser 略語を見れば分かるがuser mode QEMUを使用したバイナリ解析ツールであり、ELFなどの実行形式バイナリを実際に動作させて各命令のレジスタ、メモリへの操作を逐次記録する。 これらの記録はweb UIを通して好きな命令位置にカーソルを移動させるだけで見ることができ、その時のレジスタ、メモリの記録が再現される仕組みになっている。ソフトウェアのデバッグやCTFにおけるバイナリ解

公開前に知人に見せたら、読むのに20分もかかったわ！！ と、お叱りを受けましたｗ オススメのツールやWEBサービスということで50ほど紹介していますが、僕の使用感のほかに、ところどころ経験談的なものが入っています。そのあたり、読むのがめんどうな方は読み飛ばしていただければ幸いです。 2万文字近くあるので、お時間ある際にゆるりと読んでいただければと思います。 それではお楽しみ下さい！ サイト解析に使えるツール・サービス import.io Juicer Ptengine GTmetrix CLOUD FLARE wayback timemachine シミラーウェブ Open Site Explorer サクラサクLABO aguse Built with ディレクションに使えるツール・サービス ウェブチェッカー Cat Mdes maindmaister ひとりブレスト 関連キーワード取得

About @mizchi Qiita のフロントエンドエンジニア React勝手エヴァンジェリスト 4ヶ月で14kg痩せた (80kg => 66kg) 近況 ビジネスドメインのリファクタが主でアウトプット少ない 泥臭系の知見は溜まってる 会社のメンバーが増えた + 自分以外のフロント系の人が増えたので、設計を明示しないといけない この資料は何 JSer.info 5周年記念イベント - connpass (2016/01/16) にて発表した資料を加筆したもの 如何にしてReactを「ふつうのウェブアプリ」に導入していくか ふつうのウェブアプリ NOT SPA SPA でなくともReactは使える jQuery に支配された現代のフロントエンドを改善したい => 複雑なモジュールを局所的に解決するのにReactが有用であることを示したい フロントエンドの流れ AJAX以前(~2003)