Note: I wrote this some time ago and forgot to publish. The original thing is a gist on github, in case something looks weird here.

Not sure if I’m that stupid or people are starting to make life harder for everyone. I lost a day to figure stuff out, all while growing a couple more gray hair. I also cursed a lot and considered quitting programming (again).

Maybe it’s just me, maybe I overthink everything. I suppose I though GraphQL was something else. I suppose I expected it to help me write an API faster, but it’s not like that. It’s easier to query the API, but you still have to code everything on your own to make this possible (like the queries).

There are things like join monster (example below) that generate SQL SELECT queries for you (based on the GraphQL query you throw at it), but apart from that, you are on your own.

Read more…

Didn’t find any actual guide online so I’m going to write a not-so-simple one.

Use this if you own a .eth domain, and you want to create and link a subdomain to an ethereum address (eg. to your exchange wallet).

Same goes if you own a subdomain, you just skip the first step.

Below the (very verbose) javascript code with a step-by-step procedure.

Click here to see the code so I don’t overload the first page.

A lot has been written on the web about this, but I’m still going to write this down so I don’t forget.

I managed to get from a ~400kb bundle (the file was not served as gzipped) to a ~50kb bundle (gzipped), which is pretty amazing, in three steps (and some researching).

I mixed up the steps when writing this post, that’s why the file sizes I am reporting are not consistent. I actually went with Step 2, Step 3, and finally, Step 1.

Click to see the steps.

rsync -av /from/a/dir1/ /to/some/other/dir2/ --no-perms --no-owner --no-group --no-times --exclude=/from/a/dir1/excludeDir/

Use -avn to perform a dry run — it will only show the files that would have been transferred, and won’t actually copy anything.

Notice that if you use dir1/ and dir2/ (with the trailing slash) all of the files inside dir1 will be copied inside dir2. If you leave the slash out, you will also copy the dir1 directory itself.

References:
Copy new files only – is this possible? Basically want to merge two folders
rsync ignore owner, group, time, and perms

Undocumented props. Why?

Anyway.

onMomentumScrollEnd will fire when the animation of the ScrollView stops.

For example, you can use the following snippet, to get the Y position of a <ScrollView ref="scrollView" />:

const RCTUIManager = require('NativeModules').UIManager
const sv = this.refs['scrollView'] as any
RCTUIManager.measure(sv.getInnerViewNode(), (...data) => {
  console.log(data[5])
})

And this is the order in which events of a ScrollView fire, in case you ever find yourself looking for answers that can’t be found in the official docs.

onTouchStart={() => console.log('onTouchStart')}
onTouchMove={() => console.log('onTouchMove')}
onTouchEnd={() => console.log('onTouchEnd')}
onScrollBeginDrag={() => console.log('onScrollBeginDrag')}
onScrollEndDrag={() => console.log('onScrollEndDrag')}
onMomentumScrollBegin={() => console.log('onMomentumScrollBegin')}
onMomentumScrollEnd={() => console.log('onMomentumScrollEnd')}

Reference:

http://stackoverflow.com/a/33924777/2621748

This is a hacky way to do it, while we wait for a native bridge (I found it in a React Native issue on GitHub.

https://github.com/facebook/react-native/issues/586#issuecomment-90826117

Basically you trigger an event in your parent component by listening to a navigation change in the WebView, and pass the name of a method (or whatever) via the document.title field.

Longer post coming (maybe, I find myself adding stuff on the go 😰)

You will also have to read the following to correctly send all the data you want from the WebView to the parent component.

http://stackoverflow.com/a/26603875/2621748

After spending way too much time figuring out how to upload stuff (like videos and photos) to S3 in React Native with modules written by others (like react-native-uploader or react-native-fs), I decided to fall back to the good old XMLHttpRequest.

Also this is not strictly related to React Native as it can be used anywhere, but it’s where I used recently.

I am using a couple of variables here:

presignedUrl is the destination URL I get from our API (it is a really long string that looks something like the URL I’m putting at the bottom)
filePath is the full path to the file (including file://).
fileType is the mime type of the file (like video/mp4, or image/jpeg).
fileName is the file name with extension (something.jpg).

And then, drumroll, the super simple code snippet:

const xhr = new XMLHttpRequest()
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      // Successfully uploaded the file.
    } else {
      // The file could not be uploaded.
    }
  }
}
xhr.open('PUT', presignedUrl)
xhr.setRequestHeader('X-Amz-ACL', 'public-read')
xhr.setRequestHeader('Content-Type', fileType)
xhr.send({ uri: filePath, type: fileType, name: fileName })

Presigned URL and simple request explanation inside.

When we have an input field on the bottom of the screen and we focus it, the keyboard covers the field and we will not know what we are typing inside.

My solution is a mix of two StackOverflow answers, which I will reference at the bottom. Also, apparently the React Native team tackled this issue in the 0.30.0 release. I tried it and it didn’t work the way I wanted, but maybe it was me doing something wrong.

Oh and of course this might not be the best way to do it at all, but it works for me and doesn’t look awful.

Click to see the code.

Just leaving this here for when I have a little bit more time to make it a little nicer.

Using react-native-drawer to render the drawer.

The whole code of the two components I am using is below or in this gist.

Let’s start with a basic <Drawer> with a <ScrollView> with a <ListView> inside. Since we don’t know the width of the drawer (because of devices with different resolutions) we can’t just set a fixed width to the images (or whatever) inside the grid. Also with flexbox, I didn’t manage to get the desired result, because I needed squares.

So, to create a grid that has let’s say images that have a 50% width, you have to hack a bit.

Cutting here so it’s not messy, click to see the code and read more.

Every real Hipster must have a Hipster Cat, so I had to get mine.

She is also a Hacker Cat and hacks the best codez. This is her brainstorming while hacking some iOS codez.

27411821472_581b2bf256_c

Hipster Cat also teaches me how to hack. I am not as good as Hipster Cat yet. This is her looking away from my ugly codez.

27234256310_cd35a6a111_c

And yet so little on this blog.

Quick update just so I don’t forget stuff.

I’ve been to San Francisco from February to March and I have to say that it is the best city in the world – at least that’s the impression it left on me after a month of living there. I surfed, met and lived with super cool people (Bellabeat, codeanywhere, Povio Labs), enjoyed delicious foods from all around the world (thanks to Rok) and beers (thanks to Uros). I also visited Palo Alto and Stanford with Jaka and Tomaz. I did tons of other stuff as well – it was such an amazing experience, pinky promise!

I’ve seen The War of the Worlds by Jeff Wayne in London in February, which was totally amazing!

I quit my job at Dinit in February.

I went to the TechCrunch Disrupt hackathon in London with my buddy Vito. Even though we didn’t win (we got the consolation prize though – two tickets for the TC event there, which weren’t cheap), we got to see that despite there being around 700 participants, not a lot of them were devs (and not a lot of them seemed to know what they were doing.) Slovenians won of course, because we always win.

If I wrote more it wouldn’t be a quick update so I’m just going to stop for now 🙂