2018-09-06 21:18:41 USELESS

Totaly useless Follow Link below


VS Code extensions

2018-04-05 16:54:24

In machine A,

code --list-extensions | xargs -L 1 echo code --install-extension

copy and paste the echo output to machine B

sample output

code --install-extension Angular.ng-template
code --install-extension DSKWRK.vscode-generate-getter-setter
code --install-extension EditorConfig.EditorConfig
code --install-extension HookyQR.beautify

Current list on my setup


SSH keys

2018-03-19 07:12:04

Just because i always forget it.

ssh-keygen -t rsa

Example output

Generating public/private rsa key pair.
Enter file in which to save the key (/home/demo/.ssh/id_rsa): 
Enter passphrase (empty for no passphrase): 
Enter same passphrase again: 
Your identification has been saved in /home/demo/.ssh/id_rsa.
Your public key has been saved in /home/demo/.ssh/id_rsa.pub.
The key fingerprint is:
4a:dd:0a:c6:35:4e:3f:ed:27:38:8c:74:44:4d:93:67 demo@a
The key's randomart image is:
+--[ RSA 2048]----+
|          .oo.   |
|         .  o.E  |
|        + .  o   |
|     . = = .     |
|      = S = .    |
|     o + = +     |
|      . o + o .  |
|           . o   |
|                 |


ssh-copy-id demo@


Daily Pens

2018-03-18 10:49:35 CODEPEN, HTML , CSS

I play on codepen almost every day and just found a homemade API-endpoint to collect all pens, PERFECT now i can search and filter them better. And of course i can implement them here easy. Just check it out in the sidemenu under Daily PENS.

Wierd CSS

2017-07-17 06:54:48 CSS, HTML

Just a simple wierd css-animation , no idea why just wanted to try and animate something .

Code on Codepen https://codepen.io/hugosp/pen/owOyJb

Simple Card

2017-06-20 18:22:48 HTML, CSS , SIMPLE

Just a simple card-layout in html/css can be used as starter for page or info-site

Code up on Codepen just grab it.

Dungeon Crawler

2017-02-20 19:48:25 REACT, JAVASCRIPT, GAME

another lesson in react

the goal was to build a crawler game , and you got to design it however you would like no hits were given so i gotta say i like the challenge , Thought it was gonna be much harder , but got cough up in it and suddenly it was a working game with a bunch of levels and a challenging Boss at the end .

Play a bit and have fun =D at http://crawl.dalahest.se/

i think i have the code up on Codepen if your curious about how it was done. (link at the top of the page)

Rnd Librarys

2017-02-19 21:02:15 PHP, DEV, LARAVEL

random Classes

Just some reminders for myself about stuff i find

Intervention [http://image.intervention.io/] PHP Image modification

Game of life

2017-02-07 19:47:17 REACT, JAVASCRIPT, GAME

Made a Game of life Version in React and ES6.


Just to learn some states and props in react.

Fun Code-training , that i guess i thought would be harder than it was .
Link to running Example

Express Getting Started Cheat Sheet

2017-02-07 19:44:21 EXPRESS, JAVASCRIPT, NODE,

Setup Project With Node,Express and Git

$ mkdir app && cd app
$ touch .env .gitignore README.md index.html server.js

$ npm init
$ npm install --save express

$ git init
$ git add .
$ git commit -m "initial commit"
$ git remote add origin <your github url>
$ git push -u origin master

React Setup Cheat Sheet

2017-02-07 19:42:40 REACT, JAVASCRIPT

Setup Project for React with ES6 jsx autocompile via babel

Make sure u have browserify and watchify installed global.

$ mkdir app && cd app
$ mkdir src && build
$ touch index.html ./src/script.jsx

$ npm init
$ npm install --save react react-dom babelify babel-preset-react

$ add to package.json
script:  { 
"build": "browserify -t [ babelify --presets [ react ] ] src/script.jsx -o build/script.js -v"
"watch": "watchify -t [ babelify --presets [ react ] ] src/script.jsx -o build/script.js -v"
$ npm run watch

Git Frikk !

2017-02-07 19:41:05 GIT, HELL

Cant remember, evah =)

git fetch --all
git reset --hard origin/master
git pull origin master

CSS Center

2017-02-07 19:39:59 CSS, HTML

1: Using Flexbox

<div class="center">
    <h1>I'm Centered!</h1>

Center everything within the div.

.center {
   display: flex; 		/* activate flexbox   */
   align-items: center; 	/* align vertically   */
   justify-content: center; 	/* align horizontally */

2: Using Table (Compatible Mode)

<div class="center">
    <div class="cell">
        <div class="content">
            <h1>I'm Centered!</h1>

Unlike flexbox, you will need three containers:

.center {
    display: table; 		/* .center acts like a table */

.cell {
    display: table-cell; 	/* make .cell act like a cell*/
    vertical-align: middle; 	/* align the cell middle */

.content {
    margin-left: auto; 		/* Center content */
    margin-right: auto; 	/* Center content */
    text-align: center; 	/* Center items */

CSS Flexbox Grid

2017-02-07 19:38:45 CSS, HTML, FLEXBOX

AweSome minimal css-flexbox-grid.

:root {
    --grid: {
        display: flex;
            flex-wrap: wrap;
    --cell: {
        box-sizing: border-box;
            flex-shrink: 0;


.Grid            { @apply --grid;  }
.Grid.\-top      { align-items: flex-start;  }
.Grid.\-middle   { align-items: center;  }
.Grid.\-bottom   { align-items: flex-end;  }
.Grid.\-stretch  { align-items: stretch;  }
.Grid.\-baseline { align-items: baseline;  }
.Grid.\-left     { justify-content: flex-start;  }
.Grid.\-center   { justify-content: center;  }
.Grid.\-right    { justify-content: flex-end;  }
.Grid.\-between  { justify-content: space-between;  }
.Grid.\-around   { justify-content: space-around;  }

.Cell            { @apply --cell;  }
.Cell.\-fill     { width: 0; min-width: 0; flex-grow: 1;  }
.Cell.\-1of12    { width: calc(100% * 1 / 12);  }
.Cell.\-2of12    { width: calc(100% * 2 / 12);  }
.Cell.\-3of12    { width: calc(100% * 3 / 12);  }
.Cell.\-4of12    { width: calc(100% * 4 / 12);  }
.Cell.\-5of12    { width: calc(100% * 5 / 12);  }
.Cell.\-6of12    { width: calc(100% * 6 / 12);  }
.Cell.\-7of12    { width: calc(100% * 7 / 12);  }
.Cell.\-8of12    { width: calc(100% * 8 / 12);  }
.Cell.\-9of12    { width: calc(100% * 9 / 12);  }
.Cell.\-10of12   { width: calc(100% * 10 / 12);  }
.Cell.\-11of12   { width: calc(100% * 11 / 12);  }
.Cell.\-12of12   { width: 100%;  }

Cred to : 1000ch@GitHub


2017-02-06 20:18:31 REGEX, DATA, LINUX, CODE


http://regex101.com http://regexr.com/ https://www.debuggex.com/

More php-oriented debugger with preg_* functions


Visualize ur RegEx

Looks crazy when https://regexper.com https://jex.im/regulex/

# Simple an ugly examples, 
# look for url that starts with ftp:// , http:// or https://
# 2 matches one on full url and second for name. 


# Notes ......

dont catch group (?:Blah)

[A-z] characterset 

{5} number of occurences {3,5} min-max

* 0 or More
+ 1 or More
? 0 or 1

^ NOT 

(?=Blah) positive lookahead spring tills du hittar Blah
(?!Blah) negative lookahead spring bara om ordet inte slutar på Blah

(?<=Blah) positive lookbehind matcha only if begins with
(?<!Blah) negative lookbehind matcha only if begins with

#ugly ex. again of lookbehind (php now)

$input = 'http://www.dalahest.se/';
preg_replace("/(?<=www\.)(.+)(?=\.)/i", "APA", $input);

Will result in -> 'http://www.APA.se/'


strstr         = match
stristr        = match case insensitive

preg_match     = regex match
preg_match_all = regex match with g-flag

explode        = split string to array 
preg_split     = split string to array with regEx

preg_grep      = filter through array and only return on regEx match


Oh well and just if you would like to check if a mail is valid .. here's the regEx for it .

(?:(?:\r\n)?[ \t])*(?:(?:(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|"(?:[^\"\r\\]|\\.|(?:(?:\r\n)?[ \t]))*"(?:(?:\r\n)?[ \t])*)(?:\.(?:(?:\r\n)?[ \t])*(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|"(?:[^\"\r\\]|\\.|(?:(?:\r\n)?[ \t]))*"(?:(?:\r\n)?[ \t])*))*@(?:(?:\r\n)?[ \t])*(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|\[([^\[\]\r\\]|\\.)*\](?:(?:\r\n)?[ \t])*)(?:\.(?:(?:\r\n)?[ \t])*(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|\[([^\[\]\r\\]|\\.)*\](?:(?:\r\n)?[ \t])*))*|(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|"(?:[^\"\r\\]|\\.|(?:(?:\r\n)?[ \t]))*"(?:(?:\r\n)?[ \t])*)*\<(?:(?:\r\n)?[ \t])*(?:@(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|\[([^\[\]\r\\]|\\.)*\](?:(?:\r\n)?[ \t])*)(?:\.(?:(?:\r\n)?[ \t])*(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|\[([^\[\]\r\\]|\\.)*\](?:(?:\r\n)?[ \t])*))*(?:,@(?:(?:\r\n)?[ \t])*(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|\[([^\[\]\r\\]|\\.)*\](?:(?:\r\n)?[ \t])*)(?:\.(?:(?:\r\n)?[ \t])*(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|\[([^\[\]\r\\]|\\.)*\](?:(?:\r\n)?[ \t])*))*)*:(?:(?:\r\n)?[ \t])*)?(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|"(?:[^\"\r\\]|\\.|(?:(?:\r\n)?[ \t]))*"(?:(?:\r\n)?[ \t])*)(?:\.(?:(?:\r\n)?[ \t])*(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|"(?:[^\"\r\\]|\\.|(?:(?:\r\n)?[ \t]))*"(?:(?:\r\n)?[ \t])*))*@(?:(?:\r\n)?[ \t])*(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|\[([^\[\]\r\\]|\\.)*\](?:(?:\r\n)?[ \t])*)(?:\.(?:(?:\r\n)?[ \t])*(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|\[([^\[\]\r\\]|\\.)*\](?:(?:\r\n)?[ \t])*))*\>(?:(?:\r\n)?[ \t])*)|(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|"(?:[^\"\r\\]|\\.|(?:(?:\r\n)?[ \t]))*"(?:(?:\r\n)?[ \t])*)*:(?:(?:\r\n)?[ \t])*(?:(?:(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|"(?:[^\"\r\\]|\\.|(?:(?:\r\n)?[ \t]))*"(?:(?:\r\n)?[ \t])*)(?:\.(?:(?:\r\n)?[ \t])*(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|"(?:[^\"\r\\]|\\.|(?:(?:\r\n)?[ \t]))*"(?:(?:\r\n)?[ \t])*))*@(?:(?:\r\n)?[ \t])*(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|\[([^\[\]\r\\]|\\.)*\](?:(?:\r\n)?[ \t])*)(?:\.(?:(?:\r\n)?[ \t])*(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|\[([^\[\]\r\\]|\\.)*\](?:(?:\r\n)?[ \t])*))*|(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|"(?:[^\"\r\\]|\\.|(?:(?:\r\n)?[ \t]))*"(?:(?:\r\n)?[ \t])*)*\<(?:(?:\r\n)?[ \t])*(?:@(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|\[([^\[\]\r\\]|\\.)*\](?:(?:\r\n)?[ \t])*)(?:\.(?:(?:\r\n)?[ \t])*(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|\[([^\[\]\r\\]|\\.)*\](?:(?:\r\n)?[ \t])*))*(?:,@(?:(?:\r\n)?[ \t])*(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|\[([^\[\]\r\\]|\\.)*\](?:(?:\r\n)?[ \t])*)(?:\.(?:(?:\r\n)?[ \t])*(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|\[([^\[\]\r\\]|\\.)*\](?:(?:\r\n)?[ \t])*))*)*:(?:(?:\r\n)?[ \t])*)?(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|"(?:[^\"\r\\]|\\.|(?:(?:\r\n)?[ \t]))*"(?:(?:\r\n)?[ \t])*)(?:\.(?:(?:\r\n)?[ \t])*(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|"(?:[^\"\r\\]|\\.|(?:(?:\r\n)?[ \t]))*"(?:(?:\r\n)?[ \t])*))*@(?:(?:\r\n)?[ \t])*(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|\[([^\[\]\r\\]|\\.)*\](?:(?:\r\n)?[ \t])*)(?:\.(?:(?:\r\n)?[ \t])*(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|\[([^\[\]\r\\]|\\.)*\](?:(?:\r\n)?[ \t])*))*\>(?:(?:\r\n)?[ \t])*)(?:,\s*(?:(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|"(?:[^\"\r\\]|\\.|(?:(?:\r\n)?[ \t]))*"(?:(?:\r\n)?[ \t])*)(?:\.(?:(?:\r\n)?[ \t])*(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|"(?:[^\"\r\\]|\\.|(?:(?:\r\n)?[ \t]))*"(?:(?:\r\n)?[ \t])*))*@(?:(?:\r\n)?[ \t])*(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|\[([^\[\]\r\\]|\\.)*\](?:(?:\r\n)?[ \t])*)(?:\.(?:(?:\r\n)?[ \t])*(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|\[([^\[\]\r\\]|\\.)*\](?:(?:\r\n)?[ \t])*))*|(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|"(?:[^\"\r\\]|\\.|(?:(?:\r\n)?[ \t]))*"(?:(?:\r\n)?[ \t])*)*\<(?:(?:\r\n)?[ \t])*(?:@(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|\[([^\[\]\r\\]|\\.)*\](?:(?:\r\n)?[ \t])*)(?:\.(?:(?:\r\n)?[ \t])*(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|\[([^\[\]\r\\]|\\.)*\](?:(?:\r\n)?[ \t])*))*(?:,@(?:(?:\r\n)?[ \t])*(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|\[([^\[\]\r\\]|\\.)*\](?:(?:\r\n)?[ \t])*)(?:\.(?:(?:\r\n)?[ \t])*(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|\[([^\[\]\r\\]|\\.)*\](?:(?:\r\n)?[ \t])*))*)*:(?:(?:\r\n)?[ \t])*)?(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|"(?:[^\"\r\\]|\\.|(?:(?:\r\n)?[ \t]))*"(?:(?:\r\n)?[ \t])*)(?:\.(?:(?:\r\n)?[ \t])*(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|"(?:[^\"\r\\]|\\.|(?:(?:\r\n)?[ \t]))*"(?:(?:\r\n)?[ \t])*))*@(?:(?:\r\n)?[ \t])*(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|\[([^\[\]\r\\]|\\.)*\](?:(?:\r\n)?[ \t])*)(?:\.(?:(?:\r\n)?[ \t])*(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|\[([^\[\]\r\\]|\\.)*\](?:(?:\r\n)?[ \t])*))*\>(?:(?:\r\n)?[ \t])*))*)?;\s*)

Setup a Laravel dev machine

2017-02-06 19:44:51 PHP, DEV, NODE, LUNUX, SYSTEM, LARAVEL

Install required tools to develop Laravel Pages localy with MySQL.

# MySQL 

sudo apt install mysql-server


sudo apt install libnss3-tools jq xsel
sudo apt install php php-cli php-common php-curl php-json php-mbstring php-mcrypt php-mysql php-opcache php-readline php-xml php-zip php-mysql

# Composer

get install from https://getcomposer.org/download/

mv composer.phar /usr/local/bin/composer

# Laravel Globaly

composer global require "laravel/installer"

echo 'export PATH="$PATH:$HOME/.config/composer/vendor/bin"' >> ~/.bashrc

source ~/.bashrc

# NPM/Node

curl -sL https://deb.nodesource.com/setup_7.x | sudo -E bash -
sudo apt install -y nodejs  build-essential

sudo npm install -g gulp

# Optional webAdminInterface for sql

wget https://github.com/vrana/adminer/releases/download/v4.2.5/adminer-4.2.5-mysql.php
wget https://raw.githubusercontent.com/pappu687/adminer-theme/master/adminer.css

with a custom css-file for some nice styling =P


now just

laravel new <NAME> 
cd <NAME>
npm install

Over and out :)

NeoPixel Test

2017-02-06 19:39:56 ARDUINO, DIY, ESP

Enkelt demo på hur man kan kontrollera en neopixelsticka med en esp8266 å en webapp .

Check out Demo on YouTube

hela koden ligger på github så bara in å gröta loss i "fulkoden"