Kripkorn Studios | Komuniti Drupal phpBB Malaysia

Logo Kripkorn Studios

Tips

Tips adalah satu ruangan terbaru yang diwujudkan untuk memberi peluang kepada pengguna menyumbang idea-idea ringkas dan penting. Berminat?

Tips Dikongsi: 30 | Tips dalam pantauan: 0

Kongsi Tips

Halang IE menukar ke mod "compatibility"
Lain-lain
parasolx

Kadang kala Internet Explorer (IE) secara tidak langsung menukarkan halaman yang dilihat ke bentuk "compatibility" tanpa diketahui oleh pengguna. Dengan memasukkan kod arahan seperti di bawah di bahagian <head> akan menghalang proses ini dilakukan secara automatis. 

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Typography dengan @font-face
CSS
parasolx

Penggunaan @font-face membolehkan penggunaan tulisan yang pelbagai jenis dimuat turun pada komputer pengguna yang tidak mempunyai tulisan tersebut secara internal. Antara jenis-jenis tulisan yang boleh digunakan berdasarkan format:

  • woff: WOFF (Web Open Font Format)
  • ttf: TrueType
  • ttf, otf: OpenType
  • eot: Embedded OpenType
  • svg, svgz: SVG Font

Manakala kod aturcara untuk memanggil dan memuat turun tulisan tersebut dalam CSS adalah seperti berikut: 

@font-face {
  font-family: 'MyFontFamily';
  src: url('myfont-webfont.eot');                     /* IE9 Compat Modes */
  src: url('myfont-webfont.eot?iefix') format('eot'), /* IE6-IE8 */
       url('myfont-webfont.woff') format('woff'),     /* Modern Browsers */
       url('myfont-webfont.ttf') format('truetype'),  /* Safari, Android, iOS */
       url('myfont-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
  font-weight: normal;
  font-style: normal;
}

Elakkan penggunaan atribut "display: none"
CSS
parasolx

Sekiranya kita mahu menyembunyikan satu-satu elemen: 

.hide {
  display: none;
}

Tetapi jangan AMALKAN penggunaan atribut ini kerana pengguna yang menggunakan "screen reader" tidak akan dapat melihatnya. Cara yang terbaik untuk menyembunyikan sesuatu elemen adalah meletakkannya di luar kawasan skrin pengguna. 

.hide {
   position: absolute !important;
   top: -9999px !important;
   left: -9999px !important;
}

Atribut !important digunakan kerana saya mahu ianya dilaksanakan dan dijalankan walau dalam keadaan apa sekalipun (mengabaikan kesan inherit daripada elemen lain).

Dengan CSS di atas, boleh digunakan bersama dengan JQuery seperti berikut: 

var $button = $('#myButton'),
    $text   = $('#myText'),
    visible = true;

$button.click(function() {
  if (visible) {
    $text.slideUp('fast',function() {
      $text.addClass('hide')
           .slideDown(0);
    });
  } else {
    $text.slideUp(0,function() {
      $text.removeClass('hide')
           .slideDown('fast');
    });
  }
  visible = !visible;
});​

Model kekotak dengan DIV
CSS
parasolx

Model kekotak DIV secara 3D meliputi atribut untuk kandungan, border, padding, background-image, background-color dan margin.

Kod editor untuk pembangunan laman web
Lain-lain
parasolx
Perisian editor yang hebat dapat membantu pembangun laman menghasilkan karya mereka dengan lebih cepat dan mudah. Kebanyakan pembangun lebih gemar memilih perisian editor yang ringkas tetapi tidak kurang ada yang gemar menggunakan editor yang didatangkan dengan kekuatan Integrated Development Environment (IDE).
  1. Aptana: Aptana Studio adalah perisian sumber terbuka yang hebat dan boleh dijalankan bersama atau tanpa Eclipse. [Linux, Mac, Windows]
  2. Geany: teks editor yang menggunakan alatan GTK2 dengan penerapan fungsi asas IDE. [Linux, Mac, Windows]
  3. Notepad++: perisian percuma untuk pemaparan sumber kod dan pengganti kepada Notepad sedia ada yang menyokong penulisan bahasa pengaturcaraan. [Windows]
  4. e TextEditor: perisian berbayar yang sangat sempurna dijalankan pada pelantar Windows. Memberikan fungsi untuk memanipulasi teks dengan cepat dan mudah serta mengambil alih penulisan secara manual kepada automatis. [Windows]
  5. EditPlus: teks editor, editor HTML dan perisian untuk Windows. [Windows]
  6. TextMate: pelengkap kepada Mac OS, teks editor yang begitu efisien dengan antara muka yang begitu menarik, berkuasa dan mudah untuk digunakan. [Mac]

Ikon percuma untuk kegunaan laman web
Lain-lain
parasolx

Beberapa laman web yang menyediakan ikon-ikon percuma (terhad) untuk dimuat turun dan digunakan pada laman web sebagai memudahkan pengguna memahami dan mengimbas setiap satu fungsi.

mad