Web屋という仕事のこれから 〜Web動向からWeb屋に必要な技術を考えてみる〜 FutureSync Vol.5 で発表したスライドです。 タイトルは釣りです。前半はほぼネタです。 中身はJavaScriptで動作するデバイスは楽しいからみんなやってみたら？ という内容です。Read less
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
Web屋という仕事のこれから 〜Web動向からWeb屋に必要な技術を考えてみる〜 FutureSync Vol.5 で発表したスライドです。 タイトルは釣りです。前半はほぼネタです。 中身はJavaScriptで動作するデバイスは楽しいからみんなやってみたら？ という内容です。Read less
Vorlon.JS
Getting Started Learn everything you need to about Vorlon.js 0.1.0 in this video Install and run the Vorlon.JS server from npm: $ npm i -g vorlon $ vorlon If you are on a mac $ sudo npm i -g vorlon $ sudo vorlon You may receive an error from npm during installation about Python, node-gyp and socket.io. You can ignore this error as it is related to an optional module. Socket.io team is already awar
ウェブパフォーマンスの基礎とこれから
2022年5月18日 【iCARE Dev Meetup #33】 デザイナー目線のユーザーとの向き合い方 でのスライドです。ユーザーインタビューをするとき、私たちはつねに「認知バイアス」にさられています。認知バイアスの影響を受けると、私たち自分に都合のよい情報ばかりピックアップしてしまいます。ユーザーにしっかり寄り添ったプロダクトをつくるためには、きちんとバランスのよいユーザーインタビューをする必要があります。本セッションでは、陥りがちな認知バイアスをミニワークを交えて体験し、ユーザーインタビューで気をつけるべきポイントを解説します。 なお、今日の登壇を誘ってくださった @murokaco さんが熱心な研究員（BiS というアイドルのファン）なので、 BiS（第3期）のデビュー曲「BiS -どうやらゾンビのおでまし-」をタイトルに入れてプレゼンしています。
Permissions API for the Web | Blog | Chrome for Developers
If you've worked with the Geolocation API before, chances are you've wanted to check if you had permission to use Geolocation without causing a prompt. This simply wasn't possible. You had to request the current position and this would indicate the permission state or cause a prompt to be shown to the user. Not all APIs work this way. The Notifications API has its own way of allowing you to check
Chrome 43からDOMの属性がJSのプロトタイプチェーンに移行します - Qiita
Chrome 43およびそれ以降のバージョンにおいて、DOMの属性（値）がJavaScriptのプロトタイプチェーンに移行されます。これにより、突っ込んだことをやっていた場合に、今まで動作していたコードが動かないということが発生する可能性がありますので、事前に変更内容を知り、対策をしておくことが求められます。HTML5Rockの更新情報として掲載されていましたので、さっそく日本語訳をしてみました。心当たりがある方は、ぜひ以下の内容を読んでいただいて、コードの修正などに取り込んでいただければと思います。 原文: http://updates.html5rocks.com/2015/04/DOM-attributes-now-on-the-prototype DOM属性は今後プロトタイプチェーンに Chromeチームは、最近「DOM属性をプロトタイプチェーンに移動しています」とアナウンスしてい
HTML/JavaScript/CSS対応のWebIDE「Orion 8.0」がリリース。ホバーツールでエラー表示などが強化
OrionはWebブラウザから使えるエディタ、デバッガなどが統合されたツールで、HTML/JavaScript/CSSに対応。ファイルマネージャ、エディタ、Gitによるバージョン管理、デバッガ、プレビューなどの機能が含まれています。 エディタのキーバインディングには、viとEmacsが標準で用意されており、マウスとカーソルキーだけでなく使い慣れたエディタの操作でコードの編集が可能。タグを入力するときには下記画面のように補完機能も自動的に働きます。
I am mitsuruog | SPAを構築するときに知っておいた方がいい7つの課題
ブラウザでの Javascript の高速化と Backbone や Angular のような JavascriptMVC フレームワークの登場により、以前より SPA（Single page application）が構築しやすくなりました。 さらに、Yeoman に代表される SPA を作成するするための scaffold（土台）が整備されてきましたので、結構さくっと SPA が作れるようになったのも事実です。 さくっと作った SPA がさくさく動かない・・・作ったけど使えない・・・なんてことにならないように、SPA を構築する前に知っておいた方がいい課題について調べてたり考えてみました。 目次 1. パフォーマンス 2. メモリリーク 3. セキュリティ 4. フレームワークロックイン 5. 画面設計から UI コンポーネント設計への思想転換 6. フロントエンジニア不足 7. 番外
Webフロントエンドに従事するお前らはいい加減高頻度イベントとレイアウトとスタイリングの付き合い方を考えろ - Qiita
もうなんかこの際マジで言わせていただくんですけど、知ってるか知らないか分かりませんが世の中にはすごい頻度で呼ばれうるDOMイベントって言うのがいくつかあるわけですよ 例えば scroll mousemove, touchmove devicemotion 辺りですよ。 で、高頻度で呼ばれるって言うことは必然的に処理量が増えるって分かりますよね？？？？？while(1) {}じゃないとはいえUIスレッドに十分影響を与えうる頻度で呼ばれる訳です。分かりますよね？？？？？？？？ そうなると当然そのイベント内で重い処理を行えば人間が認識できるレベルでのレスポンス遅延が起きるっていうのはご理解できますよね？ 重い処理っていうのはまぁ想像出来るとは思うんですが例えばよくあるのが DOMのレイアウトプロパティへのアクセス offsetTop、offsetLeft、offsetWidth、offsetHe
HTML5やCSS3、JavaScriptなどのドキュメントを高速検索できるサイト「DevDocs」 | ライフハッカー・ジャパン
「DevDocs」はHTML5やCSS3、JavaScriptなどのドキュメントを高速検索できるサイトです。MacにDashというドキュメントを高速に横断検索できるツールがありますが、それに似たサービスですね。オンラインで検索できるので、便利です。検索するとリアルタイムに検索結果が絞りこまれ、必要なドキュメントの内容が表示されます。 使うには、まずDevDocsへアクセスしましょう。左側のメニューに検索対象の言語が並んでいます。 プルダウンを開くとカテゴリごとにドキュメントが整理されています。左上の検索ボックスから対象のタグやメソッドを入力すると絞り込むことができますよ。高速に検索できるので、必要な情報がすぐに手に入るのがうれしいですね。ウェブ開発をしている方はドキュメントを読むことが頻繁にあると思います。DevDocsをブックマークしておくと、いざというときに便利ですよ。 DevDocs
ECMAScript6を使うのは5年ぐらい時期尚早だった - None is None is None
新製品のWEB UIを作ることになりました。 「functionって書くのダルいから、CoffeeScriptにしましょうよ」 「でもCoffeeScriptって、そろそろオワコンじゃないか？」 「ちょっと待てよ、そろそろES6（ECMAScript6、JavaScriptの次期標準、後述）が使えるようになってるんじゃないか！？」 そう思ってES6を調べましたが、やっぱりCoffeeScriptを使うべきだという結論に達しました。 CoffeeScriptとES6のおさらい CoffeeScriptはいわゆるAltJS 長所 「functionの代わりに->」「ローカル変数にvarが不要」といったイケてる文法が使えます。 事前にJavaScriptにコンパイルして使う。*1 Ruby on Railsが対応しているなど、かなり普及しているようです。 短所 事前コンパイルが必要なので製品のビ
albatrosary's blog
AI に会社ホームページを作らせた Semantic Prompting × Web開発のリアルな実践ログ ashiras.io 概要 本記事は、実際にAIに会社のホームページを設計・生成させた過程を、技術者視点で詳細に記録します。 特に、セマンティックプロンプティングを活用し、単なるUIの生成ではなく「意味構造に基づく設計」を実現した点が特徴です。 まさに ノーコード・ローコード。自分でコードを書くのが馬鹿馬鹿しくなる。 1. まず議論から始める：目的と世界観の共有 AIにWebサイトを「作らせる」と言っても、目的や雰囲気を曖昧に伝えるだけでは期待したものは出てきません。 そこで最初に行ったのは、AIとの対話による要件定義でした。 このサイトは何を伝えたいのか？ 対象ユーザーは誰か？ デザインの方向性は？ 企業の雰囲気（堅め？柔らかめ？） ☑️ ポイント このステップでは「見た目」よりも
HTML5開発環境とアーキテクチャと 〜 HTML5Experts.jp エンタープライズ開発特集・記念 〜 - albatrosary's blog
連載 | エンタープライズ開発特集 | HTML5Experts.jpがはじまりました。HTML5Experts.jpでは、私もエキスパートとしていくつか記事を書かさせて頂いております。 HTML5はバズワードではなくなったし、エンタープライズでも既に当たり前になってきた感のあるHTML5ですし、開発環境やアーキテクチャについても確定してきた感があります。 そして、既に「考え調べる」というフェーズから「使う」というフェーズに移りましたので、これからのエンタープライズ技術者は実践を通して手を動かすことが重要になります。 HTML5に適した開発環境 昨年では珍しかったYEOMAN(The web's scaffolding tool for modern webapps | Yeoman)も、既にエンタープライズでも当たり前のように使われています。開発インフラとしてのツールとしての地位を確立し
RESTが日本で受け入れられていった頃の話( #mozaicfm の補足) - Kentaro Kuribayashi's blog
mozaic.fm第7話のRESTの話で、RESTが日本で広く受け入れられていった頃、というか、その端緒の頃の話が出ていて懐かしかったのだし、細部にやや不正確なところがあるのが気になったりもしたので、補足を書いておきますね。 まず、いわずとしれた@yoheiさんがRESTをまず知ったのが2003年とかそれぐらいの時期とおっしゃっていて、それから数年経ち、RESTがWebエンジニアに広く受け入れられていったのは、2007年末にリリースされ、resourcesという機能を取り入れたRails2からというのは、@t_wadaさんがおっしゃっている通り、事実だろうと思います。 また、Podcastの中では、主催のJxckさんが、それはそれと認めた上で、彼自身にとってはAjaxの登場が大きかったということを述べた上で、@yoheiさんの主催された第八回XML開発者の日での高橋征義さんとid:seco
Fingerprintjs - Cookie不要でブラウザを特定する技術を体感
ブラウザを特定するためにCookieを使うのが一般的です。しかしプライバシーの問題があり、個人のブラウザ遷移を記録することないようDo Not Track機能が追加されたりと徐々に厳しくなってきています。 そんな中、新たに注目を集めているのがJavaScriptだけでブラウザを特定する技術になります。今回はそれを体感するFingerprintjsを紹介します。 Fingerprintjsの使い方 この数字は同じブラウザである限り、常に同じものが出ます。実に94%の精度でブラウザを特定できるとのことです。ブラウザの言語やユーザエージェント、セッションストレージの有無などに加えて、Canvasを使った画像生成による違いも使っています。 この数字はブラウザをシークレットモードにしても変わらないようで、非常に怖い技術と言えます。広告のトラッキングなど悪用されると相当な精度で個人のブラウザ遷移が追わ
独学でフロントエンド・エンジニアを目指す人のための基礎カリキュラム - DESIGNMAP
本記事は2013年に書いた記事で内容がだいぶ古くなっております。 フロンドエンドは3年間で大きく状況がかわりました。下記の2016年に書いた改訂版の新しい記事をおすすめします。 「フロントエンドエンジニアとは／Webアプリケーションの歴史／フロントエンドの勉強が難しくみえる理由 － まったくのゼロからフロントエンドエンジニアを目指すための独学カリキュラム vol.1」 2011年に『まったくのゼロから、独学でWebデザイナーになる方法』、2012年に『19のステップで、まったくのゼロから、独学でWebデザイナーになる方法』を書いて、独学でWebデザイナーを目指す人向けの具体的な独学方法を書いた。今回は、Webデザイナーという大まかなくくりではなく、フロントエンドエンジニアにしぼって独学方法をまとめてゆきたい。 フロントエンド・エンジニアとは フロントエンドとはWebブラウザ側（クライアント
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
XSS game
Welcome, recruit! Cross-site scripting (XSS) bugs are one of the most common and dangerous types of vulnerabilities in Web applications. These nasty buggers can allow your enemies to steal or modify user data in your apps and you must learn to dispatch them, pronto! At Google, we know very well how important these bugs are. In fact, Google is so serious about finding and fixing XSS issues that we
[JS]画像を用意しなくていいから簡単！クリッカブルに対応した日本の都道府県の地図を表示するスクリプト -Japan Map
デモページ 2 Japan Mapの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script src="https://code.jquery.com/jquery-2.1.1.js"></script> <script src="jquery.japan-map.min.js"></script> </head> Step 2: HTML 日本地図を配置するdivをセットします。 <body> ... <div id="map-container"></div> ... </body> Step 3: JavaScript jQueryのセレクタで配置する場所を指定し、スクリプトを実行します。 <script> $(function(){ $("#map-container").japanMap({ on
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
A Javascript-based DDoS Attack as seen by Safe Browsing
TechCrunch | Startup and Technology News
