Facebookなど表示が遅いSNSボタンを高速化する方法
ブログを運営していると、たくさんの方にシェアしてもらうために、FacobookやTwitter、Google+などのSNSボタンは必須です。しかし表示するのが遅く、ページ全体の表示速度を落としている原因の一つになっています。今回はこのSNSボタンを高速化して、ついでにボタン自体を自作してきれいに揃えます。 SNSボタン画像を準備する ボタンを自作するにあたり、素材となる画像を準備します。 【epsパスデータ】ソーシャル系ウェブサービスのロゴアイコン 一覧まとめ 各ソーシャルアイコンのベクターデータ（eps）を配布しています。これさえあればどのようなボタンでも作成できます。ありがたく使わせていただきましょう。【商用利用可】 フラットなフリーの日本向けソーシャルアイコンセットを作りました。 | バニデザノート pngファイルで配布されています。FacebookやTwitterのアイコン素材は海
Flash-Free Clipboard for the Web – Mozilla Hacks - the Web developer blog
As part of our effort to grow the Web platform and make it accessible to new devices, we are trying to reduce the Web’s dependence on Flash. As part of that effort, we are standardizing and exposing useful features which are currently only available to Flash to the entirety of the Web platform. One of the reasons why many sites still use Flash is because of its copy and cut clipboard APIs. Flash e
Web制作者は確実に学習しておきたい、日本語リファレンス一覧
作成：2015/08/24 更新：2017/04/16 Web制作 > 開発環境 フロントエンド開発規模が増大してカオスな状態みたいだし、何が流行っていて何を勉強すればよいのか分からない。今回は出来るだけ日本語対応してある、2015年も引き続きトレンドになるかもしれないリファレンスやツールを厳選しました。メジャーなもの中心。 エンジニア速報は Twitter の@commteで配信しています。 もくじ altJS 1.Dart 2.TypeScript MVC 3.AngularJS 4.Backbone js 5.React 6.Knockout js JavaScript テンプレートエンジン 7.JsRender 8.Underscore 開発環境 9.JSHint 10.LiveReload 11.VirtualBox / modern IE 12.BrowserStack alt
JavaScriptのチルダ演算子を使ってみる | バシャログ。
huluで特に見る予定のなかった映画を見てしまうminamiです。 JavaScriptにはいろいろな演算子があって便利に使えますが、~（チルダ）は今までほとんど使ってこなかったので使い道を探しました。 チルダは何をするもの？ JavaScriptのチルダ演算子はなにをするものでしょうか？調べてみます。 ビット演算子 ビットごとの NOT: オペランドの各ビットを反転します。 なるほど。わからん。かいつまんで説明すると、数値を10進数や16進数ではなく32ビットの集合（0と1）として扱います。2進数ですね。整数をビット反転させると必ず符号を反転して1引いた数になります。 console.log(~-4); // 3 console.log(~-3); // 2 console.log(~-2); // 1 console.log(~-1); // 0 console.log(~0); //
javascript のチルダ, indexOfの時に使えるよ〜とか - コンドルが飛んでいる。
チルダはビット反転演算子らしく, 整数をビット反転させると符号を反転させて1引いた数になるらしい. よって, -1 -> 1 -> 0 で, indexOf の返り値が if文で普通に使えるじゃん〜 みたいなコードをどっかで見かけた. 今日急に思い出して, 忘れそうなのでメモ. if (!~str.indexOf("foo")) {}
Waypoints
Waypoints is the easiest way to trigger a function when you scroll to an element. var waypoint = new Waypoint({ element: document.getElementById('waypoint'), handler: function(direction) { console.log('Scrolled to waypoint!') } }) Builds are available for multiple DOM libraries. jQuery 1.8+ Zepto 1.1+ No Framework IE 9+ npm install waypoints or bower install waypoints or GitHub Download Get Help
iPhone（Android）サイトで縦向き横向きを判定する2つの方法(javascript) : 森のコーディング
5月7 iPhone（Android）サイトで縦向き横向きを判定する2つの方法(javascript) カテゴリ:javascriptiphone/ipadサイト Tweet スマホサイトを作っていて、縦向きのときにしか見れないようにしたい、ということがあり、縦横を判定するjavascriptを探していたら2つの方法がありました。 ①window.orientationを使う方法 以下のようにします。 var isLandscape = function(){ if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf(
[JS]Webサイトの使いやすさ・かっこよさを向上させる、チェックしておきたいスクリプトのまとめ
コンテンツの邪魔にならず操作も快適な画像拡大、スクロールすると一旦ヘッダが隠れるけど上にスクロールすると出現、サーチアイコンをクリックするとにょい～ん伸びて検索ボックスになるなど、ユーザビリティ・アクセシビリティに配慮され、タッチデバイスやレスポンシブ対応にも一役買う優れもののスクリプトを紹介します。
![[JS]Webサイトの使いやすさ・かっこよさを向上させる、チェックしておきたいスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/0bc338c3b019bd35cf84848dd648330728cc081c/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015082406.png)
ブラウザゲームのプロトタイピングに役立つJavaScriptライブラリ - ABAの日誌
ブラウザで動くゲームのプロトタイプを作るとき、もちろんPhaserとかの機能満載のゲームエンジンを使ってもいいのだが、こういったエンジンは多彩な機能に応じてAPIが豊富すぎて、使いこなせるようになるまでが若干面倒なことがある。そういった時、もっと軽量のJavaScriptライブラリを機能ごとに組み合わせた方がお手軽に作れるのではないか。そう思って、ゲームで使う機能ごとのライブラリを探してみた。 グラフィックス p5.jsが役立ちそう。p5.jsはビジュアルデザイン向けとして有名な言語ProcessingをJavaScript向けライブラリとして提供したもの。似たものとしてProcessing.jsもあるが、こちらは元のProcessing言語をブラウザ上で動かすことに主眼を置いており、ライブラリとして使う分にはp5.jsの方が使いやすい。 Get Started見れば分かるように、crea
ユニークな見せ方や動きを実装したい時に使えそうなスクリプト 10 - NxWorld
他ではあまり見かけることのないユニークな見せ方や動きを実装したいとき、遊び心あるイースターエッグを仕込んでおきたいときなどに個人的に使えそうだなと思ったスクリプトをまとめてみました。 ブラウザやデバイスによっては実装できないものも幾つかあるのでその点は注意が必要ですが、いずれもそこまで難しい記述などもなく実装することができます。 窓に水滴がついていく様子を表現できる「rainyday.js」 とにかく実際に動いているデモを見てほしいのですが、雨が降って窓に水滴が徐々についていく様子をリアルに表現することができるスクリプトです。 水滴のサイズやついていくスピード、ぼかしや不透明度具合を調整することができます。 水面に滴が落ちているような感じを表現できる「Raindrops.js」 コンテンツやセクションの区切りなどを水面に見立て、そこに滴が落ちてきたようなエフェクトを実装できるjQueryプ
Typeset
An HTML pre-processor for web typography. Typeset provides typographic features used traditionally in fine printing which remain unavailable to browser layout engines. Typeset’s processing brings the following to your webpages: Real hanging punctuation Optical margin alignment Small caps detection Soft hyphen insertion Punctuation substitution Get the code on Git
jquery.cb-slideheader.js·スクロールでヘッダーを表示/非表示 MOONGIFT
ちょっと前までヘッダーをスクロールしても上部に残し続けるのが流行っていましたが、最近はさらに最初はヘッダーを大きく表示して、スクロールするとヘッダーサイズを小さくすると言うタイプが多く見られるようになっています。 実装は面倒なイメージがありますが、jquery.cb-slideheader.jsを使えば簡単に実現できます。 jquery.cb-slideheader.jsの使い方 jquery.cb-slideheader.jsにはいくつものメソッドが用意されていますので、それを使うことで多彩な表現が実現します。まずはスクロールするとヘッダーが表示されるもの。 スクロールでヘッダーが変わるもの。 スクロールでヘッダーを非表示に。ただしパララックス風です。 スクロールによってコンテンツを変更するのはパララックスエフェクトをはじめ、最近人気の効果です。jquery.cb-slideheader
ClashJS | AI Javascript Battle Game
Javascript artificial intelligence battle game. Create a spaceship AI and kill your enemies!
React + BrowserifyプロジェクトでJS/CSS/HTMLを圧縮(Minify)する - Umi Uyuraのブログ
ReactとMaterial UIを組み合わせると、それだけでBrowserifyで結合したJavaScriptファイルが1MB超えてしまうので、やっぱり圧縮とかした方が良いのかな―と思い、やり方を調べてみました。 ※2015/08/03更新 Licensifyを開発された @t_wada さんから改良の連絡をいただいたので、Licensifyの最新版1.4.0をもとに内容を更新しました。 Licensify - Nodeモジュールのライセンスコメントを生成する JSファイルを圧縮すると、ライセンスが記載されているコメントが消えてしまうという問題があるということで、本題の前に、Browserifyと組み合わせて、読み込んだNodeモジュールのライセンスコメントを生成してくれる Licensify を試しておくことにしました。 インストールはnpmから。 $ npm install lice
Minigrid
Minimal 2kb zero dependency cascading grid layout without pain. Demo There's a simple example on jsbin. Usage It works on a grid container with a group of grid items. Then: var grid = new Minigrid({ container: '.cards', item: '.card', gutter: 6 }); grid.mount(); Installation Get it from npm. npm install minigrid Or 1998 script tag from npmcdn: Upgrade Upgrading from v1.x or v2.x? Please read the f
様々なJavaScriptライブラリやフレームワーク、プラグイン等を探せる・「JavaScripting.com」 - かちびと.net
JavaScripting.comは公開されている様々なJSライブラリやフレームワーク、プラグイン等を探せるWebツールです。大量のJSライブラリ等を収集しており、細かくカテゴリ分け、探しやすいようにしてあるみたいです。それぞれのJSライブラリやフレームワークは本サイトやGithub等へのリンクとともに、概要、CDN、リポジトリなども確認可能となっています。 JavaScripting.com
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
underlinejs.org
GitHub - maechabin/jquery.cb-slideheader.js: A jQuery plugin to display or hide headerbar with a sliding motion
【JavaScript】～を含むかのチェック - Qiita
GitHub - markedjs/marked: A markdown parser and compiler. Built for speed.
