livewire thread

content/tips/advanced-notifications.md

@@ -0,0 +1,15 @@
+---
+title: 'Advanced notifications'
+tweet_id: ''
+thread_slug: obscure-livewire-tips
+author_username: samuelstancl
+images:
+    - 'https://cln.sh/AAMo0d/download'
+created_at: 2021-04-09T17:24:56+02:00
+slug: advanced-notifications
+---
+
+This trait allows dispatching notifications:
+- on the current page
+- on the next page (after redirect)
+- from any part of your code: you can run Lean::notify() in an action class, a model method, or anywhere else — and it will be sent to the browser

content/tips/advanced-trait-design.md

@@ -0,0 +1,16 @@
+---
+title: 'Advanced trait design'
+tweet_id: ''
+thread_slug: obscure-livewire-tips
+author_username: samuelstancl
+images:
+    - 'https://cln.sh/YjzF2w/download'
+created_at: 2021-04-09T17:23:56+02:00
+slug: advanced-trait-design
+---
+
+Let's look at the same trait again. It does two interesting things.
+
+1. Livewire::listen() is superior to hydrate* and dehydrate* when you need access to specific parts of the lifecycle
+
+2. The `instanceof self` check scopes the listener to the component

content/tips/call-methods-from-javascript.md

@@ -0,0 +1,14 @@
+---
+title: 'Call methods from JavaScript'
+tweet_id: '1380545900020436996'
+thread_slug: obscure-livewire-tips
+author_username: samuelstancl
+images:
+    - 'https://pbs.twimg.com/media/EyivLICXIAEX-40.jpg'
+created_at: 2021-04-09T17:11:56+02:00
+slug: call-methods-from-javascript
+---
+
+Livewire's properties are extremely powerful, which often makes us forget that we can also call methods from the frontend.
+
+Livewire gives you a full component API. Use it!

content/tips/compose-components-using-traits.md

@@ -0,0 +1,16 @@
+---
+title: 'Compose components using traits'
+tweet_id: ''
+thread_slug: obscure-livewire-tips
+author_username: samuelstancl
+images:
+    - 'https://cln.sh/j3Jtnw/download'
+created_at: 2021-04-09T17:12:56+02:00
+slug: compose-components-using-traits
+---
+
+Traits are a powerful way to reuse functionality between Livewire components.
+
+They're generally better than component nesting, since that comes with more complexity and worse performance.
+
+Next up: Advanced trait examples

content/tips/custom-response-effects.md

@@ -0,0 +1,14 @@
+---
+title: 'Custom response effects'
+tweet_id: ''
+thread_slug: obscure-livewire-tips
+author_username: samuelstancl
+images:
+    - 'https://cln.sh/YjzF2w/download'
+created_at: 2021-04-09T17:22:56+02:00
+slug: custom-response-effects
+---
+
+You can add custom data to response effects. Those are separate from component data, and act more like events.
+
+You can use them when you have some JS code that looks at Livewire responses, and when you want more control than dispatching browser events

content/tips/livewire-readonly-properties.md

@@ -0,0 +1,18 @@
+---
+title: 'Readonly properties'
+tweet_id: ''
+thread_slug: obscure-livewire-tips
+author_username: samuelstancl
+images:
+    - 'https://cln.sh/oG5FqU/download'
+created_at: 2021-04-09T17:28:56+02:00
+slug: livewire-readonly-properties
+---
+
+They're a great way to make your components safer and faster.
+
+Say you have a component for editing some resource.
+
+You enforce the ACL in mount().
+
+But if the user could change the currently edited resource, you'd need to enforce ACL on *all* requests!

content/tips/replace-state-with-a-custom-directive.md

@@ -0,0 +1,14 @@
+---
+title: 'Replace children with a custom directive'
+tweet_id: ''
+thread_slug: obscure-livewire-tips
+author_username: samuelstancl
+images:
+    - 'https://cln.sh/w6vdHe/download'
+created_at: 2021-04-09T17:27:56+02:00
+slug: replace-children-with-a-custom-directive
+---
+
+Imagine that you have a nested component that depends on the parent state. You don't need to sync child state into parent, you just want to replace the child when the parent state changes.
+
+You can use my custom directive for that.

content/tips/share-state-using-sprucewire.md

@@ -0,0 +1,15 @@
+---
+title: 'Share state with Sprucewire'
+tweet_id: ''
+thread_slug: obscure-livewire-tips
+author_username: samuelstancl
+images: {}
+created_at: 2021-04-09T17:26:56+02:00
+slug: share-state-with-sprucewire
+---
+
+If you have two components that share some state, and you'd like to keep them in sync in a more effective way than dispatching listeners back and forth, check out Sprucewire.
+
+It works almost like Vuex for Livewire.
+
+https://twitter.com/_joshhanley/status/1362646916333334528

content/tips/use-wire-entangle-instead-of-entangle.md

@@ -0,0 +1,14 @@
+---
+title: 'Quick tip: Use $wire.entangle() instead of @entangle'
+tweet_id: ''
+thread_slug: obscure-livewire-tips
+author_username: samuelstancl
+images:
+    - 'https://cln.sh/tjz7SC/download'
+created_at: 2021-04-09T17:25:56+02:00
+slug: use-wire-entangle-instead-of-entangle
+---
+
+It's good to get into the habit of using $wire, since it provides a full communication layer for your Livewire component.
+
+It also doesn't run into issues when you use it inside single quoted attributes.

content/tips/use-wire-replace.md

@@ -0,0 +1,14 @@
+---
+title: 'Use wire:replace'
+tweet_id: '1380542122105921536'
+thread_slug: obscure-livewire-tips
+author_username: samuelstancl
+images:
+    - 'https://pbs.twimg.com/media/EyirvPAWQAIN6ib.jpg'
+created_at: 2021-04-09T16:11:56+02:00
+slug: use-wire-replace
+---
+
+As you know, Livewire sometimes runs into painful DOM diffing issues. They can usually be solved with simple workarounds, but sometimes those workarounds get quite complex.
+
+So I built a package that adds a `wire:replace` directive, telling Livewire to replace an entire chunk of the DOM, instead of trying to diff individual changes.