TwitterFlickrYouTube

Archives de l'auteur: LiBe

How to split an input text into arguments

Posté le par Posté dans G33k, Programmes .

Hi dear Apache commons-cli lover,

You know certainly how to parse a list of arguments into options.

But possibly you may want to provide the same as a pure JVM method ; what about the : callWith(String theArgs) ?

Might sound impossible with a commons-cli library.
You probably have thought about splitting around whitespace tokens, but you forgot that arguments can contain whitespaces characters themselves.

Then how to achieve the parsing from a simple text ?
My solution is to build a powerful regex, using an online IDE called regex101.https://regex101.com/r/B5Rga8/16/tests

An argument can be this, « that », ‘that’, ‘or  »even » that’. Use the regex here from the hyperlink into your code to build a list of arguments from a plain text command line.

react & react native at once : 1 app = 1 program ?

Posté le par Posté dans G33k, Programmes .

One question everyone is likely to ask one day, while using the react framework, is :

« can I use the same app on a browser AND on a mobile device without rewriting the app ? » In other words, is the principle « write once, run everywhere » respected ?

The short answer is no, and the longer one is « yes but ».
There is a quite simple to trick to make a react app work on different devices.

On a react-web app, you will write this kind of render :
<div>

<div>This is some text</div>
<img src= »logo.png » alt= »this is a picture » />

</div>
Whereas on a react-native app, the layout would look like this one :

<View><Text>This is some text</Text>
<Image source= »logo.png » alt= »this is a picture »/></View>

Quite similar, isn’t it ? But problem is that you cannot declare a common declaration for both environments.

…Or you would need to branch with an if instruction. That will work, but it will make the code less concise and you will have some ‘copy/paste’ sessions between your components.

I found a better option, not the best one (I am more of a beginner in react) : Just provide the same language to both environment. Declare a provider in each environment, and make it provide exactly the same markup with some common attributes.

This is how your code looked like before :

import {View, TextInput} from 'react-native'
export default class Console extends Component {
render(){return (
 <View className="console" style={{height:'100%', width:'100%', flex: 1}}>
 <TextInput id="commandLine" value={this.state.command}/>
 </View>
) /* and it only works on a mobile */
}}

And this is how you can change it to make it work on several envs :

export default class Console extends Component {
render(){
const [View, TextInput] = ['View', 'TextInput'].map(componentName => this.context.componentsProvider(componentName))
return (
 <View className="console" style={{height:'100%', width:'100%', flex: 1}}>
 <TextInput id="commandLine" value={this.state.command}/>
 </View>
) /* and it only works on a mobile */
}}

And last but not least, declare a provider which will gives you these elements :

import { Component } from 'react'
import PropTypes from 'prop-types'

export default class ComponentsProvider extends Component {
    getChildContext() {
        return {
            componentsProvider: this.props.impl,
        }
    }

    render() {
        return this.props.children;
    }
}

ComponentsProvider.propTypes = {
    children: PropTypes.element,
    impl: PropTypes.func.isRequired
}
ComponentsProvider.childContextTypes = {
    componentsProvider: PropTypes.func.isRequired,
}


Your app will need to be surrounded by your provider, in each version :

<ComponentsProvider impl={(name) => nativeMapping(name) || ReactNative[name] || MaterialUi[name] || ReactNative.View}>
    <MaterialUi.ThemeProvider uiTheme={uiTheme}>
        <App muiTheme={uiTheme} />
    </MaterialUi.ThemeProvider>
</ComponentsProvider>


Now you are ready to deploy the same app on different devices with very little effort.

Please have a look at my NON-HELLOWORLD example : https://github.com/libetl/amadeus-console
I deployed the same app on google chrome and android. The app is what you see on the screen when you board in a plane or when you complain about your flight booking. The UI is a kind of a console which can help you manage all your bookings.

Webpack2 : an example, a real one ?

Posté le par Posté dans G33k, Programmes .

« Has this ever happened to you ? »
-> You work in a non open minded company, or a company willing to make some progress, but behind in tech.
-> The front part of your stack is in (Java/PHP/Python/You name it) + (naive javascript or some former trendy framework like jquery / backbone / handlebars), and your build tool is as shifted from reality as maven or ant can be.
-> You think you deserve more than to maintain such a legacy stack and to write IE9 compliant code

My solution was to think with Webpack2.

Rather than explaining you what it is, let me define you what it is not :

– Webpack is not (really) a build tool. It would rather be « a module emulation builder ». In other words, it uses all of your resources to bundle them into very few « big files ».
Which means that you will no longer see this :
[Long resources list loading]
…but actually two resources : a webpage and a big script. Which will save the patience of some mobile users, and avoid repetitive server requests to load the same code over and over again.

– Webpack is not a code minifier. It groups css, medias (sound/picture), javascript resources at once. Don’t call that a minifier.

– Webpack is not a compiler. It uses a grammar to filter which resources must be handled, and some rules to declare how they should be transpiled/compressed/grouped/moved/compiled. Actually, it uses some loaders that are able to do the compiling job. Like babel, to be able to code using the latest javascript version (ES2017) while targeting IE9… Like handlebars, even if it is old, if you like it.

– Webpack is not a file manipulation tool. But it can add/change/delete some text inside files, it can copy/cut/paste/zip/unzip some resources. Some plugins are dedicated to such operations, like the CopyWebpackPlugin, or the ExtractTextPlugin.

Enough talk, let’s take an example stack : a « mavened » java webapp with the following js stack :
handlebars, backbone, underscore, jquery, and an invasive homegrown framework to avoid some non homogeneous display.
1°) Start by removing all of the DIY maven plugins. Write this instead in the plugins section:

<plugin>
<groupid>com.github.eirslett</groupid>
                <artifactid>frontend-maven-plugin</artifactid>
                <version>1.3</version>
                <executions>
                    <execution>
                        <id>install node and yarn</id>
                        <goals>
                            <goal>install-node-and-yarn</goal>
                        </goals>
                        <phase>generate-resources</phase>
                        <configuration>
                            <yarnversion>v0.23.2</yarnversion>
                        </configuration>
                    </execution>
                    <execution>
                        <id>yarn install</id>
                        <goals>
                            <goal>yarn</goal>
                        </goals>
                        <phase>generate-resources</phase>
                        <configuration>
                            <arguments>install</arguments>
                        </configuration>
                    </execution>
                    <execution>
                        <id>webpack</id>
                        <goals>
                            <goal>webpack</goal>
                        </goals>
                        <phase>process-resources</phase>
                        <configuration>
                            <environmentvariables>
                                <node_env>${env}</node_env>
                                <version>${project.version}</version>
                                <m2_repository>${maven.repo.local}</m2_repository>
                                <uitk_version>${uitkCoreVersion}</uitk_version>
                            </environmentvariables>
                            <arguments>--hide-modules</arguments>
                        </configuration>
                    </execution>
                </executions>
                <configuration>
                    <nodeversion>v7.9.0</nodeversion>
                </configuration>
            </plugin>

2°) Start a small package.json, it will be the bootstrap of your webpack pipeline :

{
  "name": "my-webapp",
  "description": "EcmaScript pipeline to build the assets of my-webapp",
  "version": "1.0.0",
  "private": true,
  "devDependencies": {
    "webpack": "latest",
    "copy-webpack-plugin": "latest",
    "extract-text-webpack-plugin": "latest",
    "before-build-webpack": "latest",
    "noop-webpack-plugin": "latest",
    "modernizr-webpack-plugin": "latest",
    "style-loader": "latest",
    "css-loader": "latest",
    "less-loader": "latest",
    "img-loader": "latest",
    "url-loader": "latest",
    "imports-loader": "latest",
    "exports-loader": "latest",
    "babel-cli": "latest",
    "babel-core": "latest",
    "babel-loader": "latest",
    "babel-preset-env": "latest",
    "babel-preset-es2015": "latest",
    "babel-polyfill": "latest",
    "handlebars": "latest",
    "handlebars-loader": "latest",
    "file-loader": "latest",
    "modernizr": "latest",
    "modernizr-loader": "latest",
    "jquery": "latest",
    "unzip2": "latest",
    "underscore": "latest",
    "phoneparser": "latest",
    "intl-tel-input": "latest",
    "backbone": "latest",
    "moment": "latest",
    "i18n-js": "latest",
    "mkdirp": "latest",
    "ncp": "latest",
    "less": "latest",
    "glob": "latest",
    "properties-reader": "latest"
  },
  "engines": {
    "node": ">=7.9.0"
  }
}

3°) Write a small webpack pipeline (wepack.config.js) and test it immediately :

const webpack = require('webpack')
const path = require('path')
const fs = require('fs')
const unzip = require('unzip2')
const glob = require('glob')
const WebpackBeforeBuildPlugin = require('before-build-webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const ModernizrWebpackPlugin = require('modernizr-webpack-plugin'

const javascriptFiles = glob.sync(`js/**/*.js`)
const target = path.join(__dirname, 'target/')

module.exports = {
    name: 'webapp-bundle',
    target: 'web',
    entry:  [{`js/bundles/bundle.js`: javascriptFiles,}], output: { path: target, filename: '[name].js' }, module: { rules: [ { test: /\.js$/, use: [{ loader: 'babel-loader', options: { presets: [['es2015']] } }] }, ] } }

That works, but there are so much work to do for a real webapp if you are not working on a hello world page or a calculator, and over all if you must cope with an homegrown framework from your company

4°) Add some plugins to your pipeline :
– prepare your assets before the build (unzip, copy, …) :WebpackBeforeBuildPlugin
– provide some variables that nobody wants to declare explicitely : jquery ($), underscore or lodash (_) :webpack.ProvidePlugin
– extract your assets in non js files, for example for css files : ExtractTextPlugin
– manipulate the results after the compilation step : CopyWebpackPlugin
my own plugins list looks like this one :

plugins: [beforeBuild, listAllHandlebarsFiles, provideGlobalVariables, new ModernizrWebpackPlugin(), /* compile, */ extractCss, copyResults, minify]

5°) Add some rules to help webpack understands what is supposed to happen for each case :

{
                test: /\.hbs$/,
                use: [{
                    loader: 'handlebars-loader',
                    options: {
                        knownHelpers: ['i18nMsg', 'block', 'include', 'includeJsBundle', 'eq', 'json', 'i18nJs',
                            'partial'],
                        partialDirs: [
                            path.join(__dirname, `${webpackAssetsFolder}views`)
                        ],
                        rootRelatve: `${webpackAssetsFolder}views`
                    }
                }],
            },
            {
                test: /\.js$/,
                use: [{
                    loader: 'babel-loader',
                    options: {
                        presets: [['es2015']]
                    }
                }]
            },
            {
                test: /\.less$/,
                use: extractCss.extract({
                    use: ['css-loader', 'less-loader']
                })
            },
            {
                test: /\.css$/,
                use: extractCss.extract({
                    fallback: 'style-loader',
                    use: 'css-loader'
                })
            },

5°) Adapt your homegrown framework to your pipeline. Unzip the resources of the framework and mix them with yours.

You can have a look at how I did at my work : https://gist.github.com/libetl/79023dec57e4f4a02b48ee05b8d34d68
The pipeline (I mean the webpack.config.js file) can be composed of all these steps (mainly) :

import some modules
definition of resources and paths
definitions of complex plugins
output folder and output bundles
source maps (yes or no ?)
webpack rules (which file for which operation)
plugins list

Please do this at home, or at school. You will make your app more reliable and efficient. Good luck.

Write Java code that even your CEO can read (https://github.com/libetl/ideaomatic)

Posté le par Posté dans G33k, Programmes .

Were you trying to write boilerplate code in Java lately ?

List> messageConverters = new ArrayList<>();
MappingJackson2HttpMessageConverter jackson2ConverterOther = new MappingJackson2HttpMessageConverter();
jackson2ConverterOther.setObjectMapper(pluginObjectMapper);
messageConverters.add(jackson2ConverterOther);
return messageConverters;

How much can you be far from the reality of your customers ?

try {
m_jaxbContext = JAXBContext.newInstance(m_contextPackages);
m_state = State.OPERATIONAL;
} catch (Throwable t) {
m_state = State.ERROR;
s_logger.error("Exeption creating JAXBContext for context: " + m_contextPackages, t);
}

Do you feel like understanding your own code ? And your other team members’ code too ?

Then write code that everyone will understand…
https://github.com/libetl/ideaomatic

Make the code as expressive as in English text. Here are some samples that can help you understand what is going on in this library :
https://github.com/libetl/ideaomatic/blob/master/src/test/java/outside/Tests.java

Make your own opinion on the topic and don’t hesitate to tell me if you want to add extra language elements (please post me some issues or some pull requests)

How to colorize an xml by code

Posté le par Posté dans G33k, Programmes .

The following class will help you to do that.

You can easily transform this :

<?xml version="1.0" encoding="UTF-8"?>
<kcfg xmlns="http://www.kde.org/standards/kcfg/1.0"
     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
     xsi:schemaLocation="http://www.kde.org/standards/kcfg/1.0
     http://www.kde.org/standards/kcfg/1.0/kcfg.xsd">
    <kcfgfile name=""/>
    <group name="com.librehat.yahooweather">
        <entry name="woeid" type="String">
            <default></default>
        </entry>
        <entry name="interval" type="Int">
            <default>60</default>
        </entry>
        <entry name="celsius" type="Bool">
            <default>true</default>
        </entry>
        <entry name="fahrenheit" type="Bool">
            <default>false</default>
        </entry>
        <entry name="ms" type="Bool">
            <default>false</default>
        </entry>
        <entry name="kmh" type="Bool">
            <default>true</default>
        </entry>
    </group>
</kcfg>

Into this :

coloredxml

import java.io.File;
import java.io.IOException;
import java.util.Scanner;
import java.util.regex.Matcher;
import java.util.regex.Pattern;
import java.util.stream.Collectors;
import java.util.stream.IntStream;

public class XmlInColorsConverter {

    public static void main (String [] args) throws IOException {
        Scanner scanner = new Scanner(new File(args[0]));
        scanner.useDelimiter("\\A");
        System.out.println(new XmlInColorsConverter().convert(scanner.next()));
    }

    private static final Pattern NAME = Pattern.compile("(?:([a-zA-Z][a-zA-Z0-9]+):)?([a-zA-Z][a-zA-Z0-9._]+)");
    private static final Pattern VAL = Pattern.compile("\"((?:[^\"]|(?< =\\\\)\")*)\"");
    private static final Pattern ATTR = Pattern.compile("(" + NAME + ")\\s*(=)\\s*(" + VAL + ")\\s*");
    private static final Pattern MARKUP = Pattern.compile("(\\s*)(< )(/|\\?)?" + NAME + "\\s*(?:" + ATTR + ")*(/|\\?)?>");

    public String convert(String text) {
        return colorize(text, MARKUP.matcher(text));
    }

    private static String colorize(String input, Matcher matcher) {
        int lastEnd = 0;
        int level = 0;
        StringBuilder result = new StringBuilder();
        while (matcher.find()) {
            String oneMarkup = matcher.group();
            Matcher attrMatcher = ATTR.matcher(oneMarkup);
            String afterLastMatch = input.substring(lastEnd, matcher.start(2) == -1 ? 0 : matcher.start(2));
            level -= "/".equals(matcher.group(3)) ? 1 : 0;
            if (afterLastMatch.matches("\\s*")) {
                result.append("\n").append(IntStream.range(0, level).boxed().map(i -> "    ").collect(Collectors.joining()));
            }else {
                result.append(afterLastMatch);
            }
            level += matcher.group(3) == null ? 1 : 0;
            result.append("\033[1;33m< ").append((matcher.group(3) != null ? matcher.group(3) : "")).append((matcher.group(4) != null ?  "\033[34m" + matcher.group(4) + "\033[1;33m:" : "\033[1;33m")).append(matcher.group(5)).append("\033[0m");
            while (attrMatcher.find()) {
                result.append(" ").append((attrMatcher.group(2) != null ? "\033[34m" + attrMatcher.group(2) + "\033[35m:" : "\033[35m")).append(attrMatcher.group(3)).append("\033[32m=\033[36m").append(attrMatcher.group(5));
            }
            level -= "/".equals(matcher.group(12)) ? 1 : 0;
            result.append("\033[1;33m").append((matcher.group(12) != null ? matcher.group(12) : "")).append(">\033[0m");
            lastEnd = input.charAt(matcher.end()) == '\n' ? matcher.end() + 1 : matcher.end();
        }
        return result.toString();
    }
}

Hubot : how to pipeline your commands ?

Posté le par Posté dans G33k, Programmes .

If you got used to creating new commands in your Hubot server, you will probably remember of this syntax :

robot.hear(/say hello/i, function(res) {/*...*/}
robot.respond(/how are you/i, function(res) {/*...*/}

When you want to combine then into one, the easy way out is to create a spare command like this one :

robot.respond(/hello, how are you/i, function(res) {/*...*/}

Things become more difficult when you need combine a set of different instructions. Theorically, it means that you should create n^k different commands.
I was interested in finding how I could change the commands into a full pipeline with the least possible amount of changes.
And I found an answer (maybe not the best indeed) :

https://gist.github.com/libetl/56763f55cf1d1ac7a01eb6476559eb69
Insert the pipeline object into your code.

And then this is how your existing code is going to change :

instead of this :

robot.hear(/say hello/i, function(res) {/*...*/}
robot.respond(/how are you/i, function(res) {/*...*/}

you will write this :

pipeline.hear(/say hello/i, function(robot, res, resolve) {/*...*/;resolve();}
pipeline.respond(/how are you/i, function(robot, res, resolve) {/*...*/;resolve();}

It is important to call resolve() at the end of the execution so the pipeline knows when to start the next step.

the module.exports should look like this one :
module.exports = pipeline.buildAnswer('(my-commands)')

Here you are, your commands now are all included in your pipeline. Enjoy.

ES6 (or Javascript) : how to loop on the same promise

Posté le par Posté dans G33k, Programmes .

In the era of the promises, who likes to wait for an uncertain amount of time ?

A promise is the key to hope.
No need to setTimeout(function(){}, XXXXX) milliseconds. You don’t know if you waited too much, and even worse… : you don’t know if you did not wait enough.

Actually, you can tell your program to wait for a promise, then check a condition, then chain a new promise if the condition is not met. The only subtle delta to achieve this is to trigger the condition testing and the return value inside functions ; here is an example :


aPromise.then((pollResponse) => {
const promiseWhile = (condition, oldResponse, promiseGenerator) => {
if (!condition(oldResponse)) {
return typeof oldResponse === 'function' ? oldResponse : () => oldResponse
}
return promiseGenerator().then((newResponse) => promiseWhile(condition, newResponse, promiseGenerator))
}

const promiseGenerator = (execute, oldResponse) => {
return promiseWhile((newResponse) => newResponse.code === 'PENDING', oldResponse,
() => execute().then((newResponse) => promiseGenerator(execute, newResponse)))
}

return promiseGenerator(() => query(`/myApi/pollStatus`), pollResponse)
})
.then((pollResponse) => {
const result = pollResponse()
console.log(result.code) //'COMPLETE'
})

Given a method called query, which returns either {code: ‘PENDING’} or {code: ‘COMPLETE’}, This code runs the query method regularly and stops when the value of code is no more ‘PENDING’. But this does not wait for an arbitrary amount of time.

If the condition is not true anymore, it returns a function whose result is the value to fetch.
Else it chains the previously resolved promise with a promise calling query again and checking the same condition again.

That is all.

There is also a lighter version without value return, and where ‘query’ is immediate (actually, it occurs within condition()), but unfortunately you have to define a small interval to avoid saturation on your event loop :


const waitWhile = (condition, resolve) => {
if (!condition()) {
resolve()
}
setTimeout(() => waitWhile(condition, resolve), 1)
}

git branches : easy way out (Not for purists)

Posté le par Posté dans G33k, Programmes .

Bouncing on this old article about git (http://libe.toile-libre.org/?p=1318), I give you some more commands to help you work with git in an efficient way…
Warn : this is useful in the case where you work on a centralized git version control, and when the work is stored in the ‘origin’ remote server.


[alias]
singleCommit = "!f() { git pull origin develop --no-edit && git push && git reset --soft origin/master && git commit -m \"$1\" && git push -f; }; f"
singleCommitAs = "!f() { git pull origin develop --no-edit && git push && git reset --soft origin/master && git commit -m \"$2\" --author \"$1\" && git push -f; }; f"
singleCommitFrom = "!f() { git pull origin $1 --no-edit && git push && git reset --soft $1 && git commit -m \"$2\" && git push -f; }; f"
addToSingleCommit = "!f() { git add \"$1\" && git singleCommit $(git log --format=%B -n 1); }; f"

git singleCommit « message » : group together all the commits made in the actual branch, ahead of master, into one, and updates the current branch
git singleCommitAs « someone » « message » : same as git singleCommit, with the ability to commit for someone else
git singleCommitFrom « branch » « message » : same as git singleCommit, but synchronizes the work with a branch other than master
git addToSingleCommit « path » : adds path to the version control, grab the last commit message, then group all the commits ahead of master together into one commit.

Android : one or two flashy tips

Posté le par Posté dans G33k, Programmes .

Ever wanted to use the same FloatingActionButton for several purposes without poping/replacing it ?
If your need is to change the color of your button to fade it smoothly, you can think of a color fading animation.
This can be useful if you want to recycle a « play » button as a « stop » button.

You can save your breathe implementing this animation by using this code : https://gist.github.com/anonymous/0e985307c0e1e11c589b8932b2913fd9#file-fromcolortocolor-java

What if you have a material design app, with a tab layout (several tabs) and you want to make it less linear, by scrolling the fabs in an original way ?

You can make a page listener on the ViewPager and implement some animation cases according to the currently active tab : https://gist.github.com/anonymous/0e985307c0e1e11c589b8932b2913fd9#file-onpagelistener-java
In this example, we have three tabs. In the first tab, the fab pops over the screen. In the second one, the fab scrolls slower than the screen, and in the third one, it scrolls up from the bottom right corner of the screen.

Feel free to use these snippets. If you want to see this animations in action, just download my app at https://play.google.com/store/apps/details?id=org.toilelibre.libe.athg2sms.

Thanks for reading me and happy 2017.

Java : How to speak about events in a material world

Posté le par Posté dans G33k, Programmes .

The title of this article is assumed to not be IT related, but it speaks about java. I just wanted it to be of common sense.

Most people writing software today only speak about what we have (the objects), and not about what we know (the events). And sometimes they refuse to understand the meaning of the knowledge (with its history) in favor of its only content.

…
But sometimes it can be useful.

« History is not important » means « Giving the money to the wrong person is not important ». Why do I say that ?
If we address a bank check of $100 to a Mr John and then a malicious person adds an ‘s’ to the recipient, it will become Mr Johns. We give the money anyway, and we don’t know that we gave it to the wrong person… In fact, our bank account does not notice the problem, we are debited of $100. We are attacked and we just lost data about the attack.

What is the problem behind ? We lose track of known data just because the state has changed.
How to deal with ? Well it is quite simple : past history won’t change.

Therefore, storing the past data can ensure everything gets tracked. The bank check will be photocopied before and after each event (like someone appending a ‘s’ char to a family name). Therefore we can validate that nothing wrong has happened during the process by scanning the bank check history.

Howto ? You can implement it on your own, but that is really a boilerplate to code.
I have tried the JaVers library and wrote a very small webapp to maintain an in-memory user api (https://github.com/libetl/test-with-javers)

Things stay simple : just keep on persisting your data as you would in a non-event-sourced program, but at the last moment, let JaVers work directly with the repository as following :
interface PersonRepository extends MongoRepository {}

You are now able to query data as usual, but also examine the changes in data and read some old snapshots : (https://github.com/libetl/test-with-javers/blob/master/src/main/java/org/toilelibre/libe/person/PersonResource.java).

Then, reading the current state of the bank check would need to get http://myapi.com/bankcheck/01theid23
Reading the old values of the bank check is as easy as reading http://myapi.com/bankcheck/01theid23/snapshots/1

…And you can figure out that someone replaced « Mr John » by « Mr Johns » by reading http://myapi.com/bankcheck/01theid23/changes/1 !
The response will look like this :
1. ValueChange{
globalId:'com.myapi.bankcheck/01theid23',
property:'to', oldVal:'Mr John', newVal:'Mr Johns'}

Then, you will go beyond things, you will be less materialist and care only about the facts… what matters really to your users.