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.
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. (API was deprecated, see my UPD below)
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:
<audiosrc="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:
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:
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?
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.
This is my new web experiment with JavaScript, jQuery and Dribbble API – called “Dribbble Genealogy“: (API was deprecated, see my UPD below)
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.
