Nadi Dikun    Interface Mechanics
   About    Contact   

Freebies

From time to time I publish front-end freebies. Feel free to use them for your projects. I’d be glad to hear back from you!


Dribbble Profile v2.0 with one line of code

Awesome news for Dribbble players! My free and open-source Dribbble Profile has got a major update. You can now use it on your website simply by adding one line of code.

Dribbble Profile card widget screenshot

New features

Aside from some UI and CSS love, the code base was almost completely re-written to get rid of all third-party library dependencies. So, right now, this widget is written in vanilla JavaScript (no jQuery, and nothing else to worry about!).

To make it even more user-friendly, I decided to make it as a one-line library. So now, to add this widget on a page, you only need to insert one line of code in the place where your Dribbble card should appear.

Here is a live example on my blog’s About page. I’m using Jekyll for my blog, but you can use it with WordPress or any other platform.

So how is it possible?

Read more


Paper audio player made with Polymer 1.0

I hope you’ve noticed that this summer the Polymer team has shipped the production-ready version 1.0 that was announced during Google I/O 2015. Polymer is a shim for a new and young web standard called Web Components, which enables us to create completely custom HTML elements.

Here is an example

Let’s check the default <audio> element. The code we use for inserting any audio file into a web page is really simple and self-explanatory:

 <audio src="file.mp3"></audio>

And it always looks like this:


Now, what the Web Components standard - together with Polymer - enables us to do is to create a custom element that we could use in a similar way to the default version above:

 <paper-audio-player src="file.mp3"></paper-audio-player>

However, it could have a custom design, additional features and behavior:

Paper audio player screenshot

Paper Audio Player

I created the Player above as an opensource element, so you can use it in your next project. Check out its live demo here.

Read more


Custom responsive grid-based CSS framework

These days I’ve been re-developing my online portfolio, so it is mobile friendly and more interactive. This work hasn’t been finished yet, so here is a sneak peek:

Nadi's portfolio sneak peak

As you can see, it has a pretty uncommon timeline-based structure, which divides the screen into two equal 50% width columns. Each of these columns contains separate projects and events, that have their own <sections> with different data inside. The main question for me was - how to properly structure all of them to build a sustainable DOM structure that would be responsive and would allow me to load all my projects using JSON in the future?

Quite an interesting challenge, right? :)

Read more


How to validate CPF number using custom method in jQuery.validate plugin

Last week, I polished the subscription process of an app that I’m currently working on for better validation and more friendly UI/UX.

During the subscription this form collects a non-confidential CPF number, which is the Brazilian analog of SIN (Canada) or SSN (USA). This information is critical to be verified upfront, so it’s required to be checked during subscription process, on a client side.

The entire subscription form is being validated by jQuery.Validate plugin, which has many of options for verification, such as digits only, min/max number of characters or even built-in methods for credit card validation.

Certainly, this plugin doesn’t have a built-in method for CPF number validation, since it’s very rarely needed. So I decided to write a custom method for its validation.

Read more


Dribbble Genealogy: Meet your Dribbble ancestors

This is my new web experiment with JavaScript, jQuery and Dribbble API – called “Dribbble Genealogy“:

  • If you’re, by any chance, a Dribbble Player, you can enter your username to generate your own dribbble genealogy.
  • If not, you may use my username – Rork, or try these IDs to check the functionality: 14392, 2942, 38531, 1433, 34963.

This time, I’m connecting to API directly with AJAX requests using JSONP without Jribbble library I used before. So I’m going to do some re-work of Dribbble Profile too and add its dependency-free version to Github in some time.

Dribbble Genealogy screenshot

Here is the Github repo.