An opinionated curated list for a simple modern frontend
Simplify modern javascript.
Drop support for older browser. Ship less code, and run more things nativly.
Browser support:
- Edge 16 and newer
- Chromium browsers, Firefox, and Safari: Two versions back and newer
Don't use jQuery or libraries that depends on jQuery. Keep it vanilla.
We don't want to use libraries that take up a lot of space, or has a lot of dependencies. That way all environemnts stays fast and secure.
Alpine.js offers you the reactive and declarative nature of big frameworks like Vue or React at a much lower cost.
You get to keep your DOM, and sprinkle in behavior as you see fit.
Repository: https://github.com/alpinejs/alpine
NPM name:
alpinejs
Example: https://codesandbox.io/s/github/camilla-westin/alpine-js-labs
An easy to use and accessible auto complete input component, for selecting items in long lists.
Read about why gov.uk created this library.
For smaller lists the select HTML element should be used instead.
Repository: https://github.com/alphagov/accessible-autocomplete
NPM name:
accessible-autocomplete
Example: https://alphagov.github.io/accessible-autocomplete/examples/
Lorem ipsum
Repository: https://github.com/rcbyr/keen-slider
NPM name: keen-slider
Example: https://keen-slider.io/examples/#examples
Lorem ipsum
Version 3 is still in beta
Repository: https://github.com/chartjs/Chart.js
NPM name: chart.js
Example: https://www.chartjs.org/docs/latest/samples/bar/vertical.html
Lorem ipsum
Repository: https://github.com/JedWatson/classnames
NPM name: classnames
Lorem ipsum
Repository: https://github.com/date-fns/date-fns
NPM name: date-fns
Lorem ipsum
Repository: https://github.com/rikschennink/fitty
NPM name: fitty
Lorem ipsum
Safari doesn't have support for native lazy loading, and Firefox only support lazy load for image elements. Also has more functionality.
Repository: https://github.com/verlok/vanilla-lazyload
NPM name: vanilla-lazyload
Example: https://www.andreaverlicchi.eu/vanilla-lazyload/#-demos
Lorem ipsum
Repository: https://github.com/Ghosh/micromodal
NPM name: micromodal
Example: https://micromodal.vercel.app/
Lorem ipsum
Has a bunch of other features that are not available with the native implementation. Safari doesn’t support CSSOM Scroll-behavior.
Repository: https://github.com/zengabor/zenscroll
NPM name: zenscroll
Example: https://zengabor.github.io/zenscroll/
Lorem ipsum
Repository: https://github.com/tscanlin/tocbot
NPM name: tocbot
Example: http://tscanlin.github.io/tocbot/
Lorem ipsum
Repository: https://github.com/cferdinandi/tabby
NPM name: tabbyjs
Example: https://codepen.io/cferdinandi/pen/rRMJwK
Lorem ipsum
Don't import or install all of lodash. Install one method at a time, like this npm i lodash.debounce.
Repository: https://github.com/lodash/lodash
NPM name: lodash
Use the details HTML element. Internet Explorer and the Edge browsers with the Trident Engine (pre Chromium) doesn't support this, so you'll need a polyfill.
Repository: https://github.com/rstacruz/details-polyfill
NPM name: details-polyfill
Example: https://interactive-examples.mdn.mozilla.net/pages/tabbed/details.html
Use NPM over Yarn. Not everyone has Yarn installed.
- Unit testing: Jest
- Integration tests: Cypress
- Code formatter: Prettier
- Git hooks: Husky
- CSS class name reduction: Purge
TODO:
- Date picker, maybe https://github.com/duetds/date-picker#theming
- Animation: https://github.com/juliangarnier/anime/
- Focus trap: https://github.com/focus-trap/focus-trap
- Input mask: https://github.com/uNmAnNeR/imaskjs