WBDSGNR - Real Life Implement

Friday, 20 July 2018

headwayapp.co : Create notification for changes

Easiest way to keep your customers in the loop about your product.

Every update that you can share with your users, you should.They will love you for this, we promise.

Thursday, 19 July 2018

Javascript: getElementByClassName change all class from js

<h2 class="title">This text will change</h2>
<script>
var x = document.getElementsByClassName("title");
var i;
for (i = 0; i < x.length; i++) {
x[i].innerHTML= "This text has changed";
}
</script>

JQUERY : editable HTML 5 save at local storage

//editable cookies enable
$(function(){
var edit = document.getElementById('your-id');
$(edit).blur(function(){
localStorage.setItem('todoData', this.innerHTML);
});
//when the page loads
if ( localStorage.getItem('todoData')){
edit.innerHTML = localStorage.getItem('todoData');
}
})

<p id="your-id" contenteditable="true"> Ubah ayat ni dan ia save kat browser </p>

CONS
satu id boleh simpan 1 satu data.. maksudnya, kalau id ada ditempat lain.. data pada id yang pertama sahaja akan boleh diubah

https://code.tutsplus.com/tutorials/28-html5-features-tips-and-techniques-you-must-know--net-13520

Javascript : manipulate id DOM using javascript (cool!)

Thursday, 12 July 2018

Navbar hide or fade when scroll








<style>



#navbar-scroll {

  transition: top 0.5s; /* Transition effect when sliding down (and up) */

}



</style>





<body>

<script>

    var prevScrollpos = window.pageYOffset;

    window.onscroll = function() {

    var currentScrollPos = window.pageYOffset;

      if (prevScrollpos > currentScrollPos) {

        document.getElementById("navbar-scroll").style.top = "0";

      } else {

        document.getElementById("navbar-scroll").style.top = "-50px";

      }

      prevScrollpos = currentScrollPos;

    }



</script>

</body>

Monday, 2 July 2018

Vue 3 Todo code example

<template>

    <div class="fiftycent card" id="tododiv">

            <div class="card-header">
                    CREATE TODO LIST
            </div>

        <ol>
            <li v-for="todo in todos" :key="todo">
                <div class="margin-text"></div>

                <input v-model="todo.done" type="checkbox">  <!-- v-model interact dengan js-->

                <span >{{todo.ayat}}</span> <!-- span ditaruk semasa nak letak checkbox-->
                <!-- refer item .text-->

            </li>
        </ol>

        <!-- input model -->
        <input  v-model='newTodo'
                v-on:keydown.enter='addTodo()'
                type='text'  class="text-box" placeholder="Type something here" > <!--v-on enter to addTodo -->

        <div class="btn-group" role="group" aria-label="Group Button">
                <button v-on:click='addTodo()'
                 type="button" class="btn fm-button">Add</button>

                <button v-on:click='reverseList()'
                type="button" class="btn fm-button-dark">Reverse</button>

        </div>

    </div><!-- function semua dalam div refer id kerja dalam js -->

</template>

<script>
export default {
  data() {
    return {
      // data mula disini
      todos: [
        {
          ayat: "Belajar HTML",
          done: true // done adalah checkbox
        },
        {
          ayat: " belajar Css",
          done: false // ayat: adalah item
        },
        {
          ayat: " belajar Javascript" // ayat: adalah item
        }
      ]
    };
  }, // data default tamat disini

  methods: {
    //add method sini
    addTodo() {
      //add function sini
      this.todos.push({
        //this. refer addTodo
        ayat: this.newTodo, // refer array item di atas
        done: false // item checkbox + boolean condition
      });
      this.newTodo = "";
    },
    reverseList() {
      this.todos.reverse();
    }
  }
}; //method tamat disini
</script>

<style>

</style>

Migration Vue 1 to latest

https://github.com/vuejs/vue-migration-helper

Pure Javascript : document.getElement

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Finding elements by ID</title>
    </head>
    <body>

        <h1 id="heading">All about dogs</h1>
        
        <p>The domestic <span class="animal">dog</span> is known as man's best friend. The <span class="animal">dog</span> was the first domesticated animal and has been widely kept as a working, hunting, and pet companion. According to recent coarse estimates, there are currently between 700 million and one billion <span class="animal">dog</span>s, making them the most abundant predators in the world. <a href="http://en.wikipedia.org/wiki/Dog">Read more on Wikipedia</a>.</p>
        
        <img src="https://www.kasandbox.org/programming-images/animals/dog_sleeping-puppy.png" height="150" alt="Sleeping puppy">
        
        <img src="https://www.kasandbox.org/programming-images/animals/dogs_collies.png" height="150" alt="Dogs running">
        
        <script>

        var headingEl = document.getElementById("heading");
        console.log(headingEl);
        headingEl.innerHTML="all about cat"

        var nameEls = document.getElementsByClassName ("animal");
        console.log(nameEls[0]);
            for (var i = 0; i < nameEls.length; i++) {
                nameEls[i].innerHTML = "cat";
            }
        </script>
    </body>
</html>

... //mhz

add for bawah document.getElementsByClassName("animal"); untuk dapatkan semua class yang ada tag animal

var nameEls = document.getElementsByClassName("animal");
            console.log(nameEls);
            for (var i = 0; i < nameEls.length; i++) {
                nameEls[i].innerHTML = "cat";
            }

...// mhz

<body>

        
        <div class="name-tag">
            <h1>Hello, my name is...</h1>
            <p>Grace Hopper</p>
        </div>
        
        <div class="name-tag">
            <h1>Hello, my name is...</h1>
            <p>Alan Turing</p>
        </div>
        
        <script>
       var namaKuEls = document.getElementsByTagName("h1");
    
        for (var i = 0; i < namaKuEls.length; i++) {
                namaKuEls[i].innerHTML = "Muhaza";
            }
        </script>
    </body>

//rujuk : https://www.khanacademy.org/computing/computer-programming/html-css-js/html-js-dom-access/p/finding-multiple-dom-elements-by-tag-or-class-name

Sunday, 1 July 2018

Vue 3 : How to start making components

1. create component.vue and add this code structure inside it

<template>

<div>

</div>

</template>

<script>

export default {

data(){

return{

}

},

}

</script>

2. Looking add main.js and declare for the existence of the component

import Vue from 'vue'

import App from './App.vue'

import component from './components/component.vue'

Vue.component('component', component);

Vue.config.productionTip = false

new Vue({

render: h => h(App)

}).$mount('#app')

3. Looking for app.vue and add component selector and done!

<template>

<div">

<component></component>

</div>

  <waddup></waddup>

  </div>

</template>

<script>

export default {

  data(){

    return{

    }

  },

}

</script>

<style>

#app {

  font-family: 'Avenir', Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

  margin-top: 60px;

}

</style>

Vue 3 Rules of Directives

Vue 3 not the same as vue 1. It becoming much simpler however it will us spending time to search for solution.

here the new style how to write v-if and else

<div v-if ="seen">this should seen!</div>

  <div v-else>Hei you All!</div>

for v-for, it required key

<li v-for="front in fronts" :key="front">

Friday, 29 June 2018

Vue CLI V2 And V3

Looking at vue-cli repository I see two different ways of scaffolding vue projects.

The v3 (beta) version, installed as npm install -g @vue/cli, creates projects using the following command:

vue create my-project

While the version 2.9.x, available at master branch, is installed as npm install -g vue-cli and it allows projects scaffolding with the following:

vue init <template-name> <project-name>

for example:

vue init webpack my-project

So, in your scenario, for v3 version you should use: vue create test-app.

Here you can find further information.

Thursday, 28 June 2018

Building and Extract APK using APKtool

ibotpeaches.github.io/Apktool

A tool for reverse engineering 3rd party, closed, binary Android apps. It can decode resources to nearly original form and rebuild them after making some modifications. It also makes working with an app easier because of the project like file structure and automation of some repetitive tasks like building apk, etc.

It is NOT intended for piracy and other non-legal uses. It could be used for localizing, adding some features or support for custom platforms, analyzing applications and much more.

Extract apk and rebuild

Wednesday, 27 June 2018

Reading Javascript #1

Variable & array

[ 'item 1', 'item 2', 'item 3' ] ← this is array item is value

var ← this refering to variable

var todos ← this is the name of variable

var todos = [ 'item 1', 'item 2', 'item 3' ] ← this complete variable how it should look like.

variable contain name and array. Array is a data

-------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------

console.log

console.log('hello there') ← this is console.log, it show the text print
console.log('hello there', 'muhaza') ← this is how to combine 2 text

'string' 'value' inside of this '' can be describe as string or value.

-------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------

Combine Variable with Console.log

var todos = [ 'item 1', 'item 2', 'item 3' ] ← declare var first

console.log(todos) ← call it by using console.log

Declare and Call terms for my personal note

Variable named todos declared as [ 'item 1', 'item 2', 'item 3' ] values now its complete as data

-------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------

to print as text or variable

console.log(todos) ← this will print as variable

console.log('buat') ← this will be print as text

console.log('buat', todos) ← this will be print text and variable

'buat' is text value, todos is var name that have array with variable data.

Problem : Now its already declare var todos have 3 array item. How to add more?

-------------------------------------------------------------------------------------------------------

.push to add more array on declared var

todos.push('item 4') ← add .push after array name and set new array

using () not using []

Problem : I have added array item and i want to delete it..

-------------------------------------------------------------------------------------------------------

1. should notice which item inside array you want to delete?

2. you should know that computer start counting from 0

todos[0] ← call the var name and using [] call first item inside array.

todos[1] ← call the var name and using [] call second item inside array.

todos[0] = 'item change' ← add = and declare new item or value

Result gonna be by type todos on console

before

["item 1", "item 2", "item 3", "item 4"]

after

["item change", "item 2", "item 3", "item 4"]

Tuesday, 26 June 2018

Remove .html / .php from url

create .htaccess and copy paste code below

RewriteEngine on
RewriteCond %{THE_REQUEST} /([^.]+)\.html [NC]
RewriteRule ^ /%1 [NC,L,R]
RewriteCond %{REQUEST_FILENAME}.html -f
RewriteRule ^ %{REQUEST_URI}.html [NC,L]
RewriteEngine on
RewriteCond %{THE_REQUEST} /([^.]+)\.php [NC]
RewriteRule ^ /%1 [NC,L,R]
RewriteCond %{REQUEST_FILENAME}.php -f
RewriteRule ^ %{REQUEST_URI}.php [NC,L]

next save it on root folder same with index. Now html no longer needed.

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}\.php -f
RewriteRule ^(.*)$ $1.php [NC,L]

CSS Target to replace JQuery

Ok.. I just found :target on css.. freaking out!

https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_target_modal
https://www.w3schools.com/cssref/sel_target.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/:target

Add animation on it to make it life

https://css-tricks.com/on-target/

here the full code of mine

https://codepad.co/snippet/WoBwuMB7

Sunday, 24 June 2018

NPM Shown err to much

npm cache clean --force

bye bye

npm install -g npm@latest
npm cache verify
npm i

Now lets create new json package

npm init --yes

Remove rubbish package inside dependency

npm uninstall rubbish ← this name of the package you want to remove

Now VUEjs can be develop as App by using NativeScript!

https://docs.nativescript.org/vuejs/nativescript-vuejs
https://nativescript-vue.org/en/docs/getting-started/quick-start/

Gosh! This is so cool, why? because I could read vue.js clearly.. now I can make apps using vue!

https://play.nativescript.org/?template=play-vue&id=jy01gX
https://www.youtube.com/watch?v=LDqsuLQqLrQ

Monday, 11 June 2018

Change divi sidebar from right to left

.et_right_sidebar #main-content .container::before{
left: 29% !important;
right: auto !important;
}

body #page-container #left-area{
float: right;
padding-left: 3%;
padding-right: 0;
}

body #page-container #sidebar{
padding-left: 0;
padding-right: 3%;
float: left;
}

Monday, 4 June 2018

Angular : Manually Routing

Step 1: Make sure you have at least 2 Components

Syarat sah untuk bina routing adalah

ada sekurang2nya 2 component
guna cli dibawah untuk generate component baru

ng generate component about

ng g c about

Step 2: Create an app.router.ts file

Kemudian dengan mengunakan editor ( VS e.g ) tepek code dibawah

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { AboutComponent } from './about/about.component';
import { ServicesComponent } from './services/services.component';

export const router: Routes = [
{ path: '', redirectTo: 'about', pathMatch: 'full' },
{ path: 'about', component: AboutComponent },
{ path: 'services', component: ServicesComponent }
];

export const routes: ModuleWithProviders = RouterModule.forRoot(router);

Tukarkan code2 ini dengan component anda

import { AppComponent } from './app.component';
import { AboutComponent } from './about/about.component';
import { ServicesComponent } from './services/services.component';

Ini pula proses selepas import iaitu tentukan kemana component tu hendak dibawa

export const router: Routes = [
{ path: '', redirectTo: 'about', pathMatch: 'full' },
{ path: 'about', component: AboutComponent },
{ path: 'services', component: ServicesComponent }

Step 3: Import the router to app.module.ts

Dah buat syarat tu, untuk membolehkan projek berjaya di build mesti dapat kebenaran dari module.ts

import { routes } from './app.router';

letak kat atas

imports: [
BrowserModule,
FormsModule,
HttpModule,
routes
],

Jangan lupa letak routes kat bahagian imports, kalau tak dia macam dah siap kerja tapi tak hantar kat lecturer.

Step 4: Add <router-outlet></router-outlet>

di app.component.html, letak:

<router-outlet></router-outlet>

Step 5: Add the routerLink directive

mula letak link kini bukan lagi a href di angular kita guna routerLink kalau dah routing

<ul class="nav navbar-nav">
<li>
<a routerLink="about">About</a>
</li>
<li>
<a routerLink="services">Services</a>
</li>
</ul>

Step 6: Ensure <base href="/"> is in index.html

Kat index jangan lupa letak <base href="/">

dia mewakili routerLink..

Angular 6 : Project with scss & routing

ng new projName --style=scss --routing

this CLI will automatic add routing and scss

Sunday, 27 May 2018

Vue : Add HTML on Javascript to Use On HTML

Add HTML on Javascript to Use On HTML by calling id : el this is call as v-html
this is very usefull to add cross border html component.

add to .js

new Vue({
el: '#app',
data: {
HTMLcontent: null,
},
created() {
this.HTMLcontent = `
<div>I'm section one</div>
<div>I'm section two</div>
`;
},
});

Remember we are using ` ( key above tab ) not ' by using this (`) key allow you to place raw html on javascript as shown above.

call on .html

<div id="app">
<span v-html="HTMLcontent"></span>
</div>

Phone Gap Link

https://build.phonegap.com/apps#

Saturday, 26 May 2018

Make Localhost website publish using IP

You might need this setup

wamp/xampp (easy to set on port 80)
open cmd on your windows type ipconfig
copy your ip address
inbound your port 80 on firewall
using ngrok.com free account (optional)

Saturday, 19 May 2018

Angular From scratch

npm install -g @angular/cli

ng new AddAppName

cd AddAppName
ng serve --open

Locate and open AddAppName using code editor such as Visual Studio and open src/app/app.component.ts

export class AppComponent {
title = 'My First Angular App!';
}

Between { } after title = 'My First Angular App!'; you can add new 'key' and 'value' example such as

export class AppComponent {
title = 'My First Angular App!';
credit = 'my name is muhaza';
}

ADD MATERIAL DESIGN COMPONENT

To start adding material design must install the material design npm first

npm install --save @angular/material @angular/cdk

Locate and open AddAppName using code editor such as Visual Studio and open src/app/app.module.ts

and now we can start adding component on design

https://material.angular.io/components

Friday, 18 May 2018

VUE JS

1. Install vue

npm install -g @vue/cli

2. Create Project

vue create vue-proj

3. This will provide you with the following prompt:

To keep things simple, we'll leave it at the default option and hit enter.

babel is a JavaScript compiler.
eslint is a JavaScript linter. Linting flags coding errors, bugs, etc..

Wednesday, 18 April 2018

Mobile Apps Ionic + Wordpress

http://scottbolinger.com/ionic-wordpress-app/

Tuesday, 17 April 2018

Programming Log

https://www.codecademy.com/en/tracks/php
https://www.codecademy.com/courses/learn-javascript-introduction/lessons/introduction-to-javascript/exercises/libraries?action=resume_content_item&course_redirect=introduction-to-javascript

Saturday, 7 April 2018

Learn Javascript

Javascript my log learning

Friday, 6 April 2018

NODE.JS Basic

Create a Node.js file named "myfirst.js" using notepad or IDE

var http = require('http'); //this is module
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/html'});

 res.end('Hello World!');  
 }).listen(8080);

This will show result at http://localhost:8080 by call the Node using CMD.exe or terminal
type on your cmd/terminal
node myfirst.js
and open http://localhost:8080

Ref > https://www.w3schools.com/nodejs/nodejs_get_started.asp

Next! Create module

Save module code below as myfirstmodule.js -

exports.myDateTime = function () {

return Date();
};

Now lets call the module by create other .js file by copy this code

var http = require('http');
var dt = require('./myfirstmodule'); // this is how to call the module above.

http.createServer(function (req, res) {

res.writeHead(200, {'Content-Type': 'text/html'

});

res.write("The date and time are currently: " + dt.myDateTime());

res.end();

}).listen(8080);

Sunday, 1 April 2018

PHP Wp : Only Declare Role can view content div

<?php
if (current_user_can('editor')){
?>

yang ni editor je boleh view, kalau bukan editor tak boleh

<?php
}
?>