“マークアップ”するということ ～ HTML5勧告に寄せて ～
HTMLを適切な要素を使って書いていくことは実はそれほど難しくはない。しかし過剰に要素を使わずに、かつスタイリングすることも意識して、と適切に“マークアップ”するのはなかなかの修練を必要とする。いったい“マークアップ”するということはどういうことなのだろうか、そしてどのような思考の元に行えば良いのだろうか。 HTML5での変化 著作権表示のマークアップ small要素 footer要素とsmall要素 p要素とdiv要素 footer要素とp要素 スタイリングとの兼ね合い マークアップするということ HTML5での変化 コンテンツに則した素直な形でマークアップできること。 HTML5で変わることや変わったことは多くあるが、それらをおおまかに俯瞰するとこのような言葉に集約できる。そのために様々な要素や属性が追加され、既存の実装をなるべく壊さない形で要素の意味に変更が加えられた。これらの変化は
WebAssembly for web developers
When WebAssembly was first announced, it caused excitement, but also some fear in the web development community and beyond. Programmers coming from languages like C++, or Rust surely appreciated the fact that they now could target the broader demographic of Web users, while putting in much less effort than was previously required. Web developers, on the other hand, especially those experienced mai
Photon - WebAssemblyで高速画像編集
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました WebAssembly（WASM）の大きな特徴として、その実行速度が挙げられます。Webブラウザ上で実行されるJavaScriptでは限界があった速度も、WebAssemblyであればネイティブ並の速度で実行できます。 そんな実行速度の速さを活かしたソフトウェアがPhotonです。WebAssemblyの力で画像を処理します。 Photonの使い方 元ファイルです。 レッドチャンネルのみ。 縮小表示。 上下反転。 ウォーターマーク追加。 テキスト追加。 フィルタを組み合わせることもできます。 結果をずらして適用すればこんな効果も。 明るさの調整。 Photonは画像全体に対するフィルターのみになるようですが、一瞬にして加工できます。全体の輝度調整やフィルタリングであれば、サーバサイ
Kubernetes meets WebAssembly in Microsoft’s Krustlet
‘Kubernetes Rust kubelets’ allow you to run WebAssembly workloads on Kubernetes alongside containers Microsoft’s Deis Labs recently announced an intriguing direction for Kubernetes, one that offers a new, sandboxed environment for our code. Building on the increasingly popular WebAssembly, Krustlet is a tool for delivering Kubernetes-managed workloads to WebAssembly runtimes, with a v0.1.0 release
なんとなくで書かないで！HTML5を書く時に気にしてみたいタグごとのお約束 - Qiita
はじめに この記事は クラウドワークスアドベントカレンダー2019 16日目の記事です。 こんにちは！本日25回目の誕生日を迎えたアクセシビリティ向上隊長 みーたです。 昨日は同じチームの@yamanokuさんによる「みんなに知ってもらいたいデザインシステムのこと」でした。 文中で紹介されていた「悲劇的なデザイン」は私もオススメします:) 私は今回、普段みなさんがHTMLを書く時に、よく使うタグごとでちょっと気をつけてみてもらいたい！と思う点をまとめてみました。 初学者ではありますが、正しくHTMLを理解してもらいたいって気持ちがあるので、マサカリは怖くない程度に投げていただいて、みんなで知識を共有していきたいです。 👻 真冬の怪談 突然ですがちょっと怖い話を... 先日、とある画面を改修しようと思って、今どんな感じにスタイル当たってるんだろうと本番環境を見てみたんですよ。 カードタイプ
WebAssemblyがW3Cの勧告に到達。「WebAssembly Core Specification 」「WebAssembly Web API」「WebAssembly JavaScript Interface 」の3つ
W3Cの WebAssembly Working Groupは、Webブラウザ上でネイティブコードに近い実行速度で高速に実行できるバイナリフォーマット「WebAssembly」の仕様が勧告に到達したことを発表しました。 今回勧告になったのは、WebAssemblyに関連する3つの仕様です。 1つ目はWebAssemblyのバイナリファイルを実行する仮想マシンの仕様を定義した「WebAssembly Core Specification」。これは一般的なマイクロプロセッサの動作を模倣するような作りにすることで、WebAssemblyのバイナリファイルでプロセッサのネイティブコードに近い実行速度を実現するようになっています。 2つ目の「WebAssembly Web API」は、さまざまなプラットフォームでWebAssemblyを利用可能にするため、WebAssemblyバイナリファイルのシリ
Fastly、WebAssemblyランタイムのサーバレス「Compute@Edge」ベータ公開
CDNベンダのFastlyは、WebAssemblyを用いたサーバレス基盤を同社のエッジデータセンターに置いた「Compute@Edge」をプライベートベータとして公開したと発表しました。 Have you seen the news? Compute@Edge, our uniquely performant approach to serverless computing, is here With a 100x faster startup time than any other solution on the market, building serverless apps just became more secure & scalable: https://t.co/AcJ3lNdqiP pic.twitter.com/zZVsfC0YGC — Fastly (@fastly)
HTML5のLocal Storageを使ってはいけない（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Randall Degges - Please Stop Using Local Storage 原文公開日: 2018/01/26 著者: Randall Degges 日本語タイトルは内容に即したものにしました。 画像は元記事からの引用です。 初版公開: 2019/10/19 追記更新: 2024/04/05 -- リンク情報を記事末尾に移動しました 本気で申し上げます。local storageを使わないでください。 local storageにセッション情報を保存する開発者がこれほど多い理由について、私にはさっぱり見当がつきません。しかしどんな理由であれ、その手法は地上から消えてなくなってもらう必要がありますが、明らかに手に負えなくなりつつあります。 私は毎日のように、重要なユーザー情報をlocal storageに保存す
JavaScriptの最大8倍高速--ウェブアプリ開発を変える「WebAssembly」 - ZDNet Japan
印刷する メールで送る テキスト HTML 電子書籍 PDF ダウンロード テキスト 電子書籍 PDF クリップした記事をMyページから読むことができます ソフトウェアを一度記述すれば、あらゆるスマートフォンやコンピュータで実行できるとしたら、どうなるだろうか。 実現までの道のりがまだ長そうな夢ではあるが、ウェブブラウザを汎用コンピューティングプラットフォームに変えて、極めて要求の厳しいアプリも実行できるようにする取り組みが進行中だ。 「WebAssembly」は、そのビジョンの実現に寄与するバイナリ命令形式であり、ブラウザのソフトウェア実行速度を「JavaScript」使用時の通常速度よりも10％～800％高速化する。 WebAssemblyが可能にするパフォーマンス向上により、非常に負荷の高いデスクトップソフトウェアもいずれウェブブラウザで実行できるようになるかもしれない。WebAss
【エンジニアも最低限知っておきたい！】構造化データマークアップ入門 - Qiita
こんにちは！エイチーム引越し侍でインハウスSEO担当をしています、@tatechiです。 突然ですが、最近グーグル検索をして、「検索結果がゴージャスになってる！」と思うことはありませんか？ たとえば、「トマトパスタ レシピ」で検索したとき。 検索結果にトマトパスタの写真が出ていて、サイト名にアクセスしなくてもどんなトマトパスタを作るためのレシピがわかるようになっています。 「少し前はタイトルとディスクリプションしか出ていなかったのに…」と思うと、めちゃくちゃ豪華な検索結果になりましたよね？！ このゴージャスな検索結果のことをその名の通りリッチリザルトといいます。 これは全部、構造化データマークアップのおかげです そして近年、SEO界隈ではこの構造化データマークアップが盛り上がっています…！ 今回はエンジニアが最低限知っておくべき構造化データマークアップの基礎を紹介します。 検索エンジンのト
[JS]スマホも対応、HTML5を使ったゲームを作成できる2DのJavaScript物理エンジン -Planck.js | コリス
クロスプラットフォームの2D物理エンジン「Box2D」をベースに、読みやすくメンテナンス可能なJavaScriptコードとして開発されたJavaScriptのライブラリを紹介します。 Webおよびモバイルプラットフォーム用のライブラリとして、最適化されています。
![[JS]スマホも対応、HTML5を使ったゲームを作成できる2DのJavaScript物理エンジン -Planck.js | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/5048cf2d6b1658eccbc6b2d4a3dab3912c66a0c7/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201702%2F2017041001.png)
CDNのエッジでJavaScriptとServiceWorkerを実行できる「Cloudflare Workers」がWebAssemblyに対応
CDNのエッジでJavaScriptとServiceWorkerを実行できる「Cloudflare Workers」がWebAssemblyに対応 CDNプロバイダのCloudflareは、3月にリリースした「Cloudflare Workers」を強化し、WebAssemblyの実行に対応したことを発表しました。 Cloudflare Workersは、同社が提供するグローバルなコンテンツデリバリーネットワーク（CDN）のエッジにおいて、開発者がJavaScriptのコードを配置し実行できる機能を提供します。また、HTML5の新機能として策定されたService Workerも利用可能です。 参考：JavaScriptのコードとService Workerをユーザーに近いCDNのエッジで実行可能。Cloudflareが「Cloudflare Workers」を提供開始 Service W
WebAssembly on Cloudflare Workers
We just announced ten major new products and initiatives over Crypto Week and Birthday Week, but our work is never finished. We're continuously upgrading our existing products with new functionality. Today, we're extending Cloudflare Workers with support for WebAssembly. All Workers customers can now augment their applications with WASM at no additional cost. What is WebAssembly? WebAssembly -- of
iOSエンジニアが知るべきProgressive Web Apps開発のエッセンス #iOSDC 2018 - laiso
iOSDC Japan 2018 に採択されたトーク「iOSエンジニアが知るべきProgressive Web Apps開発のエッセンス」のブログ版記事です。 CfP提出後に内容は二転三転しまして、当初は最新Web開発事情について技術的に突っ込んだ内容にしようと目論んでいたのですが、「iOSエンジニア」へ「伝えたいこと」という軸で作っているうちにこの内容に落ち着きました。 当日聞きに来てくださった方、声をかけていただいた方。このような場を下さったiOSDCスタッフの方々にはたいへん感謝しています。 Introduction📛 昨年末 SafariにService Workersが実装され「iOSがPWAをサポートした」というニュースが業界内で話題になりました。 (※Progressive Web Apps 以降 PWA という略称で話します) この時話題になっていたSafariのPWAサ
SWSRSSR という1フレーム技 - mizchi's blog
Service Worker Side React Server Side Rendering ServiceWorker内でBabelを駆使して、JavaScriptをビルドする - ログミーTech（テック） ってスライドの中で、React の SSR を Service Worker の中でやれば、SEO は死んじゃうけど First Meaningful Paint 最適化できるよねーっていう話をしました。 というわけで実装してみました。すごく単純な React + Redux の Counter です。 ここで試せる https://epic-cray-a9cff8.netlify.com 実装コード https://github.com/mizchi-sandbox/swsrssr DevTools 見る限り、 FMP が 8ms で返ってます。TTI (JSが動くようになる時
Go 1.11がリリース。WebAssembly対応を実装、モジュール機能も追加 － Publickey
Go言語の最新リリースとして「Go 1.11」が公開されました。 Go言語はGoogleが中心となってオープンソースで開発されているプログラミング言語です。シンプルにコードを記述できるため学習コストが小さく、タイプセーフかつメモリセーフにできているため安全なプログラムを記述しやすく、並列処理の記述も容易、コンパイルや実行が高速などの特長があります。 GoではじめてWebAssemblyが利用可能に Go 1.11では、WebAssemblyが試験的実装としてはじめて利用可能になっています。WebAssemblyは、Webブラウザ上でネイティブコードに近い実行速度で高速に実行できるバイナリフォーマットです。 Go言語におけるWebAssemblyのサポートは2017年2月から検討がはじまり、2018年3月には実装が開始されていました。 Go言語はサポートするOSやCPUの種類をそれぞれ「GO
[JS]スマホに最適化された優れもの！さまざまなチャートやグラフを実装できるCanvasベースのライブラリ -F2
チャートやグラフは、さまざまなスマホアプリで見かけます。 スマホのデバイスに対してデザイン、インタラクション、パフォーマンスに最適化されたチャートやグラフを実装するHTML5 Canvasベースのライブラリを紹介します。 Node.js、React Nativeなどに互換性もあり、50種類以上のチャートやグラフを簡単に利用できます。 スマホ向けのデザイン デザインはスマホに最適化されており、軽快なインタラクションでデータをより自然に表示します。 スマホに最適化されたパフォーマンス 軽量で、素晴らしいレンダリングのパフォーマンスを実現。 互換性 HTML5のCanvasベースで実装されており、Node.js、React Nativeで実行することもできます。 ライセンス MITライセンスで、個人でも商用でも無料で利用できます。 F2のデモ まずはスマホのアプリでよく見かける、美しいデザインと
![[JS]スマホに最適化された優れもの！さまざまなチャートやグラフを実装できるCanvasベースのライブラリ -F2](https://cdn-ak-scissors.b.st-hatena.com/image/square/38d845daa3306af6511040b4844ec0fb7250d64c/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018083111.png)
macOS + node.js + BrowserSync でローカルhttps開発環境 - Qiita
はじめに この記事は、以下の環境で、https通信可能なローカル開発環境を構築する手順を共有するためのものです。 前提とする環境 macOS v10.13.6 node.js v8.11.4 browser-sync v2.24.5 ServiceWorkerに興味があり、実験環境を構築しようとしたところ、httpsが必須とのことでした。 そこで、node.jsの開発環境でhttpsが利用できるように自己証明書を発行し読み込ませます。 2018/09/08追記 ServiceWorkerの実行にはhttps通信が必須ですが、localhostに限りhttp通信でも実行可能です。 Service Worker の紹介 - Web Fundamentals Service Worker以外で、localhostに自己証明書が必要になった場合は本記事の方法を試してみてください。 設定の手順 基本
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - dotnet/blazor: Blazor moved to https://github.com/dotnet/aspnetcore
Progressive Web Apps: The Case for PWAs