Cutting following the atomic design, use of a UI KIT, tokens, “Block, Element, Modifier (BEM)” and a 5-1 architecture (vs 7-1, pages and themes folders)
Comparison of the difference between CSS and SASS variables.
Single directory components: implementation and advantages
Or SDC for short, is an implementation of Atomic Design in the Drupal core.
This allows you to create independent components embedding the HTML, CSS and JS code necessary for its proper functioning, similar to what most JS frameworks do. In short, it is used to create reusable bricks that can be nested inside each other. The implementation of SDC is simple, in a module or a theme, you only need a "components" directory that contains a free tree structure to structure the components. Each component must have its own directory (unique name!) containing:
A declaration yml file,
A twig file,
Assets (images etc.) in an assets directory,
A js file,...
Container Query: the revolution of Responsive Design
New in 2023/2024, this is a complement to media queries that applies at the element level.
They react mainly on the dimensions of the latter and not on those of the viewport.
This makes it possible to have independent "responsive" rules, which are therefore only linked to the component and which make it even more portable.
Web accessibility: optimizing the back office for all users
Presentation of accessibility, tools used to access an internal site when you are disabled. Drupal can be accessible, but this requires careful work on the HTML code generated by the theme: presentation of the main HTML tags to adapt. https://drive.google.com/file/d/12Y4lol ... sp=sharing
Drupal's Two Render APIs: Features and Complexities
Pierre Dureau, author of the ui_suite module, presented us how the two rendering APIs work in Drupal after a few reminders about render arrays, tables dear to Drupal (and we're not even talking about the Form API)! Simple to use but complicated to understand! There are indeed 3 types:
The elements (34 in number),
The Hooks theme,
Special cases , some of which are directly rendered (link, inline template) and others are wrappers to themes ("#theme" or "hook_theme"). The documented rendering process diagram (on the following page https://www.drupal.org/docs/8/api/rende ... r-pipeline ) perfectly illustrates this complexity!
Improving thumbnail generation: the crop & media module
DrDam presented us his module designed to improve the generation of thumbnails. The existing modules (crop, image styles) provided by the core and the community are ultimately quite limited if you want to render specific areas of an image in different contexts. With the standard and the Crop module, it is possible, but you will have to reupload the image for each context! And saudi arabia telegram data with the use of the media module, it complicates things even more. The Media contextual CROP Collection suite therefore offers all the necessary tools for this while keeping all the power of image styles and !
Technical conferences: new trends and tools
The rest of the conferences I was able to attend were more technical with knowledge dissemination. It was an opportunity to review certain subjects and learn a few things, in bulk below!
The fulltext search engine ElasticSearch is a good component to improve the user experience of a search. This conference focused on the internal functioning of the engine: the treatments applied during the indexing and search processes (analyzer, tokenizer and filter), the calculation of the relevance score of the results via the BM25 algorithm (in a simplified way!) with the notions of frequency of the searched term, of inverse frequency in all the documents.
Xdebug: The essential debugging tool for developers
The essential debugging tool for developers! If at first glance Xdebug is complicated to configure
(actually not so much when you know the little tricks?), it is a powerful tool that simplifies life.
It allows you to: