15. May 2019

A Helping Hand for Image & CSS Sprites

SPRITEOWL is a Photoshop extension that takes over the boring part of working with sprite images and CSS.
Retrieves x, y, width and height info of all sprite elements
Exports retina ready PNG files and required media queries of your Photoshop sprite file
Supports preprocessors LESS, SASS/SCSS & Stylus
Spriteowl
CSSOWL is a mixin library that works with Spriteowl.
LESS, SASS/SCSS & Stylus support
Open source
Cssowl

Two tools that can enhance your workflow immensely. Enjoy!

11. May 2019

portalZINE goes Multi-Language

Since I started in 2002, all iterations of portalZINE have been pure english content websites. You can read about the why on my services page.

I had potential customers in Germany complain about that a lot over the past few years. But your own website often suffers, while your customers get all the attention. That is how it is and how it should be!

Creating Multi – Language websites has been part of my services & portfolio for years, with an extreme application setup handling 13 languages in 2014 for the soccer world cup.

Multi-Language setups have come a long way and it was time to showcase that on my own setup as well. Not only to calm those potential customers, but to testdrive new functionality and possibilities on my own setup. portalZINE has always been my testlab for stability and new feature sets.

Most of my static pages are available in English and German now, the blog itself will remain pure English.

Need help setting up a multi language website, get in touch!

Cheers
Alex

26. February 2019

VisBug – Hover inspect in the browser

Visbug is an amazing new browser extension that allows you to do a visual inspection of your website in development.

What they have to say about their tool and capabilities

Point, click & tinker
Edit or style any page, in any state, like it’s an artboard
Hover inspect styles, accessibility and alignment
Nitpick layouts & content, in the real end environment, at any device size
Leverage adobe/sketch skills
Edit any text, replace any image (hi there copywriters, ux writers, pms)
Design within the chaos: use production or prototypes and the odd states they produce, as artboards and design opportunities
Design while simulating latency, i18n, media queries, platform constraints, CPUs, screensize, etc
Make more decisions on the front end of your site/app (a11y, responsive, edge cases, etc)
No waiting for developers to expose their legos, just go direct and edit the end state (regardless of framework) and execute/test an idea

For Designers & Content Creators

A really nice tool for designers & content creators, helping them to optimize the look and feel of a website.

The extension is currently available for Chrome, but a Firefox Addon is in development.

Github
Chrome Extension

5. February 2019

SVG Cleaner – streamline your vectors

svgcleaner has been around for some time and is constantly being optimized! It helps you clean up your SVG files, keeping them free from unnecessary data.

Temporary data used by the vector editing application
Non-optimal SVG structure representation
Unused and invisible graphical elements

Github project.

The GUI application adds batch file processing, decompression & compression and parallel cleaning jobs, GUI application.

9. March 2018

Pretty checkboxes and radio buttons in pure CSS

Easily add beautiful checkboxes and radio buttons in pure CSS. Highly customizable via SCSS.

Basic
- Shapes – Square, Curve, Round
- Variants – Default, Fill, Thick
- Colors – Primary, Success, Info, Warning, Danger
- Color types – Solid, Outline
- Animations – Smooth, Tada, Jelly, Pulse, Rotate
Switch – iOS style – Outline, Fill, Slim
Responsive
No JavaScript
Custom Font Icons
SVG Icons
Image support
Toggle between icons / SVG’s / images
Lock
State – Focus, Hover, Indeterminate
Supports frameworks – Bootstrap, Foundation, Sematic UI, Bulma, …
SCSS customization
Supports all modern browsers, including mobile devices
Print friendly

  <!-- add class p-default -->
    <div class="pretty p-default">
        <input type="checkbox" />
        <div class="state">
            <label>Default</label>
        </div>
    </div>

    <!-- add class p-fill -->
    <div class="pretty p-default p-fill">
        <input type="checkbox" />
        <div class="state">
            <label>Fill</label>
        </div>
    </div>

    <!-- add class p-thick -->
    <div class="pretty p-default p-thick">
        <input type="checkbox" />
        <div class="state">
            <label>Thick</label>
        </div>
    </div>

<label>Default</label>

</div>

</div>

<label>Thick</label>

</div>

GitHub

1. February 2018

Map Icons to customize your Google Map Icons

An icon font to use with the Google Maps API and Google Places API, using SVG markers and icon labels.

Map Icons makes Google Maps Markers dynamic with control over shape, color, size, and icon easily changed using options in the marker object as well as simple SVG Notation and CSS.

GitHub / Preview

21. January 2018

CodeCombat – programming can be as much fun as a game

CodeCombat is a multiplayer programming game for learning how to code. The ultimate goal of CodeCombat is to bring more users into the field of computer programming by making the logic and syntax more accessible and enjoyable to learn. The end game is to educate a whole new generation of computer programmers that started their journey by slaying ogres and defending their castles from oncoming enemy hordes.

CodeCombat teaches Python, JavaScript, and other languages directly in the browser.

CodeCombat itself can be found on GitHub under the free MIT license. All the art assets (sprites, backgrounds, sound effects, etc.) can also be found on GitHub and are published under a Creative Commons CC BY 4.0 license. This allows easy use of the game artwork for projects of students.

You can subscribe online or setup a dev environment on Windows, Mac or Linux yourself. You need to be able to follow instructions and have some basic technical knowledge.

While the setup on the Mac and Linux are straight forward, Windows is the hardest to get working! (CodeCombat Wiki)

I have setup a local dev environment on my Mac for my daughter, as she does not play regularly but loves to tinker with it from time to time … learning Javascript!

Used some AppleScript magic and Automator to ease the startup of the setup when needed. The setup might vary on your end, as I am using iTerm2 as a Terminal replacement.

on run {input, parameters}
	
	set app_name to "mongod"
        set user_name to "pzTV"
        set path_to_codecombat to "/Users/pzTV/Entwicklung/"

	set the_pids to (do shell script "ps ax | grep " & (quoted form of app_name) & "| grep -v grep | awk '{printf \"%d \", $1}'")
	do shell script ("for PID in " & the_pids & "; do kill -9 $PID; done ")
	
	tell application "iTerm2"
		create window with profile "Mongo"
		tell current window
			
			tell current session
				write text "cd " & path_to_codecombat & "codecombat ; ./bin/coco-mongodb"
			end tell
		end tell
		tell current window
			create tab with profile "CodeCombat"
			tell current session
				write text "cd " & path_to_codecombat & "codecombat ; npm start"
			end tell
			
		end tell
		
		
	end tell
	
	delay 15
	
	tell application "Google Chrome"
		open location "192.168.1.32:3000"
		
	end tell
	
end run

on run {input, parameters}

set app_name to "mongod"

set user_name to "pzTV"

set path_to_codecombat to "/Users/pzTV/Entwicklung/"

set the_pids to (do shell script "ps ax | grep " & (quoted form of app_name) & "| grep -v grep | awk '{printf \"%d \", $1}'")

do shell script ("for PID in " & the_pids & "; do kill -9 $PID; done ")

tell application "iTerm2"

create window with profile "Mongo"

tell current window

tell current session

write text "cd " & path_to_codecombat & "codecombat ; ./bin/coco-mongodb"

end tell

tell current window

create tab with profile "CodeCombat"

tell current session

write text "cd " & path_to_codecombat & "codecombat ; npm start"

end tell

delay 15

tell application "Google Chrome"

open location "192.168.1.32:3000"

end tell

end run

CodeCombat is a really fun way to get into programming and keep your kids motivated.

CodeCombat Website / GitHub

20. January 2018

Body-Kun – Models for Artists

Really love these. Highly realistic, articulated figures created with the artist in mind. Over 30 articulated joints make it easy to recreate a desired pose or action.

Body-Kun