SmartPhoto.js The most easy to use responsive image viewer especially for mobile devices View on GitHub
SmartPhoto.js
SmartPhoto.js The most easy to use responsive image viewer especially for mobile devices View on GitHub
Electron で手動GCを行う - まるまるこふこふ
さいです。 JavaScript と Electron でPC向けの弾幕シューティングゲームを作っています。 C++ と違って JavaScript はGarbage Collection (以降GCと呼称)がある言語なので、 ゲームプレイ中に不定期にGCが発生して、ゲームのパフォーマンスが悪化することがあります。 Object pooling を使って、GCの回数は減らす努力はしているのですが、 それでも(恐らく)GCの発生によって、古いPC等では露骨に画面が止まることが あるので、Electron上で GCのタイミングを調整したいなぁと思いました。 Electron は Chromium ベースのプラットフォームであり、 Chromium は v8 エンジンを使用しています。 v8 エンジンのGCは Mark-Sweep 方式でのGCです。 v8 エンジンが自分で判断して行うGCを止め
背景画像をダイナミックに動かしつつParallax効果を作れる「fullPage.js」:phpspot開発日誌
インストーラのようなウィザードをWEBで実現できる「jQuery Smart Wizard 4... 次の記事 ≫：WebGLを使った超リッチな背景イメージ描画「WebGL Scroll Spiral」
Highcharts.jsでドーナツグラフを表示させたい！ーその２.ドーナツグラフを作成 | バシャログ。
『GUNDAM VERSUS』のβテストが外れてしまい、購入したPS4用のRAP（リアルアーケードプロ）を毎日眺めながら、製品版の発売日を待ち焦がれている kouraku です。（ダウンロード版を予約済!!!） さて今回は、ちょっと時間が空きすぎてしまいましたが、2017年2月頭にメモ書きした Highcharts.js について、前回のサンプルを元にドーナツグラフの作り方をメモメモ。 【前回の記事】 【この記事で必要な知識】 HTML/CSS JavaScript jQuery 前回のおさらい 目標としていたドーナツグラフとは、下図のようなものでした。 そして、Highcharts.js を使ったグラフが以下のものです。 使い方を知るために、とりあえず棒グラフのサンプルを作成しました。 ドーナツグラフを作ってみる Highcharts.js のデモを眺めてみると、「3D donut」とい
Web ページの目次と見出し | murashun.jp
［ ＋ expand ］目次と見出しとは目次と見出しの必要性目次と見出しの設置に賛成派の意見目次と見出しの設置に反対派の意見目次のクリック分析目次と見出しの必要性における見解目次の作り方目次化する見出しタグのレベルについて目次を構成するタグについてSEO と目次目次の表示位置目次の装飾デザイン目次の表示・非表示についてまとめ関連記事目次と見出しとは ブログなどの Web ページの上部には、取り扱うコンテンツの章・節を一覧化して目次化されているページがあります。WordPress に代表される CMS では自動的に目次を作成するプラグインが提供されているため、設置しているページも多く見られます。 目次や見出しは紙媒体のメディアでも広く用いられているドキュメンテーション技法の基本です。目次や見出しの本来の意味は、比較的情報量の多いコンテンツに対して利便性(ユーザビリティ)や、検索性(ファインダ
JavaScriptで起こるメモリリークのパターン
2017.02.17JavaScriptで起こるメモリリークのパターン2014年1月25日に Frontrend in Fukuoka というイベントが開催された（もう3年前か…）。その時に Browser Computing Structure というタイトルで、ブラウザの仕組みやらスクリプト処理について発表している。 たまたま当時の資料を掘り起こす機会があったので、メモリリークのサンプルを直したついでにリークする JavaScript のパターンについて書き起こしてみる。サンプルは 1000ch/memory-leak に公開してあり、手順通り操作するとメモリリークを再現できるようになっている。 GCで回収されないオブジェクトJavaScript はランタイム上で動的にメモリを確保する GC（ガベージコレクション）を採用しているので、JavaScript の書き手がメモリの確保・開放を
「position: sticky;」より便利！スクロールしたらヘッダやサイドバーがぴたっと貼り付くスクリプト -Fixed Sticky
HTMLは汚さずに、ヘッダ、ナビゲーション、サイドバー、ボタンなど、さまざまな要素をスクロールした際に指定した位置にぴたっと貼り付けるスクリプトを紹介します。 IE7+からサポートされており、「position: sticky;」の代替になる便利なスクリプトです。 Fixed Sticky- GitHub Fixed Stickyの特徴 Fixed Stickyのデモ Fixed Stickyの使い方 Fixed Stickyの特徴 Fixed Stickyで貼り付ける要素の位置は、親要素に依存します。 つまり、スクロールしてぴたっと貼り付く位置は、常に親要素となるコンテナ内です。 基本的な動作を見てみましょう。 まずは、要素に「top: 20px;」を指定してみます。
1分でわかるreturn false; preventDefault(); stopPropagation() の違い
クリックイベントのサンプル .innerを子、.outerを親にしてそれぞれにクリックイベントのサンプルを作成した。リンクをクリックするとalertの".inner", ".outer"が表示されてからiwb.jpに遷移する。 $(".inner").click(function(){ alert(".inner"); }); $(".outer").click(function(){ alert(".outer"); }); alertの".inner", ".outer"が表示されてからiwb.jpに遷移するサンプル preventDefault()を使用するとリンクの遷移などのイベントを無効にできる。 $(".inner").click(function(e){ e.preventDefault(); alert(".inner"); }); $(".outer").click(fu
Snap.svgでsvgのパスを動かしたアニメーションを作ってみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもですよ、はやちですよ( ˇωˇ) 今回はsvgのアニメーションの操作がカンタンにできるSnap.svgをご紹介致します( ˘ω˘)☞三☞ｼｭｯｼｭｯ 導入方法 さっそく、導入からご紹介いたします。まず、こちらのサイト（↓）からダウンロードします。 snap.svg ダウンロードしたら、snap.svg-min.jsを読み込みます。 <script src="snap.svg-min.js"></script> タスクランナーでのご使用の方 npmでも公開されています。 https://www.npmjs.com/package/snapsvg npm install snapsvg でインストールまたは bower install snap.svg でインストールします。 使用するjsに読み込ませたら準備完了です( ˇωˇ)☝ import snapsvg from 'snapsvg
[JS]スマホも対応、HTML5を使ったゲームを作成できる2DのJavaScript物理エンジン -Planck.js | コリス
クロスプラットフォームの2D物理エンジン「Box2D」をベースに、読みやすくメンテナンス可能なJavaScriptコードとして開発されたJavaScriptのライブラリを紹介します。 Webおよびモバイルプラットフォーム用のライブラリとして、最適化されています。
![[JS]スマホも対応、HTML5を使ったゲームを作成できる2DのJavaScript物理エンジン -Planck.js | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/5048cf2d6b1658eccbc6b2d4a3dab3912c66a0c7/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201702%2F2017041001.png)
Markdownテキストでシーケンス図とフローチャートを描く - Qiita diagram sequence
つい先日、とあるシステムの処理の流れと一部処理のフローチャートを付けた見積り資料を書くことになり、ちょうど良い機会だったので、MarkdownでUML図表が描ける「StackEdit」を使って、オールMarkdownで資料を作成してみた。 いやぁ、打ち込んだテキストがリアルタイムに図表化されていく様は、とても新鮮で、そしてすごく面白かった。資料が出来上がった後の達成感というか、完成した図表を見た時の感動が結構はんぱない。技術系の資料作成でこんな良い体験ができたのは初めてかもしれんな…(笑) ──と、結構感動的な体験ができるMarkdownでのUML図表作成なんだが、せっかくなのでそれの書き方を含めてもう少し突っ込んだTIPSとしてまとめておこうかと思った次第。 Markdown+UML とは？ とりあえず、「Markdown+UML」というのは私の造語だ。まぁ、正確に言うなら「UML di
C3.js | D3-based reusable chart library
Comfortable C3 makes it easy to generate D3-based charts by wrapping the code required to construct the entire chart. We don't need to write D3 code any more. Customizable C3 gives some classes to each element when generating, so you can define a custom style by the class and it's possible to extend the structure directly by D3. Controllable C3 provides a variety of APIs and callbacks to access th
I am mitsuruog | D3.jsでタイムチャートを作ってみたので、苦労した点など振り返ってみる
D3.js を使ってタイムチャートを作成してみました。 初めて実践投入したこともあり、いろいろ苦労した点などあるので、振り返ってまとめてみます。 D3.js まだまだ奥が深いので、私が紹介する以外にもっといい方法があると思います。あくまで自分用のメモだと思ってください。 利用している D3.js は v3 系です。 サンプル Codepen にサンプル作りました。 TimeChart 苦労したこと 一定期間の時間軸を作成したい 時間軸のラベルを一定間隔にしたい 時間軸のラベルフォーマットしたい 軸のメモリ線(？)を消したい 画面サイズに応じて軸ラベルを回転させたい カテゴライズされた軸を作りたい カテゴライズされた軸のラベルを別なものにしたい ラベルの文字が長い場合に改行したい 軸の domain 範囲を超えたデータがある場合に表示させない window がリサイズしたら Chart を再
flowchart.js
st=>start: Start:>http://www.google.com[blank] e=>end:>http://www.google.com op1=>operation: My Operation sub1=>subroutine: My Subroutine cond=>condition: Yes or No?:>http://www.google.com io=>inputoutput: catch something... para=>parallel: parallel tasks in=>input: some in out=>output: some out st->op1->cond cond(yes)->io->e cond(no)->para para(path1, bottom)->sub1(right)->op1 para(path2, top)->o
今時のフロントエンド開発2017 (1. 愚痴編) - Qiita
良いものを書きたいので指摘などは大歓迎です。 その際はコメントや編集リクエストをいただければ修正します。 大きな変更が加わるときは通知すると思います。 はじめに これまでのフロントエンドの開発には多くの問題や面倒ごとを抱えています。 その解決手段としてよくビルドツールやaltJSといったワードを目にしますが，これらがどういった目的で利用されているのかについて触れながら進めていきます。 主にパッケージ管理やビルドツールを初めて見る人向けになっているので全編通すとそれなりに長いです。 動かすまでが長めになっていますが理解してしまえば本当に必要な手順はさほど多くありません。 実際に開発を始めるために必要な準備はせいぜい1~2つのファイルを記述してコマンドを数回叩く程度なので，過度な抵抗感を持たずに読んでいただけたらなと思います。 登場するツールや技術は多くの問題を解決してくれますが，これらは飽く
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TechCrunch | Startup and Technology News
Marmaid.jsで書くシーケンス図
Chart.js
Know it all
JavaScript でテキストエリア内のカーソルのある位置に文字列を挿入する方法 - Qiita
