【SSRも】Fleur − 新しいFluxフレームワーク【イケる】 - pixiv inside
みなさんこんにちは！ VRoid Hubでフロントエンドエンジニアをしている花倉ミツカ (a.k.a. ラグ)です 🙌 今回のpixiv insideはちょっとだけお仕事から離れて(ガチ)アイスブレイクです。私が1年ほど開発しているFluxフレームワーク、Fleur (フルール, @fleur/fleur)について、その設計や使い方についてご紹介させていただきます！ 目次 どういうフレームワーク？ 実際の使い方 質問 まとめ どういうフレームワーク？ pixiv Sketchで採用されている Fluxible というFluxフレームワークを参考に、「書きやすさ」と「現代的な機能の採用」の二点を重視してTypeScriptでフルスクラッチしました。（Fluxibleは私が知ってる中で一番"整っている"フレームワークだと思っています♨） Fleurの大規模なプロダクションでの採用実績はまだあ
Flutter Webの現状調査 - ntaoo blog
Web特有の事情はどう解決するのかに興味があって内部構造などを調べていた。 開発が進むにつれて実装はどんどん進化して問題解決されていくだろうし、現段階のこの情報の正確性も保証しない。個人のメモを公開しているだけなので鵜呑みにはしないようにしてほしい。 あと、Preview版が公開された後にFAQが追加されているので読んでおくほうがいい。 https://github.com/flutter/flutter_web/blob/master/docs/faq.md ニュース まとめ https://medium.com/flutter/a-roundup-of-flutter-news-at-google-i-o-453bb3249981 Flutter Webの開発体験とPreview版段階の技術的制約についての解説 https://medium.com/flutter-nyc/under-
Angular 4アプリケーションをAngular 6に移行する | 株式会社カブク
初めまして！ カブクでアルバイトをしている長瀬です。普段はWebフロントエンド関連の業務をしています。 先日、Angular 4.3.6で動いていたアプリケーションを6.1.0へ移行した際に得られた知見を共有します。Angular/Angular CLI 6への移行に関する日本語記事は、すでに以下をはじめとするすばらしい記事が世に出ています（私も参考にさせていただきました）。 Angular CLI v1.7からv6.0へのマイグレーションについて (for v6.0.0-rc.2) lacoさんの記事 angular-cliの移行作業がまとまっている Angular6に移行メモ 5.2 -> 6.0の移行 ngx-bootstrapなど、外部パッケージ関連の移行作業についても触れられている この記事では、上記の記事で紹介されている内容（移行手順や移行により改善されたこと）に加えて、 –
[Web フロントエンド] 状態更新ロジックをフレームワークから独立させる - 株式会社カブク
はじめに はじめまして。 null です。最近の悩みは 2 歳半の息子が言うことを聞いてくださらないことです。 2 歳児もそうなのですが、 ソフトウェアフレームワークに振り回されてるって感じること、稀によくありませんか？？ ある程度の学習コストがかかるのは当然としても、冗長な書き方を要求されるわ、かゆいところに手が届かないわ、実データ投入したらパフォーマンス問題だらけだわ、バージョンアップしたら動かなくなるわで、あぁ私いま振り回されてるなぁ、みたいな。 「じゃあ使わなければいい」「じゃあ自分で作ればいい」という話ではなく、「必要以上には依存しない方が無難だよね」「フレームワークの外へ切り出せるところは切り出してみよう」という話をします。 続きを 3 行で 状態更新ロジックってフレームワーク非依存にできそうだよね でもフレームワークによって状態をイミュータブル（状態更新=状態オブジェクト生成
![[Web フロントエンド] 状態更新ロジックをフレームワークから独立させる - 株式会社カブク](https://cdn-ak-scissors.b.st-hatena.com/image/square/897d9c48832ba7e3a66c89a7941ffe151d3d8705/height=288;version=1;width=512/https%3A%2F%2Fwww.kabuku.co.jp%2Fwp%2Fwp-content%2Fuploads%2F2019%2F05%2Fcut20_bunsin-1200x801.jpg)
husky + lint-staged で品質を保つ - ナデズダ・ゴボリン🖥
リントツールをインストールしても使わなければ意味がない。 というわけで人的なリント忘れを未然に防ぐためにも、huskey と lint-staged と 各種リントツールを組み合わせてコミット前に自動的にリントが行われる環境を作りましょう。リントエラー時にコミットを弾くことによって git 上のコードの品質を保つことができます。 環境 husky 1.1.0 lint-staged 7.3.0 git hooks の設定を package.json などからできるようにしてくれるツールです。 生の git hooks だとチーム内で共有とかがしにくいですが、husky を使って設定を package.json などに書けば簡単に共有できます。 pre-commit フックを使うことが多いと思いますが、クライアントサイドのフックであればすべてサポートしているみたいです。 ステージングしたファ
Unification of the middle scale services by Nuxt.js
「Nuxt.jsで中規模サービスを統合した話」 InsideFrontend 2019のA-3で発表した内容です。
Domain Suspension
ICANN, the Internet Corporation for Assigned Names and Numbers, requires us to ask you as a Registrant of a domain name to verify your contact information for this domain with your provider. As a Registrant of a domain name, a new domain registration or changes to the first name, last name, contact address or email address of an existing domain name, requires verification of the information within
Web標準でつくるガラケーサイト
このスライドは令和元年5 月18日に東京で開催された Inside Frontend #3で発表した資料に簡単な説明を追加したものです。 フィーチャーフォンからデスクトップまですべてのデバイスで動くマインスイーパークローン(proxx.app)を作った経緯と開発の過程を発表しました。 な…
WebWorkerをenjoyableにするComlinkとは何者か - Qiita
先日、Chrome Tech Talk Night #11に参加してきました。 その際にGoogleのWeb Developer Relations LeadであるPaul Kinlanが IPC on the web with Comlink という発表をされていたのですが、Comlinkやその前提知識となるWebWorkerについて知識がなかったので発表の内容がほとんど理解できませんでした（発表の英語がかなり早口だったのも原因だったと思うけど）。これではせっかく来日されたPaulに申し訳ない気がします。というわけで、この記事ではComlinkやその基盤技術であるWebWorkerについてまとめてみました。 Comlink ComlinkとはWebWorkerをenjoyableにするライブラリのことです。enjoyableとはなんぞやという気持ちになってきますが、公式がそう言っているの
やっていこう。PWA
「PWA Night vol.4 ～PWAのミライや活用方法をみんなで考えよう～」にて登壇した発表資料です。 https://pwanight.connpass.com/event/128434
コワクナイヨ TypeScript - static typing reloaded -
WebXRでポートフォリオを作ろう/Let's make your portfolio with WebXR!
Shape Detection API + PWAでブラウザからそのまま使えるバーコードリーダーアプリを作ってみる - Qiita
ラクス Advent Calendar 2018 繋ぎの3番バッターです。 今回はChrome 70から実験的に使えるようになっているShape Detection APIについてまとめてみます。使ってみると意外と実用的だったのでPWA化してブラウザだけでスマホアプリ相当のことが実現できそうなことも検証してみました。 Shape Detection APIとは Webの新しい技術の普及を推進する団体の WICG が仕様策定を進めているJavaScriptのAPIです。 Accelerated Shape Detection in Images まだEditor's Draft（草案レベル）ですが以下の3つの事ができます。 Face Detection（顔検出） Barcode Detection（バーコードスキャン） Text Detection（テキスト認識） Shape Detecti
日経がマルチページ PWA で新たな品質とパフォーマンスを実現 | web.dev
140 年以上の歴史を持つ日経は、日本有数の信頼できるメディア企業の一つです。印刷新聞に加えて、デジタル プロパティへの月間アクセス数は 4 億 5,000 万件を超えています。より優れたユーザー エクスペリエンスを提供してウェブでのビジネスを加速させるため、日経新聞は 2017 年 11 月にプログレッシブ ウェブアプリ（PWA）https://r.nikkei.com をリリースしました。同社は新しいプラットフォームで 素晴らしい成果を上げています パフォーマンスの向上 - 速度インデックスが 2 倍向上 - インタラクティブまでの時間が 14 秒短縮 - プリフェッチにより読み込みが 75% 高速化 ビジネスへの影響 - オーガニック トラフィックが 2.3 倍 - コンバージョン（サブスクリプション）が 58% 増加 - 1 日のアクティブ ユーザーが 49% 増加 - セッション
正真正銘のReactだけの不純物なしでReact入門
Reactのチュートリアル、たくさんありますよね。どれも質が高く、どこから手をつければいいかわからなくなっちゃいます。 ですがやはり巷のチュートリアルには面倒な問題もあります。今回は面倒ごとを全部すっ飛ばしてReactでのウェブアプリ作りに入門してみましょう。 Reactを始めるには、まずあれとこれとそれとどれと…… Reactやるには、まずNode.js入れてbabel入れてreact入れてreact-router入れて、ついでにredux入れてreact-redux入れて、redux-saga入れて…… Reactめんどくせえ！！！ってのが正直なところだと思います。はい、私もそう思います。ただ、まあ、色々必要なのも事実なので……。 それでもやっぱり「ReactやるならReactだけやりたい。他はどうでもいい」という気持ちは簡単に捨てられるものではありません。そこで今回はそういう面倒全部
よくわからないJavaScriptが綺麗にされたらCard Stealerだった件 | リクルート テックブログ
こんにちは、Recruit-CSIRTのきっかわです。 「ウィルスオタクの若手エース」と呼ばれるようになったから、というわけではないでしょうが（笑）、このたび、話にはよく聞くが見かけたことのなかった「クレジットカード情報を盗むJavscript」を見つけたので、そのマルウェアと周辺の攻撃について情報を共有します。みなさんにとって本ブログが有益な情報になれば幸いです。 忙しい方へ 今回発見されたJavaScriptの概要 クレジットカードのチェックディジットの計算とクレジットカード番号の構成をチェックする チェックが通ると、外部サイトへ入力情報を全て送信する Javascriptコードの仕込まれ方 Webサイトのjsファイルを改ざんして動作 元のサイトの動きに対して、見た目上の動きは変わらない IOC https://ww1-filecloud[.]com/img 攻撃の流れ 今回観測した攻
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
dubzzz/fast-check: Property based testing framework for JavaScript (like QuickCheck) written in TypeScript
GitHub - GoogleChromeLabs/proxx: A game of proximity
FOLIOの画像回帰テストの裏側 – Yosuke Kurami – Medium
GitHub - cure53/DOMPurify: DOMPurify - a DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML, MathML and SVG. DOMPurify works with a secure default, but offers a lot of configurability and hooks. Demo:
2019年までに見直しておきたい
CSS・JavaScriptの手法 - Speaker Deck
