Planet Drupal

Subscribe to Planet Drupal feed
Drupal.org - aggregated feeds in category Planet Drupal
Updated: 9 hours 8 min ago

OpenSense Labs: Top 4 Reasons Why You Should Migrate from Drupal 7 to Drupal 10

Thu, 2023-01-26 23:54
Top 4 Reasons Why You Should Migrate from Drupal 7 to Drupal 10 Esha Banerjee Fri, 01/27/2023 - 10:24

Drupal 10 released in December 2022 and ever since, the community has been pushing its users to migrate to the latest version. 

As many as 54% of all Drupal sites are running on Drupal 7. 

Using an outdated version has downsides. Businesses miss out on technological advancements and new features that can speed up and safeguard their digital properties.

With the release of Drupal 10 and the fact that Drupal 7 will reach end of life in November 2023, it is crucial to migrate to Drupal 10 soon. Here’s why enterprises should plan their Drupal 10 migration now, and not wait until the last moment. 

Why should you migrate from Drupal 7 to Drupal 10? 

Drupal 10 brings automated updates, improved user experience, along with several other feature additions. These components will be more secure, user-friendly, and powerful. Let’s dive deep into why enterprises must plan their Drupal 7 to 10 migration. 

  1. Community support: As an open source CMS, community support is what keeps Drupal's continuous innovation ongoing. With Drupal community prioritizing and actively focusing on security of newer versions, as and when Drupal 7 reaches end of life, the community support will seize. This primarily jeopardizes the security of your Drupal 7 website. This also means that contributed modules and themes that are currently used in your Drupal 7 website, will also lose support for maintenance. This would bring challenges in website maintenance.
     
  2. New features and upgrades: Another consequence of not upgrading to latest version is that certain functionalities may cease to perform as intended. Or there may be better alternatives available. Not only can this cause extra annoyance among website maintainers, but resolving these issues may incur additional expenditures for your company owing to the time and resources required to do so. In Drupal 7, while developers had to manually upgrade/updates or search for modules from drupal.org , Drupal 10 has simplified this with Automated updates and Project browser, respectively. A lot of Drupal 7 features are either incorporated out-of-the-box in Drupal 10 or simply removed to maintain ease-of-use. 
  • Automatic updates: Drupal sites require manual upgrading, which may be challenging, time-consuming, and expensive. Delays in applying security upgrades can lead to hacked sites. The Automated Updates Initiative seeks to give Drupal sites safe, secure automatic updates. In order to minimize the total cost of ownership of maintaining a Drupal site, increase the security of Drupal sites in the wild, and lower the entry barrier for utilizing Drupal, a safe mechanism for automatically deploying updates in Drupal is to be implemented.
     
  • Project browser: Module installation and locating involve too many steps. Some steps call for you to navigate away from your Drupal site and visit Drupal.org. Other procedures, like utilizing Composer from the command line, need technical knowledge. For users who are new to Drupal and site builders, project browser aims to make it simpler to identify and install modules. This eliminates the need to visit Drupal.org or other sites. It is one of the primary Drupal strategic projects that determines the platform's development goals.
     
  • New themes: Olivero & Claro - The Drupal 7 "Seven" theme from 2009 gave off an out-of-date system impression. Seven was replaced by the new "Claro" theme, which was created in accordance with the most recent requirements. The front-end theme, "Olivero," was created to fit with features that are well-liked by users, such as the Layout Builder. The Olivero theme will be WCAG AA compliant.

The simple finding and installation of modules should empower Drupal newcomers as well as "ambitious site builders" – Dries Buytaert.

Technical Dependencies

Drupal work on current supported PHP versions. Recommended PHP versions are the best choice for building a Drupal site because they will remain supported longer. Drupal 10 is built on PHP version 8.0 while 7 isbuilt on PHP 7 which is also reaching end of life. This creates technical dependencies in supporting the platform better.

  1. jQuery, jQuery UI, jQuery Forms- Drupal 7 includes old and unsupported versions of these libraries. jQuery's current version is 3.6.x. Drupal 7 includes 1.4.2. Other libraries have comparable challenges. You may minimize this little with the jQuery Update module, although the most recent version is 2.1.x. Drupal 8 and later (as well as many other content management systems) make it simple to provide API access to your content. In the age of "publish everywhere," this is a critical feature. Drupal 7 has some basic API support, but if you want a full-fledged API with write support, you'll have to create it yourself, which adds technical debt and possible vulnerabilities.
     
  2. CKEditor 5 update from CKEditor 4 - With a thorough rebuild and an exciting new feature set, CKEditor 5 gives Drupal 10 a modern, collaborative editor experience. Users of programs like Microsoft Word or Google Docs will be used to the new CKEditor's interface. It also offers common tools for collaboration like comments, change suggestions, version histories, and other accepted editing practices. Additionally, it has outputs to.docx and.pdf files for straightforward conversion to print formats. Although the integration is still being worked on, Drupal core 9.3 already has an experimental version if you want to try it out.
     
  3. Composer 2 and PHP 8 support - Although backporting of composer 2 to Drupal 8 was successful, PHP 8 compatibility was not. PHP 8 will be required for Drupal 10 because PHP 7 will be discontinued in November 2022.
Modules that have gone out of support:

The Drupal 10 core will be updated to eliminate a few modules that are redundant or are not frequently used. For uniformity, these modules will be transferred to the Contributed Module area.

  • Gathers and presents syndicated material from outside sources (RSS, RDF, and Atom feeds).
  • QuickEdit: In-place content editing.
  • HAL - Serializes entities using the Hypertext Application Language.
  • Users may keep track of recent content with the activity tracker feature.
  • RDF – Enhances websites with metadata so that other systems may comprehend their characteristics.


You will have to leave Drupal 7 behind. Eventually, the opportunity cost of continuing to use software that is more than 10 years old is substantial, and once it is considered End of Life (EOL), the risk and expense of an uncovered vulnerability increases rapidly.

There are several possibilities available to you, and you have an additional year to choose and make plans for one of them. The ideal option will rely on the expertise level of your team, the amount of business logic you have included into Drupal 7, and your projected budget.

Conclusion 

Drupal 7 will reach end of life in November 2023, Drupal experts recommend that organizations begin migrating to Drupal 10 soon and not wait till November 2023.

If you want to migrate your website to Drupal 9 and prepare for Drupal 10, you may rely on our Drupal migration skills and expertise.

OpenSense Labs, as a Drupal partner, is committed to providing active support. Contact us at hello@opensenselabs.com for a long-term and fruitful collaboration.

Articles Off
Categories: FLOSS Project Planets

Promet Source: Are You Suffering from Drupal Upgrade Fatigue?

Thu, 2023-01-26 17:32
We’re hearing it these days from many of our support clients. Another upgrade?  Drupal did not always move so fast. The two and a half years between the release of Drupal 10 in December of 2022, and the release of Drupal 9 in June of 2020 is in sharp contrast to the four and a half years between the release of Drupal 8 and 9, and the nearly five years between the release of Drupal 7 and 8.
Categories: FLOSS Project Planets

Peoples Blog: Multisite Local environment setup with DDEV and Drupal

Wed, 2023-01-25 23:00
In this article we are going to see how we can set up a multisite environment with ddev on the local machine. Assuming people are aware of configuring the drupal multiple site from the drupal side of configurations. As we all know ddev is an open source tool for running local PHP development environments in minutes, which makes developer life easier during the local environment setup process, her
Categories: FLOSS Project Planets

Colorfield: The state of GraphQL with Drupal 10 (part 1)

Wed, 2023-01-25 03:47
In this fist part, we will compare the key differences between the Drupal GraphQL module versions 3 and 4, where to start and various ways to write a schema with version 4.
Categories: FLOSS Project Planets

Greg Boggs: Get Involved: Ways to Contribute to Drupal, No Experience Required

Tue, 2023-01-24 19:00

There are many ways to contribute to an open source project like Drupal, and not all of them require a deep understanding of programming or web development. Some examples of ways to contribute include:

How to Contribute to Drupal - Ways for Everyone to Get Involved
  1. Testing and reporting bugs: This can be done by looking through the issue queue on Easy Breadcrumb and look for issues that are marked “Needs Review”.

  2. Documentation: Writing and improving documentation is a valuable way to help others learn and use Drupal.

  3. Translation: Helping to translate the interface and documentation of Drupal into diffrent languages.

  4. Support: Answering questions on forums and providing assistance to others in the community.

  5. Design and User Experience: Helping to improve the look and feel of Drupal, and making it more user-friendly.

  6. Marketing and outreach: Helping to promote Drupal and increase its visibility.

  7. Code contributions: If you do have the skills, contributing code is a graet way to help improve Drupal and add new features. Swap the “Needs Review” filter to “Needs Work” and pick a task!

Drupal Contributor Resources

So, anyone can contribute to Drupal community, regardless of their technical skills. To get started with contributing to Drupal, there are a few resources that can be helpful: - Drupal Best Practices is a series of best practice posts that will help you get better at site building. - The Drupal community is a great place to connect with other developers and contributors. You can find information on upcoming events, join groups, and participate in discussions. - The Drupal issue queue is where you can find bugs and feature requests that need to be addressed. You can start by looking for issues that are labeled “novice” or “mentored” to find tasks that are well-suited for new contributors. - The Drupal documentation is a good resource for learning about the platform and its various components. - The Drupal handbook is a great resource for understanding the process of contributing to Drupal, including information on coding standards and best practices. - The Drupal Maintainers Slack channel is a great place to ask for help and connect with other developers, especially #maintainer channel which is for project maintainers and developers to discuss on how to maintain modules.

Categories: FLOSS Project Planets

Centarro: Custom Order Number Patterns in Drupal Commerce

Tue, 2023-01-24 17:04

Drupal Commerce differentiates between the serial numeric ID assigned to an order by the database on save and the order number used to formally identify a placed order. Orders typically start as "drafts" (as in the case of shopping carts) and are assigned an order number when placed (as when a customer completes checkout).

In Commerce 1.x, the order number defaulted to the order ID. This created confusing order number sequences in admin listings when carts were checked out long after they were created or when they were abandoned. Businesses that required sequential order numbers without gaps needed custom code to make it happen.

Thanks to the Number Pattern module we added in Commerce 2.x, site builders have much greater control over order number generation via configuration alone. Number Pattern is used to generate order numbers and invoice numbers (via Commerce Invoice), and it is available for other contributed modules to use as well.

See selection here in the order type edit form:

Read more
Categories: FLOSS Project Planets

MidCamp - Midwest Drupal Camp: Get your session in now...

Tue, 2023-01-24 16:56
Get your session in now... Call for Speakers

We’ve had 30+ sessions submitted already and we’d love to add your words to that number. We’re looking for talks geared toward beginner through advanced Drupal users, as well as end users and business owners. Please see our session tracks page for full descriptions of the kinds of talks we are looking for. Listen to the recording of our Speaker Workshop for some ideas.

Submit a session now!

Important Dates:

  • Proposal Deadline: January 25 (Wednesday), 2023 at midnight CST

  • Tickets on sale: very soon! Keep an eye out.

  • Early-bird deadline and speakers announced: early February (all speakers are eligible for a free ticket, and anyone who submits a session that is not accepted will be eligible for early-bird pricing even after it closes)

Sponsors Get Early, Privileged Access

Get early and privileged access to new talent and customers by sponsoring MidCamp. We have a variety of sponsorship packages available.

Starting at $600, sponsoring organizations can target their jobs to a select group of experienced Drupal talent, maximize exposure by sharing space with dozens of jobs instead of millions, and have three days of being face-to-face with applicants.

Because sponsors make MidCamp possible, we want to return the favor by helping your organization grow within the community and save you time.

Find the right sponsorship for you!

Stay In The Loop

Join the MidCamp Slack and come hang out with the community online. We will be making announcements there from time to time. We’re also on Twitter and Mastodon.

Keep an eye on this space, we will be releasing more blog posts with venue details, hotel and travel options, fun social events, speaker announcements and more! Our preliminary schedule is up now.

We can’t wait to see you soon! Don’t forget, cancel all those other plans and make MidCamp the only thing happening on your calendar from April 26-28, 2023. 😀

Categories: FLOSS Project Planets

Matt Glaman: Leveraging the list cache tag for entity types

Tue, 2023-01-24 13:06

Recently I wrote about launching my wife's web store for her holiday cookie orders. During the launch, I had a little hiccup. The homepage controller has code to display the available published products. When it came time, I published the products, and... the homepage stayed the same. I was confused. I wrote the code and knew it was collecting cacheable metadata. It should have been updated once changes happened to the products. So, I did what all Drupalists do when things don't work as expected: clear the cache. Then I needed to figure out why this didn't work so that the homepage would be updated once we unpublished the products.

Categories: FLOSS Project Planets

Civic UK: Build a grid section creating a new Drupal Media type

Tue, 2023-01-24 07:00
In this post we'll describe how you can create a grid-like section of simple items, by creating a new Drupal Media type.
Categories: FLOSS Project Planets

Five Jars: Is Drupal a good CMS for enterprise companies?

Tue, 2023-01-24 05:55
In this post, we'll examine if Drupal can satisfy an enterprise’s CMS requirements.
Categories: FLOSS Project Planets

Golems GABB: Layout builder toolset. Must have contrib modules for better layout control

Tue, 2023-01-24 04:42
Layout builder toolset. Must have contrib modules for better layout control Editor Tue, 01/24/2023 - 11:42

Dries Buytaert once wrote:

"...it can work with structured and unstructured content, and with templated and free-form pages."

One might call it primitive, but those who master it will be delighted with it because it is the basis. Hello friends! Today our focus is on Drupal Layout Builder. This is a nifty tool that all marketers and developers need.
Layout Builder is the best Drupal responsive web design tool for today. Drupal already has it at its core! That's awesome! Using Layout Builder in Drupal 8 or 9, you can add/remove sections to customize your pages following your requirements and display content using different layouts.

Categories: FLOSS Project Planets

Specbee: How to create and apply a patch with Git Diff and Git Apply commands for your Drupal website

Tue, 2023-01-24 02:34
How to create and apply a patch with Git Diff and Git Apply commands for your Drupal website Akshay Devadiga 24 Jan, 2023 Subscribe to our Newsletter Now Subscribe Leave this field blank

Git has been a reliable version control tool for a large number of closed and open-source projects. With Drupal being an extremely collaborative open-source content management framework, a trackable, transparent, and distributed version control system like Git is a perfect fit. Git replaced a long-time version control partner – CVS – in early 2011 and became every Drupal developer and contributor’s favorite tool for its security, distributed nature, agile workflow, and of course, being open source!

If you’re a Drupal developer, you should be familiar with patches already. Patches are like band-aids. They are small pieces of code that are added on top of already existing code files to support it or fix any issues. Different types of patches include bug fixes, security vulnerability fixes, performance enhancements, styling fixes, etc. If you are a regular contributor to the Drupal project, you should know that to fix an issue in Drupal core or contributed modules, you must submit a patch to an issue in the issues queue. These patches are then examined and tested by the module maintainer and applied if found beneficial.

This is a revised version of the article. We’d like to thank Anktiha Shetty and Pratik Kadambari for all their great inputs! 


There are different ways to apply a Git patch. Let’s learn more about various Git Diff commands and how to create/apply a patch with the help of Git diff and Git apply. We will assume that you have already cloned/obtained a copy of the project in your local repository and have pulled the latest changes so you’re not working on an older version of the project. Take a look at some Github best practices here.

What does the Git Diff command do? 

Git diff is a command to output the changes between two sources inside the Git repository. The data sources can be two different branches, commits, files, etc.

The common use cases of git diff commands are listed below.

•    $ git diff 

This command will output all the modified changes which are not added to git or staged.


•    $ git diff filename

This will output the changes of that current file to its previous committed state.


•    $ git diff branch_name

This will output the modifications of the current branch to the mentioned branch to its previous committed state.


•    $ git diff --staged (or --cached) path/to/file

Once the changes are added to Git or moved to staging, you will not be able to see the diff of the files. To see the staged changes, you can use diff with --staged or --cached option.

  •    $ git diff HEAD

To see the changes from both staged and unstaged changes (not untracked files) together, you can use the git diff HEAD command. If you have all changes staged for commit, then both commands i.e., --staged/–-cached and HEAD will output the same.

 

 

  •    $ git diff commit_id1 commit_id2

To see the difference between any two commits you can use this git diff command where you need to mention the two commit ids.


If you want to see the list of commits made in the Git repo, use the command $ git log. This will list out all the commits (starting from the latest commit) along with their respective commit ids, the author (developer) and the date it was committed on.

Creating a Git patch with git diff

To create a Git patch, we can use any of the git diff commands to get the changes. We then need to save the changes to a file which can be used as below.
 

•    $ git diff > my_custom_patch_file.patch

 

 

 

Apply the Git Patch 

Drupal developers will want to apply Git patches frequently to update changes or to fix bugs. Developers will create a patch file that can be used by other developers according to their needs. To apply a git patch to the current branch use the following command.

•    $ git apply patch_file.patch 

 

 

Try the above command with the -v or --verbose option. It will cause additional information about the current patch being applied to be reported (as shown below).

 

Other useful Git patch apply conditions: 1. Working with trailing white spaces

Use --whitespace option to handle such situations.

Here the patch is created accidentally with trailing whitespaces (as shown below).

 

If the patch is applied as is: $git apply patch_file.patch
The patch will be applied (with whitespace warnings) and will still retain the whitespaces which can cause linting errors.

To fix trailing whitespaces while applying the patch, use the option --whitespace=fix, the patch will be applied, and trailing whitespaces will be removed.

Usage: $git apply --whitespace=fix patch_file.patch

2. Checking the patch before applying

To check before applying the patch, use option --check
The command will show no warnings and errors if the patch is applied cleanly.

 

  3. To see file statistics before applying the patch

Use --stat option with the git apply command. It will list all files which will be changed upon applying the patch.

 

The patch will only show information, and will not be applied. 
To apply patch along with “stat” options add option --apply in command.

Usage: $git apply --stat --apply patch_file.patch

4. To apply only changes that are getting removed

Use Option --no-add with git apply.

For example:

 

Here only changes in red will be applied and green will be excluded.

Usage: $git apply --no-add patch_file.patch

 

  5. Exclude and include the patch to be applied to selected files

Use --exclude option to exclude files from applying patch change.
    
$git apply --exclude=file_name.ext patch_file.patch 
    
Changes on other files, excluding mentioned file, will be reflected.

Vice versa: 

$git apply --include=file_name.ext patch_file.patch 

Changes only on the mentioned file will be reflected.

There might be a situation when the developer does not have write access to the project but still wants to suggest a change or fix a bug. The best way to go around that is to create a patch file. And because patches are additions to the code, testing and reviewing them is easy. This brief guide aims at helping Drupal developers get more familiar with git diff and git apply commands to be able to efficiently create and apply Git patches as needed. Contact us to know more about how we can help you with your next Drupal website.

Drupal Planet Drupal Tutorial Drupal Development Drupal

Leave us a Comment

  Recent Blogs Image How to create and apply a patch with Git Diff and Git Apply commands for your Drupal website Image Installing Drupal 9 on Windows Subsystem for Linux from Scratch Image How to Integrate Drupal 9 with Bitly for URL Shortening Want to extract the maximum out of Drupal? TALK TO US Featured Success Stories

Upgrading and consolidating multiple web properties to offer a coherent digital experience for Physicians Insurance

Upgrading the web presence of IEEE Information Theory Society, the most trusted voice for advanced technology

Great Southern Homes, one of the fastest growing home builders in the United States, sees greater results with Drupal 9

View all Case Studies
Categories: FLOSS Project Planets

Talking Drupal: Talking Drupal #383 - Programming the Physical World

Mon, 2023-01-23 14:00

Today we are talking about Programming the Physical World with Stephen Cross.

For show notes visit: www.talkingDrupal.com/383

Topics
  • What is meant by Programming in the Physical World
  • How do people interact
  • How are we focusing today’s topic
  • What is a Microcontroller
  • What would you not use a microcontroller for
  • How do they get programmed and what language
  • How do you contain the device
  • Do you need to solder
  • How does this relate to Drupal
  • What have you used it for in the past
  • Where should I get started
Resources Hosts

Nic Laflin - www.nLighteneddevelopment.com @nicxvan John Picozzi - www.epam.com @johnpicozzi Stephen Cross - www.StephenCross.com @stephencross

MOTW Correspondent

Martin Anderson-Clutz - @mandclu Alexa Currently provides only a basic integration, for a developer to create a customized handler module to implement the specific functionality they need. An alexa_demo submodule provides a reference.

Categories: FLOSS Project Planets

DrupalEasy: DrupalEasy Podcast S14E5 - Rod Martin - How to be a software trainer

Mon, 2023-01-23 12:21

Direct .mp3 file download.

We talk with Rod Martin about what it takes to be a software trainer (including informal, one-on-one teaching) and how students can best prepare for a training.

URLs mentioned DrupalEasy News Audio transcript

We're using the machine-driven Amazon Transcribe service to provide an audio transcript of this episode.

Subscribe

Subscribe to our podcast on iTunes, Google Play or Miro. Listen to our podcast on Stitcher.

If you'd like to leave us a voicemail, call 321-396-2340. Please keep in mind that we might play your voicemail during one of our future podcasts. Feel free to call in with suggestions, rants, questions, or corrections. If you'd rather just send us an email, please use our contact page.

Categories: FLOSS Project Planets

Ixis.co.uk - Thoughts: Drupal 10 - Everything You Need to Know

Mon, 2023-01-23 03:10
Learn everything you need to know about Drupal 10, the latest version of the popular open-source content management system. From new features to best practices, this blog covers it all.
Categories: FLOSS Project Planets

#! code: Drupal 10: Creating Custom Context Providers

Sun, 2023-01-22 13:49

I previously looked at injecting context providers into context aware plugins. This time I will explore more about creating our own context providers to plug into this system.

The context provider system is an ideal way to provide context to context aware plugins, with blocks being the prime example. You would use a context provider to inject an entity or value into the block so that actions can be taken using that data.

For example, we could load the current node from the route using context so that we didn't have to bake the route provider logic into the block.

The values we inject also plug into the cache systems and so we don't need to worry about making sure we integrate the cache systems for each type of context within the block system. Cache contexts is all taken care of in the block plugin code.

In this article I will look at why you might want to create a context provider, how to create one, and some examples of them in use.

By default, Drupal comes with the following context providers:

  • Current language context (provided by \Drupal\Core\Language\ContextProvider\CurrentLanguageContext).
  • The node entity from the current route (provided by \Drupal\node\ContextProvider\NodeRouteContext).
  • The taxonomy term entity from the current route (provided by \Drupal\taxonomy\ContextProvider\TermRouteContext).
  • The current user (provided by \Drupal\user\ContextProvider\CurrentUserContext).

This gives us a variety of contexts that are commonly used, but there are many reasons why we would want to create our own context providers. Here are some examples of potential contexts we could create using this system.

Read more

Categories: FLOSS Project Planets

Peoples Blog: Secure your Web Application's Reset Password flow

Sat, 2023-01-21 21:30
Generally any application framework provides users to have a flow to reset the passwords by default, It is more like, use clicking on the Reset Password link and redirects to a page where he will asked for email, and reset link sent to users email, so that user can reset the password on their own. This is a default or general flow that any application framework provides, but developers or archite
Categories: FLOSS Project Planets

Evolving Web: The 10 Best Non-Profit Websites of 2023

Fri, 2023-01-20 02:25

Reflecting on 2022, it was a busy and challenging year for non-profit organizations. Wars and grassroots protests captivated public attention. A mounting climate crisis continued to generate alarming headlines. Economic inflation threatened the industrialized world. This meant that would-be supporters had to seriously evaluate their bottom lines and time commitments more than ever.

Heading into 2023, it looks like another difficult year for charities and other non-profit organizations. The current global cost-of-living crisis shows no signs of slowing down. The ongoing war in Ukraine and the lingering effects of COVID-19 continue to cast a shadow. The need for strong non-profits has never been higher, from poverty relief to a global transition to green energy.

Unique Challenges for Charities 

In a sense, non-profits are not all that different from for-profit enterprises. Their supporters are just as valuable as customers are to a business. Non-profits, though, have an added challenge. While businesses sell tangible products and services that the customer can interact with, charities are selling intangibles or tangibles given to someone else in need. It’s harder to sell an altruistic feeling than the latest cell phone.

Now, non-profits need to be even more clever and nimble with limited resources. A recent article in Charity Village asserts that in the current social and economic climate, successful non-profits will be the ones championing flexible giving options (e.g. online giving) while maximizing donor and volunteer retention, ensuring stable revenue through recurring (e.g. monthly) giving programs.

Among the statistics the article cites are:

  • Nearly half of donors over the age of 60 now give online
  • Nonprofit text messaging audiences grew by 26%
  • 60% of millennials show interest in monthly online giving; 45% have already done so
  • Roughly 70% of donors only give to an organization once, which means a net loss to non-profits bearing to the cost of donor acquisition

The successful non-profit in 2023 will be able to through the noise, communicate its message clearly and enable donors and volunteers to donate or participate hassle-free. 

What Makes an Outstanding Non-profit Site?

Would-be supporters want to know that their time and money is making a real impact. Non-profit websites have a high-stakes job to demonstrate that impact and make it easy to navigate, donate and volunteer. 

Our top 10 sites are an eclectic mix, each a leader in their own field.

What unites them

  • A strong, unifying brand identity
  • Effective use of storytelling
  • Clear explanations of how the organizations function and make their impact
  • Hope over doom-and-gloom
  • Clear calls-to-action (CTA’s) throughout, with multiple and easy-to-click access through which to contribute money and/or time
  • Strong multi-channel approaches with multiple social media platforms
  • Personal touches, like photographs and stories 
Image 1. Only One

It’s easy to feel disoriented and powerless when it comes to the world’s innumerable overlapping environmental and climate crises. The science behind it is hard to grasp, the headlines are usually apocalyptic and the forces at work can seem too formidable for any one person to make a meaningful difference.

Only One is an outlier in this space. Founded in 2019 by Sea Legacy and the Blue Sphere Foundation, this site aims to amplify stories that inspire action to protect the ocean, the planet and those disproportionately affected by climate change. It invites site visitors to choose from a range of bite-sized but meaningful donation plans to improve the health of the world’s oceans and environment as a whole, from planting coral and trees to removing plastic and reducing carbon.

Standout features:

  • Friendly, illustrative, modern and professional design
  • Compelling use of photos - its founders are renowned nature photographers
  • Positive storytelling, no doom-and-gloom messaging
  • Easy-to-sign petitions with forms that remember your name to make signing easier
  • A subscription-based donation page that enables donors to select a cause meaningful to them at an appropriate level of financial commitment

Only One is also a great example of a multichannel strategy in action. They have a powerful Instagram presence, and supporters are able to sign petitions via social media. 

 

Image 2. Charity: Water

Charity: Water is an organization bringing clean, safe water to people around the world. Founded in 2006, the organization currently operates in 29 countries and has funded 111,796 water projects (as of December 2022), directly impacting the lives of over 15 million people – primarily in South Asia and Sub-Saharan Africa. It works with local organizations to implement projects as well as monitor and maintain them, ensuring long-term sustainability.

Charity: Water demonstrates textbook examples of the many of the elements that go into a good nonprofit website: consistent branding, clear calls-to-action, visible links, clear messaging around its mission and a hopeful tone.

Standout features: 

  • Beautiful design featuring beautiful regional and human-centred photography 
  • Engaging storytelling highlighting beneficiaries’ voices
  • Superb copywriting with strong, active language and straightforward messaging
  • A user-friendly donation module on the homepage, enabling both one-time and monthly donations, up to and including sponsoring an entire water project

Charity: Water is also active on social media, with a particularly engaging YouTube channel. It features footage of water projects in action and interviews with organization leaders and members.

 

Image 3. Girls Who Code

Girls Who Code aims to close the gender gap in computer technology. By providing programs for girls to learn about technology and programming, they see it as a viable career option. Through in-person programming, including a summer immersion program, clubs and college loops, GWC has empowered over 500,000 girls with the skills to pursue education and careers in computing.

GWC’s website is impactful and engaging. It lets the user self-select so they get the most-needed information. Students can input their grade and location, and immediately see nearby programs. The site uses engaging infographics to demonstrate the need for their programs and its impact on students and organizes the information clearly.

Standout features:

  • A clear mission statement displayed from the get-go 
  • Clean and simple logo design with an inviting, friendly colour palette
  • Beautiful, positive, people-focused imagery featuring BIPOC 
  • Simple and clear UX
  • Clean and clever icon designs
  • Prominent donate and “get updates” buttons 
  • Compelling testimonials

Also well worth mentioning is the related (and also excellent) site Black Girls Code, which focuses specifically on empowering young women of colour to pursue computer programming.

 

Image 4. War in Ukraine (war.artmilitonian.com)

Russia’s wholesale invasion of Ukraine in February 2022 was the defining news story of the year. And it looks to continue in 2023, with a staggering number of non-profit websites springing up to support Ukraine.

While there are numerous organizations offering military and humanitarian aid that are worth supporting, one website truly stands out from the pack: Artem Militonian’s award-winning site War in Ukraine. Created by an expatriate Armenian-born Russian designer, War in Ukraine is an immersive web experience that takes you through the chronology of the Russian invasion, with handy links to organizations to support.

Standout features:

  • Captivating design with a foreboding atmosphere designed to conjure the feeling of war
  • Simple design – simply click on the site and scroll down for the timeline of the war
  • Use of all-caps throughout the site, creating a sense of urgency
  • Visually dramatic, with use of photography sourced from news agencies
  • The long scroll format of the website feels neverending, evocative of the war itself

Also well worth checking out is Artem Militonian’s breathtaking website commemorating the Armenian Genocide, which follows a similar format. Like the War in Ukraine site, it’s not for the faint of heart.

 

Image 5. SickKids

The Hospital for Sick Children (HSC), – operating under the corporate brand ‘SickKids’ – is a major pediatric teaching hospital affiliated with the University of Toronto. A major global hub for research in pediatrics, the hospital was ranked the top pediatric hospital in the world by Newsweek in 2021.

The SickKids website embodies all the best practices you would expect from the web platform of a world-leading medical institution. While the site itself is very large, it is organized in a way that is approachable and non-threatening. With loved ones of sick children in mind, site visitors are invited to search what they’re looking for in a friendly search module labeled “How can we help you today?” There’s also direct access to Virtual Urgent Care, a COVID-19 Info Hub, Coming to SickKids and an invitation to donate.

Standout features:

  • Simple, calming colour palette accentuated by use of round corners
  • Background textural elements that create a sense of movement and calmness
  • Imagery that focuses on hope and optimism
  • Prominent "Support Kids" button, which creates a focal point
  • A prominent emergency button that allows users to get care more quickly

The site also has a sister site, SickKids Foundation, a marketing-driven site for donors and potential sponsors. This site is also visually impactful, with a navigation that has three primary calls-to-action: donate, shop and fundraise.

Image 6. Right To Play

Right To Play is a Toronto-based international organization. Its mission is to use play to empower vulnerable children to overcome the effects of war, poverty and disease. Operating in 15 countries worldwide, the organization focuses on four major outcome areas: quality education, children's health and well-being, girls' empowerment and child protection.

The Right To Play website is strongly branded and unique to the organization, with its mission statement highlighted front-and-centre on the homepage. With vivid, uplifting photographs of culturally diverse children at play throughout the site, its atmosphere is positively upbeat. The navigation is intuitive, offering multiple access points for people to donate or otherwise support the organization.

Standout features:

  • Simple brand colour palette and curated photos, giving it a cohesive feel
  • Effective split between primary and secondary navigation
  • Use of hand-written font makes it feel more personal 
  • Positioning donation as a focal point
  • Beautifully curated videos that create impact
  • Effective use of storytelling, pulling users into the content
  • Just enough facts to be informative and not overwhelming

Right to Play also maintains a multi-channel social media presence, with a particularly engaging presence on YouTube and Instagram

 

Image 7. Mira

Mira is the brainchild of Éric St-Pierre, a dog trainer from Sainte-Madeleine, Québec. Founded in 1981, Mira was the first francophone centre for Guide Dogs in Canada. Today, Mira offers free guide dogs and service dogs to people living with visual impairments and physical disabilities and to youth with Autism Spectrum Disorder (ASD).

Mira’s fully bilingual website is a textbook example of simple, accessible and engaging design. A video on the homepage helps engage users right from the start, while the page directs visitors to the organization’s three focal areas: guide dogs for the visually impaired, service dogs for people with mobility issues and dogs for children with ASD. It also features an in-depth look at the typical life of a dog involved in the program.

Standout features:

  • Clean, simple design with a minimal colour palette that keeps things digestible
  • Straightforward navigation structure with large logo for added emphasis
  • Strong storytelling elements with particular appeal to dog-lovers 
  • Intriguing illustrations that lead the user into the content – illustrations play with figure/ground ambiguity (superimposed dog/human images) 
  • Excellent copywriting in both French and English
  • A prominent ‘donate’ button

The site also houses an online retail store that sells branded Mira products, ranging from dog calendars and Christmas cards to dog owner supplies and apparel.

 

Image 8. World Bicycle Relief

The bicycle is a well-demonstrated instrument of poverty reduction. Statistics show that a bicycle can increase the income of a family living in poverty by as much as 35%. The Chicago-based non-profit World Bicycle Relief works to do just that. Founded in 2005, WBR has distributed more than 500,000 bicycles in 21 countries and trained more than 2,300 bicycle mechanics in the developing world.

Worldbicyclerelief.org is a striking website with some remarkable design features. Above all, it’s a storytelling engine that seeks to share the true stories of the impact of bicycles. Featuring videos, stories and quotes from people whose lives have been changed by bicycles, the site introduces us to the issues through a human lens and makes a clear case for how the potential donor could participate. 

Standout features:

  • Video content that pulls users into the content
  • Parallax animations that create a smooth experience from section to section on the homepage
  • Subtle animations and clever multiple meaning messaging
  • Modern, clean colour palette
  • Fact-focused copy with an emphasis on statistics that demonstrate the program’s impact
  • Mission statement shown right at the beginning

WBR is another great example of a multi-channel approach, with supporters able to engage and donate via social media.

 

Image 9. Canadian Blood Services

Giving blood is one of those things that most people agree is important but many of us don’t do. A recent poll showed that while six in ten eligible donors in Canada believed donating blood or plasma was important, only one in ten had plans to donate. Canadian Blood Services works to reduce this reluctance to donate blood and seeks to address the growing shortfalls in national supply of plasma and stem cells.

Canadian Blood Services’ website (blood.ca) is invariably the first thing that shows up in a Google search in Canada for the word “blood”, and is the country’s go-to online hub for all things blood-related (except in Québec, which is served provincially by Héma-Québec). 

It’s an enormous site with a vast amount of information, yet it somehow manages to be accessible and approachable – a great asset when it comes to topics that many people find threatening or uncomfortable.

Standout features:

  • Multiple points of access into the site’s vast informational resources
  • Prominent feature stories of people whose lives have been impacted by blood, plasma, stem cell or organ donation
  • Clear calls-to-action on virtually every page
  • Consistent and appealing branding centred on two colours: red representing blood and plasma and blue-green representing stem cells and organ and tissue
  • Multiple “ways to donate” buttons throughout the site

In addition to encouraging blood donations, the site also enables people to support the organization in other ways, including through a retail store that sells branded apparel and stationery supplies.

 

Image 10. Million Peacemakers

Million Peacemakers is an organization close to our heart here at Evolving Web – both for its activism and the client relationship it shares with us. Founded in Montreal, this award-winning organization has trained over 225,000 people in 23 countries since its five-year inception with a patented three-step conflict resolution methodology called Nonflict.

The current Million Peacemakers’ website does a superb job of introducing visitors to the threats of conflict on businesses, nations, families and youth. The homepage centres on an introductory video, which effectively sets the tone of the site, and leads directly to an explanation of Nonflict, the site’s main topic. The homepage offers multiple access points for people to connect with and support the organization.

Evolving Web is currently in the process of revamping Million Peacemaker’s web presence, starting with a subsite for Million Peacemakers Youth – geared for one of the organization’s key volunteer bases. The new subsite aims to cast the visiting youth as a “superhero” capable of making a world of difference. As you continue down the page, calls-to-action will prompt the user to rise to the challenge, while a continuous line graphic throughout the site will represent connection and the work-in-progress nature of activism.

The new site will feature:

  • Flexible, scalable, easy-to-use Wix platform
  • Brief, direct, action-oriented, youth-focused and wireframe-friendly web copy
  • The concept of Nonflict kept front-and-centre in depictions of what volunteering for MP looks like
  • Warm accent colours to draw attention to important elements like CTAs
  • Extensive photos, especially of youths in action working together
Let’s Join Forces

We have a heart for non-profits at Evolving Web. If you’re part of an organization seeking to improve your web presence, we would love to hear from you. Contact us today and get us to work helping you make a bigger impact.

+ more awesome articles by Evolving Web
Categories: FLOSS Project Planets

OpenSense Labs: 6 Reasons Why You Need To Upgrade Your Drupal Website

Fri, 2023-01-20 01:20
6 Reasons Why You Need To Upgrade Your Drupal Website Esha Banerjee Fri, 01/20/2023 - 11:50

It goes without saying that (software) upgrades improve the overall performance of websites. Drupal is no exception. 

Regular updates to the Drupal core benefit not just the site owners in terms of security but also help deliver better user experience. 
 
Businesses should regularly update their websites to make them faster, secure, and easier to use.

Here’s why upgrading your Drupal website is crucial.

Why upgrading your website is important

Below are a few reasons you should prioritize upgrading your website.

  1. Security: Between November 2020 and October 2021, 5212 organizations worldwide experienced data breaches (source: statista). Delays before security updates are applied on site can result in compromised sites as seen in Drupalgeddon.

    Acquia is known to have observed more than 100,000 attacks a day.

    The scale and the severity of this Drupalgeddon brings to fore the importance of keeping websites updated on time. When enterprises fail to upgrade their sites on time, chances of it being compromised are very high.

    Websites that do not receive security upgrades are vulnerable to hacker assaults. The Drupal Security Team issues security announcements for all core vulnerabilities contributed modules that are very critical (labeled "highly critical"), requiring that available upgrades be implemented as soon as feasible. 
     
  2. Support & Maintenance: Community support is what enables Drupal's continual evolution as an open source CMS. The community support for Drupal 7 will wane as it approaches end of life since the Drupal community is actively prioritizing and concentrating on the security of subsequent versions. 
     
  3. Improved design and cost effective: The design of your website accounts for 94% of consumers' first impressions. So, if your website design is unappealing or unpleasant to users, your visitors will bounce off. Further, 38% of website visitors do not engage with an unattractive website, and the design alone accounts for 73% of your website's trustworthiness. The online equivalent may be your website, which deters potential customers from utilizing your services or purchasing your goods. It might no longer be a symbol of excellence. So an upgrade to the design is absolutely needed. A revamp is necessary, in my opinion, every year or two.
     
  4. New Functionalities: Another consequence of failing to apply timely upgrades  is that certain functionalities may cease to perform as intended. Not only can this cause extra annoyance among website maintainers, but resolving these issues may incur additional expenditures for your company owing to the time and resources required to do so. 
     
  5. Technology Benefit: Technology has also advanced, enabling us to forgo conventional, cumbersome Javascript writing in favor of more user-friendly and feature-rich ways to significantly enhance the user experience (JQuery, Prototype, etc.). corner boxes and shadows. HTML5 and CSS3 may significantly improved websites.
     
  6. Improved Speed: Your website has to load as quickly as possible since Google now considers page load time as a ranking factor. It's possible that your older website might use a speed boost to obtain some additional Google points using the new technologies and techniques for speeding up websites. Images should be optimized, compression should be used on the server, web pages should be cached, and CSS and Javascript should be minified.
Drupal for a better digital experience

Drupal is popular among enterprises because of its flexibility, modularity, and authoring experience. Drupal also provides several more perks and advantages that make it one of the top CMS.

Here are some advantages that businesses might gain by developing a website using a Drupal-based platform:

  • Being an open-source platform, Drupal has strong community support that makes website upgrade/migration for consistent branding simple.
  • Drupal as an enterprise CMS, provides a full range of functionality, including multi site management, themes, SEO, content control, and connectors.
  • It lets companies provide digital experiences consistently and uniformly across all of their journey's channels.

Even if we are aware of the numerous advantages that Drupal provides or the features that are more companies, marketers, and even digital agencies to this CMS, there are a number of factors that set Drupal CMS apart.

  • Content Presentation With A Headless Architecture
  • Personalization With Machine Learning And Predictive UX
  • Chatbots To Drive The Business Value
  • Exploring Markets With Augmented Reality (AR) And Virtual Reality (VR)
New Drupal Upgrades since Drupal 7

As of right now, Drupal 10 has just launched, and Drupal 7 is walking towards it's End of Life. It is advised that companies utilizing Drupal 7 start preparing for their migration to Drupal 10 immediately. Some of the features that set Drupal 10 apart as a unique version with some brand-new feature additions and some feature updates are listed below.

  1. Automatic updates - The goal of Drupal's Automatic Updates is to address some of the most challenging usability issues that arise when managing Drupal websites. Updates to the production, development, and staging environments are included, and certain integrations with the current CI/CD procedures are also necessary.
  2. Project browser - The Project Browser simplifies module discovery for site builders. When you pick a module, you will be given instructions on how to install it on your site. This browser is embedded into the Drupal site, so you don't have to leave it to search for modules.
  3. jQuery, jQuery UI, jQuery Forms- Drupal 10 runs on PHP 8, which will be phased out by November 2022. jQuery UI. Furthermore, Internet Explorer 11 and Drupal 10 are incompatible. Modern JavaScript components could someday take the role of the jQuery user interface.
  4. New themes: Olivero & Claro - The Drupal 7 "Seven" theme from 2009 gave off an out-of-date system impression. Seven was replaced by the new "Claro" theme, which was created in accordance with the most recent requirements. The front-end theme, "Olivero," was created to fit with features that are well-liked by users, such as the Layout Builder. The Olivero theme will be WCAG AA compliant.
  5. CKEditor 5 update from CKEditor 4 - Another outstanding upgrade in Drupal 10 is the new WYSIWYG editor. It is challenging to characterize it as just an upgrade of CKEditor from version 4 to version 5 because all the code was written from scratch.

This is not all here are some more insights on Drupal 10 features and modules

Conclusion 

Drupal's modular design and ready-to-use configurations offer quick market entry and the capacity to keep up with technological advancement. One of the top technologies reshaping the IT sector is Drupal, which gives organizations the adaptability and scalability to develop while keeping in mind the needs and preferences of their users.

As Drupal 10 is here, and most  businesses are planning their migration, We at OpenSenseLabs assist businesses in offering a superior digital experience. Email us at hello@opensenselabs.com so that our Drupal experts can assist you.

Articles Off
Categories: FLOSS Project Planets

OpenSense Labs: Boost developer productivity with Chakra UI

Fri, 2023-01-20 00:56
Boost developer productivity with Chakra UI Vidya Roy Fri, 01/20/2023 - 11:26

React component libraries are helpful tools in creating stunning interfaces for react-based applications. Though each website component can be coded from the scratch, component libraries make the development process easier and faster to complete. It allows you to use the exact component in your design without going back to the drawing board. As a result, an efficient application can be developed in less time and cost. 

Chakra UI is a modern component-based library for building interfaces. It provides an accessible and reusable component-based architecture that makes it easy to create complex, responsive web applications. 

With its intuitive design system, Chakra UI helps react developers quickly build user interfaces that are accessible, responsive, and visually appealing. 

In this blog, we’ll learn the essentials of Chakra UI, and its importance in React web development, installation, and uses. 


What Is Chakra?

 

Developers and business owners are always looking for ways to develop quickly and efficiently and a great experience for our clients, and Chakra is a tool helping developers to achieve that. 

Chakra UI is a simple, modular and accessible component library that gives building blocks to build React application


According to their official website, Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications. 
This component-based library helps build React apps with speed and boosts developer productivity.


Why Use Chakra?

 

Chakra is a modern and powerful component library for React that was designed and developed by Segun Adebayo a UX Engineer for developing front-end applications. It provides more components, improved styling API, and accessibility and easy-to-understand documentation that gives us guidelines on how to build reusable components and save time.

It provides improved styling API with easy-to-understand documentation to build reusable components and save time

Chakra UI is customizable and reusable we can easily adjust it with our designs. It is very simple to use if you know how to use react components and this also supports ReactJs, along with some other libraries too.

Its components' names and the prop's names are easy to understand. It provides dark and light mode compatibility for developers to overcome contrast challenges. 

Chakra components

 

Chakra has a lot of prebuilt composable and reusable components. Its components are dark and light mode compatible so we can also create our own dark and light mode experience across our application with a little bit of configuration.

Let's take a look at some components of Chakra UI. 

Typography

Typography is the method of arranging font sizes, line spacing, letter spacing, line height, typeface, and other elements of text formatting to improve readability. It’s an important aspect of digital design and can greatly impact how readers engage with and understand written content.

 

Overlay

An overlay is a method to put something on top of such as an image or video, or text on top of another so that what is in the lower position can still be seen.

Feedback

Feedback refers to giving information about something that anyone has done which tells how good or bad it is.

Data display

Data display is a method to represent the data in a visual format, such as a chart, graph, or map, and make information easy to understand.

Navigation

Navigation refers to moving through a website or application, finding the information you need, and getting to the pages you want to visit.


Disclosure 

The act of revealing or making known information that was previously hidden,or making something known.

Form

A form is a document that contains spaces for users to input information It can be used for a variety of purposes, such as collecting contact information, applying for jobs or loans, and more.

Media & Icon

Media refers to various forms of content such as images, text, audio, and video that can be used to carry, entertain or inform.

Icon refers to the representation of the content this is small graphic images or symbols that are used to represent a specific function, feature, or content on a computer or mobile device.

Others

Uses of Chakra components

 

If we want to add default components of Chakra UI to the project we just have to copy its code and paste it into our project and we can see our effect on the browser. If we want to use some components we just have to import them from ‘@chakra-ui/react’.

import {
  Alert,
  AlertIcon,
  AlertTitle,
  AlertDescription,
} from '@chakra-ui/react'.



 
  Your browser is outdated!
  Your Chakra experience may be degraded.

Import like this and create the structure you want to make it very easy to use. 

Chakra Installation?

 

We can use npm, yarn, and pnpm for the installation of chakra and its dependencies.

After setting up our react projects we have to run this command.

npm
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

//or
yarn
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion

//or
pnpm
pnpm add @chakra-ui/react @emotion/react @emotion/styled framer-motion

After installation to get initialized, we need to set Chakra provider at the root of our application. This can be our index.js or App.js depending on the framework we use.

For React:

import React from "react"

// 1. import `ChakraProvider` component
import { ChakraProvider } from "@chakra-ui/react"

function App({ Component }) {
 // 2. Use at the root of your app
 return (
   
     
   
 )
}

Conclusion

React component libraries are helpful tools in creating stunning interfaces for react-based applications. With its intuitive design system, Chakra UI helps react developers quickly build user interfaces that are accessible, responsive, and visually appealing.

With emerging technological trends you need a partner that ensures your website is innovative. At OpenSenseLabs, we help enterprises provide a better digital experience with new technologies.

Contact us at hello@opensenselabs.com and let our experts help you out.

Articles Off
Categories: FLOSS Project Planets

Pages