You're building a React website/application. You have your bulky list of functionalities all set, you know how you want it to look, but can't decide on the React framework to build it on: What's the main difference between Gatsby and Next.js, after all?
And what's the difference between server-side rendering and static site rendering?
Since both frameworks seem to be serving your main goals:
not to get tangled up in config or routing
to generate a fast, fully accessible and SEO-friendly website
to provide you with boilerplate application
So, what's the fundamental differentiator between Gatsby and Next?
The one(s) that'll help you identify the framework that best covers your specific use case.
Or, are there several of them (differentiators)? Just keep on reading:
1. But First: What Do Gatsby and Next.js Have in Common?
How are they similar?
they're both React frameworks
they're both great options for SEO purposes
they're both great options if you need a high performance React app/website
they both provide entirely formed HTML pages
they both provide boilerplate application
they both simplify and speed up the React app/website development cycle
they both generate SPA out-of-the-box
they both provide great developer experience
In short: both Next.js and Gatsby score well in categories like speed and SEO; they're both awesome solutions to streamline app/website development in React.
But the way they go about it... that's where these frameworks are fundamentally different.
2. How Does GatsbyJS Work?
It builds HTML code on build time.
That would be the short(est) answer to your question. But if we were to elaborate upon it:
GatsbyJS is a static site generator that... generates (static) HTML code during the “build” process. How? It fetches data from external sources — APIs, Contentful, WordPress, markdown files — and uses GraphQL to render it.
Example: say you have a blog. In this case, you could use Gatsby to fetch your blog posts from... Contentful. Or any other repository where you might be storing your content (e.g. WordPress or Drupal).
3. What's Next.js?
A tool for rendering pages on the server-side.
And a more detailed answer would be:
It's a React framework that supports server-side rendering. Meaning that it generates the needed HTML code dynamically, from the server, each time a request is being sent through.
In short: your browser's provided with pre-rendered HTML code instead of empty “div”.
Now, how does its distinctive way of going about building a React app/website suit you?
It enables you to develop multi-page applications using static rendering and serving dynamic data from a back-end.
4. What Are They Used For? Specific Use Cases for Gatbsy and for Next.js
What's the difference between Gatsby and Next.js in terms of use case?
In other words: when should you choose one over the other?
4.1. Specific Use Cases for GatsbyJS
1. Blogs and small-scaled websites
And I'm talking here about a particular scenario:
When you have no comments section on your blog or, at least, not a very “busy” one. So, a use case where you don't need to render content every 5-10 minutes.
Since blogs are static and their content doesn't change that frequently, Gatbsy's ecosystem makes the perfect fit for them.
And you have 2 options for your blog post creation and publishing process:
you write a blog post and the npm build will generate a corresponding HTML page
you write a blog post in Contentful (or a CMS of your choice), publish it and recompile your blog in Netfly
2. Landing pages
Again, since they use static content, landing pages make an ideal use case for GatsbyJS.
Where do you add that Gatsby “spoils” you with such a wide collection of plugins to choose from and to boost your landing page with: PWA, inline critical CSS, AMP...
4.2. Specific Use Cases for Next.js
1. Content-packed websites
Dealing with lots of content? Or are you expecting your site's content load to grow, over time?
Then Next.js should be your first choice.
The reason is simple:
Just imagine your Gatsby framework overstrained to rebuild all that content over and over again. Not precisely the most time-effective solution to go with, don't you think?
2. When you need more freedom for accessing your data
Do you want to empower your content team to publish content on their own? Then you might want to consider Next.js.
3. To-Do Apps
They make the perfect use case for server-side rendering:
Next.js retrieves the content for your list, from the server, and displays the to-do's upfront.
5. The Fundamental Difference Between Gatsby and Next.js Is...
… that Gatsby's a statically generator, while Next.js generates HTML dynamically.
Image by Colin Behrens from Pixabay
The first creates JS/HTML/CSS at build time, while the second generates it at run time.
Or, if you wish to put it this way:
Gatsby doesn't depend on a server, while Next can't function without one.
6.4 Other Main Areas Where They Differ
For the “Gatsby vs Next” debate doesn't end at the “static vs dynamic” comparison.
There are other factors, as well, that set these 2 React frameworks apart. And we'll outline the 4 most obvious ones:
6.1. Data Handling
In case of Gatsby, the framework's the one “deciding” how you should handle data in your app.
It needs to know where your data, your images and other types of content will be handled.
What's in it your for? Why would you accept this... “compromise”: to be told how to handle data in your own app?
Because:
Gatsby, through its rich collection of plugins, enables you to hook up your site to various data sources. This way, you gain external control over your data...
By comparison, Next's totally unopinionated.
Is gives you the freedom to decide your own data architecture.
In short: it doesn't “tie” you to a specific technology. You're free to handle data your own way.
6.2. Deployment
You can deploy Gatsby anywhere you need to, with no special configurations, since it's no more than compiled CSS, JS, and HTML.
And things are equally straightforward with Next.js, as well. Since it's a Node application, you can host it anywhere you want to...
6.3. Routing
With Gatsby, you have a pages directory where you're free to create all the HTML pages needed for your app/website.
Moreover, they provide you an API, as well, for creating routes dynamically.
With Next.js you get a “pages” folder, as well, where you can set up your new pages and get your app running, with no routing to config.
6.4. Plugins
“What's the main difference between Gatsby and Next.js?” Plugins sure are a powerful differentiator.
Gatsby comes “loaded” with an entire ecosystem of plugins.
So, do you need to have your JS minified, you CSS compiled, your...? There must be a Gatsby plugin for it.
Image by Michael Schwarzenberger from Pixabay
Next.js, on the other hand, doesn't “tempt” you with plugins, since its smaller scope doesn't justify the usage of plugins...
The END!
These are the key differences between Next.js and Gatsby, along with their common points and specific use cases.
Have you had your “Aha!” moment(s) reading through our post? Have you managed to identify the right framework for your own use case?
Photo by Charles ?ﾟﾇﾭ on Unsplash
Silviu Serdaru / Nov 12'2019
Let's say that you have a cleaning business. Once a user types “office cleaning” on your website, the search results that show up first are some blog posts on this topic instead of the page that you're actually targeting: the “Office & Workplace Cleaning” service page. So, you wonder: “How to configure custom search in Drupal 8?”
What are your options if you want to go beyond the default Drupal search?
How can you influence that search results ordering so that you:
improve the overall site search experience for your visitors?
push forward into the spotlight particular pages on your site, based on specific keywords?
We've done our homework, collected and then selected 9 different ways that you can upgrade the default search experience in Drupal so that it should fit your needs perfectly. From:
additional Drupal modules that you can enable
to effective search plugins that you can install
to brilliant configurations that you can set up
… you'll find a whole collection of options at hand for fine-tuning the search functionality on your Drupal website.
1. Enable the Drupal Search API Module
If you find the default Drupal search module a bit too... restrictive, consider Search API.
It takes but 3 simple steps before you can leverage its flexibility to the fullest:
just install it and enable it, along with the Search API database module
add an index and an API server, as well
2. Integrate Your Drupal 8 Website with Apache Solr Search
The Java-based search platform is powerful enough to supercharge your website with tons of search capabilities:
Source: Drupal.org
search for all attributes of Drupal nodes
ouline the search queries in the results
perform language stemming to return related results
search across multiple websites
index from... millions of nodes
overlook users' typos and provide proper suggestions
provide location-based search results
display the most relevant results on top of the list
In short: you're better off with a Solr back-end; it will always overstep a Drupal database search setup when it comes to returning relevant and intuitive results. Even in “keyword phrase search” scenarios.
3. How to Configure Custom Search in Drupal 8: Use ExpertRec
This search-as-a-service solution ships with a heavy load of useful features, such as:
manageable search ranking
typo tolerance
easy UI control
results as you type
custom facets
So, you might want to consider it for evaluation. Just put its robust set of features against your site search needs.
4. Use the Cludo Site Search Solution
What if you could turn the site search on your Drupal website into a powerful “insights generator”?
Source: Drupal.org
One that would provide you with valuable and, most of all, actionable insights on your users' search behavior. Just imagine turning all that powerful data into highly relevant site search experiences for your visitors.
Cludo's that fully customizable on-site search tool, that “spoils” you with unique features like:
semantic search
customizable index
machine learning-driven autocomplete
Find out more about this tool and what it can offer you from our post on Cludo as an alternative to Google Site Search.
5. Boost the “Title” Field to Improve Search Relevancy
Say you have a “How to speed clean a kitchen” page on your website (we're assuming that you run a professional cleaning business, remember?).
Now, if a website visitor types “how to clean my kitchen quick” you most certainly want that specific page to show up first, right?
Well, to make that happen you simply boost the title field. Here's how:
go to /admin/config/search/search-api
click “Edit”, next to the index that you're targeting
click “Add Fields”
look for “Title”, under the “Content” heading
hit “Done”
look for your title field scrolling down your list of fields and replace its “Type” from “Strong” to "Fulltext"
configure the “Boost” dropdown that pops up: set the title, fill in the special keywords field...
click the “Save Changes” button
6. Configure the Search View to Your Needs
“How to configure custom search in Drupal 8?” You tweak the default search view...
The good news is that Search API connects with Views, “spoiling” you with loads of flexibility when setting the way your search results get displayed.
But the great news is that you can go even further:
Define a field-based view, add the title and excerpts fields so that your website returns a Google-like title and snippet to its users.
7. Enable the Indexer to “See” the Whole Node
Let me guess: you, too, are using Paragraphs on your Drupal site.
Who doesn't, right? All that flexibility that you get when putting together your web pages is just... irresistible.
Then, you must have already bumped into one “minor” issue:
Your search indexer can't “see” the entire content on a page, since the Paragraphs module breaks it into multiple little pieces.
Luckily, Search API comes to the rescue!
Just add the “Rendered HTML Output” field to your index and you'll enable the indexer to “see” the whole content on a page. Just like your website visitors see it: with references, paragraph entities and all that...
And here's how you incorporate this field:
go to /admin/config/search/search-api
click “Edit”
click “Fields” on top of the page
click “Add Fields”
look for “Rendered HTML Output (rendered_item)” under “General”
click “Add”
Word of caution: you'll then need to select a view mode for all the content types that your search index can access. Make sure you go with the “default” mode (unless you've set up a custom mode of your own) and not the “search results highlight input”.
8. Add a Custom “search_keywords” Field to the Targeted Content Types
Remember the example at the beginning of this post (the one with the “office cleaning” search phrase)?
Now, it's about time we found an answer to this question:
How can you give your content team more control over the returned search results? Over the results ordering...
You set up a new field called “search_keywords” and integrate it with every content-type/bundle that you're targeting:
go to /admin/config/search/search-api
click “Edit”
click “Fields”
click “Add Fields”
look for your newly created “Search Keywords”, under “Content”
click “Add”
look for your new field in the fields list
change its type from “String” to “Fulltext”
configure the “Boost” dropdown showing up (consider setting it to 21...)
click “Save Changes”
The END!
Here are no less than 9 different solutions to your “How to configure a custom search in Drupal 8?” type of dilemma.
Which one would you go with? And why?
Give us a clue in the comments here below.
Image by Republica from Pixabay
Adriana Cacoveanu / Nov 08'2019
They're both open-source and some highly popular options for cross-platform app development. They're both backed by huge tech communities... so your struggle is real: "React Native vs Flutter: which one should I go with?"
On one hand, you have Flutter, which has gained momentum incredibly fast this year, putting the same question on most developers' lips:
Will Flutter replace React Native?
On the other hand, you have React Native, which has been around for +4 years now and uses "good old" JavaScript.
Should you place your bid on "familiarity" and reliability or should you take the leap and go with a newer, but so promising platform instead?
Speaking of which:
What are Flutter's selling points more precisely? Those that have instantly propelled it in developers' radar so quickly?
Why would you choose Flutter over React Native? And when is the latter the best option?
1. Why Choose Cross-Platform App Development in the First Place?
Why would you go with this approach to mobile app development instead of taking the "native" path?
Here are the most powerful reasons:
you get to write (most of) your code once and use it on multiple platforms
you get to tap into the features of your cross-platform framework of choice to develop various types of mobile apps: social apps, eCommerce apps, interactive apps
you get to build a native-like app without getting tangled up in Android, iOS or Java development
Notes:
optimizing your cross-platform app might get discouraging if you're not prepared for it
expect it to be less performant than its native counterpart
your platform of choice might not ship with all the functionalities that you need (Bluetooth, GPS...), so consider creating new plugins or opting for 3rd party ones to compensate for the lack of certain native features
2. React Native Is an...
... open-source JavaScript framework — or a new version of React, if you wish — launched by Facebook, used for building Android and iOS mobile apps.
Source: Facebook.Github.io
How does it work? What kind of "witchcraft" does happen under its hood that enables you to build a hybrid app? One that works both on iOS and Android?
React Native uses a JavaScript bridge which... bridges your UI code to native components.
3. Reasons Why You Would Choose React Native over Flutter: Top 3
Source: Google Trends
So, going back to our "React Native vs Flutter" dilemma: why would you go with Facebook's "prodigy"?
because it's written in JavaScript (entirely) and so it's much easier to find experienced JS developers for your app project
because it's more... mature: it's been around for +4 years, which translates into reliability and a high level of popularity among developers
because it streamlines the app's development cycle: it's faster (just think "ready-to-use components") to build app-like experiences with React Native than with Flutter
4. Flutter Is...
... Google's open-source SDK, written in Dart, used for building cross-platform apps.
How does it work?
It leverages the skia rendering engine to render Dart-based UI in both Android and iOS.
Source: Flutter.dev
4 Key Features of Flutter:
design-specific features
entirely customized environment
platform-specific SDKs
native-like performance
5. Flutter: Biggest Selling Points and Main Weaknesses
What makes this "new kid on the block" so tempting among developers?
Source: Stack Overflow
What does it bring to the table that React Native can't provide?
it's easier to install it: when using React Native, many developers choose to use Expo precisely for this purpose; there's no way of automating the whole process and you bump into errors pretty often
it's easier to test it compared to the complicated setup that you need to do for testing a React Native app
it uses proprietary UI widget sets (by comparison, React Native uses native components), which give you more freedom to customize your UI block components
it benefits from first-party support for its iOS-style and material design widgets
it uses object-oriented design (due to Dart)
it performs better: Flutter's slightly faster since it depends on a JavaScript bridge, like React Native, for interacting with native components
it speeds up the UI designing process (React Native uses native components, while Flutter uses owner widgets)
And this last one is Flutter's most "seductive" feature:
It allows you to create a new custom layout in no time.
"And why would I be hesitant to choose Flutter over React Native?" you might also ask yourself.
Here are some of the aspects that might discourage you from using Flutter for building your cross-platform app:
there aren't so many developers working in Dart, the language used for writing Flutter, compared to the deep pool of JS professionals
the development process is a bit lengthier
it's still relatively a young platform: you might not have a library for every functionality that you want to implement; not just yet...
6. React Native vs Flutter: You'd Be Better Off With...
... Flutter if:
you need to have your app running on both Android and iOS
you're already an experienced C++/Java developer (or developers in your team are), since it'll then be easier for you to learn Dart
high performance is on top of your priority list
you want a visually-appealing UI for your cross-platform app
And opt for React Native if:
you're already an experienced JavaScript developer
you put a high value on the support of a giant, mature tech community
The END!
How do the scores look like on your evaluation list?
Which of the 2 cross-platform solutions would you go with and why? Let us know in the comments below:
Photo by Coffee Geek on Unsplash
Silviu Serdaru / Nov 06'2019
It sure is “the thing” these days. But does that make it “the perfect... thing” for your project, as well? For your specific project needs and priorities? What is Next.js used for more precisely?
Can it handle both portfolio sites, let's say, and... particularly large web projects?
Is it the best fit for both rarely and frequently updating websites? For both websites depending on a rich third-party ecosystem and those that don't use so many libraries?
Let's dig up some answers on:
when (and when not to)
why
… to use Next.js.
1. But First: What Is Next.js?
It's a lightweight React framework used for server-rendered and static web applications.
Now, if we were to highlight some of its main features, any shortlist would have to include:
(default) server-side rendering
ecosystem compatibility
prefetching
HMR and Error reporting
automatic code-splitting
Note: since it resembles PHP development so much, many developers find it easy to “jump on the Next.js bandwagon”.
2. And How Does It Work?
Next.js renders your React app/website on a server (as opposed to being rendered on the client-side).
Source: GoogleDevelopers
So, do keep in mind that you'll need to have a server... somewhere.
The main gain here is that it supports scenarios where data has to be updated in real-time.
As for the drawbacks of server-rendering:
higher level of complexity: expect to write more code to get everything working properly
it's a bit more challenging when dealing with third-party services
a bit more difficult to deploy (compared to client-side rendering and HTML)
3. What Is Next.js Used for? What Types of Projects Would You Use It For?
Now, back to the question that generated this blog post in the first place:
When should you consider Next.js?
When is it the best choice? Does it serve your... specific use case, for instance?
In this respect, we've identified 3 types of projects that Next.js makes the best fit for:
3.1. When SEO is your top priority
Do you need SSR (server-side rendering) to ensure SEO-friendly pages on your website? Then Next.js is your only option.
It's built to serve precisely this type of project, where good SEO is a crucial objective.
3.2. When content gets updated particularly often
Let's say that new and new data gets uploaded on your website and that the content on your web pages needs to get updated within... 3 minutes, maximum.
Source: When Should You Use Gatsby?
And I'm thinking here:
news sites
large eCommerce websites
property listing websites where new comments get added and descriptions updated on a regular basis
In short: if you expect content on your future website to get updated often, then it writes Next.js all over your project.
4. Final Word
Now, would you care for a piece of advice? When trying to answer questions such as:
“What is Next.js used for?”
“Should I use it on my project or should I go with static?”
… make sure you evaluate both your short-term and long-term needs.
In other words: your website might not need to update its content frequently right NOW, but maybe you're considering scaling it up in the future...
For in that case, build performance and SEO will become some key requirements and your client-side or static architecture won't serve your goals anymore.
Just make sure you coordinate your final choice with your future goals, as well.
Image by Lynn Neo from Pixabay
Silviu Serdaru / Nov 04'2019
For that's the proper question to ask yourself: "What is the best web design platform for my own use case?"
For your own context, which is made of specific:
needs
constraints and limitations
business goals and objectives
particular budget
level of technical know-how
type of website that you need
And this last factor is, by far, the most important criterion to use when you evaluate the most popular web development platforms.
When you try to identify the best one for you...
It's also the criterion that we'll use in today's post to highlight for you the best web design platforms in 2019.
Just scan through the different types of website listed here below, spot your own type, and see which platform makes your best choice.
1. If You're Building a Low-Maintenance, User-Friendly Website...
Say you're not planning to "take over the world" with your new website and you need to be able to keep its maintenance and upkeep to a minimum.
Then you opt for Squarespace...
And here are the top reasons why you would want to choose this particular platform for web design:
you get a conveniently simple interface
it ships with a load of modules to choose from
it provides you with eCommerce functionality
It's true, though, that you don't get that much customization freedom as you'd get with other platforms, but it does the job if it's a:
user-friendly
low-maintenance
... website that you're planning to build.
2. If You're Building a Visually-Appealing Website...
In this case, your 2 best options are WordPress and Drupal.
The first "spoils" you with so many great templates to choose from to create a visually-stunning website. Not to mention the heavy load of WordPress plugins that you can use for custom-tuning your site to fit your aesthetical needs perfectly.
Whereas for Drupal (and particularly Drupal 8), you just can't ignore its built-in responsive design capabilities.
Note: one of the aspects that might discourage you from choosing this CMS to create a great looking website is the lower number of Drupal developers compared to the "deep" pool of WordPress talent. That's why we've focused an entire post on the topic of "hiring Drupal developers" and "stuffed" it with tips on where exactly to find the right Drupal talent for your project.
3. If You're Building an Enterprise-Level, Complex Website...
Drupal "rocks supreme" on this category:
it's equipped to withstand floods of traffic and massive volumes of content
it's designed to handle complex, multi-user content creation and management systems
it's robust enough to power heavy multi-site infrastructures
it ships with tons of modules to extend its functionality even further
In short: Drupal's an "enterprise-ready" platform; it's built precisely for large, high-trafficked websites (think Tesla.com, eBay, NASA, Harvard University's website).
Where do you add that Drupal stands out as the best platform for responsive web design, as well...
4. What Is the Best Web Design Platform to Rank High on Google?
If out-of-the-box SEO optimization features are your top priority, then you'll need to choose between WordPress and Drupal. They both ship with robust plugins, respectively modules, aimed at helping you make your website SEO-friendly.
WordPress
The system's already ideally optimized with regards to SEO:
it's coded so that search engines can easily crawl in
managing heading and title tags is dead-simple
creating and updating content's highly intuitive
Word of caution: WordPress's ease of use and SEO-friendliness does come at a cost: being so popular makes it particularly "tempting" for hackers, too. You don't want to cut down on preventive maintenance costs on your future website.
Drupal
Its SEO modules — Pathauto, Yoast, Global Redirect — are designed to streamline all your SEO efforts, from optimizing your meta tags to... setting up your SEO-optimized URLs.
5. If You're Building a Fully Customizable and Scalable Website...
"What is the best web design platform for me if I want complete freedom of customization and if I'm planning to scale my website over time?"
It's... Drupal, again.
From all the most popular web development platforms out there' Drupal sets itself apart as:
the most flexible one: there's a module for any customization work that you might want to do on your website
the most scalable one: Drupal's designed to scale up, seamlessly, to accommodate huge loads of content and traffic
6. If You're Building an eCommerce Website...
What platform should you power your eCommerce goals with?
Well, it depends greatly on whether it's a powerful "selling machine" that you're planning to build or an online store for your start-up business in eCommerce.
Magento
If you have a huge product inventory (maybe even a multi-source one), Magento's your best option. Here's why:
it's robust: Magento's built to cope with an intricate and heavy infrastructure of multiple stores, currencies, languages...
it's feature-packed
it's scalable: feel free to start with a small online store and to grow it into a complex multi-store network; Magento's designed to accommodate your growth plans, no matter how ambitious
Shopify
If you need a website for your start-up eCommerce business and you don't want to get tangled up in customization, a hosted platform like Shopify is the best option:
it's SEO-friendly
it provides you with unlimited bandwidth
it adjusts to your specific eCommerce business model: POS, dropshop, subscription-based...
it provides affiliates capabilities, purchase buttons, Facebook selling support, etc.
Word of caution: do keep in mind that, if you decide to migrate your online store to another platform, it's just your product information that you can export from Shopify.
In other words: don't expect to be able to transfer your user interface and your website design, as well.
7. If You Need a Beautiful Site but Have no Web Design Experience...
"What is the best web design platform for me if I want to create an eye-catching website but... I'm a non-developer?" you wonder.
"Oh, yes: and I want to build it fast and easy, if possible?" you ask.
It's Wix.
From the best web design platforms in 2019, Wix suits your needs and limitations perfectly:
you get a user-friendly WYSIWYG interface
it "spoils" you with a rich template collection
it's easy to learn and even easier to use
it "tempts" you with both free and low-cost options
In short: Wix is for anyone with close to zero web design experience who wants the freedom to set up, customize and further update his visually-appealing website himself.
8. If You're Building just a Small, Reference-Driven Website...
What if you just need to put together a basic business website to showcase your services? Nothing fancy, just a small website that should provide more detailed information to your potential new clients.
And that should fit your budget...
Then, what you need is the best website builder software that helps you get your site up and running in no time and grants you full control over its code and design.
And there are quite a few great ones:
Site Manager
Weebly
SiteBuilder
Shopify if it's a no-fuss eCommerce website
Wix, again
The END!
Have you found that type of website that you're planning to build listed here?
Photo by Kaleidico on Unsplash
Adriana Cacoveanu / Oct 30'2019
It scales like no other — built to accommodate huge amounts of content and massive volumes of traffic — it's incredibly robust, it's gone through a lot of innovative changes these +15 years and yet... Drupal's still less popular than WordPress. So, you cannot help wondering: “Why is WordPress so popular?”
What makes it more tempting than Drupal?
Since everyone agrees:
Drupal's a beast... It provides lots of robust “goodies” right out of the box, it powers some of the most high-loaded websites out there, it's developers' first choice for custom development...
Whereas WordPress is just a... popular blogging platform, right?
And yet, stats don't lie:
Any Wordpress vs Drupal in 2019 comparison would reveal to you that the first still rocks supreme.
Are you as puzzled by this paradox as we have been?
Well, then let's shine some light on this enigma. Here are the 3 strongest reasons why you would use WordPress over Drupal:
1. It's More Flexible: A Huge Ecosystem of Plugins and Themes
One of the most tempting benefits of choosing WordPress over... any other CMS is its unmatched flexibility:
It “spoils” you with an overwhelming no. of customization options.
+40,000 plugins, one or several for pretty much any functionality that you'd like to “inject” into your WordPress site. Lots of customization options to use on your WordPress theme: change fonts, color, layout, you name it.
You can easily get your blog/info portal/basic brochureware business site/gallery with a portfolio up and running in no time, then gradually turn it into a full-featured, custom-tuned website.
Note: I know what you might think: “But Drupal, too, is highly flexible. It ships with a rich collection of modules to... delve into and choose from.”
True, but, unlike Drupal with its load of modules, WordPress makes incorporating a plugin so much simpler. So much more accessible for... non-developers, as well.
2. Why Is WordPress so Popular? Because It's So Easy to Use!
From all the features of WordPress “guilty” for its popularity, its user-friendliness stands out as the most irresistible one.
WordPress caters to non-developers and junior developers, as well, unlike Drupal, which still carries its “For geeks only!” label. It's that accessible, that a non-technical user could get a light, basic WordPress site up and run in... 5 minutes.
Of course, custom-tuning it to perfectly fit your needs and preferences will require some extra time.
For any beginner, with zero web development experience, who doesn't want to get tangled up in PHP, HTML, and CSS, WordPress is a “declaration of independence”:
He gets a WYSIWYG editor that, conveniently enough, looks a whole lot like Word, and they get drag-and-drop functionality, as well. Assembling a simple website and then administering it and even further customizing it doesn't get any more straightforward than its gets with WordPress.
3. It's Backward Compatible... and That's a Huge Bonus
Why is WordPress so popular compared to Drupal?
The team behind it realized just what a pain it would be for end-users to break the backward compatibility of the platform that they got used to. What an ordeal their maintenance routine would become.
And so, WordPress users stuck to it. Its backward compatibility is, for them, the strongest proof that:
they've chosen a reliable platform
their loyalty is being rewarded
By comparison, Drupal 7's codebase was so frustratingly different from its predecessor's. Then, Drupal 8 came out as... a completely new world.
Just like Drupal's original creator, Dries Buytaert, pointed it out all too clearly:
Source: Dries Buytaert's blog.
The END!
These are the 3 main reasons why WordPress's more popular than Drupal: usability, backward-compatibility and flexibility/customization capabilities.
Curious now:
What other “hard to resist to” WP features would you have added to this list?
Photo by Fikret tozak on Unsplash
Adriana Cacoveanu / Oct 25'2019
It's fast, it's secure, it boosts SEO and it provides a great developer experience, but does it fit your use case? For it all comes down to one key question: “When to use GatsbyJS?”
Is it suitable for both a portfolio or documentation site and an app with a large content base? Or a large-scale enterprise website, for instance?
Should you use GatsbyJS irrespective of your/your team's JavaScript experience?
What are the obvious and some of the... less expected use cases for GatsbyJS? Key benefits that would make you want to choose it over a framework like... NextJS, for instance?
Now, let me break down the strongest use cases of Gatsby for you.
See for yourself whether your own use case has made it to the list or not:
1. When to Use GatsbyJS? When You Need a Static Site... Obviously
GatsbyJS's is optimized for this particular use case, after all: generating static websites.
Say you have a static web page (a landing page), that serves plain HTML, some JS, and CSS. As for your more specific types of content, you plan to use Youtube and a platform like Medium to host it on.
Gatsby would make the perfect choice for your use case since:
it provides server-side-rendering out of the box
it ships with a heavy load of plugins to delve into (extract data from your CRM of choice: Contentful, Drupal...)
it has a robust data layer built-in
Use it to create pages dynamically from almost any data source.
2. Use It for Your Documentation/Personal Portfolio Website or Blog
Use GatsbyJS for your blog, eCommerce website, or any other general static site that's under 500 pages, where you don't expect to serve any kind of dynamic content.
Note: there are the obvious use cases of GatsbyJS and the more... project-specific ones.
The volume of content served on your website and the amount of traffic aren't always clear indicators of whether you should or should not use Gatsby.
It's all a matter of infrastructure and of whether:
you do afford a build process for your React-based web app
your team's experienced enough to get the most of a micro-service architecture and of serverless functions
you depend on a database that should reflect, instantly, any changes made
GatsbyJS's built to go beyond small/medium scale static sites if used to its full potential.
3. Use It When You “Crave” High Performance
Not only that it's fast by nature, but GatsbyJS even stands out from the crowd of static site generators...
If page load time is your main concern, you might want to consider Gatsby as your first choice.
4. Use It When Your Project Demands a High Level of Security
“When to use GatsbyJS?” you ask yourself.
When you need to add an extra layer of security to your website.
Since it serves plain HTLM files and there's no database or sensitive customer data stored on the server... there's not much to hack there, is it?
The only thing left to “contaminate” if they do manage to get in is... your HTML files.
5. Use It to Build Your Progressive Web App
For GatsbyJS is far more than just another static site generator:
It's designed, from the ground up, to be a PWA website framework.
Quote source: The New Stack
In this respect, it:
ships with robust progressive web app features
is built to be fast and highly accessible across all devices and in all hardware and network contexts
6. Use It If Developer Experience Is One of Your Top Priorities
Luckily enough for your development team, GatsbyJS provides a modern development environment: simple, robust tooling and powerful built-in features.
To give you just a few specific examples:
it automatically generates static assets like CSS and images from the “static” directory
it builds routes between pages automatically
it minifies everything “behind closed doors” before it serves it up to the client
7. Use It If You Have Enough JS/React Experience
One of the few constraints when it comes to using GatsbyJS is the above-the-average JS/React experience required.
There are no two ways about it...
Also, another answer to your “When to use GatsbyJS?” question is:
When you already have some React components or codebase available to reuse on your static web pages.
8. Use It if You Fancy a Huge Ecosystem of Plugins
Why use GatsbyJS?
Source: Reddit.com
Because it ships with an impressive collection of plugins.
Basically, it enables you to enhance your otherwise simple, static website with all kinds of powerful plugins:
you could just plug Google Analytics into your site
you could “inject” a gatsby-source-medium plugin and have previews of your articles automatically served up on your website
9. Use It if SEO Is Crucial for You
When to use GatbsyJS?
When the SEO factor is of critical importance to you.
The web performance boost that you'll get from powering your website with Gatsby — since it'll render static HTML only — won't go unnoticed by your users and... by Google itself.
Just make sure:
a static architecture is, indeed, the right fit for your project
you've configured your SEO settings properly
10. Use It with a Headless CMS
It's another one of those primary use cases for GatsbyJS:
Pair your Gatsby site with a CMS data source of choice (a “headless” CMS): Contentful, Drupal, Netfly, WordPress.
This way, you pass all the “worries” regarding hosting and serving your data over to your CMS.
GatsybyJS integrates seamlessly with any data repository, so you can focus on implementing your front-end instead.
The END!
These are the top 10 use cases for GatsbyJS, ranging from the most common to specific ones.
Which of its benefits — security, high performance, plugin system, developer experience, CMS integration — is more important for your own use case?
Image by nugroho dwi hartawan from Pixabay
Silviu Serdaru / Oct 25'2019
With no standardized chatbot testing method at hand, how can you ensure your bot is error-free and user-engaging?
What performance testing tools should you use?
What are the most effective mechanisms for testing its functionality? What metrics should you include in your scenarios?
In other words: what goes into a solid bot testing strategy?
In this respect, here's a chatbot testing checklist — tools, ground-rules, best practices, techniques, key considerations — aimed at helping you set your own standardized testing plan.
1. Test Your Bot's Conversational Flow
Engage your chatbot in a conversation.
Take it as a form of UI/UX testing, where the interface's given by the questions and replies that your bot serves up.
Start with the broad, user-greeting questions and critical use cases (or chatbot testing scenarios), then gradually tackle the edge cases, as well.
Your list of questions, as this stage of your chatbot testing process, should include:
Does my chatbot understand the user's questions?
Does it respond promptly to them?
Are its responses accurate enough and relevant?
Are there enough conversation steps or... too many?
Does it keep the user engaged?
2. Run a Custom, Domain-Specific Test
Now, you can imagine that including every single expression specific to your field and every possible question related to your services/product is... mission impossible.
And yet, you can still provide broad classes when setting your context-specific questions for the bot to answer to. Do pay great attention to how you formulate them and to what niche terms you include there:
This is that stage of the conversation where your chatbot provides credible information on your products/services.
Where it should influence the user into making a decision...
3. Include Developer Testing
It goes without saying that your team of developers working on your chatbot project will test it anyway while building it.
Developer Testing Photo by Studio Republic on Unsplash
For them, it'll be more of a verification and validation test. They will have predefined the bot's replies and set the users' inquiries, so at this stage they'll just:
Check whether the chatbot serves up accurate and relevant answers to a hypothetical user's questions.
4. Run a Chatbot-Error Handling Test
Or what you might call a “limit test”.
Image by Tumisu from Pixabay
While putting together your chatbot testing strategy, just ask yourself:
What if a user enters a meaningless sentence or a not so commonly used expression? How would my chabot respond to that?
Of course, you cannot possibly anticipate all the irrelevant information that users might enter. All the exceptions that your chatbot will be challenged to handle... elegantly.
And still, your developers should come up with “emergency replies” for those exceptions that you do anticipate.
This is that phase of your testing process where you check whether your bot provides understandable answers in such “exceptional” scenarios.
5. 3 Chatbot Testing Tools to Consider
“What tools can I use for chatbot testing?” you might ask yourself.
Here's a shortlist of 3 tools to consider streamlining your testing efforts with:
5.1. Chatbottest
An open-source guide packed with 120 questions for assessing the user experience that your chatbot delivers.
It operates at three levels:
possible chatbot testing scenarios
expected scenarios
almost impossible scenarios
And it provides you with 7 different metrics to use for evaluating your bot's performance:
Understanding: does your chatbot understand any kind of user input — curse words, small talk, idioms, emojis...?
Answering: are its answers context-relevant and accurate enough?
Navigation: is it intuitive enough for you to go through the conversation you're having with your bot?
Personality: does its tone suit your audience and the nature of the ongoing conversation?
Onboarding: is it clear enough to the user what your chatbot's functionality is, from the very start? Is it intuitive enough how he should interact with the bot?
Intelligence: does your chatbot “remember” certain details, key information that the user has provided throughout the conversation?
Error management: how does your chatbot handle errors and exceptions?
5.2. Botanalytics
From usability to conversational flow, to the delivered user experience, this custom service enables you to test every key aspect of your chatbot.
5.3. Dimon
The great thing about this chatbot testing tool is that it integrates seamlessly with major platforms like Telegram, Slack, WeChat, Facebook Messenger.
Use it to detect any issues in your bot's conversational flow, in the user experience that it provides.
6. Automate Your Chatbot Testing
“How can I automate my bot testing process?” is another valid question that might be “haunting” you.
You use a chatbot that'll interact with your own bot. No intervention from your side.
This way, you can run your conversation transcripts... automatically. Your job boils down to 1 key task: evaluating your chatbot's replies.
7. Final Word: It's an Ongoing Testing Process
Whether it's you, your development team or you opt for automated testing, any chatbot testing prior to its release is... beta testing, after all.
Real-life feedback, provided by its users, is the real test.
In other words: be ready to constantly adjust your chatbot to the feedback you get after its release.
Keeping it relevant, future-proofing its current performance calls for an ongoing testing process.
Image by mohamed Hassan from Pixabay
Silviu Serdaru / Oct 23'2019
Everybody agrees: website personalization is... power.
But how do you harness it? And, most of all:
How do you get the most of it?
How do you benefit from incorporating personalization into the customer experience delivered on your own website? Where do you start?
What precisely should you personalize?
What are the most effective ways to deliver relevant, contextual, conveniently tailored visitor experiences?
To lend you a hand, we've narrowed down all the best practices that you could possibly implement to the most effective ones:
1. But First: What Is Website Personalization?
It's the process where you use all the customer data at hand to deliver each visitor on your website an experience perfeclty tailored to his preferences, context, intent, and history, at precisely the right time.
I hope my definition has managed to “squeeze” in all the key aspects of this process.
Personalizing your website is no more than customizing the experiences that you provide there.
It's “baking” all the customer data at hand — browser patterns, 3rd party data, web analytics, sales funnel data — into different experiences for... different users.
2. How Would It Enhance the Visitor Experience on Your Website?
In other words: how would your website visitors benefit from your personalization efforts?
Here are the most powerful benefits:
easy content discovery
an intuitive search experience
relevant recommendations only
fewer decisions for them to make (think “the paradox of choice”)
contextual, perfectly tailored information
What visitors returning to your website expect is a relevant, valuable, and convenient interaction.
Why forcing anyone who's already introduced himself to you to keep telling you his name over and over again?
And website personalization is the way to deliver your customers precisely that type of frictionless, relevant experience.
3. 6 Effective Ways to Create Personalized Website Experiences
For there are, indeed, web personalization best practices to keep in mind.
Too many organizations consider it to be some sort of... magic. An extremely powerful one, that will turn your recurring customers into your brand's advocates.... just like that.
Instead, it's a long series of experiments where you keep adjusting your content and metadata to the user data and user segments that you've set.
Where you keep creating various scenarios until you've created those experiences that fit your customers just like... perfectly tailored suits.
Now, let me help you streamline this tedious process with a simple checklist of steps to take:
3.1. Treat Returning Visitors with a Little Extra Care
Rely on cookies to identify your returning customers, then make sure you deliver them relevant content.
Content, that would guide them further along the sales funnel.
3.2. Create Different Experiences for First-Time and Existing Customers
Attracting new customers is but one side of your key objective.
Engaging your existing customers is the other one...
And these returning customers expect to be treated differently. They expect to get:
personalized customer service for using your products/services (remember to tailor your landing page for both new and existing visitors)
special offers, a signal that you do recognize and value them for being your customers
… and that you want to nourish their loyalty.
3.3. Prioritize Content Differently for... Different Visitors
Take it as a “shortcut” to website personalization:
You do serve the same content to all your visitors, yet you prioritize certain services, products, messages differently.
You deliver each segment of users a different content hierarchy.
3.4. Serve Them Content/Product Recommendations
“You may also like...” type of lists weight heavily on the personalized web experiences that you create.
Quote source: Ryte.com
For this, you need to:
collect and then filter through your valuable customer data
fill in a deep “pool” of content and metadata
use a robust recommendation engine to serve up perfectly tailored recommendations to your returning visitors
In short: engage them with product/content suggestions based on the user behavior data available to explore and to exploit.
3.5. Deliver Experiences Targeted to Different Audience Segments
But first, use all the customer data at hand to define those user segments.
You could segment your audience by:
number of visits on your website within a time-frame
location
user-behavior reflected in their past visits
referrals: have they landed on your website from a partner website or from a Google ad?
Put together all the customer data that you dispose of and extract “gold” information about your audience, like:
content preferences
where they're located on the globe
even custom user information
Then, use the resulting info to set up your audience segments and create website experiences personalized for each segment.
Set what user segment will see which part of your web content — unique offers, personalized messages, special products — and how precisely they'll interact with it.
3.6. Adapt Your Content to the Customer Journey's Phases
And I'm talking here about the phases where you:
raise awareness
educate and engage with your visitors
help them make their decision
So, make sure you don't greet a first-time visitor with a helpful tutorial on how to use the product he's just bought nor a returning visitor with a form he's... already filled in.
See my point?
The END!
Website personalization is a multi-layered process, with your customer data, collected from an ecosystem of different sources, right at its center.
Which of these best practices do you find most effective for your website's specific context and your own business goals?
Image by 3D Animation Production Company from Pixabay
Adriana Cacoveanu / Oct 21'2019