ヒトでもわかるWebブラウザ自作入門 - Qiita
この記事は何? こんにちは。現在私は趣味でWebブラウザを実装しようとしています。 この記事にはその中で気づいたことをまとめていきたいと思います。 ブラウザがやること ブラウザは壮大で、複雑で、本当に様々なことをしています。(少なくとも、BlinkやServoのコードを見た私はそう思いました) そのためこの章ではシンプルに、ブラウザがどのように画面のレンダリングを行うのかに重点を置いて説明していこうと思います。 HTML/CSSの解析 Webページはほとんどの場合、当たり前ですがHTMLで書かれています。そんなHTML文書を、ブラウザは扱いやすくするためにツリー構造にします。これが俗に言うDOM(Document Object Model)です。 例えば、以下のようなコードがあったとしましょう。 <html> <body> hello, <span style="color:red;">w
[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/046f7ff4cd4a3c13660691be03c73a7ac23181ab/height=288;version=1;width=512/https%3A%2F%2Flh7-us.googleusercontent.com%2Fdocs%2FAHkbwyJt1WXyWIR-fmeE7xVlC3iyv9V95kSlGfDLK-xfYo-YruZ04bN_cTbJSHeGFDydBIEIYHRVb_8rGMnFdn2xxJZ-cLNy_GwUp4ZPaCKkKZvnlAKvzao%3Dw1200-h630-p)
Introduction to Service Worker: How to use Service Worker - HTML5 Rocks
Service workers essentially act as proxy servers that sit between web applications, the browser, and the network (when available). They are intended, among other things, to enable the creation of effective offline experiences, intercept network requests and take appropriate action based on whether the network is available, and update assets residing on the server. They will also allow access to pu
猶予8時間！脆弱性だらけのサービスを堅牢化する実践型研修 - Speee DEVELOPER BLOG
Speeeエンジニアの西岡（@nisshieeorg）です。 去る7/5(水)、Speeeでは社内の全エンジニア向けに、セキュリティ研修を実施しました。本研修では、株式会社リクルートテクノロジーズの西村宗晃様に講師としてお越しいただきました。この場を借りてお礼申し上げます。 研修の目的 Webを主戦場にして戦う私達エンジニアは、自分たちのサービスそのものや、ユーザー、顧客を守るために、より安全なWebアプリケーションを構築する知識・技術を求められます。もちろんSpeeeでも、このような知識を身につけることは必須とした上で、日々の開発ではソースコードレビューや各種脆弱性診断ツールを用いて、私達が構築するアプリケーションの安全性を高めるよう努めています。しかし一方これまでSpeeeでは、「セキュリティに関する体系的な知識の学習法が会社から提示されていないため、個人の学習に依存している」「小さな
おじさんが若者たちにモテるためのモダンなHTML/CSSマークアップ
タイトルに含まれる語に関する補足 おじさん： 筆者の便宜上、30歳前後のフロントエンドエンジニア、マークアップエンジニア等を指す。性別は問わない。 なぜ「モテ」なければいけないのか 「モテる」とは、最先端の流行を知り取捨選択することで、自由意志を謳歌することで実現する。 PHPとjQueryの時代は廃れ始め、AngularやReactに代表されるUIフレームワーク、ES2015やTypeScriptを流暢に扱えることがフロントエンドの責務となり、HTMLやCSSも、EJSやPug・SassやPostCSSなどのトランスパイル言語を介すことがほぼ常識になってきた（と思う）。 ところが、HTMLやCSSを何の言語で書くか以前に、中身をどうするべきかはあまり議論されていないので、「モテる」ための方法をいくつかかいつまんでまとめてみた。 セマンティックなコーディングは、開発者の課題理解度を図り、意
【2017年度版】Webエンジニアでも最低限押さえておきたい、SEO施策のまとめと実装 - Qiita
Webエンジニアでも最低限のSEO知識を持っておきたい ferretやferretOneといったウェブマーケティングのメディア、ツールを開発、運営している株式会社ベーシックで働いており、近々ECサイトphocaseにて本格的にSEO施策を行うので、勉強がてらエンジニアが覚えておくべきだと思ったSEO周りの知識をまとめました。 この記事も書いていたら長くなってしまったので知らない部分をピックアップして読んでいただければと思います。 実装方法やSEO施策の詳細は貼ってあるリンクだけではなく、 別途Googleで検索するなどして複数の意見をインプットすることをおすすめします。 ###★この記事を読むとどうなるか マーケター、ディレクターとのやりとりがスムーズになる。 意図せず検索順位を下げてしまうコードに気づける様になる。 エンジニア側だけで動けるSEO施策を提案できる様になる。 なんとなくSE
flexアイテム内のスクロールを有効にする - メモを揉め
やりたいこと display: flex内の各要素（以下flexアイテム）は、自分の中のコンテンツに合わせて大きさが変わります*1。 そのため、コンテンツが画面からはみ出すような大きさの時はスクロール表示になって欲しいなーって時でも、そのままではスクロール表示になりません。 各flexアイテムの大きさはいい感じに分配されつつ、コンテンツがはみ出す時はスクロール表示になってほしいわけです。 試した結果これとほぼ同じ方法で出来ました。 memowomome.hatenablog.com やり方 flexアイテム内のコンテンツをラッパーで包みposition: absoluteにする*2。 // Jade .foo .bar .baz .qux ul.wrapper li: i.material-icons looks_one li: i.material-icons looks_two li:
Tabindex でフォーカスを制御する | Articles | web.dev
<button> や <input> などの標準 HTML 要素にキーボード アクセシビリティ対応 可能な限り使用してください。ただし、 カスタムのインタラクティブ要素を追加し、想定されるユーザー行動を tabindex を追加しています。 対応ブラウザ <ph type="x-smartling-placeholder"></ph> 1 個 <ph type="x-smartling-placeholder"></ph> 12 個 <ph type="x-smartling-placeholder"></ph> 1.5 <ph type="x-smartling-placeholder"></ph> 4 以下 ソース tabindex はインタラクティブなコンテンツにのみ追加します。たとえコンテンツが 重要な画像などが用意されており、スクリーン リーダーのユーザーは、その内容がなくても内
フロントエンド開発者が実践したい、アクセシビリティに配慮したJSを書くコツ
JavaScriptを使うことが当たり前になったいま、HTMLだけでなくJavaScriptを書くときにもアクセシビリティに配慮する必要があります。 JavaScriptコンポーネントのアクセシビリティを高め、ユーザーがWebサイトやWebアプリをより快適に使用できるようにするためのコツを紹介します。 以前の記事『Writing HTML with accessibility in mind（アクセシビリティに配慮したHTMLを書く）』で、どうしてWebアクセシビリティについて考えるようになったのか、また、どのように学んだのか説明しました。そして、マークアップを改善して、Webサイトのアクセシビリティを高めるためのコツを紹介しました。中には基礎的な内容も含まれていますが、どれも価値のあるものです。こうしたコツをすべてまとめると、フロントエンド開発において特に重要な2つの不文律ができあがりま
CSSのfloatに困った時に見直したい6つのポイント、floatがどのように機能しているか分かりやすく解説 | コリス
floatを使うと思った通りにならず、下に落ちてしまう、幅に収まらないなど、CSS初心者がつまづきやすい問題を解決するポイントを解説したチュートリアルを紹介します。 How Floating Works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 floatのルール 1. フロート要素を親要素から見るとどうなるか 2. 左や右にフロートさせる 3. フロート要素が押し下げられてしまう原因 4. フロート要素の配置の順番 5. フロート要素の配置の優先順位 6. フロート要素で親要素を広げない フロートのクリア clearfix floatのルール floatプロパティには、4つの値があります。 .foo { float: left | right | inherit | none } この4つの値はそれぞれ、要素を親要素の中でどの
Handsontable is a JavaScript data grid that looks and feels like a spreadsheet - Available for React, Angular, and Vue
JavaScript data grid with spreadsheet UI A front-end component that combines data grid features with spreadsheet UX/UI. Professional support included. Works with React, Angular, Vue, and plain JavaScriptGet Started What's new in v14.4.0 of June 11, 2024 → All spreadsheet featuresWhen you work with Handsontable, it's like you're working with Excel or Google Sheets. There's no steep learning curve –
2017年これからのWeb制作業界の流れ、注目されているテクニックやツール、Webデザインのトレンドなどのまとめ
数多くのブログで2017年のトレンドをさまざまな切り口でポストしているので、その中から特に印象的で共感がもてたものをまとめて紹介します。 注目キーワードは、コンテンツファースト、レイアウトの多様化、フラットデザインやミニマリズムの進化、アニメーションの重要性、コミュニケーション・コラボレーション、AR/VR。 2017年のトレンドカラーは、フレッシュなグリーン。 参考: 2017年のトレンドカラー「グリーナリィ」と春のトレンドカラー10色 2017年、Webデザインのトレンド 2016年に人気が高かったインターフェイスのデザイントレンド 2017年、Adobe社のデザイン予測 2017年、Web制作業界全体の流れ 2017年、注目されているデザイナー・デベロッパーのツール 2017年、WebデザインのUIにおけるトレンド 2017年、Webデザインのトレンド まずはWebデザインのトレンド
レスポンシブ対応で無料！ウェブ制作を高速化できるHTMLテンプレート24選 2017年1月度
ウェブサイトの閲覧方法は、モバイルやタブレットの普及によって大きく変わってきており、あらゆる端末へ対応することがウェブデザイン制作では必須となってきています。このややこしい問題を解決する、もっとも一般的な方法のひとつが、レスポンシブWebデザインです。 レスポンシブWebデザインとは、デスクトップやタブレット、スマートフォンなどさまざまな画面サイズごとにデザインを調整でき、あらゆるデバイスに最適化したWebサイトを、1つのHTMLで実現できる制作手法を指します。 今回はレスポンシブWebデザインに対応した、無料ダウンロードできるHTMLテンプレート素材をまとめてご紹介します。どれも文字テキストや画像イメージを編集するだけで、すぐに高品質なウェブサイトを作成できます。またBoostrapなど人気フレームワークを利用した素材も多く、柔軟にカスタマイズできる点もポイントです。 サイト設計の手間を
マージンやパディングでもう悩まない、モジュール式WebデザインにおけるHTMLとCSSの新しい実装方法
Webページを制作にする時に、マージンやパディングをどのようにつけるか悩むことがあります。2カラムの隙間は、左パネルの右マージンorパディングなのか、右パネルの左マージンorパディングなのか。 Web制作の今までの考え方がきっと変わる、モジュール式のアトミック デザインにおけるHTMLとCSSの実装のロジックを紹介します。 Learning from Lego: A Step Forward in Modular Web Design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、著者様・元サイト様にライセンスを得て翻訳しています。 最近のWeb制作の手法は、数多くあるフレームワークやUIキットからあらゆる種類のコンテンツのブロックを組み立てています。しかしながら、モジュール性と汎用性はまだWeb要素レベルでは達成されていないと言えるでしょう。 LEGOブロックの考え方を
「国税クレジットカードお支払サイト」は誰が運営するサイトなのか
「利用者は、自分（納税者）がトヨタファイナンスに納付を委託するのだということをちゃんと理解した方がよい」というお話。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WebUSBでレイヤーが低まるWeb開発 - Speaker Deck
GitHub - kamranahmedse/developer-roadmap: Interactive roadmaps, guides and other educational content to help developers grow in their careers.
CSSレイアウトを学ぶ
スマホを割ってマウスで動かした人、ZenFoneの精霊から上位モデルを授かる - さまざまなめりっと
2016年総まとめ：Pocketにたくさん登録されたWeb制作に役立つ記事のまとめ
