CodeMirror
Extensible Code Editor CodeMirror is a code editor component for the web. It can be used in websites to implement a text input field with support for many editing features, and has a rich programming interface to allow further extension. This is a CodeMirror field, configured for editing JavaScript code. Features Accessibility Works well with screen readers and keyboard-only users. Mobile Support
Webプログラマから見たiOS9 Safari9のCSS/JavaScriptなどの新機能解説 - Qiita
iOS9がリリースされ、iPhone6sも発売され、iOS9 Safari9で使える新機能をWebプログラマ目線で使ってみたいものをいくつか試してみました。iOSはアップデートの進捗がわりと良いので、新機能でもモバイルサイトであれば積極的に使える…はず。デスクトップ版の方は…お察しください。 ぶっちゃけ今回はそこまで目玉機能はなく、地味です。地味ですが、SafariでWebアプリを作れるようになりそうな気配がどことなくするようなしないような感じの内容です。残念ながらServiceWorkerには対応していないので、それに対応してくれたらもっとアレなんですが。 iOS Safari9の新機能（OSX版含む） CSS系 backdropフィルタ対応 新し目のiOSやOSXとかのメニューバーが半透過されるあれが作れます。要は背景要素に対してフィルタがかけられるプロパティです。綺麗で良いですね。
Gruntとgulp.jsでサイトパフォーマンスを向上させる - ワザノバ | wazanova
@yosuke_furukawaさんがtweetしていたサイトパフォーマンスに関連する Gruntとgulp.js のタスク一覧です。確かによいまとめなので、メモしておきます。 GruntとGulpには、画像の最適化、HTML/CSS/JavaScriptファイルの結合 & 圧縮をするタスクがあるので、まずそちらをベースラインとして利用されたし。 1) 画像ファイルの圧縮 & 最適化 webページは平均1.5MBで画像ファイルが多くを占める。モバイルで160KBの画像ファイルを追加すると直帰率が12%悪化すえるというEtsyのデータがあり。 Grunt grunt-contrib-imagemin grunt-imageoptim (OSXのみ） 二つのタスクのどちらを選ぶかは、こちらの比較表 で確認してください。 Gulp gulp-imagemin 3/4/2014時点ではImage
HTML5やCSS3を使った次世代表現を学ぶのに役立つコードサンプル
わずか280行程度のJavaScriptで作られ... / JavaScriptで作るいろいろな物理シミュレ... / JavaScriptによる波の物理シミュレーショ...他...全14件
アイデア満載！レスポンシブ対応のナビゲーションを実装するチュートリアルのまとめ
デスクトップ、タブレット、スマートフォン、それぞれに適した表示にするナビゲーションを実装するチュートリアルを紹介します。 CSSで、JavaScript併用、jQueryのプラグインで簡単実装など、いろいろあります。
CreateJSを使ってインタラクティブなHTML5デモを作ってみた - ICS MEDIA
CreateJS勉強会の参加応募数からも関心の高さがうかがえるCreateJSですが、弊社でも研究をしており今回は制作したデモをいくつか紹介します。 有名な絵画っぽいもの CreateJSとCSSを用いたデモです。カーソルをキャンバス上で動かすと絵が描け、ドラッグするとちょっと3Dっぽい動きをします。絵の描画はCreateJS、3Dっぽい動きはCSSで作っています。絵の描画は重ね塗りし続けると負荷が増大するので、毎フレームキャッシュし描画するコストを減らし最適化しています。 デモはこちらから Box2D Drop CreateJSと物理演算ライブラリ「Box2D」を組み合わせたデモです。マウスでアイコンをドラッグ＆ドロップすることで投げることができます。Box2DライブラリはActionScript版とほとんど同じAPIで用意されているので、ActionScriptのノウハウを活用できます
SinatraとHamlとScssとCoffeeScriptでモダンなWeb制作環境を構築する #1 | DevelopersIO
こんにちは山形です。 htmlやcss等を書いて静的なWebサイトを制作している方なら誰でも、より効率的な環境求めていると思います。 DreamweaverやAptana等のIDEを使うのも一つの手だと思いますが、より柔軟な環境構築としてご紹介したいと思います。 Rubyをインストールする Windowsの場合 Engineyard社が提供しているRailsinstallerでサクッと入れてしまいましょう。 Railsinstallerはこちらからダウンロード出来ます ダウンロードできたらexeを起動しウィザードに従ってインストールを実行してください。 Mac OS Xの場合 rbenvでのインストールを紹介します。 先にXcode Command line Toolsのインストールを済ませておいてください。 Xcodeの環境設定からインストールできます。 # rbenvをgithubから
あなたのWebサービスは狙われている！最低限押さえておきたいセキュリティ対策 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
最近上京してきたんだけど、入谷から会社までくるのに徒歩10分の道のりで迷子になっちゃって、なんか知らない間に浅草の方まで行っちゃって、会社に遅刻しちゃって、東京ってマジ迷路だよね。あ、どうも、僕です。 今日はWebサービスを開発する上で最低限おさえておきたいセキュリティ対策について書こうと思うよ！ セキュリティホールって、 案外簡単な見逃しでできちゃうんだよね。 バリバリのハッカーしかハッキングなんてしないから、 うちのサイトは安全だなんて思ってたら大間違いだよ！ 今回は、その攻撃方法と、 それを防ぐための対策方法をセットにして書こうと思うよ！ 最低限、これだけは守っとかないと、 あなたのWebサービス、攻撃されちゃうよ！ ちなみに、言語はPHPを例とするよ！ ほかの言語にも当てはまるから、 攻撃方法と対策をセットで頭に入れておくこと！ クロスサイトスクリプティング (XSS) よくきくよ
canvas と Web 仕掛け絵本 | hiromasa.another :o)
明けましておめでとうございます。 🙂 昨年のご愛顧も込めまして、「WordPress デザインワークブック」共著のコモモさんこと高橋朋代さんと Web 仕掛け絵本のサイトをつくりました。とてもかわいい感じになりましたので、良ければ見てください！ バッタになりたい魔法使い – pararaehon.com PC/Mac はモダンブラウザ(IE8 以下はごめんなさいです）に対応しています。 モバイル系は iOS は 6 以降の Mobile Safari、Android は 4 以降の Chrome が良い感じで見れます。Android 2 の方は Firefox 17 を使うとゆっくりですが動作します。3G 回線の場合は、ちょっと読み込みに時間かかりますので、白くなったりしたらリロードしてみてください。キャッシュするときれいに動きます。 iPhone/iPad は 4S 以降(Apple
WordPressを高速化する9つのステップ | PLUS
福岡を拠点に活動するPLUSではWebサイト制作・iPhone/Androidアプリの開発を行っています。 WordPressはそのままだとアクセスが増えた時に、重くなりがちです。プラグインも入れすぎるとさらに重たくなることに。このブログだと表示スピードが改善前は7.7ｓかかっていましたが、見直しを行って0.4sにまで改善することができました。表示スピードは離脱率や、SEOとしても重要な要素ですので、改善する余地は大いにあります。 高速化に役立つツール まずはじめに、改善に役立つツールを2つご紹介します。 一つ目はWebWait。URLを入れると、読み込み時間を教えてくれます。まずはどのくらい時間がかかっているのか、チェックしてみましょう。 次はGoogleの「PageSpeed Insights」。URLを入れるだけで、高速化に役立つTipsを教えてくれます。もともとGoogle社内で
CSS Filtersで写真加工するWebApp - CSS PhotoEditor - くらげだらけ（くだくらげのBLOG）
iOS6も発表されて、あとはNew iPhoneのリリースが待たれる季節ですね。私は3Gの発売時に買い替えて、2年後iPhone4にし、また2年が経とうとしているので今年は新しいのに買い換えようという気持ちです。 世間ではAppleのマップでいろいろと騒いでいたりしますが、OSがアップデートされるたびに私がチェックすることといえばブラウザの仕様や機能の変更です。 去年はWebAppやスマホサイトを作るには嬉しい変更がありました。position:fixedやiframeの慣性スクロール、他にもSVGや縦書き、明朝フォントのサポートもありました。 その辺りはiOS5のMobile Safariから使えるようになったHTML5・CSSを試してみました【前編】と【後編】というエントリーでまとめて書いています。このときもデモ用にフルスクリーンで使えるWebAppを作成しました。 今回はCSS Fi
mb.CSSAnimate
Animate using CSS3 transition instead of the default jQuery.animate method. It provides a fallback to the default animate method if CSS3 is not supported by the browser. here is the call for this example: the "DIV" code: the function: var cH = $(window).height(); var cW = $(window).width(); $.fn.test = function() { var cH = $(window).height(); var cW = $(window).width(); return this.each(function(
[JS]多彩なアニメーションが実装できる2.3KBの超軽量スクリプト -jsMorph
Tutorial demos さまざまな基本となるアニメーションのユニット集。 [ad#ad-2] jsMorphの実装 外部ファイル 当スクリプトを外部ファイルとして指定します。 <script src="js/jsMorph_min.js" type="text/javascript"></script> JavaScript jsMorphの基本書式です。 var myMorph = jsMorph( Object obj, // HTML element, Array of elements or elementCollection that are rendered Object prop, // css properties of end position [Object params], // parameters that influence the motion (dur
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5でモバイル3Dゲームの開発は可能?!
UI設計におけるスマートフォン対応のまとめ
SSSSLIDE
KataPad.com is for sale | HugeDomains
GitHub - adobe/brackets: An open source code editor for the web, written in JavaScript, HTML and CSS.
スマートフォンブラウザ不具合特集
UIWebViewでつくるUI – yidevで発表してきました | DOTAPON Blog