What's new in the Chrome DevTools - DevFest
I'm a front-end web developer working at Shazam We're hiring for many engineering-based roles. "There is cake in the kitchen" GDE Elements panel Inspecting the DOM Viewing font! information in the computed pane span { font-family: 'Lily Script One', Arial, Cursive; } Force element state indicators Pseudo elements as their own nodes Cmd + Click for Selectors, properties and their values Inspect Sha
軽量でパワフルなデータバインディングMVVM, vue.jsで遊んでみた - mizchi's blog
Vue.jsは軽量なMVVMライブラリ。 vue.js http://vuejs.org/ 使ってみた感じ、かなり手触りがよいので、紹介する。 概要 handlebars風のテンプレートを書いて、DOMを展開する。普通のテンプレートエンジンと違い、$dataアクセッサを通じて値を書き換えることで、テンプレート展開後も値が同期する(!!!)。 一言で言うと軽量Angular。コード読んだ感じ、内部的にもAngularから大量にコードを持ってきた痕跡がある。$watchとdirective定義がキモなのは同じ。 とはいっても、軽量なのは使う側のAPI側だけで、内部実装はそれなりに重い。APIを軽量にすることで、Angularのデメリットである学習コスト部分を限りなく削ることを目標にしているんじゃないだろうか。 大雑把な使い方 テンプレートを書く。対応するデータ構造を書く。{foo: 'bar'
カーゴ・カルトCSS
CSSを書いたり管理したりするにはなんらかの方法論があった方が良い、と広く考えられている。しかし実際に取り入れられている手法の中には、セマンティクス上の品質や、長期にわたるメンテナンス性に悪影響を与えるものもある。ここでは、CSSの「フレームワーク方法論」として提唱されているテクニックの問題点や、その問題を僕たちウェブ・ディベロッパーがどうすれば解決できるかについて論じてみようと思う。 現在、CSS開発におけるフレームワーク方法論として、BEMなど類似のテクニックがいくつかあるが、もっとも有名なのはOOCSSだろう。これらの方法論はCSSにオブジェクト指向プログラミングの原則を適用しようと試みる。しかしながら、両者の間にはそもそも宣言型スタイル言語とオブジェクト指向ソフトウェア設計原則というコンセプト上の不一致がある。その結果、経験の浅いディベロッパーが気づきにくいような複雑な問題を持ち込
Productionizing A Flask Application
Looking for Python Tutoring? Remote and local (NYC) slots still available! Email me at jeff@jeffknupp.com for more info. When I released bull as an open source project, it was in quite a state. Everything was in a single file, there was inline HTML (ew), and both tests and documentation were non-existent. Over the past week, I've spent some time "productionizing" bull, and recounting the steps I t
外国語の意味と例文を調べる - Qiita
趣味の関係でよく日本語⇔ロシア語の単語の意味と例文を調べることがあるのだが、 分からない単語に出会うたびにchromeを開き、google translateにアクセスしているのでは面倒。 ということで、流行りのjqを使って我らが同志terminalを使って単語の意味と例文を調べられるようなスクリプトを書いてみた。 (jq初デビューのため間違いやアドバイスなどご指摘を歓迎します！) インストール まずはjqのインストール for OSX macならhomebrewでしょう。 function translate(){ local FROM local TO if [ $# -eq 1 ]; then FROM="en" TO="ja" elif [ $# -eq 3 ]; then FROM=$2 TO=$3 else echo "[usage] translate phrase [fro
Saying Goodbye To Python
This post is long overdue; this isn’t a declaration of intent (any intent was long ago made real), just my reflection about my own path. I left the Python world a long time ago but I never took a chance to say goodbye. While I had moved on from Python years ago, I felt a certain attachment to it well past then, not quite admitting to myself that I wasn’t coming back. When my proposal for PyCon 201
つまらないGruntタスク
Gruntfile.jsをサッと開く手段としてeditという簡単なタスクを勢いで書いたんだけど、無意味でつまらないGruntタスクだった。Gruntには様々なタスクがあり、自分でもNode.jsを駆使して自由に書けるので、色々やりたくなる。けれどもグッとこらえて、ワークフローにおける定型作業の自動化に絞った方が、ワークフローと開発環境、そしてGruntfile.jsに優しい。 grunt-contrib-watchを使ったSassの自動コンパイルやLiveReloadのタスクは確かに便利なんだけど、開発から公開までのワークフローの段階として必須というわけじゃない。これらはタスクというよりも環境なので、別に自分好みの環境を作った方が集中できるし、好みでない環境を押し付けずに(そして押し付けられずに)済む。 また、Gruntでなんでもやることに慣れてしまうと、設定されてるしそれで良いかみたいな
AWS-EC2上に自分用のSTUNサーバを立てる話 - blog::wnotes.net
WebRTCネタの続きです 間が空いてしまいましたが、引き続きWebRTC関連のエントリです。そして久々にLinux関連です。なお、前回同様調べながらの備忘録的エントリとなっています。間違っている部分もあるかもなので、専門家の方の指摘など頂けると嬉しいです。 STUNサーバも自分で用意したい 前回のエントリではうまくできなかったSTUNサーバ構築のリベンジです。今回のサーバはAWSのEC2です。（やっぱりさくらではうまく行かなかった…推測される理由は後述） WebRTCを使ったサービスや社内アプリを開発する場合（やる可能性は低いかもですが）、当然 GoogleのようなPublicなSTUNサーバを使うのは憚られますし（SkyWayも独自に提供してますね）、認証機構などもしっかりとしておきたいですよね。今回も自分なりに理解した部分を交えて書いていきます。 EC2インスタンスのセットアップ 標
やったー JS で LGTM ジェネレターできたよー！ #HTML5 #File_API - 鈴木うどんの横須賀おもしろ生活
http://ochinchin.org/~udonchan/lgtm_gen/ コードはこのへんにある。 いわゆる HTML5 っぽいプログラムで、File API 使ってローカルの画像ファイルを canvas 読み込んで編集するという練習課題的プログラム。 canvas をどうやってファイルに落とすかのやり方はいろいろ思案したのだけれども、 今のところ以下のような書き方をしている。 var type = 'image/png'; var url = $canvas[0].toDataURL(type); var link = document.createElement('a'); link.href = url; link.download = 'output.png'; var click = document.createEvent("Event"); click.initEve
ムービープロトタイピング - ひがやすを技術ブログ
pixtuneというアプリをリリースしました。 pixtuneをひとことで説明すると、「Play the moment」。 自分の撮った写真と、写真を撮った当時にはやっていた曲を一緒に楽しむアプリです。どういうアプリなのかは、動画を見た方が早いと思うので、まずはこちらをどうぞ。 無料なので、興味がある方は、ぜひダウンロードしてください。 https://itunes.apple.com/jp/app/pixtune/id722162353?mt=8 今回は、このアプリの開発に使ったムービープロトタイピングという開発手法を紹介したいと思います。 ムービープロトタイピングは、私が勝手につけた名前(大目に見てください)で、アプリのプロトタイプをムービーで高速に行う手法です。プロトタイピングの手法としては、ペーパープロトタイピングが、手軽かつ効果的で、このプロジェクトでも、最初、ペーパープロトタイ
marginalia -- Marginalia
If you like this script, please donate to keep development active! ' } }, /** Internal 'global' variables. */ vars : { discoveredBrushes : null, highlighters : {} }, /** This object is populated by user included external brush files. */ brushes : {}, /** Common regular expressions. */ regexLib : { multiLineCComments : /\/\*[\s\S]*?\*\//gm, singleLineCComments : /\/\/.*$/gm, singleLinePerlComments
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://cutjs.org/