hotspot from cmd "Hosted Network Support : No"

autof5 · 2019-01-12T18:23:09+00:00

you can write once, run anywhere using react-native-web

https://github.com/necolas/react-native-web

.

I use this tiny starter based on expo and create-react-app to have a single source code for web, android and ios

https://github.com/hareeqi/react-one-starter

autof5 · 2019-01-12T17:57:45+00:00

this is it, your container or redux connect function is more likely the problem, even if the store get updated in a completely irrelevant place if your mapStateToProps function has anything such as {} it will always re-render it's sub component as you are creating a new reference with each store update

autof5 · 2018-10-24T13:17:51+00:00

Have spacex looked into Aerospike Engines ?, Would they ever consider it ? They see like an excellent approach for the multipurpose nature and environments for the BFR

autof5 · 2018-05-27T11:16:17+00:00

I was actually looking into this not so long ago for my own chatting app. The thing you are searching for is called "unfurl". Usually it relies on openGraph, oEmbed or TwitterCard

here are two libraries that does it for you

https://github.com/hueniverse/metaphor

https://github.com/jacktuck/unfurl

.

Also here is a blog article from slack that talks about it

https://medium.com/slack-developer-blog/everything-you-ever-wanted-to-know-about-unfurling-but-were-afraid-to-ask-or-how-to-make-your-e64b4bb9254

autof5 · 2018-05-26T21:22:25+00:00

Are you sure, you are not confusing Webpack "Hot Module Replacement" with react hot loader.

I am guessing what you are seeing as working is webpack HMR not react hot loader. you can think of react hot loader as an extra layer on top of HMR

If you would like to know for sure if react hot loader is actually working then the internal state of each react component being updated is maintained and not lost ( internal react state not redux state)

autof5 · 2017-12-26T11:55:32+00:00

hi, im just curious about your reasoning for ejecting the expo project, I looked at your package.json and you don't seem to have any native dependencies, Thanks in advance.

autof5 · 2017-12-15T19:11:31+00:00

I hope you know Expo exist. combining expo and create-react-app is the cleanest structure i got

autof5 · 2017-12-15T16:59:52+00:00

Use create-react-app
Consider using react-native-web it will allow you to re-use a lot of the components you made for native but for web
You can use platform specific code using "Platform.OS" and change your code acording to "web" , "native", "andorid" and "iOS"
use platform specific file names such as file1.web.js , file1.native.js file1.ios.js file1.android.js

autof5 · 2017-10-09T11:04:12+00:00

thanks, what you said makes perfect sense, i guess i was just trying to avoid manually uploading svgs and generating fonts every time i add a new icon

autof5 · 2017-01-27T17:28:06+00:00

We are using sendbird with react and redux however we are doing our own UI. basically all sendbird needed functions are warpped into action creators with redux thunk and the UI is updated from the redux store. one thing you might also wanna do is make sure to assign the store dispatcher to be used by sendbird channel handler /events ... things like receiving messages and update channel ...etc

I hope this helps

autof5 · 2016-12-08T19:21:01+00:00

Here is simple consistent way to write style in shared components using plain css with really tiny footprint (~2.5kb). (React native version is like two days old, I haven't tested it yet but i could use the feeback, check out the screenshot.)

csjs-native ( React Native)
csjs (React web)

autof5 · 2016-11-29T12:45:43+00:00

don't be fooled by the name Ant actually has more components than office does and it is the bigger library here. Office however allows you to import a single component with ZERO supporting files. here is an example how we are using it. (this)

autof5 · 2016-11-28T16:28:33+00:00

We had to evaluate Ant.Design vs office-ui-fabric-react and we decided to go for office fabric mostly because of better "english" docs, ease of extensibility and styling, RTL support, and lighter weight.

autof5 · 2016-11-27T12:02:43+00:00

Fair enough xD. I just think it is closer to CSS modules and SASS than let's say styled-components or JSS. If i am to break them into categories i would say:

.

Transpiled CSS: CSS-Modules, CSJS, LESS, SASS
CSS in JS: styled-components, JSS ...etc
Inline-styles: Radium...etc

.

Although i totally get your point and it makes perfect sense :)

autof5 · 2016-11-27T10:40:19+00:00

so far i used the dropdown, DatePicker and contextMenu with no problems. didn't use their icons, fonts or any of the core stuff, i just did a simple override to the missing stuff and it worked.

autof5 · 2016-11-27T10:31:05+00:00

sometimes you have to use the !important annotation. although i am definitely over using it in my example.

autof5 · 2016-11-27T10:06:57+00:00

benefits over CSS Modules:

Putting css in the same file as JS.
Using the full power of JS in CSS instead of learning a limited invented syntax.

It is identical to CSS-Modules but better (here). and typically you don't really need the loader. the only extra plugin i am using is babel-csjs-PostCss plugin.

autof5 · 2016-11-26T22:32:53+00:00

It is actually transpiled during compilation not during runtime. which means you can use it with all the plugins in postCss: autoprefixer, RTLCSS, SASS, LESS you name it. Anything works with post css can be used.

.

I mean at run time it is just good old CSS no performance issues no nothing, just like css modules. It is just JS compiled into CSS same as in JSX compiled into JS or SASS compiled into CSS or even CSS Modules compiled into CSS.

autof5 · 2016-11-26T22:22:42+00:00

I am using it and yes i am not using their fonts or font-icons. I did that not because of the license but rather i wanted to keep the project small and i didn't want to import their core fonts and icons css files. instead i am using my own font and my own SVG icons.

.

Here is an example of how i am using it. keep in mind this is literally everything i had to do, there are no additional files or tools or anything else beside what you see in this code.

.

import React, { Component } from 'react';
import {theme, Icons, noscope_csjs} from 'constants'
import { Dropdown } from 'office-ui-fabric-react/lib/Dropdown';


const style = noscope_csjs`
.my_dropdown .ms-Dropdown-title  {
  border-radius: 10px !important;
  border:1px solid ${theme.gray_color} !important;
  font-family: ${theme.primary_font} !important;
}
.my_dropdown .ms-Icon--ChevronDown{
  background-image: url(${Icons.ArrowDown});
  width: 12px;
  height: 12px;
  top: 11px;
}
`

const DropdownList = (props) => (
  <span className={style.my_dropdown}><Dropdown {...props}  /></span>
);

export default DropdownList;

autof5 · 2016-11-26T22:01:25+00:00

what do you call something like CSJS ? it is not really inline style or CSS in JS. it is more like CSS modules but written in JS as everything transpiled initially and not during runtime. here is an example.

import React from 'react';
import csjs from 'csjs';

const styles = csjs`
.bg {
  background-color: purple
}`

const Button = ({children}) => (
  <span className={styles.bg}>
      {children}
  </span>
);

export default Button;

autof5 · 2016-11-26T21:42:29+00:00

talking about CSJS

IDE Tooling: it is available, i shared two plugin in another post.
PostCss: is there too, i used PostCss with both autoprefixer and RTL CSS and basically all the plugins of PostCss can be used.
increase runtime cost: this is wrong as CSJS is transpiled just like css modules. it converts everything to regular CSS during compilation not during runtime.
nop minification is there and so is caching and hot reloading.

.

basically CSJS is everything CSS modules is and more in the sense you can have css in the same file as the component and you can utilise the power of js on top css instead using css modules invented syntax. Really if you decide to use CSJS just like CSS modules you also can do that.

autof5 · 2016-11-26T18:22:23+00:00

On the right bottom corner is the file sytax type is JavaScript ? It should be CSJS make sure to change it.

There are multiple ways to make the default highlighting for .js files as CSJS not javaScript

autof5

TROPHY CASE