Why Spring Webflux is better than HttpClient – HowTo in Java

A lot of Boilerplate Code can be avoided.

AND: it is reactive, non-blocking.

Example (really, an example) – the ‚old way‘:

        HttpPost request = new HttpPost("http://www.someurl.de");
        request.setHeader(HttpHeaders.ACCEPT, ContentType.APPLICATION_JSON.getMimeType());
        request.setHeader(HttpHeaders.CONTENT_TYPE, 
                                              ContentType.APPLICATION_JSON.getMimeType());

        String json = someJsonConverter.toJson(someRequestDto);
        HttpEntity stringEntity = new StringEntity(json, ContentType.APPLICATION_JSON);
        request.setEntity(stringEntity);

        try {
            CloseableHttpResponse response2 = httpclient.execute(request);

            if (HttpStatus.SC_CREATED != response2.getStatusLine().getStatusCode()) {
                //TODO eventually handle http statuus additionally
                return returnHandleAndDoNotThrow();
            }
            SomeResponseDto responseDto = (SomeResponseDto) 
                someJsonConverter.toDto(EntityUtils.toString(response.getEntity()), 
                                                               SomerResponseDto.class);
            return Optional.ofNullable(responseDto);
        } catch (IOException e) {
            return Optional.empty();;
        }

The new way:

        Function<UriBuilder, URI> function = uriBuilder ->  
                                                  uriBuilder.path("/somePath").build();
        return client.post()
                .uri(function)
                .accept(MediaType.APPLICATION_JSON)
                .contentType(MediaType.APPLICATION_JSON)
                .body(Mono.just(someDtoInstance), SomeDto.class)
                .exchange()
                .block()
                .bodyToFlux(someResponseDto.class);
//any errors, status codes are handled by a filter which you can define as follows:

Howto:

I am using Spring Boot for this, so I do have a Config class.

import ...
import org.springframework.context.annotation.Bean;
import reactor.core.publisher.Mono;
import org.springframework.web.reactive.function.client.ExchangeFilterFunction;
import org.springframework.web.reactive.function.client.WebClient;
import org.springframework.context.annotation.Configuration;


@Configuration
public class WebClientConfig {

    //Create the Bean for Autowiring
    @Bean
    public WebClient webClient() {
        return WebClient.builder().filter(someStatusHandlingFilter()).build();
    }
    
    //Handle status codes
    public static ExchangeFilterFunction someStatusHandlingFilter() {
        return ExchangeFilterFunction.ofResponseProcessor(clientResponse -> {
            if ((clientResponse.statusCode().is4xxServerError() 
                || clientResponse.statusCode().is5xxClientError())) {
                return clientResponse                        
                        .bodyToMono(SomeException.class)
                        .flatMap(errorBody -> {
                            return Mono.error(someExceptionToLog);
                        });
            } else {
                return Mono.just(clientResponse);
            }
        });
    }
}

Maven:

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-integration</artifactId>
            <version>your latest version goes here</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-webflux</artifactId>
            <version>your latest version goes here</version>
        </dependency>

Java Stream Custom Collector – Howto

Sometimes the commonly available Collectors are not what we need.
Here is one example for a Singleton Custom Collector:

public static <T> Collector<T, ?, T> singleton() {
    return Collectors.collectingAndThen(
            Collectors.toList(), list -> {
                if (list.size() != 1) {
                    // or log and return nil
                    throw new CustomException();
                }
                return list.get(0);
            }
    );
}

//and use it:
        myObjectToStream.stream()
        .filter(elem -> elem.getExampleAttribute() == 0).collect(singleton());

Howto generate a new SSH key pair

ssh-keygen -t ed25519 -C "email@example.com"

Note that in this example we use an ed25519 key.

The -c is providing a comment to divide the key amongst others.

I alwas use the suggested path and just klick enter 😉

JUnit Test String contained / contains String

With the Hamcrest Matchers, do this:

//imports
import static org.hamcrest.MatcherAssert.assertThat;
import static org.hamcrest.core.StringContains.containsString;

//assert
assertThat(actualData, containsString(expectedData));

Make JavaScript Code prettier | Format your JS or Typescript Code with Prettier in IntelliJ IDEA or Webstorm

Java Developers know it as Checkstyle – JavaScript has similar things, one of them I highly recommend is prettier.

From the Marketplace PlugIns, just install Node and the Prettier PlugIn.

In your terminal or shell, type:

  • npm install --save-dev --save-exact prettier
  • npm install --global prettier
  1. In the Settings/Preferences dialog Ctrl+Alt+S
  2. go to Languages and Frameworks | JavaScript | Prettier.
  3. Choose the Node.js interpreter to use.
  4. From the Prettier package list, select the prettier installation to use.
  5. IntelliJ IDEA will locate the prettier package itself and the field is filled in automatically.
  6. To run Prettier automatically against specific files every time such file is changed and saved, select the Run on save for files checkbox.
  7. Provide a pattern that defines the set of files to be reformatted every timeon save.

Prettier will now also format your files on save.

In you package.json you can specify prettier:

In the project where Prettier is enabled, open package.json and click Yes in the pane at the top of the tab. Sometimes it is shown in the context menu, right click and bottom of the options in the list.

Config File

Example of a .prettierrc.json:

{
"trailingComma": "es5",
"tabWidth": 4,
"semi": false,
"singleQuote": true,
"overrides": [
{
"files": "*.test.js",
"options": {
"semi": true
}
},
{
"files": ["*.html", "legacy/**/*.js", "*.tsx"],
"options": {
"tabWidth": 4
}
}
]
}

Format inline

I select the lines of Code and just press CMD+ALT+SHIFT+P
The Code will be reformatted instantly.

Link to Prettier: https://prettier.io/docs/en/configuration.html

Test Mobile Devices with Chrome Devtools – Howto

Press F12 or just open Chrome Dev Tools.
Click on the Toggle Device Icon (marked in blue).

In your browser window, you will see this resolution modifyier:

Modify according to your needs to test different screen resolutions.

NOTE: Screen Resolution CANNOT be simulated by changing the browser window size 😉

Delay function in JavaScript JS

The timeout function puts a thread to sleep, which is often NOT what you want:

function someFunction(param) {
    setTimeout(function () {
        if (param == -1) {
            console.log('Parameter is -1');
        }
    }, 2000);//2 sec delay
}

Instead with ECMA6 you can use the async/await syntax.

const delay = ms => new Promise(res => setTimeout(res, ms));

const delayFunction = async () => {
  await delay(2000);
  console.log("[X] 2 sec delay.");
};

The Code looks like being synchronous while it is in fact asynchronous. This makes it easier to maintain. Plus you avoid a freeze in UIs in case you want to delay for the human eye in a UI…

Multiple Webapps with Docker Compose

  • Learn how to setup a custom network for your containers: container A talks to container B
  • Learn how to run multiple webapps inside Docker containers on different ports with Docker Compose

Download complete source code here

  • Create the network with $docker network create skynet
  • Run with $docker-compose up
  • Stop with $<Ctrl + C>
  • Clean up from time to time (beware, network will be deleted as well) with $docker system prune -a -f
  • access via http://localhost:8080/sample
  • access via http://localhost:8081/sample

How to debug a React Application in Webstorm

In Webstorm, start your application. I prefer the command line:
$ npm start

Then create a new JavaScript debug configuration:

Run – Edit configurations … add JavaScript Debug.

Choose your project path (because we are Harder IT Consulting, our nickname is HIT – C:\HIT\<application>)

Paste the URL http://localhost:3000 (or the URL you have configured your React Application to run on, 3000 is the default).

In the Terminal, type $npm start
When the application is started, start the Debugging:

Press the DEBUG button at the top right corner with your Debug configuration selected.

Do not forget the React Devtools which come in quite handy. They exist for Chrome, Firefox and Edge. Chrome is https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi