SithasoDaisy: Mashy Teaches TailwindCSS using b4x (with eBook)

[Mashiane]

Get SithasoDaisy for $15 here.

Welcome to the SithasoDaisy world.



Get the eBook
See it in action on Netlify or
See it from a FlipBook

SithasoDaisy is a library of components built on top of TailwindCSS and the DaisyUI frameworks to help you create WebApps, WebSites, Single Page Application (SPA) and Progressive Web Apps (PWA) with the power of the b4x programming language.

When it comes to developing anything that works on the internet browser, whether it is a WebApp or a WebSite, one has to use HTML (Hyper Text Markup Language), CSS (Cascading Style Sheet) and JavaScript (a dynamic programming language used for web development).


SithasoDaisy works on top of a programming language called b4x. It is not JavaScript, and for SithasoDaisy to produce web applications, a code transpiler is used. A transpiler converts source code from one programming language to another. For example, when one uses Flutter for web, they use a programming language called Dart. When they build their application, their source code is transpiled / converted to JavaScript for it to work on the interweb. There are many other programming languages that target JavaScript, the Top 10, being:

1. Scala.js
2. Haxe
3. Dart
4. Elm
5. Imba
6. Nim
7. ClojureScript
8. ReasonML
9. Kotlin
10. TypeScript

B4X is a set of programming tools that is developed by Anywhere Software that uses Visual Basic like syntax so that anyone who wants to, can create apps. The developed apps are able to run on Windows, Linux, Mac, Apple Phones, Android Phones and Arduino IoT devices, mostly from the same code base. The family product we will use here is called b4j i.e., Basic4Java. There is also b4a (basic4android), b4i (basic4ios), b4r (basic4arduino).

Our b4x to JavaScript transpiler is called BANano. It is penned by Alain Bailleul, that is the BA in BANano, whilst Nano, you guessed it right, nanotechnology. When creating your web projects with SithasoDaisy, one can use the Abstract Designer and or write b4x code. We will show you how. To show you an idea of the stuff we will be building, let’s take a look at this image, directly from the DaisyUI website.

.....

This is an extract from the eBook.

Happy Coding

Github Link: https://github.com/Mashiane/SithasoDaisyUI

SithasoDaisy TailwindCSS WebApps​

Subscribe to SithasoDaisy TailwindCSS WebApps and get a WebApp each month of the year.

Visit https://sithasoholdings.gumroad.com/l/vwaqj to activate your subscription.

Thank you so much.

 

[Rubsanpe]

Paid ;P

Rubén

 

[Mashiane]

Paid ;P

Rubén

Thank you so much Rubén, stay blessed. I am sending the pack now. My apologies for the delay, meetings.

 

[GanjaKyp]

Hi Mashiane, I sent the transfer 84B04831HF471843D

 

[Mashiane]

Hi Mashiane, I sent the transfer 84B04831HF471843D

Thank you so much, stay blessed. Will send you a link soon.

 

[Mashiane]

Lesson 1: Let's create a XyloPhone, using repetitive layouts

Source Code

We will use the AD to design our elements... this we will feed a moustache like structure. A user should hover and will play each key on numeric keypad.

Next, we define the keys to be added, load the template, then use that to build the UI

'create a schema with {{}} map fields at various places
    app.AddTemplateFromLayout("itemkey", True, Array("itemkeyl1", "itemkeyl2", "itemkeyl3"))
    'define list of items to add
    Dim xkeys As List
    xkeys.Initialize
    xkeys.Add(CreateMap("id":"k_1", "height":"100%", "key":"1", "color":"red", "alpha":"C"))
    xkeys.Add(CreateMap("id":"k_2", "height":"92%", "key":"2", "color":"amber", "alpha":"D"))
    .....
    'feed the template to the parent
    app.SetItemsFromTemplate(Me, "keylist", "itemkey", "", xkeys)

We then test the click events of the keys...

Play it on Netlify - click on a key to play. Will link numeric key play soon.

Xylophone WebApp

Sithaso Daisy Design System

sithasodaisyxylophone.netlify.app

 

[Mashiane]

User Boarding - Part 1

The aim is to create the whole use onboading process until user logs/signs in into the app. And also logs out.

This will cover

1. Sign In Screen
1.1 Form Validation
1.2 Prepend Icon & its background color
1.3 Append Icons & its background color
1.4. Clickable Links & Changing Color
1.5 Setting page background image
1.6 Checkbox & its color
1.7 Toggling password eye
1.8 Block Buttons & using hex colors
1.9 Flex Grid, aligning items, setting space between items

 

[Mashiane]

Use Boarding - Part 2

Source Code

This covers

2. Sign Up form. This shows when a user selects Sign Up (bottom right) on the screen above.
2. 1 Form validation.
2.2 Prevention of form submission by trapping the "onsubmit" event of the form.
2.3 Using HTML to design the Terms of Use and Privacy Policy in the label.

Check it on Netlify

 

[Mashiane]

 

[Mashiane]

Lesson 2: Final Presentation

• We add a glass effect to our modals
• We remove the overlay that shows when a modal is shown, making it transparent.
• We save and retrieve "remember me" user settings from localstorage.
• We sign in and show the app
• We sign off and go back to the sign in screen.

This will be converted to a b4xtemplate for multi-user apps.

 

[Mashiane]

SithasoDaisy API - now on SithasoDaisyDemo & Online

 

[Mashiane]

User Sign Up Process using PocketBase

[BANano] Using PocketBase (Firebase Alternative) for your Apps.

Hi there. I got to test the "Open Source backend for your next SaaS and Mobile app in 1 file" tech stack today. I must say its a very interesting project. I downloaded a single file from the PocketBase website, opened my command prompt. Executed "pocketbase serve" where I unzipped the file...

www.b4x.com

 

[Mashiane]

User Sign In Process using PocketBase

[BANano] Using PocketBase (Firebase Alternative) for your Apps.

Hi there. I got to test the "Open Source backend for your next SaaS and Mobile app in 1 file" tech stack today. I must say its a very interesting project. I downloaded a single file from the PocketBase website, opened my command prompt. Executed "pocketbase serve" where I unzipped the file...

www.b4x.com

 

[Mashiane]

Forgot Password & Password reset request

[BANano] Using PocketBase (Firebase Alternative) for your Apps.

Hi there. I got to test the "Open Source backend for your next SaaS and Mobile app in 1 file" tech stack today. I must say its a very interesting project. I downloaded a single file from the PocketBase website, opened my command prompt. Executed "pocketbase serve" where I unzipped the file...

www.b4x.com

 

[Mashiane]

Enhancing Documentation

Updates to the eBook are being made to ensue that using the Abstract Designer is moe concise.

As an example.. lets create a signature pad. This is what we will have when concluding. The first part of the documentation will show you how to do this with code like before.

The second part of the Documentation titled Abstract Designer, will provide you a guide of how to do the same.

1. Create a layout and add a SDUIPage with a name page, then set the listed properties. The listed props indicate only the ones that were changed and the rest are left as default.

2. Add a SDUIRow with a name SDUIRow2 inside the sduipage and set these properties.

As you have noted above, we indicate the component type and with the parent id, we can learn where to place it in our abstract designer and then set the props as indicated.

As all components support the abstract designer, for the provided examples, you will find these kind of guides to help reproduce the examples. The SithasoDaisy API has more details in terms of how each component is structured.

Happy coding..

 

[Mashiane]

SithasoDaisy: How to create a Client List Report in MS Word

Hi By the end of this, you will be able to: 1. Get a client list from a REST API database. For this case we will use a fake REST API fom https://randomuser.me/ 2. Load this client list to a SDUITable. We will use the abstract designer & then add columns to the table. 3. Export this client list...

www.b4x.com

 

[Mashiane]

#TailwindCSS & #DaisyUI CRUD Expense Tracker on Netlify using #PocketBase & #PocketHost.io using #b4x

 

[Mashiane]

TailwindCSS WebApps using b4x Version 1.16 eBook

The latest single source of truth, the eBook about SithasoDaisy is full of documentation that talks about the examples and guides including the API to bring you up to speed with TailwindCSS based SithasoDaisy.

Get the latest download for yourself now.

The download link is in the first post

Kind regards.

Mashy

 

[Mashiane]

SithasoDaisy #TailwindCSS - Saving Base64 Images to MySQL (Crud)

In this lesson one will learn a couple of things using the abstract designer.

1. Create a table and put it inside a col, inside a row.
2. Create a modal using sduirow and sduicol and using input components.
3. Adding, Edit, Update & Delete records in MySQL.
4. Using the data-source (master and slave)
5. Using a confirm dialog
6. Using the SDUIFileInput, get base 64 string of an image
7. Save image to database field & show image field to image.
8. Show records from db table to html table.





PS: Download code from same location...

 

[Mashiane]

PocketBase Multi-User Demo Update

This example has now been updated to use the latest version of PocketBase 0.80.

Please note this had breaking changes and the demo code had to be updated for new terminology and use case.

You can download the source code from same location.

I thank you.

PS: The library version is marked as 1.17