React Performance Fixes on Airbnb Listing Pages
Airbnb has some incredible listings in Cuba…and also a corner of the office inspired by Habana Vieja We have been hard at work migrating the airbnb.com core booking flow into a single-page server-rendered app using React Router and Hypernova. At the beginning of the year, we rolled this out for the landing page and search results with good success. Our next step is to expand the single-page app to
Typography in Design Systems
Typography systems are collections of individual styles used across an application. Everyone knows that their system should include typography on some level, but the difficulty is defining that system in a way that is easy to understand by designers and developers, and enforces consistency while allowing for flexibility over time. How do you define a core typographic style?Typography is one of the
Rune Madsen - The User Experience of Design Systems
On Google’s Material Design and the Templatization of Digital ProductsThis is a transcription of a keynote given at UX Camp Copenhagen in May, 2017. Thanks so much. Tries to tell joke. I’d like to thank the organizers for inviting me to come and speak. I’ve lived in New York City for the past 8 years, and enjoy coming back to Denmark to meet other designers. This event is especially interesting to
Linux環境でnslookupやdigコマンドでDNSを学ぶ - Qiita
Amazon Linux AMI 2015.09.2 (HVM) DNS(Domain Name Sysem)とは かなりざっくり書きますので詳細は本などで確認して頂ければと思います。 TCP/IPで通信を行う場合には通信相手のIPアドレスを知る必要があるが、ドメイン名( www.yahoo.co.jp など)を入力してもブラウザではどのようなIPアドレスを示すか分からない そこでドメイン名をIPアドレスに変換する必要がある。どのドメイン名をどのIPアドレスに変換すれば良いかはローカルのPCは分からない(/etc/hostsを使えばローカルでも設定できるが、変更時に併せてファイルの変更が必要) そのため、ドメインとIPアドレスの変換はサーバーで行わせ、クライアントからのドメイン名変換依頼に対して対応するIPアドレスを返却するのがDNSサーバーの役目。ドメイン名からIPアドレスの変換は名前解
HTTP レスポンスステータスコード - HTTP | MDN
HTTP ガイド HTTP の概要 典型的な HTTP セッション HTTP メッセージ MIME タイプ（IANA メディア種別） HTTP の圧縮 HTTP キャッシュ HTTP 認証 HTTP Cookie の使用 HTTP のリダイレクト HTTP 条件付きリクエスト HTTP 範囲リクエスト コンテンツネゴシエーション HTTP/1.x のコネクション管理 HTTP の進化 プロトコルのアップグレードの仕組み プロキシサーバーとトンネリング HTTP クライアントヒント HTTP セキュリティ サイトの安全化 HTTP Observatory Permissions Policy コンテンツセキュリティポリシー (CSP) オリジン間リソース共有 (CORS) Cross-Origin Resource Policy (CORP) Strict-Transport-Securit
ブラウザのキャッシュコントロールを正しく理解する - Qiita [キータ]
①ブラウザに一切、キャッシュさせたくない場合 サーバからクライアントへのHTTP応答ヘッダ → Cache-Control "no-cache" アクセス毎に内容が変わったり、サーバにアクセスしてもらわないと困るようなコンコンテンツの場合です。 スクリプト言語等で生成する動的コンテンツは、このようにした方が安全です。 例えば対象コンテンツが画像である場合、ブラウザで同じ画像のURLが含まれたHTMLを開いた場合は、 もちろんローカルにキャッシュがないので、サーバへ問い合わせを行う 条件つきリクエスト（If-Modified-Since、If-None-Match）もサーバへ送ってこない ②ブラウザにキャッシュさせるけど、変更ないか都度確認するようにしたい サーバからクライアントへのHTTP応答ヘッダ → Cache-Control "max-age=0" → Expires "Mon, 2
![ブラウザのキャッシュコントロールを正しく理解する - Qiita [キータ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/79212cc1e051d78866885f62625ed2b2a50ff100/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JUUzJTgzJTk2JUUzJTgzJUE5JUUzJTgyJUE2JUUzJTgyJUI2JUUzJTgxJUFFJUUzJTgyJUFEJUUzJTgzJUEzJUUzJTgzJTgzJUUzJTgyJUI3JUUzJTgzJUE1JUUzJTgyJUIzJUUzJTgzJUIzJUUzJTgzJTg4JUUzJTgzJUFEJUUzJTgzJUJDJUUzJTgzJUFCJUUzJTgyJTkyJUU2JUFEJUEzJUUzJTgxJTk3JUUzJTgxJThGJUU3JTkwJTg2JUU4JUE3JUEzJUUzJTgxJTk5JUUzJTgyJThCJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz0wNTM1MDQ4ZGFlYmU5YjhkY2YzNzAwNTVhN2U3NjRkNA%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBoa3VzdSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ZDQ2MDhlM2MxY2U1Y2E4MzU0YTFiOWMzNmI0MGNkZWE%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-44KG44KB44G_%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D5490d94f8e002d57ebe35c99ee9fd84c)
TextStyl: Tendencias y Estilo en Medicina Estética
En TextStyl, nos dedicamos a explorar el fascinante mundo de la medicina estética, donde la innovación y la belleza se unen para crear tendencias revolucionarias. Con un enfoque en la elegancia y la salud sostenible, nuestra misión es ser tu guía esencial en el viaje hacia una belleza que no solo captura la esencia del estilo, sino que también abraza la vanguardia del bienestar. Desde las últimas
Blog - Yummygum - Digital agency from Amsterdam
We believe we walk the walk. But we also talk the talk. Make yourself comfy and read about whatever is dear to us.
「ブログを書く技術」を発表した - kakakakakku blog
別プロダクトの社内勉強会で「ブログ」をテーマに発表して欲しいと依頼があり，「ブログを書く技術」というタイトルで発表をしてきた．今回，改めて「僕がなぜブログを書くのか？」というモチベーションの部分を整理することができたので非常に良かった．なお，再演もできるので，もし「うちでも発表して欲しい！」という話があれば（なさそう），気軽にご連絡を頂ければと！ 発表資料 伝えたかったこと 前にツイートした内容にも関連していて，やはり「続けること」が難しいという人が多いように思う．だからこそ「習慣化」を意識するべきでは？という問題提起をしたかった．また，ブログにこだわっているわけではなく，あくまで「アウトプットの形の一例として」ブログが良いのではないかという話をした．発表中に余談なども多くしたため，発表資料だけでは伝わらない部分もあるかもしれない． 「どうしたらブログ続けられるんですか」って相談よく受ける
await vs return vs return await
When writing async functions, there are differences between await vs return vs return await, and picking the right one is important. Let's start with this async function: async function waitAndMaybeReject() { // Wait one second await new Promise((r) => setTimeout(r, 1000)); // Toss a coin const isHeads = Boolean(Math.round(Math.random())); if (isHeads) return 'yay'; throw Error('Boo!'); } This ret
医療や健康に関連する検索結果の改善について
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
コントラストチェッカーのばらつきと対策 - Qiita
検証結果 [パターン1] 前景色: #F00000, 背景色: #FFFFFF の場合 | ツール | コントラスト比 | 通常サイズAA | 通常サイズAAA | 大きな文字 AA | 大きな文字 AAA | |:---|---:|---:|---:|---:|---:|---:| | Colour Contrast Analyser | 4.5:1 | 適合 | 不適合 | 適合 | 適合 | | ColorTester | 4.4:1 | 不適合 | 不適合 | 適合 | 不適合 | | WebAIM | 4.46:1 | 不適合 | 不適合 | 適合 | 不適合 | [パターン2] 前景色: #EF0000, 背景色: #FFFFFF の場合 | ツール | コントラスト比 | 通常サイズAA | 通常サイズAAA | 大きな文字 AA | 大きな文字 AAA| |:---|---
Contrast Ratio: Easily calculate color contrast ratios. Passing WCAG was never this easy!
? How to use As you type, the contrast ratio indicated will update. Hover over the circle to get more detailed information. When semi-transparent colors are involved as backgrounds, the contrast ratio will have an error margin, to account for the different colors they may be over. This sample text attempts to visually demonstrate how readable this color combination is, for normal, italic, bold, or
Tanaguru Contrast-Finder
Find me the good constrasts, for web accessibility, between these two colors: Foreground Color : invalid color For each color (red, green and blue), enter a number between 0 et 255. Red : Green : Blue : The color should be between #000000 and #FFFFFF Hexadecimal : Background Color : invalid color For each color (red, green and blue), enter a number between 0 et 255. Red : Green : Blue : The color
Sass Color Variables That Don’t Suck
One of the best reasons to use Sass is variables. They help keep your code DRY, which makes it easy to maintain and change. However, with colors, it's easy for your variables to get out of hand. In this article, I'll show you an quick, easy method to wrangle your color variables. The Problem Let's say you have the following CSS: h1 { background-color: #b0eb00; } a { color: #b0eb00; } button { bord
Sassで色空間『HSB』を扱う関数を作った話
こんにちは、フロントエンドエンジニアのあつこです(ΦωΦ) 先日どうしてもSassでHSBを使用したかった際の、経緯と対処法を紹介します。 もくじ RGBとHSLとHSB 何故HSBなのか RGBとHSBの相互変換関数を書く まとめ RGBとHSLとHSB そもそもHSBは色空間の一種で、RGBやHSLと同じように3つの要素から色を特定する方法です。 ここでは代表的な色空間である、RGBとHSLとHSBについてざざっと紹介します。 RGB WEB屋さんにはお馴染みの加法混色です。 赤（Red）緑（Green）青（Blue）値はそれぞれ0→255の間で設定し、すべて足すと白になります。 HSL 色相（Hue）彩度（Saturation）輝度（Lightness）の3要素から成る色空間。 色相は0°→360°の角度、彩度と輝度は0%→100%（もしくは0→255）の間で設定します。 CSS3で
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
わかりやすい技術記事を書くための心構えとテクニック / #railsdm 20171206
Runner Pro: The Sketch plugin to design faster
Paving the Path of Least Resistance
How do you add a custom HTTP response header in Rails?
Accessible Colors | WCAG 2.0 AA and AAA color contrast checker