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();
});	

Tweeter Embed How tos

Starting in WordPress 3.4, WordPress added Twitter as an oEmbed provider. What this means is that you don’t need to install any plugins or configure any settings.

Simply go to Twitter and find the tweet that you want to embed. You need to get the URL of that status. When you click on the tweet, it will expand and show you several options. Click on the Details link. Just get the url something like this “https://twitter.com/applebyte/statuses/492639776319614976” and it will gives the result below.

 

CSS3 Filters

CSS3 Filters are a powerful tool that web authors can use to achieve interesting visual effects. Originated as part of the Scalable Vector Graphics (SVG) specification. Browser vendors such Mozilla, Chrome, Opera and IE added SVG capabilities. It now realized effectiveness and usefulness of filters when it became popular on Front End Developers and Designer. IE’s deprecated their own old CSS Filters to adopt the changes on CSS3 on their IE latest version.

CSS3 Filters, check the Compatibility and W3 Samples includes the following:

filter: blur(0px);
filter: brightness(1);
filter: contrast(1);
filter: url(0);
filter: drop-shadow(0);
filter: grayscale(0);
filter: hue-rotate(0deg);
filter: invert(0);
filter: opacity(1);
filter: sepia(0);
filter: saturate(1);
filter: custom(); – Check Here

Tutorials
Understanding the CSS Filters

Load Function of Jquery

I have encountered a bug on ie8, a css navigation to fadein once the flash was loaded. I have used the geturl function, the css navigation second level wasnt properly working.

Then, I google the on load function and other possibilities to load the navigation. Jquery have already load function that very useful. The load method is the simplest way to fetch data from the server.

Example 1: Load once the flash element was loaded or the whole html loaded.

$(document).ready(function(){
$(window).load( function () {
$('#myLoad').fadeTo(0, 1);
})
.end();
});

Example 2: As preloader

$(document).ready(function(){
$(window).load( function () {
$("#preloader").fadeOut(2000); THE PRELOADER
$("#image_container").fadeIn(3000); THE IMAGES
});
})
.end();
});

The magic of get url

Yup, to combined flash to Jquery used the get url..

1. On Flash
AS2

stop();
getURL("javascript:applebyte();");

AS3

stop();
import flash.external.ExternalInterface;
ExternalInterface.call("applebyte");

2. On CSS

.applenav {
display:none;
margin-top:0;
}

2. On Jquery

function applebyte()
{
$('.applenav').fadeTo('slow', 0.1, function() {
$(".applenav").animate({"margin-top": "215px"}, 1000).fadeTo('slow', 1);
// Animation complete.
});
}
$(document).ready(function() {
});

Applebyte Preloader AS3

1. Create your movieclip and textfield. For this recipe, you’ll need a simple rectangle, and a dynamic textfield

b. lpc (Dynamic Txt) – make sure this is embed to character range
c. loadBar (desire length)

import flash.display.*;
this.stop();

this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, appleLoader);

function appleLoader(event:ProgressEvent):void {
var pcent:Number=event.bytesLoaded/event.bytesTotal*100;
lbar.scaleX=pcent/100;
lpc.text=int(pcent)+”%”;
if(pcent==100){
this.gotoAndStop(2);
}
}

Apple Flash AS2 Preloader

How to make simple preloader?

Preloader are the simplest to design but hardest in script. There are so many different ways to build a preloader in Flash and each variation has it’s advantage and specialist use. This is the most simple of all.

1. Create a movie clip with instance name preloader with the ff:
a. Loading (static)
b. Percent (Dynamic) – make sure this is embed to character range
c. Bar (tween to desire length)

2. Select the movie clip the copy this code

onClipEvent (load) {
total = _root.getBytesTotal();
}
onClipEvent (enterFrame) {
loaded = _root.getBytesLoaded();
percent = int(loaded/total*100);
perc1 = ""+percent+"%";
gotoAndStop(percent);
if (loaded == total) {
_root.gotoAndPlay(2);
}
}

More on Senocular