SithasoDaisy: Mashy Teaches TailwindCSS using b4x (with eBook)

Mashiane · Nov 6, 2022

Get SithasoDaisy for $15 here.

Welcome to the SithasoDaisy world.

Check $5 WebApps

SithasoDaisy WebApps @ $5 Each

Hi there Disclaimer: These WebApps are hosted on Netlify and the back-end hosted on PocketHost (just for demonstration purposes). You will have to set up the SQLite Webserver on your own machine for a better experience. PocketHost is not recommended for production purposes as its slow compared...

www.b4x.com

Join on Telegram
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.

Topics

SithasoDaisy TailwindCSS Pocketbase Chatroom using SSE

SithasoDaisy TailwindCSS Pocketbase Chatroom using SSE

Hi Using Pocketbase subscriptions, we create a chatroom, trapping the SSE.

www.b4x.com

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

SithasoDocxTemplator: Creating MS Word Documents from Dynamic Templates in JavaScript

Hi the This was an interesting find: https://docxtemplater.com/, also its just so easy to use and understand. Below is my template. I am attempting to generate the API documentation for the SithasoDaisy ebook. This was easy to achieve using tables on the demo. And yes, I could fire up...

www.b4x.com

[SithasoDaisy] How to create a Web Push Notification Server with PocketBase SSE

Hi there By the end of this, you should be able to have your own Web Push Notification Server running. Below is an example of a notification coming from a cloud deployed PocketBase server. Related Topics...

www.b4x.com

SithasoDaisy: Click Events and event.PreventDefault

Hi It is safe, that in all _click events, you add an event.PreventDefault As an example... 'Close input dialog Private Sub mdlTasks_Cancel_Click (e As BANanoEvent) e.PreventDefault mdltasks.Hide End Sub This will prevent possible "jumps" of your app to undesirable places. Thanks...

www.b4x.com

[SithasoDaisy] Using EmailJS rest api to send emails

Hi there The purpose of this tutorial is showing the functionality of sending emails using EmailJS. This was discussed on this link: https://www.b4x.com/android/forum/threads/bananovuetifyad3-sending-emails-via-emailjs-rest-api.142767/#content Now we have a Sithaso class to do this. What...

www.b4x.com

SithasoDaisy TailwindCSS UI Toolkit: Q & A

Hi there NB: Where possible, please include a simple project that demonstrates your use case. Do you have any questions about SithasoDaisy UI Toolkit? You can shoot it here and we will oblige. Thanks in advance? Join on Telegram https://t.me/sithasodaisy Check $5 WebApps...

www.b4x.com

SithasoDaisy: Crud WebApp on Java Jetty WebServer with Pocketbase Back-End Hosted on PocketHost.IO

Hi there I am playing around with BANanoServer. So far so good. Ceveat: PocketHost.IO is slow compared to hosting PocketBase yourself. Watch this space.

www.b4x.com

Exploring the b4x UltimateWebView with SithasoDaisy, #TailwindCSS + #DaisyUI UI Toolkit

Hi This seeks to document my experiences of the UltimateWebView and the newest Sithaso Holdings UI kit, named SithasoDaisy, a TailwindCSS UI kit built on top of BANano + B4x. Well, this is my fist attempt of using a WebView with anything done with BANano, so its just an exploration to satisfy...

www.b4x.com

SithasoDaisy WebApps - Subscription Based @ $5 Per Month

SithasoDaisy WebApps @ $5 Each

Hi there Disclaimer: These WebApps are hosted on Netlify and the back-end hosted on PocketHost (just for demonstration purposes). You will have to set up the SQLite Webserver on your own machine for a better experience. PocketHost is not recommended for production purposes as its slow compared...

www.b4x.com

SithasoDaisy jSerial (Port) Communication WebApp Source Code

Hi there As it takes time to create, debug these projects, the source code for this WebApp is DonationWare. Find the PayPal link below. When donating, please indicate that it's for SithasoDaisy jSerial. https://paypal.me/anelembanga?country.x=ZA&locale.x=en_US I'm excited that this is going...

www.b4x.com

SithasoDaisy: PocketBase Database Schema & Data Sync Source Code @ $10.00

Hi Netlify Demo The purpose of this tool is to sync your pocketbase database instances. I have synced a database source residing on PocketHost to a local hosted database, ensuring these have the same schema and records...

www.b4x.com

SithasoDaisy: Project Management Unit Source Code @ $5.00

Hi there Netlify Demo Disclaimer: This webpp is hosted on Netlify and the back-end hosted on PocketHost (just for demonstration purposes). You will have to set up the SQLite Webserver on your own machine for a better experience. PocketHost is not recommended for production purposes as its slow...

www.b4x.com

[SithasoDaisy TailwindCSS] Navmenu for Desktop, Navdraw for mobile

Welcome. Sometimes we want the desktop version of a website to have a menu in a bar at the top without a side menu. Likewise for the side menu to appear on the mobile version without a menu in the top. You can use this code that I have applied to mine. Simple and effective. In addition, there...

www.b4x.com

Rubsanpe · Nov 8, 2022

Paid ;P

Rubén

Mashiane · Nov 8, 2022

Rubsanpe said:
Paid ;P

Rubén

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

Ilya G. · Nov 10, 2022

Hi Mashiane, I sent the transfer 84B04831HF471843D

Mashiane · Nov 10, 2022

GanjaKyp said:
Hi Mashiane, I sent the transfer 84B04831HF471843D

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

Mashiane · Nov 11, 2022

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

B4X:

'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 · Nov 12, 2022

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 · Nov 13, 2022

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 · Nov 13, 2022

Mashiane · Nov 13, 2022

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 · Nov 14, 2022

SithasoDaisy API - now on SithasoDaisyDemo & Online

Mashiane · Nov 16, 2022

User Sign Up Process using PocketBase

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

Hi there. Update: This class is based on the JavaScript SDK available here, https://github.com/pocketbase/js-sdk REST API calls are dont internal to the library, if you want to use pure REST API, use BANanoFetch, the documentation should be easy to follow. I got to test the "Open Source...

www.b4x.com

Mashiane · Nov 16, 2022

User Sign In Process using PocketBase

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

Hi there. Update: This class is based on the JavaScript SDK available here, https://github.com/pocketbase/js-sdk REST API calls are dont internal to the library, if you want to use pure REST API, use BANanoFetch, the documentation should be easy to follow. I got to test the "Open Source...

www.b4x.com

Mashiane · Nov 16, 2022

Forgot Password & Password reset request

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

Hi there. Update: This class is based on the JavaScript SDK available here, https://github.com/pocketbase/js-sdk REST API calls are dont internal to the library, if you want to use pure REST API, use BANanoFetch, the documentation should be easy to follow. I got to test the "Open Source...

www.b4x.com

Mashiane · Nov 23, 2022

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 · Nov 23, 2022

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 · Nov 25, 2022

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

Mashiane · Dec 1, 2022

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 · Dec 2, 2022

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 · Dec 5, 2022

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

SithasoDaisy: Mashy Teaches TailwindCSS using b4x (with eBook)

Expert

SithasoDaisy TailwindCSS WebApps​

Active Member

Expert

Active Member

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Similar Threads

SithasoDaisy TailwindCSS WebApps