pica
Stimulus
pica | Stimulus | |
---|---|---|
11 | 111 | |
3,617 | 12,466 | |
0.7% | 0.3% | |
0.0 | 6.4 | |
10 months ago | 6 days ago | |
JavaScript | 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.
pica
-
Generate thumbhash at edge for tiny progressive images
Then pica to resize it and a simple function I wrote to crop it:
-
Can I specify the camera resolution when prompting the user to upload a selfie using JS?
Take a look at pica (Resize images in browser without pixelation and reasonably fast. Autoselect the best of available technologies: webworkers, webassembly, createImageBitmap, pure JS.)
-
Client side image processing? Package like 'Sharp' but for frontend webdev?
You can use the pica library for browser resizing - https://www.npmjs.com/package/pica - it's a really great tool. It can also reduce upload size for large images. And some library like this for merging images - https://www.npmjs.com/package/merge-images.
-
Cool & useful JavaScript libraries
Pica : resize image in browser with high quality and high speed.
- I made an online image resizer tool
-
How to include APIs in TamperMonkey?
I want to use this in my TamperMonkey script: https://github.com/nodeca/pica
-
Resizing and Compressing Photos Before Upload to Django
this sounds promising, though I've never used it before https://github.com/nodeca/pica
-
Test Ishan
Sample text here... Syntax highlighting js var foo = function (bar) { return bar++; }; console.log(foo(5)); ## Tables | Option | Description | | ------ | ----------- | | data | path to data files to supply the data that will be passed into templates. | | engine | engine to be used for processing templates. Handlebars is the default. | | ext | extension to be used for dest files. | Right aligned columns | Option | Description | | ------:| -----------:| | data | path to data files to supply the data that will be passed into templates. | | engine | engine to be used for processing templates. Handlebars is the default. | | ext | extension to be used for dest files. | ## Links link text link with title Autoconverted link https://github.com/nodeca/pica (enable linkify to see) ## Images Like links, Images also have a footnote style syntax ![Alt text][id] With a reference later in the document defining the URL location: [id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat" ## Plugins The killer feature of markdown-it is very effective support of syntax plugins. ### Emojies > Classic markup: 😉 :crush: 😢 :tear: 😆 😋 > > Shortcuts (emoticons): :-) :-( 8-) ;) see how to change output with twemoji. ### Subscript / Superscript - 19^th^ - H~2~O ### ++Inserted text++ ### ==Marked text== ### Footnotes Footnote 1 link[^first]. Footnote 2 link[^second]. Inline footnote^[Text of inline footnote] definition. Duplicated footnote reference[^second]. [^first]: Footnote can have markup and multiple paragraphs. [^second]: Footnote text. ### Definition lists Term 1 : Definition 1 with lazy continuation. Term 2 with inline markup : Definition 2 { some code, part of Definition 2 } Third paragraph of definition 2. Compact style: Term 1 ~ Definition 1 Term 2 ~ Definition 2a ~ Definition 2b ### Abbreviations This is HTML abbreviation example. It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on. [HTML]: Hyper Text Markup Language ### Custom containers ::: warning *here be dragons :::
-
Stop sending uncompressed images to servers for resizing (slow!)
this is a sort of similar one https://github.com/nodeca/pica (i found it hard to use with create-react-app tho had to skip over its use of webworkers, tho that would be cool to use, code to use pica here https://github.com/cmdcolin/aws\_serverless\_photo\_gallery/blob/master/frontend/src/App.tsx#L20-L25)
-
Building Your Own Blog with Nuxt Content and Tailwind
link with title
Stimulus
-
Turbo Streaming Modals in Ruby on Rails
I also recommend checking out the docs for Stimulus and Turbo to familiarise yourself with all their features and the APIs used in this series.
-
Google: Angular and Wiz Are Merging
Any tips on preparing to work with Wiz as an incoming intern. I heard its identical to Stimulus: https://stimulus.hotwired.dev/
-
How to integrate Component Architecture into Symfony?
use Stimulus
- Stimulus: A modest JavaScript framework for the HTML you already have
-
Build Drag and Drop with Rails Hotwire
With Stimulus, you've got a powerful tool to take your app's interactivity up a notch. For even more awesome features and Stimulus wizardry, check out the Stimulus Documentation.
-
Supercharge your Stimulus controllers with Custom APIs
The next version of Stimulus makes it easier to access parts of the private API thanks to my pull request.
-
Why are you still using jQuery?
I like Stimulus, it was a bit pushed by Symfony with their ux thing.
-
Too Much JavaScript? Why the Frontend Needs to Build Better
I thought it'd be https://stimulus.hotwired.dev/ for a minute but I think that ecosystem is tied too closely with rails.
-
Learn Stimulus in Ruby on Rails by Building a Toggle)
Hey HN!
For those new to Rails, Stimulus (https://stimulus.hotwired.dev/) is a way to sprinkle frontend javascript code into your Rails views.
I held off using Stimulus in my Rails apps for a long time because I didn't understand it — the data= attributes looked weird, and the connection between my Rails views and Stimulus javascript controllers was confusing.
So I decided to write the guide I wish I had when I was learning Stimulus.
Hope you enjoy it! I'm happy to answer any questions, feel free to ask any.
Thanks, Harrison
-
Your first Stimulus controller — Learn Stimulus by building a toggle in your Rails app
Hey /r/rails, these past few weeks, I've been working on a beginner's guide to Stimulus and I'm excited to finally share it!
What are some alternatives?
sharp - High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP, AVIF and TIFF images. Uses the libvips library.
turbo-rails - Use Turbo in your Ruby on Rails app
jimp - An image processing library written entirely in JavaScript for Node, with zero external or native dependencies.
htmx - </> htmx - high power tools for HTML
cropper
hotwire-rails - Use Hotwire in your Ruby on Rails app
lena.js - :woman: Library for image processing
django-unicorn - The magical reactive component framework for Django ✨
fastimage - A module that finds the size and type of an image by fetching and reading as little data as needed.
Alpine.js - A rugged, minimal framework for composing JavaScript behavior in your markup.
probe-image-size - Get image size without full download. Supported image types: JPG, GIF, PNG, WebP, BMP, TIFF, SVG, PSD, ICO.
inertia - Inertia.js lets you quickly build modern single-page React, Vue and Svelte apps using classic server-side routing and controllers.