1KBのWebフレームワークをつくる - ゆーすけべー日記
1KBのWebフレームワークをつくりました。 名前は「Pico」。 minifyしてビルドした模様。 コードはこれだけ。依存なし。ほんとにこれだけです。 Cloudflare WorkersとDenoで動きます。 今回はこのPicoというフレームワーク、 それに必要不可欠なURLPattern、実装について、 そして僕がつくっているもう一つのフレームワークHonoとの関係などを紹介します。 Hello World text/plainでレスポンスを返す、“Hello World"相当のコードは4行で書けます。 import { Pico } from "@picojs/pico"; const app = new Pico(); app.get("/", (c) => c.text("Hello Pico!")); export default app;
CSSのサブグリッド（subgrid）の基礎知識と使い方、たった一行のCSSで複数カードの水平グリッドを簡単に揃えられる！
CSSのサブグリッド（subgrid）がChrome 117でサポートされ、Safari, Firefoxではすでにサポートされていたので、これで主要ブラウザのすべてで利用できるようになりました。 先日の記事でもお伝えしたように、subgridを使用するとカード内の見出しやテキストの水平グリッドを簡単に揃えることができます CSSのサブグリッド（subgrid）の基礎知識と使い方、プログレッシブエンハンスメント、デベロッパーツールによるデバッグ方法などを紹介します。 CSS Subgrid by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに サブグリッド（subgrid）の基礎知識 ページレベルの「マクロ」グリッドを共有する サブグリッドのサポートをチェ
SameSite属性とCSRFとHSTS - Cookieの基礎知識からブラウザごとのエッジケースまでおさらいする - Flatt Security Blog
こんにちは、 @okazu_dm です。 この記事は、CookieのSameSite属性についての解説と、その中でも例外的な挙動についての解説記事です。 サードパーティCookieやCSRF対策の文脈でCookieのSameSite属性に関してはご存知の方も多いと思います。本記事でCookieの基礎から最近のブラウザ上でのSameSite属性の扱いについて触れつつ、最終的にHSTS(HTTP Strict Transport Security)のような注意点を含めて振り返るのに役立てていただければと思います。 前提条件 Cookieについて Cookieの属性について SameSite属性について SameSite属性に関する落とし穴 SameSite属性を指定しなかった場合の挙動 SameSite: Strictでも攻撃が成功するケース 例1: スキームだけ違うケース 例2: サブドメイ
この投稿ではJavaScriptで文字数をできるだけ正確にカウントする方法について取り上げます。 文字数とは？ 要件で「文字数を表示してほしい」「○文字以上はバリデーションエラーにしたい」と文字数を考慮しないとならないことがあります。 そもそも文字数とは何でしょうか。 たとえば、アルファベットの「A」は1文字と数えられそうです。 次の絵文字は、何文字になるでしょうか？ この絵文字はiOSであれば14.5の環境では、UI上では上のように1文字のように表示されます。しかし、それ以前のバージョンでは、同じ文字列データでも😵💫のように2文字で表示されます。なお、この絵文字は3つのコードポイントU+1F635 U+200D U+1F4ABからなります。この絵文字の「文字数」はいったい何文字として扱ったらよいのでしょうか。 以上のように、ひとことで文字数と言ってもデータと見た目と環境の3つのややこ
Ruby言語によるWebアプリケーションフレームワークの最新版となる「Rails 7」が正式リリースされました。 Rails 7.0 FINAL: The fulfillment of a vision to present a truly full-stack approach to web development that tackles both the front- and back-end challenges with equal vigor. https://t.co/WxJ0nKYfE7 — Ruby on Rails (@rails) December 15, 2021 Rails 7の最大の変更点は、フロントエンド開発環境が刷新されてNode.jsを用いない構成がデフォルトとなったことでしょう。 Rails 6では、優れたフロントエンド開発環境を実現するためにトランスパ
この記事は JavaScript Advent Calendar 2019 - Qiita の初日の記事です。 2019年を締めくくるアドベントカレンダーの初日ということで、今年のJavaScriptを簡単に振り返りたいと思います。2020年のJavaScriptについても予習しましょう。 2019年、2020年が何を指しているかは後述します。 カテゴリが「プログラミング言語」なので、React、Vue、AngularやNode.jsなどJavaScriptを使った技術ではなく、JavaScriptの言語機能にフォーカスしたいと思います。 はじめに ES2019 Optional catch binding JSON superset Symbol.prototype.description Object.fromEntries Well-formed JSON.stringify Arr
こんにちは。フロントエンド開発で一番好きなのはCSS、Mhousetreeです。 普段はCSSアニメーションで遊んだりしています。 （頑張って作ったのでよかったら見てね！！！！！） 何かと使う中央揃え。なんとなく覚えているものを順番に試して中央に来たらOK！と思っていませんか？ 現在ではかなりいろんな種類の方法があり、それぞれ異なる特徴を持っています。 この記事ではCSSでよく使う（気がする）レイアウトパターンの中で、センタリングに関するものをまとめました！ まえがき この記事では各実例を独自の指標で評価して示しています。 長い記事になる予定なので、部分的に読まれる場合の参考になさってください。 実用性：記述量や例外（中身の文章が長い・改行がある要素など）への対応力など。 よく見る度：コーディングしていて出てくる頻度(n=1)。 お前しか勝たん度：独自性が強い・他の方法では代替しづらいもの
2022年Reactを使ってる人には必ず知っていてほしい最強のdata fetchingライブラリであるRTK Queryの優位性とメンテナンスの際に役立つTips - Qiita
import type { ConfigFile } from "@rtk-query/codegen-openapi"; // https://redux-toolkit.js.org/rtk-query/usage/code-generation#simple-usage const config: ConfigFile = { schemaFile: "https://petstore3.swagger.io/api/v3/openapi.json", apiFile: "./store/emptyApi.ts", apiImport: "emptySplitApi", outputFile: "./store/petApi.ts", exportName: "petApi", hooks: true, }; export default config; import { empty
Amazon Web Servicesは、コンテナ実行専用に開発されたLinuxベースのOS「Bottlerocket」をオープンソースで公開したことを明らかにしました。 Running containers on Amazon EC2? Try the new Bottlerocket OS purpose built to run containers. https://t.co/0tnx2nk1HB pic.twitter.com/GPuWWB9N90 — Amazon Web Services (@awscloud) March 10, 2020 一般的なLinuxディストリビューションで提供されているOSはコンテナ環境に最適化されているわけではないので、コンテナの実行には不要なソフトウェアが含まれていることなどによるストレージやメモリのオーバーヘッドや、不要なネットワークポートが
GitHub のAutomatically generated release notesを使ってリリースノートの内容を PR に基づいて自動生成するフローを作りました。 今までは、コミットメッセージのルールであるConventional Commitsとconventional-github-releaserを使って、コミットからリリースノートを自動生成していました。 他の人の PR でも、squah merge でコミットメッセージを書き換えることで、リリースノートに反映されるようにしていました。 ただ GitHub に仕組みは違うけどほぼ似たことをするAutomatically generated release notesという機能が実装されているので、これをベースに移行しようと思って、そのワークフローを作っていました。 リリースノート自動生成テクニック - mizdra’s bl
AWS、ElasticsearchとKibanaのフォークによる「OpenSearch」プロジェクトを発表。Elasticとの溝は埋まらないまま
AWS、ElasticsearchとKibanaのフォークによる「OpenSearch」プロジェクトを発表。Elasticとの溝は埋まらないまま AWSは、オープンソースの検索エンジンと可視化ツールの「OpenSearch」プロジェクトを発表しました。これは検索エンジンおよび可視化ツールとして人気のElasticsearchとKibanaをフォークしたものです。 Introducing the #OpenSearch project: a community-driven, open source fork of Elasticsearch & Kibana. https://t.co/VmlP14DiIC pic.twitter.com/YFAI0KkIx3 — AWS Open Source (@AWSOpen) April 12, 2021 すでにGitHub上には、Elastics
Cloudflare Workers それは Frontend / Node.js が CDN Edge Side まで拡張されるもの
最近は Cloudflare Workers が熱くて、週末はずっとその調査しています。この記事はそのまとめです。 注意点として、手元でいろいろなパターンで動かして試してはいますが、プロダクション環境で運用したわけではないです。それを踏まえた上でお読みください。 特に断りが無い限り、引用文は DeepL で翻訳したものです。 Cloudflare Workers とはなにか Cloudflare Workers | サーバーレスコンピューティング | Cloudflare 一言でいうなら 「ServiceWorker の API が CDN Edge 上で動く JavaScript 処理系」 です。 Technology Radar では、まだ ASSESS(調査) フェーズという扱いです。 Cloudflare Workers | Technology Radar | ThoughtWo
HTTP/3とQUICはなぜ必要になり、どのように標準化されてきたのか？ 現代のプロトコル設計とインターネットの課題｜ハイクラス転職・求人情報サイト AMBI（アンビ）
ハイクラス求人TOPIT記事一覧HTTP/3とQUICはなぜ必要になり、どのように標準化されてきたのか？ 現代のプロトコル設計とインターネットの課題 HTTP/3とQUICはなぜ必要になり、どのように標準化されてきたのか？ 現代のプロトコル設計とインターネットの課題 IETFで標準化が進められているWebの新しい通信プロトコルQUICとHTTP/3について、現在のインターネットが抱える課題やプロトコル設計での議論を中心に、ASnoKaze blogの後藤ゆき（@flano_yuki）さんに執筆いただきました。 2021年、Webに新しい通信プロトコルが登場しました。RFC 9000として標準化されたQUICと、その上で動作するHTTP/3です。HTTP/3はまだドラフト版ですが出版準備段階となっており、すでに実際のWeb通信でも広く使われています この2つのプロトコルは、現在のWebやイン
はじめに 明けましておめでとうございます。 (一週間遅れ) この記事はJavaScriptの組み込みAPI Intl の紹介と解説です。 Intl とは？ MDN から引用すると Intl オブジェクトは、 ECMAScript の国際化 API の名前空間で、言語に依存した文字列の比較、数値の書式化と、日付の書式化を提供します。 Intl オブジェクトは、いくつかのコンストラクターに加え、国際化コンストラクターや他の言語に関する関数に共通する機能へのアクセスを提供します 用はi18nの書式版です。 例を出すより見たほうが早いので実際に機能解説します。 (先に言っておきますが、実はこれバックエンド無しで自然言語処理が出来る優れものです。) 用語解説 localesって何？そもそもnewって何？って人がいるかもしれないので locales https://developer.mozilla.
はじめに 先日、海外向けに運用していた個人ブログがDDoS攻撃を受けてしまいました。 こういったサイバー攻撃は、企業に対して行われるものという先入観がありました。 しかし、調べてみると、最近では個人ブログも標的になってきていると報告があがっていました。 CloudFrontとS3で作成する静的サイトが人気になっており、特にCloudFrontの危険性について紹介したいと思います。 DDoS攻撃って？ ざっくり説明すると、ウェブサイトやサーバーに対して過剰なアクセスやデータを送付するサイバー攻撃です。 インフラストラクチャーレイヤー攻撃(レイヤー3、4)とアプリケーションレイヤー攻撃(レイヤー6、7)の２つに分類されます。 ご指摘を頂きましたので、訂正いたします。 厳密には、EDoS攻撃でした。 AWS Shield Standard AWSを利用した場合、defaultでAWS Shiel
JAMスタックを実現する国産サービス「Kuroco」正式リリース。GitHub Actionsでビルドし、Webホスティング、APIサーバなど提供。月額1100円分まで無料
JAMスタックを実現する国産サービス「Kuroco」正式リリース。GitHub Actionsでビルドし、Webホスティング、APIサーバなど提供。月額1100円分まで無料 kurocoは当初、いわゆる「ヘッドレスCMS」と呼ばれる機能を提供するWebサービスとして登場しました。 今回、これにGitHub Actions連携機能とWebホスティング機能などが追加されたことにより、「JAMスタック」を実現する機能が一通り揃うことになりました。 ヘッドレスCMSとJAMスタック 一般にCMS（コンテンツマネージメントサービス）は、WordPressやMovableTypeなどがよく知られています。これらはコンテンツを入力すると、あらかじめ設定されたHTMLのテンプレートにコンテンツを組み込んでWebサイトを構築してくれます。 ヘッドレスCMSとは、この一般的なCMSから、Webサイトの構築機能
本当にあった Web アプリケーションの脆弱性
この記事の目的 今まで Web アプリケーション製作を行った経験が無い方が「ちょっと個人開発で何か作ってみようかな！」と思ったときにうっかり脆弱性を作りこんでしまうことを少しでも防げたらいいなと考えました。 そのためにはまず脆弱性を他人事だと考えないことが大事だと思ったので、私が過去の開発現場において実際に遭遇したことがある Web アプリケーションの脆弱性の事例を幾つか紹介します。 紹介の前に注意喚起をします。 自分が管理しているわけではない Web アプリケーションに対し、依頼されてもいないのに脆弱性を探す行為は絶対にしないでください。その行為の内容によっては犯罪になる可能性もあります。 外部から渡されたデータを何の対策もなしに SQL に埋め込んでいる SQL インジェクション攻撃の説明でよくみられる例ですが、ログイン処理でユーザーが入力した ID とパスワードに一致するユーザー情報
最近のCloudflare Workersについて、知らない方向けにざっくばらんに書いてみます。 連絡事項 自己紹介しておくと、僕はCloudflareのDeveloper RelationsチームにいてDeveloper Advocateをやってます。 一方で、HonoというCloudflareのみならずDenoやBun、Fastly等で動くWebフレームワークを開発してます。 Cloudflare Workersとは？ 本題に入る前に、そもそも「Cloudflare Workersとは？」を簡単に紹介しておきます。 Cloudflare WorkersとはCloudflareのエッジで動くサーバーレス環境です。 基本的にJavaScript/TypeScriptでアプリケーションを書きます。 V8というJavaScriptエンジンの上でアプリを動かすのですが、これはWebブラウザのGo
タイミーのRailsアプリをシニアなエンジニアが採点したらだいぶ辛口だった - Timee Product Team Blog
この記事はTimee Advent Calendar 2023シリーズ 1の1日目の記事です。 はじめに こんにちは、タイミーでバックエンドエンジニアをしている須貝（@sugaishun）です。昨年は弊社でアドベントカレンダーに取り組んだか覚えていないのですが、今年はなぜかいきなり3トラックで臨むということで、非常に勢いがあるなと思いました。量と勢いで攻めていくところが弊社らしいなと感じています。全て完走できると良いですね。 さて私はその中のひとつのトップバッターということで、タイミーのRailsアプリケーションについて弊社のシニアなエンジニアたちと雑談した内容を座談会風にお伝えできればと思います。事の発端は弊社Slackのバックエンドエンジニアが集まるチャンネルで「タイミーのRailsアプリケーションの健康度はどのくらいなのか？」という会話をしたことでした。その時の私の感想は「人によって
モバイルアプリに最適化した軽量JavaScriptエンジン「Hermes」、Facebookがオープンソースで公開。低スペックのスマートフォンでの実行速度を重視
モバイルアプリに最適化した軽量JavaScriptエンジン「Hermes」、Facebookがオープンソースで公開。低スペックのスマートフォンでの実行速度を重視 Webアプリとして構築されているモバイルアプリケーションは、現在では非常に複雑で大規模なものになりつつあります。 これは同時に、アプリケーションのロードや起動にかかる時間が増大することに直結しており、特に発展途上国などで広く使われている低スペックなスマートフォンにおいてはその影響が顕著です。 Facebookがこうした大規模するモバイル向けWebアプリケーションの課題を取り除くべく調査したところ、JavaScriptエンジンを改善する必要があることを認識し、Hermesを開発することにしたと説明しています。（追記：ただし後述のようにHermesは現時点ではWebアプリケーション用ではなくReact Nativeのオプションとなって
レスポンシブの実装が今までと変わる！ CSSの新機能コンテナクエリと:has()疑似クラス、最初に理解しておきたい基礎知識を解説
CSSの新機能コンテナクエリ（@container）と:has()疑似クラスが、いよいよChrome 105（8月末、来週リリース予定）でサポートされます。 コンテナクエリとは今までのメディアクエリがビューポートに依存していたのとは異なり、親要素（コンテナ）のサイズに対してスタイルを適用できます。:has()疑似クラスは指定した要素を含んでいる場合にスタイルを適用できます。 レスポンシブの実装この2つの新機能は単独でも強力ですが、組み合わせるとさらにすごいパワーを発揮します。この2つの新機能の最初に理解しておきたい基礎知識を紹介します。 container and :has(): two powerful new responsive APIs landing in Chromium 105 by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスにもと
2022年のRailsの開発現場事情について語ろう！ Qiita Night https://increments.connpass.com/event/241385/
こちらの記事は、2019年1月に公開された『 What Does Vue 3.0 Mean for Web Development? 』の和訳になります。 本投稿は転載であり、本記事はこちらになります。 補足: Vue3.0は2019年内もしくは2020年の初めにリリースされると予測されています。 2019年9月時点ではまだv2.6.10であること、ご留意ください。 はじめに 昨年11月、VueのクリエーターであるEvan Youは、Javascriptフレームワークの最新版となるVue 3.0の主要アップデートを紹介しました。 今回のアップデートによってVueはより効率的で、モジュール化され、さらに使いやすくなりました。 これらの変更と、Vue 3.0のリリースによる影響について説明します。 Vueの現在の状況は？ 彼らによると、Vueは「ユーザーアプリケーションを構築するためのプログレ
Rails 7.0ではフロントエンドサポートが刷新されます。新たなライブラリが多数導入され、選択肢が増えるため、「Rails公式のものを選べばOK」という戦略が通用しなくなります。 本稿では、Railsでフロントエンドを書くための選択肢について、その歴史と実装を踏まえて比較検討します。 結論から言うと(まだアルファ版なので今後も状況が変わる可能性はありますが、) 新規アプリケーションではSprocketsの役割は無くなりそうです。新しいライブラリとして Propshaft, importmap-rails, jsbundling-rails, cssbundling-rails が登場し、主要な選択肢として以下が提供されます。 (各ライブラリの詳細については後述します) Propshaft + importmap-railsデフォルトの選択肢。Node.jsが不要。トランスパイルを含め、複
BuriKaigi 2024 https://burikaigi.dev/ X https://twitter.com/__sakito__
S3 静的ウェブサイトにサーバーレスなお問い合わせフォームを実装してみた（Amazon SES + AWS Lambda + API Gateway） | DevelopersIO
S3 静的ウェブサイトにサーバーレスなお問い合わせフォームを実装してみた（Amazon SES + AWS Lambda + API Gateway） はじめに みんなが大好きな Amazon S3 の「静的ウェブサイトホスティング」で公開した HTML ウェブサイトに、メールフォーム付きのお問い合わせページが欲しくなるケースも多いと思います。 そこで今回は AWS のクラウドサービスをフル活用し、完全にサーバーレスで動作するメールフォームを構築してみました。 1時間ほどの作業でお問い合わせフォームを実装でき、AWS に触れることで「サーバーレス構成」の基本を理解するのにも役立ったので、備忘を兼ねて構築方法をご紹介します！ 今回の構成（概略図） サーバーレスだと何が嬉しいの？ おサイフに優しい メール送信のバックエンドに利用するAWSサービス（Amazon SES、Lambda、API G
Alternative Architecture DOJO Offline #3での資料です。
最近実際に開発現場にコンテナを導入してきた経験から、公式ドキュメントに記載されているベストプラクティスに実際どうなんだということを言ってみようと思います。公式に書いてあることを間違ってると指摘という意図はありません 発言は個人の見解に基づくものであり、所属組織を代表するものではありません。 2023/12/3更新: 燃えかけてるのでタイトルを変えました。 補足: こちらの環境は下記を想定しています。 Java CICD/本番環境イントラネット内に整備 WF開発 マルチステージ・ビルドを使う マルチステージビルドの目的 公式ドキュメントには、下記のように記載があります。 マルチステージ・ビルド は、中間レイヤとイメージの数を減らすのに苦労しなくても、最終イメージの容量を大幅に減少できます。 つまり、最終イメージの容量を減らすことが目的であって、その一つの手段としてマルチステージビルドを進めて
Googleの「Cloud Run」が正式サービスに。KnativeベースでDockerコンテナをサーバレスとして実行
Cloud RunはHTTPでアクセス可能なステートレスなサービスを提供するコンテナを、サーバレス環境で実行可能なサービスです。 すなわち、負荷がない場合にはサービスはまったく起動されず、負荷に応じて自動的にスケール。Dockerコンテナであれば、どんな言語で作られたサービスであっても関係なく利用できます。 課金もおよそ100ミリ秒ごとに、起動しているサービス数などによって計算されます。 また、Cloud RunはKubernetes上でサーバレスコンピューティング環境を実現するフレームワークとしてGoogleがオープンソースとして開発しているKnativeをベースにしています。 Anthos Cloud Runによりマルチプラットフォーム上でサーバレス Googleは、Kubernetesをクラウド基盤の抽象化レイヤとして用いることで、コンテナ化したアプリケーションをオンプレミスとクラウ
HTMLやCSSには、ユーザーインタラクション（ユーザー操作）を無効化するための方法がいくつか存在します。たとえば、マウスやタッチ操作を無効化したいときはCSSでpointer-events: noneを要素に指定するなど、制御したいユーザー操作によってさまざまです。 カルーセルやモーダルなユーザーインターフェイス（UI）では、非アクティブな要素が操作されないように「画面には表示されているが、あらゆるユーザー操作を受け付けない状態」にしたい場合があります。具体的には、以下のユーザー操作を無効化します。 マウスやタッチ操作を無効化したい テキスト選択を無効化したい キーボードフォーカスをあえて無効化したい 音声読み上げをあえて無効化したい 必要なプロパティや属性を複数指定することが考えられますが、そのようなときに役立つのがinertイナートと呼ばれるHTMLのグローバル属性です。 inert
Dart言語のフレームワーク「Flutter 2」公開。単一コードでiOS/Android/Web/Win/Mac/Linuxのネイティブアプリ実現。WebAssemblyによるレンダリングエンジン搭載
Dart言語のフレームワーク「Flutter 2」公開。単一コードでiOS/Android/Web/Win/Mac/Linuxのネイティブアプリ実現。WebAssemblyによるレンダリングエンジン搭載 Googleは、Dart言語のフレームワーク「Flutter 2」の公開を発表しました。 Now introducing, Flutter 2 at #FlutterEngage! Learn more about this major upgrade to the portability of Flutter that opens up a broad range of new target platforms like web and desktop from a single code base. Check it outhttps://t.co/T9025C5NCV pic.twi
個人的な観測範囲によると、定期的にTwitterで議論になる三大Web制作話題は ・ マサカリ ・ jQuery ・ ピクセルパーフェクト なのですが、今年もまたこのシーズンがやってきました！2020年9月20日に話題になったピクセルパーフェクトのツイートは以下にまとめられています。 そもそもピクセルパーフェクトとは何かをみてみたいと思います。 ピクセルパーフェクトとは簡単にいってしまうと、デザインカンプを1pxのズレもなく完璧に再現することです。まぁ、簡単か難しいかといえば、1枚の絵をそのまま再現すると開き直ると慣れればそんなに難しくありません。Bodyのbackground-imageにデザインカンプを設定してその上にパーツを配置していけばいいだけなので。ChromeにPerfectPixelというアドオンを入れるだけでも十分です。 では、どうしてピクセルパーフェクトはこれだけ議論にな
Denoが新フレームワーク「Fresh 1.0」リリース。Just-in-timeレンダリングやランタイムオーバヘッドゼロなどの特徴がもたらす優位性とは？
Denoが新フレームワーク「Fresh 1.0」リリース。Just-in-timeレンダリングやランタイムオーバヘッドゼロなどの特徴がもたらす優位性とは？ JavaScriptやTypeScriptのサーバサイドランタイム「Deno」を開発するDeno Land Inc.は、Deno用のフルスタックフレームワーク「Fresh 1.0」のリリースを発表しました。 バージョン番号の1.0が示すように、安定版としてのリリースです。 Fresh is a new full stack web framework for Deno. It sends zero JavaScript to the client by default and has no build step. Today we are releasing the first stable version of Fresh.https
経緯 world.hey.com DHHが「オタクくん見てる〜？ 今からうちのレポジトリからTypeScriptを剥しま〜す」と宣言したことにより、Web開発者界隈でTypeScriptの是非自体の話になり騒ぎになった*1*2。 github.com その後、野次馬がたくさん集ってきてrevertプルリクエストを立てる人やTypeScript公式リポジトリから全ソースコードを消すプルリクエストを出す*3ようなキッズムーブをする人も出てきた world.hey.com 実際の変更 8617行のTypeScriptがJavaScript化された。(Sloc 便利) ❯ scc src/ ─────────────────────────────────────────────────────────────────────────────── Language Files Lines Blan
皆様こんにちは、NewsPicksエンジニアの米澤です。 先日 2023/03/30は、こちらでアナウンスしていた通り、サービスの停止を伴うシステムメンテナンスを実施させて頂きました。 NewsPicksをご利用頂いている皆様には、ご迷惑おかけいたしました。 今回はこのメンテナンスの中で行われたDBテーブルのmigrationについてお話ししたいと思います。 ことの始まり やったこと 方針決め utf8mb4に対応していないテーブルを調べる migrationを作成する 影響範囲を調べる 開発環境でリハーサルを行う メンテナンスの日 最後に ことの始まり NewsPicksではバグの検知にBugSnagを利用しています。 ある時、BugSnagにこんなエラーが通知されてきました。 org.springframework.orm.hibernate4.HibernateJdbcExcepti
Publickeyのサーバは3月12日から14日にかけて何度もDoS攻撃を受けてダウンしていました。 その間、読者や広告を掲載いただいているお客様や代理店様にご不便やご心配をおかけし申し訳ありませんでした。 ひとまず現在までの状況と対応について報告したいと思います。 先に現状のみを報告すると、CloudflareのDDoS対策サービスを導入していまのところ平穏な状況を保っているため、このまま様子をみているところです。 DoS攻撃の発生時間帯 DoS攻撃とは、大量のトラフィックをWebサーバなどに浴びせることでサーバを応答不能にしてしまう攻撃のことです。 下図が3月12日から14日にかけてPublickeyのサーバに対して行われたDoS攻撃の主な発生時間帯です。 グラフはPublickeyのページビューの推移を示しており、横向きの矢印が主なDoS攻撃の発生時間帯を示しています。発生時間帯では
CSSの最新トレンドにおける現状のまとめ、よく使用する新機能やプロパティや疑似クラス、人気のフレームワークや検証ブラウザなど
CSSの進化は速く、ここ1,2年はさらに速くなりましたね。その要因の一つがIEのサポート終了で、現在はエバーグリーンのブラウザ（自動で最新版にアップデートするブラウザ）となり、モダンCSSの機能がたくさん使用できるようになりました。 2023年、CSSの現状調査をおこなった結果をまとめた「State of CSS 2023」を紹介します。今年は例年より早いですね。 State of CSS 2023 State of CSS 2023は、State of CSSでおこなわれたアンケートの調査結果（9,190人分）をまとめたものです。 まずは、アンケートに回答された人の属性。 世界中の人がアンケートに参加しており、日本人も参加しています。年齢は25-44才が多く、性別は男性が多めです。
inline-block を使う理由、それは 入れ子構造を作れることにより、改行位置の優先順位をつけられるから！ 詳しくは以降で説明します。 （前提）そもそも改行調整ってなんの話？ このタイトルを見て記事を開いた方であれば知っていると思いますが、一応説明です。 スペースで単語が区切られる欧文とは違い、日本語は単語の区切りがないので、改行すべき位置を機械的に判断できず、不自然な位置で改行されてしまうことがあります。そこで、見た目を整えるため、改行すべき位置を指定するための手法が必要になります。 他に詳しい記事がいくつもありますので、詳細はそちらを参照してください。 代表的な改行調整の手法 <wbr> 要素 <wbr>要素は、改行してよい位置を表す要素です。 親要素に対して word-break: keep-all; を指定して基本的には改行されないようにすることで、<wbr>要素がある位置で
Mozilla、今後はV8の正規表現エンジンをFirefoxにそのまま取り込むと表明。そのための互換レイヤを開発
Mozilla、今後はV8の正規表現エンジンをFirefoxにそのまま取り込むと表明。そのための互換レイヤを開発 WebブラウザにはJavaScriptを実行するためのJavaScriptエンジンが搭載されています。それはChromeであれば「V8」、Firefoxであれば「SpiderMonkey」と呼ばれ、それぞれのWebブラウザベンダがECMAScriptの標準に準拠したうえで独自に実装しています。 そしてJavaScriptは以前から正規表現の機能を備えているため、正規表現を解釈し展開するための正規表現エンジンもそれぞれのWebブラウザベンダが実装を行っていました。 その正規表現エンジンについてMozillaは今後、V8の正規表現エンジンのコードをそのままFirefoxのSpiderMonkeyに取り込むようにすると表明しました。 Mozillaはこれを実現するため、V8用の正規表
普段なにげなく使っているフォントですが、文字の太さを表すフォントウェイトには注意したいポイントがあります。とくにどの環境でも同じフォントにするためのウェブフォントでも、CSSの設定やOSの違いによって見え方が変わってしまうことがあります。ほかにもCSSの設定によっては意図しないウェイトが適用されてしまうこともあります。 この記事ではフォントウェイトのまつわる落とし穴と、それを回避するための方法を紹介します。エンジニアだけでなく、デザイナーの方にも役立つ内容です。 Noto Sans JPを例にフォントのウェイトの設定を変えながら見え方を確認できるデモページを用意しました。ぜひ試してみてください。 サンプルを別ウインドウで開く コードを確認する アンチエイリアス まず、アンチエイリアスについて簡単に説明します。アンチエイリアスとは、画面上で表示される輪郭を色の濃淡などを用いて滑らかにする処理
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript: 文字数を正確にカウントするには？ - Qiita
Rails 7.0正式リリース、Node.js不要のフロントエンド開発環境がデフォルトに
2019年、2020年のJavaScript - 別にしんどくないブログ
【中央揃え編】CSS限界オタクと学ぶレイアウトCSSサンプル集 - Qiita
AWS、コンテナに最適化したLinuxベースのOS「Bottlerocket」をオープンソースで公開
GitHubのリリースノートを自動化する仕組み
JavaScriptの組み込みAPIのIntlが凄いので紹介してみた。
要注意！？本当に怖いCloudFront - Qiita
最近のCloudflare Workers - ゆーすけべー日記
Hotwire を 本番環境で使ってみた感想
最新のVue3.0でウェブ開発はどう変わるか？ - Qiita
Rails 7.0でアセットパイプラインはどう変わるか | Wantedly Engineer Blog
2023年のフロントエンド振り返りと2024年
The Twelve-Factor App on AWS
コンテナのベストプラクティスに対しておこがましくも言ってみる - Qiita
ユーザー操作の一括無効化で役立つ！ HTMLのinert属性の紹介 - ICS MEDIA
本当に求めてるのはピクセルパーフェクトという「要件」ですか？｜榊原昌彦
Remove TypeScript - laiso
MySQLのutf8mb4と戦った話 - Uzabase for Engineers
Publickeyが受けたDoS攻撃、これまでの経緯と対策まとめ
それでも私が<wbr>でなくinline-blockで改行調整をする、たった1つの理由
意外と奥深いCSSのfont-weightの話 - ICS MEDIA
gigazine.net
zunzuku523.hatenablog.com
anond.hatelabo.jp
vision2030.hateblo.jp
www.tokyo-np.co.jp
tsugamittu.hatenablog.com