CSS Log: Flexwrap in Safari

I got problems in one of our website: JAX.co.id recently. The body area of page in article is draggable to left. This found in Safari Maveriks, Yosemite doesn’t react this way.

Screen Shot 2015-07-01 at 10.10.04 PM

if i open one article like jazz gunung and swipe the trackpad there will empty space in the right of page.

I have two suspect: css flex or my implementation of parallax banner. After checking several article parallax is out of suspect, it also happened in article without parallax.

Then I open developer tools in Safari, and try to localize the problems. After deleting one by one several element I can identity the problems: newsletter subscription after article and in footer. Deleting that two eliminating the problems.

So my final suspect: FLEX. I use flex because it flexible to have element in right and left in certain width then giving the rest to center element. But flex is part of CSS3 new implementation that not really supported by all browser.

Checking in Cainisue.com i finally figuring out. I forget to give -webkit- prefix in flex box.

css before

form    
    +displayflex() //my custom flex with all prefix
    flex-wrap:  wrap // the problem 
    align-items: center

adding -webkit-flex-wrap: wrap fixing my draggable problem!

before:

Screen Shot 2015-07-01 at 10.09.37 PM

after:

Screen Shot 2015-07-01 at 10.36.14 PM

 

 

 

 

 

 

 

 

Beriklan di Internet

Perusahaan-perusahaan terbesar di Internet macam Google, Facebook dan Twitter dapat uang dari iklan. Penetrasi mereka dimulai dari search engine, website hingga ada istilah baru buat saya ‘remarketing’ yaitu mentarget pengguna internet yang habis berkunjung ke sebuah web atau mencari keyword tertentu.

Whose the player? yang terbesar tentu Google dengan Google Adsense plus DoubleClick (DC punya akses lebih besar karena dapat menyasar ad network lain) dan Facebook (FBX). FBX saat ini masih terbatas berjualan di platform facebook, namun dengan tingkat interaktifitas yang tinggi FBX segera jadi mainan baru.

Nah buat bermain di banyak segmen, pingin menyasar Google Search, tampil di blog, tampil di Facebook Sidebar, Remarketing/Retargeting juga terbuka pemain atau broker. Fungsi broker ini adalah memberikan akses satu pintu kepada pembeli iklan untuk bisa bermain di berbagai startegi/network tanpa perlu mengurusi semua administrasi di tiap-tiap network.

Beberapa broker yang bisa digunakan :

Home

http://www.adroll.com/

http://www.perfectaudience.com/

http://www.google.com/doubleclick/

 

 

 

Medium Baru

Website telah menjadi medium penyebaran informasi paling efektif, disamping teknologi bersaudara : Email. Dari bentuknya paling sederhana yaitu text yang saling terhubung, website saat ini punya perkembangan yang menarik untuk dicermati.

Screen Shot 2014-09-02 at 5.33.38 PM

What the Fact?

Untuk sebuah website kampanye atau product knowledge kita harus selektif dalam memberikan fakta kepada pembaca. Manakah informasi yang sekedar menjadi knowledge bagi pembaca dan manakah informasi yang bisa mengubah keputusan? Tempatkan fakta yang tepat pada presentasi/web

Screen Shot 2014-09-02 at 5.40.05 PM

Mobile First

Makin banyak orang membuka dan mengkonsumsi internet melalui perangkat mobile atau tablet. Karena itu pembuatan website tidak lagi berpikir di optimalkan untuk mobile, tetapi buat dari awal website di design, dibangun dan ditest untuk perangkat mobile, lalu merangkak ke tablet dan desktop.

Why? karena segala sesuatu yang lancar dibuka dari perangkat mobile, sewajarnya akan terbuka dengan baik di tablet dan desktop.

more: http://foundation.zurb.com/, http://www.sitepoint.com/beyond-bootstrap-foundation-frameworks-never-heard/

 

Screen Shot 2014-09-02 at 5.29.45 PM Rich Media

Video dan Suara punya peran penting membawa emosi pembaca, disamping tulisan dan foto. Penggunaan video dan suara kini bisa dibuat menyatu dengan website melalui hmtl5 + javascript. Berbeda dengan FLASH yang memerlukan plugins dan interaksi terbatas, html5 mendukung handset macam iphone dan android.

Screen Shot 2014-09-02 at 5.27.09 PM

User Experience

Ngapain punya web keren, informasi bagus tapi sulit digunakan oleh pengguna (awam)? membuat website yang baik bak kerja wartawan, menyajikan informasi yang penting namun mudah dicerna oleh setiap kalangan. Tak hanya mudah dicerna, pembaca juga harus dengan cepat mencari informasi terkait, artikel terhubung dan mengkontak anda.

Screen Shot 2014-09-02 at 5.24.41 PM

Keep It Simple S*****

Jika bisa mudah, mengapa sulit? jika bisa sederhana mengapa rumit. Jika hanya perlu satu halaman mengapa banyak?

Saat ini dengan kemampuan rich media (foto, video, suara) dan interaksi antara pembaca dan website, sebuah informasi bisa disampaikan, bahkan hanya dengan satu halaman. Pembaca cukup membaca dan menikmati dari awal hingga akhir untuk menangkap pesan dan kesan yang kita inginkan.

Screen Shot 2014-09-02 at 5.42.33 PM

others :

http://dataveyes.com/#!/en

http://www.soleilnoir.net/dreamon/#/everywhere

 

Front End Web Developer

Google Chrome Dev Tools

http://www.siteparticles.com/efficient-workflow-using-sass-locally-and-realtime-ftp-update-all-in-one-save

http://remysharp.com/2012/12/21/my-workflow-never-having-to-leave-devtools/

CodeKit https://incident57.com/codekit/

MixTure http://mixture.io/

PreprosApp http://alphapixels.com/prepros/

 

 

 

Politik Indonesia kuasai Twibbon

Screen Shot 2014-06-11 at 6.50.24 PMIndonesia adalah salah satu pengkonsumsi sosial media teraktif di dunia, dan urusan Copras Capres kali ini menunjukkan gejala yang menarik : perang media social.

Pemilu masih satu bulan lagi, dan ditentukan oleh coblosan jari anda di bilik suara. Namun jika pemilu diadakan saat ini dan dilakukan melalui social media maka pemenangnya jelas : Jokowi – Jusuf Kalla meninggalkan telak pesaing satu-satunya : Prabowo – Hatta, tentu diurutan kedua.

Kalau sekarang saya buka facebook dan twitter, dua sosmed yang masih saya gunakan, tentu kawan-kawan dari Indonesia cuma ngurusin satu hal : Presiden. Gak ada topik lain yang bisa menandingi ini, termasuk Piala Dunia sepakbola di Brazil. Saya pikir ini adalah pemilu paling populer di Indonesia sejak jaman reformasi. Tidak ada sebelumnya orang begitu bergairah untuk menunjukkan siapa jagoan presiden yang jadi pilihan. Layaknya fanatis bola dan agama aja.

Tapi yang paling mencolok adalah soal ganti nama dan foto profile di twitter, facebook bahkan whatsapp dan BBM. Menggunakan twibbon para pendukung Jokowi berhasil mendominasi arena pergantian wajah tidak cuma di Indonesia bahkan di seluruh dunia. Dengan moto “I Stand on the right side” yang juga diprotes (harusnya for bukan on kata sebagian orang) para pengguna sosial media memakai setengah dari wajah di social media untuk menyatakan dukungan pada Jokowi.

Diakses pada hari rabu, Ganti Profile ke Jokowi -JK #rightside  berhasil mengumpulkan 53.839 wajah social media yang di make up, ada lagi I Stand on The Right Side yang dapat dukungan 88.149 profile. Masih ada beberapa kampanye serupa dengan jumlah belasan ribu dukungan. Tim Prabowo tentu melakukan serangan balik namun Pilih #1 Prabowo – Hatta  hanya mengumpulkan 11.948.

Perang wajah di twibbon ini bisa menunjukkan bahwa Jokowi mempunyai masa pendukung yang lebih fanatis dan terbuka bicara pilihannya. Mereka juga punya akses terhadap teknologi dan komunikasi. Belum tentu juga menang di Twibbon menunjukkan menang telak di kotak suara, karena dalam survet terakhir pun Jokowi hanya menang belasan persen yang masih bisa dikejar oleh (mantan) jenderal prabowo.