Membandingkan Ukuran APK untuk Aplikasi di Flutter, React Native, Kotlin dan Java

Ada banyak cara untuk membuat aplikasi mobile mulai dari pengembangan spesifik platform langsung (menggunakan Java dan Kotlin untuk Android dan ObjC dan Swift untuk iOS), ada React Native dari Facebook, Electrode Native dari Walmart, Ionic framework, Unity untuk tipe-tipe aplikasi tertentu, dan framework flutter.io yang baru saja dirilis oleh Google

Pernah bertanya-tanya bagaimana library dan framework ini mempengaruhi ukuran aplikasi Anda? Mari kita menganalisis beberapa file apk untuk masing-masing aplikasi yang ditulis dalam beberapa cara ini. Aplikasinya sangat sederhana, hanya berisi judul dibagian atas dan teks di tengah layar. Kita akan menunjukan untuk aplikasi minimum apa yang perlu dikerjakan oleh framework ini bersama apk agar dapat dijalankan.

1_nS-7Ji11bTmO5HIkmoYA-g

  • Untuk percobaan kali ini kita akan membuat empat versi aplikasi yang berbeda, di masing-masing aplikasi diantaranya Java, Kotlin, React Native dan Flutter (Android API 27)
  • Apk tersebut kemudian di publikasikan untuk tipe rilis menggunakan Android studio untuk Java dan Kotlin dan menggunakan cli untuk React Native dan Native
  • Menggunakan konfigurasi default proguard
  • Apk dianalisis menggunakan fitur Analisis APK di Android Studio

Java (539 KB)

Mari kita mulai dari yang paling simple –Java. Seperti yang Anda harapkan, akan menjadi ukuran terkecil mengingat kita hanya menggunakan Java dan framework Android untuk membuat aplikasi ini, dengan satu-satunya dependency yakni Android Support Library, yang dapat Anda lihat disini membutuhkan cukup banyak ruang.

1_etBFAARt0K4yBa7d-nL0iQ

Kita dapat berpotensi menurunkan ukuran aplikasi dengan menghapus dependency ini saja dan menggunakan Activity dari pada AppCompatActivity

Kotlin (550 KB)

Selanjutnya Kotlin. Jika Anda sudah lama ngoding di Java, Kotlin menjadi angin segar. Apk rilis untuk aplikasi Kotlin membandingkan sesuatu yang kita lihat di apk Java, ditambah sebagian kecil dari info sugar sintaks berdasarkan Kotlin

1_9Qo6ULUNQJtiHOHme_sFMg

React Native (7 MB)

Jika Anda datang dari dunia web dan ingin menjadi mobile developer menggunakan javascript React Native bisa menjadi salah satu pilihan. React Native juha membantu jika Anda ingin mengintergrasi lebih cepat pada fitur tanpa merilis aplikasi untuk setiap perubahan kecil.

Rilis apk yang dihasilkan oleh React Native memiliki beberapa kelas dalam file classes.dex yang memiliki 12193 metode referensi untuk aplikasi tertentu ini.

1_VkAuQM-fi3Fe7yKBiwKC6w

React Native juga menambahkan beberapa dependensi asli di direktoru lib untuk X86 dan armeabi-v7a. Menambah hingga sekitar 6,4 MB dependensi secara total.

1_IiScBxnU_MhURFzFYnDsug

Flutter.io (7.5 MB)

Aplikasi rilis yang dihasilkan oleh Flutter cli berisi mesin C/C++ dan Dart VM yang membuat hampir semua apk. Aplikasi ini berjalan langsung menggunakan set intruksi native dan tidak ada interpreter yang terlibat.

1_JqPvjrCDx4ShWNR10aP1UA

Setiap metode penulisan aplikasi memiliki kelebihan dan kekurangannya. Pilih metode yang paling sesuai untuk digunakan baik untuk kasus kebutuhan Anda sendiri ataupun unutk perusahaan Anda. Anda juga bisa mengkombinasi dan mencocokan beberapa framework untuk membuat bagian yang berbeda dari aplikasi Anda.

Contohnya, jika Anda ingin bereksperimen membuat suatu komponen di React Native, jika Anda ingin membagi kode antara aplikasi iOS dan Android, lihat React Native atau Flutter,io dan jika Anda hanya ingin berfokus pada Android dan menjaga agar ukuran aplikasi lebih minimum sangat penting Anda bisa menggunakan Java atau Kotlin

Shortcut Keyboard di Visual Studio untuk Mac

Di artikel kali ini kita akan membahas tentang shortcut keyboard Mac di visual studio. Dalam Visual Studio untuk preferensi Mac, dibagian bawah Key Binding, Anda dapat memilih skema binding key. Anda dapat memilih skema dari list berikut :

1

Mencari Referensi

Suatu waktu Anda akan butuh pencarian referensi dari spesifikasi sebuah objek. Dalam kasus ini cukup tekan

Cmd + Shift + R atau Shift + F12

Dan hal yang akan terjadi adalah :

2

Menuju pendeklarasian

Kapanpun Anda menginginkan pendeklarasian objek/type tekan

Cmd + klik mouse atau F12 atau Cmd + D

4

Beralih breakpoint

Ketika memiliki kursor dalam satu baris cukup tekan

Cmd + \ atau F9

Jadi breakpoint akan muncul

5

Enable/Disable breakpoint

Dalam kasus Anda ingin enable/disable breakpoint cukup tekan

Cmd + Alt + / atau Cmd + F9

6

Step into

Ketika breakpoint mengenai dan Anda ingin definisi step into, cukup tekan

Shift + Cmd + I

Step over

Mungkin Anda ingin lanjut ke baris kode selanjutnya? Tak masalah

Shift + Cmd + O / F10

Step out

Apakah Anda ingin ke keluar dari step function? No Problem

Shift + Cmd + U

Continue debugging

Atau mungkin Anda hanya ingin melanjutkan program tanpa debug lebih lanjut?

Cmd + enter

Jadi, bayangkan saja kode Anda salah format. Selama kode C# bukan masalah besar, file XAML yang salah format bisa sangat menyakitkan

Format dokumen

Jadi kapanpun Anda ingin memformat kode Anda cukup tekan

Ctrl + I

7

Indent/Unindent section

Anda ingin indent/unindent section? Mudah kok

Cmd + ]

8

Unindent section

Cmd + [

9

Rename

Setiap kali Anda ingin mengganti nama field/variable/property/apapun dan melakukannya hanya sekali sehingga akan memperbarui otomatis. Cukup tekan :

Ctrl + R

10

Toggle line comment

Ketika Anda ingin memformat satu baris kode atau seluruh blok kode maka cukup select kode nya dan tekan

Cmd + /

11

12

Toggle fold

Yang satu ini cukup rumit tapi berfungsi dengan baik. Adna masih dapat mengedit shortcut ini

Cmd + Shift + Alt + -> (left arrow/panah kiri)

13

Mengubah file

Saat menavigasi dengan cepat diantara yang dibuka, cukup tekan

Ctrl + tab

Dan menavigasi daftar dengan tombol Tab. Jika Anda ingin membataklan pemilihan tekan ESC

14

Menutup semua file

Berapa kali Anda memiliki situasi ketika banyak file yang terbuka? Dalam hal ini, ketika Anda ingin untuk menutup semuanya cukup tekan

Cmd + Shift + W

15

Menutup file

Disisi lain ketika Anda ingin menutup hanya satu file

Cmd + W

16

Menambahkan file projek

Ketika kita manambah projek melalui menu konteks, dan memilih “Add file” cukup memakan waktu. Jika Anda ingin menambahkan file ke projek, pilih folder yang Anda inginkan untuk menambahkan filenya.

Alt + Cmd + A

17

Membuat projek

Unutk membuat projek cukup dengan shorcut

Cmd + K / Shift + F6

Build All

Mirip dengan yang diatas namun disini adalah solusi build seluruhnya

Cmd + B / F6

Clean

Clean projek

Cmd + Shift + K

Start debugging

Hanya untuk memulai projek dengan cepat

Cmd + Enter / F5

Quick Fix

Ketika mengalami kesalahan atau peringatan cukup klik saja dan tekan

Alt + Enter

18

Pencarian

Hanya opsi pencarian standar dalam dokumen

Cmd + F

20

Pencarian selanjutnya

Ketika mempunyai bar pencarian terbuka

Cmd + G / F3

Menampilkan intellisense

Ketika ingin menunjukan instellisense

Ctrl + Space

21

Go to line

siapa yang tahu baris mana yang akan kita tuju? 🙂

Cmd + L

22

Mengganti file

Cara lain untuk mengubah nama dalam file tetapi menurut saya lebih berbahaya daripada Ctrl + R

Cmd + Alt + F

Rectangle selection

Tool yang cukup bagus, tetapi memiliki keterbatasan. Senang menggunakannya dengan pengubahan

tahan Alt + seleksi dengan mouse

23

pindah baris kode

terkadang Anda hanya ingin memindahkan baris kode 2 baris keatas/bawah. Anda mungkin bisa memotong seluruh baris, pergi ke tempat yang dipilih dan paste. Anda dapat melakukannya dengan lebih cepat.

Tahan Alt + arahkan panah atas/bawah

24

Pergi ke awal/akhir baris

ini merupakan shortcut mac yang bagus untuk menavigasi melalui teks. Bekerja di Mac, tidak hanya di VS untuk Mac

Cmd + panah kiri (left arrow) / panah kanan(right arrow)

Pergi ke awal/akhir dokumen

Mirip dengan yang diatas tetapi menavigasi secara vertikal

Cmd + panah bawah (arrow down)

Dua kolom editor

suatu hal untuk orang-orang yang memiliki layar lebar dan suka memiliki kode yang sebanyak mungkin tampil di layarnya

Cmd + Alt + 2

Satu kolom editor

Dan ini untuk mengembalikan ke halaman standar

Cmd + Alt + 1

25

Zoom in/zoom out

Dalam hal ini Anda memiliki prelection / Anda inign menunjukan kode Anda pada layar Anda yang mungkin ingin menyesuaikan ukuran font dengan menekan

Cmd + “+” atau “-”

10 Tips Git Useful

Selama beberapa tahun terakhir, git telah berkembang pesat menjadi salah satu sistem kontrol versi yang paling banyak digunakan. Git digunakan oleh developer coding, tim dan semuanya mulai dari proyek open source kecil hingga codebases besar seperti kernel linux dalam berbagai bahasa

Pada artikel ini kita akan berbagi tip yang dapat meningkatkan pengalaman dan alur kerja git Anda.

Git log –no-merges

Perintah git ini menunjukan keseluruhan history commit tapi skip commit yang menggabungkan dua branches bersama atau menyelesaikan konflik gabungan. Perintah ini memungkinkan Anda untuk cepat melihat semua perubahan yang dilakukan pada proyek, tanpa harus mengacaukan gabungan comit history git

$git log --no-merges

commit e75fe8bf2c5c46dbd9e1bc20d2f8b2ede81f2d93
Author:  John
Date:   Mon Jul 10 18:04:50 2017 +0300

    Add new branch.

commit 080dfd342ab0dbdf69858e3b01e18584d4eade34
Author:  John
Date:   Mon Jul 11 15:40:56 2017 +0300

    Added index.php.

commit 2965803c0deeac1f2427ec2f5394493ed4211655
Author:  John
Date:   Mon Jul 13 12:14:50 2017 +0300

    Added css files.

git revert –no-commit [commit]

git kembali menghasilkan komit baru yang membatalkan perubahan yang dilakukan oleh komit yang ada dan menghasilkan komit baru dengan konten yang dihasilkan. Jika Anda ingin mengembalikan komit yang telah disebutkan dan menghindari komit otomatis, Anda dapat menggunakan tanda flag –no-commit atau shorthand -n.

git diff –w

git diff menunjukan antara dua komit, dua work tree atau dua file pada disk. Karena banyak ornag mengerjakan proyek yang sama, seringkali ada perubahan karena tab editor teks dan pengaturan ruang. Untuk mengabaikan perbedaan yang disebabkan oleh whitespace(spasi putih) saat membandingkan garis, Anda dapat menggunakannya dengan -w flag.

git diff –stat

menunjukan bagaimana setiap file telah berubah dari waktu ke waktu. Anda dapat menambahkan 3 parameter: width untuk menimpa lebar output default, name-width untuk mengatur lebar nama file dan count membatasi output ke jumlah baris pertama.

$ git diff --stat
 index.php | 83 +++++++++++++++++++++++++++++---------------------------
 1 file changed, 43 insertions(+), 40 deletions(-)
$ git diff --stat-width=10
 index.php | 83 +++---
 1 file changed, 43 insertions(+), 40 deletions(-)

git reset –soft HEAD^

reset head ke komit tertentu tanpa menyentuh file indeks dan work tree. Semua perubahan yang dilalukan setelah komit ini dipindahkan ke tahap “staged for commit”. Setelah itu Anda perlu menjalankan git komit untuk menambahkannya kembali.

git stash branch [branch-name] [stash]

perintah ini membuat branch baru bernama branch-name dan check it out, kemudian menerapkan perubahan dari simpanan yang diberikan padanya dan menghapus simpanan. Jika tidak ada simpanan yang diberikan yang terbaru. Hal ini memungkinkan Anda untuk menerapkan perubahan tersimpa ke lingkungan yang lebih aman, yang nantinya dapat digabungkan menjadi master.

git branch –a

perintah tersebut menunjukan daftar semua branch jarak jauh dan branch lokal. Anda dapat menggunakan flag untuk melihat hanya branch yang sepenuhnya digabungkan ke branch induk. Dengan cara ini Anda bisa melacak branch Anda dan mencari tahu mana yang tidak digunakan lagi dan bisa dihapus.

$ git branch -a

  dev
* master
  remotes/origin/HEAD -> origin/master
  remotes/origin/dev

git commit –amend

dengan git commit –amend Anda bisa mengubah komit sebelumnya, daripada membuat yang baru. Jika Anda belum mendorong perubahan terbaru dan bahkan mengubah pesan komit Anda.

git pull –rebase

git pull –rebase memaksa git untuk terlebih dahulu menarik perubahan dan kemudian rebase yang tidak ditipu melakukan diatas versi terbaru dari remote branch. Pilihan –rebase dapat digunakan untuk memastikan history linier dengan mencegah penggabungan yang tidak perlu dilakukan.

git add –p

bila Anda menggunakan perintah ini, alih-alih segera menambahkan semua yang berubah ke indeks, ia melewati setiap perubahan dan menanyakan apa yang ingin Anda lakukan dengannya. Dengan cara ini, memungkinkan Anda untuk secara interaktif memilih apa yang ingin Anda lakukan.

diff --git a/package.json b/package.json
index db78332..a814f7e 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,6 @@
   },
   "devDependencies": {
     "bootstrap-sass": "^3.3.7",
-    "gulp": "^3.9.1",
     "jquery": "^3.1.0",
     "laravel-elixir": "^6.0.0-11",
     "laravel-elixir-vue-2": "^0.2.0",
Stage this hunk [y,n,q,a,d,/,e,?]? 

5 Plugins notifikasi jQuery untuk website

Notifikasi pada layar memiliki banyak kegunaan. Selain untuk dapat pembaruan, pesan eror ataupun info kepada user saat mengakses website tersebut.

Notifikasi dimulai  pada desktop, tapi sejak itu mulai di implementasikan beberapa plugin hebat. Untuk itu , berikut 5 jQuery notifikasi gratis pilihan saya.

Masing-masing memiliki desain dan fitur yang unik dan sekali lagi, yang saya rekomendasikan ini bersifat open source alias gratis.

 

 

  1. Noty

1

Plugin noty menggunakan sekumpulan animasi kustom dan desain pesan notifikasi yang bagus. Anda dapat memodifikasi penuh atas gaya animasi dan pilihan warna.

 

Setiap notifikasi pada noty terlihat  dari sudut layar dan hanya terlihat seperti kotak kecil. Ini tidak akan menghalangi tampilan utama website.

 

Yang terbaik dari noty yakni bersifat responsive dan di rancang agar sesuai dengan layar. Bisa digunakan untuk eror notifikasi, peringatan, dan apapun.

 

Link github untuk melihat dokumentasi Noty

 

 

 

  1. Notify.js

2

Mencari notifikasi yang lebih kecil lagi ? coba simak Notify.js yang juga running di jQuery.

 

Yang dirancang bertema kesederhanaan sehingga tampilan default nya terasa biasa saja. Namun tidak perlu khawatir, anda dapat memodifikasi nya sesuai dengan kebutuhan dan pluginnya  dilengkapi dengan banyak pilihan khusus.

 

Animation styles, positioning, box size semua nya bisa diubah atau di modifikasi sedikit dengan JavaScript. Notify.js adalah plugin yang minimalis jadi butuh lebih banyak pekerjaan jika ingin memodifikasi sesuai dengan keinginan.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  1. Overhang.js

3

Berikut adalah plugin unik yang memungkinkan Anda menjalankan pemberitahuan dropdown di seluruh bagian atas layar. Overhang.js berkerja seperti sistem pemberitahuan  dropdown, mungkin sesuatu yang Anda temukan di aplikasi seluler tapi jarang di web.

 

Saya pikir ini akan sangat berguna sebagai alat pemasaran untuk mempromosikan penawaran baru, penjualan, artikel, apa pun. Efek dropdownnya halus tapi tetap menarik perhatian.

 

Anda dapat menentukan pesan untuk dijalankan pada timer, atau untuk mematikan halaman, atau berjalan pada callback pengguna kustom. Banyak pilihan untuk mengedit plugin ini menjadi pilihan unik bagi para desainer web.

 

Dan tentu saja, plugin ini bekerja di ponsel juga jadi sangat responsif ramah.

 

 

 

 

 

 

 

  1. SweetAlert2

 4

Plugin ini agak berbeda dari plugin notifikasi sebelumnya. Karena posisi nya sekarang bukan lagi berada di sudut dan hanya kotak kecil. SweetAlert 2 menampilkan notifikasi seperti modal yang muncul di tengah tampilan layar.

 

Namun, desainnya jauh lebih sederhana dari yang harapkan dan sangat mudah dipasang. Link sweet alert 2 Sweet Alert 2

 

 

 

 

 

 

 

 

 

 

 

  1. Alertify.js

5

Berikut salah satu plugin yang saya anggap berfungsi dengan baik sebagai fungsi plugin notifikasi.

 

Alertify.js running di jQuery dan tidak menghabiskan banyak space. Anda dapat melakukan  ini untuk script  modal untuk form login / signup, atau untuk menyematkan pesan notifikasi  ke pengunjung website.

 

 

 

Dan itu lah beberapa plugins untuk notifikasi yang saya sarankan, itu merupakan sebagian kecil dari banyaknya pilihan.

Sass Introduction : Untuk Pemula

gSass singkatan dari Syntactically Awesome Stylesheets. Sass pada dasarnya hanya sebuah ekstensi untul CSS yang membantu kita menulis style lebih fleksibel.

Ini membantu kita membuat stylesheet yang lebih besar dan mempermudah stylesheet yang sulit dipahami. Berkat fitur seperti Mixin, Nesting, Inheritance, menjadikan kode lebih terorganisir, memungkinkan kita untuk bekerja lebih cepat.

Harus diperhatikan ketika kita menulis di Sass , browser tidak akan mengerti kode kita, karena yang kita tulis itu bukan CSS, jadi kita harus menggunakan kompiler untuk mengkompilasi atau menterjemahkan kode Sass kedalam CSS

 

Berikut beberapa contoh aplikasi yang dapat membantu melakukan hal ini :

  • Hammer
  • CodeKit
  • Compass
  • Koala

 

Saya tidak akan menutupi seluruh proses dari instalasi dan kompilasi Sass di bagian ini. Jika kalian ingin bereksperimen dan ikutin saya melalui tutorial ini, saya sarankan menggunakan  editor online seperti codepad ataupun lainnya, tanpa menginstal pada pc anda.

Sebelum kita lanjut, saya ingin memastikan anda tidak akan bingung dengan 2 syntax dari Sass. Ini hanya dua cara yang berbeda dalam menuliksak kode; keduanya memiliki output yang sama. Disini saya akan memberikan contoh dengan menggunakan syntax .scss dalam artikel ini.

 

Variables

Variable adalah yang paling kuat karena dapat memungkinkan anda untuk mengubah kode dengan cepat. Ketika mendefinisikan variable kita menyimpan nilai tertentu di dalamnya, nilai yang diterima dapat berupa angka, string, warna, null, list dan peta.

Untuk mendeklarasikan variable di Sass, dengan ada nya $ diikuti dengan nama variable tersebut. Dalam kasus ini blue sebagai nama variable.

$blue: #3498db;

Let’s see variables in action:

/*

// We define the variables.

*/

$blue: #3498db;

$red: #e74c3c;

$background: #34495e;



/*

// We apply the variables.

*/

body {

background-color: $background;

}



h1 {

color: $blue;

}



p {

color: $red;

}

Which compiles to this:

body {

background-color: #34495e;

}



h1 {

color: #3498db;

}



p {

color: #e74c3c;

}

Ini hanya pengenalan dasar untuk menuliskan variable. Kalian dapat berimprovisasi sendiri tapi tidak melanggar / menyimpang dari aturan aturan penulisan variable.

 

Nesting

Sass memungkinkan kita untuk menggunakan aturan CSS untuk disarangkan / dihubungkan  dalam satu sama lain. Nesting adalah cara yang tepat untuk mengatur struktur CSS anda, dan membuat anda tidak perlu melakukan perulangan. Berikut contoh nya

ul {
  list-style: none;

  li {
    padding: 10px;
    display: inline-block;

    a {
      text-decoration: none;
      font-size: 16px;
      color: #333;
    }
  }
}

Saya sarankan, jangan menggunakan nesting lebih dari empat tingkatan, karena akan membuat kode berantakan dan kesulitan saat ada masalah.

 

Extend/Inheritance

Inheritance adalah salah satu fitur yang paling berguna dalam Sass dan menggunakan perpanjangan. Mari kita sharing set dari properti CSS dari satu ke yang lain.

Extending harus digunakan ketika kita membutuhkan element-element dengan style yang mirip, yang masih berbeda dalam beberapa detail. Berikut contohnya

$blue: #3498db;
$red: #e74c3c;
$white: #fff;

.btn {
  display: inline-block;
  padding: 6px 12px;
  font-size: 14px;
  text-align: center;
  border-radius: 4px;
  color: $white;
}

.btn-primary {
  @extend .btn;
  background-color: $blue;
}

.btn-secondary {
  @extend .btn;
  background-color: $red;
}
Which compiles to this:

.btn, .btn-primary, .btn-secondary {
  display: inline-block;
  padding: 6px 12px;
  font-size: 14px;
  text-align: center;
  border-radius: 4px;
  color: #fff;
}

.btn-primary {
  background-color: #3498db;
}

.btn-secondary {
  background-color: #e74c3c;
}

Apakah kalian melihat bagaimana penting nya fitur ini ? Sass  menggabungkan selector bukan mengulangi deklarasi yang sama. Ini sangat membantu dalam menghemat memory

 

Mixins

Mixin juga termasuk fitur yang penting di Sass. Mixin dapat memungkinkan untuk membuat grup deklarasi CSS yang ingin kita gunakan kembali untuk website kita. Kita bisa menerapkan sebagai argumen, ini membuat menjadi lebih fleksibel.

Sass menggunakan instruksi @mixin untuk mendefinisikan mixin, dan @include untuk menggunakannya . Coba simak contoh border-radius sebagai berikut

/*
// We declare the mixin.
*/
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

/*
// We apply it on our button.
*/
.btn {
  @include border-radius(4px);
}
Which compiles to this:

.btn {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
}

 

Membuat Slider Full-Screen Menggunakan HTML, CSS3 dan jQuery

Dalam tutorial ini, kita akan membuat slider full-screen menggunakan HTML, CSS dan jQuery. Anda dapat digunakan untuk mempresentasikan produk di situs website Anda.

Dalam tutorial ini, kita menggunakan Google Font, khususnya  Montserrat dan Oswald. Pastikan untuk menyertakannya sebelum memulainya.

HTML

Langkah pertamanya membuat struktur HTML. Berikut ini hal-hal yang kita butuhkan :

  • Menu navigasi
  • Sebuah tag div wrapper untuk slider dengan nama class css-slider-wrapper
  • Empat slide : masing-masing memiliki unsur-unsur seperti buttons/images/text
  • Slider pagination

Berikut adalah kode markup

<!-- Navigation -->
<div class="navigation">
  <div class="navigation-left">
    <a href="#">Shoes</a>
    <a href="#">Clothes</a>
    <a href="#">Accessories</a>
  </div>
  <div class="navigation-center">
    <img src="images/logo.png" alt="">
  </div>
  <div class="navigation-right">
    <a href="#"><img src="images/shopping-bag.png" alt=""></a>
    <button class="login-btn" href="#">Login</button>
  </div>
</div>
 
<!-- Slider Wrapper -->
<div class="css-slider-wrapper">
  <input type="radio" name="slider" class="slide-radio1" checked id="slider_1">
  <input type="radio" name="slider" class="slide-radio2" id="slider_2">
  <input type="radio" name="slider" class="slide-radio3" id="slider_3">
  <input type="radio" name="slider" class="slide-radio4" id="slider_4">
 
  <!-- Slider Pagination -->
  <div class="slider-pagination">
    <label for="slider_1" class="page1"></label>
    <label for="slider_2" class="page2"></label>
    <label for="slider_3" class="page3"></label>
    <label for="slider_4" class="page4"></label>
  </div>
 
  <!-- Slider #1 -->
  <div class="slider slide-1">
    <img src="images/model-1.png" alt="">
    <div class="slider-content">
      <h4>New Product</h4>
      <h2>Denim Longline T-Shirt Dress With Split</h2>
      <button type="button" class="buy-now-btn" name="button">$130</button>
    </div>
    <div class="number-pagination">
      <span>1</span>
    </div>
  </div>
 
  <!-- Slider #2 -->
  <div class="slider slide-2">
    <img src="images/model-2.png" alt="">
    <div class="slider-content">
      <h4>New Product</h4>
      <h2>Denim Longline T-Shirt Dress With Split</h2>
      <button type="button" class="buy-now-btn" name="button">$130</button>
    </div>
    <div class="number-pagination">
      <span>2</span>
    </div>
  </div>
 
  <!-- Slider #3 -->
  <div class="slider slide-3">
    <img src="images/model-3.png" alt="">
    <div class="slider-content">
      <h4>New Product</h4>
      <h2>Denim Longline T-Shirt Dress With Split</h2>
      <button type="button" class="buy-now-btn" name="button">$130</button>
    </div>
    <div class="number-pagination">
      <span>3</span>
    </div>
  </div>
 
  <!-- Slider #4 -->
  <div class="slider slide-4">
    <img src="images/model-4.png" alt="">
    <div class="slider-content">
      <h4>New Product</h4>
      <h2>Denim Longline T-Shirt Dress With Split</h2>
      <button type="button" class="buy-now-btn" name="button">$130</button>
    </div>
    <div class="number-pagination">
      <span>4</span>
    </div>
  </div>
</div>

Keren kan? Mari kita membuat css nya sekarang

CSS

Pertama, mari kita tambahkan styling dasar untuk body nya

* {
  box-sizing: border-box;
}
 
body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
}

Sekarang, mari kita style menu navigation; kita akan membuatnya lebar full dengan beberapa padding. Kita akan menggunakan flexbox untuk menyelaraskan unsur-unsur didalamnya yang kita juga akan membuat stylenya

/* Navigation */
.navigation {
  position: absolute;
  width: 100%;
  height: 100px;
  padding: 0 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1;
}
 
.navigation-left {
  margin-left: -33px;
}
 
.navigation-left a {
  text-decoration: none;
  text-transform: uppercase;
  color: #333745;
  font-size: 12px;
  font-weight: bold;
  width: 107px;
  height: 30px;
  border: 2px solid transparent;
  border-radius: 15px;
  display: inline-block;
  text-align: center;
  line-height: 25px;
  transition: all .2s;
}
 
.navigation-left a:hover,
.navigation-left a:focus {
  border-color: rgb(234, 46, 73);
  background-color: rgba(44, 45, 47, 0);
}
 
.navigation-center {
  margin-right: 85px;
}
 
.navigation-right {
  display: flex;
  align-items: center;
}
 
.login-btn {
  background-color: #b8b8b9;
  width: 97px;
  height: 30px;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  font-size: 12px;
  font-weight: bold;
  border-radius: 15px;
  border: none;
  color: #333745;
  text-transform: uppercase;
  margin-left: 20px;
  transition: all .2s;
  cursor: pointer;
}
.login-btn:hover {
  transform: scale(1.06);
}

Kerennn. Sekarang mari kita style juga wrapper slider.

Ini akan menjadi full-screen slider sehingga kita set ke posisi absolut.

.css-slider-wrapper {
  display: block;
  background: #FFF;
  overflow: hidden;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

Mari kita style juga slide nya, kita telah menerapkan class umum dan class untuk setiap slide dimana kita menambahkan warna background masing-masing.

/* Slider */
.slider {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 1;
  z-index: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-content: center;
  -webkit-transition: -webkit-transform 1600ms;
  transition: -webkit-transform 1600ms, transform 1600ms;
  -webkit-transform: scale(1);
  transform: scale(1);
}
 
/* Slides Background Color */
.slide-1 {
  background: #fbad99;
  left: 0;
}
.slide-2 {
  background: #a9785c;
  left: 100%
}
.slide-3 {
  background: #9ea6b3;
  left: 200%
}
.slide-4 {
  background: #b1a494;
  left: 300%;
}
.slider {
  display: flex;
  justify-content: flex-start;
}
.slider-content {
  width: 635px;
  padding-left: 100px;
}

Sekarang element style dalam setiap slide. Ingat kita memiliki beberapa teks, tombol dan gambar.

/* Slider Inner Slide Effect */
.slider h2 {
  color: #333333;
  font-weight: 900;
  text-transform: capitalize;
  font-size: 60px;
  font-weight: 300;
  line-height: 1.2;
  opacity: 0;
  -webkit-transform: translateX(500px);
  transform: translateX(500px);
  margin-top: 0;
  letter-spacing: 2px;
}
 
.slider h4 {
  font-size: 22px;
  font-family: "Oswald";
  color: rgba(51, 51, 51, 0.349);
  font-weight: bold;
  text-transform: uppercase;
  line-height: 1.2;
  opacity: 0;
  -webkit-transform: translateX(500px);
  transform: translateX(500px);
}
 
.slider > img {
  position: absolute;
  right: 10%;
  bottom: 0;
  height: 100%;
  opacity: 0;
  -webkit-transform: translateX(500px);
  transform: translateX(500px);
}
 
.slide-1 > img {
  right: 0;
}
 
.buy-now-btn {
  background-color: #ea2e49;
  width: 220px;
  height: 50px;
  border-radius: 30px;
  border: none;
  font-family: Montserrat;
  font-size: 20px;
  font-weight: 100;
  color: #fff;
  text-align: left;
  padding-left: 35px;
  position: relative;
  cursor: pointer;
  transition: all .2s;
}
 
.buy-now-btn:hover {
  box-shadow: 0px 0px 60px -17px rgba(51,51,51,1);
}
 
.buy-now-btn:after {
  content: 'Buy Now';
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  position: absolute;
  right: 35px;
  top: 18px;
}
 
.slider .buy-now-btn:focus,
.navigation .login-btn:focus {
  outline: none;
}

Mari kita juga memastikan bahwa ketika perubahan slide, element didalamnya seperti teks dan gambar- animasi.

/* Animations */
.slider h2 {
  -webkit-transition: opacity 800ms, -webkit-transform 800ms;
  transition: transform 800ms, opacity 800ms;
  -webkit-transition-delay: 1s; /* Safari */
  transition-delay: 1s;
}
.slider h4 {
  -webkit-transition: opacity 800ms, -webkit-transform 800ms;
  transition: transform 800ms, opacity 800ms;
  -webkit-transition-delay: 1.4s; /* Safari */
  transition-delay: 1.4s;
}
.slider > img {
  -webkit-transition: opacity 800ms, -webkit-transform 800ms;
  transition: transform 800ms, opacity 800ms;
  -webkit-transition-delay: 1.2s; /* Safari */
  transition-delay: 1.2s;
}

Kita juga memiliki nomor pagination di sudut kanan setiap slide. Ayo kita atur stylenya juga.

/* Number Pagination */
.number-pagination {
  position: absolute;
  bottom: 30px;
  right: 100px;
  font-family: "Oswald";
  font-weight: bold;
}
 
.number-pagination span {
  font-size: 30px;
  color: #ea2e49;
  letter-spacing: 4px;
}
 
.number-pagination span:after {
  content: "/4";
  font-size: 16px;
  color: #fff;
}

Mengagumkan! Sekarang kita style slider paginationnya.

/* Slider Pagger */
.slider-pagination {
  position: absolute;
  bottom: 30px;
  width: 575px;
  left: 100px;
  z-index: 1000;
  display: flex;
  align-items: center;
}
.slider-pagination label {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  background: #fff;
  margin: 0 10px;
  cursor: pointer;
}

Ok keren! Sekarang inilah bagian yang menyenangkan dan dimana keajaiban terjadi.

Perhatikan bahwa kita akan menggunakan : checked pseudo class untuk mengontrol sliding.

:checked pseudo-class memilih elemen ketika berada di select area yang dipilih. Hal ini hanya terkait dengan (input type=”text” /) masukan elemen type radio dan checkbox. :checked pseudo-class selector cocok dengan radio dan checkbox jenis inputan yang ketika diperiksa atau toggled ke areanya. Jika tidak dipilih atau diperiksa, tidak ada yang cocok.

/* Slider Pagger Event */
.slide-radio1:checked ~ .slider-pagination .page1,
.slide-radio2:checked ~ .slider-pagination .page2,
.slide-radio3:checked ~ .slider-pagination .page3,
.slide-radio4:checked ~ .slider-pagination .page4 {
  width: 14px;
  height: 14px;
  border: 2px solid #ea2e49;
  background: transparent;
}
 
/* Slider Slide Effect */
.slide-radio1:checked ~ .slider {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}
.slide-radio2:checked ~ .slider {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}
.slide-radio3:checked ~ .slider {
  -webkit-transform: translateX(-200%);
  transform: translateX(-200%);
}
.slide-radio4:checked ~ .slider {
  -webkit-transform: translateX(-300%);
  transform: translateX(-300%);
}
 
.slide-radio1:checked ~ .slide-1 h2,
.slide-radio2:checked ~ .slide-2 h2,
.slide-radio3:checked ~ .slide-3 h2,
.slide-radio4:checked ~ .slide-4 h2,
.slide-radio1:checked ~ .slide-1 h4,
.slide-radio2:checked ~ .slide-2 h4,
.slide-radio3:checked ~ .slide-3 h4,
.slide-radio4:checked ~ .slide-4 h4,
.slide-radio1:checked ~ .slide-1 > img,
.slide-radio2:checked ~ .slide-2 > img,
.slide-radio3:checked ~ .slide-3 > img,
.slide-radio4:checked ~ .slide-4 > img {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  opacity: 1
}

Mengagumkan! Berikut adalah cara full-screen kita akan terlihat:

slider-screenshot

Terlihat bagus kan? Tapi mari kita akan membuatnya responsif.

/* Responsive */
@media only screen and (max-width: 768px) {
  .slider h2 {
    font-size: 20px;
  }
  .slider h4 {
    font-size: 16px;
  }
 
  .slider-content {
    padding: 0 2%
  }
 
  .navigation {
    padding: 0 2%;
  }
 
  .navigation-left {
    display: none;
  }
 
  .number-pagination {
    right: 2%;
  }
  .slider-pagination {
    left: 2%;
  }
 
  .slider .buy-now-btn {
    padding: 0 15px;
    width: 175px;
    height: 42px;
  }
 
  .slider .buy-now-btn:after {
    top: 15px;
  }
 
  .slider > img {
    right: 2%;
  }
 
  .slide-1 > img {
    right: -110px;
  }
}

Javascript (jQuery)

Kita memiliki satu hal lagi yang harus dilakukan. Slider kita hanya mengubah slide ketika kita klik pada bullet pagination. Kita akan menggunakan beberapa Javascript untuk membuat slider untuk mengubah secara otomatis. Pastikan untuk menyertakan jQuery dalam proyek pertama Anda dan kemudian tambahkan baris ini ke file javascript Anda.

var TIMEOUT = 6000;
 
var interval = setInterval(handleNext, TIMEOUT);
 
function handleNext() {
 
  var $radios = $('input[class*="slide-radio"]');
  var $activeRadio = $('input[class*="slide-radio"]:checked');
 
  var currentIndex = $activeRadio.index();
  var radiosLength = $radios.length;
 
  $radios
    .attr('checked', false);
 
  if (currentIndex >= radiosLength - 1) {
 
    $radios
      .first()
      .attr('checked', true);
 
  } else {
 
    $activeRadio
      .next('input[class*="slide-radio"]')
      .attr('checked', true);
 
  }
 
}

Mengagumkan! Kita sudah selesai sekarang. Saya harap tutorial ini membantu Anda memahami bagaimana banyak yang dapat dilakukan dengan CSS dan lebih khusus :checked pseudo class. Semoga bermanfaat

Membuat Form Validasi Kartu Kredit

Dalam tutorial ini kami akan berbagi cara untuk membuat form kartu kredit sederhana. Kita akan membangun semuanya dari awal, dengan sedikit bantuan dari Bootstrap 3 untuk interfacenya dan Payform.js untuk form validasi client-side.

Overview projek

Berikut adalah tampilan akhir hasil dari tutorial ini.

credit-card-form

Anda bisa mendapatkan full code untuk projek ini dengan klik link download. Gambaran dari file dapat dilihat dibawah ini:

project-overview

Ada dua file .css dan dua file .js yang akan kita butuhkan untuk memasukan dalam HTML kita. Semua source lain seperti framework Bootstrap, jQuery, dan font web akan dimasukan secara eksternal melalui CDN.

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Credit Card Validation Demo</title>

    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/styles.css">
    <link rel="stylesheet" type="text/css" href="assets/css/demo.css">
</head>

<body>

    <!-- The HTML for our form will go here -->
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="assets/js/jquery.payform.min.js" charset="utf-8"></script>
    <script src="assets/js/script.js"></script>
</body>
</html>

Sekarang semuanya sudah diatur, kita dapat mulai membangun form kartu kredit Anda. Mari kita mulai dengan layout HTML!

Layout

Sebuah dialog kartu kredit harus sederhana, singkat dan lugas. Berikut adalah empat input fields bahwa setiap form kartu kredit harus memiliki:

  • Nama pemilik kartu kredit
  • Nomor kartu
  • Kode rahasia (juga dikenal sebagai CVV / CVC / CID)
  • Tanggal kadaluarsa

Semua yang perlu kita lakukan adalah membuat <form> dan menambahkan semua field input yang diperlukan. Untuk nama pemilik, nomor kartu dan CVV kita akan menggunakan teks field sederhana. Untuk tanggal  kadaluarsa kita akan menempatkan kombinasi dua penyeleksi dengan pilihan yang telah ditetapkan untuk membuat bulan dan tahun

Selain itu formnya kita beri judul, button dan gambar untuk vendor kartu kredit populer. Karena kita menggunakan Bootstrap maka ada markup tambahan sedikit, tapi hal itu akan membantu menjaga kode terorganisir dan layout responsif.

<div class="creditCardForm">
    <div class="heading">
        <h1>Confirm Purchase</h1>
    </div>
    <div class="payment">
        <form>
            <div class="form-group owner">
                <label for="owner">Owner</label>
                <input type="text" class="form-control" id="owner">
            </div>
            <div class="form-group CVV">
                <label for="cvv">CVV</label>
                <input type="text" class="form-control" id="cvv">
            </div>
            <div class="form-group" id="card-number-field">
                <label for="cardNumber">Card Number</label>
                <input type="text" class="form-control" id="cardNumber">
            </div>
            <div class="form-group" id="expiration-date">
                <label>Expiration Date</label>
                <select>
                    <option value="01">January</option>
                    <option value="02">February </option>
                    <option value="03">March</option>
                    <option value="04">April</option>
                    <option value="05">May</option>
                    <option value="06">June</option>
                    <option value="07">July</option>
                    <option value="08">August</option>
                    <option value="09">September</option>
                    <option value="10">October</option>
                    <option value="11">November</option>
                    <option value="12">December</option>
                </select>
                <select>
                    <option value="16"> 2016</option>
                    <option value="17"> 2017</option>
                    <option value="18"> 2018</option>
                    <option value="19"> 2019</option>
                    <option value="20"> 2020</option>
                    <option value="21"> 2021</option>
                </select>
            </div>
            <div class="form-group" id="credit_cards">
                <img src="assets/images/visa.jpg" id="visa">
                <img src="assets/images/mastercard.jpg" id="mastercard">
                <img src="assets/images/amex.jpg" id="amex">
            </div>
            <div class="form-group" id="pay-now">
                <button type="submit" class="btn btn-default" id="confirm-purchase">Confirm</button>
            </div>
        </form>
    </div>
</div>

Sekarang kita memiliki field input yang dibutuhkan, kita dapat mengatur aturan validasi.

Validation

Semua validasi akan menunjukan client side dan dilakukan secara eksklusif di JavaScript. Dan untuk validasi pada HTML Anda bisa melihatnya pada postingan sebelumnya. untuk memulainya dengan mendefinisikan semua selektor jQuery yang kita butuhkan :

var owner = $('#owner'),
    cardNumber = $('#cardNumber'),
    cardNumberField = $('#card-number-field'),
    CVV = $("#cvv"),
    mastercard = $("#mastercard"),
    confirmButton = $('#confirm-purchase'),
    visa = $("#visa"),
    amex = $("#amex");

Kemudian, menggunakan Payform.js, kita akan mengubah field input dasar kita menjadi inputan khusus untuk data kartu kredit. Kita hanya perlu memanggil fungsi yang tepat dan library secara otomatis akan menangani format teks dan panjang string maksimum bagi kita :

cardNumber.payform('formatCardNumber');
CVV.payform('formatCardCVC');

Selanjutnya kita ingin dapat memberikan umpan balik real-time kepada pengguna saat mereka mengetik di nomor kartu mereka. Untuk melakukannya kami akan menulis fungsi sederhana yang melakukan dua hal :

  1. Periksa apakah teks field yang diinputkan adalah nomor kartu valid atau tidak. Tambahkan pewarna sesuai dengan bidang teks.
  2. Tergantung pada input karakter ini, lihat jika kartu selain Visa, MasterCard atau American Express. Hal ini dilakukan dengan menggunakan method payform.parseCardType()

Karena kita ingin melakukan eksekusi diatas setiap kali karakter baru yang diketik menggunakan jQUery keyup() event.

cardNumber.keyup(function() {
    amex.removeClass('transparent');
    visa.removeClass('transparent');
    mastercard.removeClass('transparent');

    if ($.payform.validateCardNumber(cardNumber.val()) == false) {
        cardNumberField.removeClass('has-success');
        cardNumberField.addClass('has-error');
    } else {
        cardNumberField.removeClass('has-error');
        cardNumberField.addClass('has-success');
    }

    if ($.payform.parseCardType(cardNumber.val()) == 'visa') {
        mastercard.addClass('transparent');
        amex.addClass('transparent');
    } else if ($.payform.parseCardType(cardNumber.val()) == 'amex') {
        mastercard.addClass('transparent');
        visa.addClass('transparent');
    } else if ($.payform.parseCardType(cardNumber.val()) == 'mastercard') {
        amex.addClass('transparent');
        visa.addClass('transparent');
    }
});

Ada satu hal lagi yang harus kita lakukan adalah memeriksa apakah semua field memegang data yang valid ketika user mencoba untuk mengirimkan form.

Nama validasi bisa sangat rumit. Untuk menjaga pencahayaan pada tutorial ini, kita tidak akan menuju subjek, dan kita hanya akan memeriksa apakah  inputan nama minimal 5 karakter. Payform memberikan metode yang diperlukan untuk memvalidasi sisa formulir.

confirmButton.click(function(e) {
    e.preventDefault();

    var isCardValid = $.payform.validateCardNumber(cardNumber.val());
    var isCvvValid = $.payform.validateCardCVC(CVV.val());

    if(owner.val().length < 5){
        alert("Wrong owner name");
    } else if (!isCardValid) {
        alert("Wrong card number");
    } else if (!isCvvValid) {
        alert("Wrong CVV");
    } else {
        // Everything is correct. Add your form submission code here.
        alert("Everything is correct");
    }
});

Style

Kita akan menggunakan Bootstrap, sehingga sebagian besar styling dilakukan oleh framework. Sebagian besar meliputi field input dan berbagai padding, margin dan font tweak.

styles.css

.creditCardForm {
    max-width: 700px;
    background-color: #fff;
    margin: 100px auto;
    overflow: hidden;
    padding: 25px;
    color: #4c4e56;
}
.creditCardForm label {
    width: 100%;
    margin-bottom: 10px;
}
.creditCardForm .heading h1 {
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    color: #4c4e56;
}
.creditCardForm .payment {
    float: left;
    font-size: 18px;
    padding: 10px 25px;
    margin-top: 20px;
    position: relative;
}
.creditCardForm .payment .form-group {
    float: left;
    margin-bottom: 15px;
}
.creditCardForm .payment .form-control {
    line-height: 40px;
    height: auto;
    padding: 0 16px;
}
.creditCardForm .owner {
    width: 63%;
    margin-right: 10px;
}
.creditCardForm .CVV {
    width: 35%;
}
.creditCardForm #card-number-field {
    width: 100%;
}
.creditCardForm #expiration-date {
    width: 49%;
}
.creditCardForm #credit_cards {
    width: 50%;
    margin-top: 25px;
    text-align: right;
}
.creditCardForm #pay-now {
    width: 100%;
    margin-top: 25px;
}
.creditCardForm .payment .btn {
    width: 100%;
    margin-top: 3px;
    font-size: 24px;
    background-color: #2ec4a5;
    color: white;
}
.creditCardForm .payment select {
    padding: 10px;
    margin-right: 15px;
}
.transparent {
    opacity: 0.2;
}
@media(max-width: 650px) {
    .creditCardForm .owner,
    .creditCardForm .CVV,
    .creditCardForm #expiration-date,
    .creditCardForm #credit_cards {
        width: 100%;
    }
    .creditCardForm #credit_cards {
        text-align: left;
    }
}

Tutorial membuat vorm validasi kartu kredit telah selesai semoga bermanfaat. Untuk Demo bisa dilihat pada link berikut

Pure.css Menawarkan Alternatif dari Bootstrap

Apa sih Pure.css itu?

Sementara ini Bootstrap telah mengambil alih sebagian besar web besar, dapat menempatkan sedikit beban kinerja di situs yang mungkin tidak diperlukan untuk proyek berikutnya. Pure.css adalah framework responsif Yahoo yang menawarkan tampilan yang minimalis, terdokumentasi dengan baik dan alternatif yang fleksibel.

Dalam tutorial ini, kita akan memperkenalkan kepada Anda tentang Pure “sebuah set kecil modul CSS responsif yang dapat Anda gunakan dalam setiap proyek web”. Kita akan meninjau serangkaian fitur dan keuntungan menggunakan Pure dan kemudian menjalankannya melalui beberapa contoh penggunaan dasar.

Memilih Platform

Pure menawarkan semua fitur-fitur umum yang Anda butuhkan dalam desain framework web standar. Jadi, apakah Anda sedang membangun sebuah tema untuk WordPress atau custom website Anda sendiri, Pure bisa menjadi pilihan yang baik.

Untuk manajer proyek, biasanya penting bahwa proyek-proyek klien dibangun dengan tool standar yang dapat dengan mudah dipahami dan dipelihara, dan yang paling penting, bahwa itu tidak mudah dalam perekrutan bakat yang datang dengan pengalaman dalam platform Anda. Bootstrap sangat cocok digunakan. Pure tampaknya cukup sederhana juga dapat menjadi titik awal yang baik.

Ringkasan Fitur Pure

Berikut adalah ringkasan dari manfaat dan fitur Pure.

  • Dapat dicustom, grid responsif
  • Menu built-in vertikal dan horisontal, termasuk menu drop-down
  • Button yang bekerja dengan elemen <a> dan <button>
  • Form alignment yang fleksibel
  • Style table umum
  • Bersih, tampilan minimalis yang dapat dengan mudah diperluas

Namun yang paling mengagumkan, Pure.css super kecil, hanya 4,5 KB minified+gzip. Berikut berapa banyak ruang komponen yang berbeda dari pure ambil di lingkungan produksi Anda:

module sizes

Pure juga diuji dengan baik dan berjalan di IE 8+, Firefox, Chrome, Safari, iOS 6-8, and Android 4.x.

Dan Anda masih dapat menggunakannya dengan unsur-unsur dari Bootstrap, menambahkannya dimana Anda perlukan. Kami akan menunjukan contoh dibawah ini:

Pure dibangun pada Normalize.css, yang menstandarisasikan kinerja framework ini di browser. Menormalkannya disediakan reset default CSS :

  • Mempertahankan default useful
  • Menormalkan style untuk berbagai elemen
  • Mengoreksi bug dan ketidaksesuaian browser umum
  • Meningkatkan kegunaan dengan perbaikan halus
  • Menjelaskan kode menggunakan komentar secara rinci

Memulai dengan Pure

Website Pure dibangun dengan framework, sehingga minimalis, kodenya berkembang dengan baik membuat sederhana untuk menavigasinya, mudah untuk menggunakan panduan. Berikut ini adalah contoh dari menu kiri Pure dalam action :

get started

Anda dapat menambahkan Pure ke halaman Anda melalui Yahoo CDN gratis. Cukup tambahkan elemen <link> berikut ke halaman <head> Anda, sebelum stylesheet proyek Anda:

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">

Untuk menginisialisasi lebar responsif dari website Anda, menetapkan tag meta untuk viewport untuk lebar perangkat Anda:

<meta name="viewport" content="width=device-width, initial-scale=1">

Layout

Pada halaman layoutnya, Pure menawarkan pengambilan sample yang bisa didownload misalnya halaman yang berbeda untuk kebutuhan aplikasi umum:

samples (1)

Anda dapat browsing dan download salah satunya yang Anda inginkan untuk bereksperimen dengan menambahkannya pada aplikasi Anda.

  • Blog
  • Email
  • Gallery photo
  • Landing page
  • Gallery harga
  • Responsif side menu
  • Responsif menu horizontal-to-vertikal
  • Responsif menu horizontal-to- Scrollable

Basis pure

Halaman dasar(basis) memberikan background singkat tentang dasar bawahnya framework Pure, terutama Normalize.css :

Normalize.css adalah file CSS kecil yang menyedikan konsistensi lintas browser yang lebih baik dalam styling default elemen HTML. Juga modern, HTML5-ready, alternatif untuk reset CSS tradisional

Anda juga dapat memuat Normalize secara terpisah menggunakan Yahoo CDN untuk penggunaan independen:

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/base-min.css">

Dan ada fitur dasar kecil lainnya seperti class untuk memberitahu Pure untuk memuat gambar responsif dengan viewport :

<img class="pure-img" src="...">

Tapi sekarang, mari kita lihat beberapa contoh layout Pure yang disediakan.

Grid

Grid merupakan aspek utama dari layout website Pure membuatnya cukup sederhana. Berikut adalah contoh singkat dari empat kolom box Pure pada layar dekstop:

grid-100

Dan inilah cara memperkecil pada viewport tablet ukuran setengah :

grid-50

Dan terakhir, satu kolom pada smartphone:

grid-25

Pure grid terdiri dari dua jenis class: grid dan unit. Anak elemen dari div grid harus div unit. Konten Anda berjalan didalam satuan div. Class unit diberi nama untuk mewakili lebarnya. Misalnya, pure-u-1-4 memiliki lebar 25%.

Berikut kode untuk keempat responsif diatas :

<div class="grids-example">
    <div class="pure-g">
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
        <div class="l-box">
            <h3>Lorem Ipsum</h3>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
            </p>
        </div>
    </div>
 
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
        <div class="l-box">
            <h3>Dolor Sit Amet</h3>
            <p>
                Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.
            </p>
        </div>
    </div>
 
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
        <div class="l-box">
            <h3>Proident laborum</h3>
            <p>
                In culpa qui officia deserunt mollit anim id est laborum. incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
            </p>
        </div>
    </div>
 
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
        <div class="l-box">
            <h3>Praesent consectetur</h3>
            <p>
               Integer vitae lectus accumsan, egestas dui eget, ullamcorper urn. In feugiat tortor at turpis rhoncus tincidunt. Duis sed porttitor ante, eget venenatis lectus.
            </p>
        </div>
    </div>

Seperti yang Anda lihat diatas, <div class=”pure-g”> mewakili class grid luar. Kemudian <div class=”pure-u-1 pure-u-md-1-2 pure-u-lg-1-4″> menginstruksikan browser untuk menunjukan satu kolom untuk viewport minimum, setengah kolom untuk medium dan kolom keempat untuk lebih lebar lagi.

Anda dapat mempelajari lebih lanjut tentang grid Pure disini.

Form

multi-column

Pure memiliki dukungan untuk menyelaraskan field input dalam form dan untuk styling field khusus, seperti :

  • Form inline
  • Form stacked
  • Form dua kolom
  • Form multi kolom
  • Input grouped
  • Input required
  • Input disabled
  • Input readonly
  • Input rounded
  • Checkbox dan radio

Anda dapat melihat semuanya disini. Mari kita menjelajahi dua form kolom, Pure yang mengacu sebagai align form:

two-column

Dengan menggunakan class pure-form-aligned dengan pure-control-group(s), Pure memastikan bahwa setiap set field benar diposisinya seperti yang ditunjukan diatas.

<form class="pure-form pure-form-aligned">
    <fieldset>
        <div class="pure-control-group">
            <label for="name">Username</label>
            <input id="name" type="text" placeholder="Username">
        </div>
 
        <div class="pure-control-group">
            <label for="password">Password</label>
            <input id="password" type="password" placeholder="Password">
        </div>
 
        <div class="pure-control-group">
            <label for="email">Email Address</label>
            <input id="email" type="email" placeholder="Email Address">
        </div>
 
        <div class="pure-control-group">
            <label for="foo">Supercalifragilistic Label</label>
            <input id="foo" type="text" placeholder="Enter something here...">
        </div>
 
        <div class="pure-controls">
            <label for="cb" class="pure-checkbox">
                <input id="cb" type="checkbox"> I've read the terms and conditions
            </label>
 
            <button type="submit" class="pure-button pure-button-primary">Submit</button>
        </div>
    </fieldset>
</form>

Ini adalah cara yang cukup sederhana untuk membangunnya sangat bermanfaat, baik meletakan form.

Table

Membuat pure build dan format table cukup mudah juga. Berikut ini adalah contoh dari table bergaris horisontal:

table striped

Anda dapat melihat kode table diatas hanya dengan menambahkan class baris pure-table-odd bergantioan melalui kode Anda untuk mengubah striping:

<table class="pure-table">
    <thead>
        <tr>
            <th>#</th>
            <th>Make</th>
            <th>Model</th>
            <th>Year</th>
        </tr>
    </thead>
 
    <tbody>
        <tr class="pure-table-odd">
            <td>1</td>
            <td>Honda</td>
            <td>Accord</td>
            <td>2009</td>
        </tr>
 
        <tr>
            <td>2</td>
            <td>Toyota</td>
            <td>Camry</td>
            <td>2012</td>
        </tr>
 
        <tr class="pure-table-odd">
            <td>3</td>
            <td>Hyundai</td>
            <td>Elantra</td>
            <td>2010</td>
        </tr>
 
        <tr>
            <td>4</td>
            <td>Ford</td>
            <td>Focus</td>
            <td>2008</td>
        </tr>
 
        <tr class="pure-table-odd">
            <td>5</td>
            <td>Nissan</td>
            <td>Sentra</td>
            <td>2011</td>
        </tr>
 
        <tr>
            <td>6</td>
            <td>BMW</td>
            <td>M3</td>
            <td>2009</td>
        </tr>
 
        <tr class="pure-table-odd">
            <td>7</td>
            <td>Honda</td>
            <td>Civic</td>
            <td>2010</td>
        </tr>
 
        <tr>
            <td>8</td>
            <td>Kia</td>
            <td>Soul</td>
            <td>2010</td>
        </tr>
    </tbody>
</table>

Ada sejumlah contoh table lainnya yang ditampilkan disini.

Menu

Menu di Pure juga mudah difasilitasi, termasuk :

  • Menu vertikal
  • Menu horizontal
  • Selected dan disabled item
  • Dropdown
  • Menu vertikal dengan Submenu
  • Scroll horizontal menu
  • Scroll vertikal menu
  • Responsif menu vertikal
  • Responsif menu Horizontal-Scrollable
  • Responsif menu Horizontal-to-Vertical

Lihat semua menu yang diilustrasikan disini. Berikut adalah bagaimana kode Anda jika ingin membuat Dropdown menu:

dropdown menu

Pada dasarnya, hanya pure-menu-horizontal, pure-menu-list dan pure-menu-item pure-menu-has-children pure-menu-allow-hover dan kemudian daftar anak item menu.

<div class="pure-menu pure-menu-horizontal">
    <ul class="pure-menu-list">
        <li class="pure-menu-item pure-menu-selected"><a href="#" class="pure-menu-link">Home</a></li>
        <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
            <a href="#" id="menuLink1" class="pure-menu-link">Contact</a>
            <ul class="pure-menu-children">
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Email</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Twitter</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Tumblr Blog</a></li>
            </ul>
        </li>
    </ul>
</div>

Pure memberikan contoh JavaScript untuk menerapkan fitur aksesibilitas tambahan dalam menu Anda.

Info lebih lanjut

Pure website menyediakan beberapa panduan yang sangat baik untuk membangun framework:

Dan Anda dapat menjelajahi kombinasi potongan-potongan dari Pure dengan Bootstrap dan JavaScript. Jika Anda ingin memulai dengan Pure footprint kecil dan style minimalis, Anda masih dapat memanfaatkan berbagai fitur Bootstrap, hanya memuat apa yang Anda butuhkan.

Berikut ini adalah contoh modal dialog Bootstrap dalam Pure, yang dapat Anda lihat pada halaman ekstensi Pure ini:

bootstrap w pure

Semoga bermanfaat

Mengetahui Properti CSS Object Fit dan Position

Dalam postingan kali ini kita akan membahas postingan tentang dua properti CSS yang tidak banyak developer web ketahui. Dua properti tersebut adalah object-fit dan object-position dan keduanya harus dilakukan dengan styling gambar dan video.

Pertama, kita akan menunjukan kepada Anda bagaimana menggunakannya dan membahasnya secara detail yang mencakup semua spesifikasi penting. Setelah itu, kami telah menyiapkan demo kecil dimana Anda dapat memainkan properti dan melihatnya beraksi. Lets go mari kita mulai…..

Object-fit

Dengan object-fit kita bisa mengatasi bagaimana sebuah gambar (atau video) membesar atau mengecilkannya sendiri untuk mengisi box konten. Hal ini diperlukan ketika sebuah foto yang kita miliki mempunyai ukuran atau aspek yang berbeda rasio dari tempat yang ditunjuk sebagai sebuah layout.

Secara tradisional, untuk memecahkan masalah ini kita akan membuat div dan mengatur background-image dan background-size. CSS modern bagaimanapun memungkinkan kita untuk menambahkan tag gambar, mengatur source tersebut secara biasa dan kemudian menerapkan object-fit langsung ke selector image:

img {
    width: 100%;
    object-fit: cover;
}

Kemungkinan value yang diterima adalah :

  • Fill (default) – lebar dan tinggi gambar sesuai dengan kotak. Sebagian besar waktu akan mengacaukan aspek rasionya.
  • Cover – gambar menyimpan aspek rasio dan mengisi seluruh kotak, bagian itu terpotong dan tidak akan ditampilkan.
  • Contain – gambar menyimpan aspek rasio dan membesar/menyusut untuk memuat didalam kotak.
  • None – ukuran asli dan aspek rasio
  • Scale-down – menampilkan seperti salah satu diatas, bergantung pada yang menghasilkan ukuran gambar terkecil.

Object-position

Properti ini mendefinisikan keberadaan dalam wadah gambar akan diposisikan. Dibutuhkan dua nilai numerik, satu untuk sumbu atas-bawah dan satu lagi untuk sumbu kiri-kanan.

Angka-angka ini bisa dalam presentase, pixel atau unit pengukuran lainnya, dan dapat bernilai negatif. Beberapa kata kunci seperti center, top, right, dll dapat digunakan juga.

Secara default gambar diposisikan ditengah wadah, sehingga nilai defaultnya adalah :

img {
    object-position: center;
    /* which equals */
    object-position: 50% 50%;
}

Playground Demo

Dibawah ini adalah halaman demo yang akan membantu Anda mendapatkan pemahaman tentang object-fit dan object-position dalam waktu singkat. Didalamnya Anda dapat menguji properti dan memberi value yang berbeda untuk melihat bagaimana properti tersebut dapat mengubah objek media. Jangan takut untuk membuka DevTool juga.

object-fit-demo1-e1461076742599

Browser Support

Mengikuti tradisi semua fitur keren CSS,browser support untuk object-fit dan object-position agak tidak konsisten dan dalam hal ini karena IE dan Edge tidak support sama sekali. Sambil menunggu semua browser Microsoft untuk mengadopsi kedua properti Anda dapat menggunakan polyfill ini untuk mengatasi masalah dengan baik. Juga, itu menjadi ide yang baik untuk mengatur warna background untuk semua wadah image sebagai fallback.

Kesimpulan

Properti object-fit dan object-position dapat sangat membantu ketika membangun halaman web responsif. Keduanya mudah diingat dan digunakan, dan bekerja dengan sempurna. Kami yakin sekali IE dan Edge mengadopsi mereka dengan cepat akan menjadi bagian dari toolbox CSS setiap web developer. Terimakasih sudah membaca semoga bermanfaat

DEMO

Tutorial Membuat Dropdown Box Menggunakan CSS3 Animation Dengan Sedikit Trik Checkbox

asda

Dalam tutorial ini kita akan membuat dropdown box dengan menggunakan CSS3 Animation dengan sedikit trik checkbox sebagai triggernya, biasanya ini dibuat dengan bantuan JQuery namun berkat CSS3 kita dapat membuat ini dengan properti transtion.

Silahkan lihat demonya disini.

HTML5 Untuk Dropdown Box

Mari kita lihat markup HTML5 untuk tutorial ini dengan lebih detail

<!-- Dropdown box slider -->
<section class="slider">

  <!-- Checkbox, kita akan menggunakan sedikit trik pada checkbox ini -->
  <input type="checkbox" id="toggle">
  <!-- Kita akan buat label ini sebagai pemicu dropdown slider. -->
  <label for="toggle">
    <!-- icon yang digunakan adalah entypo. kalian dapat mengubahnya -->
    <i class="toggle-icon"></i>
  </label>

  <!-- Konten dari dropdown box slider -->
  <section class="main-content">
    <h1>CSS3 Drop down box</h1>
  </section>

</section>

Komentar di atas di buat agar lebih mudah dipahami. Satu hal penting yang perlu ditambahkan disini adalah bahwa penting untuk memunculkan konten setelah checkbox. Kita perlu ini untuk memanfaatkan ~ selector. Selector ini digunakan untuk memilih sebuah elemen yang datang setelah elemen lain . Dalam hal ini kita perlu memilih konten yang datang setelah checkbox.

Jadi, mari kita lakukan styling.

Trik Checkbox Sebagai Pemicu Dropdown Box

Jadi, mari kita lihat bagaimana kita mengubah checkbox dan label menjadi tombol aktivasi yang terlihat bagus. Pertama-tama, kita menggunakan ikon dari webfont entypo sebagai contoh. Kita gunakan down arrow untuk posisi unchecked, dan up arrow untuk posisi checked.

input#toggle + label i.toggle-icon:before {
  font-family: 'entypo', sans-serif;
  content: "\e764";
}

input#toggle:checked + label i.toggle-icon:before {
  content: "\e767";
}

 Sekarang tentu saja kita perlu menyembunyikan checkbox dan menambahkan beberapa styling ekstra untuk label. Hal ini penting untuk menginisialisasi atas menjadi 0 pada label agar animasi bekerja. Atau anda bisa menggunakan properti transform untuk animasinya.

.slider input#toggle {
  display: none;
}

.slider input#toggle + label {
  font-size: 25px;
  width: 25px;
  height: 25px;
  display: inline-block;
  padding: 10px;
  color: white;
  background: #8f2c2c;
  position: relative;
  top: 0;
  transition: top 0.5s ease-in-out;
}

 Di properti transition ini kita definisikan properti agar animasi berfungsi, kecepatan, dan fungsi dari transisinya. Dan disini ada beberapa styling umum untuk slider dan konten.

.slider {
  width: 600px;
  text-align: center;
  margin: 0 auto;
}

.slider .main-content {
  background: #eee;
  height: 150px;
  position: relative;
  top: -195px;
  transition: top 0.5s ease-in-out;
}

.slider .main-content h1 {
  line-height: 150px;
  color: #30303f;
  width: 100%;
  text-stroke: 1px;
  font-size: 30px;
  text-shadow: 0 1px 1px #000;
  font-family: "Roboto"
}

 Membuat Animasi Dropdown Box Dengan CSS3

Sekarang mari kita lihat betapa mudahnya untuk membuat animasi dropdown box berfungsi seperti ditarik:

input#toggle:checked + label {
  top: 150px;
}

input#toggle:checked ~ .main-content {
  top: -45px;
}

 Apa yang kita lakukan disini adalah mengatur posisi label checkbox dan konten dari dropdown box. Perubahan properti ini akan memiliki animasi seperti yang ditentukan oleh properti transition yang kita definisikan sebelumnya. Perlu di perhatikan bagaimana kita menggunakan ~ selector untuk menargetkan class .main-content yang muncul setelah checkbox.

Sekian tutorial kali ini, kalian bisa lihat demonya disini.

Terimakasih.