Drupal Camp Spain is happening this Friday! This year is in Seville, at the Faculty of Computer Science, University of Seville. From Thursday 21st to Saturday 23rd, including not only a lot of talks but also a Business Day where companies or individual freelancers can meet with other Drupal agents and share experiences and ideas.

Image

Photo by Joan Oger on Unsplash.

Thanks!

A Drupal Camp is an event where a Drupal community can meet and exchange knowledge in real life, as opposed to the digital interactions of the rest of the year. It is the great…

It's an exciting time here at DXPR! With the release of DXPR Builder 2.4.0, we're underscoring our dedication to refining user experience based on the feedback from our esteemed community.

Easier User License Management

The User License Dashboard in DXPR Builder 2.4.0 has been revamped with two transformative features:

1. Selective User Exclusion: This newly-introduced feature allows users to exclude specific individuals from DXPR Builder editing. It's particularly valuable when you want to exempt admin accounts from being counted as billable users.
2. Stale Data Purging: Keeping your dashboard tidy is now a breeze! With the added ability to delete outdated user data from different environments, you can maintain a clutter-free workspace with ease.

Site Builders, We Heard You!

Our site builders will find joy in the updated process of page template creation. Extracting page templates from user templates has never been more streamlined. A more efficient workflow means you spend less time setting up and more time bringing your visions to life.

An Elevated Experience for Content Editors

To our content architects and editors, we’ve boosted the drag-and-drop functionality. Whether you’re placing elements in tight confines or navigating between sections, the experience is smoother than ever. Plus, we've ensured that the dropdown UI for breakpoint selection in Bootstrap 5 utilizes the radio widget, bringing added clarity to your editing process.

And More...

• Container reminders have been tweaked to auto-hide after 5 saves, minimizing unnecessary interruptions.
• We've rectified various bugs, ranging from profile editing challenges to script behavior inconsistencies, ensuring your experience with DXPR Builder is as seamless as ever.

One Quick Reminder: As you delve into the 2.4.0 update, please ensure to run drush updb or update.php due to a database schema adjustment.

For a comprehensive list of updates and enhancements, please refer to the official release notes on Drupal.org.

Our evolution in enhancing DXPR is driven by our collaboration with users like you. We're proud of the innovations in DXPR Builder 2.4.0 and are keen to learn about your experiences. Together, let's shape the future of DXPR!

When I first discovered Drupal, it was love at first click. I was fascinated by how easy it was to build powerful websites and digital platforms with its free, open source tools. One of the things that attracted me to the Drupal community from the beginning was its commitment to giving back. Every line of code, module, and feature created with this open source content management system is available for anyone to use – and there’s nothing Drupal enthusiasts love more than turning other devs into Drupal converts. Drupal is a community-driven movement focused on ensuring that everyone can tap…

Developers spend hours manually optimizing CSS, JavaScript, and other assets to make websites load faster and smoother. Not only is it time-consuming, but it can also be an error-prone process. The need of the hour is a digital savior, a tool that promises to do all the heavy lifting, leaving developers with more time to focus on creativity. Meet Gulp. What is Gulp Gulp is the unsung hero of developers that makes your coding journey smoother and your websites faster. Gulp is a JavaScript-based automation tool that helps you compile and execute tasks like compiling SASS/SCSS/LESS files, minifying and concatenating CSS and JS files, and much more! Why use Gulp Gulp is also popularly known as a task-runner and is very helpful for building any kind of web application. What can you expect from Gulp? Effortless SASS/SCSS/LESS to CSS compilation  Easily bundle, minify, concatenate, and optimize CSS and JS files Set your output to the destination folder as per your desired approach, for example, single file compilation or original folder structure compilation Saves effort and time by automating repetitive tasks The Workflow Install Node and Gulp Setup package.json Setup Gulp using gulpfile.js Write Gulp tasks What are Tasks A Gulp task is an asynchronous function that performs a set of actions like compilation of SCSS to CSS files, minifying CSS, JS, and HTML files, etc. Function taskName() {    // task to perform } Types of tasks Public A public task is accessible as an individual task. This is an exported task that can be accessed by the gulp command individually. function buildStyles() {    return src(‘scss/**/*.scsss’)    .pipe(sassGlob())    .pipe(sass())    .pipe(dest(‘build/css/’)); } exports.buildStyles = buildStyles;Private Unlike public tasks, private tasks are not exported or directly accessible as individual tasks. It has to be included within the parallel() or series() APIs. function buildStyles() {    return src(‘scss/**/*.scsss’)    .pipe(sassGlob())    .pipe(sass())    .pipe(dest(‘build/css/’)); }Gulp APIs Gulp APIs are used to perform a set of actions, like reading/writing the files, creating tasks, watching files, etc. Let’s discuss some key Gulp APIs for better understanding. src() src() is used to read the files from the file system. In other words, it’s used to provide the source path of files where we are making changes. src(globs, [options])dest() dest() is used to provide the destination path of the folder where we want to store the new files. dest(directory, [options])series() Combines the task functions into a single operation where the defined functions are executed one after another, in sequential order. series(...tasks)parallel() Combines the task functions into a single operation where the defined functions are executed simultaneously. parallel(...tasks)watch() Watches the sourced files and executes the tasks defined when real-time changes occur. watch(globs, [options], [task])Getting started with Gulp Now that we have a fair understanding of what Gulp is and can do, let’s move ahead with working with Gulp. Requirements In order to install gulp, we need to install Node first. You can download it from the official website of Node.js or you can download it using homebrew by using the following command: brew install nodeInstall Gulp Use the below command to install Gulp npm install --global gulp-cliThis command will install Gulp globally. Setup Gulp Please follow the below steps to set up your Gulp project: Step 1:    Browse to your theme folderStep 2:    npm init        It will prompt you to enter a few details which would be as follows: Package name  Default: current working directory Version  Default: 1.0.0 Description  Default: null Entry point  Default: index.js  Change it to gulpfile.js Test command  Default: null Git repository  Default: null Keywords  Default: null AuthorDefault: nullLicenseDefault: ISC $ npm install --global gulp-cli $ cd techx-gulp $ npm init package name: (techx_gulp) version: (1.0.0) description: Gulp.js setup for TechX. entry point: (index.js) gulpfile.js test command: git repository: keywords: author: Shashwat Tiwari license: (ISC)Step 3:     Verify the package.json dataStep 4:     Install dependencies $ npm install gulp gulp-sass gulp-concat gulp-sass-glob gulp-sourcemaps gulp-uglify --save-devYour package.json would look something like this. {    “name”: “techx_gulp”,    “version”: “1.0.0”,    “description”: “Gulp.js setup for TechX.”,    “main”: “gulpfile.js”,    “scripts”: {        “test”: “echo \”Error: no test specified\” && exit 1”    },    “author”: “Shashwat Tiwari”,    “license”: “ISC”,    “devDependencies”: {        “gulp”: “^4.0.2”,        “gulp-concat”: “^2.6.1”,        “gulp-sass”: “^5.1.0”,        “gulp-sass-glob”: “^1.1.0”,        “gulp-sourcemaps”: “^3.0.0”,        “gulp-uglify”: “^3.0.2”,        “sass”: “^1.64.1”    } }Setup gulpfile.js You can set up your gulpfile.js as demonstrated below: const { src, dest, watch, series, parallel } = require('gulp'); const sass = require('gulp-sass')(require('sass')); const sassGlob = require('gulp-sass-glob'); const sourcemaps = require('gulp-sourcemaps'); const concat = require('gulp-concat'); const uglify = require('gulp-uglify'); var paths = { sassSrc: 'scss/**/*.scss', sassDest: 'build/css/', jsSrc: 'js/**/*.js', jsDest: 'build/js/', } function buildStyles() { return src(paths.sassSrc) .pipe(sassGlob()) .pipe(sourcemaps.init()) .pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError)) .pipe(sourcemaps.write('./')) .pipe(dest(paths.sassDest)); } function buildScripts() { return src(paths.jsSrc) .pipe(sourcemaps.init()) .pipe(uglify()) .pipe(concat('scripts.js')) .pipe(sourcemaps.write('./')) .pipe(dest(paths.jsDest)); } exports.buildStyles = buildStyles; exports.buildScripts = buildScripts; exports.watch = function () { watch(paths.sassSrc, buildStyles); watch(paths.jsSrc, buildScripts); }; exports.default = parallel(buildStyles, buildScripts);Execute Gulp commands Check for available tasks $ gulp --tasks   Execute the default task $ gulp   Compile SCSS files to CSS $ gulp buildStyles   Compile js files $ gulp buildScripts   Watch all changes into SCSS and JS files in real time  $ gulp watch   You can always use the plugins that are best suited for your projects. Explore the list of gulp plugins and their usage Final Thoughts From transforming SASS into CSS with a single command to effortlessly bundling, minifying, and optimizing your code, Gulp simplifies the complex. It empowers you to be more efficient, creative, and productive in the ever-evolving landscape of web development. But remember, like any tool, Gulp's true power lies in your hands.  

Discover important security updates and changes happening in Drupal 7 and how you could benefit from upgrading to Drupal 10!

On today’s show we are talking about Single Directory Components in Drupal, How they differ from Web Components, and what are their benefits with guest Mateu Bosch & Mike Herchel. We’ll also cover Component Libraries: Theme Server as our module of the week.

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

Topics

• What are Single Directory Components?
• Where did the idea of adding Single Directory Components to Drupal come from?
• Where does support for this stand in Drupal Core? Fully supported? Still need a contrib module?
• How do they differ from Web Components? (Mike will take this one)
• How does Single Directory Components make Drupal Theme development easier?
• What is the point of creating a schema for an SDC?
• Can modules or themes override SDCs? How?
• Can SDC be integrated into component library systems like Storybook? How?
• Any other helpful contrib modules that enhance SDCs?
• Does this at all help a headless?
• How can someone get involved or help contribute to Single Directory Components?

Resources

Single Directory Components https://www.drupal.org/project/sdc JSON Schema https://json-schema.org/ SDC Display https://www.drupal.org/project/sdc_display SDC Styleguide https://www.drupal.org/project/sdc_styleguide Cl Devel https://www.drupal.org/project/cl_devel CL Server https://www.drupal.org/project/cl_server CL Generator https://www.drupal.org/project/cl_generator SDC Documentation https://www.drupal.org/project/drupal/issues/3345922 Mike’s blog https://herchel.com/ SDC Slack Channel (Components channel in Drupal Slack) #components https://drupal.slack.com/archives/C4EDNHFGS Drupal Board Elections https://www.drupal.org/association/board/elections

Guests

Mike Herchel - herchel.com @mikeherchel Mateu Bosch - mateuaguilo.com

Hosts

Nic Laflin - nLighteneddevelopment.com nicxvan John Picozzi - epam.com johnpicozzi Andy Blum - andy-blum.com - andy_blum

Module of the Week

with Martin Anderson-Clutz - @mandclu

Component Libraries: Theme Server

This module lets you use component libraries, like Storybook, in your Drupal project, without Twig.js!

Matt Glaman returns, joining Mark and Chris to discuss Retrofit for Drupal’s launch and future. Previously known as Drupal Bridge, Retrofit helps ease the transition out of Drupal 7. Matt outlines the power of Retrofit and its limitations, and explains the best way to incorporate it into your workflows.