DEV Community: SHAREEJ V K

AVIF Studio - Web page screen capture Chrome extension Made with Svelte and WebAssembly.

SHAREEJ V K — Wed, 05 Jun 2024 03:46:37 +0000

Installation Link

https://chromewebstore.google.com/detail/avif-studio/bcnhebdciabcnffgcgdpkkniplccpfap?hl=en

AVIF Studio - Web page screen capture Chrome extension Made with Svelte and WebAssembly.
Extension for webpage screen capture
Support all major image formats - AVIF/PNG/JPEG/WEBP/PDF .

A simple extension for capturing web page screenshots and save the captured screen to various image formats, such as AVIF , PNG, WEBP , JPEG & PDF images.

The captured screens can be annotated in a professional and awesome way. There are various tools that make labeling and annotating fun and interesting. Annotation templates are available to make the process as easy as possible.

This is a totally free extension please give it a try .

AVIF Studio - Chrome Extension made with Svelte and WebAssembly for Image Editing & Annotation

SHAREEJ V K — Sat, 01 Jun 2024 20:12:28 +0000

AVIF STUDIO

Chrome Extension made with Svelte and WebAssembly for Image Editing & Annotation
LINK TO INSTALL

AVIF Studio is a simple Chrome extension for basic image conversion and image editing.

You can convert images to multiple image formats including AVIF, PNG, WEBP , JPEG & PDF. AVIF Studio can also be used to create customized photo collages. Various templates are available that can be customized to suit your requirements and use cases.

AVIF Studio is equipped with the tools to remove the background from your images and then add new background images of your choice.

The Image processing utilities are developed with WebAssembly integrated with Svelte. That means all the image processing operations including AI operations and image format conversions are taking place inside our browser and there is no need to upload our images to any server for processing. Your images will never leave your computer / browser. This gives you 100% data privacy and security.

Named Layouts - A new feature available in SvelteKit

SHAREEJ V K — Fri, 29 Apr 2022 04:37:23 +0000

There so many new features getting ready for SvelteKit production release. Named layouts are one of them. It's available in latest beta release.

These videos explain how named layouts works in sveltekit.

references :New and upcoming features coming to SvelteKit

Rich Harris's talk with Svelte Society video

Experiment With Svelte to load external /un-scoped css in custom elements and also to support css variable syntax

SHAREEJ V K — Mon, 16 Dec 2019 19:40:15 +0000

How to load external/ global css in svelte custom components and how to get support for css variable syntax ... This was one of the challenge I faced when I got started with svelte. I was coming from the Angular world and things were not easy .. I had tried many ways to achieve this but nothing helped until I did a small experiment.

As the style get appended in to the shadow root, svelte global selector was not working with custom elements as expected. I tried with many rollup css plugins, but none of them worked for custom elements. The only way to achieve this was to bypass svelte and append the style dynamically inside the shadow root once the custom component got registered with in the DOM. It was really a hacky way of doing it but there were no other ways I could think about.

This is what I did :)

It was totally an experiment but surprisingly the style got appended and executed in the shadow root without getting trimmed or scoped.

So the first issue solved !!!!
but what about the variable syntax "var(--variable )" support ??

It was still not working .. :(

until I did this

Now everything worked as expected.

TL;DR ::: if you really have a requirement like this just load the external global css inside the custom component using the svelte Element bind (bind/this) API. and load the global variables css using the svelte:head API

Hope we will have a proper way of doing it in svelte soon.