teleren/devto huggingface dataset:
Optimize your Media Experience
Tags: webdev, javascript, beginners, podcast
Published: 2022-08-23 22:49:02


Original: https://codingcat.dev/podcast/2-16-optimize-your-media-experience

{% youtube https://www.youtube.com/watch?v=BTwPo4ho0OY %}

## Questions

1. Last time we had you on, you were working for Applitools, can you give us some background and how you ended up at Cloudinary?
2. For those that don’t know, what is Cloudinary?
3. Why or when might we need a media manager?
4. Pricing?
5. What frameworks are supported?
6. Demo

### Additional Links

[https://www.learnwithjason.dev/blog/auto-generate-social-image](https://www.learnwithjason.dev/blog/auto-generate-social-image)

[https://egghead.io/courses/building-an-opengraph-image-generation-api-with-cloudinary-netlify-functions-and-react-914e](https://egghead.io/courses/building-an-opengraph-image-generation-api-with-cloudinary-netlify-functions-and-react-914e)

[https://cloudinary.com/blog/how_to_adopt_avif_for_images_with_cloudinary](https://cloudinary.com/blog/how_to_adopt_avif_for_images_with_cloudinary)
Day 620 : Life Goes On
Tags: hiphop, code, coding, lifelongdev
Published: 2022-08-23 22:47:38

_liner notes_:
- Professional : Made some revisions suggested to the documentation I worked on. Had a meeting about an upcoming event. Then I put together the slides for an upcoming talk. Updated some things. Not a bad day.

- Personal : During lunch, instead of studying Japanese, I worked on using the new webcam as a portable camera for my travel blog. I ran into an issue, but that was because the phone's, I connected the camera to, battery was low. I connected a USB hub and it all worked. I bought the PRO version of the app, so no more ads. I then put the camera as a source in an online dashboard thing and started broadcasting to it. Then I went to the admin section I created for my site and started adding and removing stuff from the live stream and watched it on the page I made. It all went just like when I had the DJI Pocket 2 as the camera. Only thing was that the phone overheated and shut down. It was pretty hot outside. I wonder if it was also because I was charging at the same time. Will have to do more testing, but everything worked like previously. I also called the Japan Embassy to get a status on my visa and left a message.

![Aerial view of a lake, the shore, then a pine tree forest and then tree covered mountains that extend into the distance](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xchn2t9nvy3onmie5arb.jpg)

Going to review and study some Japanese. Since I was working on the side project during lunch, I may update some things also in the live streaming section. Also, there is a new show called "Sandman" on Netflix that looks pretty cool. May end the night watching an episode. It sounds like it's going to rain! Just got a voicemail from the Japan Embassy saying they put my visa in the mail. I paid for overnight morning delivery, so I'm hoping to get it in the morning. Once I get it, my life goes on. I was so worried! haha

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube 9sS-QEyLycs %}
Join me on Twitch
Tags: programming, softwareengineer, edsretail
Published: 2022-08-23 22:45:32

It's Tuesday 🔥❗ ... Join me tonight at 17:30 MST on Twitch for some chilled coding adventures👨‍💻... Tonight, we're digging into the open-source FastReports library for #edsretail

https://www.twitch.tv/coder4t
Stacks on Stacks on Stacks with codeSTACKr
Tags: webdev, javascript, beginners, podcast
Published: 2022-08-23 22:44:02


Original: https://codingcat.dev/podcast/2-15-stacks-on-stacks-on-stacks-with-code-stac-kr

{% youtube https://www.youtube.com/watch?v=lLpB955zogo %}

## Questions

1. Tell us about your background?
2. What made you want to start codeSTACKr?
3. How do you come up with the topics for your videos?
4. What is your workflow for creating content?
5. How do you produce well curated content and do you notice a bump from that?
6. How do you grow your audience, what marketing strategies do you use?

## Additional Links

MonogoDB - [https://www.mongodb.com/](https://www.mongodb.com/)

MongoDB Atlas - [https://www.mongodb.com/atlas/database](https://www.mongodb.com/atlas/database)

Postman - [https://www.postman.com/](https://www.postman.com/)
Building up Better Communities
Tags: webdev, javascript, beginners, podcast
Published: 2022-08-23 22:39:02


Original: https://codingcat.dev/podcast/2-14-building-up-better-communities

{% youtube https://www.youtube.com/watch?v=MD5Kr7pdSKc %}

## Questions

1. Can you tell us about your background?
2. Tell us more about what Orbit is and how you got involved there.
3. Levels
4. How does Orbit help grow your community?
  1. What benefits does Orbit provide?

## Additional Links

* The Orbit Model - [https://orbitmodel.com/](https://orbitmodel.com/)
* The Orbit Model Pic - [https://raw.githubusercontent.com/orbit-love/orbit-model/main/images/orbit_model_color.png](https://raw.githubusercontent.com/orbit-love/orbit-model/main/images/orbit_model_color.png)
* The Orbit Model Repo - [https://github.com/orbit-love/orbit-model](https://github.com/orbit-love/orbit-model)
Managing Multiple Data Sources in GraphQL
Tags: webdev, javascript, beginners, podcast
Published: 2022-08-23 22:34:02


Original: https://codingcat.dev/podcast/2-13-managing-multiple-data-sources-in-graphql

{% youtube https://www.youtube.com/watch?v=kWWBbkNCtpE %}

## Questions

1. Can you give us a brief explanation of what StepZen does and how you got your start there?
2. Who is the target customer?
3. How does StepZen compare to Zapier or IFTTT?

Links

* StepZen 101: [https://github.com/stepzen-dev/stepzen-101](https://github.com/stepzen-dev/stepzen-101)
* StepZen-SvelteKit Example: [https://github.com/stepzen-dev/examples/tree/main/with-sveltekit](https://github.com/stepzen-dev/examples/tree/main/with-sveltekit)
* The Practical Dev - GraphQL, DEV API, and StepZen Studio: [https://www.youtube.com/watch?v=pwO_dTYUFT8](https://www.youtube.com/watch?v=pwO_dTYUFT8)
* StepZen GraphQL Studio: [https://graphql.stepzen.com](https://graphql.stepzen.com/)
* StepZen Home Page: [https://www.stepzen.com](https://www.stepzen.com)
Empower your Content with Prismic
Tags: webdev, javascript, beginners, podcast
Published: 2022-08-23 22:29:03


Original: https://codingcat.dev/podcast/2-12-empower-your-content-with-prismic

{% youtube https://www.youtube.com/watch?v=keQAGNVOv9Q %}

## Questions

1. How did you get started at Prismic?
  1. What made you want to work there?
2. What makes Prismic special from all the other CMS’s that are out there?
3. Slices 
  1. Hero Section
  2. Logo cloud
  3. Image slider
4. Prismic SliceMachine (Local dev environment for websites)
5. Who is Prismic’s target audience?
6. Getting started code demo
7. What made you start Frontend Horse?
  1. Where did the horse come from?
Build faster websites with Astro
Tags: webdev, javascript, beginners, podcast
Published: 2022-08-23 22:24:03


Original: https://codingcat.dev/podcast/2-11-build-faster-websites-with-astro

{% youtube https://www.youtube.com/watch?v=vw-c0FSse5o %}

## Questions

1. The Astro Technology Company - [https://astro.build/blog/the-astro-technology-company/](https://astro.build/blog/the-astro-technology-company/)
2. What was the motivation behind creating something that uses multiple languages?
3. What developers or companies are you targeting with Astro?
4. Can you explain what islands architecture is?
5. Can you explain what Partial Hydration means? [https://docs.astro.build/en/core-concepts/component-hydration/](https://docs.astro.build/en/core-concepts/component-hydration/)
6. Are A11y warnings apart of Astro?
7. Astro Technology under the hood
  * A new Astro compiler, **written in [Go](https://golang.org/)**
  * A new build engine, **powered by [Vite](http://vitejs.dev/)**
8. How is Astro similar or different from Gatsby, Hugo, 11ty?
9. WASM - Figma post [https://www.figma.com/blog/an-update-on-plugin-security/](https://www.figma.com/blog/an-update-on-plugin-security/)
Creative Coding to Boost your Skills
Tags: webdev, javascript, beginners, podcast
Published: 2022-08-23 22:19:03


Original: https://codingcat.dev/podcast/2-10-creative-coding-to-boost-your-skills

{% youtube https://www.youtube.com/watch?v=FM8fIqsD3eo %}

## Questions

1. Can you go more into what a polyglot is and what tools you work with?
2. Do you have a favorite tool?
3. What does your process look like for tackling a problem?
4. What do you think makes you want to create tooling around your process?
5. What is your background?
6. How did you get started making whimsical codepens?
7. Where do you get your ideas?
8. How do you keep track of your ideas?
9. What was the origination of the Jhey Bear?
10. You have had some pretty big clients along the way and some awesome projects, can you talk about any of them?
11. How do you go about getting clients?
Getting GraphiQL with WordPress
Tags: webdev, javascript, beginners, podcast
Published: 2022-08-23 22:14:00


Original: https://codingcat.dev/podcast/2-9-getting-graphiql-with-wordpress

{% youtube https://www.youtube.com/watch?v=1HZyAoXuaVE %}

## Questions

1. Tell us a little bit about your background.
2. How did you get involved in GraphQl with WordPress?
3. Will GraphQL ever get put into the WordPress core?
4. What is the easiest way to setup WordPress and WPGraphQL for a greenfield project?
5. WPGraphQL demo.
6. GraphQL Fragments - [https://www.apollographql.com/docs/react/data/fragments/](https://www.apollographql.com/docs/react/data/fragments/)
7. Pagination - [https://graphql.org/learn/pagination/](https://graphql.org/learn/pagination/)
8. Forward and Backward Pagination with WPGraphQL - [https://www.wpgraphql.com/2020/03/26/forward-and-backward-pagination-with-wpgraphql/](https://www.wpgraphql.com/2020/03/26/forward-and-backward-pagination-with-wpgraphql/)
9. Atlas Content Model Demo

## Additional Links

* WPGraphQL GitHub - https://github.com/wp-graphql/wp-graphql
* WPGraphQL Wordpress Plugin - [https://wordpress.org/plugins/wp-graphql/](https://wordpress.org/plugins/wp-graphql/)
* Wordpress to Jamstack - [https://codingcat.dev/podcast/1-11-moving-from-wordpress-to-jamstack](https://codingcat.dev/podcast/1-11-moving-from-wordpress-to-jamstack)
* Wordpress.tv
* developers.wpengine.com
*
2.8 - Powering up with Gatsby 4 and GatsbyConf
Tags: podcast, webdev, javascript, beginners
Published: 2022-08-23 22:11:00

Original: https://codingcat.dev/podcast/2-8-powering-up-with-gatsby-4-and-gatsbyconf
            {% youtube https://www.youtube.com/watch?v=uYP2GKOQvIs %}
            {% spotify spotify:episode:13LS987IGxdrpgpxi7Ixks %}
Comprehensive Capture Siri Shortcut Demo
Tags: automation, sirishortcuts, ios, opensource
Published: 2022-08-23 22:07:00

Running [**my personal web page/article capturing Siri Shortcut**](https://davidblue.wtf/capture) on my iPhone 12 Pro Max with a short tour through its potential outputs.

Hoping to formalize the documentation/version tracking for this one as much as possible via [this GitHub repo](https://github.com/extratone/capture), going forward.
Difference between first-child and first-of-type pseudo selector.
Tags: codepen
Published: 2022-08-23 21:57:00

Here :>

```
<div>
  <h1>First Heading</h1>
  <p>First Paragraph</p>
  <p>First Paragraph</p>
  <p>First Paragraph</p>
  <h1>Last Heading</h1>
<div>
```

```
p:first-child{
  color:red;
}

p:last-child{
  color:blue;
}
p:first-of-type{
  color:orange;
}
p:last-of-type{
  color:green
}
```
Day 136: Enjoying frontend now
Published: 2022-08-23 21:54:45

Hi!

I can say that I'm now enjoying frontend work more an more as time passes designs are now coming more naturally and getting better with css everyday the aspect that I'm still not comfortable with is responsiveness I alway force myself trying mobile first design but I endep going with desktop first and the responsiveness will be a pain in the neck but I will keep trying 

Today I made progress on the page I was designing yesterday and added a bit of responsiveness and so far so good. Tomorrow I will try to learn about css Grid, I have been using css Flexbox for most of the designs but there are some components that I feel it would be easier to implement with grid and I will learn css grid either way so why not do it while I'm still at it 

I will get back tomorrow

signing off...
Hello UX World
Tags: ux, design, beginners
Published: 2022-08-23 21:44:05


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t1pampzuwdypmedadk9a.jpeg)
Hi! My name is Julia and I have decided to pursue a career in UX design.

I have been working as an interpreter for an IT company for almost 3 years and as I was learning more about the digital world, I decided that I want to change the course of my career and embark on a journey to become a UX designer.

## Why I chose a UX designer path:

- 
I’m obsessed with aesthetics, details, and colors. I see it everywhere: buildings, nature, clothes, and people. I draw inspiration from my environment.

- 
I feel a have a lot of needed qualities: I am empathic and I can put myself in other people’s shoes which is helpful when it comes to UX research. I can generate ideas and thrive in a creative team but I also can be very meticulous and tedious tasks don’t scare me.

- 
I want to see the results of my work and see people enjoying the products.

- 
I wanted to have an opportunity to work from anywhere in the world and at the same time be a part of a close-knit team.

## Here is my game plan:
My current goal is to get an entry-level job as a UX designer and to reach that goal I came up with a plan:

1. Learn the theory of UX design by signing up for an online course and completing it ahead of the schedule.

2. At the same time, start practicing designing prototypes in Figma but since I don't have a lot of knowledge, I'll start by copying existing designs.

3. Keep practicing and learning while working on my portfolio and asking for feedback to improve.

4. Documenting my journey and emerging myself in the world of design by reading and listening to podcasts.

5. Put together a good portfolio and start applying for entry-level jobs.
Koala Engine
Tags: typescript, gamedev, webdev, programming
Published: 2022-08-23 21:34:29

Hi, I've been working on a project for 3 weeks now, it's an ECS game engine written in Typescript for HTML Canvas.
Today i finally decided to choose a name, "Koala Engine" and a logo:

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

The project is open source under the MIT license on github: https://github.com/lorenzo774/koala-engine.
Contribution is appreciated!

----

Twitter: https://twitter.com/774Lorenzo
Como deixar as imagens nos documentos no Confluence mais acessíveis
Tags: acessibilidade, devrel, braziliandevs, community
Published: 2022-08-23 21:14:00

Muitas empresas e pessoas utilizam a ferramenta [Confluence](https://www.atlassian.com/br/software/confluence) para documentação e gestão de conhecimento de seus times. Mas você sabia que existe uma forma de deixarmos nossos conteúdos mais acessíveis mesmo ao utilizar imagens dentro do Confluence?

## Como fazer
Ao adicionar uma imagem no documento criado no Confluence, você pode utilizar um recurso da própria ferramenta para adicionar uma descrição a ela. Isso facilitará que pessoas com deficiência visual compreendam o que há na imagem que você incluiu.

**1)** Após adicionar a imagem, você pode clicar sobre ela com o botão esquerdo do seu mouse. Ao fazer esse procedimento, você notará que existem algumas opções. Uma delas será "Propriedades".

![Print da tela do confluence com uma foto adicionada ao documento. Logo abaixo da foto, há um pequeno menu com diversas opções. A última opção é a que está em destaque e se chama "Propriedades". Com o cursor em cima dessa oção, está aparecendo o texto "Configurar propriedades de imagem adicional".](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hbuvjym3i1g7g08hrtei.png)

**2)** Quando você clicar nessa opção "Propriedades", uma nova janela se abrirá com alguns campos para preencher. Um deles se chama "Alt texto" e dentro deste espaço, você poderá adicionar a descrição da imagem.

![Print da janela que se abriu chamada "Propriedades da imagem". Do lado esquerdo há as opções "Efeitos" e "Títulos". Do lado direito temos o campo "Título da Etiqueta" e "Alt texto" com o campo preenchido. No canto direito inferior temos os botões "Guardar" e "Cancelar".](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/72v1tb55lhn9asjgzbss.png)

**3)** Depois dessa etapa, basta clicar no botão "Guardar" e as informações adicionadas serão salvas na imagem para que o leitor de tela consiga descrever do que se trata.

## Dica de ordem de descrição
Em conversas com um amigo de trabalho chamado Daniel Meneses, recebi mais algumas dicas de como deixar a descrição de maneira que fique mais fácil compreender. Ele disse que o ideal é que a descrição da imagem seja feita da esquerda para a direita e de cima para baixo.

---

Espero que as dicas sejam úteis e, caso você também tenha dicas de acessibilidade que podem ajudar, compartilhe! Pretendo trazer outras dicas também que tenho aprendido no dia-a-dia, então continue acompanhando as próximas postagens.

Obrigada por ter lido o artigo e deixo o canal aberto para troca de ideias e feedbacks.
Руководство по установке Aptos CLI
Tags: blockchain, aptos, tutorial, developer
Published: 2022-08-23 21:13:00

Утилита `aptos` - это интерфейс командной строки (CLI) для отладки, разработки и работы с нодой. В этом руководстве описано, как установить утилиту `aptos` CLI.

## Установка предварительно скомпилированных бинарных файлов (простой режим)

1. Перейдите на [страницу выпуска](https://aptos.dev/cli-tools/aptos-cli-tool/install-aptos-cli#:~:text=Navigate%20to%20the-,release%20page,-for%20Aptos%20CLI) Aptos CLI.
2. В разделе последних выпусков загрузите бинарный zip-файл для вашей платформы. Бинарные zip-файлы содержат название платформы в имени файла.
3. Распакуйте загруженный файл. Это приведет к извлечению инструмента `aptos` CLI.
4. Поместите извлеченный файл `aptos` в то место, где вы сможете его запустить. Например, поместите его в `~/bin/aptos` в Linux.
5. В Linux и Mac сделайте `~/bin/aptos` исполняемым файлом, выполнив следующую команду: `chmod +x ~/bin/aptos`.
6. Введите `~/bin/aptos help`, чтобы прочитать инструкции.
7. Добавьте `~/bin` к вашему пути в соответствующих `.bashrc` или `.zshrc` для дальнейшего использования.


## Установка с cargo

**Шаг 1. Установите cargo**

Для установки утилиты `aptos` CLI вам понадобится менеджер package `cargo`. Выполните следующие шаги.

1. [Следуйте инструкциям по установке](https://doc.rust-lang.org/cargo/getting-started/installation.html) `cargo` на этой странице и установите `cargo`. Приступайте к работе только после успешной установки `cargo`.
2. Выполните следующее действие, чтобы убедиться, что ваша текущая среда разработки знает, где находится `cargo`.

```javascript
source $HOME/.cargo/env

```
**Шаг 2: Установите aptos CLI**

1.Установите зависимости перед компиляцией:

- Для Debian или Ubuntu: `sudo apt install build-essential pkg-config openssl libssl-dev libclang-dev`.
- Для RHEL или Centos: s`udo yum install pkgconfig openssl openssl-devel clang`.
- Для других: Вручную установите `pkg-config` `openssl`, `libssl` и `libclang`

    `pkg-config`:
     Загрузите и распакуйте исходный код по адресу 
     https://pkgconfig.freedesktop.org/releases/.
     `./configure --prefix=/usr/local/pkg_config/0_29_2 -- 
       with-internal-glib`
       `sudo make && sudo make install`

     `openssl` и `libssl`:
      Полные инструкции см. на [сайте](https://wiki.openssl.org/index.php/Compilation_and_Installation)                              


     `libclang`:
      Полные инструкции см. на [сайте](https://clang.llvm.org/get_started.html) 


2.Установите утилиту `aptos` CLI, выполнив приведенную ниже команду. **Для AIT-3 используйте `testnet` вместо `devnet`**. Вы можете запустить эту команду из любой директории. Инструмент `aptos` CLI будет установлен в ваш `CARGO_HOME`, обычно `~/.cargo`:

```javascript
cargo install --git https://github.com/aptos-labs/aptos-core.git aptos --branch devnet
```
3.Убедитесь, что утилита `aptos` CLI успешно установлена, выполнив приведенную ниже команду. Терминал отобразит путь к местоположению `aptos` CLI.

```javascript
which aptos
```
Paracetamol.js💊| #182: Explica este código JavaScript
Tags: javascript, webdev, spanish, programming
Published: 2022-08-23 21:05:00

## **<center>Explica este código JavaScript</center>**
#### <center>**Dificultad:** <mark>Básico</mark></center>

```js
const persons = [
  {
    surname: 'Zoe',
    address: {
      street: {
        name: 'Sesame Street',
        number: '123',
      },
    },
  },
  {
    surname: 'Mariner',
  },
  {
    surname: 'Carmen',
    address: {
    },
  },
];

const f = (arr) => {
  return arr.map((person) => {
    return person?.address?.street?.name
  })
}

console.log(f(persons)) //?
```

A. `['Sesame Street', null, null]`
B. `['Sesame Street', undefined , undefined]`
C. `[undefined, undefined, undefined]`
D. `['Sesame Street']`

Respuesta en el primer comentario.

---
.NET - Create a Simple CLI Tool
Tags: csharp, dotnet, vscode, cli
Published: 2022-08-23 21:02:00

.NET CLI tools are basically console applications with different configuration. 

1. Create a console application.
    ```sh
    dotnet new console -o MyTool
    ```  

2. Write something.
    ```cs
    Console.WriteLine($"Hello, {args[0]}!");
    ```

3. Edit .csproj file.
    ```xml
    <ItemGroup>
        <PackAsTool>true</PackAsTool>
        <ToolCommandName>MyTool</ToolCommandName>
        <PackageOutputPath>./nupkg</PackageOutputPath>
    </ItemGroup>
    ```

4. Create a nuget package.
    ```sh
    dotnet pack
    ```

5. Install the tool globally.

    ```sh
    dotnet tool install --global --add-source path/to/nupkg MyTool    
    ```

6. Use the tool.    
    ```sh
    dotnet MyTool "John"
    ```
    Output:
    ```sh
    Hello, John!
    ```

## Resource
[Microsoft Docs](https://docs.microsoft.com/en-us/dotnet/core/tools/global-tools-how-to-create)
Ng-News: Episode 22/33
Tags: javascript, webdev, angular, programming
Published: 2022-08-23 20:41:32

{% embed https://youtu.be/jHKPhhC8XAI %}

## Cypress Component Test Runner

We have a new way how to write component tests in Angular. So in a component test, we use the DOM to interact with the actual component. These kind of tests are very hard because you have to manage asynchrony, change detection and sometimes even manually dispatch certain DOM events. Until now, Jest and Karma were the testing frameworks we could use for that.

On the other side, we have E2E frameworks, like Cypress. Writing those kind of tests are much easier but the tests always were executed against a running application. So it is not possible to test a single component in isolation.

Since last week, Cypress supports component tests in Angular. You can see this as the best of both worlds. It combines the possibility to test components in isolation with the easiness of Cypress.

This feature is still in beta status. Expect some bugs which will be resolved very soon. If you use nx, an alternative to the Angular CLI, then you have to wait a little bit. But nx integration is already a priortized issue.

For more information, Cypress provides an excellent documentation. You can also look out for Jordan Powell's videos on YouTube and - shameless self-promotion - watch my own video also on YouTube.

{% embed https://youtu.be/weWTHGWe6uU %}

{% embed https://youtu.be/wbsTfi4V0Jw %}

## NgRx 14.2

We had a minor version upgrade for NgRx, a state management library, to 14.2. 
ChangeLog: https://github.com/ngrx/platform/blob/master/CHANGELOG.md

## Angular 14.2 Release Candidate

And for the next minor of Angular itself, also 14.2, we have the first release candidate. According to the changelog, it looks like we can expect quite a lot of new features.

ChangeLog: https://github.com/angular/angular/releases