Thoriq Firdaus
I'm a web designer, living in Indonesia. I love trying new things around CSS3 and HTML5, and occasionally speak at some local colleges and institutions on the subject. I also authored a book, Responsive Web Design by Examples, which covers practical approaches on building responsive websites rapidly with frameworks.
  • Web Design
    A Deeper Look at LESS MixinsPreview
    Our discussion about LESS continues–this time we’re going to look into LESS Mixins. With Mixins we can define a group of style declarations once and then reuse them throughout the stylesheet. It helps keep our code DRY as well as producing CSS in a more efficient way, particularly when dealing with complex CSS3 syntax. LESS provides different types of Mixins with their very own purpose; they can be straight-forward Mixins, or they can work as a (sort of) Function. Nonetheless, before we dig deep down into the subject, let’s begin with the basics of how a LESS Mixin works, shall we?Read More…
  • Web Design
    How to Use Source Maps for Better Preprocessor DebuggingPreview
    CSS preprocessors have become an indispensable tool for most front-end developers. However, despite the many advantages they provide, using tools like LESS, Stylus or Sass also present new problems, one of which we’re going to talk about (and solve) in this tutorial.Read More…
  • Web Design
    A Few Things You Might Not Know About LESSLogo less
    In this post, I’m going to highlight the newer features of LESS, some of which you might be blissfully unaware of.Read More…
  • Web Design
    Introducing the HTML5 “Menu” and “Menuitem” ElementsMenu
    Today I’m going to introduce you to two elements: and , part of the Interactive Elements specification. The web has evolved into something more than just linked documents; pages behave increasingly these days like apps. As such, it’s an appropriate time to form standard web interactivity features.Read More…
  • Web Design
    Explaining the “Details” and “Summary” ElementsDetails
    Lots of JavaScript libraries are developed to give us additional interactive widgets on websites. Equally, HTML5 has also interpreted a number of popular interactive components, making them into native web features. In this post, we are going to look into one such element called
    (and in doing so the element) which gives us an interactive widget similar to an accordion.Read More…
  • Web Design
    How to Build an Off-Canvas Navigation Layout With BootstrapOff canvas
    In this tutorial, I'll show you how to add an off-canvas navigation to Bootstrap with an extension called Jasny Bootstrap by Arnold Daniels.Read More…
  • Web Design
    Get up and Running with Google Web Starter KitGoogle
    In this post, I'm going walk you through several of Google Web Starter Kit's key features and also demonstrate how to use it for your next new project. Without further ado, let's get started!Read More…
  • Web Design
    Quick Tip: What to do When You Encounter a Bower FileBower
    Have you ever cloned or downloaded a GitHub repo, only to find a number of strange and extraneous files which you don't recognise? For example, you may well have found a bower.json file included in the source files. If you're not sure what to do with such a file, this quick tip will help you out.Read More…
  • Web Design
    Bringing Our Behance Portfolio Alive With CSS AnimationBehance thumb 3
    In previous tutorials we've looked into harnessing the Behance API to drive our own web page, and then, using LESS, we made the whole thing look presentable. In this tutorials we're going to enhance the experience for visitors by adding a lightbox effect and some CSS animations.Read More…
  • Web Design
    Styling Our Behance Portfolio Website Using LESSBehance thumb 2
    During the previous part of this series, we learned about the Behance API, using it to capture a user's portfolio pieces and display them on a web page. In this part we will style the web page, presenting the portfolio pieces in a suitably attractive way. Read More…
  • Web Design
    How to Use the Behance API to Build a Custom Portfolio Web Page Behance thumb 1
    Behance is great hub for creatives to share and show off their work and ongoing projects. Unlike Dribbble or Forrst which — as I personally see them — are predominantly populated by illustrators and UI designers, Behance encompasses a wider range of creative fields including Architecture, Motion Graphics, Automotive Design and Fashion. In addition to this, Behance also provides a set of APIs to get access to the content.Read More…
  • Web Design
    Practical Use of CSS3: Transforms and TransitionsWeb design
    Transforms and Transitions (introduced as part of the CSS3 specification) enable us to create the kind of interaction and experience previously only associated with JavaScript or Flash. You'll likely have read a lot of discussion and tutorials covering these properties, but they tend to be experimental in nature.Read More…
  • Web Design
    Petunjuk Singkat: Jangan Lupa Viewport Meta TagPreview viewport
    235 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
    965 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
    567 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
    567 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
    158 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 More…
  • Web Design
    Membangun Sebuah Template Email HTML dari AwalEmail build thumb
    255 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
    290 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
    546 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
    54 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…