Tutorial Web - Marketing - Inspirasi | Gunawan Gee
daftarrumah
Daftarrumah.com Situs Listing Properti Gratis yang paling cepat speed performancenya - Sebagaimana kita ketahui ada beberapa diindonesia yang memiliki layanan listing jual beli properti, namun hampir semua listing berbayar (bisa dibilang sudah susah cari yang gratis iklan properti), nah kali ini Gee mau berbagi informasi mengenai situs baru yang layanannya juga di bidang listing properti nah yang ini asli gratis,tapi kita ga ngomongin aplikasi situsnya tapi lebih dari sudut pandang teknik informatika.
Yang menarik dari situs daftarrumah.com, yang bikin tercengang adalah speednya yang cuepet banget untuk situs sejenisnya kalau di bandingkan daftarrumah.com menduduki peringkat satu untuk speednya. coba kita compare dengan beberapa listing properti lain. Data ini saya ambil dari gtmetrik dan google speed insight tanggal 18 Nopember 2016.
Alamat Situs GT Metrix Score Google Speed Score
daftarrumah.com 81 88
rumahdewi.com 67 84
rumah.com 75 79
urbanindo.com 45 57
rumah123.com 43 66
Situs daftarumah.com sepertinya menggunakan teknik meminify client server artinya situs ini manampilkan dan memadatkan code htmlnya yang membuat aktifitas loadnya menjadi cepat, menariknya situs yang lain berbayar dan dia tetap gratis, apakah nantinya akan berbayar, semoga yang gratis masih tetap bisa hehehe, semoga menjadi inspirasi

How to leverage browser caching for google analytics - Lagi lagi diperformace web, susah sekali ditemui tutorial untuk masalah ini, hampir kebanyakan tutorial mengarahkan untuk memasangnya di local server, masalah ini adalah ketika ada update dari google tentunya akan bermasalah yang menyebakan report analitycs jadi kurang valid.
Ada satu source yang di buat non official dari google namun selalu update dan filenya yang sangat kecil menjadi pilihan terbaik menurut gee untuk performance web, penerapan cukup kamu tambahkan kode dibawah ini pada bagian paling bawah atau sebelum tag </body>
how to leverage browser caching for google analytics

<script async='async' src='https://cdn.jsdelivr.net/ga-lite/latest/ga-lite.min.js'></script>
<script>var galite=galite||{};galite.UA="xx-xxxxxxx-x";</script>

ingat untuk kode xx-xxxxxxx-x diganti dengan kode analitycs kamu sendiri ya, dan kamu bisa test dengan menggunakan extensi/add on chrome kamu atau kamu bisa cek langsung ke analitycs di menu live. selamat mencoba, yang masih binggung feedback di bawah ya. sampai ketemu di postingan selanjutnya.

Template Super Cepat Gratis 100% Vertikal SEO Speed - ini dia yang ditunggu tunggu sobat gee dari beberapa hari kemarin mencari template gratis yang super cepat belum ketemu ketemu ada namun perlu banya perbaikan, akhirnya terpaksa diperbaiki dan jadi deh template super cepat dan standar dengan SEO. adapun fitur fiturnya sebagai berikut :
Template Super Cepat Gratis 100% Vertikal SEO Speed

  • Sudah di Optimasi Onpage SEO Struktur
  • Skor 99% untuk PageSpeed Google 
  • Skor 100% untuk GTmetrix.com
  • 100% Tested Schema Snippet
  • Tested Facebook Debugger
  • Tested Twitter Card Debug
  • Tested in Google Rich Snippet 
  • dan masih banyak yang lainnya

ini dia penampakannya :
Template Super Cepat Gratis 100% Vertikal SEO Speed

Skor Testing Pagespeed dan GTmetrix.com :

Template Super Cepat Gratis 100% Vertikal SEO Speed

Template Super Cepat Gratis 100% Vertikal SEO Speed


BERIKUT lINK DOWNLOADNYA:

Meletakan Gambar diatas Judul Secara Otomatis pada Blogspot - sobat gee yang setia hari ini untuk keperluan design pada template blogspot gee memerlukan gambar yang secara otomatis muncul di atas judul, tapi maunya secara otomatis, setelah berkelana dengan google, akhirnya nemu juga dan menurut juga lumayan mudah untuk diterapkan di blogspot, untuk penerapannya sangat mudah silahkan kamu tambahkan kode dibawah ini sebelum </body> ya :
Meletakan Gambar diatas Judul Secara Otomatis pada Blogspot

<script type="text/javascript">
//<![CDATA[
window.onload = function () { 
     var body = $('#Blog1').first();
     var container = $(body).parent();
     var image = $(body).find('img').first();
     var surround = $(image).parent();
     $(surround).prependTo(container);
 }
//]]>
</script>

Nah cuma segitu aja mudahkan, kalau sobat masih bingung silahkan tanya di kolom komentar ya mudah mudah bisa segera direspon. terima kasih sampai jumpa di postingan selanjutnya.

How to Execute Javascript When Page Has Fully Loaded - as we know we use $ (document) .ready () to execute the command jquery,  but sometimes the order was not able to walk properly due to several factors, perhaps as a result of external script we use indirectly we put it in the instead of javascript commands like js load functions on this page http://www.gee.web.id/2016/11/solusi-blogspot-untuk-speed-leverage.html. instead of javascript commands like js load functions on this page http://www.gee.web.id/2016/11/solusi-blogspot-untuk-speed-leverage.html.
How to Execute Javascript When Page Has Fully Loaded
to execute the command jquery then the page should be fully loaded, including images and others to the command used is the javascript DOM, for its application as follows:
<script>
window.onload = function () { 
  // your $(class).function here
}
</script>

so you can change the command to do anything in that column as an example of script code below
<script>
window.onload = function () { 
  alert("It's loaded!")
}
</script>

okay see you in the next post, if still confused, you can comment below, I will respond as soon as possible.

Versi Indonesia :
sebagaimana kita ketahui we use $(document).ready() untuk mengeksekusi perintah jquery, namun terkadang perintah itu tidak bisa berjalan dengan baik dikarenakan beberapa faktor, mungkin akibat script external kita gunakan tidak langsung kita taruh di melainkan dari perintah javascript seperti fungsi load js di halaman ini.

untuk mengeksekusi perintah jquery maka halaman harus sepenuhnya loaded termasuk gambar dan lain lain untuk itu perintah yang digunakan adalah javascript DOM, untuk penerapannya sebagai berikut :

<script>
window.onload = function () { 
  // your $(class).function here
}
</script>

nah kamu bisa ganti lakukan perintah apa saja di kolom tersebut contoh seperti kode script dibawah ini
<script>
window.onload = function () { 
  alert("It's loaded!")
}
</script>
oke sampai ketemu lagi di posting selanjutnya, jika masih bingung kamu bisa komentar dibawah, saya akan respon secepatnya.

Solusi Blogspot Untuk Speed Leverage browser caching - halo sobat gee, apa kabarnya nih, hari ini gee mau sharing tutorial mengatasi masalah speed untuk performance web, terkadang saat kita manambahkan resource atau sumber kode external seperti misal kita akan menambahkan jquery dari ajax.googleapis.com mengalami masalah pada performace web terutama speed atau kecepatan loading website, beberapa tutorial menyarankan untuk menambahkan syntax async pada sumber source contoh :
Solusi Blogspot Untuk Speed Leverage browser caching

<script async src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>

namun terkadang hal tersebut tidak menjadi solusi, masalah muncul lagi ketika kita mau menambahkan sumber untuk file css, katakan saja file css font-awesome dan ini bermasalah untuk speed, kali ini gee mau kasih solusi yang sudah dicoba dan berhasil mempengaruhi skor di https://developers.google.com/speed/pagespeed/insights/ dengan cara membuat fungsi untuk load sumber external saat user mengakses blogspot kita.

<script>
function loadjscssfile(filename, filetype){
        if (filetype=="js"){ //if filename is a external JavaScript file
            var fileref=document.createElement('script')
            fileref.setAttribute("type","text/javascript")
   fileref.setAttribute("async","async")
            fileref.setAttribute("src", filename)
        }
        else if (filetype=="css"){ //if filename is an external CSS file
            var fileref=document.createElement("link")
            fileref.setAttribute("rel", "stylesheet")
            fileref.setAttribute("type", "text/css")
            fileref.setAttribute("href", filename)
        }
        if (typeof fileref!="undefined")
            document.getElementsByTagName("head")[0].appendChild(fileref)
    }
loadjscssfile("https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js", "js");
</script>

keterangan dari syntax diatas adalah fungsi untuk meload data / kode external yang akan di tampilkan di kode sebelum
oh ya jangan lupa untuk menambahkan kode diatas sebelum kode ya. terima kasih, sampai jumpa di posting selanjutnya. kalau masih bingung komentar aja ya mudah mudahan bisa direspon secepatnya.

Cara Covert HTML Menjadi Image atau Gambar - Sebenarnya dah ngantuk banget cuma kepengen ada yang bisa gee bagikan buat pengunjung setia blog ini, lama sudah ga nulis pengen terus nulis biar selalu betambah ilmu (Mulai ngelantur).

Oke mas bro, kali ini saya mau memberika tutorial ga banyak sih cuma cara bagaimana merubah tag html menjadi gambar. untuk melakukan itu rasanya sulit kalau mau membangun code langsung untuk merender tag tag html menjadi gambar, makanya diperlukan sebuah library/plugin jquery yang bisa memudahkan kita untuk membuat aplikasi itu.

html ke gambar


Plugin HTML2CANVAS sudah banyak yang menggunakan dan terbukti banyak respon positif jadinya gee putuskan untuk menggunakan plugin ini.

masukan script librarynya terlebih dahulu, contoh :


<script type="text/javascript" scr="lokasi/file/html2canvas.js"></script>


Kemudian kamu coba script ini :

<script>
html2canvas(document.body, {
  onrendered: function(canvas) {
    document.body.appendChild(canvas);
  }
});
</script>


jika sudah coba kamu reload, jika berjalan dengan baik maka hasil dari semua website kamu akan tampil dibawah dalam bentuk gambar. untuk improvisasi kamu bisa ubah ubah elemen yang akan di convert, dalam contoh diata code : document.body adalah elemen yang akan di render menjadi gambar.

Kalau teman gee masih kesulitan bisa dengan memberikan komentar di bawah ini, dan mungkin bisa segera saya balas.


How to disable Pinch zoom in/out in iPhone - Loh kok judulnya bahasa inggris, ceritanya biar gampang ditemukan oleh google sama orang bule hehehe, dah berapa lama ga nulis ya lama banget offline dari blog ini gee buat dua versi aja deh.

Versi Indonesia 

berawal dari sebuah proyek pengembangan website yang menggunakan html2canvas jquery plugin, gee mengembangkan website yang berbentuk mini aplikasi yang mampu mengkonversi tag html menjadi gambar dan bisa di download dan dibagikan.

Ketika semua dianggap tidak ada masalah, iphone terlewatkan dan benar saja semua berantakan di iphone terutama saat proses render, gambar sebagian dan kadang semua tampak berwarna hitam saja.

Setelah saya teliti saya temukan masalahnya bahwa iphone untuk tag user-scalable=no pada meta sudah tidak berlaku lagi, sehingga untuk menonaktifkan pinch zoom in/out harus secara native menggunakan kode javascript.

daripada terlalu lama langsung saja kamu tambahkan kode seperti dibawah ini ya  untuk menonaktifkan pinch zoom in/out,jangan lupa untuk meletakan setelah library Jquery

how to disable pinch iphone


Versi Translate google

originated from a website development project that uses html2canvas jquery plugins, gee develop the website in the form of mini-applications that can convert html tag into the image and can be downloaded and shared.

When all is considered no problem, iphone missed and really just mess on the iPhone, especially when rendering process, drawing in part and sometimes all seemed black only.

After I researched I found the problem that the iphone to tag user-scalable = no meta is no longer valid, so as to disable the pinch zoom in / out to be natively using javascript code.

than too long you just add the code as shown below yes to disable pinch zoom in / out and do not forget to put after the library Jquery

< script >;
 document.documentElement.addEventListener('touchstart', function (event) {
    if (event.touches.length > 1) {
   event.preventDefault();
    }
  }, false);
  var lastTouchEnd = 0;
   document.documentElement.addEventListener('touchend', function (event) {
     var now = (new Date()).getTime();
     if (now - lastTouchEnd <= 300) {
    event.preventDefault();
     }
     lastTouchEnd = now;
   }, false);
</ script >