ElectronでGyazoっぽいUIを実現する - Qiita
Electron (旧atom-shell)を使えば、JSやモダンなWeb技術を活かしてクロスプラットフォームなPCアプリを作ることができる。 APIが充実していて、Webページをただ移植しただけの単純なアプリだけでなく、割と手の込んだUIも実現できるかもしれない。 たとえば、Gyazoのようなスクリーンショットを撮るための領域選択のUIを作ることができる。 実装方法 画面の全体に透明なウィンドウを作って、その上の透明なWebページでmousedownなどのイベントにあわせて必要なUI要素を描画する。 https://github.com/uiureo/electron-crop-rect/blob/master/main.js app.on('ready', function () { const Screen = require('screen') const size = Scree
JSX と TypeScript の混合 Flux または悪魔合体
JSX + TypeScript の悪魔合体 ギョーム的に気持ちになったので JSX + TypeScript をはじめました。 導入にあたってチーム内への説明を兼ねたブログ。AltJSに対して ES でいいじゃん派ですが、自分の型需要に対して 現状の Flowtype が辛みしかないのでやむをえず。 動機 紆余曲折あって結局 React を使うことにした React Component には JSX with Babel を使いたい（手書きは無理だ） UI 以外のロジックを持ったモジュールは型の恩恵に預かりたい Flowtype つらい TypeScript かー UI 周りは JSX で、その他の堅いロジックは TypeScript で書けばいいのでは？ 共存だ！！ メリットがあるのかも不明瞭ですが、分からないからこそ試してみようという感じです。JSX と TypeScript の境界
Higher-order Components
Enhance.js �$ �U � G �U import { Component } from "React"; export var Enhance = ComposedComponent => class extends Component { constructor() { this.state = { data: null }; } componentDidMount() { this.setState({ data: 'Hello' }); } render() { return <ComposedComponent {...this.props} data={this.state.data} />; } }; HigherOrderComponent.js Җ �U � � �U import { Enhance } from "./Enhance"; class MyC
npm update -g npm
npm command mini tips and news for front-end developer at CodeGrid 3rd anniversary party in Tokyo
関数の呼び出し元を取得する関数を定義する - Qiita
課題 expressでWebアプリを作っている時に、loggerとしてbunyanを利用していた。 その時に、logger.error({ req:req, res:res, error:error }, message)と毎回書くのがだるいので、req.logError(error, message)で済むように下記のようなmiddlewareを書いて対応した。 var bunyan = require('bunyan'); var log = bunyan.createLogger({name: 'myApp'}); module.exports = function (req, res, next) { req.logError = function (error, message) { log.error({ req:req, res:res, error:error }, mes
Bringing Asm.js to Chakra and Microsoft Edge
A couple of months back, we announced that we had started development on Asm.js. Support for Asm.js has been one of the top 10 most-requested items at the Microsoft Edge Developer Suggestion Box on UserVoice since we launched it in December 2014. Since that time, we’ve made good progress, and in Windows 10 Insider Preview builds starting with 10074, we are now previewing the early work that we’ve
React 0.13.x and Autobinding
If you’re using React 0.13's shiny new class syntax… class MyComponent extends React.Component { }…remember, there is no auto-binding. class MyComponent extends React.Component { componentDidMount() { // `this` won't be what you think it is MyFluxStore.listen(this.onChange); } onChange(state) { // this is not this :( this.setState(state); } }An easy way to fix this is to use Function#bind. class M
ESDocというJavaScript向けのAPIドキュメントツールを作りました - maru source
こんにちは丸山@h13i32maruです。 昨日、ESDocというツールをリリースしました。GW中になんとかリリースできて一息ついているところです。今回はそのESDocというツールについて紹介します。あと最後に雑談と宣伝があります。 ESDocとは？ ESDocとはJavaScript(ES6)向けのAPIドキュメントツールです。JavaScript界隈ではJSDocがデファクトスタンダードであり、ESDocもJSDocに触発されて作りました。なのでタグの使い方はなるべく互換性を持たせています。とはいえ不要だなと思うタグもかなりあったのでそれらは実装していません。 ESDocの特徴(主にJSDocに比べて)としてはこんな感じです。 詳細なドキュメントを生成する ドキュメントカバレッジを計測する テストコードとドキュメントを関連付ける ES6のclass, import/exportを使った
yahoo/fetchrを使う - Qiita
先日参加した、isomorphic tokyo meetupで紹介されていたfetchrが良さそうだったので、使ってみた。 fetchrが解決する課題 React＋Fluxでサーバサイドレンダリング時に、superagentやaxios、isomorphic-fetchなどのIsomorphicなHTTPクライアントを使ってデータをフェッチするが、そのまま使うと下記のような課題にぶつかる。 ブラウザから直接BEのAPIにアクセスできない（またはさせたくない、外部のAPIでキー・シークレットをブラウザ側で持ちたくない）場合、そのAPIとProxyするエントリポイントを作る必要がある。 フェッチ部分のロジックが共有されるので、ブラウザではWeb API経由でフェッチして、サーバサイドレンダリング時は直接DBにクエリを叩きたい、みたいなのを自分で実装すると面倒。 fetchrはBEや外部のAPI
PDFを見ながらMarkdownでメモを取れるアプリを書いた
NW.js(node-webkit)でazu/pdf-markdown-annotatorというアプリを作りました。 pdf-markdown-annotator 簡単に書くと PDFとMarkdownエディタを横に並べてメモを書けるアプリ PDFから選択範囲をエディタに引用 プレビューモードから該当ページにジャンプできる Markdownの読み書き Markdownのプレビュー という感じのシンプルなアプリです。 インストール latest binaryからダウンロード OS X, Windows, Linuxで多分動くはずです なぜ作ったか? 箇条書すると以下のような感じで作りました。 ES5の仕様書を読みたくなった PDF or HTML どっちで読む? メモ付けないと一瞬で忘れる HTMLにメモを書く? HTMLページにメモ付けるタイプはサービスに依存する(保存場所の問題 Home
Registry In A Box
NodeConf 2014 was fantastic! I love the format, and the location. It was my first NodeConf, and I enjoyed every bit of it. Except the Internet connection. While the WiFi itself was fine, with hundreds of us trying to download packages from the npm registry at the same time, the tiny Internet connection at Walker Creek Ranch left something to be desired. Some folks set up their own registry mirrors
Isomorphic Survival Guide
isomorphic tokyo meetup http://nodejs.connpass.com/event/13363/
Isomorphic web development with scala and scala.js
4. Motivation • Scala + Akka + SprayでAPIサーバーを開発 • StrongLoopのApi Exprolerみたいなのを作りたい • Scala.jsでisomorphicにつくる！ REST/HTTP server build on Akka Actors 6. 1. Sharing development environment: Building applications with sbt • プロジェクト定義 • Scalaのバージョン • 依存ライブラリ • コンパイルオプション Java/Scalaのビルドツール 設定 タスク name := “your_project_name” scalaVersion := "2.11.6" libraryDependencies ++= Seq( "com.typesafe.akka" %% “ak
isomorphic tokyo meetupの感想とメモ・資料 #isomorphic_meetup - pirosikick's diary
nodejs.connpass.com ニフティの場所難易度高い＆都庁前駅でGoogleマップ使ったら現在地が御徒町になるなどのトラブルがあり、最初の発表の半分くらいを聞き逃したorz 感想 真のIsomorphic（Truly Isomorphic）ってのがよくわかってなかったが、「IsomorphicってServer Side Renderingのことっしょ？」に対する「いやいや、Viewだけじゃなくて全部が両方で動くことやで」みたいな理解であっていますでしょうか？ 「Server SideレンダリングできるとSEOにいい」とか個別の事象に対して注目してしまっているので、 新しい技術や流行りの技術が出てきたことによってArchitectureがどう変化したかや、 それらが生まれる背景にある課題など、 もっと俯瞰して見る必要があるなと感じた。 @koichikさんの歴史から辿っていく感じ
State of the Moustache | Yeoman
This is a post by team member Addy Osmani. In this issue we cover generators for React, ES6, desktop apps and more. IntroAllo! Allo! April is a special month for us as it represents 3 years since the project first started and almost 2 years since we decided to rename the binary from yeoman to yo. This month also saw Yeoman grow to 1.3 million total installs and 1635 community generators. A huge th
JavaScriptでパーサコンビネータのコンセプトを理解する(「正規表現だけに頼ってはいけない」の続き) - id:anatooのブログ
前回の記事の続き。前回は、正規表現が使えない時はパーサコンビネータを使ってみると良いということを書いた。 パーサコンビネータのためのライブラリは、以下のように各言語ごとにいくつかある。 JavaScript - Parsimmon Ruby - rparsec treetop Python - parsy PHP - PHPPEG 各言語でいくつかあるのだが、正規表現と違ってパーサコンビネータには統一的な書き方があるわけではないし、ライブラリによって使い方も様々である。なので、今まで正規表現だけ使ってきた開発者がちょっと使ってみようと思っても、使い方がよくわからずに面食らってしまうことがある。 パーサコンビネータはテキストをパースするための非常に強力な仕組みだが、その背後にある考え方を理解しなければこれらのパーサコンビネータのライブラリを使う際の障害になるだろう。逆に言うと、それさえ理解で
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - react-cosmos/react-cosmos: Sandbox for developing and testing UI components in isolation
GitHub - skidding/react-component-tree: Serialize and reproduce the state of an entire tree of React components.
Google Code Archive - Long-term storage for Google Code Project Hosting.
React.js meetup #1 - 資料一覧 - connpass
