first published here: https://suckup.de/2020/08/generics-in-php-via-phpdocs/

If you did not know that you can use Generics in PHP or you do not exactly know how to use it or why you should use it, then the next examples are for you.

Type variables via @template

The @template tag allows classes and functions to declare a generic type parameter. The next examples starts with simple functions, so that we understand how it works, and then we will see the power of this in classes.

A dummy function that will return the input.

⇾ https://phpstan.org/r/1922279b-9786-4523-939d-dddcfd4ebb86

<?php    

    /**
     * @param \Exception $param
     * @return \Exception
     *
     * @template T of \Exception
     * @psalm-param T $param
     * @psalm-return T
     */
    function foo($param) { ... }

    foo(new \InvalidArgumentException()); // The static-analysis-tool knows that 
                                          // the type is still "\InvalidArgumentException" 
                                          // because of the type variable.

@template T of \Exception // here we create a new type variable, and we force that it must be an instance of \Exception

@phpstan-param T $param // here we say that the static-analysis-tool need to remember the type that this variable had before (you can use @psalm-* or @phpstan-* both works with both tools)

@phpstan-return T // and that the return type is the same as the input type

A simple function that gets the first element of an array or a fallback.

In the @param PHPDocs we write “mixed” because this function can handle different types. But this information is not very helpful if you want to understand programmatically what the code does, so we need to give the static-analysis-tools some more information.

⇾ https://phpstan.org/r/1900a2af-f5c1-4942-939c-409928a5ac4a

<?php

    /**
     * @param array<mixed> $array
     * @param mixed        $fallback <p>This fallback will be used, if the array is empty.</p>
     *
     * @return mixed|null
     *
     * @template TFirst
     * @template TFirstFallback
     * @psalm-param TFirst[] $array
     * @psalm-param TFirstFallback $fallback
     * @psalm-return TFirst|TFirstFallback
     */
    function array_first(array $array, $fallback)
    {
        $key_first = array_key_first($array);
        if ($key_first === null) {
            return $fallback;
        }

        return $array[$key_first];
    }

    array_first([1, 2, 3], null); 

    if ($a === 'foo') { // The static-analysis-tool knows that 
                        // === between int|null and 'foo' will always evaluate to false.
        // ...
    }

@template TFirst // we again define your typed variables

@template TFirstFallback // and one more because we have two inputs where we want to keep track of the types

@psalm-param TFirst[] $array // here we define that $array is an array of TFirst types

@psalm-param TFirstFallback $fallback // and that $fallback is some other type that comes into this function

@psalm-return TFirst|TFirstFallback // now we define the return type as an element of the $array or the $fallback type

Very basic Active Record + Generics

The IDE support for generics is currently not there, :-/ so that we still need some hacks (see @method) for e.g. PhpStorm to have autocompletion.

https://github.com/voku/phpstorm_issue_53352/tree/master/src/Framework/ActiveRecord

https://phpstan.org/r/f88f5cd4-1bb9-4a09-baae-069fddb10b12

A more complex collection example.

https://github.com/voku/Arrayy/tree/master/src/Type

In the end we can extend the “AbstractCollection” and the static-analysis-tools knows the types of all the methods.

Links:

⇾ https://phpstan.org/blog/generics-in-php-using-phpdocs

⇾ https://psalm.dev/docs/annotating_code/templated_annotations/

⇾ https://stitcher.io/blog/php-generics-and-why-we-need-them

first published here: https://suckup.de/2020/08/simple-php-code-parser/

It based on code from “ JetBrains/phpstorm-stubs “ but instead of Php-Reflection we now use nikic/PHP-Parser, BetterReflection, phpDocumentor and PHPStan/phpdoc-parser internally. So, you can get even more information about the code. For example, psalm- / phpstan-phpdoc annotations or inheritdoc from methods.

Install:

composer require voku/simple-php-code-parser

Link:

voku/Simple-PHP-Code-Parser

More:

• there is also a “.phar” version for e.g. phpdoc checks: voku/Simple-PHP-Code-Parser/releases
• and an API documentations helper for your README file, based on the simple php code parser: voku/Php-Readme-Helper

Example: get value from define in “\foo\bar” namespace

$code = '
  <?php
  namespace foo\bar;
  define("FOO_BAR", "Lall");
';

$phpCode = PhpCodeParser::getFromString($code);
$phpConstants = $phpCode->getConstants();

$phpConstants['\foo\bar\FOO_BAR']->value; // 'Lall'

Example: get information about @property phpdoc from a class

$code = '
  <?php
  /** 
   * @property int[] $foo 
   */
  abstract class Foo { }
';

$phpCode = PhpCodeParser::getFromString($code);
$phpClass = $phpCode->getClass('Foo');

$phpClass->properties['foo']->typeFromPhpDoc); // int

Example: get classes from a string (or from a class-name or from a file or from a directory)

$code = '
<?php
namespace voku\tests;
class SimpleClass {}
$obja = new class() {};
$objb = new class {};
class AnotherClass {}
';

$phpCode = \voku\SimplePhpParser\Parsers\PhpCodeParser::getFromString($code);
$phpClasses = $phpCode->getClasses();

var_dump($phpClasses['voku\tests\SimpleClass']); // "PHPClass"-object

Arrayy: A PHP array manipulation library. Compatible with PHP 7+

The next examples are using the php array manipulation library “Arrayy” which is using generators internally for many operations.

⇾ https://github.com/voku/Arrayy

StringCollection::create(['Array', 'Array'])->unique()->append('y')->implode(); // Arrayy

map: transform all values in the collection

StringCollection::create(['foo', 'Foo'])->map('mb_strtoupper'); // StringCollection['FOO', 'FOO']

filter: pass all values to the truth test

$closure = function ($value) { return $value % 2 !== 0; } IntCollection::create([1, 2, 3, 4])->filter($closure); // IntCollection[0 => 1, 2 => 3]

reduce: transform all values into a new result

IntCollection::create([1, 2, 3, 4])->reduce( function ($carry, $item) { return $carry * $item; }, 1 ); // IntCollection[24]

first published here: http://suckup.de/2020/07/how-to-write-readable-code/

Why do we write unreadable code?

I think we are mostly lazy, and so we use names from underlying structures like APIs or the databases, instead of using names that describe the current situation.

For example, the method “ Cart->getUser(): User": There is a "user_id" in the underlying database table, so the developer chooses the name "getUser()" where the User will be returned. The problem is "getX" and "setX" are terrible names for methods because they did not say you anything about the context of these methods. Maybe something like " Cart->orderUser(): OrderUser" and at some point " Cart->orderApprovalUser(): OrderApprovalUser " are better names. But keep in mind that this depends on your use cases. And please rename also e.g. your "user_id" in the cart database table, so that you keep the code consistent and readable.

In Eric Evans’ book Domain-Driven Design he introduces the concept of a “ Ubiquitous Language” — a shared, common vocabulary that the entire team shares when discussing or writing software. This “entire team” is made up of designers, developers, the product owner and any other domain experts that exist at the organization. And take the note that it is important that your team have a domain expert! Mostly we are not the expert in the field we are writing software for, so we need some professional input. If you build an invoice-system you will need an expert in finance-questions and -laws.

if ()

# BAD: 
if ($userExists == 1) { } 

# BETTER: use "===" 
if ($userExists === 1) {} 

# BETTER: use the correct type
if ($userExists === true) {} 

# BETTER: use something readable 
if ($this->userExists()) {}

# BAD: 
$foo = 3; 
if ($lall === 2) { $foo = 2; } 

# BETTER: use if-else 
if ($lall === 2) { 
   $foo = 2; 
} else { 
   $foo = 3;
} 

# BETTER: only for simple if-else 
$foo = ($lall === 2) ? 2 : 3; 

# BETTER: use something readable 
$foo = $this->foo($lall);

… more examples in the original post:

http://suckup.de/2020/07/how-to-write-readable-code/

first published here: https://suckup.de/2020/02/modern-phpdoc-annotations/

We will start very simple with PhpStorm and default PHPDoc, then we will increase the complexity step by step until we have auto-completion for array keys directly from the database with generics, immutable and type safety support.

1.0 PhpStorm & auto-generate PHPDoc blocks

„For documentation comments, PhpStorm provides completion that is enabled by default. PhpStorm creates stubs of „ PHPDoc blocks” when you type the /** opening tag and press , or press and appoint the code construct (a class, a method, a function, and so on) to document. Depending on your choice, PhpStorm will create the required tags or add an empty documentation stub.”

https://www.jetbrains.com/help/phpstorm/phpdoc-comments.html

1.1 Return $this|static|self

It’s quite annoying that php itself currently only have „self” as return type ( https://wiki.php.net/rfc/static_return_type) for the current class. Because of „ late static binding “ you can use „static” in your code to refer to the class a method was actually called on, even if the method is inherited. But in PHPDoc you can already use:

• @return $this: if you really return $this (e.g. for fluent interface)
• @return static: refer to the class a method was actually called on
• @return self: refer to the class a method was written in

Code:

/**
 * @return static
 */
abstract function getFoo(): self;

1.2 New (and not that new) Array Syntax

PhpStorm and (PHPStan & Psalm) are supporting some new (and some not that new) array syntax for PHPDoc types, but for now PhpStorm will not auto-generate this types.

Examples:

• int[]: an array with only INT values — [1, 4, 6, 8, 9, …]
• array<int, int>: an array with only INT values — [4 => 1, 8 => 4, 12 => 6, …]
• string[]: an array with only STRING values — [„foo”, „bar”, …]
• array<int, string>: an array with only STRING values — [4 => „foo”, 8 => „bar”, …]
• Order[]: an array with only „Order”-Object values — [Order, Order, …]
• array<int|string, Order>: an array with INT or STRING as key and „Order”-Object values — [4 => Order, ‘foo’ => Order, …]
• array<int|string, mixed>: an array with INT or STRING as key and mixed as values — [1 => 1, 4 => „foo”, 6 => \stdClass, …]
• array<int, array<int, string>>: an array with INT as key and and an array (with INT as key and string as value) as values — [1 => [1 => „foo”], 4 => [1 => 4], …]
• array<int, string[]>: an array with INT as key and and an array (with INT as key and string as value) as values — [1 => [„foo”, „lall”], 4 => [„öäü”, „bar”], …]
• array{output: string, debug: string}: an array with the key „output” and „debug”, the values are STRING values — [‚output’ => ‚foo’, ‚debug’ => ‚bar’]
• array<int, array{output: string, debug: string}>: an array with the key „output” and „debug”, the values are STRING values — [1 => [‚output’ => ‚foo’, ‚debug’ => ‚bar’], 3 => [‚output’ => ‚foo’, ‚debug’ => ‚bar’], …]

Examples (only @psalm-*): supported by PHPStan & Psalm

Live-Examples:

- Psalm: https://psalm.dev/r/922d4ba5b1

- PHPStan: https://phpstan.org/r/ce657ef4-9f18-46a1-b21a-e51e3a0e6d2d

Code:

/**
 * @param array<int|string, mixed> $row
 *
 * @return array<int|string, mixed>
 */
abstract function formatRow(array $row): array;

PhpStorm support?: Sadly PhpStorm did not have good support for these types, so that you often have to add „@psalm-*” PHPDoc comments. For example PhpStorm will accept „array<int, Order>” but PhpStorm will not understand the PHPDoc, so that you need to add e.g. „@param Order[] $order” and „@psalm-param array<int, Order> $order”.

1.3 Dynamic Autocompletion (+ data from your database) via deep-assoc-completion

If you have a method e.g. „formatRow($row)” you can use „getFieldArray()[0]” (data from the database — you have to connection the IDE with your database and your queries need to be analyzable by PhpStorm (take a look at the next screenshot) and combine static data from „getHeaderFieldArray()”, so that you have auto-completion from different sources.

Code:

/**
 * @param array<int|string, mixed> $row = $this->getFieldArray()[0] + $this->getHeaderFieldArray()
 *
 * @return array<int|string, mixed>
 */
abstract function formatRow(array $row): array;

more information + examples: https://github.com/klesun/deep-assoc-completion

1.4 Immutability Check via Static Code Analyses (via psalm)

And there is even more. :) You can add PHPDoc annotation that will check if you really use immutable classes or at least methods. Please read more here: https://psalm.dev/articles/immutability-and-beyond

Code: Live-Example:

- Psalm: https://psalm.dev/r/5bac0a9a07

1.5 Generics in PHP via Static Code Analyses

We can also use Generics via code annotations. PHPStan & Psalm both support it, but Psalm’s support is more feature complete and both tools can use the „@psalm-”-syntax. Here comes some simple examples.

array_last: Will return the last array element from the $array (type: ) or the $fallback (type: TLastFallback). We tell the function that the types comes from the input parameters and that the input is an array of or TLastFallback from the fallback.

array_first: Will return the first array element from the $array (type: ) or the $fallback (type: TFirstFallback). We tell the function that the types comes from the input params and that the input is an array of or TFirstFallback from the fallback.

So we can define „Templates” and map input arguments on that types, this can be even more complex if you use it in a class context and you map the „Templates” on class properties. But the logic will be the same.

Here is a more complex example: https://github.com/voku/Arrayy/blob/master/src/Collection/CollectionInterface.php

PhpStorm support?: Noop, sadly we need to hack this via „PHPSTORM_META”, so here is an example:

• override(\array_filter(0), type(0)); // suppose first parameter type is MyClass[] then return type of array_filter will be MyClass[]
• override(\array_reduce(0), elementType(0)); // suppose first parameter type is MyClass[] then return type of array_reduce will be MyClass

Read more here:

- https://blog.jetbrains.com/phpstorm/2019/02/new-phpstorm-meta-php-features/

- https://gist.github.com/voku/477e5c22a67c2d37ca42150d94e371ea

2.0 Resume

It’s not perfect, and type check and auto-completion only with PHPDoc is not really what I expected for the year 2020. But it’s working and I hope PhpStorm will bring more support for the new types annotations in the future.

More Links:

- https://docs.phpdoc.org/latest/guides/types.html

- https://scrutinizer-ci.com/docs/tools/php/php-analyzer/guides/annotating_code

- https://github.com/klesun/deep-assoc-completion/blob/master/docs/deep-keys-overview.md

- https://github.com/php-fig/fig-standards/blob/master/proposed/phpdoc.md#appendix-a-types

- https://psalm.dev/docs/annotating_code/supported_annotations/

Originally published at https://suckup.de on February 4, 2020.

“White space is to be regarded as an active element, not a passive background.”
- Jan Tschichold

At least since Apple is using massive white space for their product pages, every web-designer knows that the visitors prefer simple over the complex designs. And I think we can use some of this design principles to make also our code more readable.

What is white space?

White space is created by pressing the Return key [\n|\r|\r\n], Spacebar key [ ], or the Tab key [\t]. White space is essentially any bit of space in your code that is not taken up by „physical” characters.

[\n] = LF (Line Feed) → Used as a new line character in Unix/Mac OS X

[\r] = CR (Carriage Return) → Used as a new line character in Mac OS before X 

[\r\n] = CR + LF → Used as a new line character in Windows

https://stackoverflow.com/a/15433225/1155858

White space is critical for organizing our code, because we tend to find some relations between “things” to instinctively find a meaning in the composition. Whatever you see, your mind will filter, add and remove the given input and because of that we should prepare the input. So that we can easily consume the code.

• Leading White Space (at the start of a line): Leading white space (i.e., indentation) is addressed elsewhere. (Indent with i.e. 4 spaces is a good default.)
• Internal White Space (in the code itself): The code is more readable with some white space between the different operations in a single line.
• Trailing White Space (at the end of a line): This kind of white spaces are unnecessary and can complicate diffs.

Horizontal alignment: Alignment can aid readability, but it creates problems for future maintenance, if you do not automate your code style.

„White space also makes content more readable. A study (Lin, 2004) found that good use of white space between paragraphs and in the left and right margins — increases comprehension by almost 20%. Readers find it easier to focus on and process generously spaced content.”[Lin, 2004] Evaluating older adults’ retention in hypertext perusal: impacts of presentation media as a function of text topology by Dyi-Yih Michael Lin in „Computers in Human Behavior”, Volume 20, Issue 4, July 2004, Pages 491–503

Where do we use white space?

We mostly add white space after a parameter, function, method, if-, else-, while-, and other calls so that it’s easier to identify where code that belongs together starts and ends. Unlike a book in which you read from top to bottom, we mostly jump into the code and only read parts of the code. It’s more like a newspaper where you read the headline ( i . e . method name) and then jump to the next article ( i . e . method) .

Whitespace changes are tricky for “diff”

You can use something like “git diff -w” …

• -ignore-space-at-eol: Ignore changes in whitespace at EOL.
• -b, -ignore-space-change: Ignore changes in amount of whitespace. This ignores whitespace at line end, and considers all other sequences of one or more whitespace characters to be equivalent.
• -w, -ignore-all-space: Ignore whitespace when comparing lines. This ignores differences even if one line has whitespace where the other line has none.
• -ignore-blank-lines: Ignore changes whose lines are all blank.

… but the problems is still there, that white space changes hurts readability from default diffs in i.e. gitlab / github / etc. so that you should try to commit white space changes in a separated commit.

Be consistent!

T he most important and the only things that everybody will agree on is: “ Be consistent [and try to automate this process, please]! “ F or example, d on’t mix tabs and spaces or playing different braces for the same type of code . If the team (or project ) didn’t use any code style at all, then it’s quite simple, take an existing coding standard (try to follow the conventions already in place for a language, if there are any) where automation is already implemented for and stick to it in the first run.

Design principles for your code

Proximity: Things closer together will be seen as belonging together.

Code: Put code together that belongs together.

not that bad:

.example_1,
.example_2 { 
 background: url(https://medium.com/images/example.png) center center no-repeat, 
 url(https://medium.com/images/example-2.png) top left repeat, 
 url(https://medium.com/images/example-3.png) top right no-repeat;
}

I also like to have a single blank line before ‚break’, ‚continue’, ‚declare’, ‚return’, ‚throw’, ‚try’, so that you see that this is some kind of important code. But also the readability of simple „if”-statements can be improved.

if (($loggedInKunde->bestellungen_genehmigen || $loggedInKunde->manuelle_bestellgenehmigung) && ($wareneingang != 5)) {

not that bad:

if (
 (
 $loggedInKunde->bestellungen_genehmigen
 ||
 $loggedInKunde->manuelle_bestellgenehmigung
 )
 &&
 $wareneingang != 5
) {

better:

if ($this->useOrderApproval()) {

And please do not mix different things like variable assinment and „if”-statments in one blob of code.

if (null !== $token = $this->tokenStorage->getToken()) {

not that bad:

$token = $this->tokenStorage->getToken();
if ($token !== null) {

$token = $this->tokenStorage->getToken();
if ($token->exists()) {

Similarity: T hings with the same characteristics (shape, color, shading, orientation, …) will be seen as belonging together.

Code: Write code that do similar things in the same code style.

$valueArray = Bar::searchSplitButKeepQuotes($value);
if (\count($valueArray) <= 0) { return ''; }

$valueFoo = Foo::searchSplit($value);
if (\count($valueFoo) === 0) {
 return '';

}

not that bad:

$bars = Bar::searchSplitButKeepQuotes($value);
if (\count($bars) === 0) {
 return '';
}

$foos = Foo::searchSplit($value);
if (\count($foos) === 0) {
 return '';
}

Symmetry: Our mind tends to perceive objects by finding a starting point and it’s pleased when it can find uniformity structures. Sometimes our mind will see such structures also if they are not really there.

Code: Try to use uniformity code structures.

bad:

if (widget.IsRegular) {
    service.Process(widget);
} else {
    var result = widget.Calculation();
    widget.ApplyResult(result);
    service.ProcessSpecial(widget);
}

not that bad:

if (widget.IsRegular) {
    service.Process(widget);
} else {
    service.ProcessSpecial(widget);
}

Links:

• https://google.github.io/styleguide/
• https://www.smashingmagazine.com/2013/02/using-white-space-for-readability-in-html-and-css/
• https://www.smashingmagazine.com/2009/09/10-useful-usability-findings-and-guidelines/
• https://odetocode.com/blogs/scott/archive/2011/02/07/the-value-of-symmetry.aspx
• https://manifesto.co.uk/design-principles-gestalt-white-space-perception/

Originally published at https://suckup.de on January 28, 2020.

from https://twitter.com/nickmorrott/status/1003414736682258432

… but I will keep my open source work at https://github.com/voku/, because it hasn’t really changed anything: Gitbub itself wasn’t open source and Microsoft is committed to open source now, more than ever… so we will see if it’s good || bad for us.

“Our industry is really wack. We trust some rando startup with all our source code that could disappear any time and a company known to have a track record of supporting things for decades buys them out and now you all worry? Who else would you have liked to buy them?” — https://twitter.com/kellabyte/status/1003488466028486656

(Microsoft != Open Source) === false

• It open-sourced all of the .NET framework on GitHub
• It build out rich, system-level Windows features to bring a rich Unix shell to the platform to make development easier
• It began and continues to maintain one of the best open-source code editors available for every platform out there
• It became the largest contributor to open source on GitHub.
• Microsoft’s whole Windows 10 platform is now built on open-source Progressive Web App technology

from https://medium.com/@ow/microsoft-acquiring-github-is-a-good-thing-heres-why-6a6a57eb83ac

“Just so that I’m clear, I’m not declaring doom and gloom regarding the MS acquisition of github. It has every potential to be a good thing. It also has every potential to be a bad thing.” — https://twitter.com/SaraMG/status/1003654926847922176

… and instead of something like that …

from https://twitter.com/brandonkelly/status/1003394649141252096

… here some interesting thoughts from @rodneyrehm

“… maybe MS will take on helping developers monetize their OSS work by providing the necessary infrastructure right in github projects — e.g payment, help w/ licensing, etc? I never understood why github didn’t offer that for a small cut. Make it easy to buy/sell and people will… Which doesn’t mean I want to financially profit from my OSS. I’m more interested in the other side of the transaction. If (micro) payments became as easy as buying shit on amazon, I know I’d have hit that button a bunch of times… And if you’re not into licensing your work that’s fine. it might still be an improvement over gittip, patreon and what not for non-US people/entities (regarding taxes), considering MS has local offices world wide…” — https://twitter.com/rodneyrehm/status/1003784566467891200

— — — — — — — — —
Why was github sold?
 — — — — — — — — —

1. Because of the money

…nobody ( maybe Richard Stallman is a exception here ;-) ) would say “no” for such much money.

2. Because of us….

I didn’t pay for the github service and I think there are many developers who never payed for it. So if you didn’t pay for whatever, you will pay in a different way or maybe in a different time.

Examples:

- “free” ad-blocker (maybe one day they sell your browser history) — https://www.ghacks.net/2016/11/01/browsing-history-sold/

- “free” comment system (maybe add ads in your site) — https://wptavern.com/disqus-hits-sites-with-unwanted-advertising-plans-to-charge-large-publishers-a-monthly-fee-to-remove-ads

- “free” rss reader (maybe closed some day) — https://www.google.com/reader/about/

… so there’s no such thing as a free lunch! Sorry for that! Also OSS (Open Source Software) by itself isn’t >>free<<. “To understand the concept, you should think of “free” as in “free speech,” not as in “free beer”. — http://www.gnu.org/philosophy/free-sw.en.html

“$7 a month? That’s crazy. I could build something like 1/32nd as good in just like 2 or 3 hundred hours.” — https://twitter.com/hanspagel/status/1003635675734921216

Maybe we should all take a few seconds and think about who we can support, so that our product is keep running and can be improved in the future. Do you use any vendor libraries / frameworks (maybe you can thanks the maintainer). Do you use a good IDE with cool plugins, maybe you should also send some money to this developers.

— — — — — — — — — — 
Why we use(d) github?
 — — — — — — — — — —

1. Because it’s easy to use

… and there is good documentation for beginners. But you don’t need any GUI if you will use git. For example at work we only have a git repository, without any web interface. If you decide that the “master”-repository is at server “x” and every developer in the team push there changes there, than “x” is your git server. But you can easily push to other git servers or (if ssh is open and you know the password) you can directly push into local coworker git repository (please do not do that and do not — force).

… but this is also true: “Github (or any centralized service) just makes it easy and convenient to follow some best practices like peer review, publishing releases, managing user feedback, CI integration… know of any tools that can help make these easier to do with a DCVS philosophy?” — https://twitter.com/TwuniMusic/status/1003664551265484801

2. Because of “social”-coding.

- May 4, 2010 registered my github account (one year after I registered my twitter account). So ~8 years ago I started to improve my smartphone by compiling / patching the android kernel and android itself.

- Begin of 2011 I released Mod+X (https://suckup.de/2011/02/android-2-2-3-froyo-modx-spicagenmod-rc1-samsung-galaxy-spica-i5700/) it was a Android 2.2.2 Froyo | SpicagenMod with customization exactly for that phone. (e.g. long press the volume-up key and the next song will be played). And I updated the kernel from 2.6.29 to 2.6.x (1467 commits ahead) https://github.com/voku/i5700-sm-kernel — At that time I got really cool feedback and that motivated me. e.g.: “Awesome! Hope you are working for Samsung and get a shitload of money for it :) “ And no, I never got even one $ for it.

- In 2012 I had a new phone “Samsung Galaxy S2” and I started to build also a kernel for that device. From my code e.g. 680 commits was merged into “Dorimanx-SG2-I9100-Kernel” (https://github.com/dorimanx/Dorimanx-SG2-I9100-Kernel/commits?author=voku) I really enjoyed that time, because I learned so much new things. Thanks to Yuri.Sh from Israel and many other developers I had a really good social coding experience. And no, I never got even one $ for it.

- In 2013 I created (and forked) my first public php libraries. And the cool think was you can see how many developers are downloading your code via composer. https://packagist.org/packages/voku/ And I could use my own libraries on work, so this was a win-win situation for me. And no, I never got even one $ for it.

- In 2014 I was still at the same employer @ Düsseldorf and still publishing new php libraries. e.g.: the “Portable UTF-8” https://github.com/voku/portable-utf8 … strlen(‘fòôbàř’); // 10 … and I realized how much is broken in the web and I was still keep learning many things, especially by reading other peoples code on github. And I also created a “.dotfile”-repository, like everyone else (https://github.com/voku/dotfiles — 685 commits since then) and I learned to love my toolchain.

- In 2015 I was still here and try to improve my coding-skills and I realized “ninety percent of everything is crap”. So I released e.g. there ＠ + @ are allowed in a e-mail address (https://github.com/voku/email-check) and that encoding is a hard thing “<IMG SRC=&#x6A&#x61&#x76&#x61&#x73&#x63&#x72&#x69&#x70&#x74&#x3A&#x61&#x6C&#x65&#x72&#x74&#x28&#x27&#x58&#x53&#x53&#x27&#x29>” (https://github.com/voku/anti-xss)

- In 2016 I was still learning e.g. how to compress HTML5 code (https://github.com/voku/HtmlMin/blob/master/src/voku/helper/HtmlMin.php#L525) or how to use “dot-notation” for accessing arrays (https://github.com/voku/Arrayy#set-values-via-arrayy-syntax-dot-notation) … and exploring pitfalls from DOMDocument (https://github.com/voku/simple_html_dom).

- In 2017 I was still learning new things switched all my php projects to php7, started created my own content-management-system (on gitlab — private repository, not released yet … and I can’t recommend to build one more, because there are so many… so maybe it will be a framework with some cms features, we will see), released e.g. https://github.com/voku/HtmlFormValidator … switched to a e-commerce company and married my girlfriend. ❤

- In 2018 I learned by my own that open source software is mostly better tested then closed source software, because when it’s public you want to publish something helpful (e.g. with docs + tests) and beautiful (e.g. code-style). And for example the “Portable UTF-8” php library is installed 360.000 times and so it’s also tested in 360.000 times in different environments and with different php versions etc. so it’s also good tested by users. I discovered how I can use php OpCache by simply using file_put_contents +include. (https://github.com/voku/simple-cache/commit/15446f048ce7b8b84114ed947a59a03998dbcb93#diff-0e0e8cc4c23ee52b9c4dd9e0289f3571) And since this year we have a little daughter. ❤ ❤ ❤

I am still here: while(learning && coding) … but without much money and no, I never got even one € for my open source stuff. So if you have (paid) webdev /work, please contact me.

… and maybe you will support me?

• https://liberapay.com/voku/donate
• https://www.patreon.com/voku

… or star one of my projects?

• https://github.com/voku

… follow me on social media?

• https://moelleken.org/Kontakt/Social-Links/

… read my blog?

• https://suckup.de/

… write me a e-mail?

• lars@moelleken.org

— — — — — — — — — — — — —
Why we shouldn’t use github?
 — — — — — — — — — — — — —

“The main problem with Github being bought by Microsoft isn’t MS. It’s that in 2018 we still haven’t learned that critical infrastructure shouldn’t belong to one company … and that we should avoid building single points of failure.” — https://twitter.com/tante/status/1003615096910893056

“Git (distributed) turned to Github (centralized). Just as email turned to Gmail. Just as ‘storing files on web servers’ became ‘Dropbox’.” — https://twitter.com/tante/status/1003615387559358464

“You know if peopled used git like it’s supposed to be used, this whole github thing wouldn’t even be a concern. I’ve been concerned about github being a centralized place for a DVCS for a while now.” — https://twitter.com/BeardOps/status/1003663508137918469

Ubuntu + Windows + .dotfiles

1. Open „Update & Security“ > „For Developers“ > activate the „Developer Mode“.

2. Under „Programs“ > „Programs and Features“, click “Turn Windows Features On or Off”.

3. Enable the “Windows Subsystem for Linux (Beta)” option in the list and click “OK”.

4. After an „reboot“, you open the command line (cmd) and type „bash“ and press [Enter].

5. Enter a „Username“ and a „Password. (you need the password for „sudo“-commands)

6. Now you can open „Bash on Ubuntu on Windows“.

7. Install „git“ via:

sudo apt-get install git

8. Get the „.dotfiles“ via:

cd ~ ; git clone http://ift.tt/2oEzi4q; cd dotfiles

9. Install dependencies via:

./firstInstallDebianBased.sh

10. Install zsh (optional, but recommended).

11. Use the „.dotfiles“ via:

./bootstrap.sh

12. Download, install and configure „ConEmu“ …

… a alternative „Command Line GUI“ for Windows. Instead of the default GUI we have UTF-8 support with „ConEmu“, so we can use chars like „✓“.

-> http://conemu.github.io

After you have installed it, we can force „bash“ to „zsh“ in the configuration.

13. Add some „symlinks“ for easier navigation via: e.g.

sudo ln -s /mnt/c /c

sudo ln -s /mnt/d /d

14. Add the current „hostname“ into the „/etc/hosts“-file.

sudo su

echo "127.0.0.1 $(hostname)" >> /etc/hosts

exit

Now you can edit your „.dotfiles“-settings and tweak your configuration.

Here is my example-config: http://ift.tt/2p2EKL0

Originally published on Wordpress

I ❤ ~/

Vor einiger Zeit habe ich bereits einen Blog-Post über meine „.dotfiles“ geschrieben, jedoch habe ich mich damals mehr auf die Installation beschränkt und habe keine Beispiele gezeigt, so dass man den Vorteil der .dotfiles nur schwer erfassen konnte.

Außerdem benötigt man ggf. nur einige Funktionen oder Dateien um sein System an an seine Bedürfnisse anzupassen. Auf der Webseite GitHub ❤ ~/ gibt es sehr gute .dotfiles Sammlungen, welche man einfach „forken“ und anpassen und nutzen kann.

PS: wer sich bisher nicht mit „git“ auskennt, sollte sich einmal eines der folgenden interaktiven git-Tutorials anschauen:
 — try.github.io/
 — http://ift.tt/1861dZD
 — gitreal.codeschool.com/

Beispiele zu meinen .dotfiles:

Navigation:
http://ift.tt/1IfUKO0

Farben für die Kommandozeile:
http://ift.tt/1IfUL4y

Nützliche Shortcuts: z.B. date_*
http://ift.tt/1Dz1jve

Copy&Past via „getclip“ und „putclip“: http://ift.tt/1Dz1jLy

kill & pkill via z-shell: http://ift.tt/1Dz1hmZ

grep & ack: http://ift.tt/1IfULBA

git via z-shell: http://ift.tt/1Dz1hDn

„ls“-aliases: http://ift.tt/1Dz1jLI

vim » Automatisch zur letzten Position springen
http://ift.tt/1Dz1k20

vim » Schell-Suche via „#“

vim » markieren Leerzeichen am Ende der Zeile

vim » Tabs nutzen
http://ift.tt/1Dz1k26
vim » NERD Tree via „,“ + „-„
http://ift.tt/1Dz1k28

vim » Autovervollständigung via Tabulatur-Taste
http://ift.tt/1Dz1hTW

Erklärungen zu meinen .dotfiles:

.bash_profile & .bashrc // .zprofile & .zshrc

Wenn man sich direkt über die Konsole einloggt (ohne GUI) oder remote über ssh, dann wird die Datei: „~/.bash_profile“ (bash) bzw. „~/.zprofile“ (zsh) ausgeführt, um Ihre Shell vor der ersten Eingabeaufforderung zu konfigurieren.
Wenn man jedoch bereits angemeldet ist und ein neues Terminalfenster z.B. in Gnome oder KDE öffnet, dann wird die „~/.bashrc“ bzw. „~/.zshrc“-Datei ausgeführt. Außerdem wird die „.[bash|z]rc“ auch ausgeführt, wenn man eine neue Bash-Instanze via „/bin/bash“ in einem Terminal ausführt. Um zu verhindern, dass unsere Einstellungen automatisierte Skripte negativ beeinflussen, führen wir die folgenden Anpassungen nur bei interaktiven Konsolen aus.

In meiner „.bashrc“-Datei ist nicht viel zu sehen, da diese Datei auf die „.bash_profile“-Datei zugreift, so dass man bei Änderungen nur eine Datei bearbeiten muss. In „.bash_profile#L19“ werden wiederum andere Dateien geladen, so dass wir die selben „Funktionen“ und „Aliases“ sowohl in der „Bash“ als auch in der „Z-Shell“ verwenden können.

.config_dotfiles

In dieser Datei kann man Einstellungen für meine .dotfiles vornehmen. Wenn du z.B. deinen Standard-User-Namen in der Variable „CONFIG_DEFAULT_USER“ hinterlegst, wird diese nicht mehr in der Shell-Prompt angezeigt.

.path

In dieser Datei kannst du Pfade zu deinen Ausführbaren Dateien einfügen, so dass du diese ohne Angabe des Pfades ausführen kannst.

Diese Datei ist nicht im öffentlichen Repository und ist via „.gitignore“ aus git verbannt, da es vertrauliche Informationen enthalten kann. z.B.: export PATH=“$HOME/utils:$PATH“

.load

In dieser Datei laden wir weitere optionale Einstellungen, welche ggf. gar nicht installiert und somit auch nicht geladen werden müssen.

.colors

Hier definieren wir einige Farben, welche dann in den folgenden Dateien verwendet werden können. z.B.: COLOR_BLACK=‚\e[0;30m‚

.exports

Variablen in Shell-Scriptes verhalten sich so ähnlich wie in JavaScript. Variablen sind Standardmäßig „global“, dass heißt selbst Variable innerhalb einer Funktion sind anschließend auch außerhalb der Funktion verfügbar. Daher verwenden wir „local“ innerhalb von Funktionen, für Variablen welche nur innerhalb der Funktion zur Verfügung steht sollen. Außerdem können wir Variablen via „export“ exportieren, so dass diese nicht nur zur Ausführungszeit, sondern anschließend ebenfalls allen Kindprozessen als Umgebungsvariable zur Verfügung stehen.

.icons

Wie die Farben werden auch die entsprechenden Icons exportiert, so dass wir diese anschließend in Funktionen etc. nutzen können.

.aliases

In dieser Datei werden Abkürzungen für komplexe Befehle oder / und Fallbacks definiert, welche anschließend als Befehl ausgeführt werden.

z.B.:
alias starwars=’telnet towel.blinkenlights.nl‘
alias sgrep=’grep -R -n -H -C 5 –exclude-dir={.git,.svn,CVS}‘

.bash_complete // completion.zsh

Auch wenn die „Z-Shell“ (zsh) bessere Tabcompletion bietet, kann man auch in der „Bash“ einige Tabcompletion-Features nutzen.

z.B.:

apt- [Tabulator]
apt-g [Tabulator]
apt-get [Tabulator]
apt-get i [Tabulator]
apt-get install [Tabulator] [Tabulator]
apt-get install apa [Tabulator]

.functions

Hier habe ich einige praktische Funktionen gesammelt, welche ich öfters nutze und nicht als Plugin auslagern möchte.

z.B.:
lman() -> „Open the manual page for the last command you executed“
netstat_free_local_port() -> „get one free tcp-port“
iptablesBlockIP() -> „block a IP via ‚iptables’“

Überlegungen: In der „normalen“ Programmierung nutzt man lowerCamelCase für normale Variablen / Funktionen und Methoden, jedoch sind eigentlich alle Funktionen in der Shell lowercase z.B.: whoami, updatedb, killall. Ich mich dafür entschieden mich bei neuen Funktionen und Aliases an einem Original-Befehl zu orientieren, so dass man diese nicht neu lernen muss, sondern diese via [Tabulator] nutzen kann.

.extra

Auch diese Datei ist nicht im öffentlichen Repository und ist via „.gitignore“ aus git verbannt, da es vertrauliche Informationen enthalten kann. Hier kann man alle zuvor gesetzten Variablen, Einstellungen, Funktionen überschreiben oder ergänzen.

Ähnliche Beiträge:

my dotfiles

.zshrc

Kurztipp: lokalen offenen Port finden (bash)

Originally published on Wordpress

„gzip“ für Webseiten

Um das Verhalten von „gzip / deflate“ besser zu verstehen, möchte ich als erstes ganz kurz auf den Algorithmus hinter der Komprimierung eingehen. Dafür muss man zumindest zwei Grundlegende Theorien verstehen. Zum einen die sogenannte Huffman-Kodierung, dabei geht darum Text mit möglichst wenig Bits (0 || 1) zu übersetzen.

Es folgt ein einfaches Beispiel:

String: „im westen nichts neues“

Die Länge des Strings beträgt 22 Zeichen, was bei einem 4-Bit-Code (0000, 0001 …) eine Anzahl von 22 * 4 Bit = 88 Bit ergeben würde.

Berücksichtigt man jedoch die Häufigkeit der wiederkehrenden Zeichen, kann man für bestimmte Zeichen, welche oft im String vorkommen, kürzere Bit-Codes nutzen.

Als erstes Zählen wir die Anzahl der vorkommenden Zeichen. Die Zeichen welche die geringste Häufigkeit aufweisen werden anschließend als erstes miteinander Verknüpft und jeweils addiert.

Wie man bereits erkennt bekommen die Zeichen welche nicht so häufig auftreten längere Strecken und somit gleich auch längere Bit-Codes.

Wenn man alle Zweige verknüpft hat, entsteht daraus dann ein Binär-Baum, welcher von oben nach unten gelesen wird.

Die eindeutigen Bit-Codes sind nun z.B.: 00 für e, 100 für n, 1011 für t und so weiter. Nun benötigen wir nur noch 73 Bit anstatt 88 Bit, um den String binär darzustellen. ;)

Das zweite Prinzip hat auch mit Wiederholung von Zeichen zu tun. Die sogenannte „LZ77″ Kompression, welche wiederkehrende Muster in Strings erkennt und durch Referenzen von vorherigen Strings ersetzt.

Es Folgt ein einfaches Beispiel:

String: „Blah blah blah blah blah!“

vvvvv     vvvvv     vvv
Blah blah blah blah blah!
      ^^^^^     ^^^^^

Wenn man nun die Wiederholung durch eine Referenz angibt, welche aus der Länge des Wortes (“ blah“ = 5) und Länge der Wiederholungen. („lah blah blah blah“ = 18). Daraus ergibt sich anschließend der folgende komprimierte Text.

Blah b(5,18)!

… aber nun endlich zum praktischen Teil! Es folgen ein paar Beispiele und Überlegungen im Zusammenhang mit Webseiten / Webservern.

1.) „gzip“, ABER weniger ist manchmal mehr

Bei kleinen Webseiten und schwachen V-Servern kann es vorkommen, dass die serverseitige Komprimierung im Gesamtkontext keinen Geschwindigkeitsvorteil bietet, da die Komprimierung ggf. mehr Overhead (Payload, CPU-Rechenzeit, Verzögerung der Auslieferung) mit sich bringt als es Vorteile (geringere Dateigröße) bietet. Zumal viele Dateien (Bilder, CSS, JS) nach dem ersten Seitenaufruf im Cache sind und nicht wieder vom Server ausgeliefert werden müssen. Gerade für mobile Geräte macht die Komprimierung jedoch fast immer Sinn, daher würde ich die Komprimierung immer aktivieren!

PS: hier noch ein Blog-Post zum Thema Webseiten Beschleunigen

GRÜN = Download
GELB = Wartet
BLAU = Verbindung zum / vom Server

Bei „nginx“ gibt es zudem ein Modul (HttpGzipStaticModule) welches direkt vorkomprimierte Dateien ausliefert, anstatt diese bei Anfrage zu komprimieren. Jedoch muss man bisher selber dafür sorgen, dass eine entsprechende Datei mit dem selben Timestamp vorhanden ist. (z.B.: main.css & main.css.gz) Falls jemand hier eine Alternative oder ein einfaches Script zum erstellen der zu komprimierenden Dateien hat, meldet euch bitte bei mir oder einfach in den Kommentaren.

2.) „gzip“, ABER nicht für alles

Zunächst sollte man bereits komprimierte Dateien (z.B. JPEG, PNG, zip etc.) nicht noch zusätzlich via „gzip“ ausliefern, da die Dateigröße im schlimmsten Fall noch steigen kann oder zumindest wird für sehr wenig Dateigröße, sehr viel CPU-Zeit auf der Server (Komprimierung) und auf dem Client (Dekomprimierung) verbraucht.

Ich empfehle an dieser Stelle mal wieder die „.htaccess„-Datei vom HTML5-Boilerplate, welche bereits viele Einstellungen für den Apache-Webserver liefert. Außerdem gibt es dort auch eine optimierte Konfiguration „nginx.conf“ für den nginx-Webserver.

3.) „gzip“, ABER nicht immer

Die „gzip“-Komprimierung kann Ihre Stärken bei größeren Dateien viel besser ausspielen, da wir ja bereits im theoretischen Teil gelernt haben, dass die Komprimierung auf Wiederholungen aufbaut und wenn wenig wiederkehrende Zeichen und Muster vorhanden sind lässt es sich schlecht komprimieren.

Beim „nginx“-Webserver kann man die minimale zu bearbeitende Dateigröße angeben, sodass eine 6 Byte große Datei mit dem Inhalt „foobar“ bei schwacher „gzip“ nicht auf 40 Byte vergrößert wird.

4.) „gzip“, ABER nicht so hoch

Zudem sollte man nicht mit der höchsten Komprimierungsstufe komprimieren, da man pro Komprimierungsstufe immer weniger Erfolg bei immer mehr CPU-Zeit bekommt. Man sollte weniger stark komprimieren und dadurch Rechenleistung /-zeit einsparen, um die Webseite schneller ausliefern zu können.

test2_1.js.gz (schwache Komprimierung)
test2_2.js.gz (normale Komprimierung)
test2_3.js.gz (starke Komprimierung)

5.) „gzip“ + Minifizierung

Durch Minifizierung von CSS und JS kann man die Dateigröße ebenfalls reduzieren, auch wenn man nicht an die Dateigröße von komprimierten Dateien herankommt, außerdem sinkt der Erfolg der Komprimierung, da wir durch die Minifizierung bereits einige Wiederholungen minimiert haben.

Es folgt ein Beispiel mit „jquery.js / jquery.min.js“:

Zustand

Größe der Datei

gewonnene Größe durch die Komprimierung

nicht minifiziert + nicht komprimiert Datei

250 kB (¼ MB)

–

nicht minifiziert + schnelle Komprimierung

76,3 kB

173,7 kB

nicht minifiziert + normale Komprimierung

68,3 kB

181,7 kB

nicht minifiziert + hohe Komprimierung

68 kB

182 kB

minifiziert + nicht komprimiert Datei

82,3 kB

–

minifiziert + schnelle Komprimierung

30,8 kB

51,5 kB

6.) „gzip“ + Komprimierung verbessern

Im Gegensatz zur Programmierung, wo man Wiederholungen vermeidet, sollte man im Frontend (HTML, CSS) gezielt Wiederholungen nutzen, um die Komprimierung zu optimieren. So zeigt das folgende Beispiel wie man die Dateigröße durch die korrekte Positionierung von Attributen der HTML-Tags verbessern kann.

Zwei Dateien mit dem selben Dateigröße, nur die Reihenfolge der Attribute in der zweiten HTML-Dateien („test1_2.html“) wurden nicht in der selben Reihenfolge angegeben.

Wie man in dem Bild erkennen kann, haben wir die Dateigröße der HTML-Datei um zirka 10% reduziert indem wir den Komprimierungsalgorithmus bei der Arbeit unterstützen. ;)

Videos:

Ähnliche Beiträge:

Webseiten beschleunigen — Übersicht

Webseiten komprimieren

Webseiten Analyse

Originally published on Wordpress