Nota 1: http://scottlinux.com/2011/08/03/how-to-create-ethernet-rj45-loopback-adapter/

Bismilahirahmanirahim

Kepada pengguna Libreoffice 4.0.0.3, anda akan dapati imej yang dibuka daripada fail docx menjadi seperti imej di atas.

Buat masa ini, langkah untuk menyelesaikan masalah ini adalah dengan save imej tersebut dan masukkan imej itu kembali dalam satu dokumen yang baru.

Kendatipun diasak peluru tidak bermata

 Janganlah undur walau selangkah

Semalam amber beli Converter HDMI ke VGA untuk diuji pada monitor biasa melalui port HDMI yang disediakan. Pada mulanya amber ingat, dia ni jenis automatik detect port HDMI memandangkan Raspi mempunyai dua opsyen untuk display iaitu port HDMI dan juga TV output. Hampir sejam jugok godek bendalah tu. Dan hampir mau let go ( lego ) ajer converter tersebut sebab ingat bendalah tu tak berfungsi dengan baik.

Setelah membaca manual Raspi dengan teliti, rupanya kena disablekan dahulu sdtv_mode=1 dan kena buka fungsi hdmi dalam config file.

Config file amber seperti dibawah, yang ini belum tune lagi ..
disable_overscan=1
#hdmi_force_hotplug=1
hdmi_safe=1
#disable_overscan=1
#sdtv_mode=1
#framebuffer_height=440
#framebuffer_width=550
#overscan_left=20
#overscan_right=20
#overscan_top=25
#overscan_bottom=25
arm_freq=900
core_freq=333
sdram_freq=450
over_voltage=2
kernel=kernel_berryboot.img

* untuk makluman pengguna Raspi, amber guna berryboot ..

Bismillahirahmanirahim, Lama betul tidak menulis di blog.

Aik kenapa tiba-tiba saja blog amber bercerita tentang produk Microsoft yang terbaharu di pasaran. Hehehe.. Ubah selera. Kebiasaanya, ikut tradisi amber seperti keluaran produk Microsoft yang lepas-lepas. Amber akan update OS terbaru setelah keluarnya patch atau service pack 1.

Walaubagaimanapun, perkembangan OS baru dari Ms ni, amber follow jugok. Sebab kawan-kawan akan bertanya hitu dan hini kepada amber.

Ok itu ajer buat masa nih..

Free Palestine

Letak Styesheet di atas

Seperti biasa, dalam amalan pembikinan laman web masa kini, stylesheet diletakkan di dalam header html.

 <header>

<link rel=stylesheet href=”smart/?stylesheets/foundation.css,app.css”/>

</header>

Letak Javascript di bawah

Garis panduan yang dikeluarkan oleh pihak Google dan Yahoo menetapkan supaya semua kod javascript di letakkan di bawah sebelum tag </body></html>. Teknik ini digunakan supaya tidak ada bottleneck semasa permintaan fail dari server.

<script src=”http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js”></script&gt;

<script src=”http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js”></script&gt;

<script src=”smart/?javascripts/foundation.min.js,app.js”></script>

</body>

</html>

Cuba perhatikan barisan nombor 7, javascript diletakkan di bawah sekali supaya elemen lain di dalam web dapat di muatkan terlebih dahulu ke dalam browser .

Minimize HTTP Requests

Mengurangkan permintaan http ke server merupakan cabaran besar bagi Web Dev kerana gambar dan ikon merupakan elemen penting pada masa sekarang. Contohnya, di dalam laman web kita terdapat banyak elemen seperti gambar1.jpg, gambar2.jpg, jquery.js, ikon.ico, modernizer.js, gambar4.js, gambar5.png, gambar6.png, flash.swf, video.flv dan sebagainya. Dalam projek amber yang terkini, amber berusaha untuk mengurangkan permintaan http ke server, bagaimana untuk mengurangkan permintaan http tadi ?

Untuk gambar, amber gunakan kaedah base64. Amber cari gambar bersaiz kecil dan amber tukar kepada base64 kod. Dengan menggunakan kaedah ini, tidak ada gambar.jpg atau png yang diminta pada server kerana kod gambar yang diletakkan di dalam HTML tadi telah dibawa bersama semasa proses pertama permintaan html file di jalankan.

<img alt=”" src=” data:image/png;base64,iVBORw0KGgoAA

AANSUhEUgAAAPoAAABMCAYAAABEf6pVAAAgAElEQVR4nO19B5wURfb/kRFESQIyszu …..

Terdapat juga kaedah lain yang boleh digunakan untuk mengurangkan permintaan HTTP ke server iaitu dengan menggunakan css image sprite . Biasanya teknik sebegini digunakan apabila terdapat banyak image kecil atau ikon digunakan di dalam laman web terutama pada muka depan laman web.

Rujuk:

1. http://www.w3schools.com/css/css_image_sprites.asp

2. http://coding.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/

Buat CSS dan Javascript di luar dari kod HTML

CSS dan Javascript boleh ditulis ke dalam kod HTML secara :-

• Inline
• Internel
• External

Dalam hal ini kita gunakan external CSS dan Javascript supaya kod HTML lebih kemas dan mudah untuk dibaca. Satu masalah wujud sekiranya kita gunakan External CSS dan Javascript adalah proses load atau permintaan ke server akan bertambah. Oleh yang demikian kita boleh gunakan teknik Combo Hendler atau Minify atau SmartOptimizer. Amber gunakan smartoptimizer ( Kredit kepada Encik Wady – Founder http://gimmebucks.asia/myinvoices/)

Kecilkan saiz JavaScript and CSS

Oleh kerana amber gunakan framework Foundation.zurb.com, ia mengandungi pelbagai elemen yang digunakan dalam pembinaan laman web yang boleh digunakan segara. Namun begitu, jika laman web yang kita bangunkan hanya menggunakan elemen-elemen tertentu sahaja di dalam framework tersebut, ia merugikan masa load file tersebut. Oleh yang demikian, sebelum memulakan pembinaan laman web, sila pastikan dahulu elemen-elemen yang bakal digunakan serta pilih elemen framework foundation yang ingin digunakan sahaja. Pilih Custome download.

Anda boleh gunakan http://refresh-sf.com/yui/ untuk compress kod Javascript dan CSS.

Configure Etags

Disable terus Etags dalam htaccess

Optimize Images

Dalam hal optimize Image, amber biasa gunakan GIMP save for web plugin untuk dapatkan saiz file yang bersesuaian.

http://hardyw3b.wordpress.com/2008/05/15/save-for-web/

Atau boleh juga gunakan report dari Gtmetrik.com. Di sana sistem gtmetrik ada menyediakan file-file cadangan image, css dan js yang telah dioptimizekan.

Guna Content Delivery Network

Cloudflare

Ada cadangan dari kawan-kawan supaya menggunakan perkhidmatan dari Cloudflare. Malangnya, Shared hosting amber tidak beri akses ssh untuk membolehkan amber install Cloudflare di dalam Cpanel mahupun menukar konfigurasi DNS. Namun begitu, amber tetap gunakan CDN javascript yang dibekalkan oleh pihak Cloudflare.

http://cdnjs.com

<script src=”http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js”></script&gt;

<script src=”http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js”></script&gt;

Kepada tukang jaga server khususnya, tuan/puan boleh guna perkhidmatan Cloudflare, boleh ubah DNS.

Gzip Components

Oleh kerana amber guna share hosting, tidak dapat touch apache configuration. Kena guna 100% cpanel, jadi amber cari bahagian Optimize Website dalam cpanel dan tick pada Compress the specified MIME Types.

Hasilnya

*Tukang jaga web server boleh intall mod_deflet atau mod_gzip. Melalui perbincangan antara tukang jaga web server, ada beberapa cadangan lain di samping teknik yang digunakan di atas antaranya:-

• cloudflare + eaccelerator +fastcgi + nginx [ Kredit kepada Hisyam Nasir ]
• apache + modruid2 + cloudflare + xcache [ Kredit kepada Kinozawa Hackintoch]

Mungkin tukang jaga web server boleh juga install mod_pagespeed.

Laporan pengujian Web Performance 2 ditulis oleh hardyweb pada 10/11/12

* Catatan ini merupakan nota untuk diri sendiri dan rakan-rakan yang ingin belajar tentang Web Dev.  Sila beritahu amber sekiranya ada kesilapan fakta dalam penulisan artikel di bawah.

Pageslide + Foundation.zurb.com 3.1.1

Amber sangat tertarik dengan teknik “ off canvas” yang digunakan oleh laman facebook dan google. Jika tuan/puan mempunyai telefon pintar seperti android atau iphone, sila buka laman facebook atau laman google.

Butang tiga jalur baris mewakili Menu, apabila klik pada jalur baris tersebut. Ia akan keluarkan side bar yang telah disorok. Seperti dalam gambar di bawah.

Setelah puas mencari solusi yang amber fikir bagus untuk amber belajar, walaupun pada ketika ini Foundation 3.1.1 ada menyediakan off canvas mereka sendiri. Jadi amber buat gabungan antara pageslide http://srobbin.github.com/jquery-pageslide/ dan Foundation. Boleh cuba hasilnya. Mungkin lepas ini, mahu cuba pada Bootstrap Twitter pula

http://dl.dropbox.com/u/62861063/foundation.7z

Image to CSS3 vs base64

Dalam proses mencari dan mempelajari tentang CSS3, terjumpa satu laman yang menerangkan kaedah convert image kepada CSS3. http://romainberger.com/lab/image-to-css3 . Ia menukar setiap pixel image kepada CSS . Jika tuan puan mahu menguji aplikasi ini, di nasihatkan supaya menggunakan pixel size 5×5 ke atas.

Dalam masa yang sama, semasa membedah siasat laman Google Mobile  http://pastebin.com/QzVSi7BR . Terjumpa base64 code dalam CSS.

background:url(“data:image/png;base64,iVBORw0KGgoAAAANSUhEU….

Dua atau tiga tahun yang lepas, memang ada terbaca tentang base64, teknik ini pada ketika itu masih kurang sesuai kerana terdapat browser yang tidak menyokong teknik ini.

Mana lagi bagus ?

Masalah apabila guna teknik CSS3 image, apabila menggunakan setting 1px by 1px,  kod css yang dihasilkan sangat besar melebihi saiz gambar tersebut. Ini sebenarnya tidak bagus dari segi loading dan server akan bekerja keras untuk menghantar fail ini kepada client / browser.

Manakala teknik base64 pula dilihat bersesuaian dengan trend terkini, namun file yang besar menghasilkan kod yang panjang serta saiz file akan bertambah besar. Sila baca artikel ini http://davidbcalhoun.com/2011/when-to-base64-encode-images-and-when-not-to sekiranya tuan/puan mahu menggunakan teknik base64.

p/s : Dengan menggunakan kod base64 atau css di atas, image tidak perlu di upload ke server seperti kaedah tradisi. Kod di embed terus ke dalam file html/php/css.

Full Image Backgroud – in framework

Seterusnya amber ulangkaji pula tentang CSS3 background, vendor prefixed dan grid yang bersesuaian. Tahun 2012, menyaksikan skrin komputer telah berkembang dan maju. Dari sekecil-kecil skrin hingga ke sebesar-besar skrin.  Dahulu, semasa skrin 1024×768 banyak digunakan, 960px grid merupakan satu pilihan, namun sekarang, webdev mesti mengambilkira trend pemakaian monitor terkini, 1140px grid bersesuaian dengan trend semasa.

The 1140 grid fits perfectly into a 1280 monitor.

Oleh kerana, amber tidak mampu untuk menggunakan skrin monitor yang terkini dan besar. Ada beberapa tool yang digunakan untuk membuat ujian pada laman web.

• http://lab.maltewassermann.com/viewport-resizer/
• ttp://dfcb.github.com/Responsivator

Vendor prefixed yang digunakan tidak cukup untuk membelai manja browser IE, kena masukkan sintax khas dan oleh kerana amber tidak ada IE, dan webshot.org pula tidak membenarkan file html dari dropbox untuk discan. amber guna http://netrenderer.com/

background: url(../images/warisan9x.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	-ms-background-size: cover;
	background-size: cover;
	 margin-top: 0px;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/warisan9x.jpg',sizingMethod='fixed');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/warisan9x.jpg', sizingMethod='fixed')";

http://dl.dropbox.com/u/62861063/site/back/index.html

Combo Hendler YUI3 & Pagespeed

Dua kaedah untuk mempercepatkan loading external css yang dibangunkan oleh dua buahSyarikat Gergasi Internet. Yahoo dan Goolge.

Combo YU3 yang digunakan oleh Yahoo merupakan teknik yang sangat baik kerana ia akan mengumpulkan semua file css dalam satu tag dan file js dalam satu tag. Bagi pengguna YUI, tuan/puan boleh gunakan kaedah ini

http://yuiblog.com/blog/2008/07/16/combohandler/

ada disediakan CDN

http://www.stevesouders.com/blog/2008/07/17/yuis-combo-handler-cdn-service/

Begitu juga dengan mod_pagespeed yang dikelola oleh pihak Google. Sekiranya kita mempunyai server sendiri atau VPS, teknologi mod_pagespeed ini boleh digunakan untuk melajukan lagi page load.

https://developers.google.com/speed/docs/mod_pagespeed/filter-css-combine

Cara lain ? https://developers.google.com/speed/docs/best-practices/rtt#CombineExternalCSS

Inspirasi

Laman Tema WordPress ini memberikan inspirasi kepada saya,

http://somerandomdude.com/work/frank/

 page load yang diuji boleh dilihat di

http://gtmetrix.com/reports/somerandomdude.com/NsUR84cR

Sekian, sila lah komen .

Rujukan

1. http://css-tricks.com/three-line-menu-navicon/

2. http://srobbin.github.com/jquery-pageslide/

3. http://davidbcalhoun.com/2011/when-to-base64-encode-images-and-when-not-to

4. http://somerandomdude.com/work/frank/

5. http://lab.maltewassermann.com/viewport-resizer/

6. http://dfcb.github.com/Responsivator

Unlock Android Pattern Lock

Bismillahirahmanirahim.

Semalam ada rakan FB datang bertandang ke tempat amber, beliau bawa satu android Mid Tablet ICS made in China. Katanya Pattern Lock . Tak boleh masuk Home. Nasib baik la, Mid Tablet tu dah di root. Jadi tak perlu pening kepala untuk proses rooting.

Oleh kerana operasi #unlock ini dijalankan di atas Sistem Pengoperasian Windows. Ada beberapa ekor makluk perlu di sedut dari Internet

1. WinUSBCoInstaller2.dll

2. android_winusb.inf

3. Adb.exe

Mula-mula amber guna teknik pertama , tapi tak berjaya.

Kaedah kedua

adb shell rm /data/system/gesture.key

]]> http://hardyw3b.wordpress.com/2012/10/14/unlock-android-pattern-lock/feed/ 4 hardyweb http://hardyw3b.wordpress.com/2012/10/12/hdat2-ganti-hdd-regenerator/ http://hardyw3b.wordpress.com/2012/10/12/hdat2-ganti-hdd-regenerator/#comments Fri, 12 Oct 2012 03:29:48 +0000 hardyweb https://hardyw3b.wordpress.com/?p=3437 Continue reading →]]> Bismillahirahmanirahm.

Suatu masa dahulu, amber pernah tulis pasal HDD Regenerator yang berfungsi untuk membetulkan hard disk yang rosak akibat bad sector. lihat di https://hardyw3b.wordpress.com/2007/01/08/hdd-regenerator/

Oleh kerana HDD regenerator tidak lagi dibekalkan dalam Hiren Boot CD versi terkini, ia digantikan dengan tool lain yang bernama HDat2.