Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
TSKaigi 2024 ref: https://tskaigi.org/talks/tockn
Next.jsのApp Routerを学ぶ際に、UIライブラリを探していたところ、shadcn/uiが参考になったので紹介します。 shadcn/uiは、フレームワークやライブラリではなく、コピペで利用できるReactコンポーネントのサンプル集という立ち位置になっています。Tailwind CSSでデザインされており、React Server Components(RSC)にも対応しています。 サンプルの実装方法が参考になる点も魅力の一つです。 簡単ですがつらつらと紹介していきたいと思います。 shadcn/uiとは デモを見てるとフレームワークやライブラリなのかなと思いきやそうではなく、コピペで利用できるサンプル集という立ち位置になっています。基本的にはTailwind CSSでデザインされてるようです。 サンプルとはいえ、実装方法で参考になった箇所が結構あったのでそこも気に入ってるポイ
はじめに こんにちは。ドワンゴ教育事業でエンジニアをしているユーンです。 N予備校アプリケーションやその他複数のプロジェクトで pnpm を採用しました。pnpm とは何か、npm とどう違うのかというのを node_modules の構造を追いながら理解しつつ、教育事業での採用した結果についてお話します。 pnpm とは pnpm とは、npm や yarn とレイヤーを同じくするパッケージマネージャであり、サードパーティのものです。 pnpm.io pnpm は他のツールと比較して高速でありディスク効率が良いと謳っています。 その pnpm の最大の特徴は、 node_modules の構造にあります。 例えば npm では v3 からフラットな node_modules を使うようになっております。yarn もデフォルトでは同様にフラットな node_modules を提供しています
コーポレートサイトでの htmx 実装をデモサイトで試してみよう | htmx | ブログ | a-blog cms developer
2024年2月、JavaScriptライブラリ htmx の発見から始まり、短期間でその可能性に引き込まれ、以下の3つの記事を書きました。 JavaScript ライブラリ htmx と a-blog cms は相性が良さそうだ | kazumich.log kazumich.log htmx という JavaScript のライブラリが、2023 JavaScript Rising Stars : Front-end Frameworks で 2位 になっているが、日本ではあまり聞かない。私自身も最近知ったばかりだが面白そうな... Ajax 通信を簡単にする htmx の基本と実践 | フロントエンド | スタッフブログ | 名古屋のCMS構築・Web制作会社 アップルップル appleple htmx は、JavaScript のコードを書かずにサーバーとの非同期通信を実現し、ページ
「ビーチ・ボーイズ」創設メンバー、後見制度の対象に 米裁判所
演奏を披露するブライアン・ウィルソンさん＝２０２２年６月/Paul Hennessy/SOPA Images/Shutterstock （ＣＮＮ） 米国西海岸発の独特なメロディーなどで一世を風靡（ふうび）したロックバンド「ビーチ・ボーイズ」の共同創設メンバーのブライアン・ウィルソンさんが、米ロサンゼルスの地方裁判所の判断を受け、成年後見制度の対象となったことが１２日までにわかった。 裁判所文書によると、地裁判事は同制度の適用が必要との明白かつ納得し得る証拠があると説明。「認知症により日常生活上の処理が自力でできない状態にある」とし、治療面で承諾を与える判断力にも欠けているとした。 その上で後見人に対し健康管理上の決定事項に関しては、ウィルソンの子どもと相談するよう命じた。 ウィルソンさん自身も後見制度の適用に同意しているという。 ウィルソンさんの家族によると、後見制度の適用は妻メリンダさん
neverthrow の全機能リファレンス
JavaScript/TypeScript で try/catch を使わないエラーハンドリングに利用できるライブラリとしてはそこそこ有名だと思う neverthrow ですがあまり解説された記事が少なく、関数型と手続き型の書き方をいい感じにミックスできるいいライブラリで情報の少なさから選択されないのも勿体なく感じました。ちょうど GitHub のドキュメントを読みながら意訳してまとめた手元の技術メモがありますのでその一助になればと公開します。 neverthrow とは supermacro/neverthrow: Type-Safe Errors for JS & TypeScript プログラムのエラーハンドリングを try - catch ではなく関数型プログラミング由来の Result 型や Either 型と呼ばれる方法で実現する機能を提供するライブラリです。具体的には Res
はじめに 先日開催されたTSKaigiにて配信チームとして、オンライン配信のスタッフをしていました。 当日の各トラックの配信運営や総合的な環境構築などは他のメンバーを中心に行っていただきましたが、自分は配信画面のデザインや配信に乗せる情報管理用のシステムをコツコツ作っていたのでその紹介をさせていただきます。 情報管理用のシステムといってもローカルマシン上で動く簡単なもので、NodeCGと呼ばれるNode.js向けの配信画面管理用のフレームワークを利用しました。 NodeCGとは NodeCGは先ほど紹介したようにNode.jsとブラウザ技術で動的な配信画面を作成したり、管理画面を提供してくれるフレームワークです。 配信レイアウトとダッシュボードはブラウザ上で動作し、ダッシュボードで編集した情報を配信レイアウト側にWebSocketでリアルタイムに反映したり、WebSocketサーバー（No
Honestly, I'd never thought I'd be writing about this, but the matter of patching globals turned out to be one of those topics that a lot of engineers seem to misunderstand. Most of us don't do monkey-patching, and even fewer stay around those implementations long enough to witness their impact. All the more reason to talk about it. Throughout the next few thousand words, I will be referring to mo
引用元: https://nodejs.org/en/about/branding 2024年4月24日にリリースされたNode.js v22の主な変更点を紹介します。 Node.js v22はLTS(長期サポート)のバージョンになります。10月の後半にLTSとしてサポートが始まります。 nodejs.org require()がESMをサポート V8 12.4 アップデートによる JavaScript の機能 Array.fromAsync() Set methods union() intersection() difference() symmetricDifference() isSubsetOf() isSupersetOf() isDisjointFrom() Iterator Helpers map() filter() reduce() --runオプションによるpacka
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
令和のHTML / CSS / JavaScriptの書き方まとめ
Prisma ORMを2年運用して培ったノウハウを共有する
Next.jsのApp Routerを学ぶ際、shadcn/uiが参考になったという話 - Qiita
pnpm の node_modules を探検して理解しよう - ドワンゴ教育サービス開発者ブログ
TSKaigiは配信画面もTypeScript製だったという話
Why Patching Globals Is Harmful
Node.js v22の主な変更点 - 別にしんどくないブログ