Drupal (core)

READ MORE

Ukraine Support Drupal friends, I have watched in awe the past week as Ukraine has been brutally bombarded by the Russian military. This war has already cost countless ... [More] lives and the tragedy unfolding will take unimaginable resources to rebuild. We have friends, relatives, coworkers, and acquaintances in Ukraine who need our help. The Drupal Ukraine community includes hundreds whose lives have been uprooted—some to other parts of the world, some to shelter, and some to the front lines. This is my attempt at a list of resources who are requesting aid. Please give generously and consider setting up recurring donations if you can. MidCamp is donating $6000 of our reserves to relief funds. One thousand each to ImageX, Voices of Children, IRC, Red Cross, Tabletochiki, and Kyiv Independent. Humanitarian Relief ImageX Emergency Relief Donations will go directly to the ImageX team in Ukraine to ensure they have funds to help them flee if and when they can and/or to rebuild their lives. Voices of Children Providing financial and psychological support to children who have witnessed war, through art therapy and storytelling and well-being practices. International Rescue Committee Providing food, clothing, shelter and other resources to refugees fleeing countries facing a humanitarian crisis. Ukrainian Red Cross Providing infrastructure support, food and hygiene items for families and medical aid to vulnerable and wounded Ukrainians. Tabletochki Providing diagnostics, medicine, care coordination, transportation, psychological support, and special events for Ukrainian children with cancer. Military Aid These funds directly contribute to the war effort. They may not be the right way to contribute for everyone, but have been recommended directly by multiple Ukrainian colleagues. Come Back Alive Providing bullet-proof vests, technology, training, and ammunition to Ukrainian soldiers. National Bank of Ukraine Special Fund to directly support the Armed Forces of Ukraine. Support for Marginalized People in Ukraine (via Instagram) @ukraine.Pride Ukrainian Women's Guard Fight for Right - support for Ukrainians with disabilities. Everybody Can Resources for African/Caribbean students in Ukraine Nigerians Leaving Ukraine United Help Ukraine Sunflower of Peace Fundraiser to Support Hospitals in Ukraine List of bomb shelters in Ukraine Fundraising to support Romani People Project Kesher - supporting Jewish women and girls. Operataion Ganga - evacuating Indian nationals. Independent Media Kyiv Independent – Ukraine’s English-language media outlet, created by journalists who were fired from the Kyiv Post for defending editorial independence. Keep Ukraine’s media going (GoFundMe) - aimed at helping media relocate, set-up back offices and continue their operations from neighboring countries. Ukraine Crisis Media Center – international strategic communications hub with active outreach to audiences both in Ukraine and abroad. [Less]

As you’ve probably heard in recent days, the end of life for Drupal 7 is extended to November 2023. This news is great for Drupal 7 site owners who need some extra time to move to the latest version of Drupal! While you might have heard about the ... [More] challenges of migrating from Drupal 7 to Drupal 9, it’s also an excellent opportunity to make improvements and take advantage of Drupal’s latest features. So while this change takes the pressure off, there’s never been a better time to do your migration. And the great news is that you’ll benefit from easy upgrades in the future. Drupal is committed to making upgrades to major new Drupal versions a much simpler process. Migrating to the latest version of Drupal is also an opportunity to re-architect your website to make it easier to manage content. And you can even clean up content in the migration process, making it more compliant and better structured. There’s no better place to learn about migrations than DrupalCon! Here are some of the learning opportunities you won’t want to miss: First off, there will be a hands-on Drupal Migrations training, led by my colleague at Evolving Web Dharizza Espinach. The training will take place on Monday and Tuesday and will guide you through the process of migrating from Drupal 7 to 9, step-by-step. You can register for Migration training when you buy your ticket to DrupalCon. Migration Assistant is a brand new space at DrupalCon solely dedicated to helping you with your migration needs. With more than one version of Drupal reaching its end-of-life, the Migration Assistant space is here to help you make the transition. There will be a strong group of Migration Mentors to help you troubleshoot, create action plans, and answer your specific migration questions. The Migration Assistant space is available on Wednesday-Thursday 27-28 April @ 2:30p-5:30p PST in Room B114-B115, and it is open to anyone in attendance! Add it to your schedule!  Every Industry Summit will have a presentation on industry-specific migration practices. If you are a higher education, healthcare, government, or non-profit professional working on migration for your organization, this is the place to be!  Birds of a Feather sessions are informal, knowledge-sharing sessions. You can propose a migration-related topic and meet with others who share your interest. Submit a Birds of a Feather session here. Between all the organized sessions, the hallway at DrupalCon is guaranteed to be full of migration stories and lessons learned. In addition, you can be sure that many attendees you meet will be able to share their migration insights with you, so don’t be shy! Suzanne Dergacheva (pixelite) [Less]

I’ve done a lot of Drupal training over the years. I believe Drupal is an awesome CMS and I love the opportunity to help those who are new to Drupal to get solid, career-boosting skills. Invariably, there are AHA moments among class participants who ... [More] learn something about Drupal that they had never heard before and come to see Drupal in a new way.   [Less]

"Agile methods are not opposed to documentation, only to valueless documentation."

The Drupal 7 news was a relief for editors, website administrators, IT Managers and all involved in website maintenance last week when the Drupal project announced they are extending the end of life for Drupal 7 platform for a further year.

Do you know that another Drupal book is about to be released? I've read a lot of books about Drupal and Digital Marketing, but this one is special, because I'm the author! 😉 If you want to learn more about the ... [More] book and the process of writing it, check out my Author Interview at Packt Publishing. By José Fernandes [Less]

Webform comes with an option of displaying a form in a pop-up Dialog box, but is not enabled by default. With this option, a webform can pop-up on the screen when clicking on a link. Users can stay on the same page while filling in the form. In this tutorial, you’ll learn how to enable and configure dialog box pop-ups in Webform.

On February 16th I officially resigned my position as chair and member of the Drupal Association board of directors. The Drupal project and Drupal community are very dear to me and I have been so honored to serve on the board these last 4+ years and ... [More] as the chair over the last 16 months. I want to share a little bit about why I’m stepping down, share why I am still really excited about Drupal’s future and share some of my own #DrupalThanks. In conjunction with this post, you will see posts from Baddý Sonja Breidert and Dries Buytaert with more details on what is coming up next.  Like everyone else, the pandemic has been a huge challenge for me. I’ve been lucky to be busy with consulting and project work throughout, but have struggled to maintain any kind of work-life balance for almost two years. While spending time with my family at the end of last year, many of whom I had not seen in more than two years, I reflected a bit on how I spend my time and resolved to scale back. Over the last few months I’ve started to look at how much paid work I take on and how I spend my volunteer time--which includes my board work for Drupal--to ensure time for my family and make sure I am able to give my best in everything I’m doing.  I originally planned to be in the chair role for two years to October 2022 and had great ambition for the Drupal Association and what we could do to support the near- and long-term success of the Drupal project and health of the Drupal community. As I was discussing the possibility of stepping down early, we received news that our dynamite Executive Director Heather Rocker had been approached with an amazing opportunity and would be leaving the DA (completely unrelated to me leaving). In discussion with the executive committee, we agreed the smartest approach would be to move forward with getting a new chair in place sooner rather than later. The new executive committee of Baddy, Tiffany, Owen, and Dries are now in a strong position to manage the transition, support our acting ED Angie Sabin, and lead the search for a new Executive Director.  While I’m sad to step away from my term earlier than planned, I am excited about Drupal’s future and confident in the DA’s ability to help drive it for three reasons: (1) The Drupal Association has weathered the pandemic* which was almost unimaginable in March 2020 (#DrupalThanks to so many of you and the brilliant, hard-working DA staff), (2) we have a solid strategy for the DA to support the project, and (3) we have a talented and dedicated board and staff in place to keep that work going. Our strategy is to drive Drupal innovation with three pillars: contribution enablement, advocacy for Drupal, and ensuring diverse revenue streams. The beginnings of that multi-year strategy emerged in March 2020 and I’m extremely proud that we’ve managed to refine it and the staff has made so much progress while also dealing with the existential threat of the pandemic since then. Initiatives like Gitlab to make contribution easier, the launch of Try Drupal to grow and develop the talent pipeline for Drupal agencies and end-user organizations, and the recognition of top agencies with Drupal Certified Partners are just a few of the dozens of initiatives delivering on the strategy.  In addition to driving the strategy, my other goals had been to ensure our board was engaged--putting to work diverse opinion and experience from both agencies and end-user organizations, as well as expertise outwith Drupal--and that we were accessible at touchpoints throughout the year, not just at DrupalCon. While both of those goals were more challenging while we’ve been unable to meet in person, I’m thrilled we’ve been able to make some progress with board and staff Q&A sessions at DrupalCon Global, DrupalJam, DrupalCon Europe, DrupalCon North America, and most recently DrupalCamp Florida (if you put on a Drupal event, think about adding a DA Q&A session to your program!). I had so much fun at the ones I attended and am so happy to know more of them will be in person starting with DrupalCon Portland. I know this will continue to be a priority for the board going forward. Finally, all that is left to say are my thank yous. A huge #DrupalThanks to Heather Rocker, Angie Sabin, Tim Lehnen and Ashlee Noland. It’s been fantastic to partner with you as a board member and chair and I’m incredibly humbled by the determination and dedication you’ve all brought to the most challenging circumstances. I will continue to be cheering the Drupal Association staff on from the sidelines. A small but mighty team, indeed. It’s been an absolute privilege working with my fellow board members over the last four plus years. I thank you for your time, thoughtfulness, and willingness to discuss and debate the hard things. I’ve learned so much working with you all and hope in turn my contributions have enriched your experience as well. Special shout outs to the executive committee who I have been so lucky to work with: Baddy, your warmth, enthusiasm and perseverance is a force of nature; I am in awe. Ryan, you have an amazing ability to build bridges and untangle thorny subjects. Last but not least Dries, your leadership, thoughtfulness and grace under pressure are such an inspiration. Thank you for the opportunity to serve. I know the incoming executive committee led by Baddy and including the super brains and institutional knowledge Tiffany and Owen bring will supercharge the work of the board.    Drupal is too special for me to say goodbye forever, so I will just end with thank you and farewell until the next time our paths cross. -- Audra Martin Merrick (audra) * I say “weathered the pandemic” as if it’s over, though I know for many that it is not and we will all be feeling the effects for years to come. [Less]

How to Customize a React Theme Using Ant Design Vinit Kumar 01 Mar, 2022 It’s a bit of an understatement to say good User Interface (UI) design ... [More] plays a huge role in engaging your website audience and leading them to a conversion. While any good UI requires interactive, intuitive, rich and accessible design - a seemingly daunting challenge - it’s achievable when you use high-quality components and libraries to build it. The most popular of these is Ant design. It’s a React UI library that has access to easy-to-use, quality components for building elegant and fast user interfaces. Why Ant Design? Created by Alibaba, the Ant design system is used by several big names like Alibaba (of course), Tencent, Baidu, and more.                          It has fast become the most used React UI library. Previously Material-UI was the most popular with over 75k stars on Github, but Ant Design has now overtaken them with 77.5k! What Ant design has done so well is humanizing their design. They evaluate quality of design by measuring against four human-consciousness and happiness centric values - naturalness, certainty, meaningfulness, and growth. Those act as a standard for designers and guide them in decision-making and better judgment. Ant Design Components Ant design (or antd) offers many rich UI components that can enhance your website or app experience. Check out some of them below but for more options, visit here. Universal Components: Buttons, icons, typography, etc. Layouts: Grids, layouts, spacing, etc. Navigation: Breadcrumbs, menus, dropdown menus, etc. Data Entry: Autocomplete, checkbox, date picker, etc. Data Display: Avatar, comments, collapsible panels, etc. Installing React and Ant Design Now that we know what components are available in Ant design, let’s learn the basic installation process of React and then install Ant design in it. You can use yarn or npm to set up the React project. Below are the basic commands to install and set up React: $ yarn create react-app antd-demo # or $ npx create-react-app antd-demo $ cd antd-demo $ yarn start Once React is installed, you can see the running app in the browser.   This is the default generated directory in the newly created project. Going forward, we will be modifying some of the files here to achieve the final output. ├── README.md ├── package.json ├── public │   ├── favicon.ico │   └── index.html ├── src │   ├── App.css │   ├── App.js │   ├── App.test.js │   ├── index.css │   ├── index.js │   └── logo.svg └── yarn.lock Now after setting up React, let’s install Ant design in it with this command: $ yarn add antd After installing antd, you can use the Ant components by modifying the markup in App.js that is inside the src folder in your project. Here, I am adding a button element from Ant. import React from 'react'; import { Button } from 'antd'; import './App.css'; const App = () => (        Button    ); export default App; Ant button component: Once you save and run the app, you will be able to see the Ant primary button element in the browser in blue color (as shown above). This means that Ant is successfully integrated in React. Customizing a Theme The best part about integrating Ant Design with React is that it allows you to customize your design tokens to satisfy UI diversity from business or brand requirements, including primary color, border radius, border color, etc. Image credits : Intoli To allow these customization, you will need to do some advanced configurations. Advance Configuration: At this point you need to customize the default configurations of create-react-app. Let’s use CRACO (Create React App Configuration Override) - a community solution for custom configuration of create-react-app. Step 1: You will first need to install CRACO and replace the default React-script with CRACO in package.json.  $ yarn add @craco/craco /* package.json */ "scripts": { -   "start": "react-scripts start", -   "build": "react-scripts build", -   "test": "react-scripts test", +   "start": "craco start", +   "build": "craco build", +   "test": "craco test", } According to the requirements of configuring the theme, the custom theme needs to use the Less variable override function similar to that provided by less-loader. We can introduce Craco-less to help load less styles and modify variables. $ yarn add craco-less Step 2: Modify the src/App.css file to src/App.less, and import antd.less file over antd.css in app.less /* src/App.js */ - import './App.css'; + import './App.less'; /* src/App.less */ - @import '~antd/dist/antd.css'; + @import '~antd/dist/antd.less'; Step 3: Create craco.config.js in the root directory to modify the default configuration. const CracoLessPlugin = require('craco-less'); module.exports = {   plugins: [     {       plugin: CracoLessPlugin,       options: {         lessLoaderOptions: {           lessOptions: {             modifyVars: { '@primary-color': '#1DA57A' },             javascriptEnabled: true,           },         },       },     },   ], }; Here, less-loader is modifyVars used for theme configuration. If you see a green button, you know the configuration is successful. Now you can customize the theme with your own set of colors using the tokens/variables provided. Ant Design Style Variables Below are some of the most commonly used generic variables. You can visit here to get details on all the available style variables. @primary-color: #1890ff; // primary color for all components @link-color: #1890ff; // link color @success-color: #52c41a; // success state color @warning-color: #faad14; // warning state color @error-color: #f5222d; // error state color @font-size-base: 14px; // major text font size @heading-color: rgba(0, 0, 0, 0.85); // heading text color @text-color: rgba(0, 0, 0, 0.65); // major text color @text-color-secondary: rgba(0, 0, 0, 0.45); // secondary text color @disabled-color: rgba(0, 0, 0, 0.25); // disable state color @border-radius-base: 2px; // major border radius @border-color-base: #d9d9d9; // major border color @box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),   0 9px 28px 8px rgba(0, 0, 0, 0.05); // major shadow for layers Ant design is a great UI tool with readymade components you can use and customize to build elegant user interfaces. No wonder it is the highest rated project on GitHub! If you liked this article and would like to get more such interesting ones delivered to your inbox, consider signing up to our newsletter. Drupal Planet Design Leave us a Comment   Recent Blogs Image How to Customize a React Theme Using Ant Design Image Accelerating Drupal Development with Drupal Console and Drush Image Everything you need to know about Website Accessibility Want to extract the maximum out of Drupal? TALK TO US Featured Success Stories 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 Upgrading and consolidating multiple web properties to offer a coherent digital experience for Physicians Insurance View all Case Studies [Less]