To upgrade or to migrate? To keep supercharging your current Drupal 7 site with new cool features or to get it straight to the next league? A so much more than just another Drupal 7 vs Drupal 8 debate: it's a decision impacting your budget and future-proofing (or not) the enhancements that you're about to implement.
In this respect, our web development team in Toronto has done its best to “pile up” the crucial pros and cons for each one of the two paths that you're now challenged to choose from.
Think them through, give honest answers to all the strategically chosen questions included in our little “questionnaire” here and you'll find your (own) way of leveling up your website:
To Upgrade or to Migrate? And a Few Other Key Questions to Ask Yourself
So, here you are: facing the challenge of taking your Drupal 7 website to the next stage of its evolution! But which one is it: the upgrade phase or the migration one?
Now here are some preliminary questions to ask yourself right now. It's the answers to these particular questions that will weigh heavily, later on, on your decision-making process:
1. To what extent will this “maneuver” influence my website's stability, lifetime and level of flexibility?
An extra boost of flexibility, reflected in the “edit content on-the-go” functionality, or the perspective of ongoing support for many years to come will undoubtedly influence your decision!
2. Will my site's code get easier to maintain?
And this is a crucial question to be asking yourself at this phase of the whole decision-making process: how convenient will it be for your Drupal developers to maintain/update your site's code on a long term?
3. How many resources of time do I need to invest?
For time sure is money! How long will it take to implement those new enhancements on your website? Does it involve a lengthy training process for your team, as well?
4. How easy will it be for my administrators to manage content on my website?
A simplified content editing/publishing process is what will guarantee you an independent editorial team. Empower your editors and your site admins and you'll streamline all non-coding processes on your website!
With each question that you'll answer you'll be sketching your company's “specific context”. The one favoring either the upgrade or the migration way for ramping up your Drupal site!
Drupal 7 vs Drupal 8: Key Comparison Notes
Does its “age” automatically give Drupal 7 an advantage over Drupal 8?
No doubt about it! Drupal 7 is now capable to “tempt” you with a heavier load of modules, stable modules and with a longer period of time that the Drupal community has spent constantly improving it.
And yet! Drupal 8, although “younger”, is taking advantage of Drupal 7's weaknesses and shortcomings. Basically, it's equipped with all the functionality that its predecessor lacked.
Speaking of which, here's what Drupal 8 brings new to the table:
top popular modules have been moved to core
an advanced, easy to handle configuration management system
mobile-friendly backend: jump on the “edit content on-the-go” trend
a new era for the “content as a service” movement, thanks to its API approach to content delivery
object-oriented code: by using Symfony and Twig Drupal 8 “surprises” you with a more logically structured code (do take into account, though, that your developers will have to be already familiar with object-oriented coding)
easier-to-edit content: the very essence of content management
one-click code deployment: deploy your code faster and (therefore) as frequently as you have to
pre-built multilingual support: you no longer need to leverage a whole “fleet” of modules for supercharging your website with multilingual capabilities
ramped up performance and scalability: 2 enhancements you just can't underestimate especially if it's a large-scale, content-packed website that you own (one carrying a heavy ecosystem of third-party technologies “pomping” data into it)
easier third-party integration
Your Final Decision Depends Greatly On...
the number of custom-built elements on your current Drupal site: the more of them, the more complex (lengthy and pricey) moving it over to Drupal 8 will get
the goals that you're aiming to achieve via your new enhancements: is it just a new basic feature (just a few hours' work) that you're planning to add or a major enhancement, which would justify the migration process?
the “weight” of your Drupal 7 site's load of data: and its complexity, as well
whether you have a standalone website or a multi-site: needless to add that you should have all your sites (if it's a “cluster” of sites that you own) running on the same version of Drupal
your company's resources of time and money: an upgrade of your current Drupal 7 website won't, indeed, impact your budget to the same extent as a migration process would
Upgrade Your Current Drupal 7 Site If...
it's mostly custom-built: it features custom modules, custom-made workflows which would take longer to recreate and to adjust to Drupal 8's particularities
you need to have your new enhancement(s) up and running on your website in no time
it's basic features only that you're planning to upgrade it with
you're constrained by a tight budget: a factor which will weigh heavily in the Drupal 7 vs Drupal 8 balance
Make the Leap to Drupal 8 If...
the specific workflow on your website depends greatly on a streamlined content editing process
you need to make code deployments on a regular basis
it's complex enhancements that you want to implement
your current Drupal 7 website is a low-complexity one
the overall success of your upgrade strategy depends on high levels of performance and scalability
you value the ongoing support which, well, the Drupal 7's support team will stop offering you at some point
So: Drupal 7 vs Drupal 8? Will you stick to the former or level up to the later? Which direction do our “questionnaire's” results point you in?
Adrian Ababei / Aug 30'2017
A web life without plugins, without extensions for web designers and developers or add-ons! Still: as competitive and as demanding as the present one! Just try and picture yourself as a web designer in this given web environment!
Would you manage to stay relevant? With no design toolkit to boost your productivity, to lighten your work and to turn repetitive and otherwise time-consuming tasks into a matter of just a few simple clicks?
We didn't think so either! Luckily, in today's web life (imagination test over now!) you're definitely not short on choice when it comes to life-saving extensions that you get to drastically speed up your workflow with.
And since no designer worth his/her salt would ever stop adding new and new useful extensions to his/her toolbox, here are our 7 recommendations for you:
1. Spectrum
How could you even dare hoping to provide the best user experience on the websites that you're designing without embedding accessibility into your efforts?
Well, Spectrum is your “ally extension” in all your accessibility implementing and constantly improving endeavours! Basically what it does is enabling you to visualize your work-in-progress exactly as a visually impaired visitor would!
It'll point out to you low contrast problems and issues of badly chosen colors (from the standpoint of those users with color vision deficiency). Once the issues highlighted, you can go ahead and... handle them!
2. CheckMyLinks
Now speaking of creating an optimal user experience: broken links will easily “sabotage” all your efforts in this respect!
And opting for a ridiculously time-consuming method of closely examining your entire website, link by link, is no option in modern web.
CheckMylinks is! This extension will do all the “dirty work” for you: it will crawl into your website and run an in-depth check-up on your entire “infrastructure” of links.
Once you have the “link diagnosis” delivered to you, applying the right “treatment” will be less time and energy-consuming, wouldn't you agree?
3. Eye Dropper, One of The Life-Saving Extensions for Web Designers
How many times haven't you experience a “love at first sight” for certain... colors found on other websites? How could you turn such a “got to have it” color into an accurate source of inspiration? You take either the long or the short path:
you take a print screen, enter your screenshot into the photo editor of your choice and, using your eyedropper tool you engage in a looong, irksome (and nonetheless frustrating) color-identification “marathon”
you install this Chrome extension, give that “irresistible” color a click right there, on the website, and, as if by magic, you'll discover precisely what color it is
Accuracy, time-efficiency and, of course, productivity-boosting! With Eye Dropper you'll kill not 2, but 3 birds with one stone/click!
4. Window Resizer
Compare these 2 possible scenarios here where you need to check how that website that you're currently working on would look like on various devices, having multiple screen resolutions:
you literally put together a “pile” of mobile devices having some of the most common screen sizes and... test your Drupal site on each and every one of them
you install Window Resizer and carry out an UI testing process right in your browser's window, which will adjust, automatically, to all the given screen sizes; this way you'll get to see how your site is going to look on all of those screen resolutions
Now could you deny that Window Resizer could easily get included in the exclusive group of “can't live without" extensions for web designers”?
5. MultiClipboard
Here's one extension that will streamline your code copying-and-pasting workflows! And make you ten times more efficient, needless to add!
Practically the MultiClipboard plugin does precisely what it promises: it allows you to simultaneously “joggle” with multiple clipboards! It makes it easier for you to copy and grab code from one place and store it in a different Notepad file.
Since it keeps track of your recently copied texts, you get to retrieve them and paste them back to their original files!
6. WhatFont
What font is that? The one that instantly caught your eye on that website you were surfing on and that you still (secretly) fancy about?
How can you tell for sure? You harness the WhatFont's power, that's how!
Once enabled, you only need to hover on that text written in the attention-grabbing web font and voila: you'll identify this particular font in a... click!
Mission accomplished! Now you get to replicate it in that design that you're currently focusing on!
Easy peasy! And where do you add that it can also identify the services generating the web fonts and that its supports Google Font API and Typekit, too!
In other words: when in doubt, sift through the bunch of useful extensions for web designers available out there and find the answer to pretty much all your “web design questions”.
7. AutoSave
Put your valuable work under a heavy shield: this Notepad plugin will “watch your back” by automatically saving your work every few seconds.
So you can focus exclusively on crafting amazing designs instead of focusing on... clicking “Save” over and over again lest you should lose crucial coding.
And our list of 7 extensions for web designers that will speed up your workflow and make you X times for productive ends here! We're curious now: which are your own top favorite ones? Is/are any of them listed here?
Adrian Ababei / Aug 29'2017
Web design trends may come and go, yet a visually-appealing image gallery never gets outdated! So, learning how to create a Colorbox Drupal image gallery in Drupal 8 is crucial if you aim to “dazzle away” your visitors!
And before we delve deep into our step-by-step guide on putting together your gallery, we feel like stressing this out: Colorbox for Drupal 8 is an image field formatter in entities and views! Nothing less, nothing more!
But one that:
pairs with the Insert module
easily incorporates image styles and image field
it's ideally customizable
Now let's get straight to the core of our tutorial, which will take you from installing to key setups, to customization and all the way to theming your Drupal image gallery with CSS:
Step 1: Install The Colorbox Module and Its Libraries
Installing Colorbox will be a two-step stage, in fact:
First, you download and install the module itself
Next, you install the resources-loaded library that your module won't actually work without
And it seems that “2” is your “lucky number” in this process, for there are 2 possible ways of installing the Colorbox module on your Drupal 8 site:
you either download it to your PC, then navigate to the “Extend” page and hit the “Install new module” button
or you right-click the module's download link, copy its location, paste it on your Drupal 8 site's “Extend” page (logging into your admin panel, obviously) and then... hit the “Install new module” button
The choice is yours, the result is the same!
And you're almost done! “Almost”, for you still need to install your library in the “sites/all/libraries” folder on your Drupal site. Just access the same link on Drupal.org, go to “Dependencies” and click on the first link that you have there: “The Colorbox plugin 1.x“
Luckily, Drush saves the day, once again (and your time, as well) providing you with a simple command to install your library: drush colorbox-plugin. Easy peasy!
Note: since we're at the installing phase, we seize the chance to suggest you go ahead and install a Bootstrap-based theme, as well!
Step 2: Create Content for Your Future Drupal Image Gallery
Now that everything's successfully installed on your computer and ready to be leveraged, let's create some content for our virtual gallery, shall we?
Here are the easy steps to take:
Structure > Content types
Create a new content type for your Colorbox image gallery
Set up a new Image field for your newly created content type
Now it's time to run a quick test on our gallery and you'll need content for this; “dummy” content accepted, too!
But first things first: name your new gallery! Then manually upload some of the images that you've already prepared for your gallery or use the Devel module for generating dummy content.
News alert: you get to leverage the MultiUpload option added to Drupal 8 and enter all your images at once (instead of one at a time, like we used to do it)!
Now let's go to the next key step of this tutorial on how to create a Colorbox Drupal image gallery in Drupal 8: creating the image style!
Step 3: Configure The Image Style
Now have some fun configuring those images to your liking:
Navigate to Configuration > Image styles (it's right under “Media”)
Name your image style
Hit the “Create new style” button
Great! Next, it's time you added a new effect to your newly created image style so that your images get sized the way you need them to.
For this:
Go to Effect
Select the Scale and Crop effect setting the width and height of your choice
Hit “Update Style”
Step 4: Put Together a View When You Create a Colorbox Drupal Image Gallery
You must be looking at the images in your gallery getting all piled up one under the other right now, with... no Colorbox effect whatsoever!
No need to despair! It's perfectly predictable and easy to “fix”: you just need to create a view: Structure > Views > Add new view!
Note: once you choose your new content type to keep in mind to select the “Gallery” type and to have your block displayed as a “View”, not as a “Page”!
Next “Add the Field” for your image. Then:
Enter your class type: Block > Style Options > “Row class”
Name your class: Block > CSS class > CSS class name(s)
And finally “Save” your view
Step 5: Place Your New View/Block
And it's time you placed your newly formatted block (or “block displayed as a view”, if you prefer), a step you can't overlook when you create a Colorbox Drupal image gallery:
Go to Structure > Block layout
Hit the “Place block” button and select your new block
Note: your view might not look exactly visually-enchanting right now. Yet, no need to worry, for we'll be applying CSS to it later in this tutorial. Also, at this stage of the process, you can't preview it in Views; you can only visualize it once it's live, on your website.
Step 6: Make The Due Adjustments to Your View
Since your view is not yet “ready to be shown off to the world”, you need to go back and edit it:
Choose the “Content: title” field > “Rewrite results”: here type in your title tag as {{ title }} (you'll then be able to style the title text and to move it, as well)
Choose the “Content: image” field> “Formatter” field > set it to “Colorbox” > “Image style for content”> set it for the image style that you've already created at Step 2
Step 7: Add Some CSS Styling
And it's about time that you “beautified” your new Colorbox gallery! Define the way your images and text will get displayed by theming it with CSS! For instance: you might fancy its title to be displayed over the images in your gallery, as a caption.
The location of your CSS file will depend greatly on the theme you'll choose to use!
The END! How about putting into practice all these info, tips and tricks here to create a Colorbox image gallery in Drupal 8? One to upgrade your current content and to impress your site's visitors with!
Adrian Ababei / Aug 25'2017
Managing dozens of edits and tones of suggestions! This is just a brief and highly rudimentary definition of project/team management.
Therefore, it goes without saying that collaboration within the team makes the perfect “shield” against pure chaos, time-consuming version control problems and challenging information tracking issues.
And this is precisely why Google's new G Suite features are “collaboration features” first and foremost and some truly handy, real-time editing features secondly.
Here's just a quick “teaser” on this update of Google Docs, Sheets and Slides:
built-in add-ons tailored to your organization's specific workflow
improved version control management tools
advanced information tracking, improved search results
And now, without further ado, let's put the spotlight on Google's new G Suite features:
1. Improved Version Control
And this is gold when it comes to effective time and teamwork management!
Just try to turn back the hands of time and to go back to that “prehistoric age” when teams used to share docs by email and to pile up a whole load of doc versions, each one having its own name. Each one sent out to all the other members of the team.
Now, come back to the present time when Google's new G Suite features include some well-improved version control management tools!
Let us detail: now you get to edit a “draft 1” document as many times as you need, Google automatically saves it each time you apply a new change; once you're through with the editing you can go ahead and name it “draft 2”.
Google will promptly store all these multiple versions, that your team can assign custom names to, and so each team member gains access to the whole “version history”.
Just navigate to Select File > Version history > Name current version and keep a close track of and easily manage all your team's edits in that specific document (slide or sheet)! You and your team members can see the entire “work in progress” and access any specific older versions of the same doc.
2. One of The Handiest of Google's New G Suite Features: Preview a “Clean” Doc
Here's a new reading experience-enhancing feature that Google introduces in its latest G Suite update: you get to preview a “clean” version of your current document!
Basically, anyone from your team can navigate to Select Tools > Review suggested edits > Preview accept all/Preview reject all and see that specific doc either:
“clean”, lacking any of the suggested edits/comments
with all the subsequent editing marks added to
3. Accept/Reject All Edit Suggestions With Just One Click
OK, so “collaboration” sure is the keyword to describe Google's new G Suite features, yet there's another one we can add: convenience!
For instance: you get to either accept or reject all the suggested edits at once. With just one click! Simply go to: Select Tools > Review suggested edits > Accept all or Reject all.
This way you're sparing your team members' time. The time they would otherwise invest in reviewing every formatting or punctuation mark edit.
4. Suggest Changes On-The-Go, on Android and iOS
Long gone are the days when you could turn on suggestion mode and do your editing exclusively on your PC.
By far one of the much awaited of the Google's new G Suite features is precisely this one: you now get to edit your doc on-the-go, right from your mobile device!
Just hit the “...” placed in the top corner of your document, sheet or slide and turn on the “suggest changes” mode. Talking about convenience, right?
5. Promptly Compare Doc Versions and Track Changes
Along with “team collaboration” and “convenience”, “promptly” is another suitable word to define Google's new G suite features.
You get to promptly review headlines thanks to the now built-in Workshare and Litera Change-Pro add-ons!
6. New Templates With Built-In Add-Ons Tailored to Your Workflow
Why should you have two separate “can't live without” features, when you can... have a powerful two-in-one tool instead? Meaning: why should you have time-saving templates, on one hand, and add-ons loaded with needed functionality on the other?
G Suite now brings you: templates with pre-built add-ons! With customizable add-ons to fit your own company's specific workflow.
For instance, you might depend on a tool like LegalZoom or LucidChart or rather DocuSign. Now you can have your template paired with precisely that add-on!
And there's more! If none of the available templates incorporating “luring” add-ons suits your needs, feel free to... create your own! Pick a template, pair it with the add-on of your choice and voila: custom-fit template integrated with your much-needed add-on!
7. G Suite Integrates With Google Cloud Search
Can you anticipate how this Google update will impact information tracking within your team?
Let us give you some hints:
your team members will no longer need to leave the currently opened document whenever they have to scan through all their internal docs searching for a particular piece of information: G Suite incorporates Google Cloud Search now
you get a richer set of search results, since the app will list every occurrence of that needed information across all your Google apps
In other words: you no longer need to specifically access Google Cloud Search to retrieve needed data! You just open up the Explore tab in your current document/slide and enter your search word(s). A whole list of Google apps (from your G suite) including that specific piece of information will then unfold.
And these are Google's new G Suite features that our team of Toronto developers here (who're “dependent” on G suite) are most excited about!
How about you? Have you had the chance to test any of them?
Adrian Ababei / Aug 23'2017
Consider these 3 real-life scenarios:
you need to “populate” a newly developed Drupal website with content
you need to migrate content from one Drupal website to its freshly redesigned version
you need to quickly “animate” a website wireframe with some demo content for one of your Toronto digital agency's clients
The YAML Content module is:
a handy tool ensuring a streamlined import/update process
a flexible way for you to manage the content that you need to migrate / update
… in each one of the 3 above-mentioned use cases!
Basically:
it helps you outline (mind you don't connect it to the module Outline) it the content to import by leveraging a YAML format
it streamlines the whole process helping you define a set of content which can be found in multiple content files on your site
it turns content updating/re-importing into a highly flexible, highly dynamic process thanks to the hierarchical way in which you get to visualize it and scan it through (notice the resemblance with the module Outline, which enables you to organize your entities in a hierarchical structure)
In other words: the YAML Content module turns the entire defining, structuring and dynamic updating of the content to be imported into an ideally streamlined process!
Now let's see why such a module was needed in the first place. What sets it apart from other Drupal tools alike:
The Interrelation of Content: Now a Problem Solved
With an entire “ecosystem” of Drupal modules ready to take on the role of importing and migrating content, a valid question might be: “Why the YAML Content module?”
What obstacle does it help you overcome? What added value does it provide?
Now if you've already dealt with content import scenarios, you must have surely “bumped” into the interrelation of content issue, right?
It's precisely this “sore point” that this content utility module comes to “heal”!
Practically you're enabled to define processing callbacks across the content to be imported and thus to easily insert new data/modify the existing one during the import process itself!
And here are some examples of tasks that you get to carry out precisely at the time of import:
import/reference managed data files
import image files
query existing entities
There's more!
Besides “dynamic processing”, you're granted with almost unlimited flexibility in terms of the type of entities that you get to define during this process. It's thanks to your content's YAML format, which closely parallels the entity and field API architecture, enabling you to apply it to almost any entity type and to support multiple field types:
menu links
nodes
media entities
file entities
taxonomy terms
block content
But There's no UI: How Can I Use the YAML Content Module?
It's true: the module doesn't provide a user interface! It's been built with back-end utility in mind.
In other words: you're triggering and managing the entire content importing process exclusively via some simple Drush commands!
Just run this command in Drush:
drush –filter=yaml_content
… and you'll get the whole list of commands available to you for interacting with the YAML Content module.
It will present you both with the commands that you need to use for importing your content files and the ones that you'll need for a “developer usage” of the module (meaning: if you need to delve deeper into the import services).
Leverage This Particular Directory Structure to Find The Content to Import
And this assumed file structure looks likes this (whether we're talking about a module, a profile or a sub-directory):
/content: all.content.yml files that contain the content data to be imported
/images: all images referenced
/data_files: all file assets using a file callback for loading and which are referenced
Wrapping Up
Things will never be the same again whenever you need to import content in a Drupal site!
enhanced user-friendliness for tracking down the content you wish to import
more “order” (thanks to the YAML format) in structuring your target content to be imported, which implicitly leads to a more streamlined import process
much more flexibility in managing your content
… the YAML Content module provides it with all and thus manages to stand out from the crowd of modules tackling the same content import “issue”. Feel free to take it for a spin next time you need to import/migrate content to a Drupal site!
Adrian Ababei / Aug 21'2017
“Progressive Web Apps are experiences that combine the best of the web and the best of apps.” (Google Developers). Brief, to the point, and encompassing, in just a few words, all the reasons why PWAs have gained so much popularity over the last few years!
They sure carry loads of potential to shape the future of mobile web in the years to come!
Now let's try a “guessing game” and see if we can guess why you've chosen to build a progressive web app instead of sticking to optimizing your current site for mobile:
they're... progressive: they work regardless of the used web browser
they're not connectivity-dependent: not only that they don't need internet connectivity to run, but they do load fast even in the context of a terrible network performance
they run on modern web technologies
they're “clusters” of app-like features
they're installable: users get to add them to their own home screens and to reuse them with a simple click on their shortcuts
they're responsive out-of-the-box
they're not constrained to refresh entire web pages when they're loading new content
they send relevant push notifications
they load at full-screen
they grow more powerful with time, as the user-progressive web app relationship “matures”, so to say
Moreover (and this is no tiny detail, for sure), to the memorable experience that a progressive web app delivers to the end user, add the benefit of a relatively low-complexity development process!
Speaking of which, here are the 5 best tools to use to build a progressive web app:
1. AngularJS, Polymer or React
When you say “web development” you instantly say “JavaScript”, right?
Yet, when you're planning to set up a progressive web app you should be more specific than that: you should “laser-focus” on one of its many tempting frameworks!
In this respect, here are the 3 ones that we recommend you to consider! Select your suitable core framework depending on factors such as your future app's complexity or the time limit that you need to adapt your workflow to:
Angular.JS
Pros:
probably one of the most powerful JavaScript frameworks for building web apps
the environment that its newest version, Angular 4.0, provides is the same for both for mobile and desktop web development
Con:
although there are plenty of tutorials out there that you could use, you might still find this framework to be too complex in case you want to build a progressive web app with just basic features and functionalities
React
By far this framework's most “seducing” feature is its component-approach to web development!
Practically all the components putting together the UI are JavaScript-based, which enables you to easily reuse them at need! A powerful UI development speed-booster tool!
Besides its component-centered approach we could easily point out a couple of other reasons for choosing React to power up your progressive web app with:
giant Facebook supports it (and along with it all its worldwide users, which are constantly testing it, as a global-scale)... need we add more?
it's React Native's foundation, meaning that you'll be able to easily and seamlessly port your React-powered apps to native apps
thanks to the component-based UI, you practically get to deliver your future progressive web app to any browser, device or operating system; using Node.js and Reactive Native, those components can render both in the browser, on the server and inside the apps themselves
Polymer
Now when time is a “merciless” projection of your client, Polymer makes the perfect choice of core framework to build a progressive web app!
It “spoils” you with:
templates
reusable components
… which stand for the perfect definition of a “fast app development process”!
Creating prototypes is, no doubt, the perfect use case for this framework! You can just make use of the template that Polymer provides you with for setting up the code of your app project and add on the client's input later on in the development process!
There's more! Since “fast” is the defining characteristic of this framework, where do you add that Polymer uses PRPL pattern for speeding up the app's delivery to the chosen device?
Should we mention, as well, that the template features the Google-emblematic material design out-of-the-box?
2. Webpack: An Essential Tool to Build a Progressive Web App, a Custom One
If the aforementioned Polymer makes a great choice for getting started, for setting up your apps's prototype, then Webpack gives you access to the next level! The one where you build a progressive web app that's more complex and front-end driven.
Its two major benefits:
it's a module bundler: it enables you to bundle your JavaScript resources (even fonts, CSS, images and other non-code assets), which will get treated as JavaScript objects, meaning that they will load significantly faster
it simplifies the whole creation of dependency graphs (you'll no longer need to display the links to all your JavaScript files on your HTML page)
In short: managing dependencies gets so much more streamlined with Webpack
Con:
along with its speed-enhancing features, Webpack comes with a quite steep learning curve. A manageable one, though, if you consider all the learning resources and documentation available online (that aren't beginner-friendly though, so get ready to invest some resources of time for learning your way around this JavaScript module bundler)!
3. Knockout
If it's a lightweight, yet functionality-loaded, quick to set up progressive web app that you have in mind, then Knockout is the framework to go for!
Here are some of the powerful features that make it an indispensable asset for your toolbox:
it comes with a light library (13 KB), yet carrying a heavy load of functionalities
you get to “inject” its library into an existing website without extensive rewrite
it's easy to learn
it provides you with templating, meaning that building complex apps gets significantly faster (no more duplicated DOM elements)
it works exclusively on JavaScript (making your future app accessible from any browser, any framework)
it's great for handling MVVM bindings between HTML and JavaScript
it enables you to extend your HTML
it comes with a load of pre-built attributes (so you won't need to write them, yourself, like it's the case with other “rivaling” frameworks)
And this is how our suggested “arsenal” of tools to build a progressive web app looks like! Keep in mind, though, that this is an ever-changing list, considering the fast pace at which new web technologies emerge in the digital landscape!
Adrian Ababei / Aug 04'2017
Wasn't it just yesterday” that marketers would “stuff” loads and loads of keywords into their digital content? Long gone are those days when the roles of “keyword collector” and “links hunter” were so hype! Completely different jobs and roles lie ahead, in the future of digital marketing!
Staying relevant, as a digital marketer, in the context of:
globalized futuristic technologies
people being “insatiable” for innovation
… means creating “experiences that people want to consume” (Adam Kleinberg, CEO of Traction)
And even though we don't own some sort of crystal ball that would tell us for sure what the marketing space has in store down the road, this industry, too, has its leaders. And their guesses do weight a lot!
Which experimental digital marketing jobs of the present will make it big in the future to come? Here are 5 of these next-generation roles in digital marketing, the ones that are most likely to turn from "eccentric" to... indispensable in the years to come:
1. Machine-Learning Engineer
How could our algorithmic present world not give rise to a specific job for the future of digital marketing?
Delivering “just” digital content will be hardly enough in the years to come: content blackened-up by machine-learning algorithms and statistics will the be the only “relevant” one in the future!
And here are the skills defining the profile of a machine-learning engineer:
proficiency in programming
a working knowledge of ML techniques
fluent in coding (a hands-on experience coding in Scala or Python)
statistics (mathematics, physics) expertise
In short: a machine-learning engineer is a kind of 2-in-1, expert statisticians-passionate programmer!
2. Bot Developer
Virtual assistants are part of our day-to-day lives. They join us when we travel and we need to find the best place to eat or we simply get lost; they accompany us on our shopping sprees and the list of interactions can go on...
So, it's pretty obvious that, since people slowly, but surely, grow “dependent” on bots (since they make our lives easier), bot developer roles will be in high-demand in the near future!
Here's what you should check off your list of knowledge, talents and gained expertise:
preferably an undergraduate degree in computer science
familiarity with design, linguistics, engineering, ethic and natural language processing
strong understanding of interactive language arts
content writing talent
a solid background in game and interface design
Major tip: now if you want to be two (or three) steps ahead of this portrayed future of digital marketing, opting for a niched domain (and implicitly gaining a niched expertise, too) will “future-proof” your job!
3. Mixed-Reality Designer
Since mixed-reality's at the intersection of art and science, if you're passionate about graphic design and drawn to the emerging tech sector, you're on the right path already!
Besides these two passions of yours (design and emerging technologies), here's what you should consider identifying or adding to your list of competences, talents and acquired knowledge:
a degree in computer animation or graphic design
a working knowledge (if not a hands-on experience) of user experience design, social psychology
proven storytelling skills (telling stories through computer images is a talent/skill you can't afford to ever stop polishing)
some level of experience working with Unity3D
4. VR Editor
“Constant seekers of the new”, “early adopters of innovative technologies”, “visionaries” and “advocates of the video's power to”:
persuade
inform
inspire
This is how VR editors could be briefly described!
Virtual reality is no longer a “too eccentric, too sci-fi like” type of technology.
It stands all the chances to turn into a technological realty (think Google Cardboard for instance!). So, people “crazy” enough to shape facets of this virtual reality will be constantly needed in the future of digital marketing!
If you're considering such a role, make sure you fit the following profile:
hands-on experiences with Unity3D and Adobe Creative Cloud
extensive experience in applying the object-oriented development patterns
passionate about video arts
some sort of project management experience
And we feel like stressing out that: besides all the tech competencies that you should pile up on your resume, it's vital to genuinely perceive video as a powerful channel aimed to move, inspire, inform (and all the other above-mentioned “roles”)
5. IoT Marketing Strategist: An Indispensable Role in The Future of Digital Marketing
With a number of 8.4 billion connected devices by the end of 2017, worldwide, some kind of robust strategies for handling these “chit-chatting” devices are needed.
Therefore, the role of IoT marketing strategist will become a both common and indispensable one by 2020.
And here's what an IoT marketing strategist's resume should highlight:
his/her telecommunication engineering background
laser-focused skills in radio frequency technology, automobiles, wearables, retail sensors, digital signage
Note: your “vision”, if we may call it so, as a potential IoT marketing strategist, should be one where human-machine interactions happen in the most natural way.
And these are the 5 most promising jobs (now perceived as “experimental”) which leaders in the marketing industry bid on and forecast that will shape the future of digital marketing. What's your opinion on this topic? Will these 5 roles be in high-demand in a few years or rather get replaced, in short time, by the ones emerging from the next wave of innovation?
Adrian Ababei / Aug 03'2017
“The Google search box is great when you’re looking for a specific answer, but there are also moments when you just want to catch up on the latest for topics of interest.“ (Tamar Yehoshua, VP of Product Management).
And there you have it! The NEED that you might or might not have been entirely aware of! And the fact that Google enhances its search app with a personalized news feed comes to satisfy precisely this need: to enjoy a perfectly tailored, highly customizable experience when searching for content on mobile!
To explore up-to-the-minute info precisely from your own areas of interest!
“How does Google incorporate this personalized news feed section into the search?” Via tappable shortcuts placed right on top of the Google search app or right underneath the search bar (in case of the site's mobile variant).
And now enough with the “teasing”! Let's delve into details:
Tappable Shortcuts Now Accompany Google's Mobile Search
“Starting today in the U.S., we’re introducing tappable shortcuts on the Google app for Android and iOS and Google.com on the mobile web that give you easy access to great tools and the ability to explore deeper within topics you care about.” (excerpt taken from Google's announcement on its mobile search redesign)
Practically from now on when you're using Google's search app or Google.com on mobile, you're presented with tappable shortcuts. It's them that enable you to explore Google's personalized news feed.
Once clicked on, they're your free ticket to “steamy-fresh” news in areas such as sports, weather, entertainment, food and drink!
Expect a news feed perfectly tailored to your own topics of interest and preferences (reflected in your previous interactions with Google)! A feed “seasoned” with content related to what's trending in your own area and around the world at that moment, as well.
Need to know whether to take your umbrella with you today? Didn't manage to watch last evening's baseball match and you're dying to find out the score? Are you new in town and you need guidance for finding the best place to eat? It's all there, at a finger tap's distance! All the needed information and the freshest news “stacked” in your handy Google feed!
Moreover: expect your collection of shortcuts to get enriched with new ones standing for all the big events (let's say the Olympic Games for instance) shaping the given present time.
Also, Android users get “spoiled” with a collection of “extra” shortcuts: flights, currency converter, internet speed test, translate, nearby attractions, hotel!
Nothing new under the sun, we could easily say! This so called “new” functionality wearing Google's signature isn't new at all if we come to think of it. Convenience is, in fact, the “novelty” factor here: you get your tappable icons nicely structured into categories such as Tools, Fun, Weather, Lifestyle, Nearby, My Stuff. An organized, tappable interface!
Is there any need to add which is Google's own gain (if you, on your hand, gain loads of convenience)? The company's main objective is to retain its users on its search app!
How Will This “Move” Impact The Google vs Facebook Rivalry?
This is the question!
The fact that Google enhanced its search app with a personalized news feed not only that aligns the giant search company with the “portals' revival trend”, but it puts it in direct competition with another giant: Facebook.
It was Facebook itself that seized the opportunity of “reviving” the concept of portal-style content! And of launching the concept of portal-like apps where users could find and consume their sports, local, news, weather-related content in the same place.
And yet, Google's social media-style news feed differs! It's the very personalization factor itself that sets it apart from Facebook's!
Google's personalized news feed is custom-fit so that its should reflect users' areas of interests and search histories entirely!
Whereas Facebook presents its own users with a news feed section displaying content defined by the people they know, by their very own social graph and by that news' popularity itself!
See the difference?
The Editorialized Content Issue
Along with this whole redesign of Google's mobile search comes a legitimate concern: will Google editorialize the content delivered to its users in its news feed section?
Will it manage to entirely avoid the “risk” of editorializing content?
Most unlikely! Reaching and maintaining a level of “pure” objectivity in Google's personalized news feed section will be as likely as an AI making decisions “outside” its coded-in bias.
How Will This Personalized News Feed-Powered Search Impact Us?
“The way we explore and consume content online will never be the same again”. This is our team's here, in our Toronto web development agency, answer to your valid question!
And it's quite obvious in what way! Since now we're presented with Google's personalized news feed before we even get to enter a text search query, we're no longer “constrained” to look only for specific answers to our questions.
We can also just catch up with the latest news from our areas of interest. And we can just dive deeper into the topics that we're interested in.
The END! We're more than curious to hear your own thoughts about this shift: how do you feel about being now “greeted” (or better said “tempted”?) with a set of tappable shortcuts, an integrated part of your whole search experience, instead of that timeless, ultra-minimal design emblematic for Google?
Adrian Ababei / Aug 01'2017
Content is king, yet speed is everything! Or, better said: “content is king, but visual content is... Emperor”!
And since “visual content” means images (and videos), you run the risk to get your precious website bogged down by a too heavy load of (otherwise) visually-striking images.
Trying to impress, you to end up frustrating your visitors due to your site's slowness!
But there's good news: Cloudinary's Website Speed Test Image Analysis Tool! A “refined” tool to add to your web development essential toolbox!
A website performance tool that goes beyond the “you need to re-size your image” advice and empowers you with a whole report on how to:
encode
optimize
re-size images on your website
It measures, diagnosis and, moreover: provides you with a “treatment” for your site's poor load time, too!
And now, without any further ado, let's see this tool “in action”:
How Does the Website Speed Test Work Exactly?
But first, what would you say about simultaneously trying this Image Analysis tool itself? This way going through our short “tutorial” here will be much more interactive.
Just enter your site's link in the bar there, hit the “Analyze” button and... let the site performance report unfold before your eyes!
a. It Runs an Analysis of The Site's Overall Performance
Can you see the green, oversized letter grade on the top left corner of your screen? Excellent!
This is just one of the 2 key metrics displayed to you in this section of your report:
a letter grade: do keep in mind that the Website Speed Test tool grades your website by the number of detected issues, not by their gravity. So, the more problems/mistakes your inventory includes, the smaller the grade you'll get!
an image weight comparison: it counts bytes (not problems) and counts the potential performance gains that your site could be exploiting instead
b. It Highlights Specific Issues
After you get your short report on your website's overall performance, the tool digs deeper, tracks down and highlights each web page's issues!
Every page-specific report will provide you with actionable information on:
your images' current status: how they've been sized and encoded
your images' “ideal” performance: actionable information related to their format, dimension, how you could have got them better compressed etc.
As you can see for yourself, the on-page analysis, too, displays both grades and a potential gains percentages.
Now, if you get “hungry” for even more actionable data, just dig deeper: hit the “See More” button!
Then you'll get to “satisfy your need” for even more detailed information about every single web page's current and potential performance. A report “split” into 3 main panels:
Current:
it grades every element “responsible” of an image's performance: format, fit, compression (yet, it's just these 3 first elements that count in grading the image), color space, color width etc.
moreover, in the panel's bottom half you'll get a list of solutions for scoring better grades for each one of those analyzed elements; you're being told what you could have done better when you handled you site's optimization (and this is gold!)
Optimized Image:
it's here that you're presented with your image's ideal size and compression (and sometimes even with details on how the Website Speed Test encoded it along with a short description of the image's actual content)
just download it leverage it!
Format Alternatives:
provides you with several alternative options to the single one presented to you in the “Optimized Image” panel
you get to scan them through and choose the one that best fits your site's optimization needs
From Pointing Out the Problems to Listing their Solutions
Tackling the issues highlighted to you in the Website Speed Test report depends greatly on your (your team's) specific workflow. On the web development tools and technologies that you've already integrated into your workflow and that you're already familiar with.
For instance, has this image analysis diagnosed some compression issues? Then it's you to decide whether you get them fixed using a compression GUI or an ImageMagick instead!
The same goes for all the other issues' systematic fixing methods.
Just A Few Extra Details
Website Speed Test is result of Cloudinary and WebPagetest joining forces
it's integrated into the WebPagetest's navigation bar: just look for the “Analyze Images” tab!
you should incorporate it into your own “arsenal” if, as a web developer in Toronto, you're testing your own websites and you want to get empowered to fix the signaled issues yourself
in short: Website Speed Test turns a plethora of site performance-boosting details into measurable and (moreover) actionable metrics: into “fuel” for your own site performance-enhancing plan!
Have you tried it yet? Do you think that it sets itself apart from other website performance analysis tools that you've used so far? Do share your (first) impressions with us!
Adrian Ababei / Jul 28'2017