Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。

Github Actions をワークフロー内で使う方法についてすぐに見返すための備忘録 Github Action を作るためのメモはこちら => Github Action の作り方メモ ドキュメント GitHub Actions について - GitHub Docs Workflow syntax for GitHub Actions - GitHub Docs Expressions - GitHub Docs Contexts - GitHub Docs 使用制限、支払い、管理 - GitHub Docs Environment variables - GitHub Docs ワークフローの定義 リポジトリに次のディレクトリを作成し、その中にYAML形式で定義する。 .github/workflows/ YAMLファイルは名前は自由。複数OK。 ワークフローの構造 ワークフローを

未経験からエンジニアになり3年が経ちました。 この3年間はベテランエンジニアとの差を埋めるべく、プライベートの時間の大半を学習に充ててきました。幸い少しずつ成長を感じられ、業務では難易度の高い仕事を任せてもらえるようになったと感じます。このキャッチアップのために100冊以上の技術関連書籍を読んだことでしょう。 ここ最近、知人やTwitter経由で知り合った方から、私が学習に使った書籍について質問を頂くことが多いです。そこで、今後参照していただきやすいように、これまで私が読んで良かった書籍を1つの記事にまとめようと思います。 前提：エンジニアとして経験した技術 書籍について 全エンジニア向け Web / インターネット イラスト図解式 この一冊で全部わかるWeb技術の基本 (★) HTMLコーダー＆ウェブ担当者のための Webページ高速化超入門 (★) Webを支える技術 -HTTP、URI

cookie clickerというゲームを御存じだろうか。ひたすらクッキーを焼くゲームだ。 クッキーをクリックすると、クッキーを生産できる。生産したクッキーを使って職人のおばあちゃんや工場(生産設備)を購入すると生産を自動化できる。 生産→生産設備強化→生産 ひたすらこれを繰り返す。これがこのゲームの基本的な流れである。 わたしはこのゲームに3年以上嵌っていた。ほかの活動の阻害になっていると思い卒業したが、なぜここまでこのゲームは人を熱中させるのだろうか。 その構造と解決策を考察していく。なお、考察にあたって『僕らはそれに抵抗できない「依存症ビジネス」のつくられかた』を参考にした。 参考文献『僕らはそれに抵抗できない「依存症ビジネス」のつくられかた』 cookie clickerと依存症cookie clickerには強い中毒性がある。それは、cookie clickerのゲームデザインの

ごあいさつ はじめましての人ははじめまして、こんにちは！BASE BANK Divisionのフロントエンドエンジニアのがっちゃん（ @gatchan0807 ）です。 今回は、ここ数ヶ月の間にOIDC（OpenID Connect）という技術を使った開発を複数行い、この技術の概観を理解することができたので、OIDCの技術概要に触れつつBASE BANKの中でどのように使ったのかをご紹介しようと思います。 OIDCとは何なのか このパートでは、まずOIDCという技術について概要を紹介します。いくつかのWebページに記載されていた内容を参考にしてまとめさせて頂いているので、記事の最後に参照元のリンクを記載しておきます。 また、OIDCをはじめとした認証・認可の仕組みには様々な用語があり、自分自身も「調べれば調べるほど知らない用語が増えて、どんどんわからなくなってきた…」という経験をしたので、

import { ChangeEvent, FormEvent } from "react"; export default function Form() { const showError = (message: string) => (e: FormEvent<HTMLInputElement>) => { if (e.currentTarget.validity.valueMissing) { e.currentTarget.setCustomValidity(message); } else if ( e.currentTarget.validity.patternMismatch && e.currentTarget.name === "postcode" ) { e.currentTarget.setCustomValidity("郵便番号正しく入力してね"); } else

翻訳について これは Allen Wirfs-Brock, Brendan Eich 著 JavaScript: the first 20 years の翻訳です。英語版は CC BY 4.0 ライセンスで公開されています。 この翻訳は CC BY 4.0 ライセンスの許諾に基づいて公開されます。 PDF/EPUB 版について この翻訳の PDF/EPUB 版を BOOTH で販売しています。

ゲームエンジンや3Dソフトウェアを利用して高度な表現ができるこの時代でも、プリミティブな描画や動き、アルゴリズムから学べることは多い。それらをJavaScriptで書くクリエイティブコーディングという形で学べる手引書が本書となる。

"Think globally, act locally" Run your GitHub Actions locally! Why would you want to do this? Two reasons: Fast Feedback - Rather than having to commit/push every time you want to test out the changes you are making to your .github/workflows/ files (or for any changes to embedded GitHub actions), you can use act to run the actions locally. The environment variables and filesystem are all configure

およそ 4 年前に「TypeScript で型レベル Brainfuck」という記事を書きました. susisu.hatenablog.com それから 4 年間の間に TypeScript も進化し, 型レベルプログラミングの技法にも大きな変化がありました. 特に顕著な影響があったものでは, TypeScript 4.0 のタプル型の改善 TypeScript 4.1 のテンプレートリテラル型や条件型での再帰 TypeScript 4.5 の条件型での末尾再帰の除去と, 再帰の上限の緩和 などがあります. こういった変化も踏まえた上で, いまから TypeScript の型レベルプログラミングに入門する人に向けて改めてまとめ直したものがこの記事です. 内容は記事執筆時点の最新版である TypeScript 5.4.5 で動作を確認しています. ぜひ Playground などを使って,

こんにちは！株式会社Rabeeの新人デザイナーのakaneです🏋 今回は、Webデザインで「紙っぽさ」を出す方法を考えてみました。参考事例も掲載しながら紹介していくので、どうぞ最後までお楽しみください！ はじめに：「紙っぽさ」とは？私が言う「紙っぽさ」とは、おもに「雑誌っぽさ」のことです。Webデザインだけど、雑誌っぽい。ディスプレイに映っているけれど、エディトリアル感がある。 たとえば、以下のようなデザインは私にとって「紙っぽい」例です。 出典：六本木未来会議出典：DMN出典：ぼくのおじさんどうして、私はこれらを雑誌のようだと感じるのでしょう？自分なりに考えたポイントを、ひとつずつ紹介していきます。 その①：文字が「組まれて」いる最初に挙げたWebサイトのひとつをよく見てみると、画像左上にある「NO. 153」の文字のうち、「NO.」だけが縦向きになっています。「NO.」と「153」を

概要 本記事では、私が作成したrack-dev_insightというgemとchrome extensionで構成された開発ツールの紹介をしたいと思います。 Rack (Rails) アプリケーションにgemをインストールすると、SQLクエリとHTTPリクエストのトレースが自動で行われ、その解析結果がchrome devtoolsのパネルに表示されます。 rack-dev_insightの目的は、複雑なアプリケーションにおける機能とデータの依存関係の把握を手助けすることであり、具体的にはCRUDマトリクスの自動生成やHTTPリクエスト情報の表示ができる点が特徴となっています。 デモ rack-dev_insightの大まかな操作感は以下の動画をご覧ください。詳細な説明は以降のセクションに記載しています。 開発に至るまでの経緯 問題意識 私の経験上、多くのデータ（RDBMSのテーブルなど）が

新しいプログラミング言語やライブラリ、フレームワークを学ぶには、実際にそれらを試して挙動などを見てみることが大事ですが、実行環境を用意するのは手間がかかります。 そこで役立つのが、いわゆる「プレイグラウンド」と呼ばれる、Webブラウザでプログラミング言語やライブラリ、フレームワークをすぐに試すことができるサービスです。 主要なプログラミング言語の公式サイトには、実際にその言語をすぐに試せるプレイグラウンドが用意されていることも多く、また公式サイト以外にもネット上にはさまざまなプレイグラウンドがあります。 プレイグラウンドを使えば、気軽にいろんなプログラミング言語やライブラリ、フレームワークを試せます。 この記事ではそうしたプレイグラウンドをまとめてみました。ここで紹介したプレイグラウンドの他にも、あなたのお気に入りのプレイグラウンドがあればX/Twitterやブックマークのコメント、メール

As is the rule in WebGL, anything that seems like it should be simple is actually quite complicated. Drawing lines, debugging shaders, text rendering… they are all damn hard to do well in WebGL. Isn’t that weird? WebGL doesn’t have a built-in function for rendering text. Although text seems like the most basic of functionalities. When it comes down to actually rendering it, things get complicated.

パッと静的Webサイトを用意したい こんにちは、のんピ(@non____97)です。 皆さんはパッと静的Webサイトを用意したいなと思ったことはありますか? 私はあります。 AWS上で静的Webサイトを構築するとなると思いつくのは「CloudFront + S3」の構成です。しかし、OACの設定をしたりアクセスログの設定をしたりと意外と設定する項目が多く大変です。そのため、検証目的で用意する際には手間がかかります。 毎回都度用意するのも面倒なので、AWS CDKを使って一撃で構築できるようにしてみました。(Route 53 Public Hosted Zoneを作成する場合は二撃です) AWS CDKのコードの紹介 やっていること AWS CDKのコードは以下リポジトリに保存しています。 やっていることは以下のとおりです。 Route 53 Public Hosted Zoneの作成 また

WebGL2ではTransformFeedbackという機能が使えるようになりました。TransformFeedbackがあればGPUでの計算結果をバッファに書き出すことができるようになります。これを使えば、なかなか面白いことができるようになります。 この記事では、TransformFeedbackを利用したGPGPUと、パーティクル描画について解説します。 前提知識 この記事では、WebGL2について、基礎的な知識を持っていることを前提としています。まだWebGL2に慣れ親しんでいない人は、以下の記事を参考にしてください。 WebGL2入門 基礎編 また、WebGL1/WebGL2について、@h_doxas様がwgld.orgという解説サイトを開いています。そちらも参考にしてください。 wgld.org ソースコード この記事で使われているプログラムの完全なコードはGithubに置いてあ

https://testnight.connpass.com/event/311263/

Digitization部 Bill One Entry*1グループの秋山です。 はじめに Domain Modeling Made Functionalというスゴ本 補講：Make Illegal States Unrepresentable バックエンドの処理を抽象化する 手続き型プログラミングの典型例 課題1：制約のないエラーハンドリング 課題2：低い可読性 課題3：エラーハンドリングの低い網羅性 Railway Oriented Programming TypeScriptで型安全にエラーハンドリングする ステップ1：サブ関数の出力はResult型で表現する ステップ2：サブ関数にResult型を入力できるようにする ステップ3：サブ関数を連結する ステップ4：網羅的にエラーハンドリングする おわりに 付録 TypeScriptの全文サンプル はじめに エラーハンドリングは重要な処