Maximally optimizing image loading for the web
In this post I'll outline 8 image loading optimization techniques to minimize both the bandwidth used for loading images on the web and the CPU usage for image display. I'll present them in the form of an annotated HTML example to make it easy for folks to reproduce the results. Some of these techniques are more established, while others are somewhat novel. Ideally, your favorite mechanism for pub
リンクかボタンかそれ以外か - Unreviewed
あるアクションを引き起こす「モノ」を「リンク」とするか「ボタン」とするかは、何を基準に判断すればよいのでしょうか。ここでは最近の私の解釈を書きます。 最近の私の解釈 最近の私の解釈は「アクションが、ページの遷移かフォーカスの移動を発生させるものはリンク、そうでなければボタン」というものです。この解釈はWAI-ARIA 1.0のある注記がきっかけになっています。 WAI-ARIA 1.0 WAI-ARIA 1.0 （2011年1月18日勧告候補）にはlinkロールとbuttonロールがそれぞれ用意されています。中でもlinkロールには私の解釈の直接のきっかけとなった注記があります。 Note: If pressing the link triggers an action but does not change browser focus or page location, authors
HTML 属性: autocomplete - HTML: ハイパーテキストマークアップ言語 | MDN
HTML チュートリアル HTML の基本 HTML 入門 HTML 入門の概要 HTML を始めよう ヘッド部には何が入る? HTML のメタデータ HTML テキストの基礎 ハイパーリンクの作成 高度なテキスト整形 文書とウェブサイトの構造 HTML のデバッグ 評価課題: 手紙のマークアップ 評価課題: コンテンツのページの構造化 マルチメディアとその埋め込み マルチメディアとその埋め込みの概要 HTML の画像 動画と音声のコンテンツ object から iframe まで — その他の埋め込み技術 ウェブへのベクターグラフィックの追加 レスポンシブ画像 評価課題: Mozilla のスプラッシュページ HTML の表 HTML の表の概要 HTML の表の基本 HTML 表の高度な機能とアクセシビリティ 評価課題: 太陽系の惑星データの構造化 リファレンス HTML 要素 <a>
HTML5 Conference 2018 登壇資料まとめ - Qiita
HTML5 Conference 2018 の登壇資料のまとめです。 資料を発見次第随時アップデートしていきます。 https://events.html5j.org/conference/2018/11/ 2018年11月25日（日） 東京電機大学 千住キャンパス 1号館 タイムテーブル https://events.html5j.org/conference/2018/11/session/ ハッシュタグ 総合: #html5j ホール（2階）: #html5j_h 各ルーム（1階:A-C/2階:D,E）: #html5j_a #html5j_b #html5j_c #html5j_d #html5j_e セッション ZOZOのグローバルECのフロントエンドアーキテクチャ設計 （権守健嗣さん） 光を超えるためのフロントエンドアーキテクチャ （mizchiさん） TypeScript E
普通のHTMLの書き方
保守しやすく、規模に依存しないHTML文書のために 一般 DOCTYPEで始める 置き換えられるべきまたは旧式のDOCTYPEを使わない XML宣言を使用しない 文字参照はできる限り使わない &と<、>、"、'は名前文字参照を使ってエスケープする 制御文字や不可視文字は数値文字参照を使う コメントではその内容の前後へ空白文字を置く 終了タグを省略しない 空要素の書き方を混ぜない タグや属性値の前後へ空白文字を置かない 大文字・小文字を混ぜない 引用符を混ぜない 属性を2文字以上の空白文字で区切らない 真偽値を取る属性の値は省略する 名前空間は省略する XML属性は使わない data-*とMicrodata、RDFa Lite用の属性と通常の属性を混ぜない デフォルトの暗黙のARIAセマンティックスを尊重する 文書要素 lang属性を追加する lang属性の値はできる限り短くする できる限り
フロントエンド開発の概要について
ここでは、フロントエンド開発の概要について説明していきます。 ＊元記事はこちらです。(英語) この記事でカバーしているものについてSingle-page Apps (SPAs)New-age JavaScriptUser InterfaceState ManagementCoding with StyleTestingLinting JavaScriptLinting CSSTypesBuild SystemPackage ManagementContinuous IntegrationHostingDeploymentSingle-page Apps (SPAs)かつてはサーバーサイドレンダリングという、別のURLを開くごとにページをリフレッシュしてサーバーから新たなHTMLページを送る手法が主流でしたが、最近のSPAsではクライアントサイドレンダリングというものが主流になっています。
コーディングが苦手なWebデザイナーにおすすめしている独学方法 - IT系女子ログ
Webデザイナーとして入社した新人さんの教育係を担当しています。 デザインもコーディングも教えるのですが、新人さん達からよく聞こえてくるのが、「コーディングが好きになれない…」という声です。 うまくいかないから、勉強不足だから、という理由で好きになれないのであれば、大丈夫です。 続けていれば、皆さん業務をおまかせできるようになります。 私も何度も何度もコードを書いて、1年経ってやっと基本を覚えられた気がします。 新人Webデザイナーの私が、1年目で指摘されたことを振り返る[コーディング編] - IT系女子ログ あきらめずに勉強を続けていれば、できることが増えてきます。そうなれば、嫌いな気持ちもやわらいできますよ。 今回は、「コーディングが苦手」と感じている新人Webデザイナーさんへ向けて、少し先輩の私からのメッセージです。 苦手だなぁと感じる方向けに、いつもおすすめしている独学方法をご紹介
おじさんが若者たちにモテるためのモダンなHTML/CSSマークアップ
タイトルに含まれる語に関する補足 おじさん： 筆者の便宜上、30歳前後のフロントエンドエンジニア、マークアップエンジニア等を指す。性別は問わない。 なぜ「モテ」なければいけないのか 「モテる」とは、最先端の流行を知り取捨選択することで、自由意志を謳歌することで実現する。 PHPとjQueryの時代は廃れ始め、AngularやReactに代表されるUIフレームワーク、ES2015やTypeScriptを流暢に扱えることがフロントエンドの責務となり、HTMLやCSSも、EJSやPug・SassやPostCSSなどのトランスパイル言語を介すことがほぼ常識になってきた（と思う）。 ところが、HTMLやCSSを何の言語で書くか以前に、中身をどうするべきかはあまり議論されていないので、「モテる」ための方法をいくつかかいつまんでまとめてみた。 セマンティックなコーディングは、開発者の課題理解度を図り、意
とあるソシャゲのHTML/CSS設計話
【Frontendアドベントカレンダー19日目】 Xboxに釣られて転職してから２年半…あっという間だった…。 関与したもの： スマホ版ピグ（リニューアルして面影無し） ピグファンタジア（11月末クローズ） 新規ゲーム ←今ここ 今は新規ゲームでコーディングの人としてjoinしてます。 新しいサービスを立ち上げる時に必要なHTMLとCSSの土台作りを全部やるということが、 「HTML/CSS設計」という言葉で装飾されることを知ったのは割と最近です。 マークアップだけで一人据えるのは珍しいと思うので、今やってることなど含めてつらつら書きます。 ここが変だよソシャゲ開発 依頼を受けてサイトを作る場合は次のようなフローだと思います： クライアントと打ち合わせ 仕様が決まる デザイン決まる 値切られる 価格が……決ま…る コーディング クライアントチェック 突然の無理難題に戦慄走る テスト・修正
現場で使える効果的なHTML&CSS構造設計（Effective HTML&CSS）
2. プロフィール • 竹内 真 / TAKEUCHI SHIN #singtacks – 創業企業＆所属 • 株式会社レイハウオリ 代表取締役社長（W3Cメンバー） • 株式会社ビズリーチ 取締役CTO • 株式会社ルクサ CTO – 主な運営サービス • • • • • 2 ビズリーチ http://www.bizreach.jp/ ルクサ http://luxa.jp/ RegionUp http://www.regionup.com/ codebreak; http://www.codebreak.com/ CareerTrek http://www.careertrek.com/ #singtacks supported by
Responsive Web Css
HTMLとCSSのファイルは「page.zip」として一つのファイルで、自動ダウンロードされます。 ファイルの中身は、下記のようになりました。 HTML HTMLのスケルトンです。 必要最小限のもののみの構成です。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <meta name="generator" content="Responsive Web Css (www.responsivewebcss.com)" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="Stylesheet" href="index.html.css" /> </head> <bod
達人出版会
探検! Python Flask Robert Picard, 濱野 司(訳) BareMetalで遊ぶ Raspberry Pi 西永俊文 なるほどUnixプロセス ― Rubyで学ぶUnixの基礎 Jesse Storimer, 島田浩二(翻訳), 角谷信太郎(翻訳) 知る、読む、使う！ オープンソースライセンス 可知豊 きつねさんでもわかるLLVM 柏木餅子, 風薬 つくりながら学ぶ！生成AIアプリ＆エージェント開発入門 ML_Bear DaVinci Resolve Fusion 今日から使える活用ガイド 大藤 幹 大規模データセットのためのアルゴリズムとデータ構造 Dzejla Medjedovic, Emin Tahirovic, Ines Dedovic(著), 岡田佑一(訳) LLMのファインチューニングとRAG ―チャットボット開発による実践― 新納浩幸 Rで学ぶVAR実
第38回 HTML5とか勉強会でテストについて話しました。 - teppeis blog
先週の4/26に開催された第38回HTML5とか勉強会「Webアプリ×テスト最新事情」で、JavaScriptのテストについて話させてもらいました。 発表資料はこちら。 JavaScript Unit Test Why? What? How? from teppeis 恥ずかしいビデオはこちら。http://www.ustream.tv/recorded/31976691 発表内容は、前回のWEB+DB PRESSで書かせてもらった内容の要約版＋アルファでした。 個人的には、最近ようやく実践テスト駆動開発(通称GOOS本)を読んで、2重のフィードバックループとアジャイルテストの4象限、TDD/BDDなんかが自分内でガシーンと、ザ・ワールドが時の歯車をがっちり掴んだときのようなつながった感があったのですが、まだ言語化するには早かったらしくあまりうまくは伝えられなかったかなと反省しました。 座
ガントチャート上でドラッグ＆ドロップでタスクの並び替えられるようにしてほしい – Customer Feedback for Backlog
ベトナムにおけるBacklog活用のリアル ベトナムにおけるBacklog活用のリアル backlog Backlog の Amazon EKS クラスターを Blue-Green アップデートするためにやっていること Backlog の Amazon EKS クラスターを Blue-Green アップデートするためにやっていること backlog 2023年最も素晴らしいプロジェクトを表彰！Good Project Awardを開催しました 2023年最も素晴らしいプロジェクトを表彰！Good Project Awardを開催しました backlog Backlog開発者が夫婦の不和をなくす家庭管理アプリを作ってみた話 Backlog開発者が夫婦の不和をなくす家庭管理アプリを作ってみた話 backlog 創業からもうすぐ80年の老舗企業！ミートボールでおなじみの石井食品様で、プロジェクト
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://codepen.io/tak-dcxi/pen/MWjOqYg
wikihub.io
Mac用グラフィックツール「Sketch 3」のアートボードをHTML＆CSSへ書き出してくれるプラグイン「marketch」がGitHubで公開。
Learn to Code Online | Treehouse
Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.
転送中