Most developers out there know about console.log() and debugger;. console.table() might also be a known command, but most of the time it stops right after there. There are more methods and tricks one can use to debugging webapps. Beyond Console Debugging Tricks →
Category Archives: Elsewhere
ASCII to SVG
A bunch of handy Git aliases
Tim Pettersen, developer at Atlassian (BitBucket & JIRA): Git has a strong commitment to backwards compatibility: many powerful features are hidden behind options rather than exposed as default behaviour. Fortunately Git also supports aliases, so you can create your own commands that do all manner of Git magic. Here’s a selection of the more useful …
State of the Web
How it feels to learn Javascript in 2016
In the same style as the aforementioned “It’s the future!” — A fictional conversation on web development: … JSX? What is JSX? -JSX is just a JavaScript syntax extension that looks pretty much like XML. It’s kind of another way to describe the DOM, think of it as a better HTML. What’s wrong with HTML? …
Functional Animations: What Makes a Good Transition?
Functional animation is subtle animation that has a clear, logical purpose. It reduces cognitive load, prevents change blindness and establish a better recall in spatial relationships. But there is one more thing. Animation brings user interface to life. […] Successful motion design possesses six characteristics. Having built quite a few animations into some (web) interfaces …
Continue reading “Functional Animations: What Makes a Good Transition?”
Spectacle CodeSlide: Present code with style
Present code with style using spectacle. Awesome way to present code, and putting the focus of the reader where it needs to be. It also lets you jump to specific lines even if they’ve already been displayed before (because code tends to jump). import React from 'react'; import { Spectacle, Deck } from 'spectacle'; import …
Continue reading “Spectacle CodeSlide: Present code with style”
Webpack Module Tree Visualizer
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 →
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, …