Christian Zellot's Blog

MicroFrontends with Vue

Microservices are a well known concept nowadays. Handling encapsulated logic in different applications, can be a nice fit for bigger teams to avoid problems in deployments and development speed. Most of the time though, people are talking about the backend, where the UI part to some extend stays as a black box. One of the solutions to also further break down the UI is the concept of microfrontends which we will further explore here.

There are obviously also other ways to solve issues (I can highly recommend reading Sam Newmans awesome book on this https://samnewman.io/books/building_microservices_2nd_edition/ ), but one way to decompose your UI might be as following.

Each service not only contains the backend logic which then gets called the from one service to render the UI, but rather each service comes with its own UI which then gets loaded into an application which keeps an overview of all the systems to load. This allows us to deploy the full service UI and backend on its own without the need to deploy one big system for each change. This avoids keeping two systems too much in sync in terms of deployments.

In order to do this I used a vue js setup, where we have one container app, which further loads asynchronously applications into the main container (this is heavily inspired by https://blog.bitsrc.io/how-to-develop-microfrontends-using-react-step-by-step-guide-47ebb479cacd

To achieve this one component was written:

<template>
  <div :id="this.containerName()" />
</template>

<script>
//utility function to generate a uuid (I didn't wanted to import the uuid
//lib just for a random string
function uuidv4() {
  return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
      (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
  );
}
export default {
  name: "MicroFrontend",
  props: {
    // name of the microfrontend like `wisdom` or `dicreoll`
    name: {
      type: String,
      required: true
    },
    // host where the script should be loaded from
    host: {
      type: String,
      required: true
    },
    // define a static container name rather than a generic one
    // not needed if you are ok with random divs all the time
    staticContainerName: {
      type: String,
      required: false,
      default: null
    }
  },
  data: function () {
    return {
      uuid: uuidv4()
    }
  },
  methods: {
    // calculates the container id we load the microfrontend app into
    containerName() {
      if(this.staticContainerName != null) {
        return this.staticContainerName;
      }
      return `${ this.name }-${this.uuid}-container`;
    }
  },
  mounted() {//
    // id is generated by frontend - this will avoid loading the same
    // script twice
    const scriptId = `micro-frontend-script-${this.name}`;
    const renderMicroFrontend = () => {
      const fnName = `render${this.name}`;
      const containerName = `#${this.containerName()}`;
      //load the render function per convention and handover the container id
      window[fnName](containerName);
    };
    if (document.getElementById(scriptId)) {
      renderMicroFrontend();
      return;
    }
    //first load the manifest.json this contains the way forward
    fetch(`${this.host}/manifest.json`)
        .then((res) => res.json())
        .then((manifest) => {
          const script = document.createElement("script");
          script.id = scriptId;
          
          script.crossOrigin = "";
          //load out the path to the main.js file
          script.src = `${this.host}/${manifest["src/main.js"]["file"]}`;
          script.onload = () => {
            // call the function defined on top which will resolve then the app
            renderMicroFrontend();
          };
          document.head.appendChild(script);
        });
  }
};
</script>

<style scoped>
</style>

At the mounted stage we will trigger a check and if necessary a load of the corresponding script files.

Each script is ensured to be loaded only once, where the script id is the identifier here. Each microfrontend must follow a convention here and offer in its own application a function called render<name> (e.g. renderDiceRoll ). The manifest json must per convention offer a file with src/main.js which consists of the render functions. The script is than attached to the document header section so that it can be loaded. Afterwards the function is called, which calls the actual render function of the microfrontend app.

Calling one microfrontend is than as simple as including this in the main container.

<vue-micro-frontend name="diceroll" host="http://localhost:8000"/>

The full sample can be found here https://github.com/zelle7/vue3_microfrontend_poc

Not solved here

Things which are left out here:

Authentication
Communication between services
Different technologies (like loading vue3 and vue2 or even things like react)

Links

Sam Newman on Microservices https://samnewman.io/books/building_microservices_2nd_edition/
Same concept but with React https://blog.bitsrc.io/how-to-develop-microfrontends-using-react-step-by-step-guide-47ebb479cacd
Github Repo with the code – https://github.com/zelle7/vue3_microfrontend_poc

Playing around with tkinter

A nice tool I’ve found recently using python and tkinter is pygubu-designer. (used for a playing around with python project – https://github.com/zelle7/websocketocppgui)

A typical gui, even the simple ones like those which are build with tkinter come to a point where it become quite cumbersome generating all the variables and/or properties which define the elements in the gui. At least for me, it is getting confusing quite fast and you have a lot of starting and stopping the application, to see if your updates have been successful. The pygubu-designer comes with some a simple gui which allows you to drag in th elements you need. In addition to that you can configure various things (from visual stuff up to click handler functions).

You can install the package via pip(package pygubu https://pypi.org/project/pygubu/ ), and start in the commandline with pygubu-designer.The gui looks like this:

The left part is the configuration part and the right things you see is a preview of the app and how it will look like. The tool itself is generating an ui-file which is just a file with xml content.

One thing which was a little bit confusing at the beginning: There is no way to just drop existing elements into others. e.g. drag an existing label into a frame. As a workaround you can cut the elements and paste them into the wanted containers. Another thing is that you can move elements up, down, left, right with ALT + (I|K|J|L).

Maven Basis Struktur für ein Executable Jar File mit Dependencies

29. Mai 2015
by Christian Zellot

Um ein executeble jar File mit maven zu erstellen, wird folgendes xml benötigt.


<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>lire9gag</groupId>
    <artifactId>at.rumpelcoders.lire9gag</artifactId>
    <version>1.0-SNAPSHOT</version>

    <!-- Output to jar format -->
    <packaging>jar</packaging>

    <properties>
        <jdk.version>1.8</jdk.version>
        <junit.version>4.11</junit.version>
        <log4j.version>1.2.17</log4j.version>
        <maven.compiler.plugin.version>3.1</maven.compiler.plugin.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>${junit.version}</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>log4j</groupId>
            <artifactId>log4j</artifactId>
            <version>${log4j.version}</version>
        </dependency>
    </dependencies>

    <build>
        <finalName>lire9gag</finalName>
        <plugins>
            <!-- Set a JDK compiler level -->
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>${maven.compiler.plugin.version}</version>
                <configuration>
                    <source>${jdk.version}</source>
                    <target>${jdk.version}</target>
                </configuration>
            </plugin>

            <!-- Make this jar executable -->
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-jar-plugin</artifactId>
                <configuration>
                    <!-- comment in to DO NOT include log4j.properties file in your Jar
                    <excludes>
                        <exclude>**/log4j.properties</exclude>
                    </excludes>
                    -->
                    <archive>
                        <manifest>
                            <!-- Jar file entry point -->
                            <mainClass>at.rumpelcoders.lire9gag.Main</mainClass>
                        </manifest>
                    </archive>
                </configuration>
            </plugin>

        </plugins>
    </build>

</project>

Es wurde hier zusätzlich log4j und junit eingefügt da diese oft gebraucht werden.

Sollte folgender Fehler auftreten:


[ERROR] BUILD ERROR
[INFO] ------------------------------------------------------------------------
[INFO] Fatal error compiling

Embedded error: invalid target release: 1.8
[INFO] ------------------------------------------------------------------------

Prüft die JAVA_HOME Variable [code]echo $JAVA_HOME[/code] auf die entsprechende Java Version eingestellt ist.

Das jar-File kann anschließend unter „target/groupId.jar“ gefunden werden

Hilfreiche Links:

Font Awesome Unicodes

Nach dem ich heute längere Zeit damit verbracht habe, die passenden Unicodes zu den Font Awesome Icons zu parsen, stelle ich hier nochmal das JSON zur Verfügung. Vielleicht findet ja jemand Verwendung dafür. (Stand 17.02.2015)



{"fa-glass":"\u000","fa-music":"\u001","fa-search":"\u002","fa-envelope-o":"\u003","fa-heart":"\u004","fa-star":"\u005","fa-star-o":"\u006","fa-user":"\u007","fa-film":"\u008","fa-th-large":"\u009","fa-th":"\u00a","fa-th-list":"\u00b","fa-check":"\u00c","fa-remove":"\u00d","fa-close":"\u00d","fa-times":"\u00d","fa-search-plus":"\u00e","fa-search-minus":"\u010","fa-power-off":"\u011","fa-signal":"\u012","fa-gear":"\u013","fa-cog":"\u013","fa-trash-o":"\u014","fa-home":"\u015","fa-file-o":"\u016","fa-clock-o":"\u017","fa-road":"\u018","fa-download":"\u019","fa-arrow-circle-o-down":"\u01a","fa-arrow-circle-o-up":"\u01b","fa-inbox":"\u01c","fa-play-circle-o":"\u01d","fa-rotate-right":"\u01e","fa-repeat":"\u01e","fa-refresh":"\u021","fa-list-alt":"\u022","fa-lock":"\u023","fa-flag":"\u024","fa-headphones":"\u025","fa-volume-off":"\u026","fa-volume-down":"\u027","fa-volume-up":"\u028","fa-qrcode":"\u029","fa-barcode":"\u02a","fa-tag":"\u02b","fa-tags":"\u02c","fa-book":"\u02d","fa-bookmark":"\u02e","fa-print":"\u02f","fa-camera":"\u030","fa-font":"\u031","fa-bold":"\u032","fa-italic":"\u033","fa-text-height":"\u034","fa-text-width":"\u035","fa-align-left":"\u036","fa-align-center":"\u037","fa-align-right":"\u038","fa-align-justify":"\u039","fa-list":"\u03a","fa-dedent":"\u03b","fa-outdent":"\u03b","fa-indent":"\u03c","fa-video-camera":"\u03d","fa-photo":"\u03e","fa-image":"\u03e","fa-picture-o":"\u03e","fa-pencil":"\u040","fa-map-marker":"\u041","fa-adjust":"\u042","fa-tint":"\u043","fa-edit":"\u044","fa-pencil-square-o":"\u044","fa-share-square-o":"\u045","fa-check-square-o":"\u046","fa-arrows":"\u047","fa-step-backward":"\u048","fa-fast-backward":"\u049","fa-backward":"\u04a","fa-play":"\u04b","fa-pause":"\u04c","fa-stop":"\u04d","fa-forward":"\u04e","fa-fast-forward":"\u050","fa-step-forward":"\u051","fa-eject":"\u052","fa-chevron-left":"\u053","fa-chevron-right":"\u054","fa-plus-circle":"\u055","fa-minus-circle":"\u056","fa-times-circle":"\u057","fa-check-circle":"\u058","fa-question-circle":"\u059","fa-info-circle":"\u05a","fa-crosshairs":"\u05b","fa-times-circle-o":"\u05c","fa-check-circle-o":"\u05d","fa-ban":"\u05e","fa-arrow-left":"\u060","fa-arrow-right":"\u061","fa-arrow-up":"\u062","fa-arrow-down":"\u063","fa-mail-forward":"\u064","fa-share":"\u064","fa-expand":"\u065","fa-compress":"\u066","fa-plus":"\u067","fa-minus":"\u068","fa-asterisk":"\u069","fa-exclamation-circle":"\u06a","fa-gift":"\u06b","fa-leaf":"\u06c","fa-fire":"\u06d","fa-eye":"\u06e","fa-eye-slash":"\u070","fa-warning":"\u071","fa-exclamation-triangle":"\u071","fa-plane":"\u072","fa-calendar":"\u073","fa-random":"\u074","fa-comment":"\u075","fa-magnet":"\u076","fa-chevron-up":"\u077","fa-chevron-down":"\u078","fa-retweet":"\u079","fa-shopping-cart":"\u07a","fa-folder":"\u07b","fa-folder-open":"\u07c","fa-arrows-v":"\u07d","fa-arrows-h":"\u07e","fa-bar-chart-o":"\u080","fa-bar-chart":"\u080","fa-twitter-square":"\u081","fa-facebook-square":"\u082","fa-camera-retro":"\u083","fa-key":"\u084","fa-gears":"\u085","fa-cogs":"\u085","fa-comments":"\u086","fa-thumbs-o-up":"\u087","fa-thumbs-o-down":"\u088","fa-star-half":"\u089","fa-heart-o":"\u08a","fa-sign-out":"\u08b","fa-linkedin-square":"\u08c","fa-thumb-tack":"\u08d","fa-external-link":"\u08e","fa-sign-in":"\u090","fa-trophy":"\u091","fa-github-square":"\u092","fa-upload":"\u093","fa-lemon-o":"\u094","fa-phone":"\u095","fa-square-o":"\u096","fa-bookmark-o":"\u097","fa-phone-square":"\u098","fa-twitter":"\u099","fa-facebook-f":"\u09a","fa-facebook":"\u09a","fa-github":"\u09b","fa-unlock":"\u09c","fa-credit-card":"\u09d","fa-rss":"\u09e","fa-hdd-o":"\u0a0","fa-bullhorn":"\u0a1","fa-bell":"\u0f3","fa-certificate":"\u0a3","fa-hand-o-right":"\u0a4","fa-hand-o-left":"\u0a5","fa-hand-o-up":"\u0a6","fa-hand-o-down":"\u0a7","fa-arrow-circle-left":"\u0a8","fa-arrow-circle-right":"\u0a9","fa-arrow-circle-up":"\u0aa","fa-arrow-circle-down":"\u0ab","fa-globe":"\u0ac","fa-wrench":"\u0ad","fa-tasks":"\u0ae","fa-filter":"\u0b0","fa-briefcase":"\u0b1","fa-arrows-alt":"\u0b2","fa-group":"\u0c0","fa-users":"\u0c0","fa-chain":"\u0c1","fa-link":"\u0c1","fa-cloud":"\u0c2","fa-flask":"\u0c3","fa-cut":"\u0c4","fa-scissors":"\u0c4","fa-copy":"\u0c5","fa-files-o":"\u0c5","fa-paperclip":"\u0c6","fa-save":"\u0c7","fa-floppy-o":"\u0c7","fa-square":"\u0c8","fa-navicon":"\u0c9","fa-reorder":"\u0c9","fa-bars":"\u0c9","fa-list-ul":"\u0ca","fa-list-ol":"\u0cb","fa-strikethrough":"\u0cc","fa-underline":"\u0cd","fa-table":"\u0ce","fa-magic":"\u0d0","fa-truck":"\u0d1","fa-pinterest":"\u0d2","fa-pinterest-square":"\u0d3","fa-google-plus-square":"\u0d4","fa-google-plus":"\u0d5","fa-money":"\u0d6","fa-caret-down":"\u0d7","fa-caret-up":"\u0d8","fa-caret-left":"\u0d9","fa-caret-right":"\u0da","fa-columns":"\u0db","fa-unsorted":"\u0dc","fa-sort":"\u0dc","fa-sort-down":"\u0dd","fa-sort-desc":"\u0dd","fa-sort-up":"\u0de","fa-sort-asc":"\u0de","fa-envelope":"\u0e0","fa-linkedin":"\u0e1","fa-rotate-left":"\u0e2","fa-undo":"\u0e2","fa-legal":"\u0e3","fa-gavel":"\u0e3","fa-dashboard":"\u0e4","fa-tachometer":"\u0e4","fa-comment-o":"\u0e5","fa-comments-o":"\u0e6","fa-flash":"\u0e7","fa-bolt":"\u0e7","fa-sitemap":"\u0e8","fa-umbrella":"\u0e9","fa-paste":"\u0ea","fa-clipboard":"\u0ea","fa-lightbulb-o":"\u0eb","fa-exchange":"\u0ec","fa-cloud-download":"\u0ed","fa-cloud-upload":"\u0ee","fa-user-md":"\u0f0","fa-stethoscope":"\u0f1","fa-suitcase":"\u0f2","fa-bell-o":"\u0a2","fa-coffee":"\u0f4","fa-cutlery":"\u0f5","fa-file-text-o":"\u0f6","fa-building-o":"\u0f7","fa-hospital-o":"\u0f8","fa-ambulance":"\u0f9","fa-medkit":"\u0fa","fa-fighter-jet":"\u0fb","fa-beer":"\u0fc","fa-h-square":"\u0fd","fa-plus-square":"\u0fe","fa-angle-double-left":"\u100","fa-angle-double-right":"\u101","fa-angle-double-up":"\u102","fa-angle-double-down":"\u103","fa-angle-left":"\u104","fa-angle-right":"\u105","fa-angle-up":"\u106","fa-angle-down":"\u107","fa-desktop":"\u108","fa-laptop":"\u109","fa-tablet":"\u10a","fa-mobile-phone":"\u10b","fa-mobile":"\u10b","fa-circle-o":"\u10c","fa-quote-left":"\u10d","fa-quote-right":"\u10e","fa-spinner":"\u110","fa-circle":"\u111","fa-mail-reply":"\u112","fa-reply":"\u112","fa-github-alt":"\u113","fa-folder-o":"\u114","fa-folder-open-o":"\u115","fa-smile-o":"\u118","fa-frown-o":"\u119","fa-meh-o":"\u11a","fa-gamepad":"\u11b","fa-keyboard-o":"\u11c","fa-flag-o":"\u11d","fa-flag-checkered":"\u11e","fa-terminal":"\u120","fa-code":"\u121","fa-mail-reply-all":"\u122","fa-reply-all":"\u122","fa-star-half-empty":"\u123","fa-star-half-full":"\u123","fa-star-half-o":"\u123","fa-location-arrow":"\u124","fa-crop":"\u125","fa-code-fork":"\u126","fa-unlink":"\u127","fa-chain-broken":"\u127","fa-question":"\u128","fa-info":"\u129","fa-exclamation":"\u12a","fa-superscript":"\u12b","fa-subscript":"\u12c","fa-eraser":"\u12d","fa-puzzle-piece":"\u12e","fa-microphone":"\u130","fa-microphone-slash":"\u131","fa-shield":"\u132","fa-calendar-o":"\u133","fa-fire-extinguisher":"\u134","fa-rocket":"\u135","fa-maxcdn":"\u136","fa-chevron-circle-left":"\u137","fa-chevron-circle-right":"\u138","fa-chevron-circle-up":"\u139","fa-chevron-circle-down":"\u13a","fa-html5":"\u13b","fa-css3":"\u13c","fa-anchor":"\u13d","fa-unlock-alt":"\u13e","fa-bullseye":"\u140","fa-ellipsis-h":"\u141","fa-ellipsis-v":"\u142","fa-rss-square":"\u143","fa-play-circle":"\u144","fa-ticket":"\u145","fa-minus-square":"\u146","fa-minus-square-o":"\u147","fa-level-up":"\u148","fa-level-down":"\u149","fa-check-square":"\u14a","fa-pencil-square":"\u14b","fa-external-link-square":"\u14c","fa-share-square":"\u14d","fa-compass":"\u14e","fa-toggle-down":"\u150","fa-caret-square-o-down":"\u150","fa-toggle-up":"\u151","fa-caret-square-o-up":"\u151","fa-toggle-right":"\u152","fa-caret-square-o-right":"\u152","fa-euro":"\u153","fa-eur":"\u153","fa-gbp":"\u154","fa-dollar":"\u155","fa-usd":"\u155","fa-rupee":"\u156","fa-inr":"\u156","fa-cny":"\u157","fa-rmb":"\u157","fa-yen":"\u157","fa-jpy":"\u157","fa-ruble":"\u158","fa-rouble":"\u158","fa-rub":"\u158","fa-won":"\u159","fa-krw":"\u159","fa-bitcoin":"\u15a","fa-btc":"\u15a","fa-file":"\u15b","fa-file-text":"\u15c","fa-sort-alpha-asc":"\u15d","fa-sort-alpha-desc":"\u15e","fa-sort-amount-asc":"\u160","fa-sort-amount-desc":"\u161","fa-sort-numeric-asc":"\u162","fa-sort-numeric-desc":"\u163","fa-thumbs-up":"\u164","fa-thumbs-down":"\u165","fa-youtube-square":"\u166","fa-youtube":"\u167","fa-xing":"\u168","fa-xing-square":"\u169","fa-youtube-play":"\u16a","fa-dropbox":"\u16b","fa-stack-overflow":"\u16c","fa-instagram":"\u16d","fa-flickr":"\u16e","fa-adn":"\u170","fa-bitbucket":"\u171","fa-bitbucket-square":"\u172","fa-tumblr":"\u173","fa-tumblr-square":"\u174","fa-long-arrow-down":"\u175","fa-long-arrow-up":"\u176","fa-long-arrow-left":"\u177","fa-long-arrow-right":"\u178","fa-apple":"\u179","fa-windows":"\u17a","fa-android":"\u17b","fa-linux":"\u17c","fa-dribbble":"\u17d","fa-skype":"\u17e","fa-foursquare":"\u180","fa-trello":"\u181","fa-female":"\u182","fa-male":"\u183","fa-gittip":"\u184","fa-gratipay":"\u184","fa-sun-o":"\u185","fa-moon-o":"\u186","fa-archive":"\u187","fa-bug":"\u188","fa-vk":"\u189","fa-weibo":"\u18a","fa-renren":"\u18b","fa-pagelines":"\u18c","fa-stack-exchange":"\u18d","fa-arrow-circle-o-right":"\u18e","fa-arrow-circle-o-left":"\u190","fa-toggle-left":"\u191","fa-caret-square-o-left":"\u191","fa-dot-circle-o":"\u192","fa-wheelchair":"\u193","fa-vimeo-square":"\u194","fa-turkish-lira":"\u195","fa-try":"\u195","fa-plus-square-o":"\u196","fa-space-shuttle":"\u197","fa-slack":"\u198","fa-envelope-square":"\u199","fa-wordpress":"\u19a","fa-openid":"\u19b","fa-institution":"\u19c","fa-bank":"\u19c","fa-university":"\u19c","fa-mortar-board":"\u19d","fa-graduation-cap":"\u19d","fa-yahoo":"\u19e","fa-google":"\u1a0","fa-reddit":"\u1a1","fa-reddit-square":"\u1a2","fa-stumbleupon-circle":"\u1a3","fa-stumbleupon":"\u1a4","fa-delicious":"\u1a5","fa-digg":"\u1a6","fa-pied-piper":"\u1a7","fa-pied-piper-alt":"\u1a8","fa-drupal":"\u1a9","fa-joomla":"\u1aa","fa-language":"\u1ab","fa-fax":"\u1ac","fa-building":"\u1ad","fa-child":"\u1ae","fa-paw":"\u1b0","fa-spoon":"\u1b1","fa-cube":"\u1b2","fa-cubes":"\u1b3","fa-behance":"\u1b4","fa-behance-square":"\u1b5","fa-steam":"\u1b6","fa-steam-square":"\u1b7","fa-recycle":"\u1b8","fa-automobile":"\u1b9","fa-car":"\u1b9","fa-cab":"\u1ba","fa-taxi":"\u1ba","fa-tree":"\u1bb","fa-spotify":"\u1bc","fa-deviantart":"\u1bd","fa-soundcloud":"\u1be","fa-database":"\u1c0","fa-file-pdf-o":"\u1c1","fa-file-word-o":"\u1c2","fa-file-excel-o":"\u1c3","fa-file-powerpoint-o":"\u1c4","fa-file-photo-o":"\u1c5","fa-file-picture-o":"\u1c5","fa-file-image-o":"\u1c5","fa-file-zip-o":"\u1c6","fa-file-archive-o":"\u1c6","fa-file-sound-o":"\u1c7","fa-file-audio-o":"\u1c7","fa-file-movie-o":"\u1c8","fa-file-video-o":"\u1c8","fa-file-code-o":"\u1c9","fa-vine":"\u1ca","fa-codepen":"\u1cb","fa-jsfiddle":"\u1cc","fa-life-bouy":"\u1cd","fa-life-buoy":"\u1cd","fa-life-saver":"\u1cd","fa-support":"\u1cd","fa-life-ring":"\u1cd","fa-circle-o-notch":"\u1ce","fa-ra":"\u1d0","fa-rebel":"\u1d0","fa-ge":"\u1d1","fa-empire":"\u1d1","fa-git-square":"\u1d2","fa-git":"\u1d3","fa-hacker-news":"\u1d4","fa-tencent-weibo":"\u1d5","fa-qq":"\u1d6","fa-wechat":"\u1d7","fa-weixin":"\u1d7","fa-send":"\u1d8","fa-paper-plane":"\u1d8","fa-send-o":"\u1d9","fa-paper-plane-o":"\u1d9","fa-history":"\u1da","fa-genderless":"\u1db","fa-circle-thin":"\u1db","fa-header":"\u1dc","fa-paragraph":"\u1dd","fa-sliders":"\u1de","fa-share-alt":"\u1e0","fa-share-alt-square":"\u1e1","fa-bomb":"\u1e2","fa-soccer-ball-o":"\u1e3","fa-futbol-o":"\u1e3","fa-tty":"\u1e4","fa-binoculars":"\u1e5","fa-plug":"\u1e6","fa-slideshare":"\u1e7","fa-twitch":"\u1e8","fa-yelp":"\u1e9","fa-newspaper-o":"\u1ea","fa-wifi":"\u1eb","fa-calculator":"\u1ec","fa-paypal":"\u1ed","fa-google-wallet":"\u1ee","fa-cc-visa":"\u1f0","fa-cc-mastercard":"\u1f1","fa-cc-discover":"\u1f2","fa-cc-amex":"\u1f3","fa-cc-paypal":"\u1f4","fa-cc-stripe":"\u1f5","fa-bell-slash":"\u1f6","fa-bell-slash-o":"\u1f7","fa-trash":"\u1f8","fa-copyright":"\u1f9","fa-at":"\u1fa","fa-eyedropper":"\u1fb","fa-paint-brush":"\u1fc","fa-birthday-cake":"\u1fd","fa-area-chart":"\u1fe","fa-pie-chart":"\u200","fa-line-chart":"\u201","fa-lastfm":"\u202","fa-lastfm-square":"\u203","fa-toggle-off":"\u204","fa-toggle-on":"\u205","fa-bicycle":"\u206","fa-bus":"\u207","fa-ioxhost":"\u208","fa-angellist":"\u209","fa-cc":"\u20a","fa-shekel":"\u20b","fa-sheqel":"\u20b","fa-ils":"\u20b","fa-meanpath":"\u20c","fa-buysellads":"\u20d","fa-connectdevelop":"\u20e","fa-dashcube":"\u210","fa-forumbee":"\u211","fa-leanpub":"\u212","fa-sellsy":"\u213","fa-shirtsinbulk":"\u214","fa-simplybuilt":"\u215","fa-skyatlas":"\u216","fa-cart-plus":"\u217","fa-cart-arrow-down":"\u218","fa-diamond":"\u219","fa-ship":"\u21a","fa-user-secret":"\u21b","fa-motorcycle":"\u21c","fa-street-view":"\u21d","fa-heartbeat":"\u21e","fa-venus":"\u221","fa-mars":"\u222","fa-mercury":"\u223","fa-transgender":"\u224","fa-transgender-alt":"\u225","fa-venus-double":"\u226","fa-mars-double":"\u227","fa-venus-mars":"\u228","fa-mars-stroke":"\u229","fa-mars-stroke-v":"\u22a","fa-mars-stroke-h":"\u22b","fa-neuter":"\u22c","fa-facebook-official":"\u230","fa-pinterest-p":"\u231","fa-whatsapp":"\u232","fa-server":"\u233","fa-user-plus":"\u234","fa-user-times":"\u235","fa-hotel":"\u236","fa-bed":"\u236","fa-viacoin":"\u237","fa-train":"\u238","fa-subway":"\u239","fa-medium":"\u23a"}

Bash Script OAuth Token

4. Dezember 2014
by zelle

Ein einfaches Bash Script das einen Call auf eine Url macht und dort die response ausliest .. z.B. fürs Oauth Token holen


#!/bin/bash
echo "Username:"
read USERNAME
echo "Password:"
read -s PASSWORD

#PASSWORD="abcde"
CLIENT_ID="id"
CLIENT_SECRET="key"
GRANT_TYPE="password"

URL="url"

CONTENT=$(curl -X POST --data "username=$USERNAME&password=$PASSWORD&client_id=$CLIENT_ID&client_secret=$CLIENT_SECRET&grant_type=$GRANT_TYPE" "$URL"  -s)

echo "$CONTENT"

Confluence Userlink in Velocity File

4. Dezember 2014
by zelle

Da ich in der Doku von Confluence mal wieder nichts gefunden habe:

Um den Userlink mit einen Usernamen auch im Velocity file von Confluence setzten zu können reicht folgende Codezeile.

#usernameLink($blog.creatorName)

Description Lists Horizontal

16. Juli 2014
by zelle

Folgende Problemstellung: Eine Description List die horizontal ausgerichtet wird, jedoch hatte ich das Problem das bei einem zu hohen Text (also im <dd> ) Element der Hintergrund des dt nur bis zur Höhe des dt Elements blieb. Einfache Lösung (eigentlich offensichtlich und vermutlich gibt es schon 100e Anleitungen dazu)


dl.horizontal {
    display: block;
    border: 1px solid #ddd;
    background-color: #f5f5f5;
}

.horizontal dt {

    float: left;
    width: 30%;
    overflow: hidden;
    clear: left;
    text-align: right;
    white-space: nowrap;
    border-right: 1px solid #ddd;
    border-top: 1px solid #ddd;
    min-height: 25px;
    padding-top: 10px;
    text-align: left;

}
.horizontal dt span{
    padding-left: 15px;
}
.horizontal dd {
    border-top: 1px solid #ddd;
    margin-left: 30%;
    min-height: 25px;
    padding-top: 10px;
    padding-left: 15px;
    border-left: 1px solid #ddd;
    background-color: #ffffff;
}
.horizontal dt:first-of-type {
    border-top: none;
}
.horizontal dd:first-of-type {
    border-top: none;
}

Es wird einfach dem dl Element ein grauer Background gegeben und die dd Elemente erhalten einen weißen Hintergrund. Probleme könnten hier noch auftreteten wenn das dt Element zu groß werden würde. (dl -horizontal wurde aus Boostrap 3 übernommen)

WordPress xmlrpc call Beispiel XML

Nachdem ich jetzt relativ lange nach einen Beispiel XML Code für das Erstellen eines Blogeintrages auf einer WordPress Instanz gesucht habe hier ein Bsp XML. Leider nur metaWeblog.newPost und nicht wp.newPost, die Hilfeseiten auf der WordPress.org Seite lassen leider sehr zu wünschen übrig. Es ist nicht ersichtlich wie das XML aussehen soll meiner Meinung nach,


<?xml version="1.0"?>
<methodCall>
<methodName>metaWeblog.newPost</methodName>
<params>
<param><value><int>1</int></value></param>
<param><value><string>admin</string></value></param>
<param><value><string>password</string></value></param>
<param><value><struct>
  <member><name>title</name><value><string>Beitragstitle</string></value></member>
  <member><name>categories</name><value><array><data>
  <value><string>Kategorie 1</string></value>
  <value><string>Kategorie 2</string></value>
</data></array></value></member>
  <member><name>mt_keywords</name><value><string>tag1, tag2, tag3</string></value></member>
  <member><name>content</name><value><string>Hier könnte Inhalt stehen</string></value></member>
</struct></value></param>
<param><value><boolean>1</boolean></value></param>
</params></methodCall>

Hier das Script für das Erzeugen des XML, mit der Klasse die im WordPress Ordner liegt.


<!--?php require_once("../wp-includes/class-IXR.php"); 
$rpc = new IXR_Client('http://localhost/wordpress/xmlrpc.php'); 
$post = array(); // das Post construct: // Metadaten 
$post['title']     = 'Beitragstitle'; 
$post['categories']   = array('Kategorie 1', 'Kategorie 2'); 
$post['mt_keywords']   = 'tag1, tag2, tag3'; // Posttext 
$post['content']   = 'Hier könnte Inhalt stehen'; 

print_r($rpc--->getXml('metaWeblog.newPost', // Methode
1, // Blog ID, in der Regel 1
'username', // Benutzer
'password', // Passwort
$post, // Post construct
true // Veröffentlichen?
));

echo "\n \n send to server \n";
$status = $rpc-&gt;query('metaWeblog.newPost', // Methode
1, // Blog ID, in der Regel 1
'username', // Benutzer
'password', // Passwort
$post, // Post construct
true // Veröffentlichen?
);

// Ergebnis überprüfen und ggf. eine Fehlermeldung ausgeben
if(!$status) {
echo 'Error ('.$rpc-&gt;getErrorCode().'): '.$rpc-&gt;getErrorMessage();
echo " \n";
exit;
}

// Sonst: ID des neuen Posts ausgeben
echo 'New Post ID: '.$rpc-&gt;getResponse();
echo " \n";

http://felixtriller.de/2009/12/22/wordpress-mit-php-und-xml-rpc-bloggen/. Code wurde hier entnommen und die Klasse wurde um 1e Methode erweitert.



    function getXml($args){
        $args = func_get_args();
        $method = array_shift($args);
        $request = new IXR_Request($method, $args);
        return $request->getXml();
    }

Twitters Typeahead and Ajax

Twitters JQuery-Autocompleter Typeahead (nicht Bootstrap Typeahead, welcher in Bootstrap 3 auch nicht mehr integriert ist) ist ein recht praktikabler Autocompleter den man mit ein paar Zeilen gut an seine eigenen Bedürfnisse anpassen kann. Ich zeige es hier Anhand eines Ajax Calls mit zuerst noch nicht passenden Daten für Typeahead. Um diesen jetzt mit Custom Ajax Daten zu befüllen, werden der typeahead Funktion folgende Optionen übergeben.

Remote sagt hier aus das die Daten nachgeladen werden (könnte z.B. auch eine Json Datei auf einen Server sein oder ähnliches). Remote wiederum besteht aus mehreren Parametern die befüllt werden können. Die Url gibt logischerweise nur das Ziel des Ajax Calls an. Wie man bei URL sieht stelle ich mir hier z.B. die url durch eine Variable und den Wert des Inputfelds zusammen %QUERY wird anschließend von der Funktion automatisch mit dem Wert des Inputfeldes ersetzt. Um jetzt die noch nicht ganz passenden Daten in passende Daten zu konvertieren gibt es hier auch noch das filter – Feld. Diese erwartet eine Funktion, wobei der erste Parameter die vom Server geholten Daten repräsentieren. Hier erstelle ich ganz ein ganz simples Array, welches ich anschließend zurückgebe (Twitter Doku)


        $('#input').typeahead({
            remote: {
                url: baseUrl+'?q=%QUERY',
                filter: function(parsedResponse){
                    var data = [];
                    $.each(parsedResponse, function(index, item){
                        data.push(  {
                            value: item.name,
                            tokens: [item.name],
                            name: item.name
                        });
                    });
                    return data;
                }//A function with the signature filter(parsedResponse) that transforms the response body into an array of datums. Expected to return an array of datums.
            }
        });

So hat man mit ein paar Zeilen Daten vom Server abgeholt und an seine Bedürfnisse angepasst. Für Bootstrap 3 müssen momentan noch ein paar Zeilen CSS eingefügt werden (Typeahead CSS ). Zusätzlich musste ich aber hierbei noch für die hints display: none setzen da der Hint nicht an die passende Stelle wollte. Zusätzlich musste ich für den Span die Breite auf 100% erhöhen da sonst das input Feld zu klein bleibt.


.twitter-typeahead .tt-hint
{
    display: none;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    border: 1px solid transparent;
    border-radius:4px;
}

.twitter-typeahead .hint-small
{
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 3px;
    line-height: 1.5;
}

.twitter-typeahead .hint-large
{
    height: 45px;
    padding: 10px 16px;
    font-size: 18px;
    border-radius: 6px;
    line-height: 1.33;
}

.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
    margin-bottom: 2px;
}

.tt-dropdown-menu {
    min-width: 240px;
    margin-top: 2px;
    padding: 5px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.2);
    *border-right-width: 2px;
    *border-bottom-width: 2px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}

.tt-suggestion {
    display: block;
    padding: 3px 20px;
}

.tt-suggestion.tt-is-under-cursor {
    color: #fff;
    background-color: #0081c2;
    background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
    background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
    background-image: -o-linear-gradient(top, #0088cc, #0077b3);
    background-image: linear-gradient(to bottom, #0088cc, #0077b3);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0)
}

.tt-suggestion.tt-is-under-cursor a {
    color: #fff;
}

.tt-suggestion p {
    margin: 0;
}

.twitter-typeahead {
    width: 100%;
}

Language Switch

Heute stelle ich eine Lösung für einen Language switch im Zend2 Framework mit Ajax und Cookies.

Zu allererst muss die module.config.php Datei angepasst werden. In der Sekeletton Application von Zend2 ist der Translator bereits Konfiguriert und im Service Manager eingebunden. Ich habe lediglich die Übersetzungsdatei auf ein php – Array umgestellt:

(type => phparray und pattern => %s.php)


    'service_manager' => array(
        'factories' => array(
            'translator' => 'Zend\I18n\Translator\TranslatorServiceFactory',
        ),
    ),
    'translator' => array(
        'locale' => 'de_DE',
        'translation_file_patterns' => array(
            array(
                'type'     => 'phparray',
                'base_dir' => __DIR__ . '/../language',
                'pattern'  => '%s.php',
            ),
        ),
    ),

Außerdem habe ich für die Cookies die Module Klasse modifiziert:


class Module
{
    public function onBootstrap(MvcEvent $e)
    {
        $e->getApplication()->getServiceManager()->get('translator');

        $translator = $e->getApplication()->getServiceManager()->get('translator');
        if(isset($e->getRequest()->getCookie()->language) && $e->getRequest()->getCookie()->language != '' && $e->getRequest()->getCookie()->language != null){
            $language = $e->getRequest()->getCookie()->language;
            $translator->setLocale($language)->setFallbackLocale('en_EN');
        }
     }
}

Hierbei wird der Translator geladen. Weiters wird in der onBoostrap – Methode der Request abgefangen und ausgelesen. Ich hole mir mithilfe von getCookie() die Cookies aus den Request. Warum hier konkret language geholt wird werden wir anschließend im Controller sehen. Wenn die Sprache gesetzt worden ist wird sie dem Translator übergeben bzw. die Locale gesetzt. Also jene Variable die die Sprache bestimmt. Als Fallback wird hier z.B. Englisch angenommen.

Weiters benötigen wir für die Lösung einen Controller der uns den Cookie setzt. ich habe ihn hier in einen ApiController von mir geladen der Json für den Ajax Call als Antwort zurückliefert.


class LanguageApiController extends AbstractActionController
{

   public function indexAction(){
      $language = htmlspecialchars($this->getRequest()->getQuery('language', 'de_DE'));
      $cookie = new SetCookie('language', $language);
      $this->getResponse()->setStatusCode(Response::STATUS_CODE_201);
      $this->getResponse()->getHeaders()->addHeader($cookie);
      return new JsonModel(array('cookiecreated'=>'ok', 'language'=>$language));
   }
}

Hier wird, wie wir später noch sehen werden, einfach die Sprache mit einen GET Parameter gesetzt. Es wird ein Cookie erstellt der ‚language‘ auf den ausgelesen Wert speichert. Anschließend wird er der Response übergeben und dem Header des Requests hinzugefügt. Zum Schluss benötigen wir noch das notwendige JavaScript um die Sprache umzustellen.


$(document).ready(function(){

    $(document).on('click','a[data-action|=languagechanger]',function(event){
        event.preventDefault();

        $.ajax({
            url: baseUrl + '/languagesetter',
            data: 'language='+$(this).attr('data-value')
        }).always(function(){
           location.reload();
        });
    })

});

Mit dieser einfachen Methode wird nun der Controller aufgerufen und der Cookie gesetzt. Anschließend wird die Seite neu geladen und wir haben die Sprache im Cookie gespeichert. Wir können nun einfach in der View die translate Methode des Viewhelpers aufrufen.


## übersetzungsfile
return array(
    'Search'=>'Suche', 
....);

## in der view
echo $this->translate('Search')

1 2 3

Posts navigation