JavaScriptで水や波、パーティクル等、ふわふわゆらゆら系の動きを表現 | Webクリエイターボックス
JavaScriptで水や波、パーティクル等、ふわふわゆらゆら系の動きを表現Webサイトのアクセントに、ちょっとした動きをつけたい時ってありますよね。一から作り込むのは大変ですが、プラグインを使えば意外と簡単に実装できますよ。夏らしい涼し気なデザインになりそうです。サンプルがうまく動かない時はデモ画面右上の「EDIT ON CODEPEN」をクリックして別タブで表示してみてください！ GitHub wavifyは jQuery のプラグイン。ふよふよと動く波を表現できます。jQueryとTweenMax、wavifyのファイルを読み込み、SVG コードを用意すれば OK。 HTML <body> コンテンツ ・・・ <!-- SVG --> <svg version="1.1" xmlns="http://www.w3.org/2000/svg"><path id="wave" d=""/
Modern JavaScript概観、そしてElectronへ | さにあらず
この一か月分の学習成果を整理したリポジトリを作ったので、その成果についてまとめておく。 作ったサンプルプロジェクトだけを手軽に欲しければ、このリポジトリを clone してほしい。 taichi/js-boilerplate master ブランチには、ミニマムな JavaScript 開発環境がサンプルコード付きで入っている frontend ブランチには、React/Redux/webpackなウェブアプリケーション用の開発環境が入っている デフォルトブランチにしてある electron ブランチには、frontend ブランチの内容に加えてElectronでアプリケーションを開発するための環境が入っている はじめに 最近の JavaScript について 僕は仕事として JavaScript を書いている訳ではないけども、この半年くらいの間にちょっとしたツールならいくつか作った。
NodeSchool
ワークショッパーはオープンソースの学習用モジュールです。 すべてのワークショッパーはウィザード形式です （ワークショップに参加しなくても勉強できます！）。 ほとんどはオフラインでも動きます。
リアクティブプログラミングの技術を用いてマウスストーカーを実装する - はこべにっき ♨
古き良きインターネットアプリケーションであるマウスストーカー*1をリアクティブプログラミングの技術を活用して実装してみるという取り組みをしましたのでご紹介します。リアクティブプログラミングというと主語が大きめですが、ここではbacon.jsを使ってるくらいの意味です。 できたもの まずは完成したマウスストーカーを紹介します。チェーンのように連なった星がマウスカーソルの軌跡を辿ってついてきます。工夫してうごかすとなかなか綺麗です。下のボタンを押すと実際にこの画面でマウスストーカーを有効にすることができます(requestAnimationFrameに対応したPCブラウザのみ)。いろいろ動かして遊んでみてください。 このページでマウスストーカーを有効にする 実装 このマウスストーカーがどのように実装されているか紹介します。ソースコードはGitHubに公開していますので、適宜ご参照ください。手元
歌舞伎座.tech#6「VirtualDOMとReact」 アウトラインメモ
歌舞伎座.tech#6「VirtualDOMとReact」 - connpass に参加して来たのでメモ。 すべてのCSSに死を！これはJSerの叫び！- @kyo_ago スライド: CSSに死を！これはJSerの叫び！ #kbkz_tech CSSが辛い CSSはカプセル化とか継承とか、プログラムからの概念がそのまま持ってこれない ReactStyle js-next/react-style JS内にStyleを埋め込むことができる そのままオブジェクト的に入れられる Template Stringsと合わせればその場でCSSを入れることができる styles=にスタイルを入れる セレクタをあまり考えなくていい style属性でスタイリングする 擬似要素、擬似クラスが全滅 :hover :active などが使えない。 CSSの継承などの概念が消える 自分で頑張る必要がある ユーザプレ
ちょっとしたHTMLはGitHub Gistに置いてbl.ocks.orgで表示するのがお手軽です - Qiita
はじめに JavaScriptを含んだHTMLを表示するのにGitHubでレポジトリを作ってGitHub Pagesを作るという手もありますが、ちょっとしたHTMLだと、わざわざレポジトリ作るのも面倒です。 FirefoxのBugzillaを見ていたら、984796 – SVG path getTotalLength returns large incorrect numberでたまたま見つけた bl.ocks.org - aboutが便利だったので紹介します。 使い方 index.html というファイル名でGistを作成します。 あとは、GistのURLの https://gist.github.com を http://bl.ocks.org に置き換えてアクセスすれば表示されます。 bl.ocks.org - aboutに上げられている https://gist.github.co
アロー関数が実装された - JS.next
概要 ES2015を象徴する機能である、アロー関数構文の実装がついにV8で始まった。 無名関数を短く書ける [3.28.31] アロー関数は無名関数の省略記法である。 今までこう書いていたのが、 var fn = function (a, b) { } こうスッキリ書ける。 var fn = (a, b) => { } 「=>」が矢のように見えることから「アロー」関数と言う。 更に短くできる これが、 [1, 2, 3].map( function (v) { return v * v } ) // [1, 4, 9] アロー関数だとこうなるが、 [1, 2, 3].map( (v) => { return v * v } ) // [1, 4, 9] 引数が一つの時には「()」を省略できるので、こう書ける。 [1, 2, 3].map( v => { return v * v } )
JavaScript 言語概要 - JavaScript | MDN
JavaScriptチュートリアルBeginner's tutorialsYour first website: Adding interactivityDynamic scripting with JavaScriptJavaScript frameworks and librariesJavaScript ガイド入門編文法とデータ型制御フローとエラー処理ループとイテレーター関数式と演算子数値と文字列日付と時刻の表現正規表現インデックス付きコレクションキー付きコレクションオブジェクトの利用クラスの使用プロミスの使用JavaScript 型付き配列イテレーターとジェネレーターリソース管理国際化JavaScript モジュール中級編Advanced JavaScript objectsAsynchronous JavaScriptClient-side web APIs言語概要JavaScr
Scala.js
"Scala to JavaScript" Compiler つまりは altJS 2014/03/19 現在のバージョンは 0.4.0 Scala の全ての言語機能が使える Pattern matching Extractor For-comprehension Option(Maybe) Monad String interpolation etc... Static types for JavaScript
jquery.kerning.js
jQuery.Kerning.js A jquery plugin which adjust text kerning in HTML. Get Source Demo うつくし明朝 - plain ポラーノの広場 あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。 うつくし明朝 - kerned ポラーノの広場 あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。 M+ 2m Regular - plain ポラーノの広場 あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。 M+ 2m Regular - kerned ポラーノの広場 あのイーハトーヴォ
配列から重複する値を削る関数とin演算子 - console.lealog();
参考：【Javascript】配列内の重複を除く at softelメモ in演算子の使い方には、こういうのもあるんだなぁというメモ。 実はfor-in文とin演算子をごっちゃに解釈していたのですが、投稿後Twitterでフィードバックをいただき、以下の記事内容を少し修正・加筆しました。 助かります、ありがとうございます！ in演算子 参考：in - MDN これによると、 オブジェクトにプロパティが存在するかをチェックして、trueかfalseを返すやつで、 var obj = { first: '最初', last: '最後' }; console.log('first' in obj); // true console.log('middle' in obj); // false 値が設定されていようとなかろうと、プロパティがあればtrueになる・・と。 もうひとつ、別物だけれどもつ
Frida • A world-class dynamic instrumentation toolkit
Dynamic instrumentation toolkit for developers, reverse-engineers, and security researchers. Scriptable Inject your own scripts into black box processes. Hook any function, spy on crypto APIs or trace private application code, no source code needed. Edit, hit save, and instantly see the results. All without compilation steps or program restarts. Portable Works on Windows, macOS, GNU/Linux, iOS, wa
テスタブルJavaScript
最重要テーマは「テストに適したコードの作成と保守」。本書は複数のアプローチで、テストに適したコードに迫ります。まず複雑さについて考察し、続いて複雑さや結合を軽減できるようなアーキテクチャを検討します。これを基盤として、機能レベルとアプリケーションレベルでのテストについての解説に進みます。カバレッジやデバッグについて十分な知識を得て、最後に自動化に関する解説で本書は締めくくられます。最後まで読めば、テストに適したJavaScriptの本質と実践について漏れのない理解を得られるでしょう。著者がYahoo!やGoogleで培ったテストや品質管理についてのノウハウをJavaScriptに適用したWeb開発者必携の一冊。 まえがき 1章 テストに適した JavaScript 1.1 今までの手法 1.1.1 アジャイル開発 1.1.2 テスト駆動型開発 1.1.3 ビヘイビア駆動型開発 1.1.4
uupaa's pure JavaScript module pattern - latest log
2013-08-19 uupaa's pure JavaScript module pattern pure JavaScript で記述し、Browser, WebWorker, Node.js で使えるモジュール定義パターンのご紹介。 uupaa 2013-08-19 18:05 前の記事
JavaScriptの単体テストフレームワーク "simpleJsUnit" で，テスト駆動開発をしよう - 主に言語とシステム開発に関して
simpleJsUnitは，JavaScriptのコードを単体テストするためのライブラリ。 シンプルさが特徴。（たった５キロバイト） コマンドラインでも ブラウザ上でも テストを実行可能。 以下は，このツールを使って，テストファーストなJavaScript開発を進める方法。 ダウンロード http://www.name-of-this-site.org/codi... （１）「Hello, World」プログラムを，TDDで作ってみよう まず，入門的なテスト駆動のコーディングをやってみよう。 下記のような仕様の関数を作ることにする。 ファイル名はhoge.js，クラス名はHogeとする。 名前を受け取ったら，「Hello，（その名前）」と出力する。 引数が無効だったら，何も返さない。 ダウンロードしたunittest.jsと同じフォルダ上に，hoge.jsの名前で空のファイルを作る。 最初
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Home
Free Bootstrap Admin Template - AdminLTE.IO
mizchi / すべてのMVCを過去にする - Glide
Sort JSON array by date key
remora.cx