Categories
Gutenberg

Gutenberg Could Really Be A Big Win For Storytelling

Since it’s first beta release, Gutenberg has become the central of attention by many who are in the circle of WordPress community. It’ll really change the old paradigm of content creation which makes a site more live. I agree that editor is the heart of a website. The initiation of Gutenberg would really be a game-changer in the plugin and theme landscapes, as editor is metaphore of a house for any content to live in. Residents have to follow host’s rules. Developers have to pay deep attention for every piece of changes of content entry process and extensive possibilities could be made in the future. Basically it isn’t something new. We can look back at some current content builder systems. As we’ve already known how — big names like Divi, Elementor and SiteOrigin — they’ve reached massive adoption. Thus the abstractions of Gutenberg is likely more predictable. Both developer and user will be able to clearly understand how the path will go.

Although we have to wait for months ahead because its solid version would be shipped in the next WordPress 5.0, beta version has already proved modern concept of content creation. Introduced block term is the key. It simplifies the complexity of rich web content creation. Imagine a group of content contains sliding images, a bit of paragraph, and some buttons — which has its specific purpose — we can pack them in a single block with unique name to remember. The benefits are felt real. Themer will surely take advantage of it to discover pre-defined content design variations of their own. It has been dreamed by many users for be able to exactly replicate the tasty demo.

From user perspective, it’s really a win for writer to storytell ideas. Storytelling is a method used to show dynamic relationships between story nodes through interaction. Zipes believes that storytelling can involve self-discovery[1]. The story that is presented in engaging visualization will stimulate a desire to read and response. Literature visualization often presented with a meaningful order. Image, video, and audio can be added to support the pieces of story told in a form of plain paragraph. They represent strong connection between pieces of each. By this way, communication goal will easily be achieved.

Ed Hanley seems likely storytell-ed his traveling journal very well on his Atavist post.

 

Below are some more examples of storytelling technique can be applied in a web content Gutenberg.

Cooking with Wine

Skokie International Vestival

Check out more examples in the links below:

The content layout as seen on the above storytellingy posts are just a few examples of Gutenberg block can do. There are some unknown possibilities as the Gutenberg system evolves. “Hidden fish” deep under the sea are still many to be discovered. It’s a challenge for both developer and content creator.

Let’s see how the future of publishing will look like. I feel like Gutenberg supporting the spirit of “making the web a better place”.

[1]Β Storytelling and Visualization: An Extended Survey

Categories
Life

Why Happiness Engineer(ing)?

If you’re WordPress extremist you should have heard about the term of Happiness Engineer. If aren’t, google it! I bet you could easily find this term initially introduced by. This term also be used by other folks who are working in the technical support areas, which are not far from WordPress-ish. Yes, including me.

I am not a smart guy. Probably a plenty of lucks surrounds me. I’ve been working as Customer Support Happiness Engineer position for two awesome companies by far. It was started when I was in college around two years before graduation. I worked atΒ Owwwlab, which ended at August 2016. A few months before that time, I’ve been hired by aThemes — WP themes shop company who authored Sydney theme — until now.

I’ve never imagined to have this kind of job before, because I took English Education program. Ideally I should have been a teacher in the classroom — working close with students by day and compose lesson plans by night. Ah, that should have been cool! As the time goes by, wheel of life steered to another direction. I felt really nervous and my mind filled full of uncertainty. However motivations surrounded me way much bigger. Thanks internet! Which easily showed me several reputable people in my country who work on IT or similar fields. Tough their education background is non-IT. At that time Twitter was a gate to recognize them. If allowed to mention, they’re Fikri Rasyid, Asep Bagja Priandana, Anggi Krisna, Daus Gonia, and many others. I’ve never met them in person, except with some (Fikri and Anggi) at WordCamp in the past. They didn’t motivate me eyes to eyes, yet their online presence did.

With Fikri Rasyid (left) at WordCamp Indonesia 2013

Let’s back to the main topic. It’s neither really a swift nor purely my effort, which was extremely imperfect. I had just a few experience of WordPress coding when working at PuriWP — WordPress development company based in Bandung, West Java. I didn’t take for granted while spending hours working there. I learnt coding and project management. Thus I left my college for two semesters. Afterwards I went back to campus life again, and still doing some freelance works in spare hours. Mostly by night. I also developed my communication skill (especially technical writing) by giving some time to do voluntary works on the .org forums.

I’ve written numerous support replies for customers and community. Not only themes, but also plugins. Scope of WordPress products varies. I didn’t limit myself to only work on those two. I answered some general WordPress questions as well, e.g. dead white screen, WooCommerce virtual product, etc. By the time goes, supporting WP products, especially aTheme’s themes is really addictive. One problem solved, I feel like want to take some more and more.

In conclusion of this writing, would you think that it’s my passion? I don’t really know. But I feel like I am happy doing it.

Categories
Gutenberg

Gutenberg, an Iceberg of Prominent Web Content

When I was in junior hight school — about 2002-ish back then — I saw an old typewriter still be used by school’s administration staffs. The typeface was very unique, which had only single type of font and couldn’t be replaced by any. Attaching an image was very limited, even impossible to do. Creative man always got some ways to tackle this problem. He used to leave some spaces and sticked a cut of image taken from other source, like newspaper or physical photo print out. I event didn’t know how tabular data could be inserted.

For the time being, computer were introduced to use in the office. Ms Office program were very popular at that time. This words processor program could produce richer content with multiple variations that visually appealing. At that time, WordArt took my interest. Were you too? πŸ™‚ It was often be used for title of any kind of text. Table and other graphical data — for instance a chart — also can be easily inserted with MS Office. More rich the content, will be more interesting the document will be.

Nowadays, not just desktop application can be used to compose attractive document. Since web programming languages have being developed — become more advanced and advanced from day to day — many online web application can do so as well. Google Docs is one example of them. It really benefits us since our communication working culture mostly be done on the web. It offers flexibility of publication sharing and collaborating with others across continents.

As content creation evolves, web editor does as well. Few years ago, the resonance of Gutenberg heard. What is Gutenberg?

The Gutenberg editor uses blocks to create all types of content, replacing a half-dozen inconsistent ways of customizing WordPress, bringing it in line with modern coding standards, and aligning with open web initiatives. These content blocks transform how users, developers, and hosts interact with WordPress to make building rich web content easier and more intuitive, democratizing publishing β€” and work β€” for everyone, regardless of technical ability.
Source

 

Gutenberg is just like an iceberg. The long process and history behind the beauty of mountainous of ice above the sea level will grasp geologists attention. Geologists will discover from the most top to the most bottom of ice sediment, and also its influence to the environment. However there are just some who do so. Common people a.k.a tourists will only enjoy its beauty — no matter whats behind it will be set aside — and will make our eyes orgasm.

Gutenberg means a (visually light) tool for building rich web content without coding knowledge required. The magnificent ice of complexity under the water won’t be seen. Only developers will take effort — dive deeper — to prop the piece of peak appearance that regular users can see.

In the past, building interactive block of content consumes much time to discover and develop. But now they’re just available in a few of clicks with little expense — some of them are 100% free. Imagine that the beauty of web content door is opened widely for all.

As noted above Gutenberg will be the future of web content publishing as promised by the WordPress community.

Starting from now I’ll be exploring Gutenberg deeply and will be writing my findings here in the next posts.

Categories
Sydney

Enable Mute/Unmute Button on Video Header of Sydney Theme

Install and activate the TC Custom JavaScript plugin; Then go to Appearance > Custom JavaScript; and apply this JS code:
(function($){

    "use strict";

    $(window).on('load', function () {

      var isMobile = {
          Android: function() {
              return navigator.userAgent.match(/Android/i);
          },
          BlackBerry: function() {
              return navigator.userAgent.match(/BlackBerry/i);
          },
          iOS: function() {
              return navigator.userAgent.match(/iPhone|iPad|iPod/i);
          },
          Opera: function() {
              return navigator.userAgent.match(/Opera Mini/i);
          },
          Windows: function() {
              return navigator.userAgent.match(/IEMobile/i);
          },
          any: function() {
              return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
          }
      };

      var vidContainer = $('#wp-custom-header');
      var video = $('#wp-custom-header').children('video');
      if( vidContainer.length && video.length ) {

          // Enable video sound
          $('.wp-custom-header video').prop('muted', false);

          var muteButton = document.createElement('button');
          muteButton.setAttribute( 'type', 'button' );
          muteButton.setAttribute( 'id', 'mute-button' );
          muteButton.innerHTML = '';

          document.getElementById("wp-custom-header").appendChild(muteButton);

          $('#mute-button').addClass('wp-custom-header-video-button');

          var muted = false;
          muteButton.addEventListener("click", function() {
            if (muted == false) {

              // Mute the video
              $('.wp-custom-header video').prop('muted', true);
              $('#mute-button').addClass('muted');

              muted = true;

            } else {

              // Unmute the video
              $('.wp-custom-header video').prop('muted', false);
              $('#mute-button').removeClass('muted');

              muted = false;

            }
          });

          if( isMobile.iOS() == true ) {
              $('#mute-button').css('opacity', '0');
          }

      }

    });

})(jQuery);
Add this CSS code to Appearance > Customize > Additional CSS:
.wp-custom-header #wp-custom-header-video-button {
  margin-left: -27px;
}

.wp-custom-header #mute-button {
  margin-left: 27px;
}

.wp-custom-header #mute-button.muted .fa:before {
  content: "\f026";
}
Categories
Maiyah

Kumpulan Tweet #18TahunKC

Sudah lama ingin hadir di Kenduri Cinta secara langsung. Namun belum juga dapat waktu yang pas karena kesibukan kerja. Saya perlu waktu luang setidaknya 2 hari untuk melingkar di Kenduri Cinta, karena lokasi acara yang jauh di Taman Ismail Marzuki Jakarta. Menurut data Google Map, jaraknya 483,3km dari Demak, kota di mana saya tinggal saat ini.

Beruntung ada akun Twitter yang sudah lama tidak aktif bisa saya manfaatkan untuk menyimak live tweet jamaah yang hadir di lokasi. Boleh di bilang jamaah KC paling aktif ngetweet -- melaporkan secara realtime -- apa yang mereka simak selama acara belangsung. Saya merasakan timeline begitu meriah waktu itu. Mungkin karena di edisi 8 Juni 2018 kemaren bertepatan dengan hari jadi KC yang ke 18. Selamat! Jejak digital riuh kegembiraan tersebut dapat dilihat kembali pada tagar #18TahunKC di Twitter.

Perseberan informasi tentu ada juga di media sosial lainnya seperti Instagram dan Facebook, namun saya lebih nyaman ndlongopi timeline di Twitter. Kumpulan tweet disimpan di sini supaya mudah ditemukan apabila ingin membacanya lagi di kemudian hari.

https://twitter.com/isman_fmj/status/1005138172605448192

Categories
Sydney

Disable Permalinks for Registered Custom Post Types of Sydney Toolbox

Add this PHP code to child theme’s functions or use a functionality plugin like Code Snippets:

function sydney_child_modify_cpt( $args, $post_type ) {

  $custom_args = array();
  $custom_args['public']              = false;
  $custom_args['has_archive']         = false;
  $custom_args['publicaly_queryable'] = false;
  $custom_args['query_var']           = false;

  switch ($post_type) {
    case 'services':        // Services
    case 'employees':       // Employees
    case 'testimonials':    // Testimonials
    case 'clients':         // Clients
    case 'projects':        // Projects
      $args = array_merge( $args, $custom_args );
      break;
  }

  return $args;

}
add_filter( 'register_post_type_args', 'sydney_child_modify_cpt', 10, 2 );
Categories
Sydney

Add a Search Form to the Main Menu

This short tutorial will tell you how to add a search form to your Sydney site — and put it to the main menu.

Add this PHP code to child theme’s functions or use a functionality plugin like Code Snippets:

/*
 * Add a search form to menu navigation
 */
add_filter('wp_nav_menu_items', 'sydney_child_add_serch_from_to_nav', 10, 2);
function sydney_child_add_serch_from_to_nav($items, $args){

  if ($args->theme_location == 'primary') {
      $items .= '<li class="top-search-menu">'.get_search_form(false).'</li>';
  }
  return $items;

}

 

Then add this CSS code Additional CSS under theme customizer (Appearance > Customize) or use child theme’s stylesheets:

.top-search-menu .search-submit{
  display: none;
}

.top-search-menu label{
  position: relative;
}

.top-search-menu label:before{
  font-family: FontAwesome;
  content: '\f002';
  display: inline-block;
  display: block;
  width: 26px;
  height: 26px;
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 5px;
}

.top-search-menu .search-field{
  height: 26px;
  padding: 3px 5px 3px 23px;
  font-weight: normal;
}

.top-search-menu label:before{
 color: #fff;
}

.top-search-menu.input-expanded label:before{
 color: #333;
}

.top-search-menu input{
  opacity: 0;
  width: 0;
}

.top-search-menu.input-expanded input{
  opacity: 1;
  width: 140px;
}

 

Add the below jQuery code with TC Custom JavaScript plugin:

(function($){

    "use strict";

    var $searchArea = $('.top-search-menu');

    $searchArea.click(function(){
      $(this).addClass('input-expanded');
    });

    $(document).mouseup(function (e){

        var container = $(".top-search-menu");

        if (!$searchArea.is(e.target) && $searchArea.has(e.target).length === 0){
          $searchArea.removeClass('input-expanded');
        }

    });

})(jQuery);

 

Categories
Sydney

Add Phone Number to Header Area

Want to add a phone number to header area of your Sydney website? You can follow this simple steps:

Create a new Custom Links menu item to your current active menu in Appearance > Menus; enter your phone number to the Navigation Label box; to make it dial-able, enter tel:{phone number} to URL box.

Add this jQuery code with TC Custom JavaScript plugin.

;(function($) {

   'use strict'

   if( $('.phone-menu').length ) { 
   
    var phone = $('.phone-menu').html();

    $('.site-header .col-md-8').prepend('<div class="call-us">'+phone+'</div>');

  }

})(jQuery);

 

Then add this CSS code to Additional CSS of your site (Appearance > Customize).

.menu .phone-menu {
  display: none;
}

.call-us {
  text-align: right;
  font-size: 30px;
  font-weight: bold;
  padding-right: 10px;
}

.call-us a {
  color: #ff0000; 
}  

.call-us a:hover {
  color: #fff000; 
}  

@media only screen and (min-width:768px) and (max-width:1024px) {
  
  .call-us {
    margin-right: -10px;
  }
  
}

@media only screen and (max-width:767px) {
  
  .call-us {
    text-align: center;
  }
  
}

 

Categories
Sydney

Display Social Profile Icons on the Main Menu

Install and activate the Menu Icons plugin.

Add new menu items to your main menu from Appearance > Menus. In the menu administration you’ll have a Menu Icons Settings to enable icon type.

Use Custom Links menu; enter your social profile URL to URL field. Type any label as desired to Navigation Label box. Then choose related icon.

To remove the default menu label, apply the following CSS code to going to Customize > Additional CSS:

.menu-item  i._mi + span{
    display: none;
}

The default size given by the plugin’s style is too small. You may want it a bit larger. To enlarge it, add this CSS code:

.menu-item  i._mi{
    font-size: 30px;
}
Categories
Sydney Pro

4 Fresh Sydney Pro Demos

Click on the image to see the live demo

Tasty

Yoga

Finance

Band

These 4 new demos are child themes for Sydney Pro. Replicating the demo can be done easily with a single under Appearance menu.

aThemes is offering 10% off to celebrate this new designs launch which is only valid for next 48 hours. Purchase now and use SYDNEY10 voucher code at checkout to get this special price.