Matia @joyofcodedev Twitter profile | Pikagi

Pikagi

Matia

@joyofcodedev

4,777

Followers

326

Following

590

Media

1,474

Statuses

Web historian from 🇭🇷. ✍️ 🪄 ▶️ 🔴 💬

Croatia

https://t.co/BlWRpVBfV3

Joined January 2022

Don't wanna be here? Send us removal request.

Pinned Tweet

@joyofcodedev

Matia

1 year

I'm excited to release the best SvelteKit course I could make for everyone! 🔥 Aimed to give you confidence and understanding of web fundamentals — learn why SvelteKit is the Swiss army knife of web frameworks and how to build modern web apps. 🍿

Tweet media one

15

43

288

Last Seen Profiles

@chemtech123

@SturmKaydie

@ForLoveFilm

@muhammetkynr

@748AirServices

@Moe_FCB

@vpn_argentina

@MitologiaWsp

@SheCodeAfrica

@LocalDingus

@mitch_mosser

@briones_bryce

@ray_zn_

@InnaVarenytsia

@ry_as11

@Happysport_dk

@hogate_b

@JayJLoL

@HerreroBosco

@Taylin_Nelson

@takeshilol1

@CoachStokowski

@RickShielsPGA

@iamthemacarena

@Will_W_Welker

@ngrx_io

@SoxBearPayton

@xiaosigu

@designs_HR

@UK_Life_Science

@CaramellPrince

@UAlberta

@fayned

@Helloimmorgan

@banshee_xeno

@istaylearning

@joyofcodedev

Matia

10 months

I love the 62.5% font size trick in CSS because it makes working with rems easier.

Tweet media one

60

215

3K

@joyofcodedev

Matia

3 months

You can do blobs with CSS filter but it only works as black or white as far as I know but you can use SVGs to achieve the result you want.

28

167

2K

@joyofcodedev

Matia

29 days

prettier doesn't care 😂

Tweet media one

47

68

1K

@joyofcodedev

Matia

7 months

If you partake in the dark arts of JavaScript DOM manipulation use `Object.assign()` to create an element in one go. 🔥

Tweet media one

48

106

1K

@joyofcodedev

Matia

10 months

You can prevent layout shift from numbers by using tabular numbers in CSS which uses numbers of the same size supported by most fonts. 🔥

10

114

1K

@joyofcodedev

Matia

1 year

You don't need an extension for renaming HTML tags in VS Code if you enable linked editing. 🔥

22

111

839

@joyofcodedev

Matia

6 months

Here's a summary of Svelte 5: The Bonkers Fast Edition changes in a thread. 🧵 1) Runes are new way to declare reactive state in your Svelte apps backed by signals for fine-grained reactivity ( @Rich_Harris swears it's bonkers fast).

Tweet media one

19

56

567

@joyofcodedev

Matia

9 months

Tweet media one

9

47

444

@joyofcodedev

Matia

6 months

There's a new `<enhanced:img />` tag in Svelte for optimizing images available today. 🔥

Tweet media one

13

41

362

@joyofcodedev

Matia

3 months

Vue deserves more recognition.

Tweet media one

29

23

350

@joyofcodedev

Matia

1 year

I'm only starting to understand how powerful JavaScript generators are. Every example is either basic or complicated but one great use I found for them is describing an animation which gives you complete control.

11

21

320

@joyofcodedev

Matia

3 months

When I see a new Astro release.

Tweet media one

5

12

271

@joyofcodedev

Matia

11 months

The new Svelte site looks gorgeous! It's a long needed update and I love how it's organized and the docs are more fleshed out. It's not released yet but here's the preview .

Tweet media one

12

23

248

@joyofcodedev

Matia

6 months

After a day of exploration I came up with an actual declarative SVG animation timeline in Svelte I might love. 😍

7

21

242

@joyofcodedev

Matia

5 months

Senpai noticed me.

Tweet media one

6

5

234

@joyofcodedev

Matia

1 month

had no idea this was added to svelte 5

Tweet media one

3

14

226

@joyofcodedev

Matia

1 year

I'm honored to be appointed as a Svelte ambassador. 🙇 Besides showing how to make cool things with Svelte I love explaining how it works because you're not a <framework> developer but a developer and Svelte gets out of the way to learn fundamentals.

Tweet card media

What's new in Svelte: May 2023

New Ambassadors, a new ESLint plugin and a whole bunch of SvelteHack submissions

17

12

215

@joyofcodedev

Matia

9 months

I'm excited to release Animotion! 🪄 Animotion is a presentational framework for creating beautiful slides and visualizing ideas with code using Svelte. 🌟

9

36

213

@joyofcodedev

Matia

11 months

svelte is pretty good

7

9

200

@joyofcodedev

Matia

2 months

when go to definition opens the types

Tweet media one

3

11

202

@joyofcodedev

Matia

3 months

I wanted to implement search for my posts so I reverse-engineered how the search works and it's awesome. It's blazingly fast because it uses `flexsearch` to index a JSON file and they also use a web worker for instant updates and zero network requests.

13

15

201

@joyofcodedev

Matia

7 months

Runes are turning Svelte into React.

@Rich_Harris

Rich Harris

6 years

@threepointone @youyuxi 🤔🤔🤔🤔🤔🤔

Tweet media one

7

12

168

38

5

198

@joyofcodedev

Matia

6 months

I love doing serious computer science with JavaScript generators.

Tweet media one

16

12

197

@joyofcodedev

Matia

2 years

Someone posted this on /r/sveltejs and I can't even. 😂

Tweet media one

14

13

198

@joyofcodedev

Matia

1 year

In SvelteKit you might reach for `onMount` to use third-party libraries in the browser context because components run on the server and client — instead use reusable Svelte actions that don't run on the server but only when an element is created. 🔥

Tweet media one

Tweet media two

8

19

184

@joyofcodedev

Matia

10 months

If you know React learn Svelte in 30 minutes by watching the Svelte guide for React developers where I show the same React examples in Svelte: - Components - Logic - Events - Side effects - Derived state - Composition - Global state - Animations

Tweet media one

2

21

183

@joyofcodedev

Matia

8 months

Next video is going to be on how to use the View Transitions API in SvelteKit.

9

11

178

@joyofcodedev

Matia

2 months

I'm updating the Svelte UI libraries list and I want to know what other libraries you think deserve to be included on the list? 📝 ✅ Bits UI ✅ Flowbite Svelte ✅ Grail UI ✅ Melt UI ✅ Skeleton UI ✅ Svelte UX ✅ shadcn-svelte

19

15

175

@joyofcodedev

Matia

5 months

They fixed Svelte! Let's look at the new proxied state in Svelte and why it's one of the best changes to Svelte in years. 🔥

Tweet media one

9

13

172

@joyofcodedev

Matia

6 months

I made a short video explaining the recent Svelte changes which covers runes, fine-grained reactivity, events, and snippets. 🔥

Tweet media one

6

31

172

@joyofcodedev

Matia

1 year

Native page transitions in SvelteKit using the View Transitions API. 🪄

9

16

169

@joyofcodedev

Matia

6 months

Let's explore and make a todo app using Svelte 5 runes to understand how magical they are! 🔥

Tweet media one

5

24

162

@joyofcodedev

Matia

5 months

Svelte added native TypeScript support which means you can use types in your Svelte markup. 🔥

Tweet media one

8

18

162

@joyofcodedev

Matia

8 months

I'm working hard on a video explaining the upcoming Svelte changes and I'm so excited how much simpler things are.

21

1

162

@joyofcodedev

Matia

10 months

Why Svelte is better than React. 😂

Tweet media one

6

21

154

@joyofcodedev

Matia

11 months

I'm excited to release how to create beautiful presentations with Svelte using the HTML presentation framework Reveal.js and Tailwind CSS. 🍿 ✍️

Tweet media one

4

18

156

@joyofcodedev

Matia

5 months

Check out the new `$inspect` Svelte rune! You can log when a value updates, use a callback, or find the origin of the change, and it only works in development.

Tweet media one

15

20

151

@joyofcodedev

Matia

6 months

TypeScript in your Svelte template? 👀

Tweet card media

feat: native TypeScript support by Rich-Harris · Pull Request #9482 · sveltejs/svelte

Thought I'd have a quick look to see how feasible it would be to support TypeScript natively via acorn-typescript. Props to @gtm-nayan for the initial prototype, which this leans on heavily. Tu...

13

11

150

@joyofcodedev

Matia

11 months

Grail UI is an interesting headless component library for Svelte. Instead of components it uses Svelte actions to attach the necessary behavior to elements which gives you absolute control over the markup and styles.

Tweet card media

A library of accessible component primitives, actions and utilities for Svelte.

grail-ui.vercel.app

6

23

152

@joyofcodedev

Matia

6 months

People complaining about Svelte.

Tweet media one

0

5

145

@joyofcodedev

Matia

11 months

I love the idea of state machines but I don't want to use a library because I need something simpler most of the time. You can take the best ideas from state machines and do this in Svelte.

Tweet media one

11

7

147

@joyofcodedev

Matia

7 months

If you want to learn how to make a compiler framework like Svelte @lihautan has a great YouTube series you should check out because the best way to learn about something is to implement it yourself. 🔥 📺 📜

Tweet media one

3

17

143

@joyofcodedev

Matia

1 month

In Svelte 5 state is deeply reactive and can be changed upwards on accident from another component so props are readonly by default unless you're explicit and make them bindable.

4

15

136

@joyofcodedev

Matia

3 months

There's a new video up comparing the changes between Svelte 4 and Svelte 5. 👏

Tweet media one

6

11

136

@joyofcodedev

Matia

24 days

Fine-grained smoothly animated code blocks are coming to Animotion thanks to Shiki Magic Move. 🪄

5

6

135

@joyofcodedev

Matia

8 months

The Svelte ecosystem covers the entire JavaScript ecosystem because using JavaScript libraries with Svelte is easy since Svelte gives you control over the DOM without requiring any glue code. 🔥 📺 ✍️

Tweet media one

3

20

135

@joyofcodedev

Matia

2 months

Reminder that you should enable the Svelte inspector so you're able to open the code under your cursor from the browser at that location in the editor.

3

5

128

@joyofcodedev

Matia

1 year

SvelteKit 1.0 just got released! 🥳

0

13

133

@joyofcodedev

Matia

7 months

Svelte actions are the most underrated and powerful feature of Svelte which sets it apart from other JavaScript frameworks — in this guide we go from simple to progressively harder examples to master Svelte actions. 🔥 📺 ✍️

Tweet media one

5

14

129

@joyofcodedev

Matia

2 years

I love the web and humanity of people working on improving it on this blue rock hurtling through space. In case anyone missed the wonderful performance from @Rich_Harris at @thejsnation . 👏

1

20

128

@joyofcodedev

Matia

25 days

If you have a promise in Svelte you want to resolve client-side you can await the promise in your template and pass the prop. 🪄

Tweet media one

6

7

129

@joyofcodedev

Matia

10 months

Instead of using a SEO component in SvelteKit return SEO data from a page `load` function and access the data from `$page.data` inside the root layout.

9

9

127

@joyofcodedev

Matia

1 year

The new release of @threlte is a great example of what's possible with Svelte @SvelteSociety ! 👏 Instead of being a wrapper around @threejs it extends it using a preprocessor in a transition towards rendering. Give a follow to for updates. 🙏

Tweet media one

2

14

127

@joyofcodedev

Matia

8 months

Don't sleep on the Svelte inspector if you want to quickly find a component you're looking for in your editor. 🔥

7

18

123

@joyofcodedev

Matia

1 month

not bad for a simple FLIP animation library

3

7

127

@joyofcodedev

Matia

2 months

I tried every Svelte UI library.

Tweet media one

9

17

126

@joyofcodedev

Matia

2 months

working on the next video where I teach you developers how to not suck at visual design

6

0

123

@joyofcodedev

Matia

2 months

🍋 Enjoy this freshly squeezed post on how to make a blazing fast search in SvelteKit at no cost but electricity and maybe one network request.

0

9

124

@joyofcodedev

Matia

6 months

You can try the Svelte 5 alpha today with `npm i svelte @next `. There's also a SvelteLab template you can try. Rich said it's not ready for production, so that means ship it.

Tweet media one

2

13

125

@joyofcodedev

Matia

11 months

The next Svelte adventure in which I'm going to show you how to make beautiful presentations with ease looms on the horizon. 🪄

5

5

124

@joyofcodedev

Matia

1 year

The SvelteKit Enterprise Stack had some upgrades: - ⚡️ Supercharged forms that make working with forms easy - 💵 Stripe payments to meet revenue goals - 💌 Beautiful and consistent icons

Tweet card media

GitHub - joysofcode/enterprise-stack: 🔥 The SvelteKit enterprise stack

🔥 The SvelteKit enterprise stack. Contribute to joysofcode/enterprise-stack development by creating an account on GitHub.

6

12

124

@joyofcodedev

Matia

1 month

Make your CSS animations stand out by using the `linear()` easing function to create more complex animation curves that can mimic bounce and spring effects. You can provide an easing as JavaScript or SVG to the linear easing generator site and get the CSS output.

3

16

125

@joyofcodedev

Matia

5 months

I made a video looking at some awesome real world projects that use Svelte — if anyone asks if Svelte is used in production show them this video. 👏

Tweet media one

8

17

122

@joyofcodedev

Matia

1 year

Tired of setting up database and auth? 😮‍💨 You're going to shout "Ha Ha! Business" out loud with the SvelteKit enterprise stack. ✨ It sets up Prisma and Lucia auth with Skeleton UI and automatic class sorting for Tailwind to go blazingly fast and please investors.

Tweet media one

8

20

121

@joyofcodedev

Matia

1 year

I'm done writing and recording the SvelteKit Markdown blog video and plan on editing and releasing it tomorrow. Get ready for another Svelte cinematic universe romp. 🔥

Tweet media one

6

5

123

@joyofcodedev

Matia

6 months

I'm excited to release the video where we build a SVG animation library inspired by Motion Canvas using Svelte stores! 🔥 📺 ✍️

Tweet media one

4

19

122

@joyofcodedev

Matia

1 year

I'm working on updating the SvelteKit series and decided to share my progress here because I enjoy reading these sort of things. 🧵

Tweet media one

3

6

120

@joyofcodedev

Matia

8 months

Learn how Svelte runes change how reactivity works in Svelte by using signals for a more universal reactivity system. 🔥 📺

Tweet media one

4

24

120

@joyofcodedev

Matia

8 months

I'm going to make a video on using native page transitions in SvelteKit since this got merged a couple of minutes ago. 😄

Tweet card media

Add `onNavigate` lifecycle function, to enable view transitions by Rich-Harris · Pull Request #9605...

Fixes #5689. This adds an onNavigate lifecycle function. Presently, there are two navigation lifecycle functions — beforeNavigate and afterNavigate. beforeNavigate fires before any navigation, and ...

11

13

120

@joyofcodedev

Matia

1 year

If you're looking for courses on web development content has become free for everyone, so take advantage of it. 🔥 Thank you @getsentry and @stolinski for providing such a high quality resource for everyone. 🙏

Level Up Tutorials - Learn modern web development

Learn modern web development with Level Up Tutorials. We teach you the latest web technologies, frameworks, and libraries.

7

27

116

@joyofcodedev

Matia

9 months

Using @threlte to visualize GitHub contributions in the next video inspired by .

4

6

114

@joyofcodedev

Matia

1 year

Need to create a lot of items to do something in Svelte? I used `{ length: 40 }` for the `{ #each ...}` block to create 40 items which Svelte is going to iterate over. 🔥

Tweet media one

9

9

115

@joyofcodedev

Matia

3 months

I love how much more intuitive and predictable reactivity has become in Svelte 5 thanks to the $state and $derived runes making everything work as expected.

5

4

114

@joyofcodedev

Matia

8 months

I'm excited to release the new video on learning how to animate state and page transitions with ease using the View Transitions API with SvelteKit. 📺 ✍️

Tweet media one

5

11

110

@joyofcodedev

Matia

1 year

Learn how data weaves and flows through your SvelteKit app in this new video. 🍿 ✍️

Tweet media one

1

15

108

@joyofcodedev

Matia

1 year

I'm excited to release the comprehensive introduction to SvelteKit as the first video in the series! 😄 SvelteKit is the Swiss army knife of web frameworks for building resilient apps that run anywhere where JavaScript runs. 📺 ✍️

Tweet media one

5

15

110

@joyofcodedev

Matia

2 years

One of the great changes introduced in the last SvelteKit update is the API for interacting with cookies!

Tweet media one

4

11

112

@joyofcodedev

Matia

6 months

If you love great Svelte content subscribe to @benjamin41902 and let them know you want to see more. I love seeing more backend focused SvelteKit content and their excitement and energy are going to inspire you!

Tweet media one

6

4

110

@joyofcodedev

Matia

1 year

is an awesome modern Svelte playground you can use to learn and build things you can share with others.

Tweet card media

A REPL for SvelteKit projects: quickly spin up a SvelteKit project and share it with the world.

www.sveltelab.dev

@PaoloRicciuti

{🧪} Pablopang.sve‎Ite

1 year

🚨ANNOUNCING🚨 It's finally time to announce what @SarcevicAntonio and me were up to for the @SvelteSociety hackaton. Introducing SvelteLab: a supercharged svelte REPL, built with @stackblitz webcontainers and hosted on @vercel with SvelteKit, for SvelteKit by Svelte lovers 🧡

20

42

177

2

7

110

@joyofcodedev

Matia

6 months

I trust the Svelte team but I absolutely hate this. When Rich showed this in his talk I was confused — I don't understand how this was even considered to be a good idea and something Svelte developers would love. This is not Svelte and I hope we don't go this direction.

@puruvjdev

{PuruVijay}.svelte

6 months

React had to come up with an arbitrary `use` prefix to denote they own this specific function. Svelte came swinging out of the door with `new Class()` and bam!! Hijacked another JS feature/convention for themselves. And its far more performant as well! And it works amazingly,…

14

4

87

14

4

108

@joyofcodedev

Matia

3 months

In Svelte 5 components are functions but you can also bind the component the same as before and invoke the functions you have inside.

@joyofcodedev

Matia

3 months

In Svelte 4 a component is merely a class which you can bind and use to invoke functions defined in your component because Svelte adds a getter on the class when it encounters an export.

1

3

57

8

9

110

@joyofcodedev

Matia

5 months

If you think you have to use SSR with SvelteKit don't look elsewhere to make a SPA because I made a video that clears those misconceptions and explains: - SSR vs. CSR - When does using a SPA make sense? - Making a SPA

Tweet media one

2

14

109

@joyofcodedev

Matia

5 months

I love using explicit state because not only does it help against impossible states but you can style things or do animations based on the state you're in.

Tweet media one

5

5

109

@joyofcodedev

Matia

1 year

is the best auth library I tried for SvelteKit because it just works and has great docs but is so much more. Show love to @pilcrowonpaper and star the repo because their work is valuable. Watch the announcement video. 👇

Tweet media one

3

9

109

@joyofcodedev

Matia

2 months

I solved world peace by combining best parts of Tailwind and regular CSS. 🤝 I love Tailwind for repetitive styles and the first-class editor support but regular CSS for more complicated things instead of using Tailwind for everything.

Tweet media one

11

4

104

@joyofcodedev

Matia

5 months

Let's make a video converter with Svelte and FFmpeg in the browser — there's a lot of great lessons in this one! 🔥

Tweet media one

2

15

104

@joyofcodedev

Matia

2 months

I'm so excited because I figured out a way to run animations based on the highlighted code in Animotion which is huge.

2

3

106

@joyofcodedev

Matia

2 months

I made this cool slot machine text effect from but made it more dynamic using Svelte and CSS variables and it stops on the letter you want.

6

6

105

@joyofcodedev

Matia

11 months

I am so much happier with this API design. 😍 Using custom events you can get notified when a slide is active and run JavaScript code to take advantage of the entire ecosystem. Making slides with @sveltejs and @tailwindcss is an amazing experience.

2

6

101

@joyofcodedev

Matia

6 months

6) Snippets are a new feature which makes reusing markup easier and works like functions (Rich thinks slots are the worst feature of Svelte bringing up web components again 😂). Slots work the same and aren't removed. You can use them both.

Tweet media one

12

1

99

@joyofcodedev

Matia

7 months

The greatest tragedy of only knowing JavaScript frameworks instead of JavaScript is mistaking Svelte Runes for other frameworks instead of understanding that you can do anything.

Tweet media one

6

7

97

@joyofcodedev

Matia

2 years

The SvelteKit changes are live! Reminds me of waking up on a Christmas morning. 🎅 You can update your project or give it a spin with `npm create svelte`.

Tweet media one

8

14

98

@joyofcodedev

Matia

19 days

In JavaScript you can pass the `Boolean` function to the `filter` array method to remove bad values. 🔥

Tweet media one

9

3

100

@joyofcodedev

Matia

3 months

Thanks to proxied state in Svelte 5 you can enjoy deeply nested reactivity and don't have to clutter your code with getters and setters.

Tweet media one

3

12

98

@joyofcodedev

Matia

7 months

Today I learned if you register a custom event after using a Svelte action it won't fire until the next tick. I never thought the order was important until the mad scientist @PaoloRicciuti told me. 😄

Tweet media one

8

10

98

@joyofcodedev

Matia

29 days

Tweet card media

Svelte parses HTML all wrong · Issue #11052 · sveltejs/svelte

Describe the bug I'm a little shaken up. For as long as I've been programming, I thought that this... ...was shorthand for this: It turns out it's ...

2

4

96

@joyofcodedev

Matia

7 months

What a time to be alive! I think CSS Grid is the only layout system you should know. Flexbox is great but if you embrace Grid you end up writing less for more — it's not easier at first but eat the cost of learning and you're going to become more powerful than before.

@argyleink

Adam Argyle

7 months

CSS subgrid is in Chrome 117 now available in all stable browsers 🎉 Get a nice intro and tons of resources in this post on

1

62

280

16

2

96

@joyofcodedev

Matia

1 year

The next video in the SvelteKit series is out! I cover everything you need to know about SvelteKit routing including pages, layout, dynamic routes and show you the power of nested routes. 🍿 ️ ✍️

Tweet media one

3

16

96

@joyofcodedev

Matia

1 year

Learn how to deploy a full stack SvelteKit app with a database and authentication at no cost for your personal projects using server-side rendering and caching in the last part of the SvelteKit series. ✍️ 🍿

Tweet media one

2

14

94