This media is not supported in your browser
VIEW IN TELEGRAM
A component i made today
image lazy loader that uses the blurha.sh for when the src doesnt exist.
#blurhash #component #GardenDevLogs
Source :
image lazy loader that uses the blurha.sh for when the src doesnt exist.
#blurhash #component #GardenDevLogs
Source :
<script lang="ts">
import { browser } from '$app/environment';
import { decode } from 'blurhash';
import { fade, blur } from 'svelte/transition';
export let width: number = 40;
export let height: number = 40;
export let blurhash = 'L05OKRIq00xZs;WUNH%100xt~V%K';
export let src = '';
export let loading: boolean = true;
export let alt = '';
$: !src && (loading = true);
let dataurl;
if (browser) {
const pixels = decode(blurhash, width, height);
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
if (!ctx) throw new Error('Could not get 2d context');
const imageData = ctx.createImageData(width, height);
imageData.data.set(pixels);
ctx.putImageData(imageData, 0, 0);
dataurl = canvas.toDataURL();
}
</script>
<!-- Bounding container , set relative to contain the absolute blurhash -->
<div
style="width: {width}px; height: {height}px;"
class="relative p-0 bg-stone-100 dark:bg-dark-80 m-0 box-border border-none"
>
{#if browser && dataurl}
{#if src}
<!-- Actual image , set to display only on src to avoid ghost border -->
<img
in:blur
{src}
style="width: {width}px; height: {height}px;"
class="w-full h-full transition-all duration-300 ease-in-out object-cover
bg-center bg-no-repeat bg-cover absolute z-10"
{alt}
on:load={() => {
loading = false;
}}
/>
{/if}
{#if loading}
<!-- Placeholder Blurhash , set to display only on loading -->
<img
transition:blur
class="
absolute top-0 left-0 w-full h-full object-cover bg-center bg-no-repeat bg-cover z-10"
style="width: {width}px; height: {height}px;"
src={dataurl}
{alt}
/>
{/if}
<slot>
<!--
This implementation of a Z based overlaying is questionable
TODO: Rewrite this with a svelte action that uses a single image and just alters
the data url of the image to the blurhash and src
-->
</slot>
{/if}
</div>
🔥5
Robi
Video
its the season of these mfs again , take care.
ps. they can fly , but the dumb mfs slam into a wall ( sometimes even the floor) and lose the wings fast.
ps. they can fly , but the dumb mfs slam into a wall ( sometimes even the floor) and lose the wings fast.
Forwarded from Mikiyas e/acc
A couple things to announce.
The goal of e/acc in ET should be to accelerate the rate of startup creation, the flow of capital and ideas, and to create a culture of solving problems. To achieve that, we need to copy Silicon Valley — everything. We need to shamelessly steal their culture and make it our own.
So I cloned Hacker News. It's not much, but it's an honest start. Hacker News was synonymous with Silicon Valley, a place where venture capital firms scouted for startups and where early-stage startups like Stripe, Reddit, and Dropbox got their start. It's highly beneficial to have a melting pot of optimistic young people with one goal in mind: Generating Value. I hope it becomes a place where we can see who's working on the coolest problems, where founders meet investors or find co-founders, and where we can grow the spirit of critical thinking and problem-solving.
eacc.et
show.eacc.et
@willtocode
I have my own channel now where I will be sharing a lot
The goal of e/acc in ET should be to accelerate the rate of startup creation, the flow of capital and ideas, and to create a culture of solving problems. To achieve that, we need to copy Silicon Valley — everything. We need to shamelessly steal their culture and make it our own.
So I cloned Hacker News. It's not much, but it's an honest start. Hacker News was synonymous with Silicon Valley, a place where venture capital firms scouted for startups and where early-stage startups like Stripe, Reddit, and Dropbox got their start. It's highly beneficial to have a melting pot of optimistic young people with one goal in mind: Generating Value. I hope it becomes a place where we can see who's working on the coolest problems, where founders meet investors or find co-founders, and where we can grow the spirit of critical thinking and problem-solving.
eacc.et
show.eacc.et
@willtocode
I have my own channel now where I will be sharing a lot
i wonder how many accidental emails jhondoe@gmail.com gets from devs accidentally testing their mail systems.
😁5