Next.js Conf 2022で最も感動したライブラリ、vercel/satoriについて紹介させてください。 - Commune Engineer Blog
はじめまして。コミューンでサーバーサイドエンジニアとして働いています、あのちっくと申します。 突然ですが皆様は昨年 10 月に開催されたNext.js Conf 2022はご覧になられましたでしょうか。 Next.js Conf は Next.js の開発・メンテナンスを行っている Vercel 社が主催する、Next.js とその周辺技術に関するカンファレンスです。 コミューンでもメインプロダクト commmune の Web フロントフレームワークとして Next.js を採用しており、私個人としてもとても興味深くオンラインから視聴をしていました。 特に話題になったのは、React Server Components をサポートしたルーティング・レイアウトシステム"app directory"などの新機能を新たに追加したNext.js 13と、"Webpack の後継"を謳う Rust
Perfume.js - Page speed monitoring
Perfume.js Page Speed is a feature, and to deliver it we need to understand the many factors and fundamental limitations that are at play. If we can measure it, we can improve it. Star Follow @zizzamia Why Perfume.js? Perfume is a tiny, web performance monitoring library that reports field data back to your favorite analytics tool. ⏰ Supports latest Performance APIs for precise metrics 🚀 Device d
JSの日付ライブラリは、どれを使えばいいのかまとめ
Moment.jsは、新規開発停止、メンテナンスモードに移行 Moment.jsは、新規機能の開発停止、メンテナンスモード(セキュリティ修正とMoment Timezoneのデータ更新は行う)に移行することが発表されています。これから新規開発するプロジェクトでは、別のライブラリを使うことが推奨されています。 僕の新規開発のプロジェクトでも当初はMoment.jsを使っていましたが、リリース前にこの発表が出たので、別のライブラリに変更することにしました。 Moment.jsのドキュメントページに、推奨ライブラリが4つ掲載されていたので、その中から選ぶことにしました。 Luxon Day.js date-fns js-Joda 簡単に結論が出るケース Day.jsを使うべき人 Moment.jsからの移行 Moment.jsを使い慣れている人 Day.jsはMoment.jsと同じAPI体系を
GitHubのトレンドで振り返る2020年のJavaScript
れこです。この記事はNode.js Advent Calendar 2020の 12 日目の記事です。今回は年の瀬ということで酒の肴になりそうな記事を書きたいと思います。 本記事では 2020 年に GitHub のトレンドに上がったリポジトリをいくつかの切り口で集計して、独断と偏見で感想を付け加えます。 この記事を酒の肴に 2020 年の JS/TS について懐かしんでもらえたら幸いです。 集計方法 GitHub のトレンドは過去の履歴が残っていないので非公式に集計されたデータを利用しています。 集計期間は 2020/01/01 から 2020/12/05 までの 341 日間 対象言語はJavaScriptとTypeScriptのみ トレンドの過去データのソースはxiaobaiha/github-trending-historyを参照 日ごとにまとめた markdown になっており、
経産省発の npm モジュール！住所や電話番号の正規化、ジオコーディングなどができる IMI コンポーネントツールを試した！
経産省発の npm モジュール！住所や電話番号の正規化、ジオコーディングなどができる IMI コンポーネントツールを試した！ Code for Japan の関さんが SNS でシェアしてて知ったのですが、経産省さんがなにやらオープンソースで住所や電話番号の正規化などなどをするツールを公開したとのこと。 https://info.gbiz.go.jp/tools/imi_tools/ 経産省が住所変換や法人種別名、電話番号の正規化に使えるIMIコンポーネントツールを公開しました。 ソースコードも公開。README にも使い方が丁寧に書かれていました。https://t.co/fPbV00EgZP 素晴らしい動き。こういう... #NewsPicks https://t.co/bew0qGKMFE — Hal Seki (@hal_sk) May 28, 2020 ぶっちゃけ当初はあまり期待
Optional chaining · V8
Long chains of property accesses in JavaScript can be error-prone, as any of them might evaluate to null or undefined (also known as “nullish” values). Checking for property existence on each step easily turns into a deeply-nested structure of if-statements or a long if-condition replicating the property access chain: // Error prone-version, could throw. const nameLength = db.user.name.length; //
脆弱性のあるJavaScriptライブラリの使用を防ぐには / #sec_kansai 14
総関西サイバーセキュリティＬＴ大会（第14回） ( https://sec-kansai.connpass.com/event/122914/ ) でJavaScriptライブラリの脆弱性に関する発表を行いました。
Progressive React
Performance advocates, like myself, spend a lot of time “advocating” for faster sites. At times however, we don’t cover framework-specific optimizations that can be important to consider if you use a particular framework for your site. This article will cover a number of performance optimizations you can add to your React sites. The key idea here is to ensure your site performs well enough so that
Introducing SWC 1.0 – SWC
What is SWC? swc (opens in a new tab) (speedy web compiler) is a super-fast JavaScript compiler. What can SWC do? It can transpile TypeScript / jsx / ECMAScript 2019 to browser-compatible JavaScript. // input.js class Foo { set foo(v) {} } class Bar extends Foo { get bar1() {} async bar2() {} } How fast is SWC? It's 16x - 20x faster than babel even on single-core synchronous benchmark. Note that a
GitHub - fbeline/Design-Patterns-JS: All the 23 (GoF) design patterns implemented in Javascript
Creational patterns are ones that create objects for you, rather than having you instantiate objects directly. This gives your program more flexibility in deciding which objects need to be created for a given case. Abstract factory: provide an interface for creating families of related or dependent objects without specifying their concrete classes. Builder: separate the construction of a complex o
TypeScript入門以前ガイド - mizchi's blog
某社で自分が React/Redux + TypeScript などの講習をやってみた結果、TypeScript 入門用資料が必要だと思って書いたやつです。 このドキュメントのターゲット TypeScript で書かれたプロジェクトに参加する人 TypeScript を導入するために、その事前知識が必要な人 このドキュメントの読み方 ES2015 for Beginners ES2015 for ES5 Programmers ES Modules 非同期表現: Promise と async/await TypeScript エコシステム編 自分が React/Redux などの講習でいろいろやってみた結果、 ES2015 と TypeScript を同時に教えると、初学者は何がどの概念に由来するかの区別が出来ずに混乱します。なので、ES5 -> ES2015, ES2015 -> Ty
State of React Native 2018 · React Native
2025React Native 0.79 - Faster tooling and much moreReact Native 0.78 - React 19 and moreReact Native Core Contributor Summit 2024 RecapReact Native 0.77 - New Styling Features, Android’s 16KB page support, Swift Template2024New Architecture is hereReact Native 0.76 - New Architecture by default, React Native DevTools, and moreReact Native 0.75 - Support for Percentage Values in Layout, New Archit
Storybookの便利なaddon機能のご紹介 | スペースマーケットブログ
こんにちは、最近バチェラーseason1を見始めたら止まらなくなり気づいたら土日をフルに使って全話見終えていました、フロントエンドエンジニアの荒田です。 スペースマーケットではスタイリングされたコンポーネントを確認するためにStorybookを導入しています。 (Storybookについては以前書いた記事をご参照ください) 今回はそのStorybookの便利なaddon機能について紹介したいと思います。 addonの基本的な導入方法 まず、導入したいaddon機能をインストールします。 （例） npm i -D @storybook/addon-viewport .storybook/addons.jsファイルを作成し、導入したいaddonを読み込みます。 import '@storybook/addon-viewport/register'; どのaddonも導入方法は基本的に同じになり
Web最新技術がてんこ盛りのreact-native-domから目が離せない - ナカザンドットネット
パリで発表されていたReact向けプロダクトがあまりにも未来に生きていて興奮したので、紹介させてください。 目次 目次 この記事のゴール 想定読者 はじめに 今回ベースとするソースコード React Nativeは何をするツールか Reactは何をするツールか React DOMとReact Nativeの違い Reactアプリケーションを描画するものたち React DOMの役割 React Nativeの役割 1. ネイティブ処理系の上でJavaScript処理系を動かす 2. Reactを動かす 3. Reactから渡された差分をネイティブViewに適用する React Native DOMはどこがReact Nativeなのか React Native DOMのやばいところ6連発 ReactからはReact Nativeに見えてるのがやばい Objective-C実装をJavaSc
JavaScriptユニットテストの理想と現実
Talk at 関西Node学園 梅田キャンパス 1時限目 https://nodejs.connpass.com/event/82614/
すべてをjsにまとめる思想を理解する - webpackハンズオンシリーズ｜こんぴゅ
javascriptの開発では、sassやtypescriptなどのコンパイル、minifyやautoprefixerでの最適化、依存関係を解決しbundleするなど多様な工程があるので、属人化・職人依存を避けるためにタスクランナーでの自動化が昔から当たり前に行われています。 webpackはこの手のツールのデファクトです。webpackはタスクの自動化支援ではなく、なんでもjsにまとめるという仕事をうまくやる事に特化しています。gulpやbrowserifyで行なっていたようなタスクの自動化はnpm scriptで十分やん、という割り切りを感じます。 なんでもjsで扱えるようにするので、cssや画像やhtmlもjs内にロードでき、設定が煩雑になりにくくなります。 webpackのloaderという仕組みがjsへの組み込みや最適化をうまくやってくれるのですが、どういうものか検証していきまし
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - ealush/vest: Vest ✅ Declarative validations framework
GitHub - volta-cli/volta: Volta: JS Toolchains as Code. ⚡
Microを使ってReactのSSRをする - Qiita
GitHub - egoist/franxx: A vanilla JavaScript router that works everywhere.