diff --git a/README.md b/README.md index 5aee51c..72d4f7a 100644 --- a/README.md +++ b/README.md @@ -6,14 +6,14 @@ A curated list of [Alpine](https://github.com/alpinejs/alpine) resources. -* [Official Resources](#official-resources) -* [Articles](#articles) -* [Podcasts](#podcasts) -* [Videos & Screencasts](#videos--screencasts) -* [Examples](#examples) -* [Extensions & Plugins](#extensions--plugins) -* [UI Frameworks](#ui-frameworks) -* [Other](#other) +- [Official Resources](#official-resources) +- [Articles](#articles) +- [Podcasts](#podcasts) +- [Videos & Screencasts](#videos--screencasts) +- [Examples](#examples) +- [Extensions & Plugins](#extensions--plugins) +- [UI Frameworks](#ui-frameworks) +- [Other](#other) @@ -21,86 +21,87 @@ To contribute, fork this repository, add your new resource and submit a PR. For ## Official Resources -* [Alpine Website](https://alpinejs.dev) -* [Alpine GitHub](https://github.com/alpinejs/alpine) -* [Alpine Twitter](https://twitter.com/Alpine_JS) +- [Alpine Website](https://alpinejs.dev) +- [Alpine GitHub](https://github.com/alpinejs/alpine) +- [Alpine Twitter](https://twitter.com/Alpine_JS) ## Articles -* [Introducing Alpine.js: A Tiny JavaScript Framework - Smashing Magazine](https://www.smashingmagazine.com/2020/03/introduction-alpinejs-javascript-framework/) -* [Add Behavior To HTML Using Alpine.js – A Todo App](https://lukasznojek.com/blog/2020/02/add-behavior-to-html-using-alpine-js-a-todo-app/?utm_content=bufferbb4ff&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer) -* [Build a Dynamic Sign Up Form With Alpine.js - chasingcode.dev](https://chasingcode.dev/blog/build-signup-form-with-alpinejs/) -* [Alpine.js mixes Vue, React, and minimalism - Paul Krill / InfoWorld](https://www.infoworld.com/article/3527958/alpinejs-mixes-vue-react-and-minimalism.html) -* [Alpine.js – A rugged, minimal framework for composing JavaScript behavior in your markup. - Bram Van Damme / bram.us](https://www.bram.us/2020/01/14/alpine-js-a-rugged-minimal-framework-for-composing-javascript-behavior-in-your-markup/) -* [Starting with AlpineJS - Thomas Toledo-Pierre](https://dev.to/nugetchar/starting-with-alpinejs-hjn) -* [A comparison of a simple app in Vue.js and Alpine.js - Liam Hall](https://medium.com/@wearethreebears/a-comparison-of-a-simple-app-in-vue-js-and-alpine-js-2a8c57f8b0e3) -* [AlpineJS – a lightweight alternative to Vue - Ben Furfie](https://benfurfie.co.uk/articles/alpinejs-a-lightweight-alternative-to-vue) -* [Run Alpine.js inside of React - Code with Hugo](https://codewithhugo.com/alpine-js-react/) -* [Build an RSS reader with Alpine.js - Codecourse](https://blog.codecourse.com/build-an-rss-reader-with-alpine-js/) -* [Alpine.js: The JavaScript Framework That’s Used Like jQuery, Written Like Vue, and Inspired by TailwindCSS - CSS Tricks](https://css-tricks.com/alpine-js-the-javascript-framework-thats-used-like-jquery-written-like-vue-and-inspired-by-tailwindcss/) -* [Practical Alpine.js: x-data data access & data fetching examples - Code with Hugo](https://codewithhugo.com/alpinejs-x-data-fetching/) -* [Synchronize x-data and the URL in Alpine.js with the location/History APIs and $watch - Code with Hugo](https://codewithhugo.com/alpinejs-x-data-watch-url/) -* [Creating Custom Magic Variables in Alpine.js - Ryan Chandler](https://ryangjchandler.co.uk/articles/creating-custom-magic-variables-in-alpinejs) -* [Writing Reusable Alpine Components - Ryan Chandler](https://ryangjchandler.co.uk/articles/writing-reusable-alpine-components) -* [Authoring progressive enhanced fragments with Alpine - Nicolás Delfino](https://www.nicolasdelfino.com/blog/progressive-enhancement-scs) -* [Build a Remaining Character Count Component with Alpine.js - Ryan Chandler](https://ryangjchandler.co.uk/articles/build-a-remaining-character-count-component-with-alpinejs) -* [How to Use Cookies With AlpineJS - Peter Thaleikis](https://releasecandidate.dev/posts/2021/how-to-use-cookies-with-alpinejs/) +- [Introducing Alpine.js: A Tiny JavaScript Framework - Smashing Magazine](https://www.smashingmagazine.com/2020/03/introduction-alpinejs-javascript-framework/) +- [Add Behavior To HTML Using Alpine.js – A Todo App](https://lukasznojek.com/blog/2020/02/add-behavior-to-html-using-alpine-js-a-todo-app/?utm_content=bufferbb4ff&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer) +- [Build a Dynamic Sign Up Form With Alpine.js - chasingcode.dev](https://chasingcode.dev/blog/build-signup-form-with-alpinejs/) +- [Alpine.js mixes Vue, React, and minimalism - Paul Krill / InfoWorld](https://www.infoworld.com/article/3527958/alpinejs-mixes-vue-react-and-minimalism.html) +- [Alpine.js – A rugged, minimal framework for composing JavaScript behavior in your markup. - Bram Van Damme / bram.us](https://www.bram.us/2020/01/14/alpine-js-a-rugged-minimal-framework-for-composing-javascript-behavior-in-your-markup/) +- [Starting with AlpineJS - Thomas Toledo-Pierre](https://dev.to/nugetchar/starting-with-alpinejs-hjn) +- [A comparison of a simple app in Vue.js and Alpine.js - Liam Hall](https://medium.com/@wearethreebears/a-comparison-of-a-simple-app-in-vue-js-and-alpine-js-2a8c57f8b0e3) +- [AlpineJS – a lightweight alternative to Vue - Ben Furfie](https://benfurfie.co.uk/articles/alpinejs-a-lightweight-alternative-to-vue) +- [Run Alpine.js inside of React - Code with Hugo](https://codewithhugo.com/alpine-js-react/) +- [Build an RSS reader with Alpine.js - Codecourse](https://blog.codecourse.com/build-an-rss-reader-with-alpine-js/) +- [Alpine.js: The JavaScript Framework That’s Used Like jQuery, Written Like Vue, and Inspired by TailwindCSS - CSS Tricks](https://css-tricks.com/alpine-js-the-javascript-framework-thats-used-like-jquery-written-like-vue-and-inspired-by-tailwindcss/) +- [Practical Alpine.js: x-data data access & data fetching examples - Code with Hugo](https://codewithhugo.com/alpinejs-x-data-fetching/) +- [Synchronize x-data and the URL in Alpine.js with the location/History APIs and $watch - Code with Hugo](https://codewithhugo.com/alpinejs-x-data-watch-url/) +- [Creating Custom Magic Variables in Alpine.js - Ryan Chandler](https://ryangjchandler.co.uk/articles/creating-custom-magic-variables-in-alpinejs) +- [Writing Reusable Alpine Components - Ryan Chandler](https://ryangjchandler.co.uk/articles/writing-reusable-alpine-components) +- [Authoring progressive enhanced fragments with Alpine - Nicolás Delfino](https://www.nicolasdelfino.com/blog/progressive-enhancement-scs) +- [Build a Remaining Character Count Component with Alpine.js - Ryan Chandler](https://ryangjchandler.co.uk/articles/build-a-remaining-character-count-component-with-alpinejs) +- [How to Use Cookies With AlpineJS - Peter Thaleikis](https://releasecandidate.dev/posts/2021/how-to-use-cookies-with-alpinejs/) ## Podcasts -* [Alpine.js is like Tailwind CSS for JavaScript](https://devmode.fm/episodes/alpine-js-is-like-tailwind-css-for-javascript) -* [Caleb Porzio - Just Enough JavaScript with Alpine.js](http://www.fullstackradio.com/132) -* [Caleb Porzio on Alpine.js, Laravel Livewire & more - Remote Ruby](https://remoteruby.com/194) +- [Alpine.js is like Tailwind CSS for JavaScript](https://devmode.fm/episodes/alpine-js-is-like-tailwind-css-for-javascript) +- [Caleb Porzio - Just Enough JavaScript with Alpine.js](http://www.fullstackradio.com/132) +- [Caleb Porzio on Alpine.js, Laravel Livewire & more - Remote Ruby](https://remoteruby.com/194) ## Videos & Screencasts -* [Alpine.js - a first look - Andre Madarang](https://www.youtube.com/watch?v=2pQ_WDqXkWs) -* [Building a progressive questionnaire with Alpine JS and Tailwind CSS - Ben Furfie](https://www.youtube.com/watch?v=BTAXnBFJWCY) -* [JavaScript - Introduction to Alpine.JS - SkillBakery Studio](https://www.youtube.com/channel/UCLTJ8_N2bzhidCNGt_692Ug/search?query=Javascript+-+Learn+Alpine.js) -* [Learn Alpine JS - Andre Madarang / Scrimba](https://scrimba.com/g/galpinejs) -* [Learn Alpine.js - Codecourse](https://codecourse.com/courses/learn-alpine-js) -* [Alpine.js Essentials - Jeffrey Way / Laracasts](https://laracasts.com/series/alpine-essentials) -* [Sprinkle declarative, reactive behaviour on your HTML with Alpine JS - Simon Vrachliotis](https://egghead.io/playlists/sprinkle-declarative-reactive-behaviour-on-your-html-with-alpine-js-5f8b) +- [Alpine.js - a first look - Andre Madarang](https://www.youtube.com/watch?v=2pQ_WDqXkWs) +- [Building a progressive questionnaire with Alpine JS and Tailwind CSS - Ben Furfie](https://www.youtube.com/watch?v=BTAXnBFJWCY) +- [JavaScript - Introduction to Alpine.JS - SkillBakery Studio](https://www.youtube.com/channel/UCLTJ8_N2bzhidCNGt_692Ug/search?query=Javascript+-+Learn+Alpine.js) +- [Learn Alpine JS - Andre Madarang / Scrimba](https://scrimba.com/g/galpinejs) +- [Learn Alpine.js - Codecourse](https://codecourse.com/courses/learn-alpine-js) +- [Alpine.js Essentials - Jeffrey Way / Laracasts](https://laracasts.com/series/alpine-essentials) +- [Sprinkle declarative, reactive behaviour on your HTML with Alpine JS - Simon Vrachliotis](https://egghead.io/playlists/sprinkle-declarative-reactive-behaviour-on-your-html-with-alpine-js-5f8b) ## Examples -* [Alpine Toolbox - Amrit Nagi](https://www.alpinetoolbox.com/) -* [AlpineJS meets TailwindCSS - Caneco](https://codepen.io/collection/XqVbyQ) -* [Alpine.js Playground - Hugo Di Francesco](https://github.com/HugoDF/alpinejs-playground) -* [Click Speed Test - Luciano Felix](https://github.com/FelixLuciano/clicks) -* [Dynamic Form Fields - Sanjay Ojha](https://codepen.io/sanjayojha/pen/qBONdVm) -* [Ridge.css - A maximalist css framework with Alpine.js markup - Sean Walker](https://github.com/swlkr/ridgecss) -* [Progressive enhancement with Alpine.js - Cart fragment example](https://github.com/nicolasdelfino/pe-alpine) -* [LittleBigTable - A flexible Alpine.js table](https://github.com/indgy/LittleBigTable) -* [NESHouse.com —— An open source implementation of ClubHouse](https://github.com/bestony/neshouse) -* [AlpineTrails - Alpine.js and Tailwind CSS adventures from the house of LUBUS](https://alpinetrails.netlify.app/) +- [Alpine Toolbox - Amrit Nagi](https://www.alpinetoolbox.com/) +- [AlpineJS meets TailwindCSS - Caneco](https://codepen.io/collection/XqVbyQ) +- [Alpine.js Playground - Hugo Di Francesco](https://github.com/HugoDF/alpinejs-playground) +- [Click Speed Test - Luciano Felix](https://github.com/FelixLuciano/clicks) +- [Dynamic Form Fields - Sanjay Ojha](https://codepen.io/sanjayojha/pen/qBONdVm) +- [Ridge.css - A maximalist css framework with Alpine.js markup - Sean Walker](https://github.com/swlkr/ridgecss) +- [Progressive enhancement with Alpine.js - Cart fragment example](https://github.com/nicolasdelfino/pe-alpine) +- [LittleBigTable - A flexible Alpine.js table](https://github.com/indgy/LittleBigTable) +- [NESHouse.com —— An open source implementation of ClubHouse](https://github.com/bestony/neshouse) +- [AlpineTrails - Alpine.js and Tailwind CSS adventures from the house of LUBUS](https://alpinetrails.netlify.app/) ## Extensions & Plugins -* [Alpine.js IntelliSense - Extension for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=adrianwilczynski.alpine-js-intellisense) -* [Spruce - a lightweight state management layer](https://github.com/ryangjchandler/spruce) -* [Alpine.js DevTools - Extension for Chrome and Firefox](https://github.com/Te7a-Houdini/alpinejs-devtools) -* [Alpine.js Magic Helpers - A collection of magic properties and helper functions for use with Alpine](https://github.com/alpine-collective/alpine-magic-helpers) -* [Alpine Test Utils - Utilities for testing Alpine.js components](https://github.com/HugoDF/alpine-test-utils) -* [Pinecone Router - Client-side router for Alpine.js](https://github.com/pinecone-router/router) -* [Alpine.js Tash - Render data in moustache syntax](https://github.com/markmead/alpinejs-tash) -* [Alpine Wizard - Build multi-step wizards with Alpine.js](https://github.com/glhd/alpine-wizard) -* [Alpine $fetch - A magic helper to integrate HTTP fetch requests directly within Alpine.js markup](https://github.com/hankhank10/alpine-fetch) -* [alpinejs-router - Easy to use and flexible router for Alpine.js, support dynamic route matching with params](https://github.com/shaunlee/alpinejs-router) -* [Alpine Autosize - Directive for autosizing textareas](https://github.com/marcreichel/alpine-autosize) -* [Alpine Timeago - Display the human-readable distance between a date and now](https://github.com/marcreichel/alpine-timeago) -* [Alpine Auto Animate - Thin Alpine wrapper for @formkit/auto-animate](https://github.com/marcreichel/alpine-auto-animate) -* [Alpine Typewrite - Add a typewriter animation to any HTML element](https://github.com/marcreichel/alpine-typewriter) -* [Alpine AJAX - Tools to build AJAX-powered components and UI](https://github.com/imacrayon/alpine-ajax) -* [Norska - Create interactive Three.js scenes directly with Alpine](https://github.com/Plumie/Norska) +- [Alpine.js IntelliSense - Extension for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=adrianwilczynski.alpine-js-intellisense) +- [Spruce - a lightweight state management layer](https://github.com/ryangjchandler/spruce) +- [Alpine.js DevTools - Extension for Chrome and Firefox](https://github.com/Te7a-Houdini/alpinejs-devtools) +- [Alpine.js Magic Helpers - A collection of magic properties and helper functions for use with Alpine](https://github.com/alpine-collective/alpine-magic-helpers) +- [Alpine Test Utils - Utilities for testing Alpine.js components](https://github.com/HugoDF/alpine-test-utils) +- [Pinecone Router - Client-side router for Alpine.js](https://github.com/pinecone-router/router) +- [Alpine.js Tash - Render data in moustache syntax](https://github.com/markmead/alpinejs-tash) +- [Alpine Wizard - Build multi-step wizards with Alpine.js](https://github.com/glhd/alpine-wizard) +- [Alpine $fetch - A magic helper to integrate HTTP fetch requests directly within Alpine.js markup](https://github.com/hankhank10/alpine-fetch) +- [alpinejs-router - Easy to use and flexible router for Alpine.js, support dynamic route matching with params](https://github.com/shaunlee/alpinejs-router) +- [Alpine Autosize - Directive for autosizing textareas](https://github.com/marcreichel/alpine-autosize) +- [Alpine Timeago - Display the human-readable distance between a date and now](https://github.com/marcreichel/alpine-timeago) +- [Alpine Auto Animate - Thin Alpine wrapper for @formkit/auto-animate](https://github.com/marcreichel/alpine-auto-animate) +- [Alpine Typewrite - Add a typewriter animation to any HTML element](https://github.com/marcreichel/alpine-typewriter) +- [Alpine AJAX - Tools to build AJAX-powered components and UI](https://github.com/imacrayon/alpine-ajax) +- [Norska - Create interactive Three.js scenes directly with Alpine](https://github.com/Plumie/Norska) ## UI Frameworks -* [Vimesh UI - Agile UI framework for Alpine.js](https://github.com/vimeshjs/vimesh-ui) +- [Vimesh UI - Agile UI framework for Alpine.js](https://github.com/vimeshjs/vimesh-ui) +- [Penguin UI - Plug-n-play UI component library for Tailwind CSS & Alpine JS](https://www.penguinui.com/) ## Other -* [Alpine.js Weekly - Newsletter](https://alpinejs.codewithhugo.com/newsletter) -* [Alpine.js Discord Community](https://discord.gg/CGmj5nq) -* [Alpine.js Matrix Community](https://matrix.to/#/#AlpineJS:matrix.org) -* [Alpine.js Persian Matrix Community](https://matrix.to/#/#AlpineJS-fa:matrix.org) +- [Alpine.js Weekly - Newsletter](https://alpinejs.codewithhugo.com/newsletter) +- [Alpine.js Discord Community](https://discord.gg/CGmj5nq) +- [Alpine.js Matrix Community](https://matrix.to/#/#AlpineJS:matrix.org) +- [Alpine.js Persian Matrix Community](https://matrix.to/#/#AlpineJS-fa:matrix.org)