Mithril
TOPICS Web , JavaScript 発行年月日 2015年08月 ISBN 978-4-87311-744-7 FORMAT EPUB Mithrilは2014年にリリースされたクライアントサイドMVCフレームワークです。ムダが削ぎ落とされ、必要な機能にフォーカスされており、旧来のフレームワークでは成し得なかったパフォーマンスを引き出します。 本書は、そのMithrilを使ったシングルページアプリケーションの作り方について紹介します。まずシングルページアプリケーションの概要から、Mithrilの役割、アプリケーションのコード、アプリケーションの各レイヤーについて、またユーザインタフェースのライブラリの活用方法についても紹介します。さらに大規模なアプリケーション開発を補助する機能について、ラウターの仕組み、コンポーネント、またユニットテストの仕方やMithrilの自動再描画システ
イベントオブジェクトまとめ - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 イベントオブジェクトの扱いはブラウザによって異なり、利用には注意が必要です。Internet Explorerでは「window.event」、他のブラウザではイベントハンドラにイベントオブジェクトが渡されます。 「event」オブジェクト自体はSafari 2でもOperaでも存在し、Internet Explorer同様にアクセスすることができます。ただしFirefoxはダメ。（仕様上はFirefoxの処理が正しい） なので実際に利用する際には、イベントオブジェクトの有無に応じてInternet Explorerと他ブラウザで処理を分ける必要があります。また、イベ
私が今までクロージャを理解できなかった理由 - プログラミングを勉強するブログ
Javascriptを勉強する上で誰もがつまずくと言われるクロージャですが私も例に漏れず理解できないでいました。 さまざまな解説サイトを読んだりサンプルコードを書き換えてみたりして 静的なスコープの言語で利用できる。 関数が終了したあともそのローカル変数が参照できる。 といったクロージャの「仕組み」や「特徴」については分かったものの、もっとも重要ともいえる 「どういう時にクロージャを使えばいいのか」 が分かりませんでした。言いかえると友人がなんて言って悩んでいる時に 「そう言う時はクロージャを使うといいよ」 と言ってあげればいいのか。 例えばプログラムの勉強を始めた友人が 「これと同じ処理もう何回も書いてるんだよ。コピペばっかりしてる気がする」 と言って悩んでいたら 「そこを関数にすればいいんじゃない？」 って教えてあげますよね。 これと同じように友人が 「○○○○○○なんだよ、うまい方法
JavaScriptとコールバック地獄 - Yahoo! JAPAN Tech Blog
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo!デベロッパーネットワークの中野(@Hiraku)です。JavaScriptでサンプルコードを書く機会があったので、どんなインターフェースで提供するのが便利なのか考えてみました。よく問題になるコールバックのネスト問題について、一般的な話をまとめてみます。 お題 突然ですが、次のような処理を行う必要があるとします。 「0」を出力する 1秒待つ 「1」を出力する 1秒待つ 「2」を出力する これをプログラムで書くとどうなるでしょうか？ シェルスクリプトの場合（同期） たとえばシェルスクリプトで素直に書くと、次のようになります。
Grunt: The JavaScript Task Runner
Why use a task runner?In one word: automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes. After you've configured it through a Gruntfile, a task runner can do most of that mundane work for you—and your team—with basically zero effort. Why use Grunt?The Grunt ecosystem is huge and it's growin
CreativeJS
Two CreativeJS workshops are back and updated. The first, CreativeJS for Designers is aimed at creative people who have never done any JavaScript programming. I learned to code by drawing pictures and animating stuff, and it’s seriously fun – the … Continue reading → @oosmoxiecode has released this lovely C64 styled post-processing WebGL shader. Seen running on-top of a trailer for the forthcoming
jQuery++
Hi, I’m jQuery++. I am a MIT licensed collection of extremely useful DOM helpers and special events for jQuery 1.8 and later. I’m not a UI project like jQuery UI or jQuery Tools. Instead, I’m all about providing low-level utilities for things that jQuery doesn’t support. If Underscore is jQuery’s functional-programming tie, I am jQuery’s bald-spot covering toupee. Select the plugins you want and c
undefinedを引数に指定する | code up
引数にundefinedをつける理由 (function( window, undefined ) { // ...省略 })( window ); jQueryに限らずよく見かける手法なので何か理由があるのだろうと調べたらJavaScript function with 'undefined' parameter - Stack Overflowでヒントを見つけた。 Stack Overflowの回答および、そこでポイントされていたPaul Irish氏のビデオ; 10 Things I Learned from the jQuery Source(4:15から7:35あたり)を見ると次のような理由から使用を推奨しているようだ。 別のスクリプトでundefinedに違う値を指定していても動作が保証される。nullは予約後なので値を代入することができないが、undefinedはできてしまう
JavaScriptにおける良く使う正規表現｜web bibo
よく使う正規表現例 メールアドレスを検索 例1：[\w.-]+@[\w.-]+ 例2：[\w\d_-]+@[\w\d_-]+\.[\w\d._-]+ 例3：[a-zA-Z0-9!$&*.=^`|~#%'+\/?_{}-]+@([a-zA-Z0-9_-]+\.)+[a-zA-Z]{2,4} ※例3はメールアドレスを厳しくチェックする場合 URLを検索 (\S+)://([^:/]+)(:(\d+))?(/[^#\s]*)(#(\S+))? IPアドレスを検索 (\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3}) 郵便番号を検索 \d{3}-\d{4} [ ]で囲まれた文字列を検索 \[[^\[]*?\] HTMLタグを検索 <("[^"]*"|'[^']*'|[^'">])*> 正規表現を使うにあたって注意すること new RegExp()の引数には正規表
マーカー、アイコン｜Google Maps JavaScript API v3｜Ajax｜PHP & JavaScript Room
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" /> <!-- スマートフォン向けviewportの指定 --> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <!-- Google Maps APIの読み込み --> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="t
古いブラウザでもCSS3セレクタを使ってWebページをデザインできるようにしてみた - latest log
uuCSSBoost.js は uuAltCSS.js に名前が変更になりましたが、一部の説明が記事を書いた当時の古い名前のままになっています。最新版では、uuCSSBoost.revalidate() は廃止され uuAltCSS() を呼び出すように変更になっています。 コードの解説を追記しました。 「最新の規格を実装したブラウザが登場しても、IE6 のせいで諦めるしかないのか」 「CSS3セレクタを古いブラウザでも使いたい!」 といった現場の声にお応えして、ほぼ全てのブラウザで CSS3 セレクタを利用したページデザインが可能になるJavaScript ライブラリを作ってみました。 特徴 軽いよ いろんなブラウザで動くよ(Firefox2+, Opera9.2x+, Safari3+, IE6+, Google Chrome1+) 95%〜98%ぐらいのシェアをカバーできるんじゃない
uuAltCSS.js - README
uuAltCSS.js は Webページデザイン を簡単にする JavaScript ライブラリです。 独自のアプローチで、ブラウザ と CSS を切り離し、 古いブラウザでも最新の CSS の仕様に基づいたデザインを可能にします。 また、WebKit系ブラウザでしか利用できないはずの最先端の機能を、様々なブラウザで利用可能にします。 Features - 特徴 CSS3 Selector ready - CSS3 セレクタによる Webページデザインが可能になります。 No! CSS Hack - CSS Hack は一切使えません。 ブラウザ毎のレンダリングの違いはコンディショナルセレクタでスマートに解決できます。 Include cutting-edge technologies - 未来の技術を先取り。豪華なオマケ付きです。 Acid2 Safe - u
jQueryだけ使うのが馬鹿らしくなる。KnockoutJSに触れる
久保田です。最近KnockoutJSというJavaScriptフレームワークを勉強しています。 KnouckoutJSはjQueryの上に構築されているフレームワークです。jQueryのみ使うのと比べてKnockoutJSを利用すると、ウェブページ上のインタラクションを圧倒的に簡単に記述できます。この記事では、簡単にKnockoutJSの概要を説明し、KnockoutJSを用いたデモを紹介します。 このフレームワークの特徴としてあるのは、HTML内に宣言的な記述を埋め込むことでインタラクションが実装できることです。HTML5のカスタム属性(data*属性)を用いて、その要素に関する処理を宣言してきます。裏側の処理は、JavaScriptでViewModelを定義し、そこにビューが必要とする値を管理します。 例えば、あるチェックボックスにチェックを入れると下の要素がトグルする簡単な例は、以下
jQueryでスクロールすると表示する系いろいろ
jQueryでスクロールすると表示する系いろいろ 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 投稿日2012年03月08日 更新日2019年12月19日 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-decoration
[JS]IE6/7/8でもCSS3が使えるようになるスクリプト -IE-CSS3
<textarea name="code" class="css" cols="60" rows="5"> .box { -moz-border-radius: 15px; /* Firefox */ -webkit-border-radius: 15px; /* Safari and Chrome */ border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */ -moz-box-shadow: 10px 10px 20px #000; /* Firefox */ -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */ box-shadow: 10px 10px 20
Installation Instructions: Other｜SimpleReach
Conversion Requires ConsiderationKnow where you stand with Nativo’s Brand Rank. Drive 3x more brand lift and achieve up to 2x more efficient outcomes. Real-time, No Cost, Actionable Results. Drive 3X Consideration LiftBy seamlessly blending high-quality content with the precision of programmatic advertising, Nativo turns engagement into action. Content, not ads, bridges the gap between awareness a
こんな手が！Faviconを使って通知数を表示する·Tinycon MOONGIFT
Tinyconは未読などの通知をWebブラウザのお気に入りアイコンの上に表示するソフトウェアです。 Webサービスでメッセージをやり取りしたり、チャットなどで新着通知を出したいことがあります。そんな時にタイトルで教える方法もありますが、Tinyconは面白いことにFaviconを使って通知ができます。 Faviconの下に数字が書かれています。数秒ごとに自動で繰り上がっていきます。 デモです。どんどん数字が繰り上がっていきます。 実装する際のコードです。数値を当てるだけの簡単な使い方です。 Faviconの画像に数値を重ねて表示する程度であればサーバサイドでも実装できるでしょうが、TinyconはリアルタイムにFaviconを変化させられる点が強みです。メッセージを受け取ったタイミングで変化させればユーザの気付きにも役立つことでしょう。 TinyconはJavaScript製のオープンソー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JSPM - ES Module Package Manager and CDN
ドキュメントKnockout.js
HTML5 Boilerplate: The web’s most popular front-end template
