Pages

Showing posts with label javascript. Show all posts
Showing posts with label javascript. Show all posts

Saturday, October 3, 2020

Fedora 32 : Create games with Phaser Editor 2D.

Today I install Phaser Editor 2D on Fedora 32, you can download it from the official website. I create an account and I download the archive for Linux. After unarchive I used very simple:
[mythcat@desk ~]$ cd PhaserEditor2D/
[mythcat@desk PhaserEditor2D]$ ls
editor  PhaserEditor2D  README.TXT  templates
[mythcat@desk PhaserEditor2D]$ ./PhaserEditor2D 
Phaser Editor 2D - v3.7.1

=> Running in Free mode (only 70 files per project allowed)
=> Purchase a license: https://gum.co/phasereditor

2020/10/03 16:17:51 Loading workspace at /home/mythcat/PhaserEditor2D_Projects
2020/10/03 16:17:51 Listening at http://127.0.0.1:1959/editor

Play IDE online : https://play.phasereditor2d.com/
Documentation   : https://help.phasereditor2d.com/v3
File bugs/ideas : https://github.com/PhaserEditor2D/PhaserEditor2D-v3/
Keep in contact : https://twitter.com/PhaserEditor2D

=> Open the web browser at http://127.0.0.1:1959/editor

2020/10/03 16:17:52 No updates available.
Phaser Editor 2D is a commercial IDE to develop video-games. It is delivered as an offline product and users can run it for free (with certain limitations) or can purchase a license key to unlock all features. Phaser Editor 2D version 3, the latest, is a complete new software based on web technologies. So we created Play Phaser Editor 2D, a small service to allow Phaser Editor 2D license owners, to run the editor and create small projects in the cloud. However, in the future, we will provide a different cloud service with options for storage, collaboration, publishing, integration with other services and payment. These are the Play Phaser Editor 2D available plans: Free Plan and Premium Plan About Free Plan: Running the FREE PLAN 0B/50MB of storage is used 59 days before expiration date The Premium Plan comes with these options:
  • One Year License - 30$ Valid for one year after the purchase. Phaser Editor 2D Team email support. Write to developers@phasereditor2d.com. The option to refund in the first month after the purchase.
  • Two Years License - 45$ Valid for two years after the purchase. Phaser Editor 2D Team email support. Write to developers@phasereditor2d.com. The option to refund in the first month after the purchase.
  • Lifetime License - 75$ Never expires. Phaser Editor 2D Team email support. Write to developers@phasereditor2d.com. The option to refund in the first month after the purchase.
  • Two Years Team License - 125$ 5 developers allowed. Valid for two years. Phaser Editor 2D Team email support. Write to developers@phasereditor2d.com. The option to refund in the first month after the purchase.
This is a video tutorial from official youtube channel:

Sunday, September 16, 2018

Fedora 28 : Using AdonisJs web framework.

AdonisJs is a Node.js web framework with a breath of fresh air and drizzle of elegant syntax on top of it.
We prefer developer joy and stability over anything else.
I tested today this web framework named AdonisJs with Fedora 28.
The main goal was to use MySQL with MariaDB from Fedora 28 distro.
Let's start with the installation of AdonisJs on Fedora 28:
[root@desk mythcat]# npm i --global @adonisjs/cli
/usr/bin/adonis -> /usr/lib/node_modules/@adonisjs/cli/index.js
...
+ @adonisjs/cli@4.0.7
added 406 packages from 182 contributors in 33.533s
Go to the default user:
[root@desk mythcat]# exit
exit
Create the application , I named myapp:
[mythcat@desk ~]$ adonis new myapp
    _       _             _         _     
   / \   __| | ___  _ __ (_)___    | |___ 
  / _ \ / _` |/ _ \| '_ \| / __|_  | / __|
 / ___ \ (_| | (_) | | | | \__ \ |_| \__ \
/_/   \_\__,_|\___/|_| |_|_|___/\___/|___/

  [1/6] 🔬  Requirements matched [node & npm]
  [2/6] 🔦  Ensuring project directory is clean [myapp]
  [3/6] 📥  Cloned [adonisjs/adonis-fullstack-app]
  [4/6] 📦  Dependencies installed
  [5/6] 📖  Environment variables copied [.env]
  [6/6] 🔑  Key generated [adonis key:generate]

🚀   Successfully created project
👉   Get started with the following commands
Let's test the default myapp with this commands:
$ cd myapp
$ adonis serve --dev

[mythcat@desk ~]$ cd myapp
[mythcat@desk myapp]$ adonis serve --dev

 SERVER STARTED 
> Watching files for changes...

2018-09-16T09:47:46.799Z - info: serving app on http://127.0.0.1:3333
This is the result of the running myapp on 127.0.0.1:3333 web address:
Let's see the folders and files from AdonisJS:
[mythcat@desk myapp]$ ls
ace  config    node_modules  package-lock.json  README.md  server.js
app  database  package.json  public             resources  start
The configuration for web files can be seen here:
[mythcat@desk myapp]$ vim  start/routes.js 
'use strict'

/*
|--------------------------------------------------------------------------
| Routes
|--------------------------------------------------------------------------
|
| Http routes are entry points to your web application. You can create
| routes for different URL's and bind Controller actions to them.
|
| A complete guide on routing is available here.
| http://adonisjs.com/docs/4.1/routing
|
*/

/** @type {import('@adonisjs/framework/src/Route/Manager'} */
const Route = use('Route')

Route.on('/').render('welcome')
~                                                                               
This is telling Adonis that when the root of the site is loaded, render a template/view called welcome.
That welcome template can be found in /resources/views/welcome.edge.
[mythcat@desk myapp]$ cd resources/
[mythcat@desk resources]$ ll
total 0
drwxrwxr-x. 2 mythcat mythcat 26 Sep 16 12:46 views
[mythcat@desk resources]$ cd views/
[mythcat@desk views]$ ll
total 4
-rw-rw-r--. 1 mythcat mythcat 339 Sep 16 12:46 welcome.edge
Let's see the source code of this default webpage:
[mythcat@desk views]$ vim welcome.edge 
...
For example, if you change into start/routes.js from welcome to index then you need to rename the welcome.edge to index.edge .
About css files you can make changes into public/style.css :
[mythcat@desk myapp]$ cd public/
[mythcat@desk public]$ vim  style.css


@import url('https://fonts.googleapis.com/css?family=Montserrat:300');

html, body {
  height: 100%;
  width: 100%;
}

body {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  background-image: url("/splash.png");
  background-color: #220052;
}

* {
  margin: 0;
  padding: 0;
}
...
Using the mysql database is simple. Into Fedora 28 distro you can use mariadb, let's install it.
[mythcat@desk myapp]$ su
Password: 
[root@desk myapp]# dnf install mariadb mariadb-server
...
Complete!
[root@desk myapp]# systemctl start mariadb
[root@desk myapp]# systemctl status mariadb
● mariadb.service - MariaDB 10.2 database server
...
You need to make changes into .env file into your project folder.
[mythcat@desk myapp]$ vim .env
HOST=127.0.0.1
PORT=3333
NODE_ENV=development
APP_URL=http://${HOST}:${PORT}
CACHE_VIEWS=false
APP_KEY=xxxxxxxxxxxxxxxx
DB_CONNECTION=sqlite
DB_HOST=127.0.0.1
DB_PORT=3306
DB_USER=root
DB_PASSWORD=
DB_DATABASE=adonis
SESSION_DRIVER=cookie
HASH_DRIVER=bcrypt
~
Use this changes for mariadb:
DB_CONNECTION=mysql
Install into AdonisJs with this command:
[mythcat@desk myapp]$ adonis install mysql
  [1/1] 📦  Dependencies installed [mysql]
Use this mysql commands to create the database:
[mythcat@desk myapp]$ mysql -u root
Welcome to the MariaDB monitor.  Commands end with ; or \g.
Your MariaDB connection id is 18
Server version: 10.2.17-MariaDB MariaDB Server

Copyright (c) 2000, 2018, Oracle, MariaDB Corporation Ab and others.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

MariaDB [(none)]> create database adonis;
Query OK, 1 row affected (0.11 sec)

MariaDB [(none)]> exit;
Bye 
Let's test migration command for files to allow you to create and delete tables.
[mythcat@desk myapp]$ adonis migration:run
migrate: 1503248427885_user.js
migrate: 1503248427886_token.js
Database migrated successfully in 4.11 s
[mythcat@desk myapp]$ adonis make:migration jobs
> Choose an action undefined
✔ create  database/migrations/1537095058367_jobs_schema.js
Now that our database and tables have been created, I can create a model for handling jobs table and associated data.
The next tasks to follow depends by your website:

  • Creating a Model 
  • Creating a Controller 
  • User Authentication

Thursday, August 9, 2018

Fedora 28 : Linux application with node.js and Electron packager.

Today I make a tutorial about how to use node.js and Electron packager to create cross-platform applications.
The tutorial show you how to create Windows, Linux and Mac OS cross-platform applications and can be found here.
This is result of running the linux application with Fedora 28:

Tuesday, February 13, 2018

Fedora 27 : Test browsers for inline security.

Open the browser with this page: https://github.com.
Next step is to open the Developer Tools console.
If you use Opera then you can use this keys: Ctr+Shift +C .
If you use Firefox or Chrome browsers use F12 key.
Paste the following code into the console area to create a new inline script and add this java script:
var test = document.createElement('script');
test.innerText = 'alert("hi there");'
document.body.appendChild(test);
For example, this is a good security result on my Opera browser.

The result of this message tell us about the script we tried to execute was stopped by the browser.

Saturday, February 13, 2016

Deal with highmaps.js - javascript library.

Another tutorial I make today about highmaps.js.
This simple example just allow us to understanding how this library working.
The tutorial can be found here.
This is result of the html5 files:


Sunday, January 17, 2016

News: jQuery 3.0 Beta Released.

The team member of jQuery Core - Timmy Willison told us in a blog post about Query 3.0 Beta Released. Developers with jQuery 3.0 alpha had experimented with methods like an inline-display-none-remover (.show()) and inline-display-none-adder (.hide()) and removing inline display:none did not always show the element. Fix the custom selectors like :visible make is up to 17 times faster now. Link jQuery with :
https://code.jquery.com/jquery-3.0.0-beta1.js
https://code.jquery.com/jquery-3.0.0-beta1.min.js
...or get the beta version from npm:
npm install jquery@3.0.0-beta1

Saturday, May 26, 2012

Show large image like thumbnails in firefox using greasemonkey

Today I focused on a problem you often encounter.

We have a web folder containing a series of large image files. We want to see the folder that contains but would be difficult to download all the images and then view them search to find a picture of us.

I installed Greasemonkey addon and I began to study how it works.

I don't have experience with javascript programming.

I still managed to make the script below:

// ==UserScript==
// @name        show-image
// @namespace   show-image
// @description show images from files
// @include     http://*
// @version     0.1
// ==/UserScript==
var elements = document.getElementsByTagName("a");
  for (var i=0; (anchor=elements[i]); i++) {
   src = anchor.getAttribute("href");
  if (src.indexOf('.gif') > -1 || src.indexOf('.jpg') > -1 || src.indexOf('.JPG') > -1 || src.indexOf('.jpeg') > -1)
  {
    img = document.createElement('img');
    img.setAttribute('src',src);
    img.style.width='10%';
    anchor.appendChild(img);
   }
  }

You can add to show the png file by adding in the if condition in the script :

src.indexOf('.png') > -1 || src.indexOf('.PNG') > -1

I hope to help you.