I AM LISTENING TO
|
WHAT I LIKE
  • en
  • de
BLOG FILTER

20. November 2015

My Javascript Stack

Some time ago I said: “My perfect framework, is a set of solid singular solutions that have proven themselves over the years. Working solo or together in harmony”.

Here is a list of some of my core components, that I use in combination or standalone.

CORE

LAYOUT

TEMPLATING

OBSERVABLES

ROUTER

STORAGE

DEPENDENCY MANAGER

  • RequireJS  – requirejs.org

    jQuery Tweak: If you have already loaded jQuery before RequireJS, you can not use define([“jquery”], …) in your module defines. Add this to your main RequireJS config before doing anything else …

    NOW you can live happily ever after :)

  • OR
  • Loadrunner – github.com/danwrong/loadrunner

This is basically the core stack that I use to build out ideas :) While Angular is always an option, the above satisfies most of all needs and is often far slimmer. The rest depends on how you organize your code yourself, but at least you are not forced into fixed structures ;)

readmore

Flarum is new elegant next-generation forum software. It provides a touch optimized two pane layout with floating composer.

The backend runs on PHP/MySQL.

Flarum

readmore

“The tracking.js library brings different computer vision algorithms and techniques into the browser environment. By using modern HTML5 specifications, we enable you to do real-time color tracking, face detection and much more”

Tracking.js

readmore

“This repository is a community-curated list of flexbox issues and cross-browser workarounds for them. The goal is that if you’re building a website using flexbox and something isn’t working as you’d expect, you can find the solution here.”

Github (CanIUse)

readmore

With inline content being loaded via ajax, you are loosing a lot of interesting usage data. These can be tracked using Google Analytics Events or by sending a Pageview.

LETS SHOW IT ALL FIRST

The above allows to automate tracking by attaching simple classes and use HTML5 data attributes to assign category, action and label.  Direct tracking is also possible. Lets split it up :)

EVENT TRACKING INIT

This monitors links with the class .trackEVENT attached and fills the event data using HTML5 data attributes. All attributes have default values assigned.

A possible link would look like this:

The sendEvent function than sends this to Google Analytics.

PAGEVIEW TRACKING

Much simpler,  this just gets the element text and submits the click as a new Pageview. The label gets the pagename attached and the actual page url is constructed from the label. The sendPageview function than sends this to Google Analytics.

DIRECT USE

Really simple and effective way within a simple OnePager or a bigger web application. BTW I am using delegation to make sure that also links within AJAX content can be tracked.

Enjoy coding …

readmore

We are getting closer to Boostrap 4 and I really love what we are getting with the first alpha version.

  1. Improved grid system
  2. Opt-in flexbox support is here. Nice.
  3. Dropped wells, thumbnails, and panels for cards.
  4. Consolidated all our HTML resets into a new module, Reboot. Much cleaner.
  5. Dropped IE8 support and moved to rem and em units. Finally REM units and IE8 free. I know there will be still projects with IE8 requirements, but the amount of projects is getting less and less :)
  6. Improved auto-placement of tooltips and popovers. They are using Tether, have been using that for projects for some time now. GREAT!

Bootstrap Alpha 4 / Documentation

readmore

Responsive social sharing buttons.

Github

readmore

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
  4. 13.08.2015
    – beta has been delayed due to my vacation & an accident I am recovering from. This is still just a side project ;)
    – updating to latest fullPage.js version and adding new options to admin
    – updating to latest Visual Composer version
  5. 03.09.2015
    – moving to Visual Composer 4.7
    – finalizing the admin area
  6. 14.01.2016
    – moving to Visual Composer 4.9x
    – fullpage.js version update
    – iScroll update
    – admin /front-end cleanup … getting close :)
  7. 17.02.2016
    – works pretty flawless by now
    – plugins are updated
    – admin complete, working on some minor cosmetics
    – not sure yet about distribution :) … my current projects come first!
  8. 07.03.2016
    – adding version / requirement checks for all linked libs
    – moved to VisualComposer 4.10
    – fullPage.js version bumped to 2.7.8
    – final cleanup of all areas on the way

readmore

Many developers hesitate to call WordPress a PHP development platform. I know what I am talking about, as I developed a platform of my own. PHP platforms normally only provide a skeleton and we need to

  • Decide on a database schema
  • Create the database
  • Setup backends and dashboards
  • Design the presentation layer
  • Implement user-level authentication and similar

THE FRONTEND EXPERIENCE

With WordPress you get most of this out-of-the-box, with some predefined structures.

Having a flexible administration backend in place makes it easy to concentrate on the things that matter for a project, which is designing a frontend experience.

JSON MATTERS

And especially with the JSON REST API finding its way into the core slowly, you are completely free when it comes to using the stored data in your frontend designs.

Sure that was possible before, just with some more work on our side ;)

But WordPress embracing the “freeing of data” through JSON, shows us where the ride is going.

THE NEW SINGLE APP UNIVERSE

There has not been a single project of mine in the past year, that has not used the REST API in some way. And all of this fits perfectly into the new single page app universe.

WordPress interfaces with your javascript framework setup (client side templating, DOM manipulation, data binding, routing …) and frees you from any design handcuffs.

It has become much easier and faster over the past 2 years to say “YES” to many of my clients wishes.

Its nice to finally see data flow from the server to the client and back that easily.

If you are not exited about this … I am :)

…enjoy coding

readmore

  1. Pixel-perfect
  2. Retina-ready
  3. Fast
  4. Consistent
  5. Hackable
  6. No tracking

Shield.IO

readmore