A component i made today

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>

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.

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

i wonder how many accidental emails jhondoe@gmail.com gets from devs accidentally testing their mail systems.

svelte bois rise up

ㅤ🥺
👉🏻👈🏻

I chose svelte although I never used it.
I chose svelte because I hate React.
I use React daily.