Javascript :: WebTracker JS core

This Javscript-Code was programmed
by Arjuna Noorsanto aka. Loopshape as Megaterios in 2016

Hello? What’s diz? 

It’s an Indexer-Archive with a Scoring-System for fast related search queries and a structured hierarchy sorted by clicks, re-views, date and a context-interpreter

You can find this script on Github, that’s embedded into a Laravel5 framework:
https://github.com/Loopshape/webtracker

 

 

Linux :: Combine a normal user-account with the ROOT possibility in the shell by symlinks

Colorshiftings_stage

I want to show a screenshot of two directories, how I manage to administrate my normal account with ROOT-privileges. I’ve created Symlinks for each DOT-directory and gain complete access over my normal account if needed.

Screenshot of the two account-directories:

Bildschirmfoto_2016-07-01_14-30-36

Shell listings of two directories of each account with symlinks for ROOT access into the normal $USER account. This mirrored directory of the normal $USER account can get ROOT-privileges. Only global software for all accounts is installed in ROOT!

 

Possible through these following commands:

\> su (enter ROOT password)
\> cd /root
\> sudo rm -Rf *
\> sudo ln -s /home/$USER/.* .
(copies only DOT-directories for environment)
\> sudo ln -s /home/$USER/* .
(copies all standard-directories with no prefixed . DOT  there)
\> exit (go back to default $USER account)

With this user management I’m able to gain complete ROOT over my normal $USER account if needed, to setup all necessary settings available 😉  

 

Kind regards,
Arjuna aka. LOOPSHAPE

Linux :: Install Docker.IO on a 32-Bit machine to host a Gitlab server

Bildschirmfoto_2016-06-16_18-57-56

##
#
# Install Docker.IO on a 32-Bit machine
# to host a Gitlab server 😉
#   
# based on the tutorial from:  
# //hub.docker.com/r/m0elnx/gitlab-32bit/  
#  
# written by Arjuna Noorsanto  
#  
##  

  • Do first extend your /etc/apt/sources.list with the repo backports
  • Then install docker.io on your 32-bit machine
  • update your kernel, if an error occurs

Then you can download all necessary docker-images for running a Gitlab server on a 32-Bit machine:

Now you can start all necessary processes, to host your own Gitlab server on a 32-bit machine:

…now wait a while (approx. 2-10min), till the server has solved it’s first init…

Login into Gitlab frontend (and setup root password on first run)

http://localhost:10080

You can create another user by registering one more account and set it free with the ROOT account preferences.

…enjoy your git repo with 32-bit!!

#git #repository #server #hosting #32bit #docker #linux #image #container

SUN24Y DeskWorld-Theme

SpaceScene

… to have a Linux Debian custom desktop-environment.

This GIT repository contains different configuration files for the desktop environment, using following applications for an enhanced UX (=user experience):
https://github.com/Sun24Y/Desktop

  • Compiz desktop-area management
  • Emerald window-manager for decorations and color gradients
  • Cairo-Dock enhanced menu-application for an advanced user-experience
  • Screenlets for advanced information panels within the screen
  • some additional config files were sorted
    by HOME/ROOT-dirs

There are some preconfigured config files ready for import into the dependent extension!

You must have installed:
+ Vertex theme (dark)
+ Compiz engine
+ Emerald WM
+ Gnome core files
+ Cairo-Dock menu application
+ Graphic-card with more than 256MB RAM

Installation
##### You can read a more detailed summary under following URL in the Sun24Y wiki:
https://github.com/Sun24Y/Sun24Y_DeskWorld.theme/wiki/A-summary-for-installing-a-customized-Linux-Debian-desktop-environment-on-your-local-machine

#

Kind regards,

Arjuna Noorsanto [Administrator]
eMail: awebgo.net@gmail.com

Linux :: SunRay, a colorful skin for the customized Debian v8.4 environment

Linux :: Customized desktop environment

Bildschirmfoto - 07.03.2016 - 08:02:00

Since at the beginning of this year, I’ve switched my operation-system to Linux Debian “Jessie” v8.2. to have a better experience with “Web Development” in the Terminal and to have more compatibility with some web-servers.
So I started to assemble my whole desktop from the font till to the color-spectrum and got such a great desktop-theme with a nice usability-experience 😉

These possibilities to customize the whole OS are limitless and makes big fun. I never ever want another OS than Linux, now. It’s just unbelievable for me to have such a great environment under the GNU/OpenSource license. That’s really awesome!!!

Following parts of Linux were used to create this desktop environment:

> WindowManager:
https://wiki.debian.org/Xfce

> Theme:
https://github.com/horst3180/Vertex-theme

> MainMenu:
http://glx-dock.org/

> IconTheme:
http://packages.ubuntu.com/precise/gnome/gnome-wine-icon-theme

> FontCharset:
http://www.dafont.com/de/radio-space.font


#linux#desktop#debian#customization#theme#colors#xfce4#web#development#terminal#server

Shell :: Oh my ZSH

Bildschirmfoto - 11.03.2016 - 07:39:56

Oh-My-Zsh is an open source, community-driven framework for managing your ZSH configuration. It comes bundled with a ton of helpful functions, helpers, plugins, themes, and a few things that make you shout…

Website with instructions to install via CURL or Wget:
http://ohmyz.sh/

Github repository for manual install:
https://github.com/robbyrussell/oh-my-zsh


#commandline #shell #script #zsh #extension

MySQL :: replace value for all or only one table(s)

This is a handy PHP script from Lee Woodman with a small modification by me to replace a value in a MySQL database. You can modify the entire database or just one table:


// http://stackoverflow.com/questions/11839060/find-and-replace-text-in-all-table-using-mysql-query

// Extended functionality added by: Arjuna Noorsanto <awebgo.net@gmail.com>
// https://github.com/Loopshape

// ————————————————————

// Connect to your MySQL database.
$hostname = “DATABASE_HOST”;
$username = “DATABASE_USERNAME”;
$password = “DATABASE_PASSWORD”;
$database = “DATABASE_SCHEME”;

// ————————————————————

// Define specific column
$table_name = “TABLE_NAME”;
$column_name = “COLUMN_NAME”;

// The find and replace strings.
$find = “OLD_VALUE”;
$replace = “NEW_VALUE”;

// ————————————————————

mysql_connect($hostname, $username, $password);

// The main routine for: replace/insert new value
// If you want to change only one table, then just add a $ infront “table_name” within this routine
// Should all tables be modified, then remove the $ from “table_name” and the database information_scheme is the source automatically

$loop = mysql_query(”
SELECT
concat(‘UPDATE ‘,table_schema,’.’, table_name, ‘ SET ‘, column_name, ‘=replace(‘, column_name,’, ”{$find}”, ”{$replace}”);’) AS s
FROM
information_schema.columns
WHERE
table_schema = ‘{$database}’
AND
column_name LIKE ‘%{$column_name}%'”)
or die (‘Cant loop through dbfields: ‘ . mysql_error());

while ($query = mysql_fetch_assoc($loop))
{
mysql_query($query[‘s’]);
}

// EOF
?>

#mysql #database #value #replace #php #script #github #gist

PHP • PayPal REST API :: How-to V2

Bildschirmfoto - 10.03.2016 - 09:24:50.png

I’ve written a short summary for implementing the PayPal-API into a website:

If you want to use ExpressCheckout via the REST API from Paypal, you can follow these steps to get a working API within your webapp.

  1. Install Composer, Curl and PHP on a Webserver
  2. a) Create a composer.json file with following data from the top of this page: http://developer.paypal.com/webapps/developer/docs/api/
    …take a look on the right side of the page in the darken sidebar and copy the JSON script from the first SAMPLE-REQUEST into the composer.json file. Search for a written entry like this:
    [code]
    curl -v https://api.sandbox.paypal.com/v1/payments/payment \
    -H "Content-Type:application/json" \
    -H "Authorization: Bearer Access-Token" \
    -d ‘{
    "intent":"sale",
    "payer":{
    "payment_method":"credit_card",
    "funding_instruments":[
    {
    [/code]
    Then you can take the creditcard example for preparing a payment-transaction as described on this page:
    http://github.com/paypal/PayPal-PHP-SDK/blob/master/sample/payments/CreatePayment.php
  3. b) Install the libraries with composer install
  4. c) Include the autoload.php from the Composer installation with a require_once.

You are done. I hope, this short How-to was helpful for you.  

You can find me on Gist@github.com:  http://gist.githubusercontent.com/Loopshape/

 

WebAnimation with CSS3-Transitions and -Transformations :: HowTo

When you visit my website, you can see some elements moving and fading while hovering over the browser-viewport. In this article I want to explain how I did it: 

 

First you must know, that all elements in a website could be addressed by CSS (Cascading StyleSheets) commands for modifying the color, the size and the position of each object. That’s the main goal of using CSS: Just to manipulate these three options!

But now we want to start an animation, so we need more options for each object to be changed: A start-position, an end-position and the duration of that activity.

But before we begin to create these elements, we must know, that one CSS-Rule is acting on every page and at every time we’re visiting a website:

This CSS command is always active and true, because a website consists of an HTML-document and has a BODY for containing the scripts for the output to the browser.

There are some CSS declarations for user-interaction, which we want to use for our animation:

These CSS commands are ready out-of-the-box and available in every modern browser with HTML5 support.

hover = User moves with his pointerdevice over an element to activate the CSS rule

blur = User moves with his pointerdevice to a different element to activate the CSS rule

focus = User moves with his pointerdevice to the element to activate the CSS rule

When a user visits a website, we know, that the CSS rule “html body” is always active (true). Great! We have a state of a website for starting our animation with it.

To initiate an animation when the user visits our website, we use the “html body” CSS directive in combination with the pointerdevice declarations:

So we have a complete new CSS directive which differs from the initial state at the beginning of a pagevisit and are able to use this new state for define an end of our animation.

So far… so good. But how to use this in CSS for other elements on our page?

The answer is simple: Just write the starting and ending CSS directive before each normal CSS command.

For example, you want to call a DIV with the ID “container”, then type:

This is possible, because HTML and BODY are the parent-elements of each object in the website. Always!

That’s the basic way I’m using the state of a website with the knowledge, if the user is onto the BODY element with the pointerdevice, respective the viewport has been hovered…

 

Now we can write CSS with two states of activity: One at the first pagevisit, and the other when hovering with the pointerdevice over the viewport.

An animation needs a duration. A given time is responsible for a transition and/or transformation run of an object. Without that delay, the animation would just “blink” or “flickr”.

As an example, a CSS3 definition of a time delay of 250 milliseconds for an object is given as following command:

You can add a position, a size and other CSS definitions into that rule. Then you write the same CSS declaration, but this time with a hover-statement as written above.

I can’t explain all CSS3 features in this article, because of too much information, but I can give you a hint to write these CSS definitions with ease. Use the great Online CSS3-Generator:
http://css3generator.com/

The generator is a great tool and helps you to find correct values for writing CSS3 for your own projects.

There could be different or better techniques using CSS3 with :hover or :blur. But I’ve got my experience with this combo and I like it.

 

Happy coding…

Gulpfile :: Tips & Hints for successfull stream-pipelining

In this article, I collect all relevant information about Gulp to have a reference for a successful work with it!

 

Gulp is like a sequenced NodeJS-App, which does multiple tasks in an order (pipeline) to create a file (data-stream), e.g. SASS assets compiling…

I found a good article about errorhandling with “Gulp” written by Kate Hudson on following pagelink:
http://blog.ibangspacebar.com/handling-errors-with-gulp-watch-and-gulp-plumber/

 

This is the modified Gulpfile from the Roots.IO “Sage” theme, which the Awebgo template is based on. The functions for font-recalculation and image-resizing are deactivated, so there’s a faster way to watch the scss-files on change. A modification for extended error-handling is also implemented [see: .plumber()]:

You can build your own WordPress theme with the “Sage” starter-package from Roots.IO and use the enhanced features of Gulp for the layout-design in the SASS language:
https://roots.io/sage/

NodeJS mit NVM für die Webentwicklung verwenden

Viele Webseiten nutzen heutzutage diverse Technologien, um einen möglichst großen Leistungsumfang abzudecken. Eine der umfangreichsten Anwendungsmöglichkeiten bietet “NodeJS”: Mit NodeJS kann man einen autarken Webserver aufbauen, oder auch eine komplette Webseite bereitstellen.

Um NodeJS zu verwenden, bietet sich ein kleines Tool im Netz an, womit sich die Installation fast wie von selbst bewerkstelligen lässt: NVM

In diesen Beitrag möchte ich das Tool “NVM” vorstellen und anhand einzelner Beispiele den Nutzen nahebringen.


1) Zuerst muss das Tool “NVM” von folgendem Git-Repository heruntergeladen werden: https://github.com/creationix/nvm

Dazu begeben wir uns in den Heim-Ordner unseres Accounts innerhalb unseres Webservers und laden das Repository herunter und “sourcen” das Installationsskript:

 
Tip: Zusätzlich sollte die letzte Zeile zum Sourcen auch in die Datei ~/.bashrc bzw. ~/.zshrc eingefügt werden (je nachdem ob man die Bash oder ZSH nutzt), damit NVM bei jedem Login in der Shell zur Verfügung steht…


2) Nun installieren wir NodeJS mit folgenden Befehl:

Damit haben wir nun die Tools “Node” und “NPM” in unserer Shell aktiviert. Es wird ausdrücklich empfohlen, immer die neueste Version von NPM zu verwenden, damit beim Erstellen der NODE_MODULES uns keine bösen Überraschungen kommen:

Jetzt besitzen wir die aktuellste Node und NPM Version und können nun mit den Zusammenstellen der Pakete beginnen…

 

Übrigens:

Sollte die Installation der “node_modules” fehlschlagen oder der Ablauf der Skripte erscheint fehlerhaft, so kann ein

Abhilfe schaffen und den NPM-Zwischenspeicher aufräumen. Ein zweiter Versuch des vorherigen Befehles sollte dann zum Erfolg führen…

 

Wenn NodeJS für die Assets-Kompilierung benötigt wird (in Form von z.B. Gulp oder Bower), speziell für Bild-Transformationen (Größe, Kompressionrate, Farbkanal-Änderungen) im Zusammenhang mit SASS/SCSS und es kommt dabei ein Skript-Fehler heraus, dann diese beiden Befehlszeilen eingeben:

Damit werden die Skripte aller Bildänderungen wieder ausgeführt.

Require.JS :: Scripte einbinden

01.) Die Datei “r.js” in das HTML-Template einbinden.

02.) In einer Konfigurationsdatei die Pfade und Ladeabhängigkeiten definieren. Diese Datei dann per

in den Scope laden.

 

Die Pfade sind das ausschlaggebende Merkmal aller Plugins! Diese müssen explizit an die jeweilige Website-Struktur angepasst werden.

 

Dieses Beispiel der “config.js” zeigt die Pfade dieser Website:

 

03.) Anschließend wird die Haupt-Javascript-Datei aufgerufen, in dem alle möglichen Plugins nach belieben verwendet werden:

 

 

Wer sich zB. die Require.JS Konfiguration von Awebgo (ehem. Loopshape) ansehen möchte, kann es unter diesen folgenden Link tun:
main.js

 

Aufgerufen wird die Datei über folgende Scriptanweisung:

 

Weiterführende Informationen gibt es auf der Hauptseite von Require.JS:
http://requirejs.org/docs/api.html

Treeline.io • Create a NodeJS app with a browserinterface

Treeline.io ist eine webbasierte Steuerungs-Oberfläche zum Erstellen einer NodeJS-Applikation basierend auf dem JS-Content-Management-System “SailsJS”.

Hier geht’s zur Website: Treeline.io

Treeline ermöglicht das bequeme Verwalten der einzelnen Module und zugehörigen Pakete

Treeline ermöglicht das bequeme Verwalten der einzelnen Module und zugehörigen Pakete

Treeline kompiliert alle Module und Paketabhängigkeiten zu einer vollständigen NodeJS-Anwendung

Treeline kompiliert alle Module und Paketabhängigkeiten zu einer vollständigen NodeJS-Anwendung

Eine hierarchische Darstellung aller Prozeduren wird visuell anhand eines Flussdiagrammes dargestellt

Eine hierarchische Darstellung aller Prozeduren wird visuell anhand eines Flussdiagrammes dargestellt

Linux “Ubuntu” LAMP-Server on Android • Part 1

Was bringt mir ein transportabler Webserver für unterwegs?
…ganz viel!

 

Ein Webserver, den man überall mit hinnehmen kann, ist schon eine tolle Sache:
Ich kann jederzeit und überall diverse technische Änderungen vornehmen und meiner Kreativität jederzeit freien Lauf lassen…

Deswegen bin ich auch so von dem Ubuntu LAMP-Server überzeugt!
Mitunter einen voll konfigurierbaren Apache2 HTTP-Server und einer MySQL Datenbank mit PHPmyAdmin-Zugriff ist alles notwendige vorhanden, um mobil Webentwicklung zu betreiben.
Auch auf “Composer”, “NodeJS” und “Grunt/Gulp” brauch ich nicht zu verzichten. Bei Bedarf kann auch noch RubyOnRails installiert werden, solange der Speicher noch genügend Platz auf der Speicherkarte hergibt.

Wie ich den Webserver auf einen Android-Gerät wie zB. einen Tablet einrichte, wird näher in einen vorigen Post von mir erwähnt:
Ubuntu LAMP-Webserver auf einem Android Device

Login in Linux Ubuntu über ein Android-Device

Login in Linux Ubuntu über ein Android-Device

Ein Editor für die Remote-Datei-Verwaltung

Ein Editor für die Remote-Datei-Verwaltung

Ein Apache2-Webserver liefert die nötige Power für die PHP-Scripte

Ein Apache2-Webserver liefert die nötige Power für die PHP-Scripte

 

PHP • PayPal REST-API :: How to

If you want to use ExpressCheckout via the REST API from Paypal, you can follow these steps to get a working API within your webapp.

1. Install Composer, Curl and PHP on a Webserver

2. a) Create a composer.json file with following data from the top of this page:
https://developer.paypal.com/webapps/developer/docs/api/

2.b) Install the libraries with composer install

2.c) Include the autoload.php from the Composer installation with a require_once.

3.a) Setup the REST-API-SDK-PHP library files with your credentials from the Paypal developer site:
sdk_config.ini and in the bootstrap.php that could be found in the folder vendor/paypal/rest-api-sdk-php

3.b) Set up a define command with a pointer to the sdk_config.ini file.
define(‘PP_CONFIG_PATH’, …path to the sdk_config.ini file…);

4. Build a form with a PayPal-button and send the form parameters via $_POST to this file:
https://github.com/paypal/rest-api-sdk-php/blob/master/sample/payments/CreatePaymentUsingPayPal.php

5. After successful payment from the Paypal website you have to redirect the user to this file:
https://github.com/paypal/rest-api-sdk-php/blob/master/sample/payments/ExecutePayment.php

You are done!