Comments (7)
I think the addition concerns exposing
blurhash
string and updating README to make it explicit about two options:* to get the full benefit of `blurhash`, where users would query `blurhash` string and add `react-blurhash` on the client * get similar but heavier (in terms of bytes delivered to users) base64 version that doesn’t require client side modification at the expense of response weight.
That sounds good, want to make a PR ?
from gatsby-transformer-blurhash.
You have to fork the repo first
Check out GitHub's guide on how to submit a contribution
from gatsby-transformer-blurhash.
Perhaps exposing blurhashed
variable via graphql would allow the user to query only for the shorter hash to be used with https://github.com/woltapp/react-blurhash.
from gatsby-transformer-blurhash.
You're right, this transformer is serving already decoded blurhashed images to the client.
Technically, the transformer could expose a blurhashed
variable and let the client decode it but that would utilize the user's CPU in order to decode this temporary image.
The goal here is to serve a placeholder while the real image is loading and doing all the CPU-intensive work at build time will make it easier on the user's CPU to do other tasks.
from gatsby-transformer-blurhash.
The way blurhash is advertised is to do decoding on the client. I believe if it’s not done that way it might be misleading to users of this plugin.
From https://blurha.sh/
When you send data to your client, you send both the URL to the image, and the BlurHash string. Your client then takes the string, and decodes it into an image that it shows while the real image is loading over the network.
It is not that CPU intensive and takes under 16ms, but more like 1-4ms in my testing for previews of around 30x40 pixels. On mobile web browsers it also runs smooth including iPhone 5C (a phone from 2013). Blurhash wouldn’t really make sense as an idea if it was too heavy.
People who use blurhash in a form of gatsby plugin might assume they get much smaller representation of the encoded image, whereas in fact they simply get base64 string. You could bypass blurhash entirely and get the processed jpeg from sharp
or jimp
directly and result would be the same base64 string.
I think the addition concerns exposing blurhash
string and updating README to make it explicit about two options:
- to get the full benefit of
blurhash
, where users would queryblurhash
string and addreact-blurhash
on the client - get similar but heavier (in terms of bytes delivered to users) base64 version that doesn’t require client side modification at the expense of response weight.
from gatsby-transformer-blurhash.
Hey @m5r I am getting this error when trying to push a branch to this remote:
"Permission to m5r/gatsby-transformer-blurhash.git denied to gryzzly"
Before I update README I wanted you to see the code in [work-in-progress] PR.
from gatsby-transformer-blurhash.
@m5r hey, I would like to get your OK on the code before I update README, thanks. Opened the PR ^^
from gatsby-transformer-blurhash.
Related Issues (4)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gatsby-transformer-blurhash.