Taking over a large-scale Adobe Experience Manager (AEM) project
This week, we traveled to Toronto in order to negotiate with our primary Content Management System (CMS) vendor, Razorfish. We all know what the Agile Manifesto says about “Customer collaboration over contract negotiation“, so don’t get me wrong, I’ve never been a huge proponent of contract negotiations, but even I’ll admit that sometimes it does seem like a bit of a “necessary evil”. Particularly when certain vendors aren’t necessarily will to “play ball” or “come to the table” to collaborate and work to find mutually beneficial solutions (won’t name names right now, but HINT, its definitely not Razorfish!)
ALC initially started working with Razorfish back in 2015 (when they were still called Nurun before rival larger digital interactive agency Razorfish acquired them) on the “Corporate CMS re-design project”, which aimed to upgrade and migrate the entire “corporate.playsphere.ca” sub-domain’s content over to a modern enterprise CMS, namely, Adobe Experience Manager (AEM) which ALC has chosen as its corporate CMS. Of course in November, 2016 even larger rival firm Sapient negotiated an agreement with Razorfish to merge, creating a somewhat “super digital interactive agency”. (UPDATE 2020-02-18: and perhaps at the borderline “disturbing” scale, Publicis then acquired the Sapient-Razorfish — SRF for short — conglomerate, creating a frankenstein’s monster digital interactive agency with few remaining significant rivals for the big contracts, this entity now called “Publicis-Sapient-Razorfish”).
Since then, quite a bit has changed, as there were a number of “pillars” in the Darwin programme (collection of projects), which made it the single largest undertaking in ALC’s history according to most in-the-know who I’ve spoken to, coming in at a whopping ~$35 million total estimated cost. Whereas AEM was initially selected to replace only that “Corporate” part of PlaySphere, it has since been selected to replace the entire PlaySphere system (particularly the front-end portions), and provide a number of vendor integrations. This is because only the “Corporate takeover” portion of the Darwin programme was actually on track.
The Darwin portfolio of projects rather ambitiously aims to simultaneously rejuvenate and completely replace both our legacy PlayShere system and a very large number of its vendor integrations, alongside our Retail systems, part of our Call Center technologies, and, a number of other supporting systems that are expected to get small updates. Of particular contention are those myriad of 3rd party APIs we need to support and integrate, each provided by vendor partners, and needing to be consolidated in a number of ways. The aim is to reduce the total number of vendor touchpoints (vendors needed to be contracted with), Software-as-a-Service (SaaS) providers, and, other similar agencies/consultancies we need to work with and/or get support from.
As I shared with my team, I’m happy to report it was a very productive jam-packed 2-day trip. Most importantly, they’ve tentatively agreed to move their code repository for the Darwin project’s new AEM-based ALC.ca replacement for our prior PlaySphere system from their internal Stash (BitBucket Server) instance running within their network, and where all our codebase currently lives, over to our own BitBucket Cloud instance. They will also move away from using their JIRA Server instance as their “source of truth” for all tickets and issues, to instead using our JIRA Cloud instance which we have been using for over a year now. We’re aiming at mid-to-late May at the latest to get these cut-overs done, it will be alot of work to first test out “mirroring the repo” between instances and exporting then importing all the JIRA issues. All agreed though, to pull this off at least one additional trip would be recommended, to bring more of the team up to Toronto next time in order to “observe their day-to-day Agile methodologies” and which pieces of that we may want to bring into our new team as it grows. Agile will be a new thing at ALC in general, so I want to be really certain we “get it right” (and yes, I realize there is no such perfect combination right out of the gates, rather we need to just start somewhere and regularly evolve/tweak it as we go). However, towards still trying to have some kind of plan together, I always love referencing this meme:
After what I’ve seen so far, and my past experience at other companies, we will likely end up adopting some kind of hybrid of Scrum and Kanban. I am hearing that “Scrumban” term more and more, so we’ll see how that goes. Scrum seems like a great fit for project implementations, while Kanban seems like the no-brainer choice for all our enhancements, bug fixes, and “keep-the-lights-on” (KTLO) types of development activities.
With our current plan, its looking like we’ll finally launch one full year behind schedule in September, 2017 some time (that’s without true Agile so far, more like an “incremental Waterfall” approach so far, mostly due to vendor limitations and nothing spelled out in our contracts about how we want to and/or expect our partners to work). I’ve been told the September date is not negotiable and can’t slip no matter what, but also the famous like “September is a long month” (an inside joke reflecting the FUD). Will do what I can to prevent such a large set of initiatives and projects to ever need to be cobbled together again, and instead hopefully we can just do a great job maintaining this new AEM platform, so that all we need are little feature delivery sprints and minor projects.
Leading up to September, 2017 we will be collaborating heavily with the SapientRazorfish team, bolstering our current team of 5 with their 15+ active Developers (although with a tapering down towards eventually only having a few of them remain for at least a year in a support role during the “warranty period” as we call it, post go-live). The plan from our launch date onwards will be that our team slowly but surely ramps up to full capacity to be able to support the web application and Mobile App webview integrations that have been done within AEM totally by ourselves, and, to continue to build on that with various other business project, enhancements, internally drive innovations, etc. It will be an interesting challenge, and we’ll see how it goes.
UPDATE (2017-09-17): We finally launched the darn thing, and it wasn’t even the last possible day of the month as many expected! What a whirlwind the past nearly two and a half years have been (feels like I’ve done about 3-4 years worth of work myself, and I’m certain that if you add up all the person hours on this project including OT and “extra efforts” that went into getting this beast across the finish line, you’d come to like 100+ years of life force spent). But I can finally show off the new look of the webapp:
Example authoring, to choose which Components are allowed within a given Static Template in AEM:
Feeling lucky? Give it a try yourself now, at https://www.alc.ca
Animations on the web – Applets .vs. Flash .vs. SVG .vs. setTimeout .vs. jQuery.animate .vs. requestAnimationFrame .vs. CSS3 animations
In a follow-up to my prior article on Interactive Graphics on the web from a few years back, today I’ll be looking a bit closer at the latest Animation options on the web.
Animations have always been the specialty of Flash and before that pioneered by Java Applets on the web, but with the introduction of HTML5 and CSS3 things are sure changing fast!
This post is a quick round-up of the leading approaches to do something that a decade ago when I was first learning to develop I would have had trouble believing were even possible without a plugin/tool like Flash or Java. That is to simply move a box around through animation, moving it from left-to-right (but could be any direction) across the screen perpetually within a user’s browser, with simple controls to control the starting and stopping of the animation.
Java Applets
Historically the first (and back then pretty much only) way to accomplish your dynamic and interactive content needs, Java Applets offered the ability to code “Rich Internet Applications” in Java, similar to what it could already do on the Desktop via AWT GUIs, but run them on the web in the user’s browser client.
-or-
This loses alot of marks because of the sorry state of Java plugins and security issues since Oracle took over from Sun Microsystems and seemingly de-prioritized Java’s RIA features in favour of backend and enterprise parts of the stack which have a closer potential tie-in to its database and related products/services. Its also more cumbersome as it depends on the Java Runtime Environment (JRE) being installed to work, along with a Java browser plugin (IcedTea for OpenJDK or JavaWebStart for Sun/Oracle) so it would not work on a majority of mobile devices without rooting the device and layering in Java support (if even possible – depending on device type it may not be).
Many legacy devices do run Java Mobile/Micro Edition (JME) already, but the average user would have trouble even with some of the installer tools out there. Users also grow tiresome of the constant updates, warnings and security concerns that Applets present in the browser. Java in the browser lives on in the form of JavaFX and JNLP app launchers, but Applets are on their way out slowly but surely.
Score: 2.5/10 (I recall being wowed when I first saw dynamic and highly interactive content being rendered by Java, but have to admit the web has changed a lot since the 1990s).
Flash
Shortly after the debut of Applets, Macromedia launched their web-version of Shockwave (later Flash). Flash used a concept of “Motion tweens” where you basically draw out by hand the path that you want the animation to take, and the Flash plugin/player takes over and renders the desired motion path on your graphic objects, the desired number of times (or endlessly on a cycle).
-or-
This can be quite performant on Desktop devices that have the Flash plugin installed and enabled (most Computer browsers at this point in time), however not so much on Mobile devices. Also, thanks to Steve Jobs’ infamous statement that he’d never allow Flash on the iPhone due to its known security and performance issues on mobile (FlashLite), it may never be the case that you can rely on Flash to hit a majority of mobile browsers. This could still be a decent option however, if you’re already invested heavily in the Flash stack and/or Flex framework for your multimedia needs, and are ok focusing on Computer users. With Flash suffering pretty much as many security issues of late as old school Java Applets, I’m guessing most Developers are rejoicing with the other options emerging.
Score: 3/10 (I also have fond mostly painful memories struggling to get my first “motion tween” working in Flash Studio 2004; again, the web is moving to more built-in options for animation needs as we’ll soon see, but for a quick one-off this is still a viable option for a few more years, as long as you don’t need to support iPhone users).
SVG
Scalable Vector Graphics (SVG) is one of the up-and-coming mechanisms for multimedia on the web. I recall when it was initially being pushed by W3C in the early 2000s, but at that time, you needed a dedicated browser extension just to render the SVG. Later, JavaScript cross-browser polyfills and libraries like Raphael.JS, Processing, and D3 emerged which built heavily on SVG (or supported it as a primary export format).
The
Score: 4/10 (I also have fond mostly painful memories struggling to get my first “motion tween” working, again, the web is moving to more built-in options for animation needs)
setTimeout
This approach in vanilla JS uses a combination of “setTimeout” and “clearTimeout” (along with a helper “global variable” you can’t really get around).
-or-
The problem is that first of all its fairly obviously laggy due to rounding errors in the calculation of nanoseconds (basically the timer is leaky and gets compoundingly inaccurate the longer it runs); but worst of all, if left running in an idle window too long it can become even further janky, jump all over the place, and consume too many resources causing the Tab to crash. This is not a viable animation option unless you are detecting the “active” state of the browser client to ensure the animation is only played when the user is actively on the page and interacting within the desired content regions such that its worth showing the anitmation. Even then, there’s no guarantee it will work equally well across Mobile and Desktop browsers.
Score: 5.5/10 (cool idea that it’s possible, but not the best approach for serious uses)
jQuery.animate();
This is probably the leading go-to answer if you ask StackOverflow, as usual, the Dev community seems to prefer to hand-off the cross-browser edge cases to jQuery which “usually” performs reasonably well. This makes sense, why reinvent the wheel? In this case though, this solution too will lead to jankyness if you leave it running over longer periods of time, but not nearly as wildly as the first setTimeout example without jQuery, as jQuery’s $.animate() doesn’t suffer from the same nanosecond rounding errors as setTimeout does.
-or-
Score: 7/10 (convenient enough, but still not even close to the best performing approach)
requestAnimationFrame();
This is the new HTML5 + JavaScript option that was previously not available. Depending on your target browsers, you may want to check its availability, but its shipping in Firefox, Chrome, Safari and even IE 10+ now, so it should be ready for prime time!
It performs better because it uses purpose-built animation APIs rather than relying on the single client-thread’s timer to continue running and stay accurate, or, and cludgy browser workarounds and approximations that attempt to overcome this with the jQuery.animate() approach.
-or-
The only downsides here, is that for now, its still a bunch of extra code to ensure you’re covering all the browsers with cross-browser vendor prefixes, other than that its fairly smooth and fluid, handily beating both the vanilla JS setTimeout and jQuery.animate optons.
Score: 8.5/10 (convenient enough, but still not even close to the best performing approach)
CSS3 Animations
Last, but certainly not least, what I’m probably most excited about is CSS3 Animations, natively within the browser… I mean how crazy is that?! This stuff would have been unheard of a few short years ago.
-or-
Ok so while not totally 100% CSS3 only, we need at least a tiny snippet of JS just to control the currently active class based on the desired state of the animation, toggling the starting of the motion through a class called “running” being added, and stopping of the motion through a class called “paused” being swapped out instead. Still, I found this pretty impressive once I realized the possibilities of CSS3 Animations & Transitions… the future will be interesting.
Score: 9.5/10 (I might be biased on this one, but I’m blown away by the fact this can now be done in CSS!)
Just to be comprehensive I’ll at least mention there’s also other options like Animated GIFs, VRML/X3D, Canvas, JavaFX, Flex, Silverlight, Unity, and even WebGL; but for practical animation needs, and programmatic access to control the animation, those listed above are the most accessible and sensible options for developers today.
E-Learning for Toddlers and Pre-Schoolers: HTML5 Memory Game
These days, digital distractions are far too proficient at taking our attention away from important responsibilities. You know, like giving your children the care and attention they need and deserve. Especially when it comes to teaching and learning, I even find myself guilty of becoming quickly bored to tears of the typical paper flash word cards and basic, repetitive picture books for toddlers and pre-school aged children.
To fight this boredom, yet still fulfil my fatherly duties, I decided to put my “day job” skills to use and at the same time develop yet another requisite “me-too” HTML5 web app, but this time with a good purpose; namely, teaching my son more interactively.
This is a simple word/alphabet memory game I developed for teaching my child. He has trouble remembering certain colors, words and letters so this game basically mixes up a set of images and uses their filename to display an image. If the folder is prefixed with “alphabet_” it will also create a large letter “stencil” containing the first letter in the top left corner of each card.
It can easily be used for just about any subject by dropping a new folder in the images directory, full of the images you want to appear in the game.
For example’s sake, I’ve added “Animals”, “Numbers” and “Colors” as separate categories just so others can see how this is possible, and the possibilities are really endless.
Read the rest of this entry »
Skeumorphs – Good, Bad or Ugly?
Nifty elevator interface. #skeumorph #nasig13 (Photo credit: BryanAlexander)
What are Skeumorphs?
In designing and developing new software systems and applications, a common strategy is to attempt to approximate device user interfaces to mimic or look like real-world physical objects. This is called a Skeumorph, or a skeumorphic design.
Some of the biggest problems with Skeumorphs are that they are time-sensitive and may not actually do a great job at approximating a particular item or interface from the real-world. For example, we still use the floppy disk to represent “Save” activities, when an entire generation of computer and internet users have grown up without the use of Floppy Disks.
This approach to implementing software solutions has been propagated by Apple in particular, as well as a number of other companies such as Adobe and Microsoft of late. On the other side of the fence is Google and Microsoft who have traditionally had very non-Skeumorphic designs that feel more like using a software interface than approximating any particular object in the real-world.
Where do Skeumorphs work?
Here are a few examples of types of interfaces for which I think Skeumorphs tend to work well (for the most part):
- Calendars
- E-Reader Bookshelf
- Icons
- Text Editors
- Media Players
- Buttons
- Text fields
- Edit-in-place Text
- Tabs (as markers in a book, folder or binder)
- Pages and paging (flipping through pages)
- Voice controls
- Toggle Buttons
- Fullscreen applications
- 3D Models
- CAD (engineering design)
What are some non-Skeumorph design elements?
Some examples of non-Skeumorphic designs and Flat Design features would also be useful for comparison:
- Lists
- Search Results
- Scrolling
- Infinite Scrolling
- Flexible Grid
- Hyperlinks
- 3D navigation components (i.e. Spherical/Cubic)
- Carousels/Sliders
- Accordion
- Dashboards
- File Uploads
- Progress Bars
- Most Animations
- Dropdowns
- Multi-selects
- Tiles (i.e. Windows 8 Metro app tiles, Google iCalendar, widgets, etc)
- Word Clouds
- Zoom in/out
- Virtual Tours
- Drawing (graphic design)
Side-by-Side Comparison
So let’s see some side-by-side examples of Skeumorphs .vs. Flat Designs that are each relevant in their own rights: Read the rest of this entry »
CNN-style Interactive News Ticker (HTML5/CSS3)
CNN breaking the news of a plane crash at the World Trade Center (Photo credit: Wikipedia)
With the real, true and unbiased news inevitably moving online towards the so-called “Alternative Media” (which really is almost reaching the point where it is not alternative so much as the first go-to source), its a good idea to start replicating some of the most useful elements from Television, Print and Radio (aka. the rest of the dinosaur media).
The CNN News Ticker Tape is a somewhat controversial item, as it is considered annoying by many. However, in terms of being able to quickly get information across the screen without interrupting another presentation, it is arguably somewhat effective. Proponents of its use claim it is the best way to get instant updates while maintaining a coherent programming schedule, while critics point to its potential for misuse and indoctrination of the weak-minded with subliminal messages flashing across the screen or fear-mongering sensationalism so common in the “Mainstream Media” today.
Taking the bad and the good into consideration, I’ve thrown together a mock-up that could function somewhat similarly to the Semantically Enhanced Video Pop-ups I’ve implemented using Popcorn.js and to replicate the VH1 Pop-up Video effect. You could imagine having the usefulness of having contextual content being inferred based on the content being viewed, or, simply populating a basic news ticker with the entries from an existing RSS or Atom news feed to link to the day’s top stories.
Read the rest of this entry »
BC$ = Behavior, Content, Money
The goal of the BC$ project is to raise awareness and make changes with respect to the three pillars of information freedom - Behavior (pursuit of interests and passions), Content (sharing/exchanging ideas in various formats), Money (fairness and accessibility) - bringing to light the fact that:
1. We regularly hand over our browser histories, search histories and daily online activities to companies that want our money, or, to benefit from our use of their services with lucrative ad deals or sales of personal information.
2. We create and/or consume interesting content on their services, but we aren't adequately rewarded for our creative efforts or loyalty.
3. We pay money to be connected online (and possibly also over mobile), yet we lose both time and money by allowing companies to market to us with unsolicited advertisements, irrelevant product offers and unfairly structured service pricing plans.