Articles about Website and App Development
During development of our app celebrate we recently ran into issues scaling our image upload handling that was based on top of ActiveStorage from Ruby on Rails.
Here I have written an article about what exactly those issues were and how we handled them.
Read more here:
https://tech.kartenmacherei.de/scaling-activestorage-21e962f708d7 .
Sometimes you will want to dynamically return a component based on a prop, your current state, or some other data. This can be challenging when working with JSX because simply running the following will not work.
const FooComponent = () => {};
const BarComponent = () => {};
const types = [FooComponent, BarComponent];
return <types[0] />;
Instead of creating a map of all possible components this can be achieved by assigning the desired component function to a constant that starts with a capital later, like a normal Activity class name. It can then be used as valid JSX and React will take care of the rest when compiled down to vanilla JavaScript.
const FooComponent = () => {};
const BarComponent = () => {};
const types = [FooComponent, BarComponent];
const DynamicComponent = types[0];
return <DynamicComponent />;
// => <FooComponent />
The topic of machine learning has been becoming ever more popular in the last years. This is the ability to use neural networks that allow our software to “learn” by itself and automatically perform tasks for us, like a human would.
Since I am primarily a JavaScript developer I decided to use the popular JavaScript library for creating neural networks called Brain.JS. The problem I wanted to solve was to automatically classify different types of events (as in Birthdays, Weddings, Parties, etc.) into categories based on their title.
If you would like to read more on how I did this and the results encountered, read on here: https://tech.kartenmacherei.de/classifying-events-using-a-neural-network-488acb50de87
I've recently written an article on tracking React Native errors and crashes using the Sentry reporting tool, on the blog of workplace.
If you are interested in this topic, read further here:
https://tech.kartenmacherei.de/tracking-react-native-errors-with-sentry-3719f9b24836
stubDate helper can be copied from the bottom of the article.It is a common case in unit testing to need a static date returned in your tests so that you can either have a fixed expectations (e.g. in a JSON), or to prevent random failures when tests are executed seconds later than when the expectations where made.
For this reason, if you are using Jest, you want to stub the Date object
inside your Jest tests so that when calling new Date() or Date.now() aways
returns the same result.
Jest does not provide a built in method for stubbing the JavaScript Date
object so we have to do this manually. This can be done by overriding the global
Date object.
const fixedDate = new Date('2018-02-28T09:39:59');
Date = class extends Date {
constructor() {
super();
return fixedDate;
}
};
This is enough to get a test passing, which will always return the time
"2018-02-28 09:39:59", regardless which Date methods are called. For example,
calling getTime() on the date instance will always return "1519807199000".
Since we are using Jest we can use the beforeAll function to set the date
before all tests in a test file, so that this code does not have to be copied
into each test case.
const fixedDate = new Date('2018-02-28T09:39:59');
beforeAll(() => {
Date = class extends Date {
constructor() {
super();
return fixedDate;
}
};
});
It is also important to reset Date back to the original "real" Date object
after all tests have run to prevent confusing errors in future tests where you
expect to work with a non-stubbed date. We can do this with a Jest afterAll
function. This means we have to cache the original Date object in the
beforeAll.
const fixedDate = new Date('2018-02-28T09:39:59');
let _originalDate;
beforeAll(() => {
_originalDate = Date;
Date = class extends Date {
constructor() {
super();
return constantDate;
}
};
});
afterAll(() => {
Date = _originalDate;
});
stubDate helperFinally we can piece this all together into a handy stubDate helper than can
be imported into any test file, leaving the test implementation clean of the
stubbing boilerplate code. I usually use a file called test-helper.js where
helper functions like this live.
// test-helper.js
export const stubDate = fixedDate => {
let _originalDate;
beforeAll(() => {
_originalDate = Date;
Date = class extends Date {
constructor() {
super();
return fixedDate;
}
};
});
afterAll(() => {
Date = _originalDate;
});
};
This can then be imported into a test file and the before and after actions will automatically be applied to your tests. For example:
// my-spec.js
import { stubDate } from './test-helper';
it('can stub the global date object', () => {
const myDate = new Date('2018-02-28T09:39:59');
stubDate(myDate);
// This expectation will always pass regardless of what time the test is run
expect(Date.now()).toEqual(1519807199000);
});
After searching and getting a lot of different answers on how to move all files in a project from one file pattern to another, I found this article had the simplest solution.
I was trying to move all files in a Jest project from having the suffix _spec.js to have .spec.js. The following line of bash got the job done:
for f in *_spec.js; do mv "$f" "${f/_spec/.spec}"; done
If you want to test this before actually moving the files and see what action will be done, add an echo before the mv call in the loop, which will print the mv calls that would be made:
for f in *_spec.js; do echo mv "$f" "${f/_spec/.spec}"; done
I also like the idea of using rename but this is not available by default on OS X and I do not want to install it since this is not a program I will be using often. It does have a much simpler syntax though and can be piped to find, which would look like:
find -name "*_spec.js" -type d | rename 's/_spec/\.spec/g'
Like most developers I have large libraries of PDF books lying around in a folder somewhere. In order to organise the books and get a better overview I decided to work on a weekend project designed to investigate Gatsby.js, a React / GraphQL based static site generator. The project was to use Gatsby to build a PDF library that would allow me to put my PDF books into the project and then build a simple static website that would list the PDFs, give some information about each book, allow me to read them online, and finally download them if I wanted.
My static Gatsby based PDF library ended up with the following features:
You can see a demo of the Library here: https://blake-simpson.github.io/gatsby-library/
As mentioned in the introduction, Gatsby.js is a static site generator built with JavaScript. Gatsby uses React for building the views and a GraphQL API that is queried from your views to read information about your static files.
This means you can add, for example, a bunch of Markdown files to your project and Gatsby will run through each file (what it calls a "node") to index these and put them into the GraphQL index. You can then build a list of your Markdown articles to the home page and link to each one and render it as a web page.
With this setup, Gatsby is very good for building static websites that do not rely on a database at runtime, for example, a blog.
However, Gatsby can not only read Markdown files from your system, it can read any file type such as an Excel spreadsheet, or as I discovered, a PDF.
Before going on to show how I extracted PDF information and put it into the
Gatsby index you might want to try out some
Gatsby starter examples such
as the gatsby-blog.
Also, if you have never worked with Gatsby before, it is a good idea to work through the tutorial which helps to understand the Gatsby concepts such as configuration, the node server, and how the plugins work.
I recently had the issue where I needed to proxy traffic from my IP address to a different server, in order to perform mobile testing. The setup I have is a "local" server running on my development machine with a local hostname, since my phone can not access this hostname, I decided to use a proxy that allows me to visit the IP address of my development machine on my phone and all traffic would forward to the local domain.
I decided to use Express.JS as it is an easy to use server. Express also has large amount of community contributed middlewares, such as express-http-proxy which fills all of my requirements.
Additionally I use the package "ip" that will discover the local IP address of my development machine.
These dependencies can be installed with:
yarn add express express-http-proxy ip
The proxy server is quite small, and looks as follows:
Update 14/03/2018:
Thanks to a pull request to my example repository by Francisco Presencia, the creator of Server.js, he explains that my original example can actually be cut down to a single line of code.
Server.js already contains the static middleware from Express so there is no need to include and configure the server manually. Server.js assumes that you want to serve static files from a directory called public/ in your project, in which case you can simply create the server as:
require('server')();
If you would like to serve the static files from a different directory, such as the root directory, as in my case you can simply pass a public configuration option when initializing the server. For example:
require('server')({ public: '.' });
This highlights how Server.js is even simpler to use than I assumed.
Server.js is a node based server that is based on Express.js but provides you with an even easier interface to write your server with.
As server.js was only recently released, I was trying to find a tutorial on how to serve a directory of static files but could not find one. After reading the documentation, I noticed that since Server.js is built on express, you can use express middlewares out of the box. Since Express already has a express.static() method, I noitced that I could use this to serve static files as I wanted.
The example server is very basic, it simply serves all files in the current directory.
First of all, I import server and express:
const server = require('server');
const express = require('express');
Next I import the modern method from server.utils that allows us to attach Express middleware to our server:
const { modern } = server.utils;
I then call the express.static middleware, and pass it to modern:
const middleware = modern(express.static('./'));
Finally, I start the server and pass the static middleware:
server(middleware);
The final server is only 7 lines long:
const server = require('server');
const express = require('express');
const { modern } = server.utils;
const middleware = modern(express.static('./'));
server(middleware);
You can test this by writing this to a file called server.js and calling it with node server.js. The server will then be running at: http://localhost:3000/.
If you then write an index.html file in the same directory, it will be served when visiting this address in your browser.
For full example code, please visit this repo: https://github.com/BlakeSimpson/serverjs-static-files
React Native allows you to automatically truncate text that will not fit within its <View> container.
There is a property numberOfLines that can be passed to the <Text> node. For example:
<View style={styles.container}>
<Text numberOfLines={1} style={styles.text}>This is a very long text that will overflow on a small device</Text>
</View>
In most cases this is enough for the device to truncate the text, automatically adding ellipsis to the end of the string () after however many lines of text you have specified (In this case, we only want 1 line).
If you however find that you have added the numberOfLines property but the text is still not truncated, as so:
Then make sure your text node styles have the flex: 1 property. For the example above, the StyleSheet would look like:
var styles = StyleSheet.create({
container: {
flexDirection: 'row',
padding: 10
},
text: {
flex: 1
}
});
Which will allow the <Text> node to apply the truncation properly:
