Back when Google announced that Stadia was coming to an end, one of the big questions everyone had was whether the controllers would just end up filling up a landfill somewhere. Luckily, Google has shared that there’s a way to unlock the controllers so they’ll work as standard bluetooth controllers. The process is pretty straightforward and just needs a computer with Chrome and a USB cable. And voila, you can now use your controller with any bluetooth device you want. Definitely better than a landfill full of Stadia controllers.
Category: Code Monkeys
Testing the waters with Open Source
I have had a personal to-do for years to get more involved in open source projects. I literally have a doc with links to projects, tools to find good projects and bugs and even articles on do’s and dont’s when getting involved in a new project. But after years of trying, I have made zero contributions. So when GitHub announced they were going to help make it easier to find issues and projects to contribute to, I decided it’s time to complete this long-lasting to-do. And what better way to keep me accountable than to document my journey and share my experience with everyone. And to start, I want to share a few resources that I found extremely helpful:
First Timers Only
One of the top results when you search for contributing to open source. A great walk-through and some really good practical examples of how to find projects/issues to contribute to.
Good First Issue
A tool that helps you find (surprisingly) good first issues. Repo owners can tag issues with ‘good first issue’ which will be broadcast on Twitter via the @goodfirstissue handle.
And all of this assumes you’re already familiar with GitHub and git and how to create branches, PRs and merge things. On the other hand, if you don’t, there’s a really good walk-through available on GitHub called first-contributions. It’s very detailed and has lots of screenshots and has been localized in over 50 languages.
Okay, this is just the start, so tag along and hopefully you’ll learn something and be inspired to contribute as well.
Vue.js and VuePress – Like React if React was built right now
So I’ve heard about Vue.js for quite some time, but never got a chance to try it out. That has all changed and I can say I’m a big fan of Vue.js now. Simply put, Vue.js is a well-designed component framework that makes creating interactive applications really intuitive. And as a fan of React, I can also say that the setup and ease of getting started with Vue.js is a breath of fresh air compared to the complex eco-system of React these days. A lot of the syntax and conventions used by Vue.js are similar to React and took very little effort to transition from one to the other. For example, single-file components are different in Vue.js but basically the same concept as a React component, life-cycle methods are named differently but work the same way, both have props but with different syntax on how to specify them and the list goes on. I’m impressed by the ease of getting started with Vue.js and I’ve asked around and a number of teams I know are starting to work with Vue.js so its adoption is definitely growing. Of course, there’s the standard complaints of having to learn yet another framework and considering how popular React is, why should anyone adopt a new framework with fewer experienced developers. My response is that technology is always changing and sometimes there are new technologies that are great and that will replace older technologies and sometimes there are new technologies that are great that won’t replace older technologies. And no matter what, I got to learn something new and it might become the next big things but regardless, I got a new perspective on how to build applications and that makes me more knowledgable that I was previously.
I didn’t talk a lot about VuePress, so I’ll probably save that for another blog post. I will say that I really like the idea of VuePress for building static websites but still having the flexibility of building Vue components and being able to use them throughout the site (I’ll always be a fan or DRY coding). And as with every new technology I stumble upon, I started a new site with it. If you’re interested, check out www.dimelomejor.com which is completely built with Vue.js and VuePress. It’s also completely in Spanish, so this was a great opportunity for me to improve my Spanish as well. So stay tuned for my next blog post and I’ll talk more about my experience with VuePress.
CoffeeScript 2.0 Released
CoffeeScript just made v2.0 available and there’s a lot included in this release that has been in development since the beginning of 2017. I think the best way to sum of the changes is the following from the announcement:
This new release of the CoffeeScript language and compiler aims to bring CoffeeScript into the modern JavaScript era, closing gaps in compatibility with JavaScript while preserving the clean syntax that is CoffeeScript’s hallmark.
I think support for the following is a nice addition, especially since most devs have been using them for a while now in vanilla JS:
- Modules:
import
/export
- Classes:
class Animal
- Async functions:
await someFunction()
- Bound/arrow functions:
=>
- Function default parameters:
(options = {}) ->
- Function splat/rest parameters:
(items...) ->
- Destructuring, for both arrays and objects:
[first, second] = items
,{length} = items
- Object rest/spread properties:
{options..., force: yes}
,{force, otherOptions...} = options
- Interpolated strings/template literals (JS backticked strings):
"Hello, #{user}!"
- Tagged template literals:
html"<strong>coffee</strong>"
- JavaScript’s
for…of
is now available as CoffeeScript’sfor…from
(we already had afor…of
):for n from generatorFunction()
Release notes can be found here and the official release on GitHub can be found here.
Automattic and React Break Up: WordPress.com Remains Only Child
Matt Mullenweg wrote a blog post explaining Automattic’s decision to halt development on their Gutenberg project that was meant to integrate React into WordPress. The main issue at hand is Facebook’s patent clause that is included with React and has been added to the Apache Software Foundation’s (ASF) list of disallowed licenses. From the ASF:
The Facebook BSD+Patents license includes a specification of a PATENTS file that passes along risk to downstream consumers of our software imbalanced in favor of the licensor, not the licensee, thereby violating our Apache legal policy of being a universal donor. The terms of Facebook BSD+Patents license are not a subset of those found in the ALv2, and they cannot be sublicensed as ALv2.
This is a shame for multiple reasons and I’m not completely faulting Facebook but this does ruin the spirit of open source when the decision to avoid a certain open source library isn’t driven by the quality/support of a library and is driven by legalese and potential lawsuits in the future. Ultimately, this doesn’t prevent me from continuing to use React (I’ll be amazed if anything I build gets me sued/allows me to sue someone) but I’m sure some organizations will now have to weigh the risks. I feel like everyone has a similar goal, so I’m hopeful that after some time, lots of meetings with lawyers, everyone will agree to something that matches the spirit of open source.
Yarn 1.0 Released
The Facebook team has released Yarn 1.0 which is pretty impressive considering it was initially launched 11 months ago. The stats are pretty impressive with 175K projects on GitHub using Yarn. There’s also some new features with Yarn 1.0 such as Workspaces, auto-merging of lockfiles, selective version resolutions and a bunch of other fixes and improvements. Also happy to see in the “What’s next?” section a focus on improving the package release process, package security and committing to following semver.
React Native v0.40.0 Released
This is the first release with the new monthly cadence, so 0.40
is known as December 2016
. The next version will be 0.41 - January 2017
, and will be released at the end of the month.
Breaking Changes
iOS native headers moved
This change affects all native modules and application code on iOS that refer to react native
.h
files
After e1577df, Native code on iOS must refer to headers out of the react namespace. Previously the following would work:
#import "RCTUtils.h"
But now all headers have been moved:
#import <React/RCTUtils.h>
This means that all iOS native libraries need a major version bump for RN 0.40. We attempt to minimize changes of this magnitude, and we apologize for any inconvenience caused.
require(‘image!…’) no longer supported
Support for require('image!…')
, which has been deprecated for a long time, is now removed. If you are still loading images that way in your apps, make sure to check the documentation for alternatives.
getTransformModuleOptions is removed
If you were having custom rn-cli.config.js
in your app and for some reason, using getTransformModuleOptions
, make sure to check @davidaurelio commit ca58e0a for details on the changes.
Android
Bugfixes
- Fix WebView crash for links of unknown schemes (35e75c8) – @rigdern
- Fix Overlay for Marshmallow 23+ (e335ca0) – @jpshelley
- Stop silently failing for requires on Android (63eb4df) – @javache
- Fix SamplingProfiler and HeapCapture for apps that lazy load react modules (d919eb7)
- Call handleUpdateLayout even if the content didn’t change (fb23000) – @Kerumen
New features and enhancements
- Add ability to specify main Activity in run-android (9fb520e) – @grabbou
- Add disableExtractUI prop to TextInput on Android (1b870d2) – @rigdern
- Add DatePicker mode configurations (eaccd7e) – @pandiaraj44
- Enable apps to provide a custom configuration to Fresco (8b199a7) – @rigdern
- Speed up EventEmitter
emit()
by ~50% (c4046d6) – @Venryx - Enable ad-hoc dependencies to be pre-downloaded (aac8daf) – @rigdern
- Keep ScrollView content visible after edits (528a3c7) – @rigdern
- Decrease cost of reflection (911c05a) – @rigdern
- Update android gradle plugin version to 2.2.2 (3ee5c5b) – @raycohen
- Expose Android’s includeFontPadding for
Text
(7b3e67d) – @benvium - Handle “Never Ask Again” in permissions and add requestMultiplePermissions (51efaab) – @cmcewen
- Remove Jackson dependency (6fef014)
- Remove REACT_HEADERS from RN BUCK file (9024998) – @javache
- Implement onViewAppear by creating a new EventListener on ReactRootView listening for when it’s attached to a RN Instance (e06b8db) – @donyu
iOS
Bugfixes
- Fix autoCorrect doesn’t revert to initial state (8016d83) – @rigdern
- Fix NativeAnimation invalidation & races on iOS (c858420) – @ryangomba
- Fix an image loader crash (70d4023) – @rigdern
- Fix iOS Picker item colors (4dea892) – @JakeDawkins
- Fix dequeueTasks crash in image loader (d043775) – @rigdern
- Remove deprecated RCTReloadNotification (cd2b384) – @javache
- Fix LayoutAnimation delete scaleXY animation (fc23784) – @rcaferati
- Fix memory leak in Chrome debugging (230de71) – @EmingK
- Fix shake to open Dev Menu only work once (abf1438) – @VojtechBartos
New features and enhancements
- Introduce spellCheck prop to TextInput (0e55f5b) – @rigdern
- Make run-ios find if a device is booted better (0b5ff0d)
- Start exposing RCTWebSocketObserver using a protocol (48cb8d3) – @adamjernst
- Add fastlane to default
.gitignore
(5e008c9) – @KrauseFx - Move all header imports to “” (see breaking change notes) (e1577df) – @javache
- Remove deprecated push notification method info (9c7952d) – @sharnik
- Add badgeColor property (a50bafa) – @skv-headless
- UnselectedItemTintColor property available since iOS10 (8378142) – @skv-headless
General
Bugfixes
- Fix up recent fix to flex basis and put it behind an experimental flag (dad5204) – @emilsjolander
- NavigationExperimental: Fix animation in fast navigation between scenes (df43cc7) – @gitim
- Fix invariant in scrollResponderZoomTo (20e99f5) – @gre
- Fix double callback invocation in
ModuleGraph/Graph
(021b313) – @davidaurelio - Fix usage of weak references to check for null (4902a03) – @emilsjolander
- Fix a bug in determining if yarn is available (9b53408) – @mkonicek
- Fix packager asset requests on windows (d77b4fd) – @janicduplessis
- Fix the parse error when specifying an unknown version (c2db59e) – @ncuillery
- Fix babel ‘strict mode’ error (5478649) – @karpoff
- Red Box should open PyCharm at line number of error (be16907) – @bigsassy
New features and enhancements
- ScrollView: Don’t dismiss keyboard when tapping another text input (552c601) – @janicduplessis
- Add support for aspectRatio style prop (5850165) – @emilsjolander
- Packager: add GlobalTransformCache (5d30045) – @jeanlauliac
- Add CLI basics in docs (5e8e6b8) – @GantMan
- Add
deprecated
flag for nativeImageSource (1fe0f4d) – @frantic - Add StyleSheet.setStyleAttributePreprocessor (346858a) – @brentvatne
- Packager: Cache assets only for production environment (d196ca7) – @grabcode
- Dispatch native handled events to JS (b49e7af) – @janicduplessis
- Packager: Bring back programmatic API (f9d80a4) – @davidaurelio
- Read byte code format version from custom JSC executor only if custom JSC is enabled (b4dbf2b) – @indragiek
- Update Flowconfig in CLI template to Flow v0.36.0 (eb45367) – @mkonicek
- Packager: Module: better type for transformOptions (c284e0c) – @jeanlauliac
- Packager: Bundler: use transform module hash instead of mtime (e485f69) – @jeanlauliac
- Packager: Bundler: use stable paths for cache key (188093a) – @jeanlauliac
- Packager: Bundler: hash all the cache key components (6740207) – @jeanlauliac
- Packager: GlobalTransformCache: better aggregation (9b9fd2f) – @jeanlauliac
- Packager: GlobalTransformCache: globalized keyOf (cb254d1) – @jeanlauliac
- Packager: Module: gives global cache more retries (59873d7) – @jeanlauliac
- Packager: Kill
shouldThrowOnUnresolvedErrors
option (b1fd7bd) – @cpojer - Packager: Make legocastle script to write to the global cache (46f8eb0) – @jeanlauliac
- Packager: Support relative paths in haste map (6c65cda) – @davidaurelio
- Packager: ModuleGraph: Also call back with module objects of entry points (88409f6) – @davidaurelio
- Change
isPolyfill
totype = 'module' | 'script'
(da079f7) – @davidaurelio - Kill fastfs (6554ad5) – @cpojer
- CLI: Allow configuring the way CLI installs react-native (8f0aed6) – @mkonicek
- CLI: Show npm / yarn output during ‘react-native-init’ when installing React and Jest (63804db) – @mkonicek
- CLI: Remove dependency on Yeoman (8fb2440) – @mkonicek
- CLI: Use Yarn if available (ca403f0) – @mkonicek
- GitUpgrade: Upgrade React and React Native at the same time (a0f3a93) – @ncuillery
- Remove HMR require from initialization code (c3e2c30) – @davidaurelio
- Packager: Allow custom platforms on a per-project basis (5b37c3e) – @andrewimm
- Better error for ART (4a216f6) – @grabbou
- Do not call
toString
on functions in buildStyleInterpolator (25fb2ba) – @michalgr - NavigationExperimental: Update type check for NavigationCardStack (6432839) – @lgan1989
- Reworking keyboardShouldPersistTaps to have a middle ground (276485b) – @MaxLap
- Deprecate MapView in favor of airbnb/react-native-maps (5dbdb12) – @mkonicek
React Native v0.39.0 Released
Breaking changes
See this document for a complete list of breaking changes (three) and actions required.
General breaking changes
- Update RN shadow nodes to hold CSSNode instead of extending CSSNode (0df65bb) – @astreet
- Kill require(‘image!…’) (2214146) – @frantic
Android breaking changes
- Move to new C-based implementation of css-layout in RN Android (d63ba47) – @astreet
- Android: Fix inconsistency with fractional TextInput padding (aa85408) – @rigdern
- Disable debug menu when monkey is running (9a8b5d9) – @rigdern
General bugfixes
- Fix flex within max width constraint (72d1191) – @emilsjolander
- Fix view clipping to operate on ui hierachy (26e373c) – @majak
- Workaround fix for Visual Studio (c5f6e86) – @splhack
- Fix usage of old String constructor (2a04569) – @javache
- Navigator: null check on gesture.overswipe to prevent crash (54e9471) – @rigdern
- Update ReactShadowNode to not add CSSNode children if parent has measure defined (10e0aec) – @astreet
- Introduce nativeImageSource API (dcbcda7) – @frantic
- Don’t clip if ui and react view hierarchies are different (d5e067f) – @majak
- Dont measure single flex grow+shrink child (4500e4d) – @emilsjolander
- Absolute positioned items should apear inside padding but outside border (7449658) – @emilsjolander
General new features and enhancements
- Add the configuration option to the run-android command (2a2d3c6) – @SandroMachado
- Add extractOffset to Animated (6535858) – @ryangomba
- Add a new Navigator SceneConfig swipeFromLeft (1888a0a) – @nverdhan
- Add aspectRatio style property (e1df3c8) – @emilsjolander
- Only skip updating computed flex basis within the same generation (15f848e) – @emilsjolander
- Rewrite ‘react-native init’ and ‘react-native upgrade’ without using Yeoman in preparation for templates support (a477aec) – @mkonicek
- Make Modal pass rootTag to AppContainer (4530da8) – @fkågozali
- TouchableOpacity: Respond instantly to first touch (fa8c536) – @ariabuckles
Android bugfixes
- Call all android back key handlers before invoking default (b4283ed) – @dltmd6262
- Fix redundant styles on RefreshControl for Android (39c1818) – @linmic
- Prevent hitslop crash on Android (c2a55ba) – @AndrewJack
- Drop CSSNode pool on low memory when app is backgrounded (48bb364) – @astreet
New Android features and enhancements
- Expose setAllowUniversalAccessFromFileURLs in Android WebView (b6a38e8) – @locly
- Update logging to support levels, print messages in Android logcat on assertion failures (a731a23) – @astreet
- Proper NativeAnimated node invalidation on Android (6f5433f) – @ryangomba
- Reduce overdraw layers by hiding cards when they are not visible (54beee2) – @rigdern
- Expose Image’s onError event to JavaScript (e87e181) – @rigdern
- Provide more info when image fails to load (d117f55) – @frantic
iOS bugfixes
New iOS features and enhancements
- Add the scheme configuration option to the run-ios command (ca7cbde) – @SandroMachado
- Add
--indexed-unbundle
flag to force iOS ra-bundle format (112bdc9) – @davidaurelio - Add getContentSizeMultiplier & event (eddc2c9) – @rigdern
- Add onScroll event to TextInput (c609aee) – @rigdern
- Added support for
<Text>
‘sselectable
attribute on iOS (5d03ff8) – @shergin - Included NativeAnimation module on iOS in the starter project (8965f11) – @sreejithr
- Expose NavigatorIOS::replaceAtIndex (b7889e0) – @daniel-nagy
- PushNotificationIOS: Use PushNotificationEventName as the key to store in the handler map (e51cb34) – @ianlin
- Expose RCTDevMenuItem when not in DEV mode (3b4ac79)
Hyperloop Brings React and Ruby Together
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
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 thanautoFocus
. (@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} />
thenfoo
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)