- 6
- 31 988
Antonio Sarcevic
Приєднався 26 вер 2013
I'm Antonio Sarcevic and I want to share how to create cool stuff on the web platform with simple and easy to learn methods and tools!
I personally love to program User Interfaces in HTML, CSS, TypeScript and SvelteKit. Also love designing User Interfaces in Figma.
Learn more on sarcevic.dev!
I personally love to program User Interfaces in HTML, CSS, TypeScript and SvelteKit. Also love designing User Interfaces in Figma.
Learn more on sarcevic.dev!
Simple native-like App in SvelteKit!
This guide shows how to create a simple installable and offline-first web application using SvelteKit and workbox-precaching. It only takes less than ten lines of code for the Service Worker!
With this, you might not need a native App, or hybrid using Electron, React Native, Flutter, Tauri, Cordova or Ionic! Just build one web app that works everywhere, available from your home screen or app launcher and even offline. SvelteKit and workbox-precaching pair nicely to take the work off your hands.
🖼️ App Icons: www.sarcevic.dev/offline-first-installable-pwa-sveltekit-workbox-precaching/app-icons.zip
✂️ Code for copying and pasting: github.com/SarcevicAntonio/offline-first-pwa-sveltekit-workbox-precaching#readme
📝 Blog Post: www.sarcevic.dev/offline-first-installable-pwa-sveltekit-workbox-precaching
Timestamps:
00:00 Intro
00:36 Create SvelteKit App
01:08 App Icons
01:18 Web App Manifest
02:19 Service Worker
04:01 Define NODE_ENV
04:23 Notes on Offline Data
04:47 Prerender Pages
05:00 Check the App in prod
05:21 Useful Tips when working with Service Workers and Caching
05:59 Outro
Special thanks to my Schapsi 💖
With this, you might not need a native App, or hybrid using Electron, React Native, Flutter, Tauri, Cordova or Ionic! Just build one web app that works everywhere, available from your home screen or app launcher and even offline. SvelteKit and workbox-precaching pair nicely to take the work off your hands.
🖼️ App Icons: www.sarcevic.dev/offline-first-installable-pwa-sveltekit-workbox-precaching/app-icons.zip
✂️ Code for copying and pasting: github.com/SarcevicAntonio/offline-first-pwa-sveltekit-workbox-precaching#readme
📝 Blog Post: www.sarcevic.dev/offline-first-installable-pwa-sveltekit-workbox-precaching
Timestamps:
00:00 Intro
00:36 Create SvelteKit App
01:08 App Icons
01:18 Web App Manifest
02:19 Service Worker
04:01 Define NODE_ENV
04:23 Notes on Offline Data
04:47 Prerender Pages
05:00 Check the App in prod
05:21 Useful Tips when working with Service Workers and Caching
05:59 Outro
Special thanks to my Schapsi 💖
Переглядів: 8 168
Відео
Svelte makes Drag And Drop API easy!
Переглядів 22 тис.Рік тому
This video shows how to create a minimal draggable and dropzone Svelte Action using the browser native Drag and Drop API. It only takes about 80 lines of code for the Svelte Actions. Svelte Actions are functions that make a node and hook into their lifecycle, making it easy to compose DOM work in components. Boilerplate Kanban Board without Drag and Drop for coding along: www.sveltelab.dev/rl7w...
{🧪} SvelteLab Launch Teaser
Переглядів 542Рік тому
SvelteLab is a supercharged REPL for Svelte. Instantly spin up a new SvelteKit project and share it with the world. 🧪 Try it now: sveltelab.dev/ ✨ Features: - 🌗 Light / Dark Mode - 🎨 Command Palette: Ctrl / CMD Shift P - 🧹 Code Formatting - 📒 Templates (TypeScript, Tailwind, mdsvex) - 📄 SvelteKit File Icons - 🛤️ SvelteKit Route Generation - ➕ Svelte Add - 📦 Install Packages - ⌨️ Vim Keybindings...
![Creating a Web App with Imba - The friendly full-stack language [#CozyCoding:001 Highlights]](http://i.ytimg.com/vi/DRr73IJJMH4/mqdefault.jpg)
Creating a Web App with Imba - The friendly full-stack language [#CozyCoding:001 Highlights]
Переглядів 2492 роки тому
This i s a cut up version of the full stream I did a couple of weeks ago. That stream was full of dead air, so I had to chop it up to be more concise. Watch the full stream here: ua-cam.com/video/H4RQ9HyX4UU/v-deo.html Check out Imba imba.io/ (and check the free tutorial course on scrimba too!) Visit my site www.sarcevic.dev/ Follow me on Twitter SarcevicAntonio
![Creating a Web App with Imba - The friendly full-stack language [#CozyCoding:001 FULL STREAM]](http://i.ytimg.com/vi/H4RQ9HyX4UU/mqdefault.jpg)
Creating a Web App with Imba - The friendly full-stack language [#CozyCoding:001 FULL STREAM]
Переглядів 3852 роки тому
I might be getting into web dev content creation, and felt like starting with a stream about exploring / using a cool programming language I found. I started by creating a little mockup to help me visualize the app I want to build, and then got my hands dirty implemeting it with Imba, a compile-to-js language that has some pretty neat syntax and features build in. At the end I deploy the app so...
Nice, but most people need apps that are actually online... How would you do that?
Was bewirkt das '@const' im svelte/html code?
Amazing! 🔥
This should work ... And it didn't This is the most "Programmer thing" I can think of
You've said that you want to create simple things, on the Web platform. Unfortunately, these simple things will not take us anywhere. Please do a useful series, that can teach us to build massive Projects with Svelte and SvelteKit-- when you do find the time for it. WHAT WOULD I WANT? Here ( ua-cam.com/video/z1UMKqMN3VQ/v-deo.html ) is a series on building a Facebook clone with the MERN Stack (MongoDB, Express, React and Node) I will need you to do the same thing that this person did, and show us how to build the same thing (Facebook clone) with Svelte, SvelteKit and Postgres database. Regards.
Very cool, unfortunaltely the DnD API does not work on mobile :c. I don't want to use another library, I just want to be happy
I tried this on Svelte 5 with runes, smooth like butter. Nice video!
Where would u advise do i learn svelte 5?
Does your "update" function actually work? Unless there is some svelte magic going on, the functions created with the initial value of `state` (like handle_dragstart) would create a closure and never get the updated value when you reassign the variable like this. Am I missing something here?
lifesaver, this is so useful!
is there any mainfest config for multiple notification setting like native apps for pwa ?
Does this work with re-ordering between the items in the same column?
Nice tutorial, thank you. May I add that I'd rather use the API function "dispatchEvent" on the node object to emit a "drop" custom event with the required data. node.dispatchEvent(new CustomEvent('custom_drop', { detail: data })); Then, the usage would be more idiomatic by writing <li class="column" use:dropzone on:custom_drop={onDropHandler}>(...)</li> My two cents ;-)
Straight to the point! Awesome!
Finally a tutorial that doesn't use svelte-dnd-action... thanks a lot!!!
Just incase someone implementing this on Tauri + Svelte set the "fileDropEnabled":false .
The brevity is bewilderingly beautiful !
Haha thank you that was my main focus around the creation of this video 😁
I've been looking for offline svelte kit content for a while now. Does anyone have any recommendations of extra resources, reading I might do on this topic?
I also really enjoy using imba, thank you very much for the content. How can I put tabs or spaces in my VScode, using dot as seen in the video? Do you use plugin for scrolling or vim?
To show whitespace (tabs and spaces) visibly in vscode I use this setting: "editor.renderWhitespace": "boundary", I'm not sure what you mean by scrolling. I don't use vim, but have some scrolling-related settings: "editor.smoothScrolling": true, "terminal.integrated.smoothScrolling": true, "workbench.editor.scrollToSwitchTabs": true, "workbench.list.smoothScrolling": true,
@@SarcevicAntonio Thank you so much, I really appreciate it.I'll be watching for new videos.
Very informative! I thought of something else for DND, not "drag and drop" lol
REALLY wanted this, thanks.
I want more details about it because i want to run one app offline and sync with network when get internet access back
great, and we watting for handling data offline with couchdb,pouchdb!!!
Very interesting! Thank you
I needed this information so bad 🤣👌
Great video, very helpful! How would you handle the drag and drop on touch devices e.g. smartphones or tablets? May you do a video of that as well?
Exactly what I've been looking for! Thank you....
Knowing how to connect this kind of app to FireBase would be extremely valuable🙏
There are many svelte firebase tutorials out there. You initialize firebase on you main layout and use it in you components basically
Very impressive, Antonio -- well organized and presented, and it expands my understanding of how/when to use actions. Thanks.
Excellent video, great work !
Please make a CouchDB video about offline apps :)
Awesome! Thanks
This is what I'm looking for! more samples please. Thanks!
second this
Wow
Can someone explain to me 5:10? I am coming from C++ and I am a JS noob. It seems to me that changing the "state" variable after the draggable() function has returned (via update()) it will also affect the data seen inside handle_dragstart() after it is called as an event listener at a later time. Is that correct? So the "state" variable not only outlives the draggable() function but it also has effects on the nested functions? Does this behavior/pattern have a name in JS so I can read up on it?
I think this is called a closure.
@@trzcin5724 Thank you. I had just read up on Closures on MDN. I'll give a more detailed comment below this one.
For any other noob wondering: You must read on what "closures" are in Javascript and how they behave in that context. MDN has a very good article on them. In short and very simple words(mostly in C++ speak): Closures( lambdas in C++) capture the variables in their surroundings by reference AND extend their lifetime. Hence, a variable captured in one closure can be updated in another closure that has captured the same variable even if that variable was local to the surrounding scope.
How do you think this approach stacks up against the Vite PWA plugin?
Vite Plugin PWA generates a Service Worker and Manifest for you via configuration. If you don't want to deal with the Service Worker and Manifest yourself and want to benefit from the extra features (like update prompt and automatic reload), it's a solid option! For me personally, it felt like too much magic and overhead, as I did not fully understand how it worked and what it does behind the scenes. The docs are a bit hard to understand for me. With the approach from the video, we are in full control and know exactly what our Service Worker does. Since SvelteKit already provides the $service-worker module, it makes integrating with workbox modules like workbox-precaching super straightforward!
@@SarcevicAntonio Wow ! It would be great if you could present these specific arguments in a standalone video (or maybe link to a post). I've always had a weird feeling about the vite pwa plugin (and even worse, the more idiosyncratic, insufficiently documented and always-somewhat-out-of-date "@vite-pwa/sveltekit") and had a hard time figuring out what the purpose of it all was or how it would compare do a more hands-on approach like I was used to doing in Vue 5 years ago. Judging by the likes on your reply, I'm not alone. I wasn't even aware that Sveltekit provided its own service worker module and now that I've read your comment, I'm even more confused as to what is the value provided by @vite-pwa/sveltekit. A video or post where you compare the vite-plugin-pwa or @vite-pwa/sveltekit workflow to the one you prefer ($service-worker with a la carte workbox modules) would be amazing !
Cool! I subscribe
svelte actions are so powerful. Thanks for sharing.
Cool, thanks!
Amazing! Thanks for sharing!
more about svelte 😍
On it 😁👍
great video
Nice!
Very well explained!
What VSCode theme are you using? Joking aside, great video!
Hype
@@codygriffith1693 🥳
😁 💾
🔥
Imba is awesome. Good content. Sub👍🏻
I agree and thank you 😁🤙