Optimizing front-end delivery with Webpack 4 06 May 2018 With the latest major Webpack release (version 4.x), we are at a point where you don’t need a config to get started. It is optimized by default (#0CJS!). So plugins that had to be manually added and configured like CommonsChunkPlugin,UglifyjsWebpackPlugin, etc are automatically instantiated by Webpack under the hood which makes life easier!

If you ever inspected your requests to big company's API's in the browser, you might have noticed some weird javascript before the JSON itself: Facebook Gmail Why would they waste few bytes to invalidate this JSON? To protect your data Without those important bytes, it could be possible for any website to access this data. This vulnerability is called JSON hijacking, and allows websites to extract

Fider is built with React and Webpack on the frontend, so the topics below will be mostly useful for teams using same stack, but the concepts can also be applied to other stacks. Table of Contents Webpack Bundle Analyzer Long term caching with content hash The common bundle Code Splitting on route level Loading external dependencies on demand Font Awesome and Tree Shaking Switching from big to sma

Cover image by Fachstelle für Öffentliche Bibliotheken NRW on Flickr. If you're a bit like me you probably think a lot about how to make your software even better. One big point of cause is, to increase the performance TO THE MAX. Today I'll tell you the well kept performance secrets senior JS devs hiding from you. 1. Global variables only Shadowing clutters your metal model of the software and of

tldr; safely access nested objects in JavaScript in a super cool way. JavaScript is amazing, we all know that already. But a few things in JavaScript are really weird and they make us scratch our heads a lot. One of those things is the confrontation with this error when you try to access a nested object, Cannot read property 'foo' of undefined Most of the times when we're working with JavaScript,

My goal for my SaaS gixtra.com (a tool to book and organize concerts) is to delegate as many non-core-business features to external services, so I can focus on the important music business stuff. One milestone to reach this goal is to get rid of doing authentication myself in Devise. Since I find Google’s Firebase offering very appealing, I want to migrate my existing users to Firebase Authenticat

JavaScript Advent Calendar 2011 (Node.js/WebSocketsコース) : ATNDも皆さんのご協力で25日間終わり、無事新しい年が迎えられそうです。参加された方、ご苦労様でした。もしアドカレに穴が空きそうだったら書いてみようと思ってたネタを作っていましたので、アドカレ終了記念の番外編で書いてみます。 ちょっと前のブログになりますが、Node.js Module – exports vs module.exportsな記事が掲載されていました。 Node.js のモジュールを作成する際に使用する exports 変数と module.exports 変数の違いについての記事です。私も以前から「 module や exports って変数はいったい何だろう？」とか、「require()関数って突然どこから現れてくるのだろうか？」など実際その仕組みはどう

事の発端 始まりはこちらのツイートから。 Usecasesレイヤーを充実させていったらVuex Actionsほとんど使わなくなるな笑 — Andy (@andoshin11) 2018年6月15日 それはどういうことだよ・・・ フロントでどう使うんだ・・・？ と疑問に思い、自分なりに検証・実装してみたいと思ったのが事の発端です。 Clean Architectureとは？ まず根本の理解がほぼなかったので調べることにしました。 こことか https://qiita.com/koutalou/items/07a4f9cf51a2d13e4cdc こことか https://blog.tai2.net/the_clean_architecture.html こことか https://qiita.com/Tueno@github/items/705360b357c2a00c9532 こことか h

2006年09月23日01:30 カテゴリLightweight Languages javascript - ページはいつ再描画されるか 大変に有用な考察だが、一つ重要な指摘漏れがある。 IT戦記 - JavaScript を学ぶ際に一番重要なのに、誤解されがちな setTimeout 系の概念 setInterval、setTimeout、イベントによる関数の実行を理解することだと思う ページがいつ再描画されるか、ということである。 未経験者は、document.write()やelement.innerHTML = "foo"のように、ブラウザーに「書き出した」点でそれが直ちに反映されると思うだろう。 ところが、そうではないのである。 実例を見てみよう。以下のscriptを考えてみる。ボタンを押すと、ボタンのラベルが1000から1までカウントダウンした後、元通りになることを意図してい

TypeScript has gotten a lot of traction on the frontend recently with the final release of Angular 2.0. I'm primarily a backend architect and have focused on Java and Groovy for the last several years. However, the promise of a statically-typed language running on Node.js caught my attention. I created this proof of concept to see how far I could push backend enterprise architectural patterns with

5分でわかるかもしれない（わからない）JSエンジンの歴史です

UpdateThis article was published in 2018 and reflects the state of React Native at the end of 2017. When using these articles to make decisions about your business, please use discretion. Any technical points should be revalidated because the maturity and size of the ecosystem was significantly different back then. Any organizational points should also be considered within the context, size, and c

Book more meetings with Mixmax Sales engagement directly inside your inbox Last year, we decided to move all of our JavaScript projects from npm to Yarn. We did so for two primary reasons: yarn install was 20x faster than npm install. npm install was taking upward of 20 minutes in many of our larger projects. Yarn's dependency locking was singificantly more reliable than npm's. Check out last year

パリで発表されていたReact向けプロダクトがあまりにも未来に生きていて興奮したので、紹介させてください。 目次 目次 この記事のゴール 想定読者 はじめに 今回ベースとするソースコード React Nativeは何をするツールか Reactは何をするツールか React DOMとReact Nativeの違い Reactアプリケーションを描画するものたち React DOMの役割 React Nativeの役割 1. ネイティブ処理系の上でJavaScript処理系を動かす 2. Reactを動かす 3. Reactから渡された差分をネイティブViewに適用する React Native DOMはどこがReact Nativeなのか React Native DOMのやばいところ6連発 ReactからはReact Nativeに見えてるのがやばい Objective-C実装をJavaSc

prepack-gentle-intro-1.md Note: When this guide is more complete, the plan is to move it into Prepack documentation. For now I put it out as a gist to gather initial feedback. A Gentle Introduction to Prepack (Part 1) If you're building JavaScript apps, you might already be familiar with some tools that compile JavaScript code to equivalent JavaScript code: Babel lets you use newer JavaScript lang

The npm blog has been discontinued. Updates from the npm team are now published on the GitHub Blog and the GitHub Changelog. Last week, the npmjs.com website received the most ambitious update in its history. We said “cheerio” to the old hapi-and jQuery-based website, and “hello” to a state-of-the-art web application based on Spife and React. Hello, React We decided to replace the old npmjs.com we

Introduction Daniel Clifford gave an excellent talk at Google I/O on tips and tricks to improve JavaScript performance in V8. Daniel encouraged us to "demand faster" - to carefully analyze performance differences between C++ and JavaScript, and write code mindfully of how JavaScript works. A summary of the most important points of Daniel's talk are captured in this article, and we'll also keep thi