Backbone    Development    HTML5    Javascript    jQuery    Mobile    PHP    Visual Composer    WordPress   

3. June 2015

This video should give you a good idea what the addon can actually do.

In my last article I gave you a rough overview of the features & requirements. Here some more details and additions:

  1. Added the fixed header & footer container to the admin interface. You can add special padding, to the top and bottom, through the fullpage settings and make room for them. These are standard content containers, that can hold any Visual Composer content or row setup.
  2. Added automatic menu, which adds links to each section as they are created. Link title matches the section title.
  3. Define section and slide anchors, which are reflected in the browser history.
  4. Sections and Slides can have different backgrounds, providing nice effect options. I added an image background to Section 1 and semi-transparent background colors to the Slides.
  5. Fullpage.js configuration is fully integrated and working. The system sets defaults for a quick start.
  6. Fullpage.js CSS override has been added, but is not complete yet. Added code editor.
  7. Fullpage.js Events have been added and are fully functional. These events are triggered after load, after slide load, after leaving a slide and other events.
  8. iScroll can be seen in Section 2. Added resize handling and configuration options. Still need to do some minor tweaks.
  9. iScroll custom scrollbars are on my list, but not sure I will add these yet.
  10. Prebuild Templates will be added, so that you can quickstart your design. Visual Composer 4.5+ provides some nice new options.
  11. Visual Composer requirement will be 4.5+.
  12. The admin provides a nice color separation for all components and count for slides & sections.

The addon is mostly done. I am finalizing the main admin area this week and will do a final cleanup next week, for the first beta release.

Many people have asked me for a release date. I currently plan to have a fully working Beta in the next 2-3 weeks. Will offer the Addon to a small closed group of customers first, before I think about other release options. I think I will offer between 20-30 slots for the beta run. If you are interested let me know.

Regards
Alexander

Updates

  1. Quickly choose which section / slide to load, when the page is opened.
    cubicFusion_VC_Fullpage_Bchoose
  2. The addon is injecting its own page template, to make sure that the main container is clear of any theme related margins or padding. As soon as the Fullpage container is added to the layout, the template gets selected dynamically.
  3. 21.06.2015 – updating to latest fullPage.js version (2.6.6) and adding new options and changes

readmore
Design    Development   

3. July 2015

The new WOFF 2.0 webfont format is coming to chrome.

“The new WOFF 2.0 Web Font compression format offers a 30% average gain over WOFF 1.0 (up to 50%+ in some cases).”

CONVERSION OPTIONS

http://www.fontsquirrel.com/tools/webfont-generator
http://everythingfonts.com/ttf-to-woff2

EMBED WITH FALLBACK

BROWSER SUPPORT

  • Google Chrome 36
  • Opera 23
  • Firefox 35 (disabled by default)

Enjoy coding …

readmore
Development    WordPress   

30. June 2015

Sometimes you might like to store all language files in your own central location, so that translators have one easy place to access all language files.

Put the above into the functions.php and add textdomain handling for those you want to centralize.

Most current plugins should include the option to store language files to the global WordPress language folder, but that is sometimes just not enough  :) Its all about options ;)

Enjoy coding …

readmore
Design    Development   

28. June 2015

Make sure that the viewbox, width and height are defined within the SVG.

Many older browsers misbehave, if those are defined in the image source tag only and not in the image file itself.

Enjoy coding …

readmore
Development    WordPress    WPLMS   

25. June 2015

WPLMS is a Learning Management System for WordPress. Translation files in WPLMS are located in

  1. /wp-content/themes/wplms/languages/
  2. /wp-content/plugins/vibe-course-module/languages/
  3. /wp-content/plugins/vibe-customtypes/languages/
  4. /wp-content/plugins/vibe-shortcodes/languages/
  5. /wp-content/plugins/wplms-assignments/languages/
  6. /wp-content/plugins/wplms-dashboard/languages/
  7. /wp-content/plugins/wplms-events/languages/
  8. /wp-content/plugins/wplms-front-end/languages/

These language files will be overwritten with new files on every update, destroying any custom translation changes.

THE THEME

Move your theme into a child theme and translate your theme there (/wp-content/themes/your-child-theme/languages/).

Make sure that language files are loaded from your child theme. Add the following action to your functions.php and use “vibe” as the domain, not the actual theme name.

THE PLUGINS

Use the global language folder for the WPLMS plugin translations. The WPLMS plugin loader checks, if a global language file actually exists :)

  1. /wp-content/languages/plugins/vibe-de_DE.mo
  2. /wp-content/languages/plugins/vibe-customtypes-de_DE.mo
  3. /wp-content/languages/plugins/wplms-assignments-de_DE.mo
  4. /wp-content/languages/plugins/wplms-dashboard-de_DE.mo
  5. /wp-content/languages/plugins/wplms-events-de_DE.mo
  6. /wp-content/languages/plugins/wplms-front-end-de_DE.mo
  7. +++

POEDIT

I suggest using Poedit, as it allows you to do the translation on the Desktop. It also offers options to update your file with an updated WPLMS language file, allowing you to add new translation strings if needed :)

PREPARE

A. Create the structure for the update and download new PO files from WPLMS

  1. /wp-content/themes/wplms/languages/
  2. /wp-content/plugins/vibe-course-module/languages/
  3. /wp-content/plugins/vibe-customtypes/languages/
  4. /wp-content/plugins/vibe-shortcodes/languages/
  5. /wp-content/plugins/wplms-assignments/languages/
  6. /wp-content/plugins/wplms-dashboard/languages/
  7. /wp-content/plugins/wplms-events/languages/
  8. /wp-content/plugins/wplms-front-end/languages/

B. The target structure / your current language files

  1. /wp-content/themes/your-child-theme/languages/de_DE.mo /.po
  2. /wp-content/languages/plugins/vibe-de_DE.mo /.po
  3. /wp-content/languages/plugins/vibe-customtypes-de_DE.mo /.po
  4. /wp-content/languages/plugins/wplms-assignments-de_DE.mo /.po
  5. /wp-content/languages/plugins/wplms-dashboard-de_DE.mo /.po
  6. /wp-content/languages/plugins/wplms-events-de_DE.mo /.po
  7. /wp-content/languages/plugins/wplms-front-end-de_DE.mo /.po
  8. +++

C. Open your current .PO file from target structure

wplms_trans_1

D. Update with new and matching .PO file from A. (Catalog -> Update from POT file)

This will check for new or obsolete strings and update your language file.

wplms_trans_2

wplms_trans_ 20.13.19

E. New strings added

wplms_trans_4

F. Obsolete strings removed

wplms_trans_3

G. Save and upload updated .PO + .MO files from target structure to server.

Again, make sure to use the global language folder and the child theme languages folder !

Panic time after updates is over :)

Enjoy coding ….

readmore
API    Development    Javascript   

23. June 2015

“Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind.”

Supported languages
Prism

readmore
Development    PHP    TWIG   

22. June 2015

Twital is a small addon for the Twig template engine, it adds shortcuts and makes Twig’s syntax more suitable for HTML based (XML, HTML5, XHTML, SGML) templates.

Should be also no problem to integrate it with Timber, currently looking into that ;)

Twital

readmore
Development    Javascript    jQuery   

22. June 2015

  • Fully responsive. Scales with its container.
  • Separate settings per breakpoint
  • Uses CSS3 when available. Fully functional when not.
  • Swipe enabled. Or disabled, if you prefer.
  • Desktop mouse dragging
  • Infinite looping.
  • Fully accessible with arrow key navigation
  • Add, remove, filter & unfilter slides
  • Autoplay, dots, arrows, callbacks, etc…

slick

readmore
API    Development    Javascript   

22. June 2015

“In iOS 7.1, a property, minimal-ui, has been added for the viewport meta tag key that allows minimizing the top and bottom bars in Safari as the page loads. While on a page using minimal-ui, tapping the top bar brings the bars back. Tapping back in the content dismisses them again. Brim is a view (minimal-ui) manager for iOS 8″

Brim @ Github

readmore