Possible Web Trends 2016

Fonts Icon
I realized that when we talk about icons, it’s easy to take for granted some topics which we have been dealing with in the past. Back in the days when we used image replacement in our css code from all the Menus with all special fonts and menus with icons.
Thanks to Google Fonts and the rise of icon fonts sharing, we can easily create and used web safe fonts and scalable icon fonts.

Here are some of the familiar web sharing fonts-icon:
https://icomoon.io/app/#/select
https://glyphter.com/
http://fontastic.me/
http://www.flaticon.com/

Node.Js
I always read the vulnerability of node.js, will it will be the next Jquery… But what is node.js? Node.js is an open-source, cross-platform runtime environment for developing server-side web applications. Node.js applications are written in JavaScript and can be run within the Node.js runtime on OS X, Microsoft Windows, Linux, FreeBSD, NonStop, IBM AIX, IBM System z and IBM i.

While the Jquery is for Dom manipulation. The browser parses your DOM every time you load the page, so it’s not a framework issue. AngularJS is build around jqLite, which is in fact a ligher version of jQuery, so I don’t think how it could be faster. Another thing is what operations did they counted? Angular is a totally different thing than jQuery. Angular is a complex MVVM framework, while jQuery is just a library for easier and browser independent DOM manipulation.

RESS
What is RESS? Responsive Design + Server Side Components – browser-detection can be used to help inform an overall responsive design as opposed to being the be-all-end-all for templating. By this I mean that partial pieces of content can be inserted intelligently and where appropriate (think images) into a larger layout that’s given to all browsers and is governed by responsive design principles. Hence the combining of “responsive design” and “server side components” in Luke’s name for the technique.

Know more about RESS
http://www.creativebloq.com/responsive-web-design/getting-started-ress-5122956
http://detector.dmolsen.com/demo/mustache/

Lightening Your Responsive Website Design With RESS

What is SaaS?

Software as a service (or SaaS) is a way of delivering applications over the Internet—as a service. Instead of installing and maintaining software, you simply access it via the Internet, freeing yourself from complex software and hardware management.

SaaS applications are sometimes called Web-based software, on-demand software, or hosted software. Whatever the name, SaaS applications run on a SaaS provider’s servers. The provider manages access to the application, including security, availability, and performance.

SaaS implementation is no longer a specialized option. Decision makers in the IT industry now consider SaaS mainstream, possibly basing this observation on the growth rate for adoption being in the double-digits. Demand for applications shows no signs of decreasing, especially with benefits such as low upfront costs, acceptance by end users, faster deployment, and frequent upgrades.

Easily identifiable are four strategies that businesses can capitalize on to take advantage of this application phenomenon. Carefully considering the following strategies will ensure you are informed after you have made the decision to integrate SaaS implementation into your business.

Codestuff launched Cargoed.com – Cargo and freight forwarders directory and news. Aside from helping the Cargo industries to bring online client, Cargoed.com will also provide web design, web hosting and wordpress cms website. Codestuff.com and Cargoed.com is all about helping cargo industries to focus more on their core business, reduce costs and save time managing their web presence.

Learnable Design and Programming

As the web continues changing and evolving for time to time, the divisions between design is now more specific, the birth and increasing demand for specialized discipline makes the both designer and developer broaden their discipline.

During the days that I’ve looking for a job, I notice that applied on more specialized disciplines, but in reality they are looking for someone whom can understand and can do both disciplines. Like when I applied for Senior Front End Developer they expecting that I can code in Laravel and CodeIgniter. There is almost no such thing as full pledged web developer or web designer. Web designer becomes visual designer, user experience designer, visual artist, creative manager or etc. While web developers become HTML5 Developer, Laravel Developer, PHP Developer, Android Developer, iOS Developer or etc. The sad part is the Employer want someone that have experience in all this area, they expected their future employee to understand and can code on each disciplines.

The person knowledge is far more transferable than any one programming language or design principle. But yet, we have to decide to keep on learning. Design and Programming are learnable. We often think of a programming environment or language in terms of its features — this one “has code folding”, that one “has type inference”. This is like thinking in terms of its words — this book has a “fortuitous”, that one has a “munificent”. What matters is not individual words, but how the words together convey a message.

Likewise, a well-designed system is not simply a bag of features. A good system is designed to encourage particular ways of thinking, with all features carefully and cohesively designed around that purpose. The trick is to see through them — to see the underlying design principles that they represent, and understand how these principles enable the programmer to think.

“We should all be striving to learn, but the question remains, what exactly should we learn? Maybe it isn’t as simple as “learn to develop” or “learn to design,” but is about learning to communicate and collaborate, to respect the nuances of each other’s craft — and the artistry and reason that they both demand in equal measure — without attempting to master it for oneself.” – Ivana McConnell

Trigger your Dom Element via Waypoints

What is Waypoints?

Waypoints is the easiest way to trigger a function when you scroll to an element. Waypoints directory contains builds for jQuery and Zepto, as well as a version with no framework dependencies. For more information about waypoints is here.

Basic Waypoints coding

var waypoint = new Waypoint({
element: document.getElementById('basic-waypoint'),
handler: function() {
notify('Basic waypoint triggered')
}
})

Benefits of Waypoints
Webpage when you scrolled down when site tagline section comes to the middle of screen, each of the social icons should dynamically get a ‘animate’ class. Social icons with this class to rotate 360o in a smooth manner. In the waypoints initialization script, we are making the widget title to fade in after 1.5 seconds and the widget text to fade in after 3.5 seconds.

How to used Waypoints

$(function() {
//ELEMENT called DIV
$('.element').waypoint(function() {
$('.element').addClass('animated bounceInLeft'); //Add the animate.css
}, {
offset: '50%'
});
});

The future of Drag and Drop WordPress

As a WordPress Designers, I always creating so simple design that just about anyone could use it. A year ago I saw the first few drag and drop wordpress template. I was been so excited back then. I can do thousand of possibilities in one website and not losing my creativity. Dreaming of creating perfect layouts that match the client requirement without coding.

As a web developer, I was also crazy about delivering a perfect site with flawless functionality, based on the client requirements then deliver it to a customer and the left alone. I want to live the rest of my life without constant clients call, tweaking back and forth.

We need meet halfway on this thing, I believe the future of WordPress Core is drag and drop, but not right now. WordPress themes do not have any drag and drop functionality to build layouts right out of the box. Most of these drag and drop themes heavily rely on plugin or theme specific WordPress shortcodes to output complex DOM structures for rows, columns, containers and widgets. By using such a theme or plugin your theme is becoming reliant on these shortcodes. Drag and drop theme entire frontend presentation of the layout is reliant on the plugin to output the code, once you detouch everything, you will have a constant called on your client.

Its not a secret drag and drop wordpress theme have large nested structures make things like code clarity and debugging harder. A large number of nodes also can lead to slower sites.

A designer friend of mine, used a popular drag and drop WordPress, ends up asking me to fixed his client website and remove the client access to the Theme Builder. He told me that he will go back to Starter Theme again and create a theme based on his client requirement only.

Under promise, under pressure….

Under-promise and over-deliver. How many times have you heard that phrase? Chances are if you’ve been in coding business longer than a year, you’ve heard it at least once if not a dozen times.

As a web developer, we tend to have a wikipedia syndrome, yes I know we are all smart. We never be in the Coding Arena if you are not. A decent programmer has probably an IQ of 125. But sometimes, some of us tend to make over promises and we can do it all syndrome. Yes most probably you can do it and maybe you know someone can help you doing it. But what if???

It’s not the over-delivering part that is dangerous. Over-delivering and WOW-ing your client is good business. It increases client satisfaction, repeat business, and word of mouth which all leads to referrals. You can never add too much value for your clients.

It’s also not the commitment part that is trouble. You must make promises you can keep. This is common sense at it’s best.

A good programmer measure everything, his time, resources, environment and of course skills.

Promises You Intend To Keep
In order to commit with integrity, you must intend to keep your promise, make an under promise statement and you will have less pressure. This implies that you must believe the following:

1. You understand the project. If you don’t understand the conditions of satisfaction (including time), then you cannot expect to fulfill them. You are signing a contract that you haven’t read.

2. You have a robust plan. If your plan can be derailed by likely contingencies, then you cannot expect it to withstand their impact. You are hoping for the best, but not preparing for the worst.

3. You have the necessary skills and resources. If you don’t have the required skills and resources, then you cannot expect to finish the job. You are writing a fraudulent check with no funds in your account.

The Upcoming WordPress 4.0

WordPress 4.0 Beta Edition

Lets take a tour on what’s new on WordPress released the first release candidate (RG) for the upcoming WordPress 4.0 version.

Media Library — now has amazing GRID View in addition existing list view.
Wordpress 4.0 Media Library
Previews on Media — WordPress.tv and YouTube video can easily input on embedding via URLS in the visual editor.
Wordpress 4.0 Media URL
Plugin Installation — Layout and visual changes made as well as more information when searching for plugins and details
Wordpress 4.0 Plugin
Language — A better internationalization language for non-English country on installation
Wordpress 4.0 Language
TinyMCE — Better and more friendly Blog posting and editing GUI with keyboard shortcut.
Wordpress 4.0 TinyMCE
Widgets in the Customizer — The new WP version has now put all widgets into a sub-section of the customization screen. This essentially minimizes them when not needed — a welcome UI improvement for sure!
Wordpress 4.0 Widgets in the Customizer

POSTED ON WORDPRESS.ORG
“Developers, please test your plugins and themes against WordPress 4.0 and update your plugin’s Tested up to version in the readme to 4.0 before next week. If you find compatibility problems, please be sure to post any issues to the support forums so we can figure those out before the final release. You also may want to give your plugin an icon, which we launched last week and will appear in the dashboard along with banners.”

Simple website planning

“If you can’t explain it simply, you don’t understand it well enough” Albert Einstein

Often time, as a veteran web developer have a common problem with any Web project, failure to plan. The same issues come up repeatedly in every website project, in order to help our client, our team or ourselves. I recommend to use the 3×3 method.

The three by three (3×3) method is consist of 3 boxes, each with three lines underneath.
Sketch a simple illustration in the boxes, then write 3 words on the lines underneath. Explain what, why and how.

Blank 3x3 Method

What– what does your product do? what is your primary goal for building an online presence? (Market Research)
Why – Why people need your product? what’s the benefit? Make a good heading, slogan, good tagline or statement
How – How is a differentiator. How can we attract your target audience? Perhaps an innovative piece of functionality or a cost indicator.

Don’t be deceive, this is hard work. By constraining yourself to an extreme level, you’re forced to boil down your product and website to its bare fundamentals.
Your use of language has to change. Do away with determiners and adjectives and concentrate on verbs and nouns, whilst avoiding lists and maintaining a semblance of a sentence for each panel.

This is the first part of the exercise, designed to help you establish what the core of your product or website offering is.

Responsive website with Matchmedia

Media queries is a great tool, but we often got a problem on loading time and optimization. Often time our website load all the things – even when they don’t apply.

Scott Jehl, Paul Irish, Nicholas Zaka attempts to optimise the loading of CSS based on viewport size and other factors. By using matchMedia() polyfill, we can now test whether a CSS media type or media query applies. Check out Paul Rhayes how to’s, experiment and Christian Hielmann Demo.

Your CSS

.mq {
  -webkit-transition: width 0.001ms;
  -moz-transition: width 0.001ms;
  -o-transition: width 0.001ms;
  transition: width 0.001ms;
  width: 0;
}

Javascript Event Listener

mql = (function(doc, undefined){

  var bool,
      docElem  = doc.documentElement,
      refNode  = docElem.firstElementChild || docElem.firstChild,
      idCounter = 0;

  return function(q, cb) {

    var id = 'mql-' + idCounter++,
      callback = function() {
        cb({ matches: (div.offsetWidth == 42), media: q });
      },
      div = doc.createElement('div');

    div.className = 'mq';
    div.style.cssText = "position:absolute;top:-100em";
    div.id = id;
    div.innerHTML = ' #'+id+' { width: 42px; }';

    div.addEventListener('webkitTransitionEnd', callback, false);
    div.addEventListener('transitionend', callback, false); //Firefox
    div.addEventListener('oTransitionEnd', callback, false); //Opera

    docElem.insertBefore(div, refNode);
    //don’t delete the div, we need to listen to events
    return {
      matches: div.offsetWidth == 42,
      media: q
    };
  };

})(document);

Javascript on the page

$(function() {
  var $dynamic = $('.dynamic');
  mql('all and (max-width: 700px)', change);
  mql('all and (max-width: 500px)', change);
  mql('all and (min-width: 1200px)', change);

  function change(mql) {
    console.log(mql);
    $dynamic.prepend('

' + mql.media + ' — ' + mql.matches + '

'); } });

How to create your own Jquery Modal

Basic modal need a simple and easy code, sometimes it’s more appropriate to create your own than a full featured modal or lightbox plugin. This are guide to have an Instant Modal or you can check out the result here »

HTML

<div id="question"><h1>Question???</h1></div>
<div class="contactdet">
<div class="contactformfooter">
<div id="close">Close</div>
<h1>ANSWER</h1>
</div>

CSS

#question {cursor:pointer;}
.contactdet{display:none; background:#aaa; width:100%; height:100%; 
position:fixed; top:0; z-index:99999;}
.contactformfooter {width:240px; height:240px; position:relative; margin:10% auto 0 auto; padding:20px; border:1px #000 solid; background:#fff;}
.contactformfooter p{padding-bottom:10px; line-height:20px; font-size:12px;}
#close {width:50px; height:50px; position:absolute; right:-25px; top:-25px; cursor:pointer; background:#333; color:#fff;}

jQuery

jQuery( "#question" ).click(function() {
	jQuery(".contactdet").show();
});

jQuery( "#close" ).click(function() {
	jQuery(".contactdet").hide();
});