benjamin – Bar54 http://www.bar54.de Software Engineering, Web Technologies, eCommerce and some more Sat, 04 Jan 2020 19:37:16 +0000 en-US hourly 1 https://wordpress.org/?v=5.9.4 Lazy Loading of Images – Responsive Ready http://www.bar54.de/2017/02/lazy-loading-of-images-responsive-ready/ Mon, 20 Feb 2017 07:26:40 +0000 http://www.bar54.de/?p=793 Lazy Loading of images on a web page allows to save bandwidth and resources by loading only those images visible for the user. Thus said, when the user scrolls down, images that get into the user’s viewport – or close to it – will be loaded dynamically via javascript.

Today, many javascript plugins exist to solve this problem. One of the most famous ones is the Lazy Load jquery plugin by Mika Tuupola.

However, while lazy loading is a very nice feature, responsiveness is at least of the same criticality. To solve lazy loading and responsiveness at the same time, I switched to the jquery plugin Unveil (GitHub) provided by Luis Almeida.

]]>
Tools for Hacking your Everyday Digital Life http://www.bar54.de/2016/03/tools-for-hacking-your-everyday-digital-life/ Thu, 31 Mar 2016 16:34:09 +0000 http://www.bar54.de/?p=778 Ok, this collection is definitely tech-biased and when mentioning “digital life” it does not mean reading an ebook but getting in touch with the technology in the background.
Disclaimer: There is no claim for completeness, independent assessment, or anything else. It’s just a collection of tools that I found useful sometime.

smtp4dev

http://smtp4dev.codeplex.com/
https://github.com/rnwood/smtp4dev
A very useful small tool for windows simulating an SMTP server on localhost. If your application sends an email to a localhost hosted port 25 SMTP server, this email is received and can be viewed or saved. The tool runs in the tray and can be opened to see the emails send.

fakeSMTP

http://nilhcem.com/FakeSMTP/index.html
I faced issues on some Windows 10 machines with running .NET Framework 3.5 which is required by smtp4dev. Since then I switched to fakeSMTP as an easy to alternative written in Java.

Fiddler Web Debugger

http://www.telerik.com/fiddler
A very useful tool for sending web requests and debug what’s going on. For example, to test REST APIs as done in this video introducing the Elastic Search REST API: https://www.youtube.com/watch?v=60UsHHsKyN4

WinMerge

You need to merge text files or just compare their content and don’t want to rely on GNU Diff? Go and give it a try: http://winmerge.org/

Notepad++

A very powerful text editor with a plugin system, language support, and column-based editing. Did you use the CrimsonEditor in the past? You will love Notepad++: https://notepad-plus-plus.org/

HeidiSQL

A free and lightweight SQL client supporting many different SQL databases: http://www.heidisql.com/

WinRAR

A recommendation for handling a wide range of archives from tar balls to zips: http://www.winrar.de/

Windows Image Resizer

If you need to resize images, it’s just one right click (and another left one 😉 ) away with this nice little tool: http://www.bricelam.net/ImageResizer/

GoW GNU on Windows

As I am used to live in both worlds (windows and *nix), I like to have handy *nix command line tools on windows as well. While Cygwin etc. comes with a big overhead, this set of precompiled *nix tools for windows is pretty useful and lightweight to install on your windows machine.  https://github.com/bmatzelle/gow

GnuWin32

Gnu tools such as wget or diff for the windows command line. I preffer to use the GoW set, but these tools are a reasonable alternative as well:  http://gnuwin32.sourceforge.net/packages.html

FileZilla

A probably well known open source (S)FTP client: https://filezilla-project.org/

Eclipse Plugins

Eclipse is not the latest (and maybe not hippest ?) platform and development environment, but it is powerful and even Microsoft recognized this and started investing in it.

EasyShell

Simple and straight forward context menu to open files and folders in a shell or system file explorer: https://marketplace.eclipse.org/content/easyshell

Plugin Homepage: https://github.com/anb0s/EasyShell

]]>
Eclipse font size change made easy http://www.bar54.de/2015/02/eclipse-font-size-change-made-easy/ Sat, 28 Feb 2015 14:14:19 +0000 http://www.bar54.de/?p=773 Have you ever asked yourself why it is so complicated to change the font size of your eclipse working environment? Easpecially when you are working with a notebook and switching between the build in display and different external displays it make sense to adapt your font size to the different screen resolutions.

Note: Since Eclipse Neon (4.6) this is a build in feature. By default, you can use Ctrl+”+” or Ctrl + “-” to increase or decrease the font size of your active text editor or view.
Today, I found a simple plugin making life easier and saving time during your everday work. Just checkout the plugin Eclipse Font available on google code: https://code.google.com/p/eclipse-fonts/

Just install the plugin from the according update site: http://eclipse-fonts.googlecode.com/svn/trunk/FontsUpdate/
and use Ctrl+- or Ctrl++ to decrease or increase your font size.

Note: If you manually changed your editors’ font size before, you might need to reset this to make the plugin effect your settings.

Enjoy adapting your font size to your current screen resolution!

eclipse-font

]]>
Fireworks Element Export http://www.bar54.de/2015/02/fireworks-element-export/ Fri, 20 Feb 2015 15:02:05 +0000 http://www.bar54.de/?p=770 Adobe Fireworks is a wide spread graphic tool in the field of website development. Preparing graphics for production from a website designers artwork can be tedious when it comes to grapic element preparation and export. Normally, one has to disable unwanted layers and cut out the elements of interest.

This work has been improved by John Dunning. He provides a fireworks extension with a command to export a select set of elements or even a single one.
The extension is available at http://johndunning.com/fireworks/about/ExportSelection and available for free as it is.

Just download the ZIP archive with the mxp file from the website noted above. Then double click the mxp file and the Adobe extension manager will start and guide you through the installation process.
When finished, restart fireworks and you can find the new command the main menu at Commands > Export > Export Selection.

]]>
TeXnicCenter Custom Text Modules http://www.bar54.de/2014/07/texniccenter-custom-text-modules/ Sun, 13 Jul 2014 16:07:34 +0000 http://www.bar54.de/?p=748 Writing an artical or book with latex, you typically use similar commands over and over again. For example, when you use a glossary, you might use the \gls{SPL} to refer the acronym SPL for a Software Product Line. Typing all the characters is tedious and boaring.
TeXnixCenter provides a feature called “Own Text Modules” to specify customer text modules simply to be reused with a key combination.

To specify a text module, use the main menu “Insert > Own Text Modules > Manage Text Modules“.
own-text-modules-menu

In the dialog, create a new text module and specify the text to be placed before and after the current curser position in the document.
own-text-modules-dialog

 
Finally, when you confirm the dialog, the new text module is added to the “Insert > Own Text Modules” menu.
In my daily work, I got used to the short cut “ALT + I + M + (x)” where (x) is the number in front of your own text module within the menu.

Give it a try, the keys are located on the keyboard that you get used to in a short time (at least I did).

]]>
WordPress Search Regex Plugin http://www.bar54.de/2014/07/wordpress-search-regex-plugin/ Sat, 05 Jul 2014 09:30:30 +0000 http://www.bar54.de/?p=745 You want to search and replace content in your posts, pages or comments?
A very straight forward plugin to do this is the Search Regex Plugin

You can search for simple strings or regular expressions and you can preview the replace operation before applying it (replace & save button).

Compared to raw regular expressions as used for example in the online regular expression tester Regexpal, you must enclose your expression with @ characerts (can be changed in the configuration).

my(.*)regular([^"])expression

In case, you need to move your blog and replace all internal links, the plugin can be very handy as well!

Plugin Website: https://wordpress.org/plugins/search-regex/

]]>
SVN to GitHub Migration on Windows http://www.bar54.de/2014/06/svn-github-migration-windows/ Wed, 18 Jun 2014 13:48:31 +0000 http://www.bar54.de/?p=728

Table Of Content

SVN and GitHub are both valid source code repositories and depending on your project context you should decide for one or the other. However, as SVN is out there for some time, and many projects starts to move on]]>

SVN and GitHub are both valid source code repositories and depending on your project context you should decide for one or the other.
However, as SVN is out there for some time, and many projects starts to move on to GitHub because of it’s additional infrastructure, such as forks and pull requests, more and more people needs to perform a migration.

On linux systems, it’s quite easy to use your package installer for the svn2git tool recommended by GitHub for the migration.
However, on a windows machine, this is possible as well and you just need a few extra steps to get this done.

1 Migration in a Nutshell

There is a good article by omranic on how to get a git repository from your svn repository: http://omranic.com/svn2git-subgit-win/.
In short:

  1. Install Git: http://git-scm.com/download/win
  2. Install Ruby: http://rubyinstaller.org/downloads/
  3. Update the Ruby Package Manager (gem): Execute “gem update –system” on the command line
  4. Create a text file that maps your svn commiters to the according github users (see notes below)
  5. Run svn2git to create a local git repository
  6. Link your local repository with GitHub and send it over (push)

2 Author Mapping

You need a file mapping your svn users to according git/GitHub users to correctly assign the commits. The file looks like

svnuser1=gituser1 <gituser1@mail.com>
svnuser2=gituser2 <gituser2@mail.com>
...

To find out who has contributed to your svn repository you can use the command:

svn log --quiet http://path/to/root/of/project | grep -E "r[0-9]+ \| .+ \|" | cut -d'|' -f2 | sed 's/^ //' | sort | uniq

3 Run svn2git

Open a command line, switch to the directory you want to create your local repository at and run svn2git.
There are a couple of different parameters, depending on wether you want to take over your branches, tags, or what else.
If you are intersted in the trunk only, simply use

svn2git <your/repository/url/trunk/> --authors <path/to/authormappings.txt> -v --rootistrunk

No, grap a coffee, lean back and wait for the tool to finish…

4 Send Content to GitHub

Once your local repository is fine, you can link it with a remote GitHub Repository and push it to the remote host using the following comments (do not forger to adapt GITHUB_USERNAME and REPO_NAME to whatever you settings are).

git remote add origin git@github.com:GITHUB_USERNAME/REPO_NAME.git
git push origin master

5 Trouble Shooting

5.1 GitHub Connection

If you are not able to push your content to GitHub yet, this might because of a not yet configured connection.

Open a command line and run
ssh -v git@github.com
If you see a permission denied at the end somewhere above issues like

debug1: Authentications that can continue: publickey
debug1: Next authentication method: publickey
debug1: Trying private key: /.ssh/identity
debug1: Trying private key: /.ssh/id_rsa
debug1: Trying private key: /.ssh/id_dsa
debug1: No more authentication methods to try.
Permission denied (publickey).

You might need to generate a new ssh key and make it available for your ssh connection.

How to generate the key is well described by Daniel Hüsken at http://danielhuesken.de/git-fur-windows-installieren-und-ssh-keys-nutzen/
Your ssh-keygen might tell you about “//.ssh/id_rsa” as default directory. Note the two //. You should change this to a single slash: “/.ssh/id_rsa” to match git’s local ssh directory.

If you still not able to connect, but your users .ssh sub directory contains your key file, you should take a look at your Git installation directory. It might have happend that the git installation overloaded your ssh installation with it’s own implementation. So you can take a look if your git installation directory has a subdirectory named .ssh. If so, copy your id_rsa and id_rsa.pub files into that directory and try again.

5.2 No tracking information for current branch

If you try to push your content to the remote repository, you might need to specify the branch to commit to.

If you get error messages such as the following ones:

warning: no common commits
remote: Counting objects: 4, done.
remote: Compressing objects: 100% (4/4), done.
remote: Total 4 (delta 0), reused 0 (delta 0)
Unpacking objects: 100% (4/4), done.
From github.com:kopl/SPLevo
 * [new branch]      master     -> origin/master
There is no tracking information for the current branch.
Please specify which branch you want to merge with.
See git-pull(1) for details

    git pull <remote> <branch>

If you wish to set tracking information for this branch you can do so with:

    git branch --set-upstream-to=origin/<branch> master

choose the second offered command to link your local master with the remote master:

git branch --set-upstream-to=origin/master master

5.3 Empty Directories

Git does not support empty directories. This might become an issue depending on how your project / code is set up.
Sometimes you have empty directories for temp directories, convinience, due to default project creations or what ever. In Subversion no issue, in git not possible (except of dirty and error prune hacks).

So far, by the migration itself, this might be not an issue except of minor warnings easy to ignore 😉
However, when it comes to checking your code out again (by human or build server), the downstream build process might fail because of missing class path settings or others.
So be aware of that and keep it in mind during error research.

5.4 Changed Files right after Eclipse Import

When you are working with Eclipse and see many changed files right after the import, this might because of one of the following reasons:

Line Ends
Your system might automatically change the line ends in your text files to adapt it to your local file system. To prevent this behaviour you can discable the auto carriage return and line feed setting of git by running the following command on a shell or command line:

git config --system core.autocrlf false

bin Directories
When Eclipse compiles your projects, it might create bin directories with content. To not get this recognized as changes to commit, you can add a .gitignore file to your project containing a single line of “/bin”

If you operate several projects, you might want to place the .gitignore file in the parent folder. Note that you need to specify the excluder rule as “*/bin” to get it applied to the sub directories.

6 Further Topics

6.1 Jira-GitHub Integration

Jira is a very powerfull issue management system and if you used it before, you might want to keep it. However, integrating it with your code repository is an essential feature you do not wanna miss. Setting this up wiht GitHub is quite easy.

In your Jira System, install the Jira DVCS Plugin.
Then log in to your GitHub account and create credentials for a remote application. Open your profile, select “Applications” and register a new application. This will provide you a client key and secret you will need to specify a GitHub account in the DVCS Plugin.
Next, go to your Jira Administration and select Plugins -> DVCS Accounts and create a new GitHub account. There you will need the key and secret provided by GitHub. And there you go.
Now, the commit messages used in GitHub must contain the key of a Jira issue and the commit will be linked to the according issue: https://confluence.atlassian.com/display/AOD/Processing+JIRA+issues+with+commit+messages

6.2 Jenkins-GitHub Integration

For the Jenkins continous integration server a GitHub specific git plugin is provided. This plugin comes with a remote API. GitHub allows for configure a web service connection specific to the Jenkins GitHub plugin. The settings of your GitHub repository contain an option named “Webhooks & Services”. Here you can add a new service and select from a list of available ones. Choose the “Jenkins GitHub plugin” service and provide it with the url to your jenkins server. Further details about the GitHub Plugin configuration can be found on the plugin’s website.

6.3 Line Endings

As line endings are treated different between Windos (CRLF) and Unix (LF) operating systems, they are always an error-prone and annoying topic.
Git provides capabilities to normalize line endings when code is commited and/or pushed into the repository. This behaviour can be configured in many different ways.
However, working in teams with people using different operating systems, it is always a good choice to work with Unix style line endings (LF).

The following set of practices is recommendable to ensure everything runs smooth in your daily work:

1. Explicit Repository Settings
Git repositories can be configured to use an explict setting independent from what a user has configured for his overall system.
Create a .gitattributes file in the root of your repository. Below, you can see an example for treating all files as text files with LF file endings by default. Furthermore, for a set of specific file endings, files will be treaten as binary.

# Set the default behavior, in case people don't have core.autocrlf set.
* text eol=lf

# Denote all files that are truly binary and should not be modified.
*.png binary
*.jpg binary
*.gif binary
*.class binary
*.jar binary

Checkout the GitHub recommendations for how to update your repository if you need to normalize an existing repository: https://help.github.com/articles/dealing-with-line-endings

2. Configure Eclipse
Make sure to configure your Eclipse workspace for UTF-8 file encoding and UNIX style line ends:
eclipse-workspace-settings

7 Noteworthy Features from Working with GitHub

From migrating to GitHub, we identified several features really helpful in daily work.

Working Offline
Great while working a lot on the road, airplane or train

Line Level Code Links
Great to lightweight pointing people to specific code snippets such as “look here!

Line End Management
Working in teams with people using different operating systems it’s good to enforce a specific line ending. See the GitHub recommendations how this can be enforced on a per repository base:
https://help.github.com/articles/dealing-with-line-endings

]]>
Bold Font in Eclipse JFace Viewer http://www.bar54.de/2014/06/bold-font-eclipse-jface-viewer/ Sun, 15 Jun 2014 09:53:16 +0000 http://www.bar54.de/?p=723 Working with fonts in Eclipse ui plugins is sometimes a bit indirectly.
For example, if you want to set an element’s font to bold, you can not simply set item.setBold() or item.getFont().setBold().

The best way to get around this, is to :

  1. get a default font from any element
  2. create a font descriptor from it,
  3. set the style of the font descriptor to bold,
  4. get a new font instance from this descriptor, and
  5. set this font to your element of choice.

Doing this, you can cache the font instance to reuse it later one.

The method getFont() allows to get a styled font based on the font of an swt control element:

    private Font getFont(Control control, int style) {
        Display display = Display.getCurrent();
        FontDescriptor fontDescriptor = FontDescriptor.createFrom(control.getFont());
        return fontDescriptor.setStyle(style).createFont(display);
    }

For example, this can be used to get a bold font to be set for tree items based on the font of the enclosing tree:

Control control = treeViewer.getTree();
Font fontBold = getFont(control, SWT.BOLD);
...
treeItem.setFont(fontBold);

This more a reminder for myself, but perhaps, someone will find this usefull as well…

]]>
Searching and Using Creative Commons Licensed Images http://www.bar54.de/2014/06/searching-using-creative-commons-licensed-images/ Thu, 12 Jun 2014 13:35:34 +0000 http://www.bar54.de/?p=717 Searching images to be used in blog posts, talks, websites or any other publication was never before as easy as today and risky at the same time.
One should neither try to use an image he is not allowed to nor including an image in his publication/application which accidently forces him to make it open source if not intended.

Two things could significantly ease up your live in this area:
1. Extended Search Interfaces of the popular image search engines
2. Best practices for valid references to an image’s source

Searching Images

All popular search engines such as goole image search, flickr, and instagram provided extended search interfaces allowing you to filter the search results e.g. for commercially usable images only.
Thomas Mauch provides a good summary of how to use goole image search, flickr, instagram as well as the Creative Commons Search: Corporate Blogs: Kostenlose Bilder unter Creative Commons-Lizenz finden

We got together recently with the Web Wizards, Web Wizards are Perth’s web design leading firm and they shared a few great tips with us that we’ll share here today. When searching for images for my talks or other publications, I like to search for one of the “friendly” Creative Commons licensens. In particular, I start with flickr at the beginning as their extended search is very easy to use and they provide good information and resources for the returned image. For example, it is quite easy to find out which specific CC license is granted by an image’s author.

Flickr explicitly supports the Creative Commons license with an option in their extended search and uses specific icons to indicate the several features an author can choose from for his image:
Flick Creative Commons Support

Flickr Extended Search with Creative Commons Support

Referencing Image Source

A second aspect I like of using Creative Commons licensed images are the best practices for referencing their sources provided by the Creative Commons organization itself.
This “Best practices for attribution” perfectly describes and provides examples of how to reference the sources in a legal and accepted manner. They also fairly present their “optimal” way of referncing but also a valid more compact and practical applicable alternative (e.g. Photo by tvol / CC BY).

Again, which specific CC license you must reference here (“CC BY”, “CC BY-SA”, “CC BY-SA 2.0”) is easy to find out with flick. When you are on the images details page — where you can choose which scaling you want to downlowd — just click on the link for specific right granted by the author (at the top of the page):
flickr-image-details
The page linked here is the creative commons license you must refer to including a shorting of the license name (See image below)
flickr-cc-license

Note: The information provided by this blog post is not legally verified and only collected from other online resources that are target of continous change themself. So handle image usage and reference seriously, to it on your own risk, and use the information provided here only as initial pointer and make your own valid decisions about image usage and referencing.

]]>
Latex Reducing Enumeration Item Space http://www.bar54.de/2014/05/latex-reducing-enumeration-item-space/ Sun, 04 May 2014 20:03:20 +0000 http://www.bar54.de/?p=713 The default enumeration item spacing in most LaTeX styles is quite generous. If you want to save some space and provide an often more compact presentation to your reader, different approaches are available.

Starting with a default presentation, this article presents alternatives to improve the listing.

\begin{enumerate}
\item Item One
\item Item Two
\item Item Three
\end{enumerate}

Using Paralist Package

Using the paralist package you can use the new enumeration style compactenum:

\usepackage{paralist}
...
\begin{compactenum}
\item Item One
\item Item Two
\item Item Three
\end{compactenum}

compactenum automatically reduces the line height of your listing and applies a more contact presentation.

Using itemsep Declaration

The default enumaration and itemize environments allow for specifiying an itesep declaration to configure the items’ line height characterstics. This solution does not require any specific package to be used, but to manually specify the line-height.

\begin{enumerate}
\itemsep-2pt
\item Item One
\item Item Two
\item Item Three
\end{enumerate}
]]>