Thoriq Firdaus
Indonesia / Surabaya
I'm a web designer, living in Indonesia. I love trying new things around CSS3 and HTML5. I also authored a book, Responsive Web Design by Examples, which covers practical approaches on building responsive websites rapidly with frameworks.
Tutorials
  • Web Design
    Building a Slider with Metafizzy’s FlickityFlickity
    172 shares
    Flickity is a JavaScript slider library, built by David DeSandro of Metafizzy fame. It’s optimized for touch gestures, performance, and includes things like physics-based animation. In this tutorial we’ll get it up and running, then examine some extra features it brings to the table. Let’s go!Read More…
  • Web Design
    Silky Smooth Web Animation with Velocity.jsPlay
    153 shares
    Animation, when thoughtfully applied, can improve website interfaces and, ultimately, the user experience of a website. In this tutorial, we are going to look into VelocityJS, a JavaScript animation engine for fast performance animations.Read More…
  • Web Design
    An Overview of Material Design LiteMdl
    496 shares
    I have a feeling that CodePen is going to be absolutely filled with Material Design in the coming months. Why? Because Google have just revealed their eagerly anticipated Material Design Lite (MDL) library. Let’s look at what MDL has brought to the table with its first release!Read More…
  • Web Design
    Making Gradients Easier with LESS MixinsGrad
    101 shares
    CSS Gradients have pretty messy syntax, made even worse once you add vendor prefixes. So, in this tutorial, we’re going to make Gradient color generation more intuitive with a LESS Mixin.Read More…
  • Web Design
    Sticky Positioning with Nothing but CSSSticky
    409 shares
    Sticking elements, when the user scrolls to a certain point, has become a common pattern in modern web design. This behaviour has been proposed (and drafted) as a new standard (the sticky position), allowing us to achieve the effect with pure CSS. Let’s take a look at how it works!Read More…
  • Web Design
    Native Popups and Modals With the HTML5 “dialog” ElementPreview tag dialog
    352 shares
    Many processes on the web these days require users’ full consent in order to be completed. For example, users may need to remove an account, change their username, or confirm a monetary transaction. Read More…
  • Web Design
    Understanding the LESS LoopLoop
    92 shares
    In this tutorial, we will comprehensively cover the LESS loop (coupled with a few other LESS features which we have discussed in previous posts, such as Mixins Guards and Color Functions). Looping is a real helpful feature in LESS and it allows us to automate many repetitive styling tasks.Read More…
  • Web Design
    Quick Tip: Using the HTML5 “download” AttributePreview tag download1
    561 shares
    Creating a download link in HTML is straightforward; add an anchor tag and point to the file within the href attribute. Some file types, however, won’t be downloaded. They, instead, will be opened in the browser. In this case consider using the “download” attribute.Read More…
  • Web Design
    Creating Color Schemes with LESS Color FunctionsPre
    217 shares
    LESS provides a handful of functions which make defining and manipulating colors super easy. In this tutorial we are going to walk through a number of them, helping you control colors, produce better color pairings and keep them organized.Read More…
  • Web Design
    The Perfect Lightbox? Using PhotoSwipe with jQueryPrev
    221 shares
    I recently came across a JavaScript library called PhotoSwipe, and I am truly impressed. It is a brilliant library which overlays an image or a group of images on your current page, an effect popularly known as lightbox.Read More…
  • Web Design
    How to Display Update Notifications in the Browser TabUpdate
    435 shares
    In this tutorial, we are going to build a form of user feedback, making use of the browser tab as a medium for notifying users of updates. Let’s see how it’s done.Read More…
  • Web Design
    How to Use Myth: “CSS the Way it Was Imagined”Myth
    110 shares
    In this tutorial, I'm going to walk you through a tool named Myth. Myth is an alternative CSS preprocessor which, unlike Sass or LESS, doesn’t use proprietary syntax. Instead, Myth adopts “future” syntax as specified in the CSS Working Draft.Read More…
Translations
  • Web Design
    Petunjuk Singkat: Jangan Lupa Viewport Meta TagPreview tag viewport
    288 sharesBahasa Indonesia
    Saya mengingat perjalanan pertama saya mempelajari responsive web design; saya menggunakan grid biasa, bergulat dengan layout fleksibel, dan menangangani media queries untuk pertama kali. Melebarkan dan mengecilkan jendela browser menghasilkan tampilan yang memuaskan. Kemudian saya mencobanya di perangkat mobile. Nampaknya tidak bekerja - saya hanya melihat versi yang dikecilkan dari desain ukuran penuh. Solusinya, ternyata, cukup mudah..Read More…
  • Web Design
    Pengenalan Animasi CSS bagi PemulaAnimation
    1039 sharesBahasa Indonesia
    Saat ini, semakin banyak website yang menggunakan animasi, baik dalam bentuk GIF, SVG, WebGL, video latar dan lain sebagainya. Ketika digunakan dengan benar, animasi dapat memberikan kesan hidup dan interaktifitas, menambahkan lapisan tambahan untuk meningkatkan pengalaman pengguna website.Read More…
  • Web Design
    Peningkatan Visual Sederhana di Sublime Text agar Dapat Menulis Kode Lebih BaikSublime thumb
    642 sharesBahasa Indonesia
    Sublime Text menyajikan ribuan extensi dan pengaturan untuk menciptakan sebuah editor kode yang dapat terpersonalisasi bagi siapa saja. Saat ini, saya akan menunjukkan anda beberapa pengaturan, plugin, theme, dan skema warna untuk membantu membuat pengalaman menulis kode secara visual menjadi lebih menarik. Hal ini tidak akan membuat layar anda menjadi lebih cantik, alih-alih ini akan membuat anda menjadi seorang coder yang lebih baik!Read More…
  • Web Design
    Panduan Pemula untuk Memasangkan FontPairing thumb
    747 sharesBahasa Indonesia
    Memasangkan font bisa menjadi sebuah tantangan. Memilih dua font atau lebih yang dapat bekerja dengan baik adalah suatu hal tersendiri - memilih dua font yang dapat bekerja sama untuk mencapai tujuan tipografik anda dapat memicu sakit kepala. Mari kita lihat apakah kita dapat meringankan hal tersebut. Panduan ini akan membantu anda memulai dalam memasangkan font untuk web.Read More…
  • Web Design
    Membangung Antarmuka Dashboard Modular Dengan PurePure thumb
    169 sharesBahasa Indonesia
    Hari ini, kita akan membuat dashboard dengan model minimalis menggunakan Pure, yaitu merupakan kumpulan modul CSS baru dari Yahoo!. Pada tutorial ini, kita juga akan membahas dan menerapkan beberapa prinsip SMACSS (Scalable and Modular Architecture for CSS), serta menggunakan ikon dari WeLoveIconFonts.com.Read More…
  • Web Design
    Membangun Sebuah Template Email HTML dari AwalEmail build thumb
    336 sharesBahasa Indonesia
    Cara terbaik untuk memahami proses apapun adalah dengan melakukannya sendiri, dari awal. Hari ini, kita akan melakukan hal tersebut untuk mendesain email, dengan membangun sebuah template HTML dari awal.Read More…
  • Web Design
    9 Fitur Sketch yang Harusnya Anda GunakanSketch retina new
    299 sharesBahasa Indonesia
    Sketch adalah sebuah aplikasi grafik untuk para desainer, yang dengan sangat baik juga dapat digunakan ke dunia web desain. Jika anda baru saja mengenalnya, anda mungkin belum mengetahui beberapa trik tersembunyi yang Sketch miliki. Hari ini saya ingin memandu beberapa tips teratas untuk mempercepat alur kerja desain anda.Read More…
  • Web Design
    Membangun Web dengan Google Web Starter KitGoogle
    547 sharesBahasa Indonesia
    Web Starter Kit adalah sebuah inisiatif baru dari Google; sebagai bagian dari misi mereka untuk menyederhanakan alur pengembangan web, sembari mendorong penerapan-penerapan terbaik yang mereka anjurkan di dalam Google's Web Fundamentals.Read More…
  • Web Design
    Petunjuk Singkat: Apa yang Anda Lakukan Ketika Medapati Sebuah File BowerBower
    87 sharesBahasa Indonesia
    Pernahkah Anda mengunduh sebuah repositori GitHub, namun kemudian menemukan beberapa file aneh dan asing yang tidak Anda kenali?Read More…
  • Code
    Dasar Pemrograman JavaScript Berorientasi-Objek200x200
    91 sharesBahasa Indonesia
    Beberapa tahun terakhir, JavaScript semakin meraih popularitas, antara lain disebabkan dengan banyaknya pustaka (library) yang dikembangkan agar penerapan serta penggunaan JavaScript menjadi lebih mudah terutama bagi mereka yang mungkin belum sepenuhnya memahami bahasa inti dari JavaScript.Read More…