Cloudflare Fonts: enhancing website font privacy and speed
Cloudflare Fonts: enhancing website font privacy and speed2023-09-25 This post is also available in 简体中文, 繁體中文, 日本語 and 한국어. We are thrilled to introduce Cloudflare Fonts! In the coming weeks sites that use Google Fonts will be able to effortlessly load their fonts from the site’s own domain rather than from Google. All at a click of a button. This enhances both privacy and performance. It enhance
フロント開発を炎上させてしまった話
はじめに お久しぶりです、皆様のサンドバックが帰ってまいりました。 投稿ができていない期間、Nuxtにボコボコにされて裸足で逃げ出し、逃げた先のReactにも強烈な左カウンターをお見舞いされました。 本来であれば、このような場所に投稿することすらはばかられる内容ですが、敢えて書きましょう。 私はフロント開発を炎上させた愚か者です。 なぜ今懺悔するのか Twitterでこんな投稿を見ました。 確かに、実務で得られる経験は、とても大きく得難いものです。 当然、ご迷惑をおかけしてしまうことは、だれであろうとあるでしょう。 ただし、その「ご迷惑」の大きさについて、我々は知っておかなくてはなりません。 見えている地雷を踏んでしまうようなモノ好きもいないでしょう。 特に、この手の地雷は強力ですからね。 塵となって吹き飛んだ私の命が、新たな浅瀬の民の糧となることを祈っています。 具体的に何が起こったのか
コーポレートサイトを誰にも気づかれず静的化したときの技術選択について - Hatena Developer Blog
こんにちは〜。チーフエンジニアのid:cockscombです。 最近、同僚のid:yashigani_wとともに、はてなのコーポレートサイトを静的サイトとして再構築しました。ちょっとした仕事ではありますが、経験によって得られた暗黙知を形式知へ昇華するため、ここに紹介します。 はてなのコーポレートサイトとは サイトを静的化するメリット どのようにサイトの静的化を進めたか 1. 静的ファイルをNext.jsで生成 2. 運用を自動化したい 3. ホスティングサービスを選択する 4. 動的なコンテンツを表示する リリースと振り返り ホスティングサービスに関する補足 はてなのコーポレートサイトとは 弊社のコーポレートサイトは一般的なそれと同様に、株式会社としての「はてな」に関心を持っていただいた方々とコミュニケーションするための窓口です。会社情報を提供したり、あるいはプレスリリースなどの情報を公開
web.dev live 2020 を聴講した - from scratch
今年はコロナの影響でいろんなイベントがオンラインになったり、中止になったりしてますが、 web.dev live 2020 が7月初頭にやっていたので、聴講してきました。 web.dev その中でも面白かったものについていくつか紹介します。 Day 1 ほぼ Core Web Vitals についての話でした。 以下のトークが面白かったです。 What's new in speed tooling Optimize for Core Web Vitals Core Web Vitals についてはもう既にたくさん資料があると思いますが、一応解説しておきます。 Core Web Vitals 初期表示の新しい指標です。去年くらいからずっと Chrome Dev Summit とかでは言われていて、既にLighthouse をはじめとして、色々なツールでサポートされています。Largest C
Sign-in form best practices | Articles | web.dev
Sign-in form best practices Stay organized with collections Save and categorize content based on your preferences. Use cross-platform browser features to build sign-in forms that are secure, accessible and easy to use. If users ever need to log in to your site, then good sign-in form design is critical. This is especially true for people on poor connections, on mobile, in a hurry, or under stress.
高機能CMS「Drupal」とは？ 基本概念を理解してローカル開発環境を構築する
誕生して今年で19年を迎えるオープンソースCMS「Drupal」は、2020年6月にDrupal 9をメジャーリリースしました。そこで改めてDrupalの基本的な概念やテーマ、モジュールの開発方法について、架空の飲食店Webサイト「タピオカドリンク喫茶店 まる茶」を構築しながらWebエンジニア向けに解説します。第1回では、Drupalの概要、特徴、そしてDrupalの開発をスタートさせるためのローカル開発環境構築方法について紹介します。 対象読者 HTML、JavaScript、PHPなどWeb開発の基礎に理解がある方 Webサイト、アプリケーション開発の経験者 Drupalの概要 昨今のインターネットインフラ、スマートフォンデバイスの普及などにより、ユーザーがデジタルコンテンツに触れる機会が急増しています。Webサイトだけではなく、スマートフォンアプリ、街中のデジタルサイネージ、スマート
個人開発アプリのFirebase費用を30%削減した話 - paranitips
個人開発アプリ「お絵かきコラボ」はリリースしてもう1年半くらい経つけど、まだ結構なユーザーさんに遊んでもらっている。本当にありがたい。 バックエンドにはFirebaseを使っているんだけど、長く楽しんでもらうにつれて費用もかさんできたので、削減できるところはないか調べてテコ入れすることにした。 結果、30%ほど費用を削減することができた！わーい！👏 5/6,7 あたりに修正版をリリースして以降、傾きが緩やかになっている どんなことをしたのかさくっとまとめていく📝 Firestore お絵かきのマッチングのたびに、お題を取得したりユーザー情報を取得したりしてるのと、毎回15分程度遊んでもらってるのでREAD数が結構多い。 ・・・にしても、ユーザー数に対してREADが多すぎる。なんでーー？？みたいな状態だったので、iOS/Android/サーバーのコードをすべてチェックして怪しそうなところ
REST APIを簡単にMockできるツールSmopeckの紹介 - Qiita
はじめに 最近のウェブアプリではバックエンドをREST-APIとして用意し、 フロントエンドはREST-APIから引っ張ってきたデータをReactやVueといったフレームワークで描画することが多いと思います。 このようなウェブアプリを開発する際に問題となるのはバックエンドとフロントエンドを並行して開発しにくいということです。バックエンドができなければフロントエンドはどんなデータが来るのかわからず描画できませんし、バックエンドもフロントエンドからどのようなリクエストが来るか決まらないと実装ができません。 そのため、最初にREST-APIの仕様を定めて、その仕様に沿ったモックサーバを作成し、 フロントエンドはバックエンドが完成するまでそれを用いて開発を進めるということが行われます。 さてそのREST-APIの仕様とはどのように記述されるのでしょうか？ 1. 自然言語で記述する 一番よくある場合
Vercel
Vercel@rauchg|April 21, 2020 (4y ago)47,540 views Also available in: English. 訳註: Next.jsの生みの親の一人で、Vercel社のCEOを務める@rauchgによる記事の翻訳です。原文はこちら。訳者はVercelのエンジニアであり、ハンス・ロスリングほか著『FACTFULNESS』の共訳者でもある上杉周作(@chibicode)。ちなみに、Vercel社はこのたび社名をZEITから改名しました。公式発表はこちら。 本日、私達は社名をVercelに改め、2100万ドルの資金調達を実施したことを公表しました。資金調達においては、錚々たる顔ぶれのVC(Accel、CRV)や個人投資家の方々(Jordan Walke、Nat Friedman、Pete Hunt、Jessie Frazelle、Soleio、Nav
Start Performance Budgeting
October 2, 2018 If you're building a web experience and want to stay fast, a performance budget can be critical. For success, embrace performance budgets and learn to live within them. Network & CPU limits on mobile can require asking hard questions like, "what is really important to my users?" When we talk to Fortune 500 companies that put in the work to improve performance, perf metrics will oft
Webフロントエンドエンジニアにやさしいデザインファイルの作り方 - Qiita
Sketch - The digital design toolkit 画像はSketch最高っていう顔です。 HTMLやCSSを書くWebフロントエンドエンジニアにとって、Webデザイナーが用意した理想像を現実に落とし込むことは1つの使命であり、費用対効果への葛藤に揺れる中で「技術的に難しいから」という理由でデザインを却下したくないのは誰しも同じだと思います。一方で、技術的に難しくなくとも、デザインファイルの作り方次第ではエンジニアの実装効率も多少なりとも変わってきます。そこで、僕のデザイナー及びエンジニアとしての経験則から、HTML/CSSで実装しやすい（≒Webフロントエンドエンジニアにやさしい）デザインファイルの作り方を、Sketchでの用例も挙げつつまとめてみます。近年はFigmaが注目されつつありますが、基本的な話は共通すると思います。 本来ならばデザイナーにこそ読んでいただき
HTML+CSSコーディングの言語化 - Qiita
はじめに HTML＋CSSコーディングにおける制作者の思考や判断、アプローチ、コード化に至るまでの流れなどを分解し、コードの状態なども含めてそれぞれを短い言葉で言語化しました。 以下のような効果が期待できます。 HTMLとCSSを使っておこなってきた事を客観視・再認識できる 始原的な動機を把握することで、手法を別の視点で捉えられるようになる 認識合わせや熟練度確認に利用し、制作時のコミュニケーションを円滑にする 場合によっては、ぼんやりと捉えていたことや、詰まりやすかったポイントなどがハッキリと認識できるようになるかもしれません。 言語化の概要 まずは、全体像が分かる概要図を掲載します。 この記事は、以下のステップと各項目について順に説明するものになります。 前提事項・環境について 言語化するにあたって前提となる考え方や環境について記載します。 HTMLとCSSの役割 HTML → データ
2020年1月の、これだけは押さえておきたいWeb関連の動き
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 Webデザイン 2020年に流行するグラフィックデザインの最新トレンド13個まとめ | Web Design Trends モノクロデザインは最近日本でもよく見る気がします。 [Webデザイナーさんへ] そのデザインがコーディングしにくい理由と、改善ポイント詳説 – 東京のホームページ制作 / WEB制作会社 BRISK 主にPhotoshopでデザインカンプを作った場合の話がまとまっています。 コーディング 無料＆簡単にオンライン予約システムが作れる「SELECTTYPE」レビュー、ウェブサイトへの埋め込みもラクチンで超絶多機能にすることも可能！ – GIGAZINE メールフォームだけでなく、美容
Web制作にすごい役立つ！無料で使える便利なオンラインツールのまとめ -Tiny Helpers
CSSやHTMLやJavaScriptをはじめ、カラーやフォントやアクセシビリティなど、Web制作時に役立つオンラインツールをまとめたTiny Helpersを紹介します。 無料で利用できるツールがまとめてあるので、非常に便利です。
架空企業「オニギリペイ」に学ぶ、セキュリティインシデント対策
架空企業「オニギリペイ」に学ぶ、セキュリティインシデント対策：徳丸浩氏が8つの試練を基に解説（1/3 ページ） ECサイトやWebサービスでセキュリティインシデントを起こさないためには何をすればいいのか。2019年12月に開かれた「PHP Conference Japan 2019」で徳丸浩氏が、架空企業で起きたセキュリティインシデントを例に、その対策方法を紹介した。 ECサイトやWebサービスを提供する会社で発生したセキュリティインシデントに関するさまざまなニュースが後を絶たない。どうすればこうしたインシデントは防げるのだろうか。 『体系的に学ぶ安全なWebアプリケーションの作り方』（通称：徳丸本）の筆者として知られる徳丸浩氏（EGセキュアソリューションズ 代表取締役）は、2019年12月に開かれた「PHP Conference Japan 2019」のセッション「オニギリペイのセキュリ
優れたWebフロントエンド開発者になるには
この記事では、二人のエンジニアが書いたWeb開発者のためのアドバイスを紹介する。一人はおすすめの有用なツールとテクニックについて、もう一人はブラウザ向けに書くときに遭遇する課題への対処についてアドバイスしている。 今年のはじめ、BazaarvoiceのソフトウェアエンジニアであるRebecca Murphey氏は「A Baseline for Front-End [JS] Developers: 2015」というブログ記事を書き、クライアントサイドWeb開発に使えるツールとアプローチをJavaScript開発者にアドバイスした。記事を要約すると、彼女はこう言っている。 ECMAScript 2015を学ぶ。 Understanding ES6、ES6 Rocks、BabelJSがおすすめだ。私たちはこのリストにAxel Rauschmayer氏の新しい本、Exploring ES6を加える
プログラム組んだら負け！実はHTML/CSSだけでできること2015夏
2. 2015 Yusuke Hirao, CC BY-ND. 自己紹介 平尾優典（ひらお ゆうてん） === 株式会社ディーゼロ Webエンジニア ## コミュニティ活動 - 福岡フロントエンド友の会 Fukuoka Frontend Frogs - 福岡マークアップ勉強会 - baserCMSユーザー会 Yusuke Hirao @cloud10designs 3. 2015 Yusuke Hirao, CC BY-ND. 自己紹介 ## コミュニティ紹介 ### 福岡フロントエンド友の会 Fukuoka Frontend Frogs ### 福岡マークアップ勉強会 ### baserCMSユーザー会 「井の中の蛙」にはならないようにと集まった フロントエンドエンジニアのためのコミュニティ。 Webコーディング・アプリ開発の悩める蛙たちが その場で話題を決めて、アンカンファレンス形式で
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webフロントエンドのリプレースを支えるテストの考え方 / JSConf JP 2021