How To Open Source Parts Of Your Private Project With Bit

  • Using Bit, you can isolate these sets of files (we call code components) from your project and share them with the open source community, while keeping their source project private and intact.
  • js – │ └── index.js – └── utils – └── noop.jsBefore Bit, we would have to create a new GitHub project for this component, remove hello-world from your private project and make all its dependancies (packages as well as other files from the project) available for the new project.
  • With Bit, you can keep this component as part of your private project and still make it available to the community to discover, use and collaborate on.
  • Open source parts of your project to the communityTo make sure your components are truly executable outside of the project’s context, Bit will build an isolated component environment and apply all configured extensions to test, compile or perform any other defined task.
  • You can also use bit import to bring the component’s source code into other projects, develop them and merge changes between different projects.

How to make parts of your private projects open source and make their components available to the community without having to split your repositories or create new projects on GitHub. Learn more.
Continue reading “How To Open Source Parts Of Your Private Project With Bit”

What the React Native docs forgot to tell you about animations

  • The last animation function is Animated.decay() and has some specific use cases.
  • Based on that and a deceleration value, it calculates what the end value is and how long the animation should take.
  • this.animatedValue = new = new Animated.ValueXY({x: 15, y: 0, y: 0});getTranslateTransformThis method with transform your {x: 10, y: 200} value to a directly usable transform.
  • this.animatedValue = new Animated.ValueXY({x: 10, y: 200});Animated.Value style={{ – transform: /// is short for Animated.View style={{ – transform: [ – {translateX: this.animatedValue.x}, – {translateY: this.animatedValue.y} – ] – }} /stopAnimationStops any running animation.
  • It has a callback with the final value after the animation has = { – console.log(‘finalValue: ‘+ finalValue) – })resetAnimationStops any running animation and sets the value back to its original value.

React Native is great. It’s pretty awesome to be able to build a native app with only JavaScript knowledge. One of the things I like most is making the animations, it can add so much to the…
Continue reading “What the React Native docs forgot to tell you about animations”

Here’s To Fat Fingers – Hacker Noon

Here’s To Fat Fingers by @burkeholland  #JavaScript #ReactJS #WebDev

  • In the case of “function”, as long as the letters you are typing are in the same sequential order they are in the word, VS Code will match the word you are looking for.
  • This is not because the brain tries to spell the word that way, but because we’re typing so fast that mistakes just happen, probably because the fingers can’t move as fast as the brain.It looks to me that to account for this issue, VS Code will now look backwards in…
  • In other words, VS Code will do a backwards search, but once it has a match it won’t do any more backwards searches but will continue to search forward.For instance, you can type “ftuo” and get a match because the “u” come before the “t” and the “o” comes last.But…
  • Simply put, VS Code intellisense now supports one transposition error within your string.So to sum all of that up, as long as your word starts with the right character, and you only have one letter that is out of sequential order, VS Code will give you a match.Also, typing “potatoe”…
  • Johannes Rieken — VS Code TeamSo it’s a lot smarter than I made it out to be as the algorithm is essentially creating a bunch of possible transposition errors (7 to be exact — if the word is at least that long) and then scoring any of the matches against each other to determine…

I was watching this VS Code release highlights video from Brian Clark this morning, and he shows a very interesting feature at about 1:16… When I saw this, I IMMEDIATELY thought of a tweet from…
Continue reading “Here’s To Fat Fingers – Hacker Noon”

Sharing React Components Easily with Bit — SitePoint

  • Bit is an open-source project that enables us to instantly share components from our existing source code with our team, and use them across our different projects without changing our source code, file structure or the tools we work with.
  • Sharing Components with Bit – If you haven’t heard of Bit’s latest release, it’s an open-source project that allows us to share components from our existing source code with our team and across projects.
  • By decoupling the representation of components from our actual file structure, Bit tracks the components within our source code and enables us to quickly turn any file or subset of files into a reusable component.
  • js – #Tracked 24 new components – – – – The next thing we want to do is to commit our changes: – bit commit -am ‘committed my first tracked code components’ – – – – The next step is exporting our components into a remote organized collection (Scope), sharing…
  • To organize your own components into shared collections, feel free to get started with Bit or visit the project on GitHub.

Jonathan explains how to share React components with a team and across different projects — without changing source code, file structure or tooling.
Continue reading “Sharing React Components Easily with Bit — SitePoint”

Creating a Plugin System and Preact in Pictures

  • Preact is an implementation of the React API that’s significantly smaller and faster.
  • If you’ve ever wondered how the virtual dom and component model really work, this will be a great introduction that should prepare you for reading the source code of Preact or React.
  • After hearing this talk, you’ll have a great new tool for developing performance-critical UIs and a better mental model of how React works on the inside.
  • Creating a Plugin System with Apollo and the Coral Project by Riley Davis

    The Coral Project attempts to rethink how we create community online with open source tools and best practices.

  • This talk is about how we enabled development of third-party plugins with Apollo and GraphQL to help publishers adapt our commenting platform to meet their needs.

Come downtown for food, drink, talks, and socializing. We’ll be talking about ReactJS and related technologies. There is a lightrail stop at the corner of
Continue reading “Creating a Plugin System and Preact in Pictures”

React Native and Native Modules: The Android SyncAdapter

  • React Native and Native Modules: The Android SyncAdapterReact Native and Android have been friends for a whileI came into the need of using a SyncAdapter for an Android app I want to fully convert into React Native.
  • For this native module that I named as react-native-sync-background, we are gonna combine the Android SyncAdapter with the HeadlessJS.
  • In there, we want to start our HeadlessJS so we can write all the actual sync code in JavaScript (like fetching from an API):Our HeadlessService.class is almost the same as the one explained on the docs but with some extra checks:There are several things worth mentioning here:new HeadlessJsTaskConfig( TASK_ID, null, 300000);We hardcoded our TASK_ID to be TASK_SYNC_BACKGROUND so you will need to register a task with this exact same name and that is the task our SyncAdapter will runWe pass null as parameter so the actual JS task will receive null as extra (since we do not need any param)Default timeout is set to 5 minutes which should be enough for any task of this kind.
  • If we actually return just null, it will start a non-sticky Service that will not be stopped (which is bad for memory/battery) so we make sure that we handle this edge case.Creating the moduleLet’s go ahead and create a native module, named SyncBackground that will be responsible for interacting with our SyncAdapter:Basically we do two things here:Override getName so from now on, our Native Module will be called SyncBackgroundExpose (using @ReactMethod), in this case, just the method init that will set up all the sync hassle for usNow, loading that module is just a matter of adding a new instance of it to the native modules list, as shown below:So the apps that want to actually use this module will be able to add new SyncBackgroundPackage() just as we do in the example app.More on the native side, we want our module to act as an Android library so we can use it in other projects, to do so, take a look at the build.gradle file.
  • To your question: Yes, I AM A WIZARD.By the way, notice at the second screenshot, you can select the option Sync Now which will trigger onPerformSync which will trigger your HeadlessJS task so you can try it out without waiting at all.Exposing a typed APII find it nice not to expose the Native Module as it is, but wrap it into your own API where you can actually use some typing (Hello Flow!)

I came into the need of using a SyncAdapter for an Android app I want to fully convert into React Native. In this app, I already have the native piece of code working and I could not find a library…
Continue reading “React Native and Native Modules: The Android SyncAdapter”

Lazy Loading

  • Component { render ( ) { const { Highlight } = this .
  • A component can lazily load dependencies without its consumer knowing using higher order functions, or a consumer can lazily load its children without its children knowing using a component that takes a function and collection of modules, or some combination of both.
  • Component { render ( ) { return ( < div > { this .
  • As a component, you can also make sure your own dependencies are lazily loaded.
  • Source code of the LazilyLoad component module which exports both the Component interface and the higher order component interface, as well as the importLazy function to make ES2015 defaults feel a bit more natural.

A component can lazily load dependencies without its consumer knowing using higher order functions, or a consumer can lazily load its children without its children knowing using a component that takes a function and collection of modules, or some combination of both.
Continue reading “Lazy Loading”

Getting Started with React Native and Flow – React Native Training – Medium

Getting Started with React Native and Flow 📱👌 #javascript #react #reactnative #flowtype

  • Using the Flow server For a large project, you probably only want Flow to recheck files incrementally when they change.
  • To get started, we first need to make sure we either have flow set up in our project at node_modules/bin/flow (as we have already done above) or installed globally.
  • To stop the server, we can run node_modules/.bin/flow stop to stop the server.
  • In our project, we start the server by running node_modules/.bin/flow , which we’ve saved as an npm script npm run flow .

Flow allows us to easily add static type checking to our JavaScript. Flow will help you prevent bugs and allow for better code documentation among other things. A lot of the React Native…
Continue reading “Getting Started with React Native and Flow – React Native Training – Medium”

Getting started with ReactJS and eXo Platform portlet development

Getting started with #ReactJS and @exoplatform #portlet development

  • The React lifecycle will initiate the state, mount the component to the DOM, fetch data from the API, and render it.
  • We could replace the Activity class with the react stateless function pattern to get rid of the useless lifecycle.
  • Because Exo uses AMD modules, it will automatically adapt them.
  • The modules will be automatically loaded by eXo Platform when you load the portlet.
  • Discover eXo Platform 4 in a production environment

In this article, you’ll learn how to set up a simple ReactJS and node.js development stack, build a standalone app, and package it all to a portlet.
Continue reading “Getting started with ReactJS and eXo Platform portlet development”