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
    Quick Tip: Using the HTML5 “download” AttributePreview tag download
    188 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
    202 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
    206 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
    428 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
    106 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…
  • Web Design
    How to Add Windows Tiles to Your WebsiteTilename
    128 shares
    In this tutorial we are going to go through the process of adding Windows tiles to websites.Read More…
  • Web Design
    Prototyping Layouts With Velositey for PhotoshopVelositeybg
    180 shares
    In this tutorial we are going to walk through a free Photoshop extension called Velositey. Velositey (currently at version 2) provides common layout patterns to build website design prototypes within Photoshop.Read More…
  • Web Design
    A Deeper Look at LESS MixinsPreview
    217 shares
    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
    282 shares
    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
    402 shares
    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
    1000 shares
    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
    203 shares
    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…
Translations
  • Web Design
    Petunjuk Singkat: Jangan Lupa Viewport Meta TagPreview viewport
    277 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
    1021 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
    625 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
    693 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
    168 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
    290 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
    297 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
    552 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
    70 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…