Nuxt Server Components を試す
設定ファイルと app.vue だけのごく質素なプロジェクトが生成された（こんな感じ）。前はもっと色々なファイルがあった気がする。慣れている人には余計なものがなくてよさそうだが、Nuxt を初めて使うような場合は途方に暮れそう。 公式ドキュメントに貼られている動画の内容を再現していく。 0:53 まずは通常通りにコンポーネントを作る。 これはマークダウンの文字列を HTML にパースして表示するコンポーネントで、変換には markdown-it というファイルサイズが大きいライブラリを使う。 <script setup lang="ts"> import MarkdownIt from 'markdown-it'; const md = new MarkdownIt(); const string = `# my component - markdown list - rendered a
最小限のコードで動く最も汚いコードから始める
最小限のコードで動く最も汚いコードから始める 2023.09.02 コードを書く際の重要な要点は、読みやすく他人に理解される「良いコード」を書くことです。しかし、完璧を目指して最初から書こうとすると行き詰まります。代わりに、荒削りながらも動くコードを作成し、徐々にリファクタリングして完成度を高めます。型エラーやリントエラーを無視しても構わないので、まずは動くものを作成しましょう。それからリファクタリングして「良いコード」を作成できます。 コードを書くときに最も大切なことってなんだろう？聡明な読者諸君ならご存知だろうが、コードは書く時間よりも読む時間のほうが長い。だから他人に読まれることを意識して、読みやすい「良いコード」を書かなくっちゃならない。コンポーネントは適切な粒度で分割されていて、適切な名前がつけられている。型システムに安全性だって守られてるし、最新のなんとかアーキテクチャにも準拠
State of CSS 2023
CSS is going through a period of unprecedented progress. Between :has(), container queries, subgrid, and many more, new features are making their way to browsers seemingly every month. The consequence of all this growth is that things can get a bit overwhelming. Thankfully this year we had Chen Hui Jing to help design the survey and guide us through the CSS jungle. And speaking of the survey, did
TS Reset - Official Docs
without ts-reset🚨 .json (in fetch) and JSON.parse both return any🤦 .filter(Boolean) doesn't behave how you expect😡 array.includes often breaks on readonly arrays with ts-reset👍 .json (in fetch) and JSON.parse return unknown✅ .filter(Boolean) behaves EXACTLY how you expect🥹 array.includes is widened to be more ergonomic🚀 And several more improvements!
ButtonとLink、どう実装する？
ButtonとLink、どう実装する？ 2023/08/30 Encraft #6 @yoshiko_pg 1
Announcing Biome
We are happy to announce Biome, toolchain of the web. Biome is the official fork of Rome and it will continue to be Rome’s legacy. Biome is led and maintained by the same people that maintained Rome so far. Follow us: Github organization Official repository Official discord server Official twitter account I want to give you some background and context, which could help you to get why the core team
How React 18 Improves Application Performance - Vercel – Vercel
Learn how concurrent features like Transitions, Suspense, and React Server Components improve application performance. React 18 has introduced concurrent features that fundamentally change the way React applications can be rendered. We'll explore how these latest features impact and improve your application's performance. First, let's take a small step back to understand the basics of long tasks a
typescript-eslintで新しい構文をサポートする
新しい構文がやってくる ご存知の通り、JavaScript の標準仕様である ECMAScript では毎年新しい記法や構文が提案され、採択されています。もちろん JavaScript のスーパーセットである TypeScript もその例外ではありません。 TypeScript では基本的に ECMAScript Proposal の Stage3 になった仕様から順次サポートするという方針があります。最近であれば v5.0 に入った Decorators や v5.2 で導入される using Declarations(Explicit Resource Management)などが該当します。 ここまでのことは普段 TypeScript を利用している方であれば知っている方も多いでしょう。しかし実際に TypeScript で新しい構文がサポートされた後、typescript-esl
新規作成画面をなくすと考慮事項が激減して嬉しい
例えば CMS の管理画面を考えます。 /posts に記事一覧画面、/posts/new に新規作成画面、 /posts/:postId に記事更新画面を置くような URL の設計はあるあるかと思います。 今回は /posts/new の画面はないほうが色々嬉しいと思った話をします。 新規作成画面があることで増える考慮事項 まず新規作成画面があると、どんな煩わしさがあるかを考えます。 下書き保存した時、どうする？ 新規作成画面で下書き保存をすると、内部的にはリソースの ID が採番されます。つまり下書き保存した段階で、それは記事更新画面になるはず。 その ID で URL を /posts/:postId に書き換えるかどうかを検討します。 筆者は React 一辺倒人間なので React 寄りの話にはなりますが、Next.js や React Router などでは /posts/ne
いいねとその通知機能をDynamoDBで設計したら思ったよりムズい - エムスリーテックブログ
【Unit4 ブログリレー4日目】 こんにちは、エムスリーエンジニアリンググループの福林 (@fukubaya) です。 今回は、SNSではごく一般的ないいねとその通知機能をDynamoDBを利用して実装したら思ったより大変だったので、その詳細をご紹介します。 キャナルシティ劇場は、福岡県福岡市博多区の複合商業施設「キャナルシティ博多」のシアタービル最上階に位置する劇場。本文には特に関係ありません。 m3ラウンジ m3ラウンジのいいねとその通知の要件 RDBで実装したらどうなるか いいね機能 通知機能 DynamoDBで実装する いいね機能 通知機能 いいねする いいねを取り消す 通知を表示する 未読の通知の取得 未読の通知数 未読の通知を既読にする テーブル設計むずい PKとSKに何を選ぶか LSIは途中から作れない DynamoDBをローカルで動かして設計する まとめ We are h
ソルト付きハッシュのソルトはどこに保存するのが一般的か - Qiita
pictBLandとpictSQUAREに対する不正アクセスがあり、パスワードがソルトなしのMD5ハッシュで保存されていたことが話題になっています。 2023年8月16日に外部のフォーラムにpictSQUAREより窃取した情報と主張するデータ販売の取引を持ち掛ける投稿が行われた（中略）パスワードはMD5によるハッシュ化は行われているもののソルト付与は行われていなかったため、単純なパスワードが使用されていた29万4512件は元の文字列が判明していると投稿。（それ以外の26万8172件はまだMD5ハッシュ化されたままと説明。） 不正アクセスによるpictBLand、pictSQUAREの情報流出の可能性についてまとめてみた - piyolog より引用 これに関連してMD5ハッシュやソルトに関するツイート(post)を観察したところ、どうもソルトの理解が間違っている方が多いような気がしました。
Ajaxから始まった一つの時代の終わり
最近の流れを見ていての感想文なので、ideaとして投稿します。筆者のバックグラウンドとしては、Remixの商業記事を書いたり、App Routerの商業記事を書いたりしている人です。 さて、筆者は2022年の秋から、社内システムではありますがRemixをプロダクション運用しています。また、Next.jsのApp Routerについても、パラダイムとしてはRemixにインスパイアされた部分が多い[1]おかげで、順調にキャッチアップできています。 RemixとApp Routerは、ルーティングとデータフェッチを高度に統合しており、Progressively Enhanced SPA（PESPA）と呼ばれることもあるそうです。PESPAについては、次の記事が話題になりましたね。 このPESPAであるRemixを実運用する中で、フレームワークの手触りが近年触ってきたものと大きく違っている点があっ
Patterns for Reactivity with Modern Vanilla JavaScript – Frontend Masters Boost
Patterns for Reactivity with Modern Vanilla JavaScript August 21, 2023 “Reactivity” is how systems react to changes in data. There are many types of reactivity, but for this article, reactivity is when data changes, you do things. Reactivity Patterns are Core to Web DevelopmentWe handle a lot with JavaScript in websites and web apps since the browser is an entirely asynchronous environment. We mus
Moonbit: the fast, compact & user friendly language for WebAssembly
The importance of WebAssembly (Wasm), a cross-platform Instruction Set Architecture (ISA), is escalating in Cloud and Edge computing, given its efficiency, security, compactness, and open standard. However, its true potential remains untapped. Low level Wasm languages like Rust and C/C++ are challenging to learn and can be slow for developers because of their long compilation time. On the other ha
Gorilla Testing: How It Is Different from Monkey Testing
Start automating your tests 10X Faster in Simple English with TestsigmaTry for free As its name suggests, gorilla testing differs from the monkey testing technique, and it’s advantageous for companies and product teams to understand and appreciate these differences. This blog will explore how gorilla testing differs from monkey testing and why it’s essential to quality assurance practices. What is
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UI2: Figma's Design System | Figma
Biome, toolchain of the web
What's Coming In TypeScript 5.3?
GitHub - thames-technology/monads: Option, Result, and Either types for TypeScript - Inspired by Rust 🦀
GitHub - logaretm/villus: 🏎 A tiny and fast GraphQL client for Vue.js
