Tomorrow Times

This is a Q-A app that allows users to predict the events. So at the time of answering we don’t know if the answer is right or wrong. It’s a fantastic app that uses FACEBOOK GRAPH API and WP REST API 🙂 Repository for this is private

Angular Attack Hackathon 2016

Participated in ANGULARATTACK HACKATHON to develop app in 48 hours 🙂 It was a lot of fun 😀 Some reviews attached 🙂 This app is not working coz backend isn’t hosted anymore. This is where I came to to about the wonderful Angular CLI 🙂

Fastshop

This is an ecommerce app that runs on WordPress with WooCommerce as a theme. This is from the beta days of angular 2 days.

Canvas Extension: WooCommerce Button

Customizing WooFramework shortcode buttons in WooThemes Canvas theme. Allows creating 4 types of buttons which can be used as many times as desired.

It basically uses WooThemes button shortcode to create a button with custom class and and has customizer controls to let users customize them 🙂

It adds 1 panel, with title Buttons in customizer, which contains 4 sections Button 1 to  Button 4. Each section has following options-

  • Button background color
  • Button text color
  • Button hover background color
  • Typography ( Font, size and weight including Google Fonts )
  • Padding ( top/bottom and left/right )
  • Border width and color

Pootle Button

pootle button is a wonderful lightweight TinyMCE plugin to add buttons in WordPress editor.

What does pootle button do?

pootle button makes it incredibly easy to add buttons to WordPress editor. It allows setting background, border radius (for rounded corners), text color an much more!

What’s cool about pootle button?

pootle button allows adding custom hover color which because of the complexity in implementation is not implemented in any button building/adding plugin for WordPress, It also offers adding beautiful custom gradients just pick 2 colors and bingo your button has a beautiful gradient as background! It also has an option to choose icons for buttons which come from WordPress’ dashicons for making professional looking buttons without a single line of code!

Any challenges with pootle button?

Hover color was an issue for button because inline styles don’t allow styling hover states, that’s why none of the button builders have not implemented this… So to solve this issue we add hover color as a data attribute to button and and set it as background on hover using jQuery.

Also, gradients were a very interesting implementation, taking into consideration that some browsers don’t support gradients, we added a fallback to first color as background in case browser does not support gradients.

How is pootle button developed/structured?

pootle button has following components:

  • PHP to register tinyMCE plugin components and scripts.
  • TinyMCE plugin written in JS.
  • Dialog rendering PHP code.
  • Dashicons selecting jQuery plugin.

Can I see pootle button User Interface?

Aye! Check this video out 😉

Pootle Pagebuilder

pootle page builder has been a great plugin to develop a pleasant UI. And we still add new features to it and do new version in about every quarter.

What does pootle page builder do?

pootle page builder helps create beautiful multi column pages in WP admin end with multiple rows with parallax, background videos and much.

What’s cool about pootle page builder?

pootle page builder is a work of art, elegant user-friendly user interface, very well integrated with WordPress and designed with a subtle color scheme to match WordPress admin and to make users feel like home while using the pootle page builder. It’s very extensible and comes with tons of hooks to add or remove stuff as needed. Code is beautifully written, optimised and secure and rated ppb-quality-score by scrutinizer code inspector.

Any challenges with pootle page builder?

In pootle page builder we wanted to display all paid add ons to add more features to the pootle page builder in an admin page. Initially we did it by parsing RSS from pootlepress website but they wanted to make their RSS feeds private, so we used github gh-pages branch to store add ons data served on request.

Also, we were initially using jQuery UI tabs, dialogs and sliders etc. but because of it’s widespread use and wide range of themes, we kept getting styling issues in beta versions, So we devloped our own jQuery widgets to handle dialogs, tabs and slider with custom prefixes and it works like a charm till date. 🙂

How is pootle page builder developed/structured?

pootle page builder has following components:

  • User can create multiple rows in pages.
  • There is row setting panel with setting arranged in tabs, here are the settings to set background video, background images, parallax and even full width rows in all themes.
  • Row settings tabs and controls can be filtered by hooks.
  • In rows one can have as much as as 10 columns.
  • These columns can contain multiple content blocks.
  • Each content block has a tiny MCE editor to edit the contents in content block, also there are other settings organised tabs that allow setting transparent background, text color, curved corners and much more.
  • Content settings tabs and controls can be filtered too.

Can I see pootle page builder User Interface?

Aye! Check this video out 😉