日本のワクチンは遅れているとかのレベルではない。日本の報道見ててもそんなことは一切わからないけどね。内閣支持率が上がるくらいだし。 https://t.co/yrcRJl5la4
小西秀和です。 現在、AWSの静的ウェブサイトホスティングで入門するAWS Amplify(Console、CLI) - 概要編などAWSのサーバーレスな静的ウェブサイトホスティングをテーマにしたブログ記事を執筆しています。 今回もAWSは関係しますが、フロントエンドに近い話題で、最近動向が本格的になってきたと感じているPWA(Progressive Web Apps)について私が自主的に学習した内容を記事にしてみました。 私の場合はAmazon S3、Amazon CloudFront、AWS Certificate Manager、Amazon Route53を使用した静的ウェブサイトに最小限のコンテンツをデプロイしてPWAの実装について学習しました。 また、Lighthouse Report ViewerというPWAなどの品質テストができるツールを使用して、PWAの基準に合格し、Pe
Progressive Web Apps(以下、PWA)は2018年ごろからホーム画面へのインストール機能やキャッシュ戦略等の技術視点でエンジニアの間で話題に挙がるようになりました。現在ではWebパフォーマンス、ユーザビリティ向上、PoC(実証実験)といったビジネス視点でも注目されており、多くのWeb実装にPWAが取り入れられています。 今回の記事では、国内のPWAの動向を振り返り、改めてPWA開発のスタンダードとこれからのPWAについてまとめます。 日本国内でのPWAの動向 2015年にPWAという名称が生まれ、Google Chromeを始めとした各ブラウザが順次PWAに対応していきます。2018年にiOSのSafariがService Workerに対応したことををきっかけに国内でもPWAが注目され始めました。筆者もその頃からPWAに興味を持ち、2019年2月に立ち上がったTechコ
本記事は 2020/01/08 に開催された Envoy Meetup Tokyo #1の LT スライド兼補足資料です。 原則として、スライドモードでファーストビューに入るものはスライドとして、下にスクロールして表示される部分は補足資料です。 Progressive Delivery とは Continuous Delivery ++ 実装はたいてい Canary Release + Canary Analysis + Automated Rollback "Progressive Delivery is the next step after Continuos Delivery, where new versions are deployed to subset of users and are evaluated in terms of correctness and perfor
この記事の概要 あるときこちらの記事を見ました。 CSS でのストレートな実装はできないようで、なかなかパワー系の実装が紹介されていました。 この表現のためだけに 350 もの div を作成するのはなあ……と思い、もう少し現実的なやり方を考えてみました。 この記事ではコードの一部を載せていますが、全体はこちらのリポジトリに置いてあります。 Progressive blur の実現の方向性 usagimaru さんの記事にある通りですが、現状実現されている方向性は以下のどちらかです。 フィルターを小刻みに並べる アルファマスクによる擬似 Progressive blur 1 の フィルターを小刻みに並べる は冒頭の codepen のようなやり方です。 2 の アルファマスクによる擬似 Progressive blur は、大きめのボケがかかった要素にマスクをかけるようなやりかたです。 こ
Progressive blur(プログレッシブ・ブラー)というのは、少し前からにわかに流行り出しているUIのスタイリングに関する表現の一つです。Variable blur(可変ブラー)、Gradient blur(グラデーション・ブラー)と呼ぶこともあります。その見た目は通常のブラー効果(ぼかし、ガウスブラー)とは少し異なります。このアーティクルでは、UIにおけるProgressive blur(またはVariable blur)の概要とAppleプラットフォームでの技術検証を紹介しつつ、後半では簡単な経緯やデザインとしての考慮事項を解説します。 例えば次のイメージはProgressive blurの例です。通常のボカシ表現とどこが違うのかわかりますか? Progressive blur(プログレッシブ・ブラー)の例 Gaussian blur vs. Progressive blurわ
SvelteKit で最近さまざまな案件ができていて嬉しい限りである。 さて、SvelteKit のドキュメントにしばしば登場する Progressive Enhancement という概念がある。 この概念に自分は全く明るくなかったので調べてみた。 この記事ではまず、Progressive Enhancement とは何かを説明する。 次に、Sveltekit においてこの概念がよく表れている Form の扱いについて触れる。 最後に、SvelteKit における型安全について触れ、この型安全を強化する Superforms というライブラリを紹介する。 この記事は Rich Harris 氏の先日の講演の影響を多分に受けている。 Progressive Enhancement これらの記事が詳しいが、簡単に解説する。 Progressive Enhancement とは、任意の環境で全
サービスの信頼性をあげるため用いられる前衛的なデプロイメントパターンの一つであるProgressive Deliveryについて説明します。 来週からのKubecon 2019 North Americaでもこれに関するセッションがあり、注目に値すると思いますので興味があれば一読お願い致します。 KubeCon + CloudNativeCon North America 2019: Leveling Up Your CD: Unlocking Progressi... Speakers Principal Engineer, Intuit Jesse is a Principal Engineer at Intuit and a core contributor and technical lead… 本記事ではGKE + Istio + Flaggerを使ったProgressive D
Before today, developers had to choose between either fully static or fully dynamic pages. With Next.js 13.2, we’re excited to announce the Next.js Cache (beta) and the brand-new Vercel Data Cache (beta). This enables caching only part of your page as static data, while fully dynamically rendering the rest of your application, including accessing real-time and personalized data. Vercel Data Cache
Skip to main content A next-generation, progressive site generator & fullstack framework, powered by Ruby. Built upon venerated open source languages & technologies such as Ruby, Puma, Roda, and esbuild, Bridgetown puts power back in the hands of individuals to create extraordinary things. While your competitors are wrestling with complicated build tools, limited programming idioms, and mountains
Declarative Syntax Go-app uses a declarative syntax so you can write reusable component-based UI elements just by using the Go programming language. // A component that displays a Hello world by composing with HTML elements, // conditions, and binding. type hello struct { app.Compo name string } func (h *hello) Render() app.UI { return app.Div().Body( app.H1().Body( app.Text("Hello, "), app.If(h.n
この記事は Cybozu Frontend Advent Calendar 2023 の 6 日目の記事です。 最近になって、Progressive Enhancement(プログレッシブ・エンハンスメント) というワードを目にする機会が増えています。 Remix や Next.js といったフレームワークにおいても頻繁に登場します。 Progressive Enhancement という概念は最近になって登場したものではなく、Wikipedia によると最初に登場したのは 2003 年のことだそうです。 今回はこの "Progressive Enhancement" について少し考えてみたいと思います。 Progressive Enhancement とは Progressive Enhancement は特定の仕組みや機能のことではありません。設計哲学・戦略・概念、といった言葉で説明さ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く