Hyperloop Brings React and Ruby Together

Ruby on Rails

Hyperloop is a great approach for Ruby developers who want to use React but aren’t willing to spend a lot of time learning and mastering JavaScript. I have always liked Ruby and a language so I can imagine if I spent several years working in Ruby that I wouldn’t want to have to split my time between writing Ruby on the backend and then JavaScript on the frontend. So while I won’t be using Hyperloop, I think it could be great for Ruby devs. Although, the translation from Ruby to JavaScript could be tricky and/or cause compatibility issues in the future. Looking at the Get Started guide, I do like the elegance of writing Ruby code to implement React components:

class HelloWorld < React::Component::Base
  param :time, type: Time
  render do
    p do
      span { "Hello, " }
      input(type: :text, placeholder: "Your Name Here")
      span { "! It is #{params.time}"}
    end
  end
end

every(1) do
  Element["#example"].render do
    HelloWorld(time: Time.now)
  end
end

They have a bunch of great tutorials and one of the first ones I wanted to look at was how life-cycle methods are implemented. They changed things a bit and went with before_mount, after_mount, after_udpate instead of componentWillMount, componentDidMount and componentDidUpdate. Not exactly sure why they changed the methods.

Again, interesting concept and great for existing Ruby devs.

React v15.4.0 Released

Facebook React

The React team just announced the availability of React 15.4.0 – lots of changes with the major one being the explicit separation of React and React DOM. It should be a seamless change if you’ve been using a recent release of React. There’s also some updates to profiling your app in Chrome Dev Tools. The release notes can be found on GitHub, but here are the highlights:

React

  • React package and browser build no longer “secretly” includes React DOM. (@sebmarkbage in #7164 and #7168)
  • Required PropTypes now fail with specific messages for null and undefined. (@chenglou in #7291)
  • Improved development performance by freezing children instead of copying. (@keyanzhang in #7455)

React DOM

  • Fixed occasional test failures when React DOM is used together with shallow renderer. (@goatslacker in #8097)
  • Added a warning for invalid aria- attributes. (@jessebeach in #7744)
  • Added a warning for using autofocus rather than autoFocus. (@hkal in #7694)
  • Removed an unnecessary warning about polyfilling String.prototype.split. (@nhunzaker in #7629)
  • Clarified the warning about not calling PropTypes manually. (@jedwards1211 in #7777)
  • The unstable batchedUpdates API now passes the wrapped function’s return value through. (@bgnorlov in #7444)
  • Fixed a bug with updating text in IE 8. (@mnpenner in #7832)

React Perf

  • When ReactPerf is started, you can now view the relative time spent in components as a chart in Chrome Timeline. (@gaearon in #7549)

React Test Utils

  • If you call Simulate.click() on a <input disabled onClick={foo} /> then foo will get called whereas it didn’t before. (@nhunzaker in #7642)

React Test Renderer

  • Due to packaging changes, it no longer crashes when imported together with React DOM in the same file. (@sebmarkbage in #7164 and #7168)
  • ReactTestRenderer.create() now accepts {createNodeMock: element => mock} as an optional argument so you can mock refs with snapshot testing. (@Aweary in #7649, #8261)

GoPro Recalls 2,500 Karma Drones

GoPro Karma

Not a great series of updates from GoPro, from missing revenue expectations by 23% and now issuing a recall for 2,500 Karma drones which is GoPro’s newest product which enters the drone space. From the official announcement:

GoPro is committed to providing our customers with great product experiences. To honor this commitment, we have recalled Karma until we resolve a performance issue related to a loss of power during operation. We plan to resume shipment of Karma once the issue is addressed.

It’s a scary thought to have your $800 drone suddenly lose power while in the air and just start crashing to the ground. But another interesting point is that there has only been 2,500 drones sold. I’m curious how many people decided to go with the DJI Mavic instead of the Karma. I was leaning towards the Mavic personally but the price increase was making me a little hesitant. But with this news, I’m definitely a Mavic supporter now.

NodeJS v7.0.0 Released

NodeJS

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.

Leaflet JS for Mobile Friendly Maps

Leaflet

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.

DJI Mavic Pro Now Available for Pre-order $999

DJI just announced their answer to the GoPro Karma and it’s smaller with more features but also costs more. I really like how the Mavic has a vision system that can track people (and animals apparently). Based on the teaser video, I like the compactness of the Mavic and its controller. It’s not pocketable, but it looks like it could fit into an existing bag and not requires a special carrying case like the Karma. I think another big selling point will be DJI’s experience with drones compared to GoPro’s late entry into the crowded market. Take a look at the review from TechCrunch:

I think overall I would pick the Mavic over the Karma. The features, extra compactness and DJI backing make the price increase worth it. I guess this means that my bank account will be $1k lighter in the near future.

React v15.3.2 Released

React

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

React Perf Add-on

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

GoPro Karma Drone Unveiled and only $799

I think everyone has been wondering when GoPro would release a drone so this is definitely not a huge surprise. I will say the collapsible design looks nice and makes it far easier to carry around than other drones. I’m not sure how the front-mounted camera will do compared to the gimbal mounted cameras on the bottom of most drones but I’m sure there will be plenty of footage to compare. I’m also curious about the durability of the drone since GoPro is known for making pretty durable cameras so I’m hoping their drone is also top-notch. The price tag is definitely on the high side – especially considering the $799 doesn’t include a camera (GoPro Hero 3 and Hero 4 models are compatible). But a high price tag might mean this drone is actually a step above the others and it might be worth of my hard-earned money.

Definitely check out the video to see for yourself. And then answer the most important question: buy or wait?

React Router v4.0 Coming Soon

React Router

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 v6.6.0 Released

Node

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.