Tag: better coding

14 Essential Tips To Deliver A Better Code

14 Essential Tips To Deliver A Better Code

For the tech professionals who endeavor to become a better programmer, there are great ways to boost your productivity and enhance your code.

To ensure an outstanding performance and deliver great productivity, developers can always follow a few consummate steps and improve their programming skills. In this article, I will offer you a list of best practices that can help you stay ahead of your competitors. By adhering to these tips, not only you will be able to augment your programming skills and speed, but you will also be able to ensure a quality code.

Let’s distill an array of useful tips that can add to your programming skills.
Continue reading

IE Market Shares - January 2014

How to help IE 8, 7, 6 more compatible with HTML5, CSS3 & MediaQueries

Since January 2014, Internet Explorer 11 availability with Windows 8.1, Firefox 26 and Google Chrome 32 has released. Have you known? IE8 is most used as web browser in IE Market Shares. As a web designer/developer, it’s always our goal to give our website visitors better experience on viewing our site. That’s why I recommend you take care of your website layouts (WordPress themes, Joomla Templates …) with old browsers, especialy for earlier versions of IE.

IE Market Shares - January 2014
IE Market Shares – January 2014. Image Copyright by The Next Web.

The following will allow your sites to quickly and almost magically work better in Microsoft’s flagship browser!

Browsers Detection

Many people don’t know this, but WordPress provides several global variables that we can use to do browser detection.. The variables WordPress provides are as follows: $is_lynx, $is_gecko, $is_IE, $is_winIE, $is_macIE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone.
If you’re not using WordPress, here is little PHP magic to detect the User Agent:

if (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 6') !== false) {
	// do something
}

We can use this result to tell the user’s browsers how to rendering your website layouts which has built with HTML5 and CSS3.

Include third-party scripts to your themes

There are 3 really helpful scripts that add better compatibility for “modern” things such as responsive design, CSS pseudo-classes and attribute selectors as well as HTML5 tags.

htmlshiv.js – HTML5 Support

The HTML5 Shiv enables use of HTML5 sectioning elements in legacy Internet Explorer and provides basic HTML5 styling for Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), and Firefox 3.x.

HTML5 Shiv is maintained by Alexander Farkas, Jonathan Neal and Paul Irish, with many contributions from John-David Dalton. It is also distributed with Modernizr, and the two google code projects, html5shiv and html5shim, maintained by Remy Sharp.

HTML5 Shiv Usage

Include the HTML5 shiv in the <head> of your page in a conditional comment and after any stylesheets.

<!--[if lt IE 9]>
    <script src="bower_components/html5shiv/html5shiv.js"></script>
<![endif]-->

HTML5 Shiv works as a simple drop-in solution. In most cases there is no need to configure HTML5 Shiv or use methods provided by HTML5 Shiv.

selectivizr.js – CSS pseudo-class support

selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your page’s &lt;head&gt; and selectivizr will do the rest.

Selectivizr Usage

To use the library, you’ll need to include one of the supported libraries:

  • jQuery (1.3+)
  • Dojo (1.5.0+)
  • Prototype (1.6.1+)
  • Yahoo UI Library (2.8.0+)
  • DOMAssistant (2.8.0+)
  • MooTools (1.3+)
  • NWMatcher (1.2.3+)

Then add the following conditional comment AFTER your stylesheets:

<script type="text/javascript" src="[JS library]"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
  <script type="text/javascript" src="selectivizr.js"></script>
  <noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]--> 

An absolute must for your modern projects. Only loaded for old IE’s.

respond.js – Mediaquery support

A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more). The goal of this script is to provide a fast and lightweight (3kb minified / 1kb gzipped) script to enable responsive web designs in browsers that don’t support CSS3 Media Queries – in particular, Internet Explorer 8 and under. It’s written in such a way that it will probably patch support for other non-supporting browsers as well (more information on that soon).

Usage Instructions

  1. Craft your CSS with min/max-width media queries to adapt your layout from mobile (first) all the way up to desktop. @media screen and (min-width: 480px){ ...styles for 480px and up go here }
  2. Reference the respond.min.js script (1kb min/gzipped) after all of your CSS (the earlier it runs, the greater chance IE users will not see a flash of un-media’d content)
  3. Crack open Internet Explorer and pump fists in delight

This isn’t the only CSS3 Media Query polyfill script out there; if you’re looking for more robust CSS3 Media Query support, you might check out CSS3 MediaQuery.js

Conditional Comments

CSS and JavaScript issues within each version of IE present us with layout and functionality issues. Luckily Internet Explorer has been supporting conditional comments which allow us to target blocks of HTML toward all IE browsers or specified IE browsers.

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9" lang="en"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->

This snippet doesn’t require or wait on JavaScript but it looks so ugliest as you’ve ever seen. While we all dislike Internet Explorer’s bugs, their conditional comment syntax provides us a perfect method for fixing them quickly because ugly or not, the fact remains that this code workers exactly as intended.

Conditional Comments Syntax Table

Item Example Comment
! [if !IE] The NOT operator. This is placed immediately in front of the feature, operator, or subexpression to reverse the Boolean meaning of the expression.
lt [if lt IE 5.5] The less-than operator. Returns true if the first argument is less than the second argument.
lte [if lte IE 6] The less-than or equal operator. Returns true if the first argument is less than or equal to the second argument.
gt [if gt IE 5] The greater-than operator. Returns true if the first argument is greater than the second argument.
gte [if gte IE 7] The greater-than or equal operator. Returns true if the first argument is greater than or equal to the second argument.
( ) [if !(IE 7)] Subexpression operators. Used in conjunction with boolean operators to create more complex expressions.
& [if (gt IE 5)&(lt IE 7)] The AND operator. Returns true if all subexpressions evaluate to true
| [if (IE 6)|(IE 7)] The OR operator. Returns true if any of the subexpressions evaluates to true.

Use Vendor Prefixes for specified browser

Using vendor prefixes will save you a lot of time without worrying if the browser supports your CSS.

Check out the following list of vendor prefixes.

  1. Safari and Chrome -webkit-
  2. Firefox -moz-
  3. Opera -o-
  4. Internet Explorer -ms-

Conclusion

And there we go. Somewhat better browser support and less headache if you want to attempt to support old version of Internet Explorer.

Top 10 Best Programing Fonts for Developers

Top 10 Best Programing Fonts for Developers

Are you a programmer? If yes, you had 3 questions with coding tools. What’s best text editor (IDE)? What’s best programming font? What’s best code color scheme? I got them like you and I spent more than 1 years to choose and using Monaco as programing font but I’m still looking for better programing font than Monaco
I’m using VIM as my default code editor, thankfully, I don’t take too much time to pick it. I felt in love with VIM after tried Emacs, GEdit, NetBean, Eclipse … but the next step to choose a good font that takes too much time than I expected.
Here is a list of my favorite programming fonts that I have tested. I’ve used Linux for 7 years, I take screenshot of each font in VIM with Full of Anti-aliasing. So I can’t really say anything about how these fonts look on Windows or Mac OS, let’s test by yourself but I guess it’s the same.
Continue reading

Git reflog is to manage the information recorded in git

Helpful Hints, Solved Common Problem to Mastering Git, GitHub

Like another developers, I’m using Git to managing my codes and use GitHub, BitBucket to storing my projects. Git is very easy to learn because you only need a basic command of Git to make the source code management utility incredibly useful but it’s not easy to master. In the process of your projects you might have some problem with Git like: Untracked Binaries, Redo reset command, redo last commit …
Here is a list of a few Git hints, tips and tricks, starting from beginner and progressing to more advanced levels that can help you solve your problem.
Continue reading

Syntax Highlighter WordPress Plugins and Services for Embedding Code

9 Syntax Highlighter Plugins and Services for Embedding Code Snippets in WordPress

WordPress is using TinyCME as default editor, so displaying code within a post is not an easy task. That is why there are some amazing developers who create plugins to make that solve this niggly issue.
However, there are some simple and effective ways to do this by use WordPress code snippet plugins or 3rd-party services there can help you maintain the original formatting of any code being inserted in WordPress posts and make your blog a lot more appealing to the readers.
Following are a list of best WordPress plugins or 3rd-party services to highlight code snippets within your blog that I have personally tried.
Continue reading

Asynchronous JavaScript

Asynchronously Javascript Loading for Social Button

Social buttons are most common methods to sharing your post to social networks like Facebook, Twitter, Google+. But after added your favourite social network script, be it like buttons or twitter widgets to your site or blog and then you notice that the load time of you page went drastically down. What happened?
Continue reading

15+ Awesome Firefox Extensions to Improve the FireBug

15+ Awesome Firefox Extensions to Improve the FireBug

FireBug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. FireBug lets you explore the far corners of the DOM by keyboard or mouse. All of the tools you need to poke, prod, and check your JavaScript, CSS, HTML and Ajax are brought together into one seamless experience, including a debugger, error console, command line, and a variety of fun inspectors.

15+ Awesome Firefox Extensions to Improve the FireBug
15+ Awesome Firefox Extensions to Improve the FireBug

Well, it can do more than you could ever imagine with all these FireBug extensions which improved your work. FireBug extensions typically come in the form of Firefox add-ons. In this post, I have found 15 extensions that will boosts your web development speed!
Continue reading

The Essential Google Chrome Extensions for Web Designers

The Essential Google Chrome Extensions for Web Designers

Have you ever read our The Essential Web Browsers Extensions for Web Developers series? And now, you can read about The Essential Chrome Extensions for Web Designers.

Google Chrome is a web browser developed by Google that uses the WebKit layout engine and application framework. It was first released as a beta version for Microsoft Windows on 2 September 2008, and the public stable release was on 11 December 2008. The name is derived from the graphical user interface frame, or “chrome”, of web browsers. As of August 2010, Chrome was the third most widely used browser, with 7.54% of worldwide usage share of web browsers, according to Net Applications.

The Essential Google Chrome Extensions for Web Designers
The Essential Google Chrome Extensions for Web Designers

We’ve taken some of most useful Chrome Extensions which may help for your works.
Continue reading

Rounding Up the Most Promising Free WYSIWYG and Markup Editor

Rounding Up the Most Promising Free WYSIWYG and Markup Editor

WYSIWYG is an acronym for What You See Is What You Get. The term is used in computing to describe a system in which content displayed during editing appears very similar to the final output, which might be a printed document, web page, slide presentation or even the lighting for a theatrical event.

Rounding Up the Most Promising Free WYSIWYG and Markup Editor
Rounding Up the Most Promising Free WYSIWYG and Markup Editor

WYSIWYG implies a user interface that allows the user to view something very similar to the end result while the document is being created. In general WYSIWYG implies the ability to directly manipulate the layout of a document without having to type or remember names of layout commands. The actual meaning depends on the user’s perspective, e.g

Most of the available Content Management System and other publishing platform in the web are using WYSIWYG editor for easy page editing. So I will rounding up to you the most promising Javascript WYSIWYG editor in the web.
Continue reading