teleren/devto huggingface dataset:
Please help me write an article?
Tags: chatgpt, openai, highniti, articlewriting
Published: 2022-12-02 10:52:11

Question: Please help me write an article?

I asked this question to #ChatGPT and the answer I got surprised me. 😱

I am amazed, totally amazed. Below is AI's response. 👇

Sure, I'd be happy to help you write an article. To get started, it would be helpful to know what the article is about and what your intended audience is.

Do you have a general topic in mind, or do you need help coming up with one? Once we have a topic, we can brainstorm some ideas and outline the main points of the article, which will make it easier to write.

Here are some steps to help you write an article of at least 2,000 words:

1. Choose a topic that you are interested in and that you know a lot about, or that you are willing to research and learn about. This will make the writing process more enjoyable and will ensure that you have enough information to write a comprehensive article.

2. Research your topic thoroughly. Gather as much information as you can from a variety of sources, such as books, articles, websites, and interviews with experts. Take notes and organize your research so that you can easily refer to it while writing.

3. Create an outline for your article. This will help you organize your thoughts and ideas and will make the writing process much easier. Your outline should include an introduction, a main body with several sections or sub-topics, and a conclusion.

4. Write a clear and compelling introduction that will grab the reader's attention and give them a sense of what the article is about. The introduction should also include a thesis statement, which is a one-sentence summary of the main point of the article.

5. Develop each main point or sub-topic in a separate section or paragraph. Use clear and concise language and provide examples, evidence, and supporting details to back up your points.

6. Conclude your article by summarizing the main points and restating your thesis. You can also include a call to action or a recommendation for further reading or action.

7. Edit and proofread your article carefully to ensure that it is well-written, well-organized, and free of errors. You may want to ask someone else to read it and provide feedback, as well.

I hope these steps help you write an engaging and informative article of at least 2,000 words. If you have any other questions or need more specific advice, feel free to ask. Good luck with your writing!

How was that? amazed right? 🤯

Finally, I got an assistant who can help me write an article on Dev.to 👨 💻👩 💻

See you in another upcoming article generated by AI. ✅

Cheers.
This Week in Python
Tags: python, discuss, thisweekinpython
Published: 2022-12-02 10:40:35


**Fri, December 02, 2022**


This Week in Python is a concise reading list about what happened in the past week in the Python universe. 

**I have received some good suggestions for this week's content. Thank you.**

**Did I miss anything from the Python universe this week? What did you read or tried out?**


## Python Articles



- [The Origins of Python](https://inference-review.com/article/the-origins-of-python) 
- [Developing and Testing an Asynchronous API with FastAPI and Pytest](https://testdriven.io/blog/fastapi-crud/) 
- [Data-oriented Programming in Python](https://www.moderndescartes.com/essays/data_oriented_python/) 
- [Python bytecode explained](https://github.com/MoserMichael/pyasmtool/blob/master/bytecode_disasm.md) 
- [I/O is no longer the bottleneck](https://benhoyt.com/writings/io-is-no-longer-the-bottleneck/) 




## Projects



- [py-obsidianmd](https://github.com/selimrbd/py-obsidianmd) – Python utilities for the personal knowledge management tool Obsidian 
- [auto-editor](https://github.com/WyattBlue/auto-editor) – Auto-Editor: Effort free video editing
- [repo2docker](https://github.com/jupyterhub/repo2docker) – Turn repositories into Jupyter-enabled Docker images
- [quickadd](https://github.com/Acreom/quickadd) – Parse natural language time and date expressions in python
- [django-virtual-models](https://github.com/vintasoftware/django-virtual-models) – Improve performance and maintainability with a prefetching layer in your Django project



**Did I miss anything from the Python universe this week? What did you read or tried out?**
Solving day 02 of Advent of Code 2022 in JavaScript
Tags: challenge, adventofcode, javascript, video
Published: 2022-12-02 10:33:08

---
title: Solving day 02 of Advent of Code 2022 in JavaScript
published: true
description: JavaScript walkthrough of Advent of Code 2022 (day 02)
tags: challenge, AdventOfCode, javascript, video
series: Advent of Code 2022 in Javascript
---

{% youtube Q_IcvDn914U %}
Multicloud Deployment Automation
Tags: multicloud, openshift, ansible, automation
Published: 2022-12-02 10:27:18

Red Hat 𝘼𝙣𝙨𝙞𝙗𝙡𝙚®:
(1) is a powerful open source 𝙖𝙪𝙩𝙤𝙢𝙖𝙩𝙞𝙤𝙣 𝙡𝙖𝙣𝙜𝙪𝙖𝙜𝙚.
(2) is also a 𝙙𝙚𝙥𝙡𝙤𝙮𝙢𝙚𝙣𝙩 𝙖𝙣𝙙 𝙤𝙧𝙘𝙝𝙚𝙨𝙩𝙧𝙖𝙩𝙞𝙤𝙣 𝙩𝙤𝙤𝙡.
(3) provides more productive drop-in 𝙧𝙚𝙥𝙡𝙖𝙘𝙚𝙢𝙚𝙣𝙩𝙨 𝙛𝙤𝙧 𝙢𝙖𝙣𝙮 𝙘𝙤𝙧𝙚 𝙘𝙖𝙥𝙖𝙗𝙞𝙡𝙞𝙩𝙞𝙚𝙨 in other automation solutions,
(4) seeks to 𝙨𝙤𝙡𝙫𝙚 𝙤𝙩𝙝𝙚𝙧 𝙢𝙖𝙟𝙤𝙧 𝙪𝙣𝙨𝙤𝙡𝙫𝙚𝙙 𝙄𝙏 𝙘𝙝𝙖𝙡𝙡𝙚𝙣𝙜𝙚𝙨, such as CI/CD.

𝘼𝙣𝙨𝙞𝙗𝙡𝙚 𝘼𝙜𝙣𝙤𝙨𝙩𝙞𝙘 𝘿𝙚𝙥𝙡𝙤𝙮𝙚𝙧, (aka 𝘼𝘼𝘿), (aka 𝘼𝙜𝙣𝙤𝙨𝙩𝙞𝙘𝘿), is a 𝙛𝙪𝙡𝙡𝙮 𝙖𝙪𝙩𝙤𝙢𝙖𝙩𝙚𝙙 2 𝙋𝙝𝙖𝙨𝙚 𝙙𝙚𝙥𝙡𝙤𝙮𝙚𝙧 for building and deploying everything 𝙛𝙧𝙤𝙢 𝙗𝙖𝙨𝙞𝙘 𝙞𝙣𝙛𝙧𝙖𝙨𝙩𝙧𝙪𝙘𝙩𝙪𝙧𝙚 𝙩𝙤 𝙛𝙪𝙡𝙡𝙮 𝙘𝙤𝙣𝙛𝙞𝙜𝙪𝙧𝙚𝙙 𝙧𝙪𝙣𝙣𝙞𝙣𝙜 𝙖𝙥𝙥𝙡𝙞𝙘𝙖𝙩𝙞𝙤𝙣 environments running on:
(1) either 𝙥𝙪𝙗𝙡𝙞𝙘 𝘾𝙡𝙤𝙪𝙙 Providers
(2) or 𝙊𝙥𝙚𝙣𝙎𝙝𝙞𝙛𝙩 clusters.

The 𝙩𝙬𝙤 𝙥𝙝𝙖𝙨𝙚𝙨 are:
(1) 𝙄𝙣𝙛𝙧𝙖𝙨𝙩𝙧𝙪𝙘𝙩𝙪𝙧𝙚 Phase
- Pre-deploy stage
- Deploy instances
- Post Deployment

(2) 𝙎𝙤𝙛𝙩𝙬𝙖𝙧𝙚 Phase
- Pre-deploy stage
- Software Deploy
- Post Deployment

Thanks to Guillaume Coré, Wolfgang Kulhanek, Johnathan Kupferer, Prakhar Srivastava, Josh D., Shachar "Sha" Borenstein Ne'eman, Patrick Rutledge, Tony Kay, Mitesh Sharma 🏠, Judd Maltin, and Nate Stephany for the project:
𝘼𝙜𝙣𝙤𝙨𝙩𝙞𝙘𝘿 - 𝘼𝙣𝙨𝙞𝙗𝙡𝙚 𝘿𝙚𝙥𝙡𝙤𝙮𝙚𝙧 𝙛𝙤𝙧 𝙢𝙪𝙡𝙩𝙞𝙥𝙡𝙚 𝘾𝙡𝙤𝙪𝙙 𝘿𝙚𝙥𝙡𝙤𝙮𝙚𝙧𝙨
https://lnkd.in/ejEFrAJw
Johnathan Kupferer

𝙎𝙩𝙖𝙮 𝙩𝙪𝙣𝙚𝙙 𝙗𝙮 𝙛𝙤𝙡𝙡𝙤𝙬𝙞𝙣𝙜
https://lnkd.in/eA-uJNP

#cloud #multicloud #cloudcomputing #ansible #openshift #opensource #publiccloud #agnosticd #automation #redhat #deployer #aad #solutionsarchitect #cloudarchitect #multicloudarchitect #cloudsolutionsarchitect #cloudconsultant #kubernetes #cloudnative #openshift

https://www.linkedin.com/posts/mahmoudrabie2004_didabryouabrknowabrthat-cloud-multicloud-activity-7003640617352183808-SBYI?utm_source=share&utm_medium=member_desktop
Como exibir o progresso das promessas em JavaScript
Tags: javascript, tutorial, webdev
Published: 2022-12-02 10:14:52

Conteúdo
1.	Visão geral
2.	Implementação
3.	Conclusão

Visão geral
Exibir o progresso de várias tarefas conforme elas são concluídas pode ser útil para o usuário, pois indica quanto tempo ele pode precisar esperar para que as tarefas restantes sejam concluídas.

Implementação
Vamos começar com a marcação!
Tudo o que você precisa é de uma tag script para apontar para um arquivo JavaScript (que será implementado abaixo) e um elemento div, cujo texto será manipulado para atualizar o contador de andamento das tarefas concluídas.


<!DOCTYPE html>
<html>
<body>
    <div id="progress"></div>    
    <script src="app.js"></script>
</body>
</html>
Em seguida, o JavaScript!

Começaremos criando uma função que resolve uma promessa após um tempo aleatório.

Fazemos isso porque se assemelha a como funcionará em um aplicativo do mundo real, por exemplo, solicitações HTTP resolvidas em momentos diferentes.

async function task() {
  return new Promise(res => {
    setTimeout(res, Math.random() * 5000);
  })
}

Em segundo lugar, criaremos um array de 100 promessas e atualizaremos o texto de progresso para informar ao usuário quando todas as tarefas forem concluídas.

const loadingBar = document.getElementById('loadingBar');

(async() => {
  const promises = new Array(100)
    .fill(0)
    .map(task);

  loadingBar.textContent = `Loading...`;
  await Promise.all(promises);
  loadingBar.textContent = `Loading Finished`;
})();

Agora imagine se isso levar 30 segundos para ser concluído. Tudo o que o usuário verá na tela é o texto 'Carregando...' enquanto estiver em andamento.

Essa não é uma mensagem muito útil!

Vamos melhorar isso agora, atualizando o texto de progresso após a resolução de cada tarefa.

O trecho de código abaixo é a implementação completa.

const loadingBar = document.getElementById('loadingBar');

async function task() {
  return new Promise(res => {
    setTimeout(res, Math.random() * 5000);
  })
}

function loadingBarStatus(current, max) {
  loadingBar.textContent = `Loading ${current} of ${max}`;
}

(async() => {
  let current = 1;
  const promises = new Array(100)
    .fill(0)
    .map(() => task().then(() => loadingBarStatus(current++, 100)));

  await Promise.all(promises);
  loadingBar.textContent = `Loading Finished`;
})();

Agora, você pode ver que conforme cada promessa é resolvida, o contador é incrementado e exibido para o usuário.

Conclusão
Resumindo, tudo o que você precisa fazer é atualizar o progresso à medida que cada promessa é resolvida.

Espero que você tenha achado este breve tutorial útil.

Deixe-me saber seus pensamentos nos comentários abaixo.
V Ionic (ver.5) pridať toast alert informovanie
Tags: ionic
Published: 2022-12-02 10:09:44

V Ionic (ver.5) aplikácii je vhodné pridať funkcionalitu zobrazovania tzv.toast-u (ti.krátkodobo zobrazenej informácie o tom, že sa vykonala/vykonáva nejaká akcia).
Pre toto si v aplikácii vytvorím samostatný servis "alert", príkazom:

```
ionic generate service services/alert
```
vo vytvorenom súbore "alert.service.ts" doplniť kód:

```
import { Injectable } from '@angular/core';
import { ToastController } from '@ionic/angular';

@Injectable({
  providedIn: 'root'
})
export class AlertService {

  constructor(
    private toastController: ToastController
  ) { }
  // zobrazenie toast informacnyho alert-u:
  async presentToast(message: any) {
    const toast = await this.toastController.create({
      message: message,
      duration: 2000,
      position: 'bottom',
      color: 'success'
    });
    toast.present();
  }

}
```
Úlohou tohto servisu bude zobraziť "toast" s požadovaným textom/informáciou.
A teraz na stránke, kde vykonávam nejakú operáciu a chcem tam zobraziť tento toast/alert, napr.v súbore "mytags.page.ts" doplniť takýto kód:

```
import { Component, OnInit } from '@angular/core';
import { ApiService } from '../../services/api.service';
import { NavController } from '@ionic/angular';
import { AlertService } from '../../services/alert.service';

@Component({
  selector: 'app-mytags',
  templateUrl: './mytags.page.html',
  styleUrls: ['./mytags.page.scss'],
})

export class MytagsPage implements OnInit {
  pageContent = null;
  constructor(
    private api: ApiService,
    private navCtrl: NavController,
    private alertService: AlertService
  ) { }
		...
  ngOnInit() {
    // ToDo: ID prihlaseneho user-a:
    const loggedUserID = 3;
    this.api.getUserTags(loggedUserID).subscribe((response) => {
      console.log(response);
      this.pageContent = response;
    });
  }

  // naspat na predchadzajucu stranku:
  previousPage()  {
    this.navCtrl.back();
  }
  // zmaze vybraty tag:
  deleteTag(TagID)  {
    // ToDo: ID prihlaseneho user-a:
    const loggedUserID = 3;
    this.api.deleteTag(TagID).subscribe((response) => {
      console.log('tag ID: '+TagID);
      this.pageContent = response;
      console.log(response);
      this.alertService.presentToast('tag (ID: '+TagID+') successfully deleted');
      // a znovu nacitaj/refreshni stranku:
      this.ngOnInit();
    });
  }
}
```
tj.je tu pridaná referencia na tento servis, a pri vykonávaní funkcie "deleteTag()" sa volá zobrazenie toast-u (alertu) v ktorom bude informácia (že sa tag s daným ID úspešne vymazal).
...
Take advantage of closure
Tags: programming, javascript, interview, webdev
Published: 2022-12-02 10:04:17

---
title: Take advantage of closure
published: true
description: 
tags: #programming #javascript #interview #webdev
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---

I had an interesting question in a technical interview. I had to create function which output behaves this way.

```js
counter() // 0
counter() // 1
counter() // 2
```

Each time counter is executed it should log number incremented by one. I immediately realized the idea of interviewer was to see if I understand closures.

This was my solution.

```js
const counter = (() => {
  let count = -1;
  return () => {
    console.log(++count); 
  };
})()


counter();
counter();
counter();
counter();

```

As you could see I also used Immediately Invoked Function Expression (IIFE) which creates its own scope instantly.

##Conclusion

The more experienced I am, the more I realize how important is `Javascript: The good parts` book. Most of the abstractions used in js libraries/frameworks are implemented above ideas described in this book. 
If you want know more about closures you can read about them in chapter 4 (section `Closure`).
Ruby + ML
Tags: machinelearning, ruby
Published: 2022-12-02 09:31:41

Ruby is a popular programming language that is often used for building web applications, but it can also be used for machine learning tasks. In fact, there are several libraries and frameworks available for Ruby that make it easy to implement machine learning algorithms and models.

One of the key benefits of using Ruby for machine learning is that it is a high-level language that is easy to read and write. This means that you can quickly prototype machine learning models and algorithms in Ruby, without having to write a lot of complex code. Additionally, Ruby has a rich ecosystem of libraries and frameworks that can help you to quickly and easily implement machine learning models.

One of the most popular machine learning libraries for Ruby is "**Scikit-Learn**" which is a port of the popular Python machine learning library of the same name. Scikit-Learn provides a range of algorithms and models that can be used for tasks such as classification, regression, clustering, and dimensionality reduction. It also includes tools for evaluating and comparing the performance of different models.

Here's an example of how you might use Scikit-Learn to train a simple linear regression model in Ruby:

```ruby
# Install the scikit-learn gem
gem install scikit-learn

# Load the necessary libraries
require 'numpy'
require 'scikit-learn'

# Load the sample data
data = Numpy.loadtxt('data.csv', delimiter=',')

# Split the data into features and labels
X = data[:, 0:2]
y = data[:, 2]

# Create a LinearRegression object
model = ScikitLearn::LinearRegression.new

# Train the model on the data
model.fit(X, y)

# Make predictions with the trained model
predictions = model.predict(X)
```

This code loads the **scikit-learn** gem, loads the sample data from a CSV file, splits the data into features and labels, and then trains a linear regression model on the data. Once the model is trained, it can be used to make predictions on new data.

Another popular machine learning library for Ruby is "TensorFlow," which is a powerful open-source library for machine learning that was developed by Google. TensorFlow provides a range of algorithms and models that can be used for tasks such as image recognition, natural language processing, and generative modeling. It also includes tools for building, training, and evaluating neural networks, which are a popular type of machine learning model.

Here's an example of how you might use **TensorFlow** to train a simple neural network in Ruby:

```ruby
# Install the tensorflow gem
gem install tensorflow

# Load the necessary libraries
require 'tensorflow'

# Load the sample data
data = TensorFlow.load_csv('data.csv', [[0.0, 0.0], [0.0, 0.0]])

# Split the data into features and labels
X = data[:0]
y = data[:1]

# Create a neural network model
model = TensorFlow::Sequential.new
model.add(TensorFlow::Dense.new(units: 32, activation: :relu, input_shape: [2]))
model.add(TensorFlow::Dense.new(units: 1, activation: :sigmoid))

# Compile the model
model.compile(optimizer: :adam, loss: :binary_crossentropy, metrics
```
Miracle Watt Reviews: Read Pros, Cons, Costs, Complaints!
Published: 2022-12-02 09:27:13

 Keep a lid on it. They're not the greatest speaker. It's been quite scarce lately. There are some limits. Maybe it does. It is crucial for the info contained in these Miracle Watt Reviews articles to be accurate. I would recommend the path which many others have taken with that compilation. It's a piece of cake folks. It is especially true of some susceptibility. Perhaps that is not just the best time to replace your old Miracle Watt Reviews with a new one. 

Visit Official Website: https://www.outlookindia.com/business-spotlight/miracle-watt-buyers-alert-miraclewatt-complaints-and-results-news-240676

Related Links

https://www.outlookindia.com/outlook-spotlight/skincell-advanced-australia-mole-and-skin-tag-corrector-chemist-warehouse-report-you-need-to-know-news-225911
https://www.outlookindia.com/outlook-spotlight/idrotherapy-australia-wrinkle-reducer-cream-critical-customer-report-you-need-to-see-news-225925/


https://mobissue.com/xncu/yiil
https://pdfhost.io/v/t4TRnW6Yr_Miracle_Watt_Reviews_The_Best_EnergySaving_Smart_Home_Gadgets
https://workdrive.zohoexternal.com/file/rwepj53b9f121b8b84564a30d0f6756321fa6
https://studylibfr.com/doc/10141443/miracle-watt-reviews--read-pros--cons--costs--complaints-
https://www.yumpu.com/en/document/view/67413240/miracle-watt-reviews-a-hoax-or-legit
https://pubhtml5.com/iidl/wacw/
https://issuu.com/sldgfkoxsz/docs/miracle_watt_reviews
https://issuu.com/sldgfkoxsz
https://www.slideshare.net/MiracleWattReviews/miracle-watt-reviews-a-hoax-or-legit-read-shocking-user-report
https://anyflip.com/aaakg/mhgu
https://online.fliphtml5.com/pftlv/ighh/
https://www.flipsnack.com/B8765CEEFB5/does-miracle-watt-energy-saver-really-work.html
https://www.academia.edu/92028581/Miracle_Watt_Reviews_Read_Pros_Cons_Costs_Complaints_
https://www.slideserve.com/miraclewattorder/is-miracle-watt-a-scam-or-legit
https://www.edocr.com/v/ejv4gxze/sndfiroza/miracle-watt-reviews
https://heyzine.com/flip-book/8a7397cb7e.html
https://pdfslide.net/healthcare/miracle-watt-reviews-best-energy-saving-gadgets-for-your-home.html
https://www.opendrive.com/file/NDJfMzI3NjQxNTFfcmdwVnQ
https://issuhub.com/view/index?id=214491
HTML CSS Tutorial for Beginners
Tags: webdev, html, css, beginners
Published: 2022-12-02 09:18:39

These strong coding languages are useful for more than just web developers; you might find yourself in a situation where you need them on the job. Even having a rudimentary understanding of these languages could significantly improve your life (and your résumé!). Need to learn HTML and CSS check out the video 

{% embed https://youtu.be/QMnv3QrjZoU %}
Adding Angular Material to Angular Projects.
Tags: angular, material
Published: 2022-12-02 09:17:10

**Install Angular Material**

```python
ng add @angular/material
```

The `ng add`command will install Angular Material, the [Component Dev Kit (CDK)](https://material.angular.io/cdk/categories), [Angular Animations](https://angular.io/guide/animations) and ask you the following questions to determine which features to include:

1. Choose theme custom or pre-built-in material themes.
2. Set up global Angular Material Typography Styles.
3. Set up browser animation for Angular material.

On Installation in angular project files

- Added project dependencies to `package.json`
- Added the Roboto font to your `index.html`
- Added the Material Design icon font to your `index.html`
- Added a few global CSS styles to:
    - Remove margins from `body`
    - Set `height: 100%` on `html` and `body`
    - Set Roboto as the default application font
    

Finally need to import module in `app.modult.ts` to display the component.

Example :

```tsx
//app.module.ts
import { MatSlideToggleModule } from '@angular/material/slide-toggle';

@NgModule ({
  imports: [
    MatSlideToggleModule,
  ]
})
class AppModule {}
```

And in `app.component.html` file and run the project

```tsx
//app.component.html
<mat-slide-toggle>Toggle me!</mat-slide-toggle>
```

Reference : [Official Docs](https://material.angular.io/guide/getting-started)
What is a VPN?
Tags: security, writing
Published: 2022-12-02 08:55:29

A VPN, or virtual private network, is a valuable tool for anyone who values their online privacy and security. By encrypting your internet connection, a VPN hides your online activities from your internet service provider, hackers, and other third parties.

One of the main benefits of using a VPN is the ability to access restricted or blocked websites. Many countries and organizations impose censorship on certain websites and content. A VPN allows you to bypass these restrictions by routing your internet traffic through a server in a different location.

Another advantage of using a VPN is enhanced security. As mentioned, a VPN encrypts your internet connection, making it much more difficult for hackers to intercept your data. This is especially important when using public Wi-Fi, as these networks are often unsecured and vulnerable to hacking.

Additionally, a VPN can help protect your personal information from being collected and sold by your internet service provider. With a VPN, your ISP cannot track your online activities or sell your data to advertisers.

It's important to note that not all VPNs are created equal. It's crucial to research and choose a reputable VPN provider with a proven track record of security and privacy.

In conclusion, a VPN is an essential tool for anyone who values their online privacy and security. Whether you're trying to access restricted content or protect your personal information, a VPN can provide the protection you need.

find out how to manage your corporate VPN, go to https://sevio.it
Goodies from Santa
Tags: beginners, tooling, webdev
Published: 2022-12-02 08:38:22

As the year ends we tend to reflect
At all that has passed, at a bug, a defect

We start to count the days until Christmas arrives
And hope to get some gifts since we are naughty and nice

With that thought in mind and the need to share
I give a list to use everywhere

It is a list of tools for both young and old
To view, and try out, this is what I was told

There is somenthing for all, with both old and new
If you want you can comment and I will add a few

https://lnkd.in/e_UUxYj
JavascriptUI is finally here!
Tags: javascript, webdev, react, opensource
Published: 2022-12-02 08:28:09

If you're new to JavascriptUI. Just picture SwiftUI, but with Javascript. JavascriptUI is a Javascript-only framework with probably the best DX & flexibility. 

[javascriptui.dev](javascriptui.dev)

Here is a sample code:

```typescript
class App extends PageComponent {
  constructor() {
    super();
    this.text("Dogs").fontSize(32).color('black').textAlign('center')
      .padding(50).fontFamily('arial').display('flex').alignItems('center')
      .flexDirection('column');

    fetch("https://dog.ceo/api/breed/borzoi/images")
      .then(res => res.json()).then(data => {
        const photos = data.message.splice(0, 10);
        this.addChild(
          new Container().display('grid').gridTemplateColumns([200, 200])
            .gap(15).marginTop(50).addChild(
              ...photos.map((photo, index) => {
                return new Image().attrSrc(photo).attrAlt('Dog photo ' + (index + 1))
                  .height(200).width(200).objectFit('cover').borderRadius(8)
                })
              )
            )
      })
  }
}
```

![picture of dogs in grid](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5rwyzk3m0tyf7o4xinhp.png)

It's now in open beta and actually looking for contributors. https://github.com/tulburg/javascriptui