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.

10 Drupal SEO Mistakes You Do Not Want to Make on Your Website: From Least to Most Harmful- Part 2
You've put so much effort into crafting and polishing the content on your Drupal website and it just won't... rank? Why is it that search engines' web crawlers won't index its “juicy” content? Why they won't give your site a big push right to first-position rankings? As it clearly deserves... Could it be because you're making these 10 Drupal SEO mistakes?  Knowingly or just recklessly... And with the first 5 of them already exposed in the first part of this blog post, I'm keeping my promise and here I am now, with 5 more SEO mistakes that you don't want to make on your Drupal website, ranging from:   embarrassing gaffes to faux pas to catastrophes...   1. Underrating Meta Tags: One of (Too) Common, Yet Costly Drupal SEO Mistakes  And let me just say it: forgetting (or choosing not to) to check those 3 on-page ranking factors:   description page title tags   ... is one rookie SEO mistake.  And one costly neglect, too... Why? Because by simply checking your meta tags, making sure that the content entered there:   contains all the relevant keywords is user-friendly and engaging   you hit 2 birds with just one stone:   search engines' crawlers will just know whether specific web pages on your site are relevant for specific search queries or not; whether the keywords that you will have added to your meta elements are precisely those that online visitors use users will get a “teaser” of what the page is about, helping them decide whether it matches their searches and expectations or not   Note: Drupal's got your back with a dedicated Metatag module that you should install even before you “release your website out into the wild".   2. Ignoring the Slow Page Loading Speed  If it takes more than 2 seconds to load... then you'll lose them. Visitors on your Drupal site will lose all interest in accessing that given page. And could you blame them?  Instead, you'd better:   blame yourself for accepting this status quo and refusing (or just postponing or not putting enough effort into it) to optimize your site for high speed rush to address this major UX issue risking to grow into a critical SEO issue   How? By:   compressing all JS and CSS files using a dedicated tool of your choice (and thank God there are plenty of those to choose from!) compressing all overly large pages reducing images, graphics, and videos to reasonable sizes disabling all those Drupal modules that you haven't used in ages (or maybe never...) enabling caching (and luckily there are Drupal cache modules — like Memcache, for instance — that can help you with that) upgrading your server or even moving to a new hosting company optimizing your site's current theme See? Improving your Drupal site's load time is no rocket science and it doesn't require overly complex measures, either. They're no more than... “common sense” techniques. Assess the resources that implementing them would require and... just do it:   the user experience on your Drupal website will improve significantly search engines will “detect” this increase in user satisfaction … which will translate into a higher ranking    3. Overlooking to Redirect From Its HTTP to Its Secure HTTPs Version Migrating your Drupal site to HTTPS is a must these days. Just face it and deal with it or... be ready to face the consequences! Yet, if you overlook to redirect your site to its new HTTPS version, thus sending its visitors out to... nowhere — to error pages — then... it's all but wasted effort and resources. One of those SEO Drupal mistakes with long-term consequences on your website's ranking.   4. Broken Internal Images Leaving broken internal images and missing ALT attributes behind is a clear sign of SEO sloppiness... And now, here's what we would call a “broken image”:   an image that has an invalid file path an image with a misspelled URL   The result(s)?   first, a broken image has an impact on the overall user experience; your site visitor gets discouraged and quits the page in question next, search engines rate your site's content as “of poor quality” and finally, all these lead to an inevitable drop in Google search rankings   5. Underestimating (or Just Ignoring) the Importance of an XML Sitemap for SEO Not generating an XML sitemap of your Drupal site is more than just one of those Drupal SEO mistakes that you should avoid: it's a missed opportunity! A huge one! Here's why:   an XML sitemap would include all the URLs on your website … as well as information (via heading tags) about your site's infrastructure of web pages, for search engine crawlers to use … “alerts” about which pages they should be indexing first an XML sitemap provides an early index of your website all the pages on your website get submitted to the search engine database even before they get indexed in their own database   Note: the sitemap.xml file not only that communicates with and informs search engines about the current content ecosystem on your Drupal site, but will “keep them posted” on any updates of your site's content, as well. So, what an XML sitemap provides is a prioritized, conveniently detailed and easily crawlable map of your Drupal website meant to ease web crawlers' indexing job. And the easier it gets for them to crawl through your site's content, the faster your site's indexing process will be. In short: if the robots.txt file alerts search engines about those pages that they shouldn't crawl into, the sitemap.xml file lets them know what pages they should index first! Tip: discouraged by the thought of manually building your site's sitemap? Well, why should you, when there are Drupal modules built especially for this?   Site map (Drupal 7)       Sitemap (Drupal 8)         Simple XML (Drupal 8)     XML Sitemap     From taxonomy terms, menu links, nodes, useful entities, to custom links, these modules will automatically generate all the entities that you'd need to include in a detailed sitemap of your Drupal site. The END!  Just face it now: you'll inevitably continue to make gaffes influencing your site's SEO, no matter how many precautions you might take... Yet, these10 Drupal SEO mistakes here, ranked from least to most damaging, are the ones that you should strive to avoid at all costs... ... Read more
Adriana Cacoveanu / Aug 27'2018
10 Drupal SEO Mistakes You Do Not Want to Make on Your Website: From Least to Most Harmful- Part 1
You have made, are currently making and will continue to make various Drupal SEO mistakes. From those easy to overlook gaffes to (truly) dumb neglects, to critical mistakes severely impacting your site's ranking...  Just face it and... fix it!  And what better way of becoming aware of their impact on your site than by... getting them exposed, right? By bringing them into the spotlight... Therefore, here are the 10 SEO mistakes you really don't want to make on your website: the “culprits” for your site's poor ranking. Take note of them, assess their occurrence/risks for your Drupal site's SEO and strive to avoid them:   1. Overlooking or Misusing Header Tags Do it for the crawlers or do it for your site visitors. For whichever reason you decide to structure the content on your web pages using H1, H2, H3 tags, Google will take note of your efforts... And it all comes down to setting up an SEO-valuable hierarchy on each page on your Drupal site. One that:   crawlers will painlessly scan through, which translates your website getting indexed more quickly users will find conveniently “readable”, which bubbles up to the overall user experience   Note: one of the worst SEO gaffes that you could make —  one that would confuse the crawlers and intrigue the site users — would be to use multiple H1 tags on the very same page.  It's one of those silly, yet harmful rookie Drupal SEO mistakes that you don't want to make!   2. Duplicate Content: It's Literally Killing Your SEO Now, speaking of running the risk to confuse the crawlers in your Drupal site, duplicate content makes the "ultimate source of confusion” for search engines. And how does this show on your site's SEO?  Basically, since the crawler can't identify the right page to show for a specific query, it either:   "refuses" to rank any of them or applies specific algorithms to recognize the "suitable" page for that search query   Needless to add that the second decision is discouragingly time-consuming, while the first is simply... disastrous for your site's ranking. "But how did I end up with duplicate content on my website in the first place?" you might ask yourself. Here are 3 of the most common causes:   HTTP vs HTTPS  URL variants WWW and non-www pages   Now, since an identified and acknowledged mistake is already a half-solved one, here's how you can get it fixed:   just set up a 301 redirect from that web page's primary URL to the new one set up a rel=canonical attribute on the old URL, one that would let search engines know that they should handle the new URL as a duplicate of the original one   Note: It goes without saying that all metric records and all the links that search engines will have monitored on these two duplicate pages will then be automatically attributed to the original URL.   3. Optimizing for the Wrong Keywords And this sure is one of the most frequent Drupal SEO mistakes, that goes back to: Not investing enough resources (of time mostly) in a proper keyword research strategy. And no, trying to rank for the prime keywords isn't a foolproof action plan! The result(s)?   you end up targeting all the wrong keywords you optimize your site's content for all the wrong terms, that your target audience isn't actually searching for   Wasted efforts for putting together non-targeted (or not properly targeted) content... Instead, invest time in identifying and then ranking for the right search terms. For yes, it will take longer to carry out a proper keyword process and for your site to start ranking for those keywords. But it won't be wasted time...   4. Having Pages with Duplicate Title Tags on Your Drupal Site Here's another way of confusing crawlers even more: Faced with two separate web pages having the same <title> tags, search engines won't know which one of them stands for a specific search query. And their confusion only risks to lead to your Drupal site's getting banned... Moreover, it's not just search engines that will get discouraged by the duplicate titles, but site visitors, too. They won't know which is the “right” page to access. “OK, but how can I get it fixed?”   you install and turn the Metatag module on you craft and give each page on your Drupal site a unique title    5. Ignoring Robots.txt: One of the Common Drupal SEO Mistakes Now, before answering your otherwise valid question: “Why do I even need Robots.txt file on my Drupal website?” … we'd better see what this protocol brings, right? Take it as a standard that websites use to communicate with crawlers and web robots “in charge” with indexing their content. It's this file that points out what web pages should be crawled and indexed and which ones should be skipped. Now, if it's a blog that you own, ignoring this protocol isn't one of the biggest Drupal SEO mistakes that you could do. But if it's a larger Drupal site, with a heavy infrastructure of web pages, that you're trying to optimize, then having Robots.txt file makes all the difference... Tip: do consider installing the Robots.txt module for streamlining the efforts of making your site “crawling-friendly”. END of Part 1! Stay tuned for I'll be back with 5 more Drupal SEO mistakes — ranking from seemingly harmless to critical — that you definitely don't want to make on your website. ... Read more
Adriana Cacoveanu / Aug 24'2018
What Are Some Good Ways to Write Secure Drupal Code? Most Common Vulnerabilities and Secure Coding Practices
With the Drupalgeddon2 "trauma" still “haunting” us all — both Drupal developers and Drupal end-users — we've convinced ourselves that prevention is, indeed, (way) better than recovery. And, after we've put together, here on this blog, a basic security checklist for Drupal websites and revealed to you the 10 post-hack “emergency” steps to take, we've decided to dig a bit deeper. To answer a legitimate question: “What are some good ways to write secure Drupal code?” For, in vain you:   build a “shield” of the best Drupal security modules and plugins around your website enforce a rigid workplace security policy    … if you leave its code vulnerable to various types of cyber attacks, right? But how do I know how unsecured code looks like, to begin with? What are the site configuration gotchas that I should pay attention to? What are the most common vulnerabilities that I risk exposing my Drupal site to? And how can I test it for security issues that might be lurking in its code? But most of all: What top secure coding practices should I and my Drupal development team follow? Now, let's get you some answers:   1. SQL Injection Vulnerabilities: How You Can Fix & Prevent Them  SQL injections sure make one of the most “banal”, nonetheless dreadful types of attacks. Once such vulnerabilities are exploited, the attacker gets access to sensitive data on your Drupal site.   1.1. Prevent SQL Injection Attacks Using The Database Abstraction Layer In other words: the proper use of a database layer makes the best shield against any SQL injection exploit attempts. Now, let's talk... code. For instance, linking together data right into the SQL queries does not stand for a secure coding practice: db_query('SELECT foo FROM {table} t WHERE = '. $_GET['user']); In this case here, this is how you write secure Drupal code: db_query("SELECT foo FROM {table} t WHERE = :name", [':name' => $_GET['user']]); Notice the usage of the proper argument substitution with db_query. The database abstraction layer uses a whole range of named placeholders and works on top of the PHP PDO. Now, as for a scenario requesting a variable number of arguments, you can use either db_select() or an array of arguments: $users = ['joe', 'poe', $_GET['user']]; db_query("SELECT t.s FROM {table} t WHERE t.field IN (:users)", [':users' => $users]); $users = ['joe', 'poe', $_GET['user']]; $result = db_select('table', 't') ->fields('t', ['s']) ->condition('t.field', $users, 'IN') ->execute(); 1.2. Have You Detected an SQL Injection Vulnerability? Here's How You Can Fix It There are some key Drupal security best practices to follow for addressing SQL injection issues:   always stick to the well-known Drupal database API always filter the parameters that you get (be twice as vigilant and cautious about those who can type anything on your Drupal site) always use placeholders: db_query with :placeholder always check the queries in the code: db_like()   Tip: remember to follow these coding practices for addressing and preventing SQL injections on your contrib modules, as well.   2. How to Protect Your Drupal Site Against Cross-Site Scripting (XSS) Attacks We could easily say that XSS attacks “rival” SQL injection attacks in “popularity”: Drupal's highly vulnerable to cross-site scripting. All it takes is some wrong settings — input, comment, full HTML — as you configure your website, to make it vulnerable to this type of attacks: They make a convenient gateway into your website for remote attackers to use to inject HTML or arbitrary web.   2.1. Check Functions to Rely on for Sanitizing the User Input (in Drupal 7) Securing your Drupal 7 site against cross-site scripting attacks always starts with: Identifying the very “source” of that submitted data/text. Now, if the “culprit” is a user-submitted piece of content, depending on its type you have several check functions at hand to use for sanitizing it:   check_url check_plain (for plain text) filter_xss (when dealing with pure HTML) filter_xss_admin (if it's an admin user that entered the “trouble-making” text) check_markup   Note: always remember never to enter the user input as-is into HTML! Tip: a good way to write secure Drupal code is to use t() with % or @ placeholders for putting together translatable, safe strings.   2.3. Cross-Site Scripting In Drupal 8: Twig & 3 Useful Sanitization Methods In Drupal 8, handling cross-site scripting attacks gets significantly easier. Here's why:   you have TWIG, with its autoescaping and “sanitize all” HTML mechanism!!! no SQL queries no access to Drupal APIs   Now, besides Twig, you have 3 more sanitizing methods at hand for fixing cross-site scripting issues in Drupal 8:   HTML: :escape(), for plain text Xss: :filterAdmin(), for admin-submitted content Xss: :filter(), where HTML can be used   2.4. Testing Your Code Against XSS In order to check whether certain user inputs are vulnerable, all you need to do is:   take the “suspicious” user input as a field, as an input HTML enter them both (or just one of them) in your test   Note: feel free to user Behat or another framework of choice to automate the whole process. 2 clear signs that you've detected an XSS vulnerability are:   you get this pop up alert: <script>altert ('xss') </script> or this error message close to the IMG tag: img src="a" onerror="alert ('title')"   3. Use Twig Templates: They Sanitize All Output...  Automatically  Did you know that a lot of the Drupal security issues on your website occur precisely because you've skipped sanitizing the user-submitted content before displaying it? And someone's neglect quickly turns into another one's opportunity... By skipping to clean up that text beforehand, you lend the attacker a “helping hand” with exploiting your own Drupal site. Now, getting back to why using Twig templates is one of the best ways to write secure Drupal code:   they sanitize the user input and output (all HTML, basically) by default; you can write your custom code without worrying about it risking to break up your website you won't run the risk of having safe markup escaped In short: securing your Drupal 8 website is also about having all HTML outputted from Twig templates.   4. How to Write Secure Drupal Code for Finding & Fixing Access Bypass Issues One of Drupal's strongest “selling points” is precisely its granular permission system. Its whole infrastructure of user roles with different levels of permissions assigned to them. Furthermore, there are all kinds of access controls that you can “juggle with”:   Node access system field access Views access control Entity access   In short: you're free to empower users to access different sections/carry out different operations on your Drupal site.   4.1. How You Can Check for Access Bypass Issues How do you know whether there are access bypass flaws on your website, that could be easily exploited? It's easy:   you simply visit some nid/node and other URL on your site  and just run your Behat automated tests   4.2. And How You Can Fix the Identified Access Bypass Issues Do keep in mind that there are quite a few access callbacks to consider:   entity_access user_access for  permissions Squery – addTag ('node_access') Menu definitions (make sure you set those correctly) node_access All you need to do is write automated tests to address any detected problems related to access bypass.   5. 3 Ways Deal With Cross-Site Request Forgery (CSRF) in Drupal  What does it take to write secure Drupal code?  Writing it... strategically, so that it should prevent any possible cross-site request forgery attack... Now, here are 3 ways to safeguard it from such exploits:   sending and properly validating the token using Form API using the built-in csrf_token in Drupal 8   In conclusion: a trio of good practices keeps the CSRF attacks away...   6. 7 Best Contrib Security Modules to Back Up Your Coding With Now, after we've gone through some of the best ways to write secure Drupal code, let's see which are the most reliable contrib security modules to strengthen your site's shield with:   Hacked!       Permission report   Encrypt       Composer Security Checker         Security Review           Paranoia       Text Formats Report   The END! This is how your solid Drupal security “battle plan” could look like. It includes:   some of the most frequent types of attacks and security issues to pay attention to most effective preventive measures vulnerability detecting methods post-attack emergency actions and sanitization mechanisms   What ways to write secure Drupal code would you have added or removed from this list? ... Read more
RADU SIMILEANU / Aug 24'2018
Drupal Project Management: Specific Challenges and Approaches
Let me guess: you're a Drupal developer (temporarily) turned into a... Drupal project manager! Or maybe a PM new to Drupal, facing the challenge of your first Drupal project management assignment? Have I guessed it? Now the questions roaming in your head right now must be:   What Drupal project-specific challenges should I expect? How should I address them? How should I approach the Drupal developers, site builders and themers involved? What questions should I ask them at each phase of the project? And which are the stages of a Drupal project management process more precisely? How do I collect accurate and explicit requirements for my Drupal project?   “Spoiler alert”: managing a Drupal project the right way isn't so much about using the right project management modules and “heavy-lifting” tools. It's about:   understanding the specific challenges that Drupal projects pose understanding the specific phases of the process empowering the people in your team to capitalize on their Drupal expertise within the given time frames and according to your client's objectives   Now, here's an insight into the process of managing a Drupal project. One shaped as a list of predictable challenges and their most suitable solutions:   1. Proper Planning: Get The Whole Team Involved In other words: defining objectives and setting up a final time frame with the client without getting your team, too, involved in the process is like: Throwing spaghetti at a wall and hoping that it would just... stick somehow. They're the Drupal experts, you know... Therefore, getting the Drupal developers, themers and site builders engaged at this stage of the project is no more than... common sense. They're the (only) ones able to:   give you an accurate time estimate for developing and implementing each functionality/feature tell if certain of the requested features can't be delivered identify interdependencies and conditions provide you vital information about the Drupal-specific architecture and the project-specific development process … information on what components to take, whether new contrib modules need to be developed to support certain functionalities etc.   Get your Drupal team involved in the planning and preparation process and strike a balance between their valuable input, the client's objectives, and time frames.   2. Tempted to... Micromanage? Empower Your Team Instead Yet, resisting temptation won't be easy. Especially if you're a former Drupal developer now turned into a Drupal project manager. You'd just die to get your hands dirty with code, wouldn't you? To supervise, closely, how every single line of code is being written. Refrain yourself from that... Instead, do keep your focus on the bigger picture! And, moreover, empower each member of your team to... shine. To excel at what he/she's doing.  That instead of obsessing over details, getting everyone on their nerves and making them doubt their own skills: By focusing on each one of the small steering wheels, you'd just lose sight of the larger mechanism that's a Drupal project.   3. To Tell or Not to Tell: Do Encourage Your Team Members to... Tell Hiding the dirt under the carpet, from the stakeholders' eyes/ears and having members of your team remain silent over certain bottlenecks in the project will only act as 2 “Trojan horses”. They'll lead your Drupal project to... failure. Instead:   dare be honest with the client and inform him/her if you run the risk of a delay  encourage your team to be open with you and with their teammates when they hit sudden challenges, unexpected issues   By:   hiding ignoring “genuinely” underrating   ... issues detected in the development process — instead of getting them “exposed” and dealt with —  you're only sabotaging the Drupal project. And now speaking of encouraging good communication within your team, how about creating a dedicated open forum for them to use? This could be the “place” where they'd share any issues that they will have detected in the project. Or challenges that they face and can't address by themselves.   4. Juggling with Resources, Timeline, and Unforeseen Events I'm not going to lie to you about this one: keeping the balance between staying flexible and being capable to assess risks is not going to be easy... Unplanned issues will strike, new requirements will come to “jeopardize” this balance, unexpected changes will need to be accommodated under the same time frame... Should you keep yourself rigid and inflexible to all changes, sticking to the initial plan? Or should you “assimilate” all the incoming requirements and additions to scope with the risk of a project delay? And that of overburdening your team with unscheduled tasks... Can't help you with a universal answer here, one that would apply to all Drupal project management scenarios. It's you, together with your Drupal team, who should be able to estimate:   the changes' level of complexity the project delay (if it's the case) the chances for these additional tweaks to turn into contractual changes   5. Drupal Project Management Is 90% Good Time Management And it all comes down to: Breaking your Drupal project down into small, manageable tasks.  Tasks that can be easily turned into goals and objectives:   daily objectives weekly objectives and so on...   Efficient Drupal project management, even if we're talking about truly complex ones, is all about making it... manageable. About ensuring that the lists of tasks are logically structured and (most of all) time framed! Needless to add that this strategy acts as a motivation-booster for your team:  Just think about it: with every ticked off task, each team member can visualize the project's progress in... real-time. A progress that he/she, too, will have contributed to. The END! These are the Drupal project-specific challenges that any project manager dealing with this CMS faces, accompanied by their life (reputation)-saving solutions.   ... Read more
Adriana Cacoveanu / Aug 21'2018
Bringing Gutenberg to Drupal: A Modern Admin UI, a Better Editing Experience in Drupal 8
It's a robust, flexible and admin feature-packed CMS, there's no point in denying it. And yet: Drupal (still) lacks a modern UI that would make building rich web content —  such as landing pages — a breeze. But there is hope: the Gutenberg editor has been ported over, promising a better editing experience in Drupal 8. The team behind this daring project? Frontkom, a Norwegian digital services agency that:   refused to just sit and wait (for a year or two) for the in-progress initiative of modernizing Drupal's admin UI to grow into a core solution decided to capitalize on their experience in working with the Gutenberg page builder  … and on this content editor's open source nature, too … to bring it over to Drupal 8   Now, if you're determined to improve the editorial UX on your Drupal site, to “spoil” your editors with a modern, intuitive and flexible admin UI, keep on reading...   1. The Drupal Gutenberg Project: Aiming for a Modern Admin UI in Drupal 8 And by “modern” I do mean the opposite of the Panels & Paragraphs & Layout combo solutions currently available for editing text in Drupal. Solutions that only manage to make the entire workflow... discouragingly complex. Especially if it's rich web content that editors need to create via the Drupal admin UI. And this is precisely the context where the Drupal Gutenberg project was born: Drupal desperately needed/needs a modern, JavaScript-based admin UI. With WordPress 5 users already enjoying this fancy content editor and the Frontkom team's having gained experience in using it, the idea of porting it to Drupal started to form: "Why wouldn't we make it possible for Drupal users, too, to benefit from this content editor?"  And here are some of the original Gutenberg project's features that lead them into thinking that, once ported, the editor would significantly improve the editing experience in Drupal 8:   it's (highly) decoupled it's open-source it's React.js-based  it provides a simplified, smooth and cool functionality-packed admin UI it's Medium and Squarespace's inspired it turns the creation of complex landing pages into a breeze   Page editing in Drupal 8 wasn't going to be the same again! Their initiative turned into a Drupal 8 module —  Gutenberg Editor —  currently still an experimental one.  Curious enough? The first step to satisfy your curiosity is to take a look at their live demo: an interactive glimpse into the Gutenberg text editor implemented in Drupal 8.   2. The New Gutenberg for Drupal: Top Features Improving the Editing Experience in Drupal 8   2.1. All the Page Elements Are... Content Blocks That's right, the team behind this project capitalized on the “everything is a block” Drupal 8 concept when adapting the Gutenberg UI to Drupal. The result? Both the Drupal core blocks and 20+ Gutenberg blocks are available in the resulting admin UI. Basically, a Drupal 8 editor can insert into the web page that he/she's creating any of the core Drupal blocks and of the Gutenberg blocks of choice. Speaking of which, let me point out just a few:   Heading Image gallery Auto embedded social posts Buttons Custom Drupal blocks Layout blocks   Needless to add that you're free to enrich this list with your own custom blocks, too.   2.2. Easy Switch from Visual to Code Editor That's right, the Gutenberg UI enables you/your editors to quickly switch to code editor —  opening up a neat markup —  and to apply any needed tweaks on the output.   2.3. Positioning Content Is Straightforwardly Intuitive Editors get to select precisely where they want to position different types of content on a page. And the very same results that they generate while in the Gutenberg admin UI get instantly reflected on the live web page, as well. And there's more! More great admin features improving editing experience in Drupal. For instance: Full control over font sizes and colors; tweaking them becomes a breeze with the new editor.   2.4. There's a Blocks Search Box And not only that:   using this search box you can track down precisely those content blocks that you need to add to your page but you can access them inline, as well, using “/”.   2.5. Full Control of the Layout Another great thing about the content blocks available in the Gutenberg UI is that: they can have child blocks, too! This way, it'll get unexpectedly easy for your editors to split their used blocks into columns on a grid.   2.6. Auto Embedded Social Posts/Videos And all it takes is pasting their URL.   The Story of a Real Challenge: Making Gutenberg CMS-Agnostic Open source, but not fully CMS-agnostic...  The team behind the Drupal Gutenberg project had to come up with a suitable solution for this challenge. And they did come up with a multi-step solution to make the fancy text editor work in Drupal 8, as well:   first, they created a fork and removed the WordPress specific features they used the Gutenberg editor as a dependency  next, they set up a standalone NPM package then they built the Gutenberg Editor module   In short: a fork of the initial Gutenberg project is still maintained while being used as a dependency of the new Drupal 8 module. Therefore, each time Gutenberg gets an update, the corresponding Drupal module, too, gets a new release. Now, digging deeper into the project's architectural design, we discover 2 elements that the team had to re-write for Drupal:   the URL defining the editor routes (edit page route, new page route, preview page route) the API-request, now configured to “talk to” Drupal (instead of the WordPress API)   How does the new module work?   as a text editor, which can be easily enabled for each content type all it takes is a long text field for it to work: it replaces the node edit UI for that specific content type   Note: the Frontkom team also “promises” us to re-use many of the Drupal-specific stylings for the editor's UI elements in order to add a familiar Drupal feeling to it.   What Next? What's The Project Roadmap Ok, so what we know for sure now, regarding this ambitious initiative turned into a Drupal module is that:   the Drupal Gutenberg module is downloadable, yet still experimental (for developer use only) the team's still working on the project, implementing new features and functionalities aimed at making it feel more... Drupal native the final version will be presented to the eager/intrigued/curious/skeptical Drupal users and developers in the coming months   The END! Can't hide that I'm more than curious what you think about this contrib solution for improving the editing experience in Drupal 8:   Are you looking forward to using it, hoping that this editor would make up for the inconvenience of working with Drupal's current admin UI? Are you skeptical about the perspective of being tied up to a WordPress page builder?   ... Read more
Adriana Cacoveanu / Aug 17'2018
How to Get Gatsby to Work with Drupal: Building a Gatsby Site with a Decoupled Drupal Back-End
Just imagine: putting together the powerful UI creation tools of a static site generator — more of a modern front-end framework rather —  built for high speed, like Gatsby.js, with Drupal 8's content modeling and access system! Putting their powers together into a blazing-fast website! But how to get Gatsby to work with Drupal? How do you build a plugin that fetches data from API-first Drupal? In short: a static, conveniently simple, yet robust Gatsby site powered by a powerful, decoupled Drupal back-end? You've got the questions, we've got the answers... And we've grouped all our answers to your questions regarding “API-first and decoupled Drupal in connection with Gatsby” in a straightforward 4-step tutorial. One on building a high-speed Gatsby website backed by a versatile headless Drupal CMS. Shall we dig in?   1. But What Is Gatsby.js More Precisely? The standard, rather rigid definition would be: “It is a GraphQL-fueled, React-based static site generator.” Now if the words “static site generator” just make you... cringe, here's a more nuanced definition for you: “Gatsby's more of a modern front-end framework —  one pulling together the best parts of GraphQL, React, webpack, react-router — built with the developer experience in mind.” In short: it's a static site that this “more than just a static site generator” helps you build, leveraging its out-of-the-box front-end tools. A website geared to reach fast page loads while pulling data from a decoupled Drupal CMS. And there are 2 basic steps for getting started with Gatsby. You simply write your site's code structure and let Gatsby handle the rest:   turn it into a directory with a single HTML file … along with all your static assets 2. 3 Reasons Why You'd Want to Use Gatsby … instead of Jekyll, your webpack config or create-react-app.   a. Because of the richness of the Gatsby ecosystem With rich documentation at hand and backed by an already large community of starters, you'll get your Gatsby site up and running in no time.   b. Because it leverages GraphQL' power to build its data layer. And this is one of those heavy-weighting reasons for using Gatsby over other competing alternatives: Gatbsy's built to fetch data from... pretty much anywhere — your CMS of choice, Markdown, third-party APIs, Markdown — using “source” plugins. When creating its data layer, it relies on GraphQL, which builds an internal server of all this pulled data. In short: when questioning yourself “how to get Gatsby to work with Drupal”, do keep in mind that in your future Gatsby & decoupled Drupal setup data gets queried from the same place, in the same way, via GraphQL.   c. Because it's built for high speed. And this is one of Gatsby's hardest-to-resist-to advantage: It's just... fast. And that gets reflected in your final Gatsby & decoupled Drupal site while bubbling up to the user experience, as well. Summing up, these are the 3 strongest reasons why you would be tempted to use Gatsby with Drupal CMS.  I'm not going to engage in dynamic sites vs static sites debate now. The internet's already overcrowded with such comparisons. I'll just end this “pledge” on using Gatsby with a non-debatable statement: Since a static site generator pre-generates the pages of your website, scales of performance vs maintenance costs gets unbalanced. And guess which one's going up and which one down!   3. And Why Would Pair Gatsby with Drupal? If there are strong reasons why you should be getting started with Gatsby, why is there any need to consider decoupled Drupal CMS for its back-end? Because static site generators don't “care” much for the authoring experience. Content editors have to get themselves tangled up in Markdown for creating content. True story! And this is where powerful CMSs, such as Drupal, step in, “luring” you with their: WYSIWYG editors content types  content modeling capabilities access workflow capabilities … to make your content team's lives easier! And now your “How to get Gatsby to work with Drupal” dilemma turns into a new legitimate one: How to make your Gatsby website cope with a decoupled Drupal setup without adding the “dread” of a database and web server to the equation? 2 elements that “pave the path” for performance and security issues... Well, this is precisely what this “decoupling Drupal with Gatsby scenario means to avoid: you'll get to host your Drupal CMS in-house … and thus take full advantage of the robustness and versatility of a decoupled Drupal CMS back-end your Gatsby website will fetch data from its Drupal back-end and generate content “the static way” (which translates into “incredibility fast page loads”)   4. How to Get Gatsby to Work with Drupal More Precisely Or simply put: how to pull data/content from Drupal into your Gatsby website? Here's a straightforward tutorial in 4 steps on how to integrate Drupal with Gatsby:   4.1. First, Build Your Drupal Server  Assuming that you have a Drupal 8 website installed, the very first step to take is to:   a. Create a new content type  For this exercise, it's a blog — including all its blog posts — that we'll try to transfer from Drupal to Gatsby. So, we'll name our content type: “Blog”. It will include 3 basic fields: title body image Just navigate to Home>Administration>Structure>Content Types.   b. Turn Drupal into an API Server  And there are 2 key modules that you'll need to install:   jsonapi_extras: for gaining more control over the API (to disable resources, to change the default endpoint, to enhance field output etc.)  jsonapi, which will turn your Drupal website into an API server (one having a default endpoint)   c. Grant Anonymous User Permission to Access the JSON API resource list If you overlook this step, you'll end up with an “Error 406” message, which will just sabotage your whole “decoupling Drupal with Gatsby” mission.   d. Check How Your Drupal API Server Works  You can do this by navigating to http://[your-site]/jsonapi logged in as an Anonymous user. If the page that you'll get displays all the information regarding your API server, then you'll know you're on the right track.   4.2. Then, Create a New Gatsby Site But before you jump to building your new static website, check whether you have npm and node installed on your PC.  How? By entering “npm  -v” and “node  -v” into your terminal. Next, you'll need to install Gatsby's CLI:   npm install --global gatsby-cli Then, just build and get your Gatsby site up and running. Note: by default, it will be accessible at localhost:8000. 4.3. Decouple Drupal with Gatsby: Pulling Data from the API Server   a. Set up the (/blog) page Solving your “How to get Gatsby to work with Drupal”  type of dilemma starts with... the creation of a new page on your Gatsby website. And is as simple as... setting up a new JS file. Note: all your Gatsby pages will get stored under /src/pages. Now here are the basic steps to take:   create the blog.js in /src/pages then add this code: import React from "react" const BlogPage = () => ( <div> <h1>Latest from our bog</h1> </div> ) export default BlogPage    Voila! You've just created a new page at /blog.   b. Pull Content from the Drupal 8 site using GraphQL The “gatsby-source-drupal” plugin, to be more specific. It's this source plugin that will be “in charge” with all the data (images here included) pulling from decoupled Drupal back-end and pushing into your Gatsby site. Note: do keep in mind that, in this case, the JSON API module plays a crucial role. And here's how you install your “power” plugin:   // in your blog.gatsby folder npm install --save gatsby-source-drupal Next, just configure your newly installed plugin:   // In gatsby-config.js plugins: [ ... { resolve: 'gatsby-source-drupal', options: { baseUrl: ' apiBase: 'jsonapi', // endpoint of Drupal server }, } ], Tada! Now your site should be functioning properly. If... not quite, here are the causes of the 2 most common error messages that you could get:   “405 error”, check whether the jsonapi_extras module is enabled “ 406 error”, have a closer look at the permission on your Drupal site   c. Configure GraphQL to Pull Specific Pieces of Content from Drupal In other words: to query all the “blog” nodes from Drupal and request specific data from the API server. Another strong reason for using Drupal CMS with Gatsby is that the latter provides an in-browser tool for testing GraphQL queries names, for writing and validating them. You can access it at localhost:[port]/___graphql, whereas in our particular case here at: localhost:8000/___graphql. Now, as you're solving this “How to get Gatsby to work with Drupal” type of puzzle, just try to query all the blog nodes. Next, navigate back to your blog.js file and run this query:   export const query = graphql` query allNodeBlog { allNodeBlog { edges { node { id title body { value format processed summary } } } } } ` Then, update your const BlogPage so that it should display the body, content, and title: const BlogPage = ({data}) => ( <div> <h1>Latest from our blog</h1> {{ node }) => ( <div> <h3>{ node.title }</h3> <div dangerouslySetInnerHTML={{ __html: node.body.value }} /> </div> ))} </div> ) Next, save your file and... “jump for joy” at the sight of the result: All your blog posts, nicely displayed, pulled from Drupal and published on your Gatsby site!   4.4. Finally, Just Go Ahead and Publish Your New Gatsby Site And here you are now, ready to carry out the last task of your “How to get Gatsby to work with Drupal” kind of “mission”.  This final task is no more than a command that will get your Gatsby website running: gatsby build Next, just run through your /public folder to see the “fruits of your work”. At this point, all there's left for you to do is to copy/push content in /public to the server and... deploy your new website using Gatsby with Drupal CMS. The END! This is how you do it: how you use Gatsby.js in a decoupled Drupal setup so you can benefit both from: a modern static site generator's robustness and high performance, built with developer experience in mind  a powerful CMS's content managing capabilities, built with the editorial experience in mind  ... Read more
RADU SIMILEANU / Aug 13'2018
10 Essential Modules to Start Building Your Drupal Site from Scratch: Toolkit Must-Haves
So, you've installed your version of Drupal and you're now ready to actually start building your website. What essential tools should you keep close at hand, as a site builder? Which are those both flexible and powerful must-have modules to start building your Drupal site from scratch? The ones guaranteeing you a website that:   integrates easily with all the most popular third-party services and apps is interactive and visually-appealing, irrespective of the user's device is a safe place for users to hang on, interact with, shop on, network on... is conveniently easy for content managers and admins to handle   Luckily, there are plenty of modules, themes and plugins to overload your toolbox with: Long gone are the code-centric webmaster's “glory days”! Nowadays, as a Drupal site builder, you have a whole array of tools at your disposal to just start building and getting a Drupal site up and running in no time. Sometimes without the need to write a single line of code! But, let's not beat around the bush any longer and have a close look at these 10 essential modules that you'll need for your “Drupal 8 site building” project:   1. Password Policy Definitely a must-have module: Just consider that Drupal accepts ANY user password, be it a... one-letter password! So, in order to set up your own stricter and safer password policy, you need to install this module here. Then, you can easily define:   the minimal (and maximal) no. of characters that any user password on your Drupal site should include the no. of special characters that it has to include specific restrictions Like: "one can't use his/her email address as his/her password"   2. Comment Notify Why should this module, too, be in your essential toolkit of modules to start building your Drupal site with? Because it implements the functionality to get notified — you, the admin or content manager —  as soon as a user posts a comment on the website. Note: you can get “alerts” about both the logged in and the anonymous visitors' comments.   3. Breakpoints, One of the Must-Have Modules to Start Building Your Drupal Site  It goes without saying that one of the Drupal site building best practices is providing it with a responsive web design. And this is precisely what this module here facilitates: Setting the proper media queries, once you've defined your own breakpoints.   4. Simple Hierarchical Select             A module whose functionality bubbles up to the content manager's experience. Whenever he/she will have to make a selection involving both categories and subcategories, this hierarchical type of selection will prove to be more than useful: Practically, once you/they select the “main” option, a new drop-down menu/widget including the subcategories to select from, pops up, as well. Like in the image here below: 5. EU Cookie Compliance And complying with this EU notification is mandatory.  So, this is why EU Cookie Compliance is another one of the essential modules to start building your Drupal site with: It displays the given notification — providing visitors with the option to agree or/and to read more information about your cookie policy —  in the footer of your website.   6. Shield               Any Drupal site building guide would advise you to install a module that shields your website from anonymous users and search engines when running your test environments. And this is what Shield is built for: To screen your site from the rest of the world —  except for you and the logged in users — when you deploy it in a test environment. A more than convenient method, as compared to manually setting up a .htpasswd and then integrating it with .htaccess.   7. Beauty Tips     If you're not just another Drupal site builder, but a user experience-centric one, you must consider also those modules to build your Drupal site with that boost the level of user interactivity. Like Beauty Tips here. It displays balloon-help style tooltips whenever a user hovers over a certain text or page element on your website. Pretty much like Bootstrap tooltip does.   8. Secure Login           Another one of the Drupal site building best practices is to turn it into a safe place for your users to be.  In short: to protect their privacy. And if you're building a website that's available on both HTTP and HTTPS, the Secure Login module comes in handy as it makes sure that:   the user login form all the other fill-in forms that you'll configure for extra security   … get submitted via HTTPS. It locks them down, enforcing secure authenticated session cookies, so that user passwords and other critical user data don't get exposed all over the internet.   9. Menu Target   It's another one of those essential modules to start building your Drupal site with if you're determined to provide the best user experience there. What does it do? It enables particular visitors on your site — those granted permission to edit and to add new menu items — to choose whether they open menu items in new windows or in the current ones.   10. Persistent Login A module that makes up for the “Remember me” feature that's missing from the user login screen in Drupal: It comes to implement this missing option, one independent from the PHP session settings. So, we're not talking about the conventional, too long “PHP session time” here, but about a more secure and user-friendly “Remember me” feature added to the login form. Furthermore, the module enables you to define some extra security policies, too:   the no. of persistent sessions that a Drupal user can enjoy at the same time specific pages where users still have to log in again after how long the logged-in users will need to re-enter their credentials once again   And 2 “Extra” Modules to Consider When Building Your Drupal Site By “extra” I mean that they're not really essential modules to start building your Drupal site with. Yet, they're the first 2 ones to consider right after you've put together your “survival” toolkit as a site builder:   1. Site Settings & Labels     Take this common scenario: You need to display a social network URL on multiples pages on your Drupal site.  What do you do?   you hard coding this single setting in the source you start building a custom Drupal module for handling this variable you install the Site Settings & Labels module and thus display a checkbox to render page elements through a template conditional   The “c” variant's undoubtedly the winner here.  A win-win for you, in fact:   you save the time you'd otherwise have spent coding you improve the user experience on your Drupal site   2. Slick/Slick Views/Slick Media           It's actually a suite of modules to start building your Drupal site with. One “injecting” the needed functionality so that you can easily set up:   carousels slideshows   … on your freshly built website. Note! I won't lie to you: setting up the library dependencies is not exactly a child's play. Yet, once you've succeeded it, configuring the modules in this suite, right in your Drupal admin, is piece of cake. The END! These are the 10 must-have modules to start building your Drupal site from scratch with. Would you have added some more?  Or maybe you wouldn't have included some of the modules listed here, as you don't consider them “essential”? A penny for your thoughts! ... Read more
RADU SIMILEANU / Jul 20'2018
How to Add Autocomplete to Text Fields in Drupal 8: Defining a Custom Route
Let's say that it's a WhatsApp-like, a decoupled, Drupal 8-backed, real-time chat platform that you're building. One using Node.js. In this case, implementing field autocomplete functionality becomes a must, doesn't it? But how do you add autocomplete to text fields in Drupal 8? Needless to add that such otherwise "basic" functionality — implemented on fields like node reference and user/tags — would instantly:   improve the user experience  increase the level of user interactivity and engagement   Users would group around different "channels" and be able to easily add new members. The auto-complete text fields will make the whole “new member coopting” process conveniently easy: Users would only need to start typing and an array of name suggestions (of the already existing team members) would spring up. But let's see, specifically, what are the steps to take to implement autocomplete functionality in Drupal 8:   1. The Drupal Autocomplete Form Element: Adding Properties to the Text Field The first basic step to take is to define your form element. The one that will enable your app's users, on the front-end, to select from the suggested team members' names. For this:   navigate to “Form” (you'll find it under “Entity”) scroll the menu down to ”NewChannelForm.php”   Note: using “#autocomplete_route_name element”, when defining your form element, will let Drupal know that it should ignore it on the front-end. And now, let's go ahead and assign specific properties to your form's text field! For this:   define “#autocomplete_route_name”, so that the autocomplete JavaScript library uses the route name of callback URL define “#autocomplete_route_parameters”, so that an array of arguments gets passed to autocomplete handler   $form['name'] = array( '#type' => 'textfield', '#autocomplete_route_name' => 'my_module.autocomplete', '#autocomplete_route_parameters' => array('field_name' => 'name', 'count' => 5), ); And this is how you add #autocomplete callback to your fill-in form's text field in Drupal 8! Note: in certain cases — where you have additional data or different response in JSON —  the core-provided routes might just not be enough. Then, you'll need to write an autocomplete callback using the “my_module. autocomplete“ route and the proper arguments (“name” for the field name and “5” as count, let's say). And here's specifically how you write a custom route:   2. Add Autocomplete to Text Fields in Drupal 8: Define a Custom Route How? By simply adding the reference to the route — where data will get retrieved from — to your “my_module.routing.yml file”:   my_module.autocomplete: path: '/my-module-autocomplete/{field_name}/{count}' defaults: _controller: '\Drupal\my_module\Controller\AutocompleteController::handleAutocomplete' _format: json requirements: _access: 'TRUE' Note: remember to use the same names in the curly braces (those that you inserted when you defined your “autocomplete_route_parameters”) when you pass parameters to the controller!   3. Add Controller with Custom Query Parameters In the custom route that you will have defined, you'll have a custom controller AutocompleteController, with the handleAutocomplete method. Well, it's precisely this method that makes sure that the proper data gets collected and properly formatted once served. But let's delve deeper into details and see how precisely we can generate the specific JSON response for our text field element. For this, we'll need to:   set up a AutoCompleteController class file under “my_module>src>Controller > AutocompleteController.php"   then, extend the ControllerBase class and set up our handle method (the one “responsible” for displaying the proper results)   it's the Request object and those arguments already defined in your routing.yml.file (“name” for the field name and “5” for the count, remember?) that will pass for your handler's parameters   the Request object will be the one returning the typed string from URL, whereas the “field_name” and the “count” route parameters will be the ones providing the results array.   Note: once you get to this step here, as you add autocomplete to text fields in Drupal 8, remember that you should be having data in “value” and “label” key-value, as well: Next, you'll set up a new JsonResponse object and pass $results, thus generating a return JsonResponse.   Summing Up That's pretty much all the “hocus pocus” that you need to do to add autocomplete to text fields in Drupal 8. Now the proper data results should be generated. Just reload your app's form page and run a quick test: Try to create a brand new channel in your app and to add some of the already existing team members. Does the text field have autocomplete functionality added to? ... Read more
RADU SIMILEANU / Jul 18'2018
Set Up a Local Drupal Site with Lando in no Time: Get Started with Docker
Let's say that you need to spin up a new Drupal environment in... minutes. To quickly test a new patch to Drupal core, maybe, or to switch between 2 or more clients on the same day and thus to run multiple copies on several websites... In this case, how about taking the quick and easy way and set up a local Drupal site with Lando? "What is Lando?" you might legitimately ask yourself. A DevOps tool and Docker container-based technology enabling you to spin up all the services and tools that you need to develop a new Drupal project in no time. "Why would I choose Lando as a method to set up a local Drupal site?" Let me list here some of the strongest reasons:   it makes setting up a local Drupal site unexpectedly easy (and I'm talking about "minutes" here) it makes getting started with Docker container technology a whole lot easier it enables you to share your Drupal site's configuration within your team right on your Git repository (taking the form of a YAML file) it puts several development environments (LEMP, MEAN, LAMP) at your disposal   Are these reasons strong enough for you? If so, here's a quick step-by-step guide on how precisely to set up a Drupal site with Lando:   Step 1: First, Make Sure You Meet the System Requirements If, as a web developer, you're not efficient with using the command line... well... then there are high chances that you find this tutorial here a bit discouraging. And if being more than just familiar with the command line is not a strict requirement, then the following system requirements () are:   macOS 10.10+ Linux (with kernel version 4.x or higher) Windows 10 Pro+ (or equivalent) with Hyper-V running   These are the 3 operating systems that Lando's currently compatible with. Now, let's move on...   Step 2: Download and Install Lando and Docker  Go to Lando releases on Github and download the latest version for your OS. Just run the installer and let it "do the job" for you:   install Docker for Windows, Docker for Mac, Docker CE install Lando: for Mac run brew cask install Lando and for other OS download the .rpm, .dmg, .exe or .deb   Step 3: Create a New Drupal Project Luckily for you, there are several ways to get a Drupal codebase. Pick the one that you're most comfortable with as you set up a local Drupal site with Lando:   install Drupal 8 the standard way (the first step there being "Get the Code"); next, grab the latest version of Drupal 8 navigating to "Download & Extend" or use Composer to create your new Drupal project: composer create-project drupal-composer/drupal-project:8.x-dev my_drupal_project --stability dev --no-interaction or just navigate somewhere on your PC and use GIT to clone it: git clone --branch 8.6.x lando-d8   Step 4: Set Up a Local Drupal Site with Lando: Extract Drupal To extract Drupal just: open up your terminal window enter the commands here below: cd Sites tar xzf /tmp/drupal-8.5.1.tar.gz mv drupal-8.5.1 drupal-lando cd drupal-lando And thus set up the Sites/drupal-lando/ directory inside your home directory Step 5: Set Up Lando    Now's time to initialize Lando and enable it to create a basic configuration file for you. And, again, you have more than just one option at hand:   while still in your terminal window, run the following command and specify the Drupal 8 recipe and your web root as web, next name it "drupal-lando": lando init --recipe drupal8 --webroot=. --name="drupal-lando" or just launch the interactive session: run "lando init" interactively   Next, it's the following YAML file/ ".lando.yml", that it will create: name: drupal-lando recipe: drupal8 config: webroot: . Note: feel free to ignore the "lando init" step and to jump straight to copying and pasting this file here.   Step 6: Start Your Environment & Wait for Your Docker Containers to Get Set Up And here you are now, at that step from the whole process where you set up a local Drupal site with Lando where you start your Docker engine. For this, just run the following command in your terminal window: lando start  If everything goes according to plan, this is where Lando starts Docker and sets up 2 containers. Next, feel free to run: lando composter install It's going to use PHP/Composer inside the newly created Docker container for building Drupal's Composer dependencies.   Step 7: Browse to Your Site's URL and Walk Through the Drupal Installation Process Time to install your new clean Drupal 8 site now. Just visit your local site in the web browser and walk through the Drupal wizard install process (since your new site starts with an empty database, you will be automatically directed to the Install page) Once you reach the step where you need to configure your database, enter these options here:   Database host: database Database name, username, password: drupal8   Next, unfold the "Advanced Options" drop-down menu and:   replace "localhost", currently showing up in the "Host" field, with "database" hit the "Save and Continue" button and let the Drupal installation process carry out   You'll set up a local Drupal site with Lando in... minutes! A brand new website that you can then easily:   test debug manage with Composer   Optionally, you can add a new service of your liking (e.g. MailHog, for catching outbound mails) and custom tune your setup right from your .lando.yml.file. The END! And this is how you do it... Told you it was just a matter of a few easy steps!  ... Read more
RADU SIMILEANU / Jul 10'2018