人気上昇中のJavaScriptライブラリを調べてみた【2015年版】
altJSの人気が混戦で面白い！ 2014年中に人気が急上昇してきており、「2015年では必須の知識」となりそうなJavaScriptライブラリをランキング形式で発表。 ← 前回 連載 INDEX 次回 → こちらのページで【2016年版】も発表！ ■ 2015年が始まり、心機一転で「今年こそはWeb開発を頑張ろう」と思っている人も少なくないだろう。そんな方々に向けて本稿では、2014年中に人気が急上昇してきており、「2015年では必須の知識」となりそうなJavaScriptライブラリをランキング形式で発表する（※昨年の2014年版はこちら）。 なお、本稿のランキング決定では、検索キーワードの流行を調査可能な「Googleトレンド」（「すべての国」「過去 12 か月間」「すべてのカテゴリ」「ウェブ検索」という条件で絞り込み）を使って、ライブラリの人気をジャンルごとに比較した（※ライブラリ名
htmlをjadeに変換するのに役立つwebサービス
シェアボタンを作成する場合、「 Twitterボタン」や「 Like Button」のページからhtmlを作成することが多いです。 jadeを使っている場合にサクッとこれらのhtmlをjadeに変換したいなと思って調べていたら、htmlをjadeに変換するサービスがいくつかありました。 HTML2Jade - HTML to Jade Online Realtime Converter HTML 2 Jade - a converter for HTML aaronpowell/html2jade-website githubでソースコードも公開されているのでローカルマシンで動かすこともできますね。
Formを作らずにJSでPOST送信
AタグやButtonのonclickなんかを引っ掛けてPOSTしたい場合、hidden要素しか持たない隠しformを作ったりしていましたが、Javascriptだけで処理できたのでメモ。 ※参考 HTMLでformを作らずにJavaScriptでPOST送信 /** * データをPOSTする * @param String アクション * @param Object POSTデータ連想配列 */ function execPost(action, data) { // フォームの生成 var form = document.createElement("form"); form.setAttribute("action", action); form.setAttribute("method", "post"); form.style.display = "none"; document.
LocalStorageがおもいのほか便利すぎたのでまとめ - それマグで！
localStorageを使って見た．食わず嫌いでした．すごく便利ですね cookieで保存するより相当便利です． cookie VS localstorage 比較 Cookieの特長 ドメイン毎にデータが保存される．(SameOriginの原則) Stringが保存される． HTTPリクエストで毎回サーバーに送られる JavaScriptからアクセス可能 有効期限がある LocalStorageの特長 ドメイン毎にデータが保存される．(SameOriginの原則) Stringが保存される． HTTPリクエストで毎回サーバーに送られない JavaScriptからアクセス可能 有効期限が特にない 比較まとめ Cookieの特質から、HTTP通信で送る特性を省いたものHTTP通信で送る必要がないので，Expires（期限）も省略される localStorageの保存方法 js> local
Private Presentation
Private content!This content has been marked as private by the uploader.
markdown + remark.js + gh-pages でプレゼン資料を公開する - Qiita
<DOCTYPE html> <html> <head><title>Presentation</title></head> <body> <script src="http://gnab.github.io/remark/downloads/remark-latest.min.js" type="text/javascript"></script> <script type="text/javascript"> var slideshow = remark.create({sourceUrl: "sample.md"}); </script> </body> </html> スライドの操作 j 次のスライド(→ ↓ PgDown Space) k 前のスライド(← ↑ PgUp) c スライドの clone f フルスクリーン p プレゼンモード h ヘルプの表示 ※ Firefox の
クールな画像拡大jQueryライブラリ「lity.js」、レスポンシブにも対応！ | SHINGO IRIE
クリックで画像が拡大されるライブラリはlightboxなど数多くありますが、その中でもデザインの邪魔をせず、実装もかんたんなライブラリ、それがlity.jsです。 使い方公式サイトから一式ダウンロード。 ダウンロードしたファイルの中で使うのはdistフォルダ内のlity.js、lity.cssのみ。 jQueryの後に読み込ませます。 <link href="lity.css" rel="stylesheet"> <script src="jquery.js"></script> <script src="lity.js"></script> あとは、 <a href="http://image.jpg" data-lity>Image</a> のようにdata-lity属性をつけるだけで動きます。かんたんですね。下がlity.jsの表示サンプルです。 WordPressへの組み込みWor
YAPC::Asia Tokyo 2015で「今フロントエンドで何が起こっているのか」という話をしました
YAPC::Asia Tokyo 2015で「今フロントエンドで何が起こっているのか」という話をしました。 http://yapcasia.org/2015/talk/show/94051590-fb11-11e4-a39d-8ab37d574c3a 満員になるほどたくさんの方に来て頂いてありがとうございました！ よくフロントエンドの話について聞かれると「Grunt or gulp」、「browserify or webpack」、「Angular or React」のような内容が多いので、新しいライブラリや仕様がそれぞれがどういった流れで登場し何を解決しようとしているのかを流れをもって紹介するような構成にしました。 jQuery以降というかなり広い範囲を対象にしたので、それを50minに収めるのために削ったトピックもかなりありますが...。 それでもASTなど普段ライブラリを使っているだ
Elmとはどんな言語か？その７つの特徴【Elmアドベントカレンダー2014 1日目】 - None is None is None
これはElm Advent Calendar 2014の1日目です。 Elmはクライアントサイド向けの関数型言語です。一体どんな言語なのでしょうか？ 1. HTML/CSS/JSにコンパイルされる ElmはHTML/CSS/JSにコンパイルして使用します。 この辺はJavaScriptにコンパイルされるAltJSに似ています。 AltJS同様、Elmも特別なランタイムライブラリは不要です。 ただし、Elmは1つのソースでHTML/CSS/JSをすべてまかなえるのが特徴です。 2. 独自の抽象化レイヤーを提供している 代表的なAltJSであるCoffeeScriptは"It's just JavaScript"をモットーにしています。すなわち、文法を改良するのみで、「中身」はJavaScript以上でも以下でもありません。 一方、Elmでは直接JSやCSSを操作することはできません。 基本的
Python+Selenium+Phantom.js+Beautifulsoupでスクレイピングする - ひよこになりたい
※【2018/04/17追記】 Phantom.jsはメンテナンスが終了したようです。今後はGoogle Chromeを使用してJavascriptの処理を行っていくことになります。以下の記事で解説していますので合わせてご覧ください。 zipsan.hatenablog.jp 【追記終わり】 最近スクレイピングのスクリプト書いて遊んでいるのでそれについてのメモがてらに。 Pythonでスクレイピングする方法は多々あるみたいなんですが，個人的に一番使いやすかった（慣れ？）のがこの組み合わせでした。 以前Pythonのurllib.request＋Beautifulsoupでレスポンスhtmlの解析をして次々とたどっていくようなスクリプトを書いていたんですが、これだとJavascriptで追加されたエレメントは受け取れなかったり、リダイレクト処理がめっちゃ大変だったり色々と面倒でしたが今回Se
いい加減、<script src="http://.. と書くのはやめましょう - DQNEO起業日記
外部サイトのJSファイルを読み込むときに、こういう書き方するのはやめましょう。 <script src="http://example.com/js/jquery.js"></script> 理由 あなたのサイトが、いつの日かSSLに対応することになったとき、そのscriptタグがバグの原因になります。 ご覧のとおり、HTTPSページの中でHTTP要素を読み込もうとすると、ブラウザによっては安全装置が働いて読み込んでくれないのです。 上の例ではjQueryの読み込みに失敗していますが、エラーメッセージ「Uncaught ReferenceError: jQuery is not defined 」を見てもHTTPS/HTTPのプロトコルが原因だとはすぐ気づかないので、わかりにくいバグになってしまいます。 結論 JSファイル(とかCSSとか画像とか)を読み込むときは、"http:"の部分を省
Backbone.JSからAngular2まで、全9大JavaScriptフレームワークを書き比べた! - paiza times
(English article is here.) こんにちは、吉岡([twitter:@yoshiokatsuneo])です。 ウェブ開発に欠かせないJavaScriptフレームワークですが、日々発展しておりReact.js, Ractive.js, Aurelia.js, AngularJS2.0など次々と新しいフレームワークが出てきています。 一体どれを使えばいいのか？何が違うのか？何から調べていいのか迷うことがあります。 そこで、現時点で事実上全てとなる、９大主要フレームワークについて、実際に使ってみて比較を行います。 Backbone.js Ember.js Knockout.js AngularJS(1.x) React.js Ractive.js vue.js Aurelia.js AngularJS2.0(アルファ版) これらのフレームワークでは、以下のような機能が実現さ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5動画プレイヤーを拡張させられる「jquery-video-extend」:phpspot開発日誌
CodePen - Front End Developer Playground & Code Editor in the Browser