├── contributing.md └── readme.md /contributing.md: -------------------------------------------------------------------------------- 1 | # How to contribute to this list 2 | 3 | ## If you found a tool you want to add 4 | 5 | Open a pull request and use the following format 6 | 7 | ```markdown 8 | * [Tool name](Tool URL) 9 | 10 |
Details 11 | 12 | > Further description from the tool website 13 | 14 | **Pros** 15 | 16 | * List down the pros of this tool 17 |
18 | ``` 19 | 20 | Don't forget to add it to the correct category 21 | 22 | ## I can't find the category my tool belongs to 23 | 24 | Suggest a new category in the same pull request -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Awesome Frontend 2 | 3 | Collection of awesome tools and libraries for building interfaces. 4 | 5 | ## Animation and Parallax 6 | 7 | * [Lax.js](https://github.com/alexfoxy/lax.js) 8 | 9 |
Details 10 | 11 | > Simple & light weight (3kb minified & zipped) vanilla javascript plugin to create smooth & beautiful animations when you scrolllll! Harness the power of the most intuitive interaction and make your websites come alive! 12 | 13 | Mainly used to create parallax effects 14 | 15 | **Pros** 16 | 17 | * Predefined sets for parallax with very simple configuration rules 18 | * Can be enabled / disabled / reinitialized (for window resize) 19 | * Support custom animation rules 20 | 21 | **Cons** 22 | 23 | * Custom animations are not easy to configure 24 | * Cannot define a threshold for the predefined sets 25 |
26 | 27 | ## UI components 28 | 29 | ### Images comparison 30 | 31 | * [Image Compare Viewer](https://image-compare-viewer.netlify.app/) 32 | 33 |
Details 34 | 35 | > Compare before and after images, for grading, CGI and other retouching comparisons. Vanilla Javascript, zero dependencies. 36 | 37 | **Pros** 38 | 39 | * Dependency Free 40 | * Works very well on mobile and touch friendly devices 41 | * Support vertical and horizontal modes 42 | * Simple markup and simple setup 43 | * Actively maintained 44 |
45 | 46 | ### Sliders 47 | 48 | * [Swiper.js](https://swiperjs.com/) 49 | 50 |
Details 51 | 52 | > The most modern mobile touch slider 53 | 54 | **Pros** 55 | 56 | * Dependency Free 57 | * Works very well on mobile and touch friendly devices 58 | * Easy to define bullets and navigation buttons 59 | * Support RTL 60 | * Different modes like fixed number of slides, auto width, variable height, free mode, multi-row, nested sliders ... 61 | * Allow spaces between slides 62 | * Built-in lazy loading 63 | * Expose events 64 |
65 | 66 | ## Utilities 67 | 68 | * [in-view.js](https://github.com/camwiegert/in-view) 69 | 70 |
Details 71 | 72 | > Get notified when a DOM element enters or exits the viewport. A small (~1.9kb gzipped), dependency-free, javascript utility for IE9+. 73 | 74 | **Pros** 75 | 76 | * Dependency Free, small in size 77 | * Dead simple to implement 78 | 79 | **Cons** 80 | 81 | * Original author archived the repository, this means it's deprecated and won't recieve fixes and updates 82 | * Use MutationObserver. Currently IntersectionObserver is way more performant 83 | * Some options like `threshold` cannot be defined per instance. It's global 84 |
85 | 86 | * [NanoID](https://zelark.github.io/nano-id-cc/) 87 | 88 |
Details 89 | 90 | > NanoID is a tiny, secure, URL-friendly, unique string ID generator for JavaScript. It’s a great alternative to UUID, optimized for speed and small bundle size. 91 | 92 | **Pros** 93 | 94 | * Super lightweight (less than 1KB) 95 | * Extremely fast ID generation 96 | * Perfect for client-side apps, especially React 97 | * No dependencies 98 | * Secure: uses cryptographic random values 99 | * Great for generating user IDs, keys, filenames, etc. 100 | 101 |
102 | 103 | ## Vue 104 | 105 | Use these when shopping for Vue libraries. 106 | 107 | ### UI Utilities 108 | 109 | #### Form Validation 110 | 111 | * [vee-validate](https://github.com/logaretm/vee-validate) 112 | 113 |
Details 114 | 115 | > Template Driven Validation Framework for Vue.js 116 | 117 | **Pros** 118 | 119 | * Dependency Free 120 | * Actively Maintained 121 | * Localization Support 122 | * Async and Custom Rules Support 123 |
124 | 125 | #### I18n 126 | 127 | * [vue-i18n](https://kazupon.github.io/vue-i18n/) 128 | 129 |
Details 130 | 131 | > Vue I18n is internationalization plugin for Vue.js 132 | 133 | **Pros** 134 | 135 | * Most Popular 136 | * Actively Maintained 137 | * App-level translations as well as component-level translations 138 | 139 | **for Nuxt use the `nuxt-i18n` module that uses this under the hood.** 140 | 141 |
142 | 143 | ### UI components 144 | 145 | ### Sliders 146 | 147 | * [hooper](https://github.com/baianat/hooper) 148 | 149 |
Details 150 | 151 | > A customizable accessible carousel slider optimized for Vue 152 | 153 | **Cons** 154 | 155 | * No longer maintained 156 | 157 | **Pros** 158 | 159 | * Most Popular 160 | * Touch, Keyboard, Mouse Wheel, and Navigation support 161 | * SSR Support 162 | * Easily customizable through rich API and addons 163 | 164 |
165 | --------------------------------------------------------------------------------