2020年、知っておくと便利なCSSのプロパティのまとめ
ChromiumベースのEdgeもリリースされ、最近のブラウザ状況は大きく変わってきました。知っておくと便利なCSSのプロパティを紹介します。 一昔前まではJavaScriptでないと実装できなかったもの、CSS Gridでの中央揃え、Flexboxでの中央揃え、リストのカラーを変更する方法、アイコンの横並び、タイル状の背景をいい感じに配置など、実践的なテクニックが満載です。 Uncommon CSS Properties by Ahmad Shadeed はじめに CSS Gridでの中央揃え place-itemsプロパティ Flexboxと古き良きmargin: auto; あまり知られていない::marker疑似要素 text-alignプロパティ display: inline-flex;プロパティ column-ruleプロパティ background-repeat: roun
WebP画像の使い方
2020年夏のウェブ技術の見直しシリーズ第2段（第1段はこちら）として見直していたWebPの情報ですが、2022年2月にPhotoshopデスクトップ版でWebPがネイティブサポートされました。macOS Big Sur / iOS 14以降のSafariを含む最新のブラウザではWebPがサポートされています。導入しやすくなったいま、もう一度特徴をおさらいしておくと良さそうですね。 ということで、以下はWebPについてのまとめです。2020年7月の情報を2022年2月に更新しました。 なんでもかんでもWebPでいいわけではない 試しにUnsplash でランダムに10枚の写真を選んで、ImageOptimとcwebpコマンドラインツールでjpgとwebpに書き出してみました。結果、WebPのファイルサイズが小さくなる画像もあれば、JPEGのほうが小さくなる画像もありました。たまたまだと思い
PoS ブロックチェーンエキスポ: オンラインでいよいよ開幕 ！
PoS ブロックチェーンエキスポ: オンラインでいよいよ開幕 ！ブロックチェーン業界をリードするPoSプロジェクトDash(ダッシュ)、Lisk(リスク）、ソフトウェア会社のJelurida Swiss、Algorand(アルゴランド)が技術demoを実践します。 7月28日にTEAMZの傘下オンラインイベント・メディアプラットフォームChainTalkがPoSをテーマとするオンラインExpoを開催します。今回のイベントテーマであるプルーフ・オブ・ステーク(Proof-of-stake、PoS)は、暗号通貨のブロックチェーンネットワークによる分散型コンセンサスの達成を目的とするアルゴリズムの一種です。 PoSベースの暗号通貨では次のブロックの作成者はランダム選択と資産または年齢(例：ステーク(掛け金))の様々な組み合わせを通して選ばれます。 本イベントはワークショップと技術デモを通じて、3
AWS システム構築 非機能要件ヒアリングシートを公開してみた | DevelopersIO
こんにちは。 ご機嫌いかがでしょうか。 "No human labor is no human error" が大好きなネクストモード株式会社の吉井 亮です。 日本国内においても多くのシステムがクラウド上で稼働していることと思います。 俊敏性、拡張性、従量課金、IaS、セキュリティなどクラウドのメリットを享受しやすい所謂 SoE で多くの実績があるように感じます。 ここ1~2年は、社内基幹システム・情報システム、SoR 系のシステムのクラウド移行が本格化してきたというのが肌感覚であります。 クラウドでのシステムインフラ構築は従来のようにゼロから非機能要件定義を行っていくものではなく、ベストプラクティスをまず実装して少しずつ微調整を行っていくものと考えています。とはいえ、システムごとの要件は予め明らかにしておくことがインフラ構築においても重要になります。 クラウド上では出来ること出来ないこと
HTML5のフォームバリデーションをSPAの中で使う方法 - Qiita
最近、素のHTMLやCSSをなるべく活用することに興味があります。 こういったベースの技術の方がフレームワークよりも息が長いので、一度学んだことを長期間役に立てることができるためです。 ※もちろんフレームワークも使うときは使います。例えばNuxt.jsは大好きです。 今回は、HTML5のフォームバリデーション機能を、Nuxt.jsで構築したSPAの中で使ってみたいと思います。 課題 HTML5のフォームバリデーションは、通常はformのsubmitを実行したタイミングで実施されます。 でも、SPAではformをsubmitしません。 どうしましょう... 解決策 form.reportValidity() を使います。 これは、submitせずにバリデーションだけをかけるためのメソッドです。 ※2020年7月時点のMDNによれば、IE以外の全ての主要ブラウザでサポートされているようです。安
2020年の11の必見のフロントエンドトレンド - Qiita
こちらの記事は、Jonathan Saring 氏により2019年12月に公開された『 11 Must-Know FrontEnd Trends for 2020 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 ランチ中のフロントエンドトークでスマートに見られる方法！ チームのランチトークでスマートに見られることは、最新のフロントエンドのトレンドを常に把握しておくための大きな理由であることは言うまでもない。 それは、あなたがより良い開発者になり、より良い技術とより良い製品を作るのに役にたつかもしれない。 たぶんね。 だから、いくつかの興味深い方向を示すことで、この名誉あるクエストを君が簡単に達成できるように少し時間をもらいたい。 すべてのコンセプトについて1から10まで説明するのではなく、そのコンセプトとそれがどのように有用であるか紹介しよう。最後にはさらなるリソー
Webbundle によるサブリソース取得の最適化 | blog.jxck.io
Intro WebBundle を用いてサブリソースのみを Bundle する、 Subresource Bundle の策定と実装が進んでいる。 これを用いると、複数サブリソースの取得を一回の fetch で行うことができ、 RTT を減らしつつも個別に取得したかのようにキャッシュを制御できる。 現時点での仕様と実装を解説する。 Intent to Prototype: Subresource loading with Web Bundles Subresource Bundling WebBundle の初期の仕様は、 HTML を頂点としたページ全体をまとめる方向で始まった。 WebBundle によるコンテンツの結合と WebPackaging | blog.jxck.io これをサブリソース(JS, CSS, Img etc)に対して利用できるようにする仕様だ。 HTML 自体は
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
