今Reactを使うならピュアなCSSをサポートするUIフレームワークやライブラリを選定するのがマルそうと思った話
最近個人開発でNext.jsの環境を立ち上げた際に、スタイリングをどうやってやろうかなと迷ったので初心に帰って最近のスタイリングについて調べ直してみました。結構面白かったので、記事にまとめることにしたので、よかったら読んでみてください。 本記事では以下に触れます。 React界隈におけるスタイリング方法の歴史的変遷 なぜタイトル通りピュアなCSSをサポートする機構が良いと感じたか おすすめのスタイリング機構 ざっと振り返るReactのスタイリング方法の歴史的変遷 私が最終的にピュアCSSを推したいと思った理由をお話する前に、爆速で変わり続けるReactとともに、スタイリングはどう変遷していったのかをざっとまとめたいと思います。 （こういうのって、歴史と組み合わせて理解すると、結構深まりますよねと思っているのは私だけでしょうか…、いえそんなことはないはず😊） 大昔: CSS Modules
One, a React Framework
One aims to make web + native with React and React Native much simpler, and faster. One takes Vite, makes it serve React web and React Native. Then adds FS routes, render modes, loaders, middleware, a CLI, Hono, etc. One is a simpler framework because it's being designed alongside a sync engine, Zero.
あなたのプロダクトに Apollo Client は必要ないかもしれない - 一休.com Developers Blog
Apollo Client は複雑 Apollo Client が向いているケース 一休.com に Apollo Client は必要ないかもしれない では何を使えばいいの？ 複雑なアプリケーションには Apollo を使えばいい？ もう一つのリッチなクライアント、Relay の話 結局、何を使えばいいのか この記事は一休 × 出前館 Frontend Meetup でお話した内容をブログにまとめたものです。 user-first.ikyu.co.jp speakerdeck.com GraphQL クライアントと聞いて一番に思い浮かぶライブラリは何でしょうか？ 多くの方にとっては Apollo Client ではないかと思います。npm trends を見ても Apollo Client のダウンロード数は urql や relay などほかのクライアントと比べ圧倒的です。 実際、一休
Webの将来はサーバサイドレンダリング（SSR）に回帰していく。Denoが主張するIsomorphic JavaScript（もしくはUniversal JavaScript）とは何か？
Webの将来はサーバサイドレンダリング（SSR）に回帰していく。Denoが主張するIsomorphic JavaScript（もしくはUniversal JavaScript）とは何か？ 静的なHTMLファイルをWebサーバが配信する仕組みから始まったWebは、サーバ側で動的にHTMLを生成するCGIの仕組みや、Webブラウザ上でJavaScriptを実行してインタラクティブな操作を実現するなどの仕組みを得たことでWebアプリケーション基盤へと発展しています。 現在、Webアプリケーションの仕組みとして代表的なものがSPA（Single Page Application）でしょう。 SPAはWebブラウザ上で多くの処理が行われるためユーザーの操作に対する反応が速く、インタラクティブ性の高い快適なWebアプリケーションを実現できる利点があります。 しかし、これからのWebはサーバサイドレンダ
世のフロントエンドエンジニアにApollo Clientを布教したい - Qiita
こんにちは。いかがコーディングお過ごしでしょうか。 私は今更ながら最近GraphQLで遊び出し、そしてApollo Clientに出会いました。 ワクワクしました。「これは想像以上に既存のフロントエンドの設計・実装を変えるものだぞ！」と感じました。 「Apollo ClientってGraphQLクライアントでしょ？GraphQLエンドポイントない俺には関係ないな。」と思ったそこのあなた、それだけじゃないんですApollo Clientは！！！！！ 本記事では「Apollo Clientとはなんぞや」という話と「なぜ私がApollo Clientを布教したいのか」という点について語ります。実は最初は実装含めたチュートリアルを書いていたのですが長くなり過ぎたため記事を二つに分けました。この記事はどちらかと言うと概念系の話が多めで、片方にApollo Client + Reactのチュートリアル
npm | the state of javascript frameworks | part 3 | backend frameworks
The State of JavaScript Frameworks, 2017 Laurie Voss, co-founder and COO, npm, Inc. January 3rd, 2018 Part 3: Back-End Frameworks The story on the back end is simple: Express is the overwhelmingly dominant solution for back end services written in JavaScript. The next four biggest frameworks are so small relative to Express that it’s hard to even see them. The other clear pattern here is that Expr
JavaScriptからAmazon Cognitoを使うためのまとめ - console.lealog();
最低限な要件だけ使ってみるにしても罠だらけだったのでメモ。 調べてもろくな情報出てこなかったので、業務レベルではまじで誰も使ってないんじゃねーのって気持ちがある。 願わくばもう使いたくない( ˘ω˘) Amazon Cognito is 何 そもそもですが・・。 Amazon Cognitoでできることは、大きく分けて2つです。 ログイン・セッション機能 データの同期機能 AWSのコンソールのCognitoのページUI的にも、 User Pools Federated Identities ってな切り分けになっててそれぞれ対応してる。 まあこのサーバーレスだなんだの時代に、そういうことできるサービスがあることは不思議ではない。 Alternativesという意味では、Firebase Authenticationとかあたり？ JavaScriptのSDKたち そしてjsで使う上で必要であろ
Wait, Pick, Learn, Ignore: Dealing with JavaScript Framework Fatigue
Wait, Pick, Learn, Ignore: Dealing with JavaScript Framework Fatigue I'm mostly a server-side developer, but occasionally I delve into the wild world of client-side programming. Each time I do, I get bombarded with blog posts and tweets and advocates, each hyping their own preferred JavaScript framework. Use Angular, they said. No, do Knockout, others proclaimed. Pssh, React is the way to go, a th
Node学園 20時限目 アウトラインメモ
Node学園 20時限目に参加したきたのメモ。 「eslintの話」 by @mysticatea スライド: ESLint Past and Future - Google スライド ESLint 12-3% ぐらいのルールを書いた JSHintにプラグイン機能が追加するという話はあったけどならなかった ESLintの特徴 ASTベースでプラグインという特性 (以前書いたプラグインの仕組み: ESLint | JavaScript Plugin Architecture) 開発者が貢献するのが簡単 コントリビューションガイド 開発体制 機能に関しては Reviewer以上 バグに関しては Committer 以上が確認してマージ 隔週の金曜日にリリース ESLint 3.0.0 Stage 4に到達した構文 Auto FixはIDEと連携して選択式の適応へ アグレッシブなFixは同時に適
1Password Leaks Your Data
Software Engineer at Microsoft, currently working on Outlook for iOS Seriously. For those of you who don’t know, 1PasswordAnywhere is a feature of 1Password which allows you to access your data without needing their client software. 1Password originally only used the “Agile Keychain” format to store their data (not including when they were OS X keychain only). This format basically stores your dat
OSSのクライアントインストール型プログラム(Atom用パッケージ)でOAuth2をなるべく安全に利用する - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 前の記事の、「配布物にOAuth2で利用するclient_secretを含むことのリスク」 についての続き。 いろいろなケースでも使えるとは思うが、具体的にはAtom用パッケージでGoogleのAPIを利用するためにOAuth2での認証を行う方法になっている。 先日のポストのあと、Twitterでのコメントも合わせて、良く分かってないながらもいろいろ整理してみた。ここらへんが結構わかりやすかった。 → 「RFCとなった「OAuth 2.0」――その要点は？」 まず、公開するプログラムのタイプは2つありそう。 サーバー型のプログ
Isomorphic Architecture を実装してるときの細かいアレコレ
Isomorphic あらため Universal ？ 一時期火がついていた Isomorphic について。各自がプロダクションの事例を作り上げる潜伏期に入ったのか、はたまた本当に一過性で火が消えたのか、コモディティ化を遂げたのか分かりませんが、あまり耳にすることがなくなった印象です。 そんな中ですが先日、Universal JavaScript — Medium が公開され、なるほど Universal ってキモチになったので、タイトルに反して以下は Universal と呼称します。 今回の話題にするのは module レベルではなく Universal な JavaScript architecture のほうです。アーキテクチャのレベルで Universal なコードが役立つ代表的ケースは SPA (Single Page Application) と SSR (Server S
ECMAScript 6 from an Attacker's Perspective - Breaking Frameworks, Sandboxes, and everything else
ECMAScript 6 from an Attacker's Perspective - Breaking Frameworks, Sandboxes, and everything else This document presents a talk by Mario Heiderich on the security implications of ECMAScript 6 (ES6) and its features, highlighting the evolution of JavaScript and its attack surface. It discusses specific ES6 features such as arrow functions, generator functions, template strings, and how they can be
Vorlon.JS
Getting Started Learn everything you need to about Vorlon.js 0.1.0 in this video Install and run the Vorlon.JS server from npm: $ npm i -g vorlon $ vorlon If you are on a mac $ sudo npm i -g vorlon $ sudo vorlon You may receive an error from npm during installation about Python, node-gyp and socket.io. You can ignore this error as it is related to an optional module. Socket.io team is already awar
yahoo/fluxible による SPA + Server Rendering の概観
Single Page Application + Server Rendering yahoo/fluxible を使って、Single Page Application と Server Rendering の良いとこ取りのアーキテクチャを目指す。ある程度の複雑性と引き換えに、双方の利点で双方の欠点を打ち消し合うことができるため、全体的には良好なユーザーインタラクションを期待できる構成。 なぜ Single Page Application なのか 画面遷移時するたびにJavaScript/CSS のパースと評価をしなくて良くなる 画面遷移時のトランジションを柔軟に適用できる 画面遷移をまたがった実装が可能になる（あくまで可能になるだけ） なぜ Server Rendering するのか 初期表示の Critical Rendering Path を短縮できる SEO における保守信仰
MQTTブローカーサービス「sango」を使ってJavaScriptだけでチャットを作ってみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、まろCです。 幼い頃から本が嫌いで、読み始めると数ページで眠くなってたんですが、最近読めるようになりました。なんと、Kindleで読むと眠くならないのです！ もっと言うと、Kindleで行間を空けて、文字を大きくし、1ページで見える文字数をなるべく少なくしたら睡眠魔術が効かなくなってきたのです。 それはさておき、今回は最近話題のMQTTについて、MQTTブローカーサービス「sango」を使ってチャットツールをつくってみたので、そのことを書きたいと思います。実装はフロントのみ！ MQTTとは https://sango.shiguredo.jp/mqtt 一言で言うならば、「あらゆるモノをつなぐ軽量プロトコルで、パブリッシャー（送信者）とサブスクライパー（購読者）の間に位置するMQTTブローカーサーバーを介して、メッセージをやりとりする」といったところ。 ちなみに、Faceboo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Prototype Pollution in Kibana
ChromeのヘッドレスモードをMacOSXで試してみた - Qiita
http://blanketjs.org/
WebJars - Web Libraries in Jars