teleren/devto huggingface dataset:
How to load an SVG file from a remote url in HTML?
Tags: html
Published: 2022-12-12 05:31:04

---
  title: How to load an SVG file from a remote url in HTML?
  published: true
  tags: HTML5
  date: Mon Dec 12 2022 11:01:04 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/load-svg-file-from-remote-url-in-html
  cover_image: https://res.cloudinary.com/df8e3k5he/image/upload/blog/main_82131cfc53.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/load-svg-file-from-remote-url-in-html)
  To load an SVG file from a remote url, you can use the `img` HTML tag and then provide the SVG remote url as the value to the `src` attribute.

### TL;DR

```html
<html>
  <body>
    <!-- Using `img` HTML tag to load SVG file from a remote url -->
    <img
      src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/12/Black_Paw.svg/852px-Black_Paw.svg.png"
      decoding="async"
      loading="lazy"
      width="200"
      height="200"
    />
  </body>
</html>
```

For example, let's say we have an SVG hosted at this [url](https://upload.wikimedia.org/wikipedia/commons/thumb/1/12/Black_Paw.svg/852px-Black_Paw.svg.png).

We aim to load this SVG url and render this SVG on the webpage. To do that, we can use the `img` HTMl tag and then use the `src` attribute and set its value as the SVG remote url which is `https://upload.wikimedia.org/wikipedia/commons/thumb/1/12/Black_Paw.svg/852px-Black_Paw.svg.png`.

It can be done like this,

```html
<html>
  <body>
    <!-- Using `img` HTML tag to load SVG file from a remote url -->
    <img
      src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/12/Black_Paw.svg/852px-Black_Paw.svg.png"
    />
  </body>
</html>
```

The webpage now looks like this,

![svg from a remote url is shown on the webpage](/uploads/Screenshot_2022_11_17_at_11_35_33_PM_c5e8570991.png)

Now to improve the webpage performance while loading the SVG file, we can define more attributes on the `img` tag like `decoding="async"`, and `loading="lazy"`. We can also set its width and height using the attributes `width` and `height` and set both of its values to `200`.

The html now looks like this,

```html
<html>
  <body>
    <!-- Using `img` HTML tag to load SVG file from a remote url -->
    <img
      src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/12/Black_Paw.svg/852px-Black_Paw.svg.png"
      decoding="async"
      loading="lazy"
      width="200"
      height="200"
    />
  </body>
</html>
```

The webpage is now more performant and also the SVG is resized to the width and height defined in the attributes.

The webpage now looks like this,

![svg is now resized to a width of 200 and height of 200 on the webpage](/uploads/Screenshot_2022_11_17_at_11_40_40_PM_9ea75cd7ca.png)

We have successfully loaded an SVG file from a remote url. Yay 🥳!

See the above code live in the [codesandbox](https://codesandbox.io/s/load-svg-file-from-remote-url-in-html-nyitog?file=/index.html).

That's all 😃.
How to change the color of the browser tab according to the website theme color using the manifest.json file?
Tags: resource
Published: 2022-12-12 05:28:34

---
  title: How to change the color of the browser tab according to the website theme color using the manifest.json file?
  published: true
  tags: Resource
  date: Mon Dec 12 2022 10:58:34 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/change-color-of-browser-tab-according-website-theme-color-using-manifest-json-file
  cover_image: https://res.cloudinary.com/df8e3k5he/image/upload/blog/main_d9ccc0cd16.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/change-color-of-browser-tab-according-website-theme-color-using-manifest-json-file)
  To change the color of the browser tab or the browser's interfaces according to your website's theme color using the `manifest.json` file, you can add the `theme_color` key in the JSON and the value is the hex color code or your theme color.

### TL;DR

```json
{
  "name": "My Awesome App",
  "short_name": "AwesomeApp",
  "theme_color": "#7fffd4" // setting the theme color using the `theme_color` key in the `manifest.json` file
}
```

For example, let's say we have a `manifest.json` file with some basic keys like `short_name`, `name` like this,

```json
{
  "name": "My Awesome App",
  "short_name": "AwesomeApp"
}
```

Now to define a theme color on this `manifest.json` file you can add a key called `theme_color` and then use the hex color code as its value. 

Let's use the hex color code `#7fffd4` (aquamarine color) as the theme color.

It can be done like this,

```json
{
  "name": "My Awesome App",
  "short_name": "AwesomeApp",
  "theme_color": "#7fffd4" // setting the theme color using the `theme_color` key in the `manifest.json` file
}
```

That's all 😃!
Day 12: CI for sdk-py Python packages
Tags: python, programming, opensource, devops
Published: 2022-12-12 05:22:00

---
title: Day 12: CI for sdk-py Python packages
published: true
description: 
tags: python, programming, opensource, devops
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
published_at: 2022-12-12 05:22 +0000
canonical_url: https://code-maven.com/ci-for-sdk-py-python-packages
series: ci-2022-12
---

[sdk-py](https://github.com/dimchat/sdk-py) is a Decentralized Instant Messaging (SDK in Python). It has a `tests` directory with a `test.py` file in it that has some Unit-test-based tests.

After playing with a bit locally I found out - something I was missing in a previous package - that I can use the `-e` flag for `pip install` to install the dependencies.

I also found out that in order to make the tests work in this project I have to install the dependencies from both the root directory and from the `plugins` directory. Once this was cleared setting up the CI was easy.

Here is the [pull-request](https://github.com/dimchat/sdk-py/pull/1)

## GitHub Actions configuration

```yaml
name: CI

on:
  push:
  pull_request:
  workflow_dispatch:
  schedule:
    - cron: '42 5 * * *'

jobs:
  test:
    strategy:
      fail-fast: false
      matrix:
        runner: [ubuntu-latest, macos-latest, windows-latest]
        python-version: ["3.9", "3.10", "3.11"]

    runs-on: ${{matrix.runner}}
    name: OS ${{matrix.runner}} Python ${{matrix.python-version}}

    steps:
    - name: Checkout
      uses: actions/checkout@v3

    - name: Set up Python ${{ matrix.python-version }}
      uses: actions/setup-python@v4
      with:
        python-version: ${{ matrix.python-version }}

    - name: Install dependencies
      run: |
        pip install -e .
        cd plugins
        pip install -e .
        cd ..

    - name: Check Python version
      run: python -V

    - name: Test
      run: python tests/test.py
```

## Conclusion

I think I am a bit tired of this daily CI work. For example this is for day 12, but I already  prepared it on Day 11 and
I am not sure I have the self-discipline to hold it back and only publish it tomorrow. Especially as I already sent the PR.
(Well, I had, so I am publishing this article really on December 12.)

Moreover, now that I sent a PR I would like to go on and try to send a few more. Then maybe for a few days I would not do any.

In addition I think I am letting my readers and certainly myself down by repeatedly doing similar work. At the beginning there were a few interesting ones with databases, but that required way too much work to sustain on a daily base. In addition, I found them by chance. 

If I'd like to have more of these I should look for them. It probably would not be too difficult to find a Python project that uses some X database, but then it also needs to be one that does not have a CI.

Anyway, it is a good experiment.
First week of my internship with QEMU through Outreachy
Tags: outreachy, qemu
Published: 2022-12-12 05:17:35

This is the first week of my internship with QEMU through Outreachy.

## What is Outreachy?

[Outreachy](https://www.outreachy.org/) is an amazing opportunity for those who are underrepresented in the tech industry to work on open source and open science projects under the guidance of experienced mentors. I think most of the applicants are female and are students, but really it's open for everyone who feel disadvantaged to enter the industry.  

For myself, I'm a mother of two little boys and I've been putting my career on hold ever since I became a mother. When I wanted to get back to the industry, I needed a little more flexibility which is difficult to get accommodated in the traditional style workplaces in my home country. Therefore I'm so grateful for Outreachy for providing me this opportunity to work remotely on such an interesting project as QEMU.

## What is QEMU?

[QEMU](https://www.qemu.org/) is an open source machine emulator. It can emulate plethora of architectures ranging from x86, ARM, PowerPC, you name it, it probably can emulate. It can emulate full system such as a [Xilinx development board](https://xilinx-wiki.atlassian.net/wiki/spaces/A/pages/821821485/QEMU+Supported+Platforms) or a Raspberry PI.

For the duration of the internship I'll work on a project "[Extend QEMU Storage Daemon, supporting the new Linux's userspace block driver (ublk) framework](https://www.outreachy.org/outreachy-december-2022-internship-round/communities/qemu/#extend-qemu-storage-daemon-supporting-the-new-linu)". 

I hope to update here frequently about what I learned and share the knowledge with others who are new to QEMU the same as me.
How to run all seeders in Laravel 9
Tags: laravel, beginners, php, laravelseeders
Published: 2022-12-12 05:04:37

---
title: How to run all seeders in Laravel 9
published: true
description: 
tags: laravel, beginners, php, LaravelSeeders
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2022-12-12 04:50 +0000
---
In this article, I will show you how to run all seeders in Laravel 9 instead of running individual seeders.

In order to run all seeders in Laravel, you must first create individual seeders using the artisan command below:

***php artisan make:seeder AdminSeeder***

The above command creates an Admin seeder and will create a file on Database/seeders with the function below:
```
public function run()
{
Admin::create([
"name" => "Admin lastname",
"email" => "admin@gmail.com",
"password" => bcrypt("123456")
]);
}
```

Create another seeder for user as show below:
***php artisan make:seeder UserSeeder***
When you run, you get the following function:
```
public function run()
{
User::create([
"name" => "User lastname",
"email" => "user@gmail.com",
"password" => bcrypt("123456")
]);
}
```

In order to run the specific seeders, you can do this by running the below commad:

***php artisan db:seed --class=AdminSeeder***

To run all seeders at Onces, you need to register all seeders in the DatabaseSeeder.php file.
```
public function run()
{
$this->call([
UserSeeder::class
AdminSeeder::class
]);
}
```

After registering the seeders, you can run using the command below:

***php artisan db:seed***

#Summary#
This post has gone a long way to discussing how to run multiple seeders at once rather than one by one. I hope it helped you sort out your issue in case you have several seeders.

Thanks for reading!
My experience as an Outreachy Intern in a week at Mboalab.
Tags: android, programming, opensource, mboalab
Published: 2022-12-12 04:53:52

Hi everyone, my name is Abdul-wadud Musa, and I recently got accepted for December 2022 to March 2023 Outreachy internship round.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rzy77w5lmiwijsjumps0.png)

I am a certified Android Developer from Nigeria who loves writing codes and developing mobile application. it has always been a wish to contribute to open source libraries/applications 

On the 22nd of November 2022,I got accepted as an intern with [Mboalab](https://website-mboalab.vercel.app/) Developing an android application [Digital stethoscope]for December to March Outreachy internship round. I would be collaborating with other interns to achieve and build the application. 

Some of My Core values are Learning, Consistency, Challenge and growth. 

I am always interested in Learning something new, Learn from others and new ways same thing can be achieved. This always push me to collaborate with various individuals with like minds to see their approach of solving a problem and learn massively from various individuals. 

Consistency removes uncertainty and leads to trust. Trust, in turn, leads to influence

Consistency: Conformity in the application of something, typically that which is necessary for the sake of logic, accuracy, or fairness (definition from Google Dictionary).

> It's not what we do once that shapes our lives.It's what we do consistently [Anthony Robbins]. 

Challenge and growth supplementary to the values mentioned above, Learning something new and being consistent must be complemented with challenge which makes you put into practice what you have learnt over time, task your brain and make research on ways to do things outside your comfort zone, making you gain experience and expertise in the field(Growth) and you can measure your growth. 

Outreachy is a three-month paid and remote internship program conducted twice a year from May to August and December to March. It provides internships to people subject to systemic bias and impacted by underrepresentation in the technical industry where they are living.

I applied to Outreachy to achieve my aim of contributing to open source project  and also learn from other individuals, The first week of the internship has been great and i look forward to learn more and collaborate with my fellow interns.
Telescope -filtering feed URLs - release
Published: 2022-12-12 04:19:24

This week, I finished implementing the feature for [filtering out irrelevant feed URLs](https://github.com/Seneca-CDOT/telescope/issues/3688). Previously, I had added a function for the filtering but had to write the test for it.

As I started writing tests for different feed URLs from different hosts, I noticed that I had missed a few cases. These were the links of type `json+oembed` returned by `wordpress.com`, and a link returned by `blogspot.com` with a `rel` attribute value of `service.post`. From what I was able to find, this kind of link can be used for adding posts/feeds to the feed. So, I added more filters for these as well.

After some refactoring and testing different regular expressions, I ended up with three filters to handle all irrelevant URLs:
- `/\/comments\/feed\/$/`
- `/^https:\/\/public-api.wordpress.com\/oembed/`
- `/^https:\/\/www.blogger.com\/feeds\/[0-9]*\/posts\/default$/`

The first filter here handles the comments feed from `wordpress.com`. I did not specify `wordpress` in the regular expression since it would fail if a user had a custom blog URL. However, for the second and third filters, we can specify the blog host as they specify the blog as a query param and a numeric id respectively.

Following that, I had to add more tests, resolve some merge conflicts and do more testing to ensure that the relevant feed URLs were returned for different blog hosts. Once I confirmed that everything worked correctly, I created a [PR](https://github.com/Seneca-CDOT/telescope/pull/3780).
Journey to my AWS Certified Database Specialist
Tags: aws, cloud, database, news
Published: 2022-12-12 04:12:50

## **Context**

- My company provides a generous offering of learning platform (Udemy Business) for self-study.

- Being a profile of DBA in Cloud they assigned me training on AWS Certified Database specialist. The catch here is that course needs to be completed within the given deadline.
 
- For a while now, I've been eyeing for this certification, finally committed and booked the exam with 2 months to study for it.
- Did the studying outside of work (this involved nights and weekends).
[](url)
## **Study Plan of action**

- Started watching the course on Udemy Ultimate AWS Certified Database Specialist 2022.

- Initially my pace was very slow and course is quite long for completing vast topic. So, You have to show patience to complete the course.

- Big Note here due to multiple topic its quite difficult to remember each topic point by point so i have tried to prepare written notes for the points that i feel is going to be asked in exam.

- I have paced up the video to 1.5X speed that boost up my enthusiasm to complete the course.

- It took me around 5 weeks to complete the entire course with hand written notes.

## **Practice Paper**

- In Last week, I had revised the entire notes and important pointers that i prepared the for the exam.

- Then I started preparing papers of Stephen Maarek's practice paper on Udemy (Must doing activity).

- I had done practice paper on Whizlabs.com as well for ensuring the hands on practice of questions.

- Initially I was failed in all the practice papers then I focused on the areas where I was lagging.

- Re-attempted all the papers again and cleared them in next attempt.

## **Exam**

- Booked exam in Pearson online Center to give the exam.

- Went to exam center 40 mins before the exam timings. Luckily got parking as well.

- Initial process was they used to do biometric and check your Identity proof preferably bring your all IDs mentioned in the list visible during exam scheduling.

- Important note: you need to check the exam center review which is must as my center staff was not at all supportive and not even educated enough to conduct the AWS exam. During my exam there was lot of noise in the center they are making, which created difficulty to focus in exam.

- But still finished my exam half an hour before and reviewed all the questions that i had marked for review.

- Got the result after 24 hours and i got cleared it with marks 768/1000.

- I feel blessed and felt like all my hard work was worth it.

All the very best to all of you those who are planning for this exam and feel free to ping me Twitter(@amang4040) for any kind of guidance and queries.
Leadership Talk - 5 Brilliants Traits of Leading by example
Tags: aws, community, leadership, acd
Published: 2022-12-12 03:56:12

For several years being on the organising side on #AWS Community Day, choose to be a speaker at **AWS Community Day 2022** with a Leadership Talk - 5 Brilliant Traits of Leading by example
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fkk9s0zz4adpkgk3raeh.jpeg)

I enjoyed traversing through the 5 brilliant traits of how a person could become a transformational leader.
- Embrace failure
- Build trust
- Earn Respect
- Self-Actualization
- Transformational leadership


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3vf2hp0empk9i01nt3b6.png)

Success of the session lies in the audience and when you got such a hand written notes, its mind blowing

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fj8od7rskompgdpfv15f.png)

Summary of the session went like this 

**Embrace Failure**
Recently I met a very young and skilled professional and he asked me, mam, how would you face failure?  
Well, he is just out of college and less than a year into his IT job. 
I was curious to know why such a question.

He said about his ambition to pursue higher studies, cleared the competitive exam, got admission into a reputed university but the visa got rejected. 

It sounded so trivial to me because as a mother I looked at him from the eyes of his parents and said it’s not the end of life dear. Move on!! But to him, it's the first failure which changed the course of his career though temporarily.

And answered his question - there were petty insults, dejections and loss - many times died with guilt. But each one made me stronger and moulded me for a better tomorrow.

> It’s ok 
> Everyone has bad days
> Let’s take a pause
> Rest for a while
> Reset and Restart

**Build Trust**
Remember, no leader can build a great team without trust!! Let’s build that first!

**Earn Respect**
Remember the Golden Rule - do unto others what ought to be done to you
If you Treat everyone with honesty, dignity, respect and sensitivity. 

**Self-Actualize**
Identify, develop and apply your gifts and passions so you can best contribute in ways that are most meaningful to you.

**Transformational Leader**
With all this, you can obviously become a transformational leader and create such visionary leaders as well.

Wishing you a great success ahead!!

I really loved the idea of creative virtual photo booth. Thanks to Avinash Dalvi and team.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lgv10eworrq7z5vw3zll.png)

**Recording:**
If you have missed, here is the [recording](https://www.youtube.com/watch?v=NyxZHZhE0M8&t=9805s)
Client-side image compression with Supabase Storage
Tags: supabase, webdev, javascript, compression
Published: 2022-12-12 03:45:31


One of the projects I have been working on allows users to upload and share images. Super novel, I know. We are using [Supabase](https://supabase.com/) for the backend, and the images are stored in Supabase Storage - an S3 compatible object store. I’ve used Supabase a few times now and found it overall to be a neat product (#notsponsored). However, this was my first time using the storage offering and we ran into an issue from the outset. Users were uploading photos from their phones with very large resolutions and consequently huge file sizes. This wasn’t good because we have limits on storage and bandwidth, plus the gallery view of the app was taking forever to load.

Unfortunately, Supabase does not currently support any kind of image optimization. It’s been [commonly](https://github.com/supabase/supabase/discussions/1407) [requested](https://github.com/supabase/storage-api/issues/47), and quite likely on their roadmap, but at least for now there wasn’t a setting I could quickly toggle to solve the problem. I’ve run into a similar issue before using Amazon S3, and in that project we used a lambda function to do image optimisation when an image was uploaded to the bucket. But this didn’t seem particularly straightforward with Supabase, so I went searching for a different solution.

After researching a couple of different options, what I landed on was a package called [compressorjs](https://github.com/fengyuanchen/compressorjs) written by Chen Fengyuan. This library performs compression and resizing of images in the browser. I was a bit skeptical at first, but it's a cool project and has good browser support. How Compressorjs works is that it uses the HTML5 canvas element to read the original image data and perform lossy transformations to compress and resize the image. There's a whole bunch of transformation options. For my project, what I have found is simply changing the maximum width of the image to 600px and slightly reducing the quality has greatly reduced the file sizes.

Here is how you might go about using compressorjs with Supabase:

```js
import Compressor from "compressorjs";

document.getElementById("file").addEventListener("change", (e) => {
  const image = e.target.files[0];

  if (!image) {
    return;
  }

  new Compressor(image, {
    quality: 0.9,
    maxWidth: 600,

    success(compressedImage) {
      // compressedImage contains the Blob
      // Upload the compressed image to Supabase storage
      supabase.storage
        .from("images")
        .upload(`public/filename`, compressedImage);
    },
    error(err) {
      console.log(err.message);
    },
  });
});
```

Cover photo thanks to [Tamanna Rumee](https://unsplash.com/@tamanna_rumee)