I am pleased to announce that Dave Long (longwave) has accepted our invitation to become a provisional Drupal core release manager!
Dave is based in the UK and has been contributing on Drupal.org for over fourteen years. He has been especially active in the development of Drupal 9 and 10, and is credited on over a thousand core issues. He is also a provisional member of the Drupal Security Team and has contributed significantly to core security advisories over the past six months. Dave is also a regular contributor to the Bug Smash Initiative which aims to improve Drupal by fixing known bugs, and was previously a maintainer of the Ubercart shopping cart for Drupal 7.
Dave first discovered Drupal in 2006 with version 4.7 and has used it ever since for numerous web projects as a freelancer and since 2014 as a senior developer at Full Fat Things.
Dave's leadership, patience, responsiveness, communication skills, and deep technical expertise in the Drupal core issue queue make him ideally suited to the role of a provisional core release manager. Dave will collaborate with the core release management team (catch, xjm, and quietone) on Drupal core releases, and with the Drupal Security Team on keeping core secure.
Please join me in welcoming Dave to the committer team!
When working with open-source technologies and software, it is even more important to simplify the effort needed to read and understand your code. A good naming convention helps you solve larger problems rather than focusing on syntax and style preferences during code reviews. Seasoned developers understand the significance of well-written and organized code when working with larger websites with tons of style elements.
BEM (Block, Element, Modifier) methodology is a widely used naming convention for CSS classes that is gaining popularity because of the ease of use it offers. The fundamental concept of BEM is component-based web development. BEM makes interface development easy and fast, especially when you’re handling large projects with complex UI. Let’s explore more on BEM and how it can work with the Drupal Emulsify Twig module.
The BEM methodology was introduced to help make CSS classes easier to access, understand and scale. It can accelerate the development process and helps build reusable components.
BEM includes three parts:
Blocks are the outermost and functionally independent component and are reusable. Examples: header, footer, sidebar, menu, content, etc.
Elements are child items of a Block. Each element can have only one block and cannot be used outside of it. Examples: menu items, list items, input field, etc.
Icon Image
A class name through which you can define the appearance, state, or behavior of a block or element. Examples: red, large, disabled, fixed, etc.
Icon Image
1. Boolean
You can check the condition of the boolean value and set it in a variable. This variable can pass as a modifier value.
2. Key-value
The structure of the modifier's full name with key-value will follow one of these patterns:
There are different naming schemes. All schemes have some common rules like:
The classic naming scheme is the default naming scheme of BEM.
Block-name__elem-name_mod-name_mod-val
block-name__elem-name--mod-name--mod-val
blockName-elemName_modName_modVal
BlockName-ElemName_modName_modVal
In Drupal, we can use the BEM Twig function with the help of the Emulsify Twig module. The BEM function lets you create BEM classes on elements in the components. Below mentioned are some BEM Twig extensions and their usage.
This creates:
If you want to add multiple modifiers, you can do so using an array.
This creates:
This creates:
This creates:
This creates:
This creates:
The Add attributes Twig function allows you to add HTML attributes to the elements of your components. Take a look at some Add Attributes functions below:
{% set additional_attributes = {
"class": ["icon-button", "icon-button__title"]
} %}
{% set additional_attributes = {
"class": bem("icon", ["small", "red"], "icon-button"),
} %}
BEM methodology is extremely useful to developers who want to write and maintain better quality code that can be easy to be handed over and understood. Every element has a purpose which can be easily identified by its name and which block it is coming from. When used right, you will see that using BEM can boost development speed. If you liked what you read, sign up for our weekly newsletter where we'll send you fresh, piping-hot insight right to your inbox!
Author: Ravikant
Meet Ravikant Kumawat, a front-end developer who loves to keep up with the latest technologies. When not working, he dives into his books and fancies a great vacation with his family from the hills of Kashmir to the beaches of Kanyakumari. Also, Ravi can be a great bank for exclusive secrets!
Drupal Drupal Development Drupal Planet Drupal ModuleLeave us a Comment
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 StudiesToday we are talking about CKEditor 5 with Wiktor Walc & Piotrek Koszuliński.
For show notes visit: www.talkingDrupal.com/372
TopicsWiktor Walc - ckeditor.com @w_walc Piotrek Koszuliński - ckeditor.com @reinmarpl
HostsNic Laflin - www.nLighteneddevelopment.com @nicxvan John Picozzi - www.epam.com @johnpicozzi Randy Oest - randyoest.com @amazingrando
MOTW CorrespondentMartin Anderson-Clutz - @mandclu Metatag
Previously discussed in episodes: 70 as MOTW (8y ago!) and mentioned in 31, 46, 137. And 185 Brief description: Allows your Drupal site to provide meta tags on content to implement SEO best practices and maximize online findability Brief history
Over the past few months, I've fielded a lot of minor styling requests, and as I work through each problem, I've almost always ended up with substantially less code than was there before. When I look through our portfolio of sites, most of them use tons of CSS to style all the various parts of a site -- and in many cases, the same styling reappears a bunch of different places. This leads to inconsistent styling, slow page loads, and more effort needed to make minor changes.
The Drupal Association would like to congratulate our newest At-Large board member:
When accepting her position, Nikki shared: “I am so grateful and feel truly honored for the opportunity to serve as your At-Large Board Member, and I pledge to bring all of my skills and talents to the role. For the next two years I’ll plan to work closely with the other board members, the association staff, the community, and all of you to make as many incremental improvements as possible. Part of the reason why I submitted my nomination is to make sure that people know that even without tremendous prior Drupal experience, it is still possible to make a measurable difference. I encourage you to help me and help our community -- and the code that helps all of our projects move forward — by getting involved at www.drupal.org/community. You belong to the Drupal community.”
Nikki is currently a Certified ScrumMaster® (CSM) and technical project manager and co-owner at Lullabot, a strategy, design, and development agency supporting redevelopment/new rollouts for Fortune 500 brands, government agencies, higher education, publishers, and enterprise technology companies.
She loves the web and learned to code in 1999. Since 2004, she has worked on 200+ websites implementing Drupal for clients and employers, most recently IBM, New Relic, Green America, the GIST Network for the U.S. Department of State, and Changemakers for Ashoka: Innovators for the Public. She’s been using Drupal since 2008, working with agile methods since 2014, and received the CSM certification in 2020. She likes to think that we all, as makers and creators, are able to use technology to solve problems, connect communities, and build more effective change-making teams.
She is honored to be the recipient of the 2018 and 2019 NTENny Award and the 2021 Hack for Good award. She keynoted the first annual Drupal Diversity Camp and helped organize the 2022 Non-profit Industry Summit at DrupalCon. She is currently onboarding into the Drupal Community Working Group with a current effort of reviewing and making suggestions on an updated Drupal Code of Conduct. She also currently acts as a Pantheon Hero. She recently moved with her family, including three cats, to the Midwest.
On behalf of all the staff and board of the Drupal Association, a heartfelt Drupal Thanks to all of you who stood for the election this year. It truly is a big commitment to contribution, the Drupal Association, and to the community and we are so grateful for all of your voices. Thank you for your willingness to serve, and we hope you’ll consider participating again in 2023!
788 voters cast their ballots out of a pool of 2617 eligible voters (30%). This is a 50% increase in voter participation from 2021, with an additional 145 eligible voters added to the voting pool. An additional 10% of eligible voters voted in this election from 2021.
Under Approval Voting, each voter can give a vote to one or more candidates. The final total of votes was as follows
Nikki Flores
372
Adam Bergstein
365
Mark Dorison
241
John Doyle
171
Esaya Jokonya
153
Bhavin Joshi
140
These voting results were unanimously ratified by the Drupal Association Board.
File attachments: nikki.jpeg