Visualize and analyze your Webpack bundle to see which modules are taking up space and which might be duplicates. Generate JSON stats, and pass it into the online tool. webpack –json > stats.json You can also use the plugin locally if you want. Webpack Visualizer → Related: Disc – Browserify Module Tree Visualizer →
Tag Archives: javascript
Disc – Browserify Module Tree Visualizer
Disc is a tool for analyzing the module tree of browserify project bundles. It’s especially handy for catching large and/or duplicate modules which might be either bloating up your bundle or slowing down the build process. Build your bundle with the –full-paths flag and then pass that to discify: browserify –full-paths index.js > bundle.js discify …
You Might Not Need Redux
I like this post by Dan Abramov, the author of Redux, on how you might not need Redux: If you’re working on an extensible terminal, a JavaScript debugger, or some kinds of webapps, it might be worth giving Redux a try, or at least considering some of its ideas. However, if you’re just learning React, …
Minify: A JavaScript and CSS Minifier Written in PHP
MatthiasMullie\Minify is a JavaScript and CSS Minifier written in PHP. Usage is straightforward: use MatthiasMullie\Minify; $sourcePath = '/path/to/source/css/file.css'; $minifier = new Minify\CSS($sourcePath); // we can even add another file, they'll then be // joined in 1 output file $sourcePath2 = '/path/to/second/source/css/file.css'; $minifier->add($sourcePath2); // or we can just add plain CSS $css = 'body { color: …
Continue reading “Minify: A JavaScript and CSS Minifier Written in PHP”
React + The Shadow DOM = ReactShadow
By using ReactShadow you have all the benefits of Shadow DOM in React. import ShadowDOM from 'react-shadow'; export default props => { return ( <ShadowDOM include={['css/core/calendar.css', props.theme]}> <h1>Calendar for {props.date}</h1> </ShadowDOM> ); } Installation per npm, of course: npm i react-shadow –save ReactShadow (GitHub) →ReactShadow Demo →
Chrome DevTools Tip: Blackboxing Scripts
The Chrome DevTools have this neat feature where you can “blackbox” JavaScript source files. Upon blackboxing a script the debugger will jump over anything contained in that file when stepping in/out/over code, and not pause on any breakpoints also contained in that file. A typical example would be to blackbox the script of the JS …
Flow – A static type checker for JavaScript
Flow is a static type checker for JavaScript. With it, you can add types to any existing JS code. Without flow: function foo(x, y) { return x.length * y; } With flow: // @flow function foo(x: string, y: number): number { return x.length * y; } When passing in a Number for the value of …
Continue reading “Flow – A static type checker for JavaScript”
Bootstrapping a React project
WebViewBridge.Swift
Like JockeyJS, written in Swift, and with support for WKWebView: A bridge for WebView(UIWebView, WKWebView), using JavaScriptCore, handles communications between native(Swift) and js. Example usage (call native function from JS): // XCode override func viewDidLoad() { // … let webView = WKWebView() let bridge = ZHWebViewBridge.bridge(webview) bridge.registerHandler(“Video.Play”) { (args:[AnyObject]) -> (Bool, [AnyObject]?) in self.player.play() return …
Fun with JavaScript and Emoji
Today Wes Bos tweeted a few fun things one can do with JavaScript and Emoji: It’s possible to spread emoji sequences into their single parts: […’👨👩👧👦’] // [“👨”, “”, “👩”, “”, “👧”, “”, “👦”] Combining Emoji is also possible: [“👨”, “”, “👩”, “”, “👧”].reduce((prev, curr) => prev + curr) // “👨👩👧” And oh, you can …