ついに、Webアプリでの帳票印刷のベストプラクティスを編み出しました💡PHPカンファレンス 2021 1週間前イベント 〜 帰ってきたPHP勉強会@東京 の発表資料です。 https://phpcon.connpass.com/event/224128/
2021年だから人類はHTMLを手打ちしろ
youkoseki.com 2021年だから人類はHTMLを手打ちしろ 新しい年だ。人並に新しいことを始めようなどと考える人もいるだろう。しかし、なにを始めればいいのか？ 僭越ながら一つ提案をさせてもらえるなら、私はこう言いたい。HTMLを手打ちしろ。ハイパーテキストマークアップランゲージを学べ。なぜなら、個人がコツコツとタグを手打ちしたウェブページには暖かみがあるからだ。 私は中学一年生のとき、はじめてパーソナルコンピュータを買ってもらった。中学受験がうまくいったら買ってもらえるという約束で、受験には失敗したのだが、買ってもらったのだ。中学時代、ほとんどずっとパソコンと向かいあっていたが、CONFIG.SYSとAUTOEXEC.BATを書き換えてメモリ残量の上下に一喜一憂していた記憶しかない。あとA列車で行こう4や、ルナティックドーンのようなアートディンクのPCゲーム。Windows 3
W3C発行のHTMLがすべて廃止された日 | フロントエンドBlog | ミツエーリンクス
あくまで有効日数はW3C仕様の名目上のステータスであり、参考情報にしか過ぎないわけですが、HTML5とそれよりも前に策定された(X)HTML仕様は、2018年3月に一斉に廃止され、HTML Review Draftと入れ替わるタイミングでHTML 5.1とHTML 5.2が同時に廃止されました。Second Editionを含んでいますが、HTML5シリーズがいずれも勧告から3年で廃止されているのは何とも興味深いところではあります。 また、古い話ですが、当時HTML5のEditorを務めていたHixieことIan Hickson氏が2008年に「HTML5の完成は2022年ごろになる」と発言していたことがありました（HTML5の完成は2022年！？ | Web標準Blog | ミツエーリンクス）。2012年にW3CとWHATWGのHTMLが分裂[1]し、結局今年になってWHATWG HTM
アンカー上の target=_blank が rel=noopener を暗示するようになりました | Firefox サイト互換性情報
リリース: Firefox 79 カテゴリー: DOM, HTML, プライバシー & セキュリティ 概要Firefox 79 以降、target="_blank" を伴った <a> や <area> 要素は、現行の HTML 仕様 に従い、rel 属性が設定されていない限り暗黙的に rel="noopener" を適用します。noopener リンクタイプは新たに開かれたウィンドウ内の window.opener を null とすることで、この DOM プロパティが信頼できない第三者のサイトによって悪用されるのを防ぎます。必要な場合は、rel="opener" を明示的に設定することで挙動を反転させられます。 Apple は 2019 年 3 月公開の Safari 12.1 で最初にこの変更を行いました。Firefox では、Firefox 65 以降の Nightly と早期 Be
javascript:正規化された(canonical)URLを取得する - サンプルコードと使用例
canonical属性とは／link rel="canonical"によるURL正規化タグ——SEOにとって非常に重要な進歩（前編） | Moz - SEOとインバウンドマーケティングの実践情報 | Web担当者Forum http://web-tan.forum.impressrd.jp/e/2009/03/05/5112 そのため、その正規化されたURLは、その Web ページの作成者が、その Web ページをどんな URL として扱って欲しいのかを明示的に示したものです。 従って、Webページの URL をブラウザ側で動的に取得しようとした場合、location オブジェクトから取得する場合には、URL の表記に様々なバリエーションが生まれてしまいますが、正規化された URL を用いれば、そのコンテンツに対する URL を一つに限定できます。 正規化された URL は、次のように H
睡蓮花 湘南乃風 歌詞情報 - うたまっぷ 歌詞無料検索
睡蓮の花のように 朝日に向け今日も歌う 睡蓮の花のように この思い水面に光る 花びらが流した涙 貴方は笑えていますか? 上がりまくる季節が来た ヤバくなれるのは誰… 俺!俺! 俺!俺!Ole!Ole! Ah 真夏の Jamboree レゲエ<砂浜<<Big Wave!! Ah 悪ノリの Heartbeat めっちゃゴリゴリ Welcome Weekend Ah 灼熱の Jamboree 暴れまくってイイぜ!! Ah 冷めないで Summer Dream ｢濡れたまんまでイッちゃって!!!｣ 夏だぜ (Yeah!!) 夏風 (Fuu!!) 夏晴れ (Yeah!!) 夏バテ (Boo↓↓) またコイツで決まりだ Summer Again 青く晴れた日を 笑う太陽 溢れる希望 むすぶ靴ひもに期待のせて 風を連れて 夢の種植えるため 今走り出そう 黄色いバス越え江ノ島方面 スゲエ混み合ってる ひま
世界初のウェブブラウザ「WorldWideWeb」をブラウザ内で体験できるサイトをCERNが公開
欧州原子核研究機構(CERN)の技術コンサルタントだったティム・バーナーズ＝リー氏らが1990年に開発したHTMLエディタ「WorldWideWeb」は、世界初のウェブブラウザといわれています。そんなWorldWideWebをウェブブラウザ上で完全に再現したサイトが、WorldWideWebを生んだCERNのサーバーで公開されています。 CERN 2019 WorldWideWeb Rebuild https://worldwideweb.cern.ch/ Adactio: Journal—WorldWideWeb https://adactio.com/journal/14821 CERNの公開ページにアクセスして、「Launch WorldWideWeb」をクリックします。 WorldWideWebはこんな感じ。NeXTコンピューターのOSであるNeXTSTEPのHTMLエディタとして
📃 Webページをそのままの状態でローカルに保存するツールを作った話 - Qiita
はじめまして。yamaimo (@yarnaimodev) です。Qiita 初投稿...というかネット上にちゃんとした記事を上げるの自体初めてな気がします。 1998 年生まれで、プログラミングとか Web デザインは独学で 3 年ぐらいやってます。TypeScript / Firebase / Node.js / React あたりが特に好きです。 この前 coliss で紹介された Can't Unsee を試してみたら 1 回目が 7,630 点、2 回目が 7,930 点でした。1 小規模ですが Mastodon インスタンスを管理してます。あと Helix キーボード をこの前組み立てた2んですがキー配列を変えたのがなかなか覚えられなくて死んでます。 開発環境は基本的に WSL + Hyper + fish shell と VSCode です。 今回 Puppeteer を使っ
リンクのへの rel=noopener 付与による Tabnabbing 対策 | blog.jxck.io
なお IE は(security zone setting をいじらない限り)この問題が発生しないようだ。 引用元: blankshield demo | Reverse tabnabber phishing tabnabbing 上記の挙動を、フィッシング詐欺に利用できることが既に指摘されている。 この手法は Tabnabbing と呼ばれている。 Tabnabbing: A New Type of Phishing Attack Aza on Design Target="_blank" - the most underestimated vulnerability ever この攻撃方法を解説する。 攻撃の概要 https://cgm.example.com (左上) というサービスがあるとし、これは SNS やチームコラボレーション系サービスを想定する。 攻撃者は、このサービスの不
5ch(旧2ch)をスクレイピングして、過去流行ったネットスラングの今を知る - にほんごのれんしゅう
5ch(旧2ch)ではここ数年はTwitterを使用するようになってしまいましたが、ネットのミームの発信地点であって、様々なスラングを生み、様々な文化を作ってきたと思います。 学生時代、2chまとめとか見ていたので、影響を受けてきたネット文化で、感覚値からすると、どうにも流行り廃りがあるようです。 5chの過去ログを過去18年ほどさかのぼって取得する方法と、懐かしいネットスラングのドキュメントに占める出現具合を時系列でカウントすることで、時代の変遷でどのように使用の方法が変化したのか観測することができます。 文末に「orz」って付けたら若い人から「orzってなんですか？」と聞かれて心身共にorzみたいになってる— ばんくし (@vaaaaanquish) October 19, 2018 図1. 今回集計したorzの結果 例えば、今回集計した5chの書き込み500GByte程度のログからで
ブラウザはどのようにコンテンツをレンダリングしているのか？
By Fabio Lanari ウェブブラウザはHTMLなどで書かれた文章を解釈し、テキストや画像を配置するソフトウェアです。そのテキストや画像などのオブジェクトをレンダリングするレンダリングエンジンの仕組みを、ユーザーセッション分析やUX最適化サービスを提供しているSessionStackのCEOであるAlexander Zlatkov氏がまとめています。 How JavaScript works: the rendering engine and tips to optimize its performance https://blog.sessionstack.com/how-javascript-works-the-rendering-engine-and-tips-to-optimize-its-performance-7b95553baeda ブラウザの主要コンポーネントには「
HTML 5.2の新機能・削除された機能、変更された記述ルールのまとめ
HTML 5.2は2017年12月14日に勧告（Recommendation）され、仕様がRECステージに達しました。これはW3Cメンバーとディレクターの正式な承認を受けたことを意味し、Web制作者として、新しい機能の実装を開始するのに最適な時期になります。 HTML 5.2ではいくつかの新機能と削除された機能があり、記述ルールもいくつか変更され、今までinvalidだったものがvalidになり、新しくinvalidになったものもあります。 すべての変更点はHTML 5.2: Changesで確認することができます。 Web制作に最も影響を与えると思われるいくつかの変更点について説明します。 What's New in HTML 5.2? 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 HTML 5.2の新機能 HTML 5.2
「美乳」で文字化けが直るって本当？
・「美乳」で文字化けが直るって本当？ オンラインＤＶＤ＆ＣＤレンタルなら月々1980円で借り放題のＤＭＭがお得！ えっ？ って聞きなおしたくなるようなタイトルですが、「この『美乳』という文字をヘッダー部分にコメントとして挿入しておくと、文字化けが直る」という話は確かに存在します。ただし、これは大前提としてEUC-JPのページを作成するならば、という話になります。 <HTML> <HEAD> <meta http-equiv=Content-Type content="text/html; charset=EUC-JP"> <!-- 美乳 --> <TITLE>テスト1</TITLE> </HEAD> <BODY bgcolor="#FFFFFF"> このページはアダルトサイトとは無縁です。ヌード画像などは一切ありません。 </BODY> </HTML> では、なぜ、この「美乳」がおまじない
HTMLのheadの書き方、head内に記述する要素の総まとめ
HTMLページのhead内に記述する最小限の構成、そしてmeta要素やlink要素、ソーシャルサービス用の要素、デスクトップ・スマホのブラウザ用の要素などがまとめられた「<head> cheatsheet」を紹介します。 <head> cheatsheet 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 去年紹介した以前の版からいろいろと変更されています。 head内に記述する最小限の構成 head内の要素 meta要素 link要素 ソーシャル関連のhead内の要素 ブラウザ・プラットフォーム関連のhead内の要素 メモ head内に記述する最小限の構成 下記はシンプルなWebサイトで必須となるhead内に記述する最小限のタグです。 <meta charset="utf-8"> <meta http-equiv="x-ua-c
HTML Editor
<h2 style="text-align: center;"><span style="text-decoration: underline;"><strong>Click here</strong></span><strong> to start using the </strong><strong><em>HTML editor online</em></strong></h2> <p><span style="font-weight: 400;">Please</span><span style="font-weight: 400;"> try out the WYSIWYG HTML editor features found in the kitchen sink above to edit and format your text and images</span></p>
target="_blank" のセキュリティリスク(デモ動画あり)
HTMLを勉強する際に最初に覚えるものの1つにa要素(タグ)があります。HTMLのアイデンティティと言っても過言ではない、ハイパーリンクを実現する大事な要素です。 href属性に設定されたリンク先のURLをどのウィンドウ等に表示するかを決めるtarget属性というものがあります。任意の値を設定してウィンドウに名前を付ける事で、複数のa要素から同じウィンドウへリンク先URLを表示する事もできますし、常に新しいウィンドウを開く_blankのような、あらかじめ挙動が設定されている値もあります。 target="_blank" のセキュリティリスク リンクの開き方を決定するtarget要素ですが、この挙動を利用してリンク先からリンク元のウィンドウを操作できるというセキュリティリスクが公開されています。 Target="_blank" - the most underestimated vulner
第二次キュレーション戦争
youkoseki.com 第二次キュレーション戦争 キュレーションサイト問題により長年築いてきた情報の信頼性にケチのついたGoogleだったが、対策は早かった。年始に同社は前触れなく「ゴリラ・アップデート」を発表。構造化された・長文の・新しいウェブページを優遇するこれまでの方針を180度転換し、雑然とした・書き捨ての・古いウェブページを優遇することを宣言した。 その影響は甚大だった。いわゆるキュレーションサイト、まとめサービスはもちろん、ブログサービス、クチコミサイト、ニュースサイトなど、丁寧なSEOを心掛けてきたウェブページは一律に検索結果から姿を消した。AMPは一切人の目に触れなくなり、RSSやmetaタグによるセマンティックな情報は軒並ペナルティを受けた。 かわって浮上したのは、書いた本人も忘れているような個人ページ、プロパイダーさえ提供していることを忘れていたようなホームページサ
どんどん作ろう。オンラインでHTML5/JavaScript/CSS3の実行確認ができるWebサービス×16選
どんどん作ろう。オンラインでHTML5/JavaScript/CSS3の実行確認ができるWebサービス×16選 Web技術の良いところはブラウザさえあれば実行確認ができて、テキストエディタだけで作れてしまう所ではないでしょうか。さらに今回紹介するようなサービスはWeb上にHTML5/JavaScript/CSS3を保存して共有できるので、HTML5の新しいAPIを試すのに使ったり、テクニックを披露するのに使えますよ。 JSFiddle 多種多様なJavaScriptフレームワークの読み込みも可能で、HTML/JavaScript/スタイルシートの記述ができます。 Create a new fiddle – JSFiddle CodePen グラフィックス系の投稿も良く見かけるWebプレイグラウンドです。 CodePen – Front End Developer Playground &
<ruby>－HTML5タグリファレンス
<ruby>・<rt>・<rp>は ルビをふる際に使用します。 <rt>はRuby Textの略でルビのテキストを、 <rp>はRuby Parenthesesの略でルビのテキストを囲む括弧等の記号を、それぞれ指定します。 <rt>と<rp>は、<ruby>～</ruby>の中で子要素として使用します。 <rp>～</rp>の内容は、<ruby>タグに対応したブラウザでは無視されます。 <ruby>タグに対応していないブラウザでは、 漢(かん)字(じ) のように表示されます。 ■HTML4.01からHTML5へのバージョンアップによる変更点 <ruby>・<rt>・<rp>は、すでにInternet Explorer5以降で先行採用されていますが、HTML5では標準仕様となります。 ただし、Ruby Baseの略でルビをふる対象となる文字本体を示す<rb>は採用されない予定です。 HTML
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
h1要素は複数回使って良いのか!? HTML5.1に関するW3CとWHATWGの主張の違い
