JavaScript祭スピンオフ！ フロントエンド祭り in Co-Edo
JavaScript祭りスピンオフ企画！フロントエンド祭りの開催を致します！ 毎回JavaScript祭りは100名近く参加頂き、その都度WEBデザイナー系の方・初心者の方から「どうすればJavaScriptが書けるのか！？」という根本的な疑問を頂きます。 そこで今回は 「JavaScriptを愛する初心者～フロントエンド系」向けに「もっと書こうよ！JavaScript」をお送りしたいと思います。 セッションの時間を通常よりも長めに取っておりますので、ハンズオン形式でぜひ登壇者と一緒にJavaScriptを書いてみよう！ ※コワーキングスペース利用料金1000円がかかります。 なお、今回は参加費無料となっております。懇親会別途。懇親会費用は1500円となっております。受付時にお支払下さい タイムスケジュール 今回は全体を通して初心者～フロントエンド系 受付開始 14：00～14：30 座席
【翻訳】デザインエンジニアリング - MOL
Original：Design Engineering（2014-11-25）by Jonathan Snook JavaScriptだけがフロントエンド開発ではない。それはデザインとディベロップメントの技術が人種のるつぼのように融合したものである。それはアクセシブルなUIを実装するためであり、Web標準を受け入れるものである。 — Matt Hill Shopify Adminの開発に関して言えば、最近まで2つの専門職、つまりデザイナーとエンジニアを受け入れていた。今では3つめの専門職がある、しかしながらそれが確かなものとして認識されるまで時間がかかった、フロントエンドデベロッパーである。フロントエンドデベロッパーのスキルはデザインとエンジニアリング両方にまたがっている。これまでクオリティの高いフロントエンドコードをフロントエンドデベロッパーの助けもなしに書けるデザイナーを雇えて、私たち
HTML5 Conference
HTML5 Conference 開催にあたって この度は、私たちhtml5jが主催するHTML5 Conferenceに関心を持っていただき、ありがとうございます。 今回のHTML5 Conferenceはテーマは、 "Web is Everywhere" ーごく普通の、どこにでもあるものへ 昨今、HTML5は多くの業界に広がり、デバイスの枠組みを越えて浸透しつつあります。 2014年10月には、HTML5は「勧告」（正式な仕様として公開）となり、今後はWebの基幹技術として、当たり前のものとなっていくでしょう。また、それに限らずHTML5を始めとした次世代Web標準技術は、現在も多くの仕様が検討されており、HTML5の次に向けて着々と歩みを進めています。 本カンファレンスは、「Web技術者の祭典」として、そうしたWebに関する最新技術のトレンドがわかり、皆さんが活発に交流しながら、何よ
Google Analyticsのコードがコピーされても動かないようにする方法
Web関係のブログをやっていると、なぜかページ内の JavaScript などがそのままコピーされて中小企業のWebサイトにペーストされ、Google Analytics に見知らぬWebサイトの URL が混じってくることがあります。 これで困っている方がいたので、自分のサイト以外に自分のサイト用の Google Analytics コードが使われても動かないようにする方法を考えてみました。 JavaScriptで、表示されているページのホスト名を取得する JavaScript では、location.hostname プロパティを使用すると、今表示しているページのホスト名（example.com など）を取得することができます。 参考: window.location – Web API インターフェイス | MDN たとえば、このページを表示している時に Chrome の開発者ツール
DEFGHI1977のWEB技術まとめ・ツール等
written by DEFGHI1977 [重要] auonenetホームページ公開代理サービス終了に伴い、公開済みの各種ドキュメントをxdomainサーバーに移行しました. 旧アドレスへのアクセスは本ページにリダイレクトされます. お手数ですがブックマークやリンクなどのURL参照先の更新・変更をお願いいたします. You were redirected from old "dion(auonenet)" page which had been out of service. Please update URL settings of your bookmarks, links or more. Thank you. 突貫工事で作ったため, 抜けがあるかもしれません. ゲームツール等(game tools) 悪魔城ドラキュラHoD(Castlevania HoD)・アイテム早見表(Cas
フロントエンドパフォーマンス向上ルール - Speaker Deck
Transcript Leading Edge Development 勉強会 フロントエンドパフォーマンス向上ルール はじめに ▪Webサイト⾼高速化 / パフォーマンス改善の重要性 【Aberdeen Group Report】 ・Amazonはページの反応が0.1秒遅くなると、売り上げが1%ダウンする。 ・Googleのページ反応が0.5秒遅くなると、アクセス数が20%ダウンする。 ・⼀一般的に表⽰示スピードが1秒遅くなると、 PVは11%、コンバージョンは7%、顧客満⾜足度度は16%ダウンする。 【Jakob Nielsen】 ３つの重要限界 ・⼼心理理的・感情的な違和感を感じないのは0.1秒まで ・思考の流流れが妨げられないのは1秒まで ・注意⼒力力を維持する限界の時間は10秒まで はじめに ▪パフォーマンス改善の⼿手段 【改善箇所】 ・パフォーマ
2014年Webデザイナーはコードをどこまで学ぶべきか、Webデザインが今までどのように進化してきたかのまとめ
Webデザイナーはコードを学ぶべき？ コーダーはデザインを学ぶべき？ 両方に精通している人はなかなか多くはいません。Webデザインがどのように進化してきたのかその流れをしっかり押さえ、デザインとコードのギャップをつなぐことができたか振り返ってみましょう。 A brief history of web design for designers 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 先日の彼らの記事「しっかりと理解しておきたい！レスポンシブWebデザインを使いこなすための9つの基本原則」と同様に、分かりやすいアニメーションもお楽しみください。 1989年：Webデザインの暗黒時代 1995年：Webデザインの始まりはテーブルから 1995年：JavaScriptが表現の幅を広げる 1996年：Flashにより自由の黄金期へ 19
Post by @0-9
・横80列で折り返す。 普段80列で開発してるわけじゃないけど、横に長いコードも見にくいので。 ・1funtionは30行にする。 これも列指定と同じ意味で。 数字自体はそこまで意味がないけど、長いコードはそれ自体問題がある可能性が高い。 ・1ファイルは200～300行 「JSを1ファイルに200行以上書くと人間は死ぬ」と言われてるけど、実際はもうちょっと多くても大丈夫。 ・インデントは8タブ タブを使う理由は「タブはスペースに一括置換できるけど、スペースはタブに一括置換できない」から。 なので、コード中にコードインデント以外でハードタブは記述しない(文字列内に記述する時は¥tで記述する) タブの表示数はエディタ毎の設定次第だけど、インデントの深いコードが書きにくくなるので8タブで書く。 ただし、インデントの文字数に依存するインデントはしない(4タブでも正常なインデントになるように記述する
HTMLやCSSを知らなくても簡単にWebサイトが作成できるMac用Webエディタ「Blocs」がリリース。
Mac App Storeには現在申請中だそうですが、NormさんのWebサイト”Ui Store“では既に$49.99で販売が始まっており、トライアル版もダウンロード可能です。 使い方 使い方は非常に単純で、ユーザーはページを作成し、決められたBlocを編集していくだけです。まず、Blocを追加し、 次にBlocのスタイルを選択します。BlocはBricという要素に分かれており、各Bricは画像や動画、テキスト、リンク、見出し、フォーラム、ミュージックなどに変更可能です。 また、Bric要素の編集はサイドメニューから行います。 Bricの編集が終わったら、新たにページを増やすために右上の[+]ボタンか、メニューバーの [Page] > [New] からページを追加します。流れはメニューバーにある順番[File] > [Page] > [Bloc] > [Bric] で行えばわかりやすいと
Front-end Tooling Workflows
~ 198 slides on tools to help you stay productive on the front-end.
Frontrend in Kanazawaのスライドを公開しましたというご連絡と情報収集についての補足など - Life goes on
2014/10/18に開催されたFrontrend in Kanazawaの資料を公開しました。 つらつらと、この時の補足など書いていこうかと思います。 RSSのチェックはどういうタイミングでやっていくか 今回の講演で質問もされたのですが いつRSSなどのチェックをしているのか? という問題ですが、実は自分も明確な答えはまだ無い感じです。というのもライフスタイルに合わせる…という感じにどうしてもなってきてしまうからです。 スライドにもあるように、自分は通勤時間や、ちょっとした空き時間にスマホでチェックだけはするというようになっていますが、このフローは現在のスタイルでやっているからというだけです。例えば、通勤が車になっていたらどうしても、その時間にチェックはできなくなってきます。 が、その場合は例えば、就業中に一仕事終えて気分転換がてら、5~10分とかでぱぱーっとチェックだけしておくみたいな
スマートフォンWebのフロントエンドを高速化する取り組み - クックパッド開発者ブログ
ユーザファースト推進部の丸山(@h13i32maru)です。 先日「撮るレシピ」というサービスを cookpad.com にて公開しました。「撮るレシピ」というサービスは料理本や雑誌のレシピを写真に撮ってクックパッド上に保存できるというものです。料理本や雑誌でレシピを良く見る方はぜひ使ってみてください(Androidアプリ版もあります)。 この「撮るレシピ」は全体公開前に一部のユーザに限定公開をしていました。そして全体公開をするにあたりフロント側のコードを全面的に書き換え高速化を行いました。その結果、最大で30倍高速化することができユーザの使い勝手が向上しました。以下が「書き換え前」と「書き換え後」の計測結果です(Android端末8機種 + iOS3機種で各操作のターンアラウンド時間*1を計測)。 閲覧系 最大: 30倍高速化(4.2秒→0.14秒) 平均: 15.7倍高速化(3.6秒→
Webフロントエンドに従事するお前らはいい加減高頻度イベントとレイアウトとスタイリングの付き合い方を考えろ - Qiita
もうなんかこの際マジで言わせていただくんですけど、知ってるか知らないか分かりませんが世の中にはすごい頻度で呼ばれうるDOMイベントって言うのがいくつかあるわけですよ 例えば scroll mousemove, touchmove devicemotion 辺りですよ。 で、高頻度で呼ばれるって言うことは必然的に処理量が増えるって分かりますよね？？？？？while(1) {}じゃないとはいえUIスレッドに十分影響を与えうる頻度で呼ばれる訳です。分かりますよね？？？？？？？？ そうなると当然そのイベント内で重い処理を行えば人間が認識できるレベルでのレスポンス遅延が起きるっていうのはご理解できますよね？ 重い処理っていうのはまぁ想像出来るとは思うんですが例えばよくあるのが DOMのレイアウトプロパティへのアクセス offsetTop、offsetLeft、offsetWidth、offsetHe
<script async>でJavaScriptの非同期読み込みを - fragmentary
JavaScriptファイルをスクリプトから非同期で読み込むパターンは古い、という話を目にしたのはもう半年前のこと。 言ったのはIlya Grigorik。月末のGoogle Japanでのイベント、月初のHTTP2ConferenceにくるWebパフォーマンス界のすごいひとですよ。 Script-injected "async scripts" considered harmful - igvita.com 件のパターンは、スクリプトで動的に script を生成して、そこに読み込みたいJavaScriptファイルをぶっこんで読み込むというもの。 <script> var script = document.createElement('script'); script.src = "//somehost.com/awesome-widget.js"; document.getEleme
Gulp入門 - コーディングを10倍速くする
2014/9/12に行われた週末ランサーズでのGulpハンズオンで使用したスライドです。 LIGブログでこの内容をさらにまとめています。 http://liginc.co.jp/web/tutorial/117900
【Codepatch #06】JSONで生成されたコンテンツでのSEO対策の方法とは！？ | Goodpatch Blog
お久しぶりです。フロントエンドエンジニアの右寺です。 Goodpatchのフロントエンド定例会議での話題をみなさんにお届けするCodepatchの第6弾！ 今回はあるメンバーからの「サイト内のコンテンツをJSONで管理したいが、SEO的なデメリットをどうにか解決できないか？」という相談に対して出てきたアイデアをみなさんにも共有したいと思います。 SEO的なデメリットとは？ みなさんもご存知の通り、Google等の検索サービスは「クローラー」というプログラムを用いて各ウェブサイトの情報を収集し、それを基に検索結果を利用者に表示しています。 元来、そのクローラーはウェブサイト内の静的なHTMLの情報を取得しています。 しかし、現在は冒頭の相談のように運用の利便性を上げるためにJSONのデータから情報を生成したり、AngularJSなどのJavascript MVCフレームワークによって構成され
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Chrome Developer Toolsを使いこなそう！
Frontrend Conference
ペパボのフロントエンドスタンダード に関する記事一覧 - ペパボテックブログ
Firefox を使ってみよう
