Parasolx

Professional in Drupal web development, theme designing, consultation and training

Diari

setiap orang mempunyai kisah hidupnya tersendiri, seperti saya juga yang akan mencoret setiap peristiwa yang menarik dalam hidup ini di sini.

Fix error "No such interface supported" in Windows 8

30 Oct 2014 - 01:12 am

No such interface supported

Right click on Command Prompt and click  "Run as administrator"

Copy and paste the following command

FOR /R C:\ %G IN (*.dll) DO "%systemroot%\system32\regsvr32.exe" /s "%G

Take some time, you may want to go get yourself a nice cup of organic green tea… and please don’t close the command prompt. Wait until the process finished

processing via command prompt

Classic animation in Facebook with CSS3 make it look fantastic

20 Aug 2014 - 08:38 pm

Have you ever notice that Facebook has a temporary nice shimmer animation before the real status fully appear? Did you know that Facebook do not use flash or GIF image for this animation? What's going on actually they only use CSS3 to make it.

CSS3 render much more faster, even faster compare to download and play any animated GIF. This design will to put all the processing and rendering part to user browser instead consuming time for downloading the images.

The idea is really easy. But in this post I just show the CSS part only. The full concept are using both Javascript and CSS. The temporary shimmer box will load as default. After a background query done and trigger by JavaScript, it will replace the whole box with actual status content.

CSS box design with gradient

First of all, we design a box with gradient shading. I put this box shading inside another box with 12px padding. The CSS code would be written like these:

<style type="text/css">
.box {
    background: #fff;
    border-color: #e5e6e9 #dfe0e4 #d0d1d5;
    border-radius: 3px;
    border-style: solid;
    border-width: 1px;
    padding: 12px;
}
.box-inside  {
    background: -webkit-linear-gradient(left center , #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%) no-repeat scroll 0 0 / 800px 104px #f6f7f8;
    background: -moz-linear-gradient(left center , #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%) no-repeat scroll 0 0 / 800px 104px #f6f7f8;
    background: linear-gradient(left center , #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%) no-repeat scroll 0 0 / 800px 104px #f6f7f8;
    height: 104px;
    position: relative;
}
</style>

While below are the HTML code that will render the CSS code above. Take note for extra line which define for -webkit- and -moz- each of them specifically for Safari and Firefox browser compatibility.

<div class="box"><div class="box-inside"></div></div>

And the result would display like this:

 

Define CSS animation

Now we define the animation for .box-inside. We need a keyframe which define the path of animation to be guided. This keyframe action will make the gradient colour to move from current position at 0% to new the position at 100%.

If you look again at gradient position in first CSS definition, the background size were set at size of 800px x 104px which is overflow the .box-inside size. When keyframe took over, the gradient will flow from 0px to 468px from left to right to glide more nicer.

@-moz-keyframes placeHolderShimmer {
  0% {background-position:-468px 0}
  100% {background-position:468px 0}
}
@-webkit-keyframes placeHolderShimmer {
  0% {background-position:-468px 0}
  100% {background-position:468px 0}
}
@keyframes placeHolderShimmer {
  0% {background-position:-468px 0}
  100% {background-position:468px 0}
}

As usual, in CSS3 we need to specify additional attributes for Safari and Mozilla prefix. Lastly we create .animation class which include the keyframe name with additional attributes for animation to loop infinite.

.animation  {
  -webkit-animation: placeHolderShimmer 1s linear infinite forwards;
  -moz-animation: placeHolderShimmer 1s linear infinite forwards;
  animation: placeHolderShimmer 1s linear infinite forwards;
}

Blending all CSS with HTML

Next, we put additional class in .box-inside with .animation class to make it animate as you seen in Facebook site. We will get the result as below:

 

Masking with white overlay

Here is the complicated part. We must define at least 12 div items with unique attribute each of them. This to make a masking layer over the .box-inside with animation as the background.

Before that, we need to make sure that all div inside .box-inside applied default CSS attributes of positioning as absolute, start rendering from right and background of white via these definition:

.box-inside div {
  background: #fff;
  position: absolute;
  right: 0
}

For ease to recall, I will use class name using this pattern: mask01 until mask12. Let's try with first three div definition first.

.mask01 { height: 40px; width: 8px; right: auto; top: 0; left: 40px }
.mask02 { height: 8px; left: 48px; top: 0 }
.mask03 { height: 6px; left: 136px; top: 8px }

Later on, we put all this HTML code for rendering masking overlay layer with CSS class.

<div class="box">
  <div class="box-inside animation">
    <div class="mask01"></div>
    <div class="mask02"></div>
    <div class="mask03"></div>
  </div>
</div>

So, how it would be look like to be? Well you need to observe it by yourself.

 
 
 

Continue to define the rest of div tag until finish. Or you can just copy the code I already wrote:

.mask04 { height: 12px; left: 48px;  top: 14px }
.mask05 { height: 6px;  left: 100px; top: 26px }
.mask06 { height: 10px; left: 48px;  top: 32px }
.mask07 { height: 20px; left: 0;     top: 40px }
.mask08 { height: 6px;  left: 410px; top: 60px }
.mask09 { height: 13px; left: 0;     top: 66px }
.mask10 { height: 6px;  left: 440px; top: 79px }
.mask11 { height: 13px; left: 0;     top: 85px }
.mask12 { height: 6px;  left: 178px; top: 98px }

What actually overlay do?

Overlaying div tags inside .box-inside will end up with the shape of "draft layout" look-a-like before actual status content fully load and pull from database. I put a temporary borders to all masking div tag to be campare with actual display without borders.

 
 
 
 
 
 
 
 
 
 
 
 

If I pull out the border, the result will totally look exactly you see in Facebook. Classic animation without any gif animation, just CSS3.

 
 
 
 
 
 
 
 
 
 
 
 

Have fun!

Code review sessions: ATK

14 May 2014 - 12:47 pm

Hari ini, bersama dengan pegawai Teknologi Maklumat daripada Sarawak, berkongsi pengalaman berkenaan dengan satu sistem PHP Framework iaitu ATK. Secara ringkasnya sistem ini mudah, ringan dan bekerja terus dengan struktur pangkalan data.

Perkongsian pengalaman ini bagi mencari dan menerbitkan sebuah sistem yang boleh diguna pakai untuk kegunaan kerja seharian. ATK sangat mudah dan "simple". Walau bagaimanapun, saya melihat agak banyak had atau kengkangan yang diberikan oleh ATK. Mungkin asas pembinaan framework ini adalah untuk fokus kepada memaparkan data daripada pangkalan data serta sedikit pemprosesan data sebelum diserahkan sepenuhnya kepada paparan pengguna.

Tetapi sekiranya untuk "grabbing data" atau "mining data" semata-mata, ATK ini sangat sesuai memandangkan proses pembangunannya adalah sangat mudah berbanding menggunakan Drupal. Drupal lebih kepada complete set library data system yang digunakan fokus untuk web based application atau web based portal. Sungguh pun begitu, pembangunan dengan Drupal adalah jauh lebih lama berbanding ATK.

Saya nampak ATK ini sangat berguna untuk mengendali data-data dan tatacara kerja yang tidak kompleks, segera dan tidak memerlukan paparan yang menarik.

Kemas kini ke Android 4.4.2 Kit Kat

13 Jan 2014 - 12:37 pm

android 4.4.2

Semalam sudah berjaya mengemas kini Samsung S3 ke versi CyanogenMod terkini yang menggunakan pelantar Android 4.4.2 Kit kat.

Beralih ke Cyanogenmod untuk pengguna Android

30 Dec 2013 - 03:40 pm

Kepada pengguna dan penggemar tegar Android di luar sana, entri kali ini saya hendak berkongsi mengenai Cyanogenmod atau singkatannya CM. Kebanyakan pengguna Android rata-rata bakal mengalami masalah prestasi setelah ianya digunakan untuk sekian tempoh masa. Masalah ini bukan disebabkan oleh pelantar Android. Sebaliknya jenama telefon pintar yang digunakan.

cyanogenmod

Seperti semua sedia maklum, Android merupakan perisian sumber terbuka yang dikeluarkan oleh pihak Google. Banyak artikel yang ditulis di internet melibatkan perbandingan antara Android dan iOS (keluaran Apple). Walaupun pelbagai faktor yang digunakan, rata-rata mengagumi kehebatan iOS yang mampu untuk berfungsi secara stabil, pantas dan tidak membebankan. Komen daripada pengguna Android pula, kebanyakan mereka mengalami masalah prestasi semakin lama semakin perlahan walaupun mempunyai spesifikasi telefon pintar yang jauh lebih tinggi. Masalah tambahan adalah seperti penggunaan tenaga bateri yang tinggi.

Sebenarnya, pelantar Android yang digunakan pada telefon pintar seperti Samsung bukanlah Android sebenarnya (pure Android). Setiap syarikat yang menggunakan Android telah melakukan proses ubah suai dengan memasukkan program dan aplikasi sebagai tanda penjenamaan mereka. Akibatnya sistem Android telah dibebani dengan aplikasi yang tidak sepatutnya. Ianya semakin teruk apabila Android menerima penambahbaikan menerusi fungsi "Update software" daripada syarikat pengeluar.

Cyanogenmod adalah satu kumpulan pembangun perisian telefon pintar yang meningkatkan fungsi asal Android untuk fokus hanya kepada prestasi. Terdapat beberapa penambahbaikkan yang dihasilkan oleh kumpulan ini diambil dan diterima pakai oleh tim Google. Seterusnya idea tersebut dimuatkan dalam versi-versi Android yang terbaru. Oleh itu, bagi mendapatkan perisian Cyanogenmod ini dipasang pada telefon anda, ianya perlu melalui proses pembersihan sepenuhnya (format)

** Nota: pemasangan Cyanogenmod akan memadamkan ke semua data dan maklumat dalam telefon anda seperti aplikasi, SMS, gambar dan video. Data yang disimpan di dalam SD Card atau external drive tidak terusik. Jika telefon anda masih mempunyai tempoh waranti, pemasangan CM akan mengakibatkan waranti tersebut TERBATAL.

Pemasangan CyanogenMod

Keperluan:

  • Telefon bimbit yang dicaj penuh baterinya
  • Komputer/laptop (sebolehnya OS Win 7 dan ke bawah. Windows 8 mempunyai masalah hubungan antara telefon dan komputer)
  • Kabel USB original
  • Capaian internet untuk komputer (sebaiknya 1Mbps)

Pertama sekali, anda pergi ke laman web: http://www.cyanogenmod.org/

Seterusnya klik butang "Get Started".

Kemudian, ikut arahan yang diberikan pada halaman tersebut. Bermula dengan melakukan tetapan pada telefon bimbit terlebih dahulu. Diikuti dengan memuat turun aplikasi CyanogenMod pada telefon bimbit. Gunakan pautan yang diberikan kerana perisian ini tidak terdapat pada Google Play. Kita harus memuat turunnya secara terus.

cyanogenmod installer android

Setelah itu, memuat turun perisian CyanogenMod pada komputer anda. Paparan sedia untuk pemasangan akan ditunjukkan. Ikuti sahaja arahan yang ditunjukkan pada perisian tersebut sehingga selesai. Pastikan proses ini tidak terganggu pada mana-mana peringkat. Kegagalan yang berlaku boleh mengakibatkan kerosakan secara total pada telefon pintar anda.

Skrin seterusnya memerlukan telefon bimbit dihubungkan kepada komputer. Di sini mungkin akan berlaku masalah. Ralat telefon tidak dapat dikesan kemungkinan akan dipaparkan. Sila semak semula kabel yang digunakan haruslah kabel original. Pastikan pelantar operasi komputer bukanlah Windows 8. Saya telah mencubanya tetapi hasilnya gagal. Setelah menggunakan komputer lain dengan Windows 7 baru sambungan dapat dibuat dengan sempurna.

connect your device

CyanogenMod Installer akan mula memuat turun perisian sistem aplikasi yang baru berdasarkan kepada model telefon pintar anda. Versi yang akan dimuat turun adalah yang paling stabil. Tempoh muat turun ini bergantung kepada kelajuan internet yang digunakan.

download application system

Setelah selesai memuat turun, skrin butang "Install" akan dipaparkan. Klik butang tersebut.

cyanogen ready to install

Pada peringkat ini proses "flashing" atau penyalinan aplikasi sistem yang baru pada telefon pintar berjalan.

Anda perlu tunggu sehingga semua proses ini selesai. Telefon akan dimulakan secara automatik (reboot) bagi meneruskan proses pemasangan CyanogenMod. Di akhir proses ini, telefon pintar anda telah dikemas kini dengan pelantar sistem Android sebenar. Secara kasarnya, berikut merupakan anggaran masa yang diperuntukkan:

Proses Masa
Updating the installer 15 minit
Downloading the requirement data 60 minit
Installing into device 5 minit

 

Pages