js-image-carver
vite-imagetools
Our great sponsors
| js-image-carver | vite-imagetools | |
|---|---|---|
| 6 | 8 | |
| 1,530 | 840 | |
| - | - | |
| 0.0 | 8.9 | |
| over 1 year ago | 7 days ago | |
| TypeScript | TypeScript | |
| MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
js-image-carver
-
Content-aware image resizing in JavaScript
I've created the JS IMAGE CARVER web-app (and also open-sourced it on GitHub) that you may use to play around with resizing of your custom images.
The energy map is going to be recalculated on every resize iteration. It means that it will be recalculated, let's say, 500 times if we need to shrink the image by 500 pixels which is not optimal. To speed up the energy map calculation on the 2nd, 3rd, and further steps, we may re-calculate the energy only for those pixels that are placed around the seam that is going to be removed. For simplicity reasons this optimization is omitted here, but you may find the example source-code in js-image-carver repo.
vite-imagetools
-
QWER : Simply Awesome Blog Starter built with SvelteKit and Love
Automatic image optimization via vite-imagetools.
-
Next.js image alternative in Svelte
The closest solution I’ve found is hacking something together yourself with vite-imagetools
-
What are the weirdest CMS you've seen used to host content?
The projects this solutions works with are customised Sveltekit projects I made. It has everything: markdown parser using Mdsvex, image converting tool using vite-imagetools, it has toml parser, and of course live preview and lots of other smaller things like markdown directives.
-
Show HN: I hype drivingly recreated my website and it was awesome
Hello HN,
I had some christmas free time over the last two weeks (Merry Christmas btw ;-)) and used that time to completely recreate the website of my app[1]. I used all the fancy new tools. I didn't know some of them when I started.
What was my goal?
* Pretty website
* Blazing fast
* Mobile first
* SSR
* Webp support
* Generally all the best website practices (high lighthouse score)
What did I use?
* Tailwindcss (https://tailwindcss.com/)
* Tailwind Components (https://tailwindui.com/)
* React (https://reactjs.org/)
* ViteJs (https://vitejs.dev/)
* Kubernetes (https://kubernetes.io/)
Well what can I say. I hate creating websites, but this was an awesome experience. Never have I created a website more efficiently. Tailwindcss + Components is just the best. ViteJS is so so so much easier to setup compared to webpack and has SSR support on top of it. React has been around somewhat longer and I did a lot of projects with it, so that was a nobrainer. Special thanks to all the people who created these awesome tools.
PS: If you work with lots of images, do yourself a favor and use something like https://github.com/JonasKruckenberg/imagetools. It saved me hours of dreadful work.
[1] https://stockevents.app
What are some alternatives?
vike - 🔨 Like Next.js / Nuxt but as do-one-thing-do-it-well Vite plugin.
unplugin-vue-components - 📲 On-demand components auto importing for Vue
vite-aliases - Alias auto generation for Vite
vite-plugin-inline-css-modules - Write CSS modules without leaving your javascript!
vite-plugin-rsw - 🦞 wasm-pack plugin for Vite
SvelteKit - web development, streamlined
vite - Next generation frontend tooling. It's fast!
MDsveX - A markdown preprocessor for Svelte.
kubernetes - Production-Grade Container Scheduling and Management
Tailwind CSS - A utility-first CSS framework for rapid UI development.
vscode-front-matter - Front Matter is a CMS running straight in Visual Studio Code. Can be used with static site generators like Hugo, Jekyll, Hexo, NextJs, Gatsby, and many more...
React - The library for web and native user interfaces.