GitHub - webpack-contrib/i18n-webpack-plugin: Embed localization into your bundleYou signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Writing a JavaScript framework - Sandboxed Code Evaluation - RisingStack Engineering
Join 150K+ monthly readers. In-depth articles on Node.js, Microservices, Kubernetes and DevOps. This is the third chapter of the Writing a JavaScript framework series. In this chapter, I am going to explain the different ways of evaluating code in the browser and the issues they cause. I will also introduce a method, which relies on some new or lesser known JavaScript features. The series is about
Snapshot Testing · Jest
Snapshot tests are a very useful tool whenever you want to make sure your UI does not change unexpectedly. A typical snapshot test case renders a UI component, takes a snapshot, then compares it to a reference snapshot file stored alongside the test. The test will fail if the two snapshots do not match: either the change is unexpected, or the reference snapshot needs to be updated to the new versi
React v16.6.0: lazy, memo and contextType – React Blog
This blog site has been archived. Go to react.dev/blog to see the recent posts. Today we’re releasing React 16.6 with a few new convenient features. A form of PureComponent/shouldComponentUpdate for function components, a way to do code splitting using Suspense and an easier way to consume Context from class components. Check out the full changelog below. React.memo Class components can bail out f
Chromeのブラウザ内（もしくはデスクトップ）操作をJavaScriptで録画する - Qiita
ブラウザ内の操作をビデオに録画したくなったので調べていたら getDisplayMedia という面白そうなものを見つけたので試しに使ってみました。 Chrome Canary M70 でScreen Capture API 利用できるようになった MediaStream.getDisplayMedia() 2018/10/23時点の Chrome 70.0.3538.67 ではまだ使えないみたいです。使うためには Canary で試してください。他のブラウザの対応としては Firefox / Edge が対応しているようです。ただし Firefox は呼び出し方が違いました。 参考: WebRTC API コトハジメ なおヘッドレスブラウザで録画する方法はこちら ヘッドレスブラウザ Chrome + Chromy で操作した内容を録画する サンプルコード Canary の DevTool
Vue.js v-modelなComponent - ワイのメモ帳なんやで...
Vue.jsを使っていると 「子に渡したpropsの値を変更したら親側の値も変更されるようにしたい！」 というシーンに割とよく直面する。 propsの値はそのままv-modelでは使用できないという制約もあり、回避策の知識がないと割と困ってしまうものである。(公式に書いてあるけどというツッコミは無しな！) なので今回は子のComponentで変更された値を親に反映する方法を紹介します。 実行結果だけ知りたい人はSandboxが一番下にあるのでスクロールしてね☆ modelプロパティを指定する Vue.js 2.2.0 からmodelプロパティが追加された。 詳しくは公式にかかれているが、正直わかりにくかったのでここでも解説する。 子のComponentで以下の宣言をする export default { model: { prop: 'propData', event: 'input' }
この DOM がすごい2018: worker-dom - mizchi's blog
おもしろライブラリを見つけて興奮しているので紹介します。 UIスレッド(メインスレッド)からユーザー操作をブロックしてしまうような重い処理を逃がす off-the-main-thread を実践しようとなると、実際に問題になるのは、ほとんどの処理は何らかの形で DOM を参照し、それに連なるものが処理時間の殆どを占めている、ということです。 off-the-main-thread の時代 - mizchi's blog DOM に触れない WebWorker でビジネスロジックを処理するのは、ある種の健全性(Universal/Isomorphic)を手に入れるための「縛りプレイ」として有用ですが、現状は実用上のメリットが殆どありません。 例えば react / redux の reducer で、ビジネスロジックを worker 側に移して処理できるぐらいアイソモーフィックに(DOMに触
Introducing Create-React-App Version 2.0 – Bits and Pieces
what you see when you run npm startCreate React App is a tool built by developers at Facebook to help you build React applications. It saves you from time-consuming setup and configuration. You simply run one command and create react app sets up the tools you need to start your React project — Guil Hernandez Create-React-App which is arguably one of the most popular boilerplates of all times with
JavaScript でカスタム例外をしっかり使う
JavaScript には、そこかしこに罠がありますが、その中の1つはエラーハンドリングだと思います。 今回はエラーハンドリングにおいて、あまり活用されていない気がする、カスタム例外をしっかり使ってみたいと思います。 TL;DR necojackarc/extensible-custom-error を使うと、エラーオブジェクトも引数に取れる便利なカスタム例外が簡単に定義できるよ！ const ExtensibleCustomError = require('extensible-custom-error'); class MyError extends ExtensibleCustomError {} new MyError('message'); // メッセージ new MyError(error); // エラーオブジェクト new MyError('message', error
Hyperappを理解する - Qiita
1. はじめに Hyperappでタスク管理アプリの開発をし、 ある程度理解する事ができたので、思いのままに語ります。 1-1. I love Hyperapp React,Reduxを愛しState管理以外は考えられない私。 2018年、Hyperappと出会いました。 なんというシンプルさでしょう。 まさに、この1KBのソースコードに出会うため 血と汗を流しながらシステムエンジニアを続けてきたと言っても過言ではありません。 React,Reduxの公式ページを頑張って読んでいた頃が懐かしい。 今はHyperappの1KBのソースを何度も読み返すのです。 是非Hyperappについて語り合いましょう。 1-2. 基本的な考え方を知っておく State管理が基本です。 先ず、State管理によるDOM更新を考えた天才に、改めて拍手を送りたい👏 おかげで本当に楽しくコーディングが出来るよう
GitHub - ktsn/vuex-type-helper: Type level helper to ensure type safety in Vuex
import * as Vuex from 'vuex' import { DefineGetters, DefineMutations, DefineActions, Dispatcher, Committer } from 'vuex-type-helper' /** * Declare module types */ export interface CounterState { count: number } export interface CounterGetters { // getterName: returnType half: number } export interface CounterMutations { // mutationName: mutationPayloadType inc: { amount: number } reset: void // ha
GraphQL with Next.js and Apollo | nec.is
GraphQL with Next.js and Apollo I’ve discovered Next.js few months ago, as a solution for Server-side Rendered React, and I’m playing with it since, integrating with various solutions for i18n, state management, routing etc. Some weeks ago I’ve tried it out with GraphQL, building a small page with these tools. This and the following posts are the summary I learned about some performance-tuning tec
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - GoogleChromeLabs/carlo: Web rendering surface for Node applications
GitHub - givanz/VvvebJs: Drag and drop website builder javascript library.
GitHub - GoogleChromeLabs/comlink: Comlink makes WebWorkers enjoyable.
GitHub - saltyshiomix/nextron: ⚡ Electron + Next.js ⚡
GitHub - ampproject/worker-dom: The same DOM API and Frameworks you know, but in a Web Worker.
GitHub - almin/ddd-base: DDD base class library for JavaScript application.
「Vueコンサルが教えたくない７つの真実」を勉強してみた - Qiita
VueToolbox
