This is a forum for all types of discussion about user interface and front end technologies created by Ashis Kumar Mohanty, a creative UI Developer and Designer from INDIA.
To view my complete list of works please visit to the Portfolio Section of the website.
As we all know JavaScript is becoming so popular day-by-day and used almost in all the spaces. A beautiful JavaScript chart would be the best way to visualize data in the form of beautiful, easy to understand, interactivity. They make it easier to extract and convey key patterns and insights that are often not apparent with static charts.
I have been working with JavaScript for long time and worked with various charts all over the time. The below listed free and open source JavaScript chart libraries help you to find the best JavaScript charting library for creating beautiful charts.
D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.
Best for : Experts level not afraid to code.
License: Open-source. Free for all uses.
Google chart tools are powerful, simple to use, and free. The Google Visualization API allows you to create charts and reporting applications over structured data and helps integrate these directly into your website. There is an active Google Charts forum where users help one another learn and discover the best ways to convey information graphically.
Best for : Any level.
License: Free for all uses but not open-source. Google’s licensing does not allow to host their JavaScript files on your server.
Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features. Well documented and works with Internet Explorer 6+, Chrome, Firefox 2+, Safari 3+ and Opera 9.5+
Best for : Intermediate and Beginners.
License: Free.
This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via JavaScript. The plugin has no dependencies other than jQuery and compatible with most modern browsers and has been tested with Firefox 2+, Safari 3+, Opera 9, Google Chrome and Internet Explorer 6, 7, 8, 9 & 10 as well as iOS and Android.
Best for : Any level.
License: Free.
Morris.js is the library that powers the graphs on http://howmanyleft.co.uk/. It’s a very simple API for drawing line, bar, area and donut charts.
Best for : Any level.
License: Free.
Although it has very few options but very simple yet flexible JavaScript charting for designers & developers. ChartJS charts are responsive by default. They work well in mobiles and tablets. With 6 different types of core charts out of the box (core, bar, doughnut, radar, line, and polar area), ChartJS is definitely one of the most impressive open source charting libraries in recent times.
Best for : Any level.
License: Free.
HTML sanitization is the process of examining an HTML document and producing a new HTML document that preserves only whatever tags are designated “safe” and desired. HTML sanitization can be used to protect against cross-site scripting (XSS) attacks by sanitizing any HTML code submitted by a user. Source – Wikipedia
In an HTML context, data is written into an HTML page as part of the content, for example inside a <p> tag.
In attribute context, user data is included as the attribute value of an HTML tag.
In attribute context, user data is included as the attribute value of an HTML tag. For event handling attributes like onmouseover, onclick, onfocus, onblur or similar, you need to be more careful. The best advice is to never ever put input data directly into an event handler.
A special case of the attribute context is URL context. The value of the href and src attributes of various elements are URLs and need to be treated as such.
If input data needs to be written out in a JavaScript context, i.e., within <script> tags or in a file served as the src attribute of a <script> tag, the data should be JSON encoded.
Internet Explorer is the only major browser around that allows script execution within CSS using the expression syntax (deprecated and no longer supported in IE8 and later).
For further examples and more detailed information visit to Smashing Magazine.
These below steps will help you to remove index.php in CodeIgniter framework using .htaccess.
Open the file config.php located in application/config path. Find and replace the below code.
// Find the below code
$config['index_page'] = "index.php"
// Remove index.php
$config['index_page'] = ""
Go to your CodeIgniter folder and create a .htaccess file.
Path: Your_website_folder/application/assets/system/user_guide/.htaccess
Add the below code in .htaccess file. Before this make sure you have mod_rewrite is enabled.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]
<IfModule>
In some cases the default setting for uri_protocol does not work properly. To solve this issue just open the file config.php located in application/config and then find and replace the code as:
// Find this line
$config['uri_protocol'] = "AUTO"
// Change it to
$config['uri_protocol'] = "REQUEST_URI"
Now your setup is complete. Access this url “http://localhost/ci/welcome” for a test run. You should be able to access this without index.php in url.
XAMPP installation sets default password empty for MySQL phpmyadmin on localhost. This is mostly recommended to set a password to the user root to make it more secure. To reset XAMPP MySQL root password through SQL, follow these below steps:
UPDATE mysql.user SET Password=PASSWORD('password') WHERE User='root';
Now you should be able to access phpmyadmin using your new password 🙂
You all know how to use CSS property “overflow: scroll / auto”. What about a touch enabled device, a tablet or a mobile phone??? Basically mobile browsers sometimes don’t respect “overflow” property correctly. The CSS property “-webkit-overflow-scrolling” fix this issue. Even it added a smooth and momentum scrolling to your block specially noticed on iOS devices.
Code:
-webkit-overflow-scrolling: touch; /* lets it scroll lazy */ -webkit-overflow-scrolling: auto; /* stop scrolling immediately */
The -webkit-overflow-scrolling CSS property controls whether or not touch devices use momentum-based scrolling for the given element.
Note: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future. Source: MDN
Chrome is one of the best browser ever known for web developers for its speed and extensibility. Now due to its large number of awesome extensions it’s becoming popular day-by-day.
Browser extension extends the functionality of a web browser in some way. Depending on the browser and the version, the term may be distinct from similar terms such as plug-in or add-on. Browser extensions can change the user interface of the web browser without directly affecting view-able content of a web page; for example, by adding a “toolbar.” Source: Wikipedia
Here are some of the handpicked must have chrome extensions that can make a web designer or developer life better.
Colorpeek is a tiny web app for quickly seeing and sharing CSS colors. The extension can parse colors from three different sources:
1. Text selections (hex values you received in an email, for example)
2. Prominent colors in an image
3. CSS colors used on a webpage
Great for designers, developers, or anyone tired of spelunking through web inspectors, opening up Photoshop or hunting and pecking with an eyedropper just to grab color values. Try the web app at http://colorpeek.com
Eye Dropper is open source extension which allows you to pick colors from web pages, color picker and your personal color history. It allows you to pick color from any webpage or from advanced color picker. It is great tool for web developers.
Eye Dropper is available on http://eye-dropper.kepi.cz
Explore fonts within a website and try them! Fontface Ninja is a new plugin you can install in your browser to recognize and try any font on the Internet!
Fontface Ninja is totally free and available on http://www.fontface.ninja
The BuiltWith Chrome Extension lets you find out what a website is built with by a simple click on the builtwith icon!
BuiltWith is a web site profiler tool. Upon looking up a page, BuiltWith returns all the technologies it can find on the page. BuiltWith’s goal is to help developers, researchers and designers find out what technologies pages are using which may help them to decide what technologies to implement themselves. Builtwith available on http://builtwith.com.
Select a screen resolution and this extension changes the browser size to match it. Screen resolution tester resizes the browser window for developers to view their websites in different screen resolutions. It uses a pre-defined list of screen resolutions from netmarketshare.com, which compiles the data from tens of millions of users each month.
Visit website http://www.hitslink.com.
This extension helps develop your websites with per pixel accuracy!
Extension for web developers and markup designers.
This extension allows developers to put a semi-transparent image overlay over the top of the developed HTML and perform per pixel comparison between them.
Find it on GitHub! https://github.com/WellDoneCode/perfectpixel
The best friend of every Bootstrap user. Get a grid overlay on your website with a single click. With bootstrap Grid, developing websites with Twitter’s Bootstrap (http://getbootstrap.com) is even more easy. The extension allows to draw a grid on every website, so it’s very easy to see if all elements are at the right spot.
Find it here on Chrome web store.
Display web pages using IE within Chrome. Supports ActiveX controls, Sharepoint, ICBC, alipay. A “Top 10” extension since 2009. It exactly emulates IE by using the IE rendering engine directly within Chrome. This will enable you to use ActiveX controls and test your web pages with different versions of IE (IE6, IE7, IE8, or IE9).
IE Tab available on http://www.ietab.net.
Draw a ruler to get pixel dimensions and positioning, and measure elements on any web page. Page Ruler lets your draw out a ruler to any page and displays the width, height and position of it.
Page Ruler is available on http://blarg.co.uk/tools/page-ruler
Screen capture for all or part of any web page. Add annotations, comments, blur sensitive info, and share with one-click uploads. Capture all or part of any web page. Add annotations, comments, blur sensitive info, and share with one-click uploads. Now with free desktop capture!
Awesome Screenshot is available on http://www.awesomescreenshot.com
UX Check makes heuristic evaluations quick and easy. The extension will open up Nielsen’s Ten Heuristics in a side pane next to your website. When you click on an element that doesn’t comply with a heuristic, you can add notes, and a screenshot will be saved. At the end, you can export everything to a docx so that you can share them with your team. Visit website http://www.uxcheck.co.
The freshest links about design and interactive, from around the web. A designer’s must! Simple and beautiful. Bringing you the freshest design, UI, UX and interactive news and shots from around the web. All the design inspiration you need. http://muz.li/
This extension shows a styleguide for the current page. As a designer, a developer, or anybody who hearts the web, you have a curiosity to find out what others are doing to make awesome websites. SNATCHR is your new best friend.
With one click, SNATCHR peeks into the stylesheets of the website that you are currently on, grabs the information, and show the styleguide to you.
SNATCHR styleguide includes Background Colors, Type Colors, and Typographical information.
A tool for designers to measure screen dimensions. Measure between the following elements: images, input-fields, buttons, videos, gifs, text, icons. You can measure everything you see in the browser.
Mockups – Your designer handed you mockups as PNGs or JPEGs? Just drop them into Chrome, activate Dimensions and start measuring.
Keyboard Shortcut – For the best experience set a keyboard shortcut in the Extension Settings to quickly enable and disable Dimensions.
Dimensions is Open Source and hosted on Github.
Generate random corporate double-speak for use as filler text. A lorem ipsum generator with a corporate bent. Generates filler content by the word or paragraph.
There are many ways for discovering what particular font is being used on a website, but this extension is perhaps the simplest method. With What Font all you have to do is hover over any HTML text and the extension will let you know the fonts name. It also detects the services used for serving the web fonts. Supports Typekit and Google Font API.
Visit website http://chengyinliu.com/whatfont.html
Hide stock photos from Google Images. Use the StockBlocker extension to hide stock photos from Google Images search results.
Visit website http://stockblocker.org
A lightweight screen recorder for Chrome. Capture, edit and share screencasts in seconds.
Capture your entire desktop, browser tab or webcam. Narrate with your built-in or external microphone, and embed your webcam to add a personal touch. During your recording, annotate with our pen tool. Then crop and trim your clip in our browser-based editor. Your recordings will automatically save to your Google Drive. Publish them directly to YouTube or share the link with your audience.
Visit website https://www.screencastify.com
With Nimbus Note you never forget or lose valuable information ever again! Create and edit notes, save web pages, customize screenshots and instantly share them with your friends and coworkers. Information important to you follows you everywhere you go for instant access anytime, anywhere.
Visit website http://nimbus.everhelper.me/screenshot.php
In computing, a character encoding is used to represent a repertoire of characters by some kind of an encoding system. Depending on the abstraction level and context, corresponding code points and the resulting code space may be regarded as bit patterns, octets, natural numbers, electrical pulses, etc. A character encoding is used in computation, data storage, and transmission of textual data. Terms such ascharacter set, character map, codeset or code page are sometimes used as near synonyms; however, these terms have related but distinct meanings – Wikipedia
All the modern web browsers automatically detects character encoding.
JavaScript is a high-level, dynamic and interpreted programming language. It has been standardized in the ECMAScript language specification. It is very lightweight and designed for creating network-centric applications. JavaScript is very easy to implement as well as to learn. It is open and cross-platform.
It is also used in game development, the creation of desktop and mobile applications, and server-side network programming with run-time environments such as Node.js.
Security – Because the code executes on the users’ computer, in some cases it can be exploited for malicious purposes. This is one reason some people choose to disable JavaScript.
Can not write to files on the server – You cannot directly write to a file on the server side without actually sending an AJAX request that runs a server side script
to do that for you. However, its also a good thing at the same time that you cannot write your files to the server as it raises an additional security concern.
Browser compatibility- JavaScript mostly depends on the web browser. As different browsers interpret JavaScript differently using their own JavaScript Engines. You have to write cross browser codes to support all browsers. Sometimes your application may behave differently in different browsers.
Reliance on end user – JavaScript is sometimes interpreted differently by different browsers.
JavaScript can be disabled – All the browsers provides option to disable JavaSript to run by the user due to specific security reasons. If your website is highly dependent on JavaScript codes it is sometimes difficult to support to run your web app.
No back-end interactivity without any server-side scripting – JavaScript cannot access back-end databases unless you use AJAX and a server side script. However modern approach like Local Storage, allows JavaScript to access client side databases.
Not Search Engine Friendly – The primary issue of using JavaScript is search engines. While Google tries to execute and understand JavaScript, client-side code is still not fully search engine friendly. A web application that depends on too much JavaScript can make it difficult for SEO. Search engines require content to interpret and rank your web pages, and too much JavaScript renders code and nothing is readable for bots.
You can achieve this using either a simplest way or by the index of the dropdown option.
You have a select drop-down as shown below.
<select id="my-dropdown">
<option value="0">Please Select</option>
<option value="ui">UI Designer</option>
<option value="ux">UI/UX Developer</option>
<option value="php">PHP Programmer</option>
</select>
and you want to select a option “ux” (based on its value) using jQuery.
Simplest Way
$('#my-dropdown').val('ux');
By the index
$('#my-dropdown>option:eq(2)').attr('selected', true);
//You may use prop also
$('#my-dropdown>option:eq(2)').prop('selected', true);
where 2 is the index of the option you would like to select.
Obviously this is not a good idea to prevent user from those default functionalities provided by browser. But in some cases we had no choice rather than prevent browser zoom feature from both keyboard and mouse. This can be achieved by the help of JavaScript.
You can try out with any one the JavaScript code snippet provided below:
//Prevent zoom while using ctrl and mouse wheel
$(window).bind('mousewheel DOMMouseScroll', function(e)
{
//ctrl key is pressed
if(e.ctrlKey == true)
{
e.preventDefault();
//Your logic here
console.log("Zoom Feature Disabled. ctrl+Mousewheel Pressed");
}
});
$(window).keydown(function(event)
{
if((event.keyCode == 107 && event.ctrlKey == true) || (event.keyCode == 109 && event.ctrlKey == true))
{
event.preventDefault();
//Your logic here
console.log("Zoom Feature Disabled. ctrl+Mousewheel Pressed");
}
}
NOTE: Some cases replacing document with windows works well.
UI Tricks 