Posts for: #Development

Having a Look at Flutter

#apps  #development  #Google  #mobile 

Introduction

Flutter is a UI toolkit (made by Google) for building natively compiled Android, iOS, web and desktop apps while using a single codebase.

It’s used and developed in dart and requires XCode (an aPpLe computer… -,-) and Android Studio as well as according SDKs.

Motivation

As a web developer I am interested in mobile usage of websites as well as webapps and I want to go some steps further and develop native apps for the currently dominating operating systems Android and iOS.

Read more

How to Minify Compress Uglify Javascript

#development  #frontend  #how-to  #javascript  #js 

As you might have seen on the “How to: Minify CSS” article, minification helps speeding up websites.

The minification and therefor compression or in our case ‘uglification’ of JavaScript serves just the same purpose.

This would transform your JavaScript code form this

<div class="wp-block-codemirror-blocks-code-block code-block"><pre>var isFunction = function isFunction( obj ) {

      // Support: Chrome <=57, Firefox <=52
      // In some browsers, typeof returns "function"; for HTML <object> elements
      // (i.e., `typeof document.createElement( "object" ) === "function"`).
      // We don't want to classify *any* DOM node as a function.
      return typeof obj === "function" &amp;&amp; typeof obj.nodeType !== "number";
  };


var isWindow = function isWindow( obj ) {
		return obj != null &amp;&amp; obj === obj.window;
	};




	var preservedScriptAttributes = {
		type: true,
		src: true,
		noModule: true
	};

	function DOMEval( code, doc, node ) {
		doc = doc || document;

		var i,
			script = doc.createElement( "script" );

		script.text = code;
		if ( node ) {
			for ( i in preservedScriptAttributes ) {
				if ( node[ i ] ) {
					script[ i ] = node[ i ];
				}
			}
		}
		doc.head.appendChild( script ).parentNode.removeChild( script );
	}


function toType( obj ) {
	if ( obj == null ) {
		return obj + "";
	}

	// Support: Android <=2.3 only (functionish RegExp)
	return typeof obj === "object" || typeof obj === "function" ?
		class2type[ toString.call( obj ) ] || "object" :
		typeof obj;
}

to this

Read more

A Simple Bash Style With Git Branch Detection

#development  #git  #how-to  #PHP 

Files

This could go into .bashrc, .bash_profile or .zshrc - your respective shell config file.

Args

Some aliases for easier handling

# alias shortcuts
alias lla="ls -la"
alias ll="ls -l"
alias l="ls"

Then we need a function which parses the current git branch (git has to be installed)…

# Git branch in prompt.
parse_git_branch() 
{
    git branch 2> /dev/null |sed -e '/^[^*]/d' -e 's/* \(.*\)/ (\1)/'
}

…and input the branch unto your PS1 (current theme) like so:

Read more

How to Minify Css

#how-to  #development  #frontend  #css 

Why would you want to minify CSS and what does it mean?

Minification of cascading style sheets means converting this

/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}
body {
  margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}
audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
[hidden],
template {
  display: none;
}
a {
  background-color: transparent;
}
a:active,
a:hover {
  outline: 0;
}
abbr[title] {
  border-bottom: 1px dotted;
}
b,
strong {
  font-weight: bold;
}
dfn {
  font-style: italic;
}
h1 {
  margin: .67em 0;
  font-size: 2em;
}
mark {
  color: #000;
  background: #ff0;
}
small {
  font-size: 80%;
}
sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}
sup {
  top: -.5em;
}
sub {
  bottom: -.25em;
}
img {
  border: 0;
}
svg:not(:root) {
  overflow: hidden;
}
figure {
  margin: 1em 40px;
}
hr {
  height: 0;
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}
pre {
  overflow: auto;
}
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
  margin: 0;
  font: inherit;
  color: inherit;
}
button {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

to this

Read more