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.

What Does It Take to Develop a Mobile-First Content Strategy for Your Drupal Website?
There's no way around it, not anymore: with Google's index now mobile-first, adopting a mobile-first approach when building a new Drupal site (or redesigning a legacy one) is… a must! It no longer depends on a specific project's needs or on the used technology. The need to develop a mobile-first content strategy has gone from particular to universal. And facing the challenge of:   (re)creating optimizing structuring   … content on your Drupal website means conforming to those specific patterns that mobile users have developed for reading content on their smartphones. In short: developing a fully responsive Drupal site comes down to centering your mobile content strategy around the idea that: It's for the smallest screen sizes that you should plan your content for, first things first … then scale it up from there. Now, let's see precisely what it takes to develop a mobile-first content strategy. What focus points and must-have components to include:   1. Take the Smallest Screen Size as the Starting Point In other words: think mobile-first! And by “mobile” I do mean “smartphones” — the smaller the screen size, the better.  This way, you'll be adjusting your content so that it makes the most of the smallest interface. Starting “small” is the best way to stick to the “keep it simple” approach: Thinking through every content-related decision in the light of the viewport size challenge will constrain you to keep the truly essential content elements only. Hence, this “spartan” way of eliminating the unnecessary will reflect on your site's desktop design, as well:  It will turn out cleaner and lighter.   2. Use Visual Content Wisely: Weigh Your Choices of Images  The golden rule when it comes to the imagery that you'll use on your responsive website is: If an image doesn't enhance and complement your content, then you're better off without it! And I know what you must be thinking: “But people remember what they see far more easily than what they read.” True, you need to keep in mind that visuals do come at a cost, though: Those stunning, visually-arresting images on your website risk to divert your users' attention from the message itself. And still, probably the most heavy-weighing reason why you should use images wisely when you develop a mobile-first content strategy is: weigh. Visuals risk to take up valuable screen space and thus:   outshine your calls to action themselves impact your site's overall performance (leading to frustration)   Now that doesn't mean that you should strip your content off ALL the visuals! Absolutely not! Just to be cautious and weigh your every choice, think through your every decision involving the usage of an image.  Once you've selected the truly essential ones, keep in mind:   not to no resize them (or optimize them in any other way) before uploading them to your CMS: let Drupal do the heavy-lifting here  to leverage the Responsive Image module's (Drupal 8) capabilities for resizing them to fit the given screen sizes   3. Content Before Design This is the right sequence to follow when you're designing (or re-designing) your Drupal site with mobile users in mind: First, you create and strategically organize your content and upload it to your Drupal 8 CMS. It's only then that you focus on styling and developing a responsive and visually-striking web design. If it's legacy content that you're dealing with, trying to convert it to mobile, the very first step to take when you develop a mobile-first content strategy is: Removing all the design elements from your written content.   4. Create a Hierarchy of Your Calls to Action Making the most of a small interface means also setting your priorities in terms of calls to action: Pair each one with a corresponding objective, evaluate them all wisely, then select THE call to action that's most critical for you and place it — and it alone — above the fold.   5. Organize and Optimize Your Content for Mobile Devices I'll briefly list all the key requirements that mobile-friendly content should meet — aspects to pay attention to when writing content for mobile devices — for I'm sure they're nothing new to you: the phrases should be kept short and concise, thus eliminating the burden of “never-ending-scrolling” the content should be sharp, targeted and skimmable, so users can easily “digest” it and modular, so that users can swiftly browse through it “modular” meaning made either of multiple clear paragraphs — each one standing for one thought — or chunks of 3 paragraphs at most    6. Optimize Media, too, When You Develop a Mobile-First Content Strategy And there are a couple of essential steps that you mustn't overlook when it comes to mobile-optimizing your media:   always go for thumbnails instead of video players that your users would have to load and thus strain on your site's valuable resources don't ever use autoplay on your audio and video content  optimize your sound, image and video files both for large and small devices   7. Trim Down Your Navigation Menu In other words: when you develop a mobile-first content strategy, consider simplifying your navigation to its truly essential links. No user would gladly scan through a “beefy” navigation menu taking his device's entire screen:   flatten your navigation: stay away from the technique of piling up submenus, layers and navigation points feel free to place the links that you'll remove on other places on your website (or even to turn them into calls to action)   8. Convert Your Legacy Content to Mobile-Friendly Content  If it's a legacy Drupal website that you need to restructure and to adapt to your mobile users' specific patterns for browsing through and consuming content on their smartphones, then it's time you:   dug into your static HTML … and cleaned it up   And by “cleaning it up” I do mean:   removing inline media removing the fixed-width tables eliminating floats with content  breaking it down into skimmable chunks of content   … that can be easily structured into content fields. The END! These are the 8 main aspects to focus on when you develop a mobile-first content strategy.  Now time to test the “saying” that: “Creativity strives under constraints.” … and to make the most of those small interfaces. ... Read more
Adriana Cacoveanu / Jun 11'2018
What Are The 5 Most Common Angular Mistakes that Developers Make? 
“Learn from your mistakes” should be every developer's life mantra. But that doesn't mean that they should be all your mistakes, right? With a list including the most common Angular mistakes at hand, you'd get to narrow down the number of possible pitfalls that you risk falling into to the... uncommon, the less predictable ones. So, what are the traps that Angular developers fall into most often as they build their applications? We've run our own "investigations" for you:   gone through the code examples on the web ran an inventory of the most frequent questions on StackOverflow looked over some of the issues that we've knocked our heads against while working on our own Angular projects    … and trimmed down our list to 5 most frequent mistakes that Angular developers make: 1. ngOnChanges vs ngDoCheck: Misunderstanding When the ngDoCheck Gets Triggered  "I have used OnPush strategy for my component and no bindings have changed, but the ngDoChecklifecycle hook is still triggered. Is the strategy not working?" I bet that you've stumbled across this question (maybe put into different words) on various developer forums. It could easily win any “popularity” test there since it keeps coming up again and again. But, before we give it a straight answer and settle this matter for good, let's focus on these 2 “change detecting” lifecycle hooks in Angular. And see where the problem stems from: As you well know it, AngularJs has the watch feature, which “alerts” you whenever a value changes. Angular, on the other hand, has replaced the watch and scop feature with component inputs as properties. Moreover, it has added the ngOnChanges lifecycle hook, as well. And here's where things get “tricky” and risk to turn into the trap that many Angular developers fall into: The OnChanges event doesn't emit if/when a deep field of the input property changes. Hence, the value of the input is the reference of the object. How do you approach this problem? You have several methods at hand, in fact, but I'm going to focus on the most common one: Using the ngDoCheck lifecycle hook once you run the change detection process! Now here's the answer that I've promised, to the above-mentioned common developer question: The onPush strategy for detecting changes in Angular does work: the hook is triggered by the design itself!   Note: another ridiculously frequent mistake that developers make is to take "Angular" for "AngularJS"! Be better than that: the term "AngularJS" should be used only when you refer to the old Angular and to Angular 1, while Angular 2/2+ 4 and 5 is just... "Angular". Mind you don't delve deep into this confusion yourself, too!   2. Forgetting to Unsubscribe: One of the Most Common Angular Mistakes  “Forgetting” or simply ignoring this issue.  And you have no “excuse”, you know, for overlooking to clean up your subscriptions in Angular. Considering that there are methods and libraries developed precisely for handling these unsubscriptions once you've finished using an event or an observable in JavaScript. Why does this “clumsiness” risk to grow into a major issue? Because lingering subscriptions cause memory leaks in your system. And when it comes to the unsubscription process, there are 2 scenarios:   you trigger the OnDestroy lifecycle hook if it's in a component that you've subscribed in you initiate the lifecycle hook yourself if it's a service that you've subscribed in (since, in this case, there's no available hook for you to fire)   To recap: Remember to unsubscribe when you no longer use a service/component!   3. The Wrong Use of Providers One of Angular's (compared to AngularJS) key improvements is its Hierarchical Dependency Injection, agree? This means that now you're free to instantiate a service several times (services used to be singletons back in the AngularJS's “glory days”, remember?). Now that being said, let's have a look at a more than likely scenario: Imagine yourself fetching your heroes using a heroes service: @Injectable() export class HeroesService { heroes: Hero[] = []; constructor(private http: Http) { this.http.get('http://give-me-heroes.com').map(res => { return res.json(); }).subscribe((heroes: Hero[]) => { this.heroes = heroes; }); } getHeroes() { return this.heroes; } } Nothing unexpectedly wrong till here:   the data is being fetched in the constructor there's also a getHeroes method for retrieving the heroes    Now, let's take a look at the hero component, too: @Component({ selector: 'hero', template: '...', providers: [HeroesService] }) export class HeroComponent { constructor(private heroesService: HeroesService) {} } @NgModule({ declarations: [HeroComponent] } export class HeroesModule { ... } As you can see, first the HeroComponent declares the HeroesService provider in the @Component.providers array, next it incorporates it in the constructor.  All well and good till you realize that each HeroComponent instance instantiates a new instance of the HeroesService.  To put it more simply: Your HeroesService will be fetching the data (by HTTP request) several times, for each and every HeroComponent instance! And this is due to the Hierarchical DI in Angular. The solution for avoiding this issue — no doubt one of the most common Angular mistakes?  Declaring the service in the @NgModule.providers instead: @Component({ selector: 'hero', template: '...' }) export class HeroComponent { constructor(private heroesService: HeroesService) {} } @NgModule({ declarations: [HeroComponent], providers: [HeroesService] } export class HeroesModule { ... } There! The provider will now be instantiated once and for all. “For all” the HeroComponent instances I mean. “How come?” You might ask yourself. Because the provider (declared in the NGModule now) is a singleton now. Therefore all the other modules can use it.   4. Manipulating the DOM Directly Although I've already said this about another mistake from this list, I now tend to consider this one here instead as being one of the most common Angular mistakes: Manipulating the DOM directly; oftentimes from the controller itself! And this is one of those top 10 Angular mistakes that any developer stands a high risk of making. Since manipulating the DOM is such a common task when using this platform:   you might need to render SVG you might need to refresh a page's title based on a context change you might need to set the focus on a control after a validation error … and the list of possible situations goes on   Then... you fall right into it: you take the easy way out and hack the DOM directly! Now what I feel like pointing out it here is that: Angular's grown from a web framework into a platform! And this can only mean that you're now free to decouple your Angular application's codebase from the renderer and:   have your app executed in on the server … in the browser … as a native app    And decoupling opens the door to other possibilities for you to explore and to tap into, such as using web workers or AOT (ahead of time compilation).   Speaking of the latter: AOT enables you to compile your app's templates in the build time of your server. Moreover, you won't need to use the oversized @angular/compiler package in your bundle, which leads to a lower size and load time. Yet, for future-proofing these “facilities” that Angular provides, you'll need to abide by... some sort of rules at least. And one of them is: Restraining yourself from manipulating the DOM directly, using jQuery, the global document object or the ElementRef.nativeElement. Instead, use the Renderer2 service (or Renderer for Angular 2): It's 2 things that this wrapper to the view mutation layer will enable:   for the default layer to be used in the browser for the renderer to get replaced with a more suitable one whenever your Agular app runs on another platform (e.g. a phone)   In short: Resist “temptation” and never ever touch the DOM directly!   5. Declaring The Same Component in More than Just One NgModule  And declaring a component in multiple NGModule-s is one of those most common Angular mistakes that end up throwing an error “at” you. “Why, so?” Because you need to declare each component in its own NgModule — and to list it in the @Ngmodule.declarations array — in order for it to be available for the views.  If you do need to declare the very same component in multiple modules, you'll need to consider the relationship between those modules: Is it a parent-child one, maybe? If this is the case, then:   use the child's NGModule.declaration to declare the HeroComponent in the child module use the chid's NGModule.exports array to... export the HeroComponent  use the parent's NGModule.imports array to import the child module    If not (if we can't be talking about a parent-child module relationship), then you'll need to declare another NgModule as the module of the shared data.   Final Word  It's only by knocking your head against unexpected issues while building your projects on this platform, that you'll get to grow as an Angular developer. And still, instead of embracing the “fail fast, fail often” concept, wouldn't it be best if you:   learned from other developers' mistakes, thus knowing what the most common Angular mistakes are   ensured that you failed "rarely" instead? ... Read more
RADU SIMILEANU / Jun 05'2018
Top Enterprise Content Management Systems vs Drupal: Comparing Features and Prices 
Content is a way too valuable asset not to handle it with utmost care — from its creation to its revision, all the way to its... distribution. And with utmost efficiency, as well! But how do you choose the business software to “orchestrate” your entire content workflow? Since, on one hand, you have the top enterprise content management systems in 2018 and, on the other hand, you have... Drupal? And the dilemma that you're facing right now could be summed up like this: Choosing between a complex ECM system with a load of powerful tools that comes at a cost and a feature-rich one — already famed for its robustness and customization options — with no price tag on... Now to ease your decision-making process, let's compare these enterprise information management solutions, the top rated ones, to Drupal, by weighing their feature loads and costs.   1. But What Is an Enterprise Content Management System More Precisely? First, let's try to define what we mean by “content” in relation to a content management software: Content is all the written pieces of information entering and “moving about” your organization. It comes in the form of: internal process documents content for your company website (or blog) sales-focused content targeted, custom content available to paying cutomers only ... and the list goes on. As you can see, I've intentionally left out graphical and audio-visual content. And this because it's only text-based digital content that a CMS would handle. Now, coming back to our initial question: An enterprise content management system is a software geared at managing all the processes in your content's lyfecycle: creation, revision, publication, distribution to multiple channels, promotion etc. Packed with different sets of tools designed to automate all your content-based processes, an ECM system is a... “Swiss knife” type of business software. The one you'd use to streamline your content workflow(s).   2. M-Files, One of the Top Enterprise Content Management Systems in 2018 Introducing the enterprise-leveled information management solution of the year: M-files! The promise that it makes?  To break the “siloed information” pattern and enable users to access specific content from any buiness system, any device. … to easily access it, but also to organize it, to manage it, to identify particular information/documents, to set up custom workflows and even to manage document reviews.    Top features   version control  automated workflows pre-built search engine: you get to track documents by type, name, keywords; it provides within-text search features as well  notifications: users get alerted whenever they'll need to review or approve changes made to documents approval processing  permission management and offline access  integration capabilities: it easily integrates with Microsoft Dynamics, NetSuite, SAP, Salesforce  document collaboration tools: co-authoring features and check-in/check-out tools    Price Mi-files is one of those enterprise content management vendors that leverage the quote-based method for pricing their services. Basically, there are no standard prices, as there are no standard packages that they offer, only tailored content management solutions.   Cons The great majority of negative user feedbacks revolve around the M-Files mobile app's limited functionality.   2. OnBase  Another one of the top enterprise content management systems in 2018 is OnBase: An all-in-one software coming “equipped” with: business process management tools integrated document management tools records management tools And before I “expose” to you its most heavy-weighing features, I feel that I should put the spotlight on its versatility feature first: You get to easily configure your OnBase ECM system to fit any environment of choice.   Top Features    approval process control indexing version control built-in search engine document management   Cons Do expect a steep learning curve! So, be prepared to invest a significant amount of time in growing comfortable with using it. In learning to “juggle” with all its apps and functionalities.   Price You'll need to contact the OnBase team for a custom pricing plan.   3. Box  Box is a cloud content management platform built to assist you with:   online sharing your files storing your files integrating content across your entire “infrastructure” of digital tools via open APIs collaborating within your team   Top Features    granular access permission easy integration with other platforms  advanced security capabilities: device trust, watermarking, data governance easy integration with other platforms collaboration tools: a document management system that enhances collaboration among end-users on various file types and devices; tools which also enable them to choose the right storage place, to set up metadata-driven content workflows etc.   Cons Even top enterprise content management systems manage to collect their own “pile” of “bad reviews”. What users reproach OnBase here, for instance, is its user-based pricing model.  In other words, if you have +100 people in your company, expect to get charged separately for each email domain... and thus to overstretch your budget over time.   Price Box pricing plans start from €4.50 per user/month (we're talking about a starter business plan here) and can go up to $500 per month or more if it's a “build with BOX platform” plan that you'll select.   4. Drupal  And now that we've put the top-rated ECM systems in 2018 into the spotlight, let's see what Drupal here has to offer. How it can counterbalance all these heavy loads of tools, features, and functionalities.   Drupal's Key Features    advanced integration capabilities: Drupal “spoils” its end-users with conveniently accessible API, backed by a rich collection of modules built precisely for 3rd party integrations no maintenance effort required: since it runs in Acquia Enterprise cloud, Drupal gets automatically updated; maintenance is already included in the Enterprise support costs plan feature richness: and we're talking here about features, plug-ins (thousands of them) and content management tools that you get right out of the box modular architecture: which goes hand in hand with the unlimited freedom of customization that you'll get to leverage high performance: Drupal's already famed for its robustness and capabilities to withstand high influxes of traffic unmatched scalability a full toolbox (contributed modules here included) put at editors' disposal: Drupal's also won its reputation as a CMS that's been constantly improved to enrich the experience; all the in-built content-handling tools speak best of its “empower the content creator/end-user” philosophy   Price   license costs: unlike the top enterprise content management systems previously outlined, Drupal's open source; there are no license costs, only support costs associated with the Acquia Enterprise Platform  vendor lock-in: all modules and plug-ins that you might select and mix and match to custom-tune your CMS are free development costs: Drupal resources are available to anyone who wants to build and then to custom tune and scale up its CMS   In conclusion... … Drupal comes feature-packed and, moreover, it “spoils” you with unlimited freedom of customization. And all this without putting a price tag on. On the other hand, some of the top enterprise content management systems do tempt you with their feature richness, but at a cost. One that can go up precisely if you feel like customizing your ECM solution or scaling it up sometime in the future.  In short: you do get your share of customization freedom... but not for free. So, it's not really an “apples vs oranges” type of dilemma that you're facing, but rather an: Apples vs Apples with a price tag on ... Read more
Adriana Cacoveanu / May 29'2018
How to Create an Angular Project with Angular CLI in 5 Simple Steps
About to build your very first Angular app? Then you must be planning to create an Angular project with Angular CLI, right? The much-acclaimed tool that the Angular team built precisely to jumpstart the whole development process. … to have a simple app scaffolded, generated and deployed in no time, by entering just a few commands (so they say, at least).  And since I'm sure that you don't want to waste these bundles of convenience by letting yourself tangled up in overly complex explanations instead, I've kept things simple with this guide. So, here's how you create and run your first Angular project via the Angular command-line interface:   1. But How Precisely Can Angular CLI Jumpstart Your App's Development Process? Take this command-line interface as a starter kit “present” that the Angular team has nicely wrapped for you:   it's practically geared at empowering you to get up and start developing a new Angular app in no time it takes just one short command to generate a default Angular project that would include all the needed dependencies (in the node_modules folder), as well as testing files for each component   Now, this is what I call a major kickstart! It's got you covered from the stage of setting everything up, to creating the Angular project itself, to testing it and finally deploying it. Other key usages of the Angular CLI that we're not going to focus on in this tutorial here are:   real-time server maintenance and support building applications for production adding new features to your existing app  running tests on your application units    2. Setting It Up: Install Angular CLI Globally Before you jump to the part where you create an Angular app using Angular CLI, you need to install the command-line interface itself. Globally! And this is the “power” command to enter in your terminal with the npm installed: npm install -g @angular/cli Notes: if you already have the CLI installed, make sure it's the latest version if you need to update it, these are the commands to enter: npm uninstall -g angular-cli npm uninstall --save-dev angular-cli And there's more! A few more must-have dependencies that you need to make sure that are already installed and upgraded to their latest versions: Node.js: v6.9.x + npm: 3.x.x +   3. Create an Angular Project With Angular CLI With your command line interface ON, use it to enter THE one and only command that will generate a new Angular project for you. One incorporating, by default, all the needed dependencies: ng new ng-yourproject Tada! A “yourproject” named directory has just been generated. That's where your new Angular project — along with all the requested dependencies — gets stored. Eager to test it out? Just run the following command in your terminal: ng serve   Your Angular app will then get built and served up to localhost:4200. Feel free to open this URL in your browser and it's the here-below screen that you should be able to see: Basically, it's the default application shell itself rendered by the CLI.   4. “Deconstructing” Your New Angular Project: What Does It Include? Now, before you go ahead and do your “tweaking” on your newly created app, let's see what you've got in there! What are the elements that the CLI has generated for you to help you jump to development right out of the box? For this quick “scan”, open your Angular project in your IDE of choice and start “exploring” your src/folder:   src/*    styles.css any styles that you'll plan to apply globally, it's this file that you can add them to; and it's here, as well, that you can import new .css files (Bootstrap or any other styling frameworks of your choice)   index.html  where your Angular app gets started   src/app/*    app.component.ts this is where your app's one and only (for now at least) component gets stored   app.module.ts  the modules Angular needs for managing your app's components note: @NgModule marks the class file as a module and this is what makes it similar to @Component   5. Create a New Component  Remember your “one and only component” that I mentioned during the previous “inventory” of all the “bunch of stuff” that CLI has generated in your project? Well, how about creating a new one now? One that would load under that root component? Just run the following command to generate it: ng generate component the-quote Next, time to “show it off” in your browser: <h3>{{myQuote.quote}}</h3> <small>- {{myQuote.by}}</small> Add the app-the-quote selector to the root component that the CLI generated in your Angular project: <h1> {{title}} </h1> <app-the-quote></app-the-quote> 6. Apply External Styling  Now you do agree that when you create an Angular project with Angular CLI applying styling is a key step. So, let's add your favorite CSS framework to your new application! Me, it's Bulma that I'll be using in this tutorial here: npm install bulma --save With our CSS framework installed, we'll need to enable it to load the CSS file into our Angular app. For this, just place the relative path within the .angular-cli.json file., to the file in the styles array more precisely. ... "styles": [ "../node_modules/bulma/css/bulma.css", "styles.css" ], ...   “Tempted” to display some icons now, as well? Then go ahead and add the font-awesome library as cdn link. For this, just include the stylesheet right into your index.html: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> Et voila! This is how you create an Angular project with Angular CLI! What do you think? Is the Angular command-line interface an extremely useful tool to jumpstart your project with or did you expected your “starter kit” to include, right out-of-the-box, more elements to get you started? ... Read more
RADU SIMILEANU / May 25'2018
How to Speed up Your Magento 2 Store on Mobile Devices: 5 Tweaks That You Can Make
What can you do to speed up your Magento 2 store on mobile devices? For let's face it: Magento 2's “ecosystem” of third-party extensions and overall its modular architecture is convenience at its best for any developer! For any eStore owner. It empowers them both to start small and then scale it up to their most daring goals. Yet, all this power placed in your hand does come at a cost: reduced speed. And top speed is crucial if you're determined to deliver a great mobile user experience. So, what are the tweaks that you can make to boost your eStore's performance? Luckily, there are plenty, ranging from:   well-known (and too frequently underrated) best practices, like optimizing your product images to slightly more in-depth “tweaks”, like inlining critical CSS   But, let's dive right in! Here's your “emergency kit“ of 5 solutions to apply to your Magento 2 store for improving its performance on mobile:   1. Reduce Page Size to Increase Page Loading Speed  And it's still those “too obvious to be truly effective” type of techniques that have the biggest impact on an eStore's performance on mobile devices: Lower your web page size and it will make a drastic difference for your mobile users' experience with your online store; especially for those accessing your site from mobile devices with low bandwidth. Now here are a few simple, yet effective tweaks that you can make to reduce page size:   1.1. Use GZIP  to Compress Your Pages A handy “trick” that you can perform is to enable GZIP (if it's not already enabled) and let it “work its magic” on your web page's size. It will compress:   fonts CSS files external scripts JS   … cutting your pages' “weight” down by almost 70%. Note: put any of your front-end pages to the Google PageSpeed Insights “test”; take note of the GZIP-related warnings popping up and ensure that the CSS/JS compression feature is enabled.   1.2. Enable JavaScript/CSS Files Minification Here's another built-in Magento 2 feature that all you need to do is... trigger to speed up your Magento 2 store on mobile devices: CSS/JS files minification. Note: do keep in mind, though, that it works in production mode only (so not in default or developer mode, as well)! Here's how you enable it:   Navigate to the backend menu Stores > Configuration > Advanced > Developer Set your app/site's production mode:   php bin/magento deploy:mode:set production Note: not sure what mode your eCommerce site's running on now? Enter the following command to identify its current mode: php bin/magento deploy:mode:show 1.3. Optimize Your Product Pages  And the more crowded your product catalog is, the more important this solution becomes! “Are you implying that I should take each and every one of my product images and optimize them... one by one?” you might ask yourself. Definitely not! Since there are at least 2 easy solutions that you could go for:   you can use a content delivery network (CDN) as it will take the image optimization “burden” off your back you can leverage the Google PageSpeed (GPS) server extension; it will compress your images in no time, among other “tricks” that it performs to speed up your Magento 2 store on mobile   2. Reduce The Server Response Time to Speed up Your Magento 2 Store  Optimizing your server's response time (or “time to first byte”) is another critical tweak that you can do to boost your Magento 2 store's speed.  Set your “target” to 0.5s, the time a browser would need to wait for your website's server response. “But why bother, since Magento provides me with full-page cache functionality right out of the box”, you might wonder. That's true, but just consider particular pages, such as checkout, customer pages, cart, that this pre-built functionality can't “work its magic” on.   2.1. Run a Throughout Audit on Your Third-Party Extension "Load"  Start reducing your server response time with a basic, yet so very effective step: Audit your entire modules infrastructure! identify any issues with your current plugins and (if any) look for a patch or replace them with more performant ones turn them on and off just to detect any negative impacts on your Magento 2 site's performance    Note: as a rule of thumb, try keeping your Magento 2 third-party extensions to a minimum! Trim down your collection of modules keeping only the must-have ones; otherwise, its weight will affect your eCommerce site's performance!   2.2. Use Magento 2 Profiler to Detect Any Server Performance Issues “What's a profile?” you ask.  A program geared at identifying just how much time a code block needs to execute. Using a profile you'll be actually drilling deep(er) into your Magento 2 store's internals to detect the very root cause of your bad server response time!   2.3. Consider Upgrading Your Hosting Plan Is it time you upgraded your hosting server? More RAM and CPU will always have a huge impact on your eCommerce website's performance, you know. So, how do you know whether it's time to upgrade? Just install a brand new Magento 2 website on your current server. If it's speedier than your live website, there's no need to change your current hosting plan. In this case, you'll only need to focus on the other tweaks included in this list here to speed up your Magento 2 store on mobile.   2.4. Use Varnish as a Full-Page Cache (FPC) Solution Another trick for improving Magento 2's performance is to leverage Varnish, the software that caches and serves content. The good news is that Magento 2 supports it natively. And here's how you trigger its “power”:   navigate to the backend menu Stores > Configuration > Advanced > System > Full Page Cache   Note: you'll need to enter a hostname, port and Varnish export configuration; if in doubt, ask your system admin for a hand to set everything up properly. 3. Load and Render Above-the-Fold Content First  Prioritize the content that appears before scrolling down! It will make all the difference when it comes to your Magento 2 eStore's page loading time! And now, here are the techniques at hand for loading and displaying this content first:   3.1. Defer Loading JavaScript  Moving all your JS code to the bottom of the page (“beneath the fold”) will implicitly make your AF (above-the-fold) content load quicker. You'll basically postpone the time-consuming parsing of JS code and thus speed up your Magento 2 store on all mobile devices! The good news is that there already are Magento 2 extensions that do the job for you. They'll move all your non-critical JS scripts beneath the fold!   3.2. Inline Critical Above-the-Fold CSS “But what about the above-the-fold CSS?” you might legitimately ask yourself.  How do you approach these critical files? For you definitely can't place ALL your CSS at the bottom of the page, now can you? Well, first you:   extract/isolate precisely this “critical” CSS then you inline it straight to the HTML; right between <head> and </head> tags   This way, it will get loaded and rendered first (before the non-critical CSS), along with the rest of the above-the-fold content.  Note: you might be tempted to go for one of those tools “promising” you to extract this CSS for you. Unfortunately for you, manually setting the critical CSS for each one of your pages (homepage, checkout, category etc.) is the right way to do it.   4. Leverage the Power of HTTP/2  By moving your Magento 2 website over to HTTP/2 you'll grant your eStore users a secure and faster-browsing experience. Not to mention the impact that it will have particularly on the experiences of those customers using a slow mobile network to access your online store. The tremendous news is that Magento 2 co-exist with HTTP/2 by default. Yet, there are 2 conditions that you need to make sure your online store meets:   your hosting server should already support HTTP/2 your eCommerce web pages should be served via SSL   Note: run your own "investigation" and look for some suitable extensions providing server pushes.   5. Magento 2 Performance Optimization: Disable JS Bundling But why would you want to disable a Magento 2 feature that actually lowers the HTTP requests made by your browser for loading and rendering a web page? Because it comes with its own side-effects, the main one being the oversized JS file that this feature generates, of about 5-10 Mb. Moreover, it's proven that downloading this huge external file takes more time than the time you'd actually be saving by reducing the no. of HTTP requests. Now that we've tackled the “Why”, let's focus on the “How”, as well. Here's how you disable JS bundling:   go to your website's backend menu Stores > Configuration > Advanced > Developer and apply the following configuration:   Note: there's no need to disable this JS files grouping feature if you're already using HTTP/2! The END! These are but 5 of the handiest solutions that you could use to speed up your Magento 2 store on mobile. As you can see, the list includes nothing more than predictable “tweaks” and well-known best practices that you should stick to.   ... Read more
Silviu Serdaru / May 23'2018
When Should You Not Consider Using Node.js? 3 Unsuitable Use Cases
It's undebatable: Node.js has practically laid the foundation of the real-time web! The real-time, two-way connection web apps have revolutionized the old web response paradigm. The one where it was just the client who could initiate communication, never the server, as well. Even so, there are certain cases when using Node.js is not the best decision you could make. Specific use cases for which the otherwise flexible and revolutionary web server technology turns out not to be... unsuitable. So: “When shouldn't I use Node.js?” You might legitimately ask yourself. Here are the 3 bad use cases for this JavaScript runtime environment. Scan them through, take note all the factors that I'll be outlining and think them through before rushing to use Node.js to power your next project with.   1. A CPU-Heavy Application: Using Node.js Is Simply a Bad Idea Face it, deal with it and... adjust your decisions to it: There are plenty of better solutions (other than Node.js) for powering your CPU-intensive app. It's just not the best technology at hand when it comes to heavy computation. Now here's why, by using Node.js, you'll only end up “sabotaging” its very advantages, instead of turning it into a true “horsepower” for your app, as you might expect:   Node.js leverages an event-based, non-blocking I/O model, using a single CPU  hence, all that intense CPU-processing activity will actually block the incoming requests … since the thread will get “held up” with number-crunching   The direct effect of “exploiting” Node.js in the context of heavy server-side computation?  The very benefits of its event-driven, non-clocking I/O model would get practically... nullified in the context of CPU-intensive operations. Given this, why would you stubbornly stick to Node.js, when there are other technologies more suitable for building your CPU-heavy software with? With better results?   2. A Simple CRUD (or HTML) Application No need to get your hopes high when using Node.js with a basic CRUD or HTML application: It might turn out to be just “slightly” more scalable, yet don't expect a traffic flood just because it's Node.js-powered. In short: use cases like this one, where data's provided, straightforwardly, by the server and where there's no need for a separate API, render Node.js superfluous. There are other frameworks suited specifically for this type of projects (take Ruby for instance). Using Node.js in this case would be like driving a Formula 1 car while... stuck in rush hour traffic.    3. A Relational Database-Backed Server-Side App Why isn't Node.js your best choice for a relational data access type of project? Because its relational database tools aren't as reliable, robust and easy to work with as other frameworks' toolboxes (take Rails for instance!). Rails, for example, would “spoil” you with:   already matured Data Mapper and Active Record data access layer implementations out-of-the-box data access setup DB schema migrations support tools … and the list goes on   In short: if there already are frameworks perfectly “equipped” for this type of project “scenarios”, why would you stick to using Node.js? Since its relational DB toolbox is not (yet) as advanced?   In Other Words... With these 3 “bad” use cases for Node.js “exposed”, allow me to put together a short “inventory” here, one including all the “gotchas”, aspects to consider before kicking off your Node.js project and limitations to be aware of:   Node.js hasn't been built with the “solving the compute scaling” issue in mind   … but it has been created to solve the I/O scaling issue instead   excepting contexts of CPU-heavy operations, Node.js still is the best technology at hand for powering your real-time, scalable web apps with   do reconsider your decision of using Node.js if for developing your piece of software you depend on some kind of threading model   there are also poor quality packages available in npm, free to use in your Node.js application; do keep this in mind as you dig deep into the “load” of  Node.js packages   Node.js will never be “the best choice” for event loop-blocking use cases (take asynchronous parsing XML, for instance)   … nor for powering apps relying on intense computation   Node'js “worker” is geared at solving HTTP server calling issues (rather than intense computing issues)   The END! ... Read more
RADU SIMILEANU / May 17'2018
How to Scale Your Node.js App: Best Strategies and Built-In Tools for Scalability 
Whether it's the increasingly challenging workload or you simply want to enhance your Node.js app's tolerance to failure and availability, there comes a time when you just need to scale it up, right? To “squeeze” the best performance out of your entire infrastructure of... nodes. Well then, here's how to scale your Node.js app: And scaling up your web back-end app at different levels —  overall improving its throughout — sure isn't an afterthought with Node.js: Scalability is built in the very core of the runtime. And the infrastructure of nodes, strategically distributed, communicating with each other, is what makes this framework particularly scalable. So, what is the best way to scale up your Node.js app? Which are the most powerful built-in tools for scalability to explore and to “exploit”? And what are the best strategies to go for depending on your specific scenario and scalable architecture needs?   Horizontally Scaling Your Node.js App  Horizontal scaling comes down to... duplicating: Basically, you duplicate your application instance, enabling it to “cope with” a larger number of incoming connections. Note: you can horizontally scale your Node.js app either across different machines or on a single multi-core machine. A word of caution: do keep in mind, though, that this scaling solution might add up unnecessary complexity to your app's infrastructure; it might entail the need to provision and to maintain a load balancer, might make troubleshooting more challenging, and even change the way you deploy your app. That being said: make sure that it's specifically this Node.js scaling solution that your project needs before you go ahead and implement it!   Vertical Scaling If your scalability architecture needs involve nothing more than:   injecting more power  adding more memory   … with no particular “tweaking” applied to the code, then vertical scaling might just be the right answer to the “how to scale your Node.js app” dilemma. Here's why:   by default, Node won't use more than 1.76GB of 64-bit machines' memory in case of a 32GB of RAM machine, for instance, the Node process will limit itself to only a fraction of its memory   Have Multiple Processes Running on The Same Machine Here's another possible answer to your “How to Scale your Node.js app” question: Have multiple processes running on the same port. It goes without saying that this scaling solution calls for some kind of internal load balancing that would distribute the incoming connections across the entire ecosystem of cores/processes. Word of caution! Not sure whether there's any need to add this: keep the number of running processes lower than that of the cores! Hereinafter, let's focus on 2 Node.js built-in tools for scalability that you might want to tap into:   The Cluster Module  Node's cluster module makes a great starter for scaling up your application on a single machine. How does it work precisely? It makes setting up child processes sharing server ports conveniently easy.  Practically, one “master” process will be in charge with spawning all the child processes (and there's one “worker” for each core), those that actually run your Node.js app. Feel free to dig here into more details on the whole process.  Yet, there are certain limitations to this basic scaling solution:   in case one of your child processes “dies”, it doesn't... regenerate itself you'll need to handle the master-worker processes difference... the “old school way”, using an “if-else” block there's no way of modifying multiple processes, at once, on-the-fly!   Note: yet, when it comes to the “dead child processes” drawback, there's... hope. For instance, use this piece of code that would enable the master process to... respawn the “worker”: cluster.on('exit', (worker, code, signal) => { cluster.fork(); }); And voila! This drawback has been taken off your list!    The PM2 Cluster Module Using the PM2 cluster module, “how to scale your Node.js app” dilemma turns into: “Lay back and let the PM2... clusterfy your server for you!” All you need to do is “trigger” this command's superpower: pm2 start app.js -i 4 –name="api" It will instantly create a 4-node cluster for you! Now, here are some more details about what's going on “under the hood” during this process:   the PM2 daemon will take over the ex “master process'” role and spawn N processes (the former “worker processes”) while relying on round-robin balancing moreover, if it's PM2 process manager that you're using, your process gets automatically scaled across all the existing cores (no need to trigger the cluster module for that anymore) also, the same PM2 process manager will ensure that processes restart, instantly, if they happen to crash   You'll just need to write your Node.js app as if it were for single-core usage and the PM2 module will make sure that it gets scaled for multi-core. Note: now if you want to scale your Node.js application further, you might want to consider deploying more machines...    Scaling Across Multiple Machines with Network Load Balancing The underlying process is more than similar to the “multiple core scaling” one, if you come to think of it: Instead of several cores, you'll have several machines; each one will be running one or more processes and will get “backed up” by a load balancer redirecting traffic to each machine in this infrastructure. “And how does a network balancer work, more precisely?” you might ask yourself: Once a request is sent to a node, the balancer sends the traffic to a specific process. And there are 2 ways of deploying your internal balancer:   deploy a machine and set up a network balancer yourself, using NGINX use a managed load balancer (like Elastic Load Balancer); setting it up is conveniently easy and it “spoils” you with all kinds of built-in features, such as auto-scaling   Now if your “How to scale your Node.js app” question turns into a “Isn't it risky to have just one point of failure for my infrastructure?": Just deploy multiple load balancers instead of relying on a single balancer.  They would be all pointing to the same servers, needless to add. Note: for distributing traffic across your “ecosystem” of internal balancers, you could just add several DNS “A” records to your main domain.   How to Scale Your Node.js App: 3 Scaling Strategies to Consider 1. Decomposing “Microservice” is another word for this scaling strategy. For practically you'll be “juggling” with multiple microservices (although their size is of no significant importance, actually). Or multiple applications, with different codebases (and in many cases, each one of them has its own UI and dedicated database). And it's by services and functionalities that you'll be decomposing/scaling your Node.js app. A strategy that can lead to unexpected issues in the long run, but which, if implemented correctly, translates into clear gains for your apps' performance.   2. Splitting Or “horizontal partitioning” or “sharding”, if you prefer. This strategy involves splitting your app into multiple instances, each one responsible for a single, specific part of your app's data! Word of caution: data partitioning calls for a lookup before you carry out each operation; this way you'll identify the right instance of the application to be used. Take this example here: You might want to partition your Node.js app's users by language or area of interest. In this case, a lookup step is a must; you'll need to check that information, first things first.   3. Cloning And this is the easiest strategy at hand for solving your “How to scale your Node.js app” dilemma! Just clone your Node.js back-end application, multiple times, and assign a specific part of the workload to each cloned instance! It's both effective and cost-effective! Moreover, Node's cluster module makes cloning on a single server ideally easy to implement! And this is “How to scale your Node.js app”! See? You have not just one, but several Node.js built-in tools at hand and various strategies to choose from, depending on your scaling needs. Which scaling solution suits you/your app project best? ... Read more
RADU SIMILEANU / May 03'2018
How to Use Bootstrap with Angular 4? Here Are 3 Ways to Add It To Your Project 
Here you are now: your Angular 4 front-end app ready to... wow its users! “Almost ready” actually! For it still needs styling... And what better HTML and CSS framework to go for than Bootstrap, right? But how to use Bootstrap with Angular 4 more precisely? How do you properly integrate it into your Angular 4 CLI project? Great news: you have not just one, but 3 options at hand for adding it! Let me get into details:   On Using Bootstrap in Your Front-End Development Process Is there any need to list here the reasons why it's precisely Bootstrap that you're planning to implement into your Angular CLI project? Angular 4, to be more specific. After all, it's the most popular framework for styling websites built in HTML, CSS and modern web & mobile JavaScript frameworks (like Angular here): It's an open source, feature-rich framework that turns front-end development into a such a “breeze”. Basically, it empowers you to build responsive layouts without the need to be a CSS “expert”. And now, let's break down further with the step-by-step “tutorial” on how to use Bootstrap with Angular 4:   Step 1: Create a New Angular Project Using Angular CLI  The very first step to take is obviously setting up a brand new project. Use the Angular Command Line Interface to generate it. But first, install it to on your system: $ npm install -g @angular/cli It's only then, once you've installed its NPM package, that you can go ahead and... generate your new project.  For doing this, just type the following command in your CLI: $ ng new myproject Next, feel free to change into that specific directory and to turn on the web server: $ cd myproject $ ng serve “App works!” This is the message that you should be seeing in your browser right now.   Step 2: Install Bootstrap to Your Project Now that you've launched your new Angular project, it's time to add your Bootstrap library, as well. And you sure aren't nickel and dimed in options. There are 4 ways to add Bootstrap to Angular 4.   Step 3: How to Use Bootstrap with Angular 4 — 3 Different Ways to Integrate It Option 1: Install Bootstrap from CDN And there are 2 particular files that you'll need to install from CDN into your project:   the Bootstrap CCS file the Bootstrap JavaScript file    Note: keep in mind to add the jQuery JavaScript library file, as well! Next, open the src/index.html file and insert the following:   the <link> element to add the Bootstrap CSS file at the end of the head section a <script> element for adding jQuery at the bottom of the body section a <script> element for inserting the Bootstrap JS file at the bottom of the body section   Eager to see “Bootstrap in action” in one of your project's component templates? Then give it a try:   open the src/app/app.component.html enter the following code there:   <div class="container"> <div class="jumbotron"> <h1>Welcome</h1> <h2>Angular & Bootstrap Demo</h2> </div> <div class="panel panel-primary"> <div class="panel-heading">Status</div> <div class="panel-body"> <h3>{{title}}</h3> </div> </div> </div> And it's the following message that this HTML template code should trigger in your browser: “app works!” Note: go for a Bootstrap theme of your choice; once you've downloaded it (from Bootswatch.com for instance), its bootstrap.min.css file will get instantly opened up in your browser. Just copy the file's URL and use it to replace the string assigned to the href attribute of the <link> element, in the index.html file. And voila! It's precisely those colors, defined by your chosen theme, that get displayed in the browser now!   Option 2: Install Bootstrap using NPM And here's another valid answer to your “How to use Bootstrap with Angular 4” dilemma! Simply enter: $ npm install bootstrap@3 jquery –save It's this command that will integrate Bootstrap and jQuery into the node_modules folder of your Angular 4 project directory. Moreover, it will include these 2 dependencies in the package.json file, as well. Once properly installed, you can find both packages at:   node_modules/bootstrap/dist/css/bootstrap.min.css node_modules/bootstrap/dist/js/bootstrap.min.js node_modules/jquery/dist/jquery.min.js   Note! You have 2 options for integrating those files into your Angular 4 project:   add the file paths to the script array and to the file path of the angular-cli.json file add the corresponding <script> and <link> elements to your index.html file   Option 3: Add NG-Bootstrap to Your Project The great thing about this method is that you'll no longer need to add jQuery and Bootstrap dependencies. Ng-Bootstrap comes packed with a set of built-in native Angular directives which are already CSS and Bootstrap's markup-based. Now, getting back to our initial “How to use Bootstrap with Angular 4” question, let's see how we install this NPM package.  For this, just enter the following command in your Angular 4 project directory: npm install --save @ng-bootstrap/ng-bootstrap Next, make sure you also install Bootstrap 4 to your project: $ npm install bootstrap@4.0.0-alpha.6 And, the final step is to add the following files:   jquery.min.js bootstrap.min.js bootstrap.min.css   … to your .angular-cli.json file Now you still need to import the Ng-Bootstrap’s core module — NgbModule — from its @ng-bootstrap/ng-bootstrap package. To do this, just type the following import statement into app.module.ts: import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; All there's left for you to do now is to add the NgbModule to the @NgModuledecorator's imports array.  And since we're here, you'll find some more than “enlightening” info (chunks of code here included!) on the 2 different options at hand for importing the NGBModule: either in your project's child modules  or in your the root module itself … in this article here on Using Bootstrap with Angular.   Using The NG-Bootstrap Components: Which Are They?  With the NgbModule installed into your Angular 4 project, you're now able to use the Ng-Bootstrap components. To leverage them in your app.component.html. Speaking of which, here are the components at hand:   Accordion Alert Rating Tabs Carousel Progressbar Collapse Datepicker Buttons Pagination Typeahead Popover Timepicker Dropdown Modal Tooltip   The END! Does this answer your “How to Use Bootstrap with Angular 4” question?  Which method of adding this front-end framework to your project is more suitable for you? ... Read more
Silviu Serdaru / Apr 30'2018
Which Are the Free Magento 2 Blog Extensions You Should Be Using? 9 Must-Haves
Informative, entertaining, engaging and... a key revenue source! These are just some of your expectations regarding your Magento 2 blog, right? Well, then, get ready to check them all off your “wishlist” digging through my shortlist of can't-believe-its-free Magento 2 blog extensions. From SEO-oriented to shipping-focused features, from functionalities centered on social media to those geared at enhancing page loading speed, these 9 extensions are, each, extra functionalities to inject into your blog. So that it (your blog) should serve your specific needs and help you reach your goals. And that without having to “stretch” your budget (there are only 100% free extensions in this list)... Oh, yes: and they're all wearing the signatures of certified Magento partners! And now, let's get straightaway to these must-have Magento 2 extensions that you should be turbocharging your blog with:   all of them “spoiling” you with configurations that make customization unexpectedly easy … blending perfectly into your blog's design and fitting into your codebase (no need to depend on an “army” of coding experts)   1. Magento 2 Image Slider  Let's review a visual/aesthetics-oriented extension first things first. For, as above-mentioned, a “money-making” blog shouldn't be purely informative and helpful, but... engaging, visually-arresting, as well. So, imagery does play its major part here! Now here are a few of this extension's key features:   supports no less than 10 sliders built-in support for inserting video text, image one of those fully responsive free Magento 2 blog extensions provides tons of animations, with Live Preview, for you to select from supports OWL Carousel  conveniently intuitive UI you're free to display it anywhere on your blog with CMS & Widget   2. Facebook Live Chat  A blog is the ultimate channel of communication with your brand's audience. With your e-store's regular and potential customers. Well, then moving from standard communication to... instant communication is a must if you want to meet their expectations. And this is what makes Facebook Live Chat one of the must-have free Magento 2 blog extensions.  It's that chatbox incorporated into your blog that's powerful enough to turn “just” guests into loyal customers. And now, let me point out to you some of its most powerful features:   there's a Like button and a store profile incorporated into the chatbox user statistics capabilities unlimited History Chat you get to set upcoming events, define greeting text and integrate your e-store's Facebook profile into the chatbox simple backend operations for enabling/disabling the chatbox displayed on your blog familiar UI; a Facebook Messenger Interface-alike chatbox    3. Magento 2 Lazy Load  A must-have extension for your Magento 2 blog if you care enough about the user experience that you provide there. And page loading speed does play a key role in improving/negatively impacting it.    Moreover, besides optimizing your blog's performance, Magento 2 lazy load creates some aesthetically-pleasing image transitions influencing the UX. But let's get deeper into details and “unearth” all those advanced features that make this extension one of the must-haves:   it helps you save your web server resources —  saves bandwidth and minimizes server requests it creates smooth, blurring effect transitions for your lazy load images … and a smooth, visually-pleasing transition when users keep scrolling down your pages it gives your blog a ranking boost by creating friendly code strings it optimizes your blog's page loading time you're free to enable/disable the “Lazy Load” mode for each one of your blog's pages you get to set advanced time point for loading pages   4. Better SEO, One of the Free Magento 2 Blog Extensions You Should Be Using Inject Better SEO into your blog and... propel it in the search engines results! And it's not “just” packed with clever features, but ideally easy to use, as well. Built to fit into your blog's existing code structure and to empower you to customize it to serve your SEO goals in detail. I'm talking here about:   meta descriptions meta keywords   … that this extension's flexible enough to allow you to insert quick and easy. Now that we've settled that Better SEO makes an ideally customizable, blog/store-friendly extension, let's check out its powerful features:   SEO checklist —  a more than handy “TO Do” list, pointing out to you the SEO tasks to complete for reaching a high SEO score its detects duplicate content issues advanced HTML/XML sitemaps —  one for the users, the other one to be used by search engines structured data — implements schema structured data metadata template rules —  easy to define mass and dynamic metadata for your pages, categories, layered navigation provides you with actionable SEO reports rich snippets preview cross links social optimization    5. Exto Analytics Applying a marketing strategy that lacks the proper data-fuel is like aiming at a target... blindfolded.  So, if relying on pure chance doesn't define you and if you want to go beyond the data provided to you by the native Magento 2 reporting functions, go with Exto Analytics. Here are some more heavy-weighing reasons to do so:   real-time mobile dashboard, so you should remain “connected to” your data anytime anywhere convenience at its best when it comes to handling your reports — you get to sort data by specific columns and even to turn off the columns feature itself date range picker —  compare and evaluate your blog's performance on different periods of time your previous data gets added to your reports, as well, once you install the extension a chart, enabling you to visualize all data reports in parallel   6. Magento 2 Admin Theme From user experience to... admin experience. As your own blog's admin, you should also consider making your dashboard's more user-friendly and intuitive. For a high level of convenience on your side will bubble up, eventually, in the experiences that you'll create for your visitors. But let's see specifically what makes Admin Theme one of the best Magento 2 blog extensions to use:   mobile optimized easy to use and quick to customize retina ready clean, neatly structured code a different interface for Login & Forgot Password admin icon font translation-ready   7. Magento 2 Infinite Scroll It does precisely what its name says: it keeps loading content, without interruption, as your blog guests scroll down. Fluidity in the way you present content to your readers translates into improved user experience! And now, let's scan through this extension's specific features:   you can display and easily change the “Show” button, along with its loading text the navigation bar can be placed anywhere on the page you can implement it both on your category page and in the search page the pages that your readers land on get automatically loaded  while scrolling down, your blog guests know, at all time, what section on the blog they're on you get to customize your progress bar to your liking users get to share the links of those specific pages that they reach during their scrolling (for instance, if they're on page 8 of your blog, they can bookmark/share the link of precisely that page)   8. Better Blog  Now, let's imagine that you don't own a blog yet, “only” an e-store. And that now you want to integrate a simple blog, as well. One that should:   be conveniently easy to configure have a beautiful layout design to “wow” your readers with load fast come packed with much-needed backend features, making updating content unexpectedly easy for you, the admin   Checked, checked, checked! The Better Blog is undoubtedly one of the must-go-to Magento 2 extensions no matter the size of your current e-commerce site. Once integrated into your Magento store's backend, you'll get to manage both your store and your blog from the very same place. Here are the main reasons why it still is one of the best Magento 2 blog extensions:   SEO friendly: SEO-friendly URLs, metadata information, XML sitemap  open source code layered navigation, with a significant impact on UX (your blog guests get to quickly track precisely those posts that they're looking for out-of-the-box comment functionality: Disqus Comment, Facebook Comment blog topics built-in product recommendations feature: "Who Bought This Also Bought", "Auto Related Products", "Frequently Bought Together" the option to integrate your store or your blog's sitemap responsive design social sharing buttons blog widgets: show your (recent) posts on your site's homepage (sidebar here included)   In short: you get to integrate a simple blog with your e-store with no need for a third-party framework! Moreover, you'll be managing comments, categories, posts, right from your Magento 2 admin, quick and easy. And you'll get informed each time when a blog guest has posted a comment, not to mention that the extension grows into a powerful “ally”, supporting your SEO efforts. One of the must-have Magento 2 extensions without question!   9. Magento 2 SMTP  A powerful extension to “turbocharge” your Magento 2 blog with so you:   gain total control over your email customization process get enabled to run test sections on your Magento 2 SMTP server   And it does all that by providing your blog with configurable port and host. Now, let's go through its cool features:   it stores all sent emails logs built to support 20+ SMTP service providers enables you to test how well your current email setting's doing it empowers you to customize your emails in the slightest detail   The END! These are the 9 best Magento 2 blog extensions that you should be using. Scan them through, “weigh” their feature loads while setting them against your own needs and growth plans for your blog and... go for the most suitable ones! ... Read more
Adriana Cacoveanu / Apr 27'2018