css

Using "flex" property in CSS to define webpage layout

Designing a flexible layout which can scale to different screens on many devices is non-trivial. We often use float, position: absolution or other properties to achieve the desired result. However this process is uncomfortable to developers and we always dream of a better way. Today, I want to introduce to…

Customize File upload control

Unlike other form controls such as textbox, checkbox or radio button, you'll find it hard to customize file upload control. The look and feel of this control is totally managed by the rendering browser. A simple customization like changing the button color or remove the text "Choose a file" seems…

Correct configuration to fix CORS issue with CloudFront

If you are using CloudFront for hosting static assets and having trouble with the CORS which prevents the icons from displaying properly on your website, in this post, I am going to show how to resolve this issue. As you have already known, the main cause of CORS issue is…

Custom dialog for data-confirm in Rails

Every Rails developers might be already familiar with data-confirm attribute for a link. It is used to ask for user confirmation before executing the action on behalf of user. Here is one example <%= link_to "Delete", post_path(post), method: :delete, confirm: "Are you sure?" %> The generated link…

Get width/height of invisible DOM elements

When working with elements in jQuery, you might need to get width/height of certain invisible DOM elements. By default, jQuery would return 0 in this case because it can not calculate the actual height() of that element. In order to solve this problem, I take advantage of jquery.actual…