React Server Component の Isomorphism について解説する
Next.js + React Server Component のリファレンス実装が出たので、手元で動かしながら理解したメモ。 vercel/next-server-components: Experimental demo of React Server Components with Next.js. Deployed serverlessly on Vercel. これを書いてるモチベーションとして、Twitter を見る限り React Server Component のことを 「ただのサーバーサイドへの先祖返り」とか「SSR 結果を dangerouslySetInnerHtml してるだけでは？」みたいな反応があったので、そのへんの誤解を解きたい。 Introducing Zero-Bundle-Size React Server Components – React Bl
GatsbyJSで作っているブログでシンタックスハイライトが適用されるようにした
はじめにギフティ Advent Calendar 2019 - Qiitaの3日目の記事。枠が空いていたので書いた。アドベントカレンダー駆動開発でこのブログを進化させていくスタイルをとっていきたい。このブログでコードを書いた時にコードブロックがいい感じになるようにしたので、その過程をまとめる。まずはシンタックスハイライトが適用されるようにするところから。 前提このブログはGatsby公式のgatsby-starter-blogをベースに作られている。 gatsbyjs/gatsby-starter-blog: Gatsby starter for creating a blog やりたいことブログ内に出てくるJSやRubyのコードにシンタックスハイライトを適用したい。 デモ
寿司打の限界を目指して ~WebGLのOCR~
この記事は闇の魔術に対する防衛術 Advent Calendar 20192 日目の記事です。 ある日、会社で寿司打というタイピングの速度や正確さを競うゲームが流行った。 みんなやってるので私も挑戦してみたところ、結果は惨敗。全エンジニアの中でもっともスコアが低かった。もともとタイピングが早くも正確でもないことを自覚していたつもりだったが、現実を突きつけられ大人しく家に返って枕を濡らそうと思った。が、あまりの悔しさにまみれ「JSer ならタイピング速度ではなく JS で勝負すればいいんだ」とダークサイドに堕ち闇の力に手を染めてしまった。 本記事はムキになって寿司打（WebGL 版）のスコアを稼ぐ自動化 JavaScript の話。 なお動作確認には Ubuntu 19.04、Google Chrome 80.0.3955.4 を使用した。 寿司打 WebGL 版 http://typing
Svelteで作るWebComponents / svelte-web-components
Vue.js Night #1 https://giftee.connpass.com/event/150145/ にて発表した資料です。
Image Optimization Made Easy with Gatsby
Shave off hours of work with a simple to use React component built for images. Optimizing images hardly sounds like an ideal afternoon of work, but in today’s world it’s become a necessary evil. This post looks at how it can be done much easier using gatsby-image. For practical examples of methods used in this tutorial, check out this free playlist of Egghead videos that show how to use Gatsby Ima
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
noteのフロントエンドをNuxt.jsへ刷新します｜こんぴゅ｜note
webサービスのUXを向上させるために、表示速度は非常に大切です。 しかしながら、noteはリリース当初からフロントエンドの実行速度が遅い=表示が遅いという構造的な問題を抱えており、継続率や離脱率など重要指標に悪影響を及ぼすリスクが強くありました。 noteチームはnoteを本格的なメディアプラットフォームへ成長させるスピードを加速していきます。それを踏まえ、手遅れになる前に技術的な負債を解消し、最新のベストプラクティスに沿ったフレームワークに移行することで、高性能なサービスを提供する基盤を作っていくという決断をしました。 本ポストでは、移行プロジェクトの技術的背景や移行手順を説明します。また、途中成果のデモをUPしているのでご紹介します。 技術的な背景noteの現在のフロントエンドはAngular.js 1系で構築されたSPAです。Angular 1系はかなり複雑なUIでも簡単に構築でき
Cloud Functions for FirebaseでサーバレスでGitHubのメンションをSlackに通知する - Qiita
やりたいこと GitHubのアカウント名とSlackのアカウント名が異なるケースがよくある。この場合、Slack標準のGitHub連携だとメンションが飛ばない。GitHubのコメントでメンションしたらよしなにSlackで通知させたい。 つまりは、こういうことがしたい。 背景 今までこの機能は社内Hubotが役割を務めていたが、メンションだけのために1台インスタンスを立てておくのはもったいないし、ちょくちょくアプリケーションが死んでて誰かが再起動させたりと小さいながらも運用が発生していた。Hubotの設定をしてくれた方が退職して、インテグレーションが外れたのを機に、なるべく人依存な運用を減らすことを目的として、サーバレスで同機能を実現することにした。 前提知識 GitHubは「Issuesを立てる」、「コメントをする」といったイベント毎にWebhookを叩ける SlackのIncoming
Next.js 5: Universal Webpack, CSS Imports, Plugins and Zones – Vercel
We are very happy to introduce Next.js 5.0 to the world. It’s available on npm effective immediately. Next.js is a toolkit for universal, server-rendered (or statically pre-rendered) React.js applications. Getting started developing an application of any size is as easy as executing next. (Read more.) With every new release we are committed to retaining backwards compatibility, offering simple upg
Top 10: Best UI Frameworks for ReactJS
See our review from 10 of the best open source UI Frameworks for ReactJS The key to a high quality user interface lays in the design that helps you to achieve the best possible graphical user interface. There are developers like me that are terrible designing from scratch UI components for my application. Fortunately for people like us, that usually work on the backend and for some reason has to p
ECMAScript 2015以降のJavaScriptの`this`を理解する
この記事はJavaScriptの入門書として書いているjs-primerのthisに関する部分をベースにしています。 またjs-primerでは書けなかった現在時点(2018年1月1日)でのブラウザの挙動についてを加えたものです。 次の場所にjs-primer版（書籍版）のthisについての解説があります。 この記事と違って実際にコードを実行しながら読めるので、学習ソースとしては書籍版を推奨します。 書籍版: 関数とthis · JavaScriptの入門書 #jsprimer また、バグ報告やPRも直接リポジトリにして問題ありません。 asciidwango/js-primer: JavaScriptの入門書 おかしい場所を選択した状態で右下にある”Bug Report”ボタンを押せば、簡単にtypoとかのバグを報告できます。(PRでも歓迎) 前置きはこの辺までで、ここから本編。 この記
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「フロントエンド領域」を再定義する
STUDIOの解説 @Vue.js v-tokyo Meetup #9
20 年代のフロントエンド.md
Semantic UI Reactを導入した | ナンチャラカンチャラ
Gatsbyにブログを移行するまでにやったこと | ナンチャラカンチャラ
ブログをGatsbyに移行した | ナンチャラカンチャラ
Proton Native - React Native for the desktop, cross compatible
The Best React-Based Framework | Gatsby
