On Scroll Header Effects | Codrops
Some inspiration for headers that animate when scrolling the page. You’ve surely seen those really cool on scroll effects for headers that have been around lately. One example is the header on the Riot Industries website by Phil Renaud which rotates in 3d on click and enlarges when scrolling down. Similar work has been done by Johnny Simpson where he explores Scroll Activated Fixed Header Animatio
On Scroll Effect Layout | Codrops
An on scroll effect template that animates the sides of sections once they are in the viewport. This Blueprint is a template for a on scroll effect layout. We’ve had some requests on how to achieve this effect of animating elements once they are in the viewport and decided to create a Blueprint for it. It works with adding a class for animating the two sides of a section. There is an example effec
スマートフォン向けのアプリダウンロードバナーを切り替える·jQuery Smart Banner MOONGIFT
jQuery Smart BannerはjQuery/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 iPhoneやAndroidでWebアプリを配布しているWebサイトを訪れたらスマートバナーを使ってダウンロードリンクを提示してあげるとダウンロードまでスムーズに運べそうです。そこで使ってみたいのがjQuery Smart Bannerです。 iPhoneの場合、このようによく見た事があるバナーが表示できます。 Andoridの場合。こちらもAndroidっぽい色合いのバナー表示ができます。 iPhoneであればメタタグを入れる事でスマートバナーが元々表示できますが、強制的に表示されてしまうなどシンプルな反面、あまり使い勝手の良い仕組みではありません。jQuery Smart Bannerであれば複数アプリの出し分けであったり、内容の変更も柔軟に行えるの
popline - An HTML5 Rich-Text-Editor Toolbar
Popline is a non-intrusive WYSIWYG editor. It shows up only after selecting a piece of text on the page. Inspired by popclip. It provides commonly used editing features out-of-the-box. Easy to extend, Easy to customize. Two modes supported, Edit mode and View mode. Two popup ways supported, Fixed and Relative. Compatible with Chrome, Safari, Firefox, Opera 15.0+, IE 8+ The default theme popline us
RawGit
RawGit has reached the end of its useful life October 8, 2018 RawGit is now in a sunset phase and will soon shut down. It's been a fun five years, but all things must end. GitHub repositories that served content through RawGit within the last month will continue to be served until at least October of 2019. URLs for other repositories are no longer being served. If you're currently using RawGit, pl
The 4 Most Important Steps Before Selling or Transferring Ownership of a Mac
The 4 Most Important Steps Before Selling or Transferring Ownership of a Mac If you plan on selling a Mac or transferring it to a new owner, you will want to take a few very important steps beforehand rather than just handing the machine off as is. We will walk through exactly what you should do before ever changing ownership of a Mac, including backing up all of your files and data, deauthorizing
テストエンジニアリング、DevOps のこれから #testingcasual - naoyaのはてなダイアリー
一昨日 Testing Casual Talks #1 に参加した。名前の通り、ソフトウェアテストに関するカジュアルなカンファレンス。とても面白かった。すこし思ったところを書いていこう。 テストのエンジニアリング トップバッターの @ikasam_a さんの発表では Software Engineer in Test at DeNA ということで、氏が勤務先でテストエンジニアリング部門を立ち上げていくにあたってのいきさつや背景といったところが述べられていた。 テストは開発者の生産性を向上するためにある、生産性向上のためにテストを書くテストエンジニア、近年複雑化するテストの実行環境を構築するのもテストエンジニアの役目、"Testing Activities SHOULD be in Developments" ─ テスト活動は (従来型のQAのように開発の外ではなく) 開発の中で行われるべき
うちの子はわがまま？負けず嫌い？上手な褒め言葉って？｜No.1 少年サッカーサイト｜サカイク
質問をくれたのは「とにかく子どもを褒めている」というお母さん。甘やかさないように、ダメなものはダメとけじめをつけつつ、サッカーにつ いては 「シュートがカッコよかった」「いいチャレンジだったよ」と絶対に「ダメ」という言葉は口にしないようにしているという、勉強熱心なお母さんです。ときには怒りたくなるときもあるけど、色々勉強してグッと我慢している……。そんなお母さんも「子どもの負けず嫌い」には手を焼いているとのこと。
Google Chart Tools の使い方 | プログラマーズ雑記帳
いろんなグラフがかける Google Chart Tools の使い方について書いてみました。 Google Chart Tools の使い方 (今回) 表とデータの扱い 棒グラフ (積み上げ棒グラフ) 散布図 折れ線グラフ、面積グラフ 円グラフ、計器図 組織図 グラフの合成 動的なグラフの変更 グラフと表の連携 フィルタリング(Dashboard と Control) データロールによる特異点の表示と注釈付きタイムライン スプレッドシート(表計算)で作成したグラフの公開 今回は Google Chart Tools の紹介と基本的な使い方の説明です。 Google Chart Tools とは グラフの種類 ライセンス 使い方 オプション Google Chart Tools とは Google Chart Tools は SVG を使ったグラフを表示するツールで、 JavaScript
Highchartsを使ってみた(3) 複合グラフ
今回は前回作った折れ線グラフに棒グラフを追加しようと思います。 前回作成した折れ線グラフはこんな感じです。（ソースは「HighchartsSample1.zip」を参照） 作りたいグラフはこんな感じの、折れ線グラフと棒グラフが混在したものです。 (1) 2番目のY軸の追加 2番目のY軸として、電力使用量をグラフの右側に表示します。javascriptのyAxis部分を変更します。 yAxis: [{ title: { text: ‘節電率(%)’ } }, { title: { text: ‘電力使用量(万KW)’, style: { color: ‘#89A54E’ } }, opposite: true }], ポイントとしては、「opposite: true」の部分です。これを指定しないとグラフの右側にラベルが表示されません。 ブラウザで表示します。ちゃんと右側にラベルが表示されてい
CSS と jQuery で作るスクロールにあわせて回転するロゴ
Tumblr のスタッフ Blog を見てたら、ロゴ （正確にはロゴの周囲の部分） がスクロールにあわせて回転してて、ちょっと面白かったのでサンプルを使って実際にどういう風に実装されているかを解説してみようと思います。 結構仕組みは簡単で、jQuery の scrollTop() を使ってスクロール位置を取得し、その値を CSS の transform プロパティに都度突っ込んでいくっていう感じ。ソースコード自体は数行で実装できます。 まずは実際に動作するサンプルを下記に。 スクロールにあわせて CSS で回転するロゴのサンプル 画面をスクロールすると、ロゴが回転すると思います。わかりやすいようにロゴはスクロールに対して位置固定しています。ロゴの内容は個人的趣味によるものですので深い意味はありません... わかる人にはわかると思う。 なお、サンプルは transform プロパティを使用し
AdSense の非同期コード使ったらスクリーンサイズにあわせた広告サイズの変更が超簡単だった件
Google AdSense の新しい非同期型広告コードでは、CSS でサイズを指定することで配信される広告サイズを簡単にコントロールすることが可能になりました。 Inside Adsense で、Google AdSense の新しい非同期型広告コードの紹介がされてて、この非同期コード自体はちょっと前から提供開始されていたんですがまだ使ったことなかったのでちょうどいい機会だから差し替えてみようということで当 Blog の広告コードを差し替えたんですよね。 その時に、そういえば、ブラウザのウィンドウサイズや、デバイスのスクリーンサイズごとに広告のサイズを出し分けるってやつ、これもちょっと前にそういう改変が許可されたんですが、新しい非同期型広告コードだとどうやればいいのかなと思って試してみたらめちゃくちゃ簡単だったので紹介。 新しい広告コードによってユーザーの利便性が高まります ： Insi
iOSアプリでツールチップのチュートリアルをどのように実装するか | Technology-Gym
iOSアプリで初回起動時にアプリケーションの説明などのチュートリアルを設ける事がありますが、 よく見かけるパターンが何個かあると思います Chardin.js のように実際の画面で、説明したい部分に説明を載せる感じの方法。 workshirt/WSCoachMarksView のようなスポットライトあてて説明するのも似たようなパターンです。 もう一つは、これが実装もしやすいのでよく見かける気がしますが、 チュートリアル用の画面を用意して表示するタイプ。 evernoteのアプリなどもそうですが、PageControlを使ってスワイプして進めるタイプが多いです。 これは、StoryBoardで実際にそれぞれの画面を作って、 NavigationControllerで遷移するような仕組みを作ればいいだけなので、作りやすいのです。 Using UIPageControl as a contain
Organic Development | Envato Tuts+
Introduction I was working as a graphic designer a few years ago and a common problem that I would run into was picking color schemes for new projects. One of my colleagues said, "Just pick a nice photo and grab colors from there". This technique works well because photos offer you a natural combination of colors. So I was thinking, "Why not transfer this same concept to my work as a coder?". And
Diving Into Symfony 2 | Envato Tuts+
Frameworks are hot topics in the web-industry and have been for some time. In this vast sea of flavors is Symfony - an extensive PHP framework that follows the ever popular MVC paradigm. Its learning curve is probably a little steeper than its fellow competitors, like CodeIgniter. Don't worry, once it grows on you, you'll feel more powerful than ever and you'll be able to develop fantastic applica
Symfony2 で新規プロジェクトを作る時にいつもやっていること
Symfony2 で新規プロジェクトを作成して開発を始める時にいつもやっていることをまとめました。 動作確認環境 Mac OSX Mountain LionPHP 5.4Symfony 2.3 目次 インストール cache, logs ディレクトリに書き込み権限を与える Symfony2 の動作要件を満たせているか確認する AcmeDemoBundle を削除 README.md を削除 .gitignore を作成 parameters.yml 設定 generator でバンドルのひな形を自動生成 バンドルのサービスコンテナの設定ファイルを services.yml に変更する データベースから Entity を自動生成する CRUD 一式を自動生成する 開発中によく使用するコマンド インストール まずは Symfony2 をインストール。Symfony2 のバージョンは適宜最新版に
quickfix を便利に使う設定 - 永遠に未完成
Vim Advent Calendar 2012 の 220 日目の記事です。 最近の Vim Advent Calendar は子供が生まれたり結婚したりで大変めでたいことが続いていますね。良いことです。みなさんも Vim Advent Calendar で執筆すれば御利益があるかもしれませんよ? あ、ちなみに私はいつも通りです。特に変わったことはありません。 さて、今回は私が quickfix で行っている設定をいくつか晒してみたいと思います。 設定方法 quickfix ウィンドウは filetype=qf が設定されます。なので、filetype qf に対する ftplugin を書けばよいです。つまり、 ~/.vim/after/ftplugin/qf.vimもしくは ~/vimfiles/after/ftplugin/qf.vimこの辺りに設定を書いていきます。 p で pr
heroku で phantomjs を使用した時に日本語が文字化けするのを解決する - C++でゲームプログラミング
heroku 内で phantomjs を使用して Webサイトのスクリーンショットを保存しようとしたんですが、その際に次のように日本語が文字化けしてしましまいました。 [解決] アプリケーションのリポジトリに ~/.fonts/ ディレクトリを追加し、そのディレクトリに日本語に対応している .ttf ファイルを保存して commit & push すればそのフォントを使用するようになりました。 実際のディレクトリ構成はこんな感じです。 heroku や phantomjs 側で設定等を追加する必要も特にありませんでした。 上記は Ume-font を使用した状態です。 [注意] heroku の環境変数に LANG=ja_JP.UTF-8を設定した場合、フォントファイルを追加しても文字化けしたままでした。 ここら辺は詳しく調べなかったのでもしかしたら他の要素が原因になっているかも知れませ
weinre - Home
http://groups.google.com/group/weinre (for weinre usage) More information on weinre's big brothers, Web Inspector / Google Chrome Developer Tools, is available at Google's Chrome Dev Tools pages and Apple's Web Inspector pages. If you aren't familiar with FireBug or Web Inspector, weinre isn't going to make too much sense to you. weinre reuses the user interface code from the Web Inspector project
LiveReload
LiveReload 2 proudly presents… The Web Developer Wonderland(a happy land where browsers don't need a Refresh button) CSS edits and image changes apply live.CoffeeScript, SASS, LESS and others just work. Citizenship is granted through the Mac App Store. Windows permanent residency issues are being worked out, temporary stay already allowed. What does LiveReload do?LiveReload monitors changes in the
新著 「スマートフォンサイトUI/UXデザイン実践テクニック」 が7月26日発売
スマートフォンサイトやアプリケーションの UI 設計やユーザビリティについての基本的な知識やテクニックについてまとめた新著 「スマートフォンサイトUI/UXデザイン実践テクニック」 が 7月26日に発売されます。 今週の金曜日ですが、7月26日に新しい著書、「スマートフォンサイトUI/UXデザイン実践テクニック」 がマイナビさんより発売されます。 今回も前著同様 2人での共著ですが、私はメインではなくサポート的立ち位置でのお手伝い執筆。メインは @hibiki443 です。 今回の書籍はタイトル通りなんですが、スマートフォンに的を絞って、Web サイトやアプリケーションの UI 設計やユーザビリティに関する考え方や実践的なテクニックを解説する内容になっています。 スマートフォンサイトやアプリケーションの開発をこれからはじめる初級者の方を対象に、これは知っておいた方がいいよってことを幅広く扱
リズムに合わせてタップするとロック解除·YLTapPatternRecognizer MOONGIFT
YLTapPatternRecognizerはiOS用、Objective-C製のオープンソース・ソフトウェア（MIT License）です。 スマートフォンの機能をロックして、それを解除する方法には幾つか存在します。有名なところではソフトウェアキーボードによる入力や、特定のパターンで指を動かすなどがあります。今回はもっと面白い、タップパターンを読み取るYLTapPatternRecognizerを紹介します。 ロック画面です。この時点では機能を使えません。 猫踏んじゃったの最後の部分に合わせてタップするとロックが解除されます。 YLTapPatternRecognizerではタップすれば良いという訳ではなく、shave and a haircutのリズム（猫踏んじゃったの最後の部分）に合わせてタップする必要があります。タップのパターンはカスタマイズできます。非常にユニークなロックシステム
Introduction to Express | Envato Tuts+
A few years ago I, like many people, began to hear more and more about Node.js. I had been building server-side applications in ColdFusion for over a decade but was always curious to see how other platforms worked as well. I enjoyed JavaScript on the client and using it on the server seemed fascinating. (Although not necessarily new. I'm old enough to remember when Netscape released SSJS back in t
Required JavaScript Reading | Envato Tuts+
I'm asked regularly about books and online resources to get up to speed on JavaScript. Seems like everyone wants to get in on the JS action and with good reason; it's a great language to know if you're interested in exciting career opportunities. It's also pretty fun to play with. With JavaScript's increased popularity, the number of books, blogs and tutorials about the language have grown exponen
phantomjs でアンカーへ移動した状態でスクリーンショットを保存したかった - C++でゲームプログラミング
phantomjs で https://github.com/osyo-manga/vim-textobj-multiblock/blob/master/plugin/textobj/multiblock.vim#L10 みたいにアンカーへ移動した状態でスクリーンショットを保存したかったんですが、そのまま開くだけでは移動しなかったので自前でクリッピングしました。 [ソース] var url = "https://github.com/osyo-manga/vim-textobj-multiblock/blob/master/plugin/textobj/multiblock.vim#L10" var output = "output.png" var page = require('webpage').create(); page.open(url, function (status) {
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Bootplus
Popular UIs | Free PSDs of popular Web Interfaces
ゲームを読む力。選手の「洞察力」を高める3原則｜No.1 少年サッカーサイト｜サカイク