date-fns provides the most comprehensive yet simple and consistent toolset for manipulating JavaScript dates in a browser & Node.js.
Modern JavaScript Date Utility Library
date-fns provides the most comprehensive yet simple and consistent toolset for manipulating JavaScript dates in a browser & Node.js.
webpackのbundle後のJavaScriptのサイズを減らしている話 | リクルートテクノロジーズ メンバーズブログ
はじめに リクルートテクノロジーズに4月に新卒入社した 辻 健人です．GitHubではmaxmellonで活動しています． 7月より，やりとりも作成もラクになるシフト管理サービス「Airシフト」 のエンハンス開発を担当しています． 以前は，React製SPAのパフォーマンスチューニング実例という内容で記事を書きました． 今回は同じSPAにおいて，いかにwebpackが生成するJavaScriptのバンドルサイズを減らすかについて紹介していきます． webpackが，そもそも何のためのツールか，バンドルする理由などについては割愛させていただきます． そういった話は，こちらの記事 (Webpack の考え方について – mizchi’s blog) がわかりやすいと思います． Airシフトのアーキテクチャ Airシフトは，React-Reduxで開発されており，かつSSRを行っておりコードの大
Goodbye Electron, Hello Desktop PWAs – David Novicki – Medium
Okay maybe I am jumping the gun on this but this is some exciting news to say the least! Chrome v70’s recent announcementA recent Chrome version(v70) has released some exciting support for Desktop Progressive Web Applications on Linux and Windows. Here is Chrome’s current support list. One thing you will immediately notice is that MacOS is missing from the list. Fear not it should be here for Chro
「WebExtensionsとテスト」というお話をしてきました | Folioscope
先日、WebExtensions Meetup #3 が開催され、そこで「WebExtensions とテスト」というお話をしてきました。 この発表では、 WebExtensions のテストの方法と、Vim Vixen が取り組んでいることについてお話しました。 WebExtensions とテスト - Speaker Deck この記事では発表資料をかいつまんで、より詳しく説明してゆきたいとおもいます。 それでははじまりはじまり〜。 はじめに まずは自己紹介。 WebExtensions 歴は 1 年ちょいです。 メインで開発してる WebExtensions は「Vim Vixen」です。 Vim Vixen の開発をスタートしたきっかけは、XUL 製だった Vimperator が使えなくなったからです。 開発を始めて 1 年が経ち、現在はユーザー数も 10,000 を超えるほどに
CarloでNode.jsのツールにUIをもたせる - Qiita
先日、GoogleがCarloというライブラリをリリースしました。 少し気になったので、軽くメモを残しておきます。 Carlo is 何 CarloはChromiumを画面描画エンジンとして動作するNode.js アプリケーションフレームワークです。 Node.js、ChromiumともにV8が動作するため、JavaScriptのみでデスクトップアプリが作れるよ、というわけです。 公式のサンプルとほぼ一緒ですが、次のようにコードを書くと、index.htmlがデスクトップアプリ風に立ち上がります。 const carlo = require('carlo'); (async () => { const app = await carlo.launch(); // html/CSS/JavaScriptを配置しているフォルダを教える app.serveFolder(__dirname); /
Algebraic Effectsとは? 出身は? 使い方は? その特徴とは? 調べてみました! - Qiita
ReactのHooksが実質algebraic effectsなんじゃないかということでalgebraic effectsに関する怪文書が流布して鼻白んでしまう､そんな未来を阻止するため､曲がりなりにもalgebraic effectsを研究している者としてalgebraic effectsについて書こうと思います｡ 当方React全く知らないしJSにも明るくない侍ですが､プログラム片にはJSっぽいシンタックスを使っていこうと思います｡ イントロ Algebraic Effectsとは､Plotkinらによって提唱された､computational effectsを代数的に扱おうという試みである｡それにeffect handlerが後付けされ､現在はalgebraic effects and handlers を略してalgebraic effectsと呼んでいることが多い｡非常に直感的な
Re-ducksパターン：React + Redux のディレクトリ構成ベストプラクティス
Re-ducks というディレクトリ構成のベストプラクティスについてまとめる。Re-ducksパターンを使うことで、React + Redux を用いた開発がよりメンテナンスしやすいものになる。 Ducks パターン 名前からもわかるように、Re-ducks は Ducks というパターンをベースにしている。 erikras/ducks-modular-redux Ducks パターンが解決すること： actionType、action、reducerが散らばっててつらい 結局のところ actionType、action、reducer は密結合なので、ducksパターンではこれら3つを1つのファイルにまとめる。 // widget.js // Actions const LOAD = 'my-app/widgets/LOAD'; const CREATE = 'my-app/widget
破綻しない Vue.js アプリケーション開発のために大切なこと / How to make a robust Vue.js application - Speaker Deck
2018/10/15 に JSLounge の活動として UUUM株式会社様で行った発表のスライドです。
Introduction · Webフロントエンド パフォーマンス改善ハンドブック
Webフロントエンド パフォーマンス改善ハンドブック このパフォーマンス改善ハンドブックでは、ウェブアプリケーションにおけるフロントエンドのパフォーマンス改善について扱っています。 ダウンロード版 埋め込み動画を再生できないなど一部制限がありますが、ダウンロード版を配布しています。 PDF版 EPUB版 MOBI版 目的 このハンドブックでは過去に行った改善の事例を中心に紹介しています。 そのため、現在の最適な解決方法を提案するものではありません。 また、アプリケーションによっても最適な解決方法は異なります。 今回の事例ではViewライブラリにReactを使い映像再生プレイヤーなどある程度複雑な機能を持ったウェブアプリケーションのフロントを扱います。 具体的にはニコニコ生放送（以下「生放送」）で行った事例を中心に書かれています。 開発と平行して行われていたため、React 15から16の間
2018/07/12 に発生したセキュリティ インシデント (eslint-scope@3.7.2) について - Qiita
2018 年 7 月 12 日に、ESLint 開発チームが管理する npm パッケージに悪意あるコードが挿入されるセキュリティ インシデントがありました。 ESLint からのアナウンス: https://eslint.org/blog/2018/07/postmortem-for-malicious-package-publishes npm からのアナウンス: https://status.npmjs.org/incidents/dn7c1fgrr7ng 以下の場合に npm install を実行したユーザーの npm アカウントへのログイン情報 (アクセストークン) が盗まれた恐れがあります (盗まれたアクセストークンはすでに無効化されています)。 日本時間の 18:49 から 19:25 の約 1 時間のあいだに npm install を実行し、eslint-config-e
webpack 4 の optimization.splitChunks の使い方、使い所 〜廃止された CommonsChunkPlugin から移行する〜 - Qiita
はじめに 先日リリースされたwebpack 4でCommonsChunkPluginは廃止されました（CommonsChunkPluginの解説はこちら）。 その代わりとした追加されたoptimization.splitChunksの基本的な使い方、使い所に関しての記事です。 optimization.splitChunksを利用すればサイトパフォーマンスの改善（詳細は後述）ができるため、利用する機会が多い設定（機能）です。 解説に利用しているコードの最終形態はGitHub上にあります。 hira777/webpack-split-chunks-example webpackを理解していることを前提とした記事ですので、基礎知識を習得したい方はwebpack 4入門をご覧ください。 optimization.splitChunksとは 「複数のエントリーポイント間で利用している共通モジュール
Node.js でちょっとしたサーバーサイドやるなら、 Micro が良いかも - Qiita
ZEIT が作っている Micro という Node.js のフレームワークがあり、使いやすそう。 ZEIT は、かの Next.js を作っていて、 Mongoose を作った人や socket.io を作った人が所属しており、とても信頼できる。 ちなみに、 ZEIT は Now という、 Node.js （及び Dockerized されたもの）を動かせる、サーバーレスのサービスもやっている。 ZEIT(時) と Now(今) という世界観が良いですね。 初動が早くて、快適だった。 [追記] 何かに Micro 8 と書いてあって、最初、そういう名前のフレームワークと思ったのですが、実際は 8 はバージョン名で、 Micro のようです。また現行バージョンは9でした。 多分これ https://zeit.co/blog/micro-8 [/追記] Features README の F
webpack@4のmodeとminimize(UglifyJS) - 30歳からのプログラミング
webpackではv4から、modeというオプションが追加された。 それに伴いminimize（コードの圧縮）の設定の仕組みも変わったので、それについても書いていく。 以下のライブラリのバージョンで動作確認している。 webpack@4.1.0 webpack-cli@2.0.10 uglifyjs-webpack-plugin@1.2.2 license-info-webpack-plugin@1.0.0 react@16.2.0 2種類のmode modeは、productionとdevelopmentの2種類。 以下のように、webpackを実行する際に引数として渡すことで、設定できる。 "scripts": { "build": "webpack --mode production", "develop": "webpack --mode development" }, modeを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - sindresorhus/cpy-cli: Copy files
GitHub - GoogleChromeLabs/comlink: Comlink makes WebWorkers enjoyable.
Introduction to Yup Object Validation In React
GitHub - pedronauck/react-adopt: :sunglasses: Compose render props components like a pro
obniz | Make Everything Online
GitHub - domchristie/humps: 🐫 Underscore-to-camelCase converter (and vice versa) for strings and object keys in JavaScript.
GitHub - akka-js/akka.js: Akka, for Scala.js
