デジタル庁のサイトやばすぎるwww - Qiita
はじめに みなさん、デジタル庁のサイトはご覧になったことはありますか？今話題のデジタル庁です。 こちらが2023年6月現在のデジタル庁のサイトです。やばくないですかこれ？最初見たときこれ「やっばw」と思いました。これからこのサイトのやばさを語っていきたいと思います。 洗練されたシンプルさ、そしてデザイン 僕は最初見たときびっくりしました。「なんてシンプルで見やすいんだ！」官公庁のサイトですよ？官公庁のサイトといえば、細かい字がずらっと並んで見づらいイメージでしたが、デジタル庁のサイトはとことんシンプルさを追求して見やすくしてます。フォントもNoto Sans JPを使われててとても読みやすい。黒も #000 でなく見やすい色になっている。 やばいですねこれ。 そしてこのレイアウトを見たとき、余白のおかげでとても見やすいなと思いました。そこでChrome Dev Toolでレイアウトを見てみ
やはりHTML/DOMは再発明されるべきじゃないか - mizchi's blog
と思う次第である。以下理由。 JavaScript, GUI設計の今 JSはそのプラットフォーム特性上、あらゆる言語の使用者の、あらゆる不満が集まる場所で、ヘイトを集めやすい環境だと思う。近年は npm というプラットフォームの登場でエコシステムが生まれ、思いつく限りあらゆるメソッドが適用されてきた。貧弱な言語基盤だが、その中で生き残った方法論が、今一番GUIの課題を上手く扱えている、と自分は考えている。 React/Redux や Angular によって、Flux/MVVMという抽象パターンが枯れてきたように思う。(この際、現場はまだ jQuery だぞ、みたいな話は無視する)。要は View は State の写像である、ということに尽きる。State はシリアライズ可能(JSON)で、Flux Action/Rx.Observable の Event Stream を入力とし、それ
[HTML5 Conference] ウェブのための次世代決済法
ウェブのための次世代決済法 The new and open payment for the web 24th Sep 2017
![[HTML5 Conference] ウェブのための次世代決済法](https://cdn-ak-scissors.b.st-hatena.com/image/square/706b8cb6d6553cc3fc2aebf45d9a609cc8e5af1e/height=288;version=1;width=512/https%3A%2F%2Flh7-us.googleusercontent.com%2Fdocs%2FAHkbwyK4SS_p0mFSnpCtCb_5euN5Uza3UMrLdshZB_vU3IK1FoDBP5O20TJbTJ1zgRbNzLh7g4rT9kZwQBnS7T20Prrt0jyVd7kZ-M7kfyVagr7ttw%3Dw1200-h630-p)
The State of Web Components
2017年9月24日に開催された HTML5 Conference 2017 の「The State of Web Components」のセッション資料です。
Custom elementsはES6のclass記法で定義可能になりそうです - Qiita
class FlagIcon extends HTMLElement { constructor() { super(); this._countryCode = null; } static get observedAttributes() { return ["country"]; } attributeChangedCallback(name, oldValue, newValue) { // observedAttributes によって、 name はいつも "country" になる this._countryCode = newValue; this._updateRendering(); } get country() { return this._countryCode; } set country(v) { this.setAttribute("country", v)
サイマルキャストはWebRTCになぜ必要なのか？W3C TPACで交わされたもっとも重要な議論を解説する
サイマルキャストはWebRTCになぜ必要なのか？W3C TPACで交わされたもっとも重要な議論を解説する 岩瀬 義昌（HTML5 Experts.jp編集部） 2015年10月26日から30日にかけて、札幌で「TPAC2015」が開催されました。本記事はその中でも、29日と30日に開催されたWebRTCワーキンググループの議論をレポートします。 TPACとは? TPACとは、Webの標準化団体であるW3C(World Wide Web Consortium)が開催する1週間のイベントのことです。様々な国、様々な企業からメンバーが集まり、現在のWeb標準・将来的なWebの機能(例えば、cryptoやaudio)について議論します。今回は、札幌開催であり主要なWebRTC仕様策定者が一同に日本に集結しました。 最大の議論の焦点となったサイマルキャスト WebRTCのW3C側の仕様は、まだCR(
Photon
The fastest way to build beautiful Electron apps using simple HTML and CSS Powered by Electron Underneath it all is Electron. Originally built for GitHub's Atom text editor, Electron is the easiest way to build cross-platform desktop applications. If you can write a bit of HTML, CSS, and JS, you can build full featured applications. Companies like Microsoft, Facebook, and Slack are using it – why
1ページで完結、Web制作者が助かるチートシート・資料・PDFまとめ
作成：2015/08/10 更新：2017/04/16 Web制作 > 開発環境 ページを移動せずにテンプレートや仕様書を確認したい。今回はPCの横に貼ったり印刷したり、ワンクリックで見れるように、1ページで完結している資料をまとめました。Web制作をする上で便利なチートシートや資料・仕様書まとめです。 エンジニア速報は Twitter の@commteで配信しています。 もくじ WordPress版 受託用マニュアル １．ヒアリングシート ２．WP版ホームページ制作の流れ ３．WordPress管理マニュアル ４．WP版品質チェックシート ５．Wordpress タグ タスクランナー ６．gulp ７．Bower JavaScript 代替言語／JST ８．TypeScript ９．CoffeeScript １０．Jade コーディング用 １１．Chrome 開発ツール １２．html5
プログラム組んだら負け！実はHTML/CSSだけでできること2015夏
ちゃんとした C# プログラムを書けるようになる実践的な方法～ Visual Studio を使った 高品質・低コスト・保守性の高い開発慎一 古賀
HTML の linkタグに prefetch 機能が追加され、より便利になるようです - latest log
linkタグに pre fetch 機能を追加する仕様 (Editor's Draft)が上がってきています。 Chrome - indevelopment IE - サポートするかも Firefox - 不明 Safari - 不明 <link rel="preload" href=“…" as=“…" onload=“…” onerror=“…”> 従来は、new Image や XHR と DOM API を使ってリソース毎に別々のJavaScriptを記述する必要がありましたが、お手軽になりますね。 これまで var img = new Image(); img.onload = function() { document.body.appendChild(img); }; img.onerror = ... img.src = url; var script = document
HTML 4.1が勧告されました (エイプリルフールの嘘情報です)(追記あり) (Kanasansoft Web Lab.)
HTMLの新しいバージョンであるHTML 4.1が勧告されました。 HTML 4.1で追加されたのはエイプリルフール用の仕様のみとなります。 たったこれだけの仕様追加でバージョンが上がってしまうのは奇妙に思われるかもしれませんが、理由を含めて解説してみたいと思います。 導入までの経緯毎年、4月1日のエイプリルフールには各サイトが創意工夫を凝らしたエイプリルフールの特設ページを作成することが慣例となっています。 多くの特設ページはエイプリルフールが終わると削除されるのですが、一部のコンテンツはインターネット上に残り続けています。 この傾向は、特に個人のブログに公開されたエイプリルフールのエントリーに顕著です。 4月1日中はインターネット利用者は警戒しつつネットを利用していますが、普段のネット利用時には多くの利用者は警戒を解いてしまいます。 このような時に偶然エイプリルフールのコンテンツに訪れ
XSS対策としてのES6テンプレートリテラル
XSS対策としての ES6テンプレートリテラル Shibuya.XSS Yosuke HASEGAWA ES6テンプレートリテラル ES6テンプレートリテラル ❤バッククォートで囲って改行も含められ る var x = `改行も ダブルクォート「"」も シングルクォート「'」も 使えるよ！`; alert( x ); ES6テンプレートリテラル ❤ヒアドキュメントというには少し残念 ❤円記号でのエスケープが生きてる… var x = `改行も¥nバッククォート¥`も ¥¥も使えるよ！`; alert( x ); ES6テンプレートリテラル ❤リテラル内に${...}で埋め込んだ式を評価 var name = "hasegawa"; var x = `Hello, ${name}-san`; console.log( x ); // "Hello, hasegawa-san" x = `ab
Front-End Dev guidelines - tech.tmw.co.uk
Overview This document details the guidelines and standards adhered to by the Creative Technology department at TMW, and all web applications built should take these into consideration. It is an evolving document and should be reviewed as and when required to keep up with changes in technology and best practice. These guidelines have been compiled looking at various previously written guidelines -
人間にはわかるのに、なぜ機械にはそれがわからないのか。A.I.とスクレイピング - かれ4
この投稿は クローラー／スクレイピング Advent Calendar 2014の12月23日用です。 はじめに人間って凄い。 まずはこの画像を御覧ください。 図1 各国のECサイトの画像 Eコマースのサイトで、商品の詳細のページを見るだけですぐに商品名、価格を判断出来ましたよね？ それが英語のサイトでも中国語のサイトでも、韓国語のページでも分かりましたよね？ 凄いですね。 人間のスクレイピング能力人間は恐ろしいほどのスクレイピング能力を持っている事が分かりました。 ソースも見ない、タグも見ないで、なんとなく雰囲気だけでスクレイピングしています。 もしこの能力をコンピュータに移植できたら凄いことですね。 もし、先ほどの画像を身の回りのインターネットに一番疎い人に見せてみて下さい。 きちんとスクレイピング出来たでしょうか？ おそらく出来なかった事が多いのではないかと思います。 こんな事させて
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
コードレビュー なんてしてられるかッ!!
GitHub - bahmutov/express-service: Package ExpressJS server to run inside a ServiceWorker
GitHub - ageitgey/amplify: A Jekyll html theme in the vague style of Medium.com built using Google AMP
This page does not use JS
HTML5で音を扱う3つの方法
GitHub - teppeis/htmlspecialchars: Escape special characters to HTML entities in JavaScript
