qtguru:


I replied,

Replied you sir.

So today at the office, we are working on an AppManager Portal, the old UI is really ugly, and every new project , I like to start with a new UI, because that often encourages proper care when it's fancy.

if you check our company site

www.olisystems.com

it's so clean, so I want to create a new Shell in Svelte for our previous app, it will have a structured CSS with CSS variables, so we can easily whitelist for clients, then create custom Svelte component.

I will share what I am trying to design for the Admin, I will share Before and after

@qtguru CSS bug on safari. Looks okay on Chrome though

DrLevi:
@qtguru CSS bug on safari. Looks okay on Chrome though

all you mac people

I will raise It up.

qtguru:


all you mac people

I will raise It up.

Lol... leave us o

Don't you own a Mac? I would expect anyone who works with cross-platform applications(React Native) to own one as your user base is most like more iOS users than android

qtguru:


Yes I don't mind, my email is on my website, I don't want to be blocked, send a mail, I don't mind, I have some stuffs. You have basic javascript and React knowledge?

Lol... I don't want to be blocked.

DrLevi:

Lol... leave us o

Don't you own a Mac? I would expect anyone who works with cross-platform applications(React Native) to own one as your user base is most like more iOS users than android

I've had 2 Macs and given both out, I've always struggled with Macos and the touchpad, never say never, if I ever do IOS I will get one

niel63:


Lol... I don't want to be blocked.

nairaland spambot hits me a lot

qtguru:


nairaland spambot hits me a lot

No be only you bro. And it's so so annoying. Sometimes I think that stuff is targeted.

So I did some design in Figma for the Portal,

Before vs After ??

The irony of life, I will be studying DSA and Discrete Math but at work it's HTML and JS/Svelte, anyway I built an editable component for the new UI, all in Tailwind and PostCSS.

Watch this video to see how the Svelte Compiler works, trust me 2 years writing Svelte, it's not JS Knowledge


https://www.youtube.com/watch?v=eGHGJyxJAMk

Svelte is really simple to write, I can't believe I am building a SPA this simple, just with createDispatcher, props and the update, you can easily build a reactive application.

All the UI Components are bound to props and the stores, so based on the data will determine what UI to render, we keep the mappings of the UI as a JSON.

{
type: 'name of Widget',
props: {}, the props are passed to the Widgets as constructor params which contains X,Y , W, H . so we only just loop on the JSON and dynamically instantiate the component during runtime, if the property changes, it re-runs the code to reflect the update. That's how you build a Drag and Drop Widget Component, this task allowed me to get deeper into Mouse and the HTNML5 Drag and Drop API.

Because we have an operation involving dragging one of the components into the main screen. if you check MDN it covers DropZone and DataTransfer

I worked on this custom component, I saw the idea on Dribbble and copied it, initially it was a floating fixed form, but a team-mate suggested making each list into that edit form.

won't be a great idea if Svelte Compiler was done in C++ , after all there are JavaScript AST in C++ out there.

I made it into a custom component so we can reuse it, the code duplication in this project is insane, no Code coverage.

A List of items, that can be created in memory and then sent as batches to the API and can be managed.

Makes sense, the component-driven approach saves code duplication.

I hope JetPack Compose feels this way



I used named slots to swap between editable and saved mode and dispatcher for Custom Events.

Such simple design, nothing like complicated State management, Svelte uses a simple Pub/Sub store.

I have a major tasking coming soon, migrate 2 Svelte projects to TypeScript One project has close to 50k Lines of Code, and the other is not much, I plan to explore the idea of an AST Tool that parse JavaScript and see how we can write to TypeScript but in Svelte.

Each Prject has like 400+ files and a large code, I've written code on this base for like 2 years, and it was alot to understand.

I will update more here

qtguru:
I have a major tasking coming soon, migrate 2 Svelte projects to TypeScript One project has close to 50k Lines of Code, and the other is not much, I plan to explore the idea of an AST Tool that parse JavaScript and see how we can write to TypeScript but in Svelte.

Each Prject has like 400+ files and a large code, I've written code on this base for like 2 years, and it was alot to understand.

I will update more here

Have you considered sveltekit with its new directory routing system?

Makes it easier to scale and manage.

With server and client hooks, and a lib/server that is never exposed to the client side and the new page/page.ts/page.server.ts/layout.ts files, everything is in its place and a place for everything

After spending close to 2yrs w/ Svelte, i still hate it.

qtguru:
I have a major tasking coming soon, migrate 2 Svelte projects to TypeScript One project has close to 50k Lines of Code, and the other is not much, I plan to explore the idea of an AST Tool that parse JavaScript and see how we can write to TypeScript but in Svelte.

Each Prject has like 400+ files and a large code, I've written code on this base for like 2 years, and it was alot to understand.

I will update more here

Sorry if I digress a bit I know u are a martial artist and I will like to enroll before June ending please which one are you into?
2. How is the training schedule?
3. How did you locate a dojo near you?
4. How did you fit the training schedule with your job

peterincredible:

Sorry if I digress a bit I know u are a martial artist and I will like to enroll before June ending please which one are you into?
2. How is the training schedule?
3. How did you locate a dojo near you?
4. How did you fit the training schedule with your job

Lol I no be martial artist o, dem go beat me, but try SilverAlliance BJJ the fee is kinda pricey, I'm sticking with boxing first. The price was too much, but I have a friend who is a confirmed Martial Artist, I can link you guys up

QuoteJustOnce:
After spending close to 2yrs w/ Svelte, i still hate it.

Come to the church of sveltekit.

Our approach to the gospel is a bit different.

Looking forward to seeing you on our evangelism team very soon

truthCoder:


Come to the church of sveltekit.

Our approach to the gospel is a bit different.

Looking forward to seeing you on our evangelism team very soon

For today, I am a proud atheist

qtguru:
This is the Application built in Svelte one thing you need to know about Svelte

1. routes on the browser are mapped to folder like Nuxt.JS
2. Script , Style and template is all that is required for a Svelte Component
3. Stores are observable
4. Svelte runs with Sapper which is SSR in nature
5. Svelte is reactive, it is built with reacitivty in mind
6. Svelte has no VirtualDOM
7. Svelte is not complex as React, by far the easiest framework to get into

Here is a screenshot of what Svelte Code looks like

Is this svelte or svelte kit?

I decided to resurrect this thread, and anyone can contribute especially if you are into Chrome extension. It is the Svelte Development extension for Chrome.

I think I might be close to fixing this bug, I will drag CJ on this

qtguru:
I think I might be close to fixing this bug, I will drag CJ on this

Hailings boss