LATEST FROM OUR BLOG

Take your daily dose of (only) relevant news, useful tips and tricks and valuable how to's on using the latest web technologies shaping the digital landscape. We're here to do all the necessary information sifting for you, so you don't have to, to provide you with content that will help you anticipate the emerging trends about to influence the web.

The YAML Content Module: A Handy Tool to Outline the Content to Import!
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! ... Read more
Adrian Ababei / Aug 21'2017
Top 3 Tools to Build a Progressive Web App 
“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! ... Read more
Adrian Ababei / Aug 04'2017
5 Experimental Jobs Shaping The Future of Digital Marketing
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? ... Read more
Adrian Ababei / Aug 03'2017
Google Enhances Its Search App With a Personalized News Feed
“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? ... Read more
Adrian Ababei / Aug 01'2017
Put Your Website's Load Speed to The Test: The Website Speed Test!
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! ... Read more
Adrian Ababei / Jul 28'2017
Which Drupal 8 Ecommerce Modules Are Truly Indispensable to Your Site? 
Would you settle for out-of-the-box functionality and still dare to “dream big”? To aim at above-the-average conversion rates on your Drupal ecommerce site?  Or are you determined to go beyond the “by default” set of features and to supercharge your online store with some extra power, too? With a couple of additional Drupal 8 ecommerce modules, as well? And it's only then that you'll feel entitled to hope for “truckloads” of online shoppers! Now if the second scenario best fits your strategy, then you must probably be slightly overwhelmed right now as you dig through the wide array of modules for Drupal ecommerce sites.  How do you avoid “stacking” non-essential Drupal 8 modules on your website? How do you filter them and “extract” only the “bare essentials”, the ones that shouldn't miss from your ecommerce site if you have big plans for it? You use our list here below for sorting them out, that's how!    1. Drupal Commerce  Take it as your site's transition from a basic online store that pretty much just... takes orders, to a fully-fledged, feature-rich and perfectly equipped ecommerce “machine”! And this “transition” is actually made possible thanks to a heavy “arsenal” of features and functionalities that the Drupal Commerce module supercharges your site with. Let's list just the most notable ones of them:   it enables you to have multiple payment gateways   it integrates social media   it comes with mobile responsiveness capabilities   it enables you to display international currencies   it empowers you to create product types having tailor-made attributes    it grants your web designers more freedom   it's PCI compliant (your servers won't ever store your customers' credit card details)   it makes “joggling with” dynamic product displays possible   And the list is actually a never-ending one. It's a multi-purpose, “Swiss army knife” type of module (or “cluster” of sub-modules?) that covers all aspect related to:   products  orders customers payment processing   If you dare to go big, to build out a large-scaled website, to go international, as well, then this module shouldn't miss from your own “arsenal” of essential Drupal 8 ecommerce modules!    2. Ubercart Now if you want to start small (right away) and grow big, then Ubercart makes the perfect Drupal e-commerce solution for your strategy! It will help you get your basic shopping cart system up up and running in no time! Take it as a basic online shop “kit” that you can assemble hassle free! And when we say “online shop” we do refer to a wide variety of ecommerce industries that a Ubercart-powered website can serve:   digital downloads selling physical, shippable goods  subscription billing services   … and it's ideally easy to administer it, as well! Once you've set up your online store, you get to instantly “harness its power”, to use the entire plethora of Ubercart features at its full potential:   manage products and orders   keep track of your stock levels with a simple mouse click   create configurable product catalogs   incorporate your favorite payment system (and even add a whole “bunch” of them, that your customers can choose from)   generate product and customer reports   add multiple images to each one of your products   set up an automatic organizer for your items   display shipping quotes   Note: by far the most notable Ubercart feature is the one-page checkout functionality. And we all know to what extent a simplified, just-a-few-steps check-out process can positively impact UX and, therefore, the sales, too, right?   3. SEO Checklist: One of the Must-Have Drupal 8 Ecommerce Modules  So let us recap! You want:   a module that should instantly supercharge your site with all the needed functionality that would turn it into a powerful sales-generating “machine”   another Drupal module that could help you set up your store hassle free, providing you with all the needed features in the form of a kit to put together   Yet you'd end up with nothing but a “deserted” site, that no one would visit (for no one would know about it) if you didn't have your on-page SEO in place, right? And since “SEO” sure means a never-ending “to do” list, what more convenient way to take care of your ecommerce site's SEO than by actually... checking off a list? A functional list presenting you with all the tasks you need to carry out! Guess-working is out of question, maybe hiring a team of SEO “gurus”, as well, and venturing all by yourself into the “deep see of SEO possibilities” doesn't sound like a strategy. Therefore, installing and leveling this module's “convenience” and superpower is a must! Haven't you “sprinkled” enough (proper) keywords across your piece of content? Have you entered the right title tags? Have you chosen a riskily lengthy title?  When in doubt, let the SEO Checklist module show you the right way to optimize your site! When you've missed to complete a certain SEO task, the same module will instantly signal it to you! Moreover, it's regularly updated! So, you don't need to worry about being left behind Google's algorithm changes. Your list of tasks to check off will get automatically adjusted to those changes! Note: not only that your SEO checklist “warns” you about the wrongly completed or missed tasks, but it enables you to keep a close track of your work, as well. To closely monitor your progress! Take it as more than just one of the indispensable Drupal 8 ecommerce modules: take the Drupal SEO Checklist as a “handbook” including all the best SEO practices that ensure you a place right into the spotlight on the search engines' stage!   4. Adsense Thinking of running Adsense adverts on your Drupal 8 ecommerce site? There's a module for that! Practically what Drupal Adsensde module does is providing you with the needed “kit” of add blocks that you can then easily move around and display on your site to your liking. It even enables you to point out the roles that it should disable those ads for! Note: do keep in mind that you'll need to sign up with Google Adsense first things first, before you go ahead and trigger this module's functionality on your site!   5. Currency Now let's go back to your “go international” plan! You're now facing a whole plethora of challenges, ranging from “going multilingual” to... displaying your product's prices in each one of your visitors' currency, right? Well, you know there's always a module in Drupal for pretty much every functionality you need. And currency is no exception! The Currency module is one of those Drupal 8 ecommerce modules that “encourages” you to keep dreaming big! What it does is what its name says:   it displays your prices in multiple currencies, along with relevant currency information, too   it boosts your site with a currency conversion functionality   And it looks like we've reached “the bottom” of our list including all the “can't live without” Drupal 8 ecommerce modules! How does you own  list of “bare essentials” modules look like? Does it include other modules indispensable to your online store, as well?  ... Read more
Adrian Ababei / Jul 21'2017
5 Ways to Build Out a Well-Organized CSS Architecture 
Would we be wrong if we stated that the very “easiness” of writing CSS code is this language's “Achilles' heel”, too? It “lures” you in, it boosts your confidence as a programmer and than... nasty surprise... your web projects gradually turn into unmanageable messes! This is why the need of building out a CSS architecture, that we can organize and structure our CSS codebases by, has rapidly gained importance in developers' community! And where do you add that there are multiple well through-out methods for you to use for neatly and effectively structuring your CSS files! We've hand picked just 5 of them, “la crème de la creme”. But before we go on with our CSS organizing techniques, let's “look our enemy in the eye”! Let us highlight the challenges that we're currently facing while trying to effectively managing our CSS projects:   it uses global namespaces, leading to inevitable collisions and leaking styles   it's purely declarative: zero logic and no well structured workflow which would let all the other developers working on the same project know about the state of the project itself   it operates with inheritance: meaning that everything is interdependent and, therefore, highly “fragile”, prone to getting broken     And the list can go on.  So, now that we've pointed out the obstacles that we need to overcome when it comes to “taming” our load of CSS files into a scalable, easy to maintain CSS architecture (suitable for long-running, large projects, needless to add) let us point out to you the 5 “chaos proofing” methods:   1. OOCSS Which stands for “Object Oriented CSS”. The whole “philosophy” behind this CSS structuring and planning method revolves around the idea of creating pages/views by putting together multiple CSS objects! CSS objects which are independent from one another (see, the CSS's interdependence issue that we've just pointed out in our list of “drawbacks”). And when we say “independence” from a CSS code's standpoint, we can only imply that:   design and structure are separated  container and content are independent of each other, as well    And this whole “separation of concerns” driving principle has 2 major results:   the entire “load” of code gets considerably lighter (and this is a tremendous asset if we take large, code-packed web projects into account)   yet things get trickier the moment one of your Toronto developers tries to apply a change to a certain element's style: not only that the CSS will need to be modified, but classes will have to be added to the markup, as well    2. SMACSS “Scalable and Modular Architecture for CSS”, a style “guide” (rather than a strict framework) developed by Jonathan Snook. Now this approach to organizing your CSS code is more than “tempting”: it promises you a lighter code “cargo” and simplified code support. What more could you ask of a CSS organizer, right? Moreover, this technique operates with 5 sets of rules:   base rules: targeting a site's main default elements such as body, HTML, a:hover, input, button etc. They target your CSS assets, too, and “constrain” you to use attribute selectors and HTML tags mostly (and classes, too, but extremely rarely)   layout rules: which segments a web page into multiple sections including global elements such as header, footer, sidebar, article, defining each one's style too.    modules rules: includes reusable blocks, modular elements that you get to use several times on the same web page. Keep in mind, though, to avoid using tag selectors and id for module classes!   state rules: define the various statuses of those modular elements (e.g. hidden, active, inactive etc.). Moreover, you should know that all these variations get prefixed as following: is-active, is-hidden.   theme rules: define the design styles, how your modules will look like and they're particularly useful in case of larger sites with shared modules having different layouts throughout the websites.   Note: take the SMACSS approach as a guideline rather than as a strict method, or a set of rigid “rules”. As a web developer who'll use this method to build a well-structured, maintainable CSS architecture, you'll still be free to use your own namespaces for your class categories, to display them to your liking and so on. The only “common sense” rule is that of documenting your CSS code, so that all the other developers in your team should easily follow you along. But this “rule” stands irrespective of the CSS structuring approach that you might decide to adopt, right?   3. BEM, An Increasingly Popular Methodology for Building Out a CSS Architecture  … or “Block Element Modifier”, if you prefer, developed at Yandex! Expect it to be more prescriptive than SMACSS (for instance). BEM is more than just a set of basic guidelines: it delivers a strict method for you to structure your CSS classes into independent modules! And speaking of this method, although you'll find multiple variations on it, the basic structure looks like this: .block {} .block__element {} .block--modifier {} .block__element--modifier {}   It's only just “fair” that we presented each one of this structure's components right?    a block: any object on your site (a menu, a person, a login form)   an element: part of a block performing a certain function in the context of that block only: a login button, a menu item...   a modifier: the way you'll represent the variations of a given block (a search input field having a particular button style, a menu “tailored” to adjust itself to a footer or a sitemap etc.)   Key Advantages to Using the BEM Method as a “Backbone” for your CSS Architecture:   it's perfectly scalable, being a perfect fit for both small and large projects   it keeps you from nesting selectors (a well-known drawback when it comes to Sass codebases) thanks to its long, descriptive class names   it enables you to reuse your code: basically it works as a “code container” for you, which turns out to be a major asset especially if you're working on a large project where your team has to move “clusters” of CSS, JS and HTML code from one project to another   it's ideally suited for large, modular web development projects   4. Atomic CSS … or maybe you prefer “Functional CSS” instead? As for this CSS “organizer's” philosophy, so to say, we could formulate it like this: creating one separate, single-purpose class for each and every reusable property, while naming it according to its visual function! The undeniable advantages of such an approach to organizing your CSS code are:   a significantly lighter load of CSS code, since you'll get “empowered” to reuse your declarations an easy way to modify code (it makes applying changes to your modules less complex, for instance)   Yet, this method does come with its own flaws, too. Here are some of the most “painful” ones:   the class naming conventions come along with a high learning curve, too   it makes the style code closely linked to the Atomic CSS framework used for generating the classes   the class names aren't semantically linked to the elements, but rather describe property names    the display settings are in the HTML   as new CSS modules get added to the specifications, everything gets overly complex    Note: Atomic CSS has “succeeded” to split developers' community into 2 major groups: those that keep highlighting this methodology's major flaws and those that, on the contrary, qualify specifically these flaws as benefits instead:   the “semantic nature” of the elements are, in their opinion, already properly described by the element tags and your components' names   the fact that the settings are displayed in the HTML might turn out to be more convenient: this way you won't need to go through your entire maze-like CSS codebase to find out what settings are defined there   5. ITCSS: Build Your Manageable CSS Architecture for Large Projects Harry Roberts' “Inverted Triangle CSS” implies, as the name suggests: visualizing and structuring your project as a triangle. An upside-down one! This triangle-shaped structure would include the following “layers” of CSS code:   Settings Tools Generic Elements Objects Components Trumps   Practically, the IRCSS technique “constrains” you to order your CSS codebase not by the usual human-oriented patterns, but by those metrics defined by the programming language (along with its particularities) itself! Ordered this way, your code will get better “understood” and “exploited by both browsers and by the specific design of the programming language itself. It will no longer get organized by how a person thinks, but rather adapted to the language's own features and to the way browsers perceive it. This way, your ITCSS-based CSS architecture will end up to be:   easily scalable logical manageable  predictable rule-based   ... instead of an “untamed mess”!  Which one of the above presented 5 methods better suits your team's coding style? Your current project's specific needs and requirements? Go for the one that you find more suitable for your own team's specific workflow, coding style and for your web project's particularities and get your own “unmanageable CSS mess” ideally structured, too! ... Read more
Adrian Ababei / Jul 20'2017
5 Image Recognition Tools: Take Full Advantage of The Visual Web
Beware of visual content taking over the web or... even better: embrace the trend and stay on top of it! Maximize its potential to your brand's full advantage! Simply rely on some of the most powerful image recognition tools for “scanning the visual web”, for analyzing how your company's images and logos are being used. And by whom! Remaining deaf to all the possible “threats” lurking out there, in the visual web, and blind to all the opportunities that all those publicly shared images might carry is such a reckless thing to do! “Visually listen” to the user-generated content involving your brand! Deep analyze and collect priceless data from those scanned images and you'll manage to:   grasp a more accurate understanding of how your brand's being currently perceived, of how users interact with it gain an in-depth knowledge of your customers  turn the collected data into a valuable resource for hyper targeted demographic segments  supercharge your marketing strategy with a “visual listening” strategy, too   And now that we've pointed out to you the “whys”, let us reveal to you the “hows”, too! The best 5 image recognition tools that you could use for “visually listening” to both your customers and your competitors:   1. IBM Image Detection An AI vision software whose developers have taken image recognition to a whole new level! A whole new level of machine learning tasks automation! The whole image recognition technology powering the IMB Image Detection, supported by its Power AI toolset, enables it to “interpret” the images' contents: faces, approximate age, “rotten” food, gender, a clothing item's fashion style etc. And there's more! To its “out-of-the-box” image detection and visual content “understanding” power, add the flexibility that it offers you, the brand using it, to actually tailor its “detection tasks” to your own needs.  Take this scenario for instance: "You own a grocery store and you get to use this image recognition software that scans products during the checkout process and instantly signals to you the... spoiled veggies, let's say." Now only that it's “powerful” by default and that it empowers you to adapt its image analysis tasks to your brand's specific needs, but it's developed with easiness of use in mind, as well!  Your developers get to tailor the software's image detection tasks and to deploy the image recognition models right away!   2. GumGum The team of “visionaries” behind this in-image advertising platform has launched a new image detection software that will enable your marketing team to track down, by scanning through the visual web, the most suitable photos for their brand. It might still be the “new kid on the block” when it comes to image recognition tools, yet it sure is a highly promising one.  Now what this visual intelligence software actually does is help your brand “activate imagery”, as these folks like to describe their new “baby's” mission! It's developed to supercharge your advertising campaigns with the most relevant pictures on the web. Just sit back and let it do the job of an entire team for you! It will dig deep into the visual content on the web and pick precisely those images that compliment your brand! And when we say that you can relax, sit back and... sip a cup off coffee, we literally mean that: where do you add that this computer vision platform can collect, assimilate and analyze all the key social media data for you! Speaking of convenience in terms of turning images into powerful insights to fuel your marketing campaigns with, right?   3. LogoGrab Do you know how your logo's performing on the “immense” scene of the visual web? What visual content is “starring” it or how “popular” it is on social media, for instance? Who's using/sharing it and how everyday people and other brands are interacting with it? It's time you closely monitored your logo's “activity”! And LogoGrab is the only one from our list of image recognition tools here that's specialized in “tracking down” brand logos only! In detecting and analyzing all the images on the web containing a certain brand's logo. A “logo” detection technology! Harness its power to track down even just parts of your brand's logo and turn the collected data into powerful insights. You get to:   find out the circumstances when your logo's being misused gain a crystal-clear view of all the images featuring your products that get publicly shared on social media (overall) gain powerful insights deriving from spotting and digging through the entire content across the visual web that contains your logo (or just parts of it)   4. Google Lens, One of The Revolutionary Image Recognition Tools  “A picture is worth a thousand words” will become more than just a “saying”, for it will gain its literal meaning thanks to Google Lens! The giant search engine's launched an AI-driven visual search app, supercharged with powerful visual recognition capabilities, meant to revolutionize the way brands connect with their customers. A visual recognition technology that we here, at our Toronto web design agency, are looking forward to witness growing into a major digital trend. Predictions around it say that:   it will cut down the middle man, since each object/product surrounding your potential customers can easily get identified and presented to them by the app itself (providing them with plenty of relevant information and suggestions, as well)   it will make it even more important for brands to have a psychical presence that customers can easily connect to (take Amazon's retail space as a more than relevant example!)   it will gradually “force” brands to have a distinctive visual identity (thus making it easier for the Google's AI-driven technology to locate and identify your store/restaurant etc.)   Now let's talk facts, shall we? Let's talk easy-to-be-turned-into-reality scenarios where Google Lens' vision-based computing capabilities would simply open up the era of “the real-world search”:   a given user, standing in front of a restaurant, still hesitant whether he should enter or not, can easily take a photo of it and Google Lens will instantly provide him with the restaurant's name, ratings and other relevant info    a given user can take a photo of his router and Google Lens can automatically scan and memorize the “impossible” password written on it and connect that WiFi network in a bit   a Google Lens-powered “camera” could easily scan the products in a grocery store and instantly display their prices, eliminating the need of running them, one by one, over the scan bar   In short: Google Lens's developing team promises us a technology leveraging computer learning for interpreting any given image and, moreover, for delivering users real-time information and recommendations, too.    5. Clarifai Organize and use your visual content to its full potential by leveraging Clarifai's visual recognition APIs! How you get to do that? And how can you, later on, take full advantage of having perfectly structured your image collection?  Here's how:   it makes filtering out unsafe user-generated visual content so convenient    it speeds up and even allows you to customize your image searching and sorting techniques (for instance, you get to sort the results by your logo)   it automatically tags all your pictures by content and thus perfectly organizes your inventory    it offers you the so much more convenient (and here we go back again to the “a picture if worth a...” theory) query with an image option, making searching through your own gallery so much more effective    it instantly fills in your product images catalog with search-able tags (a win-win situation: you can forget all about manually “tagging” an entire image database and your customers get only visual content that's relevant for their queries)   In a few words: Clarifi makes a powerful visual intelligence AI which can easily rival powerful image recognition tools such as the IBM Image Detection or the so very-praised Google Lens! How about you? Have you triggered any of these image recognition technologies' capabilities to your brand's advantage? Or maybe you've tried other image recognition tool(s) instead? Do share! ... Read more
Adrian Ababei / Jul 18'2017
Turn Raw Data Into Alluring Content for Your Company Blog
Tell your stories with... numbers! Craft data-focused content to keep your company blog's readers “hooked”! And no, it's no “utopia”: you can turn raw data into alluring content. It all depends on whether you manage to masterfully “exploit” it, on how you harness it! Speaking of it, here are 4 avenues to “spice” up your data and turn it into blog content that resonates with your readers and captivates:   1. Relate Your Data to Your Target Audience Serving your readers nothing but a big chunk of “raw” data will only get them an instant... “indigestion”! Not even 1% of them will go all the way to the end of your blog post. And why should they? Data is “machine talk”, not human talk! In other words: you'll need to dig deep though your “raw” data and select the “relatable” one only! The one that will your readers will instantly resonate with.  So, before you go on and dig deep into your heavy load of data, how about trying to set up a couple of criteria that you could select and group them by? These can be:   geographical economical social cultural criteria   More often than not, it's the geographical criterion that prevails. And, in this respect, it's precisely those “enviable” data-driven pieces of content that already earned lots of traffic that make the best examples! And how do you get to craft your own geographical data-based piece of content that will act like a magnet for your readers/potential customers? Here are 2 handy approaches for you to adopt: harness your Google Adwords data and craft a blog post that all your potential customers, living in different regions of your country, could easily relate to   use the Google Keyword Planner and target the city of your company's headquarters and, based on the generated data, run a comparison to other cities in your country It's a proven fact: once they'll see their city's, their state's or their country's names listed in your blog post, included in a comparison with other cities, states and countries, your readers will instinctively grow curious about your data-focused content! We're all emotionally connected to a certain location on this globe and whenever we read/hear its name, an inner bell rings! And it's the same thing with all the other aforementioned criteria that sets us apart and define us (the cultural, biological, economical ones and so on).   2. Show Off Your First Party Data You're sitting on a “gold mine”, no doubt about that!  That's right, you have huge first party data resources that you could show off to your readers in the form of enticing pieces of content! They're right there, at your fingertips! You just need to "strategically exploit" it, to turn raw data into alluring content. And no, there's no such thing as “I do not have an impressive user data or unique data-generating sources to go to. I haven't piled up any data that my readers could possibly be fascinated with”. Dig deeper! Any online business owner has at least an active Google Analytics account. See? There's a start! Now keep digging! When it comes to making that “raw” data fascinating, that's:   part knowing precisely what data to hand pick (the one that your readers would resonate with, remember?) part placing it in the right context   That's all! And speaking of sources of first party data, here are 3 unique data generators that our team here, at our web development agency in Toronto, recommends to you:   Google Analytics, Google Adwords, Search Console data: they all contain unique, valuable user data that only you and your team have access to. Tap into these great resources of data, run your selection, add a sparkle of creativity, too, and turn it into the perfect “fuel” for that future viral post on your company blog!    survey data: can't underestimate the power of user surveys! Leverage the collected results by turning them into interesting insights. For example, how about correlating personality-related answers with the type of products that your questioned customers usually shop on your e-commerce store? Wouldn't this personality traits-shopping preferences association make an attention-grabbing type of content for your readers?   sales data: here's another insufficiently exploited “data gold mine”! Turn into interesting content that data revealing to you during which season(s) of the year or at what hours of the day your sales are at their highest. Are there certain events (holiday?) that this “peak” coincides with! Extra tip: use Google Correlate, such a handy tool that will point out to you exactly which keywords are relevant precisely to that sales data that you will have collected!   Take it from there: turn raw data into alluring content!   3. Do Share Your Data Set An avenue that so many ignore! Don't be one of them! Be smarter than that majority of webmasters/online business owners and, once you've crafted that data-driven piece of content that's going to “write history” on the web, remember to add your data set, too. You never know when a big player in your market (and not just in your market, it could by an authority in any other related industry; take a news publication for instance) picks it up and uses it, turning it into a valuable links generator for you!   4. Add the Surprise Factor: A Sure Way to Turn Raw Data Into Alluring Content  Isn't this a hard nut to crack? How could you intrigue and, even so more, “fascinate” your readers with... numbers? With data? You get creative and spice those numbers a bit, that's how! Here's a tried “recipe” that you could follow for crafting intriguing content out of numbers:   you “frame it” in a rightly chosen context, one that will shade a new light on your data, making it stand out   you provide an unexpected perspective (an historical perspective, for instance)   you use comparison: nothing adds more meaning to “raw” data, nothing makes it more “intriguing” than getting it compared to other periods of time, to other locations where your products might have been used or other age groups of customers that might have bought one of your items etc.   Contextualize it and compare it! This is the (not so) secret “recipe” to follow whenever you want to turn raw data into alluring content! Wrapping up:   harness precisely that data that relates to your target readers/customers (so, don't start digging through your whole data resource without this selection criterion in mind!)   put your numbers in a context    come up with comparisons that will add intriguing perspectives to your provided data    Now go ahead and turn raw data into alluring content for your company blog, removing “writer's block” from your vocabulary for good! ... Read more
Adrian Ababei / Jul 14'2017