Premium addons and widgets for Elementor WordPress Page Builder

I’ve developed All In One Widgets for Elementor WordPress Page Builder. Now include these addons below, will add more in the future update:

Image Hotspot with Tooltip: responsive, hotspot support icon, number or single dot, easily to update hotspot icon. Built-in style with customize color. Tooltip content support rich content, like YouTube, Vimeo video or image. Optional tooltip style and animation.

Expand Grid: responsive, cover support image or avatar, avatar support both image and icon. Built-in style with customize color. Optional grid columns, auto delay slideshow, different shape support square or rounded.

iHover: 20 animation effect options, responsive with new design, link support URL, lightbox or YouTube/Vimoe video, optional icon. Built-in style with customize color, different shape support square or rounded.

Flip Box: 2 transition option, vertical or horizontal, box in image or solid background, avatar support image and icon. Built-in style with customize color, different shape support square or rounded.

Before and After: compare two image side by side, optional icon. Built-in style with customize color, auto delay slideshow option.

Float Block: 6 position options, can be in left top, left center, left bottom, right top, right center, right botttom. Different shape support square or rounded. auto delay display by default option.

See it in action in YouTube:

Image Map Hotspot with Tooltip for Visual Composer Website Builder

I’ve developed an addon, Image Map Hotspot with Tooltip for the new Visual Composer Website Builder, it’s available at CodeCanyon with this features:

1. 1. The hotspot support icon, number or a single dot.
   2. Built-in icon style and support custom color.
   3. Tooltip support support rich content, like YouTube/Vimeo video, image etc.
   4. Optional pulse animation border for the hotspot, optional tooltip style, optional tooltip animation.
   5. Tooltip can be triggered by click or hover.
   6. Tooltip can be set to be displayed by default.
   7. And more..

 

You can see it how it working via YouTube too, hope you like it:

Update Apache conf file each time after upgrading OS X

Here is a quick diff note for my local server’s setting:

❯ diff httpd.conf httpd.conf~previous                                                                              [14:16:32]
diff --git a/httpd.conf b/httpd.conf~previous
index 905e1d1..2e2ca82 100644
--- a/httpd.conf
+++ b/httpd.conf~previous
@@ -49,7 +49,7 @@ ServerRoot "/usr"
 # prevent Apache from glomming onto all bound IP addresses.
 #
 #Listen 12.34.56.78:80
-Listen 80
+Listen 8080

 #
 # Dynamic Shared Object (DSO) Support
@@ -210,16 +210,18 @@ ServerAdmin you@example.com
 # If your host doesn't have a registered DNS name, enter its IP address here.
 #
 #ServerName www.example.com:80
-ServerName 127.0.0.1:80
+ServerName 127.0.0.1:8080

 #
 # Deny access to the entirety of your server's filesystem. You must
 # explicitly permit access to web content directories in other
 #  blocks below.
 #
+# AllowOverride none
+# Require all denied
 
-    AllowOverride none
-    Require all denied
+    Order deny,allow
+    Allow from all
 

 #
@@ -409,6 +411,8 @@ LogLevel warn
     AddType application/x-compress .Z
     AddType application/x-gzip .gz .tgz

+    AddType application/x-httpd-php .php
+
     #
     # AddHandler allows you to map certain file extensions to "handlers":
     # actions unrelated to filetype. These can be either built into the server
@@ -508,10 +512,6 @@ Include /private/etc/apache2/extra/httpd-autoindex.conf
 # Various default settings
 #Include /private/etc/apache2/extra/httpd-default.conf

-# Various default settings
-Include /private/etc/apache2/users/username.conf
-
-
 # Configure mod_proxy_html to understand HTML4/XHTML1
 
 Include /private/etc/apache2/extra/proxy-html.conf
@@ -530,6 +530,7 @@ SSLRandomSeed connect builtin
 

 Include /private/etc/apache2/other/*.conf
+Include /private/etc/apache2/users/username.conf

 #
 # uncomment out the below to deal with user agents that deliberately
@@ -543,3 +544,10 @@ Include /private/etc/apache2/other/*.conf
 #RequestHeader unset DNT env=bad_DNT
 #

+Alias /phpmyadmin /usr/local/share/phpmyadmin
+  
+    Options Indexes FollowSymLinks MultiViews
+    AllowOverride All
+    Order allow,deny
+    Allow from all
+  

My new keyboard

It’s a HHKB type-s with some colorful Realforce keycaps. Hope Topre can release more colorful keycaps in the future.

Enable local FTP for WordPress in Mac

You can enable the FTP server via:
sudo -s launchctl load -w /System/Library/LaunchDaemons/ftp.plist
Then just provide the OSX user account in the WP update backend.
And disable it via:
sudo -s launchctl unload -w /System/Library/LaunchDaemons/ftp.plist

Use uinames and uiblurbs instead of lorem ipsum

When develop a prototype or mock-up, you may want to put some fake text as the data. The most use of the text may be Lorem Ipsum. But they are so common and meaningless that user will ignore them in your design, according to The Other Reason why Lorem Ipsum is Bad for Designs.
I find other choices for your prototype these days, they are uinames and
uiblurbs. They are more readable and looks like the real data.

Test from IE6 to IE11 on a Mac

As a front end developer. You will find a lot time to test a script or interface with IE. Now you can use Parallels Desktop to install IE VM on a Mac. The VM make the IE working like an individual application.

You can find the working VM from:

http://www.modern.ie

From TextMate to Sublime Text

I’m using TextMate for a long time. After watching the Perfect Workflow in Sublime Text 2 from Jeffrey Way. I try the Sublime Text for about a week, so far I get used to it. I think the first impressed feature of Sublime Text is the multiple selection. And tutsplus.com is a great place to learn new tool and skills via video or ebook.

Some notes of the learning:
command+ctrl+g Auto select all words
command+shift+l Edit multiple lines at onece
The command+d multiple selection is conflict with the system dictionary, to fix this change the Expand Selection to Word to ctrl+d in the Key Bindings – user:

[
	{ "keys": ["ctrl+d"], "command": "find_under_expand" }
]

You can map the caps lock key to ctrl on the Mac.

And here are the packages I’ll install after a new fresh installing of Sublime Text.

• Package Control (Install and discover package from here)
• AdvanceNewFile (Add new file more quickly)
• SublimeLinter (Give hint if there is something wrong in your code)
• alternative_autocompletion (A textmate like autocompletion)
• Clipboard Manager (Access the clipboard history like TextMate)
• Gist (Create or update gist more easily in github)
• Nettuts+ Fetch (Fetch the remote file like jquery.min.js quickly)
• LiveReload (Test the HTML/CSS/JS file locally)
• Prefixr (CSS3 prefixr)
• StringEncode (HTML encode special character)
• Terminal (Open Terminal in current file or folder)
• Theme – Soda
• ZenCoding