最近のフロントエンドツールの紹介現在のWebフロントエンドの現状と愚痴と、それに対するHaxeフロントエンドライブラリMageについて
2015年のWebサイトの作り方 at 67ws
The document summarizes quotes from three individuals about web design and development. Tim Berners-Lee notes that the primary principle of the web is universality, meaning it should be accessible from any device. Jason Fried argues that designing in Photoshop wastes time, as the design then needs to be rebuilt in HTML/CSS. Instead, one should design directly in HTML/CSS to allow for faster iterat
ふしぎな動き！JavaScript+HTML5で50行で『ラングトンのアリ』を作ろう - コードレシピ
ラングトンのアリについて ラングトンのアリを知っていますか？ラングトンのアリは以下の単純なルールに従って動くアリのことです。 黒いマスにアリがいた場合、90°右に方向転換し、そのマスの色を反転させ、1マス前進する。 白いマスにアリがいた場合、90°左に方向転換し、そのマスの色を反転させ、1マス前進する。 たったこれだけのルールでラングトンのアリさんはとても複雑な動きを見せ、まるで生きているかのようです。そしてこの複雑な動きを大体1万回繰り返すとなぜか一直線の道を作ってどっかにいってしまいます。 詳しくはデモを見てください。 今回はこれをJavaScriptで作っていきます。 今回作るラングトンのアリの動作の流れ 書く前にどんなものか少し考えてみましょう。 アリの場所のマスの色によってアリの向きの変更 アリの場所のマスの色を反転 アリを一マス進める 1へ。 めちゃめちゃシンプルですね。では早
JavaScript祭スピンオフ！ フロントエンド祭り in Co-Edo
JavaScript祭りスピンオフ企画！フロントエンド祭りの開催を致します！ 毎回JavaScript祭りは100名近く参加頂き、その都度WEBデザイナー系の方・初心者の方から「どうすればJavaScriptが書けるのか！？」という根本的な疑問を頂きます。 そこで今回は 「JavaScriptを愛する初心者～フロントエンド系」向けに「もっと書こうよ！JavaScript」をお送りしたいと思います。 セッションの時間を通常よりも長めに取っておりますので、ハンズオン形式でぜひ登壇者と一緒にJavaScriptを書いてみよう！ ※コワーキングスペース利用料金1000円がかかります。 なお、今回は参加費無料となっております。懇親会別途。懇親会費用は1500円となっております。受付時にお支払下さい タイムスケジュール 今回は全体を通して初心者～フロントエンド系 受付開始 14：00～14：30 座席
Update Your Footer
It is 2025. Update Your Footer. Change your static timestamp to an automatically updating copyright year or other dynamic timestamp. Just copy a code snippet from below or read more. What dynamic timestamp? » JavaScript Snippets This is pure JavaScript, meaning it will refresh the year browser-side, depending on the user's time settings. Just copy the below snippet and paste it where you want your
【翻訳】デザインエンジニアリング - 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
I am mitsuruog | 進化の早いフロントエンドの世界についていくために、スタイルガイドを有効活用しているという話
フロントエンドの世界では、日々新しいフレームワークやライブラリが生まれています。 初めてそういった新しいものを習得する場合に、なるべくなら近道したいと思うのが人の気持ちだと思います。 まず大変なのが、Hello World から実際のプロダクトやプロトタイプで利用する場合で、これは初めてで何もわからない土地を一人で散策するような感覚にも似ています。 今日、紹介するのは私が進化の早いフロントエンドの世界で、より早く未開の土地に慣れるためにスタイルガイドを有効活用しているという話です。 ちなみにこの記事はFrontrend Advent Calendar 2014 - Qiitaの 6 日目の記事です。 5 日目はじめての CSS 設計 - Qiita(@moschann) 7 日目CSS のプリプロセスとポストプロセス、そして Rework と PostCSS(@morishitter) 良
Post by @0-9
・横80列で折り返す。 普段80列で開発してるわけじゃないけど、横に長いコードも見にくいので。 ・1funtionは30行にする。 これも列指定と同じ意味で。 数字自体はそこまで意味がないけど、長いコードはそれ自体問題がある可能性が高い。 ・1ファイルは200～300行 「JSを1ファイルに200行以上書くと人間は死ぬ」と言われてるけど、実際はもうちょっと多くても大丈夫。 ・インデントは8タブ タブを使う理由は「タブはスペースに一括置換できるけど、スペースはタブに一括置換できない」から。 なので、コード中にコードインデント以外でハードタブは記述しない(文字列内に記述する時は¥tで記述する) タブの表示数はエディタ毎の設定次第だけど、インデントの深いコードが書きにくくなるので8タブで書く。 ただし、インデントの文字数に依存するインデントはしない(4タブでも正常なインデントになるように記述する
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分とかでぱぱーっとチェックだけしておくみたいな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【HTML5 Conference 2015】ウェブが“どこにでもあるもの”になったその先にあるものとは、ウェブ技術者の祭典「HTML5 Conference」 
Chrome Developer Toolsを使いこなそう！
Frontrend Conference
ペパボのフロントエンドスタンダード に関する記事一覧 - ペパボテックブログ
Firefox を使ってみよう
