Category: Code Monkeys

NodeJS v7.0.0 has been released and we have finally moved on from the v6. I don’t think there are a ton of “major” changes here but I’m hoping v7 will become the defacto LTS version going forward. The updates for V8 are also promising and hopefully have some performance improvements. Here are the notable changes:

Buffer

• Passing invalid input to Buffer.byteLength will now throw an error #8946.
• Calling Buffer without new is now deprecated and will emit a process warning #8169.
• Passing a negative number to allocUnsafe will now throw an error #7079.

Child Process

• The fork and execFile methods now have stronger argument validation #7399.

Cluster

• The worker.suicide method is deprecated and will emit a process warning #3747.

Deps

• V8 has been updated to 5.4.500.36 #8317, #8852, #9253.
• NODE_MODULE_VERSION has been updated to 51 #8808.

File System

• A process warning is emitted if a callback is not passed to async file system methods #7897.

Intl

• Intl.v8BreakIterator constructor has been deprecated and will emit a process warning #8908.

Promises

• Unhandled Promise rejections have been deprecated and will emit a process warning #8217.

Punycode

• The punycode module has been deprecated #7941.

URL

• An Experimental WHATWG URL Parser has been introduced #7448.

You can take a look at what the HackerNews community is saying about the latest release here.

I’m a little behind on blogging, so this is a little old but it’s definitely worth mentioning again. If you’re building web apps and need map capabilities, you should definitely take a look at Leaflet. Leaflet is now at v1 so that’s a great sign for anyone using Leaflet. I also like how the first item on the changelog is that they have made major performance improvements. It’s a great sign from the team when that’s the first thing the highlight. The full list of changes in this release are:

• Huge performance improvements in all aspects of the library and vector layers in particular.
• New L.Tooltip class for all your dynamic labeling needs.
• Flyover animations (zooming and panning in a curve with map.flyTo).
• Fractional zoom level support (map.setZoom(12.34)).
• Much better tile loading algorithm with less flickering.
• Custom pane management (including multiple vector layer panes and interleaving vectors and tile layers).
• Better support for non-standard projections.
• More accessibility features.
• Vastly improved documentation.
• Tons of bugfixes and stability improvements.

The update also discusses a new release cycle to help improve the speed of releases. After paying down some major technical debt, it looks like the team will start to release more updates frequently. And it’s great to see that they’re already releasing more often. Leaflet v1.0.1 has already gone out.

And there are some other initiatives they are going to pursue:

• A cleaner, more stable plugin ecosystem. We want to make sure that all popular plugins work well with the latest release and are maintained. We’ll revise our plugin list page, tighten our review process, take more key plugins under the wing of the Leaflet organization on GitHub and spend more time working on them.
• Tutorials and examples to cover more advanced features of the library, its popular plugins, and integrations with libraries like D3 and React/Angular.
• Explore switching to a more modern JavaScript flavor and module system (ES6, Babel, Rollup).
• Map rotation support.

Another day and another release from the React team. React v15.3.2 looks mostly to be performance improvements and bug fixes. This is pretty similar to the v15.3.1 release. Nothing game-changing but I do appreciate somewhat frequent updates (about a month apart). Full list of updates/fixes are:

React

• Remove plain object warning from React.createElement & React.cloneElement. (@spudly in#7724)

React DOM

• Add playsInline to supported HTML attributes. (@reaperhulk in #7519)
• Add as to supported HTML attributes. (@kevinslin in #7582)
• Improve DOM nesting validation warning about whitespace. (@spicyj in #7515)
• Avoid “Member not found” exception in IE10 when calling preventDefault() in Synthetic Events. (@g-palmer in #7411)
• Fix memory leak in onSelect implementation. (@AgtLucas in #7533)
• Improve robustness of document.documentMode checks to handle Google Tag Manager. (@SchleyB in #7594)
• Add more cases to controlled inputs warning. (@marcin-mazurek in #7544)
• Handle case of popup blockers overriding document.createEvent. (@Andarist in #7621)
• Fix issue with dangerouslySetInnerHTML and SVG in Internet Explorer. (@zpao in #7618)
• Improve handling of Japanese IME on Internet Explorer. (@msmania in #7107)

React Test Renderer

• Support error boundaries. (@millermedeiros in #7558, #7569, #7619)
• Skip null ref warning. (@Aweary in #7658)

React Perf Add-on

• Ensure lifecycle timers are stopped on errors. (@gaearon in #7548)

So there’s another major breaking version of React Router coming. I thought I was really behind because I was still running v2.0 – what happened to v3.0? Then I read this on the v4.0 RC release notes:

Yes, there will still be a 3.0 release (soon!). It is simply v2.0 without any deprecation warnings. We intend to keep supporting the 3.x branch indefinitely (published separately on npm to aid in migration), although there will likely not be any future major versions based on that code. 4.0 is the future, but we won’t leave you hanging if you want to stick with 2.x/3.x.

So technically I could stick with v2.0 and eventually upgrade to v3.0 without having to change too much. But of course, that line about v4.0 being the future gets my FOMO to rise and I figure I should look into v4.0. And what do I learn about v4.0? The following is a good start to understand the why behind the change:

Why the huge change? (AGAIN?!)

tl;dr Declarative Composability.

We’ve never been this excited about React Router. Like you, we’ve learned a lot about React since we first picked it up. We built a Router the best we knew how along the way. What we’ve learned most is that we love React because of its declarative composability.

So what should we do? Not sure yet, but I sure am conflicted. Luckily, everything in progress is going to remain on v2.0 and I will wait to see where things land. Got to love how fast things move and break and get rebuilt and get broken again. I wouldn’t want to be part of any other community – this reflects my inability to focus perfectly and I feel right at home.

Node just released v6.6.0 and you can upgrade from v6.5.0. Updates are becoming pretty frequent since v6.5.0 was just released Aug 29th so less than a month ago. No major breaking changes and no major bug fixes – looks like mostly enhancements and additional functionality. Notable changes are:

• crypto: Added crypto.timingSafeEqual(). (not-an-aardvark) #8304
• events: Made the “max event listeners” memory leak warning more accessible. (Anna Henningsen) #8298
• promises: Unhandled rejections now emit a process warning after the first tick. (Benjamin Gruenbaum) #8223
• repl: Added auto alignment for .editor mode. (Prince J Wesley) #8241
• util: Some functionality has been added to util.inspect():
  • Returning this from a custom inspect function now works. (Anna Henningsen) #8174
  • Added support for Symbol-based custom inspection methods. (Anna Henningsen) #8174

I’m happy to see the updates coming out and hopefully everyone has already upgraded from v4 to v6 so we can start focusing on v6 going forward. Go start upgrading.

Angular 2.0 is out of beta and is officially “final” – and yes, I didn’t know what “final” meant either. So from official post, here is what final means:

What does “final” mean? Stability that’s been validated across a wide range of use cases, and a framework that’s been optimized for developer productivity, small payload size, and performance. With ahead-of-time compilation and built-in lazy-loading, we’ve made sure that you can deploy the fastest, smallest applications across the browser, desktop, and mobile environments. This release also represents huge improvements to developer productivity with the Angular CLI and styleguide.

I haven’t looked at Angular in a while. The last time I built anything with Angular, 2.0 wasn’t even announced. The performance improvements look good (can’t wait until someone does some benchmarking). And the components look interesting, similar to React actually. Guess I have something else to add to my to-do list.

If you’re reading this, you’re probably trying to get WordPress running on Dokku. Hopefully you have already figured out how to setup/connect MySQL. Once you have that, your WordPress site should be accessible (over http). But then you’ll probably want to have your site accessible over https because Google is now ranking secure sites higher and even Google Chrome is warning if sites aren’t transmitting over SSL. So, you probably found the Let’s Encrypt plugin for Dokku and installed an SSL certificate. And this is probably where you hit and problem that led to a Google search and led you here. Your site will automatically redirect from http://whatever.com to https://whatever.com but you’ll get mixed content warning because the site is trying to load external assets over http instead of https. You probably also get stuck in a infinite redirect loop (ERR_TOO_MANY_REDIRECTS) when trying to login to the admin panel. I did a lot of researching and couldn’t find a solution but eventually found someone who had figured out what was causing this problem. The easy explanation is that WordPress didn’t realize it was being requested over SSL and therefore didn’t load its assets over SSL. To fix this, you just need to add the following to your wp-config.php file:

if (isset($_SERVER['HTTP_X_FORWARDED_PROTO']) && $_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https') {
    $_SERVER['HTTPS'] = 'on';
}

This basically detects if the request is going over SSL and sets the HTTPS server variable to on so that WordPress will treat the request as a secure request. This is due to the fact that we’re using nginx which was causing WordPress to think the request was a non-secure request. I hope this helps someone. Happy hacking.

I’m working on a Node/React project and I’m using the Google Spreadsheet API and hit the following error:

Error: HTTP error 400 (Bad Request) - Invalid query parameter value for grid_id.

There was nothing obvious wrong with my call:

doc.addRow(0, newObject, function(err) {});

After a little investigation, I found out that the grid_id actually represents the id of the worksheet/tab. And I also found documentation that says the index begins at “1” instead of “0”. Not a huge problem (although, unintuitive in my opinion) and relatively quick to investigate and fix. Hope this helps someone else in the future.

Just came across this announcement from the Lyft development team and was pretty impressed (although I wish it was for iOS instead of Android). I really like the idea of companies providing SDKs like this where as an app developer, I can actually leverage this SDK to provide useful functionality to my users, monetize my users and help a startup I actually respect grow their users and drive business. And the company gets to benefit by extending their reach through app developers which is a win/win. This is actually a really genius idea in my opinion. I could imagine other blank-as-a-service startups provide similar SDKs so that more app developers can help grow their user base. It’s probably just ridiculous enough to work but I was thinking of a Pokemon Go app that would identify rare pokemon and determine if you could get there via Lyft in time before it vanished. If you build it, make sure to give me some credit. Okay, not sure if I’ll actually end up using this (at least I’ll wait until there’s an iOS SDK) but if I do, I would probably build a React Native wrapper around it (or if the Lyft platform team is reading this, go ahead and just build a React Native plugin for everyone). Happy hacking.

I’ve used React Storybook but haven’t been following the development closely so I was pleasantly surprised to hear about the new release. Storybook 2 looks impressive. I appreciate the backwards compatibility and updated documentation. If you are building React apps and have a lot of components that you want to re-use, this is definitely something you’ll want to use. The documentation is great and looks like it has already been updated for v2.