Testing Joomla 4 Alpha 7 Web Services #Mastermind

Details

Published: 14 March 2019

• joomla4
• web-services

Preparing the talk for Mastermind Podcast, these are my notes about Web Services quick testing 101:

• Step 1: Download and Install Joomla 4 Alpha 7
• Step 2: Notice that there two new plugin groups: api-authentication and webservices
• Step 3: Notice that there two new plugins: API Authentication - Basic Auth and Web Services - Content
• Step 4: J4 A7 has API Authentication based on Http Basic Authentication. So, yes, you have to configure .htpasswd to test the API. Ref: http://httpd.apache.org/docs/2.4/programs/htpasswd.html
• Step 5: Of course, if you are a little bit lazy, you can go straight to plugins/api-authentication/basic/basic.php, and change the authentication or create your own plugin.
• Step 6: Create an article and access the REST API for the Content component. For instance: http://mytest.com/api/index.php/v1/article/1

For more information:

• Joomla! Webservices Specification - https://joomla-projects.github.io/gsoc18_webservices/

To the moon!

Tailwind CSS has arrived at the Joomla scene

Details

Published: 26 February 2019

• Joomla
• Javascript
• ES6
• modern
• CSS

At the end of 2018, I promised myself to continue renewing the tools that I used to develop sites and apps. Tailwind CSS is positioned as a new utility-first CSS framework for rapidly building custom user interfaces. In search of new modern techniques for Joomla, Tailwind falls naturally in this category for Joomla.

Beyond the basic definition, we can discover the answer to the question What is Tailwind CSS? In the words of one of its creators, Adam Watham.

• CSS Utility Classes and "Separation of Concerns"
• Rebuilding Netlify with Tailwind CSS

It is all about the process

As shown in the previous article or the video, Tailwind offers a set of utility-oriented classes to create a user interface rapidly. It is a tool to compose a new design interactively.

To summarize, the framework offers:

• Text sizes, colors, and weights
• Border colors, widths, and positions
• Background colors
• Flexbox utilities
• Padding and margin helpers 

If Tailwind is a language, we can write it in Visual Studio Code with two handy extensions: Tailwind CSS IntelliSense and Tailwind Docs.

In Joomla terms as a Template

Tailwind CSS can be adopted in Joomla as a template. I have created a starter project, based on Webpack, and reproduced the old template of my blog on Tailwind to create a new template. Additionally, Roberto Segura has also created his template for Tailwind, based on Gulp.

• anibalsanchez/XT-TailwindCSS-Starter, a starter project, based on Webpack. The original Webpack project is tailwindcss/webpack-starter.
• anibalsanchez/XT-Tailwind-for-Joomla, my blog template on Tailwind
• phproberto/tailwind-joomla, a template for Tailwind, based on Gulp

How this new playground works

The video Rebuilding Netlify with Tailwind CSS shows from first-hand how the experience unfolds. So, you can start with anibalsanchez/XT-TailwindCSS-Starter, run npm install and npm run dev to start writing classes and changing the bare-bones prototype of this blog template. When you reach the final version, you npm run prod to produce the final assets.

The crucial part of the development process for Joomla is how to adopt this rapid cycle of prototyping inside a template in the context of a CMS. anibalsanchez/XT-Tailwind-for-Joomla packs the template for Joomla AND the starter project. In this way, you can install the template on the Joomla site, go to the templates/xttailwindcss folder, and run npm install and npm run dev. At every step of the customization, you can modify the files in the src folder, and then check them in the Webpackdevelopment server or in the Joomla output. Again, when you reach the final version, or you can deploy the changes to the site, you create the template assets with npm run prod.

In my view, the best part of the process is producing a prototype, move the files to a template, and then interpret the same design in the CMS context.

Notes from the road

• This is the first version of the template for Tailwind-Joomla, mainly guided to reproduce the original design of the blog in a new template. 
• It is optimized and running fine on mobile devices, but the original design has SVG backgrounds in several layers that are a nightmare. I plan to drop them as soon as possible.
• No template overrides. Joomla overrides are always discussed in the context of adopting a CSS framework. Now, with Tailwind, we can avoid overrides and apply CSS components to the regular Html output.
• No legacy code. This template does not include any script than what we need for Tailwind.
• A note of caution. If you plan to use this template, it is NOT compatible with any other script or extension, and you must check them one by one. 
• There is still room for speed improvements. However, the results are encouraging:

Next Steps

Tailwind CSS comes with a lot of new ideas and innovation. It's not even in the v1.0 (0.78 is the current version), and it looks like the new version is going to break compatibility in a big way to bring consistency, new features, and documentation. Adam is posting the progress preparing the first here: https://adamwathan.me/journal/. Exciting times are ahead!

A series of articles about Joomla modernization

Details

Published: 14 November 2018

• Joomla
• Javascript
• modern
• apps

In the October edition of the Joomla Magazine, I've started a series of articles about Joomla modernization. The first instance of the series is Talking about a Modern Joomla. 

The first article has been aimed to be a conversation starter about the general need for a change of vision, from how the CMS was originally designed and the new requirements of a modern website.

Now, the second article of the series is almost out!