HTML5Experts.jpフリーランスのWebエンジニアとして活動中。 コミュニティ活動では、html5jにてHTML5の最新動向を追うとともにHTML5の普及促進に務める。 また、Google Developer Expert（Chrome）として、Chrome関連の情報発信も行なっている。
DOM操作の最適化によるJavaScriptチューニング（前編）
連載「Webサイト・アプリ高速化テクニック徹底解説」の第4回は、JavaScriptのチューニングのうち、ボトルネックになりやすいDOM操作の最適化について解説します。前編・後編にわたって、DOM操作が遅くなる原因と仕組み、その解決策について詳しく解説します。 CodeIQとの連動企画！ この記事で学べるJavaScriptチューニングのテクニックを、実際にCodeIQの問題で試すことができます。もう既に自信がある方は腕試しに、もしくは理解度チェックのための復習として是非ご活用ください！こちらから問題にチャレンジ！ DOM（Document Object Model）とは、HTMLをアプリケーション（ここではJavaScript）から利用するためのAPIです。JavaScriptによるユーザーインターフェースの構築やレスポンスの表示など、インタラクティブな部分はほとんどがDOM操作によるも
斉藤祐也の海外WEBテク定点観測＜Issue.4-2013/08/17-2013/08/30＞
斉藤祐也の海外WEBテク定点観測＜Issue.4-2013/08/17-2013/08/30＞ 斉藤 祐也（株式会社リッチメディア） Steven Wittens氏によるAcko.netのヘッダーアニメーション実装の解説、Node.jsをこれから始める人必見のチュートリアル、そしてPromises/A+の仕様を実装を通じて学べるチュートリアルなど、14日間のWeb開発最新ニュース合計18件を紹介します！ 注目ニュースピックアップ WebGL、CSS 3Dで最大のパフォーマンスと表現力を実現 — Acko.net 原題: Zero to Sixty in One Second Acko.netのSteven Wittens氏がWebにおける技術と表現力を最大限に発揮してくれた。 昨年1月にCSS3を使った3Dの表現の限界にチャレンジしたSteven。今年、Acko.netの13周年にあたって
一度書いたコードは二度と探さない！スニペットを究めて快適コーディング！【HTML, CSS, JavaScript】 | WebNAUT by Beeworks
一度書いたコードは二度と探さない！スニペットを究めて快適コーディング！【HTML, CSS, JavaScript】 ※この記事は2013年8月26日に執筆された記事です。現在は仕様が異なる可能性があります。 気がつけば繰り返し同じ単語で検索し、同じコードを書いている…なんてことはありませんか？「この部分の記述、もう一回使うことがあるかも」と思ったらぜひスニペットとして登録しておきましょう！ スニペットとは繰り返し登場するコードの断片、またはそれをすぐに呼び出せるように管理するエディタの機能のことです。自分がよく使用する記述をスニペットにしておけばいちいち検索したり、昔書いたソースを探ってみたりすることなく、使いたい時に正確な記述をサッと呼び出して使うことができます。 Dreamweaver、Sublime Textなどのオーサリングツールやテキストエディタにはスニペットを自在に使うための
JavaScriptでgreasemonkeyを作成する方法 - flandlescarlet's diary【情報工学生の備忘録】
サイトの表示や動作を自己流にアレンジできる JavaScriptが使えるようになると、greasemonkeyも使えるようになると言われていますが、個人的にはDOMの概念について理解しておかないと使えないと言っても良いかもしれません。 JavaScriptには大きく分けると ナビゲータオブジェクト(ブラウザの判別やハンドラ等) ビルトインオブジェクト(newで始まる予め用意されたオブジェクト) DOM(Document Model Object いわばDHTML) 基本的にはこの3つです。 ではgreasemonkeyはDOMを理解していないとできないのか!?と言われればそうではありません。主にgreasemonkeyでやっている事は内容の書き換えですのでDOMを用いる場面が多いというのが結論となってきます。DOMを用いなくてもgreasemonkeyは製作出来ますが、基本的にナビゲーター
一歩進んだHTML/CSS/JSを目指すために | 1000ch.net
2013/08/01 一歩進んだHTML/CSS/JSを目指すために 「なんとなく書きたくないけど、どう意識してコーディングしていけばいいのかわからない…。」 それを解消するためのツールがありますので、紹介します。 HTMLInspector philipwalton/html-inspector Introducing HTML Inspector こちらはHTMLを解析して悪いところを指摘してくれるツール。 たぶんガイドラインとかそれぞれあると思いますが、基本的にはコレに沿ってもいいかと。 スクリプトを差し込んで、実行すると、指摘事項がconsoleに出力されます。 githubのリポジトリからダウンロードするか、bowerで落としてくるか。 bower install html-inspector 次に、解析したいページに以下のコードを埋め込みます。 <script s
RAIZIN Coolで学ぶ、イマドキのWebサイトの作りかた
HTML5 Canvasを利用した冷気の演出が話題となった「RAIZIN JAPAN」のデモサイト。エキスパートが手がけたプロダクトを題材に技術的な解説を行っていくシリーズ第二弾は、RAIZIN Coolの実装を徹底解説します。 HTML5 Canvasを利用した簡易的な冷気の演出 最近の仕事で実装したものが海外の、しかも米シリコンバレーで話題になりました。 社内でもそうした簡単にできる（けど簡単そうに見えない）簡易的な実装に注目が集まり、ちょっとした話題になったので解説しつつ紹介したいと思います。 ※今回の解説用に、jsdo.itに実際に動くサンプルをアップしました。 さらに今回の解説用に特別に動作が分かりやすくなるオプションも追加しています。↓ (invalid jsdo.it code) 今回紹介するのはRAIZINというエナジードリンクの新バージョン「Cool」のLPです。 当初は
The Famous Slide Out Sidebar Navigation Javascript Solutions
We have seen different kinds of navigation solutions for responsive layouts. The most common solution would be transforming main navigation menu into drop down menu. However, with the popularity of Apps on mobile platform, they are bringing one of the emerging nav UI pattern into web, they called it Sidebar Navigation. Sidebar navigation can be seen on facebook, Path and Gmail iOS and Android apps
Swapping Out Text, Five Different Ways | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. It’s a common need in web apps: you click something and the text of the thing you just clicked changes. Perhaps something simple like a “Show” button that swaps to “Hide”, or “Expand Description” to “Collapse Description.” This is a fairly simple thing to do, but there are various considerations to
AngularJS for Beginners
<!DOCTYPE html> <html> <head> <title>Angular Example</title> <meta charset="utf-8" /> <link rel="stylesheet" href="styles/style.css"> <script> window.onload = function() { var input = document.querySelector('#input'); var span = document.querySelector('#name'); input.addEventListener('keyup', function() { span.innerHTML = input.value; }); } </script> </head> <body> <section> <p>Hello <span id="nam
JavaScript イディオム集
JavaScriptでは、初見の人にはさっぱりわからないけれども、ある程度慣れた人は当たり前に使うイディオムが結構たくさんあります。知ってしまえば何てことはないので、私の知っている限りのイディオムとその意味を解説します。 （7/3追記: twitter等で教えていただいた内容を追加しました） +v （数値化） var v = "123"; console.log(+v + 100) // 223 console.log(v + 100) // 123100 vを数値化する方法では最もメジャーです。parseFloat(v) に比べて高速なのに加えて、parseFloatとは細かい挙動が異なります（例えば空文字列の場合、parseFloatならば NaN になりますが、 +v の場合はゼロになります）。必ず数値になることが保証されており、文字列などで数値化出来ない場合はNaNが返ります。 v
最強オブジェクト指向言語 JavaScript 再入門！
この資料では、JavaScript でオブジェクト指向プログラミングを行う際に備えておくことが望ましい、基礎知識や概念について解説します。 【対象者】 ・JavaScript でアプリケーションを構築できる方 ・JavaScript におけるオブジェクト指向プログラミングの 実現手法や原理への理解を深めたい方 ・Java 的なクラスベースの言語との違いに違和感や混乱を 感じてらっしゃる方
TalkNote Vol.8「TalkNote × Frontrend」 - JavaScript開発の効率アップ -
http://talknote.me/vol8/event/ TalkNote Vol.8「TalkNote × Frontrend」のセッション2「JavaScript開発の効率アップ」の発表資料になります。
ソーシャルボタンのJavaScriptでfunctionの前に「!」がついている理由
ソーシャルボタンのJavaScriptでfunctionの前に「!」がついている理由を調べてみました。 １．はじめに TwitterやPocketなどのソーシャルボタンのコードをみると、共通してscript要素の中にあるfunctionの前に「!（エクスクラメーション）」がついています。 Twitterの場合 <a href="https://twitter.com/share" class="twitter-share-button" data-via="yujiro" data-lang="ja" data-size="large">ツイート</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getE
連載: IBM Watson Workspace #鬼わか アプリケーション開発: 第 7 回: IBM Watson Workspace で AI を利用したアプリ連携の実現 #鬼わか 解説（前編）
JavaScriptでCSSの擬似クラスを設定する方法
JavaScriptでCSSの擬似クラス（:link/:visited/:hover/:activeなど）を設定する方法を紹介します。 １．問題点 JavaScriptでCSSを設定する場合、例えばテキストリンクの色を設定するには、styleプロパティを利用して次のように記述します。 <a href="http://.../">foo</a> <script> var foo = document.getElementsByTagName('a'); foo[0].style.color = '#f00'; </script> ですが、styleプロパティには擬似クラスがなく（というか、そもそもプロパティではない）、 a:link a:visited a:hover a:active などの設定方法が不明です。 注：jQueryは使わない前提とします。 ２．擬似クラスを設定する 調べるとい
パッケージマネージャー「Bower」が大変便利で捗りそうです - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） 外部リソースをプロジェクトにインストールするのに、今まではSublimeText2のNettuts+ Fetchを使用していましたが、 node.jsベースのパッケージマネージャーの「Bower」が大変良さそうだったのでレポートをしたためておきます。 Bower とは BOWER – THE BROWSER PACKAGE MANAGER html, css, and javascript Bower is a package manager for the web. Bower lets you easily install assets such as images, CSS and JavaScript, and manages dependencies for you. BowerはWeb開発向けのパッケージマネージャー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Chegg Skills | Skills Programs for the Modern Workplace
狠狠色噜噜狠狠狠狠97,你懂的在线视频,亚洲AV制服丝袜日韩高清
JavaScriptの「this」は「4種類」？？ - Qiita
