Components · Twitter BootstrapSleek, intuitive, and powerful front-end framework for faster and easier web development. Download Bootstrap GitHub project Examples Extend Version 2.3.2
JavaScriptのテストについて本気出して考えてみた(2) - 愛と勇気と缶ビール
前回からの続きで。 DOMエミュレーションの戦略 一方で、本物のブラウザを使わずに何らかのJavaScript実行環境でDOMをエミュレートして、その上でテストを走らせよう、という戦略もある。 この分野の大御所はEnv.js(http://www.envjs.com/)ということになっているのだけど、Env.jsのイヤンなところは導入がめんどくさい所である。何がめんどくさいって、antでビルドしなくちゃいけない。テストのためにどの程度の環境構築コストをかけられるかは状況において違うだろうが、例えばJSをメインでやっているエンジニアが「ちょっとテスト環境整えたい」っていう時にantから入れて頑張るだろうか？Javaの経験や、こういうビルドツールの導入/利用の流れに慣れている人だと全然問題ないレベルなんだけど。 というわけで、Env.jsは結構力を入れて開発されたものではあるのだろうけど、僕に
Cutter.js Truncate HTML
Cutter.run( oApplyTo, oTarget, nWords, oTexts, oClasses ) Executes the cutter on oApplyTo and put the content cut in oTarget. Params: oApplyTo : DOM element to cut the content. oTarget : DOM element where put the content after cut. nWords : Number of words to cut on the oApplyTo element. oTexts : Config object for the text in the link, to show the full content again, if it's needed. oTexts by defa
PNGを解析してJavaScriptでPNGを描く·png.js MOONGIFT
png.jsはJavaScriptを使ってPNGを解析し、その結果をCanvasタグにレンダリングするライブラリ。 png.jsはHTML5/JavaScript製のオープンソース・ソフトウェア。Web上で扱われる画像のフォーマットと言えば、GIF/JPEG/PNGだ（WebPもあるか）。個人的な主観としてGIFはアニメーションやアイコン、JPEGは写真やサイズの大きな画像、その中間がPNGに向いていると感じている。 レコード画像を描く 写真を取り扱うサイトでは、そのメタデータを解析して撮影した機種や撮影場所、露出といったデータをEXIFから得ている。同様のPNGを解析するJavaScriptライブラリがpng.jsだ。 png.jsはPNGをJavaScriptで解析し、その結果をCanvasタグを使って画像として表示する。つまり表示されるのはPNG画像であり、単純にWebブラウザでim
speak.js: Text-to-Speech on the Web – Mozilla Hacks - the Web developer blog
Text-to-Speech (TTS) can make content more accessible, but there is so far no simple and universal way to do that on the web. One possible approach is shown in this demo, which is powered by speak.js, a new 100% pure JavaScript/HTML5 TTS implementation. speak.js is a port of eSpeak, an open source speech synthesizer, from C++ to JavaScript using Emscripten. Compiling an existing speech synthesis e
spin.js
Share it! If checked, the option values will be stored in the URL so that you can easily share your settings. Features No images No dependencies Highly configurable Resolution independent Uses CSS keyframe animations Works in all major browsers Includes TypeScript definitions Distributed as a native ECMAScript module MIT License Spin.js dynamically creates spinning activity indicators that can be
jshintでjavascriptコードチェックしながら開発する - aolog
最近はjavascriptを書いています。 javascriptとしてはそれなりに大規模になってきました（2万行ぐらい？）。 最近のjavascriptトレンドのやり方は、コードチェッカを通して、信頼性を向上させるのがプロ技らしいです。 僕も早くプロの仲間に入りたいです。 コードチェッカには「JSLint」というのがあるらしいのですが、使ってみればわかりますが、さすがに警告が細かすぎてウザいです。 （「varは関数トップに一つ」とか特に。C言語じゃないんだから･･･。） そういった部分をある程度柔軟にしたものに「JSHint」というのがあるみたいです。「JSLint」のフォークらしいです。 あまりに堅いスタイルを強要されたくなかったので、僕はこれを使ってみました。 そのまま使えるわけじゃないのでやったことをメモっておきます。 1.JSHintをダウンロードしてくる http://jshin
Why I forked JSLint to JSHint
20 Feb 2011 — Berkeley Your sadly pathetic bleatings are harshing my mellow. —Douglas Crockford. This Friday we released JSHint, a code quality tool designed to detect errors and potential problems in JavaScript code and to enforce your team’s coding conventions.1 JSHint is a fork of JSLint, the tool written and maintained by Douglas Crockford. JSLint served me well for quite some time but in the
Zoom Zum - Zoom Zum Blog
The need for dependable bail bond services becomes essential when legal emergencies occur. The two main offices of Dante’s Bail Bonds serve southern Louisiana by placing their bail bond locations in Lafayette Parish and East Baton Rouge Parish. The Lafayette Parish office functions as a main resource for the Acadiana region because it provides full bail services to Lafayette residents and the near
スーパーマリオ風ゲームを作るなら。HTML5用2Dスクロールアクションゲームフレームワーク·melonJS MOONGIFT
melonJSはHTML5を使った2Dスクロールアクションゲームを開発するためのJavaScriptフレームワーク。 melonJSはHTML5/JavaScript製のオープンソース・ソフトウェア。登場から何十年もたった今もスーパーマリオブラザーズの人気は高い。キャラクターによる所が大きいが、2Dスクロールのアクションゲームは今も昔も人気があるジャンルなのだ。 ワニが主人公 左右に移動しジャンプをし、アイテムをゲットする。敵を踏みつけたり攻撃したりしてどんどん先に進んでいく。そんな誰でも遊べるシンプルさを持ったアクションゲームを作ってみたいと思ったらmelonJSを使おう。 melonJSは2Dアクションゲームを作るためのゲームフレームワークだ。実際、デモではスーパーマリオ風のゲームが多数登録されている。音も鳴るようになっており、実際にゲームとしての完成度は高い。HTML5を使っており、
ドリルダウンできるWebベースのツリーマップグラフライブラリ·webtreemap MOONGIFT
webtreemapはHDD容量のビジュアル化などに使われるツリーマップをWebベース化したグラフライブラリ。 webtreemapはJavaScript製のフリーウェア（ソースコードは公開されている）。情報のビジュアル化はとても重要だ。特に文字や数字だけの羅列になっている情報は適切に並べたりフィルタリングすることでとても見やすく、内容が把握できるようになる。 Webベースのツリーマップ グラフを使ったり、モデリングしたりと様々な表示形式があるが、今回紹介するのはツリーマップだ。HDDの利用状況などをビジュアル化するのに使われる手法だ。それをWebベースで実現するのがwebtreemapだ。 webtreemapはJSONファイルで定義した内容に沿って、データをツリーマップ表示するライブラリだ。まず最大の枠で全体が表示される。そしてその中に四角が多数入り、個々のサイズが表示される。サイズは
Testing Your JavaScript With Jasmine | Envato Tuts+
We all know we should be testing our code, but we don’t actually do it. I guess it’s fair to say that most of us put it off because, nine times out of ten, it means learning yet another concept. In this tutorial, I’ll introduce you to a great little framework for testing your JavaScript code with ease. Step 0: Understanding BDD Today, we’re going to be learning about the Jasmine BDD testing framew
Quick Tip: How to Add Syntax Highlighting to Any Project | Envato Tuts+
Get every type of asset for any type of project, and access to AI tools From $16.50/m
Web上でもローマ字で日本語検索。Migemo for JavaScript·Migemo.js MOONGIFT
Migemo.jsはローマ字による日本語インクリメンタル検索のMigemoをJavaScriptで実装したライブラリ。 Migemo.jsはJavaScript製のオープンソース・ソフトウェア。日本語で文章を検索するというのは意外と面倒くさい。ショートカットキーなどは英数モードで、検索の時だけ日本語入力に切り替えているといつの間にか間違って英数で文字を打っていたりする。 検索例 そんな面倒さから解放してくれるライブラリ、Migemoはとても便利な存在だ。FirefoxアドオンでもMigemoがあり、検索がローマ字でインクリメンタルにできて便利だった。そしてMigemo.jsを使えばみんながハッピーになれる。 Migemo.jsはMigemoをJavaScriptで再実装したライブラリだ。デモではテキストボックスに文字を入れるとそのまま検索が開始される。東京であればtoukyouと入力すれば
html2canvas - Screenshots with JavaScript
<div id="capture" style="padding: 10px; background: #f5da55"> <h4 style="color: #000; ">Hello world!</h4> </div> html2canvas(document.querySelector("#capture")).then(canvas => { document.body.appendChild(canvas) });
スマートフォン対策。HTML5+JavaScriptでQRコードを動的に生成·JS HTML5 QRCode Generator MOONGIFT
JS HTML5 QRCode GeneratorはCanvasタグを使ってQRコードを生成するJavaScriptライブラリ。 JS HTML5 QRCode GeneratorはHTML5/JavaScript製のオープンソース・ソフトウェア。スマートフォン向けのコンテンツが増えたこともあって、Web上でQRコードを見かけることが多くなった。Androidアプリの配布の際には大抵QRコードが表示されている。 かなり大型なQRコード QRコードには様々な情報が載せられるので、URLやコンタクト情報、ツイートしてほしい内容なども載せられる。手軽に生成できるようになれば、色々な使い方が考えられるだろう。そこで紹介したいのがJS HTML5 QRCode Generatorだ。 JS HTML5 QRCode Generatorはその名の通り、HTML5+JavaScriptでQRコードを生成
Backbone.js + Ruby on Railsの勉強に。ドキュメント作成、編集のWebアプリケーション·CloudEdit MOONGIFT
CloudEditはBackbone.jsとRuby on Railsを組み合わせたドキュメント編集システム。 CloudEditはRails/JavaScript製のオープンソース・ソフトウェア。どれだけ面白い技術であっても、動いているものがあるかないかで印象は大きく変わる。デモサイトやデモアプリケーションがあればすぐに試せて動いているコードを見て、動作原理に納得できる。 文書作成 JavaScriptのMVCフレームワークが幾つか登場しているが、これもまた実際に動いているデモがあるかどうかでデファクトが決まってくるかもしれない。フレームワークの一つ、Backbone.jsを使ったWebアプリケーションとしてCloudEditを紹介しよう。 CloudEditはシンプルなドキュメント編集アプリケーションだ。まず一覧でドキュメントのタイトルが並んでいる。それをクリックすると編集画面になる。
足りない機能は自分で追加する。Webブラウザで簡単にJavaScriptを実行する·dotjs MOONGIFT
dotjsは各種ブラウザで使える手軽なJavaScript実行環境。 dotjsはRuby製のオープンソース・ソフトウェア。当たり前だがWebブラウザではJavaScriptが実行できる。それはWebサイトから指定されたものだけではなく、後から閲覧者が追加することも可能だ。有名なものとしてはUser Scriptやブックマークレットになるだろう。 ロゴを差し替えたデモ 誰かが作ったものをインストールして使うだけであればUser Scriptは便利な仕組みだ。だが自分だけで使いたい時に色々準備するのは面倒くさい。そう考えた人が作ったのがdotjsだ。 dotjsはGoogle Chromeの他、SafariやFirefox向けにも機能拡張を提供している。ホームディレクトリの中に.jsというフォルダを作り、ドメイン名.jsというファイルを作成する。そうすると該当するドメインにアクセスした時にJ
LaTeXやMathMLに対応したWebベースの数式表示ライブラリ·MathJax MOONGIFT
MathJaxはLaTeXやMathMLの記法に対応したJavaScript製の数式表示ライブラリ。 MathJaxはJavaScript製のオープンソース・ソフトウェア。インターネットに最も多いコンテンツはテキストだろう。HTMLによってテキストの装飾は容易に行えるが、用意されているものだけで十分とは言いがたい。足りないものはどうすかと言えば、画像などで置き換えている。 サンプル しかし画像では後々の修正や可読性、再利用性さらには検索エンジンにインデックス化されないなど都合が悪いことが多い。そこでMathJaxを使ってみよう。MathJaxは数式を奇麗に表示できるライブラリだ。 MathJaxはLaTeXやMathMLで書いた内容をJavaScriptを使って数式に変換してくれる。どちらも数式を描く際によく使われるテキストフォーマットだろう。あくまでもテキストベースなので、拡大したり縮小
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
google-code-prettify - syntax highlighting of code snippets in a web page - Google Project Hosting