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

Fully responsive Jquery Animation

Remax
The client want a fully responsive animation with the following descriptive details:
On load greenery scene then the beach on the back, the clients want historical event sequence (1693) of the place such as the railroad, the battle, the capitols, the farm and etc. They want also a tramway and the moving carousel on the beach. They also requested a night scenery of the place.

Methodology:
a. Percentage on size of every element
b. Percentage on margin of each position
c. Used jQuery.html5Loader
d. Resize script on screen
e. Created a repeating loop on Remax ballon
f. Separated the night view fade to the morning

Apple iPhone 6 and OS X Yosemite

September 9, while Orville Wright celebrated his 106 years to flight the first 1-hr airplane at Fort Myer, Virginia, this is also the most awaited event day for Apple enthusiast, the iPhone 6 will be the most highlight device on the said event.

The bigger and better iPhone6 with 5.5 inches model, believe to have faster new A8 chip, NFC chip, Heart rate EarPods, upgraded LTE modem, wireless charging, Sapphire glass and LiquidMetal design and new logic board that will boast the much-aniticapted power device. The battery in the iPhone 6 will probably be bigger and more robust. The latest reports say the 5.5-inch device will come with a 2,100mAh battery, the bump will be smaller and the iPhone 6 will have a 1810mAh battery.

The iOS 8 with the same beautiful design features as iOS 7, with new API called HealthKit with a corresponding Health app that will help you organize the data from the increasingly huge number of wearable devices on the market. Otherwise, expect to see more useful options in the Camera app, well their are no inidcation it will have six camera and motion sensor. The good news is now we can able to switch seamless between Apple devices, without losing or needing to transfer your work, thanks to a new feature called Handoff. Notifications, Contacts, Mail, and Spotlight all get incremental improvements in iOS 8. And finally, an exciting new feature called Extensions will finally let apps talk to each other. You can now use third party keyboards, wowee.

OS X Yosemite

While Apple already announced the latest version of its Mac operating system, OS X Yosemite, we can now say goodbye with our OS X Mavericks, Yosemite includes a user interface redesign, as well as major new features focusing on seamless integration between Mac and iOS devices, a new cloud storage system called iCloud Drive, as well as the ability to make phone calls and send text messages through an iPhone.

I need to share this…

Gusto ko ng gala…. Yup thats me.

First job as Sales reps (well Im 18yrs old… working student), I have a provincial territory, I travel a lot. Almost every month I’m in Northern Luzon and some Visayas Provinces. Since Im working student I always went on Friday night to Monday morning and take my break on Monday and Tuesday. Ever since then, I love to travel. When I got married, we tried but sadly my husband cannot cope up with my traveling adventures. I’m glad to found my travel buddies, once we called ourselves Sadsad People, yes… we attended the Aklan Sadsad festival hosted by Kristel. But sadly, some of us migrate to another country, another company and another adventure (they are now into mountaineering). I just miss them.

Travel Buddies

A better Front-end Developer

Everyone wants to hire the good front-end developer – but you need a way to identify future potential WordPress front-end developers.

What are the transferable skills and characteristics someone could look for in a potential WordPress developer?

Understands key server-side web development concepts through experiences such as:

  • Interpreting graphic visual or interaction designs in PSD to HTML pixel perfect conversion, style in CSS and create dynamic function on Javascript.
  • Creating visually appealing web pages or interfaces such as hover effect, web intros and animation.
  • Creating, editing or modifying templates for a CMS or web development framework.
  • Programming interaction with JavaScript and/or a library such as jQuery, YUI or Prototype.
  • Testing cross-browser, cross-platform, and/or cross-device compatibility for inconsistencies.
  • Testing for compliance to specified standards such as accessibility standards in the clients region or domain.
  • Conducting observational user testing, or reviewing designs against usability and loading time.
  • Created a SEO Friendly Website.

Software familiarity and knowledge base.

HTML

  • HTML syntax for multiple specifications, including HTML 5.
  • Knowledge of the semantic meaning of all HTML elements.
  • Familiarity with the semantic markup for display of lists, tabular data, forms, articles, etc.
  • Knowledge of markup used for layout such as dividers.
  • Knowledge at the level to be able to hand-code markup.
  • Including media and images.

PHP

  • Familiarity with modifying WordPress Theme plugins to display data
  • Understanding how to utilize PHP to filter, process and output html, json, xml

CSS

  • Specifying different CSS for various media, devices and displays.
  • Best practices in CSS file organization and structure.
  • Methods for including CSS inline, internal and external via linked style sheets.
  • How to define, combine and group CSS selectors for HTML elements, ID, classes, pseudo classes, child or sibling.
  • Syntax of CSS declarations, properties and attributes.
  • CSS box model and methods for CSS positioning, absolute and relative.
  • Knowledge of properties and attributes to control the display.
  • Familiarity with differences in CSS 2 and CSS 3.
  • Proficient with a CSS Preprocessor such as Sass or LESS.
  • Best practices
  • Methods to ensure browser & device compatibility
  • Methods for degrading gracefully for older browsers and displays.
  • Methods to ensure accessibility.
  • File compression techniques for improving speed.
  • Familiarity in CSS3 Animation

JavaScript

  • Knowledge of the operators, variables, datatypes, objects, properties and methods.
  • Familiarity with control structures such as objects, functions, conditional statements, arrays, loops and expressions.
  • Forms and regular expression validation and submitting data.
  • Knowledge of how to apply logical operators and conditional statements.
  • Knowledge of the DOM HTML objects and their properties.
  • Event handling.
  • Creating and controlling windows and dialogs.
  • Processes for troubleshooting and debugging
  • Familiarity with development and debugging tools for cross-browser issues.

jQuery

  • Knowledge of how to employ the jQuery library for visual effects, event handling, and document manipulation.

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.